@transferwise/components 46.26.2 → 46.28.0

package/src/logo/svg/flag-platform.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="111" height="18" fill="none"><path fill="#163300" d="M4.887 5.92 0 11.525h8.726l.98-2.642H5.969L8.252 6.29l.008-.068-1.486-2.508h6.683L8.276 17.7h3.546L18.079.84H1.916l2.97 5.08ZM22.001 17.72V.792h6.15c1.341 0 2.454.24 3.334.719.882.48 1.541 1.134 1.979 1.963.438.83.657 1.762.657 2.798s-.22 1.976-.662 2.806c-.44.829-1.104 1.485-1.988 1.967-.885.482-1.995.723-3.331.723h-4.23V9.603h3.994c.848 0 1.536-.144 2.064-.434.528-.29.914-.684 1.162-1.186.248-.501.37-1.07.37-1.71 0-.639-.122-1.206-.37-1.702-.248-.497-.636-.885-1.166-1.165-.531-.282-1.228-.422-2.093-.422h-3.268v14.735H22h.001ZM38.823.793v16.926h-2.518V.793h2.518ZM45.712 18c-.82 0-1.561-.15-2.224-.45a3.665 3.665 0 0 1-1.572-1.31c-.385-.573-.576-1.275-.576-2.107 0-.717.14-1.307.42-1.768.281-.462.661-.83 1.138-1.1a6.036 6.036 0 0 1 1.6-.612c.59-.139 1.19-.243 1.802-.314.775-.088 1.404-.16 1.887-.218.482-.058.834-.153 1.052-.286.22-.132.33-.347.33-.644v-.058c0-.72-.208-1.28-.62-1.678-.412-.396-1.025-.595-1.84-.595-.813 0-1.514.183-2 .55-.486.366-.822.772-1.007 1.218L41.736 8.1c.28-.772.692-1.395 1.234-1.873a5.034 5.034 0 0 1 1.874-1.041 7.562 7.562 0 0 1 2.232-.327c.516 0 1.065.06 1.647.178a4.949 4.949 0 0 1 1.634.65c.509.313.925.76 1.25 1.342.325.58.49 1.334.49 2.26v8.43h-2.46v-1.736h-.101c-.163.32-.408.634-.733.942-.326.309-.744.565-1.255.77-.512.204-1.123.305-1.836.305Zm.547-1.984c.696 0 1.294-.135 1.79-.405.497-.27.876-.623 1.138-1.062a2.71 2.71 0 0 0 .392-1.409v-1.637c-.09.089-.262.17-.518.244a7.313 7.313 0 0 1-.871.19c-.327.054-.644.1-.952.14l-.774.104c-.489.06-.933.162-1.336.306-.4.144-.722.348-.96.616-.239.267-.358.62-.358 1.062 0 .612.23 1.073.69 1.385.46.31 1.048.466 1.76.466ZM60.833 5.025V7.01h-7.067V5.025h7.067Zm-5.172-3.04h2.518v12.008c0 .48.074.838.22 1.078.145.24.335.403.568.488.233.086.487.128.763.128.201 0 .378-.014.53-.04l.354-.066.455 2.041a4.53 4.53 0 0 1-.624.17c-.27.058-.607.09-1.01.095a4.509 4.509 0 0 1-1.853-.347 3.166 3.166 0 0 1-1.39-1.124c-.355-.506-.531-1.143-.531-1.91V1.985ZM69.507 5.026V7.01h-7.312V5.026h7.312ZM64.2 17.72V3.555c0-.794.177-1.453.531-1.98.354-.525.823-.92 1.406-1.18a4.615 4.615 0 0 1 1.904-.393A6.072 6.072 0 0 1 70.14.34l-.59 2c-.117-.034-.27-.074-.454-.12a2.81 2.81 0 0 0-.674-.07c-.612 0-1.048.148-1.309.445-.26.297-.392.728-.392 1.29V17.72H64.2ZM76.382 17.977c-1.213 0-2.27-.273-3.175-.818-.904-.545-1.606-1.31-2.106-2.289-.5-.981-.75-2.127-.75-3.438 0-1.312.25-2.469.75-3.455.5-.986 1.202-1.753 2.106-2.298.904-.545 1.963-.818 3.175-.818 1.213 0 2.271.273 3.176.818.904.545 1.605 1.312 2.106 2.298.499.986.75 2.138.75 3.455 0 1.316-.251 2.457-.75 3.438-.5.981-1.202 1.744-2.106 2.289-.905.545-1.963.818-3.176.818Zm.008-2.075c.787 0 1.438-.203 1.954-.611.517-.41.9-.95 1.15-1.628.25-.678.374-1.425.374-2.24 0-.815-.124-1.555-.374-2.236-.25-.68-.633-1.227-1.15-1.64-.516-.415-1.167-.62-1.954-.62-.786 0-1.448.206-1.967.62-.519.412-.904.96-1.153 1.64a6.43 6.43 0 0 0-.375 2.236c0 .81.125 1.562.375 2.24.25.677.634 1.22 1.153 1.627.52.408 1.176.613 1.967.613ZM84.434 17.72V5.026h2.434v2.016h.135a3.098 3.098 0 0 1 1.25-1.617 3.618 3.618 0 0 1 2.034-.591 10.677 10.677 0 0 1 1.071.058v2.363c-.1-.027-.28-.059-.538-.095a5.6 5.6 0 0 0-.775-.054c-.595 0-1.124.122-1.588.368-.464.245-.83.583-1.1 1.017-.27.432-.405.924-.405 1.475v7.752h-2.518v.002ZM93.023 17.72V5.025h2.418v2.067h.16c.27-.7.71-1.246 1.322-1.641.612-.394 1.345-.592 2.2-.592.854 0 1.59.198 2.177.596.587.396 1.021.942 1.302 1.637h.135c.309-.678.8-1.22 1.474-1.624.674-.405 1.477-.607 2.409-.607 1.174 0 2.132.361 2.876 1.082.744.722 1.117 1.81 1.117 3.265v8.512h-2.519V9.44c0-.86-.239-1.483-.716-1.869-.477-.386-1.047-.578-1.71-.578-.82 0-1.457.246-1.912.739-.455.492-.683 1.125-.683 1.896v8.092h-2.509V9.283c0-.69-.219-1.243-.657-1.662-.437-.419-1.007-.627-1.71-.627-.477 0-.917.122-1.318.368a2.74 2.74 0 0 0-.969 1.02c-.243.435-.365.94-.365 1.513v7.826h-2.519l-.003-.001Z"/></svg>

package/src/logo/svg/logo-platform-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="172" height="18" fill="none"><path fill="#fff" d="M43.276.841h4.787l-2.409 16.86h-4.787L43.276.84Zm-6.036 0-3.232 9.712L32.598.84H29.25l-4.23 9.684L24.49.84h-4.64l1.616 16.86h3.848l4.758-10.664 1.675 10.664h3.788L41.794.84H37.24Zm40.196 9.8H66.069c.059 2.189 1.396 3.63 3.363 3.63 1.483 0 2.657-.778 3.568-2.261l3.837 1.711c-1.32 2.55-4.098 4.211-7.523 4.211-4.67 0-7.769-3.083-7.769-8.04 0-5.447 3.642-9.31 8.783-9.31 4.524 0 7.373 2.998 7.373 7.667 0 .778-.088 1.555-.265 2.391Zm-4.259-3.228c0-1.96-1.117-3.2-2.908-3.2s-3.378 1.298-3.789 3.2h6.697ZM4.887 5.92 0 11.526h8.726l.98-2.642H5.969l2.284-2.592.008-.069-1.486-2.508h6.683L8.276 17.702h3.546L18.079.842H1.916l2.97 5.08Zm50.96-1.709c1.69 0 3.169.892 4.461 2.42l.679-4.755C59.783 1.077 58.152.58 55.994.58c-4.288 0-6.697 2.464-6.697 5.59 0 2.17 1.234 3.496 3.26 4.353l.97.432c1.806.756 2.291 1.132 2.291 1.931 0 .8-.815 1.355-2.056 1.355-2.048.007-3.708-1.024-4.956-2.782l-.692 4.843c1.422 1.063 3.245 1.628 5.648 1.628 4.076 0 6.58-2.306 6.58-5.505 0-2.176-.984-3.573-3.466-4.669l-1.058-.49c-1.469-.641-1.968-.994-1.968-1.7 0-.763.683-1.354 1.997-1.354ZM83.392 17.72V.792h6.149c1.342 0 2.454.24 3.335.719.882.48 1.541 1.134 1.979 1.963.437.83.656 1.762.656 2.798s-.22 1.976-.662 2.806c-.44.829-1.103 1.485-1.988 1.967-.884.482-1.994.723-3.33.723H85.3V9.603h3.993c.848 0 1.536-.144 2.064-.434.528-.29.915-.684 1.163-1.186.247-.501.37-1.07.37-1.71 0-.639-.123-1.206-.37-1.702-.248-.497-.636-.885-1.167-1.165-.53-.282-1.228-.422-2.092-.422h-3.269v14.735h-2.602ZM100.21.793v16.926h-2.519V.793h2.519ZM107.102 18c-.82 0-1.561-.15-2.224-.45a3.664 3.664 0 0 1-1.571-1.31c-.385-.573-.577-1.275-.577-2.107 0-.717.141-1.307.421-1.768.281-.462.661-.83 1.138-1.1a6.031 6.031 0 0 1 1.6-.612c.589-.139 1.19-.243 1.802-.314.774-.088 1.403-.16 1.887-.218.482-.058.833-.153 1.052-.286.219-.132.329-.347.329-.644v-.058c0-.72-.207-1.28-.619-1.678-.412-.396-1.026-.595-1.84-.595-.813 0-1.514.183-2.001.55-.486.366-.821.772-1.006 1.218l-2.367-.528c.281-.772.692-1.395 1.235-1.873a5.03 5.03 0 0 1 1.874-1.041 7.558 7.558 0 0 1 2.231-.327c.517 0 1.066.06 1.648.178a4.952 4.952 0 0 1 1.634.65c.508.313.925.76 1.25 1.342.325.58.489 1.334.489 2.26v8.43h-2.46v-1.736h-.101c-.162.32-.407.634-.732.942-.327.309-.745.565-1.256.77-.511.204-1.123.305-1.836.305Zm.548-1.984c.696 0 1.293-.135 1.79-.405.497-.27.876-.623 1.138-1.062.26-.438.391-.908.391-1.409v-1.637c-.09.089-.262.17-.517.244a7.34 7.34 0 0 1-.872.19c-.326.054-.643.1-.951.14l-.775.104a6.22 6.22 0 0 0-1.335.306c-.401.144-.722.348-.961.616-.238.267-.357.62-.357 1.062 0 .612.23 1.073.69 1.385.46.31 1.047.466 1.76.466h-.001ZM122.224 5.025V7.01h-7.068V5.025h7.068Zm-5.173-3.04h2.519v12.008c0 .48.073.838.219 1.078a1.1 1.1 0 0 0 .569.488c.233.086.487.128.762.128.202 0 .379-.014.531-.04l.354-.066.455 2.041a4.555 4.555 0 0 1-.624.17c-.27.058-.607.09-1.011.095a4.51 4.51 0 0 1-1.853-.347 3.17 3.17 0 0 1-1.39-1.124c-.354-.506-.531-1.143-.531-1.91V1.985ZM130.897 5.026V7.01h-7.311V5.026h7.311Zm-5.306 12.694V3.555c0-.794.177-1.453.531-1.98.354-.525.823-.92 1.406-1.18a4.614 4.614 0 0 1 1.904-.393 6.067 6.067 0 0 1 2.098.338l-.59 2c-.118-.034-.27-.074-.454-.12a2.818 2.818 0 0 0-.674-.07c-.612 0-1.048.148-1.309.445-.261.297-.392.728-.392 1.29V17.72h-2.52ZM137.773 17.975c-1.214 0-2.271-.273-3.175-.818-.905-.545-1.607-1.31-2.106-2.289-.5-.981-.75-2.127-.75-3.438 0-1.312.25-2.469.75-3.455.499-.986 1.201-1.753 2.106-2.298.904-.545 1.963-.818 3.175-.818 1.212 0 2.271.273 3.175.818.905.545 1.606 1.312 2.106 2.298.5.986.75 2.138.75 3.455 0 1.316-.25 2.457-.75 3.438-.499.981-1.201 1.744-2.106 2.289-.904.545-1.963.818-3.175.818Zm.008-2.074c.786 0 1.437-.204 1.954-.612.516-.41.9-.95 1.149-1.628.25-.678.375-1.425.375-2.24 0-.815-.125-1.555-.375-2.236-.25-.68-.633-1.227-1.149-1.64-.517-.415-1.168-.62-1.954-.62s-1.448.206-1.967.62c-.519.412-.904.96-1.153 1.64a6.414 6.414 0 0 0-.375 2.236c0 .81.124 1.562.375 2.24.25.677.634 1.22 1.153 1.628.519.407 1.175.612 1.967.612ZM145.82 17.72V5.026h2.435v2.016h.135a3.1 3.1 0 0 1 1.25-1.617 3.62 3.62 0 0 1 2.034-.591 10.671 10.671 0 0 1 1.071.058v2.363a5.174 5.174 0 0 0-.539-.095 5.594 5.594 0 0 0-.774-.054c-.595 0-1.125.122-1.589.368a2.83 2.83 0 0 0-1.099 1.017c-.27.432-.405.924-.405 1.475v7.752h-2.519v.002ZM154.41 17.72V5.025h2.418v2.067h.16c.27-.7.71-1.246 1.322-1.641.612-.394 1.345-.592 2.199-.592.855 0 1.591.198 2.178.596a3.5 3.5 0 0 1 1.301 1.637h.135c.31-.678.801-1.22 1.475-1.624.673-.405 1.477-.607 2.408-.607 1.175 0 2.132.361 2.877 1.082.744.722 1.116 1.81 1.116 3.265v8.512h-2.518V9.44c0-.86-.239-1.483-.716-1.869-.477-.386-1.047-.578-1.71-.578-.82 0-1.457.246-1.912.739-.455.492-.683 1.125-.683 1.896v8.092h-2.509V9.283c0-.69-.219-1.243-.657-1.662-.438-.419-1.008-.627-1.71-.627-.477 0-.917.122-1.318.368a2.742 2.742 0 0 0-.969 1.02c-.244.435-.365.94-.365 1.513v7.826h-2.519l-.003-.001Z"/></svg>

package/src/logo/svg/logo-platform.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="172" height="18" fill="none"><path fill="#163300" d="M43.276.841h4.787l-2.409 16.86h-4.787L43.276.84Zm-6.036 0-3.232 9.712L32.598.84H29.25l-4.23 9.684L24.49.84h-4.64l1.616 16.86h3.848l4.758-10.664 1.675 10.664h3.788L41.794.84H37.24Zm40.196 9.8H66.069c.059 2.189 1.396 3.63 3.363 3.63 1.483 0 2.657-.778 3.568-2.261l3.837 1.711c-1.32 2.55-4.098 4.211-7.523 4.211-4.67 0-7.769-3.083-7.769-8.04 0-5.447 3.642-9.31 8.783-9.31 4.524 0 7.373 2.998 7.373 7.667 0 .778-.088 1.555-.265 2.391Zm-4.259-3.228c0-1.96-1.117-3.2-2.908-3.2s-3.378 1.298-3.789 3.2h6.697ZM4.887 5.92 0 11.526h8.726l.98-2.642H5.969l2.284-2.592.008-.069-1.486-2.508h6.683L8.276 17.702h3.546L18.079.842H1.916l2.97 5.08Zm50.96-1.709c1.69 0 3.169.892 4.461 2.42l.679-4.755C59.783 1.077 58.152.58 55.994.58c-4.288 0-6.697 2.464-6.697 5.59 0 2.17 1.234 3.496 3.26 4.353l.97.432c1.806.756 2.291 1.132 2.291 1.931 0 .8-.815 1.355-2.056 1.355-2.048.007-3.708-1.024-4.956-2.782l-.692 4.843c1.422 1.063 3.245 1.628 5.648 1.628 4.076 0 6.58-2.306 6.58-5.505 0-2.176-.984-3.573-3.466-4.669l-1.058-.49c-1.469-.641-1.968-.994-1.968-1.7 0-.763.683-1.354 1.997-1.354ZM83.392 17.72V.792h6.149c1.342 0 2.454.24 3.335.719.882.48 1.541 1.134 1.979 1.963.437.83.656 1.762.656 2.798s-.22 1.976-.662 2.806c-.44.829-1.103 1.485-1.988 1.967-.884.482-1.994.723-3.33.723H85.3V9.603h3.993c.848 0 1.536-.144 2.064-.434.528-.29.915-.684 1.163-1.186.247-.501.37-1.07.37-1.71 0-.639-.123-1.206-.37-1.702-.248-.497-.636-.885-1.167-1.165-.53-.282-1.228-.422-2.092-.422h-3.269v14.735h-2.602ZM100.21.793v16.926h-2.519V.793h2.519ZM107.102 18c-.82 0-1.561-.15-2.224-.45a3.664 3.664 0 0 1-1.571-1.31c-.385-.573-.577-1.275-.577-2.107 0-.717.141-1.307.421-1.768.281-.462.661-.83 1.138-1.1a6.031 6.031 0 0 1 1.6-.612c.589-.139 1.19-.243 1.802-.314.774-.088 1.403-.16 1.887-.218.482-.058.833-.153 1.052-.286.219-.132.329-.347.329-.644v-.058c0-.72-.207-1.28-.619-1.678-.412-.396-1.026-.595-1.84-.595-.813 0-1.514.183-2.001.55-.486.366-.821.772-1.006 1.218l-2.367-.528c.281-.772.692-1.395 1.235-1.873a5.03 5.03 0 0 1 1.874-1.041 7.558 7.558 0 0 1 2.231-.327c.517 0 1.066.06 1.648.178a4.952 4.952 0 0 1 1.634.65c.508.313.925.76 1.25 1.342.325.58.489 1.334.489 2.26v8.43h-2.46v-1.736h-.101c-.162.32-.407.634-.732.942-.327.309-.745.565-1.256.77-.511.204-1.123.305-1.836.305Zm.548-1.984c.696 0 1.293-.135 1.79-.405.497-.27.876-.623 1.138-1.062.26-.438.391-.908.391-1.409v-1.637c-.09.089-.262.17-.517.244a7.34 7.34 0 0 1-.872.19c-.326.054-.643.1-.951.14l-.775.104a6.22 6.22 0 0 0-1.335.306c-.401.144-.722.348-.961.616-.238.267-.357.62-.357 1.062 0 .612.23 1.073.69 1.385.46.31 1.047.466 1.76.466h-.001ZM122.224 5.025V7.01h-7.068V5.025h7.068Zm-5.173-3.04h2.519v12.008c0 .48.073.838.219 1.078a1.1 1.1 0 0 0 .569.488c.233.086.487.128.762.128.202 0 .379-.014.531-.04l.354-.066.455 2.041a4.555 4.555 0 0 1-.624.17c-.27.058-.607.09-1.011.095a4.51 4.51 0 0 1-1.853-.347 3.17 3.17 0 0 1-1.39-1.124c-.354-.506-.531-1.143-.531-1.91V1.985ZM130.897 5.026V7.01h-7.311V5.026h7.311Zm-5.306 12.694V3.555c0-.794.177-1.453.531-1.98.354-.525.823-.92 1.406-1.18a4.614 4.614 0 0 1 1.904-.393 6.067 6.067 0 0 1 2.098.338l-.59 2c-.118-.034-.27-.074-.454-.12a2.818 2.818 0 0 0-.674-.07c-.612 0-1.048.148-1.309.445-.261.297-.392.728-.392 1.29V17.72h-2.52ZM137.773 17.975c-1.214 0-2.271-.273-3.175-.818-.905-.545-1.607-1.31-2.106-2.289-.5-.981-.75-2.127-.75-3.438 0-1.312.25-2.469.75-3.455.499-.986 1.201-1.753 2.106-2.298.904-.545 1.963-.818 3.175-.818 1.212 0 2.271.273 3.175.818.905.545 1.606 1.312 2.106 2.298.5.986.75 2.138.75 3.455 0 1.316-.25 2.457-.75 3.438-.499.981-1.201 1.744-2.106 2.289-.904.545-1.963.818-3.175.818Zm.008-2.074c.786 0 1.437-.204 1.954-.612.516-.41.9-.95 1.149-1.628.25-.678.375-1.425.375-2.24 0-.815-.125-1.555-.375-2.236-.25-.68-.633-1.227-1.149-1.64-.517-.415-1.168-.62-1.954-.62s-1.448.206-1.967.62c-.519.412-.904.96-1.153 1.64a6.414 6.414 0 0 0-.375 2.236c0 .81.124 1.562.375 2.24.25.677.634 1.22 1.153 1.628.519.407 1.175.612 1.967.612ZM145.82 17.72V5.026h2.435v2.016h.135a3.1 3.1 0 0 1 1.25-1.617 3.62 3.62 0 0 1 2.034-.591 10.671 10.671 0 0 1 1.071.058v2.363a5.174 5.174 0 0 0-.539-.095 5.594 5.594 0 0 0-.774-.054c-.595 0-1.125.122-1.589.368a2.83 2.83 0 0 0-1.099 1.017c-.27.432-.405.924-.405 1.475v7.752h-2.519v.002ZM154.41 17.72V5.025h2.418v2.067h.16c.27-.7.71-1.246 1.322-1.641.612-.394 1.345-.592 2.199-.592.855 0 1.591.198 2.178.596a3.5 3.5 0 0 1 1.301 1.637h.135c.31-.678.801-1.22 1.475-1.624.673-.405 1.477-.607 2.408-.607 1.175 0 2.132.361 2.877 1.082.744.722 1.116 1.81 1.116 3.265v8.512h-2.518V9.44c0-.86-.239-1.483-.716-1.869-.477-.386-1.047-.578-1.71-.578-.82 0-1.457.246-1.912.739-.455.492-.683 1.125-.683 1.896v8.092h-2.509V9.283c0-.69-.219-1.243-.657-1.662-.438-.419-1.008-.627-1.71-.627-.477 0-.917.122-1.318.368a2.742 2.742 0 0 0-.969 1.02c-.244.435-.365.94-.365 1.513v7.826h-2.519l-.003-.001Z"/></svg>

package/src/main.css

@@ -3028,22 +3028,6 @@ a {
 .np-theme-personal--dark .np-logo-svg path {
   fill: var(--color-white);
 }
-.np-logo-svg--size-sm {
-  display: block;
-}
-@media (min-width: 576px) {
-  .np-logo-svg--size-sm {
-    display: none;
-  }
-}
-.np-logo-svg--size-md {
-  display: none;
-}
-@media (min-width: 576px) {
-  .np-logo-svg--size-md {
-    display: block;
-  }
-}
 .tw-modal--scrollable {
   max-height: 100%;
   /* mobile viewport bug fix */

package/src/markdown/Markdown.spec.tsx

@@ -126,6 +126,22 @@ describe('Markdown', () => {
     });
   });
 
+  describe('config.paragraph.className', () => {
+    it('adds a custom class when specified', () => {
+      render(
+        <Markdown config={{ paragraph: { className: 'm-b-0' } }}>{`# Heading
+
+This is a paragraph
+      `}</Markdown>,
+      );
+
+      expect(screen.getByText('This is a paragraph').closest('p')).toHaveAttribute(
+        'class',
+        'm-b-0',
+      );
+    });
+  });
+
   it('adds a target=_self attribute when nothing specified', () => {
     render(
       <Markdown>{`# Heading

package/src/markdown/Markdown.tsx

@@ -12,6 +12,7 @@ export type MarkdownProps = {
   as?: React.ElementType;
   config?: {
     link?: Pick<React.ComponentPropsWithoutRef<'a'>, 'target'>;
+    paragraph?: Pick<React.ComponentPropsWithoutRef<'p'>, 'className'>;
   };
   className?: string;
   children?: string;
@@ -39,6 +40,7 @@ export default function Markdown({
   }
 
   const linkTarget = config?.link?.target ?? '_self';
+  const paragraphClass = config?.paragraph?.className ?? '';
 
   if (allowList != null && blockList != null) {
     logActionRequired(
@@ -55,7 +57,10 @@ export default function Markdown({
 
   const createMarkup = () => {
     const parsed = parser(children);
-    return writer.render(parsed).replace(/<a href="/g, `<a target="${linkTarget}" href="`);
+    return writer
+      .render(parsed)
+      .replace(/<a href="/g, `<a target="${linkTarget}" href="`)
+      .replace(/<p>/g, `<p class="${paragraphClass}">`);
   };
 
   return <Element className={className} dangerouslySetInnerHTML={{ __html: createMarkup() }} />;

package/src/statusIcon/StatusIcon.tsx

@@ -1,27 +1,27 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
 import classNames from 'classnames';
 
-import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
 
 export type StatusIconProps = {
-  sentiment: Sentiment;
+  sentiment: `${Sentiment}`;
   size: SizeSmall | SizeMedium | SizeLarge;
 };
 
-const StatusIcon = ({ sentiment = Sentiment.NEUTRAL, size = Size.MEDIUM }: StatusIconProps) => {
-  const iconTypeMap = {
-    [Sentiment.POSITIVE]: Check,
-    [Sentiment.NEUTRAL]: Info,
-    [Sentiment.WARNING]: Alert,
-    [Sentiment.NEGATIVE]: Cross,
-    [Sentiment.PENDING]: ClockBorderless,
-    [Sentiment.INFO]: Info,
-    [Sentiment.ERROR]: Cross,
-    [Sentiment.SUCCESS]: Check,
-  };
+const iconTypeMap = {
+  positive: Check,
+  neutral: Info,
+  warning: Alert,
+  negative: Cross,
+  pending: ClockBorderless,
+  info: Info,
+  error: Cross,
+  success: Check,
+} satisfies Record<`${Sentiment}`, React.ElementType>;
 
-  const iconColor = [Sentiment.WARNING, Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
+const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {
   const Icon = iconTypeMap[sentiment];
+  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
 
   return (
     <span

package/build/types/alert/withArrow/alertArrowPositions.d.ts

@@ -1,9 +0,0 @@
-export declare enum ArrowPosition {
-    TOP_LEFT = "up-left",
-    TOP = "up-center",
-    TOP_RIGHT = "up-right",
-    BOTTOM_LEFT = "down-left",
-    BOTTOM = "down-center",
-    BOTTOM_RIGHT = "down-right"
-}
-//# sourceMappingURL=alertArrowPositions.d.ts.map

package/build/types/alert/withArrow/alertArrowPositions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"alertArrowPositions.d.ts","sourceRoot":"","sources":["../../../../src/alert/withArrow/alertArrowPositions.ts"],"names":[],"mappings":"AACA,oBAAY,aAAa;IACvB,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B"}

package/build/types/alert/withArrow/index.d.ts

@@ -1,3 +0,0 @@
-export { ArrowPosition as AlertArrowPosition } from "./alertArrowPositions";
-export { default } from "./withArrow";
-//# sourceMappingURL=index.d.ts.map

package/build/types/alert/withArrow/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/alert/withArrow/index.js"],"names":[],"mappings":""}

package/build/types/alert/withArrow/withArrow.d.ts

@@ -1,11 +0,0 @@
-export default withArrow;
-declare function withArrow(Alert: any, arrow: any): {
-    (props: any): import("react").JSX.Element;
-    propTypes: {
-        className: any;
-    };
-    defaultProps: {
-        className: undefined;
-    };
-};
-//# sourceMappingURL=withArrow.d.ts.map

package/build/types/alert/withArrow/withArrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"withArrow.d.ts","sourceRoot":"","sources":["../../../../src/alert/withArrow/withArrow.js"],"names":[],"mappings":";AAKA;;;;;;;;EAkBC"}

package/src/alert/Alert.js

@@ -1,196 +0,0 @@
-import {
-  InfoCircle,
-  Warning as AlertTriangle,
-  CrossCircle,
-  CheckCircle,
-  Clock,
-} from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { useState, useRef } from 'react';
-import requiredIf from 'react-required-if';
-
-import Body from '../body/Body';
-import { Sentiment, Size, Typography, Variant } from '../common';
-import { CloseButton } from '../common/closeButton';
-import Link from '../link';
-import StatusIcon from '../statusIcon';
-import Title from '../title/Title';
-import { logActionRequiredIf, deprecated } from '../utilities';
-
-import InlineMarkdown from './inlineMarkdown';
-import withArrow from './withArrow';
-
-const deprecatedTypeMap = {
-  [Sentiment.SUCCESS]: Sentiment.POSITIVE,
-  [Sentiment.INFO]: Sentiment.NEUTRAL,
-  [Sentiment.ERROR]: Sentiment.NEGATIVE,
-};
-
-const Alert = (props) => {
-  const { isModern } = useTheme();
-
-  const iconTypeMap = {
-    [Sentiment.POSITIVE]: CheckCircle,
-    [Sentiment.NEUTRAL]: InfoCircle,
-    [Sentiment.WARNING]: AlertTriangle,
-    [Sentiment.NEGATIVE]: CrossCircle,
-    [Sentiment.PENDING]: Clock,
-  };
-
-  const [shouldFire, setShouldFire] = useState(false);
-  const { arrow, action, children, className, icon, onDismiss, message, title, type, variant } =
-    props;
-  const closeButtonReference = useRef(null);
-  if (arrow) {
-    const AlertWithArrow = withArrow(Alert, arrow);
-    return <AlertWithArrow {...props} />;
-  }
-  logActionRequired(props);
-  const mappedType = deprecatedTypeMap[type] || type;
-  const Icon = iconTypeMap[mappedType];
-
-  function generateIcon() {
-    if (icon) {
-      return <div className="alert__icon">{icon}</div>;
-    }
-    if (isModern) {
-      return <StatusIcon size={Size.LARGE} sentiment={mappedType} />;
-    } else {
-      return <Icon size={24} />;
-    }
-  }
-
-  const handleTouchStart = () => setShouldFire(true);
-  const handleTouchMove = () => setShouldFire(false);
-  const handleTouchEnd = (event) => {
-    if (shouldFire && action) {
-      // Check if current event is triggered from closeButton
-      if (closeButtonReference?.current && !closeButtonReference.current.contains(event.target)) {
-        if (action?.target === '_blank') {
-          window.top.open(action.href);
-        } else {
-          window.top.location.assign(action.href);
-        }
-      }
-    }
-    setShouldFire(false);
-  };
-  return (
-    <div
-      className={classNames('alert d-flex', `alert-${mappedType}`, className)}
-      data-testid="alert"
-      onTouchStart={handleTouchStart}
-      onTouchEnd={handleTouchEnd}
-      onTouchMove={handleTouchMove}
-    >
-      <div
-        className={classNames('alert__content', 'd-flex', 'flex-grow-1', variant)}
-        data-testid={variant}
-      >
-        {generateIcon()}
-        <div className="alert__message">
-          <div role={Sentiment.NEGATIVE === mappedType ? 'alert' : 'status'}>
-            {title && (
-              <Title className="m-b-1" type={Typography.TITLE_BODY}>
-                {title}
-              </Title>
-            )}
-            <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
-              {children || <InlineMarkdown>{message}</InlineMarkdown>}
-            </Body>
-          </div>
-          {action && (
-            <Link
-              href={action.href}
-              className="m-t-1"
-              aria-label={action['aria-label']}
-              target={action.target}
-              type={Typography.LINK_LARGE}
-            >
-              {action.text}
-            </Link>
-          )}
-        </div>
-      </div>
-      {onDismiss && (
-        <CloseButton ref={closeButtonReference} className="m-l-2" onClick={onDismiss} />
-      )}
-    </div>
-  );
-};
-
-const deprecatedTypeMapMessage = {
-  [Sentiment.SUCCESS]: 'Sentiment.POSITIVE',
-  [Sentiment.INFO]: 'Sentiment.NEUTRAL',
-  [Sentiment.ERROR]: 'Sentiment.NEGATIVE',
-};
-
-const deprecatedTypes = Object.keys(deprecatedTypeMap);
-
-function logActionRequired({ size, type }) {
-  logActionRequiredIf(
-    'Alert no longer supports any possible variations in size. Please remove the `size` prop.',
-    !!size,
-  );
-  logActionRequiredIf(
-    `Alert has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage[type]}.`,
-    deprecatedTypes.includes(type),
-  );
-}
-
-Alert.propTypes = {
-  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */
-  action: PropTypes.shape({
-    'aria-label': PropTypes.string,
-    href: PropTypes.string.isRequired,
-    target: PropTypes.string,
-    text: PropTypes.node.isRequired,
-  }),
-  className: PropTypes.string,
-  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */
-  icon: PropTypes.element,
-  /** Title for the alert component */
-  title: PropTypes.string,
-  /** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
-  message: requiredIf(PropTypes.node, ({ children }) => !children),
-  /** The presence of the onDismiss handler will trigger the visibility of the close button */
-  onDismiss: PropTypes.func,
-  /** The type dictates which icon and colour will be used */
-  type: PropTypes.oneOf(['negative', 'neutral', 'positive', 'warning', 'info', 'error', 'success']),
-  variant: PropTypes.oneOf(['desktop', 'mobile']),
-  /** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */
-  arrow: deprecated(
-    PropTypes.oneOf(['up-left', 'up-center', 'up-right', 'down-left', 'down-center', 'down-right']),
-    { component: 'Alert', expiryDate: new Date('03-01-2021') },
-  ),
-  /** @deprecated use `message` property instead */
-  children: deprecated(
-    requiredIf(PropTypes.node, ({ message }) => !message),
-    {
-      component: 'Alert',
-      message:
-        'You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.',
-      expiryDate: new Date('03-01-2021'),
-    },
-  ),
-  /** @deprecated use `onDismiss` instead */
-  dismissible: deprecated(PropTypes.bool, {
-    component: 'Alert',
-    message: 'The Alert will now be considered dismissible if an `onDismiss` hander is present.',
-    expiryDate: new Date('03-01-2021'),
-  }),
-};
-
-Alert.defaultProps = {
-  action: undefined,
-  arrow: undefined,
-  className: undefined,
-  dismissible: undefined,
-  icon: undefined,
-  type: Sentiment.NEUTRAL,
-  variant: Variant.DESKTOP,
-};
-
-export default Alert;

package/src/alert/index.js

@@ -1 +0,0 @@
-export { default } from './Alert';

package/src/alert/withArrow/alertArrowPositions.ts

@@ -1,9 +0,0 @@
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-export enum ArrowPosition {
-  TOP_LEFT = 'up-left',
-  TOP = 'up-center',
-  TOP_RIGHT = 'up-right',
-  BOTTOM_LEFT = 'down-left',
-  BOTTOM = 'down-center',
-  BOTTOM_RIGHT = 'down-right',
-}

package/src/alert/withArrow/index.js

@@ -1,2 +0,0 @@
-export { ArrowPosition as AlertArrowPosition } from './alertArrowPositions';
-export { default } from './withArrow';

package/src/alert/withArrow/withArrow.js

@@ -1,50 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { ArrowPosition } from './alertArrowPositions';
-
-function withArrow(Alert, arrow) {
-  const AlertWithArrow = (props) => (
-    <Alert
-      {...props}
-      className={classNames(props.className, arrowClasses(arrow))}
-      arrow={undefined}
-    />
-  );
-
-  AlertWithArrow.propTypes = {
-    className: PropTypes.string,
-  };
-
-  AlertWithArrow.defaultProps = {
-    className: undefined,
-  };
-
-  return AlertWithArrow;
-}
-
-function arrowClasses(arrow) {
-  if (arrow) {
-    const classes = ['arrow'];
-    const { BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, TOP, TOP_RIGHT, TOP_LEFT } = ArrowPosition;
-
-    switch (arrow) {
-      case BOTTOM:
-        return classes.concat('arrow-bottom', 'arrow-center');
-      case BOTTOM_LEFT:
-        return classes.concat('arrow-bottom', 'arrow-left');
-      case BOTTOM_RIGHT:
-        return classes.concat('arrow-bottom', 'arrow-right');
-      case TOP:
-        return classes.concat('arrow-center');
-      case TOP_RIGHT:
-        return classes.concat('arrow-right');
-      case TOP_LEFT:
-      default:
-        return classes;
-    }
-  }
-  return '';
-}
-
-export default withArrow;

package/src/alert/withArrow/withArrow.spec.js

@@ -1,51 +0,0 @@
-import { render, screen } from '../../test-utils';
-import Alert from '../Alert';
-
-import { ArrowPosition } from './alertArrowPositions';
-import withArrow from './withArrow';
-
-describe('withArrow', () => {
-  const message = 'I hope you have a nice day today';
-
-  describe('default props', () => {
-    it(`returns an arrowless alert if you don't pass an arrow`, () => {
-      const ArrowLessAlert = withArrow(Alert);
-
-      render(<ArrowLessAlert message={message} />);
-      const component = screen.getByTestId('alert');
-
-      expect(component).not.toHaveClass('arrow');
-    });
-
-    it(`ignores the arrow prop passed to the new alert`, () => {
-      const AlertTopArrow = withArrow(Alert, ArrowPosition.TOP_LEFT);
-
-      render(<AlertTopArrow message={message} arrow={ArrowPosition.BOTTOM_LEFT} />);
-      const component = screen.getByTestId('alert');
-      expect(component).toHaveClass('arrow');
-      expect(component).not.toHaveClass('arrow-bottom');
-    });
-  });
-
-  describe('renders arrows', () => {
-    const getPointyAlert = (arrow) => withArrow(Alert, arrow);
-
-    it(`returns an bottom arrowed alert if you pass a bottom arrow`, () => {
-      const BottomArrowAlert = getPointyAlert(ArrowPosition.BOTTOM);
-      render(<BottomArrowAlert message={message} />);
-      const component = screen.getByTestId('alert');
-
-      expect(component).toHaveClass('arrow');
-      expect(component).toHaveClass('arrow-bottom');
-    });
-
-    it(`returns an top-right arrowed alert if you pass a top right arrow`, () => {
-      const BottomArrowAlert = getPointyAlert(ArrowPosition.TOP_RIGHT);
-      render(<BottomArrowAlert message={message} />);
-      const component = screen.getByTestId('alert');
-
-      expect(component).toHaveClass('arrow');
-      expect(component).toHaveClass('arrow-right');
-    });
-  });
-});

package/src/dateLookup/index.js

@@ -1 +0,0 @@
-export { default } from './DateLookup';