@coopdigital/react 0.37.0 → 0.38.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -3,6 +3,8 @@ import { FormFieldError, StandardSizes } from "../../../src/types";
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
+    /** **(Optional)** Specify whether the Checkbox should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+    disabled?: boolean;
     /** **(Optional)** Specify the Checkbox error state.
      *
      * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
@@ -26,5 +28,5 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     /** **(Optional)** Specify the Checkbox size. */
     size?: StandardSizes;
 }
-export declare const Checkbox: ({ className, error, hint, id, label, labelVisible, name, size, ...props }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ className, disabled, error, hint, id, label, labelVisible, name, size, ...props }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -5,19 +5,21 @@ import { FieldError } from '../FieldError/FieldError.js';
 import { FieldHint } from '../FieldHint/FieldHint.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.js';
 
-const Checkbox = ({ className, error = false, hint, id, label, labelVisible = true, name, size = "md", ...props }) => {
+const Checkbox = ({ className, disabled, error = false, hint, id, label, labelVisible = true, name, size = "md", ...props }) => {
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
     const componentProps = {
         className: clsx("coop-checkbox", className),
         "data-error": error ? "" : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
+        disabled,
         id,
         name,
         type: "checkbox",
         ...props,
     };
-    return (jsxs("div", { className: "coop-form-item", children: [jsxs("div", { className: "coop-checkbox-wrapper", children: [jsx("input", { ...componentProps }), label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
+    const formItemProps = { "aria-disabled": disabled ? true : undefined };
+    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [jsxs("div", { className: "coop-checkbox-wrapper", children: [jsx("input", { ...componentProps }), label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
 };
 
 export { Checkbox, Checkbox as default };

package/dist/components/Checkbox/CheckboxGroup.d.ts

@@ -5,6 +5,8 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
     children?: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
+    /** **(Optional)** Specify whether the CheckboxGroup, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+    disabled?: boolean;
     /** **(Optional)** Specify the CheckboxGroup error state.
      *
      * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.

package/dist/components/RadioButton/RadioButton.d.ts

@@ -4,6 +4,8 @@ import { TagProps } from "../Tag";
 export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
+    /** **(Optional)** Specify whether the RadioButton should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+    disabled?: boolean;
     /** **(Optional)** Specify the RadioButton error state.
      *
      * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
@@ -33,5 +35,5 @@ export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElem
     /** **(Optional)** Specify the RadioButton variant. */
     variant?: "default" | "boxed";
 }
-export declare const RadioButton: ({ className, error, hint, id, label, labelVisible, name, size, tag, tagBackground, variant, ...props }: RadioButtonProps) => JSX.Element;
+export declare const RadioButton: ({ className, disabled, error, hint, id, label, labelVisible, name, size, tag, tagBackground, variant, ...props }: RadioButtonProps) => JSX.Element;
 export default RadioButton;

package/dist/components/RadioButton/RadioButton.js

@@ -6,7 +6,7 @@ import { FieldHint } from '../FieldHint/FieldHint.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.js';
 import { Tag } from '../Tag/Tag.js';
 
-const RadioButton = ({ className, error = false, hint, id, label, labelVisible = true, name, size = "md", tag, tagBackground, variant = "default", ...props }) => {
+const RadioButton = ({ className, disabled, error = false, hint, id, label, labelVisible = true, name, size = "md", tag, tagBackground, variant = "default", ...props }) => {
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
     const componentProps = {
@@ -14,12 +14,14 @@ const RadioButton = ({ className, error = false, hint, id, label, labelVisible =
         "data-error": error ? "" : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         "data-variant": variant !== "default" ? variant : undefined,
+        disabled,
         id,
         name,
         type: "radio",
         ...props,
     };
-    return (jsxs("div", { className: "coop-form-item", children: [jsxs("div", { className: "coop-radio-button-wrapper", children: [jsx("input", { ...componentProps }), label && (jsxs(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: [jsx("span", { children: label }), " ", tag && (jsx(Tag, { background: tagBackground, size: "sm", children: tag }))] })), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
+    const formItemProps = { "aria-disabled": disabled ? true : undefined };
+    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [jsxs("div", { className: "coop-radio-button-wrapper", children: [jsx("input", { ...componentProps }), label && (jsxs(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: [jsx("span", { children: label }), " ", tag && (jsx(Tag, { background: tagBackground, size: "sm", children: tag }))] })), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
 };
 
 export { RadioButton, RadioButton as default };

package/dist/components/RadioButton/RadioButtonGroup.d.ts

@@ -5,6 +5,8 @@ export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldS
     children?: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
+    /** **(Optional)** Specify whether the RadioButtonGroup, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+    disabled?: boolean;
     /** **(Optional)** Specify the RadioButtonGroup error state.
      *
      * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.

package/dist/components/TextInput/TextInput.d.ts

@@ -3,6 +3,8 @@ import { FormFieldError, StandardSizes } from "../../../src/types";
 export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
+    /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+    disabled?: boolean;
     /** **(Optional)** Specify the TextInput error state.
      *
      * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
@@ -34,5 +36,5 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     /** **(Optional)** Specify the TextInput type. */
     type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
 }
-export declare const TextInput: ({ "aria-placeholder": ariaPlaceholder, className, error, hint, id, label, labelVisible, name, placeholder, prefix, size, suffix, type, ...props }: TextInputProps) => JSX.Element;
+export declare const TextInput: ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, hint, id, label, labelVisible, name, placeholder, prefix, size, suffix, type, ...props }: TextInputProps) => JSX.Element;
 export default TextInput;

package/dist/components/TextInput/TextInput.js

@@ -5,7 +5,7 @@ import { FieldError } from '../FieldError/FieldError.js';
 import { FieldHint } from '../FieldHint/FieldHint.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.js';
 
-const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, error = false, hint, id, label, labelVisible = true, name, placeholder, prefix, size = "md", suffix, type = "text", ...props }) => {
+const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, hint, id, label, labelVisible = true, name, placeholder, prefix, size = "md", suffix, type = "text", ...props }) => {
     var _a;
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
@@ -14,13 +14,15 @@ const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, error = fal
         className: clsx("coop-text-input", className),
         "data-error": error ? "" : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
+        disabled,
         id,
         name,
         placeholder,
         type,
         ...props,
     };
-    return (jsxs("div", { className: "coop-form-item", children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { className: "coop-text-input--prefix", children: prefix }), jsx("input", { ...componentProps }), suffix && jsx("span", { className: "coop-text-input--suffix", children: suffix })] })] }));
+    const formItemProps = { "aria-disabled": disabled ? true : undefined };
+    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { className: "coop-text-input--prefix", children: prefix }), jsx("input", { ...componentProps }), suffix && jsx("span", { className: "coop-text-input--suffix", children: suffix })] })] }));
 };
 
 export { TextInput, TextInput as default };

package/dist/components/Textarea/Textarea.d.ts

@@ -14,6 +14,8 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
      * Remember it is still your responsibility to handle validation on submission, this is simply a hint for the user.
      */
     cutoff?: boolean;
+    /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+    disabled?: boolean;
     /** **(Optional)** Specify the Textarea error state.
      *
      * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
@@ -43,5 +45,5 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     /** **(Optional)** Specify the Textarea size. */
     size?: StandardSizes;
 }
-export declare const Textarea: ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, error, hint, id, label, labelVisible, maxLength, name, onChange: userOnChange, placeholder, rows, size, ...props }: TextareaProps) => JSX.Element;
+export declare const Textarea: ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, hint, id, label, labelVisible, maxLength, name, onChange: userOnChange, placeholder, rows, size, ...props }: TextareaProps) => JSX.Element;
 export default Textarea;

package/dist/components/Textarea/Textarea.js

@@ -10,7 +10,7 @@ const DEBOUNCE_DELAY = 750;
 const charCountMessage = (remaining) => {
     return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
 };
-const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, error = false, hint, id, label, labelVisible = true, maxLength, name, onChange: userOnChange = undefined, placeholder, rows = 4, size = "md", ...props }) => {
+const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, hint, id, label, labelVisible = true, maxLength, name, onChange: userOnChange = undefined, placeholder, rows = 4, size = "md", ...props }) => {
     var _a;
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
@@ -20,6 +20,7 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
         cols,
         "data-error": error ? "" : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
+        disabled,
         id,
         maxLength: cutoff ? maxLength : undefined,
         name,
@@ -32,10 +33,11 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
     const handleChange = (e) => {
         maxLength && e.target && setRemaining(maxLength - e.target.value.length);
     };
-    return (jsxs("div", { className: "coop-form-item", children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsx("textarea", { ...componentProps, onChange: (e) => {
+    const formItemProps = { "aria-disabled": disabled ? true : undefined };
+    return (jsxs("div", { className: "coop-form-item", ...formItemProps, children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsx("textarea", { ...componentProps, onChange: (e) => {
                     userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(e);
                     handleChange(e);
-                } }), counter && maxLength && remaining != null && debouncedRemaining != null && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": "" }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
+                } }), !disabled && counter && maxLength && remaining != null && debouncedRemaining != null && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": "" }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
 };
 
 export { Textarea, Textarea as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -80,7 +80,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.32.0"
+    "@coopdigital/styles": "^0.33.0"
   },
-  "gitHead": "07c3e26f63d0b276cd48f392ec61241f7db7fe84"
+  "gitHead": "a944468d589dbae7fda45baab60dc9eac0c83032"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -12,6 +12,8 @@ export interface CheckboxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify whether the Checkbox should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean
   /** **(Optional)** Specify the Checkbox error state.
    *
    * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
@@ -38,6 +40,7 @@ export interface CheckboxProps
 
 export const Checkbox = ({
   className,
+  disabled,
   error = false,
   hint,
   id,
@@ -55,14 +58,15 @@ export const Checkbox = ({
     className: clsx("coop-checkbox", className),
     "data-error": error ? "" : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
+    disabled,
     id,
     name,
     type: "checkbox",
     ...props,
   }
-
+  const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (
-    <div className="coop-form-item">
+    <div className="coop-form-item" {...formItemProps}>
       <div className="coop-checkbox-wrapper">
         <input {...componentProps} />
 

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -11,6 +11,8 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify whether the CheckboxGroup, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean
   /** **(Optional)** Specify the CheckboxGroup error state.
    *
    * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.

package/src/components/RadioButton/RadioButton.tsx

@@ -11,6 +11,8 @@ export interface RadioButtonProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify whether the RadioButton should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+  disabled?: boolean
   /** **(Optional)** Specify the RadioButton error state.
    *
    * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
@@ -43,6 +45,7 @@ export interface RadioButtonProps
 
 export const RadioButton = ({
   className,
+  disabled,
   error = false,
   hint,
   id,
@@ -64,14 +67,15 @@ export const RadioButton = ({
     "data-error": error ? "" : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     "data-variant": variant !== "default" ? variant : undefined,
+    disabled,
     id,
     name,
     type: "radio",
     ...props,
   }
-
+  const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (
-    <div className="coop-form-item">
+    <div className="coop-form-item" {...formItemProps}>
       <div className="coop-radio-button-wrapper">
         <input {...componentProps} />
 

package/src/components/RadioButton/RadioButtonGroup.tsx

@@ -11,6 +11,8 @@ export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldS
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify whether the RadioButtonGroup, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean
   /** **(Optional)** Specify the RadioButtonGroup error state.
    *
    * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.

package/src/components/TextInput/TextInput.tsx

@@ -12,6 +12,8 @@ export interface TextInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean
   /** **(Optional)** Specify the TextInput error state.
    *
    * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
@@ -47,6 +49,7 @@ export interface TextInputProps
 export const TextInput = ({
   "aria-placeholder": ariaPlaceholder,
   className,
+  disabled,
   error = false,
   hint,
   id,
@@ -69,15 +72,16 @@ export const TextInput = ({
     className: clsx("coop-text-input", className),
     "data-error": error ? "" : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
+    disabled,
     id,
     name,
     placeholder,
     type,
     ...props,
   }
-
+  const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (
-    <div className="coop-form-item">
+    <div className="coop-form-item" {...formItemProps}>
       {label && (
         <FieldLabel htmlFor={id} isVisible={labelVisible}>
           {label}

package/src/components/Textarea/Textarea.tsx

@@ -29,6 +29,8 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
    * Remember it is still your responsibility to handle validation on submission, this is simply a hint for the user.
    */
   cutoff?: boolean
+  /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+  disabled?: boolean
   /** **(Optional)** Specify the Textarea error state.
    *
    * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
@@ -65,6 +67,7 @@ export const Textarea = ({
   cols = 30,
   counter = false,
   cutoff = false,
+  disabled = false,
   error = false,
   hint,
   id,
@@ -88,6 +91,7 @@ export const Textarea = ({
     cols,
     "data-error": error ? "" : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
+    disabled,
     id,
     maxLength: cutoff ? maxLength : undefined,
     name,
@@ -102,9 +106,9 @@ export const Textarea = ({
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     maxLength && e.target && setRemaining(maxLength - e.target.value.length)
   }
-
+  const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (
-    <div className="coop-form-item">
+    <div className="coop-form-item" {...formItemProps}>
       {label && (
         <FieldLabel htmlFor={id} isVisible={labelVisible}>
           {label}
@@ -123,7 +127,7 @@ export const Textarea = ({
         }}
       ></textarea>
 
-      {counter && maxLength && remaining != null && debouncedRemaining != null && (
+      {!disabled && counter && maxLength && remaining != null && debouncedRemaining != null && (
         <>
           <small
             aria-hidden="true"