@nnc-digital/nnc-design-system 1.0.0-alpha9 → 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)) {
@@ -6677,10 +6677,14 @@ var MapMarker = function (options) {
         anchor: new google.maps.Point(40, 60),
         labelOrigin: new google.maps.Point(21, 25),
     };
-    var mergedOptions = __assign$2(__assign$2({}, options), { anchorPoint: new google.maps.Point(-5, -40), icon: icon, label: {
-            text: typeof options.label === 'string' ? options.label : options.label.text,
-            color: 'white',
-        }, position: options.position, title: options.title });
+    var mergedOptions = __assign$2(__assign$2({}, options), { anchorPoint: new google.maps.Point(-5, -40), icon: icon, position: options.position, title: options.title, label: options.label ?
+            (typeof options.label === 'string' ?
+                { text: options.label, color: '#FFFFFF' } : __assign$2(__assign$2({}, options.label), { color: '#FFFFFF' })) : undefined });
+    for (var key in options) {
+        if (key !== 'label' && Object.prototype.hasOwnProperty.call(options, key)) {
+            mergedOptions[key] = options[key];
+        }
+    }
     React.useEffect(function () {
         if (!marker) {
             setMarker(new google.maps.Marker());
@@ -6710,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};
@@ -7491,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, "..."),
@@ -7503,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;
 `;
@@ -7674,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),
@@ -7806,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;
@@ -7829,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) => {
@@ -7879,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`)};
@@ -7890,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) {
@@ -7906,7 +7910,7 @@ var PromotedLinks = function (_a) {
     }
 };
 
-const Container$$ = styled.div`
+const Container$10 = styled.div`
   display: block;
 `;
 
@@ -7942,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;
@@ -7950,6 +7954,8 @@ const Container$_ = styled.div`
   width: 100%;
   display: block;
   box-sizing: border-box;
+  position: sticky;
+  z-index: 1;
 `;
 
 const CookieHide = styled.button`
@@ -8143,7 +8149,7 @@ var CookieBanner = function (_a) {
     // on page load - look for a cookie
     useEffect(function () {
         checkCookie();
-    });
+    }, []);
     var _d = useState(false), showCookieBanner = _d[0], setShowCookieBanner = _d[1];
     var _e = useState(false), showCookiesRejectedBanner = _e[0], setShowCookiesRejectedBanner = _e[1];
     var _f = useState(false), showCookiesAcceptedBanner = _f[0], setShowCookiesAcceptedBanner = _f[1];
@@ -8214,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"))))));
@@ -8247,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 ",
@@ -8268,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};
@@ -8545,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',
@@ -8596,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;
 
@@ -8611,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}
 `;
@@ -8791,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 },
@@ -8817,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;
@@ -19474,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);
@@ -19847,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') {
@@ -19884,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 });
@@ -20011,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';
@@ -20033,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';
@@ -20093,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) {
@@ -20152,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';
@@ -20176,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;
@@ -20786,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;
 
@@ -20825,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;
@@ -20965,7 +20971,7 @@ let LazyResult$2 = class LazyResult {
 
       if (root && !root[my]) {
         /* c8 ignore next 2 */
-        Container$O.rebuild(root);
+        Container$P.rebuild(root);
       }
     }
 
@@ -21635,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;
@@ -21715,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;
@@ -22584,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,
@@ -22600,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;
 `;
 
@@ -22723,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")));
@@ -22824,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) =>
@@ -22878,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)));
@@ -22931,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'
@@ -23598,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,
@@ -23606,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;
 `;
 
@@ -23627,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,
@@ -23640,8 +23646,46 @@ var ImageAndText = function (_a) {
                 React.createElement(Content$5, { dangerouslySetInnerHTML: { __html: sanitizeHtml$1(textContent) } }))))));
 };
 
-const Container$I = styled.div`
+var CaseAppointmentType;
+(function (CaseAppointmentType) {
+    CaseAppointmentType["Hearing"] = "hearing";
+    CaseAppointmentType["Opening"] = "opening";
+    CaseAppointmentType["Writing"] = "writing";
+})(CaseAppointmentType || (CaseAppointmentType = {}));
+
+const Container$J = styled.div`
   display: block;
+  box-sizing: border-box;
+`;
+
+const GroupContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.large};
+`;
+
+const InquestContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  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.div`
+  flex-grow: 0;
+  flex-shrink: 0;
+`;
+
+const InquestDetails = styled.div`
+  flex-grow: 1;
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    padding-left: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  }
 `;
 
 /**
@@ -23649,35 +23693,103 @@ const Container$I = styled.div`
  */
 var InquestSchedule = function (_a) {
     var caseAppointments = _a.caseAppointments, title = _a.title, _b = _a.error, error = _b === void 0 ? false : _b;
-    return (React.createElement(Container$I, { "data-testid": "InquestSchedule" },
-        React.createElement("div", { className: "table-container" },
-            React.createElement("table", null,
-                React.createElement("caption", null, title),
-                React.createElement("thead", null,
-                    React.createElement("tr", null,
-                        React.createElement("th", { scope: "col" }, "Name"),
-                        React.createElement("th", { scope: "col" }, "Age"),
-                        React.createElement("th", { scope: "col" }, "Place of death"),
-                        React.createElement("th", { scope: "col" }, "Date of death"),
-                        React.createElement("th", { scope: "col" }, "Name of coroner"),
-                        React.createElement("th", { scope: "col" }, "Location"),
-                        React.createElement("th", { scope: "col" }, "Date and time"))),
-                React.createElement("tbody", null,
-                    caseAppointments.map(function (item, index) { return (React.createElement("tr", { key: index },
-                        React.createElement("td", null, item.fullName),
-                        React.createElement("td", null, item.age),
-                        React.createElement("td", null, item.placeOfDeath),
-                        React.createElement("td", null, new Date(item.dateTimeOfDeath).toLocaleString('en-GB')),
-                        React.createElement("td", null, item.coroner),
-                        React.createElement("td", null, item.courtroomFullAddress),
-                        React.createElement("td", null, new Date(item.startDateTime).toLocaleString('en-GB')))); }),
-                    caseAppointments.length === 0 && (React.createElement("tr", null,
-                        React.createElement("td", { colSpan: 7 },
-                            React.createElement("p", null, "We can't find any results at the moment."),
-                            error ? (React.createElement("p", null, " The information is currently unavailable.")) : (React.createElement("p", null, "There are no inquests scheduled for next month."))))))))));
+    var hearings = caseAppointments.filter(function (appointment) {
+        return appointment.appointmentType.toLowerCase().includes(CaseAppointmentType.Hearing);
+    });
+    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 groupHearingsByDay = function (appointments) {
+        return appointments.reduce(function (acc, inquest) {
+            var inquestDate = new Date(inquest.startDateTime);
+            var inquestISODay = inquestDate.toISOString().substring(0, 10);
+            if (!acc[inquestISODay]) {
+                acc[inquestISODay] = [];
+            }
+            acc[inquestISODay].push(inquest);
+            return acc;
+        }, {});
+    };
+    var hearingDayGrouped = groupHearingsByDay(hearings);
+    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 transformToSections = function (groupedData) {
+        return Object.keys(groupedData).map(function (day) {
+            var inquestDayDate = new Date(day);
+            return {
+                title: formatDate(inquestDayDate),
+                content: (React.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);
+                    return (React.createElement(Column, { small: "full", medium: "full", large: "full", key: key },
+                        React.createElement(InquestContainer, null,
+                            React.createElement(InquestTime, null,
+                                React.createElement("strong", null, formatTime(startDateTime))),
+                            React.createElement(InquestDetails, null,
+                                React.createElement("strong", null, "Name:"),
+                                " ",
+                                inquest.fullName,
+                                ".",
+                                React.createElement("br", null),
+                                React.createElement("strong", null, "Died:"),
+                                " ",
+                                formatDate(timeOfDeath),
+                                " at ",
+                                inquest.placeOfDeath,
+                                ". Aged ",
+                                inquest.age,
+                                ' ',
+                                "years.",
+                                React.createElement("br", null),
+                                React.createElement("strong", null, "Court location:"),
+                                " ",
+                                inquest.courtroomFullAddress,
+                                ".",
+                                React.createElement("br", null),
+                                React.createElement("strong", null, "Coroner:"),
+                                " ",
+                                inquest.coroner,
+                                "."))));
+                }))),
+            };
+        });
+    };
+    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) }))),
+        Object.keys(openingDayGrouped).length > 0 && (React.createElement(GroupContainer, null,
+            React.createElement(Heading, { level: 2, text: "Inquest Openings" }),
+            React.createElement(Accordion$1, { sections: transformToSections(openingDayGrouped) }))),
+        Object.keys(writingDayGrouped).length > 0 && (React.createElement(GroupContainer, null,
+            React.createElement(Heading, { level: 2, text: "Inquests in Writing" }),
+            React.createElement(Accordion$1, { sections: transformToSections(writingDayGrouped) }))),
+        caseAppointments.length === 0 && (React.createElement("div", null,
+            React.createElement("p", null, "We can't find any results at the moment."),
+            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;
@@ -23757,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 }); }),
@@ -23969,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;
@@ -24087,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) {
@@ -24136,7 +24393,7 @@ var VideoProvider;
     VideoProvider["Vimeo"] = "Vimeo";
 })(VideoProvider || (VideoProvider = {}));
 
-const VideoContainer = styled.figure`
+const VideoContainer$1 = styled.figure`
   display: block;
   padding-top: 56.25%;
   position: relative;
@@ -24196,7 +24453,7 @@ var Video = function (_a) {
     useEffect(function () {
         setNotServer(true);
     }, []);
-    return (React.createElement(React.Fragment, null, cookiesAccepted && notServer ? (React.createElement(VideoContainer, { "data-testid": "Video" },
+    return (React.createElement(React.Fragment, null, cookiesAccepted && notServer ? (React.createElement(VideoContainer$1, { "data-testid": "Video" },
         React.createElement("iframe", { src: embedLink, title: description, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen;", "data-testid": "VideoIframe" }))) : (React.createElement(VideoLink, { href: watchLink, title: description, "data-testid": "VideoLink" }, description))));
 };
 
@@ -25065,6 +25322,17 @@ const FooterLink = styled.a`
     -webkit-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
     -moz-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
   }
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+  }
+  &:focus-visible {
+    ${(props) => props.theme.linkStylesFocus}
+    box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
+    -webkit-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
+    -moz-box-shadow: 0px -2px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
+  }
   &:active {
     ${(props) => props.theme.linkStylesActive}
     box-shadow: 0px -1px 0px 0px ${(props) => props.theme.theme_vars.colours.white} inset;
@@ -25227,6 +25495,8 @@ const headerThemeStyles = (props) => {
 const Container$w = styled.header`
   font-family: ${(props) => props.theme.theme_vars.fontstack};
   padding: 3px 0;
+  position: sticky;
+  z-index: 1;
   ${headerThemeStyles}
 `;
 
@@ -25619,9 +25889,19 @@ var Header = function (_a) {
  * Optimised for an image in 16:5 ratio on all but small width screens
  */
 const Container$u = styled.div`
-  background-image: ${(props) =>
-      !props.$backgroundBox ? `linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)),` : ``}
-    url('${(props) => props.$image}');
+  background-image: ${(props) => {
+    const gradient = !props.$backgroundBox ? `linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))` : '';
+    const imageUrl = props.$image && props.$image.trim() ? `url('${props.$image}')` : '';
+    if (gradient && imageUrl) {
+      return `${gradient}, ${imageUrl}`;
+    } else if (gradient) {
+      return gradient;
+    } else if (imageUrl) {
+      return imageUrl;
+    } else {
+      return 'none';
+    }
+  }};
 
   padding-bottom: 10px;
   background-position: center;
@@ -25652,6 +25932,7 @@ const InnerContainer = styled.div`
   margin-right: auto;
   margin-left: auto;
   flex-grow: 1;
+  z-index: 1;
 
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
     max-width: ${(props) => props.theme.theme_vars.breakpoints.l};
@@ -25773,16 +26054,95 @@ const Search = styled.div`
   margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
 `;
 
+const VideoContainer = styled.div`
+  position: absolute;
+  width: 100%;
+  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    height: 580px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    height: 410px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    height: 560px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.xl}) {
+    height: 636px;
+  }
+`;
+
+const VideoBackground = styled.video`
+  position: absolute;
+  width: 100%;
+  height: 575px;
+  object-fit: cover;
+  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    height: 590px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    height: 420px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    height: 568px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.xl}) {
+    height: 645px;
+  }
+`;
+
+const PlayPauseButton = styled.button`
+  position: absolute;
+  display: none;
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid white;
+    color: white;
+    font-size: 32px;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    &:hover {
+      background: rgba(0, 0, 0, 0.7);
+    }
+  }
+`;
+
 /**
  * Hero image banner with optional text and call to action with varying presentation of text area.
  * For optional use at the top of a service landing page, if set in the CMS.
  */
 var HeroImage = function (_a) {
-    var headline = _a.headline, content = _a.content, callToActionText = _a.callToActionText, callToActionURL = _a.callToActionURL, _b = _a.callToActionIsPrimary, callToActionIsPrimary = _b === void 0 ? true : _b, _c = _a.backgroundBox, backgroundBox = _c === void 0 ? true : _c, imageLarge = _a.imageLarge, imageSmall = _a.imageSmall, imageAltText = _a.imageAltText, breadcrumb = _a.breadcrumb, customSearch = _a.customSearch;
+    var headline = _a.headline, content = _a.content, callToActionText = _a.callToActionText, callToActionURL = _a.callToActionURL, _b = _a.callToActionIsPrimary, callToActionIsPrimary = _b === void 0 ? true : _b, _c = _a.backgroundBox, backgroundBox = _c === void 0 ? true : _c, imageLarge = _a.imageLarge, imageSmall = _a.imageSmall, imageAltText = _a.imageAltText, heroVideoUrl = _a.heroVideoUrl, breadcrumb = _a.breadcrumb, customSearch = _a.customSearch;
+    var _d = useState(true), isPlaying = _d[0], setIsPlaying = _d[1];
+    var videoRef = useRef(null);
+    var togglePlay = function () {
+        if (videoRef.current) {
+            if (isPlaying) {
+                videoRef.current.pause();
+            }
+            else {
+                videoRef.current.play();
+            }
+            setIsPlaying(!isPlaying);
+        }
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(LazyImage, { src: imageLarge, placeholder: imageSmall, visibilitySensorProps: {
                 partialVisibility: true,
             } }, function (src) { return (React.createElement(Container$u, { "$image": src, "$backgroundBox": backgroundBox, "data-testid": "HeroImage" },
+            heroVideoUrl && (React.createElement(React.Fragment, null,
+                React.createElement(VideoContainer, null,
+                    React.createElement(VideoBackground, { ref: videoRef, autoPlay: true, loop: true, muted: true },
+                        React.createElement("source", { src: heroVideoUrl, type: "video/mp4" }),
+                        "Your browser doesn't support this video."),
+                    React.createElement(PlayPauseButton, { onClick: togglePlay }, isPlaying ? '⏸' : '▶')))),
             React.createElement(InnerContainer, null,
                 React.createElement(Overlay, { "$backgroundBox": backgroundBox, "data-testid": "HeroImageOverlay" },
                     breadcrumb && (React.createElement(BreadcrumbLink, { href: breadcrumb.url, "$backgroundBox": backgroundBox }, breadcrumb.title)),
@@ -26990,7 +27350,10 @@ const Container$l = styled.main`
   }
 
   td > a:only-child {
-    padding: 5px 10px;
+    padding: 12px 20px;
+    display: inline-block;
+    min-height: 44px;
+    min-width: 44px;
   }
 
   td > a:not(:only-child) {
@@ -27876,10 +28239,12 @@ const ListItem = styled.li`
       background-color: ${(props) => props.theme.theme_vars.colours.action_light};
       color: ${(props) => props.theme.theme_vars.colours.black};
       border-bottom-color: transparent;
-
       &:focus {
         ${focusListItem}
       }
+      &:focus-visible {
+        ${focusListItem}
+      }
     }
   }
 `;
@@ -27895,10 +28260,12 @@ const ListItemLink = styled.a`
     transition: background-color 0.3s ease 0s;
     background-color: ${(props) => props.theme.theme_vars.colours.action_light}80;
   }
-
   &:focus {
     ${focusListItem}
   }
+  &:focus-visible {
+    ${focusListItem}
+  }
   &:active {
     transform: translateY(1px);
     box-shadow: 0px -1px 0px 0px ${(props) => props.theme.theme_vars.colours.black} inset;
@@ -30068,7 +30435,7 @@ var PhoneIcon = function (_a) {
 };
 
 var ServiceContact = function (_a) {
-    var website = _a.website, email = _a.email, contacts = _a.contacts;
+    var website = _a.website, email = _a.email, contacts = _a.contacts, websiteTitle = _a.websiteTitle;
     var themeContext = useContext(ThemeContext);
     return (React.createElement(Container$6, { "data-testid": "ServiceContact" },
         React.createElement(Row$1, { hasWrap: false },
@@ -30076,7 +30443,7 @@ var ServiceContact = function (_a) {
                 React.createElement(IconContainer$1, null,
                     React.createElement(WebsiteIcon, { colourFill: themeContext.theme_vars.colours.black })),
                 React.createElement(Content$1, null,
-                    React.createElement(WebLink$1, { href: website }, website)))),
+                    React.createElement(WebLink$1, { href: website }, websiteTitle ? "".concat(websiteTitle) : website)))),
             email && (React.createElement(Column, { small: "full", medium: "full", large: "auto", classes: "striped-contacts" },
                 React.createElement(IconContainer$1, null,
                     React.createElement(EmailIcon, { colourFill: themeContext.theme_vars.colours.black })),
@@ -30266,10 +30633,15 @@ var transformDescriptionDetails = function (accreditations, fees, service_areas,
 };
 var transformSnippet = function (description, extractLength) {
     if (extractLength === void 0) { extractLength = 190; }
-    return (sanitizeHtml$1(description, {
+    var sanitized = sanitizeHtml$1(description, {
         allowedTags: [],
         allowedAttributes: {},
-    }).substr(0, extractLength) + String.fromCharCode(8230));
+    }).trim();
+    if (!sanitized) {
+        return '';
+    }
+    var snippet = sanitized.substr(0, extractLength);
+    return sanitized.length > extractLength ? snippet + String.fromCharCode(8230) : snippet;
 };
 var transformTaxonomies = function (service_taxonomys, taxonomiesToShow) {
     if (taxonomiesToShow === void 0) { taxonomiesToShow = []; }
@@ -30302,11 +30674,14 @@ var transformTaxonomies = function (service_taxonomys, taxonomiesToShow) {
 var transformAge = function (age, ageInMonths) {
     if (ageInMonths === void 0) { ageInMonths = false; }
     if (age === 0) {
-        return age;
+        return age.toString();
     }
     if (ageInMonths) {
         if (age > 36) {
-            return Math.ceil(age / 12) + ' years';
+            if (age % 12 === 0) {
+                return Math.ceil(age / 12) + ' years';
+            }
+            return Math.floor(age / 12) + ' years and ' + (age % 12) + (age % 12 === 1 ? ' month' : ' months');
         }
         return "".concat(age, " months");
     }
@@ -30319,7 +30694,7 @@ const Container$5 = styled.div`
 
 var DirectoryMap = function (_a) {
     var _b, _c;
-    var allowCookies = _a.allowCookies, mapProps = _a.mapProps;
+    var _d = _a.allowCookies, allowCookies = _d === void 0 ? true : _d, mapProps = _a.mapProps;
     var cookiesAccepted = wereCookiesAccepted(allowCookies);
     var apiKey = (_b = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY) !== null && _b !== void 0 ? _b : '';
     var latLong = mapProps.centre.split(',');
@@ -30423,11 +30798,11 @@ var HeartIcon = function (_a) {
 };
 
 var DirectoryAddToShortList = function (_a) {
-    var id = _a.id, name = _a.name, snippet = _a.snippet, email = _a.email, website = _a.website, phone = _a.phone;
+    var id = _a.id, name = _a.name, snippet = _a.snippet, email = _a.email, website = _a.website, phone = _a.phone, addresses = _a.addresses, fees = _a.fees;
     var _b = useDirectoryShortListContext(), toggleFavourites = _b.toggleFavourites, isFavourite = _b.isFavourite;
     var themeContext = useContext(ThemeContext);
     var favourite = isFavourite(id);
-    return (React.createElement(AddToShortlist, { onClick: function (e) { return toggleFavourites(id, name, snippet, email, website, phone); }, "data-testid": "DirectoryAddToShortList", "$favourite": favourite },
+    return (React.createElement(AddToShortlist, { onClick: function (e) { return toggleFavourites(id, name, snippet, email, website, phone, addresses, fees); }, "data-testid": "DirectoryAddToShortList", "$favourite": favourite },
         favourite ? (React.createElement(IconDownload$1, { colourFill: themeContext.theme_vars.colours.negative })) : (React.createElement(HeartIcon, { colourFill: themeContext.theme_vars.colours.action })),
         favourite ? React.createElement(React.Fragment, null, "Remove from shortlist") : React.createElement(React.Fragment, null, "Add to shortlist")));
 };
@@ -30496,7 +30871,7 @@ var getIcon = function (profile) {
 
 var DirectoryService = function (_a) {
     var _b, _c, _d, _e;
-    var id = _a.id, name = _a.name, accreditations = _a.accreditations, _f = _a.ageInMonths, ageInMonths = _f === void 0 ? false : _f, description = _a.description, descriptionElement = _a.descriptionElement, eligibilitys = _a.eligibilitys, email = _a.email, fees = _a.fees, languages = _a.languages, organization = _a.organization, regular_schedules = _a.regular_schedules, contacts = _a.contacts, service_areas = _a.service_areas, service_at_locations = _a.service_at_locations, service_social_profiles = _a.service_social_profiles, service_taxonomys = _a.service_taxonomys, taxonomiesToShow = _a.taxonomiesToShow, url = _a.url, uploads = _a.uploads, shortListPath = _a.shortListPath;
+    var id = _a.id, name = _a.name, accreditations = _a.accreditations, _f = _a.ageInMonths, ageInMonths = _f === void 0 ? false : _f, description = _a.description, descriptionElement = _a.descriptionElement, eligibilitys = _a.eligibilitys, email = _a.email, fees = _a.fees, languages = _a.languages, organization = _a.organization, regular_schedules = _a.regular_schedules, contacts = _a.contacts, service_areas = _a.service_areas, service_at_locations = _a.service_at_locations, service_social_profiles = _a.service_social_profiles, service_taxonomys = _a.service_taxonomys, taxonomiesToShow = _a.taxonomiesToShow, url = _a.url, websiteUrlTitle = _a.websiteUrlTitle, uploads = _a.uploads, shortListPath = _a.shortListPath;
     var labelLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'];
     var _g = useState(false), notServer = _g[0], setNotServer = _g[1];
     var themeContext = useContext(ThemeContext);
@@ -30520,7 +30895,9 @@ var DirectoryService = function (_a) {
                             " Shortlist (",
                             favourites.length,
                             ")")),
-                        React.createElement(DirectoryAddToShortList, { id: id, name: name, snippet: transformSnippet(description, 350), email: email, website: url, phone: (_c = (_b = contacts === null || contacts === void 0 ? void 0 : contacts[0]) === null || _b === void 0 ? void 0 : _b.phones) === null || _c === void 0 ? void 0 : _c.flatMap(function (phone) { return phone.number; }).join(', ') })))))),
+                        React.createElement(DirectoryAddToShortList, { id: id, name: name, snippet: transformSnippet(description, 350), email: email, website: url, phone: (_c = (_b = contacts === null || contacts === void 0 ? void 0 : contacts[0]) === null || _b === void 0 ? void 0 : _b.phones) === null || _c === void 0 ? void 0 : _c.flatMap(function (phone) { return phone.number; }).join(', '), addresses: service_at_locations.flatMap(function (location) {
+                                return location.physical_addresses;
+                            }), fees: fees })))))),
             service_at_locations.filter(function (location) {
                 return location.is_visitable != false;
             }).length > 0 && (React.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
@@ -30535,7 +30912,7 @@ var DirectoryService = function (_a) {
                                         .filter(function (item) { return item !== '' && item !== address.id; })
                                         .join(' <br />'),
                                 } }),
-                            React.createElement(Button$4, { url: "https://google.com/maps/dir//".concat(location.latitude, ",").concat(location.longitude), text: "Get directions" }))); }),
+                            location.latitude && location.longitude && (React.createElement(Button$4, { url: "https://google.com/maps/dir//".concat(location.latitude, ",").concat(location.longitude), text: "Get directions" })))); }),
                         (location === null || location === void 0 ? void 0 : location.accessibility_for_disabilities.length) > 0 && (React.createElement(React.Fragment, null,
                             React.createElement(Heading, { level: 3, text: "Other facilities on site" }),
                             React.createElement("ul", null, location.accessibility_for_disabilities.map(function (accessibility) { return (React.createElement("li", { key: accessibility.id }, accessibility.accessibility)); })))))); })),
@@ -30567,7 +30944,7 @@ var DirectoryService = function (_a) {
                         React.createElement(MapLink, { href: "https://www.google.com/maps/search/?api=1&query=".concat(service_at_locations[0].latitude, "%2C").concat(service_at_locations[0].longitude) }, "View in Google Maps"))))))),
             (email || url || (contacts === null || contacts === void 0 ? void 0 : contacts.length) > 0) && (React.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
                 React.createElement(Heading, { level: 2, text: "How to contact this service" }),
-                React.createElement(ServiceContact, { email: email, website: url, contacts: contacts }))),
+                React.createElement(ServiceContact, { email: email, website: url, websiteTitle: websiteUrlTitle, contacts: contacts }))),
             React.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
                 React.createElement(Heading, { level: 2, text: "Description" }),
                 React.createElement("div", null,
@@ -30580,7 +30957,7 @@ var DirectoryService = function (_a) {
                     React.createElement("table", null,
                         React.createElement("thead", null,
                             React.createElement("tr", null,
-                                React.createElement("th", { scope: "col" }, "Weekday"),
+                                React.createElement("th", { scope: "col" }, "Opening days"),
                                 React.createElement("th", { scope: "col" }, "Opens"),
                                 React.createElement("th", { scope: "col" }, "Closes"))),
                         React.createElement("tbody", null, regular_schedules === null || regular_schedules === void 0 ? void 0 : regular_schedules.map(function (schedule, scheduleIndex) { return (React.createElement("tr", { key: scheduleIndex },
@@ -30646,7 +31023,7 @@ styled.div`
   color: ${(props) => props.theme.theme_vars.colours.grey_dark};
 `;
 
-const ButtonContainer$1 = styled.div`
+const ButtonContainer$2 = styled.div`
   display: flex;
   align-items: end;
   padding-bottom: 0;
@@ -30654,23 +31031,49 @@ const ButtonContainer$1 = styled.div`
 `;
 
 const Button$1 = styled.button`
-  border: 1px solid ${(props) => props.theme.theme_vars.colours.white};
-  background: ${(props) => props.theme.theme_vars.colours.action};
-  color: ${(props) => props.theme.theme_vars.colours.white};
-  padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  cursor: pointer;
-  border-radius: ${(props) => props.theme.theme_vars.border_radius};
-  min-height: 42px;
-  margin-right: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+    border: ${(props) => (props.$isWarning ? `3px` : `1px`)} solid
+    ${(props) => (props.$isWarning ? props.theme.theme_vars.colours.negative : props.theme.theme_vars.colours.white)};
+    background: ${(props) =>
+            props.$isWarning ? props.theme.theme_vars.colours.white : props.theme.theme_vars.colours.action};
+    color: ${(props) =>
+            props.$isWarning ? props.theme.theme_vars.colours.negative : props.theme.theme_vars.colours.white};
+    padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    cursor: pointer;
+    border-radius: ${(props) => props.theme.theme_vars.border_radius};
+    min-height: 42px;
+    margin-right: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+    font-weight: bold;
 
-  &:hover {
-    background: ${(props) => props.theme.theme_vars.colours.action_dark};
-  }
+    &:hover {
+        background: ${(props) =>
+                props.$isWarning ? props.theme.theme_vars.colours.action_light : props.theme.theme_vars.colours.action_dark};
+        color: ${(props) =>
+                props.$isWarning ? props.theme.theme_vars.colours.action_dark : props.theme.theme_vars.colours.white};
+        text-decoration: underline;
+        text-decoration-style: dotted;
+    }
 
-  &:focus {
-    outline: none;
-    background: ${(props) => props.theme.theme_vars.colours.focus};
-  }
+    &:focus {
+        ${(props) => props.theme.linkStylesFocus}
+    }
+
+    &:active {
+        ${(props) => props.theme.linkStylesActive}
+    }
+
+    ${(props) => {
+      if (props.size === 'large') {
+        return `
+          font-size: 16px;
+          padding: 14px 24px;
+        `;
+      }
+    }}
+
+    ${(props) =>
+      props.$isWarning && props.size === 'large' && `
+        padding: 12px 24px;
+      `}
 `;
 
 const ButtonText$1 = styled.span`
@@ -30750,28 +31153,29 @@ const Legend$1 = styled.legend`
 `;
 
 const LegendButton = styled.button`
-  position: relative;
-  background: none;
-  border: none;
-  color: ${(props) => props.theme.theme_vars.colours.action};
-  width: 100%;
-  white-space: normal;
-  cursor: pointer;
-  text-align: left;
-  padding-right: 30px;
-  padding-top: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  padding-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  ${(props) => props.theme.theme_vars.h4}
-  ${(props) => props.theme.linkStyles}
-  &:hover {
-    ${(props) => props.theme.linkStylesHover}
-  }
-  &:focus {
-    ${(props) => props.theme.linkStylesFocus}
-  }
-  &:active {
-    ${(props) => props.theme.linkStylesActive}
-  }
+    position: relative;
+    background: none;
+    border: none;
+    color: ${(props) => props.theme.theme_vars.colours.action};
+    width: 100%;
+    white-space: normal;
+    cursor: pointer;
+    text-align: left;
+    padding-right: 30px;
+    padding-top: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    padding-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    ${(props) => props.theme.theme_vars.h4}
+    ${(props) => props.theme.linkStyles}
+    &:hover {
+        ${(props) => props.theme.linkStylesHover}
+    }
+    &:focus {
+        ${(props) => props.theme.linkStylesFocus}
+    }
+    &:active {
+        ${(props) => props.theme.linkStylesActive}
+    }
+    margin: 0;
 `;
 
 const AccordionIcon = styled.span`
@@ -30880,6 +31284,14 @@ const MapToggle = styled.button`
   &:active {
     ${(props) => props.theme.linkStylesActive}
   }
+  ${(props) => {
+    if (props.size === 'large') {
+      return `
+        font-size: 16px;
+        padding: 14px 24px;
+      `;
+    }
+  }}
 `;
 
 const Favourites = styled.a`
@@ -31085,24 +31497,24 @@ var RadioCheckboxInput = function (_a) {
 };
 
 var DirectoryServiceList = function (_a) {
-    var directoryPath = _a.directoryPath, shortListPath = _a.shortListPath, services = _a.services, _b = _a.search, search = _b === void 0 ? '' : _b, setSearch = _a.setSearch, _c = _a.postcode, postcode = _c === void 0 ? '' : _c, setPostcode = _a.setPostcode, _d = _a.totalResults, totalResults = _d === void 0 ? 0 : _d, _e = _a.pageNumber, pageNumber = _e === void 0 ? 1 : _e, setPageNumber = _a.setPageNumber, _f = _a.perPage, perPage = _f === void 0 ? 5 : _f, _g = _a.extractLength, extractLength = _g === void 0 ? 300 : _g, _h = _a.categories, categories = _h === void 0 ? [] : _h, setCategories = _a.setCategories, _j = _a.minimumAge, minimumAge = _j === void 0 ? undefined : _j, setMinimumAge = _a.setMinimumAge, _k = _a.maximumAge, maximumAge = _k === void 0 ? undefined : _k, setMaximumAge = _a.setMaximumAge, _l = _a.mapCenter, mapCenter = _l === void 0 ? '52.23555414368587,-0.8957390701320571' : _l, _m = _a.mapZoom, mapZoom = _m === void 0 ? 9 : _m, _o = _a.isLoading, isLoading = _o === void 0 ? false : _o, _p = _a.ageInMonths, ageInMonths = _p === void 0 ? false : _p, _q = _a.hasDocuments, hasDocuments = _q === void 0 ? false : _q;
-    var _r = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-accordion"), []), accordions = _r[0], setAccordions = _r[1];
-    var _s = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-accordion-all"), true), openAll = _s[0], setOpenAll = _s[1];
-    var _t = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-show-map"), false), showMap = _t[0], setShowMap = _t[1];
-    var _u = useState(false), showFilters = _u[0], setShowFilters = _u[1];
-    var _v = useDirectoryShortListContext(), _w = _v.favourites, favourites = _w.favourites; _w.setFavourites; _v.toggleFavourites; _v.isFavourite;
-    var _x = useState(false), notServer = _x[0], setNotServer = _x[1];
-    var _y = useState(search), searchTerm = _y[0], setSearchTerm = _y[1];
-    var _z = useState(postcode), postcodeSearch = _z[0], setPostcodeSearch = _z[1];
+    var directoryPath = _a.directoryPath, shortListPath = _a.shortListPath, services = _a.services, _b = _a.search, search = _b === void 0 ? '' : _b, setSearch = _a.setSearch, _c = _a.proximity, proximity = _c === void 0 ? 2 : _c, _d = _a.showPostcodeSearch, showPostcodeSearch = _d === void 0 ? true : _d, _e = _a.postcode, postcode = _e === void 0 ? '' : _e, setPostcode = _a.setPostcode, _f = _a.totalResults, totalResults = _f === void 0 ? 0 : _f, _g = _a.pageNumber, pageNumber = _g === void 0 ? 1 : _g, setPageNumber = _a.setPageNumber, _h = _a.perPage, perPage = _h === void 0 ? 5 : _h, _j = _a.extractLength, extractLength = _j === void 0 ? 300 : _j, _k = _a.categories, categories = _k === void 0 ? [] : _k, setCategories = _a.setCategories, _l = _a.minimumAge, minimumAge = _l === void 0 ? undefined : _l, setMinimumAge = _a.setMinimumAge, _m = _a.maximumAge, maximumAge = _m === void 0 ? undefined : _m, setMaximumAge = _a.setMaximumAge, _o = _a.mapCenter, mapCenter = _o === void 0 ? '52.40410666556486,-0.7237065995821512' : _o, _p = _a.mapZoom, mapZoom = _p === void 0 ? 9 : _p, _q = _a.isLoading, isLoading = _q === void 0 ? false : _q, _r = _a.ageInMonths, ageInMonths = _r === void 0 ? false : _r, _s = _a.hasDocuments, hasDocuments = _s === void 0 ? false : _s, _t = _a.isError, isError = _t === void 0 ? false : _t;
+    var _u = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-accordion"), []), accordions = _u[0], setAccordions = _u[1];
+    var _v = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-accordion-all"), true), openAll = _v[0], setOpenAll = _v[1];
+    var _w = useLocalStorage("".concat(directoryPath.replace(/\//g, ''), "-show-map"), false), showMap = _w[0], setShowMap = _w[1];
+    var _x = useState(false), showFilters = _x[0], setShowFilters = _x[1];
+    var _y = useDirectoryShortListContext(), _z = _y.favourites, favourites = _z.favourites; _z.setFavourites; _y.toggleFavourites; _y.isFavourite;
+    var _0 = useState(false), notServer = _0[0], setNotServer = _0[1];
+    var _1 = useState(search), searchTerm = _1[0], setSearchTerm = _1[1];
+    var _2 = useState(postcode), postcodeSearch = _2[0], setPostcodeSearch = _2[1];
     var themeContext = useContext(ThemeContext);
-    var _0 = useState(false), filtersActive = _0[0], setFiltersActive = _0[1];
+    var _3 = useState(false), filtersActive = _3[0], setFiltersActive = _3[1];
     useEffect(function () {
         setNotServer(true);
         setFiltersActive(hasActiveFilters());
     }, []);
     useEffect(function () {
         setFiltersActive(hasActiveFilters());
-    }, [minimumAge, maximumAge, categories]);
+    }, [minimumAge, maximumAge, categories, search, postcode]);
     if (accordions.length === 0) {
         var tempAccordions_1 = [];
         categories === null || categories === void 0 ? void 0 : categories.forEach(function () {
@@ -31180,7 +31592,7 @@ var DirectoryServiceList = function (_a) {
                 lat: parseFloat((_a = service.service_at_locations[0]) === null || _a === void 0 ? void 0 : _a.latitude),
                 lng: parseFloat((_b = service.service_at_locations[0]) === null || _b === void 0 ? void 0 : _b.longitude),
                 label: labelLetters[index],
-                title: "<a href=\"".concat(directoryPath, "/").concat(service.id, "\">").concat(service.name, "</a>"),
+                title: "<a href=".concat(service.id, ">").concat(service.name, "</a>"),
             };
         }),
     };
@@ -31197,7 +31609,9 @@ var DirectoryServiceList = function (_a) {
         }
     };
     var hasActiveFilters = function () {
-        return (maximumAge !== '' ||
+        return (search !== '' ||
+            postcode !== '' ||
+            maximumAge !== '' ||
             minimumAge !== '' ||
             categories.some(function (category) {
                 return category.options.some(function (option) {
@@ -31213,21 +31627,23 @@ var DirectoryServiceList = function (_a) {
                         React.createElement(Row$1, null,
                             React.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
                                 React.createElement(Label$1, { htmlFor: "directorySearch" }, "What are you looking for?"),
-                                React.createElement(HintText, { text: "Enter a search word or phrase" }),
+                                React.createElement(HintText, { text: "Enter the name of a specific organisation" }),
                                 React.createElement(Input, { name: "directorySearch", type: "text", defaultValue: searchTerm, id: "directorySearch", onChange: function (e) {
                                         setSearchTerm(e.target.value);
                                     } })),
-                            React.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
+                            showPostcodeSearch && (React.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
                                 React.createElement(Label$1, { htmlFor: "postcode" }, "Postcode (optional)"),
-                                React.createElement(HintText, { text: "Enter a postcode" }),
-                                React.createElement(Input, { name: "postcode", type: "text", defaultValue: postcodeSearch, id: "postcode", onChange: function (e) { return setPostcodeSearch(e.target.value); }, autocomplete: "postal-code" })),
+                                React.createElement(HintText, { text: "Enter a postcode to see results within ".concat(proximity, " miles") }),
+                                React.createElement(Input, { name: "postcode", type: "text", defaultValue: postcodeSearch, id: "postcode", onChange: function (e) { return setPostcodeSearch(e.target.value); }, autocomplete: "postal-code" }))),
                             React.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
-                                React.createElement(ButtonContainer$1, null,
-                                    React.createElement(Button$1, { onClick: submitSearch, type: "submit" },
+                                React.createElement(ButtonContainer$2, null,
+                                    React.createElement(Button$1, { size: "large", onClick: submitSearch, type: "submit" },
                                         React.createElement(ButtonText$1, null, "Search"),
-                                        React.createElement(IconDownload, { colourFill: "#fff" })))),
+                                        React.createElement(IconDownload, { colourFill: "#fff" })),
+                                    filtersActive && (React.createElement(Button$1, { size: "large", onClick: clearSearch, type: "button", "$isWarning": true },
+                                        React.createElement(ButtonText$1, null, "Clear search"))))),
                             hasDocuments && (React.createElement(Column, { small: "full", medium: "full", large: "full" },
-                                React.createElement(Button$4, { url: "".concat(directoryPath, "/documents?search=").concat(searchTerm), text: "View documents and resources", primary: false }))))))),
+                                React.createElement(Button$4, { url: "".concat(directoryPath, "/documents?search=").concat(searchTerm), text: "View documents and resources", primary: false, size: "large" }))))))),
             React.createElement(Column, { small: "full", medium: "one-third", large: "one-third" },
                 React.createElement(FilterToggle, { type: "button", onClick: function (e) { return setShowFilters(!showFilters); } }, showFilters ? "Hide Filters" : "Show Filters"),
                 React.createElement(FilterContainer, { "$showFilters": showFilters },
@@ -31263,14 +31679,16 @@ var DirectoryServiceList = function (_a) {
                                     React.createElement(Legend$1, null,
                                         React.createElement(LegendButton, { onClick: function (e) { return toggleAccordion(categoryIndex + 1); }, type: "button" },
                                             category.label,
-                                            React.createElement(AccordionIcon, { isOpen: accordions[categoryIndex + 1] }))),
+                                            React.createElement(AccordionIcon, { "$isOpen": accordions[categoryIndex + 1] }))),
                                     React.createElement(Accordion, { "$isOpen": accordions[categoryIndex + 1] },
                                         React.createElement(ClearFilter$1, null,
                                             React.createElement(TextLink$1, { onClick: function (e) { return clearCategory(categoryIndex); } }, "Clear filter")),
                                         category.options.map(function (taxonomy) { return (React.createElement(Category$2, { key: taxonomy.id },
                                             React.createElement(RadioCheckboxInput, { name: taxonomy.vocabulary, value: taxonomy.id, label: taxonomy.name, singleSelection: category.singleSelection, checked: taxonomy.checked, onChange: function (e) { return optionChecked(e, categoryIndex, category.singleSelection); } }))); }))))); })))))),
             React.createElement(Column, { small: "full", medium: "two-thirds", large: "two-thirds" },
-                React.createElement(Row$1, null, isLoading ? (React.createElement(LoadingContainer$1, null,
+                React.createElement(Row$1, null, isError ? (React.createElement(Column, { small: "full", medium: "full", large: "full" },
+                    React.createElement(AlertBannerService, null,
+                        React.createElement("p", null, "Sorry, there was a problem fetching results. Please try again later.")))) : isLoading ? (React.createElement(LoadingContainer$1, null,
                     React.createElement(LoadingSpinner, null),
                     React.createElement("p", null, "Loading"))) : (React.createElement(React.Fragment, null,
                     React.createElement(Column, { small: "full", medium: "full", large: "full" },
@@ -31282,7 +31700,7 @@ var DirectoryServiceList = function (_a) {
                             " out of ",
                             totalResults.toLocaleString())) : (React.createElement(ResultInfo$1, null, "No results found")),
                         React.createElement(FavouritesContainer, null,
-                            (services === null || services === void 0 ? void 0 : services.length) > 0 && (React.createElement(MapToggle, { type: "button", onClick: function (e) { return setShowMap(!showMap); } }, showMap ? "Hide Map" : "Show Map")),
+                            (services === null || services === void 0 ? void 0 : services.length) > 0 && (React.createElement(MapToggle, { type: "button", size: "large", onClick: function (e) { return setShowMap(!showMap); } }, showMap ? "Hide Map" : "Show Map")),
                             React.createElement(Favourites, { href: shortListPath },
                                 React.createElement(HeartIcon, { colourFill: themeContext.theme_vars.colours.action }),
                                 " Shortlist (",
@@ -31292,14 +31710,14 @@ var DirectoryServiceList = function (_a) {
                         React.createElement(Pagination, { currentPage: pageNumber, totalResults: totalResults, resultsPerPage: perPage, postTo: directoryPath, buttonClickOverride: setPageNumber })),
                     React.createElement(Column, { small: "full", medium: "full", large: "full" }, notServer && React.createElement(React.Fragment, null, (services === null || services === void 0 ? void 0 : services.length) > 0 && showMap && React.createElement(DirectoryMap, { mapProps: mapProps }))),
                     services.map(function (service, index) {
-                        var _a, _b, _c, _d, _e, _f;
+                        var _a, _b, _c, _d, _e, _f, _g;
                         var snippet = transformSnippet(service.description, extractLength);
                         return (React.createElement(Column, { small: "full", medium: "full", large: "full", key: service.id },
                             React.createElement(ServiceContainer, { "$resultNumber": index },
                                 React.createElement(Row$1, null,
                                     React.createElement(Column, { small: "full", medium: "full", large: "full" },
                                         React.createElement(ServiceHeader, null,
-                                            React.createElement(ServiceLink$1, { href: "".concat(directoryPath, "/").concat(service.id) }, service.name),
+                                            React.createElement(ServiceLink$1, { href: "".concat(service.id) }, service.name),
                                             showMap && (React.createElement(MarkerContainer, null,
                                                 React.createElement("span", null, labelLetters[index]),
                                                 React.createElement(PinIcon, { colourFill: themeContext.theme_vars.colours.action_dark }))))),
@@ -31315,7 +31733,9 @@ var DirectoryServiceList = function (_a) {
                                         ' ',
                                         transformAge(eligibility.maximum_age, ageInMonths))); })))),
                                     React.createElement(Column, { small: "full", medium: "full", large: "full" },
-                                        React.createElement(DirectoryAddToShortList, { id: service.id, name: service.name, snippet: snippet, email: service.email, website: service.url, phone: (_f = (_e = (_d = service.contacts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.phones) === null || _f === void 0 ? void 0 : _f.flatMap(function (phone) { return phone.number; }).join(', ') }))))));
+                                        React.createElement(DirectoryAddToShortList, { id: service.id, name: service.name, snippet: snippet, email: service.email, website: service.url, phone: (_f = (_e = (_d = service.contacts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.phones) === null || _f === void 0 ? void 0 : _f.flatMap(function (phone) { return phone.number; }).join(', '), addresses: (_g = service.service_at_locations) === null || _g === void 0 ? void 0 : _g.flatMap(function (location) {
+                                                return location.physical_addresses;
+                                            }), fees: service.fees }))))));
                     }),
                     React.createElement(Column, { small: "full", medium: "full", large: "full" },
                         React.createElement(Pagination, { currentPage: pageNumber, totalResults: totalResults, resultsPerPage: perPage, postTo: directoryPath, buttonClickOverride: setPageNumber })))))))));
@@ -31323,71 +31743,96 @@ var DirectoryServiceList = function (_a) {
 
 const Container$1 = styled.div`
   display: block;
+
+    @media print {  
+        font-size: ${(props) => props.theme.theme_vars.fontSizes.extra_small} !important;
+        [data-testid='Column'] {
+            padding: ${(props) => props.theme.theme_vars.spacingSizes.extra_small} !important;
+        }
+
+        .favourite-outer:nth-of-type(2n + 1) {
+            page-break-after: always;
+        }
+
+        .favourite-outer:last-of-type {
+            page-break-after: avoid !important;
+        }
+    }
 `;
 
 const ServiceLink = styled.a`
-  display: block;
-  margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
-  ${(props) => props.theme.theme_vars.h4}
-  ${(props) => props.theme.linkStyles}
-  &:hover {
-    ${(props) => props.theme.linkStylesHover}
-  }
-  &:focus {
-    ${(props) => props.theme.linkStylesFocus}
-  }
-  &:active {
-    ${(props) => props.theme.linkStylesActive}
-  }
+    display: block;
+    margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    ${(props) => props.theme.theme_vars.h4}
+    ${(props) => props.theme.linkStyles}
+    &:hover {
+        ${(props) => props.theme.linkStylesHover}
+    }
+    &:focus {
+        ${(props) => props.theme.linkStylesFocus}
+    }
+    &:active {
+        ${(props) => props.theme.linkStylesActive}
+    }
 
-  @media print {
-    color: ${(props) => props.theme.theme_vars.colours.black} !important;
-    text-decoration: none !important;
-  }
+    @media print {
+        color: ${(props) => props.theme.theme_vars.colours.black} !important;
+        text-decoration: none !important;
+        font-size: ${(props) => props.theme.theme_vars.fontSizes.small};
+        margin-bottom: 0;
+    }
 `;
 
 const PrintLink = styled.div`
-  p {
-    display: none;
-  }
-
-  @media print {
     p {
-      display: block;
+        display: none;
+    }
+
+    @media print {
+        p {
+            display: none;
+            margin-bottom: 0 !important;
+        }
     }
+`;
+
+const SnippetContainer = styled.div`
+  @media print {
+    display: flex;
+    flex-wrap: nowrap;
   }
 `;
 
 const QRCodeContainer = styled.div`
-  max-width: 80px;
-  margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
-  display: none;
-  float: right;
+    max-width: 80px;
+    display: none;
 
-  @media print {
-    display: block;
-  }
+    @media print {
+        display: block;
+        margin-left: ${(props) => props.theme.theme_vars.spacingSizes.small};
+    }
 `;
 
 const FavouriteContainer = styled.div`
-  background: ${(props) =>
-    props.theme.cardinal_name === 'north'
-      ? props.theme.theme_vars.colours.white
-      : props.theme.theme_vars.colours.grey_light};
-  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
-  transition: box-shadow 0.3s ease;
-  border-bottom: 5px solid ${(props) => props.theme.theme_vars.colours.action};
-  border-radius: ${(props) => props.theme.theme_vars.border_radius};
-  padding: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+    background: ${(props) =>
+            props.theme.cardinal_name === 'north'
+                    ? props.theme.theme_vars.colours.white
+                    : props.theme.theme_vars.colours.grey_light};
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
+    transition: box-shadow 0.3s ease;
+    border-bottom: 5px solid ${(props) => props.theme.theme_vars.colours.action};
+    border-radius: ${(props) => props.theme.theme_vars.border_radius};
+    padding: ${(props) => props.theme.theme_vars.spacingSizes.medium};
 
-  @media print {
-    box-shadow: none;
-    border: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
-    background: none;
-  }
+    @media print {
+        box-shadow: none;
+        border: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
+        background: none;
+        padding: 0 ${(props) => props.theme.theme_vars.spacingSizes.small};
+    }
 `;
 
-const PrintContainer = styled.div`
+const ButtonContainer$1 = styled.div`
   display: flex;
   justify-content: flex-end;
 
@@ -31396,7 +31841,7 @@ const PrintContainer = styled.div`
   }
 `;
 
-const PrintButton = styled.button`
+const ActionButton = styled.button`
   border: 2px solid ${(props) => props.theme.theme_vars.colours.action};
   border-radius: ${(props) => props.theme.theme_vars.border_radius};
   background: ${(props) => props.theme.theme_vars.colours.action};
@@ -31408,6 +31853,7 @@ const PrintButton = styled.button`
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
+  margin-left: ${(props) => props.theme.theme_vars.spacingSizes.medium};
   &:hover {
     ${(props) => props.theme.linkStylesHover}
     color: ${(props) => props.theme.theme_vars.colours.white};
@@ -31430,6 +31876,53 @@ const AddContainer = styled.div`
   }
 `;
 
+const SubTitle = styled.p`
+  font-weight: bold;
+  margin-top: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+`;
+
+const ClearShortlistButton = styled.button`
+  border: 1px solid ${(props) => props.theme.theme_vars.colours.negative};
+  background: ${(props) => props.theme.theme_vars.colours.white};
+  color: ${(props) => props.theme.theme_vars.colours.negative};
+  padding: ${(props) => props.theme.theme_vars.spacingSizes.small};
+  cursor: pointer;
+  border-radius: ${(props) => props.theme.theme_vars.border_radius};
+  min-height: 42px;
+  font-weight: bold;
+
+  &:hover {
+    background: ${(props) => props.theme.theme_vars.colours.action_light};
+    color: ${(props) => props.theme.theme_vars.colours.action_dark};
+    text-decoration: underline;
+    text-decoration-style: dotted;
+  }
+
+  &:focus {
+    ${(props) => props.theme.linkStylesFocus}
+  }
+
+  &:active {
+    ${(props) => props.theme.linkStylesActive}
+  }
+`;
+
+const AddressContainer = styled.div`
+  display: block;
+
+  @media print {
+    display: none;
+  }
+`;
+
+const PrintAddress = styled.div`
+  display: none;
+
+  @media print {
+    display: block;
+  }
+`;
+
 var lib = {};
 
 var mode$1 = {
@@ -32789,32 +33282,82 @@ QRCode.defaultProps = defaultProps;
 var _default = lib.default = QRCode;
 
 var DirectoryShortList = function (_a) {
-    var directoryPath = _a.directoryPath;
-    var favourites = useDirectoryShortListContext().favourites.favourites;
-    var _b = useState(false), notServer = _b[0], setNotServer = _b[1];
+    _a.directoryPath;
+    var _b = useDirectoryShortListContext(), favourites = _b.favourites.favourites, clearShortlist = _b.clearShortlist;
+    var _c = useState(false), notServer = _c[0], setNotServer = _c[1];
     useEffect(function () {
         setNotServer(true);
     }, []);
+    var confirmClear = function () {
+        if (window.confirm('Are you sure you want to clear your shortlist?')) {
+            clearShortlist();
+        }
+    };
+    var formatAddress = function (address) {
+        return Object.values(address)
+            .filter(function (item) { return item !== '' && item !== address.id && item !== address.country; })
+            .join(', ');
+    };
+    var copyToClipboard = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var data;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    data = favourites.map(function (favourite) {
+                        var _a, _b, _c, _d;
+                        var address = favourite.addresses.length > 0 ? formatAddress(favourite.addresses[0]) : '';
+                        return "\nName: ".concat(favourite.name, "\nLink: ").concat(favourite.id, "\nAddress: ").concat(address, "\nEmail: ").concat((_a = favourite.email) !== null && _a !== void 0 ? _a : '', "\nWebsite: ").concat((_b = favourite.website) !== null && _b !== void 0 ? _b : '', "\nTelephone: ").concat((_c = favourite.phone) !== null && _c !== void 0 ? _c : '', "\nAbout: ").concat((_d = favourite.snippet.replace(/(\r\n|\n|\r)/gm, '').replace(/\s+/g, ' ')) !== null && _d !== void 0 ? _d : '', "\n\n      ");
+                    });
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(data.join('')).then(function () {
+                            window.alert('Copied to clipboard');
+                        })];
+                case 2:
+                    _b.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    _b.sent();
+                    window.alert('Unable to copy');
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
     return (React.createElement(Container$1, { "data-testid": "DirectoryShortList" }, notServer && (React.createElement(Row$1, null, favourites.length > 0 ? (React.createElement(React.Fragment, null,
         React.createElement(Column, { small: "full", medium: "full", large: "full" },
-            React.createElement(PrintContainer, null,
-                React.createElement(PrintButton, { onClick: function () { return window.print(); } }, "Print Shortlist"))),
-        favourites.map(function (favourite) { return (React.createElement(Column, { key: favourite.id, small: "full", medium: "full", large: "full" },
-            React.createElement(FavouriteContainer, null,
-                React.createElement(Row$1, null,
-                    React.createElement(Column, { small: "full", medium: "full", large: "full" },
-                        React.createElement(QRCodeContainer, null,
-                            React.createElement(_default, { value: "".concat(directoryPath, "/").concat(favourite.id), size: 256, style: { height: 'auto', maxWidth: '100%', width: '100%' }, viewBox: "0 0 256 256" })),
-                        React.createElement(ServiceLink, { href: "".concat(directoryPath, "/").concat(favourite.id) }, favourite.name),
-                        React.createElement(PrintLink, null,
-                            React.createElement("p", null, "".concat(directoryPath, "/").concat(favourite.id)))),
-                    React.createElement(Column, { small: "full", medium: "full", large: "one-half" },
-                        React.createElement("div", null, favourite.snippet)),
-                    React.createElement(Column, { small: "full", medium: "full", large: "one-half" },
-                        React.createElement(SummaryList, { terms: transformService(favourite.email, favourite.website, favourite.phone), hasMargin: false })),
-                    React.createElement(Column, { small: "full", medium: "full", large: "full" },
-                        React.createElement(AddContainer, null,
-                            React.createElement(DirectoryAddToShortList, { id: favourite.id, name: favourite.name, snippet: favourite.snippet, email: favourite.email, website: favourite.website, phone: favourite.phone }))))))); }))) : (React.createElement(Column, { small: "full", medium: "full", large: "full" },
+            React.createElement(ButtonContainer$1, null,
+                React.createElement(ClearShortlistButton, { onClick: confirmClear }, "Clear Shortlist"),
+                React.createElement(ActionButton, { onClick: copyToClipboard }, "Copy To Clipboard"),
+                React.createElement(ActionButton, { onClick: function () { return window.print(); } }, "Print Shortlist"))),
+        favourites.map(function (favourite) {
+            var _a, _b;
+            return (React.createElement(Column, { key: favourite.id, small: "full", medium: "full", large: "full", classes: "favourite-outer" },
+                React.createElement(FavouriteContainer, null,
+                    React.createElement(Row$1, null,
+                        React.createElement(Column, { small: "full", medium: "full", large: "full" },
+                            React.createElement(ServiceLink, { href: "".concat(favourite.id) }, favourite.name),
+                            React.createElement(PrintLink, null,
+                                React.createElement("p", null, "".concat(favourite.id)))),
+                        React.createElement(Column, { small: "full", medium: "full", large: "one-half" },
+                            React.createElement(SnippetContainer, null,
+                                React.createElement("div", null, favourite.snippet),
+                                React.createElement(QRCodeContainer, null,
+                                    React.createElement(_default, { value: "".concat(favourite.id), size: 256, style: { height: 'auto', maxWidth: '100%', width: '100%' }, viewBox: "0 0 256 256" }))),
+                            ((_a = favourite.addresses) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React.createElement(React.Fragment, null,
+                                React.createElement(AddressContainer, null,
+                                    React.createElement(SubTitle, null, "Address"),
+                                    ((_b = favourite.addresses) === null || _b === void 0 ? void 0 : _b.length) === 1 ? (React.createElement("p", null, formatAddress(favourite.addresses[0]))) : (React.createElement("ul", null, favourite.addresses.map(function (address) { return (React.createElement("li", { key: address.id }, formatAddress(address))); })))),
+                                React.createElement(PrintAddress, null,
+                                    React.createElement(SummaryList, { terms: [{ term: 'Address', detail: formatAddress(favourite.addresses[0]) }], hasMargin: false }))))),
+                        React.createElement(Column, { small: "full", medium: "full", large: "one-half" },
+                            React.createElement(SummaryList, { terms: transformService(favourite.email, favourite.website, favourite.phone), hasMargin: false }),
+                            favourite.fees && (React.createElement(SummaryList, { terms: [{ term: 'Cost', detail: favourite.fees }], hasMargin: false }))),
+                        React.createElement(Column, { small: "full", medium: "full", large: "full" },
+                            React.createElement(AddContainer, null,
+                                React.createElement(DirectoryAddToShortList, { id: favourite.id, name: favourite.name, snippet: favourite.snippet, email: favourite.email, website: favourite.website, phone: favourite.phone, addresses: favourite.addresses })))))));
+        }))) : (React.createElement(Column, { small: "full", medium: "full", large: "full" },
         React.createElement(FavouriteContainer, null,
             React.createElement("p", null, "No items in the shortlist"))))))));
 };
@@ -32949,8 +33492,8 @@ const LoadingContainer = styled.div`
 `;
 
 var DirectoryDocumentList = function (_a) {
-    var directoryPath = _a.directoryPath, documents = _a.documents, _b = _a.search, search = _b === void 0 ? '' : _b, setSearch = _a.setSearch, _c = _a.totalResults, totalResults = _c === void 0 ? 0 : _c, _d = _a.pageNumber, pageNumber = _d === void 0 ? 1 : _d, setPageNumber = _a.setPageNumber, _e = _a.perPage, perPage = _e === void 0 ? 10 : _e, categories = _a.categories, setCategories = _a.setCategories, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f;
-    var _g = useState(search), searchTerm = _g[0], setSearchTerm = _g[1];
+    var directoryPath = _a.directoryPath, documents = _a.documents, _b = _a.search, search = _b === void 0 ? '' : _b, setSearch = _a.setSearch, _c = _a.totalResults, totalResults = _c === void 0 ? 0 : _c, _d = _a.pageNumber, pageNumber = _d === void 0 ? 1 : _d, setPageNumber = _a.setPageNumber, _e = _a.perPage, perPage = _e === void 0 ? 10 : _e, categories = _a.categories, setCategories = _a.setCategories, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isError, isError = _g === void 0 ? false : _g;
+    var _h = useState(search), searchTerm = _h[0], setSearchTerm = _h[1];
     var submitSearch = function (e) {
         e.preventDefault();
         setSearch(searchTerm);
@@ -32989,7 +33532,7 @@ var DirectoryDocumentList = function (_a) {
                         React.createElement(Row$1, null,
                             React.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
                                 React.createElement(Label, { htmlFor: "directorySearch" }, "What are you looking for?"),
-                                React.createElement(HintText, { text: "Enter a search word or phrase" }),
+                                React.createElement(HintText, { text: "Enter the name of a specific organisation" }),
                                 React.createElement(Input, { name: "directorySearch", type: "text", defaultValue: searchTerm, id: "directorySearch", onChange: function (e) {
                                         setSearchTerm(e.target.value);
                                     } })),
@@ -33013,7 +33556,9 @@ var DirectoryDocumentList = function (_a) {
                                 React.createElement(RadioCheckboxInput, { name: taxonomy.vocabulary, value: taxonomy.id, label: taxonomy.name, singleSelection: category.singleSelection, checked: taxonomy.checked, onChange: function (e) { return optionChecked(e, categoryIndex, category.singleSelection); } }))); })))); }))),
             React.createElement(Column, { small: "full", medium: "two-thirds", large: "two-thirds" },
                 React.createElement(Row$1, null,
-                    isLoading ? (React.createElement(LoadingContainer, null,
+                    isError ? (React.createElement(Column, { small: "full", medium: "full", large: "full" },
+                        React.createElement(AlertBannerService, null,
+                            React.createElement("p", null, "Sorry, there was a problem fetching results. Please try again later.")))) : isLoading ? (React.createElement(LoadingContainer, null,
                         React.createElement(LoadingSpinner, null),
                         React.createElement("p", null, "Loading"))) : (React.createElement(React.Fragment, null,
                         React.createElement(Column, { small: "full", medium: "full", large: "full" }, (documents === null || documents === void 0 ? void 0 : documents.length) > 0 ? (React.createElement(ResultInfo, null,
@@ -33030,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