cozy-ui-plus 5.3.1 → 6.1.0

package/dist/SquareAppIcon/index.js

@@ -21,6 +21,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _helpers = require("cozy-ui/transpiled/react/Avatar/helpers");
+
 var _Badge = _interopRequireDefault(require("cozy-ui/transpiled/react/Badge"));
 
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
@@ -35,21 +37,17 @@ var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"
 
 var _WarningCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/WarningCircle"));
 
-var _InfosBadge = _interopRequireDefault(require("cozy-ui/transpiled/react/InfosBadge"));
-
 var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
 
 var _Spinner = _interopRequireDefault(require("cozy-ui/transpiled/react/Spinner"));
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
-var _helpers = require("cozy-ui/transpiled/react/legacy/Avatar/helpers");
-
 var _styles = require("cozy-ui/transpiled/react/styles");
 
 var _AppIcon = _interopRequireDefault(require("../AppIcon"));
 
-var _CozyTheme = _interopRequireWildcard(require("../providers/CozyTheme"));
+var _CozyTheme = require("../providers/CozyTheme");
 
 var _excluded = ["display", "name", "variant", "IconContent", "description", "hideShortcutBadge"];
 
@@ -94,9 +92,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: '0.25rem 0.25rem 0 0.25rem',
       height: '2rem'
     }),
-    nameInverted: {
-      textShadow: theme.textShadows[1]
-    },
     squareAppIconGhost: {
       backgroundColor: (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.ghostOpacity),
       border: "1px dashed ".concat((0, _styles.alpha)(theme.palette.primary.main, theme.palette.border.ghostOpacity))
@@ -157,7 +152,6 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
       appIconProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
 
   var _useCozyTheme = (0, _CozyTheme.useCozyTheme)(),
-      themeVariant = _useCozyTheme.variant,
       type = _useCozyTheme.type;
 
   var classes = useStyles();
@@ -179,25 +173,32 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
     var curr = prevVariant.current; // eslint-disable-next-line react-hooks/set-state-in-effect
 
     if (curr === 'loading' && variant === 'error') setAnimationState('failed');
-    if (curr === 'loading' && (variant === 'default' || variant === undefined)) // eslint-disable-next-line react-hooks/set-state-in-effect
-      setAnimationState('success');
+    if (curr === 'loading' && (variant === 'default' || variant === undefined)) setAnimationState('success');
     prevVariant.current = variant;
   }, [variant]);
   var exceptionVariant = ['ghost'];
-  var squareTheme = exceptionVariant.includes(variant) ? themeVariant : 'normal';
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "square-app-icon",
     className: (0, _classnames.default)(classes.tileWrapper, (0, _defineProperty2.default)({}, classes.detailedTileWrapper, display === 'detailed'))
-  }, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
-    variant: squareTheme
-  }, /*#__PURE__*/_react.default.createElement(_InfosBadge.default, {
-    badgeContent: variant === 'shortcut' && !hideShortcutBadge ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    badgeContent: variant === 'shortcut' && !hideShortcutBadge ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-h-1-half u-miw-1-half u-bdrs-circle u-flex u-flex-items-center u-flex-justify-center",
+      style: {
+        backgroundColor: 'var(--paperBackgroundColor)',
+        color: 'var(--iconTextColor)',
+        boxShadow: 'var(--shadow3)'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
       size: "10",
       icon: _LinkOut.default
-    }) : null,
+    })) : null,
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, 'u-mr-1', display === 'detailed')),
     overlap: "rectangular",
-    invisible: variant !== 'shortcut' || hideShortcutBadge
+    invisible: variant !== 'shortcut' || hideShortcutBadge,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    }
   }, /*#__PURE__*/_react.default.createElement(SquareAppIconSpinner, {
     variant: variant,
     animationState: animationState
@@ -218,7 +219,7 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
     variant: "h2",
     align: "center"
   }, letter.toUpperCase()) : /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(styles['SquareAppIcon-icon-container'], (0, _defineProperty2.default)({}, styles['SquareAppIcon-icon-container-normal'], themeVariant === 'normal'))
+    className: (0, _classnames.default)(styles['SquareAppIcon-icon-container'], [styles['SquareAppIcon-icon-container-normal']])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(styles['onEnd'], (0, _defineProperty2.default)({}, styles['isSuccess'], animationState === 'success'), (0, _defineProperty2.default)({}, styles['isFailed'], animationState === 'failed')),
     onAnimationEnd: handleAnimationEnd
@@ -230,11 +231,11 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
     color: "var(--primaryColor)"
   }) : IconContent ? IconContent : /*#__PURE__*/_react.default.createElement("div", {
     className: "u-w-2 u-h-2"
-  }, /*#__PURE__*/_react.default.createElement(_AppIcon.default, appIconProps)))))), display === 'detailed' ? /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+  }, /*#__PURE__*/_react.default.createElement(_AppIcon.default, appIconProps))))), display === 'detailed' ? /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
     primary: appName,
     secondary: description
   }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: (0, _classnames.default)(classes.name, (0, _defineProperty2.default)({}, classes.nameInverted, themeVariant === 'inverted'), 'u-spacellipsis'),
+    className: (0, _classnames.default)(classes.name, 'u-spacellipsis'),
     variant: "h6",
     align: "center"
   }, appName));

package/dist/providers/CozyTheme/index.js

@@ -39,8 +39,6 @@ var CozyTheme = function CozyTheme(_ref) {
 };
 
 CozyTheme.propTypes = {
-  variant: _propTypes.default.oneOf(['normal', 'inverted']),
-
   /** Causes this element's children to appear as if they were direct children of the element's parent, ignoring the element itself. */
   ignoreItself: _propTypes.default.bool,
 
@@ -50,7 +48,6 @@ CozyTheme.propTypes = {
   children: _propTypes.default.node
 };
 CozyTheme.defaultProps = {
-  variant: 'normal',
   ignoreCozySettings: false,
   ignoreItself: true
 };

package/dist/src/Contacts/AddModal/ContactForm/FieldInput.d.ts

@@ -1,5 +1,5 @@
 export default FieldInput;
-declare function FieldInput({ name, labelProps, className, attributes: { subFields, ...restAttributes }, contacts, contact, error, helperText, label, isInvisible }: {
+declare function FieldInput({ name, labelProps, className, attributes: { subFields, ...restAttributes }, contacts, contact, error, onRemove, showRemove, helperText, label, isInvisible }: {
     name: any;
     labelProps: any;
     className: any;
@@ -10,6 +10,8 @@ declare function FieldInput({ name, labelProps, className, attributes: { subFiel
     contacts: any;
     contact: any;
     error: any;
+    onRemove: any;
+    showRemove: any;
     helperText: any;
     label: any;
     isInvisible: any;

package/dist/src/Contacts/AddModal/ContactForm/FieldInputWrapper.d.ts

@@ -1,11 +1,12 @@
 export default FieldInputWrapper;
-declare function FieldInputWrapper({ input, attributes: { component, layout, icon, isSecondary, validate, ...restAttributes }, variant, fullWidth, ...props }: {
+declare function FieldInputWrapper({ input, attributes: { component, layout, isHalfWidth, icon, isSecondary, validate, ...restAttributes }, variant, fullWidth, ...props }: {
     [x: string]: any;
     input: any;
     attributes: {
         [x: string]: any;
         component: any;
         layout: any;
+        isHalfWidth: any;
         icon: any;
         isSecondary: any;
         validate: any;

package/dist/src/Contacts/AddModal/ContactForm/RemoveButton.d.ts

@@ -0,0 +1,4 @@
+export default RemoveButton;
+declare function RemoveButton({ onRemove }: {
+    onRemove: any;
+}): JSX.Element;

package/dist/src/providers/CozyTheme/index.d.ts

@@ -6,15 +6,12 @@ declare function CozyTheme({ ignoreCozySettings, ...props }: {
 }): JSX.Element;
 declare namespace CozyTheme {
     namespace propTypes {
-        let variant: PropTypes.Requireable<string>;
         let ignoreItself: PropTypes.Requireable<boolean>;
         let ignoreCozySettings: PropTypes.Requireable<boolean>;
         let className: PropTypes.Requireable<string>;
         let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     }
     namespace defaultProps {
-        let variant_1: string;
-        export { variant_1 as variant };
         let ignoreCozySettings_1: boolean;
         export { ignoreCozySettings_1 as ignoreCozySettings };
         let ignoreItself_1: boolean;

package/dist/stylesheet.css

@@ -220,11 +220,6 @@
 }
 @media (max-width: 48rem) {
 }
-/*  imported from styles.styl  */
-
-.styles__contact-form-field__wrapper___13Usq {
-  width: calc(100% - 3rem);
-}
 /* imported from styles.styl  */
 
 .styles__container___w8t8I {
@@ -343,26 +338,6 @@ it overrides nothing so there's no need for
 }
 /*  imported from styles.styl  */
 
-.styles__c-label___24c92 {
-  text-transform: uppercase;
-  color: var(--secondaryTextColor);
-  font-size: 0.813rem;
-  font-weight: bold;
-  line-height: 1rem;
-}
-.styles__c-label___24c92.styles__is-error___1gUPb {
-  color: var(--errorColor);
-}
-.styles__c-label--block___1Zska {
-  display: block;
-  padding: 0.5rem 0;
-}
-@media (max-width: 48rem) {
-}
-@media (max-width: 48rem) {
-}
-/*  imported from styles.styl  */
-
 .styles__o-field___2B6P3 {
   position: relative;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "5.3.1",
+  "version": "6.1.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "cozy-intent": "^2.31.1",
     "cozy-logger": "^1.18.1",
     "cozy-stack-client": "^60.21.1",
-    "cozy-ui": "^135.0.0",
+    "cozy-ui": "^138.1.0",
     "jest": "30.3.0",
     "jest-canvas-mock": "2.3.1",
     "jest-environment-jsdom": "30.3.0",
@@ -68,10 +68,10 @@
     "cozy-device-helper": ">=2.0.0",
     "cozy-intent": ">=2.30.0",
     "cozy-logger": ">=1.17.0",
-    "cozy-ui": ">=135.0.0",
+    "cozy-ui": ">=138.1.0",
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "e726cac12603dffee9a88debf8618c47bc628082"
+  "gitHead": "0ac8873a7ba8909f3b02cb719d9fc05133bf5a1d"
 }

package/src/CollectionField/index.jsx

@@ -4,7 +4,7 @@ import React, { useRef } from 'react'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import CrossSmallIcon from 'cozy-ui/transpiled/react/Icons/CrossSmall'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
-import Label from 'cozy-ui/transpiled/react/Label'
+import InputLabel from 'cozy-ui/transpiled/react/InputLabel'
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 
@@ -70,7 +70,7 @@ const CollectionField = props => {
 
   return (
     <FieldContainer {...rest}>
-      <Label>{label}</Label>
+      <InputLabel>{label}</InputLabel>
       <Stack>
         {values.length > 0 ? (
           <Stack spacing="s">

package/src/Contacts/AddModal/ContactForm/FieldInput.jsx

@@ -4,16 +4,32 @@ import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { Field } from 'react-final-form'
 
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import FieldInputWrapper from './FieldInputWrapper'
 import HasValueCondition from './HasValueCondition'
 import { RelatedContactList } from './RelatedContactList'
+import RemoveButton from './RemoveButton'
 import { locales } from './locales'
-import styles from './styles.styl'
 import ContactAddressDialog from '../ContactAddressDialog'
 import { fieldInputAttributesTypes, labelPropTypes } from '../types'
 
+const FieldAndRemove = ({ showRemove, onRemove, ...props }) => {
+  const { isMobile } = useBreakpoints()
+
+  if (isMobile) {
+    return (
+      <div className="u-flex u-flex-items-center u-w-100">
+        <Field {...props} />
+        {showRemove && <RemoveButton onRemove={onRemove} />}
+      </div>
+    )
+  }
+
+  return <Field {...props} />
+}
+
 const FieldInput = ({
   name,
   labelProps,
@@ -22,6 +38,8 @@ const FieldInput = ({
   contacts,
   contact,
   error,
+  onRemove,
+  showRemove,
   helperText,
   label,
   isInvisible
@@ -33,6 +51,7 @@ const FieldInput = ({
     useState(false)
   useExtendI18n(locales)
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   const handleClick = () => {
     if (name.includes('address')) {
@@ -50,14 +69,12 @@ const FieldInput = ({
 
   return (
     <div
-      className={cx(
-        className,
-        styles['contact-form-field__wrapper'],
-        'u-flex-column-s',
-        { 'u-flex': !isInvisible, 'u-dn': isInvisible }
-      )}
+      className={cx(className, 'u-flex-column-s u-flex-items-center u-w-100', {
+        'u-flex': !isInvisible,
+        'u-dn': isInvisible
+      })}
     >
-      <Field
+      <FieldAndRemove
         error={error}
         helperText={helperText}
         label={label}
@@ -66,6 +83,8 @@ const FieldInput = ({
         name={name}
         contact={contact}
         component={FieldInputWrapper}
+        showRemove={showRemove}
+        onRemove={onRemove}
         onFocus={onFocus}
         onClick={handleClick}
       />
@@ -85,7 +104,7 @@ const FieldInput = ({
       )}
       {labelProps && (
         <HasValueCondition name={name} otherCondition={hasBeenFocused}>
-          <div className="u-mt-half-s u-ml-half u-ml-0-s u-flex-shrink-0 u-w-auto u-miw-4">
+          <div className="u-mt-half-s u-ml-half u-ml-0-s u-flex-shrink-0 u-w-100-s u-w-auto u-miw-4">
             <Field
               attributes={labelProps}
               name={`${name}Label`}
@@ -97,6 +116,7 @@ const FieldInput = ({
           </div>
         </HasValueCondition>
       )}
+      {showRemove && !isMobile && <RemoveButton onRemove={onRemove} />}
     </div>
   )
 }

package/src/Contacts/AddModal/ContactForm/FieldInputArray.jsx

@@ -4,10 +4,7 @@ import { FieldArray } from 'react-final-form-arrays'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import FieldInput from './FieldInput'
@@ -53,22 +50,14 @@ const FieldInputArray = ({
                     contacts={contacts}
                     contact={contact}
                     error={isError}
+                    index={index}
+                    showRemove={showRemove}
                     helperText={isError ? errors[inputName] : null}
                     name={inputName}
                     label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
                     labelProps={label}
+                    onRemove={() => removeField(fields, index)}
                   />
-                  {showRemove && (
-                    <ListItemIcon className="u-ml-half">
-                      <IconButton
-                        aria-label="delete"
-                        size="medium"
-                        onClick={() => removeField(fields, index)}
-                      >
-                        <Icon icon={CrossCircleIcon} />
-                      </IconButton>
-                    </ListItemIcon>
-                  )}
                 </div>
               )
             })}

package/src/Contacts/AddModal/ContactForm/FieldInputLayout.jsx

@@ -35,9 +35,11 @@ const FieldInputLayout = ({
         'u-dn': isSecondary && !showSecondaryFields
       })}
     >
-      <div className="u-w-2-half">
-        {icon && <Icon icon={icon} color="var(--iconTextColor)" />}
-      </div>
+      {icon && (
+        <div className="u-w-2-half">
+          <Icon icon={icon} color="var(--iconTextColor)" />
+        </div>
+      )}
       <div className="u-w-100">
         {layout === 'array' ? (
           <FieldInputArray

package/src/Contacts/AddModal/ContactForm/FieldInputWrapper.jsx

@@ -13,11 +13,12 @@ const FieldInputWrapper = ({
   attributes: {
     component,
     layout,
+    isHalfWidth,
     icon,
     isSecondary,
     validate,
     ...restAttributes
-  }, // ⚠️ `layout` `icon` `isSecondary` `validate` are removed from attributes to avoid DOM propagration, only used for business rules
+  }, // ⚠️ `layout` `isHalfWidth` `icon` `isSecondary` `validate` are removed from attributes to avoid DOM propagration, only used for business rules
   variant,
   fullWidth,
   ...props
@@ -37,6 +38,7 @@ const FieldInputWrapper = ({
       {...props}
       variant={variant}
       fullWidth={fullWidth}
+      size="small"
       minRows="2"
     />
   )

package/src/Contacts/AddModal/ContactForm/RemoveButton.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+
+const RemoveButton = ({ onRemove }) => {
+  return (
+    <ListItemIcon className="u-ml-half">
+      <IconButton aria-label="delete" size="medium" onClick={onRemove}>
+        <Icon icon={CrossCircleIcon} />
+      </IconButton>
+    </ListItemIcon>
+  )
+}
+
+export default RemoveButton

package/src/Contacts/AddModal/ContactForm/fieldsConfig.jsx

@@ -40,6 +40,7 @@ export const fields = [
     icon: null,
     type: 'text',
     layout: 'accordion',
+    isHalfWidth: true,
     subFields: [
       {
         name: 'additionalName',
@@ -56,7 +57,8 @@ export const fields = [
   {
     name: 'familyName',
     icon: null,
-    type: 'text'
+    type: 'text',
+    isHalfWidth: true
   },
   {
     name: 'company',

package/src/Contacts/AddModal/ContactForm/helpers.js

@@ -460,17 +460,26 @@ export const makeFields = (customFields, defaultFields) => {
     return defaultFields
   }
 
-  const fields = [...defaultFields]
+  let fields = [...defaultFields]
 
   customFields.forEach(customField => {
     const defaultField = fields.find(field => field.name === customField.name)
+
+    // If isRemoved is true, remove the field from the result
+    if (customField.isRemoved) {
+      if (defaultField) {
+        fields = fields.filter(field => field.name !== customField.name)
+      }
+      return
+    }
+
     const _field = defaultField || customField
 
     if (defaultField) {
       Object.assign(_field, customField)
     }
 
-    if (_field.position) {
+    if (_field.position !== undefined) {
       if (defaultField) {
         const fieldIndex = fields.indexOf(defaultField)
         fields.splice(fieldIndex, 1)

package/src/Contacts/AddModal/ContactForm/helpers.spec.js

@@ -441,6 +441,68 @@ describe('makeFields', () => {
       }
     ])
   })
+
+  it('should remove default field when custom field has isRemoved set to true', () => {
+    const defaultFields = [
+      { name: 'firstname' },
+      { name: 'lastname' },
+      { name: 'email' }
+    ]
+    const customFields = [{ name: 'lastname', isRemoved: true }]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([{ name: 'firstname' }, { name: 'email' }])
+  })
+
+  it('should remove multiple default fields when multiple custom fields have isRemoved set to true', () => {
+    const defaultFields = [
+      { name: 'firstname' },
+      { name: 'lastname' },
+      { name: 'email' },
+      { name: 'phone' }
+    ]
+    const customFields = [
+      { name: 'lastname', isRemoved: true },
+      { name: 'phone', isRemoved: true }
+    ]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([{ name: 'firstname' }, { name: 'email' }])
+  })
+
+  it('should ignore custom fields with isRemoved but no matching default field', () => {
+    const defaultFields = [{ name: 'firstname' }, { name: 'lastname' }]
+    const customFields = [{ name: 'nonexistent', isRemoved: true }]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual(defaultFields)
+  })
+
+  it('should handle mixed custom fields with isRemoved, position, and property overrides', () => {
+    const defaultFields = [
+      { name: 'firstname', type: 'text' },
+      { name: 'lastname', type: 'text' },
+      { name: 'email', type: 'email' },
+      { name: 'phone', type: 'tel' }
+    ]
+    const customFields = [
+      { name: 'lastname', isRemoved: true },
+      { name: 'email', isSecondary: true, position: 0 },
+      { name: 'middlename', position: 1 }
+    ]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([
+      { name: 'email', type: 'email', isSecondary: true, position: 0 },
+      { name: 'middlename', position: 1 },
+      { name: 'firstname', type: 'text' },
+      { name: 'phone', type: 'tel' }
+    ])
+  })
 })
 
 describe('hasNoValues', () => {

package/src/Contacts/AddModal/ContactForm/index.jsx

@@ -3,7 +3,9 @@ import React, { useState } from 'react'
 import { Form } from 'react-final-form'
 
 import { getHasManyItems } from 'cozy-client/dist/associations/HasMany'
+import Box from 'cozy-ui/transpiled/react/Box'
 import Button from 'cozy-ui/transpiled/react/Buttons'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import FieldInputLayout from './FieldInputLayout'
@@ -49,6 +51,7 @@ const ContactForm = ({ contacts, contact, customFieldsProps, onSubmit }) => {
   const { t } = useI18n()
   const { fields, makeCustomFieldsFormValues, makeCustomContactValues } =
     customFieldsProps
+  const { isMobile } = useBreakpoints()
 
   const _fields = makeFields(fields, defaultFields)
   const hasSecondaryFields = _fields.some(el => el.isSecondary)
@@ -90,20 +93,30 @@ const ContactForm = ({ contacts, contact, customFieldsProps, onSubmit }) => {
             onSubmit={handleSubmit}
             className="u-flex u-flex-column"
           >
-            {_fields.map((attributes, index) => (
-              <FieldInputLayout
-                key={index}
-                attributes={attributes}
-                contacts={contacts}
-                contact={contact}
-                showSecondaryFields={showSecondaryFields}
-                formProps={{
-                  valid,
-                  submitFailed,
-                  errors
-                }}
-              />
-            ))}
+            <div className="u-flex u-flex-wrap u-flex-justify-between">
+              {_fields.map((attributes, index) => (
+                <Box
+                  key={index}
+                  width={
+                    attributes.isHalfWidth && !isMobile
+                      ? 'calc(50% - 0.5rem)'
+                      : '100%'
+                  }
+                >
+                  <FieldInputLayout
+                    attributes={attributes}
+                    contacts={contacts}
+                    contact={contact}
+                    showSecondaryFields={showSecondaryFields}
+                    formProps={{
+                      valid,
+                      submitFailed,
+                      errors
+                    }}
+                  />
+                </Box>
+              ))}
+            </div>
             {hasSecondaryFields && !showSecondaryFields && (
               <div>
                 <Button

package/src/ContactsListModal/ContactsListModal.jsx

@@ -22,7 +22,6 @@ import AddContactDialog from './AddContact/AddContactDialog'
 import ContactsListContent from './ContactsListContent'
 import MobileHeader from './MobileHeader'
 import styles from './styles.styl'
-import CozyTheme from '../providers/CozyTheme'
 
 const ContactsListModal = ({
   onItemClick,
@@ -64,9 +63,7 @@ const ContactsListModal = ({
 
   return (
     <TopAnchoredDialog {...dialogProps}>
-      <CozyTheme variant={isMobile ? 'inverted' : 'normal'}>
-        <DialogCloseButton onClick={dismissAction} />
-      </CozyTheme>
+      <DialogCloseButton onClick={dismissAction} />
       <DialogTitle
         {...dialogTitleProps}
         className={cx(dialogTitleProps.className, {