@rebilly/instruments 3.12.3-beta.0 → 3.13.2-beta.0

package/src/style/base/index.js

@@ -1,95 +1,503 @@
-export const base = (theme) => `
-  /* Instruments 'global' variables
-  ------------------------------------------------------------ */
-  :root,
-  #rebilly-instruments-app,
-  .rebilly-instruments-content,
-  .rebilly-instruments-loader,
-  .rebilly-instruments-modal-overlay {
-    ${theme.cssVars}
-
-    --rebilly-spacings-base: calc(var(--rebilly-fontSizeBase) * 1.5);
-    --rebilly-spacings-2xs: calc(var(--rebilly-spacings-base) * 0.16667);
-    --rebilly-spacings-xs: calc(var(--rebilly-spacings-base) * 0.25);
-    --rebilly-spacings-s: calc(var(--rebilly-spacings-base) * 0.5);
-    --rebilly-spacings-m: var(--rebilly-spacings-base);
-    --rebilly-spacings-l: calc(var(--rebilly-spacings-base) * 2);
-    --rebilly-spacings-xl: calc(var(--rebilly-spacings-base) * 4);
-    --rebilly-spacings-2xl: calc(var(--rebilly-spacings-base) * 4.6667);
-
-    --rebilly-spacings-input-py: calc(var(--rebilly-spacings-2xs) * 2);
-    --rebilly-spacings-input-px: calc(var(--rebilly-spacings-s) + var(--rebilly-spacings-2xs));
-    --rebilly-spacings-label-offset-left: var(--rebilly-spacings-input-px);
-    --rebilly-spacings-form-element-min-height: calc(var(--rebilly-spacings-base) * 1.83333);
-    --rebilly-spacings-button-py: var(--rebilly-spacings-input-py);
-    --rebilly-spacings-button-px: var(--rebilly-spacings-input-px);
-  }
+export const vars = (theme) => `
+/* Instruments 'global' variables
+------------------------------------------------------------ */
+:root {
+  ${theme.cssVars}
 
+  --rebilly-fontWeight400: 400;
+  --rebilly-fontWeight500: 500;
+  --rebilly-fontWeight600: 600;
+  --rebilly-fontScaleFactor: 1.5;
+  --rebilly-fontScaleFactorS: 0.875;
+  --rebilly-fontSizeS: calc(var(--rebilly-fontSizeBase) * var(--rebilly-fontScaleFactorS));
+  --rebilly-fontLineHeightS: calc(var(--rebilly-fontSizeS) * 1);
 
-  /* Base, Typography
-  ------------------------------------------------------------ */
-  /* Base setup for top level elements */
-  .rebilly-instruments-content,
-  .rebilly-instruments-method-content,
-  .rebilly-instruments-confirmation,
-  .rebilly-instruments-results {
-    color: var(--rebilly-colorText);
-    background: var(--rebilly-colorBackground);
-    font-size: var(--rebilly-fontSizeBase);
-    font-weight: var(--rebilly-fontWeightBase);
-    line-height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
-    font-family: var(--rebilly-fontFamily);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: left;
-    transition: all 200ms;
-    font-smooth: var(--rebilly-fontSmooth);
-  }
+  --rebilly-fontSizeL: calc(var(--rebilly-fontSizeBase) * var(--rebilly-fontScaleFactor));
+  --rebilly-fontLineHeightL: calc(var(--rebilly-fontLineHeightBase) * 2);
+  --rebilly-fontMarginTopL: 0;
+  --rebilly-fontMarginBottomL: var(--rebilly-fontLineHeightBase);
 
-  .rebilly-instruments-link {
-    color: var(--rebilly-colorPrimary);
-    cursor: pointer;
-  }
+  --rebilly-spacing2xs: calc(var(--rebilly-fontLineHeightBase) / 6);
+  --rebilly-spacingXs: calc(var(--rebilly-fontLineHeightBase) / 4);
+  --rebilly-spacingS: calc(var(--rebilly-fontLineHeightBase) / 2);
+  --rebilly-spacingM: var(--rebilly-fontLineHeightBase);
+  --rebilly-spacingL: calc(var(--rebilly-fontLineHeightBase) * 2);
+  --rebilly-spacingXl: calc(var(--rebilly-fontLineHeightBase) * 4);
 
-  .rebilly-instruments-link:hover {
-    text-decoration: none;
-  }
+  --rebilly-spacingFormElementMinHeight: calc(var(--rebilly-spacingM) * 1.83333);
 
-  .rebilly-instruments-link .rebilly-instruments-icon {
-    fill: var(--rebilly-colorPrimary);
-  }
+  --rebilly-summaryLoaderMinHeight: var(--rebilly-fontLineHeightBase);
+  --rebilly-methodLoaderMinHeight: calc((4 * var(--rebilly-spacingFormElementMinHeight)) + (2 * var(--rebilly-fontLineHeightBase)) + (2 * var(--rebilly-spacingM)) + var(--rebilly-spacing2xs) + var(--rebilly-fontSizeS) + calc(2 * (var(--rebilly-spacingXs) + var(--rebilly-spacingS))) + var(--rebilly-spacingL));
+}
 
-  .rebilly-instruments-link.has-icon-left,
-  .rebilly-instruments-link.has-icon-right {
-    display: inline-flex;
-  }
+/* Views. Method Selector
+------------------------------------------------------------ */
+.rebilly-instruments-method-selector.has-express-compact {
+  padding-top: var(--rebilly-spacingS);
+}
 
-  .rebilly-instruments-link.has-icon-left .rebilly-instruments-icon {
-    margin-right: var(--rebilly-spacings-xs);
+/* Express Methods
+------------------------------------------------------------ */
+@-webkit-keyframes rebillyExpressShine {
+  to {
+    background-position-x: -200%;
   }
-
-  .rebilly-instruments-link.has-icon-right .rebilly-instruments-icon {
-    margin-left: var(--rebilly-spacings-xs);
+}
+@keyframes rebillyExpressShine {
+  to {
+    background-position-x: -200%;
   }
+}
+
+.rebilly-instruments-express-methods { padding: 2px; }
+
+.rebilly-instruments-express-methods.is-compact {
+  border: 1px solid var(--rebilly-colorMutedBorder);
+  padding: var(--rebilly-spacingS);
+  padding-top: calc(var(--rebilly-spacingXs) + var(--rebilly-spacingS));
+  padding-top: calc(var(--rebilly-fontSizeBase) + var(--rebilly-spacing2xs));
+  border-radius: var(--rebilly-borderRadius);
+  position: relative;
+}
+
+.rebilly-instruments-express-methods .rebilly-instruments-iframe {
+  display: block;
+  margin-bottom: 0;
+  height: var(--rebilly-spacingFormElementMinHeight);
+}
+
+.rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > * {
+  border-radius: 6px;
+  margin-bottom: var(--rebilly-spacingS);
+  background: linear-gradient(110deg, var(--rebilly-colorMutedBorder) 0%, var(--rebilly-colorBackground) 25%, var(--rebilly-colorMutedBorder) 50%);
+  background-size: 200% 100%;
+  -webkit-animation: 1.5s rebillyExpressShine linear infinite;
+          animation: 1.5s rebillyExpressShine linear infinite;
+  height: 44px;
+}
+
+.rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > *:last-child {
+  margin: 0;
+}
+
+.rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0px;
+  max-width: 260px;
+  margin: 0 var(--rebilly-spacingXs);
+}
+
+.rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:first-child {
+  margin-left: 0;
+}
 
-  /* Typography */
-  .rebilly-instruments-h1,
-  .rebilly-instruments-h2 {
-    font-weight: var(--rebilly-headingFontWeight);
-    font-family: var(--rebilly-headingFontFamily);
-    color: var(--rebilly-headingColorText);
+.rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
+  margin-right: 0;
+}
+
+.rebilly-instruments-express-methods .rebilly-instruments-express-methods-label {
+  display: none;
+}
+
+.rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-label {
+  position: absolute;
+  font-family: var(--rebilly-fontFamily);
+  top: 0; left: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+  color: var(--rebilly-colorText);
+  padding: var(--rebilly-spacing2xs) var(--rebilly-spacingM);
+  line-height: 1;
+  background: var(--rebilly-colorBackground);
+  display: inline-block;
+  font-weight: var(--rebilly-fontWeightBase);
+  min-height: auto;
+  margin: 0;
+  white-space: nowrap;
+}
+
+@media (max-width: 600px) {
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container  {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
   }
 
-  .rebilly-instruments-h1 {
-    font-size: calc(var(--rebilly-fontSizeBase) * 1.5);
-    line-height: 1.5;
-    line-height: calc(${theme.fontLineHeightBase} * 1.5);
-    margin: 0 0 calc(var(--rebilly-spacings-base) * 1.5) 0;
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
+    max-width: 100%;
+    margin: 0 0 var(--rebilly-spacingS);
+  }
+  
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
+    margin: 0;
   }
+}
+
+/* Components. Divider
+------------------------------------------------------------ */
+.rebilly-instruments-divider {
+  line-height: var(--rebilly-fontLineHeightBase);
+  padding: var(--rebilly-spacingM) 0;
+  margin: 0;
+  position: relative;
+  outline: 0;
+  border: 0;
+  text-align: center;
+  font-family: var(--rebilly-fontFamily);
+}
+
+.rebilly-instruments-divider-s { padding: var(--rebilly-spacingS) 0; }
+.rebilly-instruments-divider-xs { padding: var(--rebilly-spacingXs) 0; }
+
+.rebilly-instruments-divider::before {
+  background: var(--rebilly-colorMutedBorder);
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  height: 1px;
+}
+
+.rebilly-instruments-divider .rebilly-instruments-divider-label {
+  color: var(--rebilly-colorMutedText);
+  font-weight: var(--rebilly-fontWeightBase);
+  padding: 0 var(--rebilly-spacingM);
+  line-height: var(--rebilly-fontLineHeightS);
+  background-color: var(--rebilly-colorBackground);
+  font-size: var(--rebilly-fontSizeS);
+  position: relative;
+  display: inline-block;
+}
+
+/* Vendor, Postmate
+------------------------------------------------------------ */
+.rebilly-instruments-iframe {
+  border: none;
+  width: 100%;
+  height: 0;
+  padding: 0;
+}
+
+.rebilly-instruments-iframe-overlay {
+  top: -2px;
+  left: -2px;
+  width: calc(100vw + 2px);
+  height: 100vh;
+  min-height: calc(100vh + 4px);
+  position: fixed;
+  z-index: 99999999999999;
+}
+
+/* Views. Modal
+------------------------------------------------------------ */
+.rebilly-instruments-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 1055;
+  padding: 30px;
+  width:  100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-transition: all 0.12s ease-in-out;
+  transition: all 0.12s ease-in-out;
+  background-color: rgba(0,0,0,0.7);
+  opacity: 0
+}
+
+.rebilly-instruments-modal-overlay.is-visible {
+  opacity: 1;
+}
+
+.rebilly-instruments-modal-container {
+  -webkit-transition: all .24s ease-in-out;
+  transition: all .24s ease-in-out;
+  position: relative;
+  max-width: 750px;
+  background: var(--rebilly-colorBackground);
+  margin: 50px auto 20px;
+  -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.12);
+          box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.12);
+  border-radius: 4px;
+  -webkit-transform: translateY(-50px);
+          transform: translateY(-50px);
+  opacity: 0;
+}
+
+.rebilly-instruments-modal-container.is-visible {
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+  opacity: 1;
+}
+
+.rebilly-instruments-modal-container.is-redirect {
+  max-width: 60vw;
+  width: auto;
+}
 
-  .rebilly-instruments-h2 {
-    font-size: calc(var(--rebilly-fontSizeBase) * 1.125);
-    line-height: var(--rebilly-fontLineHeightBase, 1.33);
-    margin: 0 0 var(--rebilly-spacings-base) 0;
+.rebilly-instruments-modal-content {
+  -webkit-transition: all .15s;
+  transition: all .15s;
+  padding: 20px;
+  overflow: hidden;
+  background-color: var(--rebilly-colorBackground);
+  text-align: center;
+  border-radius: 4px;
+}
+
+.rebilly-instruments-modal-content .rebilly-instruments-iframe {
+  -webkit-transition: all .15s;
+  transition: all .15s;
+  height: auto;
+  min-height: 360px;
+}
+
+.rebilly-instruments-modal-container.is-redirect .rebilly-instruments-modal-content {
+  padding: 0;
+}
+
+.rebilly-instruments-modal-close {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  top: -40px;
+  right: 0;
+  fill: #FFF;
+  cursor: pointer;
+}
+
+.rebilly-instruments-modal-close:hover{
+  color: #000;
+}
+
+@media screen and (max-width: 480px) {
+  .rebilly-instruments-modal-container.is-redirect {
+    max-width: 96vw;
+    margin: 20px auto 20px;
   }
+}
+
+/* Components. Loader
+------------------------------------------------------------ */
+.rebilly-instruments-loader {
+  text-align: left;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: none;
+  background-color: var(--rebilly-colorBackground);
+  z-index: 1000;
+  -webkit-transition: all 200ms;
+  transition: all 200ms;
+  border-radius: var(--rebilly-borderRadius);
+}
+
+.rebilly-instruments-loader.is-active {
+  display: block;
+}
+
+/* Type */
+.rebilly-instruments-loader p {
+  color: var(--rebilly-colorText);
+  display: inline-block;
+  margin: 0;
+  font-weight: var(--rebilly-fontWeightBase);
+  font-size: var(--rebilly-fontSizeBase);
+  line-height: var(--rebilly-fontLineHeightBase);
+}
+
+.rebilly-instruments-loader small {
+  color: var(--rebilly-colorText);
+  display: inline-block;
+  margin: 0;
+  font-size: var(--rebilly-fontSizeS);
+  line-height: 1;
+}
+
+/* Summary */
+.rebilly-instruments-summary-loader-total p.total {
+  font-family: var(--rebilly-fontFamily);
+  font-size: var(--rebilly-fontSizeL);
+  font-weight: var(--rebilly-headingFontWeight);
+}
+
+/* Methods */
+.rebilly-instruments-methods-loader-card-icon {
+  width: 32px;
+  height: 22px;
+  margin-left: var(--rebilly-spacing2xs);
+  margin-bottom: var(--rebilly-spacing2xs);
+}
+
+.rebilly-instruments-methods-loader-form-fields { margin: calc(var(--rebilly-spacingXs) + var(--rebilly-spacingS)) 0; }
+
+/* Spinner */
+.rebilly-instruments-loader-spinner {
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  border: 2px solid transparent;
+  border-top: 2px solid var(--rebilly-colorPrimary);
+  border-radius: 50%;
+  width: var(--rebilly-fontLineHeightBase);
+  height: var(--rebilly-fontLineHeightBase);
+  margin-top: calc(-1 * var(--rebilly-fontLineHeightBase) / 2);
+  margin-left: calc(-1 * var(--rebilly-fontLineHeightBase) / 2);
+  -webkit-animation: spin 0.5s ease infinite;
+          animation: spin 0.5s ease infinite;
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+
+/* Utils */
+.rebilly-instruments-loader-display-flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
+.rebilly-instruments-loader-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
+.rebilly-instruments-loader-justify-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+.rebilly-instruments-loader-justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+
+.is-el-loading {
+  position: relative;
+  color: transparent!important;
+}
+
+.is-el-loading::before {
+  position: absolute;
+  content: '';
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(110deg, var(--rebilly-colorMutedBorder) 0%, var(--rebilly-colorBackground) 25%, var(--rebilly-colorMutedBorder) 50%);
+  background-size: 200% 100%;
+  -webkit-animation: 1.5s rebillyExpressShine linear infinite;
+          animation: 1.5s rebillyExpressShine linear infinite;
+  border-radius: var(--rebilly-borderRadius);
+}
+
+.rebilly-instruments-loader-form-el {
+  width: 100%;
+  min-height: var(--rebilly-spacingFormElementMinHeight);
+}
+
+.rebilly-instruments-loader-form-label {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: var(--rebilly-spacing2xs);
+}
+
+.rebilly-instruments-loader-form-el.is-button {
+  margin-top: var(--rebilly-spacingL);
+  text-align: center;
+  font-size: var(--rebilly-buttonFontSize);
+  font-family: var(--rebilly-buttonFontFamily);
+  line-height: var(--rebilly-buttonFontLineHeight);
+  padding: var(--rebilly-spacingS);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  background: var(--rebilly-buttonColorBackground);
+  color: transparent;
+  border-radius: var(--rebilly-buttonBorderRadius);
+  font-weight: var(--rebilly-buttonFontWeight);
+  border: var(--rebilly-buttonBorder);
+  -webkit-box-shadow: var(--rebilly-buttonBoxShadow);
+          box-shadow: var(--rebilly-buttonBoxShadow);
+  outline: none;
+  cursor: not-allowed;
+  opacity: 0.6; 
+}
+
+.rebilly-instruments-methods-loader-card-icon.is-el-loading::before {
+  border-radius: calc(var(--rebilly-borderRadius) / 2);
+}
+
+/* Error
+------------------------------------------------------------ */
+.rebilly-instruments-error-card {
+  border: 1px solid var(--rebilly-colorDanger);
+  border-radius: var(--rebilly-borderRadius);
+  text-align: left;
+  padding: var(--rebilly-spacingS);
+  margin-bottom: var(--rebilly-spacingL);
+}
+
+.rebilly-instruments-error-card-header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+
+.rebilly-instruments-error-card-title {
+  font-weight: var(--rebilly-fontWeightBase);
+  font-size: var(--rebilly-fontSizeBase);
+  line-height: var(--rebilly-fontLineHeightBase);
+  font-family: var(--rebilly-headingFontFamily);
+  margin: 0 0 var(--rebilly-spacingS);
+  color: var(--rebilly-colorDanger);
+}
+
+.rebilly-instruments-error-card-close-button {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.rebilly-instruments-error-card-close-button svg {
+  width: var(--rebilly-fontLineHeightBase);
+  height: var(--rebilly-fontLineHeightBase);
+  fill: var(--rebilly-colorText);
+}
+
+.rebilly-instruments-error-card-details {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.rebilly-instruments-error-card-details li,
+.rebilly-instruments-error-card-message {
+  color: var(--rebilly-colorText);
+  margin: 0;
+  font-weight: var(--rebilly-fontWeightBase);
+  font-size: var(--rebilly-fontSizeBase);
+  line-height: var(--rebilly-fontLineHeightBase);
+}
 `;

package/src/style/base/theme.js

@@ -16,15 +16,14 @@ export class Theme {
 
   get cssVars() {
     return Object.keys(this.theme)
-            .filter(v => !Theme.nonCssProperties.includes(v))
-            .map(p => `--rebilly-${p}: ${this.theme[p]};`)
-            .join('\n');
+      .filter(v => !Theme.nonCssProperties.includes(v))
+      .map((p, i) => `${!i ? '' : '  '}--rebilly-${p}: ${this.theme[p]};`)
+      .join('\n');
   }
 
   build() {
     this.overrideTheme();
     return {
-      ...this.theme,
       cssVars: this.cssVars
     }
   }

package/src/style/base/theme.spec.js

@@ -13,8 +13,7 @@ describe('RebillyInstruments theme', () => {
       buttonBorderRadius: '30px'
     };
     const theme = new Theme(overrides).build();
-
-    expect(theme.colorPrimary).toEqual('red');
-    expect(theme.buttonBorderRadius).toEqual('30px');
+    expect(theme.cssVars).toMatch('--rebilly-colorPrimary: red;');
+    expect(theme.cssVars).toMatch('--rebilly-buttonBorderRadius: 30px;');
   });
 });

package/src/style/index.js

@@ -1,31 +1,11 @@
-import postcss from 'postcss';
-import autoprefixer from 'autoprefixer';
-import { browserslist } from './browserslist';
-import removeEmptyAndNull from './utils/remove-empty-null';
-
 import { Theme } from './base/theme';
-import { base } from './base';
-import { framepayStyle } from './vendor/framepay';
-import { postmateStyle } from './vendor/postmate';
-import { components } from './components';
-import { paymentInstruments } from './payment-instruments';
-import { views } from './views';
-import { helpers } from './helpers';
+import { vars } from './base';
 
-export const mainStyle = async (themeOverride) => {
+export const mainStyleVars = (themeOverride) => {
   const resolvedTheme = new Theme(themeOverride).build();
-
   const style = `
-    ${base(resolvedTheme)}
-    ${components(resolvedTheme)}
-    ${views(resolvedTheme)}
-    ${paymentInstruments(resolvedTheme)}
-    ${framepayStyle(resolvedTheme)}
-    ${postmateStyle(resolvedTheme)}
-    ${helpers(resolvedTheme)}
+    ${vars(resolvedTheme)}
   `;
 
-  return postcss([removeEmptyAndNull, autoprefixer(browserslist)])
-    .process(style, { from: undefined })
-    .then((result) => result.css);
+  return style;
 };

package/src/style/utils/color-values.js

@@ -12,7 +12,7 @@ export function alphaColor(color, alphaValue = 1) {
   return _alphaColor.rgbString();
 }
 
-export const mutedTextColor = (color) => alphaColor(color, 0.6);
+export const mutedTextColor = (color) => alphaColor(color, 0.5);
 
 export const mutedBorderColor = (color) => alphaColor(color, 0.25);
 

package/src/style/utils/minifyCss.js

@@ -0,0 +1,14 @@
+export function minifyCss(_content) {
+    let content = _content;
+    // Remove all comments and new lines
+    content = content.replace( /\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '' );
+    // Remove spaces between selectors
+    content = content.replace( /\s{2,}/g, ' ' );
+    // Remove spaces of nested { }
+    content = content.replace( /\s([{:}])\s/g, '$1' );
+    // Remove spaces between , and ;
+    content = content.replace( /([;,])\s/g, '$1' );
+    // Remove important! spaces
+    content = content.replace( /\s!/g, '!' );
+    return content;
+}

package/src/views/common/iframe/base-iframe.js

@@ -1,6 +1,6 @@
 import Postmate from 'popostmate';
 import { SUPPORTED_METHODS } from '../../method-selector/get-payment-methods';
-import { loaderHTML } from '../../../loader';
+import { basicLoaderHTML } from '../../../loader';
 
 export default class BaseIframe {
   constructor({
@@ -45,13 +45,14 @@ export default class BaseIframe {
       appendChild: (iframe) => {
         iframe.setAttribute('loading', 'lazy');
         iframe.setAttribute('allow', 'payment');
+        iframe.setAttribute('scrolling', 'no');
         iframe.allowPaymentRequest = true;
         this.container.appendChild(iframe);
       },
     };
 
     if (SUPPORTED_METHODS.includes(this.name)) {
-      this.container.insertAdjacentHTML('beforeend', loaderHTML);
+      this.container.insertAdjacentHTML('beforeend', basicLoaderHTML);
     }
 
     const component = await new Postmate({