@transferwise/neptune-css 0.0.0-experimental-2058986 → 0.0.0-experimental-e1f6a4f

package/dist/css/navbar.css

@@ -890,6 +890,53 @@ html:not([dir="rtl"]) .nav-stacked > li.active > a:focus {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
+.close {
+  float: right;
+  color: #0097c7;
+  color: var(--color-content-accent);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+[dir="rtl"] .close {
+  float: left;
+}
+.np-theme-personal .close {
+  color: var(--color-interactive-primary);
+}
+.close:hover {
+  color: #0084b3;
+  color: var(--color-content-accent-hover);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+.np-theme-personal .close:hover {
+  color: var(--color-interactive-primary-hover);
+}
+.close:focus {
+  outline: none;
+}
+.close:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.close:active {
+  color: #0077a5;
+  color: var(--color-content-accent-active);
+}
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.np-theme-personal button.close:hover {
+  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+  background: initial;
+}
 .navbar {
   position: relative;
   font-size: 0.875rem;
@@ -2256,53 +2303,6 @@ html:not([dir="rtl"]) .nav-stacked > li.active > a:focus {
   }
 }
 /* stylelint-enable */
-.close {
-  float: right;
-  color: #0097c7;
-  color: var(--color-content-accent);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-[dir="rtl"] .close {
-  float: left;
-}
-.np-theme-personal .close {
-  color: var(--color-interactive-primary);
-}
-.close:hover {
-  color: #0084b3;
-  color: var(--color-content-accent-hover);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-}
-.np-theme-personal .close:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.close:focus {
-  outline: none;
-}
-.close:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
-.close:active {
-  color: #0077a5;
-  color: var(--color-content-accent-active);
-}
-button.close {
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-}
-.np-theme-personal button.close:hover {
-  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
-  background: initial;
-}
 @media (min-width: 576px) {
   .form-inline .form-group {
     display: inline-block;

package/dist/css/neptune.css

@@ -22340,14 +22340,14 @@ button.popover-close {
 }
 
 .progress {
-  height: 8px;
-  margin-top: calc((24px - 8px) / 2);
-  margin-top: calc((var(--size-24) - 8px) / 2);
-  margin-bottom: calc((24px - 8px) / 2);
-  margin-bottom: calc((var(--size-24) - 8px) / 2);
-  background-color: #c9cbce;
-  background-color: var(--color-interactive-secondary);
-  border-radius: calc(8px / 2);
+  height: 2px;
+  margin-top: calc((24px - 2px) / 2);
+  margin-top: calc((var(--size-24) - 2px) / 2);
+  margin-bottom: calc((24px - 2px) / 2);
+  margin-bottom: calc((var(--size-24) - 2px) / 2);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border-radius: calc(2px / 2);
 }
 
 .progress-bar {
@@ -22362,12 +22362,6 @@ button.popover-close {
   text-align: right;
   background-color: #0097c7;
   background-color: var(--color-content-accent);
-  border: calc(8px / 2) solid #ffffff;
-  border: calc(8px / 2) solid var(--color-background-screen);
-  box-sizing: content-box;
-  border-radius: 8px;
-  margin-top: calc(-1 * 8px / 2);
-  margin-left: calc(-1 * 8px / 2);
   transition: width 0.6s ease;
 }
 
@@ -22379,6 +22373,37 @@ button.popover-close {
   text-align: left;
 }
 
+.progress-bar::after {
+  content: "";
+  float: right;
+  margin-top: 8px / 2 + 1;
+  margin-right: 8px / 2;
+  width: 8px;
+  height: 8px;
+  background-color: inherit;
+  border-radius: 8px / 2;
+}
+
+[dir="rtl"] .progress-bar::after {
+  float: left;
+}
+
+[dir="rtl"] .progress-bar::after {
+  margin-left: 8px / 2;
+  margin-right: 0;
+  margin-right: initial;
+}
+
+.progress-bar:first-child {
+  border-top-left-radius: 2px / 2;
+  border-bottom-left-radius: 2px / 2;
+}
+
+.progress-bar:last-child {
+  border-top-right-radius: 2px / 2;
+  border-bottom-right-radius: 2px / 2;
+}
+
 .progress-bar-primary {
   background-color: #37517e;
   background-color: var(--color-content-primary);

package/dist/css/progress-bars.css

@@ -1,12 +1,12 @@
 .progress {
-  height: 8px;
-  margin-top: calc((24px - 8px) / 2);
-  margin-top: calc((var(--size-24) - 8px) / 2);
-  margin-bottom: calc((24px - 8px) / 2);
-  margin-bottom: calc((var(--size-24) - 8px) / 2);
-  background-color: #c9cbce;
-  background-color: var(--color-interactive-secondary);
-  border-radius: calc(8px / 2);
+  height: 2px;
+  margin-top: calc((24px - 2px) / 2);
+  margin-top: calc((var(--size-24) - 2px) / 2);
+  margin-bottom: calc((24px - 2px) / 2);
+  margin-bottom: calc((var(--size-24) - 2px) / 2);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border-radius: calc(2px / 2);
 }
 .progress-bar {
   float: left;
@@ -20,12 +20,6 @@
   text-align: right;
   background-color: #0097c7;
   background-color: var(--color-content-accent);
-  border: calc(8px / 2) solid #ffffff;
-  border: calc(8px / 2) solid var(--color-background-screen);
-  box-sizing: content-box;
-  border-radius: 8px;
-  margin-top: calc(-1 * 8px / 2);
-  margin-left: calc(-1 * 8px / 2);
   transition: width 0.6s ease;
 }
 [dir="rtl"] .progress-bar {
@@ -34,6 +28,32 @@
 [dir="rtl"] .progress-bar {
   text-align: left;
 }
+.progress-bar::after {
+  content: "";
+  float: right;
+  margin-top: 8px / 2 + 1;
+  margin-right: 8px / 2;
+  width: 8px;
+  height: 8px;
+  background-color: inherit;
+  border-radius: 8px / 2;
+}
+[dir="rtl"] .progress-bar::after {
+  float: left;
+}
+[dir="rtl"] .progress-bar::after {
+  margin-left: 8px / 2;
+  margin-right: 0;
+  margin-right: initial;
+}
+.progress-bar:first-child {
+  border-top-left-radius: 2px / 2;
+  border-bottom-left-radius: 2px / 2;
+}
+.progress-bar:last-child {
+  border-top-right-radius: 2px / 2;
+  border-bottom-right-radius: 2px / 2;
+}
 .progress-bar-primary {
   background-color: #37517e;
   background-color: var(--color-content-primary);

package/package.json

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