@rebilly/instruments 3.1.4-beta.0 → 3.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.1.4-beta.0",
+  "version": "3.3.0-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
@@ -18,6 +18,7 @@
     "@rebilly/risk-data-collector": "^2.0.1",
     "autoprefixer": "^10.3.4",
     "css": "^3.0.0",
+    "jwt-decode": "^3.1.2",
     "lodash.camelcase": "^4.3.0",
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",

package/src/functions/mount/fetch-data.js

@@ -142,9 +142,19 @@ export async function fetchData({
       state.options.items ? fetchSummary({ data: summaryPayload, state }) : null
     ]);
 
-    const plans = await fetchPlans({ state });
-    state.data.plans = plans;
-    const products = await fetchProducts({ state });
+    let plans = null;
+    let products = null;
+    try {
+      plans = await fetchPlans({ state });
+      state.data.plans = plans;
+    } catch(e) {
+      plans = [];
+    }
+    try {
+      products = await fetchProducts({ state });
+    } catch (e) {
+      products = [];
+    }
 
     return new DataInstance({
       state,

package/src/functions/mount/index.js

@@ -67,7 +67,7 @@ import setupUserFlow from './setup-user-flow';
  * @param {string | HTMLElement} options.summary - The CSS class or HTML element were the summary will be mounted.
  * @param {Item[]} options.items - Which plans the customer is purchasing.
  * @param {string} options.invoiceId - The Rebilly id of the invoice used for purchasing.
- * @param {string} options.customerJwt - The customer token to access the invoice.
+ * @param {string} options.jwt - The customer token to access the invoice.
  * @param {string} [options.countryCode=USD] - The country code for the transaction
  * @param {PaymentInstruments} options.paymentInstruments - settings for various payment instruments
  * @param {Features} options.features - flags to enable and disable different features
@@ -92,15 +92,22 @@ export async function mount({
     state.loader.startLoading({ id: 'initForm' });
 
     // Setup state
-    state.storefront = setupStorefront({ options });
     state.options = setupOptions({ options });
+    state.storefront = setupStorefront({ options });
     state.mainStyle = await setupStyles({ options });
     state.data = await fetchData({ state });
+
     state.options.themeFramepay = await setupFramepayTheme({ state, options });
     state.i18n = setupI18n({ state });
 
     setupFramepay({ state });
 
+    // Update state options from data
+    if ((!state.options.websiteId) && state.data.transaction?.websiteId) {
+      state.options.websiteId = state.data.transaction.websiteId;
+    } else if ((!state.options.websiteId) && state.data.invoice?.websiteId) {
+      state.options.websiteId = state.data.invoice.websiteId;
+    }
     if (state.data.transaction && state.data.transaction?.type === 'setup') {
       state.options.transactionType = 'setup';
     }

package/src/functions/mount/mount.spec.js

@@ -69,4 +69,24 @@ describe('RebillyInstruments instance', () => {
     );
     expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
   });
+
+  it('should mount with JWT pruchase data', async () => {
+    // Use https://www.jwt.io to help encode and decode JWT
+    const jwt = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMGYzNWEzYy03N2M0LTQ0NDItOWFhNC03ODA5NDA2NzBjN2IiLCJleHAiOjE2NzM2NDk0ODcsImlhdCI6MTY0MjExMDczOS4zMjYyNDQsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsidGVzdC1vcmdhbml6YXRpb24tZCJdLCJ0cmFuc2FjdGlvbklkIjpbInRlc3QtdHJhbnNhY3Rpb24taWQiXX0sInBlcm1pc3Npb25zIjpbMV19XSwiY2xhaW1zIjp7InRyYW5zYWN0aW9uSWQiOiJ0ZXN0LXRyYW5zYWN0aW9uLWlkIn0sIm1lcmNoYW50IjoidGVzdC1vcmdhbml6YXRpb24taWQiLCJjdXN0b21lciI6eyJpZCI6InRlc3QtY3VzdG9tZXItaWQiLCJuYW1lIjoiVGVzdGVyIFRlc3RlcnNvbiIsImNyZWF0ZWRUaW1lIjoiMjAyMi0wMS0xNFQwMDowMDowMCswMDowMCJ9fQ.h4voW-UvXzXRm1JlxkN8cNHhQ_IIPSWWN9BANfBWEHQ`;
+
+    const options = {
+      form: '.form-selector',
+      summary: '.summary-selector',
+      jwt,
+    };
+
+    const instance = await RenderMockRebillyInstruments(options);
+
+    expect(instance.state.options).toEqual(
+      expect.objectContaining({
+        transactionId: 'test-transaction-id',
+        organizationId: 'test-organization-id'
+      })
+    );
+  });
 });

package/src/functions/mount/setup-framepay-theme.js

@@ -48,33 +48,56 @@ export default async ({
   const cssAst = css.parse(resolvedCss);
 
   const cssSelectors = {
-    base: '.rebilly-instruments-form-field-input',
-    baseHover: '.rebilly-instruments-form-field-input:hover',
-    baseFocus: '.rebilly-instruments-form-field-input:focus',
-    basePlaceholder: '.rebilly-instruments-form-field-input::placeholder',
-    baseSelection: '.rebilly-instruments-form-field-input::selection',
-
-    invalid: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input',
-    invalidHover: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:hover',
-    invalidFocus: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:focus',
-    invalidPlaceholder: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::placeholder',
-    invalidSelection: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::selection'
+    input: {
+      base: '.rebilly-instruments-form-field-input',
+      baseHover: '.rebilly-instruments-form-field-input:hover',
+      baseFocus: '.rebilly-instruments-form-field-input:focus',
+      basePlaceholder: '.rebilly-instruments-form-field-input::placeholder',
+      baseSelection: '.rebilly-instruments-form-field-input::selection',
+  
+      invalid: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input',
+      invalidHover: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:hover',
+      invalidFocus: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:focus',
+      invalidPlaceholder: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::placeholder',
+      invalidSelection: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::selection'
+    },
+    button: {
+      base: '.rebilly-instruments-button.rebilly-instruments-button-secondary',
+      baseHover: '.rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):hover',
+      baseFocus: '.rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):active',
+  
+      active: '.rebilly-instruments-button',
+      activeHover: '.rebilly-instruments-button:not([disabled]):hover',
+      activeFocus: '.rebilly-instruments-button:not([disabled]):active',
+    }
   }
 
   const framepayStyle = {
     base: {
-      ...getStyleProps(cssAst, cssSelectors.base),
-      ':hover': getStyleProps(cssAst, cssSelectors.baseHover),
-      ':focus': getStyleProps(cssAst, cssSelectors.baseFocus),
-      '::placeholder': getStyleProps(cssAst, cssSelectors.basePlaceholder),
-      '::selection': getStyleProps(cssAst, cssSelectors.baseSelection),
+      ...getStyleProps(cssAst, cssSelectors.input.base),
+      ':hover': getStyleProps(cssAst, cssSelectors.input.baseHover),
+      ':focus': getStyleProps(cssAst, cssSelectors.input.baseFocus),
+      '::placeholder': getStyleProps(cssAst, cssSelectors.input.basePlaceholder),
+      '::selection': getStyleProps(cssAst, cssSelectors.input.baseSelection),
     },
     invalid: {
-      ...getStyleProps(cssAst, cssSelectors.invalid),
-      ':hover': getStyleProps(cssAst, cssSelectors.invalidHover),
-      ':focus': getStyleProps(cssAst, cssSelectors.invalidFocus),
-      '::placeholder': getStyleProps(cssAst, cssSelectors.invalidPlaceholder),
-      '::selection': getStyleProps(cssAst, cssSelectors.invalidSelection),
+      ...getStyleProps(cssAst, cssSelectors.input.invalid),
+      ':hover': getStyleProps(cssAst, cssSelectors.input.invalidHover),
+      ':focus': getStyleProps(cssAst, cssSelectors.input.invalidFocus),
+      '::placeholder': getStyleProps(cssAst, cssSelectors.input.invalidPlaceholder),
+      '::selection': getStyleProps(cssAst, cssSelectors.input.invalidSelection),
+    },
+    buttons: {
+      base: {
+        ...getStyleProps(cssAst, cssSelectors.button.base),
+        ':hover': getStyleProps(cssAst, cssSelectors.button.baseHover),
+        ':focus': getStyleProps(cssAst, cssSelectors.button.baseFocus),
+      },
+      active: {
+        ...getStyleProps(cssAst, cssSelectors.button.active),
+        ':hover': getStyleProps(cssAst, cssSelectors.button.activeHover),
+        ':focus': getStyleProps(cssAst, cssSelectors.button.activeFocus),
+      }
     }
   }
 

package/src/functions/mount/setup-options.js

@@ -1,4 +1,5 @@
 import merge from 'lodash.merge';
+import decodeJwt from 'jwt-decode';
 
 export const defaults = {
   countryCode: 'US',
@@ -46,6 +47,7 @@ export const defaults = {
 export function validateOptions(options) {
   // TODO: validate more options
   const purchaseData = [
+    options.jwt,
     options.items,
     options.invoiceId,
     options.money,
@@ -57,6 +59,10 @@ export function validateOptions(options) {
   }
 
   if (purchaseData.length > 1) {
+    // JWT can be alone or with specific invoiceId or transactionId
+    if (options.jwt && (options.invoiceId || options.transactionId)) {
+      return
+    }
     throw new Error('Must provide only one purchase data type');
   }
 }
@@ -64,6 +70,7 @@ export function validateOptions(options) {
 export default ({
   options = {}
 } = {}) => {
+
   validateOptions(options);
 
   const _computed = {
@@ -73,9 +80,6 @@ export default ({
   };
 
   const combinedOptions = merge({...defaults}, {
-    organizationId: options.organizationId,
-    publishableKey: options.publishableKey,
-    websiteId: options.websiteId,
     apiMode: options.apiMode,
     i18n: options.i18n,
     theme: options.theme,
@@ -88,13 +92,42 @@ export default ({
     _computed
   });
 
+  if (options.publishableKey) {
+    Object.entries({
+      organizationId: options.organizationId,
+      publishableKey: options.publishableKey,
+      websiteId: options.websiteId,
+    }).forEach(([key, value]) => {
+      combinedOptions[key] = value;
+    });
+  } else if (options.jwt) {
+    combinedOptions.jwt = options.jwt;
+    const {
+      merchant: organizationId,
+      claims: {
+        transactionId,
+        invoiceId,
+      }
+    } = decodeJwt(combinedOptions.jwt);
+    
+    combinedOptions.organizationId = organizationId;
+    
+    if (transactionId) {
+      combinedOptions.transactionId = transactionId;
+    }
+
+    if (invoiceId) {
+      combinedOptions.invoiceId = invoiceId;
+    }
+  }
+
   // Add optional key's
   [
     'items',
     'money',
     'invoiceId',
     'transactionId',
-    'customerJwt',
+    'jwt',
     '_dev'
   ].forEach(key => {
     if (options[key]) {

package/src/functions/mount/setup-options.spec.js

@@ -21,8 +21,7 @@ describe('Setup mount options', () => {
       publishableKey: 'test-publishable-key',
       organizationId: 'test-organization-id',
       websiteId: 'test-website-id',
-      invoiceId: 'test-invoice-id',
-      customerJwt: 'test-customer-jwt'
+      jwt: 'test-jwt'
     }
     const rebillyInstruments = await RenderMockRebillyInstruments(options);
     expect(rebillyInstruments.state.options).toMatchObject(options);

package/src/functions/mount/setup-storefront.js

@@ -9,11 +9,14 @@ export default ({
   }
 }) => {
   const storefront = {
-    publishableKey,
     orgnizationId,
     mode: apiMode || 'live'
   };
 
+  if (publishableKey) {
+    storefront.publishableKey = publishableKey;
+  }
+
   if (_dev) {
     storefront.liveUrl = _dev.liveUrl || 'https://api.rebilly.com';
     storefront.sandboxUrl =

package/src/functions/purchase.js

@@ -36,7 +36,7 @@ export async function makePayment({ state, payload }) {
 
   fields = {
     transaction: fields,
-    token: fields.token || state.options.customerJwt
+    token: fields.token || state.options.jwt
   };
 
   if (state.data.invoice) {

package/src/i18n/en.json

@@ -11,6 +11,7 @@
       "expressCheckout": "Express checkout",
       "or": "Or",
       "popupOverlayText": "Click here to show popup window",
+      "andMore": "and more",
       "error": {
         "noPaymentMethods": "No payment methods available for this transaction, please contact support."
       },
@@ -19,7 +20,8 @@
       }
     },
     "paymentMethods": {
-      "payment-card": "Payment card"
+      "payment-card": "Payment card",
+      "ach": "Bank account"
     }
   }
 }

package/src/i18n/es.json

@@ -10,13 +10,15 @@
     "form": {
       "expressCheckout": "Chequeo rápido",
       "or": "O pague con",
+      "andMore": "y más",
       "popupOverlayText": "Haga clic aquí para mostrar la ventana emergente",
       "error": {
         "noPaymentMethods": "No hay métodos de pago disponibles para esta transacción, por favor, póngase en contacto con el servicio de asistencia."
       }
     },
     "paymentMethods": {
-      "payment-card": "Tarjeta de crédito"
+      "payment-card": "Tarjeta de crédito",
+      "ach": "Cuenta bancaria"
     }
   }
 }

package/src/storefront/index.js

@@ -1,4 +1,4 @@
-import { RebillyStorefrontAPI } from 'rebilly-js-sdk';
+import RebillyApi, {RebillyStorefrontAPI} from 'rebilly-js-sdk';
 
 export function validateStateForStorefront({state}) {
   if (!state.storefront) {
@@ -31,6 +31,7 @@ export async function Endpoint({
 export class StorefrontInstance {
   constructor({
     publishableKey = null,
+    jwt = null,
     organizationId = null,
     mode = 'live',
     timeout = 10000,
@@ -42,18 +43,25 @@ export class StorefrontInstance {
       sandbox: sandboxUrl || 'https://api-sandbox.rebilly.com'
     };
 
-    const api = RebillyStorefrontAPI({
+    const config = {
       organizationId,
       sandbox: mode === 'sandbox',
       timeout: Number.isNaN(parseInt(timeout, 10))
         ? 10000
         : parseInt(timeout, 10),
       urls
-    });
+    };
+
+    const api = RebillyStorefrontAPI(config);
+    // TODO: Check why Rollup is making the default as an named export
+    const rebilly = typeof RebillyApi.default === 'function' ? RebillyApi.default(config) : RebillyApi(config);
 
-    api.setPublishableKey(publishableKey);
+    api.setSessionToken(publishableKey || jwt);
+    rebilly.setSessionToken(publishableKey || jwt);
 
     this.api = api;
+    this.api.rebilly = rebilly;
+
     return this.api;
   }
 }

package/src/storefront/invoices.js

@@ -3,7 +3,7 @@ import { Endpoint } from './index';
 
 export async function fetchInvoice({ data = null, state = null }) {
   return Endpoint({state}, async () => {
-    state.storefront.setSessionToken(state.options.customerJwt);
+    state.storefront.setSessionToken(state.options.jwt);
     const {fields} = await state.storefront.invoices.get(data);
 
     return new InvoiceModel(fields);

package/src/storefront/models/payment-metadata.js

@@ -0,0 +1,7 @@
+import BaseModel from './base-model';
+
+export default class PaymentMetadataModel extends BaseModel {
+  get logo () {
+    return this.landscapeLogo || this.portraitLogo;
+  }
+}

package/src/storefront/models/ready-to-pay-model.js

@@ -1,3 +1,5 @@
+import PaymentMetadataModel from './payment-metadata';
+
 export class ReadyToPayFeatureModel {
   constructor({
     name = '',
@@ -16,6 +18,7 @@ export class ReadyToPayFeatureModel {
   } = {}) {
     this.name = name;
     this.expirationTime = expirationTime;
+    
 
     this.merchantName = merchantName;
     this.merchantOrigin = merchantOrigin;
@@ -33,12 +36,14 @@ export default class ReadyToPayModel {
     method = '',
     feature = null,
     brands = [],
-    filters = []
+    filters = [],
+    metadata = null
   } = {}) {
     this.index = index;
     this.method = method;
     this.feature = feature ? new ReadyToPayFeatureModel(feature) : null;
     this.brands = brands;
     this.filters = filters;
+    this.metadata = metadata ? new PaymentMetadataModel(metadata) : null;
   }
 }

package/src/storefront/products.js

@@ -3,11 +3,13 @@ import { Endpoint } from './index';
 
 export async function fetchProducts({ state }) {
   return Endpoint({state}, async () => {
-    if (state.data.plans === null) {
-      return null;
+    let plansData = [];
+    if (state.data.plans) {
+      plansData = state.data.plans;
+    }
+    if (state.data.invoice?.items) {
+      plansData = state.data.invoice.items;
     }
-
-    const plansData = state.data.plans || [];
     const filterByProductId = {
       filter: ''
     };

package/src/storefront/ready-to-pay.js

@@ -8,13 +8,21 @@ export async function fetchReadyToPay({ state, riskMetadata = null }) {
       const { riskMetadata: data } = await collectData();
       riskMetadata = data;
     }
-    const websiteId = state.options?.websiteId || null;
-
+    
     const data = {
-      websiteId,
       riskMetadata
     };
-
+    
+    let websiteId = state.options?.websiteId || null;
+    if (!websiteId) {
+      if (state.data.transaction?.websiteId) {
+        websiteId = state.data.transaction.websiteId
+      } else if (state.data.invoice?.websiteId) {
+        websiteId = state.data.invoice.websiteId;
+      }
+    }
+    data.websiteId = websiteId;
+  
     if (state.options?.items) {
       data.items = state.options.items;
     }
@@ -25,16 +33,28 @@ export async function fetchReadyToPay({ state, riskMetadata = null }) {
       data.currency = money.currency;
     }
 
-    const { fields: readyToPayFields } =
-      await state.storefront.purchase.readyToPay({ data });
+    const [
+      { fields: readyToPayFields },
+      { items: paymentMethodsMetadataItems } 
+    ] = await Promise.all([
+      state.storefront.purchase.readyToPay({ data }),
+      state.storefront.rebilly.paymentMethods.getAll()
+    ]);
+
+    const paymentMethodsMetadata = paymentMethodsMetadataItems.map(({fields}) => fields);
 
     return Object.values(readyToPayFields)
       // Remove result for "old" paypal method
       .filter((fields) => !(fields.method === 'paypal' && !fields.feature))
-      .map((fields, index) => new ReadyToPayModel({
+      .map((fields, index) => {
+        const metadata = paymentMethodsMetadata
+          .find(methodMetadata => methodMetadata.apiName === fields.method);
+
+        return new ReadyToPayModel({
           index,
+          metadata,
           ...fields
-        })
-      );
+        });
+      });
   });
 }

package/src/storefront/transactions.js

@@ -3,7 +3,7 @@ import { Endpoint } from './index';
 
 export async function fetchTransaction({ data = null, state = null }) {
   return Endpoint({state}, async () => {
-    state.storefront.setSessionToken(state.options.customerJwt);
+    state.storefront.setSessionToken(state.options.jwt);
     const {fields} = await state.storefront.transactions.get(data);
 
     return new TransactionModel(fields);

package/src/style/components/accordion.js

@@ -0,0 +1,127 @@
+import { lighten } from '../utils/color-values';
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the accordion component.
+// -----------------------------------------------------------------------------
+
+export const accordion = (theme) => `
+  /* ACCORDION CLOSED */
+  .rebilly-instruments-accordion {
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    padding: 0 var(--rebilly-spacings-s);
+    background: var(--rebilly-colorBackground);
+    transition: border 0.2s ease, box-shadow 0.2s ease;
+    margin: var(--rebilly-spacings-s) 0;
+    border-radius: var(--rebilly-borderRadius);
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-accordion:first-of-type {
+    margin-top: 0;
+  }
+
+  .rebilly-instruments-accordion:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: var(--rebilly-spacings-xs) var(--rebilly-spacings-s);
+    margin: 0px calc(-1 * var(--rebilly-spacings-s));
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio {
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    margin-right: var(--rebilly-spacings-s);
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    box-shadow: 0 0 0 0 transparent;
+    transition: all 0.2s ease;
+    position: relative;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio::after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.4);
+    opacity: 0;
+    background: var(--rebilly-colorPrimary);
+    border-radius: 50%;
+    transition: all 0.2s ease;
+  }
+
+  .rebilly-instruments-accordion:hover .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio {
+    border-color: ${lighten(theme.colorText, 60)};
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary img {
+    margin-right: var(--rebilly-spacings-s);
+    height: auto;
+    max-width: 40px;
+    width: 100%;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-title {
+    margin: 0;
+    font-weight: 500;
+    flex: 2;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands figure {
+    margin: auto;
+    padding: 0;
+    height: 26px;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands figure img {
+    width: auto;
+    height: 100%;
+    border-radius: 4px;
+    margin-right: var(--rebilly-spacings-xs);
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands span {
+    color: var(--rebilly-colorMutedText);
+    margin: 0;
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
+    line-height: 1;
+  }
+
+  /* ACCORDION OPENED */
+  .rebilly-instruments-accordion[open] {
+    padding: 0 var(--rebilly-spacings-s) var(--rebilly-spacings-s);
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary {
+    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
+    margin-bottom: var(--rebilly-spacings-m);
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio {
+    border-color: var(--rebilly-colorPrimary);
+    box-shadow: 0 0 0 1px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio::after {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+`;

package/src/style/components/button.js

@@ -50,6 +50,9 @@ export const button = () => `
   }
 
   .rebilly-instruments-button.rebilly-instruments-button-secondary {
+    font-size: var(--rebilly-buttonFontSize);
+    font-family: var(--rebilly-buttonFontFamily);
+    line-height: var(--rebilly-buttonFontLineHeight);
     background: var(--rebilly-colorBackground);
     color: var(--rebilly-buttonColorBackground);
     border-color: var(--rebilly-buttonColorBackground);

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

@@ -13,7 +13,6 @@ export const form = () => `
   .rebilly-instruments-form select:-webkit-autofill:hover,
   .rebilly-instruments-form select:-webkit-autofill:focus {
     -webkit-text-fill-color: var(--rebilly-colorText);
-    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
-    transition: background-color 5000s ease-in-out 0s;
+    transition: background-color 5000s ease-in-out 0s, box-shadow 200ms, border 200ms;
   }
 `;