@nnc-digital/nnc-design-system 1.0.0-beta1 → 1.0.0-beta11

package/build/index.js

@@ -3887,7 +3887,7 @@ var Autocomplete = function (_a) {
         })));
 };
 
-const Container$18 = styled__default.default.div`
+const Container$19 = styled__default.default.div`
   display: block;
 `;
 
@@ -3972,7 +3972,7 @@ var BackToTop = function (_a) {
     React.useEffect(function () {
         window.addEventListener('scroll', toggleVisible);
     });
-    return (React__default.default.createElement(Container$18, { "data-testid": "BackToTop" }, isActive && (React__default.default.createElement(BackToTopButton, { onClick: scrollToTop, "$visible": visible, "data-testid": "BackToTopButton", type: "button", "aria-label": "Go to the top of the page" },
+    return (React__default.default.createElement(Container$19, { "data-testid": "BackToTop" }, isActive && (React__default.default.createElement(BackToTopButton, { onClick: scrollToTop, "$visible": visible, "data-testid": "BackToTopButton", type: "button", "aria-label": "Go to the top of the page" },
         React__default.default.createElement(ChevronIcon, { colourFill: themeContext.theme_vars.colours.white, direction: "up" })))));
 };
 
@@ -4076,9 +4076,9 @@ var Button$4 = function (_a) {
     return (React__default.default.createElement(StyledButton$1, __assign$2({ className: ["button--".concat(size), mode].join(' ') }, href, { title: title ? title : text, "$colourOverride": colourOverride && colourOverride }, props), text ? text : children));
 };
 
-var Container$17 = styled__default.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
-var Label$5 = styled__default.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 15px;\n"], ["\n  display: block;\n  margin-bottom: 15px;\n"])));
-var VisuallyHiddenLabel = styled__default.default(Label$5)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  border: 0;\n  white-space: nowrap;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  border: 0;\n  white-space: nowrap;\n"])));
+var Container$18 = styled__default.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var Label$6 = styled__default.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 15px;\n"], ["\n  display: block;\n  margin-bottom: 15px;\n"])));
+var VisuallyHiddenLabel = styled__default.default(Label$6)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  border: 0;\n  white-space: nowrap;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  border: 0;\n  white-space: nowrap;\n"])));
 var BinCollectionButtonStyles = styled__default.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    button {\n      margin: 10px 10px 12px 10px;\n    }\n"], ["\n    button {\n      margin: 10px 10px 12px 10px;\n    }\n"])));
 var FormContainer$1 = styled__default.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  ", "\n"])), function (props) {
     return props.$isLoading && "\n          opacity: 0.5; \n          pointer-events: none;\n      ";
@@ -4091,7 +4091,7 @@ styled__default.default.div(templateObject_10 || (templateObject_10 = __makeTemp
 styled__default.default.input(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
 
-const Container$16 = styled__default.default.div`
+const Container$17 = styled__default.default.div`
   display: flex;
   -webkit-flex-direction: row;
   -moz-flex-direction: row;
@@ -4128,7 +4128,7 @@ const ErrorSummary = styled__default.default.div`
  */
 var FormWithLine = function (_a) {
     var _b = _a.lineColour, lineColour = _b === void 0 ? '#C6C6C6' : _b, _c = _a.hideLine, hideLine = _c === void 0 ? false : _c, formRole = _a.formRole, formMethod = _a.formMethod, formURL = _a.formURL, _d = _a.isError, isError = _d === void 0 ? false : _d, errorSummary = _a.errorSummary, onSubmit = _a.onSubmit, children = _a.children;
-    return (React__default.default.createElement(Container$16, null,
+    return (React__default.default.createElement(Container$17, null,
         React__default.default.createElement(Line$1, { "$lineColour": lineColour, "$hideLine": hideLine, "$isError": isError }),
         React__default.default.createElement(Form, { onSubmit: onSubmit, "$hideLine": hideLine, role: formRole, method: formMethod, url: formURL, "data-testid": "FormWithLine" },
             errorSummary && React__default.default.createElement(ErrorSummary, null, errorSummary),
@@ -4206,7 +4206,7 @@ var FormButton = function (_a) {
     return (React__default.default.createElement(StyledButton, __assign$2({ type: type, className: ["button--".concat(size), mode].join(' ') }, props), text));
 };
 
-const Container$15 = styled__default.default.div`
+const Container$16 = styled__default.default.div`
   ${(props) => props.theme.fontStyles};
 `;
 
@@ -4216,7 +4216,7 @@ const hideLabel$1 = (props) => {
   }
 };
 
-const Label$4 = styled__default.default.label`
+const Label$5 = styled__default.default.label`
   display: block;
   margin-bottom: 5px;
   ${hideLabel$1}
@@ -4251,8 +4251,8 @@ const Option = styled__default.default.option`
 
 var DropDownSelect = function (_a) {
     var id = _a.id, label = _a.label, options = _a.options, onChange = _a.onChange, selected = _a.selected, _b = _a.hideLabel, hideLabel = _b === void 0 ? false : _b;
-    return (React__default.default.createElement(Container$15, null,
-        React__default.default.createElement(Label$4, { htmlFor: id, "$hideLabel": hideLabel }, label),
+    return (React__default.default.createElement(Container$16, null,
+        React__default.default.createElement(Label$5, { htmlFor: id, "$hideLabel": hideLabel }, label),
         React__default.default.createElement(Select, { id: id, name: id, onChange: onChange && onChange, defaultValue: selected && selected }, options.map(function (option, i) { return (React__default.default.createElement(Option, { key: i, value: option.value }, option.title)); }))));
 };
 
@@ -4535,7 +4535,7 @@ var BinCollection = function (_a) {
     React.useEffect(function () {
         seenTitles.current.clear();
     }, [calendarEvents]);
-    return (React__default.default.createElement(Container$17, { "data-testid": "BinCollection" },
+    return (React__default.default.createElement(Container$18, { "data-testid": "BinCollection" },
         React__default.default.createElement(FormWithLine, { onSubmit: handleSubmit, isError: isError, lineColour: themeContext.theme_vars.colours.$grey_dark, hideLine: true },
             React__default.default.createElement(FormContainer$1, { "$isLoading": isLoading },
                 React__default.default.createElement(Heading, { level: 2, text: "Bin collection checker" }),
@@ -6642,7 +6642,7 @@ var HeadingWithIcon = function (_a) {
         React__default.default.createElement(Heading, { text: text, level: level })));
 };
 
-const Container$14 = styled__default.default.div`
+const Container$15 = styled__default.default.div`
   display: flex;
   width: 100%;
   min-height: 400px;
@@ -6666,7 +6666,7 @@ var Map$1 = function (_a) {
             setMap(new window.google.maps.Map(ref.current, { center: center, zoom: zoom }));
         }
     }, [ref, map]);
-    return (React__default.default.createElement(Container$14, { "data-testid": "Map" },
+    return (React__default.default.createElement(Container$15, { "data-testid": "Map" },
         React__default.default.createElement("div", { ref: ref }),
         React__default.default.Children.map(children, function (child) {
             if (React__default.default.isValidElement(child)) {
@@ -6727,7 +6727,7 @@ var MapMarker = function (options) {
     return null;
 };
 
-const Container$13 = styled__default.default.div`
+const Container$14 = styled__default.default.div`
   ${(props) => props.theme.fontStyles};
   display: block;
   border-top: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
@@ -7508,7 +7508,7 @@ var Pagination = function (_a) {
         }
     };
     if (numbers.length > 1) {
-        return (React__default.default.createElement(Container$13, { "data-testid": "Pagination", role: "navigation", "aria-label": "Pagination" },
+        return (React__default.default.createElement(Container$14, { "data-testid": "Pagination", role: "navigation", "aria-label": "Pagination" },
             currentPage > 1 && (React__default.default.createElement(Previous, { onClick: function () { return buttonClick(currentPage - 1); }, title: "Go back a page" }, "Previous")),
             React__default.default.createElement(NumbersContainer, null, numbers.map(function (v, i) { return (React__default.default.createElement(NumberContainer, { key: i },
                 v === '...' && React__default.default.createElement(Ellipsis, null, "..."),
@@ -7520,7 +7520,7 @@ var Pagination = function (_a) {
     return null;
 };
 
-const Container$12 = styled__default.default.div`
+const Container$13 = styled__default.default.div`
   ${(props) => props.theme.fontStyles};
   margin-bottom: 30px;
 `;
@@ -7691,7 +7691,7 @@ var CheckboxListFilter = function (_a) {
         handleParams('news', [{ key: NewsArticleFilterFields.articleType.queryParamKey, value: articleTypes }], ['page']);
     };
     var backupLabel = Math.random().toString(36).substring(7);
-    return (React__default.default.createElement(Container$12, { "data-testid": "CheckboxListFilter" },
+    return (React__default.default.createElement(Container$13, { "data-testid": "CheckboxListFilter" },
         React__default.default.createElement(Fieldset$2, { "aria-describedby": hintId },
             React__default.default.createElement(Legend$2, { "$labelHidden": labelHidden, "data-testid": "CheckboxListFilterLegend" }, label),
             React__default.default.createElement(Hint, { id: hintId, "$hintHidden": hintHidden, "data-testid": "CheckboxListFilterHint" }, hint),
@@ -7721,17 +7721,17 @@ const oneColStyles = (props) => {
 
 const PromotedLinks$1 = styled__default.default.div`
   ${(props) => props.theme.fontStyles}
-  margin-top: 30px;
+  margin-top: 15px;
 
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.s}) {
     display: -ms-flex;
     display: -webkit-flex;
     display: flex;
     flex-wrap: wrap;
-    margin-top: 60px;
+    margin-top: 30px;
   }
   @media screen and (min-width: calc(${(props) => props.theme.theme_vars.breakpoints.l} + 60px)) {
-    margin-top: 90px;
+    margin-top: 45px;
   }
   flex-direction: ${(prop) => (prop.oneCol ? 'column' : 'inherit')};
 `;
@@ -7823,7 +7823,7 @@ const PromotedLink$1 = styled__default.default.a`
   ${oneColStyles}
 `;
 
-const Container$11 = styled__default.default.div`
+const Container$12 = styled__default.default.div`
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
@@ -7846,7 +7846,7 @@ const Container$11 = styled__default.default.div`
 
 var Row$1 = function (_a) {
     var _b = _a.hasBorder, hasBorder = _b === void 0 ? false : _b, _c = _a.isList, isList = _c === void 0 ? false : _c, _d = _a.hasWrap, hasWrap = _d === void 0 ? true : _d, children = _a.children;
-    return (React__default.default.createElement(Container$11, { "data-testid": "Row", "$hasBorder": hasBorder, "$hasWrap": hasWrap, as: isList ? 'ul' : 'div' }, children));
+    return (React__default.default.createElement(Container$12, { "data-testid": "Row", "$hasBorder": hasBorder, "$hasWrap": hasWrap, as: isList ? 'ul' : 'div' }, children));
 };
 
 const calculateWidth = (size) => {
@@ -7896,7 +7896,7 @@ const widths = (props) => {
   `;
 };
 
-const Container$10 = styled__default.default.div`
+const Container$11 = styled__default.default.div`
   box-sizing: border-box;
   display: block;
   padding: ${(props) => (props.$hasPadding ? props.theme.theme_vars.spacingSizes.small : `0`)};
@@ -7907,14 +7907,14 @@ const Container$10 = styled__default.default.div`
 
 var Column = function (_a) {
     var _b = _a.small, small = _b === void 0 ? 'full' : _b, _c = _a.medium, medium = _c === void 0 ? 'one-half' : _c, _d = _a.large, large = _d === void 0 ? 'one-third' : _d, _e = _a.hasPadding, hasPadding = _e === void 0 ? true : _e, _f = _a.hasBorder, hasBorder = _f === void 0 ? false : _f, _g = _a.isList, isList = _g === void 0 ? false : _g, classes = _a.classes, children = _a.children;
-    return (React__default.default.createElement(Container$10, { "data-testid": "Column", "$small": small, "$medium": medium, "$large": large, "$hasPadding": hasPadding, "$hasBorder": hasBorder, as: isList ? 'li' : 'div', className: classes }, children));
+    return (React__default.default.createElement(Container$11, { "data-testid": "Column", "$small": small, "$medium": medium, "$large": large, "$hasPadding": hasPadding, "$hasBorder": hasBorder, as: isList ? 'li' : 'div', className: classes }, children));
 };
 
 var PromotedLinks = function (_a) {
     var promotedLinksArray = _a.promotedLinksArray, oneCol = _a.oneCol;
     if (promotedLinksArray.length > 0) {
         return (React__default.default.createElement(PromotedLinks$1, { "data-testid": "PromotedLinks", "$oneCol": oneCol },
-            React__default.default.createElement(Row$1, { isList: true, hasWrap: false }, promotedLinksArray.map(function (link, i) { return (React__default.default.createElement(Column, { isList: true, small: "full", medium: "one-half", large: "auto", key: i },
+            React__default.default.createElement(Row$1, { isList: true, hasWrap: true }, promotedLinksArray.map(function (link, i) { return (React__default.default.createElement(Column, { isList: true, small: "full", medium: "one-half", large: "one-third", key: i },
                 React__default.default.createElement(PromotedLink$1, { "$oneCol": oneCol, href: link.url, title: link.title },
                     React__default.default.createElement("span", null, link.title)))); }))));
     }
@@ -7923,7 +7923,7 @@ var PromotedLinks = function (_a) {
     }
 };
 
-const Container$$ = styled__default.default.div`
+const Container$10 = styled__default.default.div`
   display: block;
 `;
 
@@ -7959,7 +7959,7 @@ const Cookies = styled__default.default.button`
   }
 `;
 
-const Container$_ = styled__default.default.div`
+const Container$$ = styled__default.default.div`
   ${(props) => props.theme.fontStyles}
   background-color: ${(props) => props.theme.theme_vars.colours.grey_light};
   padding: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
@@ -8233,18 +8233,18 @@ var CookieBanner = function (_a) {
         hideCookiesAcceptedConfirmationBanner();
     };
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        showCookieBanner && (React__default.default.createElement(Container$_, { "data-testid": "CookieBanner" },
+        showCookieBanner && (React__default.default.createElement(Container$$, { "data-testid": "CookieBanner" },
             React__default.default.createElement(CookieMessage, null,
                 React__default.default.createElement(CookieHeading, null, title),
                 React__default.default.createElement(CookieParagraph, null, paragraph),
                 React__default.default.createElement(ButtonsContainer, null,
                     React__default.default.createElement(FormButton, { primary: true, text: acceptButtonText, isDisabled: true, onClick: acceptCookies, size: "large" }),
                     React__default.default.createElement(FormButton, { primary: true, text: rejectButtonText, isDisabled: true, onClick: rejectCookies, size: "large" }))))),
-        showCookiesRejectedBanner && (React__default.default.createElement(Container$_, { "data-testid": "CookieBannerRejected", id: "CookieBannerRejected" },
+        showCookiesRejectedBanner && (React__default.default.createElement(Container$$, { "data-testid": "CookieBannerRejected", id: "CookieBannerRejected" },
             React__default.default.createElement(CookieMessage, { isInline: true },
                 React__default.default.createElement(CookieParagraph, null, rejectConfirmationText),
                 React__default.default.createElement(CookieHide, { onClick: hideCookiesConfirmationBanner, "aria-controls": "CookieBannerRejected", "aria-hidden": "false" }, "Hide")))),
-        showCookiesAcceptedBanner && (React__default.default.createElement(Container$_, { "data-testid": "CookieBannerAccepted", id: "CookieBannerAccepted" },
+        showCookiesAcceptedBanner && (React__default.default.createElement(Container$$, { "data-testid": "CookieBannerAccepted", id: "CookieBannerAccepted" },
             React__default.default.createElement(CookieMessage, { isInline: true },
                 React__default.default.createElement(CookieParagraph, null, acceptConfirmationText),
                 React__default.default.createElement(CookieHide, { onClick: hideCookiesConfirmationBanner, "aria-controls": "CookieBannerAccepted", "aria-hidden": "false" }, "Hide"))))));
@@ -8266,7 +8266,7 @@ var StaticMap = function (_a) {
         return "&markers=size:".concat(size, "%7Ccolor:").concat(colour).concat(label, "%7C").concat(mapMarker.lat, ",").concat(mapMarker.lng);
     })
         .join('');
-    return (React__default.default.createElement(Container$$, { "data-testid": "StaticMap" },
+    return (React__default.default.createElement(Container$10, { "data-testid": "StaticMap" },
         React__default.default.createElement(Message, null,
             React__default.default.createElement("span", null,
                 "To interact with the map, you need to ",
@@ -8287,7 +8287,7 @@ var TextInput = function (_a) {
 
 // Accordion
 
-const Container$Z = styled__default.default.div`
+const Container$_ = styled__default.default.div`
   ${(props) => props.theme.fontStyles}
   margin-bottom: 20px;
   border-bottom: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
@@ -8564,7 +8564,7 @@ var Accordion$1 = function (_a) {
         setAccordionStates(newStatus);
     };
     var accordionId = "accordion".concat(React.useId());
-    return (React__default.default.createElement(Container$Z, { "data-testid": "Accordion", id: accordionId },
+    return (React__default.default.createElement(Container$_, { "data-testid": "Accordion", id: accordionId },
         showControls && sections.length > 1 && (React__default.default.createElement(AccordionControls$1, null,
             React__default.default.createElement(OpenAllButton, { onClick: toggleAll, type: "button", "aria-expanded": !openAll },
                 openAll ? 'Open all' : 'Close all',
@@ -8615,7 +8615,7 @@ var BlockQuote = function (_a) {
         citation && React__default.default.createElement(Citation, null, citation)));
 };
 
-const Container$Y = styled__default.default.div`
+const Container$Z = styled__default.default.div`
     margin-bottom: 30px;
     display: block;
 
@@ -8630,11 +8630,11 @@ const Container$Y = styled__default.default.div`
  */
 var CallToAction = function (_a) {
     var primary = _a.primary; _a.size; var text = _a.text, url = _a.url, isExternal = _a.isExternal, isDisabled = _a.isDisabled; __rest(_a, ["primary", "size", "text", "url", "isExternal", "isDisabled"]);
-    return (React__default.default.createElement(Container$Y, null,
+    return (React__default.default.createElement(Container$Z, null,
         React__default.default.createElement(Button$4, { primary: primary, size: "large", text: text, url: url, isExternal: isExternal, isDisabled: isDisabled })));
 };
 
-const Container$X = styled__default.default.div`
+const Container$Y = styled__default.default.div`
   display: block;
   ${(props) => props.theme.fontStyles}
 `;
@@ -8810,7 +8810,7 @@ var CouncilTaxAlphabeticalDirectory = function (_a) {
         });
         return letterData;
     });
-    return (React__default.default.createElement(Container$X, { "data-testid": "AlphabeticalDirectory", ref: directoryRef },
+    return (React__default.default.createElement(Container$Y, { "data-testid": "AlphabeticalDirectory", ref: directoryRef },
         React__default.default.createElement(React__default.default.Fragment, null,
             parishes.length === 0 && (React__default.default.createElement(ErrorText, null, "There was an issue fetching the parish data. Please try again later.")),
             parish === null ? (React__default.default.createElement(React__default.default.Fragment, null, sortedData.map(function (letter, i) { return (React__default.default.createElement(Row, { key: i },
@@ -8836,9 +8836,9 @@ var CouncilTaxAlphabeticalDirectory = function (_a) {
                             React__default.default.createElement("td", null, Number(parish.values[band]).toLocaleString('en-GB', { style: 'currency', currency: 'GBP' })))); })))))))));
 };
 
-const Container$W = styled__default.default.div``;
+const Container$X = styled__default.default.div``;
 
-const Container$V = styled__default.default.div`
+const Container$W = styled__default.default.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -19493,7 +19493,7 @@ function markDirtyUp(node) {
   }
 }
 
-let Container$U = class Container extends Node$1 {
+let Container$V = class Container extends Node$1 {
   append(...children) {
     for (let child of children) {
       let nodes = this.normalize(child, this.last);
@@ -19866,27 +19866,27 @@ let Container$U = class Container extends Node$1 {
   }
 };
 
-Container$U.registerParse = dependant => {
+Container$V.registerParse = dependant => {
   parse$4 = dependant;
 };
 
-Container$U.registerRule = dependant => {
+Container$V.registerRule = dependant => {
   Rule$4 = dependant;
 };
 
-Container$U.registerAtRule = dependant => {
+Container$V.registerAtRule = dependant => {
   AtRule$4 = dependant;
 };
 
-Container$U.registerRoot = dependant => {
+Container$V.registerRoot = dependant => {
   Root$6 = dependant;
 };
 
-var container = Container$U;
-Container$U.default = Container$U;
+var container = Container$V;
+Container$V.default = Container$V;
 
 /* c8 ignore start */
-Container$U.rebuild = node => {
+Container$V.rebuild = node => {
   if (node.type === 'atrule') {
     Object.setPrototypeOf(node, AtRule$4.prototype);
   } else if (node.type === 'rule') {
@@ -19903,16 +19903,16 @@ Container$U.rebuild = node => {
 
   if (node.nodes) {
     node.nodes.forEach(child => {
-      Container$U.rebuild(child);
+      Container$V.rebuild(child);
     });
   }
 };
 
-let Container$T = container;
+let Container$U = container;
 
 let LazyResult$4, Processor$3;
 
-let Document$3 = class Document extends Container$T {
+let Document$3 = class Document extends Container$U {
   constructor(defaults) {
     // type needs to be passed to super, otherwise child roots won't be normalized correctly
     super({ type: 'document', ...defaults });
@@ -20030,9 +20030,9 @@ let Result$4 = class Result {
 var result = Result$4;
 Result$4.default = Result$4;
 
-let Container$S = container;
+let Container$T = container;
 
-let AtRule$3 = class AtRule extends Container$S {
+let AtRule$3 = class AtRule extends Container$T {
   constructor(defaults) {
     super(defaults);
     this.type = 'atrule';
@@ -20052,13 +20052,13 @@ let AtRule$3 = class AtRule extends Container$S {
 var atRule = AtRule$3;
 AtRule$3.default = AtRule$3;
 
-Container$S.registerAtRule(AtRule$3);
+Container$T.registerAtRule(AtRule$3);
 
-let Container$R = container;
+let Container$S = container;
 
 let LazyResult$3, Processor$2;
 
-let Root$5 = class Root extends Container$R {
+let Root$5 = class Root extends Container$S {
   constructor(defaults) {
     super(defaults);
     this.type = 'root';
@@ -20112,7 +20112,7 @@ Root$5.registerProcessor = dependant => {
 var root = Root$5;
 Root$5.default = Root$5;
 
-Container$R.registerRoot(Root$5);
+Container$S.registerRoot(Root$5);
 
 let list$2 = {
   comma(string) {
@@ -20171,10 +20171,10 @@ let list$2 = {
 var list_1 = list$2;
 list$2.default = list$2;
 
-let Container$Q = container;
+let Container$R = container;
 let list$1 = list_1;
 
-let Rule$3 = class Rule extends Container$Q {
+let Rule$3 = class Rule extends Container$R {
   constructor(defaults) {
     super(defaults);
     this.type = 'rule';
@@ -20195,7 +20195,7 @@ let Rule$3 = class Rule extends Container$Q {
 var rule = Rule$3;
 Rule$3.default = Rule$3;
 
-Container$Q.registerRule(Rule$3);
+Container$R.registerRule(Rule$3);
 
 let Declaration$2 = declaration;
 let tokenizer = tokenize;
@@ -20805,7 +20805,7 @@ let Parser$1 = class Parser {
 
 var parser = Parser$1;
 
-let Container$P = container;
+let Container$Q = container;
 let Parser = parser;
 let Input$3 = input;
 
@@ -20844,12 +20844,12 @@ function parse$3(css, opts) {
 var parse_1 = parse$3;
 parse$3.default = parse$3;
 
-Container$P.registerParse(parse$3);
+Container$Q.registerParse(parse$3);
 
 let { isClean, my } = symbols;
 let MapGenerator$1 = mapGenerator;
 let stringify$2 = stringify_1;
-let Container$O = container;
+let Container$P = container;
 let Document$2 = document$1;
 let warnOnce$1 = warnOnce$2;
 let Result$3 = result;
@@ -20984,7 +20984,7 @@ let LazyResult$2 = class LazyResult {
 
       if (root && !root[my]) {
         /* c8 ignore next 2 */
-        Container$O.rebuild(root);
+        Container$P.rebuild(root);
       }
     }
 
@@ -21654,7 +21654,7 @@ fromJSON$1.default = fromJSON$1;
 let CssSyntaxError = cssSyntaxError;
 let Declaration = declaration;
 let LazyResult = lazyResult;
-let Container$N = container;
+let Container$O = container;
 let Processor = processor;
 let stringify = stringify_1;
 let fromJSON = fromJSON_1;
@@ -21734,7 +21734,7 @@ postcss.document = defaults => new Document(defaults);
 
 postcss.CssSyntaxError = CssSyntaxError;
 postcss.Declaration = Declaration;
-postcss.Container = Container$N;
+postcss.Container = Container$O;
 postcss.Processor = Processor;
 postcss.Document = Document;
 postcss.Comment = Comment;
@@ -22603,7 +22603,7 @@ var sanitizeHtml$1 = sanitizeHtml_1;
 var Card = function (_a) {
     var header = _a.header, content = _a.content, footerLink = _a.footerLink, imageLarge = _a.imageLarge, imageSmall = _a.imageSmall, imageAltText = _a.imageAltText;
     var showContent = content || header;
-    return (React__default.default.createElement(Container$V, { "data-testid": "Card" },
+    return (React__default.default.createElement(Container$W, { "data-testid": "Card" },
         imageLarge && imageSmall && (React__default.default.createElement(React__default.default.Fragment, null, footerLink ? (React__default.default.createElement(ImageLink$1, { href: footerLink.url },
             React__default.default.createElement(Image$4, { src: imageLarge, alt: imageAltText, srcSet: "".concat(imageSmall, " 400w, ").concat(imageLarge, " 800w"), sizes: "(max-width: 550px) 400px, 800px", loading: "lazy" }))) : (React__default.default.createElement(Image$4, { src: imageLarge, alt: imageAltText, srcSet: "".concat(imageSmall, " 400w, ").concat(imageLarge, " 800w"), sizes: "(max-width: 550px) 400px, 800px", loading: "lazy" })))),
         showContent && (React__default.default.createElement(Content$6, null,
@@ -22619,12 +22619,12 @@ var Card = function (_a) {
  */
 var Cards = function (_a) {
     var cards = _a.cards;
-    return (React__default.default.createElement(Container$W, { "data-testid": "Cards" },
+    return (React__default.default.createElement(Container$X, { "data-testid": "Cards" },
         React__default.default.createElement(Row$1, null, cards.map(function (card, index) { return (React__default.default.createElement(Column, { small: "full", medium: "one-half", large: "one-third", key: index },
             React__default.default.createElement(Card, __assign$2({}, card)))); }))));
 };
 
-const Container$M = styled__default.default.div`
+const Container$N = styled__default.default.div`
   margin: 25px 0;
 `;
 
@@ -22742,7 +22742,7 @@ var FileDownload = function (_a) {
 
 var DownloadableFiles = function (_a) {
     var files = _a.files;
-    return (React__default.default.createElement(Container$M, { "data-testid": "DownloadableFiles" }, files.length > 0 ?
+    return (React__default.default.createElement(Container$N, { "data-testid": "DownloadableFiles" }, files.length > 0 ?
         files.map(function (file) { return React__default.default.createElement(FileDownload, __assign$2({ key: file.title }, file)); })
         :
             React__default.default.createElement("i", null, "No file to show")));
@@ -22843,7 +22843,7 @@ const AccessibleMapLink = styled__default.default(MapLink$1)`
   ${(props) => props.theme.visuallyHidden};
 `;
 
-const Container$L = styled__default.default.div`
+const Container$M = styled__default.default.div`
   border: solid 4px;
   border-radius: ${(props) => props.theme.theme_vars.border_radius};
   border-color: ${(props) =>
@@ -22897,7 +22897,7 @@ const InnerContainer$2 = styled__default.default.div`
  */
 var AlertBannerService = function (_a) {
     var title = _a.title, _b = _a.hasTopSpacing, hasTopSpacing = _b === void 0 ? false : _b, _c = _a.alertType, alertType = _c === void 0 ? 'alert' : _c, children = _a.children;
-    return (React__default.default.createElement(Container$L, { "$alertType": alertType, "data-testid": "AlertBannerService", "$hasTopSpacing": hasTopSpacing },
+    return (React__default.default.createElement(Container$M, { "$alertType": alertType, "data-testid": "AlertBannerService", "$hasTopSpacing": hasTopSpacing },
         React__default.default.createElement(InnerContainer$2, { "data-testid": "AlertBannerServiceInner" },
             (title === null || title === void 0 ? void 0 : title.trim()) && React__default.default.createElement(Heading, { text: title }),
             children)));
@@ -22950,7 +22950,7 @@ var GoogleMap = function (_a) {
             React__default.default.createElement(MapLink$1, { href: link_url }, link_title ? link_title : 'Google Maps link')))));
 };
 
-const Container$K = styled__default.default.figure`
+const Container$L = styled__default.default.figure`
   display: block;
   background: ${(props) =>
     props.theme.cardinal_name === 'north'
@@ -23617,7 +23617,7 @@ var LazyImage = /*@__PURE__*/getDefaultExportFromCjs(lib$1);
  */
 var Image$2 = function (_a) {
     var imageSmall = _a.imageSmall, imageLarge = _a.imageLarge, imageAltText = _a.imageAltText, _b = _a.ratio, ratio = _b === void 0 ? '4by3' : _b, caption = _a.caption, wrapText = _a.wrapText;
-    return (React__default.default.createElement(Container$K, { "data-testid": "Image", "$wrapText": wrapText },
+    return (React__default.default.createElement(Container$L, { "data-testid": "Image", "$wrapText": wrapText },
         React__default.default.createElement(ImageContainer$4, { "data-testid": "ImageContainer", "$ratio": ratio },
             React__default.default.createElement(LazyImage, { placeholder: imageSmall, src: imageLarge, visibilitySensorProps: {
                     partialVisibility: true,
@@ -23625,7 +23625,7 @@ var Image$2 = function (_a) {
         (caption === null || caption === void 0 ? void 0 : caption.trim()) && React__default.default.createElement(Caption, null, caption)));
 };
 
-const Container$J = styled__default.default.div`
+const Container$K = styled__default.default.div`
   display: block;
 `;
 
@@ -23646,7 +23646,7 @@ const Content$5 = styled__default.default.div`
  */
 var ImageAndText = function (_a) {
     var heading = _a.heading, textContent = _a.textContent, image = _a.image;
-    return (React__default.default.createElement(Container$J, { "data-testid": "ImageAndText" },
+    return (React__default.default.createElement(Container$K, { "data-testid": "ImageAndText" },
         React__default.default.createElement(Row$1, null,
             heading && (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
                 React__default.default.createElement(HeadingContainer, null,
@@ -23661,12 +23661,14 @@ var ImageAndText = function (_a) {
 
 var CaseAppointmentType;
 (function (CaseAppointmentType) {
-    CaseAppointmentType["Hearing"] = "hearing";
+    CaseAppointmentType["Formal"] = "formal";
+    CaseAppointmentType["Hearing"] = "inquest hearing";
     CaseAppointmentType["Opening"] = "opening";
+    CaseAppointmentType["PreInquest"] = "pre-inquest review";
     CaseAppointmentType["Writing"] = "writing";
 })(CaseAppointmentType || (CaseAppointmentType = {}));
 
-const Container$I = styled__default.default.div`
+const Container$J = styled__default.default.div`
   display: block;
   box-sizing: border-box;
 `;
@@ -23679,28 +23681,170 @@ const GroupContainer = styled__default.default.div`
 
 const InquestContainer = styled__default.default.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
-
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    flex-wrap: nowrap;
-  }
 `;
 
-const InquestTime = styled__default.default.div`
-  flex-grow: 0;
+styled__default.default.div`
+  flex-grow: 1;
   flex-shrink: 0;
+
+  strong {
+    display: block;
+    &::first-letter {
+      text-transform: capitalize;
+    }
+  }
 `;
 
 const InquestDetails = styled__default.default.div`
   flex-grow: 1;
+  h3 {
+    display: block;
+    &::first-letter {
+      text-transform: capitalize;
+    }
+  }
+`;
+
+const SummaryContainer = styled__default.default.div`
+  border: ${(props) => (props.$hasHeading ? `1px solid ${props.theme.theme_vars.colours.grey}` : `none`)};
+  margin: ${(props) => (props.$hasMargin ? props.theme.theme_vars.spacingSizes.medium : 0)} 0;
+`;
+
+const SummaryHeading = styled__default.default.div`
+  background-color: ${(props) => props.theme.theme_vars.colours.grey_light};
+  width: 100%;
+  padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+
+  h3 {
+    margin: 0;
+  }
+`;
+
+const SummaryList$1 = styled__default.default.dl`
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+`;
+
+const SummaryRow = styled__default.default.div`
+  border-bottom: ${(props) => props.$hasBorders ? `1px solid ${props.theme.theme_vars.colours.grey}` : 'none'};
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    padding-left: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    display: table-row;
+  }
+
+  @media print {
+    display: table-row;
+    border-bottom: none;
   }
 `;
 
+const SummaryTerm = styled__default.default.dt`
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  font-weight: bold;
+
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    display: table-cell;
+    padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    width: 30%;
+    vertical-align: middle;
+  }
+
+  @media print {
+    display: table-cell;
+    width: 30%;
+  }
+`;
+
+const SummaryDetail = styled__default.default.dd`
+  overflow-wrap: break-word;
+  width: 100%;
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    display: table-cell;
+    width: 70%;
+    padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  }
+
+  @media print {
+    display: table-cell;
+    width: 70%;
+  }
+`;
+
+var SummaryList = function (_a) {
+    var terms = _a.terms, _b = _a.hasMargin, hasMargin = _b === void 0 ? true : _b, _c = _a.hasBorders, hasBorders = _c === void 0 ? true : _c, heading = _a.heading;
+    return (React__default.default.createElement(SummaryContainer, { "$hasHeading": heading, "$hasMargin": hasMargin },
+        heading && (React__default.default.createElement(SummaryHeading, null,
+            React__default.default.createElement(Heading, { level: 3, text: heading }))),
+        React__default.default.createElement(SummaryList$1, { "data-testid": "SummaryList" }, terms.map(function (summaryRow, summaryIndex) { return (React__default.default.createElement(SummaryRow, { key: summaryIndex, "$hasBorders": hasBorders },
+            React__default.default.createElement(SummaryTerm, null, summaryRow.term),
+            React__default.default.createElement(SummaryDetail, { dangerouslySetInnerHTML: { __html: sanitizeHtml$1(summaryRow.detail) } }))); }))));
+};
+
+/**
+ * Format a date string to a readable date format
+ * @param {string} dateString - The date string to format
+ * @returns {string} Formatted date
+ */
+const formatDate = (dateString) => {
+  const date = new Date(dateString);
+  return date
+    .toLocaleDateString('en-GB', {
+      weekday: 'long',
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    })
+    .replace(',', '');
+};
+
+/**
+ * Format a date string to a time format
+ * @param {string} dateString - The date string to format
+ * @returns {string} Formatted time
+ */
+const formatTime = (dateString) => {
+  const date = new Date(dateString);
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  // Convert to 12-hour format
+  const hour12 = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+  const ampm = hours < 12 ? 'am' : 'pm';
+
+  // Only show minutes if not zero
+  if (minutes === 0) {
+    return `${hour12}${ampm}`;
+  } else {
+    return `${hour12}:${minutes.toString().padStart(2, '0')}${ampm}`;
+  }
+};
+
+/**
+ * Format a date string to a date and time format
+ * @param {string} dateString - The date string to format
+ * @returns {string} Formatted date and time
+ */
+const formatDateTime = (dateString) => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-GB', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
 /**
  * A table displaying a schedule of inquests
  */
@@ -23709,12 +23853,18 @@ var InquestSchedule = function (_a) {
     var hearings = caseAppointments.filter(function (appointment) {
         return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.Hearing);
     });
+    var preInquest = caseAppointments.filter(function (appointment) {
+        return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.PreInquest);
+    });
     var openings = caseAppointments.filter(function (appointment) {
         return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.Opening);
     });
     var writings = caseAppointments.filter(function (appointment) {
         return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.Writing);
     });
+    var formal = caseAppointments.filter(function (appointment) {
+        return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.Formal);
+    });
     var groupHearingsByDay = function (appointments) {
         return appointments.reduce(function (acc, inquest) {
             var inquestDate = new Date(inquest.startDateTime);
@@ -23727,82 +23877,78 @@ var InquestSchedule = function (_a) {
         }, {});
     };
     var hearingDayGrouped = groupHearingsByDay(hearings);
+    var preInquestDayGrouped = groupHearingsByDay(preInquest);
     var openingDayGrouped = groupHearingsByDay(openings);
     var writingDayGrouped = groupHearingsByDay(writings);
-    var formatDate = function (inquestDay) {
-        return inquestDay
-            .toLocaleDateString('en-GB', {
-            weekday: 'long',
-            day: 'numeric',
-            month: 'long',
-            year: 'numeric',
-        })
-            .replace(',', '');
-    };
-    var formatTime = function (inquestDate) {
-        return inquestDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    };
+    var formalDayGrouped = groupHearingsByDay(formal);
     var transformToSections = function (groupedData) {
         return Object.keys(groupedData).map(function (day) {
-            var inquestDayDate = new Date(day);
             return {
-                title: formatDate(inquestDayDate),
+                title: formatDate(day),
                 content: (React__default.default.createElement(Row$1, null, groupedData[day]
                     .sort(function (a, b) {
                     return new Date(a.startDateTime).getTime() - new Date(b.startDateTime).getTime();
                 })
                     .map(function (inquest, key) {
-                    var startDateTime = new Date(inquest.startDateTime);
-                    var timeOfDeath = new Date(inquest.dateTimeOfDeath);
+                    var terms = [
+                        {
+                            term: 'Name',
+                            detail: inquest.fullName,
+                        },
+                        {
+                            term: 'Died',
+                            detail: formatDate(inquest.dateTimeOfDeath) +
+                                ' at ' +
+                                inquest.placeOfDeath +
+                                '. Aged ' +
+                                inquest.age +
+                                ' years.',
+                        },
+                        {
+                            term: 'Court location',
+                            detail: inquest.courtroomFullAddress + '.',
+                        },
+                        {
+                            term: 'Coroner',
+                            detail: inquest.coroner + '.',
+                        },
+                    ];
+                    if (inquest.endDateTime) {
+                        terms.push({
+                            term: 'End date',
+                            detail: formatDateTime(inquest.endDateTime) + '.',
+                        });
+                    }
                     return (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", key: key },
                         React__default.default.createElement(InquestContainer, null,
-                            React__default.default.createElement(InquestTime, null,
-                                React__default.default.createElement("strong", null, formatTime(startDateTime))),
                             React__default.default.createElement(InquestDetails, null,
-                                React__default.default.createElement("strong", null, "Name:"),
-                                " ",
-                                inquest.fullName,
-                                ".",
-                                React__default.default.createElement("br", null),
-                                React__default.default.createElement("strong", null, "Died:"),
-                                " ",
-                                formatDate(timeOfDeath),
-                                " at ",
-                                inquest.placeOfDeath,
-                                ". Aged ",
-                                inquest.age,
-                                ' ',
-                                "years.",
-                                React__default.default.createElement("br", null),
-                                React__default.default.createElement("strong", null, "Court location:"),
-                                " ",
-                                inquest.courtroomFullAddress,
-                                ".",
-                                React__default.default.createElement("br", null),
-                                React__default.default.createElement("strong", null, "Coroner:"),
-                                " ",
-                                inquest.coroner,
-                                "."))));
+                                React__default.default.createElement(SummaryList, { terms: terms, hasBorders: false, heading: formatTime(inquest.startDateTime) })))));
                 }))),
             };
         });
     };
-    return (React__default.default.createElement(Container$I, { "data-testid": "InquestSchedule" },
+    return (React__default.default.createElement(Container$J, { "data-testid": "InquestSchedule" },
         Object.keys(hearingDayGrouped).length > 0 && (React__default.default.createElement(GroupContainer, null,
             React__default.default.createElement(Heading, { level: 2, text: title }),
             React__default.default.createElement(Accordion$1, { sections: transformToSections(hearingDayGrouped) }))),
         Object.keys(openingDayGrouped).length > 0 && (React__default.default.createElement(GroupContainer, null,
             React__default.default.createElement(Heading, { level: 2, text: "Inquest Openings" }),
             React__default.default.createElement(Accordion$1, { sections: transformToSections(openingDayGrouped) }))),
+        Object.keys(preInquestDayGrouped).length > 0 && (React__default.default.createElement(GroupContainer, null,
+            React__default.default.createElement(Heading, { level: 2, text: "Pre-inquest Review Hearings" }),
+            React__default.default.createElement(Accordion$1, { sections: transformToSections(preInquestDayGrouped) }))),
         Object.keys(writingDayGrouped).length > 0 && (React__default.default.createElement(GroupContainer, null,
             React__default.default.createElement(Heading, { level: 2, text: "Inquests in Writing" }),
             React__default.default.createElement(Accordion$1, { sections: transformToSections(writingDayGrouped) }))),
+        Object.keys(formalDayGrouped).length > 0 && (React__default.default.createElement(GroupContainer, null,
+            React__default.default.createElement(Heading, { level: 2, text: "Formal Suspension Hearings" }),
+            React__default.default.createElement(Accordion$1, { sections: transformToSections(formalDayGrouped) }))),
         caseAppointments.length === 0 && (React__default.default.createElement("div", null,
             React__default.default.createElement("p", null, "We can't find any results at the moment."),
             error ? (React__default.default.createElement("p", null, " The information is currently unavailable.")) : (React__default.default.createElement("p", null, "There are no inquests scheduled for next month."))))));
 };
 
-const Container$H = styled__default.default.div`
+const Container$I = styled__default.default.div`
   ${(props) => props.theme.fontStyles};
   overflow: hidden;
   margin: 40px auto 5px auto;
@@ -23882,7 +24028,7 @@ const CTA = styled__default.default.a`
  */
 var PromoBanner = function (_a) {
     var title = _a.title, image1440x810 = _a.image1440x810, image144x81 = _a.image144x81, ctaText = _a.ctaText, ctaUrl = _a.ctaUrl, children = _a.children;
-    return (React__default.default.createElement(Container$H, null,
+    return (React__default.default.createElement(Container$I, null,
         React__default.default.createElement(LazyImage, { src: image1440x810, placeholder: image144x81, visibilitySensorProps: {
                 partialVisibility: true,
             } }, function (src) { return React__default.default.createElement(ImageLink, { "$img": src, href: ctaUrl, title: ctaText }); }),
@@ -24094,6 +24240,191 @@ var Promotions = function (_a) {
         numberOfPromos > 1 && React__default.default.createElement(PromoBlock, { promos: promos.slice(1, numberOfPromos) })));
 };
 
+const Container$H = styled__default.default.div`
+  display: block;
+`;
+
+const Label$4 = styled__default.default.label`
+  margin-bottom: 5px;
+  font-weight: bold;
+`;
+
+const RoadworkList = styled__default.default.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-width: 100% !important;
+`;
+
+const Roadwork = styled__default.default.li`
+  display: block;
+  width: 100%;
+  margin-left: 0;
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.medium} !important;
+  padding: ${(props) => `${props.theme.theme_vars.spacingSizes.small} ${props.theme.theme_vars.spacingSizes.medium}`};
+  left: 0;
+  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
+  border-radius: ${(props) => props.theme.theme_vars.border_radius};
+  background-color: ${(props) =>
+    props.theme.cardinal_name === 'west'
+      ? props.theme.theme_vars.colours.grey_light + '7a'
+      : props.theme.theme_vars.colours.white};
+
+  h3 {
+    margin-top: ${(props) => props.theme.theme_vars.spacingSizes.medium} !important;
+  }
+`;
+
+const IconContainer$2 = styled__default.default.div`
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  & span svg {
+    vertical-align: middle;
+  }
+`;
+
+const IconText = styled__default.default.div`
+  padding-left: ${(props) => props.theme.theme_vars.spacingSizes.small};
+`;
+
+const NoMatches = styled__default.default.p`
+  padding: ${(props) => props.theme.theme_vars.spacingSizes.small} 0;
+`;
+
+const RoadworkLink = styled__default.default.a`
+  color: ${(props) => props.theme.theme_vars.colours.action};
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:focus {
+    outline: 3px solid ${(props) => props.theme.theme_vars.colours.focus};
+    outline-offset: 0;
+    background-color: ${(props) => props.theme.theme_vars.colours.focus};
+    color: ${(props) => props.theme.theme_vars.colours.black};
+    text-decoration: none;
+  }
+
+  &:visited {
+    color: ${(props) => props.theme.theme_vars.colours.action_dark};
+  }
+
+  h3 {
+    color: inherit;
+  }
+`;
+
+/**
+ * Primary UI component for user interaction
+ * If value is set then treat as controlled component
+ */
+var Input = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, _d = _a.isErrored, isErrored = _d === void 0 ? false : _d, errorText = _a.errorText, name = _a.name, maxLength = _a.maxLength, defaultValue = _a.defaultValue, onChange = _a.onChange, id = _a.id, value = _a.value, autocomplete = _a.autocomplete, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e;
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        errorText && React__default.default.createElement(ErrorText$1, null, errorText),
+        typeof value !== 'undefined' ? (React__default.default.createElement(StyledInput, { onChange: onChange, type: type, placeholder: placeholder, name: name, "$isErrored": isErrored, maxLength: maxLength, value: value, id: id, autoComplete: autocomplete, "$isFullWidth": isFullWidth })) : (React__default.default.createElement(StyledInput, { onChange: onChange, type: type, placeholder: placeholder, name: name, "$isErrored": isErrored, maxLength: maxLength, defaultValue: defaultValue, id: id, autoComplete: autocomplete, "$isFullWidth": isFullWidth }))));
+};
+
+/**
+ * A filterable list of roadworks
+ */
+var RoadworksList = function (_a) {
+    var roadworks = _a.roadworks, title = _a.title;
+    var _b = React.useState(roadworks), filteredRoadworks = _b[0], setFilteredRoadworks = _b[1];
+    // Helper function to remove trailing dot if it's the last character
+    var removeTrailingDot = function (text) {
+        return (text === null || text === void 0 ? void 0 : text.endsWith('.')) ? text.slice(0, -1) : text;
+    };
+    var handleSearch = function (e) {
+        var searchTerm = e.target.value.toLowerCase();
+        if (searchTerm != '') {
+            var updatedRoadworks = roadworks.filter(function (roadwork) {
+                return (roadwork.description.toLowerCase().includes(searchTerm) ||
+                    roadwork.detailedLocation.toLocaleLowerCase().includes(searchTerm) ||
+                    roadwork.trafficManagement.toLowerCase().includes(searchTerm));
+            });
+            setFilteredRoadworks(updatedRoadworks);
+        }
+        else {
+            setFilteredRoadworks(roadworks);
+        }
+    };
+    // Format the time to match Gov UK style guide
+    // https://www.gov.uk/guidance/style-guide/a-to-z#times
+    var formatTime = function (dayJsInstance) {
+        if (dayJsInstance.format('HH:mm') === '00:00') {
+            return 'midnight';
+        }
+        if (dayJsInstance.format('HH:mm') === '12:00') {
+            return 'midday';
+        }
+        if (dayJsInstance.format('mm') === '00') {
+            return dayJsInstance.format('ha');
+        }
+        else {
+            return dayJsInstance.format('h:mma');
+        }
+    };
+    // Format the time to match the Gov UK style guide
+    // https://www.gov.uk/guidance/style-guide/a-to-z#dates
+    var formatDate = function (startTime, endTime) {
+        if (!endTime) {
+            return dayjs(startTime).format('dddd D MMMM YYYY') + ' at ' + formatTime(dayjs(startTime));
+        }
+        else {
+            var endDate = dayjs(endTime);
+            var startDate = dayjs(startTime);
+            if (startDate.format('YYYY-MM-DD') === endDate.format('YYYY-MM-DD')) {
+                if (startDate.format('HH:mm') === '00:00' && endDate.format('HH:mm') === '23:59') {
+                    return "".concat(startDate.format('dddd D MMMM YYYY'), " - all day");
+                }
+                return "".concat(startDate.format('dddd D MMMM YYYY'), " at ").concat(formatTime(startDate), " to ").concat(formatTime(endDate));
+            }
+            else {
+                return "".concat(startDate.format('dddd D MMMM YYYY'), " at ").concat(formatTime(startDate), " to ").concat(endDate.format('dddd D MMMM YYYY'), " at ").concat(formatTime(endDate));
+            }
+        }
+    };
+    return (React__default.default.createElement(Container$H, { "data-testid": "RoadworksList" },
+        React__default.default.createElement(Heading, { level: 2, text: title }),
+        React__default.default.createElement(Label$4, { htmlFor: "roadworksSearch" }, "Search roadworks"),
+        React__default.default.createElement(Input, { id: "roadworksSearch", name: "roadworksSearch", type: "text", placeholder: "Enter a search term", maxLength: 255, onChange: handleSearch, isFullWidth: true }),
+        React__default.default.createElement(RoadworkList, null, filteredRoadworks.map(function (roadwork, index) {
+            var startDate = new Date(roadwork.startTime);
+            var endDate = new Date(roadwork.endTime);
+            return (React__default.default.createElement(Roadwork, { key: index },
+                React__default.default.createElement(IconContainer$2, null,
+                    React__default.default.createElement(DynamicIcon, { icon: "mappin" }),
+                    React__default.default.createElement(IconText, null, roadwork.urlLinkAddress ? (React__default.default.createElement(RoadworkLink, { href: roadwork.urlLinkAddress, target: "_blank", rel: "noopener noreferrer" },
+                        React__default.default.createElement(Heading, { text: removeTrailingDot(roadwork.detailedLocation), level: 3 }))) : (React__default.default.createElement(Heading, { text: removeTrailingDot(roadwork.detailedLocation), level: 3 })))),
+                React__default.default.createElement(IconContainer$2, null,
+                    React__default.default.createElement(DynamicIcon, { icon: "events" }),
+                    React__default.default.createElement(IconText, null,
+                        React__default.default.createElement("span", null, formatDate(startDate, endDate)))),
+                React__default.default.createElement(IconContainer$2, null,
+                    React__default.default.createElement(DynamicIcon, { icon: "roadworks" }),
+                    React__default.default.createElement(IconText, null,
+                        React__default.default.createElement("span", null, removeTrailingDot(roadwork.description)))),
+                React__default.default.createElement(IconContainer$2, null,
+                    React__default.default.createElement(DynamicIcon, { icon: "bollard" }),
+                    React__default.default.createElement(IconText, null,
+                        React__default.default.createElement("span", null, removeTrailingDot(roadwork.trafficManagement))))));
+        })),
+        roadworks.length > 0 && filteredRoadworks.length === 0 && (React__default.default.createElement(NoMatches, null, "We couldn't find any results for your search term. Please try a different search.")),
+        roadworks.length == 0 && (React__default.default.createElement(NoMatches, null, "Sorry, we're not able to find any results at the moment. Please try again later."))));
+};
+
 const Container$G = styled__default.default.div`
   padding: 0;
   margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
@@ -24212,17 +24543,6 @@ const SubmitButton = styled__default.default.input`
   }
 `;
 
-/**
- * Primary UI component for user interaction
- * If value is set then treat as controlled component
- */
-var Input = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, _d = _a.isErrored, isErrored = _d === void 0 ? false : _d, errorText = _a.errorText, name = _a.name, maxLength = _a.maxLength, defaultValue = _a.defaultValue, onChange = _a.onChange, id = _a.id, value = _a.value, autocomplete = _a.autocomplete, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e;
-    return (React__default.default.createElement(React__default.default.Fragment, null,
-        errorText && React__default.default.createElement(ErrorText$1, null, errorText),
-        typeof value !== 'undefined' ? (React__default.default.createElement(StyledInput, { onChange: onChange, type: type, placeholder: placeholder, name: name, "$isErrored": isErrored, maxLength: maxLength, value: value, id: id, autoComplete: autocomplete, "$isFullWidth": isFullWidth })) : (React__default.default.createElement(StyledInput, { onChange: onChange, type: type, placeholder: placeholder, name: name, "$isErrored": isErrored, maxLength: maxLength, defaultValue: defaultValue, id: id, autoComplete: autocomplete, "$isFullWidth": isFullWidth }))));
-};
-
 var CustomSearch = function (_a) {
     var method = _a.method, path = _a.path, label = _a.label, _b = _a.hasHiddenLabel, hasHiddenLabel = _b === void 0 ? true : _b, fieldName = _a.fieldName, placeholder = _a.placeholder, searchText = _a.searchText, id = _a.id;
     if (!id) {
@@ -25427,13 +25747,11 @@ const HomeLink = styled__default.default.a`
     }
   }
   &:focus {
-    outline: 2px transparent solid;
-    box-shadow: ${(props) => props.theme.theme_vars.colours.focus} 0 0 0 2px,
-      ${(props) =>
-          props.theme.cardinal_name === 'north'
-            ? props.theme.theme_vars.colours.black
-            : props.theme.theme_vars.colours.focus}
-        0 0 0 4px;
+    outline: none;
+    background: ${(props) => props.theme.theme_vars.colours.focus};
+    box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+    -webkit-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+    -moz-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
     transition: box-shadow 0.3s ease 0s;
   }
 `;
@@ -25586,6 +25904,9 @@ const Button$3 = styled__default.default.button`
   &:focus {
     outline: none;
     background: ${(props) => props.theme.theme_vars.colours.focus};
+    box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+    -webkit-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+    -moz-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
     svg {
       path {
         fill: ${(props) => props.theme.theme_vars.colours.black};
@@ -25888,12 +26209,14 @@ const CallToActionLink = styled__default.default.a`
   display: inline-block;
   outline: none;
 
-  &:hover,
-  &:focus {
+  &:hover {
     text-decoration-style: dotted;
     text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5), -2px 2px 4px rgba(150, 150, 150, 0.5),
       2px -2px 4px rgba(150, 150, 150, 0.5), -2px -2px 4px rgba(150, 150, 150, 0.5);
   }
+  &:focus {
+    ${(props) => props.theme.linkStylesFocus};
+  }
   &:active {
     transform: translate(3px);
   }
@@ -25979,6 +26302,14 @@ const PlayPauseButton = styled__default.default.button`
     &:hover {
       background: rgba(0, 0, 0, 0.7);
     }
+    &:focus {
+      outline: none;
+      background: ${(props) => props.theme.theme_vars.colours.focus};
+      color: ${(props) => props.theme.theme_vars.colours.black};
+      box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+      -webkit-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+      -moz-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+    }
   }
 `;
 
@@ -28083,9 +28414,9 @@ const focusListItem = styled.css`
   color: ${(props) => props.theme.theme_vars.colours.black};
   background-color: ${(props) => props.theme.theme_vars.colours.focus};
   outline: none;
-  box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.black} inset;
-  -webkit-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.black} inset;
-  -moz-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.black} inset;
+  box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+  -webkit-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
+  -moz-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
 `;
 
 const ListItem = styled__default.default.li`
@@ -29883,9 +30214,9 @@ const generate_theme = (theme_vars) => {
       background: ${theme_vars.colours.focus};
       outline: none;
       text-decoration: none !important;
-      box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
-      -webkit-box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
-      -moz-box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
+      box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
+      -webkit-box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
+      -moz-box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
     `,
     linkStylesActive: styled.css`
       color: ${theme_vars.colours.black};
@@ -30325,69 +30656,6 @@ var ServiceContact = function (_a) {
                     contact.phones.map(function (phone, phoneIndex) { return (React__default.default.createElement(ContactLink, { href: "tel:".concat(phone.number), key: phoneIndex }, phone.number)); }))); })))))));
 };
 
-const SummaryList$1 = styled__default.default.dl`
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  margin: ${(props) => (props.$hasMargin ? props.theme.theme_vars.spacingSizes.medium : 0)} 0;
-`;
-
-const SummaryRow = styled__default.default.div`
-  border-bottom: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
-  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
-
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    display: table-row;
-  }
-
-  @media print {
-    display: table-row;
-    border-bottom: none;
-  }
-`;
-
-const SummaryTerm = styled__default.default.dt`
-  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  font-weight: bold;
-
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    display: table-cell;
-    padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
-    width: 30%;
-    vertical-align: middle;
-  }
-
-  @media print {
-    display: table-cell;
-    width: 30%;
-  }
-`;
-
-const SummaryDetail = styled__default.default.dd`
-  overflow-wrap: break-word;
-  width: 100%;
-  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
-
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    display: table-cell;
-    width: 70%;
-    padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  }
-
-  @media print {
-    display: table-cell;
-    width: 70%;
-  }
-`;
-
-var SummaryList = function (_a) {
-    var terms = _a.terms, _b = _a.hasMargin, hasMargin = _b === void 0 ? true : _b;
-    return (React__default.default.createElement(SummaryList$1, { "data-testid": "SummaryList", "$hasMargin": hasMargin }, terms.map(function (summaryRow, summaryIndex) { return (React__default.default.createElement(SummaryRow, { key: summaryIndex },
-        React__default.default.createElement(SummaryTerm, null, summaryRow.term),
-        React__default.default.createElement(SummaryDetail, { dangerouslySetInnerHTML: { __html: sanitizeHtml$1(summaryRow.detail) } }))); })));
-};
-
 /**
  * Group an array of items by the key
  */
@@ -33506,6 +33774,7 @@ exports.PromoBanner = PromoBanner;
 exports.PromoBlock = PromoBlock;
 exports.PromotedLinks = PromotedLinks;
 exports.Promotions = Promotions;
+exports.RoadworksList = RoadworksList;
 exports.SearchBox = SearchBox;
 exports.SearchResultsList = SearchResultsList;
 exports.Searchbar = Searchbar;