@simplybusiness/mobius 4.12.0 → 4.14.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # 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
+
+- e8b6adf: Remove `<RadioButton>`; align component styles with design guidelines
+- b260279: Add `<ProgressSteps>`; add `size` prop to `<Container>`
+
 ## 4.12.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;
@@ -37,9 +37,9 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         "--is-selected": selected,
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
-    }, validationClasses, className);
+    }, validationClasses);
     // Append an additional wrapper class name to differenitate from input
-    const wrapperClasses = (0, _dedupe.default)("mobius", "mobius/Checkbox", sharedClasses);
+    const wrapperClasses = (0, _dedupe.default)("mobius", "mobius/Checkbox", sharedClasses, className);
     const inputClasses = (0, _dedupe.default)("mobius/CheckboxInput", sharedClasses);
     const iconClasses = (0, _dedupe.default)("mobius/CheckboxIcon", sharedClasses);
     const errorMessageId = (0, _react.useId)();
@@ -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    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\"mobius\", \"mobius/Checkbox\", sharedClasses);\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,mBACAf;IAEF,sEAAsE;IACtE,MAAMmB,iBAAiBD,IAAAA,eAAU,EAAC,UAAU,mBAAmBD;IAC/D,MAAMG,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/cjs/components/Container/Container.js

@@ -11,14 +11,15 @@ Object.defineProperty(exports, "Container", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _utils = require("../../utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const Container = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { elementType: Element = "div", ...otherProps } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/Container", otherProps.className);
+    const { elementType: Element = "div", size = "md", ...otherProps } = props;
+    const classes = (0, _dedupe.default)("mobius", "mobius/Container", (0, _utils.sizeClasses)(size), otherProps.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {
         ref: ref,
         ...otherProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef, Ref, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ContainerElementType = HTMLDivElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: \"div\" | \"span\";\n  children?: ReactNode;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Container\",\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["Container","forwardRef","props","ref","elementType","Element","otherProps","classes","classNames","className","displayName"],"mappings":";;;;+BAiCSA;;;eAAAA;;;;uBAjCiD;+DACnC;;;;;;AAkBvB,MAAMA,0BACJC,IAAAA,iBAAU,EAAC,CAACC,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IAExD,MAAMK,UAAUC,IAAAA,eAAU,EACxB,UACA,oBACAF,WAAWG,SAAS;IAGtB,qBAAO,qBAACJ;QAAQF,KAAKA;QAAM,GAAGG,UAAU;QAAEG,WAAWF;;AACvD;AAEFP,UAAUU,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef, Ref, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type ContainerElementType = HTMLDivElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: \"div\" | \"span\";\n  size?: SizeType;\n  children?: ReactNode;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", size = \"md\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Container\",\n      sizeClasses(size),\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["Container","forwardRef","props","ref","elementType","Element","size","otherProps","classes","classNames","sizeClasses","className","displayName"],"mappings":";;;;+BAqCSA;;;eAAAA;;;;uBArCiD;+DACnC;uBAIK;;;;;;AAiB5B,MAAMA,0BACJC,IAAAA,iBAAU,EAAC,CAACC,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,OAAO,IAAI,EAAE,GAAGC,YAAY,GAAGL;IAErE,MAAMM,UAAUC,IAAAA,eAAU,EACxB,UACA,oBACAC,IAAAA,kBAAW,EAACJ,OACZC,WAAWI,SAAS;IAGtB,qBAAO,qBAACN;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEI,WAAWH;;AACvD;AAEFR,UAAUY,WAAW,GAAG"}

package/dist/cjs/components/Radio/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./Radio"), exports);
-_export_star(require("./RadioButton"), exports);
 _export_star(require("./RadioGroup"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/components/Radio/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["export * from \"./Radio\";\nexport * from \"./RadioButton\";\nexport * from \"./RadioGroup\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA"}
+{"version":3,"sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["export * from \"./Radio\";\nexport * from \"./RadioGroup\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA"}

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;
@@ -22,9 +22,9 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
         "--is-selected": selected,
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
-    }, validationClasses, className);
+    }, validationClasses);
     // Append an additional wrapper class name to differenitate from input
-    const wrapperClasses = classNames("mobius", "mobius/Checkbox", sharedClasses);
+    const wrapperClasses = classNames("mobius", "mobius/Checkbox", sharedClasses, className);
     const inputClasses = classNames("mobius/CheckboxInput", sharedClasses);
     const iconClasses = classNames("mobius/CheckboxIcon", sharedClasses);
     const errorMessageId = useId();
@@ -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    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\"mobius\", \"mobius/Checkbox\", sharedClasses);\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,mBACAZ;IAEF,sEAAsE;IACtE,MAAMc,iBAAiB/B,WAAW,UAAU,mBAAmB8B;IAC/D,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/esm/components/Container/Container.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
+import { sizeClasses } from "../../utils";
 const Container = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { elementType: Element = "div", ...otherProps } = props;
-    const classes = classNames("mobius", "mobius/Container", otherProps.className);
+    const { elementType: Element = "div", size = "md", ...otherProps } = props;
+    const classes = classNames("mobius", "mobius/Container", sizeClasses(size), otherProps.className);
     return /*#__PURE__*/ _jsx(Element, {
         ref: ref,
         ...otherProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef, Ref, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ContainerElementType = HTMLDivElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: \"div\" | \"span\";\n  children?: ReactNode;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Container\",\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["forwardRef","classNames","Container","props","ref","elementType","Element","otherProps","classes","className","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAuC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAkB3C,MAAMC,0BACJF,WAAW,CAACG,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAE,GAAGC,YAAY,GAAGJ;IAExD,MAAMK,UAAUP,WACd,UACA,oBACAM,WAAWE,SAAS;IAGtB,qBAAO,KAACH;QAAQF,KAAKA;QAAM,GAAGG,UAAU;QAAEE,WAAWD;;AACvD;AAEFN,UAAUQ,WAAW,GAAG;AACxB,SAASR,SAAS,GAAG"}
+{"version":3,"sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef, Ref, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type ContainerElementType = HTMLDivElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: \"div\" | \"span\";\n  size?: SizeType;\n  children?: ReactNode;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", size = \"md\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Container\",\n      sizeClasses(size),\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["forwardRef","classNames","sizeClasses","Container","props","ref","elementType","Element","size","otherProps","classes","className","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAuC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAI3C,SAASC,WAAW,QAAQ,cAAc;AAiB1C,MAAMC,0BACJH,WAAW,CAACI,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,OAAO,IAAI,EAAE,GAAGC,YAAY,GAAGL;IAErE,MAAMM,UAAUT,WACd,UACA,oBACAC,YAAYM,OACZC,WAAWE,SAAS;IAGtB,qBAAO,KAACJ;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEE,WAAWD;;AACvD;AAEFP,UAAUS,WAAW,GAAG;AACxB,SAAST,SAAS,GAAG"}

package/dist/esm/components/Radio/index.js

@@ -1,5 +1,4 @@
 export * from "./Radio";
-export * from "./RadioButton";
 export * from "./RadioGroup";
 
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Radio/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["export * from \"./Radio\";\nexport * from \"./RadioButton\";\nexport * from \"./RadioGroup\";\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,eAAe"}
+{"version":3,"sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["export * from \"./Radio\";\nexport * from \"./RadioGroup\";\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,eAAe"}

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/dist/types/components/Container/Container.d.ts

@@ -1,6 +1,7 @@
 import { Ref, RefAttributes, ReactNode } from "react";
 import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
+import { SizeType } from "../../types";
 export type ContainerElementType = HTMLDivElement;
 export type ContainerRef = Ref<ContainerElementType>;
 export interface ContainerProps extends DOMProps, RefAttributes<ContainerElementType> {
@@ -9,6 +10,7 @@ export interface ContainerProps extends DOMProps, RefAttributes<ContainerElement
     className?: string;
     /** HTML element for the Box */
     elementType?: "div" | "span";
+    size?: SizeType;
     children?: ReactNode;
 }
 declare const Container: ForwardedRefComponent<ContainerProps, ContainerElementType>;

package/dist/types/components/Radio/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./Radio";
-export * from "./RadioButton";
 export * from "./RadioGroup";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.12.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/Button/Button.story.styles.css

@@ -5,4 +5,5 @@
 .button-example-with-icon.mobius\/Button {
   display: inline-flex;
   gap: var(--size-xs);
+  align-items: center;
 }

package/src/components/Checkbox/Checkbox.mdx

@@ -24,7 +24,7 @@ import { Checkbox } from "@simplybusiness/mobius";
 
 ### Normal
 
-For this component appear selected use `defaultSelected` boolean prop.
+For this component to appear selected use `defaultSelected` boolean prop.
 
 This will allow user to change the value.
 

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

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Checkbox } from ".";
 
@@ -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";
@@ -193,17 +207,19 @@ describe("Checkbox", () => {
     });
 
     it("includes custom class name", () => {
-      const optionText = "Agree";
+      const labelText = "Agree";
       const customClass = "my-class";
 
-      const { getByLabelText } = render(
-        <Checkbox label={optionText} className={customClass} value="value" />,
+      render(
+        <Checkbox label={labelText} className={customClass} value="value" />,
       );
 
-      const option = getByLabelText(optionText);
+      const input = screen.getByRole("checkbox");
+      const label = input.parentElement;
 
-      expect(option).toHaveClass(customClass);
-      expect(option).toHaveClass(CHECKBOX_CLASS_NAME);
+      expect(input).not.toHaveClass(customClass);
+      expect(input).toHaveClass(CHECKBOX_CLASS_NAME);
+      expect(label).toHaveClass(customClass);
     });
 
     it("only sets id on the input element", () => {

package/src/components/Checkbox/Checkbox.tsx

@@ -34,6 +34,7 @@ export const Checkbox: ForwardedRefComponent<
     errorMessage,
     defaultSelected = false,
     isReadOnly,
+    name,
     value,
     ["aria-describedby"]: ariaDescribedBy,
     ...rest
@@ -54,10 +55,14 @@ export const Checkbox: ForwardedRefComponent<
       "--is-optional": typeof isRequired === "boolean" && !isRequired,
     },
     validationClasses,
-    className,
   );
   // Append an additional wrapper class name to differenitate from input
-  const wrapperClasses = classNames("mobius", "mobius/Checkbox", sharedClasses);
+  const wrapperClasses = classNames(
+    "mobius",
+    "mobius/Checkbox",
+    sharedClasses,
+    className,
+  );
   const inputClasses = classNames("mobius/CheckboxInput", sharedClasses);
   const iconClasses = classNames("mobius/CheckboxIcon", sharedClasses);
   const errorMessageId = useId();
@@ -111,6 +116,7 @@ export const Checkbox: ForwardedRefComponent<
           defaultChecked={defaultSelected}
           required={isRequired}
           id={id || inputId}
+          name={name}
           value={value}
           {...rest}
         />

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

@@ -415,7 +415,7 @@ describe("CheckboxGroup", () => {
 
       const option = getByLabelText(optionText);
 
-      expect(option).toHaveClass(customClass);
+      expect(option.parentElement).toHaveClass(customClass);
       expect(option).toHaveClass(CHECKBOX_CLASS_NAME);
     });
 

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/components/Container/Container.tsx

@@ -2,6 +2,8 @@ import { forwardRef, Ref, RefAttributes, ReactNode } from "react";
 import classNames from "classnames/dedupe";
 import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
+import { SizeType } from "../../types";
+import { sizeClasses } from "../../utils";
 
 export type ContainerElementType = HTMLDivElement;
 export type ContainerRef = Ref<ContainerElementType>;
@@ -14,16 +16,18 @@ export interface ContainerProps
   className?: string;
   /** HTML element for the Box */
   elementType?: "div" | "span";
+  size?: SizeType;
   children?: ReactNode;
 }
 
 const Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =
   forwardRef((props: ContainerProps, ref: ContainerRef) => {
-    const { elementType: Element = "div", ...otherProps } = props;
+    const { elementType: Element = "div", size = "md", ...otherProps } = props;
 
     const classes = classNames(
       "mobius",
       "mobius/Container",
+      sizeClasses(size),
       otherProps.className,
     );
 

package/src/components/PasswordField/PasswordField.mdx

@@ -53,9 +53,7 @@ The following HTML is rendered for a PasswordField:
 
 Class names are augmented with the following flags if true:
 
-- \--is-focused
 - \--is-disabled
-- \--is-hovered
 - \--is-selected
 - \--is-valid
 - \--is-invalid

package/src/components/Radio/index.tsx

@@ -1,3 +1,2 @@
 export * from "./Radio";
-export * from "./RadioButton";
 export * from "./RadioGroup";

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 />);

package/src/utils/StoryContainer.tsx

@@ -5,7 +5,7 @@ const css = `
 
   @media (min-width: 641px) {
     :root {
-      --story-container-width: var(--size-inner-container);
+      --story-container-width: 626px;
     }
   }
 

package/dist/cjs/components/Radio/RadioButton.js

@@ -1,33 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "RadioButton", {
-    enumerable: true,
-    get: function() {
-        return RadioButton;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
-const _Radio = require("./Radio");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const RadioButton = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const classes = (0, _dedupe.default)(props.className, "--is-radio-button");
-    const radioProps = {
-        ...props,
-        className: classes,
-        ref
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Radio.Radio, {
-        ...radioProps
-    });
-});
-
-//# sourceMappingURL=RadioButton.js.map

package/dist/cjs/components/Radio/RadioButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Radio/RadioButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Radio, RadioElementType, RadioProps, RadioRef } from \"./Radio\";\n\nexport const RadioButton: ForwardedRefComponent<RadioProps, RadioElementType> =\n  forwardRef((props: RadioProps, ref: RadioRef) => {\n    const classes = classNames(props.className, \"--is-radio-button\");\n    const radioProps = {\n      ...props,\n      className: classes,\n      ref,\n    };\n\n    return <Radio {...radioProps} />;\n  });\n"],"names":["RadioButton","forwardRef","props","ref","classes","classNames","className","radioProps","Radio"],"mappings":"AAAA;;;;;+BAOaA;;;eAAAA;;;;uBALc;+DACJ;uBAEuC;;;;;;AAEvD,MAAMA,4BACXC,IAAAA,iBAAU,EAAC,CAACC,OAAmBC;IAC7B,MAAMC,UAAUC,IAAAA,eAAU,EAACH,MAAMI,SAAS,EAAE;IAC5C,MAAMC,aAAa;QACjB,GAAGL,KAAK;QACRI,WAAWF;QACXD;IACF;IAEA,qBAAO,qBAACK,YAAK;QAAE,GAAGD,UAAU;;AAC9B"}

package/dist/esm/components/Radio/RadioButton.js

@@ -1,18 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import classNames from "classnames/dedupe";
-import { Radio } from "./Radio";
-export const RadioButton = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const classes = classNames(props.className, "--is-radio-button");
-    const radioProps = {
-        ...props,
-        className: classes,
-        ref
-    };
-    return /*#__PURE__*/ _jsx(Radio, {
-        ...radioProps
-    });
-});
-
-//# sourceMappingURL=RadioButton.js.map

package/dist/esm/components/Radio/RadioButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Radio/RadioButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Radio, RadioElementType, RadioProps, RadioRef } from \"./Radio\";\n\nexport const RadioButton: ForwardedRefComponent<RadioProps, RadioElementType> =\n  forwardRef((props: RadioProps, ref: RadioRef) => {\n    const classes = classNames(props.className, \"--is-radio-button\");\n    const radioProps = {\n      ...props,\n      className: classes,\n      ref,\n    };\n\n    return <Radio {...radioProps} />;\n  });\n"],"names":["forwardRef","classNames","Radio","RadioButton","props","ref","classes","className","radioProps"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AACnC,OAAOC,gBAAgB,oBAAoB;AAE3C,SAASC,KAAK,QAAgD,UAAU;AAExE,OAAO,MAAMC,4BACXH,WAAW,CAACI,OAAmBC;IAC7B,MAAMC,UAAUL,WAAWG,MAAMG,SAAS,EAAE;IAC5C,MAAMC,aAAa;QACjB,GAAGJ,KAAK;QACRG,WAAWD;QACXD;IACF;IAEA,qBAAO,KAACH;QAAO,GAAGM,UAAU;;AAC9B,GAAG"}

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

@@ -1,3 +0,0 @@
-import { ForwardedRefComponent } from "../../types/components";
-import { RadioElementType, RadioProps } from "./Radio";
-export declare const RadioButton: ForwardedRefComponent<RadioProps, RadioElementType>;

package/dist/types/components/Radio/RadioButton.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { RadioGroup } from "./RadioGroup";
-type StoryType = StoryObj<typeof RadioGroup>;
-declare const meta: Meta<typeof RadioGroup>;
-export declare const Normal: StoryType;
-export declare const LabelProp: StoryType;
-export declare const Selected: StoryType;
-export declare const Disabled: StoryType;
-export declare const VerticalOrientation: StoryType;
-export declare const IconButtons: StoryType;
-export default meta;

package/dist/types/components/Radio/RadioButton.test.d.ts

@@ -1 +0,0 @@
-export {};

package/src/components/Radio/RadioButton.mdx

@@ -1,150 +0,0 @@
-import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
-import { RadioButton } from "./RadioButton";
-import { RadioGroup } from "./RadioGroup";
-import * as RadioButtonStories from "./RadioButton.stories";
-
-<Meta of={RadioButtonStories} />
-
-# RadioButton
-
-**RadioButton** is used to display a group of buttons, only one of which can be selected. It must be contained within a `<RadioGroup />` component to handle the ARIA attributes correctly.
-
-A RadioButton can wrap an Icon and must have a `label` or `aria-labelledby` prop. A visible label is displayed inside the button.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { RadioButton, RadioGroup } from "@simplybusiness/mobius";
-```
-
-## Examples
-
-### Normal
-
-For a radio button to appear selected use `value` prop which expects a string.
-
-For example, `<RadioGroup defaultValue="blue">`
-
-<Canvas of={RadioButtonStories.Normal} />
-
-### Label Prop
-
-<Canvas of={RadioButtonStories.LabelProp} />
-
-### Selected
-
-<Canvas of={RadioButtonStories.Selected} />
-
-### Disabled
-
-<Canvas of={RadioButtonStories.Disabled} />
-
-### Vertical Orientation
-
-<Canvas of={RadioButtonStories.VerticalOrientation} />
-
-### Icon Buttons
-
-<Canvas of={RadioButtonStories.IconButtons} />
-
-## Accessibility
-
-When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the radio group is labeled by a separate element, the `aria-labelledby` props must be used with the id of the labeling element.
-
-## Events
-
-The `onChange` prop can be used to listen to changes of the selected radio button. See the prop table for the complete list of events supported.
-
-## RadioButton Props
-
-<ArgTypes of={{ ...RadioGroup, ...RadioButton }} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a Radio Group with simple label prop only:
-
-```html
-<div class="mobius mobius/RadioGroup --is-horizontal">
-  <label class="mobius/Label --is-horizontal"> Color </label>
-  <div class="mobius/RadioWrapper --is-horizontal">
-    <label class="mobius/RadioLabel --is-radio-button">
-      <input class="mobius/RadioInput" type="radio" value="red" />
-      <div class="mobius/RadioContent">Red</div>
-    </label>
-    <label class="mobius/RadioLabel --is-radio-button">
-      <input class="mobius/RadioInput" type="radio" value="blue" checked />
-      <div class="mobius/RadioContent">Blue</div>
-    </label>
-  </div>
-</div>
-```
-
-And this is rendered when there is a child Icon component:
-
-```html
-<div class="mobius mobius mobius/RadioGroup --is-horizontal">
-  <label class="mobius/Label --is-horizontal">Business Type</label>
-  <div class="mobius/RadioWrapper">
-    <label class="mobius/RadioLabel --is-multiline --is-radio-button">
-      <input
-        class="mobius/RadioInput --is-multiline"
-        type="radio"
-        value="sole_trader"
-      />
-      <div class="mobius/RadioContentMultiline">
-        <div class="mobius/RadioContentFirstLine">Sole Trader</div>
-        <div class="mobius/RadioExtraContent">{Icon}</div>
-      </div>
-    </label>
-    <label class="mobius/RadioLabel --is-multiline --is-radio-button">
-      <input
-        class="mobius/RadioInput --is-multiline"
-        type="radio"
-        value="partnership"
-      />
-      <div class="mobius/RadioContentMultiline">
-        <div class="mobius/RadioContentFirstLine">Partnership</div>
-        <div class="mobius/RadioExtraContent">{Icon}</div>
-      </div>
-    </label>
-    <label class="mobius/RadioLabel --is-multiline --is-radio-button">
-      <input
-        class="mobius/RadioInput --is-multiline"
-        type="radio"
-        value="ltd_company"
-      />
-      <div class="mobius/RadioContentMultiline">
-        <div class="mobius/RadioContentFirstLine">Ltd Company</div>
-        <div class="mobius/RadioExtraContent">{Icon}</div>
-      </div>
-    </label>
-  </div>
-</div>
-```
-
-Class names are augmented with the following flags if true (affected classes shown above):
-
-- \--is-radio-button
-- \--is-disabled
-- \--is-selected
-- \--is-multiline
-- \--is-required
-
-Class names for `<RadioGroup />`:
-
-- \--is-disabled
-- \--is-valid
-- \--is-invalid
-- \--is-required
-- \--is-optional
-- \--is-horizontal OR --is-vertical
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Radio) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Radio/RadioButton.stories.tsx

@@ -1,148 +0,0 @@
-import { menu, star, user } from "@simplybusiness/icons";
-import type { Meta, StoryObj } from "@storybook/react";
-import { excludeControls } from "../../utils";
-import { StoryContainer } from "../../utils/StoryContainer";
-import { Icon } from "../Icon";
-import { RadioButton } from "./RadioButton";
-import { RadioGroup, RadioGroupProps } from "./RadioGroup";
-
-type StoryType = StoryObj<typeof RadioGroup>;
-
-const meta: Meta<typeof RadioGroup> = {
-  title: "Forms/RadioButton",
-  component: RadioGroup,
-  argTypes: {
-    orientation: {
-      control: { type: "radio" },
-      options: ["horizontal", "vertical"],
-    },
-    ...excludeControls(
-      "name",
-      "groupDisabled",
-      "selected",
-      "setSelected",
-      "defaultValue",
-      "value",
-    ),
-  },
-  args: {
-    errorMessage: "",
-  },
-  decorators: [
-    Story => (
-      <StoryContainer>
-        <Story />
-      </StoryContainer>
-    ),
-  ],
-};
-
-export const Normal: StoryType = {
-  render: (args: RadioGroupProps) => (
-    <RadioGroup {...args}>
-      <RadioButton value="red">Red</RadioButton>
-      <RadioButton value="blue">Blue</RadioButton>
-    </RadioGroup>
-  ),
-  args: {
-    label: "Color",
-    orientation: "horizontal",
-    isDisabled: false,
-    isRequired: false,
-    defaultValue: "blue",
-  },
-};
-
-export const LabelProp: StoryType = {
-  render: (args: RadioGroupProps) => (
-    <RadioGroup {...args}>
-      <RadioButton value="red" label="Red" />
-      <RadioButton value="blue" label="Blue" />
-    </RadioGroup>
-  ),
-  args: {
-    label: "Color",
-    orientation: "horizontal",
-    isDisabled: false,
-    isRequired: false,
-  },
-};
-
-export const Selected: StoryType = {
-  render: (args: RadioGroupProps) => (
-    <RadioGroup {...args}>
-      <RadioButton value="red" label="Red" />
-      <RadioButton value="blue" label="Blue" />
-    </RadioGroup>
-  ),
-  args: {
-    label: "Color",
-    defaultValue: "red",
-    orientation: "horizontal",
-    isDisabled: false,
-    isRequired: false,
-  },
-  argTypes: {
-    value: {
-      control: { type: "radio" },
-      options: ["red", "blue"],
-    },
-  },
-};
-
-export const Disabled: StoryType = {
-  render: (args: RadioGroupProps) => (
-    <RadioGroup {...args}>
-      <RadioButton value="red" label="Red" />
-      <RadioButton value="blue" label="Blue" />
-    </RadioGroup>
-  ),
-  args: {
-    label: "Color",
-    orientation: "horizontal",
-    isDisabled: true,
-    isRequired: false,
-    defaultValue: "red",
-  },
-};
-
-export const VerticalOrientation: StoryType = {
-  render: (args: RadioGroupProps) => (
-    <RadioGroup {...args}>
-      <RadioButton value="red" label="Red" />
-      <RadioButton value="blue" label="Blue" />
-    </RadioGroup>
-  ),
-  args: {
-    label: "Color",
-    orientation: "vertical",
-    isDisabled: false,
-    isRequired: false,
-    defaultValue: "blue",
-  },
-};
-
-export const IconButtons: StoryType = {
-  render: (args: RadioGroupProps) => (
-    <RadioGroup {...args}>
-      <RadioButton value="sole_trader" label="Sole Trader">
-        <Icon icon={user} />
-      </RadioButton>
-      <RadioButton value="partnership" label="Partnership">
-        <Icon icon={star} />
-      </RadioButton>
-      <RadioButton value="company" label="Ltd Company">
-        <Icon icon={menu} />
-      </RadioButton>
-    </RadioGroup>
-  ),
-  args: {
-    label: "Business Type",
-    orientation: "horizontal",
-    isDisabled: false,
-    isRequired: false,
-    defaultValue: "partnership",
-  },
-};
-
-export default meta;

package/src/components/Radio/RadioButton.test.tsx

@@ -1,35 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { RadioGroup, RadioButton } from ".";
-
-describe("RadioButton", () => {
-  it("should render without error", () => {
-    const component = render(
-      <RadioGroup label="Color">
-        <RadioButton value="red">Red</RadioButton>
-        <RadioButton value="blue">Blue</RadioButton>
-      </RadioGroup>,
-    );
-
-    expect(component).toBeTruthy();
-  });
-
-  it("uses base Mobius class", () => {
-    const labelText = "Color";
-    const redText = "Red";
-    const blueText = "Blue";
-    const RADIO_BUTTON_CLASS_NAME = "--is-radio-button";
-
-    render(
-      <RadioGroup label={labelText}>
-        <RadioButton value="red">{redText}</RadioButton>
-        <RadioButton value="blue">{blueText}</RadioButton>
-      </RadioGroup>,
-    );
-
-    const redOption = screen.getByLabelText(redText);
-    const blueOption = screen.getByLabelText(blueText);
-
-    expect(redOption.parentElement).toHaveClass(RADIO_BUTTON_CLASS_NAME);
-    expect(blueOption.parentElement).toHaveClass(RADIO_BUTTON_CLASS_NAME);
-  });
-});

package/src/components/Radio/RadioButton.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import { forwardRef } from "react";
-import classNames from "classnames/dedupe";
-import { ForwardedRefComponent } from "../../types/components";
-import { Radio, RadioElementType, RadioProps, RadioRef } from "./Radio";
-
-export const RadioButton: ForwardedRefComponent<RadioProps, RadioElementType> =
-  forwardRef((props: RadioProps, ref: RadioRef) => {
-    const classes = classNames(props.className, "--is-radio-button");
-    const radioProps = {
-      ...props,
-      className: classes,
-      ref,
-    };
-
-    return <Radio {...radioProps} />;
-  });