@simplybusiness/mobius 4.8.4 → 4.8.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 4.8.6
+
+### Patch Changes
+
+- Updated dependencies [34295d7]
+  - @simplybusiness/icons@4.7.0
+
+## 4.8.5
+
+### Patch Changes
+
+- 600dfd4: Fix `<Flex>` not honouring CSS `display` overwrite; fix Chopin `<Header>` styles
+- 1439ba7: Fix `<Checkbox>` not passing additional props to `<input>` when provided; fix `<CheckboxGroup orientation="horizontal">` not working
+
 ## 4.8.4
 
 ### Patch Changes

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

@@ -20,7 +20,7 @@ function _interop_require_default(obj) {
     };
 }
 const Checkbox = /*#__PURE__*/ (0, _react.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] = (0, _react.useState)(defaultSelected);
     const fallbackRef = (0, _react.useRef)(null);
     const refObj = ref || fallbackRef;
@@ -40,7 +40,7 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = (0, _spaceDelimitedList.spaceDelimitedList)([
         shouldErrorMessageShow,
-        props["aria-describedby"]
+        ariaDescribedBy
     ]);
     const labelId = (0, _react.useId)();
     const toggleState = ()=>{
@@ -83,7 +83,8 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         defaultChecked: defaultSelected,
                         required: isRequired,
                         id: id || inputId,
-                        value: value
+                        value: value,
+                        ...rest
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         className: "mobius/CheckboxLabel",

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 { 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":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","onChange","className","errorMessage","defaultSelected","isReadOnly","value","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","checkboxClasses","classNames","wrapperClasses","inputClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","span","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAiBaA;;;eAAAA;;;;uBAPN;+DACgB;8BACM;oCAGM;;;;;;AAE5B,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,eAAQ,EAAUL;IAClD,MAAMM,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASjB,OAAOe;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,kBAAkBC,IAAAA,eAAU,EAChC;QACE,iBAAiBlB;QACjB,iBAAiBS;QACjB,cAAcP,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOD,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAG;IAEF,sEAAsE;IACtE,MAAMe,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD;IAEF,MAAMG,eAAeF,IAAAA,eAAU,EAAC,wBAAwBD;IACxD,MAAMI,iBAAiBL,IAAAA,YAAK;IAC5B,MAAMM,yBAAyBjB,eAAegB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA1B,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM8B,UAAUV,IAAAA,YAAK;IAErB,MAAMW,cAAc;QAClBjB,YAAY,CAACD;IACf;IAEA,MAAMmB,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,sBAAC5B;gBAAMD,IAAI4B;gBAAStB,WAAWe;;kCAC7B,qBAACgB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAAcpC,oBAAoB;wBAClCqC,UAAUhC;wBACViC,UAAUxC;wBACVH,KAAKiB;wBACLV,WAAWgB;wBACXqB,SAASb;wBACTzB,UAAU6B;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgBtC;wBAChBuC,UAAU5C;wBACVH,IAAIA,MAAMiB;wBACVP,OAAOA;;kCAET,qBAACsC;wBAAK1C,WAAU;kCAAwBL;;;;0BAE1C,qBAACgD,0BAAY;gBAACjD,IAAIuB;gBAAgBhB,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 { 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":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","checkboxClasses","classNames","wrapperClasses","inputClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","span","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAiBaA;;;eAAAA;;;;uBAPN;+DACgB;8BACM;oCAGM;;;;;;AAE5B,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,eAAQ,EAAUP;IAClD,MAAMQ,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASnB,OAAOiB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,kBAAkBC,IAAAA,eAAU,EAChC;QACE,iBAAiBpB;QACjB,iBAAiBW;QACjB,cAAcT,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOD,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAG;IAEF,sEAAsE;IACtE,MAAMiB,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD;IAEF,MAAMG,eAAeF,IAAAA,eAAU,EAAC,wBAAwBD;IACxD,MAAMI,iBAAiBL,IAAAA,YAAK;IAC5B,MAAMM,yBAAyBnB,eAAekB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAf;KACD;IACD,MAAMmB,UAAUV,IAAAA,YAAK;IAErB,MAAMW,cAAc;QAClBjB,YAAY,CAACD;IACf;IAEA,MAAMmB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI5B,UAAU;YACZA,SAAS4B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,sBAAC9B;gBAAMD,IAAI8B;gBAASxB,WAAWiB;;kCAC7B,qBAACgB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAActC,oBAAoB;wBAClCuC,UAAUlC;wBACVmC,UAAU1C;wBACVH,KAAKmB;wBACLZ,WAAWkB;wBACXqB,SAASb;wBACT3B,UAAU+B;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgBxC;wBAChByC,UAAU9C;wBACVH,IAAIA,MAAMmB;wBACVT,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAACsC;wBAAK5C,WAAU;kCAAwBL;;;;0BAE1C,qBAACkD,0BAAY;gBAACnD,IAAIyB;gBAAgBlB,cAAcA;;;;AAGtD"}

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

@@ -21,7 +21,7 @@ function _interop_require_default(obj) {
     };
 }
 const CheckboxGroup = /*#__PURE__*/ (0, _react.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] = (0, _react.useState)(defaultValue);
     const checkboxGroupClasses = (0, _dedupe.default)("mobius", "mobius/CheckboxGroup", className, {
         "--is-horizontal": orientation === "horizontal",
@@ -67,6 +67,9 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         ref: ref,
         className: checkboxGroupClasses,
         role: "group",
+        style: {
+            "--checkbox-items-per-row": itemsPerRow || _react.Children.count(children)
+        },
         children: [
             label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
                 elementType: "span",
@@ -79,7 +82,6 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 children: _react.Children.map(children, (child)=>{
                     if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
                         return /*#__PURE__*/ (0, _react.cloneElement)(child, {
-                            orientation,
                             isDisabled,
                             isRequired,
                             isReadOnly,

package/dist/cjs/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":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","target","value","checked","filter","item","useEffect","div","aria-labelledby","role","Label","elementType","id","Children","map","child","isValidElement","cloneElement","defaultSelected","includes","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAyBaA;;;eAAAA;;;;uBAbN;+DACgB;uBAQD;8BACO;oCACM;;;;;;AAE5B,MAAMA,8BAGTC,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,eAAQ,EAAWL;IACnD,MAAMM,uBAAuBC,IAAAA,eAAU,EACrC,UACA,wBACAV,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOF,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMe,eAAeD,IAAAA,eAAU,EAAC;QAC9B,cAAcb,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBF;IACnB;IACA,MAAMiB,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBb,eAAeW,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAtB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM0B,UAAUL,IAAAA,YAAK;IAErB,MAAMM,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZhB,YAAYD,SAASkB,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXhB,YAAY;mBAAID;gBAAUgB;aAAM;QAClC;IACF;IAEAI,IAAAA,gBAAS,EAAC;QACR,IAAI3B,UAAU;YACZA,SAASO;QACX;IACF,GAAG;QAACA;QAAUP;KAAS;IAEvB,qBACE,sBAAC4B;QACE,GAAGtB,IAAI;QACRuB,mBAAiBpC,KAAK,CAAC,kBAAkB,IAAI0B;QAC7CzB,KAAKA;QACLO,WAAWS;QACXoB,MAAK;;YAEJnC,uBACC,qBAACoC,YAAK;gBAACC,aAAY;gBAAOC,IAAId;gBAASlB,WAAWW;0BAC/CjB;;0BAGL,qBAACiC;gBAAI3B,WAAU;0BACZiC,eAAQ,CAACC,GAAG,CAAChC,UAAUiC,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzCrC;4BACAH;4BACAC;4BACAQ;4BACAP;4BACAyC,iBAAiBhC,SAASiC,QAAQ,CAACJ,MAAM3C,KAAK,CAAC8B,KAAK;4BACpDvB,UAAUoB;4BACV,oBAAoBH;wBACtB;oBACF;oBAEA,OAAOmB;gBACT;;YAEDlC,8BACC,qBAACuC,0BAAY;gBAACR,IAAIpB;gBAAgBX,cAAcA;;;;AAIxD"}
+{"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":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","target","value","checked","filter","item","useEffect","div","aria-labelledby","role","style","Children","count","Label","elementType","id","map","child","isValidElement","cloneElement","defaultSelected","includes","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAyBaA;;;eAAAA;;;;uBAbN;+DACgB;uBAQD;8BACO;oCACM;;;;;;AAE5B,MAAMA,8BAGTC,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,eAAQ,EAAWN;IACnD,MAAMO,uBAAuBC,IAAAA,eAAU,EACrC,UACA,wBACAX,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOF,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMgB,eAAeD,IAAAA,eAAU,EAAC;QAC9B,cAAcd,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBF;IACnB;IACA,MAAMkB,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBd,eAAeY,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAvB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM2B,UAAUL,IAAAA,YAAK;IAErB,MAAMM,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZhB,YAAYD,SAASkB,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXhB,YAAY;mBAAID;gBAAUgB;aAAM;QAClC;IACF;IAEAI,IAAAA,gBAAS,EAAC;QACR,IAAI5B,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,sBAAC6B;QACE,GAAGtB,IAAI;QACRuB,mBAAiBrC,KAAK,CAAC,kBAAkB,IAAI2B;QAC7C1B,KAAKA;QACLO,WAAWU;QACXoB,MAAK;QACLC,OACE;YACE,4BAA4B1B,eAAe2B,eAAQ,CAACC,KAAK,CAAC/B;QAC5D;;YAGDR,uBACC,qBAACwC,YAAK;gBAACC,aAAY;gBAAOC,IAAIjB;gBAASnB,WAAWY;0BAC/ClB;;0BAGL,qBAACkC;gBAAI5B,WAAU;0BACZgC,eAAQ,CAACK,GAAG,CAACnC,UAAUoC,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC3C;4BACAC;4BACAQ;4BACAP;4BACA4C,iBAAiBlC,SAASmC,QAAQ,CAACJ,MAAM9C,KAAK,CAAC+B,KAAK;4BACpDxB,UAAUqB;4BACV,oBAAoBH;wBACtB;oBACF;oBAEA,OAAOqB;gBACT;;YAEDrC,8BACC,qBAAC0C,0BAAY;gBAACP,IAAIvB;gBAAgBZ,cAAcA;;;;AAIxD"}

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

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

package/dist/cjs/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":["buildFlexStyles","splitProps","props","flexDirection","flexWrap","flexGrow","flex","justifyContent","alignItems","alignContent","gap","rowGap","columnGap","styleProps","display","getSpacingValue","filterUndefinedProps","otherProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,eAAe;eAAfA;;IA+BAC,UAAU;eAAVA;;;uBAnCmB;sCACK;AAG9B,MAAMD,kBAAkB,CAACE;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,KAAKK,IAAAA,sBAAe,EAACL;QACrBE,WAAWG,IAAAA,sBAAe,EAACH;QAC3BD,QAAQI,IAAAA,sBAAe,EAACJ;IAC1B;IAEA,OAAOK,IAAAA,0CAAoB,EAACH;AAC9B;AAEO,MAAMZ,aAAa,CACxBC;IAEA,MAAM,EACJC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,GAAG,EACHC,MAAM,EACNC,SAAS,EACT,GAAGK,YACJ,GAAGf;IAEJ,OAAO;QACL;YACEC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;QACAK;KACD;AACH"}
+{"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":["buildFlexStyles","splitProps","props","flexDirection","flexWrap","flexGrow","flex","justifyContent","alignItems","alignContent","gap","rowGap","columnGap","styleProps","getSpacingValue","filterUndefinedProps","otherProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,eAAe;eAAfA;;IA8BAC,UAAU;eAAVA;;;uBAlCmB;sCACK;AAG9B,MAAMD,kBAAkB,CAACE;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,KAAKI,IAAAA,sBAAe,EAACJ;QACrBE,WAAWE,IAAAA,sBAAe,EAACF;QAC3BD,QAAQG,IAAAA,sBAAe,EAACH;IAC1B;IAEA,OAAOI,IAAAA,0CAAoB,EAACF;AAC9B;AAEO,MAAMZ,aAAa,CACxBC;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"}