@rebilly/instruments 1.0.1-beta → 1.0.2-beta.10

package/dist/styles/base-styles.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BASE_STYLE = void 0;
-
-var BASE_STYLE = function BASE_STYLE(STYLES_VARIABLES, primaryValues, textColorMuted) {
-  return "\n  /* Loader */\n  .rebilly-instruments-loader {\n    display: none;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    justify-content: center;\n    align-items: center;\n    background-color: ".concat(STYLES_VARIABLES.background, ";\n    z-index: 9000;\n    transition: all 200ms;\n  }\n\n  .rebilly-instruments-loader.active {\n    display: flex;\n  }\n\n  .rebilly-instruments-loader-spinner {\n    border: 4px solid ").concat(primaryValues.tint(80).hexString(), ";\n    border-top: 4px solid ").concat(STYLES_VARIABLES.primary, ";\n    border-radius: 50%;\n    width: 40px;\n    height: 40px;\n    animation: spin 0.5s ease infinite;\n  }\n\n  @keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n\n  /* Helpers */\n  .visually-hidden {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n\n  .mt-xxs { margin-top: ").concat(STYLES_VARIABLES.spaceXXS, "!important }\n  .mt-xs { margin-top: ").concat(STYLES_VARIABLES.spaceXS, "!important }\n  .mt-s { margin-top: ").concat(STYLES_VARIABLES.spaceS, "!important }\n  .mt-m { margin-top: ").concat(STYLES_VARIABLES.spaceM, "!important }\n  .mt-l { margin-top: ").concat(STYLES_VARIABLES.spaceL, "!important }\n  .mt-xl { margin-top: ").concat(STYLES_VARIABLES.spaceXL, "!important }\n  .mt-xxl { margin-top: ").concat(STYLES_VARIABLES.spaceXXL, "!important }\n  .mt-0 { margin-top: 0!important }\n  .mr-xxs { margin-right: ").concat(STYLES_VARIABLES.spaceXXS, "!important }\n  .mr-xs { margin-right: ").concat(STYLES_VARIABLES.spaceXS, "!important }\n  .mr-s { margin-right: ").concat(STYLES_VARIABLES.spaceS, "!important }\n  .mr-m { margin-right: ").concat(STYLES_VARIABLES.spaceM, "!important }\n  .mr-l { margin-right: ").concat(STYLES_VARIABLES.spaceL, "!important }\n  .mr-xl { margin-right: ").concat(STYLES_VARIABLES.spaceXL, "!important }\n  .mr-xxl { margin-right: ").concat(STYLES_VARIABLES.spaceXXL, "!important }\n  .mr-0 { margin-right: 0!important }\n  .mb-xxs { margin-bottom: ").concat(STYLES_VARIABLES.spaceXXS, "!important }\n  .mb-xs { margin-bottom: ").concat(STYLES_VARIABLES.spaceXS, "!important }\n  .mb-s { margin-bottom: ").concat(STYLES_VARIABLES.spaceS, "!important }\n  .mb-m { margin-bottom: ").concat(STYLES_VARIABLES.spaceM, "!important }\n  .mb-l { margin-bottom: ").concat(STYLES_VARIABLES.spaceL, "!important }\n  .mb-xl { margin-bottom: ").concat(STYLES_VARIABLES.spaceXL, "!important }\n  .mb-xxl { margin-bottom: ").concat(STYLES_VARIABLES.spaceXXL, "!important }\n  .mb-0 { margin-bottom: 0!important }\n  .ml-xxs { margin-left: ").concat(STYLES_VARIABLES.spaceXXS, "!important }\n  .ml-xs { margin-left: ").concat(STYLES_VARIABLES.spaceXS, "!important }\n  .ml-s { margin-left: ").concat(STYLES_VARIABLES.spaceS, "!important }\n  .ml-m { margin-left: ").concat(STYLES_VARIABLES.spaceM, "!important }\n  .ml-l { margin-left: ").concat(STYLES_VARIABLES.spaceL, "!important }\n  .ml-xl { margin-left: ").concat(STYLES_VARIABLES.spaceXL, "!important }\n  .ml-xxl { margin-left: ").concat(STYLES_VARIABLES.spaceXXL, "!important }\n  .ml-0 { margin-left: 0!important }\n\n  /* Icons */\n  .rebilly-instruments-icon {\n    width: ").concat(STYLES_VARIABLES.lineHeight, ";\n    height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    fill: ").concat(STYLES_VARIABLES.text, ";\n  }\n\n  /* Form */\n  .rebilly-instruments-form {\n    color: ").concat(STYLES_VARIABLES.text, ";\n    background: ").concat(STYLES_VARIABLES.background, ";\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    font-family: ").concat(STYLES_VARIABLES.fontFamily, ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-align: left;\n    transition: all 200ms;\n    padding: 2px;\n  }\n\n  .rebilly-instruments-form.is-popup {\n    padding: 20px;\n  }\n\n  .rebilly-instruments-form fieldset {\n    border: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .rebilly-instruments-form h2 {\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    margin: 0 0 ").concat(STYLES_VARIABLES.spaceM, ";\n    font-weight: 500;\n  }\n\n  .rebilly-instruments-form-express * + * {\n    margin-top: ").concat(STYLES_VARIABLES.spaceS, ";\n  }\n\n  .rebilly-instruments-form-express.compact * + * {\n    margin-top: 0;\n  }\n\n  .rebilly-instruments-form-express.compact {\n    display: flex;\n    justify-content: center;\n    padding: calc(").concat(STYLES_VARIABLES.spaceXS, " + ").concat(STYLES_VARIABLES.spaceS, ") ").concat(STYLES_VARIABLES.spaceS, " ").concat(STYLES_VARIABLES.spaceS, ";\n    border: 1px solid ").concat(textColorMuted[7].hexString(), ";\n    border-radius: 4px;\n    position: relative;\n    flex-wrap: wrap;\n  }\n\n  @keyframes rebillyExpressShine {\n    to {\n      background-position-x: -200%;\n    }\n  }\n\n  .rebilly-instruments-form-express.compact > * {\n    flex: 1 1;\n    margin: ").concat(STYLES_VARIABLES.spaceXS, " ").concat(STYLES_VARIABLES.spaceXS, ";\n    max-width: 260px;\n    min-height: 44px;\n    background: linear-gradient(110deg, ").concat(textColorMuted[8].hexString(), " 0%, ").concat(textColorMuted[9].hexString(), " 25%, ").concat(textColorMuted[8].hexString(), " 50%);\n    border-radius: 6px;\n    background-size: 200% 100%;\n    animation: 1.5s rebillyExpressShine linear infinite;\n  }\n\n  .rebilly-instruments-form-express:empty {\n    display: none;\n  }\n\n  @media (max-width: 600px) {\n    .rebilly-instruments-form-express.compact > * {\n      flex: 1 1 auto;\n      max-width: 100%;\n    }\n  }\n\n  .rebilly-instruments-form-express.compact .rebilly-instruments-form-express-label {\n    position: absolute;\n    top: -12px;\n    color: ").concat(STYLES_VARIABLES.text, ";\n    padding: 0 ").concat(STYLES_VARIABLES.spaceS, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    background: ").concat(STYLES_VARIABLES.background, ";\n    display: inline-block;\n    font-weight: 500;\n    min-height: auto;\n    margin: 0;\n  }\n\n  .rebilly-instruments-methods {\n    background-color: ").concat(STYLES_VARIABLES.background, ";\n  }\n\n  .rebilly-instruments-button {\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    font-family: ").concat(STYLES_VARIABLES.fontFamily, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    padding: ").concat(STYLES_VARIABLES.formElementPadding, ";\n    box-sizing: border-box;\n    background: ").concat(STYLES_VARIABLES.primary, ";\n    color: ").concat(STYLES_VARIABLES.buttonText, ";\n    border-radius: ").concat(STYLES_VARIABLES.borderRadius, ";\n    margin: calc(").concat(STYLES_VARIABLES.spaceXXS, " + ").concat(STYLES_VARIABLES.spaceS, " / 2) 0;\n    font-weight: 500;\n    border: none;\n    width: 100%;\n    cursor: pointer;\n    min-height: 44px;\n    transition: all 0.2s ease;\n    outline: none;\n  }\n\n  .rebilly-instruments-button.rebilly-instruments-button-secondary {\n    background: ").concat(STYLES_VARIABLES.background, ";\n    box-shadow: inset 0 0 0 1px ").concat(STYLES_VARIABLES.primary, ";\n    color: ").concat(STYLES_VARIABLES.primary, ";\n  }\n\n  .rebilly-instruments-button:first-of-type {\n    margin-top: 0;\n  }\n\n  .rebilly-instruments-button:last-of-type {\n    margin-bottom: 0;\n  }\n\n  .rebilly-instruments-button:hover,\n  .rebilly-instruments-button:active {\n    background: ").concat(primaryValues.shade(20).hexString(), ";\n  }\n\n  .rebilly-instruments-button.rebilly-instruments-button-secondary:hover,\n  .rebilly-instruments-button.rebilly-instruments-button-secondary:active {\n    background: ").concat(STYLES_VARIABLES.background, ";\n  }\n\n  .rebilly-instruments-button:focus,\n  .rebilly-instruments-button:focus-visible,\n  .rebilly-instruments-button:focus-within {\n    box-shadow: 0 0 0 2px ").concat(primaryValues.tint(60).hexString(), ";\n  }\n\n  .rebilly-instruments-button:disabled {\n    opacity: 0.6;\n  }\n\n  .rebilly-instruments-button::first-letter {\n    text-transform: uppercase;\n  }\n\n  .rebilly-instruments-select-field select {\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    padding: ").concat(STYLES_VARIABLES.formElementPadding, ";\n    margin: 0;\n    border: 1px solid ").concat(textColorMuted[5].hexString(), ";\n    border-radius: ").concat(STYLES_VARIABLES.borderRadius, ";\n    background: transparent;\n    width: 100%;\n    cursor: pointer;\n    min-height: 44px;\n  }\n\n  .rebilly-instruments-input-field, \n  .rebilly-instruments-select-field {\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    position: relative;\n    margin: calc(").concat(STYLES_VARIABLES.spaceXXS, " + ").concat(STYLES_VARIABLES.spaceS, ") 0;\n  }\n\n  .rebilly-instruments-input-field label,\n  .rebilly-instruments-select-field label {\n    left: ").concat(STYLES_VARIABLES.formElementHorizontalPadding, ";\n    color: ").concat(STYLES_VARIABLES.text, ";\n    background: transparent;\n    opacity: 0;\n    position: absolute;\n    top: 22px;\n    transform: translateY(-50%);\n    transition: all 200ms;\n    cursor: text;\n    pointer-events: none;\n  }\n\n  .rebilly-instruments-select-field label {\n    opacity: 0.5;\n  }\n\n  .rebilly-instruments-input-field input {\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    padding: ").concat(STYLES_VARIABLES.formElementPadding, ";\n    min-height: ").concat(STYLES_VARIABLES.formElementMinHeight, ";\n    background: transparent;\n    box-sizing: border-box;\n    width: 100%;\n    transition: all 200ms;\n    border: 1px solid ").concat(textColorMuted[5].hexString(), ";\n    border-radius: ").concat(STYLES_VARIABLES.borderRadius, ";\n  }\n\n  .rebilly-instruments-input-field input::placeholder {\n    color: ").concat(STYLES_VARIABLES.text, ";\n    opacity: 0.5;\n  }\n\n  .rebilly-instruments-select-field select {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  .rebilly-instruments-select-field select::-ms-expand {\n    display: none;\n  }\n\n  .rebilly-instruments-input-field input:focus,\n  .rebilly-instruments-input-field input:focus-visible,\n  .rebilly-instruments-input-field input:focus-within,\n  .rebilly-instruments-select-field select:focus,\n  .rebilly-instruments-select-field select:focus-visible,\n  .rebilly-instruments-select-field select:focus-within {\n      outline: none;\n      border: 1px solid ").concat(STYLES_VARIABLES.primary, ";\n      box-shadow: 0 0 0 1px ").concat(STYLES_VARIABLES.primary, ";\n  }\n\n  .rebilly-instruments-input-field input:not(:placeholder-shown) + label,\n  .rebilly-instruments-select-field select:focus + label,\n  .rebilly-instruments-select-field label.active {\n    padding: 0 ").concat(STYLES_VARIABLES.spaceXXS, ";\n    left: calc(").concat(STYLES_VARIABLES.formElementHorizontalPadding, " - ").concat(STYLES_VARIABLES.spaceXXS, ");\n    font-size: ").concat(STYLES_VARIABLES.fontSizeSmall, ";\n    line-height: ").concat(STYLES_VARIABLES.fontSizeSmall, ";\n    color: ").concat(STYLES_VARIABLES.text, ";\n    background: ").concat(STYLES_VARIABLES.background, ";\n    font-weight: 500;\n    opacity: 1;\n    top: 0;\n  }\n\n  .rebilly-instruments-select-field::before {\n    content: '';\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    border: solid ").concat(STYLES_VARIABLES.text, ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n    -webkit-transform: rotate(45deg);\n    right: 16px;\n    top: 16px;\n  }\n\n  .rebilly-instruments-checkbox-field {\n    position: relative;\n    padding-left: calc(").concat(STYLES_VARIABLES.spaceM, " + ").concat(STYLES_VARIABLES.spaceS, ");\n    align-items: center;\n    margin: calc(").concat(STYLES_VARIABLES.spaceM, " - ").concat(STYLES_VARIABLES.spaceXXS, ") 0;\n    display: block;\n    cursor: pointer;\n  }\n\n  .rebilly-instruments-checkbox-field > * {\n    cursor: pointer;\n  }\n\n  .rebilly-instruments-checkbox-field input[type=\"checkbox\"] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n  }\n\n  .rebilly-instruments-checkbox-field .rebilly-instruments-checkbox-check {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 24px;\n    width: 24px;\n    border-radius: 4px;\n    box-shadow: inset 0 0 0 1px ").concat(textColorMuted[5].hexString(), ";\n    background-color: transparent;\n    transition: all 200ms;\n  }\n\n  .rebilly-instruments-checkbox-field .rebilly-instruments-checkbox-check:after {\n    content: '';\n    position: absolute;\n    left: 9px;\n    top: 4px;\n    opacity: 0;\n    width: 5px;\n    height: 11px;\n    border: solid ").concat(STYLES_VARIABLES.primary, ";\n    border-width: 0 2px 2px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n    transition: all 200ms;\n  }\n\n  .rebilly-instruments-checkbox-field input[type=\"checkbox\"]:checked ~ .rebilly-instruments-checkbox-check {\n    box-shadow: inset 0 0 0 2px ").concat(STYLES_VARIABLES.primary, ";\n  }\n\n  .rebilly-instruments-checkbox-field input[type=\"checkbox\"]:checked ~ .rebilly-instruments-checkbox-check:after {\n    opacity: 1;\n  }\n\n  .rebilly-instruments-checkbox-field input[type=\"checkbox\"]:focus ~ .rebilly-instruments-checkbox-check {\n    box-shadow: 0 0 0 2px ").concat(primaryValues.tint(80).hexString(), ", inset 0 0 0 1px ").concat(STYLES_VARIABLES.primary, ";\n  }\n\n  .rebilly-instruments-divider {\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    padding: ").concat(STYLES_VARIABLES.spaceM, " 0;\n    margin: 0;\n    position: relative;\n    outline: 0;\n    border: 0;\n    text-align: center;\n  }\n\n  .rebilly-instruments-divider::before {\n    background: ").concat(textColorMuted[7].hexString(), ";\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    width: 100%;\n    height: 1px;\n  }\n\n  .rebilly-instruments-divider .rebilly-instruments-divider-label {\n    color: ").concat(textColorMuted[2].hexString(), ";\n    font-weight: 500;\n    text-transform: uppercase;\n    padding: 0 ").concat(STYLES_VARIABLES.spaceS, ";\n    line-height: 14px;\n    background-color: ").concat(STYLES_VARIABLES.background, ";\n    font-size: 12px;\n    position: relative;\n    display: inline-block;\n  }\n\n  .rebilly-instruments-select-field-error select,\n  .rebilly-instruments-input-field-error input {\n    border-color: ").concat(STYLES_VARIABLES.errorText, ";\n    color: ").concat(STYLES_VARIABLES.errorText, ";\n  }\n\n  .rebilly-instruments-validation-error-wrapper,\n  .rebilly-instruments-errors {\n    margin-top: ").concat(STYLES_VARIABLES.spaceXXS, ";\n    margin-bottom: calc(").concat(STYLES_VARIABLES.spaceXXS, " + ").concat(STYLES_VARIABLES.spaceS, ");\n    padding: 0;\n    list-style: none;\n  }\n\n  .rebilly-instruments-validation-error-item,\n  .rebilly-instruments-errors li {\n    color: ").concat(STYLES_VARIABLES.errorText, ";\n    padding: 0;\n  }\n\n  .rebilly-instruments-overlay {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: rgba(0,0,0,0.5);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: #ffffff;\n    font-family: \"Helvetica Neue\";\n    font-size: 18px;\n    z-index: 9001\n  }\n\n  /* Summary */\n  .rebilly-instruments-summary-container {\n    color: ").concat(STYLES_VARIABLES.text, ";\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    font-family: ").concat(STYLES_VARIABLES.fontFamily, ";\n    background: ").concat(STYLES_VARIABLES.background, ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-align: left;\n  }\n\n  .rebilly-instruments-summary-line-item {\n    border-bottom: 1px solid ").concat(textColorMuted[7].hexString(), ";\n    padding: ").concat(STYLES_VARIABLES.spaceS, " 0;\n    display: flex;\n    align-items: center;\n    position: relative;\n  }\n\n  .rebilly-instruments-summary-line-item:first-child {\n    padding-top: 0;\n  }\n\n  .rebilly-instruments-summary-line-item-figure {\n    margin: 0 ").concat(STYLES_VARIABLES.spaceS, " 0 0;\n    flex: 0 0 auto;\n    width: 48px;\n    height: 48px;\n    border-radius: ").concat(STYLES_VARIABLES.borderRadius, ";\n    box-shadow: 0 0 0 1px ").concat(textColorMuted[7].hexString(), ";\n    overflow: hidden;\n  }\n\n  .rebilly-instruments-summary-line-item-figure img {\n    width: 100%;\n  }\n\n  .rebilly-instruments-summary-line-item-synopsis {\n    flex: 1 2 auto;\n  }\n\n  .rebilly-instruments-summary-line-item-synopsis-title {\n    margin: 0;\n    font-weight: 500;\n  }\n\n  .rebilly-instruments-summary-line-item-synopsis-description {\n    color: ").concat(textColorMuted[2].hexString(), ";\n    margin: 0;\n    font-size: 14px;\n    line-height: 14px;\n  }\n\n  .rebilly-instruments-summary-line-item-price-breakdown {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: ").concat(textColorMuted[2].hexString(), ";\n    margin: 0 ").concat(STYLES_VARIABLES.spaceS, ";\n  }\n\n  .rebilly-instruments-summary-line-item-amount {\n    font-weight: 500;\n  }\n\n  .rebilly-instruments-summary-breakdown table {\n    width: 100%;\n    margin: ").concat(STYLES_VARIABLES.spaceXS, " 0;\n  }\n\n  .rebilly-instruments-summary-breakdown table colgroup col:first-child {\n    width: 85%;\n  }\n\n  .rebilly-instruments-summary-breakdown table colgroup col {\n    width: 15%;\n  }\n\n  .rebilly-instruments-summary-breakdown table tr td {\n    text-align: right;\n  }\n\n  .rebilly-instruments-summary-breakdown table tr td:first-child {\n    padding-right: ").concat(STYLES_VARIABLES.spaceS, ";\n    font-weight: 500;\n  }\n\n  .rebilly-instruments-summary-breakdown-total {\n    padding-top: ").concat(STYLES_VARIABLES.spaceXS, ";\n    display: flex;\n    border-top: 1px solid ").concat(textColorMuted[7].hexString(), ";\n    align-items: center;\n  }\n\n  .rebilly-instruments-summary-breakdown-total p {\n    margin: ").concat(STYLES_VARIABLES.spaceS, " 0;\n  }\n\n  .rebilly-instruments-summary-breakdown-total-amount {\n      flex: 1 2 80%;\n      font-size: 24px;\n      font-weight: 500;\n      text-align: right;\n      font-weight: bold;\n  }\n\n  .rebilly-instruments-summary-breakdown-total-amount-currency {\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    font-weight: normal;\n    color: ").concat(textColorMuted[2].hexString(), ";\n    margin-right: ").concat(STYLES_VARIABLES.spaceS, ";\n  }\n\n  /* Confirmation */\n  .rebilly-instruments-confirmation {\n    color: ").concat(STYLES_VARIABLES.text, ";\n    background: ").concat(STYLES_VARIABLES.background, ";\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    font-family: ").concat(STYLES_VARIABLES.fontFamily, ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-align: left;\n    transition: all 200ms;\n    padding: 2px;\n  }\n\n  .rebilly-instruments-confirmation a {\n    color: ").concat(STYLES_VARIABLES.primary, ";\n    cursor: pointer;\n  }\n\n  .rebilly-instruments-confirmation a:hover {\n    text-decoration: none;\n  }\n\n  .rebilly-instruments-confirmation a svg {\n    fill: ").concat(STYLES_VARIABLES.primary, ";\n  }\n\n  .rebilly-instruments-confirmation-go-back {\n    display: inline-flex;\n    margin-bottom: ").concat(STYLES_VARIABLES.spaceM, ";\n  }\n\n  .rebilly-instruments-confirmation h2 {\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    margin: 0 0 ").concat(STYLES_VARIABLES.spaceS, ";\n    font-weight: 500;\n  }\n\n  .rebilly-instruments-confirmation-addresses-title {\n    display: flex;\n    justify-content: flex-start;\n  }\n\n  .rebilly-instruments-confirmation-addresses-title a {\n    margin-left: ").concat(STYLES_VARIABLES.spaceS, ";\n    font-weight: normal;\n  }\n\n  .rebilly-instruments-confirmation address {\n    margin: 0 0 ").concat(STYLES_VARIABLES.spaceM, ";\n    color: ").concat(textColorMuted[2].hexString(), ";\n    font-style: normal;\n  }\n\n  .rebilly-instruments-confirmation-address-actions {\n    display: flex;\n  }\n\n  .rebilly-instruments-confirmation-address-actions :first-child {\n    margin: 0 ").concat(STYLES_VARIABLES.spaceXS, " 0 0;\n  }\n\n  .rebilly-instruments-confirmation-address-actions :last-child {\n    margin: 0 0 0 ").concat(STYLES_VARIABLES.spaceXS, ";\n  }\n\n  .rebilly-instruments-confirm-payment-method {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 26px;\n    margin: 0 0 ").concat(STYLES_VARIABLES.spaceL, ";\n  }\n\n  .rebilly-instruments-confirm-payment-method figure {\n    margin: 0 ").concat(STYLES_VARIABLES.spaceXXS, " 0 0;\n    height: 26px;\n    padding: 0;\n  }\n\n  .rebilly-instruments-confirm-payment-method span {\n    display: inline-block;\n    margin: 0 0 0 ").concat(STYLES_VARIABLES.spaceS, ";\n  }\n\n  .rebilly-instruments-confirm-payment-method figure img {\n    width: 42px;\n    border-radius: ").concat(STYLES_VARIABLES.borderRadius, ";\n  }\n\n  .rebilly-instruments-confirm-payment-method-exp {\n    color: ").concat(textColorMuted[2].hexString(), ";\n  }\n\n  /* Results */\n  .rebilly-instruments-results {\n    color: ").concat(STYLES_VARIABLES.text, ";\n    background: ").concat(STYLES_VARIABLES.background, ";\n    font-size: ").concat(STYLES_VARIABLES.fontSize, ";\n    line-height: ").concat(STYLES_VARIABLES.lineHeight, ";\n    font-family: ").concat(STYLES_VARIABLES.fontFamily, ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-align: left;\n    transition: all 200ms;\n  }\n\n  .rebilly-instruments-results h1 {\n    font-size: calc(").concat(STYLES_VARIABLES.fontSize, " * 1.5);\n    line-height: calc(").concat(STYLES_VARIABLES.lineHeight, " * 1.5);\n    text-align: center;\n    margin: 0;\n    font-weight: 500;\n  }\n\n  .rebilly-instruments-results-icon {\n    width: 160px;\n    margin: 0 auto ").concat(STYLES_VARIABLES.spaceM, " auto;\n    display: block;\n  }\n\n  .rebilly-instruments-results-icon g {\n    stroke: ").concat(STYLES_VARIABLES.primary, ";\n  }\n\n  .rebilly-instruments-results-icon.is-error g,\n  .rebilly-instruments-results-icon.is-error g {\n    stroke: ").concat(STYLES_VARIABLES.errorText, ";\n  }\n\n  .rebilly-instruments-results-icon path {\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .rebilly-instruments-results-icon path.circle {\n    stroke-dasharray: 350;\n    stroke-dashoffset: 0;\n    animation: 0.6s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;\n  }\n\n  .rebilly-instruments-results-icon path.mark {\n    stroke-dasharray: 350;\n    stroke-dashoffset: 0;\n    animation: 1s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;\n  }\n\n  @keyframes rebillyDashResultIcon {\n    from {\n        stroke-dashoffset: 350;\n    }\n    to {\n        stroke-dashoffset: 0;\n    }\n  }\n");
-};
-
-exports.BASE_STYLE = BASE_STYLE;

package/dist/styles/flat-theme-object.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.flatThemeObject = flatThemeObject;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-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; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function flatThemeObject(obj) {
-  return Object.entries(obj).reduce(function (acc, _ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        val = _ref2[1];
-
-    var isObject = _typeof(val) === 'object';
-
-    if (isObject) {
-      return _objectSpread(_objectSpread({}, acc), flatThemeObject(val));
-    }
-
-    return _objectSpread(_defineProperty({}, key, val), acc);
-  }, {});
-}

package/dist/styles/framepay.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FRAMEPAY_STYLE = void 0;
-
-var _shadeTintValuesHelper = require("./shade-tint-values-helper");
-
-var FRAMEPAY_STYLE = function FRAMEPAY_STYLE(STYLES_VARIABLES) {
-  var textColorMuted = (0, _shadeTintValuesHelper.getMutedColor)(STYLES_VARIABLES.text, STYLES_VARIABLES.background);
-  return "\n    .rebilly-instruments-framepay-wrapper .rebilly-framepay {\n      box-shadow: none; \n      min-height: ".concat(STYLES_VARIABLES.formElementMinHeight, ";\n      border: 1px solid ").concat(textColorMuted[5].hexString(), ";\n      margin-bottom: 0;\n    }\n\n    .rebilly-instruments-framepay-wrapper .rebilly-framepay.rebilly-framepay-digital-wallet {\n      min-height: auto;\n      border: none;\n      margin: 0;\n    }\n\n    .rebilly-instruments-framepay-wrapper .rebilly-framepay.rebilly-framepay-focus {\n      border: 1px solid ").concat(STYLES_VARIABLES.primary, ";\n      box-shadow: 0 0 0 1px ").concat(STYLES_VARIABLES.primary, ";\n    }\n\n    .rebilly-instruments-framepay-wrapper .rebilly-framepay.rebilly-framepay-invalid {\n      border: 1px solid ").concat(STYLES_VARIABLES.errorText, ";\n      box-shadow: none;\n    }\n  ");
-};
-
-exports.FRAMEPAY_STYLE = FRAMEPAY_STYLE;

package/dist/styles/main.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MAIN_STYLE = void 0;
-
-var _styleVariables = require("./style-variables");
-
-var _baseStyles = require("./base-styles");
-
-var _paymentCard = require("./payment-card");
-
-var _framepay = require("./framepay");
-
-var _shadeTintValuesHelper = require("./shade-tint-values-helper");
-
-var MAIN_STYLE = function MAIN_STYLE(styleOverrides) {
-  var STYLES = (0, _styleVariables.STYLES_VARIABLES)(styleOverrides);
-  var primaryValues = (0, _shadeTintValuesHelper.colorValues)(STYLES.primary);
-  var textColorMuted = (0, _shadeTintValuesHelper.getMutedColor)(STYLES.text, STYLES.background);
-  return "\n    ".concat((0, _baseStyles.BASE_STYLE)(STYLES, primaryValues, textColorMuted), "\n    ").concat((0, _paymentCard.PAYMENT_CARD_STYLE)(STYLES), "\n    ").concat((0, _framepay.FRAMEPAY_STYLE)(STYLES), "\n  ");
-};
-
-exports.MAIN_STYLE = MAIN_STYLE;

package/dist/styles/payment-card.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PAYMENT_CARD_STYLE = void 0;
-
-var PAYMENT_CARD_STYLE = function PAYMENT_CARD_STYLE(STYLES_VARIABLES) {
-  return "\n  .rebilly-instruments-payment-card-brands {\n    display: inline-flex;\n    width: 100%;\n    justify-content: flex-end;\n    margin-top: ".concat(STYLES_VARIABLES.spaceS, " \n  }\n\n  .rebilly-instruments-payment-card-brands figure {\n    margin: 0 0 0 ").concat(STYLES_VARIABLES.spaceXXS, ";\n    padding: 0;\n  }\n\n  .rebilly-instruments-payment-card-brands figure img {\n    width: 42px;\n    border-radius: ").concat(STYLES_VARIABLES.borderRadius, ";\n  }\n");
-};
-
-exports.PAYMENT_CARD_STYLE = PAYMENT_CARD_STYLE;

package/dist/styles/shade-tint-values-helper.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getMutedColor = getMutedColor;
-exports.colorValues = void 0;
-
-var _values = _interopRequireDefault(require("values.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var colorValues = function colorValues(color) {
-  return new _values["default"](color);
-};
-
-exports.colorValues = colorValues;
-
-function getMutedColor(color, background) {
-  var backgroundBrightness = new _values["default"](background).getBrightness();
-  var values = new _values["default"](color);
-
-  if (backgroundBrightness > 30) {
-    return values.tints();
-  }
-
-  return values.shades();
-}

package/dist/styles/style-variables.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.STYLES_VARIABLES = void 0;
-
-var _lodash = require("lodash");
-
-var _flatThemeObject = require("./flat-theme-object");
-
-var STYLES_VARIABLES = function STYLES_VARIABLES() {
-  var overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var flatOverrides = (0, _flatThemeObject.flatThemeObject)(overrides);
-  var VARIABLES = {
-    // Base variables
-    fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
-    background: '#ffffff',
-    primary: '#0044d4',
-    error: '#ffe4e1',
-    buttonText: '#ffffff',
-    errorText: '#cd5c5c',
-    text: '#0D2B3E',
-    fontSize: '16px',
-    fontSizeSmall: '12px',
-    lineHeight: '24px',
-    borderRadius: '4px',
-    formElementPadding: '8px 16px',
-    formElementVerticalPadding: '8px',
-    formElementHorizontalPadding: '16px',
-    formElementMinHeight: '44px',
-    spaceXXS: '4px',
-    spaceXS: '6px',
-    spaceS: '12px',
-    spaceM: '24px',
-    spaceL: '48px',
-    spaceXL: '96px',
-    spaceXXL: '112px'
-  };
-  return (0, _lodash.merge)(VARIABLES, flatOverrides);
-};
-
-exports.STYLES_VARIABLES = STYLES_VARIABLES;

package/dist/utils/camel-case.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = camelCase;
-
-function camelCase(str) {
-  return str.toLowerCase().replace(/[\s|\-|_]\w/g, function (t) {
-    return t.toUpperCase().trim();
-  });
-}

package/dist/utils/kebab-case.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = kebabCase;
-
-function kebabCase(str) {
-  return str.trim().toLowerCase().replace(/\s/g, '-');
-}

package/dist/utils/un-kebab-case.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = unKebabCase;
-
-function unKebabCase(particle) {
-  return (particle || '').split('-').join(' ');
-}

package/src/components/confirmation.js

@@ -1,77 +0,0 @@
-import zoid from 'zoid';
-import { MAIN_STYLE } from '../styles/main';
-import {dispatch, containerTemplate} from "./form/zoid-helpers"
-
-export const baseConfirmationHTML = `
-  <div class="rebilly-instruments-confirmation"></div>
-`;
-
-function confirmPurchase(instrument) {
-  this.purchase(instrument);
-}
-
-export function MountConfirmation({
-  instrument,
-}) {
-  this.form.innerHTML += baseConfirmationHTML;
-  this.loader.startLoading({id: 'confirmation'});
-  const CONFIRMATION_CONTAINER = document.querySelector('.rebilly-instruments-confirmation');
-  
-  this.form.querySelectorAll(`:not(.rebilly-instruments-confirmation)`).forEach(element => {
-    if (!element.classList.contains('rebilly-instruments-loader')
-      && !element.classList.contains('rebilly-instruments-loader-spinner')) {
-      element.remove();
-    }
-  });
-
-  const {paymentMethodsUrl} = this.options._computed;
-  const zoidCreateConfig = {
-    tag: 'rebilly-instruments-confirmation',
-    url: `${paymentMethodsUrl}/confirmation`,
-    defaultContext: 'iframe',
-    dimensions: {
-      width: '100%',
-      height: '100%'
-    },
-  };
-  const zoidMountConfig = {
-    configs: this.configs,
-    options: this.options,
-    MAIN_STYLE: MAIN_STYLE(this.configs?.theme || {}),
-    instrument,
-    // eslint-disable-next-line no-shadow
-    confirmPurchase: (instrument) => {
-      confirmPurchase.call(this, instrument);
-    },
-    onFrameResize: (height) => {
-      CONFIRMATION_CONTAINER.style.height = height;
-    },
-    onLoading: (id) => {
-      setTimeout(() => {
-        this.loader.stopLoading({id});
-      }, 1);
-    },
-    back: () => {
-      CONFIRMATION_CONTAINER.remove();
-      this._mountForm(this.formOptions);
-    },
-    showBackDrop: ({ doc, uid, focus }) => {
-      const container = containerTemplate.call(this, { doc, uid, focus });
-      document.body.append(container);
-    },
-    dispatch
-  };
-
-  if(!this.zoidComponents.confirmation) {
-    this.zoidComponents.confirmation = zoid.create(zoidCreateConfig);
-  }
-  this.zoidComponents.confirmation({
-    RebillyInstruments: zoidMountConfig,
-    onClose() {
-      const backDropContainer = document.querySelector('.rebilly-instruments-overlay');
-      if (backDropContainer) {
-        backDropContainer.remove();
-      }
-    }
-  }).render('.rebilly-instruments-confirmation');
-}

package/src/components/form/__snapshots__/form.spec.js.snap

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Summary component should inject the proper HTML for express methods 1`] = `
-<form
-  class="rebilly-instruments-form"
->
-  
-    
-  <div
-    class="rebilly-instruments-form-express compact"
-  >
-    
-      
-    <span
-      class="rebilly-instruments-form-express-label"
-      data-rebilly-i18n="form.expressCheckout"
-    >
-      Express checkout
-    </span>
-    
-    
-  </div>
-  
-    
-  <div
-    class="rebilly-instruments-divider"
-    style="display: block;"
-  >
-    
-      
-    <span
-      class="rebilly-instruments-divider-label"
-      data-rebilly-i18n="form.or"
-    >
-      Or
-    </span>
-    
-    
-  </div>
-  
-  
-</form>
-`;

package/src/components/form/form.js

@@ -1,88 +0,0 @@
-/* eslint-disable no-undef */
-import { getPaymentMethods } from './get-payment-methods';
-import { mountExpressPaymentMethods } from './mount-express-payment-methods';
-import { processDigitalWalletOptions } from './process-digital-wallet-options';
-import { MountMethodSelector } from './method-selector';
-import Events from '../../events';
-
-export const baseFormHTML = (compactExpressInstruments) => `
-  <form class="rebilly-instruments-form">
-    <div class="rebilly-instruments-form-express ${compactExpressInstruments ? 'compact' : ''}">
-      <span data-rebilly-i18n="form.expressCheckout" class="rebilly-instruments-form-express-label">Express checkout</span>
-    </div>
-    <div class="rebilly-instruments-divider">
-      <span class="rebilly-instruments-divider-label" data-rebilly-i18n="form.or">Or</span>
-    </div>
-  </form>
-`;
-
-
-export function MountForm({readyToPay, summary, plans, products} = {}) {
-  const {EXPRESS_METHODS, METHODS} = getPaymentMethods.call(this, readyToPay);
-  const EXPRESS_METHODS_CONTAINER = document.querySelector('.rebilly-instruments-form-express');
-
-  this.form.innerHTML += baseFormHTML(this.options.paymentInstruments.compactExpressInstruments);
-  const METHODS_DIVIDER = document.querySelector('.rebilly-instruments-divider');
-
-  METHODS_DIVIDER.style.display = METHODS.length && EXPRESS_METHODS.length ? 'block' : 'none';
-
-  const digitalWallet = {
-    transactionData: {
-      amount: summary.total,
-      currency: summary.currency,
-      countryCode: this.options.intent.countryCode,
-      label: this.configs.websiteId
-    },
-    ...processDigitalWalletOptions(this.options)
-  }
-
-  this.configs = {
-    ...this.configs,
-    digitalWallet
-  };
-
-  function initializeFramepay() {
-    if (Rebilly.initialized) {
-      mountExpressPaymentMethods.call(this, {
-        EXPRESS_METHODS,
-        EXPRESS_METHODS_CONTAINER,
-      });
-    } else {
-      Rebilly.initialize({
-        publishableKey: this.configs.publishableKey,
-        organizationId: this.configs.organizationId,
-        digitalWallet,
-      });
-  
-    Rebilly.on('ready', () => {
-      mountExpressPaymentMethods.call(this, {
-        EXPRESS_METHODS,
-        EXPRESS_METHODS_CONTAINER,
-      })
-    });
-
-    Rebilly.on('token-ready', (data) => {
-      Events.instrumentReady.dispatch(data);
-    });
-    }
-  }
-
-  if (METHODS.length) {
-    this.form.innerHTML += `<div class="rebilly-instruments-methods"></div>`;
-    const METHODS_CONTAINER = document.querySelector('.rebilly-instruments-methods');
-    MountMethodSelector.call(this, {
-      METHODS_CONTAINER,
-      METHODS,
-      plans,
-      products
-    });
-  }
-
-  if (window.Rebilly && EXPRESS_METHODS.length) {
-    initializeFramepay.call(this);
-  }
-
-  this.translate.translateItems();
-
-  this.loader.stopLoading({id: 'initForm'});
-};

package/src/components/form/form.spec.js

@@ -1,109 +0,0 @@
-import SummaryModel from '@/storefront/models/summary-model';
-import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
-import { Loader } from '../../loader';
-import { Translate } from '../../i18n';
-import { MountForm } from './form';
-
-describe('Summary component', () => {
-  let formElement;
-  beforeEach(() => {
-    formElement = document.createElement('div');
-    document.body.append(formElement);
-  })
-
-  class TestMountFormInstance {
-    constructor({
-      configs = {},
-      options = {},
-      form = formElement,
-      loader = new Loader(),
-      translate = new Translate(),
-      zoidComponents = {},
-    } = {}) {
-      this.configs = configs;
-      this.options = options;
-      this.form = form;
-      this.loader = loader;
-      this.translate = translate;
-      this.zoidComponents = zoidComponents;
-    }
-
-    mountForm(readyToPayAndSummary, ...args) {
-      this.loader.DOM.form = this.form;
-      return MountForm.apply(this, args.concat(readyToPayAndSummary));
-    }
-  }
-
-  const options = {
-    intent: {
-      countryCode: 'US',
-      items: [
-        {
-          planId: 'my-awesome-product',
-          quantity: 1,
-          thumbnail: '',
-        },
-        {
-          planId: 'awesome-t-shirt',
-          quantity: 2,
-          thumbnail: '',
-        }
-      ]
-    },
-    paymentInstruments: {
-      compactExpressInstruments: true
-    },
-  };
-
-  const summaryData = new SummaryModel({
-    currency: "USD",
-    lineItems: [{
-      type: "debit",
-      description: "My Awesome Product",
-      unitPrice: 30,
-      quantity: 1,
-      price: 30,
-      productId: "my-awesome-product",
-      planId: "my-awesome-product"
-    }, {
-      type: "debit",
-      description: "Awesome T-Shirt",
-      unitPrice: 20,
-      quantity: 2,
-      price: 40,
-      productId: "my-app",
-      planId: "awesome-t-shirt"
-    }],
-    subtotalAmount: 70,
-    taxAmount: 0,
-    shippingAmount: 0,
-    discountsAmount: 0,
-    total: 70
-  });
-
-  const readyToPayData = [
-    new ReadyToPayModel(),
-    new ReadyToPayModel(
-      {
-        method: 'payment-card',
-        feature: {
-          name: 'Google Pay'
-        },
-        brands: ['Visa'],
-        filters: []
-      }
-    )
-  ];
-
-  const configs = {
-    websiteId: 'test-website-id'
-  };
-
-  it('should inject the proper HTML for express methods', () => {
-    const mountSummaryInstance = new TestMountFormInstance({configs, options});
-    mountSummaryInstance.mountForm({summary: summaryData, readyToPay: readyToPayData});
-
-    const form = document.querySelector('.rebilly-instruments-form');
-    expect(form).toMatchSnapshot();
-  });
-})

package/src/components/form/get-payment-methods.js

@@ -1,32 +0,0 @@
-/* eslint-disable no-unused-expressions, arrow-body-style */
-const SUPPORTED_EXPRESS_METHODS = [
-  'Google Pay',
-  'Apple Pay',
-  'paypal'
-];
-
-const isExpressMethod = ({method, feature}) => {
-  return SUPPORTED_EXPRESS_METHODS.includes(method)
-    || SUPPORTED_EXPRESS_METHODS.includes(feature?.name);
-}
-
-export function getPaymentMethods (methods) {
-    const result = {
-      EXPRESS_METHODS: [],
-      METHODS: [],
-    };
-
-    methods.forEach(method => {
-      if (isExpressMethod(method)) {
-        // Add loader entry per express method
-        this.loader.startLoading({id: `${method.method}-express`});
-        result.EXPRESS_METHODS.push(method)
-      } else {
-        // Add loader entry per method
-        this.loader.startLoading({id: method.method});
-        result.METHODS.push(method);
-      }
-    })
-
-    return result;
-}