@simplybusiness/mobius 4.13.0 → 4.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 4.14.0
+
+### Minor Changes
+
+- a03d10d: Add `name` attribute to `<Checkbox />` component
+
+### Patch Changes
+
+- 1f347dd: Dependency updates
+- Updated dependencies [1f347dd]
+  - @simplybusiness/icons@4.12.1
+
 ## 4.13.0
 
 ### Minor Changes

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -23,7 +23,7 @@ function _interop_require_default(obj) {
     };
 }
 const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, defaultSelected = false, isReadOnly, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
+    const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, defaultSelected = false, isReadOnly, name, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
     const [selected, setSelected] = (0, _react.useState)(defaultSelected);
     const fallbackRef = (0, _react.useRef)(null);
     const refObj = ref || fallbackRef;
@@ -89,6 +89,7 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         defaultChecked: defaultSelected,
                         required: isRequired,
                         id: id || inputId,
+                        name: name,
                         value: value,
                         ...rest
                     }),

package/dist/cjs/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    sharedClasses,\n    className,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", sharedClasses);\n  const iconClasses = classNames(\"mobius/CheckboxIcon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={selected ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius/CheckboxLabel\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","validationClasses","useValidationClasses","sharedClasses","classNames","wrapperClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","Icon","icon","squareTick","square","size","span","ErrorMessage"],"mappings":"AAAA;;;;;+BAoBaA;;;eAAAA;;;;uBAVN;+DACgB;uBACY;8BACN;oCAGM;uBACE;sBAChB;;;;;;AAEd,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAUP;IAClD,MAAMQ,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASpB,OAAOkB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CnB;QACAC;IACF;IACA,MAAMmB,gBAAgBC,IAAAA,eAAU,EAC9B;QACE,iBAAiBvB;QACjB,iBAAiBY;QACjB,iBAAiB,OAAOX,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAmB;IAEF,sEAAsE;IACtE,MAAMI,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD,eACAjB;IAEF,MAAMoB,eAAeF,IAAAA,eAAU,EAAC,wBAAwBD;IACxD,MAAMI,cAAcH,IAAAA,eAAU,EAAC,uBAAuBD;IACtD,MAAMK,iBAAiBR,IAAAA,YAAK;IAC5B,MAAMS,yBAAyBtB,eAAeqB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAlB;KACD;IACD,MAAMsB,UAAUb,IAAAA,YAAK;IAErB,MAAMc,cAAc;QAClBpB,YAAY,CAACD;IACf;IAEA,MAAMsB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI/B,UAAU;YACZA,SAAS+B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,sBAAClC;gBAAMM,WAAWmB;;kCAChB,qBAACiB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAAczC;wBACd0C,mBAAiBb;wBACjBc,UAAUtC;wBACVuC,UAAU/C;wBACVH,KAAKoB;wBACLZ,WAAWoB;wBACXuB,SAASd;wBACT9B,UAAUkC;wBACVW,WAAWV;wBACXW,MAAK;wBACLC,gBAAgB5C;wBAChB6C,UAAUnD;wBACVH,IAAIA,MAAMoB;wBACVT,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAAC0C,UAAI;wBACHC,MAAM1C,WAAW2C,iBAAU,GAAGC,aAAM;wBACpCC,MAAK;wBACLpD,WAAWqB;;kCAEb,qBAACgC;wBAAK5D,IAAIkC;wBAAS3B,WAAU;kCAC1BN;;;;0BAGL,qBAAC4D,0BAAY;gBAAC7D,IAAI6B;gBAAgBrB,cAAcA;;;;AAGtD"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    name,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    sharedClasses,\n    className,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", sharedClasses);\n  const iconClasses = classNames(\"mobius/CheckboxIcon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          name={name}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={selected ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius/CheckboxLabel\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","name","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","validationClasses","useValidationClasses","sharedClasses","classNames","wrapperClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","Icon","icon","squareTick","square","size","span","ErrorMessage"],"mappings":"AAAA;;;;;+BAoBaA;;;eAAAA;;;;uBAVN;+DACgB;uBACY;8BACN;oCAGM;uBACE;sBAChB;;;;;;AAEd,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,IAAI,EACJC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGhB;IACJ,MAAM,CAACiB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAUR;IAClD,MAAMS,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASrB,OAAOmB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CpB;QACAC;IACF;IACA,MAAMoB,gBAAgBC,IAAAA,eAAU,EAC9B;QACE,iBAAiBxB;QACjB,iBAAiBa;QACjB,iBAAiB,OAAOZ,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAoB;IAEF,sEAAsE;IACtE,MAAMI,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD,eACAlB;IAEF,MAAMqB,eAAeF,IAAAA,eAAU,EAAC,wBAAwBD;IACxD,MAAMI,cAAcH,IAAAA,eAAU,EAAC,uBAAuBD;IACtD,MAAMK,iBAAiBR,IAAAA,YAAK;IAC5B,MAAMS,yBAAyBvB,eAAesB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAlB;KACD;IACD,MAAMsB,UAAUb,IAAAA,YAAK;IAErB,MAAMc,cAAc;QAClBpB,YAAY,CAACD;IACf;IAEA,MAAMsB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAIhC,UAAU;YACZA,SAASgC;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,sBAACnC;gBAAMM,WAAWoB;;kCAChB,qBAACiB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAAc1C;wBACd2C,mBAAiBb;wBACjBc,UAAUvC;wBACVwC,UAAUhD;wBACVH,KAAKqB;wBACLb,WAAWqB;wBACXuB,SAASd;wBACT/B,UAAUmC;wBACVW,WAAWV;wBACXW,MAAK;wBACLC,gBAAgB7C;wBAChB8C,UAAUpD;wBACVH,IAAIA,MAAMqB;wBACVV,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAAC0C,UAAI;wBACHC,MAAM1C,WAAW2C,iBAAU,GAAGC,aAAM;wBACpCC,MAAK;wBACLrD,WAAWsB;;kCAEb,qBAACgC;wBAAK7D,IAAImC;wBAAS5B,WAAU;kCAC1BN;;;;0BAGL,qBAAC6D,0BAAY;gBAAC9D,IAAI8B;gBAAgBtB,cAAcA;;;;AAGtD"}

package/dist/esm/components/Checkbox/Checkbox.js

@@ -8,7 +8,7 @@ import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { useValidationClasses } from "../../hooks";
 import { Icon } from "../Icon";
 export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, defaultSelected = false, isReadOnly, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
+    const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, defaultSelected = false, isReadOnly, name, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
     const [selected, setSelected] = useState(defaultSelected);
     const fallbackRef = useRef(null);
     const refObj = ref || fallbackRef;
@@ -74,6 +74,7 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
                         defaultChecked: defaultSelected,
                         required: isRequired,
                         id: id || inputId,
+                        name: name,
                         value: value,
                         ...rest
                     }),

package/dist/esm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    sharedClasses,\n    className,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", sharedClasses);\n  const iconClasses = classNames(\"mobius/CheckboxIcon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={selected ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius/CheckboxLabel\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["forwardRef","useRef","useState","useId","classNames","squareTick","square","ErrorMessage","spaceDelimitedList","useValidationClasses","Icon","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","fallbackRef","refObj","inputId","validationClasses","sharedClasses","wrapperClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","icon","size","span"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,QAAQ,EAGRC,KAAK,QACA,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,MAAM,QAAQ,wBAAwB;AAC3D,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,IAAI,QAAQ,UAAU;AAE/B,OAAO,MAAMC,yBAGTX,WAAW,CAACY,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAG3B,SAAkBqB;IAClD,MAAMO,cAAc7B,OAAyB;IAC7C,MAAM8B,SAASlB,OAAOiB;IACtB,MAAME,UAAU7B;IAChB,MAAM8B,oBAAoBxB,qBAAqB;QAC7CS;QACAC;IACF;IACA,MAAMe,gBAAgB9B,WACpB;QACE,iBAAiBY;QACjB,iBAAiBY;QACjB,iBAAiB,OAAOX,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAgB;IAEF,sEAAsE;IACtE,MAAME,iBAAiB/B,WACrB,UACA,mBACA8B,eACAb;IAEF,MAAMe,eAAehC,WAAW,wBAAwB8B;IACxD,MAAMG,cAAcjC,WAAW,uBAAuB8B;IACtD,MAAMI,iBAAiBnC;IACvB,MAAMoC,yBAAyBjB,eAAegB,iBAAiBE;IAC/D,MAAMC,cAAcjC,mBAAmB;QACrC+B;QACAb;KACD;IACD,MAAMgB,UAAUvC;IAEhB,MAAMwC,cAAc;QAClBd,YAAY,CAACD;IACf;IAEA,MAAMgB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAIzB,UAAU;YACZA,SAASyB;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,MAAC5B;gBAAMM,WAAWc;;kCAChB,KAACgB;wBACCC,oBAAkBX;wBAClBY,qBAAmBd;wBACnBe,gBAAcnC;wBACdoC,mBAAiBb;wBACjBc,UAAUhC;wBACViC,UAAUzC;wBACVH,KAAKkB;wBACLV,WAAWe;wBACXsB,SAASd;wBACTxB,UAAU4B;wBACVW,WAAWV;wBACXW,MAAK;wBACLC,gBAAgBtC;wBAChBuC,UAAU7C;wBACVH,IAAIA,MAAMkB;wBACVP,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,KAACjB;wBACCqD,MAAMnC,WAAWvB,aAAaC;wBAC9B0D,MAAK;wBACL3C,WAAWgB;;kCAEb,KAAC4B;wBAAKnD,IAAI4B;wBAASrB,WAAU;kCAC1BN;;;;0BAGL,KAACR;gBAAaO,IAAIwB;gBAAgBhB,cAAcA;;;;AAGtD,GAAG"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    name,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    sharedClasses,\n    className,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", sharedClasses);\n  const iconClasses = classNames(\"mobius/CheckboxIcon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          name={name}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={selected ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius/CheckboxLabel\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["forwardRef","useRef","useState","useId","classNames","squareTick","square","ErrorMessage","spaceDelimitedList","useValidationClasses","Icon","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","name","value","ariaDescribedBy","rest","selected","setSelected","fallbackRef","refObj","inputId","validationClasses","sharedClasses","wrapperClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","icon","size","span"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,QAAQ,EAGRC,KAAK,QACA,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,MAAM,QAAQ,wBAAwB;AAC3D,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,IAAI,QAAQ,UAAU;AAE/B,OAAO,MAAMC,yBAGTX,WAAW,CAACY,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,IAAI,EACJC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGhB;IACJ,MAAM,CAACiB,UAAUC,YAAY,GAAG5B,SAAkBqB;IAClD,MAAMQ,cAAc9B,OAAyB;IAC7C,MAAM+B,SAASnB,OAAOkB;IACtB,MAAME,UAAU9B;IAChB,MAAM+B,oBAAoBzB,qBAAqB;QAC7CS;QACAC;IACF;IACA,MAAMgB,gBAAgB/B,WACpB;QACE,iBAAiBY;QACjB,iBAAiBa;QACjB,iBAAiB,OAAOZ,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAiB;IAEF,sEAAsE;IACtE,MAAME,iBAAiBhC,WACrB,UACA,mBACA+B,eACAd;IAEF,MAAMgB,eAAejC,WAAW,wBAAwB+B;IACxD,MAAMG,cAAclC,WAAW,uBAAuB+B;IACtD,MAAMI,iBAAiBpC;IACvB,MAAMqC,yBAAyBlB,eAAeiB,iBAAiBE;IAC/D,MAAMC,cAAclC,mBAAmB;QACrCgC;QACAb;KACD;IACD,MAAMgB,UAAUxC;IAEhB,MAAMyC,cAAc;QAClBd,YAAY,CAACD;IACf;IAEA,MAAMgB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI1B,UAAU;YACZA,SAAS0B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,MAAC7B;gBAAMM,WAAWe;;kCAChB,KAACgB;wBACCC,oBAAkBX;wBAClBY,qBAAmBd;wBACnBe,gBAAcpC;wBACdqC,mBAAiBb;wBACjBc,UAAUjC;wBACVkC,UAAU1C;wBACVH,KAAKmB;wBACLX,WAAWgB;wBACXsB,SAASd;wBACTzB,UAAU6B;wBACVW,WAAWV;wBACXW,MAAK;wBACLC,gBAAgBvC;wBAChBwC,UAAU9C;wBACVH,IAAIA,MAAMmB;wBACVR,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,KAAClB;wBACCsD,MAAMnC,WAAWxB,aAAaC;wBAC9B2D,MAAK;wBACL5C,WAAWiB;;kCAEb,KAAC4B;wBAAKpD,IAAI6B;wBAAStB,WAAU;kCAC1BN;;;;0BAGL,KAACR;gBAAaO,IAAIyB;gBAAgBjB,cAAcA;;;;AAGtD,GAAG"}

package/dist/esm/components/Checkbox/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/types.ts"],"sourcesContent":["import { ChangeEvent, ReactNode, Ref, RefAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Validation } from \"../../types\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxRef = Ref<CheckboxElementType>;\n\nexport interface CheckboxProps\n  extends DOMProps,\n    Validation,\n    RefAttributes<CheckboxElementType> {\n  className?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  errorMessage?: string;\n  /** The current value (controlled). */\n  value?: string;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  onChange?: (event: ChangeEvent<CheckboxElementType>) => void;\n  // The default value (uncontrolled).\n  defaultSelected?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport type CheckboxGroupElementType = HTMLDivElement;\ninterface CheckboxGroupPropsInternal\n  extends DOMProps,\n    Validation,\n    RefAttributes<CheckboxGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  // Defines number of items to be displayed on a single row when used with orientation=\"horizontal\". Defaults to number of items in the group.\n  itemsPerRow?: number;\n  errorMessage?: string;\n  onChange?: (values: string[]) => void;\n  // Defines a string value that labels the current element.\n  // \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  // \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string[];\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n}\n\ninterface HorizontalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"horizontal\";\n  itemsPerRow: number;\n}\n\ninterface VerticalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"vertical\";\n  itemsPerRow?: never;\n}\n\nexport type CheckboxGroupProps =\n  | HorizontalCheckboxGroupProps\n  | VerticalCheckboxGroupProps;\n\nexport type CheckboxGroupRef = Ref<CheckboxGroupElementType>;\n"],"names":[],"mappings":"AAiGA,WAA6D"}
+{"version":3,"sources":["../../../../src/components/Checkbox/types.ts"],"sourcesContent":["import { ChangeEvent, ReactNode, Ref, RefAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Validation } from \"../../types\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxRef = Ref<CheckboxElementType>;\n\nexport interface CheckboxProps\n  extends DOMProps,\n    Validation,\n    RefAttributes<CheckboxElementType> {\n  className?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  errorMessage?: string;\n  /** The name of the input */\n  name?: string;\n  /** The current value (controlled). */\n  value?: string;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  onChange?: (event: ChangeEvent<CheckboxElementType>) => void;\n  // The default value (uncontrolled).\n  defaultSelected?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport type CheckboxGroupElementType = HTMLDivElement;\ninterface CheckboxGroupPropsInternal\n  extends DOMProps,\n    Validation,\n    RefAttributes<CheckboxGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  // Defines number of items to be displayed on a single row when used with orientation=\"horizontal\". Defaults to number of items in the group.\n  itemsPerRow?: number;\n  errorMessage?: string;\n  onChange?: (values: string[]) => void;\n  // Defines a string value that labels the current element.\n  // \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  // \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string[];\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n}\n\ninterface HorizontalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"horizontal\";\n  itemsPerRow: number;\n}\n\ninterface VerticalCheckboxGroupProps extends CheckboxGroupPropsInternal {\n  orientation?: \"vertical\";\n  itemsPerRow?: never;\n}\n\nexport type CheckboxGroupProps =\n  | HorizontalCheckboxGroupProps\n  | VerticalCheckboxGroupProps;\n\nexport type CheckboxGroupRef = Ref<CheckboxGroupElementType>;\n"],"names":[],"mappings":"AAmGA,WAA6D"}

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

@@ -7,6 +7,8 @@ export interface CheckboxProps extends DOMProps, Validation, RefAttributes<Check
     className?: string;
     label?: ReactNode;
     errorMessage?: string;
+    /** The name of the input */
+    name?: string;
     /** The current value (controlled). */
     value?: string;
     isDisabled?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -41,24 +41,24 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "@react-types/button": "^3.9.4",
-    "@react-types/dialog": "^3.5.10",
-    "@react-types/progress": "^3.5.4",
-    "@swc/cli": "^0.3.14",
-    "@swc/core": "^1.6.5",
+    "@react-types/button": "^3.9.6",
+    "@react-types/dialog": "^3.5.12",
+    "@react-types/progress": "^3.5.6",
+    "@swc/cli": "^0.4.0",
+    "@swc/core": "^1.7.1",
     "@swc/jest": "^0.2.36",
-    "@testing-library/dom": "^10.2.0",
-    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@total-typescript/shoehorn": "^0.1.2",
     "@types/jest": "^29.5.12",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
     "csstype": "^3.1.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -67,27 +67,27 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "ts-jest": "^29.1.5",
+    "ts-jest": "^29.2.3",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.18",
-    "@simplybusiness/icons": "^4.12.0",
+    "@floating-ui/react": "^0.26.20",
+    "@simplybusiness/icons": "^4.12.1",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/Checkbox/Checkbox.test.tsx

@@ -13,6 +13,20 @@ describe("Checkbox", () => {
     expect(component).toBeTruthy();
   });
 
+  it("should render with a name", async () => {
+    const optionText = "Agree";
+    const name = "name";
+
+    render(
+      <form name="form">
+        <Checkbox label={optionText} name={name} value="value" />
+      </form>,
+    );
+
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toHaveAttribute("name", name);
+  });
+
   it("should call onChange when clicked", async () => {
     const callback = jest.fn();
     const optionText = "Agree";

package/src/components/Checkbox/Checkbox.tsx

@@ -34,6 +34,7 @@ export const Checkbox: ForwardedRefComponent<
     errorMessage,
     defaultSelected = false,
     isReadOnly,
+    name,
     value,
     ["aria-describedby"]: ariaDescribedBy,
     ...rest
@@ -115,6 +116,7 @@ export const Checkbox: ForwardedRefComponent<
           defaultChecked={defaultSelected}
           required={isRequired}
           id={id || inputId}
+          name={name}
           value={value}
           {...rest}
         />

package/src/components/Checkbox/types.ts

@@ -13,6 +13,8 @@ export interface CheckboxProps
   // The content to display as the label.
   label?: ReactNode;
   errorMessage?: string;
+  /** The name of the input */
+  name?: string;
   /** The current value (controlled). */
   value?: string;
   // Whether the input is disabled.

package/src/hooks/useBreakpoint/useBreakpoint.test.tsx

@@ -27,6 +27,11 @@ describe("useBreakpoint", () => {
     window.dispatchEvent(new Event("resize"));
   };
 
+  afterEach(() => {
+    // Reset window width
+    setWindowWidth(undefined as any);
+  });
+
   describe("given no breakpoints are provided through a Context", () => {
     it("returns default breakpoint", () => {
       render(<TestComponent />);