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

package/build/index.mjs.js

@@ -3874,7 +3874,7 @@ var Autocomplete = function (_a) {
         })));
 };
 
-const Container$18 = styled.div`
+const Container$19 = styled.div`
   display: block;
 `;
 
@@ -3959,7 +3959,7 @@ var BackToTop = function (_a) {
     useEffect(function () {
         window.addEventListener('scroll', toggleVisible);
     });
-    return (React.createElement(Container$18, { "data-testid": "BackToTop" }, isActive && (React.createElement(BackToTopButton, { onClick: scrollToTop, "$visible": visible, "data-testid": "BackToTopButton", type: "button", "aria-label": "Go to the top of the page" },
+    return (React.createElement(Container$19, { "data-testid": "BackToTop" }, isActive && (React.createElement(BackToTopButton, { onClick: scrollToTop, "$visible": visible, "data-testid": "BackToTopButton", type: "button", "aria-label": "Go to the top of the page" },
         React.createElement(ChevronIcon, { colourFill: themeContext.theme_vars.colours.white, direction: "up" })))));
 };
 
@@ -4063,9 +4063,9 @@ var Button$4 = function (_a) {
     return (React.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.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.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(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.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.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(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.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.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      ";
@@ -4078,7 +4078,7 @@ styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n
 styled.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.div`
+const Container$17 = styled.div`
   display: flex;
   -webkit-flex-direction: row;
   -moz-flex-direction: row;
@@ -4115,7 +4115,7 @@ const ErrorSummary = styled.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.createElement(Container$16, null,
+    return (React.createElement(Container$17, null,
         React.createElement(Line$1, { "$lineColour": lineColour, "$hideLine": hideLine, "$isError": isError }),
         React.createElement(Form, { onSubmit: onSubmit, "$hideLine": hideLine, role: formRole, method: formMethod, url: formURL, "data-testid": "FormWithLine" },
             errorSummary && React.createElement(ErrorSummary, null, errorSummary),
@@ -4193,7 +4193,7 @@ var FormButton = function (_a) {
     return (React.createElement(StyledButton, __assign$2({ type: type, className: ["button--".concat(size), mode].join(' ') }, props), text));
 };
 
-const Container$15 = styled.div`
+const Container$16 = styled.div`
   ${(props) => props.theme.fontStyles};
 `;
 
@@ -4203,7 +4203,7 @@ const hideLabel$1 = (props) => {
   }
 };
 
-const Label$4 = styled.label`
+const Label$5 = styled.label`
   display: block;
   margin-bottom: 5px;
   ${hideLabel$1}
@@ -4238,8 +4238,8 @@ const Option = styled.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.createElement(Container$15, null,
-        React.createElement(Label$4, { htmlFor: id, "$hideLabel": hideLabel }, label),
+    return (React.createElement(Container$16, null,
+        React.createElement(Label$5, { htmlFor: id, "$hideLabel": hideLabel }, label),
         React.createElement(Select, { id: id, name: id, onChange: onChange && onChange, defaultValue: selected && selected }, options.map(function (option, i) { return (React.createElement(Option, { key: i, value: option.value }, option.title)); }))));
 };
 
@@ -4522,7 +4522,7 @@ var BinCollection = function (_a) {
     useEffect(function () {
         seenTitles.current.clear();
     }, [calendarEvents]);
-    return (React.createElement(Container$17, { "data-testid": "BinCollection" },
+    return (React.createElement(Container$18, { "data-testid": "BinCollection" },
         React.createElement(FormWithLine, { onSubmit: handleSubmit, isError: isError, lineColour: themeContext.theme_vars.colours.$grey_dark, hideLine: true },
             React.createElement(FormContainer$1, { "$isLoading": isLoading },
                 React.createElement(Heading, { level: 2, text: "Bin collection checker" }),
@@ -6629,7 +6629,7 @@ var HeadingWithIcon = function (_a) {
         React.createElement(Heading, { text: text, level: level })));
 };
 
-const Container$14 = styled.div`
+const Container$15 = styled.div`
   display: flex;
   width: 100%;
   min-height: 400px;
@@ -6653,7 +6653,7 @@ var Map$1 = function (_a) {
             setMap(new window.google.maps.Map(ref.current, { center: center, zoom: zoom }));
         }
     }, [ref, map]);
-    return (React.createElement(Container$14, { "data-testid": "Map" },
+    return (React.createElement(Container$15, { "data-testid": "Map" },
         React.createElement("div", { ref: ref }),
         React.Children.map(children, function (child) {
             if (React.isValidElement(child)) {
@@ -6714,7 +6714,7 @@ var MapMarker = function (options) {
     return null;
 };
 
-const Container$13 = styled.div`
+const Container$14 = styled.div`
   ${(props) => props.theme.fontStyles};
   display: block;
   border-top: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
@@ -7495,7 +7495,7 @@ var Pagination = function (_a) {
         }
     };
     if (numbers.length > 1) {
-        return (React.createElement(Container$13, { "data-testid": "Pagination", role: "navigation", "aria-label": "Pagination" },
+        return (React.createElement(Container$14, { "data-testid": "Pagination", role: "navigation", "aria-label": "Pagination" },
             currentPage > 1 && (React.createElement(Previous, { onClick: function () { return buttonClick(currentPage - 1); }, title: "Go back a page" }, "Previous")),
             React.createElement(NumbersContainer, null, numbers.map(function (v, i) { return (React.createElement(NumberContainer, { key: i },
                 v === '...' && React.createElement(Ellipsis, null, "..."),
@@ -7507,7 +7507,7 @@ var Pagination = function (_a) {
     return null;
 };
 
-const Container$12 = styled.div`
+const Container$13 = styled.div`
   ${(props) => props.theme.fontStyles};
   margin-bottom: 30px;
 `;
@@ -7678,7 +7678,7 @@ var CheckboxListFilter = function (_a) {
         handleParams('news', [{ key: NewsArticleFilterFields.articleType.queryParamKey, value: articleTypes }], ['page']);
     };
     var backupLabel = Math.random().toString(36).substring(7);
-    return (React.createElement(Container$12, { "data-testid": "CheckboxListFilter" },
+    return (React.createElement(Container$13, { "data-testid": "CheckboxListFilter" },
         React.createElement(Fieldset$2, { "aria-describedby": hintId },
             React.createElement(Legend$2, { "$labelHidden": labelHidden, "data-testid": "CheckboxListFilterLegend" }, label),
             React.createElement(Hint, { id: hintId, "$hintHidden": hintHidden, "data-testid": "CheckboxListFilterHint" }, hint),
@@ -7810,7 +7810,7 @@ const PromotedLink$1 = styled.a`
   ${oneColStyles}
 `;
 
-const Container$11 = styled.div`
+const Container$12 = styled.div`
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
@@ -7833,7 +7833,7 @@ const Container$11 = styled.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.createElement(Container$11, { "data-testid": "Row", "$hasBorder": hasBorder, "$hasWrap": hasWrap, as: isList ? 'ul' : 'div' }, children));
+    return (React.createElement(Container$12, { "data-testid": "Row", "$hasBorder": hasBorder, "$hasWrap": hasWrap, as: isList ? 'ul' : 'div' }, children));
 };
 
 const calculateWidth = (size) => {
@@ -7883,7 +7883,7 @@ const widths = (props) => {
   `;
 };
 
-const Container$10 = styled.div`
+const Container$11 = styled.div`
   box-sizing: border-box;
   display: block;
   padding: ${(props) => (props.$hasPadding ? props.theme.theme_vars.spacingSizes.small : `0`)};
@@ -7894,7 +7894,7 @@ const Container$10 = styled.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.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.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) {
@@ -7910,7 +7910,7 @@ var PromotedLinks = function (_a) {
     }
 };
 
-const Container$$ = styled.div`
+const Container$10 = styled.div`
   display: block;
 `;
 
@@ -7946,7 +7946,7 @@ const Cookies = styled.button`
   }
 `;
 
-const Container$_ = styled.div`
+const Container$$ = styled.div`
   ${(props) => props.theme.fontStyles}
   background-color: ${(props) => props.theme.theme_vars.colours.grey_light};
   padding: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
@@ -8220,18 +8220,18 @@ var CookieBanner = function (_a) {
         hideCookiesAcceptedConfirmationBanner();
     };
     return (React.createElement(React.Fragment, null,
-        showCookieBanner && (React.createElement(Container$_, { "data-testid": "CookieBanner" },
+        showCookieBanner && (React.createElement(Container$$, { "data-testid": "CookieBanner" },
             React.createElement(CookieMessage, null,
                 React.createElement(CookieHeading, null, title),
                 React.createElement(CookieParagraph, null, paragraph),
                 React.createElement(ButtonsContainer, null,
                     React.createElement(FormButton, { primary: true, text: acceptButtonText, isDisabled: true, onClick: acceptCookies, size: "large" }),
                     React.createElement(FormButton, { primary: true, text: rejectButtonText, isDisabled: true, onClick: rejectCookies, size: "large" }))))),
-        showCookiesRejectedBanner && (React.createElement(Container$_, { "data-testid": "CookieBannerRejected", id: "CookieBannerRejected" },
+        showCookiesRejectedBanner && (React.createElement(Container$$, { "data-testid": "CookieBannerRejected", id: "CookieBannerRejected" },
             React.createElement(CookieMessage, { isInline: true },
                 React.createElement(CookieParagraph, null, rejectConfirmationText),
                 React.createElement(CookieHide, { onClick: hideCookiesConfirmationBanner, "aria-controls": "CookieBannerRejected", "aria-hidden": "false" }, "Hide")))),
-        showCookiesAcceptedBanner && (React.createElement(Container$_, { "data-testid": "CookieBannerAccepted", id: "CookieBannerAccepted" },
+        showCookiesAcceptedBanner && (React.createElement(Container$$, { "data-testid": "CookieBannerAccepted", id: "CookieBannerAccepted" },
             React.createElement(CookieMessage, { isInline: true },
                 React.createElement(CookieParagraph, null, acceptConfirmationText),
                 React.createElement(CookieHide, { onClick: hideCookiesConfirmationBanner, "aria-controls": "CookieBannerAccepted", "aria-hidden": "false" }, "Hide"))))));
@@ -8253,7 +8253,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.createElement(Container$$, { "data-testid": "StaticMap" },
+    return (React.createElement(Container$10, { "data-testid": "StaticMap" },
         React.createElement(Message, null,
             React.createElement("span", null,
                 "To interact with the map, you need to ",
@@ -8274,7 +8274,7 @@ var TextInput = function (_a) {
 
 // Accordion
 
-const Container$Z = styled.div`
+const Container$_ = styled.div`
   ${(props) => props.theme.fontStyles}
   margin-bottom: 20px;
   border-bottom: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
@@ -8551,7 +8551,7 @@ var Accordion$1 = function (_a) {
         setAccordionStates(newStatus);
     };
     var accordionId = "accordion".concat(useId());
-    return (React.createElement(Container$Z, { "data-testid": "Accordion", id: accordionId },
+    return (React.createElement(Container$_, { "data-testid": "Accordion", id: accordionId },
         showControls && sections.length > 1 && (React.createElement(AccordionControls$1, null,
             React.createElement(OpenAllButton, { onClick: toggleAll, type: "button", "aria-expanded": !openAll },
                 openAll ? 'Open all' : 'Close all',
@@ -8602,7 +8602,7 @@ var BlockQuote = function (_a) {
         citation && React.createElement(Citation, null, citation)));
 };
 
-const Container$Y = styled.div`
+const Container$Z = styled.div`
     margin-bottom: 30px;
     display: block;
 
@@ -8617,11 +8617,11 @@ const Container$Y = styled.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.createElement(Container$Y, null,
+    return (React.createElement(Container$Z, null,
         React.createElement(Button$4, { primary: primary, size: "large", text: text, url: url, isExternal: isExternal, isDisabled: isDisabled })));
 };
 
-const Container$X = styled.div`
+const Container$Y = styled.div`
   display: block;
   ${(props) => props.theme.fontStyles}
 `;
@@ -8797,7 +8797,7 @@ var CouncilTaxAlphabeticalDirectory = function (_a) {
         });
         return letterData;
     });
-    return (React.createElement(Container$X, { "data-testid": "AlphabeticalDirectory", ref: directoryRef },
+    return (React.createElement(Container$Y, { "data-testid": "AlphabeticalDirectory", ref: directoryRef },
         React.createElement(React.Fragment, null,
             parishes.length === 0 && (React.createElement(ErrorText, null, "There was an issue fetching the parish data. Please try again later.")),
             parish === null ? (React.createElement(React.Fragment, null, sortedData.map(function (letter, i) { return (React.createElement(Row, { key: i },
@@ -8823,9 +8823,9 @@ var CouncilTaxAlphabeticalDirectory = function (_a) {
                             React.createElement("td", null, Number(parish.values[band]).toLocaleString('en-GB', { style: 'currency', currency: 'GBP' })))); })))))))));
 };
 
-const Container$W = styled.div``;
+const Container$X = styled.div``;
 
-const Container$V = styled.div`
+const Container$W = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -19480,7 +19480,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);
@@ -19853,27 +19853,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') {
@@ -19890,16 +19890,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 });
@@ -20017,9 +20017,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';
@@ -20039,13 +20039,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';
@@ -20099,7 +20099,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) {
@@ -20158,10 +20158,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';
@@ -20182,7 +20182,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;
@@ -20792,7 +20792,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;
 
@@ -20831,12 +20831,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;
@@ -20971,7 +20971,7 @@ let LazyResult$2 = class LazyResult {
 
       if (root && !root[my]) {
         /* c8 ignore next 2 */
-        Container$O.rebuild(root);
+        Container$P.rebuild(root);
       }
     }
 
@@ -21641,7 +21641,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;
@@ -21721,7 +21721,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;
@@ -22590,7 +22590,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.createElement(Container$V, { "data-testid": "Card" },
+    return (React.createElement(Container$W, { "data-testid": "Card" },
         imageLarge && imageSmall && (React.createElement(React.Fragment, null, footerLink ? (React.createElement(ImageLink$1, { href: footerLink.url },
             React.createElement(Image$4, { src: imageLarge, alt: imageAltText, srcSet: "".concat(imageSmall, " 400w, ").concat(imageLarge, " 800w"), sizes: "(max-width: 550px) 400px, 800px", loading: "lazy" }))) : (React.createElement(Image$4, { src: imageLarge, alt: imageAltText, srcSet: "".concat(imageSmall, " 400w, ").concat(imageLarge, " 800w"), sizes: "(max-width: 550px) 400px, 800px", loading: "lazy" })))),
         showContent && (React.createElement(Content$6, null,
@@ -22606,12 +22606,12 @@ var Card = function (_a) {
  */
 var Cards = function (_a) {
     var cards = _a.cards;
-    return (React.createElement(Container$W, { "data-testid": "Cards" },
+    return (React.createElement(Container$X, { "data-testid": "Cards" },
         React.createElement(Row$1, null, cards.map(function (card, index) { return (React.createElement(Column, { small: "full", medium: "one-half", large: "one-third", key: index },
             React.createElement(Card, __assign$2({}, card)))); }))));
 };
 
-const Container$M = styled.div`
+const Container$N = styled.div`
   margin: 25px 0;
 `;
 
@@ -22729,7 +22729,7 @@ var FileDownload = function (_a) {
 
 var DownloadableFiles = function (_a) {
     var files = _a.files;
-    return (React.createElement(Container$M, { "data-testid": "DownloadableFiles" }, files.length > 0 ?
+    return (React.createElement(Container$N, { "data-testid": "DownloadableFiles" }, files.length > 0 ?
         files.map(function (file) { return React.createElement(FileDownload, __assign$2({ key: file.title }, file)); })
         :
             React.createElement("i", null, "No file to show")));
@@ -22830,7 +22830,7 @@ const AccessibleMapLink = styled(MapLink$1)`
   ${(props) => props.theme.visuallyHidden};
 `;
 
-const Container$L = styled.div`
+const Container$M = styled.div`
   border: solid 4px;
   border-radius: ${(props) => props.theme.theme_vars.border_radius};
   border-color: ${(props) =>
@@ -22884,7 +22884,7 @@ const InnerContainer$2 = styled.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.createElement(Container$L, { "$alertType": alertType, "data-testid": "AlertBannerService", "$hasTopSpacing": hasTopSpacing },
+    return (React.createElement(Container$M, { "$alertType": alertType, "data-testid": "AlertBannerService", "$hasTopSpacing": hasTopSpacing },
         React.createElement(InnerContainer$2, { "data-testid": "AlertBannerServiceInner" },
             (title === null || title === void 0 ? void 0 : title.trim()) && React.createElement(Heading, { text: title }),
             children)));
@@ -22937,7 +22937,7 @@ var GoogleMap = function (_a) {
             React.createElement(MapLink$1, { href: link_url }, link_title ? link_title : 'Google Maps link')))));
 };
 
-const Container$K = styled.figure`
+const Container$L = styled.figure`
   display: block;
   background: ${(props) =>
     props.theme.cardinal_name === 'north'
@@ -23604,7 +23604,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.createElement(Container$K, { "data-testid": "Image", "$wrapText": wrapText },
+    return (React.createElement(Container$L, { "data-testid": "Image", "$wrapText": wrapText },
         React.createElement(ImageContainer$4, { "data-testid": "ImageContainer", "$ratio": ratio },
             React.createElement(LazyImage, { placeholder: imageSmall, src: imageLarge, visibilitySensorProps: {
                     partialVisibility: true,
@@ -23612,7 +23612,7 @@ var Image$2 = function (_a) {
         (caption === null || caption === void 0 ? void 0 : caption.trim()) && React.createElement(Caption, null, caption)));
 };
 
-const Container$J = styled.div`
+const Container$K = styled.div`
   display: block;
 `;
 
@@ -23633,7 +23633,7 @@ const Content$5 = styled.div`
  */
 var ImageAndText = function (_a) {
     var heading = _a.heading, textContent = _a.textContent, image = _a.image;
-    return (React.createElement(Container$J, { "data-testid": "ImageAndText" },
+    return (React.createElement(Container$K, { "data-testid": "ImageAndText" },
         React.createElement(Row$1, null,
             heading && (React.createElement(Column, { small: "full", medium: "full", large: "full" },
                 React.createElement(HeadingContainer, null,
@@ -23653,7 +23653,7 @@ var CaseAppointmentType;
     CaseAppointmentType["Writing"] = "writing";
 })(CaseAppointmentType || (CaseAppointmentType = {}));
 
-const Container$I = styled.div`
+const Container$J = styled.div`
   display: block;
   box-sizing: border-box;
 `;
@@ -23774,7 +23774,7 @@ var InquestSchedule = function (_a) {
             };
         });
     };
-    return (React.createElement(Container$I, { "data-testid": "InquestSchedule" },
+    return (React.createElement(Container$J, { "data-testid": "InquestSchedule" },
         Object.keys(hearingDayGrouped).length > 0 && (React.createElement(GroupContainer, null,
             React.createElement(Heading, { level: 2, text: title }),
             React.createElement(Accordion$1, { sections: transformToSections(hearingDayGrouped) }))),
@@ -23789,7 +23789,7 @@ var InquestSchedule = function (_a) {
             error ? (React.createElement("p", null, " The information is currently unavailable.")) : (React.createElement("p", null, "There are no inquests scheduled for next month."))))));
 };
 
-const Container$H = styled.div`
+const Container$I = styled.div`
   ${(props) => props.theme.fontStyles};
   overflow: hidden;
   margin: 40px auto 5px auto;
@@ -23869,7 +23869,7 @@ const CTA = styled.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.createElement(Container$H, null,
+    return (React.createElement(Container$I, null,
         React.createElement(LazyImage, { src: image1440x810, placeholder: image144x81, visibilitySensorProps: {
                 partialVisibility: true,
             } }, function (src) { return React.createElement(ImageLink, { "$img": src, href: ctaUrl, title: ctaText }); }),
@@ -24081,6 +24081,162 @@ var Promotions = function (_a) {
         numberOfPromos > 1 && React.createElement(PromoBlock, { promos: promos.slice(1, numberOfPromos) })));
 };
 
+const Container$H = styled.div`
+  display: block;
+`;
+
+const Label$4 = styled.label`
+  margin-bottom: 5px;
+  font-weight: bold;
+`;
+
+const RoadworkList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-width: 100% !important;
+`;
+
+const Roadwork = styled.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.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.div`
+  padding-left: ${(props) => props.theme.theme_vars.spacingSizes.small};
+`;
+
+const NoMatches = styled.p`
+  padding: ${(props) => props.theme.theme_vars.spacingSizes.small} 0;
+`;
+
+/**
+ * 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.createElement(React.Fragment, null,
+        errorText && React.createElement(ErrorText$1, null, errorText),
+        typeof value !== 'undefined' ? (React.createElement(StyledInput, { onChange: onChange, type: type, placeholder: placeholder, name: name, "$isErrored": isErrored, maxLength: maxLength, value: value, id: id, autoComplete: autocomplete, "$isFullWidth": isFullWidth })) : (React.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 = useState(roadworks), filteredRoadworks = _b[0], setFilteredRoadworks = _b[1];
+    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.createElement(Container$H, { "data-testid": "RoadworksList" },
+        React.createElement(Heading, { level: 2, text: title }),
+        React.createElement(Label$4, { htmlFor: "roadworksSearch" }, "Search roadworks"),
+        React.createElement(Input, { id: "roadworksSearch", name: "roadworksSearch", type: "text", placeholder: "Enter a search term", maxLength: 255, onChange: handleSearch, isFullWidth: true }),
+        React.createElement(RoadworkList, null, filteredRoadworks.map(function (roadwork, index) {
+            var startDate = new Date(roadwork.startTime);
+            var endDate = new Date(roadwork.endTime);
+            return (React.createElement(Roadwork, { key: index },
+                React.createElement(IconContainer$2, null,
+                    React.createElement(DynamicIcon, { icon: "mappin" }),
+                    React.createElement(IconText, null,
+                        React.createElement(Heading, { text: roadwork.detailedLocation, level: 3 }))),
+                React.createElement(IconContainer$2, null,
+                    React.createElement(DynamicIcon, { icon: "events" }),
+                    React.createElement(IconText, null,
+                        React.createElement("span", null, formatDate(startDate, endDate)))),
+                React.createElement(IconContainer$2, null,
+                    React.createElement(DynamicIcon, { icon: "roadworks" }),
+                    React.createElement(IconText, null,
+                        React.createElement("span", null, roadwork.description))),
+                React.createElement(IconContainer$2, null,
+                    React.createElement(DynamicIcon, { icon: "bollard" }),
+                    React.createElement(IconText, null,
+                        React.createElement("span", null, roadwork.trafficManagement)))));
+        })),
+        roadworks.length > 0 && filteredRoadworks.length === 0 && (React.createElement(NoMatches, null, "We couldn't find any results for your search term. Please try a different search.")),
+        roadworks.length == 0 && (React.createElement(NoMatches, null, "Sorry, we're not able to find any results at the moment. Please try again later."))));
+};
+
 const Container$G = styled.div`
   padding: 0;
   margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
@@ -24199,17 +24355,6 @@ const SubmitButton = styled.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.createElement(React.Fragment, null,
-        errorText && React.createElement(ErrorText$1, null, errorText),
-        typeof value !== 'undefined' ? (React.createElement(StyledInput, { onChange: onChange, type: type, placeholder: placeholder, name: name, "$isErrored": isErrored, maxLength: maxLength, value: value, id: id, autoComplete: autocomplete, "$isFullWidth": isFullWidth })) : (React.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) {
@@ -33430,5 +33575,5 @@ var DirectoryDocumentList = function (_a) {
                     React.createElement(Column, { small: "full", medium: "full", large: "full" }, !isLoading && (React.createElement(Pagination, { currentPage: pageNumber, totalResults: totalResults, resultsPerPage: perPage, postTo: directoryPath, buttonClickOverride: setPageNumber }))))))));
 };
 
-export { AccessibleLink as AccessibleLinks, Accordion$1 as Accordion, AlertBanner, AlertBannerService, Autocomplete, BackLink, BackToTop, BinCollection, BlockQuote, Breadcrumbs, Button$4 as Button, CallToAction, Cards, CheckboxListFilter, Contents$1 as Contents, ContentsNavigation, CookieBanner, CouncilTaxAlphabeticalDirectory, DirectoryDocumentList, DirectoryService, DirectoryServiceList, DirectoryShortList, DirectoryShortListProvider, DisplayDate, Divider, DownloadableFiles, DropDownFilter, DynamicIcon, Footer, FullWidthContainer, GDS_theme, GlobalStyleReset, GoogleMap, Header, Heading, HeadingWithIcon, HeroImage, HomeHero, Image$2 as Image, ImageAndText, InquestSchedule, Map$1 as Map, MapMarker, MaxWidthContainer, MemorialHero, NewsArticleDate, NewsArticleFeaturedBlock, NewsArticleFilterAccordion, NewsArticleImage, NewsArticleList, NewsArticleListHeader, NewsArticleOldBanner, PageMain, PageSidebar, PageTitle, PageWithSidebarContainer, PageWrapper, Pagination, PhaseBanner, PromoBanner, PromoBlock, PromotedLinks, Promotions, SearchBox, SearchResultsList, Searchbar, SectionLinks, SectionLinksMobileContents, SectionLinksSidebar, ServiceLinksBoxed, ServicesLinksList, SignpostLinks, SkipToMainContent, StaticMap, Summary, TextInput, Video, WarningText, WarningTextDisclaimer, lb_theme_north, lb_theme_west, north_theme, useDirectoryShortListContext, west_theme };
+export { AccessibleLink as AccessibleLinks, Accordion$1 as Accordion, AlertBanner, AlertBannerService, Autocomplete, BackLink, BackToTop, BinCollection, BlockQuote, Breadcrumbs, Button$4 as Button, CallToAction, Cards, CheckboxListFilter, Contents$1 as Contents, ContentsNavigation, CookieBanner, CouncilTaxAlphabeticalDirectory, DirectoryDocumentList, DirectoryService, DirectoryServiceList, DirectoryShortList, DirectoryShortListProvider, DisplayDate, Divider, DownloadableFiles, DropDownFilter, DynamicIcon, Footer, FullWidthContainer, GDS_theme, GlobalStyleReset, GoogleMap, Header, Heading, HeadingWithIcon, HeroImage, HomeHero, Image$2 as Image, ImageAndText, InquestSchedule, Map$1 as Map, MapMarker, MaxWidthContainer, MemorialHero, NewsArticleDate, NewsArticleFeaturedBlock, NewsArticleFilterAccordion, NewsArticleImage, NewsArticleList, NewsArticleListHeader, NewsArticleOldBanner, PageMain, PageSidebar, PageTitle, PageWithSidebarContainer, PageWrapper, Pagination, PhaseBanner, PromoBanner, PromoBlock, PromotedLinks, Promotions, RoadworksList, SearchBox, SearchResultsList, Searchbar, SectionLinks, SectionLinksMobileContents, SectionLinksSidebar, ServiceLinksBoxed, ServicesLinksList, SignpostLinks, SkipToMainContent, StaticMap, Summary, TextInput, Video, WarningText, WarningTextDisclaimer, lb_theme_north, lb_theme_west, north_theme, useDirectoryShortListContext, west_theme };
 //# sourceMappingURL=index.mjs.js.map