@simplybusiness/mobius 4.8.4 → 4.8.5

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

@@ -5,7 +5,7 @@ import classNames from "classnames/dedupe";
 import { ErrorMessage } from "../ErrorMessage";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { id, label, isDisabled, isRequired, validationState, onChange, className, errorMessage, defaultSelected = false, isReadOnly, value } = props;
+    const { id, label, isDisabled, isRequired, validationState, onChange, className, errorMessage, defaultSelected = false, isReadOnly, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
     const [selected, setSelected] = useState(defaultSelected);
     const fallbackRef = useRef(null);
     const refObj = ref || fallbackRef;
@@ -25,7 +25,7 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = spaceDelimitedList([
         shouldErrorMessageShow,
-        props["aria-describedby"]
+        ariaDescribedBy
     ]);
     const labelId = useId();
     const toggleState = ()=>{
@@ -68,7 +68,8 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
                         defaultChecked: defaultSelected,
                         required: isRequired,
                         id: id || inputId,
-                        value: value
+                        value: value,
+                        ...rest
                     }),
                     /*#__PURE__*/ _jsx("span", {
                         className: "mobius/CheckboxLabel",

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 { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\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    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    value,\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 checkboxClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    checkboxClasses,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", checkboxClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\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 id={labelId} className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={validationState === \"invalid\"}\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        />\n        <span className=\"mobius/CheckboxLabel\">{label}</span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["forwardRef","useRef","useState","useId","classNames","ErrorMessage","spaceDelimitedList","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","onChange","className","errorMessage","defaultSelected","isReadOnly","value","selected","setSelected","fallbackRef","refObj","inputId","checkboxClasses","wrapperClasses","inputClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,QAAQ,EAGRC,KAAK,QACA,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,OAAO,MAAMC,yBAGTP,WAAW,CAACQ,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACN,GAAGZ;IACJ,MAAM,CAACa,UAAUC,YAAY,GAAGpB,SAAkBgB;IAClD,MAAMK,cAActB,OAAyB;IAC7C,MAAMuB,SAASf,OAAOc;IACtB,MAAME,UAAUtB;IAChB,MAAMuB,kBAAkBtB,WACtB;QACE,iBAAiBQ;QACjB,iBAAiBS;QACjB,cAAcP,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOD,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAG;IAEF,sEAAsE;IACtE,MAAMW,iBAAiBvB,WACrB,UACA,mBACAsB;IAEF,MAAME,eAAexB,WAAW,wBAAwBsB;IACxD,MAAMG,iBAAiB1B;IACvB,MAAM2B,yBAAyBb,eAAeY,iBAAiBE;IAC/D,MAAMC,cAAc1B,mBAAmB;QACrCwB;QACAtB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMyB,UAAU9B;IAEhB,MAAM+B,cAAc;QAClBZ,YAAY,CAACD;IACf;IAEA,MAAMc,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAIrB,UAAU;YACZA,SAASqB;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,MAACvB;gBAAMD,IAAIuB;gBAASjB,WAAWW;;kCAC7B,KAACe;wBACCC,oBAAkBX;wBAClBY,qBAAmBd;wBACnBe,gBAAc/B,oBAAoB;wBAClCgC,UAAU3B;wBACV4B,UAAUnC;wBACVH,KAAKe;wBACLR,WAAWY;wBACXoB,SAASb;wBACTpB,UAAUwB;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgBjC;wBAChBkC,UAAUvC;wBACVH,IAAIA,MAAMe;wBACVL,OAAOA;;kCAET,KAACiC;wBAAKrC,WAAU;kCAAwBL;;;;0BAE1C,KAACN;gBAAaK,IAAImB;gBAAgBZ,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 { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\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    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 checkboxClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    checkboxClasses,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", checkboxClasses);\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 id={labelId} className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={validationState === \"invalid\"}\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        <span className=\"mobius/CheckboxLabel\">{label}</span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["forwardRef","useRef","useState","useId","classNames","ErrorMessage","spaceDelimitedList","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","fallbackRef","refObj","inputId","checkboxClasses","wrapperClasses","inputClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,QAAQ,EAGRC,KAAK,QACA,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,OAAO,MAAMC,yBAGTP,WAAW,CAACQ,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGd;IACJ,MAAM,CAACe,UAAUC,YAAY,GAAGtB,SAAkBgB;IAClD,MAAMO,cAAcxB,OAAyB;IAC7C,MAAMyB,SAASjB,OAAOgB;IACtB,MAAME,UAAUxB;IAChB,MAAMyB,kBAAkBxB,WACtB;QACE,iBAAiBQ;QACjB,iBAAiBW;QACjB,cAAcT,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOD,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAG;IAEF,sEAAsE;IACtE,MAAMa,iBAAiBzB,WACrB,UACA,mBACAwB;IAEF,MAAME,eAAe1B,WAAW,wBAAwBwB;IACxD,MAAMG,iBAAiB5B;IACvB,MAAM6B,yBAAyBf,eAAec,iBAAiBE;IAC/D,MAAMC,cAAc5B,mBAAmB;QACrC0B;QACAX;KACD;IACD,MAAMc,UAAUhC;IAEhB,MAAMiC,cAAc;QAClBZ,YAAY,CAACD;IACf;IAEA,MAAMc,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAIvB,UAAU;YACZA,SAASuB;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,MAACzB;gBAAMD,IAAIyB;gBAASnB,WAAWa;;kCAC7B,KAACe;wBACCC,oBAAkBX;wBAClBY,qBAAmBd;wBACnBe,gBAAcjC,oBAAoB;wBAClCkC,UAAU7B;wBACV8B,UAAUrC;wBACVH,KAAKiB;wBACLV,WAAWc;wBACXoB,SAASb;wBACTtB,UAAU0B;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgBnC;wBAChBoC,UAAUzC;wBACVH,IAAIA,MAAMiB;wBACVP,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,KAACiC;wBAAKvC,WAAU;kCAAwBL;;;;0BAE1C,KAACN;gBAAaK,IAAIqB;gBAAgBd,cAAcA;;;;AAGtD,GAAG"}

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

@@ -6,7 +6,7 @@ import { Label } from "../Label";
 import { ErrorMessage } from "../ErrorMessage";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { label, isDisabled = false, isRequired, validationState, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, ...rest } = props;
+    const { label, isDisabled = false, isRequired, validationState, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
     const [selected, setSelected] = useState(defaultValue);
     const checkboxGroupClasses = classNames("mobius", "mobius/CheckboxGroup", className, {
         "--is-horizontal": orientation === "horizontal",
@@ -52,6 +52,9 @@ export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
         ref: ref,
         className: checkboxGroupClasses,
         role: "group",
+        style: {
+            "--checkbox-items-per-row": itemsPerRow || Children.count(children)
+        },
         children: [
             label && /*#__PURE__*/ _jsx(Label, {
                 elementType: "span",
@@ -64,7 +67,6 @@ export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
                 children: Children.map(children, (child)=>{
                     if (/*#__PURE__*/ isValidElement(child)) {
                         return /*#__PURE__*/ cloneElement(child, {
-                            orientation,
                             isDisabled,
                             isRequired,
                             isReadOnly,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/CheckboxGroup\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const labelClasses = classNames({\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/CheckboxWrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              orientation,\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              validationState,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["Children","forwardRef","cloneElement","isValidElement","useId","useState","useEffect","classNames","Label","ErrorMessage","spaceDelimitedList","CheckboxGroup","props","ref","label","isDisabled","isRequired","validationState","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","rest","selected","setSelected","checkboxGroupClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","handleChange","event","target","value","checked","filter","item","div","aria-labelledby","role","elementType","id","map","child","defaultSelected","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SACEA,QAAQ,EACRC,UAAU,EAEVC,YAAY,EACZC,cAAc,EACdC,KAAK,EAELC,QAAQ,EACRC,SAAS,QACJ,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAQ3C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,OAAO,MAAMC,8BAGTV,WAAW,CAACW,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACV,GAAGC,MACJ,GAAGb;IACJ,MAAM,CAACc,UAAUC,YAAY,GAAGtB,SAAmBkB;IACnD,MAAMK,uBAAuBrB,WAC3B,UACA,wBACAa,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOF,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMa,eAAetB,WAAW;QAC9B,cAAcU,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBF;IACnB;IACA,MAAMe,iBAAiB1B;IACvB,MAAM2B,yBAAyBV,eAAeS,iBAAiBE;IAC/D,MAAMC,cAAcvB,mBAAmB;QACrCqB;QACAnB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMsB,UAAU9B;IAEhB,MAAM+B,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZZ,YAAYD,SAASc,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXZ,YAAY;mBAAID;gBAAUY;aAAM;QAClC;IACF;IAEAhC,UAAU;QACR,IAAIa,UAAU;YACZA,SAASO;QACX;IACF,GAAG;QAACA;QAAUP;KAAS;IAEvB,qBACE,MAACuB;QACE,GAAGjB,IAAI;QACRkB,mBAAiB/B,KAAK,CAAC,kBAAkB,IAAIsB;QAC7CrB,KAAKA;QACLO,WAAWQ;QACXgB,MAAK;;YAEJ9B,uBACC,KAACN;gBAAMqC,aAAY;gBAAOC,IAAIZ;gBAASd,WAAWS;0BAC/Cf;;0BAGL,KAAC4B;gBAAItB,WAAU;0BACZpB,SAAS+C,GAAG,CAACzB,UAAU0B,CAAAA;oBACtB,kBAAI7C,eAAe6C,QAAQ;wBACzB,qBAAO9C,aAAa8C,OAAuB;4BACzC9B;4BACAH;4BACAC;4BACAQ;4BACAP;4BACAgC,iBAAiBvB,SAASwB,QAAQ,CAACF,MAAMpC,KAAK,CAAC0B,KAAK;4BACpDnB,UAAUgB;4BACV,oBAAoBF;wBACtB;oBACF;oBAEA,OAAOe;gBACT;;YAED3B,8BACC,KAACZ;gBAAaqC,IAAIhB;gBAAgBT,cAAcA;;;;AAIxD,GAAG"}
+{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/CheckboxGroup\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const labelClasses = classNames({\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/CheckboxWrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              validationState,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["Children","forwardRef","cloneElement","isValidElement","useId","useState","useEffect","classNames","Label","ErrorMessage","spaceDelimitedList","CheckboxGroup","props","ref","label","isDisabled","isRequired","validationState","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","checkboxGroupClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","handleChange","event","target","value","checked","filter","item","div","aria-labelledby","role","style","count","elementType","id","map","child","defaultSelected","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SACEA,QAAQ,EACRC,UAAU,EAEVC,YAAY,EACZC,cAAc,EACdC,KAAK,EAELC,QAAQ,EACRC,SAAS,QACJ,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAQ3C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,OAAO,MAAMC,8BAGTV,WAAW,CAACW,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGd;IACJ,MAAM,CAACe,UAAUC,YAAY,GAAGvB,SAAmBkB;IACnD,MAAMM,uBAAuBtB,WAC3B,UACA,wBACAa,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOF,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMc,eAAevB,WAAW;QAC9B,cAAcU,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBF;IACnB;IACA,MAAMgB,iBAAiB3B;IACvB,MAAM4B,yBAAyBX,eAAeU,iBAAiBE;IAC/D,MAAMC,cAAcxB,mBAAmB;QACrCsB;QACApB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMuB,UAAU/B;IAEhB,MAAMgC,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZZ,YAAYD,SAASc,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXZ,YAAY;mBAAID;gBAAUY;aAAM;QAClC;IACF;IAEAjC,UAAU;QACR,IAAIa,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,MAACwB;QACE,GAAGjB,IAAI;QACRkB,mBAAiBhC,KAAK,CAAC,kBAAkB,IAAIuB;QAC7CtB,KAAKA;QACLO,WAAWS;QACXgB,MAAK;QACLC,OACE;YACE,4BAA4BrB,eAAezB,SAAS+C,KAAK,CAACzB;QAC5D;;YAGDR,uBACC,KAACN;gBAAMwC,aAAY;gBAAOC,IAAId;gBAASf,WAAWU;0BAC/ChB;;0BAGL,KAAC6B;gBAAIvB,WAAU;0BACZpB,SAASkD,GAAG,CAAC5B,UAAU6B,CAAAA;oBACtB,kBAAIhD,eAAegD,QAAQ;wBACzB,qBAAOjD,aAAaiD,OAAuB;4BACzCpC;4BACAC;4BACAQ;4BACAP;4BACAmC,iBAAiBzB,SAAS0B,QAAQ,CAACF,MAAMvC,KAAK,CAAC2B,KAAK;4BACpDpB,UAAUiB;4BACV,oBAAoBF;wBACtB;oBACF;oBAEA,OAAOiB;gBACT;;YAED9B,8BACC,KAACZ;gBAAawC,IAAIlB;gBAAgBV,cAAcA;;;;AAIxD,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\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxRef = Ref<CheckboxElementType>;\n\nexport interface CheckboxProps\n  extends DOMProps,\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 should display its \"valid\" or \"invalid\" visual styling.\n  validationState?: \"valid\" | \"invalid\";\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;\n\nexport interface CheckboxGroupProps\n  extends DOMProps,\n    RefAttributes<CheckboxGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\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 the input should display its \"valid\" or \"invalid\" visual styling.\n  validationState?: \"valid\" | \"invalid\";\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\nexport type CheckboxGroupRef = Ref<CheckboxGroupElementType>;\n"],"names":[],"rangeMappings":"","mappings":"AAmFA,WAA6D"}
+{"version":3,"sources":["../../../../src/components/Checkbox/types.ts"],"sourcesContent":["import { ChangeEvent, ReactNode, Ref, RefAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxRef = Ref<CheckboxElementType>;\n\nexport interface CheckboxProps\n  extends DOMProps,\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 should display its \"valid\" or \"invalid\" visual styling.\n  validationState?: \"valid\" | \"invalid\";\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    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 the input should display its \"valid\" or \"invalid\" visual styling.\n  validationState?: \"valid\" | \"invalid\";\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":[],"rangeMappings":"","mappings":"AAkGA,WAA6D"}

package/dist/esm/components/Flex/propUtils.js

@@ -3,7 +3,6 @@ import { filterUndefinedProps } from "../../utils/filterUndefinedProps";
 export const buildFlexStyles = (props)=>{
     const { flexDirection, flexWrap, flexGrow, flex, justifyContent, alignItems, alignContent, gap, rowGap, columnGap } = props;
     const styleProps = {
-        display: "flex",
         flexDirection,
         flexWrap,
         flexGrow,

package/dist/esm/components/Flex/propUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Flex/propUtils.ts"],"sourcesContent":["import { getSpacingValue } from \"../../utils\";\nimport { filterUndefinedProps } from \"../../utils/filterUndefinedProps\";\nimport { FlexNonStyleProps, FlexProps, FlexStyleProps } from \"./types\";\n\nexport const buildFlexStyles = (props: FlexStyleProps) => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n  } = props;\n\n  const styleProps = {\n    display: \"flex\",\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap: getSpacingValue(gap),\n    columnGap: getSpacingValue(columnGap),\n    rowGap: getSpacingValue(rowGap),\n  };\n\n  return filterUndefinedProps(styleProps);\n};\n\nexport const splitProps = (\n  props: FlexProps,\n): [FlexStyleProps, FlexNonStyleProps] => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n    ...otherProps\n  } = props;\n\n  return [\n    {\n      flexDirection,\n      flexWrap,\n      flexGrow,\n      flex,\n      justifyContent,\n      alignItems,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n    },\n    otherProps,\n  ];\n};\n"],"names":["getSpacingValue","filterUndefinedProps","buildFlexStyles","props","flexDirection","flexWrap","flexGrow","flex","justifyContent","alignItems","alignContent","gap","rowGap","columnGap","styleProps","display","splitProps","otherProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,SAASC,oBAAoB,QAAQ,mCAAmC;AAGxE,OAAO,MAAMC,kBAAkB,CAACC;IAC9B,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACV,GAAGV;IAEJ,MAAMW,aAAa;QACjBC,SAAS;QACTX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC,KAAKX,gBAAgBW;QACrBE,WAAWb,gBAAgBa;QAC3BD,QAAQZ,gBAAgBY;IAC1B;IAEA,OAAOX,qBAAqBa;AAC9B,EAAE;AAEF,OAAO,MAAME,aAAa,CACxBb;IAEA,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACT,GAAGI,YACJ,GAAGd;IAEJ,OAAO;QACL;YACEC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACAI;KACD;AACH,EAAE"}
+{"version":3,"sources":["../../../../src/components/Flex/propUtils.ts"],"sourcesContent":["import { getSpacingValue } from \"../../utils\";\nimport { filterUndefinedProps } from \"../../utils/filterUndefinedProps\";\nimport { FlexNonStyleProps, FlexProps, FlexStyleProps } from \"./types\";\n\nexport const buildFlexStyles = (props: FlexStyleProps) => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n  } = props;\n\n  const styleProps = {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap: getSpacingValue(gap),\n    columnGap: getSpacingValue(columnGap),\n    rowGap: getSpacingValue(rowGap),\n  };\n\n  return filterUndefinedProps(styleProps);\n};\n\nexport const splitProps = (\n  props: FlexProps,\n): [FlexStyleProps, FlexNonStyleProps] => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n    ...otherProps\n  } = props;\n\n  return [\n    {\n      flexDirection,\n      flexWrap,\n      flexGrow,\n      flex,\n      justifyContent,\n      alignItems,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n    },\n    otherProps,\n  ];\n};\n"],"names":["getSpacingValue","filterUndefinedProps","buildFlexStyles","props","flexDirection","flexWrap","flexGrow","flex","justifyContent","alignItems","alignContent","gap","rowGap","columnGap","styleProps","splitProps","otherProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,SAASC,oBAAoB,QAAQ,mCAAmC;AAGxE,OAAO,MAAMC,kBAAkB,CAACC;IAC9B,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACV,GAAGV;IAEJ,MAAMW,aAAa;QACjBV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC,KAAKX,gBAAgBW;QACrBE,WAAWb,gBAAgBa;QAC3BD,QAAQZ,gBAAgBY;IAC1B;IAEA,OAAOX,qBAAqBa;AAC9B,EAAE;AAEF,OAAO,MAAMC,aAAa,CACxBZ;IAEA,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACT,GAAGG,YACJ,GAAGb;IAEJ,OAAO;QACL;YACEC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACAG;KACD;AACH,EAAE"}

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

@@ -3,6 +3,7 @@ import { CheckboxGroup } from ".";
 type StoryType = StoryObj<typeof CheckboxGroup>;
 declare const meta: Meta<typeof CheckboxGroup>;
 export declare const Normal: StoryType;
+export declare const Horizontal: StoryType;
 export declare const Disabled: StoryType;
 export declare const Valid: StoryType;
 export declare const Invalid: StoryType;

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

@@ -33,10 +33,11 @@ export interface CheckboxProps extends DOMProps, RefAttributes<CheckboxElementTy
     setSelected?: React.Dispatch<React.SetStateAction<string>>;
 }
 export type CheckboxGroupElementType = HTMLDivElement;
-export interface CheckboxGroupProps extends DOMProps, RefAttributes<CheckboxGroupElementType> {
+interface CheckboxGroupPropsInternal extends DOMProps, RefAttributes<CheckboxGroupElementType> {
     children: ReactNode;
     className?: string;
     orientation?: "horizontal" | "vertical";
+    itemsPerRow?: number;
     errorMessage?: string;
     onChange?: (values: string[]) => void;
     "aria-labelledby"?: string;
@@ -53,4 +54,14 @@ export interface CheckboxGroupProps extends DOMProps, RefAttributes<CheckboxGrou
      */
     value?: string;
 }
+interface HorizontalCheckboxGroupProps extends CheckboxGroupPropsInternal {
+    orientation?: "horizontal";
+    itemsPerRow: number;
+}
+interface VerticalCheckboxGroupProps extends CheckboxGroupPropsInternal {
+    orientation?: "vertical";
+    itemsPerRow?: never;
+}
+export type CheckboxGroupProps = HorizontalCheckboxGroupProps | VerticalCheckboxGroupProps;
 export type CheckboxGroupRef = Ref<CheckboxGroupElementType>;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.8.4",
+  "version": "4.8.5",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

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

@@ -64,6 +64,19 @@ describe("Checkbox", () => {
     expect(option).toHaveAccessibleDescription(errorText);
   });
 
+  it("should pass additional props as attributes to the input element", () => {
+    const optionText = "Agree";
+    const dataTestId = "test";
+
+    const { getByLabelText } = render(
+      <Checkbox label={optionText} data-testid={dataTestId} value="value" />,
+    );
+
+    const option = getByLabelText(optionText);
+
+    expect(option).toHaveAttribute("data-testid", dataTestId);
+  });
+
   describe("isRequired", () => {
     it("should set required attribute", () => {
       const optionText = "Agree";

package/src/components/Checkbox/Checkbox.tsx

@@ -31,6 +31,8 @@ export const Checkbox: ForwardedRefComponent<
     defaultSelected = false,
     isReadOnly,
     value,
+    ["aria-describedby"]: ariaDescribedBy,
+    ...rest
   } = props;
   const [selected, setSelected] = useState<boolean>(defaultSelected);
   const fallbackRef = useRef<HTMLInputElement>(null);
@@ -58,7 +60,7 @@ export const Checkbox: ForwardedRefComponent<
   const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
-    props["aria-describedby"],
+    ariaDescribedBy,
   ]);
   const labelId = useId();
 
@@ -105,6 +107,7 @@ export const Checkbox: ForwardedRefComponent<
           required={isRequired}
           id={id || inputId}
           value={value}
+          {...rest}
         />
         <span className="mobius/CheckboxLabel">{label}</span>
       </label>

package/src/components/Checkbox/CheckboxGroup.mdx

@@ -32,6 +32,10 @@ This will allow user to change the value.
 
 <Canvas of={CheckboxGroupStories.Normal} />
 
+### Horizontal
+
+<Canvas of={CheckboxGroupStories.Horizontal} />
+
 ### Disabled
 
 <Canvas of={CheckboxGroupStories.Disabled} />

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

@@ -47,6 +47,26 @@ export const Normal: StoryType = {
   },
 };
 
+export const Horizontal: StoryType = {
+  render: (args: CheckboxGroupProps) => (
+    <CheckboxGroup {...args}>
+      <Checkbox label="Option 1" value="option1" />
+      <Checkbox label="Option 2" value="option2" />
+      <Checkbox label="Option 3" value="option3" />
+      <Checkbox label="Option 4" value="option4" />
+    </CheckboxGroup>
+  ),
+  args: {
+    label: "Value",
+    errorMessage: "",
+    isDisabled: false,
+    orientation: "horizontal",
+    defaultValue: ["option2", "option4"],
+    isRequired: false,
+    itemsPerRow: 2,
+  },
+};
+
 export const Disabled: StoryType = {
   render: (args: CheckboxGroupProps) => (
     <CheckboxGroup {...args}>

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

@@ -67,76 +67,6 @@ describe("CheckboxGroup", () => {
     });
   });
 
-  describe("isRequired", () => {
-    it("should have className of --is-required when true", () => {
-      const outerContainerLabel = "Checkbox Group";
-      const REQUIRED_CLASS_NAME = "--is-required";
-
-      render(
-        <CheckboxGroup
-          label={outerContainerLabel}
-          errorMessage="Error message"
-          isRequired
-        >
-          <Checkbox label="Checkbox 1" value="value1" />
-          <Checkbox label="Checkbox 2" value="value2" />
-        </CheckboxGroup>,
-      );
-
-      const outerContainer = screen.getByLabelText(outerContainerLabel);
-      const checkboxes = screen.getAllByRole("checkbox");
-
-      expect(outerContainer).toHaveClass(REQUIRED_CLASS_NAME);
-
-      checkboxes.forEach(checkbox => {
-        expect(checkbox).toHaveClass(REQUIRED_CLASS_NAME);
-      });
-    });
-
-    it("should have className of --is-optional when false", () => {
-      const outerContainerLabel = "Checkbox Group";
-      const OPTIONAL_CLASS_NAME = "--is-optional";
-
-      render(
-        <CheckboxGroup
-          label={outerContainerLabel}
-          errorMessage="Error message"
-          isRequired={false}
-        >
-          <Checkbox label="Checkbox 1" value="value1" />
-          <Checkbox label="Checkbox 2" value="value2" />
-        </CheckboxGroup>,
-      );
-
-      const outerContainer = screen.getByLabelText(outerContainerLabel);
-      const checkboxes = screen.getAllByRole("checkbox");
-
-      expect(outerContainer).toHaveClass(OPTIONAL_CLASS_NAME);
-
-      checkboxes.forEach(checkbox => {
-        expect(checkbox).toHaveClass(OPTIONAL_CLASS_NAME);
-      });
-    });
-
-    it("should have neither --is-required nor --is-optional when unset", () => {
-      const outerContainerLabel = "Checkbox Group";
-      const REQUIRED_CLASS_NAME = "--is-required";
-      const OPTIONAL_CLASS_NAME = "--is-optional";
-
-      render(
-        <CheckboxGroup label={outerContainerLabel} errorMessage="Error message">
-          <Checkbox label="Checkbox 1" value="value1" />
-          <Checkbox label="Checkbox 2" value="value2" />
-        </CheckboxGroup>,
-      );
-
-      const outerContainer = screen.getByLabelText(outerContainerLabel);
-
-      expect(outerContainer).not.toHaveClass(REQUIRED_CLASS_NAME);
-      expect(outerContainer).not.toHaveClass(OPTIONAL_CLASS_NAME);
-    });
-  });
-
   describe("onChange", () => {
     describe("given an item is toggled", () => {
       it("should call onChange with a list of toggled items", async () => {
@@ -316,6 +246,74 @@ describe("CheckboxGroup", () => {
       expect(option).not.toHaveClass("--is-required");
       expect(option).not.toHaveClass("--is-optional");
     });
+
+    it("should have className of --is-required when true", () => {
+      const outerContainerLabel = "Checkbox Group";
+      const REQUIRED_CLASS_NAME = "--is-required";
+
+      render(
+        <CheckboxGroup
+          label={outerContainerLabel}
+          errorMessage="Error message"
+          isRequired
+        >
+          <Checkbox label="Checkbox 1" value="value1" />
+          <Checkbox label="Checkbox 2" value="value2" />
+        </CheckboxGroup>,
+      );
+
+      const outerContainer = screen.getByLabelText(outerContainerLabel);
+      const checkboxes = screen.getAllByRole("checkbox");
+
+      expect(outerContainer).toHaveClass(REQUIRED_CLASS_NAME);
+
+      checkboxes.forEach(checkbox => {
+        expect(checkbox).toHaveClass(REQUIRED_CLASS_NAME);
+      });
+    });
+
+    it("should have className of --is-optional when false", () => {
+      const outerContainerLabel = "Checkbox Group";
+      const OPTIONAL_CLASS_NAME = "--is-optional";
+
+      render(
+        <CheckboxGroup
+          label={outerContainerLabel}
+          errorMessage="Error message"
+          isRequired={false}
+        >
+          <Checkbox label="Checkbox 1" value="value1" />
+          <Checkbox label="Checkbox 2" value="value2" />
+        </CheckboxGroup>,
+      );
+
+      const outerContainer = screen.getByLabelText(outerContainerLabel);
+      const checkboxes = screen.getAllByRole("checkbox");
+
+      expect(outerContainer).toHaveClass(OPTIONAL_CLASS_NAME);
+
+      checkboxes.forEach(checkbox => {
+        expect(checkbox).toHaveClass(OPTIONAL_CLASS_NAME);
+      });
+    });
+
+    it("should have neither --is-required nor --is-optional when unset", () => {
+      const outerContainerLabel = "Checkbox Group";
+      const REQUIRED_CLASS_NAME = "--is-required";
+      const OPTIONAL_CLASS_NAME = "--is-optional";
+
+      render(
+        <CheckboxGroup label={outerContainerLabel} errorMessage="Error message">
+          <Checkbox label="Checkbox 1" value="value1" />
+          <Checkbox label="Checkbox 2" value="value2" />
+        </CheckboxGroup>,
+      );
+
+      const outerContainer = screen.getByLabelText(outerContainerLabel);
+
+      expect(outerContainer).not.toHaveClass(REQUIRED_CLASS_NAME);
+      expect(outerContainer).not.toHaveClass(OPTIONAL_CLASS_NAME);
+    });
   });
 
   describe("uses correct class names", () => {
@@ -359,6 +357,24 @@ describe("CheckboxGroup", () => {
       expect(option).toHaveClass("--is-disabled");
     });
 
+    describe("includes orientation class name", () => {
+      it.each(["horizontal", "vertical"])(
+        "when orientation is %s",
+        orientation => {
+          const optionText = "Agree";
+
+          const { container } = render(
+            // @ts-expect-error can't assert as CheckboxGroupProps["orientation"]
+            <CheckboxGroup orientation={orientation}>
+              <Checkbox label={optionText} value="value" />
+            </CheckboxGroup>,
+          );
+
+          expect(container.firstChild).toHaveClass(`--is-${orientation}`);
+        },
+      );
+    });
+
     it("includes valid class name", () => {
       const optionText = "Agree";
 
@@ -445,6 +461,41 @@ describe("CheckboxGroup", () => {
     });
   });
 
+  describe("items per row", () => {
+    describe("when props is set", () => {
+      it("provides CSS variable with the number of items per row", () => {
+        const { container } = render(
+          <CheckboxGroup itemsPerRow={2}>
+            <Checkbox label="Option 1" value="value1" />
+            <Checkbox label="Option 2" value="value2" />
+            <Checkbox label="Option 3" value="value3" />
+            <Checkbox label="Option 4" value="value4" />
+          </CheckboxGroup>,
+        );
+
+        expect(container.firstChild).toHaveStyle("--checkbox-items-per-row: 2");
+      });
+    });
+
+    describe("when props is not set", () => {
+      it("provides CSS variable with the number of items per row", () => {
+        const numberOfItems = 3;
+
+        const { container } = render(
+          <CheckboxGroup>
+            <Checkbox label="Option 1" value="value1" />
+            <Checkbox label="Option 2" value="value2" />
+            <Checkbox label="Option 3" value="value3" />
+          </CheckboxGroup>,
+        );
+
+        expect(container.firstChild).toHaveStyle(
+          `--checkbox-items-per-row: ${numberOfItems}`,
+        );
+      });
+    });
+  });
+
   describe("given the component is read only", () => {
     it("renders readonly attribute", () => {
       const optionText = "Agree";

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -39,6 +39,7 @@ export const CheckboxGroup: ForwardedRefComponent<
     children,
     defaultValue = [],
     isReadOnly,
+    itemsPerRow,
     ...rest
   } = props;
   const [selected, setSelected] = useState<string[]>(defaultValue);
@@ -93,6 +94,11 @@ export const CheckboxGroup: ForwardedRefComponent<
       ref={ref}
       className={checkboxGroupClasses}
       role="group"
+      style={
+        {
+          "--checkbox-items-per-row": itemsPerRow || Children.count(children),
+        } as React.CSSProperties
+      }
     >
       {label && (
         <Label elementType="span" id={labelId} className={labelClasses}>
@@ -103,7 +109,6 @@ export const CheckboxGroup: ForwardedRefComponent<
         {Children.map(children, child => {
           if (isValidElement(child)) {
             return cloneElement(child as ReactElement, {
-              orientation,
               isDisabled,
               isRequired,
               isReadOnly,

package/src/components/Checkbox/types.ts

@@ -45,13 +45,14 @@ export interface CheckboxProps
 }
 
 export type CheckboxGroupElementType = HTMLDivElement;
-
-export interface CheckboxGroupProps
+interface CheckboxGroupPropsInternal
   extends DOMProps,
     RefAttributes<CheckboxGroupElementType> {
   children: ReactNode;
   className?: string;
   orientation?: "horizontal" | "vertical";
+  // Defines number of items to be displayed on a single row when used with orientation="horizontal". Defaults to number of items in the group.
+  itemsPerRow?: number;
   errorMessage?: string;
   onChange?: (values: string[]) => void;
   // Defines a string value that labels the current element.
@@ -81,4 +82,18 @@ export interface CheckboxGroupProps
   value?: string;
 }
 
+interface HorizontalCheckboxGroupProps extends CheckboxGroupPropsInternal {
+  orientation?: "horizontal";
+  itemsPerRow: number;
+}
+
+interface VerticalCheckboxGroupProps extends CheckboxGroupPropsInternal {
+  orientation?: "vertical";
+  itemsPerRow?: never;
+}
+
+export type CheckboxGroupProps =
+  | HorizontalCheckboxGroupProps
+  | VerticalCheckboxGroupProps;
+
 export type CheckboxGroupRef = Ref<CheckboxGroupElementType>;

package/src/components/Flex/Flex.test.tsx

@@ -32,6 +32,7 @@ describe("Test for Flex", () => {
       expect(container.firstChild).toHaveStyle(
         "justify-content: flex-start; backgroundColor: orange",
       );
+      expect(container.firstChild).not.toHaveStyle("display: flex");
     });
   });
 

package/src/components/Flex/propUtils.test.ts

@@ -23,7 +23,6 @@ describe("buildFlexStyles", () => {
       };
 
       const expectedProps = {
-        display: "flex",
         ...props,
         ...transformedProps,
       };
@@ -55,7 +54,6 @@ describe("buildFlexStyles", () => {
         justifyContent: "start",
         alignContent: "center",
         rowGap: "20px",
-        display: "flex",
       };
 
       const actual = buildFlexStyles(props);

package/src/components/Flex/propUtils.ts

@@ -17,7 +17,6 @@ export const buildFlexStyles = (props: FlexStyleProps) => {
   } = props;
 
   const styleProps = {
-    display: "flex",
     flexDirection,
     flexWrap,
     flexGrow,