@nnc-digital/nnc-design-system 0.4.4 → 0.4.7

package/build/index.esm.js

@@ -1,11 +1,11 @@
 import React, { Component, cloneElement, useState, useContext, useEffect, useId, useRef, createContext } from 'react';
 import styled, { css, ThemeContext, ThemeProvider, createGlobalStyle } from 'styled-components';
+import axios from 'axios';
 import require$$0 from 'tty';
 import require$$2 from 'path';
 import require$$1$1 from 'url';
 import require$$1 from 'fs';
 import require$$1$2 from 'react-dom';
-import axios from 'axios';
 import { Wrapper as Wrapper$5 } from '@googlemaps/react-wrapper';
 
 /******************************************************************************
@@ -92,6 +92,11 @@ function __spreadArray(to, from, pack) {
         }
     }
     return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 }
 
 const StyledInput = styled.input`
@@ -3835,7 +3840,7 @@ var Autocomplete = function (_a) {
         })));
 };
 
-const Container$17 = styled.div`
+const Container$18 = styled.div`
   display: block;
 `;
 
@@ -3920,7 +3925,7 @@ var BackToTop = function (_a) {
     useEffect(function () {
         window.addEventListener('scroll', toggleVisible);
     });
-    return (React.createElement(Container$17, { "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$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" },
         React.createElement(ChevronIcon, { colourFill: themeContext.theme_vars.colours.white, direction: "up" })))));
 };
 
@@ -4022,6 +4027,429 @@ var Button$4 = function (_a) {
             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"])));
+styled.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 15px;\n"], ["\n  display: block;\n  margin-bottom: 15px;\n"])));
+var BinCollectionButtonStyles = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    button {\n      margin: 10px 10px 36px 10px;\n    }\n"], ["\n    button {\n      margin: 10px 10px 36px 10px;\n    }\n"])));
+var FormContainer$1 = styled.div(templateObject_4 || (templateObject_4 = __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      ";
+});
+var ErrorTextWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n"], ["\n  display: block;\n  width: 100%;\n"])));
+var DropDownSelectContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
+var FormInnerContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
+styled.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"])), function (props) { return props.theme.theme_vars.spacingSizes.small; });
+var UPRNPageTitleRow = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  justify-content: center;\n  margin-bottom: 1em;\n  margin-top: 2em;\n  width: 100%;\n"], ["\n  justify-content: center;\n  margin-bottom: 1em;\n  margin-top: 2em;\n  width: 100%;\n"])));
+var UPRNPageUPRNRow = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: left;\n  margin-bottom: .5em;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: left;\n  margin-bottom: .5em;\n  width: 100%;\n"])));
+var UPRNPageSectionTitle = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: 2em;\n  font-weight: 700;\n"], ["\n  font-size: 2em;\n  font-weight: 700;\n"])));
+var UPRNPageUPRNTitle = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-size: 1.5em;\n"], ["\n  font-size: 1.5em;\n"])));
+styled.input(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+
+const Container$16 = styled.div`
+  display: flex;
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+`;
+const Form = styled.form`
+  padding-top: 10px;
+  padding-bottom: 12px;
+  padding-left: ${(props) => (props.hideLine ? '0' : '15px')};
+  max-width: 100%;
+  width: 100%;
+`;
+const Line$1 = styled.div`
+  background: ${(props) => (props.isError ? props.theme.theme_vars.colours.negative : props.lineColour)};
+  display: ${(props) => (props.hideLine ? 'none' : 'block')};
+  width: 5px;
+  border-radius: 2px;
+`;
+
+const ErrorSummary = styled.div`
+  color: ${(props) => props.theme.theme_vars.colours.negative};
+  font-weight: bold;
+  border-radius: ${(props) => props.theme.theme_vars.border_radius};
+  border: 3px solid ${(props) => props.theme.theme_vars.colours.negative};
+  margin-bottom: 15px;
+  padding: 15px;
+`;
+
+/**
+ * Form element - a container with a line on the left
+ */
+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,
+        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),
+            children)));
+};
+
+/**
+ * Primary UI component for user interaction
+ * If value is set then treat as controlled component
+ */
+var Input$6 = 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;
+    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 })) : (React.createElement(StyledInput, { onChange: onChange, type: type, placeholder: placeholder, name: name, isErrored: isErrored, maxLength: maxLength, defaultValue: defaultValue, id: id }))));
+};
+
+const StyledButton = styled.button`
+    font-weight: 700;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+    font-family: ${props => props.theme.theme_vars.fontstack};
+    border-radius: ${props => props.theme.theme_vars.border_radius};
+    text-decoration: none;
+
+    &.button--primary {
+        color: white;
+        background-color: ${props => props.theme.theme_vars.colours.action};
+
+        &:hover {
+            background-color: ${props => props.theme.theme_vars.colours.action_dark};
+        }
+        &:focus {
+            outline: none;
+            color: ${props => props.theme.theme_vars.colours.black} !important;
+            background-color: ${props => props.theme.theme_vars.colours.focus};
+            box-shadow: 0px -3px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
+            -webkit-box-shadow: 0px -3px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
+            -moz-box-shadow: 0px -3px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
+        }
+        &:active {
+            transform: translateY(2px);
+            color: ${props => props.theme.theme_vars.colours.black} !important;
+            background-color: ${props => props.theme.theme_vars.colours.focus};
+            box-shadow: 0px -1px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
+            -webkit-box-shadow: 0px -1px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
+            -moz-box-shadow: 0px -1px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
+        }
+    }
+    &.button--secondary {
+        color: ${props => props.theme.theme_vars.colours.action};
+        background-color: transparent;
+        border: 2px solid ${props => props.theme.theme_vars.colours.action};
+
+        &:hover {
+            background-color: ${props => props.theme.theme_vars.colours.action}1A;
+        }
+        &:focus {
+            outline: none;
+            border: 2px solid ${props => props.theme.theme_vars.colours.focus};
+            background-color: ${props => props.theme.theme_vars.colours.action}1A;
+        }
+    }
+    &.button--small {
+        font-size: 12px;
+        padding: 10px 16px;
+    }
+    &.button--medium {
+        font-size: 14px;
+        padding: 11px 20px;
+    }
+    &.button--large {
+        font-size: 16px;
+        padding: 12px 24px;
+    }
+`;
+
+/**
+ * Primary UI component for user interaction
+ */
+var FormButton = function (_a) {
+    var _b = _a.primary, primary = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, text = _a.text; _a.type; _a.isDisabled; var props = __rest(_a, ["primary", "size", "text", "type", "isDisabled"]);
+    var mode = primary ? 'button--primary' : 'button--secondary';
+    return (React.createElement(StyledButton, __assign$2({ className: ["button--".concat(size), mode].join(' ') }, props), text));
+};
+
+const Container$15 = styled.div`
+  ${(props) => props.theme.fontStyles};
+`;
+
+const hideLabel$1 = (props) => {
+  if (props.hideLabel === true) {
+    return VisuallyHidden$3;
+  }
+};
+
+const Label$4 = styled.label`
+  display: block;
+  margin-bottom: 5px;
+  ${hideLabel$1}
+`;
+
+const Select = styled.select`
+  ${(props) => props.theme.fontStyles};
+  border-radius: ${(props) => props.theme.theme_vars.border_radius};
+  box-sizing: border-box;
+  max-width: 100%;
+  height: 40px;
+  height: 2.5rem;
+  padding: 5px;
+  border: 2px solid ${(props) => props.theme.theme_vars.colours.black};
+
+  &:focus {
+    outline: 2px transparent solid;
+    box-shadow: ${(props) => props.theme.theme_vars.colours.focus} 0 0 0 2px,
+      ${(props) => props.theme.theme_vars.colours.black} 0 0 0 4px;
+    transition: box-shadow 0.3s ease 0s;
+  }
+`;
+
+const Option = styled.option`
+  :active,
+  :checked,
+  :focus::-ms-value {
+    color: #fff;
+    background-color: #1d70b8;
+  }
+`;
+
+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),
+        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);
+        }))));
+};
+
+const H1 = styled.h1`
+    color: ${props => props.theme.theme_vars.colours.black};
+    margin-left: 0;
+    font-weight: 700;
+    font-family: ${props => props.theme.theme_vars.fontstack};
+    margin-bottom: 20px;
+
+    font-size: 32px;
+    font-size: 2rem;
+    line-height: 1.1;
+
+    @media screen and (min-width: ${props => props.theme.theme_vars.breakpoints.m}){
+        font-size: 44px;
+        font-size: 2.6rem;
+        max-width: 960px;
+        margin-bottom: 30px;
+    }
+`;
+const H2 = styled.h2`
+    color: ${props => props.theme.theme_vars.colours.black};
+    font-weight: 700;
+    line-height: 1;
+    font-family: ${props => props.theme.theme_vars.fontstack};
+    margin-top: 25px;
+    margin-bottom: 15px;
+
+    font-size: 24px;
+    font-size: 1.5rem;
+    line-height: 1.25;
+
+    @media screen and (min-width: ${props => props.theme.theme_vars.breakpoints.m}){
+        font-size: 36px;
+        font-size: 1.75rem;
+        max-width: 960px;
+    }
+`;
+const H3 = styled.h3`
+    color: ${props => props.theme.theme_vars.colours.black};
+    font-weight: 600;
+    line-height: 1;
+    font-family: ${props => props.theme.theme_vars.fontstack};
+    margin-top: 25px;
+    margin-bottom: 15px;
+
+    font-size: 24px;
+    font-size: 1.3rem;
+    line-height: 1.25;
+
+    @media screen and (min-width: ${props => props.theme.theme_vars.breakpoints.m}){
+        font-size: 36px;
+        font-size: 1.5rem;
+        max-width: 960px;
+    }
+`;
+const H4 = styled.h4`
+    color: ${props => props.theme.theme_vars.colours.black};
+    line-height: 1;
+    font-family: ${props => props.theme.theme_vars.fontstack};
+    margin-top: 25px;
+    margin-bottom: 15px;
+
+    font-weight: 600;
+    line-height: 1;
+    font-family: ${props => props.theme.theme_vars.fontstack};
+`;
+
+/**
+ * A heading of different levels
+ */
+var Heading = function (_a) {
+    var _b = _a.level, level = _b === void 0 ? 2 : _b, text = _a.text, props = __rest(_a, ["level", "text"]);
+    if (level === 1)
+        return React.createElement(H1, __assign$2({}, props), text);
+    if (level === 2)
+        return React.createElement(H2, __assign$2({}, props), text);
+    if (level === 3)
+        return React.createElement(H3, __assign$2({}, props), text);
+    if (level === 4)
+        return React.createElement(H4, __assign$2({}, props), text);
+    return null;
+};
+
+/**
+ * Returns the Bin Collection Checker form component to conduct search by postcode.
+ */
+var BinCollection = function (_a) {
+    var _b = _a.formError, formError = _b === void 0 ? false : _b, _c = _a.baseUrl, baseUrl = _c === void 0 ? process.env.NEXT_PUBLIC_DRUPAL_APP_API_BASE_URL : _c;
+    var BinCollectionApiUrl = "".concat(baseUrl, "bin-collection-search/premiselist/");
+    var CalendarEventsApiUrl = "".concat(baseUrl, "bin-collection-search/calendarevents/");
+    var themeContext = useContext(ThemeContext);
+    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(formError), isError = _e[0], setError = _e[1];
+    var _f = useState(''), errorText = _f[0], setErrorText = _f[1];
+    var _g = useState([]), addressOptions = _g[0], setAddressOptions = _g[1];
+    var handleSubmit = function (e) {
+        e.preventDefault();
+        var enteredPostcode = e.target.elements.postcode.value;
+        if (enteredPostcode === '') {
+            setError(true);
+            setErrorText('You need to enter a postcode');
+        }
+        else {
+            setIsLoading(true);
+            fetchAddresses(enteredPostcode);
+        }
+    };
+    /**
+     * Returns an array of address options based on the entered postcode.
+     */
+    var fetchAddresses = function (postcode) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setError(false);
+            setErrorText('');
+            setIsLoading(true);
+            axios.get("".concat(BinCollectionApiUrl).concat(postcode))
+                .then(function (response) {
+                setIsLoading(false);
+                // Check if there are any addresses returned
+                if (response.data.data.length === 0) {
+                    setError(true);
+                    setErrorText('No addresses found for the provided postcode.');
+                    return;
+                }
+                // Transform the response data into the expected format
+                var transformedAddresses = response.data.data.map(function (item) { return ({
+                    value: item.UPRN,
+                    title: "".concat(item.Address)
+                }); });
+                setAddressOptions(transformedAddresses);
+            })
+                .catch(function (error) {
+                setIsLoading(false);
+                setError(true);
+                console.error('API call error:', error);
+                setErrorText('Error fetching addresses');
+            });
+            return [2 /*return*/];
+        });
+    }); };
+    var getFormattedDate = function (daysToAdd) {
+        if (daysToAdd === void 0) { daysToAdd = 0; }
+        var date = new Date();
+        date.setDate(date.getDate() + daysToAdd);
+        return date.toISOString().split('T')[0];
+    };
+    var parseDate = function (dateString) {
+        var timestamp = parseInt(dateString.match(/\d+/)[0], 10);
+        return new Date(timestamp);
+    };
+    var groupByTitle = function (data) {
+        var currentDate = new Date();
+        return data.reduce(function (acc, item) {
+            var eventDate = parseDate(item.start);
+            if (eventDate >= currentDate) {
+                if (!acc[item.title]) {
+                    acc[item.title] = [];
+                }
+                acc[item.title].push(eventDate);
+            }
+            return acc;
+        }, {});
+    };
+    var _h = useState({}), calendarEvents = _h[0], setCalendarEvents = _h[1];
+    /**
+     * Returns an array of calendar events based on selected address for next 42 days.
+     */
+    var handleAddressChange = function (e) {
+        var selectedUPRN = e.target.value;
+        if (selectedUPRN) {
+            var startDate = getFormattedDate();
+            var endDate = getFormattedDate(42);
+            // Fetch calendar events for the selected UPRN
+            axios.get("".concat(CalendarEventsApiUrl).concat(selectedUPRN, "/").concat(startDate, "/").concat(endDate))
+                .then(function (response) {
+                var groupedData = groupByTitle(response.data);
+                setCalendarEvents(groupedData);
+            })
+                .catch(function (error) {
+                console.error('API call error:', error);
+            });
+        }
+    };
+    var resetForm = function () {
+        setAddressOptions([]);
+        setCalendarEvents({});
+        setError(false);
+        setErrorText('');
+    };
+    var formatTitle = function (apiTitle) {
+        var mappings = [
+            { keyword: 'Bin Refuse bin', replacement: 'Refuse bin' },
+            { keyword: 'Bin Recycling', replacement: 'Recycling bin' },
+            { keyword: 'Recycling Paper Box', replacement: 'Recycling Paper Box bin' },
+            { keyword: 'Garden', replacement: 'Garden bin' }
+        ];
+        for (var _i = 0, mappings_1 = mappings; _i < mappings_1.length; _i++) {
+            var mapping = mappings_1[_i];
+            if (apiTitle.includes(mapping.keyword)) {
+                return mapping.replacement;
+            }
+        }
+        return apiTitle;
+    };
+    return (React.createElement(Container$17, { "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" }),
+                React.createElement(ErrorTextWrapper, null, errorText && React.createElement(ErrorText$1, null, errorText)),
+                React.createElement(FormInnerContainer, null,
+                    React.createElement(Input$6, { type: "text", placeholder: "Enter a postcode", name: "postcode", isErrored: isError, maxLength: 10 }),
+                    React.createElement(BinCollectionButtonStyles, null,
+                        React.createElement(FormButton, { size: "large", type: "submit", "aria-label": "Submit", text: "Find" }))))),
+        addressOptions.length > 0 && (React.createElement(DropDownSelectContainer, null,
+            React.createElement(DropDownSelect, { onChange: handleAddressChange, id: "address", label: "Select your address", options: __spreadArray([{ title: 'Select an address', value: '' }], addressOptions, true) }))),
+        React.createElement("div", null, Object.entries(calendarEvents).map(function (_a) {
+            var apiTitle = _a[0], dates = _a[1];
+            var title = formatTitle(apiTitle);
+            return (React.createElement(React.Fragment, { key: title },
+                React.createElement(UPRNPageTitleRow, null,
+                    React.createElement(UPRNPageSectionTitle, null, title)),
+                dates
+                    .sort(function (a, b) { return new Date(a).getTime() - new Date(b).getTime(); })
+                    .map(function (date) { return (React.createElement(UPRNPageUPRNRow, { key: "".concat(title, "-").concat(date.toString()) },
+                    React.createElement(UPRNPageUPRNTitle, null, date.toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })))); })));
+        })),
+        Object.keys(calendarEvents).length > 0 && (React.createElement(FormButton, { size: "small", type: "button", "aria-label": "Reset", text: "Find a different address", onClick: resetForm }))));
+};
+
 const Icon$4 = styled.span`
   vertical-align: middle;
   width: 100%;
@@ -5873,88 +6301,6 @@ var DynamicIcon = function (_a) {
             React.createElement(DynamicComponent, { name: icon, isHover: true }))))));
 };
 
-const H1 = styled.h1`
-    color: ${props => props.theme.theme_vars.colours.black};
-    margin-left: 0;
-    font-weight: 700;
-    font-family: ${props => props.theme.theme_vars.fontstack};
-    margin-bottom: 20px;
-
-    font-size: 32px;
-    font-size: 2rem;
-    line-height: 1.1;
-
-    @media screen and (min-width: ${props => props.theme.theme_vars.breakpoints.m}){
-        font-size: 44px;
-        font-size: 2.6rem;
-        max-width: 960px;
-        margin-bottom: 30px;
-    }
-`;
-const H2 = styled.h2`
-    color: ${props => props.theme.theme_vars.colours.black};
-    font-weight: 700;
-    line-height: 1;
-    font-family: ${props => props.theme.theme_vars.fontstack};
-    margin-top: 25px;
-    margin-bottom: 15px;
-
-    font-size: 24px;
-    font-size: 1.5rem;
-    line-height: 1.25;
-
-    @media screen and (min-width: ${props => props.theme.theme_vars.breakpoints.m}){
-        font-size: 36px;
-        font-size: 1.75rem;
-        max-width: 960px;
-    }
-`;
-const H3 = styled.h3`
-    color: ${props => props.theme.theme_vars.colours.black};
-    font-weight: 600;
-    line-height: 1;
-    font-family: ${props => props.theme.theme_vars.fontstack};
-    margin-top: 25px;
-    margin-bottom: 15px;
-
-    font-size: 24px;
-    font-size: 1.3rem;
-    line-height: 1.25;
-
-    @media screen and (min-width: ${props => props.theme.theme_vars.breakpoints.m}){
-        font-size: 36px;
-        font-size: 1.5rem;
-        max-width: 960px;
-    }
-`;
-const H4 = styled.h4`
-    color: ${props => props.theme.theme_vars.colours.black};
-    line-height: 1;
-    font-family: ${props => props.theme.theme_vars.fontstack};
-    margin-top: 25px;
-    margin-bottom: 15px;
-
-    font-weight: 600;
-    line-height: 1;
-    font-family: ${props => props.theme.theme_vars.fontstack};
-`;
-
-/**
- * A heading of different levels
- */
-var Heading = function (_a) {
-    var _b = _a.level, level = _b === void 0 ? 2 : _b, text = _a.text, props = __rest(_a, ["level", "text"]);
-    if (level === 1)
-        return React.createElement(H1, __assign$2({}, props), text);
-    if (level === 2)
-        return React.createElement(H2, __assign$2({}, props), text);
-    if (level === 3)
-        return React.createElement(H3, __assign$2({}, props), text);
-    if (level === 4)
-        return React.createElement(H4, __assign$2({}, props), text);
-    return null;
-};
-
 const HeadingWrapper = styled.div`
   display: flex;
   -webkit-flex-direction: row;
@@ -6002,7 +6348,7 @@ var HeadingWithIcon = function (_a) {
         React.createElement(Heading, { text: text, level: level })));
 };
 
-const Container$16 = styled.div`
+const Container$14 = styled.div`
   display: flex;
   width: 100%;
   min-height: 400px;
@@ -6026,7 +6372,7 @@ var Map$1 = function (_a) {
             setMap(new window.google.maps.Map(ref.current, { center: center, zoom: zoom }));
         }
     }, [ref, map]);
-    return (React.createElement(Container$16, { "data-testid": "Map" },
+    return (React.createElement(Container$14, { "data-testid": "Map" },
         React.createElement("div", { ref: ref }),
         React.Children.map(children, function (child) {
             if (React.isValidElement(child)) {
@@ -6083,7 +6429,7 @@ var MapMarker = function (options) {
     return null;
 };
 
-const Container$15 = styled.div`
+const Container$13 = styled.div`
   ${(props) => props.theme.fontStyles};
   display: block;
   border-top: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
@@ -6860,7 +7206,7 @@ var Pagination = function (_a) {
         }
     };
     if (numbers.length > 1) {
-        return (React.createElement(Container$15, { "data-testid": "Pagination", role: "navigation", "aria-label": "Pagination" },
+        return (React.createElement(Container$13, { "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, "..."),
@@ -6872,7 +7218,7 @@ var Pagination = function (_a) {
     return null;
 };
 
-const Container$14 = styled.div`
+const Container$12 = styled.div`
   ${(props) => props.theme.fontStyles};
   margin-bottom: 30px;
 `;
@@ -6890,7 +7236,7 @@ const Fieldset$2 = styled.fieldset`
   }
 `;
 
-const hideLabel$1 = (props) => {
+const hideLabel = (props) => {
   if (props.labelHidden) {
     return VisuallyHidden$3;
   }
@@ -6905,7 +7251,7 @@ const Legend$2 = styled.legend`
   margin-bottom: 10px;
   padding: 0;
   white-space: normal;
-  ${hideLabel$1}
+  ${hideLabel}
 `;
 
 const hideHint = (props) => {
@@ -7043,7 +7389,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$14, { "data-testid": "CheckboxListFilter" },
+    return (React.createElement(Container$12, { "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),
@@ -7052,58 +7398,6 @@ var CheckboxListFilter = function (_a) {
                 React.createElement(CheckboxLabel, { isChecked: option.checked, htmlFor: option.value }, option.title))); })))));
 };
 
-const Container$13 = styled.div`
-  ${(props) => props.theme.fontStyles};
-`;
-
-const hideLabel = (props) => {
-  if (props.hideLabel === true) {
-    return VisuallyHidden$3;
-  }
-};
-
-const Label$4 = styled.label`
-  display: block;
-  margin-bottom: 5px;
-  ${hideLabel}
-`;
-
-const Select = styled.select`
-  ${(props) => props.theme.fontStyles};
-  border-radius: ${(props) => props.theme.theme_vars.border_radius};
-  box-sizing: border-box;
-  max-width: 100%;
-  height: 40px;
-  height: 2.5rem;
-  padding: 5px;
-  border: 2px solid ${(props) => props.theme.theme_vars.colours.black};
-
-  &:focus {
-    outline: 2px transparent solid;
-    box-shadow: ${(props) => props.theme.theme_vars.colours.focus} 0 0 0 2px,
-      ${(props) => props.theme.theme_vars.colours.black} 0 0 0 4px;
-    transition: box-shadow 0.3s ease 0s;
-  }
-`;
-
-const Option = styled.option`
-  :active,
-  :checked,
-  :focus::-ms-value {
-    color: #fff;
-    background-color: #1d70b8;
-  }
-`;
-
-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$13, null,
-        React.createElement(Label$4, { 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);
-        }))));
-};
-
 var DropDownFilter = function (_a) {
     var id = _a.id, label = _a.label, options = _a.options, selected = _a.selected, _b = _a.hideLabel, hideLabel = _b === void 0 ? false : _b;
     var _c = useState(selected), value = _c[0], setValue = _c[1];
@@ -7214,7 +7508,7 @@ const PromotedLink$1 = styled.a`
   ${oneColStyles}
 `;
 
-const Container$12 = styled.div`
+const Container$11 = styled.div`
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
@@ -7237,7 +7531,7 @@ const Container$12 = 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$12, { "data-testid": "Row", hasBorder: hasBorder, hasWrap: hasWrap, as: isList ? 'ul' : 'div' }, children));
+    return (React.createElement(Container$11, { "data-testid": "Row", hasBorder: hasBorder, hasWrap: hasWrap, as: isList ? 'ul' : 'div' }, children));
 };
 
 const calculateWidth = (size) => {
@@ -7287,7 +7581,7 @@ const widths = (props) => {
   `;
 };
 
-const Container$11 = styled.div`
+const Container$10 = styled.div`
   box-sizing: border-box;
   display: block;
   padding: ${(props) => (props.hasPadding ? props.theme.theme_vars.spacingSizes.small : `0`)};
@@ -7298,7 +7592,7 @@ const Container$11 = 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$11, { "data-testid": "Column", small: small, medium: medium, large: large, hasPadding: hasPadding, hasBorder: hasBorder, as: isList ? 'li' : 'div', className: classes }, 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));
 };
 
 var PromotedLinks = function (_a) {
@@ -7314,7 +7608,7 @@ var PromotedLinks = function (_a) {
     }
 };
 
-const Container$10 = styled.div`
+const Container$$ = styled.div`
   display: block;
 `;
 
@@ -7343,7 +7637,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$10, { "data-testid": "StaticMap" },
+    return (React.createElement(Container$$, { "data-testid": "StaticMap" },
         React.createElement(Message, null,
             React.createElement("span", null, "To interact with the map, you need to accept cookies.")),
         React.createElement(MapImage, { src: "https://maps.googleapis.com/maps/api/staticmap?center=".concat(centre, "&size=").concat(size, "&zoom=").concat(zoom, "&maptype=").concat(mapType).concat(markerPath, "&key=").concat(apiKey), alt: imageAltText })));
@@ -7361,7 +7655,7 @@ var TextInput = function (_a) {
 
 // Accordion
 
-const Container$$ = styled.div`
+const Container$_ = styled.div`
   ${(props) => props.theme.fontStyles}
   margin-bottom: 20px;
   border-bottom: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
@@ -7655,7 +7949,7 @@ var Accordion$1 = function (_a) {
         setAccordionStates(newStatus);
     };
     var accordionId = "accordion".concat(uniqueID());
-    return (React.createElement(Container$$, { "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',
@@ -7706,7 +8000,7 @@ var BlockQuote = function (_a) {
         citation && React.createElement(Citation, null, citation)));
 };
 
-const Container$_ = styled.div`
+const Container$Z = styled.div`
     margin-bottom: 30px;
     display: block;
 
@@ -7721,11 +8015,11 @@ const Container$_ = 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$_, 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$Z = styled.div`
+const Container$Y = styled.div`
   display: block;
   ${(props) => props.theme.fontStyles}
 `;
@@ -7901,7 +8195,7 @@ var CouncilTaxAlphabeticalDirectory = function (_a) {
         });
         return letterData;
     });
-    return (React.createElement(Container$Z, { "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 },
@@ -7927,9 +8221,9 @@ var CouncilTaxAlphabeticalDirectory = function (_a) {
                             React.createElement("td", null, Number(parish.values[band]).toLocaleString('en-GB', { style: 'currency', currency: 'GBP' })))); })))))))));
 };
 
-const Container$Y = styled.div``;
+const Container$X = styled.div``;
 
-const Container$X = styled.div`
+const Container$W = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -13010,10 +13304,10 @@ let pico$1 = picocolors.exports;
 
 let tokenizer$1 = tokenize;
 
-let Input$6;
+let Input$5;
 
 function registerInput(dependant) {
-  Input$6 = dependant;
+  Input$5 = dependant;
 }
 
 const HIGHLIGHT_THEME = {
@@ -13054,7 +13348,7 @@ function getTokenType([type, value], processor) {
 }
 
 function terminalHighlight$2(css) {
-  let processor = tokenizer$1(new Input$6(css), { ignoreErrors: true });
+  let processor = tokenizer$1(new Input$5(css), { ignoreErrors: true });
   let result = '';
   while (!processor.endOfFile()) {
     let token = processor.nextToken();
@@ -17441,7 +17735,7 @@ let fromOffsetCache = Symbol('fromOffsetCache');
 let sourceMapAvailable$1 = Boolean(SourceMapConsumer$1 && SourceMapGenerator$1);
 let pathAvailable$1 = Boolean(resolve$1 && isAbsolute);
 
-class Input$5 {
+class Input$4 {
   constructor(css, opts = {}) {
     if (
       css === null ||
@@ -17667,18 +17961,18 @@ class Input$5 {
   }
 }
 
-var input = Input$5;
-Input$5.default = Input$5;
+var input = Input$4;
+Input$4.default = Input$4;
 
 if (terminalHighlight && terminalHighlight.registerInput) {
-  terminalHighlight.registerInput(Input$5);
+  terminalHighlight.registerInput(Input$4);
 }
 
 let { SourceMapConsumer, SourceMapGenerator } = sourceMap;
 let { dirname, resolve, relative, sep } = require$$2;
 let { pathToFileURL } = require$$1$1;
 
-let Input$4 = input;
+let Input$3 = input;
 
 let sourceMapAvailable = Boolean(SourceMapConsumer && SourceMapGenerator);
 let pathAvailable = Boolean(dirname && resolve && relative && sep);
@@ -17713,7 +18007,7 @@ class MapGenerator$2 {
           }
         });
       } else {
-        let input = new Input$4(this.css, this.opts);
+        let input = new Input$3(this.css, this.opts);
         if (input.map) this.previousMaps.push(input.map);
       }
     }
@@ -18047,7 +18341,7 @@ function markDirtyUp(node) {
   }
 }
 
-class Container$W extends Node$1 {
+class Container$V extends Node$1 {
   push(child) {
     child.parent = this;
     this.proxyOf.nodes.push(child);
@@ -18340,7 +18634,7 @@ class Container$W extends Node$1 {
 
     let processed = nodes.map(i => {
       /* c8 ignore next */
-      if (!i[my$1]) Container$W.rebuild(i);
+      if (!i[my$1]) Container$V.rebuild(i);
       i = i.proxyOf;
       if (i.parent) i.parent.removeChild(i);
       if (i[isClean$1]) markDirtyUp(i);
@@ -18418,27 +18712,27 @@ class Container$W extends Node$1 {
   }
 }
 
-Container$W.registerParse = dependant => {
+Container$V.registerParse = dependant => {
   parse$4 = dependant;
 };
 
-Container$W.registerRule = dependant => {
+Container$V.registerRule = dependant => {
   Rule$4 = dependant;
 };
 
-Container$W.registerAtRule = dependant => {
+Container$V.registerAtRule = dependant => {
   AtRule$4 = dependant;
 };
 
-Container$W.registerRoot = dependant => {
+Container$V.registerRoot = dependant => {
   Root$6 = dependant;
 };
 
-var container = Container$W;
-Container$W.default = Container$W;
+var container = Container$V;
+Container$V.default = Container$V;
 
 /* c8 ignore start */
-Container$W.rebuild = node => {
+Container$V.rebuild = node => {
   if (node.type === 'atrule') {
     Object.setPrototypeOf(node, AtRule$4.prototype);
   } else if (node.type === 'rule') {
@@ -18455,16 +18749,16 @@ Container$W.rebuild = node => {
 
   if (node.nodes) {
     node.nodes.forEach(child => {
-      Container$W.rebuild(child);
+      Container$V.rebuild(child);
     });
   }
 };
 
-let Container$V = container;
+let Container$U = container;
 
 let LazyResult$4, Processor$3;
 
-class Document$3 extends Container$V {
+class Document$3 extends Container$U {
   constructor(defaults) {
     // type needs to be passed to super, otherwise child roots won't be normalized correctly
     super({ type: 'document', ...defaults });
@@ -18582,9 +18876,9 @@ class Result$4 {
 var result = Result$4;
 Result$4.default = Result$4;
 
-let Container$U = container;
+let Container$T = container;
 
-class AtRule$3 extends Container$U {
+class AtRule$3 extends Container$T {
   constructor(defaults) {
     super(defaults);
     this.type = 'atrule';
@@ -18604,13 +18898,13 @@ class AtRule$3 extends Container$U {
 var atRule = AtRule$3;
 AtRule$3.default = AtRule$3;
 
-Container$U.registerAtRule(AtRule$3);
+Container$T.registerAtRule(AtRule$3);
 
-let Container$T = container;
+let Container$S = container;
 
 let LazyResult$3, Processor$2;
 
-class Root$5 extends Container$T {
+class Root$5 extends Container$S {
   constructor(defaults) {
     super(defaults);
     this.type = 'root';
@@ -18664,7 +18958,7 @@ Root$5.registerProcessor = dependant => {
 var root = Root$5;
 Root$5.default = Root$5;
 
-Container$T.registerRoot(Root$5);
+Container$S.registerRoot(Root$5);
 
 let list$2 = {
   split(string, separators, last) {
@@ -18723,10 +19017,10 @@ let list$2 = {
 var list_1 = list$2;
 list$2.default = list$2;
 
-let Container$S = container;
+let Container$R = container;
 let list$1 = list_1;
 
-class Rule$3 extends Container$S {
+class Rule$3 extends Container$R {
   constructor(defaults) {
     super(defaults);
     this.type = 'rule';
@@ -18747,7 +19041,7 @@ class Rule$3 extends Container$S {
 var rule = Rule$3;
 Rule$3.default = Rule$3;
 
-Container$S.registerRule(Rule$3);
+Container$R.registerRule(Rule$3);
 
 let Declaration$2 = declaration;
 let tokenizer = tokenize;
@@ -19351,12 +19645,12 @@ class Parser$1 {
 
 var parser = Parser$1;
 
-let Container$R = container;
+let Container$Q = container;
 let Parser = parser;
-let Input$3 = input;
+let Input$2 = input;
 
 function parse$3(css, opts) {
-  let input = new Input$3(css, opts);
+  let input = new Input$2(css, opts);
   let parser = new Parser(input);
   try {
     parser.parse();
@@ -19390,12 +19684,12 @@ function parse$3(css, opts) {
 var parse_1 = parse$3;
 parse$3.default = parse$3;
 
-Container$R.registerParse(parse$3);
+Container$Q.registerParse(parse$3);
 
 let { isClean, my } = symbols;
 let MapGenerator$1 = mapGenerator;
 let stringify$2 = stringify_1;
-let Container$Q = container;
+let Container$P = container;
 let Document$2 = document$1;
 let warnOnce$1 = warnOnce$2;
 let Result$3 = result;
@@ -19530,7 +19824,7 @@ class LazyResult$2 {
 
       if (root && !root[my]) {
         /* c8 ignore next 2 */
-        Container$Q.rebuild(root);
+        Container$P.rebuild(root);
       }
     }
 
@@ -20145,7 +20439,7 @@ let Declaration$1 = declaration;
 let PreviousMap = previousMap;
 let Comment$1 = comment;
 let AtRule$1 = atRule;
-let Input$2 = input;
+let Input$1 = input;
 let Root$1 = root;
 let Rule$1 = rule;
 
@@ -20156,7 +20450,7 @@ function fromJSON$1(json, inputs) {
   if (ownInputs) {
     inputs = [];
     for (let input of ownInputs) {
-      let inputHydrated = { ...input, __proto__: Input$2.prototype };
+      let inputHydrated = { ...input, __proto__: Input$1.prototype };
       if (inputHydrated.map) {
         inputHydrated.map = {
           ...inputHydrated.map,
@@ -20197,7 +20491,7 @@ fromJSON$1.default = fromJSON$1;
 let CssSyntaxError = cssSyntaxError;
 let Declaration = declaration;
 let LazyResult = lazyResult;
-let Container$P = container;
+let Container$O = container;
 let Processor = processor;
 let stringify = stringify_1;
 let fromJSON = fromJSON_1;
@@ -20206,7 +20500,7 @@ let Warning = warning;
 let Comment = comment;
 let AtRule = atRule;
 let Result$1 = result;
-let Input$1 = input;
+let Input = input;
 let parse = parse_1;
 let list = list_1;
 let Rule = rule;
@@ -20277,14 +20571,14 @@ postcss.document = defaults => new Document(defaults);
 
 postcss.CssSyntaxError = CssSyntaxError;
 postcss.Declaration = Declaration;
-postcss.Container = Container$P;
+postcss.Container = Container$O;
 postcss.Processor = Processor;
 postcss.Document = Document;
 postcss.Comment = Comment;
 postcss.Warning = Warning;
 postcss.AtRule = AtRule;
 postcss.Result = Result$1;
-postcss.Input = Input$1;
+postcss.Input = Input;
 postcss.Rule = Rule;
 postcss.Root = Root;
 postcss.Node = Node;
@@ -21146,7 +21440,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$X, { "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,
@@ -21162,12 +21456,12 @@ var Card = function (_a) {
  */
 var Cards = function (_a) {
     var cards = _a.cards;
-    return (React.createElement(Container$Y, { "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$O = styled.div`
+const Container$N = styled.div`
   margin: 25px 0;
 `;
 
@@ -21285,7 +21579,7 @@ var FileDownload = function (_a) {
 
 var DownloadableFiles = function (_a) {
     var files = _a.files;
-    return (React.createElement(Container$O, { "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")));
@@ -21421,7 +21715,7 @@ const wereCookiesAccepted = (cookiesAcceptedOverride) => {
   return false;
 };
 
-const Container$N = styled.div`
+const Container$M = styled.div`
   border: solid 4px;
   border-radius: ${(props) => props.theme.theme_vars.border_radius};
   border-color: ${(props) =>
@@ -21475,7 +21769,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$N, { 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)));
@@ -21522,7 +21816,7 @@ var GoogleMap = function (_a) {
             React.createElement(MapLink$1, { href: link_url }, link_title ? link_title : 'Google Maps link')))));
 };
 
-const Container$M = styled.figure`
+const Container$L = styled.figure`
   display: block;
   background: ${(props) =>
     props.theme.cardinal_name === 'north'
@@ -22185,7 +22479,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$M, { "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,
@@ -22193,7 +22487,7 @@ var Image$2 = function (_a) {
         (caption === null || caption === void 0 ? void 0 : caption.trim()) && React.createElement(Caption, null, caption)));
 };
 
-const Container$L = styled.div`
+const Container$K = styled.div`
   display: block;
 `;
 
@@ -22214,7 +22508,7 @@ const Content$5 = styled.div`
  */
 var ImageAndText = function (_a) {
     var heading = _a.heading, textContent = _a.textContent, image = _a.image;
-    return (React.createElement(Container$L, { "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,
@@ -22227,7 +22521,7 @@ var ImageAndText = function (_a) {
                 React.createElement(Content$5, { dangerouslySetInnerHTML: { __html: sanitizeHtml$1(textContent) } }))))));
 };
 
-const Container$K = styled.div`
+const Container$J = styled.div`
   display: block;
 `;
 
@@ -22236,7 +22530,7 @@ const Container$K = 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$K, { "data-testid": "InquestSchedule" },
+    return (React.createElement(Container$J, { "data-testid": "InquestSchedule" },
         React.createElement("div", { className: "table-container" },
             React.createElement("table", null,
                 React.createElement("caption", null, title),
@@ -22264,7 +22558,7 @@ var InquestSchedule = function (_a) {
                             error ? (React.createElement("p", null, " The information is currently unavailable.")) : (React.createElement("p", null, "There are no inquests scheduled for next month."))))))))));
 };
 
-const Container$J = styled.div`
+const Container$I = styled.div`
   ${(props) => props.theme.fontStyles};
   overflow: hidden;
   margin: 40px auto 5px auto;
@@ -22344,7 +22638,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$J, 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 }); }),
@@ -22555,7 +22849,7 @@ var Promotions = function (_a) {
         numberOfPromos > 1 && React.createElement(PromoBlock, { promos: promos.slice(1, numberOfPromos) })));
 };
 
-const Container$I = styled.div`
+const Container$H = styled.div`
   padding: 0;
   margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
   ${(props) => props.theme.fontStyles}
@@ -22605,7 +22899,7 @@ const Inner = styled.div`
   }
 `;
 
-const Container$H = styled.div`
+const Container$G = styled.div`
   display: block;
 
   input[type='text'] {
@@ -22673,28 +22967,17 @@ 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;
-    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 })) : (React.createElement(StyledInput, { onChange: onChange, type: type, placeholder: placeholder, name: name, isErrored: isErrored, maxLength: maxLength, defaultValue: defaultValue, id: id }))));
-};
-
 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) {
         id = useId();
     }
-    return (React.createElement(Container$H, { "data-testid": "CustomSearch" },
+    return (React.createElement(Container$G, { "data-testid": "CustomSearch" },
         React.createElement("form", { method: method, action: path, "aria-label": label },
             React.createElement("div", { role: "search" },
                 React.createElement(Label$3, { htmlFor: id, hasHiddenLabel: hasHiddenLabel }, label),
                 React.createElement(InputWrapper$1, null,
-                    React.createElement(Input, { name: fieldName, placeholder: placeholder, id: id }),
+                    React.createElement(Input$6, { name: fieldName, placeholder: placeholder, id: id }),
                     React.createElement(SubmitButton, { type: "submit", value: searchText }))))));
 };
 
@@ -22712,8 +22995,8 @@ var SearchBox = function (_a) {
     return (React.createElement(React.Fragment, null, imageLarge && imageSmall ? (React.createElement(React.Fragment, null,
         React.createElement(LazyImage, { src: imageLarge, placeholder: imageSmall, visibilitySensorProps: {
                 partialVisibility: true,
-            } }, function (src) { return (React.createElement(Container$I, { image: src, "data-testid": "SearchBox" }, searchInner)); }),
-        imageAltText && React.createElement("span", { role: "img", "aria-label": imageAltText }))) : (React.createElement(Container$I, { "data-testid": "SearchBox" }, searchInner))));
+            } }, function (src) { return (React.createElement(Container$H, { image: src, "data-testid": "SearchBox" }, searchInner)); }),
+        imageAltText && React.createElement("span", { role: "img", "aria-label": imageAltText }))) : (React.createElement(Container$H, { "data-testid": "SearchBox" }, searchInner))));
 };
 
 var VideoProvider;
@@ -22903,7 +23186,7 @@ var AccessibleLink = function (_a) {
     })));
 };
 
-const Container$G = styled.div`
+const Container$F = styled.div`
   padding: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
   background: ${(props) =>
     props.alertType === 'alert'
@@ -23034,7 +23317,7 @@ const handleContainerPadding = (noBackground, noPadding) => {
   }
 };
 
-const Container$F = styled.div`
+const Container$E = styled.div`
   background: ${(props) =>
     props.noBackground
       ? 'transparent'
@@ -23076,7 +23359,7 @@ const MaxWidth = styled.div`
  */
 var MaxWidthContainer = function (_a) {
     var children = _a.children, classes = _a.classes, _b = _a.noBackground, noBackground = _b === void 0 ? false : _b, _c = _a.noPadding, noPadding = _c === void 0 ? false : _c, _d = _a.overflowVisible, overflowVisible = _d === void 0 ? false : _d, props = __rest(_a, ["children", "classes", "noBackground", "noPadding", "overflowVisible"]);
-    return (React.createElement(Container$F, { noBackground: noBackground, noPadding: noPadding },
+    return (React.createElement(Container$E, { noBackground: noBackground, noPadding: noPadding },
         React.createElement(MaxWidth, __assign$2({ className: classes, overflowVisible: overflowVisible }, props), children)));
 };
 
@@ -23147,7 +23430,7 @@ var AlertBanner = function (_a) {
         setShowAlert(false);
     };
     return (showAlert &&
-        notServer && (React.createElement(Container$G, { alertType: alertType, "data-testid": "AlertBanner" },
+        notServer && (React.createElement(Container$F, { alertType: alertType, "data-testid": "AlertBanner" },
         React.createElement(MaxWidthContainer, { noBackground: true },
             React.createElement(InnerContainer$1, null,
                 React.createElement(BannerContentContainer, null,
@@ -23161,7 +23444,7 @@ var AlertBanner = function (_a) {
                     "Dismiss"))))));
 };
 
-const Container$E = styled.a`
+const Container$D = styled.a`
 
 
 
@@ -23219,10 +23502,10 @@ const Container$E = styled.a`
 
 var BackLink = function (_a) {
     var link = _a.link;
-    return (React.createElement(Container$E, { href: link, "data-testid": "BackLink" }, "Back"));
+    return (React.createElement(Container$D, { href: link, "data-testid": "BackLink" }, "Back"));
 };
 
-const Container$D = styled.div`
+const Container$C = styled.div`
   padding-top: 20px;
   border-bottom: 1px solid ${(props) => props.theme.theme_vars.colours.grey}80;
   margin-bottom: ${(props) => (props.hasMargin ? props.theme.theme_vars.spacingSizes.large : 0)};
@@ -23289,14 +23572,14 @@ const BreadcrumbLink$1 = styled.a`
 
 var Breadcrumbs = function (_a) {
     var breadcrumbsArray = _a.breadcrumbsArray, _b = _a.hasMargin, hasMargin = _b === void 0 ? false : _b;
-    return (React.createElement(Container$D, { hasMargin: hasMargin, "data-testid": "Breadcrumbs" },
+    return (React.createElement(Container$C, { hasMargin: hasMargin, "data-testid": "Breadcrumbs" },
         React.createElement(List$2, null, breadcrumbsArray.map(function (crumb) { return (React.createElement(Crumb, { key: crumb.title }, React.createElement(React.Fragment, null,
             React.createElement(BreadcrumbLink$1, { href: crumb.url, title: crumb.title }, crumb.title),
             React.createElement(IconWrapper$4, null,
                 React.createElement(ChevronIcon, { direction: 'right', colourFill: "#C6C6C6" }))))); }))));
 };
 
-const Container$C = styled.div`
+const Container$B = styled.div`
   display: block;
   margin-bottom: ${(props) => props.theme.theme_vars.spacingSizes.large};
   padding-bottom: ${(props) => props.theme.theme_vars.spacingSizes.large};
@@ -23344,12 +23627,12 @@ const CurrentPage = styled.span`
 
 var Contents$1 = function (_a) {
     var contents = _a.contents, _b = _a.currentPath, currentPath = _b === void 0 ? undefined : _b, _c = _a.title, title = _c === void 0 ? 'Contents' : _c;
-    return (React.createElement(Container$C, { "data-testid": "Contents" },
+    return (React.createElement(Container$B, { "data-testid": "Contents" },
         React.createElement(Heading, { text: title, level: 2 }),
         React.createElement(List$1, null, contents.map(function (content, index) { return (React.createElement(ListItem$1, { key: index }, content.url === currentPath ? (React.createElement(CurrentPage, null, content.title)) : (React.createElement(Link$2, { href: content.url, active: content.url === currentPath }, content.title)))); }))));
 };
 
-const Container$B = styled.div`
+const Container$A = styled.div`
   display: block;
   border-top: 1px solid ${(props) => props.theme.theme_vars.colours.grey}80;
   margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
@@ -23399,7 +23682,7 @@ var ContentsNavigation = function (_a) {
     };
     var nextPage = currentPage() < contents.length - 1 ? contents[currentPage() + 1] : undefined;
     var previousPage = currentPage() !== 0 ? contents[currentPage() - 1] : undefined;
-    return (React.createElement(Container$B, { "data-testid": "ContentsNavigation" },
+    return (React.createElement(Container$A, { "data-testid": "ContentsNavigation" },
         previousPage && (React.createElement(NavigationLink, { href: previousPage.url },
             React.createElement(Arrow, null, "\u2190"),
             React.createElement(LinkText, null,
@@ -23414,7 +23697,7 @@ var ContentsNavigation = function (_a) {
                 React.createElement(PageTitle$1, null, nextPage.title))))));
 };
 
-const Container$A = styled.div`
+const Container$z = 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;
@@ -23525,77 +23808,6 @@ const ButtonsContainer = styled.div`
   }
 `;
 
-const StyledButton = styled.button`
-    font-weight: 700;
-    border: none;
-    cursor: pointer;
-    display: inline-block;
-    line-height: 1;
-    font-family: ${props => props.theme.theme_vars.fontstack};
-    border-radius: ${props => props.theme.theme_vars.border_radius};
-    text-decoration: none;
-
-    &.button--primary {
-        color: white;
-        background-color: ${props => props.theme.theme_vars.colours.action};
-
-        &:hover {
-            background-color: ${props => props.theme.theme_vars.colours.action_dark};
-        }
-        &:focus {
-            outline: none;
-            color: ${props => props.theme.theme_vars.colours.black} !important;
-            background-color: ${props => props.theme.theme_vars.colours.focus};
-            box-shadow: 0px -3px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
-            -webkit-box-shadow: 0px -3px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
-            -moz-box-shadow: 0px -3px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
-        }
-        &:active {
-            transform: translateY(2px);
-            color: ${props => props.theme.theme_vars.colours.black} !important;
-            background-color: ${props => props.theme.theme_vars.colours.focus};
-            box-shadow: 0px -1px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
-            -webkit-box-shadow: 0px -1px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
-            -moz-box-shadow: 0px -1px 0px 0px ${props => props.theme.theme_vars.colours.black} inset;
-        }
-    }
-    &.button--secondary {
-        color: ${props => props.theme.theme_vars.colours.action};
-        background-color: transparent;
-        border: 2px solid ${props => props.theme.theme_vars.colours.action};
-
-        &:hover {
-            background-color: ${props => props.theme.theme_vars.colours.action}1A;
-        }
-        &:focus {
-            outline: none;
-            border: 2px solid ${props => props.theme.theme_vars.colours.focus};
-            background-color: ${props => props.theme.theme_vars.colours.action}1A;
-        }
-    }
-    &.button--small {
-        font-size: 12px;
-        padding: 10px 16px;
-    }
-    &.button--medium {
-        font-size: 14px;
-        padding: 11px 20px;
-    }
-    &.button--large {
-        font-size: 16px;
-        padding: 12px 24px;
-    }
-`;
-
-/**
- * Primary UI component for user interaction
- */
-var FormButton = function (_a) {
-    var _b = _a.primary, primary = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, text = _a.text; _a.type; _a.isDisabled; var props = __rest(_a, ["primary", "size", "text", "type", "isDisabled"]);
-    var mode = primary ? 'button--primary' : 'button--secondary';
-    return (React.createElement(StyledButton, __assign$2({ className: ["button--".concat(size), mode].join(' ') }, props), text));
-};
-
 var dayjs_min = {exports: {}};
 
 (function (module, exports) {
@@ -23707,18 +23919,18 @@ var CookieBanner = function (_a) {
         hideCookiesAcceptedConfirmationBanner();
     };
     return (React.createElement(React.Fragment, null,
-        showCookieBanner && (React.createElement(Container$A, { "data-testid": "CookieBanner" },
+        showCookieBanner && (React.createElement(Container$z, { "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 }),
                     React.createElement(FormButton, { primary: true, text: rejectButtonText, isDisabled: true, onClick: rejectCookies }))))),
-        showCookiesRejectedBanner && (React.createElement(Container$A, { "data-testid": "CookieBannerRejected", id: "CookieBannerRejected" },
+        showCookiesRejectedBanner && (React.createElement(Container$z, { "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$A, { "data-testid": "CookieBannerAccepted", id: "CookieBannerAccepted" },
+        showCookiesAcceptedBanner && (React.createElement(Container$z, { "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"))))));
@@ -23764,7 +23976,7 @@ var DisplayDate = function (_a) {
         postText));
 };
 
-const Container$z = styled.footer`
+const Container$y = styled.footer`
   background-color: ${(props) => props.theme.theme_vars.colours.black};
   padding: 25px 0;
 `;
@@ -23939,7 +24151,7 @@ var ServiceIcon = function (_a) {
 var Footer = function (_a) {
     var _b = _a.footerLinksArray, footerLinksArray = _b === void 0 ? null : _b, _c = _a.year, year = _c === void 0 ? new Date().getFullYear() : _c;
     var themeContext = useContext(ThemeContext);
-    return (React.createElement(Container$z, { "data-testid": "Footer" },
+    return (React.createElement(Container$y, { "data-testid": "Footer" },
         React.createElement(StyledMaxWidthContainer$3, { noBackground: true },
             React.createElement(FooterAlignment, null,
                 React.createElement("div", null,
@@ -23972,7 +24184,7 @@ var Footer = function (_a) {
                         : '' }, themeContext.cardinal_name === 'north' ? (React.createElement(NorthWhiteLogo, null)) : themeContext.cardinal_name === 'west' ? (React.createElement(WestWhiteLogo, null)) : (React.createElement(GDSLogo, null)))))));
 };
 
-const Container$y = styled.div`
+const Container$x = styled.div`
   background: ${(props) => (props.hasBackground ? props.theme.theme_vars.colours.grey_light : 'transparent')};
   padding: ${(props) => (props.hasPadding ? '50px 0 20px' : '0')};
 `;
@@ -23982,7 +24194,7 @@ const Container$y = styled.div`
  */
 var FullWidthContainer = function (_a) {
     var children = _a.children, _b = _a.hasBackground, hasBackground = _b === void 0 ? false : _b, _c = _a.hasPadding, hasPadding = _c === void 0 ? false : _c;
-    return (React.createElement(Container$y, { hasBackground: hasBackground, hasPadding: hasPadding, "data-testid": "FullWidthContainer" }, children));
+    return (React.createElement(Container$x, { hasBackground: hasBackground, hasPadding: hasPadding, "data-testid": "FullWidthContainer" }, children));
 };
 
 /**
@@ -24014,7 +24226,7 @@ const headerThemeStyles = (props) => {
   }
 };
 
-const Container$x = styled.header`
+const Container$w = styled.header`
   font-family: ${(props) => props.theme.theme_vars.fontstack};
   padding: 3px 0;
   ${headerThemeStyles}
@@ -24179,7 +24391,7 @@ var NorthColouredLogo = function () {
                 React.createElement("path", { fill: "#fff", d: "M0 0H974V327H0z" })))));
 };
 
-const Container$w = styled.div`
+const Container$v = styled.div`
   ${props => props.theme.fontStyles}
   width: calc(100% - ${ props => props.isLarge ? "5rem" : "3rem"});
 `;
@@ -24325,7 +24537,7 @@ var Searchbar = function (_a) {
     /**
      * Render the component
      */
-    return (React.createElement(Container$w, { "data-testid": "Searchbar", isLarge: isLarge },
+    return (React.createElement(Container$v, { "data-testid": "Searchbar", isLarge: isLarge },
         React.createElement("form", { onSubmit: handleSubmit },
             React.createElement("div", { role: "search" },
                 React.createElement(InputWrapper, null,
@@ -24380,7 +24592,7 @@ var Header = function (_a) {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Container$x, __assign$2({}, props, { "data-testid": "Header" }),
+        React.createElement(Container$w, __assign$2({}, props, { "data-testid": "Header" }),
             React.createElement(StyledMaxWidthContainer$2, { noBackground: true },
                 React.createElement(LogoWrapper, null,
                     React.createElement(HomeLink, { href: homeLink, title: "Home", id: "logo" }, themeLogos(themeContext.cardinal_name, themeContext.is_memorial))),
@@ -24400,7 +24612,7 @@ var Header = function (_a) {
  * Hero image container with optional dark gradient for non-box mode
  * Optimised for an image in 16:5 ratio on all but small width screens
  */
-const Container$v = styled.div`
+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}');
@@ -24564,7 +24776,7 @@ var HeroImage = function (_a) {
     return (React.createElement(React.Fragment, null,
         React.createElement(LazyImage, { src: imageLarge, placeholder: imageSmall, visibilitySensorProps: {
                 partialVisibility: true,
-            } }, function (src) { return (React.createElement(Container$v, { image: src, backgroundBox: backgroundBox, "data-testid": "HeroImage" },
+            } }, function (src) { return (React.createElement(Container$u, { image: src, backgroundBox: backgroundBox, "data-testid": "HeroImage" },
             React.createElement(InnerContainer, null,
                 React.createElement(Overlay, { backgroundBox: backgroundBox, "data-testid": "HeroImageOverlay" },
                     breadcrumb && (React.createElement(BreadcrumbLink, { href: breadcrumb.url, backgroundBox: backgroundBox }, breadcrumb.title)),
@@ -24587,7 +24799,7 @@ const Wrapper$3 = styled.header`
       : props.theme.theme_vars.colours.white};
 `;
 
-const Container$u = styled.div`
+const Container$t = styled.div`
   font-family: ${(props) => props.theme.theme_vars.fontstack};
   overflow: hidden;
   background: ${(props) => props.theme.theme_vars.colours.action}5A;
@@ -24731,7 +24943,7 @@ var HomeHero = function (_a) {
         React.createElement(Wrapper$3, null,
             React.createElement(LazyImage, { src: random !== 999 && imagesArray[random].image1440x810 ? imagesArray[random].image1440x810 : '', placeholder: random !== 999 && imagesArray[random].image144x81 ? imagesArray[random].image144x81 : '', visibilitySensorProps: {
                     partialVisibility: true,
-                } }, function (src) { return (React.createElement(Container$u, { className: random !== 999 ? 'loaded' : 'loading', image: src, title: random !== 999 && imagesArray[random].imageAltText ? imagesArray[random].imageAltText : '' },
+                } }, function (src) { return (React.createElement(Container$t, { className: random !== 999 ? 'loaded' : 'loading', image: src, title: random !== 999 && imagesArray[random].imageAltText ? imagesArray[random].imageAltText : '' },
                 React.createElement(StyledMaxWidthContainer$1, null,
                     React.createElement(MainBox, null,
                         topline && React.createElement(Topline, null, topline),
@@ -24755,7 +24967,7 @@ const Wrapper$2 = styled.section`
   padding-bottom: 0px;
 `;
 
-const Container$t = styled.div`
+const Container$s = styled.div`
   font-family: ${(props) => props.theme.theme_vars.fontstack};
   display: flex;
   flex-wrap: wrap;
@@ -24895,7 +25107,7 @@ var MemorialHero = function (_a) {
             React.createElement(HiddenH1, null,
                 themeContext.full_name,
                 " Council"),
-            React.createElement(Container$t, null,
+            React.createElement(Container$s, null,
                 React.createElement(Left, null,
                     children,
                     React.createElement(ThemeProvider, { theme: theme }, councilServices)),
@@ -24925,7 +25137,7 @@ var NewsArticleDate = function (_a) {
 const imageHeightMobile = 150;
 const imageHeightDesktop = 200;
 
-const Container$s = styled.div`
+const Container$r = styled.div`
   ${(props) => props.theme.fontStyles};
   padding: 15px 0;
 
@@ -25064,7 +25276,7 @@ var NewsArticleFeaturedBlock = function (_a) {
     if (articles && articles.length > 0) {
         return (React.createElement(React.Fragment, null,
             !withoutTitle && React.createElement(Heading, { text: "News articles and press releases" }),
-            React.createElement(Container$s, null,
+            React.createElement(Container$r, null,
                 React.createElement(Row$1, { isList: true }, articles.map(function (article) { return (React.createElement(Column, { isList: true, small: "full", medium: "one-half", large: "one-third", key: article.id },
                     React.createElement(ArticleContainer$1, { href: article.url },
                         React.createElement(Row$1, null,
@@ -25085,7 +25297,7 @@ var NewsArticleFeaturedBlock = function (_a) {
     }
 };
 
-const Container$r = styled.div`
+const Container$q = styled.div`
   /* margin-top: 50px; */
   /* border: 1px solid red; */
 
@@ -25187,7 +25399,7 @@ const FilterHeading = styled.h2`
 // display: block;
 // overflow: hidden;
 
-const Container$q = styled.a`
+const Container$p = styled.a`
     ${props => props.theme.linkStyles}
     color: ${props => props.theme.theme_vars.colours.negative} !important;
     font-weight: normal;
@@ -25216,7 +25428,7 @@ var RemoveAllFilters = function (_a) {
         e.preventDefault();
         removeParams(__spreadArray(__spreadArray([], NewsArticleFilterFields.removeFiltersList, true), ['page'], false));
     };
-    return (React.createElement(Container$q, { "data-testid": "RemoveAllFilters", href: "#", onClick: removeAllFilters },
+    return (React.createElement(Container$p, { "data-testid": "RemoveAllFilters", href: "#", onClick: removeAllFilters },
         "Clear ",
         searchValue.length > 0 && 'search term and ',
         "filters",
@@ -25263,7 +25475,7 @@ var NewsArticleFilterAccordion = function (_a) {
             section.isExpanded = false;
         }
     });
-    return (React.createElement(Container$r, { "data-testid": "NewsArticleFilterAccordion" },
+    return (React.createElement(Container$q, { "data-testid": "NewsArticleFilterAccordion" },
         React.createElement(ShowFiltersButton, { onClick: showFullscreenFilters, "aria-expanded": !!isFullScreen, "aria-controls": "PageFilters" },
             "Show Search and filters",
             count > 0 && " (".concat(count, ")")),
@@ -25330,7 +25542,7 @@ var NewsArticleImage = function (_a) {
         })));
 };
 
-const Container$p = styled.div`
+const Container$o = styled.div`
   ${(props) => props.theme.fontStyles};
 `;
 
@@ -25451,7 +25663,7 @@ var NewsArticleList = function (_a) {
     var results = _a.results;
     var extractLength = 140;
     if (results && results.length > 0) {
-        return (React.createElement(Container$p, { "data-testid": "NewsArticleList" },
+        return (React.createElement(Container$o, { "data-testid": "NewsArticleList" },
             React.createElement(Row$1, { isList: true }, results.map(function (article) { return (React.createElement(Column, { isList: true, small: "full", medium: "full", large: "full", key: article.id },
                 React.createElement(ArticleContainer, { href: article.url, title: article.title },
                     article.image720x405 && (React.createElement(LazyImage, { src: article.image720x405, placeholder: article.image72x41, visibilitySensorProps: {
@@ -25466,12 +25678,12 @@ var NewsArticleList = function (_a) {
                             React.createElement(NewsArticleDate, { text: article.date.toString(), format: "X" })))))); }))));
     }
     else {
-        return (React.createElement(Container$p, { "data-testid": "NewsArticleList" },
+        return (React.createElement(Container$o, { "data-testid": "NewsArticleList" },
             React.createElement(ResultInfo$3, null, "No results found")));
     }
 };
 
-const Container$o = styled.div`
+const Container$n = styled.div`
 ${props => props.theme.fontStyles};
 padding-bottom: 20px;
 border-bottom: 1px solid ${props => props.theme.theme_vars.colours.grey};
@@ -25545,7 +25757,7 @@ const Preposition = styled.div`
     font-size: 80%;
 `;
 
-const Container$n = styled.span`
+const Container$m = styled.span`
     margin: 0 5px;
     display: inline-block;
     position: relative;
@@ -25606,7 +25818,7 @@ var RemovableTag = function (_a) {
     var index = _a.index, preposition = _a.preposition, label = _a.label; _a.value; _a.param; var clickHandler = _a.clickHandler;
     return (React.createElement(Wrapper$1, { "data-testid": "RemovableTag" },
         index > 0 && preposition && React.createElement(Preposition, null, preposition),
-        React.createElement(Container$n, null,
+        React.createElement(Container$m, null,
             React.createElement(Text, null, label),
             React.createElement(Button$2, { "aria-label": "Remove filter ".concat(label), onClick: clickHandler }, "x"))));
 };
@@ -25626,7 +25838,7 @@ var NewsArticleListHeader = function (_a) {
     var removeFilterValue = function (param, value) {
         removeValueFromParam(param, value);
     };
-    return (React.createElement(Container$o, { "data-testid": "NewsArticleListHeader" },
+    return (React.createElement(Container$n, { "data-testid": "NewsArticleListHeader" },
         React.createElement(LeftCol, null,
             totalResults,
             " article",
@@ -25680,7 +25892,7 @@ var NewsArticleOldBanner = function (_a) {
         React.createElement("strong", null, "1 year old")));
 };
 
-const Container$m = styled.main`
+const Container$l = styled.main`
   padding-top: 30px;
 
   a {
@@ -25793,10 +26005,10 @@ const Container$m = styled.main`
  */
 var PageMain = function (_a) {
     var children = _a.children, classes = _a.classes, _b = _a.fullWidthText, fullWidthText = _b === void 0 ? false : _b, props = __rest(_a, ["children", "classes", "fullWidthText"]);
-    return (React.createElement(Container$m, __assign$2({ id: "main", className: classes, fullWidthText: fullWidthText }, props, { "data-testid": "PageMain" }), children));
+    return (React.createElement(Container$l, __assign$2({ id: "main", className: classes, fullWidthText: fullWidthText }, props, { "data-testid": "PageMain" }), children));
 };
 
-const Container$l = styled.aside`
+const Container$k = styled.aside`
     padding-top: 30px;
 `;
 
@@ -25805,10 +26017,10 @@ const Container$l = styled.aside`
  */
 var PageSidebar = function (_a) {
     var children = _a.children;
-    return (React.createElement(Container$l, { className: "sidebar" }, children));
+    return (React.createElement(Container$k, { className: "sidebar" }, children));
 };
 
-const Container$k = styled.div`
+const Container$j = styled.div`
     padding-top: 30px;
 
     h1 {
@@ -25821,10 +26033,10 @@ const Container$k = styled.div`
  */
 var PageTitle = function (_a) {
     var children = _a.children, classes = _a.classes, props = __rest(_a, ["children", "classes"]);
-    return (React.createElement(Container$k, __assign$2({ "data-testid": "title", className: classes }, props), children));
+    return (React.createElement(Container$j, __assign$2({ "data-testid": "title", className: classes }, props), children));
 };
 
-const Container$j = styled.div`
+const Container$i = styled.div`
     @media screen and (min-width: ${props => props.theme.theme_vars.breakpoints.m}){  
         display: flex;
         flex-wrap: wrap;
@@ -25866,7 +26078,7 @@ const Container$j = styled.div`
  */
 var PageWithSidebarContainer = function (_a) {
     var _b = _a.sidebarLeft, sidebarLeft = _b === void 0 ? false : _b, children = _a.children;
-    return (React.createElement(Container$j, { sidebarLeft: sidebarLeft }, children));
+    return (React.createElement(Container$i, { sidebarLeft: sidebarLeft }, children));
 };
 
 const backgroundDecider = props => {
@@ -25885,14 +26097,14 @@ const backgroundDecider = props => {
   }; 
 
 
-const Container$i = styled.div`
+const Container$h = styled.div`
  ${backgroundDecider};
  padding-top: 1.5em;
 `;
 
 var PageWrapper = function (_a) {
     var colour = _a.colour, children = _a.children;
-    return (React.createElement(Container$i, { "data-testid": "PageWrapper", colour: colour }, children));
+    return (React.createElement(Container$h, { "data-testid": "PageWrapper", colour: colour }, children));
 };
 
 const Wrapper = styled.div`
@@ -25958,7 +26170,7 @@ var PhaseBanner = function (_a) {
             React.createElement(PhaseText, null, "This site is new and we are improving it every day."))));
 };
 
-const Container$h = styled.div`
+const Container$g = styled.div`
   ${(props) => props.theme.fontStyles};
 `;
 
@@ -26115,11 +26327,11 @@ var SearchResultsList = function (_a) {
     var searchTerm = _a.searchTerm, results = _a.results, _b = _a.totalResults, totalResults = _b === void 0 ? 0 : _b, _c = _a.pageNumber, pageNumber = _c === void 0 ? 0 : _c;
     var themeContext = useContext(ThemeContext);
     if (totalResults === 0) {
-        return (React.createElement(Container$h, { "data-testid": "SearchResultsList" },
+        return (React.createElement(Container$g, { "data-testid": "SearchResultsList" },
             React.createElement(ResultInfo$2, null, "No results found")));
     }
     else {
-        return (React.createElement(Container$h, { "data-testid": "SearchResultsList" },
+        return (React.createElement(Container$g, { "data-testid": "SearchResultsList" },
             React.createElement(ResultInfo$2, null,
                 pageNumber > 1 && 'Page ' + pageNumber + ' of ',
                 totalResults,
@@ -26136,7 +26348,7 @@ var SearchResultsList = function (_a) {
     }
 };
 
-const Container$g = styled.div``;
+const Container$f = styled.div``;
 
 const SectionTitle$1 = styled(Heading)`
   background: ${(props) =>
@@ -26228,7 +26440,7 @@ styled.img`
  */
 var SectionLinks = function (_a) {
     var sectionTitle = _a.sectionTitle, _b = _a.displayTitle, displayTitle = _b === void 0 ? true : _b, sectionSlug = _a.sectionSlug, pageLinksArray = _a.pageLinksArray, _c = _a.hasImages, hasImages = _c === void 0 ? false : _c;
-    return (React.createElement(Container$g, { id: sectionSlug, "data-testid": "SectionLinks" },
+    return (React.createElement(Container$f, { id: sectionSlug, "data-testid": "SectionLinks" },
         displayTitle ? React.createElement(SectionTitle$1, { text: sectionTitle }) : React.createElement("br", null),
         React.createElement(Row$1, { isList: true }, pageLinksArray.map(function (link, i) {
             var _a;
@@ -26242,7 +26454,7 @@ var SectionLinks = function (_a) {
         }))));
 };
 
-const Container$f = styled.aside`
+const Container$e = styled.aside`
     padding-top: 20px;
     display: block;
 
@@ -26326,7 +26538,7 @@ const InlineLink = styled.a`
 
 var SectionLinksMobileContents = function (_a) {
     var sectionLinksArray = _a.sectionLinksArray;
-    return (React.createElement(Container$f, null,
+    return (React.createElement(Container$e, null,
         React.createElement(Contents, null,
             React.createElement(ContentsTitle, null, "Contents"),
             React.createElement(ContentsList, null, sectionLinksArray.map(function (link) {
@@ -26335,7 +26547,7 @@ var SectionLinksMobileContents = function (_a) {
             })))));
 };
 
-const Container$e = styled.div`
+const Container$d = styled.div`
   ${(props) => props.theme.fontStyles}
   background-color: ${(props) => props.theme.theme_vars.colours.action_light};
   border-radius: ${(props) => props.theme.theme_vars.border_radius};
@@ -26486,7 +26698,7 @@ const ListItemLink = styled.a`
 var SectionLinksSidebar = function (_a) {
     var Title = _a.Title, Sections = _a.Sections;
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (React.createElement(Container$e, { "data-testid": "SectionLinksSidebar" },
+    return (React.createElement(Container$d, { "data-testid": "SectionLinksSidebar" },
         React.createElement(MobileTitleButton, { onClick: function () { return (open ? setOpen(false) : setOpen(true)); } },
             Title,
             React.createElement(IconWrapper$2, null,
@@ -26498,7 +26710,7 @@ var SectionLinksSidebar = function (_a) {
                 React.createElement(ListItemLink, { href: link.url }, link.title))); })))); }))));
 };
 
-const Container$d = styled.div`
+const Container$c = styled.div`
   position: relative;
 `;
 
@@ -26650,7 +26862,7 @@ var ServiceLinksBoxed = function (_a) {
         var _a;
         return (_a = refs.current[index]) !== null && _a !== void 0 ? _a : React.createRef();
     });
-    return (React.createElement(Container$d, { "data-testid": "ServiceLinksBoxed" },
+    return (React.createElement(Container$c, { "data-testid": "ServiceLinksBoxed" },
         React.createElement(Row$1, null, serviceLinksArray.map(function (serviceLink, index) {
             var _a;
             return (React.createElement(Column, { small: "full", medium: "one-half", large: "one-third", key: index },
@@ -26687,7 +26899,7 @@ const containerMaxHeight = (props) => {
   }
 };
 
-const Container$c = styled.div`
+const Container$b = styled.div`
   ${(props) => props.theme.fontStyles}
   ${containerMaxHeight}
 
@@ -27102,7 +27314,7 @@ var ServicesLinksList = function (_a) {
         }
     }, [currentOrder]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Container$c, { id: serviceId, className: open && 'open', hideHeader: hideHeader, isBoxed: isBoxed },
+        React.createElement(Container$b, { id: serviceId, className: open && 'open', hideHeader: hideHeader, isBoxed: isBoxed },
             !hideHeader && (React.createElement(HomeTitle, { "data-testid": "servicesLinksListHeader" },
                 React.createElement(Heading, { text: "Council services" }),
                 React.createElement(ReorderControl, null,
@@ -27131,7 +27343,7 @@ var ServicesLinksList = function (_a) {
                 " services")))));
 };
 
-const Container$b = styled.div`
+const Container$a = styled.div`
     ${props => props.theme.fontStyles}
     max-width: 500px;
     border-radius: ${props => props.theme.theme_vars.border_radius};
@@ -27178,7 +27390,7 @@ const SingleButtonContainer = styled.div`
     }
 `;
 
-const Container$a = styled.div`
+const Container$9 = styled.div`
   strong {
     font-weight: bold;
   }
@@ -27254,7 +27466,7 @@ const PostcodeResult = styled.div`
     max-width: calc(100% - 30px);
   }
 `;
-const Line$1 = styled.div`
+const Line = styled.div`
   background: ${(props) => props.theme.theme_vars.colours.grey_dark};
   width: 5px;
   border-radius: 2px;
@@ -27319,50 +27531,6 @@ var HintText = function (_a) {
     return (React.createElement(HintText$1, null, text));
 };
 
-const Container$9 = styled.div`
-  display: flex;
-  -webkit-flex-direction: row;
-  -moz-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-`;
-const Form = styled.form`
-  padding-top: 10px;
-  padding-bottom: 12px;
-  padding-left: ${(props) => (props.hideLine ? '0' : '15px')};
-  max-width: 100%;
-  width: 100%;
-`;
-const Line = styled.div`
-  background: ${(props) => (props.isError ? props.theme.theme_vars.colours.negative : props.lineColour)};
-  display: ${(props) => (props.hideLine ? 'none' : 'block')};
-  width: 5px;
-  border-radius: 2px;
-`;
-
-const ErrorSummary = styled.div`
-  color: ${(props) => props.theme.theme_vars.colours.negative};
-  font-weight: bold;
-  border-radius: ${(props) => props.theme.theme_vars.border_radius};
-  border: 3px solid ${(props) => props.theme.theme_vars.colours.negative};
-  margin-bottom: 15px;
-  padding: 15px;
-`;
-
-/**
- * Form element - a container with a line on the left
- */
-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$9, null,
-        React.createElement(Line, { 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),
-            children)));
-};
-
 const Spinner = styled.div`  
   display: inline-block;
   width: 80px;
@@ -27512,7 +27680,7 @@ var PostCodeSearch = function (_a) {
             setCurrentPostcode(currentPostcode + ' (' + singleAddress.title + ')');
         }
     }
-    return (React.createElement(Container$a, { "data-testid": "PostCodeSearch" },
+    return (React.createElement(Container$9, { "data-testid": "PostCodeSearch" },
         React.createElement(DropDownButton, { onClick: function () { return setOpen(open ? false : true); } },
             React.createElement(IconWrapper, null,
                 React.createElement(ChevronIcon, { direction: open ? 'down' : 'right', colourFill: themeContext.theme_vars.colours.black })),
@@ -27527,9 +27695,9 @@ var PostCodeSearch = function (_a) {
                 React.createElement(Label$2, { htmlFor: "postcode" },
                     "Enter your postcode",
                     React.createElement(HintText, { text: themeContext.cardinal_name === 'north' ? 'For example NN16 0AP' : 'For example NN1 1DE' }),
-                    React.createElement(Input, { type: "text", placeholder: "Enter a postcode", name: "postcode", errorText: errorText, isErrored: isError, maxLength: 10 })),
+                    React.createElement(Input$6, { type: "text", placeholder: "Enter a postcode", name: "postcode", errorText: errorText, isErrored: isError, maxLength: 10 })),
                 React.createElement(FormButton, { type: "submit", "aria-label": "Submit", text: "Find" })))) : (React.createElement(PostcodeResult, null,
-            React.createElement(Line$1, null),
+            React.createElement(Line, null),
             isMultiple ? (React.createElement("div", { className: "result" },
                 React.createElement("p", null,
                     "This postcode ",
@@ -27587,7 +27755,7 @@ var SignpostLinks = function (_a) {
     var themeContext = useContext(ThemeContext);
     var councilLink = otherCouncilLink ? otherCouncilLink : themeContext.theme_vars.other_council_link;
     return (React.createElement(React.Fragment, null, signpostLinksArray.length > 1 ?
-        React.createElement(Container$b, null,
+        React.createElement(Container$a, null,
             React.createElement(Paragraph, null, TopLineText),
             React.createElement(SignpostLinksList, { signpostLinksArray: signpostLinksArray }),
             React.createElement(PostCodeSearch, { otherCouncilLink: councilLink, signPostLinks: signpostLinksArray }),
@@ -29843,13 +30011,13 @@ var DirectoryServiceList = function (_a) {
                             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(Input, { name: "directorySearch", type: "text", defaultValue: searchTerm, id: "directorySearch", onChange: function (e) {
+                                React.createElement(Input$6, { 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" },
                                 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); } })),
+                                React.createElement(Input$6, { name: "postcode", type: "text", defaultValue: postcodeSearch, id: "postcode", onChange: function (e) { return setPostcodeSearch(e.target.value); } })),
                             React.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
                                 React.createElement(ButtonContainer$1, null,
                                     React.createElement(Button$1, { onClick: submitSearch, type: "submit" },
@@ -29883,10 +30051,10 @@ var DirectoryServiceList = function (_a) {
                                         React.createElement(Row$1, null,
                                             React.createElement(Column, { small: "full", medium: "one-half", large: "one-half" },
                                                 React.createElement(Label$1, { htmlFor: "minimum_age" }, "From"),
-                                                React.createElement(Input, { name: "minimum_age", onChange: function (e) { return handleAgeChange(e, 'minimumAge'); }, value: ageInMonths && typeof minimumAge === 'number' ? minimumAge / 12 : minimumAge, id: "minimum_age", type: "number" })),
+                                                React.createElement(Input$6, { name: "minimum_age", onChange: function (e) { return handleAgeChange(e, 'minimumAge'); }, value: ageInMonths && typeof minimumAge === 'number' ? minimumAge / 12 : minimumAge, id: "minimum_age", type: "number" })),
                                             React.createElement(Column, { small: "full", medium: "one-half", large: "one-half" },
                                                 React.createElement(Label$1, { htmlFor: "maximum_age" }, "To"),
-                                                React.createElement(Input, { name: "maximum_age", onChange: function (e) { return handleAgeChange(e, 'maximumAge'); }, value: ageInMonths && typeof maximumAge === 'number' ? maximumAge / 12 : maximumAge, id: "maximum_age", type: "number" })))))), categories === null || categories === void 0 ? void 0 :
+                                                React.createElement(Input$6, { name: "maximum_age", onChange: function (e) { return handleAgeChange(e, 'maximumAge'); }, value: ageInMonths && typeof maximumAge === 'number' ? maximumAge / 12 : maximumAge, id: "maximum_age", type: "number" })))))), categories === null || categories === void 0 ? void 0 :
                             categories.map(function (category, categoryIndex) { return (React.createElement(Column, { small: "full", medium: "full", large: "full", key: category.label },
                                 React.createElement(Fieldset$1, null,
                                     React.createElement(Legend$1, null,
@@ -31619,7 +31787,7 @@ var DirectoryDocumentList = function (_a) {
                             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(Input, { name: "directorySearch", type: "text", defaultValue: searchTerm, id: "directorySearch", onChange: function (e) {
+                                React.createElement(Input$6, { 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" },
@@ -31659,5 +31827,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, 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, 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.esm.js.map