From 7ea33913c23227a93851338325f2fadd556d0a74 Mon Sep 17 00:00:00 2001
From: Matt Stow <matt@mattstow.com>
Date: Fri, 20 Dec 2024 12:56:26 +1100
Subject: [PATCH 1/4] icon: Created new icon, ProgressNotRequiredIcon (#1919)

---
 .changeset/plop-create-ProgressNotRequired.md |  5 +++++
 docs/components/designSystemComponents.tsx    |  1 +
 .../src/icon/__snapshots__/Icon.test.tsx.snap | 21 +++++++++++++++++++
 .../icon/icons/ProgressNotRequiredIcon.tsx    |  6 ++++++
 packages/react/src/icon/index.ts              |  1 +
 packages/react/src/icon/utils.tsx             |  2 ++
 6 files changed, 36 insertions(+)
 create mode 100644 .changeset/plop-create-ProgressNotRequired.md
 create mode 100644 packages/react/src/icon/icons/ProgressNotRequiredIcon.tsx

diff --git a/.changeset/plop-create-ProgressNotRequired.md b/.changeset/plop-create-ProgressNotRequired.md
new file mode 100644
index 000000000000..53eadbca0127
--- /dev/null
+++ b/.changeset/plop-create-ProgressNotRequired.md
@@ -0,0 +1,5 @@
+---
+'@ag.ds-next/react': minor
+---
+
+icon: Created new icon, ProgressNotRequiredIcon.
diff --git a/docs/components/designSystemComponents.tsx b/docs/components/designSystemComponents.tsx
index 22f584c3c6dd..bfda28164450 100644
--- a/docs/components/designSystemComponents.tsx
+++ b/docs/components/designSystemComponents.tsx
@@ -128,6 +128,7 @@ export {
 	PrintIcon,
 	ProgressBlockedIcon,
 	ProgressDoingIcon,
+	ProgressNotRequiredIcon,
 	ProgressTodoIcon,
 	ScrollbarArrowLeftIcon,
 	ScrollbarArrowRightIcon,
diff --git a/packages/react/src/icon/__snapshots__/Icon.test.tsx.snap b/packages/react/src/icon/__snapshots__/Icon.test.tsx.snap
index b776d9a7a576..43fa01ad0a76 100644
--- a/packages/react/src/icon/__snapshots__/Icon.test.tsx.snap
+++ b/packages/react/src/icon/__snapshots__/Icon.test.tsx.snap
@@ -1288,6 +1288,27 @@ exports[`Icon ProgressDoingIcon renders correctly 1`] = `
 </div>
 `;
 
+exports[`Icon ProgressNotRequiredIcon renders correctly 1`] = `
+<div>
+  <svg
+    aria-hidden="true"
+    class="css-lq07bo-Icon"
+    clip-rule="evenodd"
+    fill-rule="evenodd"
+    focusable="false"
+    height="24"
+    role="img"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m4.93 4.93 14.14 14.14M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"
+    />
+  </svg>
+</div>
+`;
+
 exports[`Icon ProgressPausedIcon renders correctly 1`] = `
 <div>
   <svg
diff --git a/packages/react/src/icon/icons/ProgressNotRequiredIcon.tsx b/packages/react/src/icon/icons/ProgressNotRequiredIcon.tsx
new file mode 100644
index 000000000000..7b99d0e490d5
--- /dev/null
+++ b/packages/react/src/icon/icons/ProgressNotRequiredIcon.tsx
@@ -0,0 +1,6 @@
+import { createIcon } from '../Icon';
+
+export const ProgressNotRequiredIcon = createIcon(
+	<path d="m4.93 4.93 14.14 14.14M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" />,
+	'ProgressNotRequiredIcon'
+);
diff --git a/packages/react/src/icon/index.ts b/packages/react/src/icon/index.ts
index 827826dd0404..3ae3de80ddca 100644
--- a/packages/react/src/icon/index.ts
+++ b/packages/react/src/icon/index.ts
@@ -60,6 +60,7 @@ export { PlusIcon } from './icons/PlusIcon';
 export { PrintIcon } from './icons/PrintIcon';
 export { ProgressBlockedIcon } from './icons/ProgressBlockedIcon';
 export { ProgressDoingIcon } from './icons/ProgressDoingIcon';
+export { ProgressNotRequiredIcon } from './icons/ProgressNotRequiredIcon';
 export { ProgressPausedIcon } from './icons/ProgressPausedIcon';
 export { ProgressTodoIcon } from './icons/ProgressTodoIcon';
 export { ScrollbarArrowLeftIcon } from './icons/ScrollbarArrowLeftIcon';
diff --git a/packages/react/src/icon/utils.tsx b/packages/react/src/icon/utils.tsx
index 5396035a9b4e..8126e148043e 100644
--- a/packages/react/src/icon/utils.tsx
+++ b/packages/react/src/icon/utils.tsx
@@ -53,6 +53,7 @@ import { PlusIcon } from './icons/PlusIcon';
 import { PrintIcon } from './icons/PrintIcon';
 import { ProgressBlockedIcon } from './icons/ProgressBlockedIcon';
 import { ProgressDoingIcon } from './icons/ProgressDoingIcon';
+import { ProgressNotRequiredIcon } from './icons/ProgressNotRequiredIcon';
 import { ProgressPausedIcon } from './icons/ProgressPausedIcon';
 import { ProgressTodoIcon } from './icons/ProgressTodoIcon';
 import { ScrollbarArrowLeftIcon } from './icons/ScrollbarArrowLeftIcon';
@@ -130,6 +131,7 @@ export const allIcons = {
 	PrintIcon,
 	ProgressBlockedIcon,
 	ProgressDoingIcon,
+	ProgressNotRequiredIcon,
 	ProgressPausedIcon,
 	ProgressTodoIcon,
 	ScrollbarArrowLeftIcon,

From ddbcf4aa6de61589dc8349c259a02534aacdab8e Mon Sep 17 00:00:00 2001
From: writetosalman <write.to.salman@gmail.com>
Date: Fri, 3 Jan 2025 09:41:59 +1100
Subject: [PATCH 2/4] TaskList: task list to support `notRequired` status
 (#1884)

Co-authored-by: Matt Stow <matt@mattstow.com>
---
 .changeset/many-dancers-invent.md                 |  6 ++++++
 packages/react/src/task-list/TaskList.stories.tsx |  4 ++--
 packages/react/src/task-list/TaskListItem.tsx     |  7 +++++++
 packages/react/src/task-list/docs/overview.mdx    | 11 ++++++++++-
 4 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/many-dancers-invent.md

diff --git a/.changeset/many-dancers-invent.md b/.changeset/many-dancers-invent.md
new file mode 100644
index 000000000000..173b36eb9d8e
--- /dev/null
+++ b/.changeset/many-dancers-invent.md
@@ -0,0 +1,6 @@
+---
+'@ag.ds-next/react': minor
+'@ag.ds-next/docs': minor
+---
+
+task-list: Add new `'notRequired'` status.
diff --git a/packages/react/src/task-list/TaskList.stories.tsx b/packages/react/src/task-list/TaskList.stories.tsx
index 54ff163470f7..4dc93e7ac242 100644
--- a/packages/react/src/task-list/TaskList.stories.tsx
+++ b/packages/react/src/task-list/TaskList.stories.tsx
@@ -33,8 +33,8 @@ const exampleLinkItems: TaskListProps['items'] = [
 	{
 		href: '#',
 		label: 'Export',
-		message: 'Short description of the task',
-		status: 'todo',
+		message: 'This step is no longer required based on your selection criteria',
+		status: 'notRequired',
 	},
 	{
 		href: '#',
diff --git a/packages/react/src/task-list/TaskListItem.tsx b/packages/react/src/task-list/TaskListItem.tsx
index beb45856295a..20e869cddad4 100644
--- a/packages/react/src/task-list/TaskListItem.tsx
+++ b/packages/react/src/task-list/TaskListItem.tsx
@@ -3,6 +3,7 @@ import { Flex } from '../flex';
 import { Text } from '../text';
 import { TextLink } from '../text-link';
 import {
+	ProgressNotRequiredIcon,
 	ProgressDoingIcon,
 	SuccessFilledIcon,
 	ProgressTodoIcon,
@@ -75,6 +76,7 @@ const TaskListItem = ({
 	...props
 }: TaskListItemProps) => {
 	const { icon: Icon, iconColor, label } = statusMap[status];
+
 	return (
 		<li css={{ counterIncrement: 'task-count' }}>
 			<Flex
@@ -182,6 +184,11 @@ const TaskListItem = ({
 };
 
 const statusMap = {
+	notRequired: {
+		label: 'No longer required',
+		icon: ProgressNotRequiredIcon,
+		iconColor: 'border',
+	},
 	blocked: {
 		label: 'Cannot start yet',
 		icon: ProgressBlockedIcon,
diff --git a/packages/react/src/task-list/docs/overview.mdx b/packages/react/src/task-list/docs/overview.mdx
index 49cdb4a10ed5..f5fb279f6a5a 100644
--- a/packages/react/src/task-list/docs/overview.mdx
+++ b/packages/react/src/task-list/docs/overview.mdx
@@ -23,7 +23,7 @@ relatedComponents: ['progress-indicator']
 		{
 			href: '#',
 			label: 'Case Studies',
-			status: 'todo',
+			status: 'notRequired',
 		},
 		{
 			href: '#',
@@ -104,6 +104,15 @@ You can indicate the status of each task using the `status` parameter. The follo
 				The task cannot be completed until other tasks have been.
 			</TableCell>
 		</TableRow>
+		<TableRow>
+			<TableCell>
+				<code>notRequired</code>
+			</TableCell>
+			<TableCell>No longer required</TableCell>
+			<TableCell>
+				The task is no longer required based on your selection criteria.
+			</TableCell>
+		</TableRow>
 	</TableBody>
 </Table>
 

From 55637c9875988f6b2d2a1de83d072ac77c75d113 Mon Sep 17 00:00:00 2001
From: Matt Stow <matt@mattstow.com>
Date: Mon, 6 Jan 2025 09:36:50 +1100
Subject: [PATCH 3/4] loading: Announce fullscreen LoadingBlanket assertively
 (#1916)

---
 .changeset/itchy-coats-argue.md                    | 5 +++++
 packages/react/src/loading/LoadingBlanket.tsx      | 4 +++-
 packages/react/src/loading/LoadingBlanketLabel.tsx | 8 ++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/itchy-coats-argue.md

diff --git a/.changeset/itchy-coats-argue.md b/.changeset/itchy-coats-argue.md
new file mode 100644
index 000000000000..56d78ebcc535
--- /dev/null
+++ b/.changeset/itchy-coats-argue.md
@@ -0,0 +1,5 @@
+---
+'@ag.ds-next/react': patch
+---
+
+loading: Announce `'fullscreen'` `LoadingBlanket` assertively.
diff --git a/packages/react/src/loading/LoadingBlanket.tsx b/packages/react/src/loading/LoadingBlanket.tsx
index cbffdd18fd02..debe83359742 100644
--- a/packages/react/src/loading/LoadingBlanket.tsx
+++ b/packages/react/src/loading/LoadingBlanket.tsx
@@ -18,7 +18,9 @@ export const LoadingBlanket = ({
 	<LoadingBlanketContainer fullScreen={fullScreen}>
 		<LoadingBlanketContent>
 			<LoadingDots size={fullScreen ? 'lg' : 'md'} />
-			<LoadingBlanketLabel>{label}</LoadingBlanketLabel>
+			<LoadingBlanketLabel role={fullScreen ? 'alert' : 'status'}>
+				{label}
+			</LoadingBlanketLabel>
 		</LoadingBlanketContent>
 	</LoadingBlanketContainer>
 );
diff --git a/packages/react/src/loading/LoadingBlanketLabel.tsx b/packages/react/src/loading/LoadingBlanketLabel.tsx
index 7de85b31561c..ab817562d3fd 100644
--- a/packages/react/src/loading/LoadingBlanketLabel.tsx
+++ b/packages/react/src/loading/LoadingBlanketLabel.tsx
@@ -3,10 +3,14 @@ import { Text } from '../text';
 
 export type LoadingBlanketLabelProps = {
 	children: ReactNode;
+	role: 'alert' | 'status';
 };
 
-export const LoadingBlanketLabel = ({ children }: LoadingBlanketLabelProps) => (
-	<Text fontSize="lg" fontWeight="bold" lineHeight="heading" role="status">
+export const LoadingBlanketLabel = ({
+	children,
+	role,
+}: LoadingBlanketLabelProps) => (
+	<Text fontSize="lg" fontWeight="bold" lineHeight="heading" role={role}>
 		{children}
 	</Text>
 );

From 6c7351c58dba507f7b838c6fefe288eeef072332 Mon Sep 17 00:00:00 2001
From: Matt Stow <matt@mattstow.com>
Date: Mon, 6 Jan 2025 16:38:16 +1100
Subject: [PATCH 4/4] chore: Added react/jsx-sort-props eslint rule & sorted
 all props (#1920)

---
 .changeset/little-jars-search.md              |   8 +
 .eslintrc.js                                  |  25 +--
 .storybook/components/LinkComponent.tsx       |   4 +-
 .storybook/components/PageTemplate.tsx        |   6 +-
 .storybook/preview.tsx                        |   6 +-
 .../stories/DataFiltering/ListFiltering.tsx   |  24 +--
 .../stories/DataFiltering/Table.stories.tsx   |   6 +-
 .../DataFiltering/TableFilteringLarge.tsx     |   8 +-
 .../DataFiltering/TableFilteringMedium.tsx    |  19 ++-
 .../DataFiltering/TableFilteringSmall.tsx     |   2 +-
 .../components/ActiveFilters.tsx              |   6 +-
 .../components/DashboardFilterDrawer.tsx      |  12 +-
 .../components/DashboardPagination.tsx        |   4 +-
 .../DataFiltering/components/DataList.tsx     |  10 +-
 .../DataFiltering/components/DataTable.tsx    |  24 +--
 .../components/DataTableBatchActionsBar.tsx   |  10 +-
 .../DataFiltering/components/DataTableRow.tsx |   4 +-
 .../components/DataTableSelectAllCheckbox.tsx |   2 +-
 .../components/FilterAccordion.tsx            |  18 +--
 .../components/FilterAssigneeSelect.tsx       |  18 +--
 .../DataFiltering/components/FilterBar.tsx    |  16 +-
 .../components/FilterDestinationsSelect.tsx   |  18 +--
 .../components/FilterSearchInput.tsx          |   8 +-
 .../components/FilterServicesSelect.tsx       |   8 +-
 .../components/FilterStateSelect.tsx          |  12 +-
 .../components/FilterStatusSelect.tsx         |  20 +--
 .../DataFiltering/components/SortBySelect.tsx |  18 +--
 .../DataLoadingWithCards.stories.tsx          |   2 +-
 .../DataLoading/DataLoadingWithCards.tsx      |   8 +-
 .../DataLoadingWithTable.stories.tsx          |   2 +-
 .../DataLoading/DataLoadingWithTable.tsx      |  26 +--
 .../stories/FormFields/FormFields.stories.tsx |  34 ++--
 .../KitchenSink/KitchenSink.stories.tsx       | 152 +++++++++---------
 .../ModalAddTrackingNumber.tsx                |  20 +--
 .../ModalConfirmDelete.tsx                    |   8 +-
 .../SelectableTableBatchActions.tsx           |  42 ++---
 .../TableFilters.tsx                          |  10 +-
 .../useNotification.tsx                       |   4 +-
 docs/components/AllIconsPlayground.tsx        |  10 +-
 docs/components/Code.tsx                      |  60 +++----
 docs/components/ConditionalFieldContainer.tsx |   2 +-
 docs/components/DoDontHeading.tsx             |   4 +-
 docs/components/DocumentTitle.tsx             |   2 +-
 docs/components/FigmaLogo.tsx                 |   8 +-
 docs/components/GithubLogo.tsx                |  12 +-
 docs/components/LinkComponent.tsx             |   4 +-
 docs/components/PageLayout.tsx                |   2 +-
 docs/components/PageTitle.tsx                 |   4 +-
 docs/components/PatternLayout.tsx             |  20 +--
 docs/components/PictogramCard.tsx             |   4 +-
 docs/components/PkgCardList.tsx               |  10 +-
 docs/components/PkgLayout.tsx                 |  22 +--
 docs/components/SiteFooter.tsx                |   2 +-
 docs/components/SiteHeader.tsx                |   6 +-
 docs/components/StorybookLogo.tsx             |  10 +-
 docs/components/TemplateLayout.tsx            |  22 +--
 docs/components/TokenCharts.tsx               |  24 +--
 docs/components/TokenColorTable.tsx           |  10 +-
 docs/components/TokenLayout.tsx               |   8 +-
 docs/components/mdxComponents.tsx             |  26 +--
 docs/next-env.d.ts                            |   2 +-
 docs/pages/_app.tsx                           |  18 +--
 docs/pages/about.tsx                          |   4 +-
 .../pages/components/[slug]/accessibility.tsx |   6 +-
 docs/pages/components/[slug]/code.tsx         |   6 +-
 docs/pages/components/[slug]/content.tsx      |   6 +-
 docs/pages/components/[slug]/index.tsx        |   8 +-
 docs/pages/components/[slug]/rationale.tsx    |   6 +-
 docs/pages/components/index.tsx               |  26 +--
 docs/pages/content/[slug].tsx                 |  10 +-
 docs/pages/content/index.tsx                  |   8 +-
 docs/pages/foundations/[slug].tsx             |   8 +-
 docs/pages/foundations/index.tsx              |   8 +-
 docs/pages/foundations/tokens/[slug].tsx      |   6 +-
 docs/pages/foundations/tokens/border.tsx      |   8 +-
 docs/pages/foundations/tokens/colour.tsx      |  30 ++--
 docs/pages/foundations/tokens/index.tsx       |   8 +-
 docs/pages/foundations/tokens/max-width.tsx   |   6 +-
 docs/pages/foundations/tokens/typography.tsx  |   6 +-
 docs/pages/guides/[slug].tsx                  |  10 +-
 .../guides/how-to-write-guidance/[slug].tsx   |  12 +-
 .../guides/how-to-write-guidance/index.tsx    |   8 +-
 docs/pages/guides/index.tsx                   |   8 +-
 docs/pages/index.tsx                          |  20 +--
 docs/pages/patterns/[slug].tsx                |   6 +-
 docs/pages/patterns/index.tsx                 |   8 +-
 docs/pages/roadmap.tsx                        |   4 +-
 docs/pages/templates/[slug].tsx               |   8 +-
 docs/pages/templates/index.tsx                |  14 +-
 docs/pages/updates/[slug].tsx                 |   6 +-
 docs/pages/updates/index.tsx                  |   6 +-
 .../components/ConditionalFieldContainer.tsx  |   2 +-
 .../FormExampleMultiStep.tsx                  |   2 +-
 .../FormExampleMultiStep0.tsx                 |  16 +-
 .../FormExampleMultiStep1.tsx                 |  32 ++--
 .../FormExampleMultiStep2.tsx                 |  12 +-
 .../FormExampleMultiStep3.tsx                 |  22 +--
 .../FormExampleMultiStep4.tsx                 |  24 +--
 .../FormExampleMultiStepActions.tsx           |  16 +-
 .../FormExampleMultiStepContainer.tsx         |   8 +-
 .../components/FormRequiredFieldsMessage.tsx  |   2 +-
 example-site/components/FormStepTitle.tsx     |   8 +-
 example-site/components/LinkComponent.tsx     |   4 +-
 example-site/components/PageTitle.tsx         |   4 +-
 example-site/components/SiteFooter.tsx        |   2 +-
 example-site/components/SiteHeader.tsx        |   4 +-
 example-site/components/SiteLayout.tsx        |   2 +-
 example-site/components/TemplateBanner.tsx    |   6 +-
 example-site/next-env.d.ts                    |   2 +-
 example-site/pages/_app.tsx                   |  18 +--
 example-site/pages/category/index.tsx         |   6 +-
 .../pages/category/subcategory/content.tsx    |  14 +-
 .../pages/category/subcategory/index.tsx      |   8 +-
 .../subcategory/multi-page-form/form.tsx      |   2 +-
 .../subcategory/multi-page-form/index.tsx     |   4 +-
 .../subcategory/multi-page-form/success.tsx   |   2 +-
 .../subcategory/single-page-form-success.tsx  |   2 +-
 .../category/subcategory/single-page-form.tsx | 110 ++++++-------
 example-site/pages/index.tsx                  |  18 +--
 example-site/pages/sign-in-form.tsx           |  20 +--
 .../CollapsingSideBar.tsx                     |   6 +-
 packages/react/src/_popover/Popover.tsx       |   4 +-
 .../src/a11y/ExternalLinkCallout.test.tsx     |   2 +-
 .../react/src/a11y/VisuallyHidden.test.tsx    |   2 +-
 .../react/src/accordion/Accordion.stories.tsx |  30 ++--
 packages/react/src/accordion/Accordion.tsx    |   2 +-
 .../react/src/accordion/AccordionBody.tsx     |   6 +-
 .../react/src/accordion/AccordionItem.tsx     |   6 +-
 .../react/src/accordion/AccordionTitle.tsx    |  28 ++--
 .../react/src/ag-branding/Logo.stories.tsx    |   2 +-
 packages/react/src/ag-branding/Logo.tsx       |   8 +-
 .../src/app-layout/AppLayout.stories.tsx      |   2 +-
 .../react/src/app-layout/AppLayout.test.tsx   |  18 +--
 .../react/src/app-layout/AppLayoutContent.tsx |   2 +-
 .../app-layout/AppLayoutFooter.stories.tsx    |   2 +-
 .../react/src/app-layout/AppLayoutFooter.tsx  |  10 +-
 .../app-layout/AppLayoutHeader.stories.tsx    |   4 +-
 .../src/app-layout/AppLayoutHeaderAccount.tsx |  18 +--
 .../AppLayoutHeaderAccountDropdown.tsx        |  34 ++--
 .../src/app-layout/AppLayoutHeaderBrand.tsx   |  20 +--
 .../src/app-layout/AppLayoutHeaderNav.tsx     |   2 +-
 .../app-layout/AppLayoutSidebar.stories.tsx   |   2 +-
 .../src/app-layout/AppLayoutSidebarDialog.tsx |   4 +-
 .../src/app-layout/AppLayoutSidebarNav.tsx    |  12 +-
 packages/react/src/app-layout/test-utils.tsx  |  14 +-
 .../src/autocomplete/Autocomplete.stories.tsx |  14 +-
 .../src/autocomplete/Autocomplete.test.tsx    |   2 +-
 .../react/src/autocomplete/Autocomplete.tsx   |   2 +-
 packages/react/src/avatar/Avatar.stories.tsx  |  18 +--
 packages/react/src/avatar/Avatar.tsx          |  10 +-
 packages/react/src/box/Box.stories.tsx        |   8 +-
 packages/react/src/box/Box.tsx                |   2 +-
 .../react/src/breadcrumbs/Breadcrumbs.tsx     |   2 +-
 .../src/breadcrumbs/BreadcrumbsContainer.tsx  |   6 +-
 .../src/breadcrumbs/BreadcrumbsDivider.tsx    |   2 +-
 .../react/src/breadcrumbs/BreadcrumbsItem.tsx |   2 +-
 .../src/breadcrumbs/BreadcrumbsToggle.tsx     |  12 +-
 packages/react/src/button/BaseButton.tsx      |   6 +-
 packages/react/src/button/Button.test.tsx     |   2 +-
 packages/react/src/button/Button.tsx          |  14 +-
 packages/react/src/button/ButtonGroup.tsx     |   4 +-
 .../react/src/call-to-action/CallToAction.tsx |  10 +-
 .../react/src/callout/Callout.stories.tsx     |   2 +-
 packages/react/src/callout/Callout.tsx        |  10 +-
 packages/react/src/card/Card.stories.tsx      |  36 ++---
 packages/react/src/card/Card.test.tsx         |   2 +-
 packages/react/src/card/Card.tsx              |   6 +-
 packages/react/src/card/CardFooter.tsx        |   2 +-
 packages/react/src/card/CardHeader.tsx        |   2 +-
 .../react/src/checkbox/CheckboxContainer.tsx  |   8 +-
 .../react/src/checkbox/CheckboxIndicator.tsx  |  10 +-
 packages/react/src/checkbox/CheckboxInput.tsx |   2 +-
 packages/react/src/checkbox/CheckboxLabel.tsx |   2 +-
 packages/react/src/columns/Columns.tsx        |   2 +-
 .../react/src/combobox/Combobox.stories.tsx   |  14 +-
 packages/react/src/combobox/Combobox.test.tsx |  10 +-
 .../src/combobox/ComboboxAsync.stories.tsx    |  18 +--
 .../react/src/combobox/ComboboxAsync.test.tsx |   2 +-
 packages/react/src/combobox/ComboboxAsync.tsx |   8 +-
 .../combobox/ComboboxAsyncMulti.stories.tsx   |  18 +--
 .../src/combobox/ComboboxAsyncMulti.test.tsx  |  22 +--
 .../react/src/combobox/ComboboxAsyncMulti.tsx |   4 +-
 .../combobox/ComboboxBase/ComboboxBase.tsx    |  10 +-
 .../combobox/ComboboxBase/ComboboxButtons.tsx |  14 +-
 .../ComboboxBase/ComboboxMultiBase.tsx        |  18 +--
 .../ComboboxBase/ComboboxSearchIcon.tsx       |   4 +-
 .../src/combobox/ComboboxBase/ComboboxTag.tsx |  16 +-
 .../src/combobox/ComboboxMulti.stories.tsx    |  14 +-
 .../react/src/combobox/ComboboxMulti.test.tsx |   2 +-
 packages/react/src/combobox/ComboboxMulti.tsx |   4 +-
 .../combobox/ComboboxRenderItem.stories.tsx   |   2 +-
 packages/react/src/content/BaseContent.tsx    |  10 +-
 .../control-group/ControlGroup.stories.tsx    |   4 +-
 .../react/src/control-group/ControlGroup.tsx  |  12 +-
 packages/react/src/core/tokens.stories.tsx    |  36 ++---
 .../src/date-picker/Calendar.stories.tsx      |   4 +-
 packages/react/src/date-picker/Calendar.tsx   |  45 +++---
 .../src/date-picker/CalendarContainer.tsx     |   4 +-
 .../src/date-picker/DatePicker.stories.tsx    |   8 +-
 .../react/src/date-picker/DatePicker.test.tsx |  30 ++--
 packages/react/src/date-picker/DatePicker.tsx |  26 +--
 .../react/src/date-picker/DatePickerInput.tsx |  30 ++--
 .../DateRangePicker.stories.tsx               |   8 +-
 .../DateRangePicker.test.tsx                  |  36 ++---
 .../src/date-range-picker/DateRangePicker.tsx |  54 +++----
 packages/react/src/details/Details.tsx        |  10 +-
 .../src/direction-link/DirectionLink.tsx      |  10 +-
 packages/react/src/drawer/Drawer.stories.tsx  | 126 +++++++--------
 packages/react/src/drawer/Drawer.test.tsx     |  22 +--
 packages/react/src/drawer/Drawer.tsx          |   4 +-
 packages/react/src/drawer/DrawerDialog.tsx    |  32 ++--
 .../dropdown-menu/DropdownMenu.stories.tsx    |  80 ++++-----
 .../src/dropdown-menu/DropdownMenu.test.tsx   |  32 ++--
 .../src/dropdown-menu/DropdownMenuButton.tsx  |   2 +-
 .../src/dropdown-menu/DropdownMenuGroup.tsx   |  14 +-
 .../src/dropdown-menu/DropdownMenuItem.tsx    |  26 +--
 .../dropdown-menu/DropdownMenuItemRadio.tsx   |  20 +--
 .../src/dropdown-menu/DropdownMenuPanel.tsx   |  18 +--
 packages/react/src/field/Field.stories.tsx    |   2 +-
 packages/react/src/field/Field.test.tsx       |   6 +-
 packages/react/src/field/Field.tsx            |   6 +-
 packages/react/src/field/FieldContainer.tsx   |   6 +-
 packages/react/src/field/FieldHint.tsx        |   2 +-
 packages/react/src/field/FieldLabel.tsx       |   2 +-
 packages/react/src/field/FieldMessage.tsx     |  10 +-
 .../react/src/fieldset/Fieldset.stories.tsx   |  46 +++---
 packages/react/src/fieldset/Fieldset.test.tsx |   6 +-
 packages/react/src/fieldset/Fieldset.tsx      |   2 +-
 .../react/src/fieldset/FieldsetContainer.tsx  |   2 +-
 packages/react/src/fieldset/FieldsetHint.tsx  |   6 +-
 .../react/src/fieldset/FieldsetLegend.tsx     |   2 +-
 packages/react/src/file-input/FileInput.tsx   |   2 +-
 .../src/file-upload/FileUpload.stories.tsx    |  24 +--
 .../react/src/file-upload/FileUpload.test.tsx |   8 +-
 packages/react/src/file-upload/FileUpload.tsx |  10 +-
 .../file-upload/FileUploadFileThumbnail.tsx   |  12 +-
 .../filter-sidebar/FilterSidebar.stories.tsx  |  16 +-
 packages/react/src/flex/Flex.stories.tsx      |  50 +++---
 packages/react/src/flex/Flex.tsx              |   4 +-
 packages/react/src/footer/Footer.tsx          |   4 +-
 packages/react/src/footer/FooterDivider.tsx   |   2 +-
 .../react/src/global-alert/GlobalAlert.tsx    |  18 +--
 .../global-alert/GlobalAlertCloseButton.tsx   |   6 +-
 .../grouped-fields/GroupedFields.stories.tsx  |  20 +--
 .../src/grouped-fields/GroupedFields.test.tsx |   2 +-
 packages/react/src/header/Header.stories.tsx  |   2 +-
 packages/react/src/header/Header.test.tsx     |   4 +-
 packages/react/src/header/Header.tsx          |   2 +-
 packages/react/src/header/HeaderBrand.tsx     |  20 +--
 packages/react/src/header/HeaderContainer.tsx |   2 +-
 packages/react/src/heading/Heading.tsx        |  16 +-
 .../HeroBanner/HeroBanner.stories.tsx         |   6 +-
 .../HeroBanner/HeroBanner.test.tsx            |   4 +-
 .../HeroBanner/HeroBannerContent.tsx          |   6 +-
 .../HeroBanner/HeroBannerImage.tsx            |   4 +-
 .../HeroBanner/HeroBannerMobileImage.tsx      |   2 +-
 .../HeroBanner/HeroBannerTitle.tsx            |   2 +-
 .../HeroCategoryBanner.stories.tsx            |   6 +-
 .../HeroCategoryBanner.test.tsx               |   4 +-
 .../HeroCategoryBannerContent.tsx             |   6 +-
 .../HeroCategoryBannerImage.tsx               |   4 +-
 .../HeroCategoryBannerMobileImage.tsx         |   2 +-
 .../HeroCategoryBannerTitle.tsx               |   2 +-
 .../HeroSubcategoryBanner.stories.tsx         |   2 +-
 .../HeroSubcategoryBannerContent.tsx          |   2 +-
 .../HeroSubcategoryBannerTitle.tsx            |   2 +-
 packages/react/src/icon/Icon.stories.tsx      |  14 +-
 .../react/src/icon/icons/AlertFilledIcon.tsx  |   4 +-
 .../react/src/icon/icons/CalendarIcon.tsx     |   2 +-
 packages/react/src/icon/icons/CloseIcon.tsx   |   4 +-
 packages/react/src/icon/icons/CopyIcon.tsx    |   2 +-
 packages/react/src/icon/icons/MinusIcon.tsx   |   2 +-
 packages/react/src/icon/icons/PauseIcon.tsx   |   4 +-
 packages/react/src/icon/icons/SearchIcon.tsx  |   2 +-
 .../src/icon/icons/WarningFilledIcon.tsx      |   4 +-
 .../indicator-dot/IndicatorDot.stories.tsx    |   2 +-
 .../react/src/indicator-dot/IndicatorDot.tsx  |   2 +-
 .../src/inpage-nav/InpageNavContainer.tsx     |   6 +-
 .../react/src/link-list/LinkListContainer.tsx |   2 +-
 .../src/loading/LoadingBlanket.stories.tsx    |   8 +-
 .../src/loading/LoadingBlanketContainer.tsx   |   8 +-
 .../src/loading/LoadingBlanketContent.tsx     |   2 +-
 packages/react/src/loading/LoadingDots.tsx    |  16 +-
 .../react/src/main-nav/MainNav.stories.tsx    |  18 +--
 packages/react/src/main-nav/MainNav.test.tsx  |   2 +-
 .../react/src/main-nav/MainNavBottomBar.tsx   |   2 +-
 packages/react/src/main-nav/MainNavDialog.tsx |  14 +-
 .../src/main-nav/MainNavDialogNavList.tsx     |   4 +-
 packages/react/src/main-nav/MainNavList.tsx   |  10 +-
 .../react/src/main-nav/MainNavListItem.tsx    |   2 +-
 .../src/main-nav/MainNavListItemDropdown.tsx  |  42 ++---
 .../react/src/main-nav/MainNavMenuButtons.tsx |  40 ++---
 packages/react/src/modal/Modal.stories.tsx    |  34 ++--
 packages/react/src/modal/Modal.test.tsx       |  22 +--
 packages/react/src/modal/ModalCover.tsx       |   2 +-
 packages/react/src/modal/ModalDialog.tsx      |  10 +-
 packages/react/src/modal/ModalTitle.tsx       |   6 +-
 packages/react/src/page-alert/PageAlert.tsx   |  10 +-
 .../src/page-alert/PageAlertCloseButton.tsx   |   6 +-
 .../react/src/page-alert/PageAlertTitle.tsx   |   6 +-
 .../src/pagination/Pagination.stories.tsx     |   4 +-
 packages/react/src/pagination/Pagination.tsx  |  14 +-
 .../pagination/PaginationButtons.stories.tsx  |   4 +-
 .../src/pagination/PaginationButtons.tsx      |  14 +-
 .../src/pagination/PaginationContainer.tsx    |  10 +-
 .../pagination/PaginationItemDirection.tsx    |  24 +--
 .../src/pagination/PaginationItemPage.tsx     |  38 ++---
 .../PaginationItemsPerPageSelect.tsx          |   6 +-
 .../react/src/pagination/PaginationSelect.tsx |   8 +-
 .../src/password-input/PasswordInput.tsx      |   4 +-
 .../progress-indicator/ProgressIndicator.tsx  |   4 +-
 .../ProgressIndicatorItem.tsx                 |   6 +-
 .../ProgressIndicatorList.tsx                 |   2 +-
 packages/react/src/prose/Prose.stories.tsx    |   2 +-
 packages/react/src/prose/Prose.tsx            |   2 +-
 packages/react/src/radio/RadioContainer.tsx   |   8 +-
 packages/react/src/radio/RadioIndicator.tsx   |  16 +-
 packages/react/src/radio/RadioInput.tsx       |   2 +-
 packages/react/src/radio/RadioLabel.tsx       |   2 +-
 .../src/search-box/SearchBox.stories.tsx      |   2 +-
 packages/react/src/search-box/SearchBox.tsx   |   2 +-
 .../react/src/search-box/SearchBoxButton.tsx  |   6 +-
 .../react/src/search-box/SearchBoxInput.tsx   |   4 +-
 .../react/src/search-box/SearchBoxLabel.tsx   |   2 +-
 .../src/search-input/SearchInput.stories.tsx  |   2 +-
 .../react/src/search-input/SearchInput.tsx    |  18 +--
 .../search-input/SearchInputClearButton.tsx   |  10 +-
 .../src/search-input/SearchInputIcon.tsx      |   4 +-
 .../src/section-alert/SectionAlert.test.tsx   |   2 +-
 .../SectionAlertDismissButton.tsx             |   6 +-
 packages/react/src/select/Select.stories.tsx  |   6 +-
 packages/react/src/select/Select.tsx          |  16 +-
 .../react/src/side-nav/SideNav.stories.tsx    |   2 +-
 packages/react/src/side-nav/SideNav.test.tsx  |   4 +-
 packages/react/src/side-nav/SideNavLink.tsx   |  18 +--
 packages/react/src/skeleton/SkeletonBox.tsx   |  16 +-
 .../src/skeleton/SkeletonHeading.stories.tsx  |   2 +-
 .../src/skeleton/SkeletonText.stories.tsx     |   4 +-
 packages/react/src/skip-link/SkipLinkItem.tsx |   4 +-
 .../react/src/skip-link/SkipLinks.stories.tsx |   4 +-
 packages/react/src/stack/Stack.stories.tsx    |  56 +++----
 packages/react/src/stack/Stack.tsx            |   4 +-
 .../src/status-badge/StatusBadge.stories.tsx  |   2 +-
 .../react/src/status-badge/StatusBadge.tsx    |  22 +--
 packages/react/src/sub-nav/SubNav.stories.tsx |   4 +-
 packages/react/src/sub-nav/SubNav.tsx         |   4 +-
 .../react/src/sub-nav/SubNavContainer.tsx     |   8 +-
 packages/react/src/sub-nav/SubNavList.tsx     |   6 +-
 .../react/src/summary-list/SummaryList.tsx    |  14 +-
 packages/react/src/switch/SwitchTrack.tsx     |  16 +-
 packages/react/src/table/Table.stories.tsx    |  48 +++---
 packages/react/src/table/Table.test.tsx       |  16 +-
 packages/react/src/table/Table.tsx            |  20 +--
 .../react/src/table/TableBatchActionsBar.tsx  |   8 +-
 packages/react/src/table/TableCaption.tsx     |   2 +-
 packages/react/src/table/TableCell.tsx        |   2 +-
 packages/react/src/table/TableHeader.tsx      |   2 +-
 .../react/src/table/TableHeaderSortable.tsx   |   4 +-
 packages/react/src/table/TableRow.tsx         |   2 +-
 packages/react/src/table/TableScroller.tsx    |  16 +-
 packages/react/src/tabs/TabButton.tsx         |  20 +--
 packages/react/src/tabs/TabList.tsx           |   4 +-
 packages/react/src/tabs/TabPanel.tsx          |  14 +-
 packages/react/src/tabs/Tabs.stories.tsx      |  14 +-
 packages/react/src/tabs/Tabs.tsx              |   2 +-
 packages/react/src/tags/Tags.stories.tsx      |   2 +-
 packages/react/src/tags/TagsList.tsx          |   2 +-
 .../react/src/task-list/TaskListHeading.tsx   |   2 +-
 packages/react/src/task-list/TaskListItem.tsx |  38 ++---
 .../src/text-input/TextInput.stories.tsx      |   2 +-
 packages/react/src/text-input/TextInput.tsx   |  10 +-
 packages/react/src/text-link/TextLink.tsx     |   2 +-
 .../react/src/text-link/TextLinkExternal.tsx  |   6 +-
 packages/react/src/text/Text.tsx              |   2 +-
 .../react/src/textarea/Textarea.stories.tsx   |   2 +-
 packages/react/src/textarea/Textarea.tsx      |  10 +-
 .../src/time-picker/TimePicker.stories.tsx    |   2 +-
 .../react/src/time-picker/TimePicker.test.tsx |   2 +-
 packages/react/src/time-picker/TimePicker.tsx |   2 +-
 .../components/ConditionalFieldContainer.tsx  |   2 +-
 yourgov/components/CustomIcons.tsx            |  12 +-
 yourgov/components/ErrorBoundary.tsx          |   2 +-
 .../ApplicationHistory.tsx                    |  12 +-
 .../CannotStartAlert.tsx                      |   2 +-
 .../FormContainer.tsx                         |   8 +-
 .../GettingStartedForm.tsx                    |   8 +-
 .../StepActions.tsx                           |  16 +-
 .../UploadFileTable.tsx                       |   2 +-
 .../steps/FormContainer.tsx                   |   6 +-
 .../steps/FormStep1.tsx                       |  12 +-
 .../steps/FormStep10.tsx                      |   6 +-
 .../steps/FormStep10Review.tsx                |  30 ++--
 .../steps/FormStep1ChangeDetails.tsx          |  32 ++--
 .../steps/FormStep2.tsx                       |  28 ++--
 .../steps/FormStep3.tsx                       |  70 ++++----
 .../steps/FormStep4.tsx                       |  12 +-
 .../steps/FormStep5.tsx                       |  44 ++---
 .../steps/FormStep6.tsx                       |  18 +--
 .../steps/FormStep7.tsx                       |   2 +-
 .../steps/FormStep7AddEmployee.tsx            |  14 +-
 .../steps/FormStep8.tsx                       |   2 +-
 .../steps/FormStep9.tsx                       |  18 +--
 .../FormRegisterPetDetails.tsx                |   2 +-
 .../FormRegisterPetDetailsActions.tsx         |  16 +-
 .../FormRegisterPetDetailsContainer.tsx       |   8 +-
 .../FormRegisterPetDetailsStep0.tsx           |  10 +-
 .../FormRegisterPetDetailsStep1.tsx           |  32 ++--
 .../FormRegisterPetDetailsStep2.tsx           |  22 +--
 .../FormRegisterPetDetailsStep3.tsx           |  12 +-
 .../FormRegisterPetDetailsStep4.tsx           |  18 +--
 .../FormRegisterPetPersonalDetails.tsx        |   2 +-
 .../FormRegisterPetPersonalDetailsActions.tsx |  16 +-
 ...ormRegisterPetPersonalDetailsContainer.tsx |   8 +-
 .../FormRegisterPetPersonalDetailsStep0.tsx   |  54 +++----
 .../FormRegisterPetPersonalDetailsStep1.tsx   |  56 +++----
 .../FormRegisterPetPersonalDetailsStep2.tsx   |  22 +--
 .../FormRegisterPetPersonalDetailsStep3.tsx   |  14 +-
 .../components/FormRequiredFieldsMessage.tsx  |   2 +-
 yourgov/components/FormStepTitle.tsx          |   8 +-
 yourgov/components/HelpReference.tsx          |  10 +-
 yourgov/components/Layout/AppLayout.tsx       |  18 +--
 yourgov/components/Layout/SiteLayout.tsx      |   6 +-
 yourgov/components/LinkComponent.tsx          |   4 +-
 yourgov/components/PageTitle.tsx              |   4 +-
 yourgov/components/RegistrationsCardList.tsx  |   2 +-
 .../AccessRequestsTable.tsx                   |  22 +--
 .../ModalConfirmApproveAccess.tsx             |   8 +-
 .../ModalConfirmRejectAccess.tsx              |   8 +-
 .../ModalUnavailableFeature.tsx               |   6 +-
 yourgov/components/Staff/ActiveFilters.tsx    |   6 +-
 .../Staff/DashboardFilterDrawer.tsx           |  10 +-
 .../components/Staff/DashboardPagination.tsx  |   4 +-
 yourgov/components/Staff/DataTable.tsx        |  14 +-
 .../Staff/DataTableBatchActionsBar.tsx        |  10 +-
 yourgov/components/Staff/DataTableRow.tsx     |   2 +-
 .../Staff/DataTableSelectAllCheckbox.tsx      |   2 +-
 yourgov/components/Staff/FilterBar.tsx        |  16 +-
 .../components/Staff/FilterSearchInput.tsx    |   8 +-
 .../components/Staff/FilterStatusSelect.tsx   |  18 +--
 .../Staff/ModalConfirmChangeRole.tsx          |   8 +-
 .../Staff/ModalConfirmPauseAccess.tsx         |   8 +-
 .../Staff/ModalConfirmRemoveAccess.tsx        |   8 +-
 yourgov/components/Staff/SortBySelect.tsx     |  18 +--
 .../components/Staff/StaffMembersTable.tsx    |   4 +-
 yourgov/next-env.d.ts                         |   2 +-
 yourgov/pages/_app.tsx                        |   8 +-
 yourgov/pages/app/dashboard/index.tsx         |  14 +-
 yourgov/pages/app/index.tsx                   |   6 +-
 yourgov/pages/app/permits/[slug].tsx          |  44 ++---
 .../permits/apply-for-new-permit/index.tsx    |  26 +--
 .../mobile-food-vendor-permit/index.tsx       |   6 +-
 .../success/index.tsx                         |   6 +-
 yourgov/pages/app/permits/index.tsx           |   6 +-
 .../app/permits/manage-existing/index.tsx     |   2 +-
 yourgov/pages/app/staff/[slug].tsx            |  16 +-
 yourgov/pages/app/staff/index.tsx             |  22 +--
 .../app/staff/invite-staff-member/index.tsx   |  42 ++---
 yourgov/pages/index.tsx                       |   6 +-
 .../services/food-drink-hospitality/index.tsx |  28 ++--
 .../index.tsx                                 |  14 +-
 yourgov/pages/services/index.tsx              |  14 +-
 .../pages/services/registrations/index.tsx    |   2 +-
 .../services/registrations/pet/index.tsx      |   4 +-
 .../registrations/pet/task-1/index.tsx        |   4 +-
 .../registrations/pet/task-2/index.tsx        |   4 +-
 yourgov/pages/sign-in.tsx                     |  22 +--
 yourgov/pages/sign-out.tsx                    |   2 +-
 467 files changed, 2724 insertions(+), 2729 deletions(-)
 create mode 100644 .changeset/little-jars-search.md

diff --git a/.changeset/little-jars-search.md b/.changeset/little-jars-search.md
new file mode 100644
index 000000000000..7b4c8b500af9
--- /dev/null
+++ b/.changeset/little-jars-search.md
@@ -0,0 +1,8 @@
+---
+'@ag.ds-next/react': patch
+'@ag.ds-next/example-site': patch
+'@ag.ds-next/yourgov': patch
+'@ag.ds-next/docs': patch
+---
+
+chore: Added `react/jsx-sort-props` eslint rule and sorted all props.
diff --git a/.eslintrc.js b/.eslintrc.js
index 044a26c3b361..6c24a6f67d4a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,18 +9,6 @@ module.exports = {
 		'prettier',
 	],
 	rules: {
-		'no-restricted-imports': [
-			'error',
-			{
-				paths: [
-					{
-						name: 'react',
-						importNames: ['useId'],
-						message: "Please import 'useId' from '/core' instead.",
-					},
-				],
-			},
-		],
 		'@typescript-eslint/ban-types': [
 			'error',
 			{
@@ -49,6 +37,19 @@ module.exports = {
 				pathGroupsExcludedImportTypes: ['builtin'],
 			},
 		],
+		'no-restricted-imports': [
+			'error',
+			{
+				paths: [
+					{
+						name: 'react',
+						importNames: ['useId'],
+						message: "Please import 'useId' from '/core' instead.",
+					},
+				],
+			},
+		],
+		'react/jsx-sort-props': ['error'],
 	},
 	overrides: [
 		{
diff --git a/.storybook/components/LinkComponent.tsx b/.storybook/components/LinkComponent.tsx
index 1e0301ddbd80..145f7a3d3cbe 100644
--- a/.storybook/components/LinkComponent.tsx
+++ b/.storybook/components/LinkComponent.tsx
@@ -15,9 +15,9 @@ export const LinkComponent = forwardRef<HTMLAnchorElement, LinkComponentProps>(
 		// Regex finds links starting with: `http://` | `https://` | `//`
 		const hrefAsString = typeof href === 'string' ? href : href?.pathname;
 		if (hrefAsString && /^(https?:\/\/|\/\/)/i.test(hrefAsString)) {
-			return <a ref={ref} href={hrefAsString} {...props} />;
+			return <a href={hrefAsString} ref={ref} {...props} />;
 		}
 
-		return <Link ref={ref} href={href} {...props} />;
+		return <Link href={href} ref={ref} {...props} />;
 	}
 );
diff --git a/.storybook/components/PageTemplate.tsx b/.storybook/components/PageTemplate.tsx
index 24dfb7b302bf..0cb1d5caf56c 100644
--- a/.storybook/components/PageTemplate.tsx
+++ b/.storybook/components/PageTemplate.tsx
@@ -28,14 +28,14 @@ export function PageTemplate({
 			<Stack palette="dark">
 				<Header
 					background="bodyAlt"
-					logo={<Logo />}
 					heading="Export Service"
+					logo={<Logo />}
 					subline="Supporting Australian agricultural exports"
 				/>
 				<MainNav
+					activePath="#home"
 					focusMode={focusMode}
 					id="main-nav"
-					activePath="#home"
 					items={[
 						{ label: 'Home', href: '#home' },
 						{ label: 'Category', href: '#category' },
@@ -56,6 +56,7 @@ export function PageTemplate({
 				<Footer background="bodyAlt">
 					<nav aria-label="footer">
 						<LinkList
+							horizontal
 							links={[
 								{ label: 'Home', href: '/' },
 								{
@@ -71,7 +72,6 @@ export function PageTemplate({
 									href: 'https://github.com/agriculturegovau/agds-starter-kit',
 								},
 							]}
-							horizontal
 						/>
 					</nav>
 					<FooterDivider />
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index a26c26bb9af4..b02f798f70ba 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -102,12 +102,12 @@ const preview: Preview = {
 			const theme = storybookThemes[context.globals.brand as StorybookThemes];
 			const palette = context.globals.palette;
 			return (
-				<Core theme={theme} linkComponent={LinkComponent}>
+				<Core linkComponent={LinkComponent} theme={theme}>
 					<Box
-						width="100%"
+						background="body"
 						minHeight="100vh"
 						palette={palette}
-						background="body"
+						width="100%"
 					>
 						<Story />
 					</Box>
diff --git a/.storybook/stories/DataFiltering/ListFiltering.tsx b/.storybook/stories/DataFiltering/ListFiltering.tsx
index b841bd911256..b43e0c8c1caf 100644
--- a/.storybook/stories/DataFiltering/ListFiltering.tsx
+++ b/.storybook/stories/DataFiltering/ListFiltering.tsx
@@ -37,11 +37,11 @@ export const ListFiltering = () => {
 		<Columns>
 			<Column columnSpan={{ xs: 12, md: 4, lg: 3 }}>
 				<Stack
-					gap={1}
 					css={{
 						// This margin ensures that the left and column align nicely on desktop
 						[tokens.mediaQuery.min.md]: { marginTop: '3.5rem' },
 					}}
+					gap={1}
 				>
 					<FilterSidebar
 						activeFiltersCount={activeFiltersCount}
@@ -57,7 +57,6 @@ export const ListFiltering = () => {
 							<FilterServicesSelect block />
 							<DateRangePicker
 								fromLabel="Registered from"
-								toLabel="Registered to"
 								hideOptionalLabel
 								onChange={(requestDate) => setFilter({ requestDate })}
 								onFromInputChange={(from) =>
@@ -70,6 +69,7 @@ export const ListFiltering = () => {
 										requestDate: { ...filters.requestDate, to },
 									})
 								}
+								toLabel="Registered to"
 								value={filters.requestDate}
 							/>
 						</FormStack>
@@ -80,36 +80,36 @@ export const ListFiltering = () => {
 				</Stack>
 			</Column>
 			<Column
-				as="main"
 				aria-label="List of establishments"
-				id="main-content"
-				tabIndex={-1}
-				css={{ '&:focus': { outline: 'none' } }}
+				as="main"
 				columnSpan={{ xs: 12, md: 8 }}
 				columnStart={{ lg: 5 }}
+				css={{ '&:focus': { outline: 'none' } }}
+				id="main-content"
+				tabIndex={-1}
 			>
 				<Stack gap={2}>
 					<Flex
-						flexDirection={{ xs: 'column', md: 'row' }}
-						justifyContent={{ xs: 'flex-start', md: 'space-between' }}
 						alignItems={{ xs: 'flex-start', md: 'flex-end' }}
-						gap={1}
-						paddingBottom={{ md: 1 }}
 						borderBottom
 						borderBottomWidth={{ xs: 'none', md: 'sm' }}
+						flexDirection={{ xs: 'column', md: 'row' }}
+						gap={1}
+						justifyContent={{ xs: 'flex-start', md: 'space-between' }}
+						paddingBottom={{ md: 1 }}
 					>
 						<Text
 							as="h2"
-							lineHeight="heading"
 							fontSize="md"
 							fontWeight={{
 								xs: 'normal',
 								md: 'bold',
 							}}
+							lineHeight="heading"
 						>
 							{tableCaption}
 						</Text>
-						<div role="status" css={visuallyHiddenStyles}>
+						<div css={visuallyHiddenStyles} role="status">
 							{loading ? 'Loading audits' : ''}
 						</div>
 						<SortBySelect />
diff --git a/.storybook/stories/DataFiltering/Table.stories.tsx b/.storybook/stories/DataFiltering/Table.stories.tsx
index ff6f9118757a..ec761471e2fb 100644
--- a/.storybook/stories/DataFiltering/Table.stories.tsx
+++ b/.storybook/stories/DataFiltering/Table.stories.tsx
@@ -86,7 +86,7 @@ export const FilterAndSelectSmall = {
 									table.
 								</Text>
 							</Callout>
-							<TableFilteringSmall selectable={true} />
+							<TableFilteringSmall selectable />
 						</Stack>
 					</PageContent>
 				</DataProvider>
@@ -153,7 +153,7 @@ export const FilterAndSelectMedium = {
 									button is pressed.
 								</Text>
 							</Callout>
-							<TableFilteringMedium selectable={true} />
+							<TableFilteringMedium selectable />
 						</Stack>
 					</PageContent>
 				</DataProvider>
@@ -221,7 +221,7 @@ export const FilterAndSelectLarge = {
 									area next to the button which opens the drawer.
 								</Text>
 							</Callout>
-							<TableFilteringLarge selectable={true} />
+							<TableFilteringLarge selectable />
 						</Stack>
 					</PageContent>
 				</DataProvider>
diff --git a/.storybook/stories/DataFiltering/TableFilteringLarge.tsx b/.storybook/stories/DataFiltering/TableFilteringLarge.tsx
index 287537d2d87a..6114657de9ea 100644
--- a/.storybook/stories/DataFiltering/TableFilteringLarge.tsx
+++ b/.storybook/stories/DataFiltering/TableFilteringLarge.tsx
@@ -44,9 +44,9 @@ export const TableFilteringLarge = ({
 						<FilterBarGroup>
 							<FilterSearchInput />
 							<Button
+								iconBefore={FilterIcon}
 								onClick={openDrawer}
 								variant="secondary"
-								iconBefore={FilterIcon}
 							>
 								Show filters
 							</Button>
@@ -54,19 +54,19 @@ export const TableFilteringLarge = ({
 						<SortBySelect />
 					</FilterBar>
 					<DashboardFilterDrawer
-						isDrawerOpen={isDrawerOpen}
 						closeDrawer={closeDrawer}
+						isDrawerOpen={isDrawerOpen}
 					/>
 					<ActiveFilters />
 				</FilterRegion>
 				{selectable && (
-					<Box padding={1} borderBottom>
+					<Box borderBottom padding={1}>
 						<DataTableSelectAllCheckbox />
 					</Box>
 				)}
 				<DataTable
-					ref={tableRef}
 					headingId={headingId}
+					ref={tableRef}
 					selectable={selectable}
 				/>
 			</Stack>
diff --git a/.storybook/stories/DataFiltering/TableFilteringMedium.tsx b/.storybook/stories/DataFiltering/TableFilteringMedium.tsx
index d762cce1472f..7a0920d8e0f7 100644
--- a/.storybook/stories/DataFiltering/TableFilteringMedium.tsx
+++ b/.storybook/stories/DataFiltering/TableFilteringMedium.tsx
@@ -60,15 +60,14 @@ export const TableFilteringMedium = ({
 							<FilterSearchInput />
 							<FilterStatusSelect />
 							<Button
-								onClick={toggleIsOpen}
-								variant="secondary"
-								iconBefore={FilterIcon}
-								iconAfter={isOpen ? ChevronUpIcon : ChevronDownIcon}
-								// accessibility
-								aria-label="more filters"
-								id={buttonId}
 								aria-controls={bodyId}
 								aria-expanded={isOpen}
+								aria-label="more filters"
+								iconAfter={isOpen ? ChevronUpIcon : ChevronDownIcon}
+								iconBefore={FilterIcon}
+								id={buttonId}
+								onClick={toggleIsOpen}
+								variant="secondary"
 							>
 								{isOpen ? 'Hide filters' : 'Show filters'}
 							</Button>
@@ -84,19 +83,19 @@ export const TableFilteringMedium = ({
 						</Box>
 					</FilterBar>
 					<FilterAccordion
-						id={bodyId}
 						ariaLabelledBy={buttonId}
+						id={bodyId}
 						isOpen={isOpen}
 					/>
 					<ActiveFilters />
 				</FilterRegion>
 
 				{selectable && (
-					<Box paddingLeft={0.75} paddingY={0.75} borderBottom>
+					<Box borderBottom paddingLeft={0.75} paddingY={0.75}>
 						<DataTableSelectAllCheckbox />
 					</Box>
 				)}
-				<DataTable selectable={selectable} headingId={headingId} />
+				<DataTable headingId={headingId} selectable={selectable} />
 			</Stack>
 			<DashboardPagination />
 		</Stack>
diff --git a/.storybook/stories/DataFiltering/TableFilteringSmall.tsx b/.storybook/stories/DataFiltering/TableFilteringSmall.tsx
index cf0722b77938..fe1e4eef0d63 100644
--- a/.storybook/stories/DataFiltering/TableFilteringSmall.tsx
+++ b/.storybook/stories/DataFiltering/TableFilteringSmall.tsx
@@ -42,7 +42,7 @@ export const TableFilteringSmall = ({
 					</FilterBar>
 				</FilterRegion>
 				{selectable && (
-					<Box paddingLeft={0.75} paddingY={0.75} borderBottom>
+					<Box borderBottom paddingLeft={0.75} paddingY={0.75}>
 						<DataTableSelectAllCheckbox />
 					</Box>
 				)}
diff --git a/.storybook/stories/DataFiltering/components/ActiveFilters.tsx b/.storybook/stories/DataFiltering/components/ActiveFilters.tsx
index 0eb3584f32d8..3dcb419033b9 100644
--- a/.storybook/stories/DataFiltering/components/ActiveFilters.tsx
+++ b/.storybook/stories/DataFiltering/components/ActiveFilters.tsx
@@ -108,16 +108,16 @@ export const ActiveFilters = () => {
 	}
 
 	return (
-		<Flex flexWrap="wrap" gap={0.75} alignItems="flex-end">
+		<Flex alignItems="flex-end" flexWrap="wrap" gap={0.75}>
 			<Tags
 				heading={<Text fontWeight="bold">Active filters</Text>}
 				items={tags}
 			/>
 			<Button
+				iconAfter={CloseIcon}
+				onClick={resetFilters}
 				size="sm"
 				variant="text"
-				onClick={resetFilters}
-				iconAfter={CloseIcon}
 			>
 				Clear filters
 			</Button>
diff --git a/.storybook/stories/DataFiltering/components/DashboardFilterDrawer.tsx b/.storybook/stories/DataFiltering/components/DashboardFilterDrawer.tsx
index 54ace89c7252..a12f3b788235 100644
--- a/.storybook/stories/DataFiltering/components/DashboardFilterDrawer.tsx
+++ b/.storybook/stories/DataFiltering/components/DashboardFilterDrawer.tsx
@@ -82,20 +82,20 @@ export const DashboardFilterDrawer = ({
 			}}
 		>
 			<Drawer
-				title="Filter by"
-				isOpen={isDrawerOpen}
-				onClose={cancel}
 				actions={
 					<ButtonGroup>
 						<Button onClick={applyFilters}>Apply filters</Button>
-						<Button variant="secondary" onClick={clearFilters}>
+						<Button onClick={clearFilters} variant="secondary">
 							Clear filters
 						</Button>
-						<Button variant="tertiary" onClick={cancel}>
+						<Button onClick={cancel} variant="tertiary">
 							Cancel
 						</Button>
 					</ButtonGroup>
 				}
+				isOpen={isDrawerOpen}
+				onClose={cancel}
+				title="Filter by"
 			>
 				<Stack gap={3}>
 					<Fieldset legend="Fieldset">
@@ -112,10 +112,10 @@ export const DashboardFilterDrawer = ({
 							<FilterAssigneeSelect block />
 							<DateRangePicker
 								fromLabel="Registered from"
-								toLabel="Registered to"
 								onChange={(requestDate) =>
 									setFormState({ ...formState, requestDate })
 								}
+								toLabel="Registered to"
 								value={formState.requestDate}
 							/>
 						</FormStack>
diff --git a/.storybook/stories/DataFiltering/components/DashboardPagination.tsx b/.storybook/stories/DataFiltering/components/DashboardPagination.tsx
index 37a2fed96787..50069fbe38c5 100644
--- a/.storybook/stories/DataFiltering/components/DashboardPagination.tsx
+++ b/.storybook/stories/DataFiltering/components/DashboardPagination.tsx
@@ -41,10 +41,9 @@ export const DashboardPagination = () => {
 	return (
 		<PaginationButtons
 			currentPage={displayText.page}
-			onChange={(page) => setPagination({ perPage: displayText.perPage, page })}
-			totalPages={totalPages}
 			itemRangeText={displayText.itemRangeText}
 			itemsPerPage={displayText.perPage}
+			onChange={(page) => setPagination({ perPage: displayText.perPage, page })}
 			onItemsPerPageChange={(perPage) =>
 				setPagination({
 					page: getValidPage({
@@ -56,6 +55,7 @@ export const DashboardPagination = () => {
 					perPage,
 				})
 			}
+			totalPages={totalPages}
 		/>
 	);
 };
diff --git a/.storybook/stories/DataFiltering/components/DataList.tsx b/.storybook/stories/DataFiltering/components/DataList.tsx
index 591257d5b63e..ba1dba0081e5 100644
--- a/.storybook/stories/DataFiltering/components/DataList.tsx
+++ b/.storybook/stories/DataFiltering/components/DataList.tsx
@@ -34,7 +34,7 @@ export const DataList = ({ loading, data }: DataListProps) => {
 				data.length > 0 && (
 					<Stack as="ul" gap={1}>
 						{data.map((item) => (
-							<DataListItem key={item.id} data={item} />
+							<DataListItem data={item} key={item.id} />
 						))}
 					</Stack>
 				)
@@ -44,8 +44,8 @@ export const DataList = ({ loading, data }: DataListProps) => {
 				{!loading && data.length === 0 && (
 					<>
 						<Stack gap={1}>
-							<HelpIcon size="lg" color="muted" />
-							<Heading type="h2" fontSize="lg">
+							<HelpIcon color="muted" size="lg" />
+							<Heading fontSize="lg" type="h2">
 								No results found
 							</Heading>
 							<Text>Try adjusting your filter options.</Text>
@@ -64,9 +64,9 @@ type DataListItemProps = {
 
 const DataListItem = ({ data }: DataListItemProps) => {
 	return (
-		<Card as="li" shadow clickable>
+		<Card as="li" clickable shadow>
 			<CardInner>
-				<Stack gap={1} width="100%" flexWrap="wrap">
+				<Stack flexWrap="wrap" gap={1} width="100%">
 					<H3>
 						<CardLink href={`#${data.id}`}>{data.businessName}</CardLink>
 					</H3>
diff --git a/.storybook/stories/DataFiltering/components/DataTable.tsx b/.storybook/stories/DataFiltering/components/DataTable.tsx
index f5c15b60d57a..dd40929c0205 100644
--- a/.storybook/stories/DataFiltering/components/DataTable.tsx
+++ b/.storybook/stories/DataFiltering/components/DataTable.tsx
@@ -63,7 +63,7 @@ export const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
 			return (
 				<Stack gap={1} role="alert">
 					<AlertFilledIcon color="error" size="lg" />
-					<Heading type="h2" fontSize="lg">
+					<Heading fontSize="lg" type="h2">
 						Failed to load
 					</Heading>
 					<Text>
@@ -76,10 +76,10 @@ export const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
 
 		if (!loading && data.length === 0) {
 			return (
-				<Stack gap={2} alignItems="flex-start" paddingY={1} role="alert">
+				<Stack alignItems="flex-start" gap={2} paddingY={1} role="alert">
 					<Stack gap={1}>
-						<HelpIcon size="lg" color="muted" />
-						<Heading type="h2" fontSize="lg">
+						<HelpIcon color="muted" size="lg" />
+						<Heading fontSize="lg" type="h2">
 							No results found
 						</Heading>
 						<Text>Try adjusting your filter options.</Text>
@@ -96,15 +96,15 @@ export const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
 						Table column headers with buttons are sortable.
 					</div>
 				) : null}
-				<div role="status" css={visuallyHiddenStyles}>
+				<div css={visuallyHiddenStyles} role="status">
 					{loading ? 'Loading audits' : ''}
 				</div>
 				<TableWrapper>
 					<Table
-						aria-rowcount={totalItems}
 						aria-labelledby={
 							headingId ? `${headingId} ${descriptionId}` : undefined
 						}
+						aria-rowcount={totalItems}
 						id={tableId}
 						ref={ref}
 						tabIndex={-1}
@@ -146,12 +146,12 @@ export const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
 											return (
 												<TableHeaderSortable
 													key={sortKey}
-													textAlign={textAlign}
-													width={width}
+													onClick={onClick}
 													sort={
 														isFieldTheActiveSortField ? sort?.order : undefined
 													}
-													onClick={onClick}
+													textAlign={textAlign}
+													width={width}
 												>
 													{label}
 												</TableHeaderSortable>
@@ -217,11 +217,11 @@ export const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
 											const rowIndex = index + 2;
 											return (
 												<DataTableRow
-													key={id}
-													selectable={selectable}
-													itemId={id}
 													businessName={businessName}
+													itemId={id}
+													key={id}
 													rowIndex={rowIndex}
+													selectable={selectable}
 												>
 													<TableCell as="th" scope="row">
 														<TextLink href={`#${id}`}>{businessName}</TextLink>
diff --git a/.storybook/stories/DataFiltering/components/DataTableBatchActionsBar.tsx b/.storybook/stories/DataFiltering/components/DataTableBatchActionsBar.tsx
index 3ef22bc18bd6..130d52377b3b 100644
--- a/.storybook/stories/DataFiltering/components/DataTableBatchActionsBar.tsx
+++ b/.storybook/stories/DataFiltering/components/DataTableBatchActionsBar.tsx
@@ -18,26 +18,26 @@ export const DataTableBatchActionsBar = () => {
 				</TableBatchActionsTitle>
 				<ButtonGroup>
 					<Button
-						variant="secondary"
-						size="sm"
 						onClick={() => {
 							console.log('Add tracking number');
 							clearRowSelections();
 						}}
+						size="sm"
+						variant="secondary"
 					>
 						Add tracking number
 					</Button>
 					<Button
-						variant="secondary"
-						size="sm"
 						onClick={() => {
 							console.log('Delete');
 							clearRowSelections();
 						}}
+						size="sm"
+						variant="secondary"
 					>
 						Delete
 					</Button>
-					<Button variant="tertiary" size="sm" onClick={clearRowSelections}>
+					<Button onClick={clearRowSelections} size="sm" variant="tertiary">
 						Cancel
 					</Button>
 				</ButtonGroup>
diff --git a/.storybook/stories/DataFiltering/components/DataTableRow.tsx b/.storybook/stories/DataFiltering/components/DataTableRow.tsx
index e2f46bdda731..afdd172d9dea 100644
--- a/.storybook/stories/DataFiltering/components/DataTableRow.tsx
+++ b/.storybook/stories/DataFiltering/components/DataTableRow.tsx
@@ -20,7 +20,7 @@ export const DataTableRowAssignee = ({
 	return (
 		<TableCell>
 			<Flex alignItems="center" gap={0.25}>
-				<Avatar name={assignee} size="sm" aria-hidden />
+				<Avatar aria-hidden name={assignee} size="sm" />
 				<Text>{assignee}</Text>
 			</Flex>
 		</TableCell>
@@ -78,9 +78,9 @@ export const DataTableRow = ({
 			<TableRow aria-rowindex={rowIndex} selected={isRowSelected(itemId)}>
 				<TableCell>
 					<Checkbox
-						size="sm"
 						checked={isRowSelected(itemId)}
 						onChange={() => toggleRowSelected(itemId)}
+						size="sm"
 					>
 						<VisuallyHidden>{`Select ${businessName}`}</VisuallyHidden>
 					</Checkbox>
diff --git a/.storybook/stories/DataFiltering/components/DataTableSelectAllCheckbox.tsx b/.storybook/stories/DataFiltering/components/DataTableSelectAllCheckbox.tsx
index 847ac173260f..7123c58e9634 100644
--- a/.storybook/stories/DataFiltering/components/DataTableSelectAllCheckbox.tsx
+++ b/.storybook/stories/DataFiltering/components/DataTableSelectAllCheckbox.tsx
@@ -12,10 +12,10 @@ export const DataTableSelectAllCheckbox = () => {
 	} = useSelectAllRows(data);
 	return (
 		<Checkbox
-			size="sm"
 			checked={isSelectAllCheckboxChecked}
 			indeterminate={isSelectAllCheckboxIndeterminate}
 			onChange={toggleAllRowsSelected}
+			size="sm"
 		>
 			Select all rows
 		</Checkbox>
diff --git a/.storybook/stories/DataFiltering/components/FilterAccordion.tsx b/.storybook/stories/DataFiltering/components/FilterAccordion.tsx
index 22946bc76899..767de80da237 100644
--- a/.storybook/stories/DataFiltering/components/FilterAccordion.tsx
+++ b/.storybook/stories/DataFiltering/components/FilterAccordion.tsx
@@ -35,31 +35,30 @@ export const FilterAccordion = ({
 
 	return (
 		<animated.section
-			id={id}
 			aria-labelledby={ariaLabelledBy}
-			style={animatedHeight}
 			css={{
 				overflow: 'hidden',
 			}}
+			id={id}
+			style={animatedHeight}
 		>
 			<Flex
-				ref={ref}
-				columnGap={1}
-				rowGap={1.5}
 				alignItems={{ xs: 'stretch', md: 'flex-end' }}
-				flexDirection={{ xs: 'column', md: 'row' }}
 				background="shade"
+				border
+				borderColor="muted"
+				columnGap={1}
+				flexDirection={{ xs: 'column', md: 'row' }}
 				flexWrap="wrap"
 				padding={1}
+				ref={ref}
 				rounded
-				border
-				borderColor="muted"
+				rowGap={1.5}
 			>
 				<FilterStateSelect />
 				<FilterAssigneeSelect />
 				<DateRangePicker
 					fromLabel="Registered from"
-					toLabel="Registered to"
 					hideOptionalLabel
 					onChange={(requestDate) => setFilter({ requestDate })}
 					onFromInputChange={(from) =>
@@ -72,6 +71,7 @@ export const FilterAccordion = ({
 							requestDate: { ...filters.requestDate, to },
 						})
 					}
+					toLabel="Registered to"
 					value={filters.requestDate}
 				/>
 			</Flex>
diff --git a/.storybook/stories/DataFiltering/components/FilterAssigneeSelect.tsx b/.storybook/stories/DataFiltering/components/FilterAssigneeSelect.tsx
index ace2d3614ae0..7b1fc509873f 100644
--- a/.storybook/stories/DataFiltering/components/FilterAssigneeSelect.tsx
+++ b/.storybook/stories/DataFiltering/components/FilterAssigneeSelect.tsx
@@ -8,22 +8,22 @@ export const FilterAssigneeSelect = ({ block }: { block?: boolean }) => {
 
 	return (
 		<Select
-			label="Assignee"
-			placeholder="All"
-			hideOptionalLabel
-			block={block}
 			aria-controls={tableId}
-			options={assignees.map((option) => ({
-				label: option,
-				value: option,
-			}))}
-			value={filters.assignee || ''}
+			block={block}
+			hideOptionalLabel
+			label="Assignee"
 			onChange={(e) => {
 				const value = e.target.value;
 				setFilter({
 					assignee: value === '' ? undefined : value,
 				});
 			}}
+			options={assignees.map((option) => ({
+				label: option,
+				value: option,
+			}))}
+			placeholder="All"
+			value={filters.assignee || ''}
 		/>
 	);
 };
diff --git a/.storybook/stories/DataFiltering/components/FilterBar.tsx b/.storybook/stories/DataFiltering/components/FilterBar.tsx
index 92371a3df14b..f06614c41d4b 100644
--- a/.storybook/stories/DataFiltering/components/FilterBar.tsx
+++ b/.storybook/stories/DataFiltering/components/FilterBar.tsx
@@ -5,10 +5,10 @@ import { Stack } from '../../../../packages/react/src/stack';
 export const FilterRegion = ({ children }: { children: ReactNode }) => {
 	return (
 		<Stack
-			as="section"
-			gap={1}
 			aria-label="data filtering"
+			as="section"
 			borderBottom
+			gap={1}
 			paddingBottom={1.5}
 		>
 			{children}
@@ -19,14 +19,14 @@ export const FilterRegion = ({ children }: { children: ReactNode }) => {
 export const FilterBar = ({ children }: { children: ReactNode }) => {
 	return (
 		<Flex
-			columnGap={1}
-			rowGap={1.5}
 			alignItems={{ xs: 'stretch', lg: 'flex-end' }}
-			justifyContent={{ xs: 'flex-start', md: 'space-between' }}
+			columnGap={1}
 			flexDirection={{
 				xs: 'column',
 				lg: 'row',
 			}}
+			justifyContent={{ xs: 'flex-start', md: 'space-between' }}
+			rowGap={1.5}
 		>
 			{children}
 		</Flex>
@@ -36,11 +36,11 @@ export const FilterBar = ({ children }: { children: ReactNode }) => {
 export const FilterBarGroup = ({ children }: { children: ReactNode }) => {
 	return (
 		<Flex
-			flexWrap="wrap"
+			alignItems={{ xs: 'stretch', md: 'flex-end' }}
 			columnGap={1}
-			rowGap={1.5}
 			flexDirection={{ xs: 'column', md: 'row' }}
-			alignItems={{ xs: 'stretch', md: 'flex-end' }}
+			flexWrap="wrap"
+			rowGap={1.5}
 		>
 			{children}
 		</Flex>
diff --git a/.storybook/stories/DataFiltering/components/FilterDestinationsSelect.tsx b/.storybook/stories/DataFiltering/components/FilterDestinationsSelect.tsx
index 0d5dd3170dae..ccf2d6a7ebb4 100644
--- a/.storybook/stories/DataFiltering/components/FilterDestinationsSelect.tsx
+++ b/.storybook/stories/DataFiltering/components/FilterDestinationsSelect.tsx
@@ -7,21 +7,21 @@ export const FilterDestinationsSelect = ({ block }: { block?: boolean }) => {
 	const { filters, setFilter } = useSortAndFilterContext();
 	return (
 		<ComboboxMulti
-			label="Destinations"
-			hint="Start typing to see results"
-			options={COUNTRY_OPTIONS}
-			hideOptionalLabel
-			block={block}
 			aria-controls={tableId}
-			value={(filters.destinations ?? []).map((country) => ({
-				label: country,
-				value: country,
-			}))}
+			block={block}
+			hideOptionalLabel
+			hint="Start typing to see results"
+			label="Destinations"
 			onChange={(selectedCountries) => {
 				setFilter({
 					destinations: selectedCountries.map(({ label }) => label),
 				});
 			}}
+			options={COUNTRY_OPTIONS}
+			value={(filters.destinations ?? []).map((country) => ({
+				label: country,
+				value: country,
+			}))}
 		/>
 	);
 };
diff --git a/.storybook/stories/DataFiltering/components/FilterSearchInput.tsx b/.storybook/stories/DataFiltering/components/FilterSearchInput.tsx
index a63c4189c2c9..a1fed169a79a 100644
--- a/.storybook/stories/DataFiltering/components/FilterSearchInput.tsx
+++ b/.storybook/stories/DataFiltering/components/FilterSearchInput.tsx
@@ -8,18 +8,18 @@ export const FilterSearchInput = ({ block }: { block?: boolean }) => {
 	return (
 		<div aria-label="Audits" role="search">
 			<SearchInput
-				label="Search Business name"
 				aria-controls={tableId}
-				maxWidth="lg"
-				hideOptionalLabel
 				block={block}
-				value={filters.businessName || ''}
+				hideOptionalLabel
+				label="Search Business name"
+				maxWidth="lg"
 				onChange={(searchString) => {
 					// TODO debounce
 					setFilter({
 						businessName: searchString,
 					});
 				}}
+				value={filters.businessName || ''}
 			/>
 		</div>
 	);
diff --git a/.storybook/stories/DataFiltering/components/FilterServicesSelect.tsx b/.storybook/stories/DataFiltering/components/FilterServicesSelect.tsx
index 53a038f51d2e..4c06d301ad8c 100644
--- a/.storybook/stories/DataFiltering/components/FilterServicesSelect.tsx
+++ b/.storybook/stories/DataFiltering/components/FilterServicesSelect.tsx
@@ -8,16 +8,15 @@ export const FilterServicesSelect = ({ block }: { block?: boolean }) => {
 	const { filters, setFilter } = useSortAndFilterContext();
 	return (
 		<ControlGroup
-			label="Services"
+			aria-controls={tableId}
 			block={block}
 			hideOptionalLabel
-			aria-controls={tableId}
+			label="Services"
 		>
 			{services.map((service) => (
 				<Checkbox
-					key={service}
-					value={service}
 					checked={(filters.services || []).includes(service)}
+					key={service}
 					onChange={(e) => {
 						const checked = e.target.checked;
 						setFilter({
@@ -26,6 +25,7 @@ export const FilterServicesSelect = ({ block }: { block?: boolean }) => {
 								: filters.services?.filter((s) => s !== service),
 						});
 					}}
+					value={service}
 				>
 					{service}
 				</Checkbox>
diff --git a/.storybook/stories/DataFiltering/components/FilterStateSelect.tsx b/.storybook/stories/DataFiltering/components/FilterStateSelect.tsx
index e46619c19b7c..3d071303505b 100644
--- a/.storybook/stories/DataFiltering/components/FilterStateSelect.tsx
+++ b/.storybook/stories/DataFiltering/components/FilterStateSelect.tsx
@@ -7,19 +7,19 @@ export const FilterStateSelect = ({ block }: { block?: boolean }) => {
 
 	return (
 		<Select
-			label="State"
-			placeholder="All"
-			hideOptionalLabel
-			block={block}
-			options={STATE_OPTIONS}
-			value={filters.state || ''}
 			aria-controls={tableId}
+			block={block}
+			hideOptionalLabel
+			label="State"
 			onChange={(e) => {
 				const value = e.target.value;
 				setFilter({
 					state: value === '' ? undefined : value,
 				});
 			}}
+			options={STATE_OPTIONS}
+			placeholder="All"
+			value={filters.state || ''}
 		/>
 	);
 };
diff --git a/.storybook/stories/DataFiltering/components/FilterStatusSelect.tsx b/.storybook/stories/DataFiltering/components/FilterStatusSelect.tsx
index 81d677be7e13..bbcc42aa34a4 100644
--- a/.storybook/stories/DataFiltering/components/FilterStatusSelect.tsx
+++ b/.storybook/stories/DataFiltering/components/FilterStatusSelect.tsx
@@ -7,18 +7,10 @@ export const FilterStatusSelect = ({ block }: { block?: boolean }) => {
 
 	return (
 		<Select
-			label="Status"
-			placeholder="All"
 			aria-controls={tableId}
-			hideOptionalLabel
 			block={block}
-			options={[
-				{ value: 'booked', label: 'Booked' },
-				{ value: 'notBooked', label: 'Not booked' },
-				{ value: 'completed', label: 'Completed' },
-				{ value: 'cancelled', label: 'Cancelled' },
-			]}
-			value={filters.status || ''}
+			hideOptionalLabel
+			label="Status"
 			onChange={(e) => {
 				const value = e.target.value as
 					| ''
@@ -31,6 +23,14 @@ export const FilterStatusSelect = ({ block }: { block?: boolean }) => {
 					status: value === '' ? undefined : value,
 				});
 			}}
+			options={[
+				{ value: 'booked', label: 'Booked' },
+				{ value: 'notBooked', label: 'Not booked' },
+				{ value: 'completed', label: 'Completed' },
+				{ value: 'cancelled', label: 'Cancelled' },
+			]}
+			placeholder="All"
+			value={filters.status || ''}
 		/>
 	);
 };
diff --git a/.storybook/stories/DataFiltering/components/SortBySelect.tsx b/.storybook/stories/DataFiltering/components/SortBySelect.tsx
index 3e485845e723..e646200f0512 100644
--- a/.storybook/stories/DataFiltering/components/SortBySelect.tsx
+++ b/.storybook/stories/DataFiltering/components/SortBySelect.tsx
@@ -8,8 +8,16 @@ export const SortBySelect = () => {
 
 	return (
 		<Select
-			label="Sort by"
+			aria-controls={tableId}
 			hideOptionalLabel
+			label="Sort by"
+			onChange={(e) => {
+				const [field, order] = e.target.value.split('-');
+				setSort({
+					field: field as keyof BusinessForAudit,
+					order: order as 'ASC' | 'DESC',
+				});
+			}}
 			options={[
 				{
 					value: 'businessName-ASC',
@@ -45,14 +53,6 @@ export const SortBySelect = () => {
 				},
 			]}
 			value={`${sort.field}-${sort.order}`}
-			aria-controls={tableId}
-			onChange={(e) => {
-				const [field, order] = e.target.value.split('-');
-				setSort({
-					field: field as keyof BusinessForAudit,
-					order: order as 'ASC' | 'DESC',
-				});
-			}}
 		/>
 	);
 };
diff --git a/.storybook/stories/DataLoading/DataLoadingWithCards.stories.tsx b/.storybook/stories/DataLoading/DataLoadingWithCards.stories.tsx
index 04d7543ad2d1..d4aba4b5d28f 100644
--- a/.storybook/stories/DataLoading/DataLoadingWithCards.stories.tsx
+++ b/.storybook/stories/DataLoading/DataLoadingWithCards.stories.tsx
@@ -26,7 +26,7 @@ export const Basic: Story = {
 		const { data, loading, error } = useFetchStarWarsAPI();
 		return (
 			<PageContent>
-				<DataLoadingWithCards data={data} loading={loading} error={error} />
+				<DataLoadingWithCards data={data} error={error} loading={loading} />
 			</PageContent>
 		);
 	},
diff --git a/.storybook/stories/DataLoading/DataLoadingWithCards.tsx b/.storybook/stories/DataLoading/DataLoadingWithCards.tsx
index 40f22699e95d..f447c4399b52 100644
--- a/.storybook/stories/DataLoading/DataLoadingWithCards.tsx
+++ b/.storybook/stories/DataLoading/DataLoadingWithCards.tsx
@@ -62,7 +62,7 @@ function ErrorState() {
 			<Stack gap={2}>
 				<Stack gap={1}>
 					<AlertFilledIcon color="error" size="lg" />
-					<Heading type="h2" fontSize="lg">
+					<Heading fontSize="lg" type="h2">
 						Failed to load
 					</Heading>
 					<Text>
@@ -83,8 +83,8 @@ function EmptyState() {
 			<Heading type="h1">Star wars planets</Heading>
 			<Stack gap={2}>
 				<Stack gap={1}>
-					<HelpIcon size="lg" color="muted" />
-					<Heading type="h2" fontSize="lg">
+					<HelpIcon color="muted" size="lg" />
+					<Heading fontSize="lg" type="h2">
 						No planets found
 					</Heading>
 				</Stack>
@@ -103,7 +103,7 @@ function FinalState({ items }: { items: NonNullable<ApiData['results']> }) {
 			<Columns as="ul" cols={[1, 2, 3, 3]}>
 				{items.map((item) => {
 					return (
-						<Card as="li" key={item.id} shadow clickable>
+						<Card as="li" clickable key={item.id} shadow>
 							<CardInner>
 								<Stack gap={1}>
 									<Heading as="h2" type="h3">
diff --git a/.storybook/stories/DataLoading/DataLoadingWithTable.stories.tsx b/.storybook/stories/DataLoading/DataLoadingWithTable.stories.tsx
index a027160de053..4bc70eb178a0 100644
--- a/.storybook/stories/DataLoading/DataLoadingWithTable.stories.tsx
+++ b/.storybook/stories/DataLoading/DataLoadingWithTable.stories.tsx
@@ -26,7 +26,7 @@ export const Basic: Story = {
 		const { data, loading, error } = useFetchStarWarsAPI();
 		return (
 			<PageContent>
-				<DataLoadingWithTable data={data} loading={loading} error={error} />
+				<DataLoadingWithTable data={data} error={error} loading={loading} />
 			</PageContent>
 		);
 	},
diff --git a/.storybook/stories/DataLoading/DataLoadingWithTable.tsx b/.storybook/stories/DataLoading/DataLoadingWithTable.tsx
index 06f6ceee3fa6..2783d6f4f66e 100644
--- a/.storybook/stories/DataLoading/DataLoadingWithTable.tsx
+++ b/.storybook/stories/DataLoading/DataLoadingWithTable.tsx
@@ -45,19 +45,19 @@ const tableHeadingId = 'star-wars-planets-table-heading';
 function LoadingState() {
 	return (
 		<Stack gap={2}>
-			<Heading type="h1" id={tableHeadingId}>
+			<Heading id={tableHeadingId} type="h1">
 				Star wars planets
 			</Heading>
 			<TableWrapper>
-				<Table tableLayout="fixed" aria-labelledby={tableHeadingId}>
+				<Table aria-labelledby={tableHeadingId} tableLayout="fixed">
 					<TableHead>
 						<TableRow>
-							<TableHeader width="10rem" scope="col">
+							<TableHeader scope="col" width="10rem">
 								ID
 							</TableHeader>
 							<TableHeader scope="col">Name</TableHeader>
 							<TableHeader scope="col">Climate</TableHeader>
-							<TableHeader width="10rem" textAlign="right" scope="col">
+							<TableHeader scope="col" textAlign="right" width="10rem">
 								Population
 							</TableHeader>
 						</TableRow>
@@ -93,13 +93,13 @@ function LoadingState() {
 function ErrorState() {
 	return (
 		<Stack gap={2}>
-			<Heading type="h1" id={tableHeadingId}>
+			<Heading id={tableHeadingId} type="h1">
 				Star wars planets
 			</Heading>
 			<Stack gap={2}>
 				<Stack gap={1}>
 					<AlertFilledIcon color="error" size="lg" />
-					<Heading type="h2" fontSize="lg">
+					<Heading fontSize="lg" type="h2">
 						Failed to load
 					</Heading>
 					<Text>
@@ -117,13 +117,13 @@ function ErrorState() {
 function EmptyState() {
 	return (
 		<Stack gap={2}>
-			<Heading type="h1" id={tableHeadingId}>
+			<Heading id={tableHeadingId} type="h1">
 				Star wars planets
 			</Heading>
 			<Stack gap={2}>
 				<Stack gap={1}>
-					<HelpIcon size="lg" color="muted" />
-					<Heading type="h2" fontSize="lg">
+					<HelpIcon color="muted" size="lg" />
+					<Heading fontSize="lg" type="h2">
 						No planets found
 					</Heading>
 				</Stack>
@@ -138,19 +138,19 @@ function EmptyState() {
 function FinalState({ items }: { items: NonNullable<ApiData['results']> }) {
 	return (
 		<Stack gap={2}>
-			<Heading type="h1" id={tableHeadingId}>
+			<Heading id={tableHeadingId} type="h1">
 				Star wars planets
 			</Heading>
 			<TableWrapper>
-				<Table tableLayout="fixed" aria-labelledby={tableHeadingId}>
+				<Table aria-labelledby={tableHeadingId} tableLayout="fixed">
 					<TableHead>
 						<TableRow>
-							<TableHeader width="10rem" scope="col">
+							<TableHeader scope="col" width="10rem">
 								ID
 							</TableHeader>
 							<TableHeader scope="col">Name</TableHeader>
 							<TableHeader scope="col">Climate</TableHeader>
-							<TableHeader width="10rem" textAlign="right" scope="col">
+							<TableHeader scope="col" textAlign="right" width="10rem">
 								Population
 							</TableHeader>
 						</TableRow>
diff --git a/.storybook/stories/FormFields/FormFields.stories.tsx b/.storybook/stories/FormFields/FormFields.stories.tsx
index 33d927065028..61e5b5f2f941 100644
--- a/.storybook/stories/FormFields/FormFields.stories.tsx
+++ b/.storybook/stories/FormFields/FormFields.stories.tsx
@@ -38,7 +38,7 @@ const AllFormFields = ({
 		message: invalid ? 'Error message' : undefined,
 	};
 	return (
-		<Box padding={1} background={background}>
+		<Box background={background} padding={1}>
 			<Columns>
 				<Column columnSpan={{ xs: 12, md: 8 }}>
 					<form onSubmit={(e) => e.preventDefault}>
@@ -53,13 +53,13 @@ const AllFormFields = ({
 
 							<Select
 								label="Example"
-								placeholder="Please select"
-								value="b"
 								options={[
 									{ value: 'a', label: 'Option A' },
 									{ value: 'b', label: 'Option B' },
 									{ value: 'c', label: 'Option C' },
 								]}
+								placeholder="Please select"
+								value="b"
 								{...commonProps}
 							/>
 
@@ -67,7 +67,7 @@ const AllFormFields = ({
 								<Radio checked={false} {...commonProps}>
 									Option A
 								</Radio>
-								<Radio checked={true} {...commonProps}>
+								<Radio checked {...commonProps}>
 									Option B
 								</Radio>
 								<Radio checked={false} {...commonProps}>
@@ -79,19 +79,19 @@ const AllFormFields = ({
 
 							<DatePicker
 								label="Birth date"
-								value={new Date()}
 								onChange={() => undefined}
+								value={new Date()}
 								{...commonProps}
 							/>
 
 							<DateRangePicker
-								legend="Date range"
-								value={{ from: undefined, to: undefined }}
-								onChange={() => undefined}
 								disabled={commonProps.disabled}
 								fromInvalid={commonProps.invalid}
-								toInvalid={commonProps.invalid}
+								legend="Date range"
 								message={commonProps.message}
+								onChange={() => undefined}
+								toInvalid={commonProps.invalid}
+								value={{ from: undefined, to: undefined }}
 							/>
 
 							<FileInput label="Drivers licence" {...commonProps} />
@@ -110,9 +110,8 @@ const AllFormFields = ({
 							</ControlGroup>
 
 							<Autocomplete
-								label="Find your state"
 								hint="Start typing to see results"
-								value={{ label: 'Tasmania', value: 'tas' }}
+								label="Find your state"
 								loadOptions={async function loadOptions() {
 									return [
 										{ label: 'Australian Capital Territory', value: 'act' },
@@ -125,12 +124,13 @@ const AllFormFields = ({
 										{ label: 'Western Australia', value: 'wa' },
 									];
 								}}
+								value={{ label: 'Tasmania', value: 'tas' }}
 								{...commonProps}
 							/>
 
 							<Combobox
-								label="Select state"
 								hint="Start typing to see results"
+								label="Select state"
 								options={[
 									{ label: 'Australian Capital Territory', value: 'act' },
 									{ label: 'New South Wales', value: 'nsw' },
@@ -146,8 +146,8 @@ const AllFormFields = ({
 							/>
 
 							<ComboboxMulti
-								label="Select state"
 								hint="Start typing to see results"
+								label="Select state"
 								options={[
 									{ label: 'Australian Capital Territory', value: 'act' },
 									{ label: 'New South Wales', value: 'nsw' },
@@ -166,10 +166,10 @@ const AllFormFields = ({
 							/>
 
 							<ButtonGroup>
-								<Button size="md" disabled={disabled}>
+								<Button disabled={disabled} size="md">
 									Submit
 								</Button>
-								<Button size="md" variant="secondary" disabled={disabled}>
+								<Button disabled={disabled} size="md" variant="secondary">
 									Cancel
 								</Button>
 							</ButtonGroup>
@@ -190,9 +190,9 @@ export const BodyAltBackground = () => {
 };
 
 export const InvalidFields = () => {
-	return <AllFormFields background="body" invalid={true} />;
+	return <AllFormFields background="body" invalid />;
 };
 
 export const DisabledFields = () => {
-	return <AllFormFields background="body" disabled={true} />;
+	return <AllFormFields background="body" disabled />;
 };
diff --git a/.storybook/stories/KitchenSink/KitchenSink.stories.tsx b/.storybook/stories/KitchenSink/KitchenSink.stories.tsx
index bd19aa5fa243..ac7cde00c6ff 100644
--- a/.storybook/stories/KitchenSink/KitchenSink.stories.tsx
+++ b/.storybook/stories/KitchenSink/KitchenSink.stories.tsx
@@ -179,11 +179,11 @@ function KitchenSink({ background }: KitchenSinkProps) {
 					<Column columnSpan={{ xs: 12, md: 4 }}>
 						<Stack gap={2}>
 							<SideNav
+								activePath="#in-detail/record-keeping/incorrect-amounts"
 								background={page}
+								items={sideNavItems}
 								title="Lodging your tax return"
 								titleLink="#"
-								items={sideNavItems}
-								activePath="#in-detail/record-keeping/incorrect-amounts"
 							/>
 							<ProgressIndicator
 								activePath="#1"
@@ -200,8 +200,8 @@ function KitchenSink({ background }: KitchenSinkProps) {
 					<Column columnSpan={{ xs: 12, md: 8 }}>
 						<Stack gap={2}>
 							<SubNav
-								background={page}
 								activePath="#usage"
+								background={page}
 								links={[
 									{ href: '#usage', label: 'Usage' },
 									{ href: '#code', label: 'Code' },
@@ -211,20 +211,20 @@ function KitchenSink({ background }: KitchenSinkProps) {
 							/>
 
 							<Stack gap={1}>
-								<PageAlert tone="info" title="Notice">
+								<PageAlert title="Notice" tone="info">
 									<Text as="p">
 										All vacancies close on the advertised closing date unless
 										otherwise specified.
 									</Text>
 								</PageAlert>
 
-								<PageAlert tone="success" title="Submission successful">
+								<PageAlert title="Submission successful" tone="success">
 									<Text as="p">
 										Your application has been successfully submitted.
 									</Text>
 								</PageAlert>
 
-								<PageAlert tone="error" title="There is a problem">
+								<PageAlert title="There is a problem" tone="error">
 									<UnorderedList>
 										<ListItem>
 											<TextLink href="#email">Name is required</TextLink>
@@ -235,7 +235,7 @@ function KitchenSink({ background }: KitchenSinkProps) {
 									</UnorderedList>
 								</PageAlert>
 
-								<PageAlert tone="warning" title="Browser out of date">
+								<PageAlert title="Browser out of date" tone="warning">
 									<Text as="p">Your web browser is out of date.</Text>
 								</PageAlert>
 							</Stack>
@@ -249,7 +249,6 @@ function KitchenSink({ background }: KitchenSinkProps) {
 							/>
 
 							<InpageNav
-								title="On this page"
 								links={[
 									{ href: '#section-1', label: 'Section 1' },
 									{ href: '#section-2', label: 'Section 2' },
@@ -257,6 +256,7 @@ function KitchenSink({ background }: KitchenSinkProps) {
 									{ href: '#section-4', label: 'Section 4' },
 									{ href: '#section-5', label: 'Section 5' },
 								]}
+								title="On this page"
 							/>
 							<H1>Kitchen sink</H1>
 							<Text>
@@ -273,27 +273,27 @@ function KitchenSink({ background }: KitchenSinkProps) {
 							</Text>
 
 							<Callout
+								onBodyAlt={page === 'bodyAlt'}
 								title="Callout heading"
 								tone="neutral"
-								onBodyAlt={page === 'bodyAlt'}
 							>
 								<Text as="p">Description of the callout.</Text>
 							</Callout>
 
-							<SectionAlert tone="error" title="This is a Section alert" />
+							<SectionAlert title="This is a Section alert" tone="error" />
 
 							<SectionAlert
-								tone="success"
-								title="This is a Section alert"
 								onClose={console.log}
+								title="This is a Section alert"
+								tone="success"
 							/>
 
-							<SectionAlert tone="warning" title="This is a Section alert">
+							<SectionAlert title="This is a Section alert" tone="warning">
 								<Text as="p">This is a description.</Text>
 							</SectionAlert>
 
 							<Accordion>
-								<AccordionItem title="Accordion One" background={page}>
+								<AccordionItem background={page} title="Accordion One">
 									<AccordionItemContent>
 										<Text as="p">
 											Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -310,7 +310,7 @@ function KitchenSink({ background }: KitchenSinkProps) {
 										</Text>
 									</AccordionItemContent>
 								</AccordionItem>
-								<AccordionItem title="Accordion Two" background={page}>
+								<AccordionItem background={page} title="Accordion Two">
 									<AccordionItemContent>
 										<Text as="p">
 											Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -396,12 +396,12 @@ function KitchenSink({ background }: KitchenSinkProps) {
 
 							<H2>Modals</H2>
 							<div>
-								<Button variant="secondary" onClick={openModal}>
+								<Button onClick={openModal} variant="secondary">
 									Open Modal
 								</Button>
 							</div>
 							<div>
-								<Button variant="secondary" onClick={openDrawer}>
+								<Button onClick={openDrawer} variant="secondary">
 									Open Drawer
 								</Button>
 							</div>
@@ -415,24 +415,24 @@ function KitchenSink({ background }: KitchenSinkProps) {
 								<PasswordInput label="Password" />
 
 								<TextInput
-									label="Email"
+									id="email"
 									invalid
+									label="Email"
 									message="An email address is required"
-									id="email"
 								/>
 								<DatePicker
 									label="Birth date"
-									value={new Date()}
 									onChange={() => undefined}
+									value={new Date()}
 								/>
 								<Select
 									label="Example"
-									placeholder="Please select"
 									options={[
 										{ value: 'a', label: 'Option A' },
 										{ value: 'b', label: 'Option B' },
 										{ value: 'c', label: 'Option C' },
 									]}
+									placeholder="Please select"
 								/>
 								<FileInput label="Drivers licence" />
 								<FileUpload
@@ -448,28 +448,28 @@ function KitchenSink({ background }: KitchenSinkProps) {
 									<Radio checked={false} onChange={console.log}>
 										Tablet
 									</Radio>
-									<Radio checked={true} onChange={console.log}>
+									<Radio checked onChange={console.log}>
 										Laptop
 									</Radio>
 								</ControlGroup>
-								<Checkbox checked={true} onChange={console.log}>
+								<Checkbox checked onChange={console.log}>
 									Label
 								</Checkbox>
 								<Autocomplete
-									label="Find your country"
 									hint="Start typing to see results"
+									label="Find your country"
 									loadOptions={async function loadOptions() {
 										return COUNTRY_OPTIONS;
 									}}
 								/>
 								<Combobox
-									label="Select country"
 									hint="Start typing to see results"
+									label="Select country"
 									options={COUNTRY_OPTIONS}
 								/>
 								<Switch
+									checked
 									label="Show establishments"
-									checked={true}
 									onChange={console.log}
 								/>
 								<GroupedFields
@@ -482,12 +482,12 @@ function KitchenSink({ background }: KitchenSinkProps) {
 											<TextInput label="TextInput" required {...field1Props} />
 											<Select
 												label="Select"
-												placeholder="Please select"
 												options={[
 													{ value: 'a', label: 'Option A' },
 													{ value: 'b', label: 'Option B' },
 													{ value: 'c', label: 'Option C' },
 												]}
+												placeholder="Please select"
 												{...field2Props}
 											/>
 										</>
@@ -530,124 +530,124 @@ function KitchenSink({ background }: KitchenSinkProps) {
 								</DropdownMenu>
 							</div>
 
-							<Flex gap={0.5} flexWrap="wrap">
-								<StatusBadge tone="successHigh" label="Success" />
-								<StatusBadge tone="errorHigh" label="Error" />
-								<StatusBadge tone="warningHigh" label="Warning" />
-								<StatusBadge tone="infoHigh" label="Info" />
+							<Flex flexWrap="wrap" gap={0.5}>
+								<StatusBadge label="Success" tone="successHigh" />
+								<StatusBadge label="Error" tone="errorHigh" />
+								<StatusBadge label="Warning" tone="warningHigh" />
+								<StatusBadge label="Info" tone="infoHigh" />
 							</Flex>
 
-							<Flex gap={0.5} flexWrap="wrap">
-								<StatusBadge tone="successMedium" label="Success" />
-								<StatusBadge tone="errorMedium" label="Error" />
-								<StatusBadge tone="warningMedium" label="Warning" />
-								<StatusBadge tone="infoMedium" label="Info" />
+							<Flex flexWrap="wrap" gap={0.5}>
+								<StatusBadge label="Success" tone="successMedium" />
+								<StatusBadge label="Error" tone="errorMedium" />
+								<StatusBadge label="Warning" tone="warningMedium" />
+								<StatusBadge label="Info" tone="infoMedium" />
 							</Flex>
 
-							<Flex gap={0.5} flexWrap="wrap">
-								<StatusBadge tone="successLow" label="Success" />
-								<StatusBadge tone="errorLow" label="Error" />
-								<StatusBadge tone="warningLow" label="Warning" />
-								<StatusBadge tone="infoLow" label="Info" />
-								<StatusBadge tone="cannotStartLow" label="Cannot start" />
-								<StatusBadge tone="inProgressLow" label="In progress" />
-								<StatusBadge tone="pausedLow" label="Paused" />
-								<StatusBadge tone="notStartedLow" label="Not started" />
-								<StatusBadge tone="unknownLow" label="Unknown" />
+							<Flex flexWrap="wrap" gap={0.5}>
+								<StatusBadge label="Success" tone="successLow" />
+								<StatusBadge label="Error" tone="errorLow" />
+								<StatusBadge label="Warning" tone="warningLow" />
+								<StatusBadge label="Info" tone="infoLow" />
+								<StatusBadge label="Cannot start" tone="cannotStartLow" />
+								<StatusBadge label="In progress" tone="inProgressLow" />
+								<StatusBadge label="Paused" tone="pausedLow" />
+								<StatusBadge label="Not started" tone="notStartedLow" />
+								<StatusBadge label="Unknown" tone="unknownLow" />
 							</Flex>
 
-							<Flex gap={0.5} flexWrap="wrap">
+							<Flex flexWrap="wrap" gap={0.5}>
 								<Flex flexWrap="wrap" gap={2}>
 									<StatusBadge
 										appearance="subtle"
-										tone="successHigh"
 										label="Success"
+										tone="successHigh"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="errorHigh"
 										label="Error"
+										tone="errorHigh"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="warningHigh"
 										label="Warning"
+										tone="warningHigh"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="infoHigh"
 										label="Info"
+										tone="infoHigh"
 									/>
 								</Flex>
 								<Flex flexWrap="wrap" gap={2}>
 									<StatusBadge
 										appearance="subtle"
-										tone="successMedium"
 										label="Success"
+										tone="successMedium"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="errorMedium"
 										label="Error"
+										tone="errorMedium"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="warningMedium"
 										label="Warning"
+										tone="warningMedium"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="infoMedium"
 										label="Info"
+										tone="infoMedium"
 									/>
 								</Flex>
 								<Flex flexWrap="wrap" gap={2}>
 									<StatusBadge
 										appearance="subtle"
-										tone="successLow"
 										label="Success"
+										tone="successLow"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="errorLow"
 										label="Error"
+										tone="errorLow"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="warningLow"
 										label="Warning"
+										tone="warningLow"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="infoLow"
 										label="Info"
+										tone="infoLow"
 									/>
 								</Flex>
 								<Flex flexWrap="wrap" gap={2}>
 									<StatusBadge
 										appearance="subtle"
-										tone="cannotStartLow"
 										label="Cannot start"
+										tone="cannotStartLow"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="inProgressLow"
 										label="In progress"
+										tone="inProgressLow"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="pausedLow"
 										label="Paused"
+										tone="pausedLow"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="notStartedLow"
 										label="Not started"
+										tone="notStartedLow"
 									/>
 									<StatusBadge
 										appearance="subtle"
-										tone="unknownLow"
 										label="Unknown"
+										tone="unknownLow"
 									/>
 								</Flex>
 							</Flex>
@@ -705,7 +705,7 @@ function KitchenSink({ background }: KitchenSinkProps) {
 								<TableHead>
 									<TableRow>
 										<TableHeader scope="col">Location</TableHeader>
-										<TableHeader textAlign="right" scope="col">
+										<TableHeader scope="col" textAlign="right">
 											Population
 										</TableHeader>
 									</TableRow>
@@ -772,38 +772,38 @@ function KitchenSink({ background }: KitchenSinkProps) {
 				</Columns>
 			</PageContent>
 			<Drawer
-				isOpen={isDrawerOpen}
-				onClose={closeDrawer}
-				title="Drawer title"
 				actions={
 					<ButtonGroup>
 						<Button onClick={closeDrawer}>Primary</Button>
-						<Button variant="secondary" onClick={closeDrawer}>
+						<Button onClick={closeDrawer} variant="secondary">
 							Secondary
 						</Button>
-						<Button variant="tertiary" onClick={closeDrawer}>
+						<Button onClick={closeDrawer} variant="tertiary">
 							Tertiary
 						</Button>
 					</ButtonGroup>
 				}
+				isOpen={isDrawerOpen}
+				onClose={closeDrawer}
+				title="Drawer title"
 			>
 				<Text as="p">Drawer body area.</Text>
 			</Drawer>
 			<Modal
-				isOpen={isModalOpen}
-				onClose={closeModal}
-				title="This is the title of the modal dialog, it can span lines but should not be too long."
 				actions={
 					<ButtonGroup>
 						<Button onClick={closeModal}>Primary button</Button>
-						<Button variant="secondary" onClick={closeModal}>
+						<Button onClick={closeModal} variant="secondary">
 							Secondary button
 						</Button>
-						<Button variant="tertiary" onClick={closeModal}>
+						<Button onClick={closeModal} variant="tertiary">
 							Tertiary button
 						</Button>
 					</ButtonGroup>
 				}
+				isOpen={isModalOpen}
+				onClose={closeModal}
+				title="This is the title of the modal dialog, it can span lines but should not be too long."
 			>
 				<Text as="p">
 					This is the Modal Body paragraph, it provides detailed instruction and
diff --git a/.storybook/stories/SelectableTableBatchActions/ModalAddTrackingNumber.tsx b/.storybook/stories/SelectableTableBatchActions/ModalAddTrackingNumber.tsx
index b47f354e4d03..0c265d8f6d87 100644
--- a/.storybook/stories/SelectableTableBatchActions/ModalAddTrackingNumber.tsx
+++ b/.storybook/stories/SelectableTableBatchActions/ModalAddTrackingNumber.tsx
@@ -30,38 +30,38 @@ export function ModalAddTrackingNumber({
 
 	return (
 		<Drawer
-			isOpen={isOpen}
-			onClose={onClose}
-			title="Add tracking number"
 			actions={
 				<ButtonGroup>
 					<Button loading={submitting} onClick={onSubmit}>
 						Add tracking number
 					</Button>
-					<Button variant="secondary" onClick={onClose}>
+					<Button onClick={onClose} variant="secondary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			}
+			isOpen={isOpen}
+			onClose={onClose}
+			title="Add tracking number"
 		>
 			<FormStack>
 				<Select
+					block
 					label="How was it sent?"
-					placeholder="Select option"
-					required
 					options={[
 						{ value: 'aus-post', label: 'Express post' },
 						{ value: 'fed-ex', label: 'Regular post' },
 					]}
-					block
+					placeholder="Select option"
+					required
 				/>
-				<TextInput label="Tracking number" required block />
+				<TextInput block label="Tracking number" required />
 				<DatePicker
+					block
 					label="Date sent"
-					value={date}
 					onChange={setDate}
 					required
-					block
+					value={date}
 				/>
 			</FormStack>
 		</Drawer>
diff --git a/.storybook/stories/SelectableTableBatchActions/ModalConfirmDelete.tsx b/.storybook/stories/SelectableTableBatchActions/ModalConfirmDelete.tsx
index e59d01adc346..2e278211efa2 100644
--- a/.storybook/stories/SelectableTableBatchActions/ModalConfirmDelete.tsx
+++ b/.storybook/stories/SelectableTableBatchActions/ModalConfirmDelete.tsx
@@ -44,19 +44,19 @@ export function ModalConfirmDelete({
 
 	return (
 		<Modal
-			isOpen={isOpen}
-			onClose={onClose}
-			title={title}
 			actions={
 				<ButtonGroup>
 					<Button loading={submitting} onClick={onSubmit}>
 						Delete items
 					</Button>
-					<Button variant="secondary" onClick={onClose}>
+					<Button onClick={onClose} variant="secondary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			}
+			isOpen={isOpen}
+			onClose={onClose}
+			title={title}
 		>
 			<Text as="p">{description}</Text>
 		</Modal>
diff --git a/.storybook/stories/SelectableTableBatchActions/SelectableTableBatchActions.tsx b/.storybook/stories/SelectableTableBatchActions/SelectableTableBatchActions.tsx
index febc65db0c41..6847e198bbb1 100644
--- a/.storybook/stories/SelectableTableBatchActions/SelectableTableBatchActions.tsx
+++ b/.storybook/stories/SelectableTableBatchActions/SelectableTableBatchActions.tsx
@@ -102,12 +102,12 @@ export function SelectableTableBatchActions() {
 					{renderNotification()}
 					<TableFilters />
 					<Stack gap={0}>
-						<Box paddingLeft={0.75} paddingBottom={1} borderBottom>
+						<Box borderBottom paddingBottom={1} paddingLeft={0.75}>
 							<Checkbox
-								size="sm"
 								checked={isTableHeaderChecked}
 								indeterminate={isTableHeaderIndeterminate}
 								onChange={toggleAllRows}
+								size="sm"
 							>
 								Select all rows
 							</Checkbox>
@@ -116,7 +116,7 @@ export function SelectableTableBatchActions() {
 							<Stack gap={1}>
 								<Stack gap={0.5}>
 									<TableWrapper>
-										<Table striped aria-labelledby="certificates-heading">
+										<Table aria-labelledby="certificates-heading" striped>
 											<TableHead>
 												<TableRow>
 													<TableHeader scope="col" width="6rem">
@@ -135,14 +135,14 @@ export function SelectableTableBatchActions() {
 											<TableBody>
 												{paginatedData.map((row) => (
 													<Row
-														key={row.id}
-														item={row}
-														isRowSelected={isRowSelected(row)}
-														onRowSelectToggle={() => toggleRowSelected(row)}
 														addTrackingNumber={() =>
 															addTrackingNumberToRow(row)
 														}
 														deleteRow={() => deleteRow(row)}
+														isRowSelected={isRowSelected(row)}
+														item={row}
+														key={row.id}
+														onRowSelectToggle={() => toggleRowSelected(row)}
 													/>
 												))}
 											</TableBody>
@@ -156,23 +156,23 @@ export function SelectableTableBatchActions() {
 											</TableBatchActionsTitle>
 											<ButtonGroup>
 												<Button
-													variant="secondary"
-													size="sm"
 													onClick={() => setModalAddTrackingOpen(true)}
+													size="sm"
+													variant="secondary"
 												>
 													Add tracking number
 												</Button>
 												<Button
-													variant="secondary"
-													size="sm"
 													onClick={() => setDeleteModalOpen(true)}
+													size="sm"
+													variant="secondary"
 												>
 													Delete
 												</Button>
 												<Button
-													variant="tertiary"
-													size="sm"
 													onClick={toggleAllRows}
+													size="sm"
+													variant="tertiary"
 												>
 													Cancel
 												</Button>
@@ -188,7 +188,7 @@ export function SelectableTableBatchActions() {
 							</Stack>
 						) : (
 							<Stack paddingY={1}>
-								<Heading type="h3" fontSize="lg">
+								<Heading fontSize="lg" type="h3">
 									No certificates found
 								</Heading>
 							</Stack>
@@ -197,8 +197,8 @@ export function SelectableTableBatchActions() {
 				</Stack>
 			</Stack>
 			<ModalConfirmDelete
-				itemsToDelete={selectedItems}
 				isOpen={deleteModalOpen}
+				itemsToDelete={selectedItems}
 				onClose={() => setDeleteModalOpen(false)}
 				onConfirm={deleteSelectedItems}
 			/>
@@ -255,13 +255,13 @@ function Row({
 			<TableRow selected={isRowSelected}>
 				<TableCell>
 					<Checkbox
-						size="sm"
+						aria-label={`Select certificate ${certNumber}`}
 						checked={isRowSelected}
 						onChange={onRowSelectToggle}
-						aria-label={`Select certificate ${certNumber}`}
+						size="sm"
 					/>
 				</TableCell>
-				<TableCell as="th" scope="row" fontWeight="bold">
+				<TableCell as="th" fontWeight="bold" scope="row">
 					<TextLink href="#">{certNumber}</TextLink>
 				</TableCell>
 				<TableCell>{exporter}</TableCell>
@@ -270,18 +270,18 @@ function Row({
 				<TableCell>{amount}</TableCell>
 				<TableCell>
 					<Flex gap={1}>
-						<Button variant="text" onClick={onAddTrackingClick}>
+						<Button onClick={onAddTrackingClick} variant="text">
 							Add tracking number
 						</Button>
-						<Button variant="text" onClick={onDeleteClick}>
+						<Button onClick={onDeleteClick} variant="text">
 							Delete
 						</Button>
 					</Flex>
 				</TableCell>
 			</TableRow>
 			<ModalConfirmDelete
-				itemsToDelete={item}
 				isOpen={deleteModalOpen}
+				itemsToDelete={item}
 				onClose={() => setDeleteModalOpen(false)}
 				onConfirm={onDeleteConfirm}
 			/>
diff --git a/.storybook/stories/SelectableTableBatchActions/TableFilters.tsx b/.storybook/stories/SelectableTableBatchActions/TableFilters.tsx
index d24527528740..c48d5501fc06 100644
--- a/.storybook/stories/SelectableTableBatchActions/TableFilters.tsx
+++ b/.storybook/stories/SelectableTableBatchActions/TableFilters.tsx
@@ -5,24 +5,24 @@ import { Select } from '../../../packages/react/src/select';
 export function TableFilters() {
 	return (
 		<Flex
+			borderBottom
 			flexDirection={['column', 'row']}
-			justifyContent="space-between"
 			gap={1}
+			justifyContent="space-between"
 			paddingBottom={1}
-			borderBottom
 		>
 			<Flex gap={1}>
-				<SearchInput label="Search certificates" hideOptionalLabel />
+				<SearchInput hideOptionalLabel label="Search certificates" />
 				<Select
+					hideOptionalLabel
 					label="Status"
 					options={[{ label: 'All', value: 'all' }]}
-					hideOptionalLabel
 				/>
 			</Flex>
 			<Select
+				hideOptionalLabel
 				label="Sort by"
 				options={[{ label: 'Last modified', value: 'last modified' }]}
-				hideOptionalLabel
 			/>
 		</Flex>
 	);
diff --git a/.storybook/stories/SelectableTableBatchActions/useNotification.tsx b/.storybook/stories/SelectableTableBatchActions/useNotification.tsx
index 12fef642b67b..11cce5bba1ca 100644
--- a/.storybook/stories/SelectableTableBatchActions/useNotification.tsx
+++ b/.storybook/stories/SelectableTableBatchActions/useNotification.tsx
@@ -24,11 +24,11 @@ export function useNotification() {
 		if (notification && !notification.dismissed) {
 			return (
 				<SectionAlert
+					onClose={() => dismissNotification()}
 					ref={notification.ref}
 					tabIndex={-1}
-					tone="success"
-					onClose={() => dismissNotification()}
 					title={notification.message}
+					tone="success"
 				/>
 			);
 		}
diff --git a/docs/components/AllIconsPlayground.tsx b/docs/components/AllIconsPlayground.tsx
index 66c411e7b359..060b97afdc6e 100644
--- a/docs/components/AllIconsPlayground.tsx
+++ b/docs/components/AllIconsPlayground.tsx
@@ -14,13 +14,12 @@ export function AllIconsPlayground() {
 	const [size, setSize] = useState<IconSize>('md');
 	const [weight, setWeight] = useState<IconWeight>('regular');
 	return (
-		<Stack gap={1.5} className={proseBlockClassname}>
+		<Stack className={proseBlockClassname} gap={1.5}>
 			<Columns cols={{ xs: 1, sm: 2, md: 3 }} gap={1}>
 				<Select
-					label="Size"
 					hideOptionalLabel
+					label="Size"
 					maxWidth="xl"
-					value={size}
 					onChange={(e) => setSize(e.target.value as IconSize)}
 					options={[
 						{ label: 'Small (sm)', value: 'sm' },
@@ -28,17 +27,18 @@ export function AllIconsPlayground() {
 						{ label: 'Large (lg)', value: 'lg' },
 						{ label: 'X-Large (xl)', value: 'xl' },
 					]}
+					value={size}
 				/>
 				<Select
-					label="Weight"
 					hideOptionalLabel
+					label="Weight"
 					maxWidth="xl"
-					value={weight}
 					onChange={(e) => setWeight(e.target.value as IconWeight)}
 					options={[
 						{ label: 'Regular', value: 'regular' },
 						{ label: 'Bold', value: 'bold' },
 					]}
+					value={weight}
 				/>
 			</Columns>
 			<Columns as="ol" cols={{ xs: 1, sm: 2, md: 3 }} gap={1}>
diff --git a/docs/components/Code.tsx b/docs/components/Code.tsx
index 8af6d2291d8f..5f564577c4a7 100644
--- a/docs/components/Code.tsx
+++ b/docs/components/Code.tsx
@@ -47,9 +47,9 @@ require('prismjs/components/prism-diff');
 
 const PlaceholderImage = () => (
 	<img
-		src={withBasePath('/img/placeholder/600X260.png')}
 		alt="Grey placeholder image"
 		css={{ width: '100%' }}
+		src={withBasePath('/img/placeholder/600X260.png')}
 	/>
 );
 
@@ -123,7 +123,7 @@ function LiveCode({
 
 	// Using `Box` here instead of Code snippets with popovers (date picker, combobox, dropdown menu etc) need overflow
 	return (
-		<Box border borderColor="muted" rounded className={proseBlockClassname}>
+		<Box border borderColor="muted" className={proseBlockClassname} rounded>
 			{exampleContentHeadingType && (
 				<CardHeader>
 					<Heading type={exampleContentHeadingType}>
@@ -145,29 +145,29 @@ function LiveCode({
 				role="region"
 			/>
 			<Flex
-				flexWrap="wrap"
-				padding={0.5}
-				gap={0.5}
-				borderTop
 				borderColor="muted"
+				borderTop
 				css={packs.print.hidden}
+				flexWrap="wrap"
+				gap={0.5}
+				padding={0.5}
 			>
 				<Button
+					aria-controls={codeId}
+					aria-expanded={isCodeVisible}
+					iconAfter={isCodeVisible ? ChevronUpIcon : ChevronDownIcon}
+					onClick={toggleIsCodeVisible}
 					ref={liveCodeToggleButton}
 					size="sm"
 					variant="tertiary"
-					onClick={toggleIsCodeVisible}
-					iconAfter={isCodeVisible ? ChevronUpIcon : ChevronDownIcon}
-					aria-expanded={isCodeVisible}
-					aria-controls={codeId}
 				>
 					{isCodeVisible ? 'Hide live code' : 'Show live code'}
 				</Button>
 				<Button
+					iconAfter={CopyIcon}
+					onClick={copyLiveCode}
 					size="sm"
 					variant="tertiary"
-					onClick={copyLiveCode}
-					iconAfter={CopyIcon}
 				>
 					Copy code
 				</Button>
@@ -177,20 +177,15 @@ function LiveCode({
 				</ButtonLink>
 			</Flex>
 			<Box
-				id={codeId}
-				display={isCodeVisible ? 'block' : 'none'}
 				css={packs.print.visible}
-				palette="dark"
+				display={isCodeVisible ? 'block' : 'none'}
+				id={codeId}
 				onKeyDown={onLiveEditorContainerKeyDown}
+				palette="dark"
 				ref={liveEditorRef}
 			>
 				<LiveEditor
-					tabMode="focus"
-					theme={prismTheme}
 					code={live.code}
-					language={live.language}
-					disabled={live.disabled}
-					onChange={handleChange}
 					css={{
 						'&:focus-within': packs.outline,
 						'textarea, pre': {
@@ -202,15 +197,20 @@ function LiveCode({
 							backgroundColor: globalPalette.darkForegroundAction,
 						},
 					}}
+					disabled={live.disabled}
+					language={live.language}
+					onChange={handleChange}
+					tabMode="focus"
+					theme={prismTheme}
 				/>
 			</Box>
 			{live.error ? (
 				<Box
+					background="shade"
+					color="error"
 					fontFamily="monospace"
 					fontSize="xs"
 					padding={1}
-					color="error"
-					background="shade"
 				>
 					{live.error}
 				</Box>
@@ -229,7 +229,6 @@ const StaticCode = ({
 	return (
 		<Box
 			border
-			rounded
 			borderColor="muted"
 			css={{
 				marginTop: mapSpacing(1.5),
@@ -245,9 +244,10 @@ const StaticCode = ({
 					backgroundColor: globalPalette.darkForegroundAction,
 				},
 			}}
+			rounded
 		>
 			<Box dark>
-				<Highlight code={code} theme={prismTheme} language={language}>
+				<Highlight code={code} language={language} theme={prismTheme}>
 					{({ className, style, tokens, getLineProps, getTokenProps }) => (
 						<pre
 							className={[className, unsetProseStylesClassname].join(' ')}
@@ -271,11 +271,11 @@ const StaticCode = ({
 			</Box>
 			<Flex padding={0.5}>
 				<Button
+					aria-label="Copy code snippet to clipboard"
+					iconAfter={CopyIcon}
+					onClick={() => copy(code)}
 					size="sm"
 					variant="tertiary"
-					onClick={() => copy(code)}
-					iconAfter={CopyIcon}
-					aria-label="Copy code snippet to clipboard"
 				>
 					Copy code
 				</Button>
@@ -321,18 +321,18 @@ export function Code({
 		return (
 			<LiveProvider
 				code={childrenAsString}
-				scope={LIVE_SCOPE}
 				language={language}
+				scope={LIVE_SCOPE}
 			>
 				<LiveCode
-					showCode={showCode}
 					enableProse={enableProse}
 					exampleContentHeading={exampleContentHeading}
 					exampleContentHeadingType={exampleContentHeadingType}
+					showCode={showCode}
 				/>
 			</LiveProvider>
 		);
 	}
 
-	return <StaticCode language={language} code={childrenAsString} />;
+	return <StaticCode code={childrenAsString} language={language} />;
 }
diff --git a/docs/components/ConditionalFieldContainer.tsx b/docs/components/ConditionalFieldContainer.tsx
index d0dd6cfe9ac6..1b5c3fbfad12 100644
--- a/docs/components/ConditionalFieldContainer.tsx
+++ b/docs/components/ConditionalFieldContainer.tsx
@@ -11,10 +11,10 @@ export function ConditionalFieldContainer({
 		<Box
 			borderLeft
 			borderLeftWidth="xl"
-			paddingLeft={1.5}
 			css={{
 				marginLeft: `calc(${mapSpacing(1)} - ${tokens.borderWidth.xl / 2}px)`,
 			}}
+			paddingLeft={1.5}
 		>
 			{children}
 		</Box>
diff --git a/docs/components/DoDontHeading.tsx b/docs/components/DoDontHeading.tsx
index 35a426d1366c..e25ab93de455 100644
--- a/docs/components/DoDontHeading.tsx
+++ b/docs/components/DoDontHeading.tsx
@@ -3,7 +3,7 @@ import { SuccessFilledIcon, AlertFilledIcon } from '@ag.ds-next/react/icon';
 
 export const DoHeading = () => (
 	<p>
-		<Flex as="span" alignItems="center" gap={0.5}>
+		<Flex alignItems="center" as="span" gap={0.5}>
 			<SuccessFilledIcon color="success" />
 			<strong>Do</strong>
 		</Flex>
@@ -12,7 +12,7 @@ export const DoHeading = () => (
 
 export const DontHeading = () => (
 	<p>
-		<Flex as="span" alignItems="center" gap={0.5}>
+		<Flex alignItems="center" as="span" gap={0.5}>
 			<AlertFilledIcon color="error" />
 			<strong>Don’t</strong>
 		</Flex>
diff --git a/docs/components/DocumentTitle.tsx b/docs/components/DocumentTitle.tsx
index e7bc861bdf8b..92558dbb7025 100644
--- a/docs/components/DocumentTitle.tsx
+++ b/docs/components/DocumentTitle.tsx
@@ -11,6 +11,6 @@ export const DocumentTitle = ({
 		<title>
 			{[title, 'Agriculture Design System'].filter(Boolean).join(' | ')}
 		</title>
-		{description ? <meta name="description" content={description} /> : null}
+		{description ? <meta content={description} name="description" /> : null}
 	</Head>
 );
diff --git a/docs/components/FigmaLogo.tsx b/docs/components/FigmaLogo.tsx
index 0230a5d8606f..0620eadc8033 100644
--- a/docs/components/FigmaLogo.tsx
+++ b/docs/components/FigmaLogo.tsx
@@ -1,13 +1,13 @@
 export const FigmaLogo = () => {
 	return (
 		<svg
-			width="24"
+			aria-hidden
+			fill="none"
+			focusable="false"
 			height="24"
 			viewBox="0 0 24 24"
-			fill="none"
+			width="24"
 			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-			focusable="false"
 		>
 			<path
 				d="M11.5 12C11.5 9.81338 13.3834 8.04071 15.7067 8.04071C18.03 8.04071 19.9135 9.81338 19.9135 12C19.9135 14.1867 18.03 15.9593 15.7067 15.9593C13.3834 15.9593 11.5 14.1867 11.5 12Z"
diff --git a/docs/components/GithubLogo.tsx b/docs/components/GithubLogo.tsx
index 14f4af789174..9ebc3c01d355 100644
--- a/docs/components/GithubLogo.tsx
+++ b/docs/components/GithubLogo.tsx
@@ -2,11 +2,11 @@
 export function GithubIcon() {
 	return (
 		<svg
+			aria-hidden
+			css={{ width: 24, height: 24, fill: 'currentcolor' }}
+			focusable="false"
 			viewBox="0 0 16 16"
 			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-			focusable="false"
-			css={{ width: 24, height: 24, fill: 'currentcolor' }}
 		>
 			<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
 		</svg>
@@ -17,11 +17,11 @@ export function GithubIcon() {
 export function GithubLogo() {
 	return (
 		<svg
+			aria-hidden
+			css={{ width: 24, height: 24, fill: 'black' }}
+			focusable="false"
 			viewBox="0 0 16 16"
 			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-			focusable="false"
-			css={{ width: 24, height: 24, fill: 'black' }}
 		>
 			<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
 		</svg>
diff --git a/docs/components/LinkComponent.tsx b/docs/components/LinkComponent.tsx
index 70223048631d..8347a359c37f 100644
--- a/docs/components/LinkComponent.tsx
+++ b/docs/components/LinkComponent.tsx
@@ -18,9 +18,9 @@ export const LinkComponent = forwardRef<HTMLAnchorElement, LinkComponentProps>(
 			hrefAsString &&
 			(/^(https?:\/\/|\/\/)/i.test(hrefAsString) || hrefAsString.includes('#'))
 		) {
-			return <a ref={ref} href={hrefAsString} {...props} />;
+			return <a href={hrefAsString} ref={ref} {...props} />;
 		}
 
-		return <Link ref={ref} href={href} {...props} />;
+		return <Link href={href} ref={ref} {...props} />;
 	}
 );
diff --git a/docs/components/PageLayout.tsx b/docs/components/PageLayout.tsx
index fb32fadb7b1f..7ca4d556558a 100644
--- a/docs/components/PageLayout.tsx
+++ b/docs/components/PageLayout.tsx
@@ -39,9 +39,9 @@ export function PageLayout({
 						<ContentBleed visible={{ md: false }}>
 							<SideNav
 								activePath={router.asPath}
+								items={sideNav.items}
 								title={sideNav.title}
 								titleLink={sideNav.titleLink}
-								items={sideNav.items}
 							/>
 						</ContentBleed>
 					</Column>
diff --git a/docs/components/PageTitle.tsx b/docs/components/PageTitle.tsx
index ddb6e21ec56b..4a1dfff9c43a 100644
--- a/docs/components/PageTitle.tsx
+++ b/docs/components/PageTitle.tsx
@@ -20,8 +20,8 @@ export const PageTitle = ({
 		<Stack>
 			{pretext ? (
 				<Text
-					fontSize="sm"
 					color="muted"
+					fontSize="sm"
 					fontWeight="bold"
 					lineHeight="heading"
 				>
@@ -31,7 +31,7 @@ export const PageTitle = ({
 			<H1>{title}</H1>
 		</Stack>
 		{introduction ? (
-			<Text as="p" fontSize="md" color="muted">
+			<Text as="p" color="muted" fontSize="md">
 				{introduction}
 			</Text>
 		) : null}
diff --git a/docs/components/PatternLayout.tsx b/docs/components/PatternLayout.tsx
index f7d9e7fb5b07..b8e39c5103d9 100644
--- a/docs/components/PatternLayout.tsx
+++ b/docs/components/PatternLayout.tsx
@@ -27,48 +27,48 @@ export function PatternLayout({
 	return (
 		<SiteLayout applyMainElement={false}>
 			<PageLayout
-				applyMainElement={true}
+				applyMainElement
+				breadcrumbs={breadcrumbs}
+				editPath={editPath}
 				sideNav={{
 					title: 'Patterns',
 					titleLink: '/patterns',
 					items: navLinks,
 				}}
-				editPath={editPath}
-				breadcrumbs={breadcrumbs}
 			>
-				<PageTitle title={pattern.title} introduction={pattern.description} />
+				<PageTitle introduction={pattern.description} title={pattern.title} />
 				{(pattern.figmaTemplateNodeId ||
 					pattern.githubTemplatePath ||
 					pattern.storybookPath) && (
 					<Flex
-						gap={1.5}
-						flexWrap="wrap"
-						flexDirection={['column', 'row']}
 						alignItems="flex-start"
+						flexDirection={['column', 'row']}
+						flexWrap="wrap"
+						gap={1.5}
 					>
 						{pattern.figmaTemplateNodeId && (
 							<ButtonLink
-								variant="text"
 								href={`${process.env.NEXT_PUBLIC_FIGMA_URL}?node-id=${pattern.figmaTemplateNodeId}`}
 								iconBefore={FigmaLogo}
+								variant="text"
 							>
 								View in Figma
 							</ButtonLink>
 						)}
 						{pattern.storybookPath && (
 							<ButtonLink
-								variant="text"
 								href={`${process.env.NEXT_PUBLIC_STORYBOOK_URL}?path=${pattern.storybookPath}`}
 								iconBefore={StorybookLogo}
+								variant="text"
 							>
 								View in Storybook
 							</ButtonLink>
 						)}
 						{pattern.githubTemplatePath && (
 							<ButtonLink
-								variant="text"
 								href={`https://github.com/agriculturegovau/agds-next/blob/main${pattern.githubTemplatePath}`}
 								iconBefore={GithubLogo}
+								variant="text"
 							>
 								View in Github
 							</ButtonLink>
diff --git a/docs/components/PictogramCard.tsx b/docs/components/PictogramCard.tsx
index ba8c33cceea1..dfacd40b3a36 100644
--- a/docs/components/PictogramCard.tsx
+++ b/docs/components/PictogramCard.tsx
@@ -15,11 +15,11 @@ export const PictogramCard = ({
 	<Card as="li" clickable shadow>
 		<Flex
 			alignItems="center"
+			background="shade"
 			justifyContent="center"
 			padding={1}
-			background="shade"
 		>
-			<img src={getPictogram(pictogram).src} alt="" aria-hidden="true" />
+			<img alt="" aria-hidden src={getPictogram(pictogram).src} />
 		</Flex>
 		<CardInner>
 			<CardLink {...props}>
diff --git a/docs/components/PkgCardList.tsx b/docs/components/PkgCardList.tsx
index ed5a85e66c2c..0f1d74c177e2 100644
--- a/docs/components/PkgCardList.tsx
+++ b/docs/components/PkgCardList.tsx
@@ -15,10 +15,10 @@ export const PkgCardList = ({ items }: { items: Pkg[] }) => (
 	<Columns as="ul" cols={{ xs: 1, sm: 2, md: 1, lg: 2 }}>
 		{items.map(({ title, slug }) => (
 			<PictogramCard
-				title={title}
-				pictogram={slug}
 				href={`/components/${slug}`}
 				key={slug}
+				pictogram={slug}
+				title={title}
 			/>
 		))}
 	</Columns>
@@ -29,10 +29,10 @@ export const PkgCardListEmptyState = ({
 }: {
 	onClear?: () => void;
 }) => (
-	<Stack gap={2} alignItems="flex-start" role="status">
+	<Stack alignItems="flex-start" gap={2} role="status">
 		<Stack gap={1}>
-			<HelpIcon size="lg" color="muted" />
-			<Heading type="h2" fontSize="lg">
+			<HelpIcon color="muted" size="lg" />
+			<Heading fontSize="lg" type="h2">
 				No components found
 			</Heading>
 			<Text>Try adjusting your filter options.</Text>
diff --git a/docs/components/PkgLayout.tsx b/docs/components/PkgLayout.tsx
index 63c262aebab9..b6e3c28e093f 100644
--- a/docs/components/PkgLayout.tsx
+++ b/docs/components/PkgLayout.tsx
@@ -31,55 +31,55 @@ export function PkgLayout({
 	return (
 		<SiteLayout applyMainElement={false}>
 			<PageLayout
-				applyMainElement={true}
+				applyMainElement
+				breadcrumbs={breadcrumbs}
+				editPath={editPath}
 				sideNav={{
 					title: 'Components',
 					titleLink: '/components',
 					items: navLinks,
 				}}
-				editPath={editPath}
-				breadcrumbs={breadcrumbs}
 			>
 				<PageTitle
-					title={pkg.title}
-					introduction={pkg.description}
 					callToAction={
 						(pkg.storybookPath || pkg.figmaGalleryNodeId) && (
 							<Flex
-								gap={1.5}
-								flexWrap="wrap"
-								flexDirection={['column', 'row']}
 								alignItems="flex-start"
+								flexDirection={['column', 'row']}
+								flexWrap="wrap"
+								gap={1.5}
 							>
 								{pkg.figmaGalleryNodeId && (
 									<ButtonLink
-										variant="text"
 										href={`${process.env.NEXT_PUBLIC_FIGMA_URL}?node-id=${pkg.figmaGalleryNodeId}`}
 										iconBefore={FigmaLogo}
+										variant="text"
 									>
 										View in Figma
 									</ButtonLink>
 								)}
 								{pkg.storybookPath && (
 									<ButtonLink
-										variant="text"
 										href={`${process.env.NEXT_PUBLIC_STORYBOOK_URL}?path=${pkg.storybookPath}`}
 										iconBefore={StorybookLogo}
+										variant="text"
 									>
 										View in Storybook
 									</ButtonLink>
 								)}
 
 								<ButtonLink
-									variant="text"
 									href={`https://github.com/agriculturegovau/agds-next/tree/main/packages/react/src/${pkg.slug}`}
 									iconBefore={GithubLogo}
+									variant="text"
 								>
 									View in Github
 								</ButtonLink>
 							</Flex>
 						)
 					}
+					introduction={pkg.description}
+					title={pkg.title}
 				/>
 				{!pkg.deprecated && (
 					<Fragment>
diff --git a/docs/components/SiteFooter.tsx b/docs/components/SiteFooter.tsx
index 2e937b9ab05e..4ade4239c6eb 100644
--- a/docs/components/SiteFooter.tsx
+++ b/docs/components/SiteFooter.tsx
@@ -33,7 +33,7 @@ export const SiteFooter = () => {
 		<Box palette="dark">
 			<Footer background="bodyAlt">
 				<nav aria-label="footer">
-					<LinkList links={footerLinks} horizontal />
+					<LinkList horizontal links={footerLinks} />
 				</nav>
 				<FooterDivider />
 				<Text fontSize="xs" maxWidth={tokens.maxWidth.bodyText}>
diff --git a/docs/components/SiteHeader.tsx b/docs/components/SiteHeader.tsx
index b4ec3afb4177..4e8ffd1b8166 100644
--- a/docs/components/SiteHeader.tsx
+++ b/docs/components/SiteHeader.tsx
@@ -30,14 +30,14 @@ export const SiteHeader = () => {
 		<Stack palette="dark">
 			<Header
 				background="bodyAlt"
-				logo={<Logo />}
+				badgeLabel="Beta"
 				heading="Agriculture Design System"
+				logo={<Logo />}
 				subline="Design System for the Export Service"
-				badgeLabel="Beta"
 			/>
 			<MainNav
-				id="main-nav"
 				activePath={router.asPath}
+				id="main-nav"
 				items={NAV_ITEMS.primary}
 				secondaryItems={NAV_ITEMS.secondary}
 			/>
diff --git a/docs/components/StorybookLogo.tsx b/docs/components/StorybookLogo.tsx
index abcabcd868fa..c1a3e771d82a 100644
--- a/docs/components/StorybookLogo.tsx
+++ b/docs/components/StorybookLogo.tsx
@@ -1,18 +1,18 @@
 export const StorybookLogo = () => (
 	<svg
-		width="24"
+		aria-hidden
+		fill="none"
+		focusable="false"
 		height="24"
 		viewBox="0 0 24 24"
-		fill="none"
+		width="24"
 		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-		focusable="false"
 	>
 		<path
-			fillRule="evenodd"
 			clipRule="evenodd"
 			d="M2.00077 2.30404L2.74477 22.116V22.1148C2.7562 22.4175 2.881 22.7048 3.09439 22.9197C3.30778 23.1347 3.59418 23.2616 3.89676 23.2752L20.0031 23.9988C20.1659 24.0061 20.3285 23.9803 20.4811 23.9231C20.6337 23.8658 20.7732 23.7783 20.891 23.6657C21.0088 23.5531 21.1027 23.4179 21.1668 23.268C21.231 23.1182 21.2642 22.957 21.2643 22.794V1.20725C21.2645 1.0423 21.2308 0.879068 21.1654 0.72765C21.1 0.576232 21.0042 0.439845 20.8839 0.326921C20.7637 0.213998 20.6216 0.12694 20.4664 0.0711298C20.3112 0.0153195 20.1461 -0.00805625 19.9815 0.00244798L18.6581 0.085212L18.754 2.85455C18.7553 2.88891 18.7467 2.9229 18.7292 2.9525C18.7117 2.98211 18.6861 3.00609 18.6555 3.02162C18.6248 3.03714 18.5903 3.04356 18.5561 3.04011C18.5219 3.03666 18.4894 3.02349 18.4624 3.00215L17.5697 2.29896L16.5137 3.10055C16.4864 3.12102 16.4539 3.13334 16.42 3.13608C16.386 3.13882 16.352 3.13187 16.3218 3.11604C16.2917 3.1002 16.2666 3.07613 16.2496 3.04663C16.2326 3.01712 16.2243 2.98339 16.2257 2.94935L16.3384 0.230273L3.13357 1.05605C2.81929 1.07525 2.52495 1.21649 2.31332 1.44963C2.1017 1.68278 1.98954 1.98938 2.00077 2.30404ZM13.2653 9.27814C13.2653 9.74734 16.4285 9.52294 16.8521 9.19294C16.8521 5.99615 15.1373 4.31615 11.9957 4.31615C8.85407 4.31615 7.09488 6.02255 7.09488 8.58094C7.09488 11.1453 9.08447 12.2625 10.7753 13.2117C12.0245 13.9125 13.1093 14.5221 13.1093 15.5553C13.1093 16.2369 12.7757 16.6425 12.0401 16.6425C11.0825 16.6425 10.7033 16.1529 10.7489 14.4897C10.7489 14.1297 7.09488 14.0169 6.98328 14.4897C6.70008 18.5205 9.21167 19.6833 12.0857 19.6833C14.8697 19.6833 17.0537 18.2001 17.0537 15.5121C17.0537 12.7092 14.9504 11.5943 13.2141 10.674C11.9913 10.026 10.9493 9.47374 10.9493 8.49574C10.9493 7.53574 11.6621 7.40854 12.0845 7.40854C12.5309 7.40854 13.3325 7.48654 13.2653 9.27814Z"
 			fill="#FF4785"
+			fillRule="evenodd"
 		/>
 	</svg>
 );
diff --git a/docs/components/TemplateLayout.tsx b/docs/components/TemplateLayout.tsx
index 556d44a124f9..a9a69590a57a 100644
--- a/docs/components/TemplateLayout.tsx
+++ b/docs/components/TemplateLayout.tsx
@@ -28,18 +28,16 @@ export function TemplateLayout({
 	return (
 		<SiteLayout applyMainElement={false}>
 			<PageLayout
-				applyMainElement={true}
+				applyMainElement
+				breadcrumbs={breadcrumbs}
+				editPath={editPath}
 				sideNav={{
 					title: 'Templates',
 					titleLink: '/templates',
 					items: navLinks,
 				}}
-				editPath={editPath}
-				breadcrumbs={breadcrumbs}
 			>
 				<PageTitle
-					title={template.title}
-					introduction={template.description}
 					callToAction={
 						template.previewPath && (
 							<CallToActionLink href={`/example-site${template.previewPath}`}>
@@ -47,39 +45,41 @@ export function TemplateLayout({
 							</CallToActionLink>
 						)
 					}
+					introduction={template.description}
+					title={template.title}
 				/>
 				{(template.figmaTemplateNodeId ||
 					template.githubTemplatePath ||
 					template.storybookPath) && (
 					<Flex
-						gap={1.5}
-						flexWrap="wrap"
-						flexDirection={['column', 'row']}
 						alignItems="flex-start"
+						flexDirection={['column', 'row']}
+						flexWrap="wrap"
+						gap={1.5}
 					>
 						{template.figmaTemplateNodeId && (
 							<ButtonLink
-								variant="text"
 								href={`${process.env.NEXT_PUBLIC_FIGMA_URL}?node-id=${template.figmaTemplateNodeId}`}
 								iconBefore={FigmaLogo}
+								variant="text"
 							>
 								View in Figma
 							</ButtonLink>
 						)}
 						{template.storybookPath && (
 							<ButtonLink
-								variant="text"
 								href={`${process.env.NEXT_PUBLIC_STORYBOOK_URL}?path=${template.storybookPath}`}
 								iconBefore={StorybookLogo}
+								variant="text"
 							>
 								View in Storybook
 							</ButtonLink>
 						)}
 						{template.githubTemplatePath && (
 							<ButtonLink
-								variant="text"
 								href={`https://github.com/agriculturegovau/agds-next/blob/main${template.githubTemplatePath}`}
 								iconBefore={GithubLogo}
+								variant="text"
 							>
 								View in Github
 							</ButtonLink>
diff --git a/docs/components/TokenCharts.tsx b/docs/components/TokenCharts.tsx
index 6deff64eac84..24610ed89487 100644
--- a/docs/components/TokenCharts.tsx
+++ b/docs/components/TokenCharts.tsx
@@ -65,17 +65,17 @@ export const BorderWidthTokenChart = () => {
 	const borderWidths = tokens.borderWidth;
 
 	return (
-		<Flex gap={0.5} className={proseBlockClassname}>
+		<Flex className={proseBlockClassname} gap={0.5}>
 			{(Object.entries(borderWidths) as Entries<typeof borderWidths>).map(
 				([token, value]) => {
 					const label = `${token} (${value}px)`;
 					return (
 						<Flex
-							key={token}
 							alignItems="center"
-							padding={0.5}
 							border
 							borderWidth={token}
+							key={token}
+							padding={0.5}
 						>
 							{label}
 						</Flex>
@@ -91,11 +91,11 @@ export const SpacingTokenChart = () => {
 	const spacingTokens: Spacing[] = [0, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 5, 6];
 
 	return (
-		<Stack gap={0.5} className={proseBlockClassname}>
+		<Stack className={proseBlockClassname} gap={0.5}>
 			{spacingTokens.map((token) => {
 				const label = `${token} (${token * 16}px)`;
 				return (
-					<Flex key={token} gap={0.25}>
+					<Flex gap={0.25} key={token}>
 						<Box
 							css={{
 								backgroundColor: boxPalette.systemInfoMuted,
@@ -113,13 +113,13 @@ export const SpacingTokenChart = () => {
 export const LineHeightTokenChart = () => {
 	const fontSizes = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'] as FontSize[];
 	return (
-		<Flex gap={1} className={proseBlockClassname}>
+		<Flex className={proseBlockClassname} gap={1}>
 			<Flex flexDirection="column" gap={1}>
 				<Text fontSize="sm" fontWeight="bold">
 					Default
 				</Text>
 				{fontSizes.map((size) => (
-					<Box key={size} background="shade">
+					<Box background="shade" key={size}>
 						<Text fontSize={size}>{size.toUpperCase()}</Text>
 					</Box>
 				))}
@@ -129,7 +129,7 @@ export const LineHeightTokenChart = () => {
 					Heading
 				</Text>
 				{fontSizes.map((size) => (
-					<Box key={size} background="shade">
+					<Box background="shade" key={size}>
 						<Text fontSize={size} lineHeight="heading">
 							{size.toUpperCase()}
 						</Text>
@@ -141,7 +141,7 @@ export const LineHeightTokenChart = () => {
 					Nospace
 				</Text>
 				{fontSizes.map((size) => (
-					<Box key={size} background="shade">
+					<Box background="shade" key={size}>
 						<Text fontSize={size} lineHeight="nospace">
 							{size.toUpperCase()}
 						</Text>
@@ -252,15 +252,15 @@ export const ShadowTokenChart = () => {
 	][];
 
 	return (
-		<Columns cols={3} gap={1.5} className={proseBlockClassname}>
+		<Columns className={proseBlockClassname} cols={3} gap={1.5}>
 			{shadowTokens.map(([token, shadow]) => (
 				<Flex
+					css={{ boxShadow: shadow }}
+					flexDirection="column"
 					key={token}
 					paddingX={1}
 					paddingY={2}
 					rounded
-					flexDirection="column"
-					css={{ boxShadow: shadow }}
 				>
 					<Text fontWeight="bold">{token}</Text>
 					<Text fontSize="xs">{shadow}</Text>
diff --git a/docs/components/TokenColorTable.tsx b/docs/components/TokenColorTable.tsx
index d35312ab577b..663fd4c8d0a1 100644
--- a/docs/components/TokenColorTable.tsx
+++ b/docs/components/TokenColorTable.tsx
@@ -237,18 +237,18 @@ export const ColorTable = ({
 		<div className={proseBlockClassname}>
 			<TableWrapper>
 				<Table
-					aria-labelledby={ariaLabelledby}
 					aria-describedby={ariaDescribedby}
+					aria-labelledby={ariaLabelledby}
 				>
 					<TableHead>
 						<TableRow>
-							<TableHeader width="25%" scope="col">
+							<TableHeader scope="col" width="25%">
 								Name
 							</TableHeader>
-							<TableHeader width="25%" scope="col">
+							<TableHeader scope="col" width="25%">
 								Value
 							</TableHeader>
-							<TableHeader width="50%" scope="col">
+							<TableHeader scope="col" width="50%">
 								Description
 							</TableHeader>
 						</TableRow>
@@ -258,7 +258,7 @@ export const ColorTable = ({
 							return (
 								<TableRow key={name}>
 									<TableCell>
-										<Flex gap={0.5} alignItems="center">
+										<Flex alignItems="center" gap={0.5}>
 											<ColorSquare color={color} />
 											{name}
 										</Flex>
diff --git a/docs/components/TokenLayout.tsx b/docs/components/TokenLayout.tsx
index 6f37234d04ab..d2ebd6ede04c 100644
--- a/docs/components/TokenLayout.tsx
+++ b/docs/components/TokenLayout.tsx
@@ -89,16 +89,16 @@ export const TokenLayout = ({
 	return (
 		<SiteLayout applyMainElement={false}>
 			<PageLayout
-				applyMainElement={true}
+				applyMainElement
+				breadcrumbs={getBreadcrumbs(title)}
+				editPath={editPath}
 				sideNav={{
 					title: 'Tokens',
 					titleLink: '/foundations/tokens',
 					items: TOKEN_NAV_LINKS.map(({ href, label }) => ({ href, label })),
 				}}
-				editPath={editPath}
-				breadcrumbs={getBreadcrumbs(title)}
 			>
-				<PageTitle title={title} introduction={description} />
+				<PageTitle introduction={description} title={title} />
 				{children}
 			</PageLayout>
 		</SiteLayout>
diff --git a/docs/components/mdxComponents.tsx b/docs/components/mdxComponents.tsx
index 58dd2d54f01d..a692a67c91e7 100644
--- a/docs/components/mdxComponents.tsx
+++ b/docs/components/mdxComponents.tsx
@@ -82,12 +82,12 @@ export const mdxComponents: MDXRemoteProps['components'] = {
 					if (!isValidElement(element)) return null;
 					return (
 						<Code
-							key={element.key}
-							live={live}
-							showCode={showCode}
 							enableProse={enableProse}
 							exampleContentHeading={exampleContentHeading}
 							exampleContentHeadingType={exampleContentHeadingType}
+							key={element.key}
+							live={live}
+							showCode={showCode}
 							{...element.props}
 						/>
 					);
@@ -108,14 +108,12 @@ export const mdxComponents: MDXRemoteProps['components'] = {
 			borderColor="muted"
 			css={{ marginTop: mapSpacing(1.5), img: { display: 'block' } }}
 		>
-			<img src={withBasePath(src)} alt={alt} {...props} />
+			<img alt={alt} src={withBasePath(src)} {...props} />
 		</Box>
 	),
 	ButtonLink,
 	FigmaEmbed: ({ src, title }: { src: string; title: string }) => (
 		<Box
-			width="100%"
-			height="0"
 			border
 			borderColor="muted"
 			css={{
@@ -123,15 +121,12 @@ export const mdxComponents: MDXRemoteProps['components'] = {
 				paddingBottom: '56.25%',
 				overflow: 'hidden',
 			}}
+			height="0"
+			width="100%"
 		>
 			<Box
-				as="iframe"
-				frameBorder="0"
-				src={src}
 				allowFullScreen
-				height="100%"
-				width="100%"
-				title={title}
+				as="iframe"
 				css={{
 					position: 'absolute',
 					top: 0,
@@ -139,6 +134,11 @@ export const mdxComponents: MDXRemoteProps['components'] = {
 					width: '100%',
 					height: '100%',
 				}}
+				frameBorder="0"
+				height="100%"
+				src={src}
+				title={title}
+				width="100%"
 			/>
 		</Box>
 	),
@@ -208,9 +208,9 @@ export const mdxComponents: MDXRemoteProps['components'] = {
 	AllIconsPlayground,
 	BackToTop: () => (
 		<DirectionLink
+			className={proseBlockClassname}
 			direction="up"
 			href="#main-content"
-			className={proseBlockClassname}
 		>
 			Back to top
 		</DirectionLink>
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
index 4f11a03dc6cc..a4a7b3f5cfa2 100644
--- a/docs/next-env.d.ts
+++ b/docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
index 0ee9d21dccfb..1f8794f820d1 100644
--- a/docs/pages/_app.tsx
+++ b/docs/pages/_app.tsx
@@ -21,33 +21,31 @@ export default function App({ Component, pageProps }: AppProps) {
 	}, [router.events]);
 
 	return (
-		<Core theme={theme} linkComponent={LinkComponent}>
+		<Core linkComponent={LinkComponent} theme={theme}>
 			<Head>
 				<meta
-					name="viewport"
 					content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"
+					name="viewport"
 				/>
 				{/* Open graph image  */}
-				<meta property="og:image" content="/img/ogimage.png" />
+				<meta content="/img/ogimage.png" property="og:image" />
 				{/* Favicons  */}
 				<link
+					href="/favicon/favicon.png"
 					rel="alternate icon"
 					type="image/png"
-					href="/favicon/favicon.png"
 				/>
-				<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
-				<link rel="manifest" href="/favicon/manifest.webmanifest" />
+				<link href="/favicon/favicon.svg" rel="icon" type="image/svg+xml" />
+				<link href="/favicon/manifest.webmanifest" rel="manifest" />
 			</Head>
 			{/* Global Site Tag (gtag.js) - Google Analytics */}
 			{GA_MEASUREMENT_ID ? (
 				<Fragment>
 					<Script
-						strategy="afterInteractive"
 						src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+						strategy="afterInteractive"
 					/>
 					<Script
-						id="gtag-init"
-						strategy="afterInteractive"
 						dangerouslySetInnerHTML={{
 							__html: `
             window.dataLayer = window.dataLayer || [];
@@ -58,6 +56,8 @@ export default function App({ Component, pageProps }: AppProps) {
             });
           `,
 						}}
+						id="gtag-init"
+						strategy="afterInteractive"
 					/>
 				</Fragment>
 			) : null}
diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
index 0340e680136a..a3d19c6f945c 100644
--- a/docs/pages/about.tsx
+++ b/docs/pages/about.tsx
@@ -19,11 +19,11 @@ export default function AboutPage({
 			<DocumentTitle title={title} />
 			<SiteLayout applyMainElement={false}>
 				<PageLayout
-					applyMainElement={true}
+					applyMainElement
 					breadcrumbs={[{ href: '/', label: 'Home' }, { label: title }]}
 					editPath="/docs/content/about.mdx"
 				>
-					<PageTitle title={title} introduction={description} />
+					<PageTitle introduction={description} title={title} />
 					<Prose>
 						<MDXRemote {...source} components={mdxComponents} />
 					</Prose>
diff --git a/docs/pages/components/[slug]/accessibility.tsx b/docs/pages/components/[slug]/accessibility.tsx
index c6a04c4b03ff..266550b76ce5 100644
--- a/docs/pages/components/[slug]/accessibility.tsx
+++ b/docs/pages/components/[slug]/accessibility.tsx
@@ -26,15 +26,15 @@ export default function PackagesAccessibility({
 		<>
 			<DocumentTitle title={`${pkg.title} Accessibility`} />
 			<PkgLayout
-				pkg={pkg}
-				navLinks={navLinks}
 				breadcrumbs={breadcrumbs}
 				editPath={`/packages/react/src/${pkg.slug}/docs/accessibility.mdx`}
+				navLinks={navLinks}
+				pkg={pkg}
 			>
 				{toc?.length > 1 ? (
 					<InpageNav
-						title="On this page"
 						links={toc.map((i) => ({ label: i.title, href: `#${i.slug}` }))}
+						title="On this page"
 					/>
 				) : null}
 				<Prose id="pkg-content">
diff --git a/docs/pages/components/[slug]/code.tsx b/docs/pages/components/[slug]/code.tsx
index 947d99742f81..707d07224777 100644
--- a/docs/pages/components/[slug]/code.tsx
+++ b/docs/pages/components/[slug]/code.tsx
@@ -26,13 +26,12 @@ export default function PackagesCode({
 		<>
 			<DocumentTitle title={`${pkg.title} Code`} />
 			<PkgLayout
-				pkg={pkg}
-				navLinks={navLinks}
 				breadcrumbs={breadcrumbs}
 				editPath={`/packages/react/src/${pkg.slug}/docs/code.mdx`}
+				navLinks={navLinks}
+				pkg={pkg}
 			>
 				<InpageNav
-					title="On this page"
 					links={[
 						{
 							label: 'Usage',
@@ -44,6 +43,7 @@ export default function PackagesCode({
 							href: '#source',
 						},
 					]}
+					title="On this page"
 				/>
 				<Prose id="pkg-content">
 					<h2 id="usage">Usage</h2>
diff --git a/docs/pages/components/[slug]/content.tsx b/docs/pages/components/[slug]/content.tsx
index bb15c0f9d5a7..37863204d3f7 100644
--- a/docs/pages/components/[slug]/content.tsx
+++ b/docs/pages/components/[slug]/content.tsx
@@ -26,15 +26,15 @@ export default function PackagesContent({
 		<>
 			<DocumentTitle title={`${pkg.title} Content`} />
 			<PkgLayout
-				pkg={pkg}
-				navLinks={navLinks}
 				breadcrumbs={breadcrumbs}
 				editPath={`/packages/react/src/${pkg.slug}/docs/content.mdx`}
+				navLinks={navLinks}
+				pkg={pkg}
 			>
 				{toc?.length > 1 ? (
 					<InpageNav
-						title="On this page"
 						links={toc.map((i) => ({ label: i.title, href: `#${i.slug}` }))}
+						title="On this page"
 					/>
 				) : null}
 				<Prose id="pkg-content">
diff --git a/docs/pages/components/[slug]/index.tsx b/docs/pages/components/[slug]/index.tsx
index 45fc3c5d426c..a54122f60efb 100644
--- a/docs/pages/components/[slug]/index.tsx
+++ b/docs/pages/components/[slug]/index.tsx
@@ -29,17 +29,17 @@ export default function Packages({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
 	return (
 		<>
-			<DocumentTitle title={pkg.title} description={pkg.description} />
+			<DocumentTitle description={pkg.description} title={pkg.title} />
 			<PkgLayout
-				pkg={pkg}
-				navLinks={navLinks}
 				breadcrumbs={breadcrumbs}
 				editPath={`/packages/react/src/${pkg.slug}/docs/overview.mdx`}
+				navLinks={navLinks}
+				pkg={pkg}
 			>
 				{toc?.length > 1 ? (
 					<InpageNav
-						title="On this page"
 						links={toc.map((i) => ({ label: i.title, href: `#${i.slug}` }))}
+						title="On this page"
 					/>
 				) : null}
 				<Prose id="pkg-content">
diff --git a/docs/pages/components/[slug]/rationale.tsx b/docs/pages/components/[slug]/rationale.tsx
index 1358a9019bf6..9249ec7145bf 100644
--- a/docs/pages/components/[slug]/rationale.tsx
+++ b/docs/pages/components/[slug]/rationale.tsx
@@ -26,15 +26,15 @@ export default function PackagesRationale({
 		<>
 			<DocumentTitle title={`${pkg.title} Rationale`} />
 			<PkgLayout
-				pkg={pkg}
-				navLinks={navLinks}
 				breadcrumbs={breadcrumbs}
 				editPath={`/packages/react/src/${pkg.slug}/docs/rationale.mdx`}
+				navLinks={navLinks}
+				pkg={pkg}
 			>
 				{toc?.length > 1 ? (
 					<InpageNav
-						title="On this page"
 						links={toc.map((i) => ({ label: i.title, href: `#${i.slug}` }))}
+						title="On this page"
 					/>
 				) : null}
 				<Prose id="pkg-content">
diff --git a/docs/pages/components/index.tsx b/docs/pages/components/index.tsx
index 440d4c1843bb..85c0c6d1fa0a 100644
--- a/docs/pages/components/index.tsx
+++ b/docs/pages/components/index.tsx
@@ -62,38 +62,37 @@ export default function PackagesHome({
 
 	return (
 		<>
-			<DocumentTitle title="Components" description={description} />
+			<DocumentTitle description={description} title="Components" />
 			<CategoryPageTemplate
-				title={title}
 				description={description}
 				editPath="/docs/content/components/index.mdx"
+				title={title}
 			>
 				<Columns>
 					<Column columnSpan={{ xs: 12, md: 4, lg: 3 }}>
 						<Stack gap={1}>
 							<FilterSidebar onClearFilters={resetFilters}>
 								<FormStack>
-									<div role="search" aria-label="components">
+									<div aria-label="Components" role="search">
 										<SearchInput
-											label="Find a component"
+											hideOptionalLabel
 											hint="Filter by name or category"
-											value={searchTerm}
-											onChange={setSearchTerm}
+											label="Find a component"
 											maxWidth="xl"
-											hideOptionalLabel
+											onChange={setSearchTerm}
+											value={searchTerm}
 										/>
 									</div>
 									<ControlGroup
-										label="Category"
-										block={true}
-										hideOptionalLabel
 										aria-controls={listId}
+										block
+										hideOptionalLabel
+										label="Category"
 									>
 										{groupList.map(({ title }) => (
 											<Checkbox
-												key={title}
-												value={title}
 												checked={activeCategories.includes(title)}
+												key={title}
 												onChange={(e) => {
 													const checked = e.target.checked;
 													setActiveCategories(
@@ -102,6 +101,7 @@ export default function PackagesHome({
 															: activeCategories?.filter((s) => s !== title)
 													);
 												}}
+												value={title}
 											>
 												{title}
 											</Checkbox>
@@ -112,9 +112,9 @@ export default function PackagesHome({
 						</Stack>
 					</Column>
 					<Column
-						id={listId}
 						columnSpan={{ xs: 12, md: 8 }}
 						columnStart={{ lg: 5 }}
+						id={listId}
 					>
 						{filteredPkgs?.length ? (
 							<Stack gap={2}>
diff --git a/docs/pages/content/[slug].tsx b/docs/pages/content/[slug].tsx
index 24ea0265b551..639207419d63 100644
--- a/docs/pages/content/[slug].tsx
+++ b/docs/pages/content/[slug].tsx
@@ -25,14 +25,14 @@ export default function ContentPage({
 	return (
 		<>
 			<DocumentTitle
-				title={document.title}
 				description={document.description}
+				title={document.title}
 			/>
 			<SiteLayout applyMainElement={false}>
 				<PageLayout
-					editPath={`/docs/content/content/${document.slug}.mdx`}
+					applyMainElement
 					breadcrumbs={breadcrumbs}
-					applyMainElement={true}
+					editPath={`/docs/content/content/${document.slug}.mdx`}
 					sideNav={{
 						title: 'Content',
 						titleLink: '/content',
@@ -40,13 +40,13 @@ export default function ContentPage({
 					}}
 				>
 					<PageTitle
-						title={document.title}
 						introduction={document.description}
+						title={document.title}
 					/>
 					{toc?.length > 1 ? (
 						<InpageNav
-							title="On this page"
 							links={toc.map((i) => ({ label: i.title, href: `#${i.slug}` }))}
+							title="On this page"
 						/>
 					) : null}
 					<Prose>
diff --git a/docs/pages/content/index.tsx b/docs/pages/content/index.tsx
index 5e374172a5ce..954bb4be3893 100644
--- a/docs/pages/content/index.tsx
+++ b/docs/pages/content/index.tsx
@@ -20,20 +20,20 @@ export default function ContentPage({
 	return (
 		<>
 			<DocumentTitle
-				title={document.title}
 				description={document.description}
+				title={document.title}
 			/>
 			<CategoryPageTemplate
-				title={document.title}
 				description={document.description as string}
 				editPath="/docs/pages/content/index.tsx"
+				title={document.title}
 			>
 				<Columns as="ul" cols={{ xs: 1, sm: 2, lg: 3 }}>
 					{pageList.map(({ slug, title, description }) => (
-						<Card key={slug} as="li" clickable shadow>
+						<Card as="li" clickable key={slug} shadow>
 							<Flex flexDirection="column-reverse">
 								<CardInner>
-									<Stack gap={1} flexGrow={1}>
+									<Stack flexGrow={1} gap={1}>
 										<Heading as="h2" type="h4">
 											<CardLink href={`/content/${slug}`}>{title}</CardLink>
 										</Heading>
diff --git a/docs/pages/foundations/[slug].tsx b/docs/pages/foundations/[slug].tsx
index 288bbdbc5f5d..0e07657bdc98 100644
--- a/docs/pages/foundations/[slug].tsx
+++ b/docs/pages/foundations/[slug].tsx
@@ -23,22 +23,22 @@ export default function FoundationsPage({
 	return (
 		<>
 			<DocumentTitle
-				title={foundation.title}
 				description={foundation.description}
+				title={foundation.title}
 			/>
 			<SiteLayout>
 				<PageLayout
-					editPath={`/docs/content/foundations/${foundation.slug}.mdx`}
 					breadcrumbs={breadcrumbs}
+					editPath={`/docs/content/foundations/${foundation.slug}.mdx`}
 				>
 					<PageTitle
-						title={foundation.title}
 						introduction={foundation.description}
+						title={foundation.title}
 					/>
 					{toc?.length > 1 ? (
 						<InpageNav
-							title="On this page"
 							links={toc.map((i) => ({ label: i.title, href: `#${i.slug}` }))}
+							title="On this page"
 						/>
 					) : null}
 					<Prose>
diff --git a/docs/pages/foundations/index.tsx b/docs/pages/foundations/index.tsx
index 5d1460f66de1..4952df3ca0b6 100644
--- a/docs/pages/foundations/index.tsx
+++ b/docs/pages/foundations/index.tsx
@@ -18,18 +18,18 @@ export default function FoundationsPage({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
 	return (
 		<>
-			<DocumentTitle title={title} description={description} />
+			<DocumentTitle description={description} title={title} />
 			<CategoryPageTemplate
-				title={title}
 				description={description}
 				editPath="/docs/pages/foundations/index.tsx"
+				title={title}
 			>
 				<Columns as="ul" cols={{ xs: 1, sm: 2, lg: 3 }}>
 					{list.map(({ slug, title, description }) => (
-						<Card key={slug} as="li" clickable shadow>
+						<Card as="li" clickable key={slug} shadow>
 							<Flex flexDirection="column-reverse">
 								<CardInner>
-									<Stack gap={1} flexGrow={1}>
+									<Stack flexGrow={1} gap={1}>
 										<Heading as="h2" type="h4">
 											<CardLink href={`/foundations/${slug}`}>{title}</CardLink>
 										</Heading>
diff --git a/docs/pages/foundations/tokens/[slug].tsx b/docs/pages/foundations/tokens/[slug].tsx
index a49855b1f14d..0631bd3857b8 100644
--- a/docs/pages/foundations/tokens/[slug].tsx
+++ b/docs/pages/foundations/tokens/[slug].tsx
@@ -21,16 +21,16 @@ export default function TokensPage({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
 	return (
 		<>
-			<DocumentTitle title={pageTitle} description={description} />
+			<DocumentTitle description={description} title={pageTitle} />
 			<TokenLayout
-				title={pageTitle}
 				description={description}
 				editPath={editPath}
+				title={pageTitle}
 			>
 				{toc?.length > 1 ? (
 					<InpageNav
-						title="On this page"
 						links={toc.map((i) => ({ label: i.title, href: `#${i.slug}` }))}
+						title="On this page"
 					/>
 				) : null}
 				<Prose>
diff --git a/docs/pages/foundations/tokens/border.tsx b/docs/pages/foundations/tokens/border.tsx
index 0defb1d8d15c..8263a3c71417 100644
--- a/docs/pages/foundations/tokens/border.tsx
+++ b/docs/pages/foundations/tokens/border.tsx
@@ -10,20 +10,20 @@ export default function TokensBorderWidthPage() {
 	return (
 		<>
 			<DocumentTitle
-				title={TOKEN_PAGES.border.pageTitle}
 				description={TOKEN_PAGES.border.description}
+				title={TOKEN_PAGES.border.pageTitle}
 			/>
 			<TokenLayout
-				title={TOKEN_PAGES.border.pageTitle}
 				description={TOKEN_PAGES.border.description}
 				editPath="/docs/pages/foundations/tokens/border.tsx"
+				title={TOKEN_PAGES.border.pageTitle}
 			>
 				<InpageNav
-					title="On this page"
 					links={[
 						{ href: '#border-width', label: 'Border width' },
 						{ href: '#border-radius-tokens', label: 'Border radius tokens' },
 					]}
+					title="On this page"
 				/>
 				<Prose>
 					<h2 id="border-width">Border width</h2>
@@ -44,7 +44,7 @@ export default function TokensBorderWidthPage() {
 						Use it by setting <code>rounded</code> on the Box component as seen
 						in the following example.
 					</p>
-					<Box border rounded padding={0.5} className={proseBlockClassname}>
+					<Box border className={proseBlockClassname} padding={0.5} rounded>
 						A Box with rounded corners
 					</Box>
 				</Prose>
diff --git a/docs/pages/foundations/tokens/colour.tsx b/docs/pages/foundations/tokens/colour.tsx
index 901c4c1abacd..4cc1d70517a6 100644
--- a/docs/pages/foundations/tokens/colour.tsx
+++ b/docs/pages/foundations/tokens/colour.tsx
@@ -16,16 +16,15 @@ export default function TokensColorPage() {
 	return (
 		<Box background="body">
 			<DocumentTitle
-				title={TOKEN_PAGES.colour.pageTitle}
 				description={TOKEN_PAGES.colour.description}
+				title={TOKEN_PAGES.colour.pageTitle}
 			/>
 			<TokenLayout
-				title={TOKEN_PAGES.colour.pageTitle}
 				description={TOKEN_PAGES.colour.description}
 				editPath="/docs/pages/foundations/tokens/colour.tsx"
+				title={TOKEN_PAGES.colour.pageTitle}
 			>
 				<InpageNav
-					title="On this page"
 					links={[
 						{ href: '#colour-palettes', label: 'Colour palettes' },
 						{ href: '#foreground-colours', label: 'Foreground colours' },
@@ -35,6 +34,7 @@ export default function TokensColorPage() {
 						{ href: '#miscellaneous-colours', label: 'Miscellaneous colours' },
 						{ href: '#usage-guidelines', label: 'Usage guidelines' },
 					]}
+					title="On this page"
 				/>
 				<Prose>
 					<h2 id="colour-palettes">Colour palettes</h2>
@@ -50,15 +50,15 @@ export default function TokensColorPage() {
 					</p>
 					<h3 id="foreground-colours-light">Light palette</h3>
 					<ColorTable
-						aria-labelledby="foreground-colours foreground-colours-light"
 						aria-describedby="foreground-colours-description"
+						aria-labelledby="foreground-colours foreground-colours-light"
 						tokens={getTokensArrayFromObject(colourTokens.foreground, 'light')}
 					/>
 					<h3 id="foreground-colours-dark">Dark palette</h3>
 					<Box background="body" className={proseBlockClassname} palette="dark">
 						<ColorTable
-							aria-labelledby="foreground-colours foreground-colours-dark"
 							aria-describedby="foreground-colours-description"
+							aria-labelledby="foreground-colours foreground-colours-dark"
 							tokens={getTokensArrayFromObject(colourTokens.foreground, 'dark')}
 						/>
 					</Box>
@@ -74,15 +74,15 @@ export default function TokensColorPage() {
 					</p>
 					<h3 id="background-colours-light">Light palette</h3>
 					<ColorTable
-						aria-labelledby="background-colours background-colours-light"
 						aria-describedby="background-colours-description"
+						aria-labelledby="background-colours background-colours-light"
 						tokens={getTokensArrayFromObject(colourTokens.background, 'light')}
 					/>
 					<h3 id="background-colours-dark">Dark palette</h3>
 					<Box background="body" className={proseBlockClassname} palette="dark">
 						<ColorTable
-							aria-labelledby="background-colours background-colours-dark"
 							aria-describedby="background-colours-description"
+							aria-labelledby="background-colours background-colours-dark"
 							tokens={getTokensArrayFromObject(colourTokens.background, 'dark')}
 						/>
 					</Box>
@@ -93,15 +93,15 @@ export default function TokensColorPage() {
 					</p>
 					<h3 id="border-colours-light">Light palette</h3>
 					<ColorTable
-						aria-labelledby="border-colours border-colours-light"
 						aria-describedby="border-colours-description"
+						aria-labelledby="border-colours border-colours-light"
 						tokens={getTokensArrayFromObject(colourTokens.border, 'light')}
 					/>
 					<h3 id="border-colours-dark">Dark palette</h3>
 					<Box background="body" className={proseBlockClassname} palette="dark">
 						<ColorTable
-							aria-labelledby="border-colours border-colours-dark"
 							aria-describedby="border-colours-description"
+							aria-labelledby="border-colours border-colours-dark"
 							tokens={getTokensArrayFromObject(colourTokens.border, 'dark')}
 						/>
 					</Box>
@@ -114,15 +114,15 @@ export default function TokensColorPage() {
 					</p>
 					<h3 id="system-colours-light">Light palette</h3>
 					<ColorTable
-						aria-labelledby="system-colours system-colours-light"
 						aria-describedby="system-colours-description"
+						aria-labelledby="system-colours system-colours-light"
 						tokens={getTokensArrayFromObject(colourTokens.system, 'light')}
 					/>
 					<h3 id="system-colours-dark">Dark palette</h3>
 					<Box background="body" className={proseBlockClassname} palette="dark">
 						<ColorTable
-							aria-labelledby="system-colours system-colours-dark"
 							aria-describedby="system-colours-description"
+							aria-labelledby="system-colours system-colours-dark"
 							tokens={getTokensArrayFromObject(colourTokens.system, 'dark')}
 						/>
 					</Box>
@@ -133,8 +133,8 @@ export default function TokensColorPage() {
 					</p>
 					<h3 id="miscellaneous-colours-light">Light palette</h3>
 					<ColorTable
-						aria-labelledby="miscellaneous-colours miscellaneous-colours-light"
 						aria-describedby="miscellaneous-colours-description"
+						aria-labelledby="miscellaneous-colours miscellaneous-colours-light"
 						tokens={getTokensArrayFromObject(
 							colourTokens.miscellaneous,
 							'light'
@@ -143,8 +143,8 @@ export default function TokensColorPage() {
 					<h3 id="miscellaneous-colours-dark">Dark palette</h3>
 					<Box background="body" className={proseBlockClassname} palette="dark">
 						<ColorTable
-							aria-labelledby="miscellaneous-colours miscellaneous-colours-dark"
 							aria-describedby="miscellaneous-colours-description"
+							aria-labelledby="miscellaneous-colours miscellaneous-colours-dark"
 							tokens={getTokensArrayFromObject(
 								colourTokens.miscellaneous,
 								'dark'
@@ -153,7 +153,7 @@ export default function TokensColorPage() {
 					</Box>
 
 					<h2 id="usage-guidelines">Usage guidelines</h2>
-					<Columns cols={[1, 3]} className={proseBlockClassname}>
+					<Columns className={proseBlockClassname} cols={[1, 3]}>
 						<Column columnSpan={[1, 2]}>
 							<h3 id="palettes">Use palettes to divide sections</h3>
 							<p>
@@ -181,8 +181,8 @@ export default function TokensColorPage() {
 
 						<Box paddingTop={[1, 0]}>
 							<img
-								src={withBasePath('/img/guides/home.webp')}
 								alt="Screenshot of a successful usage of palettes"
+								src={withBasePath('/img/guides/home.webp')}
 							/>
 						</Box>
 					</Columns>
diff --git a/docs/pages/foundations/tokens/index.tsx b/docs/pages/foundations/tokens/index.tsx
index cf5ded65645a..f45ef7b87ba8 100644
--- a/docs/pages/foundations/tokens/index.tsx
+++ b/docs/pages/foundations/tokens/index.tsx
@@ -21,21 +21,21 @@ export default function TokensPage({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
 	return (
 		<>
-			<DocumentTitle title={title} description={description} />
+			<DocumentTitle description={description} title={title} />
 			<SubcategoryPageTemplate
-				title={title}
 				breadcrumbs={breadcrumbs}
 				editPath="/docs/pages/foundations/tokens/index.tsx"
+				title={title}
 			>
 				<Text as="p" fontSize="md" maxWidth={tokens.maxWidth.bodyText}>
 					{description}
 				</Text>
 				<Columns as="ul" cols={{ xs: 1, sm: 2, lg: 3 }}>
 					{TOKEN_NAV_LINKS.map(({ href, label, description }) => (
-						<Card key={href} as="li" clickable shadow>
+						<Card as="li" clickable key={href} shadow>
 							<Flex flexDirection="column-reverse">
 								<CardInner>
-									<Stack gap={1} flexGrow={1}>
+									<Stack flexGrow={1} gap={1}>
 										<Heading as="h2" type="h4">
 											<CardLink href={href}>{label}</CardLink>
 										</Heading>
diff --git a/docs/pages/foundations/tokens/max-width.tsx b/docs/pages/foundations/tokens/max-width.tsx
index fa913d1560ea..4e74202b5bfa 100644
--- a/docs/pages/foundations/tokens/max-width.tsx
+++ b/docs/pages/foundations/tokens/max-width.tsx
@@ -34,13 +34,13 @@ export default function TokensMaxWidthsPage() {
 	return (
 		<>
 			<DocumentTitle
-				title={TOKEN_PAGES['max-width'].pageTitle}
 				description={TOKEN_PAGES['max-width'].description}
+				title={TOKEN_PAGES['max-width'].pageTitle}
 			/>
 			<TokenLayout
-				title={TOKEN_PAGES['max-width'].pageTitle}
 				description={TOKEN_PAGES['max-width'].description}
 				editPath="/docs/pages/foundations/tokens/max-width.tsx"
+				title={TOKEN_PAGES['max-width'].pageTitle}
 			>
 				<Prose>
 					<div className={proseBlockClassname}>
@@ -106,12 +106,12 @@ export default function TokensMaxWidthsPage() {
 													<TableCell>{token}</TableCell>
 													<TableCell>
 														<Box
-															padding={0.5}
 															css={{
 																backgroundColor: boxPalette.systemInfoMuted,
 																width: '100%',
 																maxWidth: value,
 															}}
+															padding={0.5}
 														>
 															<Text>{value}</Text>
 														</Box>
diff --git a/docs/pages/foundations/tokens/typography.tsx b/docs/pages/foundations/tokens/typography.tsx
index 86a1f53340d2..4d1ef9756721 100644
--- a/docs/pages/foundations/tokens/typography.tsx
+++ b/docs/pages/foundations/tokens/typography.tsx
@@ -21,22 +21,22 @@ export default function TokensTypographyPage() {
 	return (
 		<>
 			<DocumentTitle
-				title={TOKEN_PAGES.typography.pageTitle}
 				description={TOKEN_PAGES.typography.description}
+				title={TOKEN_PAGES.typography.pageTitle}
 			/>
 			<TokenLayout
-				title={TOKEN_PAGES.typography.pageTitle}
 				description={TOKEN_PAGES.typography.description}
 				editPath="/docs/pages/foundations/tokens/typography.tsx"
+				title={TOKEN_PAGES.typography.pageTitle}
 			>
 				<InpageNav
-					title="On this page"
 					links={[
 						{ href: '#font-size', label: 'Font size' },
 						{ href: '#line-height', label: 'Line height' },
 						{ href: '#font-family', label: 'Font family' },
 						{ href: '#font-weight', label: 'Font weight' },
 					]}
+					title="On this page"
 				/>
 				<Prose>
 					<p>
diff --git a/docs/pages/guides/[slug].tsx b/docs/pages/guides/[slug].tsx
index e3cded3c5402..1479632c212c 100644
--- a/docs/pages/guides/[slug].tsx
+++ b/docs/pages/guides/[slug].tsx
@@ -22,18 +22,18 @@ export default function Guides({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
 	return (
 		<>
-			<DocumentTitle title={guide.title} description={guide.opener} />
+			<DocumentTitle description={guide.opener} title={guide.title} />
 			<SiteLayout applyMainElement={false}>
 				<PageLayout
-					applyMainElement={true}
-					editPath={`/docs/content/guides/${guide.slug}.mdx`}
+					applyMainElement
 					breadcrumbs={breadcrumbs}
+					editPath={`/docs/content/guides/${guide.slug}.mdx`}
 				>
-					<PageTitle title={guide.title} introduction={guide.opener} />
+					<PageTitle introduction={guide.opener} title={guide.title} />
 					{toc?.length > 1 ? (
 						<InpageNav
-							title="On this page"
 							links={toc.map((i) => ({ label: i.title, href: `#${i.slug}` }))}
+							title="On this page"
 						/>
 					) : null}
 					<Prose>
diff --git a/docs/pages/guides/how-to-write-guidance/[slug].tsx b/docs/pages/guides/how-to-write-guidance/[slug].tsx
index 6ca3f402a684..5c6e8cbd6cb7 100644
--- a/docs/pages/guides/how-to-write-guidance/[slug].tsx
+++ b/docs/pages/guides/how-to-write-guidance/[slug].tsx
@@ -24,23 +24,23 @@ export default function Guides({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
 	return (
 		<>
-			<DocumentTitle title={guide.title} description={guide.opener} />
+			<DocumentTitle description={guide.opener} title={guide.title} />
 			<SiteLayout applyMainElement={false}>
 				<PageLayout
-					applyMainElement={true}
+					applyMainElement
+					breadcrumbs={breadcrumbs}
+					editPath={`/docs/content/guides/how-to-write-guidance/${guide.slug}.mdx`}
 					sideNav={{
 						title: 'How to create guidance in the Export Service',
 						titleLink: '/guides/how-to-write-guidance',
 						items: navLinks,
 					}}
-					editPath={`/docs/content/guides/how-to-write-guidance/${guide.slug}.mdx`}
-					breadcrumbs={breadcrumbs}
 				>
-					<PageTitle title={guide.title} introduction={guide.opener} />
+					<PageTitle introduction={guide.opener} title={guide.title} />
 					{toc?.length > 1 ? (
 						<InpageNav
-							title="On this page"
 							links={toc.map((i) => ({ label: i.title, href: `#${i.slug}` }))}
+							title="On this page"
 						/>
 					) : null}
 					<Prose>
diff --git a/docs/pages/guides/how-to-write-guidance/index.tsx b/docs/pages/guides/how-to-write-guidance/index.tsx
index 2edea2f8ec1a..4063594396fc 100644
--- a/docs/pages/guides/how-to-write-guidance/index.tsx
+++ b/docs/pages/guides/how-to-write-guidance/index.tsx
@@ -19,19 +19,19 @@ export default function ContentGuidesHome({
 }: StaticProps) {
 	return (
 		<>
-			<DocumentTitle title={title} description={description} />
+			<DocumentTitle description={description} title={title} />
 			<SubcategoryPageTemplate
-				title={title}
 				breadcrumbs={[
 					{ href: '/', label: 'Home' },
 					{ href: '/guides', label: 'Guides' },
 					{ label: title },
 				]}
 				editPath="/docs/content/guides/how-to-write-guidance.mdx"
+				title={title}
 			>
-				<Columns as="ul" gap={1.5} cols={{ xs: 1, sm: 2, lg: 3 }}>
+				<Columns as="ul" cols={{ xs: 1, sm: 2, lg: 3 }} gap={1.5}>
 					{contentGuideList.map(({ slug, title, overview }) => (
-						<Card as="li" key={title} clickable shadow>
+						<Card as="li" clickable key={title} shadow>
 							<CardInner>
 								<Stack gap={1}>
 									<Heading as="h2" type="h4">
diff --git a/docs/pages/guides/index.tsx b/docs/pages/guides/index.tsx
index b18d6d4cddf9..27389233abb1 100644
--- a/docs/pages/guides/index.tsx
+++ b/docs/pages/guides/index.tsx
@@ -18,15 +18,15 @@ export default function GuidesHome({
 }: StaticProps) {
 	return (
 		<>
-			<DocumentTitle title="Guides" description={description} />
+			<DocumentTitle description={description} title="Guides" />
 			<CategoryPageTemplate
-				title={title}
 				description={description}
 				editPath="/docs/content/guides/index.mdx"
+				title={title}
 			>
-				<Columns as="ul" gap={1.5} cols={{ xs: 1, sm: 2, lg: 3 }}>
+				<Columns as="ul" cols={{ xs: 1, sm: 2, lg: 3 }} gap={1.5}>
 					{guideList.map(({ slug, title, overview }) => (
-						<Card as="li" key={title} clickable shadow>
+						<Card as="li" clickable key={title} shadow>
 							<CardInner>
 								<Stack gap={1}>
 									<Heading as="h2" type="h4">
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
index bc296b7ab202..8463dbc566e2 100644
--- a/docs/pages/index.tsx
+++ b/docs/pages/index.tsx
@@ -27,9 +27,9 @@ export default function Homepage() {
 				<HeroBanner
 					image={
 						<img
-							src={withBasePath('/img/agds-hero.webp')}
-							role="presentation"
 							alt=""
+							role="presentation"
+							src={withBasePath('/img/agds-hero.webp')}
 						/>
 					}
 				>
@@ -56,24 +56,24 @@ export default function Homepage() {
 								}}
 							>
 								<PictogramCard
-									title="Foundations"
-									pictogram="text"
 									href="/foundations"
+									pictogram="text"
+									title="Foundations"
 								/>
 								<PictogramCard
-									title="Components"
-									pictogram="components"
 									href="/components"
+									pictogram="components"
+									title="Components"
 								/>
 								<PictogramCard
-									title="Guides"
-									pictogram="guides"
 									href="/guides"
+									pictogram="guides"
+									title="Guides"
 								/>
 								<PictogramCard
-									title="Starter kit"
-									pictogram="starter"
 									href="https://github.com/agriculturegovau/agds-starter-kit"
+									pictogram="starter"
+									title="Starter kit"
 								/>
 							</Columns>
 						</Stack>
diff --git a/docs/pages/patterns/[slug].tsx b/docs/pages/patterns/[slug].tsx
index 2e54b3f28e29..53f24be0fdd3 100644
--- a/docs/pages/patterns/[slug].tsx
+++ b/docs/pages/patterns/[slug].tsx
@@ -27,19 +27,19 @@ export default function PatternPage({
 	return (
 		<>
 			<DocumentTitle
-				title={`${pattern.title} pattern`}
 				description={pattern.description}
+				title={`${pattern.title} pattern`}
 			/>
 			<PatternLayout
-				pattern={pattern}
 				breadcrumbs={breadcrumbs}
 				editPath={`/docs/content/patterns/${pattern.slug}/index.mdx`}
 				navLinks={navLinks}
+				pattern={pattern}
 			>
 				{toc?.length > 1 ? (
 					<InpageNav
-						title="On this page"
 						links={toc.map((i) => ({ label: i.title, href: `#${i.slug}` }))}
+						title="On this page"
 					/>
 				) : null}
 				<Prose id="page-content">
diff --git a/docs/pages/patterns/index.tsx b/docs/pages/patterns/index.tsx
index dabee9528025..419a1a7da1fe 100644
--- a/docs/pages/patterns/index.tsx
+++ b/docs/pages/patterns/index.tsx
@@ -21,11 +21,11 @@ export default function PatternsPage({
 		<Fragment>
 			<DocumentTitle title={title} />
 			<CategoryPageTemplate
-				title={title}
 				description={description}
 				editPath="/docs/content/patterns/index.mdx"
+				title={title}
 			>
-				<Columns as="ul" gap={1.5} cols={{ xs: 1, sm: 2, lg: 3 }}>
+				<Columns as="ul" cols={{ xs: 1, sm: 2, lg: 3 }} gap={1.5}>
 					{patternList.map((pattern) => (
 						<PatternCard key={pattern.slug} {...pattern} />
 					))}
@@ -45,9 +45,9 @@ function PatternCard({
 	description: string;
 }) {
 	return (
-		<Card key={slug} as="li" clickable shadow>
+		<Card as="li" clickable key={slug} shadow>
 			<CardInner>
-				<Stack gap={1} flexGrow={1}>
+				<Stack flexGrow={1} gap={1}>
 					<Heading as="h2" type="h4">
 						<CardLink href={`/patterns/${slug}`}>{title}</CardLink>
 					</Heading>
diff --git a/docs/pages/roadmap.tsx b/docs/pages/roadmap.tsx
index 6e1251b7fcbd..f62b97c39644 100644
--- a/docs/pages/roadmap.tsx
+++ b/docs/pages/roadmap.tsx
@@ -19,11 +19,11 @@ export default function RoadmapPage({
 			<DocumentTitle title={title} />
 			<SiteLayout applyMainElement={false}>
 				<PageLayout
-					applyMainElement={true}
+					applyMainElement
 					breadcrumbs={[{ href: '/', label: 'Home' }, { label: title }]}
 					editPath="/docs/content/roadmap.mdx"
 				>
-					<PageTitle title={title} introduction={description} />
+					<PageTitle introduction={description} title={title} />
 					<Prose>
 						<MDXRemote {...source} components={mdxComponents} />
 					</Prose>
diff --git a/docs/pages/templates/[slug].tsx b/docs/pages/templates/[slug].tsx
index 9e21c46b40c3..3d15dc278a09 100644
--- a/docs/pages/templates/[slug].tsx
+++ b/docs/pages/templates/[slug].tsx
@@ -23,21 +23,21 @@ export default function TemplatePage({
 	return (
 		<Fragment>
 			<DocumentTitle
-				title={`${template.title} template`}
 				description={template.description}
+				title={`${template.title} template`}
 			/>
 			<TemplateLayout
-				template={template}
 				breadcrumbs={breadcrumbs}
 				editPath={`/docs/content/templates/${template.slug}/index.mdx`}
 				navLinks={navLinks}
+				template={template}
 			>
 				<Prose id="page-content">
 					<Box border borderColor="muted" css={{ img: { display: 'block' } }}>
 						<img
-							src={withBasePath(`/img/templates/${template.slug}.webp`)}
-							role="presentation"
 							alt=""
+							role="presentation"
+							src={withBasePath(`/img/templates/${template.slug}.webp`)}
 						/>
 					</Box>
 					<MDXRemote {...template.source} components={mdxComponents} />
diff --git a/docs/pages/templates/index.tsx b/docs/pages/templates/index.tsx
index c7472da27ff4..b6ee873a631c 100644
--- a/docs/pages/templates/index.tsx
+++ b/docs/pages/templates/index.tsx
@@ -23,11 +23,11 @@ export default function TemplatesPage({
 		<Fragment>
 			<DocumentTitle title={title} />
 			<CategoryPageTemplate
-				title={title}
 				description={description}
 				editPath="docs/content/templates/index.mdx"
+				title={title}
 			>
-				<Columns as="ul" gap={1.5} cols={{ xs: 1, sm: 2, lg: 3 }}>
+				<Columns as="ul" cols={{ xs: 1, sm: 2, lg: 3 }} gap={1.5}>
 					{templateList.map((template) => (
 						<TemplateCard key={template.slug} {...template} />
 					))}
@@ -49,18 +49,18 @@ function TemplateCard({
 	return (
 		<Card as="li" clickable shadow>
 			<img
-				src={withBasePath(`/img/templates/${slug}.webp`)}
-				role="presentation"
 				alt=""
-				height="auto"
-				width="100%"
 				css={mq({
 					borderBottom: `1px solid ${boxPalette.borderMuted}`,
 					objectFit: 'cover',
 				})}
+				height="auto"
+				role="presentation"
+				src={withBasePath(`/img/templates/${slug}.webp`)}
+				width="100%"
 			/>
 			<CardInner>
-				<Stack gap={1} flexGrow={1}>
+				<Stack flexGrow={1} gap={1}>
 					<Heading as="h2" type="h4">
 						<CardLink href={`/templates/${slug}`}>{title}</CardLink>
 					</Heading>
diff --git a/docs/pages/updates/[slug].tsx b/docs/pages/updates/[slug].tsx
index 6c475825c2a7..740a37d64c30 100644
--- a/docs/pages/updates/[slug].tsx
+++ b/docs/pages/updates/[slug].tsx
@@ -19,16 +19,16 @@ export default function Updates({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
 	return (
 		<>
-			<DocumentTitle title={update.title} description={update.description} />
+			<DocumentTitle description={update.description} title={update.title} />
 			<SiteLayout>
 				<PageLayout
-					editPath={`/docs/content/updates/${update.slug}.mdx`}
 					breadcrumbs={breadcrumbs}
+					editPath={`/docs/content/updates/${update.slug}.mdx`}
 				>
 					<PageTitle
+						introduction={update.description}
 						pretext={update.date}
 						title={update.title}
-						introduction={update.description}
 					/>
 					<Prose>
 						<MDXRemote {...update.source} components={mdxComponents} />
diff --git a/docs/pages/updates/index.tsx b/docs/pages/updates/index.tsx
index 4e06d59c3433..9781780e7feb 100644
--- a/docs/pages/updates/index.tsx
+++ b/docs/pages/updates/index.tsx
@@ -18,17 +18,17 @@ export default function UpdatesHome({
 }: StaticProps) {
 	return (
 		<>
-			<DocumentTitle title="Updates" description={description} />
+			<DocumentTitle description={description} title="Updates" />
 			<CategoryPageTemplate
-				title={title}
 				description={description}
 				editPath="/docs/content/updates/index.mdx"
+				title={title}
 			>
 				<Columns cols={{ xs: 1, lg: 3 }}>
 					<Column columnSpan={{ xs: 1, lg: 2 }}>
 						<Stack as="ul" gap={1.5}>
 							{updateLinks.map(({ href, label, description }) => (
-								<Card as="li" key={label} clickable shadow>
+								<Card as="li" clickable key={label} shadow>
 									<CardInner>
 										<Stack gap={1}>
 											<Heading as="h2" type="h3">
diff --git a/example-site/components/ConditionalFieldContainer.tsx b/example-site/components/ConditionalFieldContainer.tsx
index d0dd6cfe9ac6..1b5c3fbfad12 100644
--- a/example-site/components/ConditionalFieldContainer.tsx
+++ b/example-site/components/ConditionalFieldContainer.tsx
@@ -11,10 +11,10 @@ export function ConditionalFieldContainer({
 		<Box
 			borderLeft
 			borderLeftWidth="xl"
-			paddingLeft={1.5}
 			css={{
 				marginLeft: `calc(${mapSpacing(1)} - ${tokens.borderWidth.xl / 2}px)`,
 			}}
+			paddingLeft={1.5}
 		>
 			{children}
 		</Box>
diff --git a/example-site/components/FormExampleMultiStep/FormExampleMultiStep.tsx b/example-site/components/FormExampleMultiStep/FormExampleMultiStep.tsx
index 23093c236afb..43de5d382545 100644
--- a/example-site/components/FormExampleMultiStep/FormExampleMultiStep.tsx
+++ b/example-site/components/FormExampleMultiStep/FormExampleMultiStep.tsx
@@ -207,7 +207,7 @@ export const FormExampleMultiStep = () => {
 						</ContentBleed>
 					</Column>
 					<Column columnSpan={{ xs: 12, md: 8 }} columnStart={{ lg: 5 }}>
-						<Stack gap={3} alignItems="flex-start">
+						<Stack alignItems="flex-start" gap={3}>
 							<DirectionButton direction="left" onClick={back}>
 								Back
 							</DirectionButton>
diff --git a/example-site/components/FormExampleMultiStep/FormExampleMultiStep0.tsx b/example-site/components/FormExampleMultiStep/FormExampleMultiStep0.tsx
index 1d1dc53ed25a..a992ea164fca 100644
--- a/example-site/components/FormExampleMultiStep/FormExampleMultiStep0.tsx
+++ b/example-site/components/FormExampleMultiStep/FormExampleMultiStep0.tsx
@@ -38,37 +38,37 @@ export const FormExampleMultiStep0 = () => {
 
 	return (
 		<FormExampleMultiStepContainer
-			title="Conditional fork title (H1)"
-			introduction="The introductory paragraph provides context about this page of the form. Use a short paragraph to reduce cognitive load."
 			callToAction={<FormRequiredFieldsMessage />}
+			introduction="The introductory paragraph provides context about this page of the form. Use a short paragraph to reduce cognitive load."
+			title="Conditional fork title (H1)"
 		>
-			<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 				<ControlGroup
-					label="Fieldset question?"
+					block
 					hint="Hint text"
 					invalid={Boolean(errors.example?.message)}
+					label="Fieldset question?"
 					message={errors.example?.message}
 					required
-					block
 				>
 					<Radio
 						{...register('example')}
-						value="A"
 						invalid={Boolean(errors.example?.message)}
+						value="A"
 					>
 						Radio label A
 					</Radio>
 					<Radio
 						{...register('example')}
-						value="B"
 						invalid={Boolean(errors.example?.message)}
+						value="B"
 					>
 						Radio label B
 					</Radio>
 					<Radio
 						{...register('example')}
-						value="C"
 						invalid={Boolean(errors.example?.message)}
+						value="C"
 					>
 						Radio label C
 					</Radio>
diff --git a/example-site/components/FormExampleMultiStep/FormExampleMultiStep1.tsx b/example-site/components/FormExampleMultiStep/FormExampleMultiStep1.tsx
index b5921abbfd48..d8547fc490f0 100644
--- a/example-site/components/FormExampleMultiStep/FormExampleMultiStep1.tsx
+++ b/example-site/components/FormExampleMultiStep/FormExampleMultiStep1.tsx
@@ -68,23 +68,23 @@ export const FormExampleMultiStep1 = () => {
 
 	return (
 		<FormExampleMultiStepContainer
-			title="Submit evidence (H1)"
-			introduction="The introductory paragraph provides context about this page of the form. Use a short paragraph to reduce cognitive load."
 			callToAction={<FormRequiredFieldsMessage />}
+			introduction="The introductory paragraph provides context about this page of the form. Use a short paragraph to reduce cognitive load."
+			title="Submit evidence (H1)"
 		>
 			<Stack
 				as="form"
 				gap={3}
-				onSubmit={handleSubmit(onSubmit, onError)}
 				noValidate
+				onSubmit={handleSubmit(onSubmit, onError)}
 			>
 				<FormStack>
 					{hasErrors && (
 						<PageAlert
 							ref={errorRef}
-							tone="error"
-							title="There is a problem"
 							tabIndex={-1}
+							title="There is a problem"
+							tone="error"
 						>
 							<Text as="p">
 								Please correct the following fields and try again
@@ -101,14 +101,14 @@ export const FormExampleMultiStep1 = () => {
 						</PageAlert>
 					)}
 					<Textarea
-						label="Describe actions taken"
+						{...register('description')}
+						block
 						hint="Hint text"
 						id="description"
-						{...register('description')}
 						invalid={Boolean(errors.description?.message)}
+						label="Describe actions taken"
 						message={errors.description?.message}
 						required
-						block
 					/>
 					<Controller
 						control={control}
@@ -119,20 +119,20 @@ export const FormExampleMultiStep1 = () => {
 						}) => (
 							<div css={{ position: 'relative' }}>
 								<FileUpload
+									accept={['image/jpeg', 'image/jpg', 'image/png']}
+									hint="General hint information"
 									id="files"
+									invalid={invalid}
 									label="Select file to upload"
-									hint="General hint information"
-									accept={['image/jpeg', 'image/jpg', 'image/png']}
-									maxSize={2000}
 									maxFiles={3}
+									maxSize={2000}
+									message={error?.message}
 									multiple
-									value={value}
-									onChange={onChange}
-									onBlur={onBlur}
 									name={name}
-									invalid={invalid}
-									message={error?.message}
+									onBlur={onBlur}
+									onChange={onChange}
 									required
+									value={value}
 								/>
 								{isSubmittingStep && <LoadingBlanket label="Uploading file" />}
 							</div>
diff --git a/example-site/components/FormExampleMultiStep/FormExampleMultiStep2.tsx b/example-site/components/FormExampleMultiStep/FormExampleMultiStep2.tsx
index 80ada8e275f0..f03d8af3bf22 100644
--- a/example-site/components/FormExampleMultiStep/FormExampleMultiStep2.tsx
+++ b/example-site/components/FormExampleMultiStep/FormExampleMultiStep2.tsx
@@ -34,28 +34,28 @@ export const FormExampleMultiStep2 = () => {
 
 	return (
 		<FormExampleMultiStepContainer
-			title="Select date (H1)"
-			introduction="The introductory paragraph provides context about this page of the form. Use a short paragraph to reduce cognitive load."
 			callToAction={<FormRequiredFieldsMessage />}
+			introduction="The introductory paragraph provides context about this page of the form. Use a short paragraph to reduce cognitive load."
+			title="Select date (H1)"
 		>
 			<Stack
 				as="form"
 				gap={3}
-				onSubmit={handleSubmit(onSubmit, console.log)}
 				noValidate
+				onSubmit={handleSubmit(onSubmit, console.log)}
 			>
 				<Controller
 					control={control}
 					name="date"
 					render={({ field: { ref, ...field } }) => (
 						<DatePicker
-							inputRef={ref}
-							label="Select a date"
 							{...field}
 							id="date"
+							inputRef={ref}
 							invalid={Boolean(errors.date?.message)}
-							message={errors.date?.message}
+							label="Select a date"
 							maxWidth="xl"
+							message={errors.date?.message}
 							required
 						/>
 					)}
diff --git a/example-site/components/FormExampleMultiStep/FormExampleMultiStep3.tsx b/example-site/components/FormExampleMultiStep/FormExampleMultiStep3.tsx
index dada4c2bd5ad..9bf64fb4799f 100644
--- a/example-site/components/FormExampleMultiStep/FormExampleMultiStep3.tsx
+++ b/example-site/components/FormExampleMultiStep/FormExampleMultiStep3.tsx
@@ -84,23 +84,23 @@ export const FormExampleMultiStep3 = () => {
 
 	return (
 		<FormExampleMultiStepContainer
-			title="Conditional reveal title (H1)"
-			introduction="The introductory paragraph provides context about this page of the form. Use a short paragraph to reduce cognitive load."
 			callToAction={<FormRequiredFieldsMessage />}
+			introduction="The introductory paragraph provides context about this page of the form. Use a short paragraph to reduce cognitive load."
+			title="Conditional reveal title (H1)"
 		>
 			<Stack
 				as="form"
 				gap={3}
-				onSubmit={handleSubmit(onSubmit, onError)}
 				noValidate
+				onSubmit={handleSubmit(onSubmit, onError)}
 			>
 				<FormStack>
 					{hasErrors && (
 						<PageAlert
 							ref={errorRef}
-							tone="error"
-							title="There is a problem"
 							tabIndex={-1}
+							title="There is a problem"
+							tone="error"
 						>
 							<Text as="p">
 								Please correct the following fields and try again
@@ -117,15 +117,15 @@ export const FormExampleMultiStep3 = () => {
 						</PageAlert>
 					)}
 					<ControlGroup
-						id="checkbox"
-						label="Checkbox fieldset question?"
+						block
 						hint="Provide a hint here"
+						id="checkbox"
 						invalid={Boolean(errors.checkbox)}
+						label="Checkbox fieldset question?"
 						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 						// @ts-ignore
 						message={errors?.checkbox?.message}
 						required
-						block
 					>
 						<Checkbox {...register('checkbox')} value="A">
 							Checkbox label A
@@ -136,11 +136,11 @@ export const FormExampleMultiStep3 = () => {
 						{showConditionalField ? (
 							<ConditionalFieldContainer>
 								<TextInput
-									id="conditionalField"
-									label="Nested field"
-									hint="Hint text"
 									{...register('conditionalField')}
+									hint="Hint text"
+									id="conditionalField"
 									invalid={Boolean(errors.conditionalField?.message)}
+									label="Nested field"
 									message={errors.conditionalField?.message}
 									required
 								/>
diff --git a/example-site/components/FormExampleMultiStep/FormExampleMultiStep4.tsx b/example-site/components/FormExampleMultiStep/FormExampleMultiStep4.tsx
index 5bf9f254f57c..4444edeeee5d 100644
--- a/example-site/components/FormExampleMultiStep/FormExampleMultiStep4.tsx
+++ b/example-site/components/FormExampleMultiStep/FormExampleMultiStep4.tsx
@@ -48,11 +48,11 @@ export const FormExampleMultiStep4 = () => {
 
 	return (
 		<FormExampleMultiStepContainer
-			title="Confirm and submit (H1)"
 			introduction="The introductory paragraph provides context about this page of the form. Use a short paragraph to reduce cognitive load."
+			title="Confirm and submit (H1)"
 		>
 			{/** Summary: Step 0 */}
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[0].label}</H2>
 				<SummaryList>
 					<SummaryListItem>
@@ -62,12 +62,12 @@ export const FormExampleMultiStep4 = () => {
 						</SummaryListItemDescription>
 					</SummaryListItem>
 				</SummaryList>
-				<Button variant="text" onClick={() => goToStep(0)}>
+				<Button onClick={() => goToStep(0)} variant="text">
 					Change
 				</Button>
 			</Stack>
 			{/** Summary: Step 1 */}
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[1].label}</H2>
 				<SummaryList>
 					<SummaryListItem>
@@ -83,12 +83,12 @@ export const FormExampleMultiStep4 = () => {
 						</SummaryListItemDescription>
 					</SummaryListItem>
 				</SummaryList>
-				<Button variant="text" onClick={() => goToStep(1)}>
+				<Button onClick={() => goToStep(1)} variant="text">
 					Change
 				</Button>
 			</Stack>
 			{/** Summary: Step 2 */}
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[2].label}</H2>
 				<SummaryList>
 					<SummaryListItem>
@@ -100,12 +100,12 @@ export const FormExampleMultiStep4 = () => {
 						</SummaryListItemDescription>
 					</SummaryListItem>
 				</SummaryList>
-				<Button variant="text" onClick={() => goToStep(2)}>
+				<Button onClick={() => goToStep(2)} variant="text">
 					Change
 				</Button>
 			</Stack>
 			{/** Summary: Step 3 */}
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[3].label}</H2>
 				<SummaryList>
 					<SummaryListItem>
@@ -125,12 +125,12 @@ export const FormExampleMultiStep4 = () => {
 						</SummaryListItem>
 					)}
 				</SummaryList>
-				<Button variant="text" onClick={() => goToStep(3)}>
+				<Button onClick={() => goToStep(3)} variant="text">
 					Change
 				</Button>
 			</Stack>
 			{/** Declaration form */}
-			<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 				<FormStack>
 					<Prose>
 						<h2>Declaration</h2>
@@ -144,10 +144,10 @@ export const FormExampleMultiStep4 = () => {
 						</ul>
 					</Prose>
 					<ControlGroup
-						label="Declaration agreement"
+						block
 						invalid={Boolean(errors.declaration?.message)}
+						label="Declaration agreement"
 						message={errors.declaration?.message}
-						block
 						required
 					>
 						<Checkbox
diff --git a/example-site/components/FormExampleMultiStep/FormExampleMultiStepActions.tsx b/example-site/components/FormExampleMultiStep/FormExampleMultiStepActions.tsx
index f239df03d6f6..af38ecfb1785 100644
--- a/example-site/components/FormExampleMultiStep/FormExampleMultiStepActions.tsx
+++ b/example-site/components/FormExampleMultiStep/FormExampleMultiStepActions.tsx
@@ -23,34 +23,34 @@ export const FormExampleMultiStepActions = () => {
 			<Stack gap={3}>
 				<Divider />
 				<ButtonGroup>
-					<Button type="submit" variant="primary" loading={isSubmittingStep}>
+					<Button loading={isSubmittingStep} type="submit" variant="primary">
 						{currentStep === 4 ? 'Submit form' : 'Save and continue'}
 					</Button>
 					<Button
-						type="button"
-						variant="secondary"
 						loading={isSavingBeforeExiting}
 						onClick={saveAndExit}
+						type="button"
+						variant="secondary"
 					>
 						Save and exit
 					</Button>
-					<Button type="button" variant="tertiary" onClick={openModal}>
+					<Button onClick={openModal} type="button" variant="tertiary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			</Stack>
 			<Modal
-				isOpen={isModalOpen}
-				onClose={closeModal}
-				title="Are you sure you want to cancel?"
 				actions={
 					<ButtonGroup>
 						<Button onClick={cancel}>Yes, cancel</Button>
-						<Button variant="secondary" onClick={closeModal}>
+						<Button onClick={closeModal} variant="secondary">
 							No, take me back
 						</Button>
 					</ButtonGroup>
 				}
+				isOpen={isModalOpen}
+				onClose={closeModal}
+				title="Are you sure you want to cancel?"
 			>
 				<Text as="p">
 					This is the Modal Body paragraph, it provides detailed instruction and
diff --git a/example-site/components/FormExampleMultiStep/FormExampleMultiStepContainer.tsx b/example-site/components/FormExampleMultiStep/FormExampleMultiStepContainer.tsx
index 115d46c00276..360022ff2f39 100644
--- a/example-site/components/FormExampleMultiStep/FormExampleMultiStepContainer.tsx
+++ b/example-site/components/FormExampleMultiStep/FormExampleMultiStepContainer.tsx
@@ -27,18 +27,18 @@ export const FormExampleMultiStepContainer = ({
 	return (
 		<Stack gap={3}>
 			<FormStepTitle
-				titleRef={titleRef}
+				callToAction={callToAction}
 				formTitle="Title of multi-page form"
-				stepTitle={title}
 				introduction={introduction}
-				callToAction={callToAction}
+				stepTitle={title}
+				titleRef={titleRef}
 			/>
 			{hasCompletedPreviousStep ? (
 				children
 			) : (
 				<PageAlert
-					tone="warning"
 					title="This section of the form is not ready to be completed"
+					tone="warning"
 				>
 					<Text as="p">
 						Before starting this part of the form, you will need to go back and
diff --git a/example-site/components/FormRequiredFieldsMessage.tsx b/example-site/components/FormRequiredFieldsMessage.tsx
index fa430e3f631c..1c63173f7370 100644
--- a/example-site/components/FormRequiredFieldsMessage.tsx
+++ b/example-site/components/FormRequiredFieldsMessage.tsx
@@ -2,7 +2,7 @@ import { Text } from '@ag.ds-next/react/text';
 
 export const FormRequiredFieldsMessage = () => {
 	return (
-		<Text as="p" fontSize="xs" color="muted">
+		<Text as="p" color="muted" fontSize="xs">
 			All fields are required unless marked optional.
 		</Text>
 	);
diff --git a/example-site/components/FormStepTitle.tsx b/example-site/components/FormStepTitle.tsx
index 9ec4e29b68fc..af1050d0cbd4 100644
--- a/example-site/components/FormStepTitle.tsx
+++ b/example-site/components/FormStepTitle.tsx
@@ -22,15 +22,15 @@ export function FormStepTitle({
 	return (
 		<Stack gap={1.5}>
 			<H1
+				aria-label={`${formTitle} form, ${stepTitle}`}
+				focusRingFor="keyboard"
 				ref={titleRef}
 				tabIndex={-1}
-				focusRingFor="keyboard"
-				aria-label={`${formTitle} form, ${stepTitle}`}
 			>
 				<Text
+					color="muted"
 					display="block"
 					fontSize="sm"
-					color="muted"
 					fontWeight="bold"
 					lineHeight="heading"
 				>
@@ -39,7 +39,7 @@ export function FormStepTitle({
 				{stepTitle}
 			</H1>
 			{introduction ? (
-				<Text as="p" fontSize="md" color="muted">
+				<Text as="p" color="muted" fontSize="md">
 					{introduction}
 				</Text>
 			) : null}
diff --git a/example-site/components/LinkComponent.tsx b/example-site/components/LinkComponent.tsx
index 1e0301ddbd80..145f7a3d3cbe 100644
--- a/example-site/components/LinkComponent.tsx
+++ b/example-site/components/LinkComponent.tsx
@@ -15,9 +15,9 @@ export const LinkComponent = forwardRef<HTMLAnchorElement, LinkComponentProps>(
 		// Regex finds links starting with: `http://` | `https://` | `//`
 		const hrefAsString = typeof href === 'string' ? href : href?.pathname;
 		if (hrefAsString && /^(https?:\/\/|\/\/)/i.test(hrefAsString)) {
-			return <a ref={ref} href={hrefAsString} {...props} />;
+			return <a href={hrefAsString} ref={ref} {...props} />;
 		}
 
-		return <Link ref={ref} href={href} {...props} />;
+		return <Link href={href} ref={ref} {...props} />;
 	}
 );
diff --git a/example-site/components/PageTitle.tsx b/example-site/components/PageTitle.tsx
index c670985ba0d0..5b7c6e13b963 100644
--- a/example-site/components/PageTitle.tsx
+++ b/example-site/components/PageTitle.tsx
@@ -20,8 +20,8 @@ export const PageTitle = ({
 		<Stack>
 			{pretext ? (
 				<Text
-					fontSize="sm"
 					color="muted"
+					fontSize="sm"
 					fontWeight="bold"
 					lineHeight="heading"
 				>
@@ -31,7 +31,7 @@ export const PageTitle = ({
 			{isValidElement(title) ? title : <H1>{title}</H1>}
 		</Stack>
 		{introduction ? (
-			<Text as="p" fontSize="md" color="muted">
+			<Text as="p" color="muted" fontSize="md">
 				{introduction}
 			</Text>
 		) : null}
diff --git a/example-site/components/SiteFooter.tsx b/example-site/components/SiteFooter.tsx
index feed9659ec35..1393a883665c 100644
--- a/example-site/components/SiteFooter.tsx
+++ b/example-site/components/SiteFooter.tsx
@@ -31,7 +31,7 @@ export const SiteFooter = () => {
 		<Box palette="dark">
 			<Footer background="bodyAlt">
 				<nav aria-label="footer">
-					<LinkList links={footerLinks} horizontal />
+					<LinkList horizontal links={footerLinks} />
 				</nav>
 				<FooterDivider />
 				<Text fontSize="xs" maxWidth={tokens.maxWidth.bodyText}>
diff --git a/example-site/components/SiteHeader.tsx b/example-site/components/SiteHeader.tsx
index bd1e856fe857..aafd608fd898 100644
--- a/example-site/components/SiteHeader.tsx
+++ b/example-site/components/SiteHeader.tsx
@@ -26,10 +26,10 @@ export const SiteHeader = ({ focusMode }: { focusMode: boolean }) => {
 		<Stack palette="dark">
 			<Header
 				background="bodyAlt"
-				logo={<Logo />}
 				heading="Export Service"
-				subline="Supporting Australian agricultural exports"
+				logo={<Logo />}
 				rightContent={<SiteHeaderSearch />}
+				subline="Supporting Australian agricultural exports"
 			/>
 
 			<MainNav
diff --git a/example-site/components/SiteLayout.tsx b/example-site/components/SiteLayout.tsx
index 83b81964cb4b..922196c9cc61 100644
--- a/example-site/components/SiteLayout.tsx
+++ b/example-site/components/SiteLayout.tsx
@@ -35,8 +35,8 @@ export const SiteLayout = ({
 			<Flex
 				flexDirection="column"
 				fontFamily="body"
-				palette="light"
 				minHeight="100vh"
+				palette="light"
 			>
 				{template ? <TemplateBanner {...template} /> : null}
 				<SiteHeader focusMode={focusMode} />
diff --git a/example-site/components/TemplateBanner.tsx b/example-site/components/TemplateBanner.tsx
index f53776e19458..05be6771ddae 100644
--- a/example-site/components/TemplateBanner.tsx
+++ b/example-site/components/TemplateBanner.tsx
@@ -12,11 +12,11 @@ export type TemplateBannerProps = {
 export const TemplateBanner = ({ name, slug }: TemplateBannerProps) => {
 	return (
 		<Flex
-			gap={[2, 1]}
-			palette="dark"
 			background="body"
-			padding={1}
 			flexDirection={['column', 'row']}
+			gap={[2, 1]}
+			padding={1}
+			palette="dark"
 		>
 			<DirectionLink
 				direction="left"
diff --git a/example-site/next-env.d.ts b/example-site/next-env.d.ts
index 4f11a03dc6cc..a4a7b3f5cfa2 100644
--- a/example-site/next-env.d.ts
+++ b/example-site/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/example-site/pages/_app.tsx b/example-site/pages/_app.tsx
index 0ee9d21dccfb..1f8794f820d1 100644
--- a/example-site/pages/_app.tsx
+++ b/example-site/pages/_app.tsx
@@ -21,33 +21,31 @@ export default function App({ Component, pageProps }: AppProps) {
 	}, [router.events]);
 
 	return (
-		<Core theme={theme} linkComponent={LinkComponent}>
+		<Core linkComponent={LinkComponent} theme={theme}>
 			<Head>
 				<meta
-					name="viewport"
 					content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"
+					name="viewport"
 				/>
 				{/* Open graph image  */}
-				<meta property="og:image" content="/img/ogimage.png" />
+				<meta content="/img/ogimage.png" property="og:image" />
 				{/* Favicons  */}
 				<link
+					href="/favicon/favicon.png"
 					rel="alternate icon"
 					type="image/png"
-					href="/favicon/favicon.png"
 				/>
-				<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
-				<link rel="manifest" href="/favicon/manifest.webmanifest" />
+				<link href="/favicon/favicon.svg" rel="icon" type="image/svg+xml" />
+				<link href="/favicon/manifest.webmanifest" rel="manifest" />
 			</Head>
 			{/* Global Site Tag (gtag.js) - Google Analytics */}
 			{GA_MEASUREMENT_ID ? (
 				<Fragment>
 					<Script
-						strategy="afterInteractive"
 						src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+						strategy="afterInteractive"
 					/>
 					<Script
-						id="gtag-init"
-						strategy="afterInteractive"
 						dangerouslySetInnerHTML={{
 							__html: `
             window.dataLayer = window.dataLayer || [];
@@ -58,6 +56,8 @@ export default function App({ Component, pageProps }: AppProps) {
             });
           `,
 						}}
+						id="gtag-init"
+						strategy="afterInteractive"
 					/>
 				</Fragment>
 			) : null}
diff --git a/example-site/pages/category/index.tsx b/example-site/pages/category/index.tsx
index 7993847604f5..101a869f0bce 100644
--- a/example-site/pages/category/index.tsx
+++ b/example-site/pages/category/index.tsx
@@ -19,9 +19,9 @@ export default function CategoryPage() {
 				<HeroCategoryBanner
 					image={
 						<img
-							src="/example-site/placeholder/hero-banner.jpeg"
-							role="presentation"
 							alt=""
+							role="presentation"
+							src="/example-site/placeholder/hero-banner.jpeg"
 						/>
 					}
 				>
@@ -34,7 +34,7 @@ export default function CategoryPage() {
 						<H2>Subcategory pages (H2)</H2>
 						<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
 							{Array.from(Array(6).keys()).map((idx) => (
-								<Card as="li" key={idx} shadow clickable>
+								<Card as="li" clickable key={idx} shadow>
 									<CardInner>
 										<Stack gap={1}>
 											<H3>
diff --git a/example-site/pages/category/subcategory/content.tsx b/example-site/pages/category/subcategory/content.tsx
index 7b0b99f76906..5b8132af25a4 100644
--- a/example-site/pages/category/subcategory/content.tsx
+++ b/example-site/pages/category/subcategory/content.tsx
@@ -21,17 +21,17 @@ export default function ContentPage() {
 		<>
 			<DocumentTitle title="Content page example" />
 			<SiteLayout
-				template={{ name: 'Content', slug: 'content' }}
 				applyMainElement={false}
+				template={{ name: 'Content', slug: 'content' }}
 			>
 				<PageContent>
 					<Columns>
 						<Column
 							as="main"
+							columnSpan={{ xs: 12, md: 8 }}
+							css={{ '&:focus': { outline: 'none' } }}
 							id="main-content"
 							tabIndex={-1}
-							css={{ '&:focus': { outline: 'none' } }}
-							columnSpan={{ xs: 12, md: 8 }}
 						>
 							<Stack gap={3}>
 								<Breadcrumbs
@@ -47,26 +47,26 @@ export default function ContentPage() {
 								/>
 								<Stack gap={1.5}>
 									<H1>Content page heading - xxl/display (H1)</H1>
-									<Text as="p" fontSize="md" color="muted">
+									<Text as="p" color="muted" fontSize="md">
 										Introductory paragraph providing context for this content
 										page - md/default (P).
 									</Text>
 								</Stack>
 								<InpageNav
-									title="On this page"
 									links={[
 										{ href: '#section-1', label: 'Section 1' },
 										{ href: '#section-2', label: 'Section 2' },
 										{ href: '#section-3', label: 'Section 3' },
 										{ href: '#section-4', label: 'Section 4' },
 									]}
+									title="On this page"
 								/>
 								{Array.from(Array(4).keys()).map((idx) => (
 									<Stack
-										key={idx}
-										id={`section-${idx + 1}`}
 										alignItems="flex-start"
 										gap={1.5}
+										id={`section-${idx + 1}`}
+										key={idx}
 									>
 										<Prose>
 											<h2>Content page section heading - xl/display (H2)</h2>
diff --git a/example-site/pages/category/subcategory/index.tsx b/example-site/pages/category/subcategory/index.tsx
index fb652d58125d..5a78a07c607c 100644
--- a/example-site/pages/category/subcategory/index.tsx
+++ b/example-site/pages/category/subcategory/index.tsx
@@ -33,7 +33,7 @@ export default function SubcategoryPage() {
 					<Stack gap={1.5}>
 						<H2>Subcategory content pages (H2)</H2>
 						<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -48,7 +48,7 @@ export default function SubcategoryPage() {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -63,7 +63,7 @@ export default function SubcategoryPage() {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -79,7 +79,7 @@ export default function SubcategoryPage() {
 								</CardInner>
 							</Card>
 							{Array.from(Array(3).keys()).map((idx) => (
-								<Card as="li" key={idx} shadow clickable>
+								<Card as="li" clickable key={idx} shadow>
 									<CardInner>
 										<Stack gap={1}>
 											<H3>
diff --git a/example-site/pages/category/subcategory/multi-page-form/form.tsx b/example-site/pages/category/subcategory/multi-page-form/form.tsx
index 7c0f570a72be..b5f4f4a4141c 100644
--- a/example-site/pages/category/subcategory/multi-page-form/form.tsx
+++ b/example-site/pages/category/subcategory/multi-page-form/form.tsx
@@ -7,8 +7,8 @@ export default function FormMultiPageFormPage() {
 		<>
 			<DocumentTitle title="Multi-page form example" />
 			<SiteLayout
-				template={{ name: 'Multi-page form', slug: 'multi-page-form' }}
 				focusMode
+				template={{ name: 'Multi-page form', slug: 'multi-page-form' }}
 			>
 				<FormExampleMultiStep />
 			</SiteLayout>
diff --git a/example-site/pages/category/subcategory/multi-page-form/index.tsx b/example-site/pages/category/subcategory/multi-page-form/index.tsx
index abf32cf37b2e..c5c311011baf 100644
--- a/example-site/pages/category/subcategory/multi-page-form/index.tsx
+++ b/example-site/pages/category/subcategory/multi-page-form/index.tsx
@@ -35,13 +35,13 @@ export default function FormMultiPageHomePage() {
 									]}
 								/>
 								<PageTitle
-									title="Multi-page form title (H1)"
-									introduction="The introductory paragraph provides context about the entire multi-page form. Use a short paragraph to reduce cognitive load."
 									callToAction={
 										<Text as="p" color="muted">
 											Takes around 10 minutes.
 										</Text>
 									}
+									introduction="The introductory paragraph provides context about the entire multi-page form. Use a short paragraph to reduce cognitive load."
+									title="Multi-page form title (H1)"
 								/>
 								<Stack gap={1.5}>
 									<H2>Form requirements section heading (H2)</H2>
diff --git a/example-site/pages/category/subcategory/multi-page-form/success.tsx b/example-site/pages/category/subcategory/multi-page-form/success.tsx
index db5ba7d862e9..9668ec38dfbf 100644
--- a/example-site/pages/category/subcategory/multi-page-form/success.tsx
+++ b/example-site/pages/category/subcategory/multi-page-form/success.tsx
@@ -48,8 +48,8 @@ export default function FormMultiPageFormPage() {
 								<PageAlert
 									ref={successPageAlertRef}
 									tabIndex={-1}
-									tone="success"
 									title="Descriptive success message (H2)"
+									tone="success"
 								>
 									<Text as="p">
 										Supporting paragraph for the success message
diff --git a/example-site/pages/category/subcategory/single-page-form-success.tsx b/example-site/pages/category/subcategory/single-page-form-success.tsx
index 9cd3f7dc66f1..b799b6a012cc 100644
--- a/example-site/pages/category/subcategory/single-page-form-success.tsx
+++ b/example-site/pages/category/subcategory/single-page-form-success.tsx
@@ -45,8 +45,8 @@ export default function SinglePageFormSuccessPage() {
 								<PageAlert
 									ref={successPageAlertRef}
 									tabIndex={-1}
-									tone="success"
 									title="Descriptive success message (H2)"
+									tone="success"
 								>
 									<Text as="p">
 										Supporting paragraph for the success message
diff --git a/example-site/pages/category/subcategory/single-page-form.tsx b/example-site/pages/category/subcategory/single-page-form.tsx
index f5467041e826..3484f9b12196 100644
--- a/example-site/pages/category/subcategory/single-page-form.tsx
+++ b/example-site/pages/category/subcategory/single-page-form.tsx
@@ -157,14 +157,14 @@ const SinglePageForm = () => {
 		);
 
 	return (
-		<form onSubmit={handleSubmit(onSubmit, onError)} noValidate>
+		<form noValidate onSubmit={handleSubmit(onSubmit, onError)}>
 			<Stack gap={3}>
 				{hasErrors && (
 					<PageAlert
 						ref={errorPageAlertRef}
 						tabIndex={-1}
-						tone="error"
 						title="There is a problem"
+						tone="error"
 					>
 						<Text as="p">
 							Please correct the following fields and try again
@@ -181,51 +181,51 @@ const SinglePageForm = () => {
 					</PageAlert>
 				)}
 				<Fieldset
-					legend={<H2>Business details (H2)</H2>}
 					hint="Supporting information for provide details subheading - sm/default"
+					legend={<H2>Business details (H2)</H2>}
 				>
 					<FormStack>
 						<TextInput
-							label="Australian Business Number (ABN)"
 							{...register('abn')}
 							id="abn"
+							inputMode="numeric"
 							invalid={Boolean(errors.abn?.message)}
+							label="Australian Business Number (ABN)"
 							message={errors.abn?.message}
-							required
-							inputMode="numeric"
 							pattern="[0-9]*"
+							required
 						/>
 						<TextInput
-							label="Australian Company Number (ACN)"
 							{...register('acn')}
 							id="acn"
+							inputMode="numeric"
 							invalid={Boolean(errors.acn?.message)}
+							label="Australian Company Number (ACN)"
 							message={errors.acn?.message}
-							required
-							inputMode="numeric"
 							pattern="[0-9]*"
+							required
 						/>
 						<TextInput
-							label="Business name"
 							{...register('businessName')}
 							id="businessName"
 							invalid={Boolean(errors.businessName?.message)}
+							label="Business name"
+							maxWidth="xl"
 							message={errors.businessName?.message}
 							required
-							maxWidth="xl"
 						/>
 						<Controller
 							control={control}
 							name="registrationDate"
 							render={({ field: { ref, ...field } }) => (
 								<DatePicker
-									inputRef={ref}
-									label="Registration date"
 									{...field}
-									onInputChange={field.onChange}
 									id="registrationDate"
+									inputRef={ref}
 									invalid={Boolean(errors.registrationDate?.message)}
+									label="Registration date"
 									message={errors.registrationDate?.message}
+									onInputChange={field.onChange}
 								/>
 							)}
 						/>
@@ -233,48 +233,48 @@ const SinglePageForm = () => {
 				</Fieldset>
 				<Divider />
 				<Fieldset
-					legend={<H2>Provide entity details (H2)</H2>}
 					hint="Supporting information for provide details subheading - sm/default"
+					legend={<H2>Provide entity details (H2)</H2>}
 				>
 					<FormStack>
 						<TextInput
-							label="Entity name"
 							{...register('entityName')}
 							id="entityName"
 							invalid={Boolean(errors.entityName?.message)}
+							label="Entity name"
 							message={errors.entityName?.message}
 							required
 						/>
 						<TextInput
-							label="Entity number"
 							{...register('entityNumber')}
 							id="entityNumber"
+							inputMode="numeric"
 							invalid={Boolean(errors.entityNumber?.message)}
+							label="Entity number"
 							message={errors.entityNumber?.message}
-							required
-							inputMode="numeric"
 							pattern="[0-9]*"
+							required
 						/>
 						<Controller
 							control={control}
 							name="periodActive"
 							render={({ field: { ref, value, onChange, ...field } }) => (
 								<DateRangePicker
-									legend="Period active"
-									fromInputRef={ref}
 									{...field}
-									id="periodActive"
-									value={value}
-									onChange={onChange}
-									onFromInputChange={(from) => onChange({ ...value, from })}
-									onToInputChange={(to) => onChange({ ...value, to })}
+									fromInputRef={ref}
 									fromInvalid={Boolean(errors.periodActive?.from?.message)}
-									toInvalid={Boolean(errors.periodActive?.to?.message)}
+									id="periodActive"
+									legend="Period active"
 									message={
 										errors.periodActive?.from?.message ||
 										errors.periodActive?.to?.message
 									}
+									onChange={onChange}
+									onFromInputChange={(from) => onChange({ ...value, from })}
+									onToInputChange={(to) => onChange({ ...value, to })}
 									required
+									toInvalid={Boolean(errors.periodActive?.to?.message)}
+									value={value}
 								/>
 							)}
 						/>
@@ -283,27 +283,29 @@ const SinglePageForm = () => {
 				<Fieldset legend={<H3>Street address (H3)</H3>}>
 					<FormStack>
 						<TextInput
-							label="Street address"
 							{...register('streetAddress')}
 							id="streetAddress"
 							invalid={Boolean(errors.streetAddress?.message)}
+							label="Street address"
+							maxWidth="xl"
 							message={errors.streetAddress?.message}
 							required
-							maxWidth="xl"
 						/>
 						<TextInput
-							label="Suburb, town or city"
 							{...register('suburbTownCity')}
 							id="suburbTownCity"
 							invalid={Boolean(errors.suburbTownCity?.message)}
+							label="Suburb, town or city"
 							message={errors.suburbTownCity?.message}
 							required
 						/>
 						<Select
-							label="State or territory"
 							{...register('state')}
 							id="state"
-							placeholder="Select"
+							invalid={Boolean(errors.state?.message)}
+							label="State or territory"
+							maxWidth="md"
+							message={errors.state?.message}
 							options={[
 								{ label: 'NSW', value: 'nsw' },
 								{ label: 'QLD', value: 'qld' },
@@ -314,19 +316,17 @@ const SinglePageForm = () => {
 								{ label: 'SA', value: 'sa' },
 								{ label: 'WA', value: 'wa' },
 							]}
-							invalid={Boolean(errors.state?.message)}
-							message={errors.state?.message}
+							placeholder="Select"
 							required
-							maxWidth="md"
 						/>
 						<TextInput
-							label="Postcode"
 							{...register('postcode')}
 							id="postcode"
+							inputMode="numeric"
 							invalid={Boolean(errors.postcode?.message)}
-							message={errors.postcode?.message}
+							label="Postcode"
 							maxWidth="sm"
-							inputMode="numeric"
+							message={errors.postcode?.message}
 							pattern="[0-9]*"
 							required
 						/>
@@ -344,27 +344,29 @@ const SinglePageForm = () => {
 						{!isPostalAddressSameAsStreetAddress && (
 							<FormStack>
 								<TextInput
-									label="Postal address"
 									{...register('postalAddress')}
 									id="postalAddress"
 									invalid={Boolean(errors.postalAddress?.message)}
+									label="Postal address"
+									maxWidth="xl"
 									message={errors.postalAddress?.message}
 									required
-									maxWidth="xl"
 								/>
 								<TextInput
-									label="Suburb, town or city"
 									{...register('postalSuburbTownCity')}
 									id="postalSuburbTownCity"
 									invalid={Boolean(errors.postalSuburbTownCity?.message)}
+									label="Suburb, town or city"
 									message={errors.postalSuburbTownCity?.message}
 									required
 								/>
 								<Select
-									label="State or territory"
 									{...register('postalState')}
 									id="postalState"
-									placeholder="Select"
+									invalid={Boolean(errors.postalState?.message)}
+									label="State or territory"
+									maxWidth="md"
+									message={errors.postalState?.message}
 									options={[
 										{ label: 'NSW', value: 'nsw' },
 										{ label: 'QLD', value: 'qld' },
@@ -375,21 +377,19 @@ const SinglePageForm = () => {
 										{ label: 'SA', value: 'sa' },
 										{ label: 'WA', value: 'wa' },
 									]}
-									invalid={Boolean(errors.postalState?.message)}
-									message={errors.postalState?.message}
+									placeholder="Select"
 									required
-									maxWidth="md"
 								/>
 								<TextInput
-									label="Postcode"
 									{...register('postalPostcode')}
 									id="postalPostcode"
+									inputMode="numeric"
 									invalid={Boolean(errors.postalPostcode?.message)}
-									message={errors.postalPostcode?.message}
+									label="Postcode"
 									maxWidth="sm"
-									required
-									inputMode="numeric"
+									message={errors.postalPostcode?.message}
 									pattern="[0-9]*"
+									required
 								/>
 							</FormStack>
 						)}
@@ -397,7 +397,7 @@ const SinglePageForm = () => {
 				</Fieldset>
 				<Divider />
 				<ButtonGroup>
-					<Button type="submit" loading={isSubmitting}>
+					<Button loading={isSubmitting} type="submit">
 						Submit form
 					</Button>
 					<Button type="button" variant="secondary">
@@ -432,12 +432,12 @@ export default function SinglePageFormPage() {
 									]}
 								/>
 								<PageTitle
-									title="Single-page form (multi-question) xxl/display (H1)"
 									introduction="Introductory paragraph providing context for this single
-							page of the multi-step form. All questions on page must be
-							related - md/default (P)"
+									page of the multi-step form. All questions on page must be
+									related - md/default (P)"
+									title="Single-page form (multi-question) xxl/display (H1)"
 								/>
-								<Text fontSize="xs" color="muted">
+								<Text color="muted" fontSize="xs">
 									All fields are required unless marked optional.
 								</Text>
 								<SinglePageForm />
diff --git a/example-site/pages/index.tsx b/example-site/pages/index.tsx
index 14952fcd0c07..d7b98d0ca195 100644
--- a/example-site/pages/index.tsx
+++ b/example-site/pages/index.tsx
@@ -1,4 +1,3 @@
-import { Stack } from '@ag.ds-next/react/box';
 import { ButtonGroup, ButtonLink } from '@ag.ds-next/react/button';
 import { CallToActionLink } from '@ag.ds-next/react/call-to-action';
 import { Card, CardInner, CardLink } from '@ag.ds-next/react/card';
@@ -12,6 +11,7 @@ import {
 	HeroBannerTitleContainer,
 } from '@ag.ds-next/react/hero-banner';
 import { Text } from '@ag.ds-next/react/text';
+import { Stack } from '@ag.ds-next/react/stack';
 // These have been extracted to be reusable across the site
 import { SiteLayout } from '../components/SiteLayout';
 import { DocumentTitle } from '../components/DocumentTitle';
@@ -24,9 +24,9 @@ export default function HomePage() {
 				<HeroBanner
 					image={
 						<img
-							src="/example-site/placeholder/hero-banner.jpeg"
-							role="presentation"
 							alt=""
+							role="presentation"
+							src="/example-site/placeholder/hero-banner.jpeg"
 						/>
 					}
 				>
@@ -52,7 +52,7 @@ export default function HomePage() {
 						<H2>Content heading (H2)</H2>
 						<Columns as="ul" cols={{ xs: 1, sm: 2, md: 4 }}>
 							{Array.from(Array(4).keys()).map((idx) => (
-								<Stack key={idx} as="li" gap={1.5}>
+								<Stack as="li" gap={1.5} key={idx}>
 									<H3>Content heading (H3)</H3>
 									<Text as="p">
 										Short descriptive paragraph designed to fit in this space -
@@ -81,10 +81,10 @@ export default function HomePage() {
 							</CallToActionLink>
 						</Stack>
 						<img
-							src="/example-site/placeholder/hero-banner.jpeg"
-							role="presentation"
 							alt=""
 							css={{ display: 'block', maxWidth: '100%' }}
+							role="presentation"
+							src="/example-site/placeholder/hero-banner.jpeg"
 						/>
 					</Columns>
 				</SectionContent>
@@ -94,12 +94,12 @@ export default function HomePage() {
 						<H2>Articles heading (H2)</H2>
 						<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
 							{Array.from(Array(3).keys()).map((idx) => (
-								<Card as="li" key={idx} clickable shadow>
+								<Card as="li" clickable key={idx} shadow>
 									<img
-										src="/example-site/placeholder/hero-banner.jpeg"
-										role="presentation"
 										alt=""
 										css={{ width: '100%' }}
+										role="presentation"
+										src="/example-site/placeholder/hero-banner.jpeg"
 									/>
 									<CardInner>
 										<Stack gap={1}>
diff --git a/example-site/pages/sign-in-form.tsx b/example-site/pages/sign-in-form.tsx
index a8769b71659a..c3266e722e25 100644
--- a/example-site/pages/sign-in-form.tsx
+++ b/example-site/pages/sign-in-form.tsx
@@ -88,8 +88,8 @@ const SignInForm = () => {
 				<PageAlert
 					ref={clientErrorPageAlertRef}
 					tabIndex={-1}
-					tone="error"
 					title="There is a problem"
+					tone="error"
 				>
 					<Text as="p">Please correct the following fields and try again</Text>
 					<UnorderedList>
@@ -103,32 +103,32 @@ const SignInForm = () => {
 					</UnorderedList>
 				</PageAlert>
 			)}
-			<form onSubmit={handleSubmit(onSubmit, onError)} noValidate>
+			<form noValidate onSubmit={handleSubmit(onSubmit, onError)}>
 				<FormStack>
 					<TextInput
-						label="Email"
-						type="email"
 						{...register('email')}
 						id="email"
 						invalid={Boolean(errors.email?.message)}
-						message={errors.email?.message}
+						label="Email"
 						maxWidth="xl"
+						message={errors.email?.message}
 						required
+						type="email"
 					/>
 					<PasswordInput
-						label="Password"
 						{...register('password')}
 						id="password"
 						invalid={Boolean(errors.password?.message)}
-						message={errors.password?.message}
+						label="Password"
 						maxWidth="xl"
+						message={errors.password?.message}
 						required
 					/>
-					<TextLink href="#" css={{ alignSelf: 'flex-start' }}>
+					<TextLink css={{ alignSelf: 'flex-start' }} href="#">
 						Forgot password?
 					</TextLink>
 					<div>
-						<Button type="submit" loading={isSubmitting}>
+						<Button loading={isSubmitting} type="submit">
 							Sign in
 						</Button>
 					</div>
@@ -149,7 +149,7 @@ export default function SignInFormPage() {
 							<Stack gap={3}>
 								<Stack gap={0.5}>
 									<H1>Sign in form - xxl/display (H1)</H1>
-									<Text as="p" fontSize="md" color="muted">
+									<Text as="p" color="muted" fontSize="md">
 										Introductory paragraph providing context for this sign in
 										form. All questions on page must be related - md/default
 										(P).
diff --git a/packages/react/src/_collapsing-side-bar/CollapsingSideBar.tsx b/packages/react/src/_collapsing-side-bar/CollapsingSideBar.tsx
index defcf2611f1b..b9e3938193e2 100644
--- a/packages/react/src/_collapsing-side-bar/CollapsingSideBar.tsx
+++ b/packages/react/src/_collapsing-side-bar/CollapsingSideBar.tsx
@@ -74,9 +74,9 @@ export function CollapsingSideBar({
 
 	return (
 		<Stack
-			as={as}
 			aria-label={ariaLabel}
 			aria-labelledby={ariaLabel ? undefined : headingId}
+			as={as}
 			background={background}
 			css={{
 				[collapsingSideBarHoverProp]: hoverColorMap[background],
@@ -94,9 +94,9 @@ export function CollapsingSideBar({
 						},
 					}}
 					gap={0.5}
+					id={headingId}
 					paddingX={customTitleElement ? undefined : { xs: 0.75, md: 0 }}
 					paddingY={customTitleElement ? undefined : { xs: 1, md: 0 }}
-					id={headingId}
 				>
 					{customTitleElement || (
 						<>
@@ -172,7 +172,6 @@ export function CollapsingSideBar({
 				</Box>
 			</Box>
 			<animated.div
-				id={bodyId}
 				css={{
 					// Overwrite the animated height for tablet/desktop sizes.
 					[tokens.mediaQuery.min.md]: {
@@ -181,6 +180,7 @@ export function CollapsingSideBar({
 						overflow: 'unset',
 					},
 				}}
+				id={bodyId}
 				style={animatedHeight}
 			>
 				<Box ref={ref}>{children}</Box>
diff --git a/packages/react/src/_popover/Popover.tsx b/packages/react/src/_popover/Popover.tsx
index 4a457be707b4..e03629592613 100644
--- a/packages/react/src/_popover/Popover.tsx
+++ b/packages/react/src/_popover/Popover.tsx
@@ -25,11 +25,9 @@ export const Popover = forwardRefWithAs<'div', PopoverProps>(function Popover(
 ) {
 	return (
 		<Box
-			ref={ref}
 			background="body"
 			border
 			borderColor="muted"
-			rounded
 			css={{
 				boxShadow: tokens.shadow.lg,
 				overflow: 'auto',
@@ -37,6 +35,8 @@ export const Popover = forwardRefWithAs<'div', PopoverProps>(function Popover(
 				visibility,
 				zIndex: tokens.zIndex.popover,
 			}}
+			ref={ref}
+			rounded
 			{...props}
 		>
 			{children}
diff --git a/packages/react/src/a11y/ExternalLinkCallout.test.tsx b/packages/react/src/a11y/ExternalLinkCallout.test.tsx
index e8f400be9e9c..6a8669aa3027 100644
--- a/packages/react/src/a11y/ExternalLinkCallout.test.tsx
+++ b/packages/react/src/a11y/ExternalLinkCallout.test.tsx
@@ -11,7 +11,7 @@ afterEach(cleanup);
 
 function ExternalLinkCalloutExample() {
 	return (
-		<TextLink href="#" data-testid="example">
+		<TextLink data-testid="example" href="#">
 			Visit the Design System
 			<ExternalLinkCallout />
 		</TextLink>
diff --git a/packages/react/src/a11y/VisuallyHidden.test.tsx b/packages/react/src/a11y/VisuallyHidden.test.tsx
index e9ea4f10285a..200109f90002 100644
--- a/packages/react/src/a11y/VisuallyHidden.test.tsx
+++ b/packages/react/src/a11y/VisuallyHidden.test.tsx
@@ -11,7 +11,7 @@ afterEach(cleanup);
 
 function VisuallyHiddenExample() {
 	return (
-		<TextLink href="#" data-testid="example">
+		<TextLink data-testid="example" href="#">
 			Read more
 			<VisuallyHidden> about how to visually hide content</VisuallyHidden>
 		</TextLink>
diff --git a/packages/react/src/accordion/Accordion.stories.tsx b/packages/react/src/accordion/Accordion.stories.tsx
index 91d235e99df0..df7666145b3c 100644
--- a/packages/react/src/accordion/Accordion.stories.tsx
+++ b/packages/react/src/accordion/Accordion.stories.tsx
@@ -23,9 +23,9 @@ type AccordionTemplateProps = {
 };
 
 const AccordionBasicTemplate = ({ background }: AccordionTemplateProps) => (
-	<Box padding={1.5} background={background}>
+	<Box background={background} padding={1.5}>
 		<Accordion>
-			<AccordionItem title="Accordion title" background={background}>
+			<AccordionItem background={background} title="Accordion title">
 				<AccordionItemContent>
 					<Text as="p">This is some text inside an Accordion</Text>
 				</AccordionItemContent>
@@ -44,14 +44,14 @@ export const onBodyAlt: Story = {
 };
 
 const AccordionGroupTemplate = ({ background }: AccordionTemplateProps) => (
-	<Box padding={1.5} background={background}>
+	<Box background={background} padding={1.5}>
 		<Accordion>
-			<AccordionItem title="Accordion 1" background={background}>
+			<AccordionItem background={background} title="Accordion 1">
 				<AccordionItemContent>
 					<Text as="p">This is some text inside an Accordion</Text>
 				</AccordionItemContent>
 			</AccordionItem>
-			<AccordionItem title="Accordion 2" background={background}>
+			<AccordionItem background={background} title="Accordion 2">
 				<AccordionItemContent>
 					<Prose>
 						<p>
@@ -85,7 +85,7 @@ const AccordionGroupTemplate = ({ background }: AccordionTemplateProps) => (
 					</Prose>
 				</AccordionItemContent>
 			</AccordionItem>
-			<AccordionItem title="Accordion 3" background={background}>
+			<AccordionItem background={background} title="Accordion 3">
 				<AccordionItemContent>
 					<Text as="p">This is some text inside an Accordion</Text>
 				</AccordionItemContent>
@@ -106,8 +106,8 @@ export const GroupOnBodyAlt: Story = {
 export const Controlled = () => {
 	const [isOpen, onToggle] = useToggleState(false, true);
 	return (
-		<Stack gap={1} alignItems="flex-start">
-			<Button variant="tertiary" onClick={onToggle} aria-expanded={isOpen}>
+		<Stack alignItems="flex-start" gap={1}>
+			<Button aria-expanded={isOpen} onClick={onToggle} variant="tertiary">
 				{isOpen ? 'Close section' : 'Open section'}
 			</Button>
 			<Accordion>
@@ -154,18 +154,18 @@ const AccordionControlledGroupTemplate = ({
 	return (
 		<Accordion>
 			<AccordionItem
-				title="Accordion 1"
 				isOpen={openAccordions.includes(1)}
 				onToggle={() => toggle(1)}
+				title="Accordion 1"
 			>
 				<AccordionItemContent>
 					<Text as="p">This is some text inside an Accordion</Text>
 				</AccordionItemContent>
 			</AccordionItem>
 			<AccordionItem
-				title="Accordion 2"
 				isOpen={openAccordions.includes(2)}
 				onToggle={() => toggle(2)}
+				title="Accordion 2"
 			>
 				<AccordionItemContent>
 					<Prose>
@@ -201,9 +201,9 @@ const AccordionControlledGroupTemplate = ({
 				</AccordionItemContent>
 			</AccordionItem>
 			<AccordionItem
-				title="Accordion 3"
 				isOpen={openAccordions.includes(3)}
 				onToggle={() => toggle(3)}
+				title="Accordion 3"
 			>
 				<AccordionItemContent>
 					<Text as="p">This is some text inside an Accordion</Text>
@@ -234,12 +234,12 @@ export const ControlledGroup = () => {
 	const isAllOpen = openAccordions.length === controlledGroupAccordionLength;
 
 	return (
-		<Stack gap={1} alignItems="flex-start">
+		<Stack alignItems="flex-start" gap={1}>
 			<Button
+				aria-expanded={isAllOpen}
+				onClick={isAllOpen ? closeAll : openAll}
 				size="sm"
 				variant="tertiary"
-				onClick={isAllOpen ? closeAll : openAll}
-				aria-expanded={isAllOpen}
 			>
 				{isAllOpen ? 'Hide all sections' : 'Show all sections'}
 			</Button>
@@ -254,7 +254,7 @@ export const ControlledGroup = () => {
 export const InitiallyOpened: Story = {
 	render: () => (
 		<Accordion>
-			<AccordionItem title="Initially opened" isInitiallyOpen>
+			<AccordionItem isInitiallyOpen title="Initially opened">
 				<AccordionItemContent>
 					<Text as="p">
 						This is some text inside an Accordion, which is opened at time of
diff --git a/packages/react/src/accordion/Accordion.tsx b/packages/react/src/accordion/Accordion.tsx
index f4dd245dfb85..9d66f9e17887 100644
--- a/packages/react/src/accordion/Accordion.tsx
+++ b/packages/react/src/accordion/Accordion.tsx
@@ -4,7 +4,7 @@ import { Box } from '../box';
 export type AccordionProps = { children: ReactNode };
 
 export const Accordion = ({ children }: AccordionProps) => (
-	<Box width="100%" borderTop>
+	<Box borderTop width="100%">
 		{children}
 	</Box>
 );
diff --git a/packages/react/src/accordion/AccordionBody.tsx b/packages/react/src/accordion/AccordionBody.tsx
index 51a3cbe35e0a..5c5938f30901 100644
--- a/packages/react/src/accordion/AccordionBody.tsx
+++ b/packages/react/src/accordion/AccordionBody.tsx
@@ -31,14 +31,14 @@ export const AccordionBody = ({
 
 	return (
 		<animated.div
-			id={id}
 			aria-labelledby={ariaLabelledBy}
-			role="region"
-			style={animatedHeight}
 			css={{
 				overflow: 'hidden',
 				...packs.print.visible,
 			}}
+			id={id}
+			role="region"
+			style={animatedHeight}
 		>
 			<div ref={ref}>{children}</div>
 		</animated.div>
diff --git a/packages/react/src/accordion/AccordionItem.tsx b/packages/react/src/accordion/AccordionItem.tsx
index cc46e00dd5e5..1b31d5813ba5 100644
--- a/packages/react/src/accordion/AccordionItem.tsx
+++ b/packages/react/src/accordion/AccordionItem.tsx
@@ -54,16 +54,16 @@ export const AccordionItem = ({
 	return (
 		<Box borderBottom>
 			<AccordionTitle
+				ariaControls={bodyId}
 				background={background}
-				tag={titleHeadingTag}
 				id={titleId}
-				ariaControls={bodyId}
 				isOpen={isOpen}
 				onClick={onToggle}
+				tag={titleHeadingTag}
 			>
 				{title}
 			</AccordionTitle>
-			<AccordionBody isOpen={isOpen} id={bodyId} ariaLabelledBy={titleId}>
+			<AccordionBody ariaLabelledBy={titleId} id={bodyId} isOpen={isOpen}>
 				{children}
 			</AccordionBody>
 		</Box>
diff --git a/packages/react/src/accordion/AccordionTitle.tsx b/packages/react/src/accordion/AccordionTitle.tsx
index ad1e56660789..926a873acc54 100644
--- a/packages/react/src/accordion/AccordionTitle.tsx
+++ b/packages/react/src/accordion/AccordionTitle.tsx
@@ -27,35 +27,35 @@ export const AccordionTitle = ({
 	return (
 		<Box as={tag}>
 			<Flex
-				as={BaseButton}
-				id={id}
+				alignItems="center"
 				aria-controls={ariaControls}
 				aria-expanded={isOpen}
-				onClick={onClick}
-				color="action"
-				fontSize="md"
-				lineHeight="heading"
-				fontWeight="bold"
+				as={BaseButton}
 				background={background}
-				paddingY={1}
-				justifyContent="space-between"
-				alignItems="center"
-				width="100%"
-				link
-				focusRingFor="keyboard"
+				color="action"
 				css={{
 					'&:hover': {
 						backgroundColor: hoverColorMap[background],
 					},
 				}}
+				focusRingFor="keyboard"
+				fontSize="md"
+				fontWeight="bold"
+				id={id}
+				justifyContent="space-between"
+				lineHeight="heading"
+				link
+				onClick={onClick}
+				paddingY={1}
+				width="100%"
 			>
 				{children}
 				<ChevronDownIcon
-					weight="bold"
 					css={{
 						transition: `transform ${tokens.transition.duration}ms ${tokens.transition.timingFunction}`,
 						transform: `rotate(${isOpen ? 180 : 0}deg)`,
 					}}
+					weight="bold"
 				/>
 			</Flex>
 		</Box>
diff --git a/packages/react/src/ag-branding/Logo.stories.tsx b/packages/react/src/ag-branding/Logo.stories.tsx
index a39edae1013a..833dcec9d366 100644
--- a/packages/react/src/ag-branding/Logo.stories.tsx
+++ b/packages/react/src/ag-branding/Logo.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof AgLogo>;
 export const Logo: Story = {
 	decorators: [
 		(Story) => (
-			<Box maxWidth={600} color="text">
+			<Box color="text" maxWidth={600}>
 				<Story />
 			</Box>
 		),
diff --git a/packages/react/src/ag-branding/Logo.tsx b/packages/react/src/ag-branding/Logo.tsx
index 52c4db1620a1..951e62b764eb 100644
--- a/packages/react/src/ag-branding/Logo.tsx
+++ b/packages/react/src/ag-branding/Logo.tsx
@@ -1,12 +1,12 @@
 export function Logo() {
 	return (
 		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			version="1.1"
-			viewBox="0 0 403 117"
+			aria-label="Australian Government, Department of Agriculture, Fisheries and Forestry"
 			fill="currentColor"
 			role="img"
-			aria-label="Australian Government, Department of Agriculture, Fisheries and Forestry"
+			version="1.1"
+			viewBox="0 0 403 117"
+			xmlns="http://www.w3.org/2000/svg"
 		>
 			<path d="M402.6 57.9H139.1v1.2h263.5v-1.2ZM149.2 41.4h-5.9l-.7 1.6c-.2.5-.3 1-.3 1.3 0 .5.2.8.6 1 .2.1.8.2 1.6.3v.4H139v-.4c.6-.1 1.1-.3 1.5-.7.4-.4.9-1.2 1.4-2.5l5.9-13.2h.2l6 13.6c.6 1.3 1 2.1 1.4 2.4.3.2.7.4 1.2.4v.4h-8v-.4h.3c.6 0 1.1-.1 1.4-.3.2-.1.3-.3.3-.6 0-.2 0-.3-.1-.4 0-.1-.1-.4-.4-.9l-.9-2Zm-.4-.9-2.5-5.7-2.5 5.7h5Zm19.9-5.8v8.9c0 .9.1 1.4.2 1.6.2.2.5.3 1 .4v.4h-4.6v-1.5c-.5.7-1.1 1.1-1.6 1.4-.6.3-1.2.4-1.8.4-.6 0-1.2-.2-1.7-.6-.5-.4-.8-.9-1-1.4-.2-.5-.3-1.4-.3-2.8V37c0-.9-.1-1.4-.2-1.6-.1-.2-.5-.3-1-.4v-.4h4.6v7.8c0 .8 0 1.3.1 1.6.1.2.2.4.4.5.2.1.4.2.6.2.3 0 .6-.1.8-.2.3-.2.7-.6 1.2-1.3v-6.1c0-.9-.1-1.4-.2-1.6-.1-.2-.5-.3-1-.4v-.4h4.5Zm10.1-.4.2 3.9h-.4c-.5-1.2-1-1.9-1.5-2.4-.5-.4-1.1-.6-1.6-.6-.3 0-.6.1-.9.3-.2.2-.4.5-.4.8 0 .2.1.4.2.6.3.3 1 .9 2.2 1.7 1.2.8 2 1.5 2.4 2.1.4.6.6 1.2.6 1.9 0 .6-.2 1.3-.5 1.9-.3.6-.8 1.1-1.3 1.4-.6.3-1.2.5-1.9.5-.5 0-1.3-.2-2.2-.5-.2-.1-.4-.1-.5-.1-.3 0-.5.2-.7.6h-.4l-.2-4.1h.4c.4 1.1.9 1.9 1.5 2.4s1.2.8 1.8.8c.4 0 .7-.1 1-.4.3-.3.4-.5.4-.9s-.1-.7-.4-1c-.2-.3-.8-.7-1.6-1.3-1.2-.9-2.1-1.5-2.4-2-.5-.7-.8-1.4-.8-2.2 0-.9.3-1.7.9-2.4.6-.7 1.5-1.1 2.6-1.1.6 0 1.2.2 1.8.4.2.1.4.2.5.2.1 0 .3 0 .4-.1.1-.1.2-.2.4-.5l.4.1Zm7.1-3.8v4.2h2.7v1.2h-2.7v7c0 .7 0 1.1.1 1.3.1.2.2.3.3.5.1.1.3.2.4.2.5 0 1-.4 1.5-1.2l.4.3c-.7 1.6-1.7 2.3-3.2 2.3-.7 0-1.3-.2-1.8-.6-.5-.4-.8-.8-1-1.3-.1-.3-.1-1-.1-2.2V36H181v-.4c1-.7 1.9-1.5 2.6-2.3.7-.8 1.4-1.7 1.9-2.7h.4v-.1Zm8.5 4.2v2.6c.8-1.2 1.4-2 2-2.3.6-.3 1.1-.6 1.6-.6s.8.1 1.1.4c.3.3.4.7.4 1.2s-.1 1-.4 1.3c-.3.3-.6.4-1 .4s-.8-.1-1.1-.4c-.3-.3-.5-.4-.6-.5-.1-.1-.2-.1-.3-.1-.2 0-.5.1-.7.3-.3.3-.6.7-.8 1.2-.3.8-.4 1.7-.4 2.6v3.3c0 .5 0 .8.1.9.1.2.2.4.4.5.2.1.5.2 1 .2v.4h-6.2v-.4c.5 0 .8-.2 1-.4.2-.2.3-.8.3-1.8v-6.3c0-.7 0-1.1-.1-1.2-.1-.2-.2-.4-.4-.5-.1-.1-.4-.2-.8-.2v-.4l4.9-.2Zm12.6 9.7c-1.4 1.2-2.6 1.8-3.8 1.8-.6 0-1.2-.2-1.6-.6-.4-.4-.6-1-.6-1.6 0-.9.4-1.7 1.1-2.3.7-.6 2.4-1.6 4.9-2.8v-1.2c0-.9-.1-1.4-.1-1.6-.1-.2-.3-.4-.5-.6-.2-.2-.6-.2-.9-.2-.5 0-1 .1-1.3.3-.2.2-.3.3-.3.5s.1.4.3.6c.3.3.5.7.5 1 0 .4-.1.7-.4 1-.3.3-.7.4-1.2.4s-.9-.2-1.3-.5-.5-.7-.5-1.1c0-.6.2-1.2.7-1.7.5-.5 1.1-.9 1.9-1.2.8-.3 1.7-.4 2.6-.4 1.1 0 1.9.2 2.6.7.7.5 1 1 1.2 1.5.1.3.2 1.1.2 2.4v4.4c0 .5 0 .8.1 1 0 .1.1.2.2.3.1.1.2.1.3.1.2 0 .4-.2.6-.4l.4.3c-.4.6-.8 1-1.3 1.3-.4.3-.9.4-1.5.4s-1.2-.2-1.5-.5c-.4-.2-.7-.7-.8-1.3Zm0-.9v-3.8c-1 .6-1.7 1.2-2.2 1.9-.3.4-.5.9-.5 1.3s.1.7.4 1c.2.2.5.3.9.3s.9-.2 1.4-.7Zm10.7-14v14.2c0 .8.1 1.3.3 1.5.2.2.6.3 1.1.4v.4h-6.2v-.4c.5 0 .9-.2 1.1-.4.2-.2.2-.7.2-1.5V31.9c0-.8-.1-1.3-.3-1.5-.2-.2-.6-.3-1.1-.4v-.4l4.9-.1Zm7 5.2v9.1c0 .8.1 1.3.3 1.5.2.2.5.3 1.1.4v.4h-6.2v-.4c.5 0 .9-.2 1.1-.4.2-.2.2-.7.2-1.5V37c0-.8-.1-1.3-.3-1.5-.2-.2-.6-.3-1.1-.4v-.4h4.9Zm-1.8-5.6c.5 0 1 .2 1.3.6.4.4.5.8.5 1.3s-.2 1-.5 1.3c-.4.4-.8.6-1.3.6s-1-.2-1.3-.6c-.4-.4-.6-.8-.6-1.3s.2-1 .6-1.3c.4-.4.8-.6 1.3-.6Zm10.5 15.3c-1.4 1.2-2.6 1.8-3.8 1.8-.6 0-1.2-.2-1.6-.6-.4-.4-.6-1-.6-1.6 0-.9.4-1.7 1.1-2.3.7-.6 2.4-1.6 4.9-2.8v-1.2c0-.9 0-1.4-.1-1.6-.1-.2-.3-.4-.5-.6-.2-.2-.5-.2-.9-.2-.5 0-1 .1-1.3.3-.2.2-.3.3-.3.5s.1.4.3.6c.3.3.5.7.5 1 0 .4-.1.7-.5 1-.3.3-.7.4-1.2.4s-.9-.2-1.3-.5-.5-.7-.5-1.1c0-.6.2-1.2.7-1.7.5-.5 1.1-.9 1.9-1.2.8-.3 1.7-.4 2.6-.4 1.1 0 1.9.2 2.6.7.7.5 1 1 1.2 1.5.1.3.2 1.1.2 2.4v4.4c0 .5 0 .8.1 1 0 .1.1.2.2.3.1.1.2.1.3.1.2 0 .4-.2.6-.4l.4.3c-.4.6-.8 1-1.3 1.3-.4.3-.9.4-1.5.4s-1.2-.2-1.5-.5c-.4-.2-.6-.7-.7-1.3Zm0-.9v-3.8c-1 .6-1.7 1.2-2.2 1.9-.3.4-.5.9-.5 1.3s.1.7.4 1c.2.2.5.3.9.3s.9-.2 1.4-.7Zm10.9-8.8v1.5c.6-.6 1.1-1.1 1.7-1.4.5-.3 1.1-.4 1.7-.4.7 0 1.4.2 1.8.6.4.4.8.9 1 1.5.1.5.2 1.3.2 2.7v4.4c0 .9.1 1.4.2 1.6.2.2.5.3 1 .4v.4h-5.8v-.4c.4-.1.7-.2.9-.5.1-.2.2-.7.2-1.5v-5.1c0-.9 0-1.5-.1-1.8-.1-.2-.2-.4-.4-.6-.2-.1-.4-.2-.6-.2-.7 0-1.4.5-2 1.5v6.1c0 .8.1 1.4.2 1.6.2.2.5.4.9.4v.4h-5.8v-.4c.5-.1.8-.2 1-.5.1-.2.2-.7.2-1.6V37c0-.9-.1-1.4-.2-1.6-.1-.2-.5-.3-1-.4v-.4l4.9.1Zm31.9-5.6V35h-.5c-.5-1.6-1.4-2.8-2.5-3.6-1.1-.8-2.3-1.2-3.6-1.2-1.2 0-2.3.3-3.1 1-.8.7-1.4 1.7-1.8 2.9-.3 1.2-.5 2.5-.5 3.8 0 1.6.2 3 .6 4.2.4 1.2 1 2.1 1.8 2.6s1.8.8 3 .8c.4 0 .8 0 1.2-.1.4-.1.9-.2 1.3-.4v-3.4c0-.7 0-1.1-.1-1.3-.1-.2-.3-.4-.5-.5-.3-.2-.6-.2-1-.2h-.4v-.4h8v.4c-.6 0-1 .1-1.3.2-.3.1-.4.3-.6.6-.1.2-.1.5-.1 1.1V45c-1.1.5-2.2.8-3.3 1.1-1.1.2-2.3.4-3.6.4-1.6 0-2.9-.2-3.9-.6-1-.4-2-1-2.8-1.7-.8-.7-1.4-1.5-1.9-2.3-.6-1.1-.9-2.4-.9-3.8 0-2.5.9-4.6 2.6-6.3 1.8-1.7 4-2.6 6.6-2.6.8 0 1.6.1 2.2.2.4.1.9.2 1.7.6.8.3 1.3.5 1.4.5.2 0 .4-.1.6-.2.2-.2.4-.5.5-.9l.9-.3Zm8.4 5.2c1 0 1.9.3 2.8.8.9.5 1.5 1.2 2 2.2.4.9.7 2 .7 3.1 0 1.6-.4 3-1.2 4.1-1 1.3-2.4 2-4.1 2-1.7 0-3-.6-4-1.8-1-1.2-1.4-2.6-1.4-4.2s.5-3.1 1.4-4.3c.9-1.3 2.2-1.9 3.8-1.9Zm.1.9c-.4 0-.8.2-1.1.5-.3.3-.5.9-.6 1.9-.1.9-.1 2.2-.1 3.8 0 .9.1 1.7.2 2.4.1.6.3 1 .6 1.3.3.3.6.4 1 .4s.7-.1.9-.3c.3-.3.5-.7.6-1.2.2-.8.2-2.3.2-4.7 0-1.4-.1-2.3-.2-2.8s-.4-.9-.7-1.1c-.2-.1-.5-.2-.8-.2Zm12.2 11.2-3.9-8.8c-.5-1.1-.8-1.7-1.1-2-.2-.2-.5-.3-.8-.4v-.4h6.1v.4c-.4 0-.6.1-.8.2-.2.2-.3.4-.3.6 0 .3.2.9.5 1.7l1.9 4.3 1.5-3.7c.4-1.1.6-1.8.6-2.2 0-.2-.1-.5-.3-.6-.2-.1-.5-.2-1-.3v-.4h3.7v.4c-.4.1-.6.2-.9.4-.3.2-.6.9-1 1.9l-3.8 9-.4-.1Zm17-6.4h-6.3c.1 1.5.5 2.7 1.2 3.6.6.7 1.2 1 2 1 .5 0 .9-.1 1.3-.4.4-.3.8-.8 1.3-1.5l.4.3c-.6 1.3-1.3 2.2-2 2.7-.8.5-1.6.8-2.6.8-1.7 0-3-.7-3.9-1.9-.7-1.1-1-2.3-1-3.9 0-1.9.5-3.4 1.5-4.6 1-1.1 2.2-1.7 3.6-1.7 1.2 0 2.2.5 3 1.4 1 .9 1.4 2.3 1.5 4.2Zm-3-.9c0-1.3-.1-2.2-.2-2.7s-.4-.9-.7-1.1c-.2-.2-.4-.2-.7-.2-.4 0-.8.2-1 .6-.5.7-.7 1.7-.7 3v.4h3.3Zm9.2-4.4v2.6c.8-1.2 1.4-2 2-2.3.6-.4 1.1-.6 1.6-.6s.8.1 1.1.4c.3.3.4.7.4 1.2s-.1 1-.4 1.3c-.3.3-.6.4-1 .4s-.8-.1-1.1-.4c-.3-.3-.5-.4-.6-.5-.1-.1-.2-.1-.3-.1-.2 0-.5.1-.7.3-.3.3-.6.7-.8 1.2-.3.8-.4 1.7-.4 2.6v3.3c0 .5 0 .8.1.9.1.2.2.4.4.5.2.1.5.2 1 .2v.4h-6.2v-.4c.5 0 .8-.2 1-.4.2-.2.3-.8.3-1.8v-6.3c0-.7 0-1.1-.1-1.2-.1-.2-.2-.4-.4-.5-.1-.1-.4-.2-.8-.2v-.4l4.9-.2Zm11 0v1.5c.6-.6 1.1-1.1 1.7-1.4.5-.3 1.1-.4 1.7-.4.7 0 1.4.2 1.8.6.4.4.8.9 1 1.5.1.5.2 1.3.2 2.7v4.4c0 .9.1 1.4.2 1.6.2.2.5.3 1 .4v.4H333v-.4c.4-.1.7-.2.9-.5.1-.2.2-.7.2-1.5v-5.1c0-.9 0-1.5-.1-1.8-.1-.2-.2-.4-.4-.6-.2-.1-.4-.2-.6-.2-.7 0-1.4.5-2 1.5v6.1c0 .8.1 1.4.2 1.6.2.2.5.4.9.4v.4h-5.8v-.4c.5-.1.8-.2 1-.5.1-.2.2-.7.2-1.6V37c0-.9-.1-1.4-.2-1.6-.1-.2-.5-.3-1-.4v-.4l4.8.1Zm14 0v1.5c.6-.7 1.2-1.2 1.7-1.4.5-.2 1.1-.4 1.8-.4s1.4.2 1.8.5c.5.3.9.9 1.1 1.6.6-.7 1.3-1.3 1.9-1.6.6-.3 1.2-.5 1.9-.5.8 0 1.4.2 1.9.5s.8.8 1 1.4c.2.6.3 1.4.3 2.7v4.7c0 .9.1 1.4.2 1.6.2.2.5.3 1 .4v.4h-5.9v-.4c.5 0 .8-.2 1-.5.1-.2.2-.7.2-1.5v-4.9c0-1 0-1.7-.1-1.9-.1-.2-.2-.5-.4-.6-.2-.1-.4-.2-.6-.2-.4 0-.7.1-1.1.4-.4.3-.7.6-1.1 1.2v6.1c0 .8.1 1.3.2 1.6.2.3.5.5 1.1.5v.4h-5.9v-.4c.3 0 .6-.1.8-.2.2-.1.3-.3.4-.5.1-.2.1-.6.1-1.3V39c0-1 0-1.7-.1-1.9-.1-.2-.2-.5-.4-.6-.2-.1-.4-.2-.6-.2-.3 0-.6.1-.9.3-.4.2-.8.7-1.2 1.3V44c0 .8.1 1.3.2 1.6.2.3.5.4 1 .5v.4h-5.9v-.4c.5-.1.8-.2 1-.5.1-.2.2-.7.2-1.6v-6.4c0-.9-.1-1.4-.2-1.6-.1-.2-.5-.3-1-.4v-.4l4.6-.5Zm25.7 5.3h-6.3c.1 1.5.5 2.7 1.2 3.6.6.7 1.2 1 2 1 .5 0 .9-.1 1.3-.4.4-.3.8-.8 1.3-1.5l.4.3c-.6 1.3-1.3 2.2-2 2.7-.8.5-1.6.8-2.6.8-1.7 0-3-.7-3.9-1.9-.7-1.1-1-2.3-1-3.9 0-1.9.5-3.4 1.5-4.6 1-1.1 2.2-1.7 3.6-1.7 1.2 0 2.2.5 3 1.4 1 .9 1.5 2.3 1.5 4.2Zm-3-.9c0-1.3-.1-2.2-.2-2.7s-.4-.9-.7-1.1c-.2-.2-.4-.2-.7-.2-.4 0-.8.2-1 .6-.5.7-.7 1.7-.7 3v.4h3.3Zm9.1-4.4v1.5c.6-.6 1.1-1.1 1.7-1.4.5-.3 1.1-.4 1.7-.4.7 0 1.4.2 1.8.6.5.4.8.9 1 1.5.1.5.2 1.3.2 2.7v4.4c0 .9.1 1.4.2 1.6.2.2.5.3 1 .4v.4h-5.8v-.4c.4-.1.7-.2.9-.5.1-.2.2-.7.2-1.5v-5.1c0-.9 0-1.5-.1-1.8-.1-.2-.2-.4-.4-.6-.2-.1-.4-.2-.6-.2-.7 0-1.4.5-2 1.5v6.1c0 .8.1 1.4.2 1.6.2.2.5.4.9.4v.4H372v-.4c.5-.1.8-.2 1-.5.1-.2.2-.7.2-1.6V37c0-.9-.1-1.4-.2-1.6-.1-.2-.5-.3-1-.4v-.4l4.9.1Zm13.8-4.2v4.2h2.7v1.2h-2.7v7c0 .7 0 1.1.1 1.3.1.2.2.3.3.5.1.1.3.2.4.2.5 0 1-.4 1.5-1.2l.4.3c-.7 1.6-1.7 2.3-3.2 2.3-.7 0-1.3-.2-1.8-.6-.5-.4-.8-.8-1-1.3-.1-.3-.1-1-.1-2.2V36h-1.5v-.4c1-.7 1.9-1.5 2.6-2.3.7-.8 1.4-1.7 1.9-2.7h.4v-.1ZM139.2 85.7v-.4h.5c.4 0 .8-.1 1-.2.2-.1.4-.3.5-.5.1-.2.1-.6.1-1.3v-9.6c0-.8 0-1.2-.1-1.4-.1-.2-.2-.3-.5-.5-.2-.1-.6-.2-1-.2h-.5v-.4h6.5c1.7 0 3.1.2 4.2.7 1.3.6 2.3 1.5 2.9 2.6.6 1.1 1 2.5 1 4 0 1-.2 2-.5 2.8-.3.9-.8 1.6-1.3 2.1s-1.1 1-1.8 1.3c-.7.3-1.5.6-2.5.8-.4.1-1.1.1-2.1.1.2.1-6.4.1-6.4.1Zm5.6-13.7v11.4c0 .6 0 1 .1 1.1.1.1.1.2.3.3.2.1.5.2.8.2 1.2 0 2.1-.4 2.7-1.2.9-1.1 1.3-2.8 1.3-5.1 0-1.9-.3-3.4-.9-4.5-.5-.9-1.1-1.5-1.8-1.8-.5-.3-1.3-.4-2.5-.4ZM164.1 80.3h-5.5c.1 1.3.4 2.4 1.1 3.2.5.6 1.1.9 1.8.9.4 0 .8-.1 1.2-.4.4-.2.7-.7 1.1-1.3l.4.2c-.5 1.1-1.1 1.9-1.8 2.4s-1.4.7-2.3.7c-1.5 0-2.6-.6-3.4-1.7-.6-.9-.9-2.1-.9-3.4 0-1.7.4-3 1.4-4 1-1 2-1.5 3.2-1.5 1 0 1.9.4 2.6 1.2.6.9 1 2.1 1.1 3.7Zm-2.7-.7c0-1.2-.1-1.9-.2-2.4s-.3-.8-.6-1c-.1-.1-.4-.2-.6-.2-.4 0-.7.2-.9.6-.4.6-.6 1.5-.6 2.6v.4h2.9ZM169.2 84.7v3.7c0 .5 0 .9.1 1.1.1.2.2.3.4.4.2.1.5.1 1 .1v.4H165V90c.4 0 .8-.1 1-.4.1-.2.2-.6.2-1.3V77.8c0-.7-.1-1.2-.2-1.4-.1-.2-.5-.3-1-.3v-.4h4.2V77c.4-.5.7-.9 1.1-1.1.5-.3 1.1-.5 1.7-.5.7 0 1.4.2 2 .7.6.5 1.1 1.1 1.4 1.9.3.8.5 1.7.5 2.7 0 1-.2 1.9-.5 2.8-.3.8-.8 1.5-1.4 1.9-.6.4-1.3.7-2.1.7-.6 0-1.1-.1-1.6-.4-.3-.2-.7-.6-1.1-1Zm0-1.1c.6.9 1.3 1.3 2 1.3.4 0 .7-.2 1-.6.4-.6.6-1.8.6-3.4 0-1.7-.2-2.9-.6-3.6-.3-.4-.6-.6-1.1-.6-.7 0-1.3.5-1.8 1.6l-.1 5.3ZM183.1 84.2c-1.2 1.1-2.3 1.6-3.3 1.6-.6 0-1.1-.2-1.4-.6-.4-.4-.6-.8-.6-1.4 0-.8.3-1.5 1-2.1.7-.6 2.1-1.4 4.3-2.4v-1c0-.8 0-1.2-.1-1.4-.1-.2-.2-.4-.5-.5-.2-.2-.5-.2-.8-.2-.5 0-.9.1-1.1.3-.2.1-.3.3-.3.4 0 .2.1.3.3.6.3.3.4.6.4.9 0 .3-.1.7-.4.9-.3.2-.6.4-1 .4s-.8-.1-1.1-.4c-.3-.3-.5-.6-.5-1 0-.5.2-1 .6-1.5.4-.5 1-.8 1.7-1.1.7-.3 1.5-.4 2.3-.4.9 0 1.7.2 2.3.6.6.4.9.8 1.1 1.3.1.3.1 1 .1 2.1v3.9c0 .5 0 .8.1.9 0 .1.1.2.2.3.1.1.1.1.2.1.2 0 .4-.1.6-.4l.3.3c-.4.5-.7.9-1.1 1.2-.4.2-.8.4-1.3.4-.6 0-1-.1-1.3-.4-.3-.3-.6-.8-.7-1.4Zm0-.7v-3.4c-.9.5-1.5 1.1-1.9 1.6-.3.4-.4.8-.4 1.2 0 .3.1.6.4.9.2.2.4.3.8.3.2 0 .7-.2 1.1-.6ZM192.8 75.7V78c.7-1 1.2-1.7 1.8-2.1.6-.4 1-.5 1.4-.5.4 0 .7.1 1 .4.3.3.4.6.4 1.1 0 .5-.1.8-.4 1.1-.2.3-.5.4-.8.4-.4 0-.7-.1-1-.4-.3-.3-.4-.4-.5-.4-.1 0-.1-.1-.2-.1-.2 0-.4.1-.6.2-.3.2-.5.6-.7 1-.2.7-.3 1.5-.3 2.3v2.9c0 .4 0 .7.1.8.1.2.2.3.4.4.2.1.4.2.9.2v.4h-5.4v-.4c.4 0 .7-.2.9-.4.1-.2.2-.7.2-1.6v-5.6c0-.6 0-.9-.1-1.1-.1-.2-.2-.3-.3-.4-.1-.1-.4-.2-.7-.2v-.4l3.9.1ZM202.3 72v3.7h2.4v1.1h-2.4V83c0 .6 0 .9.1 1.1.1.2.1.3.3.4.1.1.3.2.4.2.5 0 .9-.3 1.3-1.1l.3.2c-.6 1.4-1.5 2.1-2.8 2.1-.6 0-1.2-.2-1.6-.5-.4-.3-.7-.8-.8-1.2-.1-.2-.1-.9-.1-2v-5.4H198v-.4c.9-.6 1.7-1.3 2.3-2 .6-.7 1.2-1.5 1.7-2.3h.3V72ZM209.8 75.7V77c.6-.6 1.1-1 1.5-1.3.5-.2 1-.4 1.5-.4.6 0 1.2.2 1.6.4.4.3.8.8 1 1.4.6-.6 1.1-1.1 1.6-1.4.5-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.5s.7.7.9 1.2c.2.5.2 1.3.2 2.3v4.1c0 .8.1 1.2.2 1.4.1.2.4.3.9.4v.4h-5.2v-.4c.4 0 .7-.2.9-.5.1-.2.2-.6.2-1.3v-4.3c0-.9 0-1.5-.1-1.7-.1-.2-.2-.4-.3-.5-.1-.1-.3-.2-.5-.2-.3 0-.6.1-.9.3-.3.2-.6.6-1 1v5.4c0 .7.1 1.2.2 1.4.2.3.5.4.9.4v.4h-5.2v-.4c.3 0 .5-.1.7-.2.2-.1.3-.3.3-.4 0-.1.1-.6.1-1.1v-4.3c0-.9 0-1.5-.1-1.7-.1-.2-.2-.4-.4-.5-.2-.1-.4-.2-.5-.2-.3 0-.6.1-.8.2-.3.2-.7.6-1.1 1.1v5.4c0 .7.1 1.2.2 1.4.1.2.4.4.9.4v.4h-5.2v-.4c.4 0 .7-.2.9-.4.1-.2.2-.6.2-1.4v-5.7c0-.8-.1-1.2-.2-1.4-.1-.2-.4-.3-.9-.4v-.4l4.2.1ZM232.5 80.3H227c.1 1.3.4 2.4 1.1 3.2.5.6 1.1.9 1.8.9.4 0 .8-.1 1.2-.4.4-.3.7-.7 1.1-1.3l.4.2c-.5 1.1-1.1 1.9-1.8 2.4s-1.4.7-2.3.7c-1.5 0-2.6-.6-3.4-1.7-.6-.9-.9-2.1-.9-3.4 0-1.7.5-3 1.4-4 .9-1 2-1.5 3.2-1.5 1 0 1.9.4 2.6 1.2.6.9 1.1 2.1 1.1 3.7Zm-2.6-.7c0-1.2-.1-1.9-.2-2.4s-.3-.8-.6-1c-.1-.1-.4-.2-.6-.2-.4 0-.7.2-.9.6-.4.6-.6 1.5-.6 2.6v.4h2.9ZM237.9 75.7V77c.5-.6 1-1 1.5-1.2.5-.2 1-.4 1.5-.4.6 0 1.2.2 1.6.5.4.3.7.8.9 1.3.1.4.2 1.2.2 2.3v3.9c0 .8.1 1.2.2 1.4.1.2.4.3.9.4v.4h-5.1v-.4c.4-.1.6-.2.8-.5.1-.2.2-.6.2-1.3v-4.5c0-.8 0-1.3-.1-1.6-.1-.3-.2-.4-.3-.5-.1-.1-.3-.2-.5-.2-.6 0-1.2.4-1.7 1.3v5.4c0 .8.1 1.2.2 1.4.1.2.4.3.8.4v.4h-5.1v-.4c.4 0 .7-.2.9-.4.1-.2.2-.6.2-1.4v-5.7c0-.8-.1-1.2-.2-1.4-.1-.2-.4-.3-.9-.4v-.4l4 .3ZM250 72v3.7h2.4v1.1H250V83c0 .6 0 .9.1 1.1 0 .2.1.3.3.4.1.1.3.2.4.2.5 0 .9-.3 1.3-1.1l.3.2c-.6 1.4-1.5 2.1-2.8 2.1-.6 0-1.2-.2-1.6-.5-.4-.3-.7-.8-.8-1.2-.1-.2-.1-.9-.1-2v-5.4h-1.3v-.4c.9-.6 1.7-1.3 2.3-2 .6-.7 1.2-1.5 1.7-2.3h.2V72ZM263.6 75.4c.9 0 1.7.2 2.4.7.7.5 1.3 1.1 1.7 1.9.4.8.6 1.7.6 2.7 0 1.4-.4 2.6-1.1 3.6-.9 1.2-2.1 1.7-3.6 1.7s-2.7-.5-3.5-1.6c-.8-1.1-1.2-2.3-1.2-3.7 0-1.4.4-2.7 1.2-3.8.9-1 2-1.5 3.5-1.5Zm0 .7c-.4 0-.7.1-.9.4-.3.3-.4.8-.5 1.6-.1.8-.1 1.9-.1 3.4 0 .8 0 1.5.1 2.2.1.5.2.9.5 1.2.3.3.5.4.9.4.3 0 .6-.1.8-.3.3-.2.5-.6.6-1 .1-.7.2-2.1.2-4.1 0-1.2-.1-2.1-.2-2.5-.1-.4-.3-.8-.6-1-.2-.2-.5-.3-.8-.3ZM274.2 76.7v7c0 .7.1 1.1.2 1.3.2.3.6.4 1.3.4v.4h-5.9v-.4c.5 0 .8-.1 1-.2.2-.1.3-.2.4-.4.1-.2.1-.5.1-1.1v-7h-1.5v-1.1h1.5v-1.2c0-1 .4-1.9 1.1-2.6.8-.7 1.8-1 3.1-1 .9 0 1.5.2 2 .5.4.3.6.7.6 1.1 0 .3-.1.6-.4.8-.3.2-.6.3-1 .3s-.7-.1-.9-.3c-.2-.2-.3-.4-.3-.6 0-.1 0-.2.1-.4v-.3c0-.2 0-.3-.1-.3-.1-.1-.2-.2-.4-.2s-.4.1-.5.3c-.1.2-.2.4-.2.8v3.2h1.5v1.1l-1.7-.1ZM289.8 81.6h-5.1l-.6 1.4c-.2.5-.3.9-.3 1.2 0 .4.2.7.5.9.2.1.7.2 1.4.3v.4h-4.8v-.4c.5-.1 1-.3 1.3-.7.3-.4.8-1.1 1.2-2.2l5.2-11.6h.2l5.2 11.9c.5 1.1.9 1.8 1.2 2.1.2.2.6.3 1 .4v.4h-7v-.4h.3c.6 0 1-.1 1.2-.2.2-.1.2-.3.2-.5 0-.1 0-.3-.1-.4 0-.1-.1-.3-.3-.8l-.7-1.8Zm-.3-.8-2.2-5-2.2 5h4.4ZM303.8 75.8h3.4V77h-1.9c.4.3.6.7.7 1 .2.4.3.8.3 1.2 0 .7-.2 1.3-.6 1.9-.4.6-.9.9-1.6 1.2-.7.3-1.3.4-1.8.4 0 0-.5 0-1.3-.1-.3 0-.6.1-.8.3-.2.2-.3.5-.3.8 0 .3.1.5.3.6.2.2.5.2 1 .2h1.9c1.5 0 2.5.2 3.1.5.8.5 1.2 1.2 1.2 2.1 0 .6-.2 1.2-.6 1.7-.4.5-.9.9-1.5 1.1-.9.3-2 .5-3.2.5-.9 0-1.7-.1-2.5-.3-.8-.2-1.3-.4-1.6-.7-.3-.3-.5-.6-.5-1 0-.3.1-.6.4-.9.3-.3.7-.5 1.4-.7-.9-.5-1.4-1.1-1.4-1.9 0-.5.2-1 .6-1.4.4-.4 1-.9 1.8-1.2-1-.3-1.6-.8-2.1-1.4-.5-.6-.6-1.2-.6-2 0-1 .4-1.8 1.2-2.6.8-.7 1.8-1.1 3.1-1.1.5.2 1.2.3 1.9.6Zm-2.5 11.4c-.7 0-1.2.1-1.5.2-.4.2-.6.5-.6.9s.2.7.6 1c.4.3 1.2.4 2.4.4 1 0 1.8-.1 2.4-.4.6-.3.9-.6.9-1.1 0-.2 0-.3-.2-.4-.2-.2-.5-.4-.9-.4-.4-.2-1.4-.2-3.1-.2Zm.6-11.2c-.4 0-.8.2-1 .6-.3.4-.4 1.3-.4 2.6 0 1.1.1 1.8.4 2.2.3.4.6.6 1 .6s.8-.2 1.1-.6c.3-.4.4-1.2.4-2.3 0-1.3-.2-2.2-.5-2.6-.2-.3-.6-.5-1-.5ZM312.5 75.7V78c.7-1 1.2-1.7 1.8-2.1.6-.4 1-.5 1.5-.5.4 0 .7.1 1 .4.3.3.4.6.4 1.1 0 .5-.1.8-.4 1.1-.2.3-.5.4-.8.4-.4 0-.7-.1-1-.4-.3-.3-.4-.4-.5-.4-.1 0-.1-.1-.2-.1-.2 0-.4.1-.6.2-.3.2-.5.6-.7 1-.2.7-.3 1.5-.3 2.3v2.9c0 .4 0 .7.1.8.1.2.2.3.4.4.2.1.5.2.9.2v.4h-5.4v-.4c.4 0 .7-.2.9-.4.1-.2.2-.7.2-1.6v-5.6c0-.6 0-.9-.1-1.1-.1-.2-.2-.3-.3-.4-.1-.1-.4-.2-.7-.2v-.4l3.8.1ZM322 75.7v8c0 .7.1 1.2.2 1.4.2.2.5.3 1 .3v.4h-5.4v-.4c.4 0 .8-.1 1-.4.1-.2.2-.6.2-1.3v-5.9c0-.7-.1-1.2-.2-1.4-.1-.2-.5-.3-1-.3v-.4h4.2Zm-1.5-4.9c.5 0 .9.2 1.2.5.3.3.5.7.5 1.2s-.2.8-.5 1.2c-.3.4-.7.5-1.2.5s-.9-.2-1.2-.5c-.3-.3-.5-.7-.5-1.2s.2-.8.5-1.2c.4-.3.7-.5 1.2-.5ZM332.4 83.1l.3.3c-.5.9-1.1 1.6-1.8 2-.7.4-1.5.7-2.2.7-1.3 0-2.4-.5-3.2-1.5-.8-1-1.2-2.2-1.2-3.6s.4-2.6 1.1-3.6c.9-1.2 2.1-1.9 3.6-1.9 1 0 1.9.3 2.5.8.6.5.9 1.1.9 1.8 0 .4-.1.7-.4 1-.2.2-.6.4-1 .4s-.8-.1-1-.4c-.2-.3-.5-.8-.5-1.5 0-.4-.1-.8-.3-.9-.2-.1-.4-.3-.6-.3-.3 0-.6.2-.9.6-.4.6-.6 1.4-.6 2.5 0 .9.1 1.8.5 2.7.3.9.7 1.5 1.2 1.9.4.3.9.5 1.4.5.4 0 .7-.1 1-.2.3-.1.8-.8 1.2-1.3ZM343.7 75.7v7.9c0 .8.1 1.2.2 1.4.1.2.4.3.9.4v.4h-4.1v-1.3c-.5.6-1 1-1.4 1.2-.4.2-1 .4-1.6.4-.6 0-1.1-.2-1.5-.5-.4-.3-.7-.8-.9-1.2-.2-.4-.3-1.4-.3-2.6v-4c0-.8-.1-1.2-.2-1.4-.1-.2-.4-.3-.9-.4v-.4h4.1v6.9c0 .7 0 1.2.1 1.4.1.2.2.4.3.5.1.1.3.2.5.2.3 0 .5-.1.7-.2.3-.2.6-.6 1-1.1v-5.4c0-.8-.1-1.2-.2-1.4-.1-.2-.4-.3-.9-.4v-.4h4.2ZM350.1 71.2v12.5c0 .7.1 1.2.2 1.4.1.2.5.3 1 .3v.4h-5.4v-.4c.4 0 .8-.1 1-.4.1-.2.2-.6.2-1.3V73.2c0-.7-.1-1.2-.2-1.3-.1-.1-.5-.3-1-.3v-.4h4.2ZM356.3 72v3.7h2.4v1.1h-2.4V83c0 .6 0 .9.1 1.1 0 .2.1.3.3.4.1.1.3.2.4.2.5 0 .9-.3 1.3-1.1l.3.2c-.6 1.4-1.5 2.1-2.8 2.1-.6 0-1.2-.2-1.6-.5-.4-.3-.7-.8-.8-1.2-.1-.2-.1-.9-.1-2v-5.4H352v-.4c.9-.6 1.7-1.3 2.3-2 .6-.7 1.2-1.5 1.7-2.3h.3V72ZM369.3 75.7v7.9c0 .8.1 1.2.2 1.4.1.2.4.3.9.4v.4h-4.1v-1.3c-.5.6-1 1-1.4 1.2-.4.2-1 .4-1.6.4-.6 0-1.1-.2-1.5-.5-.4-.3-.7-.8-.9-1.2-.2-.4-.2-1.3-.2-2.4v-4c0-.8-.1-1.2-.2-1.4-.1-.2-.4-.3-.9-.4v-.4h4.1v6.9c0 .7 0 1.2.1 1.4.1.2.2.4.3.5.1.1.3.2.5.2.3 0 .5-.1.7-.2.3-.2.6-.6 1-1.1v-5.4c0-.8-.1-1.2-.2-1.4-.1-.2-.4-.3-.9-.4v-.4l4.1-.2ZM376 75.7V78c.7-1 1.2-1.7 1.8-2.1.6-.4 1-.5 1.5-.5.4 0 .7.1 1 .4.3.3.4.6.4 1.1 0 .5-.1.8-.4 1.1-.2.3-.5.4-.8.4-.4 0-.7-.1-1-.4-.3-.3-.4-.4-.5-.4-.1 0-.1-.1-.2-.1-.2 0-.4.1-.6.2-.3.2-.5.6-.7 1-.2.7-.3 1.5-.3 2.3v2.9c0 .4 0 .7.1.8.1.2.2.3.4.4.2.1.5.2.9.2v.4h-5.4v-.4c.4 0 .7-.2.9-.4.1-.2.2-.7.2-1.6v-5.6c0-.6 0-.9-.1-1.1-.1-.2-.2-.3-.3-.4-.1-.1-.4-.2-.7-.2v-.4l3.8.1ZM389.8 80.3h-5.5c.1 1.3.4 2.4 1.1 3.2.5.6 1.1.9 1.8.9.4 0 .8-.1 1.2-.4.4-.3.7-.7 1.1-1.3l.4.2c-.5 1.1-1.1 1.9-1.8 2.4s-1.4.7-2.3.7c-1.5 0-2.6-.6-3.4-1.7-.6-.9-.9-2.1-.9-3.4 0-1.7.5-3 1.4-4 .9-1 2-1.5 3.2-1.5 1 0 1.9.4 2.6 1.2.6.9 1 2.1 1.1 3.7Zm-2.7-.7c0-1.2-.1-1.9-.2-2.4-.1-.4-.3-.8-.6-1-.1-.1-.4-.2-.6-.2-.4 0-.7.2-.9.6-.4.6-.6 1.5-.6 2.6v.4h2.9ZM391.4 89.6v-.5c.8-.4 1.4-.8 1.8-1.4.4-.6.6-1.2.6-1.8 0-.1 0-.2-.1-.3 0-.1-.1-.1-.1-.1s-.1 0-.2.1c-.2.1-.5.2-.8.2-.4 0-.8-.2-1.1-.5-.3-.3-.5-.7-.5-1.2s.2-.9.5-1.2c.3-.3.8-.5 1.3-.5.6 0 1.1.2 1.6.7.4.5.7 1.1.7 2 0 1-.3 1.9-.9 2.7-.7.8-1.6 1.4-2.8 1.8ZM145 98.4v6h.4c.6 0 1.2-.1 1.6-.3.4-.2.8-.5 1-1 .3-.5.5-1.1.6-1.9h.4v7.3h-.4c-.1-1.4-.5-2.3-1.1-2.7-.6-.4-1.3-.7-2.1-.7h-.4v4.5c0 .8 0 1.2.1 1.4.1.2.2.4.5.5.2.1.6.2 1 .2h.5v.4h-7.6v-.4h.5c.4 0 .8-.1 1-.2.2-.1.3-.3.4-.5.1-.2.1-.6.1-1.4V100c0-.7 0-1.2-.1-1.4-.1-.2-.2-.4-.5-.5-.2-.1-.6-.2-1-.2h-.5v-.4h12.3v4.2h-.4c-.1-1-.4-1.7-.8-2.2-.4-.5-1-.8-1.8-1-.4-.1-1.2-.2-2.4-.2l-1.3.1ZM157.1 102.1v8c0 .7.1 1.2.2 1.4.2.2.5.3 1 .3v.4h-5.4v-.4c.4 0 .8-.1 1-.4.1-.2.2-.6.2-1.3v-5.9c0-.7-.1-1.2-.2-1.4-.1-.2-.5-.3-1-.3v-.4h4.2Zm-1.5-4.9c.5 0 .9.2 1.2.5.3.3.5.7.5 1.2s-.2.9-.5 1.2c-.3.3-.7.5-1.2.5s-.9-.2-1.2-.5c-.3-.3-.5-.7-.5-1.2s.2-.9.5-1.2c.3-.3.7-.5 1.2-.5ZM165.6 101.8l.2 3.4h-.4c-.4-1-.9-1.7-1.4-2.1-.5-.4-.9-.6-1.4-.6-.3 0-.5.1-.8.3-.3.2-.3.4-.3.7 0 .2.1.4.2.6.2.3.9.8 1.9 1.5 1 .7 1.8 1.3 2.1 1.8.3.5.5 1.1.5 1.7 0 .6-.1 1.1-.4 1.6-.3.5-.7.9-1.2 1.2-.5.3-1.1.4-1.7.4-.5 0-1.1-.1-1.9-.4-.2-.1-.4-.1-.4-.1-.2 0-.4.2-.6.5h-.4l-.2-3.6h.4c.3.9.8 1.6 1.3 2.1.6.5 1.1.7 1.6.7.3 0 .6-.1.8-.3.2-.2.3-.5.3-.8 0-.3-.1-.6-.3-.9-.2-.3-.7-.6-1.4-1.1-1.1-.8-1.8-1.3-2.1-1.7-.5-.6-.7-1.2-.7-1.9 0-.8.3-1.5.8-2.1.5-.6 1.3-.9 2.3-.9.5 0 1.1.1 1.6.4.2.1.4.2.5.2.1 0 .2 0 .3-.1.1-.1.2-.2.4-.5h.4ZM171.9 97.6v5.8c.6-.6 1.1-1 1.5-1.2.5-.2.9-.4 1.4-.4.6 0 1.2.2 1.6.5.4.3.7.8.9 1.3.2.5.2 1.3.2 2.4v3.9c0 .8.1 1.2.2 1.4.1.2.4.3.9.4v.4h-5.1v-.4c.4-.1.6-.2.8-.4.1-.2.2-.6.2-1.4v-4.5c0-.8 0-1.4-.1-1.6-.1-.2-.2-.4-.3-.5-.1-.1-.3-.2-.5-.2-.3 0-.6.1-.8.3-.3.2-.6.5-.9 1v5.4c0 .7.1 1.2.2 1.3.1.2.4.4.8.4v.4h-5.1v-.4c.4 0 .7-.2.9-.4.1-.2.2-.6.2-1.4v-10c0-.8-.1-1.2-.2-1.4-.1-.2-.4-.3-.9-.4v-.4l4.1.1ZM188.6 106.7H183c.1 1.3.4 2.4 1.1 3.2.5.6 1.1.9 1.8.9.4 0 .8-.1 1.2-.4.4-.2.7-.7 1.1-1.3l.4.2c-.5 1.1-1.1 1.9-1.8 2.4s-1.4.7-2.3.7c-1.5 0-2.6-.6-3.4-1.7-.6-.9-.9-2.1-.9-3.4 0-1.7.4-3 1.4-4 1-1 2-1.5 3.2-1.5 1 0 1.9.4 2.6 1.2.7.9 1.1 2.1 1.2 3.7Zm-2.7-.7c0-1.1-.1-1.9-.2-2.4s-.3-.8-.6-1c-.1-.1-.4-.2-.6-.2-.4 0-.7.2-.9.6-.4.6-.6 1.5-.6 2.6v.4h2.9ZM194 102.1v2.3c.7-1 1.2-1.7 1.8-2.1.5-.3 1-.5 1.4-.5.4 0 .7.1 1 .4.3.3.4.6.4 1.1 0 .5-.1.9-.4 1.1-.2.3-.5.4-.8.4-.4 0-.7-.1-1-.4-.3-.2-.4-.4-.5-.4-.1 0-.1-.1-.2-.1-.2 0-.4.1-.6.2-.3.2-.5.6-.7 1-.2.7-.3 1.5-.3 2.3v2.9c0 .4 0 .7.1.8.1.2.2.3.4.4.2.1.4.1.9.2v.4h-5.4v-.4c.4 0 .7-.2.9-.4.1-.2.2-.7.2-1.6v-5.6c0-.6 0-.9-.1-1.1-.1-.2-.2-.4-.3-.4-.1-.1-.4-.2-.7-.2v-.4l3.9.1ZM203.5 102.1v8c0 .7.1 1.2.2 1.4.2.2.5.3 1 .3v.4h-5.4v-.4c.4 0 .8-.1 1-.4.1-.2.2-.6.2-1.3v-5.9c0-.7-.1-1.2-.2-1.4-.1-.2-.5-.3-1-.3v-.4h4.2Zm-1.5-4.9c.5 0 .9.2 1.2.5.3.3.5.7.5 1.2s-.2.9-.5 1.2c-.3.3-.7.5-1.2.5s-.9-.2-1.2-.5c-.3-.3-.5-.7-.5-1.2s.2-.9.5-1.2c.3-.3.7-.5 1.2-.5ZM214.2 106.7h-5.5c.1 1.3.4 2.4 1.1 3.2.5.6 1.1.9 1.8.9.4 0 .8-.1 1.2-.4.4-.2.7-.7 1.1-1.3l.4.2c-.5 1.1-1.1 1.9-1.8 2.4s-1.4.7-2.3.7c-1.5 0-2.6-.6-3.4-1.7-.6-.9-.9-2.1-.9-3.4 0-1.7.4-3 1.4-4 1-1 2-1.5 3.2-1.5 1 0 1.9.4 2.6 1.2.6.9 1 2.1 1.1 3.7Zm-2.6-.7c0-1.1-.1-1.9-.2-2.4s-.3-.8-.6-1c-.1-.1-.4-.2-.6-.2-.4 0-.7.2-.9.6-.4.6-.6 1.5-.6 2.6v.4h2.9ZM221.8 101.8l.2 3.4h-.4c-.4-1-.9-1.7-1.4-2.1-.5-.4-.9-.6-1.4-.6-.3 0-.5.1-.8.3-.3.2-.3.4-.3.7 0 .2.1.4.2.6.2.3.9.8 1.9 1.5 1 .7 1.8 1.3 2.1 1.8.3.5.5 1.1.5 1.7 0 .6-.1 1.1-.4 1.6-.3.5-.7.9-1.2 1.2-.5.3-1.1.4-1.7.4-.5 0-1.1-.1-1.9-.4-.2-.1-.4-.1-.4-.1-.2 0-.4.2-.6.5h-.4l-.2-3.6h.4c.3.9.8 1.6 1.3 2.1.6.5 1.1.7 1.6.7.3 0 .6-.1.8-.3.2-.2.3-.5.3-.8 0-.3-.1-.6-.3-.9-.2-.3-.7-.6-1.4-1.1-1.1-.8-1.8-1.3-2.1-1.7-.5-.6-.7-1.2-.7-1.9 0-.8.3-1.5.8-2.1.5-.6 1.3-.9 2.3-.9.5 0 1.1.1 1.6.4.2.1.4.2.5.2.1 0 .2 0 .3-.1.1-.1.2-.2.4-.5h.4ZM235.1 110.6c-1.2 1.1-2.3 1.6-3.3 1.6-.6 0-1-.2-1.4-.6-.4-.4-.6-.9-.6-1.4 0-.8.3-1.5 1-2.1.7-.6 2.1-1.4 4.3-2.4v-1c0-.8 0-1.2-.1-1.4-.1-.2-.2-.4-.5-.5-.2-.1-.5-.2-.8-.2-.5 0-.9.1-1.1.3-.2.1-.3.3-.3.4 0 .1.1.3.3.6.3.3.4.6.4.9 0 .4-.1.6-.4.9-.3.3-.6.4-1 .4-.5 0-.8-.1-1.1-.4-.3-.3-.5-.6-.5-1 0-.5.2-1 .6-1.5.4-.5 1-.8 1.7-1.1.7-.2 1.5-.4 2.3-.4 1 0 1.7.2 2.3.6.5.4.9.8 1.1 1.3.1.3.1 1 .1 2.1v4.8c0 .1.1.2.2.3.1.1.1.1.2.1.2 0 .4-.1.6-.4l.3.3c-.4.5-.7.9-1.1 1.2-.4.2-.8.4-1.3.4-.6 0-1-.1-1.3-.4-.3-.3-.6-.8-.6-1.4Zm0-.7v-3.4c-.9.5-1.5 1.1-1.9 1.6-.3.4-.4.8-.4 1.2 0 .3.1.6.4.9.2.2.4.3.8.3.2 0 .6-.2 1.1-.6ZM244.6 102.1v1.3c.5-.6 1-1 1.5-1.2.5-.2 1-.4 1.5-.4.6 0 1.2.2 1.6.5.4.3.7.8.9 1.4.1.4.2 1.2.2 2.4v3.9c0 .8.1 1.3.2 1.4.1.1.4.3.9.4v.4h-5.1v-.4c.4-.1.6-.2.8-.5.1-.2.2-.6.2-1.3v-4.5c0-.8 0-1.3-.1-1.6-.1-.3-.2-.4-.3-.5-.1-.1-.3-.2-.5-.2-.6 0-1.2.4-1.7 1.3v5.4c0 .8.1 1.2.2 1.4.1.2.4.3.8.4v.4h-5.1v-.4c.4 0 .7-.2.9-.4.1-.2.2-.6.2-1.4v-5.7c0-.8-.1-1.2-.2-1.4-.1-.2-.4-.3-.9-.4v-.4l4 .1ZM262.5 97.6v11.6c0 .8 0 1.2.1 1.4.1.2.2.4.3.5.2.1.4.2.8.2v.4l-4.2.8v-1.6c-.5.6-1 1-1.4 1.3-.4.3-.9.3-1.4.3-1.3 0-2.3-.6-3-1.7-.6-.9-.9-2.1-.9-3.4 0-1.1.2-2.1.6-2.9.4-.8.9-1.5 1.5-1.9.6-.4 1.3-.7 2.1-.7.5 0 .9.1 1.3.3.4.2.8.5 1.2 1v-3c0-.8 0-1.2-.1-1.4-.1-.2-.2-.4-.4-.5-.2-.1-.5-.1-1-.1v-.4l4.5-.2Zm-3 6.8c-.5-1-1.2-1.5-1.9-1.5-.3 0-.5.1-.7.2-.3.2-.5.6-.6 1.2-.2.6-.2 1.4-.2 2.6 0 1.3.1 2.2.3 2.8.2.6.4 1.1.8 1.3.2.1.4.2.7.2.6 0 1.2-.5 1.8-1.5v-5.3h-.2ZM275.8 98.4v6h.4c.6 0 1.2-.1 1.6-.3.4-.2.8-.5 1-1 .3-.5.5-1.1.5-1.9h.4v7.3h-.4c-.1-1.4-.5-2.3-1.1-2.7-.6-.4-1.3-.7-2.1-.7h-.4v4.5c0 .8 0 1.2.1 1.4.1.2.2.4.5.5.2.1.6.2 1 .2h.5v.4h-7.6v-.4h.5c.4 0 .8-.1 1-.2.2-.1.3-.3.4-.5.1-.2.1-.6.1-1.4V100c0-.7 0-1.2-.1-1.4-.1-.2-.2-.4-.5-.5-.2-.1-.6-.2-1-.2h-.5v-.4h12.3v4.2h-.4c-.1-1-.4-1.7-.8-2.2-.4-.5-1-.8-1.8-1-.4-.1-1.2-.2-2.4-.2l-1.2.1ZM288.7 101.8c.9 0 1.7.2 2.4.7.7.5 1.3 1.1 1.7 1.9.4.8.6 1.7.6 2.7 0 1.4-.4 2.6-1.1 3.6-.9 1.2-2.1 1.7-3.6 1.7s-2.7-.5-3.5-1.6c-.8-1.1-1.2-2.3-1.2-3.7 0-1.4.4-2.7 1.2-3.8.9-1 2-1.5 3.5-1.5Zm0 .7c-.4 0-.7.1-.9.4-.3.3-.4.8-.5 1.6-.1.8-.1 1.9-.1 3.4 0 .8 0 1.5.1 2.1.1.5.2.9.5 1.2.3.3.5.4.9.4.3 0 .6-.1.8-.3.3-.2.5-.6.6-1 .1-.7.2-2.1.2-4.1 0-1.2-.1-2.1-.2-2.5-.1-.5-.3-.8-.6-1-.3-.1-.5-.2-.8-.2ZM299.1 102.1v2.3c.7-1 1.2-1.7 1.8-2.1.5-.3 1-.5 1.5-.5.4 0 .7.1 1 .4.3.3.4.6.4 1.1 0 .5-.1.9-.4 1.1-.2.3-.5.4-.8.4-.4 0-.7-.1-1-.4-.3-.2-.4-.4-.5-.4-.1 0-.1-.1-.2-.1-.2 0-.4.1-.6.2-.3.2-.5.6-.7 1-.2.7-.3 1.5-.3 2.3v2.9c0 .4 0 .7.1.8.1.2.2.3.4.4.2.1.5.1.9.2v.4H295v-.4c.4 0 .7-.2.9-.4.1-.2.2-.7.2-1.6v-5.6c0-.6 0-.9-.1-1.1-.1-.2-.2-.4-.3-.4-.1-.1-.4-.2-.7-.2v-.4l4.1.1ZM312.8 106.7h-5.5c.1 1.3.4 2.4 1.1 3.2.5.6 1.1.9 1.8.9.4 0 .8-.1 1.2-.4.4-.3.7-.7 1.1-1.3l.4.2c-.5 1.1-1.1 1.9-1.8 2.4s-1.4.7-2.3.7c-1.5 0-2.6-.6-3.4-1.7-.6-.9-.9-2.1-.9-3.4 0-1.7.5-3 1.4-4 .9-1 2-1.5 3.2-1.5 1 0 1.9.4 2.6 1.2.6.9 1 2.1 1.1 3.7Zm-2.6-.7c0-1.1-.1-1.9-.2-2.4s-.3-.8-.6-1c-.1-.1-.4-.2-.6-.2-.4 0-.7.2-.9.6-.4.6-.6 1.5-.6 2.6v.4h2.9ZM320.4 101.8l.2 3.4h-.4c-.4-1-.9-1.7-1.4-2.1-.5-.4-.9-.6-1.4-.6-.3 0-.5.1-.8.3-.3.2-.3.4-.3.7 0 .2.1.4.2.6.2.3.9.8 1.9 1.5 1 .7 1.8 1.3 2.1 1.8.3.5.5 1.1.5 1.7 0 .6-.1 1.1-.4 1.6-.3.5-.7.9-1.2 1.2-.5.3-1.1.4-1.7.4-.5 0-1.1-.1-1.9-.4-.2-.1-.4-.1-.4-.1-.2 0-.4.2-.6.5h-.4l-.2-3.6h.4c.3.9.8 1.6 1.3 2.1.6.5 1.1.7 1.6.7.3 0 .6-.1.8-.3.2-.2.3-.5.3-.8 0-.3-.1-.6-.3-.9-.2-.2-.7-.6-1.4-1.1-1.1-.8-1.8-1.3-2.1-1.7-.5-.6-.7-1.2-.7-1.9 0-.8.3-1.5.8-2.1.5-.6 1.3-.9 2.3-.9.5 0 1.1.1 1.6.4.2.1.4.2.5.2.1 0 .2 0 .3-.1.1-.1.2-.2.4-.5h.4ZM326.6 98.4v3.7h2.4v1.1h-2.4v6.2c0 .6 0 1 .1 1.1 0 .2.1.3.3.4.1.1.3.2.4.2.5 0 .9-.4 1.3-1.1l.3.2c-.6 1.4-1.5 2.1-2.8 2.1-.6 0-1.2-.2-1.6-.5-.4-.3-.7-.8-.8-1.2-.1-.2-.1-.9-.1-2v-5.4h-1.3v-.4c.9-.6 1.7-1.3 2.3-2 .6-.7 1.2-1.5 1.7-2.4h.2ZM334.1 102.1v2.3c.7-1 1.2-1.7 1.8-2.1.6-.4 1-.5 1.5-.5.4 0 .7.1 1 .4.3.3.4.6.4 1.1 0 .5-.1.9-.4 1.1-.2.3-.5.4-.8.4-.4 0-.7-.1-1-.4-.3-.2-.4-.4-.5-.4-.1 0-.1-.1-.2-.1-.2 0-.4.1-.6.2-.3.2-.5.6-.7 1-.2.7-.3 1.5-.3 2.3v2.9c0 .4 0 .7.1.8.1.2.2.3.4.4.2.1.5.1.9.2v.4H330v-.4c.4 0 .7-.2.9-.4.1-.2.2-.7.2-1.6v-5.6c0-.6 0-.9-.1-1.1-.1-.2-.2-.4-.3-.4-.1-.1-.4-.2-.7-.2v-.4l4.1.1ZM344.3 112.5l-3.2-7.4c-.5-1.1-.9-1.8-1.1-2.1-.2-.3-.5-.4-.8-.5v-.4h5.3v.4c-.4 0-.6.1-.7.2-.1.1-.2.3-.2.4 0 .3.2.8.5 1.6l1.7 3.9 1.2-3c.4-1.1.6-1.8.6-2.3 0-.3-.1-.5-.3-.6-.2-.2-.5-.2-.9-.3v-.4h3.4v.4c-.3 0-.6.2-.8.4-.2.2-.5 1-1 2.2l-2.9 7.4c-.7 1.9-1.3 3-1.6 3.4-.5.6-1.1.9-1.9.9-.6 0-1.1-.2-1.4-.5-.4-.3-.5-.8-.5-1.2 0-.4.1-.8.4-1 .3-.2.6-.4.9-.4.4 0 .6.1.9.3.3.2.3.6.3 1.1 0 .3 0 .4.1.5.1.1.1.1.2.1.2 0 .4-.1.5-.3.3-.3.6-1 1-2.1l.3-.7ZM43.1 74.6l-.3.3.3-.3ZM46.7 50.8c0-.3-.3-.6-.6-.6s-.6.3-.6.6.3.6.6.6.6-.3.6-.6ZM54.2 47l8.6 5.1c.2.2.5.3.8.3.3 0 .5-.1.7-.3l8.7-5.2c1-.5 1.8-2 1.8-3.7V25.1H52.5v18.1c0 1.8.7 3.3 1.7 3.8Zm5.7-9.2H58v-4.4h1.9v4.4Zm-1.3-6.4h.4l.2-.4.2.4h.4l-.2.3.3.3-.3.1v.4l-.3-.2-.3.2v-.4l-.5-.1.3-.3-.2-.3Zm8.8-5.6h6.8v12h-6.8v-12Zm0 12.6h6.8v5.1c-.1 1.3-.6 2.4-1.4 3l-5.3 3.2c-.1-.1-.1-11.3-.1-11.3Zm-6.9-12.6h6.3v12h-6.3v-12Zm0 12.6h6.3V50l-2.5 1.5c-.2.1-.4.2-.7.2-.3 0-.5-.1-.7-.2L60.5 50V38.4ZM58 25.8h1.9v4.6H58v-4.6Zm-1.9 1.1h.4l.2-.4.2.4h.4l-.2.3.3.3-.3.1v.4l-.3-.2-.4.2v-.4l-.4-.1.3-.3-.2-.3ZM56 31c.7 0 .5.6.6.6.1 0 0-.6.4-.6.6 0 1.4 1.7.7 1.7-.3 0-.1-.2-.1-.3 0-.1-.2-.2-.2-.2-.2 0-.3.3-.5.4-.1 0-.2 0-.2-.1s.3-.2.4-.3c-1.4 0-1.5.7-1.7.7-.4 0 .3-.7.5-.9-.3-.1-.5-.4-.8-.6.2-.2.2-.1.4 0 .1-.2.2-.4.5-.4Zm0 5.5.3-.3-.2-.3h.4l.2-.4.2.4h.4l-.2.3.3.3-.3.1v.4l-.3-.2-.3.2v-.4l-.5-.1Zm-2.9-10.7h2.3v4.6h-2.3v-4.6Zm.3 6.2.3-.3-.2-.3h.4l.2-.4.2.4h.4l-.2.3.3.3-.3.1v.4l-.3-.2-.3.2v-.4l-.5-.1Zm-.3 1.4h2.3v4.4h-2.3v-4.4Zm0 5h6.8v11.2l-5.3-3.2c-.9-.6-1.3-1.7-1.4-3-.1 0-.1-5-.1-5Z" />
 			<path d="M55 44.4c.5 0 .4-.3.4-.5 0 .2.2-.1.2.3s-.4.2-.4.6c0 .5.7 0 .7.5 0 .7-.1.7-.1.9 0 .2.8-.2.7-.3.2.1.2.6.5.6.2 0 .3-.5.4-.6-.1 0 .7.5.7.3 0-.7-.3-.4-.3-.8s.9-.3.8-.6c-.1-.2-.2-.1-.3-.4 0 .1-.7-1.1.2-.5.9.6 1-1.4 1-1.5 0-.1-.4.1-.6.2.1-.2.5-.7.7-.9 0-.3-.4 0-.8.2 1.3-1.8.5-1.1-.2-.9 1.1-1.2.8-1.2 0-.8.7-.5.8-1.1.7-1.3-.6.8-1.2.7-1.2 1.5 0 .5-.2 1.3-.4 1.6-.3.4-.1-1.3-.9-1.3-.3 0-.9 0-1.1.3.2 0 .4.4.4.6 0 .2.2.7-.1.7-.3 0-.6-.6-.6-.9v-.7c0-.7-1.2-1.7-1.7-1.7 0 .5.7.6.7 1.3-.3 0-.7-.5-.7-.2s.4.4.4.7c0 .3-.5-.1-.5.2 0 .3.3.2.3.5-.2-.1-.4 0-.4.1s.1.2.2.3c-.1.1-.1.2-.1.6-.1 1.3.7 1.9 1.4 1.9ZM83.4 47.2c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7-.4 0-.7.3-.7.7-.1.4.3.7.7.7ZM79.7 48.4c0 .4.3.7.7.7.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7-.4 0-.7.3-.7.7ZM45.1 51.8c-.4 0-.7.3-.7.7 0 .3.3.7.7.7.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7ZM47.4 53.3c.4 0 .7-.3.7-.7 0-.4-.3-.6-.7-.6-.4 0-.7.3-.7.7-.1.3.3.6.7.6ZM111.5 27.3c.8-1.5.6-3.6-.5-4.9-.3-.3-.1-.9-.6-1-.7 1.7-.1 3.5.7 5 .1.3 0 .9.4.9ZM17.3 27.2c.2 0 .2.3.3.2-.2-.9-.2-2.2 0-3.1-.2-.8-.5-1.5-1.2-1.9-.1-.1-.3 0-.4.1.5 1.4-.2 3.6 1.3 4.7ZM113.8 25.4c.3-.2.7-.6.5-1.1-.2-.3-.6-.4-1-.4-.4.2-.6.6-.5 1 .3.4.7.6 1 .5ZM14.8 26.9c.3-.2.4-.5.5-.9-.1-.3-.4-.4-.7-.5-.3 0-.6.1-.7.3-.1.3-.1.6.2.8.1.3.4.3.7.3ZM114.8 27.7c.4.2.8 0 1.1-.3.1-.2.1-.4 0-.6-.2-.2-.5-.4-.8-.4-.3.1-.6.4-.7.7 0 .2.1.5.4.6ZM112.8 27.9c.4.1.6-.2.8-.4 0-.2.3-.6 0-.8-.2-.1-.4-.3-.7-.2-.4.1-.6.5-.6.9.1.4.3.4.5.5ZM110.3 28.4c.5-.1.5-.6.5-1.1-.2-.2-.5-.4-.8-.4-.4.2-.6.5-.6.9.1.4.4.8.9.6ZM19 28.4c.2-.2.6-.4.5-.8-.2-.4-.7-.7-1.1-.3-.1.2-.4.5-.2.8.2.1.5.4.8.3ZM16.7 28.4c.3-.1.4-.4.4-.8-.2-.3-.4-.7-.9-.5-.3.2-.5.5-.3.9.2.3.5.5.8.4ZM101.7 32.9c.6-.5.3-1.5.4-2.2-.1-1-.4-2-.8-2.8-.1-.2-.1-.6-.4-.5-.2 1.3-.9 2.9-.2 4.3.4.3.4 1 1 1.2ZM14.4 27.8c-.3.2-.5.5-.5.9.2.3.5.7 1 .6.3-.3.6-.5.5-1-.2-.4-.6-.5-1-.5ZM107.7 33.2c.4-1.3.3-2.6-.2-3.8-.4-.2-.6-.8-.6-1.2-.1-.2-.3-.5-.5-.3-.3.7-.5 1.4-.5 2.2.3 1.1 1.1 2.1 1.6 3.2l.2-.1ZM111.4 28.3c-.3.2-.6.6-.4.9.1.4.5.6.9.5.4-.1.6-.6.6-.9-.3-.4-.7-.8-1.1-.5ZM16.6 30.7c.3-.1.6-.4.6-.8-.1-.4-.4-.6-.8-.7-.2.1-.5.1-.6.3-.2.3-.1.6 0 .9.3.1.5.5.8.3ZM17.6 30.1c.2.3.4.6.9.5.2-.2.6-.4.4-.8-.2-.3-.4-.7-.9-.6-.2.2-.5.5-.4.9ZM112.6 31.2c.1-.5.9-1 .9-1.5-1.2.3-2.3 1-3.2 2-.4.7-1.1 1.4-1.1 2.2.4 0 .7-.3.9-.5 1.1-.4 2.1-1.2 2.5-2.2ZM17.8 33.5c.2 0 .3-.2.3-.4-.7-.6-1-1.2-1.6-1.8-.5-.7-1.2-.8-1.9-1.3-.3 0-.8-.3-.9.1.9 1.3 2.2 3.3 4.1 3.4ZM110.3 36.4c.4.3.9-.2 1.3-.3 1.5-.8 2.3-2.6 2.4-4.2h-.3c-1.3 1.4-2.6 2.8-3.4 4.5ZM105.9 34.1c.5-.2.8-.6.7-1.1-.2-.2-.3-.4-.6-.5-.2 0-.4 0-.5.1-.4.1-.6.5-.5.9.2.3.5.6.9.6ZM16.4 35.2c-.7-.6-1.4-1.3-2.1-1.8-.8-.2-1.5-.6-2.4-.5-.3.1-.8 0-.8.4 1.4.4 2.3 1.5 3.6 2 .6-.1 1.2.2 1.7-.1ZM24.9 34.9c.3-.2.6-.4.6-.9-.1-.4-.5-.4-.8-.5-.3.2-.7.5-.5.9.2.4.4.4.7.5ZM22.2 35.1c.2.3.7.1.9-.1.1-.3.1-.7-.2-.9-.3-.3-.8-.1-1 .2-.2.2.1.5.3.8ZM106.1 34.7c-.3.1-.5.3-.6.6 0 .5.5.6.9.7.3-.2.7-.5.5-.9-.1-.2-.4-.5-.8-.4ZM107.8 35.6c.1.4.5.6.9.5.1-.2.2-.2.4-.3.3-.2 0-.5-.1-.7-.2-.2-.4-.4-.7-.3-.3.2-.6.4-.5.8ZM11.8 35.5c.1.2.2.4.3.5.5.2.9 0 1-.5-.1-.4-.5-.6-.9-.7-.2.2-.3.4-.4.7ZM24.8 36.4c.2.3.5.6.9.6.3-.2.6-.4.7-.7-.2-.4-.6-.8-1-.6-.4 0-.6.4-.6.7ZM22.8 36.1c-.1.4.2.6.4.8.4.2.7-.1 1-.3.1-.2 0-.5-.1-.6-.2-.2-.4-.3-.7-.3-.3 0-.5.3-.6.4ZM114.2 35.8c-.3.1-.5.2-.7.5 0 .2-.1.5.2.6.2.2.6.3.9.2.2-.1.5-.4.5-.7-.3-.3-.5-.5-.9-.6ZM116.7 37.4c.4 0 .6-.3.7-.7-.1-.4-.6-.6-1-.4-.2.1-.4.3-.4.6.1.4.5.5.7.5ZM16.9 36.8c-.2.2-.6.1-.7.4-.2.3 0 .6.2.8.2.2.5.3.7.2.4-.2.5-.5.5-.9-.1-.3-.3-.4-.7-.5ZM19.2 38.3c.1-.2.4-.3.3-.7-.2-.5-1-.8-1.3-.2-.3.3 0 .7.3.9.3.2.5.1.7 0ZM111.8 37.1c-.3.2-.5.4-.4.8.1.3.4.6.8.5.2-.2.6-.5.5-.9-.2-.4-.6-.4-.9-.4ZM114.4 38.1c-.1.3-.1.6.2.8.2.2.6.2.9.2.4-.2.4-.6.4-1-.2-.1-.3-.3-.6-.5-.4-.1-.7.2-.9.5ZM15 38.6c0 .2-.2.6.1.8.2.1.5.2.8.1.1-.2.5-.2.3-.6-.2-.5-.9-.9-1.2-.3ZM108.7 39c.5.3 1.1.5 1.6.9.8.8 2.2.6 3.2.2 0-.1.1-.3 0-.4-1.2 0-2.1-1.1-3.3-1.3-.6.1-1.3.1-1.5.6ZM16.9 39.1c-.2.3-.1.8.3 1 .2.1.5.2.7-.1.1-.2.3-.3.2-.7-.3-.4-.8-.7-1.2-.2ZM21.1 40.4c.3-.2.5-.5.4-.9-.3-.4-1-.8-1.3-.2-.3.3 0 .6.2.9.2.1.4.3.7.2ZM64.8 47.6c.6-.3 1.2-.7 1.5-1.3 0-.6.2-1.4-.2-2-.4-.6-.6-1.4-.8-2.2-.2-1.1 1.1-.2 1.2-.9-.4-.4-.9-1.2-1.6-.6-.4.3-.6.8-.4 1.3.2 1 .6 1.9.7 2.9-.2-.1-.4-.3-.6-.5-.8-1-2.2-.7-3.1-1.6-1.1.1.7 1.2-.6 1.4 0 .3.3.4.3.7-.1.1-.3.1-.4.2 0 .7.4 1.3.6 1.9.7 1.2 2.3.6 3.4.7ZM24.5 41.8c.2-.2.5-.4.4-.8-.2-.3-.5-.4-.7-.4-.2.2-.5.4-.4.8.1.1.3.5.7.4ZM48.3 41.5c-.4 1.5-1.2 3.6-.2 5 .4 0 .3-.5.3-.8.8-1.3.9-2.9.5-4.4-.1-.4-.5-.2-.6.2ZM82.4 45.7c.5-1.1.5-2.6-.1-3.7-.2-.3-.1-1-.7-.9 0 .8-.3 1.4-.5 2.1.1 1 .5 1.9.9 2.8l.4-.3ZM23.1 44.1c1.2.2 2.5 0 3.5-.7.4-.3 1.1-.4 1.3-.9-.1-.2-.3-.1-.3-.3-1.9-.4-3.4.5-4.5 1.9ZM14.6 47.8c-.9-1.4-1.2-2.8-2.7-3.8-.2 0-.4 0-.4.2 0 1.7.9 3.4 2.4 4 .4-.1.7.4 1.1.2.1-.4-.3-.5-.4-.6ZM80.4 46c.3-.1.4-.5.3-.9-.2-.3-.7-.5-1.1-.2-.1.2-.3.3-.2.6.3.4.6.7 1 .5ZM111.7 50.1c2.2-.6 3.5-2.6 4.8-4.4-.3-.2-.7 0-1.1.2-2.1.5-2.8 2.7-4.1 4.1.1.2.2.1.4.1ZM9.6 48.2c.3 0 .2-.4.4-.6-.1-.4-.4-.5-.7-.7-.3.1-.7.5-.5.9.2.3.5.5.8.4ZM16.3 47.5c1.2 1.2 2.8 1.7 4.5 1.1.2-.1.6-.1.5-.4-1.3-1-3.2-.7-4.8-1.1-.2 0-.2.2-.2.4ZM10.7 48.1c.2.2.3.4.5.5.4.1.7 0 1-.3 0-.2 0-.4-.1-.6-.2-.2-.4-.3-.7-.3-.3.1-.6.3-.7.7ZM47.7 47.5c-.3.1-.4.5-.3.8.2.2.5.4.8.3.2-.2.6-.4.5-.8-.1-.3-.7-.3-1-.3ZM116.5 48.1c-.1.3.1.4.2.6.2.1.5.2.7.1.3-.2.6-.4.5-.8-.2-.2-.4-.2-.6-.4-.3 0-.7.1-.8.5ZM119.6 49c.2.1.6 0 .7-.2.2-.3.4-.6.2-.9-.3 0-.5-.4-.9-.2-.2.1-.6.3-.6.7.1.2.4.4.6.6ZM7.5 49.8c.2.1.4-.1.6-.2.1-.2.3-.4.3-.7-.1-.3-.5-.5-.8-.6-.4.1-.6.4-.7.8.1.4.3.6.6.7ZM89.2 49.1c-.1.4.2.6.4.8.4.2.7-.1.9-.4V49c-.3-.5-1-.4-1.3.1ZM13.7 48.8c-.3.2-.3.6-.3.9.2.2.3.5.7.4.4-.1.5-.3.5-.6 0-.4-.4-.8-.9-.7ZM9.5 50c.2.4.6.7 1 .6.2-.2.5-.5.4-.9-.2-.2-.4-.6-.7-.6-.4.1-.7.5-.7.9ZM92.6 50.5c.4-.2.5-.6.4-.9-.2-.3-.4-.4-.8-.4-.5.1-.5.5-.7.8.3.3.6.7 1.1.5ZM12.5 50.3c.1-.2.3-.3.2-.6-.1-.3-.3-.6-.7-.6-.3.2-.5.3-.5.8 0 .3.3.4.5.6.2.1.3-.2.5-.2ZM114.3 49.7c-.1.2-.2.6 0 .7.2.1.4.4.7.3.3-.2.6-.3.7-.6.1-.8-1-1.1-1.4-.4ZM117.3 50c-.3.5.1.8.5.9.4 0 .8-.2.9-.7-.1-.4-.5-.8-.9-.6-.2.1-.3.2-.5.4ZM99.4 50c-.4.2-.6.6-.6 1 .2.2.5.3.7.3.3-.2.8-.4.6-.9-.1-.2-.3-.4-.7-.4ZM88.3 51c-.1.4.1.6.4.8.3.2.7-.2.9-.3 0-.1.1-.4-.1-.5-.2-.5-1-.4-1.2 0ZM91 50.8c-.2 0-.4.2-.5.3-.1.2 0 .4 0 .6.3.1.6.4.9.1.3-.2.3-.3.3-.6-.1-.3-.5-.3-.7-.4ZM25.4 52c0-.2.3-.5.1-.8-.2-.2-.4-.3-.8-.4-.3 0-.3.3-.5.3-.1.3-.1.8.3 1 .3.3.7.1.9-.1ZM103.8 52.1c.3-.1.7-.2.6-.6-.3-.3-.6-.7-1.2-.5-.1.2-.3.3-.3.6.2.3.4.6.9.5ZM101.4 51c-.3.1-.4.3-.6.5 0 .2 0 .5.2.6.2.2.6.3.9.2.2-.2.6-.4.4-.8-.2-.4-.5-.5-.9-.5ZM119.9 51.9l-.1-.1c-1.7-.1-3.4-1.4-5.1-.3-.3.2-.9 0-1 .5 1.6.6 3.7 1.3 5.3.3.2-.1.9.1.9-.4ZM8 52.6c1.7.6 3.6 0 5-.9l.2-.3-.2-.1c-1.9-.3-3.8 0-5.2 1.1l.2.2ZM108.4 51.7c-.2-.4-.6-.4-.9-.4-.3.1-.6.4-.5.8.1.4.6.6 1 .4.2-.2.4-.5.4-.8ZM19.7 52.6c.4-.2.3-.5.5-.8-.2-.3-.6-.7-1-.5-.2.2-.5.3-.4.8 0 .3.5.7.9.5ZM16.4 52.8c.2.1.6.1.8-.1.1-.2.3-.3.2-.6-.1-.4-.4-.6-.8-.6-.3.1-.4.2-.6.4-.1.4.1.7.4.9ZM111.1 53c-.1-.3-.4-.6-.7-.6-.2.1-.4.1-.5.2-.2.2-.3.5-.2.8.2.2.4.4.7.4.4-.2.6-.5.7-.8ZM13.4 54.9c.3-.6.7-1 .9-1.7 0-.2.3-.3.2-.7l-.1-.1c-1.6.7-2.8 1.8-3.9 3.3l.2.3c.9-.2 2-.2 2.7-1.1ZM108.6 54.1c.3-.2.7-.3.6-.8-.1-.3-.5-.6-.9-.5-.2.2-.6.3-.5.8.1.3.4.5.8.5ZM18 53c-.4.1-.5.6-.4.9.2.3.5.4.9.4.2-.2.5-.3.6-.8-.1 0-.2-.1-.1-.2-.1-.3-.6-.3-1-.3ZM117.6 55.3c.3-.2.7-.4.5-.9-.2-.3-.6-.5-.9-.4-.4.1-.5.6-.9.6-.6-.7-1.6-1.6-2.7-1.5-.4.3.3.6.5.9.5 1.2 1.7 2 2.8 2.4.1.1.4.1.5 0 0-.3-.3-.6-.5-.8-.1-.5.5-.1.7-.3ZM120 54.1c.1-.2.2-.6 0-.8-.3-.2-.5-.3-.9-.3-.3.1-.4.3-.6.5-.1.3.1.5.3.7.4.1 1 .3 1.2-.1ZM102.5 53.3c0 .3.3.5.4.6.5 1.6 2.2 2.4 3.6 3.1.1 0 .3 0 .4-.1-.2-.5-.5-1.1-.9-1.6-.2-.4-.5-.6-.7-1-.8-.4-1.8-1.1-2.8-1ZM15.5 54.5c.2.2.5.4.9.3.2-.2.5-.4.3-.8-.2-.2-.4-.5-.7-.5-.2.2-.7.5-.5 1ZM109.4 54.6c-.2.2 0 .5 0 .7.3.3.6.2.9.1.1-.2.4-.3.4-.6-.2-.3-.8-.7-1.3-.2ZM119.9 56.4c.3-.2.7-.5.6-1-.2-.2-.3-.3-.5-.4-.4-.2-.7 0-1 .3 0 .3-.2.5 0 .8.2.2.5.4.9.3ZM93.5 60.8c-1.9-.6-3.9-.1-5.3 1.1v.2c1.4 0 2.9 0 4.1-.6.3-.3 1.2-.2 1.2-.7ZM36 63.2c.3-.1.6-.3.6-.7-.1-.3-.4-.6-.7-.6-.3.2-.7.4-.5.9.1.2.4.4.6.4ZM91.4 63.6c.3.2.5.3.9.3.4-.2.5-.6.6-.9-.3-.7-1.3-.7-1.6 0 0 .2-.1.4.1.6ZM100.6 62.9c-2-.2-4.4-.2-5.6 1.4l.2.2h2.1c1.3 0 2.4-.8 3.4-1.4l-.1-.2ZM24.9 63.6c-.3.2-.5.6-.3.9.2.3.4.4.8.3.3-.1.5-.4.5-.8-.1-.2-.5-.7-1-.4ZM27.2 64c-.1.2-.3.1-.5.3-.1.2 0 .5.2.7.2.2.5.1.7 0 .1-.2.3-.3.2-.5 0-.3-.3-.4-.6-.5ZM11.5 68.1c.4.2 1 .8 1.4.3-.9-1.2-1.2-2.4-2.5-3.2-.3-.1-.6-.3-.8-.4-.3.1-.6-.4-.8 0 1.4 1 1.4 2.5 2.7 3.3Z" />
diff --git a/packages/react/src/app-layout/AppLayout.stories.tsx b/packages/react/src/app-layout/AppLayout.stories.tsx
index 55d060777b95..57ee5a721aaa 100644
--- a/packages/react/src/app-layout/AppLayout.stories.tsx
+++ b/packages/react/src/app-layout/AppLayout.stories.tsx
@@ -56,8 +56,8 @@ function AppLayoutTemplate({
 						dropdown: (
 							<ExampleAccountDropdown
 								businesses={businesses}
-								selectedBusinessName={businessName}
 								onBusinessChange={setBusinessName}
+								selectedBusinessName={businessName}
 							/>
 						),
 					}}
diff --git a/packages/react/src/app-layout/AppLayout.test.tsx b/packages/react/src/app-layout/AppLayout.test.tsx
index a69518cb26ad..1e78ea250a54 100644
--- a/packages/react/src/app-layout/AppLayout.test.tsx
+++ b/packages/react/src/app-layout/AppLayout.test.tsx
@@ -36,23 +36,23 @@ function renderAppLayout({
 	return render(
 		<AppLayout focusMode={focusMode}>
 			<AppLayoutHeader
-				id="header"
-				href="#"
-				logo={<Logo />}
-				heading="Export Service"
-				subLine="Supporting Australian agricultural exports"
-				badgeLabel="Beta"
 				accountDetails={{
 					name: exampleData.userNames.regular,
 					secondaryText: 'My account',
 					dropdown: (
 						<ExampleAccountDropdown
 							businesses={businessList}
-							selectedBusinessName={businessName}
 							onBusinessChange={jest.fn()}
+							selectedBusinessName={businessName}
 						/>
 					),
 				}}
+				badgeLabel="Beta"
+				heading="Export Service"
+				href="#"
+				id="header"
+				logo={<Logo />}
+				subLine="Supporting Australian agricultural exports"
 			/>
 			<AppLayoutSidebar
 				activePath={activePath}
@@ -60,15 +60,15 @@ function renderAppLayout({
 			/>
 			<AppLayoutContent>
 				<main
+					css={{ '&:focus': { outline: 'none' } }}
 					id="main-content"
 					tabIndex={-1}
-					css={{ '&:focus': { outline: 'none' } }}
 				>
 					<p>Page content</p>
 				</main>
 				<AppLayoutFooter>
 					<nav aria-label="footer">
-						<LinkList links={[{ label: 'Home', href: '/' }]} horizontal />
+						<LinkList horizontal links={[{ label: 'Home', href: '/' }]} />
 					</nav>
 					<AppLayoutFooterDivider />
 					<Text fontSize="xs" maxWidth={tokens.maxWidth.bodyText}>
diff --git a/packages/react/src/app-layout/AppLayoutContent.tsx b/packages/react/src/app-layout/AppLayoutContent.tsx
index 9a44ff7a821f..b83d19e857c5 100644
--- a/packages/react/src/app-layout/AppLayoutContent.tsx
+++ b/packages/react/src/app-layout/AppLayoutContent.tsx
@@ -6,10 +6,10 @@ export type AppLayoutContentProps = PropsWithChildren<{}>;
 export function AppLayoutContent({ children }: AppLayoutContentProps) {
 	return (
 		<Flex
-			flexDirection="column"
 			// `min-width: 0` Fixes wide elements (like large tables) not respecting the width of their container
 			// https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child
 			css={{ minWidth: 0 }}
+			flexDirection="column"
 		>
 			{children}
 		</Flex>
diff --git a/packages/react/src/app-layout/AppLayoutFooter.stories.tsx b/packages/react/src/app-layout/AppLayoutFooter.stories.tsx
index 43634d84df59..3c426299ab0d 100644
--- a/packages/react/src/app-layout/AppLayoutFooter.stories.tsx
+++ b/packages/react/src/app-layout/AppLayoutFooter.stories.tsx
@@ -14,6 +14,7 @@ const meta: Meta<typeof AppLayoutFooter> = {
 			<AppLayoutFooter {...props}>
 				<nav aria-label="footer">
 					<LinkList
+						horizontal
 						links={[
 							{ label: 'Home', href: '/' },
 							{
@@ -29,7 +30,6 @@ const meta: Meta<typeof AppLayoutFooter> = {
 								href: 'https://github.com/agriculturegovau/agds-starter-kit',
 							},
 						]}
-						horizontal
 					/>
 				</nav>
 				<AppLayoutFooterDivider />
diff --git a/packages/react/src/app-layout/AppLayoutFooter.tsx b/packages/react/src/app-layout/AppLayoutFooter.tsx
index ff2364cfb764..d63e80f047bb 100644
--- a/packages/react/src/app-layout/AppLayoutFooter.tsx
+++ b/packages/react/src/app-layout/AppLayoutFooter.tsx
@@ -27,12 +27,12 @@ export function AppLayoutFooter({
 		>
 			<Content>
 				<Stack
-					paddingY={3}
-					width="100%"
-					gap={1.5}
+					borderColor="muted"
 					borderTop
 					borderTopWidth="xl"
-					borderColor="muted"
+					gap={1.5}
+					paddingY={3}
+					width="100%"
 				>
 					{children}
 				</Stack>
@@ -44,7 +44,7 @@ export function AppLayoutFooter({
 export function AppLayoutFooterDivider() {
 	return (
 		<hr
-			aria-hidden="true"
+			aria-hidden
 			css={{
 				boxSizing: 'content-box',
 				height: 0,
diff --git a/packages/react/src/app-layout/AppLayoutHeader.stories.tsx b/packages/react/src/app-layout/AppLayoutHeader.stories.tsx
index 3e6b4d4910d5..e720fbe4de70 100644
--- a/packages/react/src/app-layout/AppLayoutHeader.stories.tsx
+++ b/packages/react/src/app-layout/AppLayoutHeader.stories.tsx
@@ -11,8 +11,8 @@ const accountDetails = {
 	dropdown: (
 		<ExampleAccountDropdown
 			businesses={exampleData.businessNames.regular}
-			selectedBusinessName={exampleData.businessNames.regular[0]}
 			onBusinessChange={console.log}
+			selectedBusinessName={exampleData.businessNames.regular[0]}
 		/>
 	),
 };
@@ -53,7 +53,7 @@ export const BodyBackground: Story = {
 
 export const FocusMode: Story = {
 	render: (props) => (
-		<AppLayout focusMode={true}>
+		<AppLayout focusMode>
 			<AppLayoutHeader {...props} />
 		</AppLayout>
 	),
diff --git a/packages/react/src/app-layout/AppLayoutHeaderAccount.tsx b/packages/react/src/app-layout/AppLayoutHeaderAccount.tsx
index eb96248adbf5..7113d58fc9b1 100644
--- a/packages/react/src/app-layout/AppLayoutHeaderAccount.tsx
+++ b/packages/react/src/app-layout/AppLayoutHeaderAccount.tsx
@@ -44,10 +44,6 @@ export function AppLayoutHeaderAccount({
 				focusRingFor: 'keyboard',
 			})}
 			alignItems="center"
-			flexShrink={0}
-			gap={0.5}
-			minHeight="5.25rem"
-			textAlign="right"
 			css={mq({
 				marginLeft: 'auto',
 				// 17.625rem is the available space beside the hamburger at 375px
@@ -61,23 +57,27 @@ export function AppLayoutHeaderAccount({
 					},
 				}),
 			})}
+			flexShrink={0}
+			gap={0.5}
+			minHeight="5.25rem"
+			textAlign="right"
 		>
-			<Flex as="span" flexDirection="column" css={{ overflow: 'hidden' }}>
+			<Flex as="span" css={{ overflow: 'hidden' }} flexDirection="column">
 				<Text
 					color="action"
-					fontWeight="bold"
-					fontSize="xs"
 					css={packs.truncate}
+					fontSize="xs"
+					fontWeight="bold"
 				>
 					{name}
 				</Text>
 				{secondaryText ? (
-					<Text color="muted" fontSize="xs" css={packs.truncate}>
+					<Text color="muted" css={packs.truncate} fontSize="xs">
 						{secondaryText}
 					</Text>
 				) : null}
 			</Flex>
-			<Avatar name={name} tone="action" aria-hidden size="md" />
+			<Avatar aria-hidden name={name} size="md" tone="action" />
 		</Flex>
 	);
 }
diff --git a/packages/react/src/app-layout/AppLayoutHeaderAccountDropdown.tsx b/packages/react/src/app-layout/AppLayoutHeaderAccountDropdown.tsx
index 8e892aaeb17b..13e8840ba5c4 100644
--- a/packages/react/src/app-layout/AppLayoutHeaderAccountDropdown.tsx
+++ b/packages/react/src/app-layout/AppLayoutHeaderAccountDropdown.tsx
@@ -23,7 +23,7 @@ export function AppLayoutHeaderAccountDropdown({
 	secondaryText,
 }: AppLayoutHeaderAccountDropdownProps) {
 	return (
-		<DropdownMenu popoverPlacement="bottom-end" popoverOffset={-8}>
+		<DropdownMenu popoverOffset={-8} popoverPlacement="bottom-end">
 			<AppLayoutHeaderAccountDropdownButton
 				name={name}
 				secondaryText={secondaryText}
@@ -57,14 +57,9 @@ function AppLayoutHeaderAccountDropdownButton({
 			// @ts-ignore
 			ref={ref}
 			{...buttonProps}
-			background={isMenuOpen ? 'shade' : undefined}
 			alignItems="center"
-			justifyContent="space-between"
-			padding={1}
-			gap={1}
+			background={isMenuOpen ? 'shade' : undefined}
 			color="action"
-			focusRingFor="keyboard"
-			minHeight="5.25rem"
 			css={mq({
 				marginLeft: 'auto',
 				// 17.625rem is the available space beside the hamburger at 375px
@@ -76,42 +71,47 @@ function AppLayoutHeaderAccountDropdownButton({
 					'& > span:last-of-type > span:last-of-type': packs.underline,
 				},
 			})}
+			focusRingFor="keyboard"
+			gap={1}
+			justifyContent="space-between"
+			minHeight="5.25rem"
+			padding={1}
 		>
 			<VisuallyHidden>Account menu</VisuallyHidden>
 			<Flex
-				as="span"
-				gap={0.5}
 				alignItems="center"
-				width="100%"
 				aria-hidden
+				as="span"
 				css={{ overflow: 'hidden' }}
+				gap={0.5}
+				width="100%"
 			>
-				<Avatar name={name} tone="action" size="md" />
+				<Avatar name={name} size="md" tone="action" />
 				<Flex
 					as="span"
+					css={{ overflow: 'hidden' }}
 					flexDirection="column"
 					width="100%"
-					css={{ overflow: 'hidden' }}
 				>
 					<Text
 						color="action"
-						fontWeight="bold"
-						fontSize="xs"
 						css={packs.truncate}
+						fontSize="xs"
+						fontWeight="bold"
 					>
 						{name}
 					</Text>
 					{secondaryText ? (
-						<Text color="muted" fontSize="xs" css={packs.truncate}>
+						<Text color="muted" css={packs.truncate} fontSize="xs">
 							{secondaryText}
 						</Text>
 					) : null}
 				</Flex>
 			</Flex>
 			{isMenuOpen ? (
-				<ChevronUpIcon size="sm" weight="bold" css={{ flexShrink: 0 }} />
+				<ChevronUpIcon css={{ flexShrink: 0 }} size="sm" weight="bold" />
 			) : (
-				<ChevronDownIcon size="sm" weight="bold" css={{ flexShrink: 0 }} />
+				<ChevronDownIcon css={{ flexShrink: 0 }} size="sm" weight="bold" />
 			)}
 		</Flex>
 	);
diff --git a/packages/react/src/app-layout/AppLayoutHeaderBrand.tsx b/packages/react/src/app-layout/AppLayoutHeaderBrand.tsx
index 864dc7ed6884..55bfb050a80d 100644
--- a/packages/react/src/app-layout/AppLayoutHeaderBrand.tsx
+++ b/packages/react/src/app-layout/AppLayoutHeaderBrand.tsx
@@ -148,13 +148,8 @@ export function AppLayoutHeaderBrand({
 		</Flex>
 	) : (
 		<Flex
-			as={Link}
-			href={href}
-			paddingY={0.5}
-			flexDirection={{ xs: 'column', md: 'row' }}
 			alignItems={{ xs: 'flex-start', md: 'center' }}
-			gap={{ xs: 1, md: 0 }}
-			focusRingFor="keyboard"
+			as={Link}
 			color="text"
 			css={{
 				textDecoration: 'none',
@@ -162,15 +157,20 @@ export function AppLayoutHeaderBrand({
 				// Logo styles
 				svg: { display: 'block', height: LOGO_HEIGHT, flexShrink: 0 },
 			}}
+			flexDirection={{ xs: 'column', md: 'row' }}
+			focusRingFor="keyboard"
+			gap={{ xs: 1, md: 0 }}
+			href={href}
+			paddingY={0.5}
 		>
 			{logo}
 
 			<DividingLine singleLogo />
 
 			<Flex
+				alignItems="flex-start"
 				flexDirection="column"
 				justifyContent="center"
-				alignItems="flex-start"
 				maxWidth={tokens.maxWidth.bodyText}
 			>
 				<Flex alignItems="flex-start" gap={0.5}>
@@ -201,9 +201,6 @@ function AppLayoutHeaderBrandBadge({
 }: AppLayoutHeaderBrandBadgeProps) {
 	return (
 		<Box
-			fontWeight="bold"
-			paddingLeft={0.5}
-			paddingRight={0.5}
 			border
 			borderWidth="md"
 			css={{
@@ -214,6 +211,9 @@ function AppLayoutHeaderBrandBadge({
 				borderColor: boxPalette.foregroundText,
 				borderRadius: '2em',
 			}}
+			fontWeight="bold"
+			paddingLeft={0.5}
+			paddingRight={0.5}
 		>
 			{children}
 		</Box>
diff --git a/packages/react/src/app-layout/AppLayoutHeaderNav.tsx b/packages/react/src/app-layout/AppLayoutHeaderNav.tsx
index 34805d224ef8..e3626e80fd59 100644
--- a/packages/react/src/app-layout/AppLayoutHeaderNav.tsx
+++ b/packages/react/src/app-layout/AppLayoutHeaderNav.tsx
@@ -20,8 +20,8 @@ export function AppLayoutHeaderNav({
 		<Flex
 			alignItems="center"
 			background="body"
-			flexWrap="wrap"
 			display={{ xs: 'flex', [APP_LAYOUT_DESKTOP_BREAKPOINT]: 'none' }}
+			flexWrap="wrap"
 			justifyContent={focusMode ? 'flex-end' : 'space-between'}
 			paddingLeft={0.75}
 			paddingRight={accountDetails?.dropdown ? 0.75 : tokens.containerPadding}
diff --git a/packages/react/src/app-layout/AppLayoutSidebar.stories.tsx b/packages/react/src/app-layout/AppLayoutSidebar.stories.tsx
index c9e7e3aaeabe..4375531e77b9 100644
--- a/packages/react/src/app-layout/AppLayoutSidebar.stories.tsx
+++ b/packages/react/src/app-layout/AppLayoutSidebar.stories.tsx
@@ -24,7 +24,7 @@ const meta: Meta<typeof AppLayoutSidebar> = {
 				closeMobileMenu: console.log,
 			}}
 		>
-			<Flex flexDirection="column" css={{ minHeight: '100vh' }}>
+			<Flex css={{ minHeight: '100vh' }} flexDirection="column">
 				<AppLayoutSidebar {...props} />
 			</Flex>
 		</AppLayoutContext.Provider>
diff --git a/packages/react/src/app-layout/AppLayoutSidebarDialog.tsx b/packages/react/src/app-layout/AppLayoutSidebarDialog.tsx
index 75f3768ffb56..3f8f703eef63 100644
--- a/packages/react/src/app-layout/AppLayoutSidebarDialog.tsx
+++ b/packages/react/src/app-layout/AppLayoutSidebarDialog.tsx
@@ -79,7 +79,7 @@ export function AppLayoutSidebarDialog({
 						<FocusLock returnFocus>
 							<AnimatedBox
 								aria-label="Menu"
-								aria-modal="true"
+								aria-modal
 								background="shade"
 								css={{
 									position: 'fixed',
@@ -179,7 +179,7 @@ function CloseMenuButton({
 				padding={1}
 			>
 				<CloseIcon />
-				<span aria-hidden="true">Close</span>
+				<span aria-hidden>Close</span>
 				<VisuallyHidden>Close menu</VisuallyHidden>
 			</Flex>
 		</Flex>
diff --git a/packages/react/src/app-layout/AppLayoutSidebarNav.tsx b/packages/react/src/app-layout/AppLayoutSidebarNav.tsx
index 79a37408c2a0..d06c46d5bc0e 100644
--- a/packages/react/src/app-layout/AppLayoutSidebarNav.tsx
+++ b/packages/react/src/app-layout/AppLayoutSidebarNav.tsx
@@ -63,7 +63,7 @@ export const AppLayoutSidebarNav = ({
 	subLevelVisible,
 }: AppLayoutSidebarNavProps) => {
 	return (
-		<Stack as="nav" aria-label="main" paddingBottom={1.5}>
+		<Stack aria-label="main" as="nav" paddingBottom={1.5}>
 			<Stack as="ul">
 				{items.map((group, index) => {
 					const isFirstItem = index === 0;
@@ -87,8 +87,8 @@ export const AppLayoutSidebarNav = ({
 							{!isFirstItem ? (
 								<AppLayoutSidebarNavDivider
 									// As the divider is placed at the start of each group, padding top is determined by the previous group
-									disablePaddingTop={prevGroupDisableGroupPadding}
 									disablePaddingBottom={disableGroupPadding}
+									disablePaddingTop={prevGroupDisableGroupPadding}
 								/>
 							) : null}
 							{groupItems.map((item, index) => {
@@ -157,8 +157,8 @@ function AppLayoutSidebarNavListItem({
 			<AppLayoutSidebarNavItemInner
 				background={background}
 				hasEndElement={Boolean(endElement)}
-				isCurrentPage={isCurrentPage}
 				isActive={isActiveGroup}
+				isCurrentPage={isCurrentPage}
 				isOpen={isOpen}
 				level={item.level}
 				onClick={closeMobileMenu} // Let the click event bubble up and close the menu on press of interactive item
@@ -238,10 +238,10 @@ function AppLayoutSidebarNavListItem({
 	return (
 		<AppLayoutSidebarNavItemInner
 			background={background}
+			hasEndElement={false}
 			isActive={false}
 			isCurrentPage={false}
 			isOpen={false}
-			hasEndElement={false}
 		>
 			<Stack as="span" gap={0.25}>
 				{label}
@@ -376,10 +376,10 @@ function AppLayoutSidebarNavDivider({
 }) {
 	return (
 		<Box
+			aria-hidden
 			as="li"
-			paddingTop={disablePaddingTop ? 0 : 1}
 			paddingBottom={disablePaddingBottom ? 0 : 1}
-			aria-hidden="true"
+			paddingTop={disablePaddingTop ? 0 : 1}
 		>
 			<hr
 				css={{
diff --git a/packages/react/src/app-layout/test-utils.tsx b/packages/react/src/app-layout/test-utils.tsx
index 555d8d1b7046..07a1a87b6a9d 100644
--- a/packages/react/src/app-layout/test-utils.tsx
+++ b/packages/react/src/app-layout/test-utils.tsx
@@ -41,7 +41,7 @@ export const navigationItems = (businessName: string) => [
 			{
 				label: (
 					<Fragment>
-						<Text fontWeight="bold" fontSize="xs">
+						<Text fontSize="xs" fontWeight="bold">
 							{businessName}
 						</Text>
 						<Text color="muted" fontSize="xs">
@@ -148,10 +148,10 @@ export function ExampleAccountDropdown({
 			<DropdownMenuGroup label="Businesses">
 				{businesses.map((businessName) => (
 					<DropdownMenuItemRadio
-						key={businessName}
 						checked={businessName === selectedBusinessName}
-						secondaryText="ABN 00 000 000 000"
+						key={businessName}
 						onClick={() => onBusinessChange?.(businessName)}
+						secondaryText="ABN 00 000 000 000"
 					>
 						{businessName}
 					</DropdownMenuItemRadio>
@@ -164,14 +164,14 @@ export function ExampleAccountDropdown({
 					Profile
 				</DropdownMenuItemLink>
 				<DropdownMenuItemLink
-					href="/messages"
-					icon={EmailIcon}
 					endElement={
 						<span>
-							<NotificationBadge tone="action" value={6} max={99} aria-hidden />
+							<NotificationBadge aria-hidden max={99} tone="action" value={6} />
 							<VisuallyHidden>, 6 unread</VisuallyHidden>
 						</span>
 					}
+					href="/messages"
+					icon={EmailIcon}
 				>
 					Messages
 				</DropdownMenuItemLink>
@@ -180,7 +180,7 @@ export function ExampleAccountDropdown({
 				</DropdownMenuItemLink>
 			</DropdownMenuGroup>
 			<DropdownMenuDivider />
-			<DropdownMenuItem onClick={() => console.log('sign out')} icon={ExitIcon}>
+			<DropdownMenuItem icon={ExitIcon} onClick={() => console.log('sign out')}>
 				Sign out
 			</DropdownMenuItem>
 		</DropdownMenuPanel>
diff --git a/packages/react/src/autocomplete/Autocomplete.stories.tsx b/packages/react/src/autocomplete/Autocomplete.stories.tsx
index cc3828cd2e99..0c601dc4cf7c 100644
--- a/packages/react/src/autocomplete/Autocomplete.stories.tsx
+++ b/packages/react/src/autocomplete/Autocomplete.stories.tsx
@@ -93,32 +93,32 @@ export const CustomRender: Story = {
 		return (
 			<Autocomplete
 				label="Search users"
-				value={value}
-				onChange={setValue}
 				loadOptions={async function loadOptions() {
 					// Simulate a slow network connection
 					await new Promise((resolve) => setTimeout(resolve, 1000));
 					return NAME_OPTIONS;
 				}}
+				onChange={setValue}
 				renderItem={(item, inputValue) => (
 					<AutocompleteRenderItem
-						itemLabel={item.label}
-						inputValue={inputValue}
-						secondaryText={`Role: ${item.jobTitle}`}
-						tertiaryText={`Job: ${item.status}`}
 						beforeElement={
 							<Avatar name={item.fullName} size="sm" tone="action" />
 						}
 						endElement={
 							item.unreadMessageCount > 0 ? (
 								<NotificationBadge
-									value={item.unreadMessageCount}
 									tone="action"
+									value={item.unreadMessageCount}
 								/>
 							) : null
 						}
+						inputValue={inputValue}
+						itemLabel={item.label}
+						secondaryText={`Role: ${item.jobTitle}`}
+						tertiaryText={`Job: ${item.status}`}
 					/>
 				)}
+				value={value}
 			/>
 		);
 	},
diff --git a/packages/react/src/autocomplete/Autocomplete.test.tsx b/packages/react/src/autocomplete/Autocomplete.test.tsx
index 5a7124ec74d9..2e742c910754 100644
--- a/packages/react/src/autocomplete/Autocomplete.test.tsx
+++ b/packages/react/src/autocomplete/Autocomplete.test.tsx
@@ -22,8 +22,8 @@ const mockLoadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 function renderAutocomplete(props?: Partial<AutocompleteProps<Option>>) {
 	return render(
 		<Autocomplete
-			label="Find your state"
 			hint="Start typing to see results"
+			label="Find your state"
 			loadOptions={mockLoadOptions}
 			{...props}
 		/>
diff --git a/packages/react/src/autocomplete/Autocomplete.tsx b/packages/react/src/autocomplete/Autocomplete.tsx
index 43c8697b1f35..0d6ee1a80b9a 100644
--- a/packages/react/src/autocomplete/Autocomplete.tsx
+++ b/packages/react/src/autocomplete/Autocomplete.tsx
@@ -16,9 +16,9 @@ export function Autocomplete<Option extends DefaultComboboxOption>({
 	return (
 		<ComboboxAsync
 			{...props}
+			clearable
 			emptyResultsMessage={emptyResultsMessage}
 			showDropdownTrigger={false}
-			clearable={true}
 		/>
 	);
 }
diff --git a/packages/react/src/avatar/Avatar.stories.tsx b/packages/react/src/avatar/Avatar.stories.tsx
index f906a3880089..2c87e30a4833 100644
--- a/packages/react/src/avatar/Avatar.stories.tsx
+++ b/packages/react/src/avatar/Avatar.stories.tsx
@@ -64,13 +64,13 @@ export const CompositeNames = () => {
 	const name = 'William Mead';
 	const tone = 'neutral';
 	return (
-		<Stack gap={1} alignItems="flex-start">
+		<Stack alignItems="flex-start" gap={1}>
 			{sizes.map((size) => (
 				<Flex
-					key={size}
-					gap={SIZE_MAP[size].gap}
 					alignItems="center"
+					gap={SIZE_MAP[size].gap}
 					justifyContent="flex-start"
+					key={size}
 				>
 					<Avatar name={name} size={size} tone={tone} />
 					<Text
@@ -90,16 +90,11 @@ export const CompositeNamesLinks = () => {
 	const name = 'William Mead';
 	const tone = 'action';
 	return (
-		<Stack gap={1} alignItems="flex-start">
+		<Stack alignItems="flex-start" gap={1}>
 			{sizes.map((size) => (
 				<Flex
-					key={size}
-					gap={SIZE_MAP[size].gap}
 					alignItems="center"
-					justifyContent="flex-start"
 					as="a"
-					href="#"
-					link
 					css={{
 						textDecoration: 'none',
 						'> span': {
@@ -110,6 +105,11 @@ export const CompositeNamesLinks = () => {
 							color: boxPalette.foregroundText,
 						},
 					}}
+					gap={SIZE_MAP[size].gap}
+					href="#"
+					justifyContent="flex-start"
+					key={size}
+					link
 				>
 					<Avatar name={name} size={size} tone={tone} />
 					<Text
diff --git a/packages/react/src/avatar/Avatar.tsx b/packages/react/src/avatar/Avatar.tsx
index f5313f349572..b8c0506a50bd 100644
--- a/packages/react/src/avatar/Avatar.tsx
+++ b/packages/react/src/avatar/Avatar.tsx
@@ -30,10 +30,10 @@ export function Avatar({
 	const { size, fontSize } = SIZE_MAP[sizeProp];
 	return (
 		<Flex
-			as="span"
 			alignItems="center"
-			justifyContent="center"
-			flexShrink={0}
+			aria-hidden={ariaHidden}
+			aria-label={ariaLabel}
+			as="span"
 			css={{
 				textDecoration: 'none',
 				height: `${size}rem`,
@@ -44,10 +44,10 @@ export function Avatar({
 				borderColor: color,
 				color: color,
 			}}
+			flexShrink={0}
 			fontSize={fontSize}
 			fontWeight="bold"
-			aria-hidden={ariaHidden}
-			aria-label={ariaLabel}
+			justifyContent="center"
 		>
 			{initials}
 		</Flex>
diff --git a/packages/react/src/box/Box.stories.tsx b/packages/react/src/box/Box.stories.tsx
index 34253cc33f26..b36f98a5a756 100644
--- a/packages/react/src/box/Box.stories.tsx
+++ b/packages/react/src/box/Box.stories.tsx
@@ -47,20 +47,17 @@ export const ResponsivePadding: Story = {
 function ResponsiveSizeIndicator() {
 	return (
 		<Box
-			palette="dark"
 			color="text"
 			display="flex"
 			flexDirection="row"
 			gap={2}
 			paddingTop={1}
+			palette="dark"
 		>
 			{['xs', 'sm', 'md', 'lg', 'xl'].map((s, index, arr) => (
 				// TODO: replace with a pill / tag when it exists
 				<Box
-					key={s}
 					background="body"
-					padding={0.5}
-					rounded
 					display={Object.fromEntries(
 						[
 							['xs', 'none'],
@@ -69,6 +66,9 @@ function ResponsiveSizeIndicator() {
 							[arr[index + 1], 'none'],
 						].filter(([a]) => !!a)
 					)}
+					key={s}
+					padding={0.5}
+					rounded
 				>
 					{s}
 				</Box>
diff --git a/packages/react/src/box/Box.tsx b/packages/react/src/box/Box.tsx
index 4d025b974186..186f37f1c052 100644
--- a/packages/react/src/box/Box.tsx
+++ b/packages/react/src/box/Box.tsx
@@ -187,5 +187,5 @@ export const Box = forwardRefWithAs<'div', BoxProps>(function Box(
 			width,
 		]
 	);
-	return <Tag ref={ref} css={styles} {...props} />;
+	return <Tag css={styles} ref={ref} {...props} />;
 });
diff --git a/packages/react/src/breadcrumbs/Breadcrumbs.tsx b/packages/react/src/breadcrumbs/Breadcrumbs.tsx
index 64b1b893f3d8..d8be7ac9133c 100644
--- a/packages/react/src/breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/breadcrumbs/Breadcrumbs.tsx
@@ -37,7 +37,7 @@ export const Breadcrumbs = ({
 	return (
 		<BreadcrumbsContainer
 			aria-label={ariaLabel}
-			isExpandable={true}
+			isExpandable
 			isExpanded={isExpanded}
 		>
 			<BreadcrumbsItem ref={firstLinkRef} {...firstLink}>
diff --git a/packages/react/src/breadcrumbs/BreadcrumbsContainer.tsx b/packages/react/src/breadcrumbs/BreadcrumbsContainer.tsx
index 256fc83306e2..b55aec0ff416 100644
--- a/packages/react/src/breadcrumbs/BreadcrumbsContainer.tsx
+++ b/packages/react/src/breadcrumbs/BreadcrumbsContainer.tsx
@@ -16,10 +16,8 @@ export const BreadcrumbsContainer = ({
 }: BreadcrumbsContainerProps) => (
 	<nav aria-label={ariaLabel}>
 		<Flex
-			as="ol"
-			gap={0.5}
 			alignItems="center"
-			flexWrap="wrap"
+			as="ol"
 			css={{
 				// Hide the divider in the first list item
 				'li:first-of-type > svg': {
@@ -41,6 +39,8 @@ export const BreadcrumbsContainer = ({
 						},
 					}),
 			}}
+			flexWrap="wrap"
+			gap={0.5}
 		>
 			{children}
 		</Flex>
diff --git a/packages/react/src/breadcrumbs/BreadcrumbsDivider.tsx b/packages/react/src/breadcrumbs/BreadcrumbsDivider.tsx
index 694e043ae4fc..81dc51c6d124 100644
--- a/packages/react/src/breadcrumbs/BreadcrumbsDivider.tsx
+++ b/packages/react/src/breadcrumbs/BreadcrumbsDivider.tsx
@@ -3,12 +3,12 @@ import { ChevronRightIcon } from '../icon';
 export const BreadcrumbsDivider = () => (
 	<ChevronRightIcon
 		color="border"
-		size="sm"
 		css={{
 			flexShrink: 0,
 			// Ensure this aligns nicely the line height of `BreadcrumbsItem`
 			position: 'relative',
 			top: 1,
 		}}
+		size="sm"
 	/>
 );
diff --git a/packages/react/src/breadcrumbs/BreadcrumbsItem.tsx b/packages/react/src/breadcrumbs/BreadcrumbsItem.tsx
index 0559214c5471..23d45ee35db0 100644
--- a/packages/react/src/breadcrumbs/BreadcrumbsItem.tsx
+++ b/packages/react/src/breadcrumbs/BreadcrumbsItem.tsx
@@ -12,7 +12,7 @@ export const BreadcrumbsItem = forwardRef<
 >(function BreadcrumbsItem(props, ref) {
 	const { children, href } = props;
 	return (
-		<Flex as="li" alignItems="center" gap={0.5} fontSize="sm" color="text">
+		<Flex alignItems="center" as="li" color="text" fontSize="sm" gap={0.5}>
 			<BreadcrumbsDivider />
 			{href ? <TextLink ref={ref} {...props} /> : children}
 		</Flex>
diff --git a/packages/react/src/breadcrumbs/BreadcrumbsToggle.tsx b/packages/react/src/breadcrumbs/BreadcrumbsToggle.tsx
index 7927ec2a6e9a..68584ce0a31a 100644
--- a/packages/react/src/breadcrumbs/BreadcrumbsToggle.tsx
+++ b/packages/react/src/breadcrumbs/BreadcrumbsToggle.tsx
@@ -11,15 +11,15 @@ export function BreadcrumbsToggle({ onClick }: BreadcrumbsToggleProps) {
 	return (
 		<BreadcrumbsItem>
 			<Flex
-				as={BaseButton}
-				onClick={onClick}
-				aria-label="Show all breadcrumbs"
-				aria-expanded="false"
 				alignItems="center"
-				justifyContent="center"
-				fontSize="sm"
+				aria-expanded="false"
+				aria-label="Show all breadcrumbs"
+				as={BaseButton}
 				focusRingFor="keyboard"
+				fontSize="sm"
+				justifyContent="center"
 				link
+				onClick={onClick}
 			>
 				&hellip;
 			</Flex>
diff --git a/packages/react/src/button/BaseButton.tsx b/packages/react/src/button/BaseButton.tsx
index b96b2ce7d3c1..44be0aa0a72d 100644
--- a/packages/react/src/button/BaseButton.tsx
+++ b/packages/react/src/button/BaseButton.tsx
@@ -64,9 +64,6 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
 
 		return (
 			<button
-				ref={mergeRefs([ref, forwardedRef])}
-				type={type}
-				onClick={onClick}
 				css={{
 					appearance: 'none',
 					background: 'transparent',
@@ -78,6 +75,9 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
 					fontSize: 'inherit',
 					lineHeight: 'inherit',
 				}}
+				onClick={onClick}
+				ref={mergeRefs([ref, forwardedRef])}
+				type={type}
 				{...props}
 			/>
 		);
diff --git a/packages/react/src/button/Button.test.tsx b/packages/react/src/button/Button.test.tsx
index 41034212bc73..2035e85832ec 100644
--- a/packages/react/src/button/Button.test.tsx
+++ b/packages/react/src/button/Button.test.tsx
@@ -143,7 +143,7 @@ describe('Button', () => {
 
 function renderButtonLink(props?: Partial<ButtonLinkProps>) {
 	return render(
-		<ButtonLink href="#" data-testid="example" {...props}>
+		<ButtonLink data-testid="example" href="#" {...props}>
 			My button link
 		</ButtonLink>
 	);
diff --git a/packages/react/src/button/Button.tsx b/packages/react/src/button/Button.tsx
index b2c69961d40a..80895b1ae9ea 100644
--- a/packages/react/src/button/Button.tsx
+++ b/packages/react/src/button/Button.tsx
@@ -64,27 +64,27 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 			variant,
 		});
 		return (
-			<BaseButton ref={ref} css={styles} type={type} {...props}>
+			<BaseButton css={styles} ref={ref} type={type} {...props}>
 				{IconBefore ? (
 					<IconBefore
+						css={{ flexShrink: 0 }}
 						size={iconSize[size]}
 						weight="regular"
-						css={{ flexShrink: 0 }}
 					/>
 				) : null}
 				<span>
 					<span css={{ opacity: loading ? 0 : 1 }}>{children}</span>
 					<ButtonLoadingDots
-						loading={loading}
 						label={loadingLabel}
+						loading={loading}
 						size={size}
 					/>
 				</span>
 				{IconAfter ? (
 					<IconAfter
+						css={{ flexShrink: 0 }}
 						size={iconSize[size]}
 						weight="regular"
-						css={{ flexShrink: 0 }}
 					/>
 				) : null}
 			</BaseButton>
@@ -118,7 +118,7 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
 		});
 		const Link = useLinkComponent();
 		return (
-			<Link ref={ref} css={styles} {...props}>
+			<Link css={styles} ref={ref} {...props}>
 				{IconBefore ? (
 					<IconBefore size={iconSize[size]} weight="regular" />
 				) : null}
@@ -145,14 +145,14 @@ const ButtonLoadingDots = ({
 		<span aria-live="assertive">
 			{loading ? (
 				<LoadingDots
-					label={label}
-					size={loadingSize[size]}
 					css={{
 						position: 'absolute',
 						left: '50%',
 						top: '50%',
 						transform: 'translate(-50%, -50%)',
 					}}
+					label={label}
+					size={loadingSize[size]}
 				/>
 			) : null}
 		</span>
diff --git a/packages/react/src/button/ButtonGroup.tsx b/packages/react/src/button/ButtonGroup.tsx
index 3757da9eac26..9029d82ac84f 100644
--- a/packages/react/src/button/ButtonGroup.tsx
+++ b/packages/react/src/button/ButtonGroup.tsx
@@ -6,9 +6,9 @@ export type ButtonGroupProps = { children: ReactNode };
 export const ButtonGroup = ({ children }: ButtonGroupProps) => {
 	return (
 		<Flex
-			gap={1}
-			flexDirection={['column', 'row']}
 			alignItems={['stretch', 'center']}
+			flexDirection={['column', 'row']}
+			gap={1}
 		>
 			{children}
 		</Flex>
diff --git a/packages/react/src/call-to-action/CallToAction.tsx b/packages/react/src/call-to-action/CallToAction.tsx
index 2f7b29fe7774..6427c58b98a8 100644
--- a/packages/react/src/call-to-action/CallToAction.tsx
+++ b/packages/react/src/call-to-action/CallToAction.tsx
@@ -29,16 +29,16 @@ const CallToAction = ({
 	...props
 }: CallToActionProps) => {
 	return (
-		<Flex inline css={{ alignSelf: 'flex-start' }}>
+		<Flex css={{ alignSelf: 'flex-start' }} inline>
 			<Flex
+				alignItems="center"
 				as={as}
 				className={className}
-				gap={0.25}
-				alignItems="center"
-				fontWeight="bold"
+				focusRingFor="keyboard"
 				fontSize="md"
+				fontWeight="bold"
+				gap={0.25}
 				link
-				focusRingFor="keyboard"
 				{...props}
 			>
 				{children}
diff --git a/packages/react/src/callout/Callout.stories.tsx b/packages/react/src/callout/Callout.stories.tsx
index 9bf022944a13..7973e41c6d6b 100644
--- a/packages/react/src/callout/Callout.stories.tsx
+++ b/packages/react/src/callout/Callout.stories.tsx
@@ -143,9 +143,9 @@ export const CalendarExample: Story = {
 				<Text as="p">The next public holiday is:</Text>
 				<Text
 					as="time"
+					dateTime="2017-01-01T00:00:00+00:00"
 					fontSize="xl"
 					fontWeight="bold"
-					dateTime="2017-01-01T00:00:00+00:00"
 				>
 					Sunday 1 January
 				</Text>
diff --git a/packages/react/src/callout/Callout.tsx b/packages/react/src/callout/Callout.tsx
index edce7c6e1b75..11c6a5770412 100644
--- a/packages/react/src/callout/Callout.tsx
+++ b/packages/react/src/callout/Callout.tsx
@@ -46,18 +46,18 @@ export const Callout = ({
 	return (
 		<Flex
 			as={as}
-			flexDirection={flexDirection}
-			rounded
-			gap={iconGap}
 			background={onBodyAlt ? 'shadeAlt' : background}
 			borderColor={border}
-			padding={padding}
 			borderLeft
 			borderLeftWidth="xl"
+			flexDirection={flexDirection}
+			gap={iconGap}
 			highContrastOutline
+			padding={padding}
+			rounded
 		>
 			{iconProp || icon ? <Flex flexShrink={0}>{iconProp || icon}</Flex> : null}
-			<Stack gap={textGap} css={{ paddingTop: titlePaddingTop }}>
+			<Stack css={{ paddingTop: titlePaddingTop }} gap={textGap}>
 				{title ? <CalloutTitle variant={variant}>{title}</CalloutTitle> : null}
 				{children}
 			</Stack>
diff --git a/packages/react/src/card/Card.stories.tsx b/packages/react/src/card/Card.stories.tsx
index 66fa42b211ff..bbdac8b7ff72 100644
--- a/packages/react/src/card/Card.stories.tsx
+++ b/packages/react/src/card/Card.stories.tsx
@@ -191,11 +191,11 @@ export const CardList: Story = {
 				<Stack gap={1.5}>
 					<H2>Active CARs</H2>
 					<Text as="p">You may now manage your CARs online.</Text>
-					<Columns as="ul" gap={1} cols={{ xs: 1, sm: 2, lg: 3 }}>
+					<Columns as="ul" cols={{ xs: 1, sm: 2, lg: 3 }} gap={1}>
 						{listData.map((item) => (
-							<Card as="li" shadow clickable key={item.id}>
+							<Card as="li" clickable key={item.id} shadow>
 								<CardInner>
-									<Stack gap={0.5} width="100%" flexWrap="wrap">
+									<Stack flexWrap="wrap" gap={0.5} width="100%">
 										<H3>
 											<CardLink href={`#${item.id}`}>
 												{item.businessName}
@@ -208,23 +208,23 @@ export const CardList: Story = {
 										</Text>
 
 										<Flex
-											gap={0.5}
+											alignItems="center"
 											flexWrap="wrap"
+											gap={0.5}
 											justifyContent="space-between"
-											alignItems="center"
 										>
 											<Text color="muted" fontSize="xs">
 												<VisuallyHidden>{'CAR ID: '}</VisuallyHidden>
 												{item.id}
 											</Text>
 											<StatusBadge
-												tone={toneMapper[item.status]}
 												label={
 													<Fragment>
 														<VisuallyHidden>{'Status: '}</VisuallyHidden>
 														{item.status}
 													</Fragment>
 												}
+												tone={toneMapper[item.status]}
 											/>
 										</Flex>
 									</Stack>
@@ -259,7 +259,7 @@ export const Compositions = () => {
 							</CardInner>
 						</Card>
 
-						<Card shadow clickable>
+						<Card clickable shadow>
 							<CardInner>
 								<Stack gap={1}>
 									<Box as="h3">
@@ -273,7 +273,7 @@ export const Compositions = () => {
 							</CardInner>
 						</Card>
 
-						<Card shadow clickable>
+						<Card clickable shadow>
 							<CardInner>
 								<Stack gap={1}>
 									<Pictogram />
@@ -293,7 +293,7 @@ export const Compositions = () => {
 
 				<Column>
 					<Stack gap={2} width="100%">
-						<Card shadow clickable>
+						<Card clickable shadow>
 							<CardInner>
 								<Stack gap={0.5}>
 									<Pictogram />
@@ -305,7 +305,7 @@ export const Compositions = () => {
 							</CardInner>
 						</Card>
 
-						<Card shadow clickable>
+						<Card clickable shadow>
 							<CardInner>
 								<Stack gap={1}>
 									<Flex gap={0.5}>
@@ -320,7 +320,7 @@ export const Compositions = () => {
 							</CardInner>
 						</Card>
 
-						<Card shadow clickable>
+						<Card clickable shadow>
 							<img
 								alt="Placeholder image"
 								src="https://design-system.agriculture.gov.au/img/placeholder/hero-banner.jpeg"
@@ -339,15 +339,15 @@ export const Compositions = () => {
 							</CardInner>
 						</Card>
 
-						<Card shadow clickable>
+						<Card clickable shadow>
 							<Flex>
 								<img
 									alt="Placeholder image"
-									src="https://design-system.agriculture.gov.au/img/placeholder/hero-banner.jpeg"
 									css={{
 										width: '50%',
 										objectFit: 'cover',
 									}}
+									src="https://design-system.agriculture.gov.au/img/placeholder/hero-banner.jpeg"
 								/>
 								<CardInner>
 									<Stack gap={1}>
@@ -372,15 +372,15 @@ export const Compositions = () => {
 const Pictogram = () => {
 	return (
 		<svg
-			width="64"
-			height="64"
-			viewBox="0 0 64 64"
 			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
+			height="64"
 			stroke="#00558B"
-			strokeWidth="2"
 			strokeLinecap="round"
 			strokeLinejoin="round"
+			strokeWidth="2"
+			viewBox="0 0 64 64"
+			width="64"
+			xmlns="http://www.w3.org/2000/svg"
 		>
 			<path d="M31 36H17" />
 			<path d="M47 59C53.6274 59 59 53.6274 59 47C59 40.3726 53.6274 35 47 35C40.3726 35 35 40.3726 35 47C35 53.6274 40.3726 59 47 59Z" />
diff --git a/packages/react/src/card/Card.test.tsx b/packages/react/src/card/Card.test.tsx
index 652221c4d967..355ff4301a82 100644
--- a/packages/react/src/card/Card.test.tsx
+++ b/packages/react/src/card/Card.test.tsx
@@ -34,7 +34,7 @@ function CardExample() {
 
 function CardLinkExample() {
 	return (
-		<Card shadow clickable>
+		<Card clickable shadow>
 			<CardInner>
 				<Stack gap={1}>
 					<Heading as="h2" type="h3">
diff --git a/packages/react/src/card/Card.tsx b/packages/react/src/card/Card.tsx
index 2265183c577b..b9ca657f8512 100644
--- a/packages/react/src/card/Card.tsx
+++ b/packages/react/src/card/Card.tsx
@@ -22,11 +22,9 @@ export const Card = ({
 	return (
 		<Box
 			as={as} // Note: this should be an li when used in a card list
-			display="block"
+			background={background}
 			border
 			borderColor="muted"
-			background={background}
-			rounded
 			className={className}
 			css={{
 				position: 'relative',
@@ -46,6 +44,8 @@ export const Card = ({
 					'&:hover': clickable ? { boxShadow: tokens.shadow.md } : undefined,
 				}),
 			}}
+			display="block"
+			rounded
 		>
 			{children}
 		</Box>
diff --git a/packages/react/src/card/CardFooter.tsx b/packages/react/src/card/CardFooter.tsx
index 691bb150ef39..50e9b6eefc3c 100644
--- a/packages/react/src/card/CardFooter.tsx
+++ b/packages/react/src/card/CardFooter.tsx
@@ -6,7 +6,7 @@ export type CardFooterProps = PropsWithChildren<{
 }>;
 
 export const CardFooter = ({ background, children }: CardFooterProps) => (
-	<Box borderTop borderColor="muted" background={background} padding={1.5}>
+	<Box background={background} borderColor="muted" borderTop padding={1.5}>
 		{children}
 	</Box>
 );
diff --git a/packages/react/src/card/CardHeader.tsx b/packages/react/src/card/CardHeader.tsx
index b51d341c2a7e..a417d5e1c8dc 100644
--- a/packages/react/src/card/CardHeader.tsx
+++ b/packages/react/src/card/CardHeader.tsx
@@ -6,7 +6,7 @@ export type CardHeaderProps = PropsWithChildren<{
 }>;
 
 export const CardHeader = ({ background, children }: CardHeaderProps) => (
-	<Box padding={1.5} borderBottom borderColor="muted" background={background}>
+	<Box background={background} borderBottom borderColor="muted" padding={1.5}>
 		{children}
 	</Box>
 );
diff --git a/packages/react/src/checkbox/CheckboxContainer.tsx b/packages/react/src/checkbox/CheckboxContainer.tsx
index 5ac9df566bc6..e7bc92c64e4a 100644
--- a/packages/react/src/checkbox/CheckboxContainer.tsx
+++ b/packages/react/src/checkbox/CheckboxContainer.tsx
@@ -13,15 +13,15 @@ export function CheckboxContainer({
 }: CheckboxContainerProps) {
 	return (
 		<Flex
-			as="label"
 			alignItems="flex-start"
+			as="label"
 			color="text"
-			gap={0.5}
-			htmlFor={htmlFor}
-			inline
 			css={{
 				cursor: disabled ? 'not-allowed' : 'pointer',
 			}}
+			gap={0.5}
+			htmlFor={htmlFor}
+			inline
 		>
 			{children}
 		</Flex>
diff --git a/packages/react/src/checkbox/CheckboxIndicator.tsx b/packages/react/src/checkbox/CheckboxIndicator.tsx
index 7eb1668aecf4..6951a04d1458 100644
--- a/packages/react/src/checkbox/CheckboxIndicator.tsx
+++ b/packages/react/src/checkbox/CheckboxIndicator.tsx
@@ -19,12 +19,8 @@ export const CheckboxIndicator = ({
 	const { width, height, borderWidth } = packs.control[size];
 	return (
 		<Flex
-			as="span"
-			justifyContent="center"
 			alignItems="center"
-			width={width}
-			height={height}
-			flexShrink={0}
+			as="span"
 			css={{
 				borderWidth,
 				borderStyle: 'solid',
@@ -48,7 +44,11 @@ export const CheckboxIndicator = ({
 					backgroundColor: boxPalette.systemErrorMuted,
 				}),
 			}}
+			flexShrink={0}
+			height={height}
+			justifyContent="center"
 			rounded
+			width={width}
 		>
 			{indeterminate ? (
 				<MinusIcon size={size} weight="bold" />
diff --git a/packages/react/src/checkbox/CheckboxInput.tsx b/packages/react/src/checkbox/CheckboxInput.tsx
index 93f512ab3b9f..b84ff268c280 100644
--- a/packages/react/src/checkbox/CheckboxInput.tsx
+++ b/packages/react/src/checkbox/CheckboxInput.tsx
@@ -8,7 +8,6 @@ export const CheckboxInput = forwardRef<HTMLInputElement, ControlInputProps>(
 	function CheckboxInput(props, ref) {
 		return (
 			<input
-				ref={ref}
 				css={{
 					...visuallyHiddenStyles,
 					// When this component is focused, outline the `CheckboxIndicator`
@@ -19,6 +18,7 @@ export const CheckboxInput = forwardRef<HTMLInputElement, ControlInputProps>(
 						opacity: 1,
 					},
 				}}
+				ref={ref}
 				{...props}
 			/>
 		);
diff --git a/packages/react/src/checkbox/CheckboxLabel.tsx b/packages/react/src/checkbox/CheckboxLabel.tsx
index 853c18c88f1b..3ea5d57e3a5e 100644
--- a/packages/react/src/checkbox/CheckboxLabel.tsx
+++ b/packages/react/src/checkbox/CheckboxLabel.tsx
@@ -20,12 +20,12 @@ export function CheckboxLabel({
 	const paddingTop = paddingTopMap[size];
 	return (
 		<Text
-			flexGrow={1}
 			color={disabled ? 'muted' : 'text'}
 			css={{
 				// Ensures the label is vertically aligned with the indicator across multiple lines.
 				paddingTop,
 			}}
+			flexGrow={1}
 		>
 			{children}
 		</Text>
diff --git a/packages/react/src/columns/Columns.tsx b/packages/react/src/columns/Columns.tsx
index a220536ae31c..35fa4e72806f 100644
--- a/packages/react/src/columns/Columns.tsx
+++ b/packages/react/src/columns/Columns.tsx
@@ -26,7 +26,7 @@ export const Columns = forwardRefWithAs<'div', ColumnsProps>(function Columns(
 	ref
 ) {
 	const styles = columnsStyles({ cols });
-	return <Box ref={ref} gap={gap} css={styles} {...props} />;
+	return <Box css={styles} gap={gap} ref={ref} {...props} />;
 });
 
 const columnsStyles = ({ cols }: { cols: ResponsiveProp<ColumnRange> }) => {
diff --git a/packages/react/src/combobox/Combobox.stories.tsx b/packages/react/src/combobox/Combobox.stories.tsx
index 31a0318b5bad..10834bc99f3e 100644
--- a/packages/react/src/combobox/Combobox.stories.tsx
+++ b/packages/react/src/combobox/Combobox.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta<typeof Combobox> = {
 	component: Combobox,
 	render: function ComboboxStory(props) {
 		const [value, setValue] = useState<Option | null>(null);
-		return <Combobox {...props} value={value} onChange={setValue} />;
+		return <Combobox {...props} onChange={setValue} value={value} />;
 	},
 };
 
@@ -82,28 +82,28 @@ export const CustomRender: Story = {
 		return (
 			<Combobox
 				label="Search users"
-				value={value}
 				onChange={setValue}
 				options={NAME_OPTIONS}
 				renderItem={(item, inputValue) => (
 					<ComboboxRenderItem
-						itemLabel={item.label}
-						inputValue={inputValue}
-						secondaryText={`Role: ${item.jobTitle}`}
-						tertiaryText={`Job: ${item.status}`}
 						beforeElement={
 							<Avatar name={item.fullName} size="sm" tone="action" />
 						}
 						endElement={
 							item.unreadMessageCount > 0 ? (
 								<NotificationBadge
-									value={item.unreadMessageCount}
 									tone="action"
+									value={item.unreadMessageCount}
 								/>
 							) : null
 						}
+						inputValue={inputValue}
+						itemLabel={item.label}
+						secondaryText={`Role: ${item.jobTitle}`}
+						tertiaryText={`Job: ${item.status}`}
 					/>
 				)}
+				value={value}
 			/>
 		);
 	},
diff --git a/packages/react/src/combobox/Combobox.test.tsx b/packages/react/src/combobox/Combobox.test.tsx
index 872ade5b9205..97ec7b3982aa 100644
--- a/packages/react/src/combobox/Combobox.test.tsx
+++ b/packages/react/src/combobox/Combobox.test.tsx
@@ -12,8 +12,8 @@ expect.extend(toHaveNoViolations);
 function renderCombobox(props?: Partial<ComboboxProps<Option>>) {
 	return render(
 		<Combobox
-			label="Find your state"
 			hint="Start typing to see results"
+			label="Find your state"
 			options={STATE_OPTIONS}
 			{...props}
 		/>
@@ -47,8 +47,8 @@ describe('Combobox', () => {
 		test('then the input should display the selected value', async () => {
 			render(
 				<Combobox
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					options={STATE_OPTIONS}
 				/>
 			);
@@ -82,11 +82,11 @@ describe('Combobox', () => {
 
 				return (
 					<Combobox
-						label="Find your state"
+						disabled={false} // Definitely start in an enabled state
 						hint="Start typing to see results"
-						options={STATE_OPTIONS}
 						inputRef={inputRef}
-						disabled={false} // Definitely start in an enabled state
+						label="Find your state"
+						options={STATE_OPTIONS}
 					/>
 				);
 			};
diff --git a/packages/react/src/combobox/ComboboxAsync.stories.tsx b/packages/react/src/combobox/ComboboxAsync.stories.tsx
index f0630135a551..95522aa09f26 100644
--- a/packages/react/src/combobox/ComboboxAsync.stories.tsx
+++ b/packages/react/src/combobox/ComboboxAsync.stories.tsx
@@ -14,13 +14,13 @@ const meta: Meta<typeof ComboboxAsync> = {
 		return (
 			<ComboboxAsync
 				{...props}
-				value={value}
-				onChange={setValue}
 				loadOptions={async function loadOptions() {
 					// Simulate a slow network connection
 					await new Promise((resolve) => setTimeout(resolve, 1000));
 					return COUNTRY_OPTIONS;
 				}}
+				onChange={setValue}
+				value={value}
 			/>
 		);
 	},
@@ -93,32 +93,32 @@ export const CustomRender: Story = {
 		return (
 			<ComboboxAsync
 				label="Search users"
-				value={value}
-				onChange={setValue}
 				loadOptions={async function loadOptions() {
 					// Simulate a slow network connection
 					await new Promise((resolve) => setTimeout(resolve, 1000));
 					return NAME_OPTIONS;
 				}}
+				onChange={setValue}
 				renderItem={(item, inputValue) => (
 					<ComboboxRenderItem
-						itemLabel={item.label}
-						inputValue={inputValue}
-						secondaryText={`Role: ${item.jobTitle}`}
-						tertiaryText={`Job: ${item.status}`}
 						beforeElement={
 							<Avatar name={item.fullName} size="sm" tone="action" />
 						}
 						endElement={
 							item.unreadMessageCount > 0 ? (
 								<NotificationBadge
-									value={item.unreadMessageCount}
 									tone="action"
+									value={item.unreadMessageCount}
 								/>
 							) : null
 						}
+						inputValue={inputValue}
+						itemLabel={item.label}
+						secondaryText={`Role: ${item.jobTitle}`}
+						tertiaryText={`Job: ${item.status}`}
 					/>
 				)}
+				value={value}
 			/>
 		);
 	},
diff --git a/packages/react/src/combobox/ComboboxAsync.test.tsx b/packages/react/src/combobox/ComboboxAsync.test.tsx
index e1accdda5bdc..b335121d6bfa 100644
--- a/packages/react/src/combobox/ComboboxAsync.test.tsx
+++ b/packages/react/src/combobox/ComboboxAsync.test.tsx
@@ -22,8 +22,8 @@ const mockLoadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 function renderComboboxAsync(props?: Partial<ComboboxAsyncProps<Option>>) {
 	return render(
 		<ComboboxAsync
-			label="Find your state"
 			hint="Start typing to see results"
+			label="Find your state"
 			loadOptions={mockLoadOptions}
 			{...props}
 		/>
diff --git a/packages/react/src/combobox/ComboboxAsync.tsx b/packages/react/src/combobox/ComboboxAsync.tsx
index 6ab5d06dc86b..2e320649af68 100644
--- a/packages/react/src/combobox/ComboboxAsync.tsx
+++ b/packages/react/src/combobox/ComboboxAsync.tsx
@@ -117,15 +117,15 @@ export function ComboboxAsync<Option extends DefaultComboboxOption>({
 
 	return (
 		<ComboboxBase
+			clearable={clearable}
 			combobox={combobox}
 			inputId={inputId}
-			loading={loading}
-			networkError={networkError}
 			inputItems={inputItems}
-			showDropdownTrigger={showDropdownTrigger}
-			clearable={clearable}
 			inputRef={inputRefProp}
 			isAutocomplete={isAutocomplete}
+			loading={loading}
+			networkError={networkError}
+			showDropdownTrigger={showDropdownTrigger}
 			{...props}
 		/>
 	);
diff --git a/packages/react/src/combobox/ComboboxAsyncMulti.stories.tsx b/packages/react/src/combobox/ComboboxAsyncMulti.stories.tsx
index 73c921f40dd8..76691620813c 100644
--- a/packages/react/src/combobox/ComboboxAsyncMulti.stories.tsx
+++ b/packages/react/src/combobox/ComboboxAsyncMulti.stories.tsx
@@ -14,13 +14,13 @@ const meta: Meta<typeof ComboboxAsyncMulti> = {
 		return (
 			<ComboboxAsyncMulti
 				{...props}
-				value={value}
-				onChange={setValue}
 				loadOptions={async function loadOptions() {
 					// Simulate a slow network connection
 					await new Promise((resolve) => setTimeout(resolve, 1000));
 					return COUNTRY_OPTIONS;
 				}}
+				onChange={setValue}
+				value={value}
 			/>
 		);
 	},
@@ -86,32 +86,32 @@ export const CustomRender: Story = {
 		return (
 			<ComboboxAsyncMulti
 				label="Search users"
-				value={value}
-				onChange={setValue}
 				loadOptions={async function loadOptions() {
 					// Simulate a slow network connection
 					await new Promise((resolve) => setTimeout(resolve, 1000));
 					return NAME_OPTIONS;
 				}}
+				onChange={setValue}
 				renderItem={(item, inputValue) => (
 					<ComboboxRenderItem
-						itemLabel={item.label}
-						inputValue={inputValue}
-						secondaryText={`Role: ${item.jobTitle}`}
-						tertiaryText={`Job: ${item.status}`}
 						beforeElement={
 							<Avatar name={item.fullName} size="sm" tone="action" />
 						}
 						endElement={
 							item.unreadMessageCount > 0 ? (
 								<NotificationBadge
-									value={item.unreadMessageCount}
 									tone="action"
+									value={item.unreadMessageCount}
 								/>
 							) : null
 						}
+						inputValue={inputValue}
+						itemLabel={item.label}
+						secondaryText={`Role: ${item.jobTitle}`}
+						tertiaryText={`Job: ${item.status}`}
 					/>
 				)}
+				value={value}
 			/>
 		);
 	},
diff --git a/packages/react/src/combobox/ComboboxAsyncMulti.test.tsx b/packages/react/src/combobox/ComboboxAsyncMulti.test.tsx
index 7be1433a0650..b45e19a52020 100644
--- a/packages/react/src/combobox/ComboboxAsyncMulti.test.tsx
+++ b/packages/react/src/combobox/ComboboxAsyncMulti.test.tsx
@@ -20,8 +20,8 @@ function renderComboboxAsyncMulti(
 
 	return render(
 		<ComboboxAsyncMulti
-			label="Find your state"
 			hint="Start typing to see results"
+			label="Find your state"
 			loadOptions={mockLoadOptions}
 			{...props}
 		/>
@@ -56,8 +56,8 @@ describe('ComboboxAsyncMulti', () => {
 			const loadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 			render(
 				<ComboboxAsyncMulti
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					loadOptions={loadOptions}
 				/>
 			);
@@ -79,8 +79,8 @@ describe('ComboboxAsyncMulti', () => {
 			const loadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 			render(
 				<ComboboxAsyncMulti
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					loadOptions={loadOptions}
 				/>
 			);
@@ -100,8 +100,8 @@ describe('ComboboxAsyncMulti', () => {
 			const loadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 			render(
 				<ComboboxAsyncMulti
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					loadOptions={loadOptions}
 				/>
 			);
@@ -123,8 +123,8 @@ describe('ComboboxAsyncMulti', () => {
 			const loadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 			render(
 				<ComboboxAsyncMulti
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					loadOptions={loadOptions}
 				/>
 			);
@@ -149,8 +149,8 @@ describe('ComboboxAsyncMulti', () => {
 			const loadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 			render(
 				<ComboboxAsyncMulti
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					loadOptions={loadOptions}
 				/>
 			);
@@ -173,8 +173,8 @@ describe('ComboboxAsyncMulti', () => {
 			const loadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 			render(
 				<ComboboxAsyncMulti
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					loadOptions={loadOptions}
 				/>
 			);
@@ -199,8 +199,8 @@ describe('ComboboxAsyncMulti', () => {
 			const loadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 			render(
 				<ComboboxAsyncMulti
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					loadOptions={loadOptions}
 				/>
 			);
@@ -225,8 +225,8 @@ describe('ComboboxAsyncMulti', () => {
 			const loadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 			render(
 				<ComboboxAsyncMulti
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					loadOptions={loadOptions}
 				/>
 			);
@@ -259,8 +259,8 @@ describe('ComboboxAsyncMulti', () => {
 			const loadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 			render(
 				<ComboboxAsyncMulti
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					loadOptions={loadOptions}
 				/>
 			);
@@ -281,8 +281,8 @@ describe('ComboboxAsyncMulti', () => {
 			const loadOptions = jest.fn().mockResolvedValue(STATE_OPTIONS);
 			render(
 				<ComboboxAsyncMulti
-					label="Find your state"
 					hint="Start typing to see results"
+					label="Find your state"
 					loadOptions={loadOptions}
 				/>
 			);
diff --git a/packages/react/src/combobox/ComboboxAsyncMulti.tsx b/packages/react/src/combobox/ComboboxAsyncMulti.tsx
index 4e22ad5432ab..eb0e3e2f9e2f 100644
--- a/packages/react/src/combobox/ComboboxAsyncMulti.tsx
+++ b/packages/react/src/combobox/ComboboxAsyncMulti.tsx
@@ -155,15 +155,15 @@ export function ComboboxAsyncMulti<Option extends DefaultComboboxOption>({
 	return (
 		<ComboboxMultiBase
 			block={block}
+			clearable
 			combobox={combobox}
-			multiSelection={multiSelection}
 			inputId={inputId}
 			inputItems={items}
 			loading={loading}
+			multiSelection={multiSelection}
 			networkError={networkError}
 			selectedItems={selectedItems}
 			setSelectedItems={setSelectedItems}
-			clearable
 			{...props}
 		/>
 	);
diff --git a/packages/react/src/combobox/ComboboxBase/ComboboxBase.tsx b/packages/react/src/combobox/ComboboxBase/ComboboxBase.tsx
index 49f3039a9dd3..6b467bdcbc8e 100644
--- a/packages/react/src/combobox/ComboboxBase/ComboboxBase.tsx
+++ b/packages/react/src/combobox/ComboboxBase/ComboboxBase.tsx
@@ -138,15 +138,15 @@ export function ComboboxBase<Option extends DefaultComboboxOption>({
 
 	return (
 		<Field
-			label={label}
-			labelId={labelId}
 			hideOptionalLabel={hideOptionalLabel}
-			required={required}
 			hint={hint}
+			id={inputId}
+			invalid={invalid}
+			label={label}
+			labelId={labelId}
 			maxWidth={maxWidthProp}
 			message={message}
-			invalid={invalid}
-			id={inputId}
+			required={required}
 		>
 			{(a11yProps) => (
 				<div
diff --git a/packages/react/src/combobox/ComboboxBase/ComboboxButtons.tsx b/packages/react/src/combobox/ComboboxBase/ComboboxButtons.tsx
index 600f322bbf50..c7cc4e1f92b6 100644
--- a/packages/react/src/combobox/ComboboxBase/ComboboxButtons.tsx
+++ b/packages/react/src/combobox/ComboboxBase/ComboboxButtons.tsx
@@ -19,13 +19,13 @@ export function ComboboxButtonContainer({ children }: PropsWithChildren<{}>) {
 	return (
 		<Flex
 			alignItems="center"
-			gap={0.25}
 			css={{
 				position: 'absolute',
 				top: '50%',
 				right: `calc(${mapSpacing(0.5)} + ${tokens.borderWidth.lg}px)`, // Align from the inner border
 				transform: 'translateY(-50%)',
 			}}
+			gap={0.25}
 		>
 			{children}
 		</Flex>
@@ -36,10 +36,10 @@ export function ComboboxButtonDivider() {
 	return (
 		<Box
 			aria-hidden
-			height="1.5rem"
+			borderColor="muted"
 			borderLeft
 			borderLeftWidth="md"
-			borderColor="muted"
+			height="1.5rem"
 		/>
 	);
 }
@@ -50,9 +50,9 @@ export const ComboboxClearButton = forwardRef<
 >(function ComboboxClearButton(props, ref) {
 	return (
 		<ComboboxIconButton
-			ref={ref}
 			aria-label="Clear input"
 			icon={CloseIcon}
+			ref={ref}
 			{...props}
 		/>
 	);
@@ -64,9 +64,9 @@ export const ComboboxDropdownTrigger = forwardRef<
 >(function ComboboxDropdownTrigger({ isOpen, ...props }, ref) {
 	return (
 		<ComboboxIconButton
-			ref={ref}
 			aria-label="Toggle menu"
 			icon={isOpen ? ChevronUpIcon : ChevronDownIcon}
+			ref={ref}
 			{...props}
 		/>
 	);
@@ -80,8 +80,6 @@ const ComboboxIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 	function ComboboxIconButton({ disabled, icon: Icon, ...props }, ref) {
 		return (
 			<BaseButton
-				ref={ref}
-				disabled={disabled}
 				css={{
 					display: 'flex',
 					alignItems: 'center',
@@ -98,6 +96,8 @@ const ComboboxIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 					'&:hover': { color: boxPalette.foregroundText },
 					...focusStyles,
 				}}
+				disabled={disabled}
+				ref={ref}
 				{...props}
 			>
 				<Icon color="inherit" size="md" />
diff --git a/packages/react/src/combobox/ComboboxBase/ComboboxMultiBase.tsx b/packages/react/src/combobox/ComboboxBase/ComboboxMultiBase.tsx
index 89de97602459..cdfe1fe9d303 100644
--- a/packages/react/src/combobox/ComboboxBase/ComboboxMultiBase.tsx
+++ b/packages/react/src/combobox/ComboboxBase/ComboboxMultiBase.tsx
@@ -182,15 +182,15 @@ export function ComboboxMultiBase<Option extends DefaultComboboxOption>({
 
 	return (
 		<Field
-			label={label}
-			labelId={labelId}
 			hideOptionalLabel={hideOptionalLabel}
-			required={required}
 			hint={hint}
+			id={inputId}
+			invalid={invalid}
+			label={label}
+			labelId={labelId}
 			maxWidth={maxWidthProp}
 			message={message}
-			invalid={invalid}
-			id={inputId}
+			required={required}
 		>
 			{(a11yProps) => (
 				<div
@@ -199,17 +199,17 @@ export function ComboboxMultiBase<Option extends DefaultComboboxOption>({
 					onClick={handleFieldContainerClick}
 				>
 					<Flex
-						ref={fieldContainerRef}
-						gap={0.5}
-						flexWrap="wrap"
 						alignItems="center"
 						css={styles.container}
+						flexWrap="wrap"
+						gap={0.5}
+						ref={fieldContainerRef}
 					>
 						{selectedItems.map((item, idx) => (
 							<ComboboxTag
+								disabled={disabled}
 								key={`selected-item-${idx}`}
 								onRemove={() => multiSelection.removeSelectedItem(item)}
-								disabled={disabled}
 								{...multiSelection.getSelectedItemProps({
 									selectedItem: item,
 									index: idx,
diff --git a/packages/react/src/combobox/ComboboxBase/ComboboxSearchIcon.tsx b/packages/react/src/combobox/ComboboxBase/ComboboxSearchIcon.tsx
index 518963c04c1c..f6be01ce46dc 100644
--- a/packages/react/src/combobox/ComboboxBase/ComboboxSearchIcon.tsx
+++ b/packages/react/src/combobox/ComboboxBase/ComboboxSearchIcon.tsx
@@ -6,8 +6,6 @@ export type ComboboxSearchIconProps = { disabled?: boolean };
 export function ComboboxSearchIcon({ disabled }: ComboboxSearchIconProps) {
 	return (
 		<SearchIcon
-			size="md"
-			weight="regular"
 			color="muted"
 			css={{
 				position: 'absolute',
@@ -17,6 +15,8 @@ export function ComboboxSearchIcon({ disabled }: ComboboxSearchIconProps) {
 				pointerEvents: 'none',
 				opacity: disabled ? 0.3 : undefined,
 			}}
+			size="md"
+			weight="regular"
 		/>
 	);
 }
diff --git a/packages/react/src/combobox/ComboboxBase/ComboboxTag.tsx b/packages/react/src/combobox/ComboboxBase/ComboboxTag.tsx
index ac9ecc6c714e..eb014b6e31b7 100644
--- a/packages/react/src/combobox/ComboboxBase/ComboboxTag.tsx
+++ b/packages/react/src/combobox/ComboboxBase/ComboboxTag.tsx
@@ -19,15 +19,9 @@ export const ComboboxTag = forwardRef<HTMLButtonElement, ComboboxTagProps>(
 	function ComboboxTag({ disabled, children, onRemove, ...props }, ref) {
 		return (
 			<Flex
-				as="span"
-				inline
 				alignItems="center"
+				as="span"
 				border
-				rounded
-				paddingLeft={0.5}
-				paddingRight={0.25}
-				gap={0.25}
-				fontSize="sm"
 				color="text"
 				css={{
 					cursor: 'default',
@@ -37,12 +31,18 @@ export const ComboboxTag = forwardRef<HTMLButtonElement, ComboboxTagProps>(
 						color: boxPalette.foregroundMuted,
 					}),
 				}}
+				fontSize="sm"
+				gap={0.25}
+				inline
+				paddingLeft={0.5}
+				paddingRight={0.25}
+				rounded
 			>
 				{children}
 				<Flex
 					alignItems="center"
-					as="button"
 					aria-label={`Remove ${children}`}
+					as="button"
 					css={{
 						background: 'transparent',
 						cursor: 'pointer',
diff --git a/packages/react/src/combobox/ComboboxMulti.stories.tsx b/packages/react/src/combobox/ComboboxMulti.stories.tsx
index b7e9b553dd4b..e8c1349d785e 100644
--- a/packages/react/src/combobox/ComboboxMulti.stories.tsx
+++ b/packages/react/src/combobox/ComboboxMulti.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta<typeof ComboboxMulti> = {
 	component: ComboboxMulti,
 	render: function ComboboxMultiStory(props) {
 		const [value, setValue] = useState<Option[]>([]);
-		return <ComboboxMulti {...props} value={value} onChange={setValue} />;
+		return <ComboboxMulti {...props} onChange={setValue} value={value} />;
 	},
 };
 
@@ -75,28 +75,28 @@ export const CustomRender: Story = {
 		return (
 			<ComboboxMulti
 				label="Search users"
-				value={value}
 				onChange={setValue}
 				options={NAME_OPTIONS}
 				renderItem={(item, inputValue) => (
 					<ComboboxRenderItem
-						itemLabel={item.label}
-						inputValue={inputValue}
-						secondaryText={`Role: ${item.jobTitle}`}
-						tertiaryText={`Job: ${item.status}`}
 						beforeElement={
 							<Avatar name={item.fullName} size="sm" tone="action" />
 						}
 						endElement={
 							item.unreadMessageCount > 0 ? (
 								<NotificationBadge
-									value={item.unreadMessageCount}
 									tone="action"
+									value={item.unreadMessageCount}
 								/>
 							) : null
 						}
+						inputValue={inputValue}
+						itemLabel={item.label}
+						secondaryText={`Role: ${item.jobTitle}`}
+						tertiaryText={`Job: ${item.status}`}
 					/>
 				)}
+				value={value}
 			/>
 		);
 	},
diff --git a/packages/react/src/combobox/ComboboxMulti.test.tsx b/packages/react/src/combobox/ComboboxMulti.test.tsx
index 1bd03fdc3802..c7b390866bde 100644
--- a/packages/react/src/combobox/ComboboxMulti.test.tsx
+++ b/packages/react/src/combobox/ComboboxMulti.test.tsx
@@ -22,8 +22,8 @@ type Option = (typeof STATE_OPTIONS)[number];
 function renderComboboxMulti(props?: Partial<ComboboxMultiProps<Option>>) {
 	return render(
 		<ComboboxMulti
-			label="Find your state"
 			hint="Start typing to see results"
+			label="Find your state"
 			options={STATE_OPTIONS}
 			{...props}
 		/>
diff --git a/packages/react/src/combobox/ComboboxMulti.tsx b/packages/react/src/combobox/ComboboxMulti.tsx
index 1520b452d67c..dac22805a975 100644
--- a/packages/react/src/combobox/ComboboxMulti.tsx
+++ b/packages/react/src/combobox/ComboboxMulti.tsx
@@ -190,9 +190,9 @@ export function ComboboxMulti<Option extends DefaultComboboxOption>({
 		<ComboboxMultiBase
 			block={block}
 			combobox={combobox}
-			multiSelection={multiSelection}
-			inputItems={items}
 			inputId={inputId}
+			inputItems={items}
+			multiSelection={multiSelection}
 			selectedItems={selectedItems}
 			setSelectedItems={setSelectedItems}
 			{...props}
diff --git a/packages/react/src/combobox/ComboboxRenderItem.stories.tsx b/packages/react/src/combobox/ComboboxRenderItem.stories.tsx
index 05bf111630f4..4f21ae55bc1c 100644
--- a/packages/react/src/combobox/ComboboxRenderItem.stories.tsx
+++ b/packages/react/src/combobox/ComboboxRenderItem.stories.tsx
@@ -76,7 +76,7 @@ export const WithEndElement: Story = {
 		beforeElement: (
 			<Avatar name={nameOption.fullName} size="sm" tone="action" />
 		),
-		endElement: <NotificationBadge value={2} tone="action" />,
+		endElement: <NotificationBadge tone="action" value={2} />,
 	},
 };
 
diff --git a/packages/react/src/content/BaseContent.tsx b/packages/react/src/content/BaseContent.tsx
index 3b5b9f8acd80..4e4121a78594 100644
--- a/packages/react/src/content/BaseContent.tsx
+++ b/packages/react/src/content/BaseContent.tsx
@@ -31,19 +31,19 @@ export function BaseContent({
 		<ContentSpacingContext.Provider value={paddingY}>
 			<Flex
 				as={as}
-				justifyContent="center"
-				palette={palette}
 				background={background}
-				id={id}
 				className={className}
+				id={id}
+				justifyContent="center"
+				palette={palette}
 				tabIndex={tabIndex}
 			>
 				<Box
-					width="100%"
 					maxWidth={tokens.maxWidth.container}
-					paddingTop={paddingYMap[paddingY].top}
 					paddingBottom={paddingYMap[paddingY].bottom}
+					paddingTop={paddingYMap[paddingY].top}
 					paddingX={tokens.containerPadding}
+					width="100%"
 				>
 					{children}
 				</Box>
diff --git a/packages/react/src/control-group/ControlGroup.stories.tsx b/packages/react/src/control-group/ControlGroup.stories.tsx
index 280a868aa83d..1723053b99ca 100644
--- a/packages/react/src/control-group/ControlGroup.stories.tsx
+++ b/packages/react/src/control-group/ControlGroup.stories.tsx
@@ -28,7 +28,7 @@ function CheckboxTemplate({
 	);
 	const isChecked = (key: string) => value.includes(key);
 	return (
-		<ControlGroup label={label} block={block} {...props}>
+		<ControlGroup block={block} label={label} {...props}>
 			<Checkbox checked={isChecked('email')} onChange={handlerForKey('email')}>
 				Email
 			</Checkbox>
@@ -96,7 +96,7 @@ function RadioTemplate({
 	const handlerForKey = useCallback((key: string) => () => setValue(key), []);
 	const isChecked = (key: string) => key === value;
 	return (
-		<ControlGroup label={label} block={block} {...props}>
+		<ControlGroup block={block} label={label} {...props}>
 			<Radio checked={isChecked('email')} onChange={handlerForKey('email')}>
 				Email
 			</Radio>
diff --git a/packages/react/src/control-group/ControlGroup.tsx b/packages/react/src/control-group/ControlGroup.tsx
index 47a9752c4287..7870f1666a4e 100644
--- a/packages/react/src/control-group/ControlGroup.tsx
+++ b/packages/react/src/control-group/ControlGroup.tsx
@@ -54,31 +54,31 @@ export const ControlGroup = ({
 			name={name}
 			required={required}
 		>
-			<FieldContainer invalid={invalid} id={groupId}>
-				<Box as="fieldset" aria-describedby={describedBy}>
+			<FieldContainer id={groupId} invalid={invalid}>
+				<Box aria-describedby={describedBy} as="fieldset">
 					{label ? (
 						<FieldLabel
 							as="legend"
-							required={required}
 							hideOptionalLabel={hideOptionalLabel}
+							required={required}
 						>
 							{label}
 						</FieldLabel>
 					) : null}
 					<Stack
-						gap={0.5}
 						css={{ marginTop: label ? mapSpacing(0.5) : undefined }}
+						gap={0.5}
 					>
 						{hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}
 						{message && invalid ? (
 							<FieldMessage id={messageId}>{message}</FieldMessage>
 						) : null}
 						<Flex
-							gap={1}
 							flexDirection={block ? 'column' : 'row'}
 							flexWrap={block ? undefined : 'wrap'}
-							width="100%"
+							gap={1}
 							paddingTop={0.5}
+							width="100%"
 						>
 							{children}
 						</Flex>
diff --git a/packages/react/src/core/tokens.stories.tsx b/packages/react/src/core/tokens.stories.tsx
index c90999e2ee5c..40d7f4dd76e8 100644
--- a/packages/react/src/core/tokens.stories.tsx
+++ b/packages/react/src/core/tokens.stories.tsx
@@ -27,21 +27,21 @@ export const Color = () => {
 		<Stack gap={1.5}>
 			{palettes.map((palette) => (
 				<Stack
-					key={palette}
+					background="body"
 					gap={2}
+					key={palette}
 					padding={1.5}
 					palette={palette}
-					background="body"
 				>
 					<H2>{palette}</H2>
 					<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 6 }}>
 						{boxPaletteTokens.map((token) => (
-							<Card key={token} as="li" shadow>
+							<Card as="li" key={token} shadow>
 								<Box
-									width="100%"
-									height="6rem"
 									background="body"
 									css={{ backgroundColor: boxPalette[token] }}
+									height="6rem"
+									width="100%"
 								/>
 								<Box borderColor="muted" borderTop>
 									<CardInner>
@@ -59,30 +59,30 @@ export const Color = () => {
 
 const BackgroundRow = ({ palette }: { palette: 'light' | 'dark' }) => (
 	<Flex palette={palette} width="100%">
-		<Flex padding={2} background="body" flexGrow={1}>
-			<Box flexGrow={1} color="text" paddingY={2} paddingX={1}>
+		<Flex background="body" flexGrow={1} padding={2}>
+			<Box color="text" flexGrow={1} paddingX={1} paddingY={2}>
 				backgroundBody
 			</Box>
 			<Box
-				flexGrow={1}
+				background="shade"
 				color="text"
-				paddingY={2}
+				flexGrow={1}
 				paddingX={1}
-				background="shade"
+				paddingY={2}
 			>
 				backgroundShade
 			</Box>
 		</Flex>
-		<Flex padding={2} background="bodyAlt" flexGrow={1}>
-			<Box flexGrow={1} color="text" paddingY={2} paddingX={1}>
+		<Flex background="bodyAlt" flexGrow={1} padding={2}>
+			<Box color="text" flexGrow={1} paddingX={1} paddingY={2}>
 				backgroundBodyAlt
 			</Box>
 			<Box
-				flexGrow={1}
+				background="shadeAlt"
 				color="text"
-				paddingY={2}
+				flexGrow={1}
 				paddingX={1}
-				background="shadeAlt"
+				paddingY={2}
 			>
 				backgroundShadeAlt
 			</Box>
@@ -106,10 +106,10 @@ export const Backgrounds = () => {
 export const Space = () => {
 	const tokens: Spacing[] = [0, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 5, 6];
 	return (
-		<Stack as="ul" gap={1} fontSize="xs">
+		<Stack as="ul" fontSize="xs" gap={1}>
 			{tokens.map((token) => (
-				<Flex key={token} as="li" gap={1} alignItems="center">
-					<Box height="1rem" background="bodyAlt" width={mapSpacing(token)} />
+				<Flex alignItems="center" as="li" gap={1} key={token}>
+					<Box background="bodyAlt" height="1rem" width={mapSpacing(token)} />
 					<Text fontSize="xs">
 						{token} ({mapSpacing(token)})
 					</Text>
diff --git a/packages/react/src/date-picker/Calendar.stories.tsx b/packages/react/src/date-picker/Calendar.stories.tsx
index d374f9f9d97b..f5afd01483d4 100644
--- a/packages/react/src/date-picker/Calendar.stories.tsx
+++ b/packages/react/src/date-picker/Calendar.stories.tsx
@@ -12,7 +12,7 @@ const meta: Meta<CalendarSingleProps & CalendarProviderProps> = {
 		const [value, setValue] = useState<Date>();
 		return (
 			<CalendarProvider yearRange={yearRange}>
-				<CalendarSingle selected={value} onSelect={setValue} {...props} />
+				<CalendarSingle onSelect={setValue} selected={value} {...props} />
 			</CalendarProvider>
 		);
 	},
@@ -60,7 +60,7 @@ export const Range = () => {
 	const [range, setRange] = useState<DateRange>();
 	return (
 		<CalendarProvider yearRange={undefined}>
-			<CalendarRange selected={range} numberOfMonths={2} onSelect={setRange} />
+			<CalendarRange numberOfMonths={2} onSelect={setRange} selected={range} />
 		</CalendarProvider>
 	);
 };
diff --git a/packages/react/src/date-picker/Calendar.tsx b/packages/react/src/date-picker/Calendar.tsx
index 93259cb42d3d..bc84269eafca 100644
--- a/packages/react/src/date-picker/Calendar.tsx
+++ b/packages/react/src/date-picker/Calendar.tsx
@@ -173,8 +173,8 @@ const calendarComponents: CustomComponents = {
 				)}
 				{CaptionLabelComponent && (
 					<CaptionLabelComponent
-						id={props.id}
 						displayMonth={props.displayMonth}
+						id={props.id}
 					/>
 				)}
 				{isLast && (
@@ -265,37 +265,32 @@ const calendarComponents: CustomComponents = {
 
 		return yearOptions.length > 1 ? (
 			<Fragment>
-				<h2
-					id={id}
-					aria-live="polite"
-					aria-atomic="true"
-					css={visuallyHiddenStyles}
-				>
+				<h2 aria-atomic aria-live="polite" css={visuallyHiddenStyles} id={id}>
 					{formattedMonthYear}
 				</h2>
-				<Flex justifyContent="center" gap={0.5} width="100%">
+				<Flex gap={0.5} justifyContent="center" width="100%">
 					<YearMonthSelect
 						label="Month"
+						onChange={onMonthChange}
 						options={monthOptions}
 						value={month}
-						onChange={onMonthChange}
 					/>
 					<YearMonthSelect
 						label="Year"
+						onChange={onYearChange}
 						options={yearOptions}
 						value={year}
-						onChange={onYearChange}
 					/>
 				</Flex>
 			</Fragment>
 		) : (
 			<Box
-				as="h2"
-				id={id}
+				aria-atomic
 				aria-live="polite"
-				aria-atomic="true"
-				fontWeight="bold"
+				as="h2"
 				fontSize="lg"
+				fontWeight="bold"
+				id={id}
 				lineHeight="heading"
 			>
 				{formattedMonthYear}
@@ -349,9 +344,9 @@ const calendarComponents: CustomComponents = {
 			<tr className={classNames.row} style={styles.row}>
 				{props.dates.map((date) => (
 					<DayComponent
-						key={getUnixTime(date)}
-						displayMonth={props.displayMonth}
 						date={date}
+						displayMonth={props.displayMonth}
+						key={getUnixTime(date)}
 					/>
 				))}
 			</tr>
@@ -433,20 +428,13 @@ function YearMonthSelect({
 	const selectId = `calendar-${autoId}-select`;
 	return (
 		<div css={{ position: 'relative' }}>
-			<label htmlFor={selectId} css={visuallyHiddenStyles}>
+			<label css={visuallyHiddenStyles} htmlFor={selectId}>
 				{label}
 			</label>
 			<Box
 				as="select"
 				autoComplete="off"
-				id={selectId}
-				value={value}
-				onChange={onChange}
-				rounded
-				focusRingFor="keyboard"
-				paddingRight={1.5}
 				color="text"
-				fontWeight="bold"
 				css={{
 					appearance: 'none',
 					background: 'none',
@@ -461,6 +449,13 @@ function YearMonthSelect({
 						fontSize: `${tokens.fontSize.xs.md}rem`,
 					},
 				}}
+				focusRingFor="keyboard"
+				fontWeight="bold"
+				id={selectId}
+				onChange={onChange}
+				paddingRight={1.5}
+				rounded
+				value={value}
 			>
 				{options.map((option) => (
 					<option key={option.value} value={option.value}>
@@ -469,7 +464,6 @@ function YearMonthSelect({
 				))}
 			</Box>
 			<ChevronDownIcon
-				weight="bold"
 				css={{
 					position: 'absolute',
 					top: '50%',
@@ -478,6 +472,7 @@ function YearMonthSelect({
 					pointerEvents: 'none',
 					color: boxPalette.foregroundAction,
 				}}
+				weight="bold"
 			/>
 		</div>
 	);
diff --git a/packages/react/src/date-picker/CalendarContainer.tsx b/packages/react/src/date-picker/CalendarContainer.tsx
index d8efeee159bf..85a6b1b4f6a1 100644
--- a/packages/react/src/date-picker/CalendarContainer.tsx
+++ b/packages/react/src/date-picker/CalendarContainer.tsx
@@ -11,7 +11,7 @@ export function CalendarContainer({ children }: CalendarContainerProps) {
 	return (
 		<Box
 			aria-label="Choose date"
-			aria-modal="true"
+			aria-modal
 			css={reactDayPickerStyles}
 			display="inline-block"
 			paddingX={[0.25, 1]}
@@ -34,7 +34,7 @@ export function CalendarRangeContainer({
 	return (
 		<Box
 			aria-label="Choose date range"
-			aria-modal="true"
+			aria-modal
 			css={[reactDayPickerStyles, reactDayRangePickerStyles(dateRange)]}
 			display="inline-block"
 			paddingX={[0.25, 1]}
diff --git a/packages/react/src/date-picker/DatePicker.stories.tsx b/packages/react/src/date-picker/DatePicker.stories.tsx
index 8ede35b4febe..ec34298a6dd7 100644
--- a/packages/react/src/date-picker/DatePicker.stories.tsx
+++ b/packages/react/src/date-picker/DatePicker.stories.tsx
@@ -8,7 +8,7 @@ import { DatePicker, DatePickerProps } from './DatePicker';
 
 function ControlledDatePicker(props: DatePickerProps) {
 	const [value, setValue] = useState<Date>();
-	return <DatePicker {...props} value={value} onChange={setValue} />;
+	return <DatePicker {...props} onChange={setValue} value={value} />;
 }
 
 const meta: Meta<typeof DatePicker> = {
@@ -99,13 +99,13 @@ export const ClearableExample: Story = {
 	render: function Render(props) {
 		const [value, setValue] = useState<Date>();
 		return (
-			<Stack gap={4} alignItems="flex-start">
-				<DatePicker {...props} value={value} onChange={setValue} />
+			<Stack alignItems="flex-start" gap={4}>
+				<DatePicker {...props} onChange={setValue} value={value} />
 				<ButtonGroup>
 					<Button onClick={() => setValue(new Date(1999, 11, 25))}>
 						Set pre-defined date
 					</Button>
-					<Button variant="secondary" onClick={() => setValue(undefined)}>
+					<Button onClick={() => setValue(undefined)} variant="secondary">
 						Clear
 					</Button>
 				</ButtonGroup>
diff --git a/packages/react/src/date-picker/DatePicker.test.tsx b/packages/react/src/date-picker/DatePicker.test.tsx
index 71482142d5a3..736abdc53210 100644
--- a/packages/react/src/date-picker/DatePicker.test.tsx
+++ b/packages/react/src/date-picker/DatePicker.test.tsx
@@ -59,9 +59,9 @@ function ControlledDatePicker({
 
 	return (
 		<DatePicker
-			value={value}
 			onChange={onChange}
 			onInputChange={setValue}
+			value={value}
 			{...props}
 		/>
 	);
@@ -96,8 +96,8 @@ function DatePickerInsideForm({
 	});
 	return (
 		<form
-			onSubmit={handleSubmit((value) => onSubmit(value), onError)}
 			noValidate
+			onSubmit={handleSubmit((value) => onSubmit(value), onError)}
 		>
 			<Controller
 				control={control}
@@ -107,10 +107,10 @@ function DatePickerInsideForm({
 						inputRef={ref}
 						label="Date"
 						{...field}
-						onInputChange={field.onChange}
 						id="date"
 						invalid={Boolean(errors.date?.message)}
 						message={errors.date?.message}
+						onInputChange={field.onChange}
 						required={required}
 					/>
 				)}
@@ -173,7 +173,7 @@ describe('DatePicker', () => {
 		const dateString = '01/01/2000';
 		const date = parseDate(dateString) as Date;
 
-		render(<ControlledDatePicker label="Example" initialValue={date} />);
+		render(<ControlledDatePicker initialValue={date} label="Example" />);
 
 		// The input should be a formatted display value of `initialValue`
 		expect(
@@ -387,9 +387,9 @@ describe('DatePicker', () => {
 
 		render(
 			<DatePickerInsideForm
-				required={false}
-				onSubmit={onSubmit}
 				onError={onError}
+				onSubmit={onSubmit}
+				required={false}
 			/>
 		);
 
@@ -410,9 +410,9 @@ describe('DatePicker', () => {
 
 		render(
 			<DatePickerInsideForm
-				required={false}
-				onSubmit={onSubmit}
 				onError={onError}
+				onSubmit={onSubmit}
+				required={false}
 			/>
 		);
 
@@ -430,9 +430,9 @@ describe('DatePicker', () => {
 
 		render(
 			<DatePickerInsideForm
-				required={false}
-				onSubmit={onSubmit}
 				onError={onError}
+				onSubmit={onSubmit}
+				required={false}
 			/>
 		);
 
@@ -467,9 +467,9 @@ describe('DatePicker', () => {
 
 		render(
 			<DatePickerInsideForm
-				required={false}
-				onSubmit={onSubmit}
 				onError={onError}
+				onSubmit={onSubmit}
+				required={false}
 			/>
 		);
 
@@ -503,11 +503,7 @@ describe('DatePicker', () => {
 		const onError = jest.fn();
 
 		render(
-			<DatePickerInsideForm
-				required={true}
-				onSubmit={onSubmit}
-				onError={onError}
-			/>
+			<DatePickerInsideForm onError={onError} onSubmit={onSubmit} required />
 		);
 
 		// Type in an invalid value
diff --git a/packages/react/src/date-picker/DatePicker.tsx b/packages/react/src/date-picker/DatePicker.tsx
index 6709f12e5a39..3213f59ded37 100644
--- a/packages/react/src/date-picker/DatePicker.tsx
+++ b/packages/react/src/date-picker/DatePicker.tsx
@@ -228,22 +228,22 @@ export const DatePicker = ({
 		<div {...popover.getReferenceProps()}>
 			<DateInput
 				{...props}
-				dateFormat={dateFormat}
-				maxWidth={maxWidth}
-				invalid={{ field: invalid, input: invalid }}
-				ref={inputRef}
-				value={inputValue}
-				onBlur={onInputBlur}
-				onChange={onInputChange}
-				buttonRef={triggerRef}
-				buttonOnClick={() => {
-					toggleCalendar();
-					setHasCalendarOpened(true);
-				}}
 				buttonAriaLabel={getDateInputButtonAriaLabel({
 					allowedDateFormats,
 					value: inputValue,
 				})}
+				buttonOnClick={() => {
+					toggleCalendar();
+					setHasCalendarOpened(true);
+				}}
+				buttonRef={triggerRef}
+				dateFormat={dateFormat}
+				invalid={{ field: invalid, input: invalid }}
+				maxWidth={maxWidth}
+				onBlur={onInputBlur}
+				onChange={onInputChange}
+				ref={inputRef}
+				value={inputValue}
 			/>
 			<CalendarProvider yearRange={yearRange}>
 				{/* We duplicate the Popover + Calendar as a workaround for a bug that scrolls the page to the top on initial open of the calandar - https://github.com/gpbl/react-day-picker/discussions/2059 */}
@@ -257,8 +257,8 @@ export const DatePicker = ({
 					// If the calendar has _not_ opened at least once, we conditionally render only the children of the Popover, i.e. the Calendar to prevent the UI jumping about everytime the calendar is opened
 					<Popover
 						{...popoverProps}
-						visibility={isCalendarOpen ? 'visible' : 'hidden'}
 						css={{ minHeight: '200px' }} // Using 200px as a safety buffer so that when opening the date picker for the first time and the input is at the bottom of the screen, it can't render the calendar almost hidden, e.g. 2px height.
+						visibility={isCalendarOpen ? 'visible' : 'hidden'}
 					>
 						{isCalendarOpen && <CalendarSingle {...calendarProps} />}
 					</Popover>
diff --git a/packages/react/src/date-picker/DatePickerInput.tsx b/packages/react/src/date-picker/DatePickerInput.tsx
index d8879ed1dcef..31bb369e13ba 100644
--- a/packages/react/src/date-picker/DatePickerInput.tsx
+++ b/packages/react/src/date-picker/DatePickerInput.tsx
@@ -66,35 +66,30 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
 
 		return (
 			<Field
-				label={label}
-				maxWidth={maxWidthProp}
-				secondaryLabel={secondaryLabel}
 				hideOptionalLabel={hideOptionalLabel}
-				required={required}
 				hint={hint}
-				message={message}
-				invalid={invalid.field}
 				id={id}
+				invalid={invalid.field}
+				label={label}
+				maxWidth={maxWidthProp}
+				message={message}
+				required={required}
+				secondaryLabel={secondaryLabel}
 			>
 				{(a11yProps) => (
 					<Flex alignItems="flex-end" css={{ maxWidth }}>
 						<input
+							autoComplete="off"
+							css={{ ...styles, maxWidth: 'unset' }}
 							ref={ref}
 							type="text"
-							css={{ ...styles, maxWidth: 'unset' }}
-							autoComplete="off"
 							{...a11yProps}
 							aria-invalid={Boolean(invalid.field || invalid.input)}
 							{...props}
-							value={value}
 							disabled={disabled}
+							value={value}
 						/>
 						<Button
-							type="button"
-							ref={buttonRef}
-							onClick={buttonOnClick}
-							disabled={disabled}
-							variant="secondary"
 							aria-label={buttonAriaLabel}
 							css={{
 								borderTopLeftRadius: 0,
@@ -102,8 +97,13 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
 								paddingLeft: mapSpacing(1),
 								paddingRight: mapSpacing(1),
 							}}
+							disabled={disabled}
+							onClick={buttonOnClick}
+							ref={buttonRef}
+							type="button"
+							variant="secondary"
 						>
-							<CalendarIcon size="md" css={{ display: 'block' }} />
+							<CalendarIcon css={{ display: 'block' }} size="md" />
 						</Button>
 					</Flex>
 				)}
diff --git a/packages/react/src/date-range-picker/DateRangePicker.stories.tsx b/packages/react/src/date-range-picker/DateRangePicker.stories.tsx
index d7e230eb7132..b74a39a50da1 100644
--- a/packages/react/src/date-range-picker/DateRangePicker.stories.tsx
+++ b/packages/react/src/date-range-picker/DateRangePicker.stories.tsx
@@ -18,10 +18,10 @@ function ControlledDateRangePicker(props: DateRangePickerProps) {
 	return (
 		<DateRangePicker
 			{...props}
-			value={range}
 			onChange={setRange}
 			onFromInputChange={(from) => setRange((range) => ({ ...range, from }))}
 			onToInputChange={(to) => setRange((range) => ({ ...range, to }))}
+			value={range}
 		/>
 	);
 }
@@ -151,13 +151,13 @@ export const ClearableExample: Story = {
 			to: undefined,
 		});
 		return (
-			<Stack gap={4} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={4}>
 				<DateRangePicker
 					{...props}
-					value={range}
 					onChange={setRange}
 					onFromInputChange={(from) => setRange({ ...range, from })}
 					onToInputChange={(to) => setRange({ ...range, to })}
+					value={range}
 				/>
 				<ButtonGroup>
 					<Button
@@ -171,8 +171,8 @@ export const ClearableExample: Story = {
 						Set pre-defined range
 					</Button>
 					<Button
-						variant="secondary"
 						onClick={() => setRange({ from: undefined, to: undefined })}
+						variant="secondary"
 					>
 						Clear range
 					</Button>
diff --git a/packages/react/src/date-range-picker/DateRangePicker.test.tsx b/packages/react/src/date-range-picker/DateRangePicker.test.tsx
index e4516e14e1fe..bf1f110104c4 100644
--- a/packages/react/src/date-range-picker/DateRangePicker.test.tsx
+++ b/packages/react/src/date-range-picker/DateRangePicker.test.tsx
@@ -66,10 +66,10 @@ function ControlledDateRangePicker({
 
 	return (
 		<DateRangePicker
-			value={value}
 			onChange={onChange}
 			onFromInputChange={(from) => setValue({ ...value, from })}
 			onToInputChange={(to) => setValue({ ...value, to })}
+			value={value}
 			{...props}
 		/>
 	);
@@ -120,27 +120,27 @@ function DateRangePickerInsideForm({
 	});
 	return (
 		<form
-			onSubmit={handleSubmit((value) => onSubmit(value), onError)}
 			noValidate
+			onSubmit={handleSubmit((value) => onSubmit(value), onError)}
 		>
 			<Controller
 				control={control}
 				name="dateRange"
 				render={({ field: { ref, value, onChange, ...field } }) => (
 					<DateRangePicker
-						legend="Date range"
 						fromInputRef={ref}
+						legend="Date range"
 						{...field}
-						value={value}
-						onChange={onChange}
-						onFromInputChange={(from) => onChange({ ...value, from })}
-						onToInputChange={(to) => onChange({ ...value, to })}
 						fromInvalid={Boolean(errors.dateRange?.from?.message)}
-						toInvalid={Boolean(errors.dateRange?.to?.message)}
 						message={
 							errors.dateRange?.from?.message || errors.dateRange?.to?.message
 						}
+						onChange={onChange}
+						onFromInputChange={(from) => onChange({ ...value, from })}
+						onToInputChange={(to) => onChange({ ...value, to })}
 						required
+						toInvalid={Boolean(errors.dateRange?.to?.message)}
+						value={value}
 					/>
 				)}
 			/>
@@ -760,9 +760,9 @@ describe('DateRangePicker', () => {
 
 		render(
 			<DateRangePickerInsideForm
-				required={false}
-				onSubmit={onSubmit}
 				onError={onError}
+				onSubmit={onSubmit}
+				required={false}
 			/>
 		);
 
@@ -802,9 +802,9 @@ describe('DateRangePicker', () => {
 
 		render(
 			<DateRangePickerInsideForm
-				required={false}
-				onSubmit={onSubmit}
 				onError={onError}
+				onSubmit={onSubmit}
+				required={false}
 			/>
 		);
 
@@ -824,9 +824,9 @@ describe('DateRangePicker', () => {
 
 		render(
 			<DateRangePickerInsideForm
-				required={false}
-				onSubmit={onSubmit}
 				onError={onError}
+				onSubmit={onSubmit}
+				required={false}
 			/>
 		);
 
@@ -892,9 +892,9 @@ describe('DateRangePicker', () => {
 
 		render(
 			<DateRangePickerInsideForm
-				required={false}
-				onSubmit={onSubmit}
 				onError={onError}
+				onSubmit={onSubmit}
+				required={false}
 			/>
 		);
 
@@ -944,9 +944,9 @@ describe('DateRangePicker', () => {
 
 		render(
 			<DateRangePickerInsideForm
-				required={true}
-				onSubmit={onSubmit}
 				onError={onError}
+				onSubmit={onSubmit}
+				required
 			/>
 		);
 
diff --git a/packages/react/src/date-range-picker/DateRangePicker.tsx b/packages/react/src/date-range-picker/DateRangePicker.tsx
index aa8e7cda9470..e8215ba26a7b 100644
--- a/packages/react/src/date-range-picker/DateRangePicker.tsx
+++ b/packages/react/src/date-range-picker/DateRangePicker.tsx
@@ -355,71 +355,71 @@ export const DateRangePicker = ({
 	);
 
 	return (
-		<FieldContainer invalid={invalid} id={fieldsetId}>
+		<FieldContainer id={fieldsetId} invalid={invalid}>
 			<Box as="fieldset">
 				{/* Legend needs to be the first element, so if none is supplied render a visually hidden element. */}
 				<FieldLabel
 					as="legend"
-					required={required}
-					hideOptionalLabel={hideOptionalLabel}
 					css={legend ? undefined : visuallyHiddenStyles}
+					hideOptionalLabel={hideOptionalLabel}
+					required={required}
 				>
 					{legend ?? 'Date range'}
 				</FieldLabel>
 				<Stack
-					gap={0.5}
 					css={{ marginTop: legend ? mapSpacing(0.5) : undefined }}
+					gap={0.5}
 				>
 					{hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}
 					{message && invalid ? (
 						<FieldMessage id={messageId}>{message}</FieldMessage>
 					) : null}
-					<Flex {...popover.getReferenceProps()} flexWrap="wrap" inline gap={1}>
+					<Flex {...popover.getReferenceProps()} flexWrap="wrap" gap={1} inline>
 						<DateInput
 							aria-describedby={
 								fromDescribedByIds.length > 0 ? fromDescribedByIds : null
 							}
-							ref={fromInputRef}
-							label={fromLabel}
-							hideOptionalLabel={hideOptionalLabel || Boolean(legend)}
-							value={fromInputValue}
-							onBlur={onFromInputBlur}
-							onChange={onFromInputChange}
-							buttonRef={fromTriggerRef}
-							buttonOnClick={onFromTriggerClick}
 							buttonAriaLabel={getDateInputButtonAriaLabel({
 								allowedDateFormats,
 								rangeName: 'start',
 								value: fromInputValue,
 							})}
-							disabled={disabled}
-							required={required}
-							invalid={{ field: false, input: fromInvalid }}
+							buttonOnClick={onFromTriggerClick}
+							buttonRef={fromTriggerRef}
 							dateFormat={dateFormat}
+							disabled={disabled}
+							hideOptionalLabel={hideOptionalLabel || Boolean(legend)}
 							id={fromId}
+							invalid={{ field: false, input: fromInvalid }}
+							label={fromLabel}
+							onBlur={onFromInputBlur}
+							onChange={onFromInputChange}
+							ref={fromInputRef}
+							required={required}
+							value={fromInputValue}
 						/>
 						<DateInput
 							aria-describedby={
 								toDescribedByIds.length > 0 ? toDescribedByIds : null
 							}
-							ref={toInputRef}
-							label={toLabel}
-							hideOptionalLabel={hideOptionalLabel || Boolean(legend)}
-							value={toInputValue}
-							onBlur={onToInputBlur}
-							onChange={onToInputChange}
-							buttonRef={toTriggerRef}
-							buttonOnClick={onToTriggerClick}
 							buttonAriaLabel={getDateInputButtonAriaLabel({
 								allowedDateFormats,
 								rangeName: 'end',
 								value: toInputValue,
 							})}
-							disabled={disabled}
-							required={required}
-							invalid={{ field: false, input: toInvalid }}
+							buttonOnClick={onToTriggerClick}
+							buttonRef={toTriggerRef}
 							dateFormat={dateFormat}
+							disabled={disabled}
+							hideOptionalLabel={hideOptionalLabel || Boolean(legend)}
 							id={toId}
+							invalid={{ field: false, input: toInvalid }}
+							label={toLabel}
+							onBlur={onToInputBlur}
+							onChange={onToInputChange}
+							ref={toInputRef}
+							required={required}
+							value={toInputValue}
 						/>
 					</Flex>
 				</Stack>
diff --git a/packages/react/src/details/Details.tsx b/packages/react/src/details/Details.tsx
index cbd20abbcc90..2d25e37be613 100644
--- a/packages/react/src/details/Details.tsx
+++ b/packages/react/src/details/Details.tsx
@@ -20,7 +20,6 @@ export const Details = forwardRef<HTMLDetailsElement, DetailsProps>(
 	) {
 		return (
 			<details
-				ref={ref}
 				css={{
 					'&[open] summary svg:last-of-type': {
 						transform: 'rotate(180deg)',
@@ -29,18 +28,19 @@ export const Details = forwardRef<HTMLDetailsElement, DetailsProps>(
 						display: 'none',
 					},
 				}}
+				ref={ref}
 			>
 				<Flex
+					alignItems="center"
 					as="summary"
 					css={{
 						// iOS VoiceOver does not announce the expanded state of `summary` elements when they are inline.
 						// Here we're using `fit-content` to simulate the visual effect of an inline element while maintaining the correct announcement.
 						width: 'fit-content',
 					}}
-					link
 					focusRingFor="keyboard"
-					alignItems="center"
 					fontWeight="bold"
+					link
 					paddingY={0.5}
 					rounded
 				>
@@ -55,16 +55,16 @@ export const Details = forwardRef<HTMLDetailsElement, DetailsProps>(
 					)}
 					{label}
 					<ChevronDownIcon
-						weight="bold"
 						css={{ marginLeft: mapSpacing(0.25) }}
+						weight="bold"
 					/>
 				</Flex>
 				<Box
 					background={onBodyAlt ? 'shadeAlt' : 'shade'}
-					padding={1.5}
 					borderLeft
 					borderLeftWidth="xl"
 					highContrastOutline
+					padding={1.5}
 				>
 					{children}
 				</Box>
diff --git a/packages/react/src/direction-link/DirectionLink.tsx b/packages/react/src/direction-link/DirectionLink.tsx
index e52c426ce2bc..679a43807ff4 100644
--- a/packages/react/src/direction-link/DirectionLink.tsx
+++ b/packages/react/src/direction-link/DirectionLink.tsx
@@ -54,16 +54,16 @@ const BaseDirectionLink = ({
 	const iconLeft = direction === 'left';
 	return (
 		<Flex
+			alignItems="center"
 			as={as}
 			className={className}
-			inline
-			gap={0.5}
-			alignItems="center"
+			css={{ alignSelf: 'flex-start' }}
+			focusRingFor="keyboard"
 			fontFamily="body"
 			fontWeight="normal"
+			gap={0.5}
+			inline
 			link
-			focusRingFor="keyboard"
-			css={{ alignSelf: 'flex-start' }}
 			{...props}
 		>
 			{iconLeft ? <Icon size="sm" /> : null}
diff --git a/packages/react/src/drawer/Drawer.stories.tsx b/packages/react/src/drawer/Drawer.stories.tsx
index 097e457dc43f..e2a4fd0f181b 100644
--- a/packages/react/src/drawer/Drawer.stories.tsx
+++ b/packages/react/src/drawer/Drawer.stories.tsx
@@ -38,30 +38,30 @@ export const Basic: Story = {
 			<Fragment>
 				<Button onClick={open}>Open Drawer</Button>
 				<Drawer
-					isOpen={isOpen}
-					onClose={close}
-					title={props.title}
 					actions={
 						<ButtonGroup>
 							<Button onClick={close}>Primary</Button>
-							<Button variant="secondary" onClick={close}>
+							<Button onClick={close} variant="secondary">
 								Secondary
 							</Button>
-							<Button variant="tertiary" onClick={close}>
+							<Button onClick={close} variant="tertiary">
 								Tertiary
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isOpen}
+					onClose={close}
+					title={props.title}
 				>
 					<Select
-						label="Example filter"
 						hideOptionalLabel
-						placeholder="Please select"
+						label="Example filter"
 						options={[
 							{ value: 'a', label: 'Option A' },
 							{ value: 'b', label: 'Option B' },
 							{ value: 'c', label: 'Option C' },
 						]}
+						placeholder="Please select"
 					/>
 				</Drawer>
 			</Fragment>
@@ -80,9 +80,9 @@ export const MutedOverlay: Story = {
 				<Button onClick={open}>Open Drawer</Button>
 				<Drawer
 					isOpen={isOpen}
+					mutedOverlay
 					onClose={close}
 					title={props.title}
-					mutedOverlay
 				>
 					<Text>Draw content</Text>
 				</Drawer>
@@ -102,21 +102,21 @@ export const LargeWidth: Story = {
 			<Fragment>
 				<Button onClick={open}>Open Large Drawer</Button>
 				<Drawer
-					isOpen={isOpen}
-					onClose={close}
-					title={props.title}
-					width={props.width}
 					actions={
 						<ButtonGroup>
 							<Button onClick={close}>Primary</Button>
-							<Button variant="secondary" onClick={close}>
+							<Button onClick={close} variant="secondary">
 								Secondary
 							</Button>
-							<Button variant="tertiary" onClick={close}>
+							<Button onClick={close} variant="tertiary">
 								Tertiary
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isOpen}
+					onClose={close}
+					title={props.title}
+					width={props.width}
 				>
 					<Prose>
 						<p>
@@ -159,21 +159,21 @@ export const SmallPageContentLargeDrawerContent: Story = {
 			<Fragment>
 				<Button onClick={open}>Open Drawer</Button>
 				<Drawer
-					isOpen={isOpen}
-					onClose={close}
-					title={props.title}
-					width={props.width}
 					actions={
 						<ButtonGroup>
 							<Button onClick={close}>Primary</Button>
-							<Button variant="secondary" onClick={close}>
+							<Button onClick={close} variant="secondary">
 								Secondary
 							</Button>
-							<Button variant="tertiary" onClick={close}>
+							<Button onClick={close} variant="tertiary">
 								Tertiary
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isOpen}
+					onClose={close}
+					title={props.title}
+					width={props.width}
 				>
 					<LargeProseContent />
 				</Drawer>
@@ -193,21 +193,21 @@ export const LargePageContentLargeDrawerContent: Story = {
 				<Button onClick={open}>Open Drawer</Button>
 				<LargeProseContent />
 				<Drawer
-					isOpen={isOpen}
-					onClose={close}
-					title={props.title}
-					width={props.width}
 					actions={
 						<ButtonGroup>
 							<Button onClick={close}>Primary</Button>
-							<Button variant="secondary" onClick={close}>
+							<Button onClick={close} variant="secondary">
 								Secondary
 							</Button>
-							<Button variant="tertiary" onClick={close}>
+							<Button onClick={close} variant="tertiary">
 								Tertiary
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isOpen}
+					onClose={close}
+					title={props.title}
+					width={props.width}
 				>
 					<LargeProseContent />
 				</Drawer>
@@ -262,26 +262,26 @@ export const FiltersBasic: Story = {
 			<Fragment>
 				<Button onClick={openDrawer}>Open Drawer</Button>
 				<Drawer
-					isOpen={isDrawerOpen}
-					onClose={onCloseClick}
-					title={props.title}
 					actions={
 						<ButtonGroup>
 							<Button onClick={onApplyFiltersClick}>Apply filters</Button>
-							<Button variant="secondary" onClick={onClearFiltersClick}>
+							<Button onClick={onClearFiltersClick} variant="secondary">
 								Clear filters
 							</Button>
-							<Button variant="tertiary" onClick={onCloseClick}>
+							<Button onClick={onCloseClick} variant="tertiary">
 								Cancel
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isDrawerOpen}
+					onClose={onCloseClick}
+					title={props.title}
 				>
 					<FormStack>
 						<Select
-							label="Example filter"
 							hideOptionalLabel
-							placeholder="Please select"
+							label="Example filter"
+							onChange={(e) => updateFormState({ select: e.target.value })}
 							options={[
 								{ value: 'a', label: 'Option A' },
 								{ value: 'b', label: 'Option B' },
@@ -290,40 +290,40 @@ export const FiltersBasic: Story = {
 								{ value: 'e', label: 'Option E' },
 								{ value: 'f', label: 'Option F' },
 							]}
+							placeholder="Please select"
 							value={formState.select}
-							onChange={(e) => updateFormState({ select: e.target.value })}
 						/>
-						<ControlGroup label="Example filter" hideOptionalLabel block>
+						<ControlGroup block hideOptionalLabel label="Example filter">
 							<Radio
-								value="a"
 								checked={formState.radio === 'a'}
 								onChange={(e) =>
 									updateFormState({
 										radio: e.target.value,
 									})
 								}
+								value="a"
 							>
 								Option A
 							</Radio>
 							<Radio
-								value="b"
 								checked={formState.radio === 'b'}
 								onChange={(e) =>
 									updateFormState({
 										radio: e.target.value,
 									})
 								}
+								value="b"
 							>
 								Option B
 							</Radio>
 							<Radio
-								value="c"
 								checked={formState.radio === 'c'}
 								onChange={(e) =>
 									updateFormState({
 										radio: e.target.value,
 									})
 								}
+								value="c"
 							>
 								Option C
 							</Radio>
@@ -391,33 +391,33 @@ export const FiltersWithFieldsets: Story = {
 			<Fragment>
 				<Button onClick={openDrawer}>Open Drawer</Button>
 				<Drawer
-					isOpen={isDrawerOpen}
-					onClose={onCloseClick}
-					title={props.title}
 					actions={
 						<ButtonGroup>
 							<Button onClick={onApplyFiltersClick}>Apply filters</Button>
-							<Button variant="secondary" onClick={onClearFiltersClick}>
+							<Button onClick={onClearFiltersClick} variant="secondary">
 								Clear filters
 							</Button>
-							<Button variant="tertiary" onClick={onCloseClick}>
+							<Button onClick={onCloseClick} variant="tertiary">
 								Cancel
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isDrawerOpen}
+					onClose={onCloseClick}
+					title={props.title}
 				>
 					<Stack gap={3}>
 						<Fieldset legend="Example fieldset">
 							<FormStack>
 								<Switch
-									label="Example filter"
 									checked={formState.switch}
+									label="Example filter"
 									onChange={(checked) => updateFormState({ switch: checked })}
 								/>
 								<Select
-									label="Example filter"
 									hideOptionalLabel
-									placeholder="Please select"
+									label="Example filter"
+									onChange={(e) => updateFormState({ select: e.target.value })}
 									options={[
 										{ value: 'a', label: 'Option A' },
 										{ value: 'b', label: 'Option B' },
@@ -426,40 +426,40 @@ export const FiltersWithFieldsets: Story = {
 										{ value: 'e', label: 'Option E' },
 										{ value: 'f', label: 'Option F' },
 									]}
+									placeholder="Please select"
 									value={formState.select}
-									onChange={(e) => updateFormState({ select: e.target.value })}
 								/>
-								<ControlGroup label="Example filter" hideOptionalLabel block>
+								<ControlGroup block hideOptionalLabel label="Example filter">
 									<Radio
-										value="a"
 										checked={formState.radio === 'a'}
 										onChange={(e) =>
 											updateFormState({
 												radio: e.target.value,
 											})
 										}
+										value="a"
 									>
 										Option A
 									</Radio>
 									<Radio
-										value="b"
 										checked={formState.radio === 'b'}
 										onChange={(e) =>
 											updateFormState({
 												radio: e.target.value,
 											})
 										}
+										value="b"
 									>
 										Option B
 									</Radio>
 									<Radio
-										value="c"
 										checked={formState.radio === 'c'}
 										onChange={(e) =>
 											updateFormState({
 												radio: e.target.value,
 											})
 										}
+										value="c"
 									>
 										Option C
 									</Radio>
@@ -478,10 +478,9 @@ export const FiltersWithFieldsets: Story = {
 									Example filter
 								</Checkbox>
 								<ComboboxMulti
-									label="Example filter"
 									hideOptionalLabel
 									hint="Start typing to see results"
-									value={formState.comboboxMulti}
+									label="Example filter"
 									onChange={(value) =>
 										updateFormState({ comboboxMulti: value })
 									}
@@ -493,20 +492,20 @@ export const FiltersWithFieldsets: Story = {
 										{ value: 'e', label: 'Option E' },
 										{ value: 'f', label: 'Option F' },
 									]}
+									value={formState.comboboxMulti}
 								/>
 								<DatePicker
-									label="Example filter"
 									hideOptionalLabel
-									value={formState.datePicker}
+									label="Example filter"
 									onChange={(value) => updateFormState({ datePicker: value })}
 									onInputChange={(value) =>
 										updateFormState({ datePicker: value })
 									}
+									value={formState.datePicker}
 								/>
 								<DateRangePicker
-									legend="Example filter"
 									hideOptionalLabel
-									value={formState.dateRangePicker}
+									legend="Example filter"
 									onChange={(value) =>
 										updateFormState({ dateRangePicker: value })
 									}
@@ -526,6 +525,7 @@ export const FiltersWithFieldsets: Story = {
 											},
 										})
 									}
+									value={formState.dateRangePicker}
 								/>
 							</FormStack>
 						</Fieldset>
@@ -578,24 +578,24 @@ export const WithForm: Story = {
 				<Button onClick={openDrawer}>Open Drawer</Button>
 
 				<Drawer
-					isOpen={isDrawerOpen}
-					onClose={closeDrawer}
-					title={props.title}
 					actions={
 						<ButtonGroup>
-							<Button type="submit" form="form-id" onClick={onSubmitForm}>
+							<Button form="form-id" onClick={onSubmitForm} type="submit">
 								Submit
 							</Button>
 
-							<Button variant="secondary" onClick={clearForm}>
+							<Button onClick={clearForm} variant="secondary">
 								Clear form
 							</Button>
 
-							<Button variant="tertiary" onClick={closeDrawer}>
+							<Button onClick={closeDrawer} variant="tertiary">
 								Cancel
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isDrawerOpen}
+					onClose={closeDrawer}
+					title={props.title}
 				>
 					<form id="form-id">
 						<FormStack>
diff --git a/packages/react/src/drawer/Drawer.test.tsx b/packages/react/src/drawer/Drawer.test.tsx
index 112b6434cc4a..dfe72c2fc71a 100644
--- a/packages/react/src/drawer/Drawer.test.tsx
+++ b/packages/react/src/drawer/Drawer.test.tsx
@@ -15,10 +15,10 @@ afterEach(cleanup);
 function renderBaseDrawer() {
 	return render(
 		<Drawer
+			actions={<Button>Example action</Button>}
 			isOpen
 			onClose={() => undefined}
 			title="Drawer title"
-			actions={<Button>Example action</Button>}
 		>
 			<Text as="p">Example content.</Text>
 		</Drawer>
@@ -29,18 +29,18 @@ function DrawerExample() {
 	const [isOpen, open, close] = useTernaryState(false);
 	return (
 		<div>
-			<Button onClick={open} data-testid="open-button">
+			<Button data-testid="open-button" onClick={open}>
 				Open
 			</Button>
 			<Drawer
-				isOpen={isOpen}
-				onClose={close}
-				title="Drawer title"
 				actions={
-					<Button onClick={close} data-testid="close-button">
+					<Button data-testid="close-button" onClick={close}>
 						Close
 					</Button>
 				}
+				isOpen={isOpen}
+				onClose={close}
+				title="Drawer title"
 			>
 				<Text as="p">This is the Drawer content.</Text>
 			</Drawer>
@@ -51,18 +51,18 @@ function OnDismissDrawerExample() {
 	const [isOpen, open, close] = useTernaryState(false);
 	return (
 		<div>
-			<Button onClick={open} data-testid="open-button">
+			<Button data-testid="open-button" onClick={open}>
 				Open
 			</Button>
 			<Drawer
-				isOpen={isOpen}
-				onDismiss={close}
-				title="Drawer title"
 				actions={
-					<Button onClick={close} data-testid="close-button">
+					<Button data-testid="close-button" onClick={close}>
 						Close modal
 					</Button>
 				}
+				isOpen={isOpen}
+				onDismiss={close}
+				title="Drawer title"
 			>
 				<Text as="p">This is the Drawer content.</Text>
 			</Drawer>
diff --git a/packages/react/src/drawer/Drawer.tsx b/packages/react/src/drawer/Drawer.tsx
index 645e18fb2770..c1476a142134 100644
--- a/packages/react/src/drawer/Drawer.tsx
+++ b/packages/react/src/drawer/Drawer.tsx
@@ -95,9 +95,9 @@ export const Drawer: FunctionComponent<DrawerProps> = ({
 				item ? (
 					<div ref={modalContainerRef}>
 						<Overlay
+							mutedOverlay={mutedOverlay}
 							onClick={handleClose}
 							style={{ opacity }}
-							mutedOverlay={mutedOverlay}
 						/>
 						<DrawerDialog
 							actions={actions}
@@ -128,7 +128,6 @@ function Overlay({
 }) {
 	return (
 		<animated.div
-			onClick={onClick}
 			css={{
 				position: 'fixed',
 				inset: 0,
@@ -137,6 +136,7 @@ function Overlay({
 					: boxPalette.overlay,
 				zIndex: tokens.zIndex.overlay,
 			}}
+			onClick={onClick}
 			style={style}
 		/>
 	);
diff --git a/packages/react/src/drawer/DrawerDialog.tsx b/packages/react/src/drawer/DrawerDialog.tsx
index e8975724c597..17f56d59e4db 100644
--- a/packages/react/src/drawer/DrawerDialog.tsx
+++ b/packages/react/src/drawer/DrawerDialog.tsx
@@ -64,7 +64,7 @@ export function DrawerDialog({
 		>
 			<AnimatedFlex
 				aria-labelledby={titleId}
-				aria-modal="true"
+				aria-modal
 				background="body"
 				css={{
 					boxShadow: tokens.shadow.lg,
@@ -88,9 +88,6 @@ export function DrawerDialog({
 				<DrawerContent>{children}</DrawerContent>
 				{actions ? <DrawerFooter>{actions}</DrawerFooter> : null}
 				<Button
-					variant="text"
-					onClick={handleClose}
-					iconAfter={CloseIcon}
 					css={mq({
 						position: 'fixed',
 						zIndex: tokens.zIndex.elevated,
@@ -100,6 +97,9 @@ export function DrawerDialog({
 							md: mapSpacing(1.5),
 						}),
 					})}
+					iconAfter={CloseIcon}
+					onClick={handleClose}
+					variant="text"
 				>
 					Close
 				</Button>
@@ -117,8 +117,6 @@ function DrawerHeader({ children }: DrawerHeaderProps) {
 		<Box
 			background="body"
 			borderBottom
-			paddingX={{ xs: 0.75, md: 1.5 }}
-			paddingY={1}
 			css={{
 				position: 'sticky',
 				top: 0,
@@ -127,6 +125,8 @@ function DrawerHeader({ children }: DrawerHeaderProps) {
 					position: 'relative',
 				},
 			}}
+			paddingX={{ xs: 0.75, md: 1.5 }}
+			paddingY={1}
 		>
 			{children}
 		</Box>
@@ -139,16 +139,16 @@ function DrawerHeaderTitle({ children, id }: DrawerHeaderTitleProps) {
 	return (
 		<Text
 			as="h2"
+			css={{
+				display: 'inline-block',
+			}}
+			data-autofocus
+			focusRingFor="keyboard"
 			fontSize="lg"
 			fontWeight="bold"
-			lineHeight="heading"
 			id={id}
-			data-autofocus
-			focusRingFor="keyboard"
+			lineHeight="heading"
 			tabIndex={-1}
-			css={{
-				display: 'inline-block',
-			}}
 		>
 			{children}
 		</Text>
@@ -163,14 +163,14 @@ function DrawerContent({ children }: DrawerContentProps) {
 	return (
 		<Box
 			background="body"
-			flexGrow={1}
-			paddingX={{ xs: 0.75, md: 1.5 }}
-			paddingY={{ xs: 1, md: 1.5 }}
 			css={{
 				[tokens.mediaQuery.min.sm]: {
 					overflowY: 'auto',
 				},
 			}}
+			flexGrow={1}
+			paddingX={{ xs: 0.75, md: 1.5 }}
+			paddingY={{ xs: 1, md: 1.5 }}
 		>
 			{children}
 		</Box>
@@ -186,9 +186,9 @@ function DrawerFooter({ children }: DrawerFooterProps) {
 		<Box
 			background="body"
 			borderTop
+			css={{ marginTop: 'auto' }}
 			paddingX={{ xs: 0.75, md: 1.5 }}
 			paddingY={1}
-			css={{ marginTop: 'auto' }}
 		>
 			{children}
 		</Box>
diff --git a/packages/react/src/dropdown-menu/DropdownMenu.stories.tsx b/packages/react/src/dropdown-menu/DropdownMenu.stories.tsx
index 56b0b76f1bf6..a9ebc8b79ef0 100644
--- a/packages/react/src/dropdown-menu/DropdownMenu.stories.tsx
+++ b/packages/react/src/dropdown-menu/DropdownMenu.stories.tsx
@@ -85,7 +85,7 @@ export const Triggers: StoryObj = {
 					<ButtonGroup key={size}>
 						{variants.map((variant) => (
 							<DropdownMenu key={variant}>
-								<DropdownMenuButton variant={variant} size={size}>
+								<DropdownMenuButton size={size} variant={variant}>
 									Actions
 								</DropdownMenuButton>
 								<DropdownMenuPanel>
@@ -126,7 +126,7 @@ export const Placement: StoryObj = {
 	render: function Render() {
 		const placements = ['bottom-start', 'bottom-end', 'bottom'] as const;
 		return (
-			<Stack gap={2} alignItems="center">
+			<Stack alignItems="center" gap={2}>
 				{placements.map((placement) => (
 					<DropdownMenu key={placement} popoverPlacement={placement}>
 						<DropdownMenuButton variant="primary">
@@ -152,18 +152,18 @@ export const IconsAndBadges: StoryObj = {
 				<DropdownMenuPanel>
 					<DropdownMenuItem icon={AvatarIcon}>Profile</DropdownMenuItem>
 					<DropdownMenuItem
-						icon={EmailIcon}
 						endElement={
 							<Fragment>
 								<NotificationBadge
-									value={100}
+									aria-hidden
 									max={99}
 									tone="action"
-									aria-hidden
+									value={100}
 								/>
 								<VisuallyHidden>, 99 plus unread</VisuallyHidden>
 							</Fragment>
 						}
+						icon={EmailIcon}
 					>
 						Messages
 					</DropdownMenuItem>
@@ -183,38 +183,38 @@ export const Divider: StoryObj = {
 				<DropdownMenuButton>Toggle dropdown menu</DropdownMenuButton>
 				<DropdownMenuPanel>
 					<DropdownMenuItem
-						onClick={() => console.log('Profile')}
 						icon={AvatarIcon}
+						onClick={() => console.log('Profile')}
 					>
 						Profile
 					</DropdownMenuItem>
 					<DropdownMenuItem
-						onClick={() => console.log('Messages')}
-						icon={EmailIcon}
 						endElement={
 							<Fragment>
 								<NotificationBadge
-									value={100}
+									aria-hidden
 									max={99}
 									tone="action"
-									aria-hidden
+									value={100}
 								/>
 								<VisuallyHidden>, 99 plus unread</VisuallyHidden>
 							</Fragment>
 						}
+						icon={EmailIcon}
+						onClick={() => console.log('Messages')}
 					>
 						Messages
 					</DropdownMenuItem>
 					<DropdownMenuItem
-						onClick={() => console.log('Account settings')}
 						icon={SettingsIcon}
+						onClick={() => console.log('Account settings')}
 					>
 						Account settings
 					</DropdownMenuItem>
 					<DropdownMenuDivider />
 					<DropdownMenuItem
-						onClick={() => console.log('Account settings')}
 						icon={ExitIcon}
+						onClick={() => console.log('Account settings')}
 					>
 						Sign out
 					</DropdownMenuItem>
@@ -238,18 +238,18 @@ export const Groups: StoryObj = {
 					<DropdownMenuGroup label="Account">
 						<DropdownMenuItem icon={AvatarIcon}>Profile</DropdownMenuItem>
 						<DropdownMenuItem
-							icon={EmailIcon}
 							endElement={
 								<Fragment>
 									<NotificationBadge
-										value={100}
+										aria-hidden
 										max={99}
 										tone="action"
-										aria-hidden
+										value={100}
 									/>
 									<VisuallyHidden>, 99 plus unread</VisuallyHidden>
 								</Fragment>
 							}
+							icon={EmailIcon}
 						>
 							Messages
 						</DropdownMenuItem>
@@ -275,8 +275,8 @@ export const Links: StoryObj = {
 					<DropdownMenuItemLink href="#link-2">Link 2</DropdownMenuItemLink>
 					<DropdownMenuItemLink
 						href="https://www.agriculture.gov.au"
-						target="_blank"
 						icon={ExternalLinkIcon}
+						target="_blank"
 					>
 						External link
 					</DropdownMenuItemLink>
@@ -329,23 +329,23 @@ export const RadioGroupsSecondary: StoryObj = {
 				<DropdownMenuPanel>
 					<DropdownMenuGroup label="Businesses">
 						<DropdownMenuItemRadio
-							secondaryText="Sydney"
 							checked={selectedItem === 'Antfix'}
 							onClick={() => setSelectedItem('Antfix')}
+							secondaryText="Sydney"
 						>
 							Antfix
 						</DropdownMenuItemRadio>
 						<DropdownMenuItemRadio
-							secondaryText="Brisbane"
 							checked={selectedItem === 'Produce Fresh'}
 							onClick={() => setSelectedItem('Produce Fresh')}
+							secondaryText="Brisbane"
 						>
 							Produce Fresh
 						</DropdownMenuItemRadio>
 						<DropdownMenuItemRadio
-							secondaryText="Canberra"
 							checked={selectedItem === 'Organic Co'}
 							onClick={() => setSelectedItem('Organic Co')}
+							secondaryText="Canberra"
 						>
 							Organic Co
 						</DropdownMenuItemRadio>
@@ -366,35 +366,35 @@ export const RadioGroupsSecondaryBadges: StoryObj = {
 				<DropdownMenuPanel>
 					<DropdownMenuGroup label="Businesses">
 						<DropdownMenuItemRadio
-							secondaryText="Sydney"
 							checked={selectedItem === 'Antfix'}
-							onClick={() => setSelectedItem('Antfix')}
 							endElement={<IndicatorDot />}
+							onClick={() => setSelectedItem('Antfix')}
+							secondaryText="Sydney"
 						>
 							Antfix
 						</DropdownMenuItemRadio>
 						<DropdownMenuItemRadio
-							secondaryText="Brisbane"
 							checked={selectedItem === 'Produce Fresh'}
-							onClick={() => setSelectedItem('Produce Fresh')}
 							endElement={
 								<Fragment>
 									<NotificationBadge
-										value={100}
+										aria-hidden
 										max={99}
 										tone="action"
-										aria-hidden
+										value={100}
 									/>
 									<VisuallyHidden>, 100 notifications</VisuallyHidden>
 								</Fragment>
 							}
+							onClick={() => setSelectedItem('Produce Fresh')}
+							secondaryText="Brisbane"
 						>
 							Produce Fresh
 						</DropdownMenuItemRadio>
 						<DropdownMenuItemRadio
-							secondaryText="Canberra"
 							checked={selectedItem === 'Organic Co'}
 							onClick={() => setSelectedItem('Organic Co')}
+							secondaryText="Canberra"
 						>
 							Organic Co
 						</DropdownMenuItemRadio>
@@ -409,7 +409,7 @@ export const RadioGroupsSecondaryBadges: StoryObj = {
 export const Overflow: StoryObj = {
 	render: function Render() {
 		return (
-			<Stack gap={2} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={2}>
 				<DropdownMenu>
 					<DropdownMenuButton>
 						Toggle dropdown menu (without max height)
@@ -466,26 +466,26 @@ export const Complex: StoryObj = {
 				<DropdownMenuPanel>
 					<DropdownMenuGroup label="Businesses">
 						<DropdownMenuItemRadio
-							checked={true}
-							secondaryText="ABN 00 000 000 000"
+							checked
 							endElement={<IndicatorDot />}
+							secondaryText="ABN 00 000 000 000"
 						>
 							Antfix
 						</DropdownMenuItemRadio>
 						<DropdownMenuItemRadio
 							checked={false}
-							secondaryText="ABN 00 000 000 000"
 							endElement={
 								<Fragment>
 									<NotificationBadge
-										value={100}
+										aria-hidden
 										max={99}
 										tone="action"
-										aria-hidden
+										value={100}
 									/>
 									<VisuallyHidden>, 100 notifications</VisuallyHidden>
 								</Fragment>
 							}
+							secondaryText="ABN 00 000 000 000"
 						>
 							Ashfield
 						</DropdownMenuItemRadio>
@@ -500,18 +500,18 @@ export const Complex: StoryObj = {
 					<DropdownMenuDivider />
 					<DropdownMenuItem icon={AvatarIcon}>Profile</DropdownMenuItem>
 					<DropdownMenuItem
-						icon={EmailIcon}
 						endElement={
 							<Fragment>
 								<NotificationBadge
-									value={100}
+									aria-hidden
 									max={99}
 									tone="action"
-									aria-hidden
+									value={100}
 								/>
 								<VisuallyHidden>, 99 plus unread</VisuallyHidden>
 							</Fragment>
 						}
+						icon={EmailIcon}
 					>
 						Messages
 					</DropdownMenuItem>
@@ -540,10 +540,10 @@ export const LongLabels: StoryObj = {
 					<DropdownMenuGroup label="Businesses">
 						{businessNames.map((name) => (
 							<DropdownMenuItemRadio
+								checked
+								endElement={<IndicatorDot />}
 								key={name}
-								checked={true}
 								secondaryText="ABN 00 000 000 000"
-								endElement={<IndicatorDot />}
 							>
 								{name}
 							</DropdownMenuItemRadio>
@@ -555,18 +555,18 @@ export const LongLabels: StoryObj = {
 						Phasellus ipsum ex duis libero ante
 					</DropdownMenuItem>
 					<DropdownMenuItem
-						icon={EmailIcon}
 						endElement={
 							<Fragment>
 								<NotificationBadge
-									value={100}
+									aria-hidden
 									max={99}
 									tone="action"
-									aria-hidden
+									value={100}
 								/>
 								<VisuallyHidden>, 99 plus unread</VisuallyHidden>
 							</Fragment>
 						}
+						icon={EmailIcon}
 					>
 						APurus tortor lacus malesuada phasellus ipsum ex duis libero ante
 					</DropdownMenuItem>
diff --git a/packages/react/src/dropdown-menu/DropdownMenu.test.tsx b/packages/react/src/dropdown-menu/DropdownMenu.test.tsx
index a362c519ae23..ffd08a8fd7e0 100644
--- a/packages/react/src/dropdown-menu/DropdownMenu.test.tsx
+++ b/packages/react/src/dropdown-menu/DropdownMenu.test.tsx
@@ -258,18 +258,18 @@ function renderDecorativeDropdownMenu() {
 					<DropdownMenuPanel>
 						<DropdownMenuItem icon={AvatarIcon}>Profile</DropdownMenuItem>
 						<DropdownMenuItem
-							icon={EmailIcon}
 							endElement={
 								<Fragment>
 									<NotificationBadge
-										value={100}
+										aria-hidden
 										max={99}
 										tone="action"
-										aria-hidden
+										value={100}
 									/>
 									<VisuallyHidden>, 99 plus unread</VisuallyHidden>
 								</Fragment>
 							}
+							icon={EmailIcon}
 						>
 							Messages
 						</DropdownMenuItem>
@@ -361,10 +361,10 @@ describe('DropdownMenu Links', () => {
 			<DropdownMenu>
 				<DropdownMenuButton>Open dropdown menu</DropdownMenuButton>
 				<DropdownMenuPanel>
-					<DropdownMenuItemLink href="/about" target="_blank" rel="noopener">
+					<DropdownMenuItemLink href="/about" rel="noopener" target="_blank">
 						About
 					</DropdownMenuItemLink>
-					<DropdownMenuItemLink href="/contact" target="_blank" rel="noopener">
+					<DropdownMenuItemLink href="/contact" rel="noopener" target="_blank">
 						Contact
 					</DropdownMenuItemLink>
 				</DropdownMenuPanel>
@@ -400,22 +400,18 @@ function renderDropdownMenuRadio() {
 			<DropdownMenuPanel>
 				<DropdownMenuGroup label="Businesses">
 					<DropdownMenuItemRadio
-						id="item-1"
 						checked={false}
+						id="item-1"
 						secondaryText="Sydney"
 					>
 						Antfix
 					</DropdownMenuItemRadio>
-					<DropdownMenuItemRadio
-						id="item-2"
-						checked={true}
-						secondaryText="Brisbane"
-					>
+					<DropdownMenuItemRadio checked id="item-2" secondaryText="Brisbane">
 						Produce Fresh
 					</DropdownMenuItemRadio>
 					<DropdownMenuItemRadio
-						id="item-3"
 						checked={false}
+						id="item-3"
 						secondaryText="Canberra"
 					>
 						Organic Co
@@ -477,26 +473,26 @@ describe('DropdownMenu Radio Group', () => {
 				<DropdownMenuPanel>
 					<DropdownMenuGroup label="Businesses">
 						<DropdownMenuItemRadio
-							id="item-1"
 							checked={false}
-							secondaryText="Sydney"
+							id="item-1"
 							onClick={onClick1}
+							secondaryText="Sydney"
 						>
 							Antfix
 						</DropdownMenuItemRadio>
 						<DropdownMenuItemRadio
+							checked
 							id="item-2"
-							checked={true}
-							secondaryText="Brisbane"
 							onClick={onClick2}
+							secondaryText="Brisbane"
 						>
 							Produce Fresh
 						</DropdownMenuItemRadio>
 						<DropdownMenuItemRadio
-							id="item-3"
 							checked={false}
-							secondaryText="Canberra"
+							id="item-3"
 							onClick={onClick3}
+							secondaryText="Canberra"
 						>
 							Organic Co
 						</DropdownMenuItemRadio>
diff --git a/packages/react/src/dropdown-menu/DropdownMenuButton.tsx b/packages/react/src/dropdown-menu/DropdownMenuButton.tsx
index dd3016f4fac9..28e0627d8d9c 100644
--- a/packages/react/src/dropdown-menu/DropdownMenuButton.tsx
+++ b/packages/react/src/dropdown-menu/DropdownMenuButton.tsx
@@ -19,8 +19,8 @@ export function DropdownMenuButton({
 	const defaultIconAfter = isMenuOpen ? ChevronUpIcon : ChevronDownIcon;
 	return (
 		<Button
-			variant={variant}
 			iconAfter={iconAfter ? iconAfter : defaultIconAfter}
+			variant={variant}
 			{...buttonProps}
 			{...props}
 		/>
diff --git a/packages/react/src/dropdown-menu/DropdownMenuGroup.tsx b/packages/react/src/dropdown-menu/DropdownMenuGroup.tsx
index e9da07382f00..c0d6e55963f5 100644
--- a/packages/react/src/dropdown-menu/DropdownMenuGroup.tsx
+++ b/packages/react/src/dropdown-menu/DropdownMenuGroup.tsx
@@ -13,17 +13,17 @@ export function DropdownMenuGroup({
 }: DropdownMenuItemGroupProps) {
 	const id = useDropdownMenuGroupId();
 	return (
-		<div role="group" aria-labelledby={id}>
+		<div aria-labelledby={id} role="group">
 			<Text
+				color="muted"
 				display="block"
-				paddingX={1}
-				paddingTop={1.5}
-				paddingBottom={0.5}
-				lineHeight="heading"
-				fontWeight="bold"
 				fontSize="xs"
-				color="muted"
+				fontWeight="bold"
 				id={id}
+				lineHeight="heading"
+				paddingBottom={0.5}
+				paddingTop={1.5}
+				paddingX={1}
 			>
 				{label}
 			</Text>
diff --git a/packages/react/src/dropdown-menu/DropdownMenuItem.tsx b/packages/react/src/dropdown-menu/DropdownMenuItem.tsx
index fc525fff053b..87eb397b2ef5 100644
--- a/packages/react/src/dropdown-menu/DropdownMenuItem.tsx
+++ b/packages/react/src/dropdown-menu/DropdownMenuItem.tsx
@@ -56,20 +56,9 @@ export const DropdownMenuItem = forwardRefWithAs<'div', DropdownMenuItemProps>(
 
 		return (
 			<Flex
-				as={as}
-				ref={mergeRefs([forwardedRef, ref])}
-				role="menuitem"
-				tabIndex={-1}
-				id={id}
-				onClick={onClick}
 				alignItems="center"
-				justifyContent="space-between"
+				as={as}
 				background="body"
-				gap={1}
-				padding={1}
-				width="18rem"
-				link
-				focusRingFor="keyboard"
 				css={{
 					textDecoration: 'none',
 
@@ -83,11 +72,22 @@ export const DropdownMenuItem = forwardRefWithAs<'div', DropdownMenuItemProps>(
 						'& > div:first-of-type > span': packs.underline,
 					},
 				}}
+				focusRingFor="keyboard"
+				gap={1}
+				id={id}
+				justifyContent="space-between"
+				link
+				onClick={onClick}
+				padding={1}
+				ref={mergeRefs([forwardedRef, ref])}
+				role="menuitem"
+				tabIndex={-1}
+				width="18rem"
 				{...props}
 			>
 				<Flex alignItems="center" gap={0.75}>
 					{Icon ? (
-						<Icon color="inherit" size="md" css={{ flexShrink: 0 }} />
+						<Icon color="inherit" css={{ flexShrink: 0 }} size="md" />
 					) : null}
 					<Text color="inherit">{children}</Text>
 				</Flex>
diff --git a/packages/react/src/dropdown-menu/DropdownMenuItemRadio.tsx b/packages/react/src/dropdown-menu/DropdownMenuItemRadio.tsx
index 5219cffd7f3b..7de9248d3d9c 100644
--- a/packages/react/src/dropdown-menu/DropdownMenuItemRadio.tsx
+++ b/packages/react/src/dropdown-menu/DropdownMenuItemRadio.tsx
@@ -47,17 +47,9 @@ export function DropdownMenuItemRadio({
 
 	return (
 		<Flex
-			ref={ref}
-			role="menuitemradio"
-			aria-checked={checked}
-			id={id}
-			onClick={onClick}
 			alignItems="center"
-			justifyContent="space-between"
+			aria-checked={checked}
 			background="body"
-			gap={1}
-			padding={1}
-			width="18rem"
 			css={{
 				cursor: 'pointer',
 
@@ -92,6 +84,14 @@ export function DropdownMenuItemRadio({
 					},
 				}),
 			}}
+			gap={1}
+			id={id}
+			justifyContent="space-between"
+			onClick={onClick}
+			padding={1}
+			ref={ref}
+			role="menuitemradio"
+			width="18rem"
 		>
 			<Stack>
 				<Text
@@ -100,7 +100,7 @@ export function DropdownMenuItemRadio({
 				>
 					{children}
 				</Text>
-				<Text fontSize="xs" color="muted">
+				<Text color="muted" fontSize="xs">
 					{secondaryText}
 				</Text>
 			</Stack>
diff --git a/packages/react/src/dropdown-menu/DropdownMenuPanel.tsx b/packages/react/src/dropdown-menu/DropdownMenuPanel.tsx
index 331ee7f532bb..97f49c042fa7 100644
--- a/packages/react/src/dropdown-menu/DropdownMenuPanel.tsx
+++ b/packages/react/src/dropdown-menu/DropdownMenuPanel.tsx
@@ -50,25 +50,25 @@ export function DropdownMenuPanel({
 
 	// Ensures the `DropdownMenuButton` component has a valid `aria-controls` attribute
 	if (!isMenuOpen) {
-		return <div id={panelId} css={{ position: 'absolute' }} />;
+		return <div css={{ position: 'absolute' }} id={panelId} />;
 	}
 
 	return (
 		<Popover
+			aria-activedescendant={activeDescendantId}
+			aria-labelledby={buttonId}
 			as={Flex}
+			flexDirection="column"
+			focusRingFor="keyboard"
+			id={panelId}
+			onKeyDown={onKeyDown}
+			palette={palette}
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			ref={mergeRefs([popoverRef, panelRef])}
 			role="menu"
-			tabIndex={-1}
-			id={panelId}
-			aria-labelledby={buttonId}
-			aria-activedescendant={activeDescendantId}
-			onKeyDown={onKeyDown}
-			palette={palette}
-			flexDirection="column"
-			focusRingFor="keyboard"
 			style={style}
+			tabIndex={-1}
 		>
 			{children}
 		</Popover>
diff --git a/packages/react/src/field/Field.stories.tsx b/packages/react/src/field/Field.stories.tsx
index 794c61c81f3f..1048357e863f 100644
--- a/packages/react/src/field/Field.stories.tsx
+++ b/packages/react/src/field/Field.stories.tsx
@@ -81,10 +81,10 @@ export const Modular: Story = {
 		return (
 			<FieldContainer invalid={invalid}>
 				<FieldLabel
+					hideOptionalLabel={hideOptionalLabel}
 					htmlFor={fieldId}
 					required={required}
 					secondaryLabel={secondaryLabel}
-					hideOptionalLabel={hideOptionalLabel}
 				>
 					{label}
 				</FieldLabel>
diff --git a/packages/react/src/field/Field.test.tsx b/packages/react/src/field/Field.test.tsx
index d05e02cb7ada..90aacef67f53 100644
--- a/packages/react/src/field/Field.test.tsx
+++ b/packages/react/src/field/Field.test.tsx
@@ -22,12 +22,12 @@ function renderField({
 }: Partial<FieldProps>) {
 	return render(
 		<Field
-			label={label}
+			hideOptionalLabel={hideOptionalLabel}
 			hint={hint}
+			invalid={invalid}
+			label={label}
 			message={message}
 			required={required}
-			invalid={invalid}
-			hideOptionalLabel={hideOptionalLabel}
 			{...props}
 		>
 			{children}
diff --git a/packages/react/src/field/Field.tsx b/packages/react/src/field/Field.tsx
index 3c94d42cf2fa..06a2fd8c4ad7 100644
--- a/packages/react/src/field/Field.tsx
+++ b/packages/react/src/field/Field.tsx
@@ -57,11 +57,11 @@ export const Field = ({
 	return (
 		<FieldContainer invalid={invalid}>
 			<FieldLabel
-				id={labelId}
-				htmlFor={fieldId}
-				secondaryLabel={secondaryLabel}
 				hideOptionalLabel={hideOptionalLabel}
+				htmlFor={fieldId}
+				id={labelId}
 				required={required}
+				secondaryLabel={secondaryLabel}
 			>
 				{label}
 			</FieldLabel>
diff --git a/packages/react/src/field/FieldContainer.tsx b/packages/react/src/field/FieldContainer.tsx
index 8ac998644414..a2e430aeadf7 100644
--- a/packages/react/src/field/FieldContainer.tsx
+++ b/packages/react/src/field/FieldContainer.tsx
@@ -15,14 +15,14 @@ export const FieldContainer = ({
 	id,
 }: FieldContainerProps) => (
 	<Stack
-		gap={0.5}
-		paddingLeft={invalid ? 1 : undefined}
 		borderLeft={invalid}
 		borderLeftWidth="xl"
-		id={id}
 		css={{
 			borderLeftColor: invalid ? boxPalette.systemError : undefined,
 		}}
+		gap={0.5}
+		id={id}
+		paddingLeft={invalid ? 1 : undefined}
 	>
 		{children}
 	</Stack>
diff --git a/packages/react/src/field/FieldHint.tsx b/packages/react/src/field/FieldHint.tsx
index db5cc0592f8e..0db9183714dd 100644
--- a/packages/react/src/field/FieldHint.tsx
+++ b/packages/react/src/field/FieldHint.tsx
@@ -7,7 +7,7 @@ export type FieldHintProps = PropsWithChildren<{
 }>;
 
 export const FieldHint = ({ children, id }: FieldHintProps) => (
-	<Text display="block" color="muted" id={id}>
+	<Text color="muted" display="block" id={id}>
 		{children}
 	</Text>
 );
diff --git a/packages/react/src/field/FieldLabel.tsx b/packages/react/src/field/FieldLabel.tsx
index 05cdfa8b46e1..30a4947caffc 100644
--- a/packages/react/src/field/FieldLabel.tsx
+++ b/packages/react/src/field/FieldLabel.tsx
@@ -36,7 +36,7 @@ export const FieldLabel = ({
 	});
 
 	return (
-		<Box as={as} id={id} htmlFor={htmlFor} className={className}>
+		<Box as={as} className={className} htmlFor={htmlFor} id={id}>
 			<Text as="span" fontWeight="bold">
 				{children}
 			</Text>
diff --git a/packages/react/src/field/FieldMessage.tsx b/packages/react/src/field/FieldMessage.tsx
index 205dd4585c36..9e94edd71a00 100644
--- a/packages/react/src/field/FieldMessage.tsx
+++ b/packages/react/src/field/FieldMessage.tsx
@@ -10,17 +10,17 @@ export type FieldMessageProps = PropsWithChildren<{
 }>;
 
 export const FieldMessage = ({ children, id }: FieldMessageProps) => (
-	<Flex gap={0.5} alignItems="center">
+	<Flex alignItems="center" gap={0.5}>
 		<Box flexShrink={0}>
 			<AlertFilledIcon
-				color="error"
-				size="md"
-				aria-label="Error"
 				aria-hidden="false"
+				aria-label="Error"
+				color="error"
 				css={{ display: 'block' }}
+				size="md"
 			/>
 		</Box>
-		<Text display="block" fontWeight="bold" color="error" id={id}>
+		<Text color="error" display="block" fontWeight="bold" id={id}>
 			{children}
 		</Text>
 	</Flex>
diff --git a/packages/react/src/fieldset/Fieldset.stories.tsx b/packages/react/src/fieldset/Fieldset.stories.tsx
index 84f3569920e7..3ef3fe1f026e 100644
--- a/packages/react/src/fieldset/Fieldset.stories.tsx
+++ b/packages/react/src/fieldset/Fieldset.stories.tsx
@@ -25,28 +25,28 @@ export const Basic: Story = {
 		<Fieldset {...args}>
 			<FormStack>
 				<TextInput
-					label="Street and number"
-					required
 					autoComplete="street-address"
+					label="Street and number"
 					maxWidth="xl"
+					required
 				/>
 				<TextInput
-					label="Suburb"
-					required
 					autoComplete="address-level2"
+					label="Suburb"
 					maxWidth="xl"
+					required
 				/>
 				<TextInput
-					label="Country"
-					required
 					autoComplete="country"
+					label="Country"
 					maxWidth="xl"
+					required
 				/>
 				<TextInput
-					label="Postcode"
-					required
 					autoComplete="postal-code"
+					label="Postcode"
 					maxWidth="sm"
+					required
 				/>
 			</FormStack>
 		</Fieldset>
@@ -57,7 +57,7 @@ export const LegendAsPageHeading: Story = {
 	args: {
 		legend: <H1>What is your date of birth?</H1>,
 		hint: (
-			<Text fontSize="md" color="muted">
+			<Text color="muted" fontSize="md">
 				We will only use this to respond to your requests
 			</Text>
 		),
@@ -66,25 +66,25 @@ export const LegendAsPageHeading: Story = {
 		<Fieldset {...args}>
 			<FormStack>
 				<TextInput
-					label="Day"
+					autoComplete="bday-day"
 					inputMode="numeric"
+					label="Day"
 					maxWidth="md"
 					required
-					autoComplete="bday-day"
 				/>
 				<TextInput
-					label="Month"
+					autoComplete="bday-month"
 					inputMode="numeric"
+					label="Month"
 					maxWidth="md"
 					required
-					autoComplete="bday-month"
 				/>
 				<TextInput
-					label="Year"
+					autoComplete="bday-year"
 					inputMode="numeric"
+					label="Year"
 					maxWidth="md"
 					required
-					autoComplete="bday-year"
 				/>
 			</FormStack>
 		</Fieldset>
@@ -101,28 +101,28 @@ export const Modular = () => (
 		</Stack>
 		<FormStack>
 			<TextInput
-				label="Street and number"
-				required
 				autoComplete="street-address"
+				label="Street and number"
 				maxWidth="xl"
+				required
 			/>
 			<TextInput
-				label="Suburb"
-				required
 				autoComplete="address-level2"
+				label="Suburb"
 				maxWidth="xl"
+				required
 			/>
 			<TextInput
-				label="Country"
-				required
 				autoComplete="country"
+				label="Country"
 				maxWidth="xl"
+				required
 			/>
 			<TextInput
-				label="Postcode"
-				required
 				autoComplete="postal-code"
+				label="Postcode"
 				maxWidth="sm"
+				required
 			/>
 		</FormStack>
 	</FieldsetContainer>
diff --git a/packages/react/src/fieldset/Fieldset.test.tsx b/packages/react/src/fieldset/Fieldset.test.tsx
index b391c9f6f539..fb1da5ef10b3 100644
--- a/packages/react/src/fieldset/Fieldset.test.tsx
+++ b/packages/react/src/fieldset/Fieldset.test.tsx
@@ -15,8 +15,8 @@ afterEach(cleanup);
 function FieldsetBasic() {
 	return (
 		<Fieldset
-			legend="What is your name?"
 			hint="We will only use this to respond to your requests"
+			legend="What is your name?"
 		>
 			<FormStack>
 				<TextInput label="First name" required />
@@ -29,12 +29,12 @@ function FieldsetBasic() {
 function FieldsetLegendAsPageHeading() {
 	return (
 		<Fieldset
-			legend={<H1>What is your name?</H1>}
 			hint={
-				<Text fontSize="md" color="muted">
+				<Text color="muted" fontSize="md">
 					We will only use this to respond to your requests
 				</Text>
 			}
+			legend={<H1>What is your name?</H1>}
 		>
 			<FormStack>
 				<TextInput label="First name" required />
diff --git a/packages/react/src/fieldset/Fieldset.tsx b/packages/react/src/fieldset/Fieldset.tsx
index fe06ef53017f..8f30ff70adab 100644
--- a/packages/react/src/fieldset/Fieldset.tsx
+++ b/packages/react/src/fieldset/Fieldset.tsx
@@ -20,8 +20,8 @@ export const Fieldset = ({ children, hint, legend, id }: FieldsetProps) => {
 	const { fieldsetId, hintId } = useFieldsetIds(id);
 	return (
 		<FieldsetContainer
-			id={fieldsetId}
 			aria-describedby={hint ? hintId : undefined}
+			id={fieldsetId}
 		>
 			<FieldsetLegend>{legend}</FieldsetLegend>
 			{hint ? <FieldsetHint id={hintId}>{hint}</FieldsetHint> : null}
diff --git a/packages/react/src/fieldset/FieldsetContainer.tsx b/packages/react/src/fieldset/FieldsetContainer.tsx
index 042085275046..94c0a1aff193 100644
--- a/packages/react/src/fieldset/FieldsetContainer.tsx
+++ b/packages/react/src/fieldset/FieldsetContainer.tsx
@@ -11,7 +11,7 @@ export const FieldsetContainer = ({
 	children,
 	id,
 }: FieldsetContainerProps) => (
-	<Box as="fieldset" aria-describedby={ariaDescribedby} id={id}>
+	<Box aria-describedby={ariaDescribedby} as="fieldset" id={id}>
 		{children}
 	</Box>
 );
diff --git a/packages/react/src/fieldset/FieldsetHint.tsx b/packages/react/src/fieldset/FieldsetHint.tsx
index a59b85f5a853..2f4871cc4545 100644
--- a/packages/react/src/fieldset/FieldsetHint.tsx
+++ b/packages/react/src/fieldset/FieldsetHint.tsx
@@ -6,15 +6,15 @@ export type FieldsetHintProps = PropsWithChildren<{ id?: string }>;
 
 export const FieldsetHint = ({ children, id }: FieldsetHintProps) => {
 	return isValidElement(children) ? (
-		<div id={id} css={{ marginTop: mapSpacing(0.75) }}>
+		<div css={{ marginTop: mapSpacing(0.75) }} id={id}>
 			{children}
 		</div>
 	) : (
 		<Text
-			fontSize="sm"
 			color="muted"
-			display="block"
 			css={{ marginTop: mapSpacing(0.75) }}
+			display="block"
+			fontSize="sm"
 			id={id}
 		>
 			{children}
diff --git a/packages/react/src/fieldset/FieldsetLegend.tsx b/packages/react/src/fieldset/FieldsetLegend.tsx
index a6296b0a4d2e..4c17a8f49018 100644
--- a/packages/react/src/fieldset/FieldsetLegend.tsx
+++ b/packages/react/src/fieldset/FieldsetLegend.tsx
@@ -9,7 +9,7 @@ export const FieldsetLegend = ({ children }: FieldsetLegendProps) => {
 	return isValidElement(children) ? (
 		<legend>{children}</legend>
 	) : (
-		<Text as="legend" fontWeight="bold" fontSize="lg" lineHeight="heading">
+		<Text as="legend" fontSize="lg" fontWeight="bold" lineHeight="heading">
 			{children}
 		</Text>
 	);
diff --git a/packages/react/src/file-input/FileInput.tsx b/packages/react/src/file-input/FileInput.tsx
index 072e66b4c385..1cef8470bb08 100644
--- a/packages/react/src/file-input/FileInput.tsx
+++ b/packages/react/src/file-input/FileInput.tsx
@@ -205,7 +205,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
 						<input
 							{...props}
 							accept={accept?.toString()}
-							aria-hidden={true}
+							aria-hidden
 							css={visuallyHiddenStyles}
 							disabled={disabled}
 							multiple={multiple}
diff --git a/packages/react/src/file-upload/FileUpload.stories.tsx b/packages/react/src/file-upload/FileUpload.stories.tsx
index d26feb4faf73..ba50a9653880 100644
--- a/packages/react/src/file-upload/FileUpload.stories.tsx
+++ b/packages/react/src/file-upload/FileUpload.stories.tsx
@@ -20,7 +20,7 @@ const meta: Meta<typeof FileUpload> = {
 	component: FileUpload,
 	render: function Render({ value: initialValue = [], ...props }) {
 		const [value, setValue] = useState<FileWithStatus[]>(initialValue);
-		return <FileUpload {...props} value={value} onChange={setValue} />;
+		return <FileUpload {...props} onChange={setValue} value={value} />;
 	},
 	args: {
 		hideThumbnails: false,
@@ -171,7 +171,7 @@ const InstantUploadTemplate = (args: FileUploadProps) => {
 		}, 3000);
 	};
 
-	return <FileUpload {...args} value={value} onChange={onChange} />;
+	return <FileUpload {...args} onChange={onChange} value={value} />;
 };
 
 export const UploadSingleFileOnSubmit: Story = {
@@ -216,7 +216,7 @@ const UploadSingleFileOnSubmitTemplate = (args: FileUploadProps) => {
 	};
 
 	return (
-		<form onSubmit={handleSubmit(onSubmit, onError)} noValidate>
+		<form noValidate onSubmit={handleSubmit(onSubmit, onError)}>
 			<FormStack>
 				<Controller
 					control={control}
@@ -228,17 +228,17 @@ const UploadSingleFileOnSubmitTemplate = (args: FileUploadProps) => {
 						<div css={{ position: 'relative' }}>
 							<FileUpload
 								{...args}
-								id="file"
 								accept={['image/jpeg', 'image/png']}
+								id="file"
+								invalid={invalid}
 								maxSize={500} // 500kb
+								message={error?.message}
 								multiple={false}
-								value={value}
-								onChange={onChange}
-								onBlur={onBlur}
 								name={name}
-								invalid={invalid}
-								message={error?.message}
+								onBlur={onBlur}
+								onChange={onChange}
 								required
+								value={value}
 							/>
 							{
 								// We use a LoadingBlanket to communicate that this field is causing the form
@@ -249,7 +249,7 @@ const UploadSingleFileOnSubmitTemplate = (args: FileUploadProps) => {
 					)}
 				/>
 				<div>
-					<Button type="submit" loading={isSubmitting}>
+					<Button loading={isSubmitting} type="submit">
 						Submit evidence
 					</Button>
 				</div>
@@ -291,10 +291,10 @@ export const ExistingFiles: Story = {
 		return (
 			<FileUpload
 				{...args}
-				value={value}
-				onChange={setValue}
 				existingFiles={existingFiles}
+				onChange={setValue}
 				onRemoveExistingFile={onRemoveExistingFile}
+				value={value}
 			/>
 		);
 	},
diff --git a/packages/react/src/file-upload/FileUpload.test.tsx b/packages/react/src/file-upload/FileUpload.test.tsx
index 41c5cbab8008..19d8e1512aef 100644
--- a/packages/react/src/file-upload/FileUpload.test.tsx
+++ b/packages/react/src/file-upload/FileUpload.test.tsx
@@ -24,10 +24,10 @@ function FileUploadExample(
 
 	return (
 		<FileUpload
-			label="Upload file"
 			hint="General hint information"
-			value={value}
+			label="Upload file"
 			onChange={setValue}
+			value={value}
 			{...fileUploadProps}
 		/>
 	);
@@ -236,7 +236,7 @@ describe('FileUpload', () => {
 			describe('when a single file is selected', () => {
 				test('then it should be accepted', async () => {
 					const { container } = render(
-						<FileUploadExample multiple maxFiles={2} />
+						<FileUploadExample maxFiles={2} multiple />
 					);
 
 					const fileInput = container.querySelector(
@@ -261,8 +261,8 @@ describe('FileUpload', () => {
 				beforeEach(async () => {
 					const { container } = render(
 						<FileUploadExample
-							multiple
 							maxFiles={2}
+							multiple
 							setCurrentValue={setCurrentValue}
 						/>
 					);
diff --git a/packages/react/src/file-upload/FileUpload.tsx b/packages/react/src/file-upload/FileUpload.tsx
index d62cc4161f10..c41041ca1d71 100644
--- a/packages/react/src/file-upload/FileUpload.tsx
+++ b/packages/react/src/file-upload/FileUpload.tsx
@@ -287,13 +287,13 @@ export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
 
 		return (
 			<Field
-				label={label}
 				hideOptionalLabel={hideOptionalLabel}
-				required={required}
 				hint={hint}
-				message={message}
-				invalid={invalid}
 				id={id}
+				invalid={invalid}
+				label={label}
+				message={message}
+				required={required}
 			>
 				{(a11yProps) => {
 					const buttonAriaDescribedBy = [
@@ -319,7 +319,7 @@ export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
 									padding={1.5}
 									rounded
 								>
-									<UploadIcon size="lg" color="muted" />
+									<UploadIcon color="muted" size="lg" />
 									<input
 										{...dropzoneInputProps}
 										{...consumerProps}
diff --git a/packages/react/src/file-upload/FileUploadFileThumbnail.tsx b/packages/react/src/file-upload/FileUploadFileThumbnail.tsx
index d0becef735f7..9a8c1e92f3b8 100644
--- a/packages/react/src/file-upload/FileUploadFileThumbnail.tsx
+++ b/packages/react/src/file-upload/FileUploadFileThumbnail.tsx
@@ -8,8 +8,6 @@ export const width = '4.5rem';
 export const FileUploadFileThumbnail = ({ src }: { src?: string }) => {
 	return src ? (
 		<Box
-			flexShrink={0}
-			display={{ xs: 'none', md: 'block' }}
 			css={{
 				borderTopLeftRadius: tokens.borderRadius,
 				borderBottomLeftRadius: tokens.borderRadius,
@@ -18,20 +16,22 @@ export const FileUploadFileThumbnail = ({ src }: { src?: string }) => {
 				backgroundPosition: 'center',
 				width: width,
 			}}
+			display={{ xs: 'none', md: 'block' }}
+			flexShrink={0}
 		/>
 	) : (
 		<Flex
-			flexShrink={0}
 			alignItems="center"
-			justifyContent="center"
-			display={{ xs: 'none', md: 'flex' }}
 			css={{
 				borderTopLeftRadius: tokens.borderRadius,
 				borderBottomLeftRadius: tokens.borderRadius,
 				width: width,
 			}}
+			display={{ xs: 'none', md: 'flex' }}
+			flexShrink={0}
+			justifyContent="center"
 		>
-			<FileIcon size="md" color="muted" />
+			<FileIcon color="muted" size="md" />
 		</Flex>
 	);
 };
diff --git a/packages/react/src/filter-sidebar/FilterSidebar.stories.tsx b/packages/react/src/filter-sidebar/FilterSidebar.stories.tsx
index a963e74758b1..f8edd6036329 100644
--- a/packages/react/src/filter-sidebar/FilterSidebar.stories.tsx
+++ b/packages/react/src/filter-sidebar/FilterSidebar.stories.tsx
@@ -83,26 +83,26 @@ export const Layout: Story = {
 					</Column>
 					<Column
 						as="main"
-						id="main-content"
-						tabIndex={-1}
-						css={{ '&:focus': { outline: 'none' } }}
 						columnSpan={{ xs: 12, md: 8 }}
 						columnStart={{ lg: 5 }}
+						css={{ '&:focus': { outline: 'none' } }}
+						id="main-content"
+						tabIndex={-1}
 					>
 						<Stack gap={2}>
 							<Text
 								as="h2"
 								fontSize="md"
-								lineHeight="heading"
 								fontWeight={{ xs: 'normal', md: 'bold' }}
+								lineHeight="heading"
 							>
 								Search results (3)
 							</Text>
 							<Stack as="ul" gap={1}>
 								{listData.map((item) => (
-									<Card as="li" shadow clickable key={item.title}>
+									<Card as="li" clickable key={item.title} shadow>
 										<CardInner>
-											<Stack gap={0.5} width="100%" flexWrap="wrap">
+											<Stack flexWrap="wrap" gap={0.5} width="100%">
 												<H3>
 													<CardLink href="#">{item.title}</CardLink>
 												</H3>
@@ -110,10 +110,10 @@ export const Layout: Story = {
 												<Text as="p">{item.desc}</Text>
 
 												<Flex
-													gap={0.5}
+													alignItems="center"
 													flexWrap="wrap"
+													gap={0.5}
 													justifyContent="space-between"
-													alignItems="center"
 												>
 													<Text color="muted" fontSize="xs">
 														{item.author}
diff --git a/packages/react/src/flex/Flex.stories.tsx b/packages/react/src/flex/Flex.stories.tsx
index f815be43c115..52cb758d703e 100644
--- a/packages/react/src/flex/Flex.stories.tsx
+++ b/packages/react/src/flex/Flex.stories.tsx
@@ -20,43 +20,43 @@ export const Basic: Story = {
 	},
 	render: (props) => (
 		<Flex {...props}>
-			<Box display="block" width={100} height={100} background="shadeAlt" />
-			<Box display="block" width={100} height={100} background="shadeAlt" />
-			<Box display="block" width={100} height={100} background="shadeAlt" />
-			<Box display="block" width={100} height={100} background="shadeAlt" />
+			<Box background="shadeAlt" display="block" height={100} width={100} />
+			<Box background="shadeAlt" display="block" height={100} width={100} />
+			<Box background="shadeAlt" display="block" height={100} width={100} />
+			<Box background="shadeAlt" display="block" height={100} width={100} />
 		</Flex>
 	),
 };
 
 export const Alignment = () => (
-	<Stack gap={6} alignItems="flex-start">
+	<Stack alignItems="flex-start" gap={6}>
 		<Box fontFamily="monospace">center</Box>
-		<Flex gap={6} alignItems="center" border>
-			<Box display="block" width={100} minHeight={40} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={60} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={100} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={80} background="shadeAlt" />
+		<Flex alignItems="center" border gap={6}>
+			<Box background="shadeAlt" display="block" minHeight={40} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={60} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={100} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={80} width={100} />
 		</Flex>
 		<Box fontFamily="monospace">flex-start</Box>
-		<Flex gap={6} alignItems="flex-start" border>
-			<Box display="block" width={100} minHeight={40} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={60} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={100} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={80} background="shadeAlt" />
+		<Flex alignItems="flex-start" border gap={6}>
+			<Box background="shadeAlt" display="block" minHeight={40} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={60} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={100} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={80} width={100} />
 		</Flex>
 		<Box fontFamily="monospace">flex-end</Box>
-		<Flex gap={6} alignItems="flex-end" border>
-			<Box display="block" width={100} minHeight={40} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={60} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={100} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={80} background="shadeAlt" />
+		<Flex alignItems="flex-end" border gap={6}>
+			<Box background="shadeAlt" display="block" minHeight={40} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={60} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={100} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={80} width={100} />
 		</Flex>
 		<Box fontFamily="monospace">stretch</Box>
-		<Flex gap={6} alignItems="stretch" border>
-			<Box display="block" width={100} minHeight={40} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={60} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={100} background="shadeAlt" />
-			<Box display="block" width={100} minHeight={80} background="shadeAlt" />
+		<Flex alignItems="stretch" border gap={6}>
+			<Box background="shadeAlt" display="block" minHeight={40} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={60} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={100} width={100} />
+			<Box background="shadeAlt" display="block" minHeight={80} width={100} />
 		</Flex>
 	</Stack>
 );
diff --git a/packages/react/src/flex/Flex.tsx b/packages/react/src/flex/Flex.tsx
index 6f3803fd661c..e57bdbfc42c4 100644
--- a/packages/react/src/flex/Flex.tsx
+++ b/packages/react/src/flex/Flex.tsx
@@ -17,11 +17,11 @@ export const Flex = forwardRefWithAs<'div', FlexProps>(function Flex(
 ) {
 	return (
 		<Box
-			ref={ref}
+			alignItems={alignItems}
 			display={display ?? (inline ? 'inline-flex' : 'flex')}
 			flexDirection={flexDirection}
 			justifyContent={justifyContent}
-			alignItems={alignItems}
+			ref={ref}
 			{...props}
 		/>
 	);
diff --git a/packages/react/src/footer/Footer.tsx b/packages/react/src/footer/Footer.tsx
index 586118ed47a7..890f0261a441 100644
--- a/packages/react/src/footer/Footer.tsx
+++ b/packages/react/src/footer/Footer.tsx
@@ -29,10 +29,10 @@ export const Footer = ({
 			paddingY={3}
 		>
 			<Stack
-				maxWidth={tokens.maxWidth.container}
-				width="100%"
 				gap={1.5}
+				maxWidth={tokens.maxWidth.container}
 				paddingX={tokens.containerPadding}
+				width="100%"
 			>
 				{children}
 			</Stack>
diff --git a/packages/react/src/footer/FooterDivider.tsx b/packages/react/src/footer/FooterDivider.tsx
index fa15aed18319..2ead923a723d 100644
--- a/packages/react/src/footer/FooterDivider.tsx
+++ b/packages/react/src/footer/FooterDivider.tsx
@@ -8,7 +8,7 @@ export function FooterDivider({
 }) {
 	return (
 		<Box
-			aria-hidden="true"
+			aria-hidden
 			as="hr"
 			borderColor={color}
 			borderTop
diff --git a/packages/react/src/global-alert/GlobalAlert.tsx b/packages/react/src/global-alert/GlobalAlert.tsx
index 4edcb92522a7..08fde83fdad9 100644
--- a/packages/react/src/global-alert/GlobalAlert.tsx
+++ b/packages/react/src/global-alert/GlobalAlert.tsx
@@ -35,51 +35,51 @@ export function GlobalAlert({
 
 	return (
 		<Flex
-			as="section"
 			aria-label={title || ariaLabel}
+			as="section"
 			css={{ backgroundColor: bg }}
 			highContrastOutline
 		>
 			<Flex
 				alignItems="center"
+				css={{ backgroundColor: fg, color: boxPalette.backgroundBody }}
+				flexShrink={0}
 				justifyContent="center"
 				padding={0.75}
-				flexShrink={0}
-				css={{ backgroundColor: fg, color: boxPalette.backgroundBody }}
 			>
 				<Icon aria-hidden="false" aria-label={ariaLabel} color="inherit" />
 			</Flex>
 			<Flex
-				flexGrow={1}
 				alignItems="flex-start"
-				padding={1.5}
-				gap={2}
 				css={{ position: 'relative' }}
+				flexGrow={1}
+				gap={2}
+				padding={1.5}
 			>
 				<Stack flexGrow={1} gap={0.75}>
 					{title ? (
 						<Heading
 							as="h2"
-							type="h3"
-							maxWidth={tokens.maxWidth.bodyText}
 							css={{
 								...(addTitleMargin && {
 									marginRight: '2.5rem', // (1.5rem icon + 1rem gap)
 									[tokens.mediaQuery.min.lg]: { marginRight: 0 },
 								}),
 							}}
+							maxWidth={tokens.maxWidth.bodyText}
+							type="h3"
 						>
 							{title}
 						</Heading>
 					) : null}
 					<Box
-						maxWidth={tokens.maxWidth.bodyText}
 						css={{
 							...(addContentMargin && {
 								marginRight: '2.5rem', // (1.5rem icon + 1rem gap)
 								[tokens.mediaQuery.min.lg]: { marginRight: 0 },
 							}),
 						}}
+						maxWidth={tokens.maxWidth.bodyText}
 					>
 						{children}
 					</Box>
diff --git a/packages/react/src/global-alert/GlobalAlertCloseButton.tsx b/packages/react/src/global-alert/GlobalAlertCloseButton.tsx
index d49a43fe1702..4e825e66a5c7 100644
--- a/packages/react/src/global-alert/GlobalAlertCloseButton.tsx
+++ b/packages/react/src/global-alert/GlobalAlertCloseButton.tsx
@@ -13,9 +13,6 @@ export function GlobalAlertCloseButton({
 	return (
 		<Button
 			aria-label="Close"
-			onClick={onClick}
-			iconAfter={CloseIcon}
-			variant="text"
 			css={mq({
 				flexShrink: 0,
 
@@ -37,6 +34,9 @@ export function GlobalAlertCloseButton({
 					},
 				},
 			})}
+			iconAfter={CloseIcon}
+			onClick={onClick}
+			variant="text"
 		>
 			Close
 		</Button>
diff --git a/packages/react/src/grouped-fields/GroupedFields.stories.tsx b/packages/react/src/grouped-fields/GroupedFields.stories.tsx
index 1dfd04d0c68d..9c7c74ca6b40 100644
--- a/packages/react/src/grouped-fields/GroupedFields.stories.tsx
+++ b/packages/react/src/grouped-fields/GroupedFields.stories.tsx
@@ -27,12 +27,12 @@ export const Basic: Story = {
 					<TextInput label="TextInput" {...field1Props} />
 					<Select
 						label="Select"
-						placeholder="Please select"
 						options={[
 							{ value: 'a', label: 'Option A' },
 							{ value: 'b', label: 'Option B' },
 							{ value: 'c', label: 'Option C' },
 						]}
+						placeholder="Please select"
 						{...field2Props}
 					/>
 				</>
@@ -49,12 +49,12 @@ export const HideOptionalLabel: Story = {
 					<TextInput label="TextInput" {...field1Props} />
 					<Select
 						label="Select"
-						placeholder="Please select"
 						options={[
 							{ value: 'a', label: 'Option A' },
 							{ value: 'b', label: 'Option B' },
 							{ value: 'c', label: 'Option C' },
 						]}
+						placeholder="Please select"
 						{...field2Props}
 					/>
 				</>
@@ -71,12 +71,12 @@ export const VisuallyHideLegend: Story = {
 					<TextInput label="TextInput" {...field1Props} />
 					<Select
 						label="Select"
-						placeholder="Please select"
 						options={[
 							{ value: 'a', label: 'Option A' },
 							{ value: 'b', label: 'Option B' },
 							{ value: 'c', label: 'Option C' },
 						]}
+						placeholder="Please select"
 						{...field2Props}
 					/>
 				</>
@@ -87,18 +87,18 @@ export const VisuallyHideLegend: Story = {
 
 export const Hint: Story = {
 	render: () => (
-		<GroupedFields legend="Grouped fields" hint="Hint text">
+		<GroupedFields hint="Hint text" legend="Grouped fields">
 			{({ field1Props, field2Props }) => (
 				<>
 					<TextInput label="TextInput" {...field1Props} />
 					<Select
 						label="Select"
-						placeholder="Please select"
 						options={[
 							{ value: 'a', label: 'Option A' },
 							{ value: 'b', label: 'Option B' },
 							{ value: 'c', label: 'Option C' },
 						]}
+						placeholder="Please select"
 						{...field2Props}
 					/>
 				</>
@@ -119,12 +119,12 @@ export const Field1Invalid: Story = {
 					<TextInput label="TextInput" required {...field1Props} />
 					<Select
 						label="Select"
-						placeholder="Please select"
 						options={[
 							{ value: 'a', label: 'Option A' },
 							{ value: 'b', label: 'Option B' },
 							{ value: 'c', label: 'Option C' },
 						]}
+						placeholder="Please select"
 						{...field2Props}
 					/>
 				</>
@@ -145,12 +145,12 @@ export const Field2Invalid: Story = {
 					<TextInput label="TextInput" {...field1Props} />
 					<Select
 						label="Select"
-						placeholder="Please select"
 						options={[
 							{ value: 'a', label: 'Option A' },
 							{ value: 'b', label: 'Option B' },
 							{ value: 'c', label: 'Option C' },
 						]}
+						placeholder="Please select"
 						required
 						{...field2Props}
 					/>
@@ -173,12 +173,12 @@ export const BothFieldsInvalid: Story = {
 					<TextInput label="TextInput" required {...field1Props} />
 					<Select
 						label="Select"
-						placeholder="Please select"
 						options={[
 							{ value: 'a', label: 'Option A' },
 							{ value: 'b', label: 'Option B' },
 							{ value: 'c', label: 'Option C' },
 						]}
+						placeholder="Please select"
 						required
 						{...field2Props}
 					/>
@@ -242,11 +242,11 @@ export const AllPossibleFieldsInvalid: Story = {
 						/>
 						<DatePicker
 							label="Select date"
-							value={new Date()}
 							onChange={(value) => {
 								console.log(value);
 							}}
 							required
+							value={new Date()}
 							{...field2Props}
 						/>
 					</>
@@ -277,12 +277,12 @@ export const AllPossibleFieldsInvalid: Story = {
 					<>
 						<Select
 							label="Select"
-							placeholder="Please select"
 							options={[
 								{ value: 'a', label: 'Option A' },
 								{ value: 'b', label: 'Option B' },
 								{ value: 'c', label: 'Option C' },
 							]}
+							placeholder="Please select"
 							required
 							{...field1Props}
 						/>
diff --git a/packages/react/src/grouped-fields/GroupedFields.test.tsx b/packages/react/src/grouped-fields/GroupedFields.test.tsx
index 948277fc04a8..7b511640058c 100644
--- a/packages/react/src/grouped-fields/GroupedFields.test.tsx
+++ b/packages/react/src/grouped-fields/GroupedFields.test.tsx
@@ -19,12 +19,12 @@ function renderGroupedFields(props?: Partial<GroupedFieldsProps>) {
 					<TextInput label="TextInput" {...field1Props} />
 					<Select
 						label="Select"
-						placeholder="Please select"
 						options={[
 							{ value: 'a', label: 'Option A' },
 							{ value: 'b', label: 'Option B' },
 							{ value: 'c', label: 'Option C' },
 						]}
+						placeholder="Please select"
 						{...field2Props}
 					/>
 				</>
diff --git a/packages/react/src/header/Header.stories.tsx b/packages/react/src/header/Header.stories.tsx
index 25ed00ebdb91..b857e9d962af 100644
--- a/packages/react/src/header/Header.stories.tsx
+++ b/packages/react/src/header/Header.stories.tsx
@@ -91,13 +91,13 @@ export const WithMainNav: Story = {
 			<Header {...args} />
 			<MainNav
 				activePath="#account"
+				background="body"
 				items={[
 					{ href: '#account', label: 'Home' },
 					{ href: '#establishments', label: 'Establishments' },
 					{ href: '#intelligence', label: 'Data and insights' },
 					{ href: '#compliance', label: 'Compliance' },
 				]}
-				background="body"
 			/>
 		</Fragment>
 	),
diff --git a/packages/react/src/header/Header.test.tsx b/packages/react/src/header/Header.test.tsx
index b2fda61ee0c2..b536243a1bf0 100644
--- a/packages/react/src/header/Header.test.tsx
+++ b/packages/react/src/header/Header.test.tsx
@@ -10,10 +10,10 @@ expect.extend(toHaveNoViolations);
 function renderHeader(props?: Partial<HeaderProps>) {
 	return render(
 		<Header
+			background={'bodyAlt'}
 			heading={'Export Service'}
-			subline={'Supporting Australian agricultural exports'}
 			logo={<AgLogo />}
-			background={'bodyAlt'}
+			subline={'Supporting Australian agricultural exports'}
 			{...props}
 		/>
 	);
diff --git a/packages/react/src/header/Header.tsx b/packages/react/src/header/Header.tsx
index 687158dc7d82..008dd8bb8710 100644
--- a/packages/react/src/header/Header.tsx
+++ b/packages/react/src/header/Header.tsx
@@ -54,8 +54,8 @@ export function Header({
 					heading={heading}
 					href={href}
 					logo={logo}
-					secondLogo={secondLogo}
 					secondHref={secondHref}
+					secondLogo={secondLogo}
 					size={size}
 					subline={subline}
 				/>
diff --git a/packages/react/src/header/HeaderBrand.tsx b/packages/react/src/header/HeaderBrand.tsx
index 8c6b7b69e542..203e04801669 100644
--- a/packages/react/src/header/HeaderBrand.tsx
+++ b/packages/react/src/header/HeaderBrand.tsx
@@ -95,7 +95,6 @@ export function HeaderBrand({
 			</Flex>
 
 			<Flex
-				gap={GAP_REM}
 				css={
 					dividerPosition === 'after'
 						? {
@@ -107,6 +106,7 @@ export function HeaderBrand({
 						  }
 						: undefined
 				}
+				gap={GAP_REM}
 			>
 				{dividerPosition === 'after' && (
 					<DividingLine dividerPosition={dividerPosition} />
@@ -146,27 +146,27 @@ export function HeaderBrand({
 		</Flex>
 	) : (
 		<Flex
+			alignItems="stretch"
 			as={Link}
-			href={href}
-			inline
-			flexDirection={{ xs: 'column', md: 'row' }}
 			color="text"
-			gap={1}
-			focusRingFor="keyboard"
-			alignItems="stretch"
 			css={{
 				textDecoration: 'none',
 				':hover': packs.underline,
 			}}
+			flexDirection={{ xs: 'column', md: 'row' }}
+			focusRingFor="keyboard"
+			gap={1}
+			href={href}
+			inline
 		>
 			{logo ? (
 				<Flex
 					alignItems="flex-start"
-					maxWidth={logoWidthMap[size]}
 					css={{
 						' img, svg': { width: '100%' },
 						...packs.print.hidden,
 					}}
+					maxWidth={logoWidthMap[size]}
 				>
 					{logo}
 				</Flex>
@@ -174,16 +174,16 @@ export function HeaderBrand({
 			{logo ? (
 				<Box
 					borderRight
-					display={{ xs: 'none', md: 'block' }}
 					css={packs.print.hidden}
+					display={{ xs: 'none', md: 'block' }}
 				/>
 			) : null}
 			<Stack justifyContent="center">
 				<Flex alignItems="flex-start" gap={0.5}>
 					<Text
-						lineHeight="default"
 						fontSize={headingSizeMap[size]}
 						fontWeight="bold"
+						lineHeight="default"
 						maxWidth={tokens.maxWidth.bodyText}
 					>
 						{heading}
diff --git a/packages/react/src/header/HeaderContainer.tsx b/packages/react/src/header/HeaderContainer.tsx
index 2e98231b906f..f1704978e9ce 100644
--- a/packages/react/src/header/HeaderContainer.tsx
+++ b/packages/react/src/header/HeaderContainer.tsx
@@ -24,8 +24,8 @@ export function HeaderContainer({
 			as="header"
 			background={background}
 			color="text"
-			paddingY={paddingMap[size]}
 			justifyContent="center"
+			paddingY={paddingMap[size]}
 		>
 			<Box
 				maxWidth={tokens.maxWidth.container}
diff --git a/packages/react/src/heading/Heading.tsx b/packages/react/src/heading/Heading.tsx
index dbdcba49a503..89f8a4ec315e 100644
--- a/packages/react/src/heading/Heading.tsx
+++ b/packages/react/src/heading/Heading.tsx
@@ -36,32 +36,32 @@ export const Heading = forwardRefWithAs<'h2', HeadingProps>(function Heading(
 	return (
 		<Box
 			as={Tag}
-			ref={ref}
 			color={color}
-			fontSize={fontSize}
 			fontFamily={fontFamily}
+			fontSize={fontSize}
 			fontWeight={fontWeight}
 			lineHeight={lineHeight}
+			ref={ref}
 			{...props}
 		/>
 	);
 });
 
 export const H1 = forwardRefWithAs<'h1', BoxProps>((props, ref) => (
-	<Heading ref={ref} as="h1" type="h1" {...props} />
+	<Heading as="h1" ref={ref} type="h1" {...props} />
 ));
 export const H2 = forwardRefWithAs<'h2', BoxProps>((props, ref) => (
-	<Heading ref={ref} as="h2" type="h2" {...props} />
+	<Heading as="h2" ref={ref} type="h2" {...props} />
 ));
 export const H3 = forwardRefWithAs<'h3', BoxProps>((props, ref) => (
-	<Heading ref={ref} as="h3" type="h3" {...props} />
+	<Heading as="h3" ref={ref} type="h3" {...props} />
 ));
 export const H4 = forwardRefWithAs<'h4', BoxProps>((props, ref) => (
-	<Heading ref={ref} as="h4" type="h4" {...props} />
+	<Heading as="h4" ref={ref} type="h4" {...props} />
 ));
 export const H5 = forwardRefWithAs<'h5', BoxProps>((props, ref) => (
-	<Heading ref={ref} as="h5" type="h5" {...props} />
+	<Heading as="h5" ref={ref} type="h5" {...props} />
 ));
 export const H6 = forwardRefWithAs<'h6', BoxProps>((props, ref) => (
-	<Heading ref={ref} as="h6" type="h6" {...props} />
+	<Heading as="h6" ref={ref} type="h6" {...props} />
 ));
diff --git a/packages/react/src/hero-banner/HeroBanner/HeroBanner.stories.tsx b/packages/react/src/hero-banner/HeroBanner/HeroBanner.stories.tsx
index 6df30c52e1af..da6558e0b2ee 100644
--- a/packages/react/src/hero-banner/HeroBanner/HeroBanner.stories.tsx
+++ b/packages/react/src/hero-banner/HeroBanner/HeroBanner.stories.tsx
@@ -42,9 +42,9 @@ const meta: Meta<HeroBannerStoryProps> = {
 		subtitle: 'Short hero banner sentence - md/default (P)',
 		image: (
 			<img
-				src="https://design-system.agriculture.gov.au/img/placeholder/hero-banner.jpeg"
-				role="presentation"
 				alt=""
+				role="presentation"
+				src="https://design-system.agriculture.gov.au/img/placeholder/hero-banner.jpeg"
 			/>
 		),
 		children: (
@@ -73,7 +73,7 @@ export const OnBodyAlt: Story = {
 		background: 'body',
 	},
 	render: (args) => (
-		<Box paddingY={3} background="bodyAlt">
+		<Box background="bodyAlt" paddingY={3}>
 			<Template {...args} />
 		</Box>
 	),
diff --git a/packages/react/src/hero-banner/HeroBanner/HeroBanner.test.tsx b/packages/react/src/hero-banner/HeroBanner/HeroBanner.test.tsx
index b363b9a6dfd7..d42212cab7ba 100644
--- a/packages/react/src/hero-banner/HeroBanner/HeroBanner.test.tsx
+++ b/packages/react/src/hero-banner/HeroBanner/HeroBanner.test.tsx
@@ -19,9 +19,9 @@ function renderHeroBanner() {
 		<HeroBanner
 			image={
 				<img
-					src="/img/placeholder/hero-banner.jpeg"
-					role="presentation"
 					alt=""
+					role="presentation"
+					src="/img/placeholder/hero-banner.jpeg"
 				/>
 			}
 		>
diff --git a/packages/react/src/hero-banner/HeroBanner/HeroBannerContent.tsx b/packages/react/src/hero-banner/HeroBanner/HeroBannerContent.tsx
index 217aa2662052..48a31c8824d3 100644
--- a/packages/react/src/hero-banner/HeroBanner/HeroBannerContent.tsx
+++ b/packages/react/src/hero-banner/HeroBanner/HeroBannerContent.tsx
@@ -20,11 +20,11 @@ export const HeroBannerContent = ({
 		<Content>
 			<Flex>
 				<Stack
+					css={{ zIndex: tokens.zIndex.elevated }}
 					gap={2}
-					width={['100%', '100%', image ? '60%' : '100%']}
-					paddingTop={{ xs: 2, md: 4 }}
 					paddingBottom={{ xs: 3, md: 4 }}
-					css={{ zIndex: tokens.zIndex.elevated }}
+					paddingTop={{ xs: 2, md: 4 }}
+					width={['100%', '100%', image ? '60%' : '100%']}
 				>
 					{children}
 				</Stack>
diff --git a/packages/react/src/hero-banner/HeroBanner/HeroBannerImage.tsx b/packages/react/src/hero-banner/HeroBanner/HeroBannerImage.tsx
index 4122e45961f7..b2e3050baaa9 100644
--- a/packages/react/src/hero-banner/HeroBanner/HeroBannerImage.tsx
+++ b/packages/react/src/hero-banner/HeroBanner/HeroBannerImage.tsx
@@ -14,8 +14,6 @@ export const HeroBannerImage = ({
 	const backgroundVar = backgroundMap[background];
 	return (
 		<Box
-			display={['none', 'none', 'block']}
-			width="40%"
 			css={{
 				position: 'absolute',
 				top: 0,
@@ -37,6 +35,8 @@ export const HeroBannerImage = ({
 					objectPosition: 'center',
 				},
 			}}
+			display={['none', 'none', 'block']}
+			width="40%"
 		>
 			{children}
 		</Box>
diff --git a/packages/react/src/hero-banner/HeroBanner/HeroBannerMobileImage.tsx b/packages/react/src/hero-banner/HeroBanner/HeroBannerMobileImage.tsx
index c83a7884345a..5a965066f74e 100644
--- a/packages/react/src/hero-banner/HeroBanner/HeroBannerMobileImage.tsx
+++ b/packages/react/src/hero-banner/HeroBanner/HeroBannerMobileImage.tsx
@@ -7,7 +7,6 @@ export const HeroBannerMobileImage = ({
 	children,
 }: HeroBannerMobileImageProps) => (
 	<Box
-		display={{ xs: 'block', md: 'none' }}
 		css={{
 			position: 'relative',
 			overflow: 'hidden',
@@ -21,6 +20,7 @@ export const HeroBannerMobileImage = ({
 				maxWidth: '100%',
 			},
 		}}
+		display={{ xs: 'block', md: 'none' }}
 	>
 		{children}
 	</Box>
diff --git a/packages/react/src/hero-banner/HeroBanner/HeroBannerTitle.tsx b/packages/react/src/hero-banner/HeroBanner/HeroBannerTitle.tsx
index 1e2f4875358f..98e34fda6987 100644
--- a/packages/react/src/hero-banner/HeroBanner/HeroBannerTitle.tsx
+++ b/packages/react/src/hero-banner/HeroBanner/HeroBannerTitle.tsx
@@ -13,7 +13,7 @@ export const HeroBannerTitleContainer = ({
 export type HeroBannerTitleProps = { children: ReactNode };
 
 export const HeroBannerTitle = ({ children }: HeroBannerTitleProps) => (
-	<Heading type="h1" fontSize="xxxl">
+	<Heading fontSize="xxxl" type="h1">
 		{children}
 	</Heading>
 );
diff --git a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBanner.stories.tsx b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBanner.stories.tsx
index 17cdac5988b9..a5c188d2dfe9 100644
--- a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBanner.stories.tsx
+++ b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBanner.stories.tsx
@@ -34,9 +34,9 @@ const meta: Meta<HeroCategoryBannerStoryProps> = {
 		subtitle: 'Short hero banner sentence - md/default (P)',
 		image: (
 			<img
-				src="https://design-system.agriculture.gov.au/img/placeholder/hero-banner.jpeg"
-				role="presentation"
 				alt=""
+				role="presentation"
+				src="https://design-system.agriculture.gov.au/img/placeholder/hero-banner.jpeg"
 			/>
 		),
 	},
@@ -57,7 +57,7 @@ export const OnBodyAlt: Story = {
 		background: 'body',
 	},
 	render: (args) => (
-		<Box paddingY={3} background="bodyAlt">
+		<Box background="bodyAlt" paddingY={3}>
 			<Template {...args} />
 		</Box>
 	),
diff --git a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBanner.test.tsx b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBanner.test.tsx
index 8921cf384bcf..803d1581c862 100644
--- a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBanner.test.tsx
+++ b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBanner.test.tsx
@@ -17,9 +17,9 @@ function renderHeroCategoryBanner() {
 		<HeroCategoryBanner
 			image={
 				<img
-					src="/img/placeholder/hero-banner.jpeg"
-					role="presentation"
 					alt=""
+					role="presentation"
+					src="/img/placeholder/hero-banner.jpeg"
 				/>
 			}
 		>
diff --git a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerContent.tsx b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerContent.tsx
index 76b08f6da86a..6d770cdac75e 100644
--- a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerContent.tsx
+++ b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerContent.tsx
@@ -20,11 +20,11 @@ export const HeroCategoryBannerContent = ({
 		<Content>
 			<Flex>
 				<Stack
+					css={{ zIndex: tokens.zIndex.elevated }}
 					gap={1.5}
-					width={['100%', '100%', image ? '60%' : '100%']}
-					paddingTop={{ xs: 2, md: 4 }}
 					paddingBottom={{ xs: 3, md: 4 }}
-					css={{ zIndex: tokens.zIndex.elevated }}
+					paddingTop={{ xs: 2, md: 4 }}
+					width={['100%', '100%', image ? '60%' : '100%']}
 				>
 					{children}
 				</Stack>
diff --git a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerImage.tsx b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerImage.tsx
index 854f918dd5b0..fb5d054e5857 100644
--- a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerImage.tsx
+++ b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerImage.tsx
@@ -14,8 +14,6 @@ export const HeroCategoryBannerImage = ({
 	const backgroundVar = backgroundMap[background];
 	return (
 		<Box
-			display={['none', 'none', 'block']}
-			width="40%"
 			css={{
 				position: 'absolute',
 				top: 0,
@@ -37,6 +35,8 @@ export const HeroCategoryBannerImage = ({
 					objectPosition: 'center',
 				},
 			}}
+			display={['none', 'none', 'block']}
+			width="40%"
 		>
 			{children}
 		</Box>
diff --git a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerMobileImage.tsx b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerMobileImage.tsx
index c12164e8181f..807045c80f80 100644
--- a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerMobileImage.tsx
+++ b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerMobileImage.tsx
@@ -7,7 +7,6 @@ export const HeroCategoryBannerMobileImage = ({
 	children,
 }: HeroCategoryBannerMobileImageProps) => (
 	<Box
-		display={{ xs: 'block', md: 'none' }}
 		css={{
 			position: 'relative',
 			overflow: 'hidden',
@@ -21,6 +20,7 @@ export const HeroCategoryBannerMobileImage = ({
 				maxWidth: '100%',
 			},
 		}}
+		display={{ xs: 'block', md: 'none' }}
 	>
 		{children}
 	</Box>
diff --git a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerTitle.tsx b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerTitle.tsx
index 49fdd3d5b570..aff7e3423809 100644
--- a/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerTitle.tsx
+++ b/packages/react/src/hero-banner/HeroCategoryBanner/HeroCategoryBannerTitle.tsx
@@ -8,7 +8,7 @@ export type HeroCategoryBannerTitleProps = { children: ReactNode };
 export const HeroCategoryBannerTitle = ({
 	children,
 }: HeroCategoryBannerTitleProps) => (
-	<Heading type="h1" fontSize="xxl">
+	<Heading fontSize="xxl" type="h1">
 		{children}
 	</Heading>
 );
diff --git a/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBanner.stories.tsx b/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBanner.stories.tsx
index 30db8ff579ec..6b8bdd35e822 100644
--- a/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBanner.stories.tsx
+++ b/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBanner.stories.tsx
@@ -53,7 +53,7 @@ export const OnBodyAlt: Story = {
 		background: 'body',
 	},
 	render: (args) => (
-		<Box paddingY={3} background="bodyAlt">
+		<Box background="bodyAlt" paddingY={3}>
 			<Template {...args} />
 		</Box>
 	),
diff --git a/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBannerContent.tsx b/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBannerContent.tsx
index 1888c84f5c07..fdf76e02cd03 100644
--- a/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBannerContent.tsx
+++ b/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBannerContent.tsx
@@ -11,8 +11,8 @@ export const HeroSubcategoryBannerContent = ({
 		<Content>
 			<Stack
 				gap={1.5}
-				paddingTop={{ xs: 2, md: 3 }}
 				paddingBottom={{ xs: 3, md: 3 }}
+				paddingTop={{ xs: 2, md: 3 }}
 			>
 				{children}
 			</Stack>
diff --git a/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBannerTitle.tsx b/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBannerTitle.tsx
index 6d9edf445a0b..8b7fc2241613 100644
--- a/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBannerTitle.tsx
+++ b/packages/react/src/hero-banner/HeroSubcategoryBanner/HeroSubcategoryBannerTitle.tsx
@@ -6,7 +6,7 @@ export type HeroSubcategoryBannerTitleProps = { children: ReactNode };
 export const HeroSubcategoryBannerTitle = ({
 	children,
 }: HeroSubcategoryBannerTitleProps) => (
-	<Heading type="h1" fontSize="xxl">
+	<Heading fontSize="xxl" type="h1">
 		{children}
 	</Heading>
 );
diff --git a/packages/react/src/icon/Icon.stories.tsx b/packages/react/src/icon/Icon.stories.tsx
index 3367b3e14a87..14f47549928d 100644
--- a/packages/react/src/icon/Icon.stories.tsx
+++ b/packages/react/src/icon/Icon.stories.tsx
@@ -29,23 +29,23 @@ export const Basic: Story = {};
 
 export const AllIcons: Story = {
 	render: (args) => (
-		<Flex gap={0.5} flexWrap="wrap">
+		<Flex flexWrap="wrap" gap={0.5}>
 			{Object.keys(allIcons)
 				.sort()
 				.map((iconName) => {
 					const Icon = allIcons[iconName as keyof typeof allIcons];
 					return (
 						<Flex
-							key={iconName}
-							flexDirection="column"
 							alignItems="center"
-							justifyContent="center"
+							background="shade"
+							css={{ width: 180 }}
+							flexDirection="column"
 							flexShrink={0}
-							rounded
 							gap={1}
+							justifyContent="center"
+							key={iconName}
 							padding={2}
-							background="shade"
-							css={{ width: 180 }}
+							rounded
 						>
 							<Icon {...args} />
 							<Text>{iconName}</Text>
diff --git a/packages/react/src/icon/icons/AlertFilledIcon.tsx b/packages/react/src/icon/icons/AlertFilledIcon.tsx
index de814acc56f3..8cda1964ec24 100644
--- a/packages/react/src/icon/icons/AlertFilledIcon.tsx
+++ b/packages/react/src/icon/icons/AlertFilledIcon.tsx
@@ -2,9 +2,9 @@ import { createIcon } from '../Icon';
 
 export const AlertFilledIcon = createIcon(
 	<path
-		stroke="none"
-		fill="currentColor"
 		d="M16.4661 0.5C16.7332 0.5 16.9893 0.6069 17.1771 0.796862L23.2111 6.89871C23.3962 7.08591 23.5 7.33857 23.5 7.60185V16.3935C23.5 16.6595 23.394 16.9146 23.2055 17.1023L17.0712 23.2087C16.8838 23.3953 16.6301 23.5 16.3657 23.5H7.63889C7.37177 23.5 7.11576 23.3931 6.92792 23.2032L0.789033 16.9968C0.60386 16.8095 0.5 16.5569 0.5 16.2935V7.60646C0.5 7.34045 0.605983 7.08541 0.794505 6.89774L6.92885 0.791284C7.11625 0.604732 7.36991 0.5 7.63434 0.5H16.4661ZM16.7071 7.29289C17.0976 7.68342 17.0976 8.31658 16.7071 8.70711L13.4142 12L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L12 13.4142L8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L10.5858 12L7.29289 8.70711C6.90237 8.31658 6.90237 7.68342 7.29289 7.29289C7.68342 6.90237 8.31658 6.90237 8.70711 7.29289L12 10.5858L15.2929 7.29289C15.6834 6.90237 16.3166 6.90237 16.7071 7.29289Z"
+		fill="currentColor"
+		stroke="none"
 	/>,
 	'AlertFilledIcon'
 );
diff --git a/packages/react/src/icon/icons/CalendarIcon.tsx b/packages/react/src/icon/icons/CalendarIcon.tsx
index cec4c32654c0..d4a0d916c06d 100644
--- a/packages/react/src/icon/icons/CalendarIcon.tsx
+++ b/packages/react/src/icon/icons/CalendarIcon.tsx
@@ -6,7 +6,7 @@ export const CalendarIcon = createIcon(
 		<path d="M8 3C8 4.5621 8 5.4379 8 7" />
 		<path d="M16 3C16 4.5621 16 5.4379 16 7" />
 		<path d="M21 20V6C21 5.44772 20.5523 5 20 5H4C3.44772 5 3 5.44772 3 6V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20Z" />
-		<line x1="3" y1="12" x2="21" y2="12" />
+		<line x1="3" x2="21" y1="12" y2="12" />
 	</Fragment>,
 	'CalendarIcon'
 );
diff --git a/packages/react/src/icon/icons/CloseIcon.tsx b/packages/react/src/icon/icons/CloseIcon.tsx
index 8548f7564282..d9a7953f501f 100644
--- a/packages/react/src/icon/icons/CloseIcon.tsx
+++ b/packages/react/src/icon/icons/CloseIcon.tsx
@@ -3,8 +3,8 @@ import { createIcon } from '../Icon';
 
 export const CloseIcon = createIcon(
 	<Fragment>
-		<line x1="18" y1="6" x2="6" y2="18" />
-		<line x1="6" y1="6" x2="18" y2="18" />
+		<line x1="18" x2="6" y1="6" y2="18" />
+		<line x1="6" x2="18" y1="6" y2="18" />
 	</Fragment>,
 	'CloseIcon'
 );
diff --git a/packages/react/src/icon/icons/CopyIcon.tsx b/packages/react/src/icon/icons/CopyIcon.tsx
index fe0b1036de32..c6dd4af77548 100644
--- a/packages/react/src/icon/icons/CopyIcon.tsx
+++ b/packages/react/src/icon/icons/CopyIcon.tsx
@@ -3,7 +3,7 @@ import { createIcon } from '../Icon';
 
 export const CopyIcon = createIcon(
 	<Fragment>
-		<rect x="9" y="9" width="12" height="12" rx="1" />
+		<rect height="12" rx="1" width="12" x="9" y="9" />
 		<path d="M5 15H4C3.44772 15 3 14.5523 3 14V4C3 3.44772 3.44772 3 4 3H14C14.5523 3 15 3.44772 15 4V5" />
 	</Fragment>,
 	'CopyIcon'
diff --git a/packages/react/src/icon/icons/MinusIcon.tsx b/packages/react/src/icon/icons/MinusIcon.tsx
index 2b3472c98588..1e17eeb2b21e 100644
--- a/packages/react/src/icon/icons/MinusIcon.tsx
+++ b/packages/react/src/icon/icons/MinusIcon.tsx
@@ -1,6 +1,6 @@
 import { createIcon } from '../Icon';
 
 export const MinusIcon = createIcon(
-	<line x1="5" y1="12" x2="19" y2="12" />,
+	<line x1="5" x2="19" y1="12" y2="12" />,
 	'PlusIcon'
 );
diff --git a/packages/react/src/icon/icons/PauseIcon.tsx b/packages/react/src/icon/icons/PauseIcon.tsx
index cccb87c188eb..284823662a07 100644
--- a/packages/react/src/icon/icons/PauseIcon.tsx
+++ b/packages/react/src/icon/icons/PauseIcon.tsx
@@ -3,8 +3,8 @@ import { createIcon } from '../Icon';
 
 export const PauseIcon = createIcon(
 	<Fragment>
-		<rect x="6" y="4" width="4" height="16"></rect>
-		<rect x="14" y="4" width="4" height="16"></rect>
+		<rect height="16" width="4" x="6" y="4"></rect>
+		<rect height="16" width="4" x="14" y="4"></rect>
 	</Fragment>,
 	'PauseIcon'
 );
diff --git a/packages/react/src/icon/icons/SearchIcon.tsx b/packages/react/src/icon/icons/SearchIcon.tsx
index 92d6ecba5db4..9d62fcb623ea 100644
--- a/packages/react/src/icon/icons/SearchIcon.tsx
+++ b/packages/react/src/icon/icons/SearchIcon.tsx
@@ -3,7 +3,7 @@ import { createIcon } from '../Icon';
 
 export const SearchIcon = createIcon(
 	<Fragment>
-		<line x1="15.5568" y1="15.5562" x2="21.9208" y2="21.9201" />
+		<line x1="15.5568" x2="21.9208" y1="15.5562" y2="21.9201" />
 		<circle cx="9.8995" cy="9.89941" r="7" />
 	</Fragment>,
 	'SearchIcon'
diff --git a/packages/react/src/icon/icons/WarningFilledIcon.tsx b/packages/react/src/icon/icons/WarningFilledIcon.tsx
index 1f53012146d0..4210a6449d88 100644
--- a/packages/react/src/icon/icons/WarningFilledIcon.tsx
+++ b/packages/react/src/icon/icons/WarningFilledIcon.tsx
@@ -2,9 +2,9 @@ import { createIcon } from '../Icon';
 
 export const WarningFilledIcon = createIcon(
 	<path
-		stroke="none"
-		fill="currentColor"
 		d="m23.1 20.1-9.3-18C13.4 1.4 12.7 1 12 1s-1.4.4-1.8 1.1l-9.3 18c-.3.6-.3 1.4.1 2 .4.6 1 1 1.7 1h18.7c.7 0 1.31-.33 1.7-1 .36-.6.3-1.4 0-2ZM12 19c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1Zm1-5c0 .6-.4 1-1 1s-1-.4-1-1V9c0-.6.4-1 1-1s1 .4 1 1v5Z"
+		fill="currentColor"
+		stroke="none"
 	/>,
 	'WarningFilledIcon'
 );
diff --git a/packages/react/src/indicator-dot/IndicatorDot.stories.tsx b/packages/react/src/indicator-dot/IndicatorDot.stories.tsx
index 29051714a70b..bb1fc1e5168c 100644
--- a/packages/react/src/indicator-dot/IndicatorDot.stories.tsx
+++ b/packages/react/src/indicator-dot/IndicatorDot.stories.tsx
@@ -21,7 +21,7 @@ export const Basic: Story = {
 
 export const Example = () => {
 	return (
-		<Flex flexDirection="column" as="ul">
+		<Flex as="ul" flexDirection="column">
 			<Flex
 				as="li"
 				borderColor="muted"
diff --git a/packages/react/src/indicator-dot/IndicatorDot.tsx b/packages/react/src/indicator-dot/IndicatorDot.tsx
index 6cd10065307d..64c513f4c806 100644
--- a/packages/react/src/indicator-dot/IndicatorDot.tsx
+++ b/packages/react/src/indicator-dot/IndicatorDot.tsx
@@ -12,13 +12,13 @@ export const IndicatorDot = ({
 	return (
 		<Box
 			aria-label={ariaLabel}
-			highContrastOutline
 			css={{
 				width: 8,
 				height: 8,
 				borderRadius: 4,
 				backgroundColor: boxPalette.foregroundAction,
 			}}
+			highContrastOutline
 		/>
 	);
 };
diff --git a/packages/react/src/inpage-nav/InpageNavContainer.tsx b/packages/react/src/inpage-nav/InpageNavContainer.tsx
index 42df097ae63e..9436da7a4ca1 100644
--- a/packages/react/src/inpage-nav/InpageNavContainer.tsx
+++ b/packages/react/src/inpage-nav/InpageNavContainer.tsx
@@ -11,15 +11,15 @@ export const InpageNavContainer = ({
 	'aria-label': ariaLabel,
 }: InpageNavContainerProps) => (
 	<Stack
+		aria-label={ariaLabel}
 		as="nav"
-		gap={1}
 		borderLeft
 		borderLeftWidth="xl"
-		paddingLeft={1.5}
 		css={{
 			borderLeftColor: boxPalette.foregroundAction,
 		}}
-		aria-label={ariaLabel}
+		gap={1}
+		paddingLeft={1.5}
 	>
 		{children}
 	</Stack>
diff --git a/packages/react/src/link-list/LinkListContainer.tsx b/packages/react/src/link-list/LinkListContainer.tsx
index 539a0ef9f05c..a297ae916428 100644
--- a/packages/react/src/link-list/LinkListContainer.tsx
+++ b/packages/react/src/link-list/LinkListContainer.tsx
@@ -12,9 +12,9 @@ export const LinkListContainer = ({
 	return (
 		<Stack
 			as="ul"
-			gap={horizontal ? 1 : 0.5}
 			flexDirection={horizontal ? 'row' : 'column'}
 			flexWrap="wrap"
+			gap={horizontal ? 1 : 0.5}
 		>
 			{children}
 		</Stack>
diff --git a/packages/react/src/loading/LoadingBlanket.stories.tsx b/packages/react/src/loading/LoadingBlanket.stories.tsx
index 42b769b1a278..84b6b7165847 100644
--- a/packages/react/src/loading/LoadingBlanket.stories.tsx
+++ b/packages/react/src/loading/LoadingBlanket.stories.tsx
@@ -25,11 +25,11 @@ export const Basic: Story = {
 	render: (args) => (
 		<Box
 			background="body"
-			height="300px"
-			width="100%"
-			padding={1}
 			border
 			css={{ position: 'relative' }}
+			height="300px"
+			padding={1}
+			width="100%"
 		>
 			<LoadingBlanket {...args} />
 		</Box>
@@ -55,7 +55,7 @@ export const FullScreen: Story = {
 const FullScreenContent = () => (
 	<Fragment>
 		<Stack palette="dark">
-			<Header logo={<Logo />} heading="Export Service" />
+			<Header heading="Export Service" logo={<Logo />} />
 			<MainNav items={[{ label: 'Hello', href: '#' }]} />
 		</Stack>
 		<PageContent>
diff --git a/packages/react/src/loading/LoadingBlanketContainer.tsx b/packages/react/src/loading/LoadingBlanketContainer.tsx
index 6cc1b60164bd..bff46f32d2e0 100644
--- a/packages/react/src/loading/LoadingBlanketContainer.tsx
+++ b/packages/react/src/loading/LoadingBlanketContainer.tsx
@@ -12,18 +12,18 @@ export const LoadingBlanketContainer = ({
 	fullScreen,
 }: LoadingBlanketContainerProps) => (
 	<Flex
-		palette="light"
-		color="text"
-		flexDirection="column"
-		justifyContent="center"
 		alignItems="center"
 		aria-live="assertive"
+		color="text"
 		css={{
 			position: fullScreen ? 'fixed' : 'absolute',
 			inset: 0,
 			zIndex: tokens.zIndex.overlay,
 			backgroundColor: `rgba(255, 255, 255, 0.9)`,
 		}}
+		flexDirection="column"
+		justifyContent="center"
+		palette="light"
 	>
 		{children}
 	</Flex>
diff --git a/packages/react/src/loading/LoadingBlanketContent.tsx b/packages/react/src/loading/LoadingBlanketContent.tsx
index 9a1cc0713737..cec1538a1cda 100644
--- a/packages/react/src/loading/LoadingBlanketContent.tsx
+++ b/packages/react/src/loading/LoadingBlanketContent.tsx
@@ -10,7 +10,7 @@ export const LoadingBlanketContent = ({
 	children,
 }: LoadingBlanketContentProps) => (
 	<Content as="div">
-		<Stack gap={1} alignItems="center" textAlign="center">
+		<Stack alignItems="center" gap={1} textAlign="center">
 			{children}
 		</Stack>
 	</Content>
diff --git a/packages/react/src/loading/LoadingDots.tsx b/packages/react/src/loading/LoadingDots.tsx
index 750e641d7f07..0532a81f4911 100644
--- a/packages/react/src/loading/LoadingDots.tsx
+++ b/packages/react/src/loading/LoadingDots.tsx
@@ -40,23 +40,19 @@ export const LoadingDots = ({
 	const dotsArr = Array.from(Array(dots).keys());
 	return (
 		<Flex
+			aria-atomic="false"
+			aria-live={ariaLive}
 			as="span"
-			gap={gap}
 			className={className}
-			aria-live={ariaLive}
-			aria-atomic="false"
+			gap={gap}
 			role={role}
 			{...props}
 		>
 			{label && <VisuallyHidden>{label}</VisuallyHidden>}
 			{dotsArr.map((idx) => (
 				<Box
-					key={idx}
+					aria-hidden
 					as="span"
-					height={dotSize}
-					width={dotSize}
-					highContrastOutline
-					aria-hidden="true"
 					css={{
 						opacity: 0,
 						background: 'currentColor',
@@ -66,6 +62,10 @@ export const LoadingDots = ({
 						animationIterationCount: 'infinite',
 						animationDelay: `${idx * 100}ms`,
 					}}
+					height={dotSize}
+					highContrastOutline
+					key={idx}
+					width={dotSize}
 				/>
 			))}
 		</Flex>
diff --git a/packages/react/src/main-nav/MainNav.stories.tsx b/packages/react/src/main-nav/MainNav.stories.tsx
index 3508b003801f..e896ef93412b 100644
--- a/packages/react/src/main-nav/MainNav.stories.tsx
+++ b/packages/react/src/main-nav/MainNav.stories.tsx
@@ -59,7 +59,7 @@ export const SecondaryLinks: Story = {
 				label: 'Messages',
 				endElement: (
 					<Fragment>
-						<NotificationBadge tone="action" value={5} aria-hidden />
+						<NotificationBadge aria-hidden tone="action" value={5} />
 						<VisuallyHidden>, 5 unread</VisuallyHidden>
 					</Fragment>
 				),
@@ -90,7 +90,7 @@ export const SecondaryDropdown: Story = {
 		secondaryItems: [
 			{
 				label: 'Moe Syzlack',
-				beforeElement: <Avatar name="Moe Syzlack" tone="action" size="md" />,
+				beforeElement: <Avatar name="Moe Syzlack" size="md" tone="action" />,
 				dropdown: (
 					<DropdownMenuPanel palette="light">
 						<DropdownMenuItemLink href="#profile">Profile</DropdownMenuItemLink>
@@ -136,8 +136,8 @@ export const SecondaryDropdownLongName: Story = {
 				beforeElement: (
 					<Avatar
 						name="Benjamin Alexander Harrington-Smythe"
-						tone="action"
 						size="md"
+						tone="action"
 					/>
 				),
 				dropdown: (
@@ -180,7 +180,7 @@ export const EndElement: Story = {
 				label: 'Issues',
 				endElement: (
 					<Fragment>
-						<NotificationBadge tone="action" value={5} aria-hidden />
+						<NotificationBadge aria-hidden tone="action" value={5} />
 						<VisuallyHidden>, 5 notifications</VisuallyHidden>
 					</Fragment>
 				),
@@ -201,11 +201,11 @@ export const WithHeaderAndDropdown: Story = {
 		return (
 			<Box dark>
 				<Header
+					background="bodyAlt"
 					heading="Export Service"
-					subline="Supporting Australian agricultural exports"
 					logo={<Logo />}
-					background="bodyAlt"
-					rightContent={<SearchInput label="Search" hideOptionalLabel block />}
+					rightContent={<SearchInput block hideOptionalLabel label="Search" />}
+					subline="Supporting Australian agricultural exports"
 				/>
 				<MainNav
 					activePath="#home"
@@ -218,7 +218,7 @@ export const WithHeaderAndDropdown: Story = {
 						{
 							label: 'Moe Syzlack',
 							beforeElement: (
-								<Avatar name="Moe Syzlack" tone="action" size="md" />
+								<Avatar name="Moe Syzlack" size="md" tone="action" />
 							),
 							dropdown: (
 								<DropdownMenuPanel palette="light">
@@ -252,7 +252,7 @@ export const WithHeaderAndDropdown: Story = {
 										<DropdownMenuItemLink href="#messages" icon={EmailIcon}>
 											Messages
 										</DropdownMenuItemLink>
-										<DropdownMenuItem onClick={console.log} icon={ExitIcon}>
+										<DropdownMenuItem icon={ExitIcon} onClick={console.log}>
 											Sign out
 										</DropdownMenuItem>
 									</DropdownMenuGroup>
diff --git a/packages/react/src/main-nav/MainNav.test.tsx b/packages/react/src/main-nav/MainNav.test.tsx
index b56004863b89..795a57151b28 100644
--- a/packages/react/src/main-nav/MainNav.test.tsx
+++ b/packages/react/src/main-nav/MainNav.test.tsx
@@ -75,7 +75,7 @@ describe('MainNav', () => {
 			secondaryItems: [
 				{
 					label: 'Moe Syzlack',
-					beforeElement: <Avatar name="Moe Syzlack" tone="action" size="md" />,
+					beforeElement: <Avatar name="Moe Syzlack" size="md" tone="action" />,
 					dropdown: (
 						<DropdownMenuPanel>
 							<DropdownMenuItem>Item 1</DropdownMenuItem>
diff --git a/packages/react/src/main-nav/MainNavBottomBar.tsx b/packages/react/src/main-nav/MainNavBottomBar.tsx
index 258ae4a51b44..260c26b8fb2e 100644
--- a/packages/react/src/main-nav/MainNavBottomBar.tsx
+++ b/packages/react/src/main-nav/MainNavBottomBar.tsx
@@ -3,7 +3,7 @@ import { type ResponsiveProp } from '../core';
 
 /**
  * @deprecated
- * Use `focusMode={true}` on `MainNav` instead.
+ * Use `focusMode` on `MainNav` instead.
  * This will be removed in the next major version.
  */
 export function MainNavBottomBar({
diff --git a/packages/react/src/main-nav/MainNavDialog.tsx b/packages/react/src/main-nav/MainNavDialog.tsx
index d0ae394b0293..a33db9361a32 100644
--- a/packages/react/src/main-nav/MainNavDialog.tsx
+++ b/packages/react/src/main-nav/MainNavDialog.tsx
@@ -45,19 +45,14 @@ export function MainNavDialog({
 	if (!isMobileMenuOpen) return null;
 
 	return createPortal(
-		<Box ref={modalContainerRef} display={{ lg: 'none' }}>
+		<Box display={{ lg: 'none' }} ref={modalContainerRef}>
 			<LockScroll />
 			<Overlay onClick={closeMobileMenu} />
 			<FocusLock returnFocus>
 				<Flex
 					aria-label="Main menu"
-					role="dialog"
-					aria-modal="true"
+					aria-modal
 					background="body"
-					flexDirection="column"
-					padding={1}
-					gap={0.5}
-					width="17.5rem"
 					css={{
 						position: 'fixed',
 						zIndex: tokens.zIndex.dialog,
@@ -66,6 +61,11 @@ export function MainNavDialog({
 						bottom: 0,
 						overflowY: 'auto',
 					}}
+					flexDirection="column"
+					gap={0.5}
+					padding={1}
+					role="dialog"
+					width="17.5rem"
 				>
 					<MainNavCloseButton onClick={closeMobileMenu} />
 					<MainNavDialogNavList
diff --git a/packages/react/src/main-nav/MainNavDialogNavList.tsx b/packages/react/src/main-nav/MainNavDialogNavList.tsx
index dafc00661387..f28fcb729ab3 100644
--- a/packages/react/src/main-nav/MainNavDialogNavList.tsx
+++ b/packages/react/src/main-nav/MainNavDialogNavList.tsx
@@ -22,7 +22,7 @@ export function MainNavDialogNavList({
 	const Link = useLinkComponent();
 	return (
 		<nav aria-label={ariaLabel}>
-			<Flex as="ul" flexDirection="column" borderTop borderColor="muted">
+			<Flex as="ul" borderColor="muted" borderTop flexDirection="column">
 				{items?.map(({ label, endElement, ...item }, index) => {
 					if (isItemLink(item)) {
 						const active = item.href === activePath;
@@ -40,7 +40,7 @@ export function MainNavDialogNavList({
 						);
 					}
 					return (
-						<MainNavDialogNavListItem key={index} active={false}>
+						<MainNavDialogNavListItem active={false} key={index}>
 							<BaseButton {...item}>
 								<span>{label}</span>
 								{endElement}
diff --git a/packages/react/src/main-nav/MainNavList.tsx b/packages/react/src/main-nav/MainNavList.tsx
index 65d5a6624085..72c721e9247d 100644
--- a/packages/react/src/main-nav/MainNavList.tsx
+++ b/packages/react/src/main-nav/MainNavList.tsx
@@ -35,8 +35,8 @@ export function MainNavList({
 	const Link = useLinkComponent();
 	return (
 		<Flex
-			as="nav"
 			aria-label={ariaLabel}
+			as="nav"
 			// Primary links are hidden on desktop as they are visible in the sidebar
 			display={type === 'primary' ? { xs: 'none', lg: 'flex' } : undefined}
 			minHeight={{ xs: '5rem', lg: '3.5rem' }}
@@ -47,7 +47,7 @@ export function MainNavList({
 					if ('href' in item) {
 						const active = item.href === activePath;
 						return (
-							<MainNavListItem key={index} active={active} type={type}>
+							<MainNavListItem active={active} key={index} type={type}>
 								<Link aria-current={active ? 'page' : undefined} {...item}>
 									{beforeElement}
 									<span>{label}</span>
@@ -60,17 +60,17 @@ export function MainNavList({
 					if ('dropdown' in item) {
 						return (
 							<MainNavListItemDropdown
-								key={index}
-								label={label}
 								beforeElement={beforeElement}
 								endElement={endElement}
+								key={index}
+								label={label}
 								{...item}
 							/>
 						);
 					}
 
 					return (
-						<MainNavListItem key={index} active={false} type={type}>
+						<MainNavListItem active={false} key={index} type={type}>
 							<BaseButton {...item}>
 								{beforeElement}
 								<span>{label}</span>
diff --git a/packages/react/src/main-nav/MainNavListItem.tsx b/packages/react/src/main-nav/MainNavListItem.tsx
index 26e0c4d3d4ff..43e0822273d8 100644
--- a/packages/react/src/main-nav/MainNavListItem.tsx
+++ b/packages/react/src/main-nav/MainNavListItem.tsx
@@ -17,7 +17,6 @@ export function MainNavListItem({
 	return (
 		<Flex
 			as="li"
-			fontSize={{ xs: 'xs', lg: 'sm' }}
 			css={mq({
 				' > a, > button': {
 					boxSizing: 'border-box',
@@ -74,6 +73,7 @@ export function MainNavListItem({
 					},
 				},
 			})}
+			fontSize={{ xs: 'xs', lg: 'sm' }}
 		>
 			{children}
 		</Flex>
diff --git a/packages/react/src/main-nav/MainNavListItemDropdown.tsx b/packages/react/src/main-nav/MainNavListItemDropdown.tsx
index 033077e5a1ad..50399bba3e22 100644
--- a/packages/react/src/main-nav/MainNavListItemDropdown.tsx
+++ b/packages/react/src/main-nav/MainNavListItemDropdown.tsx
@@ -20,7 +20,7 @@ export type MainNavListDropdown = {
 export function MainNavListItemDropdown(props: MainNavListDropdown) {
 	return (
 		<li>
-			<DropdownMenu popoverPlacement="bottom-end" popoverOffset={-8}>
+			<DropdownMenu popoverOffset={-8} popoverPlacement="bottom-end">
 				<MainNavListItemDropdownButton {...props} />
 				{props.dropdown}
 			</DropdownMenu>
@@ -44,25 +44,9 @@ function MainNavListItemDropdownButton({
 
 	return (
 		<Flex
-			as={BaseButton}
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			ref={ref}
-			fontSize={{ xs: 'xs', lg: 'sm' }}
-			justifyContent="center"
 			alignItems="center"
-			gap={0.5}
-			paddingLeft={1}
-			paddingRight={1}
+			as={BaseButton}
 			color="action"
-			height="100%"
-			maxWidth={{
-				// 17.625rem is the available space beside the hamburger at 375px
-				xs: `calc(17.625rem - ${scrollbarWidthRef.current}px)`,
-				// It's then reduced slightly to give more room for the nav items
-				lg: `calc(16rem - ${scrollbarWidthRef.current}px)`,
-			}}
-			focusRingFor="keyboard"
 			css={[
 				isMenuOpen ? { background: localPalette.linkHoverBg } : undefined,
 				{
@@ -74,17 +58,33 @@ function MainNavListItemDropdownButton({
 					},
 				},
 			]}
+			focusRingFor="keyboard"
+			fontSize={{ xs: 'xs', lg: 'sm' }}
+			gap={0.5}
+			height="100%"
+			justifyContent="center"
+			maxWidth={{
+				// 17.625rem is the available space beside the hamburger at 375px
+				xs: `calc(17.625rem - ${scrollbarWidthRef.current}px)`,
+				// It's then reduced slightly to give more room for the nav items
+				lg: `calc(16rem - ${scrollbarWidthRef.current}px)`,
+			}}
+			paddingLeft={1}
+			paddingRight={1}
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			ref={ref}
 			{...buttonProps}
 		>
 			{beforeElement}
-			<span data-main-nav-list-item-label css={packs.truncate}>
+			<span css={packs.truncate} data-main-nav-list-item-label>
 				{label}
 			</span>
 			{endElement}
 			{isMenuOpen ? (
-				<ChevronUpIcon size="sm" weight="bold" css={{ flexShrink: 0 }} />
+				<ChevronUpIcon css={{ flexShrink: 0 }} size="sm" weight="bold" />
 			) : (
-				<ChevronDownIcon size="sm" weight="bold" css={{ flexShrink: 0 }} />
+				<ChevronDownIcon css={{ flexShrink: 0 }} size="sm" weight="bold" />
 			)}
 		</Flex>
 	);
diff --git a/packages/react/src/main-nav/MainNavMenuButtons.tsx b/packages/react/src/main-nav/MainNavMenuButtons.tsx
index 9c1f18ae6db1..acb006ea4565 100644
--- a/packages/react/src/main-nav/MainNavMenuButtons.tsx
+++ b/packages/react/src/main-nav/MainNavMenuButtons.tsx
@@ -16,20 +16,11 @@ export function MainNavOpenButton({
 }: MainNavOpenButtonProps) {
 	return (
 		<Flex
+			alignItems="center"
 			aria-expanded={isMobileMenuOpen}
 			aria-haspopup="dialog"
-			as={BaseButton}
-			display={{ xs: 'flex', lg: 'none' }}
-			flexDirection="column"
-			justifyContent="center"
-			alignItems="center"
-			fontSize="xs"
-			lineHeight="nospace"
-			paddingX={1}
-			gap={0.5}
-			focusRingFor="keyboard"
-			onClick={onClick}
 			aria-label="Menu (Open main menu)"
+			as={BaseButton}
 			css={{
 				color: boxPalette.foregroundAction,
 				'&:hover': {
@@ -38,7 +29,16 @@ export function MainNavOpenButton({
 					...packs.underline,
 				},
 			}}
+			display={{ xs: 'flex', lg: 'none' }}
+			flexDirection="column"
+			focusRingFor="keyboard"
+			fontSize="xs"
+			gap={0.5}
+			justifyContent="center"
+			lineHeight="nospace"
 			minHeight={{ xs: '5rem', lg: '3.5rem' }}
+			onClick={onClick}
+			paddingX={1}
 		>
 			<MenuIcon />
 			Menu
@@ -53,17 +53,9 @@ export type MainNavCloseButtonProps = PropsWithChildren<{
 export function MainNavCloseButton({ onClick }: MainNavCloseButtonProps) {
 	return (
 		<Flex
-			as={BaseButton}
-			flexDirection="column"
-			justifyContent="center"
 			alignItems="center"
-			fontSize="xs"
-			lineHeight="nospace"
-			gap={0.5}
-			padding={1}
-			focusRingFor="keyboard"
-			onClick={onClick}
 			aria-label="Close main menu"
+			as={BaseButton}
 			css={{
 				alignSelf: 'flex-start',
 				color: boxPalette.foregroundAction,
@@ -73,6 +65,14 @@ export function MainNavCloseButton({ onClick }: MainNavCloseButtonProps) {
 					...packs.underline,
 				},
 			}}
+			flexDirection="column"
+			focusRingFor="keyboard"
+			fontSize="xs"
+			gap={0.5}
+			justifyContent="center"
+			lineHeight="nospace"
+			onClick={onClick}
+			padding={1}
 		>
 			<CloseIcon />
 			Close
diff --git a/packages/react/src/modal/Modal.stories.tsx b/packages/react/src/modal/Modal.stories.tsx
index 671e527fda38..6301b726d7ac 100644
--- a/packages/react/src/modal/Modal.stories.tsx
+++ b/packages/react/src/modal/Modal.stories.tsx
@@ -24,20 +24,20 @@ export const Basic: Story = {
 			<div>
 				<Button onClick={openModal}>Open modal</Button>
 				<Modal
-					isOpen={isModalOpen}
-					onClose={closeModal}
-					title={props.title}
 					actions={
 						<ButtonGroup>
 							<Button onClick={closeModal}>Primary button</Button>
-							<Button variant="secondary" onClick={closeModal}>
+							<Button onClick={closeModal} variant="secondary">
 								Secondary button
 							</Button>
-							<Button variant="tertiary" onClick={closeModal}>
+							<Button onClick={closeModal} variant="tertiary">
 								Tertiary button
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isModalOpen}
+					onClose={closeModal}
+					title={props.title}
 				>
 					<Text as="p">
 						This is the Modal Body paragraph, it provides detailed instruction
@@ -60,17 +60,17 @@ export const ConfirmingDestructiveAction: Story = {
 			<div>
 				<Button onClick={openModal}>Open modal</Button>
 				<Modal
-					isOpen={isModalOpen}
-					onClose={closeModal}
-					title={props.title}
 					actions={
 						<ButtonGroup>
 							<Button onClick={closeModal}>Delete certificate</Button>
-							<Button variant="secondary" onClick={closeModal}>
+							<Button onClick={closeModal} variant="secondary">
 								Cancel
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isModalOpen}
+					onClose={closeModal}
+					title={props.title}
 				>
 					<Text as="p">
 						Certificate <Text fontWeight="bold">CER-36476487</Text> will be
@@ -92,17 +92,17 @@ export const ConfirmingFormCancellation: Story = {
 			<div>
 				<Button onClick={openModal}>Open modal</Button>
 				<Modal
-					isOpen={isModalOpen}
-					onClose={closeModal}
-					title={props.title}
 					actions={
 						<ButtonGroup>
 							<Button onClick={closeModal}>Yes, cancel</Button>
-							<Button variant="secondary" onClick={closeModal}>
+							<Button onClick={closeModal} variant="secondary">
 								No, take me back
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isModalOpen}
+					onClose={closeModal}
+					title={props.title}
 				>
 					<Text as="p">
 						If you cancel, you will lose all information entered.
@@ -123,17 +123,17 @@ export const LeavingFormPage: Story = {
 			<div>
 				<Button onClick={openModal}>Open modal</Button>
 				<Modal
-					isOpen={isModalOpen}
-					onClose={closeModal}
-					title={props.title}
 					actions={
 						<ButtonGroup>
 							<Button onClick={closeModal}>Leave this page</Button>
-							<Button variant="secondary" onClick={closeModal}>
+							<Button onClick={closeModal} variant="secondary">
 								Stay on this page
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isModalOpen}
+					onClose={closeModal}
+					title={props.title}
 				>
 					<Text as="p">
 						You will lose all changes made since your last save.
diff --git a/packages/react/src/modal/Modal.test.tsx b/packages/react/src/modal/Modal.test.tsx
index a595553e0d55..9fa508f0a38e 100644
--- a/packages/react/src/modal/Modal.test.tsx
+++ b/packages/react/src/modal/Modal.test.tsx
@@ -15,10 +15,10 @@ afterEach(cleanup);
 function renderBaseModal() {
 	return render(
 		<Modal
+			actions={<Button>Close modal</Button>}
 			isOpen
 			onClose={() => undefined}
 			title="Modal title"
-			actions={<Button>Close modal</Button>}
 		>
 			<Text as="p">This is the Modal Body paragraph.</Text>
 		</Modal>
@@ -29,18 +29,18 @@ function ModalExample() {
 	const [isModalOpen, openModal, closeModal] = useTernaryState(false);
 	return (
 		<div>
-			<Button onClick={openModal} data-testid="open-modal-button">
+			<Button data-testid="open-modal-button" onClick={openModal}>
 				Open modal
 			</Button>
 			<Modal
-				isOpen={isModalOpen}
-				onClose={closeModal}
-				title="Modal title"
 				actions={
-					<Button onClick={closeModal} data-testid="close-modal-button">
+					<Button data-testid="close-modal-button" onClick={closeModal}>
 						Close modal
 					</Button>
 				}
+				isOpen={isModalOpen}
+				onClose={closeModal}
+				title="Modal title"
 			>
 				<Text as="p">This is the Modal Body paragraph.</Text>
 			</Modal>
@@ -52,18 +52,18 @@ function OnDismissExample() {
 	const [isModalOpen, openModal, closeModal] = useTernaryState(false);
 	return (
 		<div>
-			<Button onClick={openModal} data-testid="open-modal-button">
+			<Button data-testid="open-modal-button" onClick={openModal}>
 				Open modal
 			</Button>
 			<Modal
-				isOpen={isModalOpen}
-				onDismiss={closeModal}
-				title="Modal title"
 				actions={
-					<Button onClick={closeModal} data-testid="close-modal-button">
+					<Button data-testid="close-modal-button" onClick={closeModal}>
 						Close modal
 					</Button>
 				}
+				isOpen={isModalOpen}
+				onDismiss={closeModal}
+				title="Modal title"
 			/>
 		</div>
 	);
diff --git a/packages/react/src/modal/ModalCover.tsx b/packages/react/src/modal/ModalCover.tsx
index cc114004704b..e59a5913c39b 100644
--- a/packages/react/src/modal/ModalCover.tsx
+++ b/packages/react/src/modal/ModalCover.tsx
@@ -8,7 +8,6 @@ export const ModalCover = forwardRef<HTMLDivElement, ModalCoverProps>(
 	function ModalCover({ children }, ref) {
 		return (
 			<div
-				ref={ref}
 				css={{
 					position: 'fixed',
 					top: 0,
@@ -20,6 +19,7 @@ export const ModalCover = forwardRef<HTMLDivElement, ModalCoverProps>(
 					overflowY: 'auto',
 					animation: `${animateFadeInOut} ${tokens.transition.duration}ms ${tokens.transition.timingFunction}`,
 				}}
+				ref={ref}
 			>
 				{children}
 			</div>
diff --git a/packages/react/src/modal/ModalDialog.tsx b/packages/react/src/modal/ModalDialog.tsx
index 6711bc265008..2c9fcf3403bb 100644
--- a/packages/react/src/modal/ModalDialog.tsx
+++ b/packages/react/src/modal/ModalDialog.tsx
@@ -36,7 +36,7 @@ export const ModalDialog = ({
 		<FocusLock returnFocus>
 			<Stack
 				aria-labelledby={titleId}
-				aria-modal="true"
+				aria-modal
 				background="body"
 				css={{
 					boxShadow: tokens.shadow.lg,
@@ -61,18 +61,18 @@ export const ModalDialog = ({
 				role="dialog"
 			>
 				<Button
-					variant="text"
 					aria-label="Close modal"
-					onClick={closeHandler}
-					iconAfter={CloseIcon}
 					css={{ alignSelf: 'flex-end' }}
+					iconAfter={CloseIcon}
+					onClick={closeHandler}
+					variant="text"
 				>
 					Close
 				</Button>
 				<ModalTitle id={titleId}>{title}</ModalTitle>
 				<Box>{children}</Box>
 				{actions ? (
-					<Box paddingTop={1} css={{ marginTop: 'auto' }}>
+					<Box css={{ marginTop: 'auto' }} paddingTop={1}>
 						{actions}
 					</Box>
 				) : null}
diff --git a/packages/react/src/modal/ModalTitle.tsx b/packages/react/src/modal/ModalTitle.tsx
index 5e26a679dd4c..e26962fea175 100644
--- a/packages/react/src/modal/ModalTitle.tsx
+++ b/packages/react/src/modal/ModalTitle.tsx
@@ -7,12 +7,12 @@ export const ModalTitle = ({ children, id }: ModalTitleProps) => {
 	return (
 		<Text
 			as="h2"
+			data-autofocus
+			focusRingFor="keyboard"
 			fontSize="lg"
 			fontWeight="bold"
-			lineHeight="heading"
 			id={id}
-			data-autofocus
-			focusRingFor="keyboard"
+			lineHeight="heading"
 			tabIndex={-1}
 		>
 			{children}
diff --git a/packages/react/src/page-alert/PageAlert.tsx b/packages/react/src/page-alert/PageAlert.tsx
index 7f924d736a80..6f871f54d3c5 100644
--- a/packages/react/src/page-alert/PageAlert.tsx
+++ b/packages/react/src/page-alert/PageAlert.tsx
@@ -84,7 +84,6 @@ export const PageAlert = forwardRef<HTMLDivElement, PageAlertProps>(
 				tabIndex={tabIndex ?? (focusOnMount || focusOnUpdate ? -1 : undefined)}
 			>
 				<Flex
-					padding={0.5}
 					alignItems="center"
 					css={{
 						borderTopLeftRadius: tokens.borderRadius,
@@ -92,13 +91,11 @@ export const PageAlert = forwardRef<HTMLDivElement, PageAlertProps>(
 						backgroundColor: fg,
 						color: boxPalette.backgroundBody,
 					}}
+					padding={0.5}
 				>
 					{icon}
 				</Flex>
 				<Flex
-					padding={1.5}
-					gap={1}
-					flexGrow={1}
 					alignItems="flex-start"
 					css={{
 						// When there is a dismiss button and no title
@@ -108,12 +105,15 @@ export const PageAlert = forwardRef<HTMLDivElement, PageAlertProps>(
 							marginRight: '0',
 						},
 					}}
+					flexGrow={1}
+					gap={1}
+					padding={1.5}
 				>
 					<Flex
+						alignItems="flex-start"
 						flexDirection="column"
 						flexGrow={1}
 						gap={1}
-						alignItems="flex-start"
 					>
 						{title ? (
 							isValidElement(title) ? (
diff --git a/packages/react/src/page-alert/PageAlertCloseButton.tsx b/packages/react/src/page-alert/PageAlertCloseButton.tsx
index 4769b41d1889..91f2bbb0c7cd 100644
--- a/packages/react/src/page-alert/PageAlertCloseButton.tsx
+++ b/packages/react/src/page-alert/PageAlertCloseButton.tsx
@@ -12,9 +12,6 @@ export const PageAlertCloseButton = ({
 }: PageAlertCloseButtonProps) => {
 	return (
 		<Button
-			onClick={onClick}
-			iconAfter={CloseIcon}
-			variant="text"
 			aria-label="Close"
 			css={mq({
 				position: 'absolute',
@@ -33,6 +30,9 @@ export const PageAlertCloseButton = ({
 					},
 				},
 			})}
+			iconAfter={CloseIcon}
+			onClick={onClick}
+			variant="text"
 		>
 			Close
 		</Button>
diff --git a/packages/react/src/page-alert/PageAlertTitle.tsx b/packages/react/src/page-alert/PageAlertTitle.tsx
index 945b025ea890..11f6f47f0773 100644
--- a/packages/react/src/page-alert/PageAlertTitle.tsx
+++ b/packages/react/src/page-alert/PageAlertTitle.tsx
@@ -21,15 +21,15 @@ export const PageAlertTitle = ({
 	return (
 		<Text
 			as={as}
-			fontSize="lg"
-			lineHeight="heading"
-			fontWeight="bold"
 			css={mq({
 				marginRight: hasCloseButton || hasDismissButton ? '2.5rem' : undefined,
 				[tokens.mediaQuery.min.sm]: {
 					marginRight: '0',
 				},
 			})}
+			fontSize="lg"
+			fontWeight="bold"
+			lineHeight="heading"
 		>
 			{children}
 		</Text>
diff --git a/packages/react/src/pagination/Pagination.stories.tsx b/packages/react/src/pagination/Pagination.stories.tsx
index e86c2b40e03d..8df838f0eb46 100644
--- a/packages/react/src/pagination/Pagination.stories.tsx
+++ b/packages/react/src/pagination/Pagination.stories.tsx
@@ -57,8 +57,6 @@ export const ItemsPerPage: Story = {
 		return (
 			<Pagination
 				{...args}
-				itemsPerPage={itemsPerPage}
-				onItemsPerPageChange={(val) => setItemsPerPage(val)}
 				itemRangeText={generatePaginationRangeText({
 					totalItems: 100,
 					currentPage: args.currentPage ?? 1,
@@ -66,6 +64,8 @@ export const ItemsPerPage: Story = {
 					singularNoun: 'certificate',
 					pluralNoun: 'certificates',
 				})}
+				itemsPerPage={itemsPerPage}
+				onItemsPerPageChange={(val) => setItemsPerPage(val)}
 			/>
 		);
 	},
diff --git a/packages/react/src/pagination/Pagination.tsx b/packages/react/src/pagination/Pagination.tsx
index 0f0ce28992f9..e069d28dfce8 100644
--- a/packages/react/src/pagination/Pagination.tsx
+++ b/packages/react/src/pagination/Pagination.tsx
@@ -54,27 +54,27 @@ export function Pagination({
 						case 'direction':
 							return (
 								<PaginationItemDirection
-									key={item.direction}
 									direction={item.direction}
 									href={generateHref(item.pageNumber)}
+									key={item.direction}
 								/>
 							);
 						case 'page':
 							return (
 								<PaginationItemPage
-									key={item.pageNumber}
 									href={generateHref(item.pageNumber)}
-									pageNumber={item.pageNumber}
 									isActive={item.isActive}
+									key={item.pageNumber}
+									pageNumber={item.pageNumber}
 								/>
 							);
 						case 'separator':
 							return (
 								<PaginationItemSeparator
 									isLinks
-									missingRightPageNumber={pagination[index + 1].pageNumber - 1}
-									missingLeftPageNumber={pagination[index - 1].pageNumber + 1}
 									key={`${index}-separator`}
+									missingLeftPageNumber={pagination[index - 1].pageNumber + 1}
+									missingRightPageNumber={pagination[index + 1].pageNumber - 1}
 								/>
 							);
 						default:
@@ -87,9 +87,9 @@ export function Pagination({
 					{itemRangeText && <Text role="status">{itemRangeText}</Text>}
 					{itemsPerPage && onItemsPerPageChange && (
 						<PaginationItemsPerPageSelect
-							value={itemsPerPage}
-							options={itemsPerPageOptions}
 							onChange={onItemsPerPageChange}
+							options={itemsPerPageOptions}
+							value={itemsPerPage}
 						/>
 					)}
 				</PaginationSecondaryControlContainer>
diff --git a/packages/react/src/pagination/PaginationButtons.stories.tsx b/packages/react/src/pagination/PaginationButtons.stories.tsx
index 58f8737a0b49..9f5047b41c54 100644
--- a/packages/react/src/pagination/PaginationButtons.stories.tsx
+++ b/packages/react/src/pagination/PaginationButtons.stories.tsx
@@ -62,10 +62,10 @@ export const ItemsPerPage: Story = {
 			<PaginationButtons
 				{...args}
 				currentPage={currentPage}
-				onChange={setCurrentPage}
+				itemRangeText={itemRangeText}
 				itemsPerPage={itemsPerPage}
+				onChange={setCurrentPage}
 				onItemsPerPageChange={(val) => setItemsPerPage(val)}
-				itemRangeText={itemRangeText}
 			/>
 		);
 	},
diff --git a/packages/react/src/pagination/PaginationButtons.tsx b/packages/react/src/pagination/PaginationButtons.tsx
index 6c7248ff4158..db638e4acd5c 100644
--- a/packages/react/src/pagination/PaginationButtons.tsx
+++ b/packages/react/src/pagination/PaginationButtons.tsx
@@ -65,8 +65,8 @@ export function PaginationButtons({
 						case 'direction':
 							return (
 								<PaginationItemDirectionButton
-									key={item.direction}
 									direction={item.direction}
+									key={item.direction}
 									onClick={() => {
 										onChange(item.pageNumber);
 
@@ -80,10 +80,10 @@ export function PaginationButtons({
 						case 'page':
 							return (
 								<PaginationItemPageButton
+									isActive={item.isActive}
 									key={item.pageNumber}
-									pageNumber={item.pageNumber}
 									onClick={() => onChange(item.pageNumber)}
-									isActive={item.isActive}
+									pageNumber={item.pageNumber}
 									{...(item.pageNumber === 1 && { ref: firstButtonRef })}
 								/>
 							);
@@ -91,9 +91,9 @@ export function PaginationButtons({
 							return (
 								<PaginationItemSeparator
 									isLinks={false}
-									missingRightPageNumber={pagination[index + 1].pageNumber - 1}
-									missingLeftPageNumber={pagination[index - 1].pageNumber + 1}
 									key={`${index}-separator`}
+									missingLeftPageNumber={pagination[index - 1].pageNumber + 1}
+									missingRightPageNumber={pagination[index + 1].pageNumber - 1}
 								/>
 							);
 						default:
@@ -106,9 +106,9 @@ export function PaginationButtons({
 					{itemRangeText && <Text role="status">{itemRangeText}</Text>}
 					{itemsPerPage && onItemsPerPageChange && (
 						<PaginationItemsPerPageSelect
-							value={itemsPerPage}
-							options={itemsPerPageOptions}
 							onChange={onItemsPerPageChange}
+							options={itemsPerPageOptions}
+							value={itemsPerPage}
 						/>
 					)}
 				</PaginationSecondaryControlContainer>
diff --git a/packages/react/src/pagination/PaginationContainer.tsx b/packages/react/src/pagination/PaginationContainer.tsx
index 4e64ec6c011f..16cc6f4b841f 100644
--- a/packages/react/src/pagination/PaginationContainer.tsx
+++ b/packages/react/src/pagination/PaginationContainer.tsx
@@ -10,7 +10,7 @@ export const PaginationItemContainer = ({
 	'aria-label': ariaLabel,
 }: PaginationItemContainerProps) => (
 	<nav aria-label={ariaLabel}>
-		<Flex as="ol" alignItems="center" justifyContent="center" flexWrap="wrap">
+		<Flex alignItems="center" as="ol" flexWrap="wrap" justifyContent="center">
 			{children}
 		</Flex>
 	</nav>
@@ -28,14 +28,14 @@ export const PaginationContainer = ({
 }: PaginationContainerProps) => {
 	return (
 		<Flex
-			gap={1}
 			alignItems="center"
-			justifyContent={hasRightArea ? 'space-between' : 'center'}
 			flexDirection={{
 				xs: 'column',
 				lg: 'row',
 			}}
 			flexWrap="wrap"
+			gap={1}
+			justifyContent={hasRightArea ? 'space-between' : 'center'}
 		>
 			{children}
 		</Flex>
@@ -49,13 +49,13 @@ export const PaginationSecondaryControlContainer = ({
 }: PaginationSecondaryControlContainerProps) => {
 	return (
 		<Flex
-			columnGap={2}
-			rowGap={1}
 			alignItems="center"
+			columnGap={2}
 			flexDirection={{
 				xs: 'column',
 				lg: 'row',
 			}}
+			rowGap={1}
 		>
 			{children}
 		</Flex>
diff --git a/packages/react/src/pagination/PaginationItemDirection.tsx b/packages/react/src/pagination/PaginationItemDirection.tsx
index 4b0c1021eaad..445d441e930b 100644
--- a/packages/react/src/pagination/PaginationItemDirection.tsx
+++ b/packages/react/src/pagination/PaginationItemDirection.tsx
@@ -20,9 +20,9 @@ export function PaginationItemDirection({
 	return (
 		<PaginationItemDirectionListItem direction={direction}>
 			<DirectionLink
+				aria-label={`Go to ${direction == 'left' ? 'previous' : 'next'} page`}
 				direction={direction}
 				href={href}
-				aria-label={`Go to ${direction == 'left' ? 'previous' : 'next'} page`}
 			>
 				{direction === 'left' ? 'Previous' : 'Next'}
 			</DirectionLink>
@@ -42,9 +42,9 @@ export function PaginationItemDirectionButton({
 	return (
 		<PaginationItemDirectionListItem direction={direction}>
 			<DirectionButton
+				aria-label={`Go to ${direction == 'left' ? 'previous' : 'next'} page`}
 				direction={direction}
 				onClick={onClick}
-				aria-label={`Go to ${direction == 'left' ? 'previous' : 'next'} page`}
 			>
 				{direction === 'left' ? 'Previous' : 'Next'}
 			</DirectionButton>
@@ -63,8 +63,8 @@ function PaginationItemDirectionListItem({
 	return (
 		<Box
 			as="li"
-			paddingRight={direction === 'left' ? { sm: 1 } : undefined}
 			paddingLeft={direction === 'right' ? { sm: 1 } : undefined}
+			paddingRight={direction === 'left' ? { sm: 1 } : undefined}
 		>
 			{children}
 		</Box>
@@ -104,20 +104,20 @@ const BaseDirectionLink = ({
 }: BaseDirectionLinkProps) => {
 	return (
 		<Flex
-			as={as}
-			inline
-			gap={0.5}
-			justifyContent="center"
 			alignItems="center"
+			as={as}
+			css={{
+				alignSelf: 'flex-start',
+			}}
+			focusRingFor="keyboard"
 			fontFamily="body"
 			fontWeight="normal"
+			gap={0.5}
+			height={{ xs: BUTTON_SIZE_XS, sm: BUTTON_SIZE_SM }}
+			inline
+			justifyContent="center"
 			link
-			focusRingFor="keyboard"
 			width={{ xs: BUTTON_SIZE_XS, sm: 'auto' }}
-			height={{ xs: BUTTON_SIZE_XS, sm: BUTTON_SIZE_SM }}
-			css={{
-				alignSelf: 'flex-start',
-			}}
 			{...props}
 		>
 			{direction === 'left' ? <ArrowLeftIcon size="sm" /> : null}
diff --git a/packages/react/src/pagination/PaginationItemPage.tsx b/packages/react/src/pagination/PaginationItemPage.tsx
index 132372a0434a..ec3c8bfb95e2 100644
--- a/packages/react/src/pagination/PaginationItemPage.tsx
+++ b/packages/react/src/pagination/PaginationItemPage.tsx
@@ -23,22 +23,22 @@ export function PaginationItemPage({
 	return (
 		<li>
 			<Flex
-				as={Link}
-				aria-label={`Go to page ${pageNumber}`}
-				href={href}
-				justifyContent="center"
 				alignItems="center"
-				width={{ xs: BUTTON_SIZE_XS, sm: BUTTON_SIZE_SM }}
-				height={{ xs: BUTTON_SIZE_XS, sm: BUTTON_SIZE_SM }}
-				fontWeight={isActive ? 'bold' : 'normal'}
-				link
-				focusRingFor="keyboard"
 				aria-current={isActive ? 'page' : undefined}
+				aria-label={`Go to page ${pageNumber}`}
+				as={Link}
 				css={
 					isActive
 						? { color: boxPalette.foregroundText, textDecoration: 'none' }
 						: undefined
 				}
+				focusRingFor="keyboard"
+				fontWeight={isActive ? 'bold' : 'normal'}
+				height={{ xs: BUTTON_SIZE_XS, sm: BUTTON_SIZE_SM }}
+				href={href}
+				justifyContent="center"
+				link
+				width={{ xs: BUTTON_SIZE_XS, sm: BUTTON_SIZE_SM }}
 			>
 				{pageNumber}
 			</Flex>
@@ -62,23 +62,23 @@ export const PaginationItemPageButton = forwardRefWithAs<
 	return (
 		<li>
 			<Flex
-				as={BaseButton}
-				aria-label={`Go to page ${pageNumber}`}
-				aria-current={isActive ? 'page' : undefined}
-				onClick={onClick}
-				justifyContent="center"
 				alignItems="center"
-				width={{ xs: BUTTON_SIZE_XS, sm: BUTTON_SIZE_SM }}
-				height={{ xs: BUTTON_SIZE_XS, sm: BUTTON_SIZE_SM }}
-				fontWeight={isActive ? 'bold' : 'normal'}
-				link
-				focusRingFor="keyboard"
+				aria-current={isActive ? 'page' : undefined}
+				aria-label={`Go to page ${pageNumber}`}
+				as={BaseButton}
 				css={
 					isActive
 						? { color: boxPalette.foregroundText, textDecoration: 'none' }
 						: undefined
 				}
+				focusRingFor="keyboard"
+				fontWeight={isActive ? 'bold' : 'normal'}
+				height={{ xs: BUTTON_SIZE_XS, sm: BUTTON_SIZE_SM }}
+				justifyContent="center"
+				link
+				onClick={onClick}
 				ref={forwardedRef}
+				width={{ xs: BUTTON_SIZE_XS, sm: BUTTON_SIZE_SM }}
 			>
 				{pageNumber}
 			</Flex>
diff --git a/packages/react/src/pagination/PaginationItemsPerPageSelect.tsx b/packages/react/src/pagination/PaginationItemsPerPageSelect.tsx
index bc1d679e2c31..dc8fdae39cd2 100644
--- a/packages/react/src/pagination/PaginationItemsPerPageSelect.tsx
+++ b/packages/react/src/pagination/PaginationItemsPerPageSelect.tsx
@@ -17,15 +17,15 @@ export const PaginationItemsPerPageSelect = ({
 	const id = `pagination-per-page-select-${uid}`;
 	return (
 		<PaginationSelect
+			id={id}
 			label="Items per page"
+			maxWidth="sm"
+			onChange={(e) => onChange(Number(e.target.value))}
 			options={options.map((option) => ({
 				label: `${option}`,
 				value: `${option}`,
 			}))}
 			value={`${value}`}
-			onChange={(e) => onChange(Number(e.target.value))}
-			maxWidth="sm"
-			id={id}
 		/>
 	);
 };
diff --git a/packages/react/src/pagination/PaginationSelect.tsx b/packages/react/src/pagination/PaginationSelect.tsx
index 80054c0608dd..910b8d02e872 100644
--- a/packages/react/src/pagination/PaginationSelect.tsx
+++ b/packages/react/src/pagination/PaginationSelect.tsx
@@ -55,7 +55,7 @@ export const PaginationSelect = ({
 					maxWidth: tokens.maxWidth.field[maxWidth],
 				}}
 			>
-				<select id={id} css={selectStyles} {...props}>
+				<select css={selectStyles} id={id} {...props}>
 					<SelectOptions options={options} placeholder={placeholder} />
 				</select>
 				<SelectIcon />
@@ -77,9 +77,9 @@ const SelectOptions = ({
 			{options.map((opt) => {
 				if ('options' in opt) {
 					return (
-						<optgroup key={opt.label} label={opt.label} disabled={opt.disabled}>
+						<optgroup disabled={opt.disabled} key={opt.label} label={opt.label}>
 							{opt.options.map(({ value, label, disabled }) => (
-								<option key={value} value={value} disabled={disabled}>
+								<option disabled={disabled} key={value} value={value}>
 									{label}
 								</option>
 							))}
@@ -87,7 +87,7 @@ const SelectOptions = ({
 					);
 				}
 				return (
-					<option key={opt.value} value={opt.value} disabled={opt.disabled}>
+					<option disabled={opt.disabled} key={opt.value} value={opt.value}>
 						{opt.label}
 					</option>
 				);
diff --git a/packages/react/src/password-input/PasswordInput.tsx b/packages/react/src/password-input/PasswordInput.tsx
index 7a810d231d5e..a99227eba4f9 100644
--- a/packages/react/src/password-input/PasswordInput.tsx
+++ b/packages/react/src/password-input/PasswordInput.tsx
@@ -51,11 +51,11 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
 					type={checked ? 'text' : 'password'}
 				/>
 				<Checkbox
-					disabled={props.disabled}
 					aria-controls={inputId}
-					size="sm"
 					checked={checked}
+					disabled={props.disabled}
 					onChange={toggleChecked}
+					size="sm"
 				>
 					Show password
 				</Checkbox>
diff --git a/packages/react/src/progress-indicator/ProgressIndicator.tsx b/packages/react/src/progress-indicator/ProgressIndicator.tsx
index b8f6d19a5002..b3dba387815c 100644
--- a/packages/react/src/progress-indicator/ProgressIndicator.tsx
+++ b/packages/react/src/progress-indicator/ProgressIndicator.tsx
@@ -115,16 +115,16 @@ export const ProgressIndicator = ({
 				{itemsWithDefaultActive.map(({ label, ...props }) =>
 					isItemLink(props) ? (
 						<ProgressIndicatorItemLink
-							key={label}
 							background={background}
+							key={label}
 							{...props}
 						>
 							{label}
 						</ProgressIndicatorItemLink>
 					) : (
 						<ProgressIndicatorItemButton
-							key={label}
 							background={background}
+							key={label}
 							{...props}
 						>
 							{label}
diff --git a/packages/react/src/progress-indicator/ProgressIndicatorItem.tsx b/packages/react/src/progress-indicator/ProgressIndicatorItem.tsx
index e1c436574ddb..1607bb3221e6 100644
--- a/packages/react/src/progress-indicator/ProgressIndicatorItem.tsx
+++ b/packages/react/src/progress-indicator/ProgressIndicatorItem.tsx
@@ -92,7 +92,7 @@ export const ProgressIndicatorItem = ({
 				}}
 				focusRingFor="keyboard"
 			>
-				<ProgressIndicatorItemIcon status={status} isActive={isActive} />
+				<ProgressIndicatorItemIcon isActive={isActive} status={status} />
 
 				<Stack
 					{...{ [progressIndicatorItemTextContainerDataAttr]: '' }}
@@ -137,7 +137,7 @@ export const ProgressIndicatorItem = ({
 								<Flex
 									{...subLevelItemRestProps}
 									alignItems="center"
-									aria-current={true}
+									aria-current
 									as={as}
 									borderBottom
 									borderColor="muted"
@@ -234,13 +234,13 @@ const ProgressIndicatorItemIcon = ({
 				}}
 			>
 				<Icon
-					size="md"
 					color={processedIconColor}
 					css={{
 						position: 'relative',
 						display: 'block',
 						margin: -1,
 					}}
+					size="md"
 				/>
 			</span>
 
diff --git a/packages/react/src/progress-indicator/ProgressIndicatorList.tsx b/packages/react/src/progress-indicator/ProgressIndicatorList.tsx
index bed2178e5c67..be4e5dfb99d3 100644
--- a/packages/react/src/progress-indicator/ProgressIndicatorList.tsx
+++ b/packages/react/src/progress-indicator/ProgressIndicatorList.tsx
@@ -10,8 +10,8 @@ export function ProgressIndicatorList({
 	return (
 		<Box
 			as="ul"
-			borderTop
 			borderBottom
+			borderTop
 			css={{
 				// Avoid double border on smaller devices
 				[tokens.mediaQuery.max.sm]: {
diff --git a/packages/react/src/prose/Prose.stories.tsx b/packages/react/src/prose/Prose.stories.tsx
index 784793b6f99d..143ec83f6ac5 100644
--- a/packages/react/src/prose/Prose.stories.tsx
+++ b/packages/react/src/prose/Prose.stories.tsx
@@ -210,7 +210,7 @@ const UnstyledContent = () => (
 		</figure>
 
 		<figure>
-			<img src="/img/placeholder/600X260.png" alt="Placeholder image" />
+			<img alt="Placeholder image" src="/img/placeholder/600X260.png" />
 			<figcaption>Placeholder caption</figcaption>
 		</figure>
 
diff --git a/packages/react/src/prose/Prose.tsx b/packages/react/src/prose/Prose.tsx
index 47b99e37dc10..ddf1ac6c6818 100644
--- a/packages/react/src/prose/Prose.tsx
+++ b/packages/react/src/prose/Prose.tsx
@@ -11,7 +11,7 @@ import { Box, BoxProps, linkStyles, focusStyles } from '../box';
 
 export const Prose = forwardRefWithAs<'div', BoxProps>(
 	function Prose(props, ref) {
-		return <Box ref={ref} css={proseClass} {...props} />;
+		return <Box css={proseClass} ref={ref} {...props} />;
 	}
 );
 
diff --git a/packages/react/src/radio/RadioContainer.tsx b/packages/react/src/radio/RadioContainer.tsx
index 48d4965cb9e5..0b3fcbbe97a4 100644
--- a/packages/react/src/radio/RadioContainer.tsx
+++ b/packages/react/src/radio/RadioContainer.tsx
@@ -12,15 +12,15 @@ export const RadioContainer = ({
 	htmlFor,
 }: RadioContainerProps) => (
 	<Flex
-		as="label"
 		alignItems="flex-start"
+		as="label"
 		color="text"
-		gap={0.5}
-		htmlFor={htmlFor}
-		inline
 		css={{
 			cursor: disabled ? 'not-allowed' : 'pointer',
 		}}
+		gap={0.5}
+		htmlFor={htmlFor}
+		inline
 	>
 		{children}
 	</Flex>
diff --git a/packages/react/src/radio/RadioIndicator.tsx b/packages/react/src/radio/RadioIndicator.tsx
index 5c1d5ab2f2fe..976753c4677a 100644
--- a/packages/react/src/radio/RadioIndicator.tsx
+++ b/packages/react/src/radio/RadioIndicator.tsx
@@ -17,12 +17,8 @@ export function RadioIndicator({
 	const { width, height, borderWidth } = packs.control[size];
 	return (
 		<Flex
-			as="span"
-			justifyContent="center"
 			alignItems="center"
-			width={width}
-			height={height}
-			flexShrink={0}
+			as="span"
 			css={{
 				borderWidth,
 				borderRadius: '100%',
@@ -46,13 +42,14 @@ export function RadioIndicator({
 					backgroundColor: boxPalette.systemErrorMuted,
 				}),
 			}}
+			flexShrink={0}
+			height={height}
+			justifyContent="center"
 			rounded
+			width={width}
 		>
 			<Box
 				as="span"
-				width="calc(100% - 0.5rem)"
-				height="calc(100% - 0.5rem)"
-				highContrastOutline
 				css={{
 					borderRadius: '100%',
 					backgroundColor: boxPalette.foregroundText,
@@ -67,6 +64,9 @@ export function RadioIndicator({
 						},
 					}),
 				}}
+				height="calc(100% - 0.5rem)"
+				highContrastOutline
+				width="calc(100% - 0.5rem)"
 			/>
 		</Flex>
 	);
diff --git a/packages/react/src/radio/RadioInput.tsx b/packages/react/src/radio/RadioInput.tsx
index 34fd71f93556..8224399094c6 100644
--- a/packages/react/src/radio/RadioInput.tsx
+++ b/packages/react/src/radio/RadioInput.tsx
@@ -8,7 +8,6 @@ export const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
 	function RadioInput(props, ref) {
 		return (
 			<input
-				ref={ref}
 				css={{
 					...visuallyHiddenStyles,
 					// When this component is focused, outline the `RadioIndicator`
@@ -17,6 +16,7 @@ export const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
 					'~ span > span': { opacity: 0 },
 					'&:checked ~ span > span': { opacity: 1 },
 				}}
+				ref={ref}
 				{...props}
 			/>
 		);
diff --git a/packages/react/src/radio/RadioLabel.tsx b/packages/react/src/radio/RadioLabel.tsx
index 0276ec7332d9..637a4f4542c4 100644
--- a/packages/react/src/radio/RadioLabel.tsx
+++ b/packages/react/src/radio/RadioLabel.tsx
@@ -16,12 +16,12 @@ export function RadioLabel({ children, disabled, size }: RadioLabelProps) {
 	const paddingTop = paddingTopMap[size];
 	return (
 		<Text
-			flexGrow={1}
 			color={disabled ? 'muted' : 'text'}
 			css={{
 				// Ensures the label is vertically aligned with the indicator across multiple lines.
 				paddingTop,
 			}}
+			flexGrow={1}
 		>
 			{children}
 		</Text>
diff --git a/packages/react/src/search-box/SearchBox.stories.tsx b/packages/react/src/search-box/SearchBox.stories.tsx
index 1213fbd45fd0..9d27d43835c2 100644
--- a/packages/react/src/search-box/SearchBox.stories.tsx
+++ b/packages/react/src/search-box/SearchBox.stories.tsx
@@ -69,7 +69,7 @@ export const Controlled = () => {
 
 	return (
 		<SearchBox onSubmit={onSubmit}>
-			<SearchBoxInput value={searchTerm} onChange={onChange} />
+			<SearchBoxInput onChange={onChange} value={searchTerm} />
 			<SearchBoxButton>Search</SearchBoxButton>
 		</SearchBox>
 	);
diff --git a/packages/react/src/search-box/SearchBox.tsx b/packages/react/src/search-box/SearchBox.tsx
index d377f5a7d9e3..e2fea8833e7b 100644
--- a/packages/react/src/search-box/SearchBox.tsx
+++ b/packages/react/src/search-box/SearchBox.tsx
@@ -13,7 +13,7 @@ export const SearchBox = ({
 	children,
 	onSubmit,
 }: SearchBoxProps) => (
-	<form role="search" aria-label={ariaLabel} onSubmit={onSubmit}>
+	<form aria-label={ariaLabel} onSubmit={onSubmit} role="search">
 		<Flex alignItems="flex-end">{children}</Flex>
 	</form>
 );
diff --git a/packages/react/src/search-box/SearchBoxButton.tsx b/packages/react/src/search-box/SearchBoxButton.tsx
index 335f66901af9..d8cfa896628e 100644
--- a/packages/react/src/search-box/SearchBoxButton.tsx
+++ b/packages/react/src/search-box/SearchBoxButton.tsx
@@ -16,12 +16,12 @@ export const SearchBoxButton = forwardRef<
 	const buttonStyles = getButtonStyles({ iconOnly });
 	return (
 		<Box
-			flexShrink={0}
-			css={{ position: 'relative' }}
 			borderLeft
 			borderWidth="lg"
+			css={{ position: 'relative' }}
+			flexShrink={0}
 		>
-			<Button ref={ref} type="submit" aria-label={children} css={buttonStyles}>
+			<Button aria-label={children} css={buttonStyles} ref={ref} type="submit">
 				<span>{children}</span>
 				{iconOnly ? <SearchIcon size="md" /> : null}
 			</Button>
diff --git a/packages/react/src/search-box/SearchBoxInput.tsx b/packages/react/src/search-box/SearchBoxInput.tsx
index c2ac4d3d9738..bf550e6b3a8d 100644
--- a/packages/react/src/search-box/SearchBoxInput.tsx
+++ b/packages/react/src/search-box/SearchBoxInput.tsx
@@ -34,11 +34,11 @@ export const SearchBoxInput = forwardRef<HTMLInputElement, SearchBoxInputProps>(
 					{label}
 				</SearchBoxLabel>
 				<input
-					ref={ref}
-					type="search"
 					autoComplete="off"
 					css={styles}
 					id={inputId}
+					ref={ref}
+					type="search"
 					{...props}
 				/>
 			</Stack>
diff --git a/packages/react/src/search-box/SearchBoxLabel.tsx b/packages/react/src/search-box/SearchBoxLabel.tsx
index 00d69dd2821f..c5871d2b3738 100644
--- a/packages/react/src/search-box/SearchBoxLabel.tsx
+++ b/packages/react/src/search-box/SearchBoxLabel.tsx
@@ -16,9 +16,9 @@ export const SearchBoxLabel = ({
 	return (
 		<Text
 			as="label"
+			css={visible ? { marginBottom: mapSpacing(0.5) } : visuallyHiddenStyles}
 			fontWeight="bold"
 			htmlFor={htmlFor}
-			css={visible ? { marginBottom: mapSpacing(0.5) } : visuallyHiddenStyles}
 		>
 			{children}
 		</Text>
diff --git a/packages/react/src/search-input/SearchInput.stories.tsx b/packages/react/src/search-input/SearchInput.stories.tsx
index 0312b340512f..4a11bd685ce1 100644
--- a/packages/react/src/search-input/SearchInput.stories.tsx
+++ b/packages/react/src/search-input/SearchInput.stories.tsx
@@ -62,7 +62,7 @@ export const Controlled: Story = {
 	args: {},
 	render: function Render(args) {
 		const [value, setValue] = useState('');
-		return <SearchInput {...args} value={value} onChange={setValue} />;
+		return <SearchInput {...args} onChange={setValue} value={value} />;
 	},
 };
 
diff --git a/packages/react/src/search-input/SearchInput.tsx b/packages/react/src/search-input/SearchInput.tsx
index 056ef83a950d..f344a189eb5b 100644
--- a/packages/react/src/search-input/SearchInput.tsx
+++ b/packages/react/src/search-input/SearchInput.tsx
@@ -102,27 +102,27 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
 
 		return (
 			<Field
-				label={label}
 				hideOptionalLabel={hideOptionalLabel}
-				required={required}
 				hint={hint}
+				id={id}
+				invalid={invalid}
+				label={label}
 				maxWidth={maxWidthProp}
 				message={message}
-				invalid={invalid}
-				id={id}
+				required={required}
 			>
 				{(a11yProps) => (
 					<SearchInputContainer maxWidth={maxWidth}>
 						<SearchInputIcon disabled={disabled} />
 						<input
-							ref={mergeRefs([internalRef, forwardedRef])}
-							type="search"
+							autoComplete="off"
+							css={styles}
 							disabled={disabled}
-							value={value}
 							onChange={(e) => onChange(e.target.value)}
 							onKeyDown={onKeyDown}
-							css={styles}
-							autoComplete="off"
+							ref={mergeRefs([internalRef, forwardedRef])}
+							type="search"
+							value={value}
 							{...a11yProps}
 							{...props}
 						/>
diff --git a/packages/react/src/search-input/SearchInputClearButton.tsx b/packages/react/src/search-input/SearchInputClearButton.tsx
index 5cc949baca7f..bddaa0fe5de8 100644
--- a/packages/react/src/search-input/SearchInputClearButton.tsx
+++ b/packages/react/src/search-input/SearchInputClearButton.tsx
@@ -18,13 +18,8 @@ export function SearchInputClearButton({
 }: SearchInputClearButtonProps) {
 	return (
 		<Flex
-			role="button"
 			alignItems="center"
-			justifyContent="center"
 			aria-label="Clear search"
-			width="2rem"
-			height="2rem"
-			onClick={onClick}
 			css={{
 				position: 'absolute',
 				top: '50%',
@@ -35,6 +30,11 @@ export function SearchInputClearButton({
 				color: boxPalette.foregroundAction,
 				'&:hover': { color: boxPalette.foregroundText },
 			}}
+			height="2rem"
+			justifyContent="center"
+			onClick={onClick}
+			role="button"
+			width="2rem"
 		>
 			<CloseIcon color="inherit" />
 		</Flex>
diff --git a/packages/react/src/search-input/SearchInputIcon.tsx b/packages/react/src/search-input/SearchInputIcon.tsx
index 3e7cf9e7b7ea..14be32609515 100644
--- a/packages/react/src/search-input/SearchInputIcon.tsx
+++ b/packages/react/src/search-input/SearchInputIcon.tsx
@@ -6,8 +6,6 @@ export type SearchIconProps = { disabled?: boolean };
 export function SearchInputIcon({ disabled }: SearchIconProps) {
 	return (
 		<SearchIcon
-			size="md"
-			weight="regular"
 			color="muted"
 			css={{
 				position: 'absolute',
@@ -17,6 +15,8 @@ export function SearchInputIcon({ disabled }: SearchIconProps) {
 				pointerEvents: 'none',
 				opacity: disabled ? 0.3 : undefined,
 			}}
+			size="md"
+			weight="regular"
 		/>
 	);
 }
diff --git a/packages/react/src/section-alert/SectionAlert.test.tsx b/packages/react/src/section-alert/SectionAlert.test.tsx
index b150ebe903c2..077e380e237b 100644
--- a/packages/react/src/section-alert/SectionAlert.test.tsx
+++ b/packages/react/src/section-alert/SectionAlert.test.tsx
@@ -14,7 +14,7 @@ afterEach(cleanup);
 
 function renderSectionAlert(props?: Partial<SectionAlertProps>) {
 	return render(
-		<SectionAlert tone="success" title="Title of Section alert" {...props} />
+		<SectionAlert title="Title of Section alert" tone="success" {...props} />
 	);
 }
 
diff --git a/packages/react/src/section-alert/SectionAlertDismissButton.tsx b/packages/react/src/section-alert/SectionAlertDismissButton.tsx
index 215f48ebb685..2373e81ac6d4 100644
--- a/packages/react/src/section-alert/SectionAlertDismissButton.tsx
+++ b/packages/react/src/section-alert/SectionAlertDismissButton.tsx
@@ -14,9 +14,6 @@ export const SectionAlertDismissButton = ({
 	return (
 		<Button
 			alignSelf="start"
-			onClick={onClick}
-			iconAfter={CloseIcon}
-			variant="text"
 			aria-label="Close"
 			css={{
 				flexShrink: 0,
@@ -28,6 +25,9 @@ export const SectionAlertDismissButton = ({
 					},
 				},
 			}}
+			iconAfter={CloseIcon}
+			onClick={onClick}
+			variant="text"
 		>
 			Close
 		</Button>
diff --git a/packages/react/src/select/Select.stories.tsx b/packages/react/src/select/Select.stories.tsx
index 31c36009b835..381301e21224 100644
--- a/packages/react/src/select/Select.stories.tsx
+++ b/packages/react/src/select/Select.stories.tsx
@@ -88,9 +88,9 @@ export const MaxWidths: Story = {
 		return (
 			<Stack gap={1}>
 				<Select
-					maxWidth="sm"
+					hideOptionalLabel
 					label="Items per page (sm)"
-					hideOptionalLabel={true}
+					maxWidth="sm"
 					options={[
 						{ value: '10', label: '10' },
 						{ value: '25', label: '25' },
@@ -121,8 +121,8 @@ export const Controlled: Story = {
 			<Select
 				{...args}
 				label="Controlled"
-				value={value}
 				onChange={(event) => setValue(event.target.value)}
+				value={value}
 			/>
 		);
 	},
diff --git a/packages/react/src/select/Select.tsx b/packages/react/src/select/Select.tsx
index 75b57901a232..be63dbaff0fc 100644
--- a/packages/react/src/select/Select.tsx
+++ b/packages/react/src/select/Select.tsx
@@ -79,18 +79,18 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 		const styles = selectStyles({ block });
 		return (
 			<Field
-				label={label}
 				hideOptionalLabel={hideOptionalLabel}
-				required={required}
 				hint={hint}
+				id={id}
+				invalid={invalid}
+				label={label}
 				maxWidth={maxWidth}
 				message={message}
-				invalid={invalid}
-				id={id}
+				required={required}
 			>
 				{(a11yProps) => (
 					<SelectContainer block={block} maxWidth={maxWidth}>
-						<select ref={ref} css={styles} {...a11yProps} {...props}>
+						<select css={styles} ref={ref} {...a11yProps} {...props}>
 							<SelectOptions options={options} placeholder={placeholder} />
 						</select>
 						<SelectIcon disabled={props.disabled} />
@@ -134,9 +134,9 @@ const SelectOptions = ({
 			{options.map((opt) => {
 				if ('options' in opt) {
 					return (
-						<optgroup key={opt.label} label={opt.label} disabled={opt.disabled}>
+						<optgroup disabled={opt.disabled} key={opt.label} label={opt.label}>
 							{opt.options.map(({ value, label, disabled }) => (
-								<option key={value} value={value} disabled={disabled}>
+								<option disabled={disabled} key={value} value={value}>
 									{label}
 								</option>
 							))}
@@ -144,7 +144,7 @@ const SelectOptions = ({
 					);
 				}
 				return (
-					<option key={opt.value} value={opt.value} disabled={opt.disabled}>
+					<option disabled={opt.disabled} key={opt.value} value={opt.value}>
 						{opt.label}
 					</option>
 				);
diff --git a/packages/react/src/side-nav/SideNav.stories.tsx b/packages/react/src/side-nav/SideNav.stories.tsx
index cb2415987741..f9e396b3d5ed 100644
--- a/packages/react/src/side-nav/SideNav.stories.tsx
+++ b/packages/react/src/side-nav/SideNav.stories.tsx
@@ -49,7 +49,7 @@ export const OnBodyAlt: Story = {
 	},
 	name: 'On bodyAlt background',
 	render: (args) => (
-		<Box padding={2} background="bodyAlt">
+		<Box background="bodyAlt" padding={2}>
 			<SideNav {...args} />
 		</Box>
 	),
diff --git a/packages/react/src/side-nav/SideNav.test.tsx b/packages/react/src/side-nav/SideNav.test.tsx
index e275b10757b8..7083275e93f1 100644
--- a/packages/react/src/side-nav/SideNav.test.tsx
+++ b/packages/react/src/side-nav/SideNav.test.tsx
@@ -344,8 +344,8 @@ describe('SideNav', () => {
 						<SideNav
 							{...defaultTestingProps}
 							activePath="#page-1"
-							subLevelVisible="always"
 							items={alwaysOpenItems}
+							subLevelVisible="always"
 						/>
 					);
 					const user = userEvent.setup();
@@ -379,8 +379,8 @@ describe('SideNav', () => {
 						<SideNav
 							{...defaultTestingProps}
 							activePath="#page-2"
-							subLevelVisible="always"
 							items={alwaysOpenItems}
+							subLevelVisible="always"
 						/>
 					);
 					const user = userEvent.setup();
diff --git a/packages/react/src/side-nav/SideNavLink.tsx b/packages/react/src/side-nav/SideNavLink.tsx
index e3ab0f2e321d..8be79f304c4d 100644
--- a/packages/react/src/side-nav/SideNavLink.tsx
+++ b/packages/react/src/side-nav/SideNavLink.tsx
@@ -31,19 +31,12 @@ export const SideNavLink = ({
 
 	return (
 		<Flex
-			as={Link}
 			aria-current={isCurrentPage ? 'page' : undefined}
-			gap={0.75}
-			color="muted"
-			fontSize="xs"
-			paddingTop={1}
-			paddingBottom={depth > 1 ? 1 : 0.75}
-			paddingRight={1}
+			as={Link}
 			borderBottom
 			borderBottomWidth="sm"
 			borderColor="muted"
-			focusRingFor="keyboard"
-			{...props}
+			color="muted"
 			css={{
 				textDecoration: 'none',
 				paddingLeft: `${depth}rem`,
@@ -72,6 +65,13 @@ export const SideNavLink = ({
 					},
 				}),
 			}}
+			focusRingFor="keyboard"
+			fontSize="xs"
+			gap={0.75}
+			paddingBottom={depth > 1 ? 1 : 0.75}
+			paddingRight={1}
+			paddingTop={1}
+			{...props}
 		>
 			<SideNavActiveAncestorIndicator depth={depth} />
 
diff --git a/packages/react/src/skeleton/SkeletonBox.tsx b/packages/react/src/skeleton/SkeletonBox.tsx
index 91bf30679a92..939419d3516c 100644
--- a/packages/react/src/skeleton/SkeletonBox.tsx
+++ b/packages/react/src/skeleton/SkeletonBox.tsx
@@ -26,14 +26,7 @@ export const SkeletonBox = ({
 }: SkeletonBoxProps) => {
 	return (
 		<Box
-			aria-hidden="true"
-			display="block"
-			fontSize={fontSize}
-			lineHeight={lineHeight}
-			height={height}
-			width={width}
-			highContrastOutline
-			rounded
+			aria-hidden
 			css={{
 				animation: `${animateFadeOut} 1200ms ${tokens.transition.timingFunction} infinite alternate`,
 				backgroundColor: boxPalette.border,
@@ -42,6 +35,13 @@ export const SkeletonBox = ({
 					content: '"\\00a0"',
 				},
 			}}
+			display="block"
+			fontSize={fontSize}
+			height={height}
+			highContrastOutline
+			lineHeight={lineHeight}
+			rounded
+			width={width}
 		/>
 	);
 };
diff --git a/packages/react/src/skeleton/SkeletonHeading.stories.tsx b/packages/react/src/skeleton/SkeletonHeading.stories.tsx
index 809271f5910c..85b2f51aba74 100644
--- a/packages/react/src/skeleton/SkeletonHeading.stories.tsx
+++ b/packages/react/src/skeleton/SkeletonHeading.stories.tsx
@@ -31,7 +31,7 @@ export const Sizes: Story = {
 							<SkeletonHeading key={type} type={type} />
 						</Column>
 						<Column columnSpan={[12, 6]}>
-							<Heading key={type} type={type} border>
+							<Heading border key={type} type={type}>
 								Heading {type.toLocaleUpperCase()}
 							</Heading>
 						</Column>
diff --git a/packages/react/src/skeleton/SkeletonText.stories.tsx b/packages/react/src/skeleton/SkeletonText.stories.tsx
index 5cb29955cfcb..7736ea050871 100644
--- a/packages/react/src/skeleton/SkeletonText.stories.tsx
+++ b/packages/react/src/skeleton/SkeletonText.stories.tsx
@@ -30,17 +30,17 @@ export const Sizes: Story = {
 					<Columns gap={[0.5, 1.5]} key={size}>
 						<Column columnSpan={[12, 6]}>
 							<SkeletonText
-								key={size}
 								fontSize={size}
+								key={size}
 								lineHeight={lineHeight}
 							/>
 						</Column>
 						<Column columnSpan={[12, 6]}>
 							<Text
+								border
 								display="block"
 								fontSize={size}
 								lineHeight={lineHeight}
-								border
 							>
 								Text {size}
 							</Text>
diff --git a/packages/react/src/skip-link/SkipLinkItem.tsx b/packages/react/src/skip-link/SkipLinkItem.tsx
index 04c9d832b908..52a44dcfe8f9 100644
--- a/packages/react/src/skip-link/SkipLinkItem.tsx
+++ b/packages/react/src/skip-link/SkipLinkItem.tsx
@@ -9,8 +9,6 @@ export const SkipLinkItem = forwardRef<HTMLAnchorElement, SkipLinkItemProps>(
 	function SkipLinkItem({ children, href }, ref) {
 		return (
 			<a
-				ref={ref}
-				href={href}
 				css={[
 					visuallyHiddenStyles,
 					buttonStyles({ block: false, size: 'md', variant: 'primary' }),
@@ -28,6 +26,8 @@ export const SkipLinkItem = forwardRef<HTMLAnchorElement, SkipLinkItemProps>(
 						},
 					},
 				]}
+				href={href}
+				ref={ref}
 			>
 				{children}
 			</a>
diff --git a/packages/react/src/skip-link/SkipLinks.stories.tsx b/packages/react/src/skip-link/SkipLinks.stories.tsx
index 4f10044745d4..7df08ee5a432 100644
--- a/packages/react/src/skip-link/SkipLinks.stories.tsx
+++ b/packages/react/src/skip-link/SkipLinks.stories.tsx
@@ -44,7 +44,7 @@ const ExampleContent = () => (
 	<Prose>
 		<Stack gap={4}>
 			<p>This example space contains a visually hidden feature.</p>
-			<nav id="main-nav" tabIndex={-1} css={{ '&:focus': { outline: 'none' } }}>
+			<nav css={{ '&:focus': { outline: 'none' } }} id="main-nav" tabIndex={-1}>
 				<ul>
 					<li>
 						<a href="#">Some navigation</a>
@@ -52,9 +52,9 @@ const ExampleContent = () => (
 				</ul>
 			</nav>
 			<main
+				css={{ '&:focus': { outline: 'none' } }}
 				id="main-content"
 				tabIndex={-1}
-				css={{ '&:focus': { outline: 'none' } }}
 			>
 				Some content here with <a href="#">an example link</a>
 			</main>
diff --git a/packages/react/src/stack/Stack.stories.tsx b/packages/react/src/stack/Stack.stories.tsx
index 0b674bbdf0c6..1cdb7fd5b73f 100644
--- a/packages/react/src/stack/Stack.stories.tsx
+++ b/packages/react/src/stack/Stack.stories.tsx
@@ -20,70 +20,70 @@ export const Basic: Story = {
 	},
 	render: (props) => (
 		<Stack {...props}>
-			<Box display="block" height={40} background="shadeAlt" />
-			<Box display="block" height={80} background="shadeAlt" />
-			<Box display="block" height={30} background="shadeAlt" />
-			<Box display="block" height={60} background="shadeAlt" />
+			<Box background="shadeAlt" display="block" height={40} />
+			<Box background="shadeAlt" display="block" height={80} />
+			<Box background="shadeAlt" display="block" height={30} />
+			<Box background="shadeAlt" display="block" height={60} />
 		</Stack>
 	),
 };
 
 export const Alignment = () => (
 	<Flex gap={6} justifyContent="space-between">
-		<Stack gap={2} alignItems="center">
+		<Stack alignItems="center" gap={2}>
 			<Box fontFamily="monospace">center</Box>
-			<Stack gap={6} alignItems="center" border>
-				<Box display="block" height={100} minWidth={40} background="shadeAlt" />
-				<Box display="block" height={100} minWidth={60} background="shadeAlt" />
+			<Stack alignItems="center" border gap={6}>
+				<Box background="shadeAlt" display="block" height={100} minWidth={40} />
+				<Box background="shadeAlt" display="block" height={100} minWidth={60} />
 				<Box
+					background="shadeAlt"
 					display="block"
 					height={100}
 					minWidth={100}
-					background="shadeAlt"
 				/>
-				<Box display="block" height={100} minWidth={80} background="shadeAlt" />
+				<Box background="shadeAlt" display="block" height={100} minWidth={80} />
 			</Stack>
 		</Stack>
-		<Stack gap={2} alignItems="center">
+		<Stack alignItems="center" gap={2}>
 			<Box fontFamily="monospace">flex-start</Box>
-			<Stack gap={6} alignItems="flex-start" border>
-				<Box display="block" height={100} minWidth={40} background="shadeAlt" />
-				<Box display="block" height={100} minWidth={60} background="shadeAlt" />
+			<Stack alignItems="flex-start" border gap={6}>
+				<Box background="shadeAlt" display="block" height={100} minWidth={40} />
+				<Box background="shadeAlt" display="block" height={100} minWidth={60} />
 				<Box
+					background="shadeAlt"
 					display="block"
 					height={100}
 					minWidth={100}
-					background="shadeAlt"
 				/>
-				<Box display="block" height={100} minWidth={80} background="shadeAlt" />
+				<Box background="shadeAlt" display="block" height={100} minWidth={80} />
 			</Stack>
 		</Stack>
-		<Stack gap={2} alignItems="center">
+		<Stack alignItems="center" gap={2}>
 			<Box fontFamily="monospace">flex-end</Box>
-			<Stack gap={6} alignItems="flex-end" border>
-				<Box display="block" height={100} minWidth={40} background="shadeAlt" />
-				<Box display="block" height={100} minWidth={60} background="shadeAlt" />
+			<Stack alignItems="flex-end" border gap={6}>
+				<Box background="shadeAlt" display="block" height={100} minWidth={40} />
+				<Box background="shadeAlt" display="block" height={100} minWidth={60} />
 				<Box
+					background="shadeAlt"
 					display="block"
 					height={100}
 					minWidth={100}
-					background="shadeAlt"
 				/>
-				<Box display="block" height={100} minWidth={80} background="shadeAlt" />
+				<Box background="shadeAlt" display="block" height={100} minWidth={80} />
 			</Stack>
 		</Stack>
-		<Stack gap={2} alignItems="center">
+		<Stack alignItems="center" gap={2}>
 			<Box fontFamily="monospace">stretch</Box>
-			<Stack gap={6} alignItems="stretch" border>
-				<Box display="block" height={100} minWidth={40} background="shadeAlt" />
-				<Box display="block" height={100} minWidth={60} background="shadeAlt" />
+			<Stack alignItems="stretch" border gap={6}>
+				<Box background="shadeAlt" display="block" height={100} minWidth={40} />
+				<Box background="shadeAlt" display="block" height={100} minWidth={60} />
 				<Box
+					background="shadeAlt"
 					display="block"
 					height={100}
 					minWidth={100}
-					background="shadeAlt"
 				/>
-				<Box display="block" height={100} minWidth={80} background="shadeAlt" />
+				<Box background="shadeAlt" display="block" height={100} minWidth={80} />
 			</Stack>
 		</Stack>
 	</Flex>
diff --git a/packages/react/src/stack/Stack.tsx b/packages/react/src/stack/Stack.tsx
index 182d608d062d..f001e020ed15 100644
--- a/packages/react/src/stack/Stack.tsx
+++ b/packages/react/src/stack/Stack.tsx
@@ -15,11 +15,11 @@ export const Stack = forwardRefWithAs<'div', StackProps>(function Stack(
 ) {
 	return (
 		<Box
-			ref={ref}
+			alignItems={alignItems}
 			display="flex"
 			flexDirection={flexDirection}
 			justifyContent={justifyContent}
-			alignItems={alignItems}
+			ref={ref}
 			{...props}
 		/>
 	);
diff --git a/packages/react/src/status-badge/StatusBadge.stories.tsx b/packages/react/src/status-badge/StatusBadge.stories.tsx
index 9000a8e08648..107b287cdfe2 100644
--- a/packages/react/src/status-badge/StatusBadge.stories.tsx
+++ b/packages/react/src/status-badge/StatusBadge.stories.tsx
@@ -191,7 +191,7 @@ export const SubtleAppearanceInTable: Story = {
 								<TableCell>{businessName}</TableCell>
 								<TableCell>{type}</TableCell>
 								<TableCell>
-									<StatusBadge appearance="subtle" tone={tone} label={status} />
+									<StatusBadge appearance="subtle" label={status} tone={tone} />
 								</TableCell>
 							</TableRow>
 						))}
diff --git a/packages/react/src/status-badge/StatusBadge.tsx b/packages/react/src/status-badge/StatusBadge.tsx
index f05067a12a88..1992871f757b 100644
--- a/packages/react/src/status-badge/StatusBadge.tsx
+++ b/packages/react/src/status-badge/StatusBadge.tsx
@@ -53,8 +53,6 @@ export const StatusBadge = ({
 			<Flex
 				alignItems="center"
 				borderColor={legacyTone}
-				display="inline-flex"
-				gap={0.5}
 				css={{
 					borderRadius,
 					'& svg': {
@@ -62,14 +60,16 @@ export const StatusBadge = ({
 						width: iconWidth,
 					},
 				}}
+				display="inline-flex"
+				gap={0.5}
 				{...appearanceStyleProps}
 			>
 				<LegacyIcon />
 				<Text
 					as="span"
+					css={{ whiteSpace: 'nowrap' }}
 					fontSize="sm"
 					lineHeight="nospace"
-					css={{ whiteSpace: 'nowrap' }}
 				>
 					{label}
 				</Text>
@@ -90,8 +90,6 @@ export const StatusBadge = ({
 		<Flex
 			alignItems="center"
 			borderColor={borderColor}
-			display="inline-flex"
-			gap={0.5}
 			css={{
 				borderRadius,
 				'& svg': {
@@ -99,6 +97,8 @@ export const StatusBadge = ({
 					width: iconWidth,
 				},
 			}}
+			display="inline-flex"
+			gap={0.5}
 			{...appearanceStyleProps}
 		>
 			<Icon
@@ -108,9 +108,9 @@ export const StatusBadge = ({
 			/>
 			<Text
 				as="span"
+				css={{ whiteSpace: 'nowrap' }}
 				fontSize="sm"
 				lineHeight="nospace"
-				css={{ whiteSpace: 'nowrap' }}
 			>
 				{label}
 			</Text>
@@ -245,38 +245,38 @@ const legacyToneMap = {
 	neutral: {
 		icon: () => (
 			<Box
-				highContrastOutline
 				css={{
 					width: 8,
 					height: 8,
 					borderRadius: 4,
 					backgroundColor: boxPalette.foregroundMuted,
 				}}
+				highContrastOutline
 			/>
 		),
 		tone: 'border',
 	},
 	success: {
 		icon: () => (
-			<SuccessIcon color="success" aria-hidden="false" aria-label="Success" />
+			<SuccessIcon aria-hidden="false" aria-label="Success" color="success" />
 		),
 		tone: 'success',
 	},
 	error: {
 		icon: () => (
-			<AlertIcon color="error" aria-hidden="false" aria-label="Error" />
+			<AlertIcon aria-hidden="false" aria-label="Error" color="error" />
 		),
 		tone: 'error',
 	},
 	info: {
 		icon: () => (
-			<InfoIcon color="info" aria-hidden="false" aria-label="Information" />
+			<InfoIcon aria-hidden="false" aria-label="Information" color="info" />
 		),
 		tone: 'info',
 	},
 	warning: {
 		icon: () => (
-			<WarningIcon color="warning" aria-hidden="false" aria-label="Warning" />
+			<WarningIcon aria-hidden="false" aria-label="Warning" color="warning" />
 		),
 		tone: 'warning',
 	},
diff --git a/packages/react/src/sub-nav/SubNav.stories.tsx b/packages/react/src/sub-nav/SubNav.stories.tsx
index 7121204a5875..1f36566b79e4 100644
--- a/packages/react/src/sub-nav/SubNav.stories.tsx
+++ b/packages/react/src/sub-nav/SubNav.stories.tsx
@@ -32,7 +32,7 @@ export const OnBodyAlt: Story = {
 		background: 'bodyAlt',
 	},
 	render: (args) => (
-		<Box padding={1.5} background={args.background}>
+		<Box background={args.background} padding={1.5}>
 			<SubNav {...args} />
 		</Box>
 	),
@@ -47,7 +47,7 @@ export const WithEndElements: Story = {
 				label: 'Code',
 				endElement: (
 					<Fragment>
-						<NotificationBadge value={5} tone="action" aria-hidden />
+						<NotificationBadge aria-hidden tone="action" value={5} />
 						<VisuallyHidden>, 5 notifications</VisuallyHidden>
 					</Fragment>
 				),
diff --git a/packages/react/src/sub-nav/SubNav.tsx b/packages/react/src/sub-nav/SubNav.tsx
index d1b26a974001..45361ae78721 100644
--- a/packages/react/src/sub-nav/SubNav.tsx
+++ b/packages/react/src/sub-nav/SubNav.tsx
@@ -22,8 +22,8 @@ export function SubNav({
 }: SubNavProps) {
 	const bestMatch = findBestMatch(links, activePath);
 	return (
-		<SubNavContainer id={id} aria-label={ariaLabel} background={background}>
-			<SubNavList links={links} activePath={bestMatch} />
+		<SubNavContainer aria-label={ariaLabel} background={background} id={id}>
+			<SubNavList activePath={bestMatch} links={links} />
 		</SubNavContainer>
 	);
 }
diff --git a/packages/react/src/sub-nav/SubNavContainer.tsx b/packages/react/src/sub-nav/SubNavContainer.tsx
index 81f6279eb0b4..82ac6322eb3c 100644
--- a/packages/react/src/sub-nav/SubNavContainer.tsx
+++ b/packages/react/src/sub-nav/SubNavContainer.tsx
@@ -29,15 +29,15 @@ export function SubNavContainer({
 	const { hover } = backgroundMap[background];
 	return (
 		<Box
+			aria-label={ariaLabel}
 			as="nav"
 			background={background}
-			id={id}
-			aria-label={ariaLabel}
 			css={{
 				position: 'relative',
 				[localPaletteVars.linkHoverBg]: backgroundColorMap[hover],
 				...packs.print.hidden,
 			}}
+			id={id}
 		>
 			{children}
 			<BottomBar />
@@ -48,8 +48,6 @@ export function SubNavContainer({
 function BottomBar() {
 	return (
 		<Box
-			display={['none', 'block']}
-			paddingTop={0.5}
 			css={{
 				position: 'absolute',
 				bottom: 0,
@@ -58,6 +56,8 @@ function BottomBar() {
 				width: '100%',
 				backgroundColor: boxPalette.borderMuted,
 			}}
+			display={['none', 'block']}
+			paddingTop={0.5}
 		/>
 	);
 }
diff --git a/packages/react/src/sub-nav/SubNavList.tsx b/packages/react/src/sub-nav/SubNavList.tsx
index 6db0ae21dff9..bbc56b566688 100644
--- a/packages/react/src/sub-nav/SubNavList.tsx
+++ b/packages/react/src/sub-nav/SubNavList.tsx
@@ -18,17 +18,17 @@ export function SubNavList({ links, activePath }: SubNavListProps) {
 	return (
 		<Flex
 			as="ul"
+			css={{ position: 'relative', zIndex: tokens.zIndex.elevated }}
 			flexDirection={['column', 'row']}
 			flexWrap="wrap"
-			css={{ position: 'relative', zIndex: tokens.zIndex.elevated }}
 		>
 			{links.map(({ href, label, endElement, ...props }, index) => {
 				const active = href === activePath;
 				return (
-					<SubNavListItem key={index} active={active}>
+					<SubNavListItem active={active} key={index}>
 						<Link
-							href={href}
 							aria-current={active ? 'page' : undefined}
+							href={href}
 							{...props}
 						>
 							<span>{label}</span>
diff --git a/packages/react/src/summary-list/SummaryList.tsx b/packages/react/src/summary-list/SummaryList.tsx
index 3e5292992db4..15cecaa37417 100644
--- a/packages/react/src/summary-list/SummaryList.tsx
+++ b/packages/react/src/summary-list/SummaryList.tsx
@@ -12,12 +12,12 @@ export function SummaryListItemTerm({ children }: SummaryListItemTermProps) {
 	return (
 		<Flex
 			as="dt"
-			fontWeight="bold"
-			width={['100%', '30%']}
+			color="text"
 			flexShrink={0}
-			minWidth="200px"
 			fontSize="sm"
-			color="text"
+			fontWeight="bold"
+			minWidth="200px"
+			width={['100%', '30%']}
 		>
 			{children}
 		</Flex>
@@ -31,7 +31,7 @@ export function SummaryListItemDescription({
 	children,
 }: SummaryListItemDescriptionProps) {
 	return (
-		<Flex as="dd" flexGrow={1} fontSize="sm" color="text">
+		<Flex as="dd" color="text" flexGrow={1} fontSize="sm">
 			{children}
 		</Flex>
 	);
@@ -60,10 +60,10 @@ export function SummaryList({ children }: SummaryListProps) {
 	return (
 		<Flex
 			as="dl"
-			width="100%"
-			borderTop
 			borderColor="muted"
+			borderTop
 			flexDirection="column"
+			width="100%"
 		>
 			{children}
 		</Flex>
diff --git a/packages/react/src/switch/SwitchTrack.tsx b/packages/react/src/switch/SwitchTrack.tsx
index 941627fe20e6..ad88b509c36d 100644
--- a/packages/react/src/switch/SwitchTrack.tsx
+++ b/packages/react/src/switch/SwitchTrack.tsx
@@ -16,9 +16,9 @@ export const SwitchContainer = ({ children, size }: SwitchContainerProps) => {
 	return (
 		<Box
 			as="span"
-			width={width}
-			height={height}
 			css={{ position: 'relative', flexShrink: 0 }}
+			height={height}
+			width={width}
 		>
 			{children}
 		</Box>
@@ -71,11 +71,8 @@ export const SwitchThumb = ({ checked, size }: SwitchThumbProps) => {
 	const iconSize = ICON_SIZE_MAP[size];
 	return (
 		<Flex
-			as="span"
 			alignItems="center"
-			justifyContent="center"
-			height={thumbSize}
-			width={thumbSize}
+			as="span"
 			background="body"
 			css={{
 				borderRadius: thumbSize,
@@ -88,14 +85,17 @@ export const SwitchThumb = ({ checked, size }: SwitchThumbProps) => {
 				transition: `left ${tokens.transition.duration}ms ${tokens.transition.timingFunction}`,
 				left: checked ? thumbCheckedPos : '0rem',
 			}}
+			height={thumbSize}
+			justifyContent="center"
+			width={thumbSize}
 		>
 			{checked && (
 				<CheckIcon
-					weight="bold"
 					color="selected"
+					css={{ width: iconSize.actual, height: iconSize.actual }}
 					// This component requires a custom icon size
 					size={iconSize.prop}
-					css={{ width: iconSize.actual, height: iconSize.actual }}
+					weight="bold"
 				/>
 			)}
 		</Flex>
diff --git a/packages/react/src/table/Table.stories.tsx b/packages/react/src/table/Table.stories.tsx
index ac5f684e38f8..3b479d0eb657 100644
--- a/packages/react/src/table/Table.stories.tsx
+++ b/packages/react/src/table/Table.stories.tsx
@@ -31,13 +31,13 @@ const meta: Meta<typeof Table> = {
 				<TableHead>
 					<TableRow>
 						<TableHeader scope="col">Location</TableHeader>
-						<TableHeader textAlign="right" scope="col">
+						<TableHeader scope="col" textAlign="right">
 							Population
 						</TableHeader>
-						<TableHeader textAlign="right" scope="col">
+						<TableHeader scope="col" textAlign="right">
 							Change over previous year %
 						</TableHeader>
-						<TableHeader textAlign="right" scope="col">
+						<TableHeader scope="col" textAlign="right">
 							Change over previous decade %
 						</TableHeader>
 					</TableRow>
@@ -175,7 +175,7 @@ export const AriaRowcount: Story = {
 				<TableBody>
 					{exampleData.map(
 						({ location, population, growthYear, growthDecade }, index) => (
-							<TableRow key={index} aria-rowindex={index + 2}>
+							<TableRow aria-rowindex={index + 2} key={index}>
 								<TableCell as="th" scope="row">
 									{location}
 								</TableCell>
@@ -204,20 +204,20 @@ export const WithHeading: Story = {
 			</Text>
 			<TableWrapper>
 				<Table
-					aria-labelledby="table-heading"
 					aria-describedby="table-description"
+					aria-labelledby="table-heading"
 					{...args}
 				>
 					<TableHead>
 						<TableRow>
 							<TableHeader scope="col">Location</TableHeader>
-							<TableHeader textAlign="right" scope="col">
+							<TableHeader scope="col" textAlign="right">
 								Population
 							</TableHeader>
-							<TableHeader textAlign="right" scope="col">
+							<TableHeader scope="col" textAlign="right">
 								Change over previous year %
 							</TableHeader>
-							<TableHeader textAlign="right" scope="col">
+							<TableHeader scope="col" textAlign="right">
 								Change over previous decade %
 							</TableHeader>
 						</TableRow>
@@ -261,15 +261,15 @@ export const Actions: Story = {
 				</TableHead>
 				<TableBody>
 					<TableRow>
-						<TableCell as="th" scope="row" fontWeight="bold">
+						<TableCell as="th" fontWeight="bold" scope="row">
 							<TextLink href="#">REF-AB3CD4EF</TextLink>
 						</TableCell>
 						<TableCell>20/06/2024</TableCell>
 						<TableCell>
 							<StatusBadge
 								appearance="subtle"
-								tone="infoMedium"
 								label="In progress"
+								tone="infoMedium"
 							/>
 						</TableCell>
 						<TableCell>
@@ -280,15 +280,15 @@ export const Actions: Story = {
 						</TableCell>
 					</TableRow>
 					<TableRow>
-						<TableCell as="th" scope="row" fontWeight="bold">
+						<TableCell as="th" fontWeight="bold" scope="row">
 							<TextLink href="#">REF-5GH6IJ7K</TextLink>
 						</TableCell>
 						<TableCell>25/06/2024</TableCell>
 						<TableCell>
 							<StatusBadge
 								appearance="subtle"
-								tone="infoMedium"
 								label="In progress"
+								tone="infoMedium"
 							/>
 						</TableCell>
 						<TableCell>
@@ -299,15 +299,15 @@ export const Actions: Story = {
 						</TableCell>
 					</TableRow>
 					<TableRow>
-						<TableCell as="th" scope="row" fontWeight="bold">
+						<TableCell as="th" fontWeight="bold" scope="row">
 							<TextLink href="#">REF-M8NO9PQR</TextLink>
 						</TableCell>
 						<TableCell>02/07/2024</TableCell>
 						<TableCell>
 							<StatusBadge
 								appearance="subtle"
-								tone="successMedium"
 								label="Completed"
+								tone="successMedium"
 							/>
 						</TableCell>
 						<TableCell>
@@ -318,15 +318,15 @@ export const Actions: Story = {
 						</TableCell>
 					</TableRow>
 					<TableRow>
-						<TableCell as="th" scope="row" fontWeight="bold">
+						<TableCell as="th" fontWeight="bold" scope="row">
 							<TextLink href="#">REF-S1TU2VWX</TextLink>
 						</TableCell>
 						<TableCell>05/08/2024</TableCell>
 						<TableCell>
 							<StatusBadge
 								appearance="subtle"
-								tone="infoMedium"
 								label="In progress"
+								tone="infoMedium"
 							/>
 						</TableCell>
 						<TableCell>
@@ -337,15 +337,15 @@ export const Actions: Story = {
 						</TableCell>
 					</TableRow>
 					<TableRow>
-						<TableCell as="th" scope="row" fontWeight="bold">
+						<TableCell as="th" fontWeight="bold" scope="row">
 							<TextLink href="#">REF-Y3ZA4B5C</TextLink>
 						</TableCell>
 						<TableCell>19/10/2024</TableCell>
 						<TableCell>
 							<StatusBadge
 								appearance="subtle"
-								tone="successMedium"
 								label="Completed"
+								tone="successMedium"
 							/>
 						</TableCell>
 						<TableCell>
@@ -396,12 +396,12 @@ export const SelectableBasic: Story = {
 			<Stack gap={1.5}>
 				<H2 id={headingId}>Basic selectable table</H2>
 				<Stack gap={0}>
-					<Box paddingLeft={0.75} paddingBottom={0.75} borderBottom>
+					<Box borderBottom paddingBottom={0.75} paddingLeft={0.75}>
 						<Checkbox
-							size="sm"
 							checked={allRowsSelected}
 							indeterminate={isIndeterminate}
 							onChange={toggleAllRows}
+							size="sm"
 						>
 							Select all rows
 						</Checkbox>
@@ -412,13 +412,13 @@ export const SelectableBasic: Story = {
 								<TableRow>
 									<TableHeader scope="col">Select</TableHeader>
 									<TableHeader scope="col">Location</TableHeader>
-									<TableHeader textAlign="right" scope="col">
+									<TableHeader scope="col" textAlign="right">
 										Population
 									</TableHeader>
-									<TableHeader textAlign="right" scope="col">
+									<TableHeader scope="col" textAlign="right">
 										Change over previous year %
 									</TableHeader>
-									<TableHeader textAlign="right" scope="col">
+									<TableHeader scope="col" textAlign="right">
 										Change over previous decade %
 									</TableHeader>
 								</TableRow>
@@ -431,9 +431,9 @@ export const SelectableBasic: Story = {
 											<TableRow key={id} selected={isSelected}>
 												<TableCell>
 													<Checkbox
-														size="sm"
 														checked={isSelected}
 														onChange={() => toggleRow(id)}
+														size="sm"
 													>
 														<VisuallyHidden>Select {location}</VisuallyHidden>
 													</Checkbox>
diff --git a/packages/react/src/table/Table.test.tsx b/packages/react/src/table/Table.test.tsx
index 7afefb1e74b0..d0bc0a83a7bc 100644
--- a/packages/react/src/table/Table.test.tsx
+++ b/packages/react/src/table/Table.test.tsx
@@ -28,13 +28,13 @@ function renderTableWithCaption() {
 				<TableHead>
 					<TableRow>
 						<TableHeader scope="col">Location</TableHeader>
-						<TableHeader textAlign="right" scope="col">
+						<TableHeader scope="col" textAlign="right">
 							Population
 						</TableHeader>
-						<TableHeader textAlign="right" scope="col">
+						<TableHeader scope="col" textAlign="right">
 							Change over previous year %
 						</TableHeader>
-						<TableHeader textAlign="right" scope="col">
+						<TableHeader scope="col" textAlign="right">
 							Change over previous decade %
 						</TableHeader>
 					</TableRow>
@@ -119,20 +119,20 @@ function renderTableWithHeadings() {
 			</Text>
 			<TableWrapper>
 				<Table
-					id="table"
-					aria-labelledby="table-heading"
 					aria-describedby="table-description"
+					aria-labelledby="table-heading"
+					id="table"
 				>
 					<TableHead>
 						<TableRow>
 							<TableHeader scope="col">Location</TableHeader>
-							<TableHeader textAlign="right" scope="col">
+							<TableHeader scope="col" textAlign="right">
 								Population
 							</TableHeader>
-							<TableHeader textAlign="right" scope="col">
+							<TableHeader scope="col" textAlign="right">
 								Change over previous year %
 							</TableHeader>
-							<TableHeader textAlign="right" scope="col">
+							<TableHeader scope="col" textAlign="right">
 								Change over previous decade %
 							</TableHeader>
 						</TableRow>
diff --git a/packages/react/src/table/Table.tsx b/packages/react/src/table/Table.tsx
index d8cf89826267..122703c5e622 100644
--- a/packages/react/src/table/Table.tsx
+++ b/packages/react/src/table/Table.tsx
@@ -36,14 +36,10 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
 	return (
 		<TableContext.Provider value={{ tableLayout }}>
 			<Box
+				aria-describedby={ariaDescribedby}
+				aria-labelledby={ariaLabelledby}
+				aria-rowcount={ariaRowcount}
 				as="table"
-				ref={ref}
-				tabIndex={tabIndex}
-				fontSize="sm"
-				focusRingFor="keyboard"
-				width="100%"
-				display="table"
-				id={id}
 				css={{
 					borderCollapse: 'collapse',
 					borderSpacing: 0,
@@ -54,9 +50,13 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
 						},
 					}),
 				}}
-				aria-labelledby={ariaLabelledby}
-				aria-describedby={ariaDescribedby}
-				aria-rowcount={ariaRowcount}
+				display="table"
+				focusRingFor="keyboard"
+				fontSize="sm"
+				id={id}
+				ref={ref}
+				tabIndex={tabIndex}
+				width="100%"
 			>
 				{children}
 			</Box>
diff --git a/packages/react/src/table/TableBatchActionsBar.tsx b/packages/react/src/table/TableBatchActionsBar.tsx
index b3a02ad1f902..96b62ff517e5 100644
--- a/packages/react/src/table/TableBatchActionsBar.tsx
+++ b/packages/react/src/table/TableBatchActionsBar.tsx
@@ -19,14 +19,10 @@ export function TableBatchActionsBar({ children }: TableBatchActionsProps) {
 
 	return (
 		<Stack
-			ref={ref}
 			background="bodyAlt"
-			padding={1}
-			gap={1}
 			border
 			borderColor="muted"
 			borderWidth="sm"
-			rounded
 			css={{
 				position: 'sticky',
 				bottom: -1,
@@ -37,6 +33,10 @@ export function TableBatchActionsBar({ children }: TableBatchActionsProps) {
 					boxShadow: `0 -2px 4px rgba(0, 0, 0, 0.3)`,
 				}),
 			}}
+			gap={1}
+			padding={1}
+			ref={ref}
+			rounded
 		>
 			{children}
 		</Stack>
diff --git a/packages/react/src/table/TableCaption.tsx b/packages/react/src/table/TableCaption.tsx
index b82d914693b1..70d43dbf63a8 100644
--- a/packages/react/src/table/TableCaption.tsx
+++ b/packages/react/src/table/TableCaption.tsx
@@ -9,10 +9,10 @@ export const TableCaption = ({ children }: TableCaptionProps) => {
 	return (
 		<Text
 			as="caption"
+			display="table-caption"
 			fontSize="md"
 			fontWeight="bold"
 			paddingBottom={0.5}
-			display="table-caption"
 			textAlign="left"
 		>
 			{children}
diff --git a/packages/react/src/table/TableCell.tsx b/packages/react/src/table/TableCell.tsx
index 1a387b55f762..67238da64967 100644
--- a/packages/react/src/table/TableCell.tsx
+++ b/packages/react/src/table/TableCell.tsx
@@ -40,8 +40,8 @@ export const TableCell = ({
 			as={as}
 			borderBottom
 			borderColor="muted"
-			color="text"
 			colSpan={colSpan}
+			color="text"
 			css={{ verticalAlign }}
 			display={display}
 			focusRingFor="keyboard"
diff --git a/packages/react/src/table/TableHeader.tsx b/packages/react/src/table/TableHeader.tsx
index 86b392ac5e09..ff5e6b2aee85 100644
--- a/packages/react/src/table/TableHeader.tsx
+++ b/packages/react/src/table/TableHeader.tsx
@@ -32,8 +32,8 @@ export const TableHeader = ({
 	return (
 		<Box
 			as={as}
-			color="text"
 			colSpan={colSpan}
+			color="text"
 			focusRingFor="keyboard"
 			fontWeight="bold"
 			padding={0.75}
diff --git a/packages/react/src/table/TableHeaderSortable.tsx b/packages/react/src/table/TableHeaderSortable.tsx
index 63ef6408960a..593fcf9441b8 100644
--- a/packages/react/src/table/TableHeaderSortable.tsx
+++ b/packages/react/src/table/TableHeaderSortable.tsx
@@ -36,8 +36,8 @@ export const TableHeaderSortable = ({
 			aria-sort={sortLabel}
 			as="th"
 			borderBottom
-			borderColor="selected"
 			borderBottomWidth={sort ? 'xl' : 'none'}
+			borderColor="selected"
 			display={display}
 			scope="col"
 			width={width}
@@ -81,7 +81,7 @@ export const TableHeaderSortable = ({
 				>
 					{children}
 				</Box>
-				<Icon size="md" color="inherit" />
+				<Icon color="inherit" size="md" />
 			</Flex>
 		</Box>
 	);
diff --git a/packages/react/src/table/TableRow.tsx b/packages/react/src/table/TableRow.tsx
index c36ade47b346..160cb1754650 100644
--- a/packages/react/src/table/TableRow.tsx
+++ b/packages/react/src/table/TableRow.tsx
@@ -21,8 +21,8 @@ export function TableRow({
 	const { tableLayout } = useTableContext();
 	return (
 		<tr
-			aria-selected={selected}
 			aria-rowindex={ariaRowindex}
+			aria-selected={selected}
 			css={{
 				...(selected && {
 					...(tableLayout === 'auto' && {
diff --git a/packages/react/src/table/TableScroller.tsx b/packages/react/src/table/TableScroller.tsx
index 65a826b32f8a..54daa94aa6c9 100644
--- a/packages/react/src/table/TableScroller.tsx
+++ b/packages/react/src/table/TableScroller.tsx
@@ -233,11 +233,11 @@ export function TableScroller({ children }: TableScrollerProps) {
 
 	return (
 		<Stack
-			gap={0.5}
 			css={{
 				position: 'relative',
 				width: '100%',
 			}}
+			gap={0.5}
 		>
 			<Box
 				aria-label={scrollerAriaLabel}
@@ -308,12 +308,12 @@ export function TableScroller({ children }: TableScrollerProps) {
 					onMouseDown={(event: React.MouseEvent) =>
 						handleButtonPress(event, 'left')
 					}
-					onMouseUp={handleButtonRelease}
 					onMouseLeave={handleButtonRelease}
+					onMouseUp={handleButtonRelease}
+					onTouchEnd={handleButtonRelease}
 					onTouchStart={(event: React.TouchEvent) =>
 						handleButtonPress(event, 'left')
 					}
-					onTouchEnd={handleButtonRelease}
 					tabIndex={-1}
 					type="button"
 				>
@@ -353,13 +353,13 @@ export function TableScroller({ children }: TableScrollerProps) {
 								backgroundColor: 'CaptionText',
 							},
 						}}
+						onMouseDown={handleThumbPress}
+						onTouchStart={handleThumbPress}
+						ref={thumbRef}
 						style={{
 							left: thumbPosition,
 							width: `${thumbWidthRatio * 100}%`,
 						}}
-						onMouseDown={handleThumbPress}
-						onTouchStart={handleThumbPress}
-						ref={thumbRef}
 						tabIndex={-1}
 						type="button"
 					/>
@@ -378,12 +378,12 @@ export function TableScroller({ children }: TableScrollerProps) {
 					onMouseDown={(event: React.MouseEvent) =>
 						handleButtonPress(event, 'right')
 					}
-					onMouseUp={handleButtonRelease}
 					onMouseLeave={handleButtonRelease}
+					onMouseUp={handleButtonRelease}
+					onTouchEnd={handleButtonRelease}
 					onTouchStart={(event: React.TouchEvent) =>
 						handleButtonPress(event, 'right')
 					}
-					onTouchEnd={handleButtonRelease}
 					tabIndex={-1}
 					type="button"
 				>
diff --git a/packages/react/src/tabs/TabButton.tsx b/packages/react/src/tabs/TabButton.tsx
index 5bb6df3f4a7a..43bd2728df11 100644
--- a/packages/react/src/tabs/TabButton.tsx
+++ b/packages/react/src/tabs/TabButton.tsx
@@ -66,17 +66,9 @@ export function TabButton({ children, endElement }: TabButtonProps) {
 
 	return (
 		<Box
-			as={BaseButton}
-			onKeyDown={onKeyDown}
-			onClick={onClick}
-			role="tab"
-			aria-selected={isSelected}
-			id={tabButtonId}
-			tabIndex={isSelected ? 0 : -1}
 			aria-controls={panelId}
-			paddingX={1.5}
-			paddingY={0.75}
-			focusRingFor="keyboard"
+			aria-selected={isSelected}
+			as={BaseButton}
 			css={{
 				position: 'relative',
 				display: 'flex',
@@ -175,6 +167,14 @@ export function TabButton({ children, endElement }: TabButtonProps) {
 					}),
 				},
 			}}
+			focusRingFor="keyboard"
+			id={tabButtonId}
+			onClick={onClick}
+			onKeyDown={onKeyDown}
+			paddingX={1.5}
+			paddingY={0.75}
+			role="tab"
+			tabIndex={isSelected ? 0 : -1}
 		>
 			<span>{children}</span>
 			{endElement}
diff --git a/packages/react/src/tabs/TabList.tsx b/packages/react/src/tabs/TabList.tsx
index 9da3d5ef22de..a3125e70a129 100644
--- a/packages/react/src/tabs/TabList.tsx
+++ b/packages/react/src/tabs/TabList.tsx
@@ -10,11 +10,11 @@ export function TabList({ children }: TabListProps) {
 	const orientation = useTabsOrientation();
 	return (
 		<Flex
+			aria-orientation={orientation}
 			flexDirection={{ xs: 'column', sm: 'row' }}
 			flexWrap="wrap"
-			role="tablist"
-			aria-orientation={orientation}
 			gap={{ xs: 0, sm: 0.5 }}
+			role="tablist"
 		>
 			{flattenChildren(children).map((child, index) => (
 				<TabListContext.Provider key={index} value={{ tabIndex: index }}>
diff --git a/packages/react/src/tabs/TabPanel.tsx b/packages/react/src/tabs/TabPanel.tsx
index a8a5024f357b..bee5f45256fe 100644
--- a/packages/react/src/tabs/TabPanel.tsx
+++ b/packages/react/src/tabs/TabPanel.tsx
@@ -15,15 +15,8 @@ export function TabPanel({ children }: TabPanelProps) {
 	const isSelected = activeIndex === panelIndex;
 	return (
 		<Box
-			id={panelId}
-			role="tabpanel"
 			aria-labelledby={tabButtonId}
-			display={isSelected ? undefined : 'none'}
-			tabIndex={isSelected ? 0 : -1}
-			focusRingFor="keyboard"
 			border
-			paddingX={{ xs: 0.75, md: 1.5 }}
-			paddingY={1.5}
 			css={{
 				background: localPalette.panelBg,
 				color: localPalette.panelFg,
@@ -45,6 +38,13 @@ export function TabPanel({ children }: TabPanelProps) {
 						  }),
 				},
 			}}
+			display={isSelected ? undefined : 'none'}
+			focusRingFor="keyboard"
+			id={panelId}
+			paddingX={{ xs: 0.75, md: 1.5 }}
+			paddingY={1.5}
+			role="tabpanel"
+			tabIndex={isSelected ? 0 : -1}
 		>
 			{children}
 		</Box>
diff --git a/packages/react/src/tabs/Tabs.stories.tsx b/packages/react/src/tabs/Tabs.stories.tsx
index 7dcb6657607a..92b3763b3e03 100644
--- a/packages/react/src/tabs/Tabs.stories.tsx
+++ b/packages/react/src/tabs/Tabs.stories.tsx
@@ -28,8 +28,8 @@ const meta: Meta = {
 	render: function Render(args) {
 		return (
 			<Box
-				padding={args.background === 'bodyAlt' ? 1.5 : 0}
 				background={args.background}
+				padding={args.background === 'bodyAlt' ? 1.5 : 0}
 			>
 				<Tabs {...args}>
 					<TabList>
@@ -117,13 +117,13 @@ export const Controlled: StoryObj = {
 			<Stack gap={2}>
 				<Text>Current tab index: {activeTabIndex}</Text>
 				<Flex gap={0.5}>
-					<Button variant="text" onClick={() => setActiveTabIndex(0)}>
+					<Button onClick={() => setActiveTabIndex(0)} variant="text">
 						Go to first tab
 					</Button>
-					<Button variant="text" onClick={() => setActiveTabIndex(1)}>
+					<Button onClick={() => setActiveTabIndex(1)} variant="text">
 						Go to second tab
 					</Button>
-					<Button variant="text" onClick={() => setActiveTabIndex(2)}>
+					<Button onClick={() => setActiveTabIndex(2)} variant="text">
 						Go to third tab
 					</Button>
 				</Flex>
@@ -222,10 +222,10 @@ export const WithEndElements: StoryObj = {
 						endElement={
 							<Fragment>
 								<NotificationBadge
-									value={100}
+									aria-hidden
 									max={99}
 									tone="action"
-									aria-hidden
+									value={100}
 								/>
 								<VisuallyHidden>, 100 notifications</VisuallyHidden>
 							</Fragment>
@@ -304,7 +304,7 @@ export const ExampleComposition: StoryObj = {
 								/>
 								<Stack gap={1.5}>
 									<H1>Population trends</H1>
-									<Text as="p" fontSize="md" color="muted">
+									<Text as="p" color="muted" fontSize="md">
 										Introductory paragraph providing context for this single
 										page of the multipage form. All questions on page must be
 										related - md/default (P).
diff --git a/packages/react/src/tabs/Tabs.tsx b/packages/react/src/tabs/Tabs.tsx
index f70ad38b213b..d3b96392827f 100644
--- a/packages/react/src/tabs/Tabs.tsx
+++ b/packages/react/src/tabs/Tabs.tsx
@@ -84,7 +84,7 @@ export function Tabs({
 				goToNextTab,
 			}}
 		>
-			<div ref={ref} id={tabsId} css={setLocalPaletteVars(background)}>
+			<div css={setLocalPaletteVars(background)} id={tabsId} ref={ref}>
 				{children}
 			</div>
 		</TabsContext.Provider>
diff --git a/packages/react/src/tags/Tags.stories.tsx b/packages/react/src/tags/Tags.stories.tsx
index a30fda59b344..e5ec5c450078 100644
--- a/packages/react/src/tags/Tags.stories.tsx
+++ b/packages/react/src/tags/Tags.stories.tsx
@@ -56,7 +56,7 @@ export const Modular = () => (
 		</Text>
 		<TagsList>
 			{exampleLinks.map(({ href, label }, idx) => (
-				<Box key={idx} as="li">
+				<Box as="li" key={idx}>
 					<Tag href={href}>{label}</Tag>
 				</Box>
 			))}
diff --git a/packages/react/src/tags/TagsList.tsx b/packages/react/src/tags/TagsList.tsx
index 6efd9fdd61b3..86123fbb19b9 100644
--- a/packages/react/src/tags/TagsList.tsx
+++ b/packages/react/src/tags/TagsList.tsx
@@ -4,7 +4,7 @@ import { Flex } from '../flex';
 export type TagsListProps = { children: ReactNode };
 
 export const TagsList = ({ children }: TagsListProps) => (
-	<Flex as="ul" gap={0.5} alignItems="center" flexWrap="wrap">
+	<Flex alignItems="center" as="ul" flexWrap="wrap" gap={0.5}>
 		{children}
 	</Flex>
 );
diff --git a/packages/react/src/task-list/TaskListHeading.tsx b/packages/react/src/task-list/TaskListHeading.tsx
index ca3e7e3fab25..00372ca140c0 100644
--- a/packages/react/src/task-list/TaskListHeading.tsx
+++ b/packages/react/src/task-list/TaskListHeading.tsx
@@ -12,7 +12,7 @@ export const TaskListHeading = ({
 	return (
 		<Stack gap={1}>
 			<H2>Complete these tasks</H2>
-			<Text fontSize="sm" color="muted">
+			<Text color="muted" fontSize="sm">
 				{tasksCompleted} of {totalTasks} tasks completed
 			</Text>
 		</Stack>
diff --git a/packages/react/src/task-list/TaskListItem.tsx b/packages/react/src/task-list/TaskListItem.tsx
index 20e869cddad4..b8dbccc9f97a 100644
--- a/packages/react/src/task-list/TaskListItem.tsx
+++ b/packages/react/src/task-list/TaskListItem.tsx
@@ -31,9 +31,9 @@ export const TaskListItemLink = ({
 }: TaskListItemLinkProps) => (
 	<TaskListItem
 		as={TextLink}
-		status={status}
 		message={message}
 		ordered={ordered}
+		status={status}
 		{...props}
 	>
 		{children}
@@ -80,19 +80,11 @@ const TaskListItem = ({
 	return (
 		<li css={{ counterIncrement: 'task-count' }}>
 			<Flex
-				as={as}
-				flexDirection={['column', 'row']}
-				justifyContent="space-between"
 				alignItems={['flex-start', 'center']}
+				as={as}
+				borderBottom
 				className={className}
-				gap={1}
-				paddingY={1}
-				paddingX={[0.75, 1]}
-				fontFamily="body"
 				color="text"
-				borderBottom
-				width="100%"
-				focusRingFor="keyboard"
 				css={{
 					position: 'relative',
 					textDecoration: 'none',
@@ -126,24 +118,29 @@ const TaskListItem = ({
 						},
 					},
 				}}
+				flexDirection={['column', 'row']}
+				focusRingFor="keyboard"
+				fontFamily="body"
+				gap={1}
+				justifyContent="space-between"
+				paddingX={[0.75, 1]}
+				paddingY={1}
+				width="100%"
 				{...props}
 			>
 				<Flex as="span" gap={[0, 1]}>
-					<Flex as="span" alignItems="center">
+					<Flex alignItems="center" as="span">
 						<Icon
-							size="xl"
 							color={iconColor}
 							css={mq({
 								display: ['none', 'block'],
 							})}
+							size="xl"
 						/>
 					</Flex>
 					<Flex as="span" flexDirection="column" gap={0.5}>
 						<Text
 							{...{ [taskListItemTextDataAttr]: '' }}
-							fontSize={['md', 'lg']}
-							lineHeight="heading"
-							fontWeight="bold"
 							color="action"
 							css={
 								ordered
@@ -154,18 +151,21 @@ const TaskListItem = ({
 									  }
 									: undefined
 							}
+							fontSize={['md', 'lg']}
+							fontWeight="bold"
+							lineHeight="heading"
 						>
-							{ordered && <span aria-hidden="true">. </span>}
+							{ordered && <span aria-hidden>. </span>}
 							{children}
 							<VisuallyHidden>.</VisuallyHidden>
 						</Text>
-						<Flex as="span" gap={0.25} alignItems="center">
+						<Flex alignItems="center" as="span" gap={0.25}>
 							<Icon
-								size="md"
 								color={iconColor}
 								css={mq({
 									display: ['block', 'none'],
 								})}
+								size="md"
 							/>
 							<Text as="span" fontSize={['xs', 'sm']} lineHeight="nospace">
 								{label}
diff --git a/packages/react/src/text-input/TextInput.stories.tsx b/packages/react/src/text-input/TextInput.stories.tsx
index 037cac11ba48..ec46bf113a2d 100644
--- a/packages/react/src/text-input/TextInput.stories.tsx
+++ b/packages/react/src/text-input/TextInput.stories.tsx
@@ -60,7 +60,7 @@ export const Block: Story = {
 export const MaxWidths: Story = {
 	args: {},
 	render: (args) => (
-		<Stack background="body" palette="light" gap={1}>
+		<Stack background="body" gap={1} palette="light">
 			{(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
 				<TextInput key={size} {...args} label={size} maxWidth={size} />
 			))}
diff --git a/packages/react/src/text-input/TextInput.tsx b/packages/react/src/text-input/TextInput.tsx
index 2ebc2fbf4ac3..19939d8fdc79 100644
--- a/packages/react/src/text-input/TextInput.tsx
+++ b/packages/react/src/text-input/TextInput.tsx
@@ -60,17 +60,17 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
 		const styles = textInputStyles({ block, maxWidth });
 		return (
 			<Field
-				label={label}
 				hideOptionalLabel={hideOptionalLabel}
-				required={required}
 				hint={hint}
+				id={id}
+				invalid={invalid}
+				label={label}
 				maxWidth={maxWidth}
 				message={message}
-				invalid={invalid}
-				id={id}
+				required={required}
 			>
 				{(a11yProps) => (
-					<input ref={ref} css={styles} {...a11yProps} type={type} {...props} />
+					<input css={styles} ref={ref} {...a11yProps} type={type} {...props} />
 				)}
 			</Field>
 		);
diff --git a/packages/react/src/text-link/TextLink.tsx b/packages/react/src/text-link/TextLink.tsx
index dffd5fe8050c..47f5ec4aba96 100644
--- a/packages/react/src/text-link/TextLink.tsx
+++ b/packages/react/src/text-link/TextLink.tsx
@@ -10,6 +10,6 @@ export type TextLinkProps = LinkProps & {
 export const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
 	function TextLink(props, ref) {
 		const Link = useLinkComponent();
-		return <Link ref={ref} css={[linkStyles, focusStyles]} {...props} />;
+		return <Link css={[linkStyles, focusStyles]} ref={ref} {...props} />;
 	}
 );
diff --git a/packages/react/src/text-link/TextLinkExternal.tsx b/packages/react/src/text-link/TextLinkExternal.tsx
index 566d09b94b02..32048192a1c2 100644
--- a/packages/react/src/text-link/TextLinkExternal.tsx
+++ b/packages/react/src/text-link/TextLinkExternal.tsx
@@ -14,17 +14,17 @@ export const TextLinkExternal = ({
 	...props
 }: TextLinkExternalProps) => {
 	return (
-		<TextLink target="_blank" rel="noopener" {...props}>
+		<TextLink rel="noopener" target="_blank" {...props}>
 			{children}
 			<ExternalLinkCallout />
 			<ExternalLinkIcon
-				weight="regular"
-				size="sm"
 				css={{
 					position: 'relative',
 					top: 3,
 					marginLeft: mapSpacing(0.25),
 				}}
+				size="sm"
+				weight="regular"
 			/>
 		</TextLink>
 	);
diff --git a/packages/react/src/text/Text.tsx b/packages/react/src/text/Text.tsx
index 133e7b030dcd..b2d51238be28 100644
--- a/packages/react/src/text/Text.tsx
+++ b/packages/react/src/text/Text.tsx
@@ -17,13 +17,13 @@ export const Text = forwardRefWithAs<'span', BoxProps>(function Text(
 ) {
 	return (
 		<Box
-			ref={ref}
 			as={as}
 			color={color}
 			fontFamily={fontFamily}
 			fontSize={fontSize}
 			fontWeight={fontWeight}
 			lineHeight={lineHeight}
+			ref={ref}
 			{...props}
 		/>
 	);
diff --git a/packages/react/src/textarea/Textarea.stories.tsx b/packages/react/src/textarea/Textarea.stories.tsx
index f679588b197b..cd95a22d3d07 100644
--- a/packages/react/src/textarea/Textarea.stories.tsx
+++ b/packages/react/src/textarea/Textarea.stories.tsx
@@ -58,7 +58,7 @@ export const Block: Story = {
 export const MaxWidths: Story = {
 	args: {},
 	render: (args) => (
-		<Stack background="body" palette="light" gap={1}>
+		<Stack background="body" gap={1} palette="light">
 			{(['md', 'lg', 'xl'] as const).map((size) => (
 				<Textarea key={size} {...args} label={size} maxWidth={size} />
 			))}
diff --git a/packages/react/src/textarea/Textarea.tsx b/packages/react/src/textarea/Textarea.tsx
index e6811f478522..87a694215a64 100644
--- a/packages/react/src/textarea/Textarea.tsx
+++ b/packages/react/src/textarea/Textarea.tsx
@@ -61,17 +61,17 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 		});
 		return (
 			<Field
-				label={label}
 				hideOptionalLabel={hideOptionalLabel}
-				required={required}
 				hint={hint}
+				id={id}
+				invalid={invalid}
+				label={label}
 				maxWidth={maxWidth}
 				message={message}
-				invalid={invalid}
-				id={id}
+				required={required}
 			>
 				{(a11yProps) => (
-					<textarea ref={ref} css={styles} {...a11yProps} {...props} />
+					<textarea css={styles} ref={ref} {...a11yProps} {...props} />
 				)}
 			</Field>
 		);
diff --git a/packages/react/src/time-picker/TimePicker.stories.tsx b/packages/react/src/time-picker/TimePicker.stories.tsx
index ee286e1bcbb4..6075aab8a123 100644
--- a/packages/react/src/time-picker/TimePicker.stories.tsx
+++ b/packages/react/src/time-picker/TimePicker.stories.tsx
@@ -12,7 +12,7 @@ const meta: Meta<typeof TimePicker> = {
 	},
 	render: function TimePickerStory(props) {
 		const [value, setValue] = useState<DefaultComboboxOption | null>(null);
-		return <TimePicker {...props} value={value} onChange={setValue} />;
+		return <TimePicker {...props} onChange={setValue} value={value} />;
 	},
 };
 
diff --git a/packages/react/src/time-picker/TimePicker.test.tsx b/packages/react/src/time-picker/TimePicker.test.tsx
index 07f1ffe065b9..ef1542cfd7aa 100644
--- a/packages/react/src/time-picker/TimePicker.test.tsx
+++ b/packages/react/src/time-picker/TimePicker.test.tsx
@@ -10,8 +10,8 @@ expect.extend(toHaveNoViolations);
 function renderTimePicker(props?: Pick<TimePickerProps, 'loading'>) {
 	return render(
 		<TimePicker
-			label="Select a time"
 			hint="Start typing to see results"
+			label="Select a time"
 			{...props}
 		/>
 	);
diff --git a/packages/react/src/time-picker/TimePicker.tsx b/packages/react/src/time-picker/TimePicker.tsx
index 21c7dca13b5f..e3b8111f0ab4 100644
--- a/packages/react/src/time-picker/TimePicker.tsx
+++ b/packages/react/src/time-picker/TimePicker.tsx
@@ -66,8 +66,8 @@ export function TimePicker({
 	return (
 		<ComboboxBase
 			combobox={combobox}
-			inputItems={inputItems}
 			inputId={inputId}
+			inputItems={inputItems}
 			inputRef={inputRefProp}
 			isAutocomplete={false}
 			loading={loading}
diff --git a/yourgov/components/ConditionalFieldContainer.tsx b/yourgov/components/ConditionalFieldContainer.tsx
index d0dd6cfe9ac6..1b5c3fbfad12 100644
--- a/yourgov/components/ConditionalFieldContainer.tsx
+++ b/yourgov/components/ConditionalFieldContainer.tsx
@@ -11,10 +11,10 @@ export function ConditionalFieldContainer({
 		<Box
 			borderLeft
 			borderLeftWidth="xl"
-			paddingLeft={1.5}
 			css={{
 				marginLeft: `calc(${mapSpacing(1)} - ${tokens.borderWidth.xl / 2}px)`,
 			}}
+			paddingLeft={1.5}
 		>
 			{children}
 		</Box>
diff --git a/yourgov/components/CustomIcons.tsx b/yourgov/components/CustomIcons.tsx
index 3cf03e34b848..d7c51890ce23 100644
--- a/yourgov/components/CustomIcons.tsx
+++ b/yourgov/components/CustomIcons.tsx
@@ -5,14 +5,14 @@ export const IconApproval = createIcon(
 	<Fragment>
 		<path
 			d="M11.832 1.15241C11.9273 1.06594 12.0727 1.06594 12.168 1.15241L14.9342 3.66209C14.9826 3.70607 15.0464 3.72929 15.1118 3.72676L18.844 3.58228C18.9726 3.57731 19.084 3.67075 19.1014 3.79824L19.6072 7.49883C19.6161 7.56368 19.65 7.62246 19.7017 7.66256L22.6536 9.9509C22.7553 10.0297 22.7806 10.1729 22.712 10.2818L20.7207 13.4417C20.6859 13.4971 20.6741 13.5639 20.6879 13.6279L21.4783 17.2783C21.5055 17.4041 21.4328 17.53 21.3103 17.5693L17.7538 18.71C17.6914 18.73 17.6394 18.7736 17.6089 18.8315L15.8679 22.1359C15.808 22.2498 15.6714 22.2995 15.5522 22.2509L12.0945 20.8386C12.0339 20.8139 11.9661 20.8139 11.9055 20.8386L8.44776 22.2509C8.32863 22.2995 8.19203 22.2498 8.13205 22.1359L6.39106 18.8315C6.36056 18.7736 6.30856 18.73 6.24624 18.71L2.6897 17.5693C2.56717 17.53 2.49449 17.4041 2.52172 17.2783L3.31208 13.6279C3.32593 13.5639 3.31415 13.4971 3.27926 13.4417L1.28804 10.2818C1.21944 10.1729 1.24468 10.0297 1.34638 9.9509L4.29828 7.66256C4.35 7.62246 4.38394 7.56368 4.3928 7.49883L4.89862 3.79824C4.91605 3.67075 5.0274 3.57731 5.15599 3.58228L8.88819 3.72676C8.95359 3.72929 9.01737 3.70607 9.06585 3.66209L11.832 1.15241Z"
-			strokeWidth="2"
 			strokeLinejoin="round"
+			strokeWidth="2"
 		/>
 		<path
 			d="M7.23828 12.9521L10.0954 15.8092L16.4047 9.5"
-			strokeWidth="2"
 			strokeLinecap="round"
 			strokeLinejoin="round"
+			strokeWidth="2"
 		/>
 	</Fragment>,
 	'IconApproval'
@@ -22,27 +22,27 @@ export const IconUsers = createIcon(
 	<Fragment>
 		<path
 			d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21"
-			strokeWidth="2"
 			strokeLinecap="round"
 			strokeLinejoin="round"
+			strokeWidth="2"
 		/>
 		<path
 			d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z"
-			strokeWidth="2"
 			strokeLinecap="round"
 			strokeLinejoin="round"
+			strokeWidth="2"
 		/>
 		<path
 			d="M23 20.9999V18.9999C22.9993 18.1136 22.7044 17.2527 22.1614 16.5522C21.6184 15.8517 20.8581 15.3515 20 15.1299"
-			strokeWidth="2"
 			strokeLinecap="round"
 			strokeLinejoin="round"
+			strokeWidth="2"
 		/>
 		<path
 			d="M16 3.12988C16.8604 3.35018 17.623 3.85058 18.1676 4.55219C18.7122 5.2538 19.0078 6.11671 19.0078 7.00488C19.0078 7.89305 18.7122 8.75596 18.1676 9.45757C17.623 10.1592 16.8604 10.6596 16 10.8799"
-			strokeWidth="2"
 			strokeLinecap="round"
 			strokeLinejoin="round"
+			strokeWidth="2"
 		/>
 	</Fragment>,
 	'IconUsers'
diff --git a/yourgov/components/ErrorBoundary.tsx b/yourgov/components/ErrorBoundary.tsx
index fe9ee912af56..f7b5d6bcade0 100644
--- a/yourgov/components/ErrorBoundary.tsx
+++ b/yourgov/components/ErrorBoundary.tsx
@@ -39,7 +39,7 @@ export function ErrorBoundaryPageFallback() {
 	const { reload } = useRouter();
 	return (
 		<PageContent>
-			<Stack gap={2} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={2}>
 				<Stack gap={1.5}>
 					<H1>An error occurred</H1>
 					<Text as="p">Something went wrong.</Text>
diff --git a/yourgov/components/FormMobileFoodVendorPermit/ApplicationHistory.tsx b/yourgov/components/FormMobileFoodVendorPermit/ApplicationHistory.tsx
index f62b9f7115a4..647ba0b6a223 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/ApplicationHistory.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/ApplicationHistory.tsx
@@ -88,14 +88,14 @@ export function ApplicationHistory() {
 										) : application?.completed ? (
 											<StatusBadge
 												appearance="subtle"
-												tone="successMedium"
 												label="Submitted"
+												tone="successMedium"
 											/>
 										) : (
 											<StatusBadge
 												appearance="subtle"
-												tone="inProgressLow"
 												label="In progress"
+												tone="inProgressLow"
 											/>
 										)}
 									</TableCell>
@@ -120,17 +120,17 @@ export function ApplicationHistory() {
 				</Table>
 			</TableWrapper>
 			<Modal
-				isOpen={isModalOpen}
-				onClose={closeModal}
-				title="Are you sure you want to remove this application?"
 				actions={
 					<ButtonGroup>
 						<Button onClick={closeModal}>Yes, remove</Button>
-						<Button variant="secondary" onClick={closeModal}>
+						<Button onClick={closeModal} variant="secondary">
 							No
 						</Button>
 					</ButtonGroup>
 				}
+				isOpen={isModalOpen}
+				onClose={closeModal}
+				title="Are you sure you want to remove this application?"
 			>
 				<Text as="p">
 					Note: this is for demonstration purposes only and does not function.
diff --git a/yourgov/components/FormMobileFoodVendorPermit/CannotStartAlert.tsx b/yourgov/components/FormMobileFoodVendorPermit/CannotStartAlert.tsx
index ed67de87d81d..9795d56f071a 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/CannotStartAlert.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/CannotStartAlert.tsx
@@ -4,12 +4,12 @@ import { Text } from '@ag.ds-next/react/text';
 export function CannotStartAlert() {
 	return (
 		<PageAlert
-			tone="warning"
 			title={
 				<PageAlertTitle as="h2">
 					This section of the form is not ready to be completed
 				</PageAlertTitle>
 			}
+			tone="warning"
 		>
 			<Text as="p">
 				Before starting this part of the form, you will need to go back and
diff --git a/yourgov/components/FormMobileFoodVendorPermit/FormContainer.tsx b/yourgov/components/FormMobileFoodVendorPermit/FormContainer.tsx
index 73c23c9b52a7..9819ecb57dbf 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/FormContainer.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/FormContainer.tsx
@@ -32,12 +32,12 @@ export function FormContainer({
 	return (
 		<Stack gap={3} width="100%">
 			<FormStepTitle
-				titleRef={titleRef}
-				formTitle={formTitle}
-				stepTitle={title}
-				introduction={introduction}
 				callToAction={callToAction}
+				formTitle={formTitle}
 				hideRequiredFieldsMessage={hideRequiredFieldsMessage}
+				introduction={introduction}
+				stepTitle={title}
+				titleRef={titleRef}
 			/>
 			{children}
 		</Stack>
diff --git a/yourgov/components/FormMobileFoodVendorPermit/GettingStartedForm.tsx b/yourgov/components/FormMobileFoodVendorPermit/GettingStartedForm.tsx
index 7d4bc145cbbf..bf1b084c3ff5 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/GettingStartedForm.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/GettingStartedForm.tsx
@@ -49,18 +49,18 @@ export function GettingStartedForm() {
 	return (
 		<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)}>
 			<ControlGroup
-				label="What type of business do you operate?"
+				block
 				invalid={Boolean(errors.businessType?.message)}
+				label="What type of business do you operate?"
 				message={errors.businessType?.message}
 				required
-				block
 			>
 				{['Food truck', 'Market stall', 'Coffee van'].map((option) => (
 					<Radio
-						key={option}
 						{...register('businessType')}
-						value={option}
 						invalid={Boolean(errors.businessType?.message)}
+						key={option}
+						value={option}
 					>
 						{option}
 					</Radio>
diff --git a/yourgov/components/FormMobileFoodVendorPermit/StepActions.tsx b/yourgov/components/FormMobileFoodVendorPermit/StepActions.tsx
index 0569db6149e1..d232b246194c 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/StepActions.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/StepActions.tsx
@@ -18,34 +18,34 @@ export function StepActions({ submitText = 'Save and continue' }) {
 			<Stack gap={3}>
 				<Divider />
 				<ButtonGroup>
-					<Button type="submit" variant="primary" loading={isSubmittingStep}>
+					<Button loading={isSubmittingStep} type="submit" variant="primary">
 						{submitText}
 					</Button>
 					<Button
-						type="submit"
-						variant="secondary"
 						loading={isSavingBeforeExiting}
 						onClick={saveAndExit}
+						type="submit"
+						variant="secondary"
 					>
 						Save and exit
 					</Button>
-					<Button type="button" variant="tertiary" onClick={openModal}>
+					<Button onClick={openModal} type="button" variant="tertiary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			</Stack>
 			<Modal
-				isOpen={isModalOpen}
-				onClose={closeModal}
-				title="Are you sure you want to cancel?"
 				actions={
 					<ButtonGroup>
 						<Button onClick={cancel}>Yes, cancel</Button>
-						<Button variant="secondary" onClick={closeModal}>
+						<Button onClick={closeModal} variant="secondary">
 							No, take me back
 						</Button>
 					</ButtonGroup>
 				}
+				isOpen={isModalOpen}
+				onClose={closeModal}
+				title="Are you sure you want to cancel?"
 			>
 				<Text as="p">
 					If you cancel, you will lose all information entered.
diff --git a/yourgov/components/FormMobileFoodVendorPermit/UploadFileTable.tsx b/yourgov/components/FormMobileFoodVendorPermit/UploadFileTable.tsx
index 4f93f9d0555b..bb66a9860815 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/UploadFileTable.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/UploadFileTable.tsx
@@ -76,8 +76,8 @@ export const UploadFileTable = forwardRef<
 									<TableCell>
 										{error ? (
 											<StatusBadge
-												label="File missing"
 												appearance="subtle"
+												label="File missing"
 												tone="errorHigh"
 											/>
 										) : (
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormContainer.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormContainer.tsx
index d016d6f65d6c..027640bfd455 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormContainer.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormContainer.tsx
@@ -67,16 +67,16 @@ export function FormContainer({
 				</ContentBleed>
 			</Column>
 			<Column columnSpan={{ xs: 12, md: 8 }} columnStart={{ lg: 5 }}>
-				<Stack gap={3} alignItems="flex-start">
+				<Stack alignItems="flex-start" gap={3}>
 					<DirectionLink direction="left" href={backHref}>
 						Back
 					</DirectionLink>
 					<GlobalFormContainer
-						title={formTitle}
-						introduction={formIntroduction}
 						callToAction={formCallToAction}
 						hideRequiredFieldsMessage={hideRequiredFieldsMessage}
+						introduction={formIntroduction}
 						shouldFocusTitle={shouldFocusTitle}
+						title={formTitle}
 					>
 						{children}
 					</GlobalFormContainer>
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep1.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep1.tsx
index 7c8c6a65c7c3..d4160f5d9c31 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep1.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep1.tsx
@@ -36,14 +36,14 @@ export function FormStep1() {
 
 	return (
 		<FormContainer
-			formTitle="Owner details"
 			formIntroduction="Confirm your name and contact details."
+			formTitle="Owner details"
 			shouldFocusTitle={!isSuccessMessageVisible}
 		>
 			<Stack gap={3}>
 				<FormStack>
 					<H2>Confirm business owner details</H2>
-					<Details label="How were my details prefilled?" iconBefore>
+					<Details iconBefore label="How were my details prefilled?">
 						<Prose>
 							<p>
 								We’re working hard to improve the way we do business with you.
@@ -64,9 +64,9 @@ export function FormStep1() {
 					{isSuccessMessageVisible && (
 						<SectionAlert
 							focusOnMount
+							onClose={() => setIsSuccessMessageVisible(false)}
 							title="Business owner details have been updated"
 							tone="success"
-							onClose={() => setIsSuccessMessageVisible(false)}
 						/>
 					)}
 					<Stack gap={1.5}>
@@ -140,13 +140,13 @@ function AdditionalDetailsForm() {
 			<FormStack>
 				<H2>Additional details</H2>
 				<TextInput
+					{...register('contactPhoneNumber')}
 					autoComplete="tel"
-					label="Contact phone number"
 					hint="Any Australian mobile or landline. For example, 0444111222 or 02 9988 7766"
 					id="contactPhoneNumber"
-					{...register('contactPhoneNumber')}
-					message={errors.contactPhoneNumber?.message}
 					invalid={Boolean(errors.contactPhoneNumber)}
+					label="Contact phone number"
+					message={errors.contactPhoneNumber?.message}
 				/>
 			</FormStack>
 			<StepActions />
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep10.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep10.tsx
index e9d2ca810e55..19ca35b0e742 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep10.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep10.tsx
@@ -45,14 +45,14 @@ export function FormStep10() {
 
 	return (
 		<FormContainer
-			formTitle="Review and submit"
 			formIntroduction="Check and confirm all details on this page."
+			formTitle="Review and submit"
 			hideRequiredFieldsMessage
 		>
 			{canConfirmAndSubmit ? (
 				<Fragment>
 					<FormStep10Review />
-					<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+					<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 						<FormStack>
 							<H2>Declaration</H2>
 							<Text as="p">
@@ -71,6 +71,7 @@ export function FormStep10() {
 								to continue.
 							</Text>
 							<ControlGroup
+								block
 								id="checkbox"
 								invalid={
 									hasMultipleErrors ||
@@ -88,7 +89,6 @@ export function FormStep10() {
 										  errors.declaration3?.message
 								}
 								required
-								block
 							>
 								<Checkbox {...register('declaration1')}>
 									I have read, understood and agree to be bound by the Terms of
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep10Review.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep10Review.tsx
index 6aee8fb6377e..567549b7014b 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep10Review.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep10Review.tsx
@@ -81,7 +81,7 @@ export function FormStep10Review() {
 					<ValidateSectionAlert />
 				)}
 
-				<ButtonLink alignSelf="start" variant="text" href={formSteps[0].href}>
+				<ButtonLink alignSelf="start" href={formSteps[0].href} variant="text">
 					Change owner details
 				</ButtonLink>
 			</Stack>
@@ -118,7 +118,7 @@ export function FormStep10Review() {
 				) : (
 					<ValidateSectionAlert />
 				)}
-				<ButtonLink alignSelf="start" variant="text" href={formSteps[1].href}>
+				<ButtonLink alignSelf="start" href={formSteps[1].href} variant="text">
 					Change business details
 				</ButtonLink>
 			</Stack>
@@ -129,11 +129,11 @@ export function FormStep10Review() {
 				{validation.step3.success ? (
 					<FormDefinitionList>
 						<FormDefinitionListItemAddress
-							label="Street address"
 							address={formState.steps?.step3?.streetAddress}
-							suburb={formState.steps?.step3?.suburbTownCity}
-							state={formState.steps?.step3?.state}
+							label="Street address"
 							postcode={formState.steps?.step3?.postcode}
+							state={formState.steps?.step3?.state}
+							suburb={formState.steps?.step3?.suburbTownCity}
 						/>
 						{formState.steps?.step3?.isPostalAddressSameAsBusinessAddress ? (
 							<FormDefinitionListItem
@@ -142,18 +142,18 @@ export function FormStep10Review() {
 							/>
 						) : (
 							<FormDefinitionListItemAddress
-								label="Postal address"
 								address={formState.steps?.step3?.postalAddress}
-								suburb={formState.steps?.step3?.postalSuburbTownCity}
-								state={formState.steps?.step3?.postalState}
+								label="Postal address"
 								postcode={formState.steps?.step3?.postalPostcode}
+								state={formState.steps?.step3?.postalState}
+								suburb={formState.steps?.step3?.postalSuburbTownCity}
 							/>
 						)}
 					</FormDefinitionList>
 				) : (
 					<ValidateSectionAlert />
 				)}
-				<ButtonLink alignSelf="start" variant="text" href={formSteps[2].href}>
+				<ButtonLink alignSelf="start" href={formSteps[2].href} variant="text">
 					Change business address
 				</ButtonLink>
 			</Stack>
@@ -175,7 +175,7 @@ export function FormStep10Review() {
 				) : (
 					<ValidateSectionAlert />
 				)}
-				<ButtonLink alignSelf="start" variant="text" href={formSteps[3].href}>
+				<ButtonLink alignSelf="start" href={formSteps[3].href} variant="text">
 					Change vehicle registration
 				</ButtonLink>
 			</Stack>
@@ -199,7 +199,7 @@ export function FormStep10Review() {
 				) : (
 					<ValidateSectionAlert />
 				)}
-				<ButtonLink alignSelf="start" variant="text" href={formSteps[4].href}>
+				<ButtonLink alignSelf="start" href={formSteps[4].href} variant="text">
 					Change trading time
 				</ButtonLink>
 			</Stack>
@@ -219,7 +219,7 @@ export function FormStep10Review() {
 				) : (
 					<ValidateSectionAlert />
 				)}
-				<ButtonLink alignSelf="start" variant="text" href={formSteps[5].href}>
+				<ButtonLink alignSelf="start" href={formSteps[5].href} variant="text">
 					Change food served
 				</ButtonLink>
 			</Stack>
@@ -254,7 +254,7 @@ export function FormStep10Review() {
 				) : (
 					<ValidateSectionAlert />
 				)}
-				<ButtonLink alignSelf="start" variant="text" href={formSteps[6].href}>
+				<ButtonLink alignSelf="start" href={formSteps[6].href} variant="text">
 					Change employees
 				</ButtonLink>
 			</Stack>
@@ -272,7 +272,7 @@ export function FormStep10Review() {
 				) : (
 					<ValidateSectionAlert />
 				)}
-				<ButtonLink alignSelf="start" variant="text" href={formSteps[7].href}>
+				<ButtonLink alignSelf="start" href={formSteps[7].href} variant="text">
 					Change food safety supervisor
 				</ButtonLink>
 			</Stack>
@@ -310,7 +310,7 @@ export function FormStep10Review() {
 				) : (
 					<ValidateSectionAlert />
 				)}
-				<ButtonLink alignSelf="start" variant="text" href={formSteps[8].href}>
+				<ButtonLink alignSelf="start" href={formSteps[8].href} variant="text">
 					Change documents
 				</ButtonLink>
 			</Stack>
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep1ChangeDetails.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep1ChangeDetails.tsx
index 486667e35ddc..d4e270150a62 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep1ChangeDetails.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep1ChangeDetails.tsx
@@ -96,15 +96,15 @@ export function FormStep1ChangeDetails() {
 				/>
 			</Column>
 			<Column columnSpan={{ xs: 12, md: 8 }} columnStart={{ lg: 5 }}>
-				<Stack gap={3} alignItems="flex-start">
+				<Stack alignItems="flex-start" gap={3}>
 					<DirectionLink direction="left" href={step1Path}>
 						Back
 					</DirectionLink>
 					<Stack gap={1.5}>
-						<H1 ref={titleRef} tabIndex={-1} focusRingFor="keyboard">
+						<H1 focusRingFor="keyboard" ref={titleRef} tabIndex={-1}>
 							Change business owner details
 						</H1>
-						<Text as="p" fontSize="md" color="muted">
+						<Text as="p" color="muted" fontSize="md">
 							Change your name and contact details.
 						</Text>
 						<FormRequiredFieldsMessage />
@@ -113,49 +113,49 @@ export function FormStep1ChangeDetails() {
 						<Stack
 							as="form"
 							gap={3}
-							onSubmit={handleSubmit(onSubmit)}
 							noValidate
+							onSubmit={handleSubmit(onSubmit)}
 						>
 							<FormStack>
 								{showErrorAlert && <FormPageAlert errors={errors} />}
 								<TextInput
-									label="First name"
-									autoComplete="given-name"
 									{...register('firstName')}
+									autoComplete="given-name"
 									id="firstName"
 									invalid={Boolean(errors.firstName?.message)}
-									message={errors.firstName?.message}
+									label="First name"
 									maxWidth="lg"
+									message={errors.firstName?.message}
 									required
 								/>
 								<TextInput
-									label="Last name"
-									autoComplete="family-name"
 									{...register('lastName')}
+									autoComplete="family-name"
 									id="lastName"
 									invalid={Boolean(errors.lastName?.message)}
-									message={errors.lastName?.message}
+									label="Last name"
 									maxWidth="lg"
+									message={errors.lastName?.message}
 									required
 								/>
 								<TextInput
-									label="Email address"
-									type="email"
-									autoComplete="email"
 									{...register('email')}
+									autoComplete="email"
 									id="email"
 									invalid={Boolean(errors.email?.message)}
-									message={errors.email?.message}
+									label="Email address"
 									maxWidth="xl"
+									message={errors.email?.message}
 									required
+									type="email"
 								/>
 							</FormStack>
 							<Divider />
 							<ButtonGroup>
-								<Button type="submit" loading={isSaving}>
+								<Button loading={isSaving} type="submit">
 									Save changes
 								</Button>
-								<Button variant="tertiary" onClick={onCancelClick}>
+								<Button onClick={onCancelClick} variant="tertiary">
 									Cancel
 								</Button>
 							</ButtonGroup>
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep2.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep2.tsx
index 6f6db39340e1..470e4a0e25ef 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep2.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep2.tsx
@@ -55,40 +55,40 @@ export function FormStep2() {
 
 	return (
 		<FormContainer
-			formTitle="Business details"
 			formIntroduction="Your business details must match your business registration."
+			formTitle="Business details"
 		>
-			<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 				<FormStack>
 					{showErrorAlert && <FormPageAlert errors={errors} />}
 					<TextInput
+						{...register('businessName')}
 						autoComplete="organization"
 						id="businessName"
-						label="Business or company name"
-						{...register('businessName')}
 						invalid={Boolean(errors.businessName?.message)}
+						label="Business or company name"
+						maxWidth="xl"
 						message={errors.businessName?.message}
 						required
-						maxWidth="xl"
 					/>
 
 					<TextInput
+						{...register('tradingName')}
 						autoComplete="on"
 						id="tradingName"
-						label="Trading name"
-						{...register('tradingName')}
 						invalid={Boolean(errors.tradingName?.message)}
-						message={errors.tradingName?.message}
+						label="Trading name"
 						maxWidth="xl"
+						message={errors.tradingName?.message}
 					/>
 
 					<ControlGroup
+						block
 						id="businessStructure"
-						label="Business structure"
 						invalid={Boolean(errors.businessStructure)}
+						label="Business structure"
 						message={errors.businessStructure?.message}
 						required
-						block
 					>
 						<Radio {...register('businessStructure')} value="Business">
 							Business
@@ -96,11 +96,11 @@ export function FormStep2() {
 						{showAbn ? (
 							<ConditionalFieldContainer>
 								<TextInput
+									{...register('abn')}
 									autoComplete="on"
 									id="abn"
-									label="Australian Business Number (ABN)"
-									{...register('abn')}
 									invalid={Boolean(errors.abn?.message)}
+									label="Australian Business Number (ABN)"
 									message={errors.abn?.message}
 									required
 								/>
@@ -112,11 +112,11 @@ export function FormStep2() {
 						{showAcn ? (
 							<ConditionalFieldContainer>
 								<TextInput
+									{...register('acn')}
 									autoComplete="on"
 									id="acn"
-									label="Australian Company Number (ACN)"
-									{...register('acn')}
 									invalid={Boolean(errors.acn?.message)}
+									label="Australian Company Number (ACN)"
 									message={errors.acn?.message}
 									required
 								/>
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep3.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep3.tsx
index 529bfa795f7e..9a967ceaf60d 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep3.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep3.tsx
@@ -51,40 +51,42 @@ export function FormStep3() {
 
 	return (
 		<FormContainer
-			formTitle="Business address"
 			formIntroduction="Add your business address."
+			formTitle="Business address"
 		>
-			<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 				{showErrorAlert && <FormPageAlert errors={errors} />}
 				<FormStack>
 					<Fieldset legend={<H2>Business address</H2>}>
 						<FormStack>
 							<TextInput
-								autoComplete="on"
-								label="Street address"
 								{...register('streetAddress')}
+								autoComplete="on"
 								id="streetAddress"
 								invalid={Boolean(errors.streetAddress?.message)}
+								label="Street address"
+								maxWidth="xl"
 								message={errors.streetAddress?.message}
 								required
-								maxWidth="xl"
 							/>
 							<TextInput
-								autoComplete="on"
-								label="Suburb, town or city"
 								{...register('suburbTownCity')}
+								autoComplete="on"
 								id="suburbTownCity"
 								invalid={Boolean(errors.suburbTownCity?.message)}
+								label="Suburb, town or city"
+								maxWidth="lg"
 								message={errors.suburbTownCity?.message}
 								required
-								maxWidth="lg"
 							/>
 							<Select
-								autoComplete="on"
-								label="State or territory"
 								{...register('state')}
+								autoComplete="on"
 								id="state"
-								placeholder="Select"
+								invalid={Boolean(errors.state?.message)}
+								label="State or territory"
+								maxWidth="sm"
+								message={errors.state?.message}
 								options={[
 									{ label: 'NSW', value: 'nsw' },
 									{ label: 'QLD', value: 'qld' },
@@ -95,20 +97,18 @@ export function FormStep3() {
 									{ label: 'SA', value: 'sa' },
 									{ label: 'WA', value: 'wa' },
 								]}
-								invalid={Boolean(errors.state?.message)}
-								message={errors.state?.message}
+								placeholder="Select"
 								required
-								maxWidth="sm"
 							/>
 							<TextInput
-								autoComplete="on"
-								label="Postcode"
 								{...register('postcode')}
+								autoComplete="on"
 								id="postcode"
+								inputMode="numeric"
 								invalid={Boolean(errors.postcode?.message)}
-								message={errors.postcode?.message}
+								label="Postcode"
 								maxWidth="sm"
-								inputMode="numeric"
+								message={errors.postcode?.message}
 								pattern="[0-9]*"
 								required
 							/>
@@ -127,31 +127,33 @@ export function FormStep3() {
 							{!isPostalAddressSameAsBusinessAddress && (
 								<FormStack>
 									<TextInput
-										autoComplete="on"
-										label="Postal address"
 										{...register('postalAddress')}
+										autoComplete="on"
 										id="postalAddress"
 										invalid={Boolean(errors.postalAddress?.message)}
+										label="Postal address"
+										maxWidth="xl"
 										message={errors.postalAddress?.message}
 										required
-										maxWidth="xl"
 									/>
 									<TextInput
-										autoComplete="on"
-										label="Suburb, town or city"
 										{...register('postalSuburbTownCity')}
+										autoComplete="on"
 										id="postalSuburbTownCity"
 										invalid={Boolean(errors.postalSuburbTownCity?.message)}
+										label="Suburb, town or city"
+										maxWidth="lg"
 										message={errors.postalSuburbTownCity?.message}
 										required
-										maxWidth="lg"
 									/>
 									<Select
-										autoComplete="on"
-										label="State or territory"
 										{...register('postalState')}
+										autoComplete="on"
 										id="postalState"
-										placeholder="Select"
+										invalid={Boolean(errors.postalState?.message)}
+										label="State or territory"
+										maxWidth="sm"
+										message={errors.postalState?.message}
 										options={[
 											{ label: 'NSW', value: 'nsw' },
 											{ label: 'QLD', value: 'qld' },
@@ -162,22 +164,20 @@ export function FormStep3() {
 											{ label: 'SA', value: 'sa' },
 											{ label: 'WA', value: 'wa' },
 										]}
-										invalid={Boolean(errors.postalState?.message)}
-										message={errors.postalState?.message}
+										placeholder="Select"
 										required
-										maxWidth="sm"
 									/>
 									<TextInput
-										autoComplete="on"
-										label="Postcode"
 										{...register('postalPostcode')}
+										autoComplete="on"
 										id="postalPostcode"
+										inputMode="numeric"
 										invalid={Boolean(errors.postalPostcode?.message)}
-										message={errors.postalPostcode?.message}
+										label="Postcode"
 										maxWidth="sm"
-										required
-										inputMode="numeric"
+										message={errors.postalPostcode?.message}
 										pattern="[0-9]*"
+										required
 									/>
 								</FormStack>
 							)}
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep4.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep4.tsx
index 550c3e7a01cd..a799e7b97a1c 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep4.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep4.tsx
@@ -53,19 +53,19 @@ export function FormStep4() {
 
 	return (
 		<FormContainer
-			formTitle="Vehicle registration"
 			formIntroduction="Add your vehicle registration details."
+			formTitle="Vehicle registration"
 		>
-			<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 				<FormStack>
 					{showErrorAlert && <FormPageAlert errors={errors} />}
 					<TextInput
+						{...register('registrationNumber')}
 						autoComplete="on"
-						label="Vehicle registration number"
 						hint="Enter a plate number, maximum 6 characters. For example ABC123."
 						id="registrationNumber"
-						{...register('registrationNumber')}
 						invalid={Boolean(errors.registrationNumber?.message)}
+						label="Vehicle registration number"
 						message={errors.registrationNumber?.message}
 						required
 					/>
@@ -74,11 +74,11 @@ export function FormStep4() {
 						name="registrationExpiry"
 						render={({ field: { ref, ...field } }) => (
 							<DatePicker
-								inputRef={ref}
-								label="Registration expiry date"
 								{...field}
 								id="registrationExpiry"
+								inputRef={ref}
 								invalid={Boolean(errors.registrationExpiry?.message)}
+								label="Registration expiry date"
 								message={errors.registrationExpiry?.message}
 								required
 							/>
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep5.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep5.tsx
index ec182a99f76a..df56478b1b69 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep5.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep5.tsx
@@ -109,10 +109,10 @@ export function FormStep5() {
 
 	return (
 		<FormContainer
-			formTitle="Trading time"
 			formIntroduction="What times would you like to operate?"
+			formTitle="Trading time"
 		>
-			<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 				<FormStack>
 					{showErrorAlert && (
 						<FormPageAlert
@@ -145,37 +145,37 @@ export function FormStep5() {
 						name="tradingPeriod"
 						render={({ field: { ref, value, onChange, ...field } }) => (
 							<DateRangePicker
-								fromInputRef={tradingPeriodFromRef}
-								toInputRef={tradingPeriodToRef}
 								{...field}
-								id="tradingPeriod"
-								legend="Trading period"
-								value={value}
-								onChange={onChange}
-								onFromInputChange={(from) => onChange({ ...value, from })}
-								onToInputChange={(to) => onChange({ ...value, to })}
+								fromInputRef={tradingPeriodFromRef}
 								fromInvalid={
 									hasErrors.tradingPeriod.both || hasErrors.tradingPeriod.from
 								}
-								toInvalid={
-									hasErrors.tradingPeriod.both || hasErrors.tradingPeriod.to
-								}
+								id="tradingPeriod"
+								legend="Trading period"
 								message={
 									hasErrors.tradingPeriod.both
 										? 'Start date and End date is required'
 										: errors.tradingPeriod?.from?.message ||
 										  errors.tradingPeriod?.to?.message
 								}
+								onChange={onChange}
+								onFromInputChange={(from) => onChange({ ...value, from })}
+								onToInputChange={(to) => onChange({ ...value, to })}
 								required
+								toInputRef={tradingPeriodToRef}
+								toInvalid={
+									hasErrors.tradingPeriod.both || hasErrors.tradingPeriod.to
+								}
+								value={value}
 							/>
 						)}
 					/>
 					<GroupedFields
-						legend="Hours of operation"
-						hideOptionalLabel
-						hint="Provide the time you will open and close. For example, 3:00 pm - enter 12 am for midnight"
 						field1Invalid={hasErrors.hours.both || hasErrors.hours.from}
 						field2Invalid={hasErrors.hours.both || hasErrors.hours.to}
+						hideOptionalLabel
+						hint="Provide the time you will open and close. For example, 3:00 pm - enter 12 am for midnight"
+						legend="Hours of operation"
 						message={
 							hasErrors.hours.both
 								? 'Opening time and Closing time is required'
@@ -190,12 +190,12 @@ export function FormStep5() {
 									name="openingTime"
 									render={({ field: { ref, ...field } }) => (
 										<TimeInput
+											{...field}
+											{...field1Props}
 											autoComplete="on"
-											label="Opening time"
 											id="openingTime"
+											label="Opening time"
 											ref={ref}
-											{...field}
-											{...field1Props}
 											required
 										/>
 									)}
@@ -205,12 +205,12 @@ export function FormStep5() {
 									name="closingTime"
 									render={({ field: { ref, ...field } }) => (
 										<TimeInput
+											{...field}
+											{...field2Props}
 											autoComplete="on"
-											label="Closing time"
 											id="closingTime"
+											label="Closing time"
 											ref={ref}
-											{...field}
-											{...field2Props}
 											required
 										/>
 									)}
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep6.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep6.tsx
index a45e91c40064..706a2e7a6a4b 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep6.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep6.tsx
@@ -40,26 +40,26 @@ export function FormStep6() {
 
 	return (
 		<FormContainer
-			formTitle="Food served"
 			formIntroduction="What type of food will you be serving?"
+			formTitle="Food served"
 		>
-			<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 				<Controller
 					control={control}
 					name="foodServed"
 					render={({ field: { ref, ...field } }) => (
 						<ComboboxMulti
-							label="Select food types"
-							hint="Start typing to see results. You can add multiple selections."
-							inputRef={ref}
-							options={foodOptions}
-							required
 							{...field}
+							block={false}
+							hint="Start typing to see results. You can add multiple selections."
 							id="foodServed"
+							inputRef={ref}
 							invalid={Boolean(typeCorrectedErrors.foodServed?.message)}
-							message={typeCorrectedErrors.foodServed?.message}
+							label="Select food types"
 							maxWidth="xl"
-							block={false}
+							message={typeCorrectedErrors.foodServed?.message}
+							options={foodOptions}
+							required
 						/>
 					)}
 				/>
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep7.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep7.tsx
index 131de89f0d75..d8052e9592d6 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep7.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep7.tsx
@@ -230,7 +230,7 @@ export function FormStep7() {
 					Add employee
 				</ButtonLink>
 			</Stack>
-			<form onSubmit={onSubmit} noValidate>
+			<form noValidate onSubmit={onSubmit}>
 				<StepActions />
 			</form>
 			<Modal
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep7AddEmployee.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep7AddEmployee.tsx
index e9dd82729dad..148fe2d76198 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep7AddEmployee.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep7AddEmployee.tsx
@@ -150,35 +150,35 @@ export function FormStep7AddEmployee() {
 									value={uuid.current}
 								/>
 								<TextInput
-									autoComplete="given-name"
-									label="First name"
 									{...register('employee.firstName')}
+									autoComplete="given-name"
 									id="firstName"
 									invalid={Boolean(errors?.employee?.firstName?.message)}
+									label="First name"
 									maxWidth="lg"
 									message={errors?.employee?.firstName?.message}
 									required
 								/>
 								<TextInput
-									autoComplete="family-name"
-									label="Last name"
 									{...register('employee.lastName')}
+									autoComplete="family-name"
 									id="lastName"
 									invalid={Boolean(errors?.employee?.lastName?.message)}
+									label="Last name"
 									maxWidth="lg"
 									message={errors?.employee?.lastName?.message}
 									required
 								/>
 								<TextInput
-									autoComplete="email"
-									label="Email address"
-									type="email"
 									{...register('employee.email')}
+									autoComplete="email"
 									id="email"
 									invalid={Boolean(errors?.employee?.email?.message)}
+									label="Email address"
 									maxWidth="xl"
 									message={errors?.employee?.email?.message}
 									required
+									type="email"
 								/>
 							</FormStack>
 							<Divider />
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep8.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep8.tsx
index 2ff6646de4bb..b5d95f2768d3 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep8.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep8.tsx
@@ -55,7 +55,7 @@ export function FormStep8() {
 			formIntroduction="Add your employee food safety supervisor."
 			formTitle="Food safety supervisor"
 		>
-			<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 				<ControlGroup
 					block
 					invalid={Boolean(errors.supervisor)}
diff --git a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep9.tsx b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep9.tsx
index 576a8dc73711..6df71f5a315b 100644
--- a/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep9.tsx
+++ b/yourgov/components/FormMobileFoodVendorPermit/steps/FormStep9.tsx
@@ -212,8 +212,8 @@ export function FormStep9() {
 
 	return (
 		<FormContainer
-			formTitle="Upload documents"
 			formIntroduction="Upload all documents listed in the table below."
+			formTitle="Upload documents"
 			hideRequiredFieldsMessage
 		>
 			<Stack gap={2}>
@@ -227,7 +227,7 @@ export function FormStep9() {
 							title="You must provide all documents in the table below"
 							tone="error"
 						>
-							<Stack gap={0.5} alignItems="flex-start">
+							<Stack alignItems="flex-start" gap={0.5}>
 								<UnorderedList>
 									{tableErrors.map(({ href, message }) => (
 										<ListItem key={href}>
@@ -280,12 +280,6 @@ export function FormStep9() {
 				</Stack>
 
 				<Drawer
-					isOpen={isDrawerOpen}
-					onClose={() => {
-						setCurrentDocument(undefined);
-						closeDrawerAndClearForm();
-					}}
-					title="Upload documents"
 					actions={
 						<ButtonGroup>
 							<Button form="upload-document-form" onClick={uploadFile}>
@@ -310,6 +304,12 @@ export function FormStep9() {
 							? successMessageRef.current
 							: undefined
 					}
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setCurrentDocument(undefined);
+						closeDrawerAndClearForm();
+					}}
+					title="Upload documents"
 				>
 					<Stack as="form" id="upload-document-form">
 						<FileUpload
@@ -333,7 +333,7 @@ export function FormStep9() {
 				</Drawer>
 			</Stack>
 
-			<Stack as="form" gap={3} onSubmit={onSubmit} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={onSubmit}>
 				<StepActions />
 			</Stack>
 		</FormContainer>
diff --git a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetails.tsx b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetails.tsx
index 7aae756415c7..450dc1056ce1 100644
--- a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetails.tsx
+++ b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetails.tsx
@@ -226,7 +226,7 @@ export const FormRegisterPetDetails = () => {
 					</ContentBleed>
 				</Column>
 				<Column columnSpan={{ xs: 12, md: 8 }} columnStart={{ lg: 5 }}>
-					<Stack gap={3} alignItems="flex-start">
+					<Stack alignItems="flex-start" gap={3}>
 						<DirectionButton direction="left" onClick={back}>
 							Back
 						</DirectionButton>
diff --git a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsActions.tsx b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsActions.tsx
index 5b14f1610f92..fac14d1059e6 100644
--- a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsActions.tsx
+++ b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsActions.tsx
@@ -23,34 +23,34 @@ export const FormRegisterPetDetailsActions = () => {
 			<Stack gap={3}>
 				<Divider />
 				<ButtonGroup>
-					<Button type="submit" variant="primary" loading={isSubmittingStep}>
+					<Button loading={isSubmittingStep} type="submit" variant="primary">
 						{currentStep === 4 ? 'Submit task' : 'Save and continue'}
 					</Button>
 					<Button
-						type="button"
-						variant="secondary"
 						loading={isSavingBeforeExiting}
 						onClick={saveAndExit}
+						type="button"
+						variant="secondary"
 					>
 						Save and exit
 					</Button>
-					<Button type="button" variant="tertiary" onClick={openModal}>
+					<Button onClick={openModal} type="button" variant="tertiary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			</Stack>
 			<Modal
-				isOpen={isModalOpen}
-				onClose={closeModal}
-				title="Are you sure you want to cancel?"
 				actions={
 					<ButtonGroup>
 						<Button onClick={cancel}>Yes, cancel</Button>
-						<Button variant="secondary" onClick={closeModal}>
+						<Button onClick={closeModal} variant="secondary">
 							No, take me back
 						</Button>
 					</ButtonGroup>
 				}
+				isOpen={isModalOpen}
+				onClose={closeModal}
+				title="Are you sure you want to cancel?"
 			>
 				<Text as="p">
 					If you cancel, you will lose all information entered.
diff --git a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsContainer.tsx b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsContainer.tsx
index 1d906581621b..ff358e409710 100644
--- a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsContainer.tsx
+++ b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsContainer.tsx
@@ -27,18 +27,18 @@ export const FormRegisterPetDetailsContainer = ({
 	return (
 		<Stack gap={3} width="100%">
 			<FormStepTitle
-				titleRef={titleRef}
+				callToAction={hasCompletedPreviousStep ? callToAction : undefined}
 				formTitle="Your pet’s details"
-				stepTitle={title}
 				introduction={introduction}
-				callToAction={hasCompletedPreviousStep ? callToAction : undefined}
+				stepTitle={title}
+				titleRef={titleRef}
 			/>
 			{hasCompletedPreviousStep ? (
 				children
 			) : (
 				<PageAlert
-					tone="warning"
 					title="This section of the form is not ready to be completed"
+					tone="warning"
 				>
 					<Text as="p">
 						Before starting this part of the form, you will need to go back and
diff --git a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep0.tsx b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep0.tsx
index 3771996f7d8b..095a3c97016b 100644
--- a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep0.tsx
+++ b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep0.tsx
@@ -40,19 +40,19 @@ export const FormRegisterPetDetailsStep0 = () => {
 
 	return (
 		<FormRegisterPetDetailsContainer
-			title="Type of pet"
-			introduction="Domestic pets living in urban environments need to be registered."
 			callToAction={<FormRequiredFieldsMessage />}
+			introduction="Domestic pets living in urban environments need to be registered."
+			title="Type of pet"
 		>
-			<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 				<FormStack>
 					<ControlGroup
+						block
 						id="checkbox"
-						label="What type of animal are you registering?"
 						invalid={Boolean(errors.typeOfPet)}
+						label="What type of animal are you registering?"
 						message={errors.typeOfPet?.message}
 						required
-						block
 					>
 						<Radio {...register('typeOfPet')} value="Dog">
 							Dog
diff --git a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep1.tsx b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep1.tsx
index 6251e40c220a..9d5b6300e312 100644
--- a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep1.tsx
+++ b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep1.tsx
@@ -75,23 +75,23 @@ export const FormRegisterPetDetailsStep1 = () => {
 
 	return (
 		<FormRegisterPetDetailsContainer
-			title="Pet details"
-			introduction="Domestic pets living in urban environments need to be registered."
 			callToAction={<FormRequiredFieldsMessage />}
+			introduction="Domestic pets living in urban environments need to be registered."
+			title="Pet details"
 		>
 			<Stack
 				as="form"
 				gap={3}
-				onSubmit={handleSubmit(onSubmit, onError)}
 				noValidate
+				onSubmit={handleSubmit(onSubmit, onError)}
 			>
 				<FormStack>
 					{hasErrors && (
 						<PageAlert
 							ref={errorRef}
-							tone="error"
-							title="There is a problem"
 							tabIndex={-1}
+							title="There is a problem"
+							tone="error"
 						>
 							<Text as="p">
 								Please correct the following fields and try again
@@ -108,48 +108,48 @@ export const FormRegisterPetDetailsStep1 = () => {
 						</PageAlert>
 					)}
 					<TextInput
-						label="Pet name"
 						{...register('name')}
 						id="petName"
 						invalid={Boolean(errors.name?.message)}
-						message={errors.name?.message}
+						label="Pet name"
 						maxWidth="xl"
+						message={errors.name?.message}
 						required
 					/>
 					<Select
-						label="Breed"
 						{...register('breed')}
 						id="breed"
 						invalid={Boolean(errors.breed?.message)}
+						label="Breed"
+						maxWidth="xl"
 						message={errors.breed?.message}
-						required
-						placeholder="Please select"
 						options={DOG_BREED_OPTIONS}
-						maxWidth="xl"
+						placeholder="Please select"
+						required
 					/>
 					<Controller
 						control={control}
 						name="dob"
 						render={({ field: { ref, ...field } }) => (
 							<DatePicker
-								inputRef={ref}
-								label="Date of birth"
 								{...field}
 								id="dob"
+								inputRef={ref}
 								invalid={Boolean(errors.dob?.message)}
-								message={errors.dob?.message}
+								label="Date of birth"
 								maxWidth="xl"
+								message={errors.dob?.message}
 								required
 							/>
 						)}
 					/>
 					<ControlGroup
+						block
 						id="sex"
-						label="Sex"
 						invalid={Boolean(errors.sex)}
+						label="Sex"
 						message={errors.sex?.message}
 						required
-						block
 					>
 						<Radio {...register('sex')} value="Male">
 							Male
diff --git a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep2.tsx b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep2.tsx
index 643e4780a470..6f6e5b31ead3 100644
--- a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep2.tsx
+++ b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep2.tsx
@@ -68,23 +68,23 @@ export const FormRegisterPetDetailsStep2 = () => {
 
 	return (
 		<FormRegisterPetDetailsContainer
-			title="Proof of vaccination"
-			introduction="If you have a vaccination certificate provide it here."
 			callToAction={<FormRequiredFieldsMessage />}
+			introduction="If you have a vaccination certificate provide it here."
+			title="Proof of vaccination"
 		>
 			<Stack
 				as="form"
 				gap={3}
-				onSubmit={handleSubmit(onSubmit, onError)}
 				noValidate
+				onSubmit={handleSubmit(onSubmit, onError)}
 			>
 				<FormStack>
 					{hasErrors && (
 						<PageAlert
 							ref={errorRef}
-							tone="error"
-							title="There is a problem"
 							tabIndex={-1}
+							title="There is a problem"
+							tone="error"
 						>
 							<Text as="p">
 								Please correct the following fields and try again
@@ -109,16 +109,16 @@ export const FormRegisterPetDetailsStep2 = () => {
 						}) => (
 							<div css={{ position: 'relative' }}>
 								<FileUpload
+									accept={['image/jpeg', 'image/jpg', 'image/png']}
 									id="file"
+									invalid={invalid}
 									label="Upload an image of vaccination certificate"
-									accept={['image/jpeg', 'image/jpg', 'image/png']}
 									maxSize={2000}
-									value={value}
-									onChange={onChange}
-									onBlur={onBlur}
-									name={name}
-									invalid={invalid}
 									message={error?.message}
+									name={name}
+									onBlur={onBlur}
+									onChange={onChange}
+									value={value}
 								/>
 								{isSubmittingStep && hasFile && (
 									<LoadingBlanket label="Uploading file" />
diff --git a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep3.tsx b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep3.tsx
index 6e652250e66b..90d77cfd6be7 100644
--- a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep3.tsx
+++ b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep3.tsx
@@ -34,23 +34,23 @@ export const FormRegisterPetDetailsStep3 = () => {
 
 	return (
 		<FormRegisterPetDetailsContainer
-			title="When do you want the registration to start?"
-			introduction="Select the date you would like this registration to start. The registration will be valid for a period of 12 months from the selected date."
 			callToAction={<FormRequiredFieldsMessage />}
+			introduction="Select the date you would like this registration to start. The registration will be valid for a period of 12 months from the selected date."
+			title="When do you want the registration to start?"
 		>
-			<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+			<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 				<Controller
 					control={control}
 					name="date"
 					render={({ field: { ref, ...field } }) => (
 						<DatePicker
-							inputRef={ref}
-							label="Select a date"
 							{...field}
 							id="date"
+							inputRef={ref}
 							invalid={Boolean(errors.date?.message)}
-							message={errors.date?.message}
+							label="Select a date"
 							maxWidth="xl"
+							message={errors.date?.message}
 							required
 						/>
 					)}
diff --git a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep4.tsx b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep4.tsx
index 15087fb18dab..951b79fb7fab 100644
--- a/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep4.tsx
+++ b/yourgov/components/FormRegisterPetDetails/FormRegisterPetDetailsStep4.tsx
@@ -24,11 +24,11 @@ export const FormRegisterPetDetailsStep4 = () => {
 
 	return (
 		<FormRegisterPetDetailsContainer
-			title="Confirm and submit"
 			introduction="Check and confirm all details on this page."
+			title="Confirm and submit"
 		>
 			{/** Summary: Step 0 */}
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[0].label}</H2>
 				<FormDefinitionList>
 					<FormDefinitionListItem
@@ -36,12 +36,12 @@ export const FormRegisterPetDetailsStep4 = () => {
 						value={formState[0]?.typeOfPet}
 					/>
 				</FormDefinitionList>
-				<Button variant="text" onClick={() => goToStep(0)}>
+				<Button onClick={() => goToStep(0)} variant="text">
 					Change type of pet
 				</Button>
 			</Stack>
 			{/** Summary: Step 1 */}
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[1].label}</H2>
 				<FormDefinitionList>
 					<FormDefinitionListItem label="Pet name" value={formState[1]?.name} />
@@ -52,11 +52,11 @@ export const FormRegisterPetDetailsStep4 = () => {
 					/>
 					<FormDefinitionListItem label="Sex" value={formState[1]?.sex} />
 				</FormDefinitionList>
-				<Button variant="text" onClick={() => goToStep(1)}>
+				<Button onClick={() => goToStep(1)} variant="text">
 					Change pet details
 				</Button>
 			</Stack>
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[2].label}</H2>
 				<FormDefinitionList>
 					<FormDefinitionListItem
@@ -66,11 +66,11 @@ export const FormRegisterPetDetailsStep4 = () => {
 						}
 					/>
 				</FormDefinitionList>
-				<Button variant="text" onClick={() => goToStep(2)}>
+				<Button onClick={() => goToStep(2)} variant="text">
 					Change proof of vaccination
 				</Button>
 			</Stack>
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[3].label}</H2>
 				<FormDefinitionList>
 					<FormDefinitionListItemDate
@@ -78,7 +78,7 @@ export const FormRegisterPetDetailsStep4 = () => {
 						value={formState[3]?.date}
 					/>
 				</FormDefinitionList>
-				<Button variant="text" onClick={() => goToStep(3)}>
+				<Button onClick={() => goToStep(3)} variant="text">
 					Change registration start date
 				</Button>
 			</Stack>
diff --git a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetails.tsx b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetails.tsx
index 9bdb51907814..3c2248b63f0e 100644
--- a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetails.tsx
+++ b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetails.tsx
@@ -213,7 +213,7 @@ export const FormRegisterPetPersonalDetails = () => {
 					</ContentBleed>
 				</Column>
 				<Column columnSpan={{ xs: 12, md: 8 }} columnStart={{ lg: 5 }}>
-					<Stack gap={3} alignItems="flex-start">
+					<Stack alignItems="flex-start" gap={3}>
 						<DirectionButton direction="left" onClick={back}>
 							Back
 						</DirectionButton>
diff --git a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsActions.tsx b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsActions.tsx
index 863134b0e986..59c814c2333a 100644
--- a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsActions.tsx
+++ b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsActions.tsx
@@ -23,34 +23,34 @@ export const FormRegisterPetPersonalDetailsActions = () => {
 			<Stack gap={3}>
 				<Divider />
 				<ButtonGroup>
-					<Button type="submit" variant="primary" loading={isSubmittingStep}>
+					<Button loading={isSubmittingStep} type="submit" variant="primary">
 						{currentStep === 3 ? 'Submit task' : 'Save and continue'}
 					</Button>
 					<Button
-						type="button"
-						variant="secondary"
 						loading={isSavingBeforeExiting}
 						onClick={saveAndExit}
+						type="button"
+						variant="secondary"
 					>
 						Save and exit
 					</Button>
-					<Button type="button" variant="tertiary" onClick={openModal}>
+					<Button onClick={openModal} type="button" variant="tertiary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			</Stack>
 			<Modal
-				isOpen={isModalOpen}
-				onClose={closeModal}
-				title="Are you sure you want to cancel?"
 				actions={
 					<ButtonGroup>
 						<Button onClick={cancel}>Yes, cancel</Button>
-						<Button variant="secondary" onClick={closeModal}>
+						<Button onClick={closeModal} variant="secondary">
 							No, take me back
 						</Button>
 					</ButtonGroup>
 				}
+				isOpen={isModalOpen}
+				onClose={closeModal}
+				title="Are you sure you want to cancel?"
 			>
 				<Text as="p">
 					If you cancel, you will lose all information entered.
diff --git a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsContainer.tsx b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsContainer.tsx
index 9923e56481d4..b23993b27266 100644
--- a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsContainer.tsx
+++ b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsContainer.tsx
@@ -28,18 +28,18 @@ export const FormRegisterPetPersonalDetailsContainer = ({
 	return (
 		<Stack gap={3} width="100%">
 			<FormStepTitle
-				titleRef={titleRef}
+				callToAction={callToAction}
 				formTitle="Your personal details"
-				stepTitle={title}
 				introduction={introduction}
-				callToAction={callToAction}
+				stepTitle={title}
+				titleRef={titleRef}
 			/>
 			{hasCompletedPreviousStep ? (
 				children
 			) : (
 				<PageAlert
-					tone="warning"
 					title="This section of the form is not ready to be completed"
+					tone="warning"
 				>
 					<Text as="p">
 						Before starting this part of the form, you will need to go back and
diff --git a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep0.tsx b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep0.tsx
index 7dc0fec957c5..dfbe7d2aaa1b 100644
--- a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep0.tsx
+++ b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep0.tsx
@@ -115,10 +115,8 @@ export const FormRegisterPetPersonalDetailsStep0 = () => {
 
 	return (
 		<FormRegisterPetPersonalDetailsContainer
-			title="Personal details"
-			introduction="Confirm if these prefilled details from your account are still correct."
 			callToAction={
-				<Details label="How were my details prefilled?" iconBefore>
+				<Details iconBefore label="How were my details prefilled?">
 					<Prose>
 						<p>
 							We’re working hard to improve the way we do business with you.
@@ -136,8 +134,10 @@ export const FormRegisterPetPersonalDetailsStep0 = () => {
 					</Prose>
 				</Details>
 			}
+			introduction="Confirm if these prefilled details from your account are still correct."
+			title="Personal details"
 		>
-			<Stack gap={3} alignItems="flex-start" width="100%">
+			<Stack alignItems="flex-start" gap={3} width="100%">
 				{isFormVisibile ? (
 					<Stack gap={1.5} width="100%">
 						<H2>Update personal details</H2>
@@ -145,16 +145,16 @@ export const FormRegisterPetPersonalDetailsStep0 = () => {
 						<Stack
 							as="form"
 							gap={3}
-							onSubmit={handleSubmit(onSave, onError)}
 							noValidate
+							onSubmit={handleSubmit(onSave, onError)}
 						>
 							<FormStack>
 								{hasErrors && (
 									<PageAlert
 										ref={errorRef}
-										tone="error"
-										title="There is a problem"
 										tabIndex={-1}
+										title="There is a problem"
+										tone="error"
 									>
 										<Text as="p">
 											Please correct the following fields and try again
@@ -173,59 +173,59 @@ export const FormRegisterPetPersonalDetailsStep0 = () => {
 									</PageAlert>
 								)}
 								<TextInput
-									label="First name"
-									autoComplete="given-name"
 									{...register('firstName')}
+									autoComplete="given-name"
+									autoFocus
 									id="firstName"
 									invalid={Boolean(errors.firstName?.message)}
-									message={errors.firstName?.message}
+									label="First name"
 									maxWidth="xl"
-									autoFocus
+									message={errors.firstName?.message}
 									required
 								/>
 								<TextInput
-									label="Last name"
-									autoComplete="family-name"
 									{...register('lastName')}
+									autoComplete="family-name"
 									id="lastName"
 									invalid={Boolean(errors.lastName?.message)}
-									message={errors.lastName?.message}
+									label="Last name"
 									maxWidth="xl"
+									message={errors.lastName?.message}
 									required
 								/>
 								<TextInput
-									label="Email"
-									type="email"
-									autoComplete="email"
 									{...register('email')}
+									autoComplete="email"
 									id="email"
 									invalid={Boolean(errors.email?.message)}
-									message={errors.email?.message}
+									label="Email"
 									maxWidth="xl"
+									message={errors.email?.message}
 									required
+									type="email"
 								/>
 								<Controller
 									control={control}
 									name="dob"
 									render={({ field: { ref, ...field } }) => (
 										<DatePicker
-											inputRef={ref}
-											label="Date of birth"
 											{...field}
 											id="dob"
+											inputRef={ref}
 											invalid={Boolean(errors.dob?.message)}
-											message={errors.dob?.message}
+											label="Date of birth"
 											maxWidth="xl"
+											message={errors.dob?.message}
 											required
 										/>
 									)}
 								/>
 							</FormStack>
 							<ButtonGroup>
-								<Button type="submit" loading={isSaving}>
+								<Button loading={isSaving} type="submit">
 									Save changes
 								</Button>
-								<Button variant="tertiary" onClick={onDiscardChangesClick}>
+								<Button onClick={onDiscardChangesClick} variant="tertiary">
 									Discard changes
 								</Button>
 							</ButtonGroup>
@@ -233,8 +233,8 @@ export const FormRegisterPetPersonalDetailsStep0 = () => {
 					</Stack>
 				) : (
 					<>
-						<Stack gap={1.5} alignItems="flex-start" width="100%">
-							<H2 ref={headingRef} tabIndex={-1} focusRingFor="keyboard">
+						<Stack alignItems="flex-start" gap={1.5} width="100%">
+							<H2 focusRingFor="keyboard" ref={headingRef} tabIndex={-1}>
 								Check personal details
 							</H2>
 							<SummaryList>
@@ -263,11 +263,11 @@ export const FormRegisterPetPersonalDetailsStep0 = () => {
 									</SummaryListItemDescription>
 								</SummaryListItem>
 							</SummaryList>
-							<Button variant="text" onClick={() => toggleFormVisibilty()}>
+							<Button onClick={() => toggleFormVisibilty()} variant="text">
 								Change personal details
 							</Button>
 						</Stack>
-						<Box as="form" width="100%" onSubmit={handleSubmit(onSubmit)}>
+						<Box as="form" onSubmit={handleSubmit(onSubmit)} width="100%">
 							<FormRegisterPetPersonalDetailsActions />
 						</Box>
 					</>
diff --git a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep1.tsx b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep1.tsx
index 1340de45071b..21aa724b7b1e 100644
--- a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep1.tsx
+++ b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep1.tsx
@@ -106,10 +106,10 @@ export const FormRegisterPetPersonalDetailsStep1 = () => {
 
 	return (
 		<FormRegisterPetPersonalDetailsContainer
-			title="Address details"
 			introduction="Provide the address details for where pet will be housed."
+			title="Address details"
 		>
-			<Stack gap={3} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={3}>
 				{isFormVisibile ? (
 					<Stack gap={1.5}>
 						<H2>Update address details</H2>
@@ -117,16 +117,16 @@ export const FormRegisterPetPersonalDetailsStep1 = () => {
 						<Stack
 							as="form"
 							gap={3}
-							onSubmit={handleSubmit(onSave, onError)}
 							noValidate
+							onSubmit={handleSubmit(onSave, onError)}
 						>
 							<FormStack>
 								{hasErrors && (
 									<PageAlert
 										ref={errorRef}
-										tone="error"
-										title="There is a problem"
 										tabIndex={-1}
+										title="There is a problem"
+										tone="error"
 									>
 										<Text as="p">
 											Please correct the following fields and try again
@@ -145,31 +145,33 @@ export const FormRegisterPetPersonalDetailsStep1 = () => {
 									</PageAlert>
 								)}
 								<TextInput
-									label="Street address"
-									autoComplete="street-address"
 									{...register('streetAddress')}
+									autoComplete="street-address"
+									autoFocus
 									id="streetAddress"
 									invalid={Boolean(errors.streetAddress?.message)}
-									message={errors.streetAddress?.message}
+									label="Street address"
 									maxWidth="xl"
-									autoFocus
+									message={errors.streetAddress?.message}
 									required
 								/>
 								<TextInput
-									label="Suburb, town or city"
-									autoComplete="address-level2"
 									{...register('suburbTownCity')}
+									autoComplete="address-level2"
 									id="suburbTownCity"
 									invalid={Boolean(errors.suburbTownCity?.message)}
-									message={errors.suburbTownCity?.message}
+									label="Suburb, town or city"
 									maxWidth="xl"
+									message={errors.suburbTownCity?.message}
 									required
 								/>
 								<Select
-									label="State or territory"
 									{...register('state')}
 									id="state"
-									placeholder="Select"
+									invalid={Boolean(errors.state?.message)}
+									label="State or territory"
+									maxWidth="md"
+									message={errors.state?.message}
 									options={[
 										{ label: 'NSW', value: 'nsw' },
 										{ label: 'QLD', value: 'qld' },
@@ -180,29 +182,27 @@ export const FormRegisterPetPersonalDetailsStep1 = () => {
 										{ label: 'SA', value: 'sa' },
 										{ label: 'WA', value: 'wa' },
 									]}
-									invalid={Boolean(errors.state?.message)}
-									message={errors.state?.message}
-									maxWidth="md"
+									placeholder="Select"
 									required
 								/>
 								<TextInput
-									label="Postcode"
-									inputMode="numeric"
-									pattern="[0-9]*"
-									autoComplete="postal-code"
 									{...register('postcode')}
+									autoComplete="postal-code"
 									id="postcode"
+									inputMode="numeric"
 									invalid={Boolean(errors.postcode?.message)}
-									message={errors.postcode?.message}
+									label="Postcode"
 									maxWidth="sm"
+									message={errors.postcode?.message}
+									pattern="[0-9]*"
 									required
 								/>
 							</FormStack>
 							<ButtonGroup>
-								<Button type="submit" loading={isSaving}>
+								<Button loading={isSaving} type="submit">
 									Save changes
 								</Button>
-								<Button variant="tertiary" onClick={onDiscardChangesClick}>
+								<Button onClick={onDiscardChangesClick} variant="tertiary">
 									Discard changes
 								</Button>
 							</ButtonGroup>
@@ -210,8 +210,8 @@ export const FormRegisterPetPersonalDetailsStep1 = () => {
 					</Stack>
 				) : (
 					<>
-						<Stack gap={1.5} alignItems="flex-start" width="100%">
-							<H2 ref={headingRef} tabIndex={-1} focusRingFor="keyboard">
+						<Stack alignItems="flex-start" gap={1.5} width="100%">
+							<H2 focusRingFor="keyboard" ref={headingRef} tabIndex={-1}>
 								Check address details
 							</H2>
 							<SummaryList>
@@ -242,11 +242,11 @@ export const FormRegisterPetPersonalDetailsStep1 = () => {
 									</SummaryListItemDescription>
 								</SummaryListItem>
 							</SummaryList>
-							<Button variant="text" onClick={() => toggleFormVisibilty()}>
+							<Button onClick={toggleFormVisibilty} variant="text">
 								Change address
 							</Button>
 						</Stack>
-						<Box as="form" width="100%" onSubmit={handleSubmit(onSubmit)}>
+						<Box as="form" onSubmit={handleSubmit(onSubmit)} width="100%">
 							<FormRegisterPetPersonalDetailsActions />
 						</Box>
 					</>
diff --git a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep2.tsx b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep2.tsx
index 722778409510..5b671f44bf66 100644
--- a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep2.tsx
+++ b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep2.tsx
@@ -80,23 +80,23 @@ export const FormRegisterPetPersonalDetailsStep2 = () => {
 
 	return (
 		<FormRegisterPetPersonalDetailsContainer
-			title="Preferred contact method"
-			introduction="We may need to contact you to check details of your application."
 			callToAction={<FormRequiredFieldsMessage />}
+			introduction="We may need to contact you to check details of your application."
+			title="Preferred contact method"
 		>
 			<Stack
 				as="form"
 				gap={3}
-				onSubmit={handleSubmit(onSubmit, onError)}
 				noValidate
+				onSubmit={handleSubmit(onSubmit, onError)}
 			>
 				<FormStack>
 					{hasErrors && (
 						<PageAlert
 							ref={errorRef}
-							tone="error"
-							title="There is a problem"
 							tabIndex={-1}
+							title="There is a problem"
+							tone="error"
 						>
 							<Text as="p">
 								Please correct the following fields and try again
@@ -113,12 +113,12 @@ export const FormRegisterPetPersonalDetailsStep2 = () => {
 						</PageAlert>
 					)}
 					<ControlGroup
+						block
 						id="checkbox"
-						label="Preferred contact method"
 						invalid={Boolean(errors.contactMethod)}
+						label="Preferred contact method"
 						message={errors.contactMethod?.message}
 						required
-						block
 					>
 						<Radio {...register('contactMethod')} value="Mail">
 							Mail
@@ -129,14 +129,14 @@ export const FormRegisterPetPersonalDetailsStep2 = () => {
 						{showConditionalField ? (
 							<ConditionalFieldContainer>
 								<TextInput
-									id="mobilePhone"
-									type="tel"
-									autoComplete="tel"
-									label="Provide mobile phone number"
 									{...register('mobileNumber')}
+									autoComplete="tel"
+									id="mobilePhone"
 									invalid={Boolean(errors.mobileNumber?.message)}
+									label="Provide mobile phone number"
 									message={errors.mobileNumber?.message}
 									required
+									type="tel"
 								/>
 							</ConditionalFieldContainer>
 						) : null}
diff --git a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep3.tsx b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep3.tsx
index cdd330dbbf8a..3e64a1050d64 100644
--- a/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep3.tsx
+++ b/yourgov/components/FormRegisterPetPersonalDetails/FormRegisterPetPersonalDetailsStep3.tsx
@@ -24,11 +24,11 @@ export const FormRegisterPetPersonalDetailsStep3 = () => {
 
 	return (
 		<FormRegisterPetPersonalDetailsContainer
-			title="Confirm and submit"
 			introduction="Check and confirm all details on this page."
+			title="Confirm and submit"
 		>
 			{/** Summary: Step 0 */}
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[0].label}</H2>
 				<FormDefinitionList>
 					<FormDefinitionListItem
@@ -45,12 +45,12 @@ export const FormRegisterPetPersonalDetailsStep3 = () => {
 						value={formState[0]?.dob}
 					/>
 				</FormDefinitionList>
-				<Button variant="text" onClick={() => goToStep(0)}>
+				<Button onClick={() => goToStep(0)} variant="text">
 					Change personal details
 				</Button>
 			</Stack>
 			{/** Summary: Step 1 */}
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[1].label}</H2>
 				<FormDefinitionList>
 					<FormDefinitionListItem
@@ -67,11 +67,11 @@ export const FormRegisterPetPersonalDetailsStep3 = () => {
 						value={formState[1]?.postcode}
 					/>
 				</FormDefinitionList>
-				<Button variant="text" onClick={() => goToStep(1)}>
+				<Button onClick={() => goToStep(1)} variant="text">
 					Change address details
 				</Button>
 			</Stack>
-			<Stack gap={1.5} alignItems="flex-start">
+			<Stack alignItems="flex-start" gap={1.5}>
 				<H2>{FORM_STEPS[2].label}</H2>
 				<FormDefinitionList>
 					<FormDefinitionListItem
@@ -86,7 +86,7 @@ export const FormRegisterPetPersonalDetailsStep3 = () => {
 					)}
 				</FormDefinitionList>
 
-				<Button variant="text" onClick={() => goToStep(2)}>
+				<Button onClick={() => goToStep(2)} variant="text">
 					Change contact method
 				</Button>
 			</Stack>
diff --git a/yourgov/components/FormRequiredFieldsMessage.tsx b/yourgov/components/FormRequiredFieldsMessage.tsx
index fa430e3f631c..1c63173f7370 100644
--- a/yourgov/components/FormRequiredFieldsMessage.tsx
+++ b/yourgov/components/FormRequiredFieldsMessage.tsx
@@ -2,7 +2,7 @@ import { Text } from '@ag.ds-next/react/text';
 
 export const FormRequiredFieldsMessage = () => {
 	return (
-		<Text as="p" fontSize="xs" color="muted">
+		<Text as="p" color="muted" fontSize="xs">
 			All fields are required unless marked optional.
 		</Text>
 	);
diff --git a/yourgov/components/FormStepTitle.tsx b/yourgov/components/FormStepTitle.tsx
index b0c32aef1641..d6ff9f086b85 100644
--- a/yourgov/components/FormStepTitle.tsx
+++ b/yourgov/components/FormStepTitle.tsx
@@ -25,15 +25,15 @@ export function FormStepTitle({
 	return (
 		<Stack gap={1.5}>
 			<H1
+				aria-label={`${formTitle} form, ${stepTitle}`}
+				focusRingFor="keyboard"
 				ref={titleRef}
 				tabIndex={-1}
-				focusRingFor="keyboard"
-				aria-label={`${formTitle} form, ${stepTitle}`}
 			>
 				<Text
+					color="muted"
 					display="block"
 					fontSize="sm"
-					color="muted"
 					fontWeight="bold"
 					lineHeight="heading"
 				>
@@ -42,7 +42,7 @@ export function FormStepTitle({
 				{stepTitle}
 			</H1>
 			{introduction ? (
-				<Text as="p" fontSize="md" color="muted">
+				<Text as="p" color="muted" fontSize="md">
 					{introduction}
 				</Text>
 			) : null}
diff --git a/yourgov/components/HelpReference.tsx b/yourgov/components/HelpReference.tsx
index 1ecdaef2a4b0..cecfb4cbbb00 100644
--- a/yourgov/components/HelpReference.tsx
+++ b/yourgov/components/HelpReference.tsx
@@ -27,16 +27,16 @@ export function HelpReference({
 				{linkContent}
 			</TextLink>
 			<Drawer
-				isOpen={drawIsOpen}
-				onClose={() => {
-					setDrawIsOpen(false);
-				}}
-				title="Help"
 				actions={
 					<TextLinkExternal href={linkHref}>
 						Open in new window
 					</TextLinkExternal>
 				}
+				isOpen={drawIsOpen}
+				onClose={() => {
+					setDrawIsOpen(false);
+				}}
+				title="Help"
 				width="lg"
 			>
 				{drawerContent}
diff --git a/yourgov/components/Layout/AppLayout.tsx b/yourgov/components/Layout/AppLayout.tsx
index 3cef4365420f..bb58f1f05b3c 100644
--- a/yourgov/components/Layout/AppLayout.tsx
+++ b/yourgov/components/Layout/AppLayout.tsx
@@ -91,7 +91,7 @@ export function AppLayout({
 					</Box>
 					<AppLayoutFooter>
 						<nav aria-label="footer">
-							<LinkList links={footerLinks} horizontal />
+							<LinkList horizontal links={footerLinks} />
 						</nav>
 						<AppLayoutFooterDivider />
 						<Text fontSize="xs" maxWidth={tokens.maxWidth.bodyText}>
@@ -124,10 +124,6 @@ function AppLayoutHeader({ user }: { user: User }) {
 
 	return (
 		<AgDSAppLayoutHeader
-			heading="yourGov"
-			subLine="Access government services from one place"
-			logo={<Logo />}
-			href="/app"
 			accountDetails={{
 				name: user.displayName,
 				secondaryText: isAppHomePage ? 'My account' : selectedBusiness?.name,
@@ -136,14 +132,14 @@ function AppLayoutHeader({ user }: { user: User }) {
 						<DropdownMenuGroup label="Businesses">
 							{linkedBusinesses.map((linkedBusiness) => (
 								<DropdownMenuItemRadio
-									key={linkedBusiness.name}
 									checked={
 										selectedBusiness?.name
 											? selectedBusiness.name === linkedBusiness.name
 											: false
 									}
-									secondaryText={`ABN ${linkedBusiness.abn}`}
+									key={linkedBusiness.name}
 									onClick={() => onBusinessClick(linkedBusiness)}
+									secondaryText={`ABN ${linkedBusiness.abn}`}
 								>
 									{linkedBusiness.name}
 								</DropdownMenuItemRadio>
@@ -167,6 +163,10 @@ function AppLayoutHeader({ user }: { user: User }) {
 					</DropdownMenuPanel>
 				),
 			}}
+			heading="yourGov"
+			href="/app"
+			logo={<Logo />}
+			subLine="Access government services from one place"
 		/>
 	);
 }
@@ -193,7 +193,7 @@ function AppLayoutSidebar() {
 					{
 						label: (
 							<Fragment>
-								<Text fontWeight="bold" fontSize="xs">
+								<Text fontSize="xs" fontWeight="bold">
 									{selectedBusiness?.name}
 								</Text>
 								<Text color="muted" fontSize="xs">
@@ -260,5 +260,5 @@ function AppLayoutSidebar() {
 		[selectedBusiness?.abn, selectedBusiness?.name]
 	);
 
-	return <AgDSAppLayoutSidebar items={links} activePath={pathname} />;
+	return <AgDSAppLayoutSidebar activePath={pathname} items={links} />;
 }
diff --git a/yourgov/components/Layout/SiteLayout.tsx b/yourgov/components/Layout/SiteLayout.tsx
index 6eef06d6c5a2..b416e3c6fe37 100644
--- a/yourgov/components/Layout/SiteLayout.tsx
+++ b/yourgov/components/Layout/SiteLayout.tsx
@@ -40,8 +40,8 @@ export const SiteLayout = ({
 			<Flex
 				flexDirection="column"
 				fontFamily="body"
-				palette="light"
 				minHeight="100vh"
+				palette="light"
 			>
 				<SiteHeader focusMode={focusMode} />
 				<Box
@@ -98,8 +98,8 @@ const SiteHeader = ({ focusMode }: { focusMode: boolean }) => {
 		<Stack palette="dark">
 			<Header
 				background="bodyAlt"
-				logo={<Logo />}
 				heading="yourGov"
+				logo={<Logo />}
 				subline="Access government services from one place"
 			/>
 			<MainNav
@@ -128,7 +128,7 @@ const SiteFooter = () => {
 		<Box palette="dark">
 			<Footer background="bodyAlt">
 				<nav aria-label="footer">
-					<LinkList links={footerLinks} horizontal />
+					<LinkList horizontal links={footerLinks} />
 				</nav>
 				<FooterDivider />
 				<Text fontSize="xs" maxWidth={tokens.maxWidth.bodyText}>
diff --git a/yourgov/components/LinkComponent.tsx b/yourgov/components/LinkComponent.tsx
index ebd7d93fda46..7137a30c794c 100644
--- a/yourgov/components/LinkComponent.tsx
+++ b/yourgov/components/LinkComponent.tsx
@@ -18,9 +18,9 @@ export const LinkComponent = forwardRef<HTMLAnchorElement, LinkComponentProps>(
 			hrefAsString &&
 			(/^(https?:\/\/|\/\/)/i.test(hrefAsString) || hrefAsString?.includes('#'))
 		) {
-			return <a ref={ref} href={hrefAsString} {...props} />;
+			return <a href={hrefAsString} ref={ref} {...props} />;
 		}
 
-		return <Link ref={ref} href={href} {...props} />;
+		return <Link href={href} ref={ref} {...props} />;
 	}
 );
diff --git a/yourgov/components/PageTitle.tsx b/yourgov/components/PageTitle.tsx
index c0ce8e99f4d1..eaafaaf106c6 100644
--- a/yourgov/components/PageTitle.tsx
+++ b/yourgov/components/PageTitle.tsx
@@ -23,8 +23,8 @@ export const PageTitle = ({
 		<Stack>
 			{pretext ? (
 				<Text
-					fontSize="sm"
 					color="muted"
+					fontSize="sm"
 					fontWeight="bold"
 					lineHeight="heading"
 				>
@@ -34,7 +34,7 @@ export const PageTitle = ({
 			{isValidElement(title) ? title : <H1>{title}</H1>}
 		</Stack>
 		{introduction ? (
-			<Text as="p" fontSize="md" color="muted">
+			<Text as="p" color="muted" fontSize="md">
 				{introduction}
 			</Text>
 		) : null}
diff --git a/yourgov/components/RegistrationsCardList.tsx b/yourgov/components/RegistrationsCardList.tsx
index df1448904513..64cf174560aa 100644
--- a/yourgov/components/RegistrationsCardList.tsx
+++ b/yourgov/components/RegistrationsCardList.tsx
@@ -44,7 +44,7 @@ export function RegistrationsCardList() {
 	return (
 		<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
 			{items.map((item) => (
-				<Card as="li" key={item.title} shadow clickable>
+				<Card as="li" clickable key={item.title} shadow>
 					<CardInner>
 						<Stack gap={1}>
 							<H3>
diff --git a/yourgov/components/Staff/AccessRequestsTable/AccessRequestsTable.tsx b/yourgov/components/Staff/AccessRequestsTable/AccessRequestsTable.tsx
index 5477c4b3ce4a..930dcae71648 100644
--- a/yourgov/components/Staff/AccessRequestsTable/AccessRequestsTable.tsx
+++ b/yourgov/components/Staff/AccessRequestsTable/AccessRequestsTable.tsx
@@ -160,11 +160,11 @@ export const AccessRequestsTable = () => {
 			</Box>
 			<Stack gap={0.5}>
 				{accessRequests.length === 0 ? (
-					<Stack gap={2} alignItems="flex-start" paddingY={1} role="status">
+					<Stack alignItems="flex-start" gap={2} paddingY={1} role="status">
 						<Stack gap={1}>
-							<AvatarIcon size="lg" color="muted" />
+							<AvatarIcon color="muted" size="lg" />
 
-							<Heading type="h3" fontSize="lg">
+							<Heading fontSize="lg" type="h3">
 								There are no access requests
 							</Heading>
 
@@ -175,10 +175,10 @@ export const AccessRequestsTable = () => {
 					<>
 						<Box css={{ marginLeft: mapSpacing(0.75) }}>
 							<Checkbox
-								size="sm"
 								checked={isSelectAllCheckboxChecked}
 								indeterminate={isSelectAllCheckboxIndeterminate}
 								onChange={onChangeSelectAllRows}
+								size="sm"
 							>
 								Select all rows
 							</Checkbox>
@@ -216,7 +216,6 @@ export const AccessRequestsTable = () => {
 											>
 												<TableCell>
 													<Checkbox
-														size="sm"
 														checked={rowSelections.includes(staffMember.id)}
 														onChange={() =>
 															setRowSelections((prevrowSelections) => {
@@ -231,6 +230,7 @@ export const AccessRequestsTable = () => {
 																	: [...prevrowSelections, staffMember.id];
 															})
 														}
+														size="sm"
 													>
 														<VisuallyHidden>{`Select ${name}`}</VisuallyHidden>
 													</Checkbox>
@@ -258,8 +258,8 @@ export const AccessRequestsTable = () => {
 												<TableCell>
 													<StatusBadge
 														appearance="subtle"
-														tone="infoMedium"
 														label={staffMember.status}
+														tone="infoMedium"
 													/>
 												</TableCell>
 
@@ -305,15 +305,15 @@ export const AccessRequestsTable = () => {
 						</TableBatchActionsTitle>
 
 						<ButtonGroup>
-							<Button variant="secondary" size="sm" onClick={openApproveModal}>
+							<Button onClick={openApproveModal} size="sm" variant="secondary">
 								Approve access
 							</Button>
 
-							<Button variant="secondary" size="sm" onClick={openRejectModal}>
+							<Button onClick={openRejectModal} size="sm" variant="secondary">
 								Reject access
 							</Button>
 
-							<Button variant="tertiary" size="sm" onClick={clearRowSelections}>
+							<Button onClick={clearRowSelections} size="sm" variant="tertiary">
 								Cancel
 							</Button>
 						</ButtonGroup>
@@ -321,8 +321,8 @@ export const AccessRequestsTable = () => {
 				)}
 
 				<ModalConfirmApproveAccess
-					itemsToApprove={itemWithActiveAction || items}
 					isOpen={isApproveModalOpen}
+					itemsToApprove={itemWithActiveAction || items}
 					onClose={() => {
 						closeApproveModal();
 						setItemWithActiveAction(undefined);
@@ -331,8 +331,8 @@ export const AccessRequestsTable = () => {
 				/>
 
 				<ModalConfirmRejectAccess
-					itemsToReject={itemWithActiveAction || items}
 					isOpen={isRejectModalOpen}
+					itemsToReject={itemWithActiveAction || items}
 					onClose={() => {
 						closeRejectModal();
 						setItemWithActiveAction(undefined);
diff --git a/yourgov/components/Staff/AccessRequestsTable/ModalConfirmApproveAccess.tsx b/yourgov/components/Staff/AccessRequestsTable/ModalConfirmApproveAccess.tsx
index d6727d3e4327..28ecaf54c982 100644
--- a/yourgov/components/Staff/AccessRequestsTable/ModalConfirmApproveAccess.tsx
+++ b/yourgov/components/Staff/AccessRequestsTable/ModalConfirmApproveAccess.tsx
@@ -45,20 +45,20 @@ export function ModalConfirmApproveAccess({
 
 	return (
 		<Modal
-			isOpen={isOpen}
-			onClose={onClose}
-			title={title}
 			actions={
 				<ButtonGroup>
 					<Button loading={submitting} onClick={onSubmit}>
 						Approve access
 					</Button>
 
-					<Button variant="secondary" onClick={onClose}>
+					<Button onClick={onClose} variant="secondary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			}
+			isOpen={isOpen}
+			onClose={onClose}
+			title={title}
 		>
 			<Text as="p">{description}</Text>
 		</Modal>
diff --git a/yourgov/components/Staff/AccessRequestsTable/ModalConfirmRejectAccess.tsx b/yourgov/components/Staff/AccessRequestsTable/ModalConfirmRejectAccess.tsx
index b8a64ee9a58a..04c507de9c5c 100644
--- a/yourgov/components/Staff/AccessRequestsTable/ModalConfirmRejectAccess.tsx
+++ b/yourgov/components/Staff/AccessRequestsTable/ModalConfirmRejectAccess.tsx
@@ -47,20 +47,20 @@ export function ModalConfirmRejectAccess({
 
 	return (
 		<Modal
-			isOpen={isOpen}
-			onClose={onClose}
-			title={title}
 			actions={
 				<ButtonGroup>
 					<Button loading={submitting} onClick={onSubmit}>
 						Reject access
 					</Button>
 
-					<Button variant="secondary" onClick={onClose}>
+					<Button onClick={onClose} variant="secondary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			}
+			isOpen={isOpen}
+			onClose={onClose}
+			title={title}
 		>
 			<Text as="p">{description}</Text>
 		</Modal>
diff --git a/yourgov/components/Staff/AccessRequestsTable/ModalUnavailableFeature.tsx b/yourgov/components/Staff/AccessRequestsTable/ModalUnavailableFeature.tsx
index 1c96004de140..1ca1cf0e0c2e 100644
--- a/yourgov/components/Staff/AccessRequestsTable/ModalUnavailableFeature.tsx
+++ b/yourgov/components/Staff/AccessRequestsTable/ModalUnavailableFeature.tsx
@@ -15,14 +15,14 @@ export const ModalUnavailableFeature = ({
 }: ModalUnavailableFeatureProps) => {
 	return (
 		<Modal
-			isOpen={isOpen}
-			onClose={onClose}
-			title="This feature is not yet available."
 			actions={
 				<ButtonGroup>
 					<Button onClick={onConfirm}>Okay</Button>
 				</ButtonGroup>
 			}
+			isOpen={isOpen}
+			onClose={onClose}
+			title="This feature is not yet available."
 		>
 			<Text as="p">Note: this is for demonstration purposes only.</Text>
 		</Modal>
diff --git a/yourgov/components/Staff/ActiveFilters.tsx b/yourgov/components/Staff/ActiveFilters.tsx
index 63b5f08c6a65..ed15984ae806 100644
--- a/yourgov/components/Staff/ActiveFilters.tsx
+++ b/yourgov/components/Staff/ActiveFilters.tsx
@@ -136,7 +136,7 @@ export const ActiveFilters = () => {
 	}
 
 	return (
-		<Flex flexWrap="wrap" gap={0.75} alignItems="flex-end">
+		<Flex alignItems="flex-end" flexWrap="wrap" gap={0.75}>
 			<Tags
 				heading={
 					<Text as="h3" fontWeight="bold">
@@ -146,10 +146,10 @@ export const ActiveFilters = () => {
 				items={tags}
 			/>
 			<Button
+				iconAfter={CloseIcon}
+				onClick={resetFilters}
 				size="sm"
 				variant="text"
-				onClick={resetFilters}
-				iconAfter={CloseIcon}
 			>
 				Clear filters
 			</Button>
diff --git a/yourgov/components/Staff/DashboardFilterDrawer.tsx b/yourgov/components/Staff/DashboardFilterDrawer.tsx
index 27a85b98f4fa..15c57a85682f 100644
--- a/yourgov/components/Staff/DashboardFilterDrawer.tsx
+++ b/yourgov/components/Staff/DashboardFilterDrawer.tsx
@@ -95,24 +95,24 @@ export const DashboardFilterDrawer = ({
 			}}
 		>
 			<Drawer
-				title="Filter by"
-				isOpen={isDrawerOpen}
-				onClose={cancel}
 				actions={
 					<ButtonGroup>
 						<Button form="staff-filters-form" onClick={applyFilters}>
 							Apply filters
 						</Button>
 
-						<Button variant="secondary" onClick={clearFilters}>
+						<Button onClick={clearFilters} variant="secondary">
 							Clear filters
 						</Button>
 
-						<Button variant="tertiary" onClick={cancel}>
+						<Button onClick={cancel} variant="tertiary">
 							Cancel
 						</Button>
 					</ButtonGroup>
 				}
+				isOpen={isDrawerOpen}
+				onClose={cancel}
+				title="Filter by"
 			>
 				<form id="staff-filters-form">
 					<FormStack>
diff --git a/yourgov/components/Staff/DashboardPagination.tsx b/yourgov/components/Staff/DashboardPagination.tsx
index 0b60c45f90d6..3a28eebf92d5 100644
--- a/yourgov/components/Staff/DashboardPagination.tsx
+++ b/yourgov/components/Staff/DashboardPagination.tsx
@@ -40,10 +40,9 @@ export const DashboardPagination = () => {
 	return (
 		<PaginationButtons
 			currentPage={displayText.page}
-			onChange={(page) => setPagination({ perPage: displayText.perPage, page })}
-			totalPages={totalPages}
 			itemRangeText={displayText.itemRangeText}
 			itemsPerPage={displayText.perPage}
+			onChange={(page) => setPagination({ perPage: displayText.perPage, page })}
 			onItemsPerPageChange={(perPage) =>
 				setPagination({
 					page: getValidPage({
@@ -55,6 +54,7 @@ export const DashboardPagination = () => {
 					perPage,
 				})
 			}
+			totalPages={totalPages}
 		/>
 	);
 };
diff --git a/yourgov/components/Staff/DataTable.tsx b/yourgov/components/Staff/DataTable.tsx
index e019b1354dfe..94ef6a3dc369 100644
--- a/yourgov/components/Staff/DataTable.tsx
+++ b/yourgov/components/Staff/DataTable.tsx
@@ -54,7 +54,7 @@ export const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
 			return (
 				<Stack gap={1} id={tableId} role="alert">
 					<AlertFilledIcon color="error" size="lg" />
-					<Heading type="h2" fontSize="lg">
+					<Heading fontSize="lg" type="h2">
 						Failed to load
 					</Heading>
 					<Text>
@@ -75,8 +75,8 @@ export const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
 					role="status"
 				>
 					<Stack gap={1}>
-						<HelpIcon size="lg" color="muted" />
-						<Heading type="h2" fontSize="lg">
+						<HelpIcon color="muted" size="lg" />
+						<Heading fontSize="lg" type="h2">
 							No results found
 						</Heading>
 						<Text>Try adjusting your filter options.</Text>
@@ -93,15 +93,15 @@ export const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
 						Table column headers with buttons are sortable.
 					</div>
 				) : null}
-				<div role="status" css={visuallyHiddenStyles}>
+				<div css={visuallyHiddenStyles} role="status">
 					{loading ? 'Loading staff members' : ''}
 				</div>
 				<TableWrapper>
 					<Table
-						aria-rowcount={totalItems}
 						aria-labelledby={
 							headingId ? `${headingId} ${descriptionId}` : undefined
 						}
+						aria-rowcount={totalItems}
 						id={tableId}
 						ref={ref}
 						tabIndex={-1}
@@ -138,11 +138,11 @@ export const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
 											return (
 												<TableHeaderSortable
 													key={sortKey}
-													width={width}
+													onClick={onClick}
 													sort={
 														isFieldTheActiveSortField ? sort?.order : undefined
 													}
-													onClick={onClick}
+													width={width}
 												>
 													{label}
 												</TableHeaderSortable>
diff --git a/yourgov/components/Staff/DataTableBatchActionsBar.tsx b/yourgov/components/Staff/DataTableBatchActionsBar.tsx
index 0de9cae789da..5799637a9a9c 100644
--- a/yourgov/components/Staff/DataTableBatchActionsBar.tsx
+++ b/yourgov/components/Staff/DataTableBatchActionsBar.tsx
@@ -87,26 +87,26 @@ export const DataTableBatchActionsBar = () => {
 					</Button> */}
 
 					<Button
-						variant="secondary"
-						size="sm"
 						onClick={() => {
 							setPauseModalOpen(true);
 						}}
+						size="sm"
+						variant="secondary"
 					>
 						Pause access
 					</Button>
 
 					<Button
-						variant="secondary"
-						size="sm"
 						onClick={() => {
 							setRemoveModalOpen(true);
 						}}
+						size="sm"
+						variant="secondary"
 					>
 						Remove access
 					</Button>
 
-					<Button variant="tertiary" size="sm" onClick={clearRowSelections}>
+					<Button onClick={clearRowSelections} size="sm" variant="tertiary">
 						Cancel
 					</Button>
 				</ButtonGroup>
diff --git a/yourgov/components/Staff/DataTableRow.tsx b/yourgov/components/Staff/DataTableRow.tsx
index 4a53add63e22..92b7716e2322 100644
--- a/yourgov/components/Staff/DataTableRow.tsx
+++ b/yourgov/components/Staff/DataTableRow.tsx
@@ -102,9 +102,9 @@ export const DataTableRow = ({
 			<TableRow aria-rowindex={rowIndex} selected={isRowSelected(itemId)}>
 				<TableCell>
 					<Checkbox
-						size="sm"
 						checked={isRowSelected(itemId)}
 						onChange={() => toggleRowSelected(itemId)}
+						size="sm"
 					>
 						<VisuallyHidden>{`Select ${name}`}</VisuallyHidden>
 					</Checkbox>
diff --git a/yourgov/components/Staff/DataTableSelectAllCheckbox.tsx b/yourgov/components/Staff/DataTableSelectAllCheckbox.tsx
index 68c469927f32..23e7e7954464 100644
--- a/yourgov/components/Staff/DataTableSelectAllCheckbox.tsx
+++ b/yourgov/components/Staff/DataTableSelectAllCheckbox.tsx
@@ -12,10 +12,10 @@ export const DataTableSelectAllCheckbox = () => {
 	} = useSelectAllRows(displayData);
 	return (
 		<Checkbox
-			size="sm"
 			checked={isSelectAllCheckboxChecked}
 			indeterminate={isSelectAllCheckboxIndeterminate}
 			onChange={toggleAllRowsSelected}
+			size="sm"
 		>
 			Select all rows
 		</Checkbox>
diff --git a/yourgov/components/Staff/FilterBar.tsx b/yourgov/components/Staff/FilterBar.tsx
index 23eda957afaa..21827318b1ca 100644
--- a/yourgov/components/Staff/FilterBar.tsx
+++ b/yourgov/components/Staff/FilterBar.tsx
@@ -5,10 +5,10 @@ import { Stack } from '@ag.ds-next/react/src/stack';
 export const FilterRegion = ({ children }: { children: ReactNode }) => {
 	return (
 		<Stack
-			as="section"
-			gap={1}
 			aria-label="Filters"
+			as="section"
 			borderBottom
+			gap={1}
 			paddingBottom={1.5}
 		>
 			{children}
@@ -19,14 +19,14 @@ export const FilterRegion = ({ children }: { children: ReactNode }) => {
 export const FilterBar = ({ children }: { children: ReactNode }) => {
 	return (
 		<Flex
-			columnGap={1}
-			rowGap={1.5}
 			alignItems={{ xs: 'stretch', lg: 'flex-end' }}
-			justifyContent={{ xs: 'flex-start', md: 'space-between' }}
+			columnGap={1}
 			flexDirection={{
 				xs: 'column',
 				lg: 'row',
 			}}
+			justifyContent={{ xs: 'flex-start', md: 'space-between' }}
+			rowGap={1.5}
 		>
 			{children}
 		</Flex>
@@ -36,11 +36,11 @@ export const FilterBar = ({ children }: { children: ReactNode }) => {
 export const FilterBarGroup = ({ children }: { children: ReactNode }) => {
 	return (
 		<Flex
-			flexWrap="wrap"
+			alignItems={{ xs: 'stretch', md: 'flex-end' }}
 			columnGap={1}
-			rowGap={1.5}
 			flexDirection={{ xs: 'column', md: 'row' }}
-			alignItems={{ xs: 'stretch', md: 'flex-end' }}
+			flexWrap="wrap"
+			rowGap={1.5}
 		>
 			{children}
 		</Flex>
diff --git a/yourgov/components/Staff/FilterSearchInput.tsx b/yourgov/components/Staff/FilterSearchInput.tsx
index 4f6d459d9f0a..04c9e96a177e 100644
--- a/yourgov/components/Staff/FilterSearchInput.tsx
+++ b/yourgov/components/Staff/FilterSearchInput.tsx
@@ -8,17 +8,17 @@ export const FilterSearchInput = ({ block }: { block?: boolean }) => {
 	return (
 		<div aria-label="Staff members" role="search">
 			<SearchInput
-				label="Search name"
 				aria-controls={tableId}
-				maxWidth="lg"
-				hideOptionalLabel
 				block={block}
-				value={filters.name || ''}
+				hideOptionalLabel
+				label="Search name"
+				maxWidth="lg"
 				onChange={(searchString) => {
 					setFilter({
 						name: searchString,
 					});
 				}}
+				value={filters.name || ''}
 			/>
 		</div>
 	);
diff --git a/yourgov/components/Staff/FilterStatusSelect.tsx b/yourgov/components/Staff/FilterStatusSelect.tsx
index 28978d6681a5..963f0eec7e3d 100644
--- a/yourgov/components/Staff/FilterStatusSelect.tsx
+++ b/yourgov/components/Staff/FilterStatusSelect.tsx
@@ -8,17 +8,10 @@ export const FilterStatusSelect = ({ block }: { block?: boolean }) => {
 
 	return (
 		<Select
-			label="Status"
-			placeholder="All"
 			aria-controls={tableId}
-			hideOptionalLabel
 			block={block}
-			options={[
-				{ value: 'Active', label: 'Active' },
-				{ value: 'Invited', label: 'Invited' },
-				{ value: 'Paused', label: 'Paused' },
-			]}
-			value={filters.status || ''}
+			hideOptionalLabel
+			label="Status"
 			onChange={(event) => {
 				const value = event.target.value as '' | StaffMemberStatus;
 
@@ -26,6 +19,13 @@ export const FilterStatusSelect = ({ block }: { block?: boolean }) => {
 					status: value === '' ? undefined : value,
 				});
 			}}
+			options={[
+				{ value: 'Active', label: 'Active' },
+				{ value: 'Invited', label: 'Invited' },
+				{ value: 'Paused', label: 'Paused' },
+			]}
+			placeholder="All"
+			value={filters.status || ''}
 		/>
 	);
 };
diff --git a/yourgov/components/Staff/ModalConfirmChangeRole.tsx b/yourgov/components/Staff/ModalConfirmChangeRole.tsx
index 692b5409199e..045f24bc175f 100644
--- a/yourgov/components/Staff/ModalConfirmChangeRole.tsx
+++ b/yourgov/components/Staff/ModalConfirmChangeRole.tsx
@@ -37,9 +37,6 @@ export const ModalConfirmChangeRole = ({
 
 	return (
 		<Drawer
-			isOpen={isOpen}
-			onClose={onClose}
-			title="Change role"
 			actions={
 				<ButtonGroup>
 					<Button
@@ -49,11 +46,14 @@ export const ModalConfirmChangeRole = ({
 					>
 						Change role
 					</Button>
-					<Button variant="secondary" onClick={onClose}>
+					<Button onClick={onClose} variant="secondary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			}
+			isOpen={isOpen}
+			onClose={onClose}
+			title="Change role"
 		>
 			<form id="change-role-drawer">
 				<ControlGroup block label="Export service role" required>
diff --git a/yourgov/components/Staff/ModalConfirmPauseAccess.tsx b/yourgov/components/Staff/ModalConfirmPauseAccess.tsx
index ae249fb6d2d7..a4d5e745e8aa 100644
--- a/yourgov/components/Staff/ModalConfirmPauseAccess.tsx
+++ b/yourgov/components/Staff/ModalConfirmPauseAccess.tsx
@@ -49,19 +49,19 @@ export function ModalConfirmPauseAccess({
 
 	return (
 		<Modal
-			isOpen={isOpen}
-			onClose={onClose}
-			title={title}
 			actions={
 				<ButtonGroup>
 					<Button loading={submitting} onClick={onSubmit}>
 						Pause access
 					</Button>
-					<Button variant="secondary" onClick={onClose}>
+					<Button onClick={onClose} variant="secondary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			}
+			isOpen={isOpen}
+			onClose={onClose}
+			title={title}
 		>
 			<Text as="p">{description}</Text>
 		</Modal>
diff --git a/yourgov/components/Staff/ModalConfirmRemoveAccess.tsx b/yourgov/components/Staff/ModalConfirmRemoveAccess.tsx
index c77d241aa2a2..e4cccd95a2b0 100644
--- a/yourgov/components/Staff/ModalConfirmRemoveAccess.tsx
+++ b/yourgov/components/Staff/ModalConfirmRemoveAccess.tsx
@@ -49,19 +49,19 @@ export function ModalConfirmRemoveAccess({
 
 	return (
 		<Modal
-			isOpen={isOpen}
-			onClose={onClose}
-			title={title}
 			actions={
 				<ButtonGroup>
 					<Button loading={submitting} onClick={onSubmit}>
 						Remove access
 					</Button>
-					<Button variant="secondary" onClick={onClose}>
+					<Button onClick={onClose} variant="secondary">
 						Cancel
 					</Button>
 				</ButtonGroup>
 			}
+			isOpen={isOpen}
+			onClose={onClose}
+			title={title}
 		>
 			<Text as="p">{description}</Text>
 		</Modal>
diff --git a/yourgov/components/Staff/SortBySelect.tsx b/yourgov/components/Staff/SortBySelect.tsx
index c2aaae2ae030..f88f9375d6e4 100644
--- a/yourgov/components/Staff/SortBySelect.tsx
+++ b/yourgov/components/Staff/SortBySelect.tsx
@@ -8,8 +8,16 @@ export const SortBySelect = () => {
 
 	return (
 		<Select
-			label="Sort by"
+			aria-controls={tableId}
 			hideOptionalLabel
+			label="Sort by"
+			onChange={(e) => {
+				const [field, order] = e.target.value.split('-');
+				setSort({
+					field: field as keyof StaffMember,
+					order: order as 'ASC' | 'DESC',
+				});
+			}}
 			options={[
 				{
 					value: 'name-ASC',
@@ -53,14 +61,6 @@ export const SortBySelect = () => {
 				},
 			]}
 			value={`${sort.field}-${sort.order}`}
-			aria-controls={tableId}
-			onChange={(e) => {
-				const [field, order] = e.target.value.split('-');
-				setSort({
-					field: field as keyof StaffMember,
-					order: order as 'ASC' | 'DESC',
-				});
-			}}
 		/>
 	);
 };
diff --git a/yourgov/components/Staff/StaffMembersTable.tsx b/yourgov/components/Staff/StaffMembersTable.tsx
index 6157aefee709..d6547cdbbfd2 100644
--- a/yourgov/components/Staff/StaffMembersTable.tsx
+++ b/yourgov/components/Staff/StaffMembersTable.tsx
@@ -153,9 +153,9 @@ export const StaffMembersTable = ({
 								<FilterSwitchInput />
 
 								<Button
+									iconBefore={FilterIcon}
 									onClick={openDrawer}
 									variant="secondary"
-									iconBefore={FilterIcon}
 								>
 									Show filters
 								</Button>
@@ -165,8 +165,8 @@ export const StaffMembersTable = ({
 						</FilterBar>
 
 						<DashboardFilterDrawer
-							isDrawerOpen={isDrawerOpen}
 							closeDrawer={closeDrawer}
+							isDrawerOpen={isDrawerOpen}
 						/>
 
 						<ActiveFilters />
diff --git a/yourgov/next-env.d.ts b/yourgov/next-env.d.ts
index 4f11a03dc6cc..a4a7b3f5cfa2 100644
--- a/yourgov/next-env.d.ts
+++ b/yourgov/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/yourgov/pages/_app.tsx b/yourgov/pages/_app.tsx
index 2fa35848e46c..a2f552ea5f12 100644
--- a/yourgov/pages/_app.tsx
+++ b/yourgov/pages/_app.tsx
@@ -36,19 +36,19 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 	return (
 		<>
 			<Head>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<meta content="width=device-width, initial-scale=1" name="viewport" />
 			</Head>
-			<Core theme={theme} linkComponent={LinkComponent}>
+			<Core linkComponent={LinkComponent} theme={theme}>
 				<AuthProvider>
 					<LinkedBusinessesProvider>
 						{isAlertVisible && (
 							<GlobalAlert
-								tone="info"
-								title="We are planning a maintenance outage to upgrade the service on 22 November 2024 from 12pm to 5pm AEDT"
 								onClose={() => {
 									safeSessionStorage?.setItem('isGlobalAlertVisible', 'false');
 									setIsAlertVisible(false);
 								}}
+								title="We are planning a maintenance outage to upgrade the service on 22 November 2024 from 12pm to 5pm AEDT"
+								tone="info"
 							>
 								<Text as="p">
 									You won’t be able to access yourGov during that time. We
diff --git a/yourgov/pages/app/dashboard/index.tsx b/yourgov/pages/app/dashboard/index.tsx
index 66489f896291..00a11171a77a 100644
--- a/yourgov/pages/app/dashboard/index.tsx
+++ b/yourgov/pages/app/dashboard/index.tsx
@@ -25,7 +25,7 @@ const Page: NextPageWithLayout = () => {
 			<DocumentTitle title={`Dashboard | ${selectedBusiness.name}`} />
 			<PageContent>
 				<Stack gap={3}>
-					<Stack gap={1} alignItems="flex-start">
+					<Stack alignItems="flex-start" gap={1}>
 						<Flex gap={0.5}>
 							<Tag>{selectedBusiness.abn}</Tag>
 							<Text>ABN</Text>
@@ -35,10 +35,10 @@ const Page: NextPageWithLayout = () => {
 					</Stack>
 
 					<Columns as="ul" cols={{ xs: 1, sm: 2 }}>
-						<Card as="li" shadow clickable>
+						<Card as="li" clickable shadow>
 							<CardInner>
 								<Stack gap={1}>
-									<PermitIcon size="xl" color="action" />
+									<PermitIcon color="action" size="xl" />
 									<Heading as="h2" type="h3">
 										<CardLink href="/app/permits">Manage permits</CardLink>
 									</Heading>
@@ -46,10 +46,10 @@ const Page: NextPageWithLayout = () => {
 								</Stack>
 							</CardInner>
 						</Card>
-						<Card as="li" shadow clickable>
+						<Card as="li" clickable shadow>
 							<CardInner>
 								<Stack gap={1}>
-									<IconUsers size="xl" color="action" />
+									<IconUsers color="action" size="xl" />
 									<Heading as="h2" type="h3">
 										<CardLink href="/app/staff">Manage staff access</CardLink>
 									</Heading>
@@ -68,7 +68,7 @@ const Page: NextPageWithLayout = () => {
 					<Stack gap={1.5}>
 						<H2>Popular links</H2>
 						<Columns as="ul" cols={{ xs: 1, sm: 2 }}>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -83,7 +83,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
diff --git a/yourgov/pages/app/index.tsx b/yourgov/pages/app/index.tsx
index a7128d813545..cea54ccb6641 100644
--- a/yourgov/pages/app/index.tsx
+++ b/yourgov/pages/app/index.tsx
@@ -35,7 +35,7 @@ const Page: NextPageWithLayout = () => {
 			<DocumentTitle title="My account" />
 			<PageContent>
 				<Stack gap={3}>
-					<Flex gap={1} alignItems="center">
+					<Flex alignItems="center" gap={1}>
 						<Avatar
 							aria-hidden
 							name={user.displayName}
@@ -43,7 +43,7 @@ const Page: NextPageWithLayout = () => {
 							tone="action"
 						/>
 						<Stack>
-							<Text fontSize="md" color="muted">
+							<Text color="muted" fontSize="md">
 								My account
 							</Text>
 							<H1 css={{ marginTop: '-0.5rem' }}>Hi, {user.firstName}</H1>
@@ -57,12 +57,12 @@ const Page: NextPageWithLayout = () => {
 									<EmailIcon color="action" size="xl" />
 									<Heading
 										as="h2"
-										type="h3"
 										css={{
 											display: 'flex',
 											gap: '0.5em',
 											alignItems: 'center',
 										}}
+										type="h3"
 									>
 										<CardLink href="/not-found">Messages</CardLink>
 										<NotificationBadge tone="action" value={3} />
diff --git a/yourgov/pages/app/permits/[slug].tsx b/yourgov/pages/app/permits/[slug].tsx
index a09268824938..47e2d487d3ab 100644
--- a/yourgov/pages/app/permits/[slug].tsx
+++ b/yourgov/pages/app/permits/[slug].tsx
@@ -74,12 +74,12 @@ const Page: NextPageWithLayout = () => {
 					{!isReady ? null : isValidSlug ? (
 						<>
 							<Stack gap={1.5}>
-								<FormContainer title={pageTitle} hideRequiredFieldsMessage />
+								<FormContainer hideRequiredFieldsMessage title={pageTitle} />
 								<div>
 									{formState?.completed ? (
-										<StatusBadge tone="successMedium" label="Submitted" />
+										<StatusBadge label="Submitted" tone="successMedium" />
 									) : (
-										<StatusBadge tone="inProgressLow" label="In progress" />
+										<StatusBadge label="In progress" tone="inProgressLow" />
 									)}
 								</div>
 							</Stack>
@@ -122,7 +122,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 
 									{/** Business details */}
-									<Stack gap={2} alignItems="flex-start">
+									<Stack alignItems="flex-start" gap={2}>
 										<H3>{formSteps[1].label}</H3>
 										<FormDefinitionList>
 											<FormDefinitionListItem
@@ -154,15 +154,15 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 
 									{/** Business address */}
-									<Stack gap={2} alignItems="flex-start">
+									<Stack alignItems="flex-start" gap={2}>
 										<H3>{formSteps[2].label}</H3>
 										<FormDefinitionList>
 											<FormDefinitionListItemAddress
-												label="Street address"
 												address={formState.steps?.step3?.streetAddress}
-												suburb={formState.steps?.step3?.suburbTownCity}
-												state={formState.steps?.step3?.state}
+												label="Street address"
 												postcode={formState.steps?.step3?.postcode}
+												state={formState.steps?.step3?.state}
+												suburb={formState.steps?.step3?.suburbTownCity}
 											/>
 											{formState.steps?.step3
 												?.isPostalAddressSameAsBusinessAddress ? (
@@ -172,18 +172,18 @@ const Page: NextPageWithLayout = () => {
 												/>
 											) : (
 												<FormDefinitionListItemAddress
-													label="Postal address"
 													address={formState.steps?.step3?.postalAddress}
-													suburb={formState.steps?.step3?.postalSuburbTownCity}
-													state={formState.steps?.step3?.postalState}
+													label="Postal address"
 													postcode={formState.steps?.step3?.postalPostcode}
+													state={formState.steps?.step3?.postalState}
+													suburb={formState.steps?.step3?.postalSuburbTownCity}
 												/>
 											)}
 										</FormDefinitionList>
 									</Stack>
 
 									{/** Vehicle registration */}
-									<Stack gap={2} alignItems="flex-start">
+									<Stack alignItems="flex-start" gap={2}>
 										<H3>{formSteps[3].label}</H3>
 										<FormDefinitionList>
 											<FormDefinitionListItem
@@ -198,7 +198,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 
 									{/** Trading time */}
-									<Stack gap={2} alignItems="flex-start">
+									<Stack alignItems="flex-start" gap={2}>
 										<H3>{formSteps[4].label}</H3>
 										<FormDefinitionList>
 											<FormDefinitionListItemDateRange
@@ -215,7 +215,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 
 									{/** Food served */}
-									<Stack gap={2} alignItems="flex-start">
+									<Stack alignItems="flex-start" gap={2}>
 										<H3>{formSteps[5].label}</H3>
 										<FormDefinitionList>
 											<FormDefinitionListItem
@@ -230,7 +230,7 @@ const Page: NextPageWithLayout = () => {
 									<H2>Employee details</H2>
 
 									{/** Employees */}
-									<Stack gap={2} alignItems="flex-start">
+									<Stack alignItems="flex-start" gap={2}>
 										<H3 id="employees-heading">{formSteps[6].label}</H3>
 										<TableWrapper>
 											<Table aria-labelledby="employees-heading">
@@ -258,7 +258,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 
 									{/** Food safety supervisor */}
-									<Stack gap={2} alignItems="flex-start">
+									<Stack alignItems="flex-start" gap={2}>
 										<H3>{formSteps[7].label}</H3>
 										<FormDefinitionList>
 											<FormDefinitionListItem
@@ -271,7 +271,7 @@ const Page: NextPageWithLayout = () => {
 									<H2>Upload documents</H2>
 
 									{/** Upload documents */}
-									<Stack gap={2} alignItems="flex-start">
+									<Stack alignItems="flex-start" gap={2}>
 										<H3 id="upload-documents-heading">{formSteps[8].label}</H3>
 										<TableWrapper>
 											<Table aria-labelledby="upload-documents-heading">
@@ -364,7 +364,7 @@ const Page: NextPageWithLayout = () => {
 					) : (
 						<>
 							<PageTitle title={pageTitle} />
-							<PageAlert tone="error" title="No matching permit found">
+							<PageAlert title="No matching permit found" tone="error">
 								<DirectionLink direction="right" href={managePermitsPage}>
 									Manage existing permits
 								</DirectionLink>
@@ -373,17 +373,17 @@ const Page: NextPageWithLayout = () => {
 					)}
 				</Stack>
 				<Modal
-					isOpen={isModalOpen}
-					onClose={closeModal}
-					title="Are you sure you want to remove this application?"
 					actions={
 						<ButtonGroup>
 							<Button onClick={closeModal}>Yes, remove</Button>
-							<Button variant="secondary" onClick={closeModal}>
+							<Button onClick={closeModal} variant="secondary">
 								No
 							</Button>
 						</ButtonGroup>
 					}
+					isOpen={isModalOpen}
+					onClose={closeModal}
+					title="Are you sure you want to remove this application?"
 				>
 					<Text as="p">
 						Note: this is for demonstration purposes only and does not function.
diff --git a/yourgov/pages/app/permits/apply-for-new-permit/index.tsx b/yourgov/pages/app/permits/apply-for-new-permit/index.tsx
index 079bfd9a2671..ab1b2d03c582 100644
--- a/yourgov/pages/app/permits/apply-for-new-permit/index.tsx
+++ b/yourgov/pages/app/permits/apply-for-new-permit/index.tsx
@@ -27,13 +27,13 @@ const Page: NextPageWithLayout = () => {
 						]}
 					/>
 					<PageTitle
-						title="Apply for a new permit"
 						introduction="Stay compliant by registering for business permits."
+						title="Apply for a new permit"
 					/>
 					<Stack gap={2}>
 						<H2>Driver and rider licences</H2>
 						<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -46,7 +46,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -59,7 +59,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -78,7 +78,7 @@ const Page: NextPageWithLayout = () => {
 					<Stack gap={2}>
 						<H2>Business permits</H2>
 						<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -93,7 +93,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -108,7 +108,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -123,7 +123,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -138,7 +138,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -153,7 +153,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -171,7 +171,7 @@ const Page: NextPageWithLayout = () => {
 					<Stack gap={2}>
 						<H2>Other permits</H2>
 						<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -181,7 +181,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -196,7 +196,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
diff --git a/yourgov/pages/app/permits/apply-for-new-permit/mobile-food-vendor-permit/index.tsx b/yourgov/pages/app/permits/apply-for-new-permit/mobile-food-vendor-permit/index.tsx
index cee5de72c7a7..588468240a7a 100644
--- a/yourgov/pages/app/permits/apply-for-new-permit/mobile-food-vendor-permit/index.tsx
+++ b/yourgov/pages/app/permits/apply-for-new-permit/mobile-food-vendor-permit/index.tsx
@@ -44,8 +44,6 @@ const Page: NextPageWithLayout = () => {
 							/>
 
 							<PageTitle
-								title="Apply for a mobile food vendor permit"
-								introduction="If you are preparing and or handling food for retail sale from a vehicle or stall, you must have approval to operate on public areas."
 								callToAction={
 									<Details label="More information about mobile food vending business types">
 										<Prose>
@@ -62,7 +60,7 @@ const Page: NextPageWithLayout = () => {
 													drawerContent={
 														<Stack gap={2}>
 															<H1>What you need to apply for a permit</H1>
-															<Text as="p" fontSize="lg" color="muted">
+															<Text as="p" color="muted" fontSize="lg">
 																Regulating a mobile food vending business is
 																crucial for several reasons, primarily to
 																safeguard public health, ensure safety, and
@@ -114,6 +112,8 @@ const Page: NextPageWithLayout = () => {
 										</Prose>
 									</Details>
 								}
+								introduction="If you are preparing and or handling food for retail sale from a vehicle or stall, you must have approval to operate on public areas."
+								title="Apply for a mobile food vendor permit"
 							/>
 							<GettingStartedForm />
 							<HelpCallout />
diff --git a/yourgov/pages/app/permits/apply-for-new-permit/mobile-food-vendor-permit/success/index.tsx b/yourgov/pages/app/permits/apply-for-new-permit/mobile-food-vendor-permit/success/index.tsx
index 0feccb2e79fd..7eace6195c2f 100644
--- a/yourgov/pages/app/permits/apply-for-new-permit/mobile-food-vendor-permit/success/index.tsx
+++ b/yourgov/pages/app/permits/apply-for-new-permit/mobile-food-vendor-permit/success/index.tsx
@@ -32,14 +32,14 @@ const Page: NextPageWithLayout = () => {
 				<Columns>
 					<Column columnSpan={8}>
 						<FormContainer
-							title="Application submitted"
 							hideRequiredFieldsMessage
+							title="Application submitted"
 						>
 							{!isReady ? null : isSuccess ? (
 								<>
 									<PageAlert
-										tone="success"
 										title="Your application for a food truck permit has been submitted"
+										tone="success"
 									>
 										<Text as="p">
 											Reference:{' '}
@@ -62,7 +62,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</>
 							) : (
-								<PageAlert tone="error" title="No matching application found">
+								<PageAlert title="No matching application found" tone="error">
 									<DirectionLink direction="right" href={managePermitsPage}>
 										Manage existing permits
 									</DirectionLink>
diff --git a/yourgov/pages/app/permits/index.tsx b/yourgov/pages/app/permits/index.tsx
index 3f9481e03b25..d6e65f542a85 100644
--- a/yourgov/pages/app/permits/index.tsx
+++ b/yourgov/pages/app/permits/index.tsx
@@ -32,8 +32,8 @@ const Page: NextPageWithLayout = () => {
 						]}
 					/>
 					<PageTitle
-						title="Permits"
 						introduction="Stay compliant by registering for business permits."
+						title="Permits"
 					/>
 					<CallToActionLink href="/app/permits/apply-for-new-permit">
 						Apply for a permit
@@ -45,7 +45,7 @@ const Page: NextPageWithLayout = () => {
 					<Stack gap={1.5}>
 						<H2>Popular links</H2>
 						<Columns as="ul" cols={{ xs: 1, sm: 2 }}>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
@@ -60,7 +60,7 @@ const Page: NextPageWithLayout = () => {
 									</Stack>
 								</CardInner>
 							</Card>
-							<Card as="li" shadow clickable>
+							<Card as="li" clickable shadow>
 								<CardInner>
 									<Stack gap={1}>
 										<H3>
diff --git a/yourgov/pages/app/permits/manage-existing/index.tsx b/yourgov/pages/app/permits/manage-existing/index.tsx
index 3280b879c686..8a0c29a90690 100644
--- a/yourgov/pages/app/permits/manage-existing/index.tsx
+++ b/yourgov/pages/app/permits/manage-existing/index.tsx
@@ -31,8 +31,8 @@ const Page: NextPageWithLayout = () => {
 						]}
 					/>
 					<PageTitle
-						title="Manage existing permits"
 						introduction="Stay compliant by registering for business permits."
+						title="Manage existing permits"
 					/>
 					<CallToActionLink href="/app/permits/apply-for-new-permit">
 						Apply for a permit
diff --git a/yourgov/pages/app/staff/[slug].tsx b/yourgov/pages/app/staff/[slug].tsx
index ac75f709f883..46f55f3c91cb 100644
--- a/yourgov/pages/app/staff/[slug].tsx
+++ b/yourgov/pages/app/staff/[slug].tsx
@@ -110,7 +110,6 @@ const Page: NextPageWithLayout = () => {
 
 					<Stack alignItems="start" gap={1.5}>
 						<PageTitle
-							title={staffMember.name}
 							introduction={
 								<Text>
 									Change role or remove access for{' '}
@@ -120,9 +119,10 @@ const Page: NextPageWithLayout = () => {
 									.
 								</Text>
 							}
+							title={staffMember.name}
 						/>
 
-						<StatusBadge tone="infoMedium" label="Invited" />
+						<StatusBadge label="Invited" tone="infoMedium" />
 					</Stack>
 
 					<Stack gap={2}>
@@ -184,7 +184,7 @@ const Page: NextPageWithLayout = () => {
 						</Button>
 					</Stack>
 
-					<Stack as="form" gap={2} onSubmit={handleSubmit(onSubmit)} noValidate>
+					<Stack as="form" gap={2} noValidate onSubmit={handleSubmit(onSubmit)}>
 						<H2>Change role</H2>
 
 						<Details
@@ -194,7 +194,7 @@ const Page: NextPageWithLayout = () => {
 							<CalloutDefinitionList />
 						</Details>
 
-						<ControlGroup label="Export service role" required block>
+						<ControlGroup block label="Export service role" required>
 							{['Manager', 'Employee', 'Trainee', 'Work experience'].map(
 								(option) => (
 									<Radio key={option} {...register('role')} value={option}>
@@ -206,7 +206,7 @@ const Page: NextPageWithLayout = () => {
 
 						<H2>Training completed</H2>
 
-						<ControlGroup label="Training completed" block>
+						<ControlGroup block label="Training completed">
 							{[
 								'Deliveries',
 								'Distribution',
@@ -228,11 +228,11 @@ const Page: NextPageWithLayout = () => {
 						</Box>
 
 						<ButtonGroup>
-							<Button type="submit" loading={isSaving}>
+							<Button loading={isSaving} type="submit">
 								Save changes
 							</Button>
 
-							<Button variant="tertiary" onClick={onCancelClick}>
+							<Button onClick={onCancelClick} variant="tertiary">
 								Cancel
 							</Button>
 						</ButtonGroup>
@@ -240,8 +240,8 @@ const Page: NextPageWithLayout = () => {
 				</Stack>
 
 				<ModalConfirmRemoveAccess
-					itemsToDelete={staffMember}
 					isOpen={removeModalOpen}
+					itemsToDelete={staffMember}
 					onClose={() => setRemoveModalOpen(false)}
 					onConfirm={onConfirmRemove}
 				/>
diff --git a/yourgov/pages/app/staff/index.tsx b/yourgov/pages/app/staff/index.tsx
index bb09cad39bec..d4cec2a1dc85 100644
--- a/yourgov/pages/app/staff/index.tsx
+++ b/yourgov/pages/app/staff/index.tsx
@@ -47,16 +47,6 @@ const Page: NextPageWithLayout = () => {
 			<PageContent>
 				<Stack gap={3}>
 					<PageTitle
-						title="Staff"
-						introduction={
-							<>
-								Manage who can act for{' '}
-								<Text fontSize="md" fontWeight="bold">
-									Walker‘s Frozen Food
-								</Text>
-								.
-							</>
-						}
 						callToAction={
 							<Stack gap={2} maxWidth="42rem">
 								<Details label="Why should I invite a new staff member?">
@@ -70,7 +60,7 @@ const Page: NextPageWithLayout = () => {
 											drawerContent={
 												<Stack gap={2}>
 													<H1>Learn more about inviting a staff member</H1>
-													<Text as="p" fontSize="lg" color="muted">
+													<Text as="p" color="muted" fontSize="lg">
 														Inviting individuals to join your staff can bring
 														numerous benefits to your business and help
 														streamline your operations.
@@ -120,6 +110,16 @@ const Page: NextPageWithLayout = () => {
 								</ButtonLink>
 							</Stack>
 						}
+						introduction={
+							<>
+								Manage who can act for{' '}
+								<Text fontSize="md" fontWeight="bold">
+									Walker‘s Frozen Food
+								</Text>
+								.
+							</>
+						}
+						title="Staff"
 					/>
 					<Tabs contained={false}>
 						<TabList>
diff --git a/yourgov/pages/app/staff/invite-staff-member/index.tsx b/yourgov/pages/app/staff/invite-staff-member/index.tsx
index cd7f6c656002..b336a37327dd 100644
--- a/yourgov/pages/app/staff/invite-staff-member/index.tsx
+++ b/yourgov/pages/app/staff/invite-staff-member/index.tsx
@@ -80,7 +80,6 @@ const Page: NextPageWithLayout = () => {
 					</DirectionLink>
 
 					<PageTitle
-						title="Invite staff member"
 						hasAllFieldsRequiredMessage
 						introduction={
 							<>
@@ -91,9 +90,10 @@ const Page: NextPageWithLayout = () => {
 								.
 							</>
 						}
+						title="Invite staff member"
 					/>
 
-					<Stack as="form" gap={3} onSubmit={handleSubmit(onSubmit)} noValidate>
+					<Stack as="form" gap={3} noValidate onSubmit={handleSubmit(onSubmit)}>
 						<FormStack>
 							{showErrorAlert && (
 								<FormPageAlert errors={errorsWithoutTrainingCompleted} />
@@ -108,49 +108,49 @@ const Page: NextPageWithLayout = () => {
 							/>
 
 							<TextInput
-								autoComplete="given-name"
-								label="First name"
 								{...register('firstName')}
+								autoComplete="given-name"
 								id="firstName"
 								invalid={Boolean(errors?.firstName?.message)}
+								label="First name"
 								maxWidth="lg"
 								message={errors?.firstName?.message}
 								required
 							/>
 
 							<TextInput
-								autoComplete="family-name"
-								label="Last name"
 								{...register('lastName')}
+								autoComplete="family-name"
 								id="lastName"
 								invalid={Boolean(errors?.lastName?.message)}
+								label="Last name"
 								maxWidth="lg"
 								message={errors?.lastName?.message}
 								required
 							/>
 
 							<TextInput
-								autoComplete="email"
-								label="Email address"
-								type="email"
 								{...register('email')}
+								autoComplete="email"
 								id="email"
 								invalid={Boolean(errors?.email?.message)}
+								label="Email address"
 								maxWidth="lg"
 								message={errors?.email?.message}
 								required
+								type="email"
 							/>
 
 							<TextInput
-								autoComplete="tel"
-								label="Mobile number"
-								type="phone"
 								{...register('mobile')}
+								autoComplete="tel"
 								id="mobile"
 								invalid={Boolean(errors?.mobile?.message)}
+								label="Mobile number"
 								maxWidth="md"
 								message={errors?.mobile?.message}
 								required
+								type="phone"
 							/>
 						</FormStack>
 
@@ -164,19 +164,19 @@ const Page: NextPageWithLayout = () => {
 						</Details>
 
 						<ControlGroup
-							label="Role"
+							block
 							invalid={Boolean(errors.role?.message)}
+							label="Role"
 							message={errors.role?.message}
 							required
-							block
 						>
 							{['Manager', 'Employee', 'Trainee', 'Work experience'].map(
 								(option) => (
 									<Radio
-										key={option}
 										{...register('role')}
-										value={option}
 										invalid={Boolean(errors.role?.message)}
+										key={option}
+										value={option}
 									>
 										{option}
 									</Radio>
@@ -184,7 +184,7 @@ const Page: NextPageWithLayout = () => {
 							)}
 						</ControlGroup>
 
-						<ControlGroup label="Training completed" block>
+						<ControlGroup block label="Training completed">
 							{[
 								'Deliveries',
 								'Distribution',
@@ -192,10 +192,10 @@ const Page: NextPageWithLayout = () => {
 								'Packaging',
 							].map((option) => (
 								<Checkbox
-									key={option}
 									{...register('trainingCompleted')}
-									value={option}
 									invalid={Boolean(errors.trainingCompleted?.[0]?.message)}
+									key={option}
+									value={option}
 								>
 									{option}
 								</Checkbox>
@@ -205,11 +205,11 @@ const Page: NextPageWithLayout = () => {
 						<Divider />
 
 						<ButtonGroup>
-							<Button type="submit" loading={isSaving}>
+							<Button loading={isSaving} type="submit">
 								Send invite
 							</Button>
 
-							<Button variant="tertiary" onClick={onCancelClick}>
+							<Button onClick={onCancelClick} variant="tertiary">
 								Cancel
 							</Button>
 						</ButtonGroup>
diff --git a/yourgov/pages/index.tsx b/yourgov/pages/index.tsx
index a5f8197d4d54..0419ca5289ca 100644
--- a/yourgov/pages/index.tsx
+++ b/yourgov/pages/index.tsx
@@ -94,8 +94,8 @@ export default function Page() {
 				<Content as="section" background="bodyAlt">
 					<Columns cols={{ xs: 1, md: 2 }} gap={3}>
 						<Stack
-							gap={1.5}
 							alignItems="flex-start"
+							gap={1.5}
 							paddingBottom={{ xs: 0, md: 4 }}
 							paddingTop={{ xs: 3, md: 4 }}
 						>
@@ -125,7 +125,7 @@ export default function Page() {
 
 				<SectionContent>
 					<Columns as="ul" cols={{ xs: 1, sm: 2 }}>
-						<Card as="li" shadow clickable>
+						<Card as="li" clickable shadow>
 							<CardInner>
 								<Stack gap={1}>
 									<H3>
@@ -138,7 +138,7 @@ export default function Page() {
 								</Stack>
 							</CardInner>
 						</Card>
-						<Card as="li" shadow clickable>
+						<Card as="li" clickable shadow>
 							<CardInner>
 								<Stack gap={1}>
 									<H3>
diff --git a/yourgov/pages/services/food-drink-hospitality/index.tsx b/yourgov/pages/services/food-drink-hospitality/index.tsx
index d25eec1715ba..2f268881144b 100644
--- a/yourgov/pages/services/food-drink-hospitality/index.tsx
+++ b/yourgov/pages/services/food-drink-hospitality/index.tsx
@@ -35,35 +35,35 @@ export default function Page() {
 							<H2>Licences and permits </H2>
 							<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
 								<ServiceCard
+									description="Businesses that service food and drink must appoint a certified food safety supervisor (FSS)."
 									href="/not-found"
 									title="Food safety certificates"
-									description="Businesses that service food and drink must appoint a certified food safety supervisor (FSS)."
 								/>
 								<ServiceCard
+									description="Food trucks, vans and stalls must be registered to operate on public areas."
 									href="/services/food-drink-hospitality/operate-a-food-truck-van-or-stall-on-public-areas"
 									title="Operate a food truck, van or stall on public areas"
-									description="Food trucks, vans and stalls must be registered to operate on public areas."
 								/>
 								<ServiceCard
+									description="Businesses must have a current liquor licence to serve liquor on premises."
 									href="/not-found"
 									title="Serve alcohol on premises"
-									description="Businesses must have a current liquor licence to serve liquor on premises."
 								/>
 
 								<ServiceCard
+									description="Register to serve food in a streetside setting outdoor."
 									href="/not-found"
 									title="Outdoor dining approval"
-									description="Register to serve food in a streetside setting outdoor."
 								/>
 								<ServiceCard
+									description="Get approval for a range of construction developments."
 									href="/not-found"
 									title="Development applications"
-									description="Get approval for a range of construction developments."
 								/>
 								<ServiceCard
+									description="Venues that sell ticketed admission to music performances are required to have an appropriate licence."
 									href="/not-found"
 									title="Approval to host musical performances"
-									description="Venues that sell ticketed admission to music performances are required to have an appropriate licence."
 								/>
 							</Columns>
 						</Stack>
@@ -71,24 +71,24 @@ export default function Page() {
 							<H2>Other services</H2>
 							<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
 								<ServiceCard
+									description="Link a business to access services online. You will need to use Relationship Authorisation Manager (RAM)."
 									href="/not-found"
 									title="Link a business"
-									description="Link a business to access services online. You will need to use Relationship Authorisation Manager (RAM)."
 								/>
 								<ServiceCard
+									description="Make a complaint if you have experienced food poisoning."
 									href="/not-found"
 									title="Report a case of food borne illness"
-									description="Make a complaint if you have experienced food poisoning."
 								/>
 								<ServiceCard
+									description="Search for business licences, permits and certificates online."
 									href="/not-found"
 									title="Check a business licence"
-									description="Search for business licences, permits and certificates online."
 								/>
 								<ServiceCard
+									description="Confirm a change in business ownership and notify government agencies."
 									href="/not-found"
 									title="Declare an ownership change"
-									description="Confirm a change in business ownership and notify government agencies."
 								/>
 							</Columns>
 						</Stack>
@@ -96,19 +96,19 @@ export default function Page() {
 							<H2>Guides</H2>
 							<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
 								<ServiceCard
+									description="Learn about your obligations as a food handler and a food handling business."
 									href="/not-found"
 									title="Understand food safety requirements"
-									description="Learn about your obligations as a food handler and a food handling business."
 								/>
 								<ServiceCard
+									description="Get an overview of what’s required to open a small bar in NSW."
 									href="/not-found"
 									title="Opening a small bar in NSW"
-									description="Get an overview of what’s required to open a small bar in NSW."
 								/>
 								<ServiceCard
+									description="Understand how food safety is assessed and how you can be prepared."
 									href="/not-found"
 									title="Prepare for a food safety inspection"
-									description="Understand how food safety is assessed and how you can be prepared."
 								/>
 							</Columns>
 						</Stack>
@@ -129,7 +129,7 @@ function ServiceCard({
 	description?: string;
 }) {
 	return (
-		<Card as="li" shadow clickable>
+		<Card as="li" clickable shadow>
 			<CardInner>
 				<Stack gap={1}>
 					<H3>
diff --git a/yourgov/pages/services/food-drink-hospitality/operate-a-food-truck-van-or-stall-on-public-areas/index.tsx b/yourgov/pages/services/food-drink-hospitality/operate-a-food-truck-van-or-stall-on-public-areas/index.tsx
index b12421a7cb4b..42130c1f37d5 100644
--- a/yourgov/pages/services/food-drink-hospitality/operate-a-food-truck-van-or-stall-on-public-areas/index.tsx
+++ b/yourgov/pages/services/food-drink-hospitality/operate-a-food-truck-van-or-stall-on-public-areas/index.tsx
@@ -32,8 +32,6 @@ export default function Page() {
 							<ContentBleed visible={{ md: false }}>
 								<SideNav
 									activePath={router.asPath}
-									title="Services"
-									titleLink="/services"
 									items={[
 										{
 											href: '/not-found',
@@ -95,17 +93,19 @@ export default function Page() {
 											label: 'Real estate and property',
 										},
 									]}
+									title="Services"
+									titleLink="/services"
 								/>
 							</ContentBleed>
 						</Column>
 
 						<Column
 							as="main"
-							id="main-content"
-							tabIndex={-1}
-							css={{ '&:focus': { outline: 'none' } }}
 							columnSpan={{ xs: 12, md: 8 }}
 							columnStart={{ lg: 5 }}
+							css={{ '&:focus': { outline: 'none' } }}
+							id="main-content"
+							tabIndex={-1}
 						>
 							<Stack gap={3}>
 								<Breadcrumbs
@@ -124,14 +124,13 @@ export default function Page() {
 								/>
 								<Stack gap={1.5}>
 									<H1>Operate a food truck, van or stall on public areas</H1>
-									<Text as="p" fontSize="md" color="muted">
+									<Text as="p" color="muted" fontSize="md">
 										If you are preparing and or handling food for retail sale
 										from a vehicle or stall, you must have approval to operate
 										on public areas.
 									</Text>
 								</Stack>
 								<InpageNav
-									title="On this page"
 									links={[
 										{
 											href: '#who-needs-to-do-this',
@@ -144,6 +143,7 @@ export default function Page() {
 										{ href: '#how-to-apply', label: 'How to apply' },
 										{ href: '#more-information', label: 'More information' },
 									]}
+									title="On this page"
 								/>
 
 								<Stack alignItems="flex-start" gap={1.5}>
diff --git a/yourgov/pages/services/index.tsx b/yourgov/pages/services/index.tsx
index 09229a9f6d01..9c8c892986b9 100644
--- a/yourgov/pages/services/index.tsx
+++ b/yourgov/pages/services/index.tsx
@@ -30,19 +30,19 @@ export default function Page() {
 							<H2>Popular for businesses</H2>
 							<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
 								<ServiceCard
+									description="Link a business to access services online. You will need to use Relationship Authorisation Manager (RAM)."
 									href="/not-found"
 									title="Link a business"
-									description="Link a business to access services online. You will need to use Relationship Authorisation Manager (RAM)."
 								/>
 								<ServiceCard
+									description="Food trucks, vans and stalls must be registered to operate on public areas."
 									href="/services/food-drink-hospitality/operate-a-food-truck-van-or-stall-on-public-areas"
 									title="Operate a food truck, van or stall on public areas"
-									description="Food trucks, vans and stalls must be registered to operate on public areas."
 								/>
 								<ServiceCard
+									description="Your business may be eligible for a business parking permit if it requires a vehicle for carrying goods or equipment"
 									href="/not-found"
 									title="Business parking permits"
-									description="Your business may be eligible for a business parking permit if it requires a vehicle for carrying goods or equipment"
 								/>
 							</Columns>
 							<CallToActionLink href="/not-found">
@@ -53,19 +53,19 @@ export default function Page() {
 							<H2>Popular for individuals</H2>
 							<Columns as="ul" cols={{ xs: 1, sm: 2, md: 3 }}>
 								<ServiceCard
+									description="You can update your rates mailing address by using our online form."
 									href="/not-found"
 									title="Change my address"
-									description="You can update your rates mailing address by using our online form."
 								/>
 								<ServiceCard
+									description="You can pay rates online by cheque, money order or BPAY, or set up a direct debit."
 									href="/not-found"
 									title="Pay my rates"
-									description="You can pay rates online by cheque, money order or BPAY, or set up a direct debit."
 								/>
 								<ServiceCard
+									description="Parking permits are issued to eligible residents for the parking area where they live."
 									href="/not-found"
 									title="Apply for a parking permit"
-									description="Parking permits are issued to eligible residents for the parking area where they live."
 								/>
 							</Columns>
 							<CallToActionLink href="/not-found">
@@ -121,7 +121,7 @@ function ServiceCard({
 	description?: string;
 }) {
 	return (
-		<Card as="li" shadow clickable>
+		<Card as="li" clickable shadow>
 			<CardInner>
 				<Stack gap={1}>
 					<H3>
diff --git a/yourgov/pages/services/registrations/index.tsx b/yourgov/pages/services/registrations/index.tsx
index ad1a922d5598..a4592abe54b3 100644
--- a/yourgov/pages/services/registrations/index.tsx
+++ b/yourgov/pages/services/registrations/index.tsx
@@ -46,9 +46,9 @@ export default function Page() {
 						{registrationId && (
 							<PageAlert
 								ref={pageAlertRef}
+								tabIndex={-1}
 								title="Your pet registration has been submitted"
 								tone="success"
-								tabIndex={-1}
 							>
 								<Text as="p">
 									Registration application number {registrationId}
diff --git a/yourgov/pages/services/registrations/pet/index.tsx b/yourgov/pages/services/registrations/pet/index.tsx
index 223f50ffa96a..3a7a6b48eab9 100644
--- a/yourgov/pages/services/registrations/pet/index.tsx
+++ b/yourgov/pages/services/registrations/pet/index.tsx
@@ -48,13 +48,13 @@ const Page: NextPageWithLayout = () => {
 								]}
 							/>
 							<PageTitle
-								title="Register a pet"
-								introduction="Registering domestic animals is a requirement of pet ownership. Complete the following 2 tasks to register a pet."
 								callToAction={
 									<Text as="p" color="muted">
 										Takes around 10 minutes.
 									</Text>
 								}
+								introduction="Registering domestic animals is a requirement of pet ownership. Complete the following 2 tasks to register a pet."
+								title="Register a pet"
 							/>
 							<Stack gap={1.5}>
 								<H2>Registration requirements</H2>
diff --git a/yourgov/pages/services/registrations/pet/task-1/index.tsx b/yourgov/pages/services/registrations/pet/task-1/index.tsx
index 0961c21a1438..387708a6f601 100644
--- a/yourgov/pages/services/registrations/pet/task-1/index.tsx
+++ b/yourgov/pages/services/registrations/pet/task-1/index.tsx
@@ -23,14 +23,14 @@ const Page: NextPageWithLayout = () => {
 					<Column columnSpan={{ xs: 12, md: 8 }}>
 						<Stack gap={3}>
 							<DirectionLink
-								href="/services/registrations/pet"
 								direction="left"
+								href="/services/registrations/pet"
 							>
 								Back
 							</DirectionLink>
 							<PageTitle
-								title="Your personal details"
 								introduction="To complete this process you can check, update and confirm your current contact and address details."
+								title="Your personal details"
 							/>
 							<Stack gap={1.5}>
 								<H2>Registration requirements</H2>
diff --git a/yourgov/pages/services/registrations/pet/task-2/index.tsx b/yourgov/pages/services/registrations/pet/task-2/index.tsx
index 4a330a21d9df..acf11dce0769 100644
--- a/yourgov/pages/services/registrations/pet/task-2/index.tsx
+++ b/yourgov/pages/services/registrations/pet/task-2/index.tsx
@@ -25,14 +25,14 @@ const Page: NextPageWithLayout = () => {
 					<Column columnSpan={{ xs: 12, md: 8 }}>
 						<Stack gap={3}>
 							<DirectionLink
-								href="/services/registrations/pet"
 								direction="left"
+								href="/services/registrations/pet"
 							>
 								Back
 							</DirectionLink>
 							<PageTitle
-								title="Your pet’s details"
 								introduction="Under state regulation you are required to register any pet living with you in your domestic residence in an urban zone."
+								title="Your pet’s details"
 							/>
 							<Stack gap={1.5}>
 								<H2>Registration requirements</H2>
diff --git a/yourgov/pages/sign-in.tsx b/yourgov/pages/sign-in.tsx
index 7f45230f3513..c3037ac5bd95 100644
--- a/yourgov/pages/sign-in.tsx
+++ b/yourgov/pages/sign-in.tsx
@@ -50,8 +50,8 @@ export default function Page() {
 								</DirectionLink>
 								<Stack gap={0.5}>
 									<PageTitle
-										title="Sign in to yourGov"
 										introduction="Access government services, quickly and securely"
+										title="Sign in to yourGov"
 									/>
 								</Stack>
 								<SignInForm onSubmit={onSubmit} />
@@ -127,8 +127,8 @@ function SignInForm(props: { onSubmit: (data: FormSchema) => void }) {
 				<PageAlert
 					ref={clientErrorPageAlertRef}
 					tabIndex={-1}
-					tone="error"
 					title="There is a problem"
+					tone="error"
 				>
 					<Text as="p">Please correct the following fields and try again</Text>
 					<UnorderedList>
@@ -143,34 +143,34 @@ function SignInForm(props: { onSubmit: (data: FormSchema) => void }) {
 				</PageAlert>
 			)}
 			{isSubmitting && <LoadingBlanket fullScreen label="Signing in" />}
-			<form onSubmit={handleSubmit(onSubmit, onError)} noValidate>
+			<form noValidate onSubmit={handleSubmit(onSubmit, onError)}>
 				<FormStack>
 					<TextInput
-						autoComplete="email"
-						label="Email"
-						type="email"
 						{...register('email')}
+						autoComplete="email"
 						id="email"
 						invalid={Boolean(errors.email?.message)}
-						message={errors.email?.message}
+						label="Email"
 						maxWidth="xl"
+						message={errors.email?.message}
 						required
+						type="email"
 					/>
 					<PasswordInput
-						autoComplete="current-password"
-						label="Password"
 						{...register('password')}
+						autoComplete="current-password"
 						id="password"
 						invalid={Boolean(errors.password?.message)}
-						message={errors.password?.message}
+						label="Password"
 						maxWidth="xl"
+						message={errors.password?.message}
 						required
 					/>
 					<div>
 						<TextLink href="/not-found">Forgot password?</TextLink>
 					</div>
 					<div>
-						<Button type="submit" loading={isSubmitting}>
+						<Button loading={isSubmitting} type="submit">
 							Sign in
 						</Button>
 					</div>
diff --git a/yourgov/pages/sign-out.tsx b/yourgov/pages/sign-out.tsx
index 0cef68b0cdbb..2bfb8ce8a917 100644
--- a/yourgov/pages/sign-out.tsx
+++ b/yourgov/pages/sign-out.tsx
@@ -25,7 +25,7 @@ export default function Page() {
 						<Column columnSpan={{ xs: 12, md: 8 }}>
 							<Stack gap={1.5}>
 								<H1>Sign out</H1>
-								<PageAlert tone="success" title="Sign out successful">
+								<PageAlert title="Sign out successful" tone="success">
 									<Text>You have been successfully signed out.</Text>
 								</PageAlert>
 							</Stack>