From 225aa9a3c61d6c69bbbcc9907885d3099d760f63 Mon Sep 17 00:00:00 2001
From: DipperTheDan <daniel.dipper@sage.com>
Date: Tue, 29 Oct 2024 16:32:44 +0000
Subject: [PATCH] chore: update prettier to v3.3.3

---
 package-lock.json                             |   15 +-
 package.json                                  |    2 +-
 playwright/components/draggable/index.ts      |    2 +-
 playwright/components/flat-table/index.ts     |    2 +-
 playwright/components/pager/index.ts          |    8 +-
 .../components/progress-tracker/index.ts      |    2 +-
 playwright/components/select/index.ts         |    2 +-
 playwright/support/helper.ts                  |   40 +-
 .../character-count.component.tsx             |   10 +-
 .../character-count/character-count.test.tsx  |   16 +-
 .../checkable-input.component.tsx             |   26 +-
 .../checkable-input/checkable-input.test.tsx  |    6 +-
 .../hidden-checkable-input.component.tsx      |    4 +-
 .../hidden-checkable-input.test.tsx           |   16 +-
 .../fieldset/fieldset.component.tsx           |    2 +-
 src/__internal__/fieldset/fieldset.test.tsx   |   20 +-
 .../filter-object-properties.ts               |   10 +-
 .../focus-trap/focus-trap-utils.ts            |  105 +-
 .../focus-trap/focus-trap.component.tsx       |   36 +-
 .../focus-trap/focus-trap.test.tsx            |   68 +-
 .../form-field/form-field.component.tsx       |   11 +-
 .../form-field/form-field.test.tsx            |   18 +-
 .../form-spacing.context.ts                   |    2 +-
 .../input-behaviour/useInputBehaviour.ts      |    6 +-
 .../input-icon-toggle.style.ts                |    4 +-
 .../input-icon-toggle.test.tsx                |   58 +-
 .../input/input-presentation.component.tsx    |   11 +-
 .../input/input-presentation.test.tsx         |   27 +-
 src/__internal__/input/input.component.tsx    |    8 +-
 src/__internal__/input/input.test.tsx         |    8 +-
 src/__internal__/label/label.component.tsx    |    6 +-
 src/__internal__/label/label.test.tsx         |   22 +-
 .../popover/popover.component.tsx             |    2 +-
 src/__internal__/popover/popover.test.tsx     |   20 +-
 .../radio-button-mapper.component.tsx         |    9 +-
 .../radio-button-mapper.test.tsx              |   16 +-
 .../sticky-footer/sticky-footer.component.tsx |    2 +-
 src/__internal__/tooltip-provider/index.tsx   |    5 +-
 .../utils/helpers/events/events.test.ts       |    6 +-
 .../utils/helpers/events/events.ts            |    2 +-
 src/__internal__/utils/helpers/tags/tags.ts   |    2 +-
 src/__internal__/utils/logger/logger.test.ts  |    2 +-
 .../validations/validation-icon.component.tsx |   15 +-
 .../validations/validation-icon.test.tsx      |   14 +-
 src/__spec_helper__/__internal__/expect.ts    |    2 +-
 .../__internal__/select-test-utils.ts         |    2 +-
 .../__internal__/test-utils.ts                |  158 ++-
 src/__spec_helper__/mock-dom-rect.ts          |    4 +-
 src/__spec_helper__/mock-match-media.ts       |    2 +-
 .../accordion-group.component.tsx             |   14 +-
 .../accordion/accordion.component.tsx         |   20 +-
 src/components/accordion/accordion.pw.tsx     |  104 +-
 .../accordion/accordion.stories.tsx           |    2 +-
 src/components/accordion/accordion.test.tsx   |   60 +-
 .../accordion/components.test-pw.tsx          |    2 +-
 .../__internal__/action-popover-utils.tsx     |    4 +-
 .../__internal__/action-popover.context.ts    |    5 +-
 .../action-popover-item.component.tsx         |   28 +-
 .../action-popover-menu.component.tsx         |   24 +-
 .../action-popover-test.stories.tsx           |   14 +-
 .../action-popover.component.tsx              |   14 +-
 .../action-popover/action-popover.pw.tsx      |  481 +++----
 .../action-popover/action-popover.style.ts    |   48 +-
 .../action-popover/action-popover.test.tsx    |  343 ++---
 .../action-popover/components.test-pw.tsx     |   14 +-
 .../advanced-color-picker.component.tsx       |   26 +-
 .../advanced-color-picker.pw.tsx              |  569 ++++----
 .../advanced-color-picker.test.tsx            |   22 +-
 src/components/alert/alert.pw.tsx             |    8 +-
 src/components/alert/alert.test.tsx           |    6 +-
 .../anchor-navigation-item.component.tsx      |    4 +-
 .../anchor-navigation.component.tsx           |   24 +-
 .../anchor-navigation.pw.tsx                  |   20 +-
 .../anchor-navigation.test.tsx                |   44 +-
 src/components/badge/badge.pw.tsx             |    6 +-
 .../batch-selection/batch-selection.pw.tsx    |   76 +-
 .../batch-selection/batch-selection.test.tsx  |   14 +-
 src/components/box/box.component.tsx          |    6 +-
 src/components/box/box.pw.tsx                 |  166 ++-
 src/components/box/box.test.tsx               |   16 +-
 .../breadcrumbs/breadcrumbs.component.tsx     |    2 +-
 src/components/breadcrumbs/breadcrumbs.pw.tsx |   34 +-
 .../breadcrumbs/breadcrumbs.test.tsx          |   12 +-
 .../breadcrumbs/crumb/crumb.component.tsx     |    2 +-
 .../breadcrumbs/crumb/crumb.style.ts          |   11 +-
 .../breadcrumbs/crumb/crumb.test.tsx          |    6 +-
 src/components/button-bar/button-bar.pw.tsx   |  103 +-
 .../button-bar/button-bar.stories.tsx         |    6 +-
 src/components/button-bar/button-bar.test.tsx |   18 +-
 .../button-minor/button-minor.component.tsx   |    4 +-
 .../button-minor/button-minor.pw.tsx          |  276 ++--
 .../button-minor/button-minor.stories.tsx     |    2 +-
 .../button-minor/button-minor.test.tsx        |    6 +-
 .../button-toggle-group-test.stories.tsx      |    2 +-
 .../button-toggle-group.component.tsx         |    6 +-
 .../button-toggle-group.test.tsx              |   50 +-
 .../button-toggle-test.stories.tsx            |    2 +-
 .../button-toggle/button-toggle.component.tsx |    6 +-
 .../button-toggle/button-toggle.pw.tsx        |  312 ++---
 .../button-toggle/button-toggle.stories.tsx   |    6 +-
 .../button-toggle/button-toggle.style.ts      |   43 +-
 .../button-toggle/button-toggle.test.tsx      |   18 +-
 .../button-toggle/components.test-pw.tsx      |    4 +-
 src/components/button/button-test.stories.tsx |    2 +-
 src/components/button/button.component.tsx    |   19 +-
 src/components/button/button.pw.tsx           |   76 +-
 src/components/button/button.stories.tsx      |    2 +-
 src/components/button/button.test.tsx         |   34 +-
 src/components/button/components.test-pw.tsx  |    2 +-
 .../top-modal-provider.component.tsx          |    7 +-
 .../__internal__/top-modal.test.tsx           |    2 +-
 .../carbon-provider/carbon-provider.pw.tsx    |  167 ++-
 .../card/card-column/card-column.test.tsx     |    6 +-
 .../card/card-footer/card-footer.test.tsx     |   14 +-
 .../card/card-row/card-row.test.tsx           |    8 +-
 src/components/card/card-test.stories.tsx     |    4 +-
 src/components/card/card.component.tsx        |    4 +-
 src/components/card/card.config.ts            |    4 +-
 src/components/card/card.pw.tsx               |   40 +-
 src/components/card/card.stories.tsx          |    2 +-
 src/components/card/card.style.ts             |    2 +-
 src/components/card/card.test.tsx             |   20 +-
 src/components/card/components.test-pw.tsx    |    4 +-
 .../checkbox-group/checkbox-group.test.tsx    |   22 +-
 .../checkbox/checkbox.component.tsx           |    6 +-
 src/components/checkbox/checkbox.pw.tsx       |  415 +++---
 src/components/checkbox/checkbox.test.tsx     |   34 +-
 src/components/confirm/confirm.component.tsx  |    4 +-
 src/components/confirm/confirm.pw.tsx         |  128 +-
 src/components/confirm/confirm.test.tsx       |   36 +-
 src/components/content/content.pw.tsx         |   24 +-
 src/components/content/content.test.tsx       |    2 +-
 .../date-range/date-range.component.tsx       |   13 +-
 src/components/date-range/date-range.pw.tsx   |  119 +-
 .../date-range/date-range.stories.tsx         |  116 +-
 src/components/date-range/date-range.test.tsx |  116 +-
 .../date-formats/date-formats.test.ts         |   14 +-
 .../date/__internal__/date-formats/index.ts   |    6 +-
 .../date-picker/date-picker.component.tsx     |   26 +-
 .../date-picker/date-picker.test.tsx          |   36 +-
 .../date-picker/day-picker.style.ts           |    8 +-
 .../date/__internal__/navbar/navbar.test.tsx  |    6 +-
 .../date/__internal__/utils.test.ts           |   38 +-
 src/components/date/__internal__/utils.ts     |   18 +-
 src/components/date/components.test-pw.tsx    |    8 +-
 src/components/date/date.component.tsx        |   43 +-
 src/components/date/date.pw.tsx               |  468 +++----
 src/components/date/date.stories.tsx          |   90 +-
 src/components/date/date.test.tsx             |  144 +-
 src/components/decimal/components.test-pw.tsx |   17 +-
 .../decimal/decimal-test.stories.tsx          |    5 +-
 src/components/decimal/decimal.component.tsx  |   32 +-
 src/components/decimal/decimal.pw.tsx         |  411 +++---
 src/components/decimal/decimal.stories.tsx    |   11 +-
 src/components/decimal/decimal.test.tsx       |   78 +-
 .../definition-list/dd/dd.stories.tsx         |    2 +-
 .../definition-list-test.stories.tsx          |    2 +-
 .../definition-list/definition-list.pw.tsx    |   16 +-
 .../definition-list/definition-list.test.tsx  |   14 +-
 .../definition-list/dt/dt.stories.tsx         |    2 +-
 src/components/detail/detail.test.tsx         |    8 +-
 .../dialog-full-screen/components.test-pw.tsx |   65 +-
 .../dialog-full-screen.component.tsx          |    4 +-
 .../dialog-full-screen.pw.tsx                 |   54 +-
 .../dialog-full-screen.test.tsx               |   44 +-
 src/components/dialog/components.test-pw.tsx  |    4 +-
 src/components/dialog/dialog-test.stories.tsx |    4 +-
 src/components/dialog/dialog.component.tsx    |   12 +-
 src/components/dialog/dialog.config.ts        |    2 +-
 src/components/dialog/dialog.pw.tsx           |  510 ++++---
 src/components/dialog/dialog.style.ts         |    7 +-
 src/components/dialog/dialog.test.tsx         |   32 +-
 .../dismissible-box/components.test-pw.tsx    |    2 +-
 .../dismissible-box/dismissable-box.test.tsx  |    8 +-
 .../dismissible-box.component.tsx             |    2 +-
 .../dismissible-box/dismissible-box.pw.tsx    |  136 +-
 .../draggable-container.component.tsx         |   14 +-
 .../draggable-item.component.tsx              |    9 +-
 .../draggable-item/draggable-item.stories.tsx |    2 +-
 src/components/draggable/draggable.pw.tsx     |    4 +-
 src/components/draggable/draggable.test.tsx   |   22 +-
 src/components/drawer/drawer.component.tsx    |   10 +-
 src/components/drawer/drawer.pw.tsx           |  205 ++-
 src/components/drawer/drawer.stories.tsx      |    2 +-
 src/components/drawer/drawer.style.ts         |   41 +-
 src/components/drawer/drawer.test.tsx         |   46 +-
 .../__internal__/duelling-picklist.context.ts |    2 +-
 .../duelling-picklist/components.test-pw.tsx  |   84 +-
 .../duelling-picklist-test.stories.tsx        |   25 +-
 .../duelling-picklist.component.tsx           |    2 +-
 .../duelling-picklist.pw.tsx                  |  420 +++---
 .../duelling-picklist.stories.tsx             |   53 +-
 .../duelling-picklist.test.tsx                |   92 +-
 .../picklist-group.component.tsx              |   12 +-
 .../picklist-group/picklist-group.test.tsx    |   40 +-
 .../picklist-item/picklist-item.component.tsx |    6 +-
 .../picklist-item/picklist-item.test.tsx      |   12 +-
 .../picklist/picklist.component.tsx           |   15 +-
 .../fieldset/fieldset.component.tsx           |    2 +-
 src/components/fieldset/fieldset.pw.tsx       |   46 +-
 src/components/fieldset/fieldset.test.tsx     |    8 +-
 .../file-upload-status.test.tsx               |   44 +-
 .../file-input/file-input.component.tsx       |    4 +-
 src/components/file-input/file-input.pw.tsx   |   34 +-
 src/components/file-input/file-input.test.tsx |   42 +-
 .../__internal__/build-position-map.ts        |    2 +-
 .../flat-table/__internal__/use-table-cell.ts |    8 +-
 .../flat-table/components.test-pw.tsx         |  103 +-
 .../flat-table-body-draggable.component.tsx   |   10 +-
 .../flat-table-body-draggable.test.tsx        |   12 +-
 .../flat-table-body/flat-table-body.test.tsx  |    2 +-
 .../flat-table-cell/flat-table-cell.test.tsx  |   36 +-
 .../flat-table-checkbox.test.tsx              |   24 +-
 .../flat-table-expandable.stories.tsx         |  109 +-
 .../flat-table-head.component.tsx             |    4 +-
 .../flat-table-head/flat-table-head.test.tsx  |    2 +-
 .../flat-table-header-utils.ts                |    2 +-
 .../flat-table-header.component.tsx           |    2 +-
 .../flat-table-header.stories.tsx             |    2 +-
 .../flat-table-header.test.tsx                |   34 +-
 .../flat-table-row-header.component.tsx       |    4 +-
 .../flat-table-row-header.stories.tsx         |    2 +-
 .../flat-table-row-header.style.ts            |    6 +-
 .../flat-table-row-header.test.tsx            |   64 +-
 .../flat-table-row.component.tsx              |   32 +-
 .../flat-table-row/flat-table-row.style.ts    |    2 +-
 .../flat-table-row/flat-table-row.test.tsx    |  210 +--
 .../flat-table/flat-table-test.stories.tsx    |    2 +-
 .../flat-table/flat-table.component.tsx       |   28 +-
 src/components/flat-table/flat-table.pw.tsx   |  536 +++----
 .../flat-table/flat-table.stories.tsx         |   14 +-
 src/components/flat-table/flat-table.style.ts |   33 +-
 src/components/flat-table/flat-table.test.tsx |  172 +--
 src/components/flat-table/sort/sort.test.tsx  |   20 +-
 .../__internal__/form-summary.component.tsx   |    2 +-
 src/components/form/form-test.stories.tsx     |    2 +-
 src/components/form/form.config.ts            |    2 +-
 src/components/form/form.pw.tsx               |  138 +-
 src/components/form/form.style.ts             |    2 +-
 src/components/form/form.test.tsx             |   38 +-
 .../required-fields-indicator.test.tsx        |    2 +-
 .../global-header/global-header.pw.tsx        |    2 +-
 .../global-header/global-header.test.tsx      |    2 +-
 src/components/grid/grid.pw.tsx               |   26 +-
 .../grouped-character/components.test-pw.tsx  |   10 +-
 .../grouped-character.component.tsx           |   12 +-
 .../grouped-character.pw.tsx                  |  235 ++--
 .../grouped-character.stories.tsx             |   13 +-
 .../grouped-character.test.tsx                |   36 +-
 .../grouped-character.utils.ts                |    2 +-
 src/components/heading/heading.component.tsx  |    2 +-
 src/components/heading/heading.pw.tsx         |  237 ++--
 src/components/heading/heading.test.tsx       |   24 +-
 src/components/help/help.pw.tsx               |   72 +-
 src/components/help/help.test.tsx             |    8 +-
 src/components/hr/hr.pw.tsx                   |    6 +-
 src/components/hr/hr.stories.tsx              |    2 +-
 src/components/hr/hr.test.tsx                 |    4 +-
 .../i18n-provider/i18n-provider.test.tsx      |   16 +-
 .../icon-button/icon-button.component.tsx     |   14 +-
 src/components/icon-button/icon-button.pw.tsx |   93 +-
 .../icon-button/icon-button.test.tsx          |   16 +-
 src/components/icon/icon-test.stories.tsx     |    4 +-
 src/components/icon/icon.component.tsx        |   10 +-
 src/components/icon/icon.pw.tsx               |  179 +--
 src/components/icon/icon.stories.tsx          |   31 +-
 src/components/icon/icon.style.ts             |    2 +-
 src/components/icon/icon.test.tsx             |   34 +-
 src/components/image/image.component.tsx      |    4 +-
 src/components/image/image.pw.tsx             |    2 +-
 src/components/image/image.style.ts           |    2 +-
 src/components/image/image.test.tsx           |   34 +-
 .../inline-inputs/inline-inputs.component.tsx |    2 +-
 .../inline-inputs/inline-inputs.pw.tsx        |   62 +-
 .../inline-inputs/inline-inputs.test.tsx      |   24 +-
 .../link-preview/link-preview.pw.tsx          |   20 +-
 .../link-preview/link-preview.test.tsx        |    4 +-
 src/components/link/link.component.tsx        |   12 +-
 src/components/link/link.pw.tsx               |   99 +-
 src/components/link/link.test.tsx             |   40 +-
 .../loader-bar/loader-bar.component.tsx       |    2 +-
 src/components/loader-bar/loader-bar.pw.tsx   |   26 +-
 src/components/loader-bar/loader-bar.test.tsx |    2 +-
 .../loader-spinner.component.tsx              |    2 +-
 .../loader-spinner/loader-spinner.config.ts   |    4 +-
 .../loader-spinner/loader-spinner.pw.tsx      |   76 +-
 .../loader-spinner/loader-spinner.style.ts    |   17 +-
 .../loader-spinner/loader-spinner.test.tsx    |   44 +-
 .../loader-star/loader-star.component.tsx     |    2 +-
 src/components/loader-star/loader-star.pw.tsx |    2 +-
 src/components/loader/loader-square.style.ts  |    2 +-
 src/components/loader/loader-square.test.tsx  |   12 +-
 src/components/loader/loader.component.tsx    |    2 +-
 src/components/loader/loader.pw.tsx           |    6 +-
 src/components/loader/loader.test.tsx         |    4 +-
 .../keyboard-navigation/index.test.tsx        |    8 +-
 .../__internal__/keyboard-navigation/index.ts |    4 +-
 .../submenu/submenu.component.tsx             |   44 +-
 .../__internal__/submenu/submenu.test.tsx     |   38 +-
 src/components/menu/component.test-pw.tsx     |   20 +-
 .../menu-divider/menu-divider.component.tsx   |    2 +-
 .../menu/menu-divider/menu-divider.test.tsx   |   10 +-
 .../menu-full-screen.component.tsx            |    6 +-
 .../menu-full-screen.test.tsx                 |   30 +-
 .../menu/menu-item/menu-item.component.tsx    |   18 +-
 .../menu/menu-item/menu-item.stories.tsx      |    2 +-
 .../menu/menu-item/menu-item.test.tsx         |  142 +-
 .../menu-segment-title.component.tsx          |    6 +-
 .../menu-segment-title.test.tsx               |   52 +-
 src/components/menu/menu-test.stories.tsx     |    2 +-
 src/components/menu/menu.component.tsx        |    4 +-
 src/components/menu/menu.pw.tsx               | 1233 ++++++++---------
 src/components/menu/menu.stories.tsx          |    6 +-
 src/components/menu/menu.test.tsx             |   26 +-
 .../scrollable-block.test.tsx                 |   34 +-
 .../message/message-test.stories.tsx          |    2 +-
 src/components/message/message.component.tsx  |    6 +-
 src/components/message/message.pw.tsx         |   81 +-
 src/components/message/message.stories.tsx    |    2 +-
 src/components/message/message.test.tsx       |   22 +-
 .../modal/__internal__/modal-manager.ts       |    2 +-
 src/components/modal/modal.component.tsx      |    2 +-
 src/components/modal/modal.test.tsx           |    6 +-
 .../components.test-pw.tsx                    |    6 +-
 .../multi-action-button.component.tsx         |    2 +-
 .../multi-action-button.pw.tsx                |  841 ++++++-----
 .../multi-action-button.stories.tsx           |    6 +-
 .../multi-action-button.test.tsx              |   30 +-
 .../fixed-navigation-bar-context.test.tsx     |   12 +-
 .../fixed-navigation-bar.context.tsx          |    6 +-
 .../navigation-bar/navigation-bar.pw.tsx      |   18 +-
 .../navigation-bar/navigation-bar.test.tsx    |   40 +-
 .../status-icon/status-icon.component.tsx     |    2 +-
 src/components/note/components.test-pw.tsx    |    4 +-
 src/components/note/note-test.stories.tsx     |    6 +-
 src/components/note/note.component.tsx        |    8 +-
 src/components/note/note.pw.tsx               |    8 +-
 src/components/note/note.stories.tsx          |   12 +-
 src/components/note/note.style.ts             |    2 +-
 src/components/note/note.test.tsx             |   26 +-
 .../number/number-validation-test.stories.tsx |    2 +-
 src/components/number/number.component.tsx    |   12 +-
 src/components/number/number.pw.tsx           |  250 ++--
 src/components/number/number.test.tsx         |    2 +-
 .../numeral-date-test.stories.tsx             |    4 +-
 .../numeral-date/numeral-date.component.tsx   |   36 +-
 .../numeral-date/numeral-date.pw.tsx          |  345 ++---
 .../numeral-date/numeral-date.test.tsx        |  309 +++--
 .../pager-navigation-link.component.tsx       |    6 +-
 .../pager-navigation.component.tsx            |   12 +-
 .../__internal__/pager-navigation.test.tsx    |   24 +-
 src/components/pager/pager-test.stories.tsx   |   10 +-
 src/components/pager/pager.component.tsx      |   30 +-
 src/components/pager/pager.pw.tsx             |  126 +-
 src/components/pager/pager.style.ts           |   11 +-
 src/components/pager/pager.test.tsx           |   60 +-
 src/components/pages/components.test-pw.tsx   |    8 +-
 src/components/pages/page/page.test.tsx       |    2 +-
 src/components/pages/pages-test.stories.tsx   |    8 +-
 src/components/pages/pages.component.tsx      |    4 +-
 src/components/pages/pages.pw.tsx             |   12 +-
 src/components/pages/pages.stories.tsx        |    2 +-
 src/components/pages/pages.test.tsx           |   10 +-
 .../password/components.test-pw.tsx           |    2 +-
 src/components/password/password.pw.tsx       |   96 +-
 src/components/password/password.stories.tsx  |    2 +-
 src/components/password/password.test.tsx     |    2 +-
 src/components/pill/pill.component.tsx        |    4 +-
 src/components/pill/pill.pw.tsx               |  242 ++--
 src/components/pill/pill.style.ts             |    4 +-
 src/components/pill/pill.test.tsx             |   54 +-
 src/components/pod/pod.component.tsx          |   55 +-
 src/components/pod/pod.config.ts              |    6 +-
 src/components/pod/pod.pw.tsx                 |  367 ++---
 src/components/pod/pod.style.ts               |   93 +-
 src/components/pod/pod.test.tsx               |   44 +-
 .../popover-container/components.test-pw.tsx  |    8 +-
 .../popover-container-test.stories.tsx        |    2 +-
 .../popover-container.component.tsx           |   29 +-
 .../popover-container.pw.tsx                  |  108 +-
 .../popover-container.stories.tsx             |    2 +-
 .../popover-container.test.tsx                |   50 +-
 src/components/portal/portal.test.tsx         |    6 +-
 src/components/portal/portal.tsx              |    2 +-
 .../portrait/portrait.component.tsx           |    4 +-
 src/components/portrait/portrait.pw.tsx       |  135 +-
 src/components/portrait/portrait.test.tsx     |   16 +-
 src/components/preview/preview.component.tsx  |    4 +-
 src/components/preview/preview.pw.tsx         |    4 +-
 src/components/preview/preview.test.tsx       |   10 +-
 src/components/profile/profile.component.tsx  |    2 +-
 src/components/profile/profile.pw.tsx         |  102 +-
 src/components/profile/profile.test.tsx       |   16 +-
 .../progress-tracker/progress-tracker.pw.tsx  |  116 +-
 .../progress-tracker.style.ts                 |    7 +-
 .../progress-tracker.test.tsx                 |   26 +-
 .../radio-button-group.component.tsx          |    6 +-
 .../radio-button-group.test.tsx               |   38 +-
 .../radio-button/radio-button.component.tsx   |    8 +-
 .../radio-button/radio-button.pw.tsx          |  269 ++--
 .../radio-button/radio-button.test.tsx        |   22 +-
 src/components/search/search.component.tsx    |   10 +-
 src/components/search/search.pw.tsx           |  214 ++-
 src/components/search/search.stories.tsx      |   51 +-
 src/components/search/search.test.tsx         |   60 +-
 .../list-action-button.component.tsx          |    8 +-
 .../list-action-button.style.ts               |    4 +-
 .../list-action-button.test.tsx               |    4 +-
 .../select-list/select-list.component.tsx     |   56 +-
 .../select-list/select-list.test.tsx          |  172 +--
 .../select-textbox.component.tsx              |    6 +-
 .../select-textbox/select-textbox.context.ts  |    5 +-
 .../select-textbox/select-textbox.test.tsx    |   24 +-
 .../utils/get-next-child-by-text.test.tsx     |   16 +-
 .../utils/get-next-child-by-text.ts           |    6 +-
 .../utils/get-next-index-by-key.ts            |    2 +-
 .../utils/highlight-part-of-text.tsx          |   10 +-
 .../utils/is-expected-option.test.tsx         |   16 +-
 .../__internal__/utils/is-expected-option.ts  |    2 +-
 .../utils/is-expected-value.test.ts           |    4 +-
 .../__internal__/utils/is-expected-value.ts   |    2 +-
 .../utils/is-navigation-key.test.ts           |    2 +-
 .../__internal__/utils/with-filter.hoc.tsx    |   12 +-
 .../__internal__/utils/with-filter.test.tsx   |    2 +-
 .../filterable-select/components.test-pw.tsx  |   22 +-
 .../filterable-select-test.stories.tsx        |   20 +-
 .../filterable-select.component.tsx           |   52 +-
 .../filterable-select.pw.tsx                  |  341 ++---
 .../filterable-select.stories.tsx             |   13 +-
 .../filterable-select.test.tsx                |  262 ++--
 .../multi-select/components.test-pw.tsx       |   40 +-
 .../multi-select-test.stories.tsx             |   38 +-
 .../multi-select/multi-select.component.tsx   |   44 +-
 .../select/multi-select/multi-select.pw.tsx   |  304 ++--
 .../multi-select/multi-select.stories.tsx     |   11 +-
 .../select/multi-select/multi-select.test.tsx |  176 +--
 .../option-group-header.component.tsx         |    6 +-
 .../option-group-header.test.tsx              |   10 +-
 .../option-row/option-row.component.tsx       |    4 +-
 .../select/option-row/option-row.test.tsx     |   42 +-
 .../select/option/option.component.tsx        |    4 +-
 src/components/select/option/option.test.tsx  |   48 +-
 .../simple-select/components.test-pw.tsx      |   18 +-
 .../simple-select-test.stories.tsx            |   16 +-
 .../simple-select/simple-select.component.tsx |   41 +-
 .../select/simple-select/simple-select.pw.tsx |  432 +++---
 .../simple-select/simple-select.stories.tsx   |    9 +-
 .../simple-select/simple-select.test.tsx      |  136 +-
 .../settings-row/settings-row.pw.tsx          |   18 +-
 .../settings-row/settings-row.test.tsx        |    4 +-
 src/components/sidebar/sidebar.component.tsx  |   10 +-
 src/components/sidebar/sidebar.pw.tsx         |   72 +-
 src/components/sidebar/sidebar.test.tsx       |   34 +-
 .../simple-color-picker.component.tsx         |   18 +-
 .../simple-color-picker.pw.tsx                |  179 +--
 .../simple-color-picker.test.tsx              |   64 +-
 .../simple-color/simple-color.component.tsx   |    2 +-
 .../simple-color/simple-color.test.tsx        |   10 +-
 .../__internal__/split-button.context.ts      |    2 +-
 .../split-button/split-button-toggle.style.ts |    2 +-
 .../split-button/split-button.component.tsx   |    2 +-
 .../split-button/split-button.pw.tsx          |  182 +--
 .../split-button/split-button.test.tsx        |  129 +-
 .../step-flow/components.test-pw.tsx          |    4 +-
 .../step-flow-title.component.tsx             |    2 +-
 .../step-flow-title/step-flow-title.test.tsx  |   14 +-
 .../step-flow/step-flow.component.tsx         |   14 +-
 src/components/step-flow/step-flow.pw.tsx     |   74 +-
 src/components/step-flow/step-flow.test.tsx   |   82 +-
 .../__internal__/switch-slider-panel.style.ts |   12 +-
 .../__internal__/switch-slider-panel.test.tsx |    4 +-
 .../__internal__/switch-slider.test.tsx       |   10 +-
 src/components/switch/switch.component.tsx    |   10 +-
 src/components/switch/switch.pw.tsx           |  320 ++---
 src/components/switch/switch.stories.tsx      |    3 +-
 src/components/switch/switch.style.ts         |   23 +-
 src/components/switch/switch.test.tsx         |   46 +-
 .../tab-title/tab-title.component.tsx         |   12 +-
 .../__internal__/tab-title/tab-title.test.tsx |  157 ++-
 .../tabs-header/tabs-header.component.tsx     |    2 +-
 .../tabs-header/tabs-header.test.tsx          |   14 +-
 src/components/tabs/components.test-pw.tsx    |    4 +-
 src/components/tabs/tab/tab.component.tsx     |    8 +-
 src/components/tabs/tab/tab.test.tsx          |   26 +-
 src/components/tabs/tabs-test.stories.tsx     |    4 +-
 src/components/tabs/tabs.component.tsx        |   23 +-
 src/components/tabs/tabs.pw.tsx               |  323 ++---
 src/components/tabs/tabs.test.tsx             |  366 ++---
 .../__internal__/decorators/link-decorator.ts |    6 +-
 .../editor-link/editor-link.test.tsx          |   12 +-
 .../__internal__/label-wrapper/label.test.tsx |    4 +-
 .../toolbar-button.component.tsx              |    4 +-
 .../toolbar/toolbar.component.tsx             |   16 +-
 .../__internal__/toolbar/toolbar.test.tsx     |   70 +-
 .../__internal__/utils/utils.test.ts          |   34 +-
 .../text-editor/__internal__/utils/utils.ts   |   17 +-
 .../text-editor/components.test-pw.tsx        |    4 +-
 .../text-editor/text-editor.component.tsx     |   26 +-
 src/components/text-editor/text-editor.pw.tsx |   82 +-
 .../text-editor/text-editor.stories.tsx       |   29 +-
 .../text-editor/text-editor.test.tsx          |  160 +--
 .../textarea/components.test-pw.tsx           |    2 +-
 .../textarea/textarea-test.stories.tsx        |    2 +-
 .../textarea/textarea.component.tsx           |   45 +-
 src/components/textarea/textarea.pw.tsx       |  216 +--
 src/components/textarea/textarea.test.tsx     |   98 +-
 src/components/textbox/components.test-pw.tsx |    2 +-
 .../textbox/textbox-test.stories.tsx          |    4 +-
 src/components/textbox/textbox.component.tsx  |   36 +-
 src/components/textbox/textbox.pw.tsx         |  397 +++---
 src/components/textbox/textbox.stories.tsx    |    2 +-
 src/components/textbox/textbox.style.ts       |   23 +-
 src/components/textbox/textbox.test.tsx       |  108 +-
 .../__internal__/accordion/accordion.test.tsx |    6 +-
 .../tile-select/components.test-pw.tsx        |   26 +-
 .../tile-select-group.component.tsx           |    2 +-
 .../tile-select/tile-select.component.tsx     |    6 +-
 src/components/tile-select/tile-select.pw.tsx |   44 +-
 .../tile-select/tile-select.stories.tsx       |   10 +-
 .../tile-select/tile-select.test.tsx          |   30 +-
 .../flex-tile-cell/flex-tile-cell.stories.tsx |    2 +-
 .../flex-tile-cell/flex-tile-cell.test.tsx    |    6 +-
 .../flex-tile-container.test.tsx              |    4 +-
 .../tile/tile-content/tile-content.test.tsx   |    8 +-
 .../tile/tile-footer/tile-footer.test.tsx     |    8 +-
 .../tile/tile-header/tile-header.test.tsx     |   10 +-
 src/components/tile/tile.component.tsx        |    2 +-
 src/components/tile/tile.pw.tsx               |   64 +-
 src/components/tile/tile.stories.tsx          |    2 +-
 src/components/tile/tile.style.ts             |    2 +-
 src/components/tile/tile.test.tsx             |   36 +-
 .../time-toggle/time-toggle.component.tsx     |    2 +-
 src/components/time/time.component.tsx        |   14 +-
 src/components/time/time.pw.tsx               |  150 +-
 src/components/time/time.stories.tsx          |    2 +-
 src/components/time/time.test.tsx             |  164 ++-
 src/components/toast/toast-test.stories.tsx   |    2 +-
 src/components/toast/toast.component.tsx      |   11 +-
 src/components/toast/toast.pw.tsx             |   42 +-
 src/components/toast/toast.test.tsx           |   56 +-
 .../tooltip/tooltip-test.stories.tsx          |    4 +-
 src/components/tooltip/tooltip.component.tsx  |   20 +-
 src/components/tooltip/tooltip.pw.tsx         |  113 +-
 src/components/tooltip/tooltip.stories.tsx    |   14 +-
 src/components/tooltip/tooltip.test.tsx       |   19 +-
 .../typography/typography.component.tsx       |    2 +-
 src/components/typography/typography.pw.tsx   |   28 +-
 src/components/typography/typography.style.ts |    4 +-
 src/components/typography/typography.test.tsx |    8 +-
 .../vertical-divider/components.test-pw.tsx   |    2 +-
 .../vertical-divider-test.stories.tsx         |    2 +-
 .../vertical-divider/vertical-divider.pw.tsx  |   87 +-
 .../vertical-divider.stories.tsx              |    2 +-
 .../vertical-divider.test.tsx                 |    6 +-
 .../vertical-menu/components.test-pw.tsx      |    6 +-
 .../vertical-menu-full-screen.component.tsx   |    4 +-
 .../vertical-menu-full-screen.test.tsx        |   34 +-
 .../vertical-menu-item.test.tsx               |   52 +-
 .../vertical-menu-trigger.test.tsx            |    8 +-
 .../vertical-menu/vertical-menu.pw.tsx        |  203 ++-
 .../vertical-menu/vertical-menu.test.tsx      |   20 +-
 src/global.d.ts                               |    2 +-
 .../useCharacterCount.test.tsx                |   14 +-
 .../useCharacterCount/useCharacterCount.tsx   |    2 +-
 .../useChildButtons/useChildButtons.tsx       |   26 +-
 .../useClickAwayListener.test.tsx             |    8 +-
 .../useClickAwayListener.ts                   |    4 +-
 .../__internal__/useDebounce/useDebounce.ts   |    4 +-
 .../useFloating/useFloating.test.tsx          |   14 +-
 .../__internal__/useFloating/useFloating.ts   |    2 +-
 .../useFocusPortalContent.tsx                 |    8 +-
 .../add-form-spacing/add-form-spacing.test.ts |    8 +-
 .../useFormSpacing/add-form-spacing/index.ts  |   16 +-
 .../__internal__/useFormSpacing/index.ts      |    7 +-
 .../useFormSpacing/useFormSpacing.test.tsx    |   12 +-
 .../useInputAccessibility.test.ts             |   14 +-
 .../useInputAccessibility.ts                  |    2 +-
 .../useIsAboveBreakpoint.ts                   |    2 +-
 .../__internal__/useLocale/useLocale.test.tsx |    2 +-
 .../useMenuKeyboardNavigation.test.tsx        |    8 +-
 .../useMenuKeyboardNavigation.ts              |   18 +-
 .../useModalAria/useModalAria.test.tsx        |   56 +-
 .../useModalAria/useModalAria.tsx             |    4 +-
 .../useModalManager/useModalManager.ts        |    6 +-
 .../useResizeObserver.test.tsx                |    6 +-
 .../useResizeObserver/useResizeObserver.ts    |    2 +-
 .../scroll-block-manager.test.ts              |    4 +-
 .../useScrollBlock/useScrollBlock.test.tsx    |   12 +-
 .../useScrollBlock/useScrollBlock.ts          |    2 +-
 .../__internal__/useThrottle/useThrottle.ts   |    4 +-
 .../useUniqueId/useUniqueId.test.tsx          |    2 +-
 src/locales/locale.ts                         |    6 +-
 .../carbon-scoped-tokens-provider.test.tsx    |    4 +-
 src/style/design-tokens/debug-theme.util.ts   |    4 +-
 .../generate-css-variables.util.test.tsx      |    2 +-
 .../generate-css-variables.util.ts            |    2 +-
 src/style/palette/index.ts                    |   25 +-
 src/style/style.test.ts                       |   16 +-
 src/style/themes/base/index.ts                |    2 +-
 src/style/themes/test-utils.ts                |    4 +-
 src/style/utils/add-hex-symbols.ts            |   15 +-
 src/style/utils/box-gap.ts                    |    2 +-
 src/style/utils/color.test.ts                 |   20 +-
 src/style/utils/color.ts                      |    2 +-
 src/style/utils/filter-out-position-props.ts  |    2 +-
 .../filter-out-styled-system-spacing-props.ts |    6 +-
 .../filter-styled-system-flexbox-props.ts     |    2 +-
 .../utils/filter-styled-system-grid-props.ts  |    2 +-
 .../filter-styled-system-layout-props.ts      |    2 +-
 .../filter-styled-system-margin-props.ts      |    2 +-
 .../filter-styled-system-padding-props.ts     |    2 +-
 src/style/utils/get-color-value.test.ts       |    2 +-
 src/style/utils/merge-deep.ts                 |    2 +-
 src/style/utils/mix.ts                        |    4 +-
 614 files changed, 13357 insertions(+), 13296 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 59fb604546..0f0ed5652e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -141,7 +141,7 @@
         "mockdate": "^2.0.5",
         "nock": "^13.3.8",
         "node-fetch": "^3.3.2",
-        "prettier": "~2.2.0",
+        "prettier": "~3.3.3",
         "raf": "^3.4.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -24548,15 +24548,18 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
-      "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/pretty-error": {
diff --git a/package.json b/package.json
index 801ecdad7f..fe3c7fee80 100644
--- a/package.json
+++ b/package.json
@@ -162,7 +162,7 @@
     "mockdate": "^2.0.5",
     "nock": "^13.3.8",
     "node-fetch": "^3.3.2",
-    "prettier": "~2.2.0",
+    "prettier": "~3.3.3",
     "raf": "^3.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/playwright/components/draggable/index.ts b/playwright/components/draggable/index.ts
index d53179e7a9..dca91d5fa5 100644
--- a/playwright/components/draggable/index.ts
+++ b/playwright/components/draggable/index.ts
@@ -3,7 +3,7 @@ import { DRAGGABLE_ITEM, DRAG_ICON } from "./locators";
 
 export const draggableItem = (page: Page, text: string) =>
   page.locator(
-    `${DRAGGABLE_ITEM}:has-text("Draggable Label ${text}") ${DRAG_ICON}`
+    `${DRAGGABLE_ITEM}:has-text("Draggable Label ${text}") ${DRAG_ICON}`,
   );
 
 export const draggableItemByPosition = (page: Page, index: number) =>
diff --git a/playwright/components/flat-table/index.ts b/playwright/components/flat-table/index.ts
index f0b601e07e..eb9df90f0a 100644
--- a/playwright/components/flat-table/index.ts
+++ b/playwright/components/flat-table/index.ts
@@ -91,7 +91,7 @@ export const flatTableDraggableItemByPosition = (page: Page, index: number) =>
 export const flatTableCheckboxAsProp = (
   page: Page,
   index: number,
-  asVal: FlatTableCheckboxProps["as"]
+  asVal: FlatTableCheckboxProps["as"],
 ) =>
   page
     .locator(FLAT_TABLE_ROW)
diff --git a/playwright/components/pager/index.ts b/playwright/components/pager/index.ts
index b578de9cb7..14fafd9a83 100644
--- a/playwright/components/pager/index.ts
+++ b/playwright/components/pager/index.ts
@@ -38,22 +38,22 @@ export const currentPageInput = (page: Page) =>
 export const previousArrow = (page: Page) =>
   getDataElementByValue(
     page,
-    `${COMMON_PART_OF_PAGER_LINK}${PAGER_PREVIOUS_ARROW}`
+    `${COMMON_PART_OF_PAGER_LINK}${PAGER_PREVIOUS_ARROW}`,
   );
 export const nextArrow = (page: Page) =>
   getDataElementByValue(
     page,
-    `${COMMON_PART_OF_PAGER_LINK}${PAGER_NEXT_ARROW}`
+    `${COMMON_PART_OF_PAGER_LINK}${PAGER_NEXT_ARROW}`,
   );
 export const firstArrow = (page: Page) =>
   getDataElementByValue(
     page,
-    `${COMMON_PART_OF_PAGER_LINK}${PAGER_FIRST_ARROW}`
+    `${COMMON_PART_OF_PAGER_LINK}${PAGER_FIRST_ARROW}`,
   );
 export const lastArrow = (page: Page) =>
   getDataElementByValue(
     page,
-    `${COMMON_PART_OF_PAGER_LINK}${PAGER_LAST_ARROW}`
+    `${COMMON_PART_OF_PAGER_LINK}${PAGER_LAST_ARROW}`,
   );
 export const showLabelBefore = (page: Page) =>
   page
diff --git a/playwright/components/progress-tracker/index.ts b/playwright/components/progress-tracker/index.ts
index fca5ed6863..adfbdce8d1 100644
--- a/playwright/components/progress-tracker/index.ts
+++ b/playwright/components/progress-tracker/index.ts
@@ -23,7 +23,7 @@ export const progressTrackerMaxVal = (page: Page) =>
 
 export const progressTrackerCustomValuePreposition = (page: Page) =>
   progressTrackerComponent(page).locator(
-    PROGRESS_TRACKER_CUSTOM_VALUE_PREPOSITION
+    PROGRESS_TRACKER_CUSTOM_VALUE_PREPOSITION,
   );
 
 export const progressTrackerDescription = (page: Page) =>
diff --git a/playwright/components/select/index.ts b/playwright/components/select/index.ts
index c5f2f19bc4..67810c1e4c 100644
--- a/playwright/components/select/index.ts
+++ b/playwright/components/select/index.ts
@@ -63,7 +63,7 @@ export const multiColumnsSelectListRow = (page: Page) =>
 
 export const multiColumnsSelectListNoResultsMessage = (
   page: Page,
-  text: string
+  text: string,
 ) =>
   selectList(page)
     .locator("tbody > tr > td")
diff --git a/playwright/support/helper.ts b/playwright/support/helper.ts
index 4503bfd4e8..88a878a69a 100644
--- a/playwright/support/helper.ts
+++ b/playwright/support/helper.ts
@@ -16,18 +16,18 @@ const CLOSED_MODAL = '[data-state="closed"]';
 export const getStyle = async (
   locator: Locator,
   cssProp: string,
-  pseudoElement?: string
+  pseudoElement?: string,
 ): Promise<string> => {
   return locator.evaluate(
     (el, [property, pseudo]) =>
       window.getComputedStyle(el, pseudo).getPropertyValue(property as string),
-    [cssProp, pseudoElement]
+    [cssProp, pseudoElement],
   );
 };
 
 export const waitForAnimationEnd = (locator: Locator) =>
   locator.evaluate((element) =>
-    Promise.all(element.getAnimations().map((animation) => animation.finished))
+    Promise.all(element.getAnimations().map((animation) => animation.finished)),
   );
 
 /**
@@ -88,7 +88,7 @@ export const checkCSSOutline = async (
   outlinePixelWidth = "2px",
   cssProp: OutlineType = "outline",
   style = "solid",
-  color = ""
+  color = "",
 ) => {
   const outlineWidth = await getStyle(element, `${cssProp}-width`);
   const outlineColor = await getStyle(element, `${cssProp}-color`);
@@ -109,14 +109,14 @@ export const checkCSSOutline = async (
 export const checkGoldenOutline = async (
   element: Locator,
   outlinePixelWidth = "3px",
-  outline: OutlineType = "outline"
+  outline: OutlineType = "outline",
 ) => {
   await checkCSSOutline(
     element,
     outlinePixelWidth,
     outline,
     "solid",
-    "rgb(255, 188, 25)"
+    "rgb(255, 188, 25)",
   );
 };
 
@@ -126,7 +126,7 @@ export const checkElementIsInDOM = async (page: Page, locatorStr: string) => {
 
 export const checkElementIsNotInDOM = async (
   page: Page,
-  locatorStr: string
+  locatorStr: string,
 ) => {
   expect(await page.$$(locatorStr)).toHaveLength(0);
 };
@@ -149,7 +149,7 @@ export const checkDialogIsNotInDOM = async (page: Page) => {
  */
 export const expectEventWasCalledOnce = async (
   callbackData: string[],
-  eventName: string
+  eventName: string,
 ) => {
   const count = JSON.stringify(callbackData.length);
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -181,11 +181,11 @@ export const expectEventWasNotCalled = async (callbackData: string[]) => {
  */
 export const containsClass = async (
   locatorFunc: Locator,
-  className: string
+  className: string,
 ) => {
   const escapedClassName = className.replace(
     /[-[\]{}()*+?.,\\^$|#\s]/g,
-    "\\$&"
+    "\\$&",
   );
 
   const classNameRegEx = new RegExp(escapedClassName);
@@ -231,7 +231,7 @@ export function getRotationAngle(cssTransformString: string) {
 export const assertCssValueIsApproximately = async (
   element: Locator,
   cssProp: string,
-  value: number
+  value: number,
 ) => {
   const val = await getStyle(element, cssProp);
   expect(parseInt(val)).toBeGreaterThanOrEqual(value - 2);
@@ -255,9 +255,7 @@ const keys = {
   pageup: { key: "PageUp", keyCode: 33, which: 33 },
 };
 
-export function keyCode(
-  type: keyof typeof keys
-): {
+export function keyCode(type: keyof typeof keys): {
   key: string;
   keyCode: number;
   which: number;
@@ -271,14 +269,14 @@ const verifyRequiredAsterisk = async (locator: Locator) => {
   // use getComputedStyle to read the pseudo selector
   // and read the value of the `content` CSS property
   const contentValue = await locator.evaluate((el) =>
-    window.getComputedStyle(el, "after").getPropertyValue("content")
+    window.getComputedStyle(el, "after").getPropertyValue("content"),
   );
   await expect(contentValue).toBe('"*"');
 };
 
 export const verifyRequiredAsteriskForLabel = (
   page: Page,
-  locator?: Locator
+  locator?: Locator,
 ) => {
   if (locator) {
     return verifyRequiredAsterisk(locator);
@@ -293,7 +291,7 @@ export const verifyRequiredAsteriskForLegend = (page: Page) =>
  * Verifies whether an object exists while not visible to the user. */
 export const isInViewport = async (page: Page, locator: Locator) => {
   const rect = await locator.evaluate((element) =>
-    element.getBoundingClientRect()
+    element.getBoundingClientRect(),
   );
   const bottom = await page.evaluate(async () => {
     const { documentElement } = window.document;
@@ -306,7 +304,7 @@ export const isInViewport = async (page: Page, locator: Locator) => {
 export const getDesignTokensByCssProperty = async (
   page: Page,
   locator: Locator,
-  cssProperty: string
+  cssProperty: string,
 ) => {
   const element = await locator.elementHandle();
   const tokens: string[] = await page.evaluate(
@@ -341,7 +339,7 @@ export const getDesignTokensByCssProperty = async (
       }
       return tokenNames;
     },
-    [element, cssProperty]
+    [element, cssProperty],
   );
   if (tokens.length === 0) {
     // eslint-disable-next-line no-console
@@ -373,7 +371,7 @@ export const continuePressingSHIFTTAB = async (page: Page, count: number) => {
 export const checkElementBorderColours = async (
   page: Page,
   element: Locator,
-  color: string
+  color: string,
 ) => {
   await expect(element).toHaveCSS("border-bottom-color", color);
   await expect(element).toHaveCSS("border-left-color", color);
@@ -390,6 +388,6 @@ export const waitForElementFocus = async (page: Page, locator: Locator) => {
   const focusedElement = await locator.elementHandle();
   await page.waitForFunction(
     (element) => document.activeElement === element,
-    focusedElement
+    focusedElement,
   );
 };
diff --git a/src/__internal__/character-count/character-count.component.tsx b/src/__internal__/character-count/character-count.component.tsx
index 8b0e474dd0..5bb11be13c 100644
--- a/src/__internal__/character-count/character-count.component.tsx
+++ b/src/__internal__/character-count/character-count.component.tsx
@@ -44,7 +44,7 @@ const CharacterCount = ({
         id={visuallyHiddenHintId}
       >
         {l.characterCount.visuallyHiddenHint(
-          getFormatNumber(limit, l.locale())
+          getFormatNumber(limit, l.locale()),
         )}
       </VisuallyHiddenHint>
       <StyledCharacterCount
@@ -56,11 +56,11 @@ const CharacterCount = ({
         {!isOverLimit
           ? l.characterCount.charactersLeft(
               limitMinusValue,
-              getFormatNumber(limitMinusValue, l.locale())
+              getFormatNumber(limitMinusValue, l.locale()),
             )
           : l.characterCount.tooManyCharacters(
               valueMinusLimit,
-              getFormatNumber(valueMinusLimit, l.locale())
+              getFormatNumber(valueMinusLimit, l.locale()),
             )}
       </StyledCharacterCount>
       <VisuallyHiddenCharacterCount
@@ -71,11 +71,11 @@ const CharacterCount = ({
         {!isDebouncedOverLimit
           ? l.characterCount.charactersLeft(
               debouncedLimitMinusValue,
-              getFormatNumber(debouncedLimitMinusValue, l.locale())
+              getFormatNumber(debouncedLimitMinusValue, l.locale()),
             )
           : l.characterCount.tooManyCharacters(
               debouncedValueMinusLimit,
-              getFormatNumber(debouncedValueMinusLimit, l.locale())
+              getFormatNumber(debouncedValueMinusLimit, l.locale()),
             )}
       </VisuallyHiddenCharacterCount>
     </StyledCharacterCountWrapper>
diff --git a/src/__internal__/character-count/character-count.test.tsx b/src/__internal__/character-count/character-count.test.tsx
index 0b37dfd715..b3393699a5 100644
--- a/src/__internal__/character-count/character-count.test.tsx
+++ b/src/__internal__/character-count/character-count.test.tsx
@@ -34,7 +34,7 @@ test("visually hidden character counter is visually hidden", () => {
   render(<CharacterCount value={5} limit={10} isOverLimit={false} />);
 
   const visuallyHiddenCharacterCount = screen.getByTestId(
-    "visually-hidden-character-count"
+    "visually-hidden-character-count",
   );
   expect(visuallyHiddenCharacterCount).toHaveStyle({
     border: "0",
@@ -52,7 +52,7 @@ test("visually hidden character count renders with the 'aria-live' attribute set
   render(<CharacterCount value={5} limit={10} isOverLimit={false} />);
 
   const visuallyHiddenCharacterCount = screen.getByTestId(
-    "visually-hidden-character-count"
+    "visually-hidden-character-count",
   );
   expect(visuallyHiddenCharacterCount).toHaveAttribute("aria-live", "off");
 });
@@ -64,11 +64,11 @@ test("visually hidden character count renders with the 'aria-live' attribute set
       limit={10}
       isOverLimit={false}
       ariaLive="polite"
-    />
+    />,
   );
 
   const visuallyHiddenCharacterCount = screen.getByTestId(
-    "visually-hidden-character-count"
+    "visually-hidden-character-count",
   );
   expect(visuallyHiddenCharacterCount).toHaveAttribute("aria-live", "polite");
 });
@@ -77,7 +77,7 @@ test("visually hidden character count renders with '{count} character(s) left' t
   render(<CharacterCount value={5} limit={10} isOverLimit={false} />);
 
   const visuallyHiddenCharacterCount = screen.getByTestId(
-    "visually-hidden-character-count"
+    "visually-hidden-character-count",
   );
   expect(visuallyHiddenCharacterCount).toHaveTextContent("5 characters left");
 });
@@ -89,11 +89,11 @@ test("visually hidden character count renders with '{count} character(s) too man
       limit={5}
       isOverLimit={false}
       isDebouncedOverLimit
-    />
+    />,
   );
 
   const visuallyHiddenHint = screen.getByTestId(
-    "visually-hidden-character-count"
+    "visually-hidden-character-count",
   );
   expect(visuallyHiddenHint).toHaveTextContent("5 characters too many");
 });
@@ -119,6 +119,6 @@ test("visually hidden hint renders with 'you can enter up to {count} character(s
 
   const visuallyHiddenHint = screen.getByTestId("visually-hidden-hint");
   expect(visuallyHiddenHint).toHaveTextContent(
-    "You can enter up to 10 characters"
+    "You can enter up to 10 characters",
   );
 });
diff --git a/src/__internal__/checkable-input/checkable-input.component.tsx b/src/__internal__/checkable-input/checkable-input.component.tsx
index 561d51b886..b84c9ccac7 100644
--- a/src/__internal__/checkable-input/checkable-input.component.tsx
+++ b/src/__internal__/checkable-input/checkable-input.component.tsx
@@ -97,23 +97,19 @@ const CheckableInput = React.forwardRef(
       warning,
       ...props
     }: CheckableInputProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     const { current: id } = useRef(inputId || guid());
 
-    const {
-      labelId,
-      fieldHelpId,
-      validationId,
-      ariaDescribedBy,
-    } = useInputAccessibility({
-      id,
-      error,
-      warning,
-      info,
-      label,
-      fieldHelp,
-    });
+    const { labelId, fieldHelpId, validationId, ariaDescribedBy } =
+      useInputAccessibility({
+        id,
+        error,
+        warning,
+        info,
+        label,
+        fieldHelp,
+      });
 
     const formFieldProps: FormFieldProps = {
       disabled,
@@ -179,7 +175,7 @@ const CheckableInput = React.forwardRef(
         </InputBehaviour>
       </StyledCheckableInputWrapper>
     );
-  }
+  },
 );
 
 CheckableInput.displayName = "CheckableInput";
diff --git a/src/__internal__/checkable-input/checkable-input.test.tsx b/src/__internal__/checkable-input/checkable-input.test.tsx
index 9a425ccb9c..39729cc2d6 100644
--- a/src/__internal__/checkable-input/checkable-input.test.tsx
+++ b/src/__internal__/checkable-input/checkable-input.test.tsx
@@ -19,7 +19,7 @@ test("renders input with provided `aria-labelledby`", () => {
 
   expect(screen.getByRole("checkbox")).toHaveAttribute(
     "aria-labelledby",
-    "foo"
+    "foo",
   );
 });
 
@@ -52,7 +52,7 @@ test("appends the id of the validation tooltip to the input's 'aria-describedby'
       fieldHelp="fieldHelp"
       id="foo"
       error="error"
-    />
+    />,
   );
 
   const input = screen.getByRole("checkbox");
@@ -63,7 +63,7 @@ test("appends the id of the validation tooltip to the input's 'aria-describedby'
 
   expect(input).toHaveAttribute(
     "aria-describedby",
-    "foo-field-help foo-validation"
+    "foo-field-help foo-validation",
   );
 });
 
diff --git a/src/__internal__/checkable-input/hidden-checkable-input.component.tsx b/src/__internal__/checkable-input/hidden-checkable-input.component.tsx
index 0e5622c044..57693b660d 100644
--- a/src/__internal__/checkable-input/hidden-checkable-input.component.tsx
+++ b/src/__internal__/checkable-input/hidden-checkable-input.component.tsx
@@ -57,7 +57,7 @@ const HiddenCheckableInput = React.forwardRef(
       validationIconId,
       ...props
     }: HiddenCheckableInputProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     const {
       onBlur,
@@ -135,7 +135,7 @@ const HiddenCheckableInput = React.forwardRef(
         ref={ref}
       />
     );
-  }
+  },
 );
 
 HiddenCheckableInput.displayName = "HiddenCheckableInput";
diff --git a/src/__internal__/checkable-input/hidden-checkable-input.test.tsx b/src/__internal__/checkable-input/hidden-checkable-input.test.tsx
index 0f37ee5b98..2f607972bc 100644
--- a/src/__internal__/checkable-input/hidden-checkable-input.test.tsx
+++ b/src/__internal__/checkable-input/hidden-checkable-input.test.tsx
@@ -66,7 +66,7 @@ test("calls `onFocus` callback from InputContext when input is focused", async (
   render(
     <InputContext.Provider value={{ onFocus }}>
       <HiddenCheckableInput type="checkbox" />
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
 
   await user.tab();
@@ -80,7 +80,7 @@ test("calls `onBlur` callback from InputContext when input is blurred", async ()
   render(
     <InputContext.Provider value={{ onBlur }}>
       <HiddenCheckableInput type="checkbox" />
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
 
   await user.tab();
@@ -95,7 +95,7 @@ test("calls `onMouseEnter` callback from InputContext when input is hovered", as
   render(
     <InputContext.Provider value={{ onMouseEnter }}>
       <HiddenCheckableInput type="checkbox" />
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
 
   await user.hover(screen.getByRole("checkbox"));
@@ -109,7 +109,7 @@ test("calls `onMouseLeave` callback from InputContext when input is unhovered",
   render(
     <InputContext.Provider value={{ onMouseLeave }}>
       <HiddenCheckableInput type="checkbox" />
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
 
   const checkbox = screen.getByRole("checkbox");
@@ -126,7 +126,7 @@ test("calls `onFocus` callback from InputGroupContext when input is focused", as
   render(
     <InputGroupContext.Provider value={{ onFocus }}>
       <HiddenCheckableInput type="checkbox" />
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   await user.tab();
@@ -140,7 +140,7 @@ test("calls `onBlur` callback from InputGroupContext when input is blurred", asy
   render(
     <InputGroupContext.Provider value={{ onBlur }}>
       <HiddenCheckableInput type="checkbox" />
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   await user.tab();
@@ -155,7 +155,7 @@ test("calls `onMouseEnter` callback from InputGroupContext when input is hovered
   render(
     <InputGroupContext.Provider value={{ onMouseEnter }}>
       <HiddenCheckableInput type="checkbox" />
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   await user.hover(screen.getByRole("checkbox"));
@@ -169,7 +169,7 @@ test("calls `onMouseLeave` callback from InputGroupContext when input is unhover
   render(
     <InputGroupContext.Provider value={{ onMouseLeave }}>
       <HiddenCheckableInput type="checkbox" />
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   const checkbox = screen.getByRole("checkbox");
diff --git a/src/__internal__/fieldset/fieldset.component.tsx b/src/__internal__/fieldset/fieldset.component.tsx
index 86b62c4fed..5a6d4641b8 100644
--- a/src/__internal__/fieldset/fieldset.component.tsx
+++ b/src/__internal__/fieldset/fieldset.component.tsx
@@ -80,7 +80,7 @@ const Fieldset = ({
   useEffect(() => {
     if (ref && isRequired) {
       Array.from(
-        ref.querySelectorAll("input") || /* istanbul ignore next */ []
+        ref.querySelectorAll("input") || /* istanbul ignore next */ [],
       ).forEach((el) => {
         el.setAttribute("required", "");
       });
diff --git a/src/__internal__/fieldset/fieldset.test.tsx b/src/__internal__/fieldset/fieldset.test.tsx
index 366476141f..4c25d0e457 100644
--- a/src/__internal__/fieldset/fieldset.test.tsx
+++ b/src/__internal__/fieldset/fieldset.test.tsx
@@ -7,7 +7,7 @@ test("renders with provided `children`", () => {
   render(
     <Fieldset>
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const input = within(screen.getByRole("group")).getByRole("textbox");
@@ -19,7 +19,7 @@ test("renders fieldset with provided `legend`", () => {
   render(
     <Fieldset legend="Legend">
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const fieldset = screen.getByRole("group", { name: "Legend" });
@@ -32,7 +32,7 @@ test("sets child inputs as required when `isRequired` is true", () => {
     <Fieldset isRequired>
       <input />
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const inputs = screen.getAllByRole("textbox");
@@ -45,7 +45,7 @@ test("renders validation icon when `legend` and `error` are provided", () => {
   render(
     <Fieldset legend="Legend" error="error">
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const icon = screen.getByTestId("icon-error");
@@ -57,7 +57,7 @@ test("renders validation icon when `legend` and `warning` are provided", () => {
   render(
     <Fieldset legend="Legend" warning="warning">
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const icon = screen.getByTestId("icon-warning");
@@ -69,7 +69,7 @@ test("renders validation icon when `legend` and `info` are provided", () => {
   render(
     <Fieldset legend="Legend" info="info">
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const icon = screen.getByTestId("icon-info");
@@ -82,7 +82,7 @@ test("renders legend with provided `legendWidth` when `inline` is true", () => {
   render(
     <Fieldset legend="Legend" inline legendWidth={30}>
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const legend = screen.getByTestId("legend");
@@ -95,7 +95,7 @@ test("renders with expected styles when `inline` is true and `align` is 'left'",
   render(
     <Fieldset legend="Legend" inline legendAlign="left">
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const legend = screen.getByTestId("legend");
@@ -108,7 +108,7 @@ test("renders with expected padding when `inline` is true and `legendSpacing` is
   render(
     <Fieldset legend="Legend" inline legendSpacing={1}>
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const legend = screen.getByTestId("legend");
@@ -122,5 +122,5 @@ testStyledSystemMarginRTL(
       <input />
     </Fieldset>
   ),
-  () => screen.getByRole("group")
+  () => screen.getByRole("group"),
 );
diff --git a/src/__internal__/filter-object-properties/filter-object-properties.ts b/src/__internal__/filter-object-properties/filter-object-properties.ts
index 78da982f86..8f0dc9fe22 100644
--- a/src/__internal__/filter-object-properties/filter-object-properties.ts
+++ b/src/__internal__/filter-object-properties/filter-object-properties.ts
@@ -1,10 +1,12 @@
 export default function filterObjectProperties<T extends object>(
   originalObject: T,
-  keyList: string[]
+  keyList: string[],
 ) {
-  return (Object.keys(originalObject).filter((key) =>
-    keyList.includes(key)
-  ) as (keyof T)[]).reduce((acc: Partial<T>, key) => {
+  return (
+    Object.keys(originalObject).filter((key) =>
+      keyList.includes(key),
+    ) as (keyof T)[]
+  ).reduce((acc: Partial<T>, key) => {
     acc[key] = originalObject[key];
     return acc;
   }, {});
diff --git a/src/__internal__/focus-trap/focus-trap-utils.ts b/src/__internal__/focus-trap/focus-trap-utils.ts
index 6a9fb79493..7e26beea79 100644
--- a/src/__internal__/focus-trap/focus-trap-utils.ts
+++ b/src/__internal__/focus-trap/focus-trap-utils.ts
@@ -38,10 +38,10 @@ const isRadio = (element: HTMLElement) => {
 
 const getRadioElementToFocus = (groupName: string, shiftKey: boolean) => {
   const buttonsInGroup = document.querySelectorAll(
-    `input[type="radio"][name="${groupName}"]`
+    `input[type="radio"][name="${groupName}"]`,
   );
   const selectedButton = [...buttonsInGroup].find(
-    (button) => (button as HTMLInputElement).checked
+    (button) => (button as HTMLInputElement).checked,
   );
 
   if (selectedButton) {
@@ -55,7 +55,7 @@ const getRadioElementToFocus = (groupName: string, shiftKey: boolean) => {
 const getNextElement = (
   element: HTMLElement,
   focusableElements: HTMLElement[],
-  shiftKey: boolean
+  shiftKey: boolean,
 ) => {
   const currentIndex = focusableElements.indexOf(element);
 
@@ -90,7 +90,7 @@ const getNextElement = (
       if (isRadio(element) && document.activeElement !== element) {
         return getRadioElementToFocus(
           element.getAttribute("name") as string,
-          shiftKey
+          shiftKey,
         );
       }
       return element;
@@ -123,50 +123,53 @@ const getNextElement = (
   return foundElement as HTMLElement;
 };
 
-const onTabGuardFocus = (
-  trapWrappers: CustomRefObject<HTMLElement>[],
-  focusableSelectors: string | undefined,
-  position: "top" | "bottom"
-) => (guardWrapperRef: CustomRefObject<HTMLElement>) => () => {
-  const isTop = position === "top";
-  const currentIndex = trapWrappers.indexOf(guardWrapperRef);
-  let index = currentIndex;
-  let nextWrapper;
-  let allFocusableElementsInNextWrapper: Element[] | undefined;
-
-  do {
-    index += isTop ? -1 : 1;
-    if (index < 0) {
-      index += trapWrappers.length;
-    }
-    if (index >= trapWrappers.length) {
-      index -= trapWrappers.length;
-    }
-    nextWrapper = trapWrappers[index];
-    allFocusableElementsInNextWrapper = Array.from(
-      nextWrapper?.current?.querySelectorAll(
-        focusableSelectors || defaultFocusableSelectors
-      ) || /* istanbul ignore next */ []
-    ).filter((el) => Number((el as HTMLElement).tabIndex) !== -1);
-  } while (
-    index !== currentIndex &&
-    !allFocusableElementsInNextWrapper?.length
-  );
+const onTabGuardFocus =
+  (
+    trapWrappers: CustomRefObject<HTMLElement>[],
+    focusableSelectors: string | undefined,
+    position: "top" | "bottom",
+  ) =>
+  (guardWrapperRef: CustomRefObject<HTMLElement>) =>
+  () => {
+    const isTop = position === "top";
+    const currentIndex = trapWrappers.indexOf(guardWrapperRef);
+    let index = currentIndex;
+    let nextWrapper;
+    let allFocusableElementsInNextWrapper: Element[] | undefined;
+
+    do {
+      index += isTop ? -1 : 1;
+      if (index < 0) {
+        index += trapWrappers.length;
+      }
+      if (index >= trapWrappers.length) {
+        index -= trapWrappers.length;
+      }
+      nextWrapper = trapWrappers[index];
+      allFocusableElementsInNextWrapper = Array.from(
+        nextWrapper?.current?.querySelectorAll(
+          focusableSelectors || defaultFocusableSelectors,
+        ) || /* istanbul ignore next */ [],
+      ).filter((el) => Number((el as HTMLElement).tabIndex) !== -1);
+    } while (
+      index !== currentIndex &&
+      !allFocusableElementsInNextWrapper?.length
+    );
 
-  const toFocus = allFocusableElementsInNextWrapper?.[
-    isTop ? allFocusableElementsInNextWrapper.length - 1 : 0
-  ] as HTMLElement;
+    const toFocus = allFocusableElementsInNextWrapper?.[
+      isTop ? allFocusableElementsInNextWrapper.length - 1 : 0
+    ] as HTMLElement;
 
-  if (isRadio(toFocus)) {
-    const radioToFocus = getRadioElementToFocus(
-      toFocus.getAttribute("name") as string,
-      isTop
-    );
-    setElementFocus(radioToFocus);
-  } else {
-    setElementFocus(toFocus);
-  }
-};
+    if (isRadio(toFocus)) {
+      const radioToFocus = getRadioElementToFocus(
+        toFocus.getAttribute("name") as string,
+        isTop,
+      );
+      setElementFocus(radioToFocus);
+    } else {
+      setElementFocus(toFocus);
+    }
+  };
 
 const trapFunction = (
   ev: KeyboardEvent,
@@ -176,12 +179,12 @@ const trapFunction = (
   bespokeTrap?: (
     event: KeyboardEvent,
     firstElement?: HTMLElement,
-    lastElement?: HTMLElement
-  ) => void
+    lastElement?: HTMLElement,
+  ) => void,
 ) => {
   const customFocusableElements = focusableSelectors
     ? defaultFocusableElements.filter((element) =>
-        element.matches(focusableSelectors)
+        element.matches(focusableSelectors),
       )
     : defaultFocusableElements;
 
@@ -222,13 +225,13 @@ const trapFunction = (
   const elementToFocus = getNextElement(
     isWrapperFocused ? elementWhenWrapperFocused : activeElement,
     customFocusableElements,
-    ev.shiftKey
+    ev.shiftKey,
   );
 
   const defaultNextElement = getNextElement(
     isWrapperFocused ? elementWhenWrapperFocused : activeElement,
     defaultFocusableElements as HTMLElement[],
-    ev.shiftKey
+    ev.shiftKey,
   );
 
   if (elementToFocus && elementToFocus !== defaultNextElement) {
diff --git a/src/__internal__/focus-trap/focus-trap.component.tsx b/src/__internal__/focus-trap/focus-trap.component.tsx
index cd42b591fe..751d2e7998 100644
--- a/src/__internal__/focus-trap/focus-trap.component.tsx
+++ b/src/__internal__/focus-trap/focus-trap.component.tsx
@@ -36,7 +36,7 @@ export interface FocusTrapProps {
   bespokeTrap?: (
     ev: KeyboardEvent,
     firstElement?: HTMLElement,
-    lastElement?: HTMLElement
+    lastElement?: HTMLElement,
   ) => void;
   /** optional selector to identify the focusable elements, if not provided a default selector is used */
   focusableSelectors?: string;
@@ -62,10 +62,8 @@ const FocusTrap = ({
   const [currentFocusedElement, setCurrentFocusedElement] = useState<
     HTMLElement | undefined
   >();
-  const {
-    isAnimationComplete = true,
-    triggerRefocusFlag,
-  } = useContext<ModalContextProps>(ModalContext);
+  const { isAnimationComplete = true, triggerRefocusFlag } =
+    useContext<ModalContextProps>(ModalContext);
 
   const { topModal } = useContext(TopModalContext);
   // we ensure that isTopModal is true if there is no TopModalContext, so that consumers who have not
@@ -78,17 +76,17 @@ const FocusTrap = ({
       additionalWrapperRefs?.length
         ? [wrapperRef, ...additionalWrapperRefs]
         : [wrapperRef],
-    [additionalWrapperRefs, wrapperRef]
+    [additionalWrapperRefs, wrapperRef],
   );
 
   const onTabGuardTopFocus = useMemo(
     () => onTabGuardFocus(trapWrappers, focusableSelectors, "top"),
-    [focusableSelectors, trapWrappers]
+    [focusableSelectors, trapWrappers],
   );
 
   const onTabGuardBottomFocus = useMemo(
     () => onTabGuardFocus(trapWrappers, focusableSelectors, "bottom"),
-    [focusableSelectors, trapWrappers]
+    [focusableSelectors, trapWrappers],
   );
 
   useEffect(() => {
@@ -99,7 +97,7 @@ const FocusTrap = ({
         // istanbul ignore else
         if (
           !containerElement.previousElementSibling?.matches(
-            `[data-element=${TAB_GUARD_TOP}]`
+            `[data-element=${TAB_GUARD_TOP}]`,
           )
         ) {
           const topTabGuard = document.createElement("div");
@@ -111,7 +109,7 @@ const FocusTrap = ({
         // istanbul ignore else
         if (
           !containerElement.nextElementSibling?.matches(
-            `[data-element=${TAB_GUARD_BOTTOM}]`
+            `[data-element=${TAB_GUARD_BOTTOM}]`,
           )
         ) {
           const bottomTabGuard = document.createElement("div");
@@ -149,14 +147,14 @@ const FocusTrap = ({
         if (ref.current) {
           elements.push(
             ...Array.from(ref.current.querySelectorAll(selector)).filter(
-              (el) => Number((el as HTMLElement).tabIndex) !== -1
-            )
+              (el) => Number((el as HTMLElement).tabIndex) !== -1,
+            ),
           );
         }
       });
       return elements as HTMLElement[];
     },
-    [trapWrappers]
+    [trapWrappers],
   );
 
   useEffect(() => {
@@ -166,7 +164,7 @@ const FocusTrap = ({
           ? focusFirstElement.current
           : focusFirstElement;
       const autoFocusedElement = getFocusableElements(
-        defaultFocusableSelectors
+        defaultFocusableSelectors,
       ).find((el) => el.getAttribute("data-has-autofocus") === "true");
       const elementToFocus =
         (candidateFirstElement as HTMLElement) ||
@@ -198,7 +196,7 @@ const FocusTrap = ({
         focusableElements,
         document.activeElement === wrapperRef.current,
         focusableSelectors,
-        bespokeTrap
+        bespokeTrap,
       );
     };
 
@@ -218,10 +216,10 @@ const FocusTrap = ({
 
   const updateCurrentFocusedElement = useCallback(() => {
     const focusableElements = getFocusableElements(
-      focusableSelectors || defaultFocusableSelectors
+      focusableSelectors || defaultFocusableSelectors,
     );
     const element = focusableElements?.find(
-      (el) => el === document.activeElement
+      (el) => el === document.activeElement,
     );
 
     if (element) {
@@ -240,7 +238,7 @@ const FocusTrap = ({
       setElementFocus(wrapperRef.current);
     } else {
       const focusableElements = getFocusableElements(
-        focusableSelectors || defaultFocusableSelectors
+        focusableSelectors || defaultFocusableSelectors,
       );
       /* istanbul ignore else */
       if (focusableElements.length) {
@@ -286,7 +284,7 @@ const FocusTrap = ({
     const focusableChild = child as React.ReactElement;
     return React.cloneElement(
       focusableChild,
-      focusProps(focusableChild?.props?.tabIndex === undefined)
+      focusProps(focusableChild?.props?.tabIndex === undefined),
     );
   });
 
diff --git a/src/__internal__/focus-trap/focus-trap.test.tsx b/src/__internal__/focus-trap/focus-trap.test.tsx
index ad8992d381..6a5d996701 100644
--- a/src/__internal__/focus-trap/focus-trap.test.tsx
+++ b/src/__internal__/focus-trap/focus-trap.test.tsx
@@ -153,14 +153,14 @@ test("refocuses the last element that had focus within the trap when `triggerRef
       autoFocus: false,
       triggerRefocusFlag: false,
       tabIndex: undefined,
-    })
+    }),
   );
   const buttonTwo = screen.getByRole("button", { name: "Two" });
   buttonTwo.focus();
   buttonTwo.blur();
 
   rerender(
-    mockComponentToRender({ autoFocus: false, triggerRefocusFlag: true })
+    mockComponentToRender({ autoFocus: false, triggerRefocusFlag: true }),
   );
 
   expect(buttonTwo).toHaveFocus();
@@ -172,7 +172,7 @@ test("refocuses the wrapper element when the `triggerRefocusFlag` is set, if the
       autoFocus: false,
       triggerRefocusFlag: false,
       tabIndex: -1,
-    })
+    }),
   );
 
   rerender(
@@ -180,7 +180,7 @@ test("refocuses the wrapper element when the `triggerRefocusFlag` is set, if the
       autoFocus: false,
       triggerRefocusFlag: true,
       tabIndex: -1,
-    })
+    }),
   );
 
   expect(screen.getByRole("dialog")).toHaveFocus();
@@ -189,13 +189,13 @@ test("refocuses the wrapper element when the `triggerRefocusFlag` is set, if the
 // FIXME FE-6427: Assertion does not match the test description. Currently, the refocused element will differ depending on if the wrapper is blurred or not
 test("refocuses the container within the trap when the `triggerRefocusFlag` is set, if the wrapper has no tabindex", () => {
   const { rerender } = render(
-    mockComponentToRender({ autoFocus: false, triggerRefocusFlag: false })
+    mockComponentToRender({ autoFocus: false, triggerRefocusFlag: false }),
   );
   // need to blur the wrapper to remove the tabindex
   fireEvent.blur(screen.getByRole("dialog"));
 
   rerender(
-    mockComponentToRender({ autoFocus: false, triggerRefocusFlag: true })
+    mockComponentToRender({ autoFocus: false, triggerRefocusFlag: true }),
   );
 
   expect(screen.getByRole("button", { name: "One" })).toHaveFocus();
@@ -206,7 +206,7 @@ test("when `triggerRefocusFlag` is set, the container is refocused if last eleme
     <MockComponent autoFocus={false} triggerRefocusFlag={false}>
       <button type="button">One</button>
       <button type="button">Two</button>
-    </MockComponent>
+    </MockComponent>,
   );
 
   screen.getByRole("button", { name: "Two" }).focus();
@@ -217,7 +217,7 @@ test("when `triggerRefocusFlag` is set, the container is refocused if last eleme
       <button type="button" disabled>
         Two
       </button>
-    </MockComponent>
+    </MockComponent>,
   );
 
   expect(screen.getByRole("dialog")).toHaveFocus();
@@ -279,7 +279,7 @@ test("when a bespokeTrap is provided, it calls the function with expected argume
   expect(trapFunction).toHaveBeenCalledWith(
     expect.objectContaining({ key: "Tab", type: "keydown" }),
     screen.getByRole("button", { name: "One" }),
-    screen.getByRole("button", { name: "Two" })
+    screen.getByRole("button", { name: "Two" }),
   );
 });
 
@@ -297,7 +297,7 @@ test("when a bespokeTrap is provided, it calls the function with expected argume
       type: "keydown",
     }),
     screen.getByRole("button", { name: "One" }),
-    screen.getByRole("button", { name: "Two" })
+    screen.getByRole("button", { name: "Two" }),
   );
 });
 
@@ -402,7 +402,7 @@ it("only allows non-disabled elements to be focused", async () => {
       <button type="button" disabled>
         Disabled button two
       </button>
-    </MockComponent>
+    </MockComponent>,
   );
 
   const buttonOne = screen.getByRole("button", { name: "One" });
@@ -704,7 +704,7 @@ describe("when trap contains only one focusable element", () => {
     render(
       <MockComponent>
         <button type="button">One</button>
-      </MockComponent>
+      </MockComponent>,
     );
 
     await user.tab();
@@ -717,7 +717,7 @@ describe("when trap contains only one focusable element", () => {
     render(
       <MockComponent>
         <button type="button">One</button>
-      </MockComponent>
+      </MockComponent>,
     );
 
     await user.tab({ shift: true });
@@ -842,7 +842,7 @@ test("should not throw error if wrapper ref isn't found", () => {
         <FocusTrap wrapperRef={wrapperRef}>
           <div id="myComponent">Content</div>
         </FocusTrap>
-      </ModalContext.Provider>
+      </ModalContext.Provider>,
     );
   }).not.toThrow();
 });
@@ -855,12 +855,12 @@ test("when `additionalWrapperRefs` are specified, tab should cycle through focus
 
   await user.tab();
   expect(
-    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_ONE })
+    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_ONE }),
   ).toHaveFocus();
 
   await user.tab();
   expect(
-    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_TWO })
+    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_TWO }),
   ).toHaveFocus();
 
   await user.tab();
@@ -875,12 +875,12 @@ test("when `additionalWrapperRefs` are specified, shift-tab should cycle through
 
   await user.tab({ shift: true });
   expect(
-    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_TWO })
+    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_TWO }),
   ).toHaveFocus();
 
   await user.tab({ shift: true });
   expect(
-    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_ONE })
+    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_ONE }),
   ).toHaveFocus();
 
   await user.tab({ shift: true });
@@ -895,17 +895,17 @@ test("when `additionalWrapperRefs` are specified, tabbing continues to work both
 
   await user.tab();
   expect(
-    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_ONE })
+    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_ONE }),
   ).toHaveFocus();
 
   await user.tab();
   expect(
-    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_TWO })
+    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_TWO }),
   ).toHaveFocus();
 
   await user.tab();
   expect(
-    screen.getByRole("button", { name: BUTTON_IN_CONDITIONAL_WRAPPER })
+    screen.getByRole("button", { name: BUTTON_IN_CONDITIONAL_WRAPPER }),
   ).toHaveFocus();
 
   await user.tab();
@@ -913,17 +913,17 @@ test("when `additionalWrapperRefs` are specified, tabbing continues to work both
 
   await user.tab({ shift: true });
   expect(
-    screen.getByRole("button", { name: BUTTON_IN_CONDITIONAL_WRAPPER })
+    screen.getByRole("button", { name: BUTTON_IN_CONDITIONAL_WRAPPER }),
   ).toHaveFocus();
 
   await user.tab({ shift: true });
   expect(
-    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_TWO })
+    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_TWO }),
   ).toHaveFocus();
 
   await user.tab({ shift: true });
   expect(
-    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_ONE })
+    screen.getByRole("button", { name: BUTTON_IN_ADDITIONAL_WRAPPER_ONE }),
   ).toHaveFocus();
 
   await user.tab({ shift: true });
@@ -1082,7 +1082,7 @@ test("only focuses elements which meet the custom selector, when tabbing both fo
       <button type="button" className="focusable">
         Three
       </button>
-    </MockComponent>
+    </MockComponent>,
   );
 
   const buttonOne = screen.getByRole("button", { name: "One" });
@@ -1111,7 +1111,7 @@ test("when multiple focus traps are open at once, focus moves correctly between
         <button type="button">Three</button>
         <button type="button">Four</button>
       </MockComponent>
-    </>
+    </>,
   );
   const buttonOne = screen.getByRole("button", { name: "One" });
   const buttonTwo = screen.getByRole("button", { name: "Two" });
@@ -1152,7 +1152,7 @@ test("when multiple focus traps are open at once, focus moves correctly between
           Six
         </button>
       </MockComponent>
-    </>
+    </>,
   );
   const buttonOne = screen.getByRole("button", { name: "One" });
   buttonOne.focus();
@@ -1220,7 +1220,7 @@ test("should focus the first focusable element when the the focus is on a non fo
       <button type="button" tabIndex={-1}>
         Three
       </button>
-    </MockComponent>
+    </MockComponent>,
   );
   screen.getByRole("button", { name: "Three" }).focus();
 
@@ -1238,7 +1238,7 @@ test("should focus the last focusable element when the the focus is on a non foc
       </button>
       <button type="button">Two</button>
       <button type="button">Three</button>
-    </MockComponent>
+    </MockComponent>,
   );
   screen.getByRole("button", { name: "One" }).focus();
 
@@ -1252,7 +1252,7 @@ test("when focusableSelectors is not used, preventDefault is not called upon tab
     <MockComponent>
       <button type="button">One</button>
       <button type="button">Two</button>
-    </MockComponent>
+    </MockComponent>,
   );
   const buttonOne = screen.getByRole("button", { name: "One" });
   const firstKeydownEvent = createEvent.keyDown(buttonOne, { key: "Tab" });
@@ -1269,7 +1269,7 @@ test("when focusableSelectors is used, preventDefault is called when needed to p
       <button type="button" className="focusable">
         Two
       </button>
-    </MockComponent>
+    </MockComponent>,
   );
   const buttonOne = screen.getByRole("button", { name: "One" });
   const keydownEvent = createEvent.keyDown(buttonOne, { key: "Tab" });
@@ -1379,7 +1379,7 @@ test("should focus the first input that has the `autoFocus` prop set on it", ()
         <Option value="1" text="one" />
       </Select>
       <Checkbox label="Do not autofocus me" autoFocus />
-    </MockComponent>
+    </MockComponent>,
   );
 
   expect(screen.getByRole("combobox")).toHaveFocus();
@@ -1393,7 +1393,7 @@ test("should loop to the last element when there is elements with tabIndex of -1
         <Option value="1" text="one" />
       </Select>
       <Checkbox label="Do not autofocus me" autoFocus />
-    </MockComponent>
+    </MockComponent>,
   );
 
   expect(screen.getByRole("combobox")).toHaveFocus();
@@ -1413,7 +1413,7 @@ test("should set focus on the `focusFirstElement` when it and an input with `aut
         </Select>
       ),
       shouldFocusFirstElement: true,
-    })
+    }),
   );
 
   expect(screen.getByRole("button", { name: "first" })).toHaveFocus();
diff --git a/src/__internal__/form-field/form-field.component.tsx b/src/__internal__/form-field/form-field.component.tsx
index ec1ca13c48..8eb53299bc 100644
--- a/src/__internal__/form-field/form-field.component.tsx
+++ b/src/__internal__/form-field/form-field.component.tsx
@@ -121,19 +121,19 @@ const FormField = ({
     if (!(disabled && !loading)) return undefined;
 
     return Object.keys(validationProps).find(
-      (propName) => validationProps[propName]
+      (propName) => validationProps[propName],
     );
   }, [error, warning, info, disabled]);
 
   invariant(
     invalidValidationProp === undefined,
     `Prop \`${invalidValidationProp}\` cannot be used in conjunction with \`disabled\`. ` +
-      "Use `readOnly` if you require users to see validations with a non-interactive field"
+      "Use `readOnly` if you require users to see validations with a non-interactive field",
   );
 
   invariant(
     !(isRequired && isOptional),
-    "an input cannot be set to both required and optional at the same time"
+    "an input cannot be set to both required and optional at the same time",
   );
 
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
@@ -142,9 +142,8 @@ const FormField = ({
     inlineLabel = largeScreen;
   }
 
-  const { setError, setWarning, setInfo } = useContext<TabContextProps>(
-    TabContext
-  );
+  const { setError, setWarning, setInfo } =
+    useContext<TabContextProps>(TabContext);
   const marginProps = useFormSpacing(rest);
   const isMounted = useRef(false);
 
diff --git a/src/__internal__/form-field/form-field.test.tsx b/src/__internal__/form-field/form-field.test.tsx
index fee5240554..d4966d228c 100644
--- a/src/__internal__/form-field/form-field.test.tsx
+++ b/src/__internal__/form-field/form-field.test.tsx
@@ -10,7 +10,7 @@ test("throws a console error when `isOptional` and `isRequired` are both true",
   expect(() => {
     render(<FormField id="mock-input" isOptional isRequired />);
   }).toThrow(
-    "an input cannot be set to both required and optional at the same time"
+    "an input cannot be set to both required and optional at the same time",
   );
 
   consoleSpy.mockRestore();
@@ -35,7 +35,7 @@ test("throws a console error when `error` and `disabled` are both true", () => {
     render(<FormField id="mock-input" error disabled />);
   }).toThrow(
     `Prop \`error\` cannot be used in conjunction with \`disabled\`. ` +
-      "Use `readOnly` if you require users to see validations with a non-interactive field"
+      "Use `readOnly` if you require users to see validations with a non-interactive field",
   );
 
   consoleSpy.mockRestore();
@@ -48,7 +48,7 @@ test("throws a console error when `warning` and `disabled` are both true", () =>
     render(<FormField id="mock-input" warning disabled />);
   }).toThrow(
     `Prop \`warning\` cannot be used in conjunction with \`disabled\`. ` +
-      "Use `readOnly` if you require users to see validations with a non-interactive field"
+      "Use `readOnly` if you require users to see validations with a non-interactive field",
   );
 
   consoleSpy.mockRestore();
@@ -61,7 +61,7 @@ test("throws a console error when `info` and `disabled` are both true", () => {
     render(<FormField id="mock-input" info disabled />);
   }).toThrow(
     `Prop \`info\` cannot be used in conjunction with \`disabled\`. ` +
-      "Use `readOnly` if you require users to see validations with a non-interactive field"
+      "Use `readOnly` if you require users to see validations with a non-interactive field",
   );
 
   consoleSpy.mockRestore();
@@ -72,7 +72,7 @@ test("calls `setError` passed from `TabContext` when `error` is true", () => {
   render(
     <TabContext.Provider value={{ setError }}>
       <FormField id="foo" error />
-    </TabContext.Provider>
+    </TabContext.Provider>,
   );
 
   expect(setError).toHaveBeenCalledWith("foo", true);
@@ -83,7 +83,7 @@ test("calls `setWarning` passed from `TabContext` when `warning` is true", () =>
   render(
     <TabContext.Provider value={{ setWarning }}>
       <FormField id="foo" warning />
-    </TabContext.Provider>
+    </TabContext.Provider>,
   );
 
   expect(setWarning).toHaveBeenCalledWith("foo", true);
@@ -94,7 +94,7 @@ test("calls `setInfo` passed from `TabContext` when `info` is true", () => {
   render(
     <TabContext.Provider value={{ setInfo }}>
       <FormField id="foo" info />
-    </TabContext.Provider>
+    </TabContext.Provider>,
   );
 
   expect(setInfo).toHaveBeenCalledWith("foo", true);
@@ -108,7 +108,7 @@ test("should not render with `labelInline` when `adaptiveLabelBreakpoint` set an
       label="label"
       labelInline
       adaptiveLabelBreakpoint={1000}
-    />
+    />,
   );
 
   expect(screen.getByTestId("field-line")).toHaveStyle("display: block");
@@ -122,7 +122,7 @@ test("should render with `labelInline` when `adaptiveLabelBreakpoint` set and sc
       label="label"
       labelInline
       adaptiveLabelBreakpoint={1000}
-    />
+    />,
   );
 
   expect(screen.getByTestId("field-line")).toHaveStyle("display: flex");
diff --git a/src/__internal__/form-spacing-provider/form-spacing.context.ts b/src/__internal__/form-spacing-provider/form-spacing.context.ts
index 22156e58a8..db7e100943 100644
--- a/src/__internal__/form-spacing-provider/form-spacing.context.ts
+++ b/src/__internal__/form-spacing-provider/form-spacing.context.ts
@@ -5,5 +5,5 @@ export interface FormSpacingContextProps {
 }
 
 export const FormSpacingContext = React.createContext<FormSpacingContextProps>(
-  {}
+  {},
 );
diff --git a/src/__internal__/input-behaviour/useInputBehaviour.ts b/src/__internal__/input-behaviour/useInputBehaviour.ts
index 4880d7e55c..741c91fe6e 100644
--- a/src/__internal__/input-behaviour/useInputBehaviour.ts
+++ b/src/__internal__/input-behaviour/useInputBehaviour.ts
@@ -14,7 +14,7 @@ export interface InputContextProps {
 }
 
 const useInputBehaviour = (
-  blockGroupBehaviour?: boolean
+  blockGroupBehaviour?: boolean,
 ): InputContextProps => {
   const [hasFocus, setHasFocus] = useState(false);
   const [hasMouseOver, setHasMouseOver] = useState(false);
@@ -29,7 +29,7 @@ const useInputBehaviour = (
     (input: { current: HTMLInputElement | HTMLTextAreaElement | null }) => {
       inputRef.current = input.current;
     },
-    []
+    [],
   );
 
   // use mouse down rather than click to accommodate click and drag events too
@@ -66,7 +66,7 @@ const useInputBehaviour = (
       onMouseEnter,
       onMouseLeave,
       assignInput,
-    ]
+    ],
   );
 
   return contextValue;
diff --git a/src/__internal__/input-icon-toggle/input-icon-toggle.style.ts b/src/__internal__/input-icon-toggle/input-icon-toggle.style.ts
index efb3d00c10..bbd2c203ff 100644
--- a/src/__internal__/input-icon-toggle/input-icon-toggle.style.ts
+++ b/src/__internal__/input-icon-toggle/input-icon-toggle.style.ts
@@ -14,7 +14,7 @@ export interface InputIconToggleStyleProps extends ValidationProps {
   onClick?: (
     event:
       | React.MouseEvent<HTMLSpanElement>
-      | React.KeyboardEvent<HTMLSpanElement>
+      | React.KeyboardEvent<HTMLSpanElement>,
   ) => void;
 }
 
@@ -28,7 +28,7 @@ const InputIconToggleStyle = styled.span.attrs(
 
       return event;
     },
-  })
+  }),
 )<InputIconToggleStyleProps & { tabIndex?: number }>`
   align-items: center;
   cursor: pointer;
diff --git a/src/__internal__/input-icon-toggle/input-icon-toggle.test.tsx b/src/__internal__/input-icon-toggle/input-icon-toggle.test.tsx
index 86b865e4bc..0f25a273fa 100644
--- a/src/__internal__/input-icon-toggle/input-icon-toggle.test.tsx
+++ b/src/__internal__/input-icon-toggle/input-icon-toggle.test.tsx
@@ -14,14 +14,14 @@ test.each(["error", "warning", "info"])(
           useValidationIcon: true,
           inputIcon: "settings",
         }}
-      />
+      />,
     );
 
     const validationIcon = screen.getByTestId(`icon-${validationProp}`);
     const icon = screen.queryByTestId("icon");
     expect(validationIcon).toBeVisible();
     expect(icon).not.toBeInTheDocument();
-  }
+  },
 );
 
 test.each([
@@ -33,15 +33,15 @@ test.each([
     const useFloatingSpy = jest.spyOn(floatingUi, "useFloating");
 
     render(
-      <InputIconToggle align={tooltipAlign} useValidationIcon error="error" />
+      <InputIconToggle align={tooltipAlign} useValidationIcon error="error" />,
     );
 
     expect(useFloatingSpy).toHaveBeenCalledWith(
-      expect.objectContaining({ placement: tooltipPosition })
+      expect.objectContaining({ placement: tooltipPosition }),
     );
 
     useFloatingSpy.mockRestore();
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -55,14 +55,14 @@ test.each(["error", "warning", "info"])(
           readOnly: true,
           inputIcon: "settings",
         }}
-      />
+      />,
     );
 
     const validationIcon = screen.getByTestId(`icon-${validationProp}`);
     const icon = screen.queryByTestId("icon");
     expect(validationIcon).toBeVisible();
     expect(icon).not.toBeInTheDocument();
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -76,7 +76,7 @@ test.each(["error", "warning", "info"])(
           disabled: true,
           inputIcon: "settings",
         }}
-      />
+      />,
     );
 
     const validationIcon = screen.queryByTestId(`icon-${validationProp}`);
@@ -84,7 +84,7 @@ test.each(["error", "warning", "info"])(
     expect(validationIcon).not.toBeInTheDocument();
     expect(icon).toBeVisible();
     expect(icon).toHaveAttribute("type", "settings");
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -97,7 +97,7 @@ test.each(["error", "warning", "info"])(
           useValidationIcon: true,
           inputIcon: "settings",
         }}
-      />
+      />,
     );
 
     const validationIcon = screen.queryByTestId(`icon-${validationProp}`);
@@ -105,7 +105,7 @@ test.each(["error", "warning", "info"])(
     expect(validationIcon).not.toBeInTheDocument();
     expect(icon).toBeVisible();
     expect(icon).toHaveAttribute("type", "settings");
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -118,7 +118,7 @@ test.each(["error", "warning", "info"])(
           useValidationIcon: true,
           inputIcon: "settings",
         }}
-      />
+      />,
     );
 
     const validationIcon = screen.queryByTestId(`icon-${validationProp}`);
@@ -126,7 +126,7 @@ test.each(["error", "warning", "info"])(
     expect(validationIcon).not.toBeInTheDocument();
     expect(icon).toBeVisible();
     expect(icon).toHaveAttribute("type", "settings");
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -139,7 +139,7 @@ test.each(["error", "warning", "info"])(
           useValidationIcon: false,
           inputIcon: "settings",
         }}
-      />
+      />,
     );
 
     const validationIcon = screen.queryByTestId(`icon-${validationProp}`);
@@ -147,7 +147,7 @@ test.each(["error", "warning", "info"])(
     expect(validationIcon).not.toBeInTheDocument();
     expect(icon).toBeVisible();
     expect(icon).toHaveAttribute("type", "settings");
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -160,7 +160,7 @@ test.each(["error", "warning", "info"])(
           useValidationIcon: true,
           inputIcon: "settings",
         }}
-      />
+      />,
     );
 
     const validationIcon = screen.queryByTestId(`icon-${validationProp}`);
@@ -168,7 +168,7 @@ test.each(["error", "warning", "info"])(
     expect(validationIcon).not.toBeInTheDocument();
     expect(icon).toBeVisible();
     expect(icon).toHaveAttribute("type", "settings");
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -181,7 +181,7 @@ test.each(["error", "warning", "info"])(
           useValidationIcon: true,
           inputIcon: "settings",
         }}
-      />
+      />,
     );
 
     const validationIcon = screen.queryByTestId(`icon-${validationProp}`);
@@ -189,7 +189,7 @@ test.each(["error", "warning", "info"])(
     expect(validationIcon).not.toBeInTheDocument();
     expect(icon).toBeVisible();
     expect(icon).toHaveAttribute("type", "settings");
-  }
+  },
 );
 
 test("renders an input icon, when `disabled` prop is true, and no validation prop nor `useValidationIcon` is set", () => {
@@ -215,7 +215,7 @@ test("renders only an input icon when both `readOnly` and `disabled` props are t
       disabled
       inputIcon="settings"
       useValidationIcon={false}
-    />
+    />,
   );
 
   const icon = screen.getByTestId("icon");
@@ -235,7 +235,7 @@ test.each(["error", "warning", "info"])(
           disabled: true,
           inputIcon: "settings",
         }}
-      />
+      />,
     );
 
     const validationIcon = screen.queryByTestId(`icon-${validationProp}`);
@@ -243,7 +243,7 @@ test.each(["error", "warning", "info"])(
     expect(validationIcon).not.toBeInTheDocument();
     expect(icon).toBeVisible();
     expect(icon).toHaveAttribute("type", "settings");
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -258,7 +258,7 @@ test.each(["error", "warning", "info"])(
           disabled: true,
           inputIcon: "settings",
         }}
-      />
+      />,
     );
 
     const validationIcon = screen.queryByTestId(`icon-${validationProp}`);
@@ -266,7 +266,7 @@ test.each(["error", "warning", "info"])(
     expect(validationIcon).not.toBeInTheDocument();
     expect(icon).toBeVisible();
     expect(icon).toHaveAttribute("type", "settings");
-  }
+  },
 );
 
 test.each([
@@ -283,7 +283,7 @@ test.each([
     fireEvent(icon, keydownEvent);
 
     expect(keydownEvent.defaultPrevented).toBeTruthy();
-  }
+  },
 );
 
 test.each([
@@ -300,13 +300,13 @@ test.each([
     fireEvent(icon, keydownEvent);
 
     expect(keydownEvent.defaultPrevented).toBeFalsy();
-  }
+  },
 );
 
 test("calls `onFocus` handler when the validation icon is focused", async () => {
   const mockOnFocus = jest.fn();
   render(
-    <InputIconToggle error="error" onFocus={mockOnFocus} useValidationIcon />
+    <InputIconToggle error="error" onFocus={mockOnFocus} useValidationIcon />,
   );
 
   const validationIcon = screen.getByTestId("icon-error");
@@ -318,7 +318,7 @@ test("calls `onFocus` handler when the validation icon is focused", async () =>
 test("calls `onBlur` handler when the validation icon loses focus", async () => {
   const mockOnBlur = jest.fn();
   render(
-    <InputIconToggle error="error" onBlur={mockOnBlur} useValidationIcon />
+    <InputIconToggle error="error" onBlur={mockOnBlur} useValidationIcon />,
   );
 
   const validationIcon = screen.getByTestId("icon-error");
@@ -338,7 +338,7 @@ test("passes `validationIconId` to the tooltip when hovering over the validation
       error="Error"
       validationIconId={validationIconId}
       useValidationIcon
-    />
+    />,
   );
 
   const user = userEvent.setup();
diff --git a/src/__internal__/input/input-presentation.component.tsx b/src/__internal__/input/input-presentation.component.tsx
index eec0fecf5f..511953fdd8 100644
--- a/src/__internal__/input/input-presentation.component.tsx
+++ b/src/__internal__/input/input-presentation.component.tsx
@@ -58,15 +58,12 @@ const InputPresentation = ({
   size = "medium",
   warning,
 }: InputPresentationProps): JSX.Element => {
-  const { hasFocus, onMouseDown, onMouseEnter, onMouseLeave } = useContext(
-    InputContext
-  );
+  const { hasFocus, onMouseDown, onMouseEnter, onMouseLeave } =
+    useContext(InputContext);
   const { validationRedesignOptIn } = useContext(NewValidationContext);
 
-  const {
-    onMouseEnter: onGroupMouseEnter,
-    onMouseLeave: onGroupMouseLeave,
-  } = useContext(InputGroupContext);
+  const { onMouseEnter: onGroupMouseEnter, onMouseLeave: onGroupMouseLeave } =
+    useContext(InputGroupContext);
 
   const handleMouseEnter = () => {
     if (onMouseEnter) onMouseEnter();
diff --git a/src/__internal__/input/input-presentation.test.tsx b/src/__internal__/input/input-presentation.test.tsx
index 6129a57385..7bb0c0242f 100644
--- a/src/__internal__/input/input-presentation.test.tsx
+++ b/src/__internal__/input/input-presentation.test.tsx
@@ -9,15 +9,14 @@ test("renders presentational div and presentation container elements", () => {
   render(<InputPresentation>Children</InputPresentation>);
 
   const inputPresentationContainer = screen.getByTestId(
-    "input-presentation-container"
+    "input-presentation-container",
   );
   const inputPresentation = within(inputPresentationContainer).getByRole(
-    "presentation"
+    "presentation",
   );
 
-  const inputPresentationChildren = within(inputPresentation).getByText(
-    "Children"
-  );
+  const inputPresentationChildren =
+    within(inputPresentation).getByText("Children");
   expect(inputPresentationChildren).toBeVisible();
 });
 
@@ -25,15 +24,15 @@ test("renders a passed node via the `positionedChildren` prop before any other c
   render(
     <InputPresentation positionedChildren="Favourite Child.">
       Middle Child.
-    </InputPresentation>
+    </InputPresentation>,
   );
 
   const inputPresentationContainer = screen.getByTestId(
-    "input-presentation-container"
+    "input-presentation-container",
   );
 
   expect(inputPresentationContainer).toHaveTextContent(
-    "Favourite Child.Middle Child."
+    "Favourite Child.Middle Child.",
   );
 });
 
@@ -43,7 +42,7 @@ test("triggers a passed function via the `onMouseEnter` prop when the input is h
   render(
     <InputContext.Provider value={{ onMouseEnter: onMouseEnterMock }}>
       <InputPresentation>sample children</InputPresentation>
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
 
   const user = userEvent.setup();
@@ -60,7 +59,7 @@ test("triggers a passed function via the `onMouseEnter` prop from the input cont
   render(
     <InputGroupContext.Provider value={{ onMouseEnter: onMouseEnterMock }}>
       <InputPresentation>sample children</InputPresentation>
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   const user = userEvent.setup();
@@ -77,7 +76,7 @@ test("triggers a passed function via the `onMouseLeave` prop when the input is h
   render(
     <InputContext.Provider value={{ onMouseLeave: onMouseLeaveMock }}>
       <InputPresentation>sample children</InputPresentation>
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
 
   const user = userEvent.setup();
@@ -95,7 +94,7 @@ test("triggers a passed function via the `onMouseLeave` prop from the input cont
   render(
     <InputGroupContext.Provider value={{ onMouseLeave: onMouseLeaveMock }}>
       <InputPresentation>sample children</InputPresentation>
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   const user = userEvent.setup();
@@ -115,11 +114,11 @@ test.each(["left", "right"])(
     render(
       <InputPresentation hasIcon align={alignValue}>
         <Input />
-      </InputPresentation>
+      </InputPresentation>,
     );
 
     const inputPresentation = screen.getByRole("presentation");
     const input = within(inputPresentation).getByRole("textbox");
     expect(input).toHaveStyle(`padding-${alignValue}: 0`);
-  }
+  },
 );
diff --git a/src/__internal__/input/input.component.tsx b/src/__internal__/input/input.component.tsx
index 620d4fa7f7..164f316c31 100644
--- a/src/__internal__/input/input.component.tsx
+++ b/src/__internal__/input/input.component.tsx
@@ -65,7 +65,7 @@ export interface InputProps extends CommonInputProps {
 }
 
 function selectTextOnFocus(
-  input: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
+  input: React.RefObject<HTMLInputElement | HTMLTextAreaElement>,
 ) {
   // setTimeout is required so the dom has a chance to place the cursor in the input
   setTimeout(() => {
@@ -112,7 +112,7 @@ const Input = React.forwardRef<
       enterKeyHint,
       ...rest
     }: InputProps,
-    ref
+    ref,
   ): JSX.Element => {
     const context = useContext(InputContext);
     const groupContext = useContext(InputGroupContext);
@@ -140,7 +140,7 @@ const Input = React.forwardRef<
           element.setAttribute("enterkeyhint", enterKeyHint);
         }
       },
-      [autoFocus, ref, enterKeyHint]
+      [autoFocus, ref, enterKeyHint],
     );
 
     useEffect(() => {
@@ -247,7 +247,7 @@ const Input = React.forwardRef<
         inputBorderRadius={inputBorderRadius}
       />
     );
-  }
+  },
 );
 
 Input.displayName = "Input";
diff --git a/src/__internal__/input/input.test.tsx b/src/__internal__/input/input.test.tsx
index 9077174c29..0d9b8611f1 100644
--- a/src/__internal__/input/input.test.tsx
+++ b/src/__internal__/input/input.test.tsx
@@ -33,7 +33,7 @@ test.each([
 
     const input = screen.getByRole("textbox");
     expect(input).toHaveAttribute("enterKeyHint", keyHint);
-  }
+  },
 );
 
 test("should invoke the `inputRef` callback from the input context provider, when the input is rendered", () => {
@@ -41,7 +41,7 @@ test("should invoke the `inputRef` callback from the input context provider, whe
   render(
     <InputContext.Provider value={{ inputRef }}>
       <Input />
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
 
   expect(inputRef).toHaveBeenCalled();
@@ -62,7 +62,7 @@ test("triggers a passed function via the `onFocus` prop from the input context p
   render(
     <InputContext.Provider value={{ onFocus: onFocusMock }}>
       <Input />
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
 
   const input = screen.getByRole("textbox");
@@ -89,7 +89,7 @@ test("triggers a passed function via the `onBlur` prop from the input context pr
   render(
     <InputContext.Provider value={{ onBlur: onBlurMock }}>
       <Input />
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
 
   const user = userEvent.setup();
diff --git a/src/__internal__/label/label.component.tsx b/src/__internal__/label/label.component.tsx
index 22058c961b..d3475a007d 100644
--- a/src/__internal__/label/label.component.tsx
+++ b/src/__internal__/label/label.component.tsx
@@ -85,10 +85,8 @@ export const Label = ({
 }: LabelProps) => {
   const [isFocused, setFocus] = useState(false);
   const { onMouseEnter, onMouseLeave } = useContext(InputContext);
-  const {
-    onMouseEnter: onGroupMouseEnter,
-    onMouseLeave: onGroupMouseLeave,
-  } = useContext(InputGroupContext);
+  const { onMouseEnter: onGroupMouseEnter, onMouseLeave: onGroupMouseLeave } =
+    useContext(InputGroupContext);
 
   const handleMouseEnter = () => {
     if (onMouseEnter) onMouseEnter();
diff --git a/src/__internal__/label/label.test.tsx b/src/__internal__/label/label.test.tsx
index 2b6360d47e..e8e58cd62c 100644
--- a/src/__internal__/label/label.test.tsx
+++ b/src/__internal__/label/label.test.tsx
@@ -17,7 +17,7 @@ test("calls `onMouseEnter` and `onMouseLeave` callbacks passed from InputContext
   render(
     <InputContext.Provider value={{ onMouseEnter, onMouseLeave }}>
       <Label>foo</Label>
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
 
   const label = screen.getByText("foo");
@@ -37,7 +37,7 @@ test("calls `onMouseEnter` and `onMouseLeave` callbacks passed from InputGroupCo
   render(
     <InputGroupContext.Provider value={{ onMouseEnter, onMouseLeave }}>
       <Label>foo</Label>
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   const label = screen.getByText("foo");
@@ -78,7 +78,7 @@ test("renders Help tooltip with provided `tooltipId`", async () => {
   render(
     <Label help="bar" tooltipId="baz">
       foo
-    </Label>
+    </Label>,
   );
 
   await user.hover(screen.getByRole("button", { name: "help" }));
@@ -104,7 +104,7 @@ test("does not render validation icon when `disabled` prop is true", () => {
   render(
     <Label error="error" disabled>
       foo
-    </Label>
+    </Label>,
   );
 
   expect(screen.queryByTestId("icon-error")).not.toBeInTheDocument();
@@ -120,7 +120,7 @@ test("does not render with `htmlFor` when not rendered as a `<label>` element",
   render(
     <Label as="span" htmlFor="baz">
       foo
-    </Label>
+    </Label>,
   );
 
   expect(screen.getByText("foo")).not.toHaveAttribute("for");
@@ -133,14 +133,14 @@ test.each(["error", "warning", "info"])(
     render(
       <Label inline {...{ [validationProp]: "Message" }}>
         foo
-      </Label>
+      </Label>,
     );
     await user.hover(screen.getByTestId(`icon-${validationProp}`));
     expect(await screen.findByRole("tooltip")).toHaveAttribute(
       "data-placement",
-      "top"
+      "top",
     );
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -151,9 +151,9 @@ test.each(["error", "warning", "info"])(
     await user.hover(screen.getByTestId(`icon-${validationProp}`));
     expect(await screen.findByRole("tooltip")).toHaveAttribute(
       "data-placement",
-      "right"
+      "right",
     );
-  }
+  },
 );
 
 // coverage
@@ -161,7 +161,7 @@ test("renders with expected styles when `inline` is true and `align` is 'left'",
   render(
     <Label inline align="left">
       foo
-    </Label>
+    </Label>,
   );
 
   expect(screen.getByTestId("label-container")).toHaveStyle({
diff --git a/src/__internal__/popover/popover.component.tsx b/src/__internal__/popover/popover.component.tsx
index 4d4afad0ea..d32bb931ee 100644
--- a/src/__internal__/popover/popover.component.tsx
+++ b/src/__internal__/popover/popover.component.tsx
@@ -139,7 +139,7 @@ const Popover = ({
 
   return ReactDOM.createPortal(
     <CarbonScopedTokensProvider>{content}</CarbonScopedTokensProvider>,
-    elementDOM.current as HTMLDivElement
+    elementDOM.current as HTMLDivElement,
   );
 };
 
diff --git a/src/__internal__/popover/popover.test.tsx b/src/__internal__/popover/popover.test.tsx
index 3cdda02d4e..857c1e2b40 100644
--- a/src/__internal__/popover/popover.test.tsx
+++ b/src/__internal__/popover/popover.test.tsx
@@ -6,7 +6,7 @@ import { baseTheme } from "../../style/themes";
 import Dialog from "../../components/dialog";
 
 const PopoverWithButton = (
-  props: Omit<PopoverProps, "children" | "reference">
+  props: Omit<PopoverProps, "children" | "reference">,
 ) => {
   const buttonRef = React.useRef<HTMLButtonElement>(null);
 
@@ -26,7 +26,7 @@ test("popup content is visible by default", () => {
   render(
     <Popover reference={{ current: null }}>
       <div>I float!</div>
-    </Popover>
+    </Popover>,
   );
 
   expect(screen.getByText("I float!")).toBeVisible();
@@ -36,7 +36,7 @@ test("popup content is visible when isOpen prop is true", () => {
   render(
     <Popover isOpen reference={{ current: null }}>
       <div>I float!</div>
-    </Popover>
+    </Popover>,
   );
 
   expect(screen.getByText("I float!")).toBeVisible();
@@ -46,7 +46,7 @@ test("popup content is hidden when isOpen prop is false", () => {
   render(
     <Popover isOpen={false} reference={{ current: null }}>
       <div>I float!</div>
-    </Popover>
+    </Popover>,
   );
 
   expect(screen.getByText("I float!")).not.toBeVisible();
@@ -56,7 +56,7 @@ test("renders popup in the document body to avoid any ancestors affecting its la
   render(
     <main>
       <PopoverWithButton />
-    </main>
+    </main>,
   );
 
   expect(document.body).toHaveTextContent(/I float!/);
@@ -67,7 +67,7 @@ test("renders popup within the component's ancestor as normal when disablePortal
   render(
     <main>
       <PopoverWithButton disablePortal />
-    </main>
+    </main>,
   );
 
   expect(screen.getByRole("main")).toHaveTextContent(/I float!/);
@@ -128,10 +128,10 @@ test("applies popup styling to the element specified via the childRefOverride pr
   await user.click(screen.getByRole("button", { name: /Toggle popup/ }));
 
   expect(screen.getByRole("article")).not.toHaveAttribute(
-    "data-floating-placement"
+    "data-floating-placement",
   );
   expect(screen.getByText("I float!")).toHaveAttribute(
-    "data-floating-placement"
+    "data-floating-placement",
   );
 });
 
@@ -140,7 +140,7 @@ test("renders popup within a transparent backdrop to prevent scrolling outside t
     <main>
       <PopoverWithButton disableBackgroundUI />
       <p>Lorem ipsum dolor sit amet...</p>
-    </main>
+    </main>,
   );
 
   const backdrop = screen.getByTestId("popup-backdrop");
@@ -160,7 +160,7 @@ test("does not render a backdrop when disableBackgroundUI is false", () => {
     <main>
       <PopoverWithButton />
       <p>Lorem ipsum dolor sit amet...</p>
-    </main>
+    </main>,
   );
 
   expect(screen.queryByTestId("popup-backdrop")).not.toBeInTheDocument();
diff --git a/src/__internal__/radio-button-mapper/radio-button-mapper.component.tsx b/src/__internal__/radio-button-mapper/radio-button-mapper.component.tsx
index 7306191342..eccc3a6be6 100644
--- a/src/__internal__/radio-button-mapper/radio-button-mapper.component.tsx
+++ b/src/__internal__/radio-button-mapper/radio-button-mapper.component.tsx
@@ -35,9 +35,10 @@ const RadioButtonMapper = ({
   onKeyDown,
   value,
 }: RadioButtonMapperProps) => {
-  const filteredChildren = useMemo(() => React.Children.toArray(children), [
-    children,
-  ]);
+  const filteredChildren = useMemo(
+    () => React.Children.toArray(children),
+    [children],
+  );
   const anyChecked = useMemo(() => {
     let result = false;
     filteredChildren.forEach((child) => {
@@ -61,7 +62,7 @@ const RadioButtonMapper = ({
         setCheckedValue(event.target.value);
       }
     },
-    [onChange, setCheckedValue, isControlled]
+    [onChange, setCheckedValue, isControlled],
   );
 
   const buttons = filteredChildren.map((child) => {
diff --git a/src/__internal__/radio-button-mapper/radio-button-mapper.test.tsx b/src/__internal__/radio-button-mapper/radio-button-mapper.test.tsx
index efeb086c04..dd43f9cef6 100644
--- a/src/__internal__/radio-button-mapper/radio-button-mapper.test.tsx
+++ b/src/__internal__/radio-button-mapper/radio-button-mapper.test.tsx
@@ -29,7 +29,7 @@ test("renders RadioButton children with expected `name` prop", () => {
     <RadioButtonMapper name="test">
       <RadioButton id="radio-1" value="one" />
       <RadioButton id="radio-2" value="two" />
-    </RadioButtonMapper>
+    </RadioButtonMapper>,
   );
 
   const radioButtons = screen.getAllByRole("radio");
@@ -65,7 +65,7 @@ test("checks and unchecks correct RadioButtons when inputs are uncontrolled", as
     <RadioButtonMapper name="test">
       <RadioButton id="radio-1" value="one" label="One" />
       <RadioButton id="radio-2" value="two" label="Two" />
-    </RadioButtonMapper>
+    </RadioButtonMapper>,
   );
 
   const radio1 = screen.getByRole("radio", { name: "One" });
@@ -91,7 +91,7 @@ test("checks and unchecks correct RadioButtons when `defaultChecked` is set", as
     <RadioButtonMapper name="test">
       <RadioButton id="radio-1" value="one" defaultChecked label="One" />
       <RadioButton id="radio-2" value="two" label="Two" />
-    </RadioButtonMapper>
+    </RadioButtonMapper>,
   );
 
   const radio1 = screen.getByRole("radio", { name: "One" });
@@ -113,7 +113,7 @@ test("calls `onChange` callback when a RadioButton child is clicked", async () =
     <RadioButtonMapper name="test" onChange={onChange}>
       <RadioButton id="radio-1" value="one" label="One" />
       <RadioButton id="radio-2" value="two" label="Two" />
-    </RadioButtonMapper>
+    </RadioButtonMapper>,
   );
 
   const radio1 = screen.getByRole("radio", { name: "One" });
@@ -121,7 +121,7 @@ test("calls `onChange` callback when a RadioButton child is clicked", async () =
 
   expect(onChange).toHaveBeenCalledTimes(1);
   expect(onChange).toHaveBeenCalledWith(
-    expect.objectContaining({ target: radio1 })
+    expect.objectContaining({ target: radio1 }),
   );
 });
 
@@ -132,7 +132,7 @@ test("calls `onBlur` callback when a RadioButton child is blurred", async () =>
     <RadioButtonMapper name="test" onBlur={onBlur}>
       <RadioButton id="radio-1" value="one" label="One" />
       <RadioButton id="radio-2" value="two" label="Two" />
-    </RadioButtonMapper>
+    </RadioButtonMapper>,
   );
 
   const radio1 = screen.getByRole("radio", { name: "One" });
@@ -142,7 +142,7 @@ test("calls `onBlur` callback when a RadioButton child is blurred", async () =>
 
   expect(onBlur).toHaveBeenCalledTimes(1);
   expect(onBlur).toHaveBeenCalledWith(
-    expect.objectContaining({ target: radio1 })
+    expect.objectContaining({ target: radio1 }),
   );
 });
 
@@ -157,7 +157,7 @@ test("accepts non-RadioButton children", () => {
           null,
           false,
         ]}
-      </RadioButtonMapper>
+      </RadioButtonMapper>,
     );
   }).not.toThrow();
 });
diff --git a/src/__internal__/sticky-footer/sticky-footer.component.tsx b/src/__internal__/sticky-footer/sticky-footer.component.tsx
index 8fd55ff83a..b772381057 100644
--- a/src/__internal__/sticky-footer/sticky-footer.component.tsx
+++ b/src/__internal__/sticky-footer/sticky-footer.component.tsx
@@ -43,7 +43,7 @@ const StickyFooter = ({
 
       setIsSticky(!fullyScrolled);
     }, SCROLL_THROTTLE),
-    [containerRef]
+    [containerRef],
   );
 
   useEffect(() => {
diff --git a/src/__internal__/tooltip-provider/index.tsx b/src/__internal__/tooltip-provider/index.tsx
index 4715ad41be..f8d521f71d 100644
--- a/src/__internal__/tooltip-provider/index.tsx
+++ b/src/__internal__/tooltip-provider/index.tsx
@@ -19,9 +19,8 @@ interface ToolbarContextProps extends Omit<TooltipProviderProps, "children"> {
   };
 }
 
-export const TooltipContext: React.Context<ToolbarContextProps> = React.createContext(
-  {}
-);
+export const TooltipContext: React.Context<ToolbarContextProps> =
+  React.createContext({});
 
 export const TooltipProvider = ({
   children,
diff --git a/src/__internal__/utils/helpers/events/events.test.ts b/src/__internal__/utils/helpers/events/events.test.ts
index 5c2873f9c7..ace69e3362 100644
--- a/src/__internal__/utils/helpers/events/events.test.ts
+++ b/src/__internal__/utils/helpers/events/events.test.ts
@@ -24,7 +24,7 @@ describe("isKeyboardEvent", () => {
       const result = Events.isKeyboardEvent(event);
 
       expect(result).toBeTruthy();
-    }
+    },
   );
 
   it("returns false when the event type is not a keyboard event type", () => {
@@ -73,7 +73,7 @@ describe("isNumberKey", () => {
       const result = Events.isNumberKey(event);
 
       expect(result).toBeTruthy();
-    }
+    },
   );
 
   it("returns false when the event type is not a number key event", () => {
@@ -303,7 +303,7 @@ describe("composedPath", () => {
     div.appendChild(ul);
 
     const path = [div, ul, li];
-    const event = ({ target: li } as unknown) as CustomEvent;
+    const event = { target: li } as unknown as CustomEvent;
     const result = Events.composedPath(event);
 
     expect(result).toEqual(path);
diff --git a/src/__internal__/utils/helpers/events/events.ts b/src/__internal__/utils/helpers/events/events.ts
index 272e8655f4..adcdf59dd9 100644
--- a/src/__internal__/utils/helpers/events/events.ts
+++ b/src/__internal__/utils/helpers/events/events.ts
@@ -23,7 +23,7 @@ const Events = {
    * Determines if event is a keyboard event
    */
   isKeyboardEvent: (
-    ev: React.SyntheticEvent | Event
+    ev: React.SyntheticEvent | Event,
   ): ev is React.KeyboardEvent | KeyboardEvent => {
     return ["keydown", "keypress", "keyup"].includes(ev.type);
   },
diff --git a/src/__internal__/utils/helpers/tags/tags.ts b/src/__internal__/utils/helpers/tags/tags.ts
index 0e4a84979e..691a48435f 100644
--- a/src/__internal__/utils/helpers/tags/tags.ts
+++ b/src/__internal__/utils/helpers/tags/tags.ts
@@ -17,7 +17,7 @@ export interface TagProps {
  */
 function tagComponent(
   componentName: string | undefined,
-  props: TagProps & RestProps
+  props: TagProps & RestProps,
 ): TagProps {
   const tagProps: TagProps = {
     "data-component": componentName,
diff --git a/src/__internal__/utils/logger/logger.test.ts b/src/__internal__/utils/logger/logger.test.ts
index e56a92d4eb..cb3df963fa 100644
--- a/src/__internal__/utils/logger/logger.test.ts
+++ b/src/__internal__/utils/logger/logger.test.ts
@@ -18,7 +18,7 @@ test("should output a warning to the console with a deprecation prefix when logg
   Logger.deprecate("This is a deprecation message");
 
   expect(consoleWarnSpy).toHaveBeenCalledWith(
-    "[Deprecation] This is a deprecation message"
+    "[Deprecation] This is a deprecation message",
   );
   consoleWarnSpy.mockReset();
 });
diff --git a/src/__internal__/validations/validation-icon.component.tsx b/src/__internal__/validations/validation-icon.component.tsx
index 46f20d6f80..2a3ccff5f7 100644
--- a/src/__internal__/validations/validation-icon.component.tsx
+++ b/src/__internal__/validations/validation-icon.component.tsx
@@ -87,23 +87,20 @@ export const ValidationIcon = ({
   const flipBehaviourCheck =
     Array.isArray(tooltipFlipOverrides) &&
     tooltipFlipOverrides.every((override) =>
-      ["bottom", "left", "right", "top"].includes(override)
+      ["bottom", "left", "right", "top"].includes(override),
     );
 
   if (tooltipFlipOverrides) {
     invariant(
       flipBehaviourCheck,
-      `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`
+      `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`,
     );
   }
 
-  const { hasFocus, hasMouseOver } = useContext<InputContextProps>(
-    InputContext
-  );
-  const {
-    hasFocus: groupHasFocus,
-    hasMouseOver: groupHasMouseOver,
-  } = useContext<InputContextProps>(InputGroupContext);
+  const { hasFocus, hasMouseOver } =
+    useContext<InputContextProps>(InputContext);
+  const { hasFocus: groupHasFocus, hasMouseOver: groupHasMouseOver } =
+    useContext<InputContextProps>(InputGroupContext);
   const [triggeredByIcon, setTriggeredByIcon] = useState(false);
 
   const validationType = getValidationType({ error, warning, info });
diff --git a/src/__internal__/validations/validation-icon.test.tsx b/src/__internal__/validations/validation-icon.test.tsx
index c1bb0b17f8..9957818a51 100644
--- a/src/__internal__/validations/validation-icon.test.tsx
+++ b/src/__internal__/validations/validation-icon.test.tsx
@@ -8,7 +8,7 @@ import { testStyledSystemMarginRTL } from "../../__spec_helper__/__internal__/te
 
 testStyledSystemMarginRTL(
   (props) => <ValidationIcon {...props} error="error" />,
-  () => screen.getByTestId("validation-icon-wrapper")
+  () => screen.getByTestId("validation-icon-wrapper"),
 );
 
 test("renders an icon with the error type when the `error` prop is a string", () => {
@@ -57,7 +57,7 @@ test("renders a tooltip if the `hasFocus` prop is true on the input context prov
   render(
     <InputContext.Provider value={{ hasFocus: true }}>
       <ValidationIcon error="error" />
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
   const tooltip = screen.getByRole("tooltip");
   expect(tooltip).toBeVisible();
@@ -67,7 +67,7 @@ test("renders a tooltip if the `hasMouseOver` prop is true on the input context
   render(
     <InputContext.Provider value={{ hasMouseOver: true }}>
       <ValidationIcon error="error" />
-    </InputContext.Provider>
+    </InputContext.Provider>,
   );
   const tooltip = screen.getByRole("tooltip");
   expect(tooltip).toBeVisible();
@@ -77,7 +77,7 @@ test("renders a tooltip if the `hasFocus` prop is true on the input group contex
   render(
     <InputGroupContext.Provider value={{ hasFocus: true }}>
       <ValidationIcon error="error" />
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
   const tooltip = screen.getByRole("tooltip");
   expect(tooltip).toBeVisible();
@@ -87,7 +87,7 @@ test("renders a tooltip if the `hasMouseOver` prop is true on the input group co
   render(
     <InputGroupContext.Provider value={{ hasMouseOver: true }}>
       <ValidationIcon error="error" />
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
   const tooltip = screen.getByRole("tooltip");
   expect(tooltip).toBeVisible();
@@ -188,7 +188,7 @@ test("throws an error when `tooltipFlipOverride` props value is not an array", (
         /* @ts-expect-error testing invalid prop value */
         tooltipFlipOverrides="top"
         error="error"
-      />
+      />,
     );
   }).toThrow(errorMessage);
 
@@ -208,7 +208,7 @@ test("throws an error when the `tooltipFlipOverride` props value is an array, bu
         /* @ts-expect-error testing invalid prop value */
         tooltipFlipOverrides={["top", "foo"]}
         error="error"
-      />
+      />,
     );
   }).toThrow(errorMessage);
 
diff --git a/src/__spec_helper__/__internal__/expect.ts b/src/__spec_helper__/__internal__/expect.ts
index f50ac05909..7b3582d9eb 100644
--- a/src/__spec_helper__/__internal__/expect.ts
+++ b/src/__spec_helper__/__internal__/expect.ts
@@ -33,7 +33,7 @@ expect.extend({
         diffString && diffString.includes("- Expect")
           ? `Difference:\n\n${diffString}`
           : `Expected: ${this.utils.printExpected(
-              expected
+              expected,
             )}\nReceived: ${this.utils.printReceived(DOMNode)}`
       }`;
     };
diff --git a/src/__spec_helper__/__internal__/select-test-utils.ts b/src/__spec_helper__/__internal__/select-test-utils.ts
index 541fda2a85..b908861f2d 100644
--- a/src/__spec_helper__/__internal__/select-test-utils.ts
+++ b/src/__spec_helper__/__internal__/select-test-utils.ts
@@ -31,7 +31,7 @@ export function simulateSelectTextboxEvent(
 
 export function simulateDropdownEvent(
   container: ReactWrapper,
-  eventType: string
+  eventType: string,
 ) {
   const dropdown = container.find('[type="dropdown"]').first();
 
diff --git a/src/__spec_helper__/__internal__/test-utils.ts b/src/__spec_helper__/__internal__/test-utils.ts
index 75fd5b000a..31656bf01b 100644
--- a/src/__spec_helper__/__internal__/test-utils.ts
+++ b/src/__spec_helper__/__internal__/test-utils.ts
@@ -34,7 +34,7 @@ const assertStyleMatch: any = <Props>(
     | ReactTestRendererJSON[]
     | null
     | HTMLElement,
-  opts?: jest.Options
+  opts?: jest.Options,
 ) => {
   Object.entries(styleSpec).forEach(([attr, value]) => {
     expect(component).toHaveStyleRule(toCSSCase(attr), value, opts);
@@ -66,27 +66,36 @@ const keys = [
   "1",
 ];
 
-const keyboard = keys.reduce((acc, key) => {
-  const methodName = `press${key === " " ? "Space" : key}`;
-  acc[methodName] = () => dispatchKeyPress(key);
-  return acc;
-}, {} as Record<string, () => void>);
+const keyboard = keys.reduce(
+  (acc, key) => {
+    const methodName = `press${key === " " ? "Space" : key}`;
+    acc[methodName] = () => dispatchKeyPress(key);
+    return acc;
+  },
+  {} as Record<string, () => void>,
+);
 
 // Build an object of Enzyme simulate helpers
 // e.g. simulate.keydown.pressTab(target, { shiftKey: true })
 // e.g. simulate.keydown.pressEscape(target)
-const keydown = keys.reduce((acc, key) => {
-  const methodName = `press${key === " " ? "Space" : key}`;
-
-  acc[methodName] = (target, { shiftKey } = { shiftKey: false }) => {
-    target.simulate("keydown", {
-      shiftKey,
-      key,
-    });
-  };
-  return acc;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-}, {} as Record<string, (target: ReactWrapper<any>, { shiftKey }?: { shiftKey: boolean }) => void>);
+const keydown = keys.reduce(
+  (acc, key) => {
+    const methodName = `press${key === " " ? "Space" : key}`;
+
+    acc[methodName] = (target, { shiftKey } = { shiftKey: false }) => {
+      target.simulate("keydown", {
+        shiftKey,
+        key,
+      });
+    };
+    return acc;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  },
+  {} as Record<
+    string,
+    (target: ReactWrapper<any>, { shiftKey }?: { shiftKey: boolean }) => void
+  >,
+);
 
 const simulate = {
   keydown,
@@ -110,40 +119,37 @@ const isUnique = (val: number, index: number, self: number[]) =>
 const isSelectableGiven = (nonSelectables: number[]) => (i: number) =>
   !nonSelectables.includes(i);
 
-const selectedItemReducer = (
-  method: (wrapper: ReactWrapper) => (i: number) => void
-) => (wrapper: ReactWrapper) => (acc: number[], i: number) => {
-  method(wrapper)(i);
-  return [...acc, selectedItemOf(wrapper)];
-};
+const selectedItemReducer =
+  (method: (wrapper: ReactWrapper) => (i: number) => void) =>
+  (wrapper: ReactWrapper) =>
+  (acc: number[], i: number) => {
+    method(wrapper)(i);
+    return [...acc, selectedItemOf(wrapper)];
+  };
 
 const arraysEqual = (arr1: number[], arr2: number[]) =>
   arr1.sort().join(",") === arr2.sort().join(",");
 
-const assertCorrectTraversal = (
-  method: (wrapper: ReactWrapper) => (i: number) => void
-) => (expect: jest.Expect) => ({
-  num,
-  nonSelectables = [],
-}: {
-  num: number;
-  nonSelectables?: number[];
-}) => (wrapper: ReactWrapper) => {
-  const array = makeArrayKeys(num);
-  const validIndexes = array.filter(isSelectableGiven(nonSelectables));
-
-  const selectedItem = selectedItemOf(wrapper);
-  const indexesThatWereSelected = array
-    .reduce(selectedItemReducer(method)(wrapper), [selectedItem])
-    .filter(isUnique);
-  expect(arraysEqual(validIndexes, indexesThatWereSelected)).toBeTruthy();
-};
+const assertCorrectTraversal =
+  (method: (wrapper: ReactWrapper) => (i: number) => void) =>
+  (expect: jest.Expect) =>
+  ({ num, nonSelectables = [] }: { num: number; nonSelectables?: number[] }) =>
+  (wrapper: ReactWrapper) => {
+    const array = makeArrayKeys(num);
+    const validIndexes = array.filter(isSelectableGiven(nonSelectables));
+
+    const selectedItem = selectedItemOf(wrapper);
+    const indexesThatWereSelected = array
+      .reduce(selectedItemReducer(method)(wrapper), [selectedItem])
+      .filter(isUnique);
+    expect(arraysEqual(validIndexes, indexesThatWereSelected)).toBeTruthy();
+  };
 
 const assertKeyboardTraversal = assertCorrectTraversal(
-  () => keyboard.pressArrowDown
+  () => keyboard.pressArrowDown,
 )(expect);
 const assertHoverTraversal = assertCorrectTraversal((wrapper: ReactWrapper) =>
-  hoverList(wrapper)
+  hoverList(wrapper),
 )(expect);
 
 const marginProps = [
@@ -159,7 +165,7 @@ const marginProps = [
 ] as const;
 
 type MarginProps = {
-  [K in typeof marginProps[number][0]]?: string | number;
+  [K in (typeof marginProps)[number][0]]?: string | number;
 };
 
 const paddingProps = [
@@ -175,7 +181,7 @@ const paddingProps = [
 ] as const;
 
 type PaddingProps = {
-  [K in typeof paddingProps[number][0]]?: string | number;
+  [K in (typeof paddingProps)[number][0]]?: string | number;
 };
 
 const colorProps = [
@@ -275,7 +281,7 @@ const testStyledSystemMargin = (
   component: (spacingProps?: MarginProps) => JSX.Element,
   defaults?: MarginProps,
   styleContainer?: (wrapper: ReactWrapper) => ReactWrapper,
-  assertOpts?: jest.Options
+  assertOpts?: jest.Options,
 ) => {
   describe("default props", () => {
     let wrapper: ReactWrapper;
@@ -309,7 +315,7 @@ const testStyledSystemMargin = (
             marginBottom,
           },
           StyleElement,
-          assertOpts
+          assertOpts,
         );
       } else {
         expect(StyleElement).not.toHaveStyleRule("marginLeft");
@@ -331,16 +337,16 @@ const testStyledSystemMargin = (
         assertStyleMatch(
           { [propName]: "var(--spacing200)" },
           styleContainer ? styleContainer(wrapper) : wrapper,
-          assertOpts
+          assertOpts,
         );
       });
-    }
+    },
   );
 };
 
 const testStyledSystemGrid = (
   component: (gridProperties?: GridProps) => JSX.Element,
-  elementQuery: () => HTMLElement
+  elementQuery: () => HTMLElement,
 ) => {
   describe.each(gridProps)(
     'when a prop is specified using the "%s" styled system props',
@@ -351,13 +357,13 @@ const testStyledSystemGrid = (
 
         assertStyleMatch({ [propName]: value }, elementQuery());
       });
-    }
+    },
   );
 };
 
 const testStyledSystemBackground = (
   component: (backgroundProperties?: BackgroundProps) => JSX.Element,
-  elementQuery: () => HTMLElement
+  elementQuery: () => HTMLElement,
 ) => {
   describe.each(backgroundProps)(
     'when a prop is specified using the "%s" styled system props',
@@ -368,13 +374,13 @@ const testStyledSystemBackground = (
 
         assertStyleMatch({ [styledSystemProp]: value }, elementQuery());
       });
-    }
+    },
   );
 };
 
 const testStyledSystemPosition = (
   component: (positionProperties?: PositionProps) => JSX.Element,
-  elementQuery: () => HTMLElement
+  elementQuery: () => HTMLElement,
 ) => {
   describe.each(positionProps)(
     'when a prop is specified using the "%s" styled system props',
@@ -385,14 +391,14 @@ const testStyledSystemPosition = (
 
         assertStyleMatch({ [styledSystemProp]: value }, elementQuery());
       });
-    }
+    },
   );
 };
 
 // this util will catch that a console output occurred without polluting the output when running the unit tests
 const expectConsoleOutput = (
   message: string,
-  type: "warn" | "error" = "error"
+  type: "warn" | "error" = "error",
 ) => {
   if (!message) {
     throw new Error(`no ${type} message provided`);
@@ -431,7 +437,7 @@ const testStyledSystemMarginRTL = (
   component: (spacingProps?: MarginProps) => JSX.Element,
   elementQuery: () => HTMLElement,
   defaults?: MarginProps,
-  assertOpts?: jest.Options
+  assertOpts?: jest.Options,
 ) => {
   describe("default props", () => {
     let StyleElement: HTMLElement;
@@ -464,7 +470,7 @@ const testStyledSystemMarginRTL = (
             marginBottom,
           },
           StyleElement,
-          assertOpts
+          assertOpts,
         );
       } else {
         expect(StyleElement).not.toHaveStyleRule("marginLeft");
@@ -486,10 +492,10 @@ const testStyledSystemMarginRTL = (
         assertStyleMatch(
           { [propName]: "var(--spacing200)" },
           elementQuery(),
-          assertOpts
+          assertOpts,
         );
       });
-    }
+    },
   );
 };
 
@@ -497,7 +503,7 @@ const testStyledSystemPaddingRTL = (
   component: (spacingProps?: PaddingProps) => JSX.Element,
   elementQuery: () => HTMLElement,
   defaults?: PaddingProps,
-  assertOpts?: jest.Options
+  assertOpts?: jest.Options,
 ) => {
   describe("default props", () => {
     let StyleElement: HTMLElement;
@@ -530,7 +536,7 @@ const testStyledSystemPaddingRTL = (
             paddingBottom,
           },
           StyleElement,
-          assertOpts
+          assertOpts,
         );
       } else {
         expect(StyleElement).not.toHaveStyleRule("paddingLeft");
@@ -552,10 +558,10 @@ const testStyledSystemPaddingRTL = (
         assertStyleMatch(
           { [propName]: "var(--spacing200)" },
           elementQuery(),
-          assertOpts
+          assertOpts,
         );
       });
-    }
+    },
   );
 };
 
@@ -563,19 +569,19 @@ const testStyledSystemSpacingRTL = (
   component: (spacingProps?: MarginProps | PaddingProps) => JSX.Element,
   elementQuery: () => HTMLElement,
   defaults?: MarginProps | PaddingProps,
-  assertOpts?: jest.Options
+  assertOpts?: jest.Options,
 ) => {
   testStyledSystemMarginRTL(
     component,
     elementQuery,
     defaults as MarginProps,
-    assertOpts
+    assertOpts,
   );
   testStyledSystemPaddingRTL(
     component,
     elementQuery,
     defaults as PaddingProps,
-    assertOpts
+    assertOpts,
   );
 };
 
@@ -583,7 +589,7 @@ const testStyledSystemColor = (
   // https://stackoverflow.com/questions/53711454/styled-system-props-typing-with-typescript
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   component: (colorProperties?: any) => JSX.Element,
-  elementQuery: () => HTMLElement
+  elementQuery: () => HTMLElement,
 ) => {
   describe.each(colorProps)(
     'when a prop is specified using the "%s" styled system props',
@@ -595,13 +601,13 @@ const testStyledSystemColor = (
         // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
         expect(StyleElement).toHaveStyleRule(propName, value);
       });
-    }
+    },
   );
 };
 
 const testStyledSystemWidthRTL = (
   component: (widthProperties?: { width: string }) => JSX.Element,
-  elementQuery: () => HTMLElement
+  elementQuery: () => HTMLElement,
 ) => {
   describe("when a width prop is specified using styled system props", () => {
     it("should set the width styling correctly", () => {
@@ -616,7 +622,7 @@ const testStyledSystemWidthRTL = (
 
 const testStyledSystemHeightRTL = (
   component: (heightProperties?: { height: string }) => JSX.Element,
-  elementQuery: () => HTMLElement
+  elementQuery: () => HTMLElement,
 ) => {
   describe("when a height prop is specified using styled system props", () => {
     it("should set the height styling correctly", () => {
@@ -631,7 +637,7 @@ const testStyledSystemHeightRTL = (
 
 const testStyledSystemLayout = (
   component: (layoutProperties?: LayoutProps) => JSX.Element,
-  elementQuery: () => HTMLElement
+  elementQuery: () => HTMLElement,
 ) => {
   describe.each(layoutProps)(
     'when a prop is specified using the "%s" styled system props',
@@ -643,13 +649,13 @@ const testStyledSystemLayout = (
         // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
         expect(StyleElement).toHaveStyleRule(propName, value);
       });
-    }
+    },
   );
 };
 
 const testStyledSystemFlexBox = (
   component: (flexboxProperties?: FlexboxProps) => JSX.Element,
-  elementQuery: () => HTMLElement
+  elementQuery: () => HTMLElement,
 ) => {
   describe.each(flexBoxProps)(
     'when a prop is specified using the "%s" styled system props',
@@ -660,7 +666,7 @@ const testStyledSystemFlexBox = (
 
         assertStyleMatch({ [propName]: value }, elementQuery());
       });
-    }
+    },
   );
 };
 
diff --git a/src/__spec_helper__/mock-dom-rect.ts b/src/__spec_helper__/mock-dom-rect.ts
index d40c2c7f89..d8a114f85f 100644
--- a/src/__spec_helper__/mock-dom-rect.ts
+++ b/src/__spec_helper__/mock-dom-rect.ts
@@ -13,10 +13,10 @@ const getDOMRect = (width: number, height: number): DOMRect => ({
 const mockDOMRect = (
   width: number,
   height: number,
-  elementIdentifier: string
+  elementIdentifier: string,
 ) => {
   Element.prototype.getBoundingClientRect = jest.fn(function (
-    this: HTMLElement
+    this: HTMLElement,
   ) {
     if (this.getAttribute("data-component") === elementIdentifier) {
       return getDOMRect(width, height);
diff --git a/src/__spec_helper__/mock-match-media.ts b/src/__spec_helper__/mock-match-media.ts
index 4551d9aac3..2d780f07ae 100644
--- a/src/__spec_helper__/mock-match-media.ts
+++ b/src/__spec_helper__/mock-match-media.ts
@@ -24,7 +24,7 @@ export const setupMatchMediaMock = () => {
 export const mockMatchMedia = (matches: boolean) => {
   if (!mocked) {
     throw new Error(
-      "window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?"
+      "window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?",
     );
   }
   _matches = matches;
diff --git a/src/components/accordion/accordion-group/accordion-group.component.tsx b/src/components/accordion/accordion-group/accordion-group.component.tsx
index 7b37f3afd3..87a2418471 100644
--- a/src/components/accordion/accordion-group/accordion-group.component.tsx
+++ b/src/components/accordion/accordion-group/accordion-group.component.tsx
@@ -46,7 +46,7 @@ export const AccordionGroup = ({ children, ...rest }: AccordionGroupProps) => {
 
   invariant(
     hasProperChildren,
-    `AccordionGroup accepts only children of type \`${Accordion.displayName}\`.`
+    `AccordionGroup accepts only children of type \`${Accordion.displayName}\`.`,
   );
 
   const filteredChildren = useMemo(
@@ -56,15 +56,15 @@ export const AccordionGroup = ({ children, ...rest }: AccordionGroupProps) => {
       }) as React.FunctionComponentElement<
         AccordionProps & AccordionInternalProps
       >[],
-    [children]
+    [children],
   );
 
   const refs = useMemo<React.RefObject<HTMLDivElement>[]>(
     () =>
       filteredChildren.map(
-        (child) => child.ref || React.createRef<HTMLDivElement>()
+        (child) => child.ref || React.createRef<HTMLDivElement>(),
       ),
-    [filteredChildren]
+    [filteredChildren],
   );
 
   const focusAccordion = useCallback(
@@ -79,7 +79,7 @@ export const AccordionGroup = ({ children, ...rest }: AccordionGroupProps) => {
         refs[index].current?.focus();
       }
     },
-    [refs]
+    [refs],
   );
 
   const handleKeyboardAccessibility = useCallback(
@@ -97,7 +97,7 @@ export const AccordionGroup = ({ children, ...rest }: AccordionGroupProps) => {
         focusAccordion(ev, refs.length - 1);
       }
     },
-    [focusAccordion, refs]
+    [focusAccordion, refs],
   );
 
   return (
@@ -108,7 +108,7 @@ export const AccordionGroup = ({ children, ...rest }: AccordionGroupProps) => {
           ref: refs[index],
           index,
           handleKeyboardAccessibility,
-        })
+        }),
       )}
     </StyledAccordionGroup>
   );
diff --git a/src/components/accordion/accordion.component.tsx b/src/components/accordion/accordion.component.tsx
index 32a1c6ab44..da8a14bf4a 100644
--- a/src/components/accordion/accordion.component.tsx
+++ b/src/components/accordion/accordion.component.tsx
@@ -47,7 +47,7 @@ export interface AccordionProps
   /** Callback fired when expansion state changes */
   onChange?: (
     event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    isExpanded: boolean
+    isExpanded: boolean,
   ) => void;
   /** When the Accordion is open the title can change to this */
   openTitle?: string;
@@ -63,7 +63,7 @@ export interface AccordionInternalProps {
   /** @ignore @private */
   handleKeyboardAccessibility?: (
     ev: React.KeyboardEvent<HTMLElement>,
-    index?: number
+    index?: number,
   ) => void;
   /** @ignore @private */
   index?: number;
@@ -104,30 +104,30 @@ export const Accordion = React.forwardRef<
       variant = "standard",
       ...rest
     }: AccordionProps & AccordionInternalProps,
-    ref
+    ref,
   ) => {
     if (!deprecatedSchemeWarnTriggered && scheme === "transparent") {
       deprecatedSchemeWarnTriggered = true;
       Logger.deprecate(
-        "The `scheme` prop for `Accordion` component is deprecated and will soon be removed."
+        "The `scheme` prop for `Accordion` component is deprecated and will soon be removed.",
       );
     }
 
     if (!deprecatedButtonHeadingWarnTriggered && buttonHeading) {
       deprecatedButtonHeadingWarnTriggered = true;
       Logger.deprecate(
-        "The `buttonHeading` prop for `Accordion` component is deprecated and will soon be removed. Please use `subtle` variant instead."
+        "The `buttonHeading` prop for `Accordion` component is deprecated and will soon be removed. Please use `subtle` variant instead.",
       );
     }
 
     const isControlled = expanded !== undefined;
 
     const [isExpandedInternal, setIsExpandedInternal] = useState(
-      defaultExpanded || false
+      defaultExpanded || false,
     );
 
     const [contentHeight, setContentHeight] = useState<string | number>(
-      isExpandedInternal ? "auto" : 0
+      isExpandedInternal ? "auto" : 0,
     );
 
     const accordionContent = useRef<HTMLDivElement>(null);
@@ -149,7 +149,7 @@ export const Accordion = React.forwardRef<
         }
         if (onChange) onChange(ev, !isExpanded);
       },
-      [isControlled, isExpanded, onChange]
+      [isControlled, isExpanded, onChange],
     );
 
     const handleKeyDown = useCallback(
@@ -162,7 +162,7 @@ export const Accordion = React.forwardRef<
           toggleAccordion(ev);
         }
       },
-      [handleKeyboardAccessibility, index, toggleAccordion]
+      [handleKeyboardAccessibility, index, toggleAccordion],
     );
 
     const guid = useRef(createGuid());
@@ -275,7 +275,7 @@ export const Accordion = React.forwardRef<
         </StyledAccordionContentContainer>
       </StyledAccordionContainer>
     );
-  }
+  },
 );
 
 Accordion.displayName = "Accordion";
diff --git a/src/components/accordion/accordion.pw.tsx b/src/components/accordion/accordion.pw.tsx
index aead97d05b..31525eb7ba 100644
--- a/src/components/accordion/accordion.pw.tsx
+++ b/src/components/accordion/accordion.pw.tsx
@@ -54,11 +54,11 @@ test.describe("when focused", () => {
     await element.focus();
     await expect(elementLocator).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(elementLocator).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -75,7 +75,7 @@ test.describe("when focused", () => {
     await element.focus();
     await expect(elementLocator).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 });
@@ -91,13 +91,13 @@ test.describe("should render Accordion component", () => {
 
     await expect(accordionTitleContainer(page)).toHaveAttribute(
       "aria-expanded",
-      "true"
+      "true",
     );
     await expect(accordionTitleContainer(page)).toBeVisible();
 
     await expect(accordionContent(page)).toHaveAttribute(
       "data-element",
-      "accordion-content"
+      "accordion-content",
     );
     await expect(accordionContent(page)).toBeVisible();
   });
@@ -112,13 +112,13 @@ test.describe("should render Accordion component", () => {
 
     await expect(accordionTitleContainer(page)).toHaveAttribute(
       "aria-expanded",
-      "true"
+      "true",
     );
     await expect(accordionTitleContainer(page)).toBeVisible();
 
     await expect(accordionContent(page)).toHaveAttribute(
       "data-element",
-      "accordion-content"
+      "accordion-content",
     );
     await expect(accordionContent(page)).toBeVisible();
   });
@@ -136,7 +136,7 @@ test.describe("should render Accordion component", () => {
         const transformValue = await getStyle(accordionIcon(page), "transform");
         expect(getRotationAngle(transformValue)).toBe(0);
       });
-    }
+    },
   );
 
   (["chevron_down", "dropdown", "chevron_down_thick"] as const).forEach(
@@ -152,7 +152,7 @@ test.describe("should render Accordion component", () => {
         const transformValue = await getStyle(accordionIcon(page), "transform");
         expect(getRotationAngle(transformValue)).toBe(180);
       });
-    }
+    },
   );
 
   (["left", "right"] as const).forEach((iconAlign) => {
@@ -164,12 +164,12 @@ test.describe("should render Accordion component", () => {
 
       const headingContainerLocator = accordionTitleContainerByPosition(
         page,
-        positionOfElement("first")
+        positionOfElement("first"),
       );
 
       await expect(headingContainerLocator.first()).toHaveAttribute(
         "data-element",
-        "accordion-headings-container"
+        "accordion-headings-container",
       );
       await expect(headingContainerLocator.first()).toBeVisible();
 
@@ -177,24 +177,24 @@ test.describe("should render Accordion component", () => {
         // set by default
         await expect(accordionTitleContainer(page)).toHaveCSS(
           "justify-content",
-          "space-between"
+          "space-between",
         );
         await expect(accordionTitleContainer(page)).not.toHaveCSS(
           "flex-direction",
-          "row-reverse"
+          "row-reverse",
         );
         await expect(headingContainerLocator.first()).toHaveCSS(
           "margin-right",
-          "0px"
+          "0px",
         );
       } else {
         await expect(accordionTitleContainer(page)).toHaveCSS(
           "flex-direction",
-          "row-reverse"
+          "row-reverse",
         );
         await expect(headingContainerLocator.last()).toHaveCSS(
           "margin-right",
-          "16px"
+          "16px",
         );
       }
     });
@@ -210,13 +210,13 @@ test.describe("should render Accordion component", () => {
 
     await expect(accordionTitleContainer(page)).toHaveAttribute(
       "aria-expanded",
-      "true"
+      "true",
     );
     await expect(accordionTitleContainer(page)).toBeVisible();
 
     await expect(accordionContent(page)).toHaveAttribute(
       "data-element",
-      "accordion-content"
+      "accordion-content",
     );
     await expect(accordionContent(page)).toBeVisible();
   });
@@ -236,7 +236,7 @@ test.describe("should render Accordion component", () => {
             // @ts-ignore
             messages.push(data);
           }}
-        />
+        />,
       );
 
       await accordionTitleContainer(page).click();
@@ -267,10 +267,12 @@ test.describe("should render Accordion component", () => {
     });
   });
 
-  ([
-    [SIZE.SMALL, 24],
-    [SIZE.LARGE, 45],
-  ] as const).forEach(([size, height]) => {
+  (
+    [
+      [SIZE.SMALL, 24],
+      [SIZE.LARGE, 45],
+    ] as const
+  ).forEach(([size, height]) => {
     test(`should render Accordion component with ${size} as a size and has height property set to ${height}`, async ({
       mount,
       page,
@@ -283,10 +285,12 @@ test.describe("should render Accordion component", () => {
     });
   });
 
-  ([
-    ["full", "solid", "rgb(204, 214, 219)"],
-    ["none", "none", "rgba(0, 0, 0, 0.9)"],
-  ] as const).forEach(([borderProp, borderStyle, colour]) => {
+  (
+    [
+      ["full", "solid", "rgb(204, 214, 219)"],
+      ["none", "none", "rgba(0, 0, 0, 0.9)"],
+    ] as const
+  ).forEach(([borderProp, borderStyle, colour]) => {
     test(`should render Accordion component with border type '${borderProp}'`, async ({
       mount,
       page,
@@ -295,7 +299,7 @@ test.describe("should render Accordion component", () => {
 
       await expect(accordion(page)).toHaveCSS(
         "border-bottom-style",
-        borderStyle
+        borderStyle,
       );
       await expect(accordion(page)).toHaveCSS("border-bottom-color", colour);
     });
@@ -310,7 +314,7 @@ test.describe("should render Accordion component", () => {
 
       await expect(accordionTitleContainer(page)).toHaveAttribute(
         "aria-expanded",
-        String(state)
+        String(state),
       );
       await expect(accordionTitleContainer(page)).toBeVisible();
     });
@@ -325,16 +329,18 @@ test.describe("should render Accordion component", () => {
 
       await expect(accordionTitleContainer(page)).toHaveAttribute(
         "aria-expanded",
-        String(state)
+        String(state),
       );
       await expect(accordionTitleContainer(page)).toBeVisible();
     });
   });
 
-  ([
-    ["white", "rgb(255, 255, 255)"],
-    ["transparent", "rgba(0, 0, 0, 0)"],
-  ] as const).forEach(([scheme, colour]) => {
+  (
+    [
+      ["white", "rgb(255, 255, 255)"],
+      ["transparent", "rgba(0, 0, 0, 0)"],
+    ] as const
+  ).forEach(([scheme, colour]) => {
     test(`should check Accordion scheme is ${scheme}`, async ({
       mount,
       page,
@@ -355,7 +361,7 @@ test.describe("should render Accordion component", () => {
       await assertCssValueIsApproximately(
         accordion(page),
         "width",
-        parseInt(width)
+        parseInt(width),
       );
     });
   });
@@ -370,7 +376,7 @@ test.describe("should render Accordion component", () => {
 
     await expect(accordionIcon(page).nth(0)).toHaveAttribute(
       "data-element",
-      "error"
+      "error",
     );
     await expect(accordionIcon(page).nth(0)).toHaveAttribute("type", "error");
   });
@@ -385,7 +391,7 @@ test.describe("should render Accordion component", () => {
 
     await expect(accordionIcon(page).nth(0)).toHaveAttribute(
       "data-element",
-      "warning"
+      "warning",
     );
     await expect(accordionIcon(page).nth(0)).toHaveAttribute("type", "warning");
   });
@@ -400,7 +406,7 @@ test.describe("should render Accordion component", () => {
 
     await expect(accordionIcon(page).nth(0)).toHaveAttribute(
       "data-element",
-      "info"
+      "info",
     );
     await expect(accordionIcon(page).nth(0)).toHaveAttribute("type", "info");
   });
@@ -411,7 +417,7 @@ test.describe("should render Accordion component", () => {
       page,
     }) => {
       await mount(
-        <AccordionComponent title="Button" buttonHeading buttonWidth={width} />
+        <AccordionComponent title="Button" buttonHeading buttonWidth={width} />,
       );
 
       const cssWidth = await getStyle(accordionTitleContainer(page), "width");
@@ -424,7 +430,7 @@ test.describe("should render Accordion component", () => {
     page,
   }) => {
     await mount(
-      <AccordionComponent buttonHeading title="Closed" openTitle="Open" />
+      <AccordionComponent buttonHeading title="Closed" openTitle="Open" />,
     );
 
     await expect(accordionTitleContainer(page)).toContainText("Closed");
@@ -439,7 +445,11 @@ test.describe("should render Accordion component", () => {
     page,
   }) => {
     await mount(
-      <AccordionComponent title="subtle" variant="subtle" subTitle="subtitle" />
+      <AccordionComponent
+        title="subtle"
+        variant="subtle"
+        subTitle="subtitle"
+      />,
     );
 
     await expect(accordionTitleContainer(page)).toContainText("subtle");
@@ -478,21 +488,21 @@ test.describe("should render Accordion Grouped component", () => {
     await accordionTitleContainer(page).nth(0).focus();
     await expect(accordionTitleContainer(page).nth(0)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(accordionTitleContainer(page).nth(0)).toBeVisible();
 
     await accordionTitleContainer(page).nth(0).press("ArrowDown");
     await expect(accordionTitleContainer(page).nth(1)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(accordionTitleContainer(page).nth(1)).toBeVisible();
 
     await accordionTitleContainer(page).nth(1).press("ArrowDown");
     await expect(accordionTitleContainer(page).nth(2)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(accordionTitleContainer(page).nth(2)).toBeVisible();
   });
@@ -525,7 +535,7 @@ test.describe("should render Accordion Grouped component", () => {
 
     await expect(accordionTitleContainer(page).nth(2)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(accordionTitleContainer(page).nth(2)).toBeVisible();
   });
@@ -558,7 +568,7 @@ test.describe("should render Accordion Grouped component", () => {
 
     await expect(accordionTitleContainer(page).nth(0)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(accordionTitleContainer(page).nth(0)).toBeVisible();
   });
@@ -699,7 +709,7 @@ test.describe("Accessibility tests for Accordion", () => {
           headerSpacing={{
             p: padding,
           }}
-        />
+        />,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx
index 8c46e05d2b..fabba6728c 100644
--- a/src/components/accordion/accordion.stories.tsx
+++ b/src/components/accordion/accordion.stories.tsx
@@ -356,7 +356,7 @@ export const WithValidationIcon: Story = () => {
     id: Validations,
     type: ValidationObject,
     setter: React.Dispatch<React.SetStateAction<ValidationObject>>,
-    msg: string
+    msg: string,
   ) => {
     const update = type[id] ? undefined : msg;
     setter((previous) => ({ ...previous, [id]: update }));
diff --git a/src/components/accordion/accordion.test.tsx b/src/components/accordion/accordion.test.tsx
index de71a883fb..278bd34ae9 100644
--- a/src/components/accordion/accordion.test.tsx
+++ b/src/components/accordion/accordion.test.tsx
@@ -22,7 +22,7 @@ describe("Accordion", () => {
     render(<Accordion scheme="transparent" title="Title" />);
 
     expect(loggerSpy).toHaveBeenCalledWith(
-      "The `scheme` prop for `Accordion` component is deprecated and will soon be removed."
+      "The `scheme` prop for `Accordion` component is deprecated and will soon be removed.",
     );
     expect(loggerSpy).toHaveBeenCalledTimes(1);
 
@@ -37,7 +37,7 @@ describe("Accordion", () => {
     render(<Accordion buttonHeading title="Title" />);
 
     expect(loggerSpy).toHaveBeenCalledWith(
-      "The `buttonHeading` prop for `Accordion` component is deprecated and will soon be removed. Please use `subtle` variant instead."
+      "The `buttonHeading` prop for `Accordion` component is deprecated and will soon be removed. Please use `subtle` variant instead.",
     );
     expect(loggerSpy).toHaveBeenCalledTimes(1);
 
@@ -50,7 +50,7 @@ describe("Accordion", () => {
     expect(screen.getByText("Title content")).toBeVisible();
     expect(screen.getByText("Title content")).toHaveAttribute(
       "id",
-      "customTitle"
+      "customTitle",
     );
   });
 
@@ -58,7 +58,7 @@ describe("Accordion", () => {
     render(
       <Accordion expanded title="Title">
         child content
-      </Accordion>
+      </Accordion>,
     );
 
     expect(screen.getByText("child content")).toBeVisible();
@@ -68,7 +68,7 @@ describe("Accordion", () => {
     render(
       <Accordion expanded={false} title="Title">
         child content
-      </Accordion>
+      </Accordion>,
     );
 
     expect(screen.getByText("child content")).not.toBeVisible();
@@ -84,7 +84,7 @@ describe("Accordion", () => {
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith(
       expect.objectContaining({ target: header }),
-      true
+      true,
     );
   });
 
@@ -104,16 +104,16 @@ describe("Accordion", () => {
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(
         expect.objectContaining({ target: header }),
-        true
+        true,
       );
-    }
+    },
   );
 
   it("mounts expanded when `defaultExpanded` prop is passed as `true`", () => {
     render(
       <Accordion defaultExpanded title="Title">
         child content
-      </Accordion>
+      </Accordion>,
     );
 
     expect(screen.getByText("child content")).toBeVisible();
@@ -156,7 +156,7 @@ describe("Accordion", () => {
       header.focus();
       await user.keyboard(key);
       expect(screen.getByText("child content")).not.toBeVisible();
-    }
+    },
   );
 
   it("does not toggle the expansion state when keys other than enter or space are pressed when the header area is focused", async () => {
@@ -219,7 +219,7 @@ describe("Accordion", () => {
 
   it("should display the `openTitle` when open and the `openTitle` and `buttonHeading` props are provided", () => {
     render(
-      <Accordion title="Title" expanded buttonHeading openTitle="Less info" />
+      <Accordion title="Title" expanded buttonHeading openTitle="Less info" />,
     );
 
     expect(screen.getByRole("button")).toHaveTextContent("Less info");
@@ -237,7 +237,7 @@ describe("Accordion", () => {
 
     expect(screen.getByTestId("accordion-container")).toHaveStyleRule(
       "border",
-      "none"
+      "none",
     );
   });
 
@@ -257,7 +257,7 @@ describe("Accordion", () => {
     expect(screen.getByRole("button")).toHaveStyleRule(
       "margin-left",
       "var(--spacing100)",
-      { modifier: `${StyledAccordionHeadingsContainer}` }
+      { modifier: `${StyledAccordionHeadingsContainer}` },
     );
     expect(screen.getByTestId("icon")).toHaveStyle({
       position: "relative",
@@ -278,19 +278,19 @@ describe("Accordion", () => {
 
     expect(screen.getByRole("button")).toHaveStyleRule(
       "margin-bottom",
-      "var(--spacing200)"
+      "var(--spacing200)",
     );
     expect(screen.getByTestId("accordion-content")).toHaveStyleRule(
       "margin-left",
-      "var(--spacing150)"
+      "var(--spacing150)",
     );
     expect(screen.getByTestId("accordion-content")).toHaveStyleRule(
       "padding",
-      "var(--spacing100) var(--spacing200) var(--spacing300)"
+      "var(--spacing100) var(--spacing200) var(--spacing300)",
     );
     expect(screen.getByTestId("accordion-content")).toHaveStyleRule(
       "border-left",
-      "2px solid var(--colorsUtilityMajor100)"
+      "2px solid var(--colorsUtilityMajor100)",
     );
   });
 
@@ -338,7 +338,7 @@ describe("AccordionGroup", () => {
         </Accordion>
       </AccordionGroup>
     ),
-    () => screen.getByTestId("accordion-group")
+    () => screen.getByTestId("accordion-group"),
   );
 
   it("renders with expected `data-` attributes on the root element", () => {
@@ -346,14 +346,14 @@ describe("AccordionGroup", () => {
       <AccordionGroup
         data-element="accordion-group-element"
         data-role="accordion-group-role"
-      />
+      />,
     );
     const rootElement = screen.getByTestId("accordion-group-role");
 
     expect(rootElement).toHaveAttribute("data-component", "accordion-group");
     expect(rootElement).toHaveAttribute(
       "data-element",
-      "accordion-group-element"
+      "accordion-group-element",
     );
   });
 
@@ -364,7 +364,7 @@ describe("AccordionGroup", () => {
         <Accordion title="Title 1" />
         <Accordion title="Title 2" />
         <Accordion title="Title 3" />
-      </AccordionGroup>
+      </AccordionGroup>,
     );
 
     screen.getByRole("button", { name: "Title 2" }).focus();
@@ -379,7 +379,7 @@ describe("AccordionGroup", () => {
         <Accordion title="Title 1" />
         <Accordion title="Title 2" />
         <Accordion title="Title 3" />
-      </AccordionGroup>
+      </AccordionGroup>,
     );
 
     screen.getByRole("button", { name: "Title 3" }).focus();
@@ -394,7 +394,7 @@ describe("AccordionGroup", () => {
         <Accordion title="Title 1" />
         <Accordion title="Title 2" />
         <Accordion title="Title 3" />
-      </AccordionGroup>
+      </AccordionGroup>,
     );
 
     screen.getByRole("button", { name: "Title 2" }).focus();
@@ -409,7 +409,7 @@ describe("AccordionGroup", () => {
         <Accordion title="Title 1" />
         <Accordion title="Title 2" />
         <Accordion title="Title 3" />
-      </AccordionGroup>
+      </AccordionGroup>,
     );
 
     screen.getByRole("button", { name: "Title 1" }).focus();
@@ -430,13 +430,13 @@ describe("AccordionGroup", () => {
           <Accordion title="Title 1" />
           <Accordion title="Title 2" />
           <Accordion title="Title 3" />
-        </AccordionGroup>
+        </AccordionGroup>,
       );
 
       screen.getByRole("button", { name: `Title ${accordionNumber}` }).focus();
       await user.keyboard("{Home}");
       expect(screen.getByRole("button", { name: "Title 1" })).toHaveFocus();
-    }
+    },
   );
 
   it.each([
@@ -452,13 +452,13 @@ describe("AccordionGroup", () => {
           <Accordion title="Title 1" />
           <Accordion title="Title 2" />
           <Accordion title="Title 3" />
-        </AccordionGroup>
+        </AccordionGroup>,
       );
 
       screen.getByRole("button", { name: `Title ${accordionNumber}` }).focus();
       await user.keyboard("{End}");
       expect(screen.getByRole("button", { name: "Title 3" })).toHaveFocus();
-    }
+    },
   );
 
   it("throws an error if incorrect children are passed", () => {
@@ -472,7 +472,7 @@ describe("AccordionGroup", () => {
         <AccordionGroup>
           <div />
           <div />
-        </AccordionGroup>
+        </AccordionGroup>,
       );
     }).toThrow("AccordionGroup accepts only children of type `Accordion`.");
 
@@ -486,7 +486,7 @@ describe("AccordionGroup", () => {
           {null}
           {false}
           {undefined}
-        </AccordionGroup>
+        </AccordionGroup>,
       );
     }).not.toThrow();
   });
diff --git a/src/components/accordion/components.test-pw.tsx b/src/components/accordion/components.test-pw.tsx
index 8d684227ed..e05b897e73 100644
--- a/src/components/accordion/components.test-pw.tsx
+++ b/src/components/accordion/components.test-pw.tsx
@@ -383,7 +383,7 @@ export const AccordionGroupValidation = () => {
     id: Validations,
     type: ValidationObject,
     setter: React.Dispatch<React.SetStateAction<ValidationObject>>,
-    msg: string
+    msg: string,
   ) => {
     const update = type[id] ? undefined : msg;
     setter((previous: ValidationObject) => ({ ...previous, [id]: update }));
diff --git a/src/components/action-popover/__internal__/action-popover-utils.tsx b/src/components/action-popover/__internal__/action-popover-utils.tsx
index ed524cbd0d..2bdcc46cfd 100644
--- a/src/components/action-popover/__internal__/action-popover-utils.tsx
+++ b/src/components/action-popover/__internal__/action-popover-utils.tsx
@@ -5,10 +5,10 @@ import { ActionPopoverItem } from "../action-popover-item/action-popover-item.co
 type ReactItem = React.ReactChild | React.ReactFragment | React.ReactPortal;
 
 export const getItems = (
-  children: React.ReactNode | React.ReactNode[]
+  children: React.ReactNode | React.ReactNode[],
 ): ReactItem[] =>
   React.Children.toArray(children).filter(
-    (child) => React.isValidElement(child) && child.type === ActionPopoverItem
+    (child) => React.isValidElement(child) && child.type === ActionPopoverItem,
   );
 
 export const isItemDisabled = (item: ReactItem) =>
diff --git a/src/components/action-popover/__internal__/action-popover.context.ts b/src/components/action-popover/__internal__/action-popover.context.ts
index f1041d9afa..7b7099181b 100644
--- a/src/components/action-popover/__internal__/action-popover.context.ts
+++ b/src/components/action-popover/__internal__/action-popover.context.ts
@@ -9,8 +9,7 @@ type ActionPopoverContextType = {
   isOpenPopover: boolean;
 };
 
-const ActionPopoverContext = React.createContext<ActionPopoverContextType | null>(
-  null
-);
+const ActionPopoverContext =
+  React.createContext<ActionPopoverContextType | null>(null);
 
 export default ActionPopoverContext;
diff --git a/src/components/action-popover/action-popover-item/action-popover-item.component.tsx b/src/components/action-popover/action-popover-item/action-popover-item.component.tsx
index 05276f426c..fe0e2431b5 100644
--- a/src/components/action-popover/action-popover-item/action-popover-item.component.tsx
+++ b/src/components/action-popover/action-popover-item/action-popover-item.component.tsx
@@ -41,7 +41,7 @@ export interface ActionPopoverItemProps {
   onClick?: (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** Submenu component for item */
   submenu?: React.ReactNode;
@@ -84,7 +84,7 @@ function calculateSubmenuPosition(
   ref: React.RefObject<HTMLElement>,
   submenuRef: React.RefObject<HTMLElement>,
   submenuPosition: Alignment,
-  currentSubmenuPosition?: Alignment
+  currentSubmenuPosition?: Alignment,
 ) {
   /* istanbul ignore if */
 
@@ -125,20 +125,16 @@ export const ActionPopoverItem = ({
 
   invariant(
     context,
-    "ActionPopoverItem must be used within an ActionPopover component"
+    "ActionPopoverItem must be used within an ActionPopover component",
   );
 
   invariant(
     React.isValidElement(submenu) ? submenu.type === ActionPopoverMenu : true,
-    "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`"
+    "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`",
   );
 
-  const {
-    setOpenPopover,
-    isOpenPopover,
-    focusButton,
-    submenuPosition,
-  } = context;
+  const { setOpenPopover, isOpenPopover, focusButton, submenuPosition } =
+    context;
   const isHref = !!href;
   const [containerPosition, setContainerPosition] = useState<
     ContainerPosition | undefined
@@ -173,7 +169,7 @@ export const ActionPopoverItem = ({
       ref,
       submenuRef,
       submenuPosition,
-      currentSubmenuPosition
+      currentSubmenuPosition,
     );
 
     setCurrentSubmenuPosition?.(checkCalculatedSubmenuPosition);
@@ -246,7 +242,7 @@ export const ActionPopoverItem = ({
     (
       e:
         | React.MouseEvent<HTMLButtonElement>
-        | React.KeyboardEvent<HTMLButtonElement>
+        | React.KeyboardEvent<HTMLButtonElement>,
     ) => {
       e.stopPropagation();
       if (!disabled) {
@@ -260,7 +256,7 @@ export const ActionPopoverItem = ({
         e.preventDefault();
       }
     },
-    [disabled, focusButton, onClickProp, setOpenPopover]
+    [disabled, focusButton, onClickProp, setOpenPopover],
   );
 
   const onKeyDown = useCallback(
@@ -307,7 +303,7 @@ export const ActionPopoverItem = ({
         e.stopPropagation();
       }
     },
-    [disabled, download, isHref, onClick, submenu, currentSubmenuPosition]
+    [disabled, download, isHref, onClick, submenu, currentSubmenuPosition],
   );
 
   const itemSubmenuProps = {
@@ -379,7 +375,7 @@ export const ActionPopoverItem = ({
           hasSubmenu={!!submenu}
           childHasSubmenu={childHasSubmenu}
           {...(disabled && { "aria-disabled": true })}
-          {...(isHref && { as: ("a" as unknown) as undefined, download, href })}
+          {...(isHref && { as: "a" as unknown as undefined, download, href })}
           {...(submenu && itemSubmenuProps)}
         >
           {submenu && checkRef(ref) && currentSubmenuPosition === "left" ? (
@@ -426,7 +422,7 @@ export const ActionPopoverItem = ({
                 focusIndex,
                 isASubmenu: true,
                 horizontalAlignment,
-              }
+              },
             )
           : null}
       </div>
diff --git a/src/components/action-popover/action-popover-menu/action-popover-menu.component.tsx b/src/components/action-popover/action-popover-menu/action-popover-menu.component.tsx
index cf6a914483..6024c837b2 100644
--- a/src/components/action-popover/action-popover-menu/action-popover-menu.component.tsx
+++ b/src/components/action-popover/action-popover-menu/action-popover-menu.component.tsx
@@ -81,18 +81,18 @@ const ActionPopoverMenu = React.forwardRef<
       isASubmenu,
       ...rest
     }: ActionPopoverMenuBaseProps,
-    ref
+    ref,
   ) => {
     const context = useContext(ActionPopoverContext);
     invariant(
       context,
-      "ActionPopoverMenu must be used within an ActionPopover component"
+      "ActionPopoverMenu must be used within an ActionPopover component",
     );
     const { focusButton, submenuPosition } = context;
 
     invariant(
       setOpen && setFocusIndex && typeof focusIndex !== "undefined",
-      "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component"
+      "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component",
     );
 
     const hasProperChildren = useMemo(() => {
@@ -108,7 +108,7 @@ const ActionPopoverMenu = React.forwardRef<
             (child.type as React.FunctionComponent).displayName !==
               ActionPopoverDivider.displayName
           );
-        }
+        },
       );
 
       return !incorrectChild;
@@ -117,14 +117,14 @@ const ActionPopoverMenu = React.forwardRef<
     invariant(
       hasProperChildren,
       `ActionPopoverMenu only accepts children of type \`${ActionPopoverItem.displayName}\`` +
-        ` and \`${ActionPopoverDivider.displayName}\`.`
+        ` and \`${ActionPopoverDivider.displayName}\`.`,
     );
 
     const items = useMemo(() => getItems(children), [children]);
 
     const checkItemDisabled = useCallback(
       (value) => isItemDisabled(items[value]),
-      [items]
+      [items],
     );
 
     const firstFocusableItem = findFirstFocusableItem(items);
@@ -215,15 +215,13 @@ const ActionPopoverMenu = React.forwardRef<
         setFocusIndex,
         firstFocusableItem,
         lastFocusableItem,
-      ]
+      ],
     );
 
     const [childHasSubmenu, setChildHasSubmenu] = useState(false);
     const [childHasIcon, setChildHasIcon] = useState(false);
-    const [
-      currentSubmenuPosition,
-      setCurrentSubmenuPosition,
-    ] = useState<Alignment>(submenuPosition);
+    const [currentSubmenuPosition, setCurrentSubmenuPosition] =
+      useState<Alignment>(submenuPosition);
 
     const clonedChildren = useMemo(() => {
       let index = 0;
@@ -243,7 +241,7 @@ const ActionPopoverMenu = React.forwardRef<
               currentSubmenuPosition,
               setCurrentSubmenuPosition,
               isASubmenu,
-            }
+            },
           );
         }
 
@@ -275,7 +273,7 @@ const ActionPopoverMenu = React.forwardRef<
         {clonedChildren}
       </Menu>
     );
-  }
+  },
 );
 
 ActionPopoverMenu.displayName = "ActionPopoverMenu";
diff --git a/src/components/action-popover/action-popover-test.stories.tsx b/src/components/action-popover/action-popover-test.stories.tsx
index 24524d6f4c..40c6653e19 100644
--- a/src/components/action-popover/action-popover-test.stories.tsx
+++ b/src/components/action-popover/action-popover-test.stories.tsx
@@ -602,7 +602,7 @@ export const ActionPopoverMenuWithProps = ({ ...props }) => {
 };
 
 export const ActionPopoverPropsComponent = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -613,7 +613,7 @@ export const ActionPopoverPropsComponent = (
 };
 
 export const ActionPopoverPropsComponentWithFirstAndLastDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -629,7 +629,7 @@ export const ActionPopoverPropsComponentWithFirstAndLastDisabled = (
 };
 
 export const ActionPopoverPropsComponentWithOnlyFirstAndLastNotDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -645,7 +645,7 @@ export const ActionPopoverPropsComponentWithOnlyFirstAndLastNotDisabled = (
 };
 
 export const ActionPopoverPropsComponentWithOnlyFirstDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -661,7 +661,7 @@ export const ActionPopoverPropsComponentWithOnlyFirstDisabled = (
 };
 
 export const ActionPopoverPropsComponentWithOnlyLastDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -677,7 +677,7 @@ export const ActionPopoverPropsComponentWithOnlyLastDisabled = (
 };
 
 export const ActionPopoverPropsComponentWithSomeDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -693,7 +693,7 @@ export const ActionPopoverPropsComponentWithSomeDisabled = (
 };
 
 export const ActionPopoverPropsComponentAllDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
diff --git a/src/components/action-popover/action-popover.component.tsx b/src/components/action-popover/action-popover.component.tsx
index 0ecd2dec76..d427fe2461 100644
--- a/src/components/action-popover/action-popover.component.tsx
+++ b/src/components/action-popover/action-popover.component.tsx
@@ -98,7 +98,7 @@ export const ActionPopover = ({
           child.type !== ActionPopoverItem &&
           child.type !== ActionPopoverDivider
         );
-      }
+      },
     );
 
     return !incorrectChild;
@@ -113,7 +113,7 @@ export const ActionPopover = ({
   invariant(
     hasProperChildren,
     `ActionPopover only accepts children of type \`${ActionPopoverItem.displayName}\`` +
-      ` and \`${ActionPopoverDivider.displayName}\`.`
+      ` and \`${ActionPopoverDivider.displayName}\`.`,
   );
 
   const mappedPlacement = useMemo(() => {
@@ -142,12 +142,12 @@ export const ActionPopover = ({
       }
       setOpenState(value);
     },
-    [isOpen, onOpen, onClose]
+    [isOpen, onOpen, onClose],
   );
 
   const focusButton = useCallback(() => {
     const button = buttonRef.current?.querySelector<HTMLElement>(
-      "[data-element='action-popover-button']"
+      "[data-element='action-popover-button']",
     );
 
     button?.focus();
@@ -164,7 +164,7 @@ export const ActionPopover = ({
         focusButton();
       }
     },
-    [isOpen, firstFocusableItem, setOpen, focusButton]
+    [isOpen, firstFocusableItem, setOpen, focusButton],
   );
 
   // Keyboard commands implemented as recommended by WAI-ARIA best practices
@@ -184,7 +184,7 @@ export const ActionPopover = ({
         setOpen(true);
       }
     },
-    [firstFocusableItem, lastFocusableItem, setOpen]
+    [firstFocusableItem, lastFocusableItem, setOpen],
   );
 
   const handleEscapeKey = useCallback(
@@ -195,7 +195,7 @@ export const ActionPopover = ({
         focusButton();
       }
     },
-    [setOpen, focusButton]
+    [setOpen, focusButton],
   );
 
   useModalManager({
diff --git a/src/components/action-popover/action-popover.pw.tsx b/src/components/action-popover/action-popover.pw.tsx
index 0107a8093f..d285ed52ee 100644
--- a/src/components/action-popover/action-popover.pw.tsx
+++ b/src/components/action-popover/action-popover.pw.tsx
@@ -80,13 +80,15 @@ test.describe("check functionality for ActionPopover component", () => {
     await expect(actionPopoverElement).toBeVisible();
   });
 
-  ([
-    [0, "Email Invoice"],
-    [1, "Print Invoice"],
-    [2, "Download PDF"],
-    [3, "Download CSV"],
-    [4, "Delete"],
-  ] as [number, string][]).forEach(([times, elementText]) => {
+  (
+    [
+      [0, "Email Invoice"],
+      [1, "Print Invoice"],
+      [2, "Download PDF"],
+      [3, "Download CSV"],
+      [4, "Delete"],
+    ] as [number, string][]
+  ).forEach(([times, elementText]) => {
     // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
     test.skip(`should be able to press downarrow ${times} times and get button ${elementText} focused`, async ({
       mount,
@@ -126,9 +128,8 @@ test.describe("check functionality for ActionPopover component", () => {
       page,
     }) => {
       await mount(<ActionPopoverCustom />);
-      const actionPopoverButtonElement = await actionPopoverButton(
-        page
-      ).first();
+      const actionPopoverButtonElement =
+        await actionPopoverButton(page).first();
       await actionPopoverButtonElement.press(key);
       const focusedElement = await page.locator("*:focus");
       await expect(focusedElement).toContainText("Email Invoice");
@@ -318,13 +319,15 @@ test.describe("check functionality for ActionPopover component", () => {
     await expect(actionPopoverElement).not.toBeVisible();
   });
 
-  ([
-    ["d", "Download PDF", 1],
-    ["d", "Download CSV", 2],
-    ["d", "Delete", 3],
-    ["e", "Email Invoice", 1],
-    ["p", "Print Invoice", 1],
-  ] as [string, string, number][]).forEach(([key, innerText, times]) => {
+  (
+    [
+      ["d", "Download PDF", 1],
+      ["d", "Download CSV", 2],
+      ["d", "Delete", 3],
+      ["e", "Email Invoice", 1],
+      ["p", "Print Invoice", 1],
+    ] as [string, string, number][]
+  ).forEach(([key, innerText, times]) => {
     // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
     test.skip(`should focus ${innerText} element using ${key} keyboard key`, async ({
       mount,
@@ -344,61 +347,58 @@ test.describe("check functionality for ActionPopover component", () => {
     });
   });
 
-  ([
-    [subMenuOption[0], 0],
-    [subMenuOption[1], 1],
-  ] as [typeof subMenuOption[number], number][]).forEach(
-    ([innerText, times]) => {
-      // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
-      test.skip(`should focus ${innerText} element`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<ActionPopoverCustom />);
-        const actionPopoverButtonElementEq0 = await actionPopoverButton(
-          page
-        ).nth(0);
-        await actionPopoverButtonElementEq0.click();
-        for (let i = 0; i < 2; i++) {
-          const focusedElement = await page.locator("*:focus");
-          await focusedElement.press("ArrowDown");
-        }
+  (
+    [
+      [subMenuOption[0], 0],
+      [subMenuOption[1], 1],
+    ] as [(typeof subMenuOption)[number], number][]
+  ).forEach(([innerText, times]) => {
+    // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
+    test.skip(`should focus ${innerText} element`, async ({ mount, page }) => {
+      await mount(<ActionPopoverCustom />);
+      const actionPopoverButtonElementEq0 =
+        await actionPopoverButton(page).nth(0);
+      await actionPopoverButtonElementEq0.click();
+      for (let i = 0; i < 2; i++) {
         const focusedElement = await page.locator("*:focus");
-        await focusedElement.press("ArrowLeft");
-        for (let i = 0; i < times; i++) {
-          await focusedElement.press("ArrowDown");
-        }
-        await expect(focusedElement).toContainText(innerText);
-      });
-    }
-  );
-
-  ([[subMenuOption[2], 2]] as [typeof subMenuOption[number], number][]).forEach(
-    ([innerText, times]) => {
-      test(`should not focus ${innerText} element`, async ({ mount, page }) => {
-        await mount(<ActionPopoverCustom />);
-        const actionPopoverButtonElementEq0 = await actionPopoverButton(
-          page
-        ).nth(0);
-        await actionPopoverButtonElementEq0.click();
-        for (let i = 0; i < 2; i++) {
-          const focusedElement = await page.locator("*:focus");
-          await focusedElement.press("ArrowDown");
-        }
+        await focusedElement.press("ArrowDown");
+      }
+      const focusedElement = await page.locator("*:focus");
+      await focusedElement.press("ArrowLeft");
+      for (let i = 0; i < times; i++) {
+        await focusedElement.press("ArrowDown");
+      }
+      await expect(focusedElement).toContainText(innerText);
+    });
+  });
+
+  (
+    [[subMenuOption[2], 2]] as [(typeof subMenuOption)[number], number][]
+  ).forEach(([innerText, times]) => {
+    test(`should not focus ${innerText} element`, async ({ mount, page }) => {
+      await mount(<ActionPopoverCustom />);
+      const actionPopoverButtonElementEq0 =
+        await actionPopoverButton(page).nth(0);
+      await actionPopoverButtonElementEq0.click();
+      for (let i = 0; i < 2; i++) {
         const focusedElement = await page.locator("*:focus");
-        await focusedElement.press("ArrowLeft");
-        for (let i = 0; i < times; i++) {
-          await focusedElement.press("ArrowDown");
-        }
-        await expect(focusedElement).not.toContainText(innerText);
-      });
-    }
-  );
+        await focusedElement.press("ArrowDown");
+      }
+      const focusedElement = await page.locator("*:focus");
+      await focusedElement.press("ArrowLeft");
+      for (let i = 0; i < times; i++) {
+        await focusedElement.press("ArrowDown");
+      }
+      await expect(focusedElement).not.toContainText(innerText);
+    });
+  });
 
-  ([
-    [subMenuOption[0], 0],
-    [subMenuOption[1], 1],
-  ] as [typeof subMenuOption[number], number][]).forEach(([name, position]) => {
+  (
+    [
+      [subMenuOption[0], 0],
+      [subMenuOption[1], 1],
+    ] as [(typeof subMenuOption)[number], number][]
+  ).forEach(([name, position]) => {
     test(`should close ${name} and ActionPopover after press Enter keyboard key`, async ({
       mount,
       page,
@@ -413,7 +413,7 @@ test.describe("check functionality for ActionPopover component", () => {
       const focusedElement = await page.locator("*:focus");
       await focusedElement.press("ArrowLeft");
       const submenuItem = await getDataElementByValue(page, "submenu1").nth(
-        position
+        position,
       );
       await submenuItem.press("Enter");
       const actionPopoverElement = await actionPopover(page).first();
@@ -421,65 +421,61 @@ test.describe("check functionality for ActionPopover component", () => {
     });
   });
 
-  ([
-    [subMenuOption[0], false],
-    [subMenuOption[1], true],
-  ] as [typeof subMenuOption[number], boolean][]).forEach(
-    ([name, shouldPressDownArrow]) => {
-      test(`should close ${name} after press ArrowRight keyboard key`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<ActionPopoverCustom />);
-        const actionPopoverButtonElement = await actionPopoverButton(page).nth(
-          0
-        );
-        await actionPopoverButtonElement.click();
-        for (let i = 0; i < 2; i++) {
-          const focusedElement = await page.locator("*:focus");
-          await focusedElement.press("ArrowDown");
-        }
+  (
+    [
+      [subMenuOption[0], false],
+      [subMenuOption[1], true],
+    ] as [(typeof subMenuOption)[number], boolean][]
+  ).forEach(([name, shouldPressDownArrow]) => {
+    test(`should close ${name} after press ArrowRight keyboard key`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ActionPopoverCustom />);
+      const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
+      await actionPopoverButtonElement.click();
+      for (let i = 0; i < 2; i++) {
         const focusedElement = await page.locator("*:focus");
-        await focusedElement.press("ArrowLeft");
-        if (shouldPressDownArrow) {
-          await focusedElement.press("ArrowDown");
-        }
-        await focusedElement.press("ArrowRight");
-        const submenu = await actionPopoverSubmenuByIndex(page, 1);
-        await expect(submenu).not.toBeVisible();
-      });
-    }
-  );
-
-  ([
-    [subMenuOption[0], false],
-    [subMenuOption[1], true],
-  ] as [typeof subMenuOption[number], boolean][]).forEach(
-    ([name, shouldPressDownArrow]) => {
-      test(`should close ${name} and ActionPopover after press Esc keyboard key`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<ActionPopoverCustom />);
-        const actionPopoverButtonElement = await actionPopoverButton(page).nth(
-          0
-        );
-        await actionPopoverButtonElement.click();
-        for (let i = 0; i < 2; i++) {
-          const focusedElement = await page.locator("*:focus");
-          await focusedElement.press("ArrowDown");
-        }
+        await focusedElement.press("ArrowDown");
+      }
+      const focusedElement = await page.locator("*:focus");
+      await focusedElement.press("ArrowLeft");
+      if (shouldPressDownArrow) {
+        await focusedElement.press("ArrowDown");
+      }
+      await focusedElement.press("ArrowRight");
+      const submenu = await actionPopoverSubmenuByIndex(page, 1);
+      await expect(submenu).not.toBeVisible();
+    });
+  });
+
+  (
+    [
+      [subMenuOption[0], false],
+      [subMenuOption[1], true],
+    ] as [(typeof subMenuOption)[number], boolean][]
+  ).forEach(([name, shouldPressDownArrow]) => {
+    test(`should close ${name} and ActionPopover after press Esc keyboard key`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ActionPopoverCustom />);
+      const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
+      await actionPopoverButtonElement.click();
+      for (let i = 0; i < 2; i++) {
         const focusedElement = await page.locator("*:focus");
-        await focusedElement.press("ArrowLeft");
-        if (shouldPressDownArrow) {
-          await focusedElement.press("ArrowDown");
-        }
-        await focusedElement.press("Escape");
-        const actionPopoverElement = await actionPopover(page).first();
-        await expect(actionPopoverElement).not.toBeVisible();
-      });
-    }
-  );
+        await focusedElement.press("ArrowDown");
+      }
+      const focusedElement = await page.locator("*:focus");
+      await focusedElement.press("ArrowLeft");
+      if (shouldPressDownArrow) {
+        await focusedElement.press("ArrowDown");
+      }
+      await focusedElement.press("Escape");
+      const actionPopoverElement = await actionPopover(page).first();
+      await expect(actionPopoverElement).not.toBeVisible();
+    });
+  });
 
   [[subMenuOption[0]], [subMenuOption[1]]].forEach(([name]) => {
     test(`should close ${name} and ActionPopover after clicking on the submenu`, async ({
@@ -511,7 +507,7 @@ test.describe("check functionality for ActionPopover component", () => {
     await mount(
       <Accordion title="Heading">
         <ActionPopoverCustom />
-      </Accordion>
+      </Accordion>,
     );
     const accordionDefaultTitleElement = await accordionDefaultTitle(page);
     await accordionDefaultTitleElement.press("Enter");
@@ -545,7 +541,7 @@ test.describe("check functionality for ActionPopover component", () => {
     await download.saveAs(file);
     await page.goto(`file:///${file}`);
     await expect(page.locator("body")).toHaveText(
-      "This is some example text in a file to test downloading functionality."
+      "This is some example text in a file to test downloading functionality.",
     );
   });
 
@@ -560,7 +556,7 @@ test.describe("check functionality for ActionPopover component", () => {
     await mount(
       <Accordion mt="150px" title="Heading">
         <ActionPopoverCustom />
-      </Accordion>
+      </Accordion>,
     );
     const accordionDefaultTitleElement = await accordionDefaultTitle(page);
     await accordionDefaultTitleElement.press("Enter");
@@ -570,21 +566,23 @@ test.describe("check functionality for ActionPopover component", () => {
     const actionPopoverElement = await actionPopover(page).first();
     await expect(actionPopoverElement).toHaveAttribute(
       "data-floating-placement",
-      "bottom-end"
+      "bottom-end",
     );
     await expect(actionPopoverElement).toBeVisible();
     await page.evaluate(() => window.scrollTo(0, 0));
     await expect(actionPopoverElement).toHaveAttribute(
       "data-floating-placement",
-      "top-end"
+      "top-end",
     );
     await expect(actionPopoverElement).toBeVisible();
   });
 
-  ([
-    [0, "with"],
-    [1, "without"],
-  ] as [number, string][]).forEach(([index, submenuState]) => {
+  (
+    [
+      [0, "with"],
+      [1, "without"],
+    ] as [number, string][]
+  ).forEach(([index, submenuState]) => {
     test(`should have correct hover state of menu item ${submenuState} submenu in ActionPopoverMenu`, async ({
       mount,
       page,
@@ -596,18 +594,20 @@ test.describe("check functionality for ActionPopover component", () => {
       await submenuItem.hover();
       await expect(submenuItem).toHaveCSS(
         "background-color",
-        "rgb(204, 214, 219)"
+        "rgb(204, 214, 219)",
       );
     });
   });
 
-  ([
-    [0, "Item 2"],
-    [1, "Item 3"],
-    [2, "Item 4"],
-    [3, "Item 5"],
-    [4, "Item 6"],
-  ] as [number, string][]).forEach(([times, elementText]) => {
+  (
+    [
+      [0, "Item 2"],
+      [1, "Item 3"],
+      [2, "Item 4"],
+      [3, "Item 5"],
+      [4, "Item 6"],
+    ] as [number, string][]
+  ).forEach(([times, elementText]) => {
     test(`should be able to press downarrow ${times} times and get button ${elementText} focused when first and last items are disabled`, async ({
       mount,
       page,
@@ -625,13 +625,15 @@ test.describe("check functionality for ActionPopover component", () => {
     });
   });
 
-  ([
-    [0, "Item 2"],
-    [1, "Item 6"],
-    [2, "Item 5"],
-    [3, "Item 4"],
-    [4, "Item 3"],
-  ] as [number, string][]).forEach(([times, elementText]) => {
+  (
+    [
+      [0, "Item 2"],
+      [1, "Item 6"],
+      [2, "Item 5"],
+      [3, "Item 4"],
+      [4, "Item 3"],
+    ] as [number, string][]
+  ).forEach(([times, elementText]) => {
     test(`should be able to press up ${times} times and get button ${elementText} focused when first and last items are disabled`, async ({
       mount,
       page,
@@ -649,16 +651,18 @@ test.describe("check functionality for ActionPopover component", () => {
     });
   });
 
-  ([
-    [0, "Item 1"],
-    [1, "Item 7"],
-  ] as [number, string][]).forEach(([times, elementText]) => {
+  (
+    [
+      [0, "Item 1"],
+      [1, "Item 7"],
+    ] as [number, string][]
+  ).forEach(([times, elementText]) => {
     test(`should be able to press downarrow ${times} times and get button ${elementText} focused when only the first and last items are not disabled`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <ActionPopoverPropsComponentWithOnlyFirstAndLastNotDisabled />
+        <ActionPopoverPropsComponentWithOnlyFirstAndLastNotDisabled />,
       );
 
       const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
@@ -672,16 +676,18 @@ test.describe("check functionality for ActionPopover component", () => {
     });
   });
 
-  ([
-    [0, "Item 1"],
-    [1, "Item 7"],
-  ] as [number, string][]).forEach(([times, elementText]) => {
+  (
+    [
+      [0, "Item 1"],
+      [1, "Item 7"],
+    ] as [number, string][]
+  ).forEach(([times, elementText]) => {
     test(`should be able to press up ${times} times and get button ${elementText} focused`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <ActionPopoverPropsComponentWithOnlyFirstAndLastNotDisabled />
+        <ActionPopoverPropsComponentWithOnlyFirstAndLastNotDisabled />,
       );
 
       const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
@@ -695,11 +701,13 @@ test.describe("check functionality for ActionPopover component", () => {
     });
   });
 
-  ([
-    [0, "Item 1"],
-    [1, "Item 4"],
-    [2, "Item 6"],
-  ] as [number, string][]).forEach(([times, elementText]) => {
+  (
+    [
+      [0, "Item 1"],
+      [1, "Item 4"],
+      [2, "Item 6"],
+    ] as [number, string][]
+  ).forEach(([times, elementText]) => {
     test(`should be able to press downarrow ${times} times and get button ${elementText} focused when only a few items are disabled`, async ({
       mount,
       page,
@@ -717,11 +725,13 @@ test.describe("check functionality for ActionPopover component", () => {
     });
   });
 
-  ([
-    [0, "Item 1"],
-    [1, "Item 6"],
-    [2, "Item 4"],
-  ] as [number, string][]).forEach(([times, elementText]) => {
+  (
+    [
+      [0, "Item 1"],
+      [1, "Item 6"],
+      [2, "Item 4"],
+    ] as [number, string][]
+  ).forEach(([times, elementText]) => {
     test(`should be able to press up ${times} times and get button ${elementText} focused when only a few items are disabled`, async ({
       mount,
       page,
@@ -739,12 +749,14 @@ test.describe("check functionality for ActionPopover component", () => {
     });
   });
 
-  ([
-    [1, "Item 2"],
-    [2, "Item 3"],
-    [3, "Item 4"],
-    [4, "Item 5"],
-  ] as [number, string][]).forEach(([times, elementText]) => {
+  (
+    [
+      [1, "Item 2"],
+      [2, "Item 3"],
+      [3, "Item 4"],
+      [4, "Item 5"],
+    ] as [number, string][]
+  ).forEach(([times, elementText]) => {
     test(`should be able to press down ${times} times and not get button ${elementText} focused when all items are disabled`, async ({
       mount,
       page,
@@ -762,12 +774,14 @@ test.describe("check functionality for ActionPopover component", () => {
     });
   });
 
-  ([
-    [1, "Item 2"],
-    [2, "Item 3"],
-    [3, "Item 4"],
-    [4, "Item 5"],
-  ] as [number, string][]).forEach(([times, elementText]) => {
+  (
+    [
+      [1, "Item 2"],
+      [2, "Item 3"],
+      [3, "Item 4"],
+      [4, "Item 5"],
+    ] as [number, string][]
+  ).forEach(([times, elementText]) => {
     test(`should be able to press up ${times} times and not get button ${elementText} focused when all items are disabled`, async ({
       mount,
       page,
@@ -794,14 +808,16 @@ test.describe("check props for ActionPopover component", () => {
     const actionPopoverWrapperElement = await actionPopoverWrapper(page);
     await expect(actionPopoverWrapperElement).toHaveAttribute(
       "id",
-      "playwright"
+      "playwright",
     );
   });
 
-  ([
-    [true, "bottom-start"],
-    [false, "bottom-end"],
-  ] as [boolean, string][]).forEach(([rightAlignMenu, placement]) => {
+  (
+    [
+      [true, "bottom-start"],
+      [false, "bottom-end"],
+    ] as [boolean, string][]
+  ).forEach(([rightAlignMenu, placement]) => {
     test(`should render with rightAlignMenu set to ${rightAlignMenu}`, async ({
       mount,
       page,
@@ -812,7 +828,7 @@ test.describe("check props for ActionPopover component", () => {
       const actionPopoverElement = await actionPopover(page).first();
       await expect(actionPopoverElement).toHaveAttribute(
         "data-floating-placement",
-        placement
+        placement,
       );
     });
   });
@@ -822,7 +838,7 @@ test.describe("check props for ActionPopover component", () => {
     const actionPopoverButtonElement = await buttonDataComponent(page);
     await actionPopoverButtonElement.click();
     const customButton = await actionPopoverWrapper(page).locator(
-      '[data-component="button"]'
+      '[data-component="button"]',
     );
     await expect(customButton).toBeVisible();
   });
@@ -831,9 +847,8 @@ test.describe("check props for ActionPopover component", () => {
     await mount(<ActionPopoverWithSubmenusAndNoIcons />);
     const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
     await actionPopoverButtonElement.click();
-    const actionPopoverMenuItemIconElement = await actionPopoverMenuItemIcon(
-      page
-    ).nth(0);
+    const actionPopoverMenuItemIconElement =
+      await actionPopoverMenuItemIcon(page).nth(0);
     await expect(await actionPopoverMenuItemIconElement.count()).toBe(1);
   });
 
@@ -854,7 +869,7 @@ test.describe("check props for ActionPopover component", () => {
         .first();
       await expect(actionPopoverItem).toHaveCSS(
         "justify-content",
-        `flex-${attrValue}`
+        `flex-${attrValue}`,
       );
     });
   });
@@ -868,7 +883,7 @@ test.describe("check props for ActionPopover component", () => {
       page,
     }) => {
       await mount(
-        <ActionPopoverWithSubmenusAndIcons submenuPosition={position} />
+        <ActionPopoverWithSubmenusAndIcons submenuPosition={position} />,
       );
       const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
       await actionPopoverButtonElement.click();
@@ -887,7 +902,7 @@ test.describe("check props for ActionPopover component", () => {
 
     await expect(actionPopoverSubmenuByIndex(page, 0)).toHaveCSS(
       "bottom",
-      "-8px"
+      "-8px",
     ); // result of calc(-1 * var(--spacing100))
   });
 
@@ -895,7 +910,7 @@ test.describe("check props for ActionPopover component", () => {
     await mount(<ActionPopoverWithProps aria-label="test-aria-label" />);
     await expect(actionPopoverButton(page).nth(0)).toHaveAttribute(
       "aria-label",
-      "test-aria-label"
+      "test-aria-label",
     );
   });
 });
@@ -1023,7 +1038,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
         <ActionPopoverWithNoIconsOrSubmenus
           horizontalAlignment={alignment}
           submenuPosition={position}
-        />
+        />,
       );
       const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
       await actionPopoverButtonElement.click();
@@ -1032,14 +1047,14 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
       const plTokens = await getDesignTokensByCssProperty(
         page,
         itemText,
-        "padding-left"
+        "padding-left",
       );
       await expect(plTokens[0]).toBe("--spacing100");
       await expect(itemText).toHaveCSS("padding-right", "8px");
       const prTokens = await getDesignTokensByCssProperty(
         page,
         itemText,
-        "padding-right"
+        "padding-right",
       );
       await expect(prTokens[0]).toBe("--spacing100");
     });
@@ -1053,7 +1068,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
       <ActionPopoverWithSomeSubmenusAndNoIcons
         horizontalAlignment="left"
         submenuPosition="left"
-      />
+      />,
     );
     const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
     await actionPopoverButtonElement.click();
@@ -1062,7 +1077,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
     const plTokens = await getDesignTokensByCssProperty(
       page,
       itemText,
-      "padding-left"
+      "padding-left",
     );
     await expect(plTokens[0]).toBe("--spacing400");
   });
@@ -1075,7 +1090,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
       <ActionPopoverWithSomeSubmenusAndNoIcons
         horizontalAlignment="right"
         submenuPosition="right"
-      />
+      />,
     );
     const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
     await actionPopoverButtonElement.click();
@@ -1084,7 +1099,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
     const prTokens = await getDesignTokensByCssProperty(
       page,
       itemText,
-      "padding-right"
+      "padding-right",
     );
     await expect(prTokens[0]).toBe("--spacing400");
   });
@@ -1097,7 +1112,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
       <ActionPopoverWithSubmenusAndSomeIcons
         horizontalAlignment="left"
         submenuPosition="left"
-      />
+      />,
     );
     const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
     await actionPopoverButtonElement.click();
@@ -1106,7 +1121,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
     const plTokens = await getDesignTokensByCssProperty(
       page,
       itemText,
-      "padding-left"
+      "padding-left",
     );
     await expect(plTokens[0]).toBe("--spacing600");
   });
@@ -1119,7 +1134,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
       <ActionPopoverWithSubmenusAndSomeIcons
         horizontalAlignment="right"
         submenuPosition="right"
-      />
+      />,
     );
     const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
     await actionPopoverButtonElement.click();
@@ -1128,7 +1143,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
     const prTokens = await getDesignTokensByCssProperty(
       page,
       itemText,
-      "padding-right"
+      "padding-right",
     );
     await expect(prTokens[0]).toBe("--spacing600");
   });
@@ -1141,7 +1156,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
       <ActionPopoverWithVariableChildren
         horizontalAlignment="left"
         submenuPosition="left"
-      />
+      />,
     );
     const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
     await actionPopoverButtonElement.click();
@@ -1150,7 +1165,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
     const plTokens = await getDesignTokensByCssProperty(
       page,
       itemText,
-      "padding-left"
+      "padding-left",
     );
     await expect(plTokens[0]).toBe("--spacing900");
   });
@@ -1163,7 +1178,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
       <ActionPopoverWithVariableChildren
         horizontalAlignment="right"
         submenuPosition="right"
-      />
+      />,
     );
     const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
     await actionPopoverButtonElement.click();
@@ -1172,17 +1187,19 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
     const prTokens = await getDesignTokensByCssProperty(
       page,
       itemText,
-      "padding-right"
+      "padding-right",
     );
     await expect(prTokens[0]).toBe("--spacing900");
   });
 
-  ([
-    ["left", "left", 1],
-    ["left", "right", 2],
-    ["right", "left", 3],
-    ["right", "right", 4],
-  ] as [string, string, number][]).forEach(([alignment, position, index]) => {
+  (
+    [
+      ["left", "left", 1],
+      ["left", "right", 2],
+      ["right", "left", 3],
+      ["right", "right", 4],
+    ] as [string, string, number][]
+  ).forEach(([alignment, position, index]) => {
     test(`when horizontalAlignment is ${alignment}, submenuPosition is ${position} and Menu Item child is a submenu, then left and right padding is --spacing000`, async ({
       mount,
       page,
@@ -1191,7 +1208,7 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
         <ActionPopoverMenuWithProps
           horizontalAlignment={alignment}
           submenuPosition={position}
-        />
+        />,
       );
       const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
       await actionPopoverButtonElement.click();
@@ -1200,14 +1217,14 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => {
       const plTokens = await getDesignTokensByCssProperty(
         page,
         itemText,
-        "padding-left"
+        "padding-left",
       );
       await expect(plTokens[0]).toBe("--spacing000");
       await expect(itemText).toHaveCSS("padding-right", "0px");
       const prTokens = await getDesignTokensByCssProperty(
         page,
         itemText,
-        "padding-right"
+        "padding-right",
       );
       await expect(prTokens[0]).toBe("--spacing000");
     });
@@ -1243,7 +1260,7 @@ test.describe("justify-content checks on 'StyledMenuItem'", () => {
         <ActionPopoverWithProps
           horizontalAlignment={alignment}
           submenuPosition={position}
-        />
+        />,
       );
       const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
       await actionPopoverButtonElement.click();
@@ -1264,7 +1281,7 @@ test.describe("justify-content checks on 'StyledMenuItem'", () => {
         <ActionPopoverWithSubmenusAndIcons
           horizontalAlignment={alignment}
           submenuPosition={position}
-        />
+        />,
       );
       const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
       await actionPopoverButtonElement.click();
@@ -1284,10 +1301,10 @@ test.describe("padding checks on 'MenuItemIcon'", () => {
     const paddingTokens = await getDesignTokensByCssProperty(
       page,
       icon,
-      "padding"
+      "padding",
     );
     await expect(paddingTokens.join(" ")).toEqual(
-      "--spacing100 --spacing100 --spacing100 --spacing100"
+      "--spacing100 --spacing100 --spacing100 --spacing100",
     );
   });
 
@@ -1325,7 +1342,7 @@ test.describe("padding checks on 'MenuItemIcon'", () => {
         <ActionPopoverWithIconsAndSomeSubmenus
           submenuPosition={position}
           horizontalAlignment={alignment}
-        />
+        />,
       );
       const actionPopoverButtonElement = await actionPopoverButton(page).nth(0);
       await actionPopoverButtonElement.click();
@@ -1334,7 +1351,7 @@ test.describe("padding checks on 'MenuItemIcon'", () => {
       const paddingTokens = await getDesignTokensByCssProperty(
         page,
         icon,
-        "padding"
+        "padding",
       );
       await expect(paddingTokens.join(" ")).toEqual(spacing);
     });
@@ -1371,13 +1388,13 @@ test.describe("when focused", () => {
     await actionPopoverButtonElement.focus();
     await expect(actionPopoverButtonElement).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
     await actionPopoverButtonElement.click();
     const focusedItem = await actionPopoverInnerItem(page, 1);
     await expect(focusedItem).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 
@@ -1390,13 +1407,13 @@ test.describe("when focused", () => {
     await actionPopoverButtonElement.focus();
     await expect(actionPopoverButtonElement).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await actionPopoverButtonElement.click();
     const focusedItem = await actionPopoverInnerItem(page, 1);
     await expect(focusedItem).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
   });
 });
@@ -1425,7 +1442,7 @@ test.describe("Accessibility tests for ActionPopover", () => {
             More
           </ActionPopoverMenuButton>
         )}
-      />
+      />,
     );
     await checkAccessibility(page);
   });
diff --git a/src/components/action-popover/action-popover.style.ts b/src/components/action-popover/action-popover.style.ts
index 75707197b4..67a11e44e0 100644
--- a/src/components/action-popover/action-popover.style.ts
+++ b/src/components/action-popover/action-popover.style.ts
@@ -29,7 +29,7 @@ function getPaddingValues(
   childHasSubmenu?: boolean,
   childHasIcon?: boolean,
   hasIcon?: boolean,
-  hasSubmenu?: boolean
+  hasSubmenu?: boolean,
 ) {
   // computing padding for "inner text" element of a menu item.
   // childHasSubmenu - ANY sibling (including itself?) has the 'submenu' prop
@@ -53,7 +53,7 @@ function getIconPaddingValues(
   horizontalAlignment?: "left" | "right",
   submenuPosition?: "left" | "right",
   siblingsHaveIconAndSubmenu?: boolean,
-  isASubmenu?: boolean
+  isASubmenu?: boolean,
 ) {
   const sameAlignment =
     (horizontalAlignment === "left" && submenuPosition === "left") ||
@@ -110,7 +110,7 @@ const StyledMenuItemInnerText = styled.div<
         childHasSubmenu,
         childHasIcon,
         hasIcon,
-        hasSubmenu
+        hasSubmenu,
       )};
     `}
 
@@ -122,7 +122,7 @@ const StyledMenuItemInnerText = styled.div<
         childHasSubmenu,
         childHasIcon,
         hasIcon,
-        hasSubmenu
+        hasSubmenu,
       )};
     `}
   `}
@@ -132,28 +132,32 @@ const StyledMenuItemOuterContainer = styled.div`
   display: inherit;
 `;
 const StyledMenuItem = styled.button<Omit<StyledMenuItemProps, "variant">>`
-  ${({ horizontalAlignment, submenuPosition, childHasSubmenu, hasSubmenu }) =>
+  ${({
+    horizontalAlignment,
+    submenuPosition,
+    childHasSubmenu,
+    hasSubmenu,
+  }) => css`
+    justify-content: ${horizontalAlignment === "left"
+      ? "flex-start"
+      : "flex-end"};
+
+    ${horizontalAlignment === "left" &&
+    submenuPosition === "right" &&
     css`
-      justify-content: ${horizontalAlignment === "left"
-        ? "flex-start"
-        : "flex-end"};
+      justify-content: space-between;
+    `}
 
-      ${horizontalAlignment === "left" &&
-      submenuPosition === "right" &&
+    ${horizontalAlignment === "right" &&
+    submenuPosition === "left" &&
+    css`
+      ${childHasSubmenu &&
+      hasSubmenu &&
       css`
         justify-content: space-between;
       `}
-
-      ${horizontalAlignment === "right" &&
-      submenuPosition === "left" &&
-      css`
-        ${childHasSubmenu &&
-        hasSubmenu &&
-        css`
-          justify-content: space-between;
-        `}
-      `}
     `}
+  `}
 
   text-decoration: none;
   background-color: var(--colorsActionMajorYang100);
@@ -281,7 +285,7 @@ const MenuItemIcon = styled(Icon)<Omit<StyledMenuItemProps, "isDisabled">>`
         horizontalAlignment,
         submenuPosition,
         childHasIcon && childHasSubmenu && hasIcon && !hasSubmenu,
-        isASubmenu
+        isASubmenu,
       )}
       var(--spacing100)
       ${getIconPaddingValues(
@@ -289,7 +293,7 @@ const MenuItemIcon = styled(Icon)<Omit<StyledMenuItemProps, "isDisabled">>`
         horizontalAlignment,
         submenuPosition,
         childHasIcon && childHasSubmenu && hasIcon && !hasSubmenu,
-        isASubmenu
+        isASubmenu,
       )};
     color: var(--colorsUtilityYin065);
   `}
diff --git a/src/components/action-popover/action-popover.test.tsx b/src/components/action-popover/action-popover.test.tsx
index a5c25f4853..9bdbd118e7 100644
--- a/src/components/action-popover/action-popover.test.tsx
+++ b/src/components/action-popover/action-popover.test.tsx
@@ -19,7 +19,7 @@ import guid from "../../__internal__/utils/helpers/guid";
 
 jest.mock("../../__internal__/utils/helpers/guid");
 (guid as jest.MockedFunction<typeof guid>).mockImplementation(
-  () => "guid-12345"
+  () => "guid-12345",
 );
 
 beforeAll(() => {
@@ -44,7 +44,7 @@ testStyledSystemMarginRTL(
       </ActionPopover>
     </ThemeProvider>
   ),
-  () => screen.getByTestId("action-popover-wrapper")
+  () => screen.getByTestId("action-popover-wrapper"),
 );
 
 describe("if download prop and href prop are provided", () => {
@@ -56,7 +56,7 @@ describe("if download prop and href prop are provided", () => {
         <ActionPopoverItem href="#" download>
           test download
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -72,7 +72,7 @@ describe("if download prop and href prop are provided", () => {
         <ActionPopoverItem href="#" download>
           test download
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -88,12 +88,12 @@ test("displays the vertical ellipsis icon as the menu button", () => {
   render(
     <ActionPopover>
       <ActionPopoverItem>example item</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
   expect(screen.getByTestId("icon")).toHaveStyleRule(
     "content",
     `"${iconUnicodes.ellipsis_vertical}"`,
-    { modifier: "&::before" }
+    { modifier: "&::before" },
   );
 });
 
@@ -105,18 +105,18 @@ test("has proper data attributes applied to elements", async () => {
       <ActionPopoverItem>example item 1</ActionPopoverItem>
       <ActionPopoverDivider />
       <ActionPopoverItem>example item 2</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
 
   expect(screen.getByTestId("action-popover-wrapper")).toHaveAttribute(
     "data-component",
-    "action-popover-wrapper"
+    "action-popover-wrapper",
   );
   expect(screen.getByRole("list")).toHaveAttribute(
     "data-component",
-    "action-popover"
+    "action-popover",
   );
   const divider = screen.getAllByRole("listitem")[1];
   expect(divider).toHaveAttribute("data-element", "action-popover-divider");
@@ -126,7 +126,7 @@ test("has a default aria-label", () => {
   render(
     <ActionPopover>
       <ActionPopoverItem>example item</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
   expect(screen.getByRole("button")).toHaveAccessibleName("actions");
 });
@@ -135,7 +135,7 @@ test("uses the aria-label prop if provided", () => {
   render(
     <ActionPopover aria-label="test aria label">
       <ActionPopoverItem>example item</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
   expect(screen.getByRole("button")).toHaveAccessibleName("test aria label");
 });
@@ -144,7 +144,7 @@ test("renders with the menu closed by default", () => {
   render(
     <ActionPopover>
       <ActionPopoverItem>example item</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
   expect(screen.queryByRole("list")).not.toBeInTheDocument();
 });
@@ -162,20 +162,20 @@ test.each<["top" | "bottom", boolean, string]>([
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
 
     render(
-      <ActionPopover placement={placement} rightAlignMenu={rightAlignMenu} />
+      <ActionPopover placement={placement} rightAlignMenu={rightAlignMenu} />,
     );
 
     await user.click(screen.getByRole("button"));
 
     const placements = computePositionSpy.mock.calls.map(
-      (call) => call[2]?.placement
+      (call) => call[2]?.placement,
     );
 
     expect(placements.length).toBeGreaterThan(0);
     expect(placements.every((p) => p === result)).toBe(true);
 
     computePositionSpy.mockRestore();
-  }
+  },
 );
 
 test("clicking a menu item calls its onClick handler", async () => {
@@ -190,7 +190,7 @@ test("clicking a menu item calls its onClick handler", async () => {
       <ActionPopoverItem icon="print" onClick={() => onClick("print")}>
         Print Invoice
       </ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -211,7 +211,7 @@ test("pressing enter on a menu item calls its onClick handler", async () => {
       <ActionPopoverItem icon="print" onClick={() => onClick("print")}>
         Print Invoice
       </ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -228,7 +228,7 @@ test("clicking a menu item closes the menu", async () => {
     <ActionPopover>
       <ActionPopoverItem icon="email">Email Invoice</ActionPopoverItem>
       <ActionPopoverItem icon="print">Print Invoice</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -244,7 +244,7 @@ test("pressing enter on a menu item closes the menu", async () => {
     <ActionPopover>
       <ActionPopoverItem icon="email">Email Invoice</ActionPopoverItem>
       <ActionPopoverItem icon="print">Print Invoice</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -261,7 +261,7 @@ test("clicking a menu item focuses the menu button", async () => {
     <ActionPopover>
       <ActionPopoverItem icon="email">Email Invoice</ActionPopoverItem>
       <ActionPopoverItem icon="print">Print Invoice</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -277,7 +277,7 @@ test("pressing enter on a menu item focuses the menu button", async () => {
     <ActionPopover>
       <ActionPopoverItem icon="email">Email Invoice</ActionPopoverItem>
       <ActionPopoverItem icon="print">Print Invoice</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -299,7 +299,7 @@ test("clicking a disabled menu item does not call its onClick handler", async ()
       <ActionPopoverItem icon="print" onClick={() => onClick("print")} disabled>
         Print Invoice
       </ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -320,7 +320,7 @@ test("pressing enter on a disabled menu item does not call its onClick handler",
       <ActionPopoverItem icon="print" onClick={() => onClick("print")} disabled>
         Print Invoice
       </ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -339,7 +339,7 @@ test("clicking a disabled menu item does not close the menu", async () => {
       <ActionPopoverItem icon="print" disabled>
         Print Invoice
       </ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -357,7 +357,7 @@ test("pressing enter on a disabled menu item does not close the menu", async ()
       <ActionPopoverItem icon="print" disabled>
         Print Invoice
       </ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -376,7 +376,7 @@ test("clicking a disabled menu item does not focus the menu button", async () =>
       <ActionPopoverItem icon="print" disabled>
         Print Invoice
       </ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -394,7 +394,7 @@ test("pressing enter on a disabled menu item does not focus the menu button", as
       <ActionPopoverItem icon="print" disabled>
         Print Invoice
       </ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -412,7 +412,7 @@ test("clicking the menu button calls the onOpen prop", async () => {
   render(
     <ActionPopover onOpen={onOpen}>
       <ActionPopoverItem>example item</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -431,7 +431,7 @@ test("clicking the menu button stops any further event propagation", async () =>
       <ActionPopover>
         <ActionPopoverItem>example item</ActionPopoverItem>
       </ActionPopover>
-    </div>
+    </div>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -446,7 +446,7 @@ test("clicking the menu button focuses the first focusable element", async () =>
     <ActionPopover>
       <ActionPopoverItem disabled>shouldn't be focused</ActionPopoverItem>
       <ActionPopoverItem>example item</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -463,7 +463,7 @@ test("clicking the menu button with the menu open closes the menu and calls the
   render(
     <ActionPopover onClose={onClose}>
       <ActionPopoverItem>example item</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   const menuButton = screen.getByRole("button");
@@ -482,7 +482,7 @@ test("clicking inside the component does not close the menu", async () => {
     <ActionPopover>
       <ActionPopoverItem disabled>disabled item</ActionPopoverItem>
       <ActionPopoverItem>example item</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -499,7 +499,7 @@ test("clicking elsewhere on the document closes the menu", async () => {
     <ActionPopover>
       <ActionPopoverItem disabled>disabled item</ActionPopoverItem>
       <ActionPopoverItem>example item</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -519,7 +519,7 @@ test.each(["ArrowDown", "Space", "Enter", "ArrowUp"] as const)(
       <ActionPopover onOpen={onOpen}>
         <ActionPopoverItem>example item 1</ActionPopoverItem>
         <ActionPopoverItem>example item 2</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     screen.getByRole("button").focus();
@@ -529,7 +529,7 @@ test.each(["ArrowDown", "Space", "Enter", "ArrowUp"] as const)(
 
     expect(screen.getByRole("list")).toBeVisible();
     expect(onOpen).toHaveBeenCalledTimes(1);
-  }
+  },
 );
 
 test.each(["ArrowDown", "Space", "Enter"] as const)(
@@ -541,7 +541,7 @@ test.each(["ArrowDown", "Space", "Enter"] as const)(
       <ActionPopover>
         <ActionPopoverItem>example item 1</ActionPopoverItem>
         <ActionPopoverItem>example item 2</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     screen.getByRole("button").focus();
@@ -550,9 +550,9 @@ test.each(["ArrowDown", "Space", "Enter"] as const)(
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 1" })
+      screen.getByRole("button", { name: "example item 1" }),
     ).toHaveFocus();
-  }
+  },
 );
 
 test("pressing ArrowUp key when focused on the menu button selects the last focusable item", async () => {
@@ -562,7 +562,7 @@ test("pressing ArrowUp key when focused on the menu button selects the last focu
     <ActionPopover>
       <ActionPopoverItem>example item 1</ActionPopoverItem>
       <ActionPopoverItem>example item 2</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   screen.getByRole("button").focus();
@@ -586,7 +586,7 @@ test.each([
       <ActionPopover onClose={onClose}>
         <ActionPopoverItem>example item 1</ActionPopoverItem>
         <ActionPopoverItem>example item 2</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     screen.getByRole("button").focus();
@@ -594,7 +594,7 @@ test.each([
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 1" })
+      screen.getByRole("button", { name: "example item 1" }),
     ).toHaveFocus();
 
     await user.keyboard(keycode);
@@ -602,7 +602,7 @@ test.each([
 
     expect(screen.queryByRole("list")).not.toBeInTheDocument();
     expect(onClose).toHaveBeenCalledTimes(1);
-  }
+  },
 );
 
 test("pressing Escape when focused on a menu item focuses the MenuButton and closes the Menu", async () => {
@@ -612,7 +612,7 @@ test("pressing Escape when focused on a menu item focuses the MenuButton and clo
     <ActionPopover>
       <ActionPopoverItem>example item 1</ActionPopoverItem>
       <ActionPopoverItem>example item 2</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   screen.getByRole("button").focus();
@@ -631,7 +631,7 @@ test("pressing the Down Arrow key when the menu is open focuses the next item an
       <ActionPopoverItem>example item 1</ActionPopoverItem>
       <ActionPopoverItem>example item 2</ActionPopoverItem>
       <ActionPopoverItem>example item 3</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -659,7 +659,7 @@ test("pressing the Up Arrow key when the menu is open focuses the previous item
       <ActionPopoverItem>example item 1</ActionPopoverItem>
       <ActionPopoverItem>example item 2</ActionPopoverItem>
       <ActionPopoverItem>example item 3</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -688,7 +688,7 @@ test("pressing the Home key when the menu is open focuses the first item, no mat
       <ActionPopoverItem>example item 2</ActionPopoverItem>
       <ActionPopoverItem>example item 3</ActionPopoverItem>
       <ActionPopoverItem>example item 4</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -732,7 +732,7 @@ test("pressing the End key when the menu is open focuses the last item, no matte
       <ActionPopoverItem>example item 2</ActionPopoverItem>
       <ActionPopoverItem>example item 3</ActionPopoverItem>
       <ActionPopoverItem>example item 4</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -775,7 +775,7 @@ test("pressing Space when the menu is open does nothing", async () => {
       <ActionPopoverItem>example item 1</ActionPopoverItem>
       <ActionPopoverItem>example item 2</ActionPopoverItem>
       <ActionPopoverItem>example item 3</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -802,7 +802,7 @@ test("pressing an alphabet character when the menu is open selects the next sele
       <ActionPopoverItem disabled>Disabled</ActionPopoverItem>
       <ActionPopoverDivider key="divider" />
       <ActionPopoverItem>Download CSV</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
   await user.click(screen.getByRole("button"));
   jest.runOnlyPendingTimers();
@@ -840,7 +840,7 @@ test("pressing a non-printable character key when the menu is open does nothing"
       <ActionPopoverItem>first item</ActionPopoverItem>
       <ActionPopoverItem>F - shouldn't work</ActionPopoverItem>
       <ActionPopoverItem>F1 - shouldn't work</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -867,11 +867,11 @@ test("an error is thrown, with appropriate error message, if invalid children ar
         <ActionPopoverItem onClick={() => {}}>Item</ActionPopoverItem>
         Invalid children
         <p>invalid children</p>
-      </ActionPopover>
+      </ActionPopover>,
     );
   }).toThrow(
     "ActionPopover only accepts children of type `ActionPopoverItem`" +
-      " and `ActionPopoverDivider`."
+      " and `ActionPopoverDivider`.",
   );
 
   globalConsoleSpy.mockRestore();
@@ -895,7 +895,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -907,7 +907,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
     expect(submenuIcon).toHaveStyleRule(
       "content",
       `"${iconUnicodes.chevron_left_thick}"`,
-      { modifier: "&::before" }
+      { modifier: "&::before" },
     );
     expect(submenuIcon).toHaveStyle({ left: "-5px" });
   });
@@ -929,18 +929,18 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
 
     expect(
-      screen.queryByRole("button", { name: "submenu item 1" })
+      screen.queryByRole("button", { name: "submenu item 1" }),
     ).not.toBeInTheDocument();
 
     // move mouse over the item with the submenu
     await user.hover(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
 
     act(() => {
@@ -948,7 +948,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
     });
 
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toBeVisible();
   });
 
@@ -972,7 +972,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -980,15 +980,15 @@ describe("when an item has a submenu with default (left) alignment", () => {
     const clearTimeoutSpy = jest.spyOn(window, "clearTimeout");
 
     await user.hover(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
     expect(clearTimeoutSpy).not.toHaveBeenCalled();
     // need to move the pointer away from the element before moving it back, otherwise mouseEnter won't be triggered a second time
     await user.unhover(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
     await user.hover(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
 
     expect(clearTimeoutSpy).toHaveBeenCalled();
@@ -1012,20 +1012,20 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
 
     await user.hover(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
     act(() => {
       jest.runOnlyPendingTimers();
     });
 
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toBeVisible();
 
     await user.hover(screen.getByRole("button", { name: "example item 2" }));
@@ -1034,7 +1034,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
     });
 
     expect(
-      screen.queryByRole("button", { name: "submenu item 1" })
+      screen.queryByRole("button", { name: "submenu item 1" }),
     ).not.toBeInTheDocument();
   });
 
@@ -1058,7 +1058,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1066,18 +1066,18 @@ describe("when an item has a submenu with default (left) alignment", () => {
     const clearTimeoutSpy = jest.spyOn(window, "clearTimeout");
 
     await user.hover(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
     await user.unhover(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
     expect(clearTimeoutSpy).not.toHaveBeenCalled();
     // need to enter and leave a second time
     await user.hover(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
     await user.unhover(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
 
     // need to check for 2 calls, as one will have been due to the cleartimeout of the double mouse-enter
@@ -1104,7 +1104,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1136,7 +1136,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1149,13 +1149,13 @@ describe("when an item has a submenu with default (left) alignment", () => {
     await user.keyboard("{ArrowLeft}");
 
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toBeVisible();
 
     await user.keyboard("{ArrowRight}");
 
     expect(
-      screen.queryByRole("button", { name: "submenu item 1" })
+      screen.queryByRole("button", { name: "submenu item 1" }),
     ).not.toBeInTheDocument();
     expect(parentItem).toHaveFocus();
   });
@@ -1177,7 +1177,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1188,17 +1188,17 @@ describe("when an item has a submenu with default (left) alignment", () => {
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toBeVisible();
 
     await user.keyboard("z");
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toBeVisible();
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toHaveFocus();
   });
 
@@ -1219,7 +1219,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1251,12 +1251,12 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
     await user.click(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
 
     await user.click(screen.getByRole("button", { name: "submenu item 1" }));
@@ -1282,7 +1282,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1294,7 +1294,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toHaveFocus();
 
     await user.keyboard("{Escape}");
@@ -1322,17 +1322,17 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
 
     expect(
-      screen.queryByRole("button", { name: "submenu item 1" })
+      screen.queryByRole("button", { name: "submenu item 1" }),
     ).not.toBeInTheDocument();
 
     await user.hover(
-      screen.getByRole("button", { name: "example item with submenu" })
+      screen.getByRole("button", { name: "example item with submenu" }),
     );
 
     act(() => {
@@ -1340,7 +1340,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
     });
 
     expect(
-      screen.queryByRole("button", { name: "submenu item 1" })
+      screen.queryByRole("button", { name: "submenu item 1" }),
     ).not.toBeInTheDocument();
   });
 
@@ -1362,7 +1362,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1371,7 +1371,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
     await user.keyboard("{ArrowLeft}");
 
     expect(
-      screen.queryByRole("button", { name: "submenu item 1" })
+      screen.queryByRole("button", { name: "submenu item 1" }),
     ).not.toBeInTheDocument();
   });
 
@@ -1393,7 +1393,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1402,7 +1402,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
     await user.keyboard("{Enter}");
 
     expect(
-      screen.queryByRole("button", { name: "submenu item 1" })
+      screen.queryByRole("button", { name: "submenu item 1" }),
     ).not.toBeInTheDocument();
   });
 
@@ -1423,7 +1423,7 @@ describe("when an item has a submenu with default (left) alignment", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1433,10 +1433,10 @@ describe("when an item has a submenu with default (left) alignment", () => {
 
     await user.click(screen.getByRole("button", { name: "submenu item 1" }));
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toBeVisible();
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toHaveFocus();
   });
 });
@@ -1446,7 +1446,7 @@ describe("when there isn't enough space on the screen to render a submenu on the
   beforeEach(() => {
     getBoundingClientRectSpy = jest.spyOn(
       Element.prototype,
-      "getBoundingClientRect"
+      "getBoundingClientRect",
     );
     getBoundingClientRectSpy.mockImplementation(() => ({
       left: "-100",
@@ -1476,7 +1476,7 @@ describe("when there isn't enough space on the screen to render a submenu on the
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1488,7 +1488,7 @@ describe("when there isn't enough space on the screen to render a submenu on the
     expect(submenuIcon).toHaveStyleRule(
       "content",
       `"${iconUnicodes.chevron_right_thick}"`,
-      { modifier: "&::before" }
+      { modifier: "&::before" },
     );
     expect(submenuIcon).toHaveStyle({ right: "-5px" });
   });
@@ -1510,7 +1510,7 @@ describe("when there isn't enough space on the screen to render a submenu on the
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1542,7 +1542,7 @@ describe("when there isn't enough space on the screen to render a submenu on the
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1555,13 +1555,13 @@ describe("when there isn't enough space on the screen to render a submenu on the
     await user.keyboard("{ArrowRight}");
 
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toBeVisible();
 
     await user.keyboard("{ArrowLeft}");
 
     expect(
-      screen.queryByRole("button", { name: "submenu item 1" })
+      screen.queryByRole("button", { name: "submenu item 1" }),
     ).not.toBeInTheDocument();
     expect(parentItem).toHaveFocus();
   });
@@ -1585,7 +1585,7 @@ describe("when the submenuPosition prop is set to 'right'", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1597,7 +1597,7 @@ describe("when the submenuPosition prop is set to 'right'", () => {
     expect(submenuIcon).toHaveStyleRule(
       "content",
       `"${iconUnicodes.chevron_right_thick}"`,
-      { modifier: "&::before" }
+      { modifier: "&::before" },
     );
     expect(submenuIcon).toHaveStyle({ right: "-5px" });
   });
@@ -1619,7 +1619,7 @@ describe("when the submenuPosition prop is set to 'right'", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1651,7 +1651,7 @@ describe("when the submenuPosition prop is set to 'right'", () => {
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1664,13 +1664,13 @@ describe("when the submenuPosition prop is set to 'right'", () => {
     await user.keyboard("{ArrowRight}");
 
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toBeVisible();
 
     await user.keyboard("{ArrowLeft}");
 
     expect(
-      screen.queryByRole("button", { name: "submenu item 1" })
+      screen.queryByRole("button", { name: "submenu item 1" }),
     ).not.toBeInTheDocument();
     expect(parentItem).toHaveFocus();
   });
@@ -1681,7 +1681,7 @@ describe("when the submenuPosition prop is set to 'right' and there isn't enough
   beforeEach(() => {
     getBoundingClientRectSpy = jest.spyOn(
       Element.prototype,
-      "getBoundingClientRect"
+      "getBoundingClientRect",
     );
     getBoundingClientRectSpy.mockImplementation(() => ({
       left: "auto",
@@ -1711,7 +1711,7 @@ describe("when the submenuPosition prop is set to 'right' and there isn't enough
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1723,7 +1723,7 @@ describe("when the submenuPosition prop is set to 'right' and there isn't enough
     expect(submenuIcon).toHaveStyleRule(
       "content",
       `"${iconUnicodes.chevron_left_thick}"`,
-      { modifier: "&::before" }
+      { modifier: "&::before" },
     );
     expect(submenuIcon).toHaveStyle({ left: "-5px" });
   });
@@ -1745,7 +1745,7 @@ describe("when the submenuPosition prop is set to 'right' and there isn't enough
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1777,7 +1777,7 @@ describe("when the submenuPosition prop is set to 'right' and there isn't enough
         >
           example item with submenu
         </ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -1790,13 +1790,13 @@ describe("when the submenuPosition prop is set to 'right' and there isn't enough
     await user.keyboard("{ArrowLeft}");
 
     expect(
-      screen.getByRole("button", { name: "submenu item 1" })
+      screen.getByRole("button", { name: "submenu item 1" }),
     ).toBeVisible();
 
     await user.keyboard("{ArrowRight}");
 
     expect(
-      screen.queryByRole("button", { name: "submenu item 1" })
+      screen.queryByRole("button", { name: "submenu item 1" }),
     ).not.toBeInTheDocument();
     expect(parentItem).toHaveFocus();
   });
@@ -1812,14 +1812,14 @@ test("an error is thrown, with appropriate error message, if an invalid element
   render(
     <ActionPopover>
       <ActionPopoverItem submenu={<p>foo</p>}>item</ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await expect(() => {
     // error should only be actually thrown when the Popover menu, with invalid submenu, is rendered
     return user.click(screen.getByRole("button"));
   }).rejects.toThrow(
-    "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`"
+    "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`",
   );
 
   globalConsoleSpy.mockRestore();
@@ -1839,7 +1839,7 @@ test("an error is thrown, with appropriate error message, if a submenu has incor
       >
         item
       </ActionPopoverItem>
-    </ActionPopover>
+    </ActionPopover>,
   );
 
   await expect(() => {
@@ -1847,7 +1847,7 @@ test("an error is thrown, with appropriate error message, if a submenu has incor
     return user.click(screen.getByRole("button"));
   }).rejects.toThrow(
     "ActionPopoverMenu only accepts children of type `ActionPopoverItem`" +
-      " and `ActionPopoverDivider`."
+      " and `ActionPopoverDivider`.",
   );
 
   globalConsoleSpy.mockRestore();
@@ -1871,7 +1871,7 @@ describe("when the renderButton prop is passed", () => {
         )}
       >
         <ActionPopoverItem onClick={jest.fn()}>foo</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     const menuButton = screen.getByRole("button");
@@ -1901,7 +1901,7 @@ describe("when the renderButton prop is passed", () => {
         )}
       >
         <ActionPopoverItem onClick={jest.fn()}>foo</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     const menuButton = screen.getByRole("button");
@@ -1925,20 +1925,20 @@ describe("When ActionPopoverMenu contains multiple disabled items", () => {
         <ActionPopoverItem>example item 4</ActionPopoverItem>
         <ActionPopoverItem>example item 5</ActionPopoverItem>
         <ActionPopoverItem disabled>example item 6</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 1" })
+      screen.getByRole("button", { name: "example item 1" }),
     ).toHaveFocus();
     await user.keyboard("{ArrowDown}");
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 4" })
+      screen.getByRole("button", { name: "example item 4" }),
     ).toHaveFocus();
   });
 
@@ -1953,26 +1953,26 @@ describe("When ActionPopoverMenu contains multiple disabled items", () => {
         <ActionPopoverItem>example item 4</ActionPopoverItem>
         <ActionPopoverItem>example item 5</ActionPopoverItem>
         <ActionPopoverItem disabled>example item 6</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 1" })
+      screen.getByRole("button", { name: "example item 1" }),
     ).toHaveFocus();
     await user.keyboard("{ArrowDown}");
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 4" })
+      screen.getByRole("button", { name: "example item 4" }),
     ).toHaveFocus();
     await user.keyboard("{ArrowUp}");
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 1" })
+      screen.getByRole("button", { name: "example item 1" }),
     ).toHaveFocus();
   });
 
@@ -1987,32 +1987,32 @@ describe("When ActionPopoverMenu contains multiple disabled items", () => {
         <ActionPopoverItem>example item 4</ActionPopoverItem>
         <ActionPopoverItem>example item 5</ActionPopoverItem>
         <ActionPopoverItem disabled>example item 6</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 2" })
+      screen.getByRole("button", { name: "example item 2" }),
     ).toHaveFocus();
     await user.keyboard("{ArrowDown}");
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 4" })
+      screen.getByRole("button", { name: "example item 4" }),
     ).toHaveFocus();
     await user.keyboard("{ArrowDown}");
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 5" })
+      screen.getByRole("button", { name: "example item 5" }),
     ).toHaveFocus();
     await user.keyboard("{Home}");
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 2" })
+      screen.getByRole("button", { name: "example item 2" }),
     ).toHaveFocus();
   });
 
@@ -2027,20 +2027,20 @@ describe("When ActionPopoverMenu contains multiple disabled items", () => {
         <ActionPopoverItem>example item 4</ActionPopoverItem>
         <ActionPopoverItem>example item 5</ActionPopoverItem>
         <ActionPopoverItem disabled>example item 6</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 2" })
+      screen.getByRole("button", { name: "example item 2" }),
     ).toHaveFocus();
     await user.keyboard("{End}");
     jest.runOnlyPendingTimers();
 
     expect(
-      screen.getByRole("button", { name: "example item 5" })
+      screen.getByRole("button", { name: "example item 5" }),
     ).toHaveFocus();
   });
 });
@@ -2067,26 +2067,31 @@ describe("padding checks on 'StyledMenuItemInnerText'", () => {
           <ActionPopoverItem>example item 2</ActionPopoverItem>
           <ActionPopoverItem>example item 3</ActionPopoverItem>
           <ActionPopoverItem>example item 4</ActionPopoverItem>
-        </ActionPopover>
+        </ActionPopover>,
       );
 
       await user.click(screen.getByRole("button"));
 
       expect(screen.getByText("example item 1")).toHaveStyleRule(
         "padding-left",
-        "var(--spacing100)"
+        "var(--spacing100)",
       );
       expect(screen.getByText("example item 1")).toHaveStyleRule(
         "padding-right",
-        "var(--spacing100)"
+        "var(--spacing100)",
       );
-    }
+    },
   );
 
   it.each([
     ["var(--spacing400)", "var(--spacing100)", "left", "left"],
     ["var(--spacing100)", "var(--spacing400)", "right", "right"],
-  ] as [string, string, ActionPopoverProps["horizontalAlignment"], ActionPopoverProps["submenuPosition"]][])(
+  ] as [
+    string,
+    string,
+    ActionPopoverProps["horizontalAlignment"],
+    ActionPopoverProps["submenuPosition"],
+  ][])(
     "should render a menu item with no icon or submenu with padding-left as %s and padding-right as %s when horizontalAlignment is %s, submenuPosition is %s and some other menu items have a submenu",
     async (paddingLeft, paddingRight, alignment, position) => {
       const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -2118,26 +2123,31 @@ describe("padding checks on 'StyledMenuItemInnerText'", () => {
           >
             example item 4
           </ActionPopoverItem>
-        </ActionPopover>
+        </ActionPopover>,
       );
 
       await user.click(screen.getByRole("button"));
 
       expect(screen.getByText("example item 1")).toHaveStyleRule(
         "padding-left",
-        paddingLeft
+        paddingLeft,
       );
       expect(screen.getByText("example item 1")).toHaveStyleRule(
         "padding-right",
-        paddingRight
+        paddingRight,
       );
-    }
+    },
   );
 
   it.each([
     ["var(--spacing600)", "var(--spacing100)", "left", "left"],
     ["var(--spacing100)", "var(--spacing600)", "right", "right"],
-  ] as [string, string, ActionPopoverProps["horizontalAlignment"], ActionPopoverProps["submenuPosition"]][])(
+  ] as [
+    string,
+    string,
+    ActionPopoverProps["horizontalAlignment"],
+    ActionPopoverProps["submenuPosition"],
+  ][])(
     "should render a menu item with a submenu but no icon with padding-left as %s and padding-right as %s when horizontalAlignment is %s, submenuPosition is %s and some other menu items have an icon",
     async (paddingLeft, paddingRight, alignment, position) => {
       const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -2169,26 +2179,31 @@ describe("padding checks on 'StyledMenuItemInnerText'", () => {
           >
             example item 4
           </ActionPopoverItem>
-        </ActionPopover>
+        </ActionPopover>,
       );
 
       await user.click(screen.getByRole("button"));
 
       expect(screen.getByText("example item 1")).toHaveStyleRule(
         "padding-left",
-        paddingLeft
+        paddingLeft,
       );
       expect(screen.getByText("example item 1")).toHaveStyleRule(
         "padding-right",
-        paddingRight
+        paddingRight,
       );
-    }
+    },
   );
 
   it.each([
     ["var(--spacing900)", "var(--spacing100)", "left", "left"],
     ["var(--spacing100)", "var(--spacing900)", "right", "right"],
-  ] as [string, string, ActionPopoverProps["horizontalAlignment"], ActionPopoverProps["submenuPosition"]][])(
+  ] as [
+    string,
+    string,
+    ActionPopoverProps["horizontalAlignment"],
+    ActionPopoverProps["submenuPosition"],
+  ][])(
     "should render a menu item with no icon or submenu with padding-left as %s and padding-right as %s when horizontalAlignment is %s submenuPosition is %s and both icons and submenus exist elsewhere in the menu",
     async (paddingLeft, paddingRight, alignment, position) => {
       const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -2220,20 +2235,20 @@ describe("padding checks on 'StyledMenuItemInnerText'", () => {
           >
             example item 4
           </ActionPopoverItem>
-        </ActionPopover>
+        </ActionPopover>,
       );
 
       await user.click(screen.getByRole("button"));
 
       expect(screen.getByText("example item 1")).toHaveStyleRule(
         "padding-left",
-        paddingLeft
+        paddingLeft,
       );
       expect(screen.getByText("example item 1")).toHaveStyleRule(
         "padding-right",
-        paddingRight
+        paddingRight,
       );
-    }
+    },
   );
 
   it.each([
@@ -2264,20 +2279,20 @@ describe("padding checks on 'StyledMenuItemInnerText'", () => {
           </ActionPopoverItem>
           <ActionPopoverItem>example item 3</ActionPopoverItem>
           <ActionPopoverItem>example item 4</ActionPopoverItem>
-        </ActionPopover>
+        </ActionPopover>,
       );
 
       await user.click(screen.getByRole("button"));
 
       expect(screen.getByText("submenu item 1")).toHaveStyleRule(
         "padding-left",
-        "var(--spacing000)"
+        "var(--spacing000)",
       );
       expect(screen.getByText("submenu item 1")).toHaveStyleRule(
         "padding-right",
-        "var(--spacing000)"
+        "var(--spacing000)",
       );
-    }
+    },
   );
 });
 
@@ -2301,15 +2316,15 @@ describe("justify-content checks on 'StyledMenuItem'", () => {
           <ActionPopoverItem>example item 2</ActionPopoverItem>
           <ActionPopoverItem>example item 3</ActionPopoverItem>
           <ActionPopoverItem>example item 4</ActionPopoverItem>
-        </ActionPopover>
+        </ActionPopover>,
       );
 
       await user.click(screen.getByRole("button"));
 
       expect(
-        screen.getByRole("button", { name: "example item 1" })
+        screen.getByRole("button", { name: "example item 1" }),
       ).toHaveStyle({ justifyContent });
-    }
+    },
   );
 
   it("renders menu with justify-content space-between when horizontalAlignment is left, submenuPosition is right and any menu item has a submenu", async () => {
@@ -2330,7 +2345,7 @@ describe("justify-content checks on 'StyledMenuItem'", () => {
         <ActionPopoverItem>example item 2</ActionPopoverItem>
         <ActionPopoverItem>example item 3</ActionPopoverItem>
         <ActionPopoverItem>example item 4</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -2361,7 +2376,7 @@ describe("justify-content checks on 'StyledMenuItem'", () => {
         <ActionPopoverItem>example item 2</ActionPopoverItem>
         <ActionPopoverItem>example item 3</ActionPopoverItem>
         <ActionPopoverItem>example item 4</ActionPopoverItem>
-      </ActionPopover>
+      </ActionPopover>,
     );
 
     await user.click(screen.getByRole("button"));
diff --git a/src/components/action-popover/components.test-pw.tsx b/src/components/action-popover/components.test-pw.tsx
index 4a6af6541a..f4be664520 100644
--- a/src/components/action-popover/components.test-pw.tsx
+++ b/src/components/action-popover/components.test-pw.tsx
@@ -500,7 +500,7 @@ export const ActionPopoverMenuWithProps = ({ ...props }) => {
 };
 
 export const ActionPopoverPropsComponent = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -511,7 +511,7 @@ export const ActionPopoverPropsComponent = (
 };
 
 export const ActionPopoverPropsComponentWithFirstAndLastDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -527,7 +527,7 @@ export const ActionPopoverPropsComponentWithFirstAndLastDisabled = (
 };
 
 export const ActionPopoverPropsComponentWithOnlyFirstAndLastNotDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -543,7 +543,7 @@ export const ActionPopoverPropsComponentWithOnlyFirstAndLastNotDisabled = (
 };
 
 export const ActionPopoverPropsComponentWithOnlyFirstDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -559,7 +559,7 @@ export const ActionPopoverPropsComponentWithOnlyFirstDisabled = (
 };
 
 export const ActionPopoverPropsComponentWithOnlyLastDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -575,7 +575,7 @@ export const ActionPopoverPropsComponentWithOnlyLastDisabled = (
 };
 
 export const ActionPopoverPropsComponentWithSomeDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
@@ -591,7 +591,7 @@ export const ActionPopoverPropsComponentWithSomeDisabled = (
 };
 
 export const ActionPopoverPropsComponentAllDisabled = (
-  props: Partial<ActionPopoverProps>
+  props: Partial<ActionPopoverProps>,
 ) => {
   return (
     <ActionPopover {...props}>
diff --git a/src/components/advanced-color-picker/advanced-color-picker.component.tsx b/src/components/advanced-color-picker/advanced-color-picker.component.tsx
index 3cfaf0e2c4..0536c6a62a 100644
--- a/src/components/advanced-color-picker/advanced-color-picker.component.tsx
+++ b/src/components/advanced-color-picker/advanced-color-picker.component.tsx
@@ -75,10 +75,8 @@ export const AdvancedColorPicker = ({
 }: AdvancedColorPickerProps) => {
   const [dialogOpen, setDialogOpen] = useState<boolean>();
   const currentColor = selectedColor || defaultColor;
-  const [
-    selectedColorRef,
-    setSelectedColorRef,
-  ] = useState<HTMLInputElement | null>(null);
+  const [selectedColorRef, setSelectedColorRef] =
+    useState<HTMLInputElement | null>(null);
 
   const descriptionId = useRef(guid());
   const l = useLocale();
@@ -102,7 +100,7 @@ export const AdvancedColorPicker = ({
 
   const currentSelectedColor = () => {
     const returnedColor = availableColors.find(
-      (color) => color.value === currentColor
+      (color) => color.value === currentColor,
     )?.label as string;
 
     return returnedColor || currentColor;
@@ -137,7 +135,7 @@ export const AdvancedColorPicker = ({
         }
       }
     },
-    [selectedColorRef]
+    [selectedColorRef],
   );
 
   const handleOnOpen = useCallback(
@@ -148,7 +146,7 @@ export const AdvancedColorPicker = ({
         onOpen(e);
       }
     },
-    [onOpen]
+    [onOpen],
   );
 
   const handleOnClose = useCallback(
@@ -159,7 +157,7 @@ export const AdvancedColorPicker = ({
         onClose(e);
       }
     },
-    [onClose]
+    [onClose],
   );
 
   const handleOnChange = useCallback(
@@ -176,7 +174,7 @@ export const AdvancedColorPicker = ({
         onChange(e);
       }
     },
-    [onChange, colors]
+    [onChange, colors],
   );
 
   const handleOnKeyDown = useCallback(
@@ -186,7 +184,7 @@ export const AdvancedColorPicker = ({
         handleOnOpen(e);
       }
     },
-    [handleOnOpen]
+    [handleOnOpen],
   );
 
   const handleColorOnKeyDown = useCallback(
@@ -196,7 +194,7 @@ export const AdvancedColorPicker = ({
         handleOnClose(e);
       }
     },
-    [handleOnClose]
+    [handleOnClose],
   );
 
   const handleOnBlur = useCallback(
@@ -205,13 +203,13 @@ export const AdvancedColorPicker = ({
         onBlur(e);
       }
     },
-    [onBlur]
+    [onBlur],
   );
 
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate(
-      "Uncontrolled behaviour in `Advanced Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+      "Uncontrolled behaviour in `Advanced Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
     );
   }
 
@@ -236,7 +234,7 @@ export const AdvancedColorPicker = ({
       >
         <Dt>
           {l.advancedColorPicker.currentColorDescriptionTerm(
-            currentSelectedColor()
+            currentSelectedColor(),
           )}
         </Dt>
         <Dd>
diff --git a/src/components/advanced-color-picker/advanced-color-picker.pw.tsx b/src/components/advanced-color-picker/advanced-color-picker.pw.tsx
index 74154473a5..9f80807784 100644
--- a/src/components/advanced-color-picker/advanced-color-picker.pw.tsx
+++ b/src/components/advanced-color-picker/advanced-color-picker.pw.tsx
@@ -26,11 +26,11 @@ test.describe("when focused", () => {
     await icon.focus();
     await expect(closeIconButton(page)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(closeIconButton(page)).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -49,355 +49,344 @@ test.describe("when focused", () => {
     await icon.focus();
     await expect(closeIconButton(page)).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 });
 
-test.describe(
-  "should render AdvancedColorPicker component and check functionality",
-  () => {
-    ([
+test.describe("should render AdvancedColorPicker component and check functionality", () => {
+  (
+    [
       ["ArrowUp", 2],
       ["ArrowLeft", 6],
       ["ArrowRight", 8],
-    ] as [string, number][]).forEach(([key, index]) => {
-      test(`should use ${key} key and move selection`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<AdvancedColorPickerCustom />);
-
-        const picker = simpleColorPickerInput(page, 7);
-        await picker.press(key);
-        await expect(simpleColorPickerInput(page, index)).toHaveAttribute(
-          "aria-checked",
-          "true"
-        );
-      });
-    });
-
-    test("should move selection down using downarrow", async ({
+    ] as [string, number][]
+  ).forEach(([key, index]) => {
+    test(`should use ${key} key and move selection`, async ({
       mount,
       page,
     }) => {
       await mount(<AdvancedColorPickerCustom />);
 
       const picker = simpleColorPickerInput(page, 7);
-      await picker.press("ArrowUp");
-      const newPicker = simpleColorPickerInput(page, 2);
-      await newPicker.press("ArrowDown");
-      await expect(simpleColorPickerInput(page, 7)).toHaveAttribute(
+      await picker.press(key);
+      await expect(simpleColorPickerInput(page, index)).toHaveAttribute(
         "aria-checked",
-        "true"
+        "true",
       );
     });
+  });
 
-    test("should regain focus on color after second tab", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AdvancedColorPickerCustom />);
+  test("should move selection down using downarrow", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AdvancedColorPickerCustom />);
 
-      const picker = simpleColorPickerInput(page, 7);
-      const icon = closeIconButton(page);
-      await picker.focus();
-      await picker.press("Tab");
-      await icon.press("Tab");
+    const picker = simpleColorPickerInput(page, 7);
+    await picker.press("ArrowUp");
+    const newPicker = simpleColorPickerInput(page, 2);
+    await newPicker.press("ArrowDown");
+    await expect(simpleColorPickerInput(page, 7)).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  });
 
-      await expect(simpleColorPickerInput(page, 7)).toBeFocused();
-    });
+  test("should regain focus on color after second tab", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AdvancedColorPickerCustom />);
 
-    (["Space", "Enter"] as const).forEach((key) => {
-      test(`should close AdvancedColorPicker using ${key} on selected color`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<AdvancedColorPickerCustom />);
-
-        const picker = simpleColorPickerInput(page, 7);
-        await picker.press(key);
-        await expect(simpleColorPickerComponent(page)).not.toBeVisible();
-      });
-    });
+    const picker = simpleColorPickerInput(page, 7);
+    const icon = closeIconButton(page);
+    await picker.focus();
+    await picker.press("Tab");
+    await icon.press("Tab");
 
-    [1, 2, 3].forEach((index) => {
-      test(`should confirm dedicated ${index} color was selected`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<AdvancedColorPickerCustom />);
-
-        const input = simpleColorPickerInput(page, index);
-        await input.click();
-        await expect(simpleColorPickerInput(page, index)).toHaveAttribute(
-          "aria-checked",
-          "true"
-        );
-      });
-    });
-  }
-);
-
-test.describe(
-  "should render AdvancedColorPicker component and check props",
-  () => {
-    const testPropValue = CHARACTERS.STANDARD;
-    const colors = [
-      { value: "#111222", label: "superBlack" },
-      { value: "#333555", label: "black" },
-    ];
-
-    test("should render AdvancedColorPicker with aria-describedby prop", async ({
+    await expect(simpleColorPickerInput(page, 7)).toBeFocused();
+  });
+
+  (["Space", "Enter"] as const).forEach((key) => {
+    test(`should close AdvancedColorPicker using ${key} on selected color`, async ({
       mount,
       page,
     }) => {
-      await mount(
-        <AdvancedColorPickerCustom aria-describedby={testPropValue} />
-      );
+      await mount(<AdvancedColorPickerCustom />);
 
-      await expect(advancedColorPickerParent(page)).toHaveAttribute(
-        "aria-describedby",
-        testPropValue
-      );
+      const picker = simpleColorPickerInput(page, 7);
+      await picker.press(key);
+      await expect(simpleColorPickerComponent(page)).not.toBeVisible();
     });
+  });
 
-    test("should render AdvancedColorPicker with aria-label prop", async ({
+  [1, 2, 3].forEach((index) => {
+    test(`should confirm dedicated ${index} color was selected`, async ({
       mount,
       page,
     }) => {
-      await mount(<AdvancedColorPickerCustom aria-label={testPropValue} />);
+      await mount(<AdvancedColorPickerCustom />);
 
-      await expect(advancedColorPickerParent(page)).toHaveAttribute(
-        "aria-label",
-        testPropValue
+      const input = simpleColorPickerInput(page, index);
+      await input.click();
+      await expect(simpleColorPickerInput(page, index)).toHaveAttribute(
+        "aria-checked",
+        "true",
       );
     });
+  });
+});
 
-    test("should render AdvancedColorPicker open button with aria-label prop", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AdvancedColorPickerCustom aria-label="Change colour" />);
+test.describe("should render AdvancedColorPicker component and check props", () => {
+  const testPropValue = CHARACTERS.STANDARD;
+  const colors = [
+    { value: "#111222", label: "superBlack" },
+    { value: "#333555", label: "black" },
+  ];
 
-      await expect(advancedColorPickerCell(page)).toHaveAttribute(
-        "aria-label",
-        "Change colour"
-      );
-    });
+  test("should render AdvancedColorPicker with aria-describedby prop", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AdvancedColorPickerCustom aria-describedby={testPropValue} />);
 
-    test("should render AdvancedColorPicker with aria-labelledby prop", async ({
-      mount,
-      page,
-    }) => {
-      await mount(
-        <AdvancedColorPickerCustom aria-labelledby={testPropValue} />
-      );
+    await expect(advancedColorPickerParent(page)).toHaveAttribute(
+      "aria-describedby",
+      testPropValue,
+    );
+  });
 
-      await expect(advancedColorPickerParent(page)).toHaveAttribute(
-        "aria-labelledby",
-        testPropValue
-      );
-    });
+  test("should render AdvancedColorPicker with aria-label prop", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AdvancedColorPickerCustom aria-label={testPropValue} />);
 
-    test("should render AdvancedColorPicker with role prop", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AdvancedColorPickerCustom role={testPropValue} />);
+    await expect(advancedColorPickerParent(page)).toHaveAttribute(
+      "aria-label",
+      testPropValue,
+    );
+  });
 
-      await expect(advancedColorPickerParent(page)).toHaveAttribute(
-        "role",
-        testPropValue
-      );
-    });
+  test("should render AdvancedColorPicker open button with aria-label prop", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AdvancedColorPickerCustom aria-label="Change colour" />);
 
-    test("should render AdvancedColorPicker with name prop passed to color", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AdvancedColorPickerCustom name="playwrightTestColorName" />);
+    await expect(advancedColorPickerCell(page)).toHaveAttribute(
+      "aria-label",
+      "Change colour",
+    );
+  });
 
-      await expect(simpleColorPickerInput(page, 6)).toHaveAttribute(
-        "name",
-        "playwrightTestColorName"
-      );
-    });
+  test("should render AdvancedColorPicker with aria-labelledby prop", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AdvancedColorPickerCustom aria-labelledby={testPropValue} />);
 
-    test("should render AdvancedColorPicker with availableColors prop", async ({
-      mount,
-      page,
-    }) => {
-      await mount(
-        <AdvancedColorPickerCustom
-          availableColors={colors}
-          selectedColor="#111222"
-        />
-      );
+    await expect(advancedColorPickerParent(page)).toHaveAttribute(
+      "aria-labelledby",
+      testPropValue,
+    );
+  });
 
-      await expect(simpleColorPickerInput(page, 0)).toHaveAttribute(
-        "value",
-        colors[0].value
-      );
-      await expect(simpleColorPickerInput(page, 0)).toHaveAttribute(
-        "aria-label",
-        colors[0].label
-      );
-      await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
-        "value",
-        colors[1].value
-      );
-      await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
-        "aria-label",
-        colors[1].label
-      );
-    });
+  test("should render AdvancedColorPicker with role prop", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AdvancedColorPickerCustom role={testPropValue} />);
 
-    test("should render AdvancedColorPicker with selectedColor prop", async ({
-      mount,
-      page,
-    }) => {
-      await mount(
-        <AdvancedColorPickerCustom
-          availableColors={colors}
-          selectedColor="#333555"
-        />
-      );
+    await expect(advancedColorPickerParent(page)).toHaveAttribute(
+      "role",
+      testPropValue,
+    );
+  });
 
-      await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
-        "value",
-        colors[1].value
-      );
-      await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
-        "aria-label",
-        colors[1].label
-      );
-    });
+  test("should render AdvancedColorPicker with name prop passed to color", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AdvancedColorPickerCustom name="playwrightTestColorName" />);
 
-    test("should render AdvancedColorPicker with defaultColor prop", async ({
-      mount,
-      page,
-    }) => {
-      await mount(
-        <AdvancedColorPickerCustom
-          availableColors={colors}
-          defaultColor="#111222"
-        />
-      );
+    await expect(simpleColorPickerInput(page, 6)).toHaveAttribute(
+      "name",
+      "playwrightTestColorName",
+    );
+  });
 
-      await expect(advancedColorPickerPreview(page)).toHaveAttribute(
-        "color",
-        colors[0].value
-      );
-    });
+  test("should render AdvancedColorPicker with availableColors prop", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <AdvancedColorPickerCustom
+        availableColors={colors}
+        selectedColor="#111222"
+      />,
+    );
 
-    [true, false].forEach((bool) => {
-      test(`should render AdvancedColorPicker with open prop set to ${bool}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<AdvancedColorPickerCustom open={bool} />);
-
-        if (bool) {
-          await expect(advancedColorPickerParent(page)).toBeVisible();
-        } else {
-          await expect(advancedColorPickerParent(page)).not.toBeVisible();
-        }
-      });
-    });
+    await expect(simpleColorPickerInput(page, 0)).toHaveAttribute(
+      "value",
+      colors[0].value,
+    );
+    await expect(simpleColorPickerInput(page, 0)).toHaveAttribute(
+      "aria-label",
+      colors[0].label,
+    );
+    await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
+      "value",
+      colors[1].value,
+    );
+    await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
+      "aria-label",
+      colors[1].label,
+    );
+  });
 
-    test("should render AdvancedColorPicker with correct description when color is selected", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AdvancedColorPickerCustom />);
+  test("should render AdvancedColorPicker with selectedColor prop", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <AdvancedColorPickerCustom
+        availableColors={colors}
+        selectedColor="#333555"
+      />,
+    );
 
-      await expect(currentColorDescription(page)).toContainText(
-        "Current colour assigned: orchid"
-      );
-    });
-  }
-);
+    await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
+      "value",
+      colors[1].value,
+    );
+    await expect(simpleColorPickerInput(page, 1)).toHaveAttribute(
+      "aria-label",
+      colors[1].label,
+    );
+  });
 
-test.describe(
-  "should render AdvancedColorPicker component and check events",
-  () => {
-    test("should call onChange callback when a click event is triggered", async ({
-      mount,
-      page,
-    }) => {
-      let callbackCount = 0;
-      await mount(
-        <AdvancedColorPickerCustom
-          onChange={() => {
-            callbackCount += 1;
-          }}
-        />
-      );
+  test("should render AdvancedColorPicker with defaultColor prop", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <AdvancedColorPickerCustom
+        availableColors={colors}
+        defaultColor="#111222"
+      />,
+    );
 
-      const colorToPick = simpleColorPickerInput(page, 0);
-      await colorToPick.click();
-      expect(callbackCount).toBe(1);
-    });
+    await expect(advancedColorPickerPreview(page)).toHaveAttribute(
+      "color",
+      colors[0].value,
+    );
+  });
 
-    test("should call onOpen callback when a click event is triggered", async ({
+  [true, false].forEach((bool) => {
+    test(`should render AdvancedColorPicker with open prop set to ${bool}`, async ({
       mount,
       page,
     }) => {
-      let callbackCount = 0;
-      await mount(
-        <AdvancedColorPickerCustom
-          onOpen={() => {
-            callbackCount += 1;
-          }}
-        />
-      );
+      await mount(<AdvancedColorPickerCustom open={bool} />);
 
-      await closeIconButton(page).click();
-      const firstCell = advancedColorPickerCell(page);
-      await firstCell.click();
-      expect(callbackCount).toBe(1);
+      if (bool) {
+        await expect(advancedColorPickerParent(page)).toBeVisible();
+      } else {
+        await expect(advancedColorPickerParent(page)).not.toBeVisible();
+      }
     });
+  });
 
-    test("should call onClose callback when a click event is triggered", async ({
-      mount,
-      page,
-    }) => {
-      let callbackCount = 0;
-      await mount(
-        <AdvancedColorPickerCustom
-          onClose={() => {
-            callbackCount += 1;
-          }}
-        />
-      );
+  test("should render AdvancedColorPicker with correct description when color is selected", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AdvancedColorPickerCustom />);
 
-      const closeButton = closeIconButton(page);
-      await closeButton.click();
-      expect(callbackCount).toBe(1);
-    });
+    await expect(currentColorDescription(page)).toContainText(
+      "Current colour assigned: orchid",
+    );
+  });
+});
 
-    test("should not call onBlur callback when a blur event is triggered on another color", async ({
-      mount,
-      page,
-    }) => {
-      let callbackCount = 0;
-      await mount(
-        <AdvancedColorPickerCustom
-          onBlur={() => {
-            callbackCount += 1;
-          }}
-        />
-      );
+test.describe("should render AdvancedColorPicker component and check events", () => {
+  test("should call onChange callback when a click event is triggered", async ({
+    mount,
+    page,
+  }) => {
+    let callbackCount = 0;
+    await mount(
+      <AdvancedColorPickerCustom
+        onChange={() => {
+          callbackCount += 1;
+        }}
+      />,
+    );
 
-      const elementToFocus = simpleColorPickerInput(page, 7);
-      await elementToFocus.focus();
-      const elementToBlur = simpleColorPickerInput(page, 7);
-      await elementToBlur.blur();
-      expect(callbackCount).toBe(0);
-    });
-  }
-);
+    const colorToPick = simpleColorPickerInput(page, 0);
+    await colorToPick.click();
+    expect(callbackCount).toBe(1);
+  });
+
+  test("should call onOpen callback when a click event is triggered", async ({
+    mount,
+    page,
+  }) => {
+    let callbackCount = 0;
+    await mount(
+      <AdvancedColorPickerCustom
+        onOpen={() => {
+          callbackCount += 1;
+        }}
+      />,
+    );
+
+    await closeIconButton(page).click();
+    const firstCell = advancedColorPickerCell(page);
+    await firstCell.click();
+    expect(callbackCount).toBe(1);
+  });
+
+  test("should call onClose callback when a click event is triggered", async ({
+    mount,
+    page,
+  }) => {
+    let callbackCount = 0;
+    await mount(
+      <AdvancedColorPickerCustom
+        onClose={() => {
+          callbackCount += 1;
+        }}
+      />,
+    );
+
+    const closeButton = closeIconButton(page);
+    await closeButton.click();
+    expect(callbackCount).toBe(1);
+  });
+
+  test("should not call onBlur callback when a blur event is triggered on another color", async ({
+    mount,
+    page,
+  }) => {
+    let callbackCount = 0;
+    await mount(
+      <AdvancedColorPickerCustom
+        onBlur={() => {
+          callbackCount += 1;
+        }}
+      />,
+    );
+
+    const elementToFocus = simpleColorPickerInput(page, 7);
+    await elementToFocus.focus();
+    const elementToBlur = simpleColorPickerInput(page, 7);
+    await elementToBlur.blur();
+    expect(callbackCount).toBe(0);
+  });
+});
 
 test.describe("Accessibility tests for AdvancedColorPicker component", () => {
   test("should pass accessibility tests for AdvancedColorPicker default", async ({
@@ -417,6 +406,6 @@ test("color picker preview should have the expected border radius styling", asyn
   await mount(<AdvancedColorPickerCustom />);
   await expect(advancedColorPickerPreview(page)).toHaveCSS(
     "border-radius",
-    "4px"
+    "4px",
   );
 });
diff --git a/src/components/advanced-color-picker/advanced-color-picker.test.tsx b/src/components/advanced-color-picker/advanced-color-picker.test.tsx
index 7768c19451..98870e0f70 100644
--- a/src/components/advanced-color-picker/advanced-color-picker.test.tsx
+++ b/src/components/advanced-color-picker/advanced-color-picker.test.tsx
@@ -44,7 +44,7 @@ afterAll(() => {
 
 testStyledSystemMarginRTL(
   (props) => <ControlledColorPicker name="advancedPicker" open {...props} />,
-  () => screen.getByTestId("advanced-color-picker-wrapper")
+  () => screen.getByTestId("advanced-color-picker-wrapper"),
 );
 
 test("should display deprecation warning once when rendered as uncontrolled", () => {
@@ -68,11 +68,11 @@ test("should display deprecation warning once when rendered as uncontrolled", ()
         { value: "#AEECD6", label: "mint" },
       ]}
       defaultColor="#EBAEDE"
-    />
+    />,
   );
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Advanced Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Advanced Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
 
@@ -113,14 +113,14 @@ test.each(["a", "b", "q", "t", "x", "4", "0"])(
     screen.getByRole("button", { name: "Change colour" }).focus();
     await user.keyboard(key);
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-  }
+  },
 );
 
 test("the accessible description of the button includes the name of the currently selected color when none is selected", () => {
   render(<ControlledColorPicker selectedColor="#EBAEDE" />);
 
   expect(
-    screen.getByRole("button", { name: "Change colour" })
+    screen.getByRole("button", { name: "Change colour" }),
   ).toHaveAccessibleDescription("Current colour assigned: orchid");
 });
 
@@ -147,9 +147,9 @@ test.each([
     await user.click(screen.getByRole("button", { name: "Close" }));
 
     expect(
-      screen.getByRole("button", { name: "Change colour" })
+      screen.getByRole("button", { name: "Change colour" }),
     ).toHaveAccessibleDescription(`Current colour assigned: ${label}`);
-  }
+  },
 );
 
 test("the button has the correct background color matching the initially-selected color", () => {
@@ -184,7 +184,7 @@ test.each([
     expect(screen.getByRole("button", { name: "Change colour" })).toHaveStyle({
       backgroundColor: value,
     });
-  }
+  },
 );
 
 test("the button has the correct background image after the user selects the transparent color", async () => {
@@ -242,7 +242,7 @@ test.each([
     await waitFor(() => {
       expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
     });
-  }
+  },
 );
 
 test.each(["a", "b", "q", "t", "x", "4", "0"])(
@@ -260,7 +260,7 @@ test.each(["a", "b", "q", "t", "x", "4", "0"])(
     jest.runAllTimers();
 
     expect(screen.getByRole("dialog")).toBeVisible();
-  }
+  },
 );
 
 test("tabbing from the close button should focus the selected color input", async () => {
@@ -319,7 +319,7 @@ test("when a color input is clicked, it triggers the onChange callback", async (
   const onChange = jest.fn();
 
   render(
-    <ControlledColorPicker selectedColor="#EBAEDE" open onChange={onChange} />
+    <ControlledColorPicker selectedColor="#EBAEDE" open onChange={onChange} />,
   );
 
   expect(onChange).not.toHaveBeenCalled();
diff --git a/src/components/alert/alert.pw.tsx b/src/components/alert/alert.pw.tsx
index 71b68e6973..20b994ccd6 100644
--- a/src/components/alert/alert.pw.tsx
+++ b/src/components/alert/alert.pw.tsx
@@ -60,7 +60,7 @@ test.describe("should render Alert component", () => {
     await mount(
       <AlertComponent title="title" disableEscKey>
         Alert
-      </AlertComponent>
+      </AlertComponent>,
     );
 
     await checkDialogIsInDOM(page);
@@ -103,7 +103,7 @@ test.describe("should render Alert component", () => {
       await mount(
         <AlertComponent title="title" height={`${height}px`}>
           Alert
-        </AlertComponent>
+        </AlertComponent>,
       );
 
       const viewportHeight = viewport?.height || 0;
@@ -128,7 +128,7 @@ test.describe("should render Alert component", () => {
       await mount(
         <AlertComponent title="title" size={size}>
           Alert
-        </AlertComponent>
+        </AlertComponent>,
       );
 
       const alertElement = alertDialog(page);
@@ -146,7 +146,7 @@ test.describe("should render Alert component", () => {
         onCancel={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const cross = alertCrossIcon(page);
diff --git a/src/components/alert/alert.test.tsx b/src/components/alert/alert.test.tsx
index 360510b080..ca9432280a 100644
--- a/src/components/alert/alert.test.tsx
+++ b/src/components/alert/alert.test.tsx
@@ -15,7 +15,7 @@ test("include correct component, element and role data tags", () => {
         "data-element": "foo",
         "data-role": "bar",
       }}
-    />
+    />,
   );
 
   const alert = screen.getByRole("alertdialog", { name: "Alert title" });
@@ -39,7 +39,7 @@ test("has the expected border radius styling", () => {
         "data-element": "foo",
         "data-role": "bar",
       }}
-    />
+    />,
   );
 
   const dialog = screen.getByRole("alertdialog", { name: "Alert title" });
@@ -60,7 +60,7 @@ test("should allow custom data props on close button to be assigned", () => {
         "data-element": "foo",
         "data-role": "bar",
       }}
-    />
+    />,
   );
 
   const closeButton = screen.getByRole("button", { name: /close/i });
diff --git a/src/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.tsx b/src/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.tsx
index 4b723e9955..686a30bb27 100644
--- a/src/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.tsx
+++ b/src/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.tsx
@@ -31,7 +31,7 @@ const AnchorNavigationItem = React.forwardRef<
       tabIndex,
       isSelected,
     }: AnchorNavigationItemProps,
-    ref
+    ref,
   ) => (
     <StyledNavigationItem isSelected={isSelected}>
       <a
@@ -45,7 +45,7 @@ const AnchorNavigationItem = React.forwardRef<
         {children}
       </a>
     </StyledNavigationItem>
-  )
+  ),
 );
 
 AnchorNavigationItem.displayName = "AnchorNavigationItem";
diff --git a/src/components/anchor-navigation/anchor-navigation.component.tsx b/src/components/anchor-navigation/anchor-navigation.component.tsx
index e553ecb475..b07b775a5f 100644
--- a/src/components/anchor-navigation/anchor-navigation.component.tsx
+++ b/src/components/anchor-navigation/anchor-navigation.component.tsx
@@ -42,12 +42,12 @@ const AnchorNavigation = ({
 }: AnchorNavigationProps): JSX.Element => {
   invariant(
     isFragment(stickyNavigation),
-    "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment."
+    "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.",
   );
 
   const hasCorrectItemStructure = useMemo(() => {
     const incorrectChild = React.Children.toArray(
-      stickyNavigation.props.children
+      stickyNavigation.props.children,
     ).find((child: React.ReactNode) => {
       return (
         !React.isValidElement(child) ||
@@ -61,7 +61,7 @@ const AnchorNavigation = ({
 
   invariant(
     hasCorrectItemStructure,
-    `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${AnchorNavigationItem.displayName}\``
+    `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${AnchorNavigationItem.displayName}\``,
   );
 
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -73,9 +73,9 @@ const AnchorNavigation = ({
         child: React.ReactElement<
           AnchorNavigationItemProps,
           typeof AnchorNavigationItem
-        >
-      ) => child.props.target
-    )
+        >,
+      ) => child.props.target,
+    ),
   );
 
   const contentRef = useRef<HTMLDivElement>(null);
@@ -98,7 +98,7 @@ const AnchorNavigation = ({
       ])
       .filter(
         (offsetWithIndex): offsetWithIndex is [number, number] =>
-          offsetWithIndex[1] !== undefined
+          offsetWithIndex[1] !== undefined,
       );
 
     const { top: navTopOffset } = navigationRef.current.getBoundingClientRect();
@@ -113,7 +113,7 @@ const AnchorNavigation = ({
           ? index
           : currentTopIndex;
       },
-      offsetsWithIndexes[0][0]
+      offsetsWithIndexes[0][0],
     );
 
     setSelectedIndex(indexOfSmallestNegativeTopOffset);
@@ -134,7 +134,7 @@ const AnchorNavigation = ({
           }, SCROLL_THROTTLE + 50);
         }
       }, SCROLL_THROTTLE),
-    [setSelectedAnchorBasedOnScroll]
+    [setSelectedAnchorBasedOnScroll],
   );
 
   useEffect(() => {
@@ -181,7 +181,7 @@ const AnchorNavigation = ({
 
   const handleClick = (
     event: React.MouseEvent<HTMLAnchorElement>,
-    index: number
+    index: number,
   ): void => {
     event.preventDefault();
     scrollToSection(index);
@@ -189,7 +189,7 @@ const AnchorNavigation = ({
 
   const handleKeyDown = (
     event: React.KeyboardEvent<HTMLAnchorElement>,
-    index: number
+    index: number,
   ): void => {
     if (Event.isEnterKey(event)) {
       scrollToSection(index);
@@ -215,7 +215,7 @@ const AnchorNavigation = ({
               handleClick(event, index),
             onKeyDown: (event: React.KeyboardEvent<HTMLAnchorElement>) =>
               handleKeyDown(event, index),
-          })
+          }),
         )}
       </StyledNavigation>
       <StyledContent>{children}</StyledContent>
diff --git a/src/components/anchor-navigation/anchor-navigation.pw.tsx b/src/components/anchor-navigation/anchor-navigation.pw.tsx
index acfc736b9e..f9f87a950f 100644
--- a/src/components/anchor-navigation/anchor-navigation.pw.tsx
+++ b/src/components/anchor-navigation/anchor-navigation.pw.tsx
@@ -31,7 +31,7 @@ test.describe("Should render AnchorNavigation component", () => {
 
       await anchorNavigationStickyNavigation(page, sectionIndex).click();
       await expect(
-        anchorNavigationStickyMainPage(page, sectionName)
+        anchorNavigationStickyMainPage(page, sectionName),
       ).toBeVisible();
     });
   });
@@ -49,7 +49,7 @@ test.describe("Should render AnchorNavigation component", () => {
       await anchorNavigationStickyNavigation(page, sectionIndex).click();
       await anchorNavigationStickyMainPage(page, sectionName).focus();
       await expect(
-        anchorNavigationStickyMainPage(page, sectionName)
+        anchorNavigationStickyMainPage(page, sectionName),
       ).toBeVisible();
     });
   });
@@ -68,7 +68,7 @@ test.describe("When focused", () => {
 
     await expect(anchorNavigationItem(page, 0)).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 
@@ -83,12 +83,12 @@ test.describe("When focused", () => {
     await anchorNavItem.focus();
     await expect(anchorNavItem).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
 
     await expect(anchorNavItem).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 });
@@ -102,23 +102,23 @@ test.describe("Rounded corners", () => {
 
     await expect(anchorNavigationItem(page, 0)).toHaveCSS(
       "border-radius",
-      "0px 8px 8px 0px"
+      "0px 8px 8px 0px",
     );
     await expect(anchorNavigationItem(page, 1)).toHaveCSS(
       "border-radius",
-      "0px 8px 8px 0px"
+      "0px 8px 8px 0px",
     );
     await expect(anchorNavigationItem(page, 2)).toHaveCSS(
       "border-radius",
-      "0px 8px 8px 0px"
+      "0px 8px 8px 0px",
     );
     await expect(anchorNavigationItem(page, 3)).toHaveCSS(
       "border-radius",
-      "0px 8px 8px 0px"
+      "0px 8px 8px 0px",
     );
     await expect(anchorNavigationItem(page, 4)).toHaveCSS(
       "border-radius",
-      "0px 8px 8px 0px"
+      "0px 8px 8px 0px",
     );
   });
 });
diff --git a/src/components/anchor-navigation/anchor-navigation.test.tsx b/src/components/anchor-navigation/anchor-navigation.test.tsx
index 518c3e9959..22fc55b2a0 100644
--- a/src/components/anchor-navigation/anchor-navigation.test.tsx
+++ b/src/components/anchor-navigation/anchor-navigation.test.tsx
@@ -56,7 +56,7 @@ beforeAll(() => {
     .fn()
     .mockImplementation(function mockView(
       this: HTMLDivElement,
-      options: ScrollIntoViewOptions
+      options: ScrollIntoViewOptions,
     ) {
       return { element: this, options };
     });
@@ -78,11 +78,11 @@ test("has proper data attributes applied to elements", () => {
   render(<MockComponent />);
   expect(screen.getByTestId("test-component")).toHaveAttribute(
     "data-component",
-    "anchor-navigation"
+    "anchor-navigation",
   );
   expect(screen.getByRole("list")).toHaveAttribute(
     "data-element",
-    "anchor-sticky-navigation"
+    "anchor-sticky-navigation",
   );
 
   const anchorNavigationLinks = screen.getAllByRole("link");
@@ -108,12 +108,12 @@ test("when navigation item is clicked, the item is selected and the section cont
   expect(selectedItem).toHaveStyleRule(
     "background-color",
     "var(--colorsActionMajorYang100)",
-    { modifier: "& a" }
+    { modifier: "& a" },
   );
   expect(selectedItem).toHaveStyleRule(
     "border-left-color",
     "var(--colorsActionMajor500)",
-    { modifier: "& a" }
+    { modifier: "& a" },
   );
   expect(screen.getByTestId("section-2")).toHaveFocus();
 });
@@ -134,12 +134,12 @@ test("when Enter is pressed on a navigation item, the item is selected and the s
   expect(selectedItem).toHaveStyleRule(
     "background-color",
     "var(--colorsActionMajorYang100)",
-    { modifier: "& a" }
+    { modifier: "& a" },
   );
   expect(selectedItem).toHaveStyleRule(
     "border-left-color",
     "var(--colorsActionMajor500)",
-    { modifier: "& a" }
+    { modifier: "& a" },
   );
   expect(screen.getByTestId("section-2")).toHaveFocus();
 });
@@ -173,12 +173,12 @@ test("does nothing if a key other than tab or enter is pressed", async () => {
   expect(originallySelectedItem).toHaveStyleRule(
     "background-color",
     "var(--colorsActionMajorYang100)",
-    { modifier: "& a" }
+    { modifier: "& a" },
   );
   expect(originallySelectedItem).toHaveStyleRule(
     "border-left-color",
     "var(--colorsActionMajor500)",
-    { modifier: "& a" }
+    { modifier: "& a" },
   );
 });
 
@@ -196,21 +196,21 @@ test.each([
     const topEdgeOffsets = [400, 800, 1200, 1600, 2000];
     const SECTION_VISIBILITY_OFFSET = 200;
     const sections = [1, 2, 3].map((sectionNumber) =>
-      screen.getByTestId(`section-${sectionNumber}`)
+      screen.getByTestId(`section-${sectionNumber}`),
     );
 
     sections.forEach((section, index) => {
       jest
         .spyOn(section, "getBoundingClientRect")
         .mockImplementation(
-          () => ({ top: topEdgeOffsets[index] - scrollPosition } as DOMRect)
+          () => ({ top: topEdgeOffsets[index] - scrollPosition }) as DOMRect,
         );
     });
 
     jest
       .spyOn(screen.getByRole("list"), "getBoundingClientRect")
       .mockImplementation(
-        () => ({ top: SECTION_VISIBILITY_OFFSET } as DOMRect)
+        () => ({ top: SECTION_VISIBILITY_OFFSET }) as DOMRect,
       );
 
     act(() => {
@@ -224,14 +224,14 @@ test.each([
     expect(selectedItem).toHaveStyleRule(
       "background-color",
       "var(--colorsActionMajorYang100)",
-      { modifier: "& a" }
+      { modifier: "& a" },
     );
     expect(selectedItem).toHaveStyleRule(
       "border-left-color",
       "var(--colorsActionMajor500)",
-      { modifier: "& a" }
+      { modifier: "& a" },
     );
-  }
+  },
 );
 
 test("cleans up event listeners after unmounting", () => {
@@ -241,7 +241,7 @@ test("cleans up event listeners after unmounting", () => {
   unmount();
 
   expect(
-    addEventListenerSpy.mock.calls.filter((call) => call[0] === "scroll")
+    addEventListenerSpy.mock.calls.filter((call) => call[0] === "scroll"),
   ).toHaveLength(1);
 });
 
@@ -269,7 +269,7 @@ describe("validates incorrect stickyNavigation prop content", () => {
               <p>Invalid children</p>
             </>
           }
-        />
+        />,
       );
     }).toThrow(error);
   });
@@ -286,7 +286,7 @@ describe("validates incorrect stickyNavigation prop content", () => {
               <AnchorNavigationItem>First</AnchorNavigationItem>
             </div>
           }
-        />
+        />,
       );
     }).toThrow(error);
   });
@@ -298,7 +298,7 @@ test("renders not selected navigation item with proper background when hovered",
   expect(screen.getAllByRole("listitem")[1]).toHaveStyleRule(
     "background-color",
     "var(--colorsActionMinor100)",
-    { modifier: "& a:hover" }
+    { modifier: "& a:hover" },
   );
 });
 
@@ -310,7 +310,7 @@ test("renders selected navigation item with proper background when hovered", asy
     undefined,
     {
       modifier: "& a:hover",
-    }
+    },
   );
 });
 
@@ -322,12 +322,12 @@ test("has the expected border radius styling on the navigation items", () => {
     expect(item).toHaveStyleRule(
       "border-top-right-radius",
       "var(--borderRadius100)",
-      { modifier: "& a" }
+      { modifier: "& a" },
     );
     expect(item).toHaveStyleRule(
       "border-bottom-right-radius",
       "var(--borderRadius100)",
-      { modifier: "& a" }
+      { modifier: "& a" },
     );
   });
 });
diff --git a/src/components/badge/badge.pw.tsx b/src/components/badge/badge.pw.tsx
index 37f20b7c40..fbc5a7ef7f 100644
--- a/src/components/badge/badge.pw.tsx
+++ b/src/components/badge/badge.pw.tsx
@@ -73,7 +73,7 @@ test.describe("should render Badge component", () => {
         onClick={() => {}}
         counter={99}
         color="--colorsSemanticNegative500"
-      />
+      />,
     );
 
     await badgeCounter(page).hover();
@@ -92,7 +92,7 @@ test.describe("should render Badge component", () => {
 
     await expect(badgeElement).toHaveCSS(
       "background-color",
-      "rgb(255, 255, 255)"
+      "rgb(255, 255, 255)",
     );
     await expect(badgeCrossIcon(page)).not.toBeVisible();
   });
@@ -111,7 +111,7 @@ test.describe("should render Badge component", () => {
           // @ts-ignore
           messages.push(data);
         }}
-      />
+      />,
     );
 
     const badgeToClick = badge(page);
diff --git a/src/components/batch-selection/batch-selection.pw.tsx b/src/components/batch-selection/batch-selection.pw.tsx
index d02b24ed43..7a92cc5ff2 100644
--- a/src/components/batch-selection/batch-selection.pw.tsx
+++ b/src/components/batch-selection/batch-selection.pw.tsx
@@ -44,7 +44,7 @@ test.describe("check BatchSelection component properties", () => {
       await mount(<BatchSelectionComponent selectedCount={selectedCount} />);
 
       await expect(batchSelectionCounter(page)).toHaveText(
-        `${selectedCount} selected`
+        `${selectedCount} selected`,
       );
     });
   });
@@ -93,13 +93,15 @@ test.describe("check BatchSelection component properties", () => {
     await expect(link).not.toBeFocused();
   });
 
-  ([
-    [0, "IconButton"],
-    [1, "Button"],
-    [2, "ButtonMinor"],
-    [3, "Link"],
-    [4, "LinkButton"],
-  ] as [number, string][]).forEach(([iconIndex, supportedChildren]) => {
+  (
+    [
+      [0, "IconButton"],
+      [1, "Button"],
+      [2, "ButtonMinor"],
+      [3, "Link"],
+      [4, "LinkButton"],
+    ] as [number, string][]
+  ).forEach(([iconIndex, supportedChildren]) => {
     test(`${supportedChildren}'s icon color matches disabled styling in a disabled BatchSelection`, async ({
       mount,
       page,
@@ -150,29 +152,29 @@ test.describe("check BatchSelection component properties", () => {
     await expect(link).toHaveCSS("color", "rgba(0, 0, 0, 0.3)");
   });
 
-  ([
-    [BATCH_SELECTION_COLOR[0], "rgb(0, 50, 76)"],
-    [BATCH_SELECTION_COLOR[1], "rgb(179, 194, 201)"],
-    [BATCH_SELECTION_COLOR[2], "rgb(255, 255, 255)"],
-    [BATCH_SELECTION_COLOR[3], "rgba(0, 0, 0, 0)"],
-  ] as [BatchSelectionProps["colorTheme"], string][]).forEach(
-    ([colorTheme, backgroundColor]) => {
-      test(`check background color is ${backgroundColor} when colorTheme is ${colorTheme}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <BatchSelectionComponent colorTheme={colorTheme} selectedCount={0} />
-        );
-
-        const batchSelection = getComponent(page, "batch-selection");
-        await expect(batchSelection).toHaveCSS(
-          "background-color",
-          backgroundColor
-        );
-      });
-    }
-  );
+  (
+    [
+      [BATCH_SELECTION_COLOR[0], "rgb(0, 50, 76)"],
+      [BATCH_SELECTION_COLOR[1], "rgb(179, 194, 201)"],
+      [BATCH_SELECTION_COLOR[2], "rgb(255, 255, 255)"],
+      [BATCH_SELECTION_COLOR[3], "rgba(0, 0, 0, 0)"],
+    ] as [BatchSelectionProps["colorTheme"], string][]
+  ).forEach(([colorTheme, backgroundColor]) => {
+    test(`check background color is ${backgroundColor} when colorTheme is ${colorTheme}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <BatchSelectionComponent colorTheme={colorTheme} selectedCount={0} />,
+      );
+
+      const batchSelection = getComponent(page, "batch-selection");
+      await expect(batchSelection).toHaveCSS(
+        "background-color",
+        backgroundColor,
+      );
+    });
+  });
 });
 
 test.describe("check BatchSelection buttons are focused", () => {
@@ -187,7 +189,7 @@ test.describe("check BatchSelection buttons are focused", () => {
 
       const elementLocator = batchSelectionButtonsByPosition(
         page,
-        positionOfElement(index)
+        positionOfElement(index),
       );
 
       const element = elementLocator;
@@ -207,19 +209,19 @@ test.describe("check BatchSelection buttons are focused", () => {
 
       const elementLocator = batchSelectionButtonsByPosition(
         page,
-        positionOfElement(index)
+        positionOfElement(index),
       );
       const element = elementLocator;
       await element.focus();
 
       await expect(elementLocator).toHaveCSS(
         "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
       );
 
       await expect(elementLocator).toHaveCSS(
         "outline",
-        "rgba(0, 0, 0, 0) solid 3px"
+        "rgba(0, 0, 0, 0) solid 3px",
       );
     });
   });
@@ -240,7 +242,7 @@ test.describe("rounded corners", () => {
 
       await expect(batchSelectionComponent(page)).toHaveCSS(
         "border-radius",
-        "8px"
+        "8px",
       );
     });
   });
@@ -258,7 +260,7 @@ test.describe("Accessibility tests for Batch Selection", () => {
       page,
     }) => {
       await mount(
-        <BatchSelectionComponent colorTheme={colorTheme} selectedCount={3} />
+        <BatchSelectionComponent colorTheme={colorTheme} selectedCount={3} />,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/batch-selection/batch-selection.test.tsx b/src/components/batch-selection/batch-selection.test.tsx
index 342b63aeb2..cba29f6a1a 100644
--- a/src/components/batch-selection/batch-selection.test.tsx
+++ b/src/components/batch-selection/batch-selection.test.tsx
@@ -14,7 +14,7 @@ test("Renders with children", () => {
       <IconButton>
         <Icon type="edit" />
       </IconButton>
-    </BatchSelection>
+    </BatchSelection>,
   );
 
   const iconButton = screen.getByRole("button", { name: "edit" });
@@ -29,7 +29,7 @@ test("Renders as hidden when the `hidden` prop is true", () => {
       <IconButton>
         <Icon type="bin" />
       </IconButton>
-    </BatchSelection>
+    </BatchSelection>,
   );
 
   const batchSelection = screen.getByTestId("batch-selection");
@@ -43,7 +43,7 @@ test("`IconButton` children should be automatically disabled via context", () =>
       <IconButton>
         <Icon type="edit" />
       </IconButton>
-    </BatchSelection>
+    </BatchSelection>,
   );
 
   const iconButton = screen.getByRole("button", { name: "edit" });
@@ -55,7 +55,7 @@ test("`Button` children should be automatically disabled via context", () => {
   render(
     <BatchSelection colorTheme="light" selectedCount={0} disabled>
       <Button iconType="edit" />
-    </BatchSelection>
+    </BatchSelection>,
   );
 
   const button = screen.getByRole("button", { name: "edit" });
@@ -67,7 +67,7 @@ test("`ButtonMinor` children should be automatically disabled via context", () =
   render(
     <BatchSelection colorTheme="white" selectedCount={0} disabled>
       <ButtonMinor iconType="edit" />
-    </BatchSelection>
+    </BatchSelection>,
   );
 
   const minorButton = screen.getByRole("button", { name: "edit" });
@@ -79,7 +79,7 @@ test("`Link` children should be automatically disabled via context", () => {
   render(
     <BatchSelection selectedCount={0} disabled>
       <Link>Link as an anchor</Link>
-    </BatchSelection>
+    </BatchSelection>,
   );
 
   const link = screen.getByTestId("link-anchor");
@@ -95,7 +95,7 @@ test("`Link` children rendered as a button should be automatically disabled via
   render(
     <BatchSelection selectedCount={0} disabled>
       <Link onClick={() => {}}>Link as a button</Link>
-    </BatchSelection>
+    </BatchSelection>,
   );
 
   const linkButton = screen.getByRole("button", {
diff --git a/src/components/box/box.component.tsx b/src/components/box/box.component.tsx
index bd40289329..5753d9f42a 100644
--- a/src/components/box/box.component.tsx
+++ b/src/components/box/box.component.tsx
@@ -104,12 +104,12 @@ export const Box = React.forwardRef<HTMLDivElement, BoxProps>(
       "aria-hidden": ariaHidden,
       ...rest
     }: BoxProps,
-    ref
+    ref,
   ) => {
     if (!deprecatedTabIndex && tabIndex !== undefined) {
       deprecatedTabIndex = true;
       Logger.deprecate(
-        "The `tabIndex` prop for `Box` component has been deprecated and will soon be removed."
+        "The `tabIndex` prop for `Box` component has been deprecated and will soon be removed.",
       );
     }
 
@@ -144,7 +144,7 @@ export const Box = React.forwardRef<HTMLDivElement, BoxProps>(
         {children}
       </StyledBox>
     );
-  }
+  },
 );
 
 Box.displayName = "Box";
diff --git a/src/components/box/box.pw.tsx b/src/components/box/box.pw.tsx
index 7edaff5e5f..86e73745f9 100644
--- a/src/components/box/box.pw.tsx
+++ b/src/components/box/box.pw.tsx
@@ -208,7 +208,7 @@ test.describe("should render Box component", () => {
       await assertCssValueIsApproximately(
         boxElement,
         "height",
-        parseInt(height)
+        parseInt(height),
       );
     });
   });
@@ -224,7 +224,7 @@ test.describe("should render Box component", () => {
       await assertCssValueIsApproximately(
         boxElement,
         "height",
-        parseInt(height)
+        parseInt(height),
       );
     });
   });
@@ -239,12 +239,12 @@ test.describe("should render Box component", () => {
       await assertCssValueIsApproximately(
         boxElement,
         "width",
-        parseInt(pixels)
+        parseInt(pixels),
       );
       await assertCssValueIsApproximately(
         boxElement,
         "height",
-        parseInt(pixels)
+        parseInt(pixels),
       );
     });
   });
@@ -259,12 +259,12 @@ test.describe("should render Box component", () => {
       await assertCssValueIsApproximately(
         boxElement,
         "width",
-        parseInt(pixels)
+        parseInt(pixels),
       );
       await assertCssValueIsApproximately(
         boxElement,
         "height",
-        parseInt(pixels)
+        parseInt(pixels),
       );
     });
   });
@@ -277,7 +277,7 @@ test.describe("should render Box component", () => {
         await expect(boxElement).toHaveAttribute("display", display);
         await expect(boxElement).toHaveCSS("display", display);
       });
-    }
+    },
   );
 
   [
@@ -319,7 +319,7 @@ test.describe("should render Box component", () => {
         const boxElement = await getDataElementByValue(page, "box");
         await expect(boxElement).toHaveCSS("overflow-x", overflow);
       });
-    }
+    },
   );
 
   (["auto", "clip", "hidden", "scroll", "visible"] as const).forEach(
@@ -332,7 +332,7 @@ test.describe("should render Box component", () => {
         const boxElement = await getDataElementByValue(page, "box");
         await expect(boxElement).toHaveCSS("overflow-y", overflow);
       });
-    }
+    },
   );
 
   [
@@ -349,10 +349,12 @@ test.describe("should render Box component", () => {
     });
   });
 
-  ([
-    ["200px", 300],
-    ["400px", 400],
-  ] as [string, number][]).forEach(([width, actualWidth]) => {
+  (
+    [
+      ["200px", 300],
+      ["400px", 400],
+    ] as [string, number][]
+  ).forEach(([width, actualWidth]) => {
     test(`when minWidth prop is 300 and width prop is the string ${width}, the calculated width should be ${actualWidth}`, async ({
       mount,
       page,
@@ -391,10 +393,12 @@ test.describe("should render Box component", () => {
     });
   });
 
-  ([
-    ["400px", 400],
-    ["800px", 600],
-  ] as [string, number][]).forEach(([width, actualWidth]) => {
+  (
+    [
+      ["400px", 400],
+      ["800px", 600],
+    ] as [string, number][]
+  ).forEach(([width, actualWidth]) => {
     test(`when maxWidth prop is 600 and width prop is the string ${width}, the calculated width should be ${actualWidth}`, async ({
       mount,
       page,
@@ -433,10 +437,12 @@ test.describe("should render Box component", () => {
     });
   });
 
-  ([
-    ["400px", 600],
-    ["800px", 800],
-  ] as [string, number][]).forEach(([height, actualHeight]) => {
+  (
+    [
+      ["400px", 600],
+      ["800px", 800],
+    ] as [string, number][]
+  ).forEach(([height, actualHeight]) => {
     test(`when minHeight prop is 600 and height prop is the string ${height}, the calculated width should be ${actualHeight}`, async ({
       mount,
       page,
@@ -461,10 +467,12 @@ test.describe("should render Box component", () => {
     });
   });
 
-  ([
-    ["400px", 400],
-    ["800px", 600],
-  ] as [string, number][]).forEach(([height, actualHeight]) => {
+  (
+    [
+      ["400px", 400],
+      ["800px", 600],
+    ] as [string, number][]
+  ).forEach(([height, actualHeight]) => {
     test(`when maxHeight prop is 600 and height prop is the string ${height}, the calculated width should be ${actualHeight}`, async ({
       mount,
       page,
@@ -485,7 +493,7 @@ test.describe("should render Box component", () => {
         const boxElement = await getDataElementByValue(page, "box");
         await expect(boxElement).toHaveCSS("align-items", alignment);
       });
-    }
+    },
   );
 
   [
@@ -566,7 +574,7 @@ test.describe("should render Box component", () => {
         const boxElement = await getDataElementByValue(page, "box");
         await expect(boxElement).toHaveCSS("flex-direction", direction);
       });
-    }
+    },
   );
 
   ["auto", "content", "fit-content", "max-content", "min-content"].forEach(
@@ -576,14 +584,16 @@ test.describe("should render Box component", () => {
         const boxElement = await getDataElementByValue(page, "box");
         await expect(boxElement).toHaveCSS("flex-basis", flex);
       });
-    }
+    },
   );
 
-  ([
-    [10, "10"],
-    [50, "50"],
-    [100, "100"],
-  ] as [number, string][]).forEach(([value, growText]) => {
+  (
+    [
+      [10, "10"],
+      [50, "50"],
+      [100, "100"],
+    ] as [number, string][]
+  ).forEach(([value, growText]) => {
     test(`should verify flex grow is ${value}`, async ({ mount, page }) => {
       await mount(<BoxComponentMulti flex="auto" flexGrow={value} />);
       const boxElement = await getDataElementByValue(page, "box");
@@ -591,11 +601,13 @@ test.describe("should render Box component", () => {
     });
   });
 
-  ([
-    [10, "10"],
-    [50, "50"],
-    [100, "100"],
-  ] as [number, string][]).forEach(([value, shrinkText]) => {
+  (
+    [
+      [10, "10"],
+      [50, "50"],
+      [100, "100"],
+    ] as [number, string][]
+  ).forEach(([value, shrinkText]) => {
     test(`should verify flex shrink is ${value}`, async ({ mount, page }) => {
       await mount(<BoxComponentMulti flex="auto" flexShrink={value} />);
       const boxElement = await getDataElementByValue(page, "box");
@@ -610,7 +622,7 @@ test.describe("should render Box component", () => {
         const boxElement = await getDataElementByValue(page, "box");
         await expect(boxElement).toHaveCSS("flex-basis", basis);
       });
-    }
+    },
   );
 
   [
@@ -647,11 +659,13 @@ test.describe("should render Box component", () => {
     });
   });
 
-  ([
-    [10, "10"],
-    [50, "50"],
-    [100, "100"],
-  ] as [number, string][]).forEach(([value, orderText]) => {
+  (
+    [
+      [10, "10"],
+      [50, "50"],
+      [100, "100"],
+    ] as [number, string][]
+  ).forEach(([value, orderText]) => {
     test(`should verify order is ${value}`, async ({ mount, page }) => {
       await mount(<BoxComponentMulti order={value} />);
       const boxElement = await getDataElementByValue(page, "box");
@@ -667,10 +681,12 @@ test.describe("should render Box component", () => {
     });
   });
 
-  ([
-    ["light", "rgb(102, 132, 148) rgb(242, 245, 246)"],
-    ["dark", "rgb(153, 173, 183) rgb(51, 91, 112)"],
-  ] as const).forEach(([variant, scrollbarColor]) => {
+  (
+    [
+      ["light", "rgb(102, 132, 148) rgb(242, 245, 246)"],
+      ["dark", "rgb(153, 173, 183) rgb(51, 91, 112)"],
+    ] as const
+  ).forEach(([variant, scrollbarColor]) => {
     test(`scrollbar has correct colours when scrollVariant prop is ${variant}`, async ({
       mount,
       page,
@@ -682,7 +698,7 @@ test.describe("should render Box component", () => {
           overflow="auto"
           scrollVariant={variant}
           mr="20px"
-        />
+        />,
       );
       const box = page.getByText(/Supercalifrajilisticexpialidocious Word/);
       await expect(box).toHaveCSS("scrollbar-color", scrollbarColor);
@@ -699,7 +715,7 @@ test.describe("should render Box component", () => {
             right="0px"
             bottom="0px"
             position={value}
-          />
+          />,
         );
         const boxElement = await getDataElementByValue(page, "box");
         await expect(boxElement).toHaveCSS("top", "0px");
@@ -708,7 +724,7 @@ test.describe("should render Box component", () => {
         await expect(boxElement).toHaveCSS("left", "0px");
         await expect(boxElement).toHaveCSS("position", value);
       });
-    }
+    },
   );
 
   ([0, 1, 2, 3, 4, 5, 6, 7, 8, "20%", "20px"] as const).forEach((gap) => {
@@ -720,11 +736,11 @@ test.describe("should render Box component", () => {
       const boxElement = await getDataElementByValue(page, "box");
       await expect(boxElement).toHaveCSS(
         "row-gap",
-        typeof gap === "number" ? `${gap * 8}px` : gap
+        typeof gap === "number" ? `${gap * 8}px` : gap,
       );
       await expect(boxElement).toHaveCSS(
         "column-gap",
-        typeof gap === "number" ? `${gap * 8}px` : gap
+        typeof gap === "number" ? `${gap * 8}px` : gap,
       );
     });
   });
@@ -738,7 +754,7 @@ test.describe("should render Box component", () => {
       const boxElement = await getDataElementByValue(page, "box");
       await expect(boxElement).toHaveCSS(
         "row-gap",
-        typeof rowGap === "number" ? `${rowGap * 8}px` : rowGap
+        typeof rowGap === "number" ? `${rowGap * 8}px` : rowGap,
       );
       await expect(boxElement).toHaveCSS("column-gap", "64px");
     });
@@ -754,7 +770,7 @@ test.describe("should render Box component", () => {
       await expect(boxElement).toHaveCSS("row-gap", "64px");
       await expect(boxElement).toHaveCSS(
         "column-gap",
-        typeof columnGap === "number" ? `${columnGap * 8}px` : columnGap
+        typeof columnGap === "number" ? `${columnGap * 8}px` : columnGap,
       );
     });
   });
@@ -764,7 +780,7 @@ test.describe("should render Box component", () => {
     const boxElement = await getDataElementByValue(page, "box");
     await expect(boxElement).toHaveCSS(
       "box-shadow",
-      "rgba(0, 20, 30, 0.04) 0px 10px 40px 0px, rgba(0, 20, 30, 0.1) 0px 50px 80px 0px"
+      "rgba(0, 20, 30, 0.04) 0px 10px 40px 0px, rgba(0, 20, 30, 0.1) 0px 50px 80px 0px",
     );
   });
 });
@@ -851,22 +867,22 @@ test.describe("Accessibility tests for Box", () => {
   });
 });
 
-([
-  [undefined, "0px"],
-  ["borderRadius025", "2px"],
-  ["borderRadius050", "4px"],
-  ["borderRadius100", "8px"],
-  ["borderRadius200", "16px"],
-  ["borderRadius400", "32px"],
-] as [BoxProps["borderRadius"], string][]).forEach(
-  ([borderRadius, expected]) => {
-    test(`applies the expected border radius when ${borderRadius} passed to borderRadius prop`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<Default borderRadius={borderRadius} />);
-      const boxElement = await getDataElementByValue(page, "box");
-      await expect(boxElement).toHaveCSS("border-radius", expected);
-    });
-  }
-);
+(
+  [
+    [undefined, "0px"],
+    ["borderRadius025", "2px"],
+    ["borderRadius050", "4px"],
+    ["borderRadius100", "8px"],
+    ["borderRadius200", "16px"],
+    ["borderRadius400", "32px"],
+  ] as [BoxProps["borderRadius"], string][]
+).forEach(([borderRadius, expected]) => {
+  test(`applies the expected border radius when ${borderRadius} passed to borderRadius prop`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<Default borderRadius={borderRadius} />);
+    const boxElement = await getDataElementByValue(page, "box");
+    await expect(boxElement).toHaveCSS("border-radius", expected);
+  });
+});
diff --git a/src/components/box/box.test.tsx b/src/components/box/box.test.tsx
index 5614497544..3e6aefcb1f 100644
--- a/src/components/box/box.test.tsx
+++ b/src/components/box/box.test.tsx
@@ -15,27 +15,27 @@ import Logger from "../../__internal__/utils/logger";
 
 testStyledSystemSpacingRTL(
   (props) => <Box data-role="box" {...props} />,
-  () => screen.getByTestId("box")
+  () => screen.getByTestId("box"),
 );
 testStyledSystemColor(
   (props) => <Box data-role="box" {...props} />,
-  () => screen.getByTestId("box")
+  () => screen.getByTestId("box"),
 );
 testStyledSystemLayout(
   (props) => <Box data-role="box" {...props} />,
-  () => screen.getByTestId("box")
+  () => screen.getByTestId("box"),
 );
 testStyledSystemFlexBox(
   (props) => <Box data-role="box" {...props} />,
-  () => screen.getByTestId("box")
+  () => screen.getByTestId("box"),
 );
 testStyledSystemGrid(
   (props) => <Box data-role="box" {...props} />,
-  () => screen.getByTestId("box")
+  () => screen.getByTestId("box"),
 );
 testStyledSystemPosition(
   (props) => <Box data-role="box" {...props} />,
-  () => screen.getByTestId("box")
+  () => screen.getByTestId("box"),
 );
 
 test("renders Box with 'break-word' overflowWrap style when overflowWrap prop is set to 'break-word'", () => {
@@ -85,11 +85,11 @@ test("logs a deprecation warning when the `tabIndex` prop is passed with a value
     <>
       <Box tabIndex={6} />
       <Box tabIndex={-1} />
-    </>
+    </>,
   );
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "The `tabIndex` prop for `Box` component has been deprecated and will soon be removed."
+    "The `tabIndex` prop for `Box` component has been deprecated and will soon be removed.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
   loggerSpy.mockRestore();
diff --git a/src/components/breadcrumbs/breadcrumbs.component.tsx b/src/components/breadcrumbs/breadcrumbs.component.tsx
index 1a73ab33d4..35fb2cc0be 100644
--- a/src/components/breadcrumbs/breadcrumbs.component.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.component.tsx
@@ -28,7 +28,7 @@ export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
         </StyledBreadcrumbs>
       </BreadcrumbsContext.Provider>
     );
-  }
+  },
 );
 
 Breadcrumbs.displayName = "Breadcrumbs";
diff --git a/src/components/breadcrumbs/breadcrumbs.pw.tsx b/src/components/breadcrumbs/breadcrumbs.pw.tsx
index e342e54125..92cb4f2875 100644
--- a/src/components/breadcrumbs/breadcrumbs.pw.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.pw.tsx
@@ -59,11 +59,11 @@ test.describe("should render Breadcrumbs component", async () => {
     await crumbAtIndex(page, 0).locator("button").focus();
     await expect(crumbAtIndex(page, 0).locator("button")).toHaveCSS(
       "background-color",
-      "rgb(255, 218, 128)"
+      "rgb(255, 218, 128)",
     );
     await expect(crumbAtIndex(page, 0).locator("span").first()).toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px"
+      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px",
     );
   });
 
@@ -76,11 +76,11 @@ test.describe("should render Breadcrumbs component", async () => {
     await crumbAtIndex(page, 0).locator("a").focus();
     await expect(crumbAtIndex(page, 0).locator("a")).toHaveCSS(
       "background-color",
-      "rgb(255, 218, 128)"
+      "rgb(255, 218, 128)",
     );
     await expect(crumbAtIndex(page, 0).locator("span").first()).toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px"
+      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px",
     );
   });
 
@@ -93,7 +93,7 @@ test.describe("should render Breadcrumbs component", async () => {
     await crumbAtIndex(page, 0).locator("button").click();
     await expect(crumbAtIndex(page, 0).locator("span").first()).not.toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px"
+      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px",
     );
   });
 
@@ -106,7 +106,7 @@ test.describe("should render Breadcrumbs component", async () => {
     await crumbAtIndex(page, 0).locator("a").click();
     await expect(crumbAtIndex(page, 0).locator("span").first()).not.toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px"
+      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px",
     );
   });
 
@@ -120,7 +120,7 @@ test.describe("should render Breadcrumbs component", async () => {
     await crumbAtIndex(page, 0).locator("button").press("Enter");
     await expect(crumbAtIndex(page, 0).locator("span").first()).not.toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px"
+      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px",
     );
   });
 
@@ -134,7 +134,7 @@ test.describe("should render Breadcrumbs component", async () => {
     await crumbAtIndex(page, 0).locator("a").press("Enter");
     await expect(crumbAtIndex(page, 0).locator("span").first()).not.toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px"
+      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px",
     );
   });
 
@@ -148,7 +148,7 @@ test.describe("should render Breadcrumbs component", async () => {
     await crumbAtIndex(page, 0).locator("button").press("Space");
     await expect(crumbAtIndex(page, 0).locator("span").first()).not.toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px"
+      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px",
     );
   });
 
@@ -162,11 +162,11 @@ test.describe("should render Breadcrumbs component", async () => {
     await crumbAtIndex(page, 0).locator("a").press("Space");
     await expect(crumbAtIndex(page, 0).locator("a")).toHaveCSS(
       "background-color",
-      "rgb(255, 218, 128)"
+      "rgb(255, 218, 128)",
     );
     await expect(crumbAtIndex(page, 0).locator("span").first()).toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px"
+      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px",
     );
   });
 
@@ -202,7 +202,7 @@ test.describe("should render Breadcrumbs component", async () => {
       await mount(<DefaultCrumb isCurrent={isCurrent} />);
       await expect(crumbAtIndex(page, 0).locator("a")).toHaveAttribute(
         expectedAttribute,
-        expectedValue
+        expectedValue,
       );
     });
   });
@@ -214,7 +214,7 @@ test.describe("should render Breadcrumbs component", async () => {
     await mount(<DefaultCrumb href={CHARACTERS.STANDARD} />);
     await expect(crumbAtIndex(page, 0).locator("a")).toHaveAttribute(
       "href",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 });
@@ -228,11 +228,11 @@ test("when Crumb's isCurrent prop is true, Crumb divider should not exist", asyn
   const crumbElement = crumbAtIndex(page, 0);
   await expect(crumbElement.locator("a")).toHaveAttribute(
     "aria-current",
-    "page"
+    "page",
   );
   await expect(crumbElement.locator("span").nth(1)).toHaveCSS(
     "color",
-    "rgba(0, 0, 0, 0.9)"
+    "rgba(0, 0, 0, 0.9)",
   );
 });
 
@@ -249,7 +249,7 @@ test("should call the onClick callback when clicked", async ({
         // @ts-ignore
         messages.push(data);
       }}
-    />
+    />,
   );
 
   const crumbToClick = crumbAtIndex(page, 0);
@@ -273,7 +273,7 @@ test("should not set the onClick or href props when isCurrent is true", async ({
         messages.push(data);
       }}
       isCurrent
-    />
+    />,
   );
 
   const crumbToClick = crumbAtIndex(page, 0);
diff --git a/src/components/breadcrumbs/breadcrumbs.test.tsx b/src/components/breadcrumbs/breadcrumbs.test.tsx
index 19ce1a024b..f064ad200e 100644
--- a/src/components/breadcrumbs/breadcrumbs.test.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.test.tsx
@@ -10,7 +10,7 @@ testStyledSystemSpacingRTL(
       <Crumb href="#">Breadcrumb</Crumb>
     </Breadcrumbs>
   ),
-  () => screen.getByRole("navigation")
+  () => screen.getByRole("navigation"),
 );
 
 test("renders children as expected", () => {
@@ -21,7 +21,7 @@ test("renders children as expected", () => {
       <Crumb href="#" isCurrent>
         Breadcrumb 3
       </Crumb>
-    </Breadcrumbs>
+    </Breadcrumbs>,
   );
 
   expect(screen.getByRole("link", { name: "Breadcrumb 1" })).toBeVisible();
@@ -38,7 +38,7 @@ test("renders children with expected colour when isDarkBackground is false", ()
       <Crumb href="#" isCurrent data-role="current-crumb">
         Breadcrumb 3
       </Crumb>
-    </Breadcrumbs>
+    </Breadcrumbs>,
   );
 
   const currentCrumb = screen.getByTestId("current-crumb");
@@ -49,7 +49,7 @@ test("renders children with expected colour when isDarkBackground is false", ()
   expect(screen.getAllByTestId("crumb-divider")[0]).toHaveStyleRule(
     "color",
     "var(--colorsUtilityYin055)",
-    { modifier: "::after" }
+    { modifier: "::after" },
   );
 });
 
@@ -62,7 +62,7 @@ test("renders children with expected colour when isDarkBackground is true", () =
       <Crumb href="#" isCurrent data-role="current-crumb">
         Breadcrumb 3
       </Crumb>
-    </Breadcrumbs>
+    </Breadcrumbs>,
   );
 
   const currentCrumb = screen.getByTestId("current-crumb");
@@ -73,6 +73,6 @@ test("renders children with expected colour when isDarkBackground is true", () =
   expect(screen.getAllByTestId("crumb-divider")[0]).toHaveStyleRule(
     "color",
     "var(--colorsUtilityYang100)",
-    { modifier: "::after" }
+    { modifier: "::after" },
   );
 });
diff --git a/src/components/breadcrumbs/crumb/crumb.component.tsx b/src/components/breadcrumbs/crumb/crumb.component.tsx
index 8cc8017039..6de1992ac2 100644
--- a/src/components/breadcrumbs/crumb/crumb.component.tsx
+++ b/src/components/breadcrumbs/crumb/crumb.component.tsx
@@ -57,7 +57,7 @@ const Crumb = React.forwardRef<HTMLLinkElement, CrumbProps>(
         )}
       </li>
     );
-  }
+  },
 );
 
 Crumb.displayName = "Crumb";
diff --git a/src/components/breadcrumbs/crumb/crumb.style.ts b/src/components/breadcrumbs/crumb/crumb.style.ts
index 61da9acdf8..65a6330de5 100644
--- a/src/components/breadcrumbs/crumb/crumb.style.ts
+++ b/src/components/breadcrumbs/crumb/crumb.style.ts
@@ -40,12 +40,11 @@ export const Divider = styled.span<DividerProps>`
     margin: 0px var(--spacing050) 0px var(--spacing100);
     line-height: 16px;
     font: var(--typographyBreadcrumbSeparatorM);
-    ${({ isDarkBackground }) =>
-      css`
-        color: ${isDarkBackground
-          ? "var(--colorsUtilityYang100)"
-          : "var(--colorsUtilityYin055)"};
-      `}
+    ${({ isDarkBackground }) => css`
+      color: ${isDarkBackground
+        ? "var(--colorsUtilityYang100)"
+        : "var(--colorsUtilityYin055)"};
+    `}
   }
 `;
 
diff --git a/src/components/breadcrumbs/crumb/crumb.test.tsx b/src/components/breadcrumbs/crumb/crumb.test.tsx
index c92c30d4f8..920f7d39a0 100644
--- a/src/components/breadcrumbs/crumb/crumb.test.tsx
+++ b/src/components/breadcrumbs/crumb/crumb.test.tsx
@@ -15,7 +15,7 @@ test("does not pass href to the anchor element when isCurrent is true", () => {
   render(
     <Crumb href="foo" data-role="crumb" isCurrent>
       Link text
-    </Crumb>
+    </Crumb>,
   );
 
   const anchor = screen.getByTestId("link-anchor");
@@ -29,7 +29,7 @@ test("calls onClick callback when the crumb link is clicked", async () => {
   render(
     <Crumb href="#" onClick={onClick}>
       Link text
-    </Crumb>
+    </Crumb>,
   );
 
   const link = screen.getByRole("link", { name: "Link text" });
@@ -44,7 +44,7 @@ test("does not call onClick callback when isCurrent is true", async () => {
   render(
     <Crumb href="#" onClick={onClick} isCurrent>
       Link text
-    </Crumb>
+    </Crumb>,
   );
 
   const link = screen.getByText("Link text");
diff --git a/src/components/button-bar/button-bar.pw.tsx b/src/components/button-bar/button-bar.pw.tsx
index 6385cbdfec..c3dced04ff 100644
--- a/src/components/button-bar/button-bar.pw.tsx
+++ b/src/components/button-bar/button-bar.pw.tsx
@@ -66,7 +66,7 @@ test.describe("check props for Button-Bar component", () => {
     await mount(<ButtonBarCustom fullWidth />);
     await expect(buttonDataComponent(page).locator("..")).toHaveCSS(
       "width",
-      "1366px"
+      "1366px",
     );
   });
 });
@@ -82,7 +82,7 @@ test.describe("accessibility tests", async () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [BUTTON_BAR_ICON_POSITIONS[0], BUTTON_BAR_ICON_POSITIONS[1]].forEach(
@@ -95,7 +95,7 @@ test.describe("accessibility tests", async () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   test("should check the accessibility of Button-Bar with full width", async ({
@@ -126,64 +126,61 @@ test("should verify ButtonBar with wrapped components can be navigated using key
   await expect(buttonAtIndex(1)).not.toBeFocused();
 });
 
-test.describe(
-  "when custom Button wrapper components are used as children in ButtonBar",
-  async () => {
-    test("Button size is small when the size prop is set to small and passed to ButtonBar", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<ButtonBarWithWrapper size="small" />);
-
-      const buttonWidthPromises = [0, 1, 2].map((i) =>
-        getStyle(buttonDataComponent(page).nth(i), "width")
-      );
-      const buttonWidths = await Promise.all(buttonWidthPromises);
-      buttonWidths.forEach((width) =>
-        expect(parseFloat(width)).toBeCloseTo(86, 0)
-      );
-    });
+test.describe("when custom Button wrapper components are used as children in ButtonBar", async () => {
+  test("Button size is small when the size prop is set to small and passed to ButtonBar", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ButtonBarWithWrapper size="small" />);
 
-    [
-      { iconPosition: "before" as const, expectedMargin: "margin-right" },
-      { iconPosition: "after" as const, expectedMargin: "margin-left" },
-    ].forEach(({ iconPosition, expectedMargin }) => {
-      test(`Button Icon position is ${iconPosition} text when the iconPosition is set and passed to ButtonBar`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<ButtonBarWithWrapper iconPosition={iconPosition} />);
-        await expect(icon(page).nth(0)).toHaveCSS(expectedMargin, "8px");
-        await expect(icon(page).nth(1)).toHaveCSS(expectedMargin, "8px");
-        await expect(icon(page).nth(2)).toHaveCSS(expectedMargin, "8px");
-      });
-    });
+    const buttonWidthPromises = [0, 1, 2].map((i) =>
+      getStyle(buttonDataComponent(page).nth(i), "width"),
+    );
+    const buttonWidths = await Promise.all(buttonWidthPromises);
+    buttonWidths.forEach((width) =>
+      expect(parseFloat(width)).toBeCloseTo(86, 0),
+    );
+  });
 
-    test("should verify ButtonBar with wrapped components can be navigated using keyboard", async ({
+  [
+    { iconPosition: "before" as const, expectedMargin: "margin-right" },
+    { iconPosition: "after" as const, expectedMargin: "margin-left" },
+  ].forEach(({ iconPosition, expectedMargin }) => {
+    test(`Button Icon position is ${iconPosition} text when the iconPosition is set and passed to ButtonBar`, async ({
       mount,
       page,
     }) => {
-      await mount(<ButtonBarWithWrapper />);
+      await mount(<ButtonBarWithWrapper iconPosition={iconPosition} />);
+      await expect(icon(page).nth(0)).toHaveCSS(expectedMargin, "8px");
+      await expect(icon(page).nth(1)).toHaveCSS(expectedMargin, "8px");
+      await expect(icon(page).nth(2)).toHaveCSS(expectedMargin, "8px");
+    });
+  });
+
+  test("should verify ButtonBar with wrapped components can be navigated using keyboard", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ButtonBarWithWrapper />);
 
-      const buttonAtIndex = (index: number) =>
-        buttonDataComponent(page).nth(index);
+    const buttonAtIndex = (index: number) =>
+      buttonDataComponent(page).nth(index);
 
-      await buttonAtIndex(0).focus();
-      await buttonAtIndex(0).press("Tab");
-      await expect(buttonAtIndex(1)).toBeFocused();
-      await expect(buttonAtIndex(0)).not.toBeFocused();
+    await buttonAtIndex(0).focus();
+    await buttonAtIndex(0).press("Tab");
+    await expect(buttonAtIndex(1)).toBeFocused();
+    await expect(buttonAtIndex(0)).not.toBeFocused();
 
-      await buttonAtIndex(1).press("Tab");
-      await expect(buttonAtIndex(2)).toBeFocused();
-      await expect(buttonAtIndex(1)).not.toBeFocused();
+    await buttonAtIndex(1).press("Tab");
+    await expect(buttonAtIndex(2)).toBeFocused();
+    await expect(buttonAtIndex(1)).not.toBeFocused();
 
-      await buttonAtIndex(2).press("Tab");
+    await buttonAtIndex(2).press("Tab");
 
-      await expect(page.getByLabel("csv")).toBeFocused();
-      await expect(buttonAtIndex(2)).not.toBeFocused();
-    });
-  }
-);
+    await expect(page.getByLabel("csv")).toBeFocused();
+    await expect(buttonAtIndex(2)).not.toBeFocused();
+  });
+});
 
 test.describe("renders with ButtonMinor children", async () => {
   const indexes = [0, 1, 2];
@@ -199,13 +196,13 @@ test.describe("renders with ButtonMinor children", async () => {
       const minorButton = buttonMinorComponent(page, index);
       await expect(minorButton).toHaveCSS(
         "background-color",
-        "rgba(0, 0, 0, 0)"
+        "rgba(0, 0, 0, 0)",
       );
 
       await minorButton.hover();
       await expect(minorButton).toHaveCSS(
         "background-color",
-        "rgb(51, 91, 112)"
+        "rgb(51, 91, 112)",
       );
     });
 
diff --git a/src/components/button-bar/button-bar.stories.tsx b/src/components/button-bar/button-bar.stories.tsx
index 29e3f77151..e2868c8d08 100644
--- a/src/components/button-bar/button-bar.stories.tsx
+++ b/src/components/button-bar/button-bar.stories.tsx
@@ -13,7 +13,7 @@ const styledSystemProps = generateStyledSystemProps(
   {
     spacing: true,
   },
-  { pt: "1px", pb: "1px", px: "24px" }
+  { pt: "1px", pb: "1px", px: "24px" },
 );
 
 const meta: Meta<typeof ButtonBar> = {
@@ -106,7 +106,7 @@ export const buttonBarIcons: Story = () => {
             <Button iconType="pdf">{iconPosition}</Button>
             <Button iconType="delete">{iconPosition}</Button>
           </ButtonBar>
-        ))
+        )),
       )}
     </>
   );
@@ -132,7 +132,7 @@ export const buttonBarMinorIcons: Story = () => {
             <ButtonMinor iconType="pdf">{iconPosition}</ButtonMinor>
             <ButtonMinor iconType="delete">{iconPosition}</ButtonMinor>
           </ButtonBar>
-        ))
+        )),
       )}
     </>
   );
diff --git a/src/components/button-bar/button-bar.test.tsx b/src/components/button-bar/button-bar.test.tsx
index 79bdb2b2e1..af9677c3df 100644
--- a/src/components/button-bar/button-bar.test.tsx
+++ b/src/components/button-bar/button-bar.test.tsx
@@ -13,7 +13,7 @@ describe("When ButtonBar children are Button components", () => {
         <Button aria-label="button-in-bar">foo</Button>
         <Button aria-label="button-in-bar">bar</Button>
         <Button aria-label="button-in-bar">baz</Button>
-      </ButtonBar>
+      </ButtonBar>,
     );
 
     const buttonChildren = screen.getAllByRole("button", {
@@ -35,7 +35,7 @@ describe("When ButtonBar children are Button components", () => {
         <Button aria-label="button-in-bar" iconType="bin">
           baz
         </Button>
-      </ButtonBar>
+      </ButtonBar>,
     );
 
     const buttonChildren = screen.getAllByRole("button", {
@@ -53,7 +53,7 @@ describe("When ButtonBar children are Button components", () => {
         <Button aria-label="button-in-bar">foo</Button>
         <Button aria-label="button-in-bar">bar</Button>
         <Button aria-label="button-in-bar">baz</Button>
-      </ButtonBar>
+      </ButtonBar>,
     );
 
     const buttonChildren = screen.getAllByRole("button", {
@@ -81,7 +81,7 @@ describe("When ButtonBar children are Button components", () => {
         <Button aria-label="button-in-bar" iconType="bin">
           baz
         </Button>
-      </ButtonBar>
+      </ButtonBar>,
     );
 
     const icons = screen.getAllByTestId("icon");
@@ -97,7 +97,7 @@ describe("When ButtonBar children are Button components", () => {
         <Button aria-label="button-in-bar">foo</Button>
         <Button aria-label="button-in-bar">bar</Button>
         <Button aria-label="button-in-bar">baz</Button>
-      </ButtonBar>
+      </ButtonBar>,
     );
 
     const buttonBar = screen.getByTestId("button-bar");
@@ -118,7 +118,7 @@ describe("When ButtonBar children are Button components", () => {
         <Button aria-label="button-in-bar">foo</Button>
         <Button aria-label="button-in-bar">bar</Button>
         <Button aria-label="button-in-bar">baz</Button>
-      </ButtonBar>
+      </ButtonBar>,
     );
 
     const buttonChildren = screen.getAllByRole("button", {
@@ -136,7 +136,7 @@ describe("When ButtonBar children are Button components", () => {
         <Button aria-label="button-in-bar">foo</Button>
         <Button aria-label="button-in-bar">bar</Button>
         <Button aria-label="button-in-bar">baz</Button>
-      </ButtonBar>
+      </ButtonBar>,
     );
 
     const buttonChildren = screen.getAllByRole("button", {
@@ -154,7 +154,7 @@ describe("When ButtonBar children are Button components", () => {
         <Button aria-label="button-in-bar">foo</Button>
         <Button aria-label="button-in-bar">bar</Button>
         <Button aria-label="button-in-bar">baz</Button>
-      </ButtonBar>
+      </ButtonBar>,
     );
 
     const buttonChildren = screen.getAllByRole("button", {
@@ -180,7 +180,7 @@ describe("When ButtonBar children are IconButton components", () => {
         <IconButton aria-label="icon-button-in-bar">
           <Icon type="bin" />
         </IconButton>
-      </ButtonBar>
+      </ButtonBar>,
     );
 
     const iconButtonChildren = screen.getAllByRole("button", {
diff --git a/src/components/button-minor/button-minor.component.tsx b/src/components/button-minor/button-minor.component.tsx
index 7eb36b4cc8..01357606a5 100644
--- a/src/components/button-minor/button-minor.component.tsx
+++ b/src/components/button-minor/button-minor.component.tsx
@@ -23,7 +23,7 @@ export const ButtonMinor = React.forwardRef<
       fullWidth: fullWidthProp = false,
       ...rest
     }: ButtonMinorProps,
-    ref
+    ref,
   ) => {
     const {
       buttonType: buttonTypeContext,
@@ -52,7 +52,7 @@ export const ButtonMinor = React.forwardRef<
         {...rest}
       />
     );
-  }
+  },
 );
 
 ButtonMinor.displayName = "ButtonMinor";
diff --git a/src/components/button-minor/button-minor.pw.tsx b/src/components/button-minor/button-minor.pw.tsx
index 26937c5919..5070c215a7 100644
--- a/src/components/button-minor/button-minor.pw.tsx
+++ b/src/components/button-minor/button-minor.pw.tsx
@@ -60,69 +60,57 @@ const keysToPress = [
 const destructive = "rgb(162, 44, 59)";
 const transparent = "rgba(0, 0, 0, 0)";
 
-test.describe(
-  "check Focus Outline & Border Radius for Button Minor Component",
-  () => {
-    test("should have the expected styling when the focusRedesignOptOut is false", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<ButtonMinorCustom />);
+test.describe("check Focus Outline & Border Radius for Button Minor Component", () => {
+  test("should have the expected styling when the focusRedesignOptOut is false", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ButtonMinorCustom />);
 
-      const outlined = buttonMinorComponent(page, 0).nth(0);
-      await outlined.focus();
-      await expect(outlined).toHaveCSS(
-        "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
-      );
-      await expect(outlined).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
-    });
+    const outlined = buttonMinorComponent(page, 0).nth(0);
+    await outlined.focus();
+    await expect(outlined).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
+    );
+    await expect(outlined).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
+  });
 
-    test("should have the expected styling when the focusRedesignOptOut is true", async ({
-      mount,
-      page,
-    }) => {
-      await mount<HooksConfig>(<ButtonMinorCustom />, {
-        hooksConfig: {
-          focusRedesignOptOut: true,
-        },
-      });
-
-      const outlined = buttonMinorComponent(page, 0).nth(0);
-      await outlined.focus();
-      await expect(outlined).toHaveCSS(
-        "outline",
-        "rgb(255, 188, 25) solid 3px"
-      );
+  test("should have the expected styling when the focusRedesignOptOut is true", async ({
+    mount,
+    page,
+  }) => {
+    await mount<HooksConfig>(<ButtonMinorCustom />, {
+      hooksConfig: {
+        focusRedesignOptOut: true,
+      },
     });
 
-    test("should have the expected styling when roundedCornersOptOut is false", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<ButtonMinor>Foo</ButtonMinor>);
+    const outlined = buttonMinorComponent(page, 0).nth(0);
+    await outlined.focus();
+    await expect(outlined).toHaveCSS("outline", "rgb(255, 188, 25) solid 3px");
+  });
 
-      await expect(buttonMinorComponent(page)).toHaveCSS(
-        "border-radius",
-        "4px"
-      );
-    });
+  test("should have the expected styling when roundedCornersOptOut is false", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ButtonMinor>Foo</ButtonMinor>);
 
-    test("should have the expected styling when roundedCornersOptOut is true", async ({
-      mount,
-      page,
-    }) => {
-      await mount<HooksConfig>(<ButtonMinor>Foo</ButtonMinor>, {
-        hooksConfig: { roundedCornersOptOut: true },
-      });
+    await expect(buttonMinorComponent(page)).toHaveCSS("border-radius", "4px");
+  });
 
-      await expect(buttonMinorComponent(page)).toHaveCSS(
-        `border-radius`,
-        "0px"
-      );
+  test("should have the expected styling when roundedCornersOptOut is true", async ({
+    mount,
+    page,
+  }) => {
+    await mount<HooksConfig>(<ButtonMinor>Foo</ButtonMinor>, {
+      hooksConfig: { roundedCornersOptOut: true },
     });
-  }
-);
+
+    await expect(buttonMinorComponent(page)).toHaveCSS(`border-radius`, "0px");
+  });
+});
 
 test.describe("Check props for Button Minor component", () => {
   test("should render Button Minor with aria-label prop", async ({
@@ -133,7 +121,7 @@ test.describe("Check props for Button Minor component", () => {
 
     await expect(buttonMinorComponent(page, 0)).toHaveAttribute(
       "aria-label",
-      "playwright-aria"
+      "playwright-aria",
     );
   });
 
@@ -156,11 +144,11 @@ test.describe("Check props for Button Minor component", () => {
       await mount(
         <ButtonMinor size="large" subtext={subtext}>
           Title
-        </ButtonMinor>
+        </ButtonMinor>,
       );
 
       await expect(
-        buttonMinorComponent(page, 0).locator("span").locator("span").nth(1)
+        buttonMinorComponent(page, 0).locator("span").locator("span").nth(1),
       ).toHaveText(subtext);
     });
   });
@@ -197,7 +185,7 @@ test.describe("Check props for Button Minor component", () => {
           iconType="bin"
           iconTooltipMessage={tooltipMessage}
           m="100px"
-        />
+        />,
       );
       await page.getByRole("button").locator(ICON).hover({ force: true });
       await expect(tooltipPreview(page)).toHaveText(tooltipMessage);
@@ -214,11 +202,13 @@ test.describe("Check props for Button Minor component", () => {
     await expect(icon(page)).toHaveCSS("position", "absolute");
   });
 
-  ([
-    ["small", 32],
-    ["medium", 40],
-    ["large", 48],
-  ] as [ButtonMinorProps["size"], number][]).forEach(([size, minHeight]) => {
+  (
+    [
+      ["small", 32],
+      ["medium", 40],
+      ["large", 48],
+    ] as [ButtonMinorProps["size"], number][]
+  ).forEach(([size, minHeight]) => {
     test(`should render Button Minor in ${size} size`, async ({
       mount,
       page,
@@ -227,28 +217,28 @@ test.describe("Check props for Button Minor component", () => {
 
       await expect(buttonMinorComponent(page, 0)).toHaveCSS(
         "min-height",
-        `${minHeight}px`
+        `${minHeight}px`,
       );
     });
   });
 
-  ([
-    [BUTTON_ICON_POSITIONS[0], "right"],
-    [BUTTON_ICON_POSITIONS[1], "left"],
-  ] as [ButtonMinorProps["iconPosition"], string][]).forEach(
-    ([iconPosition, margin]) => {
-      test(`should set position to ${iconPosition} for icon in a button`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <ButtonMinorCustom iconType="add" iconPosition={iconPosition} />
-        );
-
-        await expect(icon(page)).toHaveCSS(`margin-${margin}`, "8px");
-      });
-    }
-  );
+  (
+    [
+      [BUTTON_ICON_POSITIONS[0], "right"],
+      [BUTTON_ICON_POSITIONS[1], "left"],
+    ] as [ButtonMinorProps["iconPosition"], string][]
+  ).forEach(([iconPosition, margin]) => {
+    test(`should set position to ${iconPosition} for icon in a button`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <ButtonMinorCustom iconType="add" iconPosition={iconPosition} />,
+      );
+
+      await expect(icon(page)).toHaveCSS(`margin-${margin}`, "8px");
+    });
+  });
 
   test("should render Button Minor with full width", async ({
     mount,
@@ -259,7 +249,7 @@ test.describe("Check props for Button Minor component", () => {
     await assertCssValueIsApproximately(
       buttonMinorComponent(page, 0),
       "width",
-      1365
+      1365,
     );
   });
 
@@ -268,34 +258,34 @@ test.describe("Check props for Button Minor component", () => {
 
     await expect(buttonMinorComponent(page, 0)).toHaveAttribute(
       "href",
-      "https://carbon.sage.com/"
+      "https://carbon.sage.com/",
     );
   });
 
-  ([
-    [true, "white-space"],
-    [false, "flex-wrap"],
-  ] as [ButtonMinorProps["noWrap"], string][]).forEach(
-    ([booleanState, cssValue]) => {
-      test(`should render the Button Minor text with noWrap prop set to ${booleanState}`, async ({
-        mount,
-        page,
-      }) => {
-        const assertion = booleanState ? "nowrap" : "wrap";
-        await mount(
-          <ButtonMinor noWrap={Boolean(booleanState)}>
-            {" "}
-            Long long long long long text{" "}
-          </ButtonMinor>
-        );
-
-        await expect(buttonMinorComponent(page, 0)).toHaveCSS(
-          cssValue,
-          assertion
-        );
-      });
-    }
-  );
+  (
+    [
+      [true, "white-space"],
+      [false, "flex-wrap"],
+    ] as [ButtonMinorProps["noWrap"], string][]
+  ).forEach(([booleanState, cssValue]) => {
+    test(`should render the Button Minor text with noWrap prop set to ${booleanState}`, async ({
+      mount,
+      page,
+    }) => {
+      const assertion = booleanState ? "nowrap" : "wrap";
+      await mount(
+        <ButtonMinor noWrap={Boolean(booleanState)}>
+          {" "}
+          Long long long long long text{" "}
+        </ButtonMinor>,
+      );
+
+      await expect(buttonMinorComponent(page, 0)).toHaveCSS(
+        cssValue,
+        assertion,
+      );
+    });
+  });
 
   ([...buttonPositions] as [string, number][]).forEach(([position, index]) => {
     test(`should check Button Minor is disabled for the ${position} button`, async ({
@@ -319,37 +309,35 @@ test.describe("Check props for Button Minor component", () => {
     });
   });
 
-  ([
-    ["1st", "primary", 0],
-    ["2nd", "secondary", 1],
-    ["3rd", "tertiary", 2],
-  ] as [string, ButtonMinorProps["buttonType"], number][]).forEach(
-    ([position, type, index]) => {
-      test(`should check Button Minor is destructive for the ${position} button when buttonType is ${type}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <ButtonMinorDifferentTypes buttonType={type} destructive />
-        );
-
-        await buttonMinorComponent(page, index).hover({ force: true });
-
-        await expect(buttonMinorComponent(page, index)).toHaveCSS(
-          "background",
-          `${destructive} none repeat scroll 0% 0% / auto padding-box border-box`
-        );
-        await expect(buttonMinorComponent(page, index)).toHaveCSS(
-          "border-color",
-          transparent
-        );
-        await expect(buttonMinorComponent(page, index)).toHaveCSS(
-          "color",
-          "rgb(255, 255, 255)"
-        );
-      });
-    }
-  );
+  (
+    [
+      ["1st", "primary", 0],
+      ["2nd", "secondary", 1],
+      ["3rd", "tertiary", 2],
+    ] as [string, ButtonMinorProps["buttonType"], number][]
+  ).forEach(([position, type, index]) => {
+    test(`should check Button Minor is destructive for the ${position} button when buttonType is ${type}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonMinorDifferentTypes buttonType={type} destructive />);
+
+      await buttonMinorComponent(page, index).hover({ force: true });
+
+      await expect(buttonMinorComponent(page, index)).toHaveCSS(
+        "background",
+        `${destructive} none repeat scroll 0% 0% / auto padding-box border-box`,
+      );
+      await expect(buttonMinorComponent(page, index)).toHaveCSS(
+        "border-color",
+        transparent,
+      );
+      await expect(buttonMinorComponent(page, index)).toHaveCSS(
+        "color",
+        "rgb(255, 255, 255)",
+      );
+    });
+  });
 
   ["_blank", "_self", "_parent", "_top"].forEach((target) => {
     test(`should render Button Minor with target prop set to ${target}`, async ({
@@ -360,7 +348,7 @@ test.describe("Check props for Button Minor component", () => {
 
       await expect(buttonMinorComponent(page, 0)).toHaveAttribute(
         "target",
-        target
+        target,
       );
     });
   });
@@ -408,7 +396,7 @@ test.describe("check events for Button Minor component", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const button = buttonMinorComponent(page, 0);
@@ -426,7 +414,7 @@ test.describe("check events for Button Minor component", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const elementToFocus = buttonMinorComponent(page, 0);
@@ -447,7 +435,7 @@ test.describe("check events for Button Minor component", () => {
           onKeyDown={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
       const elementToFocus = buttonMinorComponent(page, 0);
       await elementToFocus.focus();
@@ -466,7 +454,7 @@ test.describe("check events for Button Minor component", () => {
         onFocus={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const elementToFocus = buttonMinorComponent(page, 0);
diff --git a/src/components/button-minor/button-minor.stories.tsx b/src/components/button-minor/button-minor.stories.tsx
index 6de1c1f6cd..f2fb074128 100644
--- a/src/components/button-minor/button-minor.stories.tsx
+++ b/src/components/button-minor/button-minor.stories.tsx
@@ -9,7 +9,7 @@ const styledSystemProps = generateStyledSystemProps(
   {
     spacing: true,
   },
-  { pt: "1px", pb: "1px", px: "24px" }
+  { pt: "1px", pb: "1px", px: "24px" },
 );
 
 const meta: Meta<typeof ButtonMinor> = {
diff --git a/src/components/button-minor/button-minor.test.tsx b/src/components/button-minor/button-minor.test.tsx
index 996ad227ae..da7591bab5 100644
--- a/src/components/button-minor/button-minor.test.tsx
+++ b/src/components/button-minor/button-minor.test.tsx
@@ -32,7 +32,7 @@ test("should render with expected styles when `buttonType` is 'primary'", () =>
   expect(button).toHaveStyleRule("background", "var(--colorsActionMinor500)");
   expect(button).toHaveStyleRule(
     "border-color",
-    "var(--colorsActionMinorTransparent)"
+    "var(--colorsActionMinorTransparent)",
   );
   expect(button).toHaveStyleRule("color", "var(--colorsActionMinorYang100)");
 });
@@ -81,7 +81,7 @@ test("should render with expected styles when `size` is 'small'", () => {
   expect(button).toHaveStyleRule("min-height", "var(--sizing400)");
   expect(button).toHaveStyleRule(
     "padding",
-    "var(--spacing000) var(--spacing100) var(--spacing000) var(--spacing100)"
+    "var(--spacing000) var(--spacing100) var(--spacing000) var(--spacing100)",
   );
 });
 
@@ -130,5 +130,5 @@ test("should set `ref` to empty after unmount", () => {
 
 testStyledSystemMarginRTL(
   (props) => <ButtonMinor {...props}>foo</ButtonMinor>,
-  () => screen.getByRole("button", { name: "foo" })
+  () => screen.getByRole("button", { name: "foo" }),
 );
diff --git a/src/components/button-toggle/button-toggle-group/button-toggle-group-test.stories.tsx b/src/components/button-toggle/button-toggle-group/button-toggle-group-test.stories.tsx
index 850b382923..29ea0e6b0b 100644
--- a/src/components/button-toggle/button-toggle-group/button-toggle-group-test.stories.tsx
+++ b/src/components/button-toggle/button-toggle-group/button-toggle-group-test.stories.tsx
@@ -17,7 +17,7 @@ export const DefaultStory = () => {
   const [value, setValue] = useState("bar");
   function onChangeHandler(
     event: React.MouseEvent<HTMLButtonElement>,
-    selectedValue?: string
+    selectedValue?: string,
   ) {
     setValue(selectedValue as string);
     action("value set")(selectedValue);
diff --git a/src/components/button-toggle/button-toggle-group/button-toggle-group.component.tsx b/src/components/button-toggle/button-toggle-group/button-toggle-group.component.tsx
index c014f8f93a..e14ddb3655 100644
--- a/src/components/button-toggle/button-toggle-group/button-toggle-group.component.tsx
+++ b/src/components/button-toggle/button-toggle-group/button-toggle-group.component.tsx
@@ -95,14 +95,14 @@ const ButtonToggleGroup = ({
           (child.type as React.FunctionComponent).displayName !==
             ButtonToggle.displayName
         );
-      }
+      },
     );
     return !incorrectChild;
   }, [children]);
 
   invariant(
     hasCorrectItemStructure,
-    `\`ButtonToggleGroup\` only accepts children of type \`${ButtonToggle.displayName}\``
+    `\`ButtonToggleGroup\` only accepts children of type \`${ButtonToggle.displayName}\``,
   );
 
   const labelId = useRef(guid());
@@ -137,7 +137,7 @@ const ButtonToggleGroup = ({
       return;
     }
     const focusedIndex = Array.from(innerButtons).indexOf(
-      document.activeElement
+      document.activeElement,
     );
     let nextElement;
     if (Events.isLeftKey(ev)) {
diff --git a/src/components/button-toggle/button-toggle-group/button-toggle-group.test.tsx b/src/components/button-toggle/button-toggle-group/button-toggle-group.test.tsx
index 1731eb0875..e938ed558b 100644
--- a/src/components/button-toggle/button-toggle-group/button-toggle-group.test.tsx
+++ b/src/components/button-toggle/button-toggle-group/button-toggle-group.test.tsx
@@ -10,7 +10,7 @@ test("should render with provided children", () => {
     <ButtonToggleGroup id="button-toggle-group-id" onChange={() => {}}>
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   expect(screen.getByRole("button", { name: "Foo" })).toBeVisible();
@@ -24,8 +24,8 @@ test("should throw an error when children are not of type ButtonToggle", () => {
     render(
       <ButtonToggleGroup id="button-toggle-group-id" onChange={() => {}}>
         <div>Foo</div>
-      </ButtonToggleGroup>
-    )
+      </ButtonToggleGroup>,
+    ),
   ).toThrow("`ButtonToggleGroup` only accepts children of type `ButtonToggle`");
 
   consoleSpy.mockRestore();
@@ -41,7 +41,7 @@ test("should render with provided label and use it as its accessible name", () =
     >
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   expect(screen.getByText("Group Label")).toBeVisible();
@@ -57,7 +57,7 @@ test("should render with aria-label as its accessible name when the label is not
     >
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   expect(screen.getByRole("group")).toHaveAccessibleName("Group Aria Label");
@@ -72,15 +72,15 @@ test("should render with provided hintText and use it as the accessible descript
     >
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   expect(screen.getByText("Group Hint Text")).toBeVisible();
   expect(
-    screen.getByRole("button", { name: "Foo" })
+    screen.getByRole("button", { name: "Foo" }),
   ).toHaveAccessibleDescription("Group Hint Text");
   expect(
-    screen.getByRole("button", { name: "Bar" })
+    screen.getByRole("button", { name: "Bar" }),
   ).toHaveAccessibleDescription("Group Hint Text");
 });
 
@@ -91,7 +91,7 @@ test("should call onChange with the value of the ButtonToggle that is clicked",
     <ButtonToggleGroup id="button-toggle-group-id" onChange={onChange}>
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   await user.click(screen.getByRole("button", { name: "Foo" }));
@@ -111,7 +111,7 @@ test("should call onChange with null value when allowDeselect is set and a selec
     >
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   await user.click(screen.getByRole("button", { name: "Foo" }));
@@ -130,20 +130,20 @@ test("should render with disabled child buttons and expected styles when disable
     >
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   expect(screen.getByRole("button", { name: "Foo" })).toBeDisabled();
   expect(screen.getByRole("button", { name: "Bar" })).toBeDisabled();
   expect(screen.getByRole("group")).toHaveStyleRule(
     "box-shadow",
-    "inset 0px 0px 0px 1px var(--colorsActionDisabled600)"
+    "inset 0px 0px 0px 1px var(--colorsActionDisabled600)",
   );
   expect(screen.getByRole("group")).toHaveStyleRule("cursor: not-allowed");
 
   expect(screen.getByText("Group Hint Text")).toHaveStyleRule(
     "color",
-    "var(--colorsUtilityYin030)"
+    "var(--colorsUtilityYin030)",
   );
 });
 
@@ -159,7 +159,7 @@ test("should render with expected styles when fullWidth prop is set", () => {
         Foo
       </ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   expect(screen.getByRole("group")).toHaveStyle({ width: "100%" });
@@ -176,7 +176,7 @@ test("should render with expected styles when inputWidth prop is set", () => {
     >
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   expect(screen.getByRole("group")).toHaveStyle({ width: "50%" });
@@ -192,7 +192,7 @@ test("should render with expected styles when labelInline prop is set", () => {
     >
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   expect(screen.getByRole("group")).toHaveStyle({ flexWrap: "nowrap" });
@@ -211,7 +211,7 @@ test("should not render labelHelp or filedHelp when validationRedesignOptIn is t
         <ButtonToggle value="foo">Foo</ButtonToggle>
         <ButtonToggle value="bar">Bar</ButtonToggle>
       </ButtonToggleGroup>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.queryByText("Label Help")).not.toBeInTheDocument();
@@ -228,7 +228,7 @@ test("should only allow the first button to be tabbable when none are selected",
     >
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   await user.tab();
@@ -249,7 +249,7 @@ test("should only allow a selected button to be tabbable", async () => {
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
       <ButtonToggle value="baz">Baz</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   await user.tab();
@@ -271,7 +271,7 @@ test("should focus the previous button of the currently focused button when the
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
       <ButtonToggle value="baz">Baz</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   await user.tab();
@@ -290,7 +290,7 @@ test("should focus the last button when the first button is focused and the left
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
       <ButtonToggle value="baz">Baz</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   await user.tab();
@@ -309,7 +309,7 @@ test("should focus the next button of the currently focused button when the righ
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
       <ButtonToggle value="baz">Baz</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   await user.tab();
@@ -328,7 +328,7 @@ test("should focus the first button when the last button is focused and the righ
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
       <ButtonToggle value="baz">Baz</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   await user.tab();
@@ -347,7 +347,7 @@ test("should not change focus when a non arrow key is pressed", async () => {
       <ButtonToggle value="foo">Foo</ButtonToggle>
       <ButtonToggle value="bar">Bar</ButtonToggle>
       <ButtonToggle value="baz">Baz</ButtonToggle>
-    </ButtonToggleGroup>
+    </ButtonToggleGroup>,
   );
 
   await user.tab();
@@ -370,5 +370,5 @@ testStyledSystemMarginRTL(
   // FE-6834 raised to address this
   () => screen.getAllByTestId("button-toggle-group")[0],
   undefined,
-  { modifier: "&&&" }
+  { modifier: "&&&" },
 );
diff --git a/src/components/button-toggle/button-toggle-test.stories.tsx b/src/components/button-toggle/button-toggle-test.stories.tsx
index a0252f7dbf..5cd7e6f3a3 100644
--- a/src/components/button-toggle/button-toggle-test.stories.tsx
+++ b/src/components/button-toggle/button-toggle-test.stories.tsx
@@ -64,7 +64,7 @@ export const DefaultStory = ({
   const [value, setValue] = useState<string | undefined>("");
   function onChangeHandler(
     event: React.MouseEvent<HTMLButtonElement>,
-    selectedButtonValue?: string
+    selectedButtonValue?: string,
   ) {
     setValue(selectedButtonValue);
     action("value set")(selectedButtonValue);
diff --git a/src/components/button-toggle/button-toggle.component.tsx b/src/components/button-toggle/button-toggle.component.tsx
index c047eb9097..383cc21a70 100644
--- a/src/components/button-toggle/button-toggle.component.tsx
+++ b/src/components/button-toggle/button-toggle.component.tsx
@@ -62,13 +62,13 @@ export const ButtonToggle = ({
 }: ButtonToggleProps) => {
   invariant(
     !!(children || buttonIcon),
-    "Either prop `buttonIcon` must be defined, or this node must have children"
+    "Either prop `buttonIcon` must be defined, or this node must have children",
   );
 
   if (grouped && !deprecateGroupedWarnTriggered) {
     deprecateGroupedWarnTriggered = true;
     Logger.deprecate(
-      "The `grouped` prop in `ButtonToggle` component is deprecated and will soon be removed. Spacing between buttons is no longer no removed."
+      "The `grouped` prop in `ButtonToggle` component is deprecated and will soon be removed. Spacing between buttons is no longer no removed.",
     );
   }
 
@@ -120,7 +120,7 @@ export const ButtonToggle = ({
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate(
-      "Uncontrolled behaviour in `Button Toggle` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+      "Uncontrolled behaviour in `Button Toggle` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
     );
   }
 
diff --git a/src/components/button-toggle/button-toggle.pw.tsx b/src/components/button-toggle/button-toggle.pw.tsx
index 5ed0850377..f0509cdb7a 100644
--- a/src/components/button-toggle/button-toggle.pw.tsx
+++ b/src/components/button-toggle/button-toggle.pw.tsx
@@ -76,29 +76,29 @@ test.describe("Styling tests", () => {
     await toggleButton1.focus();
     await expect(toggleButton1).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(toggleButton1).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
     await toggleButton2.focus();
     await expect(toggleButton2).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(toggleButton2).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
     await toggleButton3.focus();
     await expect(toggleButton3).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(toggleButton3).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -119,15 +119,15 @@ test.describe("Styling tests", () => {
 
     await expect(buttonToggleButton(page).nth(0)).toHaveCSS(
       "border-radius",
-      "4px 0px 0px 4px"
+      "4px 0px 0px 4px",
     );
     await expect(buttonToggleButton(page).nth(1)).toHaveCSS(
       "border-radius",
-      "0px"
+      "0px",
     );
     await expect(buttonToggleButton(page).nth(2)).toHaveCSS(
       "border-radius",
-      "0px 4px 4px 0px"
+      "0px 4px 4px 0px",
     );
   });
 
@@ -139,15 +139,15 @@ test.describe("Styling tests", () => {
 
     await expect(buttonToggleButton(page).nth(0)).toHaveCSS(
       "border-radius",
-      "4px"
+      "4px",
     );
     await expect(buttonToggleButton(page).nth(1)).toHaveCSS(
       "border-radius",
-      "4px"
+      "4px",
     );
     await expect(buttonToggleButton(page).nth(2)).toHaveCSS(
       "border-radius",
-      "4px"
+      "4px",
     );
   });
 });
@@ -158,39 +158,39 @@ test.describe("Prop tests", () => {
 
     await expect(buttonToggleButton(page).first()).toHaveAttribute(
       "aria-label",
-      "playwright-aria"
+      "playwright-aria",
     );
   });
 
   test("should render with aria-labelledby prop", async ({ mount, page }) => {
     await mount(
-      <ButtonToggleComponent aria-labelledby={CHARACTERS.STANDARD} />
+      <ButtonToggleComponent aria-labelledby={CHARACTERS.STANDARD} />,
     );
 
     await expect(buttonToggleButton(page).first()).toHaveAttribute(
       "aria-labelledby",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
-  ([
-    [true, "true"],
-    [false, "false"],
-  ] as [ButtonToggleProps["pressed"], string][]).forEach(
-    ([state, ariaPressed]) => {
-      test(`should render with aria-pressed attribute ${ariaPressed} when pressed prop is ${state}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<ButtonToggleComponent pressed={state} />);
+  (
+    [
+      [true, "true"],
+      [false, "false"],
+    ] as [ButtonToggleProps["pressed"], string][]
+  ).forEach(([state, ariaPressed]) => {
+    test(`should render with aria-pressed attribute ${ariaPressed} when pressed prop is ${state}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonToggleComponent pressed={state} />);
 
-        await expect(buttonToggleButton(page).first()).toHaveAttribute(
-          "aria-pressed",
-          ariaPressed
-        );
-      });
-    }
-  );
+      await expect(buttonToggleButton(page).first()).toHaveAttribute(
+        "aria-pressed",
+        ariaPressed,
+      );
+    });
+  });
 
   test("should render with data-component prop set to playwright_data", async ({
     mount,
@@ -199,7 +199,7 @@ test.describe("Prop tests", () => {
     await mount(<ButtonToggleComponent data-component={CHARACTERS.STANDARD} />);
 
     await expect(
-      buttonToggleButton(page).first().locator("..")
+      buttonToggleButton(page).first().locator(".."),
     ).toHaveAttribute("data-component", CHARACTERS.STANDARD);
   });
 
@@ -210,7 +210,7 @@ test.describe("Prop tests", () => {
     await mount(<ButtonToggleComponent data-element={CHARACTERS.STANDARD} />);
 
     await expect(
-      buttonToggleButton(page).first().locator("..")
+      buttonToggleButton(page).first().locator(".."),
     ).toHaveAttribute("data-element", CHARACTERS.STANDARD);
   });
 
@@ -221,30 +221,30 @@ test.describe("Prop tests", () => {
     await mount(<ButtonToggleComponent data-role={CHARACTERS.STANDARD} />);
 
     await expect(
-      buttonToggleButton(page).first().locator("..")
+      buttonToggleButton(page).first().locator(".."),
     ).toHaveAttribute("data-role", CHARACTERS.STANDARD);
   });
 
-  ([
-    [SIZE.SMALL, 24, 8],
-    [SIZE.MEDIUM, 32, 8],
-    [SIZE.LARGE, 40, 12],
-  ] as [ButtonToggleProps["size"], number, number][]).forEach(
-    ([size, height, padding]) => {
-      test(`should render button with height ${height} and padding ${padding} when size is ${size}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <ButtonToggleComponent size={size}>{size}</ButtonToggleComponent>
-        );
+  (
+    [
+      [SIZE.SMALL, 24, 8],
+      [SIZE.MEDIUM, 32, 8],
+      [SIZE.LARGE, 40, 12],
+    ] as [ButtonToggleProps["size"], number, number][]
+  ).forEach(([size, height, padding]) => {
+    test(`should render button with height ${height} and padding ${padding} when size is ${size}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <ButtonToggleComponent size={size}>{size}</ButtonToggleComponent>,
+      );
 
-        const firstButton = buttonToggleButton(page).nth(0);
-        await expect(firstButton).toHaveCSS("min-height", `${height}px`);
-        await expect(firstButton).toHaveCSS("padding", `0px ${padding}px`);
-      });
-    }
-  );
+      const firstButton = buttonToggleButton(page).nth(0);
+      await expect(firstButton).toHaveCSS("min-height", `${height}px`);
+      await expect(firstButton).toHaveCSS("padding", `0px ${padding}px`);
+    });
+  });
 
   (["add", "share", "tick"] as const).forEach((type) => {
     test(`should render with ${type} icon`, async ({ mount, page }) => {
@@ -252,64 +252,64 @@ test.describe("Prop tests", () => {
         <ButtonToggleComponent buttonIcon={type} buttonIconSize="large">
           {" "}
           {type}
-        </ButtonToggleComponent>
+        </ButtonToggleComponent>,
       );
 
       await expect(icon(page).nth(0)).toHaveAttribute("type", type);
     });
   });
 
-  ([
-    [SIZE.SMALL, 72, "8px"],
-    [SIZE.MEDIUM, 88, "8px 12px 0px"],
-    [SIZE.LARGE, 120, "8px 24px"],
-  ] as [ButtonToggleProps["size"], number, string][]).forEach(
-    ([size, height, padding]) => {
-      test(`should render button with height ${height} and padding ${padding} when size is ${size} and buttonIconSize is large`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <ButtonToggleComponent
-            buttonIcon="tick"
-            buttonIconSize="large"
-            size={size}
-          >
-            {size}
-          </ButtonToggleComponent>
-        );
+  (
+    [
+      [SIZE.SMALL, 72, "8px"],
+      [SIZE.MEDIUM, 88, "8px 12px 0px"],
+      [SIZE.LARGE, 120, "8px 24px"],
+    ] as [ButtonToggleProps["size"], number, string][]
+  ).forEach(([size, height, padding]) => {
+    test(`should render button with height ${height} and padding ${padding} when size is ${size} and buttonIconSize is large`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <ButtonToggleComponent
+          buttonIcon="tick"
+          buttonIconSize="large"
+          size={size}
+        >
+          {size}
+        </ButtonToggleComponent>,
+      );
 
-        const firstButton = buttonToggleButton(page).nth(0);
-        await expect(firstButton).toHaveCSS("min-height", `${height}px`);
-        await expect(firstButton).toHaveCSS("padding", `${padding}`);
-      });
-    }
-  );
+      const firstButton = buttonToggleButton(page).nth(0);
+      await expect(firstButton).toHaveCSS("min-height", `${height}px`);
+      await expect(firstButton).toHaveCSS("padding", `${padding}`);
+    });
+  });
 
-  ([
-    [SIZE.SMALL, 20],
-    [SIZE.LARGE, 32],
-  ] as [ButtonToggleProps["buttonIconSize"], number][]).forEach(
-    ([buttonIconSize, value]) => {
-      test(`should render icon with height and width ${value} when buttonIconSize is ${buttonIconSize}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <ButtonToggleComponent
-            buttonIcon="tick"
-            buttonIconSize={buttonIconSize}
-          >
-            {buttonIconSize}
-          </ButtonToggleComponent>
-        );
+  (
+    [
+      [SIZE.SMALL, 20],
+      [SIZE.LARGE, 32],
+    ] as [ButtonToggleProps["buttonIconSize"], number][]
+  ).forEach(([buttonIconSize, value]) => {
+    test(`should render icon with height and width ${value} when buttonIconSize is ${buttonIconSize}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <ButtonToggleComponent
+          buttonIcon="tick"
+          buttonIconSize={buttonIconSize}
+        >
+          {buttonIconSize}
+        </ButtonToggleComponent>,
+      );
 
-        const firstIcon = icon(page).nth(0);
-        await expect(firstIcon).toHaveCSS("height", `${value}px`);
-        await expect(firstIcon).toHaveCSS("width", `${value}px`);
-      });
-    }
-  );
+      const firstIcon = icon(page).nth(0);
+      await expect(firstIcon).toHaveCSS("height", `${value}px`);
+      await expect(firstIcon).toHaveCSS("width", `${value}px`);
+    });
+  });
 
   [...characters].forEach(([labelText]) => {
     test(`should render with text as ${labelText} when Children prop is ${labelText}`, async ({
@@ -330,7 +330,7 @@ test.describe("Prop tests", () => {
 
     await expect(buttonToggleButton(page).nth(0)).toHaveAttribute(
       "value",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 });
@@ -347,7 +347,7 @@ test.describe("Event tests", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await expect(buttonToggleButton(page).nth(0)).toBeDisabled();
@@ -365,7 +365,7 @@ test.describe("Event tests", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await buttonTogglePreview(page).nth(0).click();
@@ -382,7 +382,7 @@ test.describe("Event tests", () => {
         onFocus={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const toggleButton = buttonToggleButton(page).nth(0);
@@ -400,7 +400,7 @@ test.describe("Event tests", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const toggleButton = buttonToggleButton(page).nth(0);
@@ -438,17 +438,19 @@ test.describe("Accessibility tests", () => {
     await checkAccessibility(page);
   });
 
-  ([
-    [SIZE.SMALL, 24],
-    [SIZE.MEDIUM, 32],
-    [SIZE.LARGE, 40],
-  ] as [ButtonToggleProps["size"], number][]).forEach(([size]) => {
+  (
+    [
+      [SIZE.SMALL, 24],
+      [SIZE.MEDIUM, 32],
+      [SIZE.LARGE, 40],
+    ] as [ButtonToggleProps["size"], number][]
+  ).forEach(([size]) => {
     test(`should pass accessibility tests for Button-Toggle ${size}`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <ButtonToggleComponent size={size}> {size}</ButtonToggleComponent>
+        <ButtonToggleComponent size={size}> {size}</ButtonToggleComponent>,
       );
 
       await checkAccessibility(page);
@@ -465,12 +467,12 @@ test.describe("Accessibility tests", () => {
           <ButtonToggleComponent buttonIcon={type} buttonIconSize="large">
             {" "}
             {type}
-          </ButtonToggleComponent>
+          </ButtonToggleComponent>,
         );
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 });
 
@@ -483,7 +485,7 @@ test.describe("Prop tests for group component", () => {
 
     await expect(page.getByRole("group")).toHaveAttribute(
       "data-component",
-      testPropValue
+      testPropValue,
     );
   });
 
@@ -495,7 +497,7 @@ test.describe("Prop tests for group component", () => {
 
     await expect(buttonToggleGroup(page).nth(0)).toHaveAttribute(
       "data-element",
-      testPropValue
+      testPropValue,
     );
   });
 
@@ -507,7 +509,7 @@ test.describe("Prop tests for group component", () => {
 
     await expect(buttonToggleGroup(page).nth(0)).toHaveAttribute(
       "data-role",
-      testPropValue
+      testPropValue,
     );
   });
 
@@ -532,7 +534,7 @@ test.describe("Prop tests for group component", () => {
     await helpIcon.hover();
     await expect(getDataElementByValue(page, "tooltip")).toBeVisible();
     await expect(getDataElementByValue(page, "tooltip")).toHaveText(
-      testPropValue
+      testPropValue,
     );
   });
 
@@ -572,16 +574,16 @@ test.describe("Prop tests for group component", () => {
         <ButtonToggleGroupComponent
           fieldHelp="fieldHelpText"
           fieldHelpInline={state}
-        />
+        />,
       );
 
       if (state) {
         await expect(
-          getDataElementByValue(page, "help").locator("..").locator("..")
+          getDataElementByValue(page, "help").locator("..").locator(".."),
         ).toHaveAttribute("data-component", "button-toggle-group");
       } else {
         await expect(
-          getDataElementByValue(page, "help").locator("..")
+          getDataElementByValue(page, "help").locator(".."),
         ).toHaveAttribute("data-component", "button-toggle-group");
       }
     });
@@ -616,29 +618,27 @@ test.describe("Prop tests for group component", () => {
 
     await expect(buttonToggleButton(page).nth(1)).toHaveAttribute(
       "aria-pressed",
-      "true"
+      "true",
     );
   });
 
-  ([
-    [25, 341],
-    [50, 683],
-    [100, 1366],
-  ] as [ButtonToggleGroupProps["inputWidth"], number][]).forEach(
-    ([labelWidth, width]) => {
-      test(`should render with labelWidth prop of ${labelWidth} and width of ${width}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<ButtonToggleGroupNotInBox inputWidth={labelWidth} />);
+  (
+    [
+      [25, 341],
+      [50, 683],
+      [100, 1366],
+    ] as [ButtonToggleGroupProps["inputWidth"], number][]
+  ).forEach(([labelWidth, width]) => {
+    test(`should render with labelWidth prop of ${labelWidth} and width of ${width}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ButtonToggleGroupNotInBox inputWidth={labelWidth} />);
 
-        const buttonParent = buttonToggleButton(page)
-          .locator("..")
-          .locator("..");
-        await assertCssValueIsApproximately(buttonParent, "width", width);
-      });
-    }
-  );
+      const buttonParent = buttonToggleButton(page).locator("..").locator("..");
+      await assertCssValueIsApproximately(buttonParent, "width", width);
+    });
+  });
 
   test("should render with helpAriaLabel set to playwright_data", async ({
     mount,
@@ -648,24 +648,26 @@ test.describe("Prop tests for group component", () => {
 
     await expect(buttonToggleGroupHelpIcon(page)).toHaveAttribute(
       "aria-label",
-      testPropValue
+      testPropValue,
     );
   });
 
-  ([
-    ["8px", 1],
-    ["16px", 2],
-  ] as const).forEach(([padding, spacing]) => {
+  (
+    [
+      ["8px", 1],
+      ["16px", 2],
+    ] as const
+  ).forEach(([padding, spacing]) => {
     test(`should render with padding of ${padding} if labelSpacing prop is ${spacing}`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <ButtonToggleGroupComponent labelInline labelSpacing={spacing} />
+        <ButtonToggleGroupComponent labelInline labelSpacing={spacing} />,
       );
 
       await expect(
-        getDataElementByValue(page, "label").locator("..")
+        getDataElementByValue(page, "label").locator(".."),
       ).toHaveCSS("padding-right", padding);
     });
   });
@@ -675,7 +677,7 @@ test.describe("Prop tests for group component", () => {
 
     await expect(buttonTogglePreview(page).nth(0)).toHaveCSS(
       "flex",
-      "1 1 auto"
+      "1 1 auto",
     );
   });
 
@@ -688,7 +690,7 @@ test.describe("Prop tests for group component", () => {
     await assertCssValueIsApproximately(
       buttonToggleButton(page).nth(0),
       "width",
-      453
+      453,
     );
   });
 });
@@ -704,7 +706,7 @@ test.describe("Event tests for group component", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await buttonTogglePreview(page).nth(0).click();
@@ -722,7 +724,7 @@ test.describe("Event tests for group component", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await buttonTogglePreview(page).nth(0).click();
@@ -741,7 +743,7 @@ test.describe("Event tests for group component", () => {
         onChange={(event, value) => {
           onChangeValue = value;
         }}
-      />
+      />,
     );
 
     await page.getByRole("button", { name: "foo" }).click();
@@ -901,7 +903,7 @@ test.describe("Accessibility tests for group component", () => {
       page,
     }) => {
       await mount(
-        <ButtonToggleGroupComponent labelInline labelSpacing={spacing} />
+        <ButtonToggleGroupComponent labelInline labelSpacing={spacing} />,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/button-toggle/button-toggle.stories.tsx b/src/components/button-toggle/button-toggle.stories.tsx
index e491b06c21..37c2a7e484 100644
--- a/src/components/button-toggle/button-toggle.stories.tsx
+++ b/src/components/button-toggle/button-toggle.stories.tsx
@@ -49,7 +49,7 @@ export const Controlled: Story = () => {
   const [value, setValue] = useState("bar");
   function onChangeHandler(
     event: React.MouseEvent<HTMLButtonElement>,
-    selectedValue?: string
+    selectedValue?: string,
   ) {
     setValue(selectedValue as string);
   }
@@ -74,7 +74,7 @@ export const AriaLabel: Story = () => {
   const [value, setValue] = useState("bar");
   function onChangeHandler(
     event: React.MouseEvent<HTMLButtonElement>,
-    selectedValue?: string
+    selectedValue?: string,
   ) {
     setValue(selectedValue as string);
   }
@@ -118,7 +118,7 @@ export const AllowDeselection: Story = () => {
   const [value, setValue] = useState("bar");
   function onChangeHandler(
     event: React.MouseEvent<HTMLButtonElement>,
-    selectedValue?: string
+    selectedValue?: string,
   ) {
     setValue(selectedValue as string);
   }
diff --git a/src/components/button-toggle/button-toggle.style.ts b/src/components/button-toggle/button-toggle.style.ts
index fffbd07876..9fff91143c 100644
--- a/src/components/button-toggle/button-toggle.style.ts
+++ b/src/components/button-toggle/button-toggle.style.ts
@@ -193,36 +193,35 @@ const StyledButtonToggleWrapper = styled.div<StyledButtonToggleWrapperProps>`
   display: inline-block;
   vertical-align: middle;
 
-  ${({ grouped }) =>
+  ${({ grouped }) => css`
+    ${!grouped &&
     css`
-      ${!grouped &&
-      css`
-        &&&& {
-          ${StyledButtonToggle} {
-            border-radius: var(--borderRadius050);
-          }
+      &&&& {
+        ${StyledButtonToggle} {
+          border-radius: var(--borderRadius050);
         }
-      `}
+      }
+    `}
 
-      ${grouped &&
-      css`
-        &&&& {
-          :first-of-type {
-            ${StyledButtonToggle} {
-              border-top-left-radius: var(--borderRadius050);
-              border-bottom-left-radius: var(--borderRadius050);
-            }
+    ${grouped &&
+    css`
+      &&&& {
+        :first-of-type {
+          ${StyledButtonToggle} {
+            border-top-left-radius: var(--borderRadius050);
+            border-bottom-left-radius: var(--borderRadius050);
           }
+        }
 
-          :last-of-type {
-            ${StyledButtonToggle} {
-              border-top-right-radius: var(--borderRadius050);
-              border-bottom-right-radius: var(--borderRadius050);
-            }
+        :last-of-type {
+          ${StyledButtonToggle} {
+            border-top-right-radius: var(--borderRadius050);
+            border-bottom-right-radius: var(--borderRadius050);
           }
         }
-      `}
+      }
     `}
+  `}
 
   ${({ grouped }) =>
     grouped &&
diff --git a/src/components/button-toggle/button-toggle.test.tsx b/src/components/button-toggle/button-toggle.test.tsx
index c64dd0997b..c35b27e2eb 100644
--- a/src/components/button-toggle/button-toggle.test.tsx
+++ b/src/components/button-toggle/button-toggle.test.tsx
@@ -12,7 +12,7 @@ test("should display a deprecation warning for uncontrolled behaviour which is t
   render(<ButtonToggle>Button</ButtonToggle>);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Button Toggle` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Button Toggle` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
   loggerSpy.mockRestore();
@@ -25,7 +25,7 @@ test("should display a deprecation warning for the `grouped` prop which is trigg
   render(<ButtonToggle grouped>Button</ButtonToggle>);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "The `grouped` prop in `ButtonToggle` component is deprecated and will soon be removed. Spacing between buttons is no longer no removed."
+    "The `grouped` prop in `ButtonToggle` component is deprecated and will soon be removed. Spacing between buttons is no longer no removed.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1); // total two times to account for uncontrolled behaviour warning
   loggerSpy.mockRestore();
@@ -65,7 +65,7 @@ test("should call `onFocus` passed via InputGroupContext when the button is focu
   render(
     <InputGroupContext.Provider value={{ onFocus: contextOnFocus }}>
       <ButtonToggle>Button</ButtonToggle>
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -78,7 +78,7 @@ test("should call `onBlur` passed via InputGroupContext when the button is blurr
   render(
     <InputGroupContext.Provider value={{ onBlur: contextOnBlur }}>
       <ButtonToggle>Button</ButtonToggle>
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   await user.click(screen.getByRole("button"));
@@ -92,7 +92,7 @@ test("should call `onMouseEnter` passed via InputGroupContext when the button is
   render(
     <InputGroupContext.Provider value={{ onMouseEnter: contextOnMouseEnter }}>
       <ButtonToggle>Button</ButtonToggle>
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   await user.hover(screen.getByRole("button"));
@@ -105,7 +105,7 @@ test("should call `onMouseLeave` passed via InputGroupContext when the button is
   render(
     <InputGroupContext.Provider value={{ onMouseLeave: contextOnMouseLeave }}>
       <ButtonToggle>Button</ButtonToggle>
-    </InputGroupContext.Provider>
+    </InputGroupContext.Provider>,
   );
 
   await user.hover(screen.getByRole("button"));
@@ -130,7 +130,7 @@ test("should render disabled button with expected styles when pressed is set", (
   render(
     <ButtonToggle disabled pressed>
       Button
-    </ButtonToggle>
+    </ButtonToggle>,
   );
 
   expect(screen.getByRole("button")).toBeDisabled();
@@ -152,7 +152,7 @@ test("should render with expected styles when buttonIcon is set and buttonIconSi
   render(
     <ButtonToggle buttonIcon="add" buttonIconSize="large">
       Button
-    </ButtonToggle>
+    </ButtonToggle>,
   );
 
   expect(screen.getByTestId("button-toggle-icon")).toHaveStyle({
@@ -173,7 +173,7 @@ test("should throw an error when neither children or a `buttonIcon` is provided"
   const consoleSpy = jest.spyOn(console, "error").mockImplementation(() => {});
 
   expect(() => render(<ButtonToggle />)).toThrow(
-    "Either prop `buttonIcon` must be defined, or this node must have children"
+    "Either prop `buttonIcon` must be defined, or this node must have children",
   );
 
   consoleSpy.mockRestore();
diff --git a/src/components/button-toggle/components.test-pw.tsx b/src/components/button-toggle/components.test-pw.tsx
index eaafb81e38..ec4b517525 100644
--- a/src/components/button-toggle/components.test-pw.tsx
+++ b/src/components/button-toggle/components.test-pw.tsx
@@ -51,7 +51,7 @@ export const ButtonToggleComponent = ({
 };
 
 export const ButtonToggleGroupComponent = (
-  props: Partial<ButtonToggleGroupProps>
+  props: Partial<ButtonToggleGroupProps>,
 ) => (
   <Box margin={4} display="flex" flexWrap="nowrap">
     <ButtonToggleGroup
@@ -79,7 +79,7 @@ export const ButtonToggleGroupComponent = (
 );
 
 export const ButtonToggleGroupNotInBox = (
-  props: Partial<ButtonToggleGroupProps>
+  props: Partial<ButtonToggleGroupProps>,
 ) => (
   <ButtonToggleGroup
     id="button-toggle-group-id"
diff --git a/src/components/button/button-test.stories.tsx b/src/components/button/button-test.stories.tsx
index 56f9f105b6..16439a77df 100644
--- a/src/components/button/button-test.stories.tsx
+++ b/src/components/button/button-test.stories.tsx
@@ -118,7 +118,7 @@ ButtonAsASiblingStory.story = {
 
 export const generateButtons = (
   buttonType: ButtonTypes,
-  iconPosition: ButtonIconPosition
+  iconPosition: ButtonIconPosition,
 ) => {
   return (
     <Box>
diff --git a/src/components/button/button.component.tsx b/src/components/button/button.component.tsx
index c7940c5209..cf5da5cf3e 100644
--- a/src/components/button/button.component.tsx
+++ b/src/components/button/button.component.tsx
@@ -73,7 +73,7 @@ export interface ButtonProps extends SpaceProps, TagProps {
   onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
   /** onClick handler */
   onClick?: (
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
   ) => void;
   /** Assigns a size to the button: "small" | "medium" | "large" */
   size?: SizeOptions;
@@ -212,7 +212,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       target,
       ...rest
     }: ButtonProps,
-    ref
+    ref,
   ) => {
     const {
       buttonType: buttonTypeContext,
@@ -230,25 +230,24 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     invariant(
       children !== undefined || !!iconType,
-      "Either prop `iconType` must be defined or this node must have children."
+      "Either prop `iconType` must be defined or this node must have children.",
     );
     if (subtext) {
       invariant(
         size === "large",
-        "subtext prop has no effect unless the button is large."
+        "subtext prop has no effect unless the button is large.",
       );
     }
 
     const [internalRef, setInternalRef] = useState<HTMLButtonElement>();
 
-    const { inSplitButton, onChildButtonClick } = useContext(
-      SplitButtonContext
-    );
+    const { inSplitButton, onChildButtonClick } =
+      useContext(SplitButtonContext);
 
     let paddingX;
 
     const handleLinkKeyDown = (
-      event: React.KeyboardEvent<HTMLButtonElement>
+      event: React.KeyboardEvent<HTMLButtonElement>,
     ) => {
       // If space key click link
       if (event.key === " ") {
@@ -275,7 +274,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         if (typeof ref === "object") ref.current = reference;
         if (typeof ref === "function") ref(reference);
       },
-      [ref]
+      [ref],
     );
 
     const isValidChildren = children !== undefined && children !== false;
@@ -324,7 +323,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         })}
       </StyledButton>
     );
-  }
+  },
 );
 
 Button.displayName = "Button";
diff --git a/src/components/button/button.pw.tsx b/src/components/button/button.pw.tsx
index acd8ecbc9d..05b1ff58ff 100644
--- a/src/components/button/button.pw.tsx
+++ b/src/components/button/button.pw.tsx
@@ -67,7 +67,7 @@ test.describe("Button component", () => {
       await mount(
         <Button size="large" subtext={subtext}>
           foo
-        </Button>
+        </Button>,
       );
 
       await expect(buttonSubtextPreview(page)).toHaveText(subtext);
@@ -84,7 +84,7 @@ test.describe("Button component", () => {
           iconType="bin"
           iconTooltipMessage={tooltipMessage}
           aria-label="bin"
-        />
+        />,
       );
 
       await page.getByRole("button").locator(ICON).hover({ force: true });
@@ -100,7 +100,7 @@ test.describe("Button component", () => {
     await mount(
       <Button iconType="add" iconPosition="after">
         IconPosition
-      </Button>
+      </Button>,
     );
 
     await expect(icon(page)).toHaveCSS("margin-left", "8px");
@@ -113,7 +113,7 @@ test.describe("Button component", () => {
     await mount(
       <Button iconType="add" iconPosition="before">
         IconPosition
-      </Button>
+      </Button>,
     );
 
     await expect(icon(page)).toHaveCSS("margin-right", "8px");
@@ -125,29 +125,29 @@ test.describe("Button component", () => {
     await expect(buttonDataComponent(page)).toHaveCSS("width", "1366px");
   });
 
-  ([
-    [true, "nowrap"],
-    [false, "normal"],
-  ] as [ButtonProps["noWrap"], string][]).forEach(
-    ([booleanValue, cssValue]) => {
-      test(`should render the Button text with noWrap prop ${booleanValue}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <Button noWrap={Boolean(booleanValue)}>
-            {" "}
-            Long long long long long text{" "}
-          </Button>
-        );
-
-        await expect(buttonDataComponent(page)).toHaveCSS(
-          "white-space",
-          `${cssValue}`
-        );
-      });
-    }
-  );
+  (
+    [
+      [true, "nowrap"],
+      [false, "normal"],
+    ] as [ButtonProps["noWrap"], string][]
+  ).forEach(([booleanValue, cssValue]) => {
+    test(`should render the Button text with noWrap prop ${booleanValue}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <Button noWrap={Boolean(booleanValue)}>
+          {" "}
+          Long long long long long text{" "}
+        </Button>,
+      );
+
+      await expect(buttonDataComponent(page)).toHaveCSS(
+        "white-space",
+        `${cssValue}`,
+      );
+    });
+  });
 
   test("should check Button is disabled", async ({ mount, page }) => {
     await mount(<ButtonDifferentTypes disabled />);
@@ -191,7 +191,7 @@ test.describe("Check events for Button component", () => {
         }}
       >
         Foo
-      </Button>
+      </Button>,
     );
 
     const buttonComponent = page.getByRole("button");
@@ -211,7 +211,7 @@ test.describe("Check events for Button component", () => {
         }}
       >
         Foo
-      </Button>
+      </Button>,
     );
 
     const buttonComponent = page.getByRole("button");
@@ -233,7 +233,7 @@ test.describe("Check events for Button component", () => {
         }}
       >
         Foo
-      </Button>
+      </Button>,
     );
 
     const buttonComponent = page.getByRole("button");
@@ -253,7 +253,7 @@ test.describe("Check events for Button component", () => {
         }}
       >
         Foo
-      </Button>
+      </Button>,
     );
 
     const buttonComponent = page.getByRole("button");
@@ -271,11 +271,11 @@ test.describe("When focused", () => {
     await buttonDataComponent(page).focus();
     await expect(buttonDataComponent(page)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(buttonDataComponent(page)).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -289,7 +289,7 @@ test.describe("When focused", () => {
     await buttonDataComponent(page).focus();
     await expect(buttonDataComponent(page)).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 });
@@ -329,7 +329,7 @@ test.describe("Accessibility tests for Button", () => {
     page,
   }) => {
     await mount(
-      <ButtonAsASiblingExample>{CHARACTERS.STANDARD}</ButtonAsASiblingExample>
+      <ButtonAsASiblingExample>{CHARACTERS.STANDARD}</ButtonAsASiblingExample>,
     );
 
     await checkAccessibility(page);
@@ -556,7 +556,7 @@ test.describe("Accessibility tests for Button", () => {
     page,
   }) => {
     await mount(
-      <Button buttonType="primary" iconType="bin" aria-label="bin-icon" />
+      <Button buttonType="primary" iconType="bin" aria-label="bin-icon" />,
     );
 
     await checkAccessibility(page);
@@ -587,7 +587,7 @@ test.describe("Accessibility tests for Button", () => {
     await mount(
       <Button buttonType="gradient-white" iconType="home">
         Foo
-      </Button>
+      </Button>,
     );
 
     await checkAccessibility(page);
@@ -609,7 +609,7 @@ test.describe("Accessibility tests for Button", () => {
     await mount(
       <Button buttonType="gradient-grey" iconType="home">
         Foo
-      </Button>
+      </Button>,
     );
 
     await checkAccessibility(page);
diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx
index 362b81a6b4..2eead2bbc4 100644
--- a/src/components/button/button.stories.tsx
+++ b/src/components/button/button.stories.tsx
@@ -8,7 +8,7 @@ const styledSystemProps = generateStyledSystemProps(
   {
     spacing: true,
   },
-  { pt: "1px", pb: "1px", px: "24px" }
+  { pt: "1px", pb: "1px", px: "24px" },
 );
 
 const meta: Meta<typeof Button> = {
diff --git a/src/components/button/button.test.tsx b/src/components/button/button.test.tsx
index a2889413ed..cec7eeb47c 100644
--- a/src/components/button/button.test.tsx
+++ b/src/components/button/button.test.tsx
@@ -54,7 +54,7 @@ test("does not render, as an invariant is fired due to no text children or 'icon
   const consoleSpy = jest.spyOn(console, "error").mockImplementation(() => {});
 
   expect(() => render(<Button />)).toThrow(
-    "Either prop `iconType` must be defined or this node must have children."
+    "Either prop `iconType` must be defined or this node must have children.",
   );
 
   consoleSpy.mockRestore();
@@ -67,8 +67,8 @@ test("does not render, as an invariant is fired when the 'size' prop is 'small'
     render(
       <Button subtext="bar" size="small">
         foo
-      </Button>
-    )
+      </Button>,
+    ),
   ).toThrow("subtext prop has no effect unless the button is large");
 
   consoleSpy.mockRestore();
@@ -81,8 +81,8 @@ test("does not render, as an invariant is fired when the 'size' prop is 'medium'
     render(
       <Button subtext="bar" size="medium">
         foo
-      </Button>
-    )
+      </Button>,
+    ),
   ).toThrow("subtext prop has no effect unless the button is large");
 
   consoleSpy.mockRestore();
@@ -101,7 +101,7 @@ test("sets the 'aria-labelledby' attribute correctly when a custom value is pass
     <>
       <span id="foo">this labels the button</span>
       <Button aria-labelledby="foo">bar</Button>
-    </>
+    </>,
   );
 
   const button = screen.getByRole("button", { name: "this labels the button" });
@@ -114,7 +114,7 @@ test("sets the 'aria-describedby' attribute correctly when a custom value is pas
     <>
       <span id="foo">this describes the button</span>
       <Button aria-describedby="foo">bar</Button>
-    </>
+    </>,
   );
 
   const button = screen.getByRole("button", { name: "bar" });
@@ -127,7 +127,7 @@ test("sets the correct icon colour when 'gradient-white' is passed to the 'butto
   render(
     <Button aria-label="button" buttonType="gradient-white" iconType="bin">
       foo
-    </Button>
+    </Button>,
   );
 
   const icon = screen.getByTestId("icon");
@@ -140,7 +140,7 @@ test("sets the correct icon colour when 'gradient-grey' is passed to the 'button
   render(
     <Button aria-label="button" buttonType="gradient-grey" iconType="bin">
       foo
-    </Button>
+    </Button>,
   );
 
   const icon = screen.getByTestId("icon");
@@ -152,7 +152,7 @@ test("sets the correct height when 'services' is passed to the 'buttonType' prop
   render(
     <Button aria-label="button" iconType="services" size="large">
       foo
-    </Button>
+    </Button>,
   );
 
   const icon = screen.getByTestId("icon");
@@ -204,14 +204,14 @@ test("sets the correct styling attributes when the 'destructive' and 'disabled'
   render(
     <Button destructive disabled>
       foo
-    </Button>
+    </Button>,
   );
 
   const button = screen.getByRole("button", { name: "foo" });
 
   expect(button).toHaveStyleRule("color: var(--colorsActionMajorYin030)");
   expect(button).toHaveStyleRule(
-    "background-color: var(--colorsActionMajorYin030)"
+    "background-color: var(--colorsActionMajorYin030)",
   );
   expect(button).toHaveStyleRule("background: var(--colorsActionDisabled500)");
 });
@@ -237,7 +237,7 @@ test("sets the 'target' attribute correctly when a custom value is passed to the
   render(
     <Button href="https://www.warnerbros.com/movies/heat" target="_blank">
       bar
-    </Button>
+    </Button>,
   );
 
   const button = screen.getByRole("link", { name: "bar" });
@@ -252,7 +252,7 @@ test("sets the 'rel' attribute correctly when a custom value is passed to the 'r
       rel="noopener noreferrer"
     >
       bar
-    </Button>
+    </Button>,
   );
 
   const button = screen.getByRole("link", { name: "bar" });
@@ -283,7 +283,7 @@ test("sets the text content of the 'subtext' element when the 'size' prop is 'la
   render(
     <Button size="large" subtext="some context about the foo">
       foo
-    </Button>
+    </Button>,
   );
 
   const subtext = screen.getByText("some context about the foo");
@@ -311,7 +311,7 @@ test("calls onClick when an 'href' is passed and the space key is pressed", asyn
       href="https://www.warnerbros.com/movies/heat"
     >
       bar
-    </Button>
+    </Button>,
   );
 
   const button = screen.getByRole("link", { name: "bar" });
@@ -333,7 +333,7 @@ test("does not call onClick when a 'href' is passed and any other key is pressed
       href="https://www.warnerbros.com/movies/heat"
     >
       bar
-    </Button>
+    </Button>,
   );
 
   const button = screen.getByRole("link", { name: "bar" });
diff --git a/src/components/button/components.test-pw.tsx b/src/components/button/components.test-pw.tsx
index b101f1e54d..7f23baf147 100644
--- a/src/components/button/components.test-pw.tsx
+++ b/src/components/button/components.test-pw.tsx
@@ -34,7 +34,7 @@ export const ButtonAsASiblingExample = ({
 
 export const generateButtons = (
   buttonType: ButtonTypes,
-  iconPosition: ButtonIconPosition
+  iconPosition: ButtonIconPosition,
 ) => {
   return (
     <Box>
diff --git a/src/components/carbon-provider/__internal__/top-modal-provider.component.tsx b/src/components/carbon-provider/__internal__/top-modal-provider.component.tsx
index b58f7835a7..bd265849fe 100644
--- a/src/components/carbon-provider/__internal__/top-modal-provider.component.tsx
+++ b/src/components/carbon-provider/__internal__/top-modal-provider.component.tsx
@@ -20,9 +20,10 @@ export const TopModalProvider = ({ children }: { children: ReactNode }) => {
 
   useEffect(() => {
     return () => {
-      window.__CARBON_INTERNALS_MODAL_SETTER_LIST = window.__CARBON_INTERNALS_MODAL_SETTER_LIST?.filter(
-        (setter) => setter !== setTopModal
-      );
+      window.__CARBON_INTERNALS_MODAL_SETTER_LIST =
+        window.__CARBON_INTERNALS_MODAL_SETTER_LIST?.filter(
+          (setter) => setter !== setTopModal,
+        );
     };
   }, []);
 
diff --git a/src/components/carbon-provider/__internal__/top-modal.test.tsx b/src/components/carbon-provider/__internal__/top-modal.test.tsx
index 58e4b455dc..35bb89795a 100644
--- a/src/components/carbon-provider/__internal__/top-modal.test.tsx
+++ b/src/components/carbon-provider/__internal__/top-modal.test.tsx
@@ -25,7 +25,7 @@ test("TopModalContextProvider adds a second setter to the global list if a secon
     <>
       <MockComponent providerOpen />
       <MockComponent providerOpen />
-    </>
+    </>,
   );
 
   expect(window.__CARBON_INTERNALS_MODAL_SETTER_LIST?.length).toBe(2);
diff --git a/src/components/carbon-provider/carbon-provider.pw.tsx b/src/components/carbon-provider/carbon-provider.pw.tsx
index 075077a29f..9ecf1aaedd 100644
--- a/src/components/carbon-provider/carbon-provider.pw.tsx
+++ b/src/components/carbon-provider/carbon-provider.pw.tsx
@@ -29,7 +29,7 @@ const buildTestArray = (array: string[]) => {
 
 const buildTestDataWithTwoArrays = (
   firstArray: string[],
-  secondArray: string[]
+  secondArray: string[],
 ) => {
   return themes.map((theme, i) => [theme, firstArray[i], secondArray[i]]);
 };
@@ -65,7 +65,7 @@ buildTestArray(commonColors).forEach(([theme, color]) => {
         >
           This is a link
         </Link>,
-        { hooksConfig: { theme: `${theme}` } }
+        { hooksConfig: { theme: `${theme}` } },
       );
 
       await expect(linkComponent(page)).toHaveCSS("color", color);
@@ -79,7 +79,7 @@ buildTestArray(commonColors).forEach(([theme, color]) => {
 
       await expect(loaderComponent(page).nth(0)).toHaveCSS(
         "background-color",
-        color
+        color,
       );
     });
 
@@ -93,7 +93,7 @@ buildTestArray(commonColors).forEach(([theme, color]) => {
           <Button>Button 2</Button>
           <Button>Button 3</Button>
         </MultiActionButton>,
-        { hooksConfig: { theme: `${theme}` } }
+        { hooksConfig: { theme: `${theme}` } },
       );
 
       await expect(buttonDataComponent(page)).toHaveCSS("color", color);
@@ -119,7 +119,7 @@ buildTestArray(commonColors).forEach(([theme, color]) => {
           <Button>Button 2</Button>
           <Button>Button 3</Button>
         </SplitButton>,
-        { hooksConfig: { theme: `${theme}` } }
+        { hooksConfig: { theme: `${theme}` } },
       );
 
       await expect(buttonDataComponent(page)).toHaveCSS("color", color);
@@ -136,15 +136,15 @@ buildTestArray(commonColors).forEach(([theme, color]) => {
             Content for tab 1
           </Tab>
         </Tabs>,
-        { hooksConfig: { theme: `${theme}` } }
+        { hooksConfig: { theme: `${theme}` } },
       );
 
       const tabTitleSelectedIndicator = page.locator(
-        '[data-element="tab-selected-indicator"]'
+        '[data-element="tab-selected-indicator"]',
       );
       await expect(tabTitleSelectedIndicator).toHaveCSS(
         "box-shadow",
-        `${color} 0px -4px 0px 0px inset`
+        `${color} 0px -4px 0px 0px inset`,
       );
     });
   });
@@ -152,92 +152,83 @@ buildTestArray(commonColors).forEach(([theme, color]) => {
 
 test.describe("Hover styling", () => {
   buildTestArray(commonColorsOnHover).forEach(([theme, color]) => {
-    test.describe(
-      `should render components with ${theme} theme onHover`,
-      () => {
-        test("Button component and verify theme color", async ({
-          mount,
-          page,
-        }) => {
-          await mount(<Button>Small</Button>, {
-            hooksConfig: { theme: `${theme}` },
-          });
-
-          await buttonDataComponent(page).hover();
-          await expect(buttonDataComponent(page)).toHaveCSS(
-            "background-color",
-            color
-          );
+    test.describe(`should render components with ${theme} theme onHover`, () => {
+      test("Button component and verify theme color", async ({
+        mount,
+        page,
+      }) => {
+        await mount(<Button>Small</Button>, {
+          hooksConfig: { theme: `${theme}` },
         });
 
-        test("Link component and verify theme color", async ({
-          mount,
-          page,
-        }) => {
-          await mount(
-            <Link
-              href="https://carbon.sage.com"
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              This is a link
-            </Link>,
-            { hooksConfig: { theme: `${theme}` } }
-          );
-
-          await linkComponent(page).hover();
-          await expect(linkComponent(page)).toHaveCSS("color", color);
-        });
+        await buttonDataComponent(page).hover();
+        await expect(buttonDataComponent(page)).toHaveCSS(
+          "background-color",
+          color,
+        );
+      });
+
+      test("Link component and verify theme color", async ({ mount, page }) => {
+        await mount(
+          <Link
+            href="https://carbon.sage.com"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            This is a link
+          </Link>,
+          { hooksConfig: { theme: `${theme}` } },
+        );
 
-        test("SplitButton component and verify theme color", async ({
-          mount,
-          page,
-        }) => {
-          await mount(
-            <SplitButton text="Split button">
-              <Button>Button 1</Button>
-              <Button>Button 2</Button>
-              <Button>Button 3</Button>
-            </SplitButton>,
-            { hooksConfig: { theme: `${theme}` } }
-          );
+        await linkComponent(page).hover();
+        await expect(linkComponent(page)).toHaveCSS("color", color);
+      });
+
+      test("SplitButton component and verify theme color", async ({
+        mount,
+        page,
+      }) => {
+        await mount(
+          <SplitButton text="Split button">
+            <Button>Button 1</Button>
+            <Button>Button 2</Button>
+            <Button>Button 3</Button>
+          </SplitButton>,
+          { hooksConfig: { theme: `${theme}` } },
+        );
 
-          const toggleButton = page.locator('[data-element="toggle-button"]');
+        const toggleButton = page.locator('[data-element="toggle-button"]');
 
-          await toggleButton.hover();
+        await toggleButton.hover();
 
-          await expect(toggleButton).toHaveCSS("background-color", color);
-        });
-      }
-    );
+        await expect(toggleButton).toHaveCSS("background-color", color);
+      });
+    });
   });
 
   buildTestArray(commonColorsOnHover).forEach(([theme, color]) => {
-    test.describe(
-      `should render components with ${theme} theme onHover`,
-      () => {
-        test("MultiActionButton component and verify theme color", async ({
-          mount,
-          page,
-        }) => {
-          await mount(
-            <MultiActionButton text="Multi Action Button">
-              <Button href="#">Button 1</Button>
-              <Button>Button 2</Button>
-              <Button>Button 3</Button>
-            </MultiActionButton>,
-            {
-              hooksConfig: { theme: `${theme}` },
-            }
-          );
-
-          await multiActionButtonComponent(page).locator("button").hover();
-          await expect(
-            multiActionButtonComponent(page).locator("button")
-          ).toHaveCSS("background-color", color);
-        });
-      }
-    );
+    test.describe(`should render components with ${theme} theme onHover`, () => {
+      test("MultiActionButton component and verify theme color", async ({
+        mount,
+        page,
+      }) => {
+        await mount(
+          <MultiActionButton text="Multi Action Button">
+            <Button href="#">Button 1</Button>
+            <Button>Button 2</Button>
+            <Button>Button 3</Button>
+          </MultiActionButton>,
+          {
+            hooksConfig: { theme: `${theme}` },
+          },
+        );
+
+        await multiActionButtonComponent(page).locator("button").hover();
+        await expect(
+          multiActionButtonComponent(page).locator("button"),
+        ).toHaveCSS("background-color", color);
+      });
+    });
   });
 });
 
@@ -254,16 +245,16 @@ buildTestDataWithTwoArrays(loaderBarColors, commonColors).forEach(
 
         await expect(loaderBarComponent(page).locator("> div")).toHaveCSS(
           "background-color",
-          loaderBarColor
+          loaderBarColor,
         );
 
         await expect(loaderBarComponent(page).locator("div > *")).toHaveCSS(
           "background-color",
-          color
+          color,
         );
       });
     });
-  }
+  },
 );
 
 test.describe("Accessibility tests for Carbon Provider", () => {
diff --git a/src/components/card/card-column/card-column.test.tsx b/src/components/card/card-column/card-column.test.tsx
index 04ae21dae4..7af88fa2b0 100644
--- a/src/components/card/card-column/card-column.test.tsx
+++ b/src/components/card/card-column/card-column.test.tsx
@@ -12,16 +12,16 @@ test("has the expected data attributes when they are passed in", () => {
   render(
     <CardColumn data-element="foo" data-role="bar">
       <div>content</div>
-    </CardColumn>
+    </CardColumn>,
   );
   const cardColumnElementWithAttributes = screen.getByTestId("bar");
   expect(cardColumnElementWithAttributes).toHaveAttribute(
     "data-component",
-    "card-column"
+    "card-column",
   );
   expect(cardColumnElementWithAttributes).toHaveAttribute(
     "data-element",
-    "foo"
+    "foo",
   );
   expect(cardColumnElementWithAttributes).toHaveAttribute("data-role", "bar");
 });
diff --git a/src/components/card/card-footer/card-footer.test.tsx b/src/components/card/card-footer/card-footer.test.tsx
index 0fd41c8ba6..5380cc635c 100644
--- a/src/components/card/card-footer/card-footer.test.tsx
+++ b/src/components/card/card-footer/card-footer.test.tsx
@@ -7,7 +7,7 @@ test("when variant prop is `transparent`, render with transparent background", (
   render(
     <CardFooter variant="transparent" data-role="card-footer">
       <div id="non-interactive">View Stripe Dashboard</div>
-    </CardFooter>
+    </CardFooter>,
   );
 
   const cardFooterElement = screen.getByTestId("card-footer");
@@ -27,32 +27,32 @@ test.each<CardFooterProps["roundness"]>(["default", "large"])(
         }}
       >
         <CardFooter data-role="card-footer">foo</CardFooter>
-      </CardContext.Provider>
+      </CardContext.Provider>,
     );
 
     const cardFooterElement = screen.getByTestId("card-footer");
     expect(cardFooterElement).toHaveStyleRule(
       "border-bottom-left-radius",
-      `var(--borderRadius${roundness === "default" ? "1" : "2"}00)`
+      `var(--borderRadius${roundness === "default" ? "1" : "2"}00)`,
     );
     expect(cardFooterElement).toHaveStyleRule(
       "border-bottom-right-radius",
-      `var(--borderRadius${roundness === "default" ? "1" : "2"}00)`
+      `var(--borderRadius${roundness === "default" ? "1" : "2"}00)`,
     );
-  }
+  },
 );
 
 test("has the expected data attributes when they are passed in", () => {
   render(
     <CardFooter data-element="foo" data-role="bar">
       <div />
-    </CardFooter>
+    </CardFooter>,
   );
 
   const cardFooterElementWithAttributes = screen.getByTestId("bar");
   expect(cardFooterElementWithAttributes).toHaveAttribute(
     "data-element",
-    "foo"
+    "foo",
   );
   expect(cardFooterElementWithAttributes).toHaveAttribute("data-role", "bar");
 });
diff --git a/src/components/card/card-row/card-row.test.tsx b/src/components/card/card-row/card-row.test.tsx
index 797e832875..f81876dc7f 100644
--- a/src/components/card/card-row/card-row.test.tsx
+++ b/src/components/card/card-row/card-row.test.tsx
@@ -26,20 +26,20 @@ test.each<[Exclude<CardContextProps["spacing"], undefined>, string]>([
         <CardRow data-role="card-row">
           <div />
         </CardRow>
-      </CardContext.Provider>
+      </CardContext.Provider>,
     );
 
     const cardRowElement = screen.getByTestId("card-row");
     expect(cardRowElement).toHaveStyleRule("padding-top", expected);
     expect(cardRowElement).toHaveStyleRule("padding-bottom", expected);
-  }
+  },
 );
 
 test("should have expected data attributes", () => {
   render(
     <CardRow data-element="card-row" data-role="card-row">
       <div />
-    </CardRow>
+    </CardRow>,
   );
 
   const cardRowElement = screen.getByTestId("card-row");
@@ -49,7 +49,7 @@ test("should have expected data attributes", () => {
   render(
     <CardRow data-element="foo" data-role="bar">
       <div />
-    </CardRow>
+    </CardRow>,
   );
 
   const cardRowElementWithAttributes = screen.getByTestId("bar");
diff --git a/src/components/card/card-test.stories.tsx b/src/components/card/card-test.stories.tsx
index 41adf65a71..835db6f24c 100644
--- a/src/components/card/card-test.stories.tsx
+++ b/src/components/card/card-test.stories.tsx
@@ -33,7 +33,7 @@ export default {
 } as Meta<typeof Card>;
 
 export const DefaultStory = (
-  args: Omit<CardProps, "onClick" | "children" | "footer">
+  args: Omit<CardProps, "onClick" | "children" | "footer">,
 ) => {
   return (
     <Card
@@ -224,7 +224,7 @@ export const DraggableExample = () => {
       prevState.map((card) => ({
         ...card,
         column: card.id === id ? column : card.column,
-      }))
+      })),
     );
   };
 
diff --git a/src/components/card/card.component.tsx b/src/components/card/card.component.tsx
index 1aa3c1d7f1..9c90e08c69 100644
--- a/src/components/card/card.component.tsx
+++ b/src/components/card/card.component.tsx
@@ -23,7 +23,7 @@ export interface CardProps
       | React.MouseEvent<HTMLAnchorElement>
       | React.MouseEvent<HTMLDivElement>
       | React.KeyboardEvent<HTMLAnchorElement>
-      | React.KeyboardEvent<HTMLDivElement>
+      | React.KeyboardEvent<HTMLDivElement>,
   ) => void;
   /** Style value for width of card */
   width?: string;
@@ -84,7 +84,7 @@ const Card = ({
     footerWarningFired = true;
     // eslint-disable-next-line no-console
     console.warn(
-      "This `Card` is interactive you should use the `footer` prop to render a `CardFooter` to avoid potential accessibility issues"
+      "This `Card` is interactive you should use the `footer` prop to render a `CardFooter` to avoid potential accessibility issues",
     );
   }
 
diff --git a/src/components/card/card.config.ts b/src/components/card/card.config.ts
index d49df4d311..cc36c9a2a4 100644
--- a/src/components/card/card.config.ts
+++ b/src/components/card/card.config.ts
@@ -1,4 +1,4 @@
 export const CARD_SPACING = ["small", "medium", "large"] as const;
 export const CARD_ALIGNS = ["left", "center", "right"] as const;
-export type CardAlign = typeof CARD_ALIGNS[number];
-export type CardSpacing = typeof CARD_SPACING[number];
+export type CardAlign = (typeof CARD_ALIGNS)[number];
+export type CardSpacing = (typeof CARD_SPACING)[number];
diff --git a/src/components/card/card.pw.tsx b/src/components/card/card.pw.tsx
index 91528271ab..c16115dfc7 100644
--- a/src/components/card/card.pw.tsx
+++ b/src/components/card/card.pw.tsx
@@ -48,10 +48,10 @@ test.describe("Check Card component styling", () => {
 
         await expect(footerCard(page)).toHaveCSS(
           "border-radius",
-          `0px 0px ${borderRadius} ${borderRadius}`
+          `0px 0px ${borderRadius} ${borderRadius}`,
         );
       });
-    }
+    },
   );
 
   [{ onClick: () => {} }, { href: "foo" }].forEach((props) => {
@@ -69,14 +69,14 @@ test.describe("Check Card component styling", () => {
       await expect(cardContentElement).toHaveCSS("cursor", "pointer");
       await expect(cardElement).toHaveCSS(
         "box-shadow",
-        "rgba(0, 20, 30, 0.2) 0px 5px 5px 0px, rgba(0, 20, 30, 0.1) 0px 10px 10px 0px"
+        "rgba(0, 20, 30, 0.2) 0px 5px 5px 0px, rgba(0, 20, 30, 0.1) 0px 10px 10px 0px",
       );
 
       await cardContentElement.focus();
 
       await expect(cardContentElement).toHaveCSS(
         "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
       );
 
       await expect(cardContentElement).toHaveCSS("height", "500px");
@@ -91,7 +91,7 @@ test.describe("Check Card component styling", () => {
           boxShadow="boxShadow400"
           hoverBoxShadow="boxShadow200"
           {...props}
-        />
+        />,
       );
 
       const cardElement = card(page);
@@ -99,7 +99,7 @@ test.describe("Check Card component styling", () => {
 
       await expect(cardElement).toHaveCSS(
         "box-shadow",
-        "rgba(0, 20, 30, 0.04) 0px 10px 40px 0px, rgba(0, 20, 30, 0.1) 0px 50px 80px 0px"
+        "rgba(0, 20, 30, 0.04) 0px 10px 40px 0px, rgba(0, 20, 30, 0.1) 0px 50px 80px 0px",
       );
       await cardElement.hover();
       await cardElement.waitFor();
@@ -107,7 +107,7 @@ test.describe("Check Card component styling", () => {
       await expect(cardContentElement).toHaveCSS("cursor", "pointer");
       await expect(cardElement).toHaveCSS(
         "box-shadow",
-        "rgba(0, 20, 30, 0.2) 0px 10px 20px 0px, rgba(0, 20, 30, 0.1) 0px 20px 40px 0px"
+        "rgba(0, 20, 30, 0.2) 0px 10px 20px 0px, rgba(0, 20, 30, 0.1) 0px 20px 40px 0px",
       );
     });
   });
@@ -143,13 +143,13 @@ test.describe("Check Card component properties", () => {
       await assertCssValueIsApproximately(
         cardElement,
         "padding-left",
-        paddings
+        paddings,
       );
 
       await assertCssValueIsApproximately(
         cardElement,
         "padding-right",
-        paddings
+        paddings,
       );
     });
   });
@@ -177,11 +177,13 @@ test.describe("Check Card component properties", () => {
     });
   });
 
-  ([
-    [1, 2, 2, 2],
-    [3, 1, 4, 0],
-    [4, 2, 2, 2],
-  ] as const).forEach(
+  (
+    [
+      [1, 2, 2, 2],
+      [3, 1, 4, 0],
+      [4, 2, 2, 2],
+    ] as const
+  ).forEach(
     ([
       draggableCardItem,
       columnName,
@@ -195,13 +197,13 @@ test.describe("Check Card component properties", () => {
         await mount(<DraggableExample />);
 
         await draggableCard(page, draggableCardItem - 1).dragTo(
-          draggableContainer(page, columnName)
+          draggableContainer(page, columnName),
         );
 
         await expect(
           draggableContainer(page, columnName).locator(
-            `[data-element="draggable-card-${draggableCardItem - 1}"]`
-          )
+            `[data-element="draggable-card-${draggableCardItem - 1}"]`,
+          ),
         ).toBeVisible();
 
         const resultForColumnOne = await draggableContainer(page, 1)
@@ -215,7 +217,7 @@ test.describe("Check Card component properties", () => {
 
         await expect(resultForColumnTwo).toEqual(countOfSecondColumn);
       });
-    }
+    },
   );
 
   test("should check that the expected dataRole is set on the component", async ({
@@ -252,7 +254,7 @@ test.describe("Check Card component properties", () => {
         onClick={() => {
           setClickCounter += 1;
         }}
-      />
+      />,
     );
 
     const cardElement = card(page);
diff --git a/src/components/card/card.stories.tsx b/src/components/card/card.stories.tsx
index d3c29f37ff..a6c3d64fda 100644
--- a/src/components/card/card.stories.tsx
+++ b/src/components/card/card.stories.tsx
@@ -863,7 +863,7 @@ export const WithDraggable: Story = () => {
         prevState.map((card) => ({
           ...card,
           column: card.id === id ? column : card.column,
-        }))
+        })),
       );
     };
 
diff --git a/src/components/card/card.style.ts b/src/components/card/card.style.ts
index f3f460da69..a218bb3446 100644
--- a/src/components/card/card.style.ts
+++ b/src/components/card/card.style.ts
@@ -103,7 +103,7 @@ const StyledCardContent = styled.div.attrs(
     }
 
     return {};
-  }
+  },
 )<StyledCardContentProps>`
   ${({ interactive, theme }) =>
     interactive &&
diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx
index 0d9551b8c5..700b017d68 100644
--- a/src/components/card/card.test.tsx
+++ b/src/components/card/card.test.tsx
@@ -6,7 +6,7 @@ test("renders with correct data attributes", () => {
   render(
     <Card data-element="foo" data-role="bar">
       <CardRow>Row</CardRow>
-    </Card>
+    </Card>,
   );
 
   const card = screen.getByTestId("bar");
@@ -21,7 +21,7 @@ test("child content is rendered inside the card", () => {
   render(
     <Card data-element="foo" data-role="bar">
       {text}
-    </Card>
+    </Card>,
   );
 
   const card = screen.getByTestId("bar");
@@ -35,7 +35,7 @@ test.each<CardProps["roundness"]>(["default", "large"])(
     render(
       <Card roundness={roundness} data-role="card">
         Content
-      </Card>
+      </Card>,
     );
     const borderRadiusValue = roundness === "default" ? "100" : "200";
     const radius = `var(--borderRadius${borderRadiusValue})`;
@@ -43,7 +43,7 @@ test.each<CardProps["roundness"]>(["default", "large"])(
     const cardElement = screen.getByTestId("card");
 
     expect(cardElement).toHaveStyleRule("border-radius", radius);
-  }
+  },
 );
 
 test("when width prop is not passed, component width fills containing element", () => {
@@ -63,13 +63,13 @@ test.each([
     render(
       <Card width={width} data-role="card">
         Foobar
-      </Card>
+      </Card>,
     );
 
     const cardElement = screen.getByTestId("card");
 
     expect(cardElement).toHaveStyle({ width });
-  }
+  },
 );
 
 test("underlying element for Card should have data-element and data-role attributes when provided", () => {
@@ -79,7 +79,7 @@ test("underlying element for Card should have data-element and data-role attribu
   render(
     <Card data-element={dataElement} data-role={dataRole}>
       Foobar
-    </Card>
+    </Card>,
   );
 
   const cardElement = screen.getByTestId(dataRole);
@@ -102,19 +102,19 @@ test.each([
       <Card {...props}>
         <CardRow>foo</CardRow>
         <CardFooter>foo</CardFooter>
-      </Card>
+      </Card>,
     );
 
     expect(consoleSpy).toHaveBeenCalled();
     consoleSpy.mockReset();
-  }
+  },
 );
 
 test("when draggable prop is true cursor changes to move icon when Card is hovered over", () => {
   render(
     <Card draggable data-role="card">
       Content
-    </Card>
+    </Card>,
   );
 
   const cardElement = screen.getByTestId("card");
diff --git a/src/components/card/components.test-pw.tsx b/src/components/card/components.test-pw.tsx
index 2fb98b8706..cfa3c6b76e 100644
--- a/src/components/card/components.test-pw.tsx
+++ b/src/components/card/components.test-pw.tsx
@@ -182,7 +182,7 @@ export const DraggableExample = () => {
       prevState.map((card) => ({
         ...card,
         column: card.id === id ? column : card.column,
-      }))
+      })),
     );
   };
   const returnColumnItems = (column: string) =>
@@ -903,7 +903,7 @@ export const WithDraggable = () => {
         prevState.map((card) => ({
           ...card,
           column: card.id === id ? column : card.column,
-        }))
+        })),
       );
     };
 
diff --git a/src/components/checkbox/checkbox-group/checkbox-group.test.tsx b/src/components/checkbox/checkbox-group/checkbox-group.test.tsx
index 0f108f0157..13a187a099 100644
--- a/src/components/checkbox/checkbox-group/checkbox-group.test.tsx
+++ b/src/components/checkbox/checkbox-group/checkbox-group.test.tsx
@@ -9,7 +9,7 @@ test("should render with the provided children", () => {
     <CheckboxGroup>
       <Checkbox value="1" label="label-1" onChange={() => {}} />
       <Checkbox value="2" label="label-2" onChange={() => {}} />
-    </CheckboxGroup>
+    </CheckboxGroup>,
   );
 
   expect(screen.getByText("label-1")).toBeVisible();
@@ -20,7 +20,7 @@ test("should render with the provided legend", () => {
   render(
     <CheckboxGroup legend="legend">
       <Checkbox value="1" label="label" onChange={() => {}} />
-    </CheckboxGroup>
+    </CheckboxGroup>,
   );
 
   expect(screen.getByText("legend")).toBeVisible();
@@ -32,7 +32,7 @@ test("should render legendHelp as a hint text when validationRedesignOptIn is tr
       <CheckboxGroup legend="legend" legendHelp="legendHelp">
         <Checkbox value="1" label="label" onChange={() => {}} />
       </CheckboxGroup>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByText("legendHelp")).toBeVisible();
@@ -43,7 +43,7 @@ test("should render required checkbox children when required prop is set", () =>
     <CheckboxGroup legend="legend" required>
       <Checkbox value="1" label="label-1" onChange={() => {}} />
       <Checkbox value="2" label="label-2" onChange={() => {}} />
-    </CheckboxGroup>
+    </CheckboxGroup>,
   );
 
   const checkboxes = screen.getAllByRole("checkbox");
@@ -56,13 +56,13 @@ it("should append (optional) text on the legend when isOptional prop is set", ()
     <CheckboxGroup legend="legend" isOptional>
       <Checkbox value="1" label="label-1" onChange={() => {}} />
       <Checkbox value="2" label="label-2" onChange={() => {}} />
-    </CheckboxGroup>
+    </CheckboxGroup>,
   );
 
   expect(screen.getByText("legend")).toHaveStyleRule(
     "content",
     '"(optional)"',
-    { modifier: "::after" }
+    { modifier: "::after" },
   );
 });
 
@@ -72,7 +72,7 @@ test("should render error message when error prop is set and validationRedesignO
       <CheckboxGroup legend="legend" error="error">
         <Checkbox value="1" label="label" onChange={() => {}} />
       </CheckboxGroup>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByText("error")).toBeVisible();
@@ -84,7 +84,7 @@ test("should render warning message when warning prop is set and validationRedes
       <CheckboxGroup legend="legend" warning="warning">
         <Checkbox value="1" label="label" onChange={() => {}} />
       </CheckboxGroup>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByText("warning")).toBeVisible();
@@ -100,7 +100,7 @@ test("should render with expected styles when legendInline is true", () => {
         onChange={() => {}}
       />
       <Checkbox value="2" label="label-2" onChange={() => {}} />
-    </CheckboxGroup>
+    </CheckboxGroup>,
   );
 
   expect(screen.getByTestId("checkbox-1")).toHaveStyle({ paddingTop: "4px" });
@@ -113,7 +113,7 @@ test("should render with expected styles when inline is true", () => {
         <Checkbox value="1" label="label-1" onChange={() => {}} />
         <Checkbox value="2" label="label-2" onChange={() => {}} />
       </CheckboxGroup>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByTestId("checkbox-group")).toHaveStyle({
@@ -131,5 +131,5 @@ testStyledSystemMarginRTL(
       <Checkbox value="1" label="label" onChange={() => {}} />
     </CheckboxGroup>
   ),
-  () => screen.getByTestId("checkbox-group-wrapper")
+  () => screen.getByTestId("checkbox-group-wrapper"),
 );
diff --git a/src/components/checkbox/checkbox.component.tsx b/src/components/checkbox/checkbox.component.tsx
index f6cbf34fbd..5df4850a52 100644
--- a/src/components/checkbox/checkbox.component.tsx
+++ b/src/components/checkbox/checkbox.component.tsx
@@ -75,7 +75,7 @@ export const Checkbox = React.forwardRef(
       helpAriaLabel,
       ...rest
     }: CheckboxProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     const { validationRedesignOptIn } = useContext(NewValidationContext);
 
@@ -93,7 +93,7 @@ export const Checkbox = React.forwardRef(
     if (!deprecateUncontrolledWarnTriggered && !onChange) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Checkbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Checkbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
@@ -171,7 +171,7 @@ export const Checkbox = React.forwardRef(
         )}
       </>
     );
-  }
+  },
 );
 
 Checkbox.displayName = "Checkbox";
diff --git a/src/components/checkbox/checkbox.pw.tsx b/src/components/checkbox/checkbox.pw.tsx
index 9a4bfbaea6..07d2ab71a5 100644
--- a/src/components/checkbox/checkbox.pw.tsx
+++ b/src/components/checkbox/checkbox.pw.tsx
@@ -46,51 +46,48 @@ import { HooksConfig } from "../../../playwright";
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 const boolVals = [true, false];
 
-test.describe(
-  "should render Checkbox component and check focus outline",
-  () => {
-    test("should have the expected styling when the focusRedesignOptOut is false", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<CheckboxComponent data-component={CHARACTERS.STANDARD} />);
+test.describe("should render Checkbox component and check focus outline", () => {
+  test("should have the expected styling when the focusRedesignOptOut is false", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<CheckboxComponent data-component={CHARACTERS.STANDARD} />);
 
-      const checkboxElement = checkboxRole(page);
-      await checkboxElement.focus();
-      const focusedElement = checkboxRole(page).locator("..").locator("div");
-      await expect(focusedElement).toHaveCSS(
-        "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
-      );
-      await expect(focusedElement).toHaveCSS(
-        "outline",
-        "rgba(0, 0, 0, 0) solid 3px"
-      );
-    });
+    const checkboxElement = checkboxRole(page);
+    await checkboxElement.focus();
+    const focusedElement = checkboxRole(page).locator("..").locator("div");
+    await expect(focusedElement).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
+    );
+    await expect(focusedElement).toHaveCSS(
+      "outline",
+      "rgba(0, 0, 0, 0) solid 3px",
+    );
+  });
 
-    test("should have the expected styling when the focusRedesignOptOut is true", async ({
-      mount,
-      page,
-    }) => {
-      await mount<HooksConfig>(
-        <CheckboxComponent data-component={CHARACTERS.STANDARD} />,
-        {
-          hooksConfig: {
-            focusRedesignOptOut: true,
-          },
-        }
-      );
+  test("should have the expected styling when the focusRedesignOptOut is true", async ({
+    mount,
+    page,
+  }) => {
+    await mount<HooksConfig>(
+      <CheckboxComponent data-component={CHARACTERS.STANDARD} />,
+      {
+        hooksConfig: {
+          focusRedesignOptOut: true,
+        },
+      },
+    );
 
-      const checkboxElement = checkboxRole(page);
-      await checkboxElement.focus();
-      const focusedElement = checkboxRole(page).locator("..").locator("div");
-      await expect(focusedElement).toHaveCSS(
-        "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px"
-      );
-    });
-  }
-);
+    const checkboxElement = checkboxRole(page);
+    await checkboxElement.focus();
+    const focusedElement = checkboxRole(page).locator("..").locator("div");
+    await expect(focusedElement).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px",
+    );
+  });
+});
 
 test.describe("should render Checkbox component and check props", () => {
   test(`should render with data-component set to ${CHARACTERS.STANDARD}`, async ({
@@ -102,7 +99,7 @@ test.describe("should render Checkbox component and check props", () => {
     const checkbox = getComponent(page, CHARACTERS.STANDARD);
     await expect(checkbox).toHaveAttribute(
       "data-component",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -166,7 +163,7 @@ test.describe("should render Checkbox component and check props", () => {
 
   test("should render with inline fieldHelp", async ({ mount, page }) => {
     await mount(
-      <CheckboxComponent fieldHelp="Inline fieldhelp" fieldHelpInline />
+      <CheckboxComponent fieldHelp="Inline fieldhelp" fieldHelpInline />,
     );
 
     const inlineFieldHelp = checkboxInlineFieldHelp(page);
@@ -179,7 +176,7 @@ test.describe("should render Checkbox component and check props", () => {
         label="Label For CheckBox"
         labelHelp="Label Help"
         helpAriaLabel="This text provides more information for the label"
-      />
+      />,
     );
 
     const checkboxIconElement = checkboxIcon(page);
@@ -187,7 +184,7 @@ test.describe("should render Checkbox component and check props", () => {
     const checkboxHelpElement = checkboxHelpIcon(page);
     await expect(checkboxHelpElement).toHaveAttribute(
       "aria-label",
-      "This text provides more information for the label"
+      "This text provides more information for the label",
     );
   });
 
@@ -230,44 +227,37 @@ test.describe("should render Checkbox component and check props", () => {
     await expect(checkboxElement).toHaveValue("checkboxvalue");
   });
 
-  ([
-    [SIZE.SMALL, 16],
-    [SIZE.LARGE, 24],
-  ] as [CommonCheckableInputProps["size"], number][]).forEach(
-    ([size, sizeInPx]) => {
-      test(`should render with size set to ${size}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<CheckboxComponent size={size} />);
+  (
+    [
+      [SIZE.SMALL, 16],
+      [SIZE.LARGE, 24],
+    ] as [CommonCheckableInputProps["size"], number][]
+  ).forEach(([size, sizeInPx]) => {
+    test(`should render with size set to ${size}`, async ({ mount, page }) => {
+      await mount(<CheckboxComponent size={size} />);
 
-        const checkboxElement = checkboxRole(page);
-        await assertCssValueIsApproximately(
-          checkboxElement,
-          "height",
-          sizeInPx
-        );
-        await assertCssValueIsApproximately(checkboxElement, "width", sizeInPx);
-      });
-    }
-  );
+      const checkboxElement = checkboxRole(page);
+      await assertCssValueIsApproximately(checkboxElement, "height", sizeInPx);
+      await assertCssValueIsApproximately(checkboxElement, "width", sizeInPx);
+    });
+  });
 
-  ([
-    [1, "8px"],
-    [2, "16px"],
-  ] as [CommonCheckableInputProps["labelSpacing"], string][]).forEach(
-    ([spacing, padding]) => {
-      test(`should check labelSpacing set to ${spacing}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<CheckboxComponent labelSpacing={spacing} />);
+  (
+    [
+      [1, "8px"],
+      [2, "16px"],
+    ] as [CommonCheckableInputProps["labelSpacing"], string][]
+  ).forEach(([spacing, padding]) => {
+    test(`should check labelSpacing set to ${spacing}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<CheckboxComponent labelSpacing={spacing} />);
 
-        const labelParent = checkboxLabel(page).locator("..");
-        await expect(labelParent).toHaveCSS("padding-left", padding);
-      });
-    }
-  );
+      const labelParent = checkboxLabel(page).locator("..");
+      await expect(labelParent).toHaveCSS("padding-left", padding);
+    });
+  });
 
   [
     [10, 90, 135, 1229],
@@ -283,7 +273,7 @@ test.describe("should render Checkbox component and check props", () => {
           labelInline
           labelWidth={labelWidth}
           inputWidth={inputWidth}
-        />
+        />,
       );
 
       const labelParent = checkboxLabel(page).locator("..");
@@ -340,7 +330,7 @@ test.describe("should render Checkbox component and check props", () => {
     const checkboxIconElement = checkboxIcon(page);
     await expect(checkboxIconElement).toHaveAttribute(
       "data-element",
-      "warning"
+      "warning",
     );
   });
 
@@ -351,40 +341,37 @@ test.describe("should render Checkbox component and check props", () => {
     await expect(checkboxIconElement).toHaveAttribute("data-element", "info");
   });
 
-  ([
-    [true, 0],
-    [false, 1],
-  ] as [CheckboxProps["reverse"], number][]).forEach(
-    ([reverseValue, position]) => {
-      test(`should render Checkbox with reverse prop set to ${reverseValue}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <CheckboxComponent label="Checkbox Label" reverse={reverseValue} />
-        );
+  (
+    [
+      [true, 0],
+      [false, 1],
+    ] as [CheckboxProps["reverse"], number][]
+  ).forEach(([reverseValue, position]) => {
+    test(`should render Checkbox with reverse prop set to ${reverseValue}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <CheckboxComponent label="Checkbox Label" reverse={reverseValue} />,
+      );
 
-        if (reverseValue) {
-          const checkboxElement = checkboxComponent(page)
-            .locator("div:nth-child(1) > div > div:nth-child(1)")
-            .nth(position);
-          await expect(checkboxElement).toHaveText("Checkbox Label");
-        } else {
-          const checkboxElement = checkboxComponent(page)
-            .locator("div:nth-child(1) > div > div:nth-child(2)")
-            .nth(position);
-          await expect(checkboxElement).toHaveText("Checkbox Label");
-        }
-      });
-    }
-  );
+      if (reverseValue) {
+        const checkboxElement = checkboxComponent(page)
+          .locator("div:nth-child(1) > div > div:nth-child(1)")
+          .nth(position);
+        await expect(checkboxElement).toHaveText("Checkbox Label");
+      } else {
+        const checkboxElement = checkboxComponent(page)
+          .locator("div:nth-child(1) > div > div:nth-child(2)")
+          .nth(position);
+        await expect(checkboxElement).toHaveText("Checkbox Label");
+      }
+    });
+  });
 
-  ([
-    "bottom",
-    "left",
-    "right",
-    "top",
-  ] as CheckboxProps["tooltipPosition"][]).forEach((position) => {
+  (
+    ["bottom", "left", "right", "top"] as CheckboxProps["tooltipPosition"][]
+  ).forEach((position) => {
     test(`should render CheckboxComponent component with tooltip positioned to the ${position}`, async ({
       mount,
       page,
@@ -395,7 +382,7 @@ test.describe("should render Checkbox component and check props", () => {
             labelHelp="Tooltip info"
             tooltipPosition={position}
           />
-        </Box>
+        </Box>,
       );
 
       const checkboxIconElement = checkboxIcon(page);
@@ -404,7 +391,7 @@ test.describe("should render Checkbox component and check props", () => {
       await expect(tooltipElement).toHaveText("Tooltip info");
       await expect(tooltipElement).toHaveAttribute(
         "data-placement",
-        `${position}`
+        `${position}`,
       );
     });
   });
@@ -430,7 +417,7 @@ test.describe("should render Checkbox component and check props", () => {
       const boxSvg = checkboxSvg(page);
       await expect(boxSvg).toHaveCSS(
         "border-radius",
-        size === "small" ? "2px" : "4px"
+        size === "small" ? "2px" : "4px",
       );
     });
   });
@@ -447,7 +434,7 @@ test.describe("should render CheckBox component and check events", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const checkboxElement = checkboxRole(page);
@@ -466,7 +453,7 @@ test.describe("should render CheckBox component and check events", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const checkboxElement = checkboxRole(page);
@@ -485,7 +472,7 @@ test.describe("should render CheckBox component and check events", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const checkboxElement = checkboxRole(page);
@@ -503,7 +490,7 @@ test.describe("should render CheckBox component and check events", () => {
         onFocus={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const checkboxElement = checkboxRole(page);
@@ -521,7 +508,7 @@ test.describe("should render CheckBox component and check events", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const checkboxElement = checkboxRole(page);
@@ -603,32 +590,29 @@ test.describe("should render CheckboxGroup component and check props", () => {
     await expect(validationMessage).toHaveAttribute("data-element", "info");
   });
 
-  ([
-    ["left", "flex-start"],
-    ["right", "flex-end"],
-  ] as [CheckboxGroupProps["legendAlign"], string][]).forEach(
-    ([position, assertion]) => {
-      test(`should render CheckboxGroup component with inline legend aligned to ${position}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <CheckboxGroupComponent
-            legend="CheckBox Legend"
-            legendWidth={20}
-            legendAlign={position}
-            legendInline
-          />
-        );
+  (
+    [
+      ["left", "flex-start"],
+      ["right", "flex-end"],
+    ] as [CheckboxGroupProps["legendAlign"], string][]
+  ).forEach(([position, assertion]) => {
+    test(`should render CheckboxGroup component with inline legend aligned to ${position}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <CheckboxGroupComponent
+          legend="CheckBox Legend"
+          legendWidth={20}
+          legendAlign={position}
+          legendInline
+        />,
+      );
 
-        const groupLegendElement = checkboxgroupLegend(page);
-        await expect(groupLegendElement).toHaveCSS(
-          "justify-content",
-          assertion
-        );
-      });
-    }
-  );
+      const groupLegendElement = checkboxgroupLegend(page);
+      await expect(groupLegendElement).toHaveCSS("justify-content", assertion);
+    });
+  });
 
   [20, 40].forEach((width) => {
     test(`should render CheckboxGroup component with inline legend width set to ${width}`, async ({
@@ -640,7 +624,7 @@ test.describe("should render CheckboxGroup component and check props", () => {
           legend="CheckBox Legend"
           legendWidth={width}
           legendInline
-        />
+        />,
       );
 
       const groupLegendElement = checkboxgroupLegend(page);
@@ -660,43 +644,45 @@ test.describe("should render CheckboxGroup component and check props", () => {
           name="checkbox_id-three"
           label="Checkbox 3"
         />
-      </CheckboxGroupComponent>
+      </CheckboxGroupComponent>,
     );
 
     const checkboxGroupElement = checkboxGroup(page);
     await expect(checkboxGroupElement).toContainText("Checkbox 3");
   });
 
-  ([
-    [1, "8px"],
-    [2, "16px"],
-  ] as [CheckboxGroupProps["legendSpacing"], string][]).forEach(
-    ([spacing, padding]) => {
-      test(`should render CheckboxGroup component with legendSpacing set to ${spacing}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <CheckboxGroupComponent
-            legend="AVeryVeryLongLegend"
-            legendSpacing={spacing}
-            legendWidth={10}
-            legendInline
-          />
-        );
+  (
+    [
+      [1, "8px"],
+      [2, "16px"],
+    ] as [CheckboxGroupProps["legendSpacing"], string][]
+  ).forEach(([spacing, padding]) => {
+    test(`should render CheckboxGroup component with legendSpacing set to ${spacing}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <CheckboxGroupComponent
+          legend="AVeryVeryLongLegend"
+          legendSpacing={spacing}
+          legendWidth={10}
+          legendInline
+        />,
+      );
 
-        const groupLegendElement = checkboxgroupLegend(page);
-        await expect(groupLegendElement).toHaveCSS("padding-right", padding);
-      });
-    }
-  );
+      const groupLegendElement = checkboxgroupLegend(page);
+      await expect(groupLegendElement).toHaveCSS("padding-right", padding);
+    });
+  });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as CheckboxGroupProps["tooltipPosition"][]).forEach((position) => {
+  (
+    [
+      "top",
+      "bottom",
+      "left",
+      "right",
+    ] as CheckboxGroupProps["tooltipPosition"][]
+  ).forEach((position) => {
     test(`should render CheckboxGroupComponent component with tooltip positioned to the ${position}`, async ({
       mount,
       page,
@@ -706,7 +692,7 @@ test.describe("should render CheckboxGroup component and check props", () => {
           legend="Checkbox Legend"
           error="Something is wrong"
           tooltipPosition={position}
-        />
+        />,
       );
 
       const checkboxIconElement = checkboxGroupIcon(page);
@@ -715,7 +701,7 @@ test.describe("should render CheckboxGroup component and check props", () => {
       await expect(tooltipElement).toHaveText("Something is wrong");
       await expect(tooltipElement).toHaveAttribute(
         "data-placement",
-        `${position}`
+        `${position}`,
       );
     });
   });
@@ -725,7 +711,7 @@ test.describe("should render CheckboxGroup component and check props", () => {
     page,
   }) => {
     await mount(
-      <CheckboxGroupComponent legend="Required CheckboxGroup" required />
+      <CheckboxGroupComponent legend="Required CheckboxGroup" required />,
     );
 
     await verifyRequiredAsteriskForLegend(page);
@@ -736,7 +722,7 @@ test.describe("should render CheckboxGroup component and check props", () => {
     page,
   }) => {
     await mount(
-      <CheckboxGroupComponentNewValidation error="Error Message (Fix is required)" />
+      <CheckboxGroupComponentNewValidation error="Error Message (Fix is required)" />,
     );
 
     const checkboxGroupElement1 = checkboxGroup(page)
@@ -744,7 +730,7 @@ test.describe("should render CheckboxGroup component and check props", () => {
       .nth(1)
       .locator("p");
     await expect(checkboxGroupElement1).toContainText(
-      "Error Message (Fix is required)"
+      "Error Message (Fix is required)",
     );
     await expect(checkboxGroupElement1).toHaveCSS("color", "rgb(203, 55, 74)");
     const checkboxGroupElement2 = checkboxGroup(page)
@@ -753,7 +739,7 @@ test.describe("should render CheckboxGroup component and check props", () => {
       .locator("span");
     await expect(checkboxGroupElement2).toHaveCSS(
       "background-color",
-      "rgb(203, 55, 74)"
+      "rgb(203, 55, 74)",
     );
     await expect(checkboxGroupElement2).toHaveCSS("position", "absolute");
   });
@@ -763,7 +749,7 @@ test.describe("should render CheckboxGroup component and check props", () => {
     page,
   }) => {
     await mount(
-      <CheckboxGroupComponentNewValidation warning="Warning Message (Fix is optional)" />
+      <CheckboxGroupComponentNewValidation warning="Warning Message (Fix is optional)" />,
     );
 
     const checkboxGroupElement1 = checkboxGroup(page)
@@ -771,7 +757,7 @@ test.describe("should render CheckboxGroup component and check props", () => {
       .nth(1)
       .locator("p");
     await expect(checkboxGroupElement1).toContainText(
-      "Warning Message (Fix is optional)"
+      "Warning Message (Fix is optional)",
     );
     await expect(checkboxGroupElement1).toHaveCSS("color", "rgb(191, 82, 0)");
     const checkboxGroupElement2 = checkboxGroup(page)
@@ -780,21 +766,23 @@ test.describe("should render CheckboxGroup component and check props", () => {
       .locator("span");
     await expect(checkboxGroupElement2).toHaveCSS(
       "background-color",
-      "rgb(239, 103, 0)"
+      "rgb(239, 103, 0)",
     );
     await expect(checkboxGroupElement2).toHaveCSS("position", "absolute");
   });
 
-  ([
-    [true, "row"],
-    [false, "column"],
-  ] as [CheckboxGroupProps["inline"], string][]).forEach(([bool, flex]) => {
+  (
+    [
+      [true, "row"],
+      [false, "column"],
+    ] as [CheckboxGroupProps["inline"], string][]
+  ).forEach(([bool, flex]) => {
     test(`should render CheckboxGroup component with new validation and inline prop set to ${bool}`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <CheckboxGroupComponentNewValidation required inline={bool} />
+        <CheckboxGroupComponentNewValidation required inline={bool} />,
       );
 
       const groupFlexElement = checkboxGroupFlex(page);
@@ -829,7 +817,7 @@ test.describe("should check accessibility for Checkbox component", () => {
     page,
   }) => {
     await mount(
-      <CheckboxComponent fieldHelp="Inline fieldhelp" fieldHelpInline />
+      <CheckboxComponent fieldHelp="Inline fieldhelp" fieldHelpInline />,
     );
 
     await checkAccessibility(page);
@@ -840,7 +828,7 @@ test.describe("should check accessibility for Checkbox component", () => {
     page,
   }) => {
     await mount(
-      <CheckboxComponent label="Label For CheckBox" labelHelp="Label Help" />
+      <CheckboxComponent label="Label For CheckBox" labelHelp="Label Help" />,
     );
 
     const checkboxIconElement = checkboxIcon(page);
@@ -913,12 +901,9 @@ test.describe("should check accessibility for Checkbox component", () => {
     await checkAccessibility(page);
   });
 
-  ([
-    "bottom",
-    "left",
-    "right",
-    "top",
-  ] as CheckboxProps["tooltipPosition"][]).forEach((position) => {
+  (
+    ["bottom", "left", "right", "top"] as CheckboxProps["tooltipPosition"][]
+  ).forEach((position) => {
     test(`should render CheckboxComponent component with tooltip positioned to the ${position}`, async ({
       mount,
       page,
@@ -929,7 +914,7 @@ test.describe("should check accessibility for Checkbox component", () => {
             labelHelp="Tooltip info"
             tooltipPosition={position}
           />
-        </Box>
+        </Box>,
       );
 
       const checkboxIconElement = checkboxIcon(page);
@@ -978,7 +963,7 @@ test.describe("should check accessibility for Checkbox Group component", () => {
     page,
   }) => {
     await mount(
-      <CheckboxGroupComponent legend={CHARACTERS.SPECIALCHARACTERS} />
+      <CheckboxGroupComponent legend={CHARACTERS.SPECIALCHARACTERS} />,
     );
 
     await checkAccessibility(page);
@@ -996,12 +981,12 @@ test.describe("should check accessibility for Checkbox Group component", () => {
             legendWidth={20}
             legendAlign={position}
             legendInline
-          />
+          />,
         );
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [20, 40].forEach((width) => {
@@ -1014,7 +999,7 @@ test.describe("should check accessibility for Checkbox Group component", () => {
           legend="CheckBox Legend"
           legendWidth={width}
           legendInline
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -1032,7 +1017,7 @@ test.describe("should check accessibility for Checkbox Group component", () => {
           legendSpacing={spacing}
           legendWidth={10}
           legendInline
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -1044,18 +1029,20 @@ test.describe("should check accessibility for Checkbox Group component", () => {
     page,
   }) => {
     await mount(
-      <CheckboxGroupComponent legend="Required CheckboxGroup" required />
+      <CheckboxGroupComponent legend="Required CheckboxGroup" required />,
     );
 
     await checkAccessibility(page);
   });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as CheckboxGroupProps["tooltipPosition"][]).forEach((position) => {
+  (
+    [
+      "top",
+      "bottom",
+      "left",
+      "right",
+    ] as CheckboxGroupProps["tooltipPosition"][]
+  ).forEach((position) => {
     test(`should pass accessibility tests with tooltip positioned to the ${position}`, async ({
       mount,
       page,
@@ -1065,7 +1052,7 @@ test.describe("should check accessibility for Checkbox Group component", () => {
           legend="Checkbox Legend"
           error="Something is wrong"
           tooltipPosition={position}
-        />
+        />,
       );
 
       const checkboxIconElement = checkboxGroupIcon(page);
diff --git a/src/components/checkbox/checkbox.test.tsx b/src/components/checkbox/checkbox.test.tsx
index 7202b1da29..a8ef1cafb2 100644
--- a/src/components/checkbox/checkbox.test.tsx
+++ b/src/components/checkbox/checkbox.test.tsx
@@ -16,7 +16,7 @@ test("should display a deprecation warning for uncontrolled behaviour which is t
   render(<Checkbox />);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Checkbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Checkbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
   loggerSpy.mockRestore();
@@ -92,7 +92,7 @@ test("should render with provided aria-labelledby", () => {
 
   expect(screen.getByRole("checkbox")).toHaveAttribute(
     "aria-labelledby",
-    "labelId"
+    "labelId",
   );
 });
 
@@ -104,7 +104,7 @@ test("should render tooltip with provided labelHelp and helpAriaLabel", async ()
       labelHelp="labelHelp"
       helpAriaLabel="helpAriaLabel"
       onChange={() => {}}
-    />
+    />,
   );
 
   const helpTooltip = screen.getByRole("button");
@@ -133,7 +133,7 @@ test("should append the validation tooltip to the input's accessible description
       onChange={() => {}}
       fieldHelp="fieldHelp"
       error="error"
-    />
+    />,
   );
 
   const checkbox = screen.getByRole("checkbox");
@@ -157,7 +157,7 @@ test("should append (optional) text on the label when isOptional prop is set", (
     '"(optional)"',
     {
       modifier: "::after",
-    }
+    },
   );
 });
 
@@ -180,7 +180,7 @@ test("should render fieldHelp with expected styles when inputWidth is set", () =
       fieldHelp="fieldHelp"
       onChange={() => {}}
       inputWidth={50}
-    />
+    />,
   );
 
   expect(screen.getByText("fieldHelp")).toHaveStyle({
@@ -196,7 +196,7 @@ test("should render fieldHelp with expected styles when inputWidth is set and re
       onChange={() => {}}
       inputWidth={50}
       reverse
-    />
+    />,
   );
 
   expect(screen.getByText("fieldHelp")).toHaveStyle({
@@ -211,7 +211,7 @@ test("should render fieldHelp with expected styles when labelSpacing is 2", () =
       fieldHelp="fieldHelp"
       onChange={() => {}}
       labelSpacing={2}
-    />
+    />,
   );
 
   expect(screen.getByText("fieldHelp")).toHaveStyle({
@@ -226,7 +226,7 @@ test("should render with expected styles when fieldHelpInline is true", () => {
       fieldHelp="fieldHelp"
       onChange={() => {}}
       fieldHelpInline
-    />
+    />,
   );
 
   expect(screen.getByText("label")).toHaveStyle({ flex: "0 1 auto" });
@@ -241,7 +241,7 @@ test("should render with expected styles when fieldHelpInline is true and revers
       onChange={() => {}}
       fieldHelpInline
       reverse
-    />
+    />,
   );
 
   expect(screen.getByText("fieldHelp")).toHaveStyle({ paddingLeft: "6px" });
@@ -254,7 +254,7 @@ test("should render with expected styles when size is large", () => {
       fieldHelp="fieldHelp"
       onChange={() => {}}
       size="large"
-    />
+    />,
   );
 
   expect(screen.getByText("fieldHelp")).toHaveStyle({ marginLeft: "24px" });
@@ -273,7 +273,7 @@ test("should render with expected styles when size is large and fieldHelpInline
       onChange={() => {}}
       size="large"
       fieldHelpInline
-    />
+    />,
   );
 
   expect(screen.getByTestId("label-container")).toHaveStyle({
@@ -288,7 +288,7 @@ test("should render checkbox svg with expected styles when validation props are
       <Checkbox label="label-1" onChange={() => {}} error />
       <Checkbox label="label-2" onChange={() => {}} warning />
       <Checkbox label="label-3" onChange={() => {}} info />
-    </>
+    </>,
   );
 
   const checkboxes = screen.getAllByTestId("checkable-svg");
@@ -308,7 +308,7 @@ test("should render checkbox svg with expected styles when validationRedesignOpt
     <CarbonProvider validationRedesignOptIn>
       <Checkbox label="label-1" onChange={() => {}} warning />
       <Checkbox label="label-2" onChange={() => {}} info />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const checkboxes = screen.getAllByTestId("checkable-svg");
@@ -329,7 +329,7 @@ test("should render with expected styles when adaptiveSpacingBreakpoint set and
       onChange={() => {}}
       adaptiveSpacingBreakpoint={1000}
       ml="10%"
-    />
+    />,
   );
 
   expect(screen.getByTestId("checkbox-1")).toHaveStyle({ marginLeft: "0" });
@@ -344,7 +344,7 @@ test("should render with expected styles when adaptiveSpacingBreakpoint set and
       onChange={() => {}}
       adaptiveSpacingBreakpoint={1000}
       ml="10%"
-    />
+    />,
   );
 
   expect(screen.getByTestId("checkbox-1")).toHaveStyle({ marginLeft: "10%" });
@@ -359,5 +359,5 @@ testStyledSystemMarginRTL(
       {...props}
     />
   ),
-  () => screen.getByTestId("checkbox-1")
+  () => screen.getByTestId("checkbox-1"),
 );
diff --git a/src/components/confirm/confirm.component.tsx b/src/components/confirm/confirm.component.tsx
index e70d9002af..14f0685694 100644
--- a/src/components/confirm/confirm.component.tsx
+++ b/src/components/confirm/confirm.component.tsx
@@ -117,7 +117,7 @@ export const Confirm = ({
         onClick={
           onCancel as (
             // TODO: Remove assertion after Button/Button with href interface is fixed
-            ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+            ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
           ) => void
         }
         buttonType={cancelButtonType}
@@ -140,7 +140,7 @@ export const Confirm = ({
       onClick={
         onConfirm as (
           // TODO: Remove assertion after Button/Button with href interface is fixed
-          ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+          ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
         ) => void
       }
       buttonType={confirmButtonType}
diff --git a/src/components/confirm/confirm.pw.tsx b/src/components/confirm/confirm.pw.tsx
index 5d36dcd14b..a3d24bccbf 100644
--- a/src/components/confirm/confirm.pw.tsx
+++ b/src/components/confirm/confirm.pw.tsx
@@ -29,7 +29,7 @@ const heights: [number, string][] = [
 const buttonTypes: [
   ConfirmProps["confirmButtonType"] | ConfirmProps["cancelButtonType"],
   string,
-  string
+  string,
 ][] = [
   ["primary", "rgb(255, 255, 255)", "rgba(0, 0, 0, 0)"],
   ["secondary", "rgb(0, 126, 69)", "rgb(0, 126, 69)"],
@@ -38,7 +38,7 @@ const buttonTypes: [
 ];
 const disabledStates: [
   ConfirmProps["disableCancel"] | ConfirmProps["disableConfirm"],
-  string
+  string,
 ][] = [
   [true, "disabled"],
   [false, "enabled"],
@@ -87,7 +87,7 @@ test.describe("should render Confirm component", () => {
 
       await expect(page.getByText(titleText)).toHaveAttribute(
         "data-element",
-        "title"
+        "title",
       );
     });
   });
@@ -101,7 +101,7 @@ test.describe("should render Confirm component", () => {
 
       await expect(page.getByText(subTitleText)).toHaveAttribute(
         "data-element",
-        "subtitle"
+        "subtitle",
       );
     });
   });
@@ -126,21 +126,23 @@ test.describe("should render Confirm component", () => {
     await mount(<ConfirmComponent height="1200px" />);
 
     const actualDialogHeight = parseInt(
-      await getStyle(page.getByRole("alertdialog"), "height")
+      await getStyle(page.getByRole("alertdialog"), "height"),
     );
 
     expect(actualDialogHeight).toBeLessThanOrEqual(1000);
   });
 
-  ([
-    [SIZE.EXTRASMALL, 300],
-    [SIZE.SMALL, 380],
-    [SIZE.MEDIUMSMALL, 540],
-    [SIZE.MEDIUM, 750],
-    [SIZE.MEDIUMLARGE, 850],
-    [SIZE.LARGE, 960],
-    [SIZE.EXTRALARGE, 1080],
-  ] as [ConfirmProps["size"], number][]).forEach(([sizeName, size]) => {
+  (
+    [
+      [SIZE.EXTRASMALL, 300],
+      [SIZE.SMALL, 380],
+      [SIZE.MEDIUMSMALL, 540],
+      [SIZE.MEDIUM, 750],
+      [SIZE.MEDIUMLARGE, 850],
+      [SIZE.LARGE, 960],
+      [SIZE.EXTRALARGE, 1080],
+    ] as [ConfirmProps["size"], number][]
+  ).forEach(([sizeName, size]) => {
     test(`should check confirm size is ${sizeName} with width of ${size}px`, async ({
       mount,
       page,
@@ -150,15 +152,17 @@ test.describe("should render Confirm component", () => {
       await assertCssValueIsApproximately(
         page.getByRole("alertdialog"),
         "width",
-        size
+        size,
       );
     });
   });
 
-  ([
-    ["error", "error"],
-    ["warning", "warning"],
-  ] as [ConfirmProps["iconType"], string][]).forEach(([iconType, element]) => {
+  (
+    [
+      ["error", "error"],
+      ["warning", "warning"],
+    ] as [ConfirmProps["iconType"], string][]
+  ).forEach(([iconType, element]) => {
     test(`should check confirm has ${iconType} icon`, async ({
       mount,
       page,
@@ -334,7 +338,7 @@ test.describe("should render Confirm component", () => {
 
     await expect(page.getByRole("alertdialog")).toHaveAttribute(
       "aria-label",
-      "playwright-aria"
+      "playwright-aria",
     );
   });
 
@@ -343,7 +347,7 @@ test.describe("should render Confirm component", () => {
 
     await expect(getDataElementByValue(page, "save")).toHaveAttribute(
       "type",
-      "save"
+      "save",
     );
   });
 
@@ -352,7 +356,7 @@ test.describe("should render Confirm component", () => {
 
     await expect(getDataElementByValue(page, "bin")).toHaveAttribute(
       "type",
-      "bin"
+      "bin",
     );
   });
 
@@ -367,12 +371,12 @@ test.describe("should render Confirm component", () => {
         onConfirm={() => {
           ("");
         }}
-      />
+      />,
     );
 
     await expect(page.getByRole("alertdialog")).toHaveAttribute(
       "aria-labelledby",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -387,12 +391,12 @@ test.describe("should render Confirm component", () => {
         onConfirm={() => {
           ("");
         }}
-      />
+      />,
     );
 
     await expect(page.getByRole("alertdialog")).toHaveAttribute(
       "aria-describedby",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -405,7 +409,7 @@ test.describe("should render Confirm component", () => {
         <ConfirmComponent
           cancelButtonIconType="bin"
           cancelButtonIconPosition={position}
-        />
+        />,
       );
 
       if (position === "before") {
@@ -434,7 +438,7 @@ test.describe("should render Confirm component", () => {
         <ConfirmComponent
           confirmButtonIconType="add"
           confirmButtonIconPosition={position}
-        />
+        />,
       );
 
       if (position === "before") {
@@ -478,11 +482,11 @@ test.describe("should render Confirm component", () => {
     const focusedButton = page.getByRole("button").first();
     await expect(focusedButton).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(focusedButton).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -496,7 +500,7 @@ test.describe("should render Confirm component", () => {
 
     await expect(page.getByRole("button").first()).not.toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
   });
 
@@ -517,7 +521,7 @@ test.describe("should render Confirm component", () => {
           "data-role": "wiz",
         }}
         open
-      />
+      />,
     );
 
     const cancelButton = getDataElementByValue(page, "bang");
@@ -544,7 +548,7 @@ test.describe("should render Confirm component for event tests", () => {
         onCancel={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const button = page.getByRole("button").filter({ hasText: "No" });
@@ -562,7 +566,7 @@ test.describe("should render Confirm component for event tests", () => {
         onConfirm={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const button = page.getByRole("button").filter({ hasText: "Yes" });
@@ -580,7 +584,7 @@ test.describe("should render Confirm component for event tests", () => {
         onCancel={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await page.getByRole("alertdialog").press("Escape");
@@ -636,12 +640,14 @@ test.describe("should render Confirm component for event tests", () => {
 });
 
 test.describe("should check accessibility for Confirm", () => {
-  ([
-    "primary",
-    "secondary",
-    "tertiary",
-    "darkBackground",
-  ] as ConfirmProps["confirmButtonType"][]).forEach((type) => {
+  (
+    [
+      "primary",
+      "secondary",
+      "tertiary",
+      "darkBackground",
+    ] as ConfirmProps["confirmButtonType"][]
+  ).forEach((type) => {
     test(`should check accessibility for confirm button of ${type} type`, async ({
       mount,
       page,
@@ -652,12 +658,14 @@ test.describe("should check accessibility for Confirm", () => {
     });
   });
 
-  ([
-    "primary",
-    "secondary",
-    "tertiary",
-    "darkBackground",
-  ] as ConfirmProps["cancelButtonType"][]).forEach((type) => {
+  (
+    [
+      "primary",
+      "secondary",
+      "tertiary",
+      "darkBackground",
+    ] as ConfirmProps["cancelButtonType"][]
+  ).forEach((type) => {
     test(`should check accessibility for cancel button of ${type} type`, async ({
       mount,
       page,
@@ -771,7 +779,7 @@ test.describe("should check accessibility for Confirm", () => {
         <ConfirmComponent
           cancelButtonIconType="bin"
           cancelButtonIconPosition={position}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -787,7 +795,7 @@ test.describe("should check accessibility for Confirm", () => {
         <ConfirmComponent
           confirmButtonIconType="add"
           confirmButtonIconPosition={position}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -866,15 +874,17 @@ test.describe("should check accessibility for Confirm", () => {
     });
   });
 
-  ([
-    [SIZE.EXTRASMALL, 300],
-    [SIZE.SMALL, 380],
-    [SIZE.MEDIUMSMALL, 540],
-    [SIZE.MEDIUM, 750],
-    [SIZE.MEDIUMLARGE, 850],
-    [SIZE.LARGE, 960],
-    [SIZE.EXTRALARGE, 1080],
-  ] as [ConfirmProps["size"], number][]).forEach(([sizeName, size]) => {
+  (
+    [
+      [SIZE.EXTRASMALL, 300],
+      [SIZE.SMALL, 380],
+      [SIZE.MEDIUMSMALL, 540],
+      [SIZE.MEDIUM, 750],
+      [SIZE.MEDIUMLARGE, 850],
+      [SIZE.LARGE, 960],
+      [SIZE.EXTRALARGE, 1080],
+    ] as [ConfirmProps["size"], number][]
+  ).forEach(([sizeName, size]) => {
     test(`should check accessibility when size is ${sizeName} with width of ${size}px`, async ({
       mount,
       page,
@@ -942,6 +952,6 @@ test(`should have the expected border radius styling`, async ({
 
   await expect(page.getByRole("alertdialog")).toHaveCSS(
     "border-radius",
-    "16px"
+    "16px",
   );
 });
diff --git a/src/components/confirm/confirm.test.tsx b/src/components/confirm/confirm.test.tsx
index 71ada1b38c..a524cfaa58 100644
--- a/src/components/confirm/confirm.test.tsx
+++ b/src/components/confirm/confirm.test.tsx
@@ -7,7 +7,7 @@ jest.mock("../../__internal__/utils/helpers/guid", () => () => "guid-12345");
 
 test("should render the component with expected title and subtitle", () => {
   render(
-    <Confirm open title="Title" subtitle="Subtitle" onConfirm={() => {}} />
+    <Confirm open title="Title" subtitle="Subtitle" onConfirm={() => {}} />,
   );
 
   expect(screen.getByText("Title")).toBeVisible();
@@ -42,7 +42,7 @@ test("should render the confirm and cancel buttons with the provided labels", ()
       onCancel={() => {}}
       confirmLabel="Confirm"
       cancelLabel="Cancel"
-    />
+    />,
   );
 
   expect(screen.getByRole("button", { name: "Confirm" })).toBeVisible();
@@ -51,7 +51,7 @@ test("should render the confirm and cancel buttons with the provided labels", ()
 
 test("should render the close icon if showCloseIcon is set", () => {
   render(
-    <Confirm open onConfirm={() => {}} onCancel={() => {}} showCloseIcon />
+    <Confirm open onConfirm={() => {}} onCancel={() => {}} showCloseIcon />,
   );
 
   expect(screen.getByRole("button", { name: "Close" })).toBeVisible();
@@ -61,7 +61,7 @@ test("should call onCancel when close icon button is clicked", async () => {
   const onCancel = jest.fn();
   const user = userEvent.setup();
   render(
-    <Confirm open onConfirm={() => {}} onCancel={onCancel} showCloseIcon />
+    <Confirm open onConfirm={() => {}} onCancel={onCancel} showCloseIcon />,
   );
 
   await user.click(screen.getByRole("button", { name: "Close" }));
@@ -82,7 +82,7 @@ test("should render disabled cancel button and close icon when disableCancel is
       onCancel={() => {}}
       showCloseIcon
       disableCancel
-    />
+    />,
   );
 
   expect(screen.getByRole("button", { name: "No" })).toBeDisabled();
@@ -99,7 +99,7 @@ test("should not call onCancel when disableCancel is set and ESC key is pressed"
       onCancel={() => {}}
       showCloseIcon
       disableCancel
-    />
+    />,
   );
 
   await user.keyboard("{esc}");
@@ -113,7 +113,7 @@ test("should render disabled confirm button with Loader if isLoadingConfirm is s
       onConfirm={() => {}}
       isLoadingConfirm
       confirmButtonDataProps={{ "data-role": "confirm-button" }}
-    />
+    />,
   );
 
   expect(screen.queryByRole("button", { name: "Yes" })).not.toBeInTheDocument();
@@ -156,45 +156,45 @@ test("should render buttons with expected data tags", () => {
         "data-role": "close-button",
         "data-element": "baz",
       }}
-    />
+    />,
   );
 
   expect(screen.getByRole("button", { name: "Yes" })).toHaveAttribute(
     "data-role",
-    "confirm-button"
+    "confirm-button",
   );
   expect(screen.getByRole("button", { name: "Yes" })).toHaveAttribute(
     "data-element",
-    "foo"
+    "foo",
   );
 
   expect(screen.getByRole("button", { name: "No" })).toHaveAttribute(
     "data-role",
-    "cancel-button"
+    "cancel-button",
   );
   expect(screen.getByRole("button", { name: "No" })).toHaveAttribute(
     "data-element",
-    "bar"
+    "bar",
   );
 
   expect(screen.getByRole("button", { name: "Close" })).toHaveAttribute(
     "data-role",
-    "close-button"
+    "close-button",
   );
   expect(screen.getByRole("button", { name: "Close" })).toHaveAttribute(
     "data-element",
-    "baz"
+    "baz",
   );
 });
 
 test("should render with aria-labelledby set to the title's id when title and iconType props are set", () => {
   render(
-    <Confirm open title="Title" iconType="warning" onConfirm={() => {}} />
+    <Confirm open title="Title" iconType="warning" onConfirm={() => {}} />,
   );
   expect(screen.getByText("Title")).toHaveAttribute("id", "guid-12345");
   expect(screen.getByRole("alertdialog")).toHaveAttribute(
     "aria-labelledby",
-    "guid-12345"
+    "guid-12345",
   );
 });
 
@@ -206,12 +206,12 @@ test("should render with aria-describedby set to the subtitle's id when subtitle
       subtitle="Subtitle"
       iconType="warning"
       onConfirm={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByText("Subtitle")).toHaveAttribute("id", "guid-12345");
   expect(screen.getByRole("alertdialog")).toHaveAttribute(
     "aria-describedby",
-    "guid-12345"
+    "guid-12345",
   );
 });
diff --git a/src/components/content/content.pw.tsx b/src/components/content/content.pw.tsx
index 95ff6e1d8b..a68f360351 100644
--- a/src/components/content/content.pw.tsx
+++ b/src/components/content/content.pw.tsx
@@ -36,7 +36,7 @@ test.describe("check Content component properties", () => {
       page,
     }) => {
       await mount(
-        <ContentComponent title="Title">{children}</ContentComponent>
+        <ContentComponent title="Title">{children}</ContentComponent>,
       );
 
       await expect(contentBody(page)).toHaveText(children);
@@ -74,10 +74,12 @@ test.describe("check Content component properties", () => {
     });
   });
 
-  ([
-    [70, (totalWidth * 70) / 100],
-    [50, (totalWidth * 50) / 100],
-  ] as [number, number][]).forEach(([titleWidth, computedWidth]) => {
+  (
+    [
+      [70, (totalWidth * 70) / 100],
+      [50, (totalWidth * 50) / 100],
+    ] as [number, number][]
+  ).forEach(([titleWidth, computedWidth]) => {
     test(`should check titleWidth as ${titleWidth} for Content component`, async ({
       mount,
       page,
@@ -89,10 +91,12 @@ test.describe("check Content component properties", () => {
     });
   });
 
-  ([
-    [true, 70, totalWidth],
-    [false, 50, totalWidth],
-  ] as [boolean, number, number][]).forEach(([bodyFullWidth, titleWidth]) => {
+  (
+    [
+      [true, 70, totalWidth],
+      [false, 50, totalWidth],
+    ] as [boolean, number, number][]
+  ).forEach(([bodyFullWidth, titleWidth]) => {
     test(`should check Content component has bodyFullWidth as ${bodyFullWidth}`, async ({
       mount,
       page,
@@ -101,7 +105,7 @@ test.describe("check Content component properties", () => {
         <ContentComponent
           bodyFullWidth={bodyFullWidth}
           titleWidth={titleWidth}
-        />
+        />,
       );
       const cssWidth = await getStyle(contentBody(page), "width");
       if (bodyFullWidth === true) {
diff --git a/src/components/content/content.test.tsx b/src/components/content/content.test.tsx
index dc536ab616..dac4ac7a9f 100644
--- a/src/components/content/content.test.tsx
+++ b/src/components/content/content.test.tsx
@@ -98,5 +98,5 @@ testStyledSystemMarginRTL(
       Foo
     </Content>
   ),
-  () => screen.getByTestId("content")
+  () => screen.getByTestId("content"),
 );
diff --git a/src/components/date-range/date-range.component.tsx b/src/components/date-range/date-range.component.tsx
index d5da042f88..8dca31fc7d 100644
--- a/src/components/date-range/date-range.component.tsx
+++ b/src/components/date-range/date-range.component.tsx
@@ -142,9 +142,10 @@ export const DateRange = ({
 
   const l = useLocale();
   const { dateFnsLocale } = l.date;
-  const { format } = useMemo(() => getFormatData(dateFnsLocale()), [
-    dateFnsLocale,
-  ]);
+  const { format } = useMemo(
+    () => getFormatData(dateFnsLocale()),
+    [dateFnsLocale],
+  );
   const inlineLabelWidth = 40;
   const [lastChangedDate, setLastChangedDate] = useState("");
 
@@ -156,7 +157,7 @@ export const DateRange = ({
 
       return valueString;
     },
-    [format]
+    [format],
   );
 
   const getStartDate = useCallback(() => {
@@ -254,7 +255,7 @@ export const DateRange = ({
         },
       };
     },
-    [endDateValue, id, name, startDateValue]
+    [endDateValue, id, name, startDateValue],
   );
 
   const handleOnChange = (changedDate: InputName, ev: DateChangeEvent) => {
@@ -312,7 +313,7 @@ export const DateRange = ({
 
   const handleOnKeyDown = (
     ev: React.KeyboardEvent<HTMLInputElement>,
-    activeInput: InputName
+    activeInput: InputName,
   ) => {
     if (Events.isTabKey(ev) && Events.isShiftKey(ev) && inputRefMap?.start) {
       inputRefMap.start.isBlurBlocked.current = !(activeInput === "start");
diff --git a/src/components/date-range/date-range.pw.tsx b/src/components/date-range/date-range.pw.tsx
index 4a1a80e9fa..fe3620bfef 100644
--- a/src/components/date-range/date-range.pw.tsx
+++ b/src/components/date-range/date-range.pw.tsx
@@ -44,7 +44,7 @@ test.describe("Functionality tests for DateRange component", () => {
 
       const dateRangeStartDateLabelElement = dateRangeComponentLabel(
         page,
-        START_DATE_RANGE_INDEX
+        START_DATE_RANGE_INDEX,
       );
 
       await expect(dateRangeStartDateLabelElement).toHaveText(startLabel);
@@ -58,13 +58,11 @@ test.describe("Functionality tests for DateRange component", () => {
     }) => {
       await mount(<DateRangeCustom endLabel={endLabel} />);
 
-      const dateRangeComponentLabelElementEndDateRange = dateRangeComponentLabel(
-        page,
-        END_DATE_RANGE_INDEX
-      );
+      const dateRangeComponentLabelElementEndDateRange =
+        dateRangeComponentLabel(page, END_DATE_RANGE_INDEX);
 
       await expect(dateRangeComponentLabelElementEndDateRange).toHaveText(
-        endLabel
+        endLabel,
       );
     });
   });
@@ -85,7 +83,7 @@ test.describe("Functionality tests for DateRange component", () => {
       await checkElementBorderColours(
         page,
         dateRangeComponentInput(page, START_DATE_RANGE_INDEX).locator(".."),
-        VALIDATION.ERROR
+        VALIDATION.ERROR,
       );
     });
   });
@@ -106,7 +104,7 @@ test.describe("Functionality tests for DateRange component", () => {
       await checkElementBorderColours(
         page,
         dateRangeComponentInput(page, END_DATE_RANGE_INDEX).locator(".."),
-        VALIDATION.ERROR
+        VALIDATION.ERROR,
       );
     });
   });
@@ -127,7 +125,7 @@ test.describe("Functionality tests for DateRange component", () => {
       await checkElementBorderColours(
         page,
         dateRangeComponentInput(page, START_DATE_RANGE_INDEX).locator(".."),
-        VALIDATION.WARNING
+        VALIDATION.WARNING,
       );
     });
   });
@@ -148,7 +146,7 @@ test.describe("Functionality tests for DateRange component", () => {
       await checkElementBorderColours(
         page,
         dateRangeComponentInput(page, END_DATE_RANGE_INDEX).locator(".."),
-        VALIDATION.WARNING
+        VALIDATION.WARNING,
       );
     });
   });
@@ -169,7 +167,7 @@ test.describe("Functionality tests for DateRange component", () => {
       await checkElementBorderColours(
         page,
         dateRangeComponentInput(page, START_DATE_RANGE_INDEX).locator(".."),
-        VALIDATION.INFO
+        VALIDATION.INFO,
       );
     });
   });
@@ -190,7 +188,7 @@ test.describe("Functionality tests for DateRange component", () => {
       await checkElementBorderColours(
         page,
         dateRangeComponentInput(page, END_DATE_RANGE_INDEX).locator(".."),
-        VALIDATION.INFO
+        VALIDATION.INFO,
       );
     });
   });
@@ -201,7 +199,7 @@ test.describe("Functionality tests for DateRange component", () => {
     await checkElementBorderColours(
       page,
       dateRangeComponentInput(page, START_DATE_RANGE_INDEX).locator(".."),
-      VALIDATION.ERROR
+      VALIDATION.ERROR,
     );
   });
 
@@ -211,7 +209,7 @@ test.describe("Functionality tests for DateRange component", () => {
     await checkElementBorderColours(
       page,
       dateRangeComponentInput(page, END_DATE_RANGE_INDEX).locator(".."),
-      VALIDATION.ERROR
+      VALIDATION.ERROR,
     );
   });
 
@@ -221,7 +219,7 @@ test.describe("Functionality tests for DateRange component", () => {
     await checkElementBorderColours(
       page,
       dateRangeComponentInput(page, START_DATE_RANGE_INDEX).locator(".."),
-      VALIDATION.WARNING
+      VALIDATION.WARNING,
     );
   });
 
@@ -231,7 +229,7 @@ test.describe("Functionality tests for DateRange component", () => {
     await checkElementBorderColours(
       page,
       dateRangeComponentInput(page, END_DATE_RANGE_INDEX).locator(".."),
-      VALIDATION.WARNING
+      VALIDATION.WARNING,
     );
   });
 
@@ -241,7 +239,7 @@ test.describe("Functionality tests for DateRange component", () => {
     await checkElementBorderColours(
       page,
       dateRangeComponentInput(page, START_DATE_RANGE_INDEX).locator(".."),
-      VALIDATION.INFO
+      VALIDATION.INFO,
     );
   });
 
@@ -251,7 +249,7 @@ test.describe("Functionality tests for DateRange component", () => {
     await checkElementBorderColours(
       page,
       dateRangeComponentInput(page, END_DATE_RANGE_INDEX).locator(".."),
-      VALIDATION.INFO
+      VALIDATION.INFO,
     );
   });
 
@@ -266,7 +264,7 @@ test.describe("Functionality tests for DateRange component", () => {
           startError={error}
           endError={error}
           validationOnLabel
-        />
+        />,
       );
 
       const dateRangeComponentLabelElementStartDateIcon = page
@@ -301,7 +299,7 @@ test.describe("Functionality tests for DateRange component", () => {
           startWarning={warning}
           endWarning={warning}
           validationOnLabel
-        />
+        />,
       );
 
       const dateRangeComponentLabelElementStartDateIcon = page
@@ -332,7 +330,7 @@ test.describe("Functionality tests for DateRange component", () => {
       page,
     }) => {
       await mount(
-        <DateRangeCustom startInfo={info} endInfo={info} validationOnLabel />
+        <DateRangeCustom startInfo={info} endInfo={info} validationOnLabel />,
       );
 
       const dateRangeComponentLabelElementStartDateIcon = page
@@ -357,10 +355,12 @@ test.describe("Functionality tests for DateRange component", () => {
     });
   });
 
-  ([
-    [true, "top", "flex"],
-    [false, "bottom", "block"],
-  ] as const).forEach(([boolean, cssValue, displayValue]) => {
+  (
+    [
+      [true, "top", "flex"],
+      [false, "bottom", "block"],
+    ] as const
+  ).forEach(([boolean, cssValue, displayValue]) => {
     test(`should check the labelsInline prop is set to ${boolean}`, async ({
       mount,
       page,
@@ -371,32 +371,28 @@ test.describe("Functionality tests for DateRange component", () => {
 
       await expect(startDateElement).toHaveCSS("vertical-align", cssValue);
 
-      const dateRangeComponentLabelElementStartDateParent = dateRangeComponentLabel(
-        page,
-        START_DATE_RANGE_INDEX
-      )
-        .locator("..")
-        .locator("..");
+      const dateRangeComponentLabelElementStartDateParent =
+        dateRangeComponentLabel(page, START_DATE_RANGE_INDEX)
+          .locator("..")
+          .locator("..");
 
       await expect(dateRangeComponentLabelElementStartDateParent).toHaveCSS(
         "display",
-        displayValue
+        displayValue,
       );
 
       const endDateElement = page.locator(END_DATE);
 
       await expect(endDateElement).toHaveCSS("vertical-align", cssValue);
 
-      const dateRangeComponentLabelElementEndDateIndexParent = dateRangeComponentLabel(
-        page,
-        END_DATE_RANGE_INDEX
-      )
-        .locator("..")
-        .locator("..");
+      const dateRangeComponentLabelElementEndDateIndexParent =
+        dateRangeComponentLabel(page, END_DATE_RANGE_INDEX)
+          .locator("..")
+          .locator("..");
 
       await expect(dateRangeComponentLabelElementEndDateIndexParent).toHaveCSS(
         "display",
-        displayValue
+        displayValue,
       );
     });
   });
@@ -407,11 +403,11 @@ test.describe("Functionality tests for DateRange component", () => {
         startDateProps={{
           disabled: true,
         }}
-      />
+      />,
     );
 
     const startDateInput = getDataElementByValue(page, "input").nth(
-      START_DATE_RANGE_INDEX
+      START_DATE_RANGE_INDEX,
     );
 
     await expect(startDateInput).toHaveAttribute("disabled", "");
@@ -423,11 +419,11 @@ test.describe("Functionality tests for DateRange component", () => {
         endDateProps={{
           disabled: true,
         }}
-      />
+      />,
     );
 
     const endDateInput = getDataElementByValue(page, "input").nth(
-      END_DATE_RANGE_INDEX
+      END_DATE_RANGE_INDEX,
     );
 
     await expect(endDateInput).toHaveAttribute("disabled", "");
@@ -443,7 +439,7 @@ test.describe("Functionality tests for DateRange component", () => {
           m={9}
           tooltipPosition={position}
           startError={testText}
-        />
+        />,
       );
 
       const iconElement = icon(page);
@@ -451,7 +447,7 @@ test.describe("Functionality tests for DateRange component", () => {
 
       await expect(tooltipPreview(page)).toHaveAttribute(
         "data-placement",
-        position
+        position,
       );
 
       await page.hover("body"); // hover on body to close the tooltip
@@ -471,13 +467,11 @@ test.describe("Event tests for DateRange component", () => {
           onChange={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
-      const getDataElementByValueElementInputEqInputIndex = getDataElementByValue(
-        page,
-        "input"
-      ).nth(inputIndex);
+      const getDataElementByValueElementInputEqInputIndex =
+        getDataElementByValue(page, "input").nth(inputIndex);
       await getDataElementByValueElementInputEqInputIndex.clear();
 
       await expect(callbackCount).toEqual(1);
@@ -496,7 +490,7 @@ test.describe("Event tests for DateRange component", () => {
             onChange={() => {
               callbackCount += 1;
             }}
-          />
+          />,
         );
 
         await textboxInput(page).nth(inputIndex).type(value);
@@ -518,7 +512,7 @@ test.describe("Event tests for DateRange component", () => {
         }}
         name={testText}
         id={testText}
-      />
+      />,
     );
 
     await textboxInput(page).nth(START_DATE_RANGE_INDEX).type("1");
@@ -626,7 +620,7 @@ test.describe("Accessibility tests for Date Range", () => {
           startError={error}
           endError={error}
           validationOnLabel
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -643,7 +637,7 @@ test.describe("Accessibility tests for Date Range", () => {
           startWarning={warning}
           endWarning={warning}
           validationOnLabel
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -656,19 +650,16 @@ test.describe("Accessibility tests for Date Range", () => {
       page,
     }) => {
       await mount(
-        <DateRangeCustom startInfo={info} endInfo={info} validationOnLabel />
+        <DateRangeCustom startInfo={info} endInfo={info} validationOnLabel />,
       );
 
       await checkAccessibility(page);
     });
   });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as DateRangeProps["tooltipPosition"][]).forEach((position) => {
+  (
+    ["top", "bottom", "left", "right"] as DateRangeProps["tooltipPosition"][]
+  ).forEach((position) => {
     test(`should check accessibility with tooltipPosition set to ${position}`, async ({
       mount,
       page,
@@ -678,7 +669,7 @@ test.describe("Accessibility tests for Date Range", () => {
           m={9}
           tooltipPosition={position}
           startError={testText}
-        />
+        />,
       );
       const errorIconElement = getDataElementByValue(page, "error");
       await errorIconElement.hover();
@@ -763,7 +754,7 @@ test.describe("Accessibility tests for Date Range", () => {
         startDateProps={{
           disabled: true,
         }}
-      />
+      />,
     );
 
     await checkAccessibility(page);
@@ -778,7 +769,7 @@ test.describe("Accessibility tests for Date Range", () => {
         endDateProps={{
           disabled: true,
         }}
-      />
+      />,
     );
 
     await checkAccessibility(page);
diff --git a/src/components/date-range/date-range.stories.tsx b/src/components/date-range/date-range.stories.tsx
index cc02b39b7d..93b90dcd39 100644
--- a/src/components/date-range/date-range.stories.tsx
+++ b/src/components/date-range/date-range.stories.tsx
@@ -95,35 +95,36 @@ export const ValidationsStringComponent: Story = () => {
 };
 ValidationsStringComponent.storyName = "Validations (string)";
 
-export const ValidationsStringWithTooltipPositionOverriddenComponent: Story = () => {
-  const [state, setState] = useState(["01/10/2016", "30/10/2016"]);
-  const handleChange = (ev: DateRangeChangeEvent) => {
-    const newValue = [
-      ev.target.value[0].formattedValue,
-      ev.target.value[1].formattedValue,
-    ];
-    setState(newValue);
+export const ValidationsStringWithTooltipPositionOverriddenComponent: Story =
+  () => {
+    const [state, setState] = useState(["01/10/2016", "30/10/2016"]);
+    const handleChange = (ev: DateRangeChangeEvent) => {
+      const newValue = [
+        ev.target.value[0].formattedValue,
+        ev.target.value[1].formattedValue,
+      ];
+      setState(newValue);
+    };
+    return (
+      <>
+        {[
+          { startError: "Start Error", endError: "End Error" },
+          { startWarning: "Start Warning", endWarning: "End Warning" },
+          { startInfo: "Start Info", endInfo: "End Info" },
+        ].map((validation) => (
+          <DateRange
+            key={`${Object.keys(validation)[0]}-string-component`}
+            startLabel="Start"
+            endLabel="End"
+            value={state}
+            onChange={handleChange}
+            {...validation}
+            tooltipPosition="top"
+          />
+        ))}
+      </>
+    );
   };
-  return (
-    <>
-      {[
-        { startError: "Start Error", endError: "End Error" },
-        { startWarning: "Start Warning", endWarning: "End Warning" },
-        { startInfo: "Start Info", endInfo: "End Info" },
-      ].map((validation) => (
-        <DateRange
-          key={`${Object.keys(validation)[0]}-string-component`}
-          startLabel="Start"
-          endLabel="End"
-          value={state}
-          onChange={handleChange}
-          {...validation}
-          tooltipPosition="top"
-        />
-      ))}
-    </>
-  );
-};
 ValidationsStringWithTooltipPositionOverriddenComponent.storyName =
   "Validations (string) with tooltip position overridden";
 ValidationsStringWithTooltipPositionOverriddenComponent.parameters = {
@@ -161,36 +162,37 @@ export const ValidationsStringLabel: Story = () => {
 };
 ValidationsStringLabel.storyName = "Validations (string) with label";
 
-export const ValidationsStringWithTooltipPositionOverriddenLabel: Story = () => {
-  const [state, setState] = useState(["01/10/2016", "30/10/2016"]);
-  const handleChange = (ev: DateRangeChangeEvent) => {
-    const newValue = [
-      ev.target.value[0].formattedValue,
-      ev.target.value[1].formattedValue,
-    ];
-    setState(newValue);
+export const ValidationsStringWithTooltipPositionOverriddenLabel: Story =
+  () => {
+    const [state, setState] = useState(["01/10/2016", "30/10/2016"]);
+    const handleChange = (ev: DateRangeChangeEvent) => {
+      const newValue = [
+        ev.target.value[0].formattedValue,
+        ev.target.value[1].formattedValue,
+      ];
+      setState(newValue);
+    };
+    return (
+      <>
+        {[
+          { startError: "Start Error", endError: "End Error" },
+          { startWarning: "Start Warning", endWarning: "End Warning" },
+          { startInfo: "Start Info", endInfo: "End Info" },
+        ].map((validation) => (
+          <DateRange
+            key={`${Object.keys(validation)[0]}-string-label`}
+            startLabel="Start"
+            endLabel="End"
+            value={state}
+            onChange={handleChange}
+            validationOnLabel
+            {...validation}
+            tooltipPosition="top"
+          />
+        ))}
+      </>
+    );
   };
-  return (
-    <>
-      {[
-        { startError: "Start Error", endError: "End Error" },
-        { startWarning: "Start Warning", endWarning: "End Warning" },
-        { startInfo: "Start Info", endInfo: "End Info" },
-      ].map((validation) => (
-        <DateRange
-          key={`${Object.keys(validation)[0]}-string-label`}
-          startLabel="Start"
-          endLabel="End"
-          value={state}
-          onChange={handleChange}
-          validationOnLabel
-          {...validation}
-          tooltipPosition="top"
-        />
-      ))}
-    </>
-  );
-};
 ValidationsStringWithTooltipPositionOverriddenLabel.storyName =
   "Validations (string) with label and tooltip position overridden";
 ValidationsStringWithTooltipPositionOverriddenLabel.parameters = {
diff --git a/src/components/date-range/date-range.test.tsx b/src/components/date-range/date-range.test.tsx
index 6eed622b77..9214990ddf 100644
--- a/src/components/date-range/date-range.test.tsx
+++ b/src/components/date-range/date-range.test.tsx
@@ -15,7 +15,7 @@ testStyledSystemMarginRTL(
       {...props}
     />
   ),
-  () => screen.getByTestId("date-range")
+  () => screen.getByTestId("date-range"),
 );
 
 test("should update the input values to match the 'en-GB' locale's format when initialised with valid ISO strings", () => {
@@ -25,14 +25,14 @@ test("should update the input values to match the 'en-GB' locale's format when i
       endLabel="end"
       value={["2016-10-10", "2016-11-11"]}
       onChange={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox", { name: "start" })).toHaveValue(
-    "10/10/2016"
+    "10/10/2016",
   );
   expect(screen.getByRole("textbox", { name: "end" })).toHaveValue(
-    "11/11/2016"
+    "11/11/2016",
   );
 });
 
@@ -45,7 +45,7 @@ test("should not update the input values to match the 'en-GB' locale's format wh
       onChange={() => {}}
       startDateProps={{ allowEmptyValue: true }}
       endDateProps={{ allowEmptyValue: true }}
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox", { name: "start" })).toHaveValue("");
@@ -63,7 +63,7 @@ test("should call the `onChange` callback with the expected values when the 'sta
       onChange={onChange}
       id="foo"
       name="bar"
-    />
+    />,
   );
   await user.type(screen.getByRole("textbox", { name: "start" }), "15/10/2016");
 
@@ -90,7 +90,7 @@ test("should call the `onChange` callback with the expected values when the 'end
       onChange={onChange}
       id="foo"
       name="bar"
-    />
+    />,
   );
   await user.type(screen.getByRole("textbox", { name: "end" }), "15/10/2016");
 
@@ -118,7 +118,7 @@ test("should call the `onChange` callback with the expected values when the 'sta
       id="foo"
       name="bar"
       startDateProps={{ allowEmptyValue: true }}
-    />
+    />,
   );
   await user.clear(screen.getByRole("textbox", { name: "start" }));
 
@@ -145,7 +145,7 @@ test("should call the `onChange` callback with the expected values when the 'sta
       onChange={onChange}
       id="foo"
       name="bar"
-    />
+    />,
   );
   await user.clear(screen.getByRole("textbox", { name: "start" }));
 
@@ -173,7 +173,7 @@ test("should call the `onChange` callback with the expected values when the 'end
       id="foo"
       name="bar"
       endDateProps={{ allowEmptyValue: true }}
-    />
+    />,
   );
   await user.clear(screen.getByRole("textbox", { name: "end" }));
 
@@ -200,7 +200,7 @@ test("should call the `onChange` callback with the expected values when the 'end
       onChange={onChange}
       id="foo"
       name="bar"
-    />
+    />,
   );
   await user.clear(screen.getByRole("textbox", { name: "end" }));
 
@@ -227,7 +227,7 @@ test("should call the `onChange` callback with the expected values when the 'sta
       onChange={onChange}
       id="foo"
       name="bar"
-    />
+    />,
   );
   await user.type(screen.getByRole("textbox", { name: "start" }), "foo");
 
@@ -254,7 +254,7 @@ test("should call the `onChange` callback with the expected values when the 'end
       onChange={onChange}
       id="foo"
       name="bar"
-    />
+    />,
   );
   await user.type(screen.getByRole("textbox", { name: "end" }), "foo");
 
@@ -411,7 +411,7 @@ test("should not call `onBlur` callback when focus moves from 'start' to 'end' i
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       onBlur={onBlur}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("textbox", { name: "start" }));
@@ -431,7 +431,7 @@ test("should not call `onBlur` callback when focus moves from 'end' to 'start' i
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       onBlur={onBlur}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("textbox", { name: "end" }));
@@ -451,7 +451,7 @@ test("should call `onBlur` callback with expected values when user types a value
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       onBlur={onBlur}
-    />
+    />,
   );
   await user.type(screen.getByRole("textbox", { name: "start" }), "15/10/2016");
   await user.tab({ shift: true });
@@ -477,7 +477,7 @@ test("should call `onBlur` callback with expected values when user types a value
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       onBlur={onBlur}
-    />
+    />,
   );
   await user.type(screen.getByRole("textbox", { name: "end" }), "15/10/2016");
   await user.tab();
@@ -504,7 +504,7 @@ test("should call `onBlur` callback with expected values when user clears the 's
       value={["10/10/2016", "11/11/2016"]}
       onBlur={onBlur}
       startDateProps={{ allowEmptyValue: true }}
-    />
+    />,
   );
   await user.clear(screen.getByRole("textbox", { name: "start" }));
   await user.tab({ shift: true });
@@ -531,7 +531,7 @@ test("should call `onBlur` callback with expected values when user clears the 'e
       value={["10/10/2016", "11/11/2016"]}
       onBlur={onBlur}
       endDateProps={{ allowEmptyValue: true }}
-    />
+    />,
   );
   await user.clear(screen.getByRole("textbox", { name: "end" }));
   await user.tab();
@@ -557,7 +557,7 @@ test("should call `onBlur` callback with expected values when user clears the 's
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       onBlur={onBlur}
-    />
+    />,
   );
   await user.clear(screen.getByRole("textbox", { name: "start" }));
   await user.tab({ shift: true });
@@ -583,7 +583,7 @@ test("should call `onBlur` callback with expected values when user clears the 'e
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       onBlur={onBlur}
-    />
+    />,
   );
   await user.clear(screen.getByRole("textbox", { name: "end" }));
   await user.tab();
@@ -609,7 +609,7 @@ test("should call `onBlur` callback with expected values when user enters invali
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       onBlur={onBlur}
-    />
+    />,
   );
   await user.type(screen.getByRole("textbox", { name: "start" }), "foo");
   await user.tab({ shift: true });
@@ -635,7 +635,7 @@ test("should call `onBlur` callback with expected values when user enters invali
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       onBlur={onBlur}
-    />
+    />,
   );
   await user.type(screen.getByRole("textbox", { name: "end" }), "foo");
   await user.tab();
@@ -660,7 +660,7 @@ test("should close the open 'start' picker when the user moves focus to the `end
       onChange={() => {}}
       startDateProps={{ disablePortal: true, "data-role": "start" }}
       endDateProps={{ disablePortal: true, "data-role": "end" }}
-    />
+    />,
   );
   const startDate = screen.getByTestId("start");
   const endDate = screen.getByTestId("end");
@@ -686,7 +686,7 @@ test("should close the open 'end' picker when the user moves focus to the `start
       onChange={() => {}}
       startDateProps={{ disablePortal: true, "data-role": "start" }}
       endDateProps={{ disablePortal: true, "data-role": "end" }}
-    />
+    />,
   );
   const startDate = screen.getByTestId("start");
   const endDate = screen.getByTestId("end");
@@ -710,7 +710,7 @@ test("should set the `disabled` attribute on the 'start' input when the prop is
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       startDateProps={{ disabled: true }}
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox", { name: "start" })).toBeDisabled();
@@ -724,7 +724,7 @@ test("should set the `disabled` attribute on the 'end' input when the prop is se
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       endDateProps={{ disabled: true }}
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox", { name: "end" })).toBeDisabled();
@@ -738,11 +738,11 @@ test("should set the `readOnly` attribute on the 'start' input when the prop is
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       startDateProps={{ readOnly: true }}
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox", { name: "start" })).toHaveAttribute(
-    "readonly"
+    "readonly",
   );
 });
 
@@ -754,11 +754,11 @@ test("should set the `readOnly` attribute on the 'end' input when the prop is se
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       endDateProps={{ readOnly: true }}
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox", { name: "end" })).toHaveAttribute(
-    "readonly"
+    "readonly",
   );
 });
 
@@ -770,7 +770,7 @@ test("should set the `required` attribute on both inputs when the prop is set",
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       required
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox", { name: "start" })).toBeRequired();
@@ -785,14 +785,14 @@ test("should override the `value` on the 'start' input when the prop is set on `
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       startDateProps={{ value: "01/01/2001" }}
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox", { name: "start" })).toHaveValue(
-    "01/01/2001"
+    "01/01/2001",
   );
   expect(screen.getByRole("textbox", { name: "end" })).toHaveValue(
-    "11/11/2016"
+    "11/11/2016",
   );
 });
 
@@ -804,14 +804,14 @@ test("should override the `value` on the 'end' input when the prop is set on `en
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       endDateProps={{ value: "01/01/2001" }}
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox", { name: "start" })).toHaveValue(
-    "10/10/2016"
+    "10/10/2016",
   );
   expect(screen.getByRole("textbox", { name: "end" })).toHaveValue(
-    "01/01/2001"
+    "01/01/2001",
   );
 });
 
@@ -824,7 +824,7 @@ test("should support passing custom class names via `startDateProps` and `endDat
       value={["10/10/2016", "11/11/2016"]}
       startDateProps={{ className: "foo" }}
       endDateProps={{ className: "bar" }}
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox", { name: "start" })).toHaveClass("foo");
@@ -840,7 +840,7 @@ test("should support rendering the component with `data-` tags", () => {
       value={["10/10/2016", "11/11/2016"]}
       data-element="foo"
       data-role="bar"
-    />
+    />,
   );
   const dateRange = screen.getByTestId("bar");
 
@@ -857,12 +857,12 @@ test("should set the `data-element` attribute internally on each individual date
       value={["10/10/2016", "11/11/2016"]}
       startDateProps={{ "data-role": "start" }}
       endDateProps={{ "data-role": "end" }}
-    />
+    />,
   );
 
   expect(screen.getByTestId("start")).toHaveAttribute(
     "data-element",
-    "start-date"
+    "start-date",
   );
   expect(screen.getByTestId("end")).toHaveAttribute("data-element", "end-date");
 });
@@ -876,7 +876,7 @@ test("should support ref as an object on the 'start' input", () => {
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       startRef={ref}
-    />
+    />,
   );
 
   expect(ref.current).toBe(screen.getByRole("textbox", { name: "start" }));
@@ -891,11 +891,11 @@ test("should support ref as a callback on the 'start' input", () => {
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       startRef={ref}
-    />
+    />,
   );
 
   expect(ref).toHaveBeenCalledWith(
-    screen.getByRole("textbox", { name: "start" })
+    screen.getByRole("textbox", { name: "start" }),
   );
 });
 
@@ -908,7 +908,7 @@ test("should set the ref on the 'start' input to null after the component is unm
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       startRef={ref}
-    />
+    />,
   );
   unmount();
 
@@ -924,7 +924,7 @@ test("should support ref as an object on the 'end' input", () => {
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       endRef={ref}
-    />
+    />,
   );
 
   expect(ref.current).toBe(screen.getByRole("textbox", { name: "end" }));
@@ -939,11 +939,11 @@ test("should support ref as a callback on the 'end' input", () => {
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       endRef={ref}
-    />
+    />,
   );
 
   expect(ref).toHaveBeenCalledWith(
-    screen.getByRole("textbox", { name: "end" })
+    screen.getByRole("textbox", { name: "end" }),
   );
 });
 
@@ -956,7 +956,7 @@ test("should set the ref on the 'end' input to null after the component is unmou
       endLabel="end"
       value={["10/10/2016", "11/11/2016"]}
       endRef={ref}
-    />
+    />,
   );
   unmount();
 
@@ -975,7 +975,7 @@ test("should only display the start input tooltip when the user hovers over it a
         startError="start error"
         endError="end error"
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const start = screen.getByRole("textbox", { name: "start" });
@@ -1001,7 +1001,7 @@ test("should only display the end input tooltip when the user hovers over it and
         startError="start error"
         endError="end error"
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const end = screen.getByRole("textbox", { name: "end" });
@@ -1026,7 +1026,7 @@ test("should display the error message for both inputs when strings are passed t
         startDateProps={{ "data-role": "start" }}
         endDateProps={{ "data-role": "end" }}
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const start = screen.getByTestId("start");
   const end = screen.getByTestId("end");
@@ -1048,7 +1048,7 @@ test("should not display the error message for both inputs when booleans are pas
         startDateProps={{ "data-role": "start" }}
         endDateProps={{ "data-role": "end" }}
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const start = screen.getByTestId("start");
   const end = screen.getByTestId("end");
@@ -1070,7 +1070,7 @@ test("should display the warning message for both inputs when strings are passed
         startDateProps={{ "data-role": "start" }}
         endDateProps={{ "data-role": "end" }}
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const start = screen.getByTestId("start");
   const end = screen.getByTestId("end");
@@ -1092,7 +1092,7 @@ test("should not display the warning message for both inputs when booleans are p
         startDateProps={{ "data-role": "start" }}
         endDateProps={{ "data-role": "end" }}
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const start = screen.getByTestId("start");
   const end = screen.getByTestId("end");
@@ -1111,7 +1111,7 @@ test("should have the expected styling when the `labelsInline` prop is set", ()
       labelsInline
       startDateProps={{ "data-role": "start" }}
       endDateProps={{ "data-role": "end" }}
-    />
+    />,
   );
 
   expect(screen.getByTestId("start")).toHaveStyle("vertical-align: top");
@@ -1130,7 +1130,7 @@ test("should have the default styling when the `labelsInline` prop is set and `v
         startDateProps={{ "data-role": "start" }}
         endDateProps={{ "data-role": "end" }}
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByTestId("start")).toHaveStyle("vertical-align: bottom");
diff --git a/src/components/date/__internal__/date-formats/date-formats.test.ts b/src/components/date/__internal__/date-formats/date-formats.test.ts
index 5a9ed0918a..099313074f 100644
--- a/src/components/date/__internal__/date-formats/date-formats.test.ts
+++ b/src/components/date/__internal__/date-formats/date-formats.test.ts
@@ -504,7 +504,7 @@ test("should default to en-GB locale if no locale code string passed to `getForm
 
   expect(
     expectedFormats.every((formatStr) => formats.includes(formatStr)) &&
-      formats.length === expectedFormats.length
+      formats.length === expectedFormats.length,
   ).toEqual(true);
 
   expect(format).toEqual(formatMap["en-GB"]);
@@ -520,10 +520,10 @@ describe.each(euLocales)(
 
       expect(
         expectedFormats.every((formatStr) => formats.includes(formatStr)) &&
-          formats.length === expectedFormats.length
+          formats.length === expectedFormats.length,
       ).toEqual(true);
     });
-  }
+  },
 );
 
 describe.each(naLocales)(
@@ -536,10 +536,10 @@ describe.each(naLocales)(
 
       expect(
         expectedFormats.every((formatStr) => formats.includes(formatStr)) &&
-          formats.length === expectedFormats.length
+          formats.length === expectedFormats.length,
       ).toEqual(true);
     });
-  }
+  },
 );
 
 describe.each(cnLocales)(
@@ -552,8 +552,8 @@ describe.each(cnLocales)(
 
       expect(
         expectedFormats.every((formatStr) => formats.includes(formatStr)) &&
-          formats.length === expectedFormats.length
+          formats.length === expectedFormats.length,
       ).toEqual(true);
     });
-  }
+  },
 );
diff --git a/src/components/date/__internal__/date-formats/index.ts b/src/components/date/__internal__/date-formats/index.ts
index 406becff40..e624320a92 100644
--- a/src/components/date/__internal__/date-formats/index.ts
+++ b/src/components/date/__internal__/date-formats/index.ts
@@ -61,12 +61,12 @@ const SEPARATORS = ["", ".", ",", "-", "/", ":"] as const;
 
 const STANDARD_FORMAT_LENGTH = 10;
 
-type Separator = typeof SEPARATORS[number];
+type Separator = (typeof SEPARATORS)[number];
 
 const generateFormats = (
   formatArray: string[],
   separator: Separator,
-  trailingChar?: string
+  trailingChar?: string,
 ): string[] => {
   const separators = SEPARATORS.includes(separator)
     ? SEPARATORS
@@ -161,7 +161,7 @@ const getFormatData = ({ code = "en-GB" }: DateFnsLocale): LocaleFormats => {
     formats: generateFormats(
       formatsForLocale,
       separator,
-      getTrailingChar(format)
+      getTrailingChar(format),
     ),
   };
 };
diff --git a/src/components/date/__internal__/date-picker/date-picker.component.tsx b/src/components/date/__internal__/date-picker/date-picker.component.tsx
index 81feb5ad26..d975644df4 100644
--- a/src/components/date/__internal__/date-picker/date-picker.component.tsx
+++ b/src/components/date/__internal__/date-picker/date-picker.component.tsx
@@ -91,18 +91,18 @@ export const DatePicker = ({
         const month = localize?.month(i);
         return month[0].toUpperCase() + month.slice(1);
       }),
-    [localize]
+    [localize],
   );
   const monthsShort = useMemo(
     () =>
       Array.from({ length: 12 }).map((_, i) =>
-        localize?.month(i, { width: "abbreviated" }).substring(0, 3)
+        localize?.month(i, { width: "abbreviated" }).substring(0, 3),
       ),
-    [localize]
+    [localize],
   );
   const weekdaysLong = useMemo(
     () => Array.from({ length: 7 }).map((_, i) => localize?.day(i)),
-    [localize]
+    [localize],
   );
   const weekdaysShort = useMemo(() => {
     const isGivenLocale = (str: string) => locale.locale().includes(str);
@@ -112,9 +112,9 @@ export const DatePicker = ({
           i,
           ["de", "pl"].some(isGivenLocale)
             ? { width: "wide" }
-            : { width: "abbreviated" }
+            : { width: "abbreviated" },
         )
-        .substring(0, isGivenLocale("de") ? 2 : 3)
+        .substring(0, isGivenLocale("de") ? 2 : 3),
     );
   }, [locale, localize]);
   const ref = useRef<HTMLDivElement>(null);
@@ -134,7 +134,7 @@ export const DatePicker = ({
         ref.current?.querySelector(".DayPicker-Day--selected") ||
         ref.current?.querySelector(".DayPicker-Day--today");
       const firstDay = ref.current?.querySelector(
-        ".DayPicker-Day[tabindex='0']"
+        ".DayPicker-Day[tabindex='0']",
       );
 
       /* istanbul ignore else */
@@ -148,7 +148,7 @@ export const DatePicker = ({
   const handleDayClick = (
     date: Date,
     modifiers: DayModifiers,
-    ev: React.MouseEvent<HTMLDivElement>
+    ev: React.MouseEvent<HTMLDivElement>,
   ) => {
     if (!modifiers.disabled) {
       const { id, name } = inputElement?.current
@@ -173,7 +173,7 @@ export const DatePicker = ({
         ev.stopPropagation();
       }
     },
-    [inputElement, onPickerClose, open, setOpen]
+    [inputElement, onPickerClose, open, setOpen],
   );
 
   const handleOnKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
@@ -194,7 +194,7 @@ export const DatePicker = ({
   const handleOnDayKeyDown = (
     _day: Date,
     _modifiers: DayModifiers,
-    ev: React.KeyboardEvent<HTMLDivElement>
+    ev: React.KeyboardEvent<HTMLDivElement>,
   ) => {
     // we need to manually handle this as the picker may be in a Portal
     /* istanbul ignore else */
@@ -208,14 +208,14 @@ export const DatePicker = ({
       if (input) {
         const elements = Array.from(
           document.querySelectorAll(defaultFocusableSelectors) ||
-            /* istanbul ignore next */ []
+            /* istanbul ignore next */ [],
         ) as HTMLElement[];
         const elementsInPicker = Array.from(
           ref.current?.querySelectorAll("button, [tabindex]") ||
-            /* istanbul ignore next */ []
+            /* istanbul ignore next */ [],
         ) as HTMLElement[];
         const filteredElements = elements.filter(
-          (el) => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el)
+          (el) => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el),
         );
         const nextIndex = filteredElements.indexOf(input as HTMLElement) + 1;
         filteredElements[nextIndex]?.focus();
diff --git a/src/components/date/__internal__/date-picker/date-picker.test.tsx b/src/components/date/__internal__/date-picker/date-picker.test.tsx
index 6e441e4f37..fbb0f2a94b 100644
--- a/src/components/date/__internal__/date-picker/date-picker.test.tsx
+++ b/src/components/date/__internal__/date-picker/date-picker.test.tsx
@@ -36,7 +36,7 @@ const DatePickerWithInput = (props: MockProps) => {
 const getWeekdayTranslations = (
   index: number,
   locale: Locale,
-  substringLimit = 3
+  substringLimit = 3,
 ) => {
   const startDay = locale.options?.weekStartsOn || 0;
 
@@ -58,7 +58,7 @@ test("should render the day element that matches the `selectedDate` when prop is
       selectedDays={new Date(2019, 3, 4)}
       setOpen={() => {}}
       open
-    />
+    />,
   );
   const selectedDay = screen.getByRole("gridcell", { name: "Thu 4 Apr 2019" });
 
@@ -72,7 +72,7 @@ test("should render the expected weekday with `aria-disabled=true` attribute whe
       minDate="2019-04-02"
       setOpen={() => {}}
       open
-    />
+    />,
   );
   const disabledDay = screen.getByRole("gridcell", { name: "Mon 1 Apr 2019" });
   const activeDay = screen.getByRole("gridcell", { name: "Tue 2 Apr 2019" });
@@ -88,7 +88,7 @@ test("should not render any of the current month's weekdays with `aria-disabled=
       minDate="2019-04-"
       setOpen={() => {}}
       open
-    />
+    />,
   );
   // need to filter out the weekdays that are not in the current month
   const currentMonthDays = screen.getAllByRole("gridcell", {
@@ -107,7 +107,7 @@ test("should not render any of the current month's weekdays with `aria-disabled=
       minDate=""
       setOpen={() => {}}
       open
-    />
+    />,
   );
   // need to filter out the weekdays that are not in the current month
   const currentMonthDays = screen.getAllByRole("gridcell", {
@@ -126,7 +126,7 @@ test("should render the expected weekday with `aria-disabled=true` attribute whe
       maxDate="2019-04-05"
       setOpen={() => {}}
       open
-    />
+    />,
   );
   const disabledDay = screen.getByRole("gridcell", { name: "Sat 6 Apr 2019" });
   const activeDay = screen.getByRole("gridcell", { name: "Fri 5 Apr 2019" });
@@ -142,7 +142,7 @@ test("should not render any of the current month's weekdays with `aria-disabled=
       maxDate="2019-04-"
       setOpen={() => {}}
       open
-    />
+    />,
   );
   // need to filter out the weekdays that are not in the current month
   const currentMonthDays = screen.getAllByRole("gridcell", {
@@ -161,7 +161,7 @@ test("should not render any of the current month's weekdays with `aria-disabled=
       maxDate=""
       setOpen={() => {}}
       open
-    />
+    />,
   );
   // need to filter out the weekdays that are not in the current month
   const currentMonthDays = screen.getAllByRole("gridcell", {
@@ -183,7 +183,7 @@ test("should not call `onDayClick` callback when a user clicks a disabled day",
       setOpen={() => {}}
       open
       onDayClick={onDayClick}
-    />
+    />,
   );
   const disabledDay = screen.getByRole("gridcell", { name: "Mon 1 Apr 2019" });
   await user.click(disabledDay);
@@ -200,7 +200,7 @@ test("should call `onDayClick` callback when a user clicks a day that is not dis
       setOpen={() => {}}
       open
       onDayClick={onDayClick}
-    />
+    />,
   );
   const activeDay = screen.getByRole("gridcell", { name: "Tue 2 Apr 2019" });
   await user.click(activeDay);
@@ -212,7 +212,7 @@ test("should render with 'en-GB' translations by default when no `locale` passed
   render(
     <I18nProvider>
       <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>
+    </I18nProvider>,
   );
   const weekdays = screen.getAllByRole("columnheader");
 
@@ -236,7 +236,7 @@ test("should render with 'de-DE' translations when the `locale` is passed via I1
       }}
     >
       <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>
+    </I18nProvider>,
   );
   const weekdays = screen.getAllByRole("columnheader");
 
@@ -262,7 +262,7 @@ test("should render with 'es' translations when the `locale` is passed via I18nP
       }}
     >
       <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>
+    </I18nProvider>,
   );
   const weekdays = screen.getAllByRole("columnheader");
 
@@ -288,7 +288,7 @@ test("should render with 'en-CA' translations when the `locale` is passed via I1
       }}
     >
       <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>
+    </I18nProvider>,
   );
   const weekdays = screen.getAllByRole("columnheader");
 
@@ -314,7 +314,7 @@ test("should render with 'en-US' translations when the `locale` is passed via I1
       }}
     >
       <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>
+    </I18nProvider>,
   );
   const weekdays = screen.getAllByRole("columnheader");
 
@@ -340,7 +340,7 @@ test("should render with 'en-ZA' translations when the `locale` is passed via I1
       }}
     >
       <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>
+    </I18nProvider>,
   );
   const weekdays = screen.getAllByRole("columnheader");
 
@@ -366,7 +366,7 @@ test("should render with 'fr-FR' translations when the `locale` is passed via I1
       }}
     >
       <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>
+    </I18nProvider>,
   );
   const weekdays = screen.getAllByRole("columnheader");
 
@@ -392,7 +392,7 @@ test("should render with 'fr-CA' translations when the `locale` is passed via I1
       }}
     >
       <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>
+    </I18nProvider>,
   );
   const weekdays = screen.getAllByRole("columnheader");
 
diff --git a/src/components/date/__internal__/date-picker/day-picker.style.ts b/src/components/date/__internal__/date-picker/day-picker.style.ts
index bc3c124d10..3fff700e4b 100644
--- a/src/components/date/__internal__/date-picker/day-picker.style.ts
+++ b/src/components/date/__internal__/date-picker/day-picker.style.ts
@@ -317,13 +317,17 @@ const StyledDayPicker = styled.div`
     }
   }
 
-  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
+  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
+      .DayPicker-Day--outside
+    ) {
     background-color: var(--colorsActionMajor500);
     color: var(--colorsUtilityYang100);
     border-radius: var(--borderRadius400);
   }
 
-  .DayPicker-Day--selected.DayPicker-Day--disabled:not(.DayPicker-Day--outside) {
+  .DayPicker-Day--selected.DayPicker-Day--disabled:not(
+      .DayPicker-Day--outside
+    ) {
     background-color: var(--colorsActionMajor500);
     color: var(--colorsUtilityYang100);
   }
diff --git a/src/components/date/__internal__/navbar/navbar.test.tsx b/src/components/date/__internal__/navbar/navbar.test.tsx
index 404f0f8a5a..6679982d04 100644
--- a/src/components/date/__internal__/navbar/navbar.test.tsx
+++ b/src/components/date/__internal__/navbar/navbar.test.tsx
@@ -13,7 +13,7 @@ test("should call `onPreviousClick` when the user clicks the previous button", a
       onPreviousClick={onPreviousClick}
       onNextClick={onNextClick}
       className="custom-class"
-    />
+    />,
   );
   const prevButton = screen.getByRole("button", { name: "Previous month" });
   await user.click(prevButton);
@@ -30,7 +30,7 @@ test("should call `onNextClick` when the user clicks the next button", async ()
       onPreviousClick={onPreviousClick}
       onNextClick={onNextClick}
       className="custom-class"
-    />
+    />,
   );
   const nextButton = screen.getByRole("button", { name: "Next month" });
   await user.click(nextButton);
@@ -44,7 +44,7 @@ test("should apply the custom class passed via `className` prop", () => {
       onPreviousClick={jest.fn()}
       onNextClick={jest.fn()}
       className="custom-class"
-    />
+    />,
   );
 
   expect(screen.getByTestId("date-navbar")).toHaveClass("custom-class");
diff --git a/src/components/date/__internal__/utils.test.ts b/src/components/date/__internal__/utils.test.ts
index f0df85e00f..468f4c88c4 100644
--- a/src/components/date/__internal__/utils.test.ts
+++ b/src/components/date/__internal__/utils.test.ts
@@ -116,10 +116,10 @@ const result = (format: string, value = "01-01-2022") =>
   value.replace(/-/g, separator(format));
 
 const yearValuesLessThan69 = Array.from({ length: 68 }).map((_, i) =>
-  i < 9 ? `0${i + 1}` : `${i + 1}`
+  i < 9 ? `0${i + 1}` : `${i + 1}`,
 );
 const yearValuesGreaterThan69 = Array.from({ length: 30 }).map(
-  (_, i) => `${i + 1 + 69}`
+  (_, i) => `${i + 1 + 69}`,
 );
 
 const invalidISOMin = "01/01/2022";
@@ -147,7 +147,7 @@ test.each(parseParameters())(
   "should return a valid date for %s format when %s string passed to `parseDate`",
   (value, format) => {
     expect(isDateValid(parseDate(format, value))).toBe(true);
-  }
+  },
 );
 
 test("should return false when `parseDate` passed invalid date string", () => {
@@ -199,7 +199,7 @@ test.each([
   "should return the expected ISO formatted string when %s format and %s reference date is passed to `formatToISO`",
   (formatString, referenceDate, expected) => {
     expect(formatToISO(formatString, referenceDate)).toEqual(expected);
-  }
+  },
 );
 
 test("should return null if an invalid reference date is passed to `formatToISO`", () => {
@@ -210,9 +210,9 @@ test.each(["ddMMyyyy", "dd.MM.yyyy", "dd,MM,yyyy", "dd-MM-yyyy", "dd/MM/yyyy"])(
   "should return a valid formatted date string when a valid date and %s format is passed to `formattedValue`",
   (format) => {
     expect(formattedValue(format, new Date("2022-01-01"))).toEqual(
-      result(format)
+      result(format),
     );
-  }
+  },
 );
 
 test("should return an empty string when no date passed to `formattedValue`", () => {
@@ -265,9 +265,9 @@ describe.each(yearValuesLessThan69)(
       "returns expected output when format is `%s` and reference date is `%s`",
       (format, referenceDate, expected) => {
         expect(additionalYears(format, referenceDate)).toEqual(expected);
-      }
+      },
     );
-  }
+  },
 );
 
 describe.each(yearValuesGreaterThan69)(
@@ -304,9 +304,9 @@ describe.each(yearValuesGreaterThan69)(
       "returns expected output when format is `%s` and reference date is `%s`",
       (format, referenceDate, expected) => {
         expect(additionalYears(format, referenceDate)).toEqual(expected);
-      }
+      },
     );
-  }
+  },
 );
 
 // when no separator is used it will return whitespace separated format and value due to bug in date-fns
@@ -326,12 +326,12 @@ test.each([
   (format, value, formatResult, valueResult) => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
       value,
-      formats
+      formats,
     );
 
     expect(matchedFormat).toEqual(formatResult);
     expect(matchedValue).toEqual(valueResult);
-  }
+  },
 );
 
 test.each([
@@ -351,12 +351,12 @@ test.each([
   (format, value, formatResult, valueResult) => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
       value,
-      formats
+      formats,
     );
 
     expect(matchedFormat).toEqual(formatResult);
     expect(matchedValue).toEqual(valueResult);
-  }
+  },
 );
 
 test.each([
@@ -372,12 +372,12 @@ test.each([
   (format, value, formatResult, valueResult) => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
       value,
-      formats
+      formats,
     );
 
     expect(matchedFormat).toEqual(formatResult);
     expect(matchedValue).toEqual(valueResult);
-  }
+  },
 );
 
 test.each([
@@ -393,12 +393,12 @@ test.each([
   (format, value, formatResult, valueResult) => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
       value,
-      formats
+      formats,
     );
 
     expect(matchedFormat).toEqual(formatResult);
     expect(matchedValue).toEqual(valueResult);
-  }
+  },
 );
 
 test("should genereate a valid date when `parseISODate` passed a valid string value", () => {
@@ -444,5 +444,5 @@ test.each(["foo", "2022-1-1", "2022-01-1", "22-01-01", " "])(
   "should return false when invalid ISO string %s passed to `checkISOFormatAndLength`",
   (value) => {
     expect(checkISOFormatAndLength(value)).toEqual(false);
-  }
+  },
 );
diff --git a/src/components/date/__internal__/utils.ts b/src/components/date/__internal__/utils.ts
index 92ade075a0..e7afeb121d 100644
--- a/src/components/date/__internal__/utils.ts
+++ b/src/components/date/__internal__/utils.ts
@@ -33,7 +33,7 @@ function hasMatchedFormat(
   formatString: string,
   valueString: string,
   fullFormat: string[],
-  fullValue: string[]
+  fullValue: string[],
 ) {
   if (formatString.includes("d")) {
     return (
@@ -66,7 +66,7 @@ export function additionalYears(formatString: string, value: string) {
   let year = value.substring(yearStringStartIndex, yearStringEndIndex);
   const dayAndMonth = value.substring(
     dayAndMonthStringStartIndex,
-    dayAndMonthStringEndIndex
+    dayAndMonthStringEndIndex,
   );
   const yearAsNumber = Number(year);
 
@@ -95,7 +95,7 @@ function makeSeparatedValues(arr: number[], str: string) {
 
 function checkForCompleteMatch(formatArray: string[], valueArray: string[]) {
   return formatArray.every((formatString, i) =>
-    hasMatchedFormat(formatString, valueArray[i], formatArray, valueArray)
+    hasMatchedFormat(formatString, valueArray[i], formatArray, valueArray),
   );
 }
 
@@ -122,7 +122,7 @@ function findMatchWithNoSeparators(valueString: string, formatString: string) {
 function findMatchWithSeparators(
   valueString: string,
   formatString: string,
-  separator: string
+  separator: string,
 ) {
   const formatArray = formatString.split(separator);
   const valueArray = valueString.split(separator);
@@ -144,7 +144,7 @@ export const getSeparator = (value: string) => {
 
 export function findMatchedFormatAndValue(
   valueString: string,
-  formats: string[]
+  formats: string[],
 ) {
   if (!valueString) {
     return ["", ""];
@@ -154,7 +154,7 @@ export function findMatchedFormatAndValue(
   const filteredFormats = formats.filter(
     (formatString) =>
       formatString.length === valueString.length &&
-      getSeparator(formatString) === valueSeparator
+      getSeparator(formatString) === valueSeparator,
   );
 
   const matchedFormatAndValue = filteredFormats.reduce(
@@ -178,7 +178,7 @@ export function findMatchedFormatAndValue(
         const match = findMatchWithSeparators(
           valueString,
           formatString,
-          valueSeparator
+          valueSeparator,
         );
 
         if (match) {
@@ -187,7 +187,7 @@ export function findMatchedFormatAndValue(
       }
       return acc;
     },
-    []
+    [],
   );
 
   return matchedFormatAndValue;
@@ -219,7 +219,7 @@ export function checkISOFormatAndLength(value: string) {
  */
 export function getDisabledDays(
   minDate = "",
-  maxDate = ""
+  maxDate = "",
 ): Modifier | Modifier[] {
   const days = [];
 
diff --git a/src/components/date/components.test-pw.tsx b/src/components/date/components.test-pw.tsx
index 533e076444..e9d1dd34c0 100644
--- a/src/components/date/components.test-pw.tsx
+++ b/src/components/date/components.test-pw.tsx
@@ -11,7 +11,7 @@ export const DateInputCustom = ({
   ...props
 }: Partial<CommonTextboxArgs> & Partial<DateInputProps>) => {
   const [state, setState] = React.useState(
-    value?.length !== undefined ? value : "01/05/2022"
+    value?.length !== undefined ? value : "01/05/2022",
   );
 
   const handleOnChange = (ev: DateChangeEvent) => {
@@ -77,7 +77,7 @@ export const DateInputValidationNewDesign = () => {
               m={4}
             />
           </div>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
@@ -90,7 +90,7 @@ export const DateInputWithButton = ({
   ...props
 }: Partial<CommonTextboxArgs> & Partial<DateInputProps>) => {
   const [state, setState] = React.useState(
-    value?.length !== undefined ? value : "01/05/2022"
+    value?.length !== undefined ? value : "01/05/2022",
   );
 
   const handleOnChange = (ev: DateChangeEvent) => {
@@ -161,7 +161,7 @@ export const DateInputInsideDialog = ({
 }: Partial<CommonTextboxArgs> & Partial<DateInputProps>) => {
   const [isOpen, setIsOpen] = useState(true);
   const [state, setState] = React.useState(
-    value?.length !== undefined ? value : "01/05/2022"
+    value?.length !== undefined ? value : "01/05/2022",
   );
 
   const handleOnChange = (ev: DateChangeEvent) => {
diff --git a/src/components/date/date.component.tsx b/src/components/date/date.component.tsx
index c81f33db1d..fa9755f5a7 100644
--- a/src/components/date/date.component.tsx
+++ b/src/components/date/date.component.tsx
@@ -136,7 +136,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
       onPickerOpen,
       ...rest
     }: DateInputProps,
-    ref
+    ref,
   ) => {
     const wrapperRef = useRef(null);
     const parentRef = useRef(null);
@@ -147,15 +147,16 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
     const blockClose = useRef(false);
     const locale = useLocale();
     const { dateFnsLocale } = locale.date;
-    const { format, formats } = useMemo(() => getFormatData(dateFnsLocale()), [
-      dateFnsLocale,
-    ]);
+    const { format, formats } = useMemo(
+      () => getFormatData(dateFnsLocale()),
+      [dateFnsLocale],
+    );
     const { inputRefMap, setInputRefMap } = useContext(DateRangeContext);
     const [open, setOpen] = useState(false);
     const [selectedDays, setSelectedDays] = useState(
       checkISOFormatAndLength(value)
         ? parseISODate(value)
-        : parseDate(format, value)
+        : parseDate(format, value),
     );
     const isInitialValue = useRef(true);
     const pickerTabGuardId = useRef(guid());
@@ -168,7 +169,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
 
       const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
         ev.target.value,
-        formats
+        formats,
       );
 
       const formattedValueString =
@@ -231,7 +232,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
 
     const handleDayClick = (
       day: Date,
-      ev: React.MouseEvent<HTMLDivElement>
+      ev: React.MouseEvent<HTMLDivElement>,
     ) => {
       setSelectedDays(day);
       onChange(
@@ -241,7 +242,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
             ...ev.target,
             value: formattedValue(format, day),
           },
-        })
+        }),
       );
       focusInput();
       setOpen(false);
@@ -262,7 +263,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
           : value;
         const [, matchedValue] = findMatchedFormatAndValue(
           currentValue,
-          formats
+          formats,
         );
 
         if (formattedValue(format, selectedDays) !== matchedValue) {
@@ -322,7 +323,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
           ev.stopPropagation();
         }
       },
-      [onPickerClose, open]
+      [onPickerClose, open],
     );
 
     const handleKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
@@ -336,16 +337,18 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
           onPickerClose?.();
         } else if (!disablePortal) {
           ev.preventDefault();
-          (document?.querySelector(
-            `[id="${pickerTabGuardId.current}"]`
-          ) as HTMLElement)?.focus();
+          (
+            document?.querySelector(
+              `[id="${pickerTabGuardId.current}"]`,
+            ) as HTMLElement
+          )?.focus();
         }
         alreadyFocused.current = false;
       }
     };
 
     const handleClick = (
-      ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+      ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
     ) => {
       if (onClick) {
         onClick(ev);
@@ -417,13 +420,13 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
           });
         }
       },
-      [inputName, inputRefMap, setInputRefMap, ref]
+      [inputName, inputRefMap, setInputRefMap, ref],
     );
 
     useEffect(() => {
       const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
         value,
-        formats
+        formats,
       );
 
       if (
@@ -432,7 +435,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
         isDateValid(parseDate(matchedFormat, matchedValue))
       ) {
         setSelectedDays(
-          parseDate(...additionalYears(matchedFormat, matchedValue))
+          parseDate(...additionalYears(matchedFormat, matchedValue)),
         );
       } else if (checkISOFormatAndLength(value) && isInitialValue.current) {
         setSelectedDays(parseISODate(value));
@@ -463,11 +466,11 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
 
         const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
           replaceSeparators(),
-          formats
+          formats,
         );
         return formattedValue(
           format,
-          parseDate(...additionalYears(matchedFormat, matchedValue))
+          parseDate(...additionalYears(matchedFormat, matchedValue)),
         );
       }
 
@@ -533,7 +536,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
         />
       </StyledDateInput>
     );
-  }
+  },
 );
 
 DateInput.displayName = "DateInput";
diff --git a/src/components/date/date.pw.tsx b/src/components/date/date.pw.tsx
index 34b8335059..df29c409af 100644
--- a/src/components/date/date.pw.tsx
+++ b/src/components/date/date.pw.tsx
@@ -75,28 +75,28 @@ test.describe("Functionality tests", () => {
     });
   });
 
-  ([
-    ["left", "start"],
-    ["right", "end"],
-  ] as [DateInputProps["labelAlign"], string][]).forEach(
-    ([labelAlign, cssValue]) => {
-      test(`should check the label align is set to ${labelAlign}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <DateInputCustom
-            labelAlign={labelAlign}
-            labelHelp="labelHelp"
-            labelInline
-          />
-        );
+  (
+    [
+      ["left", "start"],
+      ["right", "end"],
+    ] as [DateInputProps["labelAlign"], string][]
+  ).forEach(([labelAlign, cssValue]) => {
+    test(`should check the label align is set to ${labelAlign}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <DateInputCustom
+          labelAlign={labelAlign}
+          labelHelp="labelHelp"
+          labelInline
+        />,
+      );
 
-        const label = getDataElementByValue(page, "label").locator("..");
-        await expect(label).toHaveCSS("justify-content", `flex-${cssValue}`);
-      });
-    }
-  );
+      const label = getDataElementByValue(page, "label").locator("..");
+      await expect(label).toHaveCSS("justify-content", `flex-${cssValue}`);
+    });
+  });
 
   test(`should check the minDate prop`, async ({ mount, page }) => {
     await mount(<DateInputCustom minDate="2030-04-04" />);
@@ -205,7 +205,7 @@ test.describe("Functionality tests", () => {
       const wrapperParent = dayPickerWrapper(page).locator("..").locator("..");
       await expect(wrapperParent).toHaveAttribute(
         "data-floating-placement",
-        `${position}-start`
+        `${position}-start`,
       );
       await expect(wrapperParent).toBeVisible();
     });
@@ -246,7 +246,7 @@ test.describe("Functionality tests", () => {
       const inputParent = getDataElementByValue(page, "input").locator("..");
       await inputParent.click();
       const rightArrow = getDataElementByValue(page, "chevron_right").locator(
-        ".."
+        "..",
       );
       await rightArrow.focus();
       await rightArrow.press(key);
@@ -265,7 +265,7 @@ test.describe("Functionality tests", () => {
       const inputParent = getDataElementByValue(page, "input").locator("..");
       await inputParent.click();
       const rightArrow = getDataElementByValue(page, "chevron_left").locator(
-        ".."
+        "..",
       );
       await rightArrow.focus();
       await rightArrow.press(key);
@@ -289,7 +289,7 @@ test.describe("Functionality tests", () => {
     await expect(arrowLeft).toBeFocused();
     await page.keyboard.press("Tab");
     const arrowRight = getDataElementByValue(page, "chevron_right").locator(
-      ".."
+      "..",
     );
     await expect(arrowRight).toBeFocused();
     await page.keyboard.press("Tab");
@@ -312,7 +312,7 @@ test.describe("Functionality tests", () => {
     await expect(arrowLeft).toBeFocused();
     await page.keyboard.press("Tab");
     const arrowRight = getDataElementByValue(page, "chevron_right").locator(
-      ".."
+      "..",
     );
     await expect(arrowRight).toBeFocused();
     await page.keyboard.press("Tab");
@@ -542,7 +542,7 @@ test.describe("Functionality tests", () => {
       await expect(focusedElement).toBeFocused();
       await page.keyboard.press(key);
       await expect(getDataElementByValue(page, "input")).toHaveValue(
-        "30/04/2022"
+        "30/04/2022",
       );
     });
   });
@@ -644,26 +644,26 @@ test.describe("Functionality tests", () => {
     });
   });
 
-  ([
-    [SIZE.SMALL, 29, 30.5],
-    [SIZE.MEDIUM, 37, 38.5],
-    [SIZE.LARGE, 45, 46.5],
-  ] as [DateInputProps["size"], number, number][]).forEach(
-    ([size, minValue, maxValue]) => {
-      test(`should check the ${size} size of the DateInput`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DateInputCustom size={size} />);
+  (
+    [
+      [SIZE.SMALL, 29, 30.5],
+      [SIZE.MEDIUM, 37, 38.5],
+      [SIZE.LARGE, 45, 46.5],
+    ] as [DateInputProps["size"], number, number][]
+  ).forEach(([size, minValue, maxValue]) => {
+    test(`should check the ${size} size of the DateInput`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DateInputCustom size={size} />);
 
-        const input = getDataElementByValue(page, "input");
-        await input.click();
-        const val = await getStyle(input, "height");
-        expect(parseInt(val)).toBeGreaterThanOrEqual(minValue);
-        expect(parseInt(val)).toBeLessThanOrEqual(maxValue);
-      });
-    }
-  );
+      const input = getDataElementByValue(page, "input");
+      await input.click();
+      const val = await getStyle(input, "height");
+      expect(parseInt(val)).toBeGreaterThanOrEqual(minValue);
+      expect(parseInt(val)).toBeLessThanOrEqual(maxValue);
+    });
+  });
 
   [
     [10, 90, 135, 1229],
@@ -675,7 +675,7 @@ test.describe("Functionality tests", () => {
       page,
     }) => {
       await mount(
-        <DateInputCustom labelInline labelWidth={label} inputWidth={input} />
+        <DateInputCustom labelInline labelWidth={label} inputWidth={input} />,
       );
 
       const labelElement = getDataElementByValue(page, "label").locator("..");
@@ -797,7 +797,7 @@ test.describe("Functionality tests", () => {
         }}
       >
         <DateInputCustom disablePortal />
-      </div>
+      </div>,
     );
 
     const input = page.getByLabel("Date");
@@ -819,7 +819,7 @@ test.describe("Functionality tests", () => {
         }}
       >
         <DateInputCustom disablePortal={false} />
-      </div>
+      </div>,
     );
     const input = page.getByLabel("Date");
     await input.click();
@@ -885,45 +885,45 @@ test.describe("Functionality tests", () => {
     const inputParent = getDataElementByValue(page, "input").locator("..");
     await expect(inputParent).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(inputParent).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
     const dayPicker1 = page.getByLabel("Sun 1 May 2022");
     await dayPicker1.focus();
     await expect(dayPicker1).toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset"
+      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset",
     );
     await expect(dayPicker1).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
     const dayPicker2 = page.getByLabel("Mon 2 May 2022");
     await dayPicker2.focus();
     await expect(dayPicker2).toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset"
+      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset",
     );
     await expect(dayPicker2).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
     const dayPickerNavButton1 = page.getByLabel("Previous month");
     await dayPickerNavButton1.focus();
     await expect(dayPickerNavButton1).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(dayPickerNavButton1).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
     const dayPickerNavButton2 = page.getByLabel("Next month");
     await dayPickerNavButton2.focus();
     await expect(dayPickerNavButton2).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(dayPickerNavButton2).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -937,7 +937,7 @@ test.describe("Functionality tests", () => {
           m={9}
           tooltipPosition={position}
           error="Error message"
-        />
+        />,
       );
 
       const iconElement = icon(page);
@@ -945,7 +945,7 @@ test.describe("Functionality tests", () => {
 
       await expect(tooltipPreview(page)).toHaveAttribute(
         "data-placement",
-        position
+        position,
       );
 
       await page.hover("body"); // hover on body to close the tooltip
@@ -988,7 +988,7 @@ test.describe("Events tests", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const input = getDataElementByValue(page, "input");
@@ -1006,7 +1006,7 @@ test.describe("Events tests", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const input = getDataElementByValue(page, "input");
@@ -1014,178 +1014,176 @@ test.describe("Events tests", () => {
     expect(callbackCount).toBe(1);
   });
 
-  ([
-    ["en-US", "05/12/2022", "enUS"],
-    ["en-CA", "05/12/2022", "enCA"],
-    ["en-ZA", "12/05/2022", "enZA"],
-    ["de", "12.05.2022", "de"],
-    ["es-ES", "12/05/2022", "es"],
-    ["fr-FR", "12/05/2022", "fr"],
-    ["fr-CA", "12/05/2022", "frCA"],
-    ["zh-CN", "2022/05/12", "zhCN"],
-    ["pl-PL", "12.05.2022", "pl"],
-    ["bg-BG", "12.05.2022", "bg"],
-    ["zh-HK", "12/05/2022", "zhHK"],
-    ["hu-HU", "2022. 05. 12.", "hu"],
-    ["fi-FI", "12.05.2022", "fi"],
-    ["de-AT", "12.05.2022", "deAT"],
-    ["ko-KR", "2022. 05. 12.", "ko"],
-    ["ar-EG", "12/05/2022", "arEG"],
-    ["hi-HI", "12/05/2022", "hi"],
-    ["sl-SI", "12. 05. 2022", "sl"],
-    ["lv", "12.05.2022.", "lv"],
-  ] as const).forEach(
-    ([localeValue, formattedValueParam, dateFnsLocaleKey]) => {
-      test(`should use ${localeValue} locale and change the formattedValue to ${formattedValueParam} after selecting date`, async ({
-        mount,
-        page,
-      }) => {
-        let callbackCount = 0;
-        await mount<HooksConfig>(
-          <DateWithLocales
-            onChange={() => {
-              callbackCount += 1;
-            }}
-          />,
-          {
-            hooksConfig: { localeName: dateFnsLocaleKey },
-          }
-        );
+  (
+    [
+      ["en-US", "05/12/2022", "enUS"],
+      ["en-CA", "05/12/2022", "enCA"],
+      ["en-ZA", "12/05/2022", "enZA"],
+      ["de", "12.05.2022", "de"],
+      ["es-ES", "12/05/2022", "es"],
+      ["fr-FR", "12/05/2022", "fr"],
+      ["fr-CA", "12/05/2022", "frCA"],
+      ["zh-CN", "2022/05/12", "zhCN"],
+      ["pl-PL", "12.05.2022", "pl"],
+      ["bg-BG", "12.05.2022", "bg"],
+      ["zh-HK", "12/05/2022", "zhHK"],
+      ["hu-HU", "2022. 05. 12.", "hu"],
+      ["fi-FI", "12.05.2022", "fi"],
+      ["de-AT", "12.05.2022", "deAT"],
+      ["ko-KR", "2022. 05. 12.", "ko"],
+      ["ar-EG", "12/05/2022", "arEG"],
+      ["hi-HI", "12/05/2022", "hi"],
+      ["sl-SI", "12. 05. 2022", "sl"],
+      ["lv", "12.05.2022.", "lv"],
+    ] as const
+  ).forEach(([localeValue, formattedValueParam, dateFnsLocaleKey]) => {
+    test(`should use ${localeValue} locale and change the formattedValue to ${formattedValueParam} after selecting date`, async ({
+      mount,
+      page,
+    }) => {
+      let callbackCount = 0;
+      await mount<HooksConfig>(
+        <DateWithLocales
+          onChange={() => {
+            callbackCount += 1;
+          }}
+        />,
+        {
+          hooksConfig: { localeName: dateFnsLocaleKey },
+        },
+      );
 
-        const getDatetoEnter = () => {
-          if (["en-US", "en-CA"].includes(localeValue))
-            return MMDDYYYY_DATE_TO_ENTER;
-          if (["zh-CN", "hu-HU", "ko-KR"].includes(localeValue))
-            return YYYYMMDD_DATE_TO_ENTER;
-          return DDMMYYY_DATE_TO_ENTER;
-        };
-
-        const input = getDataElementByValue(page, "input");
-        await input.fill(getDatetoEnter());
-        await input.click();
-
-        const pickerByText = page
-          .getByRole("gridcell")
-          .filter({ hasText: "12" });
-        await pickerByText.click();
-        await expect(input).toHaveValue(formattedValueParam);
-
-        expect(callbackCount).toBe(3);
-      });
-    }
-  );
+      const getDatetoEnter = () => {
+        if (["en-US", "en-CA"].includes(localeValue))
+          return MMDDYYYY_DATE_TO_ENTER;
+        if (["zh-CN", "hu-HU", "ko-KR"].includes(localeValue))
+          return YYYYMMDD_DATE_TO_ENTER;
+        return DDMMYYY_DATE_TO_ENTER;
+      };
 
-  ([
-    ["en-US", "05/27/2022", "enUS"],
-    ["en-CA", "05/27/2022", "enCA"],
-    ["en-ZA", "27/05/2022", "enZA"],
-    ["de", "27.05.2022", "de"],
-    ["es-ES", "27/05/2022", "es"],
-    ["fr-FR", "27/05/2022", "fr"],
-    ["fr-CA", "27/05/2022", "frCA"],
-    ["zh-CN", "2022/05/27", "zhCN"],
-    ["pl-PL", "27.05.2022", "pl"],
-    ["bg-BG", "27.05.2022", "bg"],
-    ["zh-HK", "27/05/2022", "zhHK"],
-    ["hu-HU", "2022. 05. 27.", "hu"],
-    ["fi-FI", "27.05.2022", "fi"],
-    ["de-AT", "27.05.2022", "deAT"],
-    ["ko-KR", "2022. 05. 27.", "ko"],
-    ["ar-EG", "27/05/2022", "arEG"],
-    ["hi-HI", "27/05/2022", "hi"],
-    ["sl-SI", "27. 05. 2022", "sl"],
-    ["lv", "27.05.2022.", "lv"],
-  ] as const).forEach(
-    ([localeValue, formattedValueParam, dateFnsLocaleKey]) => {
-      test(`should use ${localeValue} locale and change the formattedValue to ${formattedValueParam} after typing the date`, async ({
-        mount,
-        page,
-      }) => {
-        let callbackCount = 0;
-        await mount<HooksConfig>(
-          <DateWithLocales
-            onChange={() => {
-              callbackCount += 1;
-            }}
-          />,
-          {
-            hooksConfig: { localeName: dateFnsLocaleKey },
-          }
-        );
+      const input = getDataElementByValue(page, "input");
+      await input.fill(getDatetoEnter());
+      await input.click();
 
-        const getDatetoEnter = () => {
-          if (["en-US", "en-CA"].includes(localeValue))
-            return MMDDYYYY_DATE_TO_ENTER;
-          if (["zh-CN", "hu-HU", "ko-KR"].includes(localeValue))
-            return YYYYMMDD_DATE_TO_ENTER;
-          return DDMMYYY_DATE_TO_ENTER;
-        };
+      const pickerByText = page.getByRole("gridcell").filter({ hasText: "12" });
+      await pickerByText.click();
+      await expect(input).toHaveValue(formattedValueParam);
 
-        const input = getDataElementByValue(page, "input");
-        await input.fill(getDatetoEnter());
-        await input.blur();
-        await expect(input).toHaveValue(formattedValueParam);
+      expect(callbackCount).toBe(3);
+    });
+  });
 
-        expect(callbackCount).toBe(2);
-      });
-    }
-  );
+  (
+    [
+      ["en-US", "05/27/2022", "enUS"],
+      ["en-CA", "05/27/2022", "enCA"],
+      ["en-ZA", "27/05/2022", "enZA"],
+      ["de", "27.05.2022", "de"],
+      ["es-ES", "27/05/2022", "es"],
+      ["fr-FR", "27/05/2022", "fr"],
+      ["fr-CA", "27/05/2022", "frCA"],
+      ["zh-CN", "2022/05/27", "zhCN"],
+      ["pl-PL", "27.05.2022", "pl"],
+      ["bg-BG", "27.05.2022", "bg"],
+      ["zh-HK", "27/05/2022", "zhHK"],
+      ["hu-HU", "2022. 05. 27.", "hu"],
+      ["fi-FI", "27.05.2022", "fi"],
+      ["de-AT", "27.05.2022", "deAT"],
+      ["ko-KR", "2022. 05. 27.", "ko"],
+      ["ar-EG", "27/05/2022", "arEG"],
+      ["hi-HI", "27/05/2022", "hi"],
+      ["sl-SI", "27. 05. 2022", "sl"],
+      ["lv", "27.05.2022.", "lv"],
+    ] as const
+  ).forEach(([localeValue, formattedValueParam, dateFnsLocaleKey]) => {
+    test(`should use ${localeValue} locale and change the formattedValue to ${formattedValueParam} after typing the date`, async ({
+      mount,
+      page,
+    }) => {
+      let callbackCount = 0;
+      await mount<HooksConfig>(
+        <DateWithLocales
+          onChange={() => {
+            callbackCount += 1;
+          }}
+        />,
+        {
+          hooksConfig: { localeName: dateFnsLocaleKey },
+        },
+      );
 
-  ([
-    ["en-US", "07/01/2022", "enUS"],
-    ["en-CA", "07/01/2022", "enCA"],
-    ["en-ZA", "01/07/2022", "enZA"],
-    ["de", "01.07.2022", "de"],
-    ["es-ES", "01/07/2022", "es"],
-    ["fr-FR", "01/07/2022", "fr"],
-    ["fr-CA", "01/07/2022", "frCA"],
-    ["zh-CN", "2022/07/01", "zhCN"],
-    ["pl-PL", "01.07.2022", "pl"],
-    ["bg-BG", "01.07.2022", "bg"],
-    ["zh-HK", "01/07/2022", "zhHK"],
-    ["hu-HU", "2022. 07. 01.", "hu"],
-    ["fi-FI", "01.07.2022", "fi"],
-    ["de-AT", "01.07.2022", "deAT"],
-    ["ko-KR", "2022. 07. 01.", "ko"],
-    ["ar-EG", "01/07/2022", "arEG"],
-    ["hi-HI", "01/07/2022", "hi"],
-    ["sl-SI", "01. 07. 2022", "sl"],
-    ["lv", "01.07.2022.", "lv"],
-  ] as const).forEach(
-    ([localeValue, formattedValueParam, dateFnsLocaleKey]) => {
-      test(`should use ${localeValue} locale and change the formattedValue to ${formattedValueParam} after typing short date`, async ({
-        mount,
-        page,
-      }) => {
-        let callbackCount = 0;
-        await mount<HooksConfig>(
-          <DateWithLocales
-            onChange={() => {
-              callbackCount += 1;
-            }}
-          />,
-          {
-            hooksConfig: { localeName: dateFnsLocaleKey },
-          }
-        );
+      const getDatetoEnter = () => {
+        if (["en-US", "en-CA"].includes(localeValue))
+          return MMDDYYYY_DATE_TO_ENTER;
+        if (["zh-CN", "hu-HU", "ko-KR"].includes(localeValue))
+          return YYYYMMDD_DATE_TO_ENTER;
+        return DDMMYYY_DATE_TO_ENTER;
+      };
 
-        const getDatetoEnter = () => {
-          if (["en-US", "en-CA"].includes(localeValue))
-            return MMDDYYYY_DATE_TO_ENTER_SHORT;
-          if (["zh-CN", "hu-HU", "ko-KR"].includes(localeValue))
-            return YYYYMMDD_DATE_TO_ENTER_SHORT;
-          return DDMMYYY_DATE_TO_ENTER_SHORT;
-        };
+      const input = getDataElementByValue(page, "input");
+      await input.fill(getDatetoEnter());
+      await input.blur();
+      await expect(input).toHaveValue(formattedValueParam);
 
-        const input = getDataElementByValue(page, "input");
-        await input.fill(getDatetoEnter());
-        await input.blur();
-        await expect(input).toHaveValue(formattedValueParam);
+      expect(callbackCount).toBe(2);
+    });
+  });
 
-        expect(callbackCount).toBe(2);
-      });
-    }
-  );
+  (
+    [
+      ["en-US", "07/01/2022", "enUS"],
+      ["en-CA", "07/01/2022", "enCA"],
+      ["en-ZA", "01/07/2022", "enZA"],
+      ["de", "01.07.2022", "de"],
+      ["es-ES", "01/07/2022", "es"],
+      ["fr-FR", "01/07/2022", "fr"],
+      ["fr-CA", "01/07/2022", "frCA"],
+      ["zh-CN", "2022/07/01", "zhCN"],
+      ["pl-PL", "01.07.2022", "pl"],
+      ["bg-BG", "01.07.2022", "bg"],
+      ["zh-HK", "01/07/2022", "zhHK"],
+      ["hu-HU", "2022. 07. 01.", "hu"],
+      ["fi-FI", "01.07.2022", "fi"],
+      ["de-AT", "01.07.2022", "deAT"],
+      ["ko-KR", "2022. 07. 01.", "ko"],
+      ["ar-EG", "01/07/2022", "arEG"],
+      ["hi-HI", "01/07/2022", "hi"],
+      ["sl-SI", "01. 07. 2022", "sl"],
+      ["lv", "01.07.2022.", "lv"],
+    ] as const
+  ).forEach(([localeValue, formattedValueParam, dateFnsLocaleKey]) => {
+    test(`should use ${localeValue} locale and change the formattedValue to ${formattedValueParam} after typing short date`, async ({
+      mount,
+      page,
+    }) => {
+      let callbackCount = 0;
+      await mount<HooksConfig>(
+        <DateWithLocales
+          onChange={() => {
+            callbackCount += 1;
+          }}
+        />,
+        {
+          hooksConfig: { localeName: dateFnsLocaleKey },
+        },
+      );
+
+      const getDatetoEnter = () => {
+        if (["en-US", "en-CA"].includes(localeValue))
+          return MMDDYYYY_DATE_TO_ENTER_SHORT;
+        if (["zh-CN", "hu-HU", "ko-KR"].includes(localeValue))
+          return YYYYMMDD_DATE_TO_ENTER_SHORT;
+        return DDMMYYY_DATE_TO_ENTER_SHORT;
+      };
+
+      const input = getDataElementByValue(page, "input");
+      await input.fill(getDatetoEnter());
+      await input.blur();
+      await expect(input).toHaveValue(formattedValueParam);
+
+      expect(callbackCount).toBe(2);
+    });
+  });
 
   test(`should call onBlur callback when a blur event is triggered`, async ({
     mount,
@@ -1197,7 +1195,7 @@ test.describe("Events tests", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const input = getDataElementByValue(page, "input");
@@ -1218,7 +1216,7 @@ test.describe("Events tests", () => {
           callbackCount += 1;
         }}
         allowEmptyValue
-      />
+      />,
     );
 
     const input = getDataElementByValue(page, "input");
@@ -1240,7 +1238,7 @@ test.describe("Events tests", () => {
           callbackCount += 1;
         }}
         allowEmptyValue
-      />
+      />,
     );
 
     const input = getDataElementByValue(page, "input");
@@ -1274,7 +1272,7 @@ test.describe("Accessibility tests", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   test(`should check accessibility for component with autoFocus prop`, async ({
@@ -1337,12 +1335,12 @@ test.describe("Accessibility tests", () => {
             labelAlign={labelAlign}
             labelHelp="labelHelp"
             labelInline
-          />
+          />,
         );
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   test(`should check accessibility for component with required prop`, async ({
@@ -1365,7 +1363,7 @@ test.describe("Accessibility tests", () => {
           labelAlign="right"
           validationOnLabel
           {...{ [type]: "Message" }}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -1382,7 +1380,7 @@ test.describe("Accessibility tests", () => {
           labelInline
           labelAlign="right"
           {...{ [type]: "Message" }}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -1399,7 +1397,11 @@ test.describe("Accessibility tests", () => {
       page,
     }) => {
       await mount(
-        <DateInputCustom labelInline labelAlign="right" {...{ [type]: bool }} />
+        <DateInputCustom
+          labelInline
+          labelAlign="right"
+          {...{ [type]: bool }}
+        />,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/date/date.stories.tsx b/src/components/date/date.stories.tsx
index 9cd0b50bfd..07876db87f 100644
--- a/src/components/date/date.stories.tsx
+++ b/src/components/date/date.stories.tsx
@@ -262,28 +262,29 @@ export const ValidationsStringComponent: Story = () => {
 };
 ValidationsStringComponent.storyName = "Validations - String - Component";
 
-export const ValidationsStringWithTooltipPositionOverriddenComponent: Story = () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
+export const ValidationsStringWithTooltipPositionOverriddenComponent: Story =
+  () => {
+    const [state, setState] = useState("01/10/2016");
+    const setValue = (ev: DateChangeEvent) => {
+      setState(ev.target.value.formattedValue);
+    };
+    return (
+      <>
+        {["error", "warning", "info"].map((validationType) => (
+          <div key={`${validationType}-string-component`}>
+            <DateInput
+              label="Date"
+              value={state}
+              onChange={setValue}
+              {...{ [validationType]: "Message" }}
+              mb={2}
+              tooltipPosition="top"
+            />
+          </div>
+        ))}
+      </>
+    );
   };
-  return (
-    <>
-      {["error", "warning", "info"].map((validationType) => (
-        <div key={`${validationType}-string-component`}>
-          <DateInput
-            label="Date"
-            value={state}
-            onChange={setValue}
-            {...{ [validationType]: "Message" }}
-            mb={2}
-            tooltipPosition="top"
-          />
-        </div>
-      ))}
-    </>
-  );
-};
 ValidationsStringWithTooltipPositionOverriddenComponent.storyName =
   "Validations - String - With Tooltip Position Overridden";
 ValidationsStringWithTooltipPositionOverriddenComponent.parameters = {
@@ -327,29 +328,30 @@ export const ValidationsStringLabel: Story = () => {
 };
 ValidationsStringLabel.storyName = "Validations - String - Label";
 
-export const ValidationsStringWithTooltipPositionOverriddenLabel: Story = () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
+export const ValidationsStringWithTooltipPositionOverriddenLabel: Story =
+  () => {
+    const [state, setState] = useState("01/10/2016");
+    const setValue = (ev: DateChangeEvent) => {
+      setState(ev.target.value.formattedValue);
+    };
+    return (
+      <>
+        {["error", "warning", "info"].map((validationType) => (
+          <div key={`${validationType}-string-component`}>
+            <DateInput
+              label="Date"
+              value={state}
+              onChange={setValue}
+              validationOnLabel
+              {...{ [validationType]: "Message" }}
+              mb={2}
+              tooltipPosition="top"
+            />
+          </div>
+        ))}
+      </>
+    );
   };
-  return (
-    <>
-      {["error", "warning", "info"].map((validationType) => (
-        <div key={`${validationType}-string-component`}>
-          <DateInput
-            label="Date"
-            value={state}
-            onChange={setValue}
-            validationOnLabel
-            {...{ [validationType]: "Message" }}
-            mb={2}
-            tooltipPosition="top"
-          />
-        </div>
-      ))}
-    </>
-  );
-};
 ValidationsStringWithTooltipPositionOverriddenLabel.storyName =
   "Validations - String - With Tooltip Position Overridden";
 ValidationsStringWithTooltipPositionOverriddenLabel.parameters = {
@@ -391,7 +393,7 @@ export const ValidationsStringNewDesign: Story = () => {
               m={4}
             />
           </div>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
diff --git a/src/components/date/date.test.tsx b/src/components/date/date.test.tsx
index fcece9cb3d..53ef4526a7 100644
--- a/src/components/date/date.test.tsx
+++ b/src/components/date/date.test.tsx
@@ -24,7 +24,7 @@ const ariaLabels = {
 
 testStyledSystemMarginRTL(
   (props) => <DateInput onChange={() => {}} value="" {...props} />,
-  () => screen.getAllByRole("presentation")[0]
+  () => screen.getAllByRole("presentation")[0],
 );
 
 const VALID_INPUT_STRINGS = [
@@ -99,7 +99,7 @@ test("should render the presentation element with expected width when `size` is
 
 test("should render the presentation element with expected width when `size` is 'medium'", () => {
   render(
-    <DateInput label="label" size="medium" onChange={() => {}} value="" />
+    <DateInput label="label" size="medium" onChange={() => {}} value="" />,
   );
   const presentation = screen.getAllByRole("presentation")[1];
 
@@ -121,7 +121,7 @@ test("should set 100% width on the presentation element when `inputWidth` is pas
       onChange={() => {}}
       value=""
       labelInline
-    />
+    />,
   );
   const presentation = screen.getAllByRole("presentation")[1];
 
@@ -130,7 +130,7 @@ test("should set 100% width on the presentation element when `inputWidth` is pas
 
 test("should set 100% width on the presentation element when `maxWidth` is passed", () => {
   render(
-    <DateInput label="label" maxWidth="200px" onChange={() => {}} value="" />
+    <DateInput label="label" maxWidth="200px" onChange={() => {}} value="" />,
   );
   const presentation = screen.getAllByRole("presentation")[1];
 
@@ -154,7 +154,7 @@ test("should accept ref as a callback and pass it to the input", () => {
 test("should set ref to empty after unmount", () => {
   const ref = { current: null };
   const { unmount } = render(
-    <DateInput label="label" ref={ref} onChange={() => {}} value="" />
+    <DateInput label="label" ref={ref} onChange={() => {}} value="" />,
   );
   unmount();
 
@@ -176,7 +176,7 @@ test("should render with the input focused and picker visible when `autoFocus` i
 
 test("should not render with the input focused or the picker visible when `autoFocus` is false", () => {
   render(
-    <DateInput label="label" autoFocus={false} onChange={() => {}} value="" />
+    <DateInput label="label" autoFocus={false} onChange={() => {}} value="" />,
   );
 
   expect(screen.getByRole("textbox")).not.toHaveFocus();
@@ -186,7 +186,7 @@ test("should not render with the input focused or the picker visible when `autoF
 test("should open the picker and call the `onFocus` callback if one passed when the input is focused by the user", async () => {
   const onFocus = jest.fn();
   render(
-    <DateInput label="label" onChange={() => {}} value="" onFocus={onFocus} />
+    <DateInput label="label" onChange={() => {}} value="" onFocus={onFocus} />,
   );
   const input = screen.getByRole("textbox");
   act(() => {
@@ -211,7 +211,7 @@ test("should open the picker and call the `onClick` and `onFocus` callbacks if p
       value=""
       onFocus={onFocus}
       onClick={onClick}
-    />
+    />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
@@ -226,7 +226,7 @@ test("should open the picker and call the `onClick` callback if passed when the
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const onClick = jest.fn();
   render(
-    <DateInput label="label" onChange={() => {}} value="" onClick={onClick} />
+    <DateInput label="label" onChange={() => {}} value="" onClick={onClick} />,
   );
   const icon = screen.getByTestId("icon");
   await user.click(icon);
@@ -260,7 +260,7 @@ test("should not trigger a focus event when the user clicks on the input and `di
       value=""
       disabled
       onFocus={onFocus}
-    />
+    />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
@@ -280,7 +280,7 @@ test("should not trigger a focus event when the user clicks on the input and `re
       value=""
       readOnly
       onFocus={onFocus}
-    />
+    />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
@@ -300,7 +300,7 @@ test("should call `onBlur` and `onChange` callbacks when the user clicks away fr
       onChange={onChange}
       onBlur={onBlur}
       value="010122"
-    />
+    />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
@@ -316,7 +316,7 @@ test("should call `onBlur` but not `onChange` callbacks when the user clicks awa
   const onBlur = jest.fn();
   const onChange = jest.fn();
   render(
-    <DateInput label="label" onChange={onChange} onBlur={onBlur} value="foo" />
+    <DateInput label="label" onChange={onChange} onBlur={onBlur} value="foo" />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
@@ -337,7 +337,7 @@ test("should call `onBlur` but not `onChange` callbacks when the user clicks awa
       onChange={onChange}
       onBlur={onBlur}
       value="2022-01-01"
-    />
+    />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
@@ -359,7 +359,7 @@ test("should not call `onBlur` or `onChange` callbacks when user clicks away fro
       onBlur={onBlur}
       value=""
       readOnly
-    />
+    />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
@@ -374,7 +374,7 @@ test("should not call `onBlur` when the user clicks on the input and then the in
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const onBlur = jest.fn();
   render(
-    <DateInput label="label" onChange={() => {}} onBlur={onBlur} value="" />
+    <DateInput label="label" onChange={() => {}} onBlur={onBlur} value="" />,
   );
   const input = screen.getByRole("textbox");
   const icon = screen.getByTestId("input-icon-toggle");
@@ -445,7 +445,7 @@ test("should call `onChange` callback when user clears the input and clicks away
       onChange={onChange}
       initialValue="04/04/2019"
       allowEmptyValue
-    />
+    />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
@@ -486,7 +486,7 @@ test("should not close the picker or call the `onChange` and `onBlur` callbacks
       onBlur={onBlur}
       value="04/04/2019"
       minDate="2019-04-04"
-    />
+    />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
@@ -609,7 +609,7 @@ test("should focus the next button and then the selected day element when the us
   expect(screen.getByRole("button", { name: "Next month" })).toHaveFocus();
   await user.tab();
   expect(
-    screen.getByRole("gridcell", { name: "Thu 4 Apr 2019" })
+    screen.getByRole("gridcell", { name: "Thu 4 Apr 2019" }),
   ).toHaveFocus();
   await user.tab();
   expect(screen.queryByRole("grid")).not.toBeInTheDocument();
@@ -636,7 +636,7 @@ test("should render the help icon when the `labelHelp` prop is passed and displa
       onChange={() => {}}
       value=""
       labelHelp="help text"
-    />
+    />,
   );
   const helpIcon = screen.getByRole("button", { name: "help" });
   await user.hover(helpIcon);
@@ -654,14 +654,14 @@ test("should render the input with the expected required attribute when the `req
 test("should render the picker as a descendant of the main presentation element when `disablePortal` is true", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   render(
-    <DateInput label="label" onChange={() => {}} value="" disablePortal />
+    <DateInput label="label" onChange={() => {}} value="" disablePortal />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
   jest.advanceTimersByTime(10);
 
   expect(
-    within(screen.getAllByRole("presentation")[0]).getByRole("grid")
+    within(screen.getAllByRole("presentation")[0]).getByRole("grid"),
   ).toBeVisible();
 });
 
@@ -673,7 +673,7 @@ test("should not render the picker as a descendant of the main presentation elem
   jest.advanceTimersByTime(10);
 
   expect(
-    within(screen.getAllByRole("presentation")[0]).queryByRole("grid")
+    within(screen.getAllByRole("presentation")[0]).queryByRole("grid"),
   ).not.toBeInTheDocument();
   expect(screen.getByRole("grid")).toBeVisible();
 });
@@ -683,7 +683,7 @@ describe("when the `locale` is undefined", () => {
     render(
       <I18nProvider>
         <DateInput onChange={() => {}} value="2019-04-05" />
-      </I18nProvider>
+      </I18nProvider>,
     );
 
     expect(screen.getByRole("textbox")).toHaveValue("05/04/2019");
@@ -694,7 +694,7 @@ describe("when the `locale` is undefined", () => {
     render(
       <I18nProvider>
         <MockComponent initialValue="04 04 2019" />
-      </I18nProvider>
+      </I18nProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.click(input);
@@ -711,7 +711,7 @@ describe("when the `locale` is undefined", () => {
       render(
         <I18nProvider>
           <MockComponent initialValue="" />
-        </I18nProvider>
+        </I18nProvider>,
       );
       const input = screen.getByRole("textbox");
       await user.click(input);
@@ -720,7 +720,7 @@ describe("when the `locale` is undefined", () => {
       await user.tab();
 
       expect(input).toHaveValue("04/04/2019");
-    }
+    },
   );
 });
 
@@ -734,7 +734,7 @@ describe("when the `locale` is 'en-GB''", () => {
         }}
       >
         <DateInput onChange={() => {}} value="2019-04-05" />
-      </I18nProvider>
+      </I18nProvider>,
     );
 
     expect(screen.getByRole("textbox")).toHaveValue("05/04/2019");
@@ -750,7 +750,7 @@ describe("when the `locale` is 'en-GB''", () => {
         }}
       >
         <MockComponent initialValue="04 04 2019" />
-      </I18nProvider>
+      </I18nProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.click(input);
@@ -772,7 +772,7 @@ describe("when the `locale` is 'en-GB''", () => {
           }}
         >
           <MockComponent initialValue="" />
-        </I18nProvider>
+        </I18nProvider>,
       );
       const input = screen.getByRole("textbox");
       await user.click(input);
@@ -781,7 +781,7 @@ describe("when the `locale` is 'en-GB''", () => {
       await user.tab();
 
       expect(input).toHaveValue("04/04/2019");
-    }
+    },
   );
 });
 
@@ -795,7 +795,7 @@ describe("when the `locale` is 'de-DE'", () => {
         }}
       >
         <DateInput onChange={() => {}} value="2019-04-05" />
-      </I18nProvider>
+      </I18nProvider>,
     );
 
     expect(screen.getByRole("textbox")).toHaveValue("05.04.2019");
@@ -811,7 +811,7 @@ describe("when the `locale` is 'de-DE'", () => {
         }}
       >
         <MockComponent initialValue="04 04 2019" />
-      </I18nProvider>
+      </I18nProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.click(input);
@@ -833,7 +833,7 @@ describe("when the `locale` is 'de-DE'", () => {
           }}
         >
           <MockComponent initialValue="" />
-        </I18nProvider>
+        </I18nProvider>,
       );
       const input = screen.getByRole("textbox");
       await user.click(input);
@@ -842,7 +842,7 @@ describe("when the `locale` is 'de-DE'", () => {
       await user.tab();
 
       expect(input).toHaveValue("04.04.2019");
-    }
+    },
   );
 });
 
@@ -856,7 +856,7 @@ describe("when the `locale` is 'es'", () => {
         }}
       >
         <DateInput onChange={() => {}} value="2019-04-05" />
-      </I18nProvider>
+      </I18nProvider>,
     );
 
     expect(screen.getByRole("textbox")).toHaveValue("05/04/2019");
@@ -872,7 +872,7 @@ describe("when the `locale` is 'es'", () => {
         }}
       >
         <MockComponent initialValue="04 04 2019" />
-      </I18nProvider>
+      </I18nProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.click(input);
@@ -894,7 +894,7 @@ describe("when the `locale` is 'es'", () => {
           }}
         >
           <MockComponent initialValue="" />
-        </I18nProvider>
+        </I18nProvider>,
       );
       const input = screen.getByRole("textbox");
       await user.click(input);
@@ -903,7 +903,7 @@ describe("when the `locale` is 'es'", () => {
       await user.tab();
 
       expect(input).toHaveValue("04/04/2019");
-    }
+    },
   );
 });
 
@@ -917,7 +917,7 @@ describe("when the `locale` is 'en-ZA'", () => {
         }}
       >
         <DateInput onChange={() => {}} value="2019-04-05" />
-      </I18nProvider>
+      </I18nProvider>,
     );
 
     expect(screen.getByRole("textbox")).toHaveValue("05/04/2019");
@@ -933,7 +933,7 @@ describe("when the `locale` is 'en-ZA'", () => {
         }}
       >
         <MockComponent initialValue="04 04 2019" />
-      </I18nProvider>
+      </I18nProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.click(input);
@@ -955,7 +955,7 @@ describe("when the `locale` is 'en-ZA'", () => {
           }}
         >
           <MockComponent initialValue="" />
-        </I18nProvider>
+        </I18nProvider>,
       );
       const input = screen.getByRole("textbox");
       await user.click(input);
@@ -964,7 +964,7 @@ describe("when the `locale` is 'en-ZA'", () => {
       await user.tab();
 
       expect(input).toHaveValue("04/04/2019");
-    }
+    },
   );
 });
 
@@ -978,7 +978,7 @@ describe("when the `locale` is 'fr-FR'", () => {
         }}
       >
         <DateInput onChange={() => {}} value="2019-04-05" />
-      </I18nProvider>
+      </I18nProvider>,
     );
 
     expect(screen.getByRole("textbox")).toHaveValue("05/04/2019");
@@ -994,7 +994,7 @@ describe("when the `locale` is 'fr-FR'", () => {
         }}
       >
         <MockComponent initialValue="04 04 2019" />
-      </I18nProvider>
+      </I18nProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.click(input);
@@ -1016,7 +1016,7 @@ describe("when the `locale` is 'fr-FR'", () => {
           }}
         >
           <MockComponent initialValue="" />
-        </I18nProvider>
+        </I18nProvider>,
       );
       const input = screen.getByRole("textbox");
       await user.click(input);
@@ -1025,7 +1025,7 @@ describe("when the `locale` is 'fr-FR'", () => {
       await user.tab();
 
       expect(input).toHaveValue("04/04/2019");
-    }
+    },
   );
 });
 
@@ -1039,7 +1039,7 @@ describe("when the `locale` is 'fr-CA'", () => {
         }}
       >
         <DateInput onChange={() => {}} value="2019-04-05" />
-      </I18nProvider>
+      </I18nProvider>,
     );
 
     expect(screen.getByRole("textbox")).toHaveValue("05/04/2019");
@@ -1055,7 +1055,7 @@ describe("when the `locale` is 'fr-CA'", () => {
         }}
       >
         <MockComponent initialValue="04 04 2019" />
-      </I18nProvider>
+      </I18nProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.click(input);
@@ -1077,7 +1077,7 @@ describe("when the `locale` is 'fr-CA'", () => {
           }}
         >
           <MockComponent initialValue="" />
-        </I18nProvider>
+        </I18nProvider>,
       );
       const input = screen.getByRole("textbox");
       await user.click(input);
@@ -1086,7 +1086,7 @@ describe("when the `locale` is 'fr-CA'", () => {
       await user.tab();
 
       expect(input).toHaveValue("04/04/2019");
-    }
+    },
   );
 });
 
@@ -1100,7 +1100,7 @@ describe("when the `locale` is 'en-CA'", () => {
         }}
       >
         <DateInput onChange={() => {}} value="2019-04-05" />
-      </I18nProvider>
+      </I18nProvider>,
     );
 
     expect(screen.getByRole("textbox")).toHaveValue("04/05/2019");
@@ -1116,7 +1116,7 @@ describe("when the `locale` is 'en-CA'", () => {
         }}
       >
         <MockComponent initialValue="04 04 2019" />
-      </I18nProvider>
+      </I18nProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.click(input);
@@ -1138,7 +1138,7 @@ describe("when the `locale` is 'en-CA'", () => {
           }}
         >
           <MockComponent initialValue="" />
-        </I18nProvider>
+        </I18nProvider>,
       );
       const input = screen.getByRole("textbox");
       await user.click(input);
@@ -1147,7 +1147,7 @@ describe("when the `locale` is 'en-CA'", () => {
       await user.tab();
 
       expect(input).toHaveValue("04/04/2019");
-    }
+    },
   );
 });
 
@@ -1161,7 +1161,7 @@ describe("when the `locale` is 'en-US'", () => {
         }}
       >
         <DateInput onChange={() => {}} value="2019-04-05" />
-      </I18nProvider>
+      </I18nProvider>,
     );
 
     expect(screen.getByRole("textbox")).toHaveValue("04/05/2019");
@@ -1177,7 +1177,7 @@ describe("when the `locale` is 'en-US'", () => {
         }}
       >
         <MockComponent initialValue="04/04/2019" />
-      </I18nProvider>
+      </I18nProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.click(input);
@@ -1199,7 +1199,7 @@ describe("when the `locale` is 'en-US'", () => {
           }}
         >
           <MockComponent initialValue="" />
-        </I18nProvider>
+        </I18nProvider>,
       );
       const input = screen.getByRole("textbox");
       await user.click(input);
@@ -1208,7 +1208,7 @@ describe("when the `locale` is 'en-US'", () => {
       await user.tab();
 
       expect(input).toHaveValue("04/04/2019");
-    }
+    },
   );
 });
 
@@ -1274,7 +1274,7 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
           value=""
           error="error message"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
     const icon = screen.getByTestId("icon-error");
@@ -1296,7 +1296,7 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
           error="error message"
           validationOnLabel
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.hover(input);
@@ -1315,7 +1315,7 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
           error="error message"
           validationOnLabel
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const label = screen.getByText("label");
     await user.hover(label);
@@ -1328,7 +1328,7 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
     render(
       <CarbonProvider>
         <DateInput label="label" onChange={() => {}} value="" error />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.hover(input);
@@ -1348,7 +1348,7 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
           value=""
           warning="warning message"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
     const icon = screen.getByTestId("icon-warning");
@@ -1364,7 +1364,7 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
     render(
       <CarbonProvider>
         <DateInput label="label" onChange={() => {}} value="" warning />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.hover(input);
@@ -1384,7 +1384,7 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
           value=""
           info="info message"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
     const icon = screen.getByTestId("icon-info");
@@ -1400,7 +1400,7 @@ describe("when the `validationRedesignOptIn` prop is falsy", () => {
     render(
       <CarbonProvider>
         <DateInput label="label" onChange={() => {}} value="" info />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
     await user.hover(input);
@@ -1421,7 +1421,7 @@ describe("when the `validationRedesignOptIn` prop is true", () => {
           value=""
           error="error message"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
 
@@ -1433,7 +1433,7 @@ describe("when the `validationRedesignOptIn` prop is true", () => {
     render(
       <CarbonProvider validationRedesignOptIn>
         <DateInput label="label" onChange={() => {}} value="" error />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
 
@@ -1450,7 +1450,7 @@ describe("when the `validationRedesignOptIn` prop is true", () => {
           value=""
           warning="warning message"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
 
@@ -1462,7 +1462,7 @@ describe("when the `validationRedesignOptIn` prop is true", () => {
     render(
       <CarbonProvider validationRedesignOptIn>
         <DateInput label="label" onChange={() => {}} value="" warning />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const input = screen.getByRole("textbox");
 
@@ -1482,7 +1482,7 @@ test("should call `onPickerOpen` callback when the user opens the DatePicker and
       onPickerOpen={onPickerOpen}
       onPickerClose={onPickerClose}
       value="010122"
-    />
+    />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
diff --git a/src/components/decimal/components.test-pw.tsx b/src/components/decimal/components.test-pw.tsx
index 8af9b55142..7fd1b1f6ea 100644
--- a/src/components/decimal/components.test-pw.tsx
+++ b/src/components/decimal/components.test-pw.tsx
@@ -4,7 +4,7 @@ import Decimal, { DecimalProps, CustomEvent } from ".";
 import CarbonProvider from "../carbon-provider/carbon-provider.component";
 
 export const DefaultStory = (
-  args: Partial<DecimalProps> & { message?: string | boolean }
+  args: Partial<DecimalProps> & { message?: string | boolean },
 ) => {
   const [state, setState] = useState("0.01");
   const setValue = ({ target }: CustomEvent) => {
@@ -48,11 +48,10 @@ export const LabelAlign = () => {
     right: "0.01",
     left: "0.01",
   });
-  const handleChange = (alignment: DecimalProps["labelAlign"]) => (
-    e: CustomEvent
-  ) => {
-    setState({ ...state, [alignment || "left"]: e.target.value.rawValue });
-  };
+  const handleChange =
+    (alignment: DecimalProps["labelAlign"]) => (e: CustomEvent) => {
+      setState({ ...state, [alignment || "left"]: e.target.value.rawValue });
+    };
   return (["right", "left"] as const).map((alignment) => (
     <Decimal
       label="Decimal"
@@ -83,7 +82,7 @@ export const WithCustomPrecision = () => {
 export const LabelInline = () => <DefaultStory labelInline />;
 
 export const WithCustomLabelWidthAndInputWidth = (
-  props: Partial<DecimalProps>
+  props: Partial<DecimalProps>,
 ) => <DefaultStory labelWidth={10} inputWidth={90} labelInline {...props} />;
 
 export const WithCustomMaxWidth = () => <DefaultStory maxWidth="50%" />;
@@ -103,7 +102,7 @@ export const LeftAligned = () => <DefaultStory align="left" />;
 type Validation = "error" | "warning" | "info";
 
 export const Validations = (
-  args: Partial<DecimalProps> & { message?: string | boolean }
+  args: Partial<DecimalProps> & { message?: string | boolean },
 ) => {
   const [state, setState] = useState({
     error: "0.01",
@@ -181,7 +180,7 @@ export const ValidationsRedesign = () => {
               m={4}
             />
           </div>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
diff --git a/src/components/decimal/decimal-test.stories.tsx b/src/components/decimal/decimal-test.stories.tsx
index ddff58b06c..f5ad0179c1 100644
--- a/src/components/decimal/decimal-test.stories.tsx
+++ b/src/components/decimal/decimal-test.stories.tsx
@@ -91,9 +91,8 @@ type Locale = {
   control: { type: string };
 };
 
-export const Locale: StoryFn<
-  CommonTextboxArgs & { locale: Locale }
-> = DecimalStory.bind({});
+export const Locale: StoryFn<CommonTextboxArgs & { locale: Locale }> =
+  DecimalStory.bind({});
 Locale.storyName = "locale";
 Locale.args = { ...commonArgs, locale: undefined };
 Locale.argTypes = {
diff --git a/src/components/decimal/decimal.component.tsx b/src/components/decimal/decimal.component.tsx
index f6b6b95236..c7bb2dc305 100644
--- a/src/components/decimal/decimal.component.tsx
+++ b/src/components/decimal/decimal.component.tsx
@@ -89,7 +89,7 @@ export const Decimal = React.forwardRef(
       value,
       ...rest
     }: DecimalProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     const l = useContext(LocaleContext);
 
@@ -100,7 +100,7 @@ export const Decimal = React.forwardRef(
           .formatToParts(numberWithGroupAndDecimalSeparator)
           .find((part) => part.type === separatorType)?.value;
       },
-      [l, locale]
+      [l, locale],
     );
 
     const isNaN = useCallback((valueToTest) => {
@@ -143,7 +143,7 @@ export const Decimal = React.forwardRef(
         }
         return formattedNumber;
       },
-      [getSeparator, isNaN, l, locale, precision]
+      [getSeparator, isNaN, l, locale, precision],
     );
 
     const emptyValue = allowEmptyValue
@@ -155,18 +155,18 @@ export const Decimal = React.forwardRef(
         // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
         invariant(
           typeof initialValue === "string",
-          "Decimal `value` prop must be a string"
+          "Decimal `value` prop must be a string",
         );
 
         if (initialValue && !allowEmptyValue) {
           invariant(
             initialValue !== "",
-            "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or specify a non-empty initialValue"
+            "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or specify a non-empty initialValue",
           );
         }
         return initialValue;
       },
-      [allowEmptyValue]
+      [allowEmptyValue],
     );
 
     /**
@@ -178,7 +178,7 @@ export const Decimal = React.forwardRef(
       if (prevPrecisionValue && prevPrecisionValue !== precision) {
         // eslint-disable-next-line no-console
         console.error(
-          "Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect."
+          "Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect.",
         );
       }
     }, [precision, prevPrecisionValue]);
@@ -187,11 +187,11 @@ export const Decimal = React.forwardRef(
       (valueToFormat) => {
         const delimiterMatcher = new RegExp(
           `[\\${getSeparator("group")} ]*`,
-          "g"
+          "g",
         );
         return valueToFormat.replace(delimiterMatcher, "");
       },
-      [getSeparator]
+      [getSeparator],
     );
 
     /**
@@ -210,12 +210,12 @@ export const Decimal = React.forwardRef(
     formatValue function, before the delimiters can be removed. */
         const errorsWithDelimiter = new RegExp(
           `([^A-Za-z0-9]{2,})|(^[^A-Za-z0-9-]+)|([^0-9a-z-,.])|([^0-9-,.]+)|([W,.])$`,
-          "g"
+          "g",
         );
         const separator = getSeparator("decimal") as string;
         const separatorRegex = new RegExp(
           separator === "." ? `\\${separator}` : separator,
-          "g"
+          "g",
         );
         if (
           valueWithoutNBS.match(errorsWithDelimiter) ||
@@ -227,17 +227,17 @@ export const Decimal = React.forwardRef(
         const withoutDelimiters = removeDelimiters(valueWithoutNBS);
         return withoutDelimiters.replace(
           new RegExp(`\\${separator}`, "g"),
-          "."
+          ".",
         );
       },
-      [getSeparator, removeDelimiters]
+      [getSeparator, removeDelimiters],
     );
 
     const decimalValue = getSafeValueProp(defaultValue || value || emptyValue);
     const [stateValue, setStateValue] = useState(
       isNaN(toStandardDecimal(decimalValue))
         ? decimalValue
-        : formatValue(decimalValue)
+        : formatValue(decimalValue),
     );
 
     const createEvent = (formatted: string, raw?: string): CustomEvent => {
@@ -321,7 +321,7 @@ export const Decimal = React.forwardRef(
     if (!deprecateUncontrolledWarnTriggered && !isControlled) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
@@ -349,7 +349,7 @@ export const Decimal = React.forwardRef(
         />
       </>
     );
-  }
+  },
 );
 
 Decimal.displayName = "Decimal";
diff --git a/src/components/decimal/decimal.pw.tsx b/src/components/decimal/decimal.pw.tsx
index 4bac6093f6..25f4986874 100644
--- a/src/components/decimal/decimal.pw.tsx
+++ b/src/components/decimal/decimal.pw.tsx
@@ -34,121 +34,123 @@ import {
 } from "./components.test-pw";
 
 test.describe("check props for Decimal component", () => {
-  ([
-    [0, "1", "1"],
-    [0, "134^", "134^"],
-    [0, "1234567789", "1,234,567,789"],
-    [0, ",,,,,", ",,,,,"],
-    [0, ".....", "....."],
-    [0, "abc,.123,.!@.00", "abc,.123,.!@.00"],
-    [0, "1,234$", "1,234$"],
-    [1, "1", "1.0"],
-    [1, "1.2", "1.2"],
-    [1, "1.23", "1.23"],
-    [2, "2", "2.00"],
-    [2, "2.1", "2.10"],
-    [2, "2.12", "2.12"],
-    [2, "2.123", "2.123"],
-    [3, "2.1", "2.100"],
-    [3, "2.12", "2.120"],
-    [3, "2.123", "2.123"],
-    [3, "2.1234", "2.1234"],
-    [4, "1.1234", "1.1234"],
-    [4, "2", "2.0000"],
-    [4, "234556654", "234,556,654.0000"],
-    [4, "%^%^%<<,,,", "%^%^%<<,,,"],
-    [5, "1", "1.00000"],
-    [5, "1.12345", "1.12345"],
-    [5, "1a.23", "1a.23"],
-    [6, "2.123456", "2.123456"],
-    [6, "2.1", "2.100000"],
-    [6, "2a.12", "2a.12"],
-    [6, "1,232.123", "1,232.123000"],
-    [7, "1", "1.0000000"],
-    [7, "2344.1234567", "2,344.1234567"],
-    [7, "88652344.1234567", "88,652,344.1234567"],
-    [8, "1", "1.00000000"],
-    [8, "1.2", "1.20000000"],
-    [8, "1.23", "1.23000000"],
-    [9, "2", "2.000000000"],
-    [9, "2.1", "2.100000000"],
-    [9, "1222.12", "1,222.120000000"],
-    [9, "2.123000000", "2.123000000"],
-    [10, "2.1", "2.1000000000"],
-    [10, "2.12", "2.1200000000"],
-    [10, "1222.123", "1,222.1230000000"],
-    [10, "2.12345", "2.1234500000"],
-    [11, "1", "1.00000000000"],
-    [11, "2345", "2,345.00000000000"],
-    [11, "17899536472345", "17,899,536,472,345.00000000000"],
-    [12, "1", "1.000000000000"],
-    [12, "1.12345", "1.123450000000"],
-    [12, "1a.23", "1a.23"],
-    [13, "2", "2.0000000000000"],
-    [13, "2.1", "2.1000000000000"],
-    [13, "2a.12", "2a.12"],
-    [13, "1232.123", "1,232.1230000000000"],
-    [14, "2.1", "2.10000000000000"],
-    [14, "2.12", "2.12000000000000"],
-    [14, "2.123", "2.12300000000000"],
-    [14, "1222.1234", "1,222.12340000000000"],
-    [15, "1", "1.000000000000000"],
-    [15, "2332.78", "2,332.780000000000000"],
-    [15, "1a3.55", "1a3.55"],
-    [15, "1.12345", "1.123450000000000"],
-    [15, "1a.23", "1a.23"],
-  ] as const).forEach(([precision, inputValue, outputValue]) => {
+  (
+    [
+      [0, "1", "1"],
+      [0, "134^", "134^"],
+      [0, "1234567789", "1,234,567,789"],
+      [0, ",,,,,", ",,,,,"],
+      [0, ".....", "....."],
+      [0, "abc,.123,.!@.00", "abc,.123,.!@.00"],
+      [0, "1,234$", "1,234$"],
+      [1, "1", "1.0"],
+      [1, "1.2", "1.2"],
+      [1, "1.23", "1.23"],
+      [2, "2", "2.00"],
+      [2, "2.1", "2.10"],
+      [2, "2.12", "2.12"],
+      [2, "2.123", "2.123"],
+      [3, "2.1", "2.100"],
+      [3, "2.12", "2.120"],
+      [3, "2.123", "2.123"],
+      [3, "2.1234", "2.1234"],
+      [4, "1.1234", "1.1234"],
+      [4, "2", "2.0000"],
+      [4, "234556654", "234,556,654.0000"],
+      [4, "%^%^%<<,,,", "%^%^%<<,,,"],
+      [5, "1", "1.00000"],
+      [5, "1.12345", "1.12345"],
+      [5, "1a.23", "1a.23"],
+      [6, "2.123456", "2.123456"],
+      [6, "2.1", "2.100000"],
+      [6, "2a.12", "2a.12"],
+      [6, "1,232.123", "1,232.123000"],
+      [7, "1", "1.0000000"],
+      [7, "2344.1234567", "2,344.1234567"],
+      [7, "88652344.1234567", "88,652,344.1234567"],
+      [8, "1", "1.00000000"],
+      [8, "1.2", "1.20000000"],
+      [8, "1.23", "1.23000000"],
+      [9, "2", "2.000000000"],
+      [9, "2.1", "2.100000000"],
+      [9, "1222.12", "1,222.120000000"],
+      [9, "2.123000000", "2.123000000"],
+      [10, "2.1", "2.1000000000"],
+      [10, "2.12", "2.1200000000"],
+      [10, "1222.123", "1,222.1230000000"],
+      [10, "2.12345", "2.1234500000"],
+      [11, "1", "1.00000000000"],
+      [11, "2345", "2,345.00000000000"],
+      [11, "17899536472345", "17,899,536,472,345.00000000000"],
+      [12, "1", "1.000000000000"],
+      [12, "1.12345", "1.123450000000"],
+      [12, "1a.23", "1a.23"],
+      [13, "2", "2.0000000000000"],
+      [13, "2.1", "2.1000000000000"],
+      [13, "2a.12", "2a.12"],
+      [13, "1232.123", "1,232.1230000000000"],
+      [14, "2.1", "2.10000000000000"],
+      [14, "2.12", "2.12000000000000"],
+      [14, "2.123", "2.12300000000000"],
+      [14, "1222.1234", "1,222.12340000000000"],
+      [15, "1", "1.000000000000000"],
+      [15, "2332.78", "2,332.780000000000000"],
+      [15, "1a3.55", "1a3.55"],
+      [15, "1.12345", "1.123450000000000"],
+      [15, "1a.23", "1a.23"],
+    ] as const
+  ).forEach(([precision, inputValue, outputValue]) => {
     test(`should use ${precision} as precision and ${inputValue} as input value to produce ${outputValue} output value`, async ({
       mount,
       page,
     }) => {
       await mount(<Decimal precision={precision} />);
 
-      const commonDataElementInputPreviewElement = commonDataElementInputPreview(
-        page
-      );
+      const commonDataElementInputPreviewElement =
+        commonDataElementInputPreview(page);
       await commonDataElementInputPreviewElement.fill(inputValue);
       await commonDataElementInputPreviewElement.blur();
       await expect(commonDataElementInputPreviewElement).toHaveAttribute(
         "value",
-        outputValue
+        outputValue,
       );
     });
   });
 
-  ([
-    ["en", "1,1,1,1,1.1", "11,111.100"],
-    ["en", "1,1,1222,12,1.1", "111,222,121.100"],
-    ["en", "1,,1,,1", "1,,1,,1"],
-    ["es-ES", "1.1.1.1.1.1,1", "111.111,100"],
-    ["es-ES", "2.123", "2123,000"],
-    ["es-ES", "21.21.111.1,013", "21.211.111,013"],
-    ["es-ES", "2.,12.,1", "2.,12.,1"],
-    ["fr", "11111,25", "11 111,250"],
-    ["fr", "1  1  1  1  1,25", "1  1  1  1  1,25"],
-    ["pt-PT", "1111,2", "1111,200"],
-    ["pt-PT", "111 11,25", "11 111,250"],
-    ["no-NO", "1 1 11,21", "1 111,210"],
-    ["no-No", "111 1 1,25", "11 111,250"],
-    ["no-NO", "1  1  1  1  1,25", "1  1  1  1  1,25"],
-  ] as const).forEach(([locale, inputValue, outputValue]) => {
+  (
+    [
+      ["en", "1,1,1,1,1.1", "11,111.100"],
+      ["en", "1,1,1222,12,1.1", "111,222,121.100"],
+      ["en", "1,,1,,1", "1,,1,,1"],
+      ["es-ES", "1.1.1.1.1.1,1", "111.111,100"],
+      ["es-ES", "2.123", "2123,000"],
+      ["es-ES", "21.21.111.1,013", "21.211.111,013"],
+      ["es-ES", "2.,12.,1", "2.,12.,1"],
+      ["fr", "11111,25", "11 111,250"],
+      ["fr", "1  1  1  1  1,25", "1  1  1  1  1,25"],
+      ["pt-PT", "1111,2", "1111,200"],
+      ["pt-PT", "111 11,25", "11 111,250"],
+      ["no-NO", "1 1 11,21", "1 111,210"],
+      ["no-No", "111 1 1,25", "11 111,250"],
+      ["no-NO", "1  1  1  1  1,25", "1  1  1  1  1,25"],
+    ] as const
+  ).forEach(([locale, inputValue, outputValue]) => {
     test(`should use ${locale} locale and ${inputValue} input value to produce ${outputValue} output value`, async ({
       mount,
       page,
     }) => {
       await mount(<Decimal locale={locale} precision={3} />);
 
-      const commonDataElementInputPreviewElement = commonDataElementInputPreview(
-        page
-      );
+      const commonDataElementInputPreviewElement =
+        commonDataElementInputPreview(page);
       await commonDataElementInputPreviewElement.fill(inputValue);
       await commonDataElementInputPreviewElement.blur();
       const value = await commonDataElementInputPreviewElement.evaluate(
         (element) =>
           (element as HTMLInputElement).value.replace(
             /(\s)|(&nbsp;)|(\u00a0)/g,
-            " "
-          )
+            " ",
+          ),
       );
       expect(value).toBe(outputValue);
     });
@@ -158,14 +160,13 @@ test.describe("check props for Decimal component", () => {
     await mount(<Decimal readOnly />);
 
     const inputValue = "test";
-    const commonDataElementInputPreviewElement = commonDataElementInputPreview(
-      page
-    );
+    const commonDataElementInputPreviewElement =
+      commonDataElementInputPreview(page);
     await commonDataElementInputPreviewElement.type(inputValue);
     await commonDataElementInputPreviewElement.blur();
     await expect(commonDataElementInputPreviewElement).not.toHaveAttribute(
       "value",
-      inputValue
+      inputValue,
     );
     await expect(commonDataElementInputPreviewElement).not.toBeEditable();
   });
@@ -180,11 +181,11 @@ test.describe("check props for Decimal component", () => {
       const textboxParent = await textbox(page).evaluateHandle(
         (element: Element) => {
           return element.parentElement;
-        }
+        },
       );
       const maxWidthValue = await getStyle(
-        (textboxParent as unknown) as Locator,
-        "max-width"
+        textboxParent as unknown as Locator,
+        "max-width",
       );
       expect(maxWidthValue).toContain(maxWidth);
     });
@@ -199,11 +200,11 @@ test.describe("check props for Decimal component", () => {
     const textboxParent = await textbox(page).evaluateHandle(
       (element: Element) => {
         return element.parentElement;
-      }
+      },
     );
     const maxWidthValue = await getStyle(
-      (textboxParent as unknown) as Locator,
-      "max-width"
+      textboxParent as unknown as Locator,
+      "max-width",
     );
     expect(maxWidthValue).toContain("100%");
   });
@@ -232,7 +233,7 @@ test.describe("check Decimal input", () => {
 
       const getDataElementByValueElementLabel = getDataElementByValue(
         page,
-        "label"
+        "label",
       );
       await expect(getDataElementByValueElementLabel).toHaveText(specificValue);
     });
@@ -247,7 +248,7 @@ test.describe("check Decimal input", () => {
 
       const getDataElementByValueElementQuestion = getDataElementByValue(
         page,
-        "question"
+        "question",
       );
       await getDataElementByValueElementQuestion.hover();
       const tooltipPreviewElement = tooltipPreview(page);
@@ -287,17 +288,16 @@ test.describe("check Decimal input", () => {
     }) => {
       await mount(<Decimal />);
 
-      const commonDataElementInputPreviewElement = commonDataElementInputPreview(
-        page
-      );
+      const commonDataElementInputPreviewElement =
+        commonDataElementInputPreview(page);
       await commonDataElementInputPreviewElement.fill(specificValue);
       await commonDataElementInputPreviewElement.blur();
       const value = await commonDataElementInputPreviewElement.evaluate(
         (element) =>
           (element as HTMLInputElement).value.replace(
             /(\s)|(&nbsp;)|(\u00a0)/g,
-            " "
-          )
+            " ",
+          ),
       );
       expect(value).toBe(specificValue);
     });
@@ -309,109 +309,108 @@ test.describe("check Decimal input", () => {
   }) => {
     await mount(<Decimal />);
 
-    const commonDataElementInputPreviewElement = commonDataElementInputPreview(
-      page
-    );
+    const commonDataElementInputPreviewElement =
+      commonDataElementInputPreview(page);
     await commonDataElementInputPreviewElement.fill("   ");
     await commonDataElementInputPreviewElement.blur();
     await expect(commonDataElementInputPreviewElement).toHaveAttribute(
       "value",
-      "   "
+      "   ",
     );
   });
 });
 
 test.describe("allowEmptyValue", () => {
-  ([
-    [0, "en", "0"],
-    [1, "en", "0.0"],
-    [2, "en", "0.00"],
-    [0, "es-ES", "0"],
-    [1, "es-ES", "0,0"],
-    [2, "es-ES", "0,00"],
-    [0, "fr", "0"],
-    [1, "fr", "0,0"],
-    [2, "fr", "0,00"],
-    [0, "pt-PT", "0"],
-    [1, "pt-PT", "0,0"],
-    [2, "pt-PT", "0,00"],
-  ] as [DecimalProps["precision"], string, string][]).forEach(
-    ([precisionValue, localeValue, expectedValue]) => {
-      test(`should format an empty value correctly when precision is ${precisionValue}, locale is ${localeValue} and allowEmptyValue is false`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <Decimal
-            precision={precisionValue}
-            locale={localeValue}
-            allowEmptyValue={false}
-          />
-        );
-
-        const commonDataElementInputPreviewElement = commonDataElementInputPreview(
-          page
-        );
-        await commonDataElementInputPreviewElement.fill("100");
-        await commonDataElementInputPreviewElement.clear();
-        await commonDataElementInputPreviewElement.blur();
-        await expect(commonDataElementInputPreviewElement).toHaveAttribute(
-          "value",
-          expectedValue
-        );
-      });
-    }
-  );
-
-  ([
-    [0, "en"],
-    [1, "en"],
-    [2, "en"],
-    [0, "es-ES"],
-    [1, "es-ES"],
-    [2, "es-ES"],
-    [0, "fr"],
-    [1, "fr"],
-    [2, "fr"],
-    [0, "pt-PT"],
-    [1, "pt-PT"],
-    [2, "pt-PT"],
-  ] as [DecimalProps["precision"], string][]).forEach(
-    ([precisionValue, localeValue]) => {
-      test(`should format an empty value correctly when precision is ${precisionValue}, locale is ${localeValue} and allowEmptyValue is true`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <Decimal
-            precision={precisionValue}
-            locale={localeValue}
-            allowEmptyValue
-          />
-        );
-
-        const commonDataElementInputPreviewElement = commonDataElementInputPreview(
-          page
-        );
-        await commonDataElementInputPreviewElement.fill("100");
-        await commonDataElementInputPreviewElement.clear();
-        await commonDataElementInputPreviewElement.blur();
-
-        await expect(commonDataElementInputPreviewElement).toHaveAttribute(
-          "value",
-          ""
-        );
-      });
-    }
-  );
+  (
+    [
+      [0, "en", "0"],
+      [1, "en", "0.0"],
+      [2, "en", "0.00"],
+      [0, "es-ES", "0"],
+      [1, "es-ES", "0,0"],
+      [2, "es-ES", "0,00"],
+      [0, "fr", "0"],
+      [1, "fr", "0,0"],
+      [2, "fr", "0,00"],
+      [0, "pt-PT", "0"],
+      [1, "pt-PT", "0,0"],
+      [2, "pt-PT", "0,00"],
+    ] as [DecimalProps["precision"], string, string][]
+  ).forEach(([precisionValue, localeValue, expectedValue]) => {
+    test(`should format an empty value correctly when precision is ${precisionValue}, locale is ${localeValue} and allowEmptyValue is false`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <Decimal
+          precision={precisionValue}
+          locale={localeValue}
+          allowEmptyValue={false}
+        />,
+      );
+
+      const commonDataElementInputPreviewElement =
+        commonDataElementInputPreview(page);
+      await commonDataElementInputPreviewElement.fill("100");
+      await commonDataElementInputPreviewElement.clear();
+      await commonDataElementInputPreviewElement.blur();
+      await expect(commonDataElementInputPreviewElement).toHaveAttribute(
+        "value",
+        expectedValue,
+      );
+    });
+  });
+
+  (
+    [
+      [0, "en"],
+      [1, "en"],
+      [2, "en"],
+      [0, "es-ES"],
+      [1, "es-ES"],
+      [2, "es-ES"],
+      [0, "fr"],
+      [1, "fr"],
+      [2, "fr"],
+      [0, "pt-PT"],
+      [1, "pt-PT"],
+      [2, "pt-PT"],
+    ] as [DecimalProps["precision"], string][]
+  ).forEach(([precisionValue, localeValue]) => {
+    test(`should format an empty value correctly when precision is ${precisionValue}, locale is ${localeValue} and allowEmptyValue is true`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <Decimal
+          precision={precisionValue}
+          locale={localeValue}
+          allowEmptyValue
+        />,
+      );
+
+      const commonDataElementInputPreviewElement =
+        commonDataElementInputPreview(page);
+      await commonDataElementInputPreviewElement.fill("100");
+      await commonDataElementInputPreviewElement.clear();
+      await commonDataElementInputPreviewElement.blur();
+
+      await expect(commonDataElementInputPreviewElement).toHaveAttribute(
+        "value",
+        "",
+      );
+    });
+  });
 });
 
 test.describe("check events for Decimal component", () => {
-  ([
-    ["1", "1.00"],
-    ["12", "12.00"],
-    ["123", "123.00"],
-  ] as [string, string][]).forEach(([rawValueTest, formattedValueTest]) => {
+  (
+    [
+      ["1", "1.00"],
+      ["12", "12.00"],
+      ["123", "123.00"],
+    ] as [string, string][]
+  ).forEach(([rawValueTest, formattedValueTest]) => {
     test(`should call onChange callback when a type event is triggered with ${rawValueTest} value`, async ({
       mount,
       page,
@@ -422,15 +421,14 @@ test.describe("check events for Decimal component", () => {
       };
       await mount(<Decimal precision={2} onChange={callback} />);
 
-      const commonDataElementInputPreviewElement = commonDataElementInputPreview(
-        page
-      );
+      const commonDataElementInputPreviewElement =
+        commonDataElementInputPreview(page);
       await commonDataElementInputPreviewElement.fill(rawValueTest);
       expect(callbackCount).toBe(1);
       await commonDataElementInputPreviewElement.blur();
       await expect(commonDataElementInputPreviewElement).toHaveAttribute(
         "value",
-        formattedValueTest
+        formattedValueTest,
       );
     });
   });
@@ -446,9 +444,8 @@ test.describe("check events for Decimal component", () => {
     await mount(<Decimal onBlur={callback} />);
 
     const inputValue = "123";
-    const commonDataElementInputPreviewElement = commonDataElementInputPreview(
-      page
-    );
+    const commonDataElementInputPreviewElement =
+      commonDataElementInputPreview(page);
     await commonDataElementInputPreviewElement.fill(inputValue);
     await commonDataElementInputPreviewElement.blur();
     expect(callbackCount).toBe(1);
@@ -522,7 +519,7 @@ test.describe("Accessibility tests for Decimal component", () => {
 
     const getDataElementByValueElementQuestion = getDataElementByValue(
       page,
-      "question"
+      "question",
     );
     await getDataElementByValueElementQuestion.hover();
     await checkAccessibility(page, tooltipPreview(page));
@@ -575,7 +572,7 @@ test.describe("Accessibility tests for Decimal component", () => {
           ("");
         }}
         value="0.01"
-      />
+      />,
     );
 
     await checkAccessibility(page);
@@ -593,7 +590,7 @@ test.describe("Accessibility tests for Decimal component", () => {
         }}
         value="0.01"
         readOnly
-      />
+      />,
     );
 
     await checkAccessibility(page);
diff --git a/src/components/decimal/decimal.stories.tsx b/src/components/decimal/decimal.stories.tsx
index daf0703a1c..796a336e88 100644
--- a/src/components/decimal/decimal.stories.tsx
+++ b/src/components/decimal/decimal.stories.tsx
@@ -77,11 +77,10 @@ export const LabelAlign: Story = () => {
     right: "0.01",
     left: "0.01",
   });
-  const handleChange = (alignment: DecimalProps["labelAlign"]) => (
-    e: CustomEvent
-  ) => {
-    setState({ ...state, [alignment || "left"]: e.target.value.rawValue });
-  };
+  const handleChange =
+    (alignment: DecimalProps["labelAlign"]) => (e: CustomEvent) => {
+      setState({ ...state, [alignment || "left"]: e.target.value.rawValue });
+    };
   return (["right", "left"] as const).map((alignment) => (
     <Decimal
       label="Decimal"
@@ -279,7 +278,7 @@ export const ValidationsRedesign: Story = () => {
               m={4}
             />
           </div>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
diff --git a/src/components/decimal/decimal.test.tsx b/src/components/decimal/decimal.test.tsx
index 237c52e941..ea7c4bca50 100644
--- a/src/components/decimal/decimal.test.tsx
+++ b/src/components/decimal/decimal.test.tsx
@@ -28,7 +28,7 @@ testStyledSystemMarginRTL(
   (props) => <Decimal data-role="decimal" {...props} />,
   () => screen.getByTestId("decimal"),
   undefined,
-  { modifier: "&&&" }
+  { modifier: "&&&" },
 );
 
 describe("when the component is uncontrolled", () => {
@@ -37,7 +37,7 @@ describe("when the component is uncontrolled", () => {
     render(<Decimal defaultValue="0.01" />);
 
     expect(loggerSpy).toHaveBeenCalledWith(
-      "Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+      "Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
     );
     expect(loggerSpy).toHaveBeenCalledTimes(1);
 
@@ -142,7 +142,7 @@ describe("when the component is uncontrolled", () => {
 
     rerender(<Decimal precision={1} />);
     expect(consoleSpy).toHaveBeenCalledWith(
-      "Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect."
+      "Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect.",
     );
     consoleSpy.mockRestore();
   });
@@ -186,11 +186,11 @@ describe("when the component is uncontrolled", () => {
     "formats the default value correctly when the precision is (%s)",
     (precisionValue, decimalValue) => {
       render(
-        <Decimal defaultValue={decimalValue} precision={precisionValue} />
+        <Decimal defaultValue={decimalValue} precision={precisionValue} />,
       );
       expect(screen.getByRole("textbox")).toHaveValue(decimalValue);
       expect(screen.getByTestId("hidden-input")).toHaveValue(decimalValue);
-    }
+    },
   );
 
   it("pads the value with 0s if the precision is greater than the number of decimal places", () => {
@@ -215,7 +215,7 @@ describe("when the component is uncontrolled", () => {
             rawValue: "12345.56",
           },
         },
-      })
+      }),
     );
   });
 
@@ -236,7 +236,7 @@ describe("when the component is uncontrolled", () => {
             rawValue: "12345.56",
           },
         },
-      })
+      }),
     );
   });
 
@@ -426,9 +426,9 @@ describe("when the component is uncontrolled", () => {
               rawValue: pastedText,
             },
           },
-        })
+        }),
       );
-    }
+    },
   );
 
   it.each([
@@ -449,7 +449,7 @@ describe("when the component is uncontrolled", () => {
 
       expect(decimalInput).toHaveValue(result);
       expect(screen.getByTestId("hidden-input")).toHaveValue(result);
-    }
+    },
   );
 
   // insertions at start and end have to be handled separately from the cases above, as setting the
@@ -540,7 +540,7 @@ describe("when the component is uncontrolled", () => {
 
       expect(decimalInput).toHaveValue(rawValue);
       expect(screen.getByTestId("hidden-input")).toHaveValue(sanitisedValue);
-    }
+    },
   );
 
   // as above, a simple cursor placement (no selection) at the start or end need special handling
@@ -627,7 +627,7 @@ describe("when the component is uncontrolled", () => {
 
       expect(decimalInput).toHaveValue(rawValue);
       expect(screen.getByTestId("hidden-input")).toHaveValue(sanitisedValue);
-    }
+    },
   );
 
   // as above, a simple cursor placement (no selection) at the start or end need special handling
@@ -669,7 +669,7 @@ describe("when the component is uncontrolled", () => {
 
       expect(screen.getByRole("textbox")).toHaveValue(input);
       expect(screen.getByTestId("hidden-input")).toHaveValue(input);
-    }
+    },
   );
 
   it("calls the onKeyPress callback when a key is pressed", async () => {
@@ -682,7 +682,7 @@ describe("when the component is uncontrolled", () => {
     await user.keyboard("1");
 
     expect(onKeyPress).toHaveBeenCalledWith(
-      expect.objectContaining({ key: "1" })
+      expect.objectContaining({ key: "1" }),
     );
   });
 
@@ -690,7 +690,7 @@ describe("when the component is uncontrolled", () => {
     render(<Decimal data-role="test-data-tag" />);
     expect(screen.getByTestId("test-data-tag")).toHaveAttribute(
       "data-component",
-      "decimal"
+      "decimal",
     );
   });
 
@@ -741,9 +741,9 @@ describe("when the component is uncontrolled", () => {
               rawValue,
             },
           },
-        })
+        }),
       );
-    }
+    },
   );
 
   it.each([
@@ -759,7 +759,7 @@ describe("when the component is uncontrolled", () => {
 
       expect(screen.getByRole("textbox")).toHaveValue(formatted);
       expect(screen.getByTestId("hidden-input")).toHaveValue(input);
-    }
+    },
   );
 
   it.each([
@@ -793,9 +793,9 @@ describe("when the component is uncontrolled", () => {
               rawValue,
             },
           },
-        })
+        }),
       );
-    }
+    },
   );
 
   it("formats an empty value correctly when precision is 0, allowEmptyValue is false, and the `es-ES` locale is set", async () => {
@@ -806,7 +806,7 @@ describe("when the component is uncontrolled", () => {
         defaultValue="123.45"
         allowEmptyValue={false}
         locale="es-ES"
-      />
+      />,
     );
 
     screen.getByRole("textbox").focus();
@@ -825,7 +825,7 @@ describe("when the component is uncontrolled", () => {
         defaultValue="123.45"
         allowEmptyValue={false}
         locale="es-ES"
-      />
+      />,
     );
 
     screen.getByRole("textbox").focus();
@@ -849,7 +849,7 @@ describe("when the component is uncontrolled", () => {
 
       expect(screen.getByRole("textbox")).toHaveValue(formatted);
       expect(screen.getByTestId("hidden-input")).toHaveValue(input);
-    }
+    },
   );
 
   it.each([
@@ -880,9 +880,9 @@ describe("when the component is uncontrolled", () => {
               rawValue,
             },
           },
-        })
+        }),
       );
-    }
+    },
   );
 
   it("correctly handles a value that has white-spaces when the `pt-PT` locale is set", async () => {
@@ -937,7 +937,7 @@ describe("when the component is uncontrolled", () => {
         defaultValue="123.45"
         allowEmptyValue={false}
         locale="pt-PT"
-      />
+      />,
     );
 
     screen.getByRole("textbox").focus();
@@ -956,7 +956,7 @@ describe("when the component is uncontrolled", () => {
         defaultValue="123.45"
         allowEmptyValue={false}
         locale="pt-PT"
-      />
+      />,
     );
 
     screen.getByRole("textbox").focus();
@@ -984,7 +984,7 @@ describe("when the component is uncontrolled", () => {
             rawValue: "11111.25",
           },
         },
-      })
+      }),
     );
   });
 
@@ -996,7 +996,7 @@ describe("when the component is uncontrolled", () => {
         defaultValue="123.45"
         allowEmptyValue={false}
         locale="fr"
-      />
+      />,
     );
 
     screen.getByRole("textbox").focus();
@@ -1015,7 +1015,7 @@ describe("when the component is uncontrolled", () => {
         defaultValue="123.45"
         allowEmptyValue={false}
         locale="fr"
-      />
+      />,
     );
 
     screen.getByRole("textbox").focus();
@@ -1088,7 +1088,7 @@ describe("when the component is uncontrolled", () => {
         defaultValue="123.45"
         allowEmptyValue={false}
         locale="it"
-      />
+      />,
     );
 
     screen.getByRole("textbox").focus();
@@ -1107,7 +1107,7 @@ describe("when the component is uncontrolled", () => {
         defaultValue="123.45"
         allowEmptyValue={false}
         locale="it"
-      />
+      />,
     );
 
     screen.getByRole("textbox").focus();
@@ -1161,7 +1161,7 @@ describe("when the component is controlled", () => {
         precision={0}
         startingValue=""
         allowEmptyValue={false}
-      />
+      />,
     );
 
     screen.getByRole("textbox").focus();
@@ -1178,7 +1178,7 @@ describe("when the component is controlled", () => {
         precision={1}
         startingValue=""
         allowEmptyValue={false}
-      />
+      />,
     );
 
     screen.getByRole("textbox").focus();
@@ -1264,7 +1264,7 @@ describe("when the component is controlled", () => {
     const onBlur = jest.fn();
     const user = userEvent.setup();
     render(
-      <ControlledDecimal startingValue="1" onBlur={onBlur} allowEmptyValue />
+      <ControlledDecimal startingValue="1" onBlur={onBlur} allowEmptyValue />,
     );
 
     const decimalInput = screen.getByRole("textbox");
@@ -1282,7 +1282,7 @@ describe("when the component is controlled", () => {
             rawValue: "",
           },
         },
-      })
+      }),
     );
   });
 
@@ -1306,7 +1306,7 @@ describe("when the component is controlled", () => {
             rawValue: "0.00",
           },
         },
-      })
+      }),
     );
   });
 });
@@ -1345,7 +1345,7 @@ test("when wrapped in an I18nProvider, the appropriate locale is used, and the f
       }}
     >
       <Decimal />
-    </I18nProvider>
+    </I18nProvider>,
   );
   expect(screen.getByRole("textbox")).toHaveValue("0,00");
 
@@ -1356,7 +1356,7 @@ test("when wrapped in an I18nProvider, the appropriate locale is used, and the f
       }}
     >
       <Decimal />
-    </I18nProvider>
+    </I18nProvider>,
   );
   screen.getByRole("textbox").focus();
   await user.tab();
diff --git a/src/components/definition-list/dd/dd.stories.tsx b/src/components/definition-list/dd/dd.stories.tsx
index 9737edbe67..53b1adafcd 100644
--- a/src/components/definition-list/dd/dd.stories.tsx
+++ b/src/components/definition-list/dd/dd.stories.tsx
@@ -11,7 +11,7 @@ const styledSystemProps = generateStyledSystemProps(
   {
     spacing: true,
   },
-  { mb: 2 }
+  { mb: 2 },
 );
 
 const meta: Meta<typeof Dd> = {
diff --git a/src/components/definition-list/definition-list-test.stories.tsx b/src/components/definition-list/definition-list-test.stories.tsx
index 4715ef133f..b009b73a2b 100644
--- a/src/components/definition-list/definition-list-test.stories.tsx
+++ b/src/components/definition-list/definition-list-test.stories.tsx
@@ -148,7 +148,7 @@ export const TextAlignExamples = () => {
               <Dd>Description</Dd>
             </Dl>
           );
-        }
+        },
       )}
     </>
   );
diff --git a/src/components/definition-list/definition-list.pw.tsx b/src/components/definition-list/definition-list.pw.tsx
index ef0f1eb582..1f1bacea13 100644
--- a/src/components/definition-list/definition-list.pw.tsx
+++ b/src/components/definition-list/definition-list.pw.tsx
@@ -90,7 +90,7 @@ test.describe("definition list", () => {
       await assertCssValueIsApproximately(
         dt,
         "width",
-        dtPixels - PADDING_RIGHT
+        dtPixels - PADDING_RIGHT,
       );
 
       await assertCssValueIsApproximately(dd, "width", ddPixels);
@@ -106,7 +106,7 @@ test.describe("definition list", () => {
         <Dl>
           <Dt>{text}</Dt>
           <Dd>Definition</Dd>
-        </Dl>
+        </Dl>,
       );
 
       const dt = getDataElementByValue(page, "dt");
@@ -123,7 +123,7 @@ test.describe("definition list", () => {
         <Dl>
           <Dt>Text</Dt>
           <Dd data-element="dd">{definition}</Dd>
-        </Dl>
+        </Dl>,
       );
 
       const dd = getDataElementByValue(page, "dd");
@@ -177,11 +177,11 @@ test.describe("definition list", () => {
             <Icon type="tick" />
           </Box>
         </Dd>
-      </Dl>
+      </Dl>,
     );
 
     const dd = getDataElementByValue(page, "dd").locator(
-      '[data-component="icon"]'
+      '[data-component="icon"]',
     );
 
     await expect(dd).toHaveAttribute("data-element", "tick");
@@ -270,7 +270,7 @@ test.describe("definition list", () => {
           <Dl>
             <Dt>{text}</Dt>
             <Dd>Definition</Dd>
-          </Dl>
+          </Dl>,
         );
 
         await checkAccessibility(page);
@@ -286,7 +286,7 @@ test.describe("definition list", () => {
           <Dl>
             <Dt>Text</Dt>
             <Dd data-element="dd">{definition}</Dd>
-          </Dl>
+          </Dl>,
         );
 
         await checkAccessibility(page);
@@ -315,7 +315,7 @@ test.describe("definition list", () => {
               <Icon type="tick" />
             </Box>
           </Dd>
-        </Dl>
+        </Dl>,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/definition-list/definition-list.test.tsx b/src/components/definition-list/definition-list.test.tsx
index 49d60923f0..2e5be555f1 100644
--- a/src/components/definition-list/definition-list.test.tsx
+++ b/src/components/definition-list/definition-list.test.tsx
@@ -12,7 +12,7 @@ testStyledSystemSpacingRTL(
       <Dd>This is a test</Dd>
     </Dl>
   ),
-  () => screen.getByTestId("dl")
+  () => screen.getByTestId("dl"),
 );
 
 test("component should render correctly if composed with a React Fragment", () => {
@@ -24,7 +24,7 @@ test("component should render correctly if composed with a React Fragment", () =
         <Dt>Title inside of React Fragment</Dt>
         <Dd>Description inside of React Fragment</Dd>
       </>
-    </Dl>
+    </Dl>,
   );
 
   const dtElements = screen.getAllByTestId("dt");
@@ -37,7 +37,7 @@ test("component should render correctly if composed with a React Fragment", () =
   expect(ddElements).toHaveLength(2);
   expect(ddElements[0]).toHaveTextContent("Description");
   expect(ddElements[1]).toHaveTextContent(
-    "Description inside of React Fragment"
+    "Description inside of React Fragment",
   );
 });
 
@@ -62,7 +62,7 @@ test("component should render the correct amount of list items with conditionall
           <Dd>3rd Description</Dd>
         </>
       )}
-    </Dl>
+    </Dl>,
   );
 
   const dtElements = screen.getAllByTestId("dt");
@@ -99,9 +99,9 @@ test("when mapping from an object, the component should render the correct amoun
               <Dt>{content.definition}</Dt>
               <Dd>{content.description}</Dd>
             </React.Fragment>
-          )
+          ),
       )}
-    </Dl>
+    </Dl>,
   );
 
   const dtElements = screen.getAllByTestId("dt");
@@ -122,7 +122,7 @@ test("when `asSingleColumn` is true, the expected styling is applied to the Dl e
     <Dl asSingleColumn>
       <Dt>Title</Dt>
       <Dd>Description</Dd>
-    </Dl>
+    </Dl>,
   );
 
   expect(screen.getByTestId("dl")).toHaveStyle("line-height: 21px");
diff --git a/src/components/definition-list/dt/dt.stories.tsx b/src/components/definition-list/dt/dt.stories.tsx
index 70e9b70f4b..72983290b3 100644
--- a/src/components/definition-list/dt/dt.stories.tsx
+++ b/src/components/definition-list/dt/dt.stories.tsx
@@ -11,7 +11,7 @@ const styledSystemProps = generateStyledSystemProps(
   {
     spacing: true,
   },
-  { mb: 2, pr: 3 }
+  { mb: 2, pr: 3 },
 );
 
 const meta: Meta<typeof Dt> = {
diff --git a/src/components/detail/detail.test.tsx b/src/components/detail/detail.test.tsx
index 09eef8d5a0..659b8b88ec 100644
--- a/src/components/detail/detail.test.tsx
+++ b/src/components/detail/detail.test.tsx
@@ -13,7 +13,7 @@ test("renders with provided `footnote`", () => {
   render(<Detail footnote="extra info">foo</Detail>);
 
   const footnoteText = within(screen.getByTestId("footnote")).getByText(
-    "extra info"
+    "extra info",
   );
 
   expect(footnoteText).toBeVisible();
@@ -32,7 +32,7 @@ test("renders with provided data- tags", () => {
   render(
     <Detail data-element="bar" data-role="baz">
       foo
-    </Detail>
+    </Detail>,
   );
 
   expect(screen.getByTestId("baz")).toHaveAttribute("data-element", "bar");
@@ -43,7 +43,7 @@ test("renders with expected styles when `icon` and `footnote` are passed", () =>
   render(
     <Detail icon="bin" footnote="extra info">
       foo
-    </Detail>
+    </Detail>,
   );
 
   const footnote = screen.getByTestId("footnote");
@@ -57,5 +57,5 @@ testStyledSystemMarginRTL(
       foo
     </Detail>
   ),
-  () => screen.getByTestId("detail")
+  () => screen.getByTestId("detail"),
 );
diff --git a/src/components/dialog-full-screen/components.test-pw.tsx b/src/components/dialog-full-screen/components.test-pw.tsx
index c2c99b2970..f81290b9a4 100644
--- a/src/components/dialog-full-screen/components.test-pw.tsx
+++ b/src/components/dialog-full-screen/components.test-pw.tsx
@@ -190,32 +190,43 @@ export const DialogFullScreenBackgroundScrollTestComponent = () => {
   );
 };
 
-export const DialogFullScreenBackgroundScrollWithOtherFocusableContainers = () => {
-  const toast1Ref = useRef(null);
-  const toast2Ref = useRef(null);
-  return (
-    <Form>
-      <DialogFullScreen
-        open
-        onCancel={() => {}}
-        focusableContainers={[toast1Ref, toast2Ref]}
-      >
-        <Textbox label="textbox" />
-        <Box height="2000px" position="relative">
-          <Box height="100px" position="absolute" bottom="0px">
-            I should not be scrolled into view
+export const DialogFullScreenBackgroundScrollWithOtherFocusableContainers =
+  () => {
+    const toast1Ref = useRef(null);
+    const toast2Ref = useRef(null);
+    return (
+      <Form>
+        <DialogFullScreen
+          open
+          onCancel={() => {}}
+          focusableContainers={[toast1Ref, toast2Ref]}
+        >
+          <Textbox label="textbox" />
+          <Box height="2000px" position="relative">
+            <Box height="100px" position="absolute" bottom="0px">
+              I should not be scrolled into view
+            </Box>
           </Box>
-        </Box>
-      </DialogFullScreen>
-      <Toast open onDismiss={() => {}} ref={toast1Ref} targetPortalId="stacked">
-        Toast message 1
-      </Toast>
-      <Toast open onDismiss={() => {}} ref={toast2Ref} targetPortalId="stacked">
-        Toast message 2
-      </Toast>
-    </Form>
-  );
-};
+        </DialogFullScreen>
+        <Toast
+          open
+          onDismiss={() => {}}
+          ref={toast1Ref}
+          targetPortalId="stacked"
+        >
+          Toast message 1
+        </Toast>
+        <Toast
+          open
+          onDismiss={() => {}}
+          ref={toast2Ref}
+          targetPortalId="stacked"
+        >
+          Toast message 2
+        </Toast>
+      </Form>
+    );
+  };
 
 export const WithHelp = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -495,7 +506,7 @@ export const OtherFocusableContainers = () => {
 };
 
 export const DialogFullScreenWithTitleAsReactComponent = (
-  props: Partial<DialogFullScreenProps>
+  props: Partial<DialogFullScreenProps>,
 ) => {
   const TitleComponent = () => (
     <div>
@@ -966,7 +977,7 @@ export const DialogFullScreenWithAutoFocusSelect = () => {
 };
 
 export const DialogFSComponentFocusableSelectors = (
-  props: Partial<DialogFullScreenProps>
+  props: Partial<DialogFullScreenProps>,
 ) => {
   const [setIsDialogOpen] = React.useState(false);
   const [isToastOpen, setIsToastOpen] = React.useState(false);
diff --git a/src/components/dialog-full-screen/dialog-full-screen.component.tsx b/src/components/dialog-full-screen/dialog-full-screen.component.tsx
index 8c621aea37..a4eede2630 100644
--- a/src/components/dialog-full-screen/dialog-full-screen.component.tsx
+++ b/src/components/dialog-full-screen/dialog-full-screen.component.tsx
@@ -45,7 +45,7 @@ export interface DialogFullScreenProps extends ModalProps {
   bespokeFocusTrap?: (
     ev: KeyboardEvent,
     firstElement?: HTMLElement,
-    lastElement?: HTMLElement
+    lastElement?: HTMLElement,
   ) => void;
   /** Container for components to be displayed in the header */
   headerChildren?: React.ReactNode;
@@ -69,7 +69,7 @@ export interface DialogFullScreenProps extends ModalProps {
   focusableSelectors?: string;
   /** A custom close event handler */
   onCancel?: (
-    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>
+    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>,
   ) => void;
 }
 
diff --git a/src/components/dialog-full-screen/dialog-full-screen.pw.tsx b/src/components/dialog-full-screen/dialog-full-screen.pw.tsx
index 2080fcebc7..58ad019c8d 100644
--- a/src/components/dialog-full-screen/dialog-full-screen.pw.tsx
+++ b/src/components/dialog-full-screen/dialog-full-screen.pw.tsx
@@ -43,7 +43,7 @@ const iconIsFocused = async (page: Page, whichIcon: number) => {
   const closeIcon = getDataElementByValue(page, "close").nth(whichIcon);
   await expect(closeIcon).toHaveCSS(
     "box-shadow",
-    "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+    "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
   );
   await expect(closeIcon).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
 };
@@ -83,11 +83,11 @@ test.describe("render DialogFullScreen component and check properties", () => {
         <DialogFullScreenComponent
           title="Dialog Full Screen Title"
           subtitle={subtitle}
-        />
+        />,
       );
 
       await expect(getDataElementByValue(page, "subtitle")).toHaveText(
-        subtitle
+        subtitle,
       );
     });
   });
@@ -98,11 +98,11 @@ test.describe("render DialogFullScreen component and check properties", () => {
       page,
     }) => {
       await mount(
-        <DialogFullScreenComponent>{childrenValue}</DialogFullScreenComponent>
+        <DialogFullScreenComponent>{childrenValue}</DialogFullScreenComponent>,
       );
 
       await expect(getDataElementByValue(page, "form-content")).toContainText(
-        childrenValue
+        childrenValue,
       );
     });
   });
@@ -138,7 +138,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
         onCancel={() => {
           called = true;
         }}
-      />
+      />,
     );
 
     const closeIcon = getDataElementByValue(page, "close").first();
@@ -199,7 +199,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
     await expect(fullDialog).not.toHaveAttribute("aria-modal", "true");
     await expect(page.getByRole("dialog")).toHaveAttribute(
       "aria-modal",
-      "true"
+      "true",
     );
   });
 
@@ -226,7 +226,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
     const closeIcon = getDataElementByValue(page, "close").nth(2);
     await expect(closeIcon).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(closeIcon).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
   });
@@ -245,7 +245,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
     await expect(fullDialog).not.toHaveAttribute("aria-modal", "true");
     await expect(page.getByRole("dialog")).toHaveAttribute(
       "aria-modal",
-      "true"
+      "true",
     );
   });
 
@@ -257,7 +257,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
 
     await expect(page.getByRole("dialog")).toHaveAttribute(
       "aria-describedby",
-      testAria
+      testAria,
     );
   });
 
@@ -266,7 +266,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
 
     await expect(page.getByRole("dialog")).toHaveAttribute(
       "aria-label",
-      testAria
+      testAria,
     );
   });
 
@@ -275,12 +275,12 @@ test.describe("render DialogFullScreen component and check properties", () => {
     page,
   }) => {
     await mount(
-      <DialogFullScreenWithTitleAsReactComponent aria-labelledby={testAria} />
+      <DialogFullScreenWithTitleAsReactComponent aria-labelledby={testAria} />,
     );
 
     await expect(page.getByRole("dialog")).toHaveAttribute(
       "aria-labelledby",
-      testAria
+      testAria,
     );
   });
 
@@ -295,11 +295,11 @@ test.describe("render DialogFullScreen component and check properties", () => {
       .filter({ hasText: "This should be focused first now" });
     await expect(focusedButton).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(focusedButton).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -390,7 +390,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
       .filter({ hasText: "This should be focused first now" });
     await expect(focusedButton).not.toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     const hasFocus = await focusedButton.focus();
     expect(hasFocus).toBeFalsy();
@@ -401,7 +401,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
       <DialogFullScreenComponent
         title="Sample DialogFullScreen"
         help="Some help text"
-      />
+      />,
     );
 
     const helpIcon = getDataElementByValue(page, "question");
@@ -413,7 +413,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
     await mount(<DialogFullScreenComponent role="dialog" />);
 
     await expect(
-      getDataElementByValue(page, "dialog-full-screen")
+      getDataElementByValue(page, "dialog-full-screen"),
     ).toHaveAttribute("role", "dialog");
   });
 
@@ -457,7 +457,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
       <DialogFullScreenComponent
         title="Dialog Full Screen Title"
         disableContentPadding
-      />
+      />,
     );
 
     const content = getDataElementByValue(page, "content");
@@ -475,7 +475,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
     const closeIcon = getDataElementByValue(page, "close").nth(1);
     await closeIcon.click();
     await expect(getDataElementByValue(page, "dialog-full-screen")).toHaveCount(
-      1
+      1,
     );
   });
 
@@ -694,7 +694,7 @@ test.describe("Accessibility for DialogFullScreen", () => {
       .filter({ hasText: "Open DialogFullScreen" });
     await openButton.click();
     await expect(getDataElementByValue(page, "title")).toHaveText(
-      "Dialog Title"
+      "Dialog Title",
     );
 
     // color-contrast ignored until we can investigate and fix
@@ -713,7 +713,7 @@ test.describe("test background scroll when tabbing", () => {
     await continuePressingTAB(page, 3);
     await iconIsFocused(page, 0);
     await expect(
-      page.getByText("I should not be scrolled into view")
+      page.getByText("I should not be scrolled into view"),
     ).not.toBeInViewport();
   });
 
@@ -728,7 +728,7 @@ test.describe("test background scroll when tabbing", () => {
     await continuePressingSHIFTTAB(page, 2);
     await iconIsFocused(page, 0);
     await expect(
-      page.getByText("I should not be scrolled into view")
+      page.getByText("I should not be scrolled into view"),
     ).not.toBeInViewport();
   });
 
@@ -738,7 +738,7 @@ test.describe("test background scroll when tabbing", () => {
     page,
   }) => {
     await mount(
-      <DialogFullScreenBackgroundScrollWithOtherFocusableContainers />
+      <DialogFullScreenBackgroundScrollWithOtherFocusableContainers />,
     );
 
     await page.waitForTimeout(500);
@@ -747,7 +747,7 @@ test.describe("test background scroll when tabbing", () => {
     await continuePressingTAB(page, 5);
     await iconIsFocused(page, 0);
     await expect(
-      page.getByText("I should not be scrolled into view")
+      page.getByText("I should not be scrolled into view"),
     ).not.toBeInViewport();
   });
 
@@ -757,14 +757,14 @@ test.describe("test background scroll when tabbing", () => {
     page,
   }) => {
     await mount(
-      <DialogFullScreenBackgroundScrollWithOtherFocusableContainers />
+      <DialogFullScreenBackgroundScrollWithOtherFocusableContainers />,
     );
 
     await page.waitForTimeout(500);
     await continuePressingSHIFTTAB(page, 8);
     await iconIsFocused(page, 0);
     await expect(
-      page.getByText("I should not be scrolled into view")
+      page.getByText("I should not be scrolled into view"),
     ).not.toBeInViewport();
   });
 });
diff --git a/src/components/dialog-full-screen/dialog-full-screen.test.tsx b/src/components/dialog-full-screen/dialog-full-screen.test.tsx
index f25f95a930..600d93893d 100644
--- a/src/components/dialog-full-screen/dialog-full-screen.test.tsx
+++ b/src/components/dialog-full-screen/dialog-full-screen.test.tsx
@@ -37,7 +37,7 @@ test("dialog element has aria-modal attribute set to true when open", () => {
   render(
     <CarbonProvider>
       <DialogFullScreen open />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
@@ -47,7 +47,7 @@ test("open dialog element does not have aria-modal attribute set to true when ro
   render(
     <CarbonProvider>
       <DialogFullScreen open role="main" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByRole("main")).not.toHaveAttribute("aria-modal");
@@ -61,7 +61,7 @@ test("the contentRef prop is forwarded to the dialog content", () => {
   render(<DialogFullScreen open contentRef={mockRef} />);
 
   expect(mockRef?.current).toBe(
-    screen.getByTestId("dialog-full-screen-content")
+    screen.getByTestId("dialog-full-screen-content"),
   );
 });
 
@@ -69,7 +69,7 @@ test("the dialog container should be focused when the dialog opens", async () =>
   render(
     <DialogFullScreen open>
       <input type="text" />
-    </DialogFullScreen>
+    </DialogFullScreen>,
   );
 
   await waitFor(() => {
@@ -82,7 +82,7 @@ test("the dialog container should not be focused when the dialog opens if the di
   render(
     <DialogFullScreen open disableAutoFocus>
       <input type="text" />
-    </DialogFullScreen>
+    </DialogFullScreen>,
   );
 
   // need to use fake timers here rather than waitFor to ensure that the test fails if the disableAutoFocus functionality
@@ -107,7 +107,7 @@ test("when the focusFirstElement prop is passed, the corresponding element shoul
         should be focused
         <input type="text" ref={inputRef} id="should-be-focused" />
       </label>
-    </DialogFullScreen>
+    </DialogFullScreen>,
   );
 
   await waitFor(() => {
@@ -123,7 +123,7 @@ test("all dialog children are rendered", () => {
       </button>
       <div data-role="second-child">second child</div>
       <p data-role="third-child">third child</p>
-    </DialogFullScreen>
+    </DialogFullScreen>,
   );
 
   expect(screen.getByTestId("first-child")).toBeVisible();
@@ -155,7 +155,7 @@ test("renders the `title` prop in a level 1 heading when passed as a string", ()
   render(<DialogFullScreen open title="my title" />);
 
   expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-    "my title"
+    "my title",
   );
 });
 
@@ -164,11 +164,11 @@ test("renders the specified element when the `title` prop is passed as a  React
     <DialogFullScreen
       open
       title={<div data-role="custom-title-element">my title</div>}
-    />
+    />,
   );
 
   expect(screen.getByTestId("custom-title-element")).toHaveTextContent(
-    "my title"
+    "my title",
   );
 });
 
@@ -188,7 +188,7 @@ test("no close button is rendered if the `showCloseIcon` prop is set to `false`"
   render(<DialogFullScreen open onCancel={() => {}} showCloseIcon={false} />);
 
   expect(
-    screen.queryByRole("button", { name: "Close" })
+    screen.queryByRole("button", { name: "Close" }),
   ).not.toBeInTheDocument();
 });
 
@@ -196,7 +196,7 @@ test("no close button is rendered if the `onCancel` callback prop is not provide
   render(<DialogFullScreen open showCloseIcon />);
 
   expect(
-    screen.queryByRole("button", { name: "Close" })
+    screen.queryByRole("button", { name: "Close" }),
   ).not.toBeInTheDocument();
 });
 
@@ -215,7 +215,7 @@ test("allows custom data props to be passed to the close button", () => {
         "data-element": "foo",
         "data-role": "bar",
       }}
-    />
+    />,
   );
 
   const closeButton = screen.getByRole("button", { name: "Close" });
@@ -228,10 +228,10 @@ test("renders the element given in the `headerChildren` prop", () => {
     <DialogFullScreen
       open
       headerChildren={<a href="/foo">link as header child</a>}
-    />
+    />,
   );
   expect(
-    screen.getByRole("link", { name: "link as header child" })
+    screen.getByRole("link", { name: "link as header child" }),
   ).toBeVisible();
 });
 
@@ -240,7 +240,7 @@ test("padding is removed from the content when the `disableContentPadding` prop
   render(
     <DialogFullScreen open disableContentPadding>
       <div>test content</div>
-    </DialogFullScreen>
+    </DialogFullScreen>,
   );
 
   const content = screen.getByTestId("dialog-full-screen-content");
@@ -307,12 +307,12 @@ test("when a Form child does not have a sticky footer, overflow styling is set o
   render(
     <DialogFullScreen open>
       <Form />
-    </DialogFullScreen>
+    </DialogFullScreen>,
   );
 
   expect(screen.getByTestId("dialog-full-screen-content")).toHaveStyleRule(
     "overflow-y",
-    "auto"
+    "auto",
   );
 });
 
@@ -333,7 +333,7 @@ test("when the `title` prop is a React element and the `aria-labelledby` prop is
     <>
       <h2 id="test-id">custom title</h2>
       <DialogFullScreen open title={<h2>test</h2>} aria-labelledby="test-id" />
-    </>
+    </>,
   );
 
   expect(screen.getByRole("dialog")).toHaveAccessibleName("custom title");
@@ -349,11 +349,11 @@ test("when the `subtitle` prop is a React element and the `aria-describedby` pro
         subtitle={<p>custom subtitle</p>}
         aria-describedby="test-id"
       />
-    </>
+    </>,
   );
 
   expect(screen.getByRole("dialog")).toHaveAccessibleDescription(
-    "custom description"
+    "custom description",
   );
 });
 
@@ -361,7 +361,7 @@ test("the role prop is passed to the dialog element", () => {
   render(
     <DialogFullScreen open role="alert">
       dialog content
-    </DialogFullScreen>
+    </DialogFullScreen>,
   );
 
   expect(screen.getByRole("alert")).toHaveTextContent("dialog content");
diff --git a/src/components/dialog/components.test-pw.tsx b/src/components/dialog/components.test-pw.tsx
index 54d0e15cda..770acd2c9e 100644
--- a/src/components/dialog/components.test-pw.tsx
+++ b/src/components/dialog/components.test-pw.tsx
@@ -40,7 +40,7 @@ export const DialogComponent = (props: Partial<DialogProps>) => {
 };
 
 export const DialogWithFirstFocusableElement = (
-  props: Partial<DialogProps>
+  props: Partial<DialogProps>,
 ) => {
   const ref = useRef<HTMLButtonElement>(null);
 
@@ -165,7 +165,7 @@ export const DialogWithAutoFocusSelect = () => {
 };
 
 export const DialogComponentFocusableSelectors = (
-  props: Partial<DialogProps>
+  props: Partial<DialogProps>,
 ) => {
   const [setIsDialogOpen] = React.useState(false);
   const [isToastOpen, setIsToastOpen] = React.useState(false);
diff --git a/src/components/dialog/dialog-test.stories.tsx b/src/components/dialog/dialog-test.stories.tsx
index a7bf2595ca..83ddc4960c 100644
--- a/src/components/dialog/dialog-test.stories.tsx
+++ b/src/components/dialog/dialog-test.stories.tsx
@@ -57,7 +57,7 @@ export const Default = ({
   const [date, setDate] = useState("01/06/2020");
   const [isOpen, setIsOpen] = useState(true);
   const handleCancel = (
-    evt: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
+    evt: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>,
   ) => {
     setIsOpen(false);
     action("cancel")(evt);
@@ -191,7 +191,7 @@ Default.args = {
 type StoryType = StoryObj<typeof Dialog>;
 
 export const WithTwoDifferentNodes: StoryType = (
-  props: Partial<DialogProps>
+  props: Partial<DialogProps>,
 ) => {
   const [isOpen, setIsOpen] = useState(true);
   return (
diff --git a/src/components/dialog/dialog.component.tsx b/src/components/dialog/dialog.component.tsx
index 33719685b1..2869f68c5c 100644
--- a/src/components/dialog/dialog.component.tsx
+++ b/src/components/dialog/dialog.component.tsx
@@ -20,7 +20,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;
-type PaddingValues = typeof PADDING_VALUES[number];
+type PaddingValues = (typeof PADDING_VALUES)[number];
 
 export interface ContentPaddingInterface {
   p?: PaddingValues;
@@ -56,7 +56,7 @@ export interface DialogProps extends ModalProps, TagProps {
   bespokeFocusTrap?: (
     ev: KeyboardEvent,
     firstElement?: HTMLElement,
-    lastElement?: HTMLElement
+    lastElement?: HTMLElement,
   ) => void;
   /** Optional reference to an element meant to be focused on open */
   focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
@@ -68,7 +68,7 @@ export interface DialogProps extends ModalProps, TagProps {
   help?: string;
   /** A custom close event handler */
   onCancel?: (
-    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>
+    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>,
   ) => void;
   /** Determines if the close icon is shown */
   showCloseIcon?: boolean;
@@ -125,7 +125,7 @@ export const Dialog = forwardRef<DialogHandle, DialogProps>(
       closeButtonDataProps,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const locale = useLocale();
 
@@ -143,7 +143,7 @@ export const Dialog = forwardRef<DialogHandle, DialogProps>(
           containerRef.current?.focus();
         },
       }),
-      []
+      [],
     );
 
     const closeIcon = showCloseIcon && onCancel && (
@@ -249,7 +249,7 @@ export const Dialog = forwardRef<DialogHandle, DialogProps>(
         </FocusTrap>
       </Modal>
     );
-  }
+  },
 );
 
 export default Dialog;
diff --git a/src/components/dialog/dialog.config.ts b/src/components/dialog/dialog.config.ts
index 9205b82ba5..575a0eccc6 100644
--- a/src/components/dialog/dialog.config.ts
+++ b/src/components/dialog/dialog.config.ts
@@ -10,4 +10,4 @@ export const DIALOG_SIZES = [
   "maximise",
 ] as const;
 
-export type DialogSizes = typeof DIALOG_SIZES[number];
+export type DialogSizes = (typeof DIALOG_SIZES)[number];
diff --git a/src/components/dialog/dialog.pw.tsx b/src/components/dialog/dialog.pw.tsx
index fb02cde2b6..1f056ebf91 100644
--- a/src/components/dialog/dialog.pw.tsx
+++ b/src/components/dialog/dialog.pw.tsx
@@ -53,7 +53,7 @@ test.describe("Testing Dialog component properties", () => {
     await mount(<DialogComponent height="1200px" />);
 
     const actualDialogHeight = parseInt(
-      await getStyle(page.getByRole("dialog"), "height")
+      await getStyle(page.getByRole("dialog"), "height"),
     );
 
     expect(actualDialogHeight).toBeLessThanOrEqual(1000);
@@ -76,7 +76,7 @@ test.describe("Testing Dialog component properties", () => {
       page,
     }) => {
       await mount(
-        <DialogComponent title="Sample dialog" subtitle={subtitle} />
+        <DialogComponent title="Sample dialog" subtitle={subtitle} />,
       );
 
       await expect(page.getByText(subtitle)).toBeAttached();
@@ -160,7 +160,7 @@ test.describe("Testing Dialog component properties", () => {
         onCancel={() => {
           called = true;
         }}
-      />
+      />,
     );
 
     await page.getByLabel("Close").click();
@@ -186,7 +186,7 @@ test.describe("Testing Dialog component properties", () => {
 
     await expect(page.getByRole("dialog")).toHaveAttribute(
       "aria-label",
-      "aria label for dialog"
+      "aria label for dialog",
     );
   });
 
@@ -198,7 +198,7 @@ test.describe("Testing Dialog component properties", () => {
 
     await expect(page.getByRole("dialog")).toHaveAttribute(
       "aria-describedby",
-      "aria description"
+      "aria description",
     );
   });
 
@@ -207,12 +207,12 @@ test.describe("Testing Dialog component properties", () => {
     page,
   }) => {
     await mount(
-      <DialogComponent title={undefined} aria-labelledby="label-element-id" />
+      <DialogComponent title={undefined} aria-labelledby="label-element-id" />,
     );
 
     await expect(page.getByRole("dialog")).toHaveAttribute(
       "aria-labelledby",
-      "label-element-id"
+      "label-element-id",
     );
   });
 
@@ -230,7 +230,7 @@ test.describe("Testing Dialog component properties", () => {
     page,
   }) => {
     await mount(
-      <DialogComponent title="Sample Dialog" help="Some help text" />
+      <DialogComponent title="Sample Dialog" help="Some help text" />,
     );
 
     const helpIcon = page.getByLabel("help");
@@ -246,7 +246,7 @@ test.describe("Testing Dialog component properties", () => {
     await mount(<DialogWithFirstFocusableElement />);
 
     await expect(
-      page.getByRole("button").filter({ hasText: "Press me" })
+      page.getByRole("button").filter({ hasText: "Press me" }),
     ).toBeFocused();
   });
 
@@ -329,7 +329,7 @@ test.describe("Testing Dialog component properties", () => {
     await mount(<DialogWithFirstFocusableElement disableAutoFocus />);
 
     await expect(
-      page.getByRole("button").filter({ hasText: "Press me" })
+      page.getByRole("button").filter({ hasText: "Press me" }),
     ).not.toBeFocused();
   });
 
@@ -411,7 +411,7 @@ test.describe("Testing Dialog component properties", () => {
 
     await expect(closeButton).toBeFocused();
     await expect(
-      page.getByText("I should not be scrolled into view")
+      page.getByText("I should not be scrolled into view"),
     ).not.toBeInViewport();
   });
 
@@ -432,7 +432,7 @@ test.describe("Testing Dialog component properties", () => {
 
     await expect(closeButton).toBeFocused();
     await expect(
-      page.getByText("I should not be scrolled into view")
+      page.getByText("I should not be scrolled into view"),
     ).not.toBeInViewport();
   });
 
@@ -478,110 +478,107 @@ test.describe("Testing Dialog component properties", () => {
   });
 });
 
-test.describe(
-  "when there is a button inside Dialog, which opens a Toast",
-  () => {
-    // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
-    test.skip("clicking button moves focus out of Dialog to the newly-opened Toast", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DialogWithToast />);
+test.describe("when there is a button inside Dialog, which opens a Toast", () => {
+  // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
+  test.skip("clicking button moves focus out of Dialog to the newly-opened Toast", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogWithToast />);
 
-      const openToastButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Toast" });
-      await page.waitForTimeout(250);
-      await openToastButton.click();
+    const openToastButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Toast" });
+    await page.waitForTimeout(250);
+    await openToastButton.click();
 
-      const toast = toastComponent(page);
-      await waitForAnimationEnd(toast);
-      await expect(toast).toBeFocused();
-    });
+    const toast = toastComponent(page);
+    await waitForAnimationEnd(toast);
+    await expect(toast).toBeFocused();
+  });
 
-    // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
-    test.skip("when Toast is opened and focus on it is lost, pressing Tab key traps focus back inside the Dialog", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DialogWithToast />);
+  // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
+  test.skip("when Toast is opened and focus on it is lost, pressing Tab key traps focus back inside the Dialog", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogWithToast />);
 
-      const dialog = page.getByRole("dialog");
-      const openToastButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Toast" });
-      await page.waitForTimeout(250);
-      await openToastButton.click();
+    const dialog = page.getByRole("dialog");
+    const openToastButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Toast" });
+    await page.waitForTimeout(250);
+    await openToastButton.click();
 
-      await page.mouse.click(0, 0); // click outside Toast and Dialog
+    await page.mouse.click(0, 0); // click outside Toast and Dialog
 
-      await dialog.press("Tab");
+    await dialog.press("Tab");
 
-      await expect(openToastButton).toBeFocused();
-    });
+    await expect(openToastButton).toBeFocused();
+  });
 
-    // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
-    test.skip("when tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DialogWithOpenToastsBackgroundScrollTest />);
-
-      const dialog = page.getByRole("dialog");
-      const dialogCloseButton = dialog.getByLabel("Close");
-      const textbox = page.getByLabel("Textbox");
-      const toast1CloseButton = toastComponent(page)
-        .filter({ hasText: "Toast message 1" })
-        .getByLabel("Close");
-      const toast2CloseButton = toastComponent(page)
-        .filter({ hasText: "Toast message 2" })
-        .getByLabel("Close");
-
-      await page.waitForTimeout(250);
-      await dialog.press("Tab");
-      await dialogCloseButton.press("Tab");
-      await textbox.press("Tab");
-      await toast1CloseButton.press("Tab");
-      await toast2CloseButton.press("Tab");
-
-      await expect(dialogCloseButton).toBeFocused();
-      await expect(
-        page.getByText("I should not be scrolled into view")
-      ).not.toBeInViewport();
-    });
+  // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
+  test.skip("when tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogWithOpenToastsBackgroundScrollTest />);
 
-    // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
-    test.skip("when shift tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DialogWithOpenToastsBackgroundScrollTest />);
-
-      const dialog = page.getByRole("dialog");
-      const dialogCloseButton = dialog.getByLabel("Close");
-      const textbox = page.getByLabel("Textbox");
-      const toast1CloseButton = page
-        .locator('[data-component="toast"]')
-        .filter({ hasText: "Toast message 1" })
-        .getByLabel("Close");
-      const toast2CloseButton = page
-        .locator('[data-component="toast"]')
-        .filter({ hasText: "Toast message 2" })
-        .getByLabel("Close");
-
-      await page.waitForTimeout(250);
-      await dialog.press("Shift+Tab");
-      await toast2CloseButton.press("Shift+Tab");
-      await toast1CloseButton.press("Shift+Tab");
-      await textbox.press("Shift+Tab");
-
-      await expect(dialogCloseButton).toBeFocused();
-      await expect(
-        page.getByText("I should not be scrolled into view")
-      ).not.toBeInViewport();
-    });
-  }
-);
+    const dialog = page.getByRole("dialog");
+    const dialogCloseButton = dialog.getByLabel("Close");
+    const textbox = page.getByLabel("Textbox");
+    const toast1CloseButton = toastComponent(page)
+      .filter({ hasText: "Toast message 1" })
+      .getByLabel("Close");
+    const toast2CloseButton = toastComponent(page)
+      .filter({ hasText: "Toast message 2" })
+      .getByLabel("Close");
+
+    await page.waitForTimeout(250);
+    await dialog.press("Tab");
+    await dialogCloseButton.press("Tab");
+    await textbox.press("Tab");
+    await toast1CloseButton.press("Tab");
+    await toast2CloseButton.press("Tab");
+
+    await expect(dialogCloseButton).toBeFocused();
+    await expect(
+      page.getByText("I should not be scrolled into view"),
+    ).not.toBeInViewport();
+  });
+
+  // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
+  test.skip("when shift tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogWithOpenToastsBackgroundScrollTest />);
+
+    const dialog = page.getByRole("dialog");
+    const dialogCloseButton = dialog.getByLabel("Close");
+    const textbox = page.getByLabel("Textbox");
+    const toast1CloseButton = page
+      .locator('[data-component="toast"]')
+      .filter({ hasText: "Toast message 1" })
+      .getByLabel("Close");
+    const toast2CloseButton = page
+      .locator('[data-component="toast"]')
+      .filter({ hasText: "Toast message 2" })
+      .getByLabel("Close");
+
+    await page.waitForTimeout(250);
+    await dialog.press("Shift+Tab");
+    await toast2CloseButton.press("Shift+Tab");
+    await toast1CloseButton.press("Shift+Tab");
+    await textbox.press("Shift+Tab");
+
+    await expect(dialogCloseButton).toBeFocused();
+    await expect(
+      page.getByText("I should not be scrolled into view"),
+    ).not.toBeInViewport();
+  });
+});
 
 test("Dialog should have rounded corners", async ({ mount, page }) => {
   await mount(<DialogComponent />);
@@ -676,193 +673,190 @@ test("dialog re-centres itself in the viewport, when viewport size changes", asy
   expect(boundingBox.y).toBeCloseTo(expectedYPosition);
 });
 
-test.describe(
-  "Accessibility tests for playwright mock components and storybook stories",
-  () => {
-    test("DialogComponent mock component should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DialogComponent />);
+test.describe("Accessibility tests for playwright mock components and storybook stories", () => {
+  test("DialogComponent mock component should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogComponent />);
 
-      await checkAccessibility(page);
-    });
+    await checkAccessibility(page);
+  });
 
-    test("DialogWithFirstFocusableElement mock component should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DialogWithFirstFocusableElement />);
+  test("DialogWithFirstFocusableElement mock component should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogWithFirstFocusableElement />);
 
-      await checkAccessibility(page);
-    });
+    await checkAccessibility(page);
+  });
 
-    test("DialogWithToast mock component should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DialogWithToast />);
+  test("DialogWithToast mock component should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DialogWithToast />);
 
-      await checkAccessibility(page);
-    });
+    await checkAccessibility(page);
+  });
 
-    test("Default story should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DefaultStory />);
+  test("Default story should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DefaultStory />);
 
-      const openDialogButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Dialog" });
-      await openDialogButton.click();
+    const openDialogButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Dialog" });
+    await openDialogButton.click();
 
-      await checkAccessibility(page);
-    });
+    await checkAccessibility(page);
+  });
 
-    test("Editable story should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<Editable />);
+  test("Editable story should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<Editable />);
 
-      const openDialogButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Dialog" });
-      await openDialogButton.click();
+    const openDialogButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Dialog" });
+    await openDialogButton.click();
 
-      await checkAccessibility(page);
+    await checkAccessibility(page);
 
-      const activateAddressButton = page
-        .getByRole("button")
-        .filter({ hasText: "Activate Address" });
-      await activateAddressButton.click();
+    const activateAddressButton = page
+      .getByRole("button")
+      .filter({ hasText: "Activate Address" });
+    await activateAddressButton.click();
 
-      await checkAccessibility(page);
-    });
+    await checkAccessibility(page);
+  });
 
-    test("WithHelp story should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithHelp />);
+  test("WithHelp story should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithHelp />);
 
-      const openDialogButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Dialog" });
-      await openDialogButton.click();
+    const openDialogButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Dialog" });
+    await openDialogButton.click();
 
-      await checkAccessibility(page);
+    await checkAccessibility(page);
 
-      const helpIcon = page.getByLabel("help");
-      await helpIcon.hover();
+    const helpIcon = page.getByLabel("help");
+    await helpIcon.hover();
 
-      await checkAccessibility(page);
-    });
+    await checkAccessibility(page);
+  });
 
-    test("LoadingContent story should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<LoadingContent />);
+  test("LoadingContent story should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<LoadingContent />);
 
-      const openDialogButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Dialog" });
-      await openDialogButton.click();
+    const openDialogButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Dialog" });
+    await openDialogButton.click();
 
-      await checkAccessibility(page);
+    await checkAccessibility(page);
 
-      await page.getByLabel("Textbox 1").waitFor();
-      await checkAccessibility(page);
-    });
+    await page.getByLabel("Textbox 1").waitFor();
+    await checkAccessibility(page);
+  });
 
-    test("FocusingADifferentFirstElement story should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<FocusingADifferentFirstElement />);
+  test("FocusingADifferentFirstElement story should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<FocusingADifferentFirstElement />);
 
-      const focusFirstElementDemoButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Demo using focusFirstElement" });
-      await focusFirstElementDemoButton.click();
+    const focusFirstElementDemoButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Demo using focusFirstElement" });
+    await focusFirstElementDemoButton.click();
 
-      await checkAccessibility(page);
+    await checkAccessibility(page);
 
-      await page.getByRole("dialog").press("Escape");
-      const autoFocusDemoButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Demo using autoFocus" });
-      await autoFocusDemoButton.click();
+    await page.getByRole("dialog").press("Escape");
+    const autoFocusDemoButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Demo using autoFocus" });
+    await autoFocusDemoButton.click();
 
-      await checkAccessibility(page);
-    });
+    await checkAccessibility(page);
+  });
 
-    test("OverridingContentPadding story should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<OverridingContentPadding />);
+  test("OverridingContentPadding story should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<OverridingContentPadding />);
 
-      const openDialogButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Dialog" });
-      await openDialogButton.click();
+    const openDialogButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Dialog" });
+    await openDialogButton.click();
 
-      await checkAccessibility(page);
-    });
+    await checkAccessibility(page);
+  });
 
-    test("OtherFocusableContainers story should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<OtherFocusableContainers />);
-
-      const openDialogButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Dialog" });
-      const firstToastButton = page
-        .getByRole("button")
-        .filter({ hasText: "Show first toast" });
-      const secondToastButton = page
-        .getByRole("button")
-        .filter({ hasText: "Show second toast" });
-
-      await openDialogButton.click();
-      await firstToastButton.click();
-      await secondToastButton.click();
-
-      await checkAccessibility(page);
-    });
+  test("OtherFocusableContainers story should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<OtherFocusableContainers />);
 
-    test("Responsive story should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<Responsive />);
+    const openDialogButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Dialog" });
+    const firstToastButton = page
+      .getByRole("button")
+      .filter({ hasText: "Show first toast" });
+    const secondToastButton = page
+      .getByRole("button")
+      .filter({ hasText: "Show second toast" });
 
-      const openDialogButton = page
-        .getByRole("button")
-        .filter({ hasText: "Open Dialog" });
-      await openDialogButton.click();
+    await openDialogButton.click();
+    await firstToastButton.click();
+    await secondToastButton.click();
 
-      await checkAccessibility(page);
-    });
+    await checkAccessibility(page);
+  });
 
-    test("UsingHandle story should pass accessibility checks", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<UsingHandle />);
+  test("Responsive story should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<Responsive />);
 
-      await page.getByRole("button").filter({ hasText: "Open Dialog" }).click();
+    const openDialogButton = page
+      .getByRole("button")
+      .filter({ hasText: "Open Dialog" });
+    await openDialogButton.click();
 
-      await checkAccessibility(page);
+    await checkAccessibility(page);
+  });
 
-      await page.getByRole("button").filter({ hasText: "Submit" }).click();
+  test("UsingHandle story should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<UsingHandle />);
 
-      await checkAccessibility(page);
-    });
-  }
-);
+    await page.getByRole("button").filter({ hasText: "Open Dialog" }).click();
+
+    await checkAccessibility(page);
+
+    await page.getByRole("button").filter({ hasText: "Submit" }).click();
+
+    await checkAccessibility(page);
+  });
+});
diff --git a/src/components/dialog/dialog.style.ts b/src/components/dialog/dialog.style.ts
index 91dc9923a6..26df0180c3 100644
--- a/src/components/dialog/dialog.style.ts
+++ b/src/components/dialog/dialog.style.ts
@@ -67,10 +67,9 @@ const StyledDialog = styled.div<StyledDialogProps & ContentPaddingInterface>`
     outline: none;
   }
 
-  ${({ backgroundColor }) =>
-    css`
-      background-color: ${backgroundColor};
-    `}
+  ${({ backgroundColor }) => css`
+    background-color: ${backgroundColor};
+  `}
 
   ${({ dialogHeight }) =>
     dialogHeight &&
diff --git a/src/components/dialog/dialog.test.tsx b/src/components/dialog/dialog.test.tsx
index 955baafdee..9c74f7165b 100644
--- a/src/components/dialog/dialog.test.tsx
+++ b/src/components/dialog/dialog.test.tsx
@@ -20,7 +20,7 @@ test("dialog element has aria-modal attribute set to true when open", () => {
   render(
     <CarbonProvider>
       <Dialog open title="My dialog" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
 });
@@ -78,7 +78,7 @@ test("aria-labelledby prop is used as dialog's accessible name when passed", ()
       open
       title={<h1 id="title-id">Custom title</h1>}
       aria-labelledby="title-id"
-    />
+    />,
   );
   expect(screen.getByRole("dialog")).toHaveAccessibleName("Custom title");
 });
@@ -90,10 +90,10 @@ test("aria-describedby prop is used as dialog's accessible description when pass
       title="My dialog"
       subtitle={<h2 id="subtitle-id">Custom subtitle</h2>}
       aria-describedby="subtitle-id"
-    />
+    />,
   );
   expect(screen.getByRole("dialog")).toHaveAccessibleDescription(
-    "Custom subtitle"
+    "Custom subtitle",
   );
 });
 
@@ -116,7 +116,7 @@ test("close button is displayed when onCancel prop is passed", () => {
 test("close button is not rendered when showCloseIcon prop is false", () => {
   render(<Dialog open onCancel={() => {}} showCloseIcon={false} />);
   expect(
-    screen.queryByRole("button", { name: /Close/i })
+    screen.queryByRole("button", { name: /Close/i }),
   ).not.toBeInTheDocument();
 });
 
@@ -142,7 +142,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={onCancel} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const closeButton = screen.getByRole("button", { name: /Close/i });
@@ -158,7 +158,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={onCancel} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     await user.keyboard("{Escape}");
@@ -173,7 +173,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={onCancel} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const closeButton = screen.getByRole("button", { name: /Close/i });
@@ -190,7 +190,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={onCancel} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const closeButton = screen.getByRole("button", { name: /Close/i });
@@ -208,7 +208,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={onCancel} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const closeButton = screen.getByRole("button", { name: /Close/i });
@@ -234,7 +234,7 @@ test("root container is refocused when the focus method of the component's ref h
   render(
     <CarbonProvider>
       <MockApp />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const button = screen.getByRole("button", { name: /Refocus dialog/i });
@@ -251,7 +251,7 @@ test("first focusable element is not focused when disableAutoFocus prop is passe
       <Dialog open title="My dialog" disableAutoFocus>
         <button type="button">Focus me</button>
       </Dialog>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const button = screen.getByRole("button", { name: /Focus me/i });
@@ -289,7 +289,7 @@ test("close button has correct data-* props, when the closeButtonDataProps prop
         "data-element": "foo",
         "data-role": "bar",
       }}
-    />
+    />,
   );
 
   const closeButton = screen.getByRole("button", { name: /Close/i });
@@ -331,7 +331,7 @@ test("prevents content from overflowing", () => {
   render(
     <Dialog open title="My dialog">
       Content
-    </Dialog>
+    </Dialog>,
   );
   expect(screen.getByTestId("dialog-content")).toHaveStyle("overflow-y: auto");
 });
@@ -340,7 +340,7 @@ test("no padding is rendered around dialog content, when zero padding is specifi
   render(
     <Dialog open title="My dialog" contentPadding={{ p: 0 }}>
       Inner content
-    </Dialog>
+    </Dialog>,
   );
 
   const content = screen.getByTestId("dialog-content");
@@ -367,7 +367,7 @@ test("background scroll remains disabled when returning to outer dialog after cl
   render(
     <CarbonProvider>
       <MockApp />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   expect(screen.getByRole("dialog")).toHaveAccessibleName("Inner dialog");
 
diff --git a/src/components/dismissible-box/components.test-pw.tsx b/src/components/dismissible-box/components.test-pw.tsx
index e032c24e6a..c4c05e3ff8 100644
--- a/src/components/dismissible-box/components.test-pw.tsx
+++ b/src/components/dismissible-box/components.test-pw.tsx
@@ -61,7 +61,7 @@ export const DefaultDarkVariant = (props: Partial<DismissibleBoxProps>) => {
 };
 
 export const WithNoLeftBorderHighlight = (
-  props: Partial<DismissibleBoxProps>
+  props: Partial<DismissibleBoxProps>,
 ) => {
   return (
     <Box p={2}>
diff --git a/src/components/dismissible-box/dismissable-box.test.tsx b/src/components/dismissible-box/dismissable-box.test.tsx
index 91ced90973..88dc463e27 100644
--- a/src/components/dismissible-box/dismissable-box.test.tsx
+++ b/src/components/dismissible-box/dismissable-box.test.tsx
@@ -14,7 +14,7 @@ test("calls the `onClose` callback when the close button is clicked", async () =
   await user.click(closeButton);
 
   expect(onCloseMock).toHaveBeenCalledWith(
-    expect.objectContaining({ type: "click" })
+    expect.objectContaining({ type: "click" }),
   );
 });
 
@@ -26,7 +26,7 @@ test("allows custom data props to be assigned to the close button", () => {
         "data-element": "bang",
         "data-role": "wallop",
       }}
-    />
+    />,
   );
 
   const closeButton = screen.getByRole("button", { name: "Close" });
@@ -42,13 +42,13 @@ test("applies the expected styles when `variant` is dark", () => {
       onClose={() => {}}
       variant="dark"
       data-role="dismissible-box"
-    />
+    />,
   );
 
   const dismissibleBoxElement = screen.getByTestId("dismissible-box");
 
   expect(dismissibleBoxElement).toHaveStyleRule(
     "background-color",
-    "var(--colorsUtilityMajor050)"
+    "var(--colorsUtilityMajor050)",
   );
 });
diff --git a/src/components/dismissible-box/dismissible-box.component.tsx b/src/components/dismissible-box/dismissible-box.component.tsx
index a5ccaec625..28230ab895 100644
--- a/src/components/dismissible-box/dismissible-box.component.tsx
+++ b/src/components/dismissible-box/dismissible-box.component.tsx
@@ -24,7 +24,7 @@ export interface DismissibleBoxProps
   onClose: (
     e:
       | React.KeyboardEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => void;
   /** Use this prop to override the default width. Numbers from 0-1 are converted to percentage widths. Numbers greater
    * than 1 are converted to pixel values. String values are passed as raw CSS values. And arrays are converted to
diff --git a/src/components/dismissible-box/dismissible-box.pw.tsx b/src/components/dismissible-box/dismissible-box.pw.tsx
index 2f0c716eea..add50ee7d8 100644
--- a/src/components/dismissible-box/dismissible-box.pw.tsx
+++ b/src/components/dismissible-box/dismissible-box.pw.tsx
@@ -20,26 +20,24 @@ import {
 } from "../../../playwright/support/helper";
 
 test.describe("DismissibleBox component", () => {
-  ([
-    [true, "rgba(0, 0, 0, 0.9)"],
-    [false, "rgb(204, 214, 219)"],
-  ] as [DismissibleBoxProps["hasBorderLeftHighlight"], string][]).forEach(
-    ([boolValue, color]) => {
-      test(`should apply correct styling when hasBorderLeftHighlight prop set to ${boolValue}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <DefaultDismissibleBox hasBorderLeftHighlight={boolValue} />
-        );
-
-        await expect(dismissibleBoxDataComponent(page)).toHaveCSS(
-          "border-left-color",
-          color
-        );
-      });
-    }
-  );
+  (
+    [
+      [true, "rgba(0, 0, 0, 0.9)"],
+      [false, "rgb(204, 214, 219)"],
+    ] as [DismissibleBoxProps["hasBorderLeftHighlight"], string][]
+  ).forEach(([boolValue, color]) => {
+    test(`should apply correct styling when hasBorderLeftHighlight prop set to ${boolValue}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DefaultDismissibleBox hasBorderLeftHighlight={boolValue} />);
+
+      await expect(dismissibleBoxDataComponent(page)).toHaveCSS(
+        "border-left-color",
+        color,
+      );
+    });
+  });
 
   [150, 350].forEach((width) => {
     test(`should apply correct width to component when width prop set to ${width}`, async ({
@@ -50,69 +48,69 @@ test.describe("DismissibleBox component", () => {
 
       await expect(dismissibleBoxDataComponent(page)).toHaveAttribute(
         "width",
-        `${width}px`
+        `${width}px`,
       );
 
       await assertCssValueIsApproximately(
         dismissibleBoxDataComponent(page),
         "width",
-        width
+        width,
+      );
+    });
+  });
+
+  (
+    [
+      ["light", "rgb(255, 255, 255)"],
+      ["dark", "rgb(230, 235, 237)"],
+    ] as [DismissibleBoxProps["variant"], string][]
+  ).forEach(([variant, color]) => {
+    test(`should apply correct styling to component with variant prop set to ${variant}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DefaultDismissibleBox variant={variant} />);
+
+      await expect(dismissibleBoxDataComponent(page)).toHaveCSS(
+        "background-color",
+        color,
       );
     });
   });
 
-  ([
-    ["light", "rgb(255, 255, 255)"],
-    ["dark", "rgb(230, 235, 237)"],
-  ] as [DismissibleBoxProps["variant"], string][]).forEach(
-    ([variant, color]) => {
-      test(`should apply correct styling to component with variant prop set to ${variant}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DefaultDismissibleBox variant={variant} />);
-
-        await expect(dismissibleBoxDataComponent(page)).toHaveCSS(
-          "background-color",
-          color
-        );
-      });
-    }
-  );
-
-  ([
-    [undefined, "8px"],
-    ["borderRadius000", "0px"],
-    ["borderRadius025", "2px"],
-    ["borderRadius050", "4px"],
-    ["borderRadius200", "16px"],
-    ["borderRadius400", "32px"],
-  ] as [DismissibleBoxProps["borderRadius"], string][]).forEach(
-    ([borderRadius, expected]) => {
-      test(`applies the expected border radius when ${borderRadius} passed to borderRadius prop`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DefaultDismissibleBox borderRadius={borderRadius} />);
-        await expect(dismissibleBoxDataComponent(page)).toHaveCSS(
-          "border-radius",
-          expected
-        );
-      });
-    }
-  );
+  (
+    [
+      [undefined, "8px"],
+      ["borderRadius000", "0px"],
+      ["borderRadius025", "2px"],
+      ["borderRadius050", "4px"],
+      ["borderRadius200", "16px"],
+      ["borderRadius400", "32px"],
+    ] as [DismissibleBoxProps["borderRadius"], string][]
+  ).forEach(([borderRadius, expected]) => {
+    test(`applies the expected border radius when ${borderRadius} passed to borderRadius prop`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DefaultDismissibleBox borderRadius={borderRadius} />);
+      await expect(dismissibleBoxDataComponent(page)).toHaveCSS(
+        "border-radius",
+        expected,
+      );
+    });
+  });
 
   test("should have the expected data-role attribute on the IconButton, when a custom data-role is provided", async ({
     mount,
     page,
   }) => {
     await mount(
-      <DefaultDismissibleBox closeButtonDataProps={{ "data-role": "Foo" }} />
+      <DefaultDismissibleBox closeButtonDataProps={{ "data-role": "Foo" }} />,
     );
 
     const closeButton = getDataElementByValue(
       page,
-      "close-button-wrapper"
+      "close-button-wrapper",
     ).locator("button");
 
     await expect(closeButton).toHaveAttribute("data-role", "Foo");
@@ -123,12 +121,14 @@ test.describe("DismissibleBox component", () => {
     page,
   }) => {
     await mount(
-      <DefaultDismissibleBox closeButtonDataProps={{ "data-element": "Bar" }} />
+      <DefaultDismissibleBox
+        closeButtonDataProps={{ "data-element": "Bar" }}
+      />,
     );
 
     const closeButton = getDataElementByValue(
       page,
-      "close-button-wrapper"
+      "close-button-wrapper",
     ).locator("button");
 
     await expect(closeButton).toHaveAttribute("data-element", "Bar");
@@ -146,7 +146,7 @@ test.describe("Check events", () => {
         onClose={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await icon(page).click();
@@ -165,7 +165,7 @@ test.describe("Check events", () => {
           onClose={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       await page.keyboard.press("Tab");
diff --git a/src/components/draggable/draggable-container.component.tsx b/src/components/draggable/draggable-container.component.tsx
index a9e83b0e6d..d6cd4d533d 100644
--- a/src/components/draggable/draggable-container.component.tsx
+++ b/src/components/draggable/draggable-container.component.tsx
@@ -15,7 +15,7 @@ export interface DraggableContainerProps
   /** Callback fired when order is changed */
   getOrder?: (
     draggableItemIds?: (string | number | undefined)[],
-    movedItemId?: string | number | undefined
+    movedItemId?: string | number | undefined,
   ) => void;
   /**
    * The content of the component
@@ -33,7 +33,7 @@ const DraggableContainer = ({
   ...rest
 }: DraggableContainerProps): JSX.Element => {
   const [draggableItems, setDraggableItems] = useState(
-    React.Children.toArray(children)
+    React.Children.toArray(children),
   );
 
   const hasProperChildren = useMemo(
@@ -42,15 +42,15 @@ const DraggableContainer = ({
         (child) =>
           React.isValidElement(child) &&
           (child.type as React.FunctionComponent).displayName ===
-            DraggableItem.displayName
+            DraggableItem.displayName,
       ),
-    [children]
+    [children],
   );
 
   // `<DraggableItem />` is required to make `Draggable` work
   invariant(
     hasProperChildren,
-    `\`${DraggableContainer.displayName}\` only accepts children of type \`${DraggableItem.displayName}\`.`
+    `\`${DraggableContainer.displayName}\` only accepts children of type \`${DraggableItem.displayName}\`.`,
   );
 
   const isFirstRender = useRef(true);
@@ -92,7 +92,7 @@ const DraggableContainer = ({
     }
 
     const draggableItemIds = draggableItems.map(
-      (draggableItem) => (draggableItem as { props: { id: string } }).props.id
+      (draggableItem) => (draggableItem as { props: { id: string } }).props.id,
     );
 
     getOrder(draggableItemIds, item);
@@ -118,7 +118,7 @@ const DraggableContainer = ({
                 findItem,
                 moveItem,
               },
-              [item.props.children]
+              [item.props.children],
             )
           );
         })}
diff --git a/src/components/draggable/draggable-item/draggable-item.component.tsx b/src/components/draggable/draggable-item/draggable-item.component.tsx
index 5821ccbc9d..1aad71e9e1 100644
--- a/src/components/draggable/draggable-item/draggable-item.component.tsx
+++ b/src/components/draggable/draggable-item/draggable-item.component.tsx
@@ -18,16 +18,17 @@ export interface DraggableItemProps extends PaddingProps {
    * @private
    * @ignore
    */
-  findItem?: (
-    id: string | number
-  ) => { DraggableItemProps: React.ReactElement; index: number };
+  findItem?: (id: string | number) => {
+    DraggableItemProps: React.ReactElement;
+    index: number;
+  };
   /**
    * @private
    * @ignore
    */
   moveItem?: (
     droppedId: string | number,
-    overIndex: number | undefined
+    overIndex: number | undefined,
   ) => void;
 }
 
diff --git a/src/components/draggable/draggable-item/draggable-item.stories.tsx b/src/components/draggable/draggable-item/draggable-item.stories.tsx
index f67569ba21..a3f462a502 100644
--- a/src/components/draggable/draggable-item/draggable-item.stories.tsx
+++ b/src/components/draggable/draggable-item/draggable-item.stories.tsx
@@ -11,7 +11,7 @@ const styledSystemProps = generateStyledSystemProps(
   {
     padding: true,
   },
-  { py: "8px" }
+  { py: "8px" },
 );
 
 const meta: Meta<typeof DraggableItem> = {
diff --git a/src/components/draggable/draggable.pw.tsx b/src/components/draggable/draggable.pw.tsx
index c92594fd6e..336f6af761 100644
--- a/src/components/draggable/draggable.pw.tsx
+++ b/src/components/draggable/draggable.pw.tsx
@@ -80,7 +80,7 @@ test("calls container's getOrder callback with the correct arguments when an ite
       getOrder={(draggableItemIds, movedItemId) => {
         getOrderArgs = [draggableItemIds, movedItemId];
       }}
-    />
+    />,
   );
 
   const apple = page.getByText("Apple");
@@ -102,7 +102,7 @@ test("calls fruit container's getOrder callback with correct arguments when a pl
       getOrder={(draggableItemIds, movedItemId) => {
         getOrderArgs = [draggableItemIds, movedItemId];
       }}
-    />
+    />,
   );
 
   const pluto = page.getByText("Pluto");
diff --git a/src/components/draggable/draggable.test.tsx b/src/components/draggable/draggable.test.tsx
index 3030807a3e..19cc005880 100644
--- a/src/components/draggable/draggable.test.tsx
+++ b/src/components/draggable/draggable.test.tsx
@@ -14,7 +14,7 @@ test("dragging an item and dropping it after another item within the target cont
       <DraggableItem id="apple">Apple</DraggableItem>
       <DraggableItem id="mercury">Mercury</DraggableItem>
       <DraggableItem id="venus">Venus</DraggableItem>
-    </DraggableContainer>
+    </DraggableContainer>,
   );
 
   const apple = screen.getByText("Apple");
@@ -43,7 +43,7 @@ test("dragging an item and dropping it outside of the target container should no
         <DraggableItem id="venus">Venus</DraggableItem>
       </DraggableContainer>
       <p>Outer content</p>
-    </>
+    </>,
   );
 
   const apple = screen.getByText("Apple");
@@ -68,7 +68,7 @@ test("dragging and dropping an item in its current location does not change the
       <DraggableItem id="apple">Apple</DraggableItem>
       <DraggableItem id="mercury">Mercury</DraggableItem>
       <DraggableItem id="venus">Venus</DraggableItem>
-    </DraggableContainer>
+    </DraggableContainer>,
   );
 
   const apple = screen.getByText("Apple");
@@ -92,7 +92,7 @@ test("calls getOrder callback, with an array of the new item order and the dragg
       <DraggableItem id="apple">Apple</DraggableItem>
       <DraggableItem id="mercury">Mercury</DraggableItem>
       <DraggableItem id="venus">Venus</DraggableItem>
-    </DraggableContainer>
+    </DraggableContainer>,
   );
 
   const apple = screen.getByText("Apple");
@@ -114,7 +114,7 @@ test("the actual rendered item element is hidden from view while the item is dra
   render(
     <DraggableContainer>
       <DraggableItem id="apple">Apple</DraggableItem>
-    </DraggableContainer>
+    </DraggableContainer>,
   );
 
   const apple = screen.getByText("Apple");
@@ -135,14 +135,14 @@ test("items are reordered when their order is manually changed", () => {
     <DraggableContainer>
       <DraggableItem id="apple">Apple</DraggableItem>
       <DraggableItem id="mercury">Mercury</DraggableItem>
-    </DraggableContainer>
+    </DraggableContainer>,
   );
 
   rerender(
     <DraggableContainer>
       <DraggableItem id="apple">Mercury</DraggableItem>
       <DraggableItem id="mercury">Apple</DraggableItem>
-    </DraggableContainer>
+    </DraggableContainer>,
   );
 
   const allItems = screen.getAllByTestId("draggable-item");
@@ -158,10 +158,10 @@ test("throws error when DraggableContainer contains a child which is not Draggab
     render(
       <DraggableContainer>
         <div>Not draggable</div>
-      </DraggableContainer>
+      </DraggableContainer>,
     );
   }).toThrow(
-    "`DraggableContainer` only accepts children of type `DraggableItem`."
+    "`DraggableContainer` only accepts children of type `DraggableItem`.",
   );
 
   jest.restoreAllMocks();
@@ -174,7 +174,7 @@ testStyledSystemMarginRTL(
     </DraggableContainer>
   ),
   () => screen.getByTestId("draggable-container"),
-  undefined
+  undefined,
 );
 
 testStyledSystemPaddingRTL(
@@ -186,5 +186,5 @@ testStyledSystemPaddingRTL(
     </DraggableContainer>
   ),
   () => screen.getByTestId("draggable-item"),
-  { py: "8px" }
+  { py: "8px" },
 );
diff --git a/src/components/drawer/drawer.component.tsx b/src/components/drawer/drawer.component.tsx
index d88b26c0ef..c0162e2ab4 100644
--- a/src/components/drawer/drawer.component.tsx
+++ b/src/components/drawer/drawer.component.tsx
@@ -38,7 +38,7 @@ export interface DrawerProps extends Omit<TagProps, "data-component"> {
   /** Callback fired when expansion state changes, onChange(event: object, isExpanded: boolean) */
   onChange?: (
     e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    isExpanded: boolean
+    isExpanded: boolean,
   ) => void;
   /* Sidebar object either html or react component */
   sidebar?: React.ReactNode;
@@ -81,7 +81,7 @@ export const Drawer = ({
   const [isOpening, setIsOpening] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
   const [isExpanded, setIsExpanded] = useState(
-    isControlled.current ? expanded : defaultExpanded
+    isControlled.current ? expanded : defaultExpanded,
   );
   const timer = useRef<null | ReturnType<typeof setTimeout>>(null);
 
@@ -89,7 +89,7 @@ export const Drawer = ({
     if (animationDuration.indexOf("ms") !== -1) {
       const animationTime = animationDuration.substring(
         0,
-        animationDuration.length - 2
+        animationDuration.length - 2,
       );
       return parseInt(animationTime);
     }
@@ -100,7 +100,7 @@ export const Drawer = ({
     ) {
       const animationTime = animationDuration.substring(
         0,
-        animationDuration.length - 1
+        animationDuration.length - 1,
       );
       return parseFloat(animationTime) * 1000;
     }
@@ -166,7 +166,7 @@ export const Drawer = ({
 
       toggleAnimation();
     },
-    [toggleAnimation, isExpanded, onChange]
+    [toggleAnimation, isExpanded, onChange],
   );
 
   const guid = useRef(createGuid());
diff --git a/src/components/drawer/drawer.pw.tsx b/src/components/drawer/drawer.pw.tsx
index 5808de8a88..9099dfda81 100644
--- a/src/components/drawer/drawer.pw.tsx
+++ b/src/components/drawer/drawer.pw.tsx
@@ -21,108 +21,99 @@ import {
   waitForAnimationEnd,
 } from "../../../playwright/support/helper";
 
-test.describe(
-  "check focus outline and border radius for Drawer component",
-  () => {
-    test("should have the expected styling when the focusRedesignOptOut is false", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DrawerCustom showControls />);
+test.describe("check focus outline and border radius for Drawer component", () => {
+  test("should have the expected styling when the focusRedesignOptOut is false", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DrawerCustom showControls />);
 
-      const drawerToggleButton = drawerToggle(page);
-      await drawerToggleButton.focus();
-      await expect(drawerToggleButton).toHaveCSS(
-        "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
-      );
-      await expect(drawerToggleButton).toHaveCSS(
-        "outline",
-        "rgba(0, 0, 0, 0) solid 3px"
-      );
+    const drawerToggleButton = drawerToggle(page);
+    await drawerToggleButton.focus();
+    await expect(drawerToggleButton).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
+    );
+    await expect(drawerToggleButton).toHaveCSS(
+      "outline",
+      "rgba(0, 0, 0, 0) solid 3px",
+    );
+  });
+
+  test("should have the expected styling when the focusRedesignOptOut is true", async ({
+    mount,
+    page,
+  }) => {
+    await mount<HooksConfig>(<DrawerCustom showControls />, {
+      hooksConfig: {
+        focusRedesignOptOut: true,
+      },
     });
 
-    test("should have the expected styling when the focusRedesignOptOut is true", async ({
-      mount,
-      page,
-    }) => {
-      await mount<HooksConfig>(<DrawerCustom showControls />, {
-        hooksConfig: {
-          focusRedesignOptOut: true,
-        },
-      });
+    const drawerToggleButton = drawerToggle(page);
+    await drawerToggleButton.focus();
+    await expect(drawerToggleButton).toHaveCSS(
+      "outline",
+      "rgb(255, 188, 25) solid 3px",
+    );
+  });
 
-      const drawerToggleButton = drawerToggle(page);
-      await drawerToggleButton.focus();
-      await expect(drawerToggleButton).toHaveCSS(
-        "outline",
-        "rgb(255, 188, 25) solid 3px"
-      );
-    });
+  test("has the expected border radius styling on the sidebar control", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DrawerCustom showControls />);
+
+    const drawerToggleButton = drawerToggle(page);
+    await drawerToggleButton.focus();
+    await expect(drawerToggleButton).toHaveCSS("border-radius", "4px");
+  });
+});
 
-    test("has the expected border radius styling on the sidebar control", async ({
+test.describe("check props for Drawer component", () => {
+  (
+    [
+      [false, "matrix(-1, 0, 0, 1, 0, 0)", "true"],
+      [true, "none", "false"],
+    ] as [boolean, string, string][]
+  ).forEach(([clickIt, transformVal, expandedVal]) => {
+    test(`should verify chevron orientation when showControls prop is ${expandedVal}`, async ({
       mount,
       page,
     }) => {
       await mount(<DrawerCustom showControls />);
 
       const drawerToggleButton = drawerToggle(page);
-      await drawerToggleButton.focus();
-      await expect(drawerToggleButton).toHaveCSS("border-radius", "4px");
-    });
-  }
-);
-
-test.describe("check props for Drawer component", () => {
-  ([
-    [false, "matrix(-1, 0, 0, 1, 0, 0)", "true"],
-    [true, "none", "false"],
-  ] as [boolean, string, string][]).forEach(
-    ([clickIt, transformVal, expandedVal]) => {
-      test(`should verify chevron orientation when showControls prop is ${expandedVal}`, async ({
-        mount,
+      if (clickIt) {
+        await drawerToggleButton.click();
+        await expect(drawerToggleButton).toBeVisible();
+      }
+
+      const sidebarInnerElementOne = drawerSidebarContentInnerElement(page, 0);
+      const sidebarInnerElementTwo = drawerSidebarContentInnerElement(page, 1);
+      const sidebarInnerElementThree = drawerSidebarContentInnerElement(
         page,
-      }) => {
-        await mount(<DrawerCustom showControls />);
-
-        const drawerToggleButton = drawerToggle(page);
-        if (clickIt) {
-          await drawerToggleButton.click();
-          await expect(drawerToggleButton).toBeVisible();
-        }
-
-        const sidebarInnerElementOne = drawerSidebarContentInnerElement(
-          page,
-          0
-        );
-        const sidebarInnerElementTwo = drawerSidebarContentInnerElement(
-          page,
-          1
-        );
-        const sidebarInnerElementThree = drawerSidebarContentInnerElement(
-          page,
-          2
-        );
-        await expect(drawerToggleButton).toHaveCSS("transform", transformVal);
-        await expect(drawerToggleButton).toHaveAttribute(
-          "aria-expanded",
-          expandedVal
-        );
-        await expect(sidebarInnerElementOne).toHaveText("link a");
-        await expect(sidebarInnerElementTwo).toHaveText("link b");
-        await expect(sidebarInnerElementThree).toHaveText("link c");
-        if (expandedVal === "true") {
-          await expect(sidebarInnerElementOne).toBeVisible();
-          await expect(sidebarInnerElementTwo).toBeVisible();
-          await expect(sidebarInnerElementThree).toBeVisible();
-        } else {
-          await expect(sidebarInnerElementOne).not.toBeVisible();
-          await expect(sidebarInnerElementTwo).not.toBeVisible();
-          await expect(sidebarInnerElementThree).not.toBeVisible();
-        }
-      });
-    }
-  );
+        2,
+      );
+      await expect(drawerToggleButton).toHaveCSS("transform", transformVal);
+      await expect(drawerToggleButton).toHaveAttribute(
+        "aria-expanded",
+        expandedVal,
+      );
+      await expect(sidebarInnerElementOne).toHaveText("link a");
+      await expect(sidebarInnerElementTwo).toHaveText("link b");
+      await expect(sidebarInnerElementThree).toHaveText("link c");
+      if (expandedVal === "true") {
+        await expect(sidebarInnerElementOne).toBeVisible();
+        await expect(sidebarInnerElementTwo).toBeVisible();
+        await expect(sidebarInnerElementThree).toBeVisible();
+      } else {
+        await expect(sidebarInnerElementOne).not.toBeVisible();
+        await expect(sidebarInnerElementTwo).not.toBeVisible();
+        await expect(sidebarInnerElementThree).not.toBeVisible();
+      }
+    });
+  });
 
   ["3s", "15s"].forEach((animationDuration) => {
     // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
@@ -131,11 +122,11 @@ test.describe("check props for Drawer component", () => {
       page,
     }) => {
       await mount(
-        <DrawerCustom showControls animationDuration={animationDuration} />
+        <DrawerCustom showControls animationDuration={animationDuration} />,
       );
 
       await waitForAnimationEnd(
-        page.locator('[data-element="drawer-content"]')
+        page.locator('[data-element="drawer-content"]'),
       );
       const drawerToggleButton = drawerToggle(page);
       await drawerToggleButton.click();
@@ -244,7 +235,7 @@ test.describe("check props for Drawer component", () => {
         }}
       >
         <DrawerCustomFooterHeader />
-      </div>
+      </div>,
     );
 
     const footer = stickyFooter(page);
@@ -263,7 +254,7 @@ test.describe("check props for Drawer component", () => {
         }}
       >
         <DrawerCustomFooterHeader stickyFooter />
-      </div>
+      </div>,
     );
 
     const footer = stickyFooter(page);
@@ -282,7 +273,7 @@ test.describe("check props for Drawer component", () => {
         }}
       >
         <DrawerCustomFooterHeader stickyHeader />
-      </div>
+      </div>,
     );
 
     const footer = stickyFooter(page);
@@ -305,7 +296,7 @@ test.describe("check events for Drawer component", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const drawerToggleButton = drawerToggle(page);
@@ -325,7 +316,7 @@ test.describe("check events for Drawer component", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const drawerToggleButton = drawerToggle(page);
@@ -335,10 +326,12 @@ test.describe("check events for Drawer component", () => {
 });
 
 test.describe("Accessibility tests for Drawer component", () => {
-  ([
-    ["expanded", false],
-    ["not expanded", true],
-  ] as [string, boolean][]).forEach(([state, clickIt]) => {
+  (
+    [
+      ["expanded", false],
+      ["not expanded", true],
+    ] as [string, boolean][]
+  ).forEach(([state, clickIt]) => {
     test(`should pass accessibility tests when chevron is ${state}`, async ({
       mount,
       page,
@@ -356,11 +349,11 @@ test.describe("Accessibility tests for Drawer component", () => {
       page,
     }) => {
       await mount(
-        <DrawerCustom showControls animationDuration={animationDuration} />
+        <DrawerCustom showControls animationDuration={animationDuration} />,
       );
 
       await waitForAnimationEnd(
-        page.locator('[data-element="drawer-content"]')
+        page.locator('[data-element="drawer-content"]'),
       );
 
       const drawerToggleButton = drawerToggle(page);
@@ -445,7 +438,7 @@ test.describe("Accessibility tests for Drawer component", () => {
         }}
       >
         <DrawerCustomFooterHeader />
-      </div>
+      </div>,
     );
 
     await checkAccessibility(page);
@@ -462,7 +455,7 @@ test.describe("Accessibility tests for Drawer component", () => {
         }}
       >
         <DrawerCustomFooterHeader stickyFooter />
-      </div>
+      </div>,
     );
 
     await checkAccessibility(page);
@@ -479,7 +472,7 @@ test.describe("Accessibility tests for Drawer component", () => {
         }}
       >
         <DrawerCustom stickyHeader />
-      </div>
+      </div>,
     );
 
     await checkAccessibility(page);
diff --git a/src/components/drawer/drawer.stories.tsx b/src/components/drawer/drawer.stories.tsx
index 0a529cc065..c806d9f681 100644
--- a/src/components/drawer/drawer.stories.tsx
+++ b/src/components/drawer/drawer.stories.tsx
@@ -925,7 +925,7 @@ export const SideViewNavigation: Story = () => {
   const [isFilterOpen, setFilterOpen] = useState(false);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [sortType, setSortType] = useState<"ascending" | "descending">(
-    "descending"
+    "descending",
   );
   const [pickedUpData, setPickedUpData] = useState<dataPropTypes>();
   const handleDialogOpen = () => {
diff --git a/src/components/drawer/drawer.style.ts b/src/components/drawer/drawer.style.ts
index e2339aac40..0475f5b1a9 100644
--- a/src/components/drawer/drawer.style.ts
+++ b/src/components/drawer/drawer.style.ts
@@ -36,32 +36,31 @@ interface StyledDrawerSidebarProps {
 }
 
 const StyledDrawerSidebar = styled(Box)<StyledDrawerSidebarProps>`
-  ${({ hasControls, isExpanded }) =>
+  ${({ hasControls, isExpanded }) => css`
+    ${!isExpanded &&
     css`
-      ${!isExpanded &&
-      css`
-        display: none;
-        opacity: 0;
-      `}
+      display: none;
+      opacity: 0;
+    `}
 
-      ${isExpanded &&
-      css`
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 0%;
-      `}
+    ${isExpanded &&
+    css`
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0%;
+    `}
 
       ${hasControls &&
-      css`
-        ${StyledTabs} {
-          margin-top: 48px;
-          ${!isExpanded &&
-          css`
-            display: none;
-          `}
-        }
-      `}
+    css`
+      ${StyledTabs} {
+        margin-top: 48px;
+        ${!isExpanded &&
+        css`
+          display: none;
+        `}
+      }
     `}
+  `}
 
   &::-webkit-scrollbar {
     width: 12px;
diff --git a/src/components/drawer/drawer.test.tsx b/src/components/drawer/drawer.test.tsx
index 6d4003ad6b..5c321c8394 100644
--- a/src/components/drawer/drawer.test.tsx
+++ b/src/components/drawer/drawer.test.tsx
@@ -31,7 +31,7 @@ it("sets correct data-* props on main dialog element", () => {
   render(
     <Drawer data-element="foo" data-role="bar">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
   const drawer = screen.getByTestId("bar");
 
@@ -48,10 +48,10 @@ it("displays heading when title prop is provided", () => {
   render(
     <Drawer title={<h2>Test title</h2>} sidebar="Sidebar content">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
   expect(
-    screen.getByRole("heading", { name: "Test title", level: 2 })
+    screen.getByRole("heading", { name: "Test title", level: 2 }),
   ).toBeVisible();
 });
 
@@ -59,7 +59,7 @@ it("has accessible name on the sidebar when sidebarAriaLabel prop is provided",
   render(
     <Drawer sidebarAriaLabel="test" sidebar="Sidebar content">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   expect(screen.getByTestId("drawer-content")).toHaveAccessibleName("test");
@@ -69,11 +69,11 @@ it("renders sidebar with accessible name set to the `title` when provided", () =
   render(
     <Drawer title={<h2>Test title</h2>} sidebar="Sidebar content">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   expect(screen.getByTestId("drawer-content")).toHaveAccessibleName(
-    "Test title"
+    "Test title",
   );
 });
 
@@ -81,7 +81,7 @@ it("renders sidebar header as sticky when stickyHeader prop is true", () => {
   render(
     <Drawer stickyHeader expanded title="Test title" sidebar="Sidebar content">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
   expect(screen.getByTestId("drawer-sidebar-header")).toHaveStyle({
     position: "sticky",
@@ -94,7 +94,7 @@ it("renders sidebar footer when footer prop is provided", () => {
   render(
     <Drawer footer="Test footer" sidebar="Sidebar content">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
   expect(screen.getByText("Test footer")).toBeVisible();
 });
@@ -103,7 +103,7 @@ it("renders sidebar footer as sticky when stickyFooter prop is true", () => {
   render(
     <Drawer stickyFooter footer="Test footer" sidebar="Sidebar content">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
   expect(screen.getByText("Test footer")).toHaveStyle({
     position: "sticky",
@@ -117,7 +117,7 @@ it("calls onChange callback when provided with isExpanded value as false, when s
   render(
     <Drawer animationDuration="500ms" showControls onChange={onChange}>
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   const button = screen.getByRole("button", { name: "toggle sidebar" });
@@ -138,7 +138,7 @@ it("calls onChange callback when provided with isExpanded value as true, when si
   render(
     <Drawer defaultExpanded={false} showControls onChange={onChange}>
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   const button = screen.getByRole("button", { name: "toggle sidebar" });
@@ -165,7 +165,7 @@ it("triggers opening animation sequence with correct timing, when animationDurat
   render(
     <Drawer expanded={false} showControls animationDuration="500">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   const button = screen.getByRole("button", { name: "toggle sidebar" });
@@ -187,7 +187,7 @@ it("triggers closing animation sequence with correct timing, when animationDurat
   render(
     <Drawer expanded showControls animationDuration="500">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   const button = screen.getByRole("button", { name: "toggle sidebar" });
@@ -209,7 +209,7 @@ it("triggers opening animation sequence with correct timing, when animationDurat
   render(
     <Drawer expanded={false} showControls animationDuration="500ms">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   const button = screen.getByRole("button", { name: "toggle sidebar" });
@@ -231,7 +231,7 @@ it("triggers closing animation sequence with correct timing, when animationDurat
   render(
     <Drawer expanded showControls animationDuration="500ms">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   const button = screen.getByRole("button", { name: "toggle sidebar" });
@@ -253,7 +253,7 @@ it("triggers opening animation sequence with correct timing, when animationDurat
   render(
     <Drawer expanded={false} showControls animationDuration="0.5s">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   const button = screen.getByRole("button", { name: "toggle sidebar" });
@@ -282,7 +282,7 @@ it("triggers closing animation sequence with correct timing, when animationDurat
       animationDuration="0.5s"
     >
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   const button = screen.getByRole("button", { name: "toggle sidebar" });
@@ -364,7 +364,7 @@ it("interrupts opening animation sequence, when user clicks on toggle button bef
   render(
     <Drawer expanded={false} showControls animationDuration="500">
       Foobar
-    </Drawer>
+    </Drawer>,
   );
 
   const button = screen.getByRole("button", { name: "toggle sidebar" });
@@ -399,7 +399,7 @@ describe("uncontrolled behaviour", () => {
     render(
       <Drawer defaultExpanded={false} sidebar="Sidebar content">
         Foobar
-      </Drawer>
+      </Drawer>,
     );
     expect(screen.getByText("Sidebar content")).not.toBeVisible();
   });
@@ -413,7 +413,7 @@ describe("uncontrolled behaviour", () => {
     expect(() => {
       rerender(<Drawer expanded>Foobar</Drawer>);
     }).toThrow(
-      "Drawer should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Drawer element for the lifetime of the component"
+      "Drawer should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Drawer element for the lifetime of the component",
     );
 
     consoleSpy.mockRestore();
@@ -425,7 +425,7 @@ describe("controlled behaviour", () => {
     render(
       <Drawer expanded sidebar="I am visible!">
         Foobar
-      </Drawer>
+      </Drawer>,
     );
     expect(screen.getByText("I am visible!")).toBeVisible();
   });
@@ -434,7 +434,7 @@ describe("controlled behaviour", () => {
     render(
       <Drawer expanded={false} sidebar="I am hidden...">
         Foobar
-      </Drawer>
+      </Drawer>,
     );
     expect(screen.getByText("I am hidden...")).not.toBeVisible();
   });
@@ -448,7 +448,7 @@ describe("controlled behaviour", () => {
     expect(() => {
       rerender(<Drawer expanded={undefined}>Foobar</Drawer>);
     }).toThrow(
-      "Drawer should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Drawer element for the lifetime of the component"
+      "Drawer should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Drawer element for the lifetime of the component",
     );
 
     consoleSpy.mockRestore();
diff --git a/src/components/duelling-picklist/__internal__/duelling-picklist.context.ts b/src/components/duelling-picklist/__internal__/duelling-picklist.context.ts
index 39213e380b..6288e4a6bf 100644
--- a/src/components/duelling-picklist/__internal__/duelling-picklist.context.ts
+++ b/src/components/duelling-picklist/__internal__/duelling-picklist.context.ts
@@ -4,7 +4,7 @@ export type FocusContextType = {
   setElementToFocus: (
     itemIndex?: number,
     listIndex?: number,
-    groupIndex?: number
+    groupIndex?: number,
   ) => void;
   elementToFocus: {
     itemIndex?: number;
diff --git a/src/components/duelling-picklist/components.test-pw.tsx b/src/components/duelling-picklist/components.test-pw.tsx
index 7ae07d9729..9ae05355e9 100644
--- a/src/components/duelling-picklist/components.test-pw.tsx
+++ b/src/components/duelling-picklist/components.test-pw.tsx
@@ -28,7 +28,7 @@ export const DuellingPicklistComponent = (
       PicklistProps &
       PicklistPlaceholderProps &
       PicklistItemProps
-  >
+  >,
 ) => {
   const mockData: Item[] = useMemo(() => {
     const arr = [];
@@ -44,10 +44,13 @@ export const DuellingPicklistComponent = (
   }, []);
 
   const allItems = useMemo(() => {
-    return mockData.reduce((obj, item) => {
-      obj[item.key] = item;
-      return obj;
-    }, {} as { [key: string]: Item });
+    return mockData.reduce(
+      (obj, item) => {
+        obj[item.key] = item;
+        return obj;
+      },
+      {} as { [key: string]: Item },
+    );
   }, [mockData]);
 
   const [isEachItemSelected] = useState(false);
@@ -66,7 +69,7 @@ export const DuellingPicklistComponent = (
       const { [item.key]: removed2, ...rest2 } = notSelectedSearch;
       setNotSelectedSearch(rest2);
     },
-    [notSelectedItems, notSelectedSearch, selectedItems]
+    [notSelectedItems, notSelectedSearch, selectedItems],
   );
 
   const onRemove = useCallback(
@@ -84,7 +87,7 @@ export const DuellingPicklistComponent = (
       notSelectedSearch,
       searchQuery,
       selectedItems,
-    ]
+    ],
   );
 
   const handleSearch = useCallback(
@@ -98,17 +101,17 @@ export const DuellingPicklistComponent = (
           }
           return items;
         },
-        {} as AllItems
+        {} as AllItems,
       );
       setNotSelectedSearch(tempNotSelectedItems);
     },
-    [notSelectedItems]
+    [notSelectedItems],
   );
 
   const renderItems = (
     list: AllItems,
     type: PicklistItemProps["type"],
-    handler: PicklistItemProps["onChange"]
+    handler: PicklistItemProps["onChange"],
   ) =>
     order.reduce((items, key) => {
       const item = list[key];
@@ -131,7 +134,7 @@ export const DuellingPicklistComponent = (
                 <p style={{ margin: 0 }}>{item.description}</p>
               </div>
             </div>
-          </PicklistItem>
+          </PicklistItem>,
         );
       }
       return items;
@@ -175,7 +178,7 @@ export const DuellingPicklistComponent = (
           {renderItems(
             isSearchMode ? notSelectedSearch : notSelectedItems,
             "add",
-            onAdd
+            onAdd,
           )}
         </Picklist>
         <Picklist
@@ -195,7 +198,7 @@ export const DuellingPicklistComponentAssigned = (
       PicklistProps &
       PicklistPlaceholderProps &
       PicklistItemProps
-  >
+  >,
 ) => {
   const mockData: Item[] = useMemo(() => {
     const arr = [];
@@ -211,10 +214,13 @@ export const DuellingPicklistComponentAssigned = (
   }, []);
 
   const allItems = useMemo(() => {
-    return mockData.reduce((obj, item) => {
-      obj[item.key] = item;
-      return obj;
-    }, {} as { [key: string]: Item });
+    return mockData.reduce(
+      (obj, item) => {
+        obj[item.key] = item;
+        return obj;
+      },
+      {} as { [key: string]: Item },
+    );
   }, [mockData]);
 
   const [isEachItemSelected] = useState(false);
@@ -233,7 +239,7 @@ export const DuellingPicklistComponentAssigned = (
       const { [item.key]: removed2, ...rest2 } = notSelectedSearch;
       setNotSelectedSearch(rest2);
     },
-    [notSelectedItems, notSelectedSearch, selectedItems]
+    [notSelectedItems, notSelectedSearch, selectedItems],
   );
 
   const onRemove = useCallback(
@@ -251,7 +257,7 @@ export const DuellingPicklistComponentAssigned = (
       notSelectedSearch,
       searchQuery,
       selectedItems,
-    ]
+    ],
   );
 
   const handleSearch = useCallback(
@@ -265,17 +271,17 @@ export const DuellingPicklistComponentAssigned = (
           }
           return items;
         },
-        {} as AllItems
+        {} as AllItems,
       );
       setNotSelectedSearch(tempNotSelectedItems);
     },
-    [notSelectedItems]
+    [notSelectedItems],
   );
 
   const renderItems = (
     list: AllItems,
     type: PicklistItemProps["type"],
-    handler: PicklistItemProps["onChange"]
+    handler: PicklistItemProps["onChange"],
   ) =>
     order.reduce((items, key) => {
       const item = list[key];
@@ -298,7 +304,7 @@ export const DuellingPicklistComponentAssigned = (
                 <p style={{ margin: 0 }}>{item.description}</p>
               </div>
             </div>
-          </PicklistItem>
+          </PicklistItem>,
         );
       }
       return items;
@@ -342,7 +348,7 @@ export const DuellingPicklistComponentAssigned = (
           {renderItems(
             isSearchMode ? notSelectedSearch : notSelectedItems,
             "add",
-            onAdd
+            onAdd,
           )}
         </Picklist>
         <Picklist
@@ -393,7 +399,7 @@ export const AlternativeSearch = () => {
       const { [item.key]: removed2, ...rest2 } = notSelectedSearch;
       setNotSelectedSearch(rest2);
     },
-    [notSelectedItems, notSelectedSearch, selectedItems]
+    [notSelectedItems, notSelectedSearch, selectedItems],
   );
 
   const onRemove = useCallback(
@@ -411,7 +417,7 @@ export const AlternativeSearch = () => {
       notSelectedSearch,
       searchQuery,
       selectedItems,
-    ]
+    ],
   );
 
   const handleSearch = useCallback(
@@ -425,17 +431,17 @@ export const AlternativeSearch = () => {
           }
           return items;
         },
-        {} as AllItems
+        {} as AllItems,
       );
       setNotSelectedSearch(tempNotSelectedItems);
     },
-    [notSelectedItems]
+    [notSelectedItems],
   );
 
   const renderItems = (
     list: AllItems,
     type: PicklistItemProps["type"],
-    handler: PicklistItemProps["onChange"]
+    handler: PicklistItemProps["onChange"],
   ) =>
     order.reduce((items, key) => {
       const item = list[key];
@@ -452,7 +458,7 @@ export const AlternativeSearch = () => {
                 <p style={{ margin: 0 }}>{item.description}</p>
               </div>
             </div>
-          </PicklistItem>
+          </PicklistItem>,
         );
       }
       return items;
@@ -489,7 +495,7 @@ export const AlternativeSearch = () => {
           {renderItems(
             isSearchMode ? notSelectedSearch : notSelectedItems,
             "add",
-            onAdd
+            onAdd,
           )}
         </Picklist>
         <Picklist
@@ -534,7 +540,7 @@ export const Grouped = () => {
         ...notSelectedItems.filter((i) => i.key !== item.key),
       ]);
     },
-    [notSelectedItems, selectedItems]
+    [notSelectedItems, selectedItems],
   );
 
   const onRemove = useCallback(
@@ -542,20 +548,20 @@ export const Grouped = () => {
       setNotSelectedItems([...notSelectedItems, item]);
       setSelectedItems([...selectedItems.filter((i) => i.key !== item.key)]);
     },
-    [notSelectedItems, selectedItems]
+    [notSelectedItems, selectedItems],
   );
 
   const addGroup = useCallback(
     (group: GroupKey) => {
       const groupItems = notSelectedItems.filter(
-        (item) => item.group === group
+        (item) => item.group === group,
       );
       setNotSelectedItems([
         ...notSelectedItems.filter((item) => item.group !== group),
       ]);
       setSelectedItems([...selectedItems, ...groupItems]);
     },
-    [notSelectedItems, selectedItems]
+    [notSelectedItems, selectedItems],
   );
 
   const removeGroup = useCallback(
@@ -567,13 +573,13 @@ export const Grouped = () => {
       ]);
       setNotSelectedItems([...notSelectedItems, ...groupItems]);
     },
-    [notSelectedItems, selectedItems]
+    [notSelectedItems, selectedItems],
   );
 
   const renderItems = (
     list: MockData,
     type: PicklistItemProps["type"],
-    handler: PicklistItemProps["onChange"]
+    handler: PicklistItemProps["onChange"],
   ) => {
     if (!list) return null;
 
@@ -603,7 +609,7 @@ export const Grouped = () => {
         >
           {Object.entries(allGroups).map(([key, value]) => {
             const groupItems = notSelectedItems.filter(
-              (item) => item.group === key
+              (item) => item.group === key,
             );
             return groupItems.length ? (
               <PicklistGroup
@@ -623,7 +629,7 @@ export const Grouped = () => {
         >
           {Object.entries(allGroups).map(([key, value]) => {
             const groupItems = selectedItems.filter(
-              (item) => item.group === key
+              (item) => item.group === key,
             );
             return groupItems.length ? (
               <PicklistGroup
diff --git a/src/components/duelling-picklist/duelling-picklist-test.stories.tsx b/src/components/duelling-picklist/duelling-picklist-test.stories.tsx
index 304e4e5967..7a3d49498c 100644
--- a/src/components/duelling-picklist/duelling-picklist-test.stories.tsx
+++ b/src/components/duelling-picklist/duelling-picklist-test.stories.tsx
@@ -41,10 +41,13 @@ export const Default = () => {
   }, []);
 
   const allItems = useMemo(() => {
-    return mockData.reduce((obj, item) => {
-      obj[item.key] = item;
-      return obj;
-    }, {} as { [key: string]: Item });
+    return mockData.reduce(
+      (obj, item) => {
+        obj[item.key] = item;
+        return obj;
+      },
+      {} as { [key: string]: Item },
+    );
   }, [mockData]);
 
   const [isEachItemSelected, setIsEachItemSelected] = useState(false);
@@ -63,7 +66,7 @@ export const Default = () => {
       const { [item.key]: removed2, ...rest2 } = notSelectedSearch;
       setNotSelectedSearch(rest2);
     },
-    [notSelectedItems, notSelectedSearch, selectedItems]
+    [notSelectedItems, notSelectedSearch, selectedItems],
   );
 
   const onRemove = useCallback(
@@ -81,7 +84,7 @@ export const Default = () => {
       notSelectedSearch,
       searchQuery,
       selectedItems,
-    ]
+    ],
   );
 
   const handleSearch = useCallback(
@@ -95,17 +98,17 @@ export const Default = () => {
           }
           return items;
         },
-        {} as AllItems
+        {} as AllItems,
       );
       setNotSelectedSearch(tempNotSelectedItems);
     },
-    [notSelectedItems]
+    [notSelectedItems],
   );
 
   const renderItems = (
     list: AllItems,
     type: PicklistItemProps["type"],
-    handler: PicklistItemProps["onChange"]
+    handler: PicklistItemProps["onChange"],
   ) =>
     order.reduce((items, key) => {
       const item = list[key];
@@ -122,7 +125,7 @@ export const Default = () => {
                 <p style={{ margin: 0 }}>{item.description}</p>
               </div>
             </div>
-          </PicklistItem>
+          </PicklistItem>,
         );
       }
       return items;
@@ -157,7 +160,7 @@ export const Default = () => {
           {renderItems(
             isSearchMode ? notSelectedSearch : notSelectedItems,
             "add",
-            onAdd
+            onAdd,
           )}
         </Picklist>
         <PicklistDivider />
diff --git a/src/components/duelling-picklist/duelling-picklist.component.tsx b/src/components/duelling-picklist/duelling-picklist.component.tsx
index ff2447e994..8542c60490 100644
--- a/src/components/duelling-picklist/duelling-picklist.component.tsx
+++ b/src/components/duelling-picklist/duelling-picklist.component.tsx
@@ -52,7 +52,7 @@ export const DuellingPicklist = ({
   const addElementToFocus = (
     itemIndex?: number,
     listIndex?: number,
-    groupIndex?: number
+    groupIndex?: number,
   ) => {
     setElementToFocus({ itemIndex, listIndex, groupIndex });
   };
diff --git a/src/components/duelling-picklist/duelling-picklist.pw.tsx b/src/components/duelling-picklist/duelling-picklist.pw.tsx
index 382ac1fcaf..12ec15220b 100644
--- a/src/components/duelling-picklist/duelling-picklist.pw.tsx
+++ b/src/components/duelling-picklist/duelling-picklist.pw.tsx
@@ -37,10 +37,10 @@ test.describe(`should render Duelling-Picklist component`, () => {
     await mount(<DuellingPicklistComponent />);
 
     await expect(
-      getDataElementByValue(page, "picklist").nth(0).locator("li")
+      getDataElementByValue(page, "picklist").nth(0).locator("li"),
     ).toHaveCount(10);
     await expect(getDataElementByValue(page, "picklist-left-label")).toHaveText(
-      "List 1 (10)"
+      "List 1 (10)",
     );
   });
 
@@ -54,13 +54,13 @@ test.describe(`should render Duelling-Picklist component`, () => {
       getDataElementByValue(page, "picklist")
         .nth(1)
         .locator("li")
-        .filter({ hasText: "Content" })
+        .filter({ hasText: "Content" }),
     ).toHaveCount(0);
     await expect(
-      getDataElementByValue(page, "picklist-placeholder")
+      getDataElementByValue(page, "picklist-placeholder"),
     ).toHaveText("Nothing to see here");
     await expect(
-      getDataElementByValue(page, "picklist-right-label").nth(0)
+      getDataElementByValue(page, "picklist-right-label").nth(0),
     ).toHaveText("List 2 (0)");
   });
 
@@ -72,7 +72,7 @@ test.describe(`should render Duelling-Picklist component`, () => {
 
     await expect(getComponent(page, "duelling-picklist")).not.toHaveAttribute(
       "disabled",
-      /.*/
+      /.*/,
     );
   });
 
@@ -92,16 +92,16 @@ test.describe(`should render Duelling-Picklist component`, () => {
         await addItemButton.click();
       }
       await expect(
-        getDataElementByValue(page, "picklist").nth(0).locator("li")
+        getDataElementByValue(page, "picklist").nth(0).locator("li"),
       ).toHaveCount(leftItems);
       await expect(
-        getDataElementByValue(page, "picklist-left-label").nth(0)
+        getDataElementByValue(page, "picklist-left-label").nth(0),
       ).toHaveText(`List 1 (${leftItems})`);
       await expect(
-        getDataElementByValue(page, "picklist").nth(1).locator("li")
+        getDataElementByValue(page, "picklist").nth(1).locator("li"),
       ).toHaveCount(items);
       await expect(
-        getDataElementByValue(page, "picklist-right-label").nth(0)
+        getDataElementByValue(page, "picklist-right-label").nth(0),
       ).toHaveText(`List 2 (${items})`);
     });
   });
@@ -121,19 +121,19 @@ test.describe(`should render Duelling-Picklist component`, () => {
       getDataElementByValue(page, "picklist")
         .nth(0)
         .locator("li")
-        .filter({ hasText: "Content" })
+        .filter({ hasText: "Content" }),
     ).toHaveCount(0);
     await expect(
-      getDataElementByValue(page, "picklist-placeholder")
+      getDataElementByValue(page, "picklist-placeholder"),
     ).toHaveText("Unassigned list empty");
     await expect(
-      getDataElementByValue(page, "picklist-left-label").nth(0)
+      getDataElementByValue(page, "picklist-left-label").nth(0),
     ).toHaveText(`List 1 (0)`);
     await expect(
-      getDataElementByValue(page, "picklist").nth(1).locator("li")
+      getDataElementByValue(page, "picklist").nth(1).locator("li"),
     ).toHaveCount(10);
     await expect(
-      getDataElementByValue(page, "picklist-right-label").nth(0)
+      getDataElementByValue(page, "picklist-right-label").nth(0),
     ).toHaveText(`List 2 (10)`);
   });
 
@@ -146,22 +146,22 @@ test.describe(`should render Duelling-Picklist component`, () => {
     const addItemButton = page.getByRole("button").first();
     await addItemButton.click();
     await expect(
-      getDataElementByValue(page, "picklist").nth(0).locator("li")
+      getDataElementByValue(page, "picklist").nth(0).locator("li"),
     ).toHaveCount(9);
     await expect(
-      getDataElementByValue(page, "picklist").nth(1).locator("li")
+      getDataElementByValue(page, "picklist").nth(1).locator("li"),
     ).toHaveCount(1);
 
     const removeItemButton = getDataElementByValue(page, "remove");
     await removeItemButton.click();
     await expect(
-      getDataElementByValue(page, "picklist").nth(0).locator("li")
+      getDataElementByValue(page, "picklist").nth(0).locator("li"),
     ).toHaveCount(10);
     await expect(
       getDataElementByValue(page, "picklist")
         .nth(1)
         .locator("li")
-        .filter({ hasText: "Content" })
+        .filter({ hasText: "Content" }),
     ).toHaveCount(0);
   });
 
@@ -175,10 +175,10 @@ test.describe(`should render Duelling-Picklist component`, () => {
       const addItemButton = page.getByRole("button").first();
       await addItemButton.press(pressed);
       await expect(
-        getDataElementByValue(page, "picklist").nth(0).locator("li")
+        getDataElementByValue(page, "picklist").nth(0).locator("li"),
       ).toHaveCount(9);
       await expect(
-        getDataElementByValue(page, "picklist").nth(1).locator("li")
+        getDataElementByValue(page, "picklist").nth(1).locator("li"),
       ).toHaveCount(1);
     });
   });
@@ -199,10 +199,10 @@ test.describe(`should render Duelling-Picklist component`, () => {
         getDataElementByValue(page, "picklist")
           .nth(0)
           .locator("li")
-          .filter({ hasText: "Content" })
+          .filter({ hasText: "Content" }),
       ).toHaveCount(0);
       await expect(
-        getDataElementByValue(page, "picklist").nth(1).locator("li")
+        getDataElementByValue(page, "picklist").nth(1).locator("li"),
       ).toHaveCount(10);
 
       const removeItemButton = getDataElementByValue(page, "remove").first();
@@ -210,22 +210,24 @@ test.describe(`should render Duelling-Picklist component`, () => {
         await removeItemButton.press(pressed);
       }
       await expect(
-        getDataElementByValue(page, "picklist").nth(0).locator("li")
+        getDataElementByValue(page, "picklist").nth(0).locator("li"),
       ).toHaveCount(10);
       await expect(
         getDataElementByValue(page, "picklist")
           .nth(1)
           .locator("li")
-          .filter({ hasText: "Content" })
+          .filter({ hasText: "Content" }),
       ).toHaveCount(0);
     });
   });
 
-  ([
-    ["Content", 10],
-    ["Content 1", 2],
-    ["Content 10", 1],
-  ] as [string, number][]).forEach(([searchString, results]) => {
+  (
+    [
+      ["Content", 10],
+      ["Content 1", 2],
+      ["Content 10", 1],
+    ] as [string, number][]
+  ).forEach(([searchString, results]) => {
     test(`should verify when ${searchString} is enterted into search field that ${results} results are displayed`, async ({
       mount,
       page,
@@ -235,7 +237,7 @@ test.describe(`should render Duelling-Picklist component`, () => {
       const searchInput = page.getByLabel("search").first();
       await searchInput.fill(searchString);
       await expect(
-        getDataElementByValue(page, "picklist").nth(0).locator("li")
+        getDataElementByValue(page, "picklist").nth(0).locator("li"),
       ).toHaveCount(results);
     });
   });
@@ -264,42 +266,42 @@ test.describe(`should render Duelling-Picklist component`, () => {
     await expect(rightSearch).toHaveAttribute("data-component", "search");
   });
 
-  ([
-    ["disabled", true],
-    ["enabled", false],
-  ] as [string, DuellingPicklistProps["disabled"]][]).forEach(
-    ([state, bool]) => {
-      test(`should verify Duelling-Picklist is ${state} when disabled prop is ${bool}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DuellingPicklistComponent disabled={bool} />);
-
-        if (bool) {
-          await expect(getComponent(page, "duelling-picklist")).toHaveAttribute(
-            "disabled",
-            /.*/
-          );
-          await expect(getComponent(page, "duelling-picklist")).toHaveCSS(
-            "opacity",
-            "0.2"
-          );
-          await expect(getComponent(page, "duelling-picklist")).toHaveCSS(
-            "pointer-events",
-            "none"
-          );
-          await expect(getComponent(page, "duelling-picklist")).toHaveCSS(
-            "user-select",
-            "none"
-          );
-        } else {
-          await expect(
-            getComponent(page, "duelling-picklist")
-          ).not.toHaveAttribute("disabled", /.*/);
-        }
-      });
-    }
-  );
+  (
+    [
+      ["disabled", true],
+      ["enabled", false],
+    ] as [string, DuellingPicklistProps["disabled"]][]
+  ).forEach(([state, bool]) => {
+    test(`should verify Duelling-Picklist is ${state} when disabled prop is ${bool}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DuellingPicklistComponent disabled={bool} />);
+
+      if (bool) {
+        await expect(getComponent(page, "duelling-picklist")).toHaveAttribute(
+          "disabled",
+          /.*/,
+        );
+        await expect(getComponent(page, "duelling-picklist")).toHaveCSS(
+          "opacity",
+          "0.2",
+        );
+        await expect(getComponent(page, "duelling-picklist")).toHaveCSS(
+          "pointer-events",
+          "none",
+        );
+        await expect(getComponent(page, "duelling-picklist")).toHaveCSS(
+          "user-select",
+          "none",
+        );
+      } else {
+        await expect(
+          getComponent(page, "duelling-picklist"),
+        ).not.toHaveAttribute("disabled", /.*/);
+      }
+    });
+  });
 
   test(`should verify unassigned picklist label is 'Left Label'`, async ({
     mount,
@@ -308,7 +310,7 @@ test.describe(`should render Duelling-Picklist component`, () => {
     await mount(<DuellingPicklistComponent leftLabel="Left Label" />);
 
     await expect(getDataElementByValue(page, "picklist-left-label")).toHaveText(
-      "Left Label"
+      "Left Label",
     );
   });
 
@@ -319,7 +321,7 @@ test.describe(`should render Duelling-Picklist component`, () => {
     await mount(<DuellingPicklistComponent rightLabel="Right Label" />);
 
     await expect(
-      getDataElementByValue(page, "picklist-right-label").nth(0)
+      getDataElementByValue(page, "picklist-right-label").nth(0),
     ).toHaveText("Right Label");
   });
 });
@@ -338,45 +340,42 @@ test.describe(`should render Duelling-Picklist to test Picklist props`, () => {
       }
 
       await expect(
-        getDataElementByValue(page, "picklist-placeholder")
+        getDataElementByValue(page, "picklist-placeholder"),
       ).toHaveText(chars);
     });
   });
 
-  ([
-    ["locked", true, "rgb(242, 245, 246)"],
-    ["unlocked", false, "rgb(255, 255, 255)"],
-  ] as [string, PicklistItemProps["locked"], string][]).forEach(
-    ([state, bool, backColor]) => {
-      test(`should verify picklist item is ${state} when locked prop is ${bool}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DuellingPicklistComponent locked={bool} />);
-
-        const picklistItem = getDataElementByValue(
-          page,
-          "picklist-item"
-        ).first();
-        await expect(picklistItem).toHaveCSS("background-color", backColor);
-        const picklistIcon = getDataElementByValue(page, "picklist-item")
-          .first()
-          .locator(ICON);
-        if (bool) {
-          await expect(picklistIcon).toHaveAttribute("data-element", state);
-        } else {
-          await expect(picklistIcon).not.toHaveAttribute("data-element", state);
-        }
-      });
-    }
-  );
+  (
+    [
+      ["locked", true, "rgb(242, 245, 246)"],
+      ["unlocked", false, "rgb(255, 255, 255)"],
+    ] as [string, PicklistItemProps["locked"], string][]
+  ).forEach(([state, bool, backColor]) => {
+    test(`should verify picklist item is ${state} when locked prop is ${bool}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DuellingPicklistComponent locked={bool} />);
+
+      const picklistItem = getDataElementByValue(page, "picklist-item").first();
+      await expect(picklistItem).toHaveCSS("background-color", backColor);
+      const picklistIcon = getDataElementByValue(page, "picklist-item")
+        .first()
+        .locator(ICON);
+      if (bool) {
+        await expect(picklistIcon).toHaveAttribute("data-element", state);
+      } else {
+        await expect(picklistIcon).not.toHaveAttribute("data-element", state);
+      }
+    });
+  });
 
   test(`should verify picklist tooltip is 'Item Locked' when locked prop is true`, async ({
     mount,
     page,
   }) => {
     await mount(
-      <DuellingPicklistComponent locked tooltipMessage="Item Locked" />
+      <DuellingPicklistComponent locked tooltipMessage="Item Locked" />,
     );
 
     const listItemIcon = getDataElementByValue(page, "picklist-item")
@@ -387,143 +386,124 @@ test.describe(`should render Duelling-Picklist to test Picklist props`, () => {
   });
 });
 
-test.describe(
-  `should render Duelling-Picklist with external searchbar and access checkbox`,
-  () => {
-    ([
+test.describe(`should render Duelling-Picklist with external searchbar and access checkbox`, () => {
+  (
+    [
       ["Content", 20],
       ["Content 1", 11],
       ["Content 10", 1],
-    ] as [string, number][]).forEach(([searchString, results]) => {
-      test(`should verify ${results} are found when search field is placed outside the component`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<AlternativeSearch />);
-
-        await page.getByLabel("search").fill(searchString);
-        await expect(
-          getDataElementByValue(page, "picklist").nth(0).locator("li")
-        ).toHaveCount(results);
-      });
-    });
-
-    test(`should verify component is disabled when access checkox is checked`, async ({
+    ] as [string, number][]
+  ).forEach(([searchString, results]) => {
+    test(`should verify ${results} are found when search field is placed outside the component`, async ({
       mount,
       page,
     }) => {
       await mount(<AlternativeSearch />);
 
-      const checkbox = page.getByRole("checkbox");
-      await checkbox.check();
-      await expect(getComponent(page, "duelling-picklist")).toHaveAttribute(
-        "disabled",
-        /.*/
-      );
+      await page.getByLabel("search").fill(searchString);
+      await expect(
+        getDataElementByValue(page, "picklist").nth(0).locator("li"),
+      ).toHaveCount(results);
     });
+  });
 
-    test(`should verify component is re-enabled when access checkbox is unchecked`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AlternativeSearch />);
+  test(`should verify component is disabled when access checkox is checked`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AlternativeSearch />);
 
-      const checkbox = page.getByRole("checkbox");
-      await checkbox.check();
-      await checkbox.uncheck();
-      await expect(getComponent(page, "duelling-picklist")).not.toHaveAttribute(
-        "disabled",
-        /.*/
-      );
-    });
-  }
-);
+    const checkbox = page.getByRole("checkbox");
+    await checkbox.check();
+    await expect(getComponent(page, "duelling-picklist")).toHaveAttribute(
+      "disabled",
+      /.*/,
+    );
+  });
 
-test.describe(
-  `should render Duelling-Picklist with items grouped and a picklist divider`,
-  () => {
-    test(`should verify component is displayed with divider`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<Grouped />);
+  test(`should verify component is re-enabled when access checkbox is unchecked`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<AlternativeSearch />);
 
-      await expect(
-        getDataElementByValue(page, "picklist-divider")
-      ).toBeAttached();
-    });
+    const checkbox = page.getByRole("checkbox");
+    await checkbox.check();
+    await checkbox.uncheck();
+    await expect(getComponent(page, "duelling-picklist")).not.toHaveAttribute(
+      "disabled",
+      /.*/,
+    );
+  });
+});
 
-    test(`should verify component is displayed in groups with group label`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<Grouped />);
+test.describe(`should render Duelling-Picklist with items grouped and a picklist divider`, () => {
+  test(`should verify component is displayed with divider`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<Grouped />);
 
-      const group = getDataElementByValue(page, "picklist-group").first();
-      await expect(group).toHaveText("Group A");
-    });
+    await expect(
+      getDataElementByValue(page, "picklist-divider"),
+    ).toBeAttached();
+  });
 
-    test(`should verify all items in a group are added to assigned picklist when group add button is clicked`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<Grouped />);
+  test(`should verify component is displayed in groups with group label`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<Grouped />);
 
-      const groupAddButton = getDataElementByValue(page, "picklist-group")
-        .first()
-        .locator("button");
-      await groupAddButton.click();
-      const group = getDataElementByValue(page, "picklist-group").nth(2);
-      await expect(group).toHaveText("Group A");
-      await expect(
-        getDataElementByValue(page, "picklist")
-          .nth(1)
-          .locator("li")
-          .locator("p")
-      ).toHaveCount(3);
-    });
+    const group = getDataElementByValue(page, "picklist-group").first();
+    await expect(group).toHaveText("Group A");
+  });
 
-    test(`should verify all items in a group are removed from assigned picklist when group remove button is clicked`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<Grouped />);
+  test(`should verify all items in a group are added to assigned picklist when group add button is clicked`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<Grouped />);
 
-      const groupAddButton = getDataElementByValue(page, "picklist-group")
-        .first()
-        .locator("button");
-      await groupAddButton.click();
-      await expect(
-        getDataElementByValue(page, "picklist")
-          .nth(0)
-          .locator("li")
-          .locator("p")
-      ).toHaveCount(3);
-      await expect(
-        getDataElementByValue(page, "picklist")
-          .nth(1)
-          .locator("li")
-          .locator("p")
-      ).toHaveCount(3);
-      const groupRemoveButton = getDataElementByValue(page, "picklist-group")
-        .nth(2)
-        .locator("button");
-      await groupRemoveButton.click();
-      await expect(
-        getDataElementByValue(page, "picklist")
-          .nth(0)
-          .locator("li")
-          .locator("p")
-      ).toHaveCount(6);
-      await expect(
-        getDataElementByValue(page, "picklist")
-          .nth(1)
-          .locator("li")
-          .locator("p")
-      ).toHaveCount(0);
-    });
-  }
-);
+    const groupAddButton = getDataElementByValue(page, "picklist-group")
+      .first()
+      .locator("button");
+    await groupAddButton.click();
+    const group = getDataElementByValue(page, "picklist-group").nth(2);
+    await expect(group).toHaveText("Group A");
+    await expect(
+      getDataElementByValue(page, "picklist").nth(1).locator("li").locator("p"),
+    ).toHaveCount(3);
+  });
+
+  test(`should verify all items in a group are removed from assigned picklist when group remove button is clicked`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<Grouped />);
+
+    const groupAddButton = getDataElementByValue(page, "picklist-group")
+      .first()
+      .locator("button");
+    await groupAddButton.click();
+    await expect(
+      getDataElementByValue(page, "picklist").nth(0).locator("li").locator("p"),
+    ).toHaveCount(3);
+    await expect(
+      getDataElementByValue(page, "picklist").nth(1).locator("li").locator("p"),
+    ).toHaveCount(3);
+    const groupRemoveButton = getDataElementByValue(page, "picklist-group")
+      .nth(2)
+      .locator("button");
+    await groupRemoveButton.click();
+    await expect(
+      getDataElementByValue(page, "picklist").nth(0).locator("li").locator("p"),
+    ).toHaveCount(6);
+    await expect(
+      getDataElementByValue(page, "picklist").nth(1).locator("li").locator("p"),
+    ).toHaveCount(0);
+  });
+});
 
 test.describe(`check events for Duelling-Picklist component`, () => {
   test(`should call onChange when add button clicked`, async ({
@@ -536,7 +516,7 @@ test.describe(`check events for Duelling-Picklist component`, () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const addItemButton = page.getByRole("button").first();
@@ -554,7 +534,7 @@ test.describe(`check events for Duelling-Picklist component`, () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const removeItemButton = page.getByRole("button").first();
@@ -573,7 +553,7 @@ test.describe(`check events for Duelling-Picklist component`, () => {
           onChange={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       const addItemButton = page.getByRole("button").first();
@@ -593,7 +573,7 @@ test.describe(`check events for Duelling-Picklist component`, () => {
           onChange={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       const removeItemButton = page.getByRole("button").first();
diff --git a/src/components/duelling-picklist/duelling-picklist.stories.tsx b/src/components/duelling-picklist/duelling-picklist.stories.tsx
index d1f0547647..57243808db 100644
--- a/src/components/duelling-picklist/duelling-picklist.stories.tsx
+++ b/src/components/duelling-picklist/duelling-picklist.stories.tsx
@@ -55,10 +55,13 @@ export const Default = () => {
   }, []);
 
   const allItems = useMemo(() => {
-    return mockData.reduce((obj, item) => {
-      obj[item.key] = item;
-      return obj;
-    }, {} as { [key: string]: Item });
+    return mockData.reduce(
+      (obj, item) => {
+        obj[item.key] = item;
+        return obj;
+      },
+      {} as { [key: string]: Item },
+    );
   }, [mockData]);
 
   const [isEachItemSelected, setIsEachItemSelected] = useState(false);
@@ -77,7 +80,7 @@ export const Default = () => {
       const { [item.key]: removed2, ...rest2 } = notSelectedSearch;
       setNotSelectedSearch(rest2);
     },
-    [notSelectedItems, notSelectedSearch, selectedItems]
+    [notSelectedItems, notSelectedSearch, selectedItems],
   );
 
   const onRemove = useCallback(
@@ -95,7 +98,7 @@ export const Default = () => {
       notSelectedSearch,
       searchQuery,
       selectedItems,
-    ]
+    ],
   );
 
   const handleSearch = useCallback(
@@ -109,17 +112,17 @@ export const Default = () => {
           }
           return items;
         },
-        {} as AllItems
+        {} as AllItems,
       );
       setNotSelectedSearch(tempNotSelectedItems);
     },
-    [notSelectedItems]
+    [notSelectedItems],
   );
 
   const renderItems = (
     list: AllItems,
     type: PicklistItemProps["type"],
-    handler: PicklistItemProps["onChange"]
+    handler: PicklistItemProps["onChange"],
   ) =>
     order.reduce((items, key) => {
       const item = list[key];
@@ -136,7 +139,7 @@ export const Default = () => {
                 <p style={{ margin: 0 }}>{item.description}</p>
               </div>
             </div>
-          </PicklistItem>
+          </PicklistItem>,
         );
       }
       return items;
@@ -171,7 +174,7 @@ export const Default = () => {
           {renderItems(
             isSearchMode ? notSelectedSearch : notSelectedItems,
             "add",
-            onAdd
+            onAdd,
           )}
         </Picklist>
         <PicklistDivider />
@@ -225,7 +228,7 @@ export const AlternativeSearch: Story = () => {
       const { [item.key]: removed2, ...rest2 } = notSelectedSearch;
       setNotSelectedSearch(rest2);
     },
-    [notSelectedItems, notSelectedSearch, selectedItems]
+    [notSelectedItems, notSelectedSearch, selectedItems],
   );
 
   const onRemove = useCallback(
@@ -243,7 +246,7 @@ export const AlternativeSearch: Story = () => {
       notSelectedSearch,
       searchQuery,
       selectedItems,
-    ]
+    ],
   );
 
   const handleSearch = useCallback(
@@ -257,17 +260,17 @@ export const AlternativeSearch: Story = () => {
           }
           return items;
         },
-        {} as AllItems
+        {} as AllItems,
       );
       setNotSelectedSearch(tempNotSelectedItems);
     },
-    [notSelectedItems]
+    [notSelectedItems],
   );
 
   const renderItems = (
     list: AllItems,
     type: PicklistItemProps["type"],
-    handler: PicklistItemProps["onChange"]
+    handler: PicklistItemProps["onChange"],
   ) =>
     order.reduce((items, key) => {
       const item = list[key];
@@ -284,7 +287,7 @@ export const AlternativeSearch: Story = () => {
                 <p style={{ margin: 0 }}>{item.description}</p>
               </div>
             </div>
-          </PicklistItem>
+          </PicklistItem>,
         );
       }
       return items;
@@ -321,7 +324,7 @@ export const AlternativeSearch: Story = () => {
           {renderItems(
             isSearchMode ? notSelectedSearch : notSelectedItems,
             "add",
-            onAdd
+            onAdd,
           )}
         </Picklist>
         <Picklist
@@ -367,7 +370,7 @@ export const Grouped: Story = () => {
         ...notSelectedItems.filter((i) => i.key !== item.key),
       ]);
     },
-    [notSelectedItems, selectedItems]
+    [notSelectedItems, selectedItems],
   );
 
   const onRemove = useCallback(
@@ -375,20 +378,20 @@ export const Grouped: Story = () => {
       setNotSelectedItems([...notSelectedItems, item]);
       setSelectedItems([...selectedItems.filter((i) => i.key !== item.key)]);
     },
-    [notSelectedItems, selectedItems]
+    [notSelectedItems, selectedItems],
   );
 
   const addGroup = useCallback(
     (group: GroupKey) => {
       const groupItems = notSelectedItems.filter(
-        (item) => item.group === group
+        (item) => item.group === group,
       );
       setNotSelectedItems([
         ...notSelectedItems.filter((item) => item.group !== group),
       ]);
       setSelectedItems([...selectedItems, ...groupItems]);
     },
-    [notSelectedItems, selectedItems]
+    [notSelectedItems, selectedItems],
   );
 
   const removeGroup = useCallback(
@@ -400,13 +403,13 @@ export const Grouped: Story = () => {
       ]);
       setNotSelectedItems([...notSelectedItems, ...groupItems]);
     },
-    [notSelectedItems, selectedItems]
+    [notSelectedItems, selectedItems],
   );
 
   const renderItems = (
     list: MockData,
     type: PicklistItemProps["type"],
-    handler: PicklistItemProps["onChange"]
+    handler: PicklistItemProps["onChange"],
   ) => {
     if (!list) return null;
 
@@ -435,7 +438,7 @@ export const Grouped: Story = () => {
       >
         {Object.entries(allGroups).map(([key, value]) => {
           const groupItems = notSelectedItems.filter(
-            (item) => item.group === key
+            (item) => item.group === key,
           );
           return groupItems.length ? (
             <PicklistGroup
diff --git a/src/components/duelling-picklist/duelling-picklist.test.tsx b/src/components/duelling-picklist/duelling-picklist.test.tsx
index 70d7e41f3e..a359a09d00 100644
--- a/src/components/duelling-picklist/duelling-picklist.test.tsx
+++ b/src/components/duelling-picklist/duelling-picklist.test.tsx
@@ -14,13 +14,13 @@ import {
 
 const reducer = (
   oldState: { selected: number[]; unselected: number[] },
-  action: { type: "add" | "remove"; item: number }
+  action: { type: "add" | "remove"; item: number },
 ) => {
   const { selected, unselected } = oldState;
   switch (action.type) {
     case "add": {
       const index = unselected.findIndex(
-        (listItem) => listItem === action.item
+        (listItem) => listItem === action.item,
       );
       const selectedItem = unselected[index];
       const tempNotSelectedItems = [...unselected];
@@ -105,7 +105,7 @@ const groupReducer = (
     selected: { groupA: number[]; groupB: number[] };
     unselected: { groupA: number[]; groupB: number[] };
   },
-  action: { type: "add" | "remove"; group: "groupA" | "groupB" }
+  action: { type: "add" | "remove"; group: "groupA" | "groupB" },
 ) => {
   const { selected, unselected } = oldState;
   const { type, group } = action;
@@ -264,7 +264,7 @@ test("an item that is added to the selected items has an animation", async () =>
   await user.click(screen.getAllByRole("button", { name: "add" })[0]);
 
   expect(
-    within(screen.getAllByTestId("picklist")[1]).getAllByRole("listitem")[3]
+    within(screen.getAllByTestId("picklist")[1]).getAllByRole("listitem")[3],
   ).toHaveClass("picklist-item-enter");
 });
 
@@ -275,7 +275,7 @@ test("an item that is removed from the selected items has no animation", async (
   await user.click(screen.getAllByRole("button", { name: "remove" })[0]);
 
   expect(
-    within(screen.getAllByTestId("picklist")[0]).getAllByRole("listitem")[3]
+    within(screen.getAllByTestId("picklist")[0]).getAllByRole("listitem")[3],
   ).not.toHaveClass("picklist-item-enter");
 });
 
@@ -284,7 +284,7 @@ test("when the end key is pressed, the last item in the currently-focused list i
   render(<FullComponentExample />);
 
   const buttonsInFirstList = within(
-    screen.getAllByTestId("picklist")[0]
+    screen.getAllByTestId("picklist")[0],
   ).getAllByRole("button", { name: "add" });
   buttonsInFirstList[0].focus();
 
@@ -298,7 +298,7 @@ test("when the home key is pressed, the first item in the currently-focused list
   render(<FullComponentExample />);
 
   const buttonsInFirstList = within(
-    screen.getAllByTestId("picklist")[0]
+    screen.getAllByTestId("picklist")[0],
   ).getAllByRole("button", { name: "add" });
   buttonsInFirstList[2].focus();
 
@@ -312,7 +312,7 @@ test("when the a key other than home/end is pressed, focus is not changed", asyn
   render(<FullComponentExample />);
 
   const buttonsInFirstList = within(
-    screen.getAllByTestId("picklist")[0]
+    screen.getAllByTestId("picklist")[0],
   ).getAllByRole("button", { name: "add" });
   buttonsInFirstList[1].focus();
 
@@ -347,7 +347,7 @@ test.each([
 
     expect(onAdd).toHaveBeenCalledTimes(1);
     expect(onAdd).toHaveBeenCalledWith(1);
-  }
+  },
 );
 
 test("the Picklist component renders a custom empty placeholder when no children are present", () => {
@@ -360,13 +360,13 @@ test("the Picklist component renders a PicklistPlaceholder component if specifie
   render(
     <Picklist
       placeholder={<PicklistPlaceholder text="nothing to see here" />}
-    />
+    />,
   );
 
   expect(screen.getByText("nothing to see here")).toBeVisible();
   expect(screen.getByText("nothing to see here")).toHaveAttribute(
     "data-element",
-    "picklist-placeholder"
+    "picklist-placeholder",
   );
 });
 
@@ -376,7 +376,7 @@ test("the left label is rendered when the `leftLabel` prop is provided", () => {
   expect(screen.getByText("Left Label")).toBeVisible();
   expect(screen.getByText("Left Label")).toHaveAttribute(
     "data-element",
-    "picklist-left-label"
+    "picklist-left-label",
   );
 });
 
@@ -386,7 +386,7 @@ test("the right label is rendered when the `rightLabel` prop is provided", () =>
   expect(screen.getByText("Right Label")).toBeVisible();
   expect(screen.getByText("Right Label")).toHaveAttribute(
     "data-element",
-    "picklist-right-label"
+    "picklist-right-label",
   );
 });
 
@@ -394,13 +394,13 @@ test("the left controls are rendered when the `leftControls` prop is provided",
   render(
     <DuellingPicklist
       leftControls={<p data-element="custom-left-controls">left controls</p>}
-    />
+    />,
   );
 
   expect(screen.getByText("left controls")).toBeVisible();
   expect(screen.getByText("left controls")).toHaveAttribute(
     "data-element",
-    "custom-left-controls"
+    "custom-left-controls",
   );
 });
 
@@ -408,13 +408,13 @@ test("the right controls are rendered when the `rightControls` prop is provided"
   render(
     <DuellingPicklist
       rightControls={<p data-element="custom-right-controls">right controls</p>}
-    />
+    />,
   );
 
   expect(screen.getByText("right controls")).toBeVisible();
   expect(screen.getByText("right controls")).toHaveAttribute(
     "data-element",
-    "custom-right-controls"
+    "custom-right-controls",
   );
 });
 
@@ -423,7 +423,7 @@ test("no error is thrown when incorrect children are provided to the `Picklist`
     render(
       <DuellingPicklist>
         <Picklist>invalid</Picklist>
-      </DuellingPicklist>
+      </DuellingPicklist>,
     );
   }).not.toThrow();
 });
@@ -433,12 +433,12 @@ test("when the add button is clicked on an item, focus moves to the next item in
   render(<FullComponentExample />);
 
   const buttonsInFirstList = within(
-    screen.getAllByTestId("picklist")[0]
+    screen.getAllByTestId("picklist")[0],
   ).getAllByRole("button", { name: "add" });
   await user.click(buttonsInFirstList[1]);
 
   const remainingButtonsInFirstList = within(
-    screen.getAllByTestId("picklist")[0]
+    screen.getAllByTestId("picklist")[0],
   ).getAllByRole("button", { name: "add" });
   expect(remainingButtonsInFirstList[1]).toHaveFocus();
 });
@@ -448,14 +448,14 @@ test("when the last item button in the first picklist is clicked, focus moves to
   render(<FullComponentExample />);
 
   const allSourceButtons = within(
-    screen.getAllByTestId("picklist")[0]
+    screen.getAllByTestId("picklist")[0],
   ).getAllByRole("button", { name: "add" });
   await user.click(allSourceButtons[allSourceButtons.length - 1]);
 
   expect(
     within(screen.getAllByTestId("picklist")[1]).getAllByRole("button", {
       name: "remove",
-    })[0]
+    })[0],
   ).toHaveFocus();
 });
 
@@ -464,14 +464,14 @@ test("when the last item button in the second picklist is clicked, focus moves t
   render(<FullComponentExample />);
 
   const allSourceButtons = within(
-    screen.getAllByTestId("picklist")[1]
+    screen.getAllByTestId("picklist")[1],
   ).getAllByRole("button", { name: "remove" });
   await user.click(allSourceButtons[allSourceButtons.length - 1]);
 
   expect(
     within(screen.getAllByTestId("picklist")[0]).getAllByRole("button", {
       name: "add",
-    })[0]
+    })[0],
   ).toHaveFocus();
 });
 
@@ -485,7 +485,7 @@ test.each([
     render(<FullComponentExample />);
 
     const allSourceButtons = within(
-      screen.getAllByTestId("picklist")[0]
+      screen.getAllByTestId("picklist")[0],
     ).getAllByRole("button", { name: "add" });
     allSourceButtons[allSourceButtons.length - 1].focus();
     await user.keyboard(key);
@@ -493,9 +493,9 @@ test.each([
     expect(
       within(screen.getAllByTestId("picklist")[1]).getAllByRole("button", {
         name: "remove",
-      })[0]
+      })[0],
     ).toHaveFocus();
-  }
+  },
 );
 
 test.each([
@@ -508,7 +508,7 @@ test.each([
     render(<FullComponentExample />);
 
     const allSourceButtons = within(
-      screen.getAllByTestId("picklist")[1]
+      screen.getAllByTestId("picklist")[1],
     ).getAllByRole("button", { name: "remove" });
     allSourceButtons[allSourceButtons.length - 1].focus();
     await user.keyboard(key);
@@ -516,9 +516,9 @@ test.each([
     expect(
       within(screen.getAllByTestId("picklist")[0]).getAllByRole("button", {
         name: "add",
-      })[0]
+      })[0],
     ).toHaveFocus();
-  }
+  },
 );
 
 test("when the add button is clicked for an entire group, focus moves to the next group's add button", async () => {
@@ -526,13 +526,13 @@ test("when the add button is clicked for an entire group, focus moves to the nex
   render(<FullGroupedComponentExample />);
 
   const groupAddButtons = within(
-    screen.getAllByTestId("picklist")[0]
+    screen.getAllByTestId("picklist")[0],
   ).getAllByTestId("picklist-group-button");
   expect(groupAddButtons).toHaveLength(2);
   await user.click(groupAddButtons[0]);
 
   const remainingGroupAddButtons = within(
-    screen.getAllByTestId("picklist")[0]
+    screen.getAllByTestId("picklist")[0],
   ).getAllByTestId("picklist-group-button");
   expect(remainingGroupAddButtons).toHaveLength(1);
   expect(remainingGroupAddButtons[0]).toHaveFocus();
@@ -543,14 +543,14 @@ test("when the last group button in the first picklist is clicked, and the list
   render(<FullGroupedComponentExample />);
 
   const allSourceGroupButtons = within(
-    screen.getAllByTestId("picklist")[0]
+    screen.getAllByTestId("picklist")[0],
   ).getAllByTestId("picklist-group-button");
   await user.click(allSourceGroupButtons[allSourceGroupButtons.length - 1]);
 
   expect(
     within(screen.getAllByTestId("picklist")[1]).getAllByTestId(
-      "picklist-group-button"
-    )[0]
+      "picklist-group-button",
+    )[0],
   ).toHaveFocus();
 });
 
@@ -559,14 +559,14 @@ test("when the last group button in the second picklist is clicked, and the list
   render(<FullGroupedComponentExample />);
 
   const allSourceGroupButtons = within(
-    screen.getAllByTestId("picklist")[1]
+    screen.getAllByTestId("picklist")[1],
   ).getAllByTestId("picklist-group-button");
   await user.click(allSourceGroupButtons[allSourceGroupButtons.length - 1]);
 
   expect(
     within(screen.getAllByTestId("picklist")[0]).getAllByTestId(
-      "picklist-group-button"
-    )[0]
+      "picklist-group-button",
+    )[0],
   ).toHaveFocus();
 });
 
@@ -580,17 +580,17 @@ test.each([
     render(<FullGroupedComponentExample />);
 
     const allSourceGroupButtons = within(
-      screen.getAllByTestId("picklist")[0]
+      screen.getAllByTestId("picklist")[0],
     ).getAllByTestId("picklist-group-button");
     allSourceGroupButtons[allSourceGroupButtons.length - 1].focus();
     await user.keyboard(key);
 
     expect(
       within(screen.getAllByTestId("picklist")[1]).getAllByTestId(
-        "picklist-group-button"
-      )[0]
+        "picklist-group-button",
+      )[0],
     ).toHaveFocus();
-  }
+  },
 );
 
 test.each([
@@ -603,17 +603,17 @@ test.each([
     render(<FullGroupedComponentExample />);
 
     const allSourceGroupButtons = within(
-      screen.getAllByTestId("picklist")[1]
+      screen.getAllByTestId("picklist")[1],
     ).getAllByTestId("picklist-group-button");
     allSourceGroupButtons[allSourceGroupButtons.length - 1].focus();
     await user.keyboard(key);
 
     expect(
       within(screen.getAllByTestId("picklist")[0]).getAllByTestId(
-        "picklist-group-button"
-      )[0]
+        "picklist-group-button",
+      )[0],
     ).toHaveFocus();
-  }
+  },
 );
 
 // for coverage (styles are also tested in Playwright)
diff --git a/src/components/duelling-picklist/picklist-group/picklist-group.component.tsx b/src/components/duelling-picklist/picklist-group/picklist-group.component.tsx
index 957672ce31..12bee905ef 100644
--- a/src/components/duelling-picklist/picklist-group/picklist-group.component.tsx
+++ b/src/components/duelling-picklist/picklist-group/picklist-group.component.tsx
@@ -48,7 +48,7 @@ export const PicklistGroup = React.forwardRef<
       isLastGroup,
       ...transitionGroupProps
     }: PicklistGroupProps,
-    ref
+    ref,
   ) => {
     const { setElementToFocus, elementToFocus } = useContext(FocusContext);
     const [highlighted, setHighlighted] = useState(false);
@@ -68,7 +68,7 @@ export const PicklistGroup = React.forwardRef<
           setElementToFocus(index, listIndex);
         }
       },
-      [index, listIndex, onChange, setElementToFocus]
+      [index, listIndex, onChange, setElementToFocus],
     );
 
     const refs = useMemo(
@@ -77,9 +77,9 @@ export const PicklistGroup = React.forwardRef<
           {
             length: filteredChildren.length,
           },
-          () => React.createRef<HTMLLIElement>()
+          () => React.createRef<HTMLLIElement>(),
         ),
-      [filteredChildren.length]
+      [filteredChildren.length],
     );
 
     const content = React.Children.map<React.ReactNode, React.ReactNode>(
@@ -99,7 +99,7 @@ export const PicklistGroup = React.forwardRef<
         };
 
         return React.cloneElement(child, props);
-      }
+      },
     );
 
     useEffect(() => {
@@ -156,7 +156,7 @@ export const PicklistGroup = React.forwardRef<
         </StyledGroupWrapper>
       </CSSTransition>
     );
-  }
+  },
 );
 
 PicklistGroup.displayName = "PicklistGroup";
diff --git a/src/components/duelling-picklist/picklist-group/picklist-group.test.tsx b/src/components/duelling-picklist/picklist-group/picklist-group.test.tsx
index e72acb62e3..5671491799 100644
--- a/src/components/duelling-picklist/picklist-group/picklist-group.test.tsx
+++ b/src/components/duelling-picklist/picklist-group/picklist-group.test.tsx
@@ -18,7 +18,7 @@ const ComponentWithFocusContext = ({
   const elementToFocus = (
     itemIndex?: number,
     listIndex?: number,
-    groupIndex?: number
+    groupIndex?: number,
   ) => {
     setFocused({ itemIndex, listIndex, groupIndex });
     setElementToFocus(itemIndex, listIndex, groupIndex);
@@ -63,7 +63,7 @@ test("when the group button is clicked, the onChange callback prop and the setEl
           Item content
         </PicklistItem>
       </PicklistGroup>
-    </FocusContext.Provider>
+    </FocusContext.Provider>,
   );
 
   await user.click(screen.getByTestId("picklist-group-button"));
@@ -89,7 +89,7 @@ test("when the enter key is pressed with the group button focused, the onChange
           Item content
         </PicklistItem>
       </PicklistGroup>
-    </FocusContext.Provider>
+    </FocusContext.Provider>,
   );
 
   screen.getByTestId("picklist-group-button").focus();
@@ -116,7 +116,7 @@ test("when the space key is pressed with the group button focused, the onChange
           Item content
         </PicklistItem>
       </PicklistGroup>
-    </FocusContext.Provider>
+    </FocusContext.Provider>,
   );
 
   screen.getByTestId("picklist-group-button").focus();
@@ -143,7 +143,7 @@ test("when a key other than space or enter is pressed with the group button focu
           Item content
         </PicklistItem>
       </PicklistGroup>
-    </FocusContext.Provider>
+    </FocusContext.Provider>,
   );
 
   screen.getByTestId("picklist-group-button").focus();
@@ -160,7 +160,7 @@ test("when an 'add' button is hovered over, it should change the background colo
       <PicklistItem type="add" onChange={() => {}} item={1}>
         Item content
       </PicklistItem>
-    </PicklistGroup>
+    </PicklistGroup>,
   );
 
   await user.hover(screen.getByTestId("picklist-group-button"));
@@ -168,7 +168,7 @@ test("when an 'add' button is hovered over, it should change the background colo
   expect(screen.getAllByRole("listitem")[0]).toHaveStyleRule(
     "background",
     "var(--colorsActionMajor600)",
-    { modifier: `${StyledButton}` }
+    { modifier: `${StyledButton}` },
   );
 
   await user.unhover(screen.getByTestId("picklist-group-button"));
@@ -176,7 +176,7 @@ test("when an 'add' button is hovered over, it should change the background colo
   expect(screen.getAllByRole("listitem")[0]).not.toHaveStyleRule(
     "background",
     "var(--colorsActionMajor600)",
-    { modifier: `${StyledButton}` }
+    { modifier: `${StyledButton}` },
   );
 });
 
@@ -187,7 +187,7 @@ test("when a 'remove' button is hovered over, it should change the background co
       <PicklistItem type="remove" onChange={() => {}} item={1}>
         Item content
       </PicklistItem>
-    </PicklistGroup>
+    </PicklistGroup>,
   );
 
   await user.hover(screen.getByTestId("picklist-group-button"));
@@ -195,7 +195,7 @@ test("when a 'remove' button is hovered over, it should change the background co
   expect(screen.getAllByRole("listitem")[0]).toHaveStyleRule(
     "background",
     "var(--colorsSemanticNegative600)",
-    { modifier: `${StyledButton}` }
+    { modifier: `${StyledButton}` },
   );
 
   await user.unhover(screen.getByTestId("picklist-group-button"));
@@ -203,7 +203,7 @@ test("when a 'remove' button is hovered over, it should change the background co
   expect(screen.getAllByRole("listitem")[0]).not.toHaveStyleRule(
     "background",
     "var(--colorsSemanticNegative600)",
-    { modifier: `${StyledButton}` }
+    { modifier: `${StyledButton}` },
   );
 });
 
@@ -214,7 +214,7 @@ test("when an 'add' button is focused, it should change the background colour of
       <PicklistItem type="add" onChange={() => {}} item={1}>
         Item content
       </PicklistItem>
-    </PicklistGroup>
+    </PicklistGroup>,
   );
 
   screen.getByTestId("picklist-group-button").focus();
@@ -222,7 +222,7 @@ test("when an 'add' button is focused, it should change the background colour of
   expect(screen.getAllByRole("listitem")[0]).toHaveStyleRule(
     "background",
     "var(--colorsActionMajor600)",
-    { modifier: `${StyledButton}` }
+    { modifier: `${StyledButton}` },
   );
 
   await user.tab();
@@ -230,7 +230,7 @@ test("when an 'add' button is focused, it should change the background colour of
   expect(screen.getAllByRole("listitem")[0]).not.toHaveStyleRule(
     "background",
     "var(--colorsActionMajor600)",
-    { modifier: `${StyledButton}` }
+    { modifier: `${StyledButton}` },
   );
 });
 
@@ -241,7 +241,7 @@ test("when a 'remove' button is focused, it should change the background colour
       <PicklistItem type="remove" onChange={() => {}} item={1}>
         Item content
       </PicklistItem>
-    </PicklistGroup>
+    </PicklistGroup>,
   );
 
   screen.getByTestId("picklist-group-button").focus();
@@ -249,7 +249,7 @@ test("when a 'remove' button is focused, it should change the background colour
   expect(screen.getAllByRole("listitem")[0]).toHaveStyleRule(
     "background",
     "var(--colorsSemanticNegative600)",
-    { modifier: `${StyledButton}` }
+    { modifier: `${StyledButton}` },
   );
 
   await user.tab();
@@ -257,7 +257,7 @@ test("when a 'remove' button is focused, it should change the background colour
   expect(screen.getAllByRole("listitem")[0]).not.toHaveStyleRule(
     "background",
     "var(--colorsSemanticNegative600)",
-    { modifier: `${StyledButton}` }
+    { modifier: `${StyledButton}` },
   );
 });
 
@@ -270,7 +270,7 @@ test("no error is thrown when incorrect children are provided", () => {
         <PicklistGroup title="Title" onChange={() => {}} type="add">
           invalid
         </PicklistGroup>
-      </FocusContext.Provider>
+      </FocusContext.Provider>,
     );
   }).not.toThrow();
 });
@@ -290,7 +290,7 @@ it.each([
     expect(setElementToFocus).toHaveBeenCalledWith(
       itemIndex,
       listIndex,
-      groupIndex
+      groupIndex,
     );
-  }
+  },
 );
diff --git a/src/components/duelling-picklist/picklist-item/picklist-item.component.tsx b/src/components/duelling-picklist/picklist-item/picklist-item.component.tsx
index 4c5d2c30fd..4213a5576c 100644
--- a/src/components/duelling-picklist/picklist-item/picklist-item.component.tsx
+++ b/src/components/duelling-picklist/picklist-item/picklist-item.component.tsx
@@ -55,7 +55,7 @@ export const PicklistItem = React.forwardRef<
       isLastItem,
       ...transitionGroupProps
     }: PicklistItemProps,
-    ref
+    ref,
   ) => {
     const { setElementToFocus } = useContext(FocusContext);
     const picklistItemNodeRef = useRef<HTMLLIElement | null>(null);
@@ -97,7 +97,7 @@ export const PicklistItem = React.forwardRef<
           updateFocusElement();
         }
       },
-      [onChange, item, updateFocusElement]
+      [onChange, item, updateFocusElement],
     );
 
     return (
@@ -135,7 +135,7 @@ export const PicklistItem = React.forwardRef<
         </StyledPicklistItem>
       </CSSTransition>
     );
-  }
+  },
 );
 
 PicklistItem.displayName = "PicklistItem";
diff --git a/src/components/duelling-picklist/picklist-item/picklist-item.test.tsx b/src/components/duelling-picklist/picklist-item/picklist-item.test.tsx
index 6175da9579..69a68bd8c2 100644
--- a/src/components/duelling-picklist/picklist-item/picklist-item.test.tsx
+++ b/src/components/duelling-picklist/picklist-item/picklist-item.test.tsx
@@ -22,7 +22,7 @@ test("the context callback is called with the expected arguments when isLastItem
       >
         Item content
       </PicklistItem>
-    </FocusContext.Provider>
+    </FocusContext.Provider>,
   );
 
   await user.click(screen.getByTestId("picklist-item-button"));
@@ -47,7 +47,7 @@ test("the context callback is called with the expected arguments when isLastItem
       >
         Item content
       </PicklistItem>
-    </FocusContext.Provider>
+    </FocusContext.Provider>,
   );
 
   await user.click(screen.getByTestId("picklist-item-button"));
@@ -71,7 +71,7 @@ test("the context callback is called with the expected arguments when isLastItem
       >
         Item content
       </PicklistItem>
-    </FocusContext.Provider>
+    </FocusContext.Provider>,
   );
 
   await user.click(screen.getByTestId("picklist-item-button"));
@@ -87,18 +87,18 @@ test("should render a locked icon with expected styling when the `locked` prop i
         Item content
       </PicklistItem>
       )
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByTestId("icon")).toHaveStyleRule(
     "content",
     `"${iconUnicodes.locked}"`,
-    { modifier: "&::before" }
+    { modifier: "&::before" },
   );
 
   expect(screen.getByTestId("icon")).toHaveStyleRule(
     "outline",
     "2px solid var(--colorsSemanticFocus500)",
-    { modifier: ":focus" }
+    { modifier: ":focus" },
   );
 });
diff --git a/src/components/duelling-picklist/picklist/picklist.component.tsx b/src/components/duelling-picklist/picklist/picklist.component.tsx
index 0a8bafad4e..027e75fb14 100644
--- a/src/components/duelling-picklist/picklist/picklist.component.tsx
+++ b/src/components/duelling-picklist/picklist/picklist.component.tsx
@@ -25,9 +25,10 @@ export const Picklist = ({
 }: PicklistProps) => {
   const { elementToFocus, setElementToFocus } = useContext(FocusContext);
 
-  const isEmpty = useMemo(() => !React.Children.toArray(children).length, [
-    children,
-  ]);
+  const isEmpty = useMemo(
+    () => !React.Children.toArray(children).length,
+    [children],
+  );
 
   const filteredChildren = React.Children.toArray(children);
 
@@ -37,9 +38,9 @@ export const Picklist = ({
         {
           length: filteredChildren.length,
         },
-        () => React.createRef<HTMLLIElement>()
+        () => React.createRef<HTMLLIElement>(),
       ),
-    [filteredChildren.length]
+    [filteredChildren.length],
   );
 
   const focusItem = useCallback(
@@ -47,7 +48,7 @@ export const Picklist = ({
       ev.preventDefault();
       refs[itemIndex].current?.focus();
     },
-    [refs]
+    [refs],
   );
 
   const handleKeyDown = useCallback(
@@ -58,7 +59,7 @@ export const Picklist = ({
         focusItem(ev, refs.length - 1);
       }
     },
-    [focusItem, refs]
+    [focusItem, refs],
   );
 
   const content = filteredChildren.map<React.ReactNode>((child, childIndex) => {
diff --git a/src/components/fieldset/fieldset.component.tsx b/src/components/fieldset/fieldset.component.tsx
index 70502a7f79..d91aac1b57 100644
--- a/src/components/fieldset/fieldset.component.tsx
+++ b/src/components/fieldset/fieldset.component.tsx
@@ -31,7 +31,7 @@ export const Fieldset = ({
   useEffect(() => {
     if (ref && required) {
       Array.from(
-        ref.querySelectorAll("input") || /* istanbul ignore next */ []
+        ref.querySelectorAll("input") || /* istanbul ignore next */ [],
       ).forEach((el) => {
         el.setAttribute("required", "");
       });
diff --git a/src/components/fieldset/fieldset.pw.tsx b/src/components/fieldset/fieldset.pw.tsx
index 9c41e78157..e743b9d352 100644
--- a/src/components/fieldset/fieldset.pw.tsx
+++ b/src/components/fieldset/fieldset.pw.tsx
@@ -43,7 +43,7 @@ test.describe("should render Fieldset component", () => {
             labelAlign="right"
             {...{ [type]: "Message" }}
           />
-        </Fieldset>
+        </Fieldset>,
       );
 
       const validationIcon = getDataElementByValue(page, "input")
@@ -68,7 +68,7 @@ test.describe("should render Fieldset component", () => {
             validationOnLabel
             {...{ [type]: "Message" }}
           />
-        </Fieldset>
+        </Fieldset>,
       );
 
       const validationIcon = getDataElementByValue(page, "label")
@@ -79,14 +79,16 @@ test.describe("should render Fieldset component", () => {
     });
   });
 
-  ([
-    [VALIDATION.ERROR, "error", true],
-    [VALIDATION.WARNING, "warning", true],
-    [VALIDATION.INFO, "info", true],
-    ["rgb(102, 132, 148)", "error", false],
-    ["rgb(102, 132, 148)", "warning", false],
-    ["rgb(102, 132, 148)", "info", false],
-  ] as [string, string, boolean][]).forEach(([borderColor, type, bool]) => {
+  (
+    [
+      [VALIDATION.ERROR, "error", true],
+      [VALIDATION.WARNING, "warning", true],
+      [VALIDATION.INFO, "info", true],
+      ["rgb(102, 132, 148)", "error", false],
+      ["rgb(102, 132, 148)", "warning", false],
+      ["rgb(102, 132, 148)", "info", false],
+    ] as [string, string, boolean][]
+  ).forEach(([borderColor, type, bool]) => {
     test(`should verify input border color is ${borderColor} when validation is ${type} and boolean prop is ${bool}`, async ({
       mount,
       page,
@@ -99,7 +101,7 @@ test.describe("should render Fieldset component", () => {
             labelAlign="right"
             {...{ [type]: bool }}
           />
-        </Fieldset>
+        </Fieldset>,
       );
 
       const input = getDataElementByValue(page, "input").first().locator("..");
@@ -107,11 +109,13 @@ test.describe("should render Fieldset component", () => {
     });
   });
 
-  ([
-    [0, 0],
-    [32, 4],
-    [56, 7],
-  ] as [number, FormProps["fieldSpacing"]][]).forEach(([margin, spacing]) => {
+  (
+    [
+      [0, 0],
+      [32, 4],
+      [56, 7],
+    ] as [number, FormProps["fieldSpacing"]][]
+  ).forEach(([margin, spacing]) => {
     test(`should verify component is displayed inside a Form and field spacing is ${margin}`, async ({
       mount,
       page,
@@ -123,7 +127,7 @@ test.describe("should render Fieldset component", () => {
             <Textbox label="Fieldset 1 Field 2" labelInline />
           </Fieldset>
           <Textbox label="Separate Field" labelInline />
-        </Form>
+        </Form>,
       );
 
       const form = getDataElementByValue(page, "form").locator("fieldset");
@@ -174,7 +178,7 @@ test.describe("Accessibility tests for Fieldset component", () => {
             labelAlign="right"
             {...{ [type]: bool }}
           />
-        </Fieldset>
+        </Fieldset>,
       );
 
       await checkAccessibility(page);
@@ -193,7 +197,7 @@ test.describe("Accessibility tests for Fieldset component", () => {
             <Textbox label="Fieldset 1 Field 2" labelInline />
           </Fieldset>
           <Textbox label="Separate Field" labelInline />
-        </Form>
+        </Form>,
       );
       await checkAccessibility(page);
     });
@@ -212,7 +216,7 @@ test.describe("Accessibility tests for Fieldset component", () => {
             labelAlign="right"
             {...{ [type]: "Message" }}
           />
-        </Fieldset>
+        </Fieldset>,
       );
 
       await checkAccessibility(page);
@@ -233,7 +237,7 @@ test.describe("Accessibility tests for Fieldset component", () => {
             validationOnLabel
             {...{ [type]: "Message" }}
           />
-        </Fieldset>
+        </Fieldset>,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/fieldset/fieldset.test.tsx b/src/components/fieldset/fieldset.test.tsx
index 72da860f64..a9217fa5e6 100644
--- a/src/components/fieldset/fieldset.test.tsx
+++ b/src/components/fieldset/fieldset.test.tsx
@@ -18,7 +18,7 @@ test("Fieldset adds the required attribute to any child inputs when isRequired i
     <Fieldset required>
       <input />
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
   const inputs = screen.getAllByRole("textbox");
   inputs.forEach((input) => expect(input).toBeRequired());
@@ -29,7 +29,7 @@ test("Fieldset does not add the required attribute to any child inputs when isRe
     <Fieldset>
       <input />
       <input />
-    </Fieldset>
+    </Fieldset>,
   );
   const inputs = screen.getAllByRole("textbox");
   inputs.forEach((input) => expect(input).not.toBeRequired());
@@ -41,7 +41,7 @@ test("Fieldset Legend adds an (optional) after the text when set to isOptional",
   render(
     <Fieldset legend="This is my custom legend" isOptional>
       <Textbox onChange={() => {}} />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const legend = screen.getByText("This is my custom legend");
@@ -52,7 +52,7 @@ test("Fieldset Legend adds an asterisk after the text when the field is mandator
   render(
     <Fieldset legend="This is my custom legend" required>
       <Textbox onChange={() => {}} />
-    </Fieldset>
+    </Fieldset>,
   );
 
   const legend = screen.getByText("This is my custom legend");
diff --git a/src/components/file-input/__internal__/file-upload-status/file-upload-status.test.tsx b/src/components/file-input/__internal__/file-upload-status/file-upload-status.test.tsx
index 8250a2b906..5a346b2c3b 100644
--- a/src/components/file-input/__internal__/file-upload-status/file-upload-status.test.tsx
+++ b/src/components/file-input/__internal__/file-upload-status/file-upload-status.test.tsx
@@ -12,7 +12,7 @@ test("when `status` is uploading, the component renders the provided status mess
       onAction={() => {}}
       progress={30}
       message="my status message"
-    />
+    />,
   );
 
   expect(screen.getByText("my status message")).toBeVisible();
@@ -25,7 +25,7 @@ test("when `status` is uploading, the component renders the default status messa
       filename="foo.pdf"
       onAction={() => {}}
       progress={30}
-    />
+    />,
   );
 
   expect(screen.getByText("File upload status")).toBeVisible();
@@ -40,7 +40,7 @@ test("when `status` is uploading, the component renders a button with the cancel
       filename="foo.pdf"
       onAction={onAction}
       progress={30}
-    />
+    />,
   );
 
   const actionButton = screen.getByRole("button", {
@@ -58,12 +58,12 @@ test("when `status` is uploading, the component renders the file name, but not a
       filename="foo.pdf"
       onAction={() => {}}
       progress={30}
-    />
+    />,
   );
 
   expect(screen.getByText("foo.pdf")).toBeVisible();
   expect(
-    screen.queryByRole("link", { name: "foo.pdf" })
+    screen.queryByRole("link", { name: "foo.pdf" }),
   ).not.toBeInTheDocument();
 });
 
@@ -74,7 +74,7 @@ test("when `status` is uploading, the component renders a progress tracker bar w
       filename="foo.pdf"
       onAction={() => {}}
       progress={30}
-    />
+    />,
   );
 
   expect(screen.getByTestId("progress-tracker-bar")).toBeVisible();
@@ -87,7 +87,7 @@ test("when `status` is uploading, the component renders a loader bar if the prog
       status="uploading"
       filename="foo.pdf"
       onAction={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByRole("progressbar")).toBeVisible();
@@ -101,7 +101,7 @@ test("when `status` is completed, the component renders the provided status mess
       href="http://carbon.sage.com"
       onAction={() => {}}
       message="my status message"
-    />
+    />,
   );
 
   expect(screen.getByText("my status message")).toBeVisible();
@@ -114,7 +114,7 @@ test("when `status` is completed, the component renders the default status messa
       filename="foo.pdf"
       href="http://carbon.sage.com"
       onAction={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByText("File upload status")).toBeVisible();
@@ -129,7 +129,7 @@ test("when `status` is completed, the component renders a button with the delete
       filename="foo.pdf"
       href="http://carbon.sage.com"
       onAction={onAction}
-    />
+    />,
   );
 
   const actionButton = screen.getByRole("button", { name: "Delete file" });
@@ -147,7 +147,7 @@ test("when `status` is completed, the component renders the file name as a link
       target="_blank"
       rel="noreferrer"
       onAction={() => {}}
-    />
+    />,
   );
 
   const link = screen.queryByRole("link", { name: "foo.pdf" });
@@ -165,7 +165,7 @@ test("when `status` is completed, the component does not render a progress bar",
       filename="foo.pdf"
       href="http://carbon.sage.com"
       onAction={() => {}}
-    />
+    />,
   );
 
   expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
@@ -179,7 +179,7 @@ test("when `status` is previously, the component does not render a status messag
       href="http://carbon.sage.com"
       onAction={() => {}}
       message="my status message"
-    />
+    />,
   );
 
   expect(screen.queryByText("my status message")).not.toBeInTheDocument();
@@ -194,7 +194,7 @@ test("when `status` is previously, the component renders the file name as a link
       target="_blank"
       rel="noreferrer"
       onAction={() => {}}
-    />
+    />,
   );
 
   const link = screen.queryByRole("link", { name: "foo.pdf" });
@@ -214,7 +214,7 @@ test("when `status` is previously, the component renders a button with the delet
       filename="foo.pdf"
       href="http://carbon.sage.com"
       onAction={onAction}
-    />
+    />,
   );
 
   const actionButton = screen.getByRole("button", { name: "Delete file" });
@@ -230,7 +230,7 @@ test("when `status` is previously, the component does not render a progress bar"
       filename="foo.pdf"
       href="http://carbon.sage.com"
       onAction={() => {}}
-    />
+    />,
   );
 
   expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
@@ -243,7 +243,7 @@ test("when `status` is error, the component renders the provided status message"
       filename="foo.pdf"
       onAction={() => {}}
       message="my status message"
-    />
+    />,
   );
 
   expect(screen.getByText("my status message")).toBeVisible();
@@ -251,7 +251,7 @@ test("when `status` is error, the component renders the provided status message"
 
 test("when `status` is error, the component renders the default status message if none is provided", () => {
   render(
-    <FileUploadStatus status="error" filename="foo.pdf" onAction={() => {}} />
+    <FileUploadStatus status="error" filename="foo.pdf" onAction={() => {}} />,
   );
 
   expect(screen.getByText("File upload status")).toBeVisible();
@@ -266,7 +266,7 @@ test("when `status` is error, the component renders a button with the clear text
       filename="foo.pdf"
       onAction={onAction}
       message="my status message"
-    />
+    />,
   );
 
   const actionButton = screen.getByRole("button", { name: "Clear" });
@@ -277,18 +277,18 @@ test("when `status` is error, the component renders a button with the clear text
 
 test("when `status` is error, the component renders the file name, but not as a link", () => {
   render(
-    <FileUploadStatus status="error" filename="foo.pdf" onAction={() => {}} />
+    <FileUploadStatus status="error" filename="foo.pdf" onAction={() => {}} />,
   );
 
   expect(screen.getByText("foo.pdf")).toBeVisible();
   expect(
-    screen.queryByRole("link", { name: "foo.pdf" })
+    screen.queryByRole("link", { name: "foo.pdf" }),
   ).not.toBeInTheDocument();
 });
 
 test("when `status` is error, the component does not render a progress bar", () => {
   render(
-    <FileUploadStatus status="error" filename="foo.pdf" onAction={() => {}} />
+    <FileUploadStatus status="error" filename="foo.pdf" onAction={() => {}} />,
   );
 
   expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
diff --git a/src/components/file-input/file-input.component.tsx b/src/components/file-input/file-input.component.tsx
index 7167d68e98..610524f11a 100644
--- a/src/components/file-input/file-input.component.tsx
+++ b/src/components/file-input/file-input.component.tsx
@@ -83,7 +83,7 @@ export const FileInput = React.forwardRef(
       uploadStatus = [],
       ...rest
     }: FileInputProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     const locale = useLocale();
     const textOnButton = buttonText || locale.fileInput.selectFile();
@@ -243,7 +243,7 @@ export const FileInput = React.forwardRef(
         </FormField>
       </InputBehaviour>
     );
-  }
+  },
 );
 
 FileInput.displayName = "FileInput";
diff --git a/src/components/file-input/file-input.pw.tsx b/src/components/file-input/file-input.pw.tsx
index 896471e624..20fd3d8bd0 100644
--- a/src/components/file-input/file-input.pw.tsx
+++ b/src/components/file-input/file-input.pw.tsx
@@ -68,7 +68,7 @@ const dragFile = async ({
       bufferData: `data:application/octet-stream;base64,${buffer}`,
       localFileName: fileName,
       localFileType: fileType,
-    }
+    },
   );
 
   await page.dispatchEvent(selector, eventName, { dataTransfer });
@@ -196,7 +196,7 @@ test.describe("FileInput component", () => {
       .evaluate((el) =>
         window
           .getComputedStyle(el.parentElement as HTMLElement)
-          .getPropertyValue("border-color")
+          .getPropertyValue("border-color"),
       );
     // TODO: should check token value (--colorsSemanticNegative500), rewrite this when we have the equivalent playwright util merged in
     await expect(borderColor).toBe("rgb(203, 55, 74)");
@@ -209,7 +209,7 @@ test.describe("FileInput component", () => {
       .evaluate((el) =>
         window
           .getComputedStyle(el.parentElement as HTMLElement)
-          .getPropertyValue("border-color")
+          .getPropertyValue("border-color"),
       );
     // TODO: should check token value (--colorsSemanticNegative500), rewrite this when we have the equivalent playwright util merged in
     await expect(borderColor).toBe("rgb(203, 55, 74)");
@@ -234,7 +234,7 @@ test.describe("FileInput component", () => {
       await mount(<FileInputComponent name={testVal} />);
       await expect(hiddenInput(page, "File input")).toHaveAttribute(
         "name",
-        testVal
+        testVal,
       );
     });
   });
@@ -285,7 +285,7 @@ test.describe("with uploadStatus prop", () => {
       await mount(
         <FileInputComponent
           uploadStatus={{ ...statusProps, iconType: "pdf" }}
-        />
+        />,
       );
 
       const icon = page.getByTestId("icon");
@@ -328,7 +328,7 @@ test.describe("with uploadStatus prop", () => {
     await mount(
       <FileInputComponent
         uploadStatus={{ ...uploadingStatusProps, onAction }}
-      />
+      />,
     );
     const actionButton = await page.getByRole("button", {
       name: "Cancel upload",
@@ -354,7 +354,7 @@ test.describe("with uploadStatus prop", () => {
     await mount(<FileInputComponent uploadStatus={uploadingStatusProps} />);
 
     const progressTrackerBar = page.locator(
-      '[data-element="progress-tracker-bar"]'
+      '[data-element="progress-tracker-bar"]',
     );
     const innerBar = page.locator('[data-element="inner-bar"]');
 
@@ -369,7 +369,7 @@ test.describe("with uploadStatus prop", () => {
     await mount(
       <FileInputComponent
         uploadStatus={{ ...uploadingStatusProps, progress: undefined }}
-      />
+      />,
     );
     const loaderBar = await page.getByRole("progressbar");
     await expect(loaderBar).toBeVisible();
@@ -395,7 +395,7 @@ test.describe("with uploadStatus prop", () => {
     await mount(
       <FileInputComponent
         uploadStatus={{ ...completedStatusProps, onAction }}
-      />
+      />,
     );
     const actionButton = await page.getByRole("button", {
       name: "Delete file",
@@ -456,7 +456,7 @@ test.describe("with uploadStatus prop", () => {
     await mount(
       <FileInputComponent
         uploadStatus={{ ...previouslyStatusProps, onAction }}
-      />
+      />,
     );
     const actionButton = await page.getByRole("button", {
       name: "Delete file",
@@ -491,7 +491,7 @@ test.describe("with uploadStatus prop", () => {
       clickCount += 1;
     };
     await mount(
-      <FileInputComponent uploadStatus={{ ...errorStatusProps, onAction }} />
+      <FileInputComponent uploadStatus={{ ...errorStatusProps, onAction }} />,
     );
     const actionButton = await page.getByRole("button", { name: "Clear" });
     await expect(actionButton).toBeVisible();
@@ -532,7 +532,7 @@ test.describe("interactions", () => {
     await selectFileButton(page).click();
     const fileChooser = await fileChooserPromise;
     await fileChooser.setFiles(
-      path.join(process.cwd(), "playwright", "README.md")
+      path.join(process.cwd(), "playwright", "README.md"),
     );
     await expect(onChangeCalls.length).toBe(1);
     await expect(onChangeCalls[0]).toMatchObject({
@@ -585,7 +585,7 @@ test.describe("interactions", () => {
       .evaluate((el) =>
         window
           .getComputedStyle(el.parentElement as HTMLElement)
-          .getPropertyValue("border-width")
+          .getPropertyValue("border-width"),
       );
     await expect(borderWidth).toBe("2px");
   });
@@ -616,7 +616,7 @@ test.describe("interactions", () => {
       .evaluate((el) =>
         window
           .getComputedStyle(el.parentElement as HTMLElement)
-          .getPropertyValue("border-width")
+          .getPropertyValue("border-width"),
       );
     await expect(borderWidth).toBe("1px");
   });
@@ -647,7 +647,7 @@ test.describe("interactions", () => {
       .evaluate((el) =>
         window
           .getComputedStyle(el.parentElement as HTMLElement)
-          .getPropertyValue("border-width")
+          .getPropertyValue("border-width"),
       );
     await expect(borderWidth).toBe("1px");
   });
@@ -670,7 +670,7 @@ test.describe("interactions", () => {
       .evaluate((el) =>
         window
           .getComputedStyle(el.parentElement as HTMLElement)
-          .getPropertyValue("border-color")
+          .getPropertyValue("border-color"),
       );
     // TODO: should check token value (--colorsSemanticNegative600), rewrite this when we have the equivalent playwright util merged in
     await expect(borderColor).toBe("rgb(162, 44, 59)");
@@ -694,7 +694,7 @@ test.describe("interactions", () => {
       .evaluate((el) =>
         window
           .getComputedStyle(el.parentElement as HTMLElement)
-          .getPropertyValue("background-color")
+          .getPropertyValue("background-color"),
       );
     await expect(backgroundColor).toBe("rgb(204, 214, 219)");
   });
diff --git a/src/components/file-input/file-input.test.tsx b/src/components/file-input/file-input.test.tsx
index b7c45e816f..118ae4e77f 100644
--- a/src/components/file-input/file-input.test.tsx
+++ b/src/components/file-input/file-input.test.tsx
@@ -22,7 +22,11 @@ describe("rendering with no file uploaded", () => {
 
   it("accepts an accept prop and passes it to the underlying input", () => {
     render(
-      <FileInput label="file input" accept="image/*,.pdf" onChange={() => {}} />
+      <FileInput
+        label="file input"
+        accept="image/*,.pdf"
+        onChange={() => {}}
+      />,
     );
 
     const hiddenInput = screen.getByLabelText("file input");
@@ -64,7 +68,7 @@ describe("rendering with no file uploaded", () => {
         data-element="element-test"
         data-role="role-test"
         onChange={() => {}}
-      />
+      />,
     );
 
     const rootContainer = screen.getByTestId("role-test");
@@ -79,7 +83,7 @@ describe("rendering with no file uploaded", () => {
     const inputArea = screen.getByTestId("file-input-presentation");
 
     expect(inputArea).toHaveStyle(
-      "border: var(--borderWidth200) dashed var(--colorsSemanticNegative500)"
+      "border: var(--borderWidth200) dashed var(--colorsSemanticNegative500)",
     );
   });
 
@@ -89,14 +93,14 @@ describe("rendering with no file uploaded", () => {
     const inputArea = screen.getByTestId("file-input-presentation");
 
     expect(inputArea).toHaveStyle(
-      "border: var(--borderWidth200) dashed var(--colorsSemanticNegative500)"
+      "border: var(--borderWidth200) dashed var(--colorsSemanticNegative500)",
     );
     expect(screen.getByText("error text")).toBeVisible();
   });
 
   it("accepts a name prop and passes it to the underlying input", () => {
     render(
-      <FileInput label="file input" name="input-name" onChange={() => {}} />
+      <FileInput label="file input" name="input-name" onChange={() => {}} />,
     );
 
     const hiddenInput = screen.getByLabelText("file input");
@@ -120,7 +124,7 @@ describe("rendering with no file uploaded", () => {
       '"(optional)"',
       {
         modifier: "::after",
-      }
+      },
     );
   });
 
@@ -128,7 +132,7 @@ describe("rendering with no file uploaded", () => {
     render(<FileInput isVertical onChange={() => {}} />);
 
     expect(screen.getByTestId("file-input-presentation")).toHaveStyle(
-      "flex-direction: column"
+      "flex-direction: column",
     );
   });
 
@@ -137,7 +141,7 @@ describe("rendering with no file uploaded", () => {
       current: null,
     };
     render(
-      <FileInput label="file input" ref={refObject} onChange={() => {}} />
+      <FileInput label="file input" ref={refObject} onChange={() => {}} />,
     );
 
     const hiddenInput = screen.getByLabelText("file input");
@@ -148,7 +152,7 @@ describe("rendering with no file uploaded", () => {
   it("accepts a callback ref", () => {
     const callbackRef = jest.fn();
     render(
-      <FileInput label="file input" ref={callbackRef} onChange={() => {}} />
+      <FileInput label="file input" ref={callbackRef} onChange={() => {}} />,
     );
 
     const hiddenInput = screen.getByLabelText("file input");
@@ -197,7 +201,7 @@ describe("interactions", () => {
     });
 
     expect(screen.getByTestId("file-input-presentation")).toHaveStyle(
-      "border: var(--borderWidth200) dashed var(--colorsUtilityMajor400)"
+      "border: var(--borderWidth200) dashed var(--colorsUtilityMajor400)",
     );
   });
 
@@ -212,7 +216,7 @@ describe("interactions", () => {
     });
 
     expect(screen.getByTestId("file-input-presentation")).toHaveStyle(
-      "border: var(--borderWidth200) dashed var(--colorsSemanticNegative600)"
+      "border: var(--borderWidth200) dashed var(--colorsSemanticNegative600)",
     );
   });
 
@@ -224,7 +228,7 @@ describe("interactions", () => {
     });
 
     expect(screen.getByTestId("file-input-presentation")).toHaveStyle(
-      "border: var(--borderWidth100) dashed var(--colorsUtilityMajor300)"
+      "border: var(--borderWidth100) dashed var(--colorsUtilityMajor300)",
     );
   });
 
@@ -321,7 +325,7 @@ describe("with uploadStatus prop set", () => {
           label="file input"
           uploadStatus={statusProps}
           onChange={() => {}}
-        />
+        />,
       );
 
       const hiddenInput = screen.queryByLabelText("file input");
@@ -329,7 +333,7 @@ describe("with uploadStatus prop set", () => {
 
       expect(hiddenInput).not.toBeInTheDocument();
       expect(button).not.toBeInTheDocument();
-    }
+    },
   );
 
   it("when the status is `uploading` and progress is set, a progress tracker is rendered", () => {
@@ -342,7 +346,7 @@ describe("with uploadStatus prop set", () => {
           progress: 30,
         }}
         onChange={() => {}}
-      />
+      />,
     );
 
     expect(screen.getByTestId("progress-tracker-bar")).toBeVisible();
@@ -359,7 +363,7 @@ describe("with uploadStatus prop set", () => {
           href: "http://carbon.sage.com",
         }}
         onChange={() => {}}
-      />
+      />,
     );
 
     expect(screen.getByRole("link", { name: "foo.pdf" })).toBeVisible();
@@ -376,7 +380,7 @@ describe("with uploadStatus prop set", () => {
           href: "http://carbon.sage.com",
         }}
         onChange={() => {}}
-      />
+      />,
     );
 
     expect(screen.getByRole("link", { name: "foo.pdf" })).toBeVisible();
@@ -392,13 +396,13 @@ describe("with uploadStatus prop set", () => {
           onAction: () => {},
         }}
         onChange={() => {}}
-      />
+      />,
     );
 
     const fileUploadStatus = screen.getByTestId("file-upload-status");
 
     expect(fileUploadStatus).toHaveStyle(
-      "border: var(--borderWidth200) solid var(--colorsSemanticNegative500)"
+      "border: var(--borderWidth200) solid var(--colorsSemanticNegative500)",
     );
   });
 });
diff --git a/src/components/flat-table/__internal__/build-position-map.ts b/src/components/flat-table/__internal__/build-position-map.ts
index 703263e984..5975f89841 100644
--- a/src/components/flat-table/__internal__/build-position-map.ts
+++ b/src/components/flat-table/__internal__/build-position-map.ts
@@ -1,6 +1,6 @@
 export default (
   array: HTMLElement[],
-  propertyName: "offsetWidth" | "offsetHeight"
+  propertyName: "offsetWidth" | "offsetHeight",
 ) =>
   array.reduce((acc: Record<string, number>, _, index) => {
     const currentId = array[index].getAttribute("id");
diff --git a/src/components/flat-table/__internal__/use-table-cell.ts b/src/components/flat-table/__internal__/use-table-cell.ts
index e81086c0b4..ab1aa73d04 100644
--- a/src/components/flat-table/__internal__/use-table-cell.ts
+++ b/src/components/flat-table/__internal__/use-table-cell.ts
@@ -28,7 +28,7 @@ export default (id: string) => {
     ev:
       | React.MouseEvent<HTMLElement, MouseEvent>
       | React.FocusEvent<HTMLElement>,
-    tagName: "TD" | "TH"
+    tagName: "TD" | "TH",
   ) => {
     /* istanbul ignore if */
     if (
@@ -56,7 +56,7 @@ export default (id: string) => {
 
     // get all the th and td elements that are sticky
     const stickyCells = Array.from(
-      (tableBody as HTMLElement).querySelectorAll("th, td")
+      (tableBody as HTMLElement).querySelectorAll("th, td"),
     ).filter((el) => {
       return (
         el.getAttribute("data-sticky-align") === "left" ||
@@ -73,14 +73,14 @@ export default (id: string) => {
 
     // find the current cell in the path
     const cell = path.find(
-      (el) => el instanceof HTMLElement && el.tagName === tagName
+      (el) => el instanceof HTMLElement && el.tagName === tagName,
     );
 
     // if the current cell is sticky, increase the z-index value
     const cellIndex = stickyCells.indexOf(cell as HTMLTableCellElement);
     if (cellIndex !== -1) {
       (stickyCells[cellIndex] as HTMLTableCellElement).classList.add(
-        "bringToFront"
+        "bringToFront",
       );
     }
   };
diff --git a/src/components/flat-table/components.test-pw.tsx b/src/components/flat-table/components.test-pw.tsx
index 96e9aa3902..ee2b3c1726 100644
--- a/src/components/flat-table/components.test-pw.tsx
+++ b/src/components/flat-table/components.test-pw.tsx
@@ -63,7 +63,8 @@ type SelectedRowsParentOnlySelectableStory = {
   three: boolean;
   four: boolean;
 };
-type SelectedRowsParentOnlySelectableStoryKey = keyof SelectedRowsParentOnlySelectableStory;
+type SelectedRowsParentOnlySelectableStoryKey =
+  keyof SelectedRowsParentOnlySelectableStory;
 type SubRowsShapeChildrenOnlySelectableStory = {
   subOne: boolean;
   subTwo: boolean;
@@ -74,11 +75,13 @@ type SelectedRowsChildrenOnlySelectableStory = {
   three: SubRowsShapeChildrenOnlySelectableStory;
   four: SubRowsShapeChildrenOnlySelectableStory;
 };
-type SelectedRowsChildrenOnlySelectableStoryKey = keyof SelectedRowsChildrenOnlySelectableStory;
-type SubRowsShapeChildrenOnlySelectableStoryKey = keyof SubRowsShapeChildrenOnlySelectableStory;
+type SelectedRowsChildrenOnlySelectableStoryKey =
+  keyof SelectedRowsChildrenOnlySelectableStory;
+type SubRowsShapeChildrenOnlySelectableStoryKey =
+  keyof SubRowsShapeChildrenOnlySelectableStory;
 
 export const FlatTableComponent = (
-  props: Partial<FlatTableProps> & Partial<FlatTableRowProps>
+  props: Partial<FlatTableProps> & Partial<FlatTableRowProps>,
 ) => {
   return (
     <div
@@ -437,7 +440,7 @@ export const FlatTableSpanComponent = (props: Partial<FlatTableProps>) => {
 };
 
 export const FlatTableCellColSpanComponent = (
-  props: Partial<FlatTableProps>
+  props: Partial<FlatTableProps>,
 ) => {
   return (
     <div
@@ -467,7 +470,7 @@ export const FlatTableCellColSpanComponent = (
 };
 
 export const FlatTableCellRowSpanComponent = (
-  props: Partial<FlatTableProps>
+  props: Partial<FlatTableProps>,
 ) => {
   return (
     <div
@@ -504,7 +507,7 @@ export const FlatTableCellRowSpanComponent = (
 };
 
 export const FlatTableMultipleStickyComponent = (
-  props: Partial<FlatTableProps>
+  props: Partial<FlatTableProps>,
 ) => {
   return (
     <div
@@ -663,7 +666,7 @@ export const FlatTableMultipleStickyComponent = (
 };
 
 export const FlatTableCustomPaddingComponent = (
-  props: Partial<FlatTableProps>
+  props: Partial<FlatTableProps>,
 ) => {
   return (
     <div
@@ -704,7 +707,7 @@ export const FlatTableCustomPaddingComponent = (
 };
 
 export const FlatTableTruncateBgComponent = (
-  props: Partial<FlatTableProps>
+  props: Partial<FlatTableProps>,
 ) => {
   return (
     <div
@@ -741,7 +744,7 @@ export const FlatTableTruncateBgComponent = (
 };
 
 export const FlatTableTruncateHeaderComponent = (
-  props: Partial<FlatTableProps>
+  props: Partial<FlatTableProps>,
 ) => {
   return (
     <div
@@ -780,7 +783,7 @@ export const FlatTableTruncateHeaderComponent = (
 };
 
 export const FlatTableColorRowSelectableComponent = (
-  props: Partial<FlatTableProps> & Partial<FlatTableCheckboxProps>
+  props: Partial<FlatTableProps> & Partial<FlatTableCheckboxProps>,
 ) => {
   const [selectAll, setSelectAll] = useState(false);
   const [selectedRows, setSelectedRows] = useState<SelectedRows>({
@@ -808,7 +811,7 @@ export const FlatTableColorRowSelectableComponent = (
   };
 
   const selectedCount = Object.keys(selectedRows).filter((key) =>
-    Boolean(selectedRows[key as SelectedRow])
+    Boolean(selectedRows[key as SelectedRow]),
   ).length;
 
   return (
@@ -906,7 +909,7 @@ export const FlatTableColorRowSelectableComponent = (
 };
 
 export const FlatTableCheckboxComponent = (
-  props: Partial<FlatTableCheckboxProps>
+  props: Partial<FlatTableCheckboxProps>,
 ) => {
   const [selectAll, setSelectAll] = useState(false);
   const [selectedRows, setSelectedRows] = useState<SelectedRows>({
@@ -934,7 +937,7 @@ export const FlatTableCheckboxComponent = (
   };
 
   const selectedCount = Object.keys(selectedRows).filter((key) =>
-    Boolean(selectedRows[key as SelectedRow])
+    Boolean(selectedRows[key as SelectedRow]),
   ).length;
 
   return (
@@ -1036,7 +1039,7 @@ export const FlatTableCheckboxComponent = (
 };
 
 export const FlatTableHighlightableComponent = (
-  props: Partial<FlatTableProps>
+  props: Partial<FlatTableProps>,
 ) => {
   const [selectAll, setSelectAll] = useState(false);
   const [selectedRows, setSelectedRows] = useState<SelectedRows>({
@@ -1066,7 +1069,7 @@ export const FlatTableHighlightableComponent = (
   };
 
   const selectedCount = Object.keys(selectedRows).filter((key) =>
-    Boolean(selectedRows[key as SelectedRow])
+    Boolean(selectedRows[key as SelectedRow]),
   ).length;
 
   const handleHighlightRow = (id: SelectedRow) => {
@@ -1187,7 +1190,7 @@ export const FlatTableHighlightableComponent = (
 };
 
 export const FlatTableCustomBordersComponent = (
-  props: Partial<FlatTableProps>
+  props: Partial<FlatTableProps>,
 ) => {
   return (
     <div
@@ -1294,7 +1297,7 @@ export const FlatTableCustomBordersComponent = (
 };
 
 export const FlatTableTitleAlignComponent = (
-  props: Partial<FlatTableProps>
+  props: Partial<FlatTableProps>,
 ) => {
   return (
     <div
@@ -1410,7 +1413,7 @@ export const FlatTableTitleAlignComponent = (
 export const FlatTableSortingComponent = (
   props: Partial<FlatTableProps> &
     FlatTableCellProps &
-    Partial<FlatTableRowContextProps>
+    Partial<FlatTableRowContextProps>,
 ) => {
   const headDataItems: HeadDataItems = [
     {
@@ -1447,7 +1450,7 @@ export const FlatTableSortingComponent = (
   const sortByNumber = (
     dataToSort: BodyDataItems,
     sortByValue: SortValue,
-    type: SortType
+    type: SortType,
   ) => {
     const sortedData = dataToSort.sort((a, b) => {
       if (type === "ascending") {
@@ -1466,7 +1469,7 @@ export const FlatTableSortingComponent = (
   const sortByString = (
     dataToSort: BodyDataItems,
     sortByValue: SortValue,
-    type: SortType
+    type: SortType,
   ) => {
     const sortedData = dataToSort.sort((a, b) => {
       const nameA = String(a[sortByValue]).toUpperCase();
@@ -1562,7 +1565,7 @@ export const FlatTableSortingComponent = (
 };
 
 export const FlatTableNoAccSubRowComponent = (
-  props: Partial<FlatTableCellProps>
+  props: Partial<FlatTableCellProps>,
 ) => {
   const SubRows = [
     <FlatTableRow key="subrow-1">
@@ -1892,7 +1895,7 @@ export const FlatTableAllSubrowSelectableComponent = () => {
 
   const handleSelectRow = (
     row: SelectedRowsKeyAllRowsInteractive,
-    subRow: SubRowKeyAllRowsInteractive
+    subRow: SubRowKeyAllRowsInteractive,
   ) => {
     if (selectedRows[row][subRow]) {
       setSelectAll(false);
@@ -1909,7 +1912,7 @@ export const FlatTableAllSubrowSelectableComponent = () => {
 
   const selectedCount = Object.values(selectedRows).reduce((acc, values) => {
     const count = Object.keys(values).filter((key) =>
-      Boolean(values[key as SubRowKeyAllRowsInteractive])
+      Boolean(values[key as SubRowKeyAllRowsInteractive]),
     ).length;
     return acc + count;
   }, 0);
@@ -2109,7 +2112,7 @@ export const FlatTableParentSubrowSelectableComponent = () => {
   };
 
   const selectedCount = Object.keys(selectedRows).filter((key) =>
-    Boolean(selectedRows[key as SelectedRowsParentOnlySelectableStoryKey])
+    Boolean(selectedRows[key as SelectedRowsParentOnlySelectableStoryKey]),
   ).length;
 
   const handleHighlightRow = (id: string) => {
@@ -2263,27 +2266,25 @@ export const FlatTableParentSubrowSelectableComponent = () => {
 
 export const FlatTableChildSubrowSelectableComponent = () => {
   const [selectAll, setSelectAll] = useState(false);
-  const [
-    selectedRows,
-    setSelectedRows,
-  ] = useState<SelectedRowsChildrenOnlySelectableStory>({
-    one: {
-      subOne: false,
-      subTwo: false,
-    },
-    two: {
-      subOne: false,
-      subTwo: false,
-    },
-    three: {
-      subOne: false,
-      subTwo: false,
-    },
-    four: {
-      subOne: false,
-      subTwo: false,
-    },
-  });
+  const [selectedRows, setSelectedRows] =
+    useState<SelectedRowsChildrenOnlySelectableStory>({
+      one: {
+        subOne: false,
+        subTwo: false,
+      },
+      two: {
+        subOne: false,
+        subTwo: false,
+      },
+      three: {
+        subOne: false,
+        subTwo: false,
+      },
+      four: {
+        subOne: false,
+        subTwo: false,
+      },
+    });
   const [highlightedRow, setHighlightedRow] = useState("");
 
   const handleSelectAllRows = () => {
@@ -2300,7 +2301,7 @@ export const FlatTableChildSubrowSelectableComponent = () => {
 
   const handleSelectRow = (
     row: SelectedRowsChildrenOnlySelectableStoryKey,
-    subRow: SubRowsShapeChildrenOnlySelectableStoryKey
+    subRow: SubRowsShapeChildrenOnlySelectableStoryKey,
   ) => {
     if (selectedRows[row][subRow]) {
       setSelectAll(false);
@@ -2325,7 +2326,7 @@ export const FlatTableChildSubrowSelectableComponent = () => {
 
   const selectedCount = Object.values(selectedRows).reduce((acc, values) => {
     const count = Object.keys(values).filter((key) =>
-      Boolean(values[key as SubRowsShapeChildrenOnlySelectableStoryKey])
+      Boolean(values[key as SubRowsShapeChildrenOnlySelectableStoryKey]),
     ).length;
     return acc + count;
   }, 0);
@@ -2487,7 +2488,7 @@ export const FlatTableChildSubrowSelectableComponent = () => {
 };
 
 export const FlatTableDraggableComponent = (
-  props: Partial<FlatTableBodyDraggableProps>
+  props: Partial<FlatTableBodyDraggableProps>,
 ) => {
   const rows = [
     {
@@ -2793,7 +2794,7 @@ export const FlatTableLastColumnHasRowspan = () => {
 };
 
 export const KeyboardNavigationWithPagination = (
-  props: Partial<FlatTableProps> & { highlighted?: boolean }
+  props: Partial<FlatTableProps> & { highlighted?: boolean },
 ) => {
   const { highlighted, ...rest } = props;
   const rows = [
@@ -2921,7 +2922,7 @@ export const KeyboardNavigationWithPagination = (
 export const HighlightedRowWithLoadingState = (
   props: Partial<FlatTableProps> & {
     expandableArea: "wholeRow" | "firstColumn";
-  }
+  },
 ) => {
   const { expandableArea, ...rest } = props;
   const [highlighted, setHighlighted] = useState(true);
diff --git a/src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.tsx b/src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.tsx
index a21adb57df..a8546ee705 100644
--- a/src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.tsx
+++ b/src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.tsx
@@ -52,7 +52,7 @@ export const FlatTableBodyDraggable = ({
   ...rest
 }: FlatTableBodyDraggableProps) => {
   const [draggableItems, setDraggableItems] = useState(
-    React.Children.toArray(children)
+    React.Children.toArray(children),
   );
   const isFirstRender = useRef(true);
 
@@ -66,7 +66,7 @@ export const FlatTableBodyDraggable = ({
 
   const findItem = (id: string | number) => {
     const draggableItem = draggableItems.filter(
-      (item) => React.isValidElement(item) && `${item.props.id}` === id
+      (item) => React.isValidElement(item) && `${item.props.id}` === id,
     )[0];
 
     return {
@@ -92,7 +92,7 @@ export const FlatTableBodyDraggable = ({
 
     const draggableItemIds = draggableItems.map(
       (draggableItem) =>
-        React.isValidElement(draggableItem) && draggableItem.props.id
+        React.isValidElement(draggableItem) && draggableItem.props.id,
     );
 
     getOrder(draggableItemIds);
@@ -117,8 +117,8 @@ export const FlatTableBodyDraggable = ({
                   <StyledIcon type="drag" />
                 </FlatTableCell>,
                 item.props.children,
-              ]
-            )
+              ],
+            ),
         )}
       </DropTarget>
     </DndProvider>
diff --git a/src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.test.tsx b/src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.test.tsx
index 556368be46..5d95509fcb 100644
--- a/src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.test.tsx
+++ b/src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.test.tsx
@@ -128,21 +128,21 @@ test("should set the expected data- attributes on the table body", () => {
           <FlatTableCell>Germany</FlatTableCell>
         </FlatTableRow>
       </FlatTableBodyDraggable>
-    </FlatTable>
+    </FlatTable>,
   );
   const ftDraggableBody = screen.getByRole("rowgroup");
 
   expect(ftDraggableBody).toHaveAttribute(
     "data-component",
-    "flat-table-body-draggable"
+    "flat-table-body-draggable",
   );
   expect(ftDraggableBody).toHaveAttribute(
     "data-element",
-    "ft-draggable-data-element"
+    "ft-draggable-data-element",
   );
   expect(ftDraggableBody).toHaveAttribute(
     "data-role",
-    "ft-draggable-data-role"
+    "ft-draggable-data-role",
   );
 });
 
@@ -203,7 +203,7 @@ describe("drag and drop functionality", () => {
 
     await waitFor(() => {
       expect(screen.getByTestId("flat-table-body-draggable")).toHaveStyle(
-        "cursor: grabbing"
+        "cursor: grabbing",
       );
     });
   });
@@ -359,7 +359,7 @@ it("calls getOrder callback when the order is changed and getOrder prop is set",
           <FlatTableCell>Row three</FlatTableCell>
         </FlatTableRow>
       </FlatTableBodyDraggable>
-    </FlatTable>
+    </FlatTable>,
   );
   const elementToDrag = screen.getByRole("row", { name: "Row one" });
 
diff --git a/src/components/flat-table/flat-table-body/flat-table-body.test.tsx b/src/components/flat-table/flat-table-body/flat-table-body.test.tsx
index fe08c33d83..9b339e14c3 100644
--- a/src/components/flat-table/flat-table-body/flat-table-body.test.tsx
+++ b/src/components/flat-table/flat-table-body/flat-table-body.test.tsx
@@ -14,7 +14,7 @@ test("should render the expected data- attributes", () => {
           <td>foo</td>
         </tr>
       </FlatTableBody>
-    </table>
+    </table>,
   );
   const ftBody = screen.getByRole("rowgroup");
 
diff --git a/src/components/flat-table/flat-table-cell/flat-table-cell.test.tsx b/src/components/flat-table/flat-table-cell/flat-table-cell.test.tsx
index 5ab554743a..14999cef36 100644
--- a/src/components/flat-table/flat-table-cell/flat-table-cell.test.tsx
+++ b/src/components/flat-table/flat-table-cell/flat-table-cell.test.tsx
@@ -16,7 +16,7 @@ testStyledSystemPaddingRTL(
   ),
   () => screen.getByRole("cell"),
   undefined,
-  { modifier: "&&&& > div" }
+  { modifier: "&&&& > div" },
 );
 
 test("should render with proper `width` styling on cell and first child when prop is passed", () => {
@@ -27,7 +27,7 @@ test("should render with proper `width` styling on cell and first child when pro
           <FlatTableCell width={40} />
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("cell");
   const content = screen.getByTestId("flat-table-cell-content");
@@ -49,7 +49,7 @@ test("should render with expected `data-` attributes on root element", () => {
           </FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("cell");
 
@@ -66,7 +66,7 @@ test("should apply expected styling and set the `title` attribute when `truncate
           <FlatTableCell truncate>Foo</FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
   const content = screen.getByTestId("flat-table-cell-content");
 
@@ -88,12 +88,12 @@ test("should override the default behaviour when `title` and `truncate` props ar
           </FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByTestId("flat-table-cell-content")).toHaveAttribute(
     "title",
-    "Bar"
+    "Bar",
   );
 });
 
@@ -105,13 +105,13 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableCell verticalBorder="small">Foo</FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("cell")).toHaveStyleRule(
     "border-right",
     "1px solid var(--colorsUtilityMajor300)",
-    { modifier: "&&&&" }
+    { modifier: "&&&&" },
   );
 });
 
@@ -123,13 +123,13 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableCell verticalBorder="medium">Foo</FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("cell")).toHaveStyleRule(
     "border-right",
     "2px solid var(--colorsUtilityMajor300)",
-    { modifier: "&&&&" }
+    { modifier: "&&&&" },
   );
 });
 
@@ -141,13 +141,13 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableCell verticalBorder="large">Foo</FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("cell")).toHaveStyleRule(
     "border-right",
     "4px solid var(--colorsUtilityMajor300)",
-    { modifier: "&&&&" }
+    { modifier: "&&&&" },
   );
 });
 
@@ -164,7 +164,7 @@ test("should render the expected border colour when `verticalBorderColor` is pas
           </FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("cell")).toHaveStyle("border-right-color: #FFBC1A");
@@ -183,7 +183,7 @@ test("should render the expected border colour when `verticalBorderColor` is pas
           </FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("cell")).toHaveStyle("border-right-color: #000000");
@@ -202,11 +202,11 @@ test("should render the expected border colour when `verticalBorderColor` is pas
           </FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("cell")).toHaveStyle(
-    "border-right-color: rgb(1,1,1)"
+    "border-right-color: rgb(1,1,1)",
   );
 });
 
@@ -218,7 +218,7 @@ test("should set the expected attribute when the `colspan` prop is passed", () =
           <FlatTableCell colspan={2}>Foo</FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("cell")).toHaveAttribute("colspan", "2");
@@ -232,7 +232,7 @@ test("should set the expected attribute when the `rowspan` prop is passed", () =
           <FlatTableCell rowspan={2}>Foo</FlatTableCell>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("cell")).toHaveAttribute("rowspan", "2");
diff --git a/src/components/flat-table/flat-table-checkbox/flat-table-checkbox.test.tsx b/src/components/flat-table/flat-table-checkbox/flat-table-checkbox.test.tsx
index 4d39501f01..73c2f9010b 100644
--- a/src/components/flat-table/flat-table-checkbox/flat-table-checkbox.test.tsx
+++ b/src/components/flat-table/flat-table-checkbox/flat-table-checkbox.test.tsx
@@ -7,7 +7,7 @@ import guid from "../../../__internal__/utils/helpers/guid";
 
 jest.mock("../../../__internal__/utils/helpers/guid");
 (guid as jest.MockedFunction<typeof guid>).mockImplementation(
-  () => "guid-12345"
+  () => "guid-12345",
 );
 
 test("should stop propagation when the user clicks on the input element", async () => {
@@ -21,7 +21,7 @@ test("should stop propagation when the user clicks on the input element", async
           <FlatTableCheckbox onChange={() => {}} onClick={childOnClick} />
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   await user.click(screen.getByRole("checkbox"));
@@ -40,7 +40,7 @@ test("should stop propagation when the user presses a key that is not up or down
           <FlatTableCheckbox onChange={() => {}} />
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   screen.getByRole("checkbox").focus();
@@ -59,7 +59,7 @@ test("should not stop propagation when the user presses down arrow key", async (
           <FlatTableCheckbox onChange={() => {}} />
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   screen.getByRole("checkbox").focus();
@@ -78,7 +78,7 @@ test("should not stop propagation when the user presses up arrow key", async ()
           <FlatTableCheckbox onChange={() => {}} />
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   screen.getByRole("checkbox").focus();
@@ -95,13 +95,13 @@ test("should render a 'td' element by default and have the expected data-element
           <FlatTableCheckbox onChange={() => {}} />
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
   const checkboxCell = screen.getByRole("cell");
 
   expect(checkboxCell).toHaveAttribute(
     "data-element",
-    "flat-table-checkbox-cell"
+    "flat-table-checkbox-cell",
   );
 });
 
@@ -113,13 +113,13 @@ test("should render an element to match the `as` prop value when it is set and h
           <FlatTableCheckbox onChange={() => {}} as="th" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const checkboxCell = screen.getByRole("columnheader");
 
   expect(checkboxCell).toHaveAttribute(
     "data-element",
-    "flat-table-checkbox-header"
+    "flat-table-checkbox-header",
   );
 });
 
@@ -131,7 +131,7 @@ test("should not render the checkbox when the selectable prop is false", () => {
           <FlatTableCheckbox onChange={() => {}} selectable={false} />
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
@@ -149,14 +149,14 @@ test("should render the component with the expeced `data-attributes`", () => {
           />
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
   const checkboxCell = screen.getByRole("cell");
 
   expect(checkboxCell).toHaveAttribute("data-component", "flat-table-checkbox");
   expect(checkboxCell).toHaveAttribute(
     "data-element",
-    "overridden-data-element"
+    "overridden-data-element",
   );
   expect(checkboxCell).toHaveAttribute("data-role", "ft-checkbox");
 });
diff --git a/src/components/flat-table/flat-table-expandable.stories.tsx b/src/components/flat-table/flat-table-expandable.stories.tsx
index 38e205499b..7f32aa9fc8 100644
--- a/src/components/flat-table/flat-table-expandable.stories.tsx
+++ b/src/components/flat-table/flat-table-expandable.stories.tsx
@@ -40,7 +40,8 @@ type SelectedRowsParentOnlySelectableStory = {
   three: boolean;
   four: boolean;
 };
-type SelectedRowsParentOnlySelectableStoryKey = keyof SelectedRowsParentOnlySelectableStory;
+type SelectedRowsParentOnlySelectableStoryKey =
+  keyof SelectedRowsParentOnlySelectableStory;
 type SubRowsShapeChildrenOnlySelectableStory = {
   subOne: boolean;
   subTwo: boolean;
@@ -51,8 +52,10 @@ type SelectedRowsChildrenOnlySelectableStory = {
   three: SubRowsShapeChildrenOnlySelectableStory;
   four: SubRowsShapeChildrenOnlySelectableStory;
 };
-type SelectedRowsChildrenOnlySelectableStoryKey = keyof SelectedRowsChildrenOnlySelectableStory;
-type SubRowsShapeChildrenOnlySelectableStoryKey = keyof SubRowsShapeChildrenOnlySelectableStory;
+type SelectedRowsChildrenOnlySelectableStoryKey =
+  keyof SelectedRowsChildrenOnlySelectableStory;
+type SubRowsShapeChildrenOnlySelectableStoryKey =
+  keyof SubRowsShapeChildrenOnlySelectableStory;
 
 const meta: Meta<typeof FlatTable> = {
   title: "Flat Table/Expandable",
@@ -651,7 +654,7 @@ export const BothParentAndChildrenSelectable: Story = () => {
   };
   const handleSelectRow = (
     row: SelectedRowsKeyAllRowsInteractive,
-    subRow: SubRowKeyAllRowsInteractive
+    subRow: SubRowKeyAllRowsInteractive,
   ) => {
     if (selectedRows[row][subRow]) {
       setSelectAll(false);
@@ -666,7 +669,7 @@ export const BothParentAndChildrenSelectable: Story = () => {
   };
   const selectedCount = Object.values(selectedRows).reduce((acc, values) => {
     const count = Object.keys(values).filter((key) =>
-      Boolean(values[key as SubRowKeyAllRowsInteractive])
+      Boolean(values[key as SubRowKeyAllRowsInteractive]),
     ).length;
     return acc + count;
   }, 0);
@@ -865,7 +868,7 @@ export const ParentOnlySelectable: Story = () => {
     setSelectedRows({ ...selectedRows, [id]: !selectedRows[id] });
   };
   const selectedCount = Object.keys(selectedRows).filter((key) =>
-    Boolean(selectedRows[key as SelectedRowsParentOnlySelectableStoryKey])
+    Boolean(selectedRows[key as SelectedRowsParentOnlySelectableStoryKey]),
   ).length;
   const handleHighlightRow = (id: string) => {
     if (highlightedRow === id) {
@@ -1019,27 +1022,25 @@ ParentOnlySelectable.parameters = { chromatic: { disableSnapshot: true } };
 
 export const ChildrenOnlySelectable: Story = () => {
   const [selectAll, setSelectAll] = useState(false);
-  const [
-    selectedRows,
-    setSelectedRows,
-  ] = useState<SelectedRowsChildrenOnlySelectableStory>({
-    one: {
-      subOne: false,
-      subTwo: false,
-    },
-    two: {
-      subOne: false,
-      subTwo: false,
-    },
-    three: {
-      subOne: false,
-      subTwo: false,
-    },
-    four: {
-      subOne: false,
-      subTwo: false,
-    },
-  });
+  const [selectedRows, setSelectedRows] =
+    useState<SelectedRowsChildrenOnlySelectableStory>({
+      one: {
+        subOne: false,
+        subTwo: false,
+      },
+      two: {
+        subOne: false,
+        subTwo: false,
+      },
+      three: {
+        subOne: false,
+        subTwo: false,
+      },
+      four: {
+        subOne: false,
+        subTwo: false,
+      },
+    });
   const [highlightedRow, setHighlightedRow] = useState("");
   const handleSelectAllRows = () => {
     const newState = { ...selectedRows };
@@ -1054,7 +1055,7 @@ export const ChildrenOnlySelectable: Story = () => {
   };
   const handleSelectRow = (
     row: SelectedRowsChildrenOnlySelectableStoryKey,
-    subRow: SubRowsShapeChildrenOnlySelectableStoryKey
+    subRow: SubRowsShapeChildrenOnlySelectableStoryKey,
   ) => {
     if (selectedRows[row][subRow]) {
       setSelectAll(false);
@@ -1076,7 +1077,7 @@ export const ChildrenOnlySelectable: Story = () => {
   };
   const selectedCount = Object.values(selectedRows).reduce((acc, values) => {
     const count = Object.keys(values).filter((key) =>
-      Boolean(values[key as SubRowsShapeChildrenOnlySelectableStoryKey])
+      Boolean(values[key as SubRowsShapeChildrenOnlySelectableStoryKey]),
     ).length;
     return acc + count;
   }, 0);
@@ -1376,31 +1377,29 @@ Controlled.parameters = { chromatic: { disableSnapshot: true } };
 
 export const Sizes: Story = () => {
   const [selectAll, setSelectAll] = useState(false);
-  const [
-    selectedRows,
-    setSelectedRows,
-  ] = useState<SelectedRowsAllRowsInteractive>({
-    one: {
-      parent: false,
-      subOne: false,
-      subTwo: false,
-    },
-    two: {
-      parent: false,
-      subOne: false,
-      subTwo: false,
-    },
-    three: {
-      parent: false,
-      subOne: false,
-      subTwo: false,
-    },
-    four: {
-      parent: false,
-      subOne: false,
-      subTwo: false,
-    },
-  });
+  const [selectedRows, setSelectedRows] =
+    useState<SelectedRowsAllRowsInteractive>({
+      one: {
+        parent: false,
+        subOne: false,
+        subTwo: false,
+      },
+      two: {
+        parent: false,
+        subOne: false,
+        subTwo: false,
+      },
+      three: {
+        parent: false,
+        subOne: false,
+        subTwo: false,
+      },
+      four: {
+        parent: false,
+        subOne: false,
+        subTwo: false,
+      },
+    });
   const handleSelectAllRows = () => {
     const newState = { ...selectedRows };
     Object.keys(selectedRows).forEach((key) => {
@@ -1415,7 +1414,7 @@ export const Sizes: Story = () => {
   };
   const handleSelectRow = (
     row: SelectedRowsKeyAllRowsInteractive,
-    subRow: SubRowKeyAllRowsInteractive
+    subRow: SubRowKeyAllRowsInteractive,
   ) => {
     if (selectedRows[row][subRow]) {
       setSelectAll(false);
diff --git a/src/components/flat-table/flat-table-head/flat-table-head.component.tsx b/src/components/flat-table/flat-table-head/flat-table-head.component.tsx
index 4e1af55239..0023ee674e 100644
--- a/src/components/flat-table/flat-table-head/flat-table-head.component.tsx
+++ b/src/components/flat-table/flat-table-head/flat-table-head.component.tsx
@@ -12,7 +12,7 @@ export interface FlatTableHeadProps extends Omit<TagProps, "data-component"> {
 export const FlatTableHead = ({ children, ...rest }: FlatTableHeadProps) => {
   const ref = useRef<HTMLTableSectionElement>(null);
   const [stickyOffsets, setStickyOffsets] = useState<Record<string, number>>(
-    {}
+    {},
   );
 
   useEffect(() => {
@@ -21,7 +21,7 @@ export const FlatTableHead = ({ children, ...rest }: FlatTableHeadProps) => {
     /* istanbul ignore else */
     if (headerRows) {
       setStickyOffsets(
-        buildPositionMap(Array.from(headerRows), "offsetHeight")
+        buildPositionMap(Array.from(headerRows), "offsetHeight"),
       );
     } else {
       setStickyOffsets({});
diff --git a/src/components/flat-table/flat-table-head/flat-table-head.test.tsx b/src/components/flat-table/flat-table-head/flat-table-head.test.tsx
index acd9e5436e..e8350a6018 100644
--- a/src/components/flat-table/flat-table-head/flat-table-head.test.tsx
+++ b/src/components/flat-table/flat-table-head/flat-table-head.test.tsx
@@ -14,7 +14,7 @@ test("should render with the expected data- attributes", () => {
           <th>foo</th>
         </tr>
       </FlatTableHead>
-    </table>
+    </table>,
   );
   const ftHead = screen.getByRole("rowgroup");
 
diff --git a/src/components/flat-table/flat-table-header/flat-table-header-utils.ts b/src/components/flat-table/flat-table-header/flat-table-header-utils.ts
index 68d1e91565..3febdf7b56 100644
--- a/src/components/flat-table/flat-table-header/flat-table-header-utils.ts
+++ b/src/components/flat-table/flat-table-header/flat-table-header-utils.ts
@@ -1,7 +1,7 @@
 import { FlatTableProps } from "..";
 
 const getAlternativeBackgroundColor = (
-  colorTheme: FlatTableProps["colorTheme"]
+  colorTheme: FlatTableProps["colorTheme"],
 ) => {
   switch (colorTheme) {
     case "light":
diff --git a/src/components/flat-table/flat-table-header/flat-table-header.component.tsx b/src/components/flat-table/flat-table-header/flat-table-header.component.tsx
index 36d68e1fb0..cf9577d227 100644
--- a/src/components/flat-table/flat-table-header/flat-table-header.component.tsx
+++ b/src/components/flat-table/flat-table-header/flat-table-header.component.tsx
@@ -48,7 +48,7 @@ export const FlatTableHeader = ({
   const internalId = useRef(id || guid());
   const { colorTheme } = useContext(FlatTableContext);
   const { leftPosition, rightPosition, makeCellSticky } = useTableCell(
-    internalId.current
+    internalId.current,
   );
 
   return (
diff --git a/src/components/flat-table/flat-table-header/flat-table-header.stories.tsx b/src/components/flat-table/flat-table-header/flat-table-header.stories.tsx
index 04ccef4c0b..b2057751a0 100644
--- a/src/components/flat-table/flat-table-header/flat-table-header.stories.tsx
+++ b/src/components/flat-table/flat-table-header/flat-table-header.stories.tsx
@@ -11,7 +11,7 @@ const styledSystemProps = generateStyledSystemProps(
   {
     spacing: true,
   },
-  { py: 1, px: 3 }
+  { py: 1, px: 3 },
 );
 
 const meta: Meta<typeof FlatTableHeader> = {
diff --git a/src/components/flat-table/flat-table-header/flat-table-header.test.tsx b/src/components/flat-table/flat-table-header/flat-table-header.test.tsx
index 9c091284c5..5dea119cad 100644
--- a/src/components/flat-table/flat-table-header/flat-table-header.test.tsx
+++ b/src/components/flat-table/flat-table-header/flat-table-header.test.tsx
@@ -12,7 +12,7 @@ test("should render with proper `width` styling on cell and first child when pro
           <FlatTableHeader width={40} />
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
   const content = screen.getByTestId("flat-table-header-content");
@@ -34,7 +34,7 @@ test("should render with expected `data-` attributes on root element", () => {
           </FlatTableHeader>
         </tr>
       </tbody>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -51,7 +51,7 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableHeader verticalBorder="small" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -66,7 +66,7 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableHeader verticalBorder="medium" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -81,7 +81,7 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableHeader verticalBorder="large" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -96,7 +96,7 @@ test("should render with the expected border color when `verticalBorderColor` pr
           <FlatTableHeader verticalBorderColor="#000000" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -111,7 +111,7 @@ test("should render with the expected border color when `verticalBorderColor` pr
           <FlatTableHeader verticalBorderColor="rgb(1,1,1)" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -126,7 +126,7 @@ test("should render the element witht the `rowspan` attribute when prop is set",
           <FlatTableHeader rowspan={2} />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -141,7 +141,7 @@ test("should render the element with the `colspan` attribute when prop is set",
           <FlatTableHeader colspan={2} />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -161,14 +161,14 @@ test("should render with the expected background-color when `alternativeBgColor`
           </tr>
         </thead>
       </table>
-    </FlatTableContext.Provider>
+    </FlatTableContext.Provider>,
   );
   const cell = screen.getByRole("columnheader");
 
   expect(cell).toHaveStyleRule(
     "background-color",
     getAlternativeBackgroundColor("dark"),
-    { modifier: "&&&" }
+    { modifier: "&&&" },
   );
 });
 
@@ -185,14 +185,14 @@ test("should render with the expected background-color when `alternativeBgColor`
           </tr>
         </thead>
       </table>
-    </FlatTableContext.Provider>
+    </FlatTableContext.Provider>,
   );
   const cell = screen.getByRole("columnheader");
 
   expect(cell).toHaveStyleRule(
     "background-color",
     getAlternativeBackgroundColor("light"),
-    { modifier: "&&&" }
+    { modifier: "&&&" },
   );
 });
 
@@ -209,14 +209,14 @@ test("should render with the expected background-color when `alternativeBgColor`
           </tr>
         </thead>
       </table>
-    </FlatTableContext.Provider>
+    </FlatTableContext.Provider>,
   );
   const cell = screen.getByRole("columnheader");
 
   expect(cell).toHaveStyleRule(
     "background-color",
     getAlternativeBackgroundColor("transparent-white"),
-    { modifier: "&&&" }
+    { modifier: "&&&" },
   );
 });
 
@@ -233,13 +233,13 @@ test("should render with the expected background-color when `alternativeBgColor`
           </tr>
         </thead>
       </table>
-    </FlatTableContext.Provider>
+    </FlatTableContext.Provider>,
   );
   const cell = screen.getByRole("columnheader");
 
   expect(cell).toHaveStyleRule(
     "background-color",
     getAlternativeBackgroundColor("transparent-base"),
-    { modifier: "&&&" }
+    { modifier: "&&&" },
   );
 });
diff --git a/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.tsx b/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.tsx
index 7d4339dd8c..e7ce84f953 100644
--- a/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.tsx
+++ b/src/components/flat-table/flat-table-row-header/flat-table-row-header.component.tsx
@@ -74,7 +74,7 @@ export const FlatTableRowHeader = ({
     (ev: React.MouseEvent<HTMLElement>) => {
       if (isExpandableCell && onClick) onClick(ev);
     },
-    [isExpandableCell, onClick]
+    [isExpandableCell, onClick],
   );
 
   const handleOnFocus = (ev: React.FocusEvent<HTMLElement>) => {
@@ -88,7 +88,7 @@ export const FlatTableRowHeader = ({
         onKeyDown(ev);
       }
     },
-    [isExpandableCell, onKeyDown]
+    [isExpandableCell, onKeyDown],
   );
 
   return (
diff --git a/src/components/flat-table/flat-table-row-header/flat-table-row-header.stories.tsx b/src/components/flat-table/flat-table-row-header/flat-table-row-header.stories.tsx
index d38d7b14a0..a830e7f961 100644
--- a/src/components/flat-table/flat-table-row-header/flat-table-row-header.stories.tsx
+++ b/src/components/flat-table/flat-table-row-header/flat-table-row-header.stories.tsx
@@ -11,7 +11,7 @@ const styledSystemProps = generateStyledSystemProps(
   {
     spacing: true,
   },
-  { py: "10px", px: 3 }
+  { py: "10px", px: 3 },
 );
 
 const meta: Meta<typeof FlatTableRowHeader> = {
diff --git a/src/components/flat-table/flat-table-row-header/flat-table-row-header.style.ts b/src/components/flat-table/flat-table-row-header/flat-table-row-header.style.ts
index fc16340b5a..b5e226167e 100644
--- a/src/components/flat-table/flat-table-row-header/flat-table-row-header.style.ts
+++ b/src/components/flat-table/flat-table-row-header/flat-table-row-header.style.ts
@@ -17,7 +17,7 @@ const StyledFlatTableRowHeader = styled.th.attrs(
     stickyAlignment,
   }: {
     stickyAlignment: FlatTableRowHeaderProps["stickyAlignment"];
-  }) => ({ "data-sticky-align": stickyAlignment })
+  }) => ({ "data-sticky-align": stickyAlignment }),
 )<
   FlatTableRowHeaderProps & {
     expandable?: boolean;
@@ -86,8 +86,8 @@ const StyledFlatTableRowHeader = styled.th.attrs(
       ${verticalBorder &&
       css`
         border-${stickyAlignment === "right" ? "left" : "right"}-width: ${
-        verticalBorderSizes[verticalBorder]
-      };
+          verticalBorderSizes[verticalBorder]
+        };
       `}
 
       ${verticalBorderColor &&
diff --git a/src/components/flat-table/flat-table-row-header/flat-table-row-header.test.tsx b/src/components/flat-table/flat-table-row-header/flat-table-row-header.test.tsx
index c0dc65e8e3..482d6d44dd 100644
--- a/src/components/flat-table/flat-table-row-header/flat-table-row-header.test.tsx
+++ b/src/components/flat-table/flat-table-row-header/flat-table-row-header.test.tsx
@@ -23,7 +23,7 @@ testStyledSystemPaddingRTL(
   ),
   () => screen.getByRole("columnheader"),
   { py: "10px", px: 3 },
-  { modifier: "&&&& > div" }
+  { modifier: "&&&& > div" },
 );
 
 test("should render with the expected `data-` attributes when props are passed", () => {
@@ -37,14 +37,14 @@ test("should render with the expected `data-` attributes when props are passed",
           />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
   expect(cell).toHaveAttribute("data-component", "flat-table-row-header");
   expect(cell).toHaveAttribute(
     "data-element",
-    "flat-table-row-header-data-element"
+    "flat-table-row-header-data-element",
   );
   expect(cell).toHaveAttribute("data-role", "flat-table-row-header-data-role");
 });
@@ -57,7 +57,7 @@ test("should render with proper 'width' styling on cell and first child when pro
           <FlatTableRowHeader width={40} />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
   const content = screen.getByTestId("flat-table-row-header-content");
@@ -74,7 +74,7 @@ test("should render with expected 'colspan' attribute when prop is passed", () =
           <FlatTableRowHeader colspan={2} />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -89,7 +89,7 @@ test("should render with expected 'rowspan' attribute when prop is passed", () =
           <FlatTableRowHeader rowspan={2} />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -115,7 +115,7 @@ describe("when the `expandable` context prop is set", () => {
             </FlatTableRowContext.Provider>
           </tr>
         </thead>
-      </table>
+      </table>,
     );
     const icon = screen.getByTestId("icon");
 
@@ -143,7 +143,7 @@ describe("when the `expandable` context prop is set", () => {
             </FlatTableRowContext.Provider>
           </tr>
         </thead>
-      </table>
+      </table>,
     );
     const cell = screen.getByRole("columnheader");
     await user.click(cell);
@@ -172,7 +172,7 @@ describe("when the `expandable` context prop is set", () => {
             </FlatTableRowContext.Provider>
           </tr>
         </thead>
-      </table>
+      </table>,
     );
     const cell = screen.getByRole("columnheader");
     await user.type(cell, "{enter}");
@@ -198,7 +198,7 @@ describe("when the `expandable` context prop is not set", () => {
             </FlatTableRowContext.Provider>
           </tr>
         </thead>
-      </table>
+      </table>,
     );
     const icon = screen.queryByTestId("icon");
 
@@ -224,7 +224,7 @@ describe("when the `expandable` context prop is not set", () => {
             </FlatTableRowContext.Provider>
           </tr>
         </thead>
-      </table>
+      </table>,
     );
     const cell = screen.getByRole("columnheader");
     await user.click(cell);
@@ -242,7 +242,7 @@ describe("when the `truncate` prop is set", () => {
             <FlatTableRowHeader truncate>Foo</FlatTableRowHeader>
           </tr>
         </thead>
-      </table>
+      </table>,
     );
     const content = screen.getByTestId("flat-table-row-header-content");
 
@@ -259,12 +259,12 @@ describe("when the `truncate` prop is set", () => {
             <FlatTableRowHeader truncate>Foo</FlatTableRowHeader>
           </tr>
         </thead>
-      </table>
+      </table>,
     );
 
     expect(screen.getByTestId("flat-table-row-header-content")).toHaveAttribute(
       "title",
-      "Foo"
+      "Foo",
     );
   });
 
@@ -278,12 +278,12 @@ describe("when the `truncate` prop is set", () => {
             </FlatTableRowHeader>
           </tr>
         </thead>
-      </table>
+      </table>,
     );
 
     expect(screen.getByTestId("flat-table-row-header-content")).toHaveAttribute(
       "title",
-      "Bar"
+      "Bar",
     );
   });
 });
@@ -296,12 +296,12 @@ test("sets the data-sticky-align attribute to 'left' to match the `stickyAlignme
           <FlatTableRowHeader stickyAlignment="left">Foo</FlatTableRowHeader>
         </tr>
       </thead>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("columnheader")).toHaveAttribute(
     "data-sticky-align",
-    "left"
+    "left",
   );
 });
 
@@ -313,12 +313,12 @@ test("sets the data-sticky-align attribute to 'right' to match the `stickyAlignm
           <FlatTableRowHeader stickyAlignment="right">Foo</FlatTableRowHeader>
         </tr>
       </thead>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("columnheader")).toHaveAttribute(
     "data-sticky-align",
-    "right"
+    "right",
   );
 });
 
@@ -351,7 +351,7 @@ test("should increase the z-index of the sticky TH or TD if `stickyAlignment` pr
           <FlatTableCell>text content</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   const headerOne = screen.getByTestId("header-one");
@@ -404,7 +404,7 @@ test("should not increase the z-index of the sticky TH or TD if the `stickyAlign
           <FlatTableCell>text content</FlatTableCell>
         </FlatTableRow>
       </thead>
-    </table>
+    </table>,
   );
 
   const headerOne = screen.getByTestId("header-one");
@@ -425,7 +425,7 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableRowHeader verticalBorder="small" stickyAlignment="left" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -440,7 +440,7 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableRowHeader verticalBorder="small" stickyAlignment="right" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -455,7 +455,7 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableRowHeader verticalBorder="medium" stickyAlignment="left" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -470,7 +470,7 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableRowHeader verticalBorder="medium" stickyAlignment="right" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -485,7 +485,7 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableRowHeader verticalBorder="large" stickyAlignment="left" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -500,7 +500,7 @@ test("should render with the expected border width when `verticalBorder` prop is
           <FlatTableRowHeader verticalBorder="large" stickyAlignment="right" />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -518,7 +518,7 @@ test("should render with the expected border color when `verticalBorderColor` pr
           />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -536,7 +536,7 @@ test("should render with the expected border color when `verticalBorderColor` pr
           />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -554,7 +554,7 @@ test("should render with the expected border color when `verticalBorderColor` pr
           />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
@@ -572,7 +572,7 @@ test("should render with the expected border color when `verticalBorderColor` pr
           />
         </tr>
       </thead>
-    </table>
+    </table>,
   );
   const cell = screen.getByRole("columnheader");
 
diff --git a/src/components/flat-table/flat-table-row/flat-table-row.component.tsx b/src/components/flat-table/flat-table-row/flat-table-row.component.tsx
index a77787fb08..ca9ce45259 100644
--- a/src/components/flat-table/flat-table-row/flat-table-row.component.tsx
+++ b/src/components/flat-table/flat-table-row/flat-table-row.component.tsx
@@ -87,7 +87,7 @@ export const FlatTableRow = React.forwardRef<
       "data-role": dataRole,
       ...rest
     }: FlatTableRowProps,
-    ref
+    ref,
   ) => {
     const internalId = useRef(id ? String(id) : guid());
     const [isExpanded, setIsExpanded] = useState(expanded);
@@ -97,7 +97,7 @@ export const FlatTableRow = React.forwardRef<
     }
     const firstColumnExpandable = expandableArea === "firstColumn";
     const [leftPositions, setLeftPositions] = useState<Record<string, number>>(
-      {}
+      {},
     );
     const [rightPositions, setRightPositions] = useState<
       Record<string, number>
@@ -113,7 +113,7 @@ export const FlatTableRow = React.forwardRef<
     useLayoutEffect(() => {
       const checkForPositionUpdates = (
         updated: Record<string, number>,
-        current: Record<string, number>
+        current: Record<string, number>,
       ) => {
         const updatedKeys = Object.keys(updated);
         const currentKeys = Object.keys(current);
@@ -132,13 +132,13 @@ export const FlatTableRow = React.forwardRef<
       setCellsArray(cellArray);
 
       const firstIndex = cellArray.findIndex(
-        (cell) => cell.getAttribute("data-component") !== "flat-table-checkbox"
+        (cell) => cell.getAttribute("data-component") !== "flat-table-checkbox",
       );
       const lhsIndex = cellArray.findIndex(
-        (cell) => cell.getAttribute("data-sticky-align") === "left"
+        (cell) => cell.getAttribute("data-sticky-align") === "left",
       );
       const rhsIndex = cellArray.findIndex(
-        (cell) => cell.getAttribute("data-sticky-align") === "right"
+        (cell) => cell.getAttribute("data-sticky-align") === "right",
       );
 
       setLhsRowHeaderIndex(lhsIndex);
@@ -153,7 +153,7 @@ export const FlatTableRow = React.forwardRef<
       if (lhsIndex !== -1) {
         const updatedLeftPositions = buildPositionMap(
           cellArray.slice(0, lhsRowHeaderIndex + 1),
-          "offsetWidth"
+          "offsetWidth",
         );
 
         if (checkForPositionUpdates(updatedLeftPositions, leftPositions)) {
@@ -163,7 +163,7 @@ export const FlatTableRow = React.forwardRef<
       if (rhsIndex !== -1) {
         const updatedRightPositions = buildPositionMap(
           cellArray.slice(rhsRowHeaderIndex, cellArray.length).reverse(),
-          "offsetWidth"
+          "offsetWidth",
         );
 
         if (checkForPositionUpdates(updatedRightPositions, rightPositions)) {
@@ -188,18 +188,17 @@ export const FlatTableRow = React.forwardRef<
 
     invariant(
       noStickyColumnsOverlap,
-      `Do not render a right hand side \`${FlatTableRowHeader.displayName}\` before left hand side \`${FlatTableRowHeader.displayName}\``
+      `Do not render a right hand side \`${FlatTableRowHeader.displayName}\` before left hand side \`${FlatTableRowHeader.displayName}\``,
     );
 
-    const { colorTheme, size, getTabStopElementId } = useContext(
-      FlatTableContext
-    );
+    const { colorTheme, size, getTabStopElementId } =
+      useContext(FlatTableContext);
     const { isInSidebar } = useContext(DrawerSidebarContext);
     const { stickyOffsets } = useContext(FlatTableHeadContext);
     const toggleExpanded = () => setIsExpanded(!isExpanded);
 
     function onKeyDown(
-      ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
+      ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>,
     ) {
       const isEnterOrSpaceKey =
         Event.isEnterKey(ev as React.KeyboardEvent<HTMLElement>) ||
@@ -257,9 +256,8 @@ export const FlatTableRow = React.forwardRef<
       setTabIndex(getTabStopElementId() === internalId.current ? 0 : -1);
     }, [getTabStopElementId]);
 
-    const { isSubRow, firstRowId, addRow, removeRow } = useContext(
-      SubRowContext
-    );
+    const { isSubRow, firstRowId, addRow, removeRow } =
+      useContext(SubRowContext);
 
     useEffect(() => {
       const rowId = internalId.current;
@@ -344,7 +342,7 @@ export const FlatTableRow = React.forwardRef<
         {isExpanded && subRows && <SubRowProvider>{subRows}</SubRowProvider>}
       </>
     );
-  }
+  },
 );
 
 FlatTableRow.displayName = "FlatTableRow";
diff --git a/src/components/flat-table/flat-table-row/flat-table-row.style.ts b/src/components/flat-table/flat-table-row/flat-table-row.style.ts
index 452c9d26cd..69d94e258d 100644
--- a/src/components/flat-table/flat-table-row/flat-table-row.style.ts
+++ b/src/components/flat-table/flat-table-row/flat-table-row.style.ts
@@ -47,7 +47,7 @@ const getLeftStickyStyling = (index: number, themeOptOut: boolean) =>
 const getRightStickyStyling = (
   index: number,
   totalChildren: number,
-  themeOptOut: boolean
+  themeOptOut: boolean,
 ) =>
   index === totalChildren - 1 &&
   /* istanbul ignore next */
diff --git a/src/components/flat-table/flat-table-row/flat-table-row.test.tsx b/src/components/flat-table/flat-table-row/flat-table-row.test.tsx
index f986d8957d..b3330a89a0 100644
--- a/src/components/flat-table/flat-table-row/flat-table-row.test.tsx
+++ b/src/components/flat-table/flat-table-row/flat-table-row.test.tsx
@@ -31,7 +31,7 @@ test("should render with the expected `data-` attributes on the root element whe
           <FlatTableCell>cell2</FlatTableCell>
         </FlatTableRow>
       </tbody>
-    </table>
+    </table>,
   );
   const row = screen.getByRole("row");
 
@@ -50,7 +50,7 @@ describe("when the `onClick` prop is passed", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row");
 
@@ -66,7 +66,7 @@ describe("when the `onClick` prop is passed", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row");
 
@@ -84,7 +84,7 @@ describe("when the `onClick` prop is passed", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row");
     await user.click(row);
@@ -103,7 +103,7 @@ describe("when the `onClick` prop is passed", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row");
     row.focus();
@@ -123,7 +123,7 @@ describe("when the `onClick` prop is passed", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row");
     row.focus();
@@ -143,7 +143,7 @@ describe("when the `onClick` prop is passed", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row");
     row.focus();
@@ -163,7 +163,7 @@ describe("when no `onClick` prop is passed", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row");
 
@@ -179,7 +179,7 @@ describe("when no `onClick` prop is passed", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row");
 
@@ -196,7 +196,7 @@ test("should render with `data-selected` attribute set to 'true' when `selected`
           <FlatTableCell>cell2</FlatTableCell>
         </FlatTableRow>
       </tbody>
-    </table>
+    </table>,
   );
   const row = screen.getByRole("row");
 
@@ -212,7 +212,7 @@ test("should render with `data-selected` attribute set to 'false' when `selected
           <FlatTableCell>cell2</FlatTableCell>
         </FlatTableRow>
       </tbody>
-    </table>
+    </table>,
   );
   const row = screen.getByRole("row");
 
@@ -228,7 +228,7 @@ test("should render with `data-selected` attribute not set when `selected` prop
           <FlatTableCell>cell2</FlatTableCell>
         </FlatTableRow>
       </tbody>
-    </table>
+    </table>,
   );
   const row = screen.getByRole("row");
 
@@ -244,7 +244,7 @@ test("should render with `data-highlighted` attribute set to 'true' when `highli
           <FlatTableCell>cell2</FlatTableCell>
         </FlatTableRow>
       </tbody>
-    </table>
+    </table>,
   );
   const row = screen.getByRole("row");
 
@@ -260,7 +260,7 @@ test("should render with `data-highlighted` attribute set to 'false' when `highl
           <FlatTableCell>cell2</FlatTableCell>
         </FlatTableRow>
       </tbody>
-    </table>
+    </table>,
   );
   const row = screen.getByRole("row");
 
@@ -276,7 +276,7 @@ test("should render with `data-highlighted` attribute not set when `highlighted`
           <FlatTableCell>cell2</FlatTableCell>
         </FlatTableRow>
       </tbody>
-    </table>
+    </table>,
   );
   const row = screen.getByRole("row");
 
@@ -294,7 +294,7 @@ test("should render the first and last cells with the expected border styling wh
           </FlatTableRow>
         </tbody>
       </table>
-    </DrawerSidebarContext.Provider>
+    </DrawerSidebarContext.Provider>,
   );
   const firstCell = screen.getByRole("cell", { name: "cell1" });
   const lastCell = screen.getByRole("cell", { name: "cell2" });
@@ -313,7 +313,7 @@ describe("when FlatTableRowHeader children are passed", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const cell = screen.getByRole("columnheader", { name: "cell1" });
 
@@ -330,7 +330,7 @@ describe("when FlatTableRowHeader children are passed", () => {
             {false && <FlatTableRowHeader>cell3</FlatTableRowHeader>}
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const cell = screen.getByRole("cell", { name: "cell1" });
 
@@ -350,7 +350,7 @@ describe("when FlatTableRowHeader children are passed", () => {
             <FlatTableCell>cell6</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     const cell1 = screen.getByRole("columnheader", { name: "cell1" });
     const cell2 = screen.getByRole("cell", { name: "cell2" });
@@ -383,7 +383,7 @@ describe("when FlatTableRowHeader children are passed", () => {
             <FlatTableCell>cell6</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     const cell1 = screen.getByRole("columnheader", { name: "cell1" });
     const cell2 = screen.getByRole("cell", { name: "cell2" });
@@ -417,7 +417,7 @@ describe("when FlatTableRowHeader children are passed", () => {
             </FlatTableRow>
           </thead>
         </table>
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const cell1 = screen.getByRole("cell", { name: "cell1" });
     const cell2 = screen.getByRole("cell", { name: "cell2" });
@@ -444,7 +444,7 @@ describe("when FlatTableRowHeader children are passed", () => {
             <FlatTableCell>cell6</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
 
     const cell1 = screen.getByRole("columnheader", { name: "cell1" });
@@ -486,7 +486,7 @@ describe("when FlatTableRowHeader children are passed", () => {
               <FlatTableCell>cell6</FlatTableCell>
             </FlatTableRow>
           </thead>
-        </table>
+        </table>,
       );
     }).toThrow(errorMessage);
 
@@ -504,7 +504,7 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row", { name: "cell1 cell2" });
 
@@ -520,7 +520,7 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row");
 
@@ -536,7 +536,7 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </tbody>
-      </table>
+      </table>,
     );
     const row = screen.getByRole("row");
     const cell = screen.getByRole("cell", { name: "cell1" });
@@ -566,7 +566,7 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     const cell1 = screen.getByRole("cell", { name: "cell1" });
     const icon = within(cell1).getByTestId("icon");
@@ -599,7 +599,7 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     const cell2 = screen.getByRole("cell", { name: "cell2" });
     const icon = within(cell2).getByTestId("icon");
@@ -629,7 +629,7 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     const cell1 = screen.getByRole("cell", { name: "cell1" });
     const icon = within(cell1).getByTestId("icon");
@@ -659,7 +659,7 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     const subRow1 = screen.queryByRole("row", { name: "sub1cell1 sub1cell2" });
     const subRow2 = screen.queryByRole("row", { name: "sub2cell1 sub2cell2" });
@@ -691,16 +691,16 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     await user.click(screen.getByRole("row", { name: "cell1 cell2" }));
     jest.advanceTimersByTime(300);
 
     expect(
-      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" })
+      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).toBeVisible();
     expect(
-      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" })
+      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).toBeVisible();
     jest.useRealTimers();
   });
@@ -728,17 +728,17 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("row", { name: "cell1 cell2" }).focus();
     await user.keyboard("{Enter}");
     jest.advanceTimersByTime(300);
 
     expect(
-      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" })
+      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).toBeVisible();
     expect(
-      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" })
+      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).toBeVisible();
     jest.useRealTimers();
   });
@@ -766,17 +766,17 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("row", { name: "cell1 cell2" }).focus();
     await user.keyboard(" ");
     jest.advanceTimersByTime(300);
 
     expect(
-      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" })
+      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).toBeVisible();
     expect(
-      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" })
+      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).toBeVisible();
     jest.useRealTimers();
   });
@@ -803,16 +803,16 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("row", { name: "cell1 cell2" }).focus();
     await user.keyboard("{ArrowRight}");
 
     expect(
-      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).not.toBeInTheDocument();
   });
 
@@ -838,14 +838,14 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
 
     expect(
-      screen.getByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.getByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).toBeVisible();
     expect(
-      screen.getByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.getByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).toBeVisible();
   });
 
@@ -873,16 +873,16 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     await user.click(screen.getByRole("row", { name: "cell1 cell2" }));
     jest.advanceTimersByTime(300);
 
     expect(
-      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).not.toBeInTheDocument();
     jest.useRealTimers();
   });
@@ -911,17 +911,17 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("row", { name: "cell1 cell2" }).focus();
     await user.keyboard("{Enter}");
     jest.advanceTimersByTime(300);
 
     expect(
-      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).not.toBeInTheDocument();
     jest.useRealTimers();
   });
@@ -950,17 +950,17 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("row", { name: "cell1 cell2" }).focus();
     await user.keyboard("{Enter}");
     jest.advanceTimersByTime(300);
 
     expect(
-      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).not.toBeInTheDocument();
     jest.useRealTimers();
   });
@@ -988,16 +988,16 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("row", { name: "cell1 cell2" }).focus();
     await user.keyboard("{ArrowRight}");
 
     expect(
-      screen.getByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.getByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).toBeVisible();
     expect(
-      screen.getByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.getByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).toBeVisible();
   });
 
@@ -1023,14 +1023,14 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
 
     expect(screen.getByRole("cell", { name: "cell1" })).toHaveStyle(
-      "cursor: pointer"
+      "cursor: pointer",
     );
     expect(screen.getByRole("cell", { name: "cell2" })).not.toHaveStyle(
-      "cursor: pointer"
+      "cursor: pointer",
     );
   });
 
@@ -1058,16 +1058,16 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     await user.click(screen.getByRole("cell", { name: "cell1" }));
     jest.advanceTimersByTime(300);
 
     expect(
-      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" })
+      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).toBeVisible();
     expect(
-      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" })
+      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).toBeVisible();
     jest.useRealTimers();
   });
@@ -1096,17 +1096,17 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("cell", { name: "cell1" }).focus();
     await user.keyboard("{Enter}");
     jest.advanceTimersByTime(300);
 
     expect(
-      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" })
+      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).toBeVisible();
     expect(
-      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" })
+      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).toBeVisible();
     jest.useRealTimers();
   });
@@ -1135,17 +1135,17 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("cell", { name: "cell1" }).focus();
     await user.keyboard(" ");
     jest.advanceTimersByTime(300);
 
     expect(
-      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" })
+      await screen.findByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).toBeVisible();
     expect(
-      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" })
+      await screen.findByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).toBeVisible();
     jest.useRealTimers();
   });
@@ -1173,15 +1173,15 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     await user.click(screen.getByRole("cell", { name: "cell2" }));
 
     expect(
-      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).not.toBeInTheDocument();
   });
 
@@ -1208,16 +1208,16 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("cell", { name: "cell2" }).focus();
     await user.keyboard("{ArrowRight}");
 
     expect(
-      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).not.toBeInTheDocument();
   });
 
@@ -1246,16 +1246,16 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     await user.click(screen.getByRole("cell", { name: "cell1" }));
     jest.advanceTimersByTime(300);
 
     expect(
-      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).not.toBeInTheDocument();
     jest.useRealTimers();
   });
@@ -1285,17 +1285,17 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("cell", { name: "cell1" }).focus();
     await user.keyboard("{Enter}");
     jest.advanceTimersByTime(300);
 
     expect(
-      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).not.toBeInTheDocument();
     jest.useRealTimers();
   });
@@ -1325,17 +1325,17 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("cell", { name: "cell1" }).focus();
     await user.keyboard(" ");
     jest.advanceTimersByTime(300);
 
     expect(
-      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.queryByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.queryByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).not.toBeInTheDocument();
     jest.useRealTimers();
   });
@@ -1364,15 +1364,15 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     await user.click(screen.getByRole("cell", { name: "cell2" }));
 
     expect(
-      screen.getByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.getByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).toBeVisible();
     expect(
-      screen.getByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.getByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).toBeVisible();
   });
 
@@ -1400,16 +1400,16 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell2</FlatTableCell>
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
     screen.getByRole("cell", { name: "cell1" }).focus();
     await user.keyboard("{ArrowRight}");
 
     expect(
-      screen.getByRole("row", { name: "sub1cell1 sub1cell2" })
+      screen.getByRole("row", { name: "sub1cell1 sub1cell2" }),
     ).toBeVisible();
     expect(
-      screen.getByRole("row", { name: "sub2cell1 sub2cell2" })
+      screen.getByRole("row", { name: "sub2cell1 sub2cell2" }),
     ).toBeVisible();
   });
 
@@ -1453,7 +1453,7 @@ describe("when the row is `expandable`", () => {
             <FlatTableCell>cell3</FlatTableCell>
           </FlatTableRow>
         </FlatTableBodyDraggable>
-      </table>
+      </table>,
     );
     const row1 = screen.getByRole("row", { name: "cell1" });
     const row2 = screen.getByRole("row", { name: "cell2" });
@@ -1471,10 +1471,10 @@ describe("when the row is `expandable`", () => {
     jest.advanceTimersByTime(300);
 
     expect(
-      screen.queryByRole("row", { name: "sub1cell1" })
+      screen.queryByRole("row", { name: "sub1cell1" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("row", { name: "sub2cell1" })
+      screen.queryByRole("row", { name: "sub2cell1" }),
     ).not.toBeInTheDocument();
     jest.useRealTimers();
   });
@@ -1502,7 +1502,7 @@ describe("when the row is `expandable`", () => {
             <FlatTableCheckbox onChange={() => {}} />
           </FlatTableRow>
         </thead>
-      </table>
+      </table>,
     );
 
     expect(screen.getByTestId("cell1")).toHaveStyle("cursor: pointer");
@@ -1532,7 +1532,7 @@ describe("when the row is `expandable`", () => {
             </FlatTableRow>
           </thead>
         </table>
-      </FlatTableContext.Provider>
+      </FlatTableContext.Provider>,
     );
     const subRowCell1 = screen.getByRole("cell", { name: "sub1cell1" });
     const content1 = within(subRowCell1).getByTestId("flat-table-cell-content");
@@ -1558,11 +1558,11 @@ describe("with a ref", () => {
             <FlatTableHeader>cell4</FlatTableHeader>
           </FlatTableRow>
         </FlatTableBodyDraggable>
-      </table>
+      </table>,
     );
 
     expect(mockRef.current).toBe(
-      screen.getByRole("row", { name: "cell1 cell2 cell3 cell4" })
+      screen.getByRole("row", { name: "cell1 cell2 cell3 cell4" }),
     );
   });
 
@@ -1579,11 +1579,11 @@ describe("with a ref", () => {
             <FlatTableHeader>cell4</FlatTableHeader>
           </FlatTableRow>
         </FlatTableBodyDraggable>
-      </table>
+      </table>,
     );
 
     expect(mockRef).toHaveBeenCalledWith(
-      screen.getByRole("row", { name: "cell1 cell2 cell3 cell4" })
+      screen.getByRole("row", { name: "cell1 cell2 cell3 cell4" }),
     );
   });
 });
@@ -1599,7 +1599,7 @@ test("should render the expected background color styles when `bgColor` prop is
           <FlatTableRowHeader>cell3</FlatTableRowHeader>
         </FlatTableRow>
       </tbody>
-    </table>
+    </table>,
   );
   const cell1 = screen.getByRole("cell", { name: "cell1" });
   const cell2 = screen.getByTestId("cell2");
@@ -1621,7 +1621,7 @@ test("should render the expected border bottom color styles when `horizontalBord
           <FlatTableRowHeader>cell3</FlatTableRowHeader>
         </FlatTableRow>
       </tbody>
-    </table>
+    </table>,
   );
   const cell1 = screen.getByRole("cell", { name: "cell1" });
   const cell2 = screen.getByTestId("cell2");
@@ -1641,14 +1641,14 @@ test("should render the expected border bottom color styles when `horizontalBord
           <FlatTableCell>cell1</FlatTableCell>
         </FlatTableRow>
       </tbody>
-    </table>
+    </table>,
   );
   const row = screen.getByRole("row", { name: "cell1" });
 
   expect(row).toHaveStyleRule(
     "border-bottom",
     "2px solid var(--colorsUtilityMajor100)",
-    { modifier: `${StyledFlatTableCell}` }
+    { modifier: `${StyledFlatTableCell}` },
   );
 });
 
@@ -1669,7 +1669,7 @@ test("should apply the expected border styling when row is dragged and table is
           </FlatTableRow>
         </FlatTableBodyDraggable>
       </table>
-    </DrawerSidebarContext.Provider>
+    </DrawerSidebarContext.Provider>,
   );
   const elementToDrag = screen.getByRole("row", { name: "Row one" });
 
@@ -1680,7 +1680,7 @@ test("should apply the expected border styling when row is dragged and table is
   await waitFor(() => {
     expect(elementToDrag).toHaveStyleRule(
       "border",
-      "var(--colorsUtilityMajor300) 2px solid"
+      "var(--colorsUtilityMajor300) 2px solid",
     );
   });
 });
diff --git a/src/components/flat-table/flat-table-test.stories.tsx b/src/components/flat-table/flat-table-test.stories.tsx
index d7960a4c03..c8fb43ddee 100644
--- a/src/components/flat-table/flat-table-test.stories.tsx
+++ b/src/components/flat-table/flat-table-test.stories.tsx
@@ -181,7 +181,7 @@ function renderBody(rowCount: number) {
 
 function processRowData(
   row: HeadRowData | Client,
-  cellType: "header" | "cell"
+  cellType: "header" | "cell",
 ) {
   return Object.keys(row).map((columnKey) => {
     let align = "left";
diff --git a/src/components/flat-table/flat-table.component.tsx b/src/components/flat-table/flat-table.component.tsx
index 4a51231394..e085cb53d8 100644
--- a/src/components/flat-table/flat-table.component.tsx
+++ b/src/components/flat-table/flat-table.component.tsx
@@ -106,12 +106,8 @@ export const FlatTable = ({
     /* istanbul ignore else */
     if (wrapperRef.current && tableRef.current) {
       const { offsetHeight, offsetWidth } = wrapperRef.current;
-      const {
-        top,
-        bottom,
-        right,
-        left,
-      } = tableRef.current?.getBoundingClientRect();
+      const { top, bottom, right, left } =
+        tableRef.current?.getBoundingClientRect();
       setHasVerticalScrollbar(bottom - top > offsetHeight);
       setHasHorizontalScrollbar(right - left > offsetWidth);
 
@@ -122,19 +118,19 @@ export const FlatTable = ({
       const { length } = bodyRows;
       const targetRowFirstCol = findRow(
         bodyRows.slice(0, length - 1).reverse(),
-        true
+        true,
       );
       const targetRowLastCol = findRow(bodyRows.slice(0, length - 1).reverse());
 
       if (targetRowFirstCol) {
         setFirstColRowSpanIndex(
-          bodyRows.indexOf(targetRowFirstCol as HTMLTableRowElement)
+          bodyRows.indexOf(targetRowFirstCol as HTMLTableRowElement),
         );
       }
 
       if (targetRowLastCol) {
         setLastColRowSpanIndex(
-          bodyRows.indexOf(targetRowLastCol as HTMLTableRowElement)
+          bodyRows.indexOf(targetRowLastCol as HTMLTableRowElement),
         );
       }
     }
@@ -143,7 +139,7 @@ export const FlatTable = ({
   const findParentIndexOfFocusedChild = (array: Element[]) =>
     array.findIndex((el) => {
       const focusableRowElements = el.querySelectorAll(
-        "button, input, a, [tabindex]"
+        "button, input, a, [tabindex]",
       );
 
       /* istanbul ignore else */
@@ -152,7 +148,7 @@ export const FlatTable = ({
 
         if (
           focusableRowElementsArray.find(
-            (el2) => el2 === document.activeElement
+            (el2) => el2 === document.activeElement,
           )
         ) {
           return true;
@@ -164,11 +160,11 @@ export const FlatTable = ({
 
   const handleKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
     const focusableElements = tableRef.current?.querySelectorAll(
-      FOCUSABLE_ROW_AND_CELL_QUERY
+      FOCUSABLE_ROW_AND_CELL_QUERY,
     );
 
     const focusableElementsArray = Array.from(
-      focusableElements || /* istanbul ignore next */ []
+      focusableElements || /* istanbul ignore next */ [],
     );
 
     /* istanbul ignore if */
@@ -177,7 +173,7 @@ export const FlatTable = ({
     }
 
     const currentFocusIndex = focusableElementsArray.findIndex(
-      (el) => el === document.activeElement
+      (el) => el === document.activeElement,
     );
 
     if (Events.isDownKey(ev)) {
@@ -214,7 +210,7 @@ export const FlatTable = ({
   const getTabStopElementId = () => {
     const focusableElements = Array.from(
       tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY) ||
-        /* istanbul ignore next */ []
+        /* istanbul ignore next */ [],
     );
 
     // if no other row is selected/ highlighted, we need to make the first row/ cell a tab stop
@@ -222,7 +218,7 @@ export const FlatTable = ({
       focusableElements.find(
         (el) =>
           el.getAttribute("data-selected") === "true" ||
-          el.getAttribute("data-highlighted") === "true"
+          el.getAttribute("data-highlighted") === "true",
       ) || focusableElements[0];
     const currentlySelectedId = focusableElement?.getAttribute("id") || "";
 
diff --git a/src/components/flat-table/flat-table.pw.tsx b/src/components/flat-table/flat-table.pw.tsx
index 4d84f39823..caace56e74 100644
--- a/src/components/flat-table/flat-table.pw.tsx
+++ b/src/components/flat-table/flat-table.pw.tsx
@@ -141,20 +141,20 @@ const lightBlue = "rgb(51, 92, 220)";
 
 const checkFocus = async (locator: Locator) => {
   const contentValue = await locator.evaluate((el) =>
-    window.getComputedStyle(el, "after").getPropertyValue("border")
+    window.getComputedStyle(el, "after").getPropertyValue("border"),
   );
   expect(contentValue).toBe(`2px solid ${gold}`);
 };
 
 const checkNewFocusStyling = async (locator: Locator) => {
   const shadowValue = await locator.evaluate((el) =>
-    window.getComputedStyle(el, "after").getPropertyValue("box-shadow")
+    window.getComputedStyle(el, "after").getPropertyValue("box-shadow"),
   );
   const outlineValue = await locator.evaluate((el) =>
-    window.getComputedStyle(el, "after").getPropertyValue("outline")
+    window.getComputedStyle(el, "after").getPropertyValue("outline"),
   );
   expect(shadowValue).toBe(
-    `rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset`
+    `rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset`,
   );
   expect(outlineValue).toBe(`rgba(0, 0, 0, 0) solid 3px`);
 };
@@ -168,7 +168,7 @@ test.describe("Prop tests", () => {
 
     await expect(flatTable(page)).toHaveAttribute(
       "aria-describedby",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -182,7 +182,7 @@ test.describe("Prop tests", () => {
 
         await expect(flatTableCaption(page)).toHaveText(captionValue);
       });
-    }
+    },
   );
 
   test(`should render with head and body nodes as children`, async ({
@@ -213,7 +213,7 @@ test.describe("Prop tests", () => {
     for await (const i of indexes(4)) {
       await expect(flatTableHeaderCellsIcon(page).nth(i)).toHaveAttribute(
         "data-component",
-        "icon"
+        "icon",
       );
     }
   });
@@ -222,12 +222,12 @@ test.describe("Prop tests", () => {
     await mount(
       <FlatTableComponent>
         <Icon type="business" color="white" />
-      </FlatTableComponent>
+      </FlatTableComponent>,
     );
 
     await expect(flatTable(page).locator("span").first()).toHaveAttribute(
       "data-component",
-      "icon"
+      "icon",
     );
   });
 
@@ -240,7 +240,7 @@ test.describe("Prop tests", () => {
     await expect(flatTableHeaderCells(page).nth(0)).toHaveText("Name");
     await expect(flatTableHeaderCells(page).nth(1)).toHaveText("Location ");
     await expect(flatTableHeaderCells(page).nth(2)).toHaveText(
-      "Relationship Status "
+      "Relationship Status ",
     );
     await expect(flatTableHeaderCells(page).nth(3)).toHaveText("Dependents ");
   });
@@ -264,7 +264,7 @@ test.describe("Prop tests", () => {
 
     for await (const i of indexes(4)) {
       await expect(
-        flatTableBodyRowByPosition(page, 0).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 0).locator("td").nth(i),
       ).toHaveCount(1);
     }
   });
@@ -278,7 +278,7 @@ test.describe("Prop tests", () => {
     for await (const i of indexes(5)) {
       if (i !== 1) {
         await expect(
-          flatTableHeader(page).nth(0).locator("th").nth(i)
+          flatTableHeader(page).nth(0).locator("th").nth(i),
         ).toHaveAttribute("data-element", "flat-table-header");
       }
     }
@@ -291,7 +291,7 @@ test.describe("Prop tests", () => {
     await mount(<FlatTableSpanComponent />);
 
     await expect(
-      flatTableHeader(page).nth(0).locator("th").nth(1)
+      flatTableHeader(page).nth(0).locator("th").nth(1),
     ).toHaveAttribute("data-element", "flat-table-row-header");
   });
 
@@ -302,7 +302,7 @@ test.describe("Prop tests", () => {
     await mount(<FlatTableSpanComponent />);
 
     await expect(
-      flatTableRowHeader(page).nth(0).locator("span")
+      flatTableRowHeader(page).nth(0).locator("span"),
     ).toHaveAttribute("data-component", "icon");
   });
 
@@ -341,7 +341,7 @@ test.describe("Prop tests", () => {
     await mount(<FlatTableColorRowSelectableComponent />);
 
     await expect(
-      flatTableHeaderCells(page).nth(0).locator("input")
+      flatTableHeaderCells(page).nth(0).locator("input"),
     ).toHaveAttribute("aria-labelledby", CHARACTERS.STANDARD);
   });
 
@@ -349,13 +349,13 @@ test.describe("Prop tests", () => {
     await mount(
       <div style={{ height: "150px" }}>
         <FlatTableComponent hasStickyHead />
-      </div>
+      </div>,
     );
 
     await expect(flatTable(page)).toHaveCount(1);
     await expect(flatTable(page).locator("thead")).toHaveCSS(
       "position",
-      "sticky"
+      "sticky",
     );
 
     for await (const i of indexes(5)) {
@@ -385,14 +385,14 @@ test.describe("Prop tests", () => {
     await mount(
       <div style={{ height: "150px" }}>
         <FlatTableSpanComponent hasStickyHead />
-      </div>
+      </div>,
     );
 
     await expect(
-      flatTableHeaderRowByPosition(page, 0).locator("th").first()
+      flatTableHeaderRowByPosition(page, 0).locator("th").first(),
     ).toHaveCSS("top", "0px");
     await expect(
-      flatTableHeaderRowByPosition(page, 1).locator("th").first()
+      flatTableHeaderRowByPosition(page, 1).locator("th").first(),
     ).toHaveCSS("top", "40px");
   });
 
@@ -401,7 +401,7 @@ test.describe("Prop tests", () => {
 
     await expect(flatTablePager(page).locator("..")).toHaveCSS(
       "position",
-      "sticky"
+      "sticky",
     );
 
     for await (const i of indexes(5)) {
@@ -444,7 +444,7 @@ test.describe("Prop tests", () => {
           "1px",
           "border-right",
           "solid",
-          brColor
+          brColor,
         );
       }
     });
@@ -456,11 +456,11 @@ test.describe("Prop tests", () => {
     for await (const i of indexes(4)) {
       if (i === 0 || i === 2) {
         await expect(
-          flatTableBodyRowByPosition(page, i).locator("td").nth(0)
+          flatTableBodyRowByPosition(page, i).locator("td").nth(0),
         ).toHaveCSS("background-color", "rgb(255, 255, 255)");
       } else {
         await expect(
-          flatTableBodyRowByPosition(page, i).locator("td").nth(0)
+          flatTableBodyRowByPosition(page, i).locator("td").nth(0),
         ).toHaveCSS("background-color", "rgb(250, 251, 251)");
       }
     }
@@ -473,7 +473,7 @@ test.describe("Prop tests", () => {
       await assertCssValueIsApproximately(
         flatTableHeader(page),
         "height",
-        rowHeight
+        rowHeight,
       );
 
       for await (const i of indexes(4)) {
@@ -498,7 +498,7 @@ test.describe("Prop tests", () => {
       await assertCssValueIsApproximately(
         flatTableWrapper(page),
         "height",
-        height
+        height,
       );
     });
   });
@@ -509,7 +509,7 @@ test.describe("Prop tests", () => {
       page,
     }) => {
       await mount(
-        <FlatTableComponent height={`${height}px`} minHeight="250px" />
+        <FlatTableComponent height={`${height}px`} minHeight="250px" />,
       );
 
       if (height < 250) {
@@ -518,7 +518,7 @@ test.describe("Prop tests", () => {
         await assertCssValueIsApproximately(
           flatTableWrapper(page),
           "height",
-          height
+          height,
         );
       }
     });
@@ -540,7 +540,7 @@ test.describe("Prop tests", () => {
       await assertCssValueIsApproximately(
         flatTableWrapper(page),
         "width",
-        width
+        width,
       );
     });
   });
@@ -554,7 +554,7 @@ test.describe("Prop tests", () => {
 
       await expect(flatTable(page).locator("..")).toHaveCSS(
         "overflow-x",
-        overflow
+        overflow,
       );
     });
   });
@@ -568,7 +568,7 @@ test.describe("Prop tests", () => {
     for await (const i of indexes(4)) {
       if (i !== 2) {
         await expect(
-          flatTableHeaderRowByPosition(page, 0).locator("th").nth(i)
+          flatTableHeaderRowByPosition(page, 0).locator("th").nth(i),
         ).toHaveAttribute("rowspan", "2");
       }
     }
@@ -583,7 +583,7 @@ test.describe("Prop tests", () => {
     for await (const i of indexes(5, 2)) {
       if (i === 2 || i === 4) {
         await expect(
-          flatTableHeaderRowByPosition(page, 0).locator("th").nth(i)
+          flatTableHeaderRowByPosition(page, 0).locator("th").nth(i),
         ).toHaveAttribute("colspan", "2");
       }
     }
@@ -597,17 +597,17 @@ test.describe("Prop tests", () => {
     await mount(<FlatTableSpanComponent />);
 
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("td").nth(0)
+      flatTableBodyRowByPosition(page, 1).locator("td").nth(0),
     ).toHaveCSS("position", "sticky");
     await expect(flatTableBodyRowByPosition(page, 1).locator("th")).toHaveCSS(
       "position",
-      "sticky"
+      "sticky",
     );
     const position4 = flatTableBodyRowByPosition(page, 1).locator("td").nth(4);
     await expect(position4).not.toBeInViewport();
     await position4.scrollIntoViewIfNeeded();
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("th")
+      flatTableBodyRowByPosition(page, 1).locator("th"),
     ).toBeInViewport();
   });
 
@@ -620,28 +620,28 @@ test.describe("Prop tests", () => {
     await mount(<FlatTableMultipleStickyComponent />);
 
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("td").nth(0)
+      flatTableBodyRowByPosition(page, 1).locator("td").nth(0),
     ).toHaveCSS("position", "sticky");
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("th").nth(0)
+      flatTableBodyRowByPosition(page, 1).locator("th").nth(0),
     ).toHaveCSS("position", "sticky");
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("th").nth(1)
+      flatTableBodyRowByPosition(page, 1).locator("th").nth(1),
     ).toHaveCSS("position", "sticky");
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("td").nth(7)
+      flatTableBodyRowByPosition(page, 1).locator("td").nth(7),
     ).toHaveCSS("position", "sticky");
 
     for await (const i of indexes(7, 1)) {
       await waitForAnimationEnd(flatTable(page));
       if (i < 4) {
         await expect(
-          flatTableBodyRowByPosition(page, 1).locator("td").nth(i)
+          flatTableBodyRowByPosition(page, 1).locator("td").nth(i),
         ).toBeInViewport();
       }
       if (i === 4 || i === 5 || i === 6) {
         await expect(
-          flatTableBodyRowByPosition(page, 1).locator("td").nth(i)
+          flatTableBodyRowByPosition(page, 1).locator("td").nth(i),
         ).not.toBeInViewport();
       }
     }
@@ -652,18 +652,18 @@ test.describe("Prop tests", () => {
     for await (const i of indexes(7, 1)) {
       if (i > 2) {
         await expect(
-          flatTableBodyRowByPosition(page, 1).locator("td").nth(i)
+          flatTableBodyRowByPosition(page, 1).locator("td").nth(i),
         ).toBeInViewport();
       }
       if (i === 1 || i === 2) {
         await expect(
-          flatTableBodyRowByPosition(page, 1).locator("td").nth(i)
+          flatTableBodyRowByPosition(page, 1).locator("td").nth(i),
         ).not.toBeInViewport();
       }
     }
 
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("th").nth(0)
+      flatTableBodyRowByPosition(page, 1).locator("th").nth(0),
     ).toBeInViewport();
   });
 
@@ -680,10 +680,10 @@ test.describe("Prop tests", () => {
     const input = flatTable(page).locator("input");
 
     await expect(
-      flatTableHeaderRowByPosition(page, 0).locator("th").nth(0)
+      flatTableHeaderRowByPosition(page, 0).locator("th").nth(0),
     ).toHaveCSS("position", "sticky");
     await expect(
-      flatTableHeaderRowByPosition(page, 0).locator("th").nth(1)
+      flatTableHeaderRowByPosition(page, 0).locator("th").nth(1),
     ).toHaveCSS("position", "sticky");
     await expect(bodyCell1).toHaveCSS("position", "sticky");
     await expect(bodyStickyCell).toHaveCSS("position", "sticky");
@@ -731,17 +731,19 @@ test.describe("Prop tests", () => {
       await assertCssValueIsApproximately(
         flatTableHeaderCells(page).nth(column),
         "width",
-        width
+        width,
       );
     });
   });
 
-  ([
-    [0, "left"],
-    [1, "left"],
-    [2, "center"],
-    [3, "right"],
-  ] as const).forEach(([column, alignment]) => {
+  (
+    [
+      [0, "left"],
+      [1, "left"],
+      [2, "center"],
+      [3, "right"],
+    ] as const
+  ).forEach(([column, alignment]) => {
     test(`should render column index ${column} with ${alignment} alignment`, async ({
       mount,
       page,
@@ -750,7 +752,7 @@ test.describe("Prop tests", () => {
 
       await expect(flatTableHeaderCells(page).nth(column)).toHaveCSS(
         "text-align",
-        alignment
+        alignment,
       );
     });
   });
@@ -763,7 +765,7 @@ test.describe("Prop tests", () => {
 
     await expect(flatTableHeader(page).locator("th").nth(2)).toHaveCSS(
       "background-color",
-      "rgb(25, 71, 94)"
+      "rgb(25, 71, 94)",
     );
   });
 
@@ -775,15 +777,15 @@ test.describe("Prop tests", () => {
 
     await expect(flatTableHeader(page).locator("th").nth(0)).toHaveCSS(
       "border-right-width",
-      borderSizeSmall
+      borderSizeSmall,
     );
     await expect(flatTableHeader(page).locator("th").nth(1)).toHaveCSS(
       "border-right-width",
-      borderSizeMedium
+      borderSizeMedium,
     );
     await expect(flatTableHeader(page).locator("th").nth(2)).toHaveCSS(
       "border-right-width",
-      borderSizeLarge
+      borderSizeLarge,
     );
 
     for await (const i of indexes(3)) {
@@ -802,7 +804,7 @@ test.describe("Prop tests", () => {
       await expect(position2).toHaveCSS("border-right-color", lightGold);
       await expect(position3).toHaveCSS(
         "border-right",
-        `${borderSizeLarge} solid ${darkGrey}`
+        `${borderSizeLarge} solid ${darkGrey}`,
       );
     }
   });
@@ -818,7 +820,7 @@ test.describe("Prop tests", () => {
       .nth(1);
     await expect(headerPosition1).toHaveCSS(
       "border-right-width",
-      borderSizeSmall
+      borderSizeSmall,
     );
     await expect(headerPosition1).toHaveCSS("border-right-color", lightBlue);
 
@@ -826,7 +828,7 @@ test.describe("Prop tests", () => {
       const bodyPosition1 = flatTableBodyRowByPosition(page, i).locator("th");
       await expect(bodyPosition1).toHaveCSS(
         "border-right-width",
-        borderSizeSmall
+        borderSizeSmall,
       );
       await expect(bodyPosition1).toHaveCSS("border-right-color", black);
     }
@@ -835,7 +837,7 @@ test.describe("Prop tests", () => {
       const bodyPosition2 = flatTableBodyRowByPosition(page, i).locator("th");
       await expect(bodyPosition2).toHaveCSS(
         "border-right-width",
-        borderSizeMedium
+        borderSizeMedium,
       );
       await expect(bodyPosition2).toHaveCSS("border-right-color", lightGold);
     }
@@ -844,7 +846,7 @@ test.describe("Prop tests", () => {
       const bodyPosition3 = flatTableBodyRowByPosition(page, i).locator("th");
       await expect(bodyPosition3).toHaveCSS(
         "border-right",
-        `${borderSizeLarge} solid ${mediumGrey}`
+        `${borderSizeLarge} solid ${mediumGrey}`,
       );
     }
   });
@@ -857,16 +859,16 @@ test.describe("Prop tests", () => {
 
     for await (const i of indexes(4)) {
       await expect(
-        flatTableBodyRowByPosition(page, 0).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 0).locator("td").nth(i),
       ).toHaveCSS("border-bottom", `${borderSizeMedium} solid ${lightGold}`);
       await expect(
-        flatTableBodyRowByPosition(page, 1).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 1).locator("td").nth(i),
       ).toHaveCSS("border-bottom", `${borderSizeSmall} solid ${blue}`);
       await expect(
-        flatTableBodyRowByPosition(page, 2).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 2).locator("td").nth(i),
       ).toHaveCSS("border-bottom", `${borderSizeLarge} solid ${black}`);
       await expect(
-        flatTableBodyRowByPosition(page, 3).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 3).locator("td").nth(i),
       ).toHaveCSS("border-bottom", `${borderSizeSmall} solid ${mediumGrey}`);
     }
   });
@@ -875,10 +877,10 @@ test.describe("Prop tests", () => {
     await mount(<FlatTableColorRowSelectableComponent />);
 
     await expect(
-      flatTableBodyRowByPosition(page, 0).locator("td").first()
+      flatTableBodyRowByPosition(page, 0).locator("td").first(),
     ).toHaveCSS("background-color", green);
     await expect(
-      flatTableBodyRowByPosition(page, 2).locator("td").first()
+      flatTableBodyRowByPosition(page, 2).locator("td").first(),
     ).toHaveCSS("background-color", green);
   });
 
@@ -899,16 +901,16 @@ test.describe("Prop tests", () => {
       .locator("div:nth-child(2)");
     await expect(checkboxParent).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
 
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("td").first()
+      flatTableBodyRowByPosition(page, 1).locator("td").first(),
     ).toHaveCSS("background-color", lightGrey);
     await expect(batchSelectionCounter(page)).toHaveText("1 selected");
     for await (const i of indexes(3)) {
       await expect(
-        batchSelectionComponent(page).locator("button").nth(i).locator("span")
+        batchSelectionComponent(page).locator("button").nth(i).locator("span"),
       ).toHaveCSS("color", greyBlack);
     }
   });
@@ -928,20 +930,20 @@ test.describe("Prop tests", () => {
         .locator("input")
         .locator("..")
         .locator("..")
-        .locator("div:nth-child(2)")
+        .locator("div:nth-child(2)"),
     ).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
 
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("td").first()
+      flatTableBodyRowByPosition(page, 1).locator("td").first(),
     ).toHaveCSS("background-color", lightGrey);
 
     await expect(batchSelectionCounter(page)).toHaveText("1 selected");
     for await (const i of indexes(3)) {
       await expect(
-        batchSelectionComponent(page).locator("button").nth(i).locator("span")
+        batchSelectionComponent(page).locator("button").nth(i).locator("span"),
       ).toHaveCSS("color", greyBlack);
     }
   });
@@ -974,33 +976,33 @@ test.describe("Prop tests", () => {
         .locator("input")
         .locator("..")
         .locator("..")
-        .locator("div:nth-child(2)")
+        .locator("div:nth-child(2)"),
     ).toHaveCSS("box-shadow", `${gold} 0px 0px 0px 3px`);
     for await (const i of indexes(4)) {
       await expect(
-        flatTableCheckboxCell(page, i).locator("input")
+        flatTableCheckboxCell(page, i).locator("input"),
       ).toBeChecked();
     }
 
     for await (const i of indexes(5, 1)) {
       await expect(
-        flatTableBodyRowByPosition(page, 0).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 0).locator("td").nth(i),
       ).toHaveCSS("background-color", green);
       await expect(
-        flatTableBodyRowByPosition(page, 1).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 1).locator("td").nth(i),
       ).toHaveCSS("background-color", lightGrey);
       await expect(
-        flatTableBodyRowByPosition(page, 2).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 2).locator("td").nth(i),
       ).toHaveCSS("background-color", green);
       await expect(
-        flatTableBodyRowByPosition(page, 3).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 3).locator("td").nth(i),
       ).toHaveCSS("background-color", lightGrey);
     }
 
     await expect(batchSelectionCounter(page)).toHaveText("4 selected");
     for await (const i of indexes(3)) {
       await expect(
-        batchSelectionComponent(page).locator("button").nth(i).locator("span")
+        batchSelectionComponent(page).locator("button").nth(i).locator("span"),
       ).toHaveCSS("color", greyBlack);
     }
   });
@@ -1019,36 +1021,36 @@ test.describe("Prop tests", () => {
         .locator("input")
         .locator("..")
         .locator("..")
-        .locator("div:nth-child(2)")
+        .locator("div:nth-child(2)"),
     ).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     for await (const i of indexes(4)) {
       await expect(
-        flatTableCheckboxCell(page, i).locator("input")
+        flatTableCheckboxCell(page, i).locator("input"),
       ).toBeChecked();
     }
 
     for await (const i of indexes(5, 1)) {
       await expect(
-        flatTableBodyRowByPosition(page, 0).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 0).locator("td").nth(i),
       ).toHaveCSS("background-color", green);
       await expect(
-        flatTableBodyRowByPosition(page, 1).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 1).locator("td").nth(i),
       ).toHaveCSS("background-color", lightGrey);
       await expect(
-        flatTableBodyRowByPosition(page, 2).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 2).locator("td").nth(i),
       ).toHaveCSS("background-color", green);
       await expect(
-        flatTableBodyRowByPosition(page, 3).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 3).locator("td").nth(i),
       ).toHaveCSS("background-color", lightGrey);
     }
 
     await expect(batchSelectionCounter(page)).toHaveText("4 selected");
     for await (const i of indexes(3)) {
       await expect(
-        batchSelectionComponent(page).locator("button").nth(i).locator("span")
+        batchSelectionComponent(page).locator("button").nth(i).locator("span"),
       ).toHaveCSS("color", greyBlack);
     }
   });
@@ -1068,36 +1070,36 @@ test.describe("Prop tests", () => {
         .locator("input")
         .locator("..")
         .locator("..")
-        .locator("div:nth-child(2)")
+        .locator("div:nth-child(2)"),
     ).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     for await (const i of indexes(4)) {
       await expect(
-        flatTableCheckboxCell(page, i).locator("input")
+        flatTableCheckboxCell(page, i).locator("input"),
       ).toBeChecked();
     }
 
     for await (const i of indexes(5, 1)) {
       await expect(
-        flatTableBodyRowByPosition(page, 0).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 0).locator("td").nth(i),
       ).toHaveCSS("background-color", green);
       await expect(
-        flatTableBodyRowByPosition(page, 1).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 1).locator("td").nth(i),
       ).toHaveCSS("background-color", lightGrey);
       await expect(
-        flatTableBodyRowByPosition(page, 2).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 2).locator("td").nth(i),
       ).toHaveCSS("background-color", green);
       await expect(
-        flatTableBodyRowByPosition(page, 3).locator("td").nth(i)
+        flatTableBodyRowByPosition(page, 3).locator("td").nth(i),
       ).toHaveCSS("background-color", lightGrey);
     }
 
     await expect(batchSelectionCounter(page)).toHaveText("4 selected");
     for await (const i of indexes(3)) {
       await expect(
-        batchSelectionComponent(page).locator("button").nth(i).locator("span")
+        batchSelectionComponent(page).locator("button").nth(i).locator("span"),
       ).toHaveCSS("color", greyBlack);
     }
   });
@@ -1125,7 +1127,7 @@ test.describe("Prop tests", () => {
     const bodyRow = flatTableBodyRows(page).first();
     await bodyRow.click();
     await expect(
-      flatTableBodyRows(page).first().locator("td").first()
+      flatTableBodyRows(page).first().locator("td").first(),
     ).toHaveCSS("background-color", vlightGrey);
   });
 
@@ -1138,7 +1140,7 @@ test.describe("Prop tests", () => {
     const bodyRow = flatTableBodyRows(page).first();
     await bodyRow.click();
     await expect(
-      flatTableBodyRows(page).first().locator("td").first()
+      flatTableBodyRows(page).first().locator("td").first(),
     ).toHaveCSS("background-color", vlightGrey);
 
     const bodyRowPosition = flatTableBodyRowByPosition(page, 0)
@@ -1155,15 +1157,15 @@ test.describe("Prop tests", () => {
       .locator("div:nth-child(2)");
     await expect(bodyRowParent).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(
-      flatTableBodyRows(page).first().locator("td").first()
+      flatTableBodyRows(page).first().locator("td").first(),
     ).toHaveCSS("background-color", lightGrey);
 
     await flatTableBodyRowByPosition(page, 1).click();
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("td").first()
+      flatTableBodyRowByPosition(page, 1).locator("td").first(),
     ).toHaveCSS("background-color", vlightGrey);
   });
 
@@ -1176,7 +1178,7 @@ test.describe("Prop tests", () => {
     const bodyRow = flatTableBodyRows(page).first();
     await bodyRow.press("Space");
     await expect(
-      flatTableBodyRows(page).first().locator("td").first()
+      flatTableBodyRows(page).first().locator("td").first(),
     ).toHaveCSS("background-color", vlightGrey);
   });
 
@@ -1189,7 +1191,7 @@ test.describe("Prop tests", () => {
     const bodyRow = flatTableBodyRows(page).first();
     await bodyRow.press("Enter");
     await expect(
-      flatTableBodyRows(page).first().locator("td").first()
+      flatTableBodyRows(page).first().locator("td").first(),
     ).toHaveCSS("background-color", vlightGrey);
   });
 
@@ -1233,7 +1235,7 @@ test.describe("Prop tests", () => {
     await mount(<FlatTableTitleAlignComponent />);
 
     await expect(
-      flatTableRowHeader(page).nth(1).locator("div")
+      flatTableRowHeader(page).nth(1).locator("div"),
     ).toHaveAttribute("title", CHARACTERS.DIACRITICS);
   });
 
@@ -1242,7 +1244,7 @@ test.describe("Prop tests", () => {
 
     await expect(flatTableCell(page, 0).locator("div")).toHaveAttribute(
       "title",
-      CHARACTERS.DIACRITICS
+      CHARACTERS.DIACRITICS,
     );
   });
 
@@ -1251,7 +1253,7 @@ test.describe("Prop tests", () => {
 
     await expect(flatTableRowHeader(page).nth(1).locator("div")).toHaveCSS(
       "width",
-      "50px"
+      "50px",
     );
   });
 
@@ -1260,7 +1262,7 @@ test.describe("Prop tests", () => {
 
     await expect(flatTableCell(page, 0).locator("div")).toHaveCSS(
       "width",
-      "60px"
+      "60px",
     );
   });
 
@@ -1269,19 +1271,19 @@ test.describe("Prop tests", () => {
 
     await expect(flatTableRowHeader(page).nth(1).locator("div")).toHaveCSS(
       "text-align",
-      "left"
+      "left",
     );
     await expect(flatTableRowHeader(page).nth(2).locator("div")).toHaveCSS(
       "text-align",
-      "center"
+      "center",
     );
     await expect(flatTableRowHeader(page).nth(3).locator("div")).toHaveCSS(
       "text-align",
-      "right"
+      "right",
     );
     await expect(flatTableRowHeader(page).nth(4).locator("div")).toHaveCSS(
       "text-align",
-      "left"
+      "left",
     );
   });
 
@@ -1289,25 +1291,27 @@ test.describe("Prop tests", () => {
     await mount(<FlatTableTitleAlignComponent />);
 
     await expect(
-      flatTableBodyRowByPosition(page, 0).locator("td").nth(0)
+      flatTableBodyRowByPosition(page, 0).locator("td").nth(0),
     ).toHaveCSS("text-align", "left");
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("td").nth(0)
+      flatTableBodyRowByPosition(page, 1).locator("td").nth(0),
     ).toHaveCSS("text-align", "center");
     await expect(
-      flatTableBodyRowByPosition(page, 2).locator("td").nth(0)
+      flatTableBodyRowByPosition(page, 2).locator("td").nth(0),
     ).toHaveCSS("text-align", "right");
     await expect(
-      flatTableBodyRowByPosition(page, 3).locator("td").nth(0)
+      flatTableBodyRowByPosition(page, 3).locator("td").nth(0),
     ).toHaveCSS("text-align", "left");
   });
 
-  ([
-    [0, "8px"],
-    [1, "16px"],
-    [2, "24px"],
-    [3, "32px"],
-  ] as const).forEach(([row, customPad]) => {
+  (
+    [
+      [0, "8px"],
+      [1, "16px"],
+      [2, "24px"],
+      [3, "32px"],
+    ] as const
+  ).forEach(([row, customPad]) => {
     test(`should render row ${row} with ${customPad} custom padding`, async ({
       mount,
       page,
@@ -1376,7 +1380,7 @@ test.describe("Prop tests", () => {
       if (colPosition === "first" && sortOrder === "desc") {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_down"
+          "sort_down",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell1).toHaveText(valueOne);
@@ -1390,7 +1394,7 @@ test.describe("Prop tests", () => {
       } else if (colPosition === "first" && sortOrder === "asc") {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_up"
+          "sort_up",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell1).toHaveText(valueFour);
@@ -1404,7 +1408,7 @@ test.describe("Prop tests", () => {
       } else if (colPosition === "second" && sortOrder === "desc") {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_down"
+          "sort_down",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell2).toHaveText(totalFour);
@@ -1418,7 +1422,7 @@ test.describe("Prop tests", () => {
       } else {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_up"
+          "sort_up",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell2).toHaveText(totalOne);
@@ -1468,7 +1472,7 @@ test.describe("Prop tests", () => {
       if (colPosition === "first" && sortOrder === "desc") {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_down"
+          "sort_down",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell1).toHaveText(valueOne);
@@ -1482,7 +1486,7 @@ test.describe("Prop tests", () => {
       } else if (colPosition === "first" && sortOrder === "asc") {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_up"
+          "sort_up",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell1).toHaveText(valueFour);
@@ -1496,7 +1500,7 @@ test.describe("Prop tests", () => {
       } else if (colPosition === "second" && sortOrder === "desc") {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_down"
+          "sort_down",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell2).toHaveText(totalFour);
@@ -1510,7 +1514,7 @@ test.describe("Prop tests", () => {
       } else {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_up"
+          "sort_up",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell2).toHaveText(totalOne);
@@ -1560,7 +1564,7 @@ test.describe("Prop tests", () => {
       if (colPosition === "first" && sortOrder === "desc") {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_down"
+          "sort_down",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell1).toHaveText(valueOne);
@@ -1574,7 +1578,7 @@ test.describe("Prop tests", () => {
       } else if (colPosition === "first" && sortOrder === "asc") {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_up"
+          "sort_up",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell1).toHaveText(valueFour);
@@ -1588,7 +1592,7 @@ test.describe("Prop tests", () => {
       } else if (colPosition === "second" && sortOrder === "desc") {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_down"
+          "sort_down",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell2).toHaveText(totalFour);
@@ -1602,7 +1606,7 @@ test.describe("Prop tests", () => {
       } else {
         await expect(headerCellsIcon).toHaveAttribute(
           "data-element",
-          "sort_up"
+          "sort_up",
         );
         await expect(headerCellsIcon).toBeVisible();
         await expect(cell2).toHaveText(totalOne);
@@ -1627,7 +1631,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
 
@@ -1652,7 +1656,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
 
@@ -1679,7 +1683,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
     await expect(flatTableSubrows(page)).toHaveCount(0);
@@ -1694,7 +1698,7 @@ test.describe("Prop tests", () => {
     await bodyRowByPosition.press("ArrowDown");
     await page.waitForTimeout(250);
     await expect(
-      flatTableBodyRowByPosition(page, 3).locator("td").nth(3)
+      flatTableBodyRowByPosition(page, 3).locator("td").nth(3),
     ).toHaveCSS("border-right", `2px solid ${gold}`);
   });
 
@@ -1706,7 +1710,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
     await expect(flatTableSubrows(page)).toHaveCount(0);
@@ -1733,7 +1737,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
     await expect(flatTableSubrows(page)).toHaveCount(0);
@@ -1748,7 +1752,7 @@ test.describe("Prop tests", () => {
     await bodyRowByPosition.press("ArrowDown");
     await page.waitForTimeout(250);
     await expect(
-      flatTableBodyRowByPosition(page, 3).locator("td").nth(3)
+      flatTableBodyRowByPosition(page, 3).locator("td").nth(3),
     ).toHaveCSS("border-right", `2px solid ${gold}`);
   });
 
@@ -1760,7 +1764,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
     await expect(flatTableSubrows(page)).toHaveCount(0);
@@ -1798,7 +1802,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
     await expect(flatTableSubrows(page)).toHaveCount(0);
@@ -1814,11 +1818,11 @@ test.describe("Prop tests", () => {
       .nth(3);
     await expect(bodyRowByPosition1).toHaveCSS(
       "border-right",
-      `2px solid ${gold}`
+      `2px solid ${gold}`,
     );
     await bodyRowByPosition1.press("ArrowDown");
     await expect(
-      flatTableBodyRowByPosition(page, 2).locator("td").nth(3)
+      flatTableBodyRowByPosition(page, 2).locator("td").nth(3),
     ).toHaveCSS("border-right", `2px solid ${gold}`);
   });
 
@@ -1830,7 +1834,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
 
@@ -1886,7 +1890,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
 
@@ -1906,7 +1910,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
     await expect(flatTableSubrows(page)).toHaveCount(0);
@@ -1929,7 +1933,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
     await expect(flatTableSubrows(page)).toHaveCount(0);
@@ -1949,7 +1953,7 @@ test.describe("Prop tests", () => {
 
     const transformValue = await getStyle(
       flatTableExpandableIcon(page, 0),
-      "transform"
+      "transform",
     );
     expect(getRotationAngle(transformValue)).toBe(-90);
     await expect(flatTableSubrows(page)).toHaveCount(0);
@@ -1969,19 +1973,19 @@ test.describe("Prop tests", () => {
 
     await expect(flatTableExpandableIcon(page, 0)).toHaveCSS(
       "transform",
-      "none"
+      "none",
     );
     await expect(flatTableExpandableIcon(page, 12)).toHaveCSS(
       "transform",
-      "none"
+      "none",
     );
     await expect(flatTableExpandableIcon(page, 24)).toHaveCSS(
       "transform",
-      "none"
+      "none",
     );
     await expect(flatTableExpandableIcon(page, 36)).toHaveCSS(
       "transform",
-      "none"
+      "none",
     );
     await expect(flatTableSubrows(page)).toHaveCount(8);
   });
@@ -2020,7 +2024,7 @@ test.describe("Prop tests", () => {
     await expect(flatTableSubrows(page)).toHaveCount(2);
 
     const bodyRowByPosition0Input = flatTableBodyRowByPosition(page, 0).locator(
-      "input"
+      "input",
     );
     await bodyRowByPosition0Input.click();
     await expect(bodyRowByPosition0Input).toBeChecked();
@@ -2032,11 +2036,11 @@ test.describe("Prop tests", () => {
       .locator("div:nth-child(2)");
     await expect(bodyRowByPosition0Parent).toHaveCSS(
       "box-shadow",
-      `${gold} 0px 0px 0px 3px`
+      `${gold} 0px 0px 0px 3px`,
     );
 
     const bodyRowByPosition1Input = flatTableBodyRowByPosition(page, 1).locator(
-      "input"
+      "input",
     );
     await bodyRowByPosition1Input.click();
     await expect(bodyRowByPosition1Input).toBeChecked();
@@ -2048,7 +2052,7 @@ test.describe("Prop tests", () => {
       .locator("div:nth-child(2)");
     await expect(bodyRowByPosition1Parent).toHaveCSS(
       "box-shadow",
-      `${gold} 0px 0px 0px 3px`
+      `${gold} 0px 0px 0px 3px`,
     );
   });
 
@@ -2063,7 +2067,7 @@ test.describe("Prop tests", () => {
     await expect(flatTableSubrows(page)).toHaveCount(2);
 
     const bodyRowByPosition0Input = flatTableBodyRowByPosition(page, 0).locator(
-      "input"
+      "input",
     );
     await bodyRowByPosition0Input.click();
     await expect(bodyRowByPosition0Input).toBeChecked();
@@ -2075,11 +2079,11 @@ test.describe("Prop tests", () => {
       .locator("div:nth-child(2)");
     await expect(bodyRowByPosition0Parent).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
 
     const bodyRowByPosition1Input = flatTableBodyRowByPosition(page, 1).locator(
-      "input"
+      "input",
     );
     await bodyRowByPosition1Input.click();
     await expect(bodyRowByPosition1Input).toBeChecked();
@@ -2091,7 +2095,7 @@ test.describe("Prop tests", () => {
       .locator("div:nth-child(2)");
     await expect(bodyRowByPosition1Parent).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
   });
 
@@ -2108,7 +2112,7 @@ test.describe("Prop tests", () => {
     await expect(flatTableSubrows(page)).toHaveCount(2);
 
     const bodyRowByPosition0Input = flatTableBodyRowByPosition(page, 0).locator(
-      "input"
+      "input",
     );
     await bodyRowByPosition0Input.click();
     await expect(bodyRowByPosition0Input).toBeChecked();
@@ -2120,11 +2124,11 @@ test.describe("Prop tests", () => {
       .locator("div:nth-child(2)");
     await expect(bodyRowByPosition0Parent).toHaveCSS(
       "box-shadow",
-      `${gold} 0px 0px 0px 3px`
+      `${gold} 0px 0px 0px 3px`,
     );
 
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("input")
+      flatTableBodyRowByPosition(page, 1).locator("input"),
     ).toHaveCount(0);
   });
 
@@ -2139,7 +2143,7 @@ test.describe("Prop tests", () => {
     await expect(flatTableSubrows(page)).toHaveCount(2);
 
     const bodyRowByPosition0Input = flatTableBodyRowByPosition(page, 0).locator(
-      "input"
+      "input",
     );
     await bodyRowByPosition0Input.click();
     await expect(bodyRowByPosition0Input).toBeChecked();
@@ -2151,10 +2155,10 @@ test.describe("Prop tests", () => {
       .locator("div:nth-child(2)");
     await expect(bodyRowByPosition0Parent).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(
-      flatTableBodyRowByPosition(page, 1).locator("input")
+      flatTableBodyRowByPosition(page, 1).locator("input"),
     ).toHaveCount(0);
   });
 
@@ -2170,11 +2174,11 @@ test.describe("Prop tests", () => {
     await bodyRowByPosition0.click();
     await expect(flatTableSubrows(page)).toHaveCount(2);
     await expect(
-      flatTableBodyRowByPosition(page, 0).locator("input")
+      flatTableBodyRowByPosition(page, 0).locator("input"),
     ).toHaveCount(0);
 
     const bodyRowByPosition1Input = flatTableBodyRowByPosition(page, 1).locator(
-      "input"
+      "input",
     );
     await bodyRowByPosition1Input.click();
     await expect(bodyRowByPosition1Input).toBeChecked();
@@ -2183,7 +2187,7 @@ test.describe("Prop tests", () => {
         .locator("input")
         .locator("..")
         .locator("..")
-        .locator("div:nth-child(2)")
+        .locator("div:nth-child(2)"),
     ).toHaveCSS("box-shadow", `${gold} 0px 0px 0px 3px`);
   });
 
@@ -2197,11 +2201,11 @@ test.describe("Prop tests", () => {
     await bodyRowByPosition0.click();
     await expect(flatTableSubrows(page)).toHaveCount(2);
     await expect(
-      flatTableBodyRowByPosition(page, 0).locator("input")
+      flatTableBodyRowByPosition(page, 0).locator("input"),
     ).toHaveCount(0);
 
     const bodyRowByPosition1Input = flatTableBodyRowByPosition(page, 1).locator(
-      "input"
+      "input",
     );
     await bodyRowByPosition1Input.click();
     await expect(bodyRowByPosition1Input).toBeChecked();
@@ -2210,10 +2214,10 @@ test.describe("Prop tests", () => {
         .locator("input")
         .locator("..")
         .locator("..")
-        .locator("div:nth-child(2)")
+        .locator("div:nth-child(2)"),
     ).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
   });
 
@@ -2257,7 +2261,7 @@ test.describe("Prop tests", () => {
       <FlatTablePartiallySelectedOrHighlightedRows selected />,
       {
         hooksConfig: { focusRedesignOptOut: true },
-      }
+      },
     );
 
     await page.keyboard.press("Tab");
@@ -2286,7 +2290,7 @@ test.describe("Prop tests", () => {
       <FlatTablePartiallySelectedOrHighlightedRows highlighted />,
       {
         hooksConfig: { focusRedesignOptOut: true },
-      }
+      },
     );
 
     await page.keyboard.press("Tab");
@@ -2320,7 +2324,7 @@ test.describe("Prop tests", () => {
     await checkFocus(flatTableBodyRowByPosition(page, 0));
     await page.keyboard.press("Tab");
     await expect(
-      flatTableBodyRowByPosition(page, 0).locator("input")
+      flatTableBodyRowByPosition(page, 0).locator("input"),
     ).toBeFocused();
     await page.keyboard.press("ArrowDown");
     await checkFocus(flatTableBodyRowByPosition(page, 1));
@@ -2343,7 +2347,7 @@ test.describe("Prop tests", () => {
     await checkNewFocusStyling(flatTableBodyRowByPosition(page, 0));
     await page.keyboard.press("Tab");
     await expect(
-      flatTableBodyRowByPosition(page, 0).locator("input")
+      flatTableBodyRowByPosition(page, 0).locator("input"),
     ).toBeFocused();
     await page.keyboard.press("ArrowDown");
     await checkNewFocusStyling(flatTableBodyRowByPosition(page, 1));
@@ -2609,7 +2613,7 @@ test.describe("Prop tests", () => {
     page,
   }) => {
     await mount(
-      <HighlightedRowWithLoadingState expandableArea="firstColumn" />
+      <HighlightedRowWithLoadingState expandableArea="firstColumn" />,
     );
 
     await page.waitForTimeout(300);
@@ -2662,72 +2666,72 @@ test.describe("Prop tests", () => {
     await expect(popover).toHaveCount(1);
   });
 
-  ([
-    ["UK", 0, 1],
-    ["UK", 0, 2],
-    ["UK", 0, 3],
-    ["Germany", 1, 2],
-    ["Germany", 1, 3],
-    ["Germany", 1, 0],
-    ["China", 2, 3],
-    ["China", 2, 0],
-    ["China", 2, 1],
-    ["US", 3, 0],
-    ["US", 3, 1],
-    ["US", 3, 2],
-  ] as [string, number, number][]).forEach(
-    ([record, position, destinationId]) => {
-      test(`should drag FlatTable draggable row ${record} and re-order to position ${destinationId}`, async ({
-        mount,
+  (
+    [
+      ["UK", 0, 1],
+      ["UK", 0, 2],
+      ["UK", 0, 3],
+      ["Germany", 1, 2],
+      ["Germany", 1, 3],
+      ["Germany", 1, 0],
+      ["China", 2, 3],
+      ["China", 2, 0],
+      ["China", 2, 1],
+      ["US", 3, 0],
+      ["US", 3, 1],
+      ["US", 3, 2],
+    ] as [string, number, number][]
+  ).forEach(([record, position, destinationId]) => {
+    test(`should drag FlatTable draggable row ${record} and re-order to position ${destinationId}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<FlatTableDraggableComponent />);
+
+      const draggableItem = flatTableDraggableItem(page, position);
+      const dropPosition = flatTableDraggableItemByPosition(
         page,
-      }) => {
-        await mount(<FlatTableDraggableComponent />);
+        destinationId,
+      );
+      await draggableItem.dragTo(dropPosition);
+      await expect(
+        flatTableDraggableItemByPosition(page, destinationId),
+      ).toHaveText(record);
+    });
+  });
 
-        const draggableItem = flatTableDraggableItem(page, position);
-        const dropPosition = flatTableDraggableItemByPosition(
-          page,
-          destinationId
-        );
-        await draggableItem.dragTo(dropPosition);
-        await expect(
-          flatTableDraggableItemByPosition(page, destinationId)
-        ).toHaveText(record);
-      });
-    }
-  );
+  (
+    [
+      ["large", 700, 345],
+      ["small", 700, 240],
+    ] as [string, number, number][]
+  ).forEach(([size, tableWidth, tableHeight]) => {
+    test(`should render with pager and sticky header in ${size} viewport`, async ({
+      mount,
+      page,
+    }) => {
+      await page.setViewportSize({ width: tableWidth, height: tableHeight });
+      await mount(<FlatTablePagerStickyHeaderComponent />);
 
-  ([
-    ["large", 700, 345],
-    ["small", 700, 240],
-  ] as [string, number, number][]).forEach(
-    ([size, tableWidth, tableHeight]) => {
-      test(`should render with pager and sticky header in ${size} viewport`, async ({
-        mount,
-        page,
-      }) => {
-        await page.setViewportSize({ width: tableWidth, height: tableHeight });
-        await mount(<FlatTablePagerStickyHeaderComponent />);
-
-        await flatTablePageSizeSelect(page).click();
-
-        if (size === "large") {
-          const selectListPos = flatTablePageSelectListPosition(page);
-          await expect(selectListPos).toHaveAttribute(
-            "data-floating-placement",
-            "bottom"
-          );
-          await expect(selectListPos).toBeInViewport();
-        } else {
-          const selectListPos = flatTablePageSelectListPosition(page);
-          await expect(selectListPos).toHaveAttribute(
-            "data-floating-placement",
-            "top"
-          );
-          await expect(selectListPos).toBeInViewport();
-        }
-      });
-    }
-  );
+      await flatTablePageSizeSelect(page).click();
+
+      if (size === "large") {
+        const selectListPos = flatTablePageSelectListPosition(page);
+        await expect(selectListPos).toHaveAttribute(
+          "data-floating-placement",
+          "bottom",
+        );
+        await expect(selectListPos).toBeInViewport();
+      } else {
+        const selectListPos = flatTablePageSelectListPosition(page);
+        await expect(selectListPos).toHaveAttribute(
+          "data-floating-placement",
+          "top",
+        );
+        await expect(selectListPos).toBeInViewport();
+      }
+    });
+  });
 
   [...itemsPerPage].forEach(([numberOfItems, option]) => {
     test(`should render with ${numberOfItems} items when selected with the mouse`, async ({
@@ -2995,7 +2999,7 @@ test.describe("Prop tests", () => {
 
       for await (const i of indexes(4)) {
         await expect(
-          flatTableCheckboxAsProp(page, i, asPropVal).first()
+          flatTableCheckboxAsProp(page, i, asPropVal).first(),
         ).toHaveAttribute("data-element", "flat-table-checkbox-header");
       }
     });
@@ -3013,7 +3017,7 @@ test.describe("Event tests", () => {
         getOrder={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await page.waitForTimeout(1000);
@@ -3034,7 +3038,7 @@ test.describe("Event tests", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await flatTableBodyRowByPosition(page, 0).click();
@@ -3051,7 +3055,7 @@ test.describe("Event tests", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await flatTableCheckboxCell(page, 1).locator("input").click();
@@ -3068,7 +3072,7 @@ test.describe("Event tests", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await flatTableCheckboxCell(page, 1).locator("input").click();
@@ -3085,7 +3089,7 @@ test.describe("Event tests", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await flatTableSortable(page).nth(0).click();
@@ -3113,7 +3117,7 @@ test.describe("Accessibility tests", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   // a11y error!scrollable-region-focusable on 1 Node. Ticket FE-5764 logged to investigate
@@ -3152,7 +3156,7 @@ test.describe("Accessibility tests", () => {
     await mount(
       <div style={{ height: "150px" }}>
         <FlatTableComponent hasStickyHead />
-      </div>
+      </div>,
     );
 
     await expect(flatTable(page)).toHaveCount(1);
@@ -3217,7 +3221,7 @@ test.describe("Accessibility tests", () => {
       page,
     }) => {
       await mount(
-        <FlatTableComponent height={`${height}px`} minHeight="250px" />
+        <FlatTableComponent height={`${height}px`} minHeight="250px" />,
       );
 
       await checkAccessibility(page);
@@ -3466,19 +3470,19 @@ test.describe("Rounded corner tests", () => {
     await expect(flatTableWrapper(page)).toHaveCSS("border-radius", "8px");
     await expect(flatTableHeaderCells(page).first()).toHaveCSS(
       "border-radius",
-      "8px 0px 0px"
+      "8px 0px 0px",
     );
     await expect(flatTableHeaderCells(page).last()).toHaveCSS(
       "border-radius",
-      "0px 8px 0px 0px"
+      "0px 8px 0px 0px",
     );
     await expect(flatTableCell(page, 20)).toHaveCSS(
       "border-radius",
-      "0px 0px 0px 8px"
+      "0px 0px 0px 8px",
     );
     await expect(flatTableCell(page, 23)).toHaveCSS(
       "border-radius",
-      "0px 0px 8px"
+      "0px 0px 8px",
     );
   });
 
@@ -3490,15 +3494,15 @@ test.describe("Rounded corner tests", () => {
 
     await expect(flatTableWrapper(page)).toHaveCSS(
       "border-radius",
-      "8px 8px 0px 0px"
+      "8px 8px 0px 0px",
     );
     await expect(flatTableHeaderCells(page).first()).toHaveCSS(
       "border-radius",
-      "8px 0px 0px"
+      "8px 0px 0px",
     );
     await expect(flatTableHeaderCells(page).last()).toHaveCSS(
       "border-radius",
-      "0px"
+      "0px",
     );
     await expect(flatTableCell(page, 16)).toHaveCSS("border-radius", "0px");
     await expect(flatTableCell(page, 19)).toHaveCSS("border-radius", "0px");
@@ -3514,7 +3518,7 @@ test.describe("Rounded corner tests", () => {
         width="200px"
         overflowX="auto"
         aria-label="scroll table"
-      />
+      />,
     );
 
     await expect(flatTableCell(page, 6)).toHaveCSS("border-radius", "0px");
@@ -3529,12 +3533,12 @@ test.describe("Rounded corner tests", () => {
 
     await expect(flatTableCell(page, 0)).toHaveCSS(
       "border-radius",
-      "0px 0px 0px 8px"
+      "0px 0px 0px 8px",
     );
     await expect(flatTableCell(page, 3)).toHaveCSS("border-radius", "0px");
     await expect(flatTableCell(page, 4)).toHaveCSS(
       "border-radius",
-      "0px 0px 8px"
+      "0px 0px 8px",
     );
   });
 
@@ -3546,11 +3550,11 @@ test.describe("Rounded corner tests", () => {
 
     await expect(flatTableCell(page, 2)).toHaveCSS(
       "border-radius",
-      "0px 0px 8px"
+      "0px 0px 8px",
     );
     await expect(flatTableCell(page, 3)).toHaveCSS(
       "border-radius",
-      "0px 0px 0px 8px"
+      "0px 0px 0px 8px",
     );
     await expect(flatTableCell(page, 4)).toHaveCSS("border-radius", "0px");
   });
diff --git a/src/components/flat-table/flat-table.stories.tsx b/src/components/flat-table/flat-table.stories.tsx
index fdd9b2b0a6..617b7b5622 100644
--- a/src/components/flat-table/flat-table.stories.tsx
+++ b/src/components/flat-table/flat-table.stories.tsx
@@ -1327,7 +1327,7 @@ export const WithSortingHeaders: Story = {
     const sortByNumber = (
       dataToSort: BodyDataItems,
       sortByValue: SortValue,
-      type: SortType
+      type: SortType,
     ) => {
       const sortedData = dataToSort.sort((a, b) => {
         if (type === "ascending") {
@@ -1344,7 +1344,7 @@ export const WithSortingHeaders: Story = {
     const sortByString = (
       dataToSort: BodyDataItems,
       sortByValue: SortValue,
-      type: SortType
+      type: SortType,
     ) => {
       const sortedData = dataToSort.sort((a, b) => {
         const nameA = String(a[sortByValue]).toUpperCase();
@@ -1456,7 +1456,7 @@ export const WithSortingHeadersAndCustomAccessibleName: Story = {
     const sortByNumber = (
       dataToSort: BodyDataItems,
       sortByValue: SortValue,
-      type: SortType
+      type: SortType,
     ) => {
       const sortedData = dataToSort.sort((a, b) => {
         if (type === "ascending") {
@@ -1473,7 +1473,7 @@ export const WithSortingHeadersAndCustomAccessibleName: Story = {
     const sortByString = (
       dataToSort: BodyDataItems,
       sortByValue: SortValue,
-      type: SortType
+      type: SortType,
     ) => {
       const sortedData = dataToSort.sort((a, b) => {
         const nameA = String(a[sortByValue]).toUpperCase();
@@ -1644,7 +1644,7 @@ export const WithSelectableRows: Story = () => {
   };
 
   const selectedCount = Object.keys(selectedRows).filter((key) =>
-    Boolean(selectedRows[key as SelectedRow])
+    Boolean(selectedRows[key as SelectedRow]),
   ).length;
 
   return (
@@ -1830,7 +1830,7 @@ export const WithSelectableAndHighlightableRows: Story = () => {
   };
 
   const selectedCount = Object.keys(selectedRows).filter((key) =>
-    Boolean(selectedRows[key as SelectedRow])
+    Boolean(selectedRows[key as SelectedRow]),
   ).length;
 
   const handleHighlightRow = (id: HighlightedRow) => {
@@ -2527,7 +2527,7 @@ export const WhenAChildOfSidebar: Story = () => {
     setSelectedRows({ ...selectedRows, [id]: !selectedRows[id] });
   };
   const selectedCount = Object.keys(selectedRows).filter((key) =>
-    Boolean(selectedRows[key as SelectedRow])
+    Boolean(selectedRows[key as SelectedRow]),
   ).length;
 
   const handleHighlightRow = (id: HighlightedRow) => {
diff --git a/src/components/flat-table/flat-table.style.ts b/src/components/flat-table/flat-table.style.ts
index 14a0a7f23d..a450a9c257 100644
--- a/src/components/flat-table/flat-table.style.ts
+++ b/src/components/flat-table/flat-table.style.ts
@@ -147,27 +147,26 @@ const StyledFlatTableWrapper = styled(StyledBox)<StyledFlatTableWrapperProps>`
       border-bottom-right-radius: var(--${bottomBorderRadius});
     `}
 
-  ${({ isInSidebar, theme, isFocused }) =>
+  ${({ isInSidebar, theme, isFocused }) => css`
+    box-sizing: border-box;
+
+    /* istanbul ignore next */
+    ${theme.focusRedesignOptOut &&
+    isFocused &&
+    /* istanbul ignore next */
     css`
-      box-sizing: border-box;
-
-      /* istanbul ignore next */
-      ${theme.focusRedesignOptOut &&
-      isFocused &&
-      /* istanbul ignore next */
-      css`
-        ${oldFocusStyling}
-      `}
-
-      ${!theme.focusRedesignOptOut &&
-      isFocused &&
-      css`
-        ${addFocusStyling()}
-      `}
+      ${oldFocusStyling}
+    `}
 
-      ${isInSidebar ? "min-width: fit-content;" : ""}
+    ${!theme.focusRedesignOptOut &&
+    isFocused &&
+    css`
+      ${addFocusStyling()}
     `}
 
+      ${isInSidebar ? "min-width: fit-content;" : ""}
+  `}
+
   ${({ colorTheme }) => {
     switch (colorTheme) {
       case "light":
diff --git a/src/components/flat-table/flat-table.test.tsx b/src/components/flat-table/flat-table.test.tsx
index d92aec3ab3..9aab025b19 100644
--- a/src/components/flat-table/flat-table.test.tsx
+++ b/src/components/flat-table/flat-table.test.tsx
@@ -41,7 +41,7 @@ testStyledSystemMarginRTL(
       </FlatTableBody>
     </FlatTable>
   ),
-  () => screen.getByTestId("flat-table-wrapper")
+  () => screen.getByTestId("flat-table-wrapper"),
 );
 
 describe("when rows are interactive", () => {
@@ -58,7 +58,7 @@ describe("when rows are interactive", () => {
             <FlatTableCell>four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const tableWrapper = screen.getByRole("region");
     const focusableTableContainer = screen.getByTestId("flat-table-container");
@@ -68,7 +68,7 @@ describe("when rows are interactive", () => {
     expect(tableWrapper).toHaveStyleRule("outline", "transparent 3px solid");
     expect(tableWrapper).toHaveStyleRule(
       "box-shadow",
-      "0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090)"
+      "0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090)",
     );
   });
 
@@ -87,7 +87,7 @@ describe("when rows are interactive", () => {
             </FlatTableRow>
           </FlatTableBody>
         </FlatTable>
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const tableWrapper = screen.getByRole("region");
     const focusableTableContainer = screen.getByTestId("flat-table-container");
@@ -96,7 +96,7 @@ describe("when rows are interactive", () => {
     expect(focusableTableContainer).toHaveFocus();
     expect(tableWrapper).toHaveStyleRule(
       "outline",
-      "2px solid var(--colorsSemanticFocus500)"
+      "2px solid var(--colorsSemanticFocus500)",
     );
   });
 
@@ -114,7 +114,7 @@ describe("when rows are interactive", () => {
             <FlatTableCell>four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const focusableTableContainer = screen.getByTestId("flat-table-container");
     focusableTableContainer.focus();
@@ -140,20 +140,20 @@ describe("when rows are interactive", () => {
             <FlatTableCell>four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
 
     await waitFor(() => {
       expect(screen.getByRole("row", { name: "one two" })).toHaveAttribute(
         "tabindex",
-        "0"
+        "0",
       );
     });
 
     await waitFor(() => {
       expect(screen.getByRole("row", { name: "three four" })).toHaveAttribute(
         "tabindex",
-        "-1"
+        "-1",
       );
     });
   });
@@ -180,7 +180,7 @@ describe("when rows are interactive", () => {
             <FlatTableCell>eight</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const focusableTableContainer = screen.getByTestId("flat-table-container");
     const firstRow = screen.getByRole("row", { name: "one two" });
@@ -223,7 +223,7 @@ describe("when rows are interactive", () => {
             <FlatTableCell>eight</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const firstRow = screen.getByRole("row", { name: "one two" });
     const secondRow = screen.getByRole("row", { name: "three four" });
@@ -264,7 +264,7 @@ describe("when rows are interactive", () => {
             <FlatTableCell>eight</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const fourthRow = screen.getByRole("row", { name: "seven eight" });
     fourthRow?.focus();
@@ -296,7 +296,7 @@ describe("when rows are interactive", () => {
             <FlatTableCell>eight</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const firstRow = screen.getByRole("row", { name: "one two" });
     const secondRow = screen.getByRole("row", { name: "three four" });
@@ -337,7 +337,7 @@ describe("when rows are interactive", () => {
             <FlatTableCell>eight</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const firstRow = screen.getByRole("row", { name: "one two" });
     const secondRow = screen.getByRole("row", { name: "three four" });
@@ -370,7 +370,7 @@ describe("when rows are interactive", () => {
             <FlatTableCell>four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const secondRow = screen.getByRole("row", { name: "three four" });
     const checkbox = screen.getByRole("checkbox");
@@ -395,7 +395,7 @@ describe("when rows are interactive", () => {
             <FlatTableCell>four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const firstRow = screen.getByRole("row", { name: "one two" });
     const checkbox = screen.getByRole("checkbox");
@@ -421,7 +421,7 @@ describe("when the first column is expandable", () => {
             <FlatTableCell>four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     await waitFor(() => {
       expect(screen.getByTestId("one")).toHaveAttribute("tabindex", "0");
@@ -445,20 +445,20 @@ describe("when the first column is expandable", () => {
             <FlatTableCell>four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
 
     await waitFor(() => {
       expect(screen.getByRole("cell", { name: "one" })).toHaveAttribute(
         "tabindex",
-        "-1"
+        "-1",
       );
     });
 
     await waitFor(() => {
       expect(screen.getByRole("cell", { name: "three" })).toHaveAttribute(
         "tabindex",
-        "0"
+        "0",
       );
     });
   });
@@ -476,20 +476,20 @@ describe("when the first column is expandable", () => {
             <FlatTableCell>four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
 
     await waitFor(() => {
       expect(screen.getByRole("cell", { name: "one" })).toHaveAttribute(
         "tabindex",
-        "-1"
+        "-1",
       );
     });
 
     await waitFor(() => {
       expect(screen.getByRole("cell", { name: "three" })).toHaveAttribute(
         "tabindex",
-        "0"
+        "0",
       );
     });
   });
@@ -507,19 +507,19 @@ describe("when the first column is expandable", () => {
             <FlatTableCell id="four">four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
 
     await waitFor(() => {
       expect(screen.getByRole("columnheader", { name: "one" })).toHaveAttribute(
         "tabindex",
-        "0"
+        "0",
       );
     });
 
     await waitFor(() => {
       expect(
-        screen.getByRole("columnheader", { name: "three" })
+        screen.getByRole("columnheader", { name: "three" }),
       ).toHaveAttribute("tabindex", "-1");
     });
   });
@@ -537,19 +537,19 @@ describe("when the first column is expandable", () => {
             <FlatTableCell id="four">four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
 
     await waitFor(() => {
       expect(screen.getByRole("columnheader", { name: "one" })).toHaveAttribute(
         "tabindex",
-        "-1"
+        "-1",
       );
     });
 
     await waitFor(() => {
       expect(
-        screen.getByRole("columnheader", { name: "three" })
+        screen.getByRole("columnheader", { name: "three" }),
       ).toHaveAttribute("tabindex", "0");
     });
   });
@@ -567,19 +567,19 @@ describe("when the first column is expandable", () => {
             <FlatTableCell id="four">four</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
 
     await waitFor(() => {
       expect(screen.getByRole("columnheader", { name: "one" })).toHaveAttribute(
         "tabindex",
-        "-1"
+        "-1",
       );
     });
 
     await waitFor(() => {
       expect(
-        screen.getByRole("columnheader", { name: "three" })
+        screen.getByRole("columnheader", { name: "three" }),
       ).toHaveAttribute("tabindex", "0");
     });
   });
@@ -606,7 +606,7 @@ describe("when the first column is expandable", () => {
             <FlatTableCell>eight</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const firstFocusableCell = screen.getByRole("cell", { name: "one" });
     const secondFocusableCell = screen.getByRole("cell", { name: "three" });
@@ -647,7 +647,7 @@ describe("when the first column is expandable", () => {
             <FlatTableCell>eight</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const firstFocusableCell = screen.getByRole("cell", { name: "one" });
     const secondFocusableCell = screen.getByRole("cell", { name: "three" });
@@ -688,7 +688,7 @@ describe("when the first column is expandable", () => {
             <FlatTableCell>eight</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const fourthFocusableCell = screen.getByRole("cell", { name: "seven" });
     fourthFocusableCell.focus();
@@ -715,10 +715,10 @@ test("should ensure the table has an accessible desctription when `ariaDescribed
           </FlatTableRow>
         </FlatTableBody>
       </FlatTable>
-    </>
+    </>,
   );
   expect(screen.getByRole("table")).toHaveAccessibleDescription(
-    "here is some text to describe the table"
+    "here is some text to describe the table",
   );
 });
 
@@ -735,7 +735,7 @@ test("should set the `data-` attributes on the root element when the props are p
           <FlatTableCell>child one</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
   const tableWrapper = screen.getByTestId("ft-data-role");
 
@@ -752,7 +752,7 @@ describe("when `hasStickyHead` is set", () => {
             <FlatTableCell>one</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const tableWrapper = screen.getByTestId("ft-wrapper");
 
@@ -767,7 +767,7 @@ describe("when `hasStickyHead` is set", () => {
             <FlatTableCell>one</FlatTableCell>
           </FlatTableRow>
         </FlatTableHead>
-      </FlatTable>
+      </FlatTable>,
     );
 
     expect(screen.getByRole("rowgroup")).toHaveStyle({
@@ -792,7 +792,7 @@ test("should render the `caption` element and set the accessible name of the tab
           <FlatTableCell>child one</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByRole("table")).toHaveAccessibleName("this is a caption");
@@ -814,11 +814,11 @@ test("should apply the expeced box sizing styling to the wrapper element when it
           </FlatTableRow>
         </FlatTableBody>
       </FlatTable>
-    </div>
+    </div>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).toHaveStyle(
-    "box-sizing: border-box"
+    "box-sizing: border-box",
   );
 });
 
@@ -836,7 +836,7 @@ test("should apply the expected max height on the wrapper element when the `hasM
           <FlatTableCell>three</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).toHaveStyle("max-height: 100%");
@@ -856,7 +856,7 @@ test("should not apply max height styling on the wrapper element when the `hasMa
           <FlatTableCell>three</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).not.toHaveStyle("max-height: 100%");
@@ -870,7 +870,7 @@ test("should render the `footer` element when prop is passed", () => {
           <FlatTableCell>one</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByText("foo")).toBeVisible();
@@ -884,7 +884,7 @@ test("should render the `footer` element with the expected styling when `hasStic
           <FlatTableCell>one</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("flat-table-footer")).toHaveStyle({
@@ -902,11 +902,11 @@ test("should set the expected flex styling on the wrapper when `footer` and `has
           <FlatTableCell>one</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).toHaveStyle(
-    "justify-content: space-between"
+    "justify-content: space-between",
   );
 });
 
@@ -918,12 +918,12 @@ test("should apply the expected `width` styling to the wrapper and container ele
           <FlatTableCell>one</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).toHaveStyle("width: 300px");
   expect(screen.getByTestId("flat-table-container")).toHaveStyle(
-    "width: 300px"
+    "width: 300px",
   );
 });
 
@@ -935,12 +935,12 @@ test("should apply the expected `overflowX` styling to the wrapper and container
           <FlatTableCell>one</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).toHaveStyle("overflow-x: hidden");
   expect(screen.getByTestId("flat-table-container")).toHaveStyle(
-    "overflow-x: auto"
+    "overflow-x: auto",
   );
 });
 
@@ -958,53 +958,53 @@ describe("rounded corners are enabled", () => {
             <FlatTableCell>child one</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const wrapper = screen.getByTestId("ft-wrapper");
 
     expect(wrapper).toHaveStyleRule(
       "border-top-left-radius",
-      "var(--borderRadius100)"
+      "var(--borderRadius100)",
     );
     expect(wrapper).toHaveStyleRule(
       "border-top-right-radius",
-      "var(--borderRadius100)"
+      "var(--borderRadius100)",
     );
     expect(wrapper).toHaveStyleRule(
       "border-bottom-left-radius",
-      "var(--borderRadius100)"
+      "var(--borderRadius100)",
     );
     expect(wrapper).toHaveStyleRule(
       "border-bottom-right-radius",
-      "var(--borderRadius100)"
+      "var(--borderRadius100)",
     );
     expect(wrapper).toHaveStyleRule(
       "border-top-left-radius",
       "var(--borderRadius100)",
       {
         modifier: `thead ${StyledFlatTableRow}:first-of-type th:first-of-type`,
-      }
+      },
     );
     expect(wrapper).toHaveStyleRule(
       "border-top-right-radius",
       "var(--borderRadius100)",
       {
         modifier: `thead ${StyledFlatTableRow}:first-of-type th:last-of-type`,
-      }
+      },
     );
     expect(wrapper).toHaveStyleRule(
       "border-bottom-left-radius",
       "var(--borderRadius100)",
       {
         modifier: `tbody ${StyledFlatTableRow}:last-of-type td:first-child`,
-      }
+      },
     );
     expect(wrapper).toHaveStyleRule(
       "border-bottom-right-radius",
       "var(--borderRadius100)",
       {
         modifier: `tbody ${StyledFlatTableRow}:last-of-type td:last-child`,
-      }
+      },
     );
   });
 
@@ -1021,7 +1021,7 @@ describe("rounded corners are enabled", () => {
             <FlatTableCell>item one</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const pager = screen.getByTestId("pager");
 
@@ -1048,7 +1048,7 @@ describe("rounded corners are enabled", () => {
             <FlatTableCell>child one</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
     const tableWrapper = screen.getByRole("region");
     const pager = screen.getByTestId("pager");
@@ -1080,7 +1080,7 @@ describe("rounded corners are enabled", () => {
             <FlatTableCell>child one</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
 
     expect(screen.getByTestId("ft-wrapper")).toHaveStyleRule(
@@ -1088,7 +1088,7 @@ describe("rounded corners are enabled", () => {
       "var(--borderRadius100)",
       {
         modifier: `tbody ${StyledFlatTableRow}:nth-of-type(1) td:first-child`,
-      }
+      },
     );
   });
 
@@ -1109,7 +1109,7 @@ describe("rounded corners are enabled", () => {
             <FlatTableCell>child one</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
 
     expect(screen.getByTestId("ft-wrapper")).toHaveStyleRule(
@@ -1117,7 +1117,7 @@ describe("rounded corners are enabled", () => {
       "var(--borderRadius100)",
       {
         modifier: `tbody ${StyledFlatTableRow}:nth-of-type(1) td:last-child`,
-      }
+      },
     );
   });
 });
@@ -1137,11 +1137,11 @@ test("should apply the exected min-width styling when rendered inside the drawer
           </FlatTableRow>
         </FlatTableBody>
       </FlatTable>
-    </DrawerSidebarContext.Provider>
+    </DrawerSidebarContext.Provider>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).toHaveStyle(
-    "min-width: fit-content"
+    "min-width: fit-content",
   );
 });
 
@@ -1164,7 +1164,7 @@ test("should set the expected background colour on the rows hover when `isZebra`
           <FlatTableCell>child one</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByRole("table")).toHaveStyleRule(
@@ -1172,7 +1172,7 @@ test("should set the expected background colour on the rows hover when `isZebra`
     "var(--colorsUtilityMajor025)",
     {
       modifier: `${StyledFlatTableRow}:hover ${StyledFlatTableCheckbox}:not(th)`,
-    }
+    },
   );
 });
 
@@ -1199,7 +1199,7 @@ test("should set the expected background colour on the header cells when `colorT
           <FlatTableCell colspan="2">cell1</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).toHaveStyleRule(
@@ -1207,7 +1207,7 @@ test("should set the expected background colour on the header cells when `colorT
     "var(--colorsUtilityMajor400)",
     {
       modifier: `${StyledFlatTableHeader}`,
-    }
+    },
   );
 });
 
@@ -1234,7 +1234,7 @@ test("should set the expected background colour on the header cells when `colorT
           <FlatTableCell colspan="2">cell1</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).toHaveStyleRule(
@@ -1242,7 +1242,7 @@ test("should set the expected background colour on the header cells when `colorT
     "var(--colorsUtilityMajor100)",
     {
       modifier: `${StyledFlatTableHeader}`,
-    }
+    },
   );
 });
 
@@ -1269,7 +1269,7 @@ test("should set the expected background colour on the header cells when `colorT
           <FlatTableCell colspan="2">cell1</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).toHaveStyleRule(
@@ -1277,7 +1277,7 @@ test("should set the expected background colour on the header cells when `colorT
     "var(--colorsUtilityMajor025)",
     {
       modifier: `${StyledFlatTableHeader}`,
-    }
+    },
   );
 });
 
@@ -1304,7 +1304,7 @@ test("should set the expected background colour on the header cells when `colorT
           <FlatTableCell colspan="2">cell1</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("ft-wrapper")).toHaveStyleRule(
@@ -1312,7 +1312,7 @@ test("should set the expected background colour on the header cells when `colorT
     "var(--colorsUtilityYang100)",
     {
       modifier: `${StyledFlatTableHeader}`,
-    }
+    },
   );
 });
 
@@ -1333,7 +1333,7 @@ test("hides the leftmost and rightmost table borders when `hasOuterVerticalBorde
           <FlatTableCell>Pluto</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
 
   expect(screen.getByTestId("flat-table-wrapper")).toHaveStyleRule(
@@ -1341,7 +1341,7 @@ test("hides the leftmost and rightmost table borders when `hasOuterVerticalBorde
     "var(--colorsUtilityMajorTransparent)",
     {
       modifier: `${StyledFlatTableRow} > ${StyledFlatTableCell}:first-child`,
-    }
+    },
   );
 
   expect(screen.getByTestId("flat-table-wrapper")).toHaveStyleRule(
@@ -1349,7 +1349,7 @@ test("hides the leftmost and rightmost table borders when `hasOuterVerticalBorde
     "var(--colorsUtilityMajorTransparent)",
     {
       modifier: `${StyledFlatTableRow} > ${StyledFlatTableCell}:last-child`,
-    }
+    },
   );
 });
 
@@ -1370,7 +1370,7 @@ test("should apply the expected class name to elements preceding left aligned st
           <FlatTableCell>body three</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
   const firstHeaderCell = screen.getByRole("columnheader", {
     name: "heading one",
@@ -1404,7 +1404,7 @@ test("should apply the expected class name to elements following right aligned s
           <FlatTableCell>body three</FlatTableCell>
         </FlatTableRow>
       </FlatTableBody>
-    </FlatTable>
+    </FlatTable>,
   );
   const secondHeaderCell = screen.getByRole("columnheader", {
     name: "heading two",
@@ -1437,7 +1437,7 @@ test("should not throw an error when FlatTableHead rows have only one child", ()
             <FlatTableCell>John Doe</FlatTableCell>
           </FlatTableRow>
         </FlatTableBody>
-      </FlatTable>
+      </FlatTable>,
     );
   }).not.toThrow();
 });
diff --git a/src/components/flat-table/sort/sort.test.tsx b/src/components/flat-table/sort/sort.test.tsx
index b8855534b6..6ed18516b2 100644
--- a/src/components/flat-table/sort/sort.test.tsx
+++ b/src/components/flat-table/sort/sort.test.tsx
@@ -22,7 +22,7 @@ test("should render 'sort_down' Icon if `sortType` is 'descending'", () => {
 
   expect(screen.getByTestId("icon")).toHaveAttribute(
     "data-element",
-    "sort_down"
+    "sort_down",
   );
 });
 
@@ -32,7 +32,7 @@ test("should render the correct accessible name when the `accessibleName` prop i
   render(
     <Sort accessibleName={customAccessibleName} sortType="ascending">
       Name
-    </Sort>
+    </Sort>,
   );
 
   expect(screen.getByRole("button")).toHaveAccessibleName(customAccessibleName);
@@ -42,7 +42,7 @@ test("should render a default accessible name when a child and the `sortType` pr
   render(<Sort sortType="ascending">Name</Sort>);
 
   expect(screen.getByRole("button")).toHaveAccessibleName(
-    "Sort all Name in an ascending order."
+    "Sort all Name in an ascending order.",
   );
 });
 
@@ -50,7 +50,7 @@ test("should render a default accessible name when just a child is passed", () =
   render(<Sort>Name</Sort>);
 
   expect(screen.getByRole("button")).toHaveAccessibleName(
-    "Sort all Name in an ascending or descending order."
+    "Sort all Name in an ascending or descending order.",
   );
 });
 
@@ -58,7 +58,7 @@ test("should render a default accessible name when just the `sortType` prop is p
   render(<Sort sortType="ascending" />);
 
   expect(screen.getByRole("button")).toHaveAccessibleName(
-    "Sort all contents in an ascending order."
+    "Sort all contents in an ascending order.",
   );
 });
 
@@ -66,7 +66,7 @@ test("should render a default accessible name when neither a child or the `sortT
   render(<Sort />);
 
   expect(screen.getByRole("button")).toHaveAccessibleName(
-    "Sort all contents in an ascending or descending order."
+    "Sort all contents in an ascending or descending order.",
   );
 });
 
@@ -130,12 +130,12 @@ test("should render the expected Icon styling when `colorTheme` is 'dark'", () =
       }}
     >
       <Sort sortType="ascending">Name</Sort>
-    </FlatTableContext.Provider>
+    </FlatTableContext.Provider>,
   );
 
   expect(screen.getByTestId("icon")).toHaveStyleRule(
     "color",
-    "var(--colorsActionMinorYang100)"
+    "var(--colorsActionMinorYang100)",
   );
 });
 
@@ -149,11 +149,11 @@ test.each<FlatTableProps["colorTheme"]>([
       value={{ colorTheme: color, getTabStopElementId: () => "" }}
     >
       <Sort sortType="ascending">Name</Sort>
-    </FlatTableContext.Provider>
+    </FlatTableContext.Provider>,
   );
 
   expect(screen.getByTestId("icon")).toHaveStyleRule(
     "color",
-    "var(--colorActionMinor500)"
+    "var(--colorActionMinor500)",
   );
 });
diff --git a/src/components/form/__internal__/form-summary.component.tsx b/src/components/form/__internal__/form-summary.component.tsx
index b711acc961..6292a06d8d 100644
--- a/src/components/form/__internal__/form-summary.component.tsx
+++ b/src/components/form/__internal__/form-summary.component.tsx
@@ -37,7 +37,7 @@ export const Summary = ({
   };
   const message = useMemo(
     () => l.errors.messages.formSummary(errorCount, warningCount, type),
-    [l.errors.messages, errorCount, warningCount, type]
+    [l.errors.messages, errorCount, warningCount, type],
   );
 
   if (messages[`${type}Count`]) {
diff --git a/src/components/form/form-test.stories.tsx b/src/components/form/form-test.stories.tsx
index 14e41d6233..1a12dcc4a4 100644
--- a/src/components/form/form-test.stories.tsx
+++ b/src/components/form/form-test.stories.tsx
@@ -382,7 +382,7 @@ export const MockFormForAriaLiveDemo = () => {
   const [textareaValue, setTextareaValue] = useState("");
   const [textboxValue, setTextboxValue] = useState("");
   const [textEditorValue, setTextEditorValue] = useState(
-    EditorState.createEmpty()
+    EditorState.createEmpty(),
   );
   const [passwordValue, setPasswordValue] = useState("");
 
diff --git a/src/components/form/form.config.ts b/src/components/form/form.config.ts
index b97707c82e..61223e6729 100644
--- a/src/components/form/form.config.ts
+++ b/src/components/form/form.config.ts
@@ -1,5 +1,5 @@
 export const FORM_BUTTON_ALIGNMENTS = ["left", "right"] as const;
-export type FormButtonAlignment = typeof FORM_BUTTON_ALIGNMENTS[number];
+export type FormButtonAlignment = (typeof FORM_BUTTON_ALIGNMENTS)[number];
 export const formSpacing = {
   0: "var(--spacing000)",
   1: "var(--spacing100)",
diff --git a/src/components/form/form.pw.tsx b/src/components/form/form.pw.tsx
index 3909714e9c..3452c7bad3 100644
--- a/src/components/form/form.pw.tsx
+++ b/src/components/form/form.pw.tsx
@@ -34,30 +34,30 @@ import {
 import { dataComponentButtonByText } from "../../../playwright/components/pages/index";
 
 test.describe("check props for Form component", () => {
-  ([
-    ["left", "start"],
-    ["right", "end"],
-  ] as [FormProps["buttonAlignment"], string][]).forEach(
-    ([buttonAlignment, webkitAlign]) => {
-      test(`should render with buttonAlignment ${buttonAlignment}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<FormComponent buttonAlignment={buttonAlignment} />);
-
-        await expect(getDataElementByValue(page, "form-footer")).toHaveCSS(
-          "-webkit-box-pack",
-          webkitAlign
-        );
-      });
-    }
-  );
+  (
+    [
+      ["left", "start"],
+      ["right", "end"],
+    ] as [FormProps["buttonAlignment"], string][]
+  ).forEach(([buttonAlignment, webkitAlign]) => {
+    test(`should render with buttonAlignment ${buttonAlignment}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<FormComponent buttonAlignment={buttonAlignment} />);
+
+      await expect(getDataElementByValue(page, "form-footer")).toHaveCSS(
+        "-webkit-box-pack",
+        webkitAlign,
+      );
+    });
+  });
 
   test(`should render with children`, async ({ mount, page }) => {
     await mount(
       <Form>
         <Textbox label="Textbox" />
-      </Form>
+      </Form>,
     );
 
     await expect(getElement(page, "input")).toBeVisible();
@@ -77,24 +77,24 @@ test.describe("check props for Form component", () => {
     });
   });
 
-  ([
-    [0, 281],
-    [3, 329],
-    [5, 361],
-    [7, 401],
-  ] as [FormProps["fieldSpacing"], number][]).forEach(
-    ([fieldSpacing, formHeight]) => {
-      test(`should render with fieldSpacing as ${fieldSpacing}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<FormComponent fieldSpacing={fieldSpacing} />);
-
-        const form = getComponent(page, "form");
-        await assertCssValueIsApproximately(form, "height", formHeight);
-      });
-    }
-  );
+  (
+    [
+      [0, 281],
+      [3, 329],
+      [5, 361],
+      [7, 401],
+    ] as [FormProps["fieldSpacing"], number][]
+  ).forEach(([fieldSpacing, formHeight]) => {
+    test(`should render with fieldSpacing as ${fieldSpacing}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<FormComponent fieldSpacing={fieldSpacing} />);
+
+      const form = getComponent(page, "form");
+      await assertCssValueIsApproximately(form, "height", formHeight);
+    });
+  });
 
   test(`should render with leftSideButtons`, async ({ mount, page }) => {
     await mount(<FormWithLeftSidedButtons />);
@@ -118,12 +118,12 @@ test.describe("check props for Form component", () => {
       if (noValidate) {
         await expect(getComponent(page, "form")).toHaveAttribute(
           "noValidate",
-          /.*/
+          /.*/,
         );
       } else {
         await expect(getComponent(page, "form")).not.toHaveAttribute(
           "noValidate",
-          /.*/
+          /.*/,
         );
       }
     });
@@ -139,7 +139,7 @@ test.describe("check props for Form component", () => {
         onSubmit={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const saveButton = page.getByRole("button");
@@ -167,10 +167,12 @@ test.describe("check props for Form component", () => {
     await expect(saveButton).toHaveText("Save");
   });
 
-  ([
-    [true, "rgba(0, 0, 0, 0.05) 0px -4px 12px 0px"],
-    [false, "none"],
-  ] as [FormProps["stickyFooter"], string][]).forEach(([bool, boxShadow]) => {
+  (
+    [
+      [true, "rgba(0, 0, 0, 0.05) 0px -4px 12px 0px"],
+      [false, "none"],
+    ] as [FormProps["stickyFooter"], string][]
+  ).forEach(([bool, boxShadow]) => {
     test(`should render with boxShadow value of ${boxShadow} when stickyFooter is ${bool}`, async ({
       mount,
       page,
@@ -179,7 +181,7 @@ test.describe("check props for Form component", () => {
 
       await expect(getDataElementByValue(page, "form-footer")).toHaveCSS(
         "box-shadow",
-        boxShadow
+        boxShadow,
       );
     });
   });
@@ -198,11 +200,13 @@ test.describe("check props for Form component", () => {
     });
   });
 
-  ([
-    ["30px", 30],
-    ["100px", 100],
-    ["200px", 200],
-  ] as [FormProps["height"], number][]).forEach(([height, heightVal]) => {
+  (
+    [
+      ["30px", 30],
+      ["100px", 100],
+      ["200px", 200],
+    ] as [FormProps["height"], number][]
+  ).forEach(([height, heightVal]) => {
     test(`should render with height of ${height}`, async ({ mount, page }) => {
       await mount(<FormComponent height={height} />);
 
@@ -211,24 +215,24 @@ test.describe("check props for Form component", () => {
     });
   });
 
-  ([
-    [false, 98],
-    [true, 1366],
-  ] as [FormProps["fullWidthButtons"], number][]).forEach(
-    ([bool, buttonWidth]) => {
-      test(`should render with buttonWidth of ${buttonWidth} when fullWidthButtons prop is ${bool}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<FormWithFullWidthButtons fullWidthButtons={bool} />);
-
-        const submitButton = getComponent(page, "button").filter({
-          hasText: "submit",
-        });
-        await assertCssValueIsApproximately(submitButton, "width", buttonWidth);
+  (
+    [
+      [false, 98],
+      [true, 1366],
+    ] as [FormProps["fullWidthButtons"], number][]
+  ).forEach(([bool, buttonWidth]) => {
+    test(`should render with buttonWidth of ${buttonWidth} when fullWidthButtons prop is ${bool}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<FormWithFullWidthButtons fullWidthButtons={bool} />);
+
+      const submitButton = getComponent(page, "button").filter({
+        hasText: "submit",
       });
-    }
-  );
+      await assertCssValueIsApproximately(submitButton, "width", buttonWidth);
+    });
+  });
 });
 
 test.describe("Accessibility tests for Form component", () => {
diff --git a/src/components/form/form.style.ts b/src/components/form/form.style.ts
index 4276a8921d..91d95e2419 100644
--- a/src/components/form/form.style.ts
+++ b/src/components/form/form.style.ts
@@ -21,7 +21,7 @@ export const StyledFormContent = styled.div<StyledFormContentProps>(
       flex-grow: 1;
       min-height: 0;
       overflow-y: auto;
-    `
+    `,
 );
 
 interface StyledFormFooterProps {
diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx
index 3eb5cddbc4..a89625db40 100644
--- a/src/components/form/form.test.tsx
+++ b/src/components/form/form.test.tsx
@@ -11,7 +11,7 @@ import Dialog from "../dialog";
 
 testStyledSystemSpacingRTL(
   (props) => <Form aria-label="form-example" {...props} />,
-  () => screen.getByRole("form")
+  () => screen.getByRole("form"),
 );
 
 test("the form footer is not rendered by default", () => {
@@ -30,11 +30,11 @@ test("renders buttons passed as the leftSideButtons prop", () => {
         </>
       }
       saveButton={<Button>Save</Button>}
-    />
+    />,
   );
 
   const footerButtons = within(screen.getByTestId("form-footer")).getAllByRole(
-    "button"
+    "button",
   );
   expect(footerButtons[0]).toHaveTextContent("Left1");
   expect(footerButtons[1]).toHaveTextContent("Left2");
@@ -47,7 +47,7 @@ test("renders the button passed as the saveButton prop in the form footer", () =
   expect(
     within(screen.getByTestId("form-footer")).getByRole("button", {
       name: "Custom Save Button",
-    })
+    }),
   ).toBeVisible();
 });
 
@@ -61,11 +61,11 @@ test("renders buttons passed as the rightSideButtons prop", () => {
         </>
       }
       saveButton={<Button>Save</Button>}
-    />
+    />,
   );
 
   const footerButtons = within(screen.getByTestId("form-footer")).getAllByRole(
-    "button"
+    "button",
   );
   expect(footerButtons[0]).toHaveTextContent("Save");
   expect(footerButtons[1]).toHaveTextContent("Right1");
@@ -78,7 +78,7 @@ test("includes correct component, element and role data tags on form element", (
       aria-label="form-example" // getByRole("form") doesn't work without an accessible name for the form
       data-element="bar"
       data-role="baz"
-    />
+    />,
   );
 
   const formElement = screen.getByRole("form");
@@ -95,25 +95,25 @@ test("includes correct data-element tags on elements", () => {
       saveButton={<Button>Save</Button>}
       errorCount={1}
       warningCount={1}
-    />
+    />,
   );
 
   expect(screen.getByTestId("form-footer")).toHaveAttribute(
     "data-element",
-    "form-footer"
+    "form-footer",
   );
   expect(screen.getByTestId("form-summary")).toHaveAttribute(
     "data-element",
-    "form-summary"
+    "form-summary",
   );
 
   expect(screen.getAllByTestId("internal-summary")[0]).toHaveAttribute(
     "data-element",
-    "errors"
+    "errors",
   );
   expect(screen.getAllByTestId("internal-summary")[1]).toHaveAttribute(
     "data-element",
-    "warnings"
+    "warnings",
   );
 });
 
@@ -147,7 +147,7 @@ test("form summary and footer have correct styles when the `fullWidthButtons` pr
       }
       errorCount={2}
       warningCount={3}
-    />
+    />,
   );
 
   expect(screen.getByTestId("form-footer")).toHaveStyle({
@@ -170,7 +170,7 @@ test("has the correct styles when the `stickyFooter` prop is set", () => {
       aria-label="form-example"
       stickyFooter
       saveButton={<Button>Save</Button>}
-    />
+    />,
   );
 
   expect(screen.getByTestId("form-footer")).toHaveStyle({
@@ -184,7 +184,7 @@ test("has the correct styles when the `stickyFooter` prop is set", () => {
   });
   expect(screen.getByTestId("form-footer")).toHaveStyleRule(
     "background-color",
-    "var(--colorsUtilityYang100)"
+    "var(--colorsUtilityYang100)",
   );
   expect(screen.getByRole("form")).toHaveStyle({
     display: "flex",
@@ -202,7 +202,7 @@ test("applies overflow styling when `stickyFooter` is set and form is in a Dialo
         stickyFooter
         saveButton={<Button>Save</Button>}
       />
-    </Dialog>
+    </Dialog>,
   );
 
   expect(screen.getByTestId("form-content")).toHaveStyle({
@@ -216,7 +216,7 @@ describe("when the `footerPadding` prop is set", () => {
     (props) => (
       <Form saveButton={<Button>Save</Button>} footerPadding={props} />
     ),
-    () => screen.getByTestId("form-footer")
+    () => screen.getByTestId("form-footer"),
   );
 });
 
@@ -229,7 +229,7 @@ test.each(["100px", "200px", "300px"])(
     expect(screen.getByRole("form")).toHaveStyle({
       height,
     });
-  }
+  },
 );
 
 // for coverage - `buttonAlignment="left"` tested in both Playwright and Chromatic
@@ -243,7 +243,7 @@ test("renders with correct styles when `buttonAlignment` prop is set to `left`",
           <Button>Right2</Button>
         </>
       }
-    />
+    />,
   );
 
   expect(screen.getByTestId("form-right-buttons")).toHaveStyle({
diff --git a/src/components/form/required-fields-indicator/required-fields-indicator.test.tsx b/src/components/form/required-fields-indicator/required-fields-indicator.test.tsx
index a82c4e47cf..5caff0eb45 100644
--- a/src/components/form/required-fields-indicator/required-fields-indicator.test.tsx
+++ b/src/components/form/required-fields-indicator/required-fields-indicator.test.tsx
@@ -10,6 +10,6 @@ describe("RequiredFieldsIndicator", () => {
         children
       </RequiredFieldsIndicator>
     ),
-    () => screen.getByTestId("required-fields")
+    () => screen.getByTestId("required-fields"),
   );
 });
diff --git a/src/components/global-header/global-header.pw.tsx b/src/components/global-header/global-header.pw.tsx
index 13f64f1733..f7efaeb9db 100644
--- a/src/components/global-header/global-header.pw.tsx
+++ b/src/components/global-header/global-header.pw.tsx
@@ -40,7 +40,7 @@ test.describe("Global Header component", () => {
       (element) => {
         const style = getComputedStyle(element);
         return style.zIndex;
-      }
+      },
     );
 
     const globalIndex = parseInt(globalHeaderZIndex.toString());
diff --git a/src/components/global-header/global-header.test.tsx b/src/components/global-header/global-header.test.tsx
index f9975e95ca..d4d4f32ccc 100644
--- a/src/components/global-header/global-header.test.tsx
+++ b/src/components/global-header/global-header.test.tsx
@@ -16,7 +16,7 @@ test("should render with 'data-component' set to 'global-header'", () => {
 
   expect(screen.getByRole("navigation")).toHaveAttribute(
     "data-component",
-    "global-header"
+    "global-header",
   );
 });
 
diff --git a/src/components/grid/grid.pw.tsx b/src/components/grid/grid.pw.tsx
index c089499d3f..4b88eb83ed 100644
--- a/src/components/grid/grid.pw.tsx
+++ b/src/components/grid/grid.pw.tsx
@@ -18,15 +18,15 @@ test.describe("Grid component", () => {
 
     await expect(page.getByText("Item 1")).toHaveCSS(
       "grid-area",
-      "auto / 1 / auto / 13"
+      "auto / 1 / auto / 13",
     );
     await expect(page.getByText("Item 2")).toHaveCSS(
       "grid-area",
-      "2 / 1 / 3 / 6"
+      "2 / 1 / 3 / 6",
     );
     await expect(page.getByText("Item 3")).toHaveCSS(
       "grid-area",
-      "4 / 7 / 5 / 13"
+      "4 / 7 / 5 / 13",
     );
   });
 
@@ -38,17 +38,19 @@ test.describe("Grid component", () => {
 
     await expect(page.getByText("Item 1")).toHaveCSS(
       "grid-area",
-      "3 / 4 / 11 / 10"
+      "3 / 4 / 11 / 10",
     );
   });
 
-  ([
-    [599, "16px", "16px"],
-    [959, "24px", "16px"],
-    [1259, "32px", "24px"],
-    [1920, "40px", "24px"],
-    [1922, "40px", "40px"],
-  ] as const).forEach(([viewportWidth, padding, gutter]) => {
+  (
+    [
+      [599, "16px", "16px"],
+      [959, "24px", "16px"],
+      [1259, "32px", "24px"],
+      [1920, "40px", "24px"],
+      [1922, "40px", "40px"],
+    ] as const
+  ).forEach(([viewportWidth, padding, gutter]) => {
     test(`automatically sets correct padding and gutter size when viewport width is ${viewportWidth}`, async ({
       mount,
       page,
@@ -84,7 +86,7 @@ test.describe("Grid component", () => {
 
       await expect(page.getByText("Item 1")).toHaveCSS(
         "justify-self",
-        justification
+        justification,
       );
     });
   });
diff --git a/src/components/grouped-character/components.test-pw.tsx b/src/components/grouped-character/components.test-pw.tsx
index 56ec2e7cfe..49ce051347 100644
--- a/src/components/grouped-character/components.test-pw.tsx
+++ b/src/components/grouped-character/components.test-pw.tsx
@@ -33,7 +33,7 @@ export const GroupedCharacterComponent = ({
 };
 
 export const Validations = (
-  args: Partial<GroupedCharacterProps> & { message?: string | boolean }
+  args: Partial<GroupedCharacterProps> & { message?: string | boolean },
 ) => {
   const [state, setState] = useState({
     error: "1231231",
@@ -76,7 +76,7 @@ export const Validations = (
 };
 
 export const ValidationsStringComponent = (
-  args: Partial<GroupedCharacterProps> & { message?: string | boolean }
+  args: Partial<GroupedCharacterProps> & { message?: string | boolean },
 ) => {
   const [state, setState] = useState({
     error: "1231231",
@@ -119,7 +119,7 @@ export const ValidationsStringComponent = (
 };
 
 export const ValidationsStringLabel = (
-  args: Partial<GroupedCharacterProps> & { message?: string | boolean }
+  args: Partial<GroupedCharacterProps> & { message?: string | boolean },
 ) => {
   const [state, setState] = useState({
     error: "1231231",
@@ -164,7 +164,7 @@ export const ValidationsStringLabel = (
 };
 
 export const ValidationsBoolean = (
-  args: Partial<GroupedCharacterProps> & { message?: string | boolean }
+  args: Partial<GroupedCharacterProps> & { message?: string | boolean },
 ) => {
   const [state, setState] = useState({
     error: "1231231",
@@ -245,7 +245,7 @@ export const ValidationsRedesign = () => {
               m={4}
             />
           </div>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
diff --git a/src/components/grouped-character/grouped-character.component.tsx b/src/components/grouped-character/grouped-character.component.tsx
index e4a8a8255b..5a68a3e45f 100644
--- a/src/components/grouped-character/grouped-character.component.tsx
+++ b/src/components/grouped-character/grouped-character.component.tsx
@@ -22,7 +22,7 @@ export interface CustomEvent
 
 const buildCustomTarget = (
   { target }: React.ChangeEvent<HTMLInputElement>,
-  value: EventValue
+  value: EventValue,
 ): CustomTarget => {
   const { name, id } = target;
   return {
@@ -61,7 +61,7 @@ export const GroupedCharacter = React.forwardRef(
       value: externalValue,
       ...rest
     }: GroupedCharacterProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     const [internalValue, setInternalValue] = useState(defaultValue || "");
 
@@ -74,7 +74,7 @@ export const GroupedCharacter = React.forwardRef(
     if (!deprecateUncontrolledWarnTriggered && !isControlled) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Grouped Character` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Grouped Character` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
@@ -111,7 +111,7 @@ export const GroupedCharacter = React.forwardRef(
         newCursorPos += isDeleting ? -1 : 1;
       }
 
-      const modifiedEvent = (ev as unknown) as CustomEvent;
+      const modifiedEvent = ev as unknown as CustomEvent;
       modifiedEvent.target = buildCustomTarget(ev, {
         rawValue,
         formattedValue,
@@ -130,7 +130,7 @@ export const GroupedCharacter = React.forwardRef(
         const rawValue = sanitizeValue(target.value);
         const formattedValue = formatValue(rawValue);
 
-        const modifiedEvent = (ev as unknown) as CustomEvent;
+        const modifiedEvent = ev as unknown as CustomEvent;
         modifiedEvent.target = buildCustomTarget(ev, {
           rawValue,
           formattedValue,
@@ -161,7 +161,7 @@ export const GroupedCharacter = React.forwardRef(
         ref={ref}
       />
     );
-  }
+  },
 );
 
 GroupedCharacter.displayName = "GroupedCharacter";
diff --git a/src/components/grouped-character/grouped-character.pw.tsx b/src/components/grouped-character/grouped-character.pw.tsx
index 0facff43a3..494739439d 100644
--- a/src/components/grouped-character/grouped-character.pw.tsx
+++ b/src/components/grouped-character/grouped-character.pw.tsx
@@ -24,11 +24,13 @@ import { SIZE, CHARACTERS } from "../../../playwright/support/constants";
 const specialCharacters = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 
 test.describe("Prop tests for GroupedCharacter", () => {
-  ([
-    [SIZE.SMALL, "32px"],
-    [SIZE.MEDIUM, "40px"],
-    [SIZE.LARGE, "48px"],
-  ] as [GroupedCharacterProps["size"], string][]).forEach(([size, height]) => {
+  (
+    [
+      [SIZE.SMALL, "32px"],
+      [SIZE.MEDIUM, "40px"],
+      [SIZE.LARGE, "48px"],
+    ] as [GroupedCharacterProps["size"], string][]
+  ).forEach(([size, height]) => {
     test(`should render with ${size} as size and ${height} as height`, async ({
       mount,
       page,
@@ -39,55 +41,55 @@ test.describe("Prop tests for GroupedCharacter", () => {
     });
   });
 
-  ([
-    [[1, 2, 3], "1234567", "1-23-456"],
-    [[5, 3, 1], "987654321", "98765-432-1"],
-    [[2, 4, 2], "123456789", "12-3456-78"],
-  ] as [GroupedCharacterProps["groups"], string, string][]).forEach(
-    ([group, inputValue, outputValue]) => {
-      test(`should render with ${group} as a group and use input value ${inputValue} to produce output value ${outputValue}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<GroupedCharacterComponent groups={group} />);
+  (
+    [
+      [[1, 2, 3], "1234567", "1-23-456"],
+      [[5, 3, 1], "987654321", "98765-432-1"],
+      [[2, 4, 2], "123456789", "12-3456-78"],
+    ] as [GroupedCharacterProps["groups"], string, string][]
+  ).forEach(([group, inputValue, outputValue]) => {
+    test(`should render with ${group} as a group and use input value ${inputValue} to produce output value ${outputValue}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<GroupedCharacterComponent groups={group} />);
 
-        const input = getDataElementByValue(page, "input");
-        await input.fill(inputValue);
-        await input.blur();
+      const input = getDataElementByValue(page, "input");
+      await input.fill(inputValue);
+      await input.blur();
 
-        await input.waitFor();
-        await expect(input).toHaveValue(outputValue);
-      });
-    }
-  );
+      await input.waitFor();
+      await expect(input).toHaveValue(outputValue);
+    });
+  });
 
-  ([
-    ["-", "123456", "12-34-56"],
-    ["?", "sage", "sa?ge"],
-    ["#", "tests", "te#st#s"],
-    ["@", "abcdef", "ab@cd@ef"],
-    ["$", "987654321", "98$76$543"],
-    ["%", "123456789", "12%34%567"],
-    ["^", "123456", "12^34^56"],
-    ["!", "987654321", "98!76!543"],
-    ["*", "12ab34cd", "12*ab*34c"],
-  ] as [GroupedCharacterProps["separator"], string, string][]).forEach(
-    ([separator, inputValue, outputValue]) => {
-      test(`should render with separator ${separator} and use input value ${inputValue} to produce output value ${outputValue}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<GroupedCharacterComponent separator={separator} />);
+  (
+    [
+      ["-", "123456", "12-34-56"],
+      ["?", "sage", "sa?ge"],
+      ["#", "tests", "te#st#s"],
+      ["@", "abcdef", "ab@cd@ef"],
+      ["$", "987654321", "98$76$543"],
+      ["%", "123456789", "12%34%567"],
+      ["^", "123456", "12^34^56"],
+      ["!", "987654321", "98!76!543"],
+      ["*", "12ab34cd", "12*ab*34c"],
+    ] as [GroupedCharacterProps["separator"], string, string][]
+  ).forEach(([separator, inputValue, outputValue]) => {
+    test(`should render with separator ${separator} and use input value ${inputValue} to produce output value ${outputValue}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<GroupedCharacterComponent separator={separator} />);
 
-        const input = getDataElementByValue(page, "input");
-        await input.fill(inputValue);
-        await input.blur();
+      const input = getDataElementByValue(page, "input");
+      await input.fill(inputValue);
+      await input.blur();
 
-        await input.waitFor();
-        await expect(input).toHaveValue(outputValue);
-      });
-    }
-  );
+      await input.waitFor();
+      await expect(input).toHaveValue(outputValue);
+    });
+  });
 });
 
 test.describe("Input tests for GroupedCharacter", () => {
@@ -99,7 +101,7 @@ test.describe("Input tests for GroupedCharacter", () => {
       await mount(<GroupedCharacterComponent label={specificValue} />);
 
       await expect(getDataElementByValue(page, "label")).toHaveText(
-        specificValue
+        specificValue,
       );
     });
   });
@@ -112,7 +114,7 @@ test.describe("Input tests for GroupedCharacter", () => {
       await mount(<GroupedCharacterComponent fieldHelp={specificValue} />);
 
       await expect(getDataElementByValue(page, "help")).toHaveText(
-        specificValue
+        specificValue,
       );
     });
   });
@@ -157,28 +159,25 @@ test.describe("Input tests for GroupedCharacter", () => {
     await expect(getDataElementByValue(page, "input")).toBeFocused();
   });
 
-  ([
-    ["right", "end"],
-    ["left", "start"],
-  ] as [GroupedCharacterProps["labelAlign"], string][]).forEach(
-    ([alignment, cssProp]) => {
-      test(`should render with labelAlignment ${alignment} and justify-content flex-${cssProp}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <GroupedCharacterComponent labelInline labelAlign={alignment} />
-        );
-
-        const labelParent = getDataElementByValue(page, "label").locator("..");
-        await expect(labelParent).toHaveCSS("-webkit-box-pack", cssProp);
-        await expect(labelParent).toHaveCSS(
-          "justify-content",
-          `flex-${cssProp}`
-        );
-      });
-    }
-  );
+  (
+    [
+      ["right", "end"],
+      ["left", "start"],
+    ] as [GroupedCharacterProps["labelAlign"], string][]
+  ).forEach(([alignment, cssProp]) => {
+    test(`should render with labelAlignment ${alignment} and justify-content flex-${cssProp}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <GroupedCharacterComponent labelInline labelAlign={alignment} />,
+      );
+
+      const labelParent = getDataElementByValue(page, "label").locator("..");
+      await expect(labelParent).toHaveCSS("-webkit-box-pack", cssProp);
+      await expect(labelParent).toHaveCSS("justify-content", `flex-${cssProp}`);
+    });
+  });
 });
 
 test.describe("Event & Styling tests for GroupedCharacter", () => {
@@ -204,37 +203,37 @@ test.describe("Event & Styling tests for GroupedCharacter", () => {
     await expect(inputParent).toHaveCSS("max-width", "100%");
   });
 
-  ([
-    [[1, 1, 4], "123", "123", "1-2-3"],
-    [[3, 2, 1], "sage123", "sage12", "sag-e1-2"],
-    [[3, 3, 3], "123testtest", "123testte", "123-tes-tte"],
-    [[4, 1, 2], "1234567", "1234567", "1234-5-67"],
-    [[5, 2, 2], "9876543211", "987654321", "98765-43-21"],
-    [[1, 1, 3], "123456789", "12345", "1-2-345"],
-  ] as [GroupedCharacterProps["groups"], string, string, string][]).forEach(
-    ([groups, inputValue, rawValue, formattedValue]) => {
-      test(`should call onChange callback when a type event is triggered using ${groups} as groups and ${inputValue} as inputValue, and return ${rawValue} as formattedValue`, async ({
-        mount,
-        page,
-      }) => {
-        let callbackCount = 0;
-        await mount(
-          <GroupedCharacterComponent
-            onChange={() => {
-              callbackCount += 1;
-            }}
-            groups={groups}
-          />
-        );
-
-        const input = getDataElementByValue(page, "input");
-        await input.fill(inputValue);
-        await input.blur();
-        expect(callbackCount).toBe(1);
-        await expect(input).toHaveAttribute("value", formattedValue);
-      });
-    }
-  );
+  (
+    [
+      [[1, 1, 4], "123", "123", "1-2-3"],
+      [[3, 2, 1], "sage123", "sage12", "sag-e1-2"],
+      [[3, 3, 3], "123testtest", "123testte", "123-tes-tte"],
+      [[4, 1, 2], "1234567", "1234567", "1234-5-67"],
+      [[5, 2, 2], "9876543211", "987654321", "98765-43-21"],
+      [[1, 1, 3], "123456789", "12345", "1-2-345"],
+    ] as [GroupedCharacterProps["groups"], string, string, string][]
+  ).forEach(([groups, inputValue, rawValue, formattedValue]) => {
+    test(`should call onChange callback when a type event is triggered using ${groups} as groups and ${inputValue} as inputValue, and return ${rawValue} as formattedValue`, async ({
+      mount,
+      page,
+    }) => {
+      let callbackCount = 0;
+      await mount(
+        <GroupedCharacterComponent
+          onChange={() => {
+            callbackCount += 1;
+          }}
+          groups={groups}
+        />,
+      );
+
+      const input = getDataElementByValue(page, "input");
+      await input.fill(inputValue);
+      await input.blur();
+      expect(callbackCount).toBe(1);
+      await expect(input).toHaveAttribute("value", formattedValue);
+    });
+  });
 
   test(`should call onBlur callback when a blur event is triggered`, async ({
     mount,
@@ -246,7 +245,7 @@ test.describe("Event & Styling tests for GroupedCharacter", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const input = getDataElementByValue(page, "input");
@@ -272,11 +271,9 @@ test.describe("Accessibility tests for GroupedCharacter", () => {
     await checkAccessibility(page);
   });
 
-  ([
-    SIZE.SMALL,
-    SIZE.MEDIUM,
-    SIZE.LARGE,
-  ] as GroupedCharacterProps["size"][]).forEach((size) => {
+  (
+    [SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE] as GroupedCharacterProps["size"][]
+  ).forEach((size) => {
     test(`should pass tests with size ${size}`, async ({ mount, page }) => {
       await mount(<GroupedCharacterComponent size={size} />);
 
@@ -319,7 +316,7 @@ test.describe("Accessibility tests for GroupedCharacter", () => {
 
   test(`should pass tests for LabelHelp example`, async ({ mount, page }) => {
     await mount(
-      <GroupedCharacterComponent labelHelp="Help" helpAriaLabel="Help" />
+      <GroupedCharacterComponent labelHelp="Help" helpAriaLabel="Help" />,
     );
 
     await checkAccessibility(page);
@@ -341,7 +338,7 @@ test.describe("Accessibility tests for GroupedCharacter", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [".", ",", " ", "-", "/", "|"].forEach((separator) => {
@@ -350,16 +347,18 @@ test.describe("Accessibility tests for GroupedCharacter", () => {
       page,
     }) => {
       await mount(
-        <GroupedCharacterComponent separator={separator} value="123456" />
+        <GroupedCharacterComponent separator={separator} value="123456" />,
       );
 
       await checkAccessibility(page);
     });
   });
 
-  ([[[1, 2, 3]], [[5, 3, 1]], [[2, 4, 2]]] as [
-    GroupedCharacterProps["groups"]
-  ][]).forEach(([groups]) => {
+  (
+    [[[1, 2, 3]], [[5, 3, 1]], [[2, 4, 2]]] as [
+      GroupedCharacterProps["groups"],
+    ][]
+  ).forEach(([groups]) => {
     test(`should pass tests for with ${groups} as group`, async ({
       mount,
       page,
@@ -418,7 +417,7 @@ test.describe("Accessibility tests for GroupedCharacter", () => {
       page,
     }) => {
       await mount(
-        <GroupedCharacterComponent {...{ [validationType]: "Message" }} />
+        <GroupedCharacterComponent {...{ [validationType]: "Message" }} />,
       );
 
       await checkAccessibility(page);
@@ -434,7 +433,7 @@ test.describe("Accessibility tests for GroupedCharacter", () => {
         <GroupedCharacterComponent
           {...{ [validationType]: "Message" }}
           validationOnLabel
-        />
+        />,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/grouped-character/grouped-character.stories.tsx b/src/components/grouped-character/grouped-character.stories.tsx
index 14732819aa..cf1c97de1f 100644
--- a/src/components/grouped-character/grouped-character.stories.tsx
+++ b/src/components/grouped-character/grouped-character.stories.tsx
@@ -46,11 +46,10 @@ export const Sizes: Story = () => {
     large: "1231231",
   });
 
-  const handleChange = (size: "small" | "medium" | "large") => (
-    e: CustomEvent
-  ) => {
-    setState({ ...state, [size]: e.target.value.rawValue });
-  };
+  const handleChange =
+    (size: "small" | "medium" | "large") => (e: CustomEvent) => {
+      setState({ ...state, [size]: e.target.value.rawValue });
+    };
 
   return (["small", "medium", "large"] as const).map((size) => (
     <GroupedCharacter
@@ -356,7 +355,7 @@ export const VariousGroups: Story = () => {
 VariousGroups.storyName = "Various Groups";
 
 export const Validations: StoryFn = (
-  args: Partial<GroupedCharacterProps> & { message?: string | boolean }
+  args: Partial<GroupedCharacterProps> & { message?: string | boolean },
 ) => {
   const [state, setState] = useState({
     error: "1231231",
@@ -455,7 +454,7 @@ export const ValidationsRedesign: Story = () => {
               m={4}
             />
           </div>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
diff --git a/src/components/grouped-character/grouped-character.test.tsx b/src/components/grouped-character/grouped-character.test.tsx
index 03d482b3b1..04ddc6dcd7 100644
--- a/src/components/grouped-character/grouped-character.test.tsx
+++ b/src/components/grouped-character/grouped-character.test.tsx
@@ -59,7 +59,7 @@ testStyledSystemMarginRTL(
   ),
   () => screen.getByTestId("grouped-character"),
   undefined,
-  { modifier: "&&&" }
+  { modifier: "&&&" },
 );
 
 test("deprecation warning for uncontrolled should display warning once", () => {
@@ -68,7 +68,7 @@ test("deprecation warning for uncontrolled should display warning once", () => {
   render(<GroupedCharacter groups={[2, 2, 3]} separator="-" />);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Grouped Character` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Grouped Character` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
 
   expect(loggerSpy).toHaveBeenCalledTimes(1);
@@ -83,7 +83,7 @@ test("when component is uncontrolled, it should set the default input value same
       separator="-"
       defaultValue="aabbcccc"
       groups={[2, 2, 4]}
-    />
+    />,
   );
 
   const input = screen.getByRole("textbox");
@@ -101,7 +101,7 @@ test("when component is uncontrolled, it should invoke the provided onChange han
       defaultValue="aabbcccc"
       groups={[2, 2, 4]}
       onChange={onChange}
-    />
+    />,
   );
 
   await user.type(screen.getByRole("textbox"), "cc-aa-aabb");
@@ -114,13 +114,13 @@ test("when component is uncontrolled, it should invoke the provided onChange han
           rawValue: "ccaaaabb",
         },
       }),
-    })
+    }),
   );
 });
 
 test("the component takes configuration for how characters should be grouped", () => {
   render(
-    <GroupedCharacter separator="-" value="12345678" groups={[2, 2, 4]} />
+    <GroupedCharacter separator="-" value="12345678" groups={[2, 2, 4]} />,
   );
 
   expect(screen.getByRole("textbox")).toHaveValue("12-34-5678");
@@ -146,7 +146,7 @@ test("emits a formatted string on change event", async () => {
           rawValue: "123456",
         }),
       }),
-    })
+    }),
   );
 });
 
@@ -164,7 +164,7 @@ test("invokes provided onChange handler with proper event target name and id if
           name: "nice_name",
         });
       }}
-    />
+    />,
   );
 
   const input = screen.getByRole("textbox");
@@ -181,7 +181,7 @@ test("invokes provided onChange handler with proper event target name and id if
         formattedValue: "1",
         rawValue: "1",
       },
-    })
+    }),
   );
 });
 
@@ -195,7 +195,7 @@ test("emits a formatted string on blur event", async () => {
       onBlur={(ev) => {
         onBlur?.(ev.target.value);
       }}
-    />
+    />,
   );
 
   const input = screen.getByRole("textbox");
@@ -209,7 +209,7 @@ test("emits a formatted string on blur event", async () => {
     expect.objectContaining({
       formattedValue: "12-34-56",
       rawValue: "123456",
-    })
+    }),
   );
 });
 
@@ -225,7 +225,7 @@ test("does nothing if onBlur is not provided", async () => {
       value="12345678"
       groups={[2, 2, 4]}
       onBlur={undefined}
-    />
+    />,
   );
 
   const input = screen.getByRole("textbox");
@@ -240,7 +240,7 @@ test("does nothing if onBlur is not provided", async () => {
 
 test("does not allow values of length greater than that allowed by the group config", () => {
   render(
-    <GroupedCharacter separator="-" value="1234567890" groups={[2, 2, 4]} />
+    <GroupedCharacter separator="-" value="1234567890" groups={[2, 2, 4]} />,
   );
 
   expect(screen.getByRole("textbox")).toHaveValue("12-34-5678");
@@ -372,7 +372,7 @@ test("pressing backspace when the cursor is at one position beyond the separator
     <ControlledGroupedCharacter
       initialValue="1234567"
       groupsConfig={[2, 2, 3]}
-    />
+    />,
   );
 
   const input = screen.getByRole("textbox") as HTMLInputElement;
@@ -405,7 +405,7 @@ test("the required prop is passed to the input", () => {
       value="12345678"
       groups={[2, 2, 4]}
       required
-    />
+    />,
   );
 
   expect(screen.getByRole("textbox")).toBeRequired();
@@ -420,7 +420,7 @@ describe("refs", () => {
         value="12345678"
         groups={[2, 2, 4]}
         ref={ref}
-      />
+      />,
     );
 
     expect(ref.current).toBe(screen.getByRole("textbox"));
@@ -435,7 +435,7 @@ describe("refs", () => {
         value="12345678"
         groups={[2, 2, 4]}
         ref={ref}
-      />
+      />,
     );
 
     expect(ref).toHaveBeenCalledWith(screen.getByRole("textbox"));
@@ -450,7 +450,7 @@ describe("refs", () => {
         value="12345678"
         groups={[2, 2, 4]}
         ref={ref}
-      />
+      />,
     );
 
     unmount();
diff --git a/src/components/grouped-character/grouped-character.utils.ts b/src/components/grouped-character/grouped-character.utils.ts
index f4589701c6..6bbbd70a80 100644
--- a/src/components/grouped-character/grouped-character.utils.ts
+++ b/src/components/grouped-character/grouped-character.utils.ts
@@ -8,6 +8,6 @@ export const generateGroups = (groups: number[], rawValue: string) => {
 
       return toAdd ? [...acc, toAdd] : acc;
     },
-    []
+    [],
   );
 };
diff --git a/src/components/heading/heading.component.tsx b/src/components/heading/heading.component.tsx
index 710bf0c12c..80ea5dc6e7 100644
--- a/src/components/heading/heading.component.tsx
+++ b/src/components/heading/heading.component.tsx
@@ -46,7 +46,7 @@ export interface HeadingProps extends MarginProps, TagProps {
           | React.MouseEvent<HTMLAnchorElement>
           | React.MouseEvent<HTMLButtonElement>
           | React.KeyboardEvent<HTMLAnchorElement>
-          | React.KeyboardEvent<HTMLButtonElement>
+          | React.KeyboardEvent<HTMLButtonElement>,
       ) => void);
   /** Adds a divider below the heading and the content. */
   divider?: boolean;
diff --git a/src/components/heading/heading.pw.tsx b/src/components/heading/heading.pw.tsx
index 30a6751bbc..6d08619ebc 100644
--- a/src/components/heading/heading.pw.tsx
+++ b/src/components/heading/heading.pw.tsx
@@ -132,11 +132,11 @@ test.describe("Heading component", () => {
     await backLinkAnchor.focus();
     await expect(backLinkAnchor).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(backLinkAnchor).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
     await expect(linkWrapper).toHaveCSS("box-shadow", "none");
   });
@@ -150,12 +150,12 @@ test.describe("Heading component", () => {
         <HeadingComponent
           help="this is a title"
           helpAriaLabel={characterVals}
-        />
+        />,
       );
 
       await expect(headingHelp(page)).toHaveAttribute(
         "aria-label",
-        characterVals
+        characterVals,
       );
     });
   });
@@ -181,7 +181,7 @@ test.describe("Heading component", () => {
       if (dividerVals) {
         await expect(dividerPreview(page)).toHaveCSS(
           "background",
-          "rgb(204, 214, 219) none repeat scroll 0% 0% / auto padding-box border-box"
+          "rgb(204, 214, 219) none repeat scroll 0% 0% / auto padding-box border-box",
         );
       } else {
         expect(await dividerPreview(page).count()).toEqual(0);
@@ -199,7 +199,7 @@ test.describe("Heading component", () => {
       if (separatorVals) {
         const cssBorderWidth = await getStyle(
           separatorPreview(page),
-          "border-width"
+          "border-width",
         );
         const [first, second, third] = cssBorderWidth.split(" ");
 
@@ -224,159 +224,156 @@ test.describe("Heading component", () => {
   });
 });
 
-test.describe(
-  "should render Heading component and check accessibility issues",
-  () => {
-    test("default component should pass accessibility checks", async ({
+test.describe("should render Heading component and check accessibility issues", () => {
+  test("default component should pass accessibility checks", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<HeadingComponent />);
+
+    await checkAccessibility(page);
+  });
+
+  specialCharacters.forEach((characterVals) => {
+    test(`should pass accessibility checks with ${characterVals} passed as children`, async ({
       mount,
       page,
     }) => {
-      await mount(<HeadingComponent />);
+      await mount(<HeadingComponent>{characterVals}</HeadingComponent>);
 
       await checkAccessibility(page);
     });
+  });
 
-    specialCharacters.forEach((characterVals) => {
-      test(`should pass accessibility checks with ${characterVals} passed as children`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent>{characterVals}</HeadingComponent>);
-
-        await checkAccessibility(page);
-      });
-    });
-
-    specialCharacters.forEach((characterVals) => {
-      test(`should pass accessibility checks when title is ${characterVals}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent title={characterVals} />);
+  specialCharacters.forEach((characterVals) => {
+    test(`should pass accessibility checks when title is ${characterVals}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent title={characterVals} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    specialCharacters.forEach((characterVals) => {
-      test(`should pass accessibility checks when titleId is ${characterVals}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent titleId={characterVals} />);
+  specialCharacters.forEach((characterVals) => {
+    test(`should pass accessibility checks when titleId is ${characterVals}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent titleId={characterVals} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    specialCharacters.forEach((characterVals) => {
-      test(`should pass accessibility checks when subheader is ${characterVals}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent subheader={characterVals} />);
+  specialCharacters.forEach((characterVals) => {
+    test(`should pass accessibility checks when subheader is ${characterVals}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent subheader={characterVals} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    specialCharacters.forEach((characterVals) => {
-      test(`should pass accessibility checks when subtitleId is ${characterVals}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent subtitleId={characterVals} />);
+  specialCharacters.forEach((characterVals) => {
+    test(`should pass accessibility checks when subtitleId is ${characterVals}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent subtitleId={characterVals} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    specialCharacters.forEach((characterVals) => {
-      test(`should pass accessibility checks when help text is ${characterVals}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent help={characterVals} />);
+  specialCharacters.forEach((characterVals) => {
+    test(`should pass accessibility checks when help text is ${characterVals}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent help={characterVals} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    testData.forEach((helpLink) => {
-      test(`should pass accessibility checks when help link is ${helpLink}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent helpLink={helpLink} />);
+  testData.forEach((helpLink) => {
+    test(`should pass accessibility checks when help link is ${helpLink}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent helpLink={helpLink} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    testData.forEach((backLink) => {
-      test(`should pass accessibility checks when back link is ${backLink}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent backLink={backLink} />);
+  testData.forEach((backLink) => {
+    test(`should pass accessibility checks when back link is ${backLink}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent backLink={backLink} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    specialCharacters.forEach((characterVals) => {
-      test(`should pass accessibility checks when helpAriaLabel is ${characterVals}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent helpAriaLabel={characterVals} />);
+  specialCharacters.forEach((characterVals) => {
+    test(`should pass accessibility checks when helpAriaLabel is ${characterVals}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent helpAriaLabel={characterVals} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    specialCharacters.forEach((characterVals) => {
-      test(`should pass accessibility checks when pill is rendered with ${characterVals} passed as pill text`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponentWithPills pills={characterVals} />);
+  specialCharacters.forEach((characterVals) => {
+    test(`should pass accessibility checks when pill is rendered with ${characterVals} passed as pill text`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponentWithPills pills={characterVals} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    dividerAndSeparatorValue.forEach(([dividerVals, renderState]) => {
-      test(`should pass accessibility checks when rendered ${renderState} a divider when the divider prop is ${dividerVals}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent divider={dividerVals} />);
+  dividerAndSeparatorValue.forEach(([dividerVals, renderState]) => {
+    test(`should pass accessibility checks when rendered ${renderState} a divider when the divider prop is ${dividerVals}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent divider={dividerVals} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    dividerAndSeparatorValue.forEach(([separatorVals, renderState]) => {
-      test(`should pass accessibility checks when rendered ${renderState} a separator when the separator prop is ${separatorVals}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent separator={separatorVals} />);
+  dividerAndSeparatorValue.forEach(([separatorVals, renderState]) => {
+    test(`should pass accessibility checks when rendered ${renderState} a separator when the separator prop is ${separatorVals}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent separator={separatorVals} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
+  });
 
-    headingType.forEach((heading) => {
-      test(`should pass accessibility checks when heading level is ${heading}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<HeadingComponent headingType={heading} />);
+  headingType.forEach((heading) => {
+    test(`should pass accessibility checks when heading level is ${heading}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<HeadingComponent headingType={heading} />);
 
-        await checkAccessibility(page);
-      });
+      await checkAccessibility(page);
     });
-  }
-);
+  });
+});
diff --git a/src/components/heading/heading.test.tsx b/src/components/heading/heading.test.tsx
index 76f5bdd6c1..ceed21a3ec 100644
--- a/src/components/heading/heading.test.tsx
+++ b/src/components/heading/heading.test.tsx
@@ -12,7 +12,7 @@ test("renders with custom data tags", () => {
       data-role="heading"
       data-component="heading"
       data-element="heading"
-    />
+    />,
   );
 
   const headingWrapper = screen.getByTestId("heading");
@@ -78,12 +78,12 @@ test.each([
 
     const heading = screen.getByRole("heading", { level });
     expect(heading).toBeVisible();
-  }
+  },
 );
 
 test("renders with custom help text, via the `help` prop", async () => {
   render(
-    <Heading title="foo" help="help text" helpAriaLabel="help-aria-label" />
+    <Heading title="foo" help="help text" helpAriaLabel="help-aria-label" />,
   );
 
   const user = userEvent.setup();
@@ -104,13 +104,13 @@ test("renders with a custom help text link, via the `helpLink` prop", () => {
       help="help text"
       helpAriaLabel="help-aria-label"
       helpLink="https://www.warnerbros.com/movies/heat"
-    />
+    />,
   );
 
   const helpIconLink = screen.getByRole("link", { name: "help-aria-label" });
   expect(helpIconLink).toHaveAttribute(
     "href",
-    "https://www.warnerbros.com/movies/heat"
+    "https://www.warnerbros.com/movies/heat",
   );
 });
 
@@ -121,7 +121,7 @@ test("renders with an 'aria-label' attribute on the help, via the `aria-label` p
       help="help text"
       helpAriaLabel="help-aria-label"
       helpLink="https://www.warnerbros.com/movies/heat"
-    />
+    />,
   );
 
   const helpIconLink = screen.getByRole("link", { name: "help-aria-label" });
@@ -130,19 +130,19 @@ test("renders with an 'aria-label' attribute on the help, via the `aria-label` p
 
 test("renders a back link, when the `backLink` prop is a string", () => {
   render(
-    <Heading title="foo" backLink="https://www.warnerbros.com/movies/heat" />
+    <Heading title="foo" backLink="https://www.warnerbros.com/movies/heat" />,
   );
 
   const backLink = screen.getByRole("link", { name: "Back" });
   expect(backLink).toHaveAttribute(
     "href",
-    "https://www.warnerbros.com/movies/heat"
+    "https://www.warnerbros.com/movies/heat",
   );
 });
 
 test("focuses the back link on mousedown", () => {
   render(
-    <Heading title="foo" backLink="https://www.warnerbros.com/movies/heat" />
+    <Heading title="foo" backLink="https://www.warnerbros.com/movies/heat" />,
   );
 
   const backLink = screen.getByRole("link", { name: "Back" });
@@ -206,7 +206,7 @@ test("alters the grid-column property on the subtitle node, when a back link/but
       title="foo"
       subheader="bar"
       backLink="https://www.warnerbros.com/movies/heat"
-    />
+    />,
   );
 
   const subtitle = screen.getByTestId("subtitle");
@@ -219,7 +219,7 @@ test("alters the outline property on the back link/button, when the back link is
   render(
     <CarbonProvider focusRedesignOptOut>
       <Heading title="foo" backLink="https://www.warnerbros.com/movies/heat" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const backLink = screen.getByTestId("heading-back-button");
@@ -228,6 +228,6 @@ test("alters the outline property on the back link/button, when the back link is
   expect(backLink).toHaveStyleRule(
     "outline",
     "3px solid var(--colorsSemanticFocus500)",
-    { modifier: "button:focus" }
+    { modifier: "button:focus" },
   );
 });
diff --git a/src/components/help/help.pw.tsx b/src/components/help/help.pw.tsx
index be1b707c2f..25a7396eb6 100644
--- a/src/components/help/help.pw.tsx
+++ b/src/components/help/help.pw.tsx
@@ -36,11 +36,11 @@ test.describe("when focused", () => {
     await elementLocator.focus();
     await expect(helpComponent(page).locator("span")).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(helpComponent(page).locator("span")).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -56,7 +56,7 @@ test.describe("when focused", () => {
     await elementLocator.focus();
     await expect(helpComponent(page).locator("span")).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 2px"
+      "rgb(255, 188, 25) solid 2px",
     );
   });
 });
@@ -68,7 +68,7 @@ test.describe("Testing Help component properties", () => {
 
       await expect(helpComponent(page)).toHaveAttribute(
         "aria-label",
-        ariaLabel
+        ariaLabel,
       );
     });
   });
@@ -114,7 +114,9 @@ test.describe("Testing Help component properties", () => {
       page,
     }) => {
       await mount(
-        <HelpComponentTest isFocused={boolVal}>{tooltipText}</HelpComponentTest>
+        <HelpComponentTest isFocused={boolVal}>
+          {tooltipText}
+        </HelpComponentTest>,
       );
 
       const tooltip = getDataElementByValue(page, "tooltip");
@@ -144,7 +146,7 @@ test.describe("Testing Help component properties", () => {
       await mount(
         <HelpComponentTest tooltipBgColor={color} isFocused>
           {tooltipText}
-        </HelpComponentTest>
+        </HelpComponentTest>,
       );
 
       const tooltip = getDataElementByValue(page, "tooltip");
@@ -160,7 +162,7 @@ test.describe("Testing Help component properties", () => {
       await mount(
         <HelpComponentTest tooltipFontColor={color} isFocused>
           {tooltipText}
-        </HelpComponentTest>
+        </HelpComponentTest>,
       );
 
       const tooltip = getDataElementByValue(page, "tooltip");
@@ -180,14 +182,14 @@ test.describe("Testing Help component properties", () => {
             <Help tooltipFlipOverrides={[position]} isFocused>
               {`This tooltip is positioned ${position}`}
             </Help>
-          </Box>
+          </Box>,
         );
 
         await page.evaluate(() => window.scrollTo(50, 50));
         const tooltip = getDataElementByValue(page, "tooltip");
         await expect(tooltip).toHaveAttribute("data-placement", position);
       });
-    }
+    },
   );
 
   testData.forEach((tooltipId) => {
@@ -195,7 +197,7 @@ test.describe("Testing Help component properties", () => {
       await mount(
         <HelpComponentTest tooltipId={tooltipId} isFocused>
           {tooltipText}
-        </HelpComponentTest>
+        </HelpComponentTest>,
       );
 
       const tooltip = getDataElementByValue(page, "tooltip");
@@ -203,12 +205,9 @@ test.describe("Testing Help component properties", () => {
     });
   });
 
-  (["top", "bottom", "left", "right"] as [
-    "top",
-    "bottom",
-    "left",
-    "right"
-  ]).forEach((tooltipPosition) => {
+  (
+    ["top", "bottom", "left", "right"] as ["top", "bottom", "left", "right"]
+  ).forEach((tooltipPosition) => {
     test(`should render with tooltip positioned ${tooltipPosition}`, async ({
       mount,
       page,
@@ -216,7 +215,7 @@ test.describe("Testing Help component properties", () => {
       await mount(
         <HelpComponentTest tooltipPosition={tooltipPosition} isFocused>
           {`This tooltip is positioned ${tooltipPosition}`}
-        </HelpComponentTest>
+        </HelpComponentTest>,
       );
 
       await expect(helpComponent(page)).toBeVisible();
@@ -226,12 +225,14 @@ test.describe("Testing Help component properties", () => {
     });
   });
 
-  (["error", "add", "minus", "settings"] as [
-    "error",
-    "add",
-    "minus",
-    "settings"
-  ]).forEach((iconType) => {
+  (
+    ["error", "add", "minus", "settings"] as [
+      "error",
+      "add",
+      "minus",
+      "settings",
+    ]
+  ).forEach((iconType) => {
     test(`should render with iconType prop passed as ${iconType}`, async ({
       mount,
       page,
@@ -293,7 +294,7 @@ test.describe("Accessibility tests for Help component", () => {
 
   test(`should check when isFocused prop is false`, async ({ mount, page }) => {
     await mount(
-      <HelpComponentTest isFocused={false}>{tooltipText}</HelpComponentTest>
+      <HelpComponentTest isFocused={false}>{tooltipText}</HelpComponentTest>,
     );
 
     await checkAccessibility(page);
@@ -304,7 +305,7 @@ test.describe("Accessibility tests for Help component", () => {
       await mount(
         <HelpComponentTest tooltipBgColor={color} isFocused>
           {tooltipText}
-        </HelpComponentTest>
+        </HelpComponentTest>,
       );
 
       // color-contrast ignored until we can investigate and fix FE-6245
@@ -320,7 +321,7 @@ test.describe("Accessibility tests for Help component", () => {
       await mount(
         <HelpComponentTest tooltipFontColor={color} isFocused>
           {tooltipText}
-        </HelpComponentTest>
+        </HelpComponentTest>,
       );
 
       // color-contrast ignored until we can investigate and fix FE-6245
@@ -340,13 +341,13 @@ test.describe("Accessibility tests for Help component", () => {
             <Help tooltipFlipOverrides={[position]} isFocused>
               {`This tooltip is positioned ${position}`}
             </Help>
-          </Box>
+          </Box>,
         );
 
         // color-contrast ignored until we can investigate and fix FE-6245
         await checkAccessibility(page, undefined, "color-contrast");
       });
-    }
+    },
   );
 
   testData.forEach((tooltipId) => {
@@ -354,7 +355,7 @@ test.describe("Accessibility tests for Help component", () => {
       await mount(
         <HelpComponentTest tooltipId={tooltipId} isFocused>
           {tooltipText}
-        </HelpComponentTest>
+        </HelpComponentTest>,
       );
 
       await helpComponent(page).hover();
@@ -362,12 +363,9 @@ test.describe("Accessibility tests for Help component", () => {
     });
   });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as HelpProps["tooltipPosition"][]).forEach((tooltipPosition) => {
+  (
+    ["top", "bottom", "left", "right"] as HelpProps["tooltipPosition"][]
+  ).forEach((tooltipPosition) => {
     test(`should render with tooltip positioned ${tooltipPosition}`, async ({
       mount,
       page,
@@ -375,7 +373,7 @@ test.describe("Accessibility tests for Help component", () => {
       await mount(
         <HelpComponentTest tooltipPosition={tooltipPosition} isFocused>
           {`This tooltip is positioned ${tooltipPosition}`}
-        </HelpComponentTest>
+        </HelpComponentTest>,
       );
 
       // color-contrast ignored until we can investigate and fix FE-6245
@@ -393,6 +391,6 @@ test.describe("Accessibility tests for Help component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 });
diff --git a/src/components/help/help.test.tsx b/src/components/help/help.test.tsx
index 8d92e3e0de..f1386b149c 100644
--- a/src/components/help/help.test.tsx
+++ b/src/components/help/help.test.tsx
@@ -75,7 +75,7 @@ test("composed content is rendered inside the tooltip", async () => {
     <Help>
       <Icon type="info" />
       <span>foo</span>
-    </Help>
+    </Help>,
   );
 
   await user.hover(screen.getByRole("button", { name: "help" }));
@@ -103,7 +103,7 @@ test("renders as a link when `href` is provided", () => {
 
   expect(screen.getByRole("link")).toHaveAttribute(
     "href",
-    "http://carbon.sage.com"
+    "http://carbon.sage.com",
   );
 });
 
@@ -118,7 +118,7 @@ test("renders with provided `helpId` and `tooltipId`", async () => {
   render(
     <Help helpId="foo" tooltipId="bar">
       foo
-    </Help>
+    </Help>,
   );
 
   const helpButton = screen.getByRole("button", { name: "help" });
@@ -129,6 +129,6 @@ test("renders with provided `helpId` and `tooltipId`", async () => {
 
   expect(screen.getByRole("tooltip", { name: "foo" })).toHaveAttribute(
     "id",
-    "bar"
+    "bar",
   );
 });
diff --git a/src/components/hr/hr.pw.tsx b/src/components/hr/hr.pw.tsx
index cbe45d4229..6b3567e40e 100644
--- a/src/components/hr/hr.pw.tsx
+++ b/src/components/hr/hr.pw.tsx
@@ -38,16 +38,16 @@ test.describe("Hr component", () => {
           ml="10%"
           mr="40%"
           adaptiveMxBreakpoint={breakpoint}
-        />
+        />,
       );
 
       await expect(hrComponent(page)).toHaveCSS(
         "margin-left",
-        `${leftMargin}px`
+        `${leftMargin}px`,
       );
       await expect(hrComponent(page)).toHaveCSS(
         "margin-right",
-        `${rightMargin}px`
+        `${rightMargin}px`,
       );
     });
   });
diff --git a/src/components/hr/hr.stories.tsx b/src/components/hr/hr.stories.tsx
index b68968bd83..b2e942ecff 100644
--- a/src/components/hr/hr.stories.tsx
+++ b/src/components/hr/hr.stories.tsx
@@ -13,7 +13,7 @@ const styledSystemProps = generateStyledSystemProps(
   {
     margin: true,
   },
-  { mt: "3", mb: "3" }
+  { mt: "3", mb: "3" },
 );
 
 const meta: Meta<typeof Hr> = {
diff --git a/src/components/hr/hr.test.tsx b/src/components/hr/hr.test.tsx
index ed42de3859..4e6aa8bbdc 100644
--- a/src/components/hr/hr.test.tsx
+++ b/src/components/hr/hr.test.tsx
@@ -14,14 +14,14 @@ testStyledSystemMarginRTL(
   {
     mt: "24px",
     mb: "24px",
-  }
+  },
 );
 
 test("should apply the expected margin top", () => {
   render(
     <CarbonProvider validationRedesignOptIn>
       <Hr mt={7} />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const hr = screen.getByRole("separator");
 
diff --git a/src/components/i18n-provider/i18n-provider.test.tsx b/src/components/i18n-provider/i18n-provider.test.tsx
index 5330e32b34..912ec02dd7 100644
--- a/src/components/i18n-provider/i18n-provider.test.tsx
+++ b/src/components/i18n-provider/i18n-provider.test.tsx
@@ -21,7 +21,7 @@ it("defaults to the 'en-gb' locale when no other locale is specified", () => {
   render(
     <I18nProvider>
       <TestComponent />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   const localeText = screen.getByText("en-GB");
@@ -32,7 +32,7 @@ it("should support overriding the default locale with 'de-DE'", () => {
   render(
     <I18nProvider locale={deDE}>
       <TestComponent />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   const localeText = screen.getByText("de-DE");
@@ -43,7 +43,7 @@ it("should support overriding the default locale with 'en-CA'", () => {
   render(
     <I18nProvider locale={enCA}>
       <TestComponent />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   const localeText = screen.getByText("en-CA");
@@ -54,7 +54,7 @@ it("should support overriding the default locale with 'en-US'", () => {
   render(
     <I18nProvider locale={enUS}>
       <TestComponent />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   const localeText = screen.getByText("en-US");
@@ -65,7 +65,7 @@ it("should support overriding the default locale with 'es-ES'", () => {
   render(
     <I18nProvider locale={esES}>
       <TestComponent />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   const localeText = screen.getByText("es-ES");
@@ -76,7 +76,7 @@ it("should support overriding the default locale with 'fr-CA'", () => {
   render(
     <I18nProvider locale={frCA}>
       <TestComponent />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   const localeText = screen.getByText("fr-CA");
@@ -87,7 +87,7 @@ it("should support overriding the default locale with 'fr-FR'", () => {
   render(
     <I18nProvider locale={frFR}>
       <TestComponent />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   const localeText = screen.getByText("fr-FR");
@@ -105,7 +105,7 @@ it("should support overriding the default locale with a spread locale object", (
       }}
     >
       <TestComponent />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   const localeText = screen.getByText("fr-FR");
diff --git a/src/components/icon-button/icon-button.component.tsx b/src/components/icon-button/icon-button.component.tsx
index 7ef593ce17..a795a7f4c7 100644
--- a/src/components/icon-button/icon-button.component.tsx
+++ b/src/components/icon-button/icon-button.component.tsx
@@ -25,7 +25,7 @@ export interface IconButtonProps extends SpaceProps {
   onClick?: (
     e:
       | React.KeyboardEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => void;
 }
 
@@ -38,16 +38,16 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
       disabled = false,
       ...rest
     }: IconButtonProps,
-    ref
+    ref,
   ) => {
     const { batchSelectionDisabled } = useContext(BatchSelectionContext);
     const isDisabled = disabled || batchSelectionDisabled;
     const [internalRef, setInternalRef] = useState<HTMLButtonElement>();
     const ariaLabelValue =
       ariaLabel ||
-      (internalRef?.querySelector(
-        "[data-component='icon']"
-      ) as Element)?.getAttribute("type") ||
+      (
+        internalRef?.querySelector("[data-component='icon']") as Element
+      )?.getAttribute("type") ||
       "";
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
@@ -64,7 +64,7 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
         if (typeof ref === "object") ref.current = reference;
         if (typeof ref === "function") ref(reference);
       },
-      [ref]
+      [ref],
     );
 
     return (
@@ -86,7 +86,7 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
         </TooltipProvider>
       </StyledIconButton>
     );
-  }
+  },
 );
 
 IconButton.displayName = "IconButton";
diff --git a/src/components/icon-button/icon-button.pw.tsx b/src/components/icon-button/icon-button.pw.tsx
index e32dd4b970..97ffbb7a1d 100644
--- a/src/components/icon-button/icon-button.pw.tsx
+++ b/src/components/icon-button/icon-button.pw.tsx
@@ -6,53 +6,50 @@ import { CHARACTERS } from "../../../playwright/support/constants";
 import { HooksConfig } from "../../../playwright";
 import { checkAccessibility } from "../../../playwright/support/helper";
 
-test.describe(
-  "check IconButton component focus outlines and border radius",
-  () => {
-    test(`should have the expected styling when the focusRedesignOptOut is false`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<IconButtonComponent />);
+test.describe("check IconButton component focus outlines and border radius", () => {
+  test(`should have the expected styling when the focusRedesignOptOut is false`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<IconButtonComponent />);
 
-      await iconButton(page).focus();
-      await expect(iconButton(page)).toHaveCSS(
-        "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
-      );
+    await iconButton(page).focus();
+    await expect(iconButton(page)).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
+    );
 
-      await expect(iconButton(page)).toHaveCSS(
-        "outline",
-        "rgba(0, 0, 0, 0) solid 3px"
-      );
-    });
+    await expect(iconButton(page)).toHaveCSS(
+      "outline",
+      "rgba(0, 0, 0, 0) solid 3px",
+    );
+  });
 
-    test(`should have the expected styling when the focusRedesignOptOut is true`, async ({
-      mount,
-      page,
-    }) => {
-      await mount<HooksConfig>(<IconButtonComponent />, {
-        hooksConfig: { focusRedesignOptOut: true },
-      });
-
-      await iconButton(page).focus();
-      await expect(iconButton(page)).toHaveCSS(
-        "outline",
-        "rgb(255, 188, 25) solid 3px"
-      );
+  test(`should have the expected styling when the focusRedesignOptOut is true`, async ({
+    mount,
+    page,
+  }) => {
+    await mount<HooksConfig>(<IconButtonComponent />, {
+      hooksConfig: { focusRedesignOptOut: true },
     });
 
-    test(`should render with the expected border radius`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<IconButtonComponent />);
+    await iconButton(page).focus();
+    await expect(iconButton(page)).toHaveCSS(
+      "outline",
+      "rgb(255, 188, 25) solid 3px",
+    );
+  });
 
-      await iconButton(page).focus();
-      await expect(iconButton(page)).toHaveCSS("border-radius", "4px");
-    });
-  }
-);
+  test(`should render with the expected border radius`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<IconButtonComponent />);
+
+    await iconButton(page).focus();
+    await expect(iconButton(page)).toHaveCSS("border-radius", "4px");
+  });
+});
 
 test.describe("check props for IconButton component", () => {
   test(`should render with aria-label prop`, async ({ mount, page }) => {
@@ -60,7 +57,7 @@ test.describe("check props for IconButton component", () => {
 
     await expect(iconButton(page)).toHaveAttribute(
       "aria-label",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
     await expect(iconButton(page)).toBeVisible();
   });
@@ -89,7 +86,7 @@ test.describe("check events for IconButton component", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await iconButton(page).focus();
@@ -107,7 +104,7 @@ test.describe("check events for IconButton component", () => {
         onFocus={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await iconButton(page).focus();
@@ -124,7 +121,7 @@ test.describe("check events for IconButton component", () => {
         onMouseEnter={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await iconButton(page).hover();
@@ -141,7 +138,7 @@ test.describe("check events for IconButton component", () => {
         onMouseLeave={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await iconButton(page).hover();
@@ -159,7 +156,7 @@ test.describe("check events for IconButton component", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
     await iconButton(page).click();
     expect(callbackCount).toBe(1);
@@ -176,7 +173,7 @@ test.describe("check events for IconButton component", () => {
           onClick={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       await iconButton(page).press(key);
diff --git a/src/components/icon-button/icon-button.test.tsx b/src/components/icon-button/icon-button.test.tsx
index 0c0aa467ed..903c954069 100644
--- a/src/components/icon-button/icon-button.test.tsx
+++ b/src/components/icon-button/icon-button.test.tsx
@@ -11,7 +11,7 @@ test("should render with an `Icon` child", () => {
   render(
     <IconButton aria-label="icon-button">
       <Icon type="bin" />
-    </IconButton>
+    </IconButton>,
   );
 
   const iconButton = screen.getByRole("button", { name: "icon-button" });
@@ -25,7 +25,7 @@ test("sets the 'aria-label' attribute correctly when a custom value is passed to
   render(
     <IconButton aria-label="alternative-aria-label">
       <Icon type="bin" />
-    </IconButton>
+    </IconButton>,
   );
 
   const iconButton = screen.getByRole("button", {
@@ -39,7 +39,7 @@ test("sets the 'aria-label' attribute as the `Icon` child's type, when a custom
   render(
     <IconButton>
       <Icon type="bin" />
-    </IconButton>
+    </IconButton>,
   );
 
   const iconButton = screen.getByRole("button", { name: "bin" });
@@ -51,7 +51,7 @@ test("should render as disabled when the `disabled` prop is true", () => {
   render(
     <IconButton disabled aria-label="icon-button">
       <Icon type="bin" />
-    </IconButton>
+    </IconButton>,
   );
 
   const iconButton = screen.getByRole("button", { name: "icon-button" });
@@ -64,7 +64,7 @@ test("accepts ref as a ref object", () => {
   render(
     <IconButton aria-label="icon-button" ref={mockRef}>
       <Icon type="bin" />
-    </IconButton>
+    </IconButton>,
   );
 
   const button = screen.getByRole("button", { name: "icon-button" });
@@ -77,7 +77,7 @@ test("accepts ref as a ref callback", () => {
   render(
     <IconButton aria-label="icon-button" ref={mockRef}>
       <Icon type="bin" />
-    </IconButton>
+    </IconButton>,
   );
 
   const button = screen.getByRole("button", { name: "icon-button" });
@@ -90,7 +90,7 @@ test("sets ref to empty after unmount", () => {
   const { unmount } = render(
     <IconButton aria-label="icon-button">
       <Icon type="bin" />
-    </IconButton>
+    </IconButton>,
   );
 
   unmount();
@@ -106,5 +106,5 @@ testStyledSystemSpacingRTL(
   ),
   () => screen.getByRole("button"),
   { p: 0 },
-  { modifier: "&&" }
+  { modifier: "&&" },
 );
diff --git a/src/components/icon/icon-test.stories.tsx b/src/components/icon/icon-test.stories.tsx
index 0b6131d190..fe8bfc6243 100644
--- a/src/components/icon/icon-test.stories.tsx
+++ b/src/components/icon/icon-test.stories.tsx
@@ -104,7 +104,7 @@ export const All = () => (
     {ICONS.map((type) =>
       ICON_FONT_SIZES.map((fontSize) => (
         <Icon type={type} fontSize={fontSize} key={`${type}_${fontSize}`} />
-      ))
+      )),
     )}
     {[true, false].map((disabled) =>
       ICON_FONT_SIZES.map((fontSize) => {
@@ -121,7 +121,7 @@ export const All = () => (
             />
           ));
         });
-      })
+      }),
     )}
     {/* Custom colors */}
     <Icon type="add" color="blackOpacity65" />
diff --git a/src/components/icon/icon.component.tsx b/src/components/icon/icon.component.tsx
index e6238491fb..29df7e4b65 100644
--- a/src/components/icon/icon.component.tsx
+++ b/src/components/icon/icon.component.tsx
@@ -93,25 +93,25 @@ const Icon = React.forwardRef<HTMLSpanElement, IconProps>(
       role,
       ...rest
     }: IconProps,
-    ref
+    ref,
   ): JSX.Element => {
     const flipBehaviourCheck =
       Array.isArray(tooltipFlipOverrides) &&
       tooltipFlipOverrides.every((override) =>
-        ICON_TOOLTIP_POSITIONS.includes(override)
+        ICON_TOOLTIP_POSITIONS.includes(override),
       );
 
     if (!deprecatedExtraSmallBgSizeTriggered && bgSize === "extra-small") {
       deprecatedExtraSmallBgSizeTriggered = true;
       Logger.deprecate(
-        "The `extra-small` variant of the `bgSize` prop for `Icon` component has been deprecated and will soon be removed."
+        "The `extra-small` variant of the `bgSize` prop for `Icon` component has been deprecated and will soon be removed.",
       );
     }
 
     if (tooltipFlipOverrides) {
       invariant(
         flipBehaviourCheck,
-        `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`
+        `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`,
       );
     }
 
@@ -211,7 +211,7 @@ const Icon = React.forwardRef<HTMLSpanElement, IconProps>(
       );
     }
     return <StyledIcon {...styledIconProps} />;
-  }
+  },
 );
 
 Icon.displayName = "Icon";
diff --git a/src/components/icon/icon.pw.tsx b/src/components/icon/icon.pw.tsx
index f96627b8c8..a0c63279c0 100644
--- a/src/components/icon/icon.pw.tsx
+++ b/src/components/icon/icon.pw.tsx
@@ -24,7 +24,7 @@ test.describe("should check Icon component properties", () => {
       const iconLocator = page.getByTestId("icon");
       await expect(iconLocator).toHaveAttribute(
         "aria-hidden",
-        boolVal.toString()
+        boolVal.toString(),
       );
     });
   });
@@ -136,13 +136,15 @@ test.describe("should check Icon component properties", () => {
         await iconLocator.click();
         await expect(iconLocator).toHaveAttribute("type", iconType);
       });
-    }
+    },
   );
 
-  ([
-    [true, "rgba(0, 0, 0, 0.3)"],
-    [false, "rgba(0, 0, 0, 0.9)"],
-  ] as [IconProps["disabled"], string][]).forEach(([boolVal, color]) => {
+  (
+    [
+      [true, "rgba(0, 0, 0, 0.3)"],
+      [false, "rgba(0, 0, 0, 0.9)"],
+    ] as [IconProps["disabled"], string][]
+  ).forEach(([boolVal, color]) => {
     test(`should check icon color when disabled prop is set as ${boolVal}`, async ({
       mount,
       page,
@@ -175,31 +177,33 @@ test.describe("should check Icon component properties", () => {
     });
   });
 
-  ([
-    [SIZE.SMALL, 24],
-    [SIZE.MEDIUM, 32],
-    [SIZE.LARGE, 40],
-    [SIZE.EXTRALARGE, 56],
-  ] as [IconProps["fontSize"], number][]).forEach(
-    ([fontSize, heightAndWidth]) => {
-      test(`should check height and width as ${heightAndWidth} when fontSize is set as ${fontSize}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<IconComponent fontSize={fontSize} />);
+  (
+    [
+      [SIZE.SMALL, 24],
+      [SIZE.MEDIUM, 32],
+      [SIZE.LARGE, 40],
+      [SIZE.EXTRALARGE, 56],
+    ] as [IconProps["fontSize"], number][]
+  ).forEach(([fontSize, heightAndWidth]) => {
+    test(`should check height and width as ${heightAndWidth} when fontSize is set as ${fontSize}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<IconComponent fontSize={fontSize} />);
 
-        const iconLocator = page.getByTestId("icon");
-        await expect(iconLocator).toHaveCSS("height", `${heightAndWidth}px`);
-        await expect(iconLocator).toHaveCSS("width", `${heightAndWidth}px`);
-      });
-    }
-  );
+      const iconLocator = page.getByTestId("icon");
+      await expect(iconLocator).toHaveCSS("height", `${heightAndWidth}px`);
+      await expect(iconLocator).toHaveCSS("width", `${heightAndWidth}px`);
+    });
+  });
 
-  ([
-    ["circle", 50],
-    ["rounded-rect", 20],
-    ["square", 0],
-  ] as [IconProps["bgShape"], number][]).forEach(([bgShape, radius]) => {
+  (
+    [
+      ["circle", 50],
+      ["rounded-rect", 20],
+      ["square", 0],
+    ] as [IconProps["bgShape"], number][]
+  ).forEach(([bgShape, radius]) => {
     test(`should check bgShape as ${bgShape} when radius is set as ${radius}`, async ({
       mount,
       page,
@@ -209,29 +213,31 @@ test.describe("should check Icon component properties", () => {
       const iconLocator = page.getByTestId("icon");
       await expect(iconLocator).toHaveCSS(
         "border-bottom-left-radius",
-        `${radius}%`
+        `${radius}%`,
       );
       await expect(iconLocator).toHaveCSS(
         "border-bottom-right-radius",
-        `${radius}%`
+        `${radius}%`,
       );
       await expect(iconLocator).toHaveCSS(
         "border-top-left-radius",
-        `${radius}%`
+        `${radius}%`,
       );
       await expect(iconLocator).toHaveCSS(
         "border-top-right-radius",
-        `${radius}%`
+        `${radius}%`,
       );
     });
   });
 
-  ([
-    [SIZE.SMALL, 24],
-    [SIZE.MEDIUM, 32],
-    [SIZE.LARGE, 40],
-    [SIZE.EXTRALARGE, 56],
-  ] as [IconProps["bgSize"], number][]).forEach(([size, heightAndWidth]) => {
+  (
+    [
+      [SIZE.SMALL, 24],
+      [SIZE.MEDIUM, 32],
+      [SIZE.LARGE, 40],
+      [SIZE.EXTRALARGE, 56],
+    ] as [IconProps["bgSize"], number][]
+  ).forEach(([size, heightAndWidth]) => {
     test(`should check bgSize as ${size} when height and width is set as ${heightAndWidth}`, async ({
       mount,
       page,
@@ -244,24 +250,26 @@ test.describe("should check Icon component properties", () => {
     });
   });
 
-  ([
-    [["left"], "left", "bottom", 0, 0],
-    [["top"], "top", "bottom", 0, 0],
-    [["left"], "left", "top", 0, 120],
-    [["bottom"], "bottom", "top", 0, 120],
-    [["bottom"], "bottom", "left", 0, 120],
-    [["bottom"], "bottom", "right", 0, 120],
-    [["top"], "top", "left", 0, 0],
-    [["top"], "top", "right", 0, 0],
-    [["right"], "right", "bottom", 700, 0],
-    [["right"], "right", "top", 700, 120],
-  ] as [
-    IconProps["tooltipFlipOverrides"],
-    string,
-    IconProps["tooltipPosition"],
-    number,
-    number
-  ][]).forEach(
+  (
+    [
+      [["left"], "left", "bottom", 0, 0],
+      [["top"], "top", "bottom", 0, 0],
+      [["left"], "left", "top", 0, 120],
+      [["bottom"], "bottom", "top", 0, 120],
+      [["bottom"], "bottom", "left", 0, 120],
+      [["bottom"], "bottom", "right", 0, 120],
+      [["top"], "top", "left", 0, 0],
+      [["top"], "top", "right", 0, 0],
+      [["right"], "right", "bottom", 700, 0],
+      [["right"], "right", "top", 700, 120],
+    ] as [
+      IconProps["tooltipFlipOverrides"],
+      string,
+      IconProps["tooltipPosition"],
+      number,
+      number,
+    ][]
+  ).forEach(
     ([
       flipPosition,
       expectedPosition,
@@ -279,23 +287,23 @@ test.describe("should check Icon component properties", () => {
               tooltipFlipOverrides={flipPosition}
               tooltipPosition={tooltipPosition}
             />
-          </div>
+          </div>,
         );
 
         await page.setViewportSize({ width: 700, height: 120 });
 
         await page.evaluate(
           ([horizontal, vertical]) => window.scrollTo(horizontal, vertical),
-          [horizontalPos, verticalPos]
+          [horizontalPos, verticalPos],
         );
 
         const tooltip = getDataElementByValue(page, "tooltip");
         await expect(tooltip).toHaveAttribute(
           "data-placement",
-          expectedPosition
+          expectedPosition,
         );
       });
-    }
+    },
   );
 });
 
@@ -344,12 +352,9 @@ test.describe("should check accessibility for Icon component", () => {
     });
   });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as IconProps["tooltipPosition"][]).forEach((tooltipPosition) => {
+  (
+    ["top", "bottom", "left", "right"] as IconProps["tooltipPosition"][]
+  ).forEach((tooltipPosition) => {
     test(`should pass accessibility tests when tooltip position is set as ${tooltipPosition}`, async ({
       mount,
       page,
@@ -427,7 +432,7 @@ test.describe("should check accessibility for Icon component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [true, false].forEach((boolVal) => {
@@ -484,7 +489,7 @@ test.describe("should check accessibility for Icon component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE, SIZE.EXTRALARGE].forEach((size) => {
@@ -498,22 +503,24 @@ test.describe("should check accessibility for Icon component", () => {
     });
   });
 
-  ([
-    [["left"], "left", "bottom"],
-    [["top"], "top", "bottom"],
-    [["left"], "left", "top"],
-    [["bottom"], "bottom", "top"],
-    [["bottom"], "bottom", "left"],
-    [["bottom"], "bottom", "right"],
-    [["top"], "top", "left"],
-    [["top"], "top", "right"],
-    [["right"], "right", "bottom"],
-    [["right"], "right", "top"],
-  ] as [
-    IconProps["tooltipFlipOverrides"],
-    string,
-    IconProps["tooltipPosition"]
-  ][]).forEach(([flipPosition, expectedPosition, tooltipPosition]) => {
+  (
+    [
+      [["left"], "left", "bottom"],
+      [["top"], "top", "bottom"],
+      [["left"], "left", "top"],
+      [["bottom"], "bottom", "top"],
+      [["bottom"], "bottom", "left"],
+      [["bottom"], "bottom", "right"],
+      [["top"], "top", "left"],
+      [["top"], "top", "right"],
+      [["right"], "right", "bottom"],
+      [["right"], "right", "top"],
+    ] as [
+      IconProps["tooltipFlipOverrides"],
+      string,
+      IconProps["tooltipPosition"],
+    ][]
+  ).forEach(([flipPosition, expectedPosition, tooltipPosition]) => {
     test(`should pass accessibility tests when tooltip position is ${expectedPosition} rather than ${tooltipPosition} when flip position is ${flipPosition} after scrolling`, async ({
       mount,
       page,
@@ -524,7 +531,7 @@ test.describe("should check accessibility for Icon component", () => {
             tooltipFlipOverrides={flipPosition}
             tooltipPosition={tooltipPosition}
           />
-        </div>
+        </div>,
       );
 
       const iconLocator = page.getByTestId("icon");
diff --git a/src/components/icon/icon.stories.tsx b/src/components/icon/icon.stories.tsx
index bb4ef27bf4..03a289c7a2 100644
--- a/src/components/icon/icon.stories.tsx
+++ b/src/components/icon/icon.stories.tsx
@@ -85,7 +85,7 @@ export const VariousFontSizes: Story = () => {
       {(["small", "medium", "large", "extra-large"] as const).map(
         (fontSize) => (
           <Icon type="add" fontSize={fontSize} key={fontSize} />
-        )
+        ),
       )}
     </>
   );
@@ -119,22 +119,19 @@ export const BgSizesAndFontSizes: Story = () => {
     <>
       {(["small", "medium", "large", "extra-large"] as const).map(
         (fontSize) => {
-          return ([
-            "small",
-            "medium",
-            "large",
-            "extra-large",
-          ] as const).map((bgSize) => (
-            <Icon
-              type="add"
-              bg="#00b000"
-              fontSize={fontSize}
-              bgSize={bgSize}
-              mr={1}
-              key={`${fontSize}_${bgSize}`}
-            />
-          ));
-        }
+          return (["small", "medium", "large", "extra-large"] as const).map(
+            (bgSize) => (
+              <Icon
+                type="add"
+                bg="#00b000"
+                fontSize={fontSize}
+                bgSize={bgSize}
+                mr={1}
+                key={`${fontSize}_${bgSize}`}
+              />
+            ),
+          );
+        },
       )}
     </>
   );
diff --git a/src/components/icon/icon.style.ts b/src/components/icon/icon.style.ts
index 332f049627..038c65ae63 100644
--- a/src/components/icon/icon.style.ts
+++ b/src/components/icon/icon.style.ts
@@ -73,7 +73,7 @@ function adjustIconBgSize(fontSize?: FontSize, bgSize?: BgSize) {
     if (bgSizeValue < fontSizeValue) {
       // eslint-disable-next-line no-console
       console.warn(
-        `[WARNING - Icon] The "${bgSize}" \`bgSize\` is smaller than "${fontSize}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`
+        `[WARNING - Icon] The "${bgSize}" \`bgSize\` is smaller than "${fontSize}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`,
       );
       return iconConfig.backgroundSize[fontSize];
     }
diff --git a/src/components/icon/icon.test.tsx b/src/components/icon/icon.test.tsx
index 96e739444b..9b8ca7ec5c 100644
--- a/src/components/icon/icon.test.tsx
+++ b/src/components/icon/icon.test.tsx
@@ -34,7 +34,7 @@ test.each([
 
     const icon = screen.getByTestId("icon");
     expect(icon).toHaveAttribute("type", newType);
-  }
+  },
 );
 
 test("renders with custom data tags", () => {
@@ -44,7 +44,7 @@ test("renders with custom data tags", () => {
       data-role="icon"
       data-component="icon"
       data-element="icon"
-    />
+    />,
   );
 
   const icon = screen.getByTestId("icon");
@@ -111,7 +111,7 @@ test("allows a tooltip to be shown via the `tooltipVisible` prop", () => {
 
 test("allows a custom 'id' attribute to be set on the tooltip via the `tooltipId` prop", () => {
   render(
-    <Icon type="home" tooltipMessage="foo" tooltipVisible tooltipId="foo" />
+    <Icon type="home" tooltipMessage="foo" tooltipVisible tooltipId="foo" />,
   );
 
   const tooltip = screen.getByText("foo");
@@ -126,12 +126,12 @@ test("does not render, as an invariant is fired due to the `tooltipFlipOverrides
         type="home"
         tooltipMessage="foo"
         tooltipFlipOverrides={
-          (["invalid-position"] as unknown) as TooltipPositions[]
+          ["invalid-position"] as unknown as TooltipPositions[]
         }
-      />
-    )
+      />,
+    ),
   ).toThrow(
-    `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`
+    `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`,
   );
 
   consoleSpy.mockRestore();
@@ -146,11 +146,11 @@ test('logs a deprecation warning once when the `bgSize` prop is passed a value o
     <>
       <Icon type="home" bgSize="extra-small" />
       <Icon type="home" bgSize="extra-small" />
-    </>
+    </>,
   );
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "The `extra-small` variant of the `bgSize` prop for `Icon` component has been deprecated and will soon be removed."
+    "The `extra-small` variant of the `bgSize` prop for `Icon` component has been deprecated and will soon be removed.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
   loggerSpy.mockRestore();
@@ -165,7 +165,7 @@ test("logs a warning when the `fontSize` props value is larger than the `bgSize`
   render(<Icon type="home" bgSize={bgSizeValue} fontSize={fontSizeValue} />);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    `[WARNING - Icon] The "${bgSizeValue}" \`bgSize\` is smaller than "${fontSizeValue}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`
+    `[WARNING - Icon] The "${bgSizeValue}" \`bgSize\` is smaller than "${fontSizeValue}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`,
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
   loggerSpy.mockRestore();
@@ -181,9 +181,9 @@ test("catches and logs a thrown error when the `color` prop is passed a value th
   expect(consoleErrorSpy).toHaveBeenCalledWith(
     expect.objectContaining({
       message: expect.stringContaining(
-        "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation."
+        "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.",
       ),
-    })
+    }),
   );
   consoleErrorSpy.mockRestore();
 });
@@ -198,9 +198,9 @@ test("catches and logs a thrown error when the `bg` prop is passed a value that
   expect(consoleErrorSpy).toHaveBeenCalledWith(
     expect.objectContaining({
       message: expect.stringContaining(
-        "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation."
+        "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.",
       ),
-    })
+    }),
   );
   consoleErrorSpy.mockRestore();
 });
@@ -212,9 +212,9 @@ test.each(["circle", "rounded-rect", "square"] as BackgroundShape[])(
     render(<Icon type="home" bgShape={bgShape} />);
 
     expect(screen.getByTestId("icon")).toHaveStyleRule(
-      `border-radius: ${iconConfig.backgroundShape[bgShape]}`
+      `border-radius: ${iconConfig.backgroundShape[bgShape]}`,
     );
-  }
+  },
 );
 
 const mockBrowserTypeCheck = browserTypeCheck as jest.MockedFunction<
@@ -243,5 +243,5 @@ test("renders with the correct margin-top when rendered in chrome or firefox and
 
 testStyledSystemMarginRTL(
   (props) => <Icon type="add" {...props} />,
-  () => screen.getByTestId("icon")
+  () => screen.getByTestId("icon"),
 );
diff --git a/src/components/image/image.component.tsx b/src/components/image/image.component.tsx
index c143c644e6..be7300bccb 100644
--- a/src/components/image/image.component.tsx
+++ b/src/components/image/image.component.tsx
@@ -16,12 +16,12 @@ export const Image = ({
 }: StyledImageProps) => {
   invariant(
     !src || !children,
-    "The 'Image' component renders as an 'img' element when the 'src' prop is used and therefore does not accept children."
+    "The 'Image' component renders as an 'img' element when the 'src' prop is used and therefore does not accept children.",
   );
 
   invariant(
     !src || (alt && typeof alt === "string") || decorative,
-    "Please use the 'decorative' prop if the 'alt' text should be an empty value or provide an 'alt' string when rendering the 'Image' component as an 'img' element."
+    "Please use the 'decorative' prop if the 'alt' text should be an empty value or provide an 'alt' string when rendering the 'Image' component as an 'img' element.",
   );
 
   return (
diff --git a/src/components/image/image.pw.tsx b/src/components/image/image.pw.tsx
index 9ed1208a77..991246df35 100644
--- a/src/components/image/image.pw.tsx
+++ b/src/components/image/image.pw.tsx
@@ -42,7 +42,7 @@ test.describe("check props for Image component", () => {
         const imageElement = page.locator("img");
         await expect(imageElement).toHaveCSS("position", positionValue);
       });
-    }
+    },
   );
 
   (["10px", "5%", "auto"] as const).forEach((topValue) => {
diff --git a/src/components/image/image.style.ts b/src/components/image/image.style.ts
index d06eee14e0..96645b3f8a 100644
--- a/src/components/image/image.style.ts
+++ b/src/components/image/image.style.ts
@@ -64,7 +64,7 @@ const StyledImage = styled.div.attrs(
     right,
     bottom,
     left,
-  })
+  }),
 )<StyledImageProps>`
   ${margin}
   ${layout}
diff --git a/src/components/image/image.test.tsx b/src/components/image/image.test.tsx
index 7b6e1cca44..93415ce96f 100644
--- a/src/components/image/image.test.tsx
+++ b/src/components/image/image.test.tsx
@@ -10,19 +10,19 @@ import Image from "./image.component";
 
 testStyledSystemMarginRTL(
   (props) => <Image data-role="image" {...props} />,
-  () => screen.getByTestId("image")
+  () => screen.getByTestId("image"),
 );
 testStyledSystemLayout(
   (props) => <Image data-role="image" {...props} />,
-  () => screen.getByTestId("image")
+  () => screen.getByTestId("image"),
 );
 testStyledSystemBackground(
   (props) => <Image data-role="image" {...props} />,
-  () => screen.getByTestId("image")
+  () => screen.getByTestId("image"),
 );
 testStyledSystemPaddingRTL(
   (props) => <Image data-role="image" {...props} />,
-  () => screen.getByTestId("image")
+  () => screen.getByTestId("image"),
 );
 
 test("renders", () => {
@@ -37,7 +37,7 @@ test("renders with the 'src' prop", () => {
       data-role="image"
       src="https://upload.wikimedia.org/wikipedia/en/6/6c/Heatposter.jpg"
       alt="Heat poster"
-    />
+    />,
   );
 
   expect(screen.getByRole("img")).toBeVisible();
@@ -50,7 +50,7 @@ test("renders with the 'src' and 'decorative' props", () => {
       src="https://upload.wikimedia.org/wikipedia/en/6/6c/Heatposter.jpg"
       alt=""
       decorative
-    />
+    />,
   );
 
   expect(screen.getByRole("img")).toBeVisible();
@@ -73,10 +73,10 @@ test("does not render, as an invariant is fired due to children being passed as
         alt="Heat poster"
       >
         Children
-      </Image>
-    )
+      </Image>,
+    ),
   ).toThrow(
-    "The 'Image' component renders as an 'img' element when the 'src' prop is used and therefore does not accept children."
+    "The 'Image' component renders as an 'img' element when the 'src' prop is used and therefore does not accept children.",
   );
 
   consoleSpy.mockRestore();
@@ -87,10 +87,10 @@ test("does not render, as an invariant is fired due to the 'src' prop being pass
 
   expect(() =>
     render(
-      <Image src="https://upload.wikimedia.org/wikipedia/en/6/6c/Heatposter.jpg" />
-    )
+      <Image src="https://upload.wikimedia.org/wikipedia/en/6/6c/Heatposter.jpg" />,
+    ),
   ).toThrow(
-    "Please use the 'decorative' prop if the 'alt' text should be an empty value or provide an 'alt' string when rendering the 'Image' component as an 'img' element."
+    "Please use the 'decorative' prop if the 'alt' text should be an empty value or provide an 'alt' string when rendering the 'Image' component as an 'img' element.",
   );
 
   consoleSpy.mockRestore();
@@ -104,10 +104,10 @@ test("does not render, as an invariant is fired due to the 'src' prop being pass
       <Image
         src="https://upload.wikimedia.org/wikipedia/en/6/6c/Heatposter.jpg"
         alt=""
-      />
-    )
+      />,
+    ),
   ).toThrow(
-    "Please use the 'decorative' prop if the 'alt' text should be an empty value or provide an 'alt' string when rendering the 'Image' component as an 'img' element."
+    "Please use the 'decorative' prop if the 'alt' text should be an empty value or provide an 'alt' string when rendering the 'Image' component as an 'img' element.",
   );
 
   consoleSpy.mockRestore();
@@ -119,7 +119,7 @@ test("sets the 'alt' attribute correctly when a custom value is passed to the 'a
       data-role="image"
       src="https://upload.wikimedia.org/wikipedia/en/6/6c/Heatposter.jpg"
       alt="Heat poster"
-    />
+    />,
   );
 
   expect(screen.getByRole("img")).toHaveAccessibleName("Heat poster");
@@ -132,7 +132,7 @@ test("sets the 'hidden' attribute correctly when the 'hidden' prop is true", ()
       src="https://upload.wikimedia.org/wikipedia/en/6/6c/Heatposter.jpg"
       alt="Heat poster"
       hidden
-    />
+    />,
   );
 
   expect(screen.queryByRole("img")).not.toBeInTheDocument();
diff --git a/src/components/inline-inputs/inline-inputs.component.tsx b/src/components/inline-inputs/inline-inputs.component.tsx
index ba7b95bd30..0bd6165062 100644
--- a/src/components/inline-inputs/inline-inputs.component.tsx
+++ b/src/components/inline-inputs/inline-inputs.component.tsx
@@ -103,7 +103,7 @@ const InlineInputs = ({
   useEffect(() => {
     if (required) {
       const elements = Array.from(
-        ref.current?.querySelectorAll("input") || /* istanbul ignore next */ []
+        ref.current?.querySelectorAll("input") || /* istanbul ignore next */ [],
       );
       elements.forEach((el) => el.setAttribute("required", ""));
     }
diff --git a/src/components/inline-inputs/inline-inputs.pw.tsx b/src/components/inline-inputs/inline-inputs.pw.tsx
index 60583b90bc..f1fcea0cd3 100644
--- a/src/components/inline-inputs/inline-inputs.pw.tsx
+++ b/src/components/inline-inputs/inline-inputs.pw.tsx
@@ -90,7 +90,7 @@ test.describe("InlineInputs", () => {
 
       await expect(inlineInputContainer(page)).toHaveCSS(
         "flex",
-        `0 0 ${inputWidth}%`
+        `0 0 ${inputWidth}%`,
       );
     });
   });
@@ -100,7 +100,7 @@ test.describe("InlineInputs", () => {
       await mount(
         <InlineInputs label="Inline Input">
           <Textbox>{children}</Textbox>
-        </InlineInputs>
+        </InlineInputs>,
       );
 
       await expect(inlineChildren(page)).toHaveText(children);
@@ -117,7 +117,7 @@ test.describe("InlineInputs", () => {
       await mount(<InlineInputComponent labelWidth={labelwidth} />);
       await expect(inlinelabelWidth(page)).toHaveCSS(
         "flex",
-        `0 0 ${labelwidth}%`
+        `0 0 ${labelwidth}%`,
       );
     });
   });
@@ -129,26 +129,26 @@ test.describe("InlineInputs", () => {
     });
   });
 
-  ([
-    ["left", "flex-start"],
-    ["right", "flex-end"],
-  ] as [InlineInputsProps["labelAlign"], string][]).forEach(
-    ([labelAlign, cssValue]) => {
-      test(`should render with labelAlign prop set to ${labelAlign}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <InlineInputComponent labelAlign={labelAlign} labelWidth={30} />
-        );
-
-        await expect(inlinelabelWidth(page)).toHaveCSS(
-          "justify-content",
-          cssValue
-        );
-      });
-    }
-  );
+  (
+    [
+      ["left", "flex-start"],
+      ["right", "flex-end"],
+    ] as [InlineInputsProps["labelAlign"], string][]
+  ).forEach(([labelAlign, cssValue]) => {
+    test(`should render with labelAlign prop set to ${labelAlign}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <InlineInputComponent labelAlign={labelAlign} labelWidth={30} />,
+      );
+
+      await expect(inlinelabelWidth(page)).toHaveCSS(
+        "justify-content",
+        cssValue,
+      );
+    });
+  });
 });
 
 test.describe("Accessibility tests for InlineInputs component", () => {
@@ -193,15 +193,15 @@ test.describe("rounded corners", () => {
       await mount(<InlineInputComponent gutter={gutter} />);
 
       await expect(
-        inlineInputContainer(page).locator('[role="presentation"]').first()
+        inlineInputContainer(page).locator('[role="presentation"]').first(),
       ).toHaveCSS("border-radius", firstInputResult);
 
       await expect(
-        inlineInputContainer(page).locator('[role="presentation"]').nth(1)
+        inlineInputContainer(page).locator('[role="presentation"]').nth(1),
       ).toHaveCSS("border-radius", middleInputResult);
 
       await expect(
-        inlineInputContainer(page).locator('[role="presentation"]').last()
+        inlineInputContainer(page).locator('[role="presentation"]').last(),
       ).toHaveCSS("border-radius", lastInputResult);
     });
   });
@@ -223,15 +223,15 @@ test.describe("rounded corners", () => {
             }}
             value="0.00"
           />
-        </InlineInputs>
+        </InlineInputs>,
       );
 
       await expect(
-        inlineInputContainer(page).locator('[role="presentation"]').first()
+        inlineInputContainer(page).locator('[role="presentation"]').first(),
       ).toHaveCSS("border-radius", firstInputResult);
 
       await expect(
-        inlineInputContainer(page).locator('[role="presentation"]').last()
+        inlineInputContainer(page).locator('[role="presentation"]').last(),
       ).toHaveCSS("border-radius", lastInputResult);
     });
   });
@@ -244,11 +244,11 @@ test.describe("rounded corners", () => {
       await mount(
         <InlineInputs label="Inline Input" gutter={gutter}>
           <Textbox warning inputIcon="warning" />
-        </InlineInputs>
+        </InlineInputs>,
       );
 
       await expect(
-        inlineInputContainer(page).locator('[role="presentation"]').first()
+        inlineInputContainer(page).locator('[role="presentation"]').first(),
       ).toHaveCSS("border-radius", "4px");
     });
   });
diff --git a/src/components/inline-inputs/inline-inputs.test.tsx b/src/components/inline-inputs/inline-inputs.test.tsx
index b916f0ef1a..cf92c7f5db 100644
--- a/src/components/inline-inputs/inline-inputs.test.tsx
+++ b/src/components/inline-inputs/inline-inputs.test.tsx
@@ -11,7 +11,7 @@ test("renders single child", () => {
   render(
     <InlineInputs>
       <Textbox onChange={() => {}} />
-    </InlineInputs>
+    </InlineInputs>,
   );
 
   expect(screen.getByRole("textbox")).toBeVisible();
@@ -22,7 +22,7 @@ test("renders multiple children", () => {
     <InlineInputs>
       <Textbox onChange={() => {}} />
       <Textbox onChange={() => {}} />
-    </InlineInputs>
+    </InlineInputs>,
   );
 
   expect(screen.getAllByRole("textbox")).toHaveLength(2);
@@ -32,7 +32,7 @@ test("renders with provided label", () => {
   render(
     <InlineInputs label="Inputs Label">
       <Textbox onChange={() => {}} />
-    </InlineInputs>
+    </InlineInputs>,
   );
 
   expect(screen.getByText("Inputs Label")).toBeVisible();
@@ -42,12 +42,12 @@ test("renders with provided labelId", () => {
   render(
     <InlineInputs label="Inputs Label" labelId="inputs-label">
       <Textbox onChange={() => {}} />
-    </InlineInputs>
+    </InlineInputs>,
   );
 
   expect(screen.getByText("Inputs Label")).toHaveAttribute(
     "id",
-    "inputs-label"
+    "inputs-label",
   );
 });
 
@@ -55,7 +55,7 @@ test("renders with provided htmlFor", () => {
   render(
     <InlineInputs label="Inputs Label" htmlFor="inputs">
       <Textbox onChange={() => {}} />
-    </InlineInputs>
+    </InlineInputs>,
   );
 
   expect(screen.getByText("Inputs Label")).toHaveAttribute("for", "inputs");
@@ -65,7 +65,7 @@ test("renders required children when required prop is true", () => {
   render(
     <InlineInputs required>
       <Textbox onChange={() => {}} />
-    </InlineInputs>
+    </InlineInputs>,
   );
 
   expect(screen.getByRole("textbox")).toBeRequired();
@@ -77,7 +77,7 @@ test("should render with expected styles when adaptiveLabelBreakpoint set and sc
   render(
     <InlineInputs label="Inputs Label" adaptiveLabelBreakpoint={1000}>
       <Textbox onChange={() => {}} />
-    </InlineInputs>
+    </InlineInputs>,
   );
 
   expect(screen.getByTestId("inline-inputs")).toHaveStyle({
@@ -94,7 +94,7 @@ test("should render with expected styles when adaptiveLabelBreakpoint set and sc
   render(
     <InlineInputs label="Inputs Label" adaptiveLabelBreakpoint={1000}>
       <Textbox onChange={() => {}} />
-    </InlineInputs>
+    </InlineInputs>,
   );
 
   expect(screen.getByTestId("inline-inputs")).toHaveStyle({
@@ -107,7 +107,7 @@ test("renders with expected styles when labelWidth is provided", () => {
   render(
     <InlineInputs label="Inputs Label" labelWidth={50}>
       <Textbox onChange={() => {}} />
-    </InlineInputs>
+    </InlineInputs>,
   );
 
   expect(screen.getByTestId("label-container")).toHaveStyle({
@@ -120,7 +120,7 @@ test("renders with expected styles when inputWidth is provided", () => {
   render(
     <InlineInputs inputWidth={50}>
       <Textbox onChange={() => {}} />
-    </InlineInputs>
+    </InlineInputs>,
   );
 
   expect(screen.getByTestId("inline-inputs-container")).toHaveStyle({
@@ -130,5 +130,5 @@ test("renders with expected styles when inputWidth is provided", () => {
 
 testStyledSystemMarginRTL(
   (props) => <InlineInputs label="label" {...props} />,
-  () => screen.getByTestId("inline-inputs")
+  () => screen.getByTestId("inline-inputs"),
 );
diff --git a/src/components/link-preview/link-preview.pw.tsx b/src/components/link-preview/link-preview.pw.tsx
index 1b47b3c930..cceed8fca6 100644
--- a/src/components/link-preview/link-preview.pw.tsx
+++ b/src/components/link-preview/link-preview.pw.tsx
@@ -31,7 +31,7 @@ test.describe("check styling for Link Preview component", () => {
 
     await expect(previewElement).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
   });
 
@@ -43,7 +43,7 @@ test.describe("check styling for Link Preview component", () => {
       <LinkPreviewComponentTest aria-label={CHARACTERS.STANDARD} />,
       {
         hooksConfig: { focusRedesignOptOut: true },
-      }
+      },
     );
 
     const previewElement = linkPreview(page);
@@ -51,7 +51,7 @@ test.describe("check styling for Link Preview component", () => {
 
     await expect(previewElement).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 2px"
+      "rgb(255, 188, 25) solid 2px",
     );
   });
 
@@ -64,7 +64,7 @@ test.describe("check styling for Link Preview component", () => {
     await expect(linkPreview(page)).toHaveCSS("border-radius", "8px");
 
     await expect(
-      page.locator('[data-component="link preview image placeholder"]')
+      page.locator('[data-component="link preview image placeholder"]'),
     ).toHaveCSS("border-radius", "8px 0px 0px 8px");
   });
 });
@@ -121,7 +121,9 @@ test.describe("check props for Link Preview component", () => {
     page,
   }) => {
     await mount(
-      <LinkPreviewComponentTest image={{ url: urlProp, alt: testPlaywright }} />
+      <LinkPreviewComponentTest
+        image={{ url: urlProp, alt: testPlaywright }}
+      />,
     );
 
     await expect(page.locator("img")).toHaveAttribute("src", urlProp);
@@ -145,7 +147,7 @@ test.describe("check functionality for Link Preview component", () => {
 
     await expect(previewElement).toHaveCSS(
       "background-color",
-      "rgb(204, 214, 219)"
+      "rgb(204, 214, 219)",
     );
   });
 
@@ -170,7 +172,7 @@ test.describe("check functionality for Link Preview component", () => {
       <LinkPreviewComponentTest as="div" onClose={() => {}} />,
       {
         hooksConfig: { focusRedesignOptOut: true },
-      }
+      },
     );
 
     const closeButton = page.getByLabel("link preview close button");
@@ -192,7 +194,7 @@ test.describe("check events for Link Preview component", () => {
         onClose={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await linkPreviewCloseIcon(page).click();
@@ -213,7 +215,7 @@ test.describe("check events for Link Preview component", () => {
           onClose={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       await page.keyboard.press("Tab");
diff --git a/src/components/link-preview/link-preview.test.tsx b/src/components/link-preview/link-preview.test.tsx
index 4d5c6f5ba6..de12a60dea 100644
--- a/src/components/link-preview/link-preview.test.tsx
+++ b/src/components/link-preview/link-preview.test.tsx
@@ -67,7 +67,7 @@ test("renders with a custom image and alt text via the `image` object prop", ()
         url: "https://irs.www.warnerbros.com/keyart-jpeg/heat_keyart.jpg",
         alt: "Heat 1995",
       }}
-    />
+    />,
   );
   const image = screen.getByRole("img", { name: "Heat 1995" });
 
@@ -81,7 +81,7 @@ test('renders with default alt text "Link preview image" when no `alt` is provid
       image={{
         url: "https://irs.www.warnerbros.com/keyart-jpeg/heat_keyart.jpg",
       }}
-    />
+    />,
   );
   const image = screen.getByRole("img", { name: "Link preview image" });
 
diff --git a/src/components/link/link.component.tsx b/src/components/link/link.component.tsx
index 186cf3d9c7..ec8cad9bdd 100644
--- a/src/components/link/link.component.tsx
+++ b/src/components/link/link.component.tsx
@@ -18,19 +18,19 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
       | React.MouseEvent<HTMLAnchorElement>
       | React.MouseEvent<HTMLButtonElement>
       | React.KeyboardEvent<HTMLAnchorElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** Function called when a key is pressed. */
   onKeyDown?: (
     ev:
       | React.KeyboardEvent<HTMLAnchorElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** Function called when a mouse down event triggers. */
   onMouseDown?: (
     ev:
       | React.MouseEvent<HTMLAnchorElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => void;
 
   /** A message to display as a tooltip to the link. */
@@ -80,7 +80,7 @@ export const Link = React.forwardRef<
       removeAriaLabelOnIcon,
       ...rest
     }: LinkProps,
-    ref
+    ref,
   ) => {
     const [hasFocus, setHasFocus] = useState(false);
     const l = useLocale();
@@ -161,7 +161,7 @@ export const Link = React.forwardRef<
           </StyledContent>
 
           {renderLinkIcon("right")}
-        </>
+        </>,
       );
     };
 
@@ -188,7 +188,7 @@ export const Link = React.forwardRef<
         {createLinkBasedOnType()}
       </StyledLink>
     );
-  }
+  },
 );
 
 Link.displayName = "Link";
diff --git a/src/components/link/link.pw.tsx b/src/components/link/link.pw.tsx
index 79126c999c..ae898c5ff7 100644
--- a/src/components/link/link.pw.tsx
+++ b/src/components/link/link.pw.tsx
@@ -55,7 +55,7 @@ test.describe("check props for Link component", () => {
     await mount(
       <LinkComponent disabled href="#">
         Test Content
-      </LinkComponent>
+      </LinkComponent>,
     );
 
     const linkElement = linkChildren(page);
@@ -71,23 +71,23 @@ test.describe("check props for Link component", () => {
     await expect(iconElement).toBeVisible();
   });
 
-  ([
-    ["left", 0],
-    ["right", 1],
-  ] as [LinkProps["iconAlign"], number][]).forEach(
-    ([iconAlign, iconPosition]) => {
-      test(`should render with iconAlign prop set to ${iconAlign}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<LinkComponent icon="add" iconAlign={iconAlign} />);
+  (
+    [
+      ["left", 0],
+      ["right", 1],
+    ] as [LinkProps["iconAlign"], number][]
+  ).forEach(([iconAlign, iconPosition]) => {
+    test(`should render with iconAlign prop set to ${iconAlign}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<LinkComponent icon="add" iconAlign={iconAlign} />);
 
-        const iconElement = link(page).locator("span").nth(iconPosition);
-        await expect(iconElement).toHaveAttribute("data-component", "icon");
-        await expect(iconElement).toBeVisible();
-      });
-    }
-  );
+      const iconElement = link(page).locator("span").nth(iconPosition);
+      await expect(iconElement).toHaveAttribute("data-component", "icon");
+      await expect(iconElement).toBeVisible();
+    });
+  });
 
   test("should render with href prop", async ({ mount, page }) => {
     await mount(<LinkComponent href={testPlaywright} />);
@@ -137,7 +137,7 @@ test.describe("check props for Link component", () => {
             tooltipMessage={testPlaywright}
             tooltipPosition={tooltipPosition}
           />
-        </Box>
+        </Box>,
       );
 
       const iconElement = icon(page);
@@ -147,7 +147,7 @@ test.describe("check props for Link component", () => {
       const tooltipElement = tooltipPreview(page);
       await expect(tooltipElement).toHaveAttribute(
         "data-placement",
-        tooltipPosition
+        tooltipPosition,
       );
     });
   });
@@ -191,14 +191,14 @@ test.describe("check props for Link component", () => {
     await expect(skipLinkElement).toBeVisible();
     await expect(skipLinkElement).toHaveCSS(
       "background-color",
-      "rgb(255, 188, 25)"
+      "rgb(255, 188, 25)",
     );
     await expect(skipLinkElement).toHaveCSS("font-size", "14px");
     await expect(skipLinkElement).toHaveCSS("padding-left", "24px");
     await expect(skipLinkElement).toHaveCSS("padding-right", "24px");
     await expect(skipLinkElement).toHaveCSS(
       "box-shadow",
-      "rgba(0, 20, 30, 0.1) 0px 10px 30px 0px, rgba(0, 20, 30, 0.1) 0px 30px 60px 0px"
+      "rgba(0, 20, 30, 0.1) 0px 10px 30px 0px, rgba(0, 20, 30, 0.1) 0px 30px 60px 0px",
     );
   });
 
@@ -215,17 +215,19 @@ test.describe("check props for Link component", () => {
     await expect(skipLinkElement).toHaveCSS("left", "0px");
     await expect(skipLinkElement).toHaveCSS(
       "text-decoration",
-      "underline 4px solid rgb(0, 0, 0)"
+      "underline 4px solid rgb(0, 0, 0)",
     );
     await expect(skipLinkElement).toHaveCSS("text-decoration-thickness", "4px");
     await expect(skipLinkElement).toHaveCSS("text-underline-offset", "3px");
   });
 
-  ([
-    ["default", "rgb(0, 126, 69)"],
-    ["negative", "rgb(203, 55, 74)"],
-    ["neutral", "rgba(0, 0, 0, 0.9)"],
-  ] as [LinkProps["variant"], string][]).forEach(([variant, defaultColor]) => {
+  (
+    [
+      ["default", "rgb(0, 126, 69)"],
+      ["negative", "rgb(203, 55, 74)"],
+      ["neutral", "rgba(0, 0, 0, 0.9)"],
+    ] as [LinkProps["variant"], string][]
+  ).forEach(([variant, defaultColor]) => {
     test(`should render with variant prop set to ${variant}`, async ({
       mount,
       page,
@@ -237,11 +239,13 @@ test.describe("check props for Link component", () => {
     });
   });
 
-  ([
-    ["default", "rgb(0, 103, 56)"],
-    ["negative", "rgb(162, 44, 59)"],
-    ["neutral", "rgb(0, 103, 56)"],
-  ] as [LinkProps["variant"], string][]).forEach(([variant, hoverColor]) => {
+  (
+    [
+      ["default", "rgb(0, 103, 56)"],
+      ["negative", "rgb(162, 44, 59)"],
+      ["neutral", "rgb(0, 103, 56)"],
+    ] as [LinkProps["variant"], string][]
+  ).forEach(([variant, hoverColor]) => {
     test(`should render with correct hover state with variant prop set to ${variant}`, async ({
       mount,
       page,
@@ -254,11 +258,13 @@ test.describe("check props for Link component", () => {
     });
   });
 
-  ([
-    ["default", "rgb(25, 142, 89)"],
-    ["negative", "rgb(208, 75, 92)"],
-    ["neutral", "rgb(25, 142, 89)"],
-  ] as [LinkProps["variant"], string][]).forEach(([variant, hoverColor]) => {
+  (
+    [
+      ["default", "rgb(25, 142, 89)"],
+      ["negative", "rgb(208, 75, 92)"],
+      ["neutral", "rgb(25, 142, 89)"],
+    ] as [LinkProps["variant"], string][]
+  ).forEach(([variant, hoverColor]) => {
     test(`should render with correct hover state with isDarkBackground prop set with ${variant} variant`, async ({
       mount,
       page,
@@ -286,7 +292,7 @@ test.describe("when focused", () => {
     await linkElement.focus();
     await expect(linkElement).toHaveCSS(
       "background-color",
-      "rgb(255, 218, 128)"
+      "rgb(255, 218, 128)",
     );
     await expect(linkElement).toHaveCSS("color", "rgba(0, 0, 0, 0.9)");
     await expect(linkElement).toHaveCSS("border-radius", "2px");
@@ -302,14 +308,14 @@ test.describe("when focused", () => {
     await linkElement.focus();
     await expect(linkElement).toHaveCSS(
       "background-color",
-      "rgb(255, 218, 128)"
+      "rgb(255, 218, 128)",
     );
     await expect(linkElement).toHaveCSS("color", "rgba(0, 0, 0, 0.9)");
     await expect(linkElement).toHaveCSS("border-radius", "2px");
     const linkWrapper = link(page);
     await expect(linkWrapper).toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px"
+      "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px",
     );
     await expect(linkWrapper).toHaveCSS("max-width", "fit-content");
   });
@@ -414,12 +420,9 @@ test.describe("should check accessibility for Link component", () => {
     await checkAccessibility(page);
   });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as LinkProps["tooltipPosition"][]).forEach((tooltipPosition) => {
+  (
+    ["top", "bottom", "left", "right"] as LinkProps["tooltipPosition"][]
+  ).forEach((tooltipPosition) => {
     test(`should pass accessibility tests with tooltipPosition prop set to ${tooltipPosition}`, async ({
       mount,
       page,
@@ -431,7 +434,7 @@ test.describe("should check accessibility for Link component", () => {
             tooltipMessage={testPlaywright}
             tooltipPosition={tooltipPosition}
           />
-        </Box>
+        </Box>,
       );
 
       await checkAccessibility(page);
@@ -479,6 +482,6 @@ test.describe("should check accessibility for Link component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 });
diff --git a/src/components/link/link.test.tsx b/src/components/link/link.test.tsx
index 9602c14482..e2ff4e51d8 100644
--- a/src/components/link/link.test.tsx
+++ b/src/components/link/link.test.tsx
@@ -11,7 +11,7 @@ test("should render `Skip to main content` text inside of Link when `isSkipLink`
   render(
     <Link href="#test" isSkipLink>
       Test Content
-    </Link>
+    </Link>,
   );
 
   expect(screen.getByText("Skip to main content")).toBeInTheDocument();
@@ -23,7 +23,7 @@ test("should not call the onClick function when `disabled` prop is true and clic
   render(
     <Link disabled onClick={spy}>
       Test Content
-    </Link>
+    </Link>,
   );
 
   const linkButtonElement = screen.getByRole("button", {
@@ -78,7 +78,7 @@ test("should render an `Icon` correctly with the `basket` value", () => {
   render(
     <Link href="#test" icon="basket">
       Test Content
-    </Link>
+    </Link>,
   );
 
   const iconElement = screen.getByTestId("icon");
@@ -141,7 +141,7 @@ test("when a link is rendered with an icon aligned right and has content, expect
   render(
     <Link icon="home" href="www.sage.com" iconAlign="right">
       Has Content
-    </Link>
+    </Link>,
   );
 
   const iconElement = screen.getByTestId("icon");
@@ -221,7 +221,7 @@ test("when `removeAriaLabelOnIcon` is true, it should set aria-label as undefine
       icon="home"
       aria-label="test"
       removeAriaLabelOnIcon
-    />
+    />,
   );
 
   const iconElement = screen.getByTestId("icon");
@@ -238,7 +238,7 @@ test("neutral `variant` has the expected styling when `isDarkBackground` is fals
       icon="home"
       variant="neutral"
       data-role="link"
-    />
+    />,
   );
 
   const linkElement = screen.getByTestId("link");
@@ -258,7 +258,7 @@ test("neutral `variant` has the expected styling when `isDarkBackground` is fals
       icon="home"
       variant="neutral"
       data-role="link"
-    />
+    />,
   );
 
   const linkElement = screen.getByTestId("link");
@@ -280,7 +280,7 @@ test("neutral `variant` has the expected styling when `isDarkBackground` is fals
       icon="home"
       variant="neutral"
       data-role="link"
-    />
+    />,
   );
 
   const linkElement = screen.getByTestId("link");
@@ -304,7 +304,7 @@ test("negative `variant` has the expected styling when `isDarkBackground` is fal
       icon="home"
       variant="negative"
       data-role="link"
-    />
+    />,
   );
 
   const linkElement = screen.getByTestId("link");
@@ -324,7 +324,7 @@ test("negative `variant` has the expected styling when `isDarkBackground` is fal
       icon="home"
       variant="neutral"
       data-role="link"
-    />
+    />,
   );
 
   const linkElement = screen.getByTestId("link");
@@ -340,7 +340,7 @@ test("negative `variant` has the expected styling when `isDarkBackground` is fal
 describe("isDarkBackground", () => {
   it("matches the expected styling with default `variant`", () => {
     render(
-      <Link href="foo.com" isDarkBackground icon="home" data-role="link" />
+      <Link href="foo.com" isDarkBackground icon="home" data-role="link" />,
     );
 
     const linkElement = screen.getByTestId("link");
@@ -353,7 +353,7 @@ describe("isDarkBackground", () => {
   it("matches the expected styling with default `variant` when hovered over", async () => {
     const user = userEvent.setup();
     render(
-      <Link href="foo.com" isDarkBackground icon="home" data-role="link" />
+      <Link href="foo.com" isDarkBackground icon="home" data-role="link" />,
     );
 
     const linkElement = screen.getByTestId("link");
@@ -368,7 +368,7 @@ describe("isDarkBackground", () => {
   it("matches the expected styling with default `variant` when focused", async () => {
     const user = userEvent.setup();
     render(
-      <Link href="foo.com" isDarkBackground icon="home" data-role="link" />
+      <Link href="foo.com" isDarkBackground icon="home" data-role="link" />,
     );
 
     const linkElement = screen.getByTestId("link");
@@ -399,7 +399,7 @@ describe("isDarkBackground", () => {
         icon="home"
         variant="negative"
         data-role="link"
-      />
+      />,
     );
 
     const linkElement = screen.getByTestId("link");
@@ -418,7 +418,7 @@ describe("isDarkBackground", () => {
         icon="home"
         variant="negative"
         data-role="link"
-      />
+      />,
     );
 
     const linkElement = screen.getByTestId("link");
@@ -439,7 +439,7 @@ describe("isDarkBackground", () => {
         icon="home"
         variant="negative"
         data-role="link"
-      />
+      />,
     );
 
     const linkElement = screen.getByTestId("link");
@@ -462,7 +462,7 @@ describe("isDarkBackground", () => {
         icon="home"
         variant="neutral"
         data-role="link"
-      />
+      />,
     );
 
     const linkElement = screen.getByTestId("link");
@@ -480,7 +480,7 @@ describe("isDarkBackground", () => {
         icon="home"
         variant="neutral"
         data-role="link"
-      />
+      />,
     );
 
     const linkElement = screen.getByTestId("link");
@@ -498,7 +498,7 @@ describe("isDarkBackground", () => {
         icon="home"
         variant="neutral"
         data-role="link"
-      />
+      />,
     );
 
     const linkElement = screen.getByTestId("link");
@@ -525,7 +525,7 @@ describe("link display styling", () => {
         }}
       >
         <Link href="foo.com" />
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     const linkElement = screen.getByRole("link");
diff --git a/src/components/loader-bar/loader-bar.component.tsx b/src/components/loader-bar/loader-bar.component.tsx
index 541d77fc54..bfbf1ff57e 100644
--- a/src/components/loader-bar/loader-bar.component.tsx
+++ b/src/components/loader-bar/loader-bar.component.tsx
@@ -22,7 +22,7 @@ export const LoaderBar = ({ size = "medium", ...rest }: LoaderBarProps) => {
   const l = useLocale();
 
   const reduceMotion = !useMediaQuery(
-    "screen and (prefers-reduced-motion: no-preference)"
+    "screen and (prefers-reduced-motion: no-preference)",
   );
 
   return (
diff --git a/src/components/loader-bar/loader-bar.pw.tsx b/src/components/loader-bar/loader-bar.pw.tsx
index f49eb282a3..0d3eece5ff 100644
--- a/src/components/loader-bar/loader-bar.pw.tsx
+++ b/src/components/loader-bar/loader-bar.pw.tsx
@@ -10,11 +10,13 @@ import {
 } from "../../../playwright/support/helper";
 
 test.describe("LoaderBar component tests", () => {
-  ([
-    [LOADER_BAR_SIZES[0], 4],
-    [LOADER_BAR_SIZES[1], 8],
-    [LOADER_BAR_SIZES[2], 16],
-  ] as [LoaderBarProps["size"], number][]).forEach(([size, height]) => {
+  (
+    [
+      [LOADER_BAR_SIZES[0], 4],
+      [LOADER_BAR_SIZES[1], 8],
+      [LOADER_BAR_SIZES[2], 16],
+    ] as [LoaderBarProps["size"], number][]
+  ).forEach(([size, height]) => {
     test(`should render with ${size} size`, async ({ mount, page }) => {
       await mount(<LoaderBarComponent size={size} mt={2} />);
 
@@ -28,7 +30,7 @@ test.describe("LoaderBar component tests", () => {
       const duration = await getStyle(progressBarTimer, "animation-duration");
       const playState = await getStyle(
         progressBarTimer,
-        "animation-play-state"
+        "animation-play-state",
       );
       expect(duration).toEqual("2s");
       expect(playState).toEqual("running");
@@ -47,11 +49,13 @@ test.describe("LoaderBar component tests", () => {
 });
 
 test.describe("Accessibility tests for LoaderBar", () => {
-  ([
-    LOADER_BAR_SIZES[0],
-    LOADER_BAR_SIZES[1],
-    LOADER_BAR_SIZES[2],
-  ] as LoaderBarProps["size"][]).forEach((size) => {
+  (
+    [
+      LOADER_BAR_SIZES[0],
+      LOADER_BAR_SIZES[1],
+      LOADER_BAR_SIZES[2],
+    ] as LoaderBarProps["size"][]
+  ).forEach((size) => {
     test(`should pass tests for ${size} size`, async ({ mount, page }) => {
       await mount(<LoaderBarComponent size={size} />);
 
diff --git a/src/components/loader-bar/loader-bar.test.tsx b/src/components/loader-bar/loader-bar.test.tsx
index 1b7a63e8b1..1e0538703c 100644
--- a/src/components/loader-bar/loader-bar.test.tsx
+++ b/src/components/loader-bar/loader-bar.test.tsx
@@ -51,5 +51,5 @@ it.each([
 
     expect(outerBar).toHaveStyle(`height: ${height}`);
     expect(innerBar).toHaveStyle(`height: ${height}`);
-  }
+  },
 );
diff --git a/src/components/loader-spinner/loader-spinner.component.tsx b/src/components/loader-spinner/loader-spinner.component.tsx
index 5e0129ac92..fe52bdfd02 100644
--- a/src/components/loader-spinner/loader-spinner.component.tsx
+++ b/src/components/loader-spinner/loader-spinner.component.tsx
@@ -66,7 +66,7 @@ export const LoaderSpinner = ({
   const locale = useLocale();
 
   const reduceMotion = !useMediaQuery(
-    "screen and (prefers-reduced-motion: no-preference)"
+    "screen and (prefers-reduced-motion: no-preference)",
   );
 
   const isLabelDark = variant !== "inverse" && variant !== "gradient-white";
diff --git a/src/components/loader-spinner/loader-spinner.config.ts b/src/components/loader-spinner/loader-spinner.config.ts
index c4d651cdb6..a872470b68 100644
--- a/src/components/loader-spinner/loader-spinner.config.ts
+++ b/src/components/loader-spinner/loader-spinner.config.ts
@@ -6,7 +6,7 @@ const LOADER_SPINNER_VARIANTS = [
   "gradient-white",
 ] as const;
 
-type LoaderSpinnerVariants = typeof LOADER_SPINNER_VARIANTS[number];
+type LoaderSpinnerVariants = (typeof LOADER_SPINNER_VARIANTS)[number];
 
 const LOADER_SPINNER_SIZES = [
   "extra-small",
@@ -16,7 +16,7 @@ const LOADER_SPINNER_SIZES = [
   "extra-large",
 ] as const;
 
-type LoaderSpinnerSizes = typeof LOADER_SPINNER_SIZES[number];
+type LoaderSpinnerSizes = (typeof LOADER_SPINNER_SIZES)[number];
 
 type LoaderSpinnerSizeParams = Record<
   LoaderSpinnerSizes,
diff --git a/src/components/loader-spinner/loader-spinner.pw.tsx b/src/components/loader-spinner/loader-spinner.pw.tsx
index 5cac8851bc..48fec8a33a 100644
--- a/src/components/loader-spinner/loader-spinner.pw.tsx
+++ b/src/components/loader-spinner/loader-spinner.pw.tsx
@@ -31,7 +31,7 @@ test.describe("Prop checks for Loader Spinner component", () => {
     page,
   }) => {
     await mount(
-      <LoaderSpinnerComponent spinnerLabel="bar" showSpinnerLabel={false} />
+      <LoaderSpinnerComponent spinnerLabel="bar" showSpinnerLabel={false} />,
     );
 
     await expect(loaderSpinnerHiddenLabel(page)).toHaveText("bar");
@@ -56,10 +56,10 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
         await expect(loaderSpinnerWrapper(page)).toHaveCSS(
           "flex-direction",
-          "column"
+          "column",
         );
       });
-    }
+    },
   );
 
   sizes.forEach((spinnerSizes) => {
@@ -71,7 +71,7 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
       await expect(loaderSpinnerSvg(page)).toHaveCSS(
         "height",
-        `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
+        `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`,
       );
     });
   });
@@ -85,7 +85,7 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
       await expect(loaderSpinnerSvg(page)).toHaveCSS(
         "min-height",
-        `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
+        `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`,
       );
     });
   });
@@ -99,7 +99,7 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
       await expect(loaderSpinnerInnerArc(page)).toHaveCSS(
         "stroke-width",
-        `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].strokeWidth}px`
+        `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].strokeWidth}px`,
       );
     });
   });
@@ -113,7 +113,7 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
       await expect(loaderSpinnerOuterArc(page)).toHaveCSS(
         "stroke-width",
-        `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].strokeWidth}px`
+        `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].strokeWidth}px`,
       );
     });
   });
@@ -126,7 +126,7 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
     await expect(loaderSpinnerVisibleLabel(page)).toHaveCSS(
       "margin-left",
-      "8px"
+      "8px",
     );
   });
 
@@ -140,10 +140,10 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
         await expect(loaderSpinnerVisibleLabel(page)).toHaveCSS(
           "margin-top",
-          `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].labelMarginTop}px`
+          `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].labelMarginTop}px`,
         );
       });
-    }
+    },
   );
 
   test("when 'showSpinnerLabel' is `true` the label is rendered", async ({
@@ -173,13 +173,15 @@ test.describe("Prop checks for Loader Spinner component", () => {
     await expect(loaderSpinnerHiddenLabel(page)).toHaveText("Loading...");
   });
 
-  ([
-    "rgb(179, 217, 200)",
-    "rgb(204, 214, 219)",
-    "rgb(255, 255, 255)",
-    "rgba(0, 0, 0, 0.1)",
-    "rgb(255, 255, 255)",
-  ] as string[]).forEach((strokeValues, index) => {
+  (
+    [
+      "rgb(179, 217, 200)",
+      "rgb(204, 214, 219)",
+      "rgb(255, 255, 255)",
+      "rgba(0, 0, 0, 0.1)",
+      "rgb(255, 255, 255)",
+    ] as string[]
+  ).forEach((strokeValues, index) => {
     test(`when the 'variant' prop is passed as '${variants[index]}' the correct outer arc stroke (color) value is rendered`, async ({
       mount,
       page,
@@ -188,7 +190,7 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
       await expect(loaderSpinnerOuterArc(page)).toHaveCSS(
         "stroke",
-        strokeValues
+        strokeValues,
       );
     });
   });
@@ -201,17 +203,19 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
     await expect(loaderSpinnerOuterArc(page)).toHaveCSS(
       "stroke-opacity",
-      "0.3"
+      "0.3",
     );
   });
 
-  ([
-    "rgb(0, 126, 69)",
-    "rgb(51, 91, 112)",
-    "rgb(255, 255, 255)",
-    "rgb(0, 214, 57)",
-    "rgb(0, 214, 57)",
-  ] as string[]).forEach((strokeValues, index) => {
+  (
+    [
+      "rgb(0, 126, 69)",
+      "rgb(51, 91, 112)",
+      "rgb(255, 255, 255)",
+      "rgb(0, 214, 57)",
+      "rgb(0, 214, 57)",
+    ] as string[]
+  ).forEach((strokeValues, index) => {
     test(`when the 'variant' prop is passed as '${variants[index]}' the correct inner arc svg stroke (color) value is rendered`, async ({
       mount,
       page,
@@ -220,18 +224,20 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
       await expect(loaderSpinnerInnerArc(page)).toHaveCSS(
         "stroke",
-        strokeValues
+        strokeValues,
       );
     });
   });
 
-  ([
-    "rgba(0, 0, 0, 0.9)",
-    "rgba(0, 0, 0, 0.9)",
-    "rgb(255, 255, 255)",
-    "rgba(0, 0, 0, 0.9)",
-    "rgb(255, 255, 255)",
-  ] as string[]).forEach((labelColorValues, index) => {
+  (
+    [
+      "rgba(0, 0, 0, 0.9)",
+      "rgba(0, 0, 0, 0.9)",
+      "rgb(255, 255, 255)",
+      "rgba(0, 0, 0, 0.9)",
+      "rgb(255, 255, 255)",
+    ] as string[]
+  ).forEach((labelColorValues, index) => {
     test(`when the 'variant' prop is passed as '${variants[index]}' the correct font color is rendered`, async ({
       mount,
       page,
@@ -240,7 +246,7 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
       await expect(loaderSpinnerVisibleLabel(page)).toHaveCSS(
         "color",
-        labelColorValues
+        labelColorValues,
       );
     });
   });
diff --git a/src/components/loader-spinner/loader-spinner.style.ts b/src/components/loader-spinner/loader-spinner.style.ts
index 91aa9191a5..8d6f154609 100644
--- a/src/components/loader-spinner/loader-spinner.style.ts
+++ b/src/components/loader-spinner/loader-spinner.style.ts
@@ -34,15 +34,14 @@ export const StyledSpinnerWrapper = styled.div<
 export const StyledLabel = styled(Typography)<
   Required<Pick<LoaderSpinnerProps, "size">>
 >`
-  ${({ size }) =>
-    css`
-      display: flex;
-      justify-content: center;
-      text-align: center;
-      ${size === "extra-small"
-        ? "margin-left: var(--spacing100)"
-        : `margin-top: ${LOADER_SPINNER_SIZE_PARAMS[size].labelMarginTop}px`};
-    `}
+  ${({ size }) => css`
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    ${size === "extra-small"
+      ? "margin-left: var(--spacing100)"
+      : `margin-top: ${LOADER_SPINNER_SIZE_PARAMS[size].labelMarginTop}px`};
+  `}
 `;
 
 interface StyledSpinnerCircleSvgProps
diff --git a/src/components/loader-spinner/loader-spinner.test.tsx b/src/components/loader-spinner/loader-spinner.test.tsx
index dfe0ddb3ae..98da3ccfd4 100644
--- a/src/components/loader-spinner/loader-spinner.test.tsx
+++ b/src/components/loader-spinner/loader-spinner.test.tsx
@@ -88,7 +88,7 @@ describe("when custom props are passed", () => {
       const wrapperElement = screen.getByRole("status");
 
       expect(wrapperElement).toHaveStyle("flex-direction: column");
-    }
+    },
   );
 
   it.each(sizes)(
@@ -98,9 +98,9 @@ describe("when custom props are passed", () => {
       const svgCircleElement = screen.getByRole("presentation");
 
       expect(svgCircleElement).toHaveStyle(
-        `height: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
+        `height: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`,
       );
-    }
+    },
   );
 
   it.each(sizes)(
@@ -110,9 +110,9 @@ describe("when custom props are passed", () => {
       const svgCircleElement = screen.getByRole("presentation");
 
       expect(svgCircleElement).toHaveStyle(
-        `min-height: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
+        `min-height: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`,
       );
-    }
+    },
   );
 
   it.each(sizes)(
@@ -122,9 +122,9 @@ describe("when custom props are passed", () => {
       const innerArcSvgElement = screen.getByTestId("inner-arc");
 
       expect(innerArcSvgElement).toHaveStyle(
-        `stroke-width: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].strokeWidth}px`
+        `stroke-width: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].strokeWidth}px`,
       );
-    }
+    },
   );
 
   it.each(sizes)(
@@ -134,9 +134,9 @@ describe("when custom props are passed", () => {
       const outerArcSvgElement = screen.getByTestId("outer-arc");
 
       expect(outerArcSvgElement).toHaveStyle(
-        `stroke-width: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].strokeWidth}px`
+        `stroke-width: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].strokeWidth}px`,
       );
-    }
+    },
   );
 
   it("when the 'size' prop is passed as 'extra-small' the label has the correct margin-left", () => {
@@ -157,7 +157,7 @@ describe("when custom props are passed", () => {
       expect(visibleLabelElement).toHaveStyle({
         marginTop: `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].labelMarginTop}px`,
       });
-    }
+    },
   );
 
   it("when 'showSpinnerLabel' is `true` the visible label is rendered in the live region container", () => {
@@ -200,7 +200,7 @@ describe("when custom props are passed", () => {
       const outerArcSvgElement = screen.getByTestId("outer-arc");
 
       expect(outerArcSvgElement).toHaveStyle(`stroke: ${strokeValues}`);
-    }
+    },
   );
 
   it("when the 'variant' prop is passed as `inverse` the outer arc stroke opacity is 0.3", () => {
@@ -223,7 +223,7 @@ describe("when custom props are passed", () => {
       const innerArcSvgElement = screen.getByTestId("inner-arc");
 
       expect(innerArcSvgElement).toHaveStyle(`stroke: ${strokeValues}`);
-    }
+    },
   );
 
   it.each([
@@ -240,7 +240,7 @@ describe("when custom props are passed", () => {
       const visibleLabelElement = screen.getByTestId("visible-label");
 
       expect(visibleLabelElement).toHaveStyle(`color: ${labelColorValues}`);
-    }
+    },
   );
 
   it("when 'hasMotion' is `true` animation should be present on the inner arc", () => {
@@ -248,7 +248,7 @@ describe("when custom props are passed", () => {
     const innerArcSvgElement = screen.getByTestId("inner-arc");
 
     expect(innerArcSvgElement).toHaveStyle(
-      "animation-iteration-count: infinite"
+      "animation-iteration-count: infinite",
     );
   });
 
@@ -266,9 +266,9 @@ describe("when custom props are passed", () => {
       const innerArcSvgElement = screen.getByTestId("inner-arc");
 
       expect(innerArcSvgElement).toHaveStyle(
-        "animation-name: untrackedAnimation, gradientAnimation"
+        "animation-name: untrackedAnimation, gradientAnimation",
       );
-    }
+    },
   );
 
   it.each(["gradient-grey", "gradient-white"] as const)(
@@ -278,9 +278,9 @@ describe("when custom props are passed", () => {
       const innerArcSvgElement = screen.getByTestId("inner-arc");
 
       expect(innerArcSvgElement).toHaveStyle(
-        "animation-name: untrackedAnimation, gradientAnimation"
+        "animation-name: untrackedAnimation, gradientAnimation",
       );
-    }
+    },
   );
 
   it("when 'isTracked' is `true` the tracked keyframe animation should be present on the rendered component", () => {
@@ -288,7 +288,7 @@ describe("when custom props are passed", () => {
     const innerArcSvgElement = screen.getByTestId("inner-arc");
 
     expect(innerArcSvgElement).toHaveStyle(
-      "animation-name: trackedAnimation, none"
+      "animation-name: trackedAnimation, none",
     );
   });
 
@@ -297,7 +297,7 @@ describe("when custom props are passed", () => {
     const innerArcSvgElement = screen.getByTestId("inner-arc");
 
     expect(innerArcSvgElement).toHaveStyle(
-      "animation-name: untrackedAnimation, none"
+      "animation-name: untrackedAnimation, none",
     );
   });
 
@@ -308,9 +308,9 @@ describe("when custom props are passed", () => {
       const innerArcSvgElement = screen.getByTestId("inner-arc");
 
       expect(innerArcSvgElement).toHaveStyle(
-        `animation-duration: ${animationTimes}s`
+        `animation-duration: ${animationTimes}s`,
       );
-    }
+    },
   );
 });
 
diff --git a/src/components/loader-star/loader-star.component.tsx b/src/components/loader-star/loader-star.component.tsx
index ce4b152c39..3037522719 100644
--- a/src/components/loader-star/loader-star.component.tsx
+++ b/src/components/loader-star/loader-star.component.tsx
@@ -27,7 +27,7 @@ const LoaderStar = ({
   const locale = useLocale();
 
   const reduceMotion = !useMediaQuery(
-    "screen and (prefers-reduced-motion: no-preference)"
+    "screen and (prefers-reduced-motion: no-preference)",
   );
 
   const label = (
diff --git a/src/components/loader-star/loader-star.pw.tsx b/src/components/loader-star/loader-star.pw.tsx
index a00d570b7e..aa80648631 100644
--- a/src/components/loader-star/loader-star.pw.tsx
+++ b/src/components/loader-star/loader-star.pw.tsx
@@ -31,7 +31,7 @@ test.describe("User prefers reduced motion", () => {
     await expect(loaderStarVisibleLabel(page)).toHaveCSS("display", "flex");
     await expect(loaderStarVisibleLabel(page)).toHaveCSS(
       "justify-content",
-      "center"
+      "center",
     );
   });
 });
diff --git a/src/components/loader/loader-square.style.ts b/src/components/loader/loader-square.style.ts
index 05443c2f87..c909a7d9d3 100644
--- a/src/components/loader/loader-square.style.ts
+++ b/src/components/loader/loader-square.style.ts
@@ -27,7 +27,7 @@ type RoundedCornersOptOut = boolean;
 
 const getDimentions = (
   size: StyledLoaderSquareProps["size"],
-  roundedCornersOptOut: RoundedCornersOptOut
+  roundedCornersOptOut: RoundedCornersOptOut,
 ) => {
   let width;
   let marginRight;
diff --git a/src/components/loader/loader-square.test.tsx b/src/components/loader/loader-square.test.tsx
index cfaaad8127..711cb7d025 100644
--- a/src/components/loader/loader-square.test.tsx
+++ b/src/components/loader/loader-square.test.tsx
@@ -66,15 +66,15 @@ test("when inside button, the expected white background colour is applied", () =
   const loaderSquares = screen.getAllByTestId("loader-square");
 
   expect(loaderSquares[0]).toHaveStyleRule(
-    "backgroundColor: var(--colorsUtilityYang100)"
+    "backgroundColor: var(--colorsUtilityYang100)",
   );
 
   expect(loaderSquares[1]).toHaveStyleRule(
-    "backgroundColor: var(--colorsUtilityYang100)"
+    "backgroundColor: var(--colorsUtilityYang100)",
   );
 
   expect(loaderSquares[2]).toHaveStyleRule(
-    "backgroundColor: var(--colorsUtilityYang100)"
+    "backgroundColor: var(--colorsUtilityYang100)",
   );
 });
 
@@ -85,14 +85,14 @@ test("when inside button and `isActive` prop is false, the expected background c
   const loaderSquares = screen.getAllByTestId("loader-square");
 
   expect(loaderSquares[0]).toHaveStyleRule(
-    "backgroundColor: var(--colorsSemanticNeutral500)"
+    "backgroundColor: var(--colorsSemanticNeutral500)",
   );
 
   expect(loaderSquares[1]).toHaveStyleRule(
-    "backgroundColor: var(--colorsSemanticNeutral500)"
+    "backgroundColor: var(--colorsSemanticNeutral500)",
   );
 
   expect(loaderSquares[2]).toHaveStyleRule(
-    "backgroundColor: var(--colorsSemanticNeutral500)"
+    "backgroundColor: var(--colorsSemanticNeutral500)",
   );
 });
diff --git a/src/components/loader/loader.component.tsx b/src/components/loader/loader.component.tsx
index c350445cc7..f0bfc68f32 100644
--- a/src/components/loader/loader.component.tsx
+++ b/src/components/loader/loader.component.tsx
@@ -32,7 +32,7 @@ export const Loader = ({
   const l = useLocale();
 
   const reduceMotion = !useMediaQuery(
-    "screen and (prefers-reduced-motion: no-preference)"
+    "screen and (prefers-reduced-motion: no-preference)",
   );
 
   const loaderSquareProps = {
diff --git a/src/components/loader/loader.pw.tsx b/src/components/loader/loader.pw.tsx
index 372982b102..c3adafa9ce 100644
--- a/src/components/loader/loader.pw.tsx
+++ b/src/components/loader/loader.pw.tsx
@@ -50,7 +50,7 @@ test.describe("check props for Loader component test", () => {
         const marginRightVal = await getStyle(loaderNth(index), "margin-right");
         const animationDelayVal = await getStyle(
           loaderNth(index),
-          "animation-delay"
+          "animation-delay",
         );
         return [heightVal, widthVal, marginRightVal, animationDelayVal];
       };
@@ -117,7 +117,7 @@ test.describe("check props for Loader component test", () => {
 
     await expect(loader(page, 0).locator("..")).toHaveAttribute(
       "aria-label",
-      "playwright-aria"
+      "playwright-aria",
     );
   });
 
@@ -177,7 +177,7 @@ test.describe("check props for Loader component test", () => {
     const focusStyle = await getStyle(loaderInsideButton(page), "box-shadow");
 
     expect(focusStyle).toEqual(
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
   });
 
diff --git a/src/components/loader/loader.test.tsx b/src/components/loader/loader.test.tsx
index 40ac215377..4aa3746cbf 100644
--- a/src/components/loader/loader.test.tsx
+++ b/src/components/loader/loader.test.tsx
@@ -11,7 +11,7 @@ jest.mock("../../hooks/useMediaQuery", () => ({
 
 testStyledSystemMarginRTL(
   (props) => <Loader {...props} />,
-  () => screen.getByRole("progressbar")
+  () => screen.getByRole("progressbar"),
 );
 
 test("when the user disallows animations or their preference cannot be determined, alternative loading text is rendered", () => {
@@ -46,7 +46,7 @@ describe("when the user allows animations", () => {
     render(<Loader aria-label="Still loading" />);
 
     expect(screen.getByRole("progressbar")).toHaveAccessibleName(
-      "Still loading"
+      "Still loading",
     );
   });
 });
diff --git a/src/components/menu/__internal__/keyboard-navigation/index.test.tsx b/src/components/menu/__internal__/keyboard-navigation/index.test.tsx
index 3215ed00f5..f6136992a6 100644
--- a/src/components/menu/__internal__/keyboard-navigation/index.test.tsx
+++ b/src/components/menu/__internal__/keyboard-navigation/index.test.tsx
@@ -10,12 +10,12 @@ import Logger from "../../../../__internal__/utils/logger";
 const loggerSpy = jest.spyOn(Logger, "deprecate");
 
 const getMockEvent = (key: string, which?: number) => {
-  return ({
+  return {
     preventDefault: jest.fn(),
     stopPropagation: jest.fn(),
     key,
     which,
-  } as unknown) as React.KeyboardEvent;
+  } as unknown as React.KeyboardEvent;
 };
 
 const MockMenu = () => (
@@ -95,7 +95,7 @@ test("should return the index of the first item when user presses Home key", ()
   const focusableItems = screen.getAllByRole("listitem");
   const result = menuKeyboardNavigation(
     getMockEvent("Home", 36),
-    focusableItems
+    focusableItems,
   );
   expect(result).toEqual(0);
 });
@@ -105,7 +105,7 @@ test("should return indexx for the last item when user presses End key", () => {
   const focusableItems = screen.getAllByRole("listitem");
   const result = menuKeyboardNavigation(
     getMockEvent("End", 35),
-    focusableItems
+    focusableItems,
   );
   expect(result).toEqual(8);
 });
diff --git a/src/components/menu/__internal__/keyboard-navigation/index.ts b/src/components/menu/__internal__/keyboard-navigation/index.ts
index c211b5a749..2f39cb4117 100644
--- a/src/components/menu/__internal__/keyboard-navigation/index.ts
+++ b/src/components/menu/__internal__/keyboard-navigation/index.ts
@@ -19,7 +19,7 @@ function characterNavigation(inputString?: string, focusableItems?: Element[]) {
 
     return (
       [MENU_ITEM, SCROLLABLE_BLOCK_PARENT].includes(
-        item.getAttribute("data-component") as string
+        item.getAttribute("data-component") as string,
       ) && getMenuText(item)?.startsWith(inputString.toLowerCase())
     );
   });
@@ -29,7 +29,7 @@ function characterNavigation(inputString?: string, focusableItems?: Element[]) {
 
 function menuKeyboardNavigation(
   event: React.KeyboardEvent,
-  focusableItems: Element[]
+  focusableItems: Element[],
 ) {
   if (Events.isHomeKey(event)) {
     event.preventDefault();
diff --git a/src/components/menu/__internal__/submenu/submenu.component.tsx b/src/components/menu/__internal__/submenu/submenu.component.tsx
index a983320cb6..c6f88a4ce5 100644
--- a/src/components/menu/__internal__/submenu/submenu.component.tsx
+++ b/src/components/menu/__internal__/submenu/submenu.component.tsx
@@ -45,7 +45,7 @@ export interface SubmenuProps {
   onKeyDown?: (
     event:
       | React.KeyboardEvent<HTMLAnchorElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** set the colour variant for a menuType */
   variant?: VariantType;
@@ -67,7 +67,7 @@ export interface SubmenuProps {
   onClick?: (
     event:
       | React.MouseEvent<HTMLAnchorElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => void;
   /** Accessible label for when no text children are passed to menu item */
   ariaLabel?: string;
@@ -99,28 +99,22 @@ const Submenu = React.forwardRef<
       submenuMaxWidth,
       ...rest
     }: SubmenuProps,
-    ref
+    ref,
   ) => {
     const [submenuRef, setSubmenuRef] = useState<
       HTMLUListElement | HTMLDivElement | null
     >(null);
     const submenuId = useRef(guid());
     const menuContext = useContext(MenuContext);
-    const {
-      inFullscreenView,
-      openSubmenuId,
-      setOpenSubmenuId,
-      menuType,
-    } = menuContext;
+    const { inFullscreenView, openSubmenuId, setOpenSubmenuId, menuType } =
+      menuContext;
     const [submenuOpen, setSubmenuOpen] = useState(false);
     const [submenuFocusId, setSubmenuFocusId] = useState<string | null>(null);
     const [submenuItemIds, setSubmenuItemIds] = useState<(string | null)[]>([]);
     const [characterString, setCharacterString] = useState("");
     const [applyFocusRadius, setApplyFocusRadius] = useState<boolean>(false);
-    const [
-      applyFocusRadiusToLastItem,
-      setApplyFocusRadiusToLastItem,
-    ] = useState<boolean>(false);
+    const [applyFocusRadiusToLastItem, setApplyFocusRadiusToLastItem] =
+      useState<boolean>(false);
     const shiftTabPressed = useRef(false);
     const focusFirstMenuItemOnOpen = useRef(false);
 
@@ -137,7 +131,7 @@ const Submenu = React.forwardRef<
         const childrenArray = Array.from(items);
 
         const scrollableBlock = submenuRef?.querySelector(
-          `[data-component='${SCROLLABLE_BLOCK}']`
+          `[data-component='${SCROLLABLE_BLOCK}']`,
         );
 
         const index = scrollableBlock
@@ -145,7 +139,7 @@ const Submenu = React.forwardRef<
           : -1;
 
         return scrollableBlock?.querySelector(
-          `[data-component='${SCROLLABLE_BLOCK_PARENT}']`
+          `[data-component='${SCROLLABLE_BLOCK_PARENT}']`,
         )
           ? index + 1
           : index;
@@ -190,7 +184,7 @@ const Submenu = React.forwardRef<
         // Finds all ul elements that are not submenus
         const ulElements = Array.from(
           submenuRef?.querySelectorAll("ul:not([data-component='submenu'])") ||
-            /* istanbul ignore next */ []
+            /* istanbul ignore next */ [],
         );
 
         // Terminate early if there are no ul elements as we have nothing we need to apply styles to.
@@ -199,7 +193,7 @@ const Submenu = React.forwardRef<
         // Get the last menu item in the submenu
         const lastMenuItem = Array.from(
           submenuRef?.querySelectorAll("[data-component='menu-item']") ||
-            /* istanbul ignore next */ []
+            /* istanbul ignore next */ [],
         ).pop();
 
         lastMenuItemElement.current = lastMenuItem;
@@ -210,13 +204,13 @@ const Submenu = React.forwardRef<
         // Check if the last segment block is a scrollable block
         const isLastSegmentBlockScrollableBlock = Boolean(
           lastSegmentBlock?.parentElement?.dataset.component ===
-            SCROLLABLE_BLOCK
+            SCROLLABLE_BLOCK,
         );
 
         // Get all the menu items from the last segment block
         const segmentBlockMenuItems = Array.from(
           lastSegmentBlock?.querySelectorAll("[data-component='menu-item']") ||
-            /* istanbul ignore next */ []
+            /* istanbul ignore next */ [],
         );
 
         // Get the last menu item in the last segment block
@@ -243,7 +237,7 @@ const Submenu = React.forwardRef<
           (menuItemsMatch && !isLastSegmentBlockScrollableBlock) ||
             (menuItemsMatch &&
               isLastSegmentBlockScrollableBlock &&
-              !isLastMenuItemInSegmentBlockVisible)
+              !isLastMenuItemInSegmentBlockVisible),
         );
       };
 
@@ -280,7 +274,7 @@ const Submenu = React.forwardRef<
 
         return index;
       },
-      [submenuItemIds]
+      [submenuItemIds],
     );
 
     const handleKeyDown = useCallback(
@@ -390,7 +384,7 @@ const Submenu = React.forwardRef<
             (p) =>
               (p as HTMLElement).getAttribute("data-element") === "input" ||
               (p as HTMLElement).getAttribute("data-element") ===
-                "input-icon-toggle"
+                "input-icon-toggle",
           );
 
           if (!eventIsFromInput) {
@@ -419,7 +413,7 @@ const Submenu = React.forwardRef<
         characterString,
         restartCharacterTimeout,
         startCharacterTimeout,
-      ]
+      ],
     );
 
     useEffect(() => {
@@ -430,7 +424,7 @@ const Submenu = React.forwardRef<
         /* istanbul ignore else */
         if (items) {
           setSubmenuItemIds(
-            Array.from(items).map((item) => item.getAttribute("id"))
+            Array.from(items).map((item) => item.getAttribute("id")),
           );
         }
       }
@@ -580,7 +574,7 @@ const Submenu = React.forwardRef<
         )}
       </StyledSubmenuWrapper>
     );
-  }
+  },
 );
 
 Submenu.displayName = "submenu";
diff --git a/src/components/menu/__internal__/submenu/submenu.test.tsx b/src/components/menu/__internal__/submenu/submenu.test.tsx
index 33af971ce9..3aee0ef739 100644
--- a/src/components/menu/__internal__/submenu/submenu.test.tsx
+++ b/src/components/menu/__internal__/submenu/submenu.test.tsx
@@ -38,7 +38,7 @@ test("should render the last menu item with the correct styles", async () => {
         </MenuSegmentTitle>
         <MenuItem href="#">Menu Item 4</MenuItem>
       </MenuItem>
-    </Menu>
+    </Menu>,
   );
 
   const menuItem = screen.getByRole("button", { name: "Menu Item" });
@@ -74,7 +74,7 @@ test("should render the scrollable block with the correct styles on its last men
           <MenuItem href="#">Item Submenu Twelve</MenuItem>
         </ScrollableBlock>
       </MenuItem>
-    </Menu>
+    </Menu>,
   );
 
   const menuItem = screen.getByRole("button", { name: "Menu Item Three" });
@@ -113,7 +113,7 @@ test("should render the scrollable block with the correct styles on the last men
         </ScrollableBlock>
         <MenuItem href="#">Menu Item Last</MenuItem>
       </MenuItem>
-    </Menu>
+    </Menu>,
   );
 
   const menuItem = screen.getByRole("button", { name: "Menu Item Three" });
@@ -142,7 +142,7 @@ test("should not render submenu when closed", () => {
         <MenuItem>Apple</MenuItem>
         <MenuItem>Banana</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   expect(screen.queryByRole("menu")).not.toBeInTheDocument();
@@ -156,7 +156,7 @@ test("should render submenu when user hovers over on parent menu item", async ()
         <MenuItem>Apple</MenuItem>
         <MenuItem>Banana</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.hover(menuItem);
@@ -173,7 +173,7 @@ test("should remove submenu element from the document when it's closed by the us
         <MenuItem>Apple</MenuItem>
         <MenuItem>Banana</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.hover(menuItem);
@@ -191,7 +191,7 @@ test("should render submenu when parent item is clicked", async () => {
         <MenuItem>Apple</MenuItem>
         <MenuItem>Banana</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -208,7 +208,7 @@ test("should not display submenu when user hovers over parent menu item and `cli
         <MenuItem>Apple</MenuItem>
         <MenuItem>Banana</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.hover(menuItem);
@@ -226,7 +226,7 @@ test("should call the `onSubmenuOpen` callback when the submenu opens and prop h
         <MenuItem>Apple</MenuItem>
         <MenuItem>Banana</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -243,7 +243,7 @@ test("should call the `onSubmenuClose` callback when the submenu closes and prop
         <MenuItem>Apple</MenuItem>
         <MenuItem>Banana</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -260,7 +260,7 @@ test("should render submenu with the correct styles when `submenuDirection` is s
         <MenuItem>Apple</MenuItem>
         <MenuItem>Banana</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -279,7 +279,7 @@ test("should render submenu with the correct styles when `submenuDirection` is s
         <MenuItem>Apple</MenuItem>
         <MenuItem>Banana</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -298,7 +298,7 @@ test("should close submenu when the user clicks outside of the component boundar
         <MenuItem>Apple</MenuItem>
         <MenuItem>Banana</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -320,7 +320,7 @@ test("should support focusing elements via the user typing a search string", asy
         <MenuItem href="#">Orange</MenuItem>
         <MenuItem href="#">Strawberry</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -349,7 +349,7 @@ test("resets search string after 1.5s and focuses the correct item on next chara
         <MenuItem href="#">Orange</MenuItem>
         <MenuItem href="#">Strawberry</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -383,7 +383,7 @@ test("should focus the first item that matches when the search string matches mu
         <MenuItem href="#">Melon</MenuItem>
         <MenuItem href="#">Strawberry</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -419,7 +419,7 @@ test("should not focus a menu item when the search string does not match any ite
         <MenuItem href="#">Orange</MenuItem>
         <MenuItem href="#">Strawberry</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -450,7 +450,7 @@ test("should render submenu with role list when a ScrollableBlock with a `parent
         <MenuItem href="#">Mango</MenuItem>
         <MenuItem href="#">Melon</MenuItem>
       </Submenu>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const menuItem = screen.getByRole("button", { name: "title" });
   await user.click(menuItem);
@@ -479,7 +479,7 @@ test("should render the menu with a max-height set when the `maxHeight` prop is
           <MenuItem href="#">Item 10</MenuItem>
         </Submenu>
       </MenuContext.Provider>
-    </FixedNavigationBarContext.Provider>
+    </FixedNavigationBarContext.Provider>,
   );
   const parentMenuItem = screen.getByRole("button", { name: "title" });
   await user.click(parentMenuItem);
diff --git a/src/components/menu/component.test-pw.tsx b/src/components/menu/component.test-pw.tsx
index 119986de37..ee30af0641 100644
--- a/src/components/menu/component.test-pw.tsx
+++ b/src/components/menu/component.test-pw.tsx
@@ -58,7 +58,7 @@ export const MenuComponent = (props: Partial<MenuProps> & MenuDividerProps) => {
 };
 
 export const MenuComponentScrollable = (
-  props: Partial<ScrollableBlockProps>
+  props: Partial<ScrollableBlockProps>,
 ) => {
   return (
     <Box mb={150}>
@@ -219,7 +219,7 @@ export const MenuWithChildrenUpdating = () => {
 };
 
 export const MenuComponentFullScreen = (
-  props: Partial<MenuFullscreenProps>
+  props: Partial<MenuFullscreenProps>,
 ) => {
   const [menuOpen, setMenuOpen] = useState({
     light: false,
@@ -230,7 +230,7 @@ export const MenuComponentFullScreen = (
   const fullscreenViewBreakPoint = useMediaQuery("(max-width: 1200px)");
   const responsiveMenuItems = (
     startPosition: "left" | "right",
-    menu: MenuType
+    menu: MenuType,
   ) => {
     if (fullscreenViewBreakPoint) {
       return [
@@ -295,7 +295,7 @@ export const MenuComponentFullScreen = (
           <Menu menuType={menuType}>
             {React.Children.map(
               responsiveMenuItems("left", menuType),
-              (items) => items
+              (items) => items,
             )}
           </Menu>
         </div>
@@ -329,7 +329,7 @@ export const MenuComponentFullScreenSimple = ({
 };
 
 export const MenuComponentFullScreenWithLongSubmenuText = (
-  props: Partial<MenuFullscreenProps>
+  props: Partial<MenuFullscreenProps>,
 ) => {
   const [menuOpen, setMenuOpen] = useState({
     light: false,
@@ -340,7 +340,7 @@ export const MenuComponentFullScreenWithLongSubmenuText = (
   const fullscreenViewBreakPoint = useMediaQuery("(max-width: 1200px)");
   const responsiveMenuItems = (
     startPosition: "left" | "right",
-    menu: MenuType
+    menu: MenuType,
   ) => {
     if (fullscreenViewBreakPoint) {
       return [
@@ -417,7 +417,7 @@ export const MenuComponentFullScreenWithLongSubmenuText = (
           <Menu menuType={menuType}>
             {React.Children.map(
               responsiveMenuItems("left", menuType),
-              (items) => items
+              (items) => items,
             )}
           </Menu>
         </div>
@@ -441,7 +441,7 @@ export const MenuFullScreenBackgroundScrollTest = () => {
 };
 
 export const MenuComponentItems = (
-  props: MenuWithChildren & MenuDividerProps
+  props: MenuWithChildren & MenuDividerProps,
 ) => {
   return (
     <Box mb={150}>
@@ -528,7 +528,7 @@ export const MenuFullScreenWithSearchButton = ({
 );
 
 export const MenuComponentScrollableParent = (
-  props: Partial<ScrollableBlockProps>
+  props: Partial<ScrollableBlockProps>,
 ) => {
   const items = ["apple", "banana", "carrot", "grapefruit", "melon", "orange"];
   const [itemSearch, setItemSearch] = React.useState(items);
@@ -670,7 +670,7 @@ export const MenuSegmentTitleComponent = (props: Partial<MenuTitleProps>) => {
 };
 
 export const MenuSegmentTitleComponentWithAdditionalMenuItem = (
-  props: Partial<MenuTitleProps>
+  props: Partial<MenuTitleProps>,
 ) => {
   return (
     <Box mb={150}>
diff --git a/src/components/menu/menu-divider/menu-divider.component.tsx b/src/components/menu/menu-divider/menu-divider.component.tsx
index 3e65cc183d..0c6b46e000 100644
--- a/src/components/menu/menu-divider/menu-divider.component.tsx
+++ b/src/components/menu/menu-divider/menu-divider.component.tsx
@@ -24,7 +24,7 @@ const MenuDivider = React.forwardRef<HTMLDivElement, MenuDividerProps>(
         />
       </StyledMenuItem>
     );
-  }
+  },
 );
 
 MenuDivider.displayName = "MenuDivider";
diff --git a/src/components/menu/menu-divider/menu-divider.test.tsx b/src/components/menu/menu-divider/menu-divider.test.tsx
index 5c494cdc3e..bf82d68a2b 100644
--- a/src/components/menu/menu-divider/menu-divider.test.tsx
+++ b/src/components/menu/menu-divider/menu-divider.test.tsx
@@ -22,7 +22,7 @@ test("should apply the 'light' background-color passed as `menuType` via context
       <MenuItem submenu="Item One">
         <MenuDivider data-role="divider" />
       </MenuItem>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -40,7 +40,7 @@ test("should apply the 'dark' background-color passed as `menuType` via context"
       <MenuItem submenu="Item One">
         <MenuDivider data-role="divider" />
       </MenuItem>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -58,7 +58,7 @@ test("should apply the 'white' background-color passed as `menuType` via context
       <MenuItem submenu="Item One">
         <MenuDivider data-role="divider" />
       </MenuItem>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -76,7 +76,7 @@ test("should apply the 'black' background-color passed as `menuType` via context
       <MenuItem submenu="Item One">
         <MenuDivider data-role="divider" />
       </MenuItem>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -109,7 +109,7 @@ test("should have the expected 'data-' attributes", () => {
 
   expect(screen.getByTestId("divider")).toHaveAttribute(
     "data-component",
-    "menu-divider"
+    "menu-divider",
   );
   expect(screen.getByTestId("divider")).toHaveAttribute("data-element", "foo");
   expect(screen.getByTestId("divider")).toHaveAttribute("data-role", "divider");
diff --git a/src/components/menu/menu-full-screen/menu-full-screen.component.tsx b/src/components/menu/menu-full-screen/menu-full-screen.component.tsx
index 3b9594dab2..6ba6273797 100644
--- a/src/components/menu/menu-full-screen/menu-full-screen.component.tsx
+++ b/src/components/menu/menu-full-screen/menu-full-screen.component.tsx
@@ -34,7 +34,7 @@ export interface MenuFullscreenProps extends Omit<TagProps, "data-component"> {
     ev:
       | React.KeyboardEvent<HTMLButtonElement>
       | React.MouseEvent<HTMLButtonElement>
-      | KeyboardEvent
+      | KeyboardEvent,
   ) => void;
   /** Manually override the internal modal stacking order to set this as top */
   topModalOverride?: boolean;
@@ -72,7 +72,7 @@ export const MenuFullscreen = ({
       }
 
       return child;
-    })
+    }),
   );
 
   const closeModal = useCallback(
@@ -83,7 +83,7 @@ export const MenuFullscreen = ({
         onClose(ev);
       }
     },
-    [onClose]
+    [onClose],
   );
 
   useModalManager({
diff --git a/src/components/menu/menu-full-screen/menu-full-screen.test.tsx b/src/components/menu/menu-full-screen/menu-full-screen.test.tsx
index d56b1bb8ba..fae196c155 100644
--- a/src/components/menu/menu-full-screen/menu-full-screen.test.tsx
+++ b/src/components/menu/menu-full-screen/menu-full-screen.test.tsx
@@ -24,7 +24,7 @@ test("should not render the menu when `isOpen` is falsy", () => {
           <MenuItem href="#">Item one</MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
@@ -48,7 +48,7 @@ test("should have the expected `data-` tags when menu is open", () => {
           onClose={() => {}}
         />
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const menu = screen.getByRole("dialog");
 
@@ -70,7 +70,7 @@ test("should have the expected ARIA properties when menu is open", () => {
       >
         <MenuFullscreen isOpen onClose={() => {}} aria-label="My menu" />
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const menu = screen.getByRole("dialog");
 
@@ -124,7 +124,7 @@ test("should render the children with the expected divider elements added", () =
           </MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getAllByRole("link")).toHaveLength(10);
@@ -178,7 +178,7 @@ test("should set any `maxWidth` values passed to items to undefined", () => {
           </MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const items = screen.getAllByRole("listitem");
 
@@ -202,7 +202,7 @@ test("should apply the expected color to the close icon when `menuType` is 'ligh
           <MenuItem href="#">Item one</MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const closeButton = screen.getByRole("button", { name: "Close" });
   const closeButtonIcon = within(closeButton).getByTestId("icon");
@@ -225,7 +225,7 @@ test("should apply the expected color to the close icon when `menuType` is 'dark
           <MenuItem href="#">Item one</MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const closeButton = screen.getByRole("button", { name: "Close" });
   const closeButtonIcon = within(closeButton).getByTestId("icon");
@@ -248,7 +248,7 @@ test("should apply the expected color to the close icon when `menuType` is 'whit
           <MenuItem href="#">Item one</MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const closeButton = screen.getByRole("button", { name: "Close" });
   const closeButtonIcon = within(closeButton).getByTestId("icon");
@@ -271,7 +271,7 @@ test("should apply the expected color to the close icon when `menuType` is 'blac
           <MenuItem href="#">Item one</MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const closeButton = screen.getByRole("button", { name: "Close" });
   const closeButtonIcon = within(closeButton).getByTestId("icon");
@@ -296,7 +296,7 @@ test("should call the passed `onClose` callback when the close button is clicked
           <MenuItem href="#">Item 1</MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   await user.click(screen.getByRole("button", { name: "Close" }));
 
@@ -320,7 +320,7 @@ test("should call the passed `onClose` callback when the 'Escape' key is pressed
           <MenuItem href="#">Item 1</MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   await user.keyboard("{Escape}");
 
@@ -346,7 +346,7 @@ test("should call the passed `onClick` callback when the menu item is clicked",
           </MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   await user.click(screen.getByRole("link"));
 
@@ -372,7 +372,7 @@ test("should call the passed `onClick` callback when the submenu item is clicked
           </MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   await user.click(screen.getByRole("link", { name: "Submenu" }));
 
@@ -396,7 +396,7 @@ test("should focus the root container, when menu is opened", () => {
           </MenuItem>
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByRole("dialog")).toHaveFocus();
@@ -418,7 +418,7 @@ test("should not render a divider when menu contains a falsy values", () => {
           {false && <MenuItem href="#">Product Item One</MenuItem>}
         </MenuFullscreen>
       </MenuContext.Provider>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.queryByTestId("divider")).not.toBeInTheDocument();
diff --git a/src/components/menu/menu-item/menu-item.component.tsx b/src/components/menu/menu-item/menu-item.component.tsx
index 82e0f54734..6530ab82a1 100644
--- a/src/components/menu/menu-item/menu-item.component.tsx
+++ b/src/components/menu/menu-item/menu-item.component.tsx
@@ -32,7 +32,7 @@ interface MenuItemBaseProps
   onClick?: (
     event:
       | React.MouseEvent<HTMLAnchorElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => void;
   /** Defines which direction the submenu will hang eg. left/right */
   submenuDirection?: string;
@@ -46,7 +46,7 @@ interface MenuItemBaseProps
   onKeyDown?: (
     event:
       | React.KeyboardEvent<HTMLAnchorElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** The target to use for the menu item. */
   target?: string;
@@ -123,19 +123,19 @@ export const MenuItem = ({
 }: MenuWithChildren | MenuWithIcon) => {
   invariant(
     icon || children,
-    "Either prop `icon` must be defined or this node must have `children`."
+    "Either prop `icon` must be defined or this node must have `children`.",
   );
 
   invariant(
     children || ariaLabel || typeof submenu === "string",
-    "If no text is provided an `ariaLabel` should be given to facilitate accessibility."
+    "If no text is provided an `ariaLabel` should be given to facilitate accessibility.",
   );
 
   invariant(
     typeof submenu === "boolean" ||
       submenu === undefined ||
       (children && typeof submenu === "string" && submenu.length),
-    "You should not pass `children` when `submenu` is an empty string"
+    "You should not pass `children` when `submenu` is an empty string",
   );
 
   const {
@@ -155,7 +155,7 @@ export const MenuItem = ({
     shiftTabPressed,
   } = submenuContext;
   const ref = useRef<HTMLAnchorElement & HTMLButtonElement & HTMLDivElement>(
-    null
+    null,
   );
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId
@@ -185,7 +185,7 @@ export const MenuItem = ({
 
   useEffect(() => {
     const inputIcon = ref.current?.querySelector(
-      "[data-element='input-icon-toggle']"
+      "[data-element='input-icon-toggle']",
     );
     if (!openSubmenuId && focusFromSubmenu === undefined && focusFromMenu) {
       /* istanbul ignore else */
@@ -226,7 +226,7 @@ export const MenuItem = ({
       }
 
       const inputIcon = ref.current?.querySelector(
-        "[data-element='input-icon-toggle']"
+        "[data-element='input-icon-toggle']",
       );
 
       const shouldFocusIcon =
@@ -247,7 +247,7 @@ export const MenuItem = ({
         handleSubmenuKeyDown(event);
       }
     },
-    [onKeyDown, handleSubmenuKeyDown]
+    [onKeyDown, handleSubmenuKeyDown],
   );
 
   const elementProps = {
diff --git a/src/components/menu/menu-item/menu-item.stories.tsx b/src/components/menu/menu-item/menu-item.stories.tsx
index 1b3f1e0520..4937f22b2c 100644
--- a/src/components/menu/menu-item/menu-item.stories.tsx
+++ b/src/components/menu/menu-item/menu-item.stories.tsx
@@ -24,7 +24,7 @@ const styledSystemProps = generateStyledSystemProps(
     "overflowX",
     "overflow",
     "verticalAlign",
-  ]
+  ],
 );
 
 const meta: Meta<typeof MenuItem> = {
diff --git a/src/components/menu/menu-item/menu-item.test.tsx b/src/components/menu/menu-item/menu-item.test.tsx
index 807e3a453f..f1ae5451d2 100644
--- a/src/components/menu/menu-item/menu-item.test.tsx
+++ b/src/components/menu/menu-item/menu-item.test.tsx
@@ -32,7 +32,7 @@ describe("When MenuItem has no submenu", () => {
     ),
     () => screen.getByTestId("menu-item-wrapper"),
     undefined,
-    { modifier: "&&& > a" }
+    { modifier: "&&& > a" },
   );
 
   testStyledSystemFlexBox(
@@ -41,7 +41,7 @@ describe("When MenuItem has no submenu", () => {
         Foo
       </MenuItem>
     ),
-    () => screen.getByRole("listitem")
+    () => screen.getByRole("listitem"),
   );
 
   it("should apply the expected styling when `width` prop passed", () => {
@@ -84,7 +84,7 @@ describe("When MenuItem has no submenu", () => {
     render(<MenuItem onClick={() => {}}>Item One</MenuItem>);
 
     expect(
-      screen.getByRole("button", { name: "Item One" })
+      screen.getByRole("button", { name: "Item One" }),
     ).toBeInTheDocument();
   });
 
@@ -92,7 +92,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuItem onClick={() => {}} href="#">
         Item One
-      </MenuItem>
+      </MenuItem>,
     );
 
     expect(screen.getByRole("link", { name: "Item One" })).toBeInTheDocument();
@@ -102,7 +102,7 @@ describe("When MenuItem has no submenu", () => {
     render(<MenuItem href="#">Item One</MenuItem>);
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveClass(
-      "carbon-menu-item--has-link"
+      "carbon-menu-item--has-link",
     );
   });
 
@@ -110,7 +110,7 @@ describe("When MenuItem has no submenu", () => {
     render(<MenuItem onClick={() => {}}>Item One</MenuItem>);
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveClass(
-      "carbon-menu-item--has-link"
+      "carbon-menu-item--has-link",
     );
   });
 
@@ -119,7 +119,7 @@ describe("When MenuItem has no submenu", () => {
 
     expect(screen.getByRole("listitem", { name: "Item One" })).toHaveAttribute(
       "title",
-      "Item One"
+      "Item One",
     );
   });
 
@@ -127,7 +127,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuItem href="#" maxWidth="100px">
         Item One
-      </MenuItem>
+      </MenuItem>,
     );
 
     expect(screen.getByRole("link", { name: "Item One" })).toHaveStyle({
@@ -143,7 +143,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "light" }}>
         <MenuItem>Item One</MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveStyle({
@@ -155,7 +155,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "white" }}>
         <MenuItem>Item One</MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveStyle({
@@ -167,7 +167,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "dark" }}>
         <MenuItem>Item One</MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveStyle({
@@ -179,7 +179,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "black" }}>
         <MenuItem>Item One</MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveStyle({
@@ -195,7 +195,7 @@ describe("When MenuItem has no submenu", () => {
             <Icon type="home" />
           </IconButton>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByTestId("icon")).toHaveStyle({
@@ -208,7 +208,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
         <MenuItem selected>Item One</MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveStyle({
@@ -220,7 +220,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "white" }}>
         <MenuItem selected>Item One</MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveStyle({
@@ -232,7 +232,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "dark" }}>
         <MenuItem selected>Item One</MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveStyle({
@@ -244,7 +244,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuContext.Provider value={{ ...menuContextValues, menuType: "black" }}>
         <MenuItem selected>Item One</MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveStyle({
@@ -259,7 +259,7 @@ describe("When MenuItem has no submenu", () => {
         <MenuItem href="#" onKeyDown={onKeyDown}>
           Item One
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const item = screen.getByRole("link", { name: "Item One" });
     fireEvent.keyDown(item, {
@@ -274,12 +274,12 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuItem icon="settings" href="#" ariaLabel="Item One">
         Item One
-      </MenuItem>
+      </MenuItem>,
     );
 
     expect(screen.getByRole("link", { name: "Item One" })).toHaveAttribute(
       "aria-label",
-      "Item One"
+      "Item One",
     );
     expect(screen.getByTestId("icon")).not.toHaveAttribute("aria-label");
   });
@@ -288,12 +288,12 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuItem icon="settings" onClick={() => {}} ariaLabel="Item One">
         Item One
-      </MenuItem>
+      </MenuItem>,
     );
 
     expect(screen.getByRole("button", { name: "Item One" })).toHaveAttribute(
       "aria-label",
-      "Item One"
+      "Item One",
     );
     expect(screen.getByTestId("icon")).not.toHaveAttribute("aria-label");
   });
@@ -306,7 +306,7 @@ describe("When MenuItem has no submenu", () => {
     expect(() => {
       render(<MenuItem icon="settings" />);
     }).toThrow(
-      "If no text is provided an `ariaLabel` should be given to facilitate accessibility."
+      "If no text is provided an `ariaLabel` should be given to facilitate accessibility.",
     );
 
     consoleSpy.mockRestore();
@@ -320,7 +320,7 @@ describe("When MenuItem has no submenu", () => {
     expect(() => {
       render(<MenuItem ariaLabel="a" />);
     }).toThrow(
-      "Either prop `icon` must be defined or this node must have `children`."
+      "Either prop `icon` must be defined or this node must have `children`.",
     );
 
     consoleSpy.mockRestore();
@@ -333,7 +333,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuItem href={href} target={target} rel={rel}>
         Item One
-      </MenuItem>
+      </MenuItem>,
     );
     const anchor = screen.getByRole("link", { name: "Item One" });
 
@@ -346,7 +346,7 @@ describe("When MenuItem has no submenu", () => {
     render(
       <MenuItem data-element="bar" data-role="baz">
         Item One
-      </MenuItem>
+      </MenuItem>,
     );
     const item = screen.getByRole("listitem");
 
@@ -361,7 +361,7 @@ describe("When MenuItem has no submenu", () => {
         <MenuItem overrideColor variant="alternate">
           Item One
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByTestId("menu-item-wrapper")).toHaveStyle({
@@ -376,13 +376,13 @@ describe("when MenuItem has a submenu", () => {
     render(
       <MenuItem href="#" submenu="submenu" px="5px">
         <MenuItem>foo</MenuItem>
-      </MenuItem>
+      </MenuItem>,
     );
 
     expect(screen.getByTestId("submenu-parent-item")).toHaveStyleRule(
       "right",
       "5px",
-      { modifier: "a::before" }
+      { modifier: "a::before" },
     );
   });
 
@@ -390,13 +390,13 @@ describe("when MenuItem has a submenu", () => {
     render(
       <MenuItem href="#" submenu="submenu">
         <MenuItem>foo</MenuItem>
-      </MenuItem>
+      </MenuItem>,
     );
 
     expect(screen.getByTestId("submenu-parent-item")).toHaveStyleRule(
       "right",
       "var(--spacing200)",
-      { modifier: "a::before" }
+      { modifier: "a::before" },
     );
   });
 
@@ -404,13 +404,13 @@ describe("when MenuItem has a submenu", () => {
     render(
       <MenuItem href="#" submenu="submenu" px={0}>
         <MenuItem>foo</MenuItem>
-      </MenuItem>
+      </MenuItem>,
     );
 
     expect(screen.getByTestId("submenu-parent-item")).toHaveStyleRule(
       "right",
       "2px",
-      { modifier: "a::before" }
+      { modifier: "a::before" },
     );
   });
 
@@ -418,13 +418,13 @@ describe("when MenuItem has a submenu", () => {
     render(
       <MenuItem href="#" submenu="submenu" px={1}>
         <MenuItem>foo</MenuItem>
-      </MenuItem>
+      </MenuItem>,
     );
 
     expect(screen.getByTestId("submenu-parent-item")).toHaveStyleRule(
       "right",
       "var(--spacing100)",
-      { modifier: "a::before" }
+      { modifier: "a::before" },
     );
   });
 
@@ -434,15 +434,15 @@ describe("when MenuItem has a submenu", () => {
       render(
         <MenuItem href="#" submenu="submenu" px={padding}>
           <MenuItem>foo</MenuItem>
-        </MenuItem>
+        </MenuItem>,
       );
 
       expect(screen.getByTestId("submenu-parent-item")).toHaveStyleRule(
         "right",
         `var(--spacing${padding}00)`,
-        { modifier: "a::before" }
+        { modifier: "a::before" },
       );
-    }
+    },
   );
   /** END OF TESTS ADDED FOR CODE COVERAGE */
 
@@ -452,16 +452,16 @@ describe("when MenuItem has a submenu", () => {
         <MenuItem submenu="Item One">
           <MenuItem>Submenu Item One</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenu = screen.getByTestId("submenu-wrapper");
 
     expect(submenu).toBeInTheDocument();
     expect(
-      within(submenu).getByRole("button", { name: "Item One" })
+      within(submenu).getByRole("button", { name: "Item One" }),
     ).toBeInTheDocument();
     expect(
-      within(submenu).queryByRole("link", { name: "Submenu Item One" })
+      within(submenu).queryByRole("link", { name: "Submenu Item One" }),
     ).not.toBeInTheDocument();
   });
 
@@ -474,7 +474,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -501,7 +501,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -526,7 +526,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -553,7 +553,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -576,7 +576,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -601,7 +601,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -635,7 +635,7 @@ describe("when MenuItem has a submenu", () => {
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -660,7 +660,7 @@ describe("when MenuItem has a submenu", () => {
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -686,7 +686,7 @@ describe("when MenuItem has a submenu", () => {
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -711,7 +711,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("link", { name: "Item One" });
     submenuParentItem.focus();
@@ -719,7 +719,7 @@ describe("when MenuItem has a submenu", () => {
     await user.tab();
 
     expect(
-      screen.getByRole("link", { name: "Submenu Item One" })
+      screen.getByRole("link", { name: "Submenu Item One" }),
     ).toHaveFocus();
   });
 
@@ -732,7 +732,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("link", { name: "Item One" });
     submenuParentItem.focus();
@@ -752,7 +752,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     await user.click(submenuParentItem);
@@ -769,7 +769,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("link", { name: "Item One" });
     await user.click(submenuParentItem);
@@ -790,7 +790,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("link", { name: "Item One" });
     await user.click(submenuParentItem);
@@ -811,7 +811,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     await user.click(submenuParentItem);
@@ -831,7 +831,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     await user.click(submenuParentItem);
@@ -851,7 +851,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     await user.click(submenuParentItem);
@@ -871,7 +871,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     await user.click(submenuParentItem);
@@ -893,7 +893,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem href="#">Submenu Item Two</MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -913,7 +913,7 @@ describe("when MenuItem has a submenu", () => {
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -937,7 +937,7 @@ describe("when MenuItem has a submenu", () => {
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -964,7 +964,7 @@ describe("when MenuItem has a submenu", () => {
           </MenuItem>
           <MenuItem href="#">Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("button", { name: "Item One" });
     submenuParentItem.focus();
@@ -986,7 +986,7 @@ describe("when MenuItem has a submenu", () => {
             {true && <MenuItem>One</MenuItem>}
             {false && <MenuItem>Two</MenuItem>}
           </MenuItem>
-        </MenuContext.Provider>
+        </MenuContext.Provider>,
       );
     }).not.toThrow();
   });
@@ -1000,7 +1000,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem onClick={() => {}}>Submenu Item Two</MenuItem>
           <MenuItem onClick={() => {}}>Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const submenuParentItem = screen.getByRole("link", { name: "Item One" });
     submenuParentItem.focus();
@@ -1018,7 +1018,7 @@ describe("when MenuItem has a submenu", () => {
         <SubmenuContext.Provider value={{ handleKeyDown }}>
           <MenuItem href="#">Item One</MenuItem>
         </SubmenuContext.Provider>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
     const item = screen.getByRole("link", { name: "Item One" });
     fireEvent.keyDown(item, { key: "ArrowDown", code: "ArrowDown" });
@@ -1034,7 +1034,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem>Submenu Item Two</MenuItem>
           <MenuItem>Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByRole("button", { name: "Item One" })).toHaveStyle({
@@ -1050,7 +1050,7 @@ describe("when MenuItem has a submenu", () => {
           <MenuItem>Submenu Item Two</MenuItem>
           <MenuItem>Submenu Item Three</MenuItem>
         </MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
 
     expect(screen.getByRole("button", { name: "Item One" })).toHaveStyle({
@@ -1068,10 +1068,10 @@ test("should throw when `children` passed and `submenu` is an empty string", ()
     render(
       <MenuContext.Provider value={{ ...menuContextValues }}>
         <MenuItem submenu="">Item One</MenuItem>
-      </MenuContext.Provider>
+      </MenuContext.Provider>,
     );
   }).toThrow(
-    "You should not pass `children` when `submenu` is an empty string"
+    "You should not pass `children` when `submenu` is an empty string",
   );
 
   consoleSpy.mockRestore();
diff --git a/src/components/menu/menu-segment-title/menu-segment-title.component.tsx b/src/components/menu/menu-segment-title/menu-segment-title.component.tsx
index 09e170d283..d591a876de 100644
--- a/src/components/menu/menu-segment-title/menu-segment-title.component.tsx
+++ b/src/components/menu/menu-segment-title/menu-segment-title.component.tsx
@@ -10,7 +10,7 @@ import SubmenuContext from "../__internal__/submenu/submenu.context";
 
 const AS_VALUES = ["h2", "h3", "h4", "h5", "h6"] as const;
 
-type AllowedAsValues = typeof AS_VALUES[number];
+type AllowedAsValues = (typeof AS_VALUES)[number];
 export interface MenuTitleProps extends TagProps {
   children?: React.ReactNode;
   text: string;
@@ -23,7 +23,7 @@ export interface MenuTitleProps extends TagProps {
 const MenuSegmentTitle = React.forwardRef<HTMLDivElement, MenuTitleProps>(
   (
     { children, variant = "default", text, as = "h2", ...rest }: MenuTitleProps,
-    ref
+    ref,
   ) => {
     const menuContext = useContext(MenuContext);
     const { submenuHasMaxWidth } = useContext(SubmenuContext);
@@ -47,7 +47,7 @@ const MenuSegmentTitle = React.forwardRef<HTMLDivElement, MenuTitleProps>(
         )}
       </StyledMenuItem>
     );
-  }
+  },
 );
 
 MenuSegmentTitle.displayName = "MenuSegmentTitle";
diff --git a/src/components/menu/menu-segment-title/menu-segment-title.test.tsx b/src/components/menu/menu-segment-title/menu-segment-title.test.tsx
index 909a32e185..568c5033e1 100644
--- a/src/components/menu/menu-segment-title/menu-segment-title.test.tsx
+++ b/src/components/menu/menu-segment-title/menu-segment-title.test.tsx
@@ -29,7 +29,7 @@ test("should render with correct colour when 'light' `menuType` received from co
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -51,7 +51,7 @@ test("should render with correct colour when 'dark' `menuType` received from con
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -73,7 +73,7 @@ test("should render with correct colour when 'white' `menuType` received from co
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -95,7 +95,7 @@ test("should render with correct colour when 'black' `menuType` received from co
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -116,14 +116,14 @@ test("should render title as an h2 heading element by default and render list it
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
   const segmentList = screen.getByTestId("menu-segment-children");
 
   expect(
-    screen.getByRole("heading", { level: 2, name: "Title" })
+    screen.getByRole("heading", { level: 2, name: "Title" }),
   ).toBeVisible();
   expect(segmentList).toContainElement(screen.getByText("bar"));
 });
@@ -139,14 +139,14 @@ test("should render title `as` an 'h2' heading element and render list items as
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
   const segmentList = screen.getByTestId("menu-segment-children");
 
   expect(
-    screen.getByRole("heading", { level: 2, name: "Title" })
+    screen.getByRole("heading", { level: 2, name: "Title" }),
   ).toBeVisible();
   expect(segmentList).toContainElement(screen.getByText("bar"));
 });
@@ -162,14 +162,14 @@ test("should render title `as` an 'h3' heading element and render list items as
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
   const segmentList = screen.getByTestId("menu-segment-children");
 
   expect(
-    screen.getByRole("heading", { level: 3, name: "Title" })
+    screen.getByRole("heading", { level: 3, name: "Title" }),
   ).toBeVisible();
   expect(segmentList).toContainElement(screen.getByText("bar"));
 });
@@ -185,14 +185,14 @@ test("should render title `as` an 'h4' heading element and render list items as
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
   const segmentList = screen.getByTestId("menu-segment-children");
 
   expect(
-    screen.getByRole("heading", { level: 4, name: "Title" })
+    screen.getByRole("heading", { level: 4, name: "Title" }),
   ).toBeVisible();
   expect(segmentList).toContainElement(screen.getByText("bar"));
 });
@@ -208,14 +208,14 @@ test("should render title `as` an 'h5' heading element and render list items as
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
   const segmentList = screen.getByTestId("menu-segment-children");
 
   expect(
-    screen.getByRole("heading", { level: 5, name: "Title" })
+    screen.getByRole("heading", { level: 5, name: "Title" }),
   ).toBeVisible();
   expect(segmentList).toContainElement(screen.getByText("bar"));
 });
@@ -231,14 +231,14 @@ test("should render title `as` an 'h6' heading element and render list items as
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
   const segmentList = screen.getByTestId("menu-segment-children");
 
   expect(
-    screen.getByRole("heading", { level: 6, name: "Title" })
+    screen.getByRole("heading", { level: 6, name: "Title" }),
   ).toBeVisible();
   expect(segmentList).toContainElement(screen.getByText("bar"));
 });
@@ -255,7 +255,7 @@ test("should render title with expected styling when `variant` is 'alternate' an
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -277,7 +277,7 @@ test("should render title with expected styling when `variant` is 'alternate' an
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -299,7 +299,7 @@ test("should render title with expected styling when `variant` is 'alternate' an
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -321,7 +321,7 @@ test("should render title with expected styling when `variant` is 'alternate' an
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   await user.click(screen.getByText("Item One"));
@@ -335,12 +335,12 @@ test("should apply expected `data-` attributes", () => {
   render(
     <MenuSegmentTitle text="foo" data-element="bar" data-role="baz">
       <li>bar</li>
-    </MenuSegmentTitle>
+    </MenuSegmentTitle>,
   );
 
   expect(screen.getByText("foo")).toHaveAttribute(
     "data-component",
-    "menu-segment-title"
+    "menu-segment-title",
   );
   expect(screen.getByText("foo")).toHaveAttribute("data-element", "bar");
   expect(screen.getByText("foo")).toHaveAttribute("data-role", "baz");
@@ -357,12 +357,12 @@ test("should not wrap when the submenu parent has no max-width set", async () =>
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   await user.click(screen.getByText("Item One"));
 
   expect(
-    await screen.findByRole("heading", { level: 2, name: "Title" })
+    await screen.findByRole("heading", { level: 2, name: "Title" }),
   ).toHaveStyle("white-space: nowrap");
 });
 
@@ -377,11 +377,11 @@ test("should wrap when the submenu parent has a max-width set", async () => {
           </MenuSegmentTitle>
         </MenuItem>
       </ul>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   await user.click(screen.getByText("Item One"));
 
   expect(
-    await screen.findByRole("heading", { level: 2, name: "Title" })
+    await screen.findByRole("heading", { level: 2, name: "Title" }),
   ).toHaveStyle("white-space: normal");
 });
diff --git a/src/components/menu/menu-test.stories.tsx b/src/components/menu/menu-test.stories.tsx
index dde7a895c9..18cb7590f9 100644
--- a/src/components/menu/menu-test.stories.tsx
+++ b/src/components/menu/menu-test.stories.tsx
@@ -80,7 +80,7 @@ export const MenuFullScreenStory = ({
     ev:
       | React.KeyboardEvent<HTMLButtonElement>
       | React.MouseEvent<HTMLButtonElement>
-      | KeyboardEvent
+      | KeyboardEvent,
   ) => {
     setIsOpen(false);
     action("close icon clicked")(ev);
diff --git a/src/components/menu/menu.component.tsx b/src/components/menu/menu.component.tsx
index a7789a9d39..f5a61e0338 100644
--- a/src/components/menu/menu.component.tsx
+++ b/src/components/menu/menu.component.tsx
@@ -47,14 +47,14 @@ export const Menu = ({ menuType = "light", children, ...rest }: MenuProps) => {
     /* istanbul ignore else */
     if (ref.current) {
       const focusableItems = ref.current.querySelectorAll(
-        MENU_ITEM_CHILDREN_LOCATOR
+        MENU_ITEM_CHILDREN_LOCATOR,
       );
 
       /* istanbul ignore else */
       if (focusableItems) {
         const newIndex = menuKeyboardNavigation(
           event,
-          Array.from(focusableItems)
+          Array.from(focusableItems),
         );
 
         /* istanbul ignore else */
diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx
index 8b9323edb3..63ba21ca29 100644
--- a/src/components/menu/menu.pw.tsx
+++ b/src/components/menu/menu.pw.tsx
@@ -207,22 +207,24 @@ test.describe("Prop tests for Menu component", () => {
     for (let i = 0; i < position.length; i++) {
       await expect(innerMenu(page, position[i], span).first()).toHaveAttribute(
         "data-component",
-        "link"
+        "link",
       );
     }
     const menuItemDivider = innerMenu(page, 3, div).first();
     await expect(menuItemDivider).toHaveAttribute(
       "data-component",
-      "menu-divider"
+      "menu-divider",
     );
   });
 
-  ([
-    ["white", "rgb(230, 235, 237)", 0],
-    ["light", "rgb(255, 255, 255)", 2],
-    ["dark", "rgb(0, 25, 38)", 4],
-    ["black", "rgb(38, 38, 38)", 6],
-  ] as [string, string, number][]).forEach(([colorName, color, menuNumber]) => {
+  (
+    [
+      ["white", "rgb(230, 235, 237)", 0],
+      ["light", "rgb(255, 255, 255)", 2],
+      ["dark", "rgb(0, 25, 38)", 4],
+      ["black", "rgb(38, 38, 38)", 6],
+    ] as [string, string, number][]
+  ).forEach(([colorName, color, menuNumber]) => {
     test(`should verify the ${menuNumber}th submenu background color is ${colorName}`, async ({
       mount,
       page,
@@ -236,12 +238,14 @@ test.describe("Prop tests for Menu component", () => {
     });
   });
 
-  ([
-    ["white", "rgb(255, 255, 255)", 0],
-    ["light", "rgb(230, 235, 237)", 4],
-    ["dark", "rgb(0, 50, 76)", 8],
-    ["black", "rgb(0, 0, 0)", 12],
-  ] as [string, string, number][]).forEach(([colorName, color, menuNumber]) => {
+  (
+    [
+      ["white", "rgb(255, 255, 255)", 0],
+      ["light", "rgb(230, 235, 237)", 4],
+      ["dark", "rgb(0, 50, 76)", 8],
+      ["black", "rgb(0, 0, 0)", 12],
+    ] as [string, string, number][]
+  ).forEach(([colorName, color, menuNumber]) => {
     test(`should verify the ${menuNumber}th menu background color is ${colorName}`, async ({
       mount,
       page,
@@ -253,12 +257,14 @@ test.describe("Prop tests for Menu component", () => {
     });
   });
 
-  ([
-    ["white", "rgba(0, 0, 0, 0.9)"],
-    ["light", "rgba(0, 0, 0, 0.9)"],
-    ["dark", "rgb(255, 255, 255)"],
-    ["black", "rgb(255, 255, 255)"],
-  ] as [MenuProps["menuType"], string][]).forEach(([menuType, color]) => {
+  (
+    [
+      ["white", "rgba(0, 0, 0, 0.9)"],
+      ["light", "rgba(0, 0, 0, 0.9)"],
+      ["dark", "rgb(255, 255, 255)"],
+      ["black", "rgb(255, 255, 255)"],
+    ] as [MenuProps["menuType"], string][]
+  ).forEach(([menuType, color]) => {
     test(`should verify icon color is ${color} when menuType prop is ${menuType}`, async ({
       mount,
       page,
@@ -268,7 +274,7 @@ test.describe("Prop tests for Menu component", () => {
           <MenuItem onClick={() => {}} icon="home">
             Foo
           </MenuItem>
-        </Menu>
+        </Menu>,
       );
 
       await page.keyboard.press("Tab");
@@ -276,10 +282,12 @@ test.describe("Prop tests for Menu component", () => {
     });
   });
 
-  ([
-    ["default", 1],
-    ["large", 4],
-  ] as [MenuDividerProps["size"], number][]).forEach(([size, height]) => {
+  (
+    [
+      ["default", 1],
+      ["large", 4],
+    ] as [MenuDividerProps["size"], number][]
+  ).forEach(([size, height]) => {
     test(`should verify Menu Divider has the proper height when the size is ${size}`, async ({
       mount,
       page,
@@ -331,11 +339,11 @@ test.describe("Prop tests for Menu component", () => {
     await expect(subMenuBlock).toHaveCount(2);
     await expect(innerMenu(page, 1, span).first()).toHaveAttribute(
       "data-component",
-      "link"
+      "link",
     );
     await expect(innerMenu(page, 2, span).first()).toHaveAttribute(
       "data-component",
-      "link"
+      "link",
     );
   });
 
@@ -354,19 +362,21 @@ test.describe("Prop tests for Menu component", () => {
       await expect(subMenuBlock).toHaveCount(2);
       await expect(innerMenu(page, 1, span).first()).toHaveAttribute(
         "data-component",
-        "link"
+        "link",
       );
       await expect(innerMenu(page, 2, span).first()).toHaveAttribute(
         "data-component",
-        "link"
+        "link",
       );
     });
   });
 
-  ([
-    ["ArrowDown", 0],
-    ["ArrowUp", 2],
-  ] as [string, number][]).forEach(([key, tabs]) => {
+  (
+    [
+      ["ArrowDown", 0],
+      ["ArrowUp", 2],
+    ] as [string, number][]
+  ).forEach(([key, tabs]) => {
     test(`should verify the Search component is focusable by pressing the ${key} key`, async ({
       mount,
       page,
@@ -509,14 +519,14 @@ test.describe("Prop tests for Menu component", () => {
             </MenuItem>
           </MenuItem>
         </Menu>
-      </Box>
+      </Box>,
     );
 
     const subMenu = submenu(page).first();
     await subMenu.hover();
     const subMenuBlock = innerMenu(page, 2, span).first();
     const cssWidth = await subMenuBlock.evaluate((el) =>
-      window.getComputedStyle(el).getPropertyValue("width")
+      window.getComputedStyle(el).getPropertyValue("width"),
     );
     expect(parseInt(cssWidth)).toBeLessThanOrEqual(395);
     expect(parseInt(cssWidth)).toBeGreaterThanOrEqual(385);
@@ -532,23 +542,25 @@ test.describe("Prop tests for Menu component", () => {
     await subMenu.hover();
     const subMenuBlock = innerMenu(page, 2, span).first();
     const cssWidth = await subMenuBlock.evaluate((el) =>
-      window.getComputedStyle(el).getPropertyValue("width")
+      window.getComputedStyle(el).getPropertyValue("width"),
     );
     expect(parseInt(cssWidth)).toBeLessThanOrEqual(500);
     expect(parseInt(cssWidth)).toBeGreaterThanOrEqual(490);
   });
 
-  ([
-    ["float", 0.3, 409],
-    ["float", 0.6, 819],
-    ["float", 1.0, 1366],
-    ["number", 350, 350],
-    ["number", 900, 900],
-    ["number", 1350, 1350],
-    ["string", "450px", 450],
-    ["string", "675px", 675],
-    ["string", "1200px", 1200],
-  ] as [string, number | string, number][]).forEach(([type, width, pixels]) => {
+  (
+    [
+      ["float", 0.3, 409],
+      ["float", 0.6, 819],
+      ["float", 1.0, 1366],
+      ["number", 350, 350],
+      ["number", 900, 900],
+      ["number", 1350, 1350],
+      ["string", "450px", 450],
+      ["string", "675px", 675],
+      ["string", "1200px", 1200],
+    ] as [string, number | string, number][]
+  ).forEach(([type, width, pixels]) => {
     test(`should render with width set to ${pixels}px when prop is passed as a ${type}`, async ({
       mount,
       page,
@@ -560,43 +572,43 @@ test.describe("Prop tests for Menu component", () => {
     });
   });
 
-  ([
-    ["number", 810, 350, 810],
-    ["number", 810, 1350, 1350],
-    ["string", "700px", "300px", 700],
-    ["string", "700px", "1200px", 1200],
-  ] as [string, string | number, string | number, number][]).forEach(
-    ([type, minWidth, width, pixels]) => {
-      test(`should render with minimum width of ${pixels}px when minWidth prop is passed as a ${type}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponent minWidth={minWidth} width={width} />);
+  (
+    [
+      ["number", 810, 350, 810],
+      ["number", 810, 1350, 1350],
+      ["string", "700px", "300px", 700],
+      ["string", "700px", "1200px", 1200],
+    ] as [string, string | number, string | number, number][]
+  ).forEach(([type, minWidth, width, pixels]) => {
+    test(`should render with minimum width of ${pixels}px when minWidth prop is passed as a ${type}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MenuComponent minWidth={minWidth} width={width} />);
 
-        const thisMenu = menu(page).first();
-        await assertCssValueIsApproximately(thisMenu, "width", pixels);
-      });
-    }
-  );
+      const thisMenu = menu(page).first();
+      await assertCssValueIsApproximately(thisMenu, "width", pixels);
+    });
+  });
 
-  ([
-    ["number", 810, 350, 350],
-    ["number", 810, 1350, 810],
-    ["string", "700px", "300px", 300],
-    ["string", "700px", "1200px", 700],
-  ] as [string, string | number, string | number, number][]).forEach(
-    ([type, maxWidth, width, pixels]) => {
-      test(`should render with maximum width of ${pixels}px when maxWidth prop is passed as a ${type}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponent maxWidth={maxWidth} width={width} />);
+  (
+    [
+      ["number", 810, 350, 350],
+      ["number", 810, 1350, 810],
+      ["string", "700px", "300px", 300],
+      ["string", "700px", "1200px", 700],
+    ] as [string, string | number, string | number, number][]
+  ).forEach(([type, maxWidth, width, pixels]) => {
+    test(`should render with maximum width of ${pixels}px when maxWidth prop is passed as a ${type}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MenuComponent maxWidth={maxWidth} width={width} />);
 
-        const thisMenu = menu(page).first();
-        await assertCssValueIsApproximately(thisMenu, "width", pixels);
-      });
-    }
-  );
+      const thisMenu = menu(page).first();
+      await assertCssValueIsApproximately(thisMenu, "width", pixels);
+    });
+  });
 
   [
     "baseline",
@@ -632,13 +644,9 @@ test.describe("Prop tests for Menu component", () => {
     });
   });
 
-  ([
-    "auto",
-    "clip",
-    "hidden",
-    "scroll",
-    "visible",
-  ] as MenuProps["overflowX"][]).forEach((overflow) => {
+  (
+    ["auto", "clip", "hidden", "scroll", "visible"] as MenuProps["overflowX"][]
+  ).forEach((overflow) => {
     test(`should render with overflowX as ${overflow}`, async ({
       mount,
       page,
@@ -661,7 +669,7 @@ test.describe("Prop tests for Menu component", () => {
         const thisMenu = menu(page).first();
         await expect(thisMenu).toHaveCSS("align-items", alignment);
       });
-    }
+    },
   );
 
   [
@@ -738,15 +746,17 @@ test.describe("Prop tests for Menu component", () => {
         const thisMenu = menu(page).first();
         await expect(thisMenu).toHaveCSS("flex-wrap", wrap as string);
       });
-    }
+    },
   );
 
-  ([
-    "column",
-    "column-reverse",
-    "row",
-    "row-reverse",
-  ] as MenuProps["flexDirection"][]).forEach((direction) => {
+  (
+    [
+      "column",
+      "column-reverse",
+      "row",
+      "row-reverse",
+    ] as MenuProps["flexDirection"][]
+  ).forEach((direction) => {
     test(`should render with flexDirection as ${direction}`, async ({
       mount,
       page,
@@ -766,14 +776,16 @@ test.describe("Prop tests for Menu component", () => {
         const thisMenu = menu(page).first();
         await expect(thisMenu).toHaveCSS("flex-basis", flex);
       });
-    }
+    },
   );
 
-  ([
-    [10, "10"],
-    [50, "50"],
-    [100, "100"],
-  ] as [MenuProps["flexGrow"], string][]).forEach(([value, growText]) => {
+  (
+    [
+      [10, "10"],
+      [50, "50"],
+      [100, "100"],
+    ] as [MenuProps["flexGrow"], string][]
+  ).forEach(([value, growText]) => {
     test(`should render with flexGrow as ${value}`, async ({ mount, page }) => {
       await mount(<MenuComponent flex="auto" flexGrow={value} />);
 
@@ -782,11 +794,13 @@ test.describe("Prop tests for Menu component", () => {
     });
   });
 
-  ([
-    [10, "10"],
-    [50, "50"],
-    [100, "100"],
-  ] as [MenuProps["flexShrink"], string][]).forEach(([value, shrinkText]) => {
+  (
+    [
+      [10, "10"],
+      [50, "50"],
+      [100, "100"],
+    ] as [MenuProps["flexShrink"], string][]
+  ).forEach(([value, shrinkText]) => {
     test(`should render with flexShrink as ${value}`, async ({
       mount,
       page,
@@ -809,7 +823,7 @@ test.describe("Prop tests for Menu component", () => {
         const thisMenu = menu(page).first();
         await expect(thisMenu).toHaveCSS("flex-basis", basis);
       });
-    }
+    },
   );
 
   [
@@ -854,11 +868,13 @@ test.describe("Prop tests for Menu component", () => {
     });
   });
 
-  ([
-    [10, "10"],
-    [50, "50"],
-    [100, "100"],
-  ] as [MenuProps["order"], string][]).forEach(([value, orderText]) => {
+  (
+    [
+      [10, "10"],
+      [50, "50"],
+      [100, "100"],
+    ] as [MenuProps["order"], string][]
+  ).forEach(([value, orderText]) => {
     test(`should render with order as ${value}`, async ({ mount, page }) => {
       await mount(<MenuComponent order={value} />);
 
@@ -875,27 +891,27 @@ test.describe("Prop tests for Menu component", () => {
 
     const item = menuItem(page).nth(0);
     const itemClass = await item.evaluate((element) =>
-      element.getAttribute("class")
+      element.getAttribute("class"),
     );
     expect(itemClass).toContain(CHARACTERS.STANDARD);
   });
 
-  ([
-    ["selected", true, "rgb(230, 235, 237)"],
-    ["not selected", false, "rgb(255, 255, 255)"],
-  ] as [string, MenuWithChildren["selected"], string][]).forEach(
-    ([state, boolVal, color]) => {
-      test(`should render with first Menu Item ${state}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponentItems selected={boolVal} />);
+  (
+    [
+      ["selected", true, "rgb(230, 235, 237)"],
+      ["not selected", false, "rgb(255, 255, 255)"],
+    ] as [string, MenuWithChildren["selected"], string][]
+  ).forEach(([state, boolVal, color]) => {
+    test(`should render with first Menu Item ${state}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MenuComponentItems selected={boolVal} />);
 
-        const subMenu = submenu(page).first().locator("span").first();
-        await expect(subMenu).toHaveCSS("background-color", color);
-      });
-    }
-  );
+      const subMenu = submenu(page).first().locator("span").first();
+      await expect(subMenu).toHaveCSS("background-color", color);
+    });
+  });
 
   [
     CHARACTERS.STANDARD,
@@ -923,27 +939,29 @@ test.describe("Prop tests for Menu component", () => {
     await expect(item).toHaveAttribute("target", CHARACTERS.STANDARD);
   });
 
-  ([
-    [true, 32],
-    [false, 16],
-  ] as [MenuWithChildren["showDropdownArrow"], number][]).forEach(
-    ([boolVal, padding]) => {
-      test(`should render with padding of ${padding}px on menu item when showDropdownArrow prop is ${boolVal}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponentItems showDropdownArrow={boolVal} />);
+  (
+    [
+      [true, 32],
+      [false, 16],
+    ] as [MenuWithChildren["showDropdownArrow"], number][]
+  ).forEach(([boolVal, padding]) => {
+    test(`should render with padding of ${padding}px on menu item when showDropdownArrow prop is ${boolVal}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MenuComponentItems showDropdownArrow={boolVal} />);
 
-        const subMenu = submenu(page).first().locator("button");
-        await expect(subMenu).toHaveCSS("padding-right", `${padding}px`);
-      });
-    }
-  );
+      const subMenu = submenu(page).first().locator("button");
+      await expect(subMenu).toHaveCSS("padding-right", `${padding}px`);
+    });
+  });
 
-  ([
-    ["default", "rgb(255, 255, 255)"],
-    ["alternate", "rgb(217, 224, 228)"],
-  ] as [MenuWithChildren["variant"], string][]).forEach(([variant, color]) => {
+  (
+    [
+      ["default", "rgb(255, 255, 255)"],
+      ["alternate", "rgb(217, 224, 228)"],
+    ] as [MenuWithChildren["variant"], string][]
+  ).forEach(([variant, color]) => {
     test(`should render with ${variant} Menu Item variant`, async ({
       mount,
       page,
@@ -965,103 +983,103 @@ test.describe("Prop tests for Menu component", () => {
     await expect(subMenu).toHaveAttribute("aria-label", CHARACTERS.STANDARD);
   });
 
-  ([
-    ["default", 1, 16, 121],
-    ["large", 4, 0, 153],
-  ] as [MenuDividerProps["size"], number, number, number][]).forEach(
-    ([size, height, margin, width]) => {
-      test(`should render with Menu size ${size}`, async ({ mount, page }) => {
-        await mount(
-          <Box mb={150}>
-            <Menu menuType="white">
-              <MenuItem submenu="Menu">
-                <MenuItem href="#">Submenu Item One</MenuItem>
-                <MenuDivider size={size} />
-                <MenuItem href="#">Submenu Item Two</MenuItem>
-              </MenuItem>
-            </Menu>
-          </Box>
-        );
+  (
+    [
+      ["default", 1, 16, 121],
+      ["large", 4, 0, 153],
+    ] as [MenuDividerProps["size"], number, number, number][]
+  ).forEach(([size, height, margin, width]) => {
+    test(`should render with Menu size ${size}`, async ({ mount, page }) => {
+      await mount(
+        <Box mb={150}>
+          <Menu menuType="white">
+            <MenuItem submenu="Menu">
+              <MenuItem href="#">Submenu Item One</MenuItem>
+              <MenuDivider size={size} />
+              <MenuItem href="#">Submenu Item Two</MenuItem>
+            </MenuItem>
+          </Menu>
+        </Box>,
+      );
 
-        const subMenu = submenu(page).first();
-        await subMenu.hover();
-        const divider = menuDivider(page);
-        await assertCssValueIsApproximately(divider, "height", height);
-        await assertCssValueIsApproximately(divider, "margin-left", margin);
-        await assertCssValueIsApproximately(divider, "width", width);
-      });
-    }
-  );
+      const subMenu = submenu(page).first();
+      await subMenu.hover();
+      const divider = menuDivider(page);
+      await assertCssValueIsApproximately(divider, "height", height);
+      await assertCssValueIsApproximately(divider, "margin-left", margin);
+      await assertCssValueIsApproximately(divider, "width", width);
+    });
+  });
 
-  ([
-    [100, 100],
-    [200, 200],
-    ["150px", 150],
-    ["250px", 250],
-  ] as [ScrollableBlockProps["height"], number][]).forEach(
-    ([height, pixels]) => {
-      test(`should render with scroll block height of ${pixels}px when height prop is passed as a number or string`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponentScrollable height={height} />);
+  (
+    [
+      [100, 100],
+      [200, 200],
+      ["150px", 150],
+      ["250px", 250],
+    ] as [ScrollableBlockProps["height"], number][]
+  ).forEach(([height, pixels]) => {
+    test(`should render with scroll block height of ${pixels}px when height prop is passed as a number or string`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MenuComponentScrollable height={height} />);
 
-        const subMenu = submenu(page).first();
-        await subMenu.hover();
-        const block = scrollBlock(page);
-        await assertCssValueIsApproximately(block, "height", pixels);
-      });
-    }
-  );
+      const subMenu = submenu(page).first();
+      await subMenu.hover();
+      const block = scrollBlock(page);
+      await assertCssValueIsApproximately(block, "height", pixels);
+    });
+  });
 
-  ([
-    ["default", "rgb(230, 235, 237)"],
-    ["alternate", "rgb(217, 224, 228)"],
-  ] as [ScrollableBlockProps["variant"], string][]).forEach(
-    ([variant, color]) => {
-      test(`should render Menu scroll block with ${variant} background color using variant prop`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponentScrollable variant={variant} />);
+  (
+    [
+      ["default", "rgb(230, 235, 237)"],
+      ["alternate", "rgb(217, 224, 228)"],
+    ] as [ScrollableBlockProps["variant"], string][]
+  ).forEach(([variant, color]) => {
+    test(`should render Menu scroll block with ${variant} background color using variant prop`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MenuComponentScrollable variant={variant} />);
 
-        const subMenu = submenu(page).first();
-        await subMenu.hover();
-        const block = scrollBlock(page).locator("span").first();
-        await expect(block).toHaveCSS("background-color", color);
-      });
-    }
-  );
+      const subMenu = submenu(page).first();
+      await subMenu.hover();
+      const block = scrollBlock(page).locator("span").first();
+      await expect(block).toHaveCSS("background-color", color);
+    });
+  });
 
-  ([
-    ["default", "rgba(0, 0, 0, 0)"],
-    ["alternate", "rgb(217, 224, 228)"],
-  ] as [ScrollableBlockProps["variant"], string][]).forEach(
-    ([variant, color]) => {
-      test(`should render segment title with ${variant} variant background color`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <Box mb={150}>
-            <Menu menuType="white">
-              <MenuItem submenu="Menu Item One">
-                <MenuItem href="#">
-                  Item Submenu One Is A Very Long Submenu Item Indeed
-                </MenuItem>
-                <MenuSegmentTitle variant={variant} text="Segment Title" />
+  (
+    [
+      ["default", "rgba(0, 0, 0, 0)"],
+      ["alternate", "rgb(217, 224, 228)"],
+    ] as [ScrollableBlockProps["variant"], string][]
+  ).forEach(([variant, color]) => {
+    test(`should render segment title with ${variant} variant background color`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <Box mb={150}>
+          <Menu menuType="white">
+            <MenuItem submenu="Menu Item One">
+              <MenuItem href="#">
+                Item Submenu One Is A Very Long Submenu Item Indeed
               </MenuItem>
-            </Menu>
-          </Box>
-        );
+              <MenuSegmentTitle variant={variant} text="Segment Title" />
+            </MenuItem>
+          </Menu>
+        </Box>,
+      );
 
-        const subMenu = submenu(page).first();
-        await subMenu.hover();
-        const title = segmentTitle(page);
-        await expect(title).toHaveCSS("background-color", color);
-      });
-    }
-  );
+      const subMenu = submenu(page).first();
+      await subMenu.hover();
+      const title = segmentTitle(page);
+      await expect(title).toHaveCSS("background-color", color);
+    });
+  });
 
   test("when a Menu Fullscreen is opened and then closed, the call to action element should be focused", async ({
     mount,
@@ -1129,9 +1147,9 @@ test.describe("Prop tests for Menu component", () => {
     await expect(subMenu).toHaveAttribute("href", CHARACTERS.STANDARD);
   });
 
-  ([["noopener"], ["noreferrer"], ["opener"]] as [
-    MenuWithChildren["rel"]
-  ][]).forEach(([rel]) => {
+  (
+    [["noopener"], ["noreferrer"], ["opener"]] as [MenuWithChildren["rel"]][]
+  ).forEach(([rel]) => {
     test(`should render Menu Item with rel prop set to ${rel}`, async ({
       mount,
       page,
@@ -1155,30 +1173,27 @@ test.describe("Prop tests for Menu component", () => {
     await expect(scrollBlockParent).toHaveCount(1);
   });
 
-  ([
-    ["default", "rgb(255, 255, 255)"],
-    ["alternate", "rgb(230, 235, 237)"],
-  ] as [ScrollableBlockProps["parentVariant"], string][]).forEach(
-    ([variant, color]) => {
-      test(`should render scrollable block with ${variant} variant background color`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MenuComponentScrollableParent parentVariant={variant} />);
+  (
+    [
+      ["default", "rgb(255, 255, 255)"],
+      ["alternate", "rgb(230, 235, 237)"],
+    ] as [ScrollableBlockProps["parentVariant"], string][]
+  ).forEach(([variant, color]) => {
+    test(`should render scrollable block with ${variant} variant background color`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MenuComponentScrollableParent parentVariant={variant} />);
 
-        const subMenu = submenu(page).first();
-        await subMenu.hover();
-        const parentBackground = getComponent(page, "scrollable-block-parent")
-          .locator("span")
-          .nth(0);
-        await expect(parentBackground).toHaveAttribute(
-          "data-component",
-          "link"
-        );
-        await expect(parentBackground).toHaveCSS("background-color", color);
-      });
-    }
-  );
+      const subMenu = submenu(page).first();
+      await subMenu.hover();
+      const parentBackground = getComponent(page, "scrollable-block-parent")
+        .locator("span")
+        .nth(0);
+      await expect(parentBackground).toHaveAttribute("data-component", "link");
+      await expect(parentBackground).toHaveCSS("background-color", color);
+    });
+  });
 });
 
 test.describe("Prop tests for Menu Fullscreen component", () => {
@@ -1242,7 +1257,7 @@ test.describe("Prop tests for Menu Fullscreen component", () => {
     await expect(closeIcon).toBeFocused();
     await expect(closeIcon).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(closeIcon).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
   });
@@ -1297,7 +1312,7 @@ test.describe("Prop tests for Menu Fullscreen component", () => {
       (element) => {
         const style = window.getComputedStyle(element);
         return style.getPropertyValue("background-color");
-      }
+      },
     );
     expect(fullMenuItemBackgroundColor).toContain("rgb(0, 126, 69)");
 
@@ -1338,7 +1353,7 @@ test.describe("Prop tests for Menu Fullscreen component", () => {
       (element) => {
         const style = window.getComputedStyle(element);
         return style.getPropertyValue("background-color");
-      }
+      },
     );
     expect(fullMenuItemBackgroundColor).toContain("rgb(0, 126, 69)");
 
@@ -1372,7 +1387,7 @@ test.describe("Prop tests for Menu Fullscreen component", () => {
       (element) => {
         const style = window.getComputedStyle(element);
         return style.getPropertyValue("text-wrap");
-      }
+      },
     );
 
     const fullSubmenuItemHeight = await fullSubmenuItem.evaluate((element) => {
@@ -1389,14 +1404,14 @@ test.describe("Prop tests for Menu Fullscreen component", () => {
       (element) => {
         const style = window.getComputedStyle(element);
         return style.getPropertyValue("text-wrap");
-      }
+      },
     );
 
     const fullMenuItemWrapperHeight = await fullMenuItemWrapper.evaluate(
       (element) => {
         const style = window.getComputedStyle(element);
         return style.getPropertyValue("height");
-      }
+      },
     );
 
     expect(fullMenuItemWrapperTextWrap).toEqual("wrap");
@@ -1437,27 +1452,27 @@ test.describe("Prop tests for Menu Fullscreen component", () => {
     await expect(item).not.toBeFocused();
   });
 
-  ([
-    ["open", true],
-    ["closed", false],
-  ] as [string, MenuFullscreenProps["isOpen"]][]).forEach(
-    ([value, boolVal]) => {
-      test(`should render with Menu Fullscreen ${value} when isOpen prop is ${boolVal}`, async ({
-        mount,
-        page,
-      }) => {
-        await page.setViewportSize({ width: 1200, height: 800 });
-        await mount(<MenuComponentFullScreen isOpen={boolVal} />);
-
-        const fullScreenMenu = getComponent(page, "menu-fullscreen").nth(3);
-        if (boolVal) {
-          await expect(fullScreenMenu).toBeVisible();
-        } else {
-          await expect(fullScreenMenu).not.toBeVisible();
-        }
-      });
-    }
-  );
+  (
+    [
+      ["open", true],
+      ["closed", false],
+    ] as [string, MenuFullscreenProps["isOpen"]][]
+  ).forEach(([value, boolVal]) => {
+    test(`should render with Menu Fullscreen ${value} when isOpen prop is ${boolVal}`, async ({
+      mount,
+      page,
+    }) => {
+      await page.setViewportSize({ width: 1200, height: 800 });
+      await mount(<MenuComponentFullScreen isOpen={boolVal} />);
+
+      const fullScreenMenu = getComponent(page, "menu-fullscreen").nth(3);
+      if (boolVal) {
+        await expect(fullScreenMenu).toBeVisible();
+      } else {
+        await expect(fullScreenMenu).not.toBeVisible();
+      }
+    });
+  });
 
   test(`should verify that Menu Fullscreen has no effect on the tab order when isOpen prop is false`, async ({
     mount,
@@ -1513,7 +1528,7 @@ test.describe("Prop tests for Menu Fullscreen component", () => {
     await expect(button).toBeFocused();
     await expect(button).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await page.keyboard.press("Tab");
     const item2 = menuItem(page).last().locator("a");
@@ -1528,7 +1543,7 @@ test.describe("Prop tests for Menu Fullscreen component", () => {
       <MenuFullScreenWithSearchButton searchValue="foo" />,
       {
         hooksConfig: { focusRedesignOptOut: true },
-      }
+      },
     );
 
     const item = menuItem(page).first().locator("a");
@@ -1572,7 +1587,7 @@ test.describe("Event tests for Menu component", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const menuComp = menuComponent(page, 1);
@@ -1591,7 +1606,7 @@ test.describe("Event tests for Menu component", () => {
           callbackCount += 1;
         }}
         submenu="Menu Item One"
-      />
+      />,
     );
 
     const subMenu = submenu(page).first();
@@ -1611,7 +1626,7 @@ test.describe("Event tests for Menu component", () => {
           callbackCount += 1;
         }}
         submenu="Menu Item One"
-      />
+      />,
     );
 
     const menuComp = menuComponent(page, 1);
@@ -1632,7 +1647,7 @@ test.describe("Event tests for Menu component", () => {
             callbackCount += 1;
           }}
           submenu="Menu Item One"
-        />
+        />,
       );
 
       await page.keyboard.press("Tab");
@@ -1652,7 +1667,7 @@ test.describe("Event tests for Menu component", () => {
           callbackCount += 1;
         }}
         submenu="Menu Item Three"
-      />
+      />,
     );
 
     await page.keyboard.press("Tab");
@@ -1672,7 +1687,7 @@ test.describe("Event tests for Menu component", () => {
         onClose={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const item = menuItem(page).first();
@@ -1783,7 +1798,7 @@ test.describe("Accessibility tests for Menu component", () => {
             </MenuItem>
           </MenuItem>
         </Menu>
-      </Box>
+      </Box>,
     );
 
     const subMenu = submenu(page).first();
@@ -1805,7 +1820,7 @@ test.describe("Accessibility tests for Menu component", () => {
             </MenuItem>
           </MenuItem>
         </Menu>
-      </Box>
+      </Box>,
     );
 
     const subMenu = submenu(page).first();
@@ -1866,13 +1881,9 @@ test.describe("Accessibility tests for Menu component", () => {
     });
   });
 
-  ([
-    "auto",
-    "clip",
-    "hidden",
-    "scroll",
-    "visible",
-  ] as MenuProps["overflowX"][]).forEach((overflow) => {
+  (
+    ["auto", "clip", "hidden", "scroll", "visible"] as MenuProps["overflowX"][]
+  ).forEach((overflow) => {
     test(`should pass accessibility tests when overflowX is ${overflow}`, async ({
       mount,
       page,
@@ -1893,7 +1904,7 @@ test.describe("Accessibility tests for Menu component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [
@@ -1966,15 +1977,17 @@ test.describe("Accessibility tests for Menu component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
-  ([
-    "column",
-    "column-reverse",
-    "row",
-    "row-reverse",
-  ] as MenuProps["flexDirection"][]).forEach((direction) => {
+  (
+    [
+      "column",
+      "column-reverse",
+      "row",
+      "row-reverse",
+    ] as MenuProps["flexDirection"][]
+  ).forEach((direction) => {
     test(`should pass accessibility tests when flexDirection is ${direction}`, async ({
       mount,
       page,
@@ -1995,7 +2008,7 @@ test.describe("Accessibility tests for Menu component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [10, 50, 100].forEach((value) => {
@@ -2030,7 +2043,7 @@ test.describe("Accessibility tests for Menu component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [
@@ -2101,7 +2114,7 @@ test.describe("Accessibility tests for Menu component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   (["default", "alternate"] as ScrollableBlockProps["variant"][]).forEach(
@@ -2117,7 +2130,7 @@ test.describe("Accessibility tests for Menu component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   test(`should pass accessibility tests for Menu with parent item`, async ({
@@ -2165,7 +2178,7 @@ test(`should verify that submenu item text wraps when it would overflow the cont
   const submenuBlockElement = submenuBlock(page).first();
 
   const cssItemHeight = await lastItem.evaluate((el) =>
-    window.getComputedStyle(el).getPropertyValue("height")
+    window.getComputedStyle(el).getPropertyValue("height"),
   );
 
   await expect(submenuBlockElement).toHaveCSS("max-width", "300px");
@@ -2202,7 +2215,7 @@ test.describe("Accessibility tests for Menu Fullscreen component", () => {
         .first()
         .locator("a")
         .first()
-        .locator("span")
+        .locator("span"),
     ).toHaveText("Menu Item One");
     const closeIcon = closeIconButton(page).first();
     await closeIcon.click();
@@ -2241,361 +2254,339 @@ test.describe("Accessibility tests for Menu Fullscreen component", () => {
         await waitForAnimationEnd(fullscreen);
         await checkAccessibility(page);
       });
-    }
+    },
   );
 });
 
-test.describe(
-  "Styling, Scrolling & Navigation Bar Tests for Menu Component",
-  () => {
-    test(`should render menu items with the expected focus styling when focusRedesignOptOut is true`, async ({
-      mount,
-      page,
-    }) => {
-      await page.setViewportSize({ width: 1200, height: 800 });
-      await mount<HooksConfig>(<MenuComponent />, {
-        hooksConfig: { focusRedesignOptOut: true },
-      });
+test.describe("Styling, Scrolling & Navigation Bar Tests for Menu Component", () => {
+  test(`should render menu items with the expected focus styling when focusRedesignOptOut is true`, async ({
+    mount,
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1200, height: 800 });
+    await mount<HooksConfig>(<MenuComponent />, {
+      hooksConfig: { focusRedesignOptOut: true },
+    });
 
-      const item1 = menuItem(page).first().locator("a");
-      await item1.focus();
-      await expect(item1).toHaveCSS(
-        "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px inset"
-      );
+    const item1 = menuItem(page).first().locator("a");
+    await item1.focus();
+    await expect(item1).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px inset",
+    );
 
-      const item2 = menuItem(page).last().locator("button");
-      await item2.focus();
-      await expect(item2).toHaveCSS(
-        "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px inset"
-      );
-      await item2.click();
+    const item2 = menuItem(page).last().locator("button");
+    await item2.focus();
+    await expect(item2).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px inset",
+    );
+    await item2.click();
 
-      const subMenu1 = submenu(page).last().locator("button").first();
-      await subMenu1.focus();
-      await expect(subMenu1).toHaveCSS(
-        "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px inset"
-      );
+    const subMenu1 = submenu(page).last().locator("button").first();
+    await subMenu1.focus();
+    await expect(subMenu1).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px inset",
+    );
 
-      const subMenu2 = submenu(page).last().locator("a").first();
-      await subMenu2.focus();
-      await expect(subMenu2).toHaveCSS(
-        "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px inset"
-      );
-    });
+    const subMenu2 = submenu(page).last().locator("a").first();
+    await subMenu2.focus();
+    await expect(subMenu2).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px inset",
+    );
+  });
 
-    test(`should render menu items with the expected focus styling when focusRedesignOptOut is false`, async ({
-      mount,
-      page,
-    }) => {
-      await page.setViewportSize({ width: 1200, height: 800 });
-      await mount(<MenuComponent />);
+  test(`should render menu items with the expected focus styling when focusRedesignOptOut is false`, async ({
+    mount,
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1200, height: 800 });
+    await mount(<MenuComponent />);
 
-      const item1 = menuItem(page).first().locator("a");
-      await item1.focus();
-      await expect(item1).toHaveCSS(
-        "box-shadow",
-        "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset"
-      );
-      await expect(item1).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
+    const item1 = menuItem(page).first().locator("a");
+    await item1.focus();
+    await expect(item1).toHaveCSS(
+      "box-shadow",
+      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset",
+    );
+    await expect(item1).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
 
-      const item2 = menuItem(page).last().locator("button");
-      await item2.focus();
-      await expect(item2).toHaveCSS(
-        "box-shadow",
-        "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset"
-      );
-      await expect(item2).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
-      await item2.click();
-
-      const subMenu1 = submenu(page).last().locator("button").first();
-      await subMenu1.focus();
-      await expect(subMenu1).toHaveCSS(
-        "box-shadow",
-        "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset"
-      );
-      await expect(subMenu1).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
+    const item2 = menuItem(page).last().locator("button");
+    await item2.focus();
+    await expect(item2).toHaveCSS(
+      "box-shadow",
+      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset",
+    );
+    await expect(item2).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
+    await item2.click();
 
-      const subMenu2 = submenu(page).last().locator("a").first();
-      await subMenu2.focus();
-      await expect(subMenu2).toHaveCSS(
-        "box-shadow",
-        "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset"
-      );
-      await expect(subMenu2).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
-    });
+    const subMenu1 = submenu(page).last().locator("button").first();
+    await subMenu1.focus();
+    await expect(subMenu1).toHaveCSS(
+      "box-shadow",
+      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset",
+    );
+    await expect(subMenu1).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
 
-    test(`should render with the expected border radius styling on the Submenu`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponent />);
+    const subMenu2 = submenu(page).last().locator("a").first();
+    await subMenu2.focus();
+    await expect(subMenu2).toHaveCSS(
+      "box-shadow",
+      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset",
+    );
+    await expect(subMenu2).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
+  });
 
-      const subMenu = submenu(page).first();
-      await subMenu.hover();
-      const subMenuBlock = submenuBlock(page).first();
-      await expect(subMenuBlock).toHaveCSS("border-radius", "0px 0px 8px 8px");
-      const subMenu2 = submenu(page).locator("a").last();
-      await expect(subMenu2).toHaveCSS("border-radius", "0px 0px 8px 8px");
-    });
+  test(`should render with the expected border radius styling on the Submenu`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuComponent />);
 
-    test(`should render with the expected border radius styling on the last MenuItem in a segment block`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuSegmentTitleComponent />);
+    const subMenu = submenu(page).first();
+    await subMenu.hover();
+    const subMenuBlock = submenuBlock(page).first();
+    await expect(subMenuBlock).toHaveCSS("border-radius", "0px 0px 8px 8px");
+    const subMenu2 = submenu(page).locator("a").last();
+    await expect(subMenu2).toHaveCSS("border-radius", "0px 0px 8px 8px");
+  });
 
-      const subMenu = submenu(page).nth(1);
-      await subMenu.hover();
-      const lastMenuItem = submenu(page).locator("a").last();
-      await lastMenuItem.focus();
-      await expect(lastMenuItem).toHaveCSS("border-radius", "0px 0px 8px 8px");
-    });
+  test(`should render with the expected border radius styling on the last MenuItem in a segment block`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuSegmentTitleComponent />);
 
-    test(`should render with the expected border radius styling on the last MenuItem in a segment block when it is not the last menu item in the whole submenu`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuSegmentTitleComponentWithAdditionalMenuItem />);
+    const subMenu = submenu(page).nth(1);
+    await subMenu.hover();
+    const lastMenuItem = submenu(page).locator("a").last();
+    await lastMenuItem.focus();
+    await expect(lastMenuItem).toHaveCSS("border-radius", "0px 0px 8px 8px");
+  });
 
-      const subMenu = submenu(page).nth(1);
-      await subMenu.hover();
-      const lastMenuItemInLastSegment = page.getByRole("link", {
-        name: "Last Segment Child",
-      });
-      await lastMenuItemInLastSegment.focus();
-      await expect(lastMenuItemInLastSegment).toHaveCSS("border-radius", "0px");
+  test(`should render with the expected border radius styling on the last MenuItem in a segment block when it is not the last menu item in the whole submenu`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuSegmentTitleComponentWithAdditionalMenuItem />);
 
-      const lastMenuItem = submenu(page).locator("a").last();
-      await lastMenuItem.focus();
-      await expect(lastMenuItem).toHaveCSS("border-radius", "0px 0px 8px 8px");
+    const subMenu = submenu(page).nth(1);
+    await subMenu.hover();
+    const lastMenuItemInLastSegment = page.getByRole("link", {
+      name: "Last Segment Child",
     });
+    await lastMenuItemInLastSegment.focus();
+    await expect(lastMenuItemInLastSegment).toHaveCSS("border-radius", "0px");
 
-    test(`should render with the expected border radius styling on the Submenu Scrollable Block`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponentScrollable />);
+    const lastMenuItem = submenu(page).locator("a").last();
+    await lastMenuItem.focus();
+    await expect(lastMenuItem).toHaveCSS("border-radius", "0px 0px 8px 8px");
+  });
 
-      const subMenu = submenu(page).first();
-      await subMenu.hover();
-      const scrollableBlock = scrollBlock(page).first();
-      await expect(scrollableBlock).toHaveCSS(
-        "border-radius",
-        "0px 0px 0px 8px"
-      );
-      const scrollableItem = scrollBlock(page).locator("a").last();
-      await expect(scrollableItem).toHaveCSS(
-        "border-radius",
-        "0px 0px 0px 8px"
-      );
-    });
+  test(`should render with the expected border radius styling on the Submenu Scrollable Block`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuComponentScrollable />);
 
-    test(`renders last MenuItem in a scrollable block without rounded corner, if there is no overflow in the block`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponentScrollableWithSearch />);
+    const subMenu = submenu(page).first();
+    await subMenu.hover();
+    const scrollableBlock = scrollBlock(page).first();
+    await expect(scrollableBlock).toHaveCSS("border-radius", "0px 0px 0px 8px");
+    const scrollableItem = scrollBlock(page).locator("a").last();
+    await expect(scrollableItem).toHaveCSS("border-radius", "0px 0px 0px 8px");
+  });
 
-      const subMenu = submenu(page).first();
-      await subMenu.hover();
-      const searchInput = searchDefaultInput(page);
-      await searchInput.fill("app");
-      const scrollableBlock = scrollBlock(page);
+  test(`renders last MenuItem in a scrollable block without rounded corner, if there is no overflow in the block`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuComponentScrollableWithSearch />);
 
-      await expect(scrollableBlock).toHaveCSS(
-        "border-radius",
-        "0px 0px 0px 8px"
-      );
+    const subMenu = submenu(page).first();
+    await subMenu.hover();
+    const searchInput = searchDefaultInput(page);
+    await searchInput.fill("app");
+    const scrollableBlock = scrollBlock(page);
 
-      const scrollableItem = scrollBlock(page).locator("a").last();
+    await expect(scrollableBlock).toHaveCSS("border-radius", "0px 0px 0px 8px");
 
-      await expect(scrollableItem).toHaveCSS("border-radius", "0px");
-    });
+    const scrollableItem = scrollBlock(page).locator("a").last();
 
-    test(`renders last MenuItem in a scrollable block with rounded corner, if there is overflow within the block`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponentScrollableWithSearch />);
+    await expect(scrollableItem).toHaveCSS("border-radius", "0px");
+  });
 
-      const subMenu = submenu(page).first();
-      await subMenu.hover();
-      const searchInput = searchDefaultInput(page);
-      await searchInput.fill("r");
-      const scrollableBlock = scrollBlock(page);
+  test(`renders last MenuItem in a scrollable block with rounded corner, if there is overflow within the block`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuComponentScrollableWithSearch />);
 
-      await expect(scrollableBlock).toHaveCSS(
-        "border-radius",
-        "0px 0px 0px 8px"
-      );
+    const subMenu = submenu(page).first();
+    await subMenu.hover();
+    const searchInput = searchDefaultInput(page);
+    await searchInput.fill("r");
+    const scrollableBlock = scrollBlock(page);
 
-      const scrollableItem = scrollBlock(page).locator("a").last();
+    await expect(scrollableBlock).toHaveCSS("border-radius", "0px 0px 0px 8px");
 
-      await expect(scrollableItem).toHaveCSS(
-        "border-radius",
-        "0px 0px 0px 8px"
-      );
-    });
+    const scrollableItem = scrollBlock(page).locator("a").last();
 
-    test("should apply the expected styling to the scrollbar when menuType is white", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponentScrollable />);
-      const subMenu = submenu(page).first();
-      await subMenu.hover();
-      const scrollableBlock = scrollBlock(page).first();
+    await expect(scrollableItem).toHaveCSS("border-radius", "0px 0px 0px 8px");
+  });
 
-      await expect(scrollableBlock).toHaveCSS(
-        "scrollbar-color",
-        "rgb(89, 122, 139) rgb(242, 245, 246)"
-      );
-    });
+  test("should apply the expected styling to the scrollbar when menuType is white", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuComponentScrollable />);
+    const subMenu = submenu(page).first();
+    await subMenu.hover();
+    const scrollableBlock = scrollBlock(page).first();
 
-    test("should apply the expected styling to the scrollbar when menuType is light", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponentScrollable />);
-      const subMenu = submenu(page).nth(2);
-      await subMenu.hover();
-      const scrollableBlock = scrollBlock(page).first();
+    await expect(scrollableBlock).toHaveCSS(
+      "scrollbar-color",
+      "rgb(89, 122, 139) rgb(242, 245, 246)",
+    );
+  });
 
-      await expect(scrollableBlock).toHaveCSS(
-        "scrollbar-color",
-        "rgb(89, 122, 139) rgb(242, 245, 246)"
-      );
-    });
+  test("should apply the expected styling to the scrollbar when menuType is light", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuComponentScrollable />);
+    const subMenu = submenu(page).nth(2);
+    await subMenu.hover();
+    const scrollableBlock = scrollBlock(page).first();
 
-    test("should apply the expected styling to the scrollbar when menuType is dark", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponentScrollable />);
-      const subMenu = submenu(page).nth(5);
-      await subMenu.hover();
-      const scrollableBlock = scrollBlock(page).first();
+    await expect(scrollableBlock).toHaveCSS(
+      "scrollbar-color",
+      "rgb(89, 122, 139) rgb(242, 245, 246)",
+    );
+  });
 
-      await expect(scrollableBlock).toHaveCSS(
-        "scrollbar-color",
-        "rgb(89, 122, 139) rgb(242, 245, 246)"
-      );
-    });
+  test("should apply the expected styling to the scrollbar when menuType is dark", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuComponentScrollable />);
+    const subMenu = submenu(page).nth(5);
+    await subMenu.hover();
+    const scrollableBlock = scrollBlock(page).first();
 
-    test("should apply the expected styling to the scrollbar when menuType is black", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuComponentScrollable />);
-      const subMenu = submenu(page).nth(6);
-      await subMenu.hover();
-      const scrollableBlock = scrollBlock(page).first();
+    await expect(scrollableBlock).toHaveCSS(
+      "scrollbar-color",
+      "rgb(89, 122, 139) rgb(242, 245, 246)",
+    );
+  });
 
-      await expect(scrollableBlock).toHaveCSS(
-        "scrollbar-color",
-        "rgb(204, 204, 204) rgb(128, 128, 128)"
-      );
-    });
+  test("should apply the expected styling to the scrollbar when menuType is black", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuComponentScrollable />);
+    const subMenu = submenu(page).nth(6);
+    await subMenu.hover();
+    const scrollableBlock = scrollBlock(page).first();
 
-    test(`should verify that tabbing forward through the menu and back to the start should not make the background scroll to the bottom`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuFullScreenBackgroundScrollTest />);
+    await expect(scrollableBlock).toHaveCSS(
+      "scrollbar-color",
+      "rgb(204, 204, 204) rgb(128, 128, 128)",
+    );
+  });
+
+  test(`should verify that tabbing forward through the menu and back to the start should not make the background scroll to the bottom`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuFullScreenBackgroundScrollTest />);
 
-      await continuePressingTAB(page, 4);
+    await continuePressingTAB(page, 4);
 
-      const closeIcon = closeIconButton(page);
-      await expect(closeIcon).toBeFocused();
+    const closeIcon = closeIconButton(page);
+    await expect(closeIcon).toBeFocused();
 
-      const offscreenText = page.getByText(
-        "I should not be scrolled into view"
-      );
-      await expect(offscreenText).not.toBeInViewport();
-    });
+    const offscreenText = page.getByText("I should not be scrolled into view");
+    await expect(offscreenText).not.toBeInViewport();
+  });
 
-    test(`should verify that tabbing backward through the menu and back to the start should not make the background scroll to the bottom`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuFullScreenBackgroundScrollTest />);
+  test(`should verify that tabbing backward through the menu and back to the start should not make the background scroll to the bottom`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuFullScreenBackgroundScrollTest />);
 
-      await continuePressingSHIFTTAB(page, 3);
+    await continuePressingSHIFTTAB(page, 3);
 
-      const closeIcon = closeIconButton(page);
-      await expect(closeIcon).toBeFocused();
+    const closeIcon = closeIconButton(page);
+    await expect(closeIcon).toBeFocused();
 
-      const offscreenText = page.getByText(
-        "I should not be scrolled into view"
-      );
-      await expect(offscreenText).not.toBeInViewport();
-    });
+    const offscreenText = page.getByText("I should not be scrolled into view");
+    await expect(offscreenText).not.toBeInViewport();
+  });
 
-    test(`should render with all the content of a long submenu accessible with the keyboard while remaining visible`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<InGlobalHeaderStory />);
+  test(`should render with all the content of a long submenu accessible with the keyboard while remaining visible`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<InGlobalHeaderStory />);
 
-      await page.setViewportSize({ width: 1000, height: 500 });
-      await page.keyboard.press("Tab");
+    await page.setViewportSize({ width: 1000, height: 500 });
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("ArrowDown");
+    const subMenuItem = submenuItem(page, 1);
+    await expect(subMenuItem).toHaveCount(20);
+    for (let i = 0; i < 20; i++) {
       await page.keyboard.press("ArrowDown");
-      const subMenuItem = submenuItem(page, 1);
-      await expect(subMenuItem).toHaveCount(20);
-      for (let i = 0; i < 20; i++) {
-        await page.keyboard.press("ArrowDown");
-      }
-      const focusedElement = page.locator("*:focus");
-      await expect(focusedElement).toHaveText("Foo 20");
-      const subMenu = page.locator(
-        '[data-component="submenu-wrapper"] ul > li:nth-child(20)'
-      );
-      await expect(subMenu).toBeInViewport();
-    });
+    }
+    const focusedElement = page.locator("*:focus");
+    await expect(focusedElement).toHaveText("Foo 20");
+    const subMenu = page.locator(
+      '[data-component="submenu-wrapper"] ul > li:nth-child(20)',
+    );
+    await expect(subMenu).toBeInViewport();
+  });
 
-    test(`should render with all the content of a long submenu accessible with the keyboard while remaining visible if the navbar height changes`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<NavigationBarWithSubmenuAndChangingHeight />);
+  test(`should render with all the content of a long submenu accessible with the keyboard while remaining visible if the navbar height changes`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<NavigationBarWithSubmenuAndChangingHeight />);
 
-      await page.setViewportSize({ width: 1000, height: 500 });
-      await page.keyboard.press("Tab");
+    await page.setViewportSize({ width: 1000, height: 500 });
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("ArrowDown");
+    const subMenuItem = submenuItem(page, 1);
+    await expect(subMenuItem).toHaveCount(21);
+    for (let i = 0; i < 3; i++) {
       await page.keyboard.press("ArrowDown");
-      const subMenuItem = submenuItem(page, 1);
-      await expect(subMenuItem).toHaveCount(21);
-      for (let i = 0; i < 3; i++) {
-        await page.keyboard.press("ArrowDown");
-      }
-      await page.keyboard.press("Enter");
+    }
+    await page.keyboard.press("Enter");
 
-      await page.waitForTimeout(100);
-      await page.keyboard.press("Tab");
+    await page.waitForTimeout(100);
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("ArrowDown");
+    for (let i = 0; i < 21; i++) {
       await page.keyboard.press("ArrowDown");
-      for (let i = 0; i < 21; i++) {
-        await page.keyboard.press("ArrowDown");
-      }
-      const subMenu = page.locator(
-        '[data-component="submenu-wrapper"] ul > li:nth-child(21)'
-      );
-      await expect(subMenu).toBeInViewport();
-    });
+    }
+    const subMenu = page.locator(
+      '[data-component="submenu-wrapper"] ul > li:nth-child(21)',
+    );
+    await expect(subMenu).toBeInViewport();
+  });
 
-    test("should render the menu with the expected styling when menu item has a PopoverContainer child with renderOpenComponent passed", async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MenuItemWithPopoverContainerChild />);
+  test("should render the menu with the expected styling when menu item has a PopoverContainer child with renderOpenComponent passed", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuItemWithPopoverContainerChild />);
 
-      const menuItemAnchor = menuItem(page).first().locator("a");
-      const buttonChild = menuItemAnchor.locator("button");
+    const menuItemAnchor = menuItem(page).first().locator("a");
+    const buttonChild = menuItemAnchor.locator("button");
 
-      await expect(menuItemAnchor).toHaveCSS("height", "40px");
-      await expect(buttonChild).toHaveCSS("height", "40px");
-    });
-  }
-);
+    await expect(menuItemAnchor).toHaveCSS("height", "40px");
+    await expect(buttonChild).toHaveCSS("height", "40px");
+  });
+});
diff --git a/src/components/menu/menu.stories.tsx b/src/components/menu/menu.stories.tsx
index ba3a2f0a6e..ef0e3143a1 100644
--- a/src/components/menu/menu.stories.tsx
+++ b/src/components/menu/menu.stories.tsx
@@ -25,7 +25,7 @@ const styledSystemProps = generateStyledSystemProps(
     layout: true,
   },
   undefined,
-  ["height", "minHeight", "maxHeight", "size", "display", "overflowY"]
+  ["height", "minHeight", "maxHeight", "size", "display", "overflowY"],
 );
 
 const defaultOpenState = isChromatic();
@@ -662,7 +662,7 @@ export const FullscreenViewStory: Story = () => {
   const fullscreenViewBreakPoint = useMediaQuery("(max-width: 1200px)");
   const responsiveMenuItems = (
     startPosition: "left" | "right",
-    menu: MenuType
+    menu: MenuType,
   ) => {
     if (fullscreenViewBreakPoint) {
       return [
@@ -726,7 +726,7 @@ export const FullscreenViewStory: Story = () => {
           <Menu menuType={menuType}>
             {React.Children.map(
               responsiveMenuItems("left", menuType),
-              (items) => items
+              (items) => items,
             )}
           </Menu>
         </Box>
diff --git a/src/components/menu/menu.test.tsx b/src/components/menu/menu.test.tsx
index 65b2f9109b..d3b3b8ed63 100644
--- a/src/components/menu/menu.test.tsx
+++ b/src/components/menu/menu.test.tsx
@@ -10,11 +10,11 @@ import {
 
 testStyledSystemLayout(
   (props) => <Menu {...props}>Foo</Menu>,
-  () => screen.getByRole("list")
+  () => screen.getByRole("list"),
 );
 testStyledSystemFlexBox(
   (props) => <Menu {...props}>Foo</Menu>,
-  () => screen.getByRole("list")
+  () => screen.getByRole("list"),
 );
 
 test("should focus the last item when 'End' key is pressed by user", async () => {
@@ -25,7 +25,7 @@ test("should focus the last item when 'End' key is pressed by user", async () =>
       <MenuItem href="#">test two</MenuItem>
       <MenuItem href="#">test three</MenuItem>
       <MenuItem href="#">test four</MenuItem>
-    </Menu>
+    </Menu>,
   );
   const firstMenuItem = screen.getByRole("link", { name: "test one" });
   firstMenuItem.focus();
@@ -43,7 +43,7 @@ test("should focus the first item when 'Home' key is pressed by user", async ()
       <MenuItem href="#">test two</MenuItem>
       <MenuItem href="#">test three</MenuItem>
       <MenuItem href="#">test four</MenuItem>
-    </Menu>
+    </Menu>,
   );
   const lastMenuItem = screen.getByRole("link", { name: "test four" });
   lastMenuItem.focus();
@@ -61,7 +61,7 @@ test("should focus the next item in sequence, and remove focus from menu on last
       <MenuItem href="#">test two</MenuItem>
       <MenuItem href="#">test three</MenuItem>
       <MenuItem href="#">test four</MenuItem>
-    </Menu>
+    </Menu>,
   );
   const items = screen.getAllByRole("link");
   items[0].focus();
@@ -84,7 +84,7 @@ test("should focus the previous item in sequence, and remove focus from menu on
       <MenuItem href="#">test two</MenuItem>
       <MenuItem href="#">test three</MenuItem>
       <MenuItem href="#">test four</MenuItem>
-    </Menu>
+    </Menu>,
   );
   const items = screen.getAllByRole("link");
   items[3].focus();
@@ -107,7 +107,7 @@ test("should not focus the next item in sequence when 'arrowright' key is presse
       <MenuItem href="#">test two</MenuItem>
       <MenuItem href="#">test three</MenuItem>
       <MenuItem href="#">test four</MenuItem>
-    </Menu>
+    </Menu>,
   );
   const items = screen.getAllByRole("link");
   items[0].focus();
@@ -128,7 +128,7 @@ test("should not focus the previous item in sequence when 'arrowleft' key is pre
       <MenuItem href="#">test two</MenuItem>
       <MenuItem href="#">test three</MenuItem>
       <MenuItem href="#">test four</MenuItem>
-    </Menu>
+    </Menu>,
   );
   const items = screen.getAllByRole("link");
   items[3].focus();
@@ -147,7 +147,7 @@ test("should not throw an error when conditionally rendered `children` are passe
       <Menu>
         {true && <MenuItem href="#">test one</MenuItem>}
         {false && <MenuItem href="#">test two</MenuItem>}
-      </Menu>
+      </Menu>,
     );
   }).not.toThrow();
 });
@@ -165,7 +165,7 @@ test("should close any open submenus when a new submenu is opened", async () =>
         <MenuItem href="#">submenu 2 item 1</MenuItem>
         <MenuItem href="#">submenu 2 item 2</MenuItem>
       </MenuItem>
-    </Menu>
+    </Menu>,
   );
   const firstSubmenuItem = screen.getByRole("button", { name: "submenu 1" });
   const secondSubmenuItem = screen.getByRole("button", { name: "submenu 2" });
@@ -174,13 +174,13 @@ test("should close any open submenus when a new submenu is opened", async () =>
 
   expect(screen.getByRole("link", { name: "submenu 1 item 1" })).toBeVisible();
   expect(
-    screen.queryByRole("link", { name: "submenu 2 item 2" })
+    screen.queryByRole("link", { name: "submenu 2 item 2" }),
   ).not.toBeInTheDocument();
 
   await user.click(secondSubmenuItem);
 
   expect(
-    screen.queryByRole("link", { name: "submenu 1 item 1" })
+    screen.queryByRole("link", { name: "submenu 1 item 1" }),
   ).not.toBeInTheDocument();
   expect(screen.getByRole("link", { name: "submenu 2 item 2" })).toBeVisible();
 });
@@ -212,7 +212,7 @@ test("should apply the expected `data-` tags as attributes", () => {
   render(
     <Menu data-element="bar" data-role="baz">
       <MenuItem>Foo</MenuItem>
-    </Menu>
+    </Menu>,
   );
   const menu = screen.getByRole("list");
 
diff --git a/src/components/menu/scrollable-block/scrollable-block.test.tsx b/src/components/menu/scrollable-block/scrollable-block.test.tsx
index eb9ddd793e..5963618c92 100644
--- a/src/components/menu/scrollable-block/scrollable-block.test.tsx
+++ b/src/components/menu/scrollable-block/scrollable-block.test.tsx
@@ -27,7 +27,7 @@ test("should have the correct styling when `menuType` is 'light' passed by MenuC
           <MenuItem href="#">Apple</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   expect(screen.getByTestId("scrollable-block")).toHaveStyle({
@@ -54,7 +54,7 @@ test("should have the correct styling when `menuType` is 'dark' passed by MenuCo
           <MenuItem href="#">Apple</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   expect(screen.getByTestId("scrollable-block")).toHaveStyle({
@@ -82,7 +82,7 @@ test("should have the correct styling when `menuType` is 'white' passed by MenuC
           <MenuItem href="#">Broccoli</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   expect(screen.getByTestId("scrollable-block")).toHaveStyle({
@@ -109,7 +109,7 @@ test("should have the correct styling when `menuType` is 'black' passed by MenuC
           <MenuItem href="#">Apple</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
 
   expect(screen.getByTestId("scrollable-block")).toHaveStyle({
@@ -137,7 +137,7 @@ test("should apply the expected styling on the last menu item when they have `hr
           <MenuItem href="#">Pear</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const links = screen.getAllByRole("link");
   const firstLink = links.shift();
@@ -173,7 +173,7 @@ test("should apply the expected styling on the last menu item when they have `on
           <MenuItem onClick={() => {}}>Pear</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const buttons = screen.getAllByRole("button");
   const firstButton = buttons.shift();
@@ -209,7 +209,7 @@ test("should apply the expected styling on the last menu item when it has `href`
           <MenuItem href="#">Pear</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const button = screen.getByRole("button");
   const link = screen.getByRole("link");
@@ -244,7 +244,7 @@ test("should apply the expected styling on the last menu item when it has `onCli
           <MenuItem onClick={() => {}}>Pear</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const link = screen.getByRole("link");
   const button = screen.getByRole("button");
@@ -283,7 +283,7 @@ test("should render the `parent` item, wrapped in a MenuItem", () => {
           <MenuItem onClick={() => {}}>Pear</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const firstMenuItem = screen.getByTestId("scrollable-block-parent-menu-item");
 
@@ -313,10 +313,10 @@ test("should render the parent menu-item with the correct styling when `variant`
           <MenuItem onClick={() => {}}>Pear</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const parentMenuItem = screen.getByTestId(
-    "scrollable-block-parent-menu-item"
+    "scrollable-block-parent-menu-item",
   );
 
   expect(parentMenuItem).toHaveStyle({
@@ -348,10 +348,10 @@ test("should render the parent menu-item with the correct styling when `variant`
           <MenuItem onClick={() => {}}>Pear</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const parentMenuItem = screen.getByTestId(
-    "scrollable-block-parent-menu-item"
+    "scrollable-block-parent-menu-item",
   );
 
   expect(parentMenuItem).toHaveStyle({
@@ -383,10 +383,10 @@ test("should render the parent menu-item with the correct styling when `variant`
           <MenuItem onClick={() => {}}>Pear</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const parentMenuItem = screen.getByTestId(
-    "scrollable-block-parent-menu-item"
+    "scrollable-block-parent-menu-item",
   );
 
   expect(parentMenuItem).toHaveStyle({
@@ -418,13 +418,13 @@ test("should apply the `data-` tag props as attributes on the expected element",
           <MenuItem href="#">Pear</MenuItem>
         </ScrollableBlock>
       </SubmenuContext.Provider>
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const scrollableBlock = screen.getByTestId("scrollable-block");
 
   expect(scrollableBlock).toHaveAttribute(
     "data-component",
-    "submenu-scrollable-block"
+    "submenu-scrollable-block",
   );
   expect(scrollableBlock).toHaveAttribute("data-element", "foo");
   expect(scrollableBlock).toHaveAttribute("data-role", "scrollable-block");
diff --git a/src/components/message/message-test.stories.tsx b/src/components/message/message-test.stories.tsx
index 95344b36ca..8547f62ea4 100644
--- a/src/components/message/message-test.stories.tsx
+++ b/src/components/message/message-test.stories.tsx
@@ -27,7 +27,7 @@ export const Default = ({ title, children, ...args }: MessageProps) => {
   const onDismiss = (
     evt:
       | React.KeyboardEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => {
     setIsOpen(false);
     action("click")(evt);
diff --git a/src/components/message/message.component.tsx b/src/components/message/message.component.tsx
index 538000aff3..0e05651fe3 100644
--- a/src/components/message/message.component.tsx
+++ b/src/components/message/message.component.tsx
@@ -30,7 +30,7 @@ export interface MessageProps extends MarginProps {
   onDismiss?: (
     e:
       | React.KeyboardEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => void;
   /** show message component */
   open?: boolean;
@@ -59,7 +59,7 @@ export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
       showCloseIcon = true,
       ...props
     }: MessageProps,
-    ref
+    ref,
   ) => {
     const messageRef = useRef<HTMLDivElement | null>(null);
     const refToPass = ref || messageRef;
@@ -103,7 +103,7 @@ export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
         {renderCloseIcon()}
       </MessageStyle>
     ) : null;
-  }
+  },
 );
 
 Message.displayName = "Message";
diff --git a/src/components/message/message.pw.tsx b/src/components/message/message.pw.tsx
index b843b0dac3..e7bd469171 100644
--- a/src/components/message/message.pw.tsx
+++ b/src/components/message/message.pw.tsx
@@ -26,27 +26,27 @@ import { VALIDATION, CHARACTERS } from "../../../playwright/support/constants";
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 
 test.describe("Tests for Message component properties", () => {
-  ([
-    ["info", "rgb(0, 96, 167)"],
-    ["error", VALIDATION.ERROR],
-    ["success", "rgb(0, 138, 33)"],
-    ["warning", VALIDATION.WARNING],
-    ["neutral", "rgb(51, 91, 112)"],
-  ] as [MessageProps["variant"], string][]).forEach(
-    ([variant, backgroundColor]) => {
-      test(`should check ${variant} as variant for Message components`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MessageComponent variant={variant} />);
-
-        await expect(variantPreview(page)).toHaveCSS(
-          "background-color",
-          backgroundColor
-        );
-      });
-    }
-  );
+  (
+    [
+      ["info", "rgb(0, 96, 167)"],
+      ["error", VALIDATION.ERROR],
+      ["success", "rgb(0, 138, 33)"],
+      ["warning", VALIDATION.WARNING],
+      ["neutral", "rgb(51, 91, 112)"],
+    ] as [MessageProps["variant"], string][]
+  ).forEach(([variant, backgroundColor]) => {
+    test(`should check ${variant} as variant for Message components`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MessageComponent variant={variant} />);
+
+      await expect(variantPreview(page)).toHaveCSS(
+        "background-color",
+        backgroundColor,
+      );
+    });
+  });
 
   testData.forEach((children) => {
     test(`should check ${children} as children for Message component`, async ({
@@ -115,10 +115,12 @@ test.describe("Tests for Message component properties", () => {
     });
   });
 
-  ([
-    [true, "rgba(0, 0, 0, 0)"],
-    [false, "rgb(255, 255, 255)"],
-  ] as [boolean, string][]).forEach(([boolVal, backgroundColor]) => {
+  (
+    [
+      [true, "rgba(0, 0, 0, 0)"],
+      [false, "rgb(255, 255, 255)"],
+    ] as [boolean, string][]
+  ).forEach(([boolVal, backgroundColor]) => {
     test(`should apply expected styling when transparent is ${boolVal}`, async ({
       mount,
       page,
@@ -127,15 +129,17 @@ test.describe("Tests for Message component properties", () => {
 
       await expect(messagePreview(page)).toHaveCSS(
         "background-color",
-        backgroundColor
+        backgroundColor,
       );
     });
   });
 
-  ([
-    [true, 50],
-    [false, 20],
-  ] as [boolean, number][]).forEach(([boolVal, paddingVal]) => {
+  (
+    [
+      [true, 50],
+      [false, 20],
+    ] as [boolean, number][]
+  ).forEach(([boolVal, paddingVal]) => {
     test(`should check showCloseIcon when it's ${boolVal} for Message component`, async ({
       mount,
       page,
@@ -146,13 +150,13 @@ test.describe("Tests for Message component properties", () => {
         await expect(messageDismissIcon(page)).toBeVisible();
         await expect(messageContent(page)).toHaveCSS(
           "padding",
-          `15px ${paddingVal}px 15px 20px`
+          `15px ${paddingVal}px 15px 20px`,
         );
       } else {
         await expect(messageDismissIcon(page)).not.toBeVisible();
         await expect(messageContent(page)).toHaveCSS(
           "padding",
-          `15px ${paddingVal}px`
+          `15px ${paddingVal}px`,
         );
       }
     });
@@ -167,7 +171,7 @@ test.describe("Tests for Message component properties", () => {
 
       await expect(messageDismissIconButton(page)).toHaveAttribute(
         "aria-label",
-        ariaLabel
+        ariaLabel,
       );
     });
   });
@@ -182,7 +186,7 @@ test.describe("Tests for Message component properties", () => {
         onDismiss={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
     await messageDismissIcon(page).click();
     expect(callbackCount).toBe(1);
@@ -210,12 +214,9 @@ test.describe("Tests for Message component properties", () => {
 });
 
 test.describe("Accessibility tests for Message component", () => {
-  ([
-    "info",
-    "error",
-    "success",
-    "warning",
-  ] as MessageProps["variant"][]).forEach((variant) => {
+  (
+    ["info", "error", "success", "warning"] as MessageProps["variant"][]
+  ).forEach((variant) => {
     test(`should check ${variant} as variant for accessibility tests`, async ({
       mount,
       page,
diff --git a/src/components/message/message.stories.tsx b/src/components/message/message.stories.tsx
index 7aa6b52c82..d4e396a646 100644
--- a/src/components/message/message.stories.tsx
+++ b/src/components/message/message.stories.tsx
@@ -168,7 +168,7 @@ export const WithMargin: Story = () => {
   });
 
   const displayButton = Object.values({ ...isOpen }).every(
-    (value) => value === false
+    (value) => value === false,
   );
   return (
     <>
diff --git a/src/components/message/message.test.tsx b/src/components/message/message.test.tsx
index b5fb4046f8..c38cb8b1b8 100644
--- a/src/components/message/message.test.tsx
+++ b/src/components/message/message.test.tsx
@@ -22,7 +22,7 @@ test("does not render component when `open` prop is false", () => {
   render(
     <Message data-role="my-message" open={false}>
       Message
-    </Message>
+    </Message>,
   );
 
   expect(screen.queryByTestId("my-message")).not.toBeInTheDocument();
@@ -50,7 +50,7 @@ test("does not render close button if `onDismiss` is not provided", () => {
   render(<Message>Message</Message>);
 
   expect(
-    screen.queryByRole("button", { name: "Close" })
+    screen.queryByRole("button", { name: "Close" }),
   ).not.toBeInTheDocument();
 });
 
@@ -58,7 +58,7 @@ test("does no render close button if `showCloseIcon` is false", () => {
   render(<Message showCloseIcon={false}>Message</Message>);
 
   expect(
-    screen.queryByRole("button", { name: "Close" })
+    screen.queryByRole("button", { name: "Close" }),
   ).not.toBeInTheDocument();
 });
 
@@ -66,7 +66,7 @@ test("renders close button aria-label with provided `closeButtonAriaLabel`", ()
   render(
     <Message onDismiss={() => {}} closeButtonAriaLabel="my close button">
       Message
-    </Message>
+    </Message>,
   );
 
   expect(screen.getByRole("button", { name: "my close button" })).toBeVisible();
@@ -76,7 +76,7 @@ test("renders close button aria-label with default value from translations", ()
   render(
     <I18nProvider locale={enGB}>
       <Message onDismiss={() => {}}>Message</Message>
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   expect(screen.getByRole("button", { name: "Close" })).toBeVisible();
@@ -93,11 +93,11 @@ test("renders close button aria-label with custom value from translations", () =
       }}
     >
       <Message onDismiss={() => {}}>Message</Message>
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   expect(
-    screen.getByRole("button", { name: "test close button" })
+    screen.getByRole("button", { name: "test close button" }),
   ).toBeVisible();
 });
 
@@ -105,7 +105,7 @@ test("renders with provided `id`", () => {
   render(
     <Message data-role="my-message" id="message-id">
       Message
-    </Message>
+    </Message>,
   );
 
   expect(screen.getByTestId("my-message")).toHaveAttribute("id", "message-id");
@@ -115,7 +115,7 @@ test("renders with provided `className`", () => {
   render(
     <Message data-role="my-message" className="message-class">
       Message
-    </Message>
+    </Message>,
   );
 
   expect(screen.getByTestId("my-message")).toHaveClass("message-class");
@@ -126,7 +126,7 @@ test("renders with expected styles when `transparent` is true", () => {
   render(
     <Message data-role="my-message" transparent>
       Message
-    </Message>
+    </Message>,
   );
 
   expect(screen.getByTestId("my-message")).toHaveStyle({
@@ -167,5 +167,5 @@ testStyledSystemMarginRTL(
       Message
     </Message>
   ),
-  () => screen.getByTestId("my-message")
+  () => screen.getByTestId("my-message"),
 );
diff --git a/src/components/modal/__internal__/modal-manager.ts b/src/components/modal/__internal__/modal-manager.ts
index 8d4905b5da..5cfbd0659a 100644
--- a/src/components/modal/__internal__/modal-manager.ts
+++ b/src/components/modal/__internal__/modal-manager.ts
@@ -34,7 +34,7 @@ class ModalManagerInstance {
   addModal = (
     modal: HTMLElement | null,
     setTriggerRefocusFlag?: SetTriggerRefocusFlag,
-    topModalOverride?: boolean
+    topModalOverride?: boolean,
   ) => {
     if (!modal) {
       return;
diff --git a/src/components/modal/modal.component.tsx b/src/components/modal/modal.component.tsx
index 1b15de34b8..e4b1c725bb 100644
--- a/src/components/modal/modal.component.tsx
+++ b/src/components/modal/modal.component.tsx
@@ -80,7 +80,7 @@ const Modal = ({
         onCancel(ev);
       }
     },
-    [disableClose, disableEscKey, onCancel]
+    [disableClose, disableEscKey, onCancel],
   );
 
   useModalManager({
diff --git a/src/components/modal/modal.test.tsx b/src/components/modal/modal.test.tsx
index 0a2a222ebd..300b6e53ec 100644
--- a/src/components/modal/modal.test.tsx
+++ b/src/components/modal/modal.test.tsx
@@ -70,7 +70,7 @@ test("closes top modal when the `escape` key is pressed", async () => {
     <>
       <Modal data-role="first-modal" open onCancel={onCancelFn} />
       <Modal data-role="second-modal" open onCancel={onCancelFnTwo} />
-    </>
+    </>,
   );
 
   await user.keyboard("{Escape}");
@@ -93,7 +93,7 @@ test("does not fire `onCancel` if the `escape` key is pressed and no modals are
     <>
       <Modal data-role="first-modal" open={false} onCancel={onCancelFn} />
       <Modal data-role="second-modal" open={false} onCancel={onCancelFnTwo} />
-    </>
+    </>,
   );
 
   await user.keyboard("{Escape}");
@@ -114,7 +114,7 @@ test("does not fire `onCancel` if the `escape` key is pressed and `disableClose`
   render(
     <>
       <Modal data-role="first-modal" open disableClose onCancel={onCancelFn} />
-    </>
+    </>,
   );
 
   await user.keyboard("{Escape}");
diff --git a/src/components/multi-action-button/components.test-pw.tsx b/src/components/multi-action-button/components.test-pw.tsx
index db7740c246..74f7c8f417 100644
--- a/src/components/multi-action-button/components.test-pw.tsx
+++ b/src/components/multi-action-button/components.test-pw.tsx
@@ -8,7 +8,7 @@ import Box from "../box";
 import { Accordion } from "../accordion";
 
 export const MultiActionButtonList = (
-  props: Partial<MultiActionButtonProps>
+  props: Partial<MultiActionButtonProps>,
 ) => {
   return (
     <Box>
@@ -60,7 +60,7 @@ export const WithWrapper = (props: Partial<MultiActionButtonProps>) => (
   </MultiActionButton>
 );
 export const WithWrapperTwoButtons = (
-  props: Partial<MultiActionButtonProps>
+  props: Partial<MultiActionButtonProps>,
 ) => (
   <Box>
     <MultiActionButton text="Multi Action Button" {...props}>
@@ -77,7 +77,7 @@ export const WithWrapperTwoButtons = (
 );
 
 export const MultiActionTwoButtons = (
-  props: Partial<MultiActionButtonProps>
+  props: Partial<MultiActionButtonProps>,
 ) => {
   return (
     <Box>
diff --git a/src/components/multi-action-button/multi-action-button.component.tsx b/src/components/multi-action-button/multi-action-button.component.tsx
index 7873a76280..e73390e26a 100644
--- a/src/components/multi-action-button/multi-action-button.component.tsx
+++ b/src/components/multi-action-button/multi-action-button.component.tsx
@@ -56,7 +56,7 @@ export const MultiActionButton = ({
   const handleInsideClick = useClickAwayListener(hideButtons);
 
   const handleClick = (
-    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
   ) => {
     // ensure button is focused when clicked (Safari)
     buttonRef.current?.focus();
diff --git a/src/components/multi-action-button/multi-action-button.pw.tsx b/src/components/multi-action-button/multi-action-button.pw.tsx
index a9cc7aba5a..23746e3ecf 100644
--- a/src/components/multi-action-button/multi-action-button.pw.tsx
+++ b/src/components/multi-action-button/multi-action-button.pw.tsx
@@ -40,23 +40,23 @@ test.describe("Prop tests", () => {
 
   test(`should render with data-element`, async ({ mount, page }) => {
     await mount(
-      <MultiActionButtonList data-element="multi-action-button-playwright-element" />
+      <MultiActionButtonList data-element="multi-action-button-playwright-element" />,
     );
 
     await expect(getComponent(page, "multi-action-button")).toHaveAttribute(
       "data-element",
-      "multi-action-button-playwright-element"
+      "multi-action-button-playwright-element",
     );
   });
 
   test(`should render with data-role`, async ({ mount, page }) => {
     await mount(
-      <MultiActionButtonList data-role="multi-action-button-playwright-role" />
+      <MultiActionButtonList data-role="multi-action-button-playwright-role" />,
     );
 
     await expect(getComponent(page, "multi-action-button")).toHaveAttribute(
       "data-role",
-      "multi-action-button-playwright-role"
+      "multi-action-button-playwright-role",
     );
   });
 
@@ -71,11 +71,13 @@ test.describe("Prop tests", () => {
     });
   });
 
-  ([
-    [SIZE.SMALL, 32],
-    [SIZE.MEDIUM, 40],
-    [SIZE.LARGE, 48],
-  ] as [MultiActionButtonProps["size"], number][]).forEach(([size, height]) => {
+  (
+    [
+      [SIZE.SMALL, 32],
+      [SIZE.MEDIUM, 40],
+      [SIZE.LARGE, 48],
+    ] as [MultiActionButtonProps["size"], number][]
+  ).forEach(([size, height]) => {
     test(`should render with ${size} size`, async ({ mount, page }) => {
       await mount(<MultiActionButtonList size={size} />);
 
@@ -97,32 +99,32 @@ test.describe("Prop tests", () => {
         await expect(
           getDataElementByValue(page, "additional-buttons")
             .getByRole("button")
-            .first()
+            .first(),
         ).toHaveCSS("justify-content", alignment as string);
       });
-    }
+    },
   );
 
-  ([
-    ["left", 200],
-    ["right", 153],
-  ] as [MultiActionButtonProps["position"], number][]).forEach(
-    ([position, value]) => {
-      test(`should render with menu position to the ${position}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<MultiActionButtonList ml="200px" position={position} />);
+  (
+    [
+      ["left", 200],
+      ["right", 153],
+    ] as [MultiActionButtonProps["position"], number][]
+  ).forEach(([position, value]) => {
+    test(`should render with menu position to the ${position}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MultiActionButtonList ml="200px" position={position} />);
 
-        const actionButton = getComponent(page, "multi-action-button");
-        await actionButton.click();
-        const listContainer = getDataElementByValue(page, "additional-buttons");
-        await expect(listContainer).toHaveCSS("position", "absolute");
-        await assertCssValueIsApproximately(listContainer, "top", 45);
-        await assertCssValueIsApproximately(listContainer, "left", value);
-      });
-    }
-  );
+      const actionButton = getComponent(page, "multi-action-button");
+      await actionButton.click();
+      const listContainer = getDataElementByValue(page, "additional-buttons");
+      await expect(listContainer).toHaveCSS("position", "absolute");
+      await assertCssValueIsApproximately(listContainer, "top", 45);
+      await assertCssValueIsApproximately(listContainer, "left", value);
+    });
+  });
 
   test(`should render with button disabled`, async ({ mount, page }) => {
     await mount(<MultiActionButtonList disabled />);
@@ -137,7 +139,7 @@ test.describe("Prop tests", () => {
     await mount(<MultiActionButtonList />);
 
     const actionButton = getComponent(page, "multi-action-button").locator(
-      "button"
+      "button",
     );
     await actionButton.hover();
     await expect(actionButton).toHaveCSS("background-color", "rgb(0, 103, 56)");
@@ -150,7 +152,7 @@ test.describe("Prop tests", () => {
     await mount(<MultiActionButtonList width="70%" />);
 
     const actionButton = getComponent(page, "multi-action-button").locator(
-      "button"
+      "button",
     );
     await actionButton.hover();
     await expect(actionButton).toHaveCSS("justify-content", "space-between");
@@ -163,22 +165,19 @@ test.describe("Prop tests", () => {
     await mount(<MultiActionButtonList width="70%" />);
 
     const actionButton = getComponent(page, "multi-action-button").locator(
-      "button"
+      "button",
     );
     await actionButton.hover();
     await assertCssValueIsApproximately(actionButton, "width", 956);
   });
 
-  ([
-    ["primary", "rgb(0, 126, 69)", "rgb(255, 255, 255)", "rgba(0, 0, 0, 0)"],
-    ["secondary", "rgba(0, 0, 0, 0)", "rgb(0, 126, 69)", "rgb(0, 126, 69)"],
-    ["tertiary", "rgba(0, 0, 0, 0)", "rgb(0, 126, 69)", "rgba(0, 0, 0, 0)"],
-  ] as [
-    MultiActionButtonProps["buttonType"],
-    string,
-    string,
-    string
-  ][]).forEach(([buttonType, backgroundColor, color, borderColor]) => {
+  (
+    [
+      ["primary", "rgb(0, 126, 69)", "rgb(255, 255, 255)", "rgba(0, 0, 0, 0)"],
+      ["secondary", "rgba(0, 0, 0, 0)", "rgb(0, 126, 69)", "rgb(0, 126, 69)"],
+      ["tertiary", "rgba(0, 0, 0, 0)", "rgb(0, 126, 69)", "rgba(0, 0, 0, 0)"],
+    ] as [MultiActionButtonProps["buttonType"], string, string, string][]
+  ).forEach(([buttonType, backgroundColor, color, borderColor]) => {
     test(`should render ${buttonType} component with ${backgroundColor} background color, ${color} color and ${borderColor} border color`, async ({
       mount,
       page,
@@ -205,7 +204,7 @@ test.describe("Functional tests", () => {
       .locator("button")
       .click();
     await expect(getDataElementByValue(page, "additional-buttons")).toHaveCount(
-      1
+      1,
     );
   });
 
@@ -217,14 +216,14 @@ test.describe("Functional tests", () => {
       await mount(<MultiActionButtonList />);
 
       const actionButton = getComponent(page, "multi-action-button").locator(
-        "button"
+        "button",
       );
       await actionButton.focus();
       await page.keyboard.press(key);
       await expect(
         getDataElementByValue(page, "additional-buttons")
           .getByRole("button")
-          .first()
+          .first(),
       ).toBeFocused();
     });
   });
@@ -236,7 +235,7 @@ test.describe("Functional tests", () => {
     await mount(<MultiActionNestedInDialog />);
 
     const actionButton = getComponent(page, "multi-action-button").locator(
-      "button"
+      "button",
     );
     await actionButton.click();
     const listButton1 = getDataElementByValue(page, "additional-buttons")
@@ -294,7 +293,7 @@ test.describe("Functional tests", () => {
     await expect(listButton1).toBeFocused();
     await page.keyboard.press("Shift+Tab");
     await expect(
-      getComponent(page, "multi-action-button").locator("button")
+      getComponent(page, "multi-action-button").locator("button"),
     ).toBeFocused();
   });
 
@@ -345,7 +344,7 @@ test.describe("Functional tests", () => {
     await expect(listButton3).toBeFocused();
     await page.keyboard.press("Tab");
     await expect(
-      getComponent(page, "multi-action-button").nth(1).locator("button")
+      getComponent(page, "multi-action-button").nth(1).locator("button"),
     ).toBeFocused();
   });
 
@@ -500,11 +499,11 @@ test.describe("Functional tests", () => {
       .locator("button");
     await actionButton.click();
     await expect(getDataElementByValue(page, "additional-buttons")).toHaveCount(
-      1
+      1,
     );
     await page.keyboard.press("Escape");
     await expect(getDataElementByValue(page, "additional-buttons")).toHaveCount(
-      0
+      0,
     );
   });
 
@@ -519,302 +518,299 @@ test.describe("Functional tests", () => {
       .locator("button")
       .click();
     await expect(getDataElementByValue(page, "additional-buttons")).toHaveCount(
-      1
+      1,
     );
     await getDataElementByValue(page, "additional-buttons")
       .getByRole("button")
       .nth(0)
       .click();
     await expect(getDataElementByValue(page, "additional-buttons")).toHaveCount(
-      0
+      0,
     );
   });
 });
 
-test.describe(
-  "Functional tests with child buttons wrapped in a custom component",
-  () => {
-    test(`should verify pressing ArrowUp key does not loop focus to bottom`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
+test.describe("Functional tests with child buttons wrapped in a custom component", () => {
+  test(`should verify pressing ArrowUp key does not loop focus to bottom`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
 
-      const actionButton = getComponent(page, "multi-action-button")
-        .locator("button")
-        .first();
-      await actionButton.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-
-      await page.keyboard.press("ArrowUp");
-      await expect(listButton1).toBeFocused();
-      await page.keyboard.press("ArrowUp");
-      await expect(listButton1).toBeFocused();
-      await page.keyboard.press("ArrowUp");
-      await expect(listButton1).toBeFocused();
-    });
+    const actionButton = getComponent(page, "multi-action-button")
+      .locator("button")
+      .first();
+    await actionButton.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
 
-    test(`should verify pressing shift + tab moves focus to previous child buttons and to the MultiActionButton if first child button is focused`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
+    await page.keyboard.press("ArrowUp");
+    await expect(listButton1).toBeFocused();
+    await page.keyboard.press("ArrowUp");
+    await expect(listButton1).toBeFocused();
+    await page.keyboard.press("ArrowUp");
+    await expect(listButton1).toBeFocused();
+  });
 
-      const actionButton = getComponent(page, "multi-action-button")
-        .locator("button")
-        .first();
-      await actionButton.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-      const listButton2 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(1);
-
-      await listButton2.focus();
-      await page.keyboard.press("Shift+Tab");
-      await expect(listButton1).toBeFocused();
-      await page.keyboard.press("Shift+Tab");
-      await expect(
-        getComponent(page, "multi-action-button").locator("button")
-      ).toBeFocused();
-    });
+  test(`should verify pressing shift + tab moves focus to previous child buttons and to the MultiActionButton if first child button is focused`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
 
-    test(`should verify pressing ArrowDown key does not loop focus to top`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
+    const actionButton = getComponent(page, "multi-action-button")
+      .locator("button")
+      .first();
+    await actionButton.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
+    const listButton2 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(1);
 
-      const actionButton = getComponent(page, "multi-action-button")
-        .locator("button")
-        .first();
-      await actionButton.click();
-      const listButton3 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(2);
+    await listButton2.focus();
+    await page.keyboard.press("Shift+Tab");
+    await expect(listButton1).toBeFocused();
+    await page.keyboard.press("Shift+Tab");
+    await expect(
+      getComponent(page, "multi-action-button").locator("button"),
+    ).toBeFocused();
+  });
 
-      await listButton3.focus();
-      await page.keyboard.press("ArrowDown");
-      await expect(listButton3).toBeFocused();
-    });
+  test(`should verify pressing ArrowDown key does not loop focus to top`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
 
-    test(`should verify pressing tab moves focus to next child buttons and to second MultiActionButton if last child button is focused`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapperTwoButtons />);
+    const actionButton = getComponent(page, "multi-action-button")
+      .locator("button")
+      .first();
+    await actionButton.click();
+    const listButton3 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(2);
 
-      const actionButton = getComponent(page, "multi-action-button")
-        .first()
-        .locator("button");
-      await actionButton.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-      const listButton2 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(1);
-      const listButton3 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(2);
-
-      await page.keyboard.press("Tab");
-      await expect(listButton1).toBeFocused();
-      await page.keyboard.press("Tab");
-      await expect(listButton2).toBeFocused();
-      await page.keyboard.press("Tab");
-      await expect(listButton3).toBeFocused();
-      await page.keyboard.press("Tab");
-      await expect(
-        getComponent(page, "multi-action-button").nth(1).locator("button")
-      ).toBeFocused();
-    });
+    await listButton3.focus();
+    await page.keyboard.press("ArrowDown");
+    await expect(listButton3).toBeFocused();
+  });
 
-    test(`should verify that pressing metaKey + ArrowUp moves focus to first child button`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
+  test(`should verify pressing tab moves focus to next child buttons and to second MultiActionButton if last child button is focused`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapperTwoButtons />);
 
-      const actionButton = getComponent(page, "multi-action-button")
-        .locator("button")
-        .first();
-      await actionButton.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-      const listButton3 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(2);
-
-      await listButton3.focus();
-      await page.keyboard.down("Meta");
-      await page.keyboard.press("ArrowUp");
-      await page.keyboard.up("Meta");
-      await expect(listButton1).toBeFocused();
-    });
+    const actionButton = getComponent(page, "multi-action-button")
+      .first()
+      .locator("button");
+    await actionButton.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
+    const listButton2 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(1);
+    const listButton3 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(2);
 
-    test(`should verify that pressing ctrlKey + ArrowUp moves focus to first child button`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
-
-      const actionButtonComp = getComponent(page, "multi-action-button")
-        .locator("button")
-        .first();
-      await actionButtonComp.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-      const listButton3 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(2);
-
-      await listButton3.focus();
-      await page.keyboard.down("Control");
-      await page.keyboard.press("ArrowUp");
-      await page.keyboard.up("Control");
-      await expect(listButton1).toBeFocused();
-    });
+    await page.keyboard.press("Tab");
+    await expect(listButton1).toBeFocused();
+    await page.keyboard.press("Tab");
+    await expect(listButton2).toBeFocused();
+    await page.keyboard.press("Tab");
+    await expect(listButton3).toBeFocused();
+    await page.keyboard.press("Tab");
+    await expect(
+      getComponent(page, "multi-action-button").nth(1).locator("button"),
+    ).toBeFocused();
+  });
 
-    test(`should verify that pressing Home key moves focus to first child button`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
+  test(`should verify that pressing metaKey + ArrowUp moves focus to first child button`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
 
-      const actionButton = getComponent(page, "multi-action-button")
-        .locator("button")
-        .first();
-      await actionButton.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-      const listButton3 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(2);
-
-      await listButton3.focus();
-      await page.keyboard.press("Home");
-      await expect(listButton1).toBeFocused();
-    });
+    const actionButton = getComponent(page, "multi-action-button")
+      .locator("button")
+      .first();
+    await actionButton.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
+    const listButton3 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(2);
 
-    test(`should verify that pressing metaKey + ArrowDown moves focus to last child button`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
+    await listButton3.focus();
+    await page.keyboard.down("Meta");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.up("Meta");
+    await expect(listButton1).toBeFocused();
+  });
 
-      const actionButton = getComponent(page, "multi-action-button")
-        .locator("button")
-        .first();
-      await actionButton.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-      const listButton3 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(2);
-      await page.keyboard.press("Tab");
-      await expect(listButton1).toBeFocused();
-      await page.keyboard.down("Meta");
-      await page.keyboard.press("ArrowDown");
-      await page.keyboard.up("Meta");
-      await expect(listButton3).toBeFocused();
-    });
+  test(`should verify that pressing ctrlKey + ArrowUp moves focus to first child button`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
 
-    test(`should verify that pressing ctrlKey + ArrowDown moves focus to last child button`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
+    const actionButtonComp = getComponent(page, "multi-action-button")
+      .locator("button")
+      .first();
+    await actionButtonComp.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
+    const listButton3 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(2);
 
-      const actionButton = getComponent(page, "multi-action-button")
-        .locator("button")
-        .first();
-      await actionButton.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-      const listButton3 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(2);
-      await page.keyboard.press("Tab");
-      await expect(listButton1).toBeFocused();
-      await page.keyboard.down("Control");
-      await page.keyboard.press("ArrowDown");
-      await page.keyboard.up("Control");
-      await expect(listButton3).toBeFocused();
-    });
+    await listButton3.focus();
+    await page.keyboard.down("Control");
+    await page.keyboard.press("ArrowUp");
+    await page.keyboard.up("Control");
+    await expect(listButton1).toBeFocused();
+  });
 
-    test(`should verify that pressing End key moves focus to last child button`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
+  test(`should verify that pressing Home key moves focus to first child button`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
 
-      const actionButton = getComponent(page, "multi-action-button")
-        .locator("button")
-        .first();
-      await actionButton.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-      const listButton3 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(2);
-      await page.keyboard.press("Tab");
-      await expect(listButton1).toBeFocused();
-      await page.keyboard.press("End");
-      await expect(listButton3).toBeFocused();
-    });
+    const actionButton = getComponent(page, "multi-action-button")
+      .locator("button")
+      .first();
+    await actionButton.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
+    const listButton3 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(2);
 
-    test(`should verify that pressing Esc key closes MultiActionButton`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
+    await listButton3.focus();
+    await page.keyboard.press("Home");
+    await expect(listButton1).toBeFocused();
+  });
 
-      const actionButton = getComponent(page, "multi-action-button")
-        .locator("button")
-        .first();
-      await actionButton.click();
-      await expect(
-        getDataElementByValue(page, "additional-buttons")
-      ).toHaveCount(1);
-      await page.keyboard.press("Escape");
-      await expect(
-        getDataElementByValue(page, "additional-buttons")
-      ).toHaveCount(0);
-    });
+  test(`should verify that pressing metaKey + ArrowDown moves focus to last child button`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
 
-    test(`should verify that clicking one of the child buttons closes MultiActionButton`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<WithWrapper />);
+    const actionButton = getComponent(page, "multi-action-button")
+      .locator("button")
+      .first();
+    await actionButton.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
+    const listButton3 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(2);
+    await page.keyboard.press("Tab");
+    await expect(listButton1).toBeFocused();
+    await page.keyboard.down("Meta");
+    await page.keyboard.press("ArrowDown");
+    await page.keyboard.up("Meta");
+    await expect(listButton3).toBeFocused();
+  });
 
-      await getComponent(page, "multi-action-button")
-        .locator("button")
-        .first()
-        .click();
-      await expect(
-        getDataElementByValue(page, "additional-buttons")
-      ).toHaveCount(1);
-      await getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0)
-        .click();
-      await expect(
-        getDataElementByValue(page, "additional-buttons")
-      ).toHaveCount(0);
-    });
-  }
-);
+  test(`should verify that pressing ctrlKey + ArrowDown moves focus to last child button`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
+
+    const actionButton = getComponent(page, "multi-action-button")
+      .locator("button")
+      .first();
+    await actionButton.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
+    const listButton3 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(2);
+    await page.keyboard.press("Tab");
+    await expect(listButton1).toBeFocused();
+    await page.keyboard.down("Control");
+    await page.keyboard.press("ArrowDown");
+    await page.keyboard.up("Control");
+    await expect(listButton3).toBeFocused();
+  });
+
+  test(`should verify that pressing End key moves focus to last child button`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
+
+    const actionButton = getComponent(page, "multi-action-button")
+      .locator("button")
+      .first();
+    await actionButton.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
+    const listButton3 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(2);
+    await page.keyboard.press("Tab");
+    await expect(listButton1).toBeFocused();
+    await page.keyboard.press("End");
+    await expect(listButton3).toBeFocused();
+  });
+
+  test(`should verify that pressing Esc key closes MultiActionButton`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
+
+    const actionButton = getComponent(page, "multi-action-button")
+      .locator("button")
+      .first();
+    await actionButton.click();
+    await expect(getDataElementByValue(page, "additional-buttons")).toHaveCount(
+      1,
+    );
+    await page.keyboard.press("Escape");
+    await expect(getDataElementByValue(page, "additional-buttons")).toHaveCount(
+      0,
+    );
+  });
+
+  test(`should verify that clicking one of the child buttons closes MultiActionButton`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<WithWrapper />);
+
+    await getComponent(page, "multi-action-button")
+      .locator("button")
+      .first()
+      .click();
+    await expect(getDataElementByValue(page, "additional-buttons")).toHaveCount(
+      1,
+    );
+    await getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0)
+      .click();
+    await expect(getDataElementByValue(page, "additional-buttons")).toHaveCount(
+      0,
+    );
+  });
+});
 
 test.describe("Accessibility tests", () => {
   test(`should pass tests for default component`, async ({ mount, page }) => {
@@ -839,11 +835,9 @@ test.describe("Accessibility tests", () => {
     await checkAccessibility(page);
   });
 
-  ([
-    SIZE.SMALL,
-    SIZE.MEDIUM,
-    SIZE.LARGE,
-  ] as MultiActionButtonProps["size"][]).forEach((size) => {
+  (
+    [SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE] as MultiActionButtonProps["size"][]
+  ).forEach((size) => {
     test(`should pass tests with size prop set to ${size}`, async ({
       mount,
       page,
@@ -860,11 +854,13 @@ test.describe("Accessibility tests", () => {
     await checkAccessibility(page);
   });
 
-  ([
-    "primary",
-    "secondary",
-    "tertiary",
-  ] as MultiActionButtonProps["buttonType"][]).forEach((type) => {
+  (
+    [
+      "primary",
+      "secondary",
+      "tertiary",
+    ] as MultiActionButtonProps["buttonType"][]
+  ).forEach((type) => {
     test(`should pass tests with buttonType prop set as ${type}`, async ({
       mount,
       page,
@@ -896,7 +892,7 @@ test.describe("Accessibility tests", () => {
         await page.getByRole("button").click();
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   testData.forEach((subtext) => {
@@ -922,113 +918,110 @@ test.describe("Accessibility tests", () => {
   });
 });
 
-test.describe(
-  "Focus outline and border radius tests for MultiActionButton",
-  () => {
-    test(`should render with the expected border radius on main button`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MultiActionButtonList />);
-
-      const actionButton = page.getByRole("button");
-      await expect(actionButton).toHaveCSS("border-radius", "32px");
-    });
+test.describe("Focus outline and border radius tests for MultiActionButton", () => {
+  test(`should render with the expected border radius on main button`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MultiActionButtonList />);
 
-    test(`should render with the expected border radius on children container and buttons`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MultiActionButtonList />);
+    const actionButton = page.getByRole("button");
+    await expect(actionButton).toHaveCSS("border-radius", "32px");
+  });
 
-      const actionButton = page.getByRole("button");
-      await actionButton.click();
-      const listContainer = getDataElementByValue(page, "additional-buttons");
-      await expect(listContainer).toHaveCSS("border-radius", "8px");
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-      const listButton2 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(1);
-      const listButton3 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(2);
-      await expect(listButton1).toHaveCSS("border-radius", "8px 8px 0px 0px");
-      await expect(listButton2).toHaveCSS("border-radius", "0px");
-      await expect(listButton3).toHaveCSS("border-radius", "0px 0px 8px 8px");
-    });
+  test(`should render with the expected border radius on children container and buttons`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MultiActionButtonList />);
 
-    test(`should render with the expected border radius when some children buttons have href prop`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MultiActionWithHrefChildren />);
+    const actionButton = page.getByRole("button");
+    await actionButton.click();
+    const listContainer = getDataElementByValue(page, "additional-buttons");
+    await expect(listContainer).toHaveCSS("border-radius", "8px");
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
+    const listButton2 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(1);
+    const listButton3 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(2);
+    await expect(listButton1).toHaveCSS("border-radius", "8px 8px 0px 0px");
+    await expect(listButton2).toHaveCSS("border-radius", "0px");
+    await expect(listButton3).toHaveCSS("border-radius", "0px 0px 8px 8px");
+  });
 
-      const actionButton = page.getByRole("button");
-      await actionButton.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("listitem")
-        .nth(0)
-        .locator("> *")
-        .first();
-      const listButton2 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("listitem")
-        .nth(1)
-        .locator("> *")
-        .first();
-      const listButton3 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("listitem")
-        .nth(2)
-        .locator("> *")
-        .first();
-      await expect(listButton1).toHaveCSS("border-radius", "8px 8px 0px 0px");
-      await expect(listButton2).toHaveCSS("border-radius", "0px");
-      await expect(listButton3).toHaveCSS("border-radius", "0px 0px 8px 8px");
-    });
+  test(`should render with the expected border radius when some children buttons have href prop`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MultiActionWithHrefChildren />);
 
-    test(`should render with the expected border radius when there is only on one child button`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MultiActionButtonWithOneChild />);
+    const actionButton = page.getByRole("button");
+    await actionButton.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("listitem")
+      .nth(0)
+      .locator("> *")
+      .first();
+    const listButton2 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("listitem")
+      .nth(1)
+      .locator("> *")
+      .first();
+    const listButton3 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("listitem")
+      .nth(2)
+      .locator("> *")
+      .first();
+    await expect(listButton1).toHaveCSS("border-radius", "8px 8px 0px 0px");
+    await expect(listButton2).toHaveCSS("border-radius", "0px");
+    await expect(listButton3).toHaveCSS("border-radius", "0px 0px 8px 8px");
+  });
 
-      const actionButton = page.getByRole("button");
-      await actionButton.click();
-      const listButton1 = getDataElementByValue(page, "additional-buttons")
-        .getByRole("button")
-        .nth(0);
-      await expect(listButton1).toHaveCSS("border-radius", "8px");
-    });
+  test(`should render with the expected border radius when there is only on one child button`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MultiActionButtonWithOneChild />);
 
-    test(`should render with the expected styling when the focusRedesignOptOut is false`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<MultiActionButtonList />);
+    const actionButton = page.getByRole("button");
+    await actionButton.click();
+    const listButton1 = getDataElementByValue(page, "additional-buttons")
+      .getByRole("button")
+      .nth(0);
+    await expect(listButton1).toHaveCSS("border-radius", "8px");
+  });
 
-      const actionButton = page.getByRole("button");
-      await actionButton.focus();
-      await expect(actionButton).toHaveCSS(
-        "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
-      );
-    });
+  test(`should render with the expected styling when the focusRedesignOptOut is false`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MultiActionButtonList />);
 
-    test(`should render with the expected styling when the focusRedesignOptOut is true`, async ({
-      mount,
-      page,
-    }) => {
-      await mount<HooksConfig>(<MultiActionButtonList />, {
-        hooksConfig: { focusRedesignOptOut: true },
-      });
+    const actionButton = page.getByRole("button");
+    await actionButton.focus();
+    await expect(actionButton).toHaveCSS(
+      "box-shadow",
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
+    );
+  });
 
-      const actionButton = page.getByRole("button");
-      await actionButton.focus();
-      await expect(actionButton).toHaveCSS(
-        "border",
-        "3px solid rgb(255, 188, 25)"
-      );
+  test(`should render with the expected styling when the focusRedesignOptOut is true`, async ({
+    mount,
+    page,
+  }) => {
+    await mount<HooksConfig>(<MultiActionButtonList />, {
+      hooksConfig: { focusRedesignOptOut: true },
     });
-  }
-);
+
+    const actionButton = page.getByRole("button");
+    await actionButton.focus();
+    await expect(actionButton).toHaveCSS(
+      "border",
+      "3px solid rgb(255, 188, 25)",
+    );
+  });
+});
diff --git a/src/components/multi-action-button/multi-action-button.stories.tsx b/src/components/multi-action-button/multi-action-button.stories.tsx
index 368c5da128..dfc2302565 100644
--- a/src/components/multi-action-button/multi-action-button.stories.tsx
+++ b/src/components/multi-action-button/multi-action-button.stories.tsx
@@ -57,7 +57,7 @@ export const Sizes: Story = () => {
           <Button size={size}>Button 3</Button>
         </MultiActionButton>
       </Box>
-    )
+    ),
   );
 };
 Sizes.storyName = "Sizes";
@@ -90,7 +90,7 @@ export const ButtonTypes: Story = () => {
           <Button>Button 3</Button>
         </MultiActionButton>
       </Box>
-    )
+    ),
   );
 };
 ButtonTypes.storyName = "Button Types";
@@ -131,7 +131,7 @@ export const Alignment: Story = () => {
           <Button>Button 3</Button>
         </MultiActionButton>
       </Box>
-    )
+    ),
   );
 };
 Alignment.storyName = "Alignment";
diff --git a/src/components/multi-action-button/multi-action-button.test.tsx b/src/components/multi-action-button/multi-action-button.test.tsx
index 14ebd2ebd7..cca8b09fea 100644
--- a/src/components/multi-action-button/multi-action-button.test.tsx
+++ b/src/components/multi-action-button/multi-action-button.test.tsx
@@ -9,7 +9,7 @@ test("should render with provided 'text'", () => {
   render(
     <MultiActionButton text="Main Button">
       <Button>First</Button>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   expect(screen.getByRole("button", { name: "Main Button" })).toBeVisible();
@@ -19,7 +19,7 @@ test("should render with provided 'subtext' when 'size' is 'large'", () => {
   render(
     <MultiActionButton text="Main Button" subtext="Subtext" size="large">
       <Button>First</Button>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   expect(screen.getByText("Subtext")).toBeVisible();
@@ -30,7 +30,7 @@ test("should render when children are non-Carbon Button children", async () => {
   render(
     <MultiActionButton text="Main Button">
       <span>First</span>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   await user.click(screen.getByRole("button", { name: "Main Button" }));
@@ -42,7 +42,7 @@ test("should render with provided 'data-' tags", () => {
   render(
     <MultiActionButton text="Main Button" data-element="foo" data-role="bar">
       <Button>First</Button>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   expect(screen.getByTestId("bar")).toHaveAttribute("data-element", "foo");
@@ -52,12 +52,12 @@ test("should render with provided 'id'", () => {
   render(
     <MultiActionButton text="Main Button" id="test">
       <Button>First</Button>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   expect(screen.getByRole("button", { name: "Main Button" })).toHaveAttribute(
     "id",
-    "test"
+    "test",
   );
 });
 
@@ -67,7 +67,7 @@ test("should call 'onClick' when the main button is clicked", async () => {
   render(
     <MultiActionButton text="Main Button" onClick={onClick}>
       <Button>First</Button>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   await user.click(screen.getByRole("button", { name: "Main Button" }));
@@ -80,7 +80,7 @@ test("should open additional buttons when the main button is clicked", async ()
   render(
     <MultiActionButton text="Main Button">
       <Button>First</Button>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   await user.click(screen.getByRole("button", { name: "Main Button" }));
@@ -93,14 +93,14 @@ test("should close additional buttons when a child button is clicked", async ()
   render(
     <MultiActionButton text="Main Button">
       <Button>First</Button>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   await user.click(screen.getByRole("button", { name: "Main Button" }));
   await user.click(screen.getByRole("button", { name: "First" }));
 
   expect(
-    screen.queryByRole("button", { name: "First" })
+    screen.queryByRole("button", { name: "First" }),
   ).not.toBeInTheDocument();
 });
 
@@ -109,14 +109,14 @@ test("should close additional buttons when a click occurs outside the component"
   render(
     <MultiActionButton text="Main Button">
       <Button>First</Button>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   await user.click(screen.getByRole("button", { name: "Main Button" }));
   await user.click(document.body);
 
   expect(
-    screen.queryByRole("button", { name: "First" })
+    screen.queryByRole("button", { name: "First" }),
   ).not.toBeInTheDocument();
 });
 
@@ -124,7 +124,7 @@ test("should render main button as disabled when 'disabled' prop is true", () =>
   render(
     <MultiActionButton text="Main Button" disabled>
       <Button>First</Button>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   expect(screen.getByRole("button", { name: "Main Button" })).toBeDisabled();
@@ -138,7 +138,7 @@ test("should render with expected styles when 'width' prop is set", () => {
       data-role="multi-action-button"
     >
       <Button>First</Button>
-    </MultiActionButton>
+    </MultiActionButton>,
   );
 
   expect(screen.getByTestId("multi-action-button")).toHaveStyle({
@@ -156,5 +156,5 @@ testStyledSystemMarginRTL(
       <Button>Test</Button>
     </MultiActionButton>
   ),
-  () => screen.getByTestId("multi-action-button")
+  () => screen.getByTestId("multi-action-button"),
 );
diff --git a/src/components/navigation-bar/__internal__/fixed-navigation-bar-context.test.tsx b/src/components/navigation-bar/__internal__/fixed-navigation-bar-context.test.tsx
index a41ac1190b..ece3b6a443 100644
--- a/src/components/navigation-bar/__internal__/fixed-navigation-bar-context.test.tsx
+++ b/src/components/navigation-bar/__internal__/fixed-navigation-bar-context.test.tsx
@@ -17,7 +17,7 @@ const mockNavbarElement = { offsetHeight: 40 } as HTMLElement;
 const navbarRef = { current: mockNavbarElement };
 
 const MockComponent = (
-  props: Omit<FixedNavigationBarContextProviderProps, "navbarRef">
+  props: Omit<FixedNavigationBarContextProviderProps, "navbarRef">,
 ) => {
   return (
     <FixedNavigationBarContextProvider navbarRef={navbarRef} {...props}>
@@ -32,18 +32,18 @@ describe("FixedNavigationBarContextProvider", () => {
     (position) => {
       it("does not provide a max-height", () => {
         render(
-          <MockComponent position={position} orientation="top" offset="20px" />
+          <MockComponent position={position} orientation="top" offset="20px" />,
         );
         const result = screen.getByTestId("output");
         expect(result).toHaveTextContent("");
       });
-    }
+    },
   );
 
   describe("when the position is fixed and the orientation is top", () => {
     it("computes the max height correctly", () => {
       render(
-        <MockComponent position="fixed" orientation="top" offset="20px" />
+        <MockComponent position="fixed" orientation="top" offset="20px" />,
       );
       const result = screen.getByTestId("output");
       expect(result).toHaveTextContent("calc(100vh - 40px - 20px)");
@@ -53,7 +53,7 @@ describe("FixedNavigationBarContextProvider", () => {
   describe("when the position is fixed and the orientation is bottom", () => {
     it("computes the max height correctly", () => {
       render(
-        <MockComponent position="fixed" orientation="bottom" offset="20px" />
+        <MockComponent position="fixed" orientation="bottom" offset="20px" />,
       );
       const result = screen.getByTestId("output");
       expect(result).toHaveTextContent("20px");
@@ -71,7 +71,7 @@ describe("FixedNavigationBarContextProvider", () => {
   describe("when the height of the navbar changes", () => {
     it("the max height is recalculated", () => {
       render(
-        <MockComponent position="fixed" orientation="top" offset="20px" />
+        <MockComponent position="fixed" orientation="top" offset="20px" />,
       );
       const result = screen.getByTestId("output");
       expect(result).toHaveTextContent("calc(100vh - 40px - 20px)");
diff --git a/src/components/navigation-bar/__internal__/fixed-navigation-bar.context.tsx b/src/components/navigation-bar/__internal__/fixed-navigation-bar.context.tsx
index 69ade73f0b..aa8fb38797 100644
--- a/src/components/navigation-bar/__internal__/fixed-navigation-bar.context.tsx
+++ b/src/components/navigation-bar/__internal__/fixed-navigation-bar.context.tsx
@@ -7,7 +7,7 @@ type FixedNavigationBarContextProps = {
 };
 
 const FixedNavigationBarContext = createContext<FixedNavigationBarContextProps>(
-  {}
+  {},
 );
 
 export interface FixedNavigationBarContextProviderProps
@@ -26,12 +26,12 @@ export const FixedNavigationBarContextProvider = ({
   navbarRef,
 }: FixedNavigationBarContextProviderProps) => {
   const [navbarHeight, setNavbarHeight] = useState(
-    navbarRef.current?.offsetHeight
+    navbarRef.current?.offsetHeight,
   );
 
   const updateHeight = useCallback(
     () => setNavbarHeight(navbarRef.current?.offsetHeight),
-    [navbarRef]
+    [navbarRef],
   );
 
   useEffect(() => {
diff --git a/src/components/navigation-bar/navigation-bar.pw.tsx b/src/components/navigation-bar/navigation-bar.pw.tsx
index f79ebc5f9e..c9d1f00e4e 100644
--- a/src/components/navigation-bar/navigation-bar.pw.tsx
+++ b/src/components/navigation-bar/navigation-bar.pw.tsx
@@ -48,7 +48,7 @@ test.describe("Test props for NavigationBar component", () => {
       page,
     }) => {
       await mount(
-        <NavigationBarComponent>{childrenValue}</NavigationBarComponent>
+        <NavigationBarComponent>{childrenValue}</NavigationBarComponent>,
       );
 
       await expect(navigationBar(page)).toHaveText(childrenValue);
@@ -80,7 +80,7 @@ test.describe("Test props for NavigationBar component", () => {
       await mount(
         <NavigationBarComponent isLoading={boolean}>
           {testData}
-        </NavigationBarComponent>
+        </NavigationBarComponent>,
       );
 
       const navigation = page.locator(`[data-component="navigation-bar"]`);
@@ -99,7 +99,7 @@ test.describe("Test props for NavigationBar component", () => {
       page,
     }) => {
       await mount(
-        <NavigationBarComponent position={position} orientation="top" />
+        <NavigationBarComponent position={position} orientation="top" />,
       );
 
       await expect(navigationBar(page)).toHaveCSS("position", position);
@@ -112,7 +112,7 @@ test.describe("Test props for NavigationBar component", () => {
       page,
     }) => {
       await mount(
-        <NavigationBarComponent position={position} orientation="bottom" />
+        <NavigationBarComponent position={position} orientation="bottom" />,
       );
 
       await expect(navigationBar(page)).toHaveCSS("position", position);
@@ -129,7 +129,7 @@ test.describe("Test props for NavigationBar component", () => {
           offset={`${offset}px`}
           orientation="top"
           position="fixed"
-        />
+        />,
       );
 
       await expect(navigationBar(page)).toHaveCSS("top", `${offset}px`);
@@ -146,7 +146,7 @@ test.describe("Test props for NavigationBar component", () => {
           offset={`${offset}px`}
           orientation="bottom"
           position="fixed"
-        />
+        />,
       );
 
       await expect(navigationBar(page)).toHaveCSS("bottom", `${offset}px`);
@@ -159,7 +159,7 @@ test.describe("Test props for NavigationBar component", () => {
       page,
     }) => {
       await mount(
-        <NavigationBarComponent orientation={orientation} position="fixed" />
+        <NavigationBarComponent orientation={orientation} position="fixed" />,
       );
 
       await expect(navigationBar(page)).toHaveCSS(orientation, "0px");
@@ -211,7 +211,7 @@ test.describe("Test props for NavigationBar component", () => {
                 </Menu>
               </Box>
             </NavigationBar>
-          </div>
+          </div>,
         );
 
         await expect(navigationBar(page).nth(0)).toBeVisible();
@@ -228,7 +228,7 @@ test.describe("Test props for NavigationBar component", () => {
 
         await expect(navigationBar(page).nth(1)).toBeVisible();
       });
-    }
+    },
   );
 
   test.describe("Accessibility tests for NavigationBar component", () => {
diff --git a/src/components/navigation-bar/navigation-bar.test.tsx b/src/components/navigation-bar/navigation-bar.test.tsx
index 9dceb214ea..205b577391 100644
--- a/src/components/navigation-bar/navigation-bar.test.tsx
+++ b/src/components/navigation-bar/navigation-bar.test.tsx
@@ -10,7 +10,7 @@ test("renders with children", () => {
   render(
     <NavigationBar>
       <div>test content</div>
-    </NavigationBar>
+    </NavigationBar>,
   );
 
   expect(screen.getByRole("navigation")).toHaveTextContent("test content");
@@ -21,7 +21,7 @@ test("does not render children when `isLoading` is true", () => {
   render(
     <NavigationBar isLoading>
       <div>test content</div>
-    </NavigationBar>
+    </NavigationBar>,
   );
 
   expect(screen.getByRole("navigation")).not.toHaveTextContent("test content");
@@ -31,12 +31,12 @@ test("renders with 'data-component' set to 'navigation-bar'", () => {
   render(
     <NavigationBar>
       <div>test content</div>
-    </NavigationBar>
+    </NavigationBar>,
   );
 
   expect(screen.getByRole("navigation")).toHaveAttribute(
     "data-component",
-    "navigation-bar"
+    "navigation-bar",
   );
 });
 
@@ -44,7 +44,7 @@ test("renders with provided `aria-label` as its accessible name", () => {
   render(
     <NavigationBar ariaLabel="test label">
       <div>test content</div>
-    </NavigationBar>
+    </NavigationBar>,
   );
 
   expect(screen.getByRole("navigation")).toHaveAccessibleName("test label");
@@ -55,16 +55,16 @@ test("renders with correct styles when `navigationType` is 'light'", () => {
   render(
     <NavigationBar navigationType="light">
       <div>test content</div>
-    </NavigationBar>
+    </NavigationBar>,
   );
 
   expect(screen.getByRole("navigation")).toHaveStyleRule(
     "background-color",
-    "var(--colorsComponentsMenuSpringStandard500)"
+    "var(--colorsComponentsMenuSpringStandard500)",
   );
   expect(screen.getByRole("navigation")).toHaveStyleRule(
     "border-bottom",
-    "var(--borderWidth100) solid var(--colorsComponentsMenuSpringChildAlt500)"
+    "var(--borderWidth100) solid var(--colorsComponentsMenuSpringChildAlt500)",
   );
 });
 
@@ -73,16 +73,16 @@ test("renders with correct styles when `navigationType` is 'dark'", () => {
   render(
     <NavigationBar navigationType="dark">
       <div>test content</div>
-    </NavigationBar>
+    </NavigationBar>,
   );
 
   expect(screen.getByRole("navigation")).toHaveStyleRule(
     "background-color",
-    "var(--colorsComponentsMenuAutumnStandard500)"
+    "var(--colorsComponentsMenuAutumnStandard500)",
   );
   expect(screen.getByRole("navigation")).toHaveStyleRule(
     "color",
-    "var(--colorsComponentsMenuYang100)"
+    "var(--colorsComponentsMenuYang100)",
   );
 });
 
@@ -91,16 +91,16 @@ test("renders with correct styles when `navigationType` is 'black'", () => {
   render(
     <NavigationBar navigationType="black">
       <div>test content</div>
-    </NavigationBar>
+    </NavigationBar>,
   );
 
   expect(screen.getByRole("navigation")).toHaveStyleRule(
     "background-color",
-    "var(--colorsComponentsMenuWinterStandard500)"
+    "var(--colorsComponentsMenuWinterStandard500)",
   );
   expect(screen.getByRole("navigation")).toHaveStyleRule(
     "color",
-    "var(--colorsComponentsMenuYang100)"
+    "var(--colorsComponentsMenuYang100)",
   );
 });
 
@@ -109,16 +109,16 @@ test("renders with correct styles when `navigationType` is 'white'", () => {
   render(
     <NavigationBar navigationType="white">
       <div>test content</div>
-    </NavigationBar>
+    </NavigationBar>,
   );
 
   expect(screen.getByRole("navigation")).toHaveStyleRule(
     "background-color",
-    "var(--colorsComponentsMenuSummerStandard500)"
+    "var(--colorsComponentsMenuSummerStandard500)",
   );
   expect(screen.getByRole("navigation")).toHaveStyleRule(
     "border-bottom",
-    "var(--borderWidth100) solid var(--colorsComponentsMenuSummerChildAlt500)"
+    "var(--borderWidth100) solid var(--colorsComponentsMenuSummerChildAlt500)",
   );
 });
 
@@ -127,7 +127,7 @@ test("renders with correct styles when `position` is 'fixed' and `orientation` i
   render(
     <NavigationBar position="fixed" orientation="top">
       <div>test content</div>
-    </NavigationBar>
+    </NavigationBar>,
   );
 
   expect(screen.getByRole("navigation")).toHaveStyle({
@@ -142,10 +142,10 @@ testStyledSystemPaddingRTL(
   (props) => <NavigationBar {...props}>test content</NavigationBar>,
   () => screen.getByRole("navigation"),
   undefined,
-  { modifier: "&&" }
+  { modifier: "&&" },
 );
 
 testStyledSystemFlexBox(
   (props) => <NavigationBar {...props}>test content</NavigationBar>,
-  () => screen.getByRole("navigation")
+  () => screen.getByRole("navigation"),
 );
diff --git a/src/components/note/__internal__/status-icon/status-icon.component.tsx b/src/components/note/__internal__/status-icon/status-icon.component.tsx
index 3f2b3e7b44..ac85d616aa 100644
--- a/src/components/note/__internal__/status-icon/status-icon.component.tsx
+++ b/src/components/note/__internal__/status-icon/status-icon.component.tsx
@@ -18,7 +18,7 @@ const StatusIcon = React.forwardRef<HTMLDivElement, StatusIconProps>(
         </StyledStatusIconWrapper>
       </Tooltip>
     );
-  }
+  },
 );
 
 StatusIcon.displayName = "StatusIcon";
diff --git a/src/components/note/components.test-pw.tsx b/src/components/note/components.test-pw.tsx
index 3c0266bc13..f2f658cd30 100644
--- a/src/components/note/components.test-pw.tsx
+++ b/src/components/note/components.test-pw.tsx
@@ -34,7 +34,7 @@ const NoteComponentWithInlineControl = () => {
   const blocksFromHTML = convertFromHTML(html);
   const content = ContentState.createFromBlockArray(
     blocksFromHTML.contentBlocks,
-    blocksFromHTML.entityMap
+    blocksFromHTML.entityMap,
   );
   const noteContentVal = EditorState.createWithContent(content);
   const inlineControl = (
@@ -55,7 +55,7 @@ const NoteComponentWithInlineControl = () => {
 
 const NoteComponentWithPreviews = () => {
   const noteContent = EditorState.createWithContent(
-    ContentState.createFromText("Here is some plain text content")
+    ContentState.createFromText("Here is some plain text content"),
   );
   const previews = [
     <LinkPreview
diff --git a/src/components/note/note-test.stories.tsx b/src/components/note/note-test.stories.tsx
index 0f0b79d2c0..417a84ef03 100644
--- a/src/components/note/note-test.stories.tsx
+++ b/src/components/note/note-test.stories.tsx
@@ -23,7 +23,7 @@ export const DefaultStory = ({
   ...args
 }: Omit<NoteProps, "noteContent">) => {
   const noteContent = EditorState.createWithContent(
-    ContentState.createFromText("Here is some plain text content")
+    ContentState.createFromText("Here is some plain text content"),
   );
   return (
     <Note
@@ -56,7 +56,7 @@ export const InlineControlMenuButton = ({
   const blocksFromHTML = convertFromHTML(html);
   const content = ContentState.createFromBlockArray(
     blocksFromHTML.contentBlocks,
-    blocksFromHTML.entityMap
+    blocksFromHTML.entityMap,
   );
   const noteContent = EditorState.createWithContent(content);
 
@@ -104,7 +104,7 @@ InlineControlMenuButton.parameters = {
 
 export const TitleNodes = () => {
   const noteContent = EditorState.createWithContent(
-    ContentState.createFromText("Here is some plain text content")
+    ContentState.createFromText("Here is some plain text content"),
   );
 
   const titleElements = (
diff --git a/src/components/note/note.component.tsx b/src/components/note/note.component.tsx
index d0cfbd6897..20dcde5510 100644
--- a/src/components/note/note.component.tsx
+++ b/src/components/note/note.component.tsx
@@ -44,7 +44,7 @@ export interface NoteProps extends MarginProps {
 
 function hasExpectedDisplayName(
   child: React.ReactElement,
-  displayName: string
+  displayName: string,
 ) {
   return (child.type as React.FunctionComponent).displayName === displayName;
 }
@@ -66,7 +66,7 @@ export const Note = ({
     !inlineControl ||
       (React.isValidElement(inlineControl) &&
         inlineControl.type === ActionPopover),
-    "<Note> inlineControl must be an instance of <ActionPopover>"
+    "<Note> inlineControl must be an instance of <ActionPopover>",
   );
 
   const renderStatus = () => {
@@ -120,9 +120,9 @@ export const Note = ({
             hasExpectedDisplayName(preview, LinkPreview.displayName)
               ? React.cloneElement<LinkPreviewProps>(
                   preview as React.ReactElement<LinkPreviewProps>,
-                  { as: "a", onClose: undefined }
+                  { as: "a", onClose: undefined },
                 )
-              : preview
+              : preview,
           )}
         </StyledNoteContent>
 
diff --git a/src/components/note/note.pw.tsx b/src/components/note/note.pw.tsx
index 68a3f09412..710021c019 100644
--- a/src/components/note/note.pw.tsx
+++ b/src/components/note/note.pw.tsx
@@ -48,7 +48,7 @@ test.describe("check props for Note component", () => {
       await mount(
         <Box width="250px">
           <NoteComponent width={width} />
-        </Box>
+        </Box>,
       );
 
       const widthVal = await getStyle(noteComponent(page), "width");
@@ -107,7 +107,7 @@ test.describe("check props for Note component", () => {
             text: value,
             timeStamp: `${CHARACTERS.STANDARD}`,
           }}
-        />
+        />,
       );
 
       await noteStatus(page).hover();
@@ -149,7 +149,7 @@ test.describe("check action events for Note component", () => {
         onLinkAdded={() => {
           hasOnLinkAddedBeenCalledCount += 1;
         }}
-      />
+      />,
     );
 
     await expect(page.getByText("https://carbon.s")).toBeAttached();
@@ -233,7 +233,7 @@ test.describe("Accessibility tests for Note component", () => {
             text: value,
             timeStamp: `${CHARACTERS.STANDARD}`,
           }}
-        />
+        />,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/note/note.stories.tsx b/src/components/note/note.stories.tsx
index 8446f60579..ad53a59dfe 100644
--- a/src/components/note/note.stories.tsx
+++ b/src/components/note/note.stories.tsx
@@ -37,7 +37,7 @@ type Story = StoryObj<typeof Note>;
 
 export const Default: Story = () => {
   const noteContent = EditorState.createWithContent(
-    ContentState.createFromText("Here is some plain text content")
+    ContentState.createFromText("Here is some plain text content"),
   );
   return (
     <div style={{ height: 200, width: "50%" }}>
@@ -60,7 +60,7 @@ export const WithRichText: Story = () => {
   const blocksFromHTML = convertFromHTML(html);
   const content = ContentState.createFromBlockArray(
     blocksFromHTML.contentBlocks,
-    blocksFromHTML.entityMap
+    blocksFromHTML.entityMap,
   );
   const noteContent = EditorState.createWithContent(content);
   return (
@@ -84,7 +84,7 @@ export const WithTitle: Story = () => {
   const blocksFromHTML = convertFromHTML(html);
   const content = ContentState.createFromBlockArray(
     blocksFromHTML.contentBlocks,
-    blocksFromHTML.entityMap
+    blocksFromHTML.entityMap,
   );
   const noteContent = EditorState.createWithContent(content);
   const titleNode = <Typography variant="h3">Here is a Title Node</Typography>;
@@ -111,7 +111,7 @@ export const WithInlineControls: Story = () => {
   const blocksFromHTML = convertFromHTML(html);
   const content = ContentState.createFromBlockArray(
     blocksFromHTML.contentBlocks,
-    blocksFromHTML.entityMap
+    blocksFromHTML.entityMap,
   );
   const noteContent = EditorState.createWithContent(content);
   const inlineControl = (
@@ -144,7 +144,7 @@ export const WithStatus: Story = () => {
   const blocksFromHTML = convertFromHTML(html);
   const content = ContentState.createFromBlockArray(
     blocksFromHTML.contentBlocks,
-    blocksFromHTML.entityMap
+    blocksFromHTML.entityMap,
   );
   const noteContent = EditorState.createWithContent(content);
   const inlineControl = (
@@ -234,7 +234,7 @@ WithPreviews.storyName = "With Previews";
 
 export const WithMargin: Story = () => {
   const noteContent = EditorState.createWithContent(
-    ContentState.createFromText("Here is some plain text content")
+    ContentState.createFromText("Here is some plain text content"),
   );
   return (
     <Box width="50%">
diff --git a/src/components/note/note.style.ts b/src/components/note/note.style.ts
index 52c1d99aac..f248c350bb 100644
--- a/src/components/note/note.style.ts
+++ b/src/components/note/note.style.ts
@@ -53,7 +53,7 @@ ${variant}{
   line-height: 21px;
   padding-bottom: 16px;
 }
-  `
+  `,
   )}
 `;
 
diff --git a/src/components/note/note.test.tsx b/src/components/note/note.test.tsx
index b2e5706559..cc220e3ff2 100644
--- a/src/components/note/note.test.tsx
+++ b/src/components/note/note.test.tsx
@@ -13,7 +13,7 @@ test("should render with required props", () => {
     <Note
       createdDate="23 May 2020, 12:08 PM"
       noteContent={EditorState.createEmpty()}
-    />
+    />,
   );
 
   expect(screen.getByText("23 May 2020, 12:08 PM")).toBeVisible();
@@ -25,7 +25,7 @@ test("renders a Typography component with h2 `variant` and `title` as its child
       createdDate="23 May 2020, 12:08 PM"
       noteContent={EditorState.createEmpty()}
       title="Title"
-    />
+    />,
   );
 
   const titleElement = screen.getByRole("heading", { level: 2 });
@@ -44,7 +44,7 @@ test("renders the `title` node when `title` prop is a React node", () => {
           Title
         </Typography>
       }
-    />
+    />,
   );
 
   const titleNode = screen.getByRole("heading", { level: 4 });
@@ -59,7 +59,7 @@ test("should render with provided `name` prop", () => {
       createdDate="23 May 2020, 12:08 PM"
       noteContent={EditorState.createEmpty()}
       name="Carbon"
-    />
+    />,
   );
 
   expect(screen.getByText("Carbon")).toBeVisible();
@@ -75,7 +75,7 @@ test("should render tooltip containing status `timeStamp` when status `text` is
         text: "Edited",
         timeStamp: "23 May 2020, 12:10 PM",
       }}
-    />
+    />,
   );
 
   const statusText = screen.getByText("Edited");
@@ -99,7 +99,7 @@ test("should render LinkPreviews when passed via the `previews` prop as an array
       createdDate="23 May 2020, 12:08 PM"
       noteContent={EditorState.createEmpty()}
       previews={previews}
-    />
+    />,
   );
 
   const links = screen.getAllByRole("link");
@@ -120,7 +120,7 @@ test("should render LinkPreviews when passed via the `previews` prop as a node",
       createdDate="23 May 2020, 12:08 PM"
       noteContent={EditorState.createEmpty()}
       previews={previews}
-    />
+    />,
   );
 
   const links = screen.getAllByRole("link");
@@ -142,7 +142,7 @@ test("should render with `ActionPopover` when passed via the `inlineControl` pro
       createdDate="23 May 2020, 12:08 PM"
       noteContent={EditorState.createEmpty()}
       inlineControl={inlineControl}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "actions" }));
@@ -159,8 +159,8 @@ test("should throw when `inlineControls` is not an instance of `ActionPopover`",
         createdDate="23 May 2020, 12:08 PM"
         noteContent={EditorState.createEmpty()}
         inlineControl={<button type="button">A Button</button>}
-      />
-    )
+      />,
+    ),
   ).toThrow("<Note> inlineControl must be an instance of <ActionPopover>");
   spy.mockRestore();
 });
@@ -173,8 +173,8 @@ test("should throw when width is 0", () => {
         createdDate="23 May 2020, 12:08 PM"
         noteContent={EditorState.createEmpty()}
         width={0}
-      />
-    )
+      />,
+    ),
   ).toThrow("<Note> width must be greater than 0");
   spy.mockRestore();
 });
@@ -188,5 +188,5 @@ testStyledSystemMarginRTL(
       noteContent={EditorState.createEmpty()}
     />
   ),
-  () => screen.getByTestId("note")
+  () => screen.getByTestId("note"),
 );
diff --git a/src/components/number/number-validation-test.stories.tsx b/src/components/number/number-validation-test.stories.tsx
index c47a5820a0..d6d37cc789 100644
--- a/src/components/number/number-validation-test.stories.tsx
+++ b/src/components/number/number-validation-test.stories.tsx
@@ -161,7 +161,7 @@ export const NewValidation = () => {
               m={4}
             />
           </div>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
diff --git a/src/components/number/number.component.tsx b/src/components/number/number.component.tsx
index 48b99537d3..fdd9bc8c93 100644
--- a/src/components/number/number.component.tsx
+++ b/src/components/number/number.component.tsx
@@ -34,7 +34,7 @@ export const Number = React.forwardRef(
       validationOnLabel = LABEL_VALIDATION_DEFAULT,
       ...rest
     }: NumberProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     const selectionStart = useRef<null | number>(null);
     const selectionEnd = useRef<null | number>(null);
@@ -42,7 +42,7 @@ export const Number = React.forwardRef(
     if (!deprecateUncontrolledWarnTriggered && !onChange) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Number` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Number` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
@@ -53,13 +53,15 @@ export const Number = React.forwardRef(
         event.target.value = value || "";
         event.target.setSelectionRange(
           selectionStart.current,
-          selectionEnd.current
+          selectionEnd.current,
         );
       }
     };
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-      selectionStart.current = (event.target as HTMLInputElement).selectionStart;
+      selectionStart.current = (
+        event.target as HTMLInputElement
+      ).selectionStart;
       selectionEnd.current = (event.target as HTMLInputElement).selectionEnd;
 
       if (onKeyDown) {
@@ -79,7 +81,7 @@ export const Number = React.forwardRef(
         validationOnLabel={validationOnLabel}
       />
     );
-  }
+  },
 );
 
 Number.displayName = "Number";
diff --git a/src/components/number/number.pw.tsx b/src/components/number/number.pw.tsx
index fa84a52599..ccac1c7e8b 100644
--- a/src/components/number/number.pw.tsx
+++ b/src/components/number/number.pw.tsx
@@ -92,12 +92,9 @@ test.describe("check props for Number component", () => {
     });
   });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as NumberProps["tooltipPosition"][]).forEach((position) => {
+  (
+    ["top", "bottom", "left", "right"] as NumberProps["tooltipPosition"][]
+  ).forEach((position) => {
     test(`should render with tooltip positioned to the ${position}`, async ({
       mount,
       page,
@@ -108,14 +105,14 @@ test.describe("check props for Number component", () => {
             error={CHARACTERS.STANDARD}
             tooltipPosition={position}
           />
-        </Box>
+        </Box>,
       );
 
       await getDataElementByValue(page, "error").hover();
       await expect(tooltipPreview(page)).toHaveText(CHARACTERS.STANDARD);
       await expect(tooltipPreview(page)).toHaveAttribute(
         "data-placement",
-        position as string
+        position as string,
       );
     });
   });
@@ -125,14 +122,14 @@ test.describe("check props for Number component", () => {
       <NumberInputComponent
         labelHelp="fieldHelp"
         helpAriaLabel={CHARACTERS.STANDARD}
-      />
+      />,
     );
 
     const ariaHelpLabel = getDataComponentByValue(page, "help");
 
     await expect(ariaHelpLabel).toHaveAttribute(
       "aria-label",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -147,7 +144,7 @@ test.describe("check props for Number component", () => {
           labelAlign="right"
           validationOnLabel
           {...{ [type]: "Message" }}
-        />
+        />,
       );
 
       const labelParent = getDataElementByValue(page, "label").locator("..");
@@ -156,14 +153,16 @@ test.describe("check props for Number component", () => {
     });
   });
 
-  ([
-    [VALIDATION.ERROR, "error", true],
-    [VALIDATION.WARNING, "warning", true],
-    [VALIDATION.INFO, "info", true],
-    ["rgb(102, 132, 148)", "error", false],
-    ["rgb(102, 132, 148)", "warning", false],
-    ["rgb(102, 132, 148)", "info", false],
-  ] as [string, string, boolean][]).forEach(([borderColor, type, bool]) => {
+  (
+    [
+      [VALIDATION.ERROR, "error", true],
+      [VALIDATION.WARNING, "warning", true],
+      [VALIDATION.INFO, "info", true],
+      ["rgb(102, 132, 148)", "error", false],
+      ["rgb(102, 132, 148)", "warning", false],
+      ["rgb(102, 132, 148)", "info", false],
+    ] as [string, string, boolean][]
+  ).forEach(([borderColor, type, bool]) => {
     test(`should render with ${borderColor} input border when validation type ${type} is ${bool}`, async ({
       mount,
       page,
@@ -173,7 +172,7 @@ test.describe("check props for Number component", () => {
           labelInline
           labelAlign="right"
           {...{ [type]: bool }}
-        />
+        />,
       );
 
       await expect(number(page)).toHaveCSS("border-bottom-color", borderColor);
@@ -201,29 +200,27 @@ test.describe("check props for Number component", () => {
 
       await expect(commonDataElementInputPreview(page)).toHaveAttribute(
         "placeholder",
-        placeholderValue
+        placeholderValue,
       );
     });
   });
 
-  ([
-    [1, "8px"],
-    [2, "16px"],
-  ] as [NumberProps["labelSpacing"], string][]).forEach(
-    ([spacing, padding]) => {
-      test(`should render with labelSpacing prop ${spacing}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <NumberInputComponent labelInline labelSpacing={spacing} />
-        );
+  (
+    [
+      [1, "8px"],
+      [2, "16px"],
+    ] as [NumberProps["labelSpacing"], string][]
+  ).forEach(([spacing, padding]) => {
+    test(`should render with labelSpacing prop ${spacing}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<NumberInputComponent labelInline labelSpacing={spacing} />);
 
-        const labelParent = getDataElementByValue(page, "label").locator("..");
-        await expect(labelParent).toHaveCSS("padding-right", padding);
-      });
-    }
-  );
+      const labelParent = getDataElementByValue(page, "label").locator("..");
+      await expect(labelParent).toHaveCSS("padding-right", padding);
+    });
+  });
 
   [
     ["foo", "with"],
@@ -244,10 +241,12 @@ test.describe("check props for Number component", () => {
     });
   });
 
-  ([
-    [11, 11, "rgba(0, 0, 0, 0.55)"],
-    [11, 10, "rgb(203, 55, 74)"],
-  ] as [number, number, string][]).forEach(([charactersUsed, limit, color]) => {
+  (
+    [
+      [11, 11, "rgba(0, 0, 0, 0.55)"],
+      [11, 10, "rgb(203, 55, 74)"],
+    ] as [number, number, string][]
+  ).forEach(([charactersUsed, limit, color]) => {
     test(`should input ${charactersUsed} characters and warn if over character limit of ${limit}`, async ({
       mount,
       page,
@@ -267,7 +266,7 @@ test.describe("check props for Number component", () => {
           charactersUsed - limit
             ? `${charactersUsed - limit} ${overCharacters} too many`
             : `${charactersUsed - limit} ${underCharacters} left`
-        }`
+        }`,
       );
       await expect(characterLimit(page)).toHaveCSS("color", color);
     });
@@ -277,7 +276,7 @@ test.describe("check props for Number component", () => {
     await mount(<NumberInputComponent data-component={CHARACTERS.STANDARD} />);
 
     await expect(
-      getDataComponentByValue(page, CHARACTERS.STANDARD)
+      getDataComponentByValue(page, CHARACTERS.STANDARD),
     ).toBeVisible();
   });
 
@@ -285,7 +284,7 @@ test.describe("check props for Number component", () => {
     await mount(<NumberInputComponent data-element={CHARACTERS.STANDARD} />);
 
     await expect(
-      getDataElementByValue(page, CHARACTERS.STANDARD)
+      getDataElementByValue(page, CHARACTERS.STANDARD),
     ).toBeVisible();
   });
 
@@ -317,35 +316,35 @@ test.describe("check props for Number component", () => {
     await expect(commonDataElementInputPreview(page)).not.toBeEditable();
   });
 
-  ([
-    [SIZE.SMALL, "32px", "--sizing400"],
-    [SIZE.MEDIUM, "40px", "--sizing500"],
-    [SIZE.LARGE, "48px", "--sizing600"],
-  ] as [NumberProps["size"], string, string][]).forEach(
-    ([size, height, token]) => {
-      test(`should render with ${size} size and ${height} height when size prop is ${size}`, async ({
-        mount,
+  (
+    [
+      [SIZE.SMALL, "32px", "--sizing400"],
+      [SIZE.MEDIUM, "40px", "--sizing500"],
+      [SIZE.LARGE, "48px", "--sizing600"],
+    ] as [NumberProps["size"], string, string][]
+  ).forEach(([size, height, token]) => {
+    test(`should render with ${size} size and ${height} height when size prop is ${size}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<NumberInputComponent size={size} />);
+
+      await expect(number(page)).toHaveCSS("min-height", height);
+      const tokenValues = await getDesignTokensByCssProperty(
         page,
-      }) => {
-        await mount(<NumberInputComponent size={size} />);
-
-        await expect(number(page)).toHaveCSS("min-height", height);
-        const tokenValues = await getDesignTokensByCssProperty(
-          page,
-          number(page),
-          "min-height"
-        );
-        expect(tokenValues[0]).toBe(token);
-      });
-    }
-  );
+        number(page),
+        "min-height",
+      );
+      expect(tokenValues[0]).toBe(token);
+    });
+  });
 
   test("should render with name prop", async ({ mount, page }) => {
     await mount(<NumberInputComponent name={CHARACTERS.STANDARD} />);
 
     await expect(commonDataElementInputPreview(page)).toHaveAttribute(
       "name",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -367,28 +366,28 @@ test.describe("check props for Number component", () => {
     await expect(labelParent.locator("button")).toBeVisible();
   });
 
-  ([
-    ["flex", 399],
-    ["flex", 400],
-    ["block", 401],
-  ] as [string, NumberProps["adaptiveLabelBreakpoint"]][]).forEach(
-    ([displayValue, breakpoint]) => {
-      test(`should render with ${displayValue} label alignment when adaptiveLabelBreakpoint prop is ${breakpoint} with set viewport of 400`, async ({
-        mount,
-        page,
-      }) => {
-        await page.setViewportSize({ width: 400, height: 300 });
-        await mount(
-          <NumberInputComponent adaptiveLabelBreakpoint={breakpoint} />
-        );
-
-        const labelParentParent = getDataElementByValue(page, "label")
-          .locator("..")
-          .locator("..");
-        await expect(labelParentParent).toHaveCSS("display", displayValue);
-      });
-    }
-  );
+  (
+    [
+      ["flex", 399],
+      ["flex", 400],
+      ["block", 401],
+    ] as [string, NumberProps["adaptiveLabelBreakpoint"]][]
+  ).forEach(([displayValue, breakpoint]) => {
+    test(`should render with ${displayValue} label alignment when adaptiveLabelBreakpoint prop is ${breakpoint} with set viewport of 400`, async ({
+      mount,
+      page,
+    }) => {
+      await page.setViewportSize({ width: 400, height: 300 });
+      await mount(
+        <NumberInputComponent adaptiveLabelBreakpoint={breakpoint} />,
+      );
+
+      const labelParentParent = getDataElementByValue(page, "label")
+        .locator("..")
+        .locator("..");
+      await expect(labelParentParent).toHaveCSS("display", displayValue);
+    });
+  });
 
   test("should render as required", async ({ mount, page }) => {
     await mount(<NumberInputComponent required />);
@@ -409,39 +408,36 @@ test.describe("check props for Number component", () => {
     await expect(labelParent).toHaveCSS("-webkit-box-pack", "end");
   });
 
-  ([
-    ["left", "start"],
-    ["right", "end"],
-  ] as [NumberProps["labelAlign"], string][]).forEach(
-    ([alignment, cssProp]) => {
-      test(`should render with ${alignment} labelAlign prop and flex-${cssProp} css properties`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <NumberInputComponent labelInline labelAlign={alignment} />
-        );
-
-        const labelParent = getDataElementByValue(page, "label").locator("..");
-        await expect(labelParent).toHaveCSS("-webkit-box-pack", cssProp);
-        await expect(labelParent).toHaveCSS(
-          "justify-content",
-          `flex-${cssProp}`
-        );
-      });
-    }
-  );
-
-  ([
-    [10, 90, 135, 1229],
-    [30, 70, 409, 956],
-    [80, 20, 1092, 273],
-  ] as [
-    NumberProps["labelWidth"],
-    NumberProps["inputWidth"],
-    number,
-    number
-  ][]).forEach(([label, input, labelRatio, inputRatio]) => {
+  (
+    [
+      ["left", "start"],
+      ["right", "end"],
+    ] as [NumberProps["labelAlign"], string][]
+  ).forEach(([alignment, cssProp]) => {
+    test(`should render with ${alignment} labelAlign prop and flex-${cssProp} css properties`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<NumberInputComponent labelInline labelAlign={alignment} />);
+
+      const labelParent = getDataElementByValue(page, "label").locator("..");
+      await expect(labelParent).toHaveCSS("-webkit-box-pack", cssProp);
+      await expect(labelParent).toHaveCSS("justify-content", `flex-${cssProp}`);
+    });
+  });
+
+  (
+    [
+      [10, 90, 135, 1229],
+      [30, 70, 409, 956],
+      [80, 20, 1092, 273],
+    ] as [
+      NumberProps["labelWidth"],
+      NumberProps["inputWidth"],
+      number,
+      number,
+    ][]
+  ).forEach(([label, input, labelRatio, inputRatio]) => {
     test(`should render with correct ratios when labelWidth prop is ${label} and inputWidth prop is ${input}`, async ({
       mount,
       page,
@@ -451,7 +447,7 @@ test.describe("check props for Number component", () => {
           labelInline
           labelWidth={label}
           inputWidth={input}
-        />
+        />,
       );
 
       const labelParent = getDataElementByValue(page, "label").locator("..");
@@ -496,7 +492,7 @@ test.describe("check events", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await commonDataElementInputPreview(page).type(inputValue);
@@ -514,7 +510,7 @@ test.describe("check events", () => {
           onKeyDown={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       const elementInput = commonDataElementInputPreview(page);
@@ -535,7 +531,7 @@ test.describe("check events", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const elementInput = commonDataElementInputPreview(page);
@@ -555,7 +551,7 @@ test.describe("check events", () => {
         onMouseDown={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const elementInput = commonDataElementInputPreview(page);
diff --git a/src/components/number/number.test.tsx b/src/components/number/number.test.tsx
index f4fd1930ac..b6332b7504 100644
--- a/src/components/number/number.test.tsx
+++ b/src/components/number/number.test.tsx
@@ -106,7 +106,7 @@ test("logs a deprecation warning when uncontrolled", () => {
   render(<Number />);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Number` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Number` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
 
diff --git a/src/components/numeral-date/numeral-date-test.stories.tsx b/src/components/numeral-date/numeral-date-test.stories.tsx
index 32cc54a09f..333c9bf1c6 100644
--- a/src/components/numeral-date/numeral-date-test.stories.tsx
+++ b/src/components/numeral-date/numeral-date-test.stories.tsx
@@ -176,7 +176,7 @@ export const NewDesignValidations = () => {
               m={4}
             />
           </div>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
@@ -199,7 +199,7 @@ export const NewDesignValidationsWithLabelInline = () => {
               labelInline
             />
           </div>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
diff --git a/src/components/numeral-date/numeral-date.component.tsx b/src/components/numeral-date/numeral-date.component.tsx
index 95fce1c1d1..8f1d47c03d 100644
--- a/src/components/numeral-date/numeral-date.component.tsx
+++ b/src/components/numeral-date/numeral-date.component.tsx
@@ -50,7 +50,7 @@ export interface FullDate extends DayMonthDate {
 export type NumeralDateObject = DayMonthDate | MonthYearDate | FullDate;
 
 export interface NumeralDateEvent<
-  DateType extends NumeralDateObject = FullDate
+  DateType extends NumeralDateObject = FullDate,
 > {
   target: {
     name?: string;
@@ -142,7 +142,7 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
   isOptional?: boolean;
 }
 
-export type ValidDateFormat = typeof ALLOWED_DATE_FORMATS[number];
+export type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
 
 const incorrectDateFormatMessage =
   "Forbidden prop dateFormat supplied to NumeralDate. " +
@@ -164,11 +164,11 @@ const getMonthsForLocale = (localeName: string) => {
 const validationMessages = (
   locale: Locale,
   month?: string,
-  daysInMonth?: string
+  daysInMonth?: string,
 ) => ({
   dd: locale.numeralDate.validation.day(
     month ? getMonthsForLocale(locale.locale())[+month - 1] : undefined,
-    daysInMonth
+    daysInMonth,
   ),
   mm: locale.numeralDate.validation.month(),
   yyyy: locale.numeralDate.validation.year(),
@@ -272,9 +272,9 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
   const labelIds = useRef([guid(), guid(), guid()]);
 
   const [internalMessages, setInternalMessages] = useState<DateType>({
-    ...((Object.fromEntries(
-      dateFormat.map((datePart) => [datePart, ""])
-    ) as Partial<FullDate>) as DateType),
+    ...(Object.fromEntries(
+      dateFormat.map((datePart) => [datePart, ""]),
+    ) as Partial<FullDate> as DateType),
   });
 
   const hasCorrectDateFormat = useMemo(() => {
@@ -282,7 +282,7 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
       !dateFormat ||
       ALLOWED_DATE_FORMATS.find(
         (allowedDateFormat) =>
-          JSON.stringify(allowedDateFormat) === JSON.stringify(dateFormat)
+          JSON.stringify(allowedDateFormat) === JSON.stringify(dateFormat),
       );
     return isAllowed;
   }, [dateFormat]);
@@ -296,19 +296,19 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
 
     invariant(
       isControlled.current === (value !== undefined),
-      modeSwitchedMessage
+      modeSwitchedMessage,
     );
   }, [value]);
 
   const [dateValue, setDateValue] = useState<DateType>({
     ...((initialValue ||
       (Object.fromEntries(
-        dateFormat.map((datePart) => [datePart, ""])
+        dateFormat.map((datePart) => [datePart, ""]),
       ) as Partial<FullDate>)) as DateType),
   });
 
   const createCustomEventObject = (
-    newValue: DateType
+    newValue: DateType,
   ): NumeralDateEvent<DateType> => ({
     target: {
       name,
@@ -332,7 +332,7 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
 
   const handleChange = (
     event: React.ChangeEvent<HTMLInputElement>,
-    datePart: keyof NumeralDateObject
+    datePart: keyof NumeralDateObject,
   ) => {
     const { value: newValue } = event.target;
 
@@ -362,7 +362,7 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
     }
     setTimeout(() => {
       const hasBlurred = !refs.current.find(
-        (ref) => ref === document.activeElement
+        (ref) => ref === document.activeElement,
       );
       /* istanbul ignore else */
       if (onBlur && hasBlurred) {
@@ -371,14 +371,14 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
     }, 5);
   };
 
-  const internalMessage = (Object.keys(
-    internalMessages
-  ) as (keyof DateType)[]).reduce(
+  const internalMessage = (
+    Object.keys(internalMessages) as (keyof DateType)[]
+  ).reduce(
     (combinedMessage, datePart) =>
       internalMessages[datePart]
         ? `${combinedMessage + internalMessages[datePart]}\n`
         : combinedMessage,
-    ""
+    "",
   );
   const internalError = enableInternalError ? internalMessage + error : error;
 
@@ -389,7 +389,7 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
   if (!deprecateUncontrolledWarnTriggered && !isControlled.current) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate(
-      "Uncontrolled behaviour in `Numeral Date` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+      "Uncontrolled behaviour in `Numeral Date` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
     );
   }
 
diff --git a/src/components/numeral-date/numeral-date.pw.tsx b/src/components/numeral-date/numeral-date.pw.tsx
index 653721fd2d..9dbd227390 100644
--- a/src/components/numeral-date/numeral-date.pw.tsx
+++ b/src/components/numeral-date/numeral-date.pw.tsx
@@ -54,7 +54,7 @@ test.describe("NumeralDate component", () => {
     await mount(<NumeralDateComponent data-component={CHARACTERS.STANDARD} />);
 
     await expect(
-      getDataComponentByValue(page, CHARACTERS.STANDARD)
+      getDataComponentByValue(page, CHARACTERS.STANDARD),
     ).toBeVisible();
   });
 
@@ -65,7 +65,7 @@ test.describe("NumeralDate component", () => {
     await mount(<NumeralDateComponent data-element={CHARACTERS.STANDARD} />);
 
     await expect(
-      getDataElementByValue(page, CHARACTERS.STANDARD)
+      getDataElementByValue(page, CHARACTERS.STANDARD),
     ).toBeVisible();
   });
 
@@ -104,34 +104,32 @@ test.describe("NumeralDate component", () => {
     await mount(<NumeralDateComponent labelInline />);
 
     const labelParent = await getDataElementByValue(page, "label").locator(
-      ".."
+      "..",
     );
     await expect(labelParent).toHaveCSS("justify-content", "flex-end");
   });
 
-  ([
-    ["left", "start"],
-    ["right", "end"],
-  ] as [NumeralDateProps["labelAlign"], string][]).forEach(
-    ([labelAlign, cssValue]) => {
-      test(`should render NumeralDate with labelAlign prop set to ${labelAlign}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <NumeralDateComponent labelInline labelAlign={labelAlign} />
-        );
-
-        const labelParent = await getDataElementByValue(page, "label").locator(
-          ".."
-        );
-        await expect(labelParent).toHaveCSS(
-          "justify-content",
-          `flex-${cssValue}`
-        );
-      });
-    }
-  );
+  (
+    [
+      ["left", "start"],
+      ["right", "end"],
+    ] as [NumeralDateProps["labelAlign"], string][]
+  ).forEach(([labelAlign, cssValue]) => {
+    test(`should render NumeralDate with labelAlign prop set to ${labelAlign}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<NumeralDateComponent labelInline labelAlign={labelAlign} />);
+
+      const labelParent = await getDataElementByValue(page, "label").locator(
+        "..",
+      );
+      await expect(labelParent).toHaveCSS(
+        "justify-content",
+        `flex-${cssValue}`,
+      );
+    });
+  });
 
   testData.forEach((labelHelp) => {
     test(`should render NumeralDate with labelHelp prop set to ${labelHelp}`, async ({
@@ -147,42 +145,40 @@ test.describe("NumeralDate component", () => {
     });
   });
 
-  ([
-    [1, "8px"],
-    [2, "16px"],
-  ] as [NumeralDateProps["labelSpacing"], string][]).forEach(
-    ([spacing, padding]) => {
-      test(`should render NumeralDate with labelSpacing prop set to ${spacing}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <NumeralDateComponent labelInline labelSpacing={spacing} />
-        );
+  (
+    [
+      [1, "8px"],
+      [2, "16px"],
+    ] as [NumeralDateProps["labelSpacing"], string][]
+  ).forEach(([spacing, padding]) => {
+    test(`should render NumeralDate with labelSpacing prop set to ${spacing}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<NumeralDateComponent labelInline labelSpacing={spacing} />);
 
-        const labelParent = getDataElementByValue(page, "label").locator("..");
-        await expect(labelParent).toHaveCSS("padding-right", padding);
-      });
-    }
-  );
-
-  ([
-    [10, 135],
-    [30, 409],
-    [80, 1092],
-  ] as [NumeralDateProps["labelWidth"], number][]).forEach(
-    ([label, labelRatio]) => {
-      test(`should use ${label} as labelWidth and render it with the correct ratio`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<NumeralDateComponent labelInline labelWidth={label} />);
+      const labelParent = getDataElementByValue(page, "label").locator("..");
+      await expect(labelParent).toHaveCSS("padding-right", padding);
+    });
+  });
 
-        const labelParent = getDataElementByValue(page, "label").locator("..");
-        await assertCssValueIsApproximately(labelParent, "width", labelRatio);
-      });
-    }
-  );
+  (
+    [
+      [10, 135],
+      [30, 409],
+      [80, 1092],
+    ] as [NumeralDateProps["labelWidth"], number][]
+  ).forEach(([label, labelRatio]) => {
+    test(`should use ${label} as labelWidth and render it with the correct ratio`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<NumeralDateComponent labelInline labelWidth={label} />);
+
+      const labelParent = getDataElementByValue(page, "label").locator("..");
+      await assertCssValueIsApproximately(labelParent, "width", labelRatio);
+    });
+  });
 
   test("should render NumeralDate with required prop", async ({
     mount,
@@ -198,7 +194,7 @@ test.describe("NumeralDate component", () => {
 
     await expect(numeralDateComponent(page)).toHaveAttribute(
       "name",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -232,7 +228,7 @@ test.describe("NumeralDate component", () => {
           labelInline
           labelAlign="right"
           {...{ [type]: "Message" }}
-        />
+        />,
       );
 
       const input = await numeralDateInput(page, 2).locator("..");
@@ -251,7 +247,7 @@ test.describe("NumeralDate component", () => {
           labelAlign="right"
           validationOnLabel
           {...{ [type]: "Message" }}
-        />
+        />,
       );
 
       const labelParent = getDataElementByValue(page, "label").locator("..");
@@ -279,7 +275,7 @@ test.describe("NumeralDate component", () => {
     page,
   }) => {
     await mount(
-      <NumeralDate defaultValue={{ dd: "10", mm: "12", yyyy: "2022" }} />
+      <NumeralDate defaultValue={{ dd: "10", mm: "12", yyyy: "2022" }} />,
     );
 
     await expect(numeralDateInput(page, 0)).toHaveValue("10");
@@ -287,32 +283,32 @@ test.describe("NumeralDate component", () => {
     await expect(numeralDateInput(page, 2)).toHaveValue("2022");
   });
 
-  ([
-    [0, "Day should be a number within a 1-31 range.", "Day"],
-    [1, "Month should be a number within a 1-12 range.", "Month"],
-    [2, "Year should be a number within a 1800-2200 range.", "Year"],
-  ] as [number, string, string][]).forEach(
-    ([inputIndex, tooltipText, field]) => {
-      test(`should render NumeralDate with error message for ${field} with enableInternalError prop`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<NumeralDateComponent enableInternalError />);
+  (
+    [
+      [0, "Day should be a number within a 1-31 range.", "Day"],
+      [1, "Month should be a number within a 1-12 range.", "Month"],
+      [2, "Year should be a number within a 1800-2200 range.", "Year"],
+    ] as [number, string, string][]
+  ).forEach(([inputIndex, tooltipText, field]) => {
+    test(`should render NumeralDate with error message for ${field} with enableInternalError prop`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<NumeralDateComponent enableInternalError />);
 
-        const errorInput = "55";
+      const errorInput = "55";
 
-        const input = numeralDateInput(page, inputIndex);
-        await input.fill(errorInput);
-        await input.blur();
+      const input = numeralDateInput(page, inputIndex);
+      await input.fill(errorInput);
+      await input.blur();
 
-        const errorIcon = numeralDateInput(page, 2).locator("..").locator(ICON);
-        await expect(errorIcon).toHaveAttribute("data-element", "error");
+      const errorIcon = numeralDateInput(page, 2).locator("..").locator(ICON);
+      await expect(errorIcon).toHaveAttribute("data-element", "error");
 
-        await errorIcon.hover();
-        await expect(tooltipPreview(page)).toHaveText(tooltipText);
-      });
-    }
-  );
+      await errorIcon.hover();
+      await expect(tooltipPreview(page)).toHaveText(tooltipText);
+    });
+  });
 
   dynamicValidations.forEach(([month, day, year, validationString]) => {
     test(`should display dynamic internal error message in tooltip when validationRedesignOptIn is false, month is ${month}, day is ${day} and year is ${year}`, async ({
@@ -323,7 +319,7 @@ test.describe("NumeralDate component", () => {
         <NumeralDateComponent
           enableInternalError
           value={{ dd: "", mm: month, yyyy: year }}
-        />
+        />,
       );
 
       const input = numeralDateInput(page, 0);
@@ -347,7 +343,7 @@ test.describe("NumeralDate component", () => {
         <NumeralDateComponent
           enableInternalWarning
           value={{ dd: "", mm: month, yyyy: year }}
-        />
+        />,
       );
 
       const input = numeralDateInput(page, 0);
@@ -372,7 +368,7 @@ test.describe("NumeralDate component", () => {
           enableInternalError
           value={{ dd: "", mm: month, yyyy: year }}
         />,
-        { hooksConfig: { validationRedesignOptIn: true } }
+        { hooksConfig: { validationRedesignOptIn: true } },
       );
 
       const input = numeralDateInput(page, 0);
@@ -394,7 +390,7 @@ test.describe("NumeralDate component", () => {
           enableInternalWarning
           value={{ dd: "", mm: month, yyyy: year }}
         />,
-        { hooksConfig: { validationRedesignOptIn: true } }
+        { hooksConfig: { validationRedesignOptIn: true } },
       );
 
       const input = numeralDateInput(page, 0);
@@ -406,34 +402,32 @@ test.describe("NumeralDate component", () => {
     });
   });
 
-  ([
-    [0, "Day should be a number within a 1-31 range.", "Day"],
-    [1, "Month should be a number within a 1-12 range.", "Month"],
-    [2, "Year should be a number within a 1800-2200 range.", "Year"],
-  ] as [number, string, string][]).forEach(
-    ([inputIndex, tooltipText, field]) => {
-      test(`should render NumeralDate with warning message for ${field} with enableInternalWarning prop`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<NumeralDateComponent enableInternalWarning />);
+  (
+    [
+      [0, "Day should be a number within a 1-31 range.", "Day"],
+      [1, "Month should be a number within a 1-12 range.", "Month"],
+      [2, "Year should be a number within a 1800-2200 range.", "Year"],
+    ] as [number, string, string][]
+  ).forEach(([inputIndex, tooltipText, field]) => {
+    test(`should render NumeralDate with warning message for ${field} with enableInternalWarning prop`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<NumeralDateComponent enableInternalWarning />);
 
-        const warningInput = "55";
+      const warningInput = "55";
 
-        const input = numeralDateInput(page, inputIndex);
-        await input.fill(warningInput);
-        await input.blur();
+      const input = numeralDateInput(page, inputIndex);
+      await input.fill(warningInput);
+      await input.blur();
 
-        const warningIcon = numeralDateInput(page, 2)
-          .locator("..")
-          .locator(ICON);
-        await expect(warningIcon).toHaveAttribute("data-element", "warning");
+      const warningIcon = numeralDateInput(page, 2).locator("..").locator(ICON);
+      await expect(warningIcon).toHaveAttribute("data-element", "warning");
 
-        await warningIcon.hover();
-        await expect(tooltipPreview(page)).toHaveText(tooltipText);
-      });
-    }
-  );
+      await warningIcon.hover();
+      await expect(tooltipPreview(page)).toHaveText(tooltipText);
+    });
+  });
 
   test('should render NumeralDate with `["dd", "mm", "yyyy"]` dateFormat prop', async ({
     mount,
@@ -490,14 +484,16 @@ test.describe("NumeralDate component", () => {
     await expect(numeralDateInputLabel(page, 2)).not.toBeVisible();
   });
 
-  ([
-    [VALIDATION.ERROR, "error", true],
-    [VALIDATION.WARNING, "warning", true],
-    [VALIDATION.INFO, "info", true],
-    ["rgb(102, 132, 148)", "error", false],
-    ["rgb(102, 132, 148)", "warning", false],
-    ["rgb(102, 132, 148)", "info", false],
-  ] as [string, string, boolean][]).forEach(([borderColor, type, bool]) => {
+  (
+    [
+      [VALIDATION.ERROR, "error", true],
+      [VALIDATION.WARNING, "warning", true],
+      [VALIDATION.INFO, "info", true],
+      ["rgb(102, 132, 148)", "error", false],
+      ["rgb(102, 132, 148)", "warning", false],
+      ["rgb(102, 132, 148)", "info", false],
+    ] as [string, string, boolean][]
+  ).forEach(([borderColor, type, bool]) => {
     test(`should render with ${borderColor} input border when validation type ${type} is ${bool}`, async ({
       mount,
       page,
@@ -507,7 +503,7 @@ test.describe("NumeralDate component", () => {
           labelInline
           labelAlign="right"
           {...{ [type]: bool }}
-        />
+        />,
       );
 
       const inputParent = numeralDateInput(page, 2).locator("..");
@@ -519,11 +515,13 @@ test.describe("NumeralDate component", () => {
     });
   });
 
-  ([
-    [SIZE.SMALL, 30],
-    [SIZE.MEDIUM, 38],
-    [SIZE.LARGE, 46],
-  ] as [NumeralDateProps["size"], number][]).forEach(([size, height]) => {
+  (
+    [
+      [SIZE.SMALL, 30],
+      [SIZE.MEDIUM, 38],
+      [SIZE.LARGE, 46],
+    ] as [NumeralDateProps["size"], number][]
+  ).forEach(([size, height]) => {
     test(`should use ${size} as size and render NumeralDate with ${height} as height`, async ({
       mount,
       page,
@@ -535,28 +533,28 @@ test.describe("NumeralDate component", () => {
     });
   });
 
-  ([
-    ["flex", 399],
-    ["flex", 400],
-    ["block", 401],
-  ] as [string, NumeralDateProps["adaptiveLabelBreakpoint"]][]).forEach(
-    ([displayValue, breakpoint]) => {
-      test(`should render NumeralDate with ${displayValue} label alignment when the adaptiveLabelBreakpoint prop is ${breakpoint} with a set viewport of 400`, async ({
-        mount,
-        page,
-      }) => {
-        await page.setViewportSize({ width: 400, height: 300 });
-        await mount(
-          <NumeralDateComponent adaptiveLabelBreakpoint={breakpoint} />
-        );
-
-        const labelParentParent = getDataElementByValue(page, "label")
-          .locator("..")
-          .locator("..");
-        await expect(labelParentParent).toHaveCSS("display", displayValue);
-      });
-    }
-  );
+  (
+    [
+      ["flex", 399],
+      ["flex", 400],
+      ["block", 401],
+    ] as [string, NumeralDateProps["adaptiveLabelBreakpoint"]][]
+  ).forEach(([displayValue, breakpoint]) => {
+    test(`should render NumeralDate with ${displayValue} label alignment when the adaptiveLabelBreakpoint prop is ${breakpoint} with a set viewport of 400`, async ({
+      mount,
+      page,
+    }) => {
+      await page.setViewportSize({ width: 400, height: 300 });
+      await mount(
+        <NumeralDateComponent adaptiveLabelBreakpoint={breakpoint} />,
+      );
+
+      const labelParentParent = getDataElementByValue(page, "label")
+        .locator("..")
+        .locator("..");
+      await expect(labelParentParent).toHaveCSS("display", displayValue);
+    });
+  });
 
   testData.forEach(([fieldHelp]) => {
     test(`should render NumeralDate with fieldHelp prop ${fieldHelp}`, async ({
@@ -569,12 +567,9 @@ test.describe("NumeralDate component", () => {
     });
   });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as NumeralDateProps["tooltipPosition"][]).forEach((position) => {
+  (
+    ["top", "bottom", "left", "right"] as NumeralDateProps["tooltipPosition"][]
+  ).forEach((position) => {
     test(`should render NumeralDate with tooltip positioned to the ${position}`, async ({
       mount,
       page,
@@ -585,7 +580,7 @@ test.describe("NumeralDate component", () => {
             error={CHARACTERS.STANDARD}
             tooltipPosition={position}
           />
-        </Box>
+        </Box>,
       );
 
       await getDataElementByValue(page, "error").hover();
@@ -593,7 +588,7 @@ test.describe("NumeralDate component", () => {
       await expect(tooltipPreview(page)).toHaveText(CHARACTERS.STANDARD);
       await expect(tooltipPreview(page)).toHaveAttribute(
         "data-placement",
-        position as string
+        position as string,
       );
     });
   });
@@ -606,7 +601,7 @@ test.describe("NumeralDate component", () => {
       <NumeralDateComponent
         labelHelp="fieldHelp"
         helpAriaLabel={CHARACTERS.STANDARD}
-      />
+      />,
     );
 
     const help = getDataComponentByValue(page, "help");
@@ -626,7 +621,7 @@ test.describe("NumeralDate component", () => {
           onChange={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       await numeralDateInput(page, 0).type(inputValue);
@@ -644,7 +639,7 @@ test.describe("NumeralDate component", () => {
           onBlur={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       const input = numeralDateInput(page, 0);
@@ -677,13 +672,15 @@ test.describe("NumeralDate component", () => {
       await checkAccessibility(page);
     });
 
-    ([
-      ["dd", "mm", "yyyy"],
-      ["mm", "dd", "yyyy"],
-      ["dd", "mm"],
-      ["mm", "dd"],
-      ["mm", "yyyy"],
-    ] as NumeralDateProps["dateFormat"][]).forEach((dateFormat) => {
+    (
+      [
+        ["dd", "mm", "yyyy"],
+        ["mm", "dd", "yyyy"],
+        ["dd", "mm"],
+        ["mm", "dd"],
+        ["mm", "yyyy"],
+      ] as NumeralDateProps["dateFormat"][]
+    ).forEach((dateFormat) => {
       test(`should pass accessibility tests for NumeralDate when dateFormat prop is ${dateFormat}`, async ({
         mount,
         page,
@@ -735,7 +732,11 @@ test.describe("NumeralDate component", () => {
       page,
     }) => {
       await mount(
-        <NumeralDateControlled labelInline labelAlign="right" labelWidth={30} />
+        <NumeralDateControlled
+          labelInline
+          labelAlign="right"
+          labelWidth={30}
+        />,
       );
 
       await checkAccessibility(page);
@@ -755,7 +756,7 @@ test.describe("NumeralDate component", () => {
           labelAlign="right"
           labelWidth={30}
           adaptiveLabelBreakpoint={960}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -769,7 +770,7 @@ test.describe("NumeralDate component", () => {
         <NumeralDateControlled
           labelHelp="Label help"
           helpAriaLabel="Label help"
-        />
+        />,
       );
 
       const question = getDataElementByValue(page, "question");
@@ -797,7 +798,7 @@ test.describe("NumeralDate component", () => {
 
           await checkAccessibility(page);
         });
-      }
+      },
     );
   });
 });
diff --git a/src/components/numeral-date/numeral-date.test.tsx b/src/components/numeral-date/numeral-date.test.tsx
index be06ebbf10..73c48da49a 100644
--- a/src/components/numeral-date/numeral-date.test.tsx
+++ b/src/components/numeral-date/numeral-date.test.tsx
@@ -14,7 +14,7 @@ testStyledSystemMarginRTL(
   // can be updated to use role="group" when FE-6832 is resolved
   () => screen.getByTestId("numeral-date"),
   undefined,
-  { modifier: "&&&" }
+  { modifier: "&&&" },
 );
 
 beforeEach(() => {
@@ -31,7 +31,7 @@ test("should display deprecation warning once when used in an uncontrolled manne
   render(<NumeralDate />);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Numeral Date` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Numeral Date` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
 
   expect(loggerSpy).toHaveBeenCalledTimes(1);
@@ -54,8 +54,8 @@ test("should display an error when invalid `dateFormat` prop passed", () => {
         dateFormat={["xx"]}
         value={{ dd: "", mm: "", yyyy: "" }}
         onChange={() => {}}
-      />
-    )
+      />,
+    ),
   ).toThrow(expected);
   consoleSpy.mockReset();
 });
@@ -65,7 +65,7 @@ test("should not throw an error if no `dateFormat` is passed", () => {
     .spyOn(global.console, "error")
     .mockImplementation(() => undefined);
   render(
-    <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />
+    <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />,
   );
 
   expect(consoleSpy).not.toHaveBeenCalled();
@@ -81,7 +81,7 @@ test("should throw when component changes from uncontrolled to controlled", () =
     rerender(<NumeralDate value={{ dd: "02", mm: "01", yyyy: "2020" }} />);
   }).toThrow(
     "Input elements should not switch from uncontrolled to controlled (or vice versa). " +
-      "Decide between using a controlled or uncontrolled input element for the lifetime of the component"
+      "Decide between using a controlled or uncontrolled input element for the lifetime of the component",
   );
   consoleSpy.mockReset();
 });
@@ -91,13 +91,13 @@ test("should throw when component changes from controlled to uncontrolled", () =
     .spyOn(global.console, "error")
     .mockImplementation(() => undefined);
   const { rerender } = render(
-    <NumeralDate value={{ dd: "02", mm: "01", yyyy: "2020" }} />
+    <NumeralDate value={{ dd: "02", mm: "01", yyyy: "2020" }} />,
   );
   expect(() => {
     rerender(<NumeralDate value={undefined} />);
   }).toThrow(
     "Input elements should not switch from uncontrolled to controlled (or vice versa). " +
-      "Decide between using a controlled or uncontrolled input element for the lifetime of the component"
+      "Decide between using a controlled or uncontrolled input element for the lifetime of the component",
   );
   consoleSpy.mockReset();
 });
@@ -111,7 +111,7 @@ describe("when the `error` prop is passed a string value and `validationRedesign
           onChange={() => {}}
           error="error"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -132,7 +132,7 @@ describe("when the `error` prop is passed a string value and `validationRedesign
           onChange={() => {}}
           error="error"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -150,7 +150,7 @@ describe("when the `error` prop is passed a string value and `validationRedesign
           onChange={() => {}}
           error="error"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -168,7 +168,7 @@ describe("when the `error` prop is passed a string value and `validationRedesign
           onChange={() => {}}
           error="error"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const yearInput = screen.getByRole("textbox", { name: "Year" });
@@ -187,7 +187,7 @@ describe("when the `error` prop is passed a boolean value and `validationRedesig
           onChange={() => {}}
           error
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -208,7 +208,7 @@ describe("when the `error` prop is passed a boolean value and `validationRedesig
           onChange={() => {}}
           error
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -226,7 +226,7 @@ describe("when the `error` prop is passed a boolean value and `validationRedesig
           onChange={() => {}}
           error
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -244,7 +244,7 @@ describe("when the `error` prop is passed a boolean value and `validationRedesig
           onChange={() => {}}
           error
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const yearInput = screen.getByRole("textbox", { name: "Year" });
@@ -263,7 +263,7 @@ describe("when the `warning` prop is passed a string value and `validationRedesi
           onChange={() => {}}
           warning="warning"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -284,14 +284,14 @@ describe("when the `warning` prop is passed a string value and `validationRedesi
           onChange={() => {}}
           warning="warning"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
     await user.hover(dayInput);
 
     expect(
-      await screen.findByRole("tooltip", { name: "warning" })
+      await screen.findByRole("tooltip", { name: "warning" }),
     ).toBeVisible();
   });
 
@@ -304,14 +304,14 @@ describe("when the `warning` prop is passed a string value and `validationRedesi
           onChange={() => {}}
           warning="warning"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
     await user.hover(monthInput);
 
     expect(
-      await screen.findByRole("tooltip", { name: "warning" })
+      await screen.findByRole("tooltip", { name: "warning" }),
     ).toBeVisible();
   });
 
@@ -324,14 +324,14 @@ describe("when the `warning` prop is passed a string value and `validationRedesi
           onChange={() => {}}
           warning="warning"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const yearInput = screen.getByRole("textbox", { name: "Year" });
     await user.hover(yearInput);
 
     expect(
-      await screen.findByRole("tooltip", { name: "warning" })
+      await screen.findByRole("tooltip", { name: "warning" }),
     ).toBeVisible();
   });
 });
@@ -345,7 +345,7 @@ describe("when the `warning` prop is passed a boolean value and `validationRedes
           onChange={() => {}}
           warning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -366,7 +366,7 @@ describe("when the `warning` prop is passed a boolean value and `validationRedes
           onChange={() => {}}
           warning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -384,7 +384,7 @@ describe("when the `warning` prop is passed a boolean value and `validationRedes
           onChange={() => {}}
           warning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -402,7 +402,7 @@ describe("when the `warning` prop is passed a boolean value and `validationRedes
           onChange={() => {}}
           warning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const yearInput = screen.getByRole("textbox", { name: "Year" });
@@ -421,7 +421,7 @@ describe("when the `info` prop is passed a string value and `validationRedesignO
           onChange={() => {}}
           info="info"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -442,7 +442,7 @@ describe("when the `info` prop is passed a string value and `validationRedesignO
           onChange={() => {}}
           info="info"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -460,7 +460,7 @@ describe("when the `info` prop is passed a string value and `validationRedesignO
           onChange={() => {}}
           info="info"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -478,7 +478,7 @@ describe("when the `info` prop is passed a string value and `validationRedesignO
           onChange={() => {}}
           info="info"
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const yearInput = screen.getByRole("textbox", { name: "Year" });
@@ -497,7 +497,7 @@ describe("when the `info` prop is passed a boolean value and `validationRedesign
           onChange={() => {}}
           info
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -518,7 +518,7 @@ describe("when the `info` prop is passed a boolean value and `validationRedesign
           onChange={() => {}}
           info
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -536,7 +536,7 @@ describe("when the `info` prop is passed a boolean value and `validationRedesign
           onChange={() => {}}
           info
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -554,7 +554,7 @@ describe("when the `info` prop is passed a boolean value and `validationRedesign
           onChange={() => {}}
           info
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const yearInput = screen.getByRole("textbox", { name: "Year" });
@@ -572,7 +572,7 @@ test("should render the validation message when the `error` prop is passed a str
         onChange={() => {}}
         error="error"
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -593,7 +593,7 @@ test("should not render the validation message when the `error` prop is passed a
         onChange={() => {}}
         error
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -614,7 +614,7 @@ test("should render the validation message when `warning` prop is passed a strin
         onChange={() => {}}
         warning="warning"
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -635,7 +635,7 @@ test("should not render the validation message when `warning` prop is passed a b
         onChange={() => {}}
         warning
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -657,14 +657,14 @@ test("should render the `labelHelp` text as additional content and not render th
         onChange={() => {}}
         labelHelp="labelHelp"
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const labelHelpText = screen.getByText("labelHelp");
 
   expect(labelHelpText).toBeVisible();
   expect(
-    screen.queryByRole("button", { name: "help" })
+    screen.queryByRole("button", { name: "help" }),
   ).not.toBeInTheDocument();
   expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
 });
@@ -679,7 +679,7 @@ test("should have the default styling when the `labelsInline` prop is set and `v
         labelHelp="labelHelp"
         labelInline
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const fields = screen.getAllByTestId("field-line");
@@ -697,14 +697,14 @@ test("should render the help icon and tooltip when `labelHelp` prop is set and `
         onChange={() => {}}
         labelHelp="labelHelp"
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const labelHelp = screen.getByRole("button", { name: "help" });
   await user.hover(labelHelp);
 
   expect(
-    await screen.findByRole("tooltip", { name: "labelHelp" })
+    await screen.findByRole("tooltip", { name: "labelHelp" }),
   ).toBeVisible();
 });
 
@@ -714,7 +714,7 @@ describe("when the `enableInternalError` prop is not set and `validationRedesign
     render(
       <CarbonProvider validationRedesignOptIn>
         <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -728,7 +728,7 @@ describe("when the `enableInternalError` prop is not set and `validationRedesign
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.queryByText("Day should be a number within a 1-31 range.")
+      screen.queryByText("Day should be a number within a 1-31 range."),
     ).not.toBeInTheDocument();
   });
 
@@ -737,7 +737,7 @@ describe("when the `enableInternalError` prop is not set and `validationRedesign
     render(
       <CarbonProvider validationRedesignOptIn>
         <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -750,7 +750,7 @@ describe("when the `enableInternalError` prop is not set and `validationRedesign
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.queryByText("Day should be a number within a 1-31 range.")
+      screen.queryByText("Day should be a number within a 1-31 range."),
     ).not.toBeInTheDocument();
   });
 
@@ -759,7 +759,7 @@ describe("when the `enableInternalError` prop is not set and `validationRedesign
     render(
       <CarbonProvider validationRedesignOptIn>
         <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -772,7 +772,7 @@ describe("when the `enableInternalError` prop is not set and `validationRedesign
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.queryByText("Month should be a number within a 1-12 range.")
+      screen.queryByText("Month should be a number within a 1-12 range."),
     ).not.toBeInTheDocument();
   });
 
@@ -781,7 +781,7 @@ describe("when the `enableInternalError` prop is not set and `validationRedesign
     render(
       <CarbonProvider validationRedesignOptIn>
         <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -794,7 +794,7 @@ describe("when the `enableInternalError` prop is not set and `validationRedesign
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.queryByText("Month should be a number within a 1-12 range.")
+      screen.queryByText("Month should be a number within a 1-12 range."),
     ).not.toBeInTheDocument();
   });
 });
@@ -809,7 +809,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -817,7 +817,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     await user.tab();
 
     expect(
-      screen.queryByText("Day should be a number within a 1-31 range.")
+      screen.queryByText("Day should be a number within a 1-31 range."),
     ).not.toBeInTheDocument();
   });
 
@@ -830,7 +830,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -843,7 +843,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     expect(monthInput).toBeInvalid();
     expect(yearInput).toBeInvalid();
     expect(
-      screen.getByText("Day should be a number within a 1-31 range.")
+      screen.getByText("Day should be a number within a 1-31 range."),
     ).toBeVisible();
   });
 
@@ -856,7 +856,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -869,7 +869,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     expect(monthInput).toBeInvalid();
     expect(yearInput).toBeInvalid();
     expect(
-      screen.getByText("Day should be a number within a 1-31 range.")
+      screen.getByText("Day should be a number within a 1-31 range."),
     ).toBeVisible();
   });
 
@@ -882,7 +882,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -895,7 +895,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     expect(monthInput).toBeInvalid();
     expect(yearInput).toBeInvalid();
     expect(
-      screen.getByText("Day in February should be a number within 1-28.")
+      screen.getByText("Day in February should be a number within 1-28."),
     ).toBeVisible();
   });
 
@@ -908,7 +908,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -916,7 +916,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     await user.tab();
 
     expect(
-      screen.queryByText("Day in February should be a number within 1-28.")
+      screen.queryByText("Day in February should be a number within 1-28."),
     ).not.toBeInTheDocument();
   });
 
@@ -929,7 +929,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -937,7 +937,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     await user.tab();
 
     expect(
-      screen.queryByText("Day in February should be a number within 1-28.")
+      screen.queryByText("Day in February should be a number within 1-28."),
     ).not.toBeInTheDocument();
   });
 
@@ -950,7 +950,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -963,7 +963,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     expect(monthInput).toBeInvalid();
     expect(yearInput).toBeInvalid();
     expect(
-      screen.getByText("Month should be a number within a 1-12 range.")
+      screen.getByText("Month should be a number within a 1-12 range."),
     ).toBeVisible();
   });
 
@@ -976,7 +976,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -989,7 +989,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     expect(monthInput).toBeInvalid();
     expect(yearInput).toBeInvalid();
     expect(
-      screen.getByText("Month should be a number within a 1-12 range.")
+      screen.getByText("Month should be a number within a 1-12 range."),
     ).toBeVisible();
   });
 
@@ -1002,7 +1002,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const yearInput = screen.getByRole("textbox", { name: "Year" });
@@ -1015,7 +1015,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     expect(monthInput).toBeInvalid();
     expect(yearInput).toBeInvalid();
     expect(
-      screen.getByText("Year should be a number within a 1800-2200 range.")
+      screen.getByText("Year should be a number within a 1800-2200 range."),
     ).toBeVisible();
   });
 
@@ -1028,7 +1028,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const yearInput = screen.getByRole("textbox", { name: "Year" });
@@ -1041,7 +1041,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     expect(monthInput).toBeInvalid();
     expect(yearInput).toBeInvalid();
     expect(
-      screen.getByText("Year should be a number within a 1800-2200 range.")
+      screen.getByText("Year should be a number within a 1800-2200 range."),
     ).toBeVisible();
   });
 
@@ -1054,7 +1054,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1066,8 +1066,8 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     expect(
       screen.getByText(
         "Day should be a number within a 1-31 range. " +
-          "Month should be a number within a 1-12 range."
-      )
+          "Month should be a number within a 1-12 range.",
+      ),
     ).toBeVisible();
   });
 
@@ -1080,7 +1080,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1092,8 +1092,8 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     expect(
       screen.getByText(
         "Day should be a number within a 1-31 range. " +
-          "Year should be a number within a 1800-2200 range."
-      )
+          "Year should be a number within a 1800-2200 range.",
+      ),
     ).toBeVisible();
   });
 
@@ -1106,7 +1106,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -1118,8 +1118,8 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
     expect(
       screen.getByText(
         "Month should be a number within a 1-12 range. " +
-          "Year should be a number within a 1800-2200 range."
-      )
+          "Year should be a number within a 1800-2200 range.",
+      ),
     ).toBeVisible();
   });
 
@@ -1132,7 +1132,7 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
           onChange={() => {}}
           enableInternalError
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1147,8 +1147,8 @@ describe("when the `enableInternalError` prop and `validationRedesignOptIn` are
       screen.getByText(
         "Day should be a number within a 1-31 range. " +
           "Month should be a number within a 1-12 range. " +
-          "Year should be a number within a 1800-2200 range."
-      )
+          "Year should be a number within a 1800-2200 range.",
+      ),
     ).toBeVisible();
   });
 });
@@ -1159,7 +1159,7 @@ describe("when the `enableInternalWarning` prop is not set and `validationRedesi
     render(
       <CarbonProvider validationRedesignOptIn>
         <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1173,7 +1173,7 @@ describe("when the `enableInternalWarning` prop is not set and `validationRedesi
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.queryByText("Day should be a number within a 1-31 range.")
+      screen.queryByText("Day should be a number within a 1-31 range."),
     ).not.toBeInTheDocument();
   });
 
@@ -1182,7 +1182,7 @@ describe("when the `enableInternalWarning` prop is not set and `validationRedesi
     render(
       <CarbonProvider validationRedesignOptIn>
         <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1195,7 +1195,7 @@ describe("when the `enableInternalWarning` prop is not set and `validationRedesi
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.queryByText("Day should be a number within a 1-31 range.")
+      screen.queryByText("Day should be a number within a 1-31 range."),
     ).not.toBeInTheDocument();
   });
 
@@ -1204,7 +1204,7 @@ describe("when the `enableInternalWarning` prop is not set and `validationRedesi
     render(
       <CarbonProvider validationRedesignOptIn>
         <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -1217,7 +1217,7 @@ describe("when the `enableInternalWarning` prop is not set and `validationRedesi
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.queryByText("Month should be a number within a 1-12 range.")
+      screen.queryByText("Month should be a number within a 1-12 range."),
     ).not.toBeInTheDocument();
   });
 
@@ -1226,7 +1226,7 @@ describe("when the `enableInternalWarning` prop is not set and `validationRedesi
     render(
       <CarbonProvider validationRedesignOptIn>
         <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -1239,7 +1239,7 @@ describe("when the `enableInternalWarning` prop is not set and `validationRedesi
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.queryByText("Month should be a number within a 1-12 range.")
+      screen.queryByText("Month should be a number within a 1-12 range."),
     ).not.toBeInTheDocument();
   });
 });
@@ -1254,7 +1254,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1262,7 +1262,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     await user.tab();
 
     expect(
-      screen.queryByText("Day should be a number within a 1-31 range.")
+      screen.queryByText("Day should be a number within a 1-31 range."),
     ).not.toBeInTheDocument();
   });
 
@@ -1275,7 +1275,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1288,7 +1288,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.getByText("Day should be a number within a 1-31 range.")
+      screen.getByText("Day should be a number within a 1-31 range."),
     ).toBeVisible();
   });
 
@@ -1301,7 +1301,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1314,7 +1314,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.getByText("Day should be a number within a 1-31 range.")
+      screen.getByText("Day should be a number within a 1-31 range."),
     ).toBeVisible();
   });
 
@@ -1327,7 +1327,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -1340,7 +1340,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.getByText("Day in February should be a number within 1-28.")
+      screen.getByText("Day in February should be a number within 1-28."),
     ).toBeVisible();
   });
 
@@ -1353,7 +1353,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -1361,7 +1361,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     await user.tab();
 
     expect(
-      screen.queryByText("Day in February should be a number within 1-28.")
+      screen.queryByText("Day in February should be a number within 1-28."),
     ).not.toBeInTheDocument();
   });
 
@@ -1374,7 +1374,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -1387,7 +1387,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.getByText("Month should be a number within a 1-12 range.")
+      screen.getByText("Month should be a number within a 1-12 range."),
     ).toBeVisible();
   });
 
@@ -1400,7 +1400,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -1413,7 +1413,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.getByText("Month should be a number within a 1-12 range.")
+      screen.getByText("Month should be a number within a 1-12 range."),
     ).toBeVisible();
   });
 
@@ -1426,7 +1426,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const yearInput = screen.getByRole("textbox", { name: "Year" });
@@ -1439,7 +1439,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.getByText("Year should be a number within a 1800-2200 range.")
+      screen.getByText("Year should be a number within a 1800-2200 range."),
     ).toBeVisible();
   });
 
@@ -1452,7 +1452,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const yearInput = screen.getByRole("textbox", { name: "Year" });
@@ -1465,7 +1465,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     expect(monthInput).not.toBeInvalid();
     expect(yearInput).not.toBeInvalid();
     expect(
-      screen.getByText("Year should be a number within a 1800-2200 range.")
+      screen.getByText("Year should be a number within a 1800-2200 range."),
     ).toBeVisible();
   });
 
@@ -1478,7 +1478,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1490,8 +1490,8 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     expect(
       screen.getByText(
         "Day should be a number within a 1-31 range. " +
-          "Month should be a number within a 1-12 range."
-      )
+          "Month should be a number within a 1-12 range.",
+      ),
     ).toBeVisible();
   });
 
@@ -1504,7 +1504,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1516,8 +1516,8 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     expect(
       screen.getByText(
         "Day should be a number within a 1-31 range. " +
-          "Year should be a number within a 1800-2200 range."
-      )
+          "Year should be a number within a 1800-2200 range.",
+      ),
     ).toBeVisible();
   });
 
@@ -1530,7 +1530,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -1542,8 +1542,8 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
     expect(
       screen.getByText(
         "Month should be a number within a 1-12 range. " +
-          "Year should be a number within a 1800-2200 range."
-      )
+          "Year should be a number within a 1800-2200 range.",
+      ),
     ).toBeVisible();
   });
 
@@ -1556,7 +1556,7 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
           onChange={() => {}}
           enableInternalWarning
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1571,8 +1571,8 @@ describe("when the `enableInternalWarning` prop and `validationRedesignOptIn` ar
       screen.getByText(
         "Day should be a number within a 1-31 range. " +
           "Month should be a number within a 1-12 range. " +
-          "Year should be a number within a 1800-2200 range."
-      )
+          "Year should be a number within a 1800-2200 range.",
+      ),
     ).toBeVisible();
   });
 });
@@ -1592,7 +1592,7 @@ test("should submit the form when enter key is pressed", async () => {
         onChange={() => {}}
       />
       <button type="submit">Submit</button>
-    </form>
+    </form>,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1607,7 +1607,7 @@ test("should update the input values when the delete key is pressed", async () =
     <NumeralDate
       value={{ dd: "11", mm: "11", yyyy: "2011" }}
       onChange={() => {}}
-    />
+    />,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1628,7 +1628,7 @@ test("should update the input values when the backspace key is pressed", async (
     <NumeralDate
       value={{ dd: "11", mm: "11", yyyy: "2011" }}
       onChange={() => {}}
-    />
+    />,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1646,7 +1646,7 @@ test("should update the input values when the backspace key is pressed", async (
 test("should not update the input values when user presses non-numeric key", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   render(
-    <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />
+    <NumeralDate value={{ dd: "", mm: "", yyyy: "" }} onChange={() => {}} />,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1667,7 +1667,7 @@ test("should set the attribute on each input when the `required` prop is set", (
       value={{ dd: "", mm: "", yyyy: "" }}
       onChange={() => {}}
       required
-    />
+    />,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1685,7 +1685,7 @@ test("should render the expected inputs when the `dateFormat` is set as 'mmddyyy
       value={{ dd: "", mm: "", yyyy: "" }}
       onChange={() => {}}
       dateFormat={["mm", "dd", "yyyy"]}
-    />
+    />,
   );
 
   const inputText = screen.getAllByTestId("numeral-date-input-text");
@@ -1701,7 +1701,7 @@ test("should render the expected inputs when the `dateFormat` is set as 'yyyymmd
       value={{ dd: "", mm: "", yyyy: "" }}
       onChange={() => {}}
       dateFormat={["yyyy", "mm", "dd"]}
-    />
+    />,
   );
 
   const inputText = screen.getAllByTestId("numeral-date-input-text");
@@ -1717,7 +1717,7 @@ test("should render the expected inputs when the `dateFormat` is set as 'ddmm'",
       value={{ dd: "", mm: "" }}
       onChange={() => {}}
       dateFormat={["dd", "mm"]}
-    />
+    />,
   );
 
   const inputText = screen.getAllByTestId("numeral-date-input-text");
@@ -1733,7 +1733,7 @@ test("should render the expected inputs when the `dateFormat` is set as 'mmdd'",
       value={{ dd: "", mm: "" }}
       onChange={() => {}}
       dateFormat={["mm", "dd"]}
-    />
+    />,
   );
 
   const inputText = screen.getAllByTestId("numeral-date-input-text");
@@ -1749,7 +1749,7 @@ test("should render the expected inputs when the `dateFormat` is set as 'mmyyyy'
       value={{ dd: "", mm: "" }}
       onChange={() => {}}
       dateFormat={["mm", "yyyy"]}
-    />
+    />,
   );
 
   const inputText = screen.getAllByTestId("numeral-date-input-text");
@@ -1768,7 +1768,7 @@ test("should call `onBlur` callback if prop is passed and user clicks outside of
       value={{ dd: "", mm: "", yyyy: "" }}
       onChange={() => {}}
       onBlur={onBlur}
-    />
+    />,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1788,7 +1788,7 @@ test("should not call `onBlur` callback if prop is passed and user clicks from o
       value={{ dd: "", mm: "", yyyy: "" }}
       onChange={() => {}}
       onBlur={onBlur}
-    />
+    />,
   );
 
   const dayInput = screen.getByRole("textbox", { name: "Day" });
@@ -1808,7 +1808,7 @@ describe("when `dayRef` prop is passed", () => {
         value={{ dd: "", mm: "", yyyy: "" }}
         onChange={() => {}}
         dayRef={ref}
-      />
+      />,
     );
 
     expect(ref.current).toBe(screen.getByRole("textbox", { name: "Day" }));
@@ -1821,11 +1821,11 @@ describe("when `dayRef` prop is passed", () => {
         value={{ dd: "", mm: "", yyyy: "" }}
         onChange={() => {}}
         dayRef={ref}
-      />
+      />,
     );
 
     expect(ref).toHaveBeenCalledWith(
-      screen.getByRole("textbox", { name: "Day" })
+      screen.getByRole("textbox", { name: "Day" }),
     );
   });
 
@@ -1836,7 +1836,7 @@ describe("when `dayRef` prop is passed", () => {
         value={{ dd: "", mm: "", yyyy: "" }}
         onChange={() => {}}
         dayRef={ref}
-      />
+      />,
     );
 
     unmount();
@@ -1853,7 +1853,7 @@ describe("when `monthRef` prop is passed", () => {
         value={{ dd: "", mm: "", yyyy: "" }}
         onChange={() => {}}
         monthRef={ref}
-      />
+      />,
     );
 
     expect(ref.current).toBe(screen.getByRole("textbox", { name: "Month" }));
@@ -1866,11 +1866,11 @@ describe("when `monthRef` prop is passed", () => {
         value={{ dd: "", mm: "", yyyy: "" }}
         onChange={() => {}}
         monthRef={ref}
-      />
+      />,
     );
 
     expect(ref).toHaveBeenCalledWith(
-      screen.getByRole("textbox", { name: "Month" })
+      screen.getByRole("textbox", { name: "Month" }),
     );
   });
 
@@ -1881,7 +1881,7 @@ describe("when `monthRef` prop is passed", () => {
         value={{ dd: "", mm: "", yyyy: "" }}
         onChange={() => {}}
         monthRef={ref}
-      />
+      />,
     );
 
     unmount();
@@ -1898,7 +1898,7 @@ describe("when `yearRef` prop is passed", () => {
         value={{ dd: "", mm: "", yyyy: "" }}
         onChange={() => {}}
         yearRef={ref}
-      />
+      />,
     );
 
     expect(ref.current).toBe(screen.getByRole("textbox", { name: "Year" }));
@@ -1911,11 +1911,11 @@ describe("when `yearRef` prop is passed", () => {
         value={{ dd: "", mm: "", yyyy: "" }}
         onChange={() => {}}
         yearRef={ref}
-      />
+      />,
     );
 
     expect(ref).toHaveBeenCalledWith(
-      screen.getByRole("textbox", { name: "Year" })
+      screen.getByRole("textbox", { name: "Year" }),
     );
   });
 
@@ -1926,7 +1926,7 @@ describe("when `yearRef` prop is passed", () => {
         value={{ dd: "", mm: "", yyyy: "" }}
         onChange={() => {}}
         yearRef={ref}
-      />
+      />,
     );
 
     unmount();
@@ -1939,7 +1939,7 @@ test("should not call the onChange callback when the prop is set and the user ty
   const onChange = jest.fn();
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   render(
-    <NumeralDate value={{ dd: "12", mm: "", yyyy: "" }} onChange={onChange} />
+    <NumeralDate value={{ dd: "12", mm: "", yyyy: "" }} onChange={onChange} />,
   );
   const dayInput = screen.getByRole("textbox", { name: "Day" });
   await user.click(dayInput);
@@ -1953,7 +1953,7 @@ test("should not call the onChange callback when the prop is set and the user ty
   const onChange = jest.fn();
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   render(
-    <NumeralDate value={{ dd: "", mm: "12", yyyy: "" }} onChange={onChange} />
+    <NumeralDate value={{ dd: "", mm: "12", yyyy: "" }} onChange={onChange} />,
   );
   const monthInput = screen.getByRole("textbox", { name: "Month" });
   await user.click(monthInput);
@@ -1967,7 +1967,10 @@ test("should not call the onChange callback when the prop is set and the user ty
   const onChange = jest.fn();
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   render(
-    <NumeralDate value={{ dd: "", mm: "", yyyy: "2011" }} onChange={onChange} />
+    <NumeralDate
+      value={{ dd: "", mm: "", yyyy: "2011" }}
+      onChange={onChange}
+    />,
   );
   const yearInput = screen.getByRole("textbox", { name: "Year" });
   await user.click(yearInput);
@@ -1985,7 +1988,7 @@ test("should set the passed `data-` props as atributes on the root element", ()
       data-component="numeral-date-root"
       data-element="numeral-date-element"
       data-role="numeral-date-role"
-    />
+    />,
   );
   const rootElement = screen.getByTestId("numeral-date-role");
 
@@ -2001,7 +2004,7 @@ test("should pass the `helpAriaLabel` prop as `aria-label` attribute on the help
       onChange={() => {}}
       labelHelp="labelHelp"
       helpAriaLabel="help aria"
-    />
+    />,
   );
   const helpElement = screen.getByRole("button", { name: "help aria" });
 
@@ -2014,7 +2017,7 @@ test("should set the inputs to `disabled` when the prop is passed", () => {
       value={{ dd: "", mm: "", yyyy: "" }}
       onChange={() => {}}
       disabled
-    />
+    />,
   );
   const dayInput = screen.getByRole("textbox", { name: "Day" });
   const monthInput = screen.getByRole("textbox", { name: "Month" });
@@ -2031,7 +2034,7 @@ test("should set the inputs to `readOnly` when the prop is passed", () => {
       value={{ dd: "", mm: "", yyyy: "" }}
       onChange={() => {}}
       readOnly
-    />
+    />,
   );
   const dayInput = screen.getByRole("textbox", { name: "Day" });
   const monthInput = screen.getByRole("textbox", { name: "Month" });
diff --git a/src/components/pager/__internal__/pager-navigation-link.component.tsx b/src/components/pager/__internal__/pager-navigation-link.component.tsx
index 01fe8166f5..15b29c97e9 100644
--- a/src/components/pager/__internal__/pager-navigation-link.component.tsx
+++ b/src/components/pager/__internal__/pager-navigation-link.component.tsx
@@ -19,13 +19,13 @@ interface PagerNavigationLinkProps {
   onClick?: (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** onPagination Callback to process pagination  */
   onPagination?: (
     pageSize: number,
     currentPage: number,
-    origin: string
+    origin: string,
   ) => void;
 }
 
@@ -80,7 +80,7 @@ const PagerNavigationLink = ({
   const handleOnClick = (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => {
     onClick?.(ev);
     onPagination?.(navLinkConfig[type].destination, pageSize, type);
diff --git a/src/components/pager/__internal__/pager-navigation.component.tsx b/src/components/pager/__internal__/pager-navigation.component.tsx
index 612f60a994..b08104b0bf 100644
--- a/src/components/pager/__internal__/pager-navigation.component.tsx
+++ b/src/components/pager/__internal__/pager-navigation.component.tsx
@@ -25,25 +25,25 @@ export interface PagerNavigationProps {
   onNext?: (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** Callback function for first link */
   onFirst?: (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** Callback function for previous link */
   onPrevious?: (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** Callback function for last link */
   onLast?: (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** onPagination Callback triggered when a change is triggered */
   onPagination: (currentPage: number, pageSize: number, origin: string) => void;
@@ -79,7 +79,7 @@ const PagerNavigation = ({
   const guid = useRef(createGuid());
   const currentPageId = `Pager_${guid.current}`;
   const navLabelString = `${l.pager.pageX()} ${currentPage.toString()} ${l.pager.ofY(
-    pageCount
+    pageCount,
   )}`;
   const hasOnePage = pageCount <= 1;
   const hasTwoPages = pageCount === 2;
@@ -93,7 +93,7 @@ const PagerNavigation = ({
   const handlePageInputChange = (
     ev:
       | React.KeyboardEvent<HTMLInputElement>
-      | React.FocusEvent<HTMLInputElement>
+      | React.FocusEvent<HTMLInputElement>,
   ) => {
     const pageNumber = +(ev.target as HTMLInputElement).value;
     if (pageCount === 0) {
diff --git a/src/components/pager/__internal__/pager-navigation.test.tsx b/src/components/pager/__internal__/pager-navigation.test.tsx
index 6ee02be22e..1398c856e6 100644
--- a/src/components/pager/__internal__/pager-navigation.test.tsx
+++ b/src/components/pager/__internal__/pager-navigation.test.tsx
@@ -14,7 +14,7 @@ test("the `onFirst` callback prop is not called on click if the link is disabled
       pageCount={10}
       setCurrentPage={() => {}}
       onPagination={() => {}}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "First" }));
@@ -31,7 +31,7 @@ test("the `setCurrentPage` callback prop is called with the values a user enters
       pageSize={10}
       pageCount={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   await user.type(screen.getByRole("textbox", { name: "Page" }), "2");
@@ -52,7 +52,7 @@ test("the `setCurrentPage` callback prop is not called when a non-numeric value
       pageSize={10}
       pageCount={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   await user.type(screen.getByRole("textbox", { name: "Page" }), "a");
@@ -69,7 +69,7 @@ test("if there are 0 pages, the `setCurrentPage` callback is called with 0 on bl
       pageSize={10}
       pageCount={0}
       onPagination={() => {}}
-    />
+    />,
   );
 
   await user.type(screen.getByRole("textbox", { name: "Page" }), "2");
@@ -86,11 +86,11 @@ test("when the `showPageCount` prop is false, the page count input is not render
       pageSize={10}
       pageCount={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   expect(
-    screen.queryByRole("textbox", { name: "Page" })
+    screen.queryByRole("textbox", { name: "Page" }),
   ).not.toBeInTheDocument();
 });
 
@@ -103,14 +103,14 @@ test("when the `showFirstAndLastButtons` prop is false, neither the `first` or `
       pageSize={10}
       pageCount={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   expect(
-    screen.queryByRole("button", { name: "First" })
+    screen.queryByRole("button", { name: "First" }),
   ).not.toBeInTheDocument();
   expect(
-    screen.queryByRole("button", { name: "Last" })
+    screen.queryByRole("button", { name: "Last" }),
   ).not.toBeInTheDocument();
 });
 
@@ -123,13 +123,13 @@ test("when the `showPreviousAndNextButtons` prop is false, neither the `previous
       pageSize={10}
       pageCount={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   expect(
-    screen.queryByRole("button", { name: "Previous" })
+    screen.queryByRole("button", { name: "Previous" }),
   ).not.toBeInTheDocument();
   expect(
-    screen.queryByRole("button", { name: "Next" })
+    screen.queryByRole("button", { name: "Next" }),
   ).not.toBeInTheDocument();
 });
diff --git a/src/components/pager/pager-test.stories.tsx b/src/components/pager/pager-test.stories.tsx
index b46e6dede7..6663292eab 100644
--- a/src/components/pager/pager-test.stories.tsx
+++ b/src/components/pager/pager-test.stories.tsx
@@ -31,35 +31,35 @@ export const Default = ({ totalRecords, ...args }: Partial<PagerProps>) => {
   const handlePagination = (
     pageSize: number,
     currentPage: number,
-    origin: string
+    origin: string,
   ) => {
     action("onPagination")(pageSize, currentPage, origin);
   };
   const handleOnNext = (
     e:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => {
     action("onNext")(e);
   };
   const handleOnPrevious = (
     e:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => {
     action("onPrevious")(e);
   };
   const handleOnFirst = (
     e:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => {
     action("onFirst")(e);
   };
   const handleOnLast = (
     e:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => {
     action("onLast")(e);
   };
diff --git a/src/components/pager/pager.component.tsx b/src/components/pager/pager.component.tsx
index 836ab08923..30de32c36d 100644
--- a/src/components/pager/pager.component.tsx
+++ b/src/components/pager/pager.component.tsx
@@ -25,25 +25,25 @@ export interface PagerProps {
   onNext?: (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** Callback function for first link */
   onFirst?: (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** Callback function for previous link */
   onPrevious?: (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** Callback function for last link */
   onLast?: (
     ev:
       | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => void;
   /** Current visible page */
   currentPage?: number | string;
@@ -139,7 +139,7 @@ export const Pager = ({
     (
       e:
         | React.MouseEvent<HTMLButtonElement>
-        | React.KeyboardEvent<HTMLButtonElement>
+        | React.KeyboardEvent<HTMLButtonElement>,
     ) => {
       setPage(1);
 
@@ -147,14 +147,14 @@ export const Pager = ({
         onFirst(e);
       }
     },
-    [onFirst]
+    [onFirst],
   );
 
   const handleOnLast = useCallback(
     (
       e:
         | React.MouseEvent<HTMLButtonElement>
-        | React.KeyboardEvent<HTMLButtonElement>
+        | React.KeyboardEvent<HTMLButtonElement>,
     ) => {
       setPage(pageCount);
 
@@ -162,14 +162,14 @@ export const Pager = ({
         onLast(e);
       }
     },
-    [pageCount, onLast]
+    [pageCount, onLast],
   );
 
   const handleOnNext = useCallback(
     (
       e:
         | React.MouseEvent<HTMLButtonElement>
-        | React.KeyboardEvent<HTMLButtonElement>
+        | React.KeyboardEvent<HTMLButtonElement>,
     ) => {
       const nextPage = page + 1;
       setPage(nextPage);
@@ -178,14 +178,14 @@ export const Pager = ({
         onNext(e);
       }
     },
-    [onNext, page]
+    [onNext, page],
   );
 
   const handleOnPrevious = useCallback(
     (
       e:
         | React.MouseEvent<HTMLButtonElement>
-        | React.KeyboardEvent<HTMLButtonElement>
+        | React.KeyboardEvent<HTMLButtonElement>,
     ) => {
       const previousPage = page - 1;
       setPage(previousPage);
@@ -194,7 +194,7 @@ export const Pager = ({
         onPrevious(e);
       }
     },
-    [page, onPrevious]
+    [page, onPrevious],
   );
 
   const handleOnPagination = useCallback(
@@ -203,14 +203,14 @@ export const Pager = ({
       setCurrentPageSize(+selectedValue);
       onPagination(1, +selectedValue, "page-select");
     },
-    [onPagination]
+    [onPagination],
   );
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) =>
       Events.isEnterKey(e) &&
       handleOnPagination((e.target as HTMLInputElement).value),
-    [handleOnPagination]
+    [handleOnPagination],
   );
 
   const sizeSelector = () => {
@@ -258,7 +258,7 @@ export const Pager = ({
           {showPageSizeLabelAfter &&
             wrapper(
               !showPageSizeLabelBefore,
-              l.pager.records(currentPageSize, false)
+              l.pager.records(currentPageSize, false),
             )}
         </StyledPagerSizeOptionsInner>
       )
diff --git a/src/components/pager/pager.pw.tsx b/src/components/pager/pager.pw.tsx
index c356eebdf0..bc7a73f57f 100644
--- a/src/components/pager/pager.pw.tsx
+++ b/src/components/pager/pager.pw.tsx
@@ -70,11 +70,11 @@ test.describe("Styling tests", () => {
 
     await expect(inputParent).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(inputParent).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -91,7 +91,7 @@ test.describe("Styling tests", () => {
 
     await expect(inputParent).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 
@@ -115,7 +115,7 @@ test.describe("Prop tests", () => {
 
       await expect(currentPageInput(page)).toHaveAttribute(
         "value",
-        `${currentPage}`
+        `${currentPage}`,
       );
     });
   });
@@ -142,7 +142,7 @@ test.describe("Prop tests", () => {
       page,
     }) => {
       await mount(
-        <PagerComponent pageSize={pageSizeVal} showPageSizeSelection />
+        <PagerComponent pageSize={pageSizeVal} showPageSizeSelection />,
       );
 
       await expect(pageSelect(page)).toHaveAttribute("value", `${pageSizeVal}`);
@@ -159,13 +159,13 @@ test.describe("Prop tests", () => {
         <PagerComponentRecords
           pageSizeSelectionOptions={[record]}
           showPageSizeSelection
-        />
+        />,
       );
 
       await inputIconToggle(page).click();
 
       await expect(
-        selectListWrapper(page).locator("ul").locator("li")
+        selectListWrapper(page).locator("ul").locator("li"),
       ).toHaveAttribute("data-component", "option");
     });
   });
@@ -194,7 +194,7 @@ test.describe("Prop tests", () => {
         <PagerComponent
           showPageSizeLabelBefore={showBefore}
           showPageSizeSelection
-        />
+        />,
       );
 
       if (showBefore) {
@@ -215,7 +215,7 @@ test.describe("Prop tests", () => {
         <PagerComponent
           showPageSizeLabelAfter={showAfter}
           showPageSizeSelection
-        />
+        />,
       );
 
       if (showAfter) {
@@ -291,39 +291,39 @@ test.describe("Prop tests", () => {
     });
   });
 
-  ([
-    ["default", "rgb(250, 251, 251)"],
-    ["alternate", "rgb(237, 241, 242)"],
-  ] as [PagerProps["variant"], string][]).forEach(
-    ([variant, backgroundColor]) => {
-      test(`should render with variant prop set to ${variant}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<PagerComponent variant={variant} />);
-
-        if (variant === "default") {
-          await expect(pager(page)).toHaveCSS(
-            "background-color",
-            backgroundColor
-          );
-          await expect(pager(page)).toHaveCSS(
-            "border-color",
-            "rgb(204, 214, 219)"
-          );
-        } else {
-          await expect(pager(page)).toHaveCSS(
-            "background-color",
-            backgroundColor
-          );
-          await expect(pager(page)).toHaveCSS(
-            "border-color",
-            "rgb(204, 214, 219)"
-          );
-        }
-      });
-    }
-  );
+  (
+    [
+      ["default", "rgb(250, 251, 251)"],
+      ["alternate", "rgb(237, 241, 242)"],
+    ] as [PagerProps["variant"], string][]
+  ).forEach(([variant, backgroundColor]) => {
+    test(`should render with variant prop set to ${variant}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PagerComponent variant={variant} />);
+
+      if (variant === "default") {
+        await expect(pager(page)).toHaveCSS(
+          "background-color",
+          backgroundColor,
+        );
+        await expect(pager(page)).toHaveCSS(
+          "border-color",
+          "rgb(204, 214, 219)",
+        );
+      } else {
+        await expect(pager(page)).toHaveCSS(
+          "background-color",
+          backgroundColor,
+        );
+        await expect(pager(page)).toHaveCSS(
+          "border-color",
+          "rgb(204, 214, 219)",
+        );
+      }
+    });
+  });
 
   [true, false].forEach((hideElements) => {
     test(`should render links as intended when hideDisabledElements is set to ${hideElements} and currentPage is 1`, async ({
@@ -331,7 +331,7 @@ test.describe("Prop tests", () => {
       page,
     }) => {
       await mount(
-        <PagerComponent currentPage={1} hideDisabledElements={hideElements} />
+        <PagerComponent currentPage={1} hideDisabledElements={hideElements} />,
       );
 
       if (hideElements) {
@@ -350,7 +350,7 @@ test.describe("Prop tests", () => {
       page,
     }) => {
       await mount(
-        <PagerComponent currentPage={10} hideDisabledElements={hideElements} />
+        <PagerComponent currentPage={10} hideDisabledElements={hideElements} />,
       );
 
       if (hideElements) {
@@ -379,7 +379,7 @@ test.describe("Prop tests", () => {
       page,
     }) => {
       await mount(
-        <PagerComponent currentPage={1} interactivePageNumber={pageNumber} />
+        <PagerComponent currentPage={1} interactivePageNumber={pageNumber} />,
       );
 
       if (pageNumber) {
@@ -396,7 +396,7 @@ test.describe("Prop tests", () => {
       page,
     }) => {
       await mount(
-        <PagerComponent currentPage={1} interactivePageNumber={pageNumber} />
+        <PagerComponent currentPage={1} interactivePageNumber={pageNumber} />,
       );
 
       if (pageNumber) {
@@ -412,7 +412,7 @@ test.describe("Prop tests", () => {
     page,
   }) => {
     await mount(
-      <PagerComponent currentPage={1} interactivePageNumber={false} />
+      <PagerComponent currentPage={1} interactivePageNumber={false} />,
     );
 
     const labelWrapper = currentPageLabelWrapper(page);
@@ -574,7 +574,7 @@ test.describe("Events test", () => {
         }}
         showPageSizeSelection
         currentPage={5}
-      />
+      />,
     );
 
     await pageSelectElement(page).click();
@@ -596,7 +596,7 @@ test.describe("Events test", () => {
         onNext={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await nextArrow(page).click();
@@ -615,7 +615,7 @@ test.describe("Events test", () => {
           onNext={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       await page.keyboard.press("Tab");
@@ -637,7 +637,7 @@ test.describe("Events test", () => {
           callbackCount += 1;
         }}
         currentPage={5}
-      />
+      />,
     );
 
     await previousArrow(page).click();
@@ -657,7 +657,7 @@ test.describe("Events test", () => {
             callbackCount += 1;
           }}
           currentPage={5}
-        />
+        />,
       );
 
       await page.keyboard.press("Tab");
@@ -679,7 +679,7 @@ test.describe("Events test", () => {
           callbackCount += 1;
         }}
         currentPage={5}
-      />
+      />,
     );
 
     await firstArrow(page).click();
@@ -699,7 +699,7 @@ test.describe("Events test", () => {
             callbackCount += 1;
           }}
           currentPage={5}
-        />
+        />,
       );
 
       await page.keyboard.press("Tab");
@@ -720,7 +720,7 @@ test.describe("Events test", () => {
           callbackCount += 1;
         }}
         currentPage={5}
-      />
+      />,
     );
 
     await lastArrow(page).click();
@@ -739,7 +739,7 @@ test.describe("Events test", () => {
           onLast={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       await page.keyboard.press("Tab");
@@ -781,7 +781,7 @@ test.describe("Accessibility tests", () => {
       page,
     }) => {
       await mount(
-        <PagerComponent pageSize={pageSizeVal} showPageSizeSelection />
+        <PagerComponent pageSize={pageSizeVal} showPageSizeSelection />,
       );
 
       await checkAccessibility(page);
@@ -795,7 +795,7 @@ test.describe("Accessibility tests", () => {
     await mount(
       <PagerComponentRecords
         pageSizeSelectionOptions={[{ id: "25", name: 25 }]}
-      />
+      />,
     );
 
     await inputIconToggle(page).click();
@@ -823,7 +823,7 @@ test.describe("Accessibility tests", () => {
         <PagerComponent
           showPageSizeLabelAfter={showAfter}
           showPageSizeSelection
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -891,7 +891,7 @@ test.describe("Accessibility tests", () => {
       page,
     }) => {
       await mount(
-        <PagerComponent currentPage={1} hideDisabledElements={showElements} />
+        <PagerComponent currentPage={1} hideDisabledElements={showElements} />,
       );
 
       await checkAccessibility(page);
@@ -904,7 +904,7 @@ test.describe("Accessibility tests", () => {
       page,
     }) => {
       await mount(
-        <PagerComponent currentPage={10} hideDisabledElements={showElements} />
+        <PagerComponent currentPage={10} hideDisabledElements={showElements} />,
       );
 
       await checkAccessibility(page);
@@ -974,7 +974,7 @@ test.describe("Accessibility tests", () => {
         <PagerComponent
           showPageSizeLabelBefore={showBefore}
           showPageSizeSelection
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -987,7 +987,7 @@ test.describe("Accessibility tests", () => {
       page,
     }) => {
       await mount(
-        <PagerComponent currentPage={1} interactivePageNumber={pageNumber} />
+        <PagerComponent currentPage={1} interactivePageNumber={pageNumber} />,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/pager/pager.style.ts b/src/components/pager/pager.style.ts
index 34042a9385..05c3e461bd 100644
--- a/src/components/pager/pager.style.ts
+++ b/src/components/pager/pager.style.ts
@@ -32,12 +32,11 @@ const StyledPagerContainer = styled.div<Pick<PagerProps, "variant">>`
   border: 1px solid var(--colorsUtilityMajor100);
   border-radius: var(--borderRadius100);
 
-  ${({ variant }) =>
-    css`
-      background-color: ${variant === "alternate"
-        ? "var(--colorsUtilityMajor040)"
-        : "var(--colorsUtilityMajor010)"};
-    `}
+  ${({ variant }) => css`
+    background-color: ${variant === "alternate"
+      ? "var(--colorsUtilityMajor040)"
+      : "var(--colorsUtilityMajor010)"};
+  `}
 `;
 
 const StyledPagerSizeOptions = styled.div`
diff --git a/src/components/pager/pager.test.tsx b/src/components/pager/pager.test.tsx
index b150a93223..6811a937a6 100644
--- a/src/components/pager/pager.test.tsx
+++ b/src/components/pager/pager.test.tsx
@@ -42,7 +42,7 @@ test("the `next` and `last` buttons are disabled when on the last page", async (
       pageSize={10}
       currentPage={10}
       onPagination={onPagination}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "Next" }));
@@ -59,7 +59,7 @@ test("the `previous` and `first` buttons are disabled when on the first page", a
       pageSize={10}
       currentPage={1}
       onPagination={onPagination}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "Previous" }));
@@ -89,7 +89,7 @@ test("the `previous` and `first` buttons are hidden when on the first page if th
       pageSize={10}
       currentPage={1}
       onPagination={() => {}}
-    />
+    />,
   );
 
   // note: can't easily use getByRole("button") for these assertions because the buttons are disabled and
@@ -107,7 +107,7 @@ test("the `next` and `last` buttons are hidden when on the last page if the `hid
       pageSize={10}
       currentPage={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   // note: can't easily use getByRole("button") for these assertions because the buttons are disabled and
@@ -125,7 +125,7 @@ test("all buttons are visible if the `hideDisabledElements` prop is `true` and n
       pageSize={10}
       currentPage={3}
       onPagination={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByRole("button", { name: "First" })).toBeVisible();
@@ -138,7 +138,7 @@ test("when the `interactivePageNumber` prop is false, no input is rendered for t
   render(<Pager interactivePageNumber={false} onPagination={() => {}} />);
 
   expect(
-    screen.queryByRole("textbox", { name: "Page" })
+    screen.queryByRole("textbox", { name: "Page" }),
   ).not.toBeInTheDocument();
 });
 
@@ -152,13 +152,13 @@ test.each([1, 5, 10])(
         totalRecords={100}
         pageSize={10}
         onPagination={() => {}}
-      />
+      />,
     );
 
     expect(screen.getByTestId("current-page-label")).toHaveTextContent(
-      `Page ${pageIndex} of 10`
+      `Page ${pageIndex} of 10`,
     );
-  }
+  },
 );
 
 test("the `onFirst` callback prop is called when the user clicks the `First` button", async () => {
@@ -171,7 +171,7 @@ test("the `onFirst` callback prop is called when the user clicks the `First` but
       totalRecords={100}
       pageSize={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "First" }));
@@ -188,7 +188,7 @@ test("the `onPrevious` callback prop is called when the user clicks the `Previou
       totalRecords={100}
       pageSize={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "Previous" }));
@@ -205,7 +205,7 @@ test("the `onNext` callback prop is called when the user clicks the `Next` butto
       totalRecords={100}
       pageSize={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "Next" }));
@@ -222,7 +222,7 @@ test("the `onLast` callback prop is called when the user clicks the `Last` butto
       totalRecords={100}
       pageSize={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "Last" }));
@@ -237,7 +237,7 @@ test("when the `pageSize` prop updates, the value of the page-size select is upd
       pageSize={10}
       showPageSizeSelection
       onPagination={() => {}}
-    />
+    />,
   );
   expect(screen.getByRole("combobox", { name: "Show" })).toHaveValue("10");
 
@@ -248,7 +248,7 @@ test("when the `pageSize` prop updates, the value of the page-size select is upd
       pageSize={25}
       showPageSizeSelection
       onPagination={() => {}}
-    />
+    />,
   );
   expect(screen.getByRole("combobox", { name: "Show" })).toHaveValue("25");
 });
@@ -261,7 +261,7 @@ test("if a page number is entered that is greater than the number of pages, it r
       totalRecords={100}
       pageSize={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   await user.type(screen.getByRole("textbox", { name: "Page" }), "1234");
@@ -277,7 +277,7 @@ test("if a page number is entered that is less than 1, it reverts to the first p
       totalRecords={100}
       pageSize={10}
       onPagination={() => {}}
-    />
+    />,
   );
 
   await user.type(screen.getByRole("textbox", { name: "Page" }), "-1234");
@@ -301,7 +301,7 @@ test("the page size select is not shown by default", () => {
   render(<Pager onPagination={() => {}} />);
 
   expect(
-    screen.queryByRole("combobox", { name: "Show" })
+    screen.queryByRole("combobox", { name: "Show" }),
   ).not.toBeInTheDocument();
 });
 
@@ -321,7 +321,7 @@ test("the text before the page size select is not shown when the `showPageSizeLa
       showPageSizeSelection
       showPageSizeLabelBefore={false}
       onPagination={() => {}}
-    />
+    />,
   );
 
   expect(screen.queryByText("Show")).not.toBeInTheDocument();
@@ -333,7 +333,7 @@ test("the text after the page size select is not shown when the `showPageSizeLab
       showPageSizeSelection
       showPageSizeLabelAfter={false}
       onPagination={() => {}}
-    />
+    />,
   );
 
   expect(screen.queryByText("items")).not.toBeInTheDocument();
@@ -345,7 +345,7 @@ test("does not render the total number of records 'showTotalRecords' is false",
       showTotalRecords={false}
       totalRecords={100}
       onPagination={() => {}}
-    />
+    />,
   );
 
   expect(screen.queryByText("100 items")).not.toBeInTheDocument();
@@ -363,14 +363,14 @@ test.each([
         showPageSizeLabelBefore={showPageSizeLabelBefore}
         showPageSizeLabelAfter={showPageSizeLabelAfter}
         onPagination={() => {}}
-      />
+      />,
     );
 
     const pageSizeSelect = screen.getByRole("combobox");
 
     expect(pageSizeSelect).toHaveAccessibleName(labelText);
     expect(pageSizeSelect).not.toHaveAttribute("aria-label");
-  }
+  },
 );
 
 test("when both `showPageSizeLabelBefore` and `showPageSizeLabelAfter` are false, the select has an accessible name of 'show' via an aria-label", () => {
@@ -380,7 +380,7 @@ test("when both `showPageSizeLabelBefore` and `showPageSizeLabelAfter` are false
       showPageSizeLabelBefore={false}
       showPageSizeLabelAfter={false}
       onPagination={() => {}}
-    />
+    />,
   );
 
   const pageSizeSelect = screen.getByRole("combobox");
@@ -404,21 +404,21 @@ test.each([
         pageSize={10}
         totalRecords={100}
         onPagination={() => {}}
-      />
+      />,
     );
 
     await user.click(screen.getByRole("button", { name: buttonName }));
     expect(screen.getByRole("textbox", { name: "Page" })).toHaveValue(
-      pageResult
+      pageResult,
     );
-  }
+  },
 );
 
 test("renders the `show` text correctly in the French locale", () => {
   render(
     <I18nProvider locale={frFR}>
       <Pager showPageSizeSelection onPagination={() => {}} />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   expect(screen.queryByText("Show")).not.toBeInTheDocument();
@@ -430,7 +430,7 @@ test("renders the items count correctly in the French locale", () => {
   render(
     <I18nProvider locale={frFR}>
       <Pager totalRecords={100} onPagination={() => {}} />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   expect(screen.queryByText("100 items")).not.toBeInTheDocument();
@@ -482,6 +482,6 @@ test("renders with correct styles when `variant` is `alternate`", () => {
 
   expect(screen.getByTestId("pager")).toHaveStyleRule(
     "background-color",
-    "var(--colorsUtilityMajor040)"
+    "var(--colorsUtilityMajor040)",
   );
 });
diff --git a/src/components/pages/components.test-pw.tsx b/src/components/pages/components.test-pw.tsx
index b693135f19..2d480343de 100644
--- a/src/components/pages/components.test-pw.tsx
+++ b/src/components/pages/components.test-pw.tsx
@@ -48,7 +48,7 @@ export const DefaultStory = ({
       | React.MouseEvent<HTMLAnchorElement>
       | React.MouseEvent<HTMLButtonElement>
       | React.KeyboardEvent<HTMLAnchorElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => {
     setIsDisabled(true);
     setTimeout(() => {
@@ -107,13 +107,13 @@ export const DefaultStory = ({
 };
 
 export const PagesComponent = (
-  props: Partial<PageStoryProps> & Partial<PagesProps>
+  props: Partial<PageStoryProps> & Partial<PagesProps>,
 ) => {
   const [isOpen, setIsOpen] = useState(false);
   const [pageIndex, setPageIndex] = useState(
     Number(props.initialPageIndex)
       ? Number(props.initialPageIndex)
-      : undefined || 0
+      : undefined || 0,
   );
   const [isDisabled, setIsDisabled] = React.useState(false);
 
@@ -143,7 +143,7 @@ export const PagesComponent = (
       | React.MouseEvent<HTMLAnchorElement>
       | React.MouseEvent<HTMLButtonElement>
       | React.KeyboardEvent<HTMLAnchorElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => {
     setIsDisabled(true);
     setTimeout(() => {
diff --git a/src/components/pages/page/page.test.tsx b/src/components/pages/page/page.test.tsx
index 220cfea74b..f5ca68fbc9 100644
--- a/src/components/pages/page/page.test.tsx
+++ b/src/components/pages/page/page.test.tsx
@@ -15,7 +15,7 @@ testStyledSystemPaddingRTL(
     </Page>
   ),
   () => screen.getByTestId("page-content"),
-  { p: "30px 40px" }
+  { p: "30px 40px" },
 );
 
 test("renders both heading and children", () => {
diff --git a/src/components/pages/pages-test.stories.tsx b/src/components/pages/pages-test.stories.tsx
index 923edd09f1..5e2792b6d8 100644
--- a/src/components/pages/pages-test.stories.tsx
+++ b/src/components/pages/pages-test.stories.tsx
@@ -40,14 +40,14 @@ export const DefaultStory = ({
   const [pageIndex, setPageIndex] = useState(Number(initialPageIndex) || 0);
   const [isDisabled, setIsDisabled] = useState(false);
   const handleCancel = (
-    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
+    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>,
   ) => {
     setIsOpen(false);
     setPageIndex(0);
     action("cancel")(ev);
   };
   const handleOpen = (
-    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
   ) => {
     setIsOpen(true);
     if (!initialPageIndex) {
@@ -56,7 +56,7 @@ export const DefaultStory = ({
     action("open")(event);
   };
   const handleOnClick = (
-    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
   ) => {
     setIsDisabled(true);
     setPageIndex(pageIndex + 1);
@@ -71,7 +71,7 @@ export const DefaultStory = ({
       | React.MouseEvent<HTMLAnchorElement>
       | React.MouseEvent<HTMLButtonElement>
       | React.KeyboardEvent<HTMLAnchorElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
   ) => {
     setIsDisabled(true);
     setTimeout(() => {
diff --git a/src/components/pages/pages.component.tsx b/src/components/pages/pages.component.tsx
index d25edb5b3c..0fbcc10dae 100644
--- a/src/components/pages/pages.component.tsx
+++ b/src/components/pages/pages.component.tsx
@@ -30,7 +30,7 @@ const Pages = ({
   ...props
 }: PagesProps) => {
   const [pageIndex, setPageIndex] = useState(
-    Number(incomingPageIndex) || Number(initialpageIndex)
+    Number(incomingPageIndex) || Number(initialpageIndex),
   );
   const transitionDirection = useRef(NEXT);
 
@@ -77,7 +77,7 @@ const Pages = ({
 
       return newIndex;
     },
-    [numOfPages]
+    [numOfPages],
   );
 
   useEffect(() => {
diff --git a/src/components/pages/pages.pw.tsx b/src/components/pages/pages.pw.tsx
index 54e80981d7..4ddc4e5239 100644
--- a/src/components/pages/pages.pw.tsx
+++ b/src/components/pages/pages.pw.tsx
@@ -56,7 +56,7 @@ test.describe("Prop checks for Pages component", () => {
       await waitForAnimationEnd(getComponent(page, "page"));
 
       await expect(getDataElementByValue(page, "title")).toHaveText(
-        "My Second Page"
+        "My Second Page",
       );
     });
   });
@@ -88,7 +88,7 @@ test.describe("Prop checks for Pages component", () => {
     await dataComponentButtonByText(page, "Go to second page").click();
 
     await expect(getDataElementByValue(page, "title").nth(0)).toHaveText(
-      "My Second Page"
+      "My Second Page",
     );
   });
 
@@ -102,7 +102,7 @@ test.describe("Prop checks for Pages component", () => {
     await dataComponentButtonByText(page, "Go to third page").click();
 
     await expect(getDataElementByValue(page, "title").nth(0)).toHaveText(
-      "My Third Page"
+      "My Third Page",
     );
   });
 
@@ -116,7 +116,7 @@ test.describe("Prop checks for Pages component", () => {
     await backArrow(page).click();
 
     await expect(getDataElementByValue(page, "title").nth(0)).toHaveText(
-      "My Second Page"
+      "My Second Page",
     );
   });
 
@@ -130,7 +130,7 @@ test.describe("Prop checks for Pages component", () => {
     await backArrow(page).click();
 
     await expect(getDataElementByValue(page, "title").nth(0)).toHaveText(
-      "My First Page"
+      "My First Page",
     );
   });
 
@@ -148,7 +148,7 @@ test.describe("Prop checks for Pages component", () => {
 
         await expect(pageComponent).toHaveText(`${testTitle}`);
       });
-    }
+    },
   );
 });
 
diff --git a/src/components/pages/pages.stories.tsx b/src/components/pages/pages.stories.tsx
index 103eb85d98..e3285cdbbb 100644
--- a/src/components/pages/pages.stories.tsx
+++ b/src/components/pages/pages.stories.tsx
@@ -82,7 +82,7 @@ export const WithInitialPageIndex: Story = () => {
   const initialpageIndex = 1;
   const [isOpen, setIsOpen] = useState(defaultOpenState);
   const [pageIndex, setPageIndex] = useState(
-    Number(initialpageIndex) ? Number(initialpageIndex) : 0
+    Number(initialpageIndex) ? Number(initialpageIndex) : 0,
   );
   const [isDisabled, setIsDisabled] = useState(false);
   const handleCancel = () => {
diff --git a/src/components/pages/pages.test.tsx b/src/components/pages/pages.test.tsx
index a446cf3f77..ac4756a17c 100644
--- a/src/components/pages/pages.test.tsx
+++ b/src/components/pages/pages.test.tsx
@@ -75,9 +75,9 @@ test.each([
     jest.runAllTimers();
 
     expect(screen.getByTestId("visible-page")).toHaveClass(
-      `${expected}-enter-done`
+      `${expected}-enter-done`,
     );
-  }
+  },
 );
 
 test("when the `pageIndex` prop is greater than the number of `Page` children, the first page is rendered", () => {
@@ -86,7 +86,7 @@ test("when the `pageIndex` prop is greater than the number of `Page` children, t
       <Page title={<Heading title="Page 1" />}>First Page</Page>
       <Page title={<Heading title="Page 2" />}>Second Page</Page>
       <Page title={<Heading title="Page 3" />}>Third Page</Page>
-    </Pages>
+    </Pages>,
   );
 
   expect(screen.getByRole("heading")).toHaveTextContent("Page 1");
@@ -183,7 +183,7 @@ test("accepts `data-element` and `data-role` tags via props, and has the expecte
   render(
     <Pages data-element="bar" data-role="baz">
       <Page title="Foo">Bar</Page>
-    </Pages>
+    </Pages>,
   );
 
   const pagesWrapper = screen.getByTestId("baz");
@@ -195,7 +195,7 @@ test("the visible `Page` component has the `data-element` attribute set to `visi
   render(
     <Pages>
       <Page title="Foo">Bar</Page>
-    </Pages>
+    </Pages>,
   );
 
   const page = screen.getByTestId("visible-page");
diff --git a/src/components/password/components.test-pw.tsx b/src/components/password/components.test-pw.tsx
index da929eabf0..9e7e2afd40 100644
--- a/src/components/password/components.test-pw.tsx
+++ b/src/components/password/components.test-pw.tsx
@@ -155,7 +155,7 @@ export const PasswordNewDesignsValidation = () => {
                 {...{ [validationType]: "Message" }}
               />
             </div>
-          ))
+          )),
         )}
       </CarbonProvider>
     </Box>
diff --git a/src/components/password/password.pw.tsx b/src/components/password/password.pw.tsx
index 12b7cc9c26..5c0303d6d0 100644
--- a/src/components/password/password.pw.tsx
+++ b/src/components/password/password.pw.tsx
@@ -105,7 +105,7 @@ test.describe("Prop checks for ButtonMinor component", () => {
 
     await expect(buttonMinorComponent(page)).toHaveAttribute(
       "aria-controls",
-      id
+      id,
     );
   });
 
@@ -173,7 +173,7 @@ test.describe("Prop checks for ButtonMinor component", () => {
 
     await expect(buttonMinorComponent(page)).toHaveAttribute(
       "aria-label",
-      "Show password"
+      "Show password",
     );
   });
 
@@ -187,7 +187,7 @@ test.describe("Prop checks for ButtonMinor component", () => {
 
     await expect(buttonMinorComponent(page)).toHaveAttribute(
       "aria-label",
-      "Hide password"
+      "Hide password",
     );
   });
 
@@ -200,19 +200,19 @@ test.describe("Prop checks for ButtonMinor component", () => {
     await expect(buttonMinorComponent(page)).toBeVisible();
     await expect(buttonMinorComponent(page)).toHaveCSS(
       "background-color",
-      transparent
+      transparent,
     );
 
     await expect(buttonMinorComponent(page)).toHaveCSS(
       "color",
-      colorsActionMinor500
+      colorsActionMinor500,
     );
 
     const colorToken = (
       await getDesignTokensByCssProperty(
         page,
         buttonMinorComponent(page),
-        "color"
+        "color",
       )
     ).pop();
 
@@ -229,19 +229,19 @@ test.describe("Prop checks for ButtonMinor component", () => {
     await expect(buttonMinorComponent(page)).toBeVisible();
     await expect(buttonMinorComponent(page)).toHaveCSS(
       "background-color",
-      transparent
+      transparent,
     );
 
     await expect(buttonMinorComponent(page)).toHaveCSS(
       "color",
-      colorsActionMinor500
+      colorsActionMinor500,
     );
 
     const colorToken = (
       await getDesignTokensByCssProperty(
         page,
         buttonMinorComponent(page),
-        "color"
+        "color",
       )
     ).pop();
 
@@ -302,7 +302,7 @@ test.describe("aria-live region checks", () => {
 
     const hiddenStatus = page.getByRole("status");
     await expect(hiddenStatus).toHaveText(
-      "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so."
+      "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so.",
     );
   });
 
@@ -316,7 +316,7 @@ test.describe("aria-live region checks", () => {
     await expect(hiddenStatus).toBeVisible();
     await expect(hiddenStatus).toHaveCSS(
       "border",
-      "0px none rgba(0, 0, 0, 0.9)"
+      "0px none rgba(0, 0, 0, 0.9)",
     );
     await expect(hiddenStatus).toHaveCSS("height", "1px");
     await expect(hiddenStatus).toHaveCSS("margin", "-1px");
@@ -328,30 +328,30 @@ test.describe("aria-live region checks", () => {
 });
 
 test.describe("Prop checks for rendered Textbox", () => {
-  ([
-    [SIZE.SMALL, "32px", "--sizing400"],
-    [SIZE.MEDIUM, "40px", "--sizing500"],
-    [SIZE.LARGE, "48px", "--sizing600"],
-  ] as [TextboxProps["size"], string, string][]).forEach(
-    ([size, height, token]) => {
-      test(`should render with ${size} size and ${height} height when size prop is ${size}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<PasswordComponent size={size} />);
+  (
+    [
+      [SIZE.SMALL, "32px", "--sizing400"],
+      [SIZE.MEDIUM, "40px", "--sizing500"],
+      [SIZE.LARGE, "48px", "--sizing600"],
+    ] as [TextboxProps["size"], string, string][]
+  ).forEach(([size, height, token]) => {
+    test(`should render with ${size} size and ${height} height when size prop is ${size}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PasswordComponent size={size} />);
 
-        await expect(password(page)).toHaveCSS("min-height", height);
+      await expect(password(page)).toHaveCSS("min-height", height);
 
-        const tokenValues = await getDesignTokensByCssProperty(
-          page,
-          password(page),
-          "min-height"
-        );
+      const tokenValues = await getDesignTokensByCssProperty(
+        page,
+        password(page),
+        "min-height",
+      );
 
-        expect(tokenValues[0]).toBe(token);
-      });
-    }
-  );
+      expect(tokenValues[0]).toBe(token);
+    });
+  });
 
   specialCharacters.forEach((specificValue) => {
     test(`should render with label prop as ${specificValue}`, async ({
@@ -406,22 +406,22 @@ test.describe("Prop checks for rendered Textbox", () => {
     await expect(passwordInput(page)).toBeFocused();
   });
 
-  ([
-    ["left", "start"],
-    ["right", "end"],
-  ] as [TextboxProps["labelAlign"], string][]).forEach(
-    ([labelAlign, cssValue]) => {
-      test(`should render with ${labelAlign} labelAlign prop`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<PasswordComponent labelInline labelAlign={labelAlign} />);
-
-        const labelParent = getDataElementByValue(page, "label").locator("..");
-        await expect(labelParent).toHaveCSS("-webkit-box-pack", cssValue);
-      });
-    }
-  );
+  (
+    [
+      ["left", "start"],
+      ["right", "end"],
+    ] as [TextboxProps["labelAlign"], string][]
+  ).forEach(([labelAlign, cssValue]) => {
+    test(`should render with ${labelAlign} labelAlign prop`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PasswordComponent labelInline labelAlign={labelAlign} />);
+
+      const labelParent = getDataElementByValue(page, "label").locator("..");
+      await expect(labelParent).toHaveCSS("-webkit-box-pack", cssValue);
+    });
+  });
 
   ["10%", "30%", "50%", "80%", "100%"].forEach((maxWidth) => {
     test(`should render with ${maxWidth} max-width`, async ({
diff --git a/src/components/password/password.stories.tsx b/src/components/password/password.stories.tsx
index ca4fa31578..721c356a3e 100644
--- a/src/components/password/password.stories.tsx
+++ b/src/components/password/password.stories.tsx
@@ -456,7 +456,7 @@ export const NewDesignsValidation: Story = () => {
                 {...{ [validationType]: "Message" }}
               />
             </Box>
-          ))
+          )),
         )}
       </CarbonProvider>
     </Box>
diff --git a/src/components/password/password.test.tsx b/src/components/password/password.test.tsx
index 53d3d67a6e..617cc7b827 100644
--- a/src/components/password/password.test.tsx
+++ b/src/components/password/password.test.tsx
@@ -57,7 +57,7 @@ test("should change the aria-live region announcement text from hidden to shown
   const liveRegion = screen.getByRole("status");
 
   expect(liveRegion).toHaveTextContent(
-    "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so."
+    "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so.",
   );
 });
 
diff --git a/src/components/pill/pill.component.tsx b/src/components/pill/pill.component.tsx
index 36645a3086..f827ef26b4 100644
--- a/src/components/pill/pill.component.tsx
+++ b/src/components/pill/pill.component.tsx
@@ -29,7 +29,7 @@ export interface PillProps extends StyledPillProps {
   onDelete?: (
     ev?:
       | React.KeyboardEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => void;
   /** Sets the type of pill in use. */
   pillRole?: "tag" | "status";
@@ -66,7 +66,7 @@ export const Pill = ({
     // eslint-disable-next-line no-console
     console.warn(
       "[WARNING] The `neutralWhite` variant should only be used on dark backgrounds with fill set to true. " +
-        "Please set the `isDarkBackground` and `fill` props to true or use another color variant."
+        "Please set the `isDarkBackground` and `fill` props to true or use another color variant.",
     );
   }
 
diff --git a/src/components/pill/pill.pw.tsx b/src/components/pill/pill.pw.tsx
index 1f3d5dca2d..1463c40689 100644
--- a/src/components/pill/pill.pw.tsx
+++ b/src/components/pill/pill.pw.tsx
@@ -59,13 +59,15 @@ test.describe("should render Pill component with props", () => {
     await expect(pillPreview(page)).toHaveAttribute("data-role", testData);
   });
 
-  ([
-    ["warning", warning],
-    ["neutral", neutral],
-    ["negative", negative],
-    ["positive", positive],
-    ["information", information],
-  ] as const).forEach(([color, output]) => {
+  (
+    [
+      ["warning", warning],
+      ["neutral", neutral],
+      ["negative", negative],
+      ["positive", positive],
+      ["information", information],
+    ] as const
+  ).forEach(([color, output]) => {
     test(`should render colorVariant prop as ${color}`, async ({
       mount,
       page,
@@ -77,22 +79,24 @@ test.describe("should render Pill component with props", () => {
         "2px",
         "border",
         "solid",
-        output
+        output,
       );
       await expect(pillPreview(page)).toHaveCSS(
         "background-color",
-        transparent
+        transparent,
       );
     });
   });
 
-  ([
-    ["warning", warning],
-    ["neutral", neutralDark],
-    ["negative", negativeDark],
-    ["positive", positiveDark],
-    ["information", informationDark],
-  ] as const).forEach(([color, output]) => {
+  (
+    [
+      ["warning", warning],
+      ["neutral", neutralDark],
+      ["negative", negativeDark],
+      ["positive", positiveDark],
+      ["information", informationDark],
+    ] as const
+  ).forEach(([color, output]) => {
     test(`renders with dark background colour when colorVariant is ${color} and isDarkBackground is true`, async ({
       mount,
       page,
@@ -102,7 +106,7 @@ test.describe("should render Pill component with props", () => {
           pillRole="status"
           colorVariant={color}
           isDarkBackground
-        />
+        />,
       );
 
       await checkCSSOutline(
@@ -110,28 +114,30 @@ test.describe("should render Pill component with props", () => {
         "2px",
         "border",
         "solid",
-        output
+        output,
       );
       await expect(pillPreview(page)).toHaveCSS(
         "background-color",
-        transparent
+        transparent,
       );
     });
   });
 
-  ([
-    ["warning", warning],
-    ["neutral", neutral],
-    ["negative", negative],
-    ["positive", positive],
-    ["information", information],
-  ] as const).forEach(([color, output]) => {
+  (
+    [
+      ["warning", warning],
+      ["neutral", neutral],
+      ["negative", negative],
+      ["positive", positive],
+      ["information", information],
+    ] as const
+  ).forEach(([color, output]) => {
     test(`should render colorVariant with color fill set as ${color}`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <PillComponent pillRole="status" colorVariant={color} fill />
+        <PillComponent pillRole="status" colorVariant={color} fill />,
       );
 
       await checkCSSOutline(
@@ -139,20 +145,22 @@ test.describe("should render Pill component with props", () => {
         "2px",
         "border",
         "solid",
-        output
+        output,
       );
       await expect(pillPreview(page)).toHaveCSS("background-color", output);
     });
   });
 
-  ([
-    ["warning", warning],
-    ["neutral", neutralDark],
-    ["negative", negativeDark],
-    ["positive", positiveDark],
-    ["information", informationDark],
-    ["neutralWhite", neutralWhite],
-  ] as const).forEach(([color, output]) => {
+  (
+    [
+      ["warning", warning],
+      ["neutral", neutralDark],
+      ["negative", negativeDark],
+      ["positive", positiveDark],
+      ["information", informationDark],
+      ["neutralWhite", neutralWhite],
+    ] as const
+  ).forEach(([color, output]) => {
     test(`renders with dark background colour when colorVariant is ${color}, fill is true and isDarkBackground is true`, async ({
       mount,
       page,
@@ -163,7 +171,7 @@ test.describe("should render Pill component with props", () => {
           colorVariant={color}
           fill
           isDarkBackground
-        />
+        />,
       );
 
       await checkCSSOutline(
@@ -171,16 +179,18 @@ test.describe("should render Pill component with props", () => {
         "2px",
         "border",
         "solid",
-        output
+        output,
       );
       await expect(pillPreview(page)).toHaveCSS("background-color", output);
     });
   });
 
-  ([
-    ["tag", tag],
-    ["status", status],
-  ] as [PillProps["pillRole"], string][]).forEach(([role, output]) => {
+  (
+    [
+      ["tag", tag],
+      ["status", status],
+    ] as [PillProps["pillRole"], string][]
+  ).forEach(([role, output]) => {
     test(`should render pillRole prop set as ${role}`, async ({
       mount,
       page,
@@ -192,19 +202,21 @@ test.describe("should render Pill component with props", () => {
         "2px",
         "border",
         "solid",
-        output
+        output,
       );
     });
   });
 
-  ([
-    [colorsSemanticCaution500, "rgb(239, 103, 0)"],
-    [blackOpacity65, "rgba(0, 0, 0, 0.65)"],
-    [brilliantGreenShade20, "rgb(0, 176, 0)"],
-    [red, "rgb(255, 0, 0)"],
-    [green, "rgb(0, 123, 10)"],
-    [hexBlue, "rgb(18, 52, 86)"],
-  ] as const).forEach(([color, output]) => {
+  (
+    [
+      [colorsSemanticCaution500, "rgb(239, 103, 0)"],
+      [blackOpacity65, "rgba(0, 0, 0, 0.65)"],
+      [brilliantGreenShade20, "rgb(0, 176, 0)"],
+      [red, "rgb(255, 0, 0)"],
+      [green, "rgb(0, 123, 10)"],
+      [hexBlue, "rgb(18, 52, 86)"],
+    ] as const
+  ).forEach(([color, output]) => {
     test(`should render borderColor prop set as ${output}`, async ({
       mount,
       page,
@@ -212,7 +224,7 @@ test.describe("should render Pill component with props", () => {
       await mount(
         <PillComponent pillRole="status" borderColor={color}>
           Pill
-        </PillComponent>
+        </PillComponent>,
       );
 
       await checkCSSOutline(
@@ -220,7 +232,7 @@ test.describe("should render Pill component with props", () => {
         "2px",
         "border",
         "solid",
-        output
+        output,
       );
     });
   });
@@ -237,12 +249,14 @@ test.describe("should render Pill component with props", () => {
     });
   });
 
-  ([
-    [small, "16px", "12px", "0px 8px"],
-    [medium, "20px", "14px", "0px 8px"],
-    [large, "24px", "14px", "0px 8px"],
-    [extraLarge, "28px", "16px", "0px 12px"],
-  ] as const).forEach(([size, height, fontSize, padding]) => {
+  (
+    [
+      [small, "16px", "12px", "0px 8px"],
+      [medium, "20px", "14px", "0px 8px"],
+      [large, "24px", "14px", "0px 8px"],
+      [extraLarge, "28px", "16px", "0px 12px"],
+    ] as const
+  ).forEach(([size, height, fontSize, padding]) => {
     test(`should render size prop set as ${size}`, async ({ mount, page }) => {
       await mount(<Pill size={size}>Pill</Pill>);
 
@@ -254,10 +268,12 @@ test.describe("should render Pill component with props", () => {
     });
   });
 
-  ([
-    [true, "break-spaces"],
-    [false, "nowrap"],
-  ] as const).forEach(([booleanState, cssValue]) => {
+  (
+    [
+      [true, "break-spaces"],
+      [false, "nowrap"],
+    ] as const
+  ).forEach(([booleanState, cssValue]) => {
     test(`should render wrapText prop set as ${booleanState}`, async ({
       mount,
       page,
@@ -265,7 +281,7 @@ test.describe("should render Pill component with props", () => {
       await mount(
         <Pill maxWidth="44px" wrapText={booleanState}>
           Wrapped pill
-        </Pill>
+        </Pill>,
       );
 
       const elementLocator = pillPreview(page);
@@ -285,21 +301,21 @@ test.describe("should check focus outlines and border radius", () => {
         await mount(
           <PillComponent size={size} onDelete={() => {}}>
             Pill
-          </PillComponent>
+          </PillComponent>,
         );
 
         const elementLocator = pillCloseIcon(page);
         await elementLocator.focus();
         await expect(elementLocator).toHaveCSS(
           "box-shadow",
-          "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+          "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
         );
         await expect(elementLocator).toHaveCSS(
           "outline",
-          "rgba(0, 0, 0, 0) solid 3px"
+          "rgba(0, 0, 0, 0) solid 3px",
         );
       });
-    }
+    },
   );
 
   ([small, medium, large, extraLarge] as PillProps["size"][]).forEach(
@@ -314,17 +330,17 @@ test.describe("should check focus outlines and border radius", () => {
           </PillComponent>,
           {
             hooksConfig: { focusRedesignOptOut: true },
-          }
+          },
         );
 
         const elementLocator = pillCloseIcon(page);
         await elementLocator.focus();
         await expect(elementLocator).toHaveCSS(
           "box-shadow",
-          "rgb(255, 188, 25) 0px 0px 0px 3px"
+          "rgb(255, 188, 25) 0px 0px 0px 3px",
         );
       });
-    }
+    },
   );
 
   ([small, medium, large, extraLarge] as PillProps["size"][]).forEach(
@@ -336,7 +352,7 @@ test.describe("should check focus outlines and border radius", () => {
         await mount(
           <PillComponent size={size} onDelete={() => {}}>
             Pill
-          </PillComponent>
+          </PillComponent>,
         );
 
         const pillPreviewLocator = pillPreview(page);
@@ -347,10 +363,10 @@ test.describe("should check focus outlines and border radius", () => {
         await elementLocator.focus();
         await expect(elementLocator).toHaveCSS(
           "border-radius",
-          "0px 2px 2px 0px"
+          "0px 2px 2px 0px",
         );
       });
-    }
+    },
   );
 });
 
@@ -365,7 +381,7 @@ test.describe("should check for action events", () => {
         onDelete={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const cross = pillCloseIcon(page);
@@ -383,7 +399,7 @@ test.describe("should check for action events", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const cross = pillPreview(page);
@@ -404,13 +420,9 @@ test.describe("should check for Accessibility tests", () => {
     });
   });
 
-  ([
-    "warning",
-    "neutral",
-    "negative",
-    "positive",
-    "information",
-  ] as const).forEach((color) => {
+  (
+    ["warning", "neutral", "negative", "positive", "information"] as const
+  ).forEach((color) => {
     test(`should render colorVariant as ${color} for accessibility`, async ({
       mount,
       page,
@@ -421,13 +433,9 @@ test.describe("should check for Accessibility tests", () => {
     });
   });
 
-  ([
-    "warning",
-    "neutral",
-    "negative",
-    "positive",
-    "information",
-  ] as const).forEach((color) => {
+  (
+    ["warning", "neutral", "negative", "positive", "information"] as const
+  ).forEach((color) => {
     test(`renders with darker background colour when colorVariant is ${color} and isDarkBackground is true for accessibility`, async ({
       mount,
       page,
@@ -437,7 +445,7 @@ test.describe("should check for Accessibility tests", () => {
           pillRole="status"
           colorVariant={color}
           isDarkBackground
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -455,33 +463,31 @@ test.describe("should check for Accessibility tests", () => {
     });
   });
 
-  ([
-    "warning",
-    "neutral",
-    "negative",
-    "positive",
-    "information",
-  ] as const).forEach((color) => {
+  (
+    ["warning", "neutral", "negative", "positive", "information"] as const
+  ).forEach((color) => {
     test(`should render colorVariant with fill color as ${color} for accessibility`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <PillComponent pillRole="status" colorVariant={color} fill />
+        <PillComponent pillRole="status" colorVariant={color} fill />,
       );
 
       await checkAccessibility(page);
     });
   });
 
-  ([
-    "warning",
-    "neutral",
-    "negative",
-    "positive",
-    "information",
-    "neutralWhite",
-  ] as const).forEach((color) => {
+  (
+    [
+      "warning",
+      "neutral",
+      "negative",
+      "positive",
+      "information",
+      "neutralWhite",
+    ] as const
+  ).forEach((color) => {
     test(`should render colorVariant with fill as ${color} when isDarkBackground is set to true for accessibility `, async ({
       mount,
       page,
@@ -492,7 +498,7 @@ test.describe("should check for Accessibility tests", () => {
           colorVariant={color}
           fill
           isDarkBackground
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -521,14 +527,16 @@ test.describe("should check for Accessibility tests", () => {
     });
   });
 
-  ([
-    colorsSemanticCaution500,
-    blackOpacity65,
-    brilliantGreenShade20,
-    red,
-    hexBlue,
-    green,
-  ] as const).forEach((color) => {
+  (
+    [
+      colorsSemanticCaution500,
+      blackOpacity65,
+      brilliantGreenShade20,
+      red,
+      hexBlue,
+      green,
+    ] as const
+  ).forEach((color) => {
     test(`should render borderColor set as ${color} for accessibility`, async ({
       mount,
       page,
@@ -536,7 +544,7 @@ test.describe("should check for Accessibility tests", () => {
       await mount(
         <PillComponent pillRole="status" borderColor={color}>
           Pill
-        </PillComponent>
+        </PillComponent>,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/pill/pill.style.ts b/src/components/pill/pill.style.ts
index 15654983f3..0e59dfeb04 100644
--- a/src/components/pill/pill.style.ts
+++ b/src/components/pill/pill.style.ts
@@ -62,7 +62,7 @@ const StyledPill = styled.span<AllStyledPillProps>`
         buttonFocusColor = shade(0.2, getColorValue(pillColor));
         contentColor = meetsContrastGuidelines(
           getColorValue(pillColor),
-          theme.compatibility.colorsUtilityYin090
+          theme.compatibility.colorsUtilityYin090,
         ).AAA
           ? "var(--colorsUtilityYin090)"
           : "var(--colorsUtilityYang100)";
@@ -78,7 +78,7 @@ const StyledPill = styled.span<AllStyledPillProps>`
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error(
-        `Error: [Pill] - Could not parse the string '${borderColor}', please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.`
+        `Error: [Pill] - Could not parse the string '${borderColor}', please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.`,
       );
     }
 
diff --git a/src/components/pill/pill.test.tsx b/src/components/pill/pill.test.tsx
index 3359591138..01a8f0722d 100644
--- a/src/components/pill/pill.test.tsx
+++ b/src/components/pill/pill.test.tsx
@@ -39,11 +39,11 @@ test("should render remove button with custom aria-label when ariaLabelOfRemoveB
   render(
     <Pill onDelete={() => {}} ariaLabelOfRemoveButton="custom aria label">
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(
-    screen.getByRole("button", { name: "custom aria label" })
+    screen.getByRole("button", { name: "custom aria label" }),
   ).toBeVisible();
 });
 
@@ -51,7 +51,7 @@ test("should render with provided data tags", () => {
   render(
     <Pill data-element="bar" data-role="foo">
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   const pill = screen.getByText("Test Pill");
@@ -78,7 +78,7 @@ test("should render with expected styles when isDarkBackground is true", () => {
   render(
     <Pill isDarkBackground onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -93,7 +93,7 @@ test("should render with white text colour when borderColor set to 'red' to achi
   render(
     <Pill borderColor="red" fill onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -106,7 +106,7 @@ test("should render with black text colour when borderColor set to 'lightblue' t
   render(
     <Pill borderColor="lightblue" fill onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -120,7 +120,7 @@ test("should throw an error when an invalid value is passed to borderColor", ()
   render(<Pill borderColor="invalidColour">Test Pill</Pill>);
 
   expect(consoleSpy).toHaveBeenCalledWith(
-    "Error: [Pill] - Could not parse the string 'invalidColour', please provide the color as a string in hex, rgb, rgba, hsl or hsla notation."
+    "Error: [Pill] - Could not parse the string 'invalidColour', please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.",
   );
   expect(consoleSpy).toHaveBeenCalledTimes(1);
 
@@ -131,7 +131,7 @@ test("should render with expected styles when size is S and onDelete is set", ()
   render(
     <Pill size="S" onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -147,7 +147,7 @@ test("should render with expected styles when size is M and onDelete is set", ()
   render(
     <Pill size="M" onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -164,7 +164,7 @@ test("should render with expected styles when size is L and onDelete is set", ()
   render(
     <Pill size="L" onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -181,7 +181,7 @@ test("should render with expected styles when size is XL and onDelete is set", (
   render(
     <Pill size="XL" onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -200,7 +200,7 @@ test("should render with expected styles when size is S and roundedCornersOptOut
       <Pill size="S" onDelete={() => {}}>
         Test Pill
       </Pill>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({ borderRadius: "12px" });
@@ -215,7 +215,7 @@ test("should render with expected styles when size is M and roundedCornersOptOut
       <Pill size="M" onDelete={() => {}}>
         Test Pill
       </Pill>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({ borderRadius: "12px" });
@@ -230,7 +230,7 @@ test("should render with expected styles when size is L and roundedCornersOptOut
       <Pill size="L" onDelete={() => {}}>
         Test Pill
       </Pill>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({ borderRadius: "13px" });
@@ -245,7 +245,7 @@ test("should render with expected styles when size is XL and roundedCornersOptOu
       <Pill size="XL" onDelete={() => {}}>
         Test Pill
       </Pill>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({ borderRadius: "15px" });
@@ -259,7 +259,7 @@ test("should render with expected styles when colorVariant is neutral", async ()
   render(
     <Pill pillRole="status" colorVariant="neutral" fill onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -280,7 +280,7 @@ test("should render with expected styles when colorVariant is negative", async (
   render(
     <Pill pillRole="status" colorVariant="negative" fill onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -301,7 +301,7 @@ test("should render with expected styles when colorVariant is warning", async ()
   render(
     <Pill pillRole="status" colorVariant="warning" fill onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -322,7 +322,7 @@ test("should render with expected styles when colorVariant is positive", async (
   render(
     <Pill pillRole="status" colorVariant="warning" fill onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -343,7 +343,7 @@ test("should render with expected styles when colorVariant is information", asyn
   render(
     <Pill pillRole="status" colorVariant="information" fill onDelete={() => {}}>
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -370,7 +370,7 @@ test("should render with expected styles when colorVariant is neutral and isDark
       onDelete={() => {}}
     >
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -397,7 +397,7 @@ test("should render with expected styles when colorVariant is negative and isDar
       onDelete={() => {}}
     >
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -424,7 +424,7 @@ test("should render with expected styles when colorVariant is positive and isDar
       onDelete={() => {}}
     >
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -450,7 +450,7 @@ test("should render with expected styles when colorVariant is information and is
       onDelete={() => {}}
     >
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -477,7 +477,7 @@ test("should render with expected styles when colorVariant is neutralWhite and i
       onDelete={() => {}}
     >
       Test Pill
-    </Pill>
+    </Pill>,
   );
 
   expect(screen.getByText("Test Pill")).toHaveStyle({
@@ -499,7 +499,7 @@ test("should output a console warning when the neutralWhite colorVariant is used
 
   expect(consoleSpy).toHaveBeenCalledWith(
     "[WARNING] The `neutralWhite` variant should only be used on dark backgrounds with fill set to true. " +
-      "Please set the `isDarkBackground` and `fill` props to true or use another color variant."
+      "Please set the `isDarkBackground` and `fill` props to true or use another color variant.",
   );
   expect(consoleSpy).toHaveBeenCalledTimes(1);
 
@@ -508,5 +508,5 @@ test("should output a console warning when the neutralWhite colorVariant is used
 
 testStyledSystemMarginRTL(
   (props) => <Pill {...props}>test content</Pill>,
-  () => screen.getByText("test content")
+  () => screen.getByText("test content"),
 );
diff --git a/src/components/pod/pod.component.tsx b/src/components/pod/pod.component.tsx
index a53efbe750..4d76bb60ce 100644
--- a/src/components/pod/pod.component.tsx
+++ b/src/components/pod/pod.component.tsx
@@ -45,15 +45,15 @@ export interface PodProps extends MarginProps {
   footer?: string | React.ReactNode;
   /** Supplies an edit action to the pod */
   onEdit?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
   ) => void;
   /** Supplies a delete action to the pod */
   onDelete?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
   ) => void;
   /** Supplies an undo action to the pod in soft delete state. */
   onUndo?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
   ) => void;
   /** Sets softboolean; delete state */
   softDelete?: boolean;
@@ -94,7 +94,7 @@ const Pod = React.forwardRef<HTMLDivElement, PodProps>(
       variant = "primary",
       ...rest
     }: PodProps,
-    ref
+    ref,
   ) => {
     const [isEditFocused, setEditFocused] = useState(false);
     const [isEditHovered, setEditHovered] = useState(false);
@@ -106,31 +106,32 @@ const Pod = React.forwardRef<HTMLDivElement, PodProps>(
     const l = useLocale();
     const shouldContentHaveEditEvents = useMemo(
       () => !!(onEdit && (triggerEditOnContent || displayEditButtonOnHover)),
-      [displayEditButtonOnHover, onEdit, triggerEditOnContent]
+      [displayEditButtonOnHover, onEdit, triggerEditOnContent],
+    );
+    const hasButtons = useMemo(
+      () => !!(onEdit || onDelete || onUndo),
+      [onEdit, onDelete, onUndo],
     );
-    const hasButtons = useMemo(() => !!(onEdit || onDelete || onUndo), [
-      onEdit,
-      onDelete,
-      onUndo,
-    ]);
 
-    const processPodAction = (
-      action: React.EventHandler<
-        React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
-      >
-    ) => (
-      ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
-    ) => {
-      if (
-        Event.isKeyboardEvent(ev) &&
-        Event.isEventType(ev, "keydown") &&
-        !Event.isEnterKey(ev)
-      )
-        return;
+    const processPodAction =
+      (
+        action: React.EventHandler<
+          React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
+        >,
+      ) =>
+      (
+        ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>,
+      ) => {
+        if (
+          Event.isKeyboardEvent(ev) &&
+          Event.isEventType(ev, "keydown") &&
+          !Event.isEnterKey(ev)
+        )
+          return;
 
-      ev.preventDefault();
-      action(ev);
-    };
+        ev.preventDefault();
+        action(ev);
+      };
 
     const editEvents = {
       onMouseEnter: () => setEditHovered(true),
@@ -271,7 +272,7 @@ const Pod = React.forwardRef<HTMLDivElement, PodProps>(
         )}
       </StyledPod>
     );
-  }
+  },
 );
 
 Pod.displayName = "Pod";
diff --git a/src/components/pod/pod.config.ts b/src/components/pod/pod.config.ts
index 786769ba34..37048e03b2 100644
--- a/src/components/pod/pod.config.ts
+++ b/src/components/pod/pod.config.ts
@@ -14,6 +14,6 @@ export const POD_VARIANTS = [
   "transparent",
 ] as const;
 
-export type PodSize = typeof POD_SIZES[number];
-export type PodAlignment = typeof POD_ALIGNMENTS[number];
-export type PodVariant = typeof POD_VARIANTS[number];
+export type PodSize = (typeof POD_SIZES)[number];
+export type PodAlignment = (typeof POD_ALIGNMENTS)[number];
+export type PodVariant = (typeof POD_VARIANTS)[number];
diff --git a/src/components/pod/pod.pw.tsx b/src/components/pod/pod.pw.tsx
index 204ea36060..cf9920917b 100644
--- a/src/components/pod/pod.pw.tsx
+++ b/src/components/pod/pod.pw.tsx
@@ -38,22 +38,22 @@ const specialCharacters = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 const variantTypes2: VariantTypes[] = ["h2", "h3", "p", "em", "b"];
 
 test.describe("Prop tests for Pod", () => {
-  ([
-    [true, "1px", "solid", "rgb(204, 214, 219)"],
-    [false, "0px", "none", "rgba(0, 0, 0, 0.9)"],
-  ] as [PodProps["border"], string, string, string][]).forEach(
-    ([boolVal, borderVal, style, color]) => {
-      test(`should render with border value as ${borderVal} when border prop is ${boolVal}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<PodExample border={boolVal} />);
-
-        const elem = podBlock(page);
-        await checkCSSOutline(elem, borderVal, "border", style, color);
-      });
-    }
-  );
+  (
+    [
+      [true, "1px", "solid", "rgb(204, 214, 219)"],
+      [false, "0px", "none", "rgba(0, 0, 0, 0.9)"],
+    ] as [PodProps["border"], string, string, string][]
+  ).forEach(([boolVal, borderVal, style, color]) => {
+    test(`should render with border value as ${borderVal} when border prop is ${boolVal}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PodExample border={boolVal} />);
+
+      const elem = podBlock(page);
+      await checkCSSOutline(elem, borderVal, "border", style, color);
+    });
+  });
 
   specialCharacters.forEach((children) => {
     test(`should render with ${children} as children`, async ({
@@ -78,55 +78,55 @@ test.describe("Prop tests for Pod", () => {
     });
   });
 
-  ([
-    [SIZE.EXTRASMALL, 120, 66],
-    [SIZE.SMALL, 120, 66],
-    [SIZE.MEDIUM, 136, 82],
-    [SIZE.LARGE, 184, 98],
-    [SIZE.EXTRALARGE, 216, 130],
-  ] as [PodProps["size"], number, number][]).forEach(
-    ([size, expectedHeight, expectedWidth]) => {
-      test(`should render with ${size} as size and ${expectedHeight} as height and ${expectedWidth} as width`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<PodExample size={size} />);
-
-        await assertCssValueIsApproximately(
-          podBlock(page),
-          "height",
-          expectedHeight
-        );
-
-        await assertCssValueIsApproximately(
-          podBlock(page),
-          "width",
-          expectedWidth
-        );
-      });
-    }
-  );
-
-  ([
-    ["primary", "rgb(255, 255, 255)", "none"],
-    ["secondary", "rgb(242, 245, 246)", "none"],
-    ["tertiary", "rgb(237, 241, 242)", "none"],
-    ["tile", "rgb(255, 255, 255)", "rgba(2, 18, 36, 0.2) 0px 2px 3px 0px"],
-    ["transparent", "rgba(0, 0, 0, 0)", "none"],
-  ] as [PodProps["variant"], string, string][]).forEach(
-    ([variant, color, boxShadow]) => {
-      test(`should render with ${variant} as variant when color is ${color} and boxShadow is ${boxShadow}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<PodExample variant={variant} />);
-
-        await expect(podBlock(page)).toHaveCSS("background-color", `${color}`);
-
-        await expect(podBlock(page)).toHaveCSS("box-shadow", boxShadow);
-      });
-    }
-  );
+  (
+    [
+      [SIZE.EXTRASMALL, 120, 66],
+      [SIZE.SMALL, 120, 66],
+      [SIZE.MEDIUM, 136, 82],
+      [SIZE.LARGE, 184, 98],
+      [SIZE.EXTRALARGE, 216, 130],
+    ] as [PodProps["size"], number, number][]
+  ).forEach(([size, expectedHeight, expectedWidth]) => {
+    test(`should render with ${size} as size and ${expectedHeight} as height and ${expectedWidth} as width`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PodExample size={size} />);
+
+      await assertCssValueIsApproximately(
+        podBlock(page),
+        "height",
+        expectedHeight,
+      );
+
+      await assertCssValueIsApproximately(
+        podBlock(page),
+        "width",
+        expectedWidth,
+      );
+    });
+  });
+
+  (
+    [
+      ["primary", "rgb(255, 255, 255)", "none"],
+      ["secondary", "rgb(242, 245, 246)", "none"],
+      ["tertiary", "rgb(237, 241, 242)", "none"],
+      ["tile", "rgb(255, 255, 255)", "rgba(2, 18, 36, 0.2) 0px 2px 3px 0px"],
+      ["transparent", "rgba(0, 0, 0, 0)", "none"],
+    ] as [PodProps["variant"], string, string][]
+  ).forEach(([variant, color, boxShadow]) => {
+    test(`should render with ${variant} as variant when color is ${color} and boxShadow is ${boxShadow}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PodExample variant={variant} />);
+
+      await expect(podBlock(page)).toHaveCSS("background-color", `${color}`);
+
+      await expect(podBlock(page)).toHaveCSS("box-shadow", boxShadow);
+    });
+  });
 
   specialCharacters.forEach((title) => {
     test(`should render with ${title} as title`, async ({ mount, page }) => {
@@ -178,10 +178,9 @@ test.describe("Prop tests for Pod", () => {
     });
   });
 
-  (["left", "center", "right"] as (
-    | PodProps["alignTitle"]
-    | undefined
-  )[]).forEach((alignTitle) => {
+  (
+    ["left", "center", "right"] as (PodProps["alignTitle"] | undefined)[]
+  ).forEach((alignTitle) => {
     test(`should render when text is aligned to the ${
       alignTitle || "default"
     }`, async ({ mount, page }) => {
@@ -217,50 +216,50 @@ test.describe("Prop tests for Pod", () => {
     });
   });
 
-  ([
-    [false, 82],
-    [true, 1308],
-  ] as [PodProps["editContentFullWidth"], number][]).forEach(
-    ([boolVal, expectedWidth]) => {
-      test(`should render with editContentFullWidth as ${boolVal}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<PodExample editContentFullWidth={boolVal} />);
-
-        await assertCssValueIsApproximately(
-          podBlock(page),
-          "width",
-          expectedWidth
-        );
-      });
-    }
-  );
-
-  ([
-    [true, "rgb(0, 103, 56)"],
-    [false, "rgb(255, 255, 255)"],
-  ] as [PodProps["triggerEditOnContent"], string][]).forEach(
-    ([boolVal, color]) => {
-      test(`should render with correct background color when triggerEditOnContent is ${boolVal} and hovered`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<PodExample triggerEditOnContent={boolVal} />);
-
-        await expect(podBlock(page)).toHaveCSS(
-          "background-color",
-          "rgb(255, 255, 255)"
-        );
-
-        await podBlock(page).hover();
-
-        await expect(podBlock(page)).toHaveCSS("background-color", color);
-
-        await expect(podEdit(page)).toHaveCSS("background-color", color);
-      });
-    }
-  );
+  (
+    [
+      [false, 82],
+      [true, 1308],
+    ] as [PodProps["editContentFullWidth"], number][]
+  ).forEach(([boolVal, expectedWidth]) => {
+    test(`should render with editContentFullWidth as ${boolVal}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PodExample editContentFullWidth={boolVal} />);
+
+      await assertCssValueIsApproximately(
+        podBlock(page),
+        "width",
+        expectedWidth,
+      );
+    });
+  });
+
+  (
+    [
+      [true, "rgb(0, 103, 56)"],
+      [false, "rgb(255, 255, 255)"],
+    ] as [PodProps["triggerEditOnContent"], string][]
+  ).forEach(([boolVal, color]) => {
+    test(`should render with correct background color when triggerEditOnContent is ${boolVal} and hovered`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PodExample triggerEditOnContent={boolVal} />);
+
+      await expect(podBlock(page)).toHaveCSS(
+        "background-color",
+        "rgb(255, 255, 255)",
+      );
+
+      await podBlock(page).hover();
+
+      await expect(podBlock(page)).toHaveCSS("background-color", color);
+
+      await expect(podEdit(page)).toHaveCSS("background-color", color);
+    });
+  });
 
   test.describe("check styling for Pod component", () => {
     test("should render with expected border radius styling on the main container also with edit and delete buttons", async ({
@@ -283,7 +282,7 @@ test.describe("Prop tests for Pod", () => {
       await mount(
         <PodExample onUndo={() => {}} softDelete>
           Foo
-        </PodExample>
+        </PodExample>,
       );
 
       await expect(podUndo(page)).toHaveCSS("border-radius", "8px");
@@ -301,7 +300,7 @@ test.describe("when onDelete prop is passed", () => {
         onDelete={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
     const deleteButton = podDelete(page);
     await deleteButton.click();
@@ -315,18 +314,18 @@ test.describe("when onDelete prop is passed", () => {
     await mount(
       <Pod onDelete={() => {}} internalEditButton>
         Content
-      </Pod>
+      </Pod>,
     );
 
     await podDelete(page).focus();
     await expect(podDelete(page)).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
 
     await expect(podBlock(page)).toHaveCSS(
       "border",
-      "1px solid rgb(204, 214, 219)"
+      "1px solid rgb(204, 214, 219)",
     );
   });
 
@@ -337,18 +336,18 @@ test.describe("when onDelete prop is passed", () => {
     await mount(
       <Pod onDelete={() => {}} internalEditButton>
         Content
-      </Pod>
+      </Pod>,
     );
 
     await podDelete(page).hover();
 
     await expect(podDelete(page)).not.toHaveCSS(
       "background-color",
-      "rgb(164, 45, 60)"
+      "rgb(164, 45, 60)",
     );
     await expect(podDeleteIcon(page)).not.toHaveCSS(
       "color",
-      "rgb(255, 255, 255)"
+      "rgb(255, 255, 255)",
     );
   });
 });
@@ -361,7 +360,7 @@ test.describe("when onEdit prop is passed", () => {
     await mount(
       <Pod onEdit={() => {}} displayEditButtonOnHover>
         Content
-      </Pod>
+      </Pod>,
     );
 
     await expect(podEdit(page)).not.toBeVisible();
@@ -377,7 +376,7 @@ test.describe("when onEdit prop is passed", () => {
     await mount(
       <Pod onEdit={() => {}} displayEditButtonOnHover>
         Content
-      </Pod>
+      </Pod>,
     );
 
     await expect(podEdit(page)).not.toBeVisible();
@@ -393,7 +392,7 @@ test.describe("when onEdit prop is passed", () => {
     await mount(
       <Pod onEdit={() => {}} displayEditButtonOnHover>
         Content
-      </Pod>
+      </Pod>,
     );
 
     await expect(podEdit(page)).not.toBeVisible();
@@ -418,74 +417,76 @@ test.describe("when onEdit prop is passed", () => {
     await mount(
       <Pod onEdit={() => {}} internalEditButton>
         Content
-      </Pod>
+      </Pod>,
     );
 
     await podEdit(page).hover();
 
     await expect(podEdit(page)).not.toHaveCSS(
       "background-color",
-      "rgb(0, 103, 56)"
+      "rgb(0, 103, 56)",
     );
 
     await expect(podEditIcon(page)).not.toHaveCSS(
       "color",
-      "rgb(255, 255, 255)"
+      "rgb(255, 255, 255)",
     );
   });
 
-  ([
-    [true, 1366],
-    [false, 82],
-  ] as [PodProps["internalEditButton"], number][]).forEach(
-    ([boolVal, expectedWidth]) => {
-      test(`when internalEditButton is ${boolVal}, width value is correct`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<PodExample internalEditButton={boolVal} />);
-
-        await assertCssValueIsApproximately(
-          podBlock(page),
-          "width",
-          expectedWidth
-        );
-      });
-    }
-  );
-
-  ([
-    [true, "rgba(0, 0, 0, 0)"],
-    [false, "rgb(0, 103, 56)"],
-  ] as [PodProps["internalEditButton"], string][]).forEach(
-    ([boolVal, color]) => {
-      test(`when internalEditButton is ${boolVal} and edit button is hovered, Pod background colours are correct`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <Pod onEdit={() => {}} internalEditButton={boolVal}>
-            Content
-          </Pod>
-        );
-
-        await expect(podBlock(page)).toHaveCSS(
-          "background-color",
-          "rgb(255, 255, 255)"
-        );
-
-        await podEdit(page).hover();
-        await expect(podEdit(page)).toHaveCSS("background-color", color);
-      });
-    }
-  );
+  (
+    [
+      [true, 1366],
+      [false, 82],
+    ] as [PodProps["internalEditButton"], number][]
+  ).forEach(([boolVal, expectedWidth]) => {
+    test(`when internalEditButton is ${boolVal}, width value is correct`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PodExample internalEditButton={boolVal} />);
+
+      await assertCssValueIsApproximately(
+        podBlock(page),
+        "width",
+        expectedWidth,
+      );
+    });
+  });
+
+  (
+    [
+      [true, "rgba(0, 0, 0, 0)"],
+      [false, "rgb(0, 103, 56)"],
+    ] as [PodProps["internalEditButton"], string][]
+  ).forEach(([boolVal, color]) => {
+    test(`when internalEditButton is ${boolVal} and edit button is hovered, Pod background colours are correct`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <Pod onEdit={() => {}} internalEditButton={boolVal}>
+          Content
+        </Pod>,
+      );
+
+      await expect(podBlock(page)).toHaveCSS(
+        "background-color",
+        "rgb(255, 255, 255)",
+      );
+
+      await podEdit(page).hover();
+      await expect(podEdit(page)).toHaveCSS("background-color", color);
+    });
+  });
 });
 
 test.describe("when onUndo and softDelete props are passed", () => {
-  ([
-    [true, "be.visible"],
-    [false, "not.exist"],
-  ] as [PodProps["softDelete"], string][]).forEach(([boolVal, state]) => {
+  (
+    [
+      [true, "be.visible"],
+      [false, "not.exist"],
+    ] as [PodProps["softDelete"], string][]
+  ).forEach(([boolVal, state]) => {
     test(`should render when softDelete is ${boolVal} that undo button is ${state}`, async ({
       mount,
       page,
@@ -510,7 +511,7 @@ test.describe("when onUndo and softDelete props are passed", () => {
         onUndo={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
     const undo = podUndo(page);
     await undo.click();
@@ -524,19 +525,19 @@ test.describe("when onUndo and softDelete props are passed", () => {
     await mount(
       <Pod onUndo={() => {}} softDelete internalEditButton>
         Content
-      </Pod>
+      </Pod>,
     );
 
     await podUndo(page).hover();
 
     await expect(podUndo(page)).not.toHaveCSS(
       "background-color",
-      "rgb(0, 103, 56)"
+      "rgb(0, 103, 56)",
     );
 
     await expect(podUndoIcon(page)).not.toHaveCSS(
       "color",
-      "rgb(255, 255, 255)"
+      "rgb(255, 255, 255)",
     );
   });
 
@@ -550,7 +551,7 @@ test.describe("when onUndo and softDelete props are passed", () => {
 
     await expect(podBlock(page)).toHaveCSS(
       "background-color",
-      blockBackgroundColor
+      blockBackgroundColor,
     );
   });
 
@@ -565,7 +566,7 @@ test.describe("when onUndo and softDelete props are passed", () => {
     await expect(page.getByText("Content")).toHaveCSS("color", childrenColor);
     await expect(page.getByText("More content")).toHaveCSS(
       "color",
-      childrenColor
+      childrenColor,
     );
   });
 });
@@ -584,7 +585,7 @@ test.describe("Accessibility tests", () => {
     await mount(
       <Pod onDelete={() => {}} internalEditButton>
         Content
-      </Pod>
+      </Pod>,
     );
 
     await podDelete(page).focus();
diff --git a/src/components/pod/pod.style.ts b/src/components/pod/pod.style.ts
index ec16c1f28e..6d80aae81c 100644
--- a/src/components/pod/pod.style.ts
+++ b/src/components/pod/pod.style.ts
@@ -54,64 +54,63 @@ const StyledBlock = styled.div<StyledBlockProps>`
     internalEditButton,
     isHovered,
     isFocused,
-  }) =>
-    css`
-      box-sizing: border-box;
-      border-radius: var(--borderRadius100);
-      display: flex;
-      flex-direction: column;
-      background-color: ${blockBackgrounds[variant]};
-      width: 100%;
-      height: 100%;
+  }) => css`
+    box-sizing: border-box;
+    border-radius: var(--borderRadius100);
+    display: flex;
+    flex-direction: column;
+    background-color: ${blockBackgrounds[variant]};
+    width: 100%;
+    height: 100%;
 
-      ${variant === "tile" && "box-shadow: 0 2px 3px 0 rgba(2, 18, 36, 0.2)"};
+    ${variant === "tile" && "box-shadow: 0 2px 3px 0 rgba(2, 18, 36, 0.2)"};
 
-      ${noBorder
-        ? "border: none"
-        : `border: 1px solid var(--colorsUtilityMajor100)`};
+    ${noBorder
+      ? "border: none"
+      : `border: 1px solid var(--colorsUtilityMajor100)`};
 
-      ${hasButtons && !(fullWidth || internalEditButton) && "width: auto;"};
+    ${hasButtons && !(fullWidth || internalEditButton) && "width: auto;"};
 
-      ${contentTriggersEdit && "cursor: pointer"};
+    ${contentTriggersEdit && "cursor: pointer"};
 
-      ${(isHovered || isFocused) &&
+    ${(isHovered || isFocused) &&
+    css`
+      background-color: var(--colorsUtilityMajor075);
+
+      ${internalEditButton &&
+      variant === "tile" &&
+      "background-color: var(--colorsUtilityMajorTransparent);"}
+
+      ${contentTriggersEdit &&
       css`
-        background-color: var(--colorsUtilityMajor075);
-
-        ${internalEditButton &&
-        variant === "tile" &&
-        "background-color: var(--colorsUtilityMajorTransparent);"}
-
-        ${contentTriggersEdit &&
-        css`
-          background-color: var(--colorsActionMajor600);
-          * {
-            color: var(--colorsUtilityYang100);
-          }
-        `}
+        background-color: var(--colorsActionMajor600);
+        * {
+          color: var(--colorsUtilityYang100);
+        }
       `}
+    `}
 
-      ${(!internalEditButton || contentTriggersEdit) &&
-      (isFocused
-        ? css`
-            outline: 3px solid var(--colorsSemanticFocus500);
-            border: none;
-            padding: ${noBorder ? 0 : 1}px;
-          `
-        : css`
-            outline: none;
-          `)}
+    ${(!internalEditButton || contentTriggersEdit) &&
+    (isFocused
+      ? css`
+          outline: 3px solid var(--colorsSemanticFocus500);
+          border: none;
+          padding: ${noBorder ? 0 : 1}px;
+        `
+      : css`
+          outline: none;
+        `)}
 
       ${softDelete &&
-      css`
-        border: none;
-        background-color: var(--colorsActionDisabled500);
+    css`
+      border: none;
+      background-color: var(--colorsActionDisabled500);
 
-        & > * {
-          color: var(--colorsUtilityYin065);
-        }
-      `};
-    `}
+      & > * {
+        color: var(--colorsUtilityYin065);
+      }
+    `};
+  `}
 `;
 
 const contentPaddings = {
diff --git a/src/components/pod/pod.test.tsx b/src/components/pod/pod.test.tsx
index 7b60f25d36..611972181c 100644
--- a/src/components/pod/pod.test.tsx
+++ b/src/components/pod/pod.test.tsx
@@ -9,7 +9,7 @@ test("renders with `title` as a string", () => {
   render(<Pod title="Title" />);
 
   expect(
-    screen.getByRole("heading", { name: "Title", level: 4 })
+    screen.getByRole("heading", { name: "Title", level: 4 }),
   ).toBeVisible();
 });
 
@@ -17,7 +17,7 @@ test("renders with `title` as a node", () => {
   render(<Pod title={<Typography variant="h1">Title</Typography>} />);
 
   expect(
-    screen.getByRole("heading", { name: "Title", level: 1 })
+    screen.getByRole("heading", { name: "Title", level: 1 }),
   ).toBeVisible();
 });
 
@@ -25,7 +25,7 @@ test("renders with `subtitle` as a string", () => {
   render(<Pod title="Title" subtitle="Subtitle" />);
 
   expect(
-    screen.getByRole("heading", { name: "Subtitle", level: 5 })
+    screen.getByRole("heading", { name: "Subtitle", level: 5 }),
   ).toBeVisible();
 });
 
@@ -34,11 +34,11 @@ test("renders with `subtitle` as a node", () => {
     <Pod
       title="Title"
       subtitle={<Typography variant="h1">Subtitle</Typography>}
-    />
+    />,
   );
 
   expect(
-    screen.getByRole("heading", { name: "Subtitle", level: 1 })
+    screen.getByRole("heading", { name: "Subtitle", level: 1 }),
   ).toBeVisible();
 });
 
@@ -52,7 +52,7 @@ test("renders with children", () => {
   render(
     <Pod title="Title">
       <Typography variant="h1">Children</Typography>
-    </Pod>
+    </Pod>,
   );
 
   expect(screen.getByText("Children")).toBeVisible();
@@ -69,7 +69,7 @@ test("renders edit button when `displayEditButtonOnHover` is true and pod is hov
   render(<Pod title="Title" onEdit={() => {}} displayEditButtonOnHover />);
 
   expect(
-    screen.queryByRole("button", { name: "Edit" })
+    screen.queryByRole("button", { name: "Edit" }),
   ).not.toBeInTheDocument();
 
   await user.hover(screen.getByTestId("pod-block"));
@@ -235,12 +235,12 @@ test("renders content with focus border when edit button is focused and removes
 
   const content = screen.getByTestId("pod-block");
   expect(content).toHaveStyleRule(
-    "border: 3px solid var(--colorsSemanticFocus500)"
+    "border: 3px solid var(--colorsSemanticFocus500)",
   );
 
   editButton.blur();
   expect(content).not.toHaveStyleRule(
-    "border: 3px solid var(--colorsSemanticFocus500)"
+    "border: 3px solid var(--colorsSemanticFocus500)",
   );
 });
 
@@ -253,12 +253,12 @@ test("renders content with focus border when delete button is focused and remove
 
   const content = screen.getByTestId("pod-block");
   expect(content).toHaveStyleRule(
-    "border: 3px solid var(--colorsSemanticFocus500)"
+    "border: 3px solid var(--colorsSemanticFocus500)",
   );
 
   deleteButton.blur();
   expect(content).not.toHaveStyleRule(
-    "border: 3px solid var(--colorsSemanticFocus500)"
+    "border: 3px solid var(--colorsSemanticFocus500)",
   );
 });
 
@@ -271,12 +271,12 @@ test("renders content with focus border when undo button is focused and removes
 
   const content = screen.getByTestId("pod-block");
   expect(content).toHaveStyleRule(
-    "border: 3px solid var(--colorsSemanticFocus500)"
+    "border: 3px solid var(--colorsSemanticFocus500)",
   );
 
   undoButton.blur();
   expect(content).not.toHaveStyleRule(
-    "border: 3px solid var(--colorsSemanticFocus500)"
+    "border: 3px solid var(--colorsSemanticFocus500)",
   );
 });
 
@@ -379,7 +379,7 @@ test("renders with expected styles when `internalEditButton` is true", () => {
       onEdit={() => {}}
       onDelete={() => {}}
       internalEditButton
-    />
+    />,
   );
 
   const buttonContainer = screen.getByTestId("action-button-container");
@@ -393,13 +393,13 @@ test("renders with expected styles when `internalEditButton` is true", () => {
   const editButton = screen.getByRole("button", { name: "Edit" });
   expect(editButton).toHaveStyle({ border: "none" });
   expect(editButton).toHaveStyleRule(
-    "background: var(--colorsActionMajorTransparent)"
+    "background: var(--colorsActionMajorTransparent)",
   );
 
   const deleteButton = screen.queryByRole("button", { name: "Delete" });
   expect(deleteButton).toHaveStyle({ border: "none" });
   expect(deleteButton).toHaveStyleRule(
-    "background: var(--colorsActionMajorTransparent)"
+    "background: var(--colorsActionMajorTransparent)",
   );
 });
 
@@ -410,7 +410,7 @@ test("renders undo button with expected styles when `internalEditButton` is true
   const undoButton = screen.getByRole("button", { name: "Undo" });
   expect(undoButton).toHaveStyle({ border: "none" });
   expect(undoButton).toHaveStyleRule(
-    "background: var(--colorsActionMajorTransparent)"
+    "background: var(--colorsActionMajorTransparent)",
   );
 });
 
@@ -423,7 +423,7 @@ test("renders with expected styles when `variant` is 'tile'", () => {
 
   const footer = screen.getByText("Footer");
   expect(footer).toHaveStyleRule(
-    "border-top: 1px solid var(--colorsUtilityMajor100)"
+    "border-top: 1px solid var(--colorsUtilityMajor100)",
   );
 });
 
@@ -436,7 +436,7 @@ test("renders with expected styles when `align` is 'right' and `internalEditButt
       onDelete={() => {}}
       alignTitle="right"
       internalEditButton
-    />
+    />,
   );
 
   const header = screen.getByTestId("pod-content-header");
@@ -454,7 +454,7 @@ test("renders footer with correct colour when `softDelete` is true", () => {
 // coverage
 test("renders block with correct colour when `variant` is 'tile', `internalEditButton` is true and a button is focused", () => {
   render(
-    <Pod title="Title" variant="tile" onEdit={() => {}} internalEditButton />
+    <Pod title="Title" variant="tile" onEdit={() => {}} internalEditButton />,
   );
 
   const editButton = screen.getByRole("button", { name: "Edit" });
@@ -462,7 +462,7 @@ test("renders block with correct colour when `variant` is 'tile', `internalEditB
 
   const block = screen.getByTestId("pod-block");
   expect(block).toHaveStyleRule(
-    "background-color: var(--colorsActionMajorTransparent)"
+    "background-color: var(--colorsActionMajorTransparent)",
   );
 });
 
@@ -479,5 +479,5 @@ test("renders block with correct padding when `border` is false and a button is
 
 testStyledSystemMarginRTL(
   (props) => <Pod data-role="pod" {...props} />,
-  () => screen.getByTestId("pod")
+  () => screen.getByTestId("pod"),
 );
diff --git a/src/components/popover-container/components.test-pw.tsx b/src/components/popover-container/components.test-pw.tsx
index ed39c8bc3f..4c624a366f 100644
--- a/src/components/popover-container/components.test-pw.tsx
+++ b/src/components/popover-container/components.test-pw.tsx
@@ -16,7 +16,7 @@ export const Default = ({ title, open }: { title?: string; open: boolean }) => (
 );
 
 export const PopoverContainerComponent = (
-  props: Partial<PopoverContainerProps>
+  props: Partial<PopoverContainerProps>,
 ) => {
   const [isOpen, setIsOpen] = useState(true);
   const onOpen = () => setIsOpen(isOpen);
@@ -39,7 +39,7 @@ export const PopoverContainerComponent = (
 };
 
 export const PopoverContainerComponentCoverButton = (
-  props: Partial<PopoverContainerProps>
+  props: Partial<PopoverContainerProps>,
 ) => {
   return (
     <Box height="150px" margin="100px">
@@ -278,7 +278,7 @@ export const Filter = () => {
   const updateCheckValue = (e: React.ChangeEvent<HTMLInputElement>) => {
     const temps = options;
     const findCorrectIndex = temps.findIndex(
-      (item) => item.value === e.target.value
+      (item) => item.value === e.target.value,
     );
     if (findCorrectIndex !== -1) {
       temps[findCorrectIndex].checked = !temps[findCorrectIndex].checked;
@@ -412,7 +412,7 @@ export const WithRenderCloseButtonComponent = () => (
 );
 
 export const PopoverContainerFocusOrder = (
-  props: Partial<PopoverContainerProps>
+  props: Partial<PopoverContainerProps>,
 ) => {
   const [isOpen, setIsOpen] = useState(true);
   const onOpen = () => setIsOpen(isOpen);
diff --git a/src/components/popover-container/popover-container-test.stories.tsx b/src/components/popover-container/popover-container-test.stories.tsx
index 88b227c111..2286ca54f6 100644
--- a/src/components/popover-container/popover-container-test.stories.tsx
+++ b/src/components/popover-container/popover-container-test.stories.tsx
@@ -69,7 +69,7 @@ WithSelect.story = {
 export const WithMultiSelect = () => {
   const [value, setValue] = useState<string[]>([]);
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
   }
 
   return (
diff --git a/src/components/popover-container/popover-container.component.tsx b/src/components/popover-container/popover-container.component.tsx
index d7f80aa19a..5889c3b4ae 100644
--- a/src/components/popover-container/popover-container.component.tsx
+++ b/src/components/popover-container/popover-container.component.tsx
@@ -36,7 +36,7 @@ export interface RenderOpenProps {
   isOpen?: boolean;
   "data-element"?: string;
   onClick: (
-    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
+    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>,
   ) => void;
   ref: React.RefObject<HTMLButtonElement>;
   "aria-label"?: string;
@@ -75,7 +75,7 @@ export interface RenderCloseProps {
   "data-element"?: string;
   tabIndex: number;
   onClick: (
-    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
+    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>,
   ) => void;
   ref: React.RefObject<HTMLButtonElement>;
   "aria-label": string;
@@ -125,13 +125,16 @@ export interface PopoverContainerProps extends PaddingProps {
   title?: string;
   /** Callback fires when close icon clicked */
   onClose?: (
-    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | Event
+    ev:
+      | React.KeyboardEvent<HTMLElement>
+      | React.MouseEvent<HTMLElement>
+      | Event,
   ) => void;
   /** if `true` the popover-container is open */
   open?: boolean;
   /** Callback fires when open component is clicked */
   onOpen?: (
-    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
+    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>,
   ) => void;
   /** if `true` the popover-container will cover open button */
   shouldCoverButton?: boolean;
@@ -155,13 +158,13 @@ function usePopoverMiddleware(shouldCoverButton: boolean) {
       offset(
         shouldCoverButton
           ? ({ rects }) => ({ mainAxis: -rects.reference.height })
-          : 6
+          : 6,
       ),
       flip({
         fallbackStrategy: "initialPlacement",
       }),
     ],
-    [shouldCoverButton]
+    [shouldCoverButton],
   );
 }
 
@@ -198,7 +201,7 @@ export const PopoverContainer = ({
   const isOpen = isControlled ? open : isOpenInternal;
 
   const reduceMotion = !useMediaQuery(
-    "screen and (prefers-reduced-motion: no-preference)"
+    "screen and (prefers-reduced-motion: no-preference)",
   );
 
   const popoverMiddleware = usePopoverMiddleware(shouldCoverButton);
@@ -208,7 +211,7 @@ export const PopoverContainer = ({
       ev:
         | React.MouseEvent<HTMLElement>
         | React.KeyboardEvent<HTMLElement>
-        | KeyboardEvent
+        | KeyboardEvent,
     ) => {
       /* istanbul ignore else */
       if (!isControlled) setIsOpenInternal(false);
@@ -218,7 +221,7 @@ export const PopoverContainer = ({
       /* istanbul ignore else */
       if (isOpen) openButtonRef.current?.focus();
     },
-    [isControlled, isOpen, onClose]
+    [isControlled, isOpen, onClose],
   );
 
   const handleEscKey = useCallback(
@@ -235,7 +238,7 @@ export const PopoverContainer = ({
         closePopover(ev);
       }
     },
-    [closePopover]
+    [closePopover],
   );
 
   useEffect(() => {
@@ -247,7 +250,7 @@ export const PopoverContainer = ({
   }, [handleEscKey]);
 
   const handleOpenButtonClick = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
   ) => {
     /* istanbul ignore else */
     if (!isControlled) setIsOpenInternal(!isOpen);
@@ -258,7 +261,7 @@ export const PopoverContainer = ({
   };
 
   const handleCloseButtonClick = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
   ) => {
     closePopover(e);
   };
@@ -266,7 +269,7 @@ export const PopoverContainer = ({
   useFocusPortalContent(
     shouldCoverButton ? undefined : popoverContentNodeRef,
     shouldCoverButton ? undefined : openButtonRef,
-    closePopover
+    closePopover,
   );
 
   const renderOpenComponentProps = {
diff --git a/src/components/popover-container/popover-container.pw.tsx b/src/components/popover-container/popover-container.pw.tsx
index 579f27cdea..1b939d41fb 100644
--- a/src/components/popover-container/popover-container.pw.tsx
+++ b/src/components/popover-container/popover-container.pw.tsx
@@ -70,16 +70,12 @@ test.describe("Check props of Popover Container component", () => {
     });
   });
 
-  ([
-    ["left", 131, 670, 560, 345],
-    ["right", 131, 345, 560, 670],
-  ] as [
-    PopoverContainerProps["position"],
-    number,
-    number,
-    number,
-    number
-  ][]).forEach(([position, top, right, bottom, left]) => {
+  (
+    [
+      ["left", 131, 670, 560, 345],
+      ["right", 131, 345, 560, 670],
+    ] as [PopoverContainerProps["position"], number, number, number, number][]
+  ).forEach(([position, top, right, bottom, left]) => {
     test(`when position prop is ${position}, component should have correct absolute positioning`, async ({
       mount,
       page,
@@ -87,52 +83,48 @@ test.describe("Check props of Popover Container component", () => {
       await mount(
         <Box display="flex" justifyContent="center">
           <PopoverContainerComponent position={position} />
-        </Box>
+        </Box>,
       );
 
       const popoverContainerContentElement = popoverContainerContent(page);
 
       await expect(popoverContainerContentElement).toHaveCSS(
         "position",
-        "absolute"
+        "absolute",
       );
 
       await assertCssValueIsApproximately(
         popoverContainerContentElement,
         "top",
-        top
+        top,
       );
 
       await assertCssValueIsApproximately(
         popoverContainerContentElement,
         "right",
-        right
+        right,
       );
 
       await assertCssValueIsApproximately(
         popoverContainerContentElement,
         "bottom",
-        bottom
+        bottom,
       );
 
       await assertCssValueIsApproximately(
         popoverContainerContentElement,
         "left",
-        left
+        left,
       );
     });
   });
 
-  ([
-    ["left", 121, 685, 572, 335],
-    ["right", 121, 335, 572, 685],
-  ] as [
-    PopoverContainerProps["position"],
-    number,
-    number,
-    number,
-    number
-  ][]).forEach(([position, top, right, bottom, left]) => {
+  (
+    [
+      ["left", 121, 685, 572, 335],
+      ["right", 121, 335, 572, 685],
+    ] as [PopoverContainerProps["position"], number, number, number, number][]
+  ).forEach(([position, top, right, bottom, left]) => {
     test(`when position prop set to ${position} and a custom open component is used, expected absolute positioning is applied`, async ({
       mount,
       page,
@@ -147,37 +139,37 @@ test.describe("Check props of Popover Container component", () => {
               onClick: (ev: React.MouseEvent<HTMLElement>) => void;
             }) => <Portrait onClick={onClick} />}
           />
-        </Box>
+        </Box>,
       );
       const popoverContainerContentElement = popoverContainerContent(page);
 
       await expect(popoverContainerContentElement).toHaveCSS(
         "position",
-        "absolute"
+        "absolute",
       );
 
       await assertCssValueIsApproximately(
         popoverContainerContentElement,
         "top",
-        top
+        top,
       );
 
       await assertCssValueIsApproximately(
         popoverContainerContentElement,
         "right",
-        right
+        right,
       );
 
       await assertCssValueIsApproximately(
         popoverContainerContentElement,
         "bottom",
-        bottom
+        bottom,
       );
 
       await assertCssValueIsApproximately(
         popoverContainerContentElement,
         "left",
-        left
+        left,
       );
     });
   });
@@ -187,7 +179,7 @@ test.describe("Check props of Popover Container component", () => {
 
     await expect(popoverContainerContent(page)).toHaveAttribute(
       "aria-describedby",
-      testString
+      testString,
     );
   });
 
@@ -196,18 +188,18 @@ test.describe("Check props of Popover Container component", () => {
 
     await expect(popoverSettingsIcon(page)).toHaveAttribute(
       "aria-label",
-      testString
+      testString,
     );
   });
 
   test("should render with closeButtonAriaLabel", async ({ mount, page }) => {
     await mount(
-      <PopoverContainerComponent closeButtonAriaLabel={testString} />
+      <PopoverContainerComponent closeButtonAriaLabel={testString} />,
     );
 
     await expect(popoverCloseIcon(page)).toHaveAttribute(
       "aria-label",
-      testString
+      testString,
     );
   });
 
@@ -218,7 +210,7 @@ test.describe("Check props of Popover Container component", () => {
 
     await expect(popoverContainerContentElement).toHaveAttribute(
       "aria-label",
-      testString
+      testString,
     );
   });
 
@@ -259,10 +251,12 @@ test.describe("Check props of Popover Container component", () => {
   const getYValue = (locator: Locator) =>
     locator.evaluate((element) => element.getBoundingClientRect().y);
 
-  ([
-    [true, 102, 178],
-    [false, 132, 208],
-  ] as const).forEach(([coverButton, yAndTopValueMin, bottomValueMin]) => {
+  (
+    [
+      [true, 102, 178],
+      [false, 132, 208],
+    ] as const
+  ).forEach(([coverButton, yAndTopValueMin, bottomValueMin]) => {
     test(`should render with shouldCoverButton prop set to ${coverButton}`, async ({
       mount,
       page,
@@ -272,7 +266,7 @@ test.describe("Check props of Popover Container component", () => {
           <PopoverContainerComponentCoverButton
             shouldCoverButton={coverButton}
           />
-        </Box>
+        </Box>,
       );
 
       const popoverContainerContentElement = popoverContainerContent(page);
@@ -280,7 +274,7 @@ test.describe("Check props of Popover Container component", () => {
 
       const positionTop = await getTopValue(popoverContainerContentElement);
       const positionBottom = await getBottomValue(
-        popoverContainerContentElement
+        popoverContainerContentElement,
       );
       const positionY = await getYValue(popoverContainerContentElement);
 
@@ -293,7 +287,7 @@ test.describe("Check props of Popover Container component", () => {
   keysToTrigger.forEach((key) => {
     test(`should open using ${key} keyboard key`, async ({ mount, page }) => {
       await mount(
-        <PopoverContainer title="String is awesome">Contents</PopoverContainer>
+        <PopoverContainer title="String is awesome">Contents</PopoverContainer>,
       );
 
       const popoverSettingsIconElement = popoverSettingsIcon(page);
@@ -306,7 +300,7 @@ test.describe("Check props of Popover Container component", () => {
   keysToTrigger.forEach((key) => {
     test(`should close using ${key} keyboard key`, async ({ mount, page }) => {
       await mount(
-        <PopoverContainer title="String is awesome">Contents</PopoverContainer>
+        <PopoverContainer title="String is awesome">Contents</PopoverContainer>,
       );
 
       const popoverSettingsIconElement = popoverSettingsIcon(page);
@@ -320,7 +314,7 @@ test.describe("Check props of Popover Container component", () => {
 
   test("should close using escape keyboard key", async ({ mount, page }) => {
     await mount(
-      <PopoverContainer title="String is awesome">Contents</PopoverContainer>
+      <PopoverContainer title="String is awesome">Contents</PopoverContainer>,
     );
 
     const openButton = page.getByRole("button", { name: "String is awesome" });
@@ -399,7 +393,7 @@ test.describe("Check props of Popover Container component", () => {
           onOpen={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       const popoverSettingsIconElement = popoverSettingsIcon(page);
@@ -419,7 +413,7 @@ test.describe("Check props of Popover Container component", () => {
             onOpen={() => {
               callbackCount += 1;
             }}
-          />
+          />,
         );
 
         const popoverSettingsIconElement = popoverSettingsIcon(page);
@@ -440,7 +434,7 @@ test.describe("Check props of Popover Container component", () => {
             callbackCount += 1;
           }}
           open
-        />
+        />,
       );
 
       const popoverCloseIconElement = popoverCloseIcon(page);
@@ -461,7 +455,7 @@ test.describe("Check props of Popover Container component", () => {
               callbackCount += 1;
             }}
             open
-          />
+          />,
         );
 
         const popoverCloseIconElement = popoverCloseIcon(page);
@@ -482,7 +476,7 @@ test.describe("Check props of Popover Container component", () => {
             callbackCount += 1;
           }}
           open
-        />
+        />,
       );
 
       const popoverContainerElement = popoverContainerComponent(page);
@@ -502,7 +496,7 @@ test.describe("Check props of Popover Container component", () => {
             callbackCount += 1;
           }}
           open
-        />
+        />,
       );
 
       await page.locator("body").click();
@@ -521,7 +515,7 @@ test.describe("Check props of Popover Container component", () => {
             callbackCount += 1;
           }}
           open={false}
-        />
+        />,
       );
 
       await page.locator("body").click();
@@ -573,7 +567,7 @@ test.describe("Check props of Popover Container component", () => {
         <button type="button">First</button>
         <button type="button">Second</button>
         <button type="button">Third</button>
-      </CoverButton>
+      </CoverButton>,
     );
 
     const openButton = popoverSettingsIcon(page);
@@ -606,7 +600,7 @@ test.describe("Check props of Popover Container component", () => {
         <button type="button">First</button>
         <button type="button">Second</button>
         <button type="button">Third</button>
-      </CoverButton>
+      </CoverButton>,
     );
 
     const openButton = popoverSettingsIcon(page);
@@ -743,7 +737,7 @@ test.describe("Check props of Popover Container component", () => {
       await mainTextElement.click();
 
       const assertions = [0, 1, 2].map((index) =>
-        expect(getComponent(page, "pill").nth(index)).toBeVisible()
+        expect(getComponent(page, "pill").nth(index)).toBeVisible(),
       );
       await Promise.all(assertions);
 
@@ -762,7 +756,7 @@ test.describe("Check props of Popover Container component", () => {
 
       await expect(popoverContainerContentElement).toHaveCSS(
         "border-radius",
-        "8px"
+        "8px",
       );
     });
   });
diff --git a/src/components/popover-container/popover-container.stories.tsx b/src/components/popover-container/popover-container.stories.tsx
index 867db23295..1edfa75cf4 100644
--- a/src/components/popover-container/popover-container.stories.tsx
+++ b/src/components/popover-container/popover-container.stories.tsx
@@ -257,7 +257,7 @@ export const Filter: Story = () => {
   const updateCheckValue = (e: React.ChangeEvent<HTMLInputElement>) => {
     const temps = options;
     const findCorrectIndex = temps.findIndex(
-      (item) => item.value === e.target.value
+      (item) => item.value === e.target.value,
     );
     if (findCorrectIndex !== -1) {
       temps[findCorrectIndex].checked = !temps[findCorrectIndex].checked;
diff --git a/src/components/popover-container/popover-container.test.tsx b/src/components/popover-container/popover-container.test.tsx
index cbf419918d..0498ed3c76 100644
--- a/src/components/popover-container/popover-container.test.tsx
+++ b/src/components/popover-container/popover-container.test.tsx
@@ -36,7 +36,7 @@ describe("open button", () => {
 
     expect(screen.getByRole("button")).toHaveAttribute(
       "aria-haspopup",
-      "dialog"
+      "dialog",
     );
   });
 
@@ -62,7 +62,7 @@ describe("open button", () => {
         )}
       >
         Ta da!
-      </PopoverContainer>
+      </PopoverContainer>,
     );
 
     expect(screen.getByRole("button")).toHaveTextContent("Custom Open Button");
@@ -78,7 +78,7 @@ describe("open button", () => {
         )}
       >
         Ta da!
-      </PopoverContainer>
+      </PopoverContainer>,
     );
 
     const openButton = screen.getByRole("button");
@@ -95,7 +95,7 @@ describe("open button", () => {
         )}
       >
         Ta da!
-      </PopoverContainer>
+      </PopoverContainer>,
     );
 
     const openButton = screen.getByRole("button");
@@ -107,7 +107,7 @@ test("popup has a title when title prop is passed", () => {
   render(
     <PopoverContainer title="Custom Title" open>
       Ta da!
-    </PopoverContainer>
+    </PopoverContainer>,
   );
 
   expect(screen.getByRole("dialog")).toHaveTextContent("Custom Title");
@@ -117,7 +117,7 @@ test("popup uses title prop as its correct accessible name when passed", () => {
   render(
     <PopoverContainer title="Custom Title" open>
       Ta da!
-    </PopoverContainer>
+    </PopoverContainer>,
   );
 
   expect(screen.getByRole("dialog")).toHaveAccessibleName("Custom Title");
@@ -127,7 +127,7 @@ test("popup uses containerAriaLabel prop as its correct accessible name when pas
   render(
     <PopoverContainer containerAriaLabel="Custom Label" open>
       Ta da!
-    </PopoverContainer>
+    </PopoverContainer>,
   );
 
   expect(screen.getByRole("dialog")).toHaveAccessibleName("Custom Label");
@@ -140,11 +140,11 @@ test("popup has correct accessible description when ariaDescribedBy prop is pass
       <PopoverContainer ariaDescribedBy="subtitle" open>
         Ta da!
       </PopoverContainer>
-    </>
+    </>,
   );
 
   expect(screen.getByRole("dialog")).toHaveAccessibleDescription(
-    "Custom Subtitle"
+    "Custom Subtitle",
   );
 });
 
@@ -152,12 +152,12 @@ test("popup title has correct data tag", () => {
   render(
     <PopoverContainer title="Custom Title" open>
       Ta da!
-    </PopoverContainer>
+    </PopoverContainer>,
   );
 
   expect(screen.getByText("Custom Title")).toHaveAttribute(
     "data-element",
-    "popover-container-title"
+    "popover-container-title",
   );
 });
 
@@ -166,7 +166,7 @@ describe("close button", () => {
     render(
       <PopoverContainer onClose={() => {}} open>
         Ta da!
-      </PopoverContainer>
+      </PopoverContainer>,
     );
 
     expect(screen.getByRole("button", { name: "close" })).toBeVisible();
@@ -183,11 +183,11 @@ describe("close button", () => {
         )}
       >
         Ta da!
-      </PopoverContainer>
+      </PopoverContainer>,
     );
 
     expect(
-      screen.getByRole("button", { name: "Custom Close Button" })
+      screen.getByRole("button", { name: "Custom Close Button" }),
     ).toBeVisible();
   });
 
@@ -201,16 +201,16 @@ describe("close button", () => {
         }}
       >
         Content
-      </PopoverContainer>
+      </PopoverContainer>,
     );
 
     expect(screen.getByRole("button", { name: "close" })).toHaveAttribute(
       "data-element",
-      "foo"
+      "foo",
     );
     expect(screen.getByRole("button", { name: "close" })).toHaveAttribute(
       "data-role",
-      "bar"
+      "bar",
     );
   });
 });
@@ -255,7 +255,7 @@ test("popup traps focus when shouldCoverButton prop is true", async () => {
   render(
     <PopoverContainer shouldCoverButton open onClose={() => {}}>
       Content
-    </PopoverContainer>
+    </PopoverContainer>,
   );
 
   const closeButton = screen.getByRole("button", { name: "close" });
@@ -271,7 +271,7 @@ test("popup allows outside focus when shouldCoverButton prop is false", async ()
   render(
     <PopoverContainer shouldCoverButton={false} open onClose={() => {}}>
       Content
-    </PopoverContainer>
+    </PopoverContainer>,
   );
 
   const closeButton = screen.getByRole("button", { name: "close" });
@@ -295,9 +295,9 @@ test.each([
 
     expect(await screen.findByRole("dialog")).toHaveAttribute(
       "data-floating-placement",
-      placement
+      placement,
     );
-  }
+  },
 );
 
 test("popup visibility is controllable via open prop", async () => {
@@ -429,7 +429,7 @@ describe("closing the popup", () => {
       <>
         <PopoverContainer onClose={() => {}}>Content</PopoverContainer>
         <p>Outside popup</p>
-      </>
+      </>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -473,7 +473,7 @@ describe("closing the popup", () => {
     render(
       <PopoverContainer openButtonAriaLabel="open popup" onClose={() => {}}>
         Content
-      </PopoverContainer>
+      </PopoverContainer>,
     );
 
     const openButton = screen.getByRole("button", { name: "open popup" });
@@ -493,7 +493,7 @@ describe("closing the popup", () => {
           <Option text="Amber" value="1" />
           <Option text="Black" value="2" />
         </Select>
-      </PopoverContainer>
+      </PopoverContainer>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -538,5 +538,5 @@ testStyledSystemPaddingRTL(
     </PopoverContainer>
   ),
   () => screen.getByRole("dialog"),
-  { p: "16px 24px" }
+  { p: "16px 24px" },
 );
diff --git a/src/components/portal/portal.test.tsx b/src/components/portal/portal.test.tsx
index f33ce127b8..186fd2214c 100644
--- a/src/components/portal/portal.test.tsx
+++ b/src/components/portal/portal.test.tsx
@@ -21,7 +21,7 @@ test("renders and appends to an element with the 'id' attribute set to `root`",
   render(
     <PortalContext.Provider value={{ renderInRoot: true }}>
       <Portal />
-    </PortalContext.Provider>
+    </PortalContext.Provider>,
   );
 
   const rootElement = screen.getByTestId("root-element");
@@ -70,7 +70,7 @@ test("renders one portal exit parent which contains all passed children, when mu
     <>
       <Portal id="foo">Portal Content</Portal>
       <Portal id="foo">Portal Content</Portal>
-    </>
+    </>,
   );
 
   const portalExit = screen.getAllByTestId("carbon-portal-exit");
@@ -91,7 +91,7 @@ test("renders with the 'data-not-inert' attribute set to true on the portal exit
   render(
     <ThemeProvider theme={sageTheme}>
       <Portal inertOptOut />
-    </ThemeProvider>
+    </ThemeProvider>,
   );
 
   const portalExit = screen.getByTestId("carbon-portal-exit");
diff --git a/src/components/portal/portal.tsx b/src/components/portal/portal.tsx
index 626ff8bd06..b7e83f3d6a 100644
--- a/src/components/portal/portal.tsx
+++ b/src/components/portal/portal.tsx
@@ -127,7 +127,7 @@ export const Portal = ({
         <CarbonScopedTokensProvider>
           {portalContent}
         </CarbonScopedTokensProvider>,
-        getPortalContainer()
+        getPortalContainer(),
       )}
     </StyledPortalEntrance>
   );
diff --git a/src/components/portrait/portrait.component.tsx b/src/components/portrait/portrait.component.tsx
index c36173ace1..74cdac77cf 100644
--- a/src/components/portrait/portrait.component.tsx
+++ b/src/components/portrait/portrait.component.tsx
@@ -91,13 +91,13 @@ const Portrait = ({
   invariant(
     !(src && gravatar),
     "The `src` prop cannot be used in conjunction with the `gravatar` prop." +
-      " Please use one or the other."
+      " Please use one or the other.",
   );
 
   const logGravatarDeprecationWarning = () => {
     deprecatedGravatarWarnTriggered = true;
     Logger.deprecate(
-      "The `gravatar` prop has been deprecated and will soon be removed."
+      "The `gravatar` prop has been deprecated and will soon be removed.",
     );
   };
 
diff --git a/src/components/portrait/portrait.pw.tsx b/src/components/portrait/portrait.pw.tsx
index 78b471684c..02fcc87f0e 100644
--- a/src/components/portrait/portrait.pw.tsx
+++ b/src/components/portrait/portrait.pw.tsx
@@ -83,7 +83,7 @@ test.describe("Prop checks for Portrait component", () => {
 
     await expect(portraitPreview(page).locator("img")).toHaveAttribute(
       "src",
-      testImage
+      testImage,
     );
   });
 
@@ -107,18 +107,18 @@ test.describe("Prop checks for Portrait component", () => {
 
       await expect(portraitPreview(page)).toHaveCSS(
         "height",
-        `${heightAndWidth}px`
+        `${heightAndWidth}px`,
       );
       await expect(portraitPreview(page)).toHaveCSS(
         "width",
-        `${heightAndWidth}px`
+        `${heightAndWidth}px`,
       );
     });
   });
 
   test("should render with alt text", async ({ mount, page }) => {
     await mount(
-      <PortraitDefaultComponent src={testImage} alt="playwright-test" />
+      <PortraitDefaultComponent src={testImage} alt="playwright-test" />,
     );
 
     await expect(portraitImage(page)).toHaveAttribute("alt", "playwright-test");
@@ -159,11 +159,11 @@ test.describe("Prop checks for Portrait component", () => {
 
       await expect(portraitPreview(page)).toHaveCSS(
         "height",
-        `${heightAndWidth}px`
+        `${heightAndWidth}px`,
       );
       await expect(portraitPreview(page)).toHaveCSS(
         "width",
-        `${heightAndWidth}px`
+        `${heightAndWidth}px`,
       );
     });
   });
@@ -177,11 +177,11 @@ test.describe("Prop checks for Portrait component", () => {
 
       await expect(portraitPreview(page)).toHaveCSS(
         "height",
-        `${heightAndWidth}px`
+        `${heightAndWidth}px`,
       );
       await expect(portraitPreview(page)).toHaveCSS(
         "width",
-        `${heightAndWidth}px`
+        `${heightAndWidth}px`,
       );
     });
   });
@@ -195,11 +195,11 @@ test.describe("Prop checks for Portrait component", () => {
 
       await expect(portraitPreview(page)).toHaveCSS(
         "height",
-        `${heightAndWidth}px`
+        `${heightAndWidth}px`,
       );
       await expect(portraitPreview(page)).toHaveCSS(
         "width",
-        `${heightAndWidth}px`
+        `${heightAndWidth}px`,
       );
     });
   });
@@ -213,75 +213,72 @@ test.describe("Prop checks for Portrait component", () => {
         <PortraitDefaultComponent
           gravatar="chris.barber@sage.com"
           size={size}
-        />
+        />,
       );
 
       await expect(portraitPreview(page)).toHaveCSS(
         "height",
-        `${heightAndWidth}px`
+        `${heightAndWidth}px`,
       );
       await expect(portraitPreview(page)).toHaveCSS(
         "width",
-        `${heightAndWidth}px`
+        `${heightAndWidth}px`,
       );
     });
   });
 
-  ([
-    ["without", false, "rgb(242, 245, 246)", "--colorsUtilityReadOnly400"],
-    ["with", true, "rgba(0, 0, 0, 0.9)", "--colorsUtilityYin090"],
-  ] as [string, boolean, string, string][]).forEach(
-    ([renderState, boolVal, color, tokenVal]) => {
-      test(`should render ${renderState} dark background variant and correct background colour, when darkBackground prop is ${boolVal}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<PortraitDefaultComponent darkBackground={boolVal} />);
-
-        const backgroundColorTokens = await getDesignTokensByCssProperty(
-          page,
-          portraitPreview(page),
-          "background-color"
-        );
-
-        expect(backgroundColorTokens.toString()).toBe(tokenVal);
-        await expect(portraitPreview(page)).toHaveCSS(
-          "background-color",
-          color
-        );
-      });
-    }
-  );
-
-  ([
-    ["without", false, "rgba(0, 0, 0, 0.9)", "--colorsUtilityYin090"],
-    ["with", true, "rgb(204, 214, 219)", "--colorsUtilityReadOnly600"],
-  ] as [string, boolean, string, string][]).forEach(
-    ([renderState, boolVal, color, tokenVal]) => {
-      test(`should render ${renderState} dark background variant and correct colour, when darkBackground prop is ${boolVal}`, async ({
-        mount,
+  (
+    [
+      ["without", false, "rgb(242, 245, 246)", "--colorsUtilityReadOnly400"],
+      ["with", true, "rgba(0, 0, 0, 0.9)", "--colorsUtilityYin090"],
+    ] as [string, boolean, string, string][]
+  ).forEach(([renderState, boolVal, color, tokenVal]) => {
+    test(`should render ${renderState} dark background variant and correct background colour, when darkBackground prop is ${boolVal}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PortraitDefaultComponent darkBackground={boolVal} />);
+
+      const backgroundColorTokens = await getDesignTokensByCssProperty(
         page,
-      }) => {
-        await mount(<PortraitDefaultComponent darkBackground={boolVal} />);
+        portraitPreview(page),
+        "background-color",
+      );
 
-        const colorTokens = await getDesignTokensByCssProperty(
-          page,
-          portraitPreview(page),
-          "color"
-        );
+      expect(backgroundColorTokens.toString()).toBe(tokenVal);
+      await expect(portraitPreview(page)).toHaveCSS("background-color", color);
+    });
+  });
 
-        expect(colorTokens.toString()).toBe(tokenVal);
-        await expect(portraitPreview(page)).toHaveCSS("color", color);
-      });
-    }
-  );
+  (
+    [
+      ["without", false, "rgba(0, 0, 0, 0.9)", "--colorsUtilityYin090"],
+      ["with", true, "rgb(204, 214, 219)", "--colorsUtilityReadOnly600"],
+    ] as [string, boolean, string, string][]
+  ).forEach(([renderState, boolVal, color, tokenVal]) => {
+    test(`should render ${renderState} dark background variant and correct colour, when darkBackground prop is ${boolVal}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PortraitDefaultComponent darkBackground={boolVal} />);
+
+      const colorTokens = await getDesignTokensByCssProperty(
+        page,
+        portraitPreview(page),
+        "color",
+      );
+
+      expect(colorTokens.toString()).toBe(tokenVal);
+      await expect(portraitPreview(page)).toHaveCSS("color", color);
+    });
+  });
 
   test("should render with correct border", async ({ mount, page }) => {
     await mount(<PortraitDefaultComponent />);
 
     await expect(portraitPreview(page)).toHaveCSS(
       "border",
-      "1px solid rgb(204, 214, 219)"
+      "1px solid rgb(204, 214, 219)",
     );
   });
 
@@ -307,7 +304,7 @@ test.describe("Prop checks for Portrait component", () => {
       page,
     }) => {
       await mount(
-        <PortraitDefaultComponent tooltipMessage="foo" tooltipId={tooltipId} />
+        <PortraitDefaultComponent tooltipMessage="foo" tooltipId={tooltipId} />,
       );
 
       await portraitPreview(page).hover();
@@ -328,7 +325,7 @@ test.describe("Prop checks for Portrait component", () => {
       page,
     }) => {
       await mount(
-        <PortraitComponent tooltipMessage="foo" tooltipIsVisible={boolVal} />
+        <PortraitComponent tooltipMessage="foo" tooltipIsVisible={boolVal} />,
       );
 
       const tooltip = getDataElementByValue(page, "tooltip");
@@ -350,7 +347,7 @@ test.describe("Prop checks for Portrait component", () => {
       await mount(
         <Box p={200}>
           <PortraitComponent tooltipPosition={tooltipPosition} />{" "}
-        </Box>
+        </Box>,
       );
 
       const tooltip = getDataElementByValue(page, "tooltip");
@@ -499,10 +496,12 @@ test.describe("Accessibility tests for Portrait component", () => {
     });
   });
 
-  ([
-    ["without", false, "rgb(242, 245, 246)"],
-    ["with", true, "rgb(153, 173, 183)"],
-  ] as [string, boolean, string][]).forEach(([renderState, boolVal]) => {
+  (
+    [
+      ["without", false, "rgb(242, 245, 246)"],
+      ["with", true, "rgb(153, 173, 183)"],
+    ] as [string, boolean, string][]
+  ).forEach(([renderState, boolVal]) => {
     test(`should pass accessibility checks ${renderState} dark background variant, when darkBackground prop is ${boolVal}`, async ({
       mount,
       page,
@@ -520,7 +519,7 @@ test.describe("Accessibility tests for Portrait component", () => {
       page,
     }) => {
       await mount(
-        <PortraitComponent tooltipIsVisible tooltipMessage={tooltipMessage} />
+        <PortraitComponent tooltipIsVisible tooltipMessage={tooltipMessage} />,
       );
 
       await waitForAnimationEnd(getDataElementByValue(page, "tooltip"));
@@ -546,7 +545,7 @@ test.describe("Accessibility tests for Portrait component", () => {
     page,
   }) => {
     await mount(
-      <PortraitComponent tooltipMessage="foo" tooltipIsVisible={false} />
+      <PortraitComponent tooltipMessage="foo" tooltipIsVisible={false} />,
     );
 
     await checkAccessibility(page);
diff --git a/src/components/portrait/portrait.test.tsx b/src/components/portrait/portrait.test.tsx
index c0901176cc..58e6b33601 100644
--- a/src/components/portrait/portrait.test.tsx
+++ b/src/components/portrait/portrait.test.tsx
@@ -9,7 +9,7 @@ import CarbonProvider from "../carbon-provider";
 
 testStyledSystemMarginRTL(
   (props) => <Portrait data-role="portrait-wrapper" {...props} />,
-  () => screen.getByTestId("portrait-wrapper")
+  () => screen.getByTestId("portrait-wrapper"),
 );
 
 test("renders with a default individual icon", () => {
@@ -55,7 +55,7 @@ test("logs a deprecation warning once when the `gravatar` prop is passed, and a
     <>
       <Portrait gravatar="chris.barber@sage.com" />
       <Portrait gravatar="chris.barber@sage.com" />
-    </>
+    </>,
   );
 
   const portraits = screen.getAllByRole("img");
@@ -65,7 +65,7 @@ test("logs a deprecation warning once when the `gravatar` prop is passed, and a
   });
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "The `gravatar` prop has been deprecated and will soon be removed."
+    "The `gravatar` prop has been deprecated and will soon be removed.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
   loggerSpy.mockRestore();
@@ -85,7 +85,7 @@ test("if a valid gravatar email is not found and an onError event is triggered,
 
   await waitFor(() => expect(screen.getByTestId("icon")).toBeVisible());
   await waitFor(() =>
-    expect(screen.getByTestId("icon")).toHaveAttribute("type", "individual")
+    expect(screen.getByTestId("icon")).toHaveAttribute("type", "individual"),
   );
 });
 
@@ -110,7 +110,7 @@ test("if a valid src is not found and an onError event is triggered, the default
 
   await waitFor(() => expect(screen.getByTestId("icon")).toBeVisible());
   await waitFor(() =>
-    expect(screen.getByTestId("icon")).toHaveAttribute("type", "individual")
+    expect(screen.getByTestId("icon")).toHaveAttribute("type", "individual"),
   );
 });
 
@@ -121,7 +121,7 @@ test("when both the `gravatar` and `src` props are passed simultaneously, an inv
 
   expect(() => render(<Portrait src={src} gravatar={email} />)).toThrow(
     "The `src` prop cannot be used in conjunction with the `gravatar` prop." +
-      " Please use one or the other."
+      " Please use one or the other.",
   );
 
   consoleSpy.mockRestore();
@@ -155,7 +155,7 @@ test("if a consumer opts out to rounded corners, the `Portrait` shape is a squar
   render(
     <CarbonProvider roundedCornersOptOut>
       <Portrait data-role="portrait" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const portrait = screen.getByTestId("portrait");
@@ -188,7 +188,7 @@ test("allows a custom tooltip id to be set via the `tooltipId` prop", () => {
       tooltipMessage="foo"
       tooltipIsVisible
       tooltipId="foo"
-    />
+    />,
   );
 
   const tooltip = screen.getByText("foo");
diff --git a/src/components/preview/preview.component.tsx b/src/components/preview/preview.component.tsx
index 11b201b611..c106056a75 100644
--- a/src/components/preview/preview.component.tsx
+++ b/src/components/preview/preview.component.tsx
@@ -41,7 +41,7 @@ export const Preview = ({
   };
 
   const reduceMotion = !useMediaQuery(
-    "screen and (prefers-reduced-motion: no-preference)"
+    "screen and (prefers-reduced-motion: no-preference)",
   );
 
   if (hasPlaceholder) {
@@ -59,7 +59,7 @@ export const Preview = ({
           shape={shape}
           disableAnimation={disableAnimation || reduceMotion}
           {...props}
-        />
+        />,
       );
     }
 
diff --git a/src/components/preview/preview.pw.tsx b/src/components/preview/preview.pw.tsx
index 67939cdf14..8dcff66d11 100644
--- a/src/components/preview/preview.pw.tsx
+++ b/src/components/preview/preview.pw.tsx
@@ -29,7 +29,7 @@ test.describe("check Preview component properties", () => {
       await assertCssValueIsApproximately(
         previewComponent(page),
         "height",
-        height
+        height,
       );
     });
   });
@@ -44,7 +44,7 @@ test.describe("check Preview component properties", () => {
       await assertCssValueIsApproximately(
         previewComponent(page),
         "width",
-        width
+        width,
       );
     });
   });
diff --git a/src/components/preview/preview.test.tsx b/src/components/preview/preview.test.tsx
index c9ee9ec35e..7327f51cc8 100644
--- a/src/components/preview/preview.test.tsx
+++ b/src/components/preview/preview.test.tsx
@@ -51,7 +51,7 @@ test("renders with the correct height, width and border-radius when `shape` is s
   expect(placeholder).toHaveStyle({ width: "100%" });
   expect(placeholder).toHaveStyleRule(
     "border-radius",
-    "var(--borderRadius100)"
+    "var(--borderRadius100)",
   );
 });
 
@@ -65,7 +65,7 @@ test("renders with the correct height, width and border-radius when `shape` is s
   expect(placeholder).toHaveStyleRule("width", "var(--sizing1500)");
   expect(placeholder).toHaveStyleRule(
     "border-radius",
-    "var(--borderRadius100)"
+    "var(--borderRadius100)",
   );
 });
 
@@ -79,7 +79,7 @@ test("renders with the correct height, width and border-radius when `shape` is s
   expect(placeholder).toHaveStyleRule("width", "var(--sizing1500)");
   expect(placeholder).toHaveStyleRule(
     "border-radius",
-    "var(--borderRadius400)"
+    "var(--borderRadius400)",
   );
 });
 
@@ -93,7 +93,7 @@ test("renders with the correct height, width and border-radius when `shape` is s
   expect(placeholder).toHaveStyleRule("width", "var(--sizing700)");
   expect(placeholder).toHaveStyleRule(
     "border-radius",
-    "var(--borderRadiusCircle)"
+    "var(--borderRadiusCircle)",
   );
 });
 
@@ -110,5 +110,5 @@ test("renders with no animation when `disableAnimation` is true", () => {
 
 testStyledSystemMarginRTL(
   (props) => <Preview {...props} />,
-  () => screen.getByTestId("preview-wrapper")
+  () => screen.getByTestId("preview-wrapper"),
 );
diff --git a/src/components/profile/profile.component.tsx b/src/components/profile/profile.component.tsx
index 0a2fe52a76..b0a158752c 100644
--- a/src/components/profile/profile.component.tsx
+++ b/src/components/profile/profile.component.tsx
@@ -85,7 +85,7 @@ export const Profile = ({
     useOfNoNameWarnTriggered = true;
     console.warn(
       "[WARNING] The `email` or `text` prop should not be used without the `name` prop in `Profile`." +
-        " Please use the `name` prop as well as `email` or `text`."
+        " Please use the `name` prop as well as `email` or `text`.",
     );
   }
 
diff --git a/src/components/profile/profile.pw.tsx b/src/components/profile/profile.pw.tsx
index fe82eecd3f..7bae2c7fa1 100644
--- a/src/components/profile/profile.pw.tsx
+++ b/src/components/profile/profile.pw.tsx
@@ -83,7 +83,7 @@ test.describe("Prop checks for Profile component", () => {
       page,
     }) => {
       await mount(
-        <EmptyProfileComponent name="John Doe" text={text} src={testImage} />
+        <EmptyProfileComponent name="John Doe" text={text} src={testImage} />,
       );
 
       await expect(textPreview(page)).toHaveText(text);
@@ -101,7 +101,7 @@ test.describe("Prop checks for Profile component", () => {
 
       await expect(detailsPreview(page)).toHaveCSS(
         "margin-left",
-        configMarginLeftValues
+        configMarginLeftValues,
       );
     });
   });
@@ -117,7 +117,7 @@ test.describe("Prop checks for Profile component", () => {
 
       await expect(detailsPreview(page)).toHaveCSS(
         "line-height",
-        configLineHeightValues
+        configLineHeightValues,
       );
     });
   });
@@ -132,7 +132,7 @@ test.describe("Prop checks for Profile component", () => {
       const fontSizeTokens = await getDesignTokensByCssProperty(
         page,
         namePreview(page),
-        "font-size"
+        "font-size",
       );
       const configFontSizeTokens = profileConfigSizes[size].nameSize;
 
@@ -150,13 +150,13 @@ test.describe("Prop checks for Profile component", () => {
           name="John Doe"
           email="john@doe.com"
           size={size}
-        />
+        />,
       );
 
       const fontSizeTokens = await getDesignTokensByCssProperty(
         page,
         emailPreview(page),
-        "font-size"
+        "font-size",
       );
       const configSizeTokens = profileConfigSizes[size].emailSize;
 
@@ -174,13 +174,13 @@ test.describe("Prop checks for Profile component", () => {
           name="John Doe"
           text="Some text about John here"
           size={size}
-        />
+        />,
       );
 
       const fontSizeTokens = await getDesignTokensByCssProperty(
         page,
         textPreview(page),
-        "font-size"
+        "font-size",
       );
       const configSizeTokens = profileConfigSizes[size].emailSize;
 
@@ -188,51 +188,51 @@ test.describe("Prop checks for Profile component", () => {
     });
   });
 
-  ([
-    ["without", false, "rgba(0, 0, 0, 0)", ""],
-    ["with", true, "rgba(0, 0, 0, 0.9)", "--colorsUtilityYin090"],
-  ] as [string, boolean, string, string][]).forEach(
-    ([renderState, boolVal, color, tokenVal]) => {
-      test(`should render ${renderState} dark background variant and correct background colour, when darkBackground prop is ${boolVal}`, async ({
-        mount,
+  (
+    [
+      ["without", false, "rgba(0, 0, 0, 0)", ""],
+      ["with", true, "rgba(0, 0, 0, 0.9)", "--colorsUtilityYin090"],
+    ] as [string, boolean, string, string][]
+  ).forEach(([renderState, boolVal, color, tokenVal]) => {
+    test(`should render ${renderState} dark background variant and correct background colour, when darkBackground prop is ${boolVal}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ProfileComponent darkBackground={boolVal} />);
+
+      const backgroundColorTokens = await getDesignTokensByCssProperty(
         page,
-      }) => {
-        await mount(<ProfileComponent darkBackground={boolVal} />);
-
-        const backgroundColorTokens = await getDesignTokensByCssProperty(
-          page,
-          profilePreview(page),
-          "background-color"
-        );
-
-        expect(backgroundColorTokens.toString()).toBe(tokenVal);
-        await expect(profilePreview(page)).toHaveCSS("background-color", color);
-      });
-    }
-  );
-
-  ([
-    ["without", false, "rgba(0, 0, 0, 0.9)", "--colorsUtilityYin090"],
-    ["with", true, "rgb(204, 214, 219)", "--colorsUtilityReadOnly600"],
-  ] as [string, boolean, string, string][]).forEach(
-    ([renderState, boolVal, color, tokenVal]) => {
-      test(`should render ${renderState} dark background variant and correct colour, when darkBackground prop is ${boolVal}`, async ({
-        mount,
+        profilePreview(page),
+        "background-color",
+      );
+
+      expect(backgroundColorTokens.toString()).toBe(tokenVal);
+      await expect(profilePreview(page)).toHaveCSS("background-color", color);
+    });
+  });
+
+  (
+    [
+      ["without", false, "rgba(0, 0, 0, 0.9)", "--colorsUtilityYin090"],
+      ["with", true, "rgb(204, 214, 219)", "--colorsUtilityReadOnly600"],
+    ] as [string, boolean, string, string][]
+  ).forEach(([renderState, boolVal, color, tokenVal]) => {
+    test(`should render ${renderState} dark background variant and correct colour, when darkBackground prop is ${boolVal}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<ProfileComponent darkBackground={boolVal} />);
+
+      const colorTokens = await getDesignTokensByCssProperty(
         page,
-      }) => {
-        await mount(<ProfileComponent darkBackground={boolVal} />);
-
-        const colorTokens = await getDesignTokensByCssProperty(
-          page,
-          profilePreview(page),
-          "color"
-        );
-
-        expect(colorTokens.toString()).toBe(tokenVal);
-        await expect(profilePreview(page)).toHaveCSS("color", color);
-      });
-    }
-  );
+        profilePreview(page),
+        "color",
+      );
+
+      expect(colorTokens.toString()).toBe(tokenVal);
+      await expect(profilePreview(page)).toHaveCSS("color", color);
+    });
+  });
 
   imageURLs.forEach((url) => {
     test(`should render with src prop passed as ${url}`, async ({
diff --git a/src/components/profile/profile.test.tsx b/src/components/profile/profile.test.tsx
index 25ae50e010..13998c339a 100644
--- a/src/components/profile/profile.test.tsx
+++ b/src/components/profile/profile.test.tsx
@@ -7,7 +7,7 @@ import Profile from "./profile.component";
 
 testStyledSystemMarginRTL(
   (props) => <Profile data-role="profile" name="John Doe" {...props} />,
-  () => screen.getByTestId("profile")
+  () => screen.getByTestId("profile"),
 );
 
 test("renders with set data tags", () => {
@@ -16,7 +16,7 @@ test("renders with set data tags", () => {
       data-role="profile"
       data-component="profile"
       data-element="profile"
-    />
+    />,
   );
 
   const profile = screen.getByTestId("profile");
@@ -54,7 +54,7 @@ test.each([
 
     const avatar = screen.getByText(initials);
     expect(avatar).toBeVisible();
-  }
+  },
 );
 
 test("renders avatar with a maximum of three initials when `name` prop has more than three words", () => {
@@ -85,7 +85,7 @@ test("sets alt attribute on avatar to `name` prop value if `alt` prop is not pas
     <Profile
       name="John Doe"
       src="https://upload.wikimedia.org/wikipedia/en/6/6c/Heatposter.jpg"
-    />
+    />,
   );
 
   const avatar = screen.getByAltText("John Doe");
@@ -131,12 +131,12 @@ test("warns if the `email` or `text` props are passed without the `name` prop",
     <>
       <Profile email="chris.barber@sage.com" />
       <Profile text="Software Engineer" />
-    </>
+    </>,
   );
 
   expect(consoleSpy).toHaveBeenCalledWith(
     "[WARNING] The `email` or `text` prop should not be used without the `name` prop in `Profile`." +
-      " Please use the `name` prop as well as `email` or `text`."
+      " Please use the `name` prop as well as `email` or `text`.",
   );
   expect(consoleSpy).toHaveBeenCalledTimes(1);
   consoleSpy.mockRestore();
@@ -176,7 +176,7 @@ test("renders with dark background styling when `darkBackground` prop is passed"
       name="John Doe"
       email={emailAddress}
       text="Software Engineer"
-    />
+    />,
   );
 
   const profile = screen.getByTestId("profile");
@@ -185,7 +185,7 @@ test("renders with dark background styling when `darkBackground` prop is passed"
   expect(profile).toHaveStyleRule("color", "var(--colorsUtilityReadOnly600)");
   expect(profile).toHaveStyleRule(
     "background-color",
-    "var(--colorsUtilityYin090)"
+    "var(--colorsUtilityYin090)",
   );
   expect(emailLink).toHaveStyleRule("color", "var(--colorsActionMajor350)", {
     modifier: "a",
diff --git a/src/components/progress-tracker/progress-tracker.pw.tsx b/src/components/progress-tracker/progress-tracker.pw.tsx
index 6f0d0a0083..41e507a4ba 100644
--- a/src/components/progress-tracker/progress-tracker.pw.tsx
+++ b/src/components/progress-tracker/progress-tracker.pw.tsx
@@ -21,11 +21,13 @@ import ProgressTrackerComponent from "./components.test-pw";
 import { PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
 
 test.describe("Check props for ProgressTracker component", () => {
-  ([
-    [PROGRESS_TRACKER_SIZES[0], 4],
-    [PROGRESS_TRACKER_SIZES[1], 8],
-    [PROGRESS_TRACKER_SIZES[2], 16],
-  ] as [ProgressTrackerProps["size"], number][]).forEach(([size, value]) => {
+  (
+    [
+      [PROGRESS_TRACKER_SIZES[0], 4],
+      [PROGRESS_TRACKER_SIZES[1], 8],
+      [PROGRESS_TRACKER_SIZES[2], 16],
+    ] as [ProgressTrackerProps["size"], number][]
+  ).forEach(([size, value]) => {
     test(`render component with ${size} size`, async ({ mount, page }) => {
       await mount(<ProgressTrackerComponent size={size} />);
 
@@ -33,7 +35,7 @@ test.describe("Check props for ProgressTracker component", () => {
       await assertCssValueIsApproximately(
         progressTrackerLineElement,
         "height",
-        value
+        value,
       );
     });
   });
@@ -49,16 +51,18 @@ test.describe("Check props for ProgressTracker component", () => {
       await assertCssValueIsApproximately(
         progressTrackerComponentElement,
         "width",
-        length
+        length,
       );
     });
   });
 
-  ([
-    [12, 30, "rgb(51, 91, 112)"],
-    [47, 120, "rgb(51, 91, 112)"],
-    [100, 256, "rgb(0, 138, 33)"],
-  ] as const).forEach(([progress, width, color]) => {
+  (
+    [
+      [12, 30, "rgb(51, 91, 112)"],
+      [47, 120, "rgb(51, 91, 112)"],
+      [100, 256, "rgb(0, 138, 33)"],
+    ] as const
+  ).forEach(([progress, width, color]) => {
     test(`render component with ${progress}% of progress`, async ({
       mount,
       page,
@@ -69,11 +73,11 @@ test.describe("Check props for ProgressTracker component", () => {
       await assertCssValueIsApproximately(
         progressTrackerLineElement,
         "width",
-        width
+        width,
       );
       await expect(progressTrackerLineElement).toHaveCSS(
         "background-color",
-        color
+        color,
       );
     });
   });
@@ -84,18 +88,17 @@ test.describe("Check props for ProgressTracker component", () => {
     const progressTrackerLineElement = progressTrackerLine(page);
     await expect(progressTrackerLineElement).toHaveCSS(
       "background-color",
-      "rgb(203, 55, 74)"
+      "rgb(203, 55, 74)",
     );
 
-    const progressTrackerLineElementParent = progressTrackerLine(page).locator(
-      ".."
-    );
+    const progressTrackerLineElementParent =
+      progressTrackerLine(page).locator("..");
     await checkCSSOutline(
       progressTrackerLineElementParent,
       "1px",
       "border",
       "solid",
-      "rgb(203, 55, 74)"
+      "rgb(203, 55, 74)",
     );
   });
 
@@ -108,15 +111,15 @@ test.describe("Check props for ProgressTracker component", () => {
         await mount(
           <ProgressTrackerComponent
             currentProgressLabel={currentProgressLabel}
-          />
+          />,
         );
 
         const progressTrackerMinValElement = progressTrackerMinVal(page);
         await expect(progressTrackerMinValElement).toHaveText(
-          currentProgressLabel
+          currentProgressLabel,
         );
       });
-    }
+    },
   );
 
   ([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
@@ -129,13 +132,13 @@ test.describe("Check props for ProgressTracker component", () => {
           <ProgressTrackerComponent
             currentProgressLabel="foo"
             maxProgressLabel={maxProgressLabel}
-          />
+          />,
         );
 
         const progressTrackerMaxValElement = progressTrackerMaxVal(page);
         await expect(progressTrackerMaxValElement).toHaveText(maxProgressLabel);
       });
-    }
+    },
   );
 
   ([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
@@ -147,17 +150,16 @@ test.describe("Check props for ProgressTracker component", () => {
         await mount(
           <ProgressTrackerComponent
             customValuePreposition={customValuePreposition}
-          />
+          />,
         );
 
-        const progressTrackerCustomValuePrepositionElement = progressTrackerCustomValuePreposition(
-          page
-        );
+        const progressTrackerCustomValuePrepositionElement =
+          progressTrackerCustomValuePreposition(page);
         await expect(progressTrackerCustomValuePrepositionElement).toHaveText(
-          customValuePreposition
+          customValuePreposition,
         );
       });
-    }
+    },
   );
 
   const getYValue = (locator: Locator) =>
@@ -178,7 +180,7 @@ test.describe("Check props for ProgressTracker component", () => {
     await expect(currentValueLabel).toBeVisible(); // assert label is visible before checking bounding box
     await expect(trackerLine).toBeVisible(); // assert tracker line is visible before checking bounding box
     expect(await getYValue(currentValueLabel)).toBeLessThan(
-      await getYValue(trackerLine)
+      await getYValue(trackerLine),
     );
   });
 
@@ -194,7 +196,7 @@ test.describe("Check props for ProgressTracker component", () => {
     await expect(currentValueLabel).toBeVisible(); // assert label is visible before checking bounding box
     await expect(trackerLine).toBeVisible(); // assert tracker line is visible before checking bounding box
     expect(await getYValue(currentValueLabel)).toBeGreaterThan(
-      await getYValue(trackerLine)
+      await getYValue(trackerLine),
     );
   });
 
@@ -211,7 +213,7 @@ test.describe("Check props for ProgressTracker component", () => {
     await expect(trackerLine).toBeVisible(); // assert tracker line is visible before checking bounding box
 
     expect(await getXValue(currentValueLabel)).toBeLessThan(
-      await getXValue(trackerLine)
+      await getXValue(trackerLine),
     );
   });
 
@@ -223,23 +225,21 @@ test.describe("Check props for ProgressTracker component", () => {
       }) => {
         await mount(<ProgressTrackerComponent description={description} />);
 
-        const progressTrackerDescriptionElement = progressTrackerDescription(
-          page
-        );
+        const progressTrackerDescriptionElement =
+          progressTrackerDescription(page);
         await expect(progressTrackerDescriptionElement).toHaveText(description);
       });
-    }
+    },
   );
 
   test("has the expected border radius styling", async ({ mount, page }) => {
     await mount(<ProgressTrackerComponent progress={35} />);
 
-    const progressTrackerLineElementParent = progressTrackerLine(page).locator(
-      ".."
-    );
+    const progressTrackerLineElementParent =
+      progressTrackerLine(page).locator("..");
     await expect(progressTrackerLineElementParent).toHaveCSS(
       "border-radius",
-      "32px"
+      "32px",
     );
     const progressTrackerLineElement = progressTrackerLine(page);
     await expect(progressTrackerLineElement).toHaveCSS("border-radius", "32px");
@@ -247,11 +247,13 @@ test.describe("Check props for ProgressTracker component", () => {
 });
 
 test.describe("Accessibility tests", () => {
-  ([
-    PROGRESS_TRACKER_SIZES[0],
-    PROGRESS_TRACKER_SIZES[1],
-    PROGRESS_TRACKER_SIZES[2],
-  ] as ProgressTrackerProps["size"][]).forEach((size) => {
+  (
+    [
+      PROGRESS_TRACKER_SIZES[0],
+      PROGRESS_TRACKER_SIZES[1],
+      PROGRESS_TRACKER_SIZES[2],
+    ] as ProgressTrackerProps["size"][]
+  ).forEach((size) => {
     test(`should check the accessibility when component is rendered with ${size} size`, async ({
       mount,
       page,
@@ -301,12 +303,12 @@ test.describe("Accessibility tests", () => {
         await mount(
           <ProgressTrackerComponent
             currentProgressLabel={currentProgressLabel}
-          />
+          />,
         );
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   ([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
@@ -316,12 +318,12 @@ test.describe("Accessibility tests", () => {
         page,
       }) => {
         await mount(
-          <ProgressTrackerComponent maxProgressLabel={maxProgressLabel} />
+          <ProgressTrackerComponent maxProgressLabel={maxProgressLabel} />,
         );
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   ([CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const).forEach(
@@ -333,19 +335,17 @@ test.describe("Accessibility tests", () => {
         await mount(
           <ProgressTrackerComponent
             customValuePreposition={customValuePreposition}
-          />
+          />,
         );
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
-  ([
-    "top",
-    "bottom",
-    "left",
-  ] as ProgressTrackerProps["labelsPosition"][]).forEach((labelsPosition) => {
+  (
+    ["top", "bottom", "left"] as ProgressTrackerProps["labelsPosition"][]
+  ).forEach((labelsPosition) => {
     test(`should check the accessibility when component is rendered with labelsPosition is set to ${labelsPosition}`, async ({
       mount,
       page,
@@ -366,6 +366,6 @@ test.describe("Accessibility tests", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 });
diff --git a/src/components/progress-tracker/progress-tracker.style.ts b/src/components/progress-tracker/progress-tracker.style.ts
index 73d246a5c0..cd2a897564 100644
--- a/src/components/progress-tracker/progress-tracker.style.ts
+++ b/src/components/progress-tracker/progress-tracker.style.ts
@@ -39,10 +39,9 @@ const StyledProgressTracker = styled.div<
   text-align: center;
   white-space: nowrap;
 
-  ${({ length }) =>
-    css`
-      width: ${length};
-    `};
+  ${({ length }) => css`
+    width: ${length};
+  `};
   ${({ labelsPosition }) =>
     labelsPosition === "left" &&
     css`
diff --git a/src/components/progress-tracker/progress-tracker.test.tsx b/src/components/progress-tracker/progress-tracker.test.tsx
index b179a7627b..54a9ef825f 100644
--- a/src/components/progress-tracker/progress-tracker.test.tsx
+++ b/src/components/progress-tracker/progress-tracker.test.tsx
@@ -55,7 +55,7 @@ test("renders with `labelsPosition` set to `top`", () => {
 
   expect(screen.getByTestId("values-label")).toHaveStyleRule(
     "margin-bottom",
-    "var(--spacing100)"
+    "var(--spacing100)",
   );
 });
 
@@ -65,14 +65,14 @@ test("renders with `labelsPosition` set to `bottom`", () => {
 
   expect(screen.getByTestId("values-label")).toHaveStyleRule(
     "margin-top",
-    "var(--spacing100)"
+    "var(--spacing100)",
   );
 });
 
 // coverage
 test("renders with `labelsPosition` set to `left`", () => {
   render(
-    <ProgressTracker data-role="progress-tracker" labelsPosition="left" />
+    <ProgressTracker data-role="progress-tracker" labelsPosition="left" />,
   );
 
   expect(screen.getByTestId("progress-tracker")).toHaveStyle({
@@ -81,7 +81,7 @@ test("renders with `labelsPosition` set to `left`", () => {
   });
   expect(screen.getByTestId("values-label")).toHaveStyleRule(
     "margin-right",
-    "var(--spacing100)"
+    "var(--spacing100)",
   );
 });
 
@@ -109,7 +109,7 @@ test("renders inner bar with correct height when `size` is 'small'", () => {
 
   expect(screen.getByTestId("inner-bar")).toHaveStyleRule(
     "height",
-    "var(--sizing050)"
+    "var(--sizing050)",
   );
 });
 
@@ -119,7 +119,7 @@ test("renders inner bar with correct height when `size` is 'medium'", () => {
 
   expect(screen.getByTestId("inner-bar")).toHaveStyleRule(
     "height",
-    "var(--sizing100)"
+    "var(--sizing100)",
   );
 });
 
@@ -129,7 +129,7 @@ test("renders inner bar with correct height when `size` is 'large'", () => {
 
   expect(screen.getByTestId("inner-bar")).toHaveStyleRule(
     "height",
-    "var(--sizing200)"
+    "var(--sizing200)",
   );
 });
 
@@ -139,11 +139,11 @@ test("renders with correct colour when `error` is set", () => {
 
   expect(screen.getByTestId("progress-bar")).toHaveStyleRule(
     "border",
-    "1px solid var(--colorsSemanticNegative500)"
+    "1px solid var(--colorsSemanticNegative500)",
   );
   expect(screen.getByTestId("inner-bar")).toHaveStyleRule(
     "background-color",
-    "var(--colorsSemanticNegative500)"
+    "var(--colorsSemanticNegative500)",
   );
 });
 
@@ -153,11 +153,11 @@ test("renders with correct colour when progress is '100%'", () => {
 
   expect(screen.getByTestId("progress-bar")).toHaveStyleRule(
     "border",
-    "1px solid var(--colorsSemanticPositive500)"
+    "1px solid var(--colorsSemanticPositive500)",
   );
   expect(screen.getByTestId("inner-bar")).toHaveStyleRule(
     "background-color",
-    "var(--colorsSemanticPositive500)"
+    "var(--colorsSemanticPositive500)",
   );
 });
 
@@ -166,7 +166,7 @@ test("renders with correct border-radius when `roundedCornersOptOut` is true", (
   render(
     <CarbonProvider roundedCornersOptOut>
       <ProgressTracker progress={100} />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByTestId("progress-bar")).toHaveStyle({
@@ -177,5 +177,5 @@ test("renders with correct border-radius when `roundedCornersOptOut` is true", (
 
 testStyledSystemMarginRTL(
   (props) => <ProgressTracker data-role="progress" {...props} />,
-  () => screen.getByTestId("progress")
+  () => screen.getByTestId("progress"),
 );
diff --git a/src/components/radio-button/radio-button-group/radio-button-group.component.tsx b/src/components/radio-button/radio-button-group/radio-button-group.component.tsx
index 8a9cf520a3..9eab45fd13 100644
--- a/src/components/radio-button/radio-button-group/radio-button-group.component.tsx
+++ b/src/components/radio-button/radio-button-group/radio-button-group.component.tsx
@@ -93,18 +93,18 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate(
-      "Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+      "Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
     );
   }
 
   const marginProps = filterStyledSystemMarginProps(props);
 
   const isAboveLegendBreakpoint = useIsAboveBreakpoint(
-    adaptiveLegendBreakpoint
+    adaptiveLegendBreakpoint,
   );
 
   const isAboveSpacingBreakpoint = useIsAboveBreakpoint(
-    adaptiveSpacingBreakpoint
+    adaptiveSpacingBreakpoint,
   );
 
   let inlineLegend = legendInlineWithNewValidation;
diff --git a/src/components/radio-button/radio-button-group/radio-button-group.test.tsx b/src/components/radio-button/radio-button-group/radio-button-group.test.tsx
index 83c47d7c18..df62dbc1dd 100644
--- a/src/components/radio-button/radio-button-group/radio-button-group.test.tsx
+++ b/src/components/radio-button/radio-button-group/radio-button-group.test.tsx
@@ -13,11 +13,11 @@ test("logs a deprecation warning for uncontrolled behaviour", () => {
   render(
     <RadioButtonGroup name="group">
       <RadioButton value="radio1" label="Radio Button 1" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
 
@@ -28,7 +28,7 @@ test("renders with provided `RadioButton` children", () => {
   render(
     <RadioButtonGroup name="group" onChange={() => {}}>
       <RadioButton value="radio1" label="Radio Button 1" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   const radioButton = screen.getByRole("radio", { name: "Radio Button 1" });
@@ -46,7 +46,7 @@ test("renders with RadioButton and non-`RadioButton` children when passed as an
         "foo",
         <RadioButton key="radio2" value="radio2" label="Radio Button 2" />,
       ]}
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   expect(screen.getAllByRole("radio")).toHaveLength(2);
@@ -61,7 +61,7 @@ test("renders fieldset with provided `legend`", () => {
       onChange={() => {}}
     >
       <RadioButton value="radio1" label="Radio Button 1" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   const fieldset = screen.getByRole("group", { name: "Radio Group Legend" });
@@ -74,7 +74,7 @@ test("checks the correct `RadioButton` child when a value is passed", () => {
     <RadioButtonGroup name="group" value="radio2" onChange={() => {}}>
       <RadioButton value="radio1" label="Radio Button 1" />
       <RadioButton value="radio2" label="Radio Button 2" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   const radio1 = screen.getByRole("radio", { name: "Radio Button 1" });
@@ -90,7 +90,7 @@ test("calls `onChange` when a `RadioButton` child is checked", async () => {
   render(
     <RadioButtonGroup name="group" onChange={onChange}>
       <RadioButton value="radio1" label="Radio Button 1" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   const radioButton = screen.getByRole("radio");
@@ -106,7 +106,7 @@ test("calls `onBlur` when a `RadioButton` child is blurred", async () => {
   render(
     <RadioButtonGroup name="group" onChange={() => {}} onBlur={onBlur}>
       <RadioButton value="radio1" label="Radio Button 1" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   await user.tab();
@@ -119,7 +119,7 @@ test("renders required `RadioButton` children when `required` prop is true", ()
   render(
     <RadioButtonGroup name="group" required onChange={() => {}}>
       <RadioButton value="radio1" label="Radio Button 1" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   const radioButton = screen.getByRole("radio", { name: "Radio Button 1" });
@@ -137,7 +137,7 @@ test("renders with inline legend when screen is larger than `adaptiveLegendBreak
       onChange={() => {}}
     >
       <RadioButton value="radio1" label="Radio Button 1" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   const legend = screen.getByTestId("legend");
@@ -155,7 +155,7 @@ test("renders with legend on top when screen is smaller than `adaptiveLegendBrea
       onChange={() => {}}
     >
       <RadioButton value="radio1" label="Radio Button 1" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   const legend = screen.getByTestId("legend");
@@ -173,7 +173,7 @@ test("renders with provided margin-left when screen is larger than `adaptiveSpac
       onChange={() => {}}
     >
       <RadioButton value="radio1" label="Radio Button 1" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   const fieldset = screen.getByRole("group");
@@ -191,7 +191,7 @@ test("does not render with provided margin-left when screen is smaller than `ada
       onChange={() => {}}
     >
       <RadioButton value="radio1" label="Radio Button 1" />
-    </RadioButtonGroup>
+    </RadioButtonGroup>,
   );
 
   const fieldset = screen.getByRole("group");
@@ -211,7 +211,7 @@ describe("when `validationRedesignOptIn` flag is true", () => {
         >
           <RadioButton value="radio1" label="Radio Button 1" />
         </RadioButtonGroup>
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     expect(screen.getByText("Error message")).toBeVisible();
@@ -227,7 +227,7 @@ describe("when `validationRedesignOptIn` flag is true", () => {
         >
           <RadioButton value="radio1" label="Radio Button 1" />
         </RadioButtonGroup>
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     expect(screen.getByText("Warning message")).toBeVisible();
@@ -243,7 +243,7 @@ describe("when `validationRedesignOptIn` flag is true", () => {
         >
           <RadioButton value="radio1" label="Radio Button 1" />
         </RadioButtonGroup>
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const hintText = screen.getByText("Hint message");
@@ -268,7 +268,7 @@ describe("when `validationRedesignOptIn` flag is true", () => {
         >
           <RadioButton value="radio1" label="Radio Button 1" />
         </RadioButtonGroup>
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const errorBorder = screen.getByTestId("radio-error-border");
@@ -290,7 +290,7 @@ describe("when `validationRedesignOptIn` flag is true", () => {
             <RadioButton key="radio2" value="radio2" label="Radio Button 2" />,
           ]}
         </RadioButtonGroup>
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     expect(screen.getAllByRole("radio")).toHaveLength(2);
@@ -314,7 +314,7 @@ describe("when `validationRedesignOptIn` flag is true", () => {
             <RadioButton key="radio2" value="radio2" label="Radio Button 2" />,
           ]}
         </RadioButtonGroup>
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     expect(screen.getByTestId("radio-group-inline")).not.toHaveStyle({
diff --git a/src/components/radio-button/radio-button.component.tsx b/src/components/radio-button/radio-button.component.tsx
index c25b24adf0..039278d338 100644
--- a/src/components/radio-button/radio-button.component.tsx
+++ b/src/components/radio-button/radio-button.component.tsx
@@ -67,7 +67,7 @@ export const RadioButton = React.forwardRef<
       helpAriaLabel,
       ...props
     }: RadioButtonProps & InternalRadioButtonProps,
-    ref
+    ref,
   ) => {
     const { validationRedesignOptIn } = useContext(NewValidationContext);
 
@@ -82,7 +82,7 @@ export const RadioButton = React.forwardRef<
         // trigger focus, as Safari doesn't focus radioButtons on click by default
         event.target.focus();
       },
-      [onChange]
+      [onChange],
     );
 
     const validationProps = {
@@ -130,7 +130,7 @@ export const RadioButton = React.forwardRef<
     invariant(
       !props.children,
       "This component is meant to be used as a self-closing tag. " +
-        "You should probably use the label prop instead."
+        "You should probably use the label prop instead.",
     );
 
     const componentToRender = (
@@ -167,7 +167,7 @@ export const RadioButton = React.forwardRef<
         )}
       </>
     );
-  }
+  },
 );
 
 RadioButton.displayName = "RadioButton";
diff --git a/src/components/radio-button/radio-button.pw.tsx b/src/components/radio-button/radio-button.pw.tsx
index edec65809a..89b4426efe 100644
--- a/src/components/radio-button/radio-button.pw.tsx
+++ b/src/components/radio-button/radio-button.pw.tsx
@@ -60,7 +60,7 @@ test.describe("should render RadioButton component", () => {
     const component = await getComponent(page, CHARACTERS.STANDARD);
     await expect(component).toHaveAttribute(
       "data-component",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -69,7 +69,7 @@ test.describe("should render RadioButton component", () => {
     const radiobuttonElement = await radiobuttonComponent(page);
     await expect(radiobuttonElement).toHaveAttribute(
       "data-element",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -78,7 +78,7 @@ test.describe("should render RadioButton component", () => {
     const radiobuttonElement = await radiobuttonComponent(page);
     await expect(radiobuttonElement).toHaveAttribute(
       "data-role",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -118,7 +118,7 @@ test.describe("should render RadioButton component", () => {
 
   test("should render with inline fieldHelp", async ({ mount, page }) => {
     await mount(
-      <RadioButtonComponent fieldHelp="Inline fieldhelp" fieldHelpInline />
+      <RadioButtonComponent fieldHelp="Inline fieldhelp" fieldHelpInline />,
     );
     const fieldHelpElement = await radiobuttonInlineFieldHelp(page);
     await expect(fieldHelpElement).toHaveText("Inline fieldhelp");
@@ -150,7 +150,7 @@ test.describe("should render RadioButton component", () => {
     const radiobuttonElement = await radiobuttonRole(page);
     await expect(radiobuttonElement).toHaveAttribute(
       "name",
-      "radiobutton name"
+      "radiobutton name",
     );
   });
 
@@ -159,55 +159,52 @@ test.describe("should render RadioButton component", () => {
     const radiobuttonRoleElement = await radiobuttonRole(page);
     await expect(radiobuttonRoleElement).toHaveAttribute(
       "value",
-      "radiobuttonvalue"
+      "radiobuttonvalue",
     );
   });
 
-  ([
-    [SIZE.SMALL, 16],
-    [SIZE.LARGE, 24],
-  ] as [RadioButtonProps["size"], number][]).forEach(
-    ([size, heightAndWidth]) => {
-      test(`should render with size set to ${size}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<RadioButtonComponent size={size} />);
-        const radiobuttonElement = await radiobuttonRole(page);
-        await assertCssValueIsApproximately(
-          radiobuttonElement,
-          "height",
-          heightAndWidth
-        );
-        await assertCssValueIsApproximately(
-          radiobuttonElement,
-          "width",
-          heightAndWidth
-        );
-      });
-    }
-  );
-
-  ([
-    [1, "8px"],
-    [2, "16px"],
-  ] as [RadioButtonProps["labelSpacing"], string][]).forEach(
-    ([spacing, padding]) => {
-      test(`should render with ${spacing} as labelSpacing`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<RadioButtonComponent labelSpacing={spacing} />);
-        const radiobuttonLabelElement = await radiobuttonLabel(page);
-        const cssPaddingLeft = await radiobuttonLabelElement.evaluate((el) =>
-          window
-            .getComputedStyle(el.parentElement as HTMLElement)
-            .getPropertyValue("padding-left")
-        );
-        await expect(cssPaddingLeft).toBe(padding);
-      });
-    }
-  );
+  (
+    [
+      [SIZE.SMALL, 16],
+      [SIZE.LARGE, 24],
+    ] as [RadioButtonProps["size"], number][]
+  ).forEach(([size, heightAndWidth]) => {
+    test(`should render with size set to ${size}`, async ({ mount, page }) => {
+      await mount(<RadioButtonComponent size={size} />);
+      const radiobuttonElement = await radiobuttonRole(page);
+      await assertCssValueIsApproximately(
+        radiobuttonElement,
+        "height",
+        heightAndWidth,
+      );
+      await assertCssValueIsApproximately(
+        radiobuttonElement,
+        "width",
+        heightAndWidth,
+      );
+    });
+  });
+
+  (
+    [
+      [1, "8px"],
+      [2, "16px"],
+    ] as [RadioButtonProps["labelSpacing"], string][]
+  ).forEach(([spacing, padding]) => {
+    test(`should render with ${spacing} as labelSpacing`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<RadioButtonComponent labelSpacing={spacing} />);
+      const radiobuttonLabelElement = await radiobuttonLabel(page);
+      const cssPaddingLeft = await radiobuttonLabelElement.evaluate((el) =>
+        window
+          .getComputedStyle(el.parentElement as HTMLElement)
+          .getPropertyValue("padding-left"),
+      );
+      await expect(cssPaddingLeft).toBe(padding);
+    });
+  });
 
   [100, 75, 50, 25, 10].forEach((labelWidth) => {
     test(`should render using ${labelWidth} as labelWidth with correct width`, async ({
@@ -219,7 +216,7 @@ test.describe("should render RadioButton component", () => {
           labelWidth={labelWidth}
           reverse
           inputWidth={labelWidth === 100 ? undefined : 10}
-        />
+        />,
       );
 
       // if labelWidth is 100% it will still need to allow for input width of 16px
@@ -231,7 +228,7 @@ test.describe("should render RadioButton component", () => {
       const cssWidth = await radiobuttonLabelElement.evaluate((el) =>
         window
           .getComputedStyle(el.parentElement as HTMLElement)
-          .getPropertyValue("width")
+          .getPropertyValue("width"),
       );
       await expect(cssWidth).toBe(`${parentWidth}px`);
     });
@@ -243,7 +240,11 @@ test.describe("should render RadioButton component", () => {
       page,
     }) => {
       await mount(
-        <RadioButtonComponent labelWidth={10} reverse inputWidth={inputWidth} />
+        <RadioButtonComponent
+          labelWidth={10}
+          reverse
+          inputWidth={inputWidth}
+        />,
       );
 
       // if inputWidth is 100% it will still need to allow for label container width of 32px + 8px
@@ -255,7 +256,7 @@ test.describe("should render RadioButton component", () => {
       const cssWidth = await radiobuttonElement.evaluate((el) =>
         window
           .getComputedStyle(el.parentElement as HTMLElement)
-          .getPropertyValue("width")
+          .getPropertyValue("width"),
       );
       await expect(cssWidth).toBe(`${parentWidth}px`);
     });
@@ -272,7 +273,7 @@ test.describe("should render RadioButton component", () => {
     const radiobuttonSvgElement = await radiobuttonSvg(page);
     await expect(radiobuttonSvgElement).toHaveCSS(
       "border-bottom-color",
-      VALIDATION.ERROR
+      VALIDATION.ERROR,
     );
   });
 
@@ -281,7 +282,7 @@ test.describe("should render RadioButton component", () => {
     const radiobuttonSvgElement = await radiobuttonSvg(page);
     await expect(radiobuttonSvgElement).toHaveCSS(
       "border-bottom-color",
-      VALIDATION.WARNING
+      VALIDATION.WARNING,
     );
   });
 
@@ -290,7 +291,7 @@ test.describe("should render RadioButton component", () => {
     const radiobuttonSvgElement = await radiobuttonSvg(page);
     await expect(radiobuttonSvgElement).toHaveCSS(
       "border-bottom-color",
-      VALIDATION.INFO
+      VALIDATION.INFO,
     );
   });
 
@@ -305,7 +306,7 @@ test.describe("should render RadioButton component", () => {
     const radiobuttonWarningIcon = await radiobuttonIcon(page);
     await expect(radiobuttonWarningIcon).toHaveAttribute(
       "data-element",
-      "warning"
+      "warning",
     );
   });
 
@@ -315,10 +316,12 @@ test.describe("should render RadioButton component", () => {
     await expect(radiobuttonInfoIcon).toHaveAttribute("data-element", "info");
   });
 
-  ([
-    [true, 0],
-    [false, 1],
-  ] as [boolean, number][]).forEach(([reverseValue, position]) => {
+  (
+    [
+      [true, 0],
+      [false, 1],
+    ] as [boolean, number][]
+  ).forEach(([reverseValue, position]) => {
     test(`should render with reverse prop set to ${reverseValue}`, async ({
       mount,
       page,
@@ -327,7 +330,7 @@ test.describe("should render RadioButton component", () => {
         <RadioButtonComponent
           label="Radiobutton Label"
           reverse={reverseValue}
-        />
+        />,
       );
       const expectedLabelChild = await radiobuttonComponent(page)
         .locator("div > div > div > div:not(input + div)")
@@ -345,7 +348,7 @@ test.describe("should render RadioButton component", () => {
         <RadioButtonComponent
           labelHelp="Tooltip info"
           tooltipPosition={position}
-        />
+        />,
       );
       const radiobuttonIconElement = await radiobuttonIcon(page);
       await radiobuttonIconElement.hover();
@@ -454,7 +457,7 @@ test.describe("Testing RadioButtonGroup component", () => {
     const radiobuttonSvgElement = await radiobuttonSvg(page).first();
     await expect(radiobuttonSvgElement).toHaveCSS(
       "border-bottom-color",
-      VALIDATION.ERROR
+      VALIDATION.ERROR,
     );
   });
 
@@ -466,7 +469,7 @@ test.describe("Testing RadioButtonGroup component", () => {
     const radiobuttonSvgElement = await radiobuttonSvg(page).first();
     await expect(radiobuttonSvgElement).toHaveCSS(
       "border-bottom-color",
-      VALIDATION.WARNING
+      VALIDATION.WARNING,
     );
   });
 
@@ -478,7 +481,7 @@ test.describe("Testing RadioButtonGroup component", () => {
     const radiobuttonSvgElement = await radiobuttonSvg(page).first();
     await expect(radiobuttonSvgElement).toHaveCSS(
       "border-bottom-color",
-      VALIDATION.INFO
+      VALIDATION.INFO,
     );
   });
 
@@ -490,7 +493,7 @@ test.describe("Testing RadioButtonGroup component", () => {
     const radiobuttonGroupErrorIcon = await radiobuttonGroupIcon(page);
     await expect(radiobuttonGroupErrorIcon).toHaveAttribute(
       "data-element",
-      "error"
+      "error",
     );
   });
 
@@ -502,7 +505,7 @@ test.describe("Testing RadioButtonGroup component", () => {
     const radiobuttonGroupWarningIcon = await radiobuttonGroupIcon(page);
     await expect(radiobuttonGroupWarningIcon).toHaveAttribute(
       "data-element",
-      "warning"
+      "warning",
     );
   });
 
@@ -514,36 +517,34 @@ test.describe("Testing RadioButtonGroup component", () => {
     const radiobuttonGroupInfoIcon = await radiobuttonGroupIcon(page);
     await expect(radiobuttonGroupInfoIcon).toHaveAttribute(
       "data-element",
-      "info"
+      "info",
     );
   });
 
-  ([
-    ["left", "start"],
-    ["right", "end"],
-  ] as [RadioButtonGroupProps["legendAlign"], string][]).forEach(
-    ([position, assertion]) => {
-      test(`should render RadioButtonGroup component with inline legend aligned to ${position}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <RadioButtonGroupComponent
-            legendWidth={20}
-            legendAlign={position}
-            legendInline
-          />
-        );
-        const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(
-          page
-        );
-        await expect(radiobuttonGroupLegendElement).toHaveCSS(
-          "justify-content",
-          `flex-${assertion}`
-        );
-      });
-    }
-  );
+  (
+    [
+      ["left", "start"],
+      ["right", "end"],
+    ] as [RadioButtonGroupProps["legendAlign"], string][]
+  ).forEach(([position, assertion]) => {
+    test(`should render RadioButtonGroup component with inline legend aligned to ${position}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <RadioButtonGroupComponent
+          legendWidth={20}
+          legendAlign={position}
+          legendInline
+        />,
+      );
+      const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(page);
+      await expect(radiobuttonGroupLegendElement).toHaveCSS(
+        "justify-content",
+        `flex-${assertion}`,
+      );
+    });
+  });
 
   [20, 40].forEach((width) => {
     test(`should render RadioButtonGroup component with inline legend width set to ${width}`, async ({
@@ -551,12 +552,12 @@ test.describe("Testing RadioButtonGroup component", () => {
       page,
     }) => {
       await mount(
-        <RadioButtonGroupComponent legendWidth={width} legendInline />
+        <RadioButtonGroupComponent legendWidth={width} legendInline />,
       );
       const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(page);
       await expect(radiobuttonGroupLegendElement).toHaveAttribute(
         "width",
-        String(width)
+        String(width),
       );
     });
   });
@@ -568,38 +569,36 @@ test.describe("Testing RadioButtonGroup component", () => {
     await mount(
       <RadioButtonGroupComponent>
         <RadioButton id="radio-4" value="radio4" label="Don't Know" />
-      </RadioButtonGroupComponent>
+      </RadioButtonGroupComponent>,
     );
     const radiobuttonGroupElement = await radiobuttonGroup(page);
     await expect(radiobuttonGroupElement).toContainText("Don't Know");
   });
 
-  ([
-    [1, "8px"],
-    [2, "16px"],
-  ] as [RadioButtonGroupProps["legendSpacing"], string][]).forEach(
-    ([spacing, padding]) => {
-      test(`should render RadioButtonGroup component with legendSpacing set to ${spacing}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <RadioButtonGroupComponent
-            legendSpacing={spacing}
-            legendWidth={10}
-            legendInline
-          />
-        );
-        const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(
-          page
-        );
-        await expect(radiobuttonGroupLegendElement).toHaveCSS(
-          "padding-right",
-          padding
-        );
-      });
-    }
-  );
+  (
+    [
+      [1, "8px"],
+      [2, "16px"],
+    ] as [RadioButtonGroupProps["legendSpacing"], string][]
+  ).forEach(([spacing, padding]) => {
+    test(`should render RadioButtonGroup component with legendSpacing set to ${spacing}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <RadioButtonGroupComponent
+          legendSpacing={spacing}
+          legendWidth={10}
+          legendInline
+        />,
+      );
+      const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(page);
+      await expect(radiobuttonGroupLegendElement).toHaveCSS(
+        "padding-right",
+        padding,
+      );
+    });
+  });
 
   (["top", "bottom", "left", "right"] as const).forEach((position) => {
     test(`should render RadioButtonGroup component with tooltip positioned to the ${position}`, async ({
@@ -610,7 +609,7 @@ test.describe("Testing RadioButtonGroup component", () => {
         <RadioButtonGroupComponent
           error="Something is wrong"
           tooltipPosition={position}
-        />
+        />,
       );
       const radiobuttonGroupIconElement = await radiobuttonGroupIcon(page);
       await radiobuttonGroupIconElement.hover();
@@ -618,7 +617,7 @@ test.describe("Testing RadioButtonGroup component", () => {
       await expect(tooltipPreviewElement).toHaveText("Something is wrong");
       await expect(tooltipPreviewElement).toHaveAttribute(
         "data-placement",
-        position
+        position,
       );
     });
   });
@@ -649,11 +648,13 @@ test.describe("Testing RadioButtonGroup component", () => {
     await expect(thirdRadiobuttonElement).toHaveCSS("margin-left", "32px");
   });
 
-  ([
-    [399, "left"],
-    [400, "left"],
-    [401, "none"],
-  ] as const).forEach(([breakpoint, float]) => {
+  (
+    [
+      [399, "left"],
+      [400, "left"],
+      [401, "none"],
+    ] as const
+  ).forEach(([breakpoint, float]) => {
     test(`should check RadioButtonGroup legend is ${breakpoint} with adaptiveLabelBreakpoint ${float} and viewport 400`, async ({
       mount,
       page,
@@ -663,7 +664,7 @@ test.describe("Testing RadioButtonGroup component", () => {
         <RadioButtonGroupComponent
           adaptiveLegendBreakpoint={breakpoint}
           adaptiveSpacingBreakpoint={breakpoint}
-        />
+        />,
       );
       const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(page);
       await expect(radiobuttonGroupLegendElement).toHaveCSS("float", float);
diff --git a/src/components/radio-button/radio-button.test.tsx b/src/components/radio-button/radio-button.test.tsx
index ce61c02429..3c84ac4a77 100644
--- a/src/components/radio-button/radio-button.test.tsx
+++ b/src/components/radio-button/radio-button.test.tsx
@@ -17,7 +17,7 @@ test("calls `onClick` when provided and the radio button is clicked", async () =
   const user = userEvent.setup();
   const onClick = jest.fn();
   render(
-    <RadioButton value="radio1" label="Radio Button 1" onClick={onClick} />
+    <RadioButton value="radio1" label="Radio Button 1" onClick={onClick} />,
   );
 
   const radioButton = screen.getByRole("radio");
@@ -31,7 +31,7 @@ test("calls `onChange` when provided and the radio button is clicked", async ()
   const user = userEvent.setup();
   const onChange = jest.fn();
   render(
-    <RadioButton value="radio1" label="Radio Button 1" onChange={onChange} />
+    <RadioButton value="radio1" label="Radio Button 1" onChange={onChange} />,
   );
 
   const radioButton = screen.getByRole("radio");
@@ -45,7 +45,7 @@ test("calls `onFocus` when provided and the radio button is focused", async () =
   const user = userEvent.setup();
   const onFocus = jest.fn();
   render(
-    <RadioButton value="radio1" label="Radio Button 1" onFocus={onFocus} />
+    <RadioButton value="radio1" label="Radio Button 1" onFocus={onFocus} />,
   );
 
   const radioButton = screen.getByRole("radio", { name: "Radio Button 1" });
@@ -74,7 +74,7 @@ test("calls `onMouseEnter` when provided and the radio button is hovered", async
       value="radio1"
       label="Radio Button 1"
       onMouseEnter={onMouseEnter}
-    />
+    />,
   );
 
   const radioButton = screen.getByRole("radio");
@@ -92,7 +92,7 @@ test("calls `onMouseLeave` when provided and the radio button is no longer hover
       value="radio1"
       label="Radio Button 1"
       onMouseLeave={onMouseLeave}
-    />
+    />,
   );
 
   const radioButton = screen.getByRole("radio");
@@ -121,11 +121,11 @@ test("throws an error if children are passed", () => {
     render(
       <RadioButton value="radio1" label="Radio Button 1">
         <div>child</div>
-      </RadioButton>
+      </RadioButton>,
     );
   }).toThrow(
     "This component is meant to be used as a self-closing tag. " +
-      "You should probably use the label prop instead."
+      "You should probably use the label prop instead.",
   );
 
   consoleError.mockRestore();
@@ -150,7 +150,7 @@ test("renders checked when `checked` prop is true", () => {
 test("renders with a help tooltip if `labelHelp` is provided", async () => {
   const user = userEvent.setup();
   render(
-    <RadioButton value="radio1" label="Radio Button 1" labelHelp="labelHelp" />
+    <RadioButton value="radio1" label="Radio Button 1" labelHelp="labelHelp" />,
   );
 
   const helpIcon = screen.getByRole("button", { name: "help" });
@@ -168,7 +168,7 @@ test("sets the aria-label of the help icon to the provided `helpAriaLabel`", ()
       label="Radio Button 1"
       labelHelp="labelHelp"
       helpAriaLabel="helpAriaLabel"
-    />
+    />,
   );
 
   const helpIcon = screen.getByRole("button", { name: "helpAriaLabel" });
@@ -197,7 +197,7 @@ test("renders with expected styles when `reverse` prop is true", () => {
       label="Radio Button 1"
       fieldHelp="fieldHelp"
       reverse
-    />
+    />,
   );
 
   expect(screen.getByText("fieldHelp")).toHaveStyle({
@@ -217,7 +217,7 @@ test("renders `fieldHelp` with expected styles when `size` is 'large' and `rever
       size="large"
       fieldHelp="fieldHelp"
       reverse
-    />
+    />,
   );
 
   expect(screen.getByText("fieldHelp")).toHaveStyle({
diff --git a/src/components/search/search.component.tsx b/src/components/search/search.component.tsx
index 58543a103a..69de4c49e4 100644
--- a/src/components/search/search.component.tsx
+++ b/src/components/search/search.component.tsx
@@ -108,7 +108,7 @@ export const Search = React.forwardRef<SearchHandle, SearchProps>(
       triggerOnClear,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const isControlled = value !== undefined;
     const initialValue = isControlled ? value : defaultValue;
@@ -123,19 +123,19 @@ export const Search = React.forwardRef<SearchHandle, SearchProps>(
           inputRef.current?.focus();
         },
       }),
-      []
+      [],
     );
 
     if (!deprecateUncontrolledWarnTriggered && !isControlled) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Search` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Search` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
     invariant(
       typeof initialValue === "string",
-      "This component has no initial value"
+      "This component has no initial value",
     );
 
     const [searchValue, setSearchValue] = useState(initialValue);
@@ -290,7 +290,7 @@ export const Search = React.forwardRef<SearchHandle, SearchProps>(
         )}
       </StyledSearch>
     );
-  }
+  },
 );
 
 Search.displayName = "Search";
diff --git a/src/components/search/search.pw.tsx b/src/components/search/search.pw.tsx
index a46766a0ec..85452a5461 100644
--- a/src/components/search/search.pw.tsx
+++ b/src/components/search/search.pw.tsx
@@ -41,13 +41,12 @@ test.describe("When focused", () => {
 
     const searchDefaultInputElement = searchDefaultInput(page);
     await searchDefaultInputElement.focus();
-    const searchDefaultInputElementParent = searchDefaultInputElement.locator(
-      ".."
-    );
+    const searchDefaultInputElementParent =
+      searchDefaultInputElement.locator("..");
 
     await expect(searchDefaultInputElementParent).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
   });
 
@@ -63,12 +62,11 @@ test.describe("When focused", () => {
 
     const searchDefaultInputElement = searchDefaultInput(page);
     await searchDefaultInputElement.focus();
-    const searchDefaultInputElementParent = searchDefaultInputElement.locator(
-      ".."
-    );
+    const searchDefaultInputElementParent =
+      searchDefaultInputElement.locator("..");
     await expect(searchDefaultInputElementParent).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 
@@ -92,7 +90,7 @@ test.describe("When focused", () => {
 
     await expect(searchButtonElement).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
   });
 
@@ -116,7 +114,7 @@ test.describe("When focused", () => {
 
     await expect(searchButtonElement).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 
@@ -138,7 +136,7 @@ test.describe("When focused", () => {
 
     await expect(searchCrossIconElementParent).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
   });
 
@@ -160,7 +158,7 @@ test.describe("When focused", () => {
 
     await expect(searchCrossIconElementParent).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 });
@@ -177,7 +175,7 @@ test.describe("Prop tests for Search component", () => {
 
       await expect(searchDefaultInputElement).toHaveAttribute(
         "placeholder",
-        placeholder
+        placeholder,
       );
     });
   });
@@ -192,7 +190,7 @@ test.describe("Prop tests for Search component", () => {
 
     await expect(searchDefaultInputElement).toHaveAttribute(
       "value",
-      testDataStandard
+      testDataStandard,
     );
   });
 
@@ -203,7 +201,7 @@ test.describe("Prop tests for Search component", () => {
 
     await expect(searchDefaultInputElement).toHaveAttribute(
       "value",
-      testDataStandard
+      testDataStandard,
     );
   });
 
@@ -222,7 +220,7 @@ test.describe("Prop tests for Search component", () => {
 
     await expect(searchDefaultElement).toHaveAttribute(
       "name",
-      testDataStandard
+      testDataStandard,
     );
   });
 
@@ -233,7 +231,7 @@ test.describe("Prop tests for Search component", () => {
 
     await expect(searchDefaultInputElement).toHaveAttribute(
       "aria-label",
-      testDataStandard
+      testDataStandard,
     );
   });
 
@@ -242,7 +240,7 @@ test.describe("Prop tests for Search component", () => {
     page,
   }) => {
     await mount(
-      <SearchComponent searchButton searchButtonAriaLabel={testDataStandard} />
+      <SearchComponent searchButton searchButtonAriaLabel={testDataStandard} />,
     );
     const searchDefaultInputElement = searchDefaultInput(page);
     await searchDefaultInputElement.clear();
@@ -251,7 +249,7 @@ test.describe("Prop tests for Search component", () => {
 
     await expect(searchButtonElement).toHaveAttribute(
       "aria-label",
-      testDataStandard
+      testDataStandard,
     );
   });
 
@@ -264,7 +262,7 @@ test.describe("Prop tests for Search component", () => {
         <Search
           searchButton={searchButtonBool}
           defaultValue={testDataStandard}
-        />
+        />,
       );
 
       const searchFindIconElement = searchIcon(page);
@@ -286,10 +284,12 @@ test.describe("Prop tests for Search component", () => {
     await expect(page.getByText("foo")).toBeVisible();
   });
 
-  ([
-    ["34%", 464],
-    ["70%", 956],
-  ] as const).forEach(([widthInPercentage, widthVal]) => {
+  (
+    [
+      ["34%", 464],
+      ["70%", 956],
+    ] as const
+  ).forEach(([widthInPercentage, widthVal]) => {
     test(`should render Search with searchWidth prop set to ${widthInPercentage} percentage`, async ({
       mount,
       page,
@@ -301,7 +301,7 @@ test.describe("Prop tests for Search component", () => {
       await assertCssValueIsApproximately(
         searchDefaultElement,
         "width",
-        widthVal
+        widthVal,
       );
     });
   });
@@ -319,12 +319,14 @@ test.describe("Prop tests for Search component", () => {
     });
   });
 
-  ([
-    ["10%", 135],
-    ["34%", 464],
-    ["70%", 956],
-    ["100%", 1366],
-  ] as const).forEach(([widthInPercentage, widthVal]) => {
+  (
+    [
+      ["10%", 135],
+      ["34%", 464],
+      ["70%", 956],
+      ["100%", 1366],
+    ] as const
+  ).forEach(([widthInPercentage, widthVal]) => {
     test(`should render Search with maxWidth prop set to ${widthInPercentage}`, async ({
       mount,
       page,
@@ -336,7 +338,7 @@ test.describe("Prop tests for Search component", () => {
       await assertCssValueIsApproximately(
         searchDefaultElement,
         "width",
-        widthVal
+        widthVal,
       );
     });
   });
@@ -353,42 +355,44 @@ test.describe("Prop tests for Search component", () => {
   });
 });
 
-([
-  ["default", "rgb(102, 132, 148)"],
-  ["dark", "rgba(255, 255, 255, 0.8)"],
-] as [SearchProps["variant"], string][]).forEach(
-  ([variant, backgroundColor]) => {
-    test(`should render Search with variant prop set to ${variant}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(
-        <Box width="700px" height="108px">
-          <div
-            style={{
-              padding: "32px",
-              backgroundColor: "#003349",
-            }}
-          >
-            <SearchComponent variant={variant} />
-          </div>
-        </Box>
-      );
+(
+  [
+    ["default", "rgb(102, 132, 148)"],
+    ["dark", "rgba(255, 255, 255, 0.8)"],
+  ] as [SearchProps["variant"], string][]
+).forEach(([variant, backgroundColor]) => {
+  test(`should render Search with variant prop set to ${variant}`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <Box width="700px" height="108px">
+        <div
+          style={{
+            padding: "32px",
+            backgroundColor: "#003349",
+          }}
+        >
+          <SearchComponent variant={variant} />
+        </div>
+      </Box>,
+    );
 
-      const searchDefaultElement = searchDefault(page);
+    const searchDefaultElement = searchDefault(page);
 
-      await expect(searchDefaultElement).toHaveCSS(
-        "border-bottom-color",
-        backgroundColor
-      );
-    });
-  }
-);
+    await expect(searchDefaultElement).toHaveCSS(
+      "border-bottom-color",
+      backgroundColor,
+    );
+  });
+});
 
-([
-  ["default", "rgb(51, 91, 112)"],
-  ["dark", "rgb(255, 255, 255)"],
-] as [SearchProps["variant"], string][]).forEach(([variant, hoverColor]) => {
+(
+  [
+    ["default", "rgb(51, 91, 112)"],
+    ["dark", "rgb(255, 255, 255)"],
+  ] as [SearchProps["variant"], string][]
+).forEach(([variant, hoverColor]) => {
   test(`should render Search with variant prop set to ${variant} on hover`, async ({
     mount,
     page,
@@ -403,7 +407,7 @@ test.describe("Prop tests for Search component", () => {
         >
           <SearchComponent variant={variant} />
         </div>
-      </Box>
+      </Box>,
     );
 
     const searchDefaultInnerIconElement = searchDefaultInnerIcon(page);
@@ -412,7 +416,7 @@ test.describe("Prop tests for Search component", () => {
 
     await expect(searchDefaultElement).toHaveCSS(
       "border-bottom-color",
-      hoverColor
+      hoverColor,
     );
   });
 });
@@ -435,16 +439,15 @@ validationTypes.forEach(([type, colour]) => {
         {...{
           [type]: "Message",
         }}
-      />
+      />,
     );
 
-    const searchDefaultInputElementParent = searchDefaultInput(page).locator(
-      ".."
-    );
+    const searchDefaultInputElementParent =
+      searchDefaultInput(page).locator("..");
 
     await expect(searchDefaultInputElementParent).toHaveCSS(
       "border-color",
-      colour
+      colour,
     );
 
     const getDataElementByValueElementType = getDataElementByValue(page, type);
@@ -462,15 +465,14 @@ validationTypes.forEach((type) => {
         {...{
           [type[0]]: true,
         }}
-      />
-    );
-    const searchDefaultInputElementParent = searchDefaultInput(page).locator(
-      ".."
+      />,
     );
+    const searchDefaultInputElementParent =
+      searchDefaultInput(page).locator("..");
 
     await expect(searchDefaultInputElementParent).toHaveCSS(
       "border-color",
-      type[1]
+      type[1],
     );
   });
 });
@@ -484,12 +486,11 @@ test("should have the expected border radius styling when no search button enabl
   const searchDefaultInputElement = searchDefaultInput(page);
   await expect(searchDefaultInputElement).toHaveCSS("border-radius", "4px");
 
-  const searchDefaultInputElementParent = searchDefaultInput(page).locator(
-    ".."
-  );
+  const searchDefaultInputElementParent =
+    searchDefaultInput(page).locator("..");
   await expect(searchDefaultInputElementParent).toHaveCSS(
     "border-radius",
-    "4px"
+    "4px",
   );
 });
 
@@ -499,22 +500,18 @@ test("should have the expected border radius styling when search button enabled"
 }) => {
   await mount(<SearchComponent searchButton value="foo" />);
 
-  const searchDefaultInputElementParent = searchDefaultInput(page).locator(
-    ".."
-  );
+  const searchDefaultInputElementParent =
+    searchDefaultInput(page).locator("..");
 
   await expect(searchDefaultInputElementParent).toHaveCSS(
     "border-radius",
-    "4px 0px 0px 4px"
+    "4px 0px 0px 4px",
   );
 });
 
-([
-  "top",
-  "bottom",
-  "left",
-  "right",
-] as SearchProps["tooltipPosition"][]).forEach((tooltipPositionValue) => {
+(
+  ["top", "bottom", "left", "right"] as SearchProps["tooltipPosition"][]
+).forEach((tooltipPositionValue) => {
   test(`should render Search with the tooltip in the ${tooltipPositionValue} position`, async ({
     mount,
     page,
@@ -524,12 +521,12 @@ test("should have the expected border radius styling when search button enabled"
         m="250px"
         error={testDataStandard}
         tooltipPosition={tooltipPositionValue}
-      />
+      />,
     );
 
     const getDataElementByValueElementError = getDataElementByValue(
       page,
-      "error"
+      "error",
     );
     await getDataElementByValueElementError.hover();
     const tooltipPreviewElement = tooltipPreview(page);
@@ -537,7 +534,7 @@ test("should have the expected border radius styling when search button enabled"
     await expect(tooltipPreviewElement).toHaveText(testDataStandard);
     await expect(tooltipPreviewElement).toHaveAttribute(
       "data-placement",
-      String(tooltipPositionValue)
+      String(tooltipPositionValue),
     );
   });
 });
@@ -611,7 +608,7 @@ test.describe("Event tests for Search component", () => {
         }}
         defaultValue={testDataStandard}
         searchButton
-      />
+      />,
     );
 
     const searchButtonElement = searchButton(page);
@@ -630,7 +627,7 @@ test.describe("Event tests for Search component", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const searchDefaultInputElement = searchDefaultInput(page);
@@ -649,7 +646,7 @@ test.describe("Event tests for Search component", () => {
         onFocus={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const searchDefaultInputElement = searchDefaultInput(page);
@@ -668,7 +665,7 @@ test.describe("Event tests for Search component", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const searchDefaultInputElement = searchDefaultInput(page);
@@ -689,7 +686,7 @@ test.describe("Event tests for Search component", () => {
           onKeyDown={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       const searchDefaultInputElement = searchDefaultInput(page);
@@ -770,7 +767,7 @@ test.describe("Accessibility tests for Search", () => {
           {...{
             [type[0]]: true,
           }}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -782,7 +779,7 @@ test.describe("Accessibility tests for Search", () => {
     page,
   }) => {
     await mount(
-      <SearchComponent searchButton searchButtonAriaLabel={testDataStandard} />
+      <SearchComponent searchButton searchButtonAriaLabel={testDataStandard} />,
     );
 
     await checkAccessibility(page);
@@ -840,19 +837,16 @@ test.describe("Accessibility tests for Search", () => {
           {...{
             [type[0]]: "Message",
           }}
-        />
+        />,
       );
 
       await checkAccessibility(page);
     });
   });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as SearchProps["tooltipPosition"][]).forEach((tooltipPositionValue) => {
+  (
+    ["top", "bottom", "left", "right"] as SearchProps["tooltipPosition"][]
+  ).forEach((tooltipPositionValue) => {
     test(`should check accessibility with the tooltip in the ${tooltipPositionValue} position`, async ({
       mount,
       page,
@@ -862,7 +856,7 @@ test.describe("Accessibility tests for Search", () => {
           m="250px"
           error={testDataStandard}
           tooltipPosition={tooltipPositionValue}
-        />
+        />,
       );
 
       const searchErrorIcon = getDataElementByValue(page, "error");
@@ -883,7 +877,7 @@ test.describe("Accessibility tests for Search", () => {
         await mount(
           <Box width="700px" height="108px" bg="#003349">
             <SearchComponent variant={variant} />
-          </Box>
+          </Box>,
         );
 
         await checkAccessibility(page);
diff --git a/src/components/search/search.stories.tsx b/src/components/search/search.stories.tsx
index 27a72b1e66..cf53b93e59 100644
--- a/src/components/search/search.stories.tsx
+++ b/src/components/search/search.stories.tsx
@@ -241,33 +241,34 @@ export const ValidationsStringComponent: Story = () => {
 };
 ValidationsStringComponent.storyName = "Validations - String";
 
-export const ValidationsStringWithTooltipPositionOverridenComponent: Story = () => {
-  const [state, setState] = useState({
-    error: "<foo>",
-    warning: "<foo>",
-    info: "<foo>",
-  });
+export const ValidationsStringWithTooltipPositionOverridenComponent: Story =
+  () => {
+    const [state, setState] = useState({
+      error: "<foo>",
+      warning: "<foo>",
+      info: "<foo>",
+    });
 
-  const handleChange = (validation: Validation) => (e: SearchEvent) => {
-    setState({ ...state, [validation]: e.target.value });
-  };
+    const handleChange = (validation: Validation) => (e: SearchEvent) => {
+      setState({ ...state, [validation]: e.target.value });
+    };
 
-  return (
-    <>
-      {VALIDATIONS.map((validationType) => (
-        <Box key={`${validationType}-string-component`}>
-          <Search
-            value={state[validationType]}
-            onChange={handleChange(validationType)}
-            searchButton
-            {...{ [validationType]: "Invalid characters" }}
-            tooltipPosition="bottom"
-          />
-        </Box>
-      ))}
-    </>
-  );
-};
+    return (
+      <>
+        {VALIDATIONS.map((validationType) => (
+          <Box key={`${validationType}-string-component`}>
+            <Search
+              value={state[validationType]}
+              onChange={handleChange(validationType)}
+              searchButton
+              {...{ [validationType]: "Invalid characters" }}
+              tooltipPosition="bottom"
+            />
+          </Box>
+        ))}
+      </>
+    );
+  };
 ValidationsStringWithTooltipPositionOverridenComponent.storyName =
   "Validations - String with Tooltip Position Overriden";
 
diff --git a/src/components/search/search.test.tsx b/src/components/search/search.test.tsx
index 0481e87c12..87f3f4b54e 100644
--- a/src/components/search/search.test.tsx
+++ b/src/components/search/search.test.tsx
@@ -11,7 +11,7 @@ jest.mock("../../__internal__/utils/logger");
 
 testStyledSystemMarginRTL(
   (props) => <Search value="" {...props} />,
-  () => screen.getByTestId("search")
+  () => screen.getByTestId("search"),
 );
 
 test("a deprecation warning should be displayed once if the component is uncontrolled", () => {
@@ -19,7 +19,7 @@ test("a deprecation warning should be displayed once if the component is uncontr
   render(<Search defaultValue="foo" />);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Search` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Search` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
 
   expect(loggerSpy).toHaveBeenCalledTimes(1);
@@ -44,12 +44,12 @@ test("when the `searchButton` prop is `true`, a button with search icon is shown
   expect(searchButton).toBeVisible();
   expect(within(searchButton).getByTestId("icon")).toHaveAttribute(
     "type",
-    "search"
+    "search",
   );
   expect(
     within(screen.getByTestId("input-presentation-container")).queryByTestId(
-      "icon"
-    )
+      "icon",
+    ),
   ).not.toBeInTheDocument();
 });
 
@@ -61,12 +61,12 @@ test("when the `searchButton` prop is a string value, a button with search icon
   expect(searchButton).toHaveTextContent("custom search button");
   expect(within(searchButton).getByTestId("icon")).toHaveAttribute(
     "type",
-    "search"
+    "search",
   );
   expect(
     within(screen.getByTestId("input-presentation-container")).queryByTestId(
-      "icon"
-    )
+      "icon",
+    ),
   ).not.toBeInTheDocument();
 });
 
@@ -74,12 +74,12 @@ test("when the `searchButton` prop is not passed, no button with is shown, and a
   render(<Search value="" />);
 
   expect(
-    screen.queryByRole("button", { name: "search button" })
+    screen.queryByRole("button", { name: "search button" }),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByTestId("input-presentation-container")).getByTestId(
-      "icon"
-    )
+      "icon",
+    ),
   ).toHaveAttribute("type", "search");
 });
 
@@ -89,7 +89,7 @@ test("the search button text can be overridden via the locale context", () => {
       locale={{ search: { searchButtonText: () => "text override" } }}
     >
       <Search searchButton value="" />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   expect(screen.getByRole("button")).toHaveTextContent("text override");
@@ -107,7 +107,7 @@ test("the `searchButtonAriaLabel` prop passes a custom accessible name to the se
       defaultValue=""
       searchButton
       searchButtonAriaLabel="foobar button"
-    />
+    />,
   );
 
   expect(screen.getByRole("button")).toHaveAccessibleName("foobar button");
@@ -160,7 +160,7 @@ test("when the cross icon is clicked, the input value is cleared", async () => {
 
   expect(screen.getByRole("textbox")).toHaveValue("");
   expect(onChange).toHaveBeenCalledWith(
-    expect.objectContaining({ target: { value: "", name: "bar", id: "baz" } })
+    expect.objectContaining({ target: { value: "", name: "bar", id: "baz" } }),
   );
 });
 
@@ -175,7 +175,7 @@ test("when the cross icon is clicked, and the `triggerOnClear` props is passed,
       onClick={onClick}
       name="bar"
       id="baz"
-    />
+    />,
   );
   await user.click(screen.getByTestId("input-icon-toggle"));
 
@@ -198,7 +198,7 @@ test("when the cross icon is clicked, and the `triggerOnClear` props is not pass
       onClick={onClick}
       name="bar"
       id="baz"
-    />
+    />,
   );
   await user.click(screen.getByTestId("input-icon-toggle"));
 
@@ -225,7 +225,9 @@ test("when the input value changes, the `onChange` callback prop is called", asy
   await user.type(screen.getByRole("textbox"), "a");
   expect(onChange).toHaveBeenCalledTimes(1);
   expect(onChange).toHaveBeenCalledWith(
-    expect.objectContaining({ target: expect.objectContaining({ value: "a" }) })
+    expect.objectContaining({
+      target: expect.objectContaining({ value: "a" }),
+    }),
   );
 });
 
@@ -239,7 +241,7 @@ test("when the component is controlled, the `onClick` callback prop is called wi
       name="Search"
       onClick={onClick}
       searchButton
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "search button" }));
@@ -247,7 +249,7 @@ test("when the component is controlled, the `onClick` callback prop is called wi
   expect(onClick).toHaveBeenCalledWith(
     expect.objectContaining({
       target: { value: "FooBar", id: "Search", name: "Search" },
-    })
+    }),
   );
 });
 
@@ -261,7 +263,7 @@ test("when the component is uncontrolled, the `onClick` callback prop is called
       name="Search"
       onClick={onClick}
       searchButton
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "search button" }));
@@ -269,7 +271,7 @@ test("when the component is uncontrolled, the `onClick` callback prop is called
   expect(onClick).toHaveBeenCalledWith(
     expect.objectContaining({
       target: { value: "FooBar", id: "Search", name: "Search" },
-    })
+    }),
   );
 });
 
@@ -278,7 +280,7 @@ test("the component's wrapper element has the appropriate `data-component` tag",
 
   expect(screen.getByTestId("search")).toHaveAttribute(
     "data-component",
-    "search"
+    "search",
   );
 });
 
@@ -308,7 +310,7 @@ test("when a character key is pressed, propagation of the event to parent elemen
   render(
     <button type="button" aria-label="foo" onKeyDown={outerOnKeyDown}>
       <Search defaultValue="" />
-    </button>
+    </button>,
   );
 
   await user.type(screen.getByRole("textbox"), "a");
@@ -321,7 +323,7 @@ test("when a number key is pressed, propagation of the event to parent elements
   render(
     <button type="button" aria-label="foo" onKeyDown={outerOnKeyDown}>
       <Search defaultValue="" />
-    </button>
+    </button>,
   );
 
   await user.type(screen.getByRole("textbox"), "2");
@@ -334,12 +336,12 @@ test("when a non-alphanumeric key is pressed, propagation of the event to parent
   render(
     <button type="button" aria-label="foo" onKeyDown={outerOnKeyDown}>
       <Search defaultValue="" />
-    </button>
+    </button>,
   );
 
   await user.type(screen.getByRole("textbox"), "{Tab}");
   expect(outerOnKeyDown).toHaveBeenCalledWith(
-    expect.objectContaining({ key: "Tab" })
+    expect.objectContaining({ key: "Tab" }),
   );
 });
 
@@ -374,7 +376,7 @@ test("should render the bottom border when variant is dark, the input is not foc
   });
   expect(screen.getByTestId("search")).toHaveStyleRule(
     "border-bottom",
-    "var(--spacing025) solid var(--colorsUtilityYang080)"
+    "var(--spacing025) solid var(--colorsUtilityYang080)",
   );
 });
 
@@ -389,11 +391,11 @@ test("applies the correct width specified by the user", () => {
   });
   expect(screen.getByTestId("search")).toHaveStyleRule(
     "border-bottom",
-    "var(--spacing025) solid var(--colorsUtilityMajor300)"
+    "var(--spacing025) solid var(--colorsUtilityMajor300)",
   );
   expect(screen.getByTestId("search")).toHaveStyleRule(
     "font-size",
-    "var(--fontSize100)"
+    "var(--fontSize100)",
   );
 });
 
diff --git a/src/components/select/__internal__/list-action-button/list-action-button.component.tsx b/src/components/select/__internal__/list-action-button/list-action-button.component.tsx
index 80fdcdb558..9784533e1a 100644
--- a/src/components/select/__internal__/list-action-button/list-action-button.component.tsx
+++ b/src/components/select/__internal__/list-action-button/list-action-button.component.tsx
@@ -6,14 +6,14 @@ import Button from "../../../button";
 export interface ListActionButtonProps {
   listActionButton?: boolean | React.ReactNode;
   onListAction?: (
-    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
   ) => void;
 }
 
 const ListActionButton = React.forwardRef(
   (
     { listActionButton, onListAction }: ListActionButtonProps,
-    ref: React.ForwardedRef<HTMLButtonElement>
+    ref: React.ForwardedRef<HTMLButtonElement>,
   ) => {
     const l = useLocale();
 
@@ -43,7 +43,7 @@ const ListActionButton = React.forwardRef(
         {
           ref,
           onClick: onListAction,
-        }
+        },
       );
     }
 
@@ -52,7 +52,7 @@ const ListActionButton = React.forwardRef(
         {renderListActionButton()}
       </StyledListActionButtonWrapper>
     );
-  }
+  },
 );
 
 ListActionButton.displayName = "ListActionButton";
diff --git a/src/components/select/__internal__/list-action-button/list-action-button.style.ts b/src/components/select/__internal__/list-action-button/list-action-button.style.ts
index c41c2a7149..5a786c23ef 100644
--- a/src/components/select/__internal__/list-action-button/list-action-button.style.ts
+++ b/src/components/select/__internal__/list-action-button/list-action-button.style.ts
@@ -5,7 +5,9 @@ const StyledListActionButtonWrapper = styled.div`
   padding-top: var(--spacing100);
   padding-bottom: var(--spacing100);
   border-top: 1px solid var(--colorsUtilityDisabled600);
-  box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0), 0 -8px 8px 0 rgba(0, 0, 0, 0.03);
+  box-shadow:
+    0 0px 0 0 rgba(0, 0, 0, 0),
+    0 -8px 8px 0 rgba(0, 0, 0, 0.03);
   width: 100%;
   position: sticky;
   bottom: 0;
diff --git a/src/components/select/__internal__/list-action-button/list-action-button.test.tsx b/src/components/select/__internal__/list-action-button/list-action-button.test.tsx
index ebbd161b56..bcb4691c1f 100644
--- a/src/components/select/__internal__/list-action-button/list-action-button.test.tsx
+++ b/src/components/select/__internal__/list-action-button/list-action-button.test.tsx
@@ -10,7 +10,7 @@ test("button element can be accessed via a forwarded ref", async () => {
   render(<ListActionButton ref={ref} />);
 
   expect(ref).toHaveBeenCalledWith(
-    screen.getByRole("button", { name: "Add New Item" })
+    screen.getByRole("button", { name: "Add New Item" }),
   );
 });
 
@@ -26,7 +26,7 @@ test("calls onListAction when custom button is clicked", async () => {
     <ListActionButton
       listActionButton={<Button>Test Button</Button>}
       onListAction={onListAction}
-    />
+    />,
   );
 
   await user.click(screen.getByRole("button", { name: "Test Button" }));
diff --git a/src/components/select/__internal__/select-list/select-list.component.tsx b/src/components/select/__internal__/select-list/select-list.component.tsx
index 32d10fda03..8e199a4d58 100644
--- a/src/components/select/__internal__/select-list/select-list.component.tsx
+++ b/src/components/select/__internal__/select-list/select-list.component.tsx
@@ -75,7 +75,7 @@ export interface SelectListProps {
   listMaxHeight?: number;
   /** A callback for when the Action Button is triggered */
   onListAction?: (
-    ev?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+    ev?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
   ) => void;
   /** If true the loader animation is displayed below the last option */
   isLoading?: boolean;
@@ -138,7 +138,7 @@ const SelectList = React.forwardRef(
       listWidth,
       ...listProps
     }: SelectListProps,
-    listContainerRef: React.ForwardedRef<HTMLDivElement>
+    listContainerRef: React.ForwardedRef<HTMLDivElement>,
   ) => {
     const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
     const [scrollbarWidth, setScrollbarWidth] = useState(0);
@@ -156,7 +156,7 @@ const SelectList = React.forwardRef(
       if (isOpen && !wasOpen) {
         (listContainerRef as React.RefObject<HTMLDivElement>).current?.scrollTo(
           0,
-          0
+          0,
         );
       }
     });
@@ -191,14 +191,15 @@ const SelectList = React.forwardRef(
 
     const items = virtualizer.getVirtualItems();
 
-    const childrenList = useMemo(() => React.Children.toArray(children), [
-      children,
-    ]) as React.ReactElement<OptionProps>[];
+    const childrenList = useMemo(
+      () => React.Children.toArray(children),
+      [children],
+    ) as React.ReactElement<OptionProps>[];
 
     // check if object values are equal
     function shallowEqual(
       objA: Record<string, unknown>,
-      objB: Record<string, unknown>
+      objB: Record<string, unknown>,
     ) {
       const keysA = Object.keys(objA);
 
@@ -211,7 +212,7 @@ const SelectList = React.forwardRef(
           if (child.props.value && typeof valueToMatch === "object") {
             return shallowEqual(
               child.props.value as Record<string, unknown>,
-              valueToMatch
+              valueToMatch,
             );
           }
           return (
@@ -219,7 +220,7 @@ const SelectList = React.forwardRef(
           );
         });
       },
-      [childrenList]
+      [childrenList],
     );
 
     // getVirtualItems returns an empty array of items if the select list is currently closed - which is correct visually but
@@ -262,7 +263,7 @@ const SelectList = React.forwardRef(
         setScrollbarWidth(
           tableRef.current
             ? tableRef.current.offsetWidth - tableRef.current.clientWidth
-            : /* istanbul ignore next */ 0
+            : /* istanbul ignore next */ 0,
         );
       }
     }, [multiColumn]);
@@ -271,7 +272,7 @@ const SelectList = React.forwardRef(
       () => ({
         current: anchorElement || null,
       }),
-      [anchorElement]
+      [anchorElement],
     );
 
     const handleSelect = useCallback(
@@ -282,11 +283,11 @@ const SelectList = React.forwardRef(
           selectionConfirmed: true,
         });
       },
-      [onSelect]
+      [onSelect],
     );
 
     const childElementRefs = useRef<HTMLElement[]>(
-      Array.from({ length: React.Children.count(children) })
+      Array.from({ length: React.Children.count(children) }),
     );
 
     const optionChildrenList = useMemo(
@@ -297,7 +298,7 @@ const SelectList = React.forwardRef(
             (child.type === Option || child.type === OptionRow)
           );
         }),
-      [childrenList]
+      [childrenList],
     );
 
     const { measureElement } = virtualizer;
@@ -345,7 +346,7 @@ const SelectList = React.forwardRef(
       childrenList,
       (child) =>
         React.isValidElement(child) &&
-        (child.type === Option || child.type === OptionRow)
+        (child.type === Option || child.type === OptionRow),
     );
 
     const getNextHighlightableItemIndex = useCallback(
@@ -360,7 +361,7 @@ const SelectList = React.forwardRef(
           key,
           indexOfHighlighted,
           lastIndex,
-          isLoading
+          isLoading,
         );
         const nextElement = childrenList[nextIndex];
 
@@ -375,7 +376,7 @@ const SelectList = React.forwardRef(
 
         return nextIndex;
       },
-      [childrenList, lastOptionIndex, isLoading]
+      [childrenList, lastOptionIndex, isLoading],
     );
 
     const highlightNextItem = useCallback(
@@ -394,9 +395,8 @@ const SelectList = React.forwardRef(
           return;
         }
 
-        const { text, value } = (childrenList[
-          nextIndex
-        ] as React.ReactElement).props;
+        const { text, value } = (childrenList[nextIndex] as React.ReactElement)
+          .props;
 
         onSelect({
           text,
@@ -413,7 +413,7 @@ const SelectList = React.forwardRef(
         getNextHighlightableItemIndex,
         highlightedValue,
         onSelect,
-      ]
+      ],
     );
 
     const handleActionButtonTab = useCallback(
@@ -425,7 +425,7 @@ const SelectList = React.forwardRef(
           listActionButtonRef.current?.focus();
         }
       },
-      [onSelect]
+      [onSelect],
     );
 
     const focusOnAnchor = useCallback(() => {
@@ -497,7 +497,7 @@ const SelectList = React.forwardRef(
         highlightNextItem,
         focusOnAnchor,
         isOpen,
-      ]
+      ],
     );
 
     const handleEscapeKey = useCallback(
@@ -506,7 +506,7 @@ const SelectList = React.forwardRef(
           onSelectListClose();
         }
       },
-      [onSelectListClose]
+      [onSelectListClose],
     );
 
     useModalManager({
@@ -529,7 +529,7 @@ const SelectList = React.forwardRef(
           onListScrollBottom();
         }
       },
-      [onListScrollBottom, isOpen]
+      [onListScrollBottom, isOpen],
     );
 
     useEffect(() => {
@@ -559,7 +559,7 @@ const SelectList = React.forwardRef(
         const match = getNextChildByText(
           filterText,
           childrenList,
-          previousIndex
+          previousIndex,
         );
 
         if (!match) {
@@ -638,7 +638,7 @@ const SelectList = React.forwardRef(
             ]
           : /* istanbul ignore next: covered by Playwright tests for reliable positioning in a real browser */ []),
       ],
-      [listWidth, flipEnabled]
+      [listWidth, flipEnabled],
     );
 
     const loader = isLoading ? (
@@ -733,7 +733,7 @@ const SelectList = React.forwardRef(
         </Popover>
       </SelectListContext.Provider>
     );
-  }
+  },
 );
 
 export default SelectList;
diff --git a/src/components/select/__internal__/select-list/select-list.test.tsx b/src/components/select/__internal__/select-list/select-list.test.tsx
index 05ccb13895..9187d9ec0c 100644
--- a/src/components/select/__internal__/select-list/select-list.test.tsx
+++ b/src/components/select/__internal__/select-list/select-list.test.tsx
@@ -68,7 +68,7 @@ describe("rendered content", () => {
         listActionButton={<button type="button">Click me</button>}
       >
         <Option id="red" value="red" text="red" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
     const button = screen.getByRole("button", { name: /Click me/i });
     expect(button).toBeVisible();
@@ -78,7 +78,7 @@ describe("rendered content", () => {
     render(
       <SelectListWithInput isLoading>
         <Option id="red" value="red" text="red" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     expect(screen.getByRole("progressbar", { name: "Loading" })).toBeVisible();
@@ -95,17 +95,17 @@ describe("rendered content", () => {
           <td>light</td>
           <td>blue</td>
         </OptionRow>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     const table = screen.getByRole("table");
 
     expect(table).toBeVisible();
     expect(
-      within(table).getByRole("option", { name: /dark red/i })
+      within(table).getByRole("option", { name: /dark red/i }),
     ).toBeVisible();
     expect(
-      within(table).getByRole("option", { name: /light blue/i })
+      within(table).getByRole("option", { name: /light blue/i }),
     ).toBeVisible();
   });
 
@@ -115,19 +115,19 @@ describe("rendered content", () => {
       const { rerender } = render(
         <SelectListWithInput listPlacement={listPlacement}>
           <Option id="red" value="red" text="red" />
-        </SelectListWithInput>
+        </SelectListWithInput>,
       );
       rerender(
         <SelectListWithInput listPlacement={listPlacement}>
           <Option id="red" value="red" text="red" />
-        </SelectListWithInput>
+        </SelectListWithInput>,
       );
 
       expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
         "data-floating-placement",
-        listPlacement
+        listPlacement,
       );
-    }
+    },
   );
 
   it("highlights the correct selected option when highlightedValue prop is provided", () => {
@@ -135,14 +135,14 @@ describe("rendered content", () => {
       <SelectListWithInput highlightedValue="green">
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     const greenOption = screen.getByRole("option", { name: /green/i });
     expect(greenOption).toHaveAttribute("aria-selected", "true");
     expect(greenOption).toHaveStyleRule(
       "background-color",
-      "var(--colorsUtilityMajor200)"
+      "var(--colorsUtilityMajor200)",
     );
   });
 
@@ -151,14 +151,14 @@ describe("rendered content", () => {
       <SelectListWithInput highlightedValue={{ id: "green", value: 2 }}>
         <Option id="red" value={{ id: "red", value: 1 }} text="red" />
         <Option id="green" value={{ id: "green", value: 2 }} text="green" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     const greenOption = screen.getByRole("option", { name: /green/i });
     expect(greenOption).toHaveAttribute("aria-selected", "true");
     expect(greenOption).toHaveStyleRule(
       "background-color",
-      "var(--colorsUtilityMajor200)"
+      "var(--colorsUtilityMajor200)",
     );
   });
 });
@@ -167,7 +167,7 @@ test("sets its max height according to the listMaxHeight prop", () => {
   render(
     <SelectListWithInput listMaxHeight={100}>
       <Option id="red" value="red" text="red" />
-    </SelectListWithInput>
+    </SelectListWithInput>,
   );
 
   const scrollableArea = screen.getByTestId("select-list-scrollable-container");
@@ -184,7 +184,7 @@ describe("behaviour on option click", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.click(screen.getByRole("option", { name: /red/i }));
@@ -194,7 +194,7 @@ describe("behaviour on option click", () => {
         value: "red",
         selectionConfirmed: true,
         selectionType: "click",
-      })
+      }),
     );
   });
 
@@ -212,7 +212,7 @@ describe("behaviour on option click", () => {
           <td>light</td>
           <td>blue</td>
         </OptionRow>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.click(screen.getByRole("option", { name: /dark red/i }));
@@ -222,7 +222,7 @@ describe("behaviour on option click", () => {
         value: "dark-red",
         selectionConfirmed: true,
         selectionType: "click",
-      })
+      }),
     );
   });
 
@@ -234,7 +234,7 @@ describe("behaviour on option click", () => {
       <SelectListWithInput onSelect={onSelect}>
         <Option id="red" value={{ id: "red", value: 1 }} text="red" />
         <Option id="green" value={{ id: "green", value: 2 }} text="green" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.click(screen.getByRole("option", { name: /red/i }));
@@ -244,7 +244,7 @@ describe("behaviour on option click", () => {
         value: { id: "red", value: 1 },
         selectionConfirmed: true,
         selectionType: "click",
-      })
+      }),
     );
   });
 
@@ -255,7 +255,7 @@ describe("behaviour on option click", () => {
     render(
       <SelectListWithInput onSelect={onSelect}>
         <option value="apple">apple</option>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     const appleOption = screen.getByRole("option", { name: /apple/i });
@@ -271,7 +271,7 @@ describe("behaviour on option click", () => {
     render(
       <SelectListWithInput onSelect={onSelect}>
         <Option id="red" value="red" text="red" disabled />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     const redOption = screen.getByRole("option", { name: /red/i });
@@ -290,14 +290,14 @@ describe("filtering options", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     const greenOption = screen.getByRole("option", { name: /green/i });
     expect(greenOption).toHaveAttribute("aria-selected", "true");
     expect(greenOption).toHaveStyleRule(
       "background-color",
-      "var(--colorsUtilityMajor200)"
+      "var(--colorsUtilityMajor200)",
     );
   });
 
@@ -308,27 +308,27 @@ describe("filtering options", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     expect(screen.getByRole("option", { name: /red/i })).toHaveAttribute(
       "aria-selected",
-      "false"
+      "false",
     );
     expect(screen.getByRole("option", { name: /green/i })).toHaveAttribute(
       "aria-selected",
-      "false"
+      "false",
     );
     expect(screen.getByRole("option", { name: /blue/i })).toHaveAttribute(
       "aria-selected",
-      "false"
+      "false",
     );
   });
 });
 
 test("no error thrown when no options are passed but a highlightedValue is provided", () => {
   expect(() =>
-    render(<SelectListWithInput highlightedValue="red" />)
+    render(<SelectListWithInput highlightedValue="red" />),
   ).not.toThrow();
 });
 
@@ -336,7 +336,7 @@ test("hides the selected option if it is the only list item and the list is load
   render(
     <SelectListWithInput highlightedValue="green" isLoading>
       <Option id="green" value="green" text="green" />
-    </SelectListWithInput>
+    </SelectListWithInput>,
   );
 
   const hiddenOption = screen.getByRole("option", {
@@ -355,7 +355,7 @@ describe("keyboard navigation", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{Enter}");
@@ -365,7 +365,7 @@ describe("keyboard navigation", () => {
         value: "red",
         selectionConfirmed: true,
         selectionType: "enterKey",
-      })
+      }),
     );
   });
 
@@ -387,7 +387,7 @@ describe("keyboard navigation", () => {
           <td>light</td>
           <td>blue</td>
         </OptionRow>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{Enter}");
@@ -397,7 +397,7 @@ describe("keyboard navigation", () => {
         value: "dark-red",
         selectionConfirmed: true,
         selectionType: "enterKey",
-      })
+      }),
     );
   });
 
@@ -408,7 +408,7 @@ describe("keyboard navigation", () => {
     render(
       <SelectListWithInput onSelect={onSelect} highlightedValue="red">
         <Option id="red" value="red" text="red" disabled />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{Enter}");
@@ -425,7 +425,7 @@ describe("keyboard navigation", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowDown}");
@@ -435,7 +435,7 @@ describe("keyboard navigation", () => {
         value: "red",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -452,7 +452,7 @@ describe("keyboard navigation", () => {
           <td>light</td>
           <td>blue</td>
         </OptionRow>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowDown}");
@@ -462,7 +462,7 @@ describe("keyboard navigation", () => {
         value: "dark-red",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -475,7 +475,7 @@ describe("keyboard navigation", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowUp}");
@@ -485,7 +485,7 @@ describe("keyboard navigation", () => {
         value: "blue",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -503,7 +503,7 @@ describe("keyboard navigation", () => {
           <td>light</td>
           <td>blue</td>
         </OptionRow>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowUp}");
@@ -513,7 +513,7 @@ describe("keyboard navigation", () => {
         value: "light-blue",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -526,7 +526,7 @@ describe("keyboard navigation", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowDown}");
@@ -536,7 +536,7 @@ describe("keyboard navigation", () => {
         value: "red",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -558,7 +558,7 @@ describe("keyboard navigation", () => {
           <td>light</td>
           <td>blue</td>
         </OptionRow>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowDown}");
@@ -568,7 +568,7 @@ describe("keyboard navigation", () => {
         value: "dark-red",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -581,7 +581,7 @@ describe("keyboard navigation", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowUp}");
@@ -591,7 +591,7 @@ describe("keyboard navigation", () => {
         value: "blue",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -613,7 +613,7 @@ describe("keyboard navigation", () => {
           <td>light</td>
           <td>blue</td>
         </OptionRow>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowUp}");
@@ -623,7 +623,7 @@ describe("keyboard navigation", () => {
         value: "light-blue",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -636,7 +636,7 @@ describe("keyboard navigation", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{Home}");
@@ -646,7 +646,7 @@ describe("keyboard navigation", () => {
         value: "red",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -664,7 +664,7 @@ describe("keyboard navigation", () => {
           <td>light</td>
           <td>blue</td>
         </OptionRow>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{Home}");
@@ -674,7 +674,7 @@ describe("keyboard navigation", () => {
         value: "dark-red",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -687,7 +687,7 @@ describe("keyboard navigation", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{End}");
@@ -697,7 +697,7 @@ describe("keyboard navigation", () => {
         value: "blue",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -719,7 +719,7 @@ describe("keyboard navigation", () => {
           <td>light</td>
           <td>blue</td>
         </OptionRow>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{End}");
@@ -729,7 +729,7 @@ describe("keyboard navigation", () => {
         value: "light-blue",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -742,7 +742,7 @@ describe("keyboard navigation", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{a}");
@@ -758,7 +758,7 @@ describe("keyboard navigation", () => {
       <SelectListWithInput onSelect={onSelect}>
         <Option id="red" value="red" text="red" disabled />
         <Option id="green" value="green" text="green" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowDown}");
@@ -768,7 +768,7 @@ describe("keyboard navigation", () => {
         value: "green",
         selectionConfirmed: false,
         selectionType: "navigationKey",
-      })
+      }),
     );
   });
 
@@ -782,7 +782,7 @@ describe("keyboard navigation", () => {
         listActionButton={<button type="button">Click me</button>}
       >
         <Option id="red" value="red" text="red" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     const actionButton = screen.getByRole("button", { name: /Click me/i });
@@ -794,7 +794,7 @@ describe("keyboard navigation", () => {
       expect.objectContaining({
         selectionType: "tab",
         selectionConfirmed: false,
-      })
+      }),
     );
   });
 
@@ -811,7 +811,7 @@ describe("keyboard navigation", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowDown}");
@@ -826,7 +826,7 @@ describe("keyboard navigation", () => {
     render(
       <SelectListWithInput onSelect={onSelect}>
         <p>apple</p>
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ArrowDown}");
@@ -842,7 +842,7 @@ describe("closing behaviour", () => {
     render(
       <SelectListWithInput>
         <Option id="red" value="red" text="red" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     await user.keyboard("{ }");
@@ -858,15 +858,15 @@ describe("closing behaviour", () => {
       render(
         <SelectListWithInput>
           <Option id="red" value="red" text="red" />
-        </SelectListWithInput>
+        </SelectListWithInput>,
       );
 
       await user.keyboard(`{${key}}`);
 
       await waitFor(() =>
-        expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+        expect(screen.queryByRole("listbox")).not.toBeInTheDocument(),
       );
-    }
+    },
   );
 
   it("does not close when navigating away from custom action button by pressing Tab", async () => {
@@ -877,7 +877,7 @@ describe("closing behaviour", () => {
         listActionButton={<button type="button">Click me</button>}
       >
         <Option id="red" value="red" text="red" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     const actionButton = screen.getByRole("button", { name: /Click me/i });
@@ -898,7 +898,7 @@ describe("closing behaviour", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     screen.getByRole("option", { name: /blue/i }).focus();
@@ -916,11 +916,11 @@ describe("scroll behaviour", () => {
     render(
       <SelectListWithInput onListScrollBottom={onListScrollBottom}>
         <Option id="red" value="red" text="red" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     const scrollableContainer = screen.getByTestId(
-      "select-list-scrollable-container"
+      "select-list-scrollable-container",
     );
     jest.spyOn(scrollableContainer, "scrollHeight", "get").mockReturnValue(120);
     jest.spyOn(scrollableContainer, "clientHeight", "get").mockReturnValue(40);
@@ -940,11 +940,11 @@ describe("scroll behaviour", () => {
     render(
       <SelectListWithInput onListScrollBottom={onListScrollBottom}>
         <Option id="red" value="red" text="red" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     const scrollableContainer = screen.getByTestId(
-      "select-list-scrollable-container"
+      "select-list-scrollable-container",
     );
     jest.spyOn(scrollableContainer, "scrollHeight", "get").mockReturnValue(120);
     jest.spyOn(scrollableContainer, "clientHeight", "get").mockReturnValue(40);
@@ -966,7 +966,7 @@ describe("virtualised options", () => {
         <Option id="red" value="red" text="red" />
         <Option id="green" value="green" text="green" />
         <Option id="blue" value="blue" text="blue" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     expect(screen.getAllByRole("option")).toHaveLength(3);
@@ -980,7 +980,7 @@ describe("virtualised options", () => {
         <Option key="blue" value="blue" text="blue" />
         <Option key="white" value="white" text="white" />
         <Option key="black" value="black" text="black" />
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     expect(screen.getAllByRole("option").length).toBeLessThan(5);
@@ -1002,12 +1002,12 @@ describe("virtualised options", () => {
               text={`${index + 1}`}
             />
           ))}
-      </SelectListWithInput>
+      </SelectListWithInput>,
     );
 
     expect(screen.getAllByRole("option").length).toBeLessThan(20);
     expect(
-      screen.getByRole("option", { name: /20/i, selected: true })
+      screen.getByRole("option", { name: /20/i, selected: true }),
     ).toBeVisible();
   });
 });
@@ -1017,16 +1017,16 @@ test("each rendered option has aria-setsize attribute set to the total number of
     <SelectListWithInput>
       <Option id="red" value="red" text="red" />
       <Option id="green" value="green" text="green" />
-    </SelectListWithInput>
+    </SelectListWithInput>,
   );
 
   expect(screen.getByRole("option", { name: "red" })).toHaveAttribute(
     "aria-setsize",
-    "2"
+    "2",
   );
   expect(screen.getByRole("option", { name: "green" })).toHaveAttribute(
     "aria-setsize",
-    "2"
+    "2",
   );
 });
 
@@ -1035,15 +1035,15 @@ test("each rendered option has aria-posinset attribute set to its index in the l
     <SelectListWithInput>
       <Option id="red" value="red" text="red" />
       <Option id="green" value="green" text="green" />
-    </SelectListWithInput>
+    </SelectListWithInput>,
   );
 
   expect(screen.getByRole("option", { name: "red" })).toHaveAttribute(
     "aria-posinset",
-    "1"
+    "1",
   );
   expect(screen.getByRole("option", { name: "green" })).toHaveAttribute(
     "aria-posinset",
-    "2"
+    "2",
   );
 });
diff --git a/src/components/select/__internal__/select-textbox/select-textbox.component.tsx b/src/components/select/__internal__/select-textbox/select-textbox.component.tsx
index 766d5ca4a7..e7500b6907 100644
--- a/src/components/select/__internal__/select-textbox/select-textbox.component.tsx
+++ b/src/components/select/__internal__/select-textbox/select-textbox.component.tsx
@@ -119,14 +119,14 @@ const SelectTextbox = React.forwardRef(
       onKeyDown,
       ...restProps
     }: SelectTextboxProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     const l = useLocale();
     const placeholder = customPlaceholder || l.select.placeholder();
     const showPlaceholder = !disabled && !readOnly && !formattedValue;
 
     function handleTextboxClick(
-      event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+      event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
     ) {
       onClick?.(event as React.MouseEvent<HTMLInputElement>);
     }
@@ -208,7 +208,7 @@ const SelectTextbox = React.forwardRef(
         </Textbox>
       </SelectTextboxContext.Provider>
     );
-  }
+  },
 );
 
 SelectTextbox.displayName = "SelectTextbox";
diff --git a/src/components/select/__internal__/select-textbox/select-textbox.context.ts b/src/components/select/__internal__/select-textbox/select-textbox.context.ts
index 592abe43b9..1955b684d8 100644
--- a/src/components/select/__internal__/select-textbox/select-textbox.context.ts
+++ b/src/components/select/__internal__/select-textbox/select-textbox.context.ts
@@ -4,6 +4,5 @@ export type SelectTextboxContextProps = {
   isInputInSelect?: boolean;
 };
 
-export const SelectTextboxContext = React.createContext<SelectTextboxContextProps>(
-  {}
-);
+export const SelectTextboxContext =
+  React.createContext<SelectTextboxContextProps>({});
diff --git a/src/components/select/__internal__/select-textbox/select-textbox.test.tsx b/src/components/select/__internal__/select-textbox/select-textbox.test.tsx
index e9203b3a22..2b6dc56b6e 100644
--- a/src/components/select/__internal__/select-textbox/select-textbox.test.tsx
+++ b/src/components/select/__internal__/select-textbox/select-textbox.test.tsx
@@ -8,7 +8,7 @@ test("renders as a combobox", () => {
   render(<SelectTextbox label="Select Colour" />);
 
   expect(
-    screen.getByRole("combobox", { name: /Select Colour/i })
+    screen.getByRole("combobox", { name: /Select Colour/i }),
   ).toBeVisible();
 });
 
@@ -39,7 +39,7 @@ test("combobox has correct accessible name when ariaLabelledBy prop is provided"
     <>
       <h3 id="label">Label</h3>
       <SelectTextbox ariaLabelledby="label" />
-    </>
+    </>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAccessibleName("Label");
@@ -50,7 +50,7 @@ test("combobox has correct accessible name when accessibilityLabelId prop is pro
     <>
       <h3 id="label">Label</h3>
       <SelectTextbox accessibilityLabelId="label" />
-    </>
+    </>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAccessibleName("Label");
@@ -96,7 +96,7 @@ test("combobox has placeholder text when it has no value and hasTextCursor prop
 
   expect(screen.getByRole("combobox")).toHaveAttribute(
     "placeholder",
-    "Please Select..."
+    "Please Select...",
   );
 });
 
@@ -122,11 +122,11 @@ describe("when hasTextCursor prop is false", () => {
         label="Textbox"
         formattedValue="foo"
         hasTextCursor={false}
-      />
+      />,
     );
 
     expect(
-      screen.getByRole("combobox", { name: "Textbox" })
+      screen.getByRole("combobox", { name: "Textbox" }),
     ).not.toHaveTextContent("foo");
     expect(screen.getByText("foo")).toBeVisible();
   });
@@ -147,12 +147,12 @@ describe("when hasTextCursor prop is false", () => {
 
   it("hides the combobox overlay from assistive technologies", () => {
     render(
-      <SelectTextbox formattedValue="You can't see me" hasTextCursor={false} />
+      <SelectTextbox formattedValue="You can't see me" hasTextCursor={false} />,
     );
 
     expect(screen.getByTestId("select-text")).toHaveAttribute(
       "aria-hidden",
-      "true"
+      "true",
     );
   });
 
@@ -160,7 +160,7 @@ describe("when hasTextCursor prop is false", () => {
     const onClick = jest.fn();
     const user = userEvent.setup();
     render(
-      <SelectTextbox label="Textbox" onClick={onClick} hasTextCursor={false} />
+      <SelectTextbox label="Textbox" onClick={onClick} hasTextCursor={false} />,
     );
 
     await user.click(screen.getByText("Please Select..."));
@@ -180,7 +180,7 @@ describe("when hasTextCursor prop is false", () => {
 
   it("applies correct styles when disabled", () => {
     render(
-      <SelectTextbox disabled formattedValue="foo" hasTextCursor={false} />
+      <SelectTextbox disabled formattedValue="foo" hasTextCursor={false} />,
     );
 
     expect(screen.getByTestId("select-text")).toHaveStyle({
@@ -192,7 +192,7 @@ describe("when hasTextCursor prop is false", () => {
 
   it("applies correct styles when read-only", () => {
     render(
-      <SelectTextbox readOnly formattedValue="foo" hasTextCursor={false} />
+      <SelectTextbox readOnly formattedValue="foo" hasTextCursor={false} />,
     );
 
     expect(screen.getByTestId("select-text")).toHaveStyle({
@@ -204,7 +204,7 @@ describe("when hasTextCursor prop is false", () => {
 
   it("applies correct styles when transparent", () => {
     render(
-      <SelectTextbox transparent formattedValue="foo" hasTextCursor={false} />
+      <SelectTextbox transparent formattedValue="foo" hasTextCursor={false} />,
     );
 
     expect(screen.getByTestId("select-text")).toHaveStyle({
diff --git a/src/components/select/__internal__/utils/get-next-child-by-text.test.tsx b/src/components/select/__internal__/utils/get-next-child-by-text.test.tsx
index ef839be9c7..8f98158442 100644
--- a/src/components/select/__internal__/utils/get-next-child-by-text.test.tsx
+++ b/src/components/select/__internal__/utils/get-next-child-by-text.test.tsx
@@ -13,13 +13,13 @@ const optionList = [
 
 test("matches single character to first option's starting letter", () => {
   expect(getNextChildByText("a", optionList)).toStrictEqual(
-    <Option text="amber" value="amber" />
+    <Option text="amber" value="amber" />,
   );
   expect(getNextChildByText("b", optionList)).toStrictEqual(
-    <Option text="blue" value="blue" />
+    <Option text="blue" value="blue" />,
   );
   expect(getNextChildByText("w", optionList)).toStrictEqual(
-    <Option text="white" value="white" />
+    <Option text="white" value="white" />,
   );
 });
 
@@ -29,27 +29,27 @@ test("returns undefined for unmatched single character", () => {
 
 test("matches repeated character to first option's starting letter", () => {
   expect(getNextChildByText("bb", optionList)).toStrictEqual(
-    <Option text="blue" value="blue" />
+    <Option text="blue" value="blue" />,
   );
 });
 
 test("finds next option for repeated character after a match", () => {
   expect(getNextChildByText("bb", optionList, 1)).toStrictEqual(
-    <Option text="black" value="black" />
+    <Option text="black" value="black" />,
   );
 });
 
 test("cycles to first option for repeated character after last match", () => {
   expect(getNextChildByText("bb", optionList, 5)).toStrictEqual(
-    <Option text="blue" value="blue" />
+    <Option text="blue" value="blue" />,
   );
 });
 
 test("matches string to option starting with that string", () => {
   expect(getNextChildByText("br", optionList)).toStrictEqual(
-    <Option text="brown" value="brown" />
+    <Option text="brown" value="brown" />,
   );
   expect(getNextChildByText("bla", optionList)).toStrictEqual(
-    <Option text="black" value="black" />
+    <Option text="black" value="black" />,
   );
 });
diff --git a/src/components/select/__internal__/utils/get-next-child-by-text.ts b/src/components/select/__internal__/utils/get-next-child-by-text.ts
index 32654167e3..10b1b5d822 100644
--- a/src/components/select/__internal__/utils/get-next-child-by-text.ts
+++ b/src/components/select/__internal__/utils/get-next-child-by-text.ts
@@ -2,7 +2,7 @@ import React from "react";
 
 function findElementStartingWithText(
   textToMatch: string,
-  list: React.ReactElement[]
+  list: React.ReactElement[],
 ) {
   return list.findIndex((child) => {
     return child.props.text
@@ -13,7 +13,7 @@ function findElementStartingWithText(
 
 function getListOfMatches(
   arrayOfChildren: React.ReactElement[],
-  lastCharacter: string
+  lastCharacter: string,
 ) {
   return arrayOfChildren.reduce((acc: number[], child, index) => {
     if (
@@ -43,7 +43,7 @@ function getIndexOfNextElement(listOfMatches: number[], previousIndex: number) {
 export default function getNextChildByText(
   textToMatch: string,
   arrayOfChildren: React.ReactElement[],
-  previousIndex = -1
+  previousIndex = -1,
 ) {
   const lastCharacter = textToMatch.slice(-1);
   const isTheSameCharacter = textToMatch
diff --git a/src/components/select/__internal__/utils/get-next-index-by-key.ts b/src/components/select/__internal__/utils/get-next-index-by-key.ts
index 55c5e60520..b0c5ba3d9a 100644
--- a/src/components/select/__internal__/utils/get-next-index-by-key.ts
+++ b/src/components/select/__internal__/utils/get-next-index-by-key.ts
@@ -4,7 +4,7 @@ export default function getNextIndexByKey(
   key: string,
   currentIndex: number,
   lastIndex: number,
-  isLoading?: boolean
+  isLoading?: boolean,
 ) {
   const isNoOptionSelected = currentIndex === -1;
   let newIndex = currentIndex;
diff --git a/src/components/select/__internal__/utils/highlight-part-of-text.tsx b/src/components/select/__internal__/utils/highlight-part-of-text.tsx
index 0bac48424d..ebc198f7ee 100644
--- a/src/components/select/__internal__/utils/highlight-part-of-text.tsx
+++ b/src/components/select/__internal__/utils/highlight-part-of-text.tsx
@@ -3,7 +3,7 @@ import MatchingText from "./matching-text.style";
 
 function highlightPartOfText(
   text: string,
-  partToHighlight: string
+  partToHighlight: string,
 ): React.ReactNode {
   if (!partToHighlight || !partToHighlight.length || !text) return text;
   const lowercaseText = text.toLowerCase();
@@ -17,11 +17,11 @@ function highlightPartOfText(
   const precedingText = text.slice(0, indexOfFirstMatch);
   const matchingText = text.slice(
     indexOfFirstMatch,
-    indexOfFirstMatch + partToHighlight.length
+    indexOfFirstMatch + partToHighlight.length,
   );
   const followingText = text.slice(
     indexOfFirstMatch + partToHighlight.length,
-    text.length
+    text.length,
   );
 
   let followingTextNode: React.ReactNode = followingText;
@@ -43,7 +43,7 @@ function highlightPartOfText(
 
 export default function highlightPartOfTextRecursive(
   child: React.ReactNode,
-  partToHighlight: string
+  partToHighlight: string,
 ): React.ReactNode {
   if (typeof child === "string") {
     return highlightPartOfText(child, partToHighlight);
@@ -54,7 +54,7 @@ export default function highlightPartOfTextRecursive(
   }
   const highlightedChildren = React.Children.map(
     child.props.children,
-    (grandChild) => highlightPartOfTextRecursive(grandChild, partToHighlight)
+    (grandChild) => highlightPartOfTextRecursive(grandChild, partToHighlight),
   );
   return React.cloneElement(child, { children: highlightedChildren });
 }
diff --git a/src/components/select/__internal__/utils/is-expected-option.test.tsx b/src/components/select/__internal__/utils/is-expected-option.test.tsx
index 010f4e15a8..3659bb3090 100644
--- a/src/components/select/__internal__/utils/is-expected-option.test.tsx
+++ b/src/components/select/__internal__/utils/is-expected-option.test.tsx
@@ -8,13 +8,13 @@ test("returns false when the element is not an Option", () => {
 
 test("returns true when the element is an Option whose value property matches expectedValue", () => {
   expect(
-    isExpectedOption(<Option value="foo" text="bar" />, "foo")
+    isExpectedOption(<Option value="foo" text="bar" />, "foo"),
   ).toBeTruthy();
 });
 
 test("returns false when the element is an Option whose value property does not match expectedValue", () => {
   expect(
-    isExpectedOption(<Option value="foo" text="bar" />, "bar")
+    isExpectedOption(<Option value="foo" text="bar" />, "bar"),
   ).toBeFalsy();
 });
 
@@ -22,8 +22,8 @@ test("returns true when the element is an Option whose value property is an obje
   expect(
     isExpectedOption(
       <Option value={{ id: "foo", value: "foo" }} text="bar" />,
-      { id: "foo", value: "foo" }
-    )
+      { id: "foo", value: "foo" },
+    ),
   ).toBeTruthy();
 });
 
@@ -31,8 +31,8 @@ test("returns false when the element is an Option whose value property is an obj
   expect(
     isExpectedOption(
       <Option value={{ id: "foo", value: "foo" }} text="bar" />,
-      { id: "bar", value: "foo" }
-    )
+      { id: "bar", value: "foo" },
+    ),
   ).toBeFalsy();
 });
 
@@ -45,7 +45,7 @@ it.each([
   expect(
     isExpectedOption(
       <Option text="bar" value={{ id: "foo", value: "foo" }} />,
-      expectedValue
-    )
+      expectedValue,
+    ),
   ).toBe(false);
 });
diff --git a/src/components/select/__internal__/utils/is-expected-option.ts b/src/components/select/__internal__/utils/is-expected-option.ts
index c63b3aebec..60520dc4c1 100644
--- a/src/components/select/__internal__/utils/is-expected-option.ts
+++ b/src/components/select/__internal__/utils/is-expected-option.ts
@@ -4,7 +4,7 @@ import isExpectedValue from "./is-expected-value";
 
 export default function isExpectedOption(
   element: React.ReactElement,
-  expectedValue?: string | Record<string, unknown> | null
+  expectedValue?: string | Record<string, unknown> | null,
 ) {
   if (element.type !== Option && element.type !== OptionRow) {
     return false;
diff --git a/src/components/select/__internal__/utils/is-expected-value.test.ts b/src/components/select/__internal__/utils/is-expected-value.test.ts
index 2089970150..897ff31e44 100644
--- a/src/components/select/__internal__/utils/is-expected-value.test.ts
+++ b/src/components/select/__internal__/utils/is-expected-value.test.ts
@@ -10,12 +10,12 @@ test("returns false when currentValue is a string and does match expectedValue",
 
 test("returns true when currentValue is an object whose id property matches that of expectedValue", () => {
   expect(
-    isExpectedValue({ id: "foo", value: "foo" }, { id: "foo", value: "foo" })
+    isExpectedValue({ id: "foo", value: "foo" }, { id: "foo", value: "foo" }),
   ).toBeTruthy();
 });
 
 test("returns false when currentValue is an object whose id property does not match that of expectedValue", () => {
   expect(
-    isExpectedValue({ id: "foo", value: "foo" }, { id: "bar", value: "foo" })
+    isExpectedValue({ id: "foo", value: "foo" }, { id: "bar", value: "foo" }),
   ).toBeFalsy();
 });
diff --git a/src/components/select/__internal__/utils/is-expected-value.ts b/src/components/select/__internal__/utils/is-expected-value.ts
index 69fcb58c3f..d9d42dbb6e 100644
--- a/src/components/select/__internal__/utils/is-expected-value.ts
+++ b/src/components/select/__internal__/utils/is-expected-value.ts
@@ -1,6 +1,6 @@
 export default function isExpectedValue(
   currentValue: string | Record<string, unknown>,
-  expectedValue: string | Record<string, unknown>
+  expectedValue: string | Record<string, unknown>,
 ) {
   if (
     typeof currentValue === "object" &&
diff --git a/src/components/select/__internal__/utils/is-navigation-key.test.ts b/src/components/select/__internal__/utils/is-navigation-key.test.ts
index 720dad1a30..6d411ddde2 100644
--- a/src/components/select/__internal__/utils/is-navigation-key.test.ts
+++ b/src/components/select/__internal__/utils/is-navigation-key.test.ts
@@ -4,7 +4,7 @@ it.each(["ArrowDown", "ArrowUp", "Home", "End", "PageUp", "PageDown"])(
   "returns true for '%s' key",
   (key) => {
     expect(isNavigationKey(key)).toBe(true);
-  }
+  },
 );
 
 it.each([
diff --git a/src/components/select/__internal__/utils/with-filter.hoc.tsx b/src/components/select/__internal__/utils/with-filter.hoc.tsx
index 92c2d4a2fb..e257be8b3a 100644
--- a/src/components/select/__internal__/utils/with-filter.hoc.tsx
+++ b/src/components/select/__internal__/utils/with-filter.hoc.tsx
@@ -19,7 +19,7 @@ const filterOptions = (option: React.ReactElement, filterText: string) => {
 
 const filterOptionRows = (
   optionRow: React.ReactElement,
-  filterText: string
+  filterText: string,
 ) => {
   const cells = React.Children.toArray(optionRow.props.children);
 
@@ -66,7 +66,7 @@ const filterChildren = (filterText: string) => (children: React.ReactNode) => {
 
 function addHighlightedContent(
   filteredElements: React.ReactNode,
-  filterText: string
+  filterText: string,
 ) {
   return React.Children.map(filteredElements, (child) => {
     let highlightedContent;
@@ -108,7 +108,7 @@ export interface FilteredComponentProps extends WrappedComponentProps {
 
 /** Filters wrapped component children based on provided filter text and highlights matching content */
 const withFilter = <T extends WrappedComponentProps>(
-  WrappedComponent: React.ComponentType<T>
+  WrappedComponent: React.ComponentType<T>,
 ) => {
   const FilteredComponent = React.forwardRef(
     (
@@ -121,7 +121,7 @@ const withFilter = <T extends WrappedComponentProps>(
         tableHeader,
         ...props
       }: FilteredComponentProps & T,
-      forwardedRef: React.ForwardedRef<HTMLDivElement>
+      forwardedRef: React.ForwardedRef<HTMLDivElement>,
     ) => {
       const l = useLocale();
 
@@ -137,7 +137,7 @@ const withFilter = <T extends WrappedComponentProps>(
             if (multiColumn) {
               const colSpan = React.isValidElement(tableHeader)
                 ? /* istanbul ignore next */ React.Children.count(
-                    tableHeader?.props?.children
+                    tableHeader?.props?.children,
                   )
                 : 1;
               return (
@@ -183,7 +183,7 @@ const withFilter = <T extends WrappedComponentProps>(
           {getFilteredChildren()}
         </WrappedComponent>
       );
-    }
+    },
   );
 
   FilteredComponent.displayName = "FilteredComponent";
diff --git a/src/components/select/__internal__/utils/with-filter.test.tsx b/src/components/select/__internal__/utils/with-filter.test.tsx
index 51f2e2cd1c..b98a0ff3fe 100644
--- a/src/components/select/__internal__/utils/with-filter.test.tsx
+++ b/src/components/select/__internal__/utils/with-filter.test.tsx
@@ -99,7 +99,7 @@ test("renders custom no results message when no options match filterText and noR
 
 test("renders custom no results message when no option rows match filterText and noResultsMessage prop is provided", () => {
   render(
-    <FilterableTable filterText="xyz" noResultsMessage="custom message" />
+    <FilterableTable filterText="xyz" noResultsMessage="custom message" />,
   );
 
   expect(screen.queryAllByRole("option")).toHaveLength(0);
diff --git a/src/components/select/filterable-select/components.test-pw.tsx b/src/components/select/filterable-select/components.test-pw.tsx
index 91f74de1b6..67a5c8ed9a 100644
--- a/src/components/select/filterable-select/components.test-pw.tsx
+++ b/src/components/select/filterable-select/components.test-pw.tsx
@@ -10,7 +10,7 @@ import Dialog from "../../dialog";
 import Button from "../../button";
 
 export const FilterableSelectComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const [value, setValue] = useState("");
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
@@ -46,7 +46,7 @@ export const FilterableSelectComponent = (
 };
 
 export const FilterableSelectWithLazyLoadingComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const [value, setValue] = useState("black");
@@ -90,7 +90,7 @@ export const FilterableSelectWithLazyLoadingComponent = (
 };
 
 export const FilterableSelectLazyLoadTwiceComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const [value, setValue] = useState("");
@@ -139,7 +139,7 @@ export const FilterableSelectLazyLoadTwiceComponent = (
 };
 
 export const FilterableSelectWithInfiniteScrollComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const preventLazyLoading = useRef(false);
@@ -217,7 +217,7 @@ export const FilterableSelectWithInfiniteScrollComponent = (
 };
 
 export const FilterableSelectObjectAsValueComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const optionListValues = [
     { id: "Amber", value: 1, text: "Amber" },
@@ -234,11 +234,11 @@ export const FilterableSelectObjectAsValueComponent = (
   ];
 
   const [value, setValue] = useState<Record<string, unknown>>(
-    optionListValues[4]
+    optionListValues[4],
   );
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as Record<string, unknown>);
+    setValue(event.target.value as unknown as Record<string, unknown>);
   }
   return (
     <FilterableSelect
@@ -255,7 +255,7 @@ export const FilterableSelectObjectAsValueComponent = (
 };
 
 export const FilterableSelectMultiColumnsComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   return (
     <FilterableSelect
@@ -307,7 +307,7 @@ export const FilterableSelectMultiColumnsComponent = (
 };
 
 export const FilterableSelectMultiColumnsNestedComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   return (
     <FilterableSelect
@@ -441,7 +441,7 @@ export const FilterableSelectOnChangeEventComponent = ({
 };
 
 export const FilterableSelectListActionEventComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const [value, setValue] = useState("");
   return (
@@ -638,7 +638,7 @@ export const WithObjectAsValue = () => {
   ]);
 
   const [value, setValue] = useState<Record<string, unknown>>(
-    optionListValues.current[4]
+    optionListValues.current[4],
   );
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
diff --git a/src/components/select/filterable-select/filterable-select-test.stories.tsx b/src/components/select/filterable-select/filterable-select-test.stories.tsx
index 0f50fdbd4a..135247989d 100644
--- a/src/components/select/filterable-select/filterable-select-test.stories.tsx
+++ b/src/components/select/filterable-select/filterable-select-test.stories.tsx
@@ -99,7 +99,7 @@ export const DefaultStory = () => (
 DefaultStory.storyName = "default";
 
 export const FilterableSelectComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const [value, setValue] = useState("");
 
@@ -137,7 +137,7 @@ export const FilterableSelectComponent = (
 };
 
 export const FilterableSelectWithLazyLoadingComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const [value, setValue] = useState("black");
@@ -185,7 +185,7 @@ export const FilterableSelectWithLazyLoadingComponent = (
 };
 
 export const FilterableSelectLazyLoadTwiceComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const [value, setValue] = useState("");
@@ -236,7 +236,7 @@ export const FilterableSelectLazyLoadTwiceComponent = (
 };
 
 export const FilterableSelectWithInfiniteScrollComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const preventLazyLoading = useRef(false);
@@ -322,7 +322,7 @@ export const FilterableSelectWithInfiniteScrollComponent = (
 };
 
 export const FilterableSelectObjectAsValueComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const optionListValues = [
     { id: "Amber", value: 1, text: "Amber" },
@@ -339,11 +339,11 @@ export const FilterableSelectObjectAsValueComponent = (
   ];
 
   const [value, setValue] = useState<Record<string, unknown>>(
-    optionListValues[4]
+    optionListValues[4],
   );
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as Record<string, unknown>);
+    setValue(event.target.value as unknown as Record<string, unknown>);
   }
   return (
     <FilterableSelect
@@ -360,7 +360,7 @@ export const FilterableSelectObjectAsValueComponent = (
 };
 
 export const FilterableSelectMultiColumnsComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   return (
     <FilterableSelect
@@ -412,7 +412,7 @@ export const FilterableSelectMultiColumnsComponent = (
 };
 
 export const FilterableSelectMultiColumnsNestedComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   return (
     <FilterableSelect
@@ -550,7 +550,7 @@ export const FilterableSelectOnChangeEventComponent = ({
 };
 
 export const FilterableSelectListActionEventComponent = (
-  props: Partial<FilterableSelectProps>
+  props: Partial<FilterableSelectProps>,
 ) => {
   const [value, setValue] = useState("");
 
diff --git a/src/components/select/filterable-select/filterable-select.component.tsx b/src/components/select/filterable-select/filterable-select.component.tsx
index 8a2bbd8833..57eb9e9c17 100644
--- a/src/components/select/filterable-select/filterable-select.component.tsx
+++ b/src/components/select/filterable-select/filterable-select.component.tsx
@@ -92,7 +92,7 @@ export interface FilterableSelectProps
   required?: boolean;
   /** Specify a callback triggered on change */
   onChange?: (
-    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>
+    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>,
   ) => void;
   /** Override the default width of the list element. Number passed is converted into pixel value */
   listWidth?: number;
@@ -144,7 +144,7 @@ export const FilterableSelect = React.forwardRef<
       listWidth,
       ...textboxProps
     },
-    ref
+    ref,
   ) => {
     const [activeDescendantId, setActiveDescendantId] = useState<string>();
     const selectListId = useRef(guid());
@@ -178,7 +178,7 @@ export const FilterableSelect = React.forwardRef<
     if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
@@ -195,25 +195,25 @@ export const FilterableSelect = React.forwardRef<
 
         return customEvent as CustomSelectChangeEvent;
       },
-      [name, id]
+      [name, id],
     );
 
     const triggerChange = useCallback(
       (
         newValue: string | Record<string, unknown>,
-        selectionConfirmed: boolean
+        selectionConfirmed: boolean,
       ) => {
         /* istanbul ignore else */
         if (onChange) {
           onChange(createCustomEvent(newValue, selectionConfirmed));
         }
       },
-      [onChange, createCustomEvent]
+      [onChange, createCustomEvent],
     );
 
     function findElementWithMatchingText(
       textToMatch: string,
-      list: React.ReactNode
+      list: React.ReactNode,
     ) {
       return React.Children.toArray(list).find((child) => {
         const { text } = (child as React.ReactElement).props;
@@ -228,7 +228,7 @@ export const FilterableSelect = React.forwardRef<
           const trimmed = newFilterText.trimStart();
           const match = findElementWithMatchingText(
             trimmed,
-            children
+            children,
           ) as React.ReactElement;
           const isFilterCleared = isDeleteEvent && !newFilterText.length;
 
@@ -267,16 +267,16 @@ export const FilterableSelect = React.forwardRef<
           return match.props.value;
         });
       },
-      [children, triggerChange]
+      [children, triggerChange],
     );
 
     const setMatchingText = useCallback(
       (newValue, isClosing = false) => {
-        const matchingOption = (React.Children.toArray(
-          children
-        ) as React.ReactElement[]).find(
+        const matchingOption = (
+          React.Children.toArray(children) as React.ReactElement[]
+        ).find(
           (child) =>
-            React.isValidElement(child) && isExpectedOption(child, newValue)
+            React.isValidElement(child) && isExpectedOption(child, newValue),
         );
 
         if (!matchingOption || matchingOption.props.text === undefined) {
@@ -295,7 +295,7 @@ export const FilterableSelect = React.forwardRef<
           setTextValue(matchingOption.props.text);
         }
       },
-      [children, filterText]
+      [children, filterText],
     );
 
     const handleTextboxChange = useCallback(
@@ -310,7 +310,7 @@ export const FilterableSelect = React.forwardRef<
         setFilterText(newValue);
         setOpen(true);
       },
-      [updateValues]
+      [updateValues],
     );
 
     const fillLastFilterCharacter = useCallback(
@@ -326,7 +326,7 @@ export const FilterableSelect = React.forwardRef<
           return previousFilterText;
         });
       },
-      [textValue]
+      [textValue],
     );
 
     const handleTextboxKeydown = useCallback(
@@ -348,7 +348,7 @@ export const FilterableSelect = React.forwardRef<
 
         fillLastFilterCharacter(key);
       },
-      [fillLastFilterCharacter, onKeyDown, readOnly]
+      [fillLastFilterCharacter, onKeyDown, readOnly],
     );
 
     const valueToUse = isControlled.current ? value : selectedValue;
@@ -367,7 +367,7 @@ export const FilterableSelect = React.forwardRef<
           setOpen(false);
         }
       },
-      [setMatchingText, valueToUse]
+      [setMatchingText, valueToUse],
     );
 
     useEffect(() => {
@@ -379,11 +379,11 @@ export const FilterableSelect = React.forwardRef<
 
       invariant(
         isControlled.current === (value !== undefined),
-        modeSwitchedMessage
+        modeSwitchedMessage,
       );
       invariant(
         !isControlled.current || (isControlled.current && onChange),
-        onChangeMissingMessage
+        onChangeMissingMessage,
       );
       if (isControlled.current) {
         setSelectedValue((prevValue) => {
@@ -423,7 +423,7 @@ export const FilterableSelect = React.forwardRef<
 
       invariant(
         !hasListActionButton || (hasListActionButton && onListAction),
-        onListActionMissingMessage
+        onListActionMissingMessage,
       );
     }, [listActionButton, onListAction]);
 
@@ -436,7 +436,7 @@ export const FilterableSelect = React.forwardRef<
     }, [value, children]);
 
     const onFilterChange = useStableCallback(
-      onFilterChangeProp as (filterTextArg: unknown) => void
+      onFilterChangeProp as (filterTextArg: unknown) => void,
     );
 
     const isFirstRender = useRef(true);
@@ -513,7 +513,7 @@ export const FilterableSelect = React.forwardRef<
           openOnFocusFlagBlock.current = false;
         }
       },
-      [textboxRef, triggerChange, openOnFocus]
+      [textboxRef, triggerChange, openOnFocus],
     );
 
     const onSelectListClose = useCallback(() => {
@@ -532,7 +532,7 @@ export const FilterableSelect = React.forwardRef<
     }
 
     function handleDropdownIconClick(
-      event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+      event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
     ) {
       isMouseDownReported.current = false;
 
@@ -635,7 +635,7 @@ export const FilterableSelect = React.forwardRef<
           ref.current = element;
         }
       },
-      [ref]
+      [ref],
     );
 
     function getTextboxProps() {
@@ -738,7 +738,7 @@ export const FilterableSelect = React.forwardRef<
         {selectList}
       </StyledSelect>
     );
-  }
+  },
 );
 
 export default FilterableSelect;
diff --git a/src/components/select/filterable-select/filterable-select.pw.tsx b/src/components/select/filterable-select/filterable-select.pw.tsx
index 9ffbc63790..ac1847eadb 100644
--- a/src/components/select/filterable-select/filterable-select.pw.tsx
+++ b/src/components/select/filterable-select/filterable-select.pw.tsx
@@ -75,11 +75,11 @@ test.describe("When focused", () => {
     await inputElement.focus();
     await expect(inputElement.locator("..")).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(inputElement.locator("..")).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -96,7 +96,7 @@ test.describe("When focused", () => {
     await inputElement.focus();
     await expect(inputElement.locator("..")).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 });
@@ -167,7 +167,7 @@ test.describe("FilterableSelect component", () => {
 
       await expect(selectInput(page)).toHaveAttribute(
         "placeholder",
-        placeholderValue
+        placeholderValue,
       );
     });
   });
@@ -180,7 +180,7 @@ test.describe("FilterableSelect component", () => {
 
     await expect(commonDataElementInputPreview(page)).toHaveAttribute(
       "name",
-      testPropValue
+      testPropValue,
     );
   });
 
@@ -200,7 +200,7 @@ test.describe("FilterableSelect component", () => {
     await mount(<FilterableSelectComponent data-component={testPropValue} />);
 
     await expect(
-      selectElementInput(page).locator("..").locator("..")
+      selectElementInput(page).locator("..").locator(".."),
     ).toHaveAttribute("data-component", testPropValue);
   });
 
@@ -211,7 +211,7 @@ test.describe("FilterableSelect component", () => {
     await mount(<FilterableSelectComponent data-element={testPropValue} />);
 
     await expect(
-      selectElementInput(page).locator("..").locator("..")
+      selectElementInput(page).locator("..").locator(".."),
     ).toHaveAttribute("data-element", testPropValue);
   });
 
@@ -222,16 +222,18 @@ test.describe("FilterableSelect component", () => {
     await mount(<FilterableSelectComponent data-role={testPropValue} />);
 
     await expect(
-      selectElementInput(page).locator("..").locator("..")
+      selectElementInput(page).locator("..").locator(".."),
     ).toHaveAttribute("data-role", testPropValue);
   });
 
-  ([
-    ["top", "200px", "0px", "0px", "0px"],
-    ["bottom", "0px", "0px", "0px", "0px"],
-    ["left", "200px", "0px", "200px", "0px"],
-    ["right", "200px", "0px", "0px", "200px"],
-  ] as const).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "200px", "0px", "0px", "0px"],
+      ["bottom", "0px", "0px", "0px", "0px"],
+      ["left", "200px", "0px", "200px", "0px"],
+      ["right", "200px", "0px", "0px", "200px"],
+    ] as const
+  ).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
     test(`should render the help tooltip in the ${tooltipPositionValue} position`, async ({
       mount,
       page,
@@ -244,7 +246,7 @@ test.describe("FilterableSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await helpIcon(page).hover();
@@ -252,7 +254,7 @@ test.describe("FilterableSelect component", () => {
       await expect(tooltipElement).toBeVisible();
       await expect(tooltipElement).toHaveAttribute(
         "data-placement",
-        tooltipPositionValue
+        tooltipPositionValue,
       );
     });
   });
@@ -271,7 +273,7 @@ test.describe("FilterableSelect component", () => {
     await expect(dropdownButtonElement).toBeVisible();
     await expect(dropdownButtonElement).toHaveCSS(
       "color",
-      "rgba(0, 0, 0, 0.3)"
+      "rgba(0, 0, 0, 0.3)",
     );
   });
 
@@ -290,15 +292,17 @@ test.describe("FilterableSelect component", () => {
     await expect(dropdownButtonElement).toBeVisible();
     await expect(dropdownButtonElement).toHaveCSS(
       "color",
-      "rgba(0, 0, 0, 0.3)"
+      "rgba(0, 0, 0, 0.3)",
     );
   });
 
-  ([
-    [SIZE.SMALL, "32px"],
-    [SIZE.MEDIUM, "40px"],
-    [SIZE.LARGE, "48px"],
-  ] as [FilterableSelectProps["size"], string][]).forEach(([size, height]) => {
+  (
+    [
+      [SIZE.SMALL, "32px"],
+      [SIZE.MEDIUM, "40px"],
+      [SIZE.LARGE, "48px"],
+    ] as [FilterableSelectProps["size"], string][]
+  ).forEach(([size, height]) => {
     test(`should use ${size} as size and render with ${height} as height`, async ({
       mount,
       page,
@@ -307,7 +311,7 @@ test.describe("FilterableSelect component", () => {
 
       await expect(commonDataElementInputPreview(page).locator("..")).toHaveCSS(
         "min-height",
-        height
+        height,
       );
     });
   });
@@ -329,15 +333,17 @@ test.describe("FilterableSelect component", () => {
 
     await expect(getDataElementByValue(page, "label").locator("..")).toHaveCSS(
       "-webkit-box-pack",
-      "end"
+      "end",
     );
   });
 
-  ([
-    ["flex", 399],
-    ["flex", 400],
-    ["block", 401],
-  ] as [string, number][]).forEach(([displayValue, breakpoint]) => {
+  (
+    [
+      ["flex", 399],
+      ["flex", 400],
+      ["block", 401],
+    ] as [string, number][]
+  ).forEach(([displayValue, breakpoint]) => {
     test(`should check label alignment is ${displayValue} with adaptiveLabelBreakpoint ${breakpoint} and viewport 400`, async ({
       mount,
       page,
@@ -350,39 +356,39 @@ test.describe("FilterableSelect component", () => {
         <FilterableSelectComponent
           labelInline
           adaptiveLabelBreakpoint={breakpoint}
-        />
+        />,
       );
 
       await expect(
-        getDataElementByValue(page, "label").locator("..").locator("..")
+        getDataElementByValue(page, "label").locator("..").locator(".."),
       ).toHaveCSS("display", displayValue);
     });
   });
 
-  ([
-    ["right", "end"],
-    ["left", "start"],
-  ] as [FilterableSelectProps["labelAlign"], string][]).forEach(
-    ([alignment, cssProp]) => {
-      test(`should use ${alignment} as labelAligment and render with flex-${cssProp} as css properties`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <FilterableSelectComponent labelInline labelAlign={alignment} />
-        );
+  (
+    [
+      ["right", "end"],
+      ["left", "start"],
+    ] as [FilterableSelectProps["labelAlign"], string][]
+  ).forEach(([alignment, cssProp]) => {
+    test(`should use ${alignment} as labelAligment and render with flex-${cssProp} as css properties`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <FilterableSelectComponent labelInline labelAlign={alignment} />,
+      );
 
-        const labelParentElement = getDataElementByValue(page, "label").locator(
-          ".."
-        );
-        await expect(labelParentElement).toHaveCSS("-webkit-box-pack", cssProp);
-        await expect(labelParentElement).toHaveCSS(
-          "justify-content",
-          `flex-${cssProp}`
-        );
-      });
-    }
-  );
+      const labelParentElement = getDataElementByValue(page, "label").locator(
+        "..",
+      );
+      await expect(labelParentElement).toHaveCSS("-webkit-box-pack", cssProp);
+      await expect(labelParentElement).toHaveCSS(
+        "justify-content",
+        `flex-${cssProp}`,
+      );
+    });
+  });
 
   [
     [10, 90, 135, 1229],
@@ -398,18 +404,18 @@ test.describe("FilterableSelect component", () => {
           labelInline
           labelWidth={label}
           inputWidth={input}
-        />
+        />,
       );
 
       await assertCssValueIsApproximately(
         getDataElementByValue(page, "label").locator(".."),
         "width",
-        labelRatio
+        labelRatio,
       );
       await assertCssValueIsApproximately(
         getDataElementByValue(page, "input").locator(".."),
         "width",
-        inputRatio
+        inputRatio,
       );
     });
   });
@@ -419,7 +425,7 @@ test.describe("FilterableSelect component", () => {
       await mount(<FilterableSelectComponent maxWidth={maxWidth} />);
 
       await expect(
-        getDataElementByValue(page, "input").locator("..").locator("..")
+        getDataElementByValue(page, "input").locator("..").locator(".."),
       ).toHaveCSS("max-width", maxWidth);
     });
   });
@@ -431,7 +437,7 @@ test.describe("FilterableSelect component", () => {
     await mount(<FilterableSelectComponent maxWidth="" />);
 
     await expect(
-      getDataElementByValue(page, "input").locator("..").locator("..")
+      getDataElementByValue(page, "input").locator("..").locator(".."),
     ).toHaveCSS("max-width", "100%");
   });
 
@@ -614,7 +620,7 @@ test.describe("FilterableSelect component", () => {
     await dropdownButton(page).click();
     await expect(selectListWrapper(page)).toBeVisible();
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible()),
     );
   });
 
@@ -630,7 +636,7 @@ test.describe("FilterableSelect component", () => {
     await buttonElement.click();
     await expect(wrapperElement).toBeVisible();
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible()),
     );
     await expect(selectOptionByText(page, option)).toBeVisible();
     await buttonElement.click();
@@ -638,7 +644,7 @@ test.describe("FilterableSelect component", () => {
     await buttonElement.click();
     await expect(wrapperElement).toBeVisible();
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible()),
     );
   });
 
@@ -653,7 +659,7 @@ test.describe("FilterableSelect component", () => {
     await dropdownButton(page).click();
     await expect(selectListWrapperElement).toBeVisible();
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible()),
     );
     await expect(selectOptionByText(page, option)).toHaveCount(0);
     await page.waitForTimeout(2000);
@@ -662,7 +668,7 @@ test.describe("FilterableSelect component", () => {
     });
     await page.waitForTimeout(250);
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).not.toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).not.toBeVisible()),
     );
     await expect(await selectOptionByText(page, option)).toBeVisible();
   });
@@ -687,12 +693,12 @@ test.describe("FilterableSelect component", () => {
     await dropdownButton(page).click();
     await scrollableWrapper.evaluate((wrapper) => wrapper.scrollBy(0, 500));
     const scrollPositionBeforeLoad = await scrollableWrapper.evaluate(
-      (element) => element.scrollTop
+      (element) => element.scrollTop,
     );
 
     await selectOptionByText(page, "Lazy Loaded A1").waitFor();
     const scrollPositionAfterLoad = await scrollableWrapper.evaluate(
-      (element) => element.scrollTop
+      (element) => element.scrollTop,
     );
     await expect(scrollPositionAfterLoad).toBe(scrollPositionBeforeLoad);
   });
@@ -785,7 +791,7 @@ test.describe("FilterableSelect component", () => {
 
     await expect(optionElement).toHaveCSS(
       "background-color",
-      "rgb(153, 173, 183)"
+      "rgb(153, 173, 183)",
     );
   });
 
@@ -807,7 +813,7 @@ test.describe("FilterableSelect component", () => {
     const optionElement = selectOptionByText(page, "Green");
     await expect(optionElement).toHaveCSS(
       "background-color",
-      "rgba(0, 0, 0, 0)"
+      "rgba(0, 0, 0, 0)",
     );
   });
 
@@ -829,7 +835,7 @@ test.describe("FilterableSelect component", () => {
     const optionElement = selectOptionByText(page, "Green");
     await expect(optionElement).toHaveCSS(
       "background-color",
-      "rgba(0, 0, 0, 0)"
+      "rgba(0, 0, 0, 0)",
     );
   });
 
@@ -862,16 +868,18 @@ test.describe("FilterableSelect component", () => {
     await expect(wrapperElement).toBeVisible();
   });
 
-  ([
-    ["top", "0px", "0px", "0px", "20px"],
-    ["bottom", "600px", "0px", "0px", "20px"],
-  ] as [
-    FilterableSelectProps["listPlacement"],
-    string,
-    string,
-    string,
-    string
-  ][]).forEach(([position, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "0px", "0px", "0px", "20px"],
+      ["bottom", "600px", "0px", "0px", "20px"],
+    ] as [
+      FilterableSelectProps["listPlacement"],
+      string,
+      string,
+      string,
+      string,
+    ][]
+  ).forEach(([position, top, bottom, left, right]) => {
     test(`should flip list to opposite position when there is not enough space to render in ${position} position`, async ({
       mount,
       page,
@@ -884,7 +892,7 @@ test.describe("FilterableSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       let flipPosition = "";
@@ -898,7 +906,7 @@ test.describe("FilterableSelect component", () => {
       const listElement = selectListPosition(page);
       await expect(listElement).toHaveAttribute(
         "data-floating-placement",
-        flipPosition
+        flipPosition,
       );
       await expect(listElement).toBeVisible();
     });
@@ -915,14 +923,14 @@ test.describe("FilterableSelect component", () => {
       page,
     }) => {
       await mount(
-        <FilterableSelectComponent mt={top} mb={bottom} ml={left} mr={right} />
+        <FilterableSelectComponent mt={top} mb={bottom} ml={left} mr={right} />,
       );
 
       await dropdownButton(page).click();
       const listElement = selectListPosition(page);
       await expect(listElement).toHaveAttribute(
         "data-floating-placement",
-        position
+        position,
       );
       await expect(listElement).toBeVisible();
     });
@@ -950,7 +958,7 @@ test.describe("FilterableSelect component", () => {
     }
     await expect(multiColumnsSelectListRow(page)).toHaveCSS(
       "background-color",
-      "rgb(153, 173, 183)"
+      "rgb(153, 173, 183)",
     );
   });
 
@@ -989,11 +997,11 @@ test.describe("FilterableSelect component", () => {
       const highlightedValue = boldedAndUnderlinedValue(page, text);
       await expect(highlightedValue).toHaveCSS(
         "text-decoration-line",
-        "underline"
+        "underline",
       );
       await expect(highlightedValue).toHaveCSS(
         "text-decoration-style",
-        "solid"
+        "solid",
       );
       await expect(highlightedValue).toHaveCSS("font-weight", "500");
     });
@@ -1019,7 +1027,7 @@ test.describe("FilterableSelect component", () => {
     }
     await Promise.all(assertions);
     await expect(
-      multiColumnsSelectListNoResultsMessage(page, text)
+      multiColumnsSelectListNoResultsMessage(page, text),
     ).toBeVisible();
   });
 
@@ -1080,12 +1088,11 @@ test.describe("FilterableSelect component", () => {
     await dropdownButton(page).click();
     await expect(selectListWrapper(page)).toBeVisible();
     await expect(filterableSelectAddElementButton(page)).toBeInViewport();
-    const selectListHeight = await selectListWrapper(
-      page
-    ).evaluate((wrapperElement) =>
-      parseInt(
-        window.getComputedStyle(wrapperElement).getPropertyValue("height")
-      )
+    const selectListHeight = await selectListWrapper(page).evaluate(
+      (wrapperElement) =>
+        parseInt(
+          window.getComputedStyle(wrapperElement).getPropertyValue("height"),
+        ),
     );
     await expect(selectListHeight).toBeGreaterThan(220);
     await expect(selectListHeight).toBeLessThan(250);
@@ -1146,7 +1153,7 @@ test.describe("FilterableSelect component", () => {
     await optionElement.hover();
     await expect(optionElement).toHaveCSS(
       "background-color",
-      "rgb(204, 214, 219)"
+      "rgb(204, 214, 219)",
     );
   });
 
@@ -1175,7 +1182,7 @@ test.describe("FilterableSelect component", () => {
 
     await dropdownButton(page).click();
     await expect(
-      multiColumnsSelectListBody(page).locator("..")
+      multiColumnsSelectListBody(page).locator(".."),
     ).toHaveAttribute("data-component", "option-row");
   });
 
@@ -1187,7 +1194,7 @@ test.describe("FilterableSelect component", () => {
 
     await dropdownButton(page).click();
     await expect(
-      multiColumnsSelectListBody(page).locator("..")
+      multiColumnsSelectListBody(page).locator(".."),
     ).toHaveAttribute("data-role", "option-row");
   });
 
@@ -1199,7 +1206,7 @@ test.describe("FilterableSelect component", () => {
 
     await dropdownButton(page).click();
     await expect(
-      multiColumnsSelectListBody(page).locator("..")
+      multiColumnsSelectListBody(page).locator(".."),
     ).toHaveAttribute("data-element", "option-row");
   });
 
@@ -1219,7 +1226,7 @@ test.describe("FilterableSelect component", () => {
     await dropdownButton(page).click();
     await expect(selectOptionByText(page, listOption)).toHaveAttribute(
       "data-component",
-      "option"
+      "option",
     );
   });
 
@@ -1232,7 +1239,7 @@ test.describe("FilterableSelect component", () => {
     await dropdownButton(page).click();
     await expect(selectOptionByText(page, listOption)).toHaveAttribute(
       "data-role",
-      "option1"
+      "option1",
     );
   });
 
@@ -1245,7 +1252,7 @@ test.describe("FilterableSelect component", () => {
     await dropdownButton(page).click();
     await expect(selectOptionByText(page, listOption)).toHaveAttribute(
       "data-element",
-      "option1"
+      "option1",
     );
   });
 });
@@ -1376,7 +1383,7 @@ test.describe("Check events for FilterableSelect component", () => {
       callbackArguments.push(e);
     };
     await mount(
-      <FilterableSelectOnChangeEventComponent onFilterChange={callback} />
+      <FilterableSelectOnChangeEventComponent onFilterChange={callback} />,
     );
 
     const text = "B";
@@ -1396,7 +1403,7 @@ test.describe("Check events for FilterableSelect component", () => {
       callbackCount += 1;
     };
     await mount(
-      <FilterableSelectListActionEventComponent onListAction={callback} />
+      <FilterableSelectListActionEventComponent onListAction={callback} />,
     );
 
     await dropdownButton(page).click();
@@ -1416,7 +1423,7 @@ test.describe("Check events for FilterableSelect component", () => {
 
     await dropdownButton(page).click();
     await selectListScrollableWrapper(page).evaluate((wrapper) =>
-      wrapper.scrollBy(0, 500)
+      wrapper.scrollBy(0, 500),
     );
     await page.waitForTimeout(250);
     await expect(callbackCount).toBe(1);
@@ -1450,7 +1457,7 @@ test.describe("Check events for FilterableSelect component", () => {
 
     await dropdownButton(page).click();
     await selectListScrollableWrapper(page).evaluate((wrapper) =>
-      wrapper.scrollBy(0, 500)
+      wrapper.scrollBy(0, 500),
     );
     await selectOption(page, positionOfElement("first")).click();
     await dropdownButton(page).click();
@@ -1481,7 +1488,7 @@ test.describe("Check virtual scrolling", () => {
 
     await dropdownButton(page).click();
     await selectListScrollableWrapper(page).evaluate((wrapper) =>
-      wrapper.scrollTo(0, 750)
+      wrapper.scrollTo(0, 750),
     );
     await page.waitForTimeout(250);
     await expect(selectOptionByText(page, "Option 1.")).toHaveCount(0);
@@ -1568,23 +1575,23 @@ test.describe("Selection confirmed", () => {
     await dropdownButton(page).click();
     await selectOptionByText(page, "One").click();
     await expect(
-      page.locator('[data-element="confirmed-selection-1"]')
+      page.locator('[data-element="confirmed-selection-1"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await selectOptionByText(page, "Five").click();
     await expect(
-      page.locator('[data-element="confirmed-selection-1"]')
+      page.locator('[data-element="confirmed-selection-1"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await selectOptionByText(page, "Seven").click();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-7"]')
+      page.locator('[data-element="confirmed-selection-7"]'),
     ).toBeVisible();
   });
 
@@ -1599,7 +1606,7 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("ArrowDown");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-1"]')
+      page.locator('[data-element="confirmed-selection-1"]'),
     ).toBeVisible();
     // to work around a race condition in the keydown handler, we fire a click first to ensure React knows the SelectList is open.
     // This ensures the down-arrow press moves to the next option when the test runs.
@@ -1608,29 +1615,29 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("ArrowDown");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-1"]')
+      page.locator('[data-element="confirmed-selection-1"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-3"]')
+      page.locator('[data-element="confirmed-selection-3"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await inputElement.press("ArrowDown");
     await inputElement.press("ArrowDown");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-3"]')
+      page.locator('[data-element="confirmed-selection-3"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await inputElement.press("ArrowDown");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-6"]')
+      page.locator('[data-element="confirmed-selection-6"]'),
     ).toBeVisible();
   });
 
@@ -1645,7 +1652,7 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("ArrowUp");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-9"]')
+      page.locator('[data-element="confirmed-selection-9"]'),
     ).toBeVisible();
     // to work around a race condition in the keydown handler, we fire a click first to ensure React knows the SelectList is open.
     // This ensures the up-arrow press moves to the next option when the test runs.
@@ -1654,29 +1661,29 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("ArrowUp");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-9"]')
+      page.locator('[data-element="confirmed-selection-9"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-7"]')
+      page.locator('[data-element="confirmed-selection-7"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await inputElement.press("ArrowUp");
     await inputElement.press("ArrowUp");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-7"]')
+      page.locator('[data-element="confirmed-selection-7"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await inputElement.press("ArrowUp");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-4"]')
+      page.locator('[data-element="confirmed-selection-4"]'),
     ).toBeVisible();
   });
 
@@ -1690,11 +1697,11 @@ test.describe("Selection confirmed", () => {
     const inputElement = selectInput(page);
     await inputElement.type("th");
     await expect(
-      page.locator('[data-element="confirmed-selection-3"]')
+      page.locator('[data-element="confirmed-selection-3"]'),
     ).not.toBeVisible();
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-3"]')
+      page.locator('[data-element="confirmed-selection-3"]'),
     ).toBeVisible();
   });
 
@@ -1711,7 +1718,7 @@ test.describe("Selection confirmed", () => {
     // the span with the data-element prop exists but has size 0 due to having no text content - which Playwright
     // counts as not being visible
     await expect(
-      await page.locator('[data-element^="confirmed-selection-"]').count()
+      await page.locator('[data-element^="confirmed-selection-"]').count(),
     ).toBe(0);
   });
 });
@@ -1721,7 +1728,7 @@ test("should not throw when filter text does not match option text", async ({
   page,
 }) => {
   await mount(
-    <FilterableSelectComponent value={undefined} onChange={undefined} />
+    <FilterableSelectComponent value={undefined} onChange={undefined} />,
   );
 
   await commonDataElementInputPreview(page).type("abc");
@@ -1740,12 +1747,12 @@ test("should not select a disabled option when a filter is typed", async ({
   await inputElement.type("t");
   await inputElement.press("Enter");
   await expect(
-    page.locator('[data-element="confirmed-selection-2"]')
+    page.locator('[data-element="confirmed-selection-2"]'),
   ).not.toBeVisible();
   await inputElement.press("ArrowDown");
   await inputElement.press("Enter");
   await expect(
-    page.locator('[data-element="confirmed-selection-3"]')
+    page.locator('[data-element="confirmed-selection-3"]'),
   ).toBeVisible();
 });
 
@@ -1759,7 +1766,7 @@ test.describe("Test for scroll bug regression", () => {
     const dropdownButtonElement = dropdownButton(page);
     await dropdownButtonElement.click();
     await selectListScrollableWrapper(page).evaluate((wrapper) =>
-      wrapper.scrollBy(0, 500)
+      wrapper.scrollBy(0, 500),
     );
     await commonDataElementInputPreview(page).press("Escape");
     await dropdownButtonElement.click();
@@ -1815,18 +1822,20 @@ test.describe("Accessibility tests for FilterableSelect component", () => {
     });
   });
 
-  ([
-    ["top", "200px", "0px", "0px", "0px"],
-    ["bottom", "0px", "0px", "0px", "0px"],
-    ["left", "200px", "0px", "200px", "0px"],
-    ["right", "200px", "0px", "0px", "200px"],
-  ] as [
-    FilterableSelectProps["tooltipPosition"],
-    string,
-    string,
-    string,
-    string
-  ][]).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "200px", "0px", "0px", "0px"],
+      ["bottom", "0px", "0px", "0px", "0px"],
+      ["left", "200px", "0px", "200px", "0px"],
+      ["right", "200px", "0px", "0px", "200px"],
+    ] as [
+      FilterableSelectProps["tooltipPosition"],
+      string,
+      string,
+      string,
+      string,
+    ][]
+  ).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
     test(`should pass accessibility tests with tooltip prop in the ${tooltipPositionValue} position`, async ({
       mount,
       page,
@@ -1839,7 +1848,7 @@ test.describe("Accessibility tests for FilterableSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await helpIcon(page).hover();
@@ -1867,11 +1876,9 @@ test.describe("Accessibility tests for FilterableSelect component", () => {
     await checkAccessibility(page);
   });
 
-  ([
-    SIZE.SMALL,
-    SIZE.MEDIUM,
-    SIZE.LARGE,
-  ] as FilterableSelectProps["size"][]).forEach((size) => {
+  (
+    [SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE] as FilterableSelectProps["size"][]
+  ).forEach((size) => {
     test(`should pass accessibility tests with size prop as ${size}`, async ({
       mount,
       page,
@@ -1922,7 +1929,7 @@ test.describe("Accessibility tests for FilterableSelect component", () => {
         <FilterableSelectComponent
           labelInline
           adaptiveLabelBreakpoint={breakpoint}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -1936,12 +1943,12 @@ test.describe("Accessibility tests for FilterableSelect component", () => {
         page,
       }) => {
         await mount(
-          <FilterableSelectComponent labelInline labelAlign={alignment} />
+          <FilterableSelectComponent labelInline labelAlign={alignment} />,
         );
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [
@@ -1958,7 +1965,7 @@ test.describe("Accessibility tests for FilterableSelect component", () => {
           labelInline
           labelWidth={label}
           inputWidth={input}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -1998,7 +2005,7 @@ test.describe("Accessibility tests for FilterableSelect component", () => {
     // wait for content to finish loading before scrolling
     await expect(selectOptionByText(page, "Amber")).toBeVisible();
     await selectListScrollableWrapper(page).evaluate((wrapper) =>
-      wrapper.scrollBy(0, 500)
+      wrapper.scrollBy(0, 500),
     );
     await checkAccessibility(page, undefined, "scrollable-region-focusable");
   });
@@ -2033,16 +2040,18 @@ test.describe("Accessibility tests for FilterableSelect component", () => {
     await checkAccessibility(page, undefined, "scrollable-region-focusable");
   });
 
-  ([
-    ["top", "0px", "0px", "0px", "20px"],
-    ["bottom", "600px", "0px", "0px", "20px"],
-  ] as [
-    FilterableSelectProps["listPlacement"],
-    string,
-    string,
-    string,
-    string
-  ][]).forEach(([position, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "0px", "0px", "0px", "20px"],
+      ["bottom", "600px", "0px", "0px", "20px"],
+    ] as [
+      FilterableSelectProps["listPlacement"],
+      string,
+      string,
+      string,
+      string,
+    ][]
+  ).forEach(([position, top, bottom, left, right]) => {
     test(`should pass accessibility tests with flipEnabled prop and listPlacement set to ${position}`, async ({
       mount,
       page,
@@ -2055,7 +2064,7 @@ test.describe("Accessibility tests for FilterableSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await dropdownButton(page).click();
diff --git a/src/components/select/filterable-select/filterable-select.stories.tsx b/src/components/select/filterable-select/filterable-select.stories.tsx
index 6e97b4284b..e4608ee7e7 100644
--- a/src/components/select/filterable-select/filterable-select.stories.tsx
+++ b/src/components/select/filterable-select/filterable-select.stories.tsx
@@ -615,7 +615,7 @@ export const WithObjectAsValue: Story = () => {
   ]);
 
   const [value, setValue] = useState<Record<string, unknown>>(
-    optionListValues.current[4]
+    optionListValues.current[4],
   );
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
@@ -696,7 +696,7 @@ export const ValidationsStringNewDesign: Story = () => {
               <Option text="Yellow" value="11" />
             </FilterableSelect>
           </Box>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
@@ -806,9 +806,9 @@ export const CustomFilterAndOptionStyle: Story = () => {
         ({ text }) =>
           !filterText ||
           (filterText.trim().length &&
-            text.toLowerCase().includes(filterText.trim().toLowerCase()))
+            text.toLowerCase().includes(filterText.trim().toLowerCase())),
       ),
-    [filterText]
+    [filterText],
   );
 
   const handleChange = useCallback((e: CustomSelectChangeEvent) => {
@@ -853,9 +853,8 @@ CustomFilterAndOptionStyle.parameters = {
 };
 
 export const ListWidth: Story = () => {
-  const [listPlacement, setListPlacement] = useState<
-    FilterableSelectProps["listPlacement"]
-  >("bottom-end");
+  const [listPlacement, setListPlacement] =
+    useState<FilterableSelectProps["listPlacement"]>("bottom-end");
   const [value, setValue] = useState<string>("");
   const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
     setValue(ev.target.value);
diff --git a/src/components/select/filterable-select/filterable-select.test.tsx b/src/components/select/filterable-select/filterable-select.test.tsx
index 301c9d11f2..ea50cf605e 100644
--- a/src/components/select/filterable-select/filterable-select.test.tsx
+++ b/src/components/select/filterable-select/filterable-select.test.tsx
@@ -29,7 +29,7 @@ testStyledSystemMarginRTL(
       <Option text="Amber" value="1" />
     </FilterableSelect>
   ),
-  () => screen.getByTestId("my-select")
+  () => screen.getByTestId("my-select"),
 );
 
 const FilterableSelectWithState = ({
@@ -64,11 +64,11 @@ test("should display a deprecation warning only once for all instances of compon
       <FilterableSelect label="two" defaultValue="opt1">
         <Option value="opt1" text="red" />
       </FilterableSelect>
-    </>
+    </>,
   );
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
   loggerSpy.mockClear();
@@ -84,7 +84,7 @@ test("should not display deprecation warning about uncontrolled Textbox when par
       placeholder="Select a colour"
     >
       <Option text="Amber" value="1" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(loggerSpy).not.toHaveBeenCalled();
@@ -96,11 +96,11 @@ test("should not display deprecation warning about uncontrolled Textbox when par
   render(
     <FilterableSelect label="Colour" placeholder="Select a colour">
       <Option text="Amber" value="1" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(loggerSpy).not.toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
   loggerSpy.mockClear();
 });
@@ -111,7 +111,7 @@ test("should update the input value when user clicks an option and the component
   render(
     <FilterableSelect>
       <Option value="opt1" text="red" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   const input = screen.getByRole("combobox");
@@ -129,7 +129,7 @@ test("should update the input value to highlight any matching option text when u
   render(
     <FilterableSelect>
       <Option value="opt1" text="green" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   const input = screen.getByRole("combobox") as HTMLInputElement;
@@ -145,7 +145,7 @@ test("should render combobox without text overlay", () => {
   render(
     <FilterableSelect label="Colour" onChange={() => {}} value="">
       <Option text="Amber" value="1" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByRole("combobox")).toBeVisible();
@@ -156,12 +156,12 @@ test("should initially render combobox with placeholder text when props is not p
   render(
     <FilterableSelect label="Colour" onChange={() => {}} value="">
       <Option text="Amber" value="1" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAttribute(
     "placeholder",
-    "Please Select..."
+    "Please Select...",
   );
 });
 
@@ -174,12 +174,12 @@ test("should initially render combobox with custom `placeholder` when prop is pa
       placeholder="Select a colour"
     >
       <Option text="Amber" value="1" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAttribute(
     "placeholder",
-    "Select a colour"
+    "Select a colour",
   );
 });
 
@@ -187,7 +187,7 @@ test("should render combobox with correct accessible name when `label` prop is p
   render(
     <FilterableSelect label="Colour" onChange={() => {}} value="">
       <Option text="Amber" value="1" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAccessibleName("Colour");
@@ -197,7 +197,7 @@ test("should render combobox with correct accessible name when `aria-label` prop
   render(
     <FilterableSelect aria-label="Colour" onChange={() => {}} value="">
       <Option text="Amber" value="1" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAccessibleName("Colour");
@@ -214,7 +214,7 @@ test("combobox has correct accessible name when `aria-labelledby` prop is provid
       >
         <Option text="Amber" value="1" />
       </FilterableSelect>
-    </>
+    </>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAccessibleName("My Select");
@@ -224,7 +224,7 @@ test("should render combobox with no accessible name when none of the relevant p
   render(
     <FilterableSelect onChange={() => {}} value="">
       <Option text="Amber" value="1" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByRole("combobox")).not.toHaveAccessibleName();
@@ -239,7 +239,7 @@ test("should render the input with `type` attribute of 'text'", () => {
       value=""
     >
       <Option value="opt1" text="red" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAttribute("type", "text");
@@ -311,7 +311,7 @@ describe("when the `id` prop is set", () => {
         value=""
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
 
     expect(screen.getByRole("combobox")).toHaveAttribute("id", mockId);
@@ -326,11 +326,11 @@ describe("when the `id` prop is set", () => {
         value=""
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     expect(screen.getByText("filterable-select")).toHaveAttribute(
       "id",
-      `${mockId}-label`
+      `${mockId}-label`,
     );
   });
 
@@ -344,7 +344,7 @@ describe("when the `id` prop is set", () => {
         value=""
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
     const list = await screen.findByRole("listbox");
@@ -360,7 +360,7 @@ describe("when the `id` prop is not set", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
 
     expect(screen.getByRole("combobox")).toHaveAttribute("id", mockedGuid);
@@ -370,12 +370,12 @@ describe("when the `id` prop is not set", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
 
     expect(screen.getByText("filterable-select")).toHaveAttribute(
       "id",
-      `${mockedGuid}-label`
+      `${mockedGuid}-label`,
     );
   });
 
@@ -384,7 +384,7 @@ describe("when the `id` prop is not set", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
     const list = await screen.findByRole("listbox");
@@ -404,11 +404,11 @@ test("should override the default list 'max-height' when `listMaxHeight` passed"
       value=""
     >
       <Option value="opt1" text="red" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   screen.getByRole("combobox").focus();
   const listContainer = await screen.findByTestId(
-    "select-list-scrollable-container"
+    "select-list-scrollable-container",
   );
 
   await waitFor(() => {
@@ -425,12 +425,12 @@ test("should set the `placeholder` text when prop is passed", () => {
       placeholder="Select a colour"
     >
       <Option value="opt1" text="red" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAttribute(
     "placeholder",
-    "Select a colour"
+    "Select a colour",
   );
 });
 
@@ -443,7 +443,7 @@ describe("when controlled", () => {
         value="opt1"
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
 
     expect(screen.getByRole("combobox")).toHaveValue("red");
@@ -458,7 +458,7 @@ describe("when controlled", () => {
         onChange={() => {}}
       >
         <Option value="opt1" text="blue" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
 
     expect(screen.getByRole("combobox")).toHaveValue("");
@@ -468,7 +468,7 @@ describe("when controlled", () => {
     const { rerender } = render(
       <FilterableSelectWithState value="opt2">
         <Option value="opt1" text="blue" />
-      </FilterableSelectWithState>
+      </FilterableSelectWithState>,
     );
 
     expect(screen.getByRole("combobox")).toHaveValue("");
@@ -477,7 +477,7 @@ describe("when controlled", () => {
       <FilterableSelectWithState>
         <Option value="opt1" text="blue" />
         <Option value="opt2" text="red" />
-      </FilterableSelectWithState>
+      </FilterableSelectWithState>,
     );
 
     expect(screen.getByRole("combobox")).toHaveValue("red");
@@ -495,7 +495,7 @@ test("should call `onFocus` callback when input is focused", () => {
       onFocus={onFocusFn}
     >
       <Option value="opt1" text="red" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   screen.getByRole("combobox").focus();
   act(() => jest.runOnlyPendingTimers());
@@ -516,7 +516,7 @@ test("should call `onFocus` callback when input is focused and `openOnFocus` is
       onFocus={onFocusFn}
     >
       <Option value="opt1" text="red" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   screen.getByRole("combobox").focus();
   act(() => jest.runOnlyPendingTimers());
@@ -535,7 +535,7 @@ test("should call `onBlur` callback when input is blurred", () => {
       onBlur={onBlurFn}
     >
       <Option value="opt1" text="red" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   screen.getByRole("combobox").focus();
   screen.getByRole("combobox").blur();
@@ -555,7 +555,7 @@ test("should not call `onBlur` when the user clicks on an option", async () => {
       onBlur={onBlurFn}
     >
       <Option value="opt1" text="red" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   screen.getByRole("combobox").focus();
   await user.click(await screen.findByRole("option", { name: "red" }));
@@ -575,7 +575,7 @@ test("should call `onChange` callback when the user types in the input", async (
       value=""
     >
       <Option value="opt1" text="red" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   await user.type(screen.getByRole("combobox"), "r");
 
@@ -592,7 +592,7 @@ describe("when the input is focused", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
 
@@ -609,7 +609,7 @@ describe("when the input is focused", () => {
         openOnFocus
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
     act(() => jest.runOnlyPendingTimers());
@@ -629,12 +629,12 @@ describe("when the input is focused", () => {
           value=""
         >
           <Option value="opt1" text="red" />
-        </FilterableSelect>
+        </FilterableSelect>,
       );
       await user.type(screen.getByRole("combobox"), key);
 
       expect(await screen.findByRole("listbox")).toBeVisible();
-    }
+    },
   );
 
   it.each(["ArrowDown", "ArrowUp", "Home", "End"])(
@@ -649,12 +649,12 @@ describe("when the input is focused", () => {
           value=""
         >
           <Option value="opt1" text="red" />
-        </FilterableSelect>
+        </FilterableSelect>,
       );
       await user.type(screen.getByRole("textbox"), key);
 
       expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-    }
+    },
   );
 
   it("should not display the list when the user presses the 'Enter' key", async () => {
@@ -662,7 +662,7 @@ describe("when the input is focused", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.type(screen.getByRole("combobox"), "{Enter}");
 
@@ -674,7 +674,7 @@ describe("when the input is focused", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.type(screen.getByRole("combobox"), "r");
 
@@ -687,7 +687,7 @@ describe("when the input is focused", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.type(screen.getByRole("combobox"), "x");
 
@@ -702,7 +702,7 @@ describe("when the user clicks on the input", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
@@ -720,7 +720,7 @@ describe("when the user clicks on the input", () => {
         onClick={onClickFn}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
@@ -738,7 +738,7 @@ describe("when the user clicks on the input", () => {
         onOpen={onOpenFn}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
@@ -751,7 +751,7 @@ describe("when the user clicks on the input", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
     onOpenFn.mockReset();
@@ -770,7 +770,7 @@ describe("when the user clicks on the input", () => {
         value=""
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("textbox"));
 
@@ -787,7 +787,7 @@ describe("when the user clicks on the input", () => {
         value=""
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
@@ -799,7 +799,7 @@ describe("when the user clicks on the input", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
     await user.click(screen.getByRole("combobox"));
@@ -814,7 +814,7 @@ describe("when the user clicks on the input icon", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const icon = within(screen.getByRole("presentation")).getByTestId("icon");
     await user.click(icon);
@@ -832,7 +832,7 @@ describe("when the user clicks on the input icon", () => {
         value=""
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const icon = within(screen.getByRole("presentation")).getByTestId("icon");
     fireEvent.mouseDown(icon);
@@ -847,7 +847,7 @@ describe("when the user clicks on the input icon", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const icon = within(screen.getByRole("presentation")).getByTestId("icon");
     await user.click(icon);
@@ -867,7 +867,7 @@ describe("when the user clicks on the input icon", () => {
         onClick={onClickFn}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const icon = within(screen.getByRole("presentation")).getByTestId("icon");
     await user.click(icon);
@@ -882,13 +882,13 @@ describe("the placement of the list element", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "bottom"
+      "bottom",
     );
   });
 
@@ -902,13 +902,13 @@ describe("the placement of the list element", () => {
         listPlacement="top"
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "top"
+      "top",
     );
   });
 
@@ -922,13 +922,13 @@ describe("the placement of the list element", () => {
         listPlacement="bottom"
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "bottom"
+      "bottom",
     );
   });
 
@@ -942,13 +942,13 @@ describe("the placement of the list element", () => {
         listPlacement="top-end"
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "top-end"
+      "top-end",
     );
   });
 
@@ -962,13 +962,13 @@ describe("the placement of the list element", () => {
         listPlacement="bottom-end"
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "bottom-end"
+      "bottom-end",
     );
   });
 
@@ -982,13 +982,13 @@ describe("the placement of the list element", () => {
         listPlacement="top-start"
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "top-start"
+      "top-start",
     );
   });
 
@@ -1002,13 +1002,13 @@ describe("the placement of the list element", () => {
         listPlacement="bottom-start"
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "bottom-start"
+      "bottom-start",
     );
   });
 
@@ -1022,13 +1022,13 @@ describe("the placement of the list element", () => {
         listWidth={100}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "bottom-end"
+      "bottom-end",
     );
   });
 
@@ -1043,13 +1043,13 @@ describe("the placement of the list element", () => {
         listWidth={100}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "top-end"
+      "top-end",
     );
   });
 
@@ -1064,13 +1064,13 @@ describe("the placement of the list element", () => {
         listWidth={100}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "bottom-end"
+      "bottom-end",
     );
   });
 
@@ -1085,13 +1085,13 @@ describe("the placement of the list element", () => {
         listWidth={100}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "top-start"
+      "top-start",
     );
   });
 
@@ -1106,13 +1106,13 @@ describe("the placement of the list element", () => {
         listWidth={100}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "top-end"
+      "top-end",
     );
   });
 
@@ -1127,13 +1127,13 @@ describe("the placement of the list element", () => {
         listWidth={100}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "bottom-start"
+      "bottom-start",
     );
   });
 
@@ -1148,13 +1148,13 @@ describe("the placement of the list element", () => {
         listWidth={100}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      "bottom-end"
+      "bottom-end",
     );
   });
 });
@@ -1169,7 +1169,7 @@ describe("when the user types in the input", () => {
         value="opt1"
       >
         <Option value="opt1" text="abc" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const input = screen.getByRole("combobox");
     await user.type(input, "{Delete}");
@@ -1186,7 +1186,7 @@ describe("when the user types in the input", () => {
         value="opt1"
       >
         <Option value="opt1" text="abc" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const input = screen.getByRole("combobox") as HTMLInputElement;
     await user.click(input);
@@ -1201,7 +1201,7 @@ describe("when the user types in the input", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const input = screen.getByRole("combobox") as HTMLInputElement;
     await user.type(screen.getByRole("combobox"), "gree");
@@ -1215,7 +1215,7 @@ describe("when the user types in the input", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const input = screen.getByRole("combobox") as HTMLInputElement;
     await user.type(screen.getByRole("combobox"), "green");
@@ -1229,7 +1229,7 @@ describe("when the user types in the input", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const input = screen.getByRole("combobox") as HTMLInputElement;
     await user.type(screen.getByRole("combobox"), "   gre");
@@ -1244,13 +1244,13 @@ describe("when the user types in the input", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.type(screen.getByRole("combobox"), "gre");
 
     expect(await screen.findByRole("option")).toHaveAttribute(
       "aria-selected",
-      "true"
+      "true",
     );
   });
 
@@ -1259,7 +1259,7 @@ describe("when the user types in the input", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="black and white" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const input = screen.getByRole("combobox") as HTMLInputElement;
     await user.type(screen.getByRole("combobox"), "black ");
@@ -1272,13 +1272,13 @@ describe("when the user types in the input", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.type(screen.getByRole("combobox"), "gre   ");
 
     expect(await screen.findByRole("option")).toHaveAttribute(
       "aria-selected",
-      "true"
+      "true",
     );
   });
 
@@ -1287,7 +1287,7 @@ describe("when the user types in the input", () => {
     render(
       <FilterableSelect label="filterable-select" onChange={() => {}} value="">
         <Option value="opt1" text="black" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const input = screen.getByRole("combobox") as HTMLInputElement;
     await user.type(screen.getByRole("combobox"), "   ");
@@ -1306,7 +1306,7 @@ describe("when the user types in the input", () => {
         onFilterChange={onFilterChangeFn}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     await user.type(screen.getByRole("combobox"), "foo");
 
@@ -1323,7 +1323,7 @@ describe("when the user types in the input", () => {
         onFilterChange={onFilterChangeFn}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
 
     rerender(
@@ -1334,7 +1334,7 @@ describe("when the user types in the input", () => {
         onFilterChange={onFilterChangeFn}
       >
         <Option value="opt1" text="red" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
 
     expect(onFilterChangeFn).not.toHaveBeenCalled();
@@ -1350,7 +1350,7 @@ describe("when the user types in the input", () => {
       >
         <Option value="opt1" text="blue" />
         <Option value="opt2" text="black" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const input = screen.getByRole("combobox") as HTMLInputElement;
     await user.type(screen.getByRole("combobox"), "bla");
@@ -1366,7 +1366,7 @@ describe("when the user selects an option", () => {
       <FilterableSelectWithState value="opt1">
         <Option value="opt1" text="red" />
         <Option value="opt2" text="green" />
-      </FilterableSelectWithState>
+      </FilterableSelectWithState>,
     );
     await user.click(screen.getByRole("combobox"));
     await user.click(await screen.findByRole("option", { name: "green" }));
@@ -1385,7 +1385,7 @@ describe("when the user selects an option", () => {
         onSelect={onSelectFn}
       >
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     const input = screen.getByRole("combobox");
     await user.click(input);
@@ -1405,7 +1405,7 @@ describe("when the user selects an option", () => {
         onSelect={onSelectFn}
       >
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
     await user.keyboard("{ArrowDown}");
@@ -1426,7 +1426,7 @@ describe("when the user selects an option", () => {
         onSelect={onSelectFn}
       >
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
     await user.keyboard("{ArrowDown}");
@@ -1448,7 +1448,7 @@ describe("when the user selects an option", () => {
       >
         <Option value="opt1" text="green" />
         <Option value="opt2" text="blue" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
     await user.keyboard("{ArrowDown}");
@@ -1471,7 +1471,7 @@ describe("when the user selects an option", () => {
       >
         <Option value="opt1" text="green" />
         <Option value="opt2" text="blue" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
     await user.keyboard("{ArrowUp}");
@@ -1493,7 +1493,7 @@ test("should close the list when the user presses `Escape` key", async () => {
       value=""
     >
       <Option value="opt1" text="green" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   screen.getByRole("combobox").focus();
   await user.keyboard("{ArrowDown}");
@@ -1507,7 +1507,7 @@ test("should close the list when the user clicks outside the component", async (
   render(
     <FilterableSelect label="filterable-select" onChange={() => {}} value="">
       <Option value="opt1" text="green" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   screen.getByRole("combobox").focus();
   await user.keyboard("{ArrowDown}");
@@ -1527,7 +1527,7 @@ test("should call the `onKeyDown` callback when the user presses a key and the i
       onKeyDown={onKeyDownFn}
     >
       <Option value="opt1" text="green" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   screen.getByRole("combobox").focus();
   await user.keyboard("{ArrowDown}");
@@ -1547,12 +1547,12 @@ describe("when the `listActionButton` is passed", () => {
         listActionButton={<button type="button">mock button</button>}
       >
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
 
     expect(
-      await screen.findByRole("button", { name: "mock button" })
+      await screen.findByRole("button", { name: "mock button" }),
     ).toBeVisible();
   });
 
@@ -1569,11 +1569,11 @@ describe("when the `listActionButton` is passed", () => {
         onListAction={onListActionFn}
       >
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
     await user.click(
-      await screen.findByRole("button", { name: "mock button" })
+      await screen.findByRole("button", { name: "mock button" }),
     );
 
     expect(onListActionFn).toHaveBeenCalled();
@@ -1591,13 +1591,13 @@ describe("when the `listActionButton` is passed", () => {
         listActionButton={<button type="button">mock button</button>}
       >
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
     await user.tab();
 
     expect(
-      await screen.findByRole("button", { name: "mock button" })
+      await screen.findByRole("button", { name: "mock button" }),
     ).toHaveFocus();
   });
 
@@ -1614,7 +1614,7 @@ describe("when the `listActionButton` is passed", () => {
         listActionButton={<button type="button">mock button</button>}
       >
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
     await user.tab();
@@ -1636,7 +1636,7 @@ describe("when the `listActionButton` is passed", () => {
         listActionButton={<button type="button">mock button</button>}
       >
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
     await user.tab();
@@ -1660,7 +1660,7 @@ describe("when the `listActionButton` is passed", () => {
         listActionButton={<button type="button">mock button</button>}
       >
         <Option value="opt1" text="green" />
-      </FilterableSelect>
+      </FilterableSelect>,
     );
     screen.getByRole("combobox").focus();
     await user.tab();
@@ -1679,7 +1679,7 @@ test("should set the `required` attribute on the input when the prop is passed",
       required
     >
       <Option value="opt1" text="green" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByRole("combobox")).toBeRequired();
@@ -1697,7 +1697,7 @@ test("should not be call `onListScrollBottom` callback when an option is clicked
       value=""
     >
       <Option value="opt1" text="green" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   screen.getByRole("combobox").focus();
   await user.click(await screen.findByRole("option", { name: "green" }));
@@ -1714,13 +1714,13 @@ test("should apply the expected border radius styling to the list element", () =
       value=""
     >
       <Option value="opt1" text="green" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
   screen.getByRole("combobox").focus();
 
   expect(screen.getByTestId("select-list-wrapper")).toHaveStyleRule(
     "border-radius",
-    "var(--borderRadius050)"
+    "var(--borderRadius050)",
   );
 });
 
@@ -1733,11 +1733,11 @@ test("should apply the expected `maxWidth` styling when the prop is passed", ()
       maxWidth="69%"
     >
       <Option value="opt1" text="green" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByTestId("input-presentation-container")).toHaveStyle(
-    "max-width: 69%"
+    "max-width: 69%",
   );
 });
 
@@ -1745,11 +1745,11 @@ test("should apply the expected `maxWidth` styling when the prop is not passed",
   render(
     <FilterableSelect label="filterable-select" onChange={() => {}} value="">
       <Option value="opt1" text="green" />
-    </FilterableSelect>
+    </FilterableSelect>,
   );
 
   expect(screen.getByTestId("input-presentation-container")).toHaveStyle(
-    "max-width: 100%"
+    "max-width: 100%",
   );
 });
 
@@ -1760,7 +1760,7 @@ test("should show all options when `disableDefaultFiltering` is true and the use
       <Option value="opt1" text="a" />
       <Option value="opt2" text="b" />
       <Option value="opt3" text="c" />
-    </FilterableSelectWithState>
+    </FilterableSelectWithState>,
   );
   await user.type(screen.getByRole("combobox"), "a");
 
@@ -1774,7 +1774,7 @@ test("should hide any non-matching options when `disableDefaultFiltering` is fal
       <Option value="opt1" text="a" />
       <Option value="opt2" text="b" />
       <Option value="opt3" text="c" />
-    </FilterableSelectWithState>
+    </FilterableSelectWithState>,
   );
   await user.type(screen.getByRole("combobox"), "a");
 
@@ -1788,7 +1788,7 @@ test("should hide any non-matching options when `disableDefaultFiltering` is not
       <Option value="opt1" text="a" />
       <Option value="opt2" text="b" />
       <Option value="opt3" text="c" />
-    </FilterableSelectWithState>
+    </FilterableSelectWithState>,
   );
   await user.type(screen.getByRole("combobox"), "a");
 
diff --git a/src/components/select/multi-select/components.test-pw.tsx b/src/components/select/multi-select/components.test-pw.tsx
index 95d9a050c4..b161b6fc97 100644
--- a/src/components/select/multi-select/components.test-pw.tsx
+++ b/src/components/select/multi-select/components.test-pw.tsx
@@ -14,7 +14,7 @@ import CarbonProvider from "../../carbon-provider/carbon-provider.component";
 export const MultiSelectComponent = (props: Partial<MultiSelectProps>) => {
   const [value, setValue] = useState<string[]>([]);
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
   }
   return (
     <MultiSelect
@@ -46,7 +46,7 @@ export const MultiSelectComponent = (props: Partial<MultiSelectProps>) => {
 };
 
 export const MultiSelectDefaultValueComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   return (
     <MultiSelect label="color" labelInline {...props}>
@@ -66,11 +66,11 @@ export const MultiSelectDefaultValueComponent = (
 };
 
 export const MultiSelectLongPillComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   const [value, setValue] = useState<string[]>([]);
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
   }
   return (
     <div
@@ -102,7 +102,7 @@ export const MultiSelectLongPillComponent = (
 };
 
 export const MultiSelectWithLazyLoadingComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const [value, setValue] = useState<string[]>([]);
@@ -116,7 +116,7 @@ export const MultiSelectWithLazyLoadingComponent = (
   ];
   const [optionList, setOptionList] = useState<React.ReactElement[]>([]);
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
   }
   function loadList() {
     if (preventLoading.current) {
@@ -144,7 +144,7 @@ export const MultiSelectWithLazyLoadingComponent = (
 };
 
 export const MultiSelectLazyLoadTwiceComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const [value, setValue] = useState<string[]>([]);
@@ -182,7 +182,7 @@ export const MultiSelectLazyLoadTwiceComponent = (
         label="color"
         value={value}
         onChange={(event) =>
-          setValue((event.target.value as unknown) as string[])
+          setValue(event.target.value as unknown as string[])
         }
         onOpen={() => loadList()}
         isLoading={isLoading}
@@ -195,7 +195,7 @@ export const MultiSelectLazyLoadTwiceComponent = (
 };
 
 export const MultiSelectObjectAsValueComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   const optionListValues = [
     { id: "Amber", value: 1, text: "Amber" },
@@ -216,7 +216,7 @@ export const MultiSelectObjectAsValueComponent = (
   ]);
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as Record<string, unknown>[]);
+    setValue(event.target.value as unknown as Record<string, unknown>[]);
   }
   return (
     <MultiSelect
@@ -233,7 +233,7 @@ export const MultiSelectObjectAsValueComponent = (
 };
 
 export const MultiSelectMultiColumnsComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   return (
     <MultiSelect
@@ -285,13 +285,13 @@ export const MultiSelectMultiColumnsComponent = (
 };
 
 export const MultiSelectMaxOptionsComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   const maxSelectionsAllowed = 2;
   const [selectedPills, setSelectedPills] = useState<string[]>([]);
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
     if (event.target.value.length <= maxSelectionsAllowed) {
-      setSelectedPills((event.target.value as unknown) as string[]);
+      setSelectedPills(event.target.value as unknown as string[]);
     }
   }
   return (
@@ -323,7 +323,7 @@ export const MultiSelectOnFilterChangeEventComponent = ({
 }: Partial<MultiSelectProps>) => {
   const [state, setState] = useState<string[]>([]);
   const setValue = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState((event.target.value as unknown) as string[]);
+    setState(event.target.value as unknown as string[]);
     if (onChange) {
       onChange(event);
     }
@@ -346,7 +346,7 @@ export const MultiSelectOnFilterChangeEventComponent = ({
 };
 
 export const MultiSelectCustomColorComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   return (
     <MultiSelect label="color" labelInline defaultValue={["1", "3"]} {...props}>
@@ -414,7 +414,7 @@ export const MultiSelectErrorOnChangeNewValidation = () => {
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.value.length < 3) {
       setShowError(false);
-      setSelectedPills((event.target.value as unknown) as string[]);
+      setSelectedPills(event.target.value as unknown as string[]);
     } else {
       setShowError(true);
     }
@@ -454,9 +454,9 @@ export const SelectionConfirmed = () => {
   const [value, setValue] = useState<string[]>([]);
   const [confirmedSelections, setConfirmedSelections] = useState<string[]>([]);
   const handleChange = (event: CustomSelectChangeEvent) => {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
     if (event.selectionConfirmed) {
-      setConfirmedSelections((event.target.value as unknown) as string[]);
+      setConfirmedSelections(event.target.value as unknown as string[]);
     }
   };
   return (
@@ -494,9 +494,9 @@ export const MultiSelectWithDisabledOption = () => {
   const [confirmedSelections, setConfirmedSelections] = useState<string[]>([]);
 
   const handleChange = (event: CustomSelectChangeEvent) => {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
     if (event.selectionConfirmed) {
-      setConfirmedSelections((event.target.value as unknown) as string[]);
+      setConfirmedSelections(event.target.value as unknown as string[]);
     }
   };
   return (
diff --git a/src/components/select/multi-select/multi-select-test.stories.tsx b/src/components/select/multi-select/multi-select-test.stories.tsx
index e31854edfd..528ca2cdba 100644
--- a/src/components/select/multi-select/multi-select-test.stories.tsx
+++ b/src/components/select/multi-select/multi-select-test.stories.tsx
@@ -72,7 +72,7 @@ export const Default = () => {
   const [selectedPills, setSelectedPills] = useState([] as string[]);
   const handleActivityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.value.length <= MAX_SELECTIONS_ALLOWED) {
-      setSelectedPills((event.target.value as unknown) as string[]);
+      setSelectedPills(event.target.value as unknown as string[]);
       partialAction("onChange")();
     }
   };
@@ -110,7 +110,7 @@ Default.storyName = "default";
 export const MultiSelectComponent = (props: Partial<MultiSelectProps>) => {
   const [value, setValue] = useState<string[]>([]);
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
   }
 
   return (
@@ -143,7 +143,7 @@ export const MultiSelectComponent = (props: Partial<MultiSelectProps>) => {
 };
 
 export const MultiSelectDefaultValueComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   return (
     <MultiSelect label="color" labelInline {...props}>
@@ -163,11 +163,11 @@ export const MultiSelectDefaultValueComponent = (
 };
 
 export const MultiSelectLongPillComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   const [value, setValue] = useState<string[]>([]);
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
   }
 
   return (
@@ -200,7 +200,7 @@ export const MultiSelectLongPillComponent = (
 };
 
 export const MultiSelectWithLazyLoadingComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const [value, setValue] = useState<string[]>([]);
@@ -215,7 +215,7 @@ export const MultiSelectWithLazyLoadingComponent = (
   const [optionList, setOptionList] = useState<React.ReactElement[]>([]);
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
   }
 
   function loadList() {
@@ -246,7 +246,7 @@ export const MultiSelectWithLazyLoadingComponent = (
 };
 
 export const MultiSelectLazyLoadTwiceComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const [value, setValue] = useState<string[]>([]);
@@ -287,7 +287,7 @@ export const MultiSelectLazyLoadTwiceComponent = (
         label="color"
         value={value}
         onChange={(event) =>
-          setValue((event.target.value as unknown) as string[])
+          setValue(event.target.value as unknown as string[])
         }
         onOpen={() => loadList()}
         isLoading={isLoading}
@@ -300,7 +300,7 @@ export const MultiSelectLazyLoadTwiceComponent = (
 };
 
 export const MultiSelectObjectAsValueComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   const optionListValues = [
     { id: "Amber", value: 1, text: "Amber" },
@@ -321,7 +321,7 @@ export const MultiSelectObjectAsValueComponent = (
   ]);
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as Record<string, unknown>[]);
+    setValue(event.target.value as unknown as Record<string, unknown>[]);
   }
   return (
     <MultiSelect
@@ -338,7 +338,7 @@ export const MultiSelectObjectAsValueComponent = (
 };
 
 export const MultiSelectMultiColumnsComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   return (
     <MultiSelect
@@ -390,14 +390,14 @@ export const MultiSelectMultiColumnsComponent = (
 };
 
 export const MultiSelectMaxOptionsComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   const maxSelectionsAllowed = 2;
   const [selectedPills, setSelectedPills] = useState<string[]>([]);
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
     if (event.target.value.length <= maxSelectionsAllowed) {
-      setSelectedPills((event.target.value as unknown) as string[]);
+      setSelectedPills(event.target.value as unknown as string[]);
     }
   }
 
@@ -431,7 +431,7 @@ export const MultiSelectOnFilterChangeEventComponent = ({
   const [state, setState] = useState<string[]>([]);
 
   const setValue = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState((event.target.value as unknown) as string[]);
+    setState(event.target.value as unknown as string[]);
     if (onChange) {
       onChange(event);
     }
@@ -455,7 +455,7 @@ export const MultiSelectOnFilterChangeEventComponent = ({
 };
 
 export const MultiSelectCustomColorComponent = (
-  props: Partial<MultiSelectProps>
+  props: Partial<MultiSelectProps>,
 ) => {
   return (
     <MultiSelect label="color" labelInline defaultValue={["1", "3"]} {...props}>
@@ -524,7 +524,7 @@ export const MultiSelectErrorOnChangeNewValidation = () => {
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.value.length < 3) {
       setShowError(false);
-      setSelectedPills((event.target.value as unknown) as string[]);
+      setSelectedPills(event.target.value as unknown as string[]);
     } else {
       setShowError(true);
     }
@@ -566,7 +566,7 @@ export const MultiSelectWithDisabledOption = () => {
   const [value, setValue] = useState<string[]>([]);
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
   }
 
   return (
@@ -589,7 +589,7 @@ export const MultiSelectWithDisabledOption = () => {
 export const SingleOption = () => {
   const [selectedPills, setSelectedPills] = useState([] as string[]);
   const handleActivityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedPills((event.target.value as unknown) as string[]);
+    setSelectedPills(event.target.value as unknown as string[]);
     partialAction("onChange")();
   };
   return (
diff --git a/src/components/select/multi-select/multi-select.component.tsx b/src/components/select/multi-select/multi-select.component.tsx
index b45abaac18..584d1a6090 100644
--- a/src/components/select/multi-select/multi-select.component.tsx
+++ b/src/components/select/multi-select/multi-select.component.tsx
@@ -94,7 +94,7 @@ export interface MultiSelectProps
   isOptional?: boolean;
   /** Specify a callback triggered on change */
   onChange?: (
-    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>
+    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>,
   ) => void;
   /** Override the default width of the list element. Number passed is converted into pixel value */
   listWidth?: number;
@@ -142,7 +142,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
       listWidth,
       ...textboxProps
     },
-    ref
+    ref,
   ) => {
     const [activeDescendantId, setActiveDescendantId] = useState();
     const selectListId = useRef(guid());
@@ -158,7 +158,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
     const [open, setOpen] = useState(false);
     const [textValue, setTextValue] = useState("");
     const [selectedValue, setSelectedValue] = useState(
-      value || defaultValue || []
+      value || defaultValue || [],
     );
     const [highlightedValue, setHighlightedValue] = useState("");
     const [placeholderOverride, setPlaceholderOverride] = useState<string>();
@@ -176,7 +176,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
     if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
@@ -193,7 +193,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
 
         return customEvent as CustomSelectChangeEvent;
       },
-      [name, id]
+      [name, id],
     );
 
     /* generic value update function which can be used for both controlled and uncontrolled
@@ -203,12 +203,12 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
     const updateValue = useCallback(
       (
         updateFunction: (
-          previousValue: string[] | Record<string, unknown>[]
+          previousValue: string[] | Record<string, unknown>[],
         ) => string[] | Record<string, unknown>[],
-        selectionConfirmed
+        selectionConfirmed,
       ) => {
         const newValue = updateFunction(
-          actualValue as string[] | Record<string, unknown>[]
+          actualValue as string[] | Record<string, unknown>[],
         );
         // only call onChange if an option has been selected or deselected
         if (onChange && newValue.length !== actualValue?.length) {
@@ -220,12 +220,12 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
           setSelectedValue(updateFunction);
         }
       },
-      [createCustomEvent, onChange, actualValue]
+      [createCustomEvent, onChange, actualValue],
     );
 
     function findElementWithMatchingText(
       textToMatch: string,
-      list: React.ReactNode
+      list: React.ReactNode,
     ) {
       return React.Children.toArray(list).find((child) => {
         const { text } = (child as React.ReactElement).props;
@@ -239,7 +239,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
         const newValue = event.target.value;
         const match = findElementWithMatchingText(
           newValue,
-          children
+          children,
         ) as React.ReactElement;
 
         if (match) {
@@ -254,7 +254,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
 
         setOpen(true);
       },
-      [children, open, onOpen]
+      [children, open, onOpen],
     );
 
     const removeSelectedValue = useCallback(
@@ -271,7 +271,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
           return newValue;
         }, true);
       },
-      [updateValue]
+      [updateValue],
     );
 
     const handleTextboxKeydown = useCallback(
@@ -299,7 +299,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
           removeSelectedValue(-1);
         }
       },
-      [onKeyDown, readOnly, textValue, open, onOpen, removeSelectedValue]
+      [onKeyDown, readOnly, textValue, open, onOpen, removeSelectedValue],
     );
 
     const accessibilityLabel = useMemo(() => {
@@ -339,7 +339,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
 
         isClickTriggeredBySelect.current = false;
       },
-      [open]
+      [open],
     );
 
     const mapValuesToPills = useMemo(() => {
@@ -353,7 +353,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
       return actualValue.map((singleValue, index) => {
         const matchingOption = React.Children.toArray(children).find(
           (child) =>
-            React.isValidElement(child) && isExpectedOption(child, singleValue)
+            React.isValidElement(child) && isExpectedOption(child, singleValue),
         );
 
         let pillProps: Omit<PillProps, "children"> = {};
@@ -406,11 +406,11 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
 
       invariant(
         isControlled.current === (value !== undefined),
-        modeSwitchedMessage
+        modeSwitchedMessage,
       );
       invariant(
         !isControlled.current || (isControlled.current && onChange),
-        onChangeMissingMessage
+        onChangeMissingMessage,
       );
     }, [value, onChange]);
 
@@ -437,7 +437,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
     }, [handleGlobalClick]);
 
     const onFilterChange = useStableCallback(
-      onFilterChangeProp as (filterTextArg: unknown) => void
+      onFilterChangeProp as (filterTextArg: unknown) => void,
     );
 
     const isFirstRender = useRef(true);
@@ -544,7 +544,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
           return [...previousValue, newValue];
         }, selectionConfirmed);
       },
-      [textboxRef, actualValue, updateValue]
+      [textboxRef, actualValue, updateValue],
     );
 
     const onSelectListClose = useCallback(() => {
@@ -565,7 +565,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
           ref.current = element;
         }
       },
-      [ref]
+      [ref],
     );
 
     function getTextboxProps() {
@@ -672,7 +672,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
         {selectList}
       </StyledSelectMultiSelect>
     );
-  }
+  },
 );
 
 export default MultiSelect;
diff --git a/src/components/select/multi-select/multi-select.pw.tsx b/src/components/select/multi-select/multi-select.pw.tsx
index 55a3ad39e4..63027f1cb1 100644
--- a/src/components/select/multi-select/multi-select.pw.tsx
+++ b/src/components/select/multi-select/multi-select.pw.tsx
@@ -87,11 +87,11 @@ test.describe("When focused", () => {
     await inputElement.focus();
     await expect(inputElement.locator("..")).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(inputElement.locator("..")).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -109,7 +109,7 @@ test.describe("When focused", () => {
     await selectInputElement.focus();
     await expect(selectInputElement.locator("..")).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 });
@@ -147,7 +147,7 @@ test.describe("MultiSelect component", () => {
 
       await expect(selectInput(page)).toHaveAttribute(
         "placeholder",
-        placeholderValue
+        placeholderValue,
       );
     });
   });
@@ -160,7 +160,7 @@ test.describe("MultiSelect component", () => {
 
     await expect(commonDataElementInputPreview(page)).toHaveAttribute(
       "name",
-      testPropValue
+      testPropValue,
     );
   });
 
@@ -180,7 +180,7 @@ test.describe("MultiSelect component", () => {
     await mount(<MultiSelectComponent data-component={testPropValue} />);
 
     await expect(
-      selectElementInput(page).locator("..").locator("..")
+      selectElementInput(page).locator("..").locator(".."),
     ).toHaveAttribute("data-component", testPropValue);
   });
 
@@ -191,7 +191,7 @@ test.describe("MultiSelect component", () => {
     await mount(<MultiSelectComponent data-element={testPropValue} />);
 
     await expect(
-      selectElementInput(page).locator("..").locator("..")
+      selectElementInput(page).locator("..").locator(".."),
     ).toHaveAttribute("data-element", testPropValue);
   });
 
@@ -202,16 +202,18 @@ test.describe("MultiSelect component", () => {
     await mount(<MultiSelectComponent data-role={testPropValue} />);
 
     await expect(
-      selectElementInput(page).locator("..").locator("..")
+      selectElementInput(page).locator("..").locator(".."),
     ).toHaveAttribute("data-role", testPropValue);
   });
 
-  ([
-    ["top", "200px", "0px", "0px", "0px"],
-    ["bottom", "0px", "0px", "0px", "0px"],
-    ["left", "200px", "0px", "200px", "0px"],
-    ["right", "200px", "0px", "0px", "200px"],
-  ] as const).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "200px", "0px", "0px", "0px"],
+      ["bottom", "0px", "0px", "0px", "0px"],
+      ["left", "200px", "0px", "200px", "0px"],
+      ["right", "200px", "0px", "0px", "200px"],
+    ] as const
+  ).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
     test(`should render the help tooltip in the ${tooltipPositionValue} position`, async ({
       mount,
       page,
@@ -224,7 +226,7 @@ test.describe("MultiSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await helpIcon(page).hover();
@@ -232,7 +234,7 @@ test.describe("MultiSelect component", () => {
       await expect(tooltipElement).toBeVisible();
       await expect(tooltipElement).toHaveAttribute(
         "data-placement",
-        tooltipPositionValue
+        tooltipPositionValue,
       );
     });
   });
@@ -251,7 +253,7 @@ test.describe("MultiSelect component", () => {
     await expect(dropdownButtonElement).toBeVisible();
     await expect(dropdownButtonElement).toHaveCSS(
       "color",
-      "rgba(0, 0, 0, 0.3)"
+      "rgba(0, 0, 0, 0.3)",
     );
   });
 
@@ -270,15 +272,17 @@ test.describe("MultiSelect component", () => {
     await expect(dropdownButtonElement).toBeVisible();
     await expect(dropdownButtonElement).toHaveCSS(
       "color",
-      "rgba(0, 0, 0, 0.3)"
+      "rgba(0, 0, 0, 0.3)",
     );
   });
 
-  ([
-    [SIZE.SMALL, "32px"],
-    [SIZE.MEDIUM, "40px"],
-    [SIZE.LARGE, "48px"],
-  ] as [MultiSelectProps["size"], string][]).forEach(([size, height]) => {
+  (
+    [
+      [SIZE.SMALL, "32px"],
+      [SIZE.MEDIUM, "40px"],
+      [SIZE.LARGE, "48px"],
+    ] as [MultiSelectProps["size"], string][]
+  ).forEach(([size, height]) => {
     test(`should use ${size} as size and render MultiSelect with ${height} as height`, async ({
       mount,
       page,
@@ -287,7 +291,7 @@ test.describe("MultiSelect component", () => {
 
       await expect(commonDataElementInputPreview(page).locator("..")).toHaveCSS(
         "min-height",
-        height
+        height,
       );
     });
   });
@@ -309,15 +313,17 @@ test.describe("MultiSelect component", () => {
 
     await expect(getDataElementByValue(page, "label").locator("..")).toHaveCSS(
       "-webkit-box-pack",
-      "end"
+      "end",
     );
   });
 
-  ([
-    ["flex", 399],
-    ["flex", 400],
-    ["block", 401],
-  ] as const).forEach(([displayValue, breakpoint]) => {
+  (
+    [
+      ["flex", 399],
+      ["flex", 400],
+      ["block", 401],
+    ] as const
+  ).forEach(([displayValue, breakpoint]) => {
     test(`should check label alignment is ${displayValue} with adaptiveLabelBreakpoint ${breakpoint} and viewport 400`, async ({
       mount,
       page,
@@ -330,39 +336,37 @@ test.describe("MultiSelect component", () => {
         <MultiSelectComponent
           labelInline
           adaptiveLabelBreakpoint={breakpoint}
-        />
+        />,
       );
 
       await expect(
-        getDataElementByValue(page, "label").locator("..").locator("..")
+        getDataElementByValue(page, "label").locator("..").locator(".."),
       ).toHaveCSS("display", displayValue);
     });
   });
 
-  ([
-    ["right", "end"],
-    ["left", "start"],
-  ] as [MultiSelectProps["labelAlign"], string][]).forEach(
-    ([alignment, cssProp]) => {
-      test(`should use ${alignment} as labelAligment and render with flex-${cssProp} as css properties`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <MultiSelectComponent labelInline labelAlign={alignment} />
-        );
+  (
+    [
+      ["right", "end"],
+      ["left", "start"],
+    ] as [MultiSelectProps["labelAlign"], string][]
+  ).forEach(([alignment, cssProp]) => {
+    test(`should use ${alignment} as labelAligment and render with flex-${cssProp} as css properties`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MultiSelectComponent labelInline labelAlign={alignment} />);
 
-        const labelParentElement = getDataElementByValue(page, "label").locator(
-          ".."
-        );
-        await expect(labelParentElement).toHaveCSS("-webkit-box-pack", cssProp);
-        await expect(labelParentElement).toHaveCSS(
-          "justify-content",
-          `flex-${cssProp}`
-        );
-      });
-    }
-  );
+      const labelParentElement = getDataElementByValue(page, "label").locator(
+        "..",
+      );
+      await expect(labelParentElement).toHaveCSS("-webkit-box-pack", cssProp);
+      await expect(labelParentElement).toHaveCSS(
+        "justify-content",
+        `flex-${cssProp}`,
+      );
+    });
+  });
 
   [
     [10, 90, 135, 1229],
@@ -378,18 +382,18 @@ test.describe("MultiSelect component", () => {
           labelInline
           labelWidth={label}
           inputWidth={input}
-        />
+        />,
       );
 
       await assertCssValueIsApproximately(
         getDataElementByValue(page, "label").locator(".."),
         "width",
-        labelRatio
+        labelRatio,
       );
       await assertCssValueIsApproximately(
         getDataElementByValue(page, "input").locator(".."),
         "width",
-        inputRatio
+        inputRatio,
       );
     });
   });
@@ -399,7 +403,7 @@ test.describe("MultiSelect component", () => {
       await mount(<MultiSelectComponent maxWidth={maxWidth} />);
 
       await expect(
-        getDataElementByValue(page, "input").locator("..").locator("..")
+        getDataElementByValue(page, "input").locator("..").locator(".."),
       ).toHaveCSS("max-width", maxWidth);
     });
   });
@@ -411,7 +415,7 @@ test.describe("MultiSelect component", () => {
     await mount(<MultiSelectComponent maxWidth="" />);
 
     await expect(
-      getDataElementByValue(page, "input").locator("..").locator("..")
+      getDataElementByValue(page, "input").locator("..").locator(".."),
     ).toHaveCSS("max-width", "100%");
   });
 
@@ -512,7 +516,7 @@ test.describe("MultiSelect component", () => {
         await selectInput(page).press(key);
         await expect(selectListWrapper(page)).toBeVisible();
       });
-    }
+    },
   );
 
   test("should not open the list when Enter is pressed with input in focus", async ({
@@ -555,11 +559,11 @@ test.describe("MultiSelect component", () => {
     await selectOptionByText(page, option2).click();
     await expect(multiSelectPillByPosition(page, 0)).toHaveAttribute(
       "title",
-      option1
+      option1,
     );
     await expect(multiSelectPillByPosition(page, 1)).toHaveAttribute(
       "title",
-      option2
+      option2,
     );
   });
 
@@ -580,11 +584,11 @@ test.describe("MultiSelect component", () => {
     await expect(multiSelectPill(page)).toHaveCount(length);
     await expect(multiSelectPillByPosition(page, 0)).toHaveAttribute(
       "title",
-      option1
+      option1,
     );
     await expect(multiSelectPillByPosition(page, 1)).toHaveAttribute(
       "title",
-      option2
+      option2,
     );
   });
 
@@ -608,7 +612,7 @@ test.describe("MultiSelect component", () => {
       await expect(optionOne).toBeVisible();
       await expect(optionOne).toHaveCSS(
         "background-color",
-        "rgb(153, 173, 183)"
+        "rgb(153, 173, 183)",
       );
       await expect(optionTwo).toHaveText(optionValue2);
       await expect(optionTwo).toBeVisible();
@@ -617,7 +621,7 @@ test.describe("MultiSelect component", () => {
       await expect(optionThree).toBeVisible();
       await expect(optionThree).toHaveCSS(
         "background-color",
-        "rgba(0, 0, 0, 0)"
+        "rgba(0, 0, 0, 0)",
       );
     });
   });
@@ -644,7 +648,7 @@ test.describe("MultiSelect component", () => {
     await dropdownButton(page).click();
     await expect(selectListWrapper(page)).toBeVisible();
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible()),
     );
   });
 
@@ -659,7 +663,7 @@ test.describe("MultiSelect component", () => {
     await buttonElement.click();
     await expect(wrapperElement).toBeVisible();
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible()),
     );
     await expect(selectOptionByText(page, listOption)).toBeVisible();
     await buttonElement.click();
@@ -667,7 +671,7 @@ test.describe("MultiSelect component", () => {
     await buttonElement.click();
     await expect(wrapperElement).toBeVisible();
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible()),
     );
   });
 
@@ -724,24 +728,20 @@ test.describe("MultiSelect component", () => {
     await selectOptionByText(page, option2).click();
     await expect(multiSelectPillByPosition(page, 0)).toHaveAttribute(
       "title",
-      option1
+      option1,
     );
     await expect(multiSelectPillByPosition(page, 1)).toHaveAttribute(
       "title",
-      option2
+      option2,
     );
   });
 
-  ([
-    ["top", "0px", "0px", "0px", "20px"],
-    ["bottom", "600px", "0px", "0px", "20px"],
-  ] as [
-    MultiSelectProps["listPlacement"],
-    string,
-    string,
-    string,
-    string
-  ][]).forEach(([position, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "0px", "0px", "0px", "20px"],
+      ["bottom", "600px", "0px", "0px", "20px"],
+    ] as [MultiSelectProps["listPlacement"], string, string, string, string][]
+  ).forEach(([position, top, bottom, left, right]) => {
     test(`should flip list to opposite position when there is not enough space to render in ${position} position`, async ({
       mount,
       page,
@@ -754,7 +754,7 @@ test.describe("MultiSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       let flipPosition = "";
@@ -768,7 +768,7 @@ test.describe("MultiSelect component", () => {
       const listElement = selectListPosition(page);
       await expect(listElement).toHaveAttribute(
         "data-floating-placement",
-        flipPosition
+        flipPosition,
       );
       await expect(listElement).toBeVisible();
     });
@@ -785,14 +785,14 @@ test.describe("MultiSelect component", () => {
       page,
     }) => {
       await mount(
-        <MultiSelectComponent mt={top} mb={bottom} ml={left} mr={right} />
+        <MultiSelectComponent mt={top} mb={bottom} ml={left} mr={right} />,
       );
 
       await dropdownButton(page).click();
       const listElement = selectListPosition(page);
       await expect(listElement).toHaveAttribute(
         "data-floating-placement",
-        position
+        position,
       );
       await expect(listElement).toBeVisible();
     });
@@ -820,7 +820,7 @@ test.describe("MultiSelect component", () => {
     }
     await expect(multiColumnsSelectListRow(page)).toHaveCSS(
       "background-color",
-      "rgba(0, 0, 0, 0)"
+      "rgba(0, 0, 0, 0)",
     );
   });
 
@@ -859,11 +859,11 @@ test.describe("MultiSelect component", () => {
       const highlightedValue = boldedAndUnderlinedValue(page, text);
       await expect(highlightedValue).toHaveCSS(
         "text-decoration-line",
-        "underline"
+        "underline",
       );
       await expect(highlightedValue).toHaveCSS(
         "text-decoration-style",
-        "solid"
+        "solid",
       );
       await expect(highlightedValue).toHaveCSS("font-weight", "500");
     });
@@ -889,7 +889,7 @@ test.describe("MultiSelect component", () => {
     }
     await Promise.all(assertions);
     await expect(
-      multiColumnsSelectListNoResultsMessage(page, text)
+      multiColumnsSelectListNoResultsMessage(page, text),
     ).toBeVisible();
   });
 
@@ -927,10 +927,12 @@ test.describe("MultiSelect component", () => {
     await expect(secondPill).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
   });
 
-  ([
-    ["third", "Blue as the sky on a summer's day"],
-    ["fifth", "Green as the grass in a spring meadow"],
-  ] as const).forEach(([option, text]) => {
+  (
+    [
+      ["third", "Blue as the sky on a summer's day"],
+      ["fifth", "Green as the grass in a spring meadow"],
+    ] as const
+  ).forEach(([option, text]) => {
     test(`should select ${option} list option and show pill with complete long text wrapped in the input`, async ({
       mount,
       page,
@@ -948,7 +950,7 @@ test.describe("MultiSelect component", () => {
     page,
   }) => {
     await mount(
-      <MultiSelectDefaultValueComponent defaultValue={defaultValue} />
+      <MultiSelectDefaultValueComponent defaultValue={defaultValue} />,
     );
 
     await expect(multiSelectPill(page)).toHaveAttribute("title", "White");
@@ -956,7 +958,7 @@ test.describe("MultiSelect component", () => {
     await closeIcon.focus();
     await expect(closeIcon).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(closeIcon).toHaveCSS("background-color", "rgb(0, 103, 56)");
   });
@@ -966,7 +968,7 @@ test.describe("MultiSelect component", () => {
     page,
   }) => {
     await mount(
-      <MultiSelectDefaultValueComponent defaultValue={defaultValue} />
+      <MultiSelectDefaultValueComponent defaultValue={defaultValue} />,
     );
 
     const pillElement = multiSelectPill(page);
@@ -980,7 +982,7 @@ test.describe("MultiSelect component", () => {
     page,
   }) => {
     await mount(
-      <MultiSelectDefaultValueComponent defaultValue={defaultValue} />
+      <MultiSelectDefaultValueComponent defaultValue={defaultValue} />,
     );
 
     const pillElement = multiSelectPill(page);
@@ -1021,7 +1023,7 @@ test.describe("MultiSelect component", () => {
     await optionElement.hover();
     await expect(optionElement).toHaveCSS(
       "background-color",
-      "rgb(204, 214, 219)"
+      "rgb(204, 214, 219)",
     );
   });
 
@@ -1041,7 +1043,7 @@ test.describe("MultiSelect component", () => {
     await dropdownButton(page).click();
     await expect(selectOptionByText(page, listOption)).toHaveAttribute(
       "data-component",
-      "option"
+      "option",
     );
   });
 
@@ -1054,7 +1056,7 @@ test.describe("MultiSelect component", () => {
     await dropdownButton(page).click();
     await expect(selectOptionByText(page, listOption)).toHaveAttribute(
       "data-role",
-      "option1"
+      "option1",
     );
   });
 
@@ -1067,7 +1069,7 @@ test.describe("MultiSelect component", () => {
     await dropdownButton(page).click();
     await expect(selectOptionByText(page, listOption)).toHaveAttribute(
       "data-element",
-      "option1"
+      "option1",
     );
   });
 
@@ -1086,7 +1088,7 @@ test.describe("MultiSelect component", () => {
 
     await dropdownButton(page).click();
     await expect(
-      multiColumnsSelectListBody(page).locator("..")
+      multiColumnsSelectListBody(page).locator(".."),
     ).toHaveAttribute("data-component", "option-row");
   });
 
@@ -1098,7 +1100,7 @@ test.describe("MultiSelect component", () => {
 
     await dropdownButton(page).click();
     await expect(
-      multiColumnsSelectListBody(page).locator("..")
+      multiColumnsSelectListBody(page).locator(".."),
     ).toHaveAttribute("data-role", "option-row");
   });
 
@@ -1110,7 +1112,7 @@ test.describe("MultiSelect component", () => {
 
     await dropdownButton(page).click();
     await expect(
-      multiColumnsSelectListBody(page).locator("..")
+      multiColumnsSelectListBody(page).locator(".."),
     ).toHaveAttribute("data-element", "option-row");
   });
 
@@ -1248,7 +1250,7 @@ test.describe("Check events for MultiSelect component", () => {
       callbackArguments.push(e);
     };
     await mount(
-      <MultiSelectOnFilterChangeEventComponent onFilterChange={callback} />
+      <MultiSelectOnFilterChangeEventComponent onFilterChange={callback} />,
     );
 
     const text = "B";
@@ -1283,7 +1285,7 @@ test.describe("Check virtual scrolling", () => {
 
     await dropdownButton(page).click();
     await selectListScrollableWrapper(page).evaluate((wrapper) =>
-      wrapper.scrollTo(0, 750)
+      wrapper.scrollTo(0, 750),
     );
     await page.waitForTimeout(250);
     await expect(selectOptionByText(page, "Option 1.")).toHaveCount(0);
@@ -1378,16 +1380,16 @@ test.describe("Selection confirmed", () => {
     await selectOptionByText(page, "Seven").click();
 
     await expect(
-      page.locator('[data-element="confirmed-selections"] > *')
+      page.locator('[data-element="confirmed-selections"] > *'),
     ).toHaveCount(3);
     await expect(
-      page.locator('[data-element="confirmed-selection-1"]')
+      page.locator('[data-element="confirmed-selection-1"]'),
     ).toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-7"]')
+      page.locator('[data-element="confirmed-selection-7"]'),
     ).toBeVisible();
   });
 
@@ -1411,19 +1413,19 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("Enter");
 
     await expect(
-      page.locator('[data-element="confirmed-selections"] > *')
+      page.locator('[data-element="confirmed-selections"] > *'),
     ).toHaveCount(4);
     await expect(
-      page.locator('[data-element="confirmed-selection-1"]')
+      page.locator('[data-element="confirmed-selection-1"]'),
     ).toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-3"]')
+      page.locator('[data-element="confirmed-selection-3"]'),
     ).toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-6"]')
+      page.locator('[data-element="confirmed-selection-6"]'),
     ).toBeVisible();
   });
 
@@ -1447,19 +1449,19 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("Enter");
 
     await expect(
-      page.locator('[data-element="confirmed-selections"] > *')
+      page.locator('[data-element="confirmed-selections"] > *'),
     ).toHaveCount(4);
     await expect(
-      page.locator('[data-element="confirmed-selection-9"]')
+      page.locator('[data-element="confirmed-selection-9"]'),
     ).toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-7"]')
+      page.locator('[data-element="confirmed-selection-7"]'),
     ).toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-4"]')
+      page.locator('[data-element="confirmed-selection-4"]'),
     ).toBeVisible();
   });
 
@@ -1481,7 +1483,7 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("Enter");
 
     const confirmedSelections = page.locator(
-      '[data-element="confirmed-selections"] > *'
+      '[data-element="confirmed-selections"] > *',
     );
     await expect(confirmedSelections).toHaveCount(4);
 
@@ -1507,7 +1509,7 @@ test.describe("Selection confirmed", () => {
     await selectOptionByText(page, "Seven").click();
 
     const confirmedSelections = page.locator(
-      '[data-element="confirmed-selections"] > *'
+      '[data-element="confirmed-selections"] > *',
     );
     await expect(confirmedSelections).toHaveCount(3);
     await pillCloseIcon(page).nth(2).click();
@@ -1543,12 +1545,12 @@ test("should not select a disabled option when a filter is typed", async ({
   await inputElement.type("t");
   await inputElement.press("Enter");
   await expect(
-    page.locator('[data-element="confirmed-selection-2"]')
+    page.locator('[data-element="confirmed-selection-2"]'),
   ).not.toBeVisible();
   await inputElement.press("ArrowDown");
   await inputElement.press("Enter");
   await expect(
-    page.locator('[data-element="confirmed-selection-3"]')
+    page.locator('[data-element="confirmed-selection-3"]'),
   ).toBeVisible();
 
   const pillElement = multiSelectPill(page);
@@ -1565,7 +1567,7 @@ test.describe("Test for scroll bug regression", () => {
     const dropdownButtonElement = dropdownButton(page);
     await dropdownButtonElement.click();
     await selectListScrollableWrapper(page).evaluate((wrapper) =>
-      wrapper.scrollBy(0, 500)
+      wrapper.scrollBy(0, 500),
     );
     await commonDataElementInputPreview(page).press("Escape");
     await dropdownButtonElement.click();
@@ -1621,18 +1623,14 @@ test.describe("Accessibility tests for MultiSelect component", () => {
     });
   });
 
-  ([
-    ["top", "200px", "0px", "0px", "0px"],
-    ["bottom", "0px", "0px", "0px", "0px"],
-    ["left", "200px", "0px", "200px", "0px"],
-    ["right", "200px", "0px", "0px", "200px"],
-  ] as [
-    MultiSelectProps["tooltipPosition"],
-    string,
-    string,
-    string,
-    string
-  ][]).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "200px", "0px", "0px", "0px"],
+      ["bottom", "0px", "0px", "0px", "0px"],
+      ["left", "200px", "0px", "200px", "0px"],
+      ["right", "200px", "0px", "0px", "200px"],
+    ] as [MultiSelectProps["tooltipPosition"], string, string, string, string][]
+  ).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
     test(`should pass accessibility tests with tooltip prop in the ${tooltipPositionValue} position`, async ({
       mount,
       page,
@@ -1645,7 +1643,7 @@ test.describe("Accessibility tests for MultiSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await helpIcon(page).hover();
@@ -1683,7 +1681,7 @@ test.describe("Accessibility tests for MultiSelect component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   test("should pass accessibility tests with autoFocus prop", async ({
@@ -1726,7 +1724,7 @@ test.describe("Accessibility tests for MultiSelect component", () => {
         <MultiSelectComponent
           labelInline
           adaptiveLabelBreakpoint={breakpoint}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -1740,12 +1738,12 @@ test.describe("Accessibility tests for MultiSelect component", () => {
         page,
       }) => {
         await mount(
-          <MultiSelectComponent labelInline labelAlign={alignment} />
+          <MultiSelectComponent labelInline labelAlign={alignment} />,
         );
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [
@@ -1762,7 +1760,7 @@ test.describe("Accessibility tests for MultiSelect component", () => {
           labelInline
           labelWidth={label}
           inputWidth={input}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -1812,16 +1810,12 @@ test.describe("Accessibility tests for MultiSelect component", () => {
     await checkAccessibility(page, undefined, "scrollable-region-focusable");
   });
 
-  ([
-    ["top", "0px", "0px", "0px", "20px"],
-    ["bottom", "600px", "0px", "0px", "20px"],
-  ] as [
-    MultiSelectProps["listPlacement"],
-    string,
-    string,
-    string,
-    string
-  ][]).forEach(([position, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "0px", "0px", "0px", "20px"],
+      ["bottom", "600px", "0px", "0px", "20px"],
+    ] as [MultiSelectProps["listPlacement"], string, string, string, string][]
+  ).forEach(([position, top, bottom, left, right]) => {
     test(`should pass accessibility tests with flipEnabled prop and listPlacement set to ${position}`, async ({
       mount,
       page,
@@ -1834,7 +1828,7 @@ test.describe("Accessibility tests for MultiSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await dropdownButton(page).click();
diff --git a/src/components/select/multi-select/multi-select.stories.tsx b/src/components/select/multi-select/multi-select.stories.tsx
index e58f47f693..b610c1994b 100644
--- a/src/components/select/multi-select/multi-select.stories.tsx
+++ b/src/components/select/multi-select/multi-select.stories.tsx
@@ -100,7 +100,7 @@ ListHeight.storyName = "List Height";
 export const Controlled: Story = () => {
   const [value, setValue] = useState<string[]>([]);
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as string[]);
+    setValue(event.target.value as unknown as string[]);
   }
   return (
     <Box height={250}>
@@ -394,7 +394,7 @@ export const WithIsLoadingProp: Story = () => {
         label="color"
         value={value}
         onChange={(event) =>
-          setValue((event.target.value as unknown) as string[])
+          setValue(event.target.value as unknown as string[])
         }
         onOpen={() => loadList()}
         isLoading={isLoading}
@@ -502,7 +502,7 @@ export const ValidationsStringNewDesign: Story = () => {
               <Option text="Yellow" value="11" />
             </MultiSelect>
           </Box>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
@@ -571,9 +571,8 @@ export const Virtualised: Story = () => {
 Virtualised.storyName = "Virtualised";
 
 export const ListWidth: Story = () => {
-  const [listPlacement, setListPlacement] = useState<
-    MultiSelectProps["listPlacement"]
-  >("bottom-end");
+  const [listPlacement, setListPlacement] =
+    useState<MultiSelectProps["listPlacement"]>("bottom-end");
   const [value, setValue] = useState<string[]>([]);
   const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
     const { value: updatedValue } = ev.target;
diff --git a/src/components/select/multi-select/multi-select.test.tsx b/src/components/select/multi-select/multi-select.test.tsx
index 5d0a11e5a0..9b07ecc420 100644
--- a/src/components/select/multi-select/multi-select.test.tsx
+++ b/src/components/select/multi-select/multi-select.test.tsx
@@ -30,12 +30,12 @@ test("displays default placeholder text when no value is selected", () => {
   render(
     <MultiSelect label="Colour" onChange={() => {}} value={[]}>
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAttribute(
     "placeholder",
-    "Please Select..."
+    "Please Select...",
   );
 });
 
@@ -48,12 +48,12 @@ test("displays custom text when placeholder prop is provided and no value is sel
       placeholder="Select a colour"
     >
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   expect(screen.getByRole("combobox")).toHaveAttribute(
     "placeholder",
-    "Select a colour"
+    "Select a colour",
   );
 });
 
@@ -67,7 +67,7 @@ describe("when value prop is provided", () => {
         placeholder="Select a colour"
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     const amberPill = screen.getByTitle("amber");
@@ -84,7 +84,7 @@ describe("when value prop is provided", () => {
         placeholder="Select a colour"
       >
         <Option text="amber" value={selectedOptions[0]} />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     const amberPill = screen.getByTitle("amber");
@@ -100,7 +100,7 @@ describe("when value prop is provided", () => {
         placeholder="Select a colour"
       >
         <Option text="amber" value="amber" borderColor="red" fill />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     const amberPill = screen.getByTitle("amber");
@@ -120,7 +120,7 @@ describe("when value prop is provided", () => {
       >
         <Option text="amber" value="amber" />
         <Option text="blue" value="blue" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     expect(screen.queryByTitle("green")).not.toBeInTheDocument();
@@ -135,7 +135,7 @@ describe("when value prop is provided", () => {
         placeholder="Select a colour"
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     rerender(
@@ -146,7 +146,7 @@ describe("when value prop is provided", () => {
         placeholder="Select a colour"
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     expect(screen.queryByTitle("amber")).not.toBeInTheDocument();
@@ -156,12 +156,12 @@ describe("when value prop is provided", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} value={["amber"]}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     const amberPill = screen.getByTitle("amber");
     expect(
-      within(amberPill).getByRole("button", { name: "remove pill" })
+      within(amberPill).getByRole("button", { name: "remove pill" }),
     ).toBeVisible();
   });
 
@@ -174,12 +174,12 @@ describe("when value prop is provided", () => {
         disabled
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     const amberPill = screen.getByTitle("amber");
     expect(
-      within(amberPill).queryByRole("button", { name: "remove pill" })
+      within(amberPill).queryByRole("button", { name: "remove pill" }),
     ).not.toBeInTheDocument();
   });
 
@@ -192,12 +192,12 @@ describe("when value prop is provided", () => {
         readOnly
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     const amberPill = screen.getByTitle("amber");
     expect(
-      within(amberPill).queryByRole("button", { name: "remove pill" })
+      within(amberPill).queryByRole("button", { name: "remove pill" }),
     ).not.toBeInTheDocument();
   });
 });
@@ -207,7 +207,7 @@ describe("accessible name of the input", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} value={[]}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     expect(screen.getByRole("combobox")).toHaveAccessibleName("Colour");
@@ -224,7 +224,7 @@ describe("accessible name of the input", () => {
         >
           <Option text="amber" value="amber" />
         </MultiSelect>
-      </>
+      </>,
     );
 
     expect(screen.getByRole("combobox")).toHaveAccessibleName("My Select");
@@ -242,7 +242,7 @@ describe("accessible name of the input", () => {
         >
           <Option text="amber" value="amber" />
         </MultiSelect>
-      </>
+      </>,
     );
 
     expect(screen.getByRole("combobox")).toHaveAccessibleName("My Select");
@@ -254,7 +254,7 @@ test("associates the dropdown list with the correct accessible name from the lab
   render(
     <MultiSelect label="Colour" onChange={() => {}} value={[]}>
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   await user.click(screen.getByRole("combobox"));
@@ -274,16 +274,16 @@ test.each(["top", "bottom"] as const)(
         onChange={() => {}}
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      `${listPlacement}-end`
+      `${listPlacement}-end`,
     );
-  }
+  },
 );
 
 test.each(["top-end", "bottom-end", "top-start", "bottom-start"] as const)(
@@ -298,16 +298,16 @@ test.each(["top-end", "bottom-end", "top-start", "bottom-start"] as const)(
         onChange={() => {}}
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      listPlacement
+      listPlacement,
     );
-  }
+  },
 );
 
 describe("dropdown list", () => {
@@ -316,7 +316,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -329,7 +329,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByTestId("input-icon-toggle"));
@@ -344,14 +344,14 @@ describe("dropdown list", () => {
       render(
         <MultiSelect label="Colour" onChange={() => {}}>
           <Option text="amber" value="amber" />
-        </MultiSelect>
+        </MultiSelect>,
       );
 
       await user.tab();
       await user.keyboard(key);
 
       expect(await screen.findByRole("listbox")).toBeVisible();
-    }
+    },
   );
 
   it.each(["Enter", "a"] as const)(
@@ -361,14 +361,14 @@ describe("dropdown list", () => {
       render(
         <MultiSelect label="Colour" onChange={() => {}}>
           <Option text="amber" value="amber" />
-        </MultiSelect>
+        </MultiSelect>,
       );
 
       await user.tab();
       await user.keyboard(`[${key}]`);
 
       expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-    }
+    },
   );
 
   it("does not open, when input is disabled and is clicked", async () => {
@@ -376,7 +376,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} disabled>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -389,7 +389,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} disabled>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.tab();
@@ -403,7 +403,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} readOnly>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("textbox"));
@@ -416,7 +416,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} readOnly>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.tab();
@@ -430,7 +430,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} openOnFocus>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.tab();
@@ -443,7 +443,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} openOnFocus={false}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.tab();
@@ -456,7 +456,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -470,7 +470,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -488,14 +488,14 @@ describe("dropdown list", () => {
           <Option text="amber" value="amber" />
         </MultiSelect>
         <p>Outside content</p>
-      </>
+      </>,
     );
 
     await user.click(screen.getByRole("combobox"));
     await user.click(screen.getByText("Outside content"));
 
     await waitFor(() =>
-      expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument(),
     );
   });
 
@@ -504,14 +504,14 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
     await user.click(screen.getByRole("combobox"));
 
     await waitFor(() =>
-      expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument(),
     );
   });
 
@@ -520,7 +520,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByTestId("input-icon-toggle"));
@@ -536,7 +536,7 @@ describe("dropdown list", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} openOnFocus>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -552,14 +552,14 @@ describe("when dropdown list is opened", () => {
       <MultiSelect label="Colour" onChange={() => {}} openOnFocus>
         <Option text="amber" value="amber" />
         <Option text="blue" value="blue" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.tab();
     await user.keyboard("{ArrowDown}");
 
     expect(
-      await screen.findByRole("option", { name: "amber" })
+      await screen.findByRole("option", { name: "amber" }),
     ).toHaveStyleRule("background-color", "var(--colorsUtilityMajor200)");
   });
 
@@ -569,7 +569,7 @@ describe("when dropdown list is opened", () => {
       <MultiSelect label="Colour" onChange={() => {}} openOnFocus>
         <Option text="amber" value="amber" />
         <Option text="blue" value="blue" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.tab();
@@ -577,7 +577,7 @@ describe("when dropdown list is opened", () => {
 
     expect(await screen.findByRole("option", { name: "blue" })).toHaveStyleRule(
       "background-color",
-      "var(--colorsUtilityMajor200)"
+      "var(--colorsUtilityMajor200)",
     );
   });
 
@@ -595,7 +595,7 @@ describe("when dropdown list is opened", () => {
           id="colour"
           value={value}
           onChange={(event) => {
-            setValue((event.target.value as unknown) as string[]);
+            setValue(event.target.value as unknown as string[]);
             onChange(event);
           }}
         >
@@ -616,7 +616,7 @@ describe("when dropdown list is opened", () => {
           id: "colour",
           value: ["amber"],
         }),
-      })
+      }),
     );
   });
 
@@ -627,7 +627,7 @@ describe("when dropdown list is opened", () => {
       <MultiSelect label="Colour" onChange={onChange} openOnFocus>
         <Option text="amber" value="amber" />
         <Option text="blue" value="blue" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.tab();
@@ -647,7 +647,7 @@ describe("when dropdown list is opened", () => {
       <MultiSelect label="Colour" onChange={onChange} value={["amber"]}>
         <Option text="amber" value="amber" />
         <Option text="blue" value="blue" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -661,7 +661,7 @@ describe("when dropdown list is opened", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
     await user.type(screen.getByRole("combobox"), "x");
     await screen.findByText('No results for "x"');
@@ -685,7 +685,7 @@ test.each(["Backspace", "Delete"])(
           label="Colour"
           value={value}
           onChange={(event) => {
-            setValue((event.target.value as unknown) as string[]);
+            setValue(event.target.value as unknown as string[]);
           }}
         >
           <Option text="amber" value="amber" />
@@ -700,7 +700,7 @@ test.each(["Backspace", "Delete"])(
 
     const amberPill = screen.queryByTitle("amber");
     expect(amberPill).not.toBeInTheDocument();
-  }
+  },
 );
 
 test("a selected option, that renders dimissible pill, can be removed by clicking the dismiss button", async () => {
@@ -713,7 +713,7 @@ test("a selected option, that renders dimissible pill, can be removed by clickin
         label="Colour"
         value={value}
         onChange={(event) => {
-          setValue((event.target.value as unknown) as string[]);
+          setValue(event.target.value as unknown as string[]);
         }}
       >
         <Option text="amber" value="amber" />
@@ -742,7 +742,7 @@ test("calls onChange prop when a previously selected option is removed", async (
         label="Colour"
         value={value}
         onChange={(ev) => {
-          setValue((ev.target.value as unknown) as string[]);
+          setValue(ev.target.value as unknown as string[]);
           onChange(ev);
         }}
       >
@@ -761,7 +761,7 @@ test("calls onChange prop when a previously selected option is removed", async (
       target: expect.objectContaining({
         value: ["amber"],
       }),
-    })
+    }),
   );
 });
 
@@ -776,7 +776,7 @@ test("does not call onChange prop, when Backspace key is pressed but nothing has
         label="Colour"
         value={value}
         onChange={(ev) => {
-          setValue((ev.target.value as unknown) as string[]);
+          setValue(ev.target.value as unknown as string[]);
           onChange(ev);
         }}
       >
@@ -801,7 +801,7 @@ test("clears the input after clicking away from it", async () => {
         <Option text="amber" value="amber" />
       </MultiSelect>
       <p>Outside content</p>
-    </>
+    </>,
   );
 
   await user.type(screen.getByRole("combobox"), "a");
@@ -815,7 +815,7 @@ test("clears the input after an option is selected", async () => {
   render(
     <MultiSelect label="Colour" onChange={() => {}}>
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   await user.type(screen.getByRole("combobox"), "amber");
@@ -831,7 +831,7 @@ describe("when onClick prop is passed", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} onClick={onClick}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -850,7 +850,7 @@ describe("when onClick prop is passed", () => {
         onClick={onClick}
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -869,7 +869,7 @@ describe("when onClick prop is passed", () => {
         onClick={onClick}
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("textbox"));
@@ -885,7 +885,7 @@ describe("when onOpen prop is passed", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} onOpen={onOpen}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -899,7 +899,7 @@ describe("when onOpen prop is passed", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} onOpen={onOpen}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.type(screen.getByRole("combobox"), "a");
@@ -918,7 +918,7 @@ describe("when onOpen prop is passed", () => {
         openOnFocus
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.tab();
@@ -932,7 +932,7 @@ describe("when onOpen prop is passed", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} onOpen={onOpen}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.click(screen.getByTestId("input-icon-toggle"));
@@ -947,7 +947,7 @@ test("calls onFocus prop when input is focused", async () => {
   render(
     <MultiSelect label="Colour" onChange={() => {}} onFocus={onFocus}>
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   await user.tab();
@@ -961,7 +961,7 @@ test("calls onBlur prop when input loses focus", async () => {
   render(
     <MultiSelect label="Colour" onChange={() => {}} onBlur={onBlur}>
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   await user.tab();
@@ -976,7 +976,7 @@ test("does not call onBlur, when input temporarily loses focus due to an option
   render(
     <MultiSelect label="Colour" onChange={() => {}} onBlur={onBlur}>
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   await user.click(screen.getByRole("combobox"));
@@ -991,7 +991,7 @@ test("calls onKeyDown prop when input is focused and a key is pressed", async ()
   render(
     <MultiSelect label="Colour" onChange={() => {}} onKeyDown={onKeyDown}>
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   await user.tab();
@@ -1010,7 +1010,7 @@ test("calls onFilterChange prop when input text changes", async () => {
       onFilterChange={onFilterChange}
     >
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   await user.type(screen.getByRole("combobox"), "a");
@@ -1024,7 +1024,7 @@ describe("when typing into the input", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}}>
         <Option text="red" value="red" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.type(screen.getByRole("combobox"), "   red");
@@ -1037,7 +1037,7 @@ describe("when typing into the input", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}}>
         <Option text="red" value="red" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     await user.type(screen.getByRole("combobox"), "red   ");
@@ -1052,7 +1052,7 @@ describe("forwarded ref", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} ref={mockRef}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     expect(mockRef).toHaveBeenNthCalledWith(1, screen.getByRole("combobox"));
@@ -1063,7 +1063,7 @@ describe("forwarded ref", () => {
     render(
       <MultiSelect label="Colour" onChange={() => {}} ref={mockRef}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     expect(mockRef.current).toBe(screen.getByRole("combobox"));
@@ -1078,12 +1078,12 @@ describe("deprecation warnings", () => {
     render(
       <MultiSelect label="Colour" onChange={undefined} defaultValue={["amber"]}>
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     expect(loggerSpy).toHaveBeenNthCalledWith(
       1,
-      "Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+      "Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
     );
   });
 
@@ -1097,7 +1097,7 @@ describe("deprecation warnings", () => {
         placeholder="Select a colour"
       >
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     expect(loggerSpy).not.toHaveBeenCalled();
@@ -1108,11 +1108,11 @@ describe("deprecation warnings", () => {
     render(
       <MultiSelect label="Colour" placeholder="Select a colour">
         <Option text="amber" value="amber" />
-      </MultiSelect>
+      </MultiSelect>,
     );
 
     expect(loggerSpy).not.toHaveBeenCalledWith(
-      "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+      "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
     );
   });
 });
@@ -1121,7 +1121,7 @@ test("marks input as required when required prop is true", () => {
   render(
     <MultiSelect label="Colour" onChange={() => {}} required>
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   expect(screen.getByRole("combobox")).toBeRequired();
@@ -1132,7 +1132,7 @@ test("does not call onOpen, when openOnFocus is true and the input is refocused
   render(
     <MultiSelect label="Colour" onChange={() => {}} onOpen={onOpen} openOnFocus>
       <Option text="amber" value="amber" />
-    </MultiSelect>
+    </MultiSelect>,
   );
 
   const input = screen.getByRole("combobox");
@@ -1154,7 +1154,7 @@ test("dropdown list is open on initial render, when autoFocus and openOnFocus pr
       <MultiSelect label="Colour" onChange={() => {}} autoFocus openOnFocus>
         <Option text="amber" value="amber" />
       </MultiSelect>
-    </Modal>
+    </Modal>,
   );
 
   act(() => {
@@ -1179,5 +1179,5 @@ testStyledSystemMarginRTL(
       <Option text="amber" value="amber" />
     </MultiSelect>
   ),
-  () => screen.getByTestId("my-select")
+  () => screen.getByTestId("my-select"),
 );
diff --git a/src/components/select/option-group-header/option-group-header.component.tsx b/src/components/select/option-group-header/option-group-header.component.tsx
index a089393aaa..afceb71e71 100644
--- a/src/components/select/option-group-header/option-group-header.component.tsx
+++ b/src/components/select/option-group-header/option-group-header.component.tsx
@@ -31,14 +31,14 @@ export interface OptionGroupHeaderProps
 const OptionGroupHeader = React.forwardRef(
   (
     { label, icon, style, id, children, ...rest }: OptionGroupHeaderProps,
-    ref: React.ForwardedRef<HTMLDivElement>
+    ref: React.ForwardedRef<HTMLDivElement>,
   ) => {
     const internalIdRef = useRef(id || guid());
 
     if (!(children || label)) {
       // eslint-disable-next-line no-console
       console.warn(
-        "OptionGroupHeader requires either a label or children to be provided"
+        "OptionGroupHeader requires either a label or children to be provided",
       );
     }
 
@@ -58,7 +58,7 @@ const OptionGroupHeader = React.forwardRef(
         )}
       </StyledOptionGroupHeader>
     );
-  }
+  },
 );
 
 OptionGroupHeader.displayName = "OptionGroupHeader";
diff --git a/src/components/select/option-group-header/option-group-header.test.tsx b/src/components/select/option-group-header/option-group-header.test.tsx
index 7dade7ff44..1e75c86450 100644
--- a/src/components/select/option-group-header/option-group-header.test.tsx
+++ b/src/components/select/option-group-header/option-group-header.test.tsx
@@ -13,12 +13,12 @@ test("should not render the `label` and `icon` when `children` are passed", () =
   render(
     <OptionGroupHeader label="foo" icon="shop">
       <h2>bar</h2>
-    </OptionGroupHeader>
+    </OptionGroupHeader>,
   );
 
   expect(screen.getByRole("heading", { name: "bar", level: 2 })).toBeVisible();
   expect(
-    screen.queryByRole("heading", { name: "foo", level: 4 })
+    screen.queryByRole("heading", { name: "foo", level: 4 }),
   ).not.toBeInTheDocument();
   expect(screen.queryByTestId("icon")).not.toBeInTheDocument();
 });
@@ -30,14 +30,14 @@ test("should render with the expected `data-` attributes", () => {
       icon="shop"
       data-element="bar"
       data-role="baz"
-    />
+    />,
   );
 
   const optionGroupHeader = screen.getByTestId("baz");
 
   expect(optionGroupHeader).toHaveAttribute(
     "data-component",
-    "option-group-header"
+    "option-group-header",
   );
   expect(optionGroupHeader).toHaveAttribute("data-element", "bar");
 });
@@ -47,7 +47,7 @@ test("should trigger a console warning when no label or children are provided",
   render(<OptionGroupHeader />);
 
   expect(spy).toHaveBeenCalledWith(
-    "OptionGroupHeader requires either a label or children to be provided"
+    "OptionGroupHeader requires either a label or children to be provided",
   );
   spy.mockRestore();
 });
diff --git a/src/components/select/option-row/option-row.component.tsx b/src/components/select/option-row/option-row.component.tsx
index a443f78605..1926ed31d4 100644
--- a/src/components/select/option-row/option-row.component.tsx
+++ b/src/components/select/option-row/option-row.component.tsx
@@ -59,7 +59,7 @@ const OptionRow = React.forwardRef(
       style,
       ...rest
     }: OptionRowProps,
-    ref: React.ForwardedRef<HTMLTableRowElement>
+    ref: React.ForwardedRef<HTMLTableRowElement>,
   ) => {
     const internalIdRef = useRef(id || guid());
 
@@ -96,7 +96,7 @@ const OptionRow = React.forwardRef(
         {children}
       </StyledOptionRow>
     );
-  }
+  },
 );
 
 OptionRow.displayName = "OptionRow";
diff --git a/src/components/select/option-row/option-row.test.tsx b/src/components/select/option-row/option-row.test.tsx
index cd94b6a329..f7e45f4ae3 100644
--- a/src/components/select/option-row/option-row.test.tsx
+++ b/src/components/select/option-row/option-row.test.tsx
@@ -17,7 +17,7 @@ test("renders with children content visible", () => {
           <td>bar</td>
         </OptionRow>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("option", { name: "bar" })).toBeVisible();
@@ -31,7 +31,7 @@ test("should not render when hidden prop is set", () => {
           <td>bar</td>
         </OptionRow>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.queryByRole("option", { name: "bar" })).not.toBeInTheDocument();
@@ -45,12 +45,12 @@ test("should set guid as `id` on the element when none passed", () => {
           <td>bar</td>
         </OptionRow>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("option", { name: "bar" })).toHaveAttribute(
     "id",
-    mockedGuid
+    mockedGuid,
   );
 });
 
@@ -62,12 +62,12 @@ test("should set custom `id` on the element when passed", () => {
           <td>baz</td>
         </OptionRow>
       </tbody>
-    </table>
+    </table>,
   );
 
   expect(screen.getByRole("option", { name: "baz" })).toHaveAttribute(
     "id",
-    "foo"
+    "foo",
   );
 });
 
@@ -80,7 +80,7 @@ describe("when `disabled` prop is set", () => {
             <td>bar</td>
           </OptionRow>
         </tbody>
-      </table>
+      </table>,
     );
     const optionRow = screen.getByRole("option", { name: "bar" });
 
@@ -96,7 +96,7 @@ describe("when `disabled` prop is set", () => {
             <td>bar</td>
           </OptionRow>
         </tbody>
-      </table>
+      </table>,
     );
     const optionRow = screen.getByRole("option", { name: "bar" });
 
@@ -113,7 +113,7 @@ describe("when `disabled` prop is set", () => {
             <td>bar</td>
           </OptionRow>
         </tbody>
-      </table>
+      </table>,
     );
     const optionRow = screen.getByRole("option", { name: "bar" });
     await user.click(optionRow);
@@ -131,13 +131,13 @@ describe("when `disabled` prop is not set", () => {
             <td>bar</td>
           </OptionRow>
         </tbody>
-      </table>
+      </table>,
     );
     const optionRow = screen.getByRole("option", { name: "bar" });
 
     expect(optionRow).not.toHaveStyleRule(
       "color",
-      "var(--colorsUtilityYin030)"
+      "var(--colorsUtilityYin030)",
     );
     expect(optionRow).toHaveStyle("cursor: pointer");
   });
@@ -150,7 +150,7 @@ describe("when `disabled` prop is not set", () => {
             <td>bar</td>
           </OptionRow>
         </tbody>
-      </table>
+      </table>,
     );
     const optionRow = screen.getByRole("option", { name: "bar" });
 
@@ -167,7 +167,7 @@ describe("when `disabled` prop is not set", () => {
             <td>bar</td>
           </OptionRow>
         </tbody>
-      </table>
+      </table>,
     );
     const optionRow = screen.getByRole("option", { name: "bar" });
     await user.click(optionRow);
@@ -189,7 +189,7 @@ describe("when `disabled` prop is not set", () => {
             <td>bar</td>
           </OptionRow>
         </tbody>
-      </table>
+      </table>,
     );
     const optionRow = screen.getByRole("option", { name: "bar" });
     await user.click(optionRow);
@@ -210,7 +210,7 @@ test("should render with `data-` attributes set when props are passed", () => {
           <td>bar</td>
         </OptionRow>
       </tbody>
-    </table>
+    </table>,
   );
   const optionRow = screen.getByRole("option", { name: "bar" });
 
@@ -230,12 +230,12 @@ describe("when the `multiSelectValues` list is passed via context", () => {
             </OptionRow>
           </tbody>
         </table>
-      </SelectListContext.Provider>
+      </SelectListContext.Provider>,
     );
 
     expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
       "aria-selected",
-      "true"
+      "true",
     );
   });
 
@@ -249,12 +249,12 @@ describe("when the `multiSelectValues` list is passed via context", () => {
             </OptionRow>
           </tbody>
         </table>
-      </SelectListContext.Provider>
+      </SelectListContext.Provider>,
     );
 
     expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
       "aria-selected",
-      "false"
+      "false",
     );
   });
 
@@ -268,12 +268,12 @@ describe("when the `multiSelectValues` list is passed via context", () => {
             </OptionRow>
           </tbody>
         </table>
-      </SelectListContext.Provider>
+      </SelectListContext.Provider>,
     );
 
     expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
       "aria-selected",
-      "false"
+      "false",
     );
   });
 });
diff --git a/src/components/select/option/option.component.tsx b/src/components/select/option/option.component.tsx
index 03ff613b77..0ea85a3d78 100644
--- a/src/components/select/option/option.component.tsx
+++ b/src/components/select/option/option.component.tsx
@@ -63,7 +63,7 @@ const Option = React.forwardRef(
       style,
       ...rest
     }: OptionProps,
-    ref: React.ForwardedRef<HTMLLIElement>
+    ref: React.ForwardedRef<HTMLLIElement>,
   ) => {
     const selectListContext = useContext(SelectListContext);
     let isSelected = selectListContext.currentOptionsListIndex === index;
@@ -104,7 +104,7 @@ const Option = React.forwardRef(
         {children || text}
       </StyledOption>
     );
-  }
+  },
 );
 
 Option.displayName = "Option";
diff --git a/src/components/select/option/option.test.tsx b/src/components/select/option/option.test.tsx
index f40d781e8d..051c891e9a 100644
--- a/src/components/select/option/option.test.tsx
+++ b/src/components/select/option/option.test.tsx
@@ -13,7 +13,7 @@ test("renders with `text` content visible", () => {
   render(
     <ul>
       <Option text="foo" value="1" />
-    </ul>
+    </ul>,
   );
 
   expect(screen.getByRole("option", { name: "foo" })).toBeVisible();
@@ -25,7 +25,7 @@ test("renders with `children` content visible instead of `text` when both are pa
       <Option text="foo" value="1">
         bar
       </Option>
-    </ul>
+    </ul>,
   );
 
   expect(screen.getByRole("option", { name: "bar" })).toBeVisible();
@@ -35,7 +35,7 @@ test("does not render when `hidden` prop is set", () => {
   render(
     <ul>
       <Option text="foo" value="1" hidden />
-    </ul>
+    </ul>,
   );
 
   expect(screen.queryByRole("option", { name: "foo" })).not.toBeInTheDocument();
@@ -45,7 +45,7 @@ test("should set the expected `data-` attributes when props passed", () => {
   render(
     <ul>
       <Option text="foo" value="1" data-element="bar" data-role="baz" />
-    </ul>
+    </ul>,
   );
 
   const option = screen.getByRole("option", { name: "foo" });
@@ -59,12 +59,12 @@ test("should set guid as `id` on the element when none passed", () => {
   render(
     <ul>
       <Option text="foo" value="1" />
-    </ul>
+    </ul>,
   );
 
   expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
     "id",
-    mockedGuid
+    mockedGuid,
   );
 });
 
@@ -72,12 +72,12 @@ test("should set `id` on the element when passed", () => {
   render(
     <ul>
       <Option text="foo" value="1" id="bar" />
-    </ul>
+    </ul>,
   );
 
   expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
     "id",
-    "bar"
+    "bar",
   );
 });
 
@@ -85,7 +85,7 @@ test("should not render with cursor style pointer when no value or text is passe
   render(
     <ul>
       <Option>Foo</Option>
-    </ul>
+    </ul>,
   );
 
   expect(screen.getByRole("option")).not.toHaveStyle("cursor: pointer");
@@ -96,7 +96,7 @@ describe("when `disabled` prop is set", () => {
     render(
       <ul>
         <Option text="foo" value="1" disabled />
-      </ul>
+      </ul>,
     );
     const option = screen.getByRole("option", { name: "foo" });
 
@@ -108,7 +108,7 @@ describe("when `disabled` prop is set", () => {
     render(
       <ul>
         <Option text="foo" value="1" disabled />
-      </ul>
+      </ul>,
     );
     const option = screen.getByRole("option", { name: "foo" });
 
@@ -128,7 +128,7 @@ describe("when `disabled` prop is set", () => {
           onSelect={onSelect}
           disabled
         />
-      </ul>
+      </ul>,
     );
 
     await user.click(screen.getByRole("option", { name: "foo" }));
@@ -143,7 +143,7 @@ describe("when `disabled` prop is not set", () => {
     render(
       <ul>
         <Option text="foo" value="1" />
-      </ul>
+      </ul>,
     );
     const option = screen.getByRole("option", { name: "foo" });
 
@@ -155,7 +155,7 @@ describe("when `disabled` prop is not set", () => {
     render(
       <ul>
         <Option text="foo" value="1" />
-      </ul>
+      </ul>,
     );
     const option = screen.getByRole("option", { name: "foo" });
 
@@ -169,7 +169,7 @@ describe("when `disabled` prop is not set", () => {
     render(
       <ul>
         <Option text="foo" value="1" onClick={onClick} onSelect={onSelect} />
-      </ul>
+      </ul>,
     );
 
     await user.click(screen.getByRole("option", { name: "foo" }));
@@ -184,7 +184,7 @@ describe("when `disabled` prop is not set", () => {
     render(
       <ul>
         <Option text="foo" value="bar" onSelect={onSelect} />
-      </ul>
+      </ul>,
     );
 
     await user.click(screen.getByRole("option", { name: "foo" }));
@@ -202,7 +202,7 @@ describe("when `disabled` prop is not set", () => {
     render(
       <ul>
         <Option id="foo" text="bar" value="baz" onSelect={onSelect} />
-      </ul>
+      </ul>,
     );
 
     await user.click(screen.getByRole("option", { name: "bar" }));
@@ -222,7 +222,7 @@ describe("when `disabled` prop is not set", () => {
     render(
       <ul>
         <Option {...props}>Foo</Option>
-      </ul>
+      </ul>,
     );
     await user.click(screen.getByRole("option"));
 
@@ -238,12 +238,12 @@ describe("when the `multiSelectValues` list is passed via context", () => {
         <ul>
           <Option text="foo" value="1" />
         </ul>
-      </SelectListContext.Provider>
+      </SelectListContext.Provider>,
     );
 
     expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
       "aria-selected",
-      "true"
+      "true",
     );
   });
 
@@ -253,12 +253,12 @@ describe("when the `multiSelectValues` list is passed via context", () => {
         <ul>
           <Option text="foo" value="1" />
         </ul>
-      </SelectListContext.Provider>
+      </SelectListContext.Provider>,
     );
 
     expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
       "aria-selected",
-      "false"
+      "false",
     );
   });
 
@@ -268,12 +268,12 @@ describe("when the `multiSelectValues` list is passed via context", () => {
         <ul>
           <Option text="foo" value="1" />
         </ul>
-      </SelectListContext.Provider>
+      </SelectListContext.Provider>,
     );
 
     expect(screen.getByRole("option", { name: "foo" })).toHaveAttribute(
       "aria-selected",
-      "false"
+      "false",
     );
   });
 });
diff --git a/src/components/select/simple-select/components.test-pw.tsx b/src/components/select/simple-select/components.test-pw.tsx
index 27eea052b0..80269442fe 100644
--- a/src/components/select/simple-select/components.test-pw.tsx
+++ b/src/components/select/simple-select/components.test-pw.tsx
@@ -45,7 +45,7 @@ export const SimpleSelectComponent = (props: Partial<SimpleSelectProps>) => {
 };
 
 export const SimpleSelectWithLazyLoadingComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const [value, setValue] = useState("black");
@@ -91,7 +91,7 @@ export const SimpleSelectWithLazyLoadingComponent = (
 };
 
 export const SimpleSelectWithInfiniteScrollComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const preventLazyLoading = useRef(false);
@@ -174,7 +174,7 @@ export const SimpleSelectWithInfiniteScrollComponent = (
 };
 
 export const SimpleSelectObjectAsValueComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   const optionListValues = [
     { id: "Amber", value: 1, text: "Amber" },
@@ -191,11 +191,11 @@ export const SimpleSelectObjectAsValueComponent = (
   ];
 
   const [value, setValue] = useState<Record<string, unknown>>(
-    optionListValues[4]
+    optionListValues[4],
   );
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as Record<string, unknown>);
+    setValue(event.target.value as unknown as Record<string, unknown>);
   }
   return (
     <SimpleSelect
@@ -213,7 +213,7 @@ export const SimpleSelectObjectAsValueComponent = (
 };
 
 export const SimpleSelectMultipleColumnsComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   return (
     <SimpleSelect
@@ -267,7 +267,7 @@ export const SimpleSelectMultipleColumnsComponent = (
 };
 
 export const SimpleSelectCustomOptionChildrenComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   return (
     <SimpleSelect
@@ -298,7 +298,7 @@ export const SimpleSelectCustomOptionChildrenComponent = (
 };
 
 export const SimpleSelectGroupComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   return (
     <SimpleSelect name="optGroups" id="optGroups" {...props}>
@@ -572,7 +572,7 @@ export const WithObjectAsValue = () => {
   ];
 
   const [value, setValue] = useState<Record<string, unknown>>(
-    optionListValues[4]
+    optionListValues[4],
   );
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
diff --git a/src/components/select/simple-select/simple-select-test.stories.tsx b/src/components/select/simple-select/simple-select-test.stories.tsx
index 071b10f449..92db2359fd 100644
--- a/src/components/select/simple-select/simple-select-test.stories.tsx
+++ b/src/components/select/simple-select/simple-select-test.stories.tsx
@@ -184,7 +184,7 @@ export const SimpleSelectComponent = (props: Partial<SimpleSelectProps>) => {
 };
 
 export const SimpleSelectWithLazyLoadingComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const [value, setValue] = useState("black");
@@ -234,7 +234,7 @@ export const SimpleSelectWithLazyLoadingComponent = (
 };
 
 export const SimpleSelectWithInfiniteScrollComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   const preventLoading = useRef(false);
   const preventLazyLoading = useRef(false);
@@ -324,7 +324,7 @@ export const SimpleSelectWithInfiniteScrollComponent = (
 };
 
 export const SimpleSelectObjectAsValueComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   const optionListValues = [
     { id: "Amber", value: 1, text: "Amber" },
@@ -341,11 +341,11 @@ export const SimpleSelectObjectAsValueComponent = (
   ];
 
   const [value, setValue] = useState<Record<string, unknown>>(
-    optionListValues[4]
+    optionListValues[4],
   );
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue((event.target.value as unknown) as Record<string, unknown>);
+    setValue(event.target.value as unknown as Record<string, unknown>);
   }
   return (
     <SimpleSelect
@@ -363,7 +363,7 @@ export const SimpleSelectObjectAsValueComponent = (
 };
 
 export const SimpleSelectMultipleColumnsComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   return (
     <SimpleSelect
@@ -417,7 +417,7 @@ export const SimpleSelectMultipleColumnsComponent = (
 };
 
 export const SimpleSelectCustomOptionChildrenComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   return (
     <SimpleSelect
@@ -448,7 +448,7 @@ export const SimpleSelectCustomOptionChildrenComponent = (
 };
 
 export const SimpleSelectGroupComponent = (
-  props: Partial<SimpleSelectProps>
+  props: Partial<SimpleSelectProps>,
 ) => {
   return (
     <SimpleSelect name="optGroups" id="optGroups" {...props}>
diff --git a/src/components/select/simple-select/simple-select.component.tsx b/src/components/select/simple-select/simple-select.component.tsx
index 5f7f2e9cf5..905c67cb29 100644
--- a/src/components/select/simple-select/simple-select.component.tsx
+++ b/src/components/select/simple-select/simple-select.component.tsx
@@ -95,7 +95,7 @@ export interface SimpleSelectProps
   isRequired?: boolean;
   /** Specify a callback triggered on change */
   onChange?: (
-    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>
+    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>,
   ) => void;
   /** Override the default width of the list element. Number passed is converted into pixel value */
   listWidth?: number;
@@ -143,7 +143,7 @@ export const SimpleSelect = React.forwardRef<
       listWidth,
       ...props
     },
-    ref
+    ref,
   ) => {
     const selectListId = useRef(guid());
     const containerRef = useRef<HTMLDivElement>(null);
@@ -174,13 +174,14 @@ export const SimpleSelect = React.forwardRef<
     if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
-    const childOptions = useMemo(() => React.Children.toArray(children), [
-      children,
-    ]) as React.ReactElement[];
+    const childOptions = useMemo(
+      () => React.Children.toArray(children),
+      [children],
+    ) as React.ReactElement[];
 
     const createCustomEvent = useCallback(
       (newValue, selectionConfirmed = false) => {
@@ -195,7 +196,7 @@ export const SimpleSelect = React.forwardRef<
 
         return customEvent as CustomSelectChangeEvent;
       },
-      [name, id]
+      [name, id],
     );
 
     const selectValueStartingWithText = useCallback(
@@ -204,12 +205,12 @@ export const SimpleSelect = React.forwardRef<
           const previousIndex = childOptions.findIndex(
             (child) =>
               React.isValidElement(child) &&
-              isExpectedOption(child, previousValue)
+              isExpectedOption(child, previousValue),
           );
           const match = getNextChildByText(
             newFilterText,
             childOptions,
-            previousIndex
+            previousIndex,
           );
 
           if (!match) {
@@ -227,7 +228,7 @@ export const SimpleSelect = React.forwardRef<
           return match.props.value;
         });
       },
-      [childOptions, createCustomEvent, onChange]
+      [childOptions, createCustomEvent, onChange],
     );
 
     const triggerFilterChange = useCallback(
@@ -251,7 +252,7 @@ export const SimpleSelect = React.forwardRef<
           filterText.current = "";
         }, 500);
       },
-      [selectValueStartingWithText]
+      [selectValueStartingWithText],
     );
 
     const handleTextboxKeydown = useCallback(
@@ -274,7 +275,7 @@ export const SimpleSelect = React.forwardRef<
           triggerFilterChange(key);
         }
       },
-      [triggerFilterChange, onKeyDown, onOpen, readOnly]
+      [triggerFilterChange, onKeyDown, onOpen, readOnly],
     );
 
     const handleGlobalClick = useCallback((event) => {
@@ -301,11 +302,11 @@ export const SimpleSelect = React.forwardRef<
 
       invariant(
         isControlled.current === (value !== undefined),
-        modeSwitchedMessage
+        modeSwitchedMessage,
       );
       invariant(
         !isControlled.current || (isControlled.current && onChange),
-        onChangeMissingMessage
+        onChangeMissingMessage,
       );
 
       if (isControlled.current) {
@@ -315,7 +316,7 @@ export const SimpleSelect = React.forwardRef<
 
     useEffect(() => {
       const matchingOption = childOptions.find((child) =>
-        isExpectedOption(child, selectedValue)
+        isExpectedOption(child, selectedValue),
       );
       let newText = "";
 
@@ -360,7 +361,7 @@ export const SimpleSelect = React.forwardRef<
     }
 
     function handleDropdownIconClick(
-      event: React.MouseEvent<HTMLInputElement>
+      event: React.MouseEvent<HTMLInputElement>,
     ) {
       handleTextboxClick(event);
     }
@@ -416,7 +417,7 @@ export const SimpleSelect = React.forwardRef<
     function updateValue(
       newValue?: string | Record<string, unknown>,
       text?: string,
-      selectionConfirmed?: boolean
+      selectionConfirmed?: boolean,
     ) {
       if (!isControlled.current) {
         setSelectedValue(newValue);
@@ -466,7 +467,7 @@ export const SimpleSelect = React.forwardRef<
           ref.current = element;
         }
       },
-      [ref]
+      [ref],
     );
 
     function getTextboxProps() {
@@ -479,7 +480,7 @@ export const SimpleSelect = React.forwardRef<
         formattedValue: textValue,
         onClick: handleTextboxClick,
         iconOnClick: handleDropdownIconClick as (
-          ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+          ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
         ) => void,
         label,
         labelId,
@@ -561,7 +562,7 @@ export const SimpleSelect = React.forwardRef<
         {selectList}
       </StyledSelect>
     );
-  }
+  },
 );
 
 export default SimpleSelect;
diff --git a/src/components/select/simple-select/simple-select.pw.tsx b/src/components/select/simple-select/simple-select.pw.tsx
index 0efb533986..8a2bf4de30 100644
--- a/src/components/select/simple-select/simple-select.pw.tsx
+++ b/src/components/select/simple-select/simple-select.pw.tsx
@@ -72,11 +72,11 @@ test.describe("When focused", () => {
     await selectInputElement.focus();
     await expect(selectInputElement.locator("..")).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(selectInputElement.locator("..")).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -93,7 +93,7 @@ test.describe("When focused", () => {
     await selectInputElement.focus();
     await expect(selectInputElement.locator("..")).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 });
@@ -140,7 +140,7 @@ test.describe("SimpleSelect component", () => {
     await mount(<SimpleSelectComponent data-component={testPropValue} />);
 
     await expect(
-      selectElementInput(page).locator("..").locator("..")
+      selectElementInput(page).locator("..").locator(".."),
     ).toHaveAttribute("data-component", testPropValue);
   });
 
@@ -151,7 +151,7 @@ test.describe("SimpleSelect component", () => {
     await mount(<SimpleSelectComponent data-element={testPropValue} />);
 
     await expect(
-      selectElementInput(page).locator("..").locator("..")
+      selectElementInput(page).locator("..").locator(".."),
     ).toHaveAttribute("data-element", testPropValue);
   });
 
@@ -162,16 +162,18 @@ test.describe("SimpleSelect component", () => {
     await mount(<SimpleSelectComponent data-role={testPropValue} />);
 
     await expect(
-      selectElementInput(page).locator("..").locator("..")
+      selectElementInput(page).locator("..").locator(".."),
     ).toHaveAttribute("data-role", testPropValue);
   });
 
-  ([
-    ["top", "200px", "0px", "0px", "0px"],
-    ["bottom", "0px", "0px", "0px", "0px"],
-    ["left", "200px", "0px", "200px", "0px"],
-    ["right", "200px", "0px", "0px", "200px"],
-  ] as const).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "200px", "0px", "0px", "0px"],
+      ["bottom", "0px", "0px", "0px", "0px"],
+      ["left", "200px", "0px", "200px", "0px"],
+      ["right", "200px", "0px", "0px", "200px"],
+    ] as const
+  ).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
     test(`should render the help tooltip in the ${tooltipPositionValue} position`, async ({
       mount,
       page,
@@ -184,7 +186,7 @@ test.describe("SimpleSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await helpIcon(page).hover();
@@ -192,7 +194,7 @@ test.describe("SimpleSelect component", () => {
       await expect(tooltipElement).toBeVisible();
       await expect(tooltipElement).toHaveAttribute(
         "data-placement",
-        tooltipPositionValue
+        tooltipPositionValue,
       );
     });
   });
@@ -211,7 +213,7 @@ test.describe("SimpleSelect component", () => {
     await expect(dropdownButtonElement).toBeVisible();
     await expect(dropdownButtonElement).toHaveCSS(
       "color",
-      "rgba(0, 0, 0, 0.3)"
+      "rgba(0, 0, 0, 0.3)",
     );
   });
 
@@ -231,7 +233,7 @@ test.describe("SimpleSelect component", () => {
     await expect(dropdownButtonElement).toBeVisible();
     await expect(dropdownButtonElement).toHaveCSS(
       "color",
-      "rgba(0, 0, 0, 0.3)"
+      "rgba(0, 0, 0, 0.3)",
     );
   });
 
@@ -240,15 +242,17 @@ test.describe("SimpleSelect component", () => {
 
     await expect(getDataElementByValue(page, "input")).toHaveCSS(
       "background",
-      "rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box"
+      "rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box",
     );
   });
 
-  ([
-    [SIZE.SMALL, "32px"],
-    [SIZE.MEDIUM, "40px"],
-    [SIZE.LARGE, "48px"],
-  ] as [SimpleSelectProps["size"], string][]).forEach(([size, height]) => {
+  (
+    [
+      [SIZE.SMALL, "32px"],
+      [SIZE.MEDIUM, "40px"],
+      [SIZE.LARGE, "48px"],
+    ] as [SimpleSelectProps["size"], string][]
+  ).forEach(([size, height]) => {
     test(`should use ${size} as size and render with ${height} as height`, async ({
       mount,
       page,
@@ -257,7 +261,7 @@ test.describe("SimpleSelect component", () => {
 
       await expect(commonDataElementInputPreview(page).locator("..")).toHaveCSS(
         "min-height",
-        height
+        height,
       );
     });
   });
@@ -279,34 +283,32 @@ test.describe("SimpleSelect component", () => {
 
     await expect(getDataElementByValue(page, "label").locator("..")).toHaveCSS(
       "-webkit-box-pack",
-      "end"
+      "end",
     );
   });
 
-  ([
-    ["right", "end"],
-    ["left", "start"],
-  ] as [SimpleSelectProps["labelAlign"], string][]).forEach(
-    ([alignment, cssProp]) => {
-      test(`should use ${alignment} as labelAlignment and render with flex-${cssProp} as css properties`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <SimpleSelectComponent labelInline labelAlign={alignment} />
-        );
+  (
+    [
+      ["right", "end"],
+      ["left", "start"],
+    ] as [SimpleSelectProps["labelAlign"], string][]
+  ).forEach(([alignment, cssProp]) => {
+    test(`should use ${alignment} as labelAlignment and render with flex-${cssProp} as css properties`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<SimpleSelectComponent labelInline labelAlign={alignment} />);
 
-        const labelParentElement = getDataElementByValue(page, "label").locator(
-          ".."
-        );
-        await expect(labelParentElement).toHaveCSS("-webkit-box-pack", cssProp);
-        await expect(labelParentElement).toHaveCSS(
-          "justify-content",
-          `flex-${cssProp}`
-        );
-      });
-    }
-  );
+      const labelParentElement = getDataElementByValue(page, "label").locator(
+        "..",
+      );
+      await expect(labelParentElement).toHaveCSS("-webkit-box-pack", cssProp);
+      await expect(labelParentElement).toHaveCSS(
+        "justify-content",
+        `flex-${cssProp}`,
+      );
+    });
+  });
 
   [
     [10, 90, 135, 1229],
@@ -322,18 +324,18 @@ test.describe("SimpleSelect component", () => {
           labelInline
           labelWidth={label}
           inputWidth={input}
-        />
+        />,
       );
 
       await assertCssValueIsApproximately(
         getDataElementByValue(page, "label").locator(".."),
         "width",
-        labelRatio
+        labelRatio,
       );
       await assertCssValueIsApproximately(
         getDataElementByValue(page, "input").locator(".."),
         "width",
-        inputRatio
+        inputRatio,
       );
     });
   });
@@ -343,7 +345,7 @@ test.describe("SimpleSelect component", () => {
       await mount(<SimpleSelectComponent maxWidth={maxWidth} />);
 
       await expect(
-        getDataElementByValue(page, "input").locator("..").locator("..")
+        getDataElementByValue(page, "input").locator("..").locator(".."),
       ).toHaveCSS("max-width", maxWidth);
     });
   });
@@ -355,7 +357,7 @@ test.describe("SimpleSelect component", () => {
     await mount(<SimpleSelectComponent maxWidth="" />);
 
     await expect(
-      getDataElementByValue(page, "input").locator("..").locator("..")
+      getDataElementByValue(page, "input").locator("..").locator(".."),
     ).toHaveCSS("max-width", "100%");
   });
 
@@ -485,7 +487,7 @@ test.describe("SimpleSelect component", () => {
     await selectOptionByText(page, optionValue11).scrollIntoViewIfNeeded();
     await expect(selectOptionByText(page, optionValue8)).toBeInViewport();
     await expect(
-      selectOptionByText(page, optionValue9).nth(1)
+      selectOptionByText(page, optionValue9).nth(1),
     ).toBeInViewport();
     await expect(selectOptionByText(page, optionValue10)).toBeInViewport();
     await expect(selectOptionByText(page, optionValue11)).toBeInViewport();
@@ -500,7 +502,7 @@ test.describe("SimpleSelect component", () => {
     await selectText(page).click();
     await expect(selectListWrapper(page)).toBeVisible();
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible()),
     );
   });
 
@@ -515,7 +517,7 @@ test.describe("SimpleSelect component", () => {
     await selectText(page).click();
     await expect(selectListWrapperElement).toBeVisible();
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).toBeVisible()),
     );
     await expect(selectOptionByText(page, option)).toHaveCount(0);
     await page.waitForTimeout(2000);
@@ -524,7 +526,7 @@ test.describe("SimpleSelect component", () => {
     });
     await page.waitForTimeout(250);
     await Promise.all(
-      [0, 1, 2].map((i) => expect(loader(page, i)).not.toBeVisible())
+      [0, 1, 2].map((i) => expect(loader(page, i)).not.toBeVisible()),
     );
     await expect(selectOptionByText(page, option)).toBeVisible();
   });
@@ -585,12 +587,12 @@ test.describe("SimpleSelect component", () => {
     await selectText(page).click();
     await scrollableWrapper.evaluate((wrapper) => wrapper.scrollBy(0, 500));
     const scrollPositionBeforeLoad = await scrollableWrapper.evaluate(
-      (element) => element.scrollTop
+      (element) => element.scrollTop,
     );
 
     await selectOptionByText(page, "Lazy Loaded A1").waitFor();
     const scrollPositionAfterLoad = await scrollableWrapper.evaluate(
-      (element) => element.scrollTop
+      (element) => element.scrollTop,
     );
     expect(scrollPositionAfterLoad).toBe(scrollPositionBeforeLoad);
   });
@@ -624,7 +626,7 @@ test.describe("SimpleSelect component", () => {
 
     await expect(optionElement).toHaveCSS(
       "background-color",
-      "rgb(153, 173, 183)"
+      "rgb(153, 173, 183)",
     );
   });
 
@@ -646,7 +648,7 @@ test.describe("SimpleSelect component", () => {
     const optionElement = selectOptionByText(page, "Green");
     await expect(optionElement).toHaveCSS(
       "background-color",
-      "rgba(0, 0, 0, 0)"
+      "rgba(0, 0, 0, 0)",
     );
   });
 
@@ -668,7 +670,7 @@ test.describe("SimpleSelect component", () => {
     const optionElement = selectOptionByText(page, "Green");
     await expect(optionElement).toHaveCSS(
       "background-color",
-      "rgba(0, 0, 0, 0)"
+      "rgba(0, 0, 0, 0)",
     );
   });
 
@@ -713,7 +715,7 @@ test.describe("SimpleSelect component", () => {
     await Promise.all(bodyAssertions);
     await expect(multiColumnsSelectListRow(page)).toHaveCSS(
       "background-color",
-      "rgb(153, 173, 183)"
+      "rgb(153, 173, 183)",
     );
   });
 
@@ -738,11 +740,13 @@ test.describe("SimpleSelect component", () => {
     await expect(thirdColumnElement).toBeVisible();
   });
 
-  ([
-    [1, "favourite", "orange"],
-    [2, "money_bag", "black"],
-    [3, "gift", "blue"],
-  ] as [number, string, string][]).forEach(([option, type, color]) => {
+  (
+    [
+      [1, "favourite", "orange"],
+      [2, "money_bag", "black"],
+      [3, "gift", "blue"],
+    ] as [number, string, string][]
+  ).forEach(([option, type, color]) => {
     test(`should render list option ${option} with custom option ${type} icon and custom icon color ${color}`, async ({
       mount,
       page,
@@ -774,7 +778,7 @@ test.describe("SimpleSelect component", () => {
     await selectText(page).click();
     await expect(selectListWrapper(page)).toBeVisible();
     await expect(selectListOptionGroup(page).locator("..")).toHaveId(
-      "groupHeader1"
+      "groupHeader1",
     );
   });
 
@@ -788,7 +792,7 @@ test.describe("SimpleSelect component", () => {
     await expect(selectListWrapper(page)).toBeVisible();
     await expect(selectListOptionGroup(page).locator("..")).toHaveAttribute(
       "data-component",
-      "option-group-header"
+      "option-group-header",
     );
   });
 
@@ -802,7 +806,7 @@ test.describe("SimpleSelect component", () => {
     await expect(selectListWrapper(page)).toBeVisible();
     await expect(selectListOptionGroup(page).locator("..")).toHaveAttribute(
       "data-role",
-      "group-header"
+      "group-header",
     );
   });
 
@@ -816,7 +820,7 @@ test.describe("SimpleSelect component", () => {
     await expect(selectListWrapper(page)).toBeVisible();
     await expect(selectListOptionGroup(page).locator("..")).toHaveAttribute(
       "data-element",
-      "group-header"
+      "group-header",
     );
   });
 
@@ -835,7 +839,7 @@ test.describe("SimpleSelect component", () => {
 
     await selectText(page).click();
     await expect(
-      multiColumnsSelectListBody(page).locator("..")
+      multiColumnsSelectListBody(page).locator(".."),
     ).toHaveAttribute("data-component", "option-row");
   });
 
@@ -847,7 +851,7 @@ test.describe("SimpleSelect component", () => {
 
     await selectText(page).click();
     await expect(
-      multiColumnsSelectListBody(page).locator("..")
+      multiColumnsSelectListBody(page).locator(".."),
     ).toHaveAttribute("data-role", "option-row");
   });
 
@@ -859,7 +863,7 @@ test.describe("SimpleSelect component", () => {
 
     await selectText(page).click();
     await expect(
-      multiColumnsSelectListBody(page).locator("..")
+      multiColumnsSelectListBody(page).locator(".."),
     ).toHaveAttribute("data-element", "option-row");
   });
 
@@ -869,7 +873,7 @@ test.describe("SimpleSelect component", () => {
     await selectText(page).click();
     await expect(selectListWrapper(page)).toBeVisible();
     await expect(selectListCustomChild(page, 1).locator("..")).toHaveId(
-      "option1"
+      "option1",
     );
   });
 
@@ -883,7 +887,7 @@ test.describe("SimpleSelect component", () => {
     await expect(selectListWrapper(page)).toBeVisible();
     await expect(selectListCustomChild(page, 1).locator("..")).toHaveAttribute(
       "data-component",
-      "option"
+      "option",
     );
   });
 
@@ -897,7 +901,7 @@ test.describe("SimpleSelect component", () => {
     await expect(selectListWrapper(page)).toBeVisible();
     await expect(selectListCustomChild(page, 1).locator("..")).toHaveAttribute(
       "data-role",
-      "option"
+      "option",
     );
   });
 
@@ -911,7 +915,7 @@ test.describe("SimpleSelect component", () => {
     await expect(selectListWrapper(page)).toBeVisible();
     await expect(selectListCustomChild(page, 1).locator("..")).toHaveAttribute(
       "data-element",
-      "option"
+      "option",
     );
   });
 
@@ -928,10 +932,12 @@ test.describe("SimpleSelect component", () => {
     await expect(wrapperElement).toBeVisible();
   });
 
-  ([
-    ["top", "300px", "0px", "200px", "20px"],
-    ["bottom", "0px", "0px", "0px", "20px"],
-  ] as const).forEach(([position, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "300px", "0px", "200px", "20px"],
+      ["bottom", "0px", "0px", "0px", "20px"],
+    ] as const
+  ).forEach(([position, top, bottom, left, right]) => {
     test(`should render list in ${position} position when margins are top ${top}, bottom ${bottom}, left ${left} and right ${right}`, async ({
       mount,
       page,
@@ -943,29 +949,25 @@ test.describe("SimpleSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await selectText(page).click();
       const listElement = selectListPosition(page);
       await expect(listElement).toHaveAttribute(
         "data-floating-placement",
-        position
+        position,
       );
       await expect(listElement).toBeVisible();
     });
   });
 
-  ([
-    ["top", "0px", "0px", "0px", "20px"],
-    ["bottom", "600px", "0px", "0px", "20px"],
-  ] as [
-    SimpleSelectProps["listPlacement"],
-    string,
-    string,
-    string,
-    string
-  ][]).forEach(([position, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "0px", "0px", "0px", "20px"],
+      ["bottom", "600px", "0px", "0px", "20px"],
+    ] as [SimpleSelectProps["listPlacement"], string, string, string, string][]
+  ).forEach(([position, top, bottom, left, right]) => {
     test(`should flip list to opposite position when there is not enough space to render in ${position} position`, async ({
       mount,
       page,
@@ -978,7 +980,7 @@ test.describe("SimpleSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       let flipPosition = "";
@@ -992,31 +994,33 @@ test.describe("SimpleSelect component", () => {
       const listElement = selectListPosition(page);
       await expect(listElement).toHaveAttribute(
         "data-floating-placement",
-        flipPosition
+        flipPosition,
       );
       await expect(listElement).toBeVisible();
     });
   });
 
-  ([
-    ["top", "100px 300px", 150, 2],
-    ["bottom", "0px 300px", 150, 68],
-    ["top-end", "100px 300px", 150, 2],
-    ["bottom-end", "0px 300px", 150, 68],
-    ["top-start", "100px 0px", 0, 2],
-    ["bottom-start", "100px 0px", 0, 168],
-  ] as [
-    NonNullable<SimpleSelectProps["listPlacement"]>,
-    string,
-    number,
-    number
-  ][]).forEach(([position, margin, left, top]) => {
+  (
+    [
+      ["top", "100px 300px", 150, 2],
+      ["bottom", "0px 300px", 150, 68],
+      ["top-end", "100px 300px", 150, 2],
+      ["bottom-end", "0px 300px", 150, 68],
+      ["top-start", "100px 0px", 0, 2],
+      ["bottom-start", "100px 0px", 0, 168],
+    ] as [
+      NonNullable<SimpleSelectProps["listPlacement"]>,
+      string,
+      number,
+      number,
+    ][]
+  ).forEach(([position, margin, left, top]) => {
     test(`should render list wider than the input when listWidth is 350 and positioned based on listPlacement of ${position}`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <ListWidth margin={margin} listPlacement={position} listWidth={350} />
+        <ListWidth margin={margin} listPlacement={position} listWidth={350} />,
       );
 
       const positionValue =
@@ -1034,12 +1038,12 @@ test.describe("SimpleSelect component", () => {
         (el) => ({
           listLeftPosition: el.getBoundingClientRect().left,
           listTopPosition: el.getBoundingClientRect().top,
-        })
+        }),
       );
 
       await expect(listElement).toHaveAttribute(
         "data-floating-placement",
-        positionValue
+        positionValue,
       );
       await expect(listElement).toBeVisible();
       await expect(listElement).toHaveCSS("width", "350px");
@@ -1051,37 +1055,37 @@ test.describe("SimpleSelect component", () => {
     });
   });
 
-  ([
-    ["top", "0px"],
-    ["top-end", "0px"],
-  ] as [NonNullable<SimpleSelectProps["listPlacement"]>, string][]).forEach(
-    ([position, margin]) => {
-      test(`should render list wider than the input when listWidth is 350 and flip the placement based on original listPlacement of ${position} when there's no space to render it`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <ListWidth margin={margin} listPlacement={position} listWidth={350} />
-        );
+  (
+    [
+      ["top", "0px"],
+      ["top-end", "0px"],
+    ] as [NonNullable<SimpleSelectProps["listPlacement"]>, string][]
+  ).forEach(([position, margin]) => {
+    test(`should render list wider than the input when listWidth is 350 and flip the placement based on original listPlacement of ${position} when there's no space to render it`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <ListWidth margin={margin} listPlacement={position} listWidth={350} />,
+      );
 
-        await selectText(page).click();
-        const listElement = selectListPosition(page);
-        const { inputWidth } = await selectText(page).evaluate((el) => ({
-          inputWidth: window
-            .getComputedStyle(el.parentElement as HTMLElement)
-            .getPropertyValue("width"),
-        }));
-
-        await expect(listElement).toHaveAttribute(
-          "data-floating-placement",
-          "bottom-start"
-        );
-        await expect(listElement).toBeVisible();
-        await expect(listElement).toHaveCSS("width", "350px");
-        expect(inputWidth).toBe("200px");
-      });
-    }
-  );
+      await selectText(page).click();
+      const listElement = selectListPosition(page);
+      const { inputWidth } = await selectText(page).evaluate((el) => ({
+        inputWidth: window
+          .getComputedStyle(el.parentElement as HTMLElement)
+          .getPropertyValue("width"),
+      }));
+
+      await expect(listElement).toHaveAttribute(
+        "data-floating-placement",
+        "bottom-start",
+      );
+      await expect(listElement).toBeVisible();
+      await expect(listElement).toHaveCSS("width", "350px");
+      expect(inputWidth).toBe("200px");
+    });
+  });
 
   [
     ["bottom", "0px", "0px", "0px", "20px"],
@@ -1094,14 +1098,14 @@ test.describe("SimpleSelect component", () => {
       page,
     }) => {
       await mount(
-        <SimpleSelectComponent mt={top} mb={bottom} ml={left} mr={right} />
+        <SimpleSelectComponent mt={top} mb={bottom} ml={left} mr={right} />,
       );
 
       await selectText(page).click();
       const listElement = selectListPosition(page);
       await expect(listElement).toHaveAttribute(
         "data-floating-placement",
-        position
+        position,
       );
       await expect(listElement).toBeVisible();
     });
@@ -1119,7 +1123,7 @@ test.describe("SimpleSelect component", () => {
     await optionElement.hover();
     await expect(optionElement).toHaveCSS(
       "background-color",
-      "rgb(204, 214, 219)"
+      "rgb(204, 214, 219)",
     );
   });
 
@@ -1146,7 +1150,7 @@ test.describe("SimpleSelect component", () => {
       .locator("li")
       .evaluate((element) => element.getBoundingClientRect().height);
     const wrapperHeight = await wrapper.evaluate(
-      (element) => element.getBoundingClientRect().height
+      (element) => element.getBoundingClientRect().height,
     );
 
     await expect(customOptionContent).toBeVisible();
@@ -1271,11 +1275,11 @@ test.describe("Check virtual scrolling", () => {
     await page.getByText("Please Select...").click();
 
     await expect(
-      page.getByRole("option", { name: "Option 1", exact: true })
+      page.getByRole("option", { name: "Option 1", exact: true }),
     ).toBeInViewport();
 
     await expect(
-      page.getByRole("option", { name: "Option 50" })
+      page.getByRole("option", { name: "Option 50" }),
     ).not.toBeAttached();
   });
 
@@ -1401,23 +1405,23 @@ test.describe("Selection confirmed", () => {
     await dropdownButton(page).click();
     await selectOptionByText(page, "One").click();
     await expect(
-      page.locator('[data-element="confirmed-selection-1"]')
+      page.locator('[data-element="confirmed-selection-1"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await selectOptionByText(page, "Five").click();
     await expect(
-      page.locator('[data-element="confirmed-selection-1"]')
+      page.locator('[data-element="confirmed-selection-1"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await selectOptionByText(page, "Seven").click();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-7"]')
+      page.locator('[data-element="confirmed-selection-7"]'),
     ).toBeVisible();
   });
 
@@ -1432,7 +1436,7 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("ArrowDown");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-1"]')
+      page.locator('[data-element="confirmed-selection-1"]'),
     ).toBeVisible();
     // to work around a race condition in the keydown handler, we fire a click first to ensure React knows the SelectList is open.
     // This ensures the down-arrow press moves to the next option when the test runs.
@@ -1441,29 +1445,29 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("ArrowDown");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-1"]')
+      page.locator('[data-element="confirmed-selection-1"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-3"]')
+      page.locator('[data-element="confirmed-selection-3"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await inputElement.press("ArrowDown");
     await inputElement.press("ArrowDown");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-3"]')
+      page.locator('[data-element="confirmed-selection-3"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await inputElement.press("ArrowDown");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-6"]')
+      page.locator('[data-element="confirmed-selection-6"]'),
     ).toBeVisible();
   });
 
@@ -1478,7 +1482,7 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("ArrowUp");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-9"]')
+      page.locator('[data-element="confirmed-selection-9"]'),
     ).toBeVisible();
     // to work around a race condition in the keydown handler, we fire a click first to ensure React knows the SelectList is open.
     // This ensures the up-arrow press moves to the next option when the test runs.
@@ -1487,29 +1491,29 @@ test.describe("Selection confirmed", () => {
     await inputElement.press("ArrowUp");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-9"]')
+      page.locator('[data-element="confirmed-selection-9"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-7"]')
+      page.locator('[data-element="confirmed-selection-7"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await inputElement.press("ArrowUp");
     await inputElement.press("ArrowUp");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-7"]')
+      page.locator('[data-element="confirmed-selection-7"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).toBeVisible();
     await dropdownButton(page).click();
     await inputElement.press("ArrowUp");
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-5"]')
+      page.locator('[data-element="confirmed-selection-5"]'),
     ).not.toBeVisible();
     await expect(
-      page.locator('[data-element="confirmed-selection-4"]')
+      page.locator('[data-element="confirmed-selection-4"]'),
     ).toBeVisible();
   });
 
@@ -1523,11 +1527,11 @@ test.describe("Selection confirmed", () => {
     const inputElement = selectInput(page);
     await inputElement.type("t");
     await expect(
-      page.locator('[data-element="confirmed-selection-2"]')
+      page.locator('[data-element="confirmed-selection-2"]'),
     ).not.toBeVisible();
     await inputElement.press("Enter");
     await expect(
-      page.locator('[data-element="confirmed-selection-2"]')
+      page.locator('[data-element="confirmed-selection-2"]'),
     ).toBeVisible();
   });
 
@@ -1559,7 +1563,7 @@ test.describe("Selection confirmed", () => {
 
     await dropdownButton(page).click();
     await selectListScrollableWrapper(page).evaluate((wrapper) =>
-      wrapper.scrollBy(0, 500)
+      wrapper.scrollBy(0, 500),
     );
     await selectOption(page, positionOfElement("first")).click();
     await dropdownButton(page).click();
@@ -1577,7 +1581,7 @@ test.describe("Test for scroll bug regression", () => {
     const dropdownButtonElement = dropdownButton(page);
     await dropdownButtonElement.click();
     await selectListScrollableWrapper(page).evaluate((wrapper) =>
-      wrapper.scroll(0, 500)
+      wrapper.scroll(0, 500),
     );
     await commonDataElementInputPreview(page).press("Escape");
     await dropdownButtonElement.click();
@@ -1633,18 +1637,20 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
     });
   });
 
-  ([
-    ["top", "200px", "0px", "0px", "0px"],
-    ["bottom", "0px", "0px", "0px", "0px"],
-    ["left", "200px", "0px", "200px", "0px"],
-    ["right", "200px", "0px", "0px", "200px"],
-  ] as [
-    SimpleSelectProps["tooltipPosition"],
-    string,
-    string,
-    string,
-    string
-  ][]).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "200px", "0px", "0px", "0px"],
+      ["bottom", "0px", "0px", "0px", "0px"],
+      ["left", "200px", "0px", "200px", "0px"],
+      ["right", "200px", "0px", "0px", "200px"],
+    ] as [
+      SimpleSelectProps["tooltipPosition"],
+      string,
+      string,
+      string,
+      string,
+    ][]
+  ).forEach(([tooltipPositionValue, top, bottom, left, right]) => {
     test(`should pass accessibility tests with tooltip prop in the ${tooltipPositionValue} position`, async ({
       mount,
       page,
@@ -1657,7 +1663,7 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await helpIcon(page).hover();
@@ -1694,11 +1700,9 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
     await checkAccessibility(page);
   });
 
-  ([
-    SIZE.SMALL,
-    SIZE.MEDIUM,
-    SIZE.LARGE,
-  ] as SimpleSelectProps["size"][]).forEach((size) => {
+  (
+    [SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE] as SimpleSelectProps["size"][]
+  ).forEach((size) => {
     test(`should pass accessibility tests with size prop as ${size}`, async ({
       mount,
       page,
@@ -1743,12 +1747,12 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
         page,
       }) => {
         await mount(
-          <SimpleSelectComponent labelInline labelAlign={alignment} />
+          <SimpleSelectComponent labelInline labelAlign={alignment} />,
         );
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [
@@ -1765,7 +1769,7 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
           labelInline
           labelWidth={label}
           inputWidth={input}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -1805,7 +1809,7 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
     // wait for content to finish loading before scrolling
     await expect(selectOptionByText(page, "Amber")).toBeVisible();
     await selectListScrollableWrapper(page).evaluate((wrapper) =>
-      wrapper.scrollBy(0, 500)
+      wrapper.scrollBy(0, 500),
     );
     await checkAccessibility(page, undefined, "scrollable-region-focusable");
   });
@@ -1815,7 +1819,7 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
     page,
   }) => {
     await mount(
-      <SimpleSelectMultipleColumnsComponent label="multiple columns" />
+      <SimpleSelectMultipleColumnsComponent label="multiple columns" />,
     );
 
     const inputElement = commonDataElementInputPreview(page);
@@ -1829,7 +1833,7 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
     page,
   }) => {
     await mount(
-      <SimpleSelectObjectAsValueComponent label="with object as value" />
+      <SimpleSelectObjectAsValueComponent label="with object as value" />,
     );
 
     await selectText(page).click();
@@ -1864,7 +1868,7 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
       page,
       undefined,
       "scrollable-region-focusable",
-      "aria-required-children"
+      "aria-required-children",
     );
   });
 
@@ -1878,16 +1882,12 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
     await checkAccessibility(page, undefined, "scrollable-region-focusable");
   });
 
-  ([
-    ["top", "300px", "0px", "200px", "20px"],
-    ["bottom", "0px", "0px", "0px", "20px"],
-  ] as [
-    SimpleSelectProps["listPlacement"],
-    string,
-    string,
-    string,
-    string
-  ][]).forEach(([position, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "300px", "0px", "200px", "20px"],
+      ["bottom", "0px", "0px", "0px", "20px"],
+    ] as [SimpleSelectProps["listPlacement"], string, string, string, string][]
+  ).forEach(([position, top, bottom, left, right]) => {
     test(`should pass accessibility tests with listPlacement prop as ${position}`, async ({
       mount,
       page,
@@ -1899,7 +1899,7 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await selectText(page).click();
@@ -1907,16 +1907,12 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
     });
   });
 
-  ([
-    ["top", "0px", "0px", "0px", "20px"],
-    ["bottom", "600px", "0px", "0px", "20px"],
-  ] as [
-    SimpleSelectProps["listPlacement"],
-    string,
-    string,
-    string,
-    string
-  ][]).forEach(([position, top, bottom, left, right]) => {
+  (
+    [
+      ["top", "0px", "0px", "0px", "20px"],
+      ["bottom", "600px", "0px", "0px", "20px"],
+    ] as [SimpleSelectProps["listPlacement"], string, string, string, string][]
+  ).forEach(([position, top, bottom, left, right]) => {
     test(`should pass accessibility tests with flipEnabled prop and listPlacement prop as ${position}`, async ({
       mount,
       page,
@@ -1929,7 +1925,7 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
           mb={bottom}
           ml={left}
           mr={right}
-        />
+        />,
       );
 
       await selectText(page).click();
diff --git a/src/components/select/simple-select/simple-select.stories.tsx b/src/components/select/simple-select/simple-select.stories.tsx
index ad6384258c..ec1eee5234 100644
--- a/src/components/select/simple-select/simple-select.stories.tsx
+++ b/src/components/select/simple-select/simple-select.stories.tsx
@@ -205,7 +205,7 @@ export const WithObjectAsValue: Story = () => {
   ];
 
   const [value, setValue] = useState<Record<string, unknown>>(
-    optionListValues[4]
+    optionListValues[4],
   );
 
   function onChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
@@ -705,7 +705,7 @@ export const ValidationsStringNewDesign: Story = () => {
               <Option text="Yellow" value="11" />
             </Select>
           </Box>
-        ))
+        )),
       )}
     </CarbonProvider>
   );
@@ -856,9 +856,8 @@ export const SelectWithDynamicallyAddedOption: Story = () => {
 SelectWithDynamicallyAddedOption.storyName = "Dynamically Adding Options";
 
 export const ListWidth: Story = () => {
-  const [listPlacement, setListPlacement] = useState<
-    SimpleSelectProps["listPlacement"]
-  >("bottom-end");
+  const [listPlacement, setListPlacement] =
+    useState<SimpleSelectProps["listPlacement"]>("bottom-end");
   const [value, setValue] = useState("");
   const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
     setValue(ev.target.value);
diff --git a/src/components/select/simple-select/simple-select.test.tsx b/src/components/select/simple-select/simple-select.test.tsx
index e21bc6dcb7..ac1e5e9d36 100644
--- a/src/components/select/simple-select/simple-select.test.tsx
+++ b/src/components/select/simple-select/simple-select.test.tsx
@@ -27,7 +27,7 @@ test("renders a visually-hidden input box", () => {
   render(
     <SimpleSelect label="Colour" onChange={() => {}}>
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   const input = screen.getByRole("combobox");
@@ -39,7 +39,7 @@ test("renders input with a textbox role when readOnly prop is true", () => {
   render(
     <SimpleSelect label="Colour" onChange={() => {}} readOnly>
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   expect(screen.getByRole("textbox")).toBeInTheDocument();
@@ -50,7 +50,7 @@ test("applies transparent background and no border to input, when transparent pr
   render(
     <SimpleSelect label="Colour" onChange={() => {}} transparent>
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   expect(screen.getByRole("combobox")).toHaveStyle(`
@@ -63,7 +63,7 @@ test("displays the selected option text, when value prop matches an option", ()
   render(
     <SimpleSelect label="Colour" onChange={() => {}} value="amber">
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   expect(screen.getByText("amber", { ignore: "li" })).toBeVisible();
@@ -73,12 +73,12 @@ test("clears option selection when value prop is set to an empty string", () =>
   const { rerender } = render(
     <SimpleSelect label="Colour" onChange={() => {}} value="amber">
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
   rerender(
     <SimpleSelect label="Colour" onChange={() => {}} value="">
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   expect(screen.getByText("Please Select...")).toBeVisible();
@@ -89,7 +89,7 @@ test("displays default placeholder text when no value is selected", () => {
   render(
     <SimpleSelect label="Colour" onChange={() => {}} value="">
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   expect(screen.getByText("Please Select...")).toBeVisible();
@@ -104,7 +104,7 @@ test("displays custom text when placeholder prop is provided and no value is sel
       placeholder="Select a colour"
     >
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   expect(screen.getByText("Select a colour")).toBeVisible();
@@ -114,12 +114,12 @@ test("hides select text overlay from screen readers using aria-hidden", () => {
   render(
     <SimpleSelect label="Colour" onChange={() => {}}>
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   expect(screen.getByTestId("select-text")).toHaveAttribute(
     "aria-hidden",
-    "true"
+    "true",
   );
 });
 
@@ -128,7 +128,7 @@ describe("accessible name of the input", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     expect(screen.getByRole("combobox")).toHaveAccessibleName("Colour");
@@ -138,7 +138,7 @@ describe("accessible name of the input", () => {
     render(
       <SimpleSelect aria-label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     expect(screen.getByRole("combobox")).toHaveAccessibleName("Colour");
@@ -148,7 +148,7 @@ describe("accessible name of the input", () => {
     render(
       <SimpleSelect label="foobar" onChange={() => {}} aria-label="Colour">
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     expect(screen.getByRole("combobox")).toHaveAccessibleName("Colour");
@@ -161,7 +161,7 @@ describe("accessible name of the input", () => {
         <SimpleSelect aria-labelledby="my-select-heading" onChange={() => {}}>
           <Option text="amber" value="amber" />
         </SimpleSelect>
-      </>
+      </>,
     );
 
     expect(screen.getByRole("combobox")).toHaveAccessibleName("My Select");
@@ -178,7 +178,7 @@ describe("accessible name of the input", () => {
         >
           <Option text="amber" value="amber" />
         </SimpleSelect>
-      </>
+      </>,
     );
 
     expect(screen.getByRole("combobox")).toHaveAccessibleName("My Select");
@@ -190,7 +190,7 @@ test("associates the dropdown list with the correct accessible name from the lab
   render(
     <SimpleSelect label="Colour" onChange={() => {}}>
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   await user.click(screen.getByRole("combobox"));
@@ -210,16 +210,16 @@ test.each(["top", "bottom"] as const)(
         onChange={() => {}}
       >
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      `${listPlacement}-end`
+      `${listPlacement}-end`,
     );
-  }
+  },
 );
 
 test.each(["top-end", "bottom-end", "top-start", "bottom-start"] as const)(
@@ -234,16 +234,16 @@ test.each(["top-end", "bottom-end", "top-start", "bottom-start"] as const)(
         onChange={() => {}}
       >
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
 
     expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute(
       "data-floating-placement",
-      listPlacement
+      listPlacement,
     );
-  }
+  },
 );
 
 describe("typing into the input", () => {
@@ -254,7 +254,7 @@ describe("typing into the input", () => {
         <Option text="amber" value="amber" />
         <Option text="blue" value="blue" />
         <Option text="black" value="black" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.type(screen.getByRole("combobox"), "b");
@@ -269,7 +269,7 @@ describe("typing into the input", () => {
         <Option text="amber" value="amber" />
         <Option text="blue" value="blue" />
         <Option text="black" value="black" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.type(screen.getByRole("combobox"), "bb");
@@ -284,7 +284,7 @@ describe("typing into the input", () => {
         <Option text="amber" value="amber" />
         <Option text="blue" value="blue" />
         <Option text="black" value="black" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.type(screen.getByRole("combobox"), "bx");
@@ -299,7 +299,7 @@ describe("typing into the input", () => {
         <Option text="blue" value="blue" />
         <Option text="black" value="black" />
         <Option text="brown" value="brown" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.type(screen.getByRole("combobox"), "bla");
@@ -317,7 +317,7 @@ describe("typing into the input", () => {
         <Option text="black" value="black" />
         <Option text="brown" value="brown" />
         <Option text="green" value="green" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     const input = screen.getByRole("combobox");
@@ -340,14 +340,14 @@ describe("typing into the input", () => {
           <Option text="amber" value="amber" />
           <Option text="blue" value="blue" />
           <Option text="black" value="black" />
-        </SimpleSelect>
+        </SimpleSelect>,
       );
 
       // Hold special key down while typing 'b'
       await user.type(screen.getByRole("combobox"), `{${specialKey}>}b`);
 
       expect(screen.getByText("Please Select...")).toBeVisible();
-    }
+    },
   );
 
   it("does not change selected option when value prop is set (controlled usage)", async () => {
@@ -356,13 +356,13 @@ describe("typing into the input", () => {
       <SimpleSelect label="Colour" onChange={() => {}} value="amber">
         <Option text="amber" value="amber" />
         <Option text="blue" value="blue" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.type(screen.getByRole("combobox"), "blue");
 
     expect(
-      screen.queryByText("blue", { ignore: "li" })
+      screen.queryByText("blue", { ignore: "li" }),
     ).not.toBeInTheDocument();
   });
 
@@ -374,7 +374,7 @@ describe("typing into the input", () => {
         <Option text="blue" value="blue" />
         <Option text="black" value="black" />
         <Option text="brown" value="brown" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.type(screen.getByRole("combobox"), "bla");
@@ -395,7 +395,7 @@ describe("typing into the input", () => {
         <Option text="blue" value="blue" />
         <Option text="black" value="black" />
         <Option text="brown" value="brown" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.type(screen.getByRole("combobox"), "b");
@@ -404,7 +404,7 @@ describe("typing into the input", () => {
       expect.objectContaining({
         target: { value: "blue", name: "colour", id: "colour" },
         selectionConfirmed: false,
-      })
+      }),
     );
   });
 });
@@ -415,7 +415,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -428,7 +428,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}}>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByTestId("input-icon-toggle"));
@@ -443,14 +443,14 @@ describe("dropdown list", () => {
       render(
         <SimpleSelect label="Colour" onChange={() => {}}>
           <Option text="amber" value="amber" />
-        </SimpleSelect>
+        </SimpleSelect>,
       );
 
       await user.tab();
       await user.keyboard(`[${key}]`);
 
       expect(await screen.findByRole("listbox")).toBeVisible();
-    }
+    },
   );
 
   it.each(["Enter", "a"] as const)(
@@ -460,14 +460,14 @@ describe("dropdown list", () => {
       render(
         <SimpleSelect label="Colour" onChange={() => {}}>
           <Option text="amber" value="amber" />
-        </SimpleSelect>
+        </SimpleSelect>,
       );
 
       await user.tab();
       await user.keyboard(`[${key}]`);
 
       expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-    }
+    },
   );
 
   it("does not open, when input is disabled and is clicked", async () => {
@@ -475,7 +475,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} disabled>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -488,7 +488,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} disabled>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.tab();
@@ -502,7 +502,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} readOnly>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("textbox"));
@@ -515,7 +515,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} readOnly>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.tab();
@@ -529,7 +529,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} openOnFocus>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.tab();
@@ -542,7 +542,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} openOnFocus={false}>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.tab();
@@ -555,7 +555,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} value="">
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -571,7 +571,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} value="">
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -588,7 +588,7 @@ describe("dropdown list", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} value="">
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -607,7 +607,7 @@ describe("dropdown list", () => {
           <Option text="amber" value="amber" />
         </SimpleSelect>
         <p>Outside content</p>
-      </>
+      </>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -626,7 +626,7 @@ describe("when onClick prop is passed", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} onClick={onClick}>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -645,7 +645,7 @@ describe("when onClick prop is passed", () => {
         disabled
       >
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -664,7 +664,7 @@ describe("when onClick prop is passed", () => {
         readOnly
       >
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("textbox"));
@@ -679,7 +679,7 @@ test("calls onOpen when list is opened", async () => {
   render(
     <SimpleSelect label="Colour" onChange={() => {}} onOpen={onOpen}>
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   await user.click(screen.getByRole("combobox"));
@@ -693,7 +693,7 @@ test("calls onKeyDown prop with details of the pressed key, when typing a charac
   render(
     <SimpleSelect label="Colour" onChange={() => {}} onKeyDown={onKeyDown}>
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   await user.type(screen.getByRole("combobox"), "{c}");
@@ -707,7 +707,7 @@ test("calls onFocus prop when input is focused", async () => {
   render(
     <SimpleSelect label="Colour" onChange={() => {}} onFocus={onFocus}>
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   await user.tab();
@@ -722,7 +722,7 @@ describe("when onBlur prop is passed", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} onBlur={onBlur}>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.tab();
@@ -737,7 +737,7 @@ describe("when onBlur prop is passed", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} onBlur={onBlur}>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     await user.click(screen.getByRole("combobox"));
@@ -754,7 +754,7 @@ describe("forwarded ref", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} ref={mockRef}>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     expect(mockRef).toHaveBeenNthCalledWith(1, screen.getByRole("combobox"));
@@ -765,7 +765,7 @@ describe("forwarded ref", () => {
     render(
       <SimpleSelect label="Colour" onChange={() => {}} ref={mockRef}>
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     expect(mockRef.current).toBe(screen.getByRole("combobox"));
@@ -780,12 +780,12 @@ describe("deprecation warnings", () => {
     render(
       <SimpleSelect label="Colour" onChange={undefined} defaultValue="amber">
         <Option text="amber" value="amber" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     expect(loggerSpy).toHaveBeenNthCalledWith(
       1,
-      "Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+      "Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
     );
   });
 
@@ -799,7 +799,7 @@ describe("deprecation warnings", () => {
         placeholder="Select a colour"
       >
         <Option text="Amber" value="1" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     expect(loggerSpy).not.toHaveBeenCalled();
@@ -811,11 +811,11 @@ describe("deprecation warnings", () => {
     render(
       <SimpleSelect label="Colour" placeholder="Select a colour">
         <Option text="Amber" value="1" />
-      </SimpleSelect>
+      </SimpleSelect>,
     );
 
     expect(loggerSpy).not.toHaveBeenCalledWith(
-      "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+      "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
     );
     loggerSpy.mockClear();
   });
@@ -825,7 +825,7 @@ it("marks input as required when required prop is true", () => {
   render(
     <SimpleSelect label="Colour" onChange={() => {}} required>
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   expect(screen.getByRole("combobox")).toBeRequired();
@@ -843,7 +843,7 @@ test("does not call onOpen, when openOnFocus is true and the input is refocused
       openOnFocus
     >
       <Option text="amber" value="amber" />
-    </SimpleSelect>
+    </SimpleSelect>,
   );
 
   const input = screen.getByRole("combobox");
@@ -875,5 +875,5 @@ testStyledSystemMarginRTL(
       <Option text="amber" value="amber" />
     </SimpleSelect>
   ),
-  () => screen.getByTestId("my-select")
+  () => screen.getByTestId("my-select"),
 );
diff --git a/src/components/settings-row/settings-row.pw.tsx b/src/components/settings-row/settings-row.pw.tsx
index a7167aa8f5..f8f481add9 100644
--- a/src/components/settings-row/settings-row.pw.tsx
+++ b/src/components/settings-row/settings-row.pw.tsx
@@ -44,7 +44,7 @@ test.describe("should check SettingsRow component properties", () => {
           headingType={heading}
           title="foo"
           description="bar"
-        />
+        />,
       );
 
       await expect(page.locator(heading)).toHaveText("foo");
@@ -57,7 +57,7 @@ test.describe("should check SettingsRow component properties", () => {
       page,
     }) => {
       await mount(
-        <SettingsRowDefault title="foo" description={characterVals} />
+        <SettingsRowDefault title="foo" description={characterVals} />,
       );
 
       await expect(settingsRowDescription(page)).toHaveText(characterVals);
@@ -71,7 +71,7 @@ test.describe("should check SettingsRow component properties", () => {
     const textDesc = "This is a link";
 
     await mount(
-      <SettingRowWithLinkDescription title="foo" description={textDesc} />
+      <SettingRowWithLinkDescription title="foo" description={textDesc} />,
     );
 
     await expect(settingsRowDescription(page)).toHaveText(textDesc);
@@ -87,32 +87,32 @@ test.describe("should check SettingsRow component properties", () => {
       if (dividerVals) {
         await expect(settingsRowPreview(page)).toHaveCSS(
           "border-bottom-color",
-          "rgb(230, 235, 237)"
+          "rgb(230, 235, 237)",
         );
 
         await expect(settingsRowPreview(page)).toHaveCSS(
           "border-bottom-style",
-          "solid"
+          "solid",
         );
 
         await expect(settingsRowPreview(page)).toHaveCSS(
           "padding-bottom",
-          "30px"
+          "30px",
         );
       } else {
         await expect(settingsRowPreview(page)).not.toHaveCSS(
           "border-bottom-color",
-          "rgb(230, 235, 237)"
+          "rgb(230, 235, 237)",
         );
 
         await expect(settingsRowPreview(page)).not.toHaveCSS(
           "border-bottom-style",
-          "solid"
+          "solid",
         );
 
         await expect(settingsRowPreview(page)).not.toHaveCSS(
           "padding-bottom",
-          "30px"
+          "30px",
         );
       }
     });
diff --git a/src/components/settings-row/settings-row.test.tsx b/src/components/settings-row/settings-row.test.tsx
index bf9581424a..9cd6fdd39d 100644
--- a/src/components/settings-row/settings-row.test.tsx
+++ b/src/components/settings-row/settings-row.test.tsx
@@ -39,7 +39,7 @@ test.each([
     const heading = screen.getByRole("heading", { level });
     expect(heading).toBeVisible();
     expect(heading).toHaveTextContent("foo");
-  }
+  },
 );
 
 test("renders with the correct description text when the `description` prop is passed", () => {
@@ -69,7 +69,7 @@ test("renders a divider when the `divider` prop is passed", () => {
   const settingsRow = screen.getByTestId("settings-row");
   expect(settingsRow).toHaveStyleRule(
     "border-bottom",
-    "1px solid var(--colorsUtilityMajor050)"
+    "1px solid var(--colorsUtilityMajor050)",
   );
   expect(settingsRow).toHaveStyleRule("padding-bottom", "30px");
 });
diff --git a/src/components/sidebar/sidebar.component.tsx b/src/components/sidebar/sidebar.component.tsx
index 655c7397d0..6dfd83596b 100644
--- a/src/components/sidebar/sidebar.component.tsx
+++ b/src/components/sidebar/sidebar.component.tsx
@@ -55,13 +55,13 @@ export interface SidebarProps
   bespokeFocusTrap?: (
     ev: KeyboardEvent,
     firstElement?: HTMLElement,
-    lastElement?: HTMLElement
+    lastElement?: HTMLElement,
   ) => void;
   /** Node that will be used as sidebar header. */
   header?: React.ReactNode;
   /** A custom close event handler */
   onCancel?: (
-    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>
+    ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>,
   ) => void;
   /** Sets the open state of the modal */
   open: boolean;
@@ -113,7 +113,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
       topModalOverride,
       ...rest
     }: SidebarProps,
-    ref
+    ref,
   ) => {
     const locale = useLocale();
     const { current: headerId } = useRef<string>(createGuid());
@@ -127,7 +127,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
         if (typeof ref === "object") ref.current = reference;
         if (typeof ref === "function") ref(reference);
       },
-      [ref]
+      [ref],
     );
 
     const isTopModal = useModalAria(sidebarRef);
@@ -210,7 +210,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
         )}
       </Modal>
     );
-  }
+  },
 );
 
 Sidebar.displayName = "Sidebar";
diff --git a/src/components/sidebar/sidebar.pw.tsx b/src/components/sidebar/sidebar.pw.tsx
index 75a0ad4da6..ae3af18184 100644
--- a/src/components/sidebar/sidebar.pw.tsx
+++ b/src/components/sidebar/sidebar.pw.tsx
@@ -40,7 +40,7 @@ test.describe("Prop tests for Sidebar component", () => {
       page,
     }) => {
       await mount(
-        <SidebarComponent enableBackgroundUI={enableBackgroundUIValue} />
+        <SidebarComponent enableBackgroundUI={enableBackgroundUIValue} />,
       );
 
       const backgroundUILocatorElement = backgroundUILocator(page);
@@ -53,32 +53,25 @@ test.describe("Prop tests for Sidebar component", () => {
     });
   });
 
-  ([
-    ["left", 0, 852],
-    ["right", 852, 0],
-  ] as [SidebarProps["position"], number, number][]).forEach(
-    ([position, left, right]) => {
-      test(`check component position is ${position}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<SidebarComponent position={position} />);
-
-        const sidebarPreviewElement = sidebarPreview(page);
-
-        await assertCssValueIsApproximately(
-          sidebarPreviewElement,
-          "left",
-          left
-        );
-        await assertCssValueIsApproximately(
-          sidebarPreviewElement,
-          "right",
-          right
-        );
-      });
-    }
-  );
+  (
+    [
+      ["left", 0, 852],
+      ["right", 852, 0],
+    ] as [SidebarProps["position"], number, number][]
+  ).forEach(([position, left, right]) => {
+    test(`check component position is ${position}`, async ({ mount, page }) => {
+      await mount(<SidebarComponent position={position} />);
+
+      const sidebarPreviewElement = sidebarPreview(page);
+
+      await assertCssValueIsApproximately(sidebarPreviewElement, "left", left);
+      await assertCssValueIsApproximately(
+        sidebarPreviewElement,
+        "right",
+        right,
+      );
+    });
+  });
 
   test("check component has expected aria-describedby", async ({
     mount,
@@ -88,7 +81,7 @@ test.describe("Prop tests for Sidebar component", () => {
 
     await expect(sidebarPreview(page)).toHaveAttribute(
       "aria-describedby",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -97,7 +90,7 @@ test.describe("Prop tests for Sidebar component", () => {
 
     await expect(sidebarPreview(page)).toHaveAttribute(
       "aria-label",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -109,7 +102,7 @@ test.describe("Prop tests for Sidebar component", () => {
 
     await expect(sidebarPreview(page)).toHaveAttribute(
       "aria-labelledby",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -122,7 +115,7 @@ test.describe("Prop tests for Sidebar component", () => {
       await assertCssValueIsApproximately(
         sidebarPreview(page),
         "width",
-        parseInt(width)
+        parseInt(width),
       );
     });
   });
@@ -143,7 +136,7 @@ test.describe("Prop tests for Sidebar component", () => {
 
     await expect(sidebarPreview(page)).toHaveAttribute(
       "role",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -152,7 +145,7 @@ test.describe("Prop tests for Sidebar component", () => {
 
     await expect(sidebarComponent(page)).toHaveAttribute(
       "data-element",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -161,7 +154,7 @@ test.describe("Prop tests for Sidebar component", () => {
 
     await expect(sidebarComponent(page)).toHaveAttribute(
       "data-role",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -172,7 +165,7 @@ test.describe("Prop tests for Sidebar component", () => {
       page,
     }) => {
       await mount(
-        <SidebarComponentWithOnCancel disableEscKey={disableEscKeyValue} />
+        <SidebarComponentWithOnCancel disableEscKey={disableEscKeyValue} />,
       );
 
       const sidebarPreviewElement = sidebarPreview(page);
@@ -354,7 +347,7 @@ test.describe("Prop tests for Sidebar component", () => {
         onCancel={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const closeIconButtonElement = closeIconButton(page);
@@ -376,9 +369,8 @@ test.describe("Prop tests for Sidebar component", () => {
 
     const bodyElement = page.locator("body");
     await bodyElement.press("Tab");
-    const sidebarPreviewCloseIconButton = sidebarPreview(page).locator(
-      CLOSE_ICON_BUTTON
-    );
+    const sidebarPreviewCloseIconButton =
+      sidebarPreview(page).locator(CLOSE_ICON_BUTTON);
 
     await expect(sidebarPreviewCloseIconButton).toBeFocused();
 
@@ -389,7 +381,7 @@ test.describe("Prop tests for Sidebar component", () => {
 
     await bodyElement.press("Tab");
     const DialogCloseIconButton = getComponent(page, "dialog").locator(
-      CLOSE_ICON_BUTTON
+      CLOSE_ICON_BUTTON,
     );
 
     await expect(DialogCloseIconButton).toBeFocused();
diff --git a/src/components/sidebar/sidebar.test.tsx b/src/components/sidebar/sidebar.test.tsx
index a47f176005..8c419b717f 100644
--- a/src/components/sidebar/sidebar.test.tsx
+++ b/src/components/sidebar/sidebar.test.tsx
@@ -28,7 +28,7 @@ test("sidebar element has aria-modal attribute set to true", () => {
   render(
     <CarbonProvider>
       <Sidebar open header="My sidebar" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
@@ -38,7 +38,7 @@ test("sidebar has aria-modal attribute set to false when enableBackgroundUI is t
   render(
     <CarbonProvider>
       <Sidebar open header="My sidebar" enableBackgroundUI />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "false");
@@ -48,7 +48,7 @@ test("renders with header when prop is provided", () => {
   render(<Sidebar open header={<h1>My sidebar</h1>} />);
 
   expect(
-    screen.getByRole("heading", { level: 1, name: "My sidebar" })
+    screen.getByRole("heading", { level: 1, name: "My sidebar" }),
   ).toBeVisible();
 });
 
@@ -62,7 +62,7 @@ test("sidebar uses aria-labelledby prop as accessible name when passed", () => {
   render(
     <Sidebar open aria-labelledby="my-heading">
       <h1 id="my-heading">My sidebar</h1>
-    </Sidebar>
+    </Sidebar>,
   );
 
   expect(screen.getByRole("dialog")).toHaveAccessibleName("My sidebar");
@@ -78,11 +78,11 @@ test("sidebar uses aria-describedby prop as accessible description when passed",
   render(
     <Sidebar open header="My sidebar" aria-describedby="my-description">
       <p id="my-description">My shiny sidebar</p>
-    </Sidebar>
+    </Sidebar>,
   );
 
   expect(screen.getByRole("dialog")).toHaveAccessibleDescription(
-    "My shiny sidebar"
+    "My shiny sidebar",
   );
 });
 
@@ -113,7 +113,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={onCancel} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     await user.click(screen.getByRole("button", { name: "Close" }));
@@ -128,7 +128,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={onCancel} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     await user.keyboard("{Escape}");
@@ -143,7 +143,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={onCancel} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     screen.getByRole("button", { name: "Close" }).focus();
@@ -159,7 +159,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={onCancel} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     screen.getByRole("button", { name: "Close" }).focus();
@@ -175,7 +175,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={onCancel} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     screen.getByRole("button", { name: "Close" }).focus();
@@ -190,7 +190,7 @@ describe("closing behaviour", () => {
     render(
       <CarbonProvider>
         <MockApp onCancel={() => {}} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     await user.click(screen.getByRole("button", { name: "Close" }));
@@ -208,7 +208,7 @@ test("focus is trapped within sidebar when opened", async () => {
         <button type="button">First</button>
         <button type="button">Second</button>
       </Sidebar>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const firstButton = screen.getByRole("button", { name: "First" });
   firstButton.focus();
@@ -230,7 +230,7 @@ test("focus is not trapped within sidebar when enableBackgroundUI is true", asyn
         <button type="button">First</button>
         <button type="button">Second</button>
       </Sidebar>
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   const firstButton = screen.getByRole("button", { name: "First" });
   firstButton.focus();
@@ -259,7 +259,7 @@ test("can refocus sidebar container using a forwarded ref", async () => {
   render(
     <CarbonProvider>
       <MockApp />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   await user.click(screen.getByRole("button", { name: "Refocus sidebar" }));
@@ -299,7 +299,7 @@ testStyledSystemWidthRTL(
       </Sidebar>
     </CarbonProvider>
   ),
-  () => screen.getByRole("dialog")
+  () => screen.getByRole("dialog"),
 );
 
 testStyledSystemPaddingRTL(
@@ -315,5 +315,5 @@ testStyledSystemPaddingRTL(
 
     // the use of Portal means there is two instances of the sidebar content
     return sidebars[sidebars.length - 1];
-  }
+  },
 );
diff --git a/src/components/simple-color-picker/simple-color-picker.component.tsx b/src/components/simple-color-picker/simple-color-picker.component.tsx
index 9db85b77a6..d12940ae17 100644
--- a/src/components/simple-color-picker/simple-color-picker.component.tsx
+++ b/src/components/simple-color-picker/simple-color-picker.component.tsx
@@ -98,23 +98,23 @@ export const SimpleColorPicker = React.forwardRef<
 
   invariant(
     hasProperChildren,
-    `SimpleColorPicker accepts only children of type \`${SimpleColor.displayName}\`.`
+    `SimpleColorPicker accepts only children of type \`${SimpleColor.displayName}\`.`,
   );
 
   const filteredChildren = useMemo(
     () =>
       React.Children.toArray(children).filter((child) =>
-        React.isValidElement(child)
+        React.isValidElement(child),
       ) as React.FunctionComponentElement<
         SimpleColorProps & RefAttributes<HTMLInputElement>
       >[],
-    [children]
+    [children],
   );
 
   const internalRef = useRef<HTMLDivElement | null>(null);
   const [blurBlocked, setIsBlurBlocked] = useState(isBlurBlocked);
   const [focusedElement, setFocusedElement] = useState<EventTarget | null>(
-    null
+    null,
   );
   const itemsPerRow = Math.floor(+maxWidth / +childWidth);
   const rowCount = Math.ceil(filteredChildren?.length / itemsPerRow);
@@ -182,7 +182,7 @@ export const SimpleColorPicker = React.forwardRef<
         return target.getAttribute("value") === element.props.value;
       });
     },
-    [navigationGrid]
+    [navigationGrid],
   );
 
   const onKeyDownHandler = useCallback(
@@ -236,7 +236,7 @@ export const SimpleColorPicker = React.forwardRef<
         item?.click();
       }
     },
-    [onKeyDown, navigationGrid, getElementPosition]
+    [onKeyDown, navigationGrid, getElementPosition],
   );
 
   const handleClickOutside = (ev: MouseEvent | KeyboardEvent) => {
@@ -263,7 +263,7 @@ export const SimpleColorPicker = React.forwardRef<
 
     setTimeout(() => {
       const hasBlurred = !gridItemRefs?.current?.find(
-        (colorRef) => colorRef === document.activeElement
+        (colorRef) => colorRef === document.activeElement,
       );
       /* istanbul ignore else */
       if (onBlur && hasBlurred && !blurBlocked) {
@@ -301,14 +301,14 @@ export const SimpleColorPicker = React.forwardRef<
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate(
-      "Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+      "Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
     );
   }
 
   if (!isBlurBlockedDeprecateWarnTriggered && isBlurBlocked) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate(
-      `The 'isBlurBlocked' prop in ${SimpleColorPicker.displayName} is deprecated and support will soon be removed.`
+      `The 'isBlurBlocked' prop in ${SimpleColorPicker.displayName} is deprecated and support will soon be removed.`,
     );
   }
 
diff --git a/src/components/simple-color-picker/simple-color-picker.pw.tsx b/src/components/simple-color-picker/simple-color-picker.pw.tsx
index 2f3d3e0541..be7611bd03 100644
--- a/src/components/simple-color-picker/simple-color-picker.pw.tsx
+++ b/src/components/simple-color-picker/simple-color-picker.pw.tsx
@@ -87,11 +87,11 @@ test.describe("When SimpleColorPicker is focused", () => {
     const focusedColor = simpleColorDiv(page, 0);
     await expect(focusedColor).toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset"
+      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset",
     );
     await expect(focusedColor).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -111,7 +111,7 @@ test.describe("When SimpleColorPicker is focused", () => {
 
     await expect(focusedColor).toHaveCSS(
       "box-shadow",
-      "rgb(255, 255, 255) 0px 0px 0px 2px inset"
+      "rgb(255, 255, 255) 0px 0px 0px 2px inset",
     );
   });
 });
@@ -126,7 +126,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
       await expect(colorInput).toHaveAttribute("value", colors[index].color);
       await expect(colorInput).toHaveAttribute(
         "aria-label",
-        colors[index].label
+        colors[index].label,
       );
     };
 
@@ -150,7 +150,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
 
       const allInputs = await commonDataElementInputPreview(page).all();
       const allAssertions = allInputs.map((locator) =>
-        expect(locator).toHaveAttribute("name", name)
+        expect(locator).toHaveAttribute("name", name),
       );
 
       await Promise.all(allAssertions);
@@ -179,7 +179,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
     await simpleColorPickerInput(page, 3).press("ArrowRight");
     await expect(simpleColorPickerInput(page, 4)).toHaveAttribute(
       "aria-checked",
-      "true"
+      "true",
     );
   });
 
@@ -205,7 +205,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
     await simpleColorPickerInput(page, 3).press("ArrowLeft");
     await expect(simpleColorPickerInput(page, 2)).toHaveAttribute(
       "aria-checked",
-      "true"
+      "true",
     );
   });
 
@@ -218,7 +218,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
     await simpleColorPickerInput(page, 3).press("ArrowDown");
     await expect(simpleColorPickerInput(page, 8)).toHaveAttribute(
       "aria-checked",
-      "true"
+      "true",
     );
   });
 
@@ -231,7 +231,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
     await simpleColorPickerInput(page, 8).press("ArrowUp");
     await expect(simpleColorPickerInput(page, 3)).toHaveAttribute(
       "aria-checked",
-      "true"
+      "true",
     );
   });
 
@@ -248,10 +248,12 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
     });
   });
 
-  ([
-    [250, "232px"],
-    [450, "406px"],
-  ] as [number, string][]).forEach(([maxWidth, cssWidth]) => {
+  (
+    [
+      [250, "232px"],
+      [450, "406px"],
+    ] as [number, string][]
+  ).forEach(([maxWidth, cssWidth]) => {
     test(`should render with maxWidth prop set to ${maxWidth}`, async ({
       mount,
       page,
@@ -259,41 +261,38 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
       await mount(<SimpleColorPickerCustom maxWidth={maxWidth} />);
 
       await expect(
-        simpleColorDiv(page, 0).locator("..").locator("..")
+        simpleColorDiv(page, 0).locator("..").locator(".."),
       ).toHaveCSS("max-width", cssWidth);
     });
   });
 
-  ([
-    ["300", "75", 89, 33, 233],
-    ["100", "60", 321, 265, 1],
-  ] as [string, string, number, number, number][]).forEach(
-    ([maxWidth, childWidth, bottomLess, topLess, leftLess]) => {
-      test(`should render properly with childWidth prop set to ${childWidth} and maxWidth prop set to ${maxWidth}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <SimpleColorPickerCustom
-            maxWidth={maxWidth}
-            childWidth={childWidth}
-          />
-        );
-
-        const additionVal = 2;
-        const colorCell = simpleColor(page, 4);
-        const { top, bottom, left } = await colorCell.evaluate((element) =>
-          element.getBoundingClientRect()
-        );
-        await expect(bottom).toBeLessThan(bottomLess + additionVal);
-        await expect(bottom).toBeGreaterThan(bottomLess);
-        await expect(top).toBeLessThan(topLess + additionVal);
-        await expect(top).toBeGreaterThan(topLess);
-        await expect(left).toBeLessThan(leftLess + additionVal);
-        await expect(left).toBeGreaterThan(leftLess);
-      });
-    }
-  );
+  (
+    [
+      ["300", "75", 89, 33, 233],
+      ["100", "60", 321, 265, 1],
+    ] as [string, string, number, number, number][]
+  ).forEach(([maxWidth, childWidth, bottomLess, topLess, leftLess]) => {
+    test(`should render properly with childWidth prop set to ${childWidth} and maxWidth prop set to ${maxWidth}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <SimpleColorPickerCustom maxWidth={maxWidth} childWidth={childWidth} />,
+      );
+
+      const additionVal = 2;
+      const colorCell = simpleColor(page, 4);
+      const { top, bottom, left } = await colorCell.evaluate((element) =>
+        element.getBoundingClientRect(),
+      );
+      await expect(bottom).toBeLessThan(bottomLess + additionVal);
+      await expect(bottom).toBeGreaterThan(bottomLess);
+      await expect(top).toBeLessThan(topLess + additionVal);
+      await expect(top).toBeGreaterThan(topLess);
+      await expect(left).toBeLessThan(leftLess + additionVal);
+      await expect(left).toBeGreaterThan(leftLess);
+    });
+  });
 
   test("should render with required prop", async ({ mount, page }) => {
     await mount(<SimpleColorPickerCustom required />);
@@ -301,18 +300,20 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
     await verifyRequiredAsteriskForLegend(page);
   });
 
-  ([
-    ["error", VALIDATION.ERROR],
-    ["warning", VALIDATION.WARNING],
-    ["info", VALIDATION.INFO],
-  ] as const).forEach(([type, color]) => {
+  (
+    [
+      ["error", VALIDATION.ERROR],
+      ["warning", VALIDATION.WARNING],
+      ["info", VALIDATION.INFO],
+    ] as const
+  ).forEach(([type, color]) => {
     test(`should render with ${type} as a string`, async ({ mount, page }) => {
       await mount(
         <SimpleColorPickerCustom
           {...{
             [type]: "Message",
           }}
-        />
+        />,
       );
 
       await simpleColorPickerComponent(page)
@@ -320,22 +321,24 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
         .locator(`[data-element="${type}"]`)
         .hover();
       await expect(getDataElementByValue(page, "tooltip")).toHaveText(
-        "Message"
+        "Message",
       );
       await expect(
-        simpleColorDiv(page, 0).locator("..").locator("..")
+        simpleColorDiv(page, 0).locator("..").locator(".."),
       ).toHaveCSS("outline-color", color);
       await expect(
-        await getStyle(getDataElementByValue(page, type), "color", "before")
+        await getStyle(getDataElementByValue(page, type), "color", "before"),
       ).toBe(color);
     });
   });
 
-  ([
-    ["error", VALIDATION.ERROR],
-    ["warning", VALIDATION.WARNING],
-    ["info", VALIDATION.INFO],
-  ] as const).forEach(([type, color]) => {
+  (
+    [
+      ["error", VALIDATION.ERROR],
+      ["warning", VALIDATION.WARNING],
+      ["info", VALIDATION.INFO],
+    ] as const
+  ).forEach(([type, color]) => {
     test(`should render with ${type} as a string and validationOnLegend prop`, async ({
       mount,
       page,
@@ -346,7 +349,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
             [type]: "Message",
           }}
           validationOnLegend
-        />
+        />,
       );
 
       await simpleColorPickerComponent(page)
@@ -354,36 +357,38 @@ test.describe("Check functionality for SimpleColorPicker component", () => {
         .locator(`[data-element="${type}"]`)
         .hover();
       await expect(getDataElementByValue(page, "tooltip")).toHaveText(
-        "Message"
+        "Message",
       );
       await expect(
-        simpleColorDiv(page, 0).locator("..").locator("..")
+        simpleColorDiv(page, 0).locator("..").locator(".."),
       ).toHaveCSS("outline-color", color);
       await expect(
-        await getStyle(getDataElementByValue(page, type), "color", "before")
+        await getStyle(getDataElementByValue(page, type), "color", "before"),
       ).toBe(color);
     });
   });
 
-  ([
-    ["error", VALIDATION.ERROR],
-    ["warning", VALIDATION.WARNING],
-    ["info", VALIDATION.INFO],
-  ] as const).forEach(([type, color]) => {
+  (
+    [
+      ["error", VALIDATION.ERROR],
+      ["warning", VALIDATION.WARNING],
+      ["info", VALIDATION.INFO],
+    ] as const
+  ).forEach(([type, color]) => {
     test(`should render with ${type} as a boolean`, async ({ mount, page }) => {
       await mount(
         <SimpleColorPickerCustom
           {...{
             [type]: true,
           }}
-        />
+        />,
       );
 
       await expect(
-        simpleColorPickerComponent(page).locator(`[data-element="${type}"]`)
+        simpleColorPickerComponent(page).locator(`[data-element="${type}"]`),
       ).not.toBeVisible();
       await expect(
-        simpleColorDiv(page, 0).locator("..").locator("..")
+        simpleColorDiv(page, 0).locator("..").locator(".."),
       ).toHaveCSS("outline-color", color);
     });
   });
@@ -479,19 +484,21 @@ test.describe("Check events for SimpleColorPicker component", () => {
       await expect(simpleColorPickerInput(page, focusedIndex)).toBeFocused();
       await expect(simpleColorPickerInput(page, focusedIndex)).toHaveAttribute(
         "value",
-        colors[focusedIndex].color
+        colors[focusedIndex].color,
       );
       await expect(callbackCount).toBe(1);
     });
   });
 
-  ([
-    [0, 5],
-    [1, 6],
-    [2, 7],
-    [3, 8],
-    [4, 9],
-  ] as const).forEach(([indexPress, focusedIndex]) => {
+  (
+    [
+      [0, 5],
+      [1, 6],
+      [2, 7],
+      [3, 8],
+      [4, 9],
+    ] as const
+  ).forEach(([indexPress, focusedIndex]) => {
     test(`should call onChange callback and focus the correct item when the down arrow key is pressed from the element with index ${indexPress}`, async ({
       mount,
       page,
@@ -506,7 +513,7 @@ test.describe("Check events for SimpleColorPicker component", () => {
       await expect(simpleColorPickerInput(page, focusedIndex)).toBeFocused();
       await expect(simpleColorPickerInput(page, focusedIndex)).toHaveAttribute(
         "value",
-        colors[focusedIndex].color
+        colors[focusedIndex].color,
       );
       await expect(callbackCount).toBe(1);
     });
@@ -567,7 +574,7 @@ test.describe("Check functionality for SimpleColor component", () => {
 
     await expect(simpleColorPickerInput(page, 0)).toHaveAttribute(
       "value",
-      colors[7].color
+      colors[7].color,
     );
   });
 
@@ -576,7 +583,7 @@ test.describe("Check functionality for SimpleColor component", () => {
 
     await expect(simpleColorPickerInput(page, 0)).toHaveAttribute(
       "name",
-      testPropValue
+      testPropValue,
     );
   });
 
@@ -585,7 +592,7 @@ test.describe("Check functionality for SimpleColor component", () => {
 
     await containsClass(
       simpleColorPickerInput(page, 0).locator(".."),
-      testPropValue
+      testPropValue,
     );
   });
 
@@ -702,7 +709,7 @@ test.describe("Check accessibility for SimpleColorPicker component", () => {
       page,
     }) => {
       await mount(
-        <SimpleColorPickerCustom maxWidth={maxWidth} childWidth={childWidth} />
+        <SimpleColorPickerCustom maxWidth={maxWidth} childWidth={childWidth} />,
       );
 
       await checkAccessibility(page);
@@ -728,7 +735,7 @@ test.describe("Check accessibility for SimpleColorPicker component", () => {
           {...{
             [type]: "Message",
           }}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -746,7 +753,7 @@ test.describe("Check accessibility for SimpleColorPicker component", () => {
             [type]: "Message",
           }}
           validationOnLegend
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -763,7 +770,7 @@ test.describe("Check accessibility for SimpleColorPicker component", () => {
           {...{
             [type]: true,
           }}
-        />
+        />,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/simple-color-picker/simple-color-picker.test.tsx b/src/components/simple-color-picker/simple-color-picker.test.tsx
index 4463f75054..0d5a613897 100644
--- a/src/components/simple-color-picker/simple-color-picker.test.tsx
+++ b/src/components/simple-color-picker/simple-color-picker.test.tsx
@@ -20,7 +20,7 @@ test("should display deprecation warning once when rendered as uncontrolled", ()
   render(<SimpleColorPicker legend="uncontrolled" name="uncontrolled" />);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
 
@@ -33,7 +33,7 @@ testStyledSystemMarginRTL(
       <SimpleColor id="foo" key="bar" value="#00A376" defaultChecked />
     </SimpleColorPicker>
   ),
-  () => screen.getByRole("radiogroup")
+  () => screen.getByRole("radiogroup"),
 );
 
 test("the `onKeyDown` callback prop is called when the user presses a key", async () => {
@@ -48,7 +48,7 @@ test("the `onKeyDown` callback prop is called when the user presses a key", asyn
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   screen.getAllByRole("radio")[0].focus();
@@ -64,14 +64,14 @@ test("when the `defaultChecked` prop is set on one of the `SimpleColor` children
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" defaultChecked />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   // an error is thrown for using toHaveValue on a radio button, so we need to directly check the `value` attribute
   // eslint-disable-next-line jest-dom/prefer-to-have-value
   expect(screen.getByRole("radio", { checked: true })).toHaveAttribute(
     "value",
-    "#0073C1"
+    "#0073C1",
   );
 });
 
@@ -89,7 +89,7 @@ test("the `data-down` attribute is set to `false` for colors on the bottom row,
       <SimpleColor value="#ABCDEF" />
       <SimpleColor value="#654321" />
       <SimpleColor value="#BADA44" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   expect(screen.getAllByRole("radio")[0]).toHaveAttribute("data-down", "true");
@@ -112,7 +112,7 @@ test("pressing the left arrow key when focused on the first color changes select
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   screen.getAllByRole("radio")[0].focus();
@@ -122,7 +122,7 @@ test("pressing the left arrow key when focused on the first color changes select
   expect(onChange).toHaveBeenCalledWith(
     expect.objectContaining({
       target: expect.objectContaining({ value: "#582C83" }),
-    })
+    }),
   );
   expect(screen.getAllByRole("radio")[2]).toHaveFocus();
 });
@@ -139,7 +139,7 @@ test("pressing the right arrow key changes selection to the next color", async (
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   screen.getAllByRole("radio")[1].focus();
@@ -149,7 +149,7 @@ test("pressing the right arrow key changes selection to the next color", async (
   expect(onChange).toHaveBeenCalledWith(
     expect.objectContaining({
       target: expect.objectContaining({ value: "#582C83" }),
-    })
+    }),
   );
   expect(screen.getAllByRole("radio")[2]).toHaveFocus();
 });
@@ -166,7 +166,7 @@ test("pressing the right arrow key when focused on the last color changes select
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   screen.getAllByRole("radio")[2].focus();
@@ -176,7 +176,7 @@ test("pressing the right arrow key when focused on the last color changes select
   expect(onChange).toHaveBeenCalledWith(
     expect.objectContaining({
       target: expect.objectContaining({ value: "#00A376" }),
-    })
+    }),
   );
   expect(screen.getAllByRole("radio")[0]).toHaveFocus();
 });
@@ -195,7 +195,7 @@ test("when the input has multiple rows, pressing the up arrow key changes select
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   screen.getAllByRole("radio")[1].focus();
@@ -205,7 +205,7 @@ test("when the input has multiple rows, pressing the up arrow key changes select
   expect(onChange).toHaveBeenCalledWith(
     expect.objectContaining({
       target: expect.objectContaining({ value: "#00A376" }),
-    })
+    }),
   );
   expect(screen.getAllByRole("radio")[0]).toHaveFocus();
 });
@@ -224,7 +224,7 @@ test("when focus is already on the top row, pressing the up arrow key does not c
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   screen.getAllByRole("radio")[1].focus();
@@ -248,7 +248,7 @@ test("when the input has multiple rows, pressing the down arrow key changes sele
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   screen.getAllByRole("radio")[1].focus();
@@ -258,7 +258,7 @@ test("when the input has multiple rows, pressing the down arrow key changes sele
   expect(onChange).toHaveBeenCalledWith(
     expect.objectContaining({
       target: expect.objectContaining({ value: "#582C83" }),
-    })
+    }),
   );
   expect(screen.getAllByRole("radio")[2]).toHaveFocus();
 });
@@ -278,7 +278,7 @@ test("when focus is already on the bottom row, pressing the down arrow key does
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
       <SimpleColor value="#ABCDEF" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   screen.getAllByRole("radio")[3].focus();
@@ -300,7 +300,7 @@ test("focus is not changed if a non-arrow key is pressed", async () => {
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   screen.getAllByRole("radio")[0].focus();
@@ -322,7 +322,7 @@ test("the `onBlur` callback prop should not be called if focus moves from one co
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   await user.click(screen.getAllByRole("radio")[0]);
@@ -345,7 +345,7 @@ test("the `onBlur` callback prop should not be called if the currently-focused c
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   await user.click(screen.getAllByRole("radio")[0]);
@@ -367,7 +367,7 @@ test("the `onBlur` callback prop should be called if an input is blurred by clic
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   await user.click(screen.getAllByRole("radio")[0]);
@@ -379,7 +379,7 @@ test("the `onBlur` callback prop should be called if an input is blurred by clic
   expect(onBlur).toHaveBeenCalledWith(
     expect.objectContaining({
       target: expect.objectContaining({ value: "#00A376" }),
-    })
+    }),
   );
 });
 
@@ -393,7 +393,7 @@ test("validates the incorrect children prop", () => {
       <SimpleColorPicker name="test" legend="SimpleColorPicker Legend">
         <p>Invalid children</p>
         <p>Invalid children</p>
-      </SimpleColorPicker>
+      </SimpleColorPicker>,
     );
   }).toThrow("SimpleColorPicker accepts only children of type `SimpleColor`.");
 
@@ -431,7 +431,7 @@ test("returns a list of inputs in the ref", () => {
   expect(outsideRef).toEqual(
     expect.objectContaining({
       gridItemRefs: expect.arrayContaining(inputs),
-    })
+    }),
   );
 });
 
@@ -441,7 +441,7 @@ test("the `required` prop is passed to the inputs", () => {
       <SimpleColor value="#00A376" />
       <SimpleColor value="#0073C1" />
       <SimpleColor value="#582C83" />
-    </SimpleColorPicker>
+    </SimpleColorPicker>,
   );
 
   screen.getAllByRole("radio").forEach((input) => {
@@ -456,7 +456,7 @@ test("empty children are accepted without error", () => {
         {null}
         {false}
         {undefined}
-      </SimpleColorPicker>
+      </SimpleColorPicker>,
     );
   }).not.toThrow();
 });
@@ -468,11 +468,11 @@ test("should display deprecation warning once when the `isBlurBlocked` prop is `
       isBlurBlocked
       legend="SimpleColorPicker Legend"
       name="test"
-    />
+    />,
   );
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "The 'isBlurBlocked' prop in SimpleColorPicker is deprecated and support will soon be removed."
+    "The 'isBlurBlocked' prop in SimpleColorPicker is deprecated and support will soon be removed.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
 
@@ -489,11 +489,11 @@ test.each(["error", "warning", "info"])(
         validationOnLegend
         legend="SimpleColorPicker Legend"
         name="test"
-      />
+      />,
     );
 
     expect(
-      within(screen.getByRole("radiogroup")).getByTestId(`icon-${type}`)
+      within(screen.getByRole("radiogroup")).getByTestId(`icon-${type}`),
     ).toBeVisible();
-  }
+  },
 );
diff --git a/src/components/simple-color-picker/simple-color/simple-color.component.tsx b/src/components/simple-color-picker/simple-color/simple-color.component.tsx
index 7e010416c8..49fd323e10 100644
--- a/src/components/simple-color-picker/simple-color/simple-color.component.tsx
+++ b/src/components/simple-color-picker/simple-color/simple-color.component.tsx
@@ -74,7 +74,7 @@ export const SimpleColor = React.forwardRef<HTMLInputElement, SimpleColorProps>(
         </StyledColorSampleBox>
       </StyledSimpleColor>
     );
-  }
+  },
 );
 
 SimpleColor.displayName = "SimpleColor";
diff --git a/src/components/simple-color-picker/simple-color/simple-color.test.tsx b/src/components/simple-color-picker/simple-color/simple-color.test.tsx
index d88640f6e5..90f6761b63 100644
--- a/src/components/simple-color-picker/simple-color/simple-color.test.tsx
+++ b/src/components/simple-color-picker/simple-color/simple-color.test.tsx
@@ -16,7 +16,7 @@ test("has the correct data-component tag", () => {
   // getAllByTestId and take the first element
   expect(screen.getAllByTestId("test-example")[0]).toHaveAttribute(
     "data-component",
-    "simple-color"
+    "simple-color",
   );
 });
 
@@ -26,12 +26,12 @@ test("accepts data values passed as a props", () => {
       value="#0073C2"
       data-element="custom-element"
       data-role="custom-role"
-    />
+    />,
   );
 
   expect(screen.getAllByTestId("custom-role")[0]).toHaveAttribute(
     "data-element",
-    "custom-element"
+    "custom-element",
   );
 });
 
@@ -41,7 +41,7 @@ test("renders a white icon when the background color is dark", () => {
   expect(screen.getByTestId("icon")).toHaveStyleRule(
     "color",
     "var(--colorsUtilityYang100)",
-    { modifier: "::before" }
+    { modifier: "::before" },
   );
 });
 
@@ -51,7 +51,7 @@ test("renders a black icon when the background color is light", () => {
   expect(screen.getByTestId("icon")).toHaveStyleRule(
     "color",
     "var(--colorsUtilityYin090)",
-    { modifier: "::before" }
+    { modifier: "::before" },
   );
 });
 
diff --git a/src/components/split-button/__internal__/split-button.context.ts b/src/components/split-button/__internal__/split-button.context.ts
index 7cd7a01d2a..72ccd2d528 100644
--- a/src/components/split-button/__internal__/split-button.context.ts
+++ b/src/components/split-button/__internal__/split-button.context.ts
@@ -5,7 +5,7 @@ export interface SplitButtonContextProps {
   onChildButtonClick?: (
     childOnClick?: React.MouseEventHandler<
       HTMLButtonElement | HTMLAnchorElement
-    >
+    >,
   ) =>
     | React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
     | undefined;
diff --git a/src/components/split-button/split-button-toggle.style.ts b/src/components/split-button/split-button-toggle.style.ts
index bcc27a66c7..93fefe79d2 100644
--- a/src/components/split-button/split-button-toggle.style.ts
+++ b/src/components/split-button/split-button-toggle.style.ts
@@ -17,7 +17,7 @@ type StyledSplitButtonToggleProps = {
 };
 
 const StyledSplitButtonToggle = styled(
-  StyledButton
+  StyledButton,
 )<StyledSplitButtonToggleProps>`
   ${({ buttonType, disabled, displayed, size, theme }) => css`
     border-top-left-radius: var(--borderRadius000);
diff --git a/src/components/split-button/split-button.component.tsx b/src/components/split-button/split-button.component.tsx
index 4fa7ae0b86..b62915bb63 100644
--- a/src/components/split-button/split-button.component.tsx
+++ b/src/components/split-button/split-button.component.tsx
@@ -88,7 +88,7 @@ export const SplitButton = ({
   } = useChildButtons(toggleButton, CONTENT_WIDTH_RATIO);
 
   const handleMainClick = (
-    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
   ) => {
     // ensure button is focused when clicked (Safari)
     mainButtonRef.current?.focus();
diff --git a/src/components/split-button/split-button.pw.tsx b/src/components/split-button/split-button.pw.tsx
index 1537763097..7cc483d84f 100644
--- a/src/components/split-button/split-button.pw.tsx
+++ b/src/components/split-button/split-button.pw.tsx
@@ -44,20 +44,20 @@ test.describe("Styling tests", () => {
     await mainButton(page).focus();
     await expect(mainButton(page)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(mainButton(page)).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
     await splitToggleButton(page).focus();
     await expect(splitToggleButton(page)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(splitToggleButton(page)).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -72,35 +72,35 @@ test.describe("Styling tests", () => {
     await mainButton(page).focus();
     await expect(mainButton(page)).toHaveCSS(
       "border",
-      "3px solid rgb(255, 188, 25)"
+      "3px solid rgb(255, 188, 25)",
     );
     await splitToggleButton(page).focus();
     await expect(splitToggleButton(page)).toHaveCSS(
       "border",
-      "3px solid rgb(255, 188, 25)"
+      "3px solid rgb(255, 188, 25)",
     );
   });
 
-  ([
-    ["primary", "rgb(0, 126, 69)", "rgb(255, 255, 255)", "rgba(0, 0, 0, 0)"],
-    ["secondary", "rgba(0, 0, 0, 0)", "rgb(0, 126, 69)", "rgb(0, 126, 69)"],
-  ] as [SplitButtonProps["buttonType"], string, string, string][]).forEach(
-    ([buttonType, backgroundColor, color, borderColor]) => {
-      test(`should render ${buttonType} SplitButton with ${backgroundColor} background color, ${color} color and ${borderColor} border color`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<SplitButtonList buttonType={buttonType} />);
+  (
+    [
+      ["primary", "rgb(0, 126, 69)", "rgb(255, 255, 255)", "rgba(0, 0, 0, 0)"],
+      ["secondary", "rgba(0, 0, 0, 0)", "rgb(0, 126, 69)", "rgb(0, 126, 69)"],
+    ] as [SplitButtonProps["buttonType"], string, string, string][]
+  ).forEach(([buttonType, backgroundColor, color, borderColor]) => {
+    test(`should render ${buttonType} SplitButton with ${backgroundColor} background color, ${color} color and ${borderColor} border color`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<SplitButtonList buttonType={buttonType} />);
 
-        await expect(mainButton(page)).toHaveCSS(
-          "background-color",
-          backgroundColor
-        );
-        await expect(mainButton(page)).toHaveCSS("color", color);
-        await expect(mainButton(page)).toHaveCSS("border-color", borderColor);
-      });
-    }
-  );
+      await expect(mainButton(page)).toHaveCSS(
+        "background-color",
+        backgroundColor,
+      );
+      await expect(mainButton(page)).toHaveCSS("color", color);
+      await expect(mainButton(page)).toHaveCSS("border-color", borderColor);
+    });
+  });
 
   test(`should render with the expected border radius on main and toggle buttons`, async ({
     mount,
@@ -110,11 +110,11 @@ test.describe("Styling tests", () => {
 
     await expect(mainButton(page)).toHaveCSS(
       "border-radius",
-      "32px 0px 0px 32px"
+      "32px 0px 0px 32px",
     );
     await expect(splitToggleButton(page)).toHaveCSS(
       "border-radius",
-      "0px 32px 32px 0px"
+      "0px 32px 32px 0px",
     );
   });
 
@@ -127,16 +127,16 @@ test.describe("Styling tests", () => {
     await splitToggleButton(page).nth(0).click();
     await expect(additionalButtonsContainer(page)).toHaveCSS(
       "border-radius",
-      "8px"
+      "8px",
     );
     await expect(additionalButton(page, 0)).toHaveCSS(
       "border-radius",
-      "8px 8px 0px 0px"
+      "8px 8px 0px 0px",
     );
     await expect(additionalButton(page, 1)).toHaveCSS("border-radius", "0px");
     await expect(additionalButton(page, 2)).toHaveCSS(
       "border-radius",
-      "0px 0px 8px 8px"
+      "0px 0px 8px 8px",
     );
   });
 
@@ -149,22 +149,22 @@ test.describe("Styling tests", () => {
         <Button href="#">Button 1</Button>
         <Button>Button 2</Button>
         <Button href="#">Button 3</Button>
-      </SplitButton>
+      </SplitButton>,
     );
 
     await splitToggleButton(page).nth(0).click();
     await expect(additionalButtonsContainer(page)).toHaveCSS(
       "border-radius",
-      "8px"
+      "8px",
     );
     await expect(
-      additionalButtonsContainer(page).locator("a").nth(0)
+      additionalButtonsContainer(page).locator("a").nth(0),
     ).toHaveCSS("border-radius", "8px 8px 0px 0px");
     await expect(
-      additionalButtonsContainer(page).locator("button").nth(0)
+      additionalButtonsContainer(page).locator("button").nth(0),
     ).toHaveCSS("border-radius", "0px");
     await expect(
-      additionalButtonsContainer(page).locator("a").nth(1)
+      additionalButtonsContainer(page).locator("a").nth(1),
     ).toHaveCSS("border-radius", "0px 0px 8px 8px");
   });
 
@@ -177,14 +177,14 @@ test.describe("Styling tests", () => {
         <Button>Button 1</Button>
         <Button>Button 2</Button>
         <Button>Button 3</Button>
-      </SplitButtonList>
+      </SplitButtonList>,
     );
 
     await splitToggleButton(page).nth(0).click();
 
     const transformValue = await getStyle(
       additionalButtonsContainer(page),
-      "min-width"
+      "min-width",
     );
     const transformValueAsNumber = +transformValue.replace("px", "");
 
@@ -199,7 +199,7 @@ test.describe("Styling tests", () => {
     await mount(
       <SplitButton text="default text">
         <Button>Button 1</Button>
-      </SplitButton>
+      </SplitButton>,
     );
 
     await splitToggleButton(page).nth(0).click();
@@ -229,12 +229,12 @@ test.describe("Prop tests", () => {
 
   test(`should render with data-element prop`, async ({ mount, page }) => {
     await mount(
-      <SplitButtonList data-element="split-button-playwright-element" />
+      <SplitButtonList data-element="split-button-playwright-element" />,
     );
 
     await expect(splitMainButton(page)).toHaveAttribute(
       "data-element",
-      "split-button-playwright-element"
+      "split-button-playwright-element",
     );
   });
 
@@ -243,7 +243,7 @@ test.describe("Prop tests", () => {
 
     await expect(splitMainButton(page)).toHaveAttribute(
       "data-role",
-      "split-button-playwright-role"
+      "split-button-playwright-role",
     );
   });
 
@@ -257,30 +257,30 @@ test.describe("Prop tests", () => {
       await getDataElementByValue(page, "dropdown").click();
       await expect(additionalButton(page, 1)).toHaveCSS(
         "justify-content",
-        alignment as string
+        alignment as string,
       );
     });
   });
 
-  ([
-    ["left", 200],
-    ["right", 242],
-  ] as [SplitButtonProps["position"], number][]).forEach(
-    ([position, value]) => {
-      test(`should render with menu position to the ${position}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<SplitButtonList ml="200px" position={position} />);
+  (
+    [
+      ["left", 200],
+      ["right", 242],
+    ] as [SplitButtonProps["position"], number][]
+  ).forEach(([position, value]) => {
+    test(`should render with menu position to the ${position}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<SplitButtonList ml="200px" position={position} />);
 
-        await getDataElementByValue(page, "dropdown").click();
-        const listContainer = additionalButtonsContainer(page);
-        await expect(listContainer).toHaveCSS("position", "absolute");
-        await assertCssValueIsApproximately(listContainer, "top", 45);
-        await assertCssValueIsApproximately(listContainer, "left", value);
-      });
-    }
-  );
+      await getDataElementByValue(page, "dropdown").click();
+      const listContainer = additionalButtonsContainer(page);
+      await expect(listContainer).toHaveCSS("position", "absolute");
+      await assertCssValueIsApproximately(listContainer, "top", 45);
+      await assertCssValueIsApproximately(listContainer, "left", value);
+    });
+  });
 
   test(`should render with component disabled`, async ({ mount, page }) => {
     await mount(<SplitButtonList disabled />);
@@ -290,25 +290,25 @@ test.describe("Prop tests", () => {
     await expect(splitMainButton(page).locator("button").nth(1)).toBeDisabled();
   });
 
-  ([
-    ["after", "left"],
-    ["before", "right"],
-  ] as [SplitButtonProps["iconPosition"], string][]).forEach(
-    ([iconPosition, margin]) => {
-      test(`should render with icon position ${iconPosition}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <SplitButtonList iconType="add" iconPosition={iconPosition}>
-            IconPosition
-          </SplitButtonList>
-        );
+  (
+    [
+      ["after", "left"],
+      ["before", "right"],
+    ] as [SplitButtonProps["iconPosition"], string][]
+  ).forEach(([iconPosition, margin]) => {
+    test(`should render with icon position ${iconPosition}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <SplitButtonList iconType="add" iconPosition={iconPosition}>
+          IconPosition
+        </SplitButtonList>,
+      );
 
-        await expect(icon(page).first()).toHaveCSS(`margin-${margin}`, "8px");
-      });
-    }
-  );
+      await expect(icon(page).first()).toHaveCSS(`margin-${margin}`, "8px");
+    });
+  });
 });
 
 test.describe("Events tests", () => {
@@ -322,7 +322,7 @@ test.describe("Events tests", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await splitMainButtonDataComponent(page, 0).click();
@@ -338,7 +338,7 @@ test.describe("Functional tests", () => {
     await mount(
       <Accordion title="Heading">
         <SplitButtonList />
-      </Accordion>
+      </Accordion>,
     );
 
     await accordionDefaultTitle(page).click();
@@ -348,7 +348,7 @@ test.describe("Functional tests", () => {
     await expect(additionalButton(page, 2)).toBeVisible();
     await expect(splitToggleButton(page)).toHaveAttribute(
       "aria-expanded",
-      "true"
+      "true",
     );
   });
 
@@ -359,7 +359,7 @@ test.describe("Functional tests", () => {
     await mount(
       <Accordion title="Heading">
         <SplitButtonList />
-      </Accordion>
+      </Accordion>,
     );
 
     await accordionDefaultTitle(page).press("Enter");
@@ -369,7 +369,7 @@ test.describe("Functional tests", () => {
     await expect(additionalButton(page, 2)).toBeVisible();
     await expect(splitToggleButton(page)).toHaveAttribute(
       "aria-expanded",
-      "true"
+      "true",
     );
   });
 
@@ -813,7 +813,7 @@ test.describe("Accessibility tests", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   (["primary", "secondary"] as SplitButtonProps["buttonType"][]).forEach(
@@ -827,7 +827,7 @@ test.describe("Accessibility tests", () => {
         await splitToggleButton(page).nth(0).click();
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   (["primary", "secondary"] as SplitButtonProps["buttonType"][]).forEach(
@@ -842,7 +842,7 @@ test.describe("Accessibility tests", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   (["primary", "secondary"] as SplitButtonProps["buttonType"][]).forEach(
@@ -857,7 +857,7 @@ test.describe("Accessibility tests", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   (["small", "medium", "large"] as SplitButtonProps["size"][]).forEach(
@@ -870,7 +870,7 @@ test.describe("Accessibility tests", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   (["left", "right"] as SplitButtonProps["align"][]).forEach((alignment) => {
@@ -904,12 +904,12 @@ test.describe("Accessibility tests", () => {
         await mount(
           <SplitButtonList iconType="add" iconPosition={iconPosition}>
             IconPosition
-          </SplitButtonList>
+          </SplitButtonList>,
         );
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   test(`should pass accessibility tests for component in hidden container`, async ({
@@ -925,7 +925,7 @@ test.describe("Accessibility tests", () => {
             <Button size="large">Button 3</Button>
           </SplitButton>
         </Box>
-      </Accordion>
+      </Accordion>,
     );
 
     await accordionDefaultTitle(page).click();
diff --git a/src/components/split-button/split-button.test.tsx b/src/components/split-button/split-button.test.tsx
index 4ded5b9872..f32898f105 100644
--- a/src/components/split-button/split-button.test.tsx
+++ b/src/components/split-button/split-button.test.tsx
@@ -49,20 +49,20 @@ testStyledSystemMarginRTL(
       <Button>Test</Button>
     </SplitButton>
   ),
-  () => screen.getByTestId("split-button-container")
+  () => screen.getByTestId("split-button-container"),
 );
 
 test("should render with only the main and toggle buttons visible when only required props passed", () => {
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   expect(screen.getByRole("button", { name: "Main" })).toBeVisible();
   expect(screen.getByRole("button", { name: "Show more" })).toBeVisible();
   expect(
-    screen.queryByRole("button", { name: "Single Button" })
+    screen.queryByRole("button", { name: "Single Button" }),
   ).not.toBeInTheDocument();
 });
 
@@ -71,7 +71,7 @@ test("should render with the main, toggle and child buttons visible when require
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = await screen.findByRole("button", { name: "Show more" });
@@ -89,7 +89,7 @@ test("should render with the main, toggle and multiple child buttons visible whe
       <Button key="testKey1">Extra Button 1</Button>
       <Button key="testKey2">Extra Button 2</Button>
       <Button key="testKey3">Extra Button 3</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -98,25 +98,24 @@ test("should render with the main, toggle and multiple child buttons visible whe
   expect(screen.getByRole("button", { name: "Main" })).toBeVisible();
   expect(toggle).toBeVisible();
   expect(
-    await screen.findByRole("button", { name: "Extra Button 1" })
+    await screen.findByRole("button", { name: "Extra Button 1" }),
   ).toBeVisible();
   expect(
-    await screen.findByRole("button", { name: "Extra Button 2" })
+    await screen.findByRole("button", { name: "Extra Button 2" }),
   ).toBeVisible();
   expect(
-    await screen.findByRole("button", { name: "Extra Button 3" })
+    await screen.findByRole("button", { name: "Extra Button 3" }),
   ).toBeVisible();
 });
 
 test("should render with the correct styles when 'size' is 'small''", async () => {
-  const { fontSize, minHeight, paddingLeft, paddingRight } = buildSizeConfig(
-    "small"
-  );
+  const { fontSize, minHeight, paddingLeft, paddingRight } =
+    buildSizeConfig("small");
   const user = userEvent.setup();
   render(
     <SplitButton text="Main" size="small">
       <Button size="small">Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -143,14 +142,13 @@ test("should render with the correct styles when 'size' is 'small''", async () =
 });
 
 test("should render with the correct styles when 'size' is 'medium''", async () => {
-  const { fontSize, minHeight, paddingLeft, paddingRight } = buildSizeConfig(
-    "medium"
-  );
+  const { fontSize, minHeight, paddingLeft, paddingRight } =
+    buildSizeConfig("medium");
   const user = userEvent.setup();
   render(
     <SplitButton text="Main" size="medium">
       <Button size="medium">Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -177,14 +175,13 @@ test("should render with the correct styles when 'size' is 'medium''", async ()
 });
 
 test("should render with the correct styles when 'size' is 'large''", async () => {
-  const { fontSize, minHeight, paddingLeft, paddingRight } = buildSizeConfig(
-    "large"
-  );
+  const { fontSize, minHeight, paddingLeft, paddingRight } =
+    buildSizeConfig("large");
   const user = userEvent.setup();
   render(
     <SplitButton text="Main" size="large">
       <Button size="large">Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -214,7 +211,7 @@ test("should have correct default aria-label when no prop passed", () => {
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   expect(screen.getByLabelText("Show more")).toBeInTheDocument();
@@ -224,7 +221,7 @@ test("should render custom aria-label when 'aria-label' prop is passed", () => {
   render(
     <SplitButton text="Main" aria-label="Show more options">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   expect(screen.getByLabelText("Show more options")).toBeInTheDocument();
@@ -238,7 +235,7 @@ test("should render with custom aria-label set via 'locale'", () => {
       <SplitButton text="Main">
         <Button>Single Button</Button>
       </SplitButton>
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   expect(screen.getByLabelText("Show more options")).toBeInTheDocument();
@@ -248,7 +245,7 @@ test("should render with the correct data attributes on container", () => {
   render(
     <SplitButton text="Main" data-element="bar" data-role="baz">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const splitButton = screen.getByTestId("baz");
@@ -261,7 +258,7 @@ test("should render with the correct data attributes on the main button", () =>
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const mainButton = screen.getByRole("button", { name: "Main" });
@@ -273,7 +270,7 @@ test("should render with correct data attributes on the toggle button element",
   render(
     <SplitButton text="Main" data-element="bar" data-role="baz">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -286,7 +283,7 @@ test("should render with correct data attributes on the additional button elemen
   render(
     <SplitButton text="Main" data-element="bar" data-role="baz">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -295,7 +292,7 @@ test("should render with correct data attributes on the additional button elemen
 
   expect(additionalButtons).toHaveAttribute(
     "data-element",
-    "additional-buttons"
+    "additional-buttons",
   );
 });
 
@@ -303,12 +300,12 @@ test("should render with custom id when 'id' prop is passed", () => {
   render(
     <SplitButton text="Main" id="custom-id">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   expect(screen.getByRole("button", { name: "Main" })).toHaveAttribute(
     "id",
-    "custom-id"
+    "custom-id",
   );
 });
 
@@ -316,11 +313,11 @@ test("should render with custom class when 'className' prop is passed", () => {
   render(
     <SplitButton text="Main" className="custom-class">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   expect(screen.getByRole("button", { name: "Main" })).toHaveClass(
-    "custom-class"
+    "custom-class",
   );
 });
 
@@ -328,7 +325,7 @@ test("should render with disabled state when 'disabled' prop is passed", () => {
   render(
     <SplitButton text="Main" disabled>
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   expect(screen.getByRole("button", { name: "Main" })).toBeDisabled();
@@ -348,7 +345,7 @@ test("should render with the correct styles when 'buttonType' prop is 'primary'
   render(
     <SplitButton text="Main" buttonType="primary">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   expect(screen.getByRole("button", { name: "Show more" })).toHaveStyle({
@@ -360,7 +357,7 @@ test("should render with the correct styles when 'buttonType' prop is 'primary'
   render(
     <SplitButton text="Main" buttonType="primary" disabled>
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   expect(screen.getByRole("button", { name: "Show more" })).not.toHaveStyle({
@@ -373,7 +370,7 @@ test("should render additional button text with align set to 'left'", async () =
   render(
     <SplitButton text="Main" align="left">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   await user.click(screen.getByRole("button", { name: "Show more" }));
@@ -388,7 +385,7 @@ test("should render additional button text with align set to 'right'", async ()
   render(
     <SplitButton text="Main" align="right">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   await user.click(screen.getByRole("button", { name: "Show more" }));
@@ -403,7 +400,7 @@ test("should render the child buttons when a click event detected on toggle butt
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   await user.click(screen.getByRole("button", { name: "Show more" }));
@@ -419,7 +416,7 @@ test("should not render the child buttons when a click event detected on toggle
   render(
     <SplitButton text="Main" disabled>
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   await user.click(screen.getByRole("button", { name: "Show more" }));
@@ -433,7 +430,7 @@ test("should render the child buttons when a 'Enter' keydown event detected and
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -452,7 +449,7 @@ test("should render the child buttons when a ' ' (space) keydown event detected
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
   const toggle = screen.getByRole("button", { name: "Show more" });
   toggle.focus();
@@ -469,7 +466,7 @@ test("should not hide the additional buttons when already open and 'Enter' key p
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -488,7 +485,7 @@ test("should not hide the additional buttons when already open and ' ' (space) k
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -507,7 +504,7 @@ test("should render the child buttons when a 'ArrowDown' keydown event detected
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = await screen.findByRole("button", { name: "Show more" });
@@ -524,7 +521,7 @@ test("should render the child buttons when a 'ArrowUp' keydown event detected an
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = await screen.findByRole("button", { name: "Show more" });
@@ -541,7 +538,7 @@ test("should not render the child buttons when a keydown event detected with unr
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = await screen.findByRole("button", { name: "Show more" });
@@ -559,7 +556,7 @@ test("should not render the child buttons when a 'Enter' keydown event detected
   render(
     <SplitButton text="Main" onKeyDown={onKeyDownMock}>
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const main = await screen.findByRole("button", { name: "Main" });
@@ -569,7 +566,7 @@ test("should not render the child buttons when a 'Enter' keydown event detected
   await user.keyboard("{Enter}");
   expect(onKeyDownMock).toHaveBeenCalled();
   expect(
-    screen.queryByRole("button", { name: "Single Button" })
+    screen.queryByRole("button", { name: "Single Button" }),
   ).not.toBeInTheDocument();
 });
 
@@ -579,7 +576,7 @@ test("should not render the child buttons when a 'Space' keydown event detected
   render(
     <SplitButton text="Main" onKeyDown={onKeyDownMock}>
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const main = await screen.findByRole("button", { name: "Main" });
@@ -589,7 +586,7 @@ test("should not render the child buttons when a 'Space' keydown event detected
   await user.keyboard("{space}");
   expect(onKeyDownMock).toHaveBeenCalled();
   expect(
-    screen.queryByRole("button", { name: "Single Button" })
+    screen.queryByRole("button", { name: "Single Button" }),
   ).not.toBeInTheDocument();
 });
 
@@ -599,7 +596,7 @@ test("should not render the child buttons when main button is clicked", async ()
   render(
     <SplitButton text="Main" onClick={onClickMock}>
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const main = await screen.findByRole("button", { name: "Main" });
@@ -607,7 +604,7 @@ test("should not render the child buttons when main button is clicked", async ()
 
   expect(onClickMock).toHaveBeenCalled();
   expect(
-    screen.queryByRole("button", { name: "Single Button" })
+    screen.queryByRole("button", { name: "Single Button" }),
   ).not.toBeInTheDocument();
 });
 
@@ -617,7 +614,7 @@ test("should not call the `onClick` handle when main button is clicked whilst di
   render(
     <SplitButton text="Main" onClick={onClickMock} disabled>
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   await user.click(screen.getByRole("button", { name: "Main" }));
@@ -630,7 +627,7 @@ test("should hide the additional buttons when a click event detected outside the
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -647,7 +644,7 @@ test("should hide the additional buttons when a 'Escape' keydown event detected
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -668,7 +665,7 @@ test("should hide the additional buttons when a 'Escape' keydown event detected
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = await screen.findByRole("button", { name: "Show more" });
@@ -687,7 +684,7 @@ test("should render with the correct styles when 'align' prop is 'right'", async
   render(
     <SplitButton text="Main" align="right">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -709,7 +706,7 @@ test("should render with the correct styles when 'align' prop is 'left'", async
   render(
     <SplitButton text="Main" align="left">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -732,7 +729,7 @@ test("should call the relevant 'onClick' callback and hide the additional button
   render(
     <SplitButton text="Main" onClick={onClickMock}>
       <Button onClick={onClickOnChildMock}>Child Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = await screen.findByRole("button", { name: "Show more" });
@@ -751,7 +748,7 @@ test("should hide the additional buttons when the main button is clicked", async
   render(
     <SplitButton text="Main">
       <Button>Single Button</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -775,7 +772,7 @@ test("should support navigating the additional buttons via down arrow key but st
       <Button key="testKey1">Extra Button 1</Button>
       <Button key="testKey2">Extra Button 2</Button>
       <Button key="testKey3">Extra Button 3</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -807,7 +804,7 @@ test("should support navigating the additional buttons via up arrow key but stop
       <Button key="testKey1">Extra Button 1</Button>
       <Button key="testKey2">Extra Button 2</Button>
       <Button key="testKey3">Extra Button 3</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -841,7 +838,7 @@ test("should support navigating to the last child button via end key", async ()
       <Button key="testKey1">Extra Button 1</Button>
       <Button key="testKey2">Extra Button 2</Button>
       <Button key="testKey3">Extra Button 3</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -866,7 +863,7 @@ test("should support navigating to the first child button via home key", async (
       <Button key="testKey1">Extra Button 1</Button>
       <Button key="testKey2">Extra Button 2</Button>
       <Button key="testKey3">Extra Button 3</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -893,7 +890,7 @@ test("should support navigating the additional buttons via tab key and hide the
       <Button key="testKey1">Extra Button 1</Button>
       <Button key="testKey2">Extra Button 2</Button>
       <Button key="testKey3">Extra Button 3</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
@@ -926,7 +923,7 @@ test("should support navigating the additional buttons via shift+tab key, hide t
       <Button key="testKey1">Extra Button 1</Button>
       <Button key="testKey2">Extra Button 2</Button>
       <Button key="testKey3">Extra Button 3</Button>
-    </SplitButton>
+    </SplitButton>,
   );
 
   const toggle = screen.getByRole("button", { name: "Show more" });
diff --git a/src/components/step-flow/components.test-pw.tsx b/src/components/step-flow/components.test-pw.tsx
index 739563bd74..2dd360f580 100644
--- a/src/components/step-flow/components.test-pw.tsx
+++ b/src/components/step-flow/components.test-pw.tsx
@@ -20,7 +20,7 @@ export const StepFlowComponentWithStepFlowTitleNode = () => {
 };
 
 export const StepFlowComponentWithRefAndButtons = (
-  props: Partial<StepFlowProps>
+  props: Partial<StepFlowProps>,
 ) => {
   const stepFlowHandle = useRef<StepFlowHandle>(null);
 
@@ -48,7 +48,7 @@ export const StepFlowComponentWithRefAndButtons = (
 };
 
 export const StepFlowComponentWithRefAndButtonsAndStepFlowTitleNode = (
-  props: Partial<StepFlowProps>
+  props: Partial<StepFlowProps>,
 ) => {
   const stepFlowHandle = useRef<StepFlowHandle>(null);
 
diff --git a/src/components/step-flow/step-flow-title/step-flow-title.component.tsx b/src/components/step-flow/step-flow-title/step-flow-title.component.tsx
index f74e46e622..618bfaf013 100644
--- a/src/components/step-flow/step-flow-title/step-flow-title.component.tsx
+++ b/src/components/step-flow/step-flow-title/step-flow-title.component.tsx
@@ -65,7 +65,7 @@ export const StepFlowTitle = ({
               screenReaderOnlyTitle || titleString,
               validatedCurrentStep,
               totalSteps,
-              category
+              category,
             )}
           </Typography>
         )}
diff --git a/src/components/step-flow/step-flow-title/step-flow-title.test.tsx b/src/components/step-flow/step-flow-title/step-flow-title.test.tsx
index efe9cd7cf6..4d07fffe74 100644
--- a/src/components/step-flow/step-flow-title/step-flow-title.test.tsx
+++ b/src/components/step-flow/step-flow-title/step-flow-title.test.tsx
@@ -14,7 +14,7 @@ test("when the `StepFlowTitle` is not passed via the `title` prop in `StepFlow`,
   render(<StepFlowTitle titleString="title" />);
 
   const screenReaderOnlyText = screen.queryByTestId(
-    "visually-hidden-title-text"
+    "visually-hidden-title-text",
   );
   expect(screenReaderOnlyText).not.toBeInTheDocument();
 });
@@ -26,7 +26,7 @@ test("when the `StepFlowTitle` is passed via the `title` prop in `StepFlow`, the
       totalSteps={4}
       category="category"
       title={<StepFlowTitle titleString="title" />}
-    />
+    />,
   );
 
   const title = screen.getByRole("heading", { level: 1 });
@@ -53,14 +53,14 @@ test("when the 'screenReaderOnlyTitle' prop is passed, it overrides the value pa
           screenReaderOnlyTitle="this title overrides the other title"
         />
       }
-    />
+    />,
   );
 
   const title = screen.getByRole("heading", { level: 1 });
   expect(
     within(title).getByText(
-      `this title overrides the other title. Step 1 of 8.`
-    )
+      `this title overrides the other title. Step 1 of 8.`,
+    ),
   ).toHaveStyle({
     border: "0",
     height: "1px",
@@ -92,7 +92,7 @@ test.each([
     const heading = screen.getByRole("heading", { level });
     expect(heading).toBeVisible();
     expect(heading).toHaveTextContent("title");
-  }
+  },
 );
 
 test("renders level two heading when the 'titleVariant' prop is h2 passed directly to `StepFlowTitle`, and the 'titleVariant' prop is also passed as h1 to `StepFlow`. As the 'titleVariant' on `StepFlowTitle` takes priority", () => {
@@ -103,7 +103,7 @@ test("renders level two heading when the 'titleVariant' prop is h2 passed direct
       category="category"
       titleVariant="h1"
       title={<StepFlowTitle titleString="title" titleVariant="h2" />}
-    />
+    />,
   );
 
   const heading = screen.getByRole("heading", { level: 2 });
diff --git a/src/components/step-flow/step-flow.component.tsx b/src/components/step-flow/step-flow.component.tsx
index bd003f2dc8..a1acbc9429 100644
--- a/src/components/step-flow/step-flow.component.tsx
+++ b/src/components/step-flow/step-flow.component.tsx
@@ -46,7 +46,7 @@ export interface StepFlowProps extends MarginProps, TagProps {
   onDismiss?: (
     e:
       | React.KeyboardEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => void;
 }
 
@@ -68,11 +68,11 @@ export const StepFlow = forwardRef<StepFlowHandle, StepFlowProps>(
       onDismiss,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const totalStepsArray = Array.from(
       { length: totalSteps },
-      (_, index) => index + 1
+      (_, index) => index + 1,
     );
 
     const validatedCurrentStep =
@@ -87,14 +87,14 @@ export const StepFlow = forwardRef<StepFlowHandle, StepFlowProps>(
       console.warn(
         "[WARNING] The `currentStep` prop should not be higher than the `totalSteps`prop in `StepFlow`." +
           " Please ensure `currentStep`s value does not exceed that of `totalSteps`, in the meantime" +
-          " we have set `currentStep` value to that of `totalSteps`, and all indicators have been marked as completed."
+          " we have set `currentStep` value to that of `totalSteps`, and all indicators have been marked as completed.",
       );
     }
     if (!noRefWarnTriggered && !ref) {
       noRefWarnTriggered = true;
       console.warn(
         "[WARNING] A `ref` should be provided to ensure focus is programmatically focused back to a title div," +
-          " this ensures screen reader users are informed regarding any changes and can navigate back down the page."
+          " this ensures screen reader users are informed regarding any changes and can navigate back down the page.",
       );
     }
 
@@ -145,7 +145,7 @@ export const StepFlow = forwardRef<StepFlowHandle, StepFlowProps>(
           titleRef.current?.focus();
         },
       }),
-      []
+      [],
     );
 
     const stepFlowTitle = (
@@ -216,7 +216,7 @@ export const StepFlow = forwardRef<StepFlowHandle, StepFlowProps>(
         )}
       </StyledStepFlow>
     );
-  }
+  },
 );
 
 export default StepFlow;
diff --git a/src/components/step-flow/step-flow.pw.tsx b/src/components/step-flow/step-flow.pw.tsx
index b0adb2bd47..bd677d1583 100644
--- a/src/components/step-flow/step-flow.pw.tsx
+++ b/src/components/step-flow/step-flow.pw.tsx
@@ -59,7 +59,7 @@ test.describe("Prop checks for StepFlow component", () => {
       page,
     }) => {
       await mount(
-        <StepFlowComponent title="foo" titleVariant={titleVariants} />
+        <StepFlowComponent title="foo" titleVariant={titleVariants} />,
       );
 
       await expect(page.locator(titleVariants)).toContainText("foo");
@@ -76,7 +76,7 @@ test.describe("Prop checks for StepFlow component", () => {
           title={
             <StepFlowTitle titleString="foo" titleVariant={titleVariants} />
           }
-        />
+        />,
       );
 
       await expect(page.locator(titleVariants)).toContainText("foo");
@@ -92,36 +92,40 @@ test.describe("Prop checks for StepFlow component", () => {
     await expect(stepFlowProgressIndicatorBar(page)).toBeVisible();
   });
 
-  ([
-    [1, 1],
-    [2, 1],
-    [2, 3],
-  ] as [Steps, Steps][]).forEach(([totalSteps, currentStep]) => {
+  (
+    [
+      [1, 1],
+      [2, 1],
+      [2, 3],
+    ] as [Steps, Steps][]
+  ).forEach(([totalSteps, currentStep]) => {
     test(`should render the correct label when the 'totalSteps' prop is passed as ${totalSteps} and 'currentStep' is ${currentStep}`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <StepFlowComponent totalSteps={totalSteps} currentStep={currentStep} />
+        <StepFlowComponent totalSteps={totalSteps} currentStep={currentStep} />,
       );
 
       if (totalSteps >= currentStep) {
         await expect(stepFlowLabel(page)).toHaveText(
-          `Step ${currentStep} of ${totalSteps}`
+          `Step ${currentStep} of ${totalSteps}`,
         );
       } else {
         await expect(stepFlowLabel(page)).toHaveText(
-          `Step ${totalSteps} of ${totalSteps}`
+          `Step ${totalSteps} of ${totalSteps}`,
         );
       }
     });
   });
 
-  ([
-    [1, 1],
-    [2, 1],
-    [2, 3],
-  ] as [Steps, Steps][]).forEach(([totalSteps, currentStep]) => {
+  (
+    [
+      [1, 1],
+      [2, 1],
+      [2, 3],
+    ] as [Steps, Steps][]
+  ).forEach(([totalSteps, currentStep]) => {
     test(`should render the correct visually hidden title when the 'totalSteps' prop is passed as ${totalSteps} and 'currentStep' is ${currentStep}, and the category and title props are also passed`, async ({
       mount,
       page,
@@ -135,16 +139,16 @@ test.describe("Prop checks for StepFlow component", () => {
           currentStep={currentStep}
           category={category}
           title={title}
-        />
+        />,
       );
 
       if (totalSteps >= currentStep) {
         await expect(stepFlowVisuallyHiddenTitleText(page)).toHaveText(
-          `${category}. ${title}. Step ${currentStep} of ${totalSteps}.`
+          `${category}. ${title}. Step ${currentStep} of ${totalSteps}.`,
         );
       } else {
         await expect(stepFlowVisuallyHiddenTitleText(page)).toHaveText(
-          `${category}. ${title}. Step ${totalSteps} of ${totalSteps}.`
+          `${category}. ${title}. Step ${totalSteps} of ${totalSteps}.`,
         );
       }
     });
@@ -156,7 +160,7 @@ test.describe("Prop checks for StepFlow component", () => {
       page,
     }) => {
       await mount(
-        <StepFlowComponent totalSteps={totalSteps} showProgressIndicator />
+        <StepFlowComponent totalSteps={totalSteps} showProgressIndicator />,
       );
 
       expect(await stepFlowProgressIndicator(page).count()).toEqual(totalSteps);
@@ -177,13 +181,17 @@ test.describe("Prop checks for StepFlow component", () => {
     page,
   }) => {
     await mount(
-      <StepFlowComponent currentStep={1} totalSteps={1} showProgressIndicator />
+      <StepFlowComponent
+        currentStep={1}
+        totalSteps={1}
+        showProgressIndicator
+      />,
     );
 
     const backgroundColorToken = await getDesignTokensByCssProperty(
       page,
       stepFlowProgressIndicator(page),
-      "background-color"
+      "background-color",
     );
 
     expect(backgroundColorToken[0]).toBe("--colorsUtilityYin090");
@@ -194,13 +202,17 @@ test.describe("Prop checks for StepFlow component", () => {
     page,
   }) => {
     await mount(
-      <StepFlowComponent currentStep={2} totalSteps={3} showProgressIndicator />
+      <StepFlowComponent
+        currentStep={2}
+        totalSteps={3}
+        showProgressIndicator
+      />,
     );
 
     const backgroundColorToken = await getDesignTokensByCssProperty(
       page,
       stepFlowProgressIndicator(page).nth(0),
-      "background-color"
+      "background-color",
     );
 
     expect(backgroundColorToken[0]).toBe("--colorsSemanticPositive500");
@@ -211,13 +223,17 @@ test.describe("Prop checks for StepFlow component", () => {
     page,
   }) => {
     await mount(
-      <StepFlowComponent currentStep={2} totalSteps={3} showProgressIndicator />
+      <StepFlowComponent
+        currentStep={2}
+        totalSteps={3}
+        showProgressIndicator
+      />,
     );
 
     const backgroundColorToken = await getDesignTokensByCssProperty(
       page,
       stepFlowProgressIndicator(page).nth(2),
-      "background-color"
+      "background-color",
     );
 
     expect(backgroundColorToken[0]).toBe("--colorsActionDisabled600");
@@ -236,7 +252,7 @@ test.describe("Event checks for StepFlow component", () => {
         onDismiss={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
     await stepFlowDismissIcon(page).click();
 
@@ -321,7 +337,11 @@ test.describe("Accessibility tests for StepFlow component", () => {
     page,
   }) => {
     await mount(
-      <StepFlowComponent showProgressIndicator currentStep={2} totalSteps={3} />
+      <StepFlowComponent
+        showProgressIndicator
+        currentStep={2}
+        totalSteps={3}
+      />,
     );
 
     await checkAccessibility(page);
diff --git a/src/components/step-flow/step-flow.test.tsx b/src/components/step-flow/step-flow.test.tsx
index b3cc25b427..9bc9226589 100644
--- a/src/components/step-flow/step-flow.test.tsx
+++ b/src/components/step-flow/step-flow.test.tsx
@@ -32,7 +32,7 @@ function generateCurrentStepOverTotalStepsVariations(): [Steps, Steps][] {
 
 function calculateStepStateIndexes(
   totalSteps: number,
-  currentStepParam: number
+  currentStepParam: number,
 ) {
   let currentStep = currentStepParam;
 
@@ -54,7 +54,7 @@ test("should render the correct element and text when the category prop is passe
       totalSteps={6}
       category="bar"
       ref={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByText("bar")).toBeVisible();
@@ -68,7 +68,7 @@ test("when the 'title' prop is passed as a string, the correct element and text
       totalSteps={6}
       category="bar"
       ref={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByText("baz")).toBeVisible();
@@ -87,7 +87,7 @@ test("when the 'title' prop is passed via the `StepFlowTitle` sub component, the
       totalSteps={6}
       category="bar"
       ref={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByText("node")).toBeVisible();
@@ -95,7 +95,7 @@ test("when the 'title' prop is passed via the `StepFlowTitle` sub component, the
 
 test("renders level one heading when the 'titleVariant' prop is not passed", () => {
   render(
-    <StepFlow title="Title" currentStep={5} totalSteps={6} ref={() => {}} />
+    <StepFlow title="Title" currentStep={5} totalSteps={6} ref={() => {}} />,
   );
 
   const heading = screen.getByRole("heading", { level: 1 });
@@ -116,13 +116,13 @@ it.each([
         totalSteps={6}
         titleVariant={titleVariant}
         ref={() => {}}
-      />
+      />,
     );
 
     const heading = screen.getByRole("heading", { level });
     expect(heading).toBeVisible();
     expect(heading).toHaveTextContent("foo");
-  }
+  },
 );
 
 test("renders progress indicator bar when 'showProgressIndicator' prop is true", () => {
@@ -133,7 +133,7 @@ test("renders progress indicator bar when 'showProgressIndicator' prop is true",
       totalSteps={6}
       showProgressIndicator
       ref={() => {}}
-    />
+    />,
   );
   expect(screen.getByTestId("progress-indicator-bar")).toBeVisible();
 });
@@ -152,13 +152,13 @@ it.each(generateLimitedVariations())(
         wrapper: ({ children }: { children: React.ReactNode }) => (
           <I18nProvider locale={enGB}>{children}</I18nProvider>
         ),
-      }
+      },
     );
 
     expect(
-      screen.getByText(`Step ${currentStep} of ${totalSteps}`)
+      screen.getByText(`Step ${currentStep} of ${totalSteps}`),
     ).toBeVisible();
-  }
+  },
 );
 
 it.each(generateCurrentStepOverTotalStepsVariations())(
@@ -175,13 +175,13 @@ it.each(generateCurrentStepOverTotalStepsVariations())(
         wrapper: ({ children }: { children: React.ReactNode }) => (
           <I18nProvider locale={enGB}>{children}</I18nProvider>
         ),
-      }
+      },
     );
 
     expect(
-      screen.getByText(`Step ${totalSteps} of ${totalSteps}`)
+      screen.getByText(`Step ${totalSteps} of ${totalSteps}`),
     ).toBeVisible();
-  }
+  },
 );
 
 it.each(generateLimitedVariations())(
@@ -199,12 +199,14 @@ it.each(generateLimitedVariations())(
         wrapper: ({ children }: { children: React.ReactNode }) => (
           <I18nProvider locale={enGB}>{children}</I18nProvider>
         ),
-      }
+      },
     );
 
     const title = screen.getByRole("heading", { level: 1 });
     expect(
-      within(title).getByText(`foo. bar. Step ${currentStep} of ${totalSteps}.`)
+      within(title).getByText(
+        `foo. bar. Step ${currentStep} of ${totalSteps}.`,
+      ),
     ).toHaveStyle({
       border: "0",
       height: "1px",
@@ -215,7 +217,7 @@ it.each(generateLimitedVariations())(
       width: "1px",
       "white-space": "nowrap",
     });
-  }
+  },
 );
 
 it.each(generateCurrentStepOverTotalStepsVariations())(
@@ -233,12 +235,12 @@ it.each(generateCurrentStepOverTotalStepsVariations())(
         wrapper: ({ children }: { children: React.ReactNode }) => (
           <I18nProvider locale={enGB}>{children}</I18nProvider>
         ),
-      }
+      },
     );
 
     const title = screen.getByRole("heading", { level: 1 });
     expect(
-      within(title).getByText(`foo. bar. Step ${totalSteps} of ${totalSteps}.`)
+      within(title).getByText(`foo. bar. Step ${totalSteps} of ${totalSteps}.`),
     ).toHaveStyle({
       border: "0",
       height: "1px",
@@ -249,7 +251,7 @@ it.each(generateCurrentStepOverTotalStepsVariations())(
       width: "1px",
       "white-space": "nowrap",
     });
-  }
+  },
 );
 
 test("when the 'showCloseIcon' prop is true, the correct element renders", () => {
@@ -260,7 +262,7 @@ test("when the 'showCloseIcon' prop is true, the correct element renders", () =>
       currentStep={1}
       showCloseIcon
       ref={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByLabelText("Close")).toBeVisible();
@@ -277,13 +279,13 @@ describe.each(generateLimitedVariations())(
           currentStep={currentStep}
           showProgressIndicator
           ref={() => {}}
-        />
+        />,
       );
 
       const inProgressIndicators = screen
         .getAllByTestId("progress-indicator")
         .filter(
-          (indicator) => indicator.getAttribute("data-state") === "in-progress"
+          (indicator) => indicator.getAttribute("data-state") === "in-progress",
         );
       expect(inProgressIndicators).toHaveLength(1);
     });
@@ -296,18 +298,19 @@ describe.each(generateLimitedVariations())(
           currentStep={currentStep}
           showProgressIndicator
           ref={() => {}}
-        />
+        />,
       );
 
       const completedIndicators = screen
         .getAllByTestId("progress-indicator")
         .filter(
-          (indicator) => indicator.getAttribute("data-state") === "is-completed"
+          (indicator) =>
+            indicator.getAttribute("data-state") === "is-completed",
         );
 
       const currentCount = calculateStepStateIndexes(
         totalSteps,
-        currentStep
+        currentStep,
       )[0];
 
       expect(completedIndicators).toHaveLength(currentCount);
@@ -321,24 +324,24 @@ describe.each(generateLimitedVariations())(
           currentStep={currentStep}
           showProgressIndicator
           ref={() => {}}
-        />
+        />,
       );
 
       const incompleteIndicators = screen
         .getAllByTestId("progress-indicator")
         .filter(
           (indicator) =>
-            indicator.getAttribute("data-state") === "not-completed"
+            indicator.getAttribute("data-state") === "not-completed",
         );
 
       const currentCount = calculateStepStateIndexes(
         totalSteps,
-        currentStep
+        currentStep,
       )[1];
 
       expect(incompleteIndicators).toHaveLength(currentCount);
     });
-  }
+  },
 );
 
 describe.each(generateCurrentStepOverTotalStepsVariations())(
@@ -352,13 +355,13 @@ describe.each(generateCurrentStepOverTotalStepsVariations())(
           currentStep={currentStep}
           showProgressIndicator
           ref={() => {}}
-        />
+        />,
       );
 
       const inProgressIndicators = screen
         .getAllByTestId("progress-indicator")
         .filter(
-          (indicator) => indicator.getAttribute("data-state") === "in-progress"
+          (indicator) => indicator.getAttribute("data-state") === "in-progress",
         );
 
       expect(inProgressIndicators).toHaveLength(1);
@@ -372,18 +375,19 @@ describe.each(generateCurrentStepOverTotalStepsVariations())(
           currentStep={currentStep}
           showProgressIndicator
           ref={() => {}}
-        />
+        />,
       );
 
       const completedIndicators = screen
         .getAllByTestId("progress-indicator")
         .filter(
-          (indicator) => indicator.getAttribute("data-state") === "is-completed"
+          (indicator) =>
+            indicator.getAttribute("data-state") === "is-completed",
         );
 
       const currentCount = calculateStepStateIndexes(
         totalSteps,
-        currentStep
+        currentStep,
       )[0];
 
       expect(completedIndicators).toHaveLength(currentCount);
@@ -397,19 +401,19 @@ describe.each(generateCurrentStepOverTotalStepsVariations())(
           currentStep={currentStep}
           showProgressIndicator
           ref={() => {}}
-        />
+        />,
       );
 
       const incompleteIndicators = screen
         .getAllByTestId("progress-indicator")
         .filter(
           (indicator) =>
-            indicator.getAttribute("data-state") === "not-completed"
+            indicator.getAttribute("data-state") === "not-completed",
         );
 
       expect(incompleteIndicators).toHaveLength(0);
     });
-  }
+  },
 );
 
 describe("when ref handle is passed", () => {
@@ -507,7 +511,7 @@ describe("console warning checks", () => {
 
   it("logs warning in the console once when currentStep is higher than totalSteps", () => {
     render(
-      <StepFlow currentStep={4} totalSteps={1} title="foo" ref={mockRef} />
+      <StepFlow currentStep={4} totalSteps={1} title="foo" ref={mockRef} />,
     );
 
     expect(consoleSpy).toHaveBeenCalledWith(currentStepWarnMessage);
diff --git a/src/components/switch/__internal__/switch-slider-panel.style.ts b/src/components/switch/__internal__/switch-slider-panel.style.ts
index 044ff41888..d0b1f7da05 100644
--- a/src/components/switch/__internal__/switch-slider-panel.style.ts
+++ b/src/components/switch/__internal__/switch-slider-panel.style.ts
@@ -59,12 +59,12 @@ const SwitchSliderPanel = styled.div`
           height: 100%;
 
           ${StyledLoaderSquare} {
-            height: ${size === "large"
-              ? "var(--sizing200)"
-              : "var(--sizing150)"};
-            width: ${size === "large"
-              ? "var(--sizing200)"
-              : "var(--sizing150)"};
+            height: ${
+              size === "large" ? "var(--sizing200)" : "var(--sizing150)"
+            };
+            width: ${
+              size === "large" ? "var(--sizing200)" : "var(--sizing150)"
+            };
           }
         }
       }
diff --git a/src/components/switch/__internal__/switch-slider-panel.test.tsx b/src/components/switch/__internal__/switch-slider-panel.test.tsx
index 2271ae0870..9b664be033 100644
--- a/src/components/switch/__internal__/switch-slider-panel.test.tsx
+++ b/src/components/switch/__internal__/switch-slider-panel.test.tsx
@@ -53,7 +53,7 @@ describe("when the theme is set to sageTheme", () => {
     const switchPanel = screen.getByTestId("slider-panel");
 
     expect(switchPanel).toHaveStyleRule(
-      "color: var(--colorsActionMinorYang100)"
+      "color: var(--colorsActionMinorYang100)",
     );
   });
 
@@ -67,7 +67,7 @@ describe("when the theme is set to sageTheme", () => {
       "var(--colorsActionMinor500)",
       {
         modifier: '[type="off"]',
-      }
+      },
     );
   });
 });
diff --git a/src/components/switch/__internal__/switch-slider.test.tsx b/src/components/switch/__internal__/switch-slider.test.tsx
index dac132cf78..f230ffe227 100644
--- a/src/components/switch/__internal__/switch-slider.test.tsx
+++ b/src/components/switch/__internal__/switch-slider.test.tsx
@@ -70,7 +70,7 @@ test("when `disabled` is true, the correct ::before styles are applied", () => {
     "var(--colorsActionDisabled600)",
     {
       modifier: "::before",
-    }
+    },
   );
 });
 
@@ -85,7 +85,7 @@ test("when `checked` is true and `size` is large, the correct ::before styles ar
     "calc( 100% - var(--spacing500) )",
     {
       modifier: "::before",
-    }
+    },
   );
 });
 
@@ -105,7 +105,7 @@ test("when `checked` true and `disabled` true, the correct styles are applied",
 
   expect(wrapper).toHaveStyleRule(
     "background-color",
-    "var(--colorsActionDisabled500)"
+    "var(--colorsActionDisabled500)",
   );
 });
 
@@ -114,7 +114,7 @@ test("when the consumer has opted out of rounded corners styling, the correct bo
   render(
     <CarbonProvider roundedCornersOptOut>
       <SwitchSlider />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const switchPanel = screen.getByTestId("slider");
@@ -127,7 +127,7 @@ test("when `size` is large and the consumer has opted out of rounded corners sty
   render(
     <CarbonProvider roundedCornersOptOut>
       <SwitchSlider size="large" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const switchPanel = screen.getByTestId("slider");
diff --git a/src/components/switch/switch.component.tsx b/src/components/switch/switch.component.tsx
index f217a21bfc..5923398815 100644
--- a/src/components/switch/switch.component.tsx
+++ b/src/components/switch/switch.component.tsx
@@ -78,7 +78,7 @@ export const Switch = React.forwardRef(
       helpAriaLabel,
       ...rest
     }: SwitchProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     const isControlled = checked !== undefined;
     const { validationRedesignOptIn } = useContext(NewValidationContext);
@@ -88,13 +88,13 @@ export const Switch = React.forwardRef(
     const validationMessageId = useRef(`${guid()}-message`);
 
     const [checkedInternal, setCheckedInternal] = useState(
-      defaultChecked || false
+      defaultChecked || false,
     );
 
     if (!deprecateUncontrolledWarnTriggered && !onChange) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
@@ -103,7 +103,7 @@ export const Switch = React.forwardRef(
         setCheckedInternal(e.target.checked);
         onChange?.(e);
       },
-      [setCheckedInternal, onChange]
+      [setCheckedInternal, onChange],
     );
 
     const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
@@ -275,7 +275,7 @@ export const Switch = React.forwardRef(
         )}
       </>
     );
-  }
+  },
 );
 
 Switch.displayName = "Switch";
diff --git a/src/components/switch/switch.pw.tsx b/src/components/switch/switch.pw.tsx
index 21fd51c147..429f36caf3 100644
--- a/src/components/switch/switch.pw.tsx
+++ b/src/components/switch/switch.pw.tsx
@@ -51,12 +51,12 @@ test.describe("Prop tests for Switch component", () => {
 
     await expect(switchStyling(page)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
 
     await expect(switchStyling(page)).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -73,7 +73,7 @@ test.describe("Prop tests for Switch component", () => {
 
     await expect(switchStyling(page)).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 
@@ -116,7 +116,7 @@ test.describe("Prop tests for Switch component", () => {
 
         await expect(page.getByRole("progressbar")).toHaveAttribute(
           "data-component",
-          "loader"
+          "loader",
         );
       } else {
         await expect(switchInput(page)).not.toBeDisabled();
@@ -129,7 +129,7 @@ test.describe("Prop tests for Switch component", () => {
 
     await expect(getComponent(page, CHARACTERS.STANDARD)).toHaveAttribute(
       "data-component",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -138,7 +138,7 @@ test.describe("Prop tests for Switch component", () => {
 
     await expect(switchDataComponent(page)).toHaveAttribute(
       "data-element",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -147,7 +147,7 @@ test.describe("Prop tests for Switch component", () => {
 
     await expect(switchDataComponent(page)).toHaveAttribute(
       "data-role",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -200,12 +200,12 @@ test.describe("Prop tests for Switch component", () => {
         <SwitchComponent
           fieldHelp="Inline fieldhelp"
           fieldHelpInline={boolVal}
-        />
+        />,
       );
 
       await expect(switchFieldHelp(page)).toHaveAttribute(
         "data-element",
-        "help"
+        "help",
       );
     });
   });
@@ -216,88 +216,88 @@ test.describe("Prop tests for Switch component", () => {
     await expect(switchInput(page)).toHaveId(CHARACTERS.STANDARD);
   });
 
-  ([
-    [true, 24, 0, 8],
-    [false, 16, 8, 0],
-  ] as [SwitchProps["labelInline"], number, number, number][]).forEach(
-    ([boolVal, height, margin, padding]) => {
-      test(`should render with labelInline prop set to ${boolVal}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<SwitchComponent labelInline={boolVal} />);
-
-        if (boolVal) {
-          await expect(switchLabelParent(page)).toHaveCSS(
-            "box-sizing",
-            "border-box"
-          );
-        } else {
-          await expect(switchLabelParent(page)).not.toHaveCSS(
-            "box-sizing",
-            "border-box"
-          );
-        }
-        await assertCssValueIsApproximately(
-          switchLabelParent(page),
-          "height",
-          height
-        );
+  (
+    [
+      [true, 24, 0, 8],
+      [false, 16, 8, 0],
+    ] as [SwitchProps["labelInline"], number, number, number][]
+  ).forEach(([boolVal, height, margin, padding]) => {
+    test(`should render with labelInline prop set to ${boolVal}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<SwitchComponent labelInline={boolVal} />);
 
-        await assertCssValueIsApproximately(
-          switchLabelParent(page),
-          "margin-bottom",
-          margin
+      if (boolVal) {
+        await expect(switchLabelParent(page)).toHaveCSS(
+          "box-sizing",
+          "border-box",
         );
-
-        await assertCssValueIsApproximately(
-          switchLabelParent(page),
-          "padding-right",
-          padding
+      } else {
+        await expect(switchLabelParent(page)).not.toHaveCSS(
+          "box-sizing",
+          "border-box",
         );
-      });
-    }
-  );
-
-  ([
-    [10, 130],
-    [30, 390],
-    [80, 1041],
-  ] as [SwitchProps["labelWidth"], number][]).forEach(
-    ([labelWidth, labelRatio]) => {
-      test(`should render with labelWidth prop set to ${labelWidth} and with correct label width ratio`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<SwitchComponent labelWidth={labelWidth} />);
-
-        const label = switchLabelParent(page);
-        await assertCssValueIsApproximately(label, "width", labelRatio);
-      });
-    }
-  );
-
-  ([
-    [90, 1171],
-    [70, 911],
-    [20, 260],
-  ] as [SwitchProps["inputWidth"], number][]).forEach(
-    ([inputWidth, inputRatio]) => {
-      test(`should render with inputWidth prop set to ${inputWidth} and with correct input width ratio`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<SwitchComponent labelInline inputWidth={inputWidth} />);
-
-        const input = switchStyling(page);
-        await assertCssValueIsApproximately(input, "width", inputRatio);
-      });
-    }
-  );
+      }
+      await assertCssValueIsApproximately(
+        switchLabelParent(page),
+        "height",
+        height,
+      );
+
+      await assertCssValueIsApproximately(
+        switchLabelParent(page),
+        "margin-bottom",
+        margin,
+      );
+
+      await assertCssValueIsApproximately(
+        switchLabelParent(page),
+        "padding-right",
+        padding,
+      );
+    });
+  });
+
+  (
+    [
+      [10, 130],
+      [30, 390],
+      [80, 1041],
+    ] as [SwitchProps["labelWidth"], number][]
+  ).forEach(([labelWidth, labelRatio]) => {
+    test(`should render with labelWidth prop set to ${labelWidth} and with correct label width ratio`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<SwitchComponent labelWidth={labelWidth} />);
+
+      const label = switchLabelParent(page);
+      await assertCssValueIsApproximately(label, "width", labelRatio);
+    });
+  });
+
+  (
+    [
+      [90, 1171],
+      [70, 911],
+      [20, 260],
+    ] as [SwitchProps["inputWidth"], number][]
+  ).forEach(([inputWidth, inputRatio]) => {
+    test(`should render with inputWidth prop set to ${inputWidth} and with correct input width ratio`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<SwitchComponent labelInline inputWidth={inputWidth} />);
+
+      const input = switchStyling(page);
+      await assertCssValueIsApproximately(input, "width", inputRatio);
+    });
+  });
 
   test("should render with labelHelp", async ({ mount, page }) => {
     await mount(
-      <SwitchComponent label="Label For Switch" labelHelp="Label Help" />
+      <SwitchComponent label="Label For Switch" labelHelp="Label Help" />,
     );
 
     await switchIcon(page).hover();
@@ -305,34 +305,34 @@ test.describe("Prop tests for Switch component", () => {
     await expect(tooltipPreview(page)).toHaveText("Label Help");
   });
 
-  ([
-    [1, 8],
-    [2, 17],
-  ] as [SwitchProps["labelSpacing"], number][]).forEach(
-    ([spacing, padding]) => {
-      test(`should render with labelSpacing prop set to ${spacing}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(
-          <SwitchComponent labelInline label="label" labelSpacing={spacing} />
-        );
+  (
+    [
+      [1, 8],
+      [2, 17],
+    ] as [SwitchProps["labelSpacing"], number][]
+  ).forEach(([spacing, padding]) => {
+    test(`should render with labelSpacing prop set to ${spacing}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <SwitchComponent labelInline label="label" labelSpacing={spacing} />,
+      );
 
-        await assertCssValueIsApproximately(
-          switchLabelParent(page),
-          "padding-right",
-          padding
-        );
-      });
-    }
-  );
+      await assertCssValueIsApproximately(
+        switchLabelParent(page),
+        "padding-right",
+        padding,
+      );
+    });
+  });
 
   test("should render with name", async ({ mount, page }) => {
     await mount(<SwitchComponent name={CHARACTERS.STANDARD} />);
 
     await expect(switchInput(page)).toHaveAttribute(
       "name",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -407,7 +407,7 @@ test.describe("Prop tests for Switch component", () => {
       } else {
         await expect(switchInput(page)).not.toHaveAttribute(
           "data-element",
-          "label"
+          "label",
         );
 
         await expect(switchInput(page)).toHaveAttribute("role", "switch");
@@ -415,27 +415,20 @@ test.describe("Prop tests for Switch component", () => {
     });
   });
 
-  ([
-    [SIZE.SMALL, 65, 24],
-    [SIZE.LARGE, 83, 44],
-  ] as [SwitchProps["size"], number, number][]).forEach(
-    ([size, width, height]) => {
-      test(`should render with size set to ${size}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<SwitchComponent size={size} />);
+  (
+    [
+      [SIZE.SMALL, 65, 24],
+      [SIZE.LARGE, 83, 44],
+    ] as [SwitchProps["size"], number, number][]
+  ).forEach(([size, width, height]) => {
+    test(`should render with size set to ${size}`, async ({ mount, page }) => {
+      await mount(<SwitchComponent size={size} />);
 
-        await assertCssValueIsApproximately(
-          switchInput(page),
-          "height",
-          height
-        );
+      await assertCssValueIsApproximately(switchInput(page), "height", height);
 
-        await assertCssValueIsApproximately(switchInput(page), "width", width);
-      });
-    }
-  );
+      await assertCssValueIsApproximately(switchInput(page), "width", width);
+    });
+  });
 
   test("should render with value prop", async ({ mount, page }) => {
     await mount(<SwitchComponent value="switchvalue" />);
@@ -455,25 +448,25 @@ test.describe("Prop tests for Switch component", () => {
       await page.setViewportSize({ width: 400, height: 300 });
 
       await mount(
-        <SwitchComponent labelInline adaptiveLabelBreakpoint={breakpoint} />
+        <SwitchComponent labelInline adaptiveLabelBreakpoint={breakpoint} />,
       );
 
       if (breakpoint <= 400) {
         await expect(switchLabelParent(page)).toHaveCSS(
           "box-sizing",
-          "border-box"
+          "border-box",
         );
       } else {
         await expect(switchLabelParent(page)).not.toHaveCSS(
           "box-sizing",
-          "border-box"
+          "border-box",
         );
       }
 
       await assertCssValueIsApproximately(
         switchLabelParent(page),
         "height",
-        height
+        height,
       );
     });
   });
@@ -487,12 +480,9 @@ test.describe("Prop tests for Switch component", () => {
     await verifyRequiredAsteriskForLabel(page);
   });
 
-  ([
-    "bottom",
-    "left",
-    "right",
-    "top",
-  ] as SwitchProps["tooltipPosition"][]).forEach((position) => {
+  (
+    ["bottom", "left", "right", "top"] as SwitchProps["tooltipPosition"][]
+  ).forEach((position) => {
     test(`should render with tooltip positioned to the ${position}`, async ({
       mount,
       page,
@@ -500,7 +490,7 @@ test.describe("Prop tests for Switch component", () => {
       await mount(
         <Box m="250px">
           <SwitchComponent labelHelp="Switch info" tooltipPosition={position} />
-        </Box>
+        </Box>,
       );
 
       await switchIcon(page).hover();
@@ -509,7 +499,7 @@ test.describe("Prop tests for Switch component", () => {
 
       await expect(tooltipPreview(page)).toHaveAttribute(
         "data-placement",
-        `${position}`
+        `${position}`,
       );
     });
   });
@@ -519,13 +509,13 @@ test.describe("Prop tests for Switch component", () => {
       <SwitchComponent
         labelHelp="Label Help"
         helpAriaLabel="This text provides more information for the label"
-      />
+      />,
     );
 
     await switchIcon(page).hover();
     await expect(switchHelpIcon(page)).toHaveAttribute(
       "aria-label",
-      "This text provides more information for the label"
+      "This text provides more information for the label",
     );
   });
 
@@ -535,18 +525,18 @@ test.describe("Prop tests for Switch component", () => {
       page,
     }) => {
       await mount(
-        <Switch label="Label" name="switch-name" defaultChecked={boolVal} />
+        <Switch label="Label" name="switch-name" defaultChecked={boolVal} />,
       );
 
       if (boolVal) {
         await expect(switchStyling(page).locator("div")).toHaveAttribute(
           "type",
-          "on"
+          "on",
         );
       } else {
         await expect(switchStyling(page).locator("div")).toHaveAttribute(
           "type",
-          "off"
+          "off",
         );
       }
     });
@@ -571,7 +561,7 @@ test.describe("Event tests", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await switchInput(page).click();
@@ -591,7 +581,7 @@ test.describe("Event tests", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await switchInput(page).focus();
@@ -611,7 +601,7 @@ test.describe("Event tests", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await switchInput(page).focus();
@@ -630,7 +620,7 @@ test.describe("Event tests", () => {
         onFocus={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await switchInput(page).focus();
@@ -648,7 +638,7 @@ test.describe("Event tests", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await switchInput(page).click();
@@ -765,7 +755,7 @@ test.describe("Accessibility tests", () => {
         <SwitchComponent
           fieldHelp="Inline fieldhelp"
           fieldHelpInline={boolVal}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -813,7 +803,7 @@ test.describe("Accessibility tests", () => {
 
   test("check accessibility with labelHelp", async ({ mount, page }) => {
     await mount(
-      <SwitchComponent label="Label For Switch" labelHelp="Label Help" />
+      <SwitchComponent label="Label For Switch" labelHelp="Label Help" />,
     );
 
     await checkAccessibility(page);
@@ -825,7 +815,7 @@ test.describe("Accessibility tests", () => {
       page,
     }) => {
       await mount(
-        <SwitchComponent labelInline label="label" labelSpacing={spacing} />
+        <SwitchComponent labelInline label="label" labelSpacing={spacing} />,
       );
 
       await checkAccessibility(page);
@@ -864,12 +854,9 @@ test.describe("Accessibility tests", () => {
     });
   });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as SwitchProps["tooltipPosition"][]).forEach((tooltipPositionValue) => {
+  (
+    ["top", "bottom", "left", "right"] as SwitchProps["tooltipPosition"][]
+  ).forEach((tooltipPositionValue) => {
     test(`check accessibility with tooltip set to ${tooltipPositionValue} position`, async ({
       mount,
       page,
@@ -882,7 +869,7 @@ test.describe("Accessibility tests", () => {
               tooltipPosition={tooltipPositionValue}
             />
           </Box>
-        </Box>
+        </Box>,
       );
 
       await checkAccessibility(page);
@@ -925,7 +912,7 @@ test.describe("Accessibility tests", () => {
       await page.setViewportSize({ width: 400, height: 300 });
 
       await mount(
-        <SwitchComponent labelInline adaptiveLabelBreakpoint={breakpoint} />
+        <SwitchComponent labelInline adaptiveLabelBreakpoint={breakpoint} />,
       );
       await checkAccessibility(page);
     });
@@ -937,12 +924,9 @@ test.describe("Accessibility tests", () => {
     await checkAccessibility(page);
   });
 
-  ([
-    "bottom",
-    "left",
-    "right",
-    "top",
-  ] as SwitchProps["tooltipPosition"][]).forEach((position) => {
+  (
+    ["bottom", "left", "right", "top"] as SwitchProps["tooltipPosition"][]
+  ).forEach((position) => {
     test(`check accessibility with tooltip positioned to the ${position}`, async ({
       mount,
       page,
@@ -950,7 +934,7 @@ test.describe("Accessibility tests", () => {
       await mount(
         <Box m="250px">
           <SwitchComponent labelHelp="Switch info" tooltipPosition={position} />
-        </Box>
+        </Box>,
       );
 
       await checkAccessibility(page);
@@ -965,7 +949,7 @@ test.describe("Accessibility tests", () => {
       <SwitchComponent
         labelHelp="Label Help"
         helpAriaLabel="This text provides more information for the label"
-      />
+      />,
     );
 
     await checkAccessibility(page);
@@ -977,7 +961,7 @@ test.describe("Accessibility tests", () => {
       page,
     }) => {
       await mount(
-        <Switch label="Label" name="switch-name" defaultChecked={boolVal} />
+        <Switch label="Label" name="switch-name" defaultChecked={boolVal} />,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/switch/switch.stories.tsx b/src/components/switch/switch.stories.tsx
index 97c24ca139..925f9fc9cb 100644
--- a/src/components/switch/switch.stories.tsx
+++ b/src/components/switch/switch.stories.tsx
@@ -266,8 +266,7 @@ export const ValidationStringLabelTooltip: StoryWithValidation = {
     validationOnLabel: true,
     tooltipPosition: "top",
   },
-  name:
-    "Single Switch - String Validation - validationOnLabel - Tooltip Position Overriden",
+  name: "Single Switch - String Validation - validationOnLabel - Tooltip Position Overriden",
   parameters: { chromatic: { disableSnapshot: true } },
 };
 
diff --git a/src/components/switch/switch.style.ts b/src/components/switch/switch.style.ts
index f3621cb05a..b803d60fcb 100644
--- a/src/components/switch/switch.style.ts
+++ b/src/components/switch/switch.style.ts
@@ -25,18 +25,17 @@ const oldFocusStyling = `
 `;
 
 export const ErrorBorder = styled.span`
-  ${({ warning }: { warning: boolean }) =>
-    css`
-      position: absolute;
-      z-index: 6;
-      width: 2px;
-      background-color: ${warning
-        ? "var(--colorsSemanticCaution500)"
-        : "var(--colorsSemanticNegative500)"};
-      left: -12px;
-      bottom: -4px;
-      top: 2px;
-    `}
+  ${({ warning }: { warning: boolean }) => css`
+    position: absolute;
+    z-index: 6;
+    width: 2px;
+    background-color: ${warning
+      ? "var(--colorsSemanticCaution500)"
+      : "var(--colorsSemanticNegative500)"};
+    left: -12px;
+    bottom: -4px;
+    top: 2px;
+  `}
 `;
 
 export const StyledHintText = styled.div`
diff --git a/src/components/switch/switch.test.tsx b/src/components/switch/switch.test.tsx
index fdb7bf9907..d1153da964 100644
--- a/src/components/switch/switch.test.tsx
+++ b/src/components/switch/switch.test.tsx
@@ -17,7 +17,7 @@ test("should display deprecation warning once", () => {
   render(<Switch name="my-switch" defaultValue="test" />);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
 
@@ -26,7 +26,7 @@ test("should display deprecation warning once", () => {
 
 testStyledSystemMarginRTL(
   (props) => <Switch data-role="swtich-wrapper" {...props} />,
-  () => screen.getByTestId("swtich-wrapper")
+  () => screen.getByTestId("swtich-wrapper"),
 );
 
 test("accepts ref as a ref object", () => {
@@ -72,7 +72,7 @@ test("when component is uncontrolled, it changes internal state and passes event
       target: expect.objectContaining({
         checked: true,
       }),
-    })
+    }),
   );
   expect(switchElement).toBeChecked();
 });
@@ -135,7 +135,7 @@ test("when `reverse` is false and `fieldHelpInline` is true, the correct FieldHe
       fieldHelp="This text provides help"
       fieldHelpInline
       label="label"
-    />
+    />,
   );
 
   const fieldHelp = screen.getByText("This text provides help");
@@ -151,7 +151,7 @@ test("when `labelInline` is true, fieldHelpInline is false and `reverse` is fals
       fieldHelpInline={false}
       labelInline
       reverse={false}
-    />
+    />,
   );
   const fieldHelp = screen.getByText("This text provides help");
 
@@ -160,7 +160,11 @@ test("when `labelInline` is true, fieldHelpInline is false and `reverse` is fals
 
 test("when `fieldHelpInline` is true, the correct FieldHelp component styles are applied", () => {
   render(
-    <Switch fieldHelpInline fieldHelp="This text provides help" label="label" />
+    <Switch
+      fieldHelpInline
+      fieldHelp="This text provides help"
+      label="label"
+    />,
   );
 
   const fieldHelp = screen.getByText("This text provides help");
@@ -183,7 +187,7 @@ test("when `fieldHelpInline` is true and `labelInline` is true, the correct Chec
       fieldHelp="This text provides help"
       fieldHelpInline
       labelInline
-    />
+    />,
   );
 
   const checkableInput = screen.getByTestId("checkable-input");
@@ -198,7 +202,7 @@ test("when `fieldHelpInline` true and `labelInline` true, the correct Label comp
       fieldHelp="This text provides help"
       fieldHelpInline
       labelInline
-    />
+    />,
   );
 
   const labelContainer = screen.getByTestId("label-container");
@@ -213,7 +217,7 @@ test("when `fieldHelpInline` true and `labelInline` true, the correct FieldHelp
       fieldHelp="This text provides help"
       fieldHelpInline
       labelInline
-    />
+    />,
   );
 
   const fieldHelp = screen.getByText("This text provides help");
@@ -255,7 +259,7 @@ test("when `size` is large and `reverse` is false, the correct FieldHelp compone
       label="label"
       reverse={false}
       fieldHelp="this is field help"
-    />
+    />,
   );
 
   const fieldHelp = screen.getByText("this is field help");
@@ -309,7 +313,7 @@ test("the correct border colour is applied when `error` validation is true", ()
   const switchSlider = screen.getByTestId("slider");
 
   expect(switchSlider).toHaveStyleRule(
-    "border-color: var(--colorsSemanticNegative500)"
+    "border-color: var(--colorsSemanticNegative500)",
   );
 });
 
@@ -320,7 +324,7 @@ test("the correct border colour is applied when `warning` validation is true", (
   const switchSlider = screen.getByTestId("slider");
 
   expect(switchSlider).toHaveStyleRule(
-    "border-color: var(--colorsSemanticCaution500)"
+    "border-color: var(--colorsSemanticCaution500)",
   );
 });
 
@@ -329,13 +333,13 @@ test("the correct background colour is applied to the `ErrorBorder` element when
   render(
     <CarbonProvider validationRedesignOptIn>
       <Switch error="this is an error" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const switchSlider = screen.getByTestId("error-border");
 
   expect(switchSlider).toHaveStyleRule(
-    "background-color: var(--colorsSemanticNegative500)"
+    "background-color: var(--colorsSemanticNegative500)",
   );
 });
 
@@ -344,13 +348,13 @@ test("the correct background colour is applied to the `ErrorBorder` element when
   render(
     <CarbonProvider validationRedesignOptIn>
       <Switch warning="this is a warning" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const switchSlider = screen.getByTestId("error-border");
 
   expect(switchSlider).toHaveStyleRule(
-    "background-color: var(--colorsSemanticCaution500)"
+    "background-color: var(--colorsSemanticCaution500)",
   );
 });
 
@@ -359,7 +363,7 @@ test("renders `labelHelp` as hint text when `validationRedesignOptIn` flag is tr
   render(
     <CarbonProvider validationRedesignOptIn>
       <Switch label="foo" labelHelp="hint text" warning="this is a warning" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   expect(screen.getByText("hint text")).toBeVisible();
@@ -369,14 +373,14 @@ test("should render with correct accessible name and description when `validatio
   render(
     <CarbonProvider validationRedesignOptIn>
       <Switch label="foo" labelHelp="hint text" error="this is an error" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   const switchElement = screen.getByRole("switch");
 
   expect(switchElement).toHaveAccessibleName("foo");
   expect(switchElement).toHaveAccessibleDescription(
-    "hint text this is an error"
+    "hint text this is an error",
   );
 });
 
@@ -392,7 +396,7 @@ test("the expected translations are correctly applied for on", () => {
       }}
     >
       <Switch checked onChange={() => {}} />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   const i18nText = screen.getAllByText("sur");
@@ -412,7 +416,7 @@ test("the expected translations are correctly applied for off", () => {
       }}
     >
       <Switch onChange={() => {}} />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   const i18nText = screen.getAllByText("de");
diff --git a/src/components/tabs/__internal__/tab-title/tab-title.component.tsx b/src/components/tabs/__internal__/tab-title/tab-title.component.tsx
index 2bb97a664c..0cd262c7f7 100644
--- a/src/components/tabs/__internal__/tab-title/tab-title.component.tsx
+++ b/src/components/tabs/__internal__/tab-title/tab-title.component.tsx
@@ -42,10 +42,10 @@ export interface TabTitleProps {
   align?: "left" | "right";
   customLayout?: React.ReactNode;
   onClick: (
-    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+    ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
   ) => void;
   onKeyDown: (
-    ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>
+    ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>,
   ) => void;
 }
 
@@ -79,7 +79,7 @@ const TabTitle = React.forwardRef(
       tabIndex,
       ...tabTitleProps
     }: TabTitleProps,
-    ref: React.ForwardedRef<HTMLElement>
+    ref: React.ForwardedRef<HTMLElement>,
   ) => {
     const isHref = !!href;
     const hasAlternateStyling = alternateStyling || isInSidebar;
@@ -102,7 +102,7 @@ const TabTitle = React.forwardRef(
     };
 
     const handleKeyDown = (
-      ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>
+      ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>,
     ) => {
       ev.stopPropagation();
 
@@ -114,7 +114,7 @@ const TabTitle = React.forwardRef(
     };
 
     const handleClick = (
-      ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+      ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
     ) => {
       ev.preventDefault();
 
@@ -286,7 +286,7 @@ const TabTitle = React.forwardRef(
         </TabTitleContext.Provider>
       </TooltipProvider>
     );
-  }
+  },
 );
 
 TabTitle.displayName = "TabTitle";
diff --git a/src/components/tabs/__internal__/tab-title/tab-title.test.tsx b/src/components/tabs/__internal__/tab-title/tab-title.test.tsx
index ca61fb6135..396f762e2b 100644
--- a/src/components/tabs/__internal__/tab-title/tab-title.test.tsx
+++ b/src/components/tabs/__internal__/tab-title/tab-title.test.tsx
@@ -5,7 +5,7 @@ import TabTitle from "./tab-title.component";
 
 test("renders the component as a tab with text passed as `title` prop", () => {
   render(
-    <TabTitle title="example title" onClick={() => {}} onKeyDown={() => {}} />
+    <TabTitle title="example title" onClick={() => {}} onKeyDown={() => {}} />,
   );
 
   const tabTitle = screen.getByRole("tab");
@@ -19,7 +19,7 @@ test("accepts `className` as a prop", () => {
       className="class1 class2"
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   const tabTitle = screen.getByRole("tab");
@@ -38,12 +38,12 @@ test("renders with `data-tabid` attribute set to `dataTabId` prop", () => {
       dataTabId="unique-tab-id"
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByRole("tab")).toHaveAttribute(
     "data-tabid",
-    "unique-tab-id"
+    "unique-tab-id",
   );
 });
 
@@ -53,12 +53,12 @@ test("renders with `data-role` attribute set to the prop value", () => {
       data-role="custom-data-role"
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByRole("tab")).toHaveAttribute(
     "data-role",
-    "custom-data-role"
+    "custom-data-role",
   );
 });
 
@@ -73,7 +73,7 @@ test.each([
       .mockImplementation(() => null);
     const user = userEvent.setup();
     render(
-      <TabTitle href="randomUrl" onClick={() => {}} onKeyDown={() => {}} />
+      <TabTitle href="randomUrl" onClick={() => {}} onKeyDown={() => {}} />,
     );
 
     screen.getByRole("tab").focus();
@@ -81,7 +81,7 @@ test.each([
 
     expect(globalOpenMock).toHaveBeenCalledWith("randomUrl", "_blank");
     globalOpenMock.mockRestore();
-  }
+  },
 );
 
 test("when the `href` prop is provided, the specified URL should open in a new tab on click", async () => {
@@ -114,7 +114,7 @@ test.each([
 
     expect(globalOpenMock).not.toHaveBeenCalled();
     globalOpenMock.mockRestore();
-  }
+  },
 );
 
 test("when the `isTabSelected` prop is set, the `aria-selected` attribute is set to `true`", () => {
@@ -137,7 +137,7 @@ test("`siblings` are rendered after the title when `titlePosition` is `before`",
       titlePosition="before"
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("sibling")).toBeVisible();
@@ -153,7 +153,7 @@ test("`siblings` are rendered before the title when `titlePosition` is `after`",
       titlePosition="after"
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("sibling")).toBeVisible();
@@ -168,7 +168,7 @@ test("`siblings` are rendered after the title when `titlePosition` is not passed
       siblings={<span data-role="sibling">bar</span>}
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("sibling")).toBeVisible();
@@ -180,7 +180,7 @@ test("calls the `onClick` prop when clicked", async () => {
   const user = userEvent.setup();
   const onClick = jest.fn();
   render(
-    <TabTitle onClick={onClick} dataTabId="uniqueid1" onKeyDown={() => {}} />
+    <TabTitle onClick={onClick} dataTabId="uniqueid1" onKeyDown={() => {}} />,
   );
 
   await user.click(screen.getByRole("tab"));
@@ -189,7 +189,7 @@ test("calls the `onClick` prop when clicked", async () => {
   expect(onClick).toHaveBeenCalledWith(
     expect.objectContaining({
       target: expect.objectContaining({ dataset: { tabid: "uniqueid1" } }),
-    })
+    }),
   );
 });
 
@@ -205,16 +205,16 @@ test.each(["error", "warning", "info"])(
           [`${validationType}Message`]: "validation message",
           [validationType]: true,
         }}
-      />
+      />,
     );
 
     screen.getByRole("tab").focus();
 
     expect(screen.getByTestId("tooltip")).toBeVisible();
     expect(screen.getByTestId("tooltip")).toHaveTextContent(
-      "validation message"
+      "validation message",
     );
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -231,7 +231,7 @@ test.each(["error", "warning", "info"])(
           [`${validationType}Message`]: "validation message",
           [validationType]: true,
         }}
-      />
+      />,
     );
 
     screen.getByRole("tab").focus();
@@ -239,7 +239,7 @@ test.each(["error", "warning", "info"])(
 
     expect(screen.queryByTestId("tooltip")).not.toBeInTheDocument();
     expect(screen.queryByText("validation message")).not.toBeInTheDocument();
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -254,16 +254,16 @@ test.each(["error", "warning", "info"])(
           [`${validationType}Message`]: "validation message",
           [validationType]: true,
         }}
-      />
+      />,
     );
 
     await user.hover(screen.getByRole("tab"));
 
     expect(screen.getByTestId("tooltip")).toBeVisible();
     expect(screen.getByTestId("tooltip")).toHaveTextContent(
-      "validation message"
+      "validation message",
     );
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -278,7 +278,7 @@ test.each(["error", "warning", "info"])(
           [`${validationType}Message`]: "validation message",
           [validationType]: true,
         }}
-      />
+      />,
     );
 
     await user.hover(screen.getByRole("tab"));
@@ -286,7 +286,7 @@ test.each(["error", "warning", "info"])(
 
     expect(screen.queryByTestId("tooltip")).not.toBeInTheDocument();
     expect(screen.queryByText("validation message")).not.toBeInTheDocument();
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -301,7 +301,7 @@ test.each(["error", "warning", "info"])(
           [`${validationType}Message`]: "validation message",
           [validationType]: true,
         }}
-      />
+      />,
     );
 
     await user.hover(screen.getByRole("tab"));
@@ -310,9 +310,9 @@ test.each(["error", "warning", "info"])(
 
     expect(screen.getByTestId("tooltip")).toBeVisible();
     expect(screen.getByTestId("tooltip")).toHaveTextContent(
-      "validation message"
+      "validation message",
     );
-  }
+  },
 );
 
 // coverage
@@ -325,7 +325,7 @@ test("renders the correct styles when a custom layout is used", () => {
       isTabSelected
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("my-custom-layout")).toBeVisible();
@@ -340,7 +340,7 @@ test("renders as expected when `position` prop is `left` and `align` prop is `ri
       align="right"
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyle({
@@ -356,7 +356,7 @@ test("renders as expected when `size` prop is `large` and `position` prop is `to
       position="top"
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyle({
@@ -373,7 +373,7 @@ test("renders as expected when `size` prop is `large` and `position` prop is `le
       position="left"
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyle({
@@ -392,18 +392,23 @@ test("does not apply selected styling when it has error or warning", () => {
       borders
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(
-    screen.queryByTestId("tab-selected-indicator")
+    screen.queryByTestId("tab-selected-indicator"),
   ).not.toBeInTheDocument();
 });
 
 // coverage
 test("applies proper styling when `position` prop is `left` and there is a warning message", () => {
   render(
-    <TabTitle position="left" warning onClick={() => {}} onKeyDown={() => {}} />
+    <TabTitle
+      position="left"
+      warning
+      onClick={() => {}}
+      onKeyDown={() => {}}
+    />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyle({
@@ -415,33 +420,37 @@ test("applies proper styling when `position` prop is `left` and there is a warni
   });
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "outline-color",
-    "var(--colorsSemanticCaution500)"
+    "var(--colorsSemanticCaution500)",
   );
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "border-right-color",
     "transparent",
     {
       modifier: ":hover",
-    }
+    },
   );
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "outline",
     "1px solid",
-    { modifier: ":hover" }
+    { modifier: ":hover" },
+  );
+  expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
+    "outline-offset",
+    "-1px",
+    { modifier: ":hover" },
   );
-  expect(
-    screen.getByTestId("tab-title-content")
-  ).toHaveStyleRule("outline-offset", "-1px", { modifier: ":hover" });
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "outline-color",
     "var(--colorsSemanticCaution500)",
     {
       modifier: ":hover",
-    }
+    },
+  );
+  expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
+    "padding-right",
+    "18px",
+    { modifier: ":hover" },
   );
-  expect(
-    screen.getByTestId("tab-title-content")
-  ).toHaveStyleRule("padding-right", "18px", { modifier: ":hover" });
 });
 
 // coverage
@@ -452,16 +461,18 @@ test("renders the correct styles when an error is present and a custom layout is
       error
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyle({
     "padding-bottom": "2px",
     "padding-right": "14px",
   });
-  expect(
-    screen.getByTestId("tab-title-content")
-  ).toHaveStyleRule("padding-bottom", "2px", { modifier: ":hover" });
+  expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
+    "padding-bottom",
+    "2px",
+    { modifier: ":hover" },
+  );
 });
 
 // coverage
@@ -473,7 +484,7 @@ test("renders the correct styles when size is `large`, a warning is present and
       warning
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyle({
@@ -481,9 +492,11 @@ test("renders the correct styles when size is `large`, a warning is present and
     "padding-right": "18px",
   });
 
-  expect(
-    screen.getByTestId("tab-title-content")
-  ).toHaveStyleRule("padding-bottom", "4px", { modifier: ":hover" });
+  expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
+    "padding-bottom",
+    "4px",
+    { modifier: ":hover" },
+  );
 });
 
 // coverage
@@ -497,7 +510,7 @@ test("renders the correct styles when size is `large`, position is `left`, a war
       isTabSelected
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyle({
@@ -517,40 +530,50 @@ test("the `noLeftBorder` prop removes the left border", () => {
 // coverage
 test("applies proper styling when `borders` prop is true and `position` is `left`", () => {
   render(
-    <TabTitle borders position="left" onClick={() => {}} onKeyDown={() => {}} />
+    <TabTitle
+      borders
+      position="left"
+      onClick={() => {}}
+      onKeyDown={() => {}}
+    />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "border-top",
-    "1px solid var(--colorsActionMinor100)"
+    "1px solid var(--colorsActionMinor100)",
   );
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "border-left",
-    "1px solid var(--colorsActionMinor100)"
+    "1px solid var(--colorsActionMinor100)",
   );
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "border-bottom",
-    "1px solid var(--colorsActionMinor100)"
+    "1px solid var(--colorsActionMinor100)",
   );
 });
 
 // coverage
 test("applies proper styling when `borders` prop is true and `size` is `large`", () => {
   render(
-    <TabTitle borders position="left" onClick={() => {}} onKeyDown={() => {}} />
+    <TabTitle
+      borders
+      position="left"
+      onClick={() => {}}
+      onKeyDown={() => {}}
+    />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "border-top",
-    "1px solid var(--colorsActionMinor100)"
+    "1px solid var(--colorsActionMinor100)",
   );
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "border-left",
-    "1px solid var(--colorsActionMinor100)"
+    "1px solid var(--colorsActionMinor100)",
   );
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "border-bottom",
-    "1px solid var(--colorsActionMinor100)"
+    "1px solid var(--colorsActionMinor100)",
   );
 });
 
@@ -562,20 +585,20 @@ test("overrides the border-right-color when `alternateStyling` prop is `true` an
       position="left"
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByRole("tab")).toHaveStyleRule(
     "border-right-color",
     "var(--colorsActionMinor100)",
-    { modifier: ":hover" }
+    { modifier: ":hover" },
   );
 });
 
 // coverage
 test("sets border-left to `none` when the `noLeftBorder` prop is set", () => {
   render(
-    <TabTitle borders noLeftBorder onClick={() => {}} onKeyDown={() => {}} />
+    <TabTitle borders noLeftBorder onClick={() => {}} onKeyDown={() => {}} />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyle({
@@ -586,7 +609,7 @@ test("sets border-left to `none` when the `noLeftBorder` prop is set", () => {
 // coverage
 test("sets border-right to `none` when the `noRightBorder` prop is set", () => {
   render(
-    <TabTitle borders noRightBorder onClick={() => {}} onKeyDown={() => {}} />
+    <TabTitle borders noRightBorder onClick={() => {}} onKeyDown={() => {}} />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyle({
@@ -602,11 +625,11 @@ test("renders the correct styles when a custom layout is used, `size` is `defaul
       isTabSelected
       onClick={() => {}}
       onKeyDown={() => {}}
-    />
+    />,
   );
 
   expect(screen.getByTestId("tab-title-content")).toHaveStyleRule(
     "padding-bottom",
-    "0px"
+    "0px",
   );
 });
diff --git a/src/components/tabs/__internal__/tabs-header/tabs-header.component.tsx b/src/components/tabs/__internal__/tabs-header/tabs-header.component.tsx
index 557dfb6ff5..fdad7a9de4 100644
--- a/src/components/tabs/__internal__/tabs-header/tabs-header.component.tsx
+++ b/src/components/tabs/__internal__/tabs-header/tabs-header.component.tsx
@@ -55,7 +55,7 @@ const TabsHeader = ({
   }
 
   const handleScroll = (
-    e: React.UIEvent<HTMLDivElement> & { target: HTMLDivElement }
+    e: React.UIEvent<HTMLDivElement> & { target: HTMLDivElement },
   ) => {
     const { scrollLeft } = e.target;
     const scrollRight = getScrollRight(e.target);
diff --git a/src/components/tabs/__internal__/tabs-header/tabs-header.test.tsx b/src/components/tabs/__internal__/tabs-header/tabs-header.test.tsx
index a4829bdef7..d911cc9bc6 100644
--- a/src/components/tabs/__internal__/tabs-header/tabs-header.test.tsx
+++ b/src/components/tabs/__internal__/tabs-header/tabs-header.test.tsx
@@ -10,7 +10,7 @@ test("renders children correctly", () => {
     <TabsHeader>
       <TabTitle title="title-1" onClick={() => {}} onKeyDown={() => {}} />
       <TabTitle title="title-2" onClick={() => {}} onKeyDown={() => {}} />
-    </TabsHeader>
+    </TabsHeader>,
   );
 
   expect(screen.getAllByRole("tab")).toHaveLength(2);
@@ -23,7 +23,7 @@ test("accepts a `role` prop", () => {
     <TabsHeader role="tablist">
       <TabTitle title="title-1" onClick={() => {}} onKeyDown={() => {}} />
       <TabTitle title="title-2" onClick={() => {}} onKeyDown={() => {}} />
-    </TabsHeader>
+    </TabsHeader>,
   );
 
   expect(screen.getByRole("tablist")).toBeVisible();
@@ -36,7 +36,7 @@ test("renders before element with correct opacity when scroll position is not at
     <TabsHeader role="tablist">
       <TabTitle title="title-1" onClick={() => {}} onKeyDown={() => {}} />
       <TabTitle title="title-2" onClick={() => {}} onKeyDown={() => {}} />
-    </TabsHeader>
+    </TabsHeader>,
   );
 
   const mockScrollValues = {
@@ -65,7 +65,7 @@ test("applies proper styles when the `extendedLine` prop is `false`", () => {
     <TabsHeader role="tablist" extendedLine={false}>
       <TabTitle title="title-1" onClick={() => {}} onKeyDown={() => {}} />
       <TabTitle title="title-2" onClick={() => {}} onKeyDown={() => {}} />
-    </TabsHeader>
+    </TabsHeader>,
   );
 
   expect(screen.getByRole("tablist")).toHaveStyle({ width: "fit-content" });
@@ -77,7 +77,7 @@ test("applies proper styles when the `align` prop is `right`", () => {
     <TabsHeader role="tablist" align="right">
       <TabTitle title="title-1" onClick={() => {}} onKeyDown={() => {}} />
       <TabTitle title="title-2" onClick={() => {}} onKeyDown={() => {}} />
-    </TabsHeader>
+    </TabsHeader>,
   );
 
   expect(screen.getByRole("tablist")).toHaveStyle({
@@ -92,7 +92,7 @@ test("applies proper styles when the `noRightBorder` prop is `true` and `positio
     <TabsHeader role="tablist" noRightBorder position="left">
       <TabTitle title="title-1" onClick={() => {}} onKeyDown={() => {}} />
       <TabTitle title="title-2" onClick={() => {}} onKeyDown={() => {}} />
-    </TabsHeader>
+    </TabsHeader>,
   );
 
   expect(screen.getByRole("tablist")).toHaveStyle({
@@ -106,7 +106,7 @@ test("applies proper styles when the `align` prop is `right` and `position` is `
     <TabsHeader role="tablist" align="right" position="left">
       <TabTitle title="title-1" onClick={() => {}} onKeyDown={() => {}} />
       <TabTitle title="title-2" onClick={() => {}} onKeyDown={() => {}} />
-    </TabsHeader>
+    </TabsHeader>,
   );
 
   expect(screen.getByRole("tablist")).toHaveStyle({
diff --git a/src/components/tabs/components.test-pw.tsx b/src/components/tabs/components.test-pw.tsx
index 4571836824..5ead184b8a 100644
--- a/src/components/tabs/components.test-pw.tsx
+++ b/src/components/tabs/components.test-pw.tsx
@@ -10,7 +10,7 @@ import Button from "../button";
 import DrawerSidebarContext from "../drawer/__internal__/drawer-sidebar.context";
 
 export const TabsComponent = (
-  props: Partial<TabsProps> & Partial<TabProps>
+  props: Partial<TabsProps> & Partial<TabProps>,
 ) => {
   return (
     <Box p="4px">
@@ -278,7 +278,7 @@ export const TabsValidationOverride = () => {
 };
 
 export const TabsInSidebar = (
-  props: Partial<TabsProps> & Partial<TabProps>
+  props: Partial<TabsProps> & Partial<TabProps>,
 ) => {
   return (
     <DrawerSidebarContext.Provider value={{ isInSidebar: true }}>
diff --git a/src/components/tabs/tab/tab.component.tsx b/src/components/tabs/tab/tab.component.tsx
index 964ebeb382..c1f757ac15 100644
--- a/src/components/tabs/tab/tab.component.tsx
+++ b/src/components/tabs/tab/tab.component.tsx
@@ -44,7 +44,7 @@ export interface TabProps extends PaddingProps {
   /** @private @ignore */
   updateWarnings?: (
     id: string,
-    warnings: Record<string, string | boolean>
+    warnings: Record<string, string | boolean>,
   ) => void;
   /** @private @ignore */
   updateInfos?: (id: string, infos: Record<string, string | boolean>) => void;
@@ -76,19 +76,19 @@ export const Tab = ({
 
   const setError = useCallback((childId, error) => {
     setTabErrors((state) =>
-      state[childId] !== error ? { ...state, [childId]: error } : state
+      state[childId] !== error ? { ...state, [childId]: error } : state,
     );
   }, []);
 
   const setWarning = useCallback((childId, warning) => {
     setTabWarnings((state) =>
-      state[childId] !== warning ? { ...state, [childId]: warning } : state
+      state[childId] !== warning ? { ...state, [childId]: warning } : state,
     );
   }, []);
 
   const setInfo = useCallback((childId, info) => {
     setTabInfos((state) =>
-      state[childId] !== info ? { ...state, [childId]: info } : state
+      state[childId] !== info ? { ...state, [childId]: info } : state,
     );
   }, []);
 
diff --git a/src/components/tabs/tab/tab.test.tsx b/src/components/tabs/tab/tab.test.tsx
index b5e4efec40..22a3f64f7f 100644
--- a/src/components/tabs/tab/tab.test.tsx
+++ b/src/components/tabs/tab/tab.test.tsx
@@ -11,7 +11,7 @@ testStyledSystemPaddingRTL(
       TabContent
     </Tab>
   ),
-  () => screen.getByRole("tabpanel")
+  () => screen.getByRole("tabpanel"),
 );
 
 testStyledSystemPaddingRTL(
@@ -26,7 +26,7 @@ testStyledSystemPaddingRTL(
       TabContent
     </Tab>
   ),
-  () => screen.getByRole("tabpanel")
+  () => screen.getByRole("tabpanel"),
 );
 
 test("has a role of `tabpanel` if none is specified", () => {
@@ -45,7 +45,7 @@ test("is visible when selected", () => {
   render(
     <Tab tabId="foo" isTabSelected>
       tab content
-    </Tab>
+    </Tab>,
   );
 
   expect(screen.getByRole("tabpanel")).toBeVisible();
@@ -61,12 +61,12 @@ test("passes the `className` prop to the element", () => {
   render(
     <Tab tabId="foo" className="foo-class bar-class">
       tab content
-    </Tab>
+    </Tab>,
   );
 
   expect(screen.getByRole("tabpanel", { hidden: true })).toHaveClass(
     "foo-class",
-    "bar-class"
+    "bar-class",
   );
 });
 
@@ -74,7 +74,7 @@ test("can be given a custom role via the `role` prop", () => {
   render(
     <Tab tabId="foo" role="article">
       tab content
-    </Tab>
+    </Tab>,
   );
 
   expect(screen.getByText("tab content")).toHaveAttribute("role", "article");
@@ -85,11 +85,11 @@ test("accepts an `ariaLabelledBy` prop to set the accessible name", () => {
     <Tab tabId="foo" ariaLabelledby="bar" isTabSelected>
       tab content
       <p id="bar">an accessible name</p>
-    </Tab>
+    </Tab>,
   );
 
   expect(screen.getByRole("tabpanel")).toHaveAccessibleName(
-    "an accessible name"
+    "an accessible name",
   );
 });
 
@@ -97,11 +97,11 @@ test("the `title` prop is not passed to the DOM element", () => {
   render(
     <Tab tabId="foo" title="here is a title">
       tab content
-    </Tab>
+    </Tab>,
   );
 
   expect(screen.getByRole("tabpanel", { hidden: true })).not.toHaveAttribute(
-    "title"
+    "title",
   );
 });
 
@@ -109,7 +109,7 @@ test("does not render the children if the `href` prop is passed", () => {
   render(
     <Tab tabId="foo" href="#">
       tab content
-    </Tab>
+    </Tab>,
   );
 
   expect(screen.queryByText("tab content")).not.toBeInTheDocument();
@@ -120,7 +120,7 @@ test("calls the `updateErrors` function prop when an error is present in a child
   render(
     <Tab tabId="foo" updateErrors={updateErrors}>
       <Textbox onChange={() => {}} id="bar" error />
-    </Tab>
+    </Tab>,
   );
 
   expect(updateErrors).toHaveBeenCalledWith("foo", { bar: true });
@@ -131,7 +131,7 @@ test("calls the `updateWarnings` function prop when a warning is present in a ch
   render(
     <Tab tabId="foo" updateWarnings={updateWarnings}>
       <Textbox onChange={() => {}} id="bar" warning />
-    </Tab>
+    </Tab>,
   );
 
   expect(updateWarnings).toHaveBeenCalledWith("foo", { bar: true });
diff --git a/src/components/tabs/tabs-test.stories.tsx b/src/components/tabs/tabs-test.stories.tsx
index c0f0ca4c76..4d1f30c7b8 100644
--- a/src/components/tabs/tabs-test.stories.tsx
+++ b/src/components/tabs/tabs-test.stories.tsx
@@ -121,7 +121,7 @@ export const Default = (args: TabsProps) => {
 Default.storyName = "default";
 
 export const TabsInSidebar = (
-  props: Partial<TabsProps> & Partial<TabProps>
+  props: Partial<TabsProps> & Partial<TabProps>,
 ) => {
   return (
     <DrawerSidebarContext.Provider value={{ isInSidebar: true }}>
@@ -193,7 +193,7 @@ TabsInSidebar.parameters = {
 };
 
 export const TabsInSidebarPositionedLeft = (
-  props: Partial<TabsProps> & Partial<TabProps>
+  props: Partial<TabsProps> & Partial<TabProps>,
 ) => {
   return (
     <DrawerSidebarContext.Provider value={{ isInSidebar: true }}>
diff --git a/src/components/tabs/tabs.component.tsx b/src/components/tabs/tabs.component.tsx
index 9b2a1a4619..bdb69f2e12 100644
--- a/src/components/tabs/tabs.component.tsx
+++ b/src/components/tabs/tabs.component.tsx
@@ -84,27 +84,27 @@ const Tabs = ({
   if (position !== "left" && headerWidth !== undefined) {
     // eslint-disable-next-line no-console
     console.error(
-      "Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left"
+      "Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left",
     );
   }
 
   /** The children nodes converted into an Array */
   const filteredChildren = useMemo(
     () => Children.toArray(children).filter((child) => child),
-    [children]
+    [children],
   ) as ReactElement[];
 
   /** Array of the tabIds for the child nodes */
   const tabIds = useMemo(
     () => filteredChildren.map((child) => child.props.tabId),
-    [filteredChildren]
+    [filteredChildren],
   );
 
   /** Array of refs to the TabTitle nodes */
   const tabRefs = useMemo<React.RefObject<HTMLElement>[]>(
     () =>
       Array.from({ length: filteredChildren.length }).map(() => createRef()),
-    [filteredChildren.length]
+    [filteredChildren.length],
   );
 
   const previousSelectedTabId = useRef(selectedTabId);
@@ -136,9 +136,10 @@ const Tabs = ({
   }, []);
 
   /** Returns true/false for if the given tab id is selected. */
-  const isTabSelected = useCallback((tabId) => tabId === selectedTabIdState, [
-    selectedTabIdState,
-  ]);
+  const isTabSelected = useCallback(
+    (tabId) => tabId === selectedTabIdState,
+    [selectedTabIdState],
+  );
 
   /** Updates the currently visible tab */
   const updateVisibleTab = useCallback(
@@ -150,7 +151,7 @@ const Tabs = ({
         onTabChange(tabid);
       }
     },
-    [onTabChange, isTabSelected]
+    [onTabChange, isTabSelected],
   );
 
   const blurPreviousSelectedTab = useCallback(() => {
@@ -273,10 +274,10 @@ const Tabs = ({
 
       const getValidationMessage = (
         message: string | undefined,
-        validations: Record<string, string | boolean> = {}
+        validations: Record<string, string | boolean> = {},
       ): string | undefined => {
         const summaryOfMessages = Object.values(validations).filter(
-          (value) => value && typeof value === "string"
+          (value) => value && typeof value === "string",
         ) as string[];
 
         if (!showValidationsSummary || !summaryOfMessages.length) {
@@ -345,7 +346,7 @@ const Tabs = ({
 
     if (!renderHiddenTabs) {
       const tab = filteredChildren.find((child) =>
-        isTabSelected(child.props.tabId)
+        isTabSelected(child.props.tabId),
       );
 
       return (
diff --git a/src/components/tabs/tabs.pw.tsx b/src/components/tabs/tabs.pw.tsx
index 29a7ed3979..cbaecc61ad 100644
--- a/src/components/tabs/tabs.pw.tsx
+++ b/src/components/tabs/tabs.pw.tsx
@@ -55,7 +55,7 @@ test.describe("Tabs component", () => {
 
       await expect(tabContentById(page, id)).toBeVisible();
       await expect(tabContentById(page, id)).toHaveText(
-        `Content for tab ${id}`
+        `Content for tab ${id}`,
       );
     });
   });
@@ -68,7 +68,7 @@ test.describe("Tabs component", () => {
 
     await expect(tabById(page, 1)).toHaveAttribute(
       "href",
-      "https://carbon.sage.com/"
+      "https://carbon.sage.com/",
     );
     await expect(tabById(page, 1)).toHaveAttribute("target", "_blank");
   });
@@ -94,71 +94,70 @@ test.describe("Tabs component", () => {
 
       await expect(tabContentById(page, id)).toBeVisible();
       await expect(tabContentById(page, id)).toHaveText(
-        `Content for tab ${id}`
+        `Content for tab ${id}`,
       );
     });
   });
 
-  ([
-    ["right", "right", "flex-end"],
-    ["left", "start", "normal"],
-  ] as [TabsProps["align"], string, string][]).forEach(
-    ([align, textAlign, justifyContent]) => {
-      test(`should render Tabs with align prop set to ${align}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TabsComponent align={align} />);
+  (
+    [
+      ["right", "right", "flex-end"],
+      ["left", "start", "normal"],
+    ] as [TabsProps["align"], string, string][]
+  ).forEach(([align, textAlign, justifyContent]) => {
+    test(`should render Tabs with align prop set to ${align}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TabsComponent align={align} />);
 
-        await expect(tabList(page)).toHaveCSS("text-align", textAlign);
-        await expect(tabList(page)).toHaveCSS(
-          "justify-content",
-          justifyContent
-        );
-      });
-    }
-  );
-
-  ([
-    ["top", "row", 40],
-    ["left", "column", 200],
-  ] as [TabsProps["position"], string, number][]).forEach(
-    ([pos, flex, height]) => {
-      test(`should render Tabs with position prop set to ${pos}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TabsComponent position={pos} />);
+      await expect(tabList(page)).toHaveCSS("text-align", textAlign);
+      await expect(tabList(page)).toHaveCSS("justify-content", justifyContent);
+    });
+  });
 
-        const tabParent = tabById(page, 1).locator("..");
+  (
+    [
+      ["top", "row", 40],
+      ["left", "column", 200],
+    ] as [TabsProps["position"], string, number][]
+  ).forEach(([pos, flex, height]) => {
+    test(`should render Tabs with position prop set to ${pos}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TabsComponent position={pos} />);
 
-        await expect(tabParent).toHaveCSS("flex-direction", flex);
-        await assertCssValueIsApproximately(tabParent, "height", height);
-      });
-    }
-  );
-
-  ([
-    ["default", 40, 67],
-    ["large", 48, 88],
-  ] as [TabsProps["size"], number, number][]).forEach(
-    ([size, height, width]) => {
-      test(`should render Tabs with size prop set to ${size}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TabsComponent size={size} />);
+      const tabParent = tabById(page, 1).locator("..");
 
-        await assertCssValueIsApproximately(tabById(page, 1), "height", height);
-        await assertCssValueIsApproximately(tabById(page, 1), "width", width);
-      });
-    }
-  );
+      await expect(tabParent).toHaveCSS("flex-direction", flex);
+      await assertCssValueIsApproximately(tabParent, "height", height);
+    });
+  });
+
+  (
+    [
+      ["default", 40, 67],
+      ["large", 48, 88],
+    ] as [TabsProps["size"], number, number][]
+  ).forEach(([size, height, width]) => {
+    test(`should render Tabs with size prop set to ${size}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TabsComponent size={size} />);
 
-  ([
-    [true, 1358],
-    [false, 340],
-  ] as [boolean, number][]).forEach(([bool, width]) => {
+      await assertCssValueIsApproximately(tabById(page, 1), "height", height);
+      await assertCssValueIsApproximately(tabById(page, 1), "width", width);
+    });
+  });
+
+  (
+    [
+      [true, 1358],
+      [false, 340],
+    ] as [boolean, number][]
+  ).forEach(([bool, width]) => {
     test(`should render Tabs with extendedLine prop set to ${bool}`, async ({
       mount,
       page,
@@ -171,79 +170,79 @@ test.describe("Tabs component", () => {
     });
   });
 
-  ([
-    ["off", "none", "none", "none", "none"],
-    ["on", "solid", "none", "solid", "solid"],
-    ["no sides", "solid", "none", "none", "none"],
-  ] as [TabsProps["borders"], string, string, string, string][]).forEach(
-    ([state, top, bottom, right, left]) => {
-      test(`should render Tabs with borders prop set to ${state} when positioned on top`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TabsComponent borders={state} />);
+  (
+    [
+      ["off", "none", "none", "none", "none"],
+      ["on", "solid", "none", "solid", "solid"],
+      ["no sides", "solid", "none", "none", "none"],
+    ] as [TabsProps["borders"], string, string, string, string][]
+  ).forEach(([state, top, bottom, right, left]) => {
+    test(`should render Tabs with borders prop set to ${state} when positioned on top`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TabsComponent borders={state} />);
 
-        const tabText = page.getByText("Tab 1", { exact: true });
+      const tabText = page.getByText("Tab 1", { exact: true });
 
-        await expect(tabText).toHaveCSS("border-top-style", top);
-        await expect(tabText).toHaveCSS("border-bottom-style", bottom);
-        await expect(tabText).toHaveCSS("border-right-style", right);
-        await expect(tabText).toHaveCSS("border-left-style", left);
-      });
-    }
-  );
-
-  ([
-    ["off", "none", "none", "none", "none"],
-    ["on", "solid", "solid", "none", "solid"],
-    ["no sides", "solid", "solid", "none", "none"],
-  ] as [TabsProps["borders"], string, string, string, string][]).forEach(
-    ([state, top, bottom, right, left]) => {
-      test(`should render Tabs with borders prop set to ${state} when positioned to the left`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TabsComponent position="left" borders={state} />);
+      await expect(tabText).toHaveCSS("border-top-style", top);
+      await expect(tabText).toHaveCSS("border-bottom-style", bottom);
+      await expect(tabText).toHaveCSS("border-right-style", right);
+      await expect(tabText).toHaveCSS("border-left-style", left);
+    });
+  });
+
+  (
+    [
+      ["off", "none", "none", "none", "none"],
+      ["on", "solid", "solid", "none", "solid"],
+      ["no sides", "solid", "solid", "none", "none"],
+    ] as [TabsProps["borders"], string, string, string, string][]
+  ).forEach(([state, top, bottom, right, left]) => {
+    test(`should render Tabs with borders prop set to ${state} when positioned to the left`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TabsComponent position="left" borders={state} />);
 
-        const tabText = page.getByText("Tab 1", { exact: true });
+      const tabText = page.getByText("Tab 1", { exact: true });
 
-        await expect(tabText).toHaveCSS("border-top-style", top);
-        await expect(tabText).toHaveCSS("border-bottom-style", bottom);
-        await expect(tabText).toHaveCSS("border-right-style", right);
-        await expect(tabText).toHaveCSS("border-left-style", left);
-      });
-    }
-  );
+      await expect(tabText).toHaveCSS("border-top-style", top);
+      await expect(tabText).toHaveCSS("border-bottom-style", bottom);
+      await expect(tabText).toHaveCSS("border-right-style", right);
+      await expect(tabText).toHaveCSS("border-left-style", left);
+    });
+  });
 
   test("should render Tabs header with correct width set by headerWidth prop", async ({
     mount,
     page,
   }) => {
     await mount(
-      <TabsComponent headerWidth="440px" align="left" position="left" />
+      <TabsComponent headerWidth="440px" align="left" position="left" />,
     );
 
     await expect(tabList(page).locator("..")).toHaveCSS("width", "440px");
   });
 
-  ([
-    ["default", "rgb(255, 255, 255)"],
-    ["alternate", "rgb(204, 214, 219)"],
-  ] as [TabsProps["variant"], string][]).forEach(
-    ([variant, backgroundColor]) => {
-      test(`should render Tabs with variant prop set to ${variant}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TabsComponent variant={variant} />);
+  (
+    [
+      ["default", "rgb(255, 255, 255)"],
+      ["alternate", "rgb(204, 214, 219)"],
+    ] as [TabsProps["variant"], string][]
+  ).forEach(([variant, backgroundColor]) => {
+    test(`should render Tabs with variant prop set to ${variant}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TabsComponent variant={variant} />);
 
-        await expect(tabById(page, 1)).toHaveCSS(
-          "background-color",
-          backgroundColor
-        );
-      });
-    }
-  );
+      await expect(tabById(page, 1)).toHaveCSS(
+        "background-color",
+        backgroundColor,
+      );
+    });
+  });
 
   specialCharacters.forEach(([text]) => {
     test(`should render Tabs with title prop set to ${text}`, async ({
@@ -260,7 +259,7 @@ test.describe("Tabs component", () => {
     await mount(<TabsComponent tabId={specialCharacters[0]} />);
 
     await expect(getDataElementByValue(page, "select-tab").nth(0)).toHaveId(
-      `${specialCharacters[0]}-tab`
+      `${specialCharacters[0]}-tab`,
     );
   });
 
@@ -281,31 +280,33 @@ test.describe("Tabs component", () => {
     await expect(pill).toHaveText("12");
   });
 
-  ([
-    ["before", 1, "left"],
-    ["after", 3, "right"],
-  ] as [TabProps["titlePosition"], number, string][]).forEach(
-    ([pos, id, style]) => {
-      test(`should render Tabs with titlePosition prop set to ${pos}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<WithAdditionalTitleSiblings />);
+  (
+    [
+      ["before", 1, "left"],
+      ["after", 3, "right"],
+    ] as [TabProps["titlePosition"], number, string][]
+  ).forEach(([pos, id, style]) => {
+    test(`should render Tabs with titlePosition prop set to ${pos}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<WithAdditionalTitleSiblings />);
 
-        const layoutWrapper = tabById(page, id)
-          .locator(PILL_PREVIEW)
-          .locator("..");
+      const layoutWrapper = tabById(page, id)
+        .locator(PILL_PREVIEW)
+        .locator("..");
 
-        await expect(layoutWrapper).toHaveCSS(style, "8px");
-      });
-    }
-  );
-
-  ([
-    [1, validationTypes[0]],
-    [2, validationTypes[1]],
-    [3, validationTypes[2]],
-  ] as [number, string][]).forEach(([id, validation]) => {
+      await expect(layoutWrapper).toHaveCSS(style, "8px");
+    });
+  });
+
+  (
+    [
+      [1, validationTypes[0]],
+      [2, validationTypes[1]],
+      [3, validationTypes[2]],
+    ] as [number, string][]
+  ).forEach(([id, validation]) => {
     test(`should render Tab ${id} with ${validation}`, async ({
       mount,
       page,
@@ -314,16 +315,18 @@ test.describe("Tabs component", () => {
 
       await expect(tabById(page, id).locator(ICON)).toHaveAttribute(
         "type",
-        validation
+        validation,
       );
     });
   });
 
-  ([
-    [1, validationTypes[0]],
-    [2, validationTypes[1]],
-    [3, validationTypes[2]],
-  ] as [number, string][]).forEach(([id, validation]) => {
+  (
+    [
+      [1, validationTypes[0]],
+      [2, validationTypes[1]],
+      [3, validationTypes[2]],
+    ] as [number, string][]
+  ).forEach(([id, validation]) => {
     test(`should display ${validation} message when hovering over Tab ${id}`, async ({
       mount,
       page,
@@ -342,7 +345,7 @@ test.describe("Tabs component", () => {
       page,
     }) => {
       await mount(
-        <TabsComponentValidationsUnregistering validationType={validation} />
+        <TabsComponentValidationsUnregistering validationType={validation} />,
       );
 
       const icon = tabById(page, 1).locator(ICON);
@@ -362,7 +365,7 @@ test.describe("Tabs component", () => {
     await expect(tabById(page, 1).locator(ICON)).not.toBeVisible();
     await expect(page.getByText("Tab 1", { exact: true })).toHaveCSS(
       "outline-color",
-      "rgba(0, 0, 0, 0.9)"
+      "rgba(0, 0, 0, 0.9)",
     );
   });
 
@@ -426,10 +429,12 @@ test.describe("Tabs component", () => {
     await expect(tabTitleById(page, 1)).toBeFocused();
   });
 
-  ([
-    ["top", "8px 8px 0px 0px"],
-    ["left", "8px 0px 0px 8px"],
-  ] as [TabsProps["position"], string][]).forEach(([pos, borderRadius]) => {
+  (
+    [
+      ["top", "8px 8px 0px 0px"],
+      ["left", "8px 0px 0px 8px"],
+    ] as [TabsProps["position"], string][]
+  ).forEach(([pos, borderRadius]) => {
     test(`should render Tabs with expected border radius when position is ${pos}`, async ({
       mount,
       page,
@@ -457,7 +462,7 @@ test.describe("Tabs component", () => {
             onTabChange={() => {
               callbackCount += 1;
             }}
-          />
+          />,
         );
 
         await tabById(page, 2).click();
@@ -474,7 +479,7 @@ test.describe("Tabs component", () => {
             onTabChange={() => {
               callbackCount += 1;
             }}
-          />
+          />,
         );
 
         await tabById(page, 2).press("Enter");
@@ -495,7 +500,7 @@ test.describe("Tabs component", () => {
             onTabChange={() => {
               callbackCount += 1;
             }}
-          />
+          />,
         );
 
         await tabById(page, 2).click();
@@ -513,7 +518,7 @@ test.describe("Tabs component", () => {
             onTabChange={() => {
               callbackCount += 1;
             }}
-          />
+          />,
         );
 
         await tabById(page, 2).press("Enter");
@@ -533,7 +538,7 @@ test.describe("Tabs component", () => {
             onTabChange={() => {
               callbackCount += 1;
             }}
-          />
+          />,
         );
 
         await tabById(page, 2).click();
@@ -550,7 +555,7 @@ test.describe("Tabs component", () => {
             onTabChange={() => {
               callbackCount += 1;
             }}
-          />
+          />,
         );
 
         await tabById(page, 2).press("Enter");
@@ -754,7 +759,7 @@ test.describe("Tabs component", () => {
       page,
     }) => {
       await mount(
-        <TabsComponent headerWidth="400px" align="left" position="left" />
+        <TabsComponent headerWidth="400px" align="left" position="left" />,
       );
 
       await checkAccessibility(page);
@@ -815,7 +820,7 @@ test.describe("Tabs component", () => {
         await tabById(page, id).focus();
         await expect(tabById(page, id)).toHaveCSS(
           "box-shadow",
-          "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+          "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
         );
       });
     });
diff --git a/src/components/tabs/tabs.test.tsx b/src/components/tabs/tabs.test.tsx
index 4b3c3e5827..f602540d9e 100644
--- a/src/components/tabs/tabs.test.tsx
+++ b/src/components/tabs/tabs.test.tsx
@@ -23,7 +23,7 @@ testStyledSystemMarginRTL(
       </Tab>
     </Tabs>
   ),
-  () => screen.getByTestId("tabs")
+  () => screen.getByTestId("tabs"),
 );
 
 testStyledSystemMarginRTL(
@@ -40,7 +40,7 @@ testStyledSystemMarginRTL(
       </Tab>
     </Tabs>
   ),
-  () => screen.getByTestId("tabs")
+  () => screen.getByTestId("tabs"),
 );
 
 test("should not throw an error when rendered with NumeralDate as a child", () => {
@@ -57,7 +57,7 @@ test("should not throw an error when rendered with NumeralDate as a child", () =
           />
           <Textbox error="error" onChange={() => {}} />
         </Tab>
-      </Tabs>
+      </Tabs>,
     );
   }).not.toThrow();
 });
@@ -72,11 +72,11 @@ test("should throw an error if rendered with `headerWidth` prop and `position` p
       <Tab title="Tab Title 1" tabId="uniqueid1">
         TabContent
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(consoleSpy).toHaveBeenCalledWith(
-    "Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left"
+    "Invalid usage of prop headerWidth in Tabs. The headerWidth can be used only if position is set to left",
   );
 
   consoleSpy.mockRestore();
@@ -86,12 +86,12 @@ test("passes the `className` prop down to the element", () => {
   render(
     <Tabs className="custom-class-1 custom-class-2">
       <Tab tabId="foo" />
-    </Tabs>
+    </Tabs>,
   );
 
   expect(screen.getByTestId("tabs")).toHaveClass(
     "custom-class-1",
-    "custom-class-2"
+    "custom-class-2",
   );
 });
 
@@ -107,7 +107,7 @@ test("the `selectedTabId` prop determines which child `Tab` is displayed", () =>
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(screen.getByText("Content for tab 1")).not.toBeVisible();
@@ -127,7 +127,7 @@ test("when the `renderHiddenTabs` prop is false, only the currently visible tab
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(screen.queryByText("Content for tab 1")).not.toBeInTheDocument();
@@ -158,20 +158,20 @@ test.each(["error", "warning", "info"] as const)(
         >
           <Textbox onChange={() => {}} {...{ [validation]: true }} />
         </Tab>
-      </Tabs>
+      </Tabs>,
     );
 
     expect(
       within(screen.getByRole("tab", { name: "Tab Title 1" })).getByTestId(
-        `icon-${validation}`
-      )
+        `icon-${validation}`,
+      ),
     ).toBeVisible();
     expect(
       within(screen.getByRole("tab", { name: "Tab Title 2" })).queryByTestId(
-        `icon-${validation}`
-      )
+        `icon-${validation}`,
+      ),
     ).not.toBeInTheDocument();
-  }
+  },
 );
 
 test("when the `renderHiddenTabs` prop is true, all tabs are rendered in the DOM with only the first visible", () => {
@@ -186,7 +186,7 @@ test("when the `renderHiddenTabs` prop is true, all tabs are rendered in the DOM
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(screen.getByText("Content for tab 1")).toBeVisible();
@@ -207,7 +207,7 @@ test("when a tab title is clicked, the associated tab becomes the visible one",
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
   expect(screen.getByText("Content for tab 1")).toBeVisible();
   expect(screen.getByText("Content for tab 2")).not.toBeVisible();
@@ -231,7 +231,7 @@ test("when a tab title is clicked, the `onTabChange` callback prop gets called w
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   await user.click(screen.getByRole("tab", { name: "Tab 2" }));
@@ -251,7 +251,7 @@ test("updates the selected tab when the `selectedTabId` prop is updated", () =>
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
   expect(screen.getByText("Content for tab 1")).toBeVisible();
   expect(screen.getByText("Content for tab 2")).not.toBeVisible();
@@ -267,7 +267,7 @@ test("updates the selected tab when the `selectedTabId` prop is updated", () =>
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
   expect(screen.getByText("Content for tab 1")).not.toBeVisible();
   expect(screen.getByText("Content for tab 2")).toBeVisible();
@@ -285,7 +285,7 @@ test("blurs the previously-selected tab title when the `selectedTabId` prop is u
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
   screen.getByRole("tab", { name: "Tab 1" }).focus();
 
@@ -300,7 +300,7 @@ test("blurs the previously-selected tab title when the `selectedTabId` prop is u
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
   expect(screen.getByRole("tab", { name: "Tab 1" })).not.toHaveFocus();
 });
@@ -319,7 +319,7 @@ test("does not call the `onTabChange` callback when rerendered with the selected
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
   await user.click(screen.getByRole("tab", { name: "Tab 2" }));
   expect(onTabChange).toHaveBeenCalledTimes(1);
@@ -335,7 +335,7 @@ test("does not call the `onTabChange` callback when rerendered with the selected
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
   expect(onTabChange).toHaveBeenCalledTimes(1);
 });
@@ -353,7 +353,7 @@ test("when the position is `top` (the default), pressing the right arrow key foc
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   screen.getByRole("tab", { name: "Tab 1" }).focus();
@@ -378,7 +378,7 @@ test("when the position is `top` (the default), pressing the right arrow key whe
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   screen.getByRole("tab", { name: "Tab 3" }).focus();
@@ -400,7 +400,7 @@ test("when the position is `top` (the default), pressing the left arrow key focu
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   screen.getByRole("tab", { name: "Tab 3" }).focus();
@@ -425,7 +425,7 @@ test("when the position is `top` (the default), pressing the left arrow key when
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   screen.getByRole("tab", { name: "Tab 1" }).focus();
@@ -447,7 +447,7 @@ test("when the position is `left`, pressing the down arrow key focuses the next
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   screen.getByRole("tab", { name: "Tab 1" }).focus();
@@ -472,7 +472,7 @@ test("when the position is `left`, pressing the down arrow key when focused on t
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   screen.getByRole("tab", { name: "Tab 3" }).focus();
@@ -494,7 +494,7 @@ test("when the position is `left`, pressing the up arrow key focuses the previou
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   screen.getByRole("tab", { name: "Tab 3" }).focus();
@@ -519,7 +519,7 @@ test("when the position is `left`, pressing the up arrow key when focused on the
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   screen.getByRole("tab", { name: "Tab 1" }).focus();
@@ -541,7 +541,7 @@ test("when the Enter key is pressed on a tab title, the associated tab becomes t
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
   expect(screen.getByText("Content for tab 1")).toBeVisible();
   expect(screen.getByText("Content for tab 2")).not.toBeVisible();
@@ -565,7 +565,7 @@ test("when a non-Enter, non-arrow key is pressed on a tab title, neither the vis
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
   expect(screen.getByText("Content for tab 1")).toBeVisible();
   expect(screen.getByText("Content for tab 2")).not.toBeVisible();
@@ -598,7 +598,7 @@ test("when rendered in a Drawer sidebar, pressing the down arrow key focuses the
       }
     >
       drawer content
-    </Drawer>
+    </Drawer>,
   );
   screen.getByRole("tab", { name: "Tab 1" }).focus();
 
@@ -628,7 +628,7 @@ test("when rendered in a Drawer sidebar`, pressing the down arrow key when focus
       }
     >
       drawer content
-    </Drawer>
+    </Drawer>,
   );
 
   screen.getByRole("tab", { name: "Tab 3" }).focus();
@@ -656,7 +656,7 @@ test("when rendered in a Drawer sidebar, pressing the up arrow key focuses the p
       }
     >
       drawer content
-    </Drawer>
+    </Drawer>,
   );
 
   screen.getByRole("tab", { name: "Tab 3" }).focus();
@@ -687,7 +687,7 @@ test("when rendered in a Drawer sidebar, pressing the up arrow key when focused
       }
     >
       drawer content
-    </Drawer>
+    </Drawer>,
   );
 
   screen.getByRole("tab", { name: "Tab 1" }).focus();
@@ -717,38 +717,38 @@ test("when there is no validation issue in a tab, no validation icon is displaye
       >
         <Textbox onChange={() => {}} />
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
 });
 
@@ -773,36 +773,38 @@ test("when there is an error in a tab, an error icon is displayed in the corresp
       >
         <Textbox error onChange={() => {}} />
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
-    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId("icon-error")
+    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId(
+      "icon-error",
+    ),
   ).toBeVisible();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
 });
 
@@ -828,36 +830,38 @@ test("when errors and warnings are both present in a tab, only the error icon is
         <Textbox error onChange={() => {}} />
         <Textbox warning onChange={() => {}} />
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
-    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId("icon-error")
+    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId(
+      "icon-error",
+    ),
   ).toBeVisible();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
 });
 
@@ -884,36 +888,38 @@ test("when errors, warnings and infos are all present in a tab, only the error i
         <Textbox warning onChange={() => {}} />
         <Textbox info onChange={() => {}} />
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
-    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId("icon-error")
+    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId(
+      "icon-error",
+    ),
   ).toBeVisible();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
 });
 
@@ -938,38 +944,38 @@ test("when a tab has warnings and no errors, a warning icon is displayed in the
       >
         <Textbox warning onChange={() => {}} />
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).toBeVisible();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
 });
 
@@ -994,36 +1000,36 @@ test("when a tab has info and no errors or warnings, an info icon is displayed i
       >
         <Textbox info onChange={() => {}} />
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
   expect(
-    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId("icon-info")
+    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId("icon-info"),
   ).toBeVisible();
 });
 
@@ -1054,36 +1060,38 @@ test("an error icon is displayed in the corresponding tab title when specified b
       >
         <Textbox onChange={() => {}} />
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
-    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId("icon-error")
+    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId(
+      "icon-error",
+    ),
   ).toBeVisible();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
 });
 
@@ -1114,38 +1122,38 @@ test("a warning icon is displayed in the corresponding tab title when specified
       >
         <Textbox onChange={() => {}} />
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).toBeVisible();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
 });
 
@@ -1176,36 +1184,36 @@ test("an info icon is displayed in the corresponding tab title when specified by
       >
         <Textbox onChange={() => {}} />
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-error"
-    )
+      "icon-error",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 2" })).queryByTestId(
-      "icon-warning"
-    )
+      "icon-warning",
+    ),
   ).not.toBeInTheDocument();
   expect(
     within(screen.getByRole("tab", { name: "Tab 1" })).queryByTestId(
-      "icon-info"
-    )
+      "icon-info",
+    ),
   ).not.toBeInTheDocument();
   expect(
-    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId("icon-info")
+    within(screen.getByRole("tab", { name: "Tab 2" })).getByTestId("icon-info"),
   ).toBeVisible();
 });
 
@@ -1295,7 +1303,7 @@ test("has the expected `data-component` attribute", () => {
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(screen.getByTestId("tabs")).toHaveAttribute("data-component", "tabs");
@@ -1313,7 +1321,7 @@ test("accepts `data-element` and `data-role` props", () => {
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   expect(screen.getByTestId("bar")).toHaveAttribute("data-element", "foo");
@@ -1323,7 +1331,7 @@ test("child Tab components accept a `data-role` prop via `titleProps` which is a
   render(
     <Tabs>
       <Tab tabId="tab-id" titleProps={{ "data-role": "foo" }} />
-    </Tabs>
+    </Tabs>,
   );
 
   expect(screen.getByRole("tab")).toHaveAttribute("data-role", "foo");
@@ -1349,18 +1357,18 @@ test.each(["error", "warning", "info"])(
             {...{ [validation]: "third validation message" }}
           />
         </Tab>
-      </Tabs>
+      </Tabs>,
     );
 
     await user.hover(
       within(screen.getByRole("tab", { name: "Test" })).getByTestId(
-        `icon-${validation}`
-      )
+        `icon-${validation}`,
+      ),
     );
     expect(screen.getByRole("tooltip")).toHaveTextContent(
-      "• first validation message • second validation message • third validation message"
+      "• first validation message • second validation message • third validation message",
     );
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -1380,18 +1388,18 @@ test.each(["error", "warning", "info"])(
             {...{ [validation]: "third validation message" }}
           />
         </Tab>
-      </Tabs>
+      </Tabs>,
     );
 
     await user.hover(
       within(screen.getByRole("tab", { name: "Test" })).getByTestId(
-        `icon-${validation}`
-      )
+        `icon-${validation}`,
+      ),
     );
     expect(screen.getByRole("tooltip")).toHaveTextContent(
-      "• first validation message • third validation message"
+      "• first validation message • third validation message",
     );
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -1406,18 +1414,18 @@ test.each(["error", "warning", "info"])(
             {...{ [validation]: "first validation message" }}
           />
         </Tab>
-      </Tabs>
+      </Tabs>,
     );
 
     await user.hover(
       within(screen.getByRole("tab", { name: "Test" })).getByTestId(
-        `icon-${validation}`
-      )
+        `icon-${validation}`,
+      ),
     );
     expect(screen.getByRole("tooltip")).toHaveTextContent(
-      "first validation message"
+      "first validation message",
     );
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -1435,16 +1443,16 @@ test.each(["error", "warning", "info"])(
           <Textbox onChange={() => {}} {...{ [validation]: true }} />
           <Textbox onChange={() => {}} {...{ [validation]: true }} />
         </Tab>
-      </Tabs>
+      </Tabs>,
     );
 
     await user.hover(
       within(screen.getByRole("tab", { name: "Test" })).getByTestId(
-        `icon-${validation}`
-      )
+        `icon-${validation}`,
+      ),
     );
     expect(screen.getByRole("tooltip")).toHaveTextContent("a single message");
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -1471,16 +1479,16 @@ test.each(["error", "warning", "info"])(
             {...{ [validation]: "third validation message" }}
           />
         </Tab>
-      </Tabs>
+      </Tabs>,
     );
 
     await user.hover(
       within(screen.getByRole("tab", { name: "Test" })).getByTestId(
-        `icon-${validation}`
-      )
+        `icon-${validation}`,
+      ),
     );
     expect(screen.getByRole("tooltip")).toHaveTextContent("a single message");
-  }
+  },
 );
 
 // coverage - headerWidth prop tested in Chromatic
@@ -1492,7 +1500,7 @@ test.each(["35%", "100px", "5em"])(
         <Tab title="Tab Title 1" tabId="uniqueid1">
           TabContent
         </Tab>
-      </Tabs>
+      </Tabs>,
     );
 
     expect(screen.getByTestId("tabs")).toHaveStyleRule("width", headerWidth, {
@@ -1503,9 +1511,9 @@ test.each(["35%", "100px", "5em"])(
       `calc(100% - ${headerWidth})`,
       {
         modifier: `${StyledTab}`,
-      }
+      },
     );
-  }
+  },
 );
 
 // coverage
@@ -1522,7 +1530,7 @@ test("leaves the same tab content visible when the already-selected tab is click
       <Tab tabId="tab-3" title="Tab 3">
         Content for tab 3
       </Tab>
-    </Tabs>
+    </Tabs>,
   );
 
   await user.click(screen.getByRole("tab", { name: "Tab 1" }));
diff --git a/src/components/text-editor/__internal__/decorators/link-decorator.ts b/src/components/text-editor/__internal__/decorators/link-decorator.ts
index d880f3c806..2ace79d307 100644
--- a/src/components/text-editor/__internal__/decorators/link-decorator.ts
+++ b/src/components/text-editor/__internal__/decorators/link-decorator.ts
@@ -6,7 +6,7 @@ type StrategyCallback = (start: number, end: number) => void;
 function findWithRegex(
   regex: RegExp,
   contentBlock: ContentBlock,
-  callback: StrategyCallback
+  callback: StrategyCallback,
 ) {
   const text = contentBlock.getText();
   let matchArr;
@@ -29,7 +29,7 @@ function findWithRegex(
 
 const linkStrategy = (
   contentBlock: ContentBlock,
-  callback: StrategyCallback
+  callback: StrategyCallback,
 ) => {
   const combineRegex = (...regex: RegExp[]) =>
     new RegExp(regex.map((r) => r.source).join(""), "g");
@@ -40,7 +40,7 @@ const linkStrategy = (
     /([\w-]+\.)+\w+/, // domain
     /(:\d+)?/, // port
     /(\/[\w#!:.?+=&%@!-/]+)?/, // paths, queries, fragments
-    /\b/
+    /\b/,
   );
 
   findWithRegex(urlRegex, contentBlock, callback);
diff --git a/src/components/text-editor/__internal__/editor-link/editor-link.test.tsx b/src/components/text-editor/__internal__/editor-link/editor-link.test.tsx
index b91076736f..394a89d859 100644
--- a/src/components/text-editor/__internal__/editor-link/editor-link.test.tsx
+++ b/src/components/text-editor/__internal__/editor-link/editor-link.test.tsx
@@ -18,7 +18,7 @@ test("derives the url from the`contentState` and `entityKey`", () => {
         <div>foo</div>
         <div>bar</div>
       </EditorLink>
-    </EditorContext.Provider>
+    </EditorContext.Provider>,
   );
 
   const link = screen.getByRole("link");
@@ -34,7 +34,7 @@ test("derives the url from the first child element when no `contentState` is pro
         <ChildComponent text="foo" />
         <ChildComponent text="bar" />
       </EditorLink>
-    </EditorContext.Provider>
+    </EditorContext.Provider>,
   );
 
   const link = screen.getByRole("link");
@@ -56,7 +56,7 @@ test("derives the url from the first child element when no `entityKey` is provid
         <ChildComponent text="foo" />
         <ChildComponent text="bar" />
       </EditorLink>
-    </EditorContext.Provider>
+    </EditorContext.Provider>,
   );
 
   const link = screen.getByRole("link");
@@ -72,7 +72,7 @@ test("does not append `https://` to the url when it contains `http://`", () => {
         <ChildComponent text="http://foo" />
         <ChildComponent text="bar" />
       </EditorLink>
-    </EditorContext.Provider>
+    </EditorContext.Provider>,
   );
 
   const link = screen.getByRole("link");
@@ -89,7 +89,7 @@ test("the `onLinkAdded` callback prop is called with the computed url when the c
         <ChildComponent text="foo" />
         <ChildComponent text="bar" />
       </EditorLink>
-    </EditorContext.Provider>
+    </EditorContext.Provider>,
   );
 
   expect(onLinkAdded).toHaveBeenCalledWith("https://foo");
@@ -104,7 +104,7 @@ test("when the `editMode` prop is `true`, the anchor element should not have a `
         <ChildComponent text="foo" />
         <ChildComponent text="bar" />
       </EditorLink>
-    </EditorContext.Provider>
+    </EditorContext.Provider>,
   );
 
   expect(screen.queryByRole("link")).not.toBeInTheDocument();
diff --git a/src/components/text-editor/__internal__/label-wrapper/label.test.tsx b/src/components/text-editor/__internal__/label-wrapper/label.test.tsx
index 14a5934625..4f0ac5f7ed 100644
--- a/src/components/text-editor/__internal__/label-wrapper/label.test.tsx
+++ b/src/components/text-editor/__internal__/label-wrapper/label.test.tsx
@@ -8,7 +8,7 @@ test("should render children", () => {
   render(
     <LabelWrapper onClick={() => {}}>
       <Label>Test Children</Label>
-    </LabelWrapper>
+    </LabelWrapper>,
   );
 
   expect(screen.getByText("Test Children")).toBeVisible();
@@ -20,7 +20,7 @@ test("should call the `onClick` function prop when clicked", async () => {
   render(
     <LabelWrapper onClick={onClick}>
       <Label>Test Children</Label>
-    </LabelWrapper>
+    </LabelWrapper>,
   );
   expect(onClick).not.toHaveBeenCalled();
 
diff --git a/src/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.tsx b/src/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.tsx
index 82c1b0ff12..3369549b4b 100644
--- a/src/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.tsx
+++ b/src/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.tsx
@@ -41,7 +41,7 @@ export const ToolbarButton = React.forwardRef<
       onFocus,
       onBlur,
     }: ToolbarButtonProps,
-    ref
+    ref,
   ) => {
     return (
       <StyledToolbarButton
@@ -60,7 +60,7 @@ export const ToolbarButton = React.forwardRef<
         {children}
       </StyledToolbarButton>
     );
-  }
+  },
 );
 
 ToolbarButton.displayName = "ToolbarButton";
diff --git a/src/components/text-editor/__internal__/toolbar/toolbar.component.tsx b/src/components/text-editor/__internal__/toolbar/toolbar.component.tsx
index 454e02171a..ff1f73aeb2 100644
--- a/src/components/text-editor/__internal__/toolbar/toolbar.component.tsx
+++ b/src/components/text-editor/__internal__/toolbar/toolbar.component.tsx
@@ -22,14 +22,14 @@ export interface ToolbarProps {
     ev:
       | React.KeyboardEvent<HTMLButtonElement>
       | React.MouseEvent<HTMLButtonElement>,
-    inlineType: InlineStyleType
+    inlineType: InlineStyleType,
   ) => void;
   /** Callback to handle setting the block styles */
   setBlockStyle: (
     ev:
       | React.KeyboardEvent<HTMLButtonElement>
       | React.MouseEvent<HTMLButtonElement>,
-    blockType: BlockType
+    blockType: BlockType,
   ) => void;
   /** Additional elements to be rendered in the Toolbar, e.g. Save and Cancel Button */
   toolbarElements?: React.ReactNode;
@@ -60,11 +60,11 @@ const Toolbar = ({
       ev:
         | React.MouseEvent<HTMLButtonElement>
         | React.KeyboardEvent<HTMLButtonElement>,
-      inlineType: InlineStyleType
+      inlineType: InlineStyleType,
     ) => {
       setInlineStyle(ev, inlineType);
     },
-    [setInlineStyle]
+    [setInlineStyle],
   );
 
   const handleBlockType = useCallback(
@@ -72,17 +72,17 @@ const Toolbar = ({
       ev:
         | React.MouseEvent<HTMLButtonElement>
         | React.KeyboardEvent<HTMLButtonElement>,
-      blockType: BlockType
+      blockType: BlockType,
     ) => {
       setBlockStyle(ev, blockType);
     },
-    [setBlockStyle]
+    [setBlockStyle],
   );
 
   const handleKeyDown = useCallback(
     (
       ev: React.KeyboardEvent<HTMLButtonElement>,
-      type: InlineStyleType | BlockType
+      type: InlineStyleType | BlockType,
     ) => {
       if (Events.isTabKey(ev)) {
         setFocusIndex(null);
@@ -115,7 +115,7 @@ const Toolbar = ({
         setTabbable(false);
       }
     },
-    [focusIndex, handleBlockType, handleInlineStyleChange]
+    [focusIndex, handleBlockType, handleInlineStyleChange],
   );
 
   useEffect(() => {
diff --git a/src/components/text-editor/__internal__/toolbar/toolbar.test.tsx b/src/components/text-editor/__internal__/toolbar/toolbar.test.tsx
index 1ad2b5fe2c..898f5c60a4 100644
--- a/src/components/text-editor/__internal__/toolbar/toolbar.test.tsx
+++ b/src/components/text-editor/__internal__/toolbar/toolbar.test.tsx
@@ -13,7 +13,7 @@ jest.mock("../../../tooltip", () =>
       {children}
       {isVisible ? <div role="tooltip">{message}</div> : null}
     </>
-  ))
+  )),
 );
 
 test("when the `canFocus` prop is true, pressing the right arrow key cycles focus through all the buttons from left to right and then wraps back to the first", async () => {
@@ -29,7 +29,7 @@ test("when the `canFocus` prop is true, pressing the right arrow key cycles focu
       }}
       setInlineStyle={() => {}}
       setBlockStyle={() => {}}
-    />
+    />,
   );
   screen.getByRole("button", { name: "bold" }).focus();
 
@@ -59,7 +59,7 @@ test("when the `canFocus` prop is true, pressing the left arrow key wraps focus
       }}
       setInlineStyle={() => {}}
       setBlockStyle={() => {}}
-    />
+    />,
   );
   screen.getByRole("button", { name: "bold" }).focus();
 
@@ -94,15 +94,15 @@ test.each(["bold", "italic", "bullet-list", "number-list"])(
           setBlockStyle={() => {}}
         />
         <button type="button">I will receive focus</button>
-      </>
+      </>,
     );
     screen.getByRole("button", { name: buttonName }).focus();
 
     await user.tab();
     expect(
-      screen.getByRole("button", { name: "I will receive focus" })
+      screen.getByRole("button", { name: "I will receive focus" }),
     ).toHaveFocus();
-  }
+  },
 );
 
 test.each(["bold", "italic"])(
@@ -122,18 +122,18 @@ test.each(["bold", "italic"])(
         }}
         setInlineStyle={setInlineStyle}
         setBlockStyle={setBlockStyle}
-      />
+      />,
     );
 
     await user.click(screen.getByRole("button", { name: buttonName }));
 
     expect(setInlineStyle).toHaveBeenCalledWith(
       expect.anything(),
-      buttonName.toUpperCase()
+      buttonName.toUpperCase(),
     );
     expect(setInlineStyle).toHaveBeenCalledTimes(1);
     expect(setBlockStyle).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each([
@@ -156,7 +156,7 @@ test.each([
         }}
         setInlineStyle={setInlineStyle}
         setBlockStyle={setBlockStyle}
-      />
+      />,
     );
 
     await user.click(screen.getByRole("button", { name: buttonName }));
@@ -164,7 +164,7 @@ test.each([
     expect(setBlockStyle).toHaveBeenCalledWith(expect.anything(), blockType);
     expect(setBlockStyle).toHaveBeenCalledTimes(1);
     expect(setInlineStyle).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each(["bold", "italic"])(
@@ -184,7 +184,7 @@ test.each(["bold", "italic"])(
         }}
         setInlineStyle={setInlineStyle}
         setBlockStyle={setBlockStyle}
-      />
+      />,
     );
 
     screen.getByRole("button", { name: buttonName }).focus();
@@ -192,11 +192,11 @@ test.each(["bold", "italic"])(
 
     expect(setInlineStyle).toHaveBeenCalledWith(
       expect.anything(),
-      buttonName.toUpperCase()
+      buttonName.toUpperCase(),
     );
     expect(setInlineStyle).toHaveBeenCalledTimes(1);
     expect(setBlockStyle).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each([
@@ -219,7 +219,7 @@ test.each([
         }}
         setInlineStyle={setInlineStyle}
         setBlockStyle={setBlockStyle}
-      />
+      />,
     );
 
     screen.getByRole("button", { name: buttonName }).focus();
@@ -228,7 +228,7 @@ test.each([
     expect(setBlockStyle).toHaveBeenCalledWith(expect.anything(), blockType);
     expect(setBlockStyle).toHaveBeenCalledTimes(1);
     expect(setInlineStyle).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each(["bold", "italic"])(
@@ -248,7 +248,7 @@ test.each(["bold", "italic"])(
         }}
         setInlineStyle={setInlineStyle}
         setBlockStyle={setBlockStyle}
-      />
+      />,
     );
 
     screen.getByRole("button", { name: buttonName }).focus();
@@ -256,11 +256,11 @@ test.each(["bold", "italic"])(
 
     expect(setInlineStyle).toHaveBeenCalledWith(
       expect.anything(),
-      buttonName.toUpperCase()
+      buttonName.toUpperCase(),
     );
     expect(setInlineStyle).toHaveBeenCalledTimes(1);
     expect(setBlockStyle).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each([
@@ -283,7 +283,7 @@ test.each([
         }}
         setInlineStyle={setInlineStyle}
         setBlockStyle={setBlockStyle}
-      />
+      />,
     );
 
     screen.getByRole("button", { name: buttonName }).focus();
@@ -292,7 +292,7 @@ test.each([
     expect(setBlockStyle).toHaveBeenCalledWith(expect.anything(), blockType);
     expect(setBlockStyle).toHaveBeenCalledTimes(1);
     expect(setInlineStyle).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each(["bold", "italic", "bullet-list", "number-list"])(
@@ -312,7 +312,7 @@ test.each(["bold", "italic", "bullet-list", "number-list"])(
         }}
         setInlineStyle={setInlineStyle}
         setBlockStyle={setBlockStyle}
-      />
+      />,
     );
 
     screen.getByRole("button", { name: buttonName }).focus();
@@ -320,7 +320,7 @@ test.each(["bold", "italic", "bullet-list", "number-list"])(
 
     expect(setInlineStyle).not.toHaveBeenCalled();
     expect(setBlockStyle).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each([
@@ -343,17 +343,17 @@ test.each([
         }}
         setInlineStyle={() => {}}
         setBlockStyle={() => {}}
-      />
+      />,
     );
 
     await user.hover(screen.getByRole("button", { name: buttonName }));
     expect(
-      await screen.findByRole("tooltip", { name: tooltipText })
+      await screen.findByRole("tooltip", { name: tooltipText }),
     ).toBeVisible();
 
     await user.unhover(screen.getByRole("button", { name: buttonName }));
     expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
-  }
+  },
 );
 
 test.each([
@@ -375,18 +375,18 @@ test.each([
         }}
         setInlineStyle={() => {}}
         setBlockStyle={() => {}}
-      />
+      />,
     );
 
     screen.getByRole("button", { name: buttonName }).focus();
 
     expect(
-      await screen.findByRole("tooltip", { name: tooltipText })
+      await screen.findByRole("tooltip", { name: tooltipText }),
     ).toBeVisible();
 
     screen.getByRole("button", { name: buttonName }).blur();
     expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
-  }
+  },
 );
 
 test("additional elements passed via the `toolbarElements` prop are rendered", () => {
@@ -405,14 +405,14 @@ test("additional elements passed via the `toolbarElements` prop are rendered", (
         <Button key="additional">Additional button</Button>,
         <Button key="another">Yet another button</Button>,
       ]}
-    />
+    />,
   );
 
   expect(
-    screen.getByRole("button", { name: "Additional button" })
+    screen.getByRole("button", { name: "Additional button" }),
   ).toBeVisible();
   expect(
-    screen.getByRole("button", { name: "Yet another button" })
+    screen.getByRole("button", { name: "Yet another button" }),
   ).toBeVisible();
 });
 
@@ -450,7 +450,7 @@ test.each(["bold", "italic", "bulletList", "numberList"] as const)(
           setInlineStyle={() => {}}
           setBlockStyle={() => {}}
         />
-      </I18nProvider>
+      </I18nProvider>,
     );
 
     const buttonName = locale.textEditor.ariaLabels[localeProperty]();
@@ -458,7 +458,7 @@ test.each(["bold", "italic", "bulletList", "numberList"] as const)(
     await user.hover(screen.getByRole("button", { name: buttonName }));
 
     expect(
-      await screen.findByRole("tooltip", { name: tooltipText })
+      await screen.findByRole("tooltip", { name: tooltipText }),
     ).toBeVisible();
-  }
+  },
 );
diff --git a/src/components/text-editor/__internal__/utils/utils.test.ts b/src/components/text-editor/__internal__/utils/utils.test.ts
index e4509f6abe..18bbe4a66e 100644
--- a/src/components/text-editor/__internal__/utils/utils.test.ts
+++ b/src/components/text-editor/__internal__/utils/utils.test.ts
@@ -17,13 +17,13 @@ describe("computeBlockType", () => {
 
   it('returns "ordered-list-item" as default when char is "." and type is not "ordered-list-item"', () => {
     expect(computeBlockType(".", "unordered-list-item")).toEqual(
-      "ordered-list-item"
+      "ordered-list-item",
     );
   });
 
   it('returns "unordered-list-item" as default when char is "*" and type is not "unordered-list-item"', () => {
     expect(computeBlockType("*", "ordered-list-item")).toEqual(
-      "unordered-list-item"
+      "unordered-list-item",
     );
   });
 });
@@ -38,7 +38,7 @@ describe("resetBlockType", () => {
         .getBlocksAsArray();
       expect(blocks.length).toEqual(1);
       blocks.forEach((block) => expect(block.getType()).toEqual(type));
-    }
+    },
   );
 
   it("returns editorState with default unstyled block when no type provided", () => {
@@ -76,7 +76,7 @@ describe("getSelectedLength", () => {
       ContentState.createFromBlockArray(newBlockMap.toArray())
         .set("selectionBefore", content.getSelectionBefore())
         .set("selectionAfter", content.getSelectionAfter()) as ContentState,
-      "insert-fragment"
+      "insert-fragment",
     );
   };
 
@@ -87,7 +87,7 @@ describe("getSelectedLength", () => {
 
   it("returns 0 when the selection is collapsed", () => {
     const editorState = EditorState.createWithContent(
-      ContentState.createFromText("foo")
+      ContentState.createFromText("foo"),
     );
     const { anchorKey, focusKey } = currentSelectionInfo(editorState);
     const newValue = EditorState.acceptSelection(
@@ -99,14 +99,14 @@ describe("getSelectedLength", () => {
         focusKey,
         isBackward: false,
         hasFocus: false,
-      })
+      }),
     );
     expect(getSelectedLength(newValue)).toEqual(0);
   });
 
   it("returns the difference between the anchor and focus offsets if there is only one block of content", () => {
     const editorState = EditorState.createWithContent(
-      ContentState.createFromText("foo")
+      ContentState.createFromText("foo"),
     );
     const { anchorKey, focusKey } = currentSelectionInfo(editorState);
     const newValue = EditorState.acceptSelection(
@@ -118,18 +118,17 @@ describe("getSelectedLength", () => {
         focusKey,
         isBackward: false,
         hasFocus: false,
-      })
+      }),
     );
     expect(getSelectedLength(newValue)).toEqual(1);
   });
 
   it("returns the difference between the anchor and focus offsets plus any initial content", () => {
     const editorState = makeBlock(
-      EditorState.createWithContent(ContentState.createFromText("foo"))
-    );
-    const { anchorKey, focusKey, focusOffset } = currentSelectionInfo(
-      editorState
+      EditorState.createWithContent(ContentState.createFromText("foo")),
     );
+    const { anchorKey, focusKey, focusOffset } =
+      currentSelectionInfo(editorState);
     const newValue = EditorState.acceptSelection(
       editorState,
       editorState.getSelection().merge({
@@ -139,19 +138,18 @@ describe("getSelectedLength", () => {
         focusKey,
         isBackward: false,
         hasFocus: false,
-      })
+      }),
     );
     expect(getSelectedLength(newValue)).toEqual(7);
   });
 
   it("returns the difference between the anchor and focus offsets plus the other blocks", () => {
     let editorState = makeBlock(
-      EditorState.createWithContent(ContentState.createFromText("foo"))
+      EditorState.createWithContent(ContentState.createFromText("foo")),
     );
     editorState = makeBlock(editorState);
-    const { anchorKey, focusKey, focusOffset } = currentSelectionInfo(
-      editorState
-    );
+    const { anchorKey, focusKey, focusOffset } =
+      currentSelectionInfo(editorState);
 
     const newValue = EditorState.acceptSelection(
       editorState,
@@ -162,7 +160,7 @@ describe("getSelectedLength", () => {
         focusKey,
         isBackward: false,
         hasFocus: false,
-      })
+      }),
     );
     expect(getSelectedLength(newValue)).toEqual(11);
   });
diff --git a/src/components/text-editor/__internal__/utils/utils.ts b/src/components/text-editor/__internal__/utils/utils.ts
index e49b378a79..9ae9f0475d 100644
--- a/src/components/text-editor/__internal__/utils/utils.ts
+++ b/src/components/text-editor/__internal__/utils/utils.ts
@@ -29,7 +29,7 @@ Returns default block-level metadata for various block type. Empty object otherw
 */
 const getDefaultBlockData = (
   blockType: BlockType | "unstyled",
-  initialData = {}
+  initialData = {},
 ) => {
   switch (blockType) {
     case ORDERED_LIST:
@@ -46,7 +46,7 @@ Changes the block type of the current block.
 */
 export const resetBlockType = (
   value: EditorState,
-  newType: BlockType | "unstyled" = "unstyled"
+  newType: BlockType | "unstyled" = "unstyled",
 ) => {
   const contentState = value.getCurrentContent();
   const selectionState = value.getSelection();
@@ -71,7 +71,7 @@ export const resetBlockType = (
   return EditorState.push(
     value,
     newContentState as ContentState,
-    "change-block-type"
+    "change-block-type",
   );
 };
 
@@ -108,7 +108,7 @@ export const getSelection = (value: EditorState) => value.getSelection();
 export const getContentInfo = (value: EditorState) => {
   const content = getContent(value);
   const currentBlock = content.getBlockForKey(
-    getSelection(value).getStartKey()
+    getSelection(value).getStartKey(),
   );
   const blockType = currentBlock.getType();
   const blockLength = currentBlock.getLength();
@@ -159,9 +159,8 @@ export const getSelectedLength = (value: EditorState) => {
   let length = 0;
 
   if (!selection.isCollapsed()) {
-    const { startKey, endKey, startOffset, endOffset } = getSelectionInfo(
-      value
-    );
+    const { startKey, endKey, startOffset, endOffset } =
+      getSelectionInfo(value);
     const { content, blockLength } = getContentInfo(value);
     const startLength = blockLength - startOffset;
     const keyAfterEnd = content.getKeyAfter(endKey);
@@ -204,13 +203,13 @@ export function isASCIIChar(str: string) {
 export function replaceText(
   editorState: EditorState,
   text: string,
-  inlineStyle: DraftInlineStyle
+  inlineStyle: DraftInlineStyle,
 ) {
   const contentState = Modifier.replaceText(
     editorState.getCurrentContent(),
     editorState.getSelection(),
     text,
-    inlineStyle
+    inlineStyle,
   );
 
   return EditorState.push(editorState, contentState, "insert-characters");
diff --git a/src/components/text-editor/components.test-pw.tsx b/src/components/text-editor/components.test-pw.tsx
index 75713e6719..adfad18821 100644
--- a/src/components/text-editor/components.test-pw.tsx
+++ b/src/components/text-editor/components.test-pw.tsx
@@ -61,7 +61,7 @@ export const TextEditorCustom = ({
 
 export const TextEditorCustomValidation = (props: Partial<TextEditorProps>) => {
   const [value, setValue] = React.useState(
-    EditorState.createWithContent(ContentState.createFromText("Add content"))
+    EditorState.createWithContent(ContentState.createFromText("Add content")),
   );
   const limit = 16;
   const contentLength = value.getCurrentContent().getPlainText().length;
@@ -92,7 +92,7 @@ export const TextEditorCustomValidation = (props: Partial<TextEditorProps>) => {
 
 export const TextEditorNewValidation = () => {
   const [value, setValue] = useState(
-    EditorState.createWithContent(ContentState.createFromText("Add content"))
+    EditorState.createWithContent(ContentState.createFromText("Add content")),
   );
   const limit = 16;
   const contentLength = value.getCurrentContent().getPlainText().length;
diff --git a/src/components/text-editor/text-editor.component.tsx b/src/components/text-editor/text-editor.component.tsx
index 6041266e3f..5134e2cba8 100644
--- a/src/components/text-editor/text-editor.component.tsx
+++ b/src/components/text-editor/text-editor.component.tsx
@@ -111,7 +111,7 @@ export const TextEditor = React.forwardRef<Editor, TextEditorProps>(
       isOptional,
       ...rest
     }: TextEditorProps,
-    ref
+    ref,
   ) => {
     const { validationRedesignOptIn } = useContext(NewValidationContext);
     const [isFocused, setIsFocused] = useState(false);
@@ -142,7 +142,7 @@ export const TextEditor = React.forwardRef<Editor, TextEditorProps>(
     const [characterCount, visuallyHiddenHintId] = useCharacterCount(
       getContent(value).getPlainText(""),
       characterLimit,
-      isFocused ? "polite" : "off"
+      isFocused ? "polite" : "off",
     );
 
     const combinedAriaDescribedBy = [
@@ -156,7 +156,7 @@ export const TextEditor = React.forwardRef<Editor, TextEditorProps>(
     if (rows && (typeof rows !== "number" || rows < 2)) {
       // eslint-disable-next-line no-console
       console.warn(
-        `Prop rows must be a number value that is 2 or greater to override the min-height of the \`${TextEditor.displayName}\``
+        `Prop rows must be a number value that is 2 or greater to override the min-height of the \`${TextEditor.displayName}\``,
       );
     }
 
@@ -275,12 +275,12 @@ export const TextEditor = React.forwardRef<Editor, TextEditorProps>(
         const newContentState = Modifier.insertText(
           getContent(value),
           value.getSelection(),
-          pastedText.substring(0, characterLimit - contentLength)
+          pastedText.substring(0, characterLimit - contentLength),
         );
         const newState = EditorState.push(
           value,
           newContentState,
-          "insert-fragment"
+          "insert-fragment",
         );
 
         onChange(newState);
@@ -334,14 +334,14 @@ export const TextEditor = React.forwardRef<Editor, TextEditorProps>(
         }
         setIsFocused(focusValue);
       },
-      [editor]
+      [editor],
     );
 
     const handleInlineStyleChange = (
       ev:
         | React.MouseEvent<HTMLButtonElement>
         | React.KeyboardEvent<HTMLButtonElement>,
-      style: InlineStyleType
+      style: InlineStyleType,
     ) => {
       ev.preventDefault();
       setActiveInlines({
@@ -356,7 +356,7 @@ export const TextEditor = React.forwardRef<Editor, TextEditorProps>(
       ev:
         | React.MouseEvent<HTMLButtonElement, MouseEvent>
         | React.KeyboardEvent<HTMLButtonElement>,
-      newBlockType: BlockType
+      newBlockType: BlockType,
     ) => {
       ev.preventDefault();
       handleEditorFocus(true);
@@ -401,7 +401,7 @@ export const TextEditor = React.forwardRef<Editor, TextEditorProps>(
 
     const handlePreviewClose = (
       onClose: (url: string) => void,
-      url?: string
+      url?: string,
     ) => {
       // istanbul ignore else
       if (url) onClose(url);
@@ -415,7 +415,7 @@ export const TextEditor = React.forwardRef<Editor, TextEditorProps>(
     useEffect(() => {
       if (required) {
         const editableElement = wrapper.current?.querySelector(
-          "div[contenteditable='true']"
+          "div[contenteditable='true']",
         );
         editableElement?.setAttribute("required", "");
         editableElement?.setAttribute("aria-required", "true");
@@ -483,13 +483,13 @@ export const TextEditor = React.forwardRef<Editor, TextEditorProps>(
                   handleBeforeInput={
                     handleBeforeInput as (
                       chars: string,
-                      state: EditorState
+                      state: EditorState,
                     ) => DraftHandleValue
                   }
                   handlePastedText={handlePastedText}
                   handleKeyCommand={
                     handleKeyCommand as (
-                      command: EditorCommand
+                      command: EditorCommand,
                     ) => DraftHandleValue
                   }
                   ariaLabelledBy={labelId}
@@ -528,7 +528,7 @@ export const TextEditor = React.forwardRef<Editor, TextEditorProps>(
         </StyledEditorWrapper>
       </EditorContext.Provider>
     );
-  }
+  },
 );
 
 export const TextEditorState = EditorState;
diff --git a/src/components/text-editor/text-editor.pw.tsx b/src/components/text-editor/text-editor.pw.tsx
index ed613a8ce3..0e1206d021 100644
--- a/src/components/text-editor/text-editor.pw.tsx
+++ b/src/components/text-editor/text-editor.pw.tsx
@@ -156,7 +156,7 @@ test.describe("Functionality tests", () => {
 
       await expect(textEditorToolbar(page, buttonType)).toHaveCSS(
         "background-color",
-        "rgb(0, 50, 76)"
+        "rgb(0, 50, 76)",
       );
     });
   });
@@ -178,7 +178,7 @@ test.describe("Functionality tests", () => {
 
       await expect(textEditorToolbar(page, buttonType)).toHaveCSS(
         "background-color",
-        "rgb(0, 50, 76)"
+        "rgb(0, 50, 76)",
       );
     });
   });
@@ -319,18 +319,18 @@ test.describe("Functionality tests", () => {
 
         const stylingButton = getComponent(
           page,
-          "text-editor-toolbar-button"
+          "text-editor-toolbar-button",
         ).nth(buttonNumber);
         await stylingButton.hover();
         await expect(stylingButton).toHaveCSS(
           "background-color",
-          "rgb(204, 214, 219)"
+          "rgb(204, 214, 219)",
         );
         await expect(getDataElementByValue(page, "tooltip")).toHaveText(
-          tooltipText
+          tooltipText,
         );
       });
-    }
+    },
   );
 
   test(`should focus optional buttons by tabbing from the input area`, async ({
@@ -345,11 +345,11 @@ test.describe("Functionality tests", () => {
     await expect(textEditorToolbar(page, "bold")).toBeFocused();
     await page.keyboard.press("Tab");
     await expect(
-      page.getByRole("button").filter({ hasText: "Cancel" })
+      page.getByRole("button").filter({ hasText: "Cancel" }),
     ).toBeFocused();
     await page.keyboard.press("Tab");
     await expect(
-      page.getByRole("button").filter({ hasText: "Save" })
+      page.getByRole("button").filter({ hasText: "Save" }),
     ).toBeFocused();
   });
 
@@ -441,11 +441,11 @@ test.describe("Prop tests", () => {
     await textInput.focus();
     await getComponent(page, "icon").first().hover();
     await expect(getDataElementByValue(page, "tooltip")).toHaveText(
-      "There is an error"
+      "There is an error",
     );
 
     expect(
-      await getStyle(getDataElementByValue(page, "error"), "color", "before")
+      await getStyle(getDataElementByValue(page, "error"), "color", "before"),
     ).toBe(VALIDATION.ERROR);
 
     const iconColor = await page.evaluate(() => {
@@ -455,7 +455,7 @@ test.describe("Prop tests", () => {
       }
       const beforePseudoElement = window.getComputedStyle(
         validationIcon,
-        "::before"
+        "::before",
       );
       return beforePseudoElement ? beforePseudoElement.color : null;
     });
@@ -476,11 +476,11 @@ test.describe("Prop tests", () => {
 
     await getComponent(page, "icon").first().hover();
     await expect(getDataElementByValue(page, "tooltip")).toHaveText(
-      "There is a warning"
+      "There is a warning",
     );
 
     expect(
-      await getStyle(getDataElementByValue(page, "warning"), "color", "before")
+      await getStyle(getDataElementByValue(page, "warning"), "color", "before"),
     ).toBe(VALIDATION.WARNING);
 
     const iconColor = await page.evaluate(() => {
@@ -490,7 +490,7 @@ test.describe("Prop tests", () => {
       }
       const beforePseudoElement = window.getComputedStyle(
         validationIcon,
-        "::before"
+        "::before",
       );
       return beforePseudoElement ? beforePseudoElement.color : null;
     });
@@ -508,11 +508,11 @@ test.describe("Prop tests", () => {
 
     await getComponent(page, "icon").first().hover();
     await expect(getDataElementByValue(page, "tooltip")).toHaveText(
-      "There is an info"
+      "There is an info",
     );
 
     expect(
-      await getStyle(getDataElementByValue(page, "info"), "color", "before")
+      await getStyle(getDataElementByValue(page, "info"), "color", "before"),
     ).toBe(VALIDATION.INFO);
 
     const iconColor = await page.evaluate(() => {
@@ -522,7 +522,7 @@ test.describe("Prop tests", () => {
       }
       const beforePseudoElement = window.getComputedStyle(
         validationIcon,
-        "::before"
+        "::before",
       );
       return beforePseudoElement ? beforePseudoElement.color : null;
     });
@@ -537,13 +537,13 @@ test.describe("Prop tests", () => {
       await mount(
         <CarbonProvider validationRedesignOptIn>
           <TextEditorCustom {...{ [validationType]: validationType }} />
-        </CarbonProvider>
+        </CarbonProvider>,
       );
       await textEditorInput(page).focus();
 
       await expect(textEditorContainer(page).locator("..")).toHaveCSS(
         "box-shadow",
-        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+        "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
       );
     });
   });
@@ -560,17 +560,17 @@ test.describe("Prop tests", () => {
       await mount(
         <CarbonProvider focusRedesignOptOut>
           <TextEditorCustom {...{ [validationType]: validationType }} />
-        </CarbonProvider>
+        </CarbonProvider>,
       );
       await textEditorInput(page).focus();
 
       await expect(textEditorContainer(page).locator("..")).toHaveCSS(
         "outline",
-        "rgb(255, 188, 25) solid 3px"
+        "rgb(255, 188, 25) solid 3px",
       );
       await expect(textEditorContainer(page).locator("..")).toHaveCSS(
         "outline-offset",
-        outlineOffset
+        outlineOffset,
       );
     });
   });
@@ -587,7 +587,7 @@ test.describe("Prop tests", () => {
 
       await expect(textEditorContainer(page)).toHaveCSS(
         "min-height",
-        `${px}px`
+        `${px}px`,
       );
     });
   });
@@ -608,7 +608,7 @@ test.describe("Events tests", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await textEditorInput(page).fill("t");
@@ -626,7 +626,7 @@ test.describe("Events tests", () => {
         onLinkAdded={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await textEditorInput(page).fill("https://carbon.s");
@@ -644,19 +644,19 @@ test.describe("Styling tests", () => {
 
     await expect(textEditorToolbar(page, "bold")).toHaveCSS(
       "border-radius",
-      "8px"
+      "8px",
     );
     await expect(textEditorToolbar(page, "italic")).toHaveCSS(
       "border-radius",
-      "8px"
+      "8px",
     );
     await expect(textEditorToolbar(page, "bullet-list")).toHaveCSS(
       "border-radius",
-      "8px"
+      "8px",
     );
     await expect(textEditorToolbar(page, "number-list")).toHaveCSS(
       "border-radius",
-      "8px"
+      "8px",
     );
   });
 
@@ -671,7 +671,7 @@ test.describe("Styling tests", () => {
     await textEditorInput(page).focus();
     await expect(textEditorContainer(page).locator("..")).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
 
     await textEditorToolbar(page, "bold").focus();
@@ -702,54 +702,54 @@ test.describe("Styling tests", () => {
     await textEditorInput(page).focus();
     await expect(editorParent).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(editorParent).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
 
     await toolbarBold.focus();
     await expect(toolbarBold).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(toolbarBold).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
     await expect(toolbarBold).toHaveCSS("position", "relative");
 
     await toolbarItalic.focus();
     await expect(toolbarItalic).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(toolbarItalic).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
     await expect(toolbarItalic).toHaveCSS("position", "relative");
 
     await toolbarBullet.focus();
     await expect(toolbarBullet).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(toolbarBullet).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
     await expect(toolbarBullet).toHaveCSS("position", "relative");
 
     await toolbarNumber.focus();
     await expect(toolbarNumber).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(toolbarNumber).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
     await expect(toolbarNumber).toHaveCSS("position", "relative");
   });
@@ -1331,7 +1331,7 @@ test.describe("Substitute unit tests", () => {
     await textEditorInput(page).focus();
     // copy text to clipboard
     await page.evaluate(() =>
-      navigator.clipboard.writeText("12345678901234567890")
+      navigator.clipboard.writeText("12345678901234567890"),
     );
 
     if (process.env.CI) {
diff --git a/src/components/text-editor/text-editor.stories.tsx b/src/components/text-editor/text-editor.stories.tsx
index b474cdd38a..f004bc4d25 100644
--- a/src/components/text-editor/text-editor.stories.tsx
+++ b/src/components/text-editor/text-editor.stories.tsx
@@ -47,8 +47,8 @@ Default.storyName = "Default";
 export const WithContent: Story = () => {
   const [value, setValue] = useState(
     EditorState.createWithContent(
-      ContentState.createFromText("Some initial content")
-    )
+      ContentState.createFromText("Some initial content"),
+    ),
   );
   return (
     <Box padding={1}>
@@ -149,7 +149,7 @@ CharacterCounterTranslations.storyName = "Character Counter Translations";
 
 export const WithValidation: Story = () => {
   const [value, setValue] = useState(
-    EditorState.createWithContent(ContentState.createFromText("Add content"))
+    EditorState.createWithContent(ContentState.createFromText("Add content")),
   );
   const limit = 16;
   const contentLength = value.getCurrentContent().getPlainText().length;
@@ -174,7 +174,7 @@ WithValidation.storyName = "With Validation";
 
 export const WithMultilineValidation: Story = () => {
   const [value, setValue] = useState(
-    EditorState.createWithContent(ContentState.createFromText("Add content"))
+    EditorState.createWithContent(ContentState.createFromText("Add content")),
   );
   const limit = 16;
   const contentLength = value.getCurrentContent().getPlainText().length;
@@ -202,7 +202,7 @@ WithMultilineValidation.storyName = "With Multiline Validation";
 
 export const WithNewValidation: Story = () => {
   const [value, setValue] = useState(
-    EditorState.createWithContent(ContentState.createFromText("Add content"))
+    EditorState.createWithContent(ContentState.createFromText("Add content")),
   );
   const limit = 16;
   const contentLength = value.getCurrentContent().getPlainText().length;
@@ -248,13 +248,13 @@ WithCustomRowHeight.storyName = "With Custom Row Height";
 
 export const WithLinkPreviews: Story = () => {
   const [value, setValue] = useState(
-    EditorState.createWithContent(ContentState.createFromText("www.sage.com"))
+    EditorState.createWithContent(ContentState.createFromText("www.sage.com")),
   );
   const firstRender = useRef(false);
   const previews = useRef<React.JSX.Element[]>([]);
   const removeUrl = (reportedUrl: string | undefined) => {
     previews.current = previews.current.filter(
-      (preview) => reportedUrl !== preview.props.url
+      (preview) => reportedUrl !== preview.props.url,
     );
   };
   if (!firstRender.current) {
@@ -266,13 +266,14 @@ export const WithLinkPreviews: Story = () => {
         url="https://www.sage.com"
         description="Captain, why are we out here chasing comets? I'd like to think that I haven't changed those things, sir. Computer, lights up! Not if I weaken first. Damage report! Yesterday I did not know how to eat gagh. The Federation's gone; the Borg is everywhere! We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. Our neural pathways have become accustomed to your sensory input patterns. Wouldn't that bring about chaos?"
         key="key - 1"
-      />
+      />,
     );
   }
   const checkValidDomain = (url: string) => {
     const domainsWhitelist = [".com", ".co.uk", ".org", ".net"];
-    const result = domainsWhitelist.filter((domain) => url.endsWith(domain))
-      .length;
+    const result = domainsWhitelist.filter((domain) =>
+      url.endsWith(domain),
+    ).length;
     return !!result;
   };
   const addUrl = (reportedUrl: string) => {
@@ -316,8 +317,8 @@ WithLinkPreviews.storyName = "With Link Previews";
 export const Required: Story = () => {
   const [value, setValue] = useState(
     EditorState.createWithContent(
-      ContentState.createFromText("Some initial content")
-    )
+      ContentState.createFromText("Some initial content"),
+    ),
   );
   return (
     <Box padding={1}>
@@ -338,8 +339,8 @@ Required.storyName = "Required";
 export const IsOptional = () => {
   const [value, setValue] = useState(
     EditorState.createWithContent(
-      ContentState.createFromText("Some initial content")
-    )
+      ContentState.createFromText("Some initial content"),
+    ),
   );
   return (
     <Box padding={1}>
diff --git a/src/components/text-editor/text-editor.test.tsx b/src/components/text-editor/text-editor.test.tsx
index 293ccb128b..7dcd4d2532 100644
--- a/src/components/text-editor/text-editor.test.tsx
+++ b/src/components/text-editor/text-editor.test.tsx
@@ -28,7 +28,7 @@ jest.mock("../tooltip", () =>
       {children}
       {isVisible ? <div role="tooltip">{message}</div> : null}
     </>
-  ))
+  )),
 );
 
 beforeAll(() => {
@@ -36,7 +36,7 @@ beforeAll(() => {
   window.scrollTo = jest.fn();
   // need to mock isSafari to return false in order to meet coverage
   (isSafari as jest.MockedFunction<typeof isSafari>).mockImplementation(
-    () => false
+    () => false,
   );
 });
 
@@ -49,7 +49,7 @@ const ControlledTextEditor = (props: Partial<TextEditorProps>) => {
   // due to issues with the interaction of draftJS and jsdom, things don't work properly when starting with an empty editor.
   // We therefore start with some text (just a single space) in, and add to this in the tests.
   const [value, setValue] = useState(() =>
-    EditorState.createWithContent(TextEditorContentState.createFromText(" "))
+    EditorState.createWithContent(TextEditorContentState.createFromText(" ")),
   );
   return (
     <TextEditor
@@ -80,7 +80,7 @@ testStyledSystemMarginRTL(
       {...props}
     />
   ),
-  () => screen.getByTestId("text-editor-wrapper")
+  () => screen.getByTestId("text-editor-wrapper"),
 );
 
 test("pressing Tab with the text editor focused moves focus to the first Toolbar button", async () => {
@@ -90,7 +90,7 @@ test("pressing Tab with the text editor focused moves focus to the first Toolbar
       value={TextEditorState.createEmpty()}
       labelText="Text Editor Label"
       onChange={() => {}}
-    />
+    />,
   );
 
   screen.getByRole("textbox", { name: "Text Editor Label" }).focus();
@@ -106,13 +106,13 @@ test("clicking the label sets focus on the text editor", async () => {
       value={TextEditorState.createEmpty()}
       labelText="Text Editor Label"
       onChange={() => {}}
-    />
+    />,
   );
 
   await user.click(screen.getByText("Text Editor Label"));
 
   expect(
-    screen.getByRole("textbox", { name: "Text Editor Label" })
+    screen.getByRole("textbox", { name: "Text Editor Label" }),
   ).toHaveFocus();
 });
 
@@ -123,7 +123,7 @@ test("pressing shift+Tab with the text editor focused does not move focus to the
       value={TextEditorState.createEmpty()}
       labelText="Text Editor Label"
       onChange={() => {}}
-    />
+    />,
   );
 
   screen.getByRole("textbox", { name: "Text Editor Label" }).focus();
@@ -148,12 +148,12 @@ test.each([
     <TextEditor
       value={TextEditorState.createWithContent(
         TextEditorContentState.createFromText(
-          `this is a link with text before - ${url} - and after`
-        )
+          `this is a link with text before - ${url} - and after`,
+        ),
       )}
       labelText="Text Editor Label"
       onChange={() => {}}
-    />
+    />,
   );
 
   const link = screen.getByTestId("link-anchor"); // can't use getByRole("link") as the `a` tag has no href
@@ -176,11 +176,11 @@ test.each([
   render(
     <TextEditor
       value={TextEditorState.createWithContent(
-        TextEditorContentState.createFromText(fullText)
+        TextEditorContentState.createFromText(fullText),
       )}
       labelText="Text Editor Label"
       onChange={() => {}}
-    />
+    />,
   );
 
   expect(screen.queryByTestId("link-anchor")).not.toBeInTheDocument();
@@ -209,14 +209,14 @@ test.each([
 
     await user.type(
       screen.getByRole("textbox", { name: "Text Editor Label" }),
-      `this is a link with text before - ${url} - and after`
+      `this is a link with text before - ${url} - and after`,
     );
 
     const link = screen.getByTestId("link-anchor"); // can't use getByRole("link") as the `a` tag has no href
     expect(link).toBeVisible();
     expect(link).toHaveTextContent(url);
     expect(link).toHaveStyle({ "text-decoration": "underline" });
-  }
+  },
 );
 
 test.each([
@@ -237,7 +237,7 @@ test.each([
     const fullText = `this is not actually a link with text before - ${invalidUrl} - and after`;
     await user.type(
       screen.getByRole("textbox", { name: "Text Editor Label" }),
-      fullText
+      fullText,
     );
 
     expect(screen.queryByTestId("link-anchor")).not.toBeInTheDocument();
@@ -245,7 +245,7 @@ test.each([
     expect(screen.getByText(fullText)).not.toHaveStyle({
       "text-decoration": "underline",
     });
-  }
+  },
 );
 
 test("renders the elements passed in the `previews` prop", () => {
@@ -258,12 +258,12 @@ test("renders the elements passed in the `previews` prop", () => {
         <div>I am a link preview</div>,
         <button type="button">I am a second link preview</button>,
       ]}
-    />
+    />,
   );
 
   expect(screen.getByText("I am a link preview")).toBeVisible();
   expect(
-    screen.getByRole("button", { name: "I am a second link preview" })
+    screen.getByRole("button", { name: "I am a second link preview" }),
   ).toBeVisible();
 });
 
@@ -274,7 +274,7 @@ test("does not render previews that are a simple number or string", () => {
       labelText="Text Editor Label"
       onChange={() => {}}
       previews={[123, "foo", 456]}
-    />
+    />,
   );
 
   expect(screen.queryByText("123")).not.toBeInTheDocument();
@@ -311,11 +311,11 @@ test.each([
 
     await user.type(
       screen.getByRole("textbox", { name: "Text Editor Label" }),
-      `this is a link with text before - ${enteredUrl} - and after`
+      `this is a link with text before - ${enteredUrl} - and after`,
     );
 
     expect(onLinkAdded).toHaveBeenCalledWith(builtUrl);
-  }
+  },
 );
 
 test.each([
@@ -337,11 +337,11 @@ test.each([
     const fullText = `this is not actually a link with text before - ${invalidUrl} - and after`;
     await user.type(
       screen.getByRole("textbox", { name: "Text Editor Label" }),
-      fullText
+      fullText,
     );
 
     expect(onLinkAdded).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test("calls the `onClose` callback of a `LinkPreview` component if clicked", async () => {
@@ -357,11 +357,11 @@ test("calls the `onClose` callback of a `LinkPreview` component if clicked", asy
         <EditorLinkPreview key="2" />,
         <EditorLinkPreview key="3" />,
       ]}
-    />
+    />,
   );
 
   await user.click(
-    screen.getByRole("button", { name: "link preview close button" })
+    screen.getByRole("button", { name: "link preview close button" }),
   );
   expect(onClose).toHaveBeenCalledWith("foo");
   expect(onClose).toHaveBeenCalledTimes(1);
@@ -374,11 +374,11 @@ test("renders as required when the `required` prop is set", () => {
       labelText="Text Editor Label"
       onChange={() => {}}
       required
-    />
+    />,
   );
 
   expect(
-    screen.getByRole("textbox", { name: "Text Editor Label" })
+    screen.getByRole("textbox", { name: "Text Editor Label" }),
   ).toBeRequired();
 });
 
@@ -394,15 +394,15 @@ test.each(["error", "warning"])(
           characterLimit={10}
           {...{ [validationType]: "Validation message" }}
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     expect(
-      screen.getByRole("textbox", { name: "Text Editor Label" })
+      screen.getByRole("textbox", { name: "Text Editor Label" }),
     ).toHaveAccessibleDescription(
-      "Validation message You can enter up to 10 characters"
+      "Validation message You can enter up to 10 characters",
     );
-  }
+  },
 );
 
 test("has the `inputHint` prop together with character limit as accessible description", () => {
@@ -413,13 +413,13 @@ test("has the `inputHint` prop together with character limit as accessible descr
       onChange={() => {}}
       characterLimit={10}
       inputHint="here is a hint"
-    />
+    />,
   );
 
   expect(
-    screen.getByRole("textbox", { name: "Text Editor Label" })
+    screen.getByRole("textbox", { name: "Text Editor Label" }),
   ).toHaveAccessibleDescription(
-    "here is a hint You can enter up to 10 characters"
+    "here is a hint You can enter up to 10 characters",
   );
 });
 
@@ -435,10 +435,10 @@ test("fires a console warning when the `rows` prop is passed as a number less th
       labelText="Text Editor Label"
       onChange={() => {}}
       rows={1}
-    />
+    />,
   );
   expect(consoleSpy).toHaveBeenCalledWith(
-    "Prop rows must be a number value that is 2 or greater to override the min-height of the `EditorWithRowsError`"
+    "Prop rows must be a number value that is 2 or greater to override the min-height of the `EditorWithRowsError`",
   );
   expect(consoleSpy).toHaveBeenCalledTimes(1);
   // clean up mocks
@@ -455,7 +455,7 @@ test("can enter text after clicking the `bold` toolbar button", async () => {
   await user.click(screen.getByRole("button", { name: "bold" }));
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "bold text"
+    "bold text",
   );
   expect(screen.getByText("old textb")).toBeVisible();
 });
@@ -469,7 +469,7 @@ test("can enter text after clicking the `italic` toolbar button", async () => {
   await user.click(screen.getByRole("button", { name: "italic" }));
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "italic text"
+    "italic text",
   );
   expect(screen.getByText("talic texti")).toBeVisible();
 });
@@ -483,7 +483,7 @@ test("can enter text after clicking the `bullet-list` toolbar button", async ()
   await user.click(screen.getByRole("button", { name: "bullet-list" }));
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "list item"
+    "list item",
   );
   expect(screen.getByRole("listitem")).toHaveTextContent("ist iteml");
 });
@@ -497,7 +497,7 @@ test("can enter text after clicking the `number-list` toolbar button", async ()
   await user.click(screen.getByRole("button", { name: "number-list" }));
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "list item"
+    "list item",
   );
   expect(screen.getByRole("listitem")).toHaveTextContent("ist iteml");
 });
@@ -512,11 +512,11 @@ test.each(["error", "warning", "info"])(
         labelText="Text Editor Label"
         onChange={() => {}}
         {...{ [validationType]: "Validation message" }}
-      />
+      />,
     );
 
     expect(screen.getByTestId(`icon-${validationType}`)).toBeVisible();
-  }
+  },
 );
 
 // coverage only - focus styles, both with and without the optout flag, are tested in Playwright
@@ -528,14 +528,14 @@ test("has correct styles when focused and `focusRedesignOptOut` is true", () =>
         labelText="Text Editor Label"
         onChange={() => {}}
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   screen.getByRole("textbox", { name: "Text Editor Label" }).focus();
 
   expect(screen.getByTestId("editor-outline")).toHaveStyleRule(
     "outline",
-    "3px solid var(--colorsSemanticFocus500)"
+    "3px solid var(--colorsSemanticFocus500)",
   );
   expect(screen.getByTestId("editor-outline")).toHaveStyle({
     "outline-offset": "1px",
@@ -552,14 +552,14 @@ test("has correct styles when focused and `focusRedesignOptOut` is true when the
         onChange={() => {}}
         error="error"
       />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
 
   screen.getByRole("textbox", { name: "Text Editor Label" }).focus();
 
   expect(screen.getByTestId("editor-outline")).toHaveStyleRule(
     "outline",
-    "3px solid var(--colorsSemanticFocus500)"
+    "3px solid var(--colorsSemanticFocus500)",
   );
   expect(screen.getByTestId("editor-outline")).toHaveStyle({
     "outline-offset": "2px",
@@ -576,7 +576,7 @@ test("can enter text after using the keyboard shortcut for bold styling", async
   await user.keyboard("{Control>}b{/Control}");
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "bold text"
+    "bold text",
   );
 
   expect(screen.getByText("old textb")).toBeVisible();
@@ -598,7 +598,7 @@ test("double-space is entered when triggering handleBeforeInput", async () => {
       bubbles: true,
       composed: false,
       which: 65, // a
-    }
+    },
   );
   fireEvent.keyPress(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
@@ -607,7 +607,7 @@ test("double-space is entered when triggering handleBeforeInput", async () => {
       bubbles: true,
       composed: false,
       which: 32, // space
-    }
+    },
   );
   fireEvent.keyPress(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
@@ -616,7 +616,7 @@ test("double-space is entered when triggering handleBeforeInput", async () => {
       bubbles: true,
       composed: false,
       which: 32, // space
-    }
+    },
   );
   fireEvent.keyPress(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
@@ -625,14 +625,14 @@ test("double-space is entered when triggering handleBeforeInput", async () => {
       bubbles: true,
       composed: false,
       which: 66, // b
-    }
+    },
   );
   // note: waitFor is to avoid "state update on unmounted component" warning, as fireEvent is not async
   await waitFor(() => {
     // not sure why the text content is not as expected, but this is only for coverage anyway, Playwright tests prove everything works
     // as expected
     expect(
-      screen.getByRole("textbox", { name: "Text Editor Label" })
+      screen.getByRole("textbox", { name: "Text Editor Label" }),
     ).toHaveTextContent("A");
   });
 });
@@ -648,7 +648,7 @@ test("text over the characterLimit is lost when triggering handleBeforeInput", a
       bubbles: true,
       composed: false,
       which: 65, // a
-    }
+    },
   );
   fireEvent.keyPress(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
@@ -657,11 +657,11 @@ test("text over the characterLimit is lost when triggering handleBeforeInput", a
       bubbles: true,
       composed: false,
       which: 65, // a
-    }
+    },
   );
 
   expect(
-    screen.getByRole("textbox", { name: "Text Editor Label" })
+    screen.getByRole("textbox", { name: "Text Editor Label" }),
   ).toHaveTextContent("A");
 });
 
@@ -677,7 +677,7 @@ test("`1.` keyboard shortcut triggers a list block", () => {
         blockType: "unstyled",
         blockLength: 1,
         blockText: "1",
-      } as ReturnType<typeof utils.getContentInfo>)
+      }) as ReturnType<typeof utils.getContentInfo>,
   );
   fireEvent.keyPress(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
@@ -686,7 +686,7 @@ test("`1.` keyboard shortcut triggers a list block", () => {
       bubbles: true,
       composed: false,
       which: 46, // .
-    }
+    },
   );
 
   expect(screen.getAllByRole("listitem")).toHaveLength(1);
@@ -709,7 +709,7 @@ test("typing `1.` when already in a list block does nothing", async () => {
         blockType: "unstyled",
         blockLength: 1,
         blockText: "1",
-      } as ReturnType<typeof utils.getContentInfo>)
+      }) as ReturnType<typeof utils.getContentInfo>,
   );
   fireEvent.keyPress(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
@@ -718,7 +718,7 @@ test("typing `1.` when already in a list block does nothing", async () => {
       bubbles: true,
       composed: false,
       which: 46, // .
-    }
+    },
   );
 
   expect(screen.getAllByRole("listitem")).toHaveLength(1);
@@ -736,7 +736,7 @@ test("typing a `.` at the start of a line does nothing", async () => {
         blockType: "unstyled",
         blockLength: 0,
         blockText: "",
-      } as ReturnType<typeof utils.getContentInfo>)
+      }) as ReturnType<typeof utils.getContentInfo>,
   );
   fireEvent.keyPress(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
@@ -745,7 +745,7 @@ test("typing a `.` at the start of a line does nothing", async () => {
       bubbles: true,
       composed: false,
       which: 46, // .
-    }
+    },
   );
 
   expect(screen.queryByRole("listitem")).not.toBeInTheDocument();
@@ -764,7 +764,7 @@ test("can paste text if it does not exceed the character limit", () => {
     },
   });
   expect(
-    screen.getByRole("textbox", { name: "Text Editor Label" })
+    screen.getByRole("textbox", { name: "Text Editor Label" }),
   ).toHaveTextContent("text");
 });
 
@@ -780,7 +780,7 @@ test("pasted text is truncated if it exceeds the character limit", () => {
     },
   });
   expect(
-    screen.getByRole("textbox", { name: "Text Editor Label" })
+    screen.getByRole("textbox", { name: "Text Editor Label" }),
   ).toHaveTextContent("text is t");
 });
 
@@ -791,12 +791,12 @@ test("content is not affected when the input is blurred", async () => {
 
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "some text"
+    "some text",
   );
   await user.tab();
 
   expect(
-    screen.getByRole("textbox", { name: "Text Editor Label" })
+    screen.getByRole("textbox", { name: "Text Editor Label" }),
   ).toHaveTextContent("some text");
 });
 
@@ -809,7 +809,7 @@ test("can enter text with both block and inline styles", async () => {
   await user.click(screen.getByRole("button", { name: "bullet-list" }));
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "foo"
+    "foo",
   );
   expect(screen.getByRole("listitem")).toHaveTextContent("oof");
 });
@@ -820,10 +820,10 @@ test("allows inline style button to be clicked with text highlighted", async ()
   // the only way to get the component to recognise non-collapsed selection in jsdom apparently is to
   // force the selection in the mock component
   const ControlledTextEditorWithForcedSelection = (
-    props: Partial<TextEditorProps>
+    props: Partial<TextEditorProps>,
   ) => {
     const [value, setValue] = useState(() =>
-      EditorState.createWithContent(TextEditorContentState.createFromText(" "))
+      EditorState.createWithContent(TextEditorContentState.createFromText(" ")),
     );
     const onChange = (val: EditorState) => {
       setValue(val);
@@ -831,7 +831,7 @@ test("allows inline style button to be clicked with text highlighted", async ()
     const selectAll = () => {
       const valueWithSelection = TextEditorState.forceSelection(
         value,
-        value.getSelection().merge({ anchorOffset: 0, focusOffset: 4 })
+        value.getSelection().merge({ anchorOffset: 0, focusOffset: 4 }),
       );
       setValue(valueWithSelection);
     };
@@ -853,13 +853,13 @@ test("allows inline style button to be clicked with text highlighted", async ()
   render(<ControlledTextEditorWithForcedSelection />);
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "some text"
+    "some text",
   );
   await user.click(screen.getByRole("button", { name: "Select All" }));
   await user.click(screen.getByRole("button", { name: "bold" }));
 
   expect(
-    screen.getByRole("textbox", { name: "Text Editor Label" })
+    screen.getByRole("textbox", { name: "Text Editor Label" }),
   ).toHaveTextContent("some text");
 });
 
@@ -880,11 +880,11 @@ test("can enter text after using the keyboard shortcut for bold styling when han
       key: "B",
       keyCode: 66,
       ctrlKey: true,
-    }
+    },
   );
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "bold text"
+    "bold text",
   );
 
   expect(screen.getByText("old textb")).toBeVisible();
@@ -898,14 +898,14 @@ test("pressing Enter in a list block when at the character limit does not start
   await user.click(screen.getByRole("button", { name: "bullet-list" }));
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "foo"
+    "foo",
   );
   fireEvent.keyDown(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
     {
       key: "Enter",
       keyCode: 13,
-    }
+    },
   );
 
   expect(screen.getAllByRole("listitem")).toHaveLength(1);
@@ -920,14 +920,14 @@ test("pressing backspace when at the start of a list item removes the item", asy
   expect(screen.getAllByRole("listitem")).toHaveLength(1);
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "{Backspace}"
+    "{Backspace}",
   ); // to remove the starting space character
   fireEvent.keyDown(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
     {
       key: "Backspace",
       keyCode: 8,
-    }
+    },
   );
 
   expect(screen.queryAllByRole("listitem")).toHaveLength(0);
@@ -941,7 +941,7 @@ test("pressing backspace when not at the start of a list item leaves the item in
   await user.click(screen.getByRole("button", { name: "bullet-list" }));
   await user.type(
     screen.getByRole("textbox", { name: "Text Editor Label" }),
-    "foo"
+    "foo",
   );
   expect(screen.getAllByRole("listitem")).toHaveLength(1);
   fireEvent.keyDown(
@@ -949,7 +949,7 @@ test("pressing backspace when not at the start of a list item leaves the item in
     {
       key: "Backspace",
       keyCode: 8,
-    }
+    },
   );
 
   expect(screen.getAllByRole("listitem")).toHaveLength(1);
diff --git a/src/components/textarea/components.test-pw.tsx b/src/components/textarea/components.test-pw.tsx
index ee6b625072..a0d5bad528 100644
--- a/src/components/textarea/components.test-pw.tsx
+++ b/src/components/textarea/components.test-pw.tsx
@@ -49,7 +49,7 @@ export const TextareaComponent = (props: Partial<TextareaProps>) => {
 
 export const InScrollableContainer = () => {
   const [value, setValue] = useState(
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus in ornare quam viverra orci sagittis eu. Pellentesque nec nam aliquam sem et tortor consequat. Nibh sit amet commodo nulla. Cursus metus aliquam eleifend mi. Mi proin sed libero enim sed faucibus turpis in. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Est lorem ipsum dolor sit amet consectetur. Morbi enim nunc faucibus a pellentesque sit. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Dapibus ultrices in iaculis nunc sed augue lacus viverra. Feugiat vivamus at augue eget arcu dictum varius. Eget velit aliquet sagittis id consectetur purus ut faucibus. Tincidunt arcu non sodales neque sodales. Ipsum faucibus vitae aliquet nec ullamcorper sit. Faucibus a pellentesque sit amet. Amet porttitor eget dolor morbi non. Arcu non odio euismod lacinia at quis risus sed vulputate. Blandit volutpat maecenas volutpat blandit. Purus ut faucibus pulvinar elementum integer enim neque. Viverra mauris in aliquam sem fringilla ut morbi."
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus in ornare quam viverra orci sagittis eu. Pellentesque nec nam aliquam sem et tortor consequat. Nibh sit amet commodo nulla. Cursus metus aliquam eleifend mi. Mi proin sed libero enim sed faucibus turpis in. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Est lorem ipsum dolor sit amet consectetur. Morbi enim nunc faucibus a pellentesque sit. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Dapibus ultrices in iaculis nunc sed augue lacus viverra. Feugiat vivamus at augue eget arcu dictum varius. Eget velit aliquet sagittis id consectetur purus ut faucibus. Tincidunt arcu non sodales neque sodales. Ipsum faucibus vitae aliquet nec ullamcorper sit. Faucibus a pellentesque sit amet. Amet porttitor eget dolor morbi non. Arcu non odio euismod lacinia at quis risus sed vulputate. Blandit volutpat maecenas volutpat blandit. Purus ut faucibus pulvinar elementum integer enim neque. Viverra mauris in aliquam sem fringilla ut morbi.",
   );
   return (
     <Box
diff --git a/src/components/textarea/textarea-test.stories.tsx b/src/components/textarea/textarea-test.stories.tsx
index 4ec0168bc0..ba10ffebb9 100644
--- a/src/components/textarea/textarea-test.stories.tsx
+++ b/src/components/textarea/textarea-test.stories.tsx
@@ -178,7 +178,7 @@ export const InScrollableContainer = () => {
   const [isOpen, setIsOpen] = useState(true);
 
   const [value, setValue] = useState(
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus in ornare quam viverra orci sagittis eu. Pellentesque nec nam aliquam sem et tortor consequat. Nibh sit amet commodo nulla. Cursus metus aliquam eleifend mi. Mi proin sed libero enim sed faucibus turpis in. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Est lorem ipsum dolor sit amet consectetur. Morbi enim nunc faucibus a pellentesque sit. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Dapibus ultrices in iaculis nunc sed augue lacus viverra. Feugiat vivamus at augue eget arcu dictum varius. Eget velit aliquet sagittis id consectetur purus ut faucibus. Tincidunt arcu non sodales neque sodales. Ipsum faucibus vitae aliquet nec ullamcorper sit. Faucibus a pellentesque sit amet. Amet porttitor eget dolor morbi non. Arcu non odio euismod lacinia at quis risus sed vulputate. Blandit volutpat maecenas volutpat blandit. Purus ut faucibus pulvinar elementum integer enim neque. Viverra mauris in aliquam sem fringilla ut morbi. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Nibh mauris cursus mattis molestie a. Turpis nunc eget lorem dolor sed viverra ipsum nunc aliquet. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Consequat mauris nunc congue nisi vitae. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Eu facilisis sed odio morbi quis commodo. Ultrices vitae auctor eu augue ut lectus arcu. Ut tellus elementum sagittis vitae et leo duis ut. Sapien eget mi proin sed libero. Dictum non consectetur a erat nam at. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Pretium fusce id velit ut tortor pretium. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Semper quis lectus nulla at volutpat diam.Velit dignissim sodales ut eu sem integer. In massa tempor nec feugiat nisl pretium fusce id. Eu scelerisque felis imperdiet proin fermentum. Amet purus gravida quis blandit. Feugiat in fermentum posuere urna nec tincidunt praesent. Sit amet mauris commodo quis. Lorem sed risus ultricies tristique nulla aliquet enim tortor. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. A scelerisque purus semper eget duis. Ut faucibus pulvinar elementum integer enim neque. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus. Egestas purus viverra accumsan in nisl nisi. Sed turpis tincidunt id aliquet risus feugiat in ante. In mollis nunc sed id semper risus in hendrerit gravida. Faucibus a pellentesque sit amet porttitor eget dolor morbi. Ornare arcu dui vivamus arcu felis bibendum ut. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Lacinia quis vel eros donec ac odio. Amet volutpat consequat mauris nunc congue nisi vitae. Ultrices dui sapien eget mi proin sed. Adipiscing bibendum est ultricies integer quis auctor elit. Sagittis nisl rhoncus mattis rhoncus urna neque. Integer enim neque volutpat ac tincidunt. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor."
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus in ornare quam viverra orci sagittis eu. Pellentesque nec nam aliquam sem et tortor consequat. Nibh sit amet commodo nulla. Cursus metus aliquam eleifend mi. Mi proin sed libero enim sed faucibus turpis in. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Est lorem ipsum dolor sit amet consectetur. Morbi enim nunc faucibus a pellentesque sit. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Dapibus ultrices in iaculis nunc sed augue lacus viverra. Feugiat vivamus at augue eget arcu dictum varius. Eget velit aliquet sagittis id consectetur purus ut faucibus. Tincidunt arcu non sodales neque sodales. Ipsum faucibus vitae aliquet nec ullamcorper sit. Faucibus a pellentesque sit amet. Amet porttitor eget dolor morbi non. Arcu non odio euismod lacinia at quis risus sed vulputate. Blandit volutpat maecenas volutpat blandit. Purus ut faucibus pulvinar elementum integer enim neque. Viverra mauris in aliquam sem fringilla ut morbi. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Nibh mauris cursus mattis molestie a. Turpis nunc eget lorem dolor sed viverra ipsum nunc aliquet. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Consequat mauris nunc congue nisi vitae. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Eu facilisis sed odio morbi quis commodo. Ultrices vitae auctor eu augue ut lectus arcu. Ut tellus elementum sagittis vitae et leo duis ut. Sapien eget mi proin sed libero. Dictum non consectetur a erat nam at. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Pretium fusce id velit ut tortor pretium. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Semper quis lectus nulla at volutpat diam.Velit dignissim sodales ut eu sem integer. In massa tempor nec feugiat nisl pretium fusce id. Eu scelerisque felis imperdiet proin fermentum. Amet purus gravida quis blandit. Feugiat in fermentum posuere urna nec tincidunt praesent. Sit amet mauris commodo quis. Lorem sed risus ultricies tristique nulla aliquet enim tortor. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. A scelerisque purus semper eget duis. Ut faucibus pulvinar elementum integer enim neque. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus. Egestas purus viverra accumsan in nisl nisi. Sed turpis tincidunt id aliquet risus feugiat in ante. In mollis nunc sed id semper risus in hendrerit gravida. Faucibus a pellentesque sit amet porttitor eget dolor morbi. Ornare arcu dui vivamus arcu felis bibendum ut. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Lacinia quis vel eros donec ac odio. Amet volutpat consequat mauris nunc congue nisi vitae. Ultrices dui sapien eget mi proin sed. Adipiscing bibendum est ultricies integer quis auctor elit. Sagittis nisl rhoncus mattis rhoncus urna neque. Integer enim neque volutpat ac tincidunt. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor.",
   );
 
   return (
diff --git a/src/components/textarea/textarea.component.tsx b/src/components/textarea/textarea.component.tsx
index 96a01f6827..e931cebb8f 100644
--- a/src/components/textarea/textarea.component.tsx
+++ b/src/components/textarea/textarea.component.tsx
@@ -182,7 +182,7 @@ export const Textarea = React.forwardRef(
       minHeight = DEFAULT_MIN_HEIGHT,
       ...rest
     }: TextareaProps,
-    ref: React.ForwardedRef<HTMLTextAreaElement>
+    ref: React.ForwardedRef<HTMLTextAreaElement>,
   ) => {
     const { validationRedesignOptIn } = useContext(NewValidationContext);
 
@@ -190,9 +190,8 @@ export const Textarea = React.forwardRef(
       ? false
       : labelInline;
 
-    const [textareaMinHeight, setTextareaMinHeight] = useState(
-      DEFAULT_MIN_HEIGHT
-    );
+    const [textareaMinHeight, setTextareaMinHeight] =
+      useState(DEFAULT_MIN_HEIGHT);
     const computeLabelPropValues = <T,>(prop: T): undefined | T =>
       validationRedesignOptIn ? undefined : prop;
 
@@ -214,7 +213,7 @@ export const Textarea = React.forwardRef(
           ref(inputElement);
         }
       },
-      [ref]
+      [ref],
     );
 
     const [characterCountAriaLive, setCharacterCountAriaLive] = useState<
@@ -238,7 +237,7 @@ export const Textarea = React.forwardRef(
     if (!deprecateUncontrolledWarnTriggered && !onChange) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
@@ -249,7 +248,7 @@ export const Textarea = React.forwardRef(
     ) {
       // eslint-disable-next-line no-console
       console.warn(
-        "The `borderRadius` prop in `Textarea` component only supports up to 4 values."
+        "The `borderRadius` prop in `Textarea` component only supports up to 4 values.",
       );
       warnBorderRadiusArrayTooLarge = true;
     }
@@ -274,7 +273,7 @@ export const Textarea = React.forwardRef(
         // Set the height so all content is shown
         textarea.style.height = `${Math.max(
           textarea.scrollHeight,
-          textareaMinHeight
+          textareaMinHeight,
         )}px`;
 
         if (scrollElement && scrollPosition) {
@@ -283,25 +282,21 @@ export const Textarea = React.forwardRef(
       }
     }, [textareaMinHeight]);
 
-    const {
-      labelId,
-      validationId,
-      fieldHelpId,
-      ariaDescribedBy,
-    } = useInputAccessibility({
-      id,
-      validationRedesignOptIn,
-      error,
-      warning,
-      info,
-      label,
-      fieldHelp,
-    });
+    const { labelId, validationId, fieldHelpId, ariaDescribedBy } =
+      useInputAccessibility({
+        id,
+        validationRedesignOptIn,
+        error,
+        warning,
+        info,
+        label,
+        fieldHelp,
+      });
 
     const [characterCount, visuallyHiddenHintId] = useCharacterCount(
       value,
       characterLimit,
-      characterCountAriaLive
+      characterCountAriaLive,
     );
 
     useEffect(() => {
@@ -309,7 +304,7 @@ export const Textarea = React.forwardRef(
         setTextareaMinHeight(internalRef?.current?.scrollHeight || 0);
       } else {
         setTextareaMinHeight(
-          minHeight > DEFAULT_MIN_HEIGHT ? minHeight : DEFAULT_MIN_HEIGHT
+          minHeight > DEFAULT_MIN_HEIGHT ? minHeight : DEFAULT_MIN_HEIGHT,
         );
       }
     }, [minHeight, rows]);
@@ -464,7 +459,7 @@ export const Textarea = React.forwardRef(
         </InputBehaviour>
       </TooltipProvider>
     );
-  }
+  },
 );
 
 Textarea.displayName = "Textarea";
diff --git a/src/components/textarea/textarea.pw.tsx b/src/components/textarea/textarea.pw.tsx
index a60893eb4d..44aef93142 100644
--- a/src/components/textarea/textarea.pw.tsx
+++ b/src/components/textarea/textarea.pw.tsx
@@ -68,7 +68,7 @@ test.describe("Props tests for Textarea component", () => {
     await mount(<TextareaComponent data-element={CHARACTERS.STANDARD} />);
 
     await expect(
-      getDataElementByValue(page, CHARACTERS.STANDARD)
+      getDataElementByValue(page, CHARACTERS.STANDARD),
     ).toHaveAttribute("data-element", CHARACTERS.STANDARD);
   });
 
@@ -77,7 +77,7 @@ test.describe("Props tests for Textarea component", () => {
 
     await expect(getDataRoleByValue(page, CHARACTERS.STANDARD)).toHaveAttribute(
       "data-role",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -106,31 +106,31 @@ test.describe("Props tests for Textarea component", () => {
     await mount(<TextareaComponent labelInline />);
 
     const labelElementParent = getDataElementByValue(page, "label").locator(
-      ".."
+      "..",
     );
 
     await expect(labelElementParent).toHaveCSS("justify-content", "flex-end");
   });
 
-  ([
-    ["left", "flex-start"],
-    ["right", "flex-end"],
-  ] as [TextareaProps["labelAlign"], string][]).forEach(
-    ([labelAlign, cssValue]) => {
-      test(`should render with labelAlign prop set to ${labelAlign}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TextareaComponent labelInline labelAlign={labelAlign} />);
+  (
+    [
+      ["left", "flex-start"],
+      ["right", "flex-end"],
+    ] as [TextareaProps["labelAlign"], string][]
+  ).forEach(([labelAlign, cssValue]) => {
+    test(`should render with labelAlign prop set to ${labelAlign}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TextareaComponent labelInline labelAlign={labelAlign} />);
 
-        const labelElementParent = getDataElementByValue(page, "label").locator(
-          ".."
-        );
+      const labelElementParent = getDataElementByValue(page, "label").locator(
+        "..",
+      );
 
-        await expect(labelElementParent).toHaveCSS("justify-content", cssValue);
-      });
-    }
-  );
+      await expect(labelElementParent).toHaveCSS("justify-content", cssValue);
+    });
+  });
 
   testData.forEach((labelHelp) => {
     test(`should render with labelHelp prop set to ${labelHelp}`, async ({
@@ -147,62 +147,64 @@ test.describe("Props tests for Textarea component", () => {
     });
   });
 
-  ([
-    [1, "8px"],
-    [2, "16px"],
-  ] as [TextareaProps["labelSpacing"], string][]).forEach(
-    ([spacing, padding]) => {
-      test(`should render with labelSpacing prop set to ${spacing}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TextareaComponent labelInline labelSpacing={spacing} />);
+  (
+    [
+      [1, "8px"],
+      [2, "16px"],
+    ] as [TextareaProps["labelSpacing"], string][]
+  ).forEach(([spacing, padding]) => {
+    test(`should render with labelSpacing prop set to ${spacing}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TextareaComponent labelInline labelSpacing={spacing} />);
 
-        const labelElementParent = getDataElementByValue(page, "label").locator(
-          ".."
-        );
+      const labelElementParent = getDataElementByValue(page, "label").locator(
+        "..",
+      );
 
-        await expect(labelElementParent).toHaveCSS("padding-right", padding);
-      });
-    }
-  );
+      await expect(labelElementParent).toHaveCSS("padding-right", padding);
+    });
+  });
 
-  ([
-    [10, 90, 135, 1229],
-    [30, 70, 409, 956],
-    [80, 20, 1092, 273],
-  ] as [
-    TextareaProps["labelWidth"],
-    TextareaProps["inputWidth"],
-    number,
-    number
-  ][]).forEach(([label, input, labelRatio, inputRatio]) => {
+  (
+    [
+      [10, 90, 135, 1229],
+      [30, 70, 409, 956],
+      [80, 20, 1092, 273],
+    ] as [
+      TextareaProps["labelWidth"],
+      TextareaProps["inputWidth"],
+      number,
+      number,
+    ][]
+  ).forEach(([label, input, labelRatio, inputRatio]) => {
     test(`should use ${label} as labelWidth, ${input} as inputWidth and render it with correct label and input width ratios`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <TextareaComponent labelInline labelWidth={label} inputWidth={input} />
+        <TextareaComponent labelInline labelWidth={label} inputWidth={input} />,
       );
 
       const labelElementParent = getDataElementByValue(page, "label").locator(
-        ".."
+        "..",
       );
 
       await assertCssValueIsApproximately(
         labelElementParent,
         "width",
-        labelRatio
+        labelRatio,
       );
 
       const inputElementParent = getDataElementByValue(page, "input").locator(
-        ".."
+        "..",
       );
 
       await assertCssValueIsApproximately(
         inputElementParent,
         "width",
-        inputRatio
+        inputRatio,
       );
     });
   });
@@ -213,10 +215,12 @@ test.describe("Props tests for Textarea component", () => {
     await verifyRequiredAsteriskForLabel(page);
   });
 
-  ([
-    [11, 11, "rgba(0, 0, 0, 0.55)"],
-    [11, 10, "rgb(203, 55, 74)"],
-  ] as const).forEach(([charactersUsed, limit, color]) => {
+  (
+    [
+      [11, 11, "rgba(0, 0, 0, 0.55)"],
+      [11, 10, "rgb(203, 55, 74)"],
+    ] as const
+  ).forEach(([charactersUsed, limit, color]) => {
     test(`should input ${charactersUsed} characters and warn if over character limit of ${limit} in Textarea`, async ({
       mount,
       page,
@@ -235,7 +239,7 @@ test.describe("Props tests for Textarea component", () => {
           charactersUsed - limit
             ? `${charactersUsed - limit} ${overCharacters} too many`
             : `${charactersUsed - limit} ${underCharacters} left`
-        }`
+        }`,
       );
 
       await expect(characterCount(page)).toHaveCSS("color", color);
@@ -245,7 +249,7 @@ test.describe("Props tests for Textarea component", () => {
           charactersUsed - limit
             ? `${charactersUsed - limit} ${overCharacters} too many`
             : `${charactersUsed - limit} ${underCharacters} left`
-        }`
+        }`,
       );
     });
   });
@@ -266,7 +270,7 @@ test.describe("Props tests for Textarea component", () => {
     await mount(<TextareaComponent inputHint="" />);
 
     await expect(
-      getDataElementByValue(page, "input-hint")
+      getDataElementByValue(page, "input-hint"),
     ).not.toBeInViewport();
   });
 
@@ -291,9 +295,8 @@ test.describe("Props tests for Textarea component", () => {
   }) => {
     await mount(<TextareaComponent characterLimit={5} />);
 
-    const visuallyHiddenCharacterCountElement = visuallyHiddenCharacterCount(
-      page
-    );
+    const visuallyHiddenCharacterCountElement =
+      visuallyHiddenCharacterCount(page);
 
     await expect(visuallyHiddenCharacterCountElement).toBeVisible();
   });
@@ -304,9 +307,8 @@ test.describe("Props tests for Textarea component", () => {
   }) => {
     await mount(<TextareaComponent characterLimit={undefined} />);
 
-    const visuallyHiddenCharacterCountElement = visuallyHiddenCharacterCount(
-      page
-    );
+    const visuallyHiddenCharacterCountElement =
+      visuallyHiddenCharacterCount(page);
 
     await expect(visuallyHiddenCharacterCountElement).not.toBeVisible();
   });
@@ -366,7 +368,7 @@ test.describe("Props tests for Textarea component", () => {
 
     await expect(textareaChildren(page)).toHaveAttribute(
       "name",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -396,7 +398,7 @@ test.describe("Props tests for Textarea component", () => {
 
       await expect(textareaChildren(page)).toHaveAttribute(
         "placeholder",
-        placeholder
+        placeholder,
       );
     });
   });
@@ -416,7 +418,7 @@ test.describe("Props tests for Textarea component", () => {
 
     await expect(textarea(page)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
   });
 
@@ -460,7 +462,7 @@ test.describe("Props tests for Textarea component", () => {
           {...{
             [type]: "Message",
           }}
-        />
+        />,
       );
 
       const textareaIcon = textarea(page).locator(ICON);
@@ -482,7 +484,7 @@ test.describe("Props tests for Textarea component", () => {
           {...{
             [type]: "Message",
           }}
-        />
+        />,
       );
 
       const labelParentIcon = getDataElementByValue(page, "label")
@@ -493,14 +495,16 @@ test.describe("Props tests for Textarea component", () => {
     });
   });
 
-  ([
-    [VALIDATION.ERROR, "error", true],
-    [VALIDATION.WARNING, "warning", true],
-    [VALIDATION.INFO, "info", true],
-    ["rgb(102, 132, 148)", "error", false],
-    ["rgb(102, 132, 148)", "warning", false],
-    ["rgb(102, 132, 148)", "info", false],
-  ] as const).forEach(([borderColor, type, bool]) => {
+  (
+    [
+      [VALIDATION.ERROR, "error", true],
+      [VALIDATION.WARNING, "warning", true],
+      [VALIDATION.INFO, "info", true],
+      ["rgb(102, 132, 148)", "error", false],
+      ["rgb(102, 132, 148)", "warning", false],
+      ["rgb(102, 132, 148)", "info", false],
+    ] as const
+  ).forEach(([borderColor, type, bool]) => {
     test(`should verify component input border colour is ${borderColor} when validation is ${type} and boolean prop is ${bool}`, async ({
       mount,
       page,
@@ -512,21 +516,23 @@ test.describe("Props tests for Textarea component", () => {
           {...{
             [type]: bool,
           }}
-        />
+        />,
       );
 
       await expect(textarea(page)).toHaveCSS(
         "border-bottom-color",
-        borderColor
+        borderColor,
       );
     });
   });
 
-  ([
-    ["flex", 399],
-    ["flex", 400],
-    ["block", 401],
-  ] as const).forEach(([displayValue, breakpoint]) => {
+  (
+    [
+      ["flex", 399],
+      ["flex", 400],
+      ["block", 401],
+    ] as const
+  ).forEach(([displayValue, breakpoint]) => {
     test(`should check label alignment is ${displayValue} with adaptiveLabelBreakpoint ${breakpoint} and viewport 400`, async ({
       mount,
       page,
@@ -581,7 +587,7 @@ test.describe("Props tests for Textarea component", () => {
             error={CHARACTERS.STANDARD}
             tooltipPosition={position}
           />
-        </Box>
+        </Box>,
       );
 
       const errorIcon = getDataElementByValue(page, "error");
@@ -592,7 +598,7 @@ test.describe("Props tests for Textarea component", () => {
       await expect(tooltipPreviewElement).toHaveText(CHARACTERS.STANDARD);
       await expect(tooltipPreviewElement).toHaveAttribute(
         "data-placement",
-        position
+        position,
       );
     });
   });
@@ -602,12 +608,12 @@ test.describe("Props tests for Textarea component", () => {
       <TextareaComponent
         labelHelp="field help"
         helpAriaLabel={CHARACTERS.STANDARD}
-      />
+      />,
     );
 
     await expect(getComponent(page, "help")).toHaveAttribute(
       "aria-label",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -656,15 +662,17 @@ test.describe("Props tests for Textarea component", () => {
 
       await expect(textareaChildren(page)).toHaveAttribute(
         "rows",
-        String(rows)
+        String(rows),
       );
     });
   });
 
-  ([
-    [true, 92],
-    [false, 64],
-  ] as const).forEach(([expandableValue, height]) => {
+  (
+    [
+      [true, 92],
+      [false, 64],
+    ] as const
+  ).forEach(([expandableValue, height]) => {
     test(`should verify is displayed with expandable set to ${expandableValue}`, async ({
       mount,
       page,
@@ -725,7 +733,7 @@ test.describe("Event tests for Textarea component", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const textareaChildrenElement = textareaChildren(page);
@@ -744,7 +752,7 @@ test.describe("Event tests for Textarea component", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const textareaChildrenElement = textareaChildren(page);
@@ -764,7 +772,7 @@ test.describe("Event tests for Textarea component", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const textareaChildrenElement = textareaChildren(page);
@@ -783,7 +791,7 @@ test.describe("Event tests for Textarea component", () => {
         onFocus={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const textareaChildrenElement = textareaChildren(page);
@@ -802,7 +810,7 @@ test.describe("Event tests for Textarea component", () => {
         onMouseDown={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const textareaChildrenElement = textareaChildren(page);
@@ -824,7 +832,7 @@ test.describe("Event tests for Textarea component", () => {
           onKeyDown={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       const textareaChildrenElement = textareaChildren(page);
@@ -1036,7 +1044,7 @@ test("should have the expected custom border radius styling when an array is pas
   page,
 }) => {
   await mount(
-    <TextareaComponent borderRadius={["borderRadius400", "borderRadius010"]} />
+    <TextareaComponent borderRadius={["borderRadius400", "borderRadius010"]} />,
   );
 
   const inputElementParent = getElement(page, "input").locator("..");
@@ -1054,7 +1062,7 @@ test("should not have borders when hideBorders prop is passed", async ({
 
   await expect(inputElementParent).toHaveCSS(
     "border",
-    "1px solid rgba(0, 0, 0, 0)"
+    "1px solid rgba(0, 0, 0, 0)",
   );
 });
 
@@ -1072,13 +1080,13 @@ test("typing in the textarea should not change scroll position of the parent con
   await textareaElement.press("ArrowRight");
 
   const initialScrollPosition = await scrollableBox.evaluate(
-    (element) => element.scrollTop
+    (element) => element.scrollTop,
   );
 
   await textareaElement.press("a");
 
   const finalScrollPosition = await scrollableBox.evaluate(
-    (element) => element.scrollTop
+    (element) => element.scrollTop,
   );
   expect(finalScrollPosition).toBeCloseTo(initialScrollPosition);
 });
diff --git a/src/components/textarea/textarea.test.tsx b/src/components/textarea/textarea.test.tsx
index 90f7ee30ce..6e6ec3fa54 100644
--- a/src/components/textarea/textarea.test.tsx
+++ b/src/components/textarea/textarea.test.tsx
@@ -23,7 +23,7 @@ test("should display deprecation warning once when rendered as uncontrolled", ()
   render(<Textarea name="my-textarea" defaultValue="test" />);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
 
   expect(loggerSpy).toHaveBeenCalledTimes(1);
@@ -55,7 +55,7 @@ test("should not render a placeholder if disabled", () => {
 
 testStyledSystemMarginRTL(
   (props) => <Textarea data-role="textarea-wrapper" {...props} />,
-  () => screen.getByTestId("textarea-wrapper")
+  () => screen.getByTestId("textarea-wrapper"),
 );
 
 test("should display the correct value when the value prop is set", () => {
@@ -84,9 +84,9 @@ test.each([
     expect(screen.getByTestId("icon-test")).toHaveStyleRule(
       "padding-right",
       "var(--spacing500)",
-      { modifier: `& ${StyledInput}` }
+      { modifier: `& ${StyledInput}` },
     );
-  }
+  },
 );
 
 test("should have default min-height of 64px if no minHeight is specified", () => {
@@ -120,9 +120,9 @@ test.each([
 
     expect(screen.getByRole("textbox")).toHaveAttribute(
       "enterkeyhint",
-      keyHint
+      keyHint,
     );
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -132,7 +132,7 @@ test.each(["error", "warning", "info"])(
     const inputPresentationContainer = screen.getByRole("presentation");
     const validationIcon = screen.getByTestId(`icon-${validationProp}`);
     expect(inputPresentationContainer).toContainElement(validationIcon);
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -147,15 +147,15 @@ test.each(["error", "warning", "info"])(
           [validationProp]: "Message",
           tooltipPosition: "bottom",
         }}
-      />
+      />,
     );
 
     expect(useFloatingSpy).toHaveBeenCalledWith(
-      expect.objectContaining({ placement: "bottom" })
+      expect.objectContaining({ placement: "bottom" }),
     );
 
     useFloatingSpy.mockRestore();
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -168,12 +168,12 @@ test.each(["error", "warning", "info"])(
           [validationProp]: "Message",
           validationOnLabel: true,
         }}
-      />
+      />,
     );
     const labelContainer = screen.getByTestId("label-container");
     const validationIcon = screen.getByTestId(`icon-${validationProp}`);
     expect(labelContainer).toContainElement(validationIcon);
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -189,15 +189,15 @@ test.each(["error", "warning", "info"])(
           tooltipPosition: "bottom",
           validationOnLabel: true,
         }}
-      />
+      />,
     );
 
     expect(useFloatingSpy).toHaveBeenCalledWith(
-      expect.objectContaining({ placement: "bottom" })
+      expect.objectContaining({ placement: "bottom" }),
     );
 
     useFloatingSpy.mockRestore();
-  }
+  },
 );
 
 test.each(["error", "warning", "info"])(
@@ -205,9 +205,9 @@ test.each(["error", "warning", "info"])(
   (validationProp) => {
     render(<Textarea {...{ [validationProp]: true }} />);
     expect(
-      screen.queryByTestId(`icon-${validationProp}`)
+      screen.queryByTestId(`icon-${validationProp}`),
     ).not.toBeInTheDocument();
-  }
+  },
 );
 
 test("should set the aria-label on the Help component to the value of the helpAriaLabel prop", () => {
@@ -231,7 +231,7 @@ test.each(["info", "warning", "error"])(
     textarea.focus();
 
     expect(textarea).toHaveAccessibleDescription("test");
-  }
+  },
 );
 
 test.each(["info", "warning", "error"])(
@@ -242,7 +242,7 @@ test.each(["info", "warning", "error"])(
     textarea.focus();
 
     expect(textarea).toHaveAccessibleDescription("test");
-  }
+  },
 );
 
 test("renders the hint when inputHint prop is provided", () => {
@@ -259,7 +259,7 @@ test("inputHint should have priority over labelHelp when both are passed", () =>
   render(
     <CarbonProvider validationRedesignOptIn>
       <Textarea labelHelp="labelHelp" inputHint="inputHint" error="foo" />
-    </CarbonProvider>
+    </CarbonProvider>,
   );
   expect(screen.getByText("inputHint")).toBeInTheDocument();
   expect(screen.queryByText("labelHelp")).not.toBeInTheDocument();
@@ -286,26 +286,30 @@ test.each(["info", "warning", "error"])(
         label="bar"
         fieldHelp="baz"
         {...{ [validationType]: "test" }}
-      />
+      />,
     );
     const textarea = screen.getByRole("textbox");
     textarea.focus();
 
     expect(textarea).toHaveAccessibleDescription("baz test");
-  }
+  },
 );
 
 test.each(["info", "warning", "error"])(
   "with id prop not provided, fieldHelp present, %s prop set as a string and the textarea element focused, the fieldHelp and the validation tooltip are combined to provide an accessible description for the textarea element",
   (validationType) => {
     render(
-      <Textarea label="bar" fieldHelp="baz" {...{ [validationType]: "test" }} />
+      <Textarea
+        label="bar"
+        fieldHelp="baz"
+        {...{ [validationType]: "test" }}
+      />,
     );
     const textarea = screen.getByRole("textbox");
     textarea.focus();
 
     expect(textarea).toHaveAccessibleDescription("baz test");
-  }
+  },
 );
 
 describe(`when the characterLimit prop is passed`, () => {
@@ -316,7 +320,7 @@ describe(`when the characterLimit prop is passed`, () => {
     expect(
       screen.getByText("1 character too many", {
         selector: '[aria-hidden="true"]',
-      })
+      }),
     ).toBeInTheDocument();
   });
 
@@ -327,7 +331,7 @@ describe(`when the characterLimit prop is passed`, () => {
     expect(
       screen.getByText("2 characters too many", {
         selector: '[aria-hidden="true"]',
-      })
+      }),
     ).toBeInTheDocument();
   });
 
@@ -338,7 +342,7 @@ describe(`when the characterLimit prop is passed`, () => {
     expect(
       screen.getByText("0 characters left", {
         selector: '[aria-hidden="true"]',
-      })
+      }),
     ).toBeInTheDocument();
   });
 
@@ -347,7 +351,9 @@ describe(`when the characterLimit prop is passed`, () => {
     render(<Textarea value={valueString} characterLimit={4} />);
 
     expect(
-      screen.getByText("1 character left", { selector: '[aria-hidden="true"]' })
+      screen.getByText("1 character left", {
+        selector: '[aria-hidden="true"]',
+      }),
     ).toBeInTheDocument();
   });
 
@@ -358,7 +364,7 @@ describe(`when the characterLimit prop is passed`, () => {
     expect(
       screen.getByText("2 characters left", {
         selector: '[aria-hidden="true"]',
-      })
+      }),
     ).toBeInTheDocument();
   });
 
@@ -367,7 +373,7 @@ describe(`when the characterLimit prop is passed`, () => {
     expect(
       screen.getByText("You can enter up to 73 characters", {
         selector: '[data-element="visually-hidden-hint"]',
-      })
+      }),
     ).toHaveAttribute("id", mockedGuid);
   });
 
@@ -441,7 +447,7 @@ test("renders a label that is linked to the TextArea, if the label prop is promo
   render(<Textarea label="This is a Text Area" />);
 
   expect(screen.getByLabelText("This is a Text Area")).toBe(
-    screen.getByRole("textbox")
+    screen.getByRole("textbox"),
   );
 });
 
@@ -480,14 +486,14 @@ test("when an expandable textarea unmounts, the event listener is removed from t
       expandable
       rows={10}
       characterLimit={100}
-    />
+    />,
   );
 
   unmount();
 
   expect(removeEventListenerSpy).toHaveBeenCalledWith(
     "resize",
-    expect.any(Function)
+    expect.any(Function),
   );
 
   removeEventListenerSpy.mockRestore();
@@ -513,7 +519,7 @@ describe("when a parent container scrolls vertically", () => {
             rows={10}
           />
         </div>
-      </div>
+      </div>,
     );
 
     const scrollWrapper = screen.getByTestId("scroll-wrapper");
@@ -539,14 +545,14 @@ test("when textarea cannot be expanded, it does not remove any event listener fr
       onChange={jest.fn()}
       label="Label"
       rows={10}
-    />
+    />,
   );
 
   unmount();
 
   expect(removeEventListenerSpy).not.toHaveBeenCalledWith(
     "resize",
-    expect.any(Function)
+    expect.any(Function),
   );
 
   removeEventListenerSpy.mockRestore();
@@ -564,11 +570,11 @@ describe("when rendered with new validations", () => {
       render(
         <CarbonProvider validationRedesignOptIn>
           <Textarea {...{ [validationType]: "bar" }} />
-        </CarbonProvider>
+        </CarbonProvider>,
       );
 
       expect(screen.getByRole("textbox")).toHaveAccessibleDescription("bar");
-    }
+    },
   );
 
   it("ignores the labelInline and related styling props", () => {
@@ -581,7 +587,7 @@ describe("when rendered with new validations", () => {
           labelWidth={100}
           labelSpacing={1}
         />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
     const labelContainer = screen.getByTestId("label-container");
@@ -597,7 +603,7 @@ describe("when rendered with new validations", () => {
     render(
       <CarbonProvider validationRedesignOptIn>
         <Textarea labelHelp="Example hint text" />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     const hintText = screen.getByText("Example hint text");
     expect(hintText).toBeInTheDocument();
@@ -637,7 +643,7 @@ test("renders with the expected default border radius styling", () => {
   render(<Textarea />);
   expect(screen.getByRole("textbox")).toHaveStyleRule(
     "border-radius",
-    "var(--borderRadius050)"
+    "var(--borderRadius050)",
   );
 });
 
@@ -645,7 +651,7 @@ test("renders with the expected custom border radius styling", () => {
   render(<Textarea borderRadius="borderRadius200" />);
   expect(screen.getByRole("textbox")).toHaveStyleRule(
     "border-radius",
-    "var(--borderRadius200)"
+    "var(--borderRadius200)",
   );
 });
 
@@ -658,11 +664,11 @@ test("renders with the expected custom border radius styling as an array", () =>
         "borderRadius200",
         "borderRadius400",
       ]}
-    />
+    />,
   );
   expect(screen.getByRole("textbox")).toHaveStyleRule(
     "border-radius",
-    "var(--borderRadius050) var(--borderRadius100) var(--borderRadius200) var(--borderRadius400)"
+    "var(--borderRadius050) var(--borderRadius100) var(--borderRadius200) var(--borderRadius400)",
   );
 });
 
@@ -679,11 +685,11 @@ test("fires a console warning if more than four border-radius values are passed"
         "borderRadius400",
         "borderRadius050",
       ]}
-    />
+    />,
   );
 
   expect(consoleSpy).toHaveBeenCalledWith(
-    "The `borderRadius` prop in `Textarea` component only supports up to 4 values."
+    "The `borderRadius` prop in `Textarea` component only supports up to 4 values.",
   );
 
   consoleSpy.mockRestore();
diff --git a/src/components/textbox/components.test-pw.tsx b/src/components/textbox/components.test-pw.tsx
index 04b12c17be..1fea4c19b2 100644
--- a/src/components/textbox/components.test-pw.tsx
+++ b/src/components/textbox/components.test-pw.tsx
@@ -200,7 +200,7 @@ export const TextboxNewDesignsValidation = () => {
                 {...{ [validationType]: "Message" }}
               />
             </div>
-          ))
+          )),
         )}
       </CarbonProvider>
     </Box>
diff --git a/src/components/textbox/textbox-test.stories.tsx b/src/components/textbox/textbox-test.stories.tsx
index 1d37d57808..2d48e62d77 100644
--- a/src/components/textbox/textbox-test.stories.tsx
+++ b/src/components/textbox/textbox-test.stories.tsx
@@ -7,7 +7,7 @@ import { ICONS } from "../icon/icon-config";
 export const getCommonTextboxArgs = (
   isNewValidation = false,
   autoFocusDefault = false,
-  disabledDefault = false
+  disabledDefault = false,
 ) => {
   return {
     disabled: disabledDefault,
@@ -43,7 +43,7 @@ export interface CommonTextboxArgs {
 }
 
 export const getCommonTextboxArgsWithSpecialCaracters = (
-  args: CommonTextboxArgs
+  args: CommonTextboxArgs,
 ) => {
   const { prefix, fieldHelp, label, labelHelp, placeholder } = args;
   return {
diff --git a/src/components/textbox/textbox.component.tsx b/src/components/textbox/textbox.component.tsx
index 3eadd8aed5..152a7c760c 100644
--- a/src/components/textbox/textbox.component.tsx
+++ b/src/components/textbox/textbox.component.tsx
@@ -65,7 +65,7 @@ export interface CommonTextboxProps
   inputIcon?: IconType;
   /** Optional handler for click event on Textbox icon */
   iconOnClick?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
   ) => void;
   /** Optional handler for mouse down event on Textbox icon */
   iconOnMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
@@ -102,7 +102,7 @@ export interface CommonTextboxProps
   onChangeDeferred?: () => void;
   /** Specify a callback triggered on click */
   onClick?: (
-    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
   ) => void;
   /** Event handler for the focus event */
   onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
@@ -192,7 +192,7 @@ export const Textbox = React.forwardRef(
       helpAriaLabel,
       ...props
     }: TextboxProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     const characterCountValue = typeof value === "string" ? value : "";
 
@@ -219,7 +219,7 @@ export const Textbox = React.forwardRef(
     const [characterCount, visuallyHiddenHintId] = useCharacterCount(
       characterCountValue,
       characterLimit,
-      characterCountAriaLive
+      characterCountAriaLive,
     );
     const { validationRedesignOptIn } = useContext(NewValidationContext);
     const { disableErrorBorder } = useContext(NumeralDateContext);
@@ -229,24 +229,20 @@ export const Textbox = React.forwardRef(
     if (!deprecateUncontrolledWarnTriggered && !onChange) {
       deprecateUncontrolledWarnTriggered = true;
       Logger.deprecate(
-        "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+        "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
       );
     }
 
-    const {
-      labelId,
-      validationId,
-      fieldHelpId,
-      ariaDescribedBy,
-    } = useInputAccessibility({
-      id: uniqueId,
-      validationRedesignOptIn,
-      error,
-      warning,
-      info,
-      label,
-      fieldHelp,
-    });
+    const { labelId, validationId, fieldHelpId, ariaDescribedBy } =
+      useInputAccessibility({
+        id: uniqueId,
+        validationRedesignOptIn,
+        error,
+        warning,
+        info,
+        label,
+        fieldHelp,
+      });
 
     const hintId = useRef(guid());
     const inputHintId = inputHint ? hintId.current : undefined;
@@ -387,7 +383,7 @@ export const Textbox = React.forwardRef(
         </InputBehaviour>
       </TooltipProvider>
     );
-  }
+  },
 );
 
 Textbox.displayName = "Textbox";
diff --git a/src/components/textbox/textbox.pw.tsx b/src/components/textbox/textbox.pw.tsx
index 9af1901a42..a56bd78212 100644
--- a/src/components/textbox/textbox.pw.tsx
+++ b/src/components/textbox/textbox.pw.tsx
@@ -52,29 +52,29 @@ const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 const keysToTrigger = ["Enter", "Space"] as const;
 
 test.describe("Prop checks for Textbox component", () => {
-  ([
-    [SIZE.SMALL, "32px", "--sizing400"],
-    [SIZE.MEDIUM, "40px", "--sizing500"],
-    [SIZE.LARGE, "48px", "--sizing600"],
-  ] as [TextboxProps["size"], string, string][]).forEach(
-    ([size, height, token]) => {
-      test(`should render with ${size} size and ${height} height when size prop is ${size}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TextboxComponent size={size} />);
+  (
+    [
+      [SIZE.SMALL, "32px", "--sizing400"],
+      [SIZE.MEDIUM, "40px", "--sizing500"],
+      [SIZE.LARGE, "48px", "--sizing600"],
+    ] as [TextboxProps["size"], string, string][]
+  ).forEach(([size, height, token]) => {
+    test(`should render with ${size} size and ${height} height when size prop is ${size}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TextboxComponent size={size} />);
 
-        await expect(textbox(page)).toHaveCSS("min-height", height);
+      await expect(textbox(page)).toHaveCSS("min-height", height);
 
-        const tokenValues = await getDesignTokensByCssProperty(
-          page,
-          textbox(page),
-          "min-height"
-        );
-        expect(tokenValues[0]).toBe(token);
-      });
-    }
-  );
+      const tokenValues = await getDesignTokensByCssProperty(
+        page,
+        textbox(page),
+        "min-height",
+      );
+      expect(tokenValues[0]).toBe(token);
+    });
+  });
 
   [
     ["background", "--colorsUtilityYang100"],
@@ -89,7 +89,7 @@ test.describe("Prop checks for Textbox component", () => {
       const tokenValues = await getDesignTokensByCssProperty(
         page,
         textbox(page),
-        cssProp
+        cssProp,
       );
       expect(tokenValues[0]).toBe(token);
     });
@@ -108,7 +108,7 @@ test.describe("Prop checks for Textbox component", () => {
     await mount(<TextboxComponent data-component={CHARACTERS.STANDARD} />);
 
     await expect(
-      getDataComponentByValue(page, CHARACTERS.STANDARD)
+      getDataComponentByValue(page, CHARACTERS.STANDARD),
     ).toBeVisible();
   });
 
@@ -116,7 +116,7 @@ test.describe("Prop checks for Textbox component", () => {
     await mount(<TextboxComponent data-element={CHARACTERS.STANDARD} />);
 
     await expect(
-      getDataElementByValue(page, CHARACTERS.STANDARD)
+      getDataElementByValue(page, CHARACTERS.STANDARD),
     ).toBeVisible();
   });
 
@@ -152,25 +152,25 @@ test.describe("Prop checks for Textbox component", () => {
     await expect(labelParent).toHaveCSS("justify-content", "flex-end");
   });
 
-  ([
-    ["left", "start"],
-    ["right", "end"],
-  ] as [TextboxProps["labelAlign"], string][]).forEach(
-    ([labelAlign, cssValue]) => {
-      test(`should render with ${labelAlign} labelAlign prop`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TextboxComponent labelInline labelAlign={labelAlign} />);
+  (
+    [
+      ["left", "start"],
+      ["right", "end"],
+    ] as [TextboxProps["labelAlign"], string][]
+  ).forEach(([labelAlign, cssValue]) => {
+    test(`should render with ${labelAlign} labelAlign prop`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TextboxComponent labelInline labelAlign={labelAlign} />);
 
-        const labelParent = getDataElementByValue(page, "label").locator("..");
-        await expect(labelParent).toHaveCSS(
-          "justify-content",
-          `flex-${cssValue}`
-        );
-      });
-    }
-  );
+      const labelParent = getDataElementByValue(page, "label").locator("..");
+      await expect(labelParent).toHaveCSS(
+        "justify-content",
+        `flex-${cssValue}`,
+      );
+    });
+  });
 
   testData.forEach((labelHelp) => {
     test(`should render with labelHelp prop ${labelHelp}`, async ({
@@ -186,33 +186,35 @@ test.describe("Prop checks for Textbox component", () => {
     });
   });
 
-  ([
-    [1, "8px"],
-    [2, "16px"],
-  ] as [TextboxProps["labelSpacing"], string][]).forEach(
-    ([spacing, padding]) => {
-      test(`should render with labelSpacing prop ${spacing}`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TextboxComponent labelInline labelSpacing={spacing} />);
-
-        const labelParent = getDataElementByValue(page, "label").locator("..");
-        await expect(labelParent).toHaveCSS("padding-right", padding);
-      });
-    }
-  );
-
-  ([
-    [10, 90, 135, 1229],
-    [30, 70, 409, 956],
-    [80, 20, 1092, 273],
-  ] as [
-    TextboxProps["labelWidth"],
-    TextboxProps["inputWidth"],
-    number,
-    number
-  ][]).forEach(([labelVal, inputVal, labelRatio, inputRatio]) => {
+  (
+    [
+      [1, "8px"],
+      [2, "16px"],
+    ] as [TextboxProps["labelSpacing"], string][]
+  ).forEach(([spacing, padding]) => {
+    test(`should render with labelSpacing prop ${spacing}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TextboxComponent labelInline labelSpacing={spacing} />);
+
+      const labelParent = getDataElementByValue(page, "label").locator("..");
+      await expect(labelParent).toHaveCSS("padding-right", padding);
+    });
+  });
+
+  (
+    [
+      [10, 90, 135, 1229],
+      [30, 70, 409, 956],
+      [80, 20, 1092, 273],
+    ] as [
+      TextboxProps["labelWidth"],
+      TextboxProps["inputWidth"],
+      number,
+      number,
+    ][]
+  ).forEach(([labelVal, inputVal, labelRatio, inputRatio]) => {
     test(`should render with correct ratios when inputWidth prop is ${inputVal} and labelWidth prop is ${labelVal}`, async ({
       mount,
       page,
@@ -222,7 +224,7 @@ test.describe("Prop checks for Textbox component", () => {
           labelInline
           labelWidth={labelVal}
           inputWidth={inputVal}
-        />
+        />,
       );
 
       const labelParent = getDataElementByValue(page, "label").locator("..");
@@ -253,72 +255,72 @@ test.describe("Prop checks for Textbox component", () => {
     });
   });
 
-  ([
-    [4, "with", "is"],
-    ["", "without", "is not"],
-  ] as [TextboxProps["characterLimit"], string, string][]).forEach(
-    ([characterLimitVal, renderStatus, characterLimitStatus]) => {
-      test(`should render ${renderStatus} a character count when the characterLimit prop ${characterLimitStatus} passed`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TextboxComponent characterLimit={characterLimitVal} />);
-
-        const characterCount = getDataElementByValue(page, "character-count");
-
-        if (renderStatus === "with") {
-          await expect(characterCount).toHaveCount(1);
-        } else {
-          await expect(characterCount).toHaveCount(0);
-        }
-      });
-    }
-  );
-
-  ([
-    [4, "with", "is"],
-    ["", "without", "is not"],
-  ] as [TextboxProps["characterLimit"], string, string][]).forEach(
-    ([characterLimitVal, renderStatus, characterLimitStatus]) => {
-      test(`should render ${renderStatus} a visually hidden character count when the characterLimit prop ${characterLimitStatus} passed`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TextboxComponent characterLimit={characterLimitVal} />);
-
-        if (renderStatus === "with") {
-          await expect(visuallyHiddenCharacterCount(page)).toHaveCount(1);
-        } else {
-          await expect(visuallyHiddenCharacterCount(page)).toHaveCount(0);
-        }
-      });
-    }
-  );
-
-  ([
-    [4, "with", "is"],
-    ["", "without", "is not"],
-  ] as [TextboxProps["characterLimit"], string, string][]).forEach(
-    ([characterLimitVal, renderStatus, characterLimitStatus]) => {
-      test(`should render ${renderStatus} a visually hidden character count hint when the characterLimit prop ${characterLimitStatus} passed`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<TextboxComponent characterLimit={characterLimitVal} />);
+  (
+    [
+      [4, "with", "is"],
+      ["", "without", "is not"],
+    ] as [TextboxProps["characterLimit"], string, string][]
+  ).forEach(([characterLimitVal, renderStatus, characterLimitStatus]) => {
+    test(`should render ${renderStatus} a character count when the characterLimit prop ${characterLimitStatus} passed`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TextboxComponent characterLimit={characterLimitVal} />);
 
-        const visuallyHiddenCharacterCountHint = getDataElementByValue(
-          page,
-          "visually-hidden-hint"
-        );
+      const characterCount = getDataElementByValue(page, "character-count");
+
+      if (renderStatus === "with") {
+        await expect(characterCount).toHaveCount(1);
+      } else {
+        await expect(characterCount).toHaveCount(0);
+      }
+    });
+  });
+
+  (
+    [
+      [4, "with", "is"],
+      ["", "without", "is not"],
+    ] as [TextboxProps["characterLimit"], string, string][]
+  ).forEach(([characterLimitVal, renderStatus, characterLimitStatus]) => {
+    test(`should render ${renderStatus} a visually hidden character count when the characterLimit prop ${characterLimitStatus} passed`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TextboxComponent characterLimit={characterLimitVal} />);
+
+      if (renderStatus === "with") {
+        await expect(visuallyHiddenCharacterCount(page)).toHaveCount(1);
+      } else {
+        await expect(visuallyHiddenCharacterCount(page)).toHaveCount(0);
+      }
+    });
+  });
+
+  (
+    [
+      [4, "with", "is"],
+      ["", "without", "is not"],
+    ] as [TextboxProps["characterLimit"], string, string][]
+  ).forEach(([characterLimitVal, renderStatus, characterLimitStatus]) => {
+    test(`should render ${renderStatus} a visually hidden character count hint when the characterLimit prop ${characterLimitStatus} passed`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<TextboxComponent characterLimit={characterLimitVal} />);
 
-        if (renderStatus === "with") {
-          await expect(visuallyHiddenCharacterCountHint).toHaveCount(1);
-        } else {
-          await expect(visuallyHiddenCharacterCountHint).toHaveCount(0);
-        }
-      });
-    }
-  );
+      const visuallyHiddenCharacterCountHint = getDataElementByValue(
+        page,
+        "visually-hidden-hint",
+      );
+
+      if (renderStatus === "with") {
+        await expect(visuallyHiddenCharacterCountHint).toHaveCount(1);
+      } else {
+        await expect(visuallyHiddenCharacterCountHint).toHaveCount(0);
+      }
+    });
+  });
 
   ["10%", "30%", "50%", "80%", "100%"].forEach((maxWidth) => {
     test(`should render with ${maxWidth} max-width`, async ({
@@ -365,19 +367,19 @@ test.describe("Prop checks for Textbox component", () => {
 
       if (inputValue.length > limit) {
         await expect(characterLimit(page)).toHaveText(
-          `${inputValue.length - limit} ${overCharacters} too many`
+          `${inputValue.length - limit} ${overCharacters} too many`,
         );
         await expect(characterLimit(page)).toHaveCSS(
           "color",
-          "rgb(203, 55, 74)"
+          "rgb(203, 55, 74)",
         );
       } else {
         await expect(characterLimit(page)).toHaveText(
-          `${limit - inputValue.length} ${underCharacters} left`
+          `${limit - inputValue.length} ${underCharacters} left`,
         );
         await expect(characterLimit(page)).toHaveCSS(
           "color",
-          "rgba(0, 0, 0, 0.55)"
+          "rgba(0, 0, 0, 0.55)",
         );
       }
     });
@@ -388,7 +390,7 @@ test.describe("Prop checks for Textbox component", () => {
 
     await expect(textboxInput(page)).toHaveAttribute(
       "name",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -419,7 +421,7 @@ test.describe("Prop checks for Textbox component", () => {
 
       await expect(textboxInput(page)).toHaveAttribute(
         "placeholder",
-        placeholder
+        placeholder,
       );
     });
   });
@@ -435,11 +437,11 @@ test.describe("Prop checks for Textbox component", () => {
     await expect(textboxInput(page)).toBeFocused();
     await expect(textbox(page)).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(textbox(page)).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -483,12 +485,12 @@ test.describe("Prop checks for Textbox component", () => {
           labelInline
           labelAlign="right"
           {...{ [type]: "Message" }}
-        />
+        />,
       );
 
       await expect(textbox(page).locator(ICON)).toHaveAttribute(
         "data-element",
-        type
+        type,
       );
     });
   });
@@ -504,7 +506,7 @@ test.describe("Prop checks for Textbox component", () => {
           labelAlign="right"
           validationOnLabel
           {...{ [type]: "Message" }}
-        />
+        />,
       );
 
       const labelParent = getDataElementByValue(page, "label").locator("..");
@@ -514,14 +516,16 @@ test.describe("Prop checks for Textbox component", () => {
     });
   });
 
-  ([
-    [VALIDATION.ERROR, "error", true],
-    [VALIDATION.WARNING, "warning", true],
-    [VALIDATION.INFO, "info", true],
-    ["rgb(102, 132, 148)", "error", false],
-    ["rgb(102, 132, 148)", "warning", false],
-    ["rgb(102, 132, 148)", "info", false],
-  ] as [string, string, boolean][]).forEach(([borderColor, type, bool]) => {
+  (
+    [
+      [VALIDATION.ERROR, "error", true],
+      [VALIDATION.WARNING, "warning", true],
+      [VALIDATION.INFO, "info", true],
+      ["rgb(102, 132, 148)", "error", false],
+      ["rgb(102, 132, 148)", "warning", false],
+      ["rgb(102, 132, 148)", "info", false],
+    ] as [string, string, boolean][]
+  ).forEach(([borderColor, type, bool]) => {
     test(`should render with ${borderColor} input border when validation type ${type} is ${bool}`, async ({
       mount,
       page,
@@ -531,7 +535,7 @@ test.describe("Prop checks for Textbox component", () => {
           labelInline
           labelAlign="right"
           {...{ [type]: bool }}
-        />
+        />,
       );
 
       await expect(textbox(page)).toHaveCSS("border-bottom-color", borderColor);
@@ -582,26 +586,26 @@ test.describe("Prop checks for Textbox component", () => {
     await expect(textboxParent.locator("button")).toBeVisible();
   });
 
-  ([
-    ["flex", 399],
-    ["flex", 400],
-    ["block", 401],
-  ] as [string, TextboxProps["adaptiveLabelBreakpoint"]][]).forEach(
-    ([displayValue, breakpoint]) => {
-      test(`should render with ${displayValue} label alignment when the adaptiveLabelBreakpoint prop is ${breakpoint} with a set viewport of 400`, async ({
-        mount,
-        page,
-      }) => {
-        await page.setViewportSize({ width: 400, height: 300 });
-        await mount(<TextboxComponent adaptiveLabelBreakpoint={breakpoint} />);
-
-        const labelParentParent = getDataElementByValue(page, "label")
-          .locator("..")
-          .locator("..");
-        await expect(labelParentParent).toHaveCSS("display", displayValue);
-      });
-    }
-  );
+  (
+    [
+      ["flex", 399],
+      ["flex", 400],
+      ["block", 401],
+    ] as [string, TextboxProps["adaptiveLabelBreakpoint"]][]
+  ).forEach(([displayValue, breakpoint]) => {
+    test(`should render with ${displayValue} label alignment when the adaptiveLabelBreakpoint prop is ${breakpoint} with a set viewport of 400`, async ({
+      mount,
+      page,
+    }) => {
+      await page.setViewportSize({ width: 400, height: 300 });
+      await mount(<TextboxComponent adaptiveLabelBreakpoint={breakpoint} />);
+
+      const labelParentParent = getDataElementByValue(page, "label")
+        .locator("..")
+        .locator("..");
+      await expect(labelParentParent).toHaveCSS("display", displayValue);
+    });
+  });
 
   test("should render with labelId prop", async ({ mount, page }) => {
     await mount(<TextboxComponent id={CHARACTERS.STANDARD} />);
@@ -628,7 +632,7 @@ test.describe("Prop checks for Textbox component", () => {
 
     await expect(textboxInput(page)).toHaveAttribute(
       "value",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -649,12 +653,9 @@ test.describe("Prop checks for Textbox component", () => {
     await expect(inputIcon).toHaveAttribute("tabindex", "25");
   });
 
-  ([
-    "top",
-    "bottom",
-    "left",
-    "right",
-  ] as TextboxProps["tooltipPosition"][]).forEach((position) => {
+  (
+    ["top", "bottom", "left", "right"] as TextboxProps["tooltipPosition"][]
+  ).forEach((position) => {
     test(`should render with tooltip positioned to the ${position}`, async ({
       mount,
       page,
@@ -665,7 +666,7 @@ test.describe("Prop checks for Textbox component", () => {
             error={CHARACTERS.STANDARD}
             tooltipPosition={position}
           />
-        </Box>
+        </Box>,
       );
 
       await getDataElementByValue(page, "error").hover();
@@ -673,7 +674,7 @@ test.describe("Prop checks for Textbox component", () => {
       await expect(tooltipPreview(page)).toHaveText(CHARACTERS.STANDARD);
       await expect(tooltipPreview(page)).toHaveAttribute(
         "data-placement",
-        position as string
+        position as string,
       );
     });
   });
@@ -683,7 +684,7 @@ test.describe("Prop checks for Textbox component", () => {
       <TextboxComponent
         labelHelp="fieldHelp"
         helpAriaLabel={CHARACTERS.STANDARD}
-      />
+      />,
     );
 
     const help = getDataComponentByValue(page, "help");
@@ -739,7 +740,7 @@ test.describe("Event checks", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await textboxInput(page).type(inputValue);
@@ -757,7 +758,7 @@ test.describe("Event checks", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await textboxInput(page).click();
@@ -779,7 +780,7 @@ test.describe("Event checks", () => {
           }}
           disabled={propName === "disabled"}
           readOnly={propName === "readOnly"}
-        />
+        />,
       );
 
       await textboxInput(page).dispatchEvent("click");
@@ -799,7 +800,7 @@ test.describe("Event checks", () => {
           }}
           disabled={propName === "disabled"}
           readOnly={propName === "readOnly"}
-        />
+        />,
       );
 
       await textboxInput(page).dispatchEvent("mousedown");
@@ -820,7 +821,7 @@ test.describe("Event checks", () => {
           inputIcon="add"
           disabled={propName === "disabled"}
           readOnly={propName === "readOnly"}
-        />
+        />,
       );
 
       await getDataComponentByValue(page, "icon").click({ button: "left" });
@@ -841,7 +842,7 @@ test.describe("Event checks", () => {
           inputIcon="add"
           disabled={propName === "disabled"}
           readOnly={propName === "readOnly"}
-        />
+        />,
       );
 
       await getDataComponentByValue(page, "icon").click();
@@ -860,7 +861,7 @@ test.describe("Event checks", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await textboxInput(page).click();
@@ -878,7 +879,7 @@ test.describe("Event checks", () => {
         onFocus={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await textboxInput(page).focus();
@@ -896,7 +897,7 @@ test.describe("Event checks", () => {
         onMouseDown={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await textboxInput(page).dispatchEvent("mousedown");
@@ -915,7 +916,7 @@ test.describe("Event checks", () => {
           callbackCount += 1;
         }}
         inputIcon="add"
-      />
+      />,
     );
 
     await getDataComponentByValue(page, "icon").click({ button: "left" });
@@ -934,7 +935,7 @@ test.describe("Event checks", () => {
           callbackCount += 1;
         }}
         inputIcon="add"
-      />
+      />,
     );
 
     await getDataComponentByValue(page, "icon").click();
@@ -955,7 +956,7 @@ test.describe("Event checks", () => {
             callbackCount += 1;
           }}
           iconTabIndex={0}
-        />
+        />,
       );
 
       await getDataElementByValue(page, "input-icon-toggle").press(key);
@@ -975,7 +976,7 @@ test.describe("Event checks", () => {
           onKeyDown={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       await textboxInput(page).press(key);
@@ -1147,7 +1148,7 @@ test.describe("Accessibility tests for Textbox component", () => {
     page,
   }) => {
     await mount(
-      <TextboxComponent labelInline labelWidth={73} inputWidth={27} />
+      <TextboxComponent labelInline labelWidth={73} inputWidth={27} />,
     );
 
     await checkAccessibility(page);
diff --git a/src/components/textbox/textbox.stories.tsx b/src/components/textbox/textbox.stories.tsx
index aad62a9d44..203d20b2ed 100644
--- a/src/components/textbox/textbox.stories.tsx
+++ b/src/components/textbox/textbox.stories.tsx
@@ -332,7 +332,7 @@ export const NewDesignsValidation: Story = () => {
                 {...{ [validationType]: "Message" }}
               />
             </Box>
-          ))
+          )),
         )}
       </CarbonProvider>
     </Box>
diff --git a/src/components/textbox/textbox.style.ts b/src/components/textbox/textbox.style.ts
index 10c9ccfe08..2bef96367e 100644
--- a/src/components/textbox/textbox.style.ts
+++ b/src/components/textbox/textbox.style.ts
@@ -1,18 +1,17 @@
 import styled, { css } from "styled-components";
 
 const ErrorBorder = styled.span`
-  ${({ warning, inline }: { warning: boolean; inline?: boolean }) =>
-    css`
-      position: absolute;
-      z-index: 6;
-      width: 2px;
-      background-color: ${warning
-        ? "var(--colorsSemanticCaution500)"
-        : "var(--colorsSemanticNegative500)"};
-      left: -12px;
-      bottom: ${inline ? "10px" : "0px"};
-      top: 0px;
-    `}
+  ${({ warning, inline }: { warning: boolean; inline?: boolean }) => css`
+    position: absolute;
+    z-index: 6;
+    width: 2px;
+    background-color: ${warning
+      ? "var(--colorsSemanticCaution500)"
+      : "var(--colorsSemanticNegative500)"};
+    left: -12px;
+    bottom: ${inline ? "10px" : "0px"};
+    top: 0px;
+  `}
 `;
 
 const StyledHintText = styled.div`
diff --git a/src/components/textbox/textbox.test.tsx b/src/components/textbox/textbox.test.tsx
index 432156fc7c..c0a7e164a2 100644
--- a/src/components/textbox/textbox.test.tsx
+++ b/src/components/textbox/textbox.test.tsx
@@ -16,7 +16,7 @@ const mockedGuid = "mocked-guid";
 jest.mock("../../__internal__/utils/helpers/guid");
 
 (createGuid as jest.MockedFunction<typeof createGuid>).mockReturnValue(
-  mockedGuid
+  mockedGuid,
 );
 
 let loggerSpy: jest.SpyInstance<void, [message: string]> | jest.Mock;
@@ -39,7 +39,7 @@ test("should display deprecation warning once when rendered as uncontrolled", ()
   render(<Textbox name="my-textbox" defaultValue="test" />);
 
   expect(loggerSpy).toHaveBeenCalledWith(
-    "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."
+    "Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.",
   );
 
   expect(loggerSpy).toHaveBeenCalledTimes(1);
@@ -49,7 +49,7 @@ testStyledSystemMarginRTL(
   (props) => <Textbox data-role="textbox-wrapper" {...props} />,
   () => screen.getByTestId("textbox-wrapper"),
   undefined,
-  { modifier: "&&&" }
+  { modifier: "&&&" },
 );
 
 describe(`when the characterLimit prop is passed`, () => {
@@ -71,8 +71,8 @@ describe(`when the characterLimit prop is passed`, () => {
                 valueString.length - characterLimit
               } ${overCharacters} too many`
         }`,
-        { selector: '[aria-hidden="true"]' }
-      )
+        { selector: '[aria-hidden="true"]' },
+      ),
     ).toBeInTheDocument();
   });
 
@@ -81,7 +81,7 @@ describe(`when the characterLimit prop is passed`, () => {
     expect(
       screen.getByText("You can enter up to 73 characters", {
         selector: '[data-element="visually-hidden-hint"]',
-      })
+      }),
     ).toHaveAttribute("id", mockedGuid);
   });
 
@@ -89,7 +89,7 @@ describe(`when the characterLimit prop is passed`, () => {
     render(<Textbox value="foo" characterLimit={73} />);
     expect(screen.getByRole("textbox")).toHaveAttribute(
       "aria-describedby",
-      mockedGuid
+      mockedGuid,
     );
   });
 
@@ -99,7 +99,7 @@ describe(`when the characterLimit prop is passed`, () => {
     expect(
       screen.getByText("1 character too many", {
         selector: '[aria-hidden="true"]',
-      })
+      }),
     ).toHaveStyleRule("color", "var(--colorsSemanticNegative500)");
   });
 });
@@ -147,9 +147,9 @@ test.each([
     expect(screen.getByRole("presentation")).toHaveStyleRule(
       "padding-right",
       "0",
-      { modifier: `& ${StyledInput}` }
+      { modifier: `& ${StyledInput}` },
     );
-  }
+  },
 );
 
 test("supports a separate onClick handler passing for the icon", async () => {
@@ -165,7 +165,7 @@ test("supports a separate onClick handler passing for the icon", async () => {
       iconOnClick={iconOnClick}
     >
       normal children
-    </Textbox>
+    </Textbox>,
   );
   await user.click(screen.getByTestId("input-icon-toggle"));
   expect(iconOnClick).toHaveBeenCalled();
@@ -187,9 +187,9 @@ test.each([
 
     expect(screen.getByRole("textbox")).toHaveAttribute(
       "enterkeyhint",
-      keyHints
+      keyHints,
     );
-  }
+  },
 );
 
 test.each(["disabled", "readOnly"])(
@@ -209,11 +209,11 @@ test.each(["disabled", "readOnly"])(
         readOnly={propName === "readOnly"}
       >
         normal children
-      </Textbox>
+      </Textbox>,
     );
     await user.click(screen.getByTestId("input-icon-toggle"));
     expect(iconOnClick).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each(["disabled", "readOnly"])(
@@ -233,11 +233,11 @@ test.each(["disabled", "readOnly"])(
         readOnly={propName === "readOnly"}
       >
         normal children
-      </Textbox>
+      </Textbox>,
     );
     await user.click(screen.getByTestId("input-icon-toggle"));
     expect(iconOnMouseDown).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each(["disabled", "readOnly"])(
@@ -255,11 +255,11 @@ test.each(["disabled", "readOnly"])(
         readOnly={propName === "readOnly"}
       >
         normal children
-      </Textbox>
+      </Textbox>,
     );
     await user.click(screen.getByTestId("input-icon-toggle"));
     expect(onClick).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each(["disabled", "readOnly"])(
@@ -277,11 +277,11 @@ test.each(["disabled", "readOnly"])(
         readOnly={propName === "readOnly"}
       >
         normal children
-      </Textbox>
+      </Textbox>,
     );
     await user.click(screen.getByTestId("input-icon-toggle"));
     expect(onMouseDown).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test.each(validationTypes)(
@@ -291,7 +291,7 @@ test.each(validationTypes)(
     const inputPresentationContainer = screen.getByRole("presentation");
     const validationIcon = screen.getByTestId(`icon-${type}`);
     expect(inputPresentationContainer).toContainElement(validationIcon);
-  }
+  },
 );
 
 test.each(validationTypes)(
@@ -299,12 +299,12 @@ test.each(validationTypes)(
   as true render proper validation icon on the label`,
   (type) => {
     render(
-      <Textbox label="Label" {...{ [type]: "Message" }} validationOnLabel />
+      <Textbox label="Label" {...{ [type]: "Message" }} validationOnLabel />,
     );
     const labelContainer = screen.getByTestId("label-container");
     const validationIcon = screen.getByTestId(`icon-${type}`);
     expect(labelContainer).toContainElement(validationIcon);
-  }
+  },
 );
 
 test.each([
@@ -325,15 +325,15 @@ test.each([
         error="Message"
         validationOnLabel={onLabel}
         tooltipPosition={tooltipPosition}
-      />
+      />,
     );
 
     expect(useFloatingSpy).toHaveBeenCalledWith(
-      expect.objectContaining({ placement: tooltipPosition })
+      expect.objectContaining({ placement: tooltipPosition }),
     );
 
     useFloatingSpy.mockRestore();
-  }
+  },
 );
 
 describe("when the prefix prop is set", () => {
@@ -342,7 +342,7 @@ describe("when the prefix prop is set", () => {
     render(<Textbox value="foo" prefix={prefixValue} />);
     expect(screen.getByText(prefixValue)).toHaveAttribute(
       "data-element",
-      "textbox-prefix"
+      "textbox-prefix",
     );
   });
 
@@ -373,7 +373,7 @@ test("renders the positionChildren prop before the input", () => {
   const positionChildren = screen.getByText("positionedChildren content");
   const input = screen.getByRole("textbox");
   expect(positionChildren.compareDocumentPosition(input)).toEqual(
-    Node.DOCUMENT_POSITION_FOLLOWING
+    Node.DOCUMENT_POSITION_FOLLOWING,
   );
 });
 
@@ -385,7 +385,7 @@ test("passes the helpAriaLabel prop down to the help component", () => {
       label="label"
       labelHelp="some help"
       helpAriaLabel={text}
-    />
+    />,
   );
 
   expect(screen.getByRole("button")).toHaveAttribute("aria-label", text);
@@ -397,7 +397,7 @@ test("passes the aria-labelledby prop down to the input", () => {
 
   expect(screen.getByRole("textbox")).toHaveAttribute(
     "aria-labelledby",
-    labelId
+    labelId,
   );
 });
 
@@ -410,10 +410,10 @@ test.each(validationTypes)(
 
     expect(await screen.findByRole("tooltip")).toHaveAttribute(
       "id",
-      "foo-validation"
+      "foo-validation",
     );
     expect(input).toHaveAttribute("aria-describedby", "foo-validation");
-  }
+  },
 );
 
 test.each(validationTypes)(
@@ -425,13 +425,13 @@ test.each(validationTypes)(
 
     expect(await screen.findByRole("tooltip")).toHaveAttribute(
       "id",
-      `${mockedGuid}-validation`
+      `${mockedGuid}-validation`,
     );
     expect(input).toHaveAttribute(
       "aria-describedby",
-      `${mockedGuid}-validation`
+      `${mockedGuid}-validation`,
     );
-  }
+  },
 );
 
 test("when id and fieldHelp are both present, the id of the field help is added to 'aria-describedby' in the input", () => {
@@ -440,7 +440,7 @@ test("when id and fieldHelp are both present, the id of the field help is added
   expect(screen.getByText("baz")).toHaveAttribute("id", "foo-field-help");
   expect(screen.getByRole("textbox")).toHaveAttribute(
     "aria-describedby",
-    "foo-field-help"
+    "foo-field-help",
   );
 });
 
@@ -449,11 +449,11 @@ test("when fieldHelp is present and id is not present, the id of the field help
 
   expect(screen.getByText("baz")).toHaveAttribute(
     "id",
-    `${mockedGuid}-field-help`
+    `${mockedGuid}-field-help`,
   );
   expect(screen.getByRole("textbox")).toHaveAttribute(
     "aria-describedby",
-    `${mockedGuid}-field-help`
+    `${mockedGuid}-field-help`,
   );
 });
 
@@ -466,45 +466,45 @@ test.each(validationTypes)(
         id="foo"
         fieldHelp="baz"
         {...{ [validationType]: "test" }}
-      />
+      />,
     );
     const input = screen.getByRole("textbox");
     input.focus();
 
     expect(await screen.findByRole("tooltip")).toHaveAttribute(
       "id",
-      "foo-validation"
+      "foo-validation",
     );
     expect(screen.getByText("baz")).toHaveAttribute("id", "foo-field-help");
     expect(input).toHaveAttribute(
       "aria-describedby",
-      "foo-field-help foo-validation"
+      "foo-field-help foo-validation",
     );
-  }
+  },
 );
 
 test.each(validationTypes)(
   'when id is not present, %s prop is set as a string, fieldHelp is present and the input is focused, the ids of both the validation tooltip are added to "aria-describedby" in the input',
   async (validationType) => {
     render(
-      <Textbox label="bar" fieldHelp="baz" {...{ [validationType]: "test" }} />
+      <Textbox label="bar" fieldHelp="baz" {...{ [validationType]: "test" }} />,
     );
     const input = screen.getByRole("textbox");
     input.focus();
 
     expect(await screen.findByRole("tooltip")).toHaveAttribute(
       "id",
-      `${mockedGuid}-validation`
+      `${mockedGuid}-validation`,
     );
     expect(screen.getByText("baz")).toHaveAttribute(
       "id",
-      `${mockedGuid}-field-help`
+      `${mockedGuid}-field-help`,
     );
     expect(input).toHaveAttribute(
       "aria-describedby",
-      `${mockedGuid}-field-help ${mockedGuid}-validation`
+      `${mockedGuid}-field-help ${mockedGuid}-validation`,
     );
-  }
+  },
 );
 
 describe("when inputHint prop is present", () => {
@@ -518,7 +518,7 @@ describe("when inputHint prop is present", () => {
     expect(screen.getByText("bar")).toHaveAttribute("id", mockedGuid);
     expect(screen.getByRole("textbox")).toHaveAttribute(
       "aria-describedby",
-      mockedGuid
+      mockedGuid,
     );
   });
 
@@ -526,7 +526,7 @@ describe("when inputHint prop is present", () => {
     render(
       <CarbonProvider validationRedesignOptIn>
         <Textbox labelHelp="labelHelp" inputHint="inputHint" error="foo" />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
     expect(screen.getByText("inputHint")).toBeInTheDocument();
     expect(screen.queryByText("labelHelp")).not.toBeInTheDocument();
@@ -538,7 +538,7 @@ describe("when rendered with new validations", () => {
     render(
       <CarbonProvider validationRedesignOptIn>
         <Textbox {...props} />
-      </CarbonProvider>
+      </CarbonProvider>,
     );
 
   it('adds the id of the validation text to "aria-describedby" in the input', () => {
@@ -547,11 +547,11 @@ describe("when rendered with new validations", () => {
 
     expect(screen.getByText("bar")).toHaveAttribute(
       "id",
-      `${mockId}-validation`
+      `${mockId}-validation`,
     );
     expect(screen.getByRole("textbox")).toHaveAttribute(
       "aria-describedby",
-      `${mockId}-validation`
+      `${mockId}-validation`,
     );
   });
 
@@ -588,6 +588,6 @@ test("renders with the expected border radius styling", () => {
   render(<Textbox />);
   expect(screen.getByRole("textbox")).toHaveStyleRule(
     "border-radius",
-    "var(--borderRadius050)"
+    "var(--borderRadius050)",
   );
 });
diff --git a/src/components/tile-select/__internal__/accordion/accordion.test.tsx b/src/components/tile-select/__internal__/accordion/accordion.test.tsx
index 5901367360..fa42977513 100644
--- a/src/components/tile-select/__internal__/accordion/accordion.test.tsx
+++ b/src/components/tile-select/__internal__/accordion/accordion.test.tsx
@@ -10,12 +10,12 @@ test("the expected styles are applied to the component", () => {
   render(<Accordion>Content</Accordion>);
 
   const contentContainer = screen.getByTestId(
-    "tile-select-accordion-content-container"
+    "tile-select-accordion-content-container",
   );
   const content = screen.getByTestId("tile-select-accordion-content");
 
   expect(contentContainer).toHaveStyleRule(
-    "backgroundColor: var(--colorsActionMinor050)"
+    "backgroundColor: var(--colorsActionMinor050)",
   );
   expect(content).toHaveStyle({
     padding: "24px",
@@ -42,7 +42,7 @@ test("resize observer recalculates the content height", () => {
   });
 
   const contentContainer = screen.getByTestId(
-    "tile-select-accordion-content-container"
+    "tile-select-accordion-content-container",
   );
 
   expect(contentContainer).toHaveStyle({
diff --git a/src/components/tile-select/components.test-pw.tsx b/src/components/tile-select/components.test-pw.tsx
index c5f6403a73..a560d138c0 100644
--- a/src/components/tile-select/components.test-pw.tsx
+++ b/src/components/tile-select/components.test-pw.tsx
@@ -43,7 +43,7 @@ export const TileSelectComponent = ({
 };
 
 export const MultiTileSelectGroupComponent = (
-  props: Partial<TileSelectGroupProps>
+  props: Partial<TileSelectGroupProps>,
 ) => {
   const [value1, setValue1] = React.useState(false);
   const [value2, setValue2] = React.useState(false);
@@ -114,12 +114,12 @@ export const MultiTileSelectGroupComponent = (
 };
 
 export const AccordionTileSelectComponent = (
-  props: Partial<TileSelectProps>
+  props: Partial<TileSelectProps>,
 ) => {
   const [isChecked, setIsChecked] = React.useState(false);
   const [expanded, setExpanded] = React.useState(true);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
@@ -174,7 +174,7 @@ export const AccordionTileSelectComponent = (
 };
 
 export const TileSelectGroupComponent = (
-  props: Partial<TileSelectGroupProps>
+  props: Partial<TileSelectGroupProps>,
 ) => {
   const [value, setValue] = React.useState(false);
   return (
@@ -183,7 +183,7 @@ export const TileSelectGroupComponent = (
       legend="Tile Select"
       description="Pick one of the available options"
       onChange={(
-        e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+        e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
       ) => setValue(e.target.checked)}
       {...props}
     >
@@ -196,7 +196,7 @@ export const TileSelectGroupComponent = (
         description="Short and descriptive description"
         checked={value}
         onChange={(
-          e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+          e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
         ) => setValue(e.target.checked)}
       />
       <TileSelect
@@ -208,7 +208,7 @@ export const TileSelectGroupComponent = (
         description="Short and descriptive description1"
         checked={value}
         onChange={(
-          e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+          e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
         ) => setValue(e.target.checked)}
       />
     </TileSelectGroup>
@@ -218,7 +218,7 @@ export const TileSelectGroupComponent = (
 export const PrefixAdornmentComponent = () => {
   const [isChecked, setIsChecked] = useState(false);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
@@ -251,7 +251,7 @@ export const PrefixAdornmentComponent = () => {
 export const WithTitleAdornment = () => {
   const [isChecked, setIsChecked] = useState(false);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
@@ -280,7 +280,7 @@ export const WithTitleAdornment = () => {
 export const SingleTile = () => {
   const [isChecked, setIsChecked] = useState(false);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
@@ -304,7 +304,7 @@ export const SingleTile = () => {
 export const WithAFooter = () => {
   const [isChecked, setIsChecked] = useState(false);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
@@ -341,7 +341,7 @@ export const WithAFooter = () => {
 export const WithAdditionalInformation = () => {
   const [isChecked, setIsChecked] = useState(false);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
@@ -379,7 +379,7 @@ export const WithAccordionFooter = () => {
   const [isChecked, setIsChecked] = useState(false);
   const [expanded, setExpanded] = useState(true);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
diff --git a/src/components/tile-select/tile-select-group/tile-select-group.component.tsx b/src/components/tile-select/tile-select-group/tile-select-group.component.tsx
index a2e0f3bc99..ba9699fb8d 100644
--- a/src/components/tile-select/tile-select-group/tile-select-group.component.tsx
+++ b/src/components/tile-select/tile-select-group/tile-select-group.component.tsx
@@ -23,7 +23,7 @@ export interface TileSelectGroupProps extends MarginProps {
   name: string;
   /** A callback triggered when one of tiles is selected - only for single select mode. */
   onChange?: (
-    ev: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    ev: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => void;
   /** A callback triggered when one of tiles is blurred - only for single select mode. */
   onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
diff --git a/src/components/tile-select/tile-select.component.tsx b/src/components/tile-select/tile-select.component.tsx
index 667e1bb51b..059f3d3f11 100644
--- a/src/components/tile-select/tile-select.component.tsx
+++ b/src/components/tile-select/tile-select.component.tsx
@@ -55,7 +55,7 @@ export interface TileSelectProps extends MarginProps {
   name?: string;
   /** Callback triggered when user selects or deselects this tile */
   onChange?: (
-    ev: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    ev: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => void;
   /** Callback triggered when the user blurs this tile */
   onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
@@ -112,7 +112,7 @@ const TileSelect = React.forwardRef<HTMLInputElement, TileSelectProps>(
       accordionExpanded,
       ...rest
     }: TileSelectProps,
-    ref
+    ref,
   ) => {
     const l = useLocale();
     const [hasFocus, setHasFocus] = useState(false);
@@ -267,7 +267,7 @@ const TileSelect = React.forwardRef<HTMLInputElement, TileSelectProps>(
         </StyledFocusWrapper>
       </StyledTileSelectContainer>
     );
-  }
+  },
 );
 
 TileSelect.displayName = "TileSelect";
diff --git a/src/components/tile-select/tile-select.pw.tsx b/src/components/tile-select/tile-select.pw.tsx
index 56d7140b94..7f80ee9594 100644
--- a/src/components/tile-select/tile-select.pw.tsx
+++ b/src/components/tile-select/tile-select.pw.tsx
@@ -51,11 +51,11 @@ test.describe("check Focus Outline & Border Radius", () => {
 
     await expect(focusedElement).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(focusedElement).toHaveCSS(
       "outline",
-      "rgba(0, 0, 0, 0) solid 3px"
+      "rgba(0, 0, 0, 0) solid 3px",
     );
   });
 
@@ -75,7 +75,7 @@ test.describe("check Focus Outline & Border Radius", () => {
 
     await expect(focusedElement).toHaveCSS(
       "outline",
-      "rgb(255, 188, 25) solid 3px"
+      "rgb(255, 188, 25) solid 3px",
     );
   });
 });
@@ -131,7 +131,7 @@ test.describe("check props for TileSelect component", () => {
 
     const tileSelectGroupDescription = getDataElementByValue(
       page,
-      "tile-select-group-description"
+      "tile-select-group-description",
     );
 
     await expect(tileSelectGroupDescription).toBeVisible();
@@ -145,16 +145,18 @@ test.describe("check props for TileSelect component", () => {
 
     const tileSelectGroupDescription = getDataElementByValue(
       page,
-      "tile-select-group-description"
+      "tile-select-group-description",
     );
 
     await expect(tileSelectGroupDescription).toHaveCount(0);
   });
 
-  ([
-    [false, "rgba(0, 0, 0, 0.9)"],
-    [true, "rgba(0, 0, 0, 0.3)"],
-  ] as [boolean, string][]).forEach(([disabled, borderColor]) => {
+  (
+    [
+      [false, "rgba(0, 0, 0, 0.9)"],
+      [true, "rgba(0, 0, 0, 0.3)"],
+    ] as [boolean, string][]
+  ).forEach(([disabled, borderColor]) => {
     test(`should check when disabled prop is set as ${disabled}`, async ({
       mount,
       page,
@@ -256,7 +258,7 @@ test.describe("check props for TileSelect component", () => {
 
     const tileSelectAccordionChildren = getElement(
       page,
-      "tile-select-accordion-content"
+      "tile-select-accordion-content",
     ).locator("..");
 
     await expect(tileSelectAccordionChildren).not.toBeVisible();
@@ -270,7 +272,7 @@ test.describe("check props for TileSelect component", () => {
 
     const tileSelectAccordionChildren = getElement(
       page,
-      "tile-select-accordion-content"
+      "tile-select-accordion-content",
     ).locator("..");
 
     await expect(tileSelectAccordionChildren).toBeVisible();
@@ -285,7 +287,7 @@ test.describe("check props for TileSelect component", () => {
 
       const tileSelectAccordionChildren = getElement(
         page,
-        "tile-select-accordion-content"
+        "tile-select-accordion-content",
       );
 
       await expect(tileSelectAccordionChildren).toHaveText(accordionContent);
@@ -320,26 +322,26 @@ test.describe("check props for MultiTileSelect component", () => {
 
     await expect(multiSelectInputElement0).toHaveAttribute(
       "aria-checked",
-      "true"
+      "true",
     );
     const multiSelectInputElement1 = inputElement(page).nth(1);
     await multiSelectInputElement1.click();
 
     await expect(multiSelectInputElement1).toHaveAttribute(
       "aria-checked",
-      "true"
+      "true",
     );
     const multiSelectInputElement2 = inputElement(page).nth(2);
 
     await expect(multiSelectInputElement2).toHaveAttribute(
       "aria-checked",
-      "false"
+      "false",
     );
     const multiSelectInputElement3 = inputElement(page).nth(3);
 
     await expect(multiSelectInputElement3).toHaveAttribute(
       "aria-checked",
-      "false"
+      "false",
     );
   });
 
@@ -444,7 +446,7 @@ test.describe("should render TileSelect component and check events", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const onChangeElement = inputElement(page).first();
@@ -462,7 +464,7 @@ test.describe("should render TileSelect component and check events", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const blurElement = inputElement(page).first();
@@ -481,7 +483,7 @@ test.describe("should render TileSelect component and check events", () => {
         onFocus={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const onFocusElement = inputElement(page);
@@ -499,7 +501,7 @@ test.describe("should render TileSelect component and check events", () => {
         onChange={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const onChangeElement = inputElement(page).first();
@@ -517,7 +519,7 @@ test.describe("should render TileSelect component and check events", () => {
         onBlur={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     const blurElement = inputElement(page).first();
diff --git a/src/components/tile-select/tile-select.stories.tsx b/src/components/tile-select/tile-select.stories.tsx
index 4de397791d..e1a8980e15 100644
--- a/src/components/tile-select/tile-select.stories.tsx
+++ b/src/components/tile-select/tile-select.stories.tsx
@@ -325,7 +325,7 @@ MultiSelect.storyName = "Multi Select";
 export const SingleTile: Story = () => {
   const [isChecked, setIsChecked] = useState(false);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
@@ -350,7 +350,7 @@ SingleTile.storyName = "Single Tile";
 export const WithAFooter: Story = () => {
   const [isChecked, setIsChecked] = useState(false);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
@@ -388,7 +388,7 @@ WithAFooter.storyName = "With a Footer";
 export const WithAPrefixAdornment: Story = () => {
   const [isChecked, setIsChecked] = useState(false);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
@@ -422,7 +422,7 @@ WithAPrefixAdornment.storyName = "With a Prefix Adornment";
 export const WithAdditionalInformation: Story = () => {
   const [isChecked, setIsChecked] = useState(false);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
@@ -461,7 +461,7 @@ export const WithAccordionFooter: Story = () => {
   const [isChecked, setIsChecked] = useState(false);
   const [expanded, setExpanded] = useState(true);
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent
+    e: React.ChangeEvent<HTMLInputElement> | TileSelectDeselectEvent,
   ) => {
     const { value } = e.target;
     setIsChecked(value !== null);
diff --git a/src/components/tile-select/tile-select.test.tsx b/src/components/tile-select/tile-select.test.tsx
index 0b3953cd9b..9c85391662 100644
--- a/src/components/tile-select/tile-select.test.tsx
+++ b/src/components/tile-select/tile-select.test.tsx
@@ -14,7 +14,7 @@ testStyledSystemMarginRTL(
   (props) => <TileSelect data-role="tile-select-wrapper" {...props} />,
   // we are setting the data- attributes on more than one element
   // FE-6834 raised to address this
-  () => screen.getAllByTestId("tile-select-wrapper")[0]
+  () => screen.getAllByTestId("tile-select-wrapper")[0],
 );
 
 testStyledSystemMarginRTL(
@@ -27,7 +27,7 @@ testStyledSystemMarginRTL(
       <TileSelect name="test" />
     </TileSelectGroup>
   ),
-  () => screen.getByTestId("tile-select-group")
+  () => screen.getByTestId("tile-select-group"),
 );
 
 test("the deselect action button is rendered when TileSelect is checked", () => {
@@ -142,11 +142,11 @@ test("renders actionButtonAdornment with expected styling", () => {
         </Button>
       )}
       actionButtonAdornment={<Icon type="info" />}
-    />
+    />,
   );
 
   expect(screen.getByTestId("deselect-wrapper")).toHaveStyleRule(
-    "margin-right: var(--sizing200)"
+    "margin-right: var(--sizing200)",
   );
 });
 
@@ -169,7 +169,7 @@ test("clicking the customActionButton invokes the passed onChange callback", asy
           iconType="close"
         />
       )}
-    />
+    />,
   );
 
   const actionButtonElement = screen.getByRole("button", {
@@ -248,7 +248,7 @@ describe("TileSelectGroup", () => {
     render(<TileSelectGroupComponent multiSelect />);
 
     expect(
-      screen.queryByTestId("tile-select-group-radio-button-mapper")
+      screen.queryByTestId("tile-select-group-radio-button-mapper"),
     ).not.toBeInTheDocument();
 
     screen.getAllByRole("checkbox").forEach((checkbox) => {
@@ -263,7 +263,7 @@ describe("TileSelectGroup", () => {
       render(
         <TileSelectGroup name="TileSelectGroup" legend="Radio Tile Group">
           string
-        </TileSelectGroup>
+        </TileSelectGroup>,
       );
     }).not.toThrow();
 
@@ -279,11 +279,11 @@ test("`additionalInformation` prop renders the passed in node", () => {
       title="foo"
       titleAdornment={<div>bar</div>}
       additionalInformation={<MyComp />}
-    />
+    />,
   );
 
   expect(screen.getByTestId("title-adornment")).toHaveStyle(
-    "margin-bottom: 4px"
+    "margin-bottom: 4px",
   );
 });
 
@@ -295,13 +295,13 @@ test("when input becomes disabled, the focus outline is removed", async () => {
   await user.click(inputElement);
 
   expect(screen.getByTestId("focus-wrapper")).toHaveStyleRule(
-    "box-shadow: 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090)"
+    "box-shadow: 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090)",
   );
 
   rerender(<TileSelect disabled />);
 
   expect(screen.getByTestId("focus-wrapper")).not.toHaveStyleRule(
-    "box-shadow: 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090)"
+    "box-shadow: 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090)",
   );
 });
 
@@ -314,7 +314,7 @@ test("when the `footer` prop is rendered, the component renders with the expecte
           <Button>Foo</Button>
         </>
       }
-    />
+    />,
   );
 
   expect(screen.getByTestId("tile-select-footer")).toHaveStyle({
@@ -345,7 +345,7 @@ test("Accordion footer renders the node passed in via the accordionContent prop
   const MyComp = () => <div>foo</div>;
   const AccordionControl: TileSelectProps["accordionControl"] = (
     controlId,
-    contentId
+    contentId,
   ) => (
     <Button aria-controls={contentId} id={controlId}>
       Foo
@@ -357,7 +357,7 @@ test("Accordion footer renders the node passed in via the accordionContent prop
       accordionControl={AccordionControl}
       checked
       accordionContent={<MyComp />}
-    />
+    />,
   );
 
   expect(screen.getByTestId("accordion-footer")).toHaveStyle({
@@ -370,6 +370,6 @@ test("Accordion footer renders the node passed in via the accordionContent prop
   expect(screen.getByTestId("accordion-footer")).toHaveStyleRule(
     "transform",
     "rotate(-90deg)",
-    { modifier: 'span[data-element="chevron_down"]' }
+    { modifier: 'span[data-element="chevron_down"]' },
   );
 });
diff --git a/src/components/tile/flex-tile-cell/flex-tile-cell.stories.tsx b/src/components/tile/flex-tile-cell/flex-tile-cell.stories.tsx
index d58055e2ba..65b5513440 100644
--- a/src/components/tile/flex-tile-cell/flex-tile-cell.stories.tsx
+++ b/src/components/tile/flex-tile-cell/flex-tile-cell.stories.tsx
@@ -12,7 +12,7 @@ const styledSystemProps = generateStyledSystemProps(
     padding: true,
     flexBox: true,
   },
-  { flexGrow: 1, flexShrink: 0, flexBasis: "160px" }
+  { flexGrow: 1, flexShrink: 0, flexBasis: "160px" },
 );
 
 const meta: Meta<typeof FlexTileCell> = {
diff --git a/src/components/tile/flex-tile-cell/flex-tile-cell.test.tsx b/src/components/tile/flex-tile-cell/flex-tile-cell.test.tsx
index 452036724b..995d2bcefc 100644
--- a/src/components/tile/flex-tile-cell/flex-tile-cell.test.tsx
+++ b/src/components/tile/flex-tile-cell/flex-tile-cell.test.tsx
@@ -10,11 +10,11 @@ import FlexTileDivider from "../flex-tile-divider";
 describe("FlexTileCell", () => {
   testStyledSystemPaddingRTL(
     (props) => <FlexTileCell {...props}>Test</FlexTileCell>,
-    () => screen.getByText("Test")
+    () => screen.getByText("Test"),
   );
   testStyledSystemFlexBox(
     (props) => <FlexTileCell {...props}>Test</FlexTileCell>,
-    () => screen.getByText("Test")
+    () => screen.getByText("Test"),
   );
 
   it("does not render when falsy children are passed", () => {
@@ -34,7 +34,7 @@ describe("FlexTileCell", () => {
       <FlexTileCell data-element="foo" data-role="bar">
         <FlexTileDivider />
         Cell Content
-      </FlexTileCell>
+      </FlexTileCell>,
     );
     const element = screen.getByText("Cell Content");
     expect(element).toHaveAttribute("data-component", "flex-tile-cell");
diff --git a/src/components/tile/flex-tile-container/flex-tile-container.test.tsx b/src/components/tile/flex-tile-container/flex-tile-container.test.tsx
index 736c9bd6e7..b8ab8b8e00 100644
--- a/src/components/tile/flex-tile-container/flex-tile-container.test.tsx
+++ b/src/components/tile/flex-tile-container/flex-tile-container.test.tsx
@@ -10,14 +10,14 @@ test.each<Gap>([...GAP_VALUES, "20px", "20%"])(
     expect(screen.getByText("content")).toHaveStyle({
       columnGap: getGapValue(gapValue),
     });
-  }
+  },
 );
 
 test("should not render when falsy children are passed", () => {
   render(
     <FlexTileContainer data-role="flex-tile-container">
       {null}
-    </FlexTileContainer>
+    </FlexTileContainer>,
   );
 
   expect(screen.queryByTestId("flex-tile-container")).not.toBeInTheDocument();
diff --git a/src/components/tile/tile-content/tile-content.test.tsx b/src/components/tile/tile-content/tile-content.test.tsx
index 3f3e588cf6..1a75498e2b 100644
--- a/src/components/tile/tile-content/tile-content.test.tsx
+++ b/src/components/tile/tile-content/tile-content.test.tsx
@@ -13,7 +13,7 @@ testStyledSystemSpacingRTL(
       Test
     </TileContent>
   ),
-  () => screen.getByTestId("tile-content")
+  () => screen.getByTestId("tile-content"),
 );
 testStyledSystemWidthRTL(
   (props) => (
@@ -21,7 +21,7 @@ testStyledSystemWidthRTL(
       Test
     </TileContent>
   ),
-  () => screen.getByTestId("tile-content")
+  () => screen.getByTestId("tile-content"),
 );
 testStyledSystemHeightRTL(
   (props) => (
@@ -29,7 +29,7 @@ testStyledSystemHeightRTL(
       Test
     </TileContent>
   ),
-  () => screen.getByTestId("tile-content")
+  () => screen.getByTestId("tile-content"),
 );
 
 test("does not render when no children are passed", () => {
@@ -54,7 +54,7 @@ test("has proper data attributes applied", () => {
   render(
     <TileContent data-element="foo" data-role="bar">
       Tile Content
-    </TileContent>
+    </TileContent>,
   );
   const element = screen.getByText("Tile Content");
   expect(element).toHaveAttribute("data-component", "tile-content");
diff --git a/src/components/tile/tile-footer/tile-footer.test.tsx b/src/components/tile/tile-footer/tile-footer.test.tsx
index 3fe300a96f..9b658607f4 100644
--- a/src/components/tile/tile-footer/tile-footer.test.tsx
+++ b/src/components/tile/tile-footer/tile-footer.test.tsx
@@ -5,7 +5,7 @@ import { testStyledSystemPaddingRTL } from "../../../__spec_helper__/__internal_
 
 testStyledSystemPaddingRTL(
   (props) => <TileFooter data-role="footer" {...props} />,
-  () => screen.getByTestId("footer")
+  () => screen.getByTestId("footer"),
 );
 
 test.each<[TileFooterProps["variant"], string, string]>([
@@ -19,7 +19,7 @@ test.each<[TileFooterProps["variant"], string, string]>([
     render(
       <TileFooter variant={tileVariant} data-role="tile-footer">
         content
-      </TileFooter>
+      </TileFooter>,
     );
 
     const tileFooterElement = screen.getByTestId("tile-footer");
@@ -28,14 +28,14 @@ test.each<[TileFooterProps["variant"], string, string]>([
       background,
       borderTop: `1px solid ${borderTopColor}`,
     });
-  }
+  },
 );
 
 test("has proper data attributes applied to elements", () => {
   render(
     <TileFooter data-element="foo" data-role="tile-footer">
       content
-    </TileFooter>
+    </TileFooter>,
   );
 
   const tileFooterElement = screen.getByTestId("tile-footer");
diff --git a/src/components/tile/tile-header/tile-header.test.tsx b/src/components/tile/tile-header/tile-header.test.tsx
index 19bbb398d7..3d3092e2ff 100644
--- a/src/components/tile/tile-header/tile-header.test.tsx
+++ b/src/components/tile/tile-header/tile-header.test.tsx
@@ -5,7 +5,7 @@ import { testStyledSystemPaddingRTL } from "../../../__spec_helper__/__internal_
 
 testStyledSystemPaddingRTL(
   (props) => <TileHeader data-role="header" {...props} />,
-  () => screen.getByTestId("header")
+  () => screen.getByTestId("header"),
 );
 
 test.each<[TileHeaderProps["variant"], string, string]>([
@@ -19,7 +19,7 @@ test.each<[TileHeaderProps["variant"], string, string]>([
     render(
       <TileHeader variant={tileVariant} data-role="tile-header">
         content
-      </TileHeader>
+      </TileHeader>,
     );
 
     const tileHeaderElement = screen.getByTestId("tile-header");
@@ -27,16 +27,16 @@ test.each<[TileHeaderProps["variant"], string, string]>([
     expect(tileHeaderElement).toHaveStyleRule("background", background);
     expect(tileHeaderElement).toHaveStyleRule(
       "border-bottom",
-      `1px solid ${borderBottomColor}`
+      `1px solid ${borderBottomColor}`,
     );
-  }
+  },
 );
 
 test("has proper data attributes applied to elements", () => {
   render(
     <TileHeader data-element="foo" data-role="tile-header">
       content
-    </TileHeader>
+    </TileHeader>,
   );
 
   const tileHeaderElement = screen.getByTestId("tile-header");
diff --git a/src/components/tile/tile.component.tsx b/src/components/tile/tile.component.tsx
index 50fdea834a..da05cfa077 100644
--- a/src/components/tile/tile.component.tsx
+++ b/src/components/tile/tile.component.tsx
@@ -11,7 +11,7 @@ import tagComponent, { TagProps } from "../../__internal__/utils/helpers/tags";
 import { TILE_HIGHLIGHT_VARIANTS } from "./tile.config";
 
 type DesignTokensType = keyof typeof DesignTokens;
-type HighlightVariantType = typeof TILE_HIGHLIGHT_VARIANTS[number];
+type HighlightVariantType = (typeof TILE_HIGHLIGHT_VARIANTS)[number];
 
 export interface TileProps extends SpaceProps, WidthProps, TagProps {
   /** Sets the theme of the tile */
diff --git a/src/components/tile/tile.pw.tsx b/src/components/tile/tile.pw.tsx
index 98fec12d6a..12a46cb091 100644
--- a/src/components/tile/tile.pw.tsx
+++ b/src/components/tile/tile.pw.tsx
@@ -100,7 +100,7 @@ test.describe("Tile component", () => {
   tileOrientations.forEach(([orientation, height]) => {
     test(`check ${orientation} orientation`, async ({ mount, page }) => {
       await mount(
-        <TileComponent orientation={orientation} data-element="tile" />
+        <TileComponent orientation={orientation} data-element="tile" />,
       );
 
       const tile = getDataElementByValue(page, "tile");
@@ -114,7 +114,7 @@ test.describe("Tile component", () => {
       page,
     }) => {
       await mount(
-        <TileComponent width={widthInPercentage} data-element="tile" />
+        <TileComponent width={widthInPercentage} data-element="tile" />,
       );
 
       const tile = getDataElementByValue(page, "tile");
@@ -125,7 +125,7 @@ test.describe("Tile component", () => {
   tileHeights.forEach(([heightInPercentage, heightInPixel]) => {
     test(`check height as ${heightInPercentage}`, async ({ mount, page }) => {
       await mount(
-        <TileComponent height={heightInPercentage} data-element="tile" />
+        <TileComponent height={heightInPercentage} data-element="tile" />,
       );
 
       const tile = getDataElementByValue(page, "tile");
@@ -184,7 +184,7 @@ test.describe("Tile component", () => {
   tileFooterVariants.forEach(([variant, backGroundColor, borderTopColor]) => {
     test(`check Tile Footer variant as ${variant}`, async ({ mount, page }) => {
       await mount(
-        <TileFooterComponent variant={variant} data-element="tile-footer" />
+        <TileFooterComponent variant={variant} data-element="tile-footer" />,
       );
 
       const footer = getDataElementByValue(page, "tile-footer");
@@ -194,7 +194,7 @@ test.describe("Tile component", () => {
         "1px",
         "border-top",
         "solid",
-        borderTopColor
+        borderTopColor,
       );
     });
   });
@@ -207,7 +207,7 @@ test.describe("Tile component", () => {
       await mount(
         <TileFooterComponent data-element="tile-footer">
           {children}
-        </TileFooterComponent>
+        </TileFooterComponent>,
       );
 
       const footer = getDataElementByValue(page, "tile-footer");
@@ -222,7 +222,7 @@ test.describe("Tile component", () => {
         page,
       }) => {
         await mount(
-          <TileHeaderComponent variant={variant} data-element="tile-header" />
+          <TileHeaderComponent variant={variant} data-element="tile-header" />,
         );
 
         const header = getDataElementByValue(page, "tile-header");
@@ -232,10 +232,10 @@ test.describe("Tile component", () => {
           "1px",
           "border-bottom",
           "solid",
-          borderBottomColor
+          borderBottomColor,
         );
       });
-    }
+    },
   );
 
   characters.forEach((children) => {
@@ -246,7 +246,7 @@ test.describe("Tile component", () => {
       await mount(
         <TileHeaderComponent data-element="tile-header">
           {children}
-        </TileHeaderComponent>
+        </TileHeaderComponent>,
       );
 
       const header = getDataElementByValue(page, "tile-header");
@@ -269,7 +269,7 @@ test.describe("Tile component", () => {
       page,
     }) => {
       await mount(
-        <TileComponent data-element="tile" borderVariant={borderVariant} />
+        <TileComponent data-element="tile" borderVariant={borderVariant} />,
       );
 
       const tile = getDataElementByValue(page, "tile");
@@ -290,7 +290,7 @@ test.describe("Tile component", () => {
               data-element="tile"
               borderVariant={borderVariant}
               variant={variant}
-            />
+            />,
           );
 
           const tile = getDataElementByValue(page, "tile");
@@ -302,7 +302,7 @@ test.describe("Tile component", () => {
   borderWidths.forEach(([borderWidth, pixelWidth]) => {
     test(`check border width as ${borderWidth}`, async ({ mount, page }) => {
       await mount(
-        <TileComponent data-element="tile" borderWidth={borderWidth} />
+        <TileComponent data-element="tile" borderWidth={borderWidth} />,
       );
 
       const tile = getDataElementByValue(page, "tile");
@@ -342,7 +342,7 @@ test.describe("Tile component", () => {
 
     const tileContentCount = await getDataElementByValue(
       page,
-      "tile-content"
+      "tile-content",
     ).count();
     expect(tileContentCount).toEqual(1);
   });
@@ -357,7 +357,7 @@ test.describe("Tile component", () => {
 
         await checkAccessibility(page);
       });
-    }
+    },
   );
 
   [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS].forEach((children) => {
@@ -382,14 +382,16 @@ test.describe("Tile component", () => {
     });
   });
 
-  ([
-    "default",
-    "selected",
-    "positive",
-    "negative",
-    "caution",
-    "info",
-  ] as TileProps["borderVariant"][]).forEach((borderVariant) => {
+  (
+    [
+      "default",
+      "selected",
+      "positive",
+      "negative",
+      "caution",
+      "info",
+    ] as TileProps["borderVariant"][]
+  ).forEach((borderVariant) => {
     test(`should check Accessibility for border variant as ${borderVariant}`, async ({
       page,
       mount,
@@ -407,18 +409,20 @@ test.describe("Tile component", () => {
       await checkAccessibility(page);
     });
 
-    ([
-      [1, "8px"],
-      [2, "16px"],
-      [3, "24px"],
-    ] as [number, string][]).forEach(([value, gapText]) => {
+    (
+      [
+        [1, "8px"],
+        [2, "16px"],
+        [3, "24px"],
+      ] as [number, string][]
+    ).forEach(([value, gapText]) => {
       test(`should verify columnGap is ${value}`, async ({ mount, page }) => {
         await mount(
-          <FlexTileContainer columnGap={value}>content</FlexTileContainer>
+          <FlexTileContainer columnGap={value}>content</FlexTileContainer>,
         );
         const containerElement = await getDataComponentByValue(
           page,
-          "flex-tile-container"
+          "flex-tile-container",
         );
         await expect(containerElement).toHaveCSS("column-gap", gapText);
       });
diff --git a/src/components/tile/tile.stories.tsx b/src/components/tile/tile.stories.tsx
index fe4a98181b..4bbe0f5fd3 100644
--- a/src/components/tile/tile.stories.tsx
+++ b/src/components/tile/tile.stories.tsx
@@ -29,7 +29,7 @@ const styledSystemProps = generateStyledSystemProps(
     spacing: true,
     width: true,
   },
-  { p: 3 }
+  { p: 3 },
 );
 
 const meta: Meta<typeof Tile> = {
diff --git a/src/components/tile/tile.style.ts b/src/components/tile/tile.style.ts
index 4406182a04..4597cd153f 100644
--- a/src/components/tile/tile.style.ts
+++ b/src/components/tile/tile.style.ts
@@ -18,7 +18,7 @@ type StyledTileProps = Pick<
 
 const getBorderColor = (
   borderVariant: TileProps["borderVariant"],
-  variant: TileProps["variant"]
+  variant: TileProps["variant"],
 ) => {
   switch (borderVariant) {
     case "selected":
diff --git a/src/components/tile/tile.test.tsx b/src/components/tile/tile.test.tsx
index d7bac521f2..4595386653 100644
--- a/src/components/tile/tile.test.tsx
+++ b/src/components/tile/tile.test.tsx
@@ -12,7 +12,7 @@ import { TILE_HIGHLIGHT_VARIANTS } from "./tile.config";
 testStyledSystemSpacingRTL(
   (props) => <Tile data-role="tile" {...props} />,
   () => screen.getByTestId("tile"),
-  { p: 3 }
+  { p: 3 },
 );
 
 testStyledSystemWidthRTL(
@@ -21,12 +21,12 @@ testStyledSystemWidthRTL(
       Test
     </Tile>
   ),
-  () => screen.getByTestId("tile")
+  () => screen.getByTestId("tile"),
 );
 
 testStyledSystemHeightRTL(
   (props) => <Tile data-role="tile" {...props} />,
-  () => screen.getByTestId("tile")
+  () => screen.getByTestId("tile"),
 );
 
 test("renders only one TileContent when a child element returns null", () => {
@@ -50,7 +50,7 @@ test("has proper data attributes applied to elements", () => {
   render(
     <Tile data-element="foo" data-role="bar">
       content
-    </Tile>
+    </Tile>,
   );
 
   const styledTile = screen.getByTestId("bar");
@@ -63,12 +63,12 @@ test.each(TILE_HIGHLIGHT_VARIANTS)(
   (highlightVariant) => {
     render(<Tile highlightVariant={highlightVariant} />);
     const highlightElement = screen.getByTestId(
-      `tile-${highlightVariant}-highlight`
+      `tile-${highlightVariant}-highlight`,
     );
 
     expect(highlightElement).toBeVisible();
     expect(highlightElement).toHaveAttribute("aria-hidden");
-  }
+  },
 );
 
 /* tests for coverage */
@@ -85,16 +85,16 @@ test.each<[TileProps["borderVariant"], string]>([
       <Tile borderVariant={borderVariant} data-role="tile">
         <TileContent>Child 1</TileContent>
         <TileContent>Child 2</TileContent>
-      </Tile>
+      </Tile>,
     );
 
     const tileElement = screen.getByTestId("tile");
 
     expect(tileElement).toHaveStyleRule(
       "border",
-      `var(--borderWidth100) solid var(--${borderVariantToken})`
+      `var(--borderWidth100) solid var(--${borderVariantToken})`,
     );
-  }
+  },
 );
 
 test('renders with expected background and border styles when variant is "active"', () => {
@@ -102,7 +102,7 @@ test('renders with expected background and border styles when variant is "active
     <Tile variant="active" data-role="tile">
       <TileContent>Child 1</TileContent>
       <TileContent>Child 2</TileContent>
-    </Tile>
+    </Tile>,
   );
 
   const tileElement = screen.getByTestId("tile");
@@ -118,18 +118,18 @@ test('renders with expected background and border styles when variant is "grey"'
     <Tile variant="grey" data-role="tile">
       <TileContent>Child 1</TileContent>
       <TileContent>Child 2</TileContent>
-    </Tile>
+    </Tile>,
   );
 
   const tileElement = screen.getByTestId("tile");
 
   expect(tileElement).toHaveStyleRule(
     "background-color",
-    "var(--colorsUtilityMajor025)"
+    "var(--colorsUtilityMajor025)",
   );
   expect(tileElement).toHaveStyleRule(
     "border",
-    "var(--borderWidth100) solid var(--colorsUtilityMajor200)"
+    "var(--borderWidth100) solid var(--colorsUtilityMajor200)",
   );
 });
 
@@ -144,12 +144,12 @@ test.each([
       <Tile roundness={roundness} data-role="tile">
         <TileContent>Child 1</TileContent>
         <TileContent>Child 2</TileContent>
-      </Tile>
+      </Tile>,
     );
 
     const tileElement = screen.getByTestId("tile");
     expect(tileElement).toHaveStyleRule("border-radius", expectedBorderRadius);
-  }
+  },
 );
 
 test("sets the correct flex-direction on the main wrapper when the orientation is horizontal", () => {
@@ -157,7 +157,7 @@ test("sets the correct flex-direction on the main wrapper when the orientation i
     <Tile orientation="horizontal" data-role="tile">
       <TileContent>Child 1</TileContent>
       <TileContent>Child 2</TileContent>
-    </Tile>
+    </Tile>,
   );
 
   const tileElement = screen.getByTestId("tile");
@@ -170,7 +170,7 @@ test("sets the correct flex-direction on the main wrapper when the orientation i
     <Tile orientation="vertical" data-role="tile">
       <TileContent>Child 1</TileContent>
       <TileContent>Child 2</TileContent>
-    </Tile>
+    </Tile>,
   );
 
   const tileElement = screen.getByTestId("tile");
@@ -183,7 +183,7 @@ test('renders a transparent background when variant prop is "transparent"', () =
     <Tile variant="transparent" data-role="tile">
       <TileContent>Child 1</TileContent>
       <TileContent>Child 2</TileContent>
-    </Tile>
+    </Tile>,
   );
 
   const tileElement = screen.getByTestId("tile");
diff --git a/src/components/time/__internal__/time-toggle/time-toggle.component.tsx b/src/components/time/__internal__/time-toggle/time-toggle.component.tsx
index b4de2a76f9..3102023631 100644
--- a/src/components/time/__internal__/time-toggle/time-toggle.component.tsx
+++ b/src/components/time/__internal__/time-toggle/time-toggle.component.tsx
@@ -42,7 +42,7 @@ const Toggle = ({
         onChange(selectedButtonValue as ToggleValue);
       }
     },
-    [toggleValue, onChange]
+    [toggleValue, onChange],
   );
 
   return (
diff --git a/src/components/time/time.component.tsx b/src/components/time/time.component.tsx
index 389fef7c8e..630e89ff0a 100644
--- a/src/components/time/time.component.tsx
+++ b/src/components/time/time.component.tsx
@@ -116,7 +116,7 @@ const Time = React.forwardRef<TimeHandle, TimeProps>(
       toggleProps = {},
       ...rest
     },
-    ref
+    ref,
   ) => {
     const {
       id: hoursInputId,
@@ -136,7 +136,7 @@ const Time = React.forwardRef<TimeHandle, TimeProps>(
     const internalMinsId = useRef(minutesInputId || guid());
     const inputHintId = useRef(guid());
     const internalId = useRef(
-      `${internalHrsId.current} ${internalMinsId.current}`
+      `${internalHrsId.current} ${internalMinsId.current}`,
     );
     const {
       hours: hourValue,
@@ -157,7 +157,7 @@ const Time = React.forwardRef<TimeHandle, TimeProps>(
 
     const computedValidations = (
       hrs?: string | boolean,
-      mins?: string | boolean
+      mins?: string | boolean,
     ) => {
       const hoursIsString = typeof hrs === "string";
       const minutesIsString = typeof mins === "string";
@@ -201,12 +201,12 @@ const Time = React.forwardRef<TimeHandle, TimeProps>(
           minsRef.current?.focus();
         },
       }),
-      []
+      [],
     );
 
     const handleChange = (
       ev: React.ChangeEvent<HTMLInputElement>,
-      inputName: "hrs" | "mins"
+      inputName: "hrs" | "mins",
     ) => {
       const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
       const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
@@ -244,7 +244,7 @@ const Time = React.forwardRef<TimeHandle, TimeProps>(
           }
         });
       },
-      [onBlur]
+      [onBlur],
     );
 
     return (
@@ -355,7 +355,7 @@ const Time = React.forwardRef<TimeHandle, TimeProps>(
         </Box>
       </Fieldset>
     );
-  }
+  },
 );
 
 Time.displayName = "Time";
diff --git a/src/components/time/time.pw.tsx b/src/components/time/time.pw.tsx
index ea8aa9f421..77bab4a627 100644
--- a/src/components/time/time.pw.tsx
+++ b/src/components/time/time.pw.tsx
@@ -28,7 +28,7 @@ test.describe("Time component", () => {
     await mount(<TimeComponent data-element={CHARACTERS.STANDARD} />);
 
     await expect(
-      getDataElementByValue(page, CHARACTERS.STANDARD)
+      getDataElementByValue(page, CHARACTERS.STANDARD),
     ).toBeVisible();
   });
 
@@ -98,13 +98,13 @@ test.describe("Time component", () => {
 
     await verifyRequiredAsteriskForLabel(
       page,
-      getDataElementByValue(page, "legend").locator("span")
+      getDataElementByValue(page, "legend").locator("span"),
     );
     await expect(
-      getDataComponentByValue(page, "hours").locator("input")
+      getDataComponentByValue(page, "hours").locator("input"),
     ).toHaveAttribute("required", "");
     await expect(
-      getDataComponentByValue(page, "minutes").locator("input")
+      getDataComponentByValue(page, "minutes").locator("input"),
     ).toHaveAttribute("required", "");
   });
 
@@ -116,7 +116,7 @@ test.describe("Time component", () => {
 
     await expect(getDataComponentByValue(page, "time")).toHaveAttribute(
       "name",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -128,15 +128,15 @@ test.describe("Time component", () => {
 
     const hoursInput = getDataComponentByValue(page, "hours").locator("input");
     const minutesInput = getDataComponentByValue(page, "minutes").locator(
-      "input"
+      "input",
     );
     const amToggleButton = getDataComponentByValue(
       page,
-      "am-button-toggle"
+      "am-button-toggle",
     ).locator("button");
     const pmToggleButton = getDataComponentByValue(
       page,
-      "pm-button-toggle"
+      "pm-button-toggle",
     ).locator("button");
 
     await expect(hoursInput).toBeDisabled();
@@ -153,15 +153,15 @@ test.describe("Time component", () => {
 
     const hoursInput = getDataComponentByValue(page, "hours").locator("input");
     const minutesInput = getDataComponentByValue(page, "minutes").locator(
-      "input"
+      "input",
     );
     const amToggleButton = getDataComponentByValue(
       page,
-      "am-button-toggle"
+      "am-button-toggle",
     ).locator("button");
     const pmToggleButton = getDataComponentByValue(
       page,
-      "pm-button-toggle"
+      "pm-button-toggle",
     ).locator("button");
 
     await expect(hoursInput).not.toBeEditable();
@@ -183,7 +183,7 @@ test.describe("Time component", () => {
     const inputValue = "1";
     const hoursInput = getDataComponentByValue(page, "hours").locator("input");
     const minutesInput = getDataComponentByValue(page, "minutes").locator(
-      "input"
+      "input",
     );
 
     await hoursInput.fill(inputValue);
@@ -206,7 +206,7 @@ test.describe("Time component", () => {
 
     const hoursInput = getDataComponentByValue(page, "hours").locator("input");
     const minutesInput = getDataComponentByValue(page, "minutes").locator(
-      "input"
+      "input",
     );
 
     await hoursInput.focus();
@@ -230,7 +230,7 @@ test.describe("Time component", () => {
 
     const hoursInput = getDataComponentByValue(page, "hours").locator("input");
     const minutesInput = getDataComponentByValue(page, "minutes").locator(
-      "input"
+      "input",
     );
 
     await minutesInput.focus();
@@ -242,12 +242,14 @@ test.describe("Time component", () => {
     expect(count).toBe(1);
   });
 
-  ([
-    [VALIDATION.ERROR, "error", true],
-    [VALIDATION.WARNING, "warning", true],
-    ["rgb(102, 132, 148)", "error", false],
-    ["rgb(102, 132, 148)", "warning", false],
-  ] as [string, string, boolean][]).forEach(([borderColor, type, bool]) => {
+  (
+    [
+      [VALIDATION.ERROR, "error", true],
+      [VALIDATION.WARNING, "warning", true],
+      ["rgb(102, 132, 148)", "error", false],
+      ["rgb(102, 132, 148)", "warning", false],
+    ] as [string, string, boolean][]
+  ).forEach(([borderColor, type, bool]) => {
     test(`should render hours input with ${borderColor} border when ${type} is ${bool}`, async ({
       mount,
       page,
@@ -258,7 +260,7 @@ test.describe("Time component", () => {
           value={{ hours: "", minutes: "" }}
           onChange={() => {}}
           {...{ hoursInputProps: { [type]: bool } }}
-        />
+        />,
       );
 
       const hoursInputPresentation = page
@@ -268,29 +270,31 @@ test.describe("Time component", () => {
 
       await expect(hoursInputPresentation).toHaveCSS(
         "border-top-color",
-        borderColor
+        borderColor,
       );
       await expect(hoursInputPresentation).toHaveCSS(
         "border-bottom-color",
-        borderColor
+        borderColor,
       );
       await expect(hoursInputPresentation).toHaveCSS(
         "border-left-color",
-        borderColor
+        borderColor,
       );
       await expect(hoursInputPresentation).toHaveCSS(
         "border-right-color",
-        borderColor
+        borderColor,
       );
     });
   });
 
-  ([
-    [VALIDATION.ERROR, "error", true],
-    [VALIDATION.WARNING, "warning", true],
-    ["rgb(102, 132, 148)", "error", false],
-    ["rgb(102, 132, 148)", "warning", false],
-  ] as [string, string, boolean][]).forEach(([borderColor, type, bool]) => {
+  (
+    [
+      [VALIDATION.ERROR, "error", true],
+      [VALIDATION.WARNING, "warning", true],
+      ["rgb(102, 132, 148)", "error", false],
+      ["rgb(102, 132, 148)", "warning", false],
+    ] as [string, string, boolean][]
+  ).forEach(([borderColor, type, bool]) => {
     test(`should render minutes input with ${borderColor} border when ${type} is ${bool}`, async ({
       mount,
       page,
@@ -301,7 +305,7 @@ test.describe("Time component", () => {
           value={{ hours: "", minutes: "" }}
           onChange={() => {}}
           {...{ minutesInputProps: { [type]: bool } }}
-        />
+        />,
       );
 
       const minutesInputPresentation = page
@@ -311,29 +315,31 @@ test.describe("Time component", () => {
 
       await expect(minutesInputPresentation).toHaveCSS(
         "border-top-color",
-        borderColor
+        borderColor,
       );
       await expect(minutesInputPresentation).toHaveCSS(
         "border-bottom-color",
-        borderColor
+        borderColor,
       );
       await expect(minutesInputPresentation).toHaveCSS(
         "border-left-color",
-        borderColor
+        borderColor,
       );
       await expect(minutesInputPresentation).toHaveCSS(
         "border-right-color",
-        borderColor
+        borderColor,
       );
     });
   });
 
-  ([
-    [VALIDATION.ERROR, "error", true],
-    [VALIDATION.WARNING, "warning", true],
-    ["rgb(102, 132, 148)", "error", false],
-    ["rgb(102, 132, 148)", "warning", false],
-  ] as [string, string, boolean][]).forEach(([borderColor, type, bool]) => {
+  (
+    [
+      [VALIDATION.ERROR, "error", true],
+      [VALIDATION.WARNING, "warning", true],
+      ["rgb(102, 132, 148)", "error", false],
+      ["rgb(102, 132, 148)", "warning", false],
+    ] as [string, string, boolean][]
+  ).forEach(([borderColor, type, bool]) => {
     test(`should render both inputs with ${borderColor} border when ${type} is ${bool}`, async ({
       mount,
       page,
@@ -351,7 +357,7 @@ test.describe("Time component", () => {
             hoursInputProps: { warning: bool },
             minutesInputProps: { warning: bool },
           })}
-        />
+        />,
       );
 
       const hoursInputPresentation = page
@@ -365,44 +371,46 @@ test.describe("Time component", () => {
 
       await expect(hoursInputPresentation).toHaveCSS(
         "border-top-color",
-        borderColor
+        borderColor,
       );
       await expect(hoursInputPresentation).toHaveCSS(
         "border-bottom-color",
-        borderColor
+        borderColor,
       );
       await expect(hoursInputPresentation).toHaveCSS(
         "border-left-color",
-        borderColor
+        borderColor,
       );
       await expect(hoursInputPresentation).toHaveCSS(
         "border-right-color",
-        borderColor
+        borderColor,
       );
       await expect(minutesInputPresentation).toHaveCSS(
         "border-top-color",
-        borderColor
+        borderColor,
       );
       await expect(minutesInputPresentation).toHaveCSS(
         "border-bottom-color",
-        borderColor
+        borderColor,
       );
       await expect(minutesInputPresentation).toHaveCSS(
         "border-left-color",
-        borderColor
+        borderColor,
       );
       await expect(minutesInputPresentation).toHaveCSS(
         "border-right-color",
-        borderColor
+        borderColor,
       );
     });
   });
 
-  ([
-    [SIZE.SMALL, 30],
-    [SIZE.MEDIUM, 38],
-    [SIZE.LARGE, 46],
-  ] as [TimeProps["size"], number][]).forEach(([size, height]) => {
+  (
+    [
+      [SIZE.SMALL, 30],
+      [SIZE.MEDIUM, 38],
+      [SIZE.LARGE, 46],
+    ] as [TimeProps["size"], number][]
+  ).forEach(([size, height]) => {
     test(`should render the inputs and toggles with height of ${height}px when size is ${size}`, async ({
       mount,
       page,
@@ -413,14 +421,14 @@ test.describe("Time component", () => {
           value={{ hours: "", minutes: "", period: "AM" }}
           onChange={() => {}}
           size={size}
-        />
+        />,
       );
 
       const hoursInput = page.locator("input").first();
       const minutesInput = page.locator("input").last();
       const toggleButtons = getDataComponentByValue(
         page,
-        "time-button-toggle-group"
+        "time-button-toggle-group",
       ).first();
 
       await assertCssValueIsApproximately(hoursInput, "height", height);
@@ -436,7 +444,7 @@ test.describe("Time component", () => {
           label="label"
           value={{ hours: "12", minutes: "30" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -449,7 +457,7 @@ test.describe("Time component", () => {
           label="label"
           value={{ hours: "12", minutes: "30" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -462,7 +470,7 @@ test.describe("Time component", () => {
           label="label"
           value={{ hours: "12", minutes: "30" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -478,7 +486,7 @@ test.describe("Time component", () => {
           inputHint="input hint"
           value={{ hours: "12", minutes: "30" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -495,7 +503,7 @@ test.describe("Time component", () => {
           minutesInputProps={{ error: "error" }}
           value={{ hours: "12", minutes: "30" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -512,7 +520,7 @@ test.describe("Time component", () => {
           minutesInputProps={{ warning: "warning" }}
           value={{ hours: "12", minutes: "30" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -528,7 +536,7 @@ test.describe("Time component", () => {
           hoursInputProps={{ error: "error" }}
           value={{ hours: "12", minutes: "30" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -544,7 +552,7 @@ test.describe("Time component", () => {
           minutesInputProps={{ error: "error" }}
           value={{ hours: "12", minutes: "30" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -560,7 +568,7 @@ test.describe("Time component", () => {
           hoursInputProps={{ warning: "warning" }}
           value={{ hours: "12", minutes: "30" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -576,7 +584,7 @@ test.describe("Time component", () => {
           minutesInputProps={{ warning: "warning" }}
           value={{ hours: "12", minutes: "30" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -591,7 +599,7 @@ test.describe("Time component", () => {
           label="label"
           value={{ hours: "12", minutes: "30", period: "AM" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
@@ -608,7 +616,7 @@ test.describe("Time component", () => {
           label="label"
           value={{ hours: "12", minutes: "30", period: "AM" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page, undefined, "color-contrast");
@@ -624,7 +632,7 @@ test.describe("Time component", () => {
           label="label"
           value={{ hours: "12", minutes: "30", period: "AM" }}
           onChange={() => {}}
-        />
+        />,
       );
 
       await checkAccessibility(page);
diff --git a/src/components/time/time.stories.tsx b/src/components/time/time.stories.tsx
index ce6d5e25b7..07eba0a3c6 100644
--- a/src/components/time/time.stories.tsx
+++ b/src/components/time/time.stories.tsx
@@ -227,7 +227,7 @@ export const Sizes: Story = () => {
 
   const handleChange = (
     ev: TimeInputEvent,
-    size: "small" | "medium" | "large"
+    size: "small" | "medium" | "large",
   ) => {
     setValue((p) => ({
       ...p,
diff --git a/src/components/time/time.test.tsx b/src/components/time/time.test.tsx
index bb13b094a0..1d86f48056 100644
--- a/src/components/time/time.test.tsx
+++ b/src/components/time/time.test.tsx
@@ -58,7 +58,7 @@ testStyledSystemMarginRTL(
   (props) => (
     <Time value={{ hours: "", minutes: "" }} onChange={() => {}} {...props} />
   ),
-  () => screen.getByRole("group")
+  () => screen.getByRole("group"),
 );
 
 test("should not display the AM/PM toggle by default", () => {
@@ -73,7 +73,7 @@ test("should display the AM/PM toggle and highlight the first button when toggle
     <Time
       value={{ hours: "", minutes: "", period: "AM" }}
       onChange={() => {}}
-    />
+    />,
   );
 
   const amToggle = screen.getByRole("button", { name: "AM", pressed: true });
@@ -88,7 +88,7 @@ test("should display the AM/PM toggle and highlight the second button when toggl
     <Time
       value={{ hours: "", minutes: "", period: "PM" }}
       onChange={() => {}}
-    />
+    />,
   );
 
   const amToggle = screen.getByRole("button", { name: "AM", pressed: false });
@@ -104,7 +104,7 @@ test("should render the input hint text when prop is set", () => {
       value={{ hours: "12", minutes: "30" }}
       onChange={() => {}}
       inputHint="hint text"
-    />
+    />,
   );
 
   expect(screen.getByText("hint text")).toBeVisible();
@@ -128,7 +128,7 @@ test("should focus each input in the expected order when user is tabbing", async
     <Time
       value={{ hours: "12", minutes: "30", period: "AM" }}
       onChange={() => {}}
-    />
+    />,
   );
 
   const user = userEvent.setup({
@@ -154,7 +154,7 @@ test("should focus each input in the expected order when user is shift tabbing",
     <Time
       value={{ hours: "12", minutes: "30", period: "AM" }}
       onChange={() => {}}
-    />
+    />,
   );
 
   const user = userEvent.setup({
@@ -182,7 +182,7 @@ test("should verify fieldset uses visible legend text as its accessible name", (
       value={{ hours: "12", minutes: "30" }}
       onChange={() => {}}
       label="Time"
-    />
+    />,
   );
 
   const fieldset = screen.getByRole("group");
@@ -196,12 +196,11 @@ test("should apply the `medium` `size` styling to inputs and toggles by default"
     <Time
       value={{ hours: "12", minutes: "30", period: "AM" }}
       onChange={() => {}}
-    />
+    />,
   );
 
-  const [hrsInputPresentation, minsInputPresentation] = screen.getAllByRole(
-    "presentation"
-  );
+  const [hrsInputPresentation, minsInputPresentation] =
+    screen.getAllByRole("presentation");
   const { height, horizontalPadding } = inputSizes.medium;
   const amToggle = screen.getByRole("button", { name: "AM" });
   const pmToggle = screen.getByRole("button", { name: "PM" });
@@ -234,12 +233,11 @@ it.each(["small", "medium", "large"] as const)(
         value={{ hours: "12", minutes: "30", period: "AM" }}
         onChange={() => {}}
         size={size}
-      />
+      />,
     );
 
-    const [hrsInputPresentation, minsInputPresentation] = screen.getAllByRole(
-      "presentation"
-    );
+    const [hrsInputPresentation, minsInputPresentation] =
+      screen.getAllByRole("presentation");
     const { height, horizontalPadding } = inputSizes[size];
     const amToggle = screen.getByRole("button", { name: "AM" });
     const pmToggle = screen.getByRole("button", { name: "PM" });
@@ -262,7 +260,7 @@ it.each(["small", "medium", "large"] as const)(
       padding: `0 ${paddingConfig[size]}px`,
       "font-size": `${fontSizeConfig[size]}px`,
     });
-  }
+  },
 );
 
 test("should apply the custom id on the hours input when `hoursInputProps` has an `id` set", () => {
@@ -271,7 +269,7 @@ test("should apply the custom id on the hours input when `hoursInputProps` has a
       value={{ hours: "12", minutes: "30" }}
       onChange={() => {}}
       hoursInputProps={{ id: "foo" }}
-    />
+    />,
   );
 
   const hoursInput = screen.getByDisplayValue("12");
@@ -284,7 +282,7 @@ test("should apply the custom id on the minutes input when `minutesInputProps` h
       value={{ hours: "12", minutes: "30" }}
       onChange={() => {}}
       minutesInputProps={{ id: "foo" }}
-    />
+    />,
   );
 
   const minutesInput = screen.getByDisplayValue("30");
@@ -299,7 +297,7 @@ test("should call onChange when a user types in the hours input and toggle is re
       onChange={onChangeMock}
       hoursInputProps={{ id: "foo" }}
       minutesInputProps={{ id: "bar" }}
-    />
+    />,
   );
 
   const user = userEvent.setup({
@@ -317,7 +315,7 @@ test("should call onChange when a user types in the hours input and toggle is re
         id: "foo bar",
         value: { hours: "1", minutes: "", period: "AM" },
       },
-    })
+    }),
   );
 });
 
@@ -329,7 +327,7 @@ test("should call onChange when a user types in the hours input and toggle is no
       onChange={onChangeMock}
       hoursInputProps={{ id: "foo" }}
       minutesInputProps={{ id: "bar" }}
-    />
+    />,
   );
 
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -343,7 +341,7 @@ test("should call onChange when a user types in the hours input and toggle is no
         id: "foo bar",
         value: { hours: "1", minutes: "" },
       },
-    })
+    }),
   );
 });
 
@@ -355,7 +353,7 @@ test("should call onChange when a user types in the minutes input and toggle is
       onChange={onChangeMock}
       hoursInputProps={{ id: "foo" }}
       minutesInputProps={{ id: "bar" }}
-    />
+    />,
   );
 
   const user = userEvent.setup({
@@ -373,7 +371,7 @@ test("should call onChange when a user types in the minutes input and toggle is
         id: "foo bar",
         value: { hours: "", minutes: "1", period: "AM" },
       },
-    })
+    }),
   );
 });
 
@@ -385,7 +383,7 @@ test("should call onChange when a user types in the minutes input and toggle is
       onChange={onChangeMock}
       hoursInputProps={{ id: "foo" }}
       minutesInputProps={{ id: "bar" }}
-    />
+    />,
   );
 
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -400,7 +398,7 @@ test("should call onChange when a user types in the minutes input and toggle is
         id: "foo bar",
         value: { hours: "", minutes: "1" },
       },
-    })
+    }),
   );
 });
 
@@ -416,7 +414,7 @@ test("should call onChange when a user clicks the toggle that is not currently s
       onChange={onChangeMock}
       hoursInputProps={{ id: "foo" }}
       minutesInputProps={{ id: "bar" }}
-    />
+    />,
   );
 
   const pmToggle = screen.getByRole("button", { name: "PM" });
@@ -430,7 +428,7 @@ test("should call onChange when a user clicks the toggle that is not currently s
         id: "foo bar",
         value: { hours: "", minutes: "", period: "PM" },
       },
-    })
+    }),
   );
 });
 
@@ -446,7 +444,7 @@ test("should not call onChange when a user clicks the toggle that is currently s
       onChange={onChangeMock}
       hoursInputProps={{ id: "foo" }}
       minutesInputProps={{ id: "bar" }}
-    />
+    />,
   );
 
   const amToggle = screen.getByRole("button", { name: "AM" });
@@ -463,7 +461,7 @@ test("should call onBlur when the hours input is focused and the user presses sh
       value={{ hours: "12", minutes: "" }}
       onChange={() => {}}
       onBlur={onBlurMock}
-    />
+    />,
   );
 
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -481,7 +479,7 @@ test("should not call onBlur when the hours input is focused and the user presse
       value={{ hours: "12", minutes: "" }}
       onChange={() => {}}
       onBlur={onBlurMock}
-    />
+    />,
   );
 
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -499,7 +497,7 @@ test("should call onBlur when the minutes input is focused and the user presses
       value={{ hours: "", minutes: "12" }}
       onChange={() => {}}
       onBlur={onBlurMock}
-    />
+    />,
   );
 
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -517,7 +515,7 @@ test("should not call onBlur when the minutes input is focused and the user pres
       value={{ hours: "", minutes: "12" }}
       onChange={() => {}}
       onBlur={onBlurMock}
-    />
+    />,
   );
 
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -534,7 +532,7 @@ test("should render the validation message text when the hours input has an erro
       value={{ hours: "", minutes: "" }}
       onChange={() => {}}
       hoursInputProps={{ error: "There is an error" }}
-    />
+    />,
   );
 
   expect(screen.getByText("There is an error")).toBeVisible();
@@ -546,7 +544,7 @@ test("should render the validation message text when the minutes input has an er
       value={{ hours: "", minutes: "" }}
       onChange={() => {}}
       minutesInputProps={{ error: "There is an error" }}
-    />
+    />,
   );
 
   expect(screen.getByText("There is an error")).toBeVisible();
@@ -559,13 +557,13 @@ test("should render the validation message text when both the hours and minutes
       onChange={() => {}}
       hoursInputProps={{ error: "There is an error in hours input." }}
       minutesInputProps={{ error: "There is an error in minutes input." }}
-    />
+    />,
   );
 
   expect(
     screen.getByText(
-      "There is an error in hours input. There is an error in minutes input."
-    )
+      "There is an error in hours input. There is an error in minutes input.",
+    ),
   ).toBeVisible();
 });
 
@@ -575,12 +573,11 @@ test("should render the expected input styling when the hours input has an error
       value={{ hours: "", minutes: "" }}
       onChange={() => {}}
       hoursInputProps={{ error: true }}
-    />
+    />,
   );
 
-  const [hrsInputPresentation, minsInputPresentation] = screen.getAllByRole(
-    "presentation"
-  );
+  const [hrsInputPresentation, minsInputPresentation] =
+    screen.getAllByRole("presentation");
 
   expect(hrsInputPresentation).toHaveStyle({
     "box-shadow":
@@ -598,12 +595,11 @@ test("should render the expected input styling when the minutes input has an err
       value={{ hours: "", minutes: "" }}
       onChange={() => {}}
       minutesInputProps={{ error: true }}
-    />
+    />,
   );
 
-  const [hrsInputPresentation, minsInputPresentation] = screen.getAllByRole(
-    "presentation"
-  );
+  const [hrsInputPresentation, minsInputPresentation] =
+    screen.getAllByRole("presentation");
 
   expect(hrsInputPresentation).not.toHaveStyle({
     "box-shadow":
@@ -622,12 +618,11 @@ test("should render the expected input styling when both the hours and minutes i
       onChange={() => {}}
       hoursInputProps={{ error: true }}
       minutesInputProps={{ error: true }}
-    />
+    />,
   );
 
-  const [hrsInputPresentation, minsInputPresentation] = screen.getAllByRole(
-    "presentation"
-  );
+  const [hrsInputPresentation, minsInputPresentation] =
+    screen.getAllByRole("presentation");
 
   expect(hrsInputPresentation).toHaveStyle({
     "box-shadow":
@@ -645,7 +640,7 @@ test("should render the validation message text when the hours input has a warni
       value={{ hours: "", minutes: "" }}
       onChange={() => {}}
       hoursInputProps={{ warning: "There is an warning" }}
-    />
+    />,
   );
 
   expect(screen.getByText("There is an warning")).toBeVisible();
@@ -657,7 +652,7 @@ test("should render the validation message text when the minutes input has a war
       value={{ hours: "", minutes: "" }}
       onChange={() => {}}
       minutesInputProps={{ warning: "There is an warning" }}
-    />
+    />,
   );
 
   expect(screen.getByText("There is an warning")).toBeVisible();
@@ -670,13 +665,13 @@ test("should render the validation message text when both the hours and minutes
       onChange={() => {}}
       hoursInputProps={{ warning: "There is an warning in hours input." }}
       minutesInputProps={{ warning: "There is an warning in minutes input." }}
-    />
+    />,
   );
 
   expect(
     screen.getByText(
-      "There is an warning in hours input. There is an warning in minutes input."
-    )
+      "There is an warning in hours input. There is an warning in minutes input.",
+    ),
   ).toBeVisible();
 });
 
@@ -686,20 +681,19 @@ test("should render the expected input styling when the hours input has a warnin
       value={{ hours: "", minutes: "" }}
       onChange={() => {}}
       hoursInputProps={{ warning: true }}
-    />
+    />,
   );
 
-  const [hrsInputPresentation, minsInputPresentation] = screen.getAllByRole(
-    "presentation"
-  );
+  const [hrsInputPresentation, minsInputPresentation] =
+    screen.getAllByRole("presentation");
 
   expect(hrsInputPresentation).toHaveStyleRule(
     "border-color",
-    "var(--colorsSemanticCaution500) !important"
+    "var(--colorsSemanticCaution500) !important",
   );
   expect(minsInputPresentation).toHaveStyleRule(
     "border",
-    "1px solid var(--colorsUtilityMajor300)"
+    "1px solid var(--colorsUtilityMajor300)",
   );
 });
 
@@ -709,20 +703,19 @@ test("should render the expected input styling when the minutes input has a warn
       value={{ hours: "", minutes: "" }}
       onChange={() => {}}
       minutesInputProps={{ warning: true }}
-    />
+    />,
   );
 
-  const [hrsInputPresentation, minsInputPresentation] = screen.getAllByRole(
-    "presentation"
-  );
+  const [hrsInputPresentation, minsInputPresentation] =
+    screen.getAllByRole("presentation");
 
   expect(hrsInputPresentation).toHaveStyleRule(
     "border",
-    "1px solid var(--colorsUtilityMajor300)"
+    "1px solid var(--colorsUtilityMajor300)",
   );
   expect(minsInputPresentation).toHaveStyleRule(
     "border-color",
-    "var(--colorsSemanticCaution500) !important"
+    "var(--colorsSemanticCaution500) !important",
   );
 });
 
@@ -733,20 +726,19 @@ test("should render the expected input styling when the hours and minutes inputs
       onChange={() => {}}
       hoursInputProps={{ warning: true }}
       minutesInputProps={{ warning: true }}
-    />
+    />,
   );
 
-  const [hrsInputPresentation, minsInputPresentation] = screen.getAllByRole(
-    "presentation"
-  );
+  const [hrsInputPresentation, minsInputPresentation] =
+    screen.getAllByRole("presentation");
 
   expect(hrsInputPresentation).toHaveStyleRule(
     "border-color",
-    "var(--colorsSemanticCaution500) !important"
+    "var(--colorsSemanticCaution500) !important",
   );
   expect(minsInputPresentation).toHaveStyleRule(
     "border-color",
-    "var(--colorsSemanticCaution500) !important"
+    "var(--colorsSemanticCaution500) !important",
   );
 });
 
@@ -757,7 +749,7 @@ test("should set the required attribute on the inputs when the prop is set", ()
       onChange={() => {}}
       required
       label="Label"
-    />
+    />,
   );
 
   expect(screen.getByDisplayValue("12")).toBeRequired();
@@ -771,7 +763,7 @@ test("should append the optional text on the label when isOptional prop is set",
       onChange={() => {}}
       isOptional
       label="Label"
-    />
+    />,
   );
 
   // use jest-styled-component's assertion as workaround for the pseudo element not being accessible
@@ -786,7 +778,7 @@ test("should render with the default translations if no overrides are provided",
       value={{ hours: "", minutes: "", period: "AM" }}
       onChange={() => {}}
       label="Label"
-    />
+    />,
   );
 
   expect(screen.getByText("Hrs.")).toBeVisible();
@@ -803,7 +795,7 @@ test("should render with the overridden translations if provided", () => {
         onChange={() => {}}
         label="Label"
       />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   expect(screen.getByText("foo-label")).toBeVisible();
@@ -824,7 +816,7 @@ test("should render the labels for the hours and minutes inputs if provided inst
         onChange={() => {}}
         label="Label"
       />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   expect(screen.getByText("hours prop string")).toBeVisible();
@@ -864,7 +856,7 @@ it.each(["disabled", "readOnly"])(
         value={{ hours: "", minutes: "", period: "AM" }}
         onChange={onChangeMock}
         {...{ [prop]: true }}
-      />
+      />,
     );
 
     const pmToggle = screen.getByRole("button", { name: "PM" });
@@ -872,7 +864,7 @@ it.each(["disabled", "readOnly"])(
     await user.click(pmToggle);
 
     expect(onChangeMock).not.toHaveBeenCalled();
-  }
+  },
 );
 
 test("should apply the expected styling when disabled prop is set", () => {
@@ -883,7 +875,7 @@ test("should apply the expected styling when disabled prop is set", () => {
       label="label"
       inputHint="hint"
       disabled
-    />
+    />,
   );
 
   const mainLabel = screen.getByText("label");
@@ -905,7 +897,7 @@ test("should apply the expected styling when readOnly prop is set", () => {
       label="label"
       inputHint="hint"
       readOnly
-    />
+    />,
   );
 
   const hintText = screen.getByText("hint");
@@ -925,7 +917,7 @@ test("should have the expected `data-` attributes set on the root element", () =
       label="label"
       data-element="foo"
       data-role="bar"
-    />
+    />,
   );
 
   const fieldset = screen.getByRole("group", { name: "label" });
@@ -947,7 +939,7 @@ test("should apply the custom `data-` attributes on the input wrappers when they
         "data-element": "foo",
         "data-role": "minutes-input-wrapper",
       }}
-    />
+    />,
   );
 
   const hoursWrapper = screen.getByTestId("hours-input-wrapper");
@@ -977,14 +969,14 @@ test("should apply the custom `data-` attributes on the toggle component wrapper
           "data-role": "pm-button-wrapper",
         },
       }}
-    />
+    />,
   );
 
   const fieldset = screen.getByRole("group", { name: "Time" });
   const toggleButtonGroup = within(fieldset).getByRole("group");
   expect(toggleButtonGroup).toHaveAttribute(
     "data-component",
-    "time-button-toggle-group"
+    "time-button-toggle-group",
   );
   expect(toggleButtonGroup).toHaveAttribute("data-element", "foo");
   expect(toggleButtonGroup).toHaveAttribute("data-role", "bar");
diff --git a/src/components/toast/toast-test.stories.tsx b/src/components/toast/toast-test.stories.tsx
index bb31d29667..2df0e1743d 100644
--- a/src/components/toast/toast-test.stories.tsx
+++ b/src/components/toast/toast-test.stories.tsx
@@ -31,7 +31,7 @@ export const Default = ({
     ev?:
       | KeyboardEvent
       | React.KeyboardEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLButtonElement, MouseEvent>
+      | React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => {
     setIsOpen(!isOpen);
     action("click")(ev);
diff --git a/src/components/toast/toast.component.tsx b/src/components/toast/toast.component.tsx
index 8afe9834e7..383ee11607 100644
--- a/src/components/toast/toast.component.tsx
+++ b/src/components/toast/toast.component.tsx
@@ -63,7 +63,7 @@ export interface ToastProps {
     ev?:
       | KeyboardEvent
       | React.KeyboardEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => void;
   /** Data tag prop bag for close Button */
   closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
@@ -95,7 +95,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
       closeButtonDataProps,
       ...restProps
     }: ToastProps,
-    ref
+    ref,
   ) => {
     const isNotice = variant === "notice";
     const isNotification = variant === "notification";
@@ -127,7 +127,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
           onDismiss(ev);
         }
       },
-      [onDismiss]
+      [onDismiss],
     );
 
     useModalManager({
@@ -153,7 +153,8 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
         if (open) {
           // setTimeout needed as otherwise this runs before the ref is populated
           setTimeout(() => {
-            focusedElementBeforeOpening.current = document.activeElement as HTMLElement | null;
+            focusedElementBeforeOpening.current =
+              document.activeElement as HTMLElement | null;
             toastContentNodeRef.current?.focus();
           }, 0);
         } else if (focusedElementBeforeOpening.current) {
@@ -276,7 +277,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
         </ToastWrapper>
       </StyledPortal>
     );
-  }
+  },
 );
 
 Toast.displayName = "Toast";
diff --git a/src/components/toast/toast.pw.tsx b/src/components/toast/toast.pw.tsx
index 67876b6d02..a079945b3a 100644
--- a/src/components/toast/toast.pw.tsx
+++ b/src/components/toast/toast.pw.tsx
@@ -91,14 +91,16 @@ test.describe("Toast component", () => {
     await expect(getDataComponentByValue(page, testData)).toBeVisible();
   });
 
-  ([
-    [TOAST_COLORS[0], colorTypes[0]],
-    [TOAST_COLORS[1], colorTypes[1]],
-    [TOAST_COLORS[2], colorTypes[2]],
-    [TOAST_COLORS[3], colorTypes[3]],
-    [TOAST_COLORS[4], colorTypes[4]],
-    [TOAST_COLORS[5], colorTypes[1]],
-  ] as [ToastProps["variant"], string][]).forEach(([variant, color]) => {
+  (
+    [
+      [TOAST_COLORS[0], colorTypes[0]],
+      [TOAST_COLORS[1], colorTypes[1]],
+      [TOAST_COLORS[2], colorTypes[2]],
+      [TOAST_COLORS[3], colorTypes[3]],
+      [TOAST_COLORS[4], colorTypes[4]],
+      [TOAST_COLORS[5], colorTypes[1]],
+    ] as [ToastProps["variant"], string][]
+  ).forEach(([variant, color]) => {
     test(`should render with ${variant} variant`, async ({ mount, page }) => {
       await mount(<ToastComponent variant={variant} />);
 
@@ -115,7 +117,7 @@ test.describe("Toast component", () => {
     await expect(toast).toHaveCSS("background-color", "rgb(51, 91, 112)");
     await expect(toast).toHaveCSS(
       "box-shadow",
-      "rgba(0, 20, 29, 0.1) 0px 10px 30px 0px, rgba(0, 20, 29, 0.1) 0px 30px 60px 0px"
+      "rgba(0, 20, 29, 0.1) 0px 10px 30px 0px, rgba(0, 20, 29, 0.1) 0px 30px 60px 0px",
     );
   });
 
@@ -175,7 +177,7 @@ test.describe("Toast component", () => {
 
     await expect(icon).toHaveCSS(
       "box-shadow",
-      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
+      "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px",
     );
     await expect(icon).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
   });
@@ -203,7 +205,7 @@ test.describe("Toast component", () => {
 
       await expect(toastComponent(page).locator("..").locator("..")).toHaveCSS(
         "justify-content",
-        align
+        align,
       );
     });
   });
@@ -255,7 +257,7 @@ test.describe("check events for Toast component", () => {
         onDismiss={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
     await closeIconButton(page).click();
     expect(callbackCount).toBe(1);
@@ -271,7 +273,7 @@ test.describe("check events for Toast component", () => {
         onDismiss={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
     await page.keyboard.press("Escape");
 
@@ -281,12 +283,14 @@ test.describe("check events for Toast component", () => {
 });
 
 test.describe("Accessibility tests for Toast component", () => {
-  ([
-    TOAST_COLORS[0],
-    TOAST_COLORS[1],
-    TOAST_COLORS[2],
-    TOAST_COLORS[3],
-  ] as ToastProps["variant"][]).forEach((variant) => {
+  (
+    [
+      TOAST_COLORS[0],
+      TOAST_COLORS[1],
+      TOAST_COLORS[2],
+      TOAST_COLORS[3],
+    ] as ToastProps["variant"][]
+  ).forEach((variant) => {
     test(`should render with ${variant} variant and check accessibility`, async ({
       mount,
       page,
diff --git a/src/components/toast/toast.test.tsx b/src/components/toast/toast.test.tsx
index 6c9dfbaffc..f6c4c1b9e9 100644
--- a/src/components/toast/toast.test.tsx
+++ b/src/components/toast/toast.test.tsx
@@ -160,7 +160,7 @@ describe("Event tests", () => {
     render(
       <Toast open timeout={2000} onDismiss={onDismissMock}>
         foobar
-      </Toast>
+      </Toast>,
     );
 
     jest.advanceTimersByTime(2000);
@@ -173,7 +173,7 @@ describe("Event tests", () => {
     render(
       <Toast open={false} timeout={2000} onDismiss={onDismissMock}>
         foobar
-      </Toast>
+      </Toast>,
     );
 
     jest.advanceTimersByTime(2000);
@@ -185,7 +185,7 @@ describe("Event tests", () => {
     render(
       <Toast open data-role="toast">
         foobar
-      </Toast>
+      </Toast>,
     );
 
     jest.runAllTimers();
@@ -198,7 +198,7 @@ describe("Event tests", () => {
     render(
       <Toast open disableAutoFocus>
         foobar
-      </Toast>
+      </Toast>,
     );
 
     jest.runAllTimers();
@@ -213,7 +213,7 @@ describe("Event tests", () => {
     render(
       <Toast open data-role="toast">
         foobar
-      </Toast>
+      </Toast>,
     );
 
     const toast = screen.getByTestId("toast");
@@ -296,7 +296,7 @@ test("should render close button when `onDismiss` prop is set", () => {
   render(
     <Toast open onDismiss={() => {}}>
       foobar
-    </Toast>
+    </Toast>,
   );
 
   const closeButton = screen.getByRole("button", { name: "Close" });
@@ -308,7 +308,7 @@ test("should render with any custom classes passed via the `className` prop", ()
   render(
     <Toast open data-role="toast" className="exampleClass">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   expect(screen.getByTestId("toast")).toHaveClass("exampleClass");
@@ -318,7 +318,7 @@ test("should render with provided custom id passed via `id` prop", () => {
   render(
     <Toast open data-role="toast" id="exampleId">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   expect(screen.getByTestId("toast")).toHaveAttribute("id", "exampleId");
@@ -328,7 +328,7 @@ test("should render any child content passed via the `children` prop", () => {
   render(
     <Toast open>
       <span>foobar</span>
-    </Toast>
+    </Toast>,
   );
 
   expect(screen.getByText("foobar")).toBeVisible();
@@ -338,7 +338,7 @@ test("should render with provided `data-` attributes", () => {
   render(
     <Toast open data-element="toast-element" data-role="toast-role">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   const toast = screen.getByTestId("toast-role");
@@ -372,7 +372,7 @@ test("should allow custom data props to be passed to close button to be passed v
       }}
     >
       foobar
-    </Toast>
+    </Toast>,
   );
 
   const closeButton = screen.getByRole("button", { name: "Close" });
@@ -385,7 +385,7 @@ test("should render content container with correct expected styling when `maxWid
   render(
     <Toast maxWidth="200px" data-role="toast">
       Child
-    </Toast>
+    </Toast>,
   );
 
   expect(screen.getByTestId("toast")).toHaveStyle({ maxWidth: "200px" });
@@ -395,7 +395,7 @@ test("should render with correct styling when `variant` prop is set to 'notice'
   render(
     <Toast open variant="notice" data-role="toast">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   const toast = screen.getByTestId("toast");
@@ -411,7 +411,7 @@ test("should render with correct styling when `variant` prop is set to 'notice'
   });
   expect(toast).toHaveStyleRule(
     "background-color",
-    "var(--colorsUtilityMajor400)"
+    "var(--colorsUtilityMajor400)",
   );
   expect(toast).toHaveStyleRule("color", "var(--colorsSemanticNeutralYang100)");
 
@@ -428,7 +428,7 @@ test("should render with correct styling when `variant` prop is set to 'notice'
   render(
     <Toast open variant="notice" onDismiss={() => {}}>
       foobar
-    </Toast>
+    </Toast>,
   );
 
   expect(screen.getByTestId("toast-content")).toHaveStyle({
@@ -452,7 +452,7 @@ test("should render with correct styling when `variant` prop is set to 'notice'
       onDismiss={() => {}}
     >
       foobar
-    </Toast>
+    </Toast>,
   );
 
   const toast = screen.getByTestId("toast");
@@ -472,7 +472,7 @@ test("should render with correct styling when `variant` prop is set to 'notice'
       onDismiss={() => {}}
     >
       foobar
-    </Toast>
+    </Toast>,
   );
 
   const toast = screen.getByTestId("toast");
@@ -495,11 +495,11 @@ test.each<[ToastProps["variant"], string]>([
     render(
       <Toast open variant={variant}>
         foobar
-      </Toast>
+      </Toast>,
     );
 
     expect(screen.getByTestId("icon")).toHaveAttribute("type", iconType);
-  }
+  },
 );
 
 test("should not throw when ref is a function", () => {
@@ -507,7 +507,7 @@ test("should not throw when ref is a function", () => {
     render(
       <Toast onDismiss={() => {}} ref={(ref) => ref}>
         foobar
-      </Toast>
+      </Toast>,
     );
   }).not.toThrow();
 });
@@ -517,7 +517,7 @@ test("should pass ref to the wrapper element", () => {
   render(
     <Toast onDismiss={() => {}} ref={ref}>
       foobar
-    </Toast>
+    </Toast>,
   );
 
   expect(ref.current).toBe(screen.getByTestId("toast-wrapper"));
@@ -527,7 +527,7 @@ test("should render with expected styling when `align` prop is 'right'", () => {
   render(
     <Toast open align="right" data-role="toast">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   expect(screen.getByRole("region")).toHaveStyle({
@@ -544,7 +544,7 @@ test("should render with expected styling when `align` prop is 'center'", () =>
   render(
     <Toast open align="center" data-role="toast">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   expect(screen.getByRole("region")).toHaveStyle({
@@ -560,7 +560,7 @@ test("should render with expected styling when `align` prop is 'left'", () => {
   render(
     <Toast open align="left" data-role="toast">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   expect(screen.getByRole("region")).toHaveStyle({
@@ -576,7 +576,7 @@ test("should render with expected styling when `alignY` prop is set to 'top'", (
   render(
     <Toast alignY="top" data-role="toast">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   const toast = screen.getByTestId("toast");
@@ -591,7 +591,7 @@ test("should render with expected styling when `alignY` prop is set to 'bottom'"
   render(
     <Toast alignY="bottom" data-role="toast">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   const toast = screen.getByTestId("toast");
@@ -606,7 +606,7 @@ test("should render with expected styling when `alignY` prop is 'center' and `al
   render(
     <Toast alignY="center" align="left" data-role="toast">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   expect(screen.getByTestId("carbon-portal-exit")).toHaveStyle({
@@ -619,7 +619,7 @@ test("should render with expected styling when `alignY` prop is 'center' and `al
   render(
     <Toast alignY="center" data-role="toast">
       foobar
-    </Toast>
+    </Toast>,
   );
 
   expect(screen.getByTestId("carbon-portal-exit")).toHaveStyle({
diff --git a/src/components/tooltip/tooltip-test.stories.tsx b/src/components/tooltip/tooltip-test.stories.tsx
index a8897dd3b9..c32fe87688 100644
--- a/src/components/tooltip/tooltip-test.stories.tsx
+++ b/src/components/tooltip/tooltip-test.stories.tsx
@@ -132,7 +132,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     >
       {children}
     </button>
-  )
+  ),
 );
 Button.displayName = "Tooltip";
 
@@ -146,6 +146,6 @@ const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(
     >
       {children}
     </button>
-  )
+  ),
 );
 SecondaryButton.displayName = "Tooltip";
diff --git a/src/components/tooltip/tooltip.component.tsx b/src/components/tooltip/tooltip.component.tsx
index f3184a6326..ec49691323 100644
--- a/src/components/tooltip/tooltip.component.tsx
+++ b/src/components/tooltip/tooltip.component.tsx
@@ -25,7 +25,7 @@ import Portal from "../portal";
 
 function preserveRef<ElementType>(
   ref: React.ForwardedRef<ElementType | null>,
-  node: ElementType
+  node: ElementType,
 ) {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -91,7 +91,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement | null, TooltipProps>(
       target,
       ...rest
     }: TooltipProps,
-    ref
+    ref,
   ) => {
     const targetInternalRef = useRef<HTMLElement | null>(null);
 
@@ -170,7 +170,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement | null, TooltipProps>(
         }
         return mainAxisOffset;
       },
-      [inputSize, isPartOfInput]
+      [inputSize, isPartOfInput],
     );
 
     const defaultMiddleware = useMemo(
@@ -191,7 +191,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement | null, TooltipProps>(
         }),
         arrow({ element: arrowReference }),
       ],
-      [calculateOffset, arrowReference]
+      [calculateOffset, arrowReference],
     );
 
     const {
@@ -220,10 +220,10 @@ export const Tooltip = React.forwardRef<HTMLDivElement | null, TooltipProps>(
         preserveRef(
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           (children as any).ref as React.ForwardedRef<HTMLElement | null>,
-          node
+          node,
         );
       },
-      [reference, children, target]
+      [reference, children, target],
     );
 
     const handleFloatingRef = useCallback(
@@ -231,7 +231,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement | null, TooltipProps>(
         floating(node);
         preserveRef(ref, node);
       },
-      [floating, ref]
+      [floating, ref],
     );
 
     const staticSide = {
@@ -252,12 +252,12 @@ export const Tooltip = React.forwardRef<HTMLDivElement | null, TooltipProps>(
       !flipOverrides ||
       (Array.isArray(flipOverrides) &&
         flipOverrides.every((placement) =>
-          TOOLTIP_POSITIONS.includes(placement)
+          TOOLTIP_POSITIONS.includes(placement),
         ));
 
     invariant(
       isFlipOverridesValid,
-      `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`
+      `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`,
     );
 
     return (
@@ -297,7 +297,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement | null, TooltipProps>(
         ) : null}
       </>
     );
-  }
+  },
 );
 
 Tooltip.displayName = "Tooltip";
diff --git a/src/components/tooltip/tooltip.pw.tsx b/src/components/tooltip/tooltip.pw.tsx
index dcefb14492..5ef014ec13 100644
--- a/src/components/tooltip/tooltip.pw.tsx
+++ b/src/components/tooltip/tooltip.pw.tsx
@@ -65,12 +65,9 @@ test.describe("Tooltip component", () => {
     await expect(getDataElementByValue(page, "tooltip")).not.toBeVisible();
   });
 
-  (["bottom", "left", "right", "top"] as [
-    "bottom",
-    "left",
-    "right",
-    "top"
-  ]).forEach((position) => {
+  (
+    ["bottom", "left", "right", "top"] as ["bottom", "left", "right", "top"]
+  ).forEach((position) => {
     test(`should render with tooltip position set to ${position}`, async ({
       mount,
       page,
@@ -80,7 +77,7 @@ test.describe("Tooltip component", () => {
       await expect(getDataElementByValue(page, "tooltip")).toBeVisible();
       await expect(getDataElementByValue(page, "tooltip")).toHaveAttribute(
         "data-placement",
-        position
+        position,
       );
     });
   });
@@ -94,7 +91,7 @@ test.describe("Tooltip component", () => {
 
       await expect(getDataElementByValue(page, "tooltip")).toHaveAttribute(
         "type",
-        type
+        type,
       );
     });
   });
@@ -108,7 +105,7 @@ test.describe("Tooltip component", () => {
 
       await expect(getDataElementByValue(page, "tooltip")).toHaveCSS(
         "background-color",
-        color
+        color,
       );
     });
   });
@@ -122,15 +119,17 @@ test.describe("Tooltip component", () => {
 
       await expect(getDataElementByValue(page, "tooltip")).toHaveCSS(
         "color",
-        color
+        color,
       );
     });
   });
 
-  ([
-    [SIZE.MEDIUM, 14],
-    [SIZE.LARGE, 16],
-  ] as [TooltipProps["size"], number][]).forEach(([size, fontSize]) => {
+  (
+    [
+      [SIZE.MEDIUM, 14],
+      [SIZE.LARGE, 16],
+    ] as [TooltipProps["size"], number][]
+  ).forEach(([size, fontSize]) => {
     test(`should render with size prop set to ${size}`, async ({
       mount,
       page,
@@ -139,7 +138,7 @@ test.describe("Tooltip component", () => {
 
       await expect(getDataElementByValue(page, "tooltip")).toHaveCSS(
         "font-size",
-        `${fontSize}px`
+        `${fontSize}px`,
       );
     });
   });
@@ -166,7 +165,7 @@ test.describe("Tooltip component", () => {
   }) => {
     await page.setViewportSize({ height: 120, width: 700 });
     await mount(
-      <TooltipComponent flipOverrides={["left"]} position="bottom" />
+      <TooltipComponent flipOverrides={["left"]} position="bottom" />,
     );
 
     const tooltip = page.getByRole("tooltip");
@@ -184,7 +183,7 @@ test.describe("Tooltip component", () => {
   }) => {
     await page.setViewportSize({ height: 120, width: 700 });
     await mount(
-      <TooltipComponent flipOverrides={["right"]} position="bottom" />
+      <TooltipComponent flipOverrides={["right"]} position="bottom" />,
     );
 
     const tooltip = page.getByRole("tooltip");
@@ -196,17 +195,19 @@ test.describe("Tooltip component", () => {
     expect(await getXValue(tooltip)).toBeGreaterThan(await getXValue(button));
   });
 
-  ([
-    [SIZE.SMALL, 15],
-    [SIZE.MEDIUM, 14],
-    [SIZE.LARGE, 10],
-  ] as [TooltipProps["inputSize"], number][]).forEach(([inputSize, offset]) => {
+  (
+    [
+      [SIZE.SMALL, 15],
+      [SIZE.MEDIUM, 14],
+      [SIZE.LARGE, 10],
+    ] as [TooltipProps["inputSize"], number][]
+  ).forEach(([inputSize, offset]) => {
     test(`should have correct styles applied when inputSize is ${inputSize} and tooltip position is set to top`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <TooltipComponent isPartOfInput inputSize={inputSize} position="top" />
+        <TooltipComponent isPartOfInput inputSize={inputSize} position="top" />,
       );
 
       const element = getDataElementByValue(page, "tooltip");
@@ -214,11 +215,13 @@ test.describe("Tooltip component", () => {
     });
   });
 
-  ([
-    [SIZE.SMALL, 5],
-    [SIZE.MEDIUM, 6],
-    [SIZE.LARGE, 10],
-  ] as [TooltipProps["inputSize"], number][]).forEach(([inputSize, offset]) => {
+  (
+    [
+      [SIZE.SMALL, 5],
+      [SIZE.MEDIUM, 6],
+      [SIZE.LARGE, 10],
+    ] as [TooltipProps["inputSize"], number][]
+  ).forEach(([inputSize, offset]) => {
     test(`should have correct styles applied when inputSize is ${inputSize} and tooltip position is set to bottom`, async ({
       mount,
       page,
@@ -228,7 +231,7 @@ test.describe("Tooltip component", () => {
           isPartOfInput
           inputSize={inputSize}
           position="bottom"
-        />
+        />,
       );
 
       const buttonRect = await page
@@ -239,22 +242,28 @@ test.describe("Tooltip component", () => {
       await assertCssValueIsApproximately(
         element,
         "top",
-        buttonRect.top + buttonRect.height + offset
+        buttonRect.top + buttonRect.height + offset,
       );
     });
   });
 
-  ([
-    [SIZE.SMALL, 47],
-    [SIZE.MEDIUM, 44],
-    [SIZE.LARGE, 40],
-  ] as [TooltipProps["inputSize"], number][]).forEach(([inputSize, offset]) => {
+  (
+    [
+      [SIZE.SMALL, 47],
+      [SIZE.MEDIUM, 44],
+      [SIZE.LARGE, 40],
+    ] as [TooltipProps["inputSize"], number][]
+  ).forEach(([inputSize, offset]) => {
     test(`should have correct styles applied when inputSize is ${inputSize} and tooltip position is set to left`, async ({
       mount,
       page,
     }) => {
       await mount(
-        <TooltipComponent isPartOfInput inputSize={inputSize} position="left" />
+        <TooltipComponent
+          isPartOfInput
+          inputSize={inputSize}
+          position="left"
+        />,
       );
 
       const element = getDataElementByValue(page, "tooltip");
@@ -262,11 +271,13 @@ test.describe("Tooltip component", () => {
     });
   });
 
-  ([
-    [SIZE.SMALL, 5],
-    [SIZE.MEDIUM, 8],
-    [SIZE.LARGE, 12],
-  ] as [TooltipProps["inputSize"], number][]).forEach(([inputSize, offset]) => {
+  (
+    [
+      [SIZE.SMALL, 5],
+      [SIZE.MEDIUM, 8],
+      [SIZE.LARGE, 12],
+    ] as [TooltipProps["inputSize"], number][]
+  ).forEach(([inputSize, offset]) => {
     test(`should have correct styles applied when inputSize is ${inputSize} and tooltip position is set to right`, async ({
       mount,
       page,
@@ -276,7 +287,7 @@ test.describe("Tooltip component", () => {
           isPartOfInput
           inputSize={inputSize}
           position="right"
-        />
+        />,
       );
 
       const buttonRect = await page
@@ -287,7 +298,7 @@ test.describe("Tooltip component", () => {
       await assertCssValueIsApproximately(
         element,
         "left",
-        buttonRect.left + buttonRect.width + offset
+        buttonRect.left + buttonRect.width + offset,
       );
     });
   });
@@ -372,7 +383,7 @@ test.describe("Tooltip component", () => {
 
     await expect(getDataElementByValue(page, "tooltip")).toHaveCSS(
       "border-radius",
-      "4px"
+      "4px",
     );
   });
 });
@@ -417,12 +428,14 @@ test.describe("Accessibility tests for Tooltip component", () => {
     await checkAccessibility(page);
   });
 
-  ([
-    ["top", 0],
-    ["bottom", 1],
-    ["left", 2],
-    ["right", 3],
-  ] as [string, number][]).forEach(([position, button]) => {
+  (
+    [
+      ["top", 0],
+      ["bottom", 1],
+      ["left", 2],
+      ["right", 3],
+    ] as [string, number][]
+  ).forEach(([position, button]) => {
     // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
     test.skip(`should pass accessibility tests for Positioning story when position is set to ${position}`, async ({
       mount,
diff --git a/src/components/tooltip/tooltip.stories.tsx b/src/components/tooltip/tooltip.stories.tsx
index 38056e87b2..195dc84bf0 100644
--- a/src/components/tooltip/tooltip.stories.tsx
+++ b/src/components/tooltip/tooltip.stories.tsx
@@ -21,7 +21,7 @@ export const Default: Story = () => {
       <Button buttonType="primary" ref={ref}>
         {children}
       </Button>
-    )
+    ),
   );
   Component.displayName = "Example Button";
   return (
@@ -41,7 +41,7 @@ export const Controlled: Story = () => {
       <Button buttonType="primary" ref={ref}>
         {children}
       </Button>
-    )
+    ),
   );
   Component.displayName = "Example Button";
   return (
@@ -66,7 +66,7 @@ export const Positioning: Story = () => {
       <Button buttonType="primary" ref={ref}>
         {children}
       </Button>
-    )
+    ),
   );
   Component.displayName = "Example Button";
   return (
@@ -93,7 +93,7 @@ export const FlipBehaviourOverrides: Story = () => {
       <Button buttonType="primary" ref={ref}>
         {children}
       </Button>
-    )
+    ),
   );
   Component.displayName = "Example Button";
   return (
@@ -117,7 +117,7 @@ export const LargeTooltip: Story = () => {
       <Button buttonType="primary" ref={ref}>
         {children}
       </Button>
-    )
+    ),
   );
   Component.displayName = "Example Button";
   return (
@@ -137,7 +137,7 @@ export const Types: Story = () => {
       <Button buttonType="primary" ref={ref}>
         {children}
       </Button>
-    )
+    ),
   );
   Component.displayName = "Example Button";
   return (
@@ -162,7 +162,7 @@ export const ColorOverrides: Story = () => {
       <Button buttonType="primary" ref={ref}>
         {children}
       </Button>
-    )
+    ),
   );
   Component.displayName = "Example Button";
   return (
diff --git a/src/components/tooltip/tooltip.test.tsx b/src/components/tooltip/tooltip.test.tsx
index 5c0f748e2d..c1f6ff508a 100644
--- a/src/components/tooltip/tooltip.test.tsx
+++ b/src/components/tooltip/tooltip.test.tsx
@@ -15,7 +15,7 @@ function renderTooltip(props: Partial<TooltipProps> = {}) {
   return render(
     <Tooltip {...props} message={props.message || "foo"}>
       {props.children || <div data-role="tooltip-target">Target</div>}
-    </Tooltip>
+    </Tooltip>,
   );
 }
 
@@ -156,7 +156,7 @@ describe("Tooltip", () => {
       const isTopOrBottom = (position: TooltipPositions) =>
         ["top", "bottom"].includes(position);
       const offsets = (
-        position: TooltipPositions
+        position: TooltipPositions,
       ): Record<InputSizes, number> => ({
         small: 5,
         medium: isTopOrBottom(position) ? 6 : 8,
@@ -185,14 +185,14 @@ describe("Tooltip", () => {
               expect(
                 middleware?.options({
                   placement: position,
-                })
+                }),
               ).toMatchObject({
                 mainAxis: offsets(position)[size],
               });
               useFloatingSpy.mockRestore();
-            }
+            },
           );
-        }
+        },
       );
     });
 
@@ -223,8 +223,9 @@ describe("Tooltip", () => {
         ["bottom", "top"],
         ["left", "right"],
       ])("applies correct position", (floatingUiPlacement, arrowPlacement) => {
-        const originalUseFloating = jest.requireActual("@floating-ui/react-dom")
-          .useFloating;
+        const originalUseFloating = jest.requireActual(
+          "@floating-ui/react-dom",
+        ).useFloating;
         const useFloatingSpy = jest
           .spyOn(floatingUi, "useFloating")
           .mockImplementation((props) => {
@@ -278,7 +279,7 @@ describe("Tooltip", () => {
       render(
         <Tooltip message="foo" isVisible ref={testRef}>
           <span>Test tooltip</span>
-        </Tooltip>
+        </Tooltip>,
       );
 
       expect(testRef.current).toEqual(screen.getByRole("tooltip"));
@@ -289,7 +290,7 @@ describe("Tooltip", () => {
       render(
         <Tooltip message="foo" isVisible ref={testCallbackRef}>
           <span>Test tooltip</span>
-        </Tooltip>
+        </Tooltip>,
       );
 
       expect(testCallbackRef).toHaveBeenCalledWith(screen.getByRole("tooltip"));
diff --git a/src/components/typography/typography.component.tsx b/src/components/typography/typography.component.tsx
index 5f117c539c..246636acf4 100644
--- a/src/components/typography/typography.component.tsx
+++ b/src/components/typography/typography.component.tsx
@@ -30,7 +30,7 @@ export const VARIANT_TYPES = [
   "ul",
   "ol",
 ] as const;
-export type VariantTypes = typeof VARIANT_TYPES[number];
+export type VariantTypes = (typeof VARIANT_TYPES)[number];
 export interface TypographyProps extends SpaceProps, TagProps {
   /** Override the variant component */
   as?: React.ElementType;
diff --git a/src/components/typography/typography.pw.tsx b/src/components/typography/typography.pw.tsx
index 87fec4ef57..6598b28312 100644
--- a/src/components/typography/typography.pw.tsx
+++ b/src/components/typography/typography.pw.tsx
@@ -35,7 +35,7 @@ const VARIANT_TYPES = [
   "ol",
 ] as const;
 
-type VariantTypes = typeof VARIANT_TYPES[number];
+type VariantTypes = (typeof VARIANT_TYPES)[number];
 
 const getAs = (variant: VariantTypes) => {
   switch (variant) {
@@ -172,7 +172,7 @@ test.describe("should check Typography component properties", () => {
       page,
     }) => {
       await mount(
-        <Typography variant={variant}>{testDataStandard}</Typography>
+        <Typography variant={variant}>{testDataStandard}</Typography>,
       );
 
       const typographyElement = page.locator(getAs(variant));
@@ -186,7 +186,7 @@ test.describe("should check Typography component properties", () => {
       page,
     }) => {
       await mount(
-        <Typography variant={variant}>{testDataStandard}</Typography>
+        <Typography variant={variant}>{testDataStandard}</Typography>,
       );
 
       const fontSize = getSize(variant);
@@ -202,7 +202,7 @@ test.describe("should check Typography component properties", () => {
       page,
     }) => {
       await mount(
-        <Typography variant={variant}>{testDataStandard}</Typography>
+        <Typography variant={variant}>{testDataStandard}</Typography>,
       );
 
       const lineHeight = getLineHeight(variant);
@@ -218,7 +218,7 @@ test.describe("should check Typography component properties", () => {
       page,
     }) => {
       await mount(
-        <Typography variant={variant}>{testDataStandard}</Typography>
+        <Typography variant={variant}>{testDataStandard}</Typography>,
       );
 
       const fontWeight = getWeight(variant);
@@ -234,7 +234,7 @@ test.describe("should check Typography component properties", () => {
       page,
     }) => {
       await mount(
-        <Typography variant={variant}>{testDataStandard}</Typography>
+        <Typography variant={variant}>{testDataStandard}</Typography>,
       );
 
       const textTransform = getTransform(variant);
@@ -242,7 +242,7 @@ test.describe("should check Typography component properties", () => {
 
       await expect(typographyElement).toHaveCSS(
         "text-transform",
-        textTransform
+        textTransform,
       );
     });
   });
@@ -253,7 +253,7 @@ test.describe("should check Typography component properties", () => {
       page,
     }) => {
       await mount(
-        <Typography variant={variant}>{testDataStandard}</Typography>
+        <Typography variant={variant}>{testDataStandard}</Typography>,
       );
 
       const textDecorationLine = getDecoration(variant);
@@ -261,7 +261,7 @@ test.describe("should check Typography component properties", () => {
 
       await expect(typographyElement).toHaveCSS(
         "text-decoration-line",
-        textDecorationLine
+        textDecorationLine,
       );
     });
   });
@@ -294,7 +294,7 @@ test.describe("should check Typography component properties", () => {
           <Typography variant="h1" truncate={truncate}>
             {testDataStandard}
           </Typography>
-        </div>
+        </div>,
       );
 
       const typographyElement = page.locator("h1");
@@ -304,7 +304,7 @@ test.describe("should check Typography component properties", () => {
       } else {
         await expect(typographyElement).not.toHaveCSS(
           "text-overflow",
-          "ellipsis"
+          "ellipsis",
         );
       }
     });
@@ -318,7 +318,7 @@ test.describe("should check Typography component properties", () => {
       await mount(
         <Typography variant="h1" textAlign={textAlignment}>
           {testDataStandard}
-        </Typography>
+        </Typography>,
       );
 
       const typographyElement = page.locator("h1");
@@ -334,7 +334,7 @@ test.describe("should check Typography component properties", () => {
     await mount(
       <Typography variant="h1" screenReaderOnly>
         {testDataStandard}
-      </Typography>
+      </Typography>,
     );
 
     const typographyElement = page.locator("h1");
@@ -342,7 +342,7 @@ test.describe("should check Typography component properties", () => {
     await expect(typographyElement).toHaveText(testDataStandard);
     await expect(typographyElement).toHaveCSS(
       "border",
-      "0px none rgba(0, 0, 0, 0.9)"
+      "0px none rgba(0, 0, 0, 0.9)",
     );
     await expect(typographyElement).toHaveCSS("height", "1px");
     await expect(typographyElement).toHaveCSS("margin", "-1px");
diff --git a/src/components/typography/typography.style.ts b/src/components/typography/typography.style.ts
index d28751be94..cb35331722 100644
--- a/src/components/typography/typography.style.ts
+++ b/src/components/typography/typography.style.ts
@@ -152,7 +152,7 @@ const StyledTypography = styled.span.attrs(
       lineHeight: lineHeight || getLineHeight(variant),
       defaultMargin: variant === "p" ? "0 0 16px" : "0",
     };
-  }
+  },
 )<TypographyProps>`
   ${({
     size,
@@ -193,7 +193,7 @@ const StyledTypography = styled.span.attrs(
     ${variant === "sup" && "vertical-align: super;"};
     ${variant === "sub" && "vertical-align: sub;"};
     ${display && `display: ${display};`};
-    ${listStyleType && `list-style-type: ${listStyleType};`}; ;
+    ${listStyleType && `list-style-type: ${listStyleType};`};
   `}
   ${space}
     ${({ color, bg, backgroundColor, ...rest }) =>
diff --git a/src/components/typography/typography.test.tsx b/src/components/typography/typography.test.tsx
index 76a8804219..7ad186279a 100644
--- a/src/components/typography/typography.test.tsx
+++ b/src/components/typography/typography.test.tsx
@@ -281,7 +281,7 @@ test("should override 'display' property when passed", () => {
   render(
     <Typography variant="b" display="block">
       Test
-    </Typography>
+    </Typography>,
   );
 
   expect(screen.getByText("Test")).toHaveStyle({ display: "block" });
@@ -293,7 +293,7 @@ test("should render List with variant as 'ul' by default and listStyleType set t
       <ListItem>List Item 1</ListItem>
       <ListItem>List Item 2</ListItem>
       <ListItem>List Item 3</ListItem>
-    </List>
+    </List>,
   );
 
   expect(screen.getByRole("list")).toHaveStyle({ listStyleType: "square" });
@@ -306,7 +306,7 @@ test("should render List with variant set to 'ol' and listStyleType set to 'deci
       <ListItem>List Item 1</ListItem>
       <ListItem>List Item 2</ListItem>
       <ListItem>List Item 3</ListItem>
-    </List>
+    </List>,
   );
 
   expect(screen.getByRole("list")).toHaveStyle({ listStyleType: "decimal" });
@@ -315,5 +315,5 @@ test("should render List with variant set to 'ol' and listStyleType set to 'deci
 
 testStyledSystemSpacingRTL(
   (props) => <Typography {...props}>Test</Typography>,
-  () => screen.getByText("Test")
+  () => screen.getByText("Test"),
 );
diff --git a/src/components/vertical-divider/components.test-pw.tsx b/src/components/vertical-divider/components.test-pw.tsx
index 1a8e771497..e678c00b25 100644
--- a/src/components/vertical-divider/components.test-pw.tsx
+++ b/src/components/vertical-divider/components.test-pw.tsx
@@ -111,7 +111,7 @@ interface VerticalDividerArgs {
 }
 
 export const VerticalDividerComponent = (
-  props: Partial<VerticalDividerArgs>
+  props: Partial<VerticalDividerArgs>,
 ) => {
   return <VerticalDivider {...props} />;
 };
diff --git a/src/components/vertical-divider/vertical-divider-test.stories.tsx b/src/components/vertical-divider/vertical-divider-test.stories.tsx
index 49812c81ad..8c74766781 100644
--- a/src/components/vertical-divider/vertical-divider-test.stories.tsx
+++ b/src/components/vertical-divider/vertical-divider-test.stories.tsx
@@ -158,7 +158,7 @@ Default.args = {
 };
 
 export const VerticalDividerComponent = (
-  props: Partial<VerticalDividerArgs>
+  props: Partial<VerticalDividerArgs>,
 ) => {
   return <VerticalDivider {...props} />;
 };
diff --git a/src/components/vertical-divider/vertical-divider.pw.tsx b/src/components/vertical-divider/vertical-divider.pw.tsx
index 2b2d0d935c..5620001f19 100644
--- a/src/components/vertical-divider/vertical-divider.pw.tsx
+++ b/src/components/vertical-divider/vertical-divider.pw.tsx
@@ -30,12 +30,12 @@ test.describe("VerticalDivider component", () => {
 
         await expect(verticalDividerComponent(page)).toHaveCSS(
           "height",
-          pixelCssString
+          pixelCssString,
         );
 
         await expect(verticalDividerComponent(page)).toHaveAttribute(
           "height",
-          pixelCssString
+          pixelCssString,
         );
       });
 
@@ -49,12 +49,12 @@ test.describe("VerticalDivider component", () => {
 
         await expect(verticalDividerComponent(page)).toHaveCSS(
           "height",
-          pixelCssString
+          pixelCssString,
         );
 
         await expect(verticalDividerComponent(page)).toHaveAttribute(
           "height",
-          pixelVal.toString()
+          pixelVal.toString(),
         );
       });
     });
@@ -66,7 +66,7 @@ test.describe("VerticalDivider component", () => {
 
       await expect(verticalDividerComponent(page).locator("div")).toHaveCSS(
         "border-left-color",
-        color
+        color,
       );
     });
   });
@@ -81,67 +81,64 @@ test.describe("VerticalDivider component", () => {
       if (boolVal) {
         await expect(verticalDividerComponent(page)).toHaveCSS(
           "display",
-          "inline"
+          "inline",
         );
       } else {
         await expect(verticalDividerComponent(page)).not.toHaveCSS(
           "display",
-          "inline"
+          "inline",
         );
       }
     });
   });
 });
 
-test.describe(
-  "should render VerticalDivider component and check accessibility issues",
-  () => {
-    height.forEach((propName) => {
-      pixels.forEach((pixelVal) => {
-        test(`should pass accessibility checks when the ${propName} prop is passed as a string and set to ${pixelVal}px`, async ({
-          mount,
-          page,
-        }) => {
-          const props = { [propName]: `${pixelVal}px` };
-
-          await mount(<VerticalDividerComponent {...props} />);
-
-          await checkAccessibility(page);
-        });
-
-        test(`should pass accessibility checks when the ${propName} prop is passed as a number and set to ${pixelVal}`, async ({
-          mount,
-          page,
-        }) => {
-          const props = { [propName]: pixelVal };
-
-          await mount(<VerticalDividerComponent {...props} />);
-
-          await checkAccessibility(page);
-        });
-      });
-    });
-
-    tintData.forEach(([tint]) => {
-      test(`should pass accessibility checks when the tint prop is set to ${tint}`, async ({
+test.describe("should render VerticalDivider component and check accessibility issues", () => {
+  height.forEach((propName) => {
+    pixels.forEach((pixelVal) => {
+      test(`should pass accessibility checks when the ${propName} prop is passed as a string and set to ${pixelVal}px`, async ({
         mount,
         page,
       }) => {
-        await mount(<VerticalDividerComponent tint={tint} />);
+        const props = { [propName]: `${pixelVal}px` };
+
+        await mount(<VerticalDividerComponent {...props} />);
 
         await checkAccessibility(page);
       });
-    });
 
-    displayInlineVal.forEach((boolVal) => {
-      test(`should pass accessibility checks when the displayInline prop is ${boolVal}`, async ({
+      test(`should pass accessibility checks when the ${propName} prop is passed as a number and set to ${pixelVal}`, async ({
         mount,
         page,
       }) => {
-        await mount(<VerticalDividerComponent displayInline={boolVal} />);
+        const props = { [propName]: pixelVal };
+
+        await mount(<VerticalDividerComponent {...props} />);
 
         await checkAccessibility(page);
       });
     });
-  }
-);
+  });
+
+  tintData.forEach(([tint]) => {
+    test(`should pass accessibility checks when the tint prop is set to ${tint}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<VerticalDividerComponent tint={tint} />);
+
+      await checkAccessibility(page);
+    });
+  });
+
+  displayInlineVal.forEach((boolVal) => {
+    test(`should pass accessibility checks when the displayInline prop is ${boolVal}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<VerticalDividerComponent displayInline={boolVal} />);
+
+      await checkAccessibility(page);
+    });
+  });
+});
diff --git a/src/components/vertical-divider/vertical-divider.stories.tsx b/src/components/vertical-divider/vertical-divider.stories.tsx
index 2a3b7c37b1..ea670da7d2 100644
--- a/src/components/vertical-divider/vertical-divider.stories.tsx
+++ b/src/components/vertical-divider/vertical-divider.stories.tsx
@@ -27,7 +27,7 @@ const styledSystemProps = generateStyledSystemProps(
   {
     spacing: true,
   },
-  { p: "3" }
+  { p: "3" },
 );
 
 const meta: Meta<typeof VerticalDivider> = {
diff --git a/src/components/vertical-divider/vertical-divider.test.tsx b/src/components/vertical-divider/vertical-divider.test.tsx
index 77a29b097b..8c93e65037 100644
--- a/src/components/vertical-divider/vertical-divider.test.tsx
+++ b/src/components/vertical-divider/vertical-divider.test.tsx
@@ -7,7 +7,7 @@ import MenuContext from "../menu/__internal__/menu.context";
 testStyledSystemSpacingRTL(
   (props) => <VerticalDivider {...props} />,
   () => screen.getByTestId("vertical-divider"),
-  { p: 3 }
+  { p: 3 },
 );
 
 test("should apply the expected height when `h` prop is passed a value of `100`", () => {
@@ -56,7 +56,7 @@ test("should render as an `li` element with `aria-hidden` when inside a Menu", (
       }}
     >
       <VerticalDivider />
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const verticalDividerElement = screen.getByTestId("vertical-divider");
 
@@ -82,7 +82,7 @@ test("should not allow the `aria-hidden` attribute to be overridden when in a me
       }}
     >
       <VerticalDivider aria-hidden={false} />
-    </MenuContext.Provider>
+    </MenuContext.Provider>,
   );
   const verticalDividerElement = screen.getByTestId("vertical-divider");
 
diff --git a/src/components/vertical-menu/components.test-pw.tsx b/src/components/vertical-menu/components.test-pw.tsx
index 58b0df8f41..a2f891f737 100644
--- a/src/components/vertical-menu/components.test-pw.tsx
+++ b/src/components/vertical-menu/components.test-pw.tsx
@@ -14,7 +14,7 @@ import Box from "../box";
 import Pill from "../pill";
 
 export const VerticalMenuDefaultComponent = (
-  props: Partial<VerticalMenuProps>
+  props: Partial<VerticalMenuProps>,
 ) => {
   return (
     <Box height="100vh">
@@ -169,7 +169,7 @@ export const VerticalMenuItemCustomHref = ({
 };
 
 export const VerticalMenuTriggerCustom = (
-  props: Partial<VerticalMenuTriggerProps>
+  props: Partial<VerticalMenuTriggerProps>,
 ) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -186,7 +186,7 @@ export const VerticalMenuTriggerCustom = (
 };
 
 export const VerticalMenuFullScreenCustom = (
-  props: Partial<VerticalMenuFullScreenProps>
+  props: Partial<VerticalMenuFullScreenProps>,
 ) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
diff --git a/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.tsx b/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.tsx
index 7462986cf0..3b29201a5d 100644
--- a/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.tsx
+++ b/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.tsx
@@ -29,7 +29,7 @@ export interface VerticalMenuFullScreenProps extends TagProps {
   onClose: (
     ev:
       | React.KeyboardEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLButtonElement>,
   ) => void;
 }
 
@@ -52,7 +52,7 @@ export const VerticalMenuFullScreen = ({
         onClose(ev);
       }
     },
-    [onClose]
+    [onClose],
   );
 
   // TODO remove this as part of FE-5650
diff --git a/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.test.tsx b/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.test.tsx
index 0b5c8e0be5..bd6cfe56d7 100644
--- a/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.test.tsx
+++ b/src/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.test.tsx
@@ -11,11 +11,11 @@ import Logger from "../../../__internal__/utils/logger";
 const loggerSpy = jest.spyOn(Logger, "deprecate");
 
 jest.mock("../../portal", () =>
-  jest.fn(({ children }) => <div>{children}</div>)
+  jest.fn(({ children }) => <div>{children}</div>),
 );
 
 jest.mock("../../../__internal__/focus-trap/focus-trap.component", () =>
-  jest.fn(({ children }) => <div>{children}</div>)
+  jest.fn(({ children }) => <div>{children}</div>),
 );
 
 describe("VerticalMenuFullScreen", () => {
@@ -31,12 +31,12 @@ describe("VerticalMenuFullScreen", () => {
     render(
       <VerticalMenuFullScreen isOpen onClose={() => {}} aria-label="test">
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     expect(screen.getByRole("navigation")).toHaveAttribute(
       "aria-label",
-      "test"
+      "test",
     );
   });
 
@@ -44,12 +44,12 @@ describe("VerticalMenuFullScreen", () => {
     render(
       <VerticalMenuFullScreen isOpen onClose={() => {}} aria-labelledby="test">
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     expect(screen.getByRole("navigation")).toHaveAttribute(
       "aria-labelledby",
-      "test"
+      "test",
     );
   });
 
@@ -57,7 +57,7 @@ describe("VerticalMenuFullScreen", () => {
     render(
       <VerticalMenuFullScreen isOpen onClose={() => {}}>
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     expect(Portal).toHaveBeenCalled();
@@ -67,7 +67,7 @@ describe("VerticalMenuFullScreen", () => {
     render(
       <VerticalMenuFullScreen isOpen onClose={() => {}}>
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     expect(FocusTrap).toHaveBeenCalled();
@@ -79,7 +79,7 @@ describe("VerticalMenuFullScreen", () => {
     render(
       <VerticalMenuFullScreen isOpen={false} onClose={() => {}}>
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     expect(screen.getByRole("navigation", { hidden: true })).toHaveStyle({
@@ -94,7 +94,7 @@ describe("VerticalMenuFullScreen", () => {
     render(
       <VerticalMenuFullScreen isOpen onClose={() => {}}>
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     expect(screen.getByRole("navigation")).toHaveStyle({
@@ -108,7 +108,7 @@ describe("VerticalMenuFullScreen", () => {
     render(
       <VerticalMenuFullScreen isOpen={false} onClose={() => {}}>
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     const menu = screen.queryByRole("navigation");
@@ -120,7 +120,7 @@ describe("VerticalMenuFullScreen", () => {
     render(
       <VerticalMenuFullScreen isOpen onClose={() => {}}>
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     expect(screen.getByRole("navigation")).toHaveStyleRule(
@@ -128,7 +128,7 @@ describe("VerticalMenuFullScreen", () => {
       "#cccccc",
       {
         modifier: "::-webkit-scrollbar-track",
-      }
+      },
     );
 
     expect(screen.getByRole("navigation")).toHaveStyleRule(
@@ -136,7 +136,7 @@ describe("VerticalMenuFullScreen", () => {
       "#808080",
       {
         modifier: "::-webkit-scrollbar-thumb",
-      }
+      },
     );
 
     expect(screen.getByRole("navigation")).toHaveStyleRule("width", "12px", {
@@ -151,7 +151,7 @@ describe("VerticalMenuFullScreen", () => {
     render(
       <VerticalMenuFullScreen isOpen onClose={onClose}>
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -163,7 +163,7 @@ describe("VerticalMenuFullScreen", () => {
     render(
       <VerticalMenuFullScreen isOpen onClose={onClose}>
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     fireEvent.keyDown(screen.getByRole("navigation"), {
@@ -185,7 +185,7 @@ describe("VerticalMenuFullScreen", () => {
         onClose={() => {}}
       >
         <VerticalMenuItem title="Item1" />
-      </VerticalMenuFullScreen>
+      </VerticalMenuFullScreen>,
     );
 
     const menu = screen.getByRole("navigation");
diff --git a/src/components/vertical-menu/vertical-menu-item/vertical-menu-item.test.tsx b/src/components/vertical-menu/vertical-menu-item/vertical-menu-item.test.tsx
index 8f30823bb4..d400982f07 100644
--- a/src/components/vertical-menu/vertical-menu-item/vertical-menu-item.test.tsx
+++ b/src/components/vertical-menu/vertical-menu-item/vertical-menu-item.test.tsx
@@ -35,7 +35,7 @@ describe("VerticalMenuItem", () => {
         </VerticalMenuItem>
       </ThemeProvider>
     ),
-    () => screen.getByRole("button")
+    () => screen.getByRole("button"),
   );
 
   describe("when is rendered without children", () => {
@@ -45,7 +45,7 @@ describe("VerticalMenuItem", () => {
           data-role="item-wrapper"
           title="Item1"
           height="100px"
-        />
+        />,
       );
 
       expect(screen.getByTestId("item-wrapper")).toHaveStyle({
@@ -60,28 +60,28 @@ describe("VerticalMenuItem", () => {
 
     it("should render adornment passed as a node", () => {
       render(
-        <VerticalMenuItem title="Item1" adornment={<div>Adornment</div>} />
+        <VerticalMenuItem title="Item1" adornment={<div>Adornment</div>} />,
       );
       expect(screen.getByText("Adornment")).toBeVisible();
     });
 
     it("should render passed active state as boolean", () => {
       render(
-        <VerticalMenuItem data-role="item-wrapper" title="Item1" active />
+        <VerticalMenuItem data-role="item-wrapper" title="Item1" active />,
       );
       expect(screen.getByTestId("item-wrapper")).toHaveStyleRule(
         "background",
         "var(--colorsComponentsLeftnavWinterStandardSelected)",
         {
           modifier: ":before",
-        }
+        },
       );
     });
 
     it("should override active state when mouseover detected", async () => {
       const user = userEvent.setup();
       render(
-        <VerticalMenuItem data-role="item-wrapper" title="Item1" active />
+        <VerticalMenuItem data-role="item-wrapper" title="Item1" active />,
       );
 
       await user.hover(screen.getByRole("listitem"));
@@ -91,7 +91,7 @@ describe("VerticalMenuItem", () => {
         "var(--colorsComponentsLeftnavWinterStandardHover)",
         {
           modifier: ":hover:before",
-        }
+        },
       );
     });
 
@@ -99,7 +99,7 @@ describe("VerticalMenuItem", () => {
       render(<VerticalMenuItem title="Item1" iconType="add" />);
       expect(Icon).toHaveBeenCalledWith(
         expect.objectContaining({ type: "add" }),
-        {}
+        {},
       );
 
       IconMock.mockClear();
@@ -133,7 +133,7 @@ describe("VerticalMenuItem", () => {
           title="Item1"
           component={CustomComponent}
           customComponentTitle="Custom component"
-        />
+        />,
       );
       expect(screen.getByText("Custom component")).toBeVisible();
     });
@@ -144,7 +144,7 @@ describe("VerticalMenuItem", () => {
       render(
         <VerticalMenuItem title="Item1">
           <VerticalMenuItem title="ChildItem1" />
-        </VerticalMenuItem>
+        </VerticalMenuItem>,
       );
       expect(screen.getByRole("button")).toBeVisible();
     });
@@ -153,7 +153,7 @@ describe("VerticalMenuItem", () => {
       render(
         <VerticalMenuItem title="Item1">
           <VerticalMenuItem title="ChildItem1" />
-        </VerticalMenuItem>
+        </VerticalMenuItem>,
       );
       expect(screen.queryByText("ChildItem1")).not.toBeInTheDocument();
     });
@@ -164,7 +164,7 @@ describe("VerticalMenuItem", () => {
       render(
         <VerticalMenuItem title="Item1">
           <VerticalMenuItem title="ChildItem1" />
-        </VerticalMenuItem>
+        </VerticalMenuItem>,
       );
       expect(screen.queryByText("ChildItem1")).not.toBeInTheDocument();
       await user.click(screen.getByText("Item1"));
@@ -182,14 +182,14 @@ describe("VerticalMenuItem", () => {
         render(
           <VerticalMenuItem title="Item1">
             <VerticalMenuItem title="ChildItem1" />
-          </VerticalMenuItem>
+          </VerticalMenuItem>,
         );
 
         expect(screen.queryByText("ChildItem1")).not.toBeInTheDocument();
         await user.tab();
         await user.keyboard(`{${key}}`);
         expect(screen.getByText("ChildItem1")).toBeVisible();
-      }
+      },
     );
 
     it("should render chevron icon", async () => {
@@ -198,19 +198,19 @@ describe("VerticalMenuItem", () => {
       render(
         <VerticalMenuItem title="Item1">
           <VerticalMenuItem title="ChildItem1" />
-        </VerticalMenuItem>
+        </VerticalMenuItem>,
       );
 
       expect(Icon).toHaveBeenCalledWith(
         expect.objectContaining({ type: "chevron_down_thick" }),
-        {}
+        {},
       );
 
       IconMock.mockClear();
       await user.click(screen.getByText("Item1"));
       expect(Icon).toHaveBeenCalledWith(
         expect.objectContaining({ type: "chevron_up_thick" }),
-        {}
+        {},
       );
     });
 
@@ -225,7 +225,7 @@ describe("VerticalMenuItem", () => {
               title="GrandChildItem1"
             />
           </VerticalMenuItem>
-        </VerticalMenuItem>
+        </VerticalMenuItem>,
       );
 
       expect(screen.getByTestId("item")).toHaveStyle({
@@ -255,7 +255,7 @@ describe("VerticalMenuItem", () => {
           adornment={(isOpen) => !isOpen && <div>Adornment</div>}
         >
           <VerticalMenuItem title="ChildItem1" />
-        </VerticalMenuItem>
+        </VerticalMenuItem>,
       );
 
       expect(screen.getByText("Adornment")).toBeVisible();
@@ -273,7 +273,7 @@ describe("VerticalMenuItem", () => {
           active={(isOpen) => !isOpen}
         >
           <VerticalMenuItem data-role="child-item" title="ChildItem1" />
-        </VerticalMenuItem>
+        </VerticalMenuItem>,
       );
 
       expect(screen.getByTestId("item")).toHaveStyleRule(
@@ -281,7 +281,7 @@ describe("VerticalMenuItem", () => {
         "var(--colorsComponentsLeftnavWinterStandardSelected)",
         {
           modifier: ":before",
-        }
+        },
       );
 
       await user.click(screen.getByText("Item1"));
@@ -290,7 +290,7 @@ describe("VerticalMenuItem", () => {
         "var(--colorsComponentsLeftnavWinterStandardSelected)",
         {
           modifier: ":before",
-        }
+        },
       );
     });
   });
@@ -304,7 +304,7 @@ describe("VerticalMenuItem", () => {
               <VerticalMenuItem title="GrandChildItem1" />
             </VerticalMenuItem>
           </VerticalMenuItem>
-        </VerticalMenuFullScreen>
+        </VerticalMenuFullScreen>,
       );
 
       expect(screen.getByText("Item1")).toBeVisible();
@@ -318,7 +318,7 @@ describe("VerticalMenuItem", () => {
       render(
         <VerticalMenuItem title="Item1" defaultOpen>
           <VerticalMenuItem title="ChildItem1" />
-        </VerticalMenuItem>
+        </VerticalMenuItem>,
       );
 
       expect(screen.getByText("ChildItem1")).toBeVisible();
@@ -332,7 +332,7 @@ describe("VerticalMenuItem", () => {
         data-element="foo"
         data-role="bar"
         href="foo"
-      />
+      />,
     );
 
     const anchor = within(screen.getByRole("listitem")).getByRole("link");
@@ -351,7 +351,7 @@ describe("VerticalMenuItem", () => {
       "var(--borderRadius100)",
       {
         modifier: ":before",
-      }
+      },
     );
   });
 });
diff --git a/src/components/vertical-menu/vertical-menu-trigger/vertical-menu-trigger.test.tsx b/src/components/vertical-menu/vertical-menu-trigger/vertical-menu-trigger.test.tsx
index 35839a8e9e..e08dc30b71 100644
--- a/src/components/vertical-menu/vertical-menu-trigger/vertical-menu-trigger.test.tsx
+++ b/src/components/vertical-menu/vertical-menu-trigger/vertical-menu-trigger.test.tsx
@@ -16,14 +16,14 @@ describe("VerticalMenuTrigger", () => {
         </VerticalMenuTrigger>
       </ThemeProvider>
     ),
-    () => screen.getByRole("button")
+    () => screen.getByRole("button"),
   );
 
   it("should render proper height when height prop is passed", () => {
     render(
       <VerticalMenuTrigger height="100px" onClick={() => {}}>
         Open menu
-      </VerticalMenuTrigger>
+      </VerticalMenuTrigger>,
     );
     expect(screen.getByRole("button")).toHaveStyle({
       minHeight: "100px",
@@ -34,7 +34,7 @@ describe("VerticalMenuTrigger", () => {
     const user = userEvent.setup();
     const onClick = jest.fn();
     render(
-      <VerticalMenuTrigger onClick={onClick}>Open menu</VerticalMenuTrigger>
+      <VerticalMenuTrigger onClick={onClick}>Open menu</VerticalMenuTrigger>,
     );
 
     await user.click(screen.getByRole("button"));
@@ -49,7 +49,7 @@ describe("VerticalMenuTrigger", () => {
         onClick={() => {}}
       >
         Open Menu
-      </VerticalMenuTrigger>
+      </VerticalMenuTrigger>,
     );
 
     const trigger = screen.getByRole("button");
diff --git a/src/components/vertical-menu/vertical-menu.pw.tsx b/src/components/vertical-menu/vertical-menu.pw.tsx
index 8a03ed4dbd..db2e6dc06d 100644
--- a/src/components/vertical-menu/vertical-menu.pw.tsx
+++ b/src/components/vertical-menu/vertical-menu.pw.tsx
@@ -40,12 +40,12 @@ test.describe("should render Vertical Menu component", () => {
     page,
   }) => {
     await mount(
-      <VerticalMenuDefaultComponent aria-label={CHARACTERS.STANDARD} />
+      <VerticalMenuDefaultComponent aria-label={CHARACTERS.STANDARD} />,
     );
 
     await expect(verticalMenuComponent(page)).toHaveAttribute(
       "aria-label",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -54,12 +54,12 @@ test.describe("should render Vertical Menu component", () => {
     page,
   }) => {
     await mount(
-      <VerticalMenuDefaultComponent aria-labelledby={CHARACTERS.STANDARD} />
+      <VerticalMenuDefaultComponent aria-labelledby={CHARACTERS.STANDARD} />,
     );
 
     await expect(verticalMenuComponent(page)).toHaveAttribute(
       "aria-labelledby",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -70,27 +70,29 @@ test.describe("should render Vertical Menu component", () => {
       await assertCssValueIsApproximately(
         verticalMenuComponent(page),
         "width",
-        width
+        width,
       );
     });
   });
 
-  ([
-    ["30%", 230],
-    ["45%", 345],
-    ["95%", 729],
-  ] as const).forEach(([height, heightInPx]) => {
+  (
+    [
+      ["30%", 230],
+      ["45%", 345],
+      ["95%", 729],
+    ] as const
+  ).forEach(([height, heightInPx]) => {
     test(`should render with height if ${height}`, async ({ mount, page }) => {
       await mount(<VerticalMenuDefaultComponent height={height} />);
 
       await expect(verticalMenuComponent(page)).toHaveAttribute(
         "height",
-        height
+        height,
       );
       await assertCssValueIsApproximately(
         verticalMenuComponent(page),
         "height",
-        heightInPx
+        heightInPx,
       );
     });
   });
@@ -100,7 +102,7 @@ test.describe("should render Vertical Menu component", () => {
       await mount(<VerticalMenuItemCustom title={title} />);
 
       await expect(verticalMenuItem(page).locator("h3").first()).toHaveText(
-        title
+        title,
       );
     });
   });
@@ -139,7 +141,7 @@ test.describe("should render Vertical Menu component", () => {
 
     const backgroundColor = await page.evaluate(() => {
       const menuItem = document.querySelector(
-        `[data-component="vertical-menu-item"]`
+        `[data-component="vertical-menu-item"]`,
       );
       if (!menuItem) {
         return null;
@@ -167,7 +169,7 @@ test.describe("should render Vertical Menu component", () => {
 
     const borderRadius = await page.evaluate(() => {
       const menuItem = document.querySelector(
-        `[data-component="vertical-menu-item"]`
+        `[data-component="vertical-menu-item"]`,
       );
       if (!menuItem) {
         return null;
@@ -185,7 +187,7 @@ test.describe("should render Vertical Menu component", () => {
     await verticalMenuItem(page).click();
 
     await expect(
-      verticalMenuItem(page).nth(1).locator("..").locator("div").first()
+      verticalMenuItem(page).nth(1).locator("..").locator("div").first(),
     ).toBeVisible();
   });
 
@@ -195,7 +197,7 @@ test.describe("should render Vertical Menu component", () => {
     await verticalMenuItem(page).click();
 
     await expect(
-      verticalMenuItem(page).nth(1).locator("..").locator("a").first()
+      verticalMenuItem(page).nth(1).locator("..").locator("a").first(),
     ).toBeVisible();
   });
 
@@ -249,14 +251,14 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
     page,
   }) => {
     await mount(
-      <VerticalMenuFullScreenCustom aria-label={CHARACTERS.STANDARD} />
+      <VerticalMenuFullScreenCustom aria-label={CHARACTERS.STANDARD} />,
     );
 
     await verticalMenuTrigger(page).click();
 
     await expect(verticalMenuFullScreen(page)).toHaveAttribute(
       "aria-label",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -265,14 +267,14 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
     page,
   }) => {
     await mount(
-      <VerticalMenuFullScreenCustom aria-labelledby={CHARACTERS.STANDARD} />
+      <VerticalMenuFullScreenCustom aria-labelledby={CHARACTERS.STANDARD} />,
     );
 
     await verticalMenuTrigger(page).click();
 
     await expect(verticalMenuFullScreen(page)).toHaveAttribute(
       "aria-labelledby",
-      CHARACTERS.STANDARD
+      CHARACTERS.STANDARD,
     );
   });
 
@@ -286,7 +288,7 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
         onClose={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await verticalMenuTrigger(page).click();
@@ -325,11 +327,11 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
 
     await page.keyboard.press("Tab");
     await expect(
-      page.getByRole("button").filter({ hasText: "Button 1" })
+      page.getByRole("button").filter({ hasText: "Button 1" }),
     ).toBeFocused();
     await page.keyboard.press("Tab");
     await expect(
-      page.getByRole("button").filter({ hasText: "Button 2" })
+      page.getByRole("button").filter({ hasText: "Button 2" }),
     ).toBeFocused();
   });
 
@@ -364,7 +366,7 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
     page,
   }) => {
     await mount(
-      <VerticalMenuTrigger onClick={() => {}}>{testData}</VerticalMenuTrigger>
+      <VerticalMenuTrigger onClick={() => {}}>{testData}</VerticalMenuTrigger>,
     );
 
     await expect(verticalMenuTrigger(page)).toHaveText(testData);
@@ -381,7 +383,7 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
     await page.keyboard.press("Tab");
 
     await expect(
-      verticalMenuItem(page).filter({ hasText: "Item 3" })
+      verticalMenuItem(page).filter({ hasText: "Item 3" }),
     ).toBeFocused();
   });
 
@@ -398,7 +400,7 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
     await page.keyboard.press("Tab");
 
     await expect(
-      verticalMenuItem(page).filter({ hasText: "Item 5" })
+      verticalMenuItem(page).filter({ hasText: "Item 5" }),
     ).toBeFocused();
   });
 
@@ -413,7 +415,7 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
     await page.keyboard.press("Shift+Tab");
 
     await expect(
-      verticalMenuItem(page).filter({ hasText: "Item 4" })
+      verticalMenuItem(page).filter({ hasText: "Item 4" }),
     ).toBeFocused();
   });
 
@@ -423,7 +425,7 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
     await verticalMenuItem(page).nth(2).click();
 
     await expect(
-      verticalMenuItem(page).locator("h3").filter({ hasText: "Active Item" })
+      verticalMenuItem(page).locator("h3").filter({ hasText: "Active Item" }),
     ).toBeVisible();
   });
 
@@ -434,45 +436,45 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
     await verticalMenuItem(page).nth(2).click();
 
     await expect(
-      verticalMenuItem(page).locator("h3").filter({ hasText: "Active Item" })
+      verticalMenuItem(page).locator("h3").filter({ hasText: "Active Item" }),
     ).toBeHidden();
   });
 
-  ([
-    ["expand", keysToTrigger[0], 1],
-    ["expand", keysToTrigger[1], 1],
-    ["collapse", keysToTrigger[0], 2],
-    ["collapse", keysToTrigger[1], 2],
-  ] as [string, "Space" | "Enter", number][]).forEach(
-    ([action, key, index]) => {
-      test(`should ${action} Item 2 using ${key} key`, async ({
-        mount,
-        page,
-      }) => {
-        await mount(<VerticalMenuDefaultComponent />);
-
-        for (let i = 0; i < index; i++) {
-          await verticalMenuItem(page).nth(2).focus();
-          await page.keyboard.press(key);
-        }
-
-        if (action === "expand") {
-          await expect(
-            verticalMenuItem(page)
-              .locator("h3")
-              .filter({ hasText: "Active Item" })
-          ).toBeVisible();
-        }
-        if (action === "collapse") {
-          await expect(
-            verticalMenuItem(page)
-              .locator("h3")
-              .filter({ hasText: "Active Item" })
-          ).toBeHidden();
-        }
-      });
-    }
-  );
+  (
+    [
+      ["expand", keysToTrigger[0], 1],
+      ["expand", keysToTrigger[1], 1],
+      ["collapse", keysToTrigger[0], 2],
+      ["collapse", keysToTrigger[1], 2],
+    ] as [string, "Space" | "Enter", number][]
+  ).forEach(([action, key, index]) => {
+    test(`should ${action} Item 2 using ${key} key`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<VerticalMenuDefaultComponent />);
+
+      for (let i = 0; i < index; i++) {
+        await verticalMenuItem(page).nth(2).focus();
+        await page.keyboard.press(key);
+      }
+
+      if (action === "expand") {
+        await expect(
+          verticalMenuItem(page)
+            .locator("h3")
+            .filter({ hasText: "Active Item" }),
+        ).toBeVisible();
+      }
+      if (action === "collapse") {
+        await expect(
+          verticalMenuItem(page)
+            .locator("h3")
+            .filter({ hasText: "Active Item" }),
+        ).toBeHidden();
+      }
+    });
+  });
 
   test(`should navigate to the children element using Tab key`, async ({
     mount,
@@ -488,7 +490,7 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
     await page.keyboard.press("Tab");
 
     await expect(
-      verticalMenuItem(page).nth(4).filter({ hasText: "Active item" })
+      verticalMenuItem(page).nth(4).filter({ hasText: "Active item" }),
     ).toBeFocused();
   });
 
@@ -517,53 +519,46 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => {
 
     await expect(menuItem2).toHaveCSS(
       "box-shadow",
-      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset"
+      "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset",
     );
     await expect(menuItem2).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px");
   });
 });
 
-test.describe(
-  "VerticalMenuFullScreen test background scroll when tabbing",
-  () => {
-    test(`tabbing forward through the menu and back to the start should not make the background scroll to the bottom`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<VerticalMenuFullScreenBackgroundScrollTest />);
+test.describe("VerticalMenuFullScreen test background scroll when tabbing", () => {
+  test(`tabbing forward through the menu and back to the start should not make the background scroll to the bottom`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<VerticalMenuFullScreenBackgroundScrollTest />);
 
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
 
-      await expect(closeIconButton(page)).toBeFocused();
+    await expect(closeIconButton(page)).toBeFocused();
 
-      const offscreenText = page.getByText(
-        "I should not be scrolled into view"
-      );
-      await expect(offscreenText).not.toBeInViewport();
-    });
+    const offscreenText = page.getByText("I should not be scrolled into view");
+    await expect(offscreenText).not.toBeInViewport();
+  });
 
-    test(`tabbing backward through the menu and back to the start should not make the background scroll to the bottom`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<VerticalMenuFullScreenBackgroundScrollTest />);
+  test(`tabbing backward through the menu and back to the start should not make the background scroll to the bottom`, async ({
+    mount,
+    page,
+  }) => {
+    await mount(<VerticalMenuFullScreenBackgroundScrollTest />);
 
-      await page.keyboard.press("Shift+Tab");
-      await page.keyboard.press("Shift+Tab");
-      await page.keyboard.press("Shift+Tab");
+    await page.keyboard.press("Shift+Tab");
+    await page.keyboard.press("Shift+Tab");
+    await page.keyboard.press("Shift+Tab");
 
-      await expect(closeIconButton(page)).toBeFocused();
+    await expect(closeIconButton(page)).toBeFocused();
 
-      const offscreenText = page.getByText(
-        "I should not be scrolled into view"
-      );
-      await expect(offscreenText).not.toBeInViewport();
-    });
-  }
-);
+    const offscreenText = page.getByText("I should not be scrolled into view");
+    await expect(offscreenText).not.toBeInViewport();
+  });
+});
 
 test.describe("Events test", () => {
   test(`should call onClick callback when a click event is triggered`, async ({
@@ -576,7 +571,7 @@ test.describe("Events test", () => {
         onClick={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await verticalMenuTrigger(page).click();
@@ -598,7 +593,7 @@ test.describe("Events test", () => {
         onClose={() => {
           callbackCount += 1;
         }}
-      />
+      />,
     );
 
     await verticalMenuTrigger(page).click();
@@ -622,7 +617,7 @@ test.describe("Events test", () => {
           onClose={() => {
             callbackCount += 1;
           }}
-        />
+        />,
       );
 
       await verticalMenuTrigger(page).click();
diff --git a/src/components/vertical-menu/vertical-menu.test.tsx b/src/components/vertical-menu/vertical-menu.test.tsx
index 53cef93760..b573cbf4e2 100644
--- a/src/components/vertical-menu/vertical-menu.test.tsx
+++ b/src/components/vertical-menu/vertical-menu.test.tsx
@@ -20,12 +20,12 @@ describe("VerticalMenu", () => {
     render(
       <VerticalMenu aria-label="test">
         <VerticalMenuItem title="Item1" />
-      </VerticalMenu>
+      </VerticalMenu>,
     );
 
     expect(screen.getByRole("navigation")).toHaveAttribute(
       "aria-label",
-      "test"
+      "test",
     );
   });
 
@@ -33,12 +33,12 @@ describe("VerticalMenu", () => {
     render(
       <VerticalMenu aria-labelledby="test">
         <VerticalMenuItem title="Item1" />
-      </VerticalMenu>
+      </VerticalMenu>,
     );
 
     expect(screen.getByRole("navigation")).toHaveAttribute(
       "aria-labelledby",
-      "test"
+      "test",
     );
   });
 
@@ -46,7 +46,7 @@ describe("VerticalMenu", () => {
     render(
       <VerticalMenu width="100px">
         <VerticalMenuItem title="Item1" />
-      </VerticalMenu>
+      </VerticalMenu>,
     );
 
     expect(screen.getByRole("navigation")).toHaveStyle({
@@ -58,7 +58,7 @@ describe("VerticalMenu", () => {
     render(
       <VerticalMenu height="100px">
         <VerticalMenuItem title="Item1" />
-      </VerticalMenu>
+      </VerticalMenu>,
     );
 
     expect(screen.getByRole("navigation")).toHaveStyle({
@@ -70,7 +70,7 @@ describe("VerticalMenu", () => {
     render(
       <VerticalMenu height="100px">
         <VerticalMenuItem title="Item1" />
-      </VerticalMenu>
+      </VerticalMenu>,
     );
 
     expect(screen.getByRole("navigation")).toHaveStyleRule(
@@ -78,7 +78,7 @@ describe("VerticalMenu", () => {
       "#cccccc",
       {
         modifier: "::-webkit-scrollbar-track",
-      }
+      },
     );
 
     expect(screen.getByRole("navigation")).toHaveStyleRule(
@@ -86,7 +86,7 @@ describe("VerticalMenu", () => {
       "#808080",
       {
         modifier: "::-webkit-scrollbar-thumb",
-      }
+      },
     );
 
     expect(screen.getByRole("navigation")).toHaveStyleRule("width", "12px", {
@@ -98,7 +98,7 @@ describe("VerticalMenu", () => {
     render(
       <VerticalMenu data-element="foo" data-role="bar">
         <VerticalMenuItem title="Item1" />
-      </VerticalMenu>
+      </VerticalMenu>,
     );
 
     const menu = screen.getByRole("navigation");
diff --git a/src/global.d.ts b/src/global.d.ts
index 84a8bf7ebb..7b7817a25a 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -7,7 +7,7 @@ declare global {
   interface Window {
     __CARBON_INTERNALS_MODAL_LIST?: ModalList;
     __CARBON_INTERNALS_MODAL_SETTER_LIST?: ((
-      topModal: HTMLElement | null
+      topModal: HTMLElement | null,
     ) => void)[];
     __CARBON_INTERNALS_SCROLL_BLOCKERS?: {
       components: {
diff --git a/src/hooks/__internal__/useCharacterCount/useCharacterCount.test.tsx b/src/hooks/__internal__/useCharacterCount/useCharacterCount.test.tsx
index 0b40f8e92f..4011b9439e 100644
--- a/src/hooks/__internal__/useCharacterCount/useCharacterCount.test.tsx
+++ b/src/hooks/__internal__/useCharacterCount/useCharacterCount.test.tsx
@@ -24,7 +24,7 @@ test("shows characters left when input is shorter than the character limit", ()
     <TestComponent
       value={valueShorterThanLimit}
       characterLimit={characterLimit}
-    />
+    />,
   );
 
   const elements = screen.getAllByText(expectedText);
@@ -43,7 +43,7 @@ test("shows characters too many when input is longer than the character limit",
     <TestComponent
       value={valueLongerThanLimit}
       characterLimit={characterLimit}
-    />
+    />,
   );
 
   const elements = screen.getAllByText(expectedText);
@@ -54,7 +54,7 @@ test("does not return a character counter when no character limit is set", () =>
   render(<TestComponent value={MOCK_VALUE} />);
 
   const characterCountElement = screen.queryByText(
-    /characters left|characters too many/i
+    /characters left|characters too many/i,
   );
 
   expect(characterCountElement).not.toBeInTheDocument();
@@ -72,11 +72,11 @@ describe("Character count updates with debounce", () => {
 
   it("should update the visually hidden count to '2 characters left' after a delay of 2000ms", async () => {
     const { rerender } = render(
-      <TestComponent value="" characterLimit={CHARACTER_LIMIT} />
+      <TestComponent value="" characterLimit={CHARACTER_LIMIT} />,
     );
 
     rerender(
-      <TestComponent value={TEST_VALUE} characterLimit={CHARACTER_LIMIT} />
+      <TestComponent value={TEST_VALUE} characterLimit={CHARACTER_LIMIT} />,
     );
     act(() => {
       jest.advanceTimersByTime(2000);
@@ -88,11 +88,11 @@ describe("Character count updates with debounce", () => {
 
   it("should maintain the visually hidden count as '5 characters left' before a delay of 2000ms", async () => {
     const { rerender } = render(
-      <TestComponent value="" characterLimit={CHARACTER_LIMIT} />
+      <TestComponent value="" characterLimit={CHARACTER_LIMIT} />,
     );
 
     rerender(
-      <TestComponent value={TEST_VALUE} characterLimit={CHARACTER_LIMIT} />
+      <TestComponent value={TEST_VALUE} characterLimit={CHARACTER_LIMIT} />,
     );
     act(() => {
       jest.advanceTimersByTime(100);
diff --git a/src/hooks/__internal__/useCharacterCount/useCharacterCount.tsx b/src/hooks/__internal__/useCharacterCount/useCharacterCount.tsx
index 1261542127..67b5d86d72 100644
--- a/src/hooks/__internal__/useCharacterCount/useCharacterCount.tsx
+++ b/src/hooks/__internal__/useCharacterCount/useCharacterCount.tsx
@@ -6,7 +6,7 @@ import useDebounce from "../useDebounce";
 const useCharacterCount = (
   value = "",
   characterLimit?: number,
-  characterCountAriaLive?: "off" | "polite"
+  characterCountAriaLive?: "off" | "polite",
 ): [JSX.Element | null, string | undefined] => {
   const isCharacterLimitValid =
     typeof characterLimit === "number" && !Number.isNaN(characterLimit);
diff --git a/src/hooks/__internal__/useChildButtons/useChildButtons.tsx b/src/hooks/__internal__/useChildButtons/useChildButtons.tsx
index 71b21272bc..fdf5898d03 100644
--- a/src/hooks/__internal__/useChildButtons/useChildButtons.tsx
+++ b/src/hooks/__internal__/useChildButtons/useChildButtons.tsx
@@ -4,7 +4,7 @@ import useMenuKeyboardNavigation from "../useMenuKeyboardNavigation";
 
 const useChildButtons = (
   toggleButtonRef: React.RefObject<HTMLButtonElement>,
-  widthRatio = 1
+  widthRatio = 1,
 ) => {
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
@@ -22,7 +22,7 @@ const useChildButtons = (
     /* istanbul ignore else */
     if (buttonNode.current) {
       setMinWidth(
-        widthRatio * buttonNode.current.getBoundingClientRect().width
+        widthRatio * buttonNode.current.getBoundingClientRect().width,
       );
     }
   }
@@ -30,13 +30,13 @@ const useChildButtons = (
   const getButtonChildren = useCallback(
     () =>
       childrenContainer.current?.querySelectorAll(
-        '[data-component="button"]'
+        '[data-component="button"]',
       ) as NodeListOf<HTMLButtonElement>,
-    []
+    [],
   );
 
   const handleToggleButtonKeyDown = (
-    ev: React.KeyboardEvent<HTMLButtonElement>
+    ev: React.KeyboardEvent<HTMLButtonElement>,
   ) => {
     const isToggleKey =
       Events.isEnterKey(ev) ||
@@ -62,16 +62,16 @@ const useChildButtons = (
     toggleButtonRef,
     getButtonChildren,
     hideButtons,
-    showAdditionalButtons
+    showAdditionalButtons,
   );
 
-  const onChildButtonClick = (
-    childOnClick?: React.MouseEventHandler<HTMLButtonElement>
-  ) => (ev: React.MouseEvent<HTMLButtonElement>) => {
-    childOnClick?.(ev);
-    hideButtons();
-    toggleButtonRef.current?.focus();
-  };
+  const onChildButtonClick =
+    (childOnClick?: React.MouseEventHandler<HTMLButtonElement>) =>
+    (ev: React.MouseEvent<HTMLButtonElement>) => {
+      childOnClick?.(ev);
+      hideButtons();
+      toggleButtonRef.current?.focus();
+    };
 
   const wrapperProps = {
     "data-element": "additional-buttons",
diff --git a/src/hooks/__internal__/useClickAwayListener/useClickAwayListener.test.tsx b/src/hooks/__internal__/useClickAwayListener/useClickAwayListener.test.tsx
index 54274bfa38..2648178265 100644
--- a/src/hooks/__internal__/useClickAwayListener/useClickAwayListener.test.tsx
+++ b/src/hooks/__internal__/useClickAwayListener/useClickAwayListener.test.tsx
@@ -40,7 +40,7 @@ let addListenerSpy: jest.SpyInstance<
   [
     string,
     EventListenerOrEventListenerObject,
-    (boolean | AddEventListenerOptions)?
+    (boolean | AddEventListenerOptions)?,
   ]
 >;
 let removeListenerSpy: jest.SpyInstance<
@@ -48,7 +48,7 @@ let removeListenerSpy: jest.SpyInstance<
   [
     string,
     EventListenerOrEventListenerObject,
-    (boolean | AddEventListenerOptions)?
+    (boolean | AddEventListenerOptions)?,
   ]
 >;
 
@@ -74,7 +74,7 @@ test("adds the event listener on mount and removes on unmount", () => {
 
 test("calls handleClickAway when mousedown is outside of wrapper element", () => {
   render(
-    <MockComponent handleClickAway={handleClickAway} eventTypeId="mousedown" />
+    <MockComponent handleClickAway={handleClickAway} eventTypeId="mousedown" />,
   );
 
   fireEvent.mouseDown(document);
@@ -100,7 +100,7 @@ test("does not invoke handleClickAway on internal 'click'", () => {
 
 test("does not invoke handleClickAway on internal 'mousedown'", () => {
   render(
-    <MockComponent handleClickAway={handleClickAway} eventTypeId="mousedown" />
+    <MockComponent handleClickAway={handleClickAway} eventTypeId="mousedown" />,
   );
 
   fireEvent.click(screen.getByRole("button"));
diff --git a/src/hooks/__internal__/useClickAwayListener/useClickAwayListener.ts b/src/hooks/__internal__/useClickAwayListener/useClickAwayListener.ts
index 7de0392977..1903848584 100644
--- a/src/hooks/__internal__/useClickAwayListener/useClickAwayListener.ts
+++ b/src/hooks/__internal__/useClickAwayListener/useClickAwayListener.ts
@@ -6,7 +6,7 @@ import { useEffect, useRef, useCallback } from "react";
 
 export default (
   handleClickAway: (ev: Event) => void,
-  eventTypeId: "mousedown" | "click" = "click"
+  eventTypeId: "mousedown" | "click" = "click",
 ) => {
   const clickIsInside = useRef(false);
 
@@ -19,7 +19,7 @@ export default (
 
       handleClickAway(ev);
     },
-    [handleClickAway]
+    [handleClickAway],
   );
 
   const onInsideClick = useCallback(() => {
diff --git a/src/hooks/__internal__/useDebounce/useDebounce.ts b/src/hooks/__internal__/useDebounce/useDebounce.ts
index ff9aeb9cb8..c4130bfc7b 100644
--- a/src/hooks/__internal__/useDebounce/useDebounce.ts
+++ b/src/hooks/__internal__/useDebounce/useDebounce.ts
@@ -7,7 +7,7 @@ type Callback = (...args: any[]) => void;
 
 const useDebounce = <T extends Callback>(
   callback: T,
-  delay: number
+  delay: number,
 ): DebouncedFunc<T> => {
   const callbackRef = useRef(callback);
 
@@ -17,7 +17,7 @@ const useDebounce = <T extends Callback>(
 
   const debouncedCallback = useMemo(
     () => debounce(callbackRef.current, delay),
-    [delay]
+    [delay],
   );
 
   useEffect(() => {
diff --git a/src/hooks/__internal__/useFloating/useFloating.test.tsx b/src/hooks/__internal__/useFloating/useFloating.test.tsx
index 2ef893a34c..bb23b2374d 100644
--- a/src/hooks/__internal__/useFloating/useFloating.test.tsx
+++ b/src/hooks/__internal__/useFloating/useFloating.test.tsx
@@ -45,10 +45,10 @@ test("computePosition is called with the correct arguments when MockComponent is
   render(<MockComponent isOpen strategy="fixed" placement="top" />);
 
   expect(computePositionSpy.mock.calls[0][0]).toBe(
-    screen.getByTestId("reference-element")
+    screen.getByTestId("reference-element"),
   );
   expect(computePositionSpy.mock.calls[0][1]).toBe(
-    screen.getByTestId("floating-element")
+    screen.getByTestId("floating-element"),
   );
   expect(computePositionSpy.mock.calls[0][2]).toMatchObject({
     strategy: "fixed",
@@ -62,10 +62,10 @@ test("autoUpdate is invoked with proper arguments across different states", () =
   const { rerender } = render(<MockComponent isOpen />);
 
   expect(autoUpdateSpy.mock.calls[0][0]).toBe(
-    screen.getByTestId("reference-element")
+    screen.getByTestId("reference-element"),
   );
   expect(autoUpdateSpy.mock.calls[0][1]).toBe(
-    screen.getByTestId("floating-element")
+    screen.getByTestId("floating-element"),
   );
   expect(autoUpdateSpy.mock.calls[0][3]).toMatchObject({
     animationFrame: undefined,
@@ -122,19 +122,19 @@ test("when using size middleware, the original width and height are restored aft
 
 test("data-floating-placement attribute is added with correct placement when open and removed when closed", async () => {
   const { rerender } = render(
-    <MockComponent isOpen strategy="fixed" placement="top" />
+    <MockComponent isOpen strategy="fixed" placement="top" />,
   );
 
   await waitFor(() => {
     expect(screen.getByTestId("floating-element")).toHaveAttribute(
       "data-floating-placement",
-      "top"
+      "top",
     );
   });
 
   rerender(<MockComponent strategy="fixed" placement="top" />);
 
   expect(screen.getByTestId("floating-element")).not.toHaveAttribute(
-    "data-floating-placement"
+    "data-floating-placement",
   );
 });
diff --git a/src/hooks/__internal__/useFloating/useFloating.ts b/src/hooks/__internal__/useFloating/useFloating.ts
index 0243e3f3b9..3b53e5413f 100644
--- a/src/hooks/__internal__/useFloating/useFloating.ts
+++ b/src/hooks/__internal__/useFloating/useFloating.ts
@@ -71,7 +71,7 @@ const useFloating = ({
 
           floatingElement.setAttribute(
             "data-floating-placement",
-            currentPlacement
+            currentPlacement,
           );
         });
       };
diff --git a/src/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.tsx b/src/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.tsx
index dc9a62193a..1029177f45 100644
--- a/src/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.tsx
+++ b/src/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.tsx
@@ -5,14 +5,14 @@ import { defaultFocusableSelectors } from "../../../__internal__/focus-trap/focu
 export default (
   container?: RefObject<HTMLElement>,
   target?: RefObject<HTMLElement>,
-  focusCallback?: (ev: KeyboardEvent) => void
+  focusCallback?: (ev: KeyboardEvent) => void,
 ) => {
   useEffect(() => {
     const handleFocusPortalContent = (ev: KeyboardEvent) => {
       if (container?.current && target?.current) {
         const focusableElementsInContainer: HTMLElement[] = Array.from(
           container.current?.querySelectorAll(defaultFocusableSelectors) ||
-            /* istanbul ignore next */ []
+            /* istanbul ignore next */ [],
         );
 
         if (target?.current === document.activeElement) {
@@ -47,10 +47,10 @@ export default (
 
             const allFocusableElements: HTMLElement[] = Array.from(
               document.querySelectorAll(defaultFocusableSelectors) ||
-                /* istanbul ignore next */ []
+                /* istanbul ignore next */ [],
             );
             const filteredElements = allFocusableElements.filter(
-              (el) => el === target.current || Number(el.tabIndex) !== -1
+              (el) => el === target.current || Number(el.tabIndex) !== -1,
             );
             const nextIndex = filteredElements.indexOf(target.current) + 1;
 
diff --git a/src/hooks/__internal__/useFormSpacing/add-form-spacing/add-form-spacing.test.ts b/src/hooks/__internal__/useFormSpacing/add-form-spacing/add-form-spacing.test.ts
index f5ca3c2a68..baff4b8ce2 100644
--- a/src/hooks/__internal__/useFormSpacing/add-form-spacing/add-form-spacing.test.ts
+++ b/src/hooks/__internal__/useFormSpacing/add-form-spacing/add-form-spacing.test.ts
@@ -16,7 +16,7 @@ test.each(["mx", "marginX", "ml", "marginLeft", "mr", "marginRight"])(
       mb: "5px",
       mt: 0,
     });
-  }
+  },
 );
 
 test.each(["mt", "marginTop"])(
@@ -26,7 +26,7 @@ test.each(["mt", "marginTop"])(
       [marginProp]: "10px",
       mb: "5px",
     });
-  }
+  },
 );
 
 test.each(["mb", "marginBottom"])(
@@ -36,7 +36,7 @@ test.each(["mb", "marginBottom"])(
       [marginProp]: "10px",
       mt: 0,
     });
-  }
+  },
 );
 
 test.each(["my", "marginY", "m", "margin"])(
@@ -45,5 +45,5 @@ test.each(["my", "marginY", "m", "margin"])(
     expect(addFormSpacing({ [marginProp]: "10px" }, "5px")).toEqual({
       [marginProp]: "10px",
     });
-  }
+  },
 );
diff --git a/src/hooks/__internal__/useFormSpacing/add-form-spacing/index.ts b/src/hooks/__internal__/useFormSpacing/add-form-spacing/index.ts
index 9cc852cc3f..d058c3bee5 100644
--- a/src/hooks/__internal__/useFormSpacing/add-form-spacing/index.ts
+++ b/src/hooks/__internal__/useFormSpacing/add-form-spacing/index.ts
@@ -6,21 +6,13 @@ export default (marginProps: MarginProps, formMarginBottom?: string) => {
   }
   const copiedProps = { ...marginProps };
 
-  const {
-    mb,
-    marginBottom,
-    mt,
-    marginTop,
-    my,
-    marginY,
-    m,
-    margin,
-  } = copiedProps;
+  const { mb, marginBottom, mt, marginTop, my, marginY, m, margin } =
+    copiedProps;
   const hasCustomMarginBottom = [mb, marginBottom, my, marginY, m, margin].some(
-    (prop) => prop !== undefined
+    (prop) => prop !== undefined,
   );
   const hasCustomMarginTop = [mt, marginTop, my, marginY, m, margin].some(
-    (prop) => prop !== undefined
+    (prop) => prop !== undefined,
   );
 
   if (!hasCustomMarginBottom) {
diff --git a/src/hooks/__internal__/useFormSpacing/index.ts b/src/hooks/__internal__/useFormSpacing/index.ts
index 298e503b48..5dc6428633 100644
--- a/src/hooks/__internal__/useFormSpacing/index.ts
+++ b/src/hooks/__internal__/useFormSpacing/index.ts
@@ -8,12 +8,11 @@ import {
 import addFormSpacing from "./add-form-spacing";
 
 export default (props: Record<string, unknown> | MarginProps) => {
-  const { marginBottom } = useContext<FormSpacingContextProps>(
-    FormSpacingContext
-  );
+  const { marginBottom } =
+    useContext<FormSpacingContextProps>(FormSpacingContext);
   const marginProps = addFormSpacing(
     filterStyledSystemMarginProps(props),
-    marginBottom
+    marginBottom,
   );
 
   return marginProps;
diff --git a/src/hooks/__internal__/useFormSpacing/useFormSpacing.test.tsx b/src/hooks/__internal__/useFormSpacing/useFormSpacing.test.tsx
index 5873d4898b..1252ee7b5e 100644
--- a/src/hooks/__internal__/useFormSpacing/useFormSpacing.test.tsx
+++ b/src/hooks/__internal__/useFormSpacing/useFormSpacing.test.tsx
@@ -18,7 +18,7 @@ test("applies the form spacing when no custom value exists", () => {
   render(
     <FormSpacingProvider marginBottom="10px">
       <MockComponent />
-    </FormSpacingProvider>
+    </FormSpacingProvider>,
   );
 
   expect(screen.getByText("foo")).toHaveStyle({
@@ -31,7 +31,7 @@ test("applies the form spacing when custom values exist that don't override top
   render(
     <FormSpacingProvider marginBottom="10px">
       <MockComponent mx="10px" />
-    </FormSpacingProvider>
+    </FormSpacingProvider>,
   );
 
   expect(screen.getByText("foo")).toHaveStyle({
@@ -46,7 +46,7 @@ test("does not apply the form spacing when custom `my` value exists", () => {
   render(
     <FormSpacingProvider marginBottom="10px">
       <MockComponent my="5px" />
-    </FormSpacingProvider>
+    </FormSpacingProvider>,
   );
 
   expect(screen.getByText("foo")).toHaveStyle({
@@ -59,7 +59,7 @@ test("does not apply the form spacing when custom `m` exists", () => {
   render(
     <FormSpacingProvider marginBottom="10px">
       <MockComponent m="5px" />
-    </FormSpacingProvider>
+    </FormSpacingProvider>,
   );
 
   expect(screen.getByText("foo")).toHaveStyle({
@@ -72,7 +72,7 @@ test("does not apply the form spacing for top margin when custom `mt` value exis
   render(
     <FormSpacingProvider marginBottom="10px">
       <MockComponent mt="5px" />
-    </FormSpacingProvider>
+    </FormSpacingProvider>,
   );
 
   expect(screen.getByText("foo")).toHaveStyle({
@@ -85,7 +85,7 @@ test("does not apply the form spacing for bottom margin when custom `mb` value e
   render(
     <FormSpacingProvider marginBottom="10px">
       <MockComponent mb="5px" />
-    </FormSpacingProvider>
+    </FormSpacingProvider>,
   );
 
   expect(screen.getByText("foo")).toHaveStyle({
diff --git a/src/hooks/__internal__/useInputAccessibility/useInputAccessibility.test.ts b/src/hooks/__internal__/useInputAccessibility/useInputAccessibility.test.ts
index bb19cc9ce4..3b3fd36e64 100644
--- a/src/hooks/__internal__/useInputAccessibility/useInputAccessibility.test.ts
+++ b/src/hooks/__internal__/useInputAccessibility/useInputAccessibility.test.ts
@@ -32,11 +32,11 @@ test("returns ariaDescribedBy with fieldHelp and validationId combined when the
       fieldHelp,
       error,
       validationRedesignOptIn: true,
-    })
+    }),
   ).toEqual(
     expect.objectContaining({
       ariaDescribedBy: `${id}-field-help ${id}-validation`,
-    })
+    }),
   );
 });
 
@@ -47,7 +47,7 @@ describe.each([error, info, warning])(
       expect(useInputAccessibility({ id, [key]: key })).toEqual(
         expect.objectContaining({
           validationId: `${id}-validation`,
-        })
+        }),
       );
     });
 
@@ -55,7 +55,7 @@ describe.each([error, info, warning])(
       expect(useInputAccessibility({ id, [key]: key })).toEqual(
         expect.objectContaining({
           ariaDescribedBy: undefined,
-        })
+        }),
       );
     });
 
@@ -65,12 +65,12 @@ describe.each([error, info, warning])(
           id,
           [key]: key,
           validationRedesignOptIn: true,
-        })
+        }),
       ).toEqual(
         expect.objectContaining({
           ariaDescribedBy: `${id}-validation`,
-        })
+        }),
       );
     });
-  }
+  },
 );
diff --git a/src/hooks/__internal__/useInputAccessibility/useInputAccessibility.ts b/src/hooks/__internal__/useInputAccessibility/useInputAccessibility.ts
index a896b4a18a..0da81dd944 100644
--- a/src/hooks/__internal__/useInputAccessibility/useInputAccessibility.ts
+++ b/src/hooks/__internal__/useInputAccessibility/useInputAccessibility.ts
@@ -23,7 +23,7 @@ export default function useInputAccessibility({
   const labelId = label ? `${id}-label` : undefined;
 
   const validationId = [error, warning, info].filter(
-    (validation) => validation && typeof validation === "string"
+    (validation) => validation && typeof validation === "string",
   ).length
     ? `${id}-validation`
     : undefined;
diff --git a/src/hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.ts b/src/hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.ts
index de8bc46a0b..3e1025789e 100644
--- a/src/hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.ts
+++ b/src/hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.ts
@@ -1,7 +1,7 @@
 import useMediaQuery from "../../useMediaQuery";
 
 export default function useIsAboveBreakpoint(
-  breakpoint?: number
+  breakpoint?: number,
 ): boolean | undefined {
   const matchesQuery = useMediaQuery(`(min-width:${breakpoint}px)`);
   if (!breakpoint) return undefined;
diff --git a/src/hooks/__internal__/useLocale/useLocale.test.tsx b/src/hooks/__internal__/useLocale/useLocale.test.tsx
index 006bf6f263..3dff7c09d8 100644
--- a/src/hooks/__internal__/useLocale/useLocale.test.tsx
+++ b/src/hooks/__internal__/useLocale/useLocale.test.tsx
@@ -29,7 +29,7 @@ test("when I18nProvider exists, it should return a translation function that pro
       }}
     >
       <TestComponent />
-    </I18nProvider>
+    </I18nProvider>,
   );
 
   expect(screen.getByText("test")).toBeInTheDocument();
diff --git a/src/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.test.tsx b/src/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.test.tsx
index 4cce59eeed..29cc04cfe0 100644
--- a/src/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.test.tsx
+++ b/src/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.test.tsx
@@ -34,16 +34,16 @@ const MockComponent = ({ hideCb }: MockComponentProps) => {
       // DOM query is part of the mock component's implementation, and is not used by tests to find elements.
       // eslint-disable-next-line testing-library/no-node-access
       document.querySelectorAll<HTMLButtonElement>(
-        `[data-role="${containerID}"] button`
+        `[data-role="${containerID}"] button`,
       ),
-    []
+    [],
   );
 
   const handleKeyDown = useMenuKeyboardNavigation(
     mainRef,
     getButtonChildren,
     hideCb,
-    true
+    true,
   );
 
   return (
@@ -97,7 +97,7 @@ describe("useMenuKeyboardNavigation", () => {
         metaKey: modifier === "metaKey",
       });
       expect(screen.getByText(`${childButtonID}-0`)).toHaveFocus();
-    }
+    },
   );
 
   it("pressing ArrowDown key focuses the next child in the list and does not loop when last one is reached", () => {
diff --git a/src/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.ts b/src/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.ts
index 4ebd1f0548..18b9d07e0f 100644
--- a/src/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.ts
+++ b/src/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.ts
@@ -7,7 +7,7 @@ export default (
   mainControlRef: React.RefObject<HTMLButtonElement>,
   getButtonChildren: () => NodeListOf<HTMLButtonElement>,
   hide: () => void,
-  isOpen: boolean
+  isOpen: boolean,
 ) => {
   const refocusMainControl = useCallback(() => {
     hide();
@@ -21,7 +21,7 @@ export default (
         refocusMainControl();
       }
     },
-    [refocusMainControl]
+    [refocusMainControl],
   );
 
   // useModalmanager is used here to handle the escape key
@@ -43,9 +43,9 @@ export default (
 
       let nextIndex = -1;
 
-      const currentIndex = (Array.from(
-        buttonChildren
-      ) as HTMLElement[]).indexOf(document.activeElement as HTMLElement);
+      const currentIndex = (
+        Array.from(buttonChildren) as HTMLElement[]
+      ).indexOf(document.activeElement as HTMLElement);
 
       const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
 
@@ -88,12 +88,12 @@ export default (
         if (currentIndex === (childrenLength as number) - 1) {
           const elements = Array.from(
             document.querySelectorAll(
-              defaultFocusableSelectors
-            ) as NodeListOf<HTMLElement>
+              defaultFocusableSelectors,
+            ) as NodeListOf<HTMLElement>,
           ).filter((el) => Number(el.tabIndex) !== -1);
 
           const indexOf = elements.indexOf(
-            mainControlRef.current as HTMLButtonElement
+            mainControlRef.current as HTMLButtonElement,
           );
 
           elements[indexOf + 1]?.focus();
@@ -108,7 +108,7 @@ export default (
         buttonChildren?.[nextIndex]?.focus();
       }
     },
-    [hide, refocusMainControl, mainControlRef, getButtonChildren]
+    [hide, refocusMainControl, mainControlRef, getButtonChildren],
   );
 
   return handleKeyDown;
diff --git a/src/hooks/__internal__/useModalAria/useModalAria.test.tsx b/src/hooks/__internal__/useModalAria/useModalAria.test.tsx
index 656c77f0f9..9bc2ecb3de 100644
--- a/src/hooks/__internal__/useModalAria/useModalAria.test.tsx
+++ b/src/hooks/__internal__/useModalAria/useModalAria.test.tsx
@@ -114,7 +114,7 @@ describe("with one dialog", () => {
     await user.click(screen.getByRole("button", { name: "open" }));
 
     expect(
-      screen.queryByRole("button", { name: "open" })
+      screen.queryByRole("button", { name: "open" }),
     ).not.toBeInTheDocument();
   });
 
@@ -146,10 +146,10 @@ describe("with nested dialogs", () => {
   it("verifies only the first dialog open button is accessible when no dialogs are open", () => {
     render(<NestedModals />, { wrapper: CarbonProvider });
     expect(
-      screen.getByRole("button", { name: "Open modal 1" })
+      screen.getByRole("button", { name: "Open modal 1" }),
     ).toBeInTheDocument();
     expect(
-      screen.queryByRole("button", { name: "Open modal 2" })
+      screen.queryByRole("button", { name: "Open modal 2" }),
     ).not.toBeInTheDocument();
   });
 
@@ -161,13 +161,13 @@ describe("with nested dialogs", () => {
 
     expect(screen.getByRole("dialog", { name: "dialog 1" })).toHaveAttribute(
       "aria-modal",
-      "true"
+      "true",
     );
     expect(
-      screen.getByRole("button", { name: "Open modal 2" })
+      screen.getByRole("button", { name: "Open modal 2" }),
     ).toBeInTheDocument();
     expect(
-      screen.queryByRole("button", { name: "Open modal 1" })
+      screen.queryByRole("button", { name: "Open modal 1" }),
     ).not.toBeInTheDocument();
   });
 
@@ -180,20 +180,20 @@ describe("with nested dialogs", () => {
 
     expect(screen.getByRole("dialog", { name: "dialog 2" })).toHaveAttribute(
       "aria-modal",
-      "true"
+      "true",
     );
     expect(
-      screen.getByRole("button", { name: "Close modal 2" })
+      screen.getByRole("button", { name: "Close modal 2" }),
     ).toBeInTheDocument();
     expect(screen.queryByRole("dialog", { name: "dialog 1" })).toHaveAttribute(
       "aria-modal",
-      "false"
+      "false",
     );
     expect(
-      screen.queryByRole("button", { name: "Open modal 1" })
+      screen.queryByRole("button", { name: "Open modal 1" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("button", { name: "Open modal 2" })
+      screen.queryByRole("button", { name: "Open modal 2" }),
     ).not.toBeInTheDocument();
   });
 
@@ -207,16 +207,16 @@ describe("with nested dialogs", () => {
 
     expect(screen.getByRole("dialog", { name: "dialog 1" })).toHaveAttribute(
       "aria-modal",
-      "true"
+      "true",
     );
     expect(
-      screen.getByRole("button", { name: "Open modal 2" })
+      screen.getByRole("button", { name: "Open modal 2" }),
     ).toBeInTheDocument();
     expect(
-      screen.queryByRole("dialog", { name: "dialog 2" })
+      screen.queryByRole("dialog", { name: "dialog 2" }),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByRole("button", { name: "Open modal 1" })
+      screen.queryByRole("button", { name: "Open modal 1" }),
     ).not.toBeInTheDocument();
   });
 
@@ -230,12 +230,12 @@ describe("with nested dialogs", () => {
     await user.click(screen.getByRole("button", { name: "Close modal 1" }));
 
     expect(
-      screen.getByRole("button", { name: "Open modal 1" })
+      screen.getByRole("button", { name: "Open modal 1" }),
     ).toBeInTheDocument();
     await waitFor(() =>
       expect(
-        screen.queryByRole("button", { name: "Open modal 2" })
-      ).not.toBeInTheDocument()
+        screen.queryByRole("button", { name: "Open modal 2" }),
+      ).not.toBeInTheDocument(),
     );
   });
 });
@@ -249,7 +249,7 @@ it("overrides any pre-existing aria-hidden and inert properties when modal is op
       {/* @ts-expect-error inert property not recognised by React. Support to be added in React 19 https://github.com/facebook/react/pull/24730 */}
       <div data-role="old-inert" inert="foo" />
     </>,
-    { wrapper: CarbonProvider }
+    { wrapper: CarbonProvider },
   );
 
   await user.click(screen.getByRole("button", { name: "open" }));
@@ -257,11 +257,11 @@ it("overrides any pre-existing aria-hidden and inert properties when modal is op
   await waitFor(() =>
     expect(screen.getByTestId("old-aria-hidden")).toHaveAttribute(
       "aria-hidden",
-      "true"
-    )
+      "true",
+    ),
   );
   await waitFor(() =>
-    expect(screen.getByTestId("old-inert")).toHaveAttribute("inert", "")
+    expect(screen.getByTestId("old-inert")).toHaveAttribute("inert", ""),
   );
 });
 
@@ -274,7 +274,7 @@ it("restores any previously-overridden aria-hidden and inert properties when mod
       {/* @ts-expect-error inert property not recognised by React. Support to be added in React 19 https://github.com/facebook/react/pull/24730 */}
       <div data-role="old-inert" inert="foo" />
     </>,
-    { wrapper: CarbonProvider }
+    { wrapper: CarbonProvider },
   );
 
   await user.click(screen.getByRole("button", { name: "open" }));
@@ -283,11 +283,11 @@ it("restores any previously-overridden aria-hidden and inert properties when mod
   await waitFor(() =>
     expect(screen.getByTestId("old-aria-hidden")).toHaveAttribute(
       "aria-hidden",
-      "false"
-    )
+      "false",
+    ),
   );
   await waitFor(() =>
-    expect(screen.getByTestId("old-inert")).toHaveAttribute("inert", "foo")
+    expect(screen.getByTestId("old-inert")).toHaveAttribute("inert", "foo"),
   );
 });
 
@@ -299,7 +299,7 @@ describe("with additional content in a portal", () => {
     await user.click(screen.getByRole("button", { name: "open modal" }));
 
     expect(
-      screen.queryByRole("button", { name: "button inside portal" })
+      screen.queryByRole("button", { name: "button inside portal" }),
     ).not.toBeInTheDocument();
   });
 
@@ -312,7 +312,7 @@ describe("with additional content in a portal", () => {
     await user.click(screen.getByRole("button", { name: "open modal" }));
 
     expect(
-      screen.getByRole("button", { name: "button inside portal" })
+      screen.getByRole("button", { name: "button inside portal" }),
     ).toBeInTheDocument();
   });
 });
diff --git a/src/hooks/__internal__/useModalAria/useModalAria.tsx b/src/hooks/__internal__/useModalAria/useModalAria.tsx
index 781cfc95a9..3b76754c94 100644
--- a/src/hooks/__internal__/useModalAria/useModalAria.tsx
+++ b/src/hooks/__internal__/useModalAria/useModalAria.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect } from "react";
 import TopModalContext from "../../../components/carbon-provider/__internal__/top-modal.context";
 
 export default function useModalAria(
-  containerRef: React.RefObject<HTMLDivElement>
+  containerRef: React.RefObject<HTMLDivElement>,
 ) {
   const { topModal } = useContext(TopModalContext);
   const isTopModal = topModal?.contains(containerRef.current);
@@ -62,7 +62,7 @@ export default function useModalAria(
           } else {
             element.setAttribute("inert", inert);
           }
-        }
+        },
       );
   }, [topModal, isTopModal]);
 
diff --git a/src/hooks/__internal__/useModalManager/useModalManager.ts b/src/hooks/__internal__/useModalManager/useModalManager.ts
index f5c1a83bc0..e8da582570 100644
--- a/src/hooks/__internal__/useModalManager/useModalManager.ts
+++ b/src/hooks/__internal__/useModalManager/useModalManager.ts
@@ -32,7 +32,7 @@ const useModalManager = ({
         closeModal(ev);
       }
     },
-    [modalRef, closeModal]
+    [modalRef, closeModal],
   );
 
   const addListener = useCallback(() => {
@@ -81,7 +81,7 @@ const useModalManager = ({
         modalRegistered.current = true;
       }
     },
-    [setTriggerRefocusFlag, topModalOverride]
+    [setTriggerRefocusFlag, topModalOverride],
   );
 
   const unregisterModal = useCallback(
@@ -99,7 +99,7 @@ const useModalManager = ({
         modalRegistered.current = false;
       }
     },
-    [triggerRefocusOnClose]
+    [triggerRefocusOnClose],
   );
 
   useEffect(() => {
diff --git a/src/hooks/__internal__/useResizeObserver/useResizeObserver.test.tsx b/src/hooks/__internal__/useResizeObserver/useResizeObserver.test.tsx
index 72dcd26d8f..8411152103 100644
--- a/src/hooks/__internal__/useResizeObserver/useResizeObserver.test.tsx
+++ b/src/hooks/__internal__/useResizeObserver/useResizeObserver.test.tsx
@@ -47,13 +47,13 @@ describe("useResizeObserver hook functionality when enabled", () => {
     render(<TestComponent callback={callbackProp} disabled={false} />);
 
     expect(observeMock).toHaveBeenCalledWith(
-      screen.getByTestId("observed-node")
+      screen.getByTestId("observed-node"),
     );
   });
 
   it("should unobserve the element and disconnect the observer on component unmount when enabled", () => {
     const { unmount } = render(
-      <TestComponent callback={callbackProp} disabled={false} />
+      <TestComponent callback={callbackProp} disabled={false} />,
     );
 
     unmount();
@@ -102,7 +102,7 @@ describe("useResizeObserver hook functionality when disabled", () => {
 
   it("should not unobserve the element nor disconnect the observer on component unmount when disabled", () => {
     const { unmount } = render(
-      <TestComponent callback={callbackProp} disabled />
+      <TestComponent callback={callbackProp} disabled />,
     );
 
     unmount();
diff --git a/src/hooks/__internal__/useResizeObserver/useResizeObserver.ts b/src/hooks/__internal__/useResizeObserver/useResizeObserver.ts
index 82f2e6471a..02c7d9f2e0 100644
--- a/src/hooks/__internal__/useResizeObserver/useResizeObserver.ts
+++ b/src/hooks/__internal__/useResizeObserver/useResizeObserver.ts
@@ -6,7 +6,7 @@ export default function useResizeObserver(
   /** Callback meant to be executed on element resize */
   onResize: () => void,
   /** Flag to indicate whether hook should be disabled  */
-  disabled?: boolean
+  disabled?: boolean,
 ): void {
   const observer = useRef<ResizeObserver>();
   const onResizeRef = useRef<() => void>(onResize);
diff --git a/src/hooks/__internal__/useScrollBlock/scroll-block-manager.test.ts b/src/hooks/__internal__/useScrollBlock/scroll-block-manager.test.ts
index de491e8df1..31e74dcc2d 100644
--- a/src/hooks/__internal__/useScrollBlock/scroll-block-manager.test.ts
+++ b/src/hooks/__internal__/useScrollBlock/scroll-block-manager.test.ts
@@ -11,7 +11,7 @@ describe("ScrollBlockManager's registerComponent method behavior", () => {
 
   it("should add the registered component's ID to the global variable window.__CARBON_INTERNALS_SCROLL_BLOCKERS", () => {
     expect(window.__CARBON_INTERNALS_SCROLL_BLOCKERS?.components[id1]).toBe(
-      true
+      true,
     );
   });
 });
@@ -96,7 +96,7 @@ describe("ScrollBlockManager's saveRestoreValuesCallback and getRestoreValuesCal
 
     scrollBlockManager.saveRestoreValuesCallback(callback);
     expect(window.__CARBON_INTERNALS_SCROLL_BLOCKERS?.restoreValues).toBe(
-      callback
+      callback,
     );
 
     expect(scrollBlockManager.getRestoreValuesCallback()).toBe(callback);
diff --git a/src/hooks/__internal__/useScrollBlock/useScrollBlock.test.tsx b/src/hooks/__internal__/useScrollBlock/useScrollBlock.test.tsx
index 5001dfd8b5..1d91fcab10 100644
--- a/src/hooks/__internal__/useScrollBlock/useScrollBlock.test.tsx
+++ b/src/hooks/__internal__/useScrollBlock/useScrollBlock.test.tsx
@@ -54,7 +54,7 @@ test("sets proper styles on the body element on mount and resets them on unmount
 test("should save a restoreValues callback when TestComponent is mounted", () => {
   const saveRestoreValuesCallbackSpy = jest.spyOn(
     ScrollBlockManager.prototype,
-    "saveRestoreValuesCallback"
+    "saveRestoreValuesCallback",
   );
   const { unmount } = render(<TestComponent />);
   expect(saveRestoreValuesCallbackSpy).toHaveBeenCalled();
@@ -68,11 +68,11 @@ test("should invoke and clear restoreValues callback if it exists when TestCompo
     .mockImplementation(() => restoreValuesMock);
   const saveRestoreValuesCallbackSpy = jest.spyOn(
     ScrollBlockManager.prototype,
-    "saveRestoreValuesCallback"
+    "saveRestoreValuesCallback",
   );
   const getOriginalValuesSpy = jest.spyOn(
     ScrollBlockManager.prototype,
-    "getOriginalValues"
+    "getOriginalValues",
   );
 
   const { unmount } = render(<TestComponent />);
@@ -93,11 +93,11 @@ test("should not invoke getOriginalValues if restoreValues callback exists when
     .mockImplementation(() => restoreValuesMock);
   const saveRestoreValuesCallbackSpy = jest.spyOn(
     ScrollBlockManager.prototype,
-    "saveRestoreValuesCallback"
+    "saveRestoreValuesCallback",
   );
   const getOriginalValuesSpy = jest.spyOn(
     ScrollBlockManager.prototype,
-    "getOriginalValues"
+    "getOriginalValues",
   );
 
   const { unmount } = render(<TestComponent />);
@@ -112,7 +112,7 @@ test("should not invoke getOriginalValues if restoreValues callback exists when
 test("should invoke getOriginalValues if restoreValues callback does not exist when TestComponent is unmounted", () => {
   const getOriginalValuesSpy = jest.spyOn(
     ScrollBlockManager.prototype,
-    "getOriginalValues"
+    "getOriginalValues",
   );
   const { unmount } = render(<TestComponent />);
   if (window.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
diff --git a/src/hooks/__internal__/useScrollBlock/useScrollBlock.ts b/src/hooks/__internal__/useScrollBlock/useScrollBlock.ts
index 95f963abac..28f5421317 100644
--- a/src/hooks/__internal__/useScrollBlock/useScrollBlock.ts
+++ b/src/hooks/__internal__/useScrollBlock/useScrollBlock.ts
@@ -73,7 +73,7 @@ const useScrollBlock = (): {
       return;
     }
     const originalValues = rules.map(
-      ({ element, property }) => element.style[property]
+      ({ element, property }) => element.style[property],
     );
 
     originalValuesRef.current = originalValues;
diff --git a/src/hooks/__internal__/useThrottle/useThrottle.ts b/src/hooks/__internal__/useThrottle/useThrottle.ts
index 74bf62fc15..c334704ad0 100644
--- a/src/hooks/__internal__/useThrottle/useThrottle.ts
+++ b/src/hooks/__internal__/useThrottle/useThrottle.ts
@@ -7,7 +7,7 @@ type Callback = (...args: any[]) => void;
 
 const useThrottle = <T extends Callback>(
   callback: T,
-  delay: number
+  delay: number,
 ): DebouncedFunc<T> => {
   const callbackRef = useRef(callback);
 
@@ -17,7 +17,7 @@ const useThrottle = <T extends Callback>(
 
   const throttledCallback = useMemo(
     () => throttle(callbackRef.current, delay),
-    [delay]
+    [delay],
   );
 
   useEffect(() => {
diff --git a/src/hooks/__internal__/useUniqueId/useUniqueId.test.tsx b/src/hooks/__internal__/useUniqueId/useUniqueId.test.tsx
index 165f31fc1b..a823c8679b 100644
--- a/src/hooks/__internal__/useUniqueId/useUniqueId.test.tsx
+++ b/src/hooks/__internal__/useUniqueId/useUniqueId.test.tsx
@@ -8,7 +8,7 @@ const guid = "guid-12345";
 jest.mock("../../../__internal__/utils/helpers/guid");
 
 (createGuid as jest.MockedFunction<typeof createGuid>).mockImplementation(
-  () => guid
+  () => guid,
 );
 
 interface Props {
diff --git a/src/locales/locale.ts b/src/locales/locale.ts
index 50510bd24f..01638468e0 100644
--- a/src/locales/locale.ts
+++ b/src/locales/locale.ts
@@ -56,7 +56,7 @@ interface Locale {
       formSummary: (
         errors: number,
         warnings: number,
-        type: string
+        type: string,
       ) => [string, string] | null;
     };
   };
@@ -141,7 +141,7 @@ interface Locale {
   sort: {
     accessibleName: (
       sortContent?: string,
-      sortType?: "ascending" | "descending"
+      sortType?: "ascending" | "descending",
     ) => string;
   };
   splitButton: {
@@ -153,7 +153,7 @@ interface Locale {
       title: string,
       currentStep: number,
       totalSteps: number,
-      category?: string
+      category?: string,
     ) => string;
     closeIconAriaLabel?: () => string;
   };
diff --git a/src/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.test.tsx b/src/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.test.tsx
index 5f6863c1a6..dc6983b795 100644
--- a/src/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.test.tsx
+++ b/src/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.test.tsx
@@ -16,12 +16,12 @@ describe("CarbonScopedTokensProvider", () => {
         <ThemeProvider theme={sageTheme}>
           <CarbonScopedTokensProvider />
         </ThemeProvider>
-      </>
+      </>,
     );
 
     // Collect all the CSS stylesheets content for snapshot testing
     const cssRules = Array.from(document.styleSheets).flatMap((sheet) =>
-      Array.from(sheet.cssRules).map((rule) => rule.cssText)
+      Array.from(sheet.cssRules).map((rule) => rule.cssText),
     );
     expect(cssRules).toMatchSnapshot();
   });
diff --git a/src/style/design-tokens/debug-theme.util.ts b/src/style/design-tokens/debug-theme.util.ts
index df1ee16b12..943cba8dd1 100644
--- a/src/style/design-tokens/debug-theme.util.ts
+++ b/src/style/design-tokens/debug-theme.util.ts
@@ -13,7 +13,7 @@ import { ThemeObject } from "../themes/base";
  */
 
 const debugTheme = (
-  themeProperties: Partial<ThemeObject>
+  themeProperties: Partial<ThemeObject>,
 ): Record<string, string[]> =>
   Object.fromEntries(
     Object.entries(themeProperties).map(([key, value]) => {
@@ -47,7 +47,7 @@ const debugTheme = (
       }
 
       return [key, ""];
-    })
+    }),
   );
 
 export default {
diff --git a/src/style/design-tokens/generate-css-variables.util.test.tsx b/src/style/design-tokens/generate-css-variables.util.test.tsx
index db9ddeb309..44043eb47e 100644
--- a/src/style/design-tokens/generate-css-variables.util.test.tsx
+++ b/src/style/design-tokens/generate-css-variables.util.test.tsx
@@ -3,7 +3,7 @@ import generateCssVariables from "./generate-css-variables.util";
 
 const assertTokenValues = (
   tokens: ThemeObject | Record<string, string>,
-  optOut: boolean | undefined
+  optOut: boolean | undefined,
 ) => {
   const resultAsArray = generateCssVariables(tokens, optOut).split(/\r\n/);
 
diff --git a/src/style/design-tokens/generate-css-variables.util.ts b/src/style/design-tokens/generate-css-variables.util.ts
index e9f8e146c1..dfe2a7c802 100644
--- a/src/style/design-tokens/generate-css-variables.util.ts
+++ b/src/style/design-tokens/generate-css-variables.util.ts
@@ -11,7 +11,7 @@ import { ThemeObject } from "../themes/base";
 
 export default (
   theme: ThemeObject | Record<string, string>,
-  roundedCornersOptOut?: boolean
+  roundedCornersOptOut?: boolean,
 ): string =>
   Object.entries(theme)
     .map(([key, value]) => {
diff --git a/src/style/palette/index.ts b/src/style/palette/index.ts
index c1b03a78be..e1a2c3c3dc 100644
--- a/src/style/palette/index.ts
+++ b/src/style/palette/index.ts
@@ -3,16 +3,17 @@ import shade from "../utils/shade";
 
 export type PaletteFunction = (weight: number | string) => string;
 
-const cachedFunc = (cb: PaletteFunction) => (
-  cache: Record<string, string> = {}
-) => (weight: number | string) => {
-  if (cache[weight]) {
-    return cache[weight];
-  }
-  const color = cb(weight);
-  cache[weight] = color;
-  return color;
-};
+const cachedFunc =
+  (cb: PaletteFunction) =>
+  (cache: Record<string, string> = {}) =>
+  (weight: number | string) => {
+    if (cache[weight]) {
+      return cache[weight];
+    }
+    const color = cb(weight);
+    cache[weight] = color;
+    return color;
+  };
 
 /**
  * Takes a config object of base colors and, for each base, generates functions
@@ -31,7 +32,7 @@ const cachedFunc = (cb: PaletteFunction) => (
  * black (in case of `shade`) they wish to mix into the base color.
  */
 const generatePalette = (
-  config: Record<string, string>
+  config: Record<string, string>,
 ): Record<string, PaletteFunction> => {
   const baseNames = Object.keys(config);
 
@@ -45,7 +46,7 @@ const generatePalette = (
 
       return acc;
     },
-    {}
+    {},
   );
 
   return funcs;
diff --git a/src/style/style.test.ts b/src/style/style.test.ts
index 89c94149ab..c3eac87d1c 100644
--- a/src/style/style.test.ts
+++ b/src/style/style.test.ts
@@ -4,7 +4,7 @@ import generatePalette, { PaletteFunction } from "./palette";
 
 const assertCorrectColorMix = (
   colorConfig: Record<string, string>,
-  paletteObject: Record<string, PaletteFunction>
+  paletteObject: Record<string, PaletteFunction>,
 ) => {
   Object.keys(colorConfig).forEach((color) => {
     const match = color.match(/([a-z]+)([\d]{0,2})/i);
@@ -69,37 +69,37 @@ describe("style", () => {
   describe("mix", () => {
     it("defaults to a weight of 50", () => {
       expect(mix(config.genericGreen, "FFFFFF")).toEqual(
-        `#${colorConfig.genericGreenTint50}`
+        `#${colorConfig.genericGreenTint50}`,
       );
     });
 
     it("accepts colors without a hash symbol", () => {
       expect(mix(config.genericGreen, "FFFFFF")).toEqual(
-        `#${colorConfig.genericGreenTint50}`
+        `#${colorConfig.genericGreenTint50}`,
       );
     });
 
     it("accepts colors with a hash symbol", () => {
       expect(mix(`#${config.genericGreen}`, "#FFFFFF")).toEqual(
-        `#${colorConfig.genericGreenTint50}`
+        `#${colorConfig.genericGreenTint50}`,
       );
     });
 
     it("accepts three-digit hashes", () => {
       expect(mix(config.genericGreen, "FFF")).toEqual(
-        `#${colorConfig.genericGreenTint50}`
+        `#${colorConfig.genericGreenTint50}`,
       );
       expect(mix("FFF", config.genericGreen)).toEqual(
-        `#${colorConfig.genericGreenTint50}`
+        `#${colorConfig.genericGreenTint50}`,
       );
     });
 
     it("accepts colors with combinations of with and without hash symbols", () => {
       expect(mix(`#${config.genericGreen}`, "FFFFFF")).toEqual(
-        `#${colorConfig.genericGreenTint50}`
+        `#${colorConfig.genericGreenTint50}`,
       );
       expect(mix(config.genericGreen, "#FFFFFF")).toEqual(
-        `#${colorConfig.genericGreenTint50}`
+        `#${colorConfig.genericGreenTint50}`,
       );
     });
 
diff --git a/src/style/themes/base/index.ts b/src/style/themes/base/index.ts
index 114d26c2d6..49b290b7ec 100644
--- a/src/style/themes/base/index.ts
+++ b/src/style/themes/base/index.ts
@@ -22,7 +22,7 @@ const baseTheme = configureBase(palette);
 export default baseTheme;
 
 export const mergeWithBase = (
-  configureTheme: (p: BasePalette) => Partial<ThemeObject>
+  configureTheme: (p: BasePalette) => Partial<ThemeObject>,
 ): Partial<ThemeObject> => {
   const themeToMergeWithBase = configureTheme(palette);
 
diff --git a/src/style/themes/test-utils.ts b/src/style/themes/test-utils.ts
index bfb697e915..873c716b78 100644
--- a/src/style/themes/test-utils.ts
+++ b/src/style/themes/test-utils.ts
@@ -5,7 +5,7 @@ const isObject = (obj: Record<string, unknown>) => {
 // eslint-disable-next-line import/prefer-default-export
 export const assertIsSubset = (
   obj: Record<string, unknown>,
-  comparison: Record<string, unknown>
+  comparison: Record<string, unknown>,
 ) => {
   if (!isObject(obj)) {
     // no further nesting
@@ -22,7 +22,7 @@ export const assertIsSubset = (
     // repeat for nested objects
     assertIsSubset(
       obj[key] as Record<string, unknown>,
-      comparison[key] as Record<string, unknown>
+      comparison[key] as Record<string, unknown>,
     );
   });
 };
diff --git a/src/style/utils/add-hex-symbols.ts b/src/style/utils/add-hex-symbols.ts
index b6b91a4998..5808e134b2 100644
--- a/src/style/utils/add-hex-symbols.ts
+++ b/src/style/utils/add-hex-symbols.ts
@@ -1,11 +1,10 @@
-const addHex = (obj: Record<string, string>) => (
-  acc: Record<string, string>,
-  col: keyof Record<string, string>
-) => {
-  const color = obj[col];
-  acc[col] = `#${color}`;
-  return acc;
-};
+const addHex =
+  (obj: Record<string, string>) =>
+  (acc: Record<string, string>, col: keyof Record<string, string>) => {
+    const color = obj[col];
+    acc[col] = `#${color}`;
+    return acc;
+  };
 
 export default (configObject: Record<string, string>) =>
   Object.keys(configObject).reduce(addHex(configObject), {});
diff --git a/src/style/utils/box-gap.ts b/src/style/utils/box-gap.ts
index c98150a03c..c2a410d029 100644
--- a/src/style/utils/box-gap.ts
+++ b/src/style/utils/box-gap.ts
@@ -1,7 +1,7 @@
 import { space } from "../../style/themes/base/base-theme.config";
 
 export const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-export type AllowedNumericalValues = typeof GAP_VALUES[number];
+export type AllowedNumericalValues = (typeof GAP_VALUES)[number];
 export type Gap = AllowedNumericalValues | string;
 
 export const getGapValue = (gapValue: number | string) =>
diff --git a/src/style/utils/color.test.ts b/src/style/utils/color.test.ts
index c3993990bc..70511b3594 100644
--- a/src/style/utils/color.test.ts
+++ b/src/style/utils/color.test.ts
@@ -4,13 +4,13 @@ import { baseTheme } from "../themes";
 
 const assert = (
   props: Record<string, string>,
-  result: Record<string, string>
+  result: Record<string, string>,
 ) => {
   expect(
     color({
       theme: baseTheme,
       ...props,
-    })
+    }),
   ).toEqual(result);
 };
 
@@ -30,7 +30,7 @@ describe.each([
       },
       {
         [css]: "#FFB500",
-      }
+      },
     );
   });
 
@@ -41,7 +41,7 @@ describe.each([
       },
       {
         [css]: "#008200",
-      }
+      },
     );
   });
 
@@ -52,7 +52,7 @@ describe.each([
       },
       {
         [css]: "#61E961",
-      }
+      },
     );
   });
 
@@ -63,7 +63,7 @@ describe.each([
       },
       {
         [css]: "rgba(0,0,0,0.10)",
-      }
+      },
     );
   });
 
@@ -74,7 +74,7 @@ describe.each([
       },
       {
         [css]: "rgba(255,255,255,0.10)",
-      }
+      },
     );
   });
 
@@ -85,7 +85,7 @@ describe.each([
       },
       {
         [css]: "blue",
-      }
+      },
     );
 
     assert(
@@ -94,7 +94,7 @@ describe.each([
       },
       {
         [css]: "#eee",
-      }
+      },
     );
   });
 
@@ -105,7 +105,7 @@ describe.each([
       },
       {
         [css]: "var(--colorsYang100)",
-      }
+      },
     );
   });
 });
diff --git a/src/style/utils/color.ts b/src/style/utils/color.ts
index 75512c2052..b5da69024d 100644
--- a/src/style/utils/color.ts
+++ b/src/style/utils/color.ts
@@ -68,7 +68,7 @@ export default ({
     bg || backgroundColor
       ? toColor(
           rest.theme as ThemeObject,
-          (bg as string) || (backgroundColor as string)
+          (bg as string) || (backgroundColor as string),
         )
       : undefined;
 
diff --git a/src/style/utils/filter-out-position-props.ts b/src/style/utils/filter-out-position-props.ts
index 40506cc148..13ab9f9d36 100644
--- a/src/style/utils/filter-out-position-props.ts
+++ b/src/style/utils/filter-out-position-props.ts
@@ -10,7 +10,7 @@ export const positionPropertyNames = [
 ];
 
 export default function filterStyledSystemPositionProps(
-  originalObject: Record<string, unknown> | PositionProps
+  originalObject: Record<string, unknown> | PositionProps,
 ): PositionProps {
   return filterObjectProperties(originalObject, positionPropertyNames);
 }
diff --git a/src/style/utils/filter-out-styled-system-spacing-props.ts b/src/style/utils/filter-out-styled-system-spacing-props.ts
index 121f32a311..c642008f02 100644
--- a/src/style/utils/filter-out-styled-system-spacing-props.ts
+++ b/src/style/utils/filter-out-styled-system-spacing-props.ts
@@ -3,13 +3,13 @@ import { marginPropertyNames } from "./filter-styled-system-margin-props";
 import { paddingPropertyNames } from "./filter-styled-system-padding-props";
 
 const filterOutStyledSystemSpacingProps = (
-  props: Record<string, unknown> | SpaceProps
+  props: Record<string, unknown> | SpaceProps,
 ): Record<string, unknown> =>
   Object.fromEntries(
     Object.entries(props).filter(
       ([key]) =>
-        ![...marginPropertyNames, ...paddingPropertyNames].includes(key)
-    )
+        ![...marginPropertyNames, ...paddingPropertyNames].includes(key),
+    ),
   );
 
 export default filterOutStyledSystemSpacingProps;
diff --git a/src/style/utils/filter-styled-system-flexbox-props.ts b/src/style/utils/filter-styled-system-flexbox-props.ts
index 070cf72f1d..5f82d72161 100644
--- a/src/style/utils/filter-styled-system-flexbox-props.ts
+++ b/src/style/utils/filter-styled-system-flexbox-props.ts
@@ -18,7 +18,7 @@ export const flexboxPropertyNames = [
 ];
 
 export default function filterStyledSystemFlexboxProps(
-  originalObject: Record<string, unknown> | FlexboxProps
+  originalObject: Record<string, unknown> | FlexboxProps,
 ): FlexboxProps {
   return filterObjectProperties(originalObject, flexboxPropertyNames);
 }
diff --git a/src/style/utils/filter-styled-system-grid-props.ts b/src/style/utils/filter-styled-system-grid-props.ts
index ac0488241a..e7f4c331bc 100644
--- a/src/style/utils/filter-styled-system-grid-props.ts
+++ b/src/style/utils/filter-styled-system-grid-props.ts
@@ -14,7 +14,7 @@ export const gridPropertyNames = [
 ];
 
 export default function filterStyledSystemGridProps(
-  originalObject: Record<string, unknown> | GridProps
+  originalObject: Record<string, unknown> | GridProps,
 ): GridProps {
   return filterObjectProperties(originalObject, gridPropertyNames);
 }
diff --git a/src/style/utils/filter-styled-system-layout-props.ts b/src/style/utils/filter-styled-system-layout-props.ts
index cf2a5c600e..43e4072341 100644
--- a/src/style/utils/filter-styled-system-layout-props.ts
+++ b/src/style/utils/filter-styled-system-layout-props.ts
@@ -22,7 +22,7 @@ export const layoutPropertyNames = [
 ];
 
 export default function filterStyledSystemLayoutProps(
-  originalObject: Record<string, unknown> | LayoutProps | PositionProps
+  originalObject: Record<string, unknown> | LayoutProps | PositionProps,
 ): LayoutProps | PositionProps {
   return filterObjectProperties(originalObject, layoutPropertyNames);
 }
diff --git a/src/style/utils/filter-styled-system-margin-props.ts b/src/style/utils/filter-styled-system-margin-props.ts
index 8a8d1d8e58..50bd225049 100644
--- a/src/style/utils/filter-styled-system-margin-props.ts
+++ b/src/style/utils/filter-styled-system-margin-props.ts
@@ -19,7 +19,7 @@ export const marginPropertyNames = [
 ];
 
 export default function filterStyledSystemMarginProps(
-  originalObject: Record<string, unknown> | MarginProps
+  originalObject: Record<string, unknown> | MarginProps,
 ): MarginProps {
   return filterObjectProperties(originalObject, marginPropertyNames);
 }
diff --git a/src/style/utils/filter-styled-system-padding-props.ts b/src/style/utils/filter-styled-system-padding-props.ts
index 9073e0f301..a21fb0d712 100644
--- a/src/style/utils/filter-styled-system-padding-props.ts
+++ b/src/style/utils/filter-styled-system-padding-props.ts
@@ -46,7 +46,7 @@ export const paddingPropertyNames = [
 ];
 
 export default function filterStyledSystemPaddingProps(
-  props: Record<string, unknown> | PaddingProps
+  props: Record<string, unknown> | PaddingProps,
 ): PaddingProps {
   return filterObjectProperties(props, paddingPropertyNames);
 }
diff --git a/src/style/utils/get-color-value.test.ts b/src/style/utils/get-color-value.test.ts
index 97094966a5..35f56d1396 100644
--- a/src/style/utils/get-color-value.test.ts
+++ b/src/style/utils/get-color-value.test.ts
@@ -12,5 +12,5 @@ it.each(colors)(
   "for the color `%s` return the correct value `%s`",
   (color, expectedColor) => {
     expect(getColorValue(color)).toEqual(expectedColor);
-  }
+  },
 );
diff --git a/src/style/utils/merge-deep.ts b/src/style/utils/merge-deep.ts
index 8c98d0b9ee..bdae58bdaa 100644
--- a/src/style/utils/merge-deep.ts
+++ b/src/style/utils/merge-deep.ts
@@ -17,7 +17,7 @@ function merge(
       if (isObject(source[key])) {
         merge(
           _target[key] as Record<string, unknown>,
-          source[key] as Record<string, unknown>
+          source[key] as Record<string, unknown>,
         );
       } else {
         Object.assign(_target, { [key]: source[key] });
diff --git a/src/style/utils/mix.ts b/src/style/utils/mix.ts
index ae64886e6d..dddc0bc856 100644
--- a/src/style/utils/mix.ts
+++ b/src/style/utils/mix.ts
@@ -15,7 +15,7 @@ const processHexes = (...hexes: string[]): string[] => {
 export default (
   inputColorA: string,
   inputColorB: string,
-  weight = 50
+  weight = 50,
 ): string => {
   const [colorA, colorB] = processHexes(inputColorA, inputColorB);
 
@@ -32,7 +32,7 @@ export default (
       const val2 = hexToDec(colorBPairs[i]);
 
       const combination = decToHex(
-        Math.round(val2 + (val1 - val2) * (weight / 100.0))
+        Math.round(val2 + (val1 - val2) * (weight / 100.0)),
       );
 
       return acc + combination.padStart(2, "0");