@transferwise/neptune-css 0.0.0-experimental-e477c03 → 0.0.0-experimental-7709e0e

package/dist/css/input-groups.css

@@ -2221,8 +2221,8 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   background-color: initial !important;
 }
 .np-theme-personal .form-group label {
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
+  margin-bottom: 8px;
+  margin-bottom: var(--padding-x-small);
 }
 .np-theme-personal .form-group .np-upload-input label {
   margin-bottom: 0;
@@ -2254,46 +2254,15 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   background-color: transparent;
   background-color: initial;
 }
-.np-theme-personal .has-success .alert-positive,
-.np-theme-personal .has-success .alert-success,
-.np-theme-personal .has-warning .alert-warning,
-.np-theme-personal .has-error .error-messages,
-.np-theme-personal .has-error .alert-detach.alert-danger {
-  display: flex;
-}
-.np-theme-personal .has-success .alert-positive .tw-icon,
-.np-theme-personal .has-success .alert-success .tw-icon,
-.np-theme-personal .has-warning .alert-warning .tw-icon,
-.np-theme-personal .has-error .alert-detach.alert-danger .tw-icon {
+.np-theme-personal .alert-detach .status-circle {
+  margin-top: 2px;
   margin-right: 4px;
   margin-right: var(--size-4);
-  padding-top: 2px;
-}
-.np-theme-personal .has-warning .alert-warning .tw-icon {
-  color: var(--color-sentiment-warning);
-  position: relative;
-  z-index: 1;
-}
-.np-theme-personal .has-warning .alert-warning .tw-icon::before {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 5px;
-  left: 4px;
-  height: 10px;
-  width: 50%;
-  background-color: var(--color-dark);
-  border-radius: 50%;
-  z-index: -1;
 }
 .np-theme-personal .has-error .error-messages,
 .np-theme-personal .has-error .alert-detach.alert-danger {
   color: var(--color-sentiment-negative);
 }
-.np-theme-personal .has-success .alert-positive .tw-icon,
-.np-theme-personal .has-success .alert-success .tw-icon {
-  color: var(--color-sentiment-positive);
-}
 .has-required::after {
   content: "\00a0*";
   color: #cf2929;

package/dist/css/neptune-addons.css

@@ -1083,10 +1083,6 @@ html:not([dir="rtl"]) .p-x-5 {
   padding-bottom: 40px !important;
   padding-bottom: var(--size-40) !important;
 }
-.gap-y-xs {
-  row-gap: calc(8px / 2);
-  row-gap: calc(var(--size-8) / 2);
-}
 .gap-y-1 {
   row-gap: 8px;
   row-gap: var(--size-8);

package/dist/css/neptune.css

@@ -5088,11 +5088,6 @@ html:not([dir="rtl"]) .p-x-5 {
   padding-bottom: var(--size-40) !important;
 }
 
-.gap-y-xs {
-  row-gap: calc(8px / 2);
-  row-gap: calc(var(--size-8) / 2);
-}
-
 .gap-y-1 {
   row-gap: 8px;
   row-gap: var(--size-8);
@@ -11783,8 +11778,8 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
 }
 
 .np-theme-personal .form-group label {
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
+  margin-bottom: 8px;
+  margin-bottom: var(--padding-x-small);
 }
 
 .np-theme-personal .form-group .np-upload-input label {
@@ -11822,40 +11817,10 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   background-color: initial;
 }
 
-.np-theme-personal .has-success .alert-positive,
-.np-theme-personal .has-success .alert-success,
-.np-theme-personal .has-warning .alert-warning,
-.np-theme-personal .has-error .error-messages,
-.np-theme-personal .has-error .alert-detach.alert-danger {
-  display: flex;
-}
-
-.np-theme-personal .has-success .alert-positive .tw-icon,
-.np-theme-personal .has-success .alert-success .tw-icon,
-.np-theme-personal .has-warning .alert-warning .tw-icon,
-.np-theme-personal .has-error .alert-detach.alert-danger .tw-icon {
+.np-theme-personal .alert-detach .status-circle {
+  margin-top: 2px;
   margin-right: 4px;
   margin-right: var(--size-4);
-  padding-top: 2px;
-}
-
-.np-theme-personal .has-warning .alert-warning .tw-icon {
-  color: var(--color-sentiment-warning);
-  position: relative;
-  z-index: 1;
-}
-
-.np-theme-personal .has-warning .alert-warning .tw-icon::before {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 5px;
-  left: 4px;
-  height: 10px;
-  width: 50%;
-  background-color: var(--color-dark);
-  border-radius: 50%;
-  z-index: -1;
 }
 
 .np-theme-personal .has-error .error-messages,
@@ -11863,11 +11828,6 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   color: var(--color-sentiment-negative);
 }
 
-.np-theme-personal .has-success .alert-positive .tw-icon,
-.np-theme-personal .has-success .alert-success .tw-icon {
-  color: var(--color-sentiment-positive);
-}
-
 .has-required::after {
   content: "\00a0*";
   color: #cf2929;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-e477c03",
+  "version": "0.0.0-experimental-7709e0e",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/addons/_spacing-utilities.less

@@ -10,10 +10,6 @@
 .spacing-vertical(4, var(--size-32));
 .spacing-vertical(5, var(--size-40));
 
-.gap-y-xs {
-  row-gap: calc(var(--size-8) / 2);
-}
-
 .gap-y-1 {
   row-gap: var(--size-8);
 }

package/src/less/forms/bootstrap-forms.less

@@ -1159,7 +1159,7 @@ input[type="password"] {
   }
 
   .form-group label {
-    margin-bottom: var(--size-4);
+    margin-bottom: var(--padding-x-small);
   }
 
   .form-group .np-upload-input label {
@@ -1194,39 +1194,10 @@ input[type="password"] {
     background-color: unset;
   }
 
-  .has-success .alert-positive,
-  .has-success .alert-success,
-  .has-warning .alert-warning,
-  .has-error .error-messages,
-  .has-error .alert-detach.alert-danger {
-    display: flex;
-  }
-
-  .has-success .alert-positive .tw-icon,
-  .has-success .alert-success .tw-icon,
-  .has-warning .alert-warning .tw-icon,
-  .has-error .alert-detach.alert-danger .tw-icon {
-    margin-right: var(--size-4);
-    padding-top: 2px; // We should have top space to align the icon with 155% line-height of the text
-  }
-
-  .has-warning .alert-warning .tw-icon {
-    color: var(--color-sentiment-warning);
-    position: relative;
-    z-index: 1;
-
-    // This code and relative position above helps to add appropriate colors to warning icon
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 5px;
-      left: 4px;
-      height: 10px;
-      width: 50%;
-      background-color: var(--color-dark);
-      border-radius: 50%;
-      z-index: -1;
+  .alert-detach {
+    .status-circle {
+      margin-top: 2px;
+      margin-right: var(--size-4);
     }
   }
 
@@ -1234,13 +1205,6 @@ input[type="password"] {
   .has-error .alert-detach.alert-danger {
     color: var(--color-sentiment-negative);
   }
-
-  .has-success .alert-positive,
-  .has-success .alert-success {
-    .tw-icon {
-      color: var(--color-sentiment-positive);
-    }
-  }
 }
 
 .has-required {