@rebilly/instruments 2.0.0-beta → 3.0.1-beta.0

package/dist/style/components/forms/label.js

@@ -8,35 +8,56 @@ exports.label = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the label component.
 // -----------------------------------------------------------------------------
-const label = theme => `
+const label = () => `
   /**
   * Label
   */
   .rebilly-instruments-form-field-label {
-    left: ${theme.space.form.horizontalPadding};
-    color: ${theme.color.text};
-    top: calc(${theme.space.form.minHeight} / 2);
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.92);
+    line-height: calc(var(--rebilly-fontSizeBase) * 0.92);
+    margin-bottom: var(--rebilly-spacings-2xs);
+  }
+
+  /* Floating Labels */
+  .is-floating .rebilly-instruments-form-field-label {
+    font-size: var(--rebilly-fontSizeBase);
+    left: var(--rebilly-spacings-label-offset-left);
+    color: var(--rebilly-colorText);
+    top: 50%;
     background: transparent;
-    opacity: 0;
+    opacity: 1;
     position: absolute;
-    transform: translateY(-50%);
-    transition: all 200ms;
+    transform: translateY(-50%) scale(1);
+    transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1), background 0.35s cubic-bezier(0.19, 1, 0.22, 1);
     cursor: text;
     pointer-events: none;
+    transform-origin: left top;
+  }
+
+  /* Includes Google autocomplete fix */
+  .is-floating input:-webkit-autofill + .rebilly-instruments-form-field-label,
+  .is-floating input:-webkit-autofill:hover + .rebilly-instruments-form-field-label, 
+  .is-floating input:-webkit-autofill:focus + .rebilly-instruments-form-field-label,
+  .is-floating select:-webkit-autofill + .rebilly-instruments-form-field-label,
+  .is-floating select:-webkit-autofill:hover + .rebilly-instruments-form-field-label,
+  .is-floating select:-webkit-autofill:focus + .rebilly-instruments-form-field-label {
+    padding: 0 var(--rebilly-spacings-2xs);
+    left: calc(var(--rebilly-spacings-label-offset-left) - var(--rebilly-spacings-2xs));
+    line-height: 1;
+    background: var(--rebilly-colorBackground);
+    opacity: 1!important;
+    transform: translateY(-175%) scale(0.875);
   }
 
-  .rebilly-instruments-form-field-input:not(:placeholder-shown) + .rebilly-instruments-form-field-label,
-  .rebilly-instruments-form-field-select:focus + .rebilly-instruments-form-field-label,
-  .rebilly-instruments-form-field-label.is-active {
-    padding: 0 ${theme.space.xxs};
-    left: calc(${theme.space.form.horizontalPadding} - ${theme.space.xxs});
-    font-size: ${theme.typography.captionFontSize};
-    line-height: ${theme.typography.captionLineHeight};
-    color: ${theme.color.text};
-    background: ${theme.color.background};
-    font-weight: 500;
+  .is-floating .rebilly-instruments-form-field-input:focus + .rebilly-instruments-form-field-label,
+  .is-floating .rebilly-instruments-form-field-select:focus + .rebilly-instruments-form-field-label,
+  .is-floating .rebilly-instruments-form-field-label.is-active {
+    padding: 0 var(--rebilly-spacings-2xs);
+    left: calc(var(--rebilly-spacings-label-offset-left) - var(--rebilly-spacings-2xs));
+    line-height: 1;
+    background: var(--rebilly-colorBackground);
     opacity: 1;
-    top: 0;
+    transform: translateY(-175%) scale(0.875);
   }
 `;
 

package/dist/style/components/forms/select.js

@@ -8,30 +8,59 @@ exports.select = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the select component.
 // -----------------------------------------------------------------------------
-const select = theme => `
+const select = () => `
   /**
   * Select
   */
   .rebilly-instruments-form-field-select {
-    font-size: ${theme.typography.fontSize};
-    line-height: ${theme.typography.lineHeight};
-    padding: ${theme.space.form.padding};
-    min-height: ${theme.space.form.minHeight};
-    border: 1px solid ${theme.getComputed.color.mutedBorder};
-    border-radius: ${theme.borderRadius};
-    color: ${theme.color.text};
-    background: transparent;
+    font-size: var(--rebilly-inputFontSize);
+    font-family: var(--rebilly-inputFontFamily);
+    font-weight: var(--rebilly-inputFontWeight);
+    line-height: var(--rebilly-inputFontLineHeight);
+    padding: var(--rebilly-spacings-input-py) var(--rebilly-spacings-input-px);
+    min-height: var(--rebilly-spacings-form-element-min-height);
+    border: var(--rebilly-inputBorder);
+    border-radius: var(--rebilly-inputBorderRadius);
+    color: var(--rebilly-inputColorText);
+    background: var(--rebilly-inputColorBackground);
     box-sizing: border-box;
+    box-shadow: var(--rebilly-inputBoxShadow);
     width: 100%;
     transition: all 200ms;
+    order: 1;
+  }
+
+  .rebilly-instruments-form-field-select:hover {
+    background: var(--rebilly-inputHoverColorBackground);
+    color: var(--rebilly-inputHoverColorText);
+    font-family: var(--rebilly-inputHoverFontFamily);
+    font-size: var(--rebilly-inputHoverFontSize);
+    line-height: var(--rebilly-inputHoverFontLineHeight);
+    font-weight: var(--rebilly-inputHoverFontWeight);
+    border: var(--rebilly-inputHoverBorder);
+    border-radius: var(--rebilly-inputHoverBorderRadius);
+    box-shadow: var(--rebilly-inputHoverBoxShadow);
   }
 
   .rebilly-instruments-form-field-select:focus {
     outline: none;
-    border: 1px solid ${theme.color.primary};
-    box-shadow: 0 0 0 1px ${theme.color.primary};
+    background: var(--rebilly-inputFocusColorBackground);
+    color: var(--rebilly-inputFocusColorText);
+    font-family: var(--rebilly-inputFocusFontFamily);
+    font-size: var(--rebilly-inputFocusFontSize);
+    line-height: var(--rebilly-inputFocusFontLineHeight);
+    font-weight: var(--rebilly-inputFocusFontWeight);
+    border: var(--rebilly-inputFocusBorder);
+    border-radius: var(--rebilly-inputFocusBorderRadius);
+    box-shadow: var(--rebilly-inputFocusBoxShadow);
   }
 
+  .rebilly-instruments-form-field-select::selection {
+    color: var(--rebilly-inputSelectionColorText);
+    background: var(--rebilly-inputSelectionColorBackground);
+  }
+
+
   .rebilly-instruments-form-field-select:disabled {
     opacity: 0.6;
   }
@@ -41,22 +70,25 @@ const select = theme => `
     -moz-appearance: none;
   }
 
-  .rebilly-instruments-form-field-select + .rebilly-instruments-form-field-label {
-    font-size: ${theme.typography.fontSize};
-    opacity: 0.5;
-  }
-
   .rebilly-instruments-form-field-select::-ms-expand { display: none; }
 
   .rebilly-instruments-form-field-select-arrow {
-    border: solid ${theme.color.text};
+    border: solid var(--rebilly-inputColorText);
     position: absolute;
-    width: 8px;
-    height: 8px;
+    width: var(--rebilly-spacings-xs);
+    height: var(--rebilly-spacings-xs);
     border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-    right: 16px;
-    top: 16px;
+    border-radius: 1px;
+    right: var(--rebilly-spacings-s);
+    top: 50%;
+    margin-top: calc(var(--rebilly-inputFontSize) * 0.875 - var(--rebilly-spacings-xs));
+    transform: translateY(-50%) rotate(45deg);
+  }
+
+  .is-floating .rebilly-instruments-form-field-select-arrow {
+    top: 50%;
+    margin-top: 0;
+    transform: translateY(-50%) rotate(45deg);
   }
 `;
 

package/dist/style/components/forms/validation.js

@@ -8,25 +8,72 @@ exports.validation = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the form validations.
 // -----------------------------------------------------------------------------
-const validation = theme => `
+const validation = () => `
   /**
   * Validations
   */
   .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input,
   .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select {
-    border-color: ${theme.color.errorText};
-    color: ${theme.color.errorText};
+    font-family: var(--rebilly-inputErrorFontFamily);
+    font-size: var(--rebilly-inputErrorFontSize);
+    font-weight: var(--rebilly-inputErrorFontWeight);
+    line-height: var(--rebilly-inputErrorFontLineHeight);
+    background: var(--rebilly-inputErrorColorBackground);
+    color: var(--rebilly-inputErrorColorText);
+    border: var(--rebilly-inputErrorBorder);
+    border-radius: var(--rebilly-inputErrorBorderRadius);
+    box-shadow: var(--rebilly-inputErrorBoxShadow);
+  }
+
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:hover,
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select:hover {
+    font-family: var(--rebilly-inputErrorHoverFontFamily);
+    font-size: var(--rebilly-inputErrorHoverFontSize);
+    font-weight: var(--rebilly-inputErrorHoverFontWeight);
+    line-height: var(--rebilly-inputErrorHoverFontLineHeight);
+    background: var(--rebilly-inputErrorHoverColorBackground);
+    color: var(--rebilly-inputErrorHoverColorText);
+    border: var(--rebilly-inputErrorHoverBorder);
+    border-radius: var(--rebilly-inputErrorHoverBorderRadius);
+    box-shadow: var(--rebilly-inputErrorHoverBoxShadow);
+  }
+
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:focus,
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select:focus {
+    font-family: var(--rebilly-inputErrorFocusFontFamily);
+    font-size: var(--rebilly-inputErrorFocusFontSize);
+    font-weight: var(--rebilly-inputErrorFocusFontWeight);
+    line-height: var(--rebilly-inputErrorFocusFontLineHeight);
+    background: var(--rebilly-inputErrorFocusColorBackground);
+    color: var(--rebilly-inputErrorFocusColorText);
+    border: var(--rebilly-inputErrorFocusBorder);
+    border-radius: var(--rebilly-inputErrorFocusBorderRadius);
+    box-shadow: var(--rebilly-inputErrorFocusBoxShadow);
+  }
+
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::placeholder {
+    color: var(--rebilly-inputErrorPlaceholderColorText);
+    font-family: var(--rebilly-inputErrorPlaceholderFontFamily);
+    font-size: var(--rebilly-inputErrorPlaceholderFontSize);
+    line-height: var(--rebilly-inputErrorPlaceholderFontLineHeight);
+    font-weight: var(--rebilly-inputErrorPlaceholderFontWeight);
+  }
+
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::selection,
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select::selection {
+    color: var(--rebilly-inputErrorSelectionColorText);
+    background: var(--rebilly-inputErrorSelectionColorBackground);
   }
 
   .rebilly-instruments-form-field-error-wrapper {
-    margin-top: ${theme.space.xxs};
-    margin-bottom: calc(${theme.space.xxs} + ${theme.space.s});
+    margin-top: var(--rebilly-spacings-2xs);
+    margin-bottom: 0;
     padding: 0;
     list-style: none;
   }
 
   .rebilly-instruments-form-field-error-wrapper > li {
-    color: ${theme.color.errorText};
+    color: var(--rebilly-colorDanger);
     padding: 0;
   }
 `;

package/dist/style/components/icons.js

@@ -8,14 +8,14 @@ exports.icons = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the icons component.
 // -----------------------------------------------------------------------------
-const icons = theme => `
+const icons = () => `
   /**
   * Icons
   */
   .rebilly-instruments-icon {
-    width: ${theme.typography.lineHeight};
-    height: ${theme.typography.lineHeight};
-    fill: ${theme.color.text};
+    width: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
+    height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
+    fill: var(--rebilly-colorText);
   }
 `;
 

package/dist/style/components/loader.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.loader = void 0;
 
+var _colorValues = require("../utils/color-values");
+
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the loader component.
 // -----------------------------------------------------------------------------
@@ -21,7 +23,7 @@ const loader = theme => `
     right: 0;
     justify-content: center;
     align-items: center;
-    background-color: ${theme.color.background};
+    background-color: var(--rebilly-colorBackground);
     z-index: 9000;
     transition: all 200ms;
   }
@@ -31,8 +33,8 @@ const loader = theme => `
   }
 
   .rebilly-instruments-loader-spinner {
-    border: 4px solid ${theme.getComputed.color.primaryValues.tint(80).hexString()};
-    border-top: 4px solid ${theme.color.primary};
+    border: 4px solid ${(0, _colorValues.lighten)(theme.colorPrimary, 80)};
+    border-top: 4px solid var(--rebilly-colorPrimary);
     border-radius: 50%;
     width: 40px;
     height: 40px;

package/dist/style/components/methods.js

@@ -8,7 +8,7 @@ exports.methods = exports.expressMethods = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the methods component.
 // -----------------------------------------------------------------------------
-const expressMethods = theme => `
+const expressMethods = () => `
   /**
    * Express methods
    */
@@ -20,9 +20,11 @@ const expressMethods = theme => `
   }
 
   .rebilly-instruments-express-methods.is-compact {
-    border: 1px solid ${theme.getComputed.color.mutedBorder};
-    padding: calc(${theme.space.xs} + ${theme.space.s}) ${theme.space.s} ${theme.space.s};
-    border-radius: ${theme.borderRadius};
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    padding: var(--rebilly-spacings-s);
+    padding-top: calc(var(--rebilly-spacings-xs) + var(--rebilly-spacings-s));
+    padding-top: calc(var(--rebilly-fontSizeBase) + var(--rebilly-spacings-2xs));
+    border-radius: 4px;
     position: relative;
   }
 
@@ -34,10 +36,11 @@ const expressMethods = theme => `
 
   .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > * {
     border-radius: 6px;
-    margin-bottom: ${theme.space.xs};
-    background: linear-gradient(110deg, ${theme.getComputed.color.mutedBorder} 0%, ${theme.color.background} 25%, ${theme.getComputed.color.mutedBorder} 50%);
+    margin-bottom: var(--rebilly-spacings-xs);
+    background: linear-gradient(110deg, var(--rebilly-colorMutedBorder) 0%, var(--rebilly-colorBackground) 25%, var(--rebilly-colorMutedBorder) 50%);
     background-size: 200% 100%;
     animation: 1.5s rebillyExpressShine linear infinite;
+    height: 44px;
   }
   .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > *:last-child {
     margin: 0;
@@ -51,7 +54,7 @@ const expressMethods = theme => `
   .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
     flex: 1 1 0px;
     max-width: 260px;
-    margin: 0 ${theme.space.xs};
+    margin: 0 var(--rebilly-spacings-xs);
   }
   .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:first-child {
     margin-left: 0;
@@ -65,17 +68,17 @@ const expressMethods = theme => `
   }
   .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-label {
     position: absolute;
-    top: -12px; left: 50%;
-    transform: translateX(-50%);
-    color: ${theme.color.text};
-    padding: 0 ${theme.space.s};
-    line-height: ${theme.typography.lineHeight};
-    background: ${theme.color.background};
+    top: 0; left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    color: var(--rebilly-colorText);
+    padding: var(--rebilly-spacings-2xs) var(--rebilly-spacings-s);
+    line-height: 1;
+    background: var(--rebilly-colorBackground);
     display: inline-block;
     font-weight: 500;
     min-height: auto;
     margin: 0;
-    border: 1px soplid red;
+    white-space: nowrap;
   }
 
   @media (max-width: 600px) {
@@ -84,7 +87,7 @@ const expressMethods = theme => `
     }
     .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
       max-width: 100%;
-      margin: 0 0 ${theme.space.xs};
+      margin: 0 0 var(--rebilly-spacings-xs);
     }
     .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
       margin: 0;

package/dist/style/components/overlay.js

@@ -8,7 +8,7 @@ exports.overlay = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the overlay component.
 // -----------------------------------------------------------------------------
-const overlay = theme => `
+const overlay = () => `
   /**
   * Overlay
   */
@@ -22,10 +22,10 @@ const overlay = theme => `
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #ffffff;
-    font-family: ${theme.typography.fontFamily};
-    font-size: calc(${theme.typography.fontSize} * 1.12);
-    line-height: ${theme.typography.lineHeight};
+    color: #FFF;
+    font-family: var(--rebilly-fontFamily);
+    font-size: calc(var(--rebilly-fontSizeBase) * 1.12);
+    line-height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
     z-index: 9001
   }
 `;

package/dist/style/helpers/index.js

@@ -8,52 +8,52 @@ exports.helpers = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to helpers.
 // -----------------------------------------------------------------------------
-const helpers = theme => `
-    /* Helpers
-    ------------------------------------------------------------ */
-    .rebilly-instruments-helper-visually-hidden {
-      border: 0;
-      clip: rect(0 0 0 0);
-      height: 1px;
-      margin: -1px;
-      overflow: hidden;
-      padding: 0;
-      position: absolute;
-      width: 1px;
-    }
+const helpers = () => `
+  /* Helpers
+  ------------------------------------------------------------ */
+  .rebilly-instruments-helper-visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
 
-    .rebilly-instruments-helper-mt-xxs { margin-top: ${theme.space.xxs}!important }
-    .rebilly-instruments-helper-mt-xs { margin-top: ${theme.space.xs}!important }
-    .rebilly-instruments-helper-mt-s { margin-top: ${theme.space.s}!important }
-    .rebilly-instruments-helper-mt-m { margin-top: ${theme.space.m}!important }
-    .rebilly-instruments-helper-mt-l { margin-top: ${theme.space.l}!important }
-    .rebilly-instruments-helper-mt-xl { margin-top: ${theme.space.xl}!important }
-    .rebilly-instruments-helper-mt-xxl { margin-top: ${theme.space.xxl}!important }
-    .rebilly-instruments-helper-mt-0 { margin-top: 0!important }
-    .rebilly-instruments-helper-mr-xxs { margin-right: ${theme.space.xxs}!important }
-    .rebilly-instruments-helper-mr-xs { margin-right: ${theme.space.xs}!important }
-    .rebilly-instruments-helper-mr-s { margin-right: ${theme.space.s}!important }
-    .rebilly-instruments-helper-mr-m { margin-right: ${theme.space.m}!important }
-    .rebilly-instruments-helper-mr-l { margin-right: ${theme.space.l}!important }
-    .rebilly-instruments-helper-mr-xl { margin-right: ${theme.space.xl}!important }
-    .rebilly-instruments-helper-mr-xxl { margin-right: ${theme.space.xxl}!important }
-    .rebilly-instruments-helper-mr-0 { margin-right: 0!important }
-    .rebilly-instruments-helper-mb-xxs { margin-bottom: ${theme.space.xxs}!important }
-    .rebilly-instruments-helper-mb-xs { margin-bottom: ${theme.space.xs}!important }
-    .rebilly-instruments-helper-mb-s { margin-bottom: ${theme.space.s}!important }
-    .rebilly-instruments-helper-mb-m { margin-bottom: ${theme.space.m}!important }
-    .rebilly-instruments-helper-mb-l { margin-bottom: ${theme.space.l}!important }
-    .rebilly-instruments-helper-mb-xl { margin-bottom: ${theme.space.xl}!important }
-    .rebilly-instruments-helper-mb-xxl { margin-bottom: ${theme.space.xxl}!important }
-    .rebilly-instruments-helper-mb-0 { margin-bottom: 0!important }
-    .rebilly-instruments-helper-ml-xxs { margin-left: ${theme.space.xxs}!important }
-    .rebilly-instruments-helper-ml-xs { margin-left: ${theme.space.xs}!important }
-    .rebilly-instruments-helper-ml-s { margin-left: ${theme.space.s}!important }
-    .rebilly-instruments-helper-ml-m { margin-left: ${theme.space.m}!important }
-    .rebilly-instruments-helper-ml-l { margin-left: ${theme.space.l}!important }
-    .rebilly-instruments-helper-ml-xl { margin-left: ${theme.space.xl}!important }
-    .rebilly-instruments-helper-ml-xxl { margin-left: ${theme.space.xxl}!important }
-    .rebilly-instruments-helper-ml-0 { margin-left: 0!important }
-  `;
+  .rebilly-instruments-helper-mt-xxs { margin-top: var(--rebilly-spacings-2xs) !important }
+  .rebilly-instruments-helper-mt-xs { margin-top: var(--rebilly-spacings-xs) !important }
+  .rebilly-instruments-helper-mt-s { margin-top: var(--rebilly-spacings-s) !important }
+  .rebilly-instruments-helper-mt-m { margin-top: var(--rebilly-spacings-base) !important }
+  .rebilly-instruments-helper-mt-l { margin-top: var(--rebilly-spacings-l) !important }
+  .rebilly-instruments-helper-mt-xl { margin-top: var(--rebilly-spacings-xl) !important }
+  .rebilly-instruments-helper-mt-xxl { margin-top: var(--rebilly-spacings-2xl) !important }
+  .rebilly-instruments-helper-mt-0 { margin-top: 0!important }
+  .rebilly-instruments-helper-mr-xxs { margin-right: var(--rebilly-spacings-2xs) !important }
+  .rebilly-instruments-helper-mr-xs { margin-right: var(--rebilly-spacings-xs) !important }
+  .rebilly-instruments-helper-mr-s { margin-right: var(--rebilly-spacings-s) !important }
+  .rebilly-instruments-helper-mr-m { margin-right: var(--rebilly-spacings-base) !important }
+  .rebilly-instruments-helper-mr-l { margin-right: var(--rebilly-spacings-l) !important }
+  .rebilly-instruments-helper-mr-xl { margin-right: var(--rebilly-spacings-xl) !important }
+  .rebilly-instruments-helper-mr-xxl { margin-right: var(--rebilly-spacings-2xl) !important }
+  .rebilly-instruments-helper-mr-0 { margin-right: 0!important }
+  .rebilly-instruments-helper-mb-xxs { margin-bottom: var(--rebilly-spacings-2xs) !important }
+  .rebilly-instruments-helper-mb-xs { margin-bottom: var(--rebilly-spacings-xs) !important }
+  .rebilly-instruments-helper-mb-s { margin-bottom: var(--rebilly-spacings-s) !important }
+  .rebilly-instruments-helper-mb-m { margin-bottom: var(--rebilly-spacings-base) !important }
+  .rebilly-instruments-helper-mb-l { margin-bottom: var(--rebilly-spacings-l) !important }
+  .rebilly-instruments-helper-mb-xl { margin-bottom: var(--rebilly-spacings-xl) !important }
+  .rebilly-instruments-helper-mb-xxl { margin-bottom: var(--rebilly-spacings-2xl) !important }
+  .rebilly-instruments-helper-mb-0 { margin-bottom: 0!important }
+  .rebilly-instruments-helper-ml-xxs { margin-left: var(--rebilly-spacings-2xs) !important }
+  .rebilly-instruments-helper-ml-xs { margin-left: var(--rebilly-spacings-xs) !important }
+  .rebilly-instruments-helper-ml-s { margin-left: var(--rebilly-spacings-s) !important }
+  .rebilly-instruments-helper-ml-m { margin-left: var(--rebilly-spacings-base) !important }
+  .rebilly-instruments-helper-ml-l { margin-left: var(--rebilly-spacings-l) !important }
+  .rebilly-instruments-helper-ml-xl { margin-left: var(--rebilly-spacings-xl) !important }
+  .rebilly-instruments-helper-ml-xxl { margin-left: var(--rebilly-spacings-2xl) !important }
+  .rebilly-instruments-helper-ml-0 { margin-left: 0!important }
+`;
 
 exports.helpers = helpers;

package/dist/style/index.js

@@ -11,6 +11,8 @@ var _autoprefixer = _interopRequireDefault(require("autoprefixer"));
 
 var _browserslist = require("./browserslist");
 
+var _removeEmptyNull = _interopRequireDefault(require("./utils/remove-empty-null"));
+
 var _theme = require("./base/theme");
 
 var _base = require("./base");
@@ -40,7 +42,7 @@ const mainStyle = async themeOverride => {
     ${(0, _postmate.postmateStyle)(resolvedTheme)}
     ${(0, _helpers.helpers)(resolvedTheme)}
   `;
-  return (0, _postcss.default)([(0, _autoprefixer.default)(_browserslist.browserslist)]).process(style, {
+  return (0, _postcss.default)([_removeEmptyNull.default, (0, _autoprefixer.default)(_browserslist.browserslist)]).process(style, {
     from: undefined
   }).then(result => result.css);
 };

package/dist/style/payment-instruments/payment-card.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.paymentCard = void 0;
 
-const paymentCard = theme => `
+const paymentCard = () => `
   /**
   * Payment card
   */
@@ -13,18 +13,18 @@ const paymentCard = theme => `
     display: inline-flex;
     width: 100%;
     justify-content: flex-end;
-    margin-top: ${theme.space.s} 
+    margin-top: var(--rebilly-spacings-s);
   }
 
   .rebilly-instruments-payment-card-brands figure {
-    margin: 0 0 0 ${theme.space.xxs};
+    margin: 0 0 0 var(--rebilly-spacings-2xs);
     padding: 0;
     height: 26px;
   }
 
   .rebilly-instruments-payment-card-brands figure img {
     width: 42px;
-    border-radius: ${theme.borderRadius};
+    border-radius: 4px;
   }
 
   .rebilly-instruments-modal-container.rebilly-instruments-payment-card {

package/dist/style/utils/border.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class Border {
+  constructor(str) {
+    _defineProperty(this, "allStyles", ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial', 'inherit']);
+
+    this.str = str || '';
+    const style = this.allStyles.find(s => this.str.includes(s));
+    const borderProps = this.str.split(style).map(a => a.trim());
+    this.border = [borderProps[0], style, borderProps[1]];
+  }
+
+  get stylePosition() {
+    let stylePosition = 0;
+
+    if (this.border.length === 3) {
+      stylePosition = 1;
+    } else if (this.border.length === 2) {
+      if (this.allStyles.includes(this.border[0])) {
+        stylePosition = 0;
+      } else {
+        stylePosition = 1;
+      }
+    }
+
+    return stylePosition;
+  }
+
+  updateColor(color) {
+    this.border[this.stylePosition + 1] = color;
+    return this;
+  }
+
+  get value() {
+    return this.border.join(' ');
+  }
+
+}
+
+exports.default = Border;