@transferwise/components 0.0.0-experimental-e8160fd → 0.0.0-experimental-0384cde

package/build/styles/neptune-css/less/utilities.css

@@ -0,0 +1,145 @@
+.d-inline-block {
+  display: inline-block;
+}
+.d-inline {
+  display: inline;
+}
+.clearfix::before,
+.clearfix::after {
+  content: " ";
+  display: table;
+}
+.clearfix::after {
+  clear: both;
+}
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.pull-right,
+.pull-xs-right {
+  float: right !important;
+}
+[dir="rtl"] .pull-right,
+[dir="rtl"] .pull-xs-right {
+  float: left !important;
+}
+.pull-left,
+.pull-xs-left {
+  float: left !important;
+}
+[dir="rtl"] .pull-left,
+[dir="rtl"] .pull-xs-left {
+  float: right !important;
+}
+.pull-xs-none {
+  float: none !important;
+}
+@media (min-width: 576px) {
+  .pull-sm-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-sm-left {
+    float: right !important;
+  }
+  .pull-sm-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-sm-right {
+    float: left !important;
+  }
+  .pull-sm-none {
+    float: none !important;
+  }
+}
+@media (min-width: 768px) {
+  .pull-md-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-md-left {
+    float: right !important;
+  }
+  .pull-md-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-md-right {
+    float: left !important;
+  }
+  .pull-md-none {
+    float: none !important;
+  }
+}
+@media (min-width: 992px) {
+  .pull-lg-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-lg-left {
+    float: right !important;
+  }
+  .pull-lg-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-lg-right {
+    float: left !important;
+  }
+  .pull-lg-none {
+    float: none !important;
+  }
+}
+@media (min-width: 1200px) {
+  .pull-xl-left {
+    float: left !important;
+  }
+  [dir="rtl"] .pull-xl-left {
+    float: right !important;
+  }
+  .pull-xl-right {
+    float: right !important;
+  }
+  [dir="rtl"] .pull-xl-right {
+    float: left !important;
+  }
+  .pull-xl-none {
+    float: none !important;
+  }
+}
+.pull-left-single-direction {
+  float: left !important;
+}
+.pull-right-single-direction {
+  float: right !important;
+}
+.hide {
+  display: none !important;
+}
+.show {
+  display: block !important;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+.hidden {
+  display: none !important;
+}
+.affix {
+  position: fixed;
+}
+.rotate90 {
+  transform: rotate(90deg);
+}
+.rotate180 {
+  transform: rotate(180deg);
+}
+.rotate270 {
+  transform: rotate(270deg);
+}
+.rotate-90 {
+  transform: rotate(-90deg);
+}

package/build/styles/neptune-css/less/wells.css

@@ -0,0 +1,74 @@
+.well,
+.well-xs {
+  min-height: 24px;
+  min-height: var(--size-24);
+  margin-bottom: 24px;
+  margin-bottom: var(--size-24);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  border: solid 1px rgba(0,0,0,0.10196);
+  border: solid 1px var(--color-border-neutral);
+  padding: 24px;
+  padding: var(--size-24);
+  box-shadow: none;
+}
+@media only screen and (min-width: 576px) {
+  .well-sm {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .well-md {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .well-lg {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .well-xl {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}

package/build/styles/neptune-css/props/custom-media.css

@@ -0,0 +1,11 @@
+@custom-media --screen-xs (min-width: 480px);
+@custom-media --screen-xs-max (max-width: 575px); /* --screen-sm - 1 */
+@custom-media --screen-sm (min-width: 576px);
+@custom-media --screen-sm-max (max-width: 767px); /* --screen-md - 1 */
+@custom-media --screen-md (min-width: 768px);
+@custom-media --screen-md-max (max-width: 991px); /* --screen-lg - 1 */
+@custom-media --screen-lg (min-width: 992px);
+@custom-media --screen-lg-max (max-width: 1199px); /* --screen-xl - 1 */
+@custom-media --screen-xl (min-width: 1200px);
+
+@custom-media --screen-400-zoom (max-width: 320px); /* ~400% zoom viewport */

package/build/styles/neptune-css/props/legacy-custom-props.css

@@ -0,0 +1,69 @@
+/*
+  DEPRECATED
+  Use neptune-tokens.css instead.
+  If the token you want isn't available there, raise an issue in @transferwise/neptune-tokens.
+*/
+:root {
+  --border-radius: var(--radius-small);
+  --spacer: 8px;
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-56: 56px;
+  --space-64: 64px;
+  --color-text-link-hover: #00a4df;
+  --color-text-link-active: #008ec0;
+  --brand-white: #fff;
+  --link-color: #00b9ff;
+  --brand-pale-blue: #dbf0fd;
+  --brand-navy-minus-20: #253655;
+  --brand-navy-minus-10: #2e4369;
+  --brand-navy: #37517e;
+  --brand-blue-minus-20: #111824;
+  --brand-blue-minus-10: #192439;
+  --brand-blue: #223049;
+  --brand-light-blue-minus-10: #00a4df;
+  --brand-light-blue: #00b9ff;
+  --brand-grey-plus-10: #6f8691;
+  --brand-smoke-minus-10: #a8aaac;
+  --brand-smoke: #d3d5d8;
+  --brand-smoke-plus-10: #e2e6e8;
+  --brand-smoke-plus-20: #f2f5f7;
+  --brand-green-minus-10: #28b862;
+  --brand-green: #2ed06e;
+  --gray-base: #f2f5f7;
+  --gray-darker: #384347;
+  --gray-light: #829ca9;
+  --brand-primary: #37517e;
+  --body-bg: #fff;
+  --text-bold-color: #2e4369;
+  --font-size-xx-large: 2.8rem; /* 42px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-x-large: 1.8666666667rem; /* 28px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-large: 1.4666666667rem; /* 22px */
+  --font-size-medium: 1.2rem; /* 18px */
+  --font-size: 0.9375rem; /* 15px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-small: 0.9333333333rem; /* 14px */
+  --font-size-x-small: 0.8rem; /* 12px */
+  --line-height: 1.6; /* 24/15 */
+}
+
+@media (--screen-md) {
+  :root {
+    --font-size-xx-large: 2.625rem; /* 42px */
+    --font-size-x-large: 1.75rem; /* 28px */
+    --font-size-large: 1.375rem; /* 22px */
+    --font-size-medium: 1.125rem; /* 18px */
+    --font-size: 1rem; /* 16px */
+    --font-size-small: 0.875rem; /* 14px */
+    --font-size-x-small: 0.75rem; /* 12px */
+    --line-height: 1.5; /* 24/16px */
+  }
+}

package/build/styles/neptune-css/props/neptune-tokens.css

@@ -0,0 +1,11 @@
+@import "@transferwise/neptune-tokens/tokens.css";
+
+/* DEPRECATED, use neptune-tokens instead: https://transferwise.github.io/neptune-web/styles/tokens/Colors */
+:root {
+  --color-primary: #37517e;
+  --color-secondary: #5d7079;
+  --color-accent: #00b9ff;
+  --color-positive: #2ed06e;
+  --color-negative: #f53636;
+  --color-warning: #ffa600;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e8160fd",
+  "version": "0.0.0-experimental-0384cde",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,14 +93,12 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@wise/components-theming": "1.6.1",
-    "@transferwise/neptune-css": "14.22.0",
+    "@transferwise/less-config": "3.1.0",
     "@wise/wds-configs": "0.0.0",
-    "@transferwise/less-config": "3.1.0"
+    "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.19.0",
-    "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",
@@ -127,7 +125,8 @@
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.33.3"
+    "virtua": "^0.33.3",
+    "@transferwise/neptune-tokens": "^8.16.0"
   },
   "publishConfig": {
     "access": "public"
@@ -146,6 +145,7 @@
     "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build",
     "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
     "build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",
+    "build:copy-brand-assets": "cpx 'src/neptune-css/img/**' build/neptune-css/img && cpx 'src/neptune-css/fonts/*' build/neptune-css/fonts",
     "docs": "pnpm build",
     "test": "TZ=UTC jest",
     "test:watch": "TZ=UTC jest --watch",

package/src/accordion/Accordion.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/core/_typography.less";
 
 .np-accordion-item {
   display: block;

package/src/actionButton/ActionButton.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 .np-action-btn {
   display: inline-flex;

package/src/avatar/Avatar.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/core/_typography.less";
 
 @avatar-diameter-72: 72px;
 @avatar-diameter-56: 56px;

package/src/badge/Badge.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 @badge-size-sm: 16px;
 @badge-size-lg: 24px;

package/src/button/LegacyButton.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .np-btn {
   position: relative;

package/src/card/Card.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_theming.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/mixins/_theming.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 .np-card {
   overflow: hidden;

package/src/checkboxButton/CheckboxButton.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .np-checkbox-button {
   input[type="checkbox"] {

package/src/chips/Chip.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 .np-chip {
   background-color: transparent;

package/src/common/Option/Option.less

@@ -1,5 +1,5 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "../../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "../../neptune-css/less/ring.less";
 
 .np-option {
   &:has(:focus-visible) {

package/src/common/bottomSheet/BottomSheet.less

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_theming.less";
+@import (reference) "../../neptune-css/less/mixins/_theming.less";
 
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;

package/src/common/closeButton/CloseButton.less

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "../../neptune-css/less/ring.less";
 
 .np-close-button {
   transition: color 0.15s ease-in-out;

package/src/common/panel/Panel.less

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_theming.less";
+@import (reference) "../../neptune-css/less/mixins/_theming.less";
 
 .np-panel {
   &__content {

package/src/dateLookup/DateLookup.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
 
 .tw-date-lookup-menu {
   width: 400px;

package/src/dateLookup/dateTrigger/DateTrigger.less

@@ -1,5 +1,5 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "../../neptune-css/variables/neptune-tokens.less";
+@import (reference) "../../neptune-css/less/mixins/_logical-properties.less";
 
 .np-date-trigger {
   overflow: hidden;

package/src/decision/Decision.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .np-decision {
   .decision {

package/src/definitionList/DefinitionList.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .tw-definition-list {
   &__item dd {

package/src/dimmer/Dimmer.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/zindex.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/variables/zindex.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 // Disables the scroll on the body
 // Note: might not work in some iOS Safari browsers

package/src/drawer/Drawer.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/addons/_spacing-utilities.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .np-drawer {
   display: flex;

package/src/flowNavigation/FlowNavigation.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
+@import (reference) "./../neptune-css/less/addons/_spacing-utilities.less";
 
 .np-flow-navigation {
   width: 100%;

package/src/flowNavigation/animatedLabel/AnimatedLabel.less

@@ -1,5 +1,5 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "../../neptune-css/less/addons/_spacing-utilities.less";
+@import (reference) "../../neptune-css/less/ring.less";
 
 @transition-timing-function: ease-in-out;
 @transition-duration: 0.3s;

package/src/info/Info.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 .np-info {
   height: 16px;

package/src/inputs/SelectInput.less

@@ -1,7 +1,7 @@
 @import "./_BottomSheet.less";
 @import "./_ButtonInput.less";
 @import "./_Popover.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 .np-select-input-content {
   overflow: hidden;

package/src/inputs/_common.less

@@ -1,4 +1,4 @@
-@import (reference) '../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less';
+@import (reference) './../neptune-css/less/core/_typography.less';
 
 .np-form-control {
   --ring-width: 1px;

package/src/link/Link.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 a {
   border-radius: 2px;

package/src/main.less

@@ -1,3 +1,5 @@
+@import "./neptune-css/less/neptune.bundle.less";
+
 @import "./criticalBanner/CriticalCommsBanner.less";
 @import "./accordion/Accordion.less";
 @import "./actionButton/ActionButton.less";

package/src/moneyInput/MoneyInput.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .tw-money-input {
   display: flex;

package/src/navigationOption/NavigationOption.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 .np-navigation-option {
   text-decoration: none;

package/src/navigationOptionsList/NavigationOptionsList.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .np-navigation-options-list {
   list-style-type: none;