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

package/src/style/components/forms/radio.js

@@ -0,0 +1,80 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the radio component.
+// -----------------------------------------------------------------------------
+export const radio = () => `
+  /**
+  * Checkbox
+  */
+  .rebilly-instruments-form-field-radio {
+    position: relative;
+    opacity: 1;
+    align-items: center;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: start;
+    cursor: pointer;
+    transform: none;
+  }
+
+  .rebilly-instruments-form-field-radio > * {
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  .rebilly-instruments-form-field-radio > span {
+    position: relative;
+    top: 0;
+    left: 0;
+    height: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    width: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    min-width: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorMutedBorder);
+    margin-right: var(--rebilly-spacings-s);
+    background-color: transparent;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-radio > span:after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    opacity: 0;
+    width: calc(var(--rebilly-spacings-xs) + 4px);
+    height: calc(var(--rebilly-spacings-xs) + 4px);
+    border-radius: 50%;
+    background: var(--rebilly-colorMutedBorder);
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-radio:hover > span:after {
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:checked ~ span {
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:checked ~ span:after {
+    background: var(--rebilly-colorPrimary);
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:focus ~ span {
+    opacity: 1;
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:disabled ~ span {
+    opacity: 0.6;
+  }
+`;

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

@@ -0,0 +1,86 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the select component.
+// -----------------------------------------------------------------------------
+export const select = () => `
+  /**
+  * Select
+  */
+  .rebilly-instruments-form-field-select {
+    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;
+    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;
+  }
+
+  .rebilly-instruments-form-field-select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  .rebilly-instruments-form-field-select::-ms-expand { display: none; }
+
+  .rebilly-instruments-form-field-select-arrow {
+    border: solid var(--rebilly-inputColorText);
+    position: absolute;
+    width: var(--rebilly-spacings-xs);
+    height: var(--rebilly-spacings-xs);
+    border-width: 0 2px 2px 0;
+    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/src/style/components/forms/validation.js

@@ -0,0 +1,72 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the form validations.
+// -----------------------------------------------------------------------------
+export 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 {
+    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: var(--rebilly-spacings-2xs);
+    margin-bottom: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .rebilly-instruments-form-field-error-wrapper > li {
+    color: var(--rebilly-colorDanger);
+    padding: 0;
+  }
+`;

package/src/style/components/icons.js

@@ -0,0 +1,13 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the icons component.
+// -----------------------------------------------------------------------------
+export const icons = () => `
+  /**
+  * Icons
+  */
+  .rebilly-instruments-icon {
+    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/src/style/components/index.js

@@ -0,0 +1,39 @@
+import { expressMethods, methods } from './methods';
+import { form } from './forms/form';
+import { checkbox } from './forms/checkbox';
+import { radio } from './forms/radio';
+import { field } from './forms/field';
+import { input } from './forms/input';
+import { label } from './forms/label';
+import { select } from './forms/select';
+import { validation } from './forms/validation';
+import { button } from './button';
+import { divider } from './divider';
+import { loader } from './loader';
+import { icons } from './icons';
+import { address } from './address';
+import { overlay } from './overlay';
+import { accordion } from './accordion';
+
+// Order of components matters for style cascade
+export const components = (theme) => `
+  /* Components
+  ------------------------------------------------------------ */
+  ${expressMethods(theme)}
+  ${methods()}
+  ${form(theme)}
+  ${field(theme)}
+  ${input(theme)}
+  ${select(theme)}
+  ${label(theme)}
+  ${checkbox()}
+  ${radio()}
+  ${validation(theme)}
+  ${button(theme)}
+  ${divider(theme)}
+  ${loader(theme)}
+  ${icons(theme)}
+  ${address(theme)}
+  ${overlay(theme)}
+  ${accordion()}
+`;

package/src/style/components/loader.js

@@ -0,0 +1,41 @@
+import { lighten } from '../utils/color-values';
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the loader component.
+// -----------------------------------------------------------------------------
+export const loader = (theme) => `
+  /**
+  * Loader
+  */
+  .rebilly-instruments-loader {
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: var(--rebilly-colorBackground);
+    z-index: 1000;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-loader.is-active {
+    display: flex;
+  }
+
+  .rebilly-instruments-loader-spinner {
+    border: 4px solid ${lighten(theme.colorPrimary, 80)};
+    border-top: 4px solid var(--rebilly-colorPrimary);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 0.5s ease infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+`;

package/src/style/components/methods.js

@@ -0,0 +1,97 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the methods component.
+// -----------------------------------------------------------------------------
+export const expressMethods = () => `
+  /**
+   * Express methods
+   */
+
+  @keyframes rebillyExpressShine {
+    to {
+      background-position-x: -200%;
+    }
+  }
+
+  .rebilly-instruments-express-methods.is-compact {
+    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;
+  }
+
+  .rebilly-instruments-express-methods .rebilly-instruments-iframe {
+    display: block;
+    margin-bottom: 0;
+    height: 44px;
+  }
+
+  .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > * {
+    border-radius: 6px;
+    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;
+  }
+
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
+    flex: 1 1 0px;
+    max-width: 260px;
+    margin: 0 var(--rebilly-spacings-xs);
+  }
+  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:first-child {
+    margin-left: 0;
+  }
+  .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;
+    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;
+    white-space: nowrap;
+  }
+
+  @media (max-width: 600px) {
+    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container  {
+      flex-direction: column;
+    }
+    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
+      max-width: 100%;
+      margin: 0 0 var(--rebilly-spacings-s);
+    }
+    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
+      margin: 0;
+    }
+  }
+`;
+
+export const methods = () => `
+  /**
+  * Methods
+  */
+
+  .rebilly-instruments-methods {}
+`;

package/src/style/components/overlay.js

@@ -0,0 +1,24 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the overlay component.
+// -----------------------------------------------------------------------------
+export const overlay = () => `
+  /**
+  * Overlay
+  */
+  .rebilly-instruments-overlay {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    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/src/style/helpers/index.js

@@ -0,0 +1,54 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to helpers.
+// -----------------------------------------------------------------------------
+
+export 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: 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 }
+
+  .rebilly-instruments-display-flex { display: flex!important }
+  .rebilly-instruments-align-items-center { align-items: center!important }
+`;

package/src/style/index.js

@@ -1,11 +1,31 @@
+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 { vars } from './base';
+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';
 
-export const mainStyleVars = (themeOverride) => {
+export const mainStyle = async (themeOverride) => {
   const resolvedTheme = new Theme(themeOverride).build();
+
   const style = `
-    ${vars(resolvedTheme)}
+    ${base(resolvedTheme)}
+    ${components(resolvedTheme)}
+    ${views(resolvedTheme)}
+    ${paymentInstruments(resolvedTheme)}
+    ${framepayStyle(resolvedTheme)}
+    ${postmateStyle(resolvedTheme)}
+    ${helpers(resolvedTheme)}
   `;
 
-  return style;
+  return postcss([removeEmptyAndNull, autoprefixer(browserslist)])
+    .process(style, { from: undefined })
+    .then((result) => result.css);
 };

package/src/style/payment-instruments/content.js

@@ -0,0 +1,8 @@
+export const methodContent = () => `
+  /**
+  * Content
+  */
+   .rebilly-instruments-method-content {
+    padding: 2px;
+  }
+`;

package/src/style/payment-instruments/index.js

@@ -0,0 +1,14 @@
+import { methodContent } from './content';
+import { paymentCard } from './payment-card';
+import { paymentInstrumentList } from './payment-instrument-list';
+import { paymentInstrument } from './payment-instrument';
+
+// Order of components matters for style cascade
+export const paymentInstruments = (theme) => `
+  /* Payment instruments
+  ------------------------------------------------------------ */
+  ${methodContent()}
+  ${paymentCard(theme)}
+  ${paymentInstrument()}
+  ${paymentInstrumentList()}
+`;

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

@@ -0,0 +1,27 @@
+export const paymentCard = () => `
+  /**
+  * Payment card
+  */
+  .rebilly-instruments-payment-card-brands {
+    display: inline-flex;
+    width: 100%;
+    justify-content: flex-end;
+    margin-top: var(--rebilly-spacings-s);
+  }
+
+  .rebilly-instruments-payment-card-brands figure {
+    margin: 0 0 0 var(--rebilly-spacings-2xs);
+    padding: 0;
+    height: 26px;
+  }
+
+  .rebilly-instruments-payment-card-brands figure img {
+    width: auto;
+    height: 100%;
+    border-radius: 4px;
+  }
+
+  .rebilly-instruments-modal-container.rebilly-instruments-payment-card {
+    max-width: 600px;
+  }
+`;

package/src/style/payment-instruments/payment-instrument-list.js

@@ -0,0 +1,44 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the payment instrument list component.
+// -----------------------------------------------------------------------------
+export const paymentInstrumentList = () => `
+  .rebilly-instruments-payment-instrument-list {
+    margin: 0;
+    padding: 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list > li {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    list-style-type: none;
+    padding: var(--rebilly-spacings-xs) 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list > li:first-child {
+    padding-top: 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list > li:last-child {
+    padding-bottom: 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list > li + li {
+    border-top: 1px solid var(--rebilly-colorMutedBorder);
+  }
+
+  .rebilly-instruments-payment-instrument-list.is-relaxed > li {
+    min-height: var(--rebilly-spacings-form-element-min-height);
+  }
+
+  .rebilly-instruments-payment-instrument-list .rebilly-instruments-form-field {
+    width: 100%;
+  }
+
+  .rebilly-instruments-payment-instrument-list > li .rebilly-instruments-payment-instrument-list-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+`;