cozy-ui-plus 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.1.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@6.0.0...cozy-ui-plus@6.1.0) (2026-04-02)
+
+### Bug Fixes
+
+- **cozy-ui-plus:** Remove icon wrapper on contact modal if no icon ([8b0ffa9](https://github.com/cozy/cozy-libs/commit/8b0ffa9a55dcc964c558625515e191316f03072a))
+
+### Features
+
+- **cozy-ui-plus:** Add `isHalfWidth` prop on fields ([a69e7b7](https://github.com/cozy/cozy-libs/commit/a69e7b7af6e0e7021d8ab5bb68894829b9a75c97))
+- **cozy-ui-plus:** Add prop on Contacts modal to remove field ([d9637ff](https://github.com/cozy/cozy-libs/commit/d9637ff248e3ddc39fe8664af645e96e4e551f2f))
+- **cozy-ui-plus:** Change size of contacts modal fields ([27fdb9a](https://github.com/cozy/cozy-libs/commit/27fdb9a344a0803ca1442b93c9213aedb93ad8a2))
+- **cozy-ui-plus:** Move field remove button next to the input ([0a7c409](https://github.com/cozy/cozy-libs/commit/0a7c409a84dbb5f235586069feaa45454df0fbee))
+
 # [6.0.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@5.3.1...cozy-ui-plus@6.0.0) (2026-03-24)
 
 ### Features

package/dist/Contacts/AddModal/ContactForm/FieldInput.js

@@ -21,6 +21,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactFinalForm = require("react-final-form");
 
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
 var _twakeI18n = require("twake-i18n");
 
 var _FieldInputWrapper = _interopRequireDefault(require("./FieldInputWrapper"));
@@ -29,35 +31,55 @@ var _HasValueCondition = _interopRequireDefault(require("./HasValueCondition"));
 
 var _RelatedContactList = require("./RelatedContactList");
 
+var _RemoveButton = _interopRequireDefault(require("./RemoveButton"));
+
 var _locales = require("./locales");
 
 var _ContactAddressDialog = _interopRequireDefault(require("../ContactAddressDialog"));
 
 var _types = require("../types");
 
-var _excluded = ["subFields"];
+var _excluded = ["showRemove", "onRemove"],
+    _excluded2 = ["subFields"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var styles = {
-  "contact-form-field__wrapper": "styles__contact-form-field__wrapper___13Usq"
+var FieldAndRemove = function FieldAndRemove(_ref) {
+  var showRemove = _ref.showRemove,
+      onRemove = _ref.onRemove,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  if (isMobile) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-flex u-flex-items-center u-w-100"
+    }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, props), showRemove && /*#__PURE__*/_react.default.createElement(_RemoveButton.default, {
+      onRemove: onRemove
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, props);
 };
 
-var FieldInput = function FieldInput(_ref) {
-  var name = _ref.name,
-      labelProps = _ref.labelProps,
-      className = _ref.className,
-      _ref$attributes = _ref.attributes,
-      subFields = _ref$attributes.subFields,
-      restAttributes = (0, _objectWithoutProperties2.default)(_ref$attributes, _excluded),
-      contacts = _ref.contacts,
-      contact = _ref.contact,
-      error = _ref.error,
-      helperText = _ref.helperText,
-      label = _ref.label,
-      isInvisible = _ref.isInvisible;
+var FieldInput = function FieldInput(_ref2) {
+  var name = _ref2.name,
+      labelProps = _ref2.labelProps,
+      className = _ref2.className,
+      _ref2$attributes = _ref2.attributes,
+      subFields = _ref2$attributes.subFields,
+      restAttributes = (0, _objectWithoutProperties2.default)(_ref2$attributes, _excluded2),
+      contacts = _ref2.contacts,
+      contact = _ref2.contact,
+      error = _ref2.error,
+      onRemove = _ref2.onRemove,
+      showRemove = _ref2.showRemove,
+      helperText = _ref2.helperText,
+      label = _ref2.label,
+      isInvisible = _ref2.isInvisible;
 
   var _useState = (0, _react.useState)((0, _uniqueId.default)('field_')),
       _useState2 = (0, _slicedToArray2.default)(_useState, 1),
@@ -84,6 +106,9 @@ var FieldInput = function FieldInput(_ref) {
   var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
 
+  var _useBreakpoints2 = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints2.isMobile;
+
   var handleClick = function handleClick() {
     if (name.includes('address')) {
       setIsAddressDialogOpen(true);
@@ -99,11 +124,11 @@ var FieldInput = function FieldInput(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(className, styles['contact-form-field__wrapper'], 'u-flex-column-s', {
+    className: (0, _classnames.default)(className, 'u-flex-column-s u-flex-items-center u-w-100', {
       'u-flex': !isInvisible,
       'u-dn': isInvisible
     })
-  }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  }, /*#__PURE__*/_react.default.createElement(FieldAndRemove, {
     error: error,
     helperText: helperText,
     label: label,
@@ -112,6 +137,8 @@ var FieldInput = function FieldInput(_ref) {
     name: name,
     contact: contact,
     component: _FieldInputWrapper.default,
+    showRemove: showRemove,
+    onRemove: onRemove,
     onFocus: onFocus,
     onClick: handleClick
   }), isAddressDialogOpen && /*#__PURE__*/_react.default.createElement(_ContactAddressDialog.default, {
@@ -130,7 +157,7 @@ var FieldInput = function FieldInput(_ref) {
     name: name,
     otherCondition: hasBeenFocused
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "u-mt-half-s u-ml-half u-ml-0-s u-flex-shrink-0 u-w-auto u-miw-4"
+    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"
   }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     attributes: labelProps,
     name: "".concat(name, "Label"),
@@ -138,7 +165,9 @@ var FieldInput = function FieldInput(_ref) {
     contact: contact,
     component: _FieldInputWrapper.default,
     onFocus: onFocus
-  }))));
+  }))), showRemove && !isMobile && /*#__PURE__*/_react.default.createElement(_RemoveButton.default, {
+    onRemove: onRemove
+  }));
 };
 
 FieldInput.propTypes = {

package/dist/Contacts/AddModal/ContactForm/FieldInputArray.js

@@ -19,14 +19,8 @@ var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"
 
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
-var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
-
-var _CrossCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/CrossCircle"));
-
 var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"));
 
-var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
-
 var _twakeI18n = require("twake-i18n");
 
 var _FieldInput = _interopRequireDefault(require("./FieldInput"));
@@ -76,21 +70,16 @@ var FieldInputArray = function FieldInputArray(_ref) {
         contacts: contacts,
         contact: contact,
         error: isError,
+        index: index,
+        showRemove: showRemove,
         helperText: isError ? errors[inputName] : null,
         name: inputName,
         label: t("Contacts.AddModal.ContactForm.fields.".concat(name)),
-        labelProps: label
-      }), showRemove && /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
-        className: "u-ml-half"
-      }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-        "aria-label": "delete",
-        size: "medium",
-        onClick: function onClick() {
+        labelProps: label,
+        onRemove: function onRemove() {
           return (0, _helpers.removeField)(fields, index);
         }
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        icon: _CrossCircle.default
-      }))));
+      }));
     }), /*#__PURE__*/_react.default.createElement(_Buttons.default, {
       variant: "text",
       startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {

package/dist/Contacts/AddModal/ContactForm/FieldInputLayout.js

@@ -57,9 +57,9 @@ var FieldInputLayout = function FieldInputLayout(_ref) {
       'u-flex': !isSecondary || showSecondaryFields,
       'u-dn': isSecondary && !showSecondaryFields
     })
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, icon && /*#__PURE__*/_react.default.createElement("div", {
     className: "u-w-2-half"
-  }, icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: icon,
     color: "var(--iconTextColor)"
   })), /*#__PURE__*/_react.default.createElement("div", {

package/dist/Contacts/AddModal/ContactForm/FieldInputWrapper.js

@@ -21,7 +21,7 @@ var _TextFieldSelect = _interopRequireDefault(require("./TextFieldSelect"));
 
 var _types = require("../types");
 
-var _excluded = ["component", "layout", "icon", "isSecondary", "validate"],
+var _excluded = ["component", "layout", "isHalfWidth", "icon", "isSecondary", "validate"],
     _excluded2 = ["input", "attributes", "variant", "fullWidth"];
 
 // component used to flatten props to ensure compatibility
@@ -31,6 +31,7 @@ var FieldInputWrapper = function FieldInputWrapper(_ref) {
       _ref$attributes = _ref.attributes,
       component = _ref$attributes.component,
       layout = _ref$attributes.layout,
+      isHalfWidth = _ref$attributes.isHalfWidth,
       icon = _ref$attributes.icon,
       isSecondary = _ref$attributes.isSecondary,
       validate = _ref$attributes.validate,
@@ -42,6 +43,7 @@ var FieldInputWrapper = function FieldInputWrapper(_ref) {
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, input, restAttributes, props, {
     variant: variant,
     fullWidth: fullWidth,
+    size: "small",
     minRows: "2"
   }));
 };

package/dist/Contacts/AddModal/ContactForm/RemoveButton.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _CrossCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/CrossCircle"));
+
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
+var RemoveButton = function RemoveButton(_ref) {
+  var onRemove = _ref.onRemove;
+  return /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
+    className: "u-ml-half"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    "aria-label": "delete",
+    size: "medium",
+    onClick: onRemove
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _CrossCircle.default
+  })));
+};
+
+var _default = RemoveButton;
+exports.default = _default;

package/dist/Contacts/AddModal/ContactForm/fieldsConfig.js

@@ -56,6 +56,7 @@ var fields = [{
   icon: null,
   type: 'text',
   layout: 'accordion',
+  isHalfWidth: true,
   subFields: [{
     name: 'additionalName',
     icon: null,
@@ -68,7 +69,8 @@ var fields = [{
 }, {
   name: 'familyName',
   icon: null,
-  type: 'text'
+  type: 'text',
+  isHalfWidth: true
 }, {
   name: 'company',
   icon: _Company.default,

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

@@ -541,7 +541,17 @@ var makeFields = function makeFields(customFields, defaultFields) {
   customFields.forEach(function (customField) {
     var defaultField = fields.find(function (field) {
       return field.name === customField.name;
-    });
+    }); // If isRemoved is true, remove the field from the result
+
+    if (customField.isRemoved) {
+      if (defaultField) {
+        fields = fields.filter(function (field) {
+          return field.name !== customField.name;
+        });
+      }
+
+      return;
+    }
 
     var _field = defaultField || customField;
 
@@ -549,7 +559,7 @@ var makeFields = function makeFields(customFields, defaultFields) {
       Object.assign(_field, customField);
     }
 
-    if (_field.position) {
+    if (_field.position !== undefined) {
       if (defaultField) {
         var fieldIndex = fields.indexOf(defaultField);
         fields.splice(fieldIndex, 1);

package/dist/Contacts/AddModal/ContactForm/index.js

@@ -21,8 +21,12 @@ var _reactFinalForm = require("react-final-form");
 
 var _HasMany = require("cozy-client/dist/associations/HasMany");
 
+var _Box = _interopRequireDefault(require("cozy-ui/transpiled/react/Box"));
+
 var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
 
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
 var _twakeI18n = require("twake-i18n");
 
 var _FieldInputLayout = _interopRequireDefault(require("./FieldInputLayout"));
@@ -91,6 +95,9 @@ var ContactForm = function ContactForm(_ref) {
       makeCustomFieldsFormValues = customFieldsProps.makeCustomFieldsFormValues,
       makeCustomContactValues = customFieldsProps.makeCustomContactValues;
 
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
   var _fields = (0, _helpers.makeFields)(fields, _fieldsConfig.fields);
 
   var hasSecondaryFields = _fields.some(function (el) {
@@ -131,9 +138,13 @@ var ContactForm = function ContactForm(_ref) {
         role: "form",
         onSubmit: handleSubmit,
         className: "u-flex u-flex-column"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "u-flex u-flex-wrap u-flex-justify-between"
       }, _fields.map(function (attributes, index) {
-        return /*#__PURE__*/_react.default.createElement(_FieldInputLayout.default, {
+        return /*#__PURE__*/_react.default.createElement(_Box.default, {
           key: index,
+          width: attributes.isHalfWidth && !isMobile ? 'calc(50% - 0.5rem)' : '100%'
+        }, /*#__PURE__*/_react.default.createElement(_FieldInputLayout.default, {
           attributes: attributes,
           contacts: contacts,
           contact: contact,
@@ -143,8 +154,8 @@ var ContactForm = function ContactForm(_ref) {
             submitFailed: submitFailed,
             errors: errors
           }
-        });
-      }), hasSecondaryFields && !showSecondaryFields && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+        }));
+      })), hasSecondaryFields && !showSecondaryFields && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
         className: "u-db u-ml-2 u-mt-1",
         variant: "text",
         label: t('Contacts.AddModal.ContactForm.other-fields'),

package/dist/Field/index.js

@@ -46,11 +46,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var labelStyles = {
-  "c-label": "styles__c-label___24c92",
-  "is-error": "styles__is-error___1gUPb",
-  "c-label--block": "styles__c-label--block___1Zska"
-};
+var labelStyles = {};
 var styles = {
   "o-field": "styles__o-field___2B6P3",
   "o-field--inline": "styles__o-field--inline___3D2bq",

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/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": "6.0.0",
+  "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",
@@ -73,5 +73,5 @@
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "4c152ef7f2acafb450df245f5ce58638cbdb6be3"
+  "gitHead": "0ac8873a7ba8909f3b02cb719d9fc05133bf5a1d"
 }

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/Contacts/AddModal/ContactForm/styles.styl

@@ -1,2 +0,0 @@
-.contact-form-field__wrapper
-    width calc(100% - 3rem)