@nnc-digital/nnc-design-system 0.4.29 → 0.4.30

package/build/index.esm.js

@@ -4028,18 +4028,19 @@ var Button$4 = function (_a) {
 };
 
 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) {
+var Label$5 = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 15px;\n"], ["\n  display: block;\n  margin-bottom: 15px;\n"])));
+var VisuallyHiddenLabel = styled(Label$5)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  border: 0;\n  white-space: nowrap;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  border: 0;\n  white-space: nowrap;\n"])));
+var BinCollectionButtonStyles = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    button {\n      margin: 10px 10px 12px 10px;\n    }\n"], ["\n    button {\n      margin: 10px 10px 12px 10px;\n    }\n"])));
+var FormContainer$1 = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  ", "\n"])), function (props) {
     return props.isLoading && "\n          opacity: 0.5; \n          pointer-events: none;\n      ";
 });
-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  width: 90%;\n"], ["\n  padding-bottom: 20px;\n  width: 90%;\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; });
-styled.div(templateObject_9 || (templateObject_9 = __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"])));
-styled.input(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var ErrorTextWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n"], ["\n  display: block;\n  width: 100%;\n"])));
+var DropDownSelectContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-bottom: 20px;\n  width: 90%;\n"], ["\n  padding-bottom: 20px;\n  width: 90%;\n"])));
+var FormInnerContainer = styled.div(templateObject_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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; });
+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"])));
+styled.input(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
 
 const Container$16 = styled.div`
   display: flex;
@@ -4085,17 +4086,6 @@ var FormWithLine = function (_a) {
             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;
@@ -4491,7 +4481,8 @@ var BinCollection = function (_a) {
                 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(VisuallyHiddenLabel, { id: "postcode-label", htmlFor: "postcode-input" }, "Enter a postcode"),
+                    React.createElement(StyledTextInput, { type: "text", placeholder: "Enter a postcode", name: "postcode", id: "postcode-input", isErrored: isError, "aria-labelledby": "postcode-label", autoComplete: "postal-code" }),
                     React.createElement(BinCollectionButtonStyles, null,
                         React.createElement(FormButton, { size: "large", type: "submit", "aria-label": "Submit", text: "Find" }))))),
         addressOptions.length > 0 && (React.createElement(DropDownSelectContainer, null,
@@ -13855,10 +13846,10 @@ let pico$1 = picocolors.exports;
 
 let tokenizer$1 = tokenize;
 
-let Input$5;
+let Input$6;
 
 function registerInput(dependant) {
-  Input$5 = dependant;
+  Input$6 = dependant;
 }
 
 const HIGHLIGHT_THEME = {
@@ -13899,7 +13890,7 @@ function getTokenType([type, value], processor) {
 }
 
 function terminalHighlight$2(css) {
-  let processor = tokenizer$1(new Input$5(css), { ignoreErrors: true });
+  let processor = tokenizer$1(new Input$6(css), { ignoreErrors: true });
   let result = '';
   while (!processor.endOfFile()) {
     let token = processor.nextToken();
@@ -18286,7 +18277,7 @@ let fromOffsetCache = Symbol('fromOffsetCache');
 let sourceMapAvailable$1 = Boolean(SourceMapConsumer$1 && SourceMapGenerator$1);
 let pathAvailable$1 = Boolean(resolve$1 && isAbsolute);
 
-class Input$4 {
+class Input$5 {
   constructor(css, opts = {}) {
     if (
       css === null ||
@@ -18512,18 +18503,18 @@ class Input$4 {
   }
 }
 
-var input = Input$4;
-Input$4.default = Input$4;
+var input = Input$5;
+Input$5.default = Input$5;
 
 if (terminalHighlight && terminalHighlight.registerInput) {
-  terminalHighlight.registerInput(Input$4);
+  terminalHighlight.registerInput(Input$5);
 }
 
 let { SourceMapConsumer, SourceMapGenerator } = sourceMap;
 let { dirname, resolve, relative, sep } = require$$2;
 let { pathToFileURL } = require$$1$1;
 
-let Input$3 = input;
+let Input$4 = input;
 
 let sourceMapAvailable = Boolean(SourceMapConsumer && SourceMapGenerator);
 let pathAvailable = Boolean(dirname && resolve && relative && sep);
@@ -18558,7 +18549,7 @@ class MapGenerator$2 {
           }
         });
       } else {
-        let input = new Input$3(this.css, this.opts);
+        let input = new Input$4(this.css, this.opts);
         if (input.map) this.previousMaps.push(input.map);
       }
     }
@@ -20198,10 +20189,10 @@ var parser = Parser$1;
 
 let Container$P = container;
 let Parser = parser;
-let Input$2 = input;
+let Input$3 = input;
 
 function parse$3(css, opts) {
-  let input = new Input$2(css, opts);
+  let input = new Input$3(css, opts);
   let parser = new Parser(input);
   try {
     parser.parse();
@@ -20990,7 +20981,7 @@ let Declaration$1 = declaration;
 let PreviousMap = previousMap;
 let Comment$1 = comment;
 let AtRule$1 = atRule;
-let Input$1 = input;
+let Input$2 = input;
 let Root$1 = root;
 let Rule$1 = rule;
 
@@ -21001,7 +20992,7 @@ function fromJSON$1(json, inputs) {
   if (ownInputs) {
     inputs = [];
     for (let input of ownInputs) {
-      let inputHydrated = { ...input, __proto__: Input$1.prototype };
+      let inputHydrated = { ...input, __proto__: Input$2.prototype };
       if (inputHydrated.map) {
         inputHydrated.map = {
           ...inputHydrated.map,
@@ -21051,7 +21042,7 @@ let Warning = warning;
 let Comment = comment;
 let AtRule = atRule;
 let Result$1 = result;
-let Input = input;
+let Input$1 = input;
 let parse = parse_1;
 let list = list_1;
 let Rule = rule;
@@ -21129,7 +21120,7 @@ postcss.Comment = Comment;
 postcss.Warning = Warning;
 postcss.AtRule = AtRule;
 postcss.Result = Result$1;
-postcss.Input = Input;
+postcss.Input = Input$1;
 postcss.Rule = Rule;
 postcss.Root = Root;
 postcss.Node = Node;
@@ -23483,6 +23474,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) {
@@ -23493,7 +23495,7 @@ var CustomSearch = function (_a) {
             React.createElement("div", { role: "search" },
                 React.createElement(Label$3, { htmlFor: id, hasHiddenLabel: hasHiddenLabel }, label),
                 React.createElement(InputWrapper$1, null,
-                    React.createElement(Input$6, { name: fieldName, placeholder: placeholder, id: id }),
+                    React.createElement(Input, { name: fieldName, placeholder: placeholder, id: id }),
                     React.createElement(SubmitButton, { type: "submit", value: searchText }))))));
 };
 
@@ -28058,7 +28060,7 @@ 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$6, { type: "text", placeholder: "Enter a postcode", name: "postcode", errorText: errorText, isErrored: isError, maxLength: 10 })),
+                    React.createElement(Input, { 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, null),
             isMultiple ? (React.createElement("div", { className: "result" },
@@ -30316,13 +30318,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$6, { name: "directorySearch", type: "text", defaultValue: searchTerm, id: "directorySearch", onChange: function (e) {
+                                React.createElement(Input, { name: "directorySearch", type: "text", defaultValue: searchTerm, id: "directorySearch", onChange: function (e) {
                                         setSearchTerm(e.target.value);
                                     } })),
                             React.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
                                 React.createElement(Label$1, { htmlFor: "postcode" }, "Postcode (optional)"),
                                 React.createElement(HintText, { text: "Enter a postcode" }),
-                                React.createElement(Input$6, { name: "postcode", type: "text", defaultValue: postcodeSearch, id: "postcode", onChange: function (e) { return setPostcodeSearch(e.target.value); } })),
+                                React.createElement(Input, { 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" },
@@ -30356,10 +30358,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$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(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(Column, { small: "full", medium: "one-half", large: "one-half" },
                                                 React.createElement(Label$1, { htmlFor: "maximum_age" }, "To"),
-                                                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 :
+                                                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 :
                             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,
@@ -32092,7 +32094,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$6, { name: "directorySearch", type: "text", defaultValue: searchTerm, id: "directorySearch", onChange: function (e) {
+                                React.createElement(Input, { name: "directorySearch", type: "text", defaultValue: searchTerm, id: "directorySearch", onChange: function (e) {
                                         setSearchTerm(e.target.value);
                                     } })),
                             React.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },