@transferwise/components 0.0.0-experimental-8f9699a → 0.0.0-experimental-dabc13b

package/build/types/dateLookup/DateLookup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.js"],"names":[],"mappings":";AAqBA;IAoBE;;;;;;aAqBC;IApCD,wBAaC;IAjBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;;MAUC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,oBAME;IAEF,kBAME;IAEF,oCA6CE;IAEF,wEAmBE;IAEF,+DAOE;IAEF,gCAIE;IAEF,yBAA+C;IAE/C,2BAAmD;IAEnD,0BAAiD;IAEjD,sDAME;IAEF;;;eAEE;IAEF,+CA8BE;IAEF,wBAGE;IAEF,sCA0BC;CACF"}
+{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.js"],"names":[],"mappings":";AAqBA;IAmBE;;;;;;aAqBC;IAnCD,wBAYC;IAhBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;MASC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,kBAME;IAEF,oCA0CE;IAEF,wEAgBE;IAEF,+DAOE;IAEF,gCAIE;IAEF,yBAA+C;IAE/C,2BAAmD;IAEnD,0BAAiD;IAEjD,sDAME;IAEF;;;eAEE;IAEF,+CA8BE;IAEF,wBAGE;IAEF,sCA0BC;CACF"}

package/build/types/dateLookup/monthCalendar/table/MonthCalendarTable.d.ts

@@ -1,5 +1,5 @@
 export default MonthCalendarTable;
-declare function MonthCalendarTable({ selectedDate, min, max, viewYear, placeholder, onSelect }: {
+declare function MonthCalendarTable({ selectedDate: selected, min, max, viewYear, placeholder, onSelect, }: {
     selectedDate: any;
     min: any;
     max: any;

package/build/types/dateLookup/monthCalendar/table/MonthCalendarTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.js"],"names":[],"mappings":";AAWA;;;;;;;gCA4DC"}
+{"version":3,"file":"MonthCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.js"],"names":[],"mappings":";AAUA;;;;;;;gCAgDC"}

package/build/types/dateLookup/tableLink/TableLink.d.ts

@@ -1,15 +1,5 @@
-/// <reference types="react" />
-interface TableLinkProps {
-    item: number;
-    type: 'day' | 'month' | 'year';
-    title?: string;
-    longTitle?: string;
-    active: boolean;
-    disabled: boolean;
-    today: boolean;
-    autofocus?: boolean;
-    onClick: (item: number) => void;
-}
-declare const TableLink: ({ item, type, title, longTitle, active, disabled, today, autofocus, onClick, }: TableLinkProps) => import("react").JSX.Element;
-export default TableLink;
+declare const _default: import("react").FC<import("react-intl").WithIntlProps<any>> & {
+    WrappedComponent: import("react").ComponentType<any>;
+};
+export default _default;
 //# sourceMappingURL=TableLink.d.ts.map

package/build/types/dateLookup/tableLink/TableLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"names":[],"mappings":";AAMA,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,SAAS,mFAUZ,cAAc,gCAgDhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.js"],"names":[],"mappings":""}

package/build/types/dateLookup/tableLink/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './TableLink';
+export { default } from "./TableLink";
 //# sourceMappingURL=index.d.ts.map

package/build/types/dateLookup/tableLink/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/index.js"],"names":[],"mappings":""}

package/build/types/dateLookup/yearCalendar/table/YearCalendarTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YearCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.js"],"names":[],"mappings":";AAWA;;;;;;;gCAuDC"}
+{"version":3,"file":"YearCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.js"],"names":[],"mappings":";AAUA;;;;;;;gCAkCC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-8f9699a",
+  "version": "0.0.0-experimental-dabc13b",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -53,7 +53,7 @@
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-tokens": "^8.7.0",
+    "@transferwise/neptune-tokens": "^8.8.0",
     "@tsconfig/recommended": "^1.0.2",
     "@types/babel__core": "^7.20.1",
     "@types/jest": "^26.0.20",

package/src/chips/Chip.css

@@ -1 +1 @@
-.np-chip{background-color:transparent;border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:16px;border-radius:var(--size-16);color:#5d7079;color:var(--color-content-secondary);height:32px;height:var(--size-32);margin-right:8px;margin-right:var(--size-8);padding:0 12px;padding:0 var(--size-12);transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out}@media (max-width:320px){.np-chip{height:40px;height:var(--size-40)}}.np-chip:hover{cursor:pointer}.np-chip .np-chip-label{padding-top:2px}.np-chip .np-close-button{color:#5d7079;color:var(--color-content-secondary);opacity:1;pointer-events:auto;transition:opacity .15s ease-in-out}.np-chip .np-close-button:focus,.np-chip .np-close-button:hover{color:#fff;opacity:.85}.np-chip:last-child{margin-right:0}[dir=rtl] .np-chip:last-child{margin-left:0;margin-right:0}.np-chip:active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);border-color:#0081ba;border-color:var(--color-interactive-accent-active);color:#fff}.np-chip--selected{background-color:#00a2dd;background-color:var(--color-interactive-accent);border-color:#00a2dd;border-color:var(--color-interactive-accent);color:#fff;pointer-events:none}.np-chip--selected:active,.np-chip--selected:hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);border-color:#008fc9;border-color:var(--color-interactive-accent-hover);color:#fff}.np-chip--selected .np-close-button{color:#fff}.np-chip.has-error{background:#e74848;background:var(--color-interactive-negative);color:#fff}.np-chip.has-error .np-close-button{color:#fff}.np-theme-personal .np-chip.has-error{background:var(--color-sentiment-negative)}.np-theme-personal .np-chip.has-error,.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):active,.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):hover{color:var(--color-contrast)}.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):hover{background:var(--color-sentiment-negative-hover);border-color:var(--color-sentiment-negative-hover)!important}.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):active{background:var(--color-sentiment-negative-active);border-color:var(--color-sentiment-negative-active)!important}.np-theme-personal .np-chip{border-color:#c9cbce;border-color:var(--color-interactive-secondary);color:var(--color-interactive-primary);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:0 16px;padding:0 var(--size-16)}.np-theme-personal .np-chip:not(.disabled,:disabled):hover{background-color:var(--color-background-screen-hover);border-color:#b5b7ba;border-color:var(--color-interactive-secondary-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-chip:not(.disabled,:disabled):active{background-color:var(--color-background-screen-active);border-color:#a7a9ab;border-color:var(--color-interactive-secondary-active);color:var(--color-interactive-primary-active)}.np-theme-personal .np-chip .np-close-button{border-radius:inherit;margin-right:-8px;margin-right:calc(var(--size-8)*-1)}.np-theme-personal .np-chip .np-close-button,.np-theme-personal .np-chip .np-close-button:hover,.np-theme-personal .np-chip .np-close-button:not(.disabled,:disabled):active,.np-theme-personal .np-chip .np-close-button:not(.disabled,:disabled):hover{background-color:transparent!important;color:inherit!important}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible){outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible .np-close-button,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible) .np-close-button{background:transparent;outline:none}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible .np-close-button:hover,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible) .np-close-button:hover{color:inherit!important}.np-theme-personal .np-chip.np-chip--removable{position:relative}.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold{padding-right:24px;padding-right:var(--size-24)}@media (max-width:320px){.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold{padding-right:48px;padding-right:var(--size-48)}}.np-theme-personal .np-chip.np-chip--removable .np-close-button{height:100%;justify-content:flex-end;left:0;padding-right:8px;padding-right:var(--size-8);position:absolute;top:0;width:100%}.np-theme-personal .np-chip:has(.disabled,:disabled):focus-visible{outline:none}.np-theme-personal .np-chip--selected,.np-theme-personal .np-chip--valid{background-color:#00a2dd;background-color:var(--color-interactive-accent);border-color:#00a2dd;border-color:var(--color-interactive-accent)}.np-theme-personal .np-chip--selected,.np-theme-personal .np-chip--selected:not(.disabled,:disabled):active,.np-theme-personal .np-chip--selected:not(.disabled,:disabled):hover,.np-theme-personal .np-chip--valid,.np-theme-personal .np-chip--valid:not(.disabled,:disabled):active,.np-theme-personal .np-chip--valid:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .np-chip--selected:not(.disabled,:disabled):hover,.np-theme-personal .np-chip--valid:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);border-color:#008fc9;border-color:var(--color-interactive-accent-hover)}.np-theme-personal .np-chip--selected:not(.disabled,:disabled):active,.np-theme-personal .np-chip--valid:not(.disabled,:disabled):active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);border-color:#0081ba;border-color:var(--color-interactive-accent-active)}.np-theme-personal .np-chip--selected .np-close-button,.np-theme-personal .np-chip--valid .np-close-button{color:inherit}.np-theme-personal .np-chip--selected .np-close-button:focus,.np-theme-personal .np-chip--selected .np-close-button:focus-within,.np-theme-personal .np-chip--valid .np-close-button:focus,.np-theme-personal .np-chip--valid .np-close-button:focus-within{outline:none}
+.np-chip{background-color:transparent;border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:16px;border-radius:var(--size-16);color:#5d7079;color:var(--color-content-secondary);height:32px;height:var(--size-32);margin-right:8px;margin-right:var(--size-8);padding:0 12px;padding:0 var(--size-12);transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out}@media (max-width:320px){.np-chip{height:40px;height:var(--size-40)}}.np-chip:hover{cursor:pointer}.np-chip .np-chip-label{padding-top:2px}.np-chip .np-close-button{pointer-events:auto}.np-chip:last-child{margin-right:0}[dir=rtl] .np-chip:last-child{margin-left:0;margin-right:0}.np-chip:active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);border-color:#0081ba;border-color:var(--color-interactive-accent-active);color:#fff}.np-chip--selected{background-color:#00a2dd;background-color:var(--color-interactive-accent);border-color:#00a2dd;border-color:var(--color-interactive-accent);color:#fff;pointer-events:none}.np-chip--selected:active,.np-chip--selected:hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);border-color:#008fc9;border-color:var(--color-interactive-accent-hover);color:#fff}.np-chip--selected .np-close-button{color:#fff}.np-chip.has-error{background:#e74848;background:var(--color-interactive-negative);color:#fff}.np-chip.has-error .np-close-button{color:#fff}.np-theme-personal .np-chip.has-error{background:var(--color-sentiment-negative)}.np-theme-personal .np-chip.has-error,.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):active,.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):hover{color:var(--color-contrast)}.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):hover{background:var(--color-sentiment-negative-hover);border-color:var(--color-sentiment-negative-hover)!important}.np-theme-personal .np-chip.has-error:not(.disabled,:disabled):active{background:var(--color-sentiment-negative-active);border-color:var(--color-sentiment-negative-active)!important}.np-theme-personal .np-chip{border-color:#c9cbce;border-color:var(--color-interactive-secondary);color:var(--color-interactive-primary);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:0 16px;padding:0 var(--size-16)}.np-theme-personal .np-chip:not(.disabled,:disabled):hover{background-color:var(--color-background-screen-hover);border-color:#b5b7ba;border-color:var(--color-interactive-secondary-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-chip:not(.disabled,:disabled):active{background-color:var(--color-background-screen-active);border-color:#a7a9ab;border-color:var(--color-interactive-secondary-active);color:var(--color-interactive-primary-active)}.np-theme-personal .np-chip .np-close-button{border-radius:inherit;margin-right:-8px;margin-right:calc(var(--size-8)*-1)}.np-theme-personal .np-chip .np-close-button,.np-theme-personal .np-chip .np-close-button:hover,.np-theme-personal .np-chip .np-close-button:not(.disabled,:disabled):active,.np-theme-personal .np-chip .np-close-button:not(.disabled,:disabled):hover{background-color:transparent!important;color:inherit!important}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible){outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible .np-close-button,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible) .np-close-button{background:transparent;outline:none}.np-theme-personal .np-chip:not(.disabled,:disabled):focus-visible .np-close-button:hover,.np-theme-personal .np-chip:not(.disabled,:disabled):has(:focus-visible) .np-close-button:hover{color:inherit!important}.np-theme-personal .np-chip.np-chip--removable{position:relative}.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold{padding-right:24px;padding-right:var(--size-24)}@media (max-width:320px){.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold{padding-right:48px;padding-right:var(--size-48)}}.np-theme-personal .np-chip.np-chip--removable .np-close-button{height:100%;justify-content:flex-end;left:0;padding-right:8px;padding-right:var(--size-8);position:absolute;top:0;width:100%}.np-theme-personal .np-chip:has(.disabled,:disabled):focus-visible{outline:none}.np-theme-personal .np-chip--selected,.np-theme-personal .np-chip--valid{background-color:var(--color-interactive-primary);border-color:var(--color-interactive-primary);color:var(--color-interactive-contrast)}.np-theme-personal .np-chip--selected:not(.disabled,:disabled):hover,.np-theme-personal .np-chip--valid:not(.disabled,:disabled):hover{background-color:var(--color-interactive-primary-hover);border-color:var(--color-interactive-primary-hover);color:var(--color-interactive-contrast-hover)}.np-theme-personal .np-chip--selected:not(.disabled,:disabled):active,.np-theme-personal .np-chip--valid:not(.disabled,:disabled):active{background-color:var(--color-interactive-primary-active);border-color:var(--color-interactive-primary-active);color:var(--color-interactive-contrast-active)}.np-theme-personal .np-chip--selected .np-close-button,.np-theme-personal .np-chip--valid .np-close-button{color:inherit}.np-theme-personal .np-chip--selected .np-close-button:focus,.np-theme-personal .np-chip--selected .np-close-button:focus-within,.np-theme-personal .np-chip--valid .np-close-button:focus,.np-theme-personal .np-chip--valid .np-close-button:focus-within{outline:none}

package/src/chips/Chip.less

@@ -25,16 +25,7 @@
   }
 
   .np-close-button {
-    opacity: 1;
-    transition: opacity 0.15s ease-in-out;
     pointer-events: auto;
-    color: var(--color-content-secondary);
-
-    &:hover,
-    &:focus {
-      color: #fff;
-      opacity: 0.85;
-    }
   }
 
   &:last-child {
@@ -169,23 +160,20 @@
 
     &--selected,
     &--valid {
-      background-color: var(--color-interactive-accent);
-      border-color: var(--color-interactive-accent);
-
-      &,
-      &:not(.disabled, :disabled):hover,
-      &:not(.disabled, :disabled):active {
-        color: var(--color-interactive-control);
-      }
+      color: var(--color-interactive-contrast);
+      background-color: var(--color-interactive-primary);
+      border-color: var(--color-interactive-primary);
 
       &:not(.disabled, :disabled):hover {
-        background-color: var(--color-interactive-accent-hover);
-        border-color: var(--color-interactive-accent-hover);
+        color: var(--color-interactive-contrast-hover);
+        background-color: var(--color-interactive-primary-hover);
+        border-color: var(--color-interactive-primary-hover);
       }
 
       &:not(.disabled, :disabled):active {
-        background-color: var(--color-interactive-accent-active);
-        border-color: var(--color-interactive-accent-active);
+        color: var(--color-interactive-contrast-active);
+        background-color: var(--color-interactive-primary-active);
+        border-color: var(--color-interactive-primary-active);
       }
 
       .np-close-button {

package/src/dateLookup/DateLookup.css

@@ -1 +1 @@
-.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{background-color:inherit;min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td.weekend button{color:#5d7079;color:var(--color-content-secondary)}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td{padding:0}}.tw-date-lookup-calendar>tbody>tr>td:has(.tw-date-lookup-day-option){padding:1px}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);color:#37517e;color:var(--color-content-primary);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td button{padding:0}}.tw-date-lookup-calendar>tbody>tr>td button.tw-date-lookup-day-option{align-items:center;border-radius:9999px;border-radius:var(--radius-full);display:inline-flex;height:40px;height:var(--size-40);justify-content:center;line-height:40px;line-height:var(--size-40);padding:0;width:40px;width:var(--size-40)}.tw-date-lookup-calendar>tbody>tr>td button.tw-date-lookup-day-option.today{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.tw-date-lookup-calendar>tbody>tr>td:hover button:not(.disabled,:disabled),.tw-date-lookup-calendar>tbody>tr>td:not(.disabled,:disabled) button.show-focus{background-color:var(--color-background-screen-hover)}.tw-date-lookup-calendar>tbody>tr>td:not(.disabled,:disabled) button.active{background-color:var(--color-interactive-primary);color:var(--color-interactive-contrast)}.tw-date-lookup-calendar abbr{text-decoration:none}.tw-date-lookup-header-current-container{display:inline}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}
+.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td{padding:0}}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}@media (max-width:320px){.tw-date-lookup-calendar>tbody>tr>td button{padding:0}}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tw-date-lookup-calendar abbr{text-decoration:none}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current-container,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current-container{display:inline-block}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current-container .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current-container .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}

package/src/dateLookup/DateLookup.js

@@ -28,7 +28,6 @@ class DateLookup extends PureComponent {
     super(props);
     this.state = {
       selectedDate: getStartOfDay(props.value),
-      originalDate: null,
       min: getStartOfDay(props.min),
       max: getStartOfDay(props.max),
       viewMonth: (props.value || new Date()).getMonth(),
@@ -84,24 +83,16 @@ class DateLookup extends PureComponent {
     }
   };
 
-  discard = () => {
-    const { originalDate } = this.state;
-    if (originalDate !== null) {
-      this.props.onChange(originalDate);
-    }
-    this.close();
-  };
-
   close = () => {
     const { onBlur } = this.props;
-    this.setState({ open: false, originalDate: null });
+    this.setState({ open: false });
     if (onBlur) {
       onBlur();
     }
   };
 
   handleKeyDown = (event) => {
-    const { open, originalDate } = this.state;
+    const { open } = this.state;
     switch (event.keyCode) {
       case KeyCodes.LEFT:
         if (open) {
@@ -136,9 +127,6 @@ class DateLookup extends PureComponent {
         event.preventDefault();
         break;
       case KeyCodes.ESCAPE:
-        if (originalDate !== null) {
-          this.props.onChange(originalDate);
-        }
         this.close();
         event.preventDefault();
         break;
@@ -148,10 +136,7 @@ class DateLookup extends PureComponent {
   };
 
   adjustDate = (daysToAdd, monthsToAdd, yearsToAdd) => {
-    const { selectedDate, min, max, mode, originalDate } = this.state;
-    if (originalDate === null) {
-      this.setState({ originalDate: selectedDate });
-    }
+    const { selectedDate, min, max, mode } = this.state;
     let date;
     if (selectedDate) {
       date = new Date(
@@ -258,7 +243,7 @@ class DateLookup extends PureComponent {
           open={open}
           className="tw-date-lookup-menu"
           position={Position.BOTTOM}
-          onClose={this.discard}
+          onClose={this.close}
         >
           {this.getCalendar()}
         </ResponsivePanel>

package/src/dateLookup/DateLookup.keyboardEvents.spec.js

@@ -80,18 +80,6 @@ describe('DateLookup (keyboard events)', () => {
       pressKey(KEY_CODES.DOWN);
       onChangeCalledWith(new Date(2019, 0, 3));
     });
-
-    it('resets to original date when escape key is pressed', () => {
-      pressKey(KEY_CODES.LEFT);
-      pressKey(KEY_CODES.ESCAPE);
-      onChangeCalledWith(date);
-    });
-
-    it('resets to original date when clicking outside modal', () => {
-      pressKey(KEY_CODES.LEFT);
-      component.find('.dimmer').simulate('click');
-      onChangeCalledWith(date);
-    });
   });
 
   describe('when open and in month mode', () => {

package/src/dateLookup/DateLookup.less

@@ -9,21 +9,12 @@
   text-align: center;
   table-layout: fixed;
 
-  > tbody > tr > td.weekend button {
-    color: var(--color-content-secondary);
-    &:extend(.np-text-body-default);
-  }
-
   > tbody > tr > td {
     padding: var(--size-4);
     @media (--screen-400-zoom) {
       padding: 0;
     }
 
-    &:has(.tw-date-lookup-day-option) {
-      padding: 1px;
-    }
-    
     button {
       width: 100%;
       padding: var(--size-4) 0;
@@ -35,34 +26,37 @@
       border-radius: var(--radius-small);
       background-color: transparent;
       font-weight: var(--font-weight-semi-bold);
-      color: var(--color-content-primary);
 
-      &.tw-date-lookup-day-option {
-        height: var(--size-40);
-        border-radius: var(--radius-full);
-        line-height: var(--size-40);
-        width: var(--size-40);
-        padding: 0;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-  
-        &.today {
-          text-decoration: underline;
-          text-decoration-thickness: 2px;
-          text-underline-offset: 4px;
-        }
+      &:not(.disabled, :disabled).active {
+        color: #fff;
+        background-color: var(--color-interactive-accent-active);
       }
-    }
 
-    &:not(.disabled, :disabled) button.show-focus,
-    &:hover button:not(.disabled, :disabled) {
-      background-color: var(--color-background-screen-hover);
-    }
+      &:not(.disabled, :disabled):hover {
+        color: #fff;
+        background-color: var(--color-interactive-accent-hover);
+      }
+
+      .np-theme-personal & {
+        color: var(--color-content-primary);
+
+        &:not(.disabled, :disabled).active {
+          color: var(--color-interactive-control);
+        }
 
-    &:not(.disabled, :disabled) button.active {
-      background-color: var(--color-interactive-primary);
-      color: var(--color-interactive-contrast);
+        &:not(.disabled, :disabled):hover {
+          color: var(--color-interactive-control);
+        }
+      }
+    }
+  }
+  > thead > tr > th:nth-child(7n+6),
+  > thead > tr > th:nth-child(7n+7),
+  > tbody > tr > td:nth-child(7n+6) button,
+  > tbody > tr > td:nth-child(7n+7) button {
+    .np-theme-personal & {
+      color: var(--color-content-secondary);
+      font-weight: var(--font-weight-regular);
     }
   }
 
@@ -70,11 +64,9 @@
     text-decoration: none;
   }
 
-  background-color: inherit;
-}
-
-.tw-date-lookup-header-current-container {
-  display: inline;
+  .np-theme-personal & {
+    background-color: inherit;
+  }
 }
 
 .np-theme-personal {
@@ -91,9 +83,27 @@
     td {
       border: none;
     }
+    
+    .tw-date-lookup-header-current-container {
+      display: inline-block;
+
+      .tw-date-lookup-header-current {
+        color: var(--color-content-primary);
+      }
+    }
 
-    .tw-date-lookup-header-current {
+    .tw-date-lookup-day-option {
+      height: var(--size-32);
+      line-height: var(--size-32);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       color: var(--color-content-primary);
     }
+
+    .tw-date-lookup-day-option.active {
+      background-color: var(--color-interactive-accent);
+      color: var(--color-interactive-primary);
+    }
   }
 }

package/src/dateLookup/DateLookup.story.js

@@ -13,8 +13,6 @@ export default {
 
 let theFuture = new Date();
 theFuture.setDate(theFuture.getDate() + 10);
-let thePast = new Date();
-thePast.setDate(thePast.getDate() - 10);
 
 export const Basic = () => {
   const [value, setValue] = useState(null);
@@ -24,13 +22,16 @@ export const Basic = () => {
   const placeholder = text('placeholder', 'placeholder');
   const size = select('size', Object.values(Size), Size.MEDIUM);
 
+  const minvalue = date('minvalue', new Date());
+  const maxvalue = date('maxvalue', theFuture);
   const clearable = boolean('clearable', false);
 
   return (
     <DateLookup
       disabled={disabled}
       label={label}
-      min={thePast}
+      max={new Date(maxvalue)}
+      min={new Date(minvalue)}
       monthFormat={monthFormat}
       placeholder={placeholder}
       size={size}
@@ -41,11 +42,9 @@ export const Basic = () => {
   );
 };
 
-Basic.play = async ({ canvasElement }) => {
-  // testing focus state on keyboard nav
+Basic.play = ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  userEvent.tab(canvas.getByRole('button'));
-  userEvent.keyboard('{space}');
+  userEvent.click(canvas.getByRole('button'));
 };
 
 export const Basic400Zoom = storyConfig(
@@ -61,7 +60,7 @@ export const RightAligned = () => {
   const placeholder = text('placeholder', 'placeholder');
   const size = select('size', Object.values(Size), Size.MEDIUM);
 
-  const minvalue = date('minvalue', thePast);
+  const minvalue = date('minvalue', new Date());
   const maxvalue = date('maxvalue', theFuture);
   const clearable = boolean('clearable', false);
 

package/src/dateLookup/dayCalendar/table/DayCalendarTable.js

@@ -4,7 +4,6 @@ import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl';
 
 import { getDayNames, isWithinRange } from '../../../common/dateUtils';
-import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import { getStartOfDay } from '../../getStartOfDay';
 import TableLink from '../../tableLink';
 
@@ -66,21 +65,6 @@ class DayCalendarTable extends PureComponent {
     return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
 
-  isToday = (day) => {
-    const { viewMonth, viewYear } = this.props;
-    return Number(getStartOfDay(new Date())) === Number(new Date(viewYear, viewMonth, day));
-  };
-
-  getAutofocusDay = (weeks) => {
-    const days = weeks.flatMap((week) => week);
-    return getFocusableTime({
-      isActive: this.isActive,
-      isNow: this.isToday,
-      isDisabled: this.isDisabled,
-      timeSpan: days,
-    });
-  };
-
   render() {
     const {
       viewMonth,
@@ -88,20 +72,12 @@ class DayCalendarTable extends PureComponent {
       intl: { locale },
     } = this.props;
     const weeks = this.getTableStructure();
-    let autoFocusDay = this.getAutofocusDay(weeks, viewMonth, viewYear);
     return (
       <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
         <thead>
           <tr>
             {this.days.map((day, index) => (
-              <th
-                key={day}
-                className={
-                  index > 4
-                    ? 'text-xs-center np-text-body-default'
-                    : 'text-xs-center np-text-body-default-bold'
-                }
-              >
+              <th key={day} className="text-xs-center np-text-body-default-bold">
                 <span className="hidden-xs">
                   <abbr title={this.daysLong[index]}>{day.slice(0, 3)}</abbr>
                 </span>
@@ -117,7 +93,7 @@ class DayCalendarTable extends PureComponent {
           {weeks.map((week, weekIndex) => (
             <tr key={weekIndex}>
               {week.map((day, dayIndex) => (
-                <td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>
+                <td key={dayIndex} className={dayIndex > 4 ? 'default' : ''}>
                   {day && (
                     <TableLink
                       item={day}
@@ -127,11 +103,10 @@ class DayCalendarTable extends PureComponent {
                         locale,
                         SHORT_DAY_FORMAT,
                       )}
-                      autofocus={day === autoFocusDay}
                       longTitle={formatDate(new Date(viewYear, viewMonth, day), locale)}
                       active={this.isActive(day)}
                       disabled={this.isDisabled(day)}
-                      today={this.isToday(day)}
+                      today={+getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day)}
                       onClick={this.selectDay}
                     />
                   )}

package/src/dateLookup/dayCalendar/table/DayCalendarTable.spec.js

@@ -117,31 +117,6 @@ describe('DayCalendarTable', () => {
     expect(props.onSelect).toHaveBeenCalledWith(new Date(2018, 11, 1));
   });
 
-  it('sets autofocus to true when 5 is the selected day', () => {
-    component.setProps({ selectedDate: new Date(2018, 11, 5) });
-    expect(getTableLinkAt(4).prop('autofocus')).toBe(true);
-  });
-
-  it('does not set autofocus to true when 5 is the selected day but not the right month', () => {
-    component.setProps({ selectedDate: new Date(2018, 10, 5) });
-    expect(getTableLinkAt(4).prop('autofocus')).toBe(false);
-  });
-
-  it('does not set autofocus to true when 5 is the selected day but not the right year', () => {
-    component.setProps({ selectedDate: new Date(2017, 11, 5) });
-    expect(getTableLinkAt(4).prop('autofocus')).toBe(false);
-  });
-
-  it('sets autofocus to true when selected date is null and current day is visible', () => {
-    const today = new Date();
-    component.setProps({
-      selectedDate: today,
-      viewMonth: today.getMonth(),
-      viewYear: today.getFullYear(),
-    });
-    expect(component.find(TableLink).find({ today: true }).prop('autofocus')).toBe(true);
-  });
-
   const getTableLinkAt = (i) => component.find(TableLink).at(i);
   const getTableDataAt = (i) => component.find('tbody td').at(i);
 });

package/src/dateLookup/monthCalendar/table/MonthCalendarTable.js

@@ -2,40 +2,33 @@ import { formatDate } from '@transferwise/formatting';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import TableLink from '../../tableLink';
 
 const ROWS = 3;
 const COLS = 4;
-const MONTH_ONLY_FORMAT = { month: 'short' };
+const MONTH_ONLY_FORMAY = { month: 'short' };
 
-const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
+const MonthCalendarTable = ({
+  selectedDate: selected,
+  min,
+  max,
+  viewYear,
+  placeholder,
+  onSelect,
+}) => {
   const { locale } = useIntl();
-  const getLink = (month) => {
-    return (
-      <TableLink
-        item={month}
-        type="month"
-        title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}
-        active={isActive(month)}
-        disabled={isDisabled(month)}
-        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}
-        autofocus={autofocusMonth === month}
-        onClick={onSelect}
-      />
-    );
-  };
-
-  const isActive = (month) => {
-    return (
-      selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear()
-    );
-  };
-
-  const isThisMonth = (month) => {
-    return viewYear === new Date().getFullYear() && month === new Date().getMonth();
-  };
 
+  const getLink = (month) => (
+    <TableLink
+      item={month}
+      type="month"
+      title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAY)}
+      active={!!(selected && month === selected.getMonth() && viewYear === selected.getFullYear())}
+      disabled={isDisabled(month)}
+      today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}
+      onClick={onSelect}
+    />
+  );
   const isDisabled = (month) => {
     const date = new Date(viewYear, month);
     return !!(
@@ -43,12 +36,6 @@ const MonthCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onS
       (max && date > new Date(max.getFullYear(), max.getMonth()))
     );
   };
-
-  const autofocusMonth = (() => {
-    const months = [...new Array(ROWS * COLS)].map((_, index) => index);
-    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });
-  })();
-
   return (
     <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
       <thead className="sr-only">

package/src/dateLookup/monthCalendar/table/MonthCalendarTable.spec.js

@@ -82,39 +82,6 @@ describe('MonthCalendarTable', () => {
     expect(component.find('.sr-only').text()).toBe('Enter date..');
   });
 
-  it('sets autofocus to true when June is the selected month', () => {
-    component.setProps({ selectedDate: new Date(2018, 5, 1) });
-    expect(getTableLinkAt(5).prop('autofocus')).toBe(true);
-  });
-
-  it('does not set autofocus to true when June is the selected month but not the right year', () => {
-    component.setProps({ selectedDate: new Date(2017, 5, 1) });
-    expect(getTableLinkAt(5).prop('autofocus')).toBe(false);
-  });
-
-  it('sets autofocus to true when selected date is null and current month is visible', () => {
-    const today = new Date();
-    component.setProps({
-      selectedDate: null,
-      viewYear: today.getFullYear(),
-      viewMonth: today.getMonth(),
-    });
-    expect(getTableLink().find({ today: true }).prop('autofocus')).toBe(true);
-  });
-
-  it('sets autofocus to true on the second month when the first month is disabled', () => {
-    component.setProps({
-      selectedDate: null,
-      viewYear: 2022,
-      min: new Date(2022, 1, 28),
-      viewMonth: 0,
-      isDisabled: (month) => month === 0,
-    });
-
-    expect(getTableLinkAt(0).prop('autofocus')).toBe(false);
-    expect(getTableLinkAt(1).prop('autofocus')).toBe(true);
-  });
-
   const getTableLinkAt = (i) => component.find('[title="MonthName"]').at(i);
   const getTableLink = () => component.find('[title="MonthName"]');
 });