@ouestfrance/sipa-bms-ui 8.4.0 → 8.5.0

package/dist/sipa-bms-ui.css

@@ -485,67 +485,72 @@
   position: relative;
   display: inline-block;
   outline: none;
-}ul[data-v-4f63af62] {
+}ul[data-v-413e6742] {
   border-style: none;
   border-radius: 0 0 4px 4px;
   text-decoration: none;
   list-style-type: none;
   padding: 0;
   margin: 0;
+  --field-padding: 0.4em;
+  --field-height: 4rem;
 }
-ul li[data-v-4f63af62]:first-of-type {
+ul li[data-v-413e6742]:first-of-type {
   border-top: 1px solid var(--bms-grey-10);
 }
-ul li[data-v-4f63af62]:first-child {
+ul li[data-v-413e6742]:first-child {
   border-top-left-radius: var(--bms-border-radius);
   border-top-right-radius: var(--bms-border-radius);
 }
-ul li[data-v-4f63af62]:last-child {
+ul li[data-v-413e6742]:last-child {
   border-bottom-left-radius: var(--bms-border-radius);
   border-bottom-right-radius: var(--bms-border-radius);
 }
-ul li[data-v-4f63af62] {
+ul li[data-v-413e6742] {
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding: 0.4em;
+  padding: var(--field-padding);
   border: 1px solid var(--bms-grey-10);
   border-top: none;
   background-color: var(--bms-white);
-  min-height: 4rem;
+  min-height: var(--field-height);
 }
-ul li[data-v-4f63af62]:hover, ul li.selected[data-v-4f63af62] {
+ul li.small[data-v-413e6742] {
+  --field-padding: 0.2em 0.4em;
+  --field-height: 2rem;
+}
+ul li[data-v-413e6742]:hover, ul li.selected[data-v-413e6742] {
   background-color: var(--bms-grey-10);
-}.input-wrapper[data-v-c1fe71b9] {
+}.input-wrapper[data-v-af4d1ce5] {
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 1em;
-  margin: 0.5em 0;
   border-radius: var(--bms-border-radius);
   border: 1px solid var(--field-border-color);
   background-color: var(--input-background-color);
-  height: 48px;
+  padding: var(--field-padding);
+  height: var(--field-height);
 }
-.input-wrapper[data-v-c1fe71b9]:hover {
+.input-wrapper[data-v-af4d1ce5]:hover {
   --field-border-color: var(--bms-grey-100);
 }
-.input-wrapper[data-v-c1fe71b9]:has(input:focus) {
+.input-wrapper[data-v-af4d1ce5]:has(input:focus) {
   box-shadow: 0 0 4px 4px var(--bms-main-25);
   --field-border-color: var(--field-border-color-active);
 }
-.input-wrapper.is-error[data-v-c1fe71b9] {
+.input-wrapper.is-error[data-v-af4d1ce5] {
   --field-border-color: var(--bms-red-100);
   --input-background-color: var(--bms-red-25);
 }
-.input-wrapper.is-disabled[data-v-c1fe71b9] {
+.input-wrapper.is-disabled[data-v-af4d1ce5] {
   --field-border-color: var(--bms-grey-25);
   --input-background-color: var(--bms-grey-25);
 }
-.input-wrapper.is-disabled input[data-v-c1fe71b9] {
+.input-wrapper.is-disabled input[data-v-af4d1ce5] {
   pointer-events: none;
 }
-.input-wrapper .field__input-label[data-v-c1fe71b9] {
+.input-wrapper .field__input-label[data-v-af4d1ce5] {
   display: block;
   color: var(--bms-grey-50);
   font-size: 12px;
@@ -553,24 +558,24 @@ ul li[data-v-4f63af62]:hover, ul li.selected[data-v-4f63af62] {
   margin-top: 6px;
   margin-bottom: 4px;
 }
-.input-wrapper .field__input-icon[data-v-c1fe71b9] {
+.input-wrapper .field__input-icon[data-v-af4d1ce5] {
   display: flex;
 }
-.input-wrapper .field__input-icon--start[data-v-c1fe71b9] {
+.input-wrapper .field__input-icon--start[data-v-af4d1ce5] {
   margin-right: 0.5em;
 }
-.input-wrapper .field__input-icon--end[data-v-c1fe71b9] {
+.input-wrapper .field__input-icon--end[data-v-af4d1ce5] {
   margin-left: 0.5em;
 }
-.input-wrapper .field__input-icon[data-v-c1fe71b9] svg {
+.input-wrapper .field__input-icon[data-v-af4d1ce5] svg {
   width: 1em;
   height: 1em;
   display: block;
 }
-.input-wrapper .field__input-icon[data-v-c1fe71b9]:empty {
+.input-wrapper .field__input-icon[data-v-af4d1ce5]:empty {
   display: none;
 }
-.input-wrapper input[data-v-c1fe71b9] {
+.input-wrapper input[data-v-af4d1ce5] {
   outline: none;
   appearance: none;
   border: 0;
@@ -582,7 +587,7 @@ ul li[data-v-4f63af62]:hover, ul li.selected[data-v-4f63af62] {
   line-height: 1;
   width: 100%;
   background-color: transparent;
-}.field__input .autocomplete-wrapper[data-v-a3c538be] {
+}.field__input .autocomplete-wrapper[data-v-9b0bf4fb] {
   width: 100%;
   padding: 0.7em;
   margin: 0.5em 0;
@@ -591,22 +596,22 @@ ul li[data-v-4f63af62]:hover, ul li.selected[data-v-4f63af62] {
   background-color: var(--input-background-color);
   height: 48px;
 }
-.field__input .autocomplete-wrapper[data-v-a3c538be]:hover {
+.field__input .autocomplete-wrapper[data-v-9b0bf4fb]:hover {
   --field-border-color: var(--bms-grey-100);
 }
-.field__input .autocomplete-wrapper[data-v-a3c538be]:has(input:focus) {
+.field__input .autocomplete-wrapper[data-v-9b0bf4fb]:has(input:focus) {
   --field-border-color: var(--field-border-color-active);
 }
-.field__input .autocomplete-wrapper.is-error[data-v-a3c538be] {
+.field__input .autocomplete-wrapper.is-error[data-v-9b0bf4fb] {
   --field-border-color: var(--bms-red-100);
   --input-background-color: var(--bms-red-25);
 }
-.field__input .autocomplete-wrapper.is-disabled[data-v-a3c538be] {
+.field__input .autocomplete-wrapper.is-disabled[data-v-9b0bf4fb] {
   --field-border-color: var(--bms-grey-25);
   --input-background-color: var(--bms-grey-25);
   pointer-events: none;
 }
-.field__input .autocomplete-wrapper input[data-v-a3c538be] {
+.field__input .autocomplete-wrapper input[data-v-9b0bf4fb] {
   outline: none;
   appearance: none;
   border: 0;
@@ -619,28 +624,28 @@ ul li[data-v-4f63af62]:hover, ul li.selected[data-v-4f63af62] {
   width: 100%;
   background-color: transparent;
 }
-.icon[data-v-a3c538be] {
+.icon[data-v-9b0bf4fb] {
   height: 1em;
   width: 1em;
   cursor: pointer;
-}.icon[data-v-de6b30ef] {
+}.icon[data-v-274b6035] {
   height: 1em;
   width: 1em;
 }
-.icon.datalist-icon[data-v-de6b30ef] {
+.icon.datalist-icon[data-v-274b6035] {
   margin: 0 0.5em;
 }
-.icon[data-v-de6b30ef] svg {
+.icon[data-v-274b6035] svg {
   height: 100%;
   width: 100%;
 }
-.icon[data-v-de6b30ef] svg * {
+.icon[data-v-274b6035] svg * {
   fill: currentColor !important;
-}.field-between__separator[data-v-66be0ad9] {
+}.field-between__separator[data-v-f25b520b] {
   margin-left: 10px;
   margin-right: 10px;
 }
-.field-between .input-wrapper[data-v-66be0ad9] {
+.field-between .input-wrapper[data-v-f25b520b] {
   display: unset;
   margin-left: 0;
   position: relative;
@@ -797,15 +802,15 @@ input[type=checkbox][data-v-e1d94c62]:checked {
 }
 input[type=checkbox][data-v-e1d94c62]:checked::before {
   transform: scale(1);
-}.field-checkbox[data-v-57bb21ed] {
+}.field-checkbox[data-v-303fc240] {
   padding: 0.5em 0;
-}.input-checkbox-group-wrapper[data-v-595e146b] {
+}.input-checkbox-group-wrapper[data-v-c7601e12] {
   display: flex;
   gap: 1em;
   margin: 0.5em 0;
   flex-direction: row;
 }
-.input-checkbox-group-wrapper.column[data-v-595e146b] {
+.input-checkbox-group-wrapper.column[data-v-c7601e12] {
   flex-direction: column;
 }.input-checkbox-caption[data-v-6cb7c474] {
   --input-checkbox-caption-border-color: var(--bms-grey-25);
@@ -834,55 +839,54 @@ input[type=checkbox][data-v-e1d94c62]:checked::before {
 .input-checkbox-caption.error[data-v-6cb7c474] {
   --input-checkbox-caption-border-color: var(--bms-red-100);
   --input-checkbox-caption-background-color: var(--bms-red-25);
-}.input-checkbox-group-caption-wrapper[data-v-d17019ce] {
+}.input-checkbox-group-caption-wrapper[data-v-accf8b96] {
   display: flex;
   gap: 1em;
   margin: 0.5em 0;
   flex-direction: row;
 }
-.input-checkbox-group-caption-wrapper.column[data-v-d17019ce] {
+.input-checkbox-group-caption-wrapper.column[data-v-accf8b96] {
   flex-direction: column;
-}.code-mirror[data-v-726c6059] {
+}.code-mirror[data-v-b2a2a2fa] {
   max-height: 50rem;
   width: 100%;
   overflow: auto;
   border-radius: 4px;
-}.file-upload[data-v-5d2c657c] {
+}.file-upload[data-v-b49de497] {
   --drop-color: var(--bms-grey-10);
   --drop-border: 1px dashed var(--bms-grey-50);
 }
-.file-upload[data-v-5d2c657c] .field__wrapper {
+.file-upload[data-v-b49de497] .field__wrapper {
   width: 100%;
   min-width: 0;
 }
-.file-upload .is-disabled[data-v-5d2c657c] {
+.file-upload .is-disabled[data-v-b49de497] {
   --drop-color: var(--bms-grey-25);
   --drop-border: 1px solid var(--bms-grey-25);
   color: var(--bms-grey-75);
 }
-.file-upload .is-error[data-v-5d2c657c] {
+.file-upload .is-error[data-v-b49de497] {
   --drop-color: var(--bms-red-25);
   --drop-border: 1px solid var(--bms-red-100);
 }
-.file-upload__drop-area[data-v-5d2c657c] {
+.file-upload__drop-area[data-v-b49de497] {
   display: block;
-  padding: 4em 1em;
-  margin: 1em 0;
+  padding: calc(4 * var(--field-padding)) var(--field-padding);
   text-align: center;
   border-radius: var(--bms-border-radius);
   border: var(--drop-border);
   background: var(--drop-color);
   cursor: pointer;
 }
-.file-upload__drop-area[data-v-5d2c657c]:active, .file-upload__drop-area__active[data-v-5d2c657c] {
+.file-upload__drop-area[data-v-b49de497]:active, .file-upload__drop-area__active[data-v-b49de497] {
   --drop-color: transparent;
   --drop-border: 1px solid var(--bms-main-100);
 }
-.file-upload__drop-area[data-v-5d2c657c]:hover, .file-upload__drop-area__hover[data-v-5d2c657c] {
+.file-upload__drop-area[data-v-b49de497]:hover, .file-upload__drop-area__hover[data-v-b49de497] {
   --drop-color: var(--bms-main-10);
   --drop-border: 1px dashed var(--bms-grey-100);
 }
-.file-upload__drop-area input[type=file][data-v-5d2c657c] {
+.file-upload__drop-area input[type=file][data-v-b49de497] {
   opacity: 0;
   position: absolute;
   pointer-events: none;
@@ -890,19 +894,19 @@ input[type=checkbox][data-v-e1d94c62]:checked::before {
   width: 0;
   height: 0;
 }
-.file-upload__drop-area.is-active[data-v-5d2c657c] {
+.file-upload__drop-area.is-active[data-v-b49de497] {
   --drop-color: var(--bms-main-25);
 }
-.file-upload__drop-area.wide[data-v-5d2c657c] {
+.file-upload__drop-area.wide[data-v-b49de497] {
   width: 100%;
 }
-.file-upload__file-list[data-v-5d2c657c] {
+.file-upload__file-list[data-v-b49de497] {
   display: flex;
   width: 100%;
   gap: 1em;
   margin: 1em 0;
 }
-.file-upload__file[data-v-5d2c657c] {
+.file-upload__file[data-v-b49de497] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -913,21 +917,21 @@ input[type=checkbox][data-v-e1d94c62]:checked::before {
   background: var(--bms-grey-10);
   position: relative;
 }
-.file-upload__file.wide[data-v-5d2c657c] {
+.file-upload__file.wide[data-v-b49de497] {
   width: 100%;
   height: 300px;
 }
-.file-upload__file-img[data-v-5d2c657c] {
+.file-upload__file-img[data-v-b49de497] {
   max-width: 100%;
   max-height: 100%;
 }
-.file-upload__file-name[data-v-5d2c657c] {
+.file-upload__file-name[data-v-b49de497] {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   flex: 1 1 auto;
 }
-.file-upload__file[data-v-5d2c657c] .close-button {
+.file-upload__file[data-v-b49de497] .close-button {
   position: absolute;
   top: 0;
   right: 0;
@@ -983,13 +987,13 @@ input[type=radio][data-v-cb26402d]:checked {
 }
 input[type=radio][data-v-cb26402d]:checked::before {
   transform: scale(1);
-}.input-radio-group-wrapper[data-v-28c3db26] {
+}.input-radio-group-wrapper[data-v-c55cf0b4] {
   display: flex;
   gap: 1em;
-  margin: 0.5em 0;
+  margin: var(--field-margin);
   flex-direction: row;
 }
-.input-radio-group-wrapper.column[data-v-28c3db26] {
+.input-radio-group-wrapper.column[data-v-c55cf0b4] {
   flex-direction: column;
 }.input-radio-caption[data-v-c3ba4fee] {
   --input-radio-caption-border-color: var(--bms-grey-25);
@@ -1018,13 +1022,13 @@ input[type=radio][data-v-cb26402d]:checked::before {
 .input-radio-caption.error[data-v-c3ba4fee] {
   --input-radio-caption-border-color: var(--bms-red-100);
   --input-radio-caption-background-color: var(--bms-red-25);
-}.input-radio-group-caption-wrapper[data-v-0b421813] {
+}.input-radio-group-caption-wrapper[data-v-1cd0ba66] {
   display: flex;
   gap: 1em;
   margin: 0.5em 0;
   flex-direction: row;
 }
-.input-radio-group-caption-wrapper.column[data-v-0b421813] {
+.input-radio-group-caption-wrapper.column[data-v-1cd0ba66] {
   flex-direction: column;
 }input[data-v-19745934] {
   display: none;
@@ -1062,73 +1066,72 @@ input[type=radio][data-v-cb26402d]:checked::before {
 .switch-wrapper.disabled[data-v-19745934] {
   --switch-background-color: var(--bms-grey-25);
   --switch-color: var(--bms-grey-50);
-}.input-toggle[data-v-2d2ac60e] {
+}.input-toggle[data-v-9570e0a9] {
   --label-color: var(--bms-grey-100);
   --cursor: pointer;
-  font-weight: bold;
+  font-weight: var(--field-label-font-weight);
   display: flex;
   align-items: center;
   gap: 0.5em;
 }
-.input-toggle .input-switch-info[data-v-2d2ac60e] {
+.input-toggle .input-switch-info[data-v-9570e0a9] {
   color: var(--label-color);
   transition: 0.2s;
 }
-.input-toggle.isOn[data-v-2d2ac60e] {
+.input-toggle.isOn[data-v-9570e0a9] {
   --label-color: var(--bms-main-100);
 }
-.input-toggle.disabled[data-v-2d2ac60e] {
+.input-toggle.disabled[data-v-9570e0a9] {
   --label-color: var(--bms-grey-50);
   --cursor: default;
 }
-.input-toggle[data-v-2d2ac60e]:hover {
+.input-toggle[data-v-9570e0a9]:hover {
   cursor: var(--cursor);
-}.field__input[data-v-c57d6d77] {
+}.field__input[data-v-3898a72d] {
   --field-border-color: var(--bms-grey-50);
   --field-border-color-active: var(--bms-main-100);
   --input-background-color: var(--bms-white);
 }
-.field__input .select-wrapper[data-v-c57d6d77] {
+.field__input .select-wrapper[data-v-3898a72d] {
   width: 100%;
   padding: 0 0 0 1em;
-  margin: 0.5em 0;
   border-radius: var(--bms-border-radius);
   border: 1px solid var(--field-border-color);
   background-color: var(--input-background-color);
-  min-height: 48px;
+  min-height: var(--field-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.field__input .select-wrapper .icon-down-container[data-v-c57d6d77] {
+.field__input .select-wrapper .icon-down-container[data-v-3898a72d] {
   height: 100%;
   display: flex;
   align-items: center;
 }
-.field__input .select-wrapper .icon-down-container[data-v-c57d6d77]:hover {
+.field__input .select-wrapper .icon-down-container[data-v-3898a72d]:hover {
   cursor: pointer;
 }
-.field__input .select-wrapper .icon-down-button[data-v-c57d6d77] {
+.field__input .select-wrapper .icon-down-button[data-v-3898a72d] {
   width: 1em;
-  margin: 0 1em 0 0.5em;
+  margin: 0 var(--field-padding);
   display: block;
 }
-.field__input .select-wrapper[data-v-c57d6d77]:hover {
+.field__input .select-wrapper[data-v-3898a72d]:hover {
   --field-border-color: var(--bms-grey-100);
 }
-.field__input .select-wrapper[data-v-c57d6d77]:has(input:focus) {
+.field__input .select-wrapper[data-v-3898a72d]:has(input:focus) {
   --field-border-color: var(--field-border-color-active);
 }
-.field__input .select-wrapper.is-error[data-v-c57d6d77] {
+.field__input .select-wrapper.is-error[data-v-3898a72d] {
   --field-border-color: var(--bms-red-100);
   --input-background-color: var(--bms-red-25);
 }
-.field__input .select-wrapper.is-disabled[data-v-c57d6d77] {
+.field__input .select-wrapper.is-disabled[data-v-3898a72d] {
   --field-border-color: var(--bms-grey-25);
   --input-background-color: var(--bms-grey-25);
   pointer-events: none;
 }
-.field__input .select-wrapper input[data-v-c57d6d77] {
+.field__input .select-wrapper input[data-v-3898a72d] {
   border: none;
   background-color: transparent;
   caret-color: transparent;
@@ -1143,7 +1146,7 @@ input[type=radio][data-v-cb26402d]:checked::before {
   line-height: 1;
   width: 100%;
   height: 100%;
-}.tag[data-v-3c04a9f9] {
+}.tag[data-v-e2517fee] {
   --tag-border-color: var(--bms-main-100);
   --tag-background-color: transparent;
   --tag-color: var(--bms-main-100);
@@ -1161,82 +1164,85 @@ input[type=radio][data-v-cb26402d]:checked::before {
   background-color: var(--tag-background-color);
   cursor: pointer;
 }
-.tag.disabled[data-v-3c04a9f9] {
+.tag.disabled[data-v-e2517fee] {
   pointer-events: none;
   cursor: default;
   --tag-color: var(--bms-grey-50);
   --tag-border-color: var(--bms-grey-50);
 }
-.tag.disabled.active[data-v-3c04a9f9] {
+.tag.disabled.active[data-v-e2517fee] {
   --tag-color: white;
   --tag-background-color: var(--bms-grey-50);
 }
-.tag[data-v-3c04a9f9]:focus, .tag[data-v-3c04a9f9]:hover {
+.tag.small[data-v-e2517fee] {
+  padding: 2px 4px;
+  gap: 4px;
+}
+.tag[data-v-e2517fee]:focus, .tag[data-v-e2517fee]:hover {
   --tag-color: var(--bms-main-140);
   --tag-border-color: var(--bms-main-140);
 }
-.tag.active[data-v-3c04a9f9] {
+.tag.active[data-v-e2517fee] {
   --tag-color: white;
   --tag-background-color: var(--bms-main-100);
 }
-.tag.active[data-v-3c04a9f9]:focus, .tag.active[data-v-3c04a9f9]:hover {
+.tag.active[data-v-e2517fee]:focus, .tag.active[data-v-e2517fee]:hover {
   --tag-border-color: var(--bms-main-140);
   --tag-background-color: var(--bms-main-140);
 }
-.tag[data-v-3c04a9f9] svg {
+.tag[data-v-e2517fee] svg {
   width: 14px;
   height: 14px;
 }
-.tag .dismiss-button[data-v-3c04a9f9] {
+.tag .dismiss-button[data-v-e2517fee] {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--tag-background-color);
   color: var(--tag-color);
 }
-.tag .dismiss-button[data-v-3c04a9f9] .bms-button {
+.tag .dismiss-button[data-v-e2517fee] .bms-button {
   color: currentColor;
   padding: 0;
   height: fit-content;
 }
-.tag .dismiss-button[data-v-3c04a9f9] .bms-button .content {
+.tag .dismiss-button[data-v-e2517fee] .bms-button .content {
   margin: 0;
 }
-.tag .dismiss-button[data-v-3c04a9f9] .bms-button:hover {
+.tag .dismiss-button[data-v-e2517fee] .bms-button:hover {
   background-color: var(--tag-background-color);
-}.tags[data-v-a6e4687c] {
+}.tags[data-v-5159656e] {
   display: flex;
   gap: 0.5em;
-  padding: 10px 0;
+  padding: var(--field-margin);
   flex-wrap: wrap;
   width: 100%;
 }
-.tags .search[data-v-a6e4687c] {
+.tags .search[data-v-5159656e] {
   outline: none;
   border: none;
   background-color: transparent;
   flex-grow: 1;
 }
-.icon-container[data-v-a6e4687c] {
+.icon-container[data-v-5159656e] {
   height: 100%;
   display: flex;
   align-items: center;
 }
-.icon-container[data-v-a6e4687c]:hover {
+.icon-container[data-v-5159656e]:hover {
   cursor: pointer;
 }
-.icon-button[data-v-a6e4687c] {
+.icon-button[data-v-5159656e] {
   width: 1em;
   margin: 0 1em 0 0.5em;
   display: block;
 }.clean-icon[data-v-66c267f2]:hover {
   cursor: pointer;
-}.field__input textarea[data-v-ec1c11a0] {
+}.field__input textarea[data-v-14d354f8] {
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 1em;
-  margin: 0.5em 0;
+  padding: var(--field-padding);
   border-radius: var(--bms-border-radius);
   border: 1px solid var(--field-border-color);
   background-color: var(--textarea-background-color);
@@ -1245,20 +1251,23 @@ input[type=radio][data-v-cb26402d]:checked::before {
   font: inherit;
   color: inherit;
 }
-.field__input textarea[data-v-ec1c11a0]:hover {
+.field__input textarea[data-v-14d354f8]:hover {
   --field-border-color: var(--bms-grey-100);
 }
-.field__input textarea[data-v-ec1c11a0]:active, .field__input textarea[data-v-ec1c11a0]:focus {
+.field__input textarea[data-v-14d354f8]:active, .field__input textarea[data-v-14d354f8]:focus {
   --field-border-color: var(--field-border-color-active);
 }
-.field__input textarea.is-error[data-v-ec1c11a0] {
+.field__input textarea.is-error[data-v-14d354f8] {
   --field-border-color: var(--bms-red-100);
   --textarea-background-color: var(--bms-red-25);
 }
-.field__input textarea.is-disabled[data-v-ec1c11a0] {
+.field__input textarea.is-disabled[data-v-14d354f8] {
   --field-border-color: var(--bms-grey-25);
   --textarea-background-color: var(--bms-grey-25);
   pointer-events: none;
+}
+.field__input textarea.is-small[data-v-14d354f8] {
+  min-height: 56px;
 }.page[data-v-31057778] {
   margin: 0 auto;
   width: var(--wrapper-width, calc(100% - 3.2rem));
@@ -3054,10 +3063,18 @@ section {
   --input-background-color: var(--bms-white);
   --field-label-color: var(--bms-font-color);
   background: transparent;
+  --field-height: 48px;
+  --field-padding: 1em;
+  --field-margin: 0.5em 0;
+  --field-label-font-weight: bold;
 }
 .field__errors {
   font-size: 14px;
   color: var(--bms-red-75);
+  margin-bottom: var(--field-margin);
+}
+.field__captions {
+  margin-bottom: var(--field-margin);
 }
 .field__wrapper {
   display: inline-block;
@@ -3072,7 +3089,7 @@ section {
 }
 .field__label__title {
   font-size: 1em;
-  font-weight: bold;
+  font-weight: var(--field-label-font-weight);
   color: var(--field-label-color);
 }
 .field__label-helper--icon {
@@ -3095,6 +3112,12 @@ section {
 .field__label:empty {
   display: none;
 }
+.field.is-small {
+  --field-height: 28px;
+  --field-padding: 0.5em;
+  --field-margin: 0;
+  --field-label-font-weight: normal;
+}
 .field.is-error {
   --field-label-color: var(--bms-danger-color);
 }
@@ -3118,4 +3141,5 @@ section {
 .field__input {
   display: flex;
   align-items: center;
+  margin: var(--field-margin);
 }