@paypal/checkout-components 5.0.256 → 5.0.258

package/src/ui/buttons/styles/color.js

@@ -1,45 +1,45 @@
 /* @flow */
 
-import { FUNDING } from '@paypal/sdk-constants/src';
+import { FUNDING } from "@paypal/sdk-constants/src";
 
-import { BUTTON_COLOR, CLASS, TEXT_COLOR, ATTRIBUTE } from '../../../constants';
+import { BUTTON_COLOR, CLASS, TEXT_COLOR, ATTRIBUTE } from "../../../constants";
 
 export const buttonColorStyle = `
 
 
-    .${ CLASS.BUTTON }.${ CLASS.TEXT_COLOR }-${ TEXT_COLOR.BLACK } {
+    .${CLASS.BUTTON}.${CLASS.TEXT_COLOR}-${TEXT_COLOR.BLACK} {
         color: #2C2E2F;
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.TEXT_COLOR }-${ TEXT_COLOR.WHITE } {
+    .${CLASS.BUTTON}.${CLASS.TEXT_COLOR}-${TEXT_COLOR.WHITE} {
         color: #fff;
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.TEXT_COLOR }-${ TEXT_COLOR.BLACK } .${ CLASS.SPINNER } {
+    .${CLASS.BUTTON}.${CLASS.TEXT_COLOR}-${TEXT_COLOR.BLACK} .${CLASS.SPINNER} {
         border: 3px solid rgba(100, 100, 100, .2);
         border-top-color: rgba(33, 128, 192, 0.8);
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.TEXT_COLOR }-${ TEXT_COLOR.WHITE } .${ CLASS.SPINNER } {
+    .${CLASS.BUTTON}.${CLASS.TEXT_COLOR}-${TEXT_COLOR.WHITE} .${CLASS.SPINNER} {
         border: 3px solid rgba(200, 200, 200, 0.2);
         border-top-color: rgba(255, 255, 255, .85);
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.GOLD },
-    .${ CLASS.BUTTON_ROW }.${ CLASS.COLOR }-${ BUTTON_COLOR.GOLD } .menu-button {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.GOLD},
+    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.GOLD} .menu-button {
         background: #ffc439;
     }
 
     @media (hover:hover) {
-        .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.GOLD }:hover {
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.GOLD}:hover {
             filter: brightness(0.95);
         }
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.GOLD }:focus {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.GOLD}:focus {
         outline: none;
     }
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.GOLD }:focus::after {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.GOLD}:focus::after {
         content: '';
         position: absolute;
         top: 5px;
@@ -53,158 +53,158 @@ export const buttonColorStyle = `
     }
 
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLUE },
-    .${ CLASS.BUTTON_ROW }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLUE } .menu-button {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLUE},
+    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.BLUE} .menu-button {
         background: #0070ba;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VENMO }].${ CLASS.COLOR }-${ BUTTON_COLOR.BLUE } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.BLUE} {
         background: #008CFF;
     }
 
     /* For APM funding sources, default button color to be defined by payment scheme branding guidelines */
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BLIK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #2C2E2F;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BANCONTACT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: linear-gradient(to right, #1E3764, #005AB9);
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAIDY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: linear-gradient(to right, #FF009C, #A6009C);
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #2C2E2F;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETOBANCARIO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #2C2E2F;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #C8036F;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.GIROPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #003A7D;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.IDEAL }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #2C2E2F;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MERCADOPAGO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #1D2647;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MULTIBANCO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #1866AB;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #1A4B67;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.OXXO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #D8232A;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.P24 }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #D03238;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #393A41;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #003140;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VERKKOPANKKI}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #005596;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #4D4D4D;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAYU }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #002124;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SATISPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: #E62601;
     }
 
     /* APM button hover actions */
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BANCONTACT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BLIK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETOBANCARIO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.GIROPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.IDEAL }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MERCADOPAGO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MULTIBANCO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.OXXO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.P24 }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAYU }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SATISPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAIDY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VERKKOPANKKI}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
         filter: brightness(1.2);
     }
 
     /* APM button on focus actions */
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BLIK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BANCONTACT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETOBANCARIO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.GIROPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.IDEAL }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MERCADOPAGO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MULTIBANCO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.OXXO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.P24 }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAYU }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SATISPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAIDY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VERKKOPANKKI}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus {
         outline: none;
     }
 
     /* APM button after focus actions */
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BLIK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BANCONTACT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETOBANCARIO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.GIROPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.IDEAL }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MERCADOPAGO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MULTIBANCO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.OXXO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.P24 }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAYU }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SATISPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAIDY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VERKKOPANKKI}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after {
         content: '';
         position: absolute;
         top: 5px;
@@ -218,15 +218,15 @@ export const buttonColorStyle = `
     }
 
     @media (hover:hover) {
-        .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLUE }:hover {
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLUE}:hover {
             filter: brightness(0.95);
         }
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLUE }:focus {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLUE}:focus {
         outline: none;
     }
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLUE }:focus::after {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLUE}:focus::after {
         content: '';
         position: absolute;
         top: 5px;
@@ -239,21 +239,21 @@ export const buttonColorStyle = `
         pointer-events: none;
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.SILVER },
-    .${ CLASS.BUTTON_ROW }.${ CLASS.COLOR }-${ BUTTON_COLOR.SILVER } .menu-button {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.SILVER},
+    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.SILVER} .menu-button {
         background: #eee;
     }
 
     @media (hover:hover) {
-        .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.SILVER }:hover {
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.SILVER}:hover {
             filter: brightness(0.95);
         }
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.SILVER }:focus {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.SILVER}:focus {
         outline: none;
     }
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.SILVER }:focus::after {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.SILVER}:focus::after {
         content: '';
         position: absolute;
         top: 5px;
@@ -266,19 +266,19 @@ export const buttonColorStyle = `
         pointer-events: none;
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.DARKBLUE },
-    .${ CLASS.BUTTON_ROW }.${ CLASS.COLOR }-${ BUTTON_COLOR.DARKBLUE } .menu-button {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE},
+    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE} .menu-button {
         background: #003087;
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.DARKBLUE }:hover {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE}:hover {
         filter: brightness(1.2);
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.DARKBLUE }:focus {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE}:focus {
         outline: none;
     }
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.DARKBLUE }:focus::after {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE}:focus::after {
         content: '';
         position: absolute;
         top: 5px;
@@ -293,19 +293,19 @@ export const buttonColorStyle = `
 
 
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLACK },
-    .${ CLASS.BUTTON_ROW }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLACK } .menu-button {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK},
+    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK} .menu-button {
         background: #2C2E2F;
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLACK }:hover {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK}:hover {
         filter: brightness(1.2);
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLACK }:focus {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK}:focus {
         outline: none;
     }
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLACK }:focus::after {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK}:focus::after {
         content: '';
         position: absolute;
         top: 5px;
@@ -318,23 +318,23 @@ export const buttonColorStyle = `
         pointer-events: none;
     }
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.WHITE },
-    .${ CLASS.BUTTON_ROW }.${ CLASS.COLOR }-${ BUTTON_COLOR.WHITE } .menu-button {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE},
+    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE} .menu-button {
         background: #fff;
         border: 1px solid #555;
     }
 
     @media (hover:hover) {
-        .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.WHITE }:hover {
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE}:hover {
             filter: brightness(0.95);
         }
     }
     
 
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.WHITE }:focus {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE}:focus {
         outline: none;
     }
-    .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.WHITE }:focus::after {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE}:focus::after {
         content: '';
         position: absolute;
         top: 5px;
@@ -348,11 +348,11 @@ export const buttonColorStyle = `
     }
 
 
-    .${ CLASS.BUTTON } .${ CLASS.CARD } {
+    .${CLASS.BUTTON} .${CLASS.CARD} {
         position: relative;
     }
 
-    .${ CLASS.BUTTON } .${ CLASS.CARD }::after {
+    .${CLASS.BUTTON} .${CLASS.CARD}::after {
         content: '';
         width: 100%;
         height: 100%;
@@ -361,15 +361,15 @@ export const buttonColorStyle = `
         left: 0;
     }
 
-    .${ CLASS.BUTTON } .${ CLASS.CARD }:hover {
+    .${CLASS.BUTTON} .${CLASS.CARD}:hover {
         filter: brightness(1.2);
     }
 
-    .${ CLASS.BUTTON } .${ CLASS.CARD }:focus {
+    .${CLASS.BUTTON} .${CLASS.CARD}:focus {
         outline: none;
     }
 
-    .${ CLASS.BUTTON } .${ CLASS.CARD }:focus::after {
+    .${CLASS.BUTTON} .${CLASS.CARD}:focus::after {
         box-shadow: 0px 0px 1px 3px #0c67ff inset;
     }
 `;

package/src/ui/buttons/styles/custom.js

@@ -1,31 +1,37 @@
 /* @flow */
 
-import type { CustomStyle } from '../../../types';
-import { CLASS } from '../../../constants';
+import type { CustomStyle } from "../../../types";
+import { CLASS } from "../../../constants";
 
-export const customStyle = ({ custom } : {| custom? : ?CustomStyle |}) : string => {
-    const { css } = custom || {};
-    
-    if (!css) {
-        return '';
-    }
+export const customStyle = ({
+  custom,
+}: {|
+  custom?: ?CustomStyle,
+|}): string => {
+  const { css } = custom || {};
+
+  if (!css) {
+    return "";
+  }
 
-    let heightStyle = '';
-    let marginStyle = '';
-    let style = Object.keys(css).reduce((acc, key) => {
-        if (key === 'height') {
-            heightStyle = `
-                    height: ${ css[key] };
-                    max-height: ${ css[key] };
+  let heightStyle = "";
+  let marginStyle = "";
+  let style = Object.keys(css).reduce((acc, key) => {
+    if (key === "height") {
+      heightStyle = `
+                    height: ${css[key]};
+                    max-height: ${css[key]};
             `;
-        } else if (key.indexOf('margin') !== -1) {
-            marginStyle = `${ key }: ${ css[key] };`;
-        }
-        
-        acc += `${ key }: ${ css[key] };`;
-        return acc;
-    }, '');
-    style = `.${ CLASS.BUTTON }.${ CLASS.CUSTOM } { ${ style } } .${ CLASS.BUTTON_ROW }.${ CLASS.CUSTOM } { ${ heightStyle + marginStyle }}`;
+    } else if (key.indexOf("margin") !== -1) {
+      marginStyle = `${key}: ${css[key]};`;
+    }
+
+    acc += `${key}: ${css[key]};`;
+    return acc;
+  }, "");
+  style = `.${CLASS.BUTTON}.${CLASS.CUSTOM} { ${style} } .${CLASS.BUTTON_ROW}.${
+    CLASS.CUSTOM
+  } { ${heightStyle + marginStyle}}`;
 
-    return style;
+  return style;
 };

package/src/ui/buttons/styles/index.js

@@ -1,3 +1,3 @@
 /* @flow */
 
-export { componentStyle } from './base';
+export { componentStyle } from "./base";

package/src/ui/buttons/styles/labels.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import { CLASS } from '../../../constants';
+import { CLASS } from "../../../constants";
 
 export const COMPRESSED = `
     max-width: 0%;
@@ -25,31 +25,35 @@ export const VISIBLE = `
 
 export const labelStyle = `
 
-    .${ CLASS.BUTTON } .${ CLASS.TEXT } {
+    .${CLASS.BUTTON} .${CLASS.TEXT} {
         height: 100%;
-        ${ HIDDEN }
+        ${HIDDEN}
     }
 
-    .${ CLASS.BUTTON } .${ CLASS.TEXT }.${ CLASS.IMMEDIATE }:not(.${ CLASS.PERSONALIZATION_TEXT }):not(.${ CLASS.HIDDEN }) {
-        ${ VISIBLE }
-        ${ EXPANDED }
+    .${CLASS.BUTTON} .${CLASS.TEXT}.${CLASS.IMMEDIATE}:not(.${
+  CLASS.PERSONALIZATION_TEXT
+}):not(.${CLASS.HIDDEN}) {
+        ${VISIBLE}
+        ${EXPANDED}
     }
 
-    .${ CLASS.BUTTON } .${ CLASS.VAULT_LABEL } {
+    .${CLASS.BUTTON} .${CLASS.VAULT_LABEL} {
         max-width: 60%;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
     }
 
-    .${ CLASS.DOM_READY } .${ CLASS.BUTTON } .${ CLASS.TEXT }:not(.${ CLASS.IMMEDIATE }):not(.${ CLASS.PERSONALIZATION_TEXT }):not(.${ CLASS.HIDDEN }) {
-        ${ VISIBLE }
-        ${ COMPRESSED }
-        animation: show-text ${ __TEST__ ? '0' : '1' }s 0s forwards;
+    .${CLASS.DOM_READY} .${CLASS.BUTTON} .${CLASS.TEXT}:not(.${
+  CLASS.IMMEDIATE
+}):not(.${CLASS.PERSONALIZATION_TEXT}):not(.${CLASS.HIDDEN}) {
+        ${VISIBLE}
+        ${COMPRESSED}
+        animation: show-text ${__TEST__ ? "0" : "1"}s 0s forwards;
     }
 
     @keyframes show-text {
-        0% { ${ COMPRESSED } }
-        100% { ${ EXPANDED } }
+        0% { ${COMPRESSED} }
+        100% { ${EXPANDED} }
     }
 `;

package/src/ui/buttons/styles/page.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import { CLASS } from '../../../constants';
+import { CLASS } from "../../../constants";
 
 export const pageStyle = `
     html, body {
@@ -28,12 +28,12 @@ export const pageStyle = `
         display: inline-block;
     }
 
-    .${ CLASS.HIDDEN } {
+    .${CLASS.HIDDEN} {
         position: absolute !important;
         visibility: hidden !important;
     }
 
-    .${ CLASS.HIDDEN } * {
+    .${CLASS.HIDDEN} * {
         visibility: hidden !important;
     }
 `;