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

package/src/style/components/button.js

@@ -1,117 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the button component.
-// -----------------------------------------------------------------------------
-export const button = () => `
-  /**
-  * Buttons
-  */
-  .rebilly-instruments-button {
-    font-size: var(--rebilly-buttonFontSize);
-    font-family: var(--rebilly-buttonFontFamily);
-    line-height: var(--rebilly-buttonFontLineHeight);
-    padding: var(--rebilly-spacings-button-py) var(--rebilly-spacings-button-px);
-    box-sizing: border-box;
-    background: var(--rebilly-buttonColorBackground);
-    color: var(--rebilly-buttonColorText);
-    border-radius: var(--rebilly-buttonBorderRadius);
-    font-weight: var(--rebilly-buttonFontWeight);
-    border: var(--rebilly-buttonBorder);
-    box-shadow: var(--rebilly-buttonBoxShadow);
-    margin: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s) / 2) 0;
-    width: 100%;
-    cursor: pointer;
-    min-height: 44px;
-    transition: all 0.2s ease;
-    outline: none;
-  }
-
-  .rebilly-instruments-button:not([disabled]):hover {
-    background: var(--rebilly-buttonHoverColorBackground);
-    color: var(--rebilly-buttonHoverColorText);
-    font-family: var(--rebilly-buttonHoverFontFamily);
-    font-size: var(--rebilly-buttonHoverFontSize);
-    line-height: var(--rebilly-buttonHoverFontLineHeight);
-    font-weight: var(--rebilly-buttonHoverFontWeight);
-    border: var(--rebilly-buttonHoverBorder);
-    border-radius: var(--rebilly-buttonHoverBorderRadius);
-    box-shadow: var(--rebilly-buttonHoverBoxShadow);
-  }
-
-  .rebilly-instruments-button:not([disabled]):active {
-    background: var(--rebilly-buttonActiveColorBackground);
-    color: var(--rebilly-buttonActiveColorText);
-    font-family: var(--rebilly-buttonActiveFontFamily);
-    font-size: var(--rebilly-buttonActiveFontSize);
-    line-height: var(--rebilly-buttonActiveFontLineHeight);
-    font-weight: var(--rebilly-buttonActiveFontWeight);
-    border: var(--rebilly-buttonActiveBorder);
-    border-radius: var(--rebilly-buttonActiveBorderRadius);
-    box-shadow: var(--rebilly-buttonActiveBoxShadow);
-  }
-
-  .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);
-  }
-
-  .rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):hover,
-  .rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):active {
-    color: var(--rebilly-buttonColorBackground);
-    background: var(--rebilly-colorBackground);
-  }
-
-  .rebilly-instruments-button:focus { 
-    box-shadow: 0 0 0 1px var(--rebilly-colorPrimary);
-  }
-
-  .rebilly-instruments-button:disabled,
-  .rebilly-instruments-button:disabled:hover { 
-    cursor: not-allowed;
-    opacity: 0.6; 
-  }
-
-  .rebilly-instruments-button::first-letter { text-transform: uppercase; }
-
-  .rebilly-instruments-button:first-of-type { margin-top: 0; }
-
-  .rebilly-instruments-button:last-of-type { margin-bottom: 0; }
-
-  .rebilly-instruments-button-group {
-    display: flex;
-    align-items: stretch;
-  }
-
-  .rebilly-instruments-button-group .rebilly-instruments-button {
-    margin: 0 var(--rebilly-spacings-xs);
-  }
-
-  .rebilly-instruments-button-group .rebilly-instruments-button:first-of-type {
-    margin-left: 0;
-  }
-
-  .rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
-    margin-right: 0;
-  }
-
-  @media screen and (max-width: 480px) {
-    .rebilly-instruments-button-group {
-      flex-direction: column-reverse;
-    }
-
-    .rebilly-instruments-button-group .rebilly-instruments-button:first-of-type {
-      margin: 0;
-    }
-  
-    .rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
-      margin: 0;
-    }
-
-    .rebilly-instruments-button-group .rebilly-instruments-button + .rebilly-instruments-button {
-      margin-bottom: var(--rebilly-spacings-s);
-    } 
-  }
-`;

package/src/style/components/divider.js

@@ -1,39 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the divider component.
-// -----------------------------------------------------------------------------
-export const divider = () => `
-  /**
-  * Divider
-  */
-  .rebilly-instruments-divider {
-    line-height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
-    padding: var(--rebilly-spacings-base) 0;
-    margin: 0;
-    position: relative;
-    outline: 0;
-    border: 0;
-    text-align: center;
-  }
-
-  .rebilly-instruments-divider::before {
-    background: var(--rebilly-colorMutedBorder);
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 100%;
-    height: 1px;
-  }
-
-  .rebilly-instruments-divider .rebilly-instruments-divider-label {
-    color: var(--rebilly-colorMutedText);
-    font-weight: 500;
-    text-transform: uppercase;
-    padding: 0 var(--rebilly-spacings-s);
-    line-height: calc(var(--rebilly-fontSizeBase) * 0.875);
-    background-color: var(--rebilly-colorBackground);
-    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
-    position: relative;
-    display: inline-block;
-  }
-`;

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

@@ -1,75 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the checkbox component.
-// -----------------------------------------------------------------------------
-export const checkbox = () => `
-  /**
-  * Checkbox
-  */
-  .rebilly-instruments-form-field-checkbox {
-    position: relative;
-    opacity: 1;
-    align-items: center;
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: start;
-    cursor: pointer;
-    transform: none;
-  }
-
-  .rebilly-instruments-form-field-checkbox > * {
-    cursor: pointer;
-  }
-
-  .rebilly-instruments-form-field-checkbox input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  .rebilly-instruments-form-field-checkbox span {
-    position: relative;
-    top: 0;
-    left: 0;
-    width: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
-    height: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
-    min-width: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
-    border-radius: 4px;
-    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-checkbox span:after {
-    content: '';
-    position: absolute;
-    border: solid var(--rebilly-colorPrimary);
-    width: calc(var(--rebilly-spacings-xs) + var(--rebilly-spacings-2xs));
-    height: calc(var(--rebilly-spacings-xs) - var(--rebilly-spacings-2xs) + 2px);
-    border-width: 2px 2px 0 0;
-    border-radius: 2px;
-    top: 50%;
-    left: 50%;
-    opacity: 0;
-    transform: translateY(-60%) translateX(-50%) rotate(135deg);
-    transition: all 0.2s ease;
-  }
-
-  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:focus ~ span {
-    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
-  }
-
-  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span {
-    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
-  }
-
-  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span:after {
-    opacity: 1;
-  }
-
-  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:disabled ~ span {
-    opacity: 0.6;
-  }
-`;

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

@@ -1,56 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the field component.
-// -----------------------------------------------------------------------------
-export const field = () => `
-  /**
-  * Field
-  */
-  .rebilly-instruments-form-field {
-    margin: calc(var(--rebilly-spacings-xs) + var(--rebilly-spacings-s)) 0;
-    position: relative;
-  }
-
-  .rebilly-instruments-form-field.is-compact {
-    margin-top: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s));
-    margin-bottom: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s));
-  }
-
-  .rebilly-instruments-form-field > div {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-    position: relative;
-  }
-
-  /* Field group */
-  .rebilly-instruments-form-field-group {
-    margin: calc(calc(var(--rebilly-spacings-xs) * -1) - var(--rebilly-spacings-s)) 0;
-    display: flex;
-  }
-
-  .rebilly-instruments-form-field-group > * {
-    flex: 1 0;
-    margin-left: var(--rebilly-spacings-xs);
-    margin-right: var(--rebilly-spacings-xs);
-  }
-
-  .rebilly-instruments-form-field-group > *:first-child {
-    margin-left: 0;
-  }
-
-  .rebilly-instruments-form-field-group > *:last-child {
-    margin-right: 0;
-  }
-
-  @media (max-width: 480px) {
-    .rebilly-instruments-form-field-group {
-      display: block;
-      margin: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s)) 0;
-    }
-
-    .rebilly-instruments-form-field-group > * {
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-`;

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

@@ -1,18 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the form component.
-// -----------------------------------------------------------------------------
-export const form = () => `
-  /**
-  * Form
-  */
-  /* Chrome autocomplete styles */
-  .rebilly-instruments-form input:-webkit-autofill,
-  .rebilly-instruments-form input:-webkit-autofill:hover, 
-  .rebilly-instruments-form input:-webkit-autofill:focus,
-  .rebilly-instruments-form select:-webkit-autofill,
-  .rebilly-instruments-form select:-webkit-autofill:hover,
-  .rebilly-instruments-form select:-webkit-autofill:focus {
-    -webkit-text-fill-color: var(--rebilly-colorText);
-    transition: background-color 5000s ease-in-out 0s, box-shadow 200ms, border 200ms;
-  }
-`;

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

@@ -1,77 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the input component.
-// -----------------------------------------------------------------------------
-export const input = () => `
-  /**
-  * Input
-  */
-  .rebilly-instruments-form-field-input {
-    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-input: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-input: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-input::placeholder {
-    color: var(--rebilly-inputPlaceholderColorText);
-    font-family: var(--rebilly-inputPlaceholderFontFamily);
-    font-size: var(--rebilly-inputPlaceholderFontSize);
-    line-height: var(--rebilly-inputPlaceholderFontLineHeight);
-    font-weight: var(--rebilly-inputPlaceholderFontWeight);
-    opacity: 1;
-  }
-
-  .rebilly-instruments-form-field-input::selection {
-    color: var(--rebilly-inputSelectionColorText);
-    background: var(--rebilly-inputSelectionColorBackground);
-  }
-
-  .rebilly-instruments-form-field-input:disabled {
-    opacity: 0.6;
-  }
-
-  /* Floating Labels */
-  .is-floating .rebilly-instruments-form-field-input::placeholder {
-    opacity: 0;
-  }
-
-  .is-floating .rebilly-instruments-form-field-input:focus::placeholder {
-    opacity: 1;
-  }
-`;

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

@@ -1,55 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the label component.
-// -----------------------------------------------------------------------------
-export const label = () => `
-  /**
-  * Label
-  */
-  .rebilly-instruments-form-field-label {
-    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: 1;
-    position: absolute;
-    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);
-  }
-
-  .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;
-    transform: translateY(-175%) scale(0.875);
-  }
-`;

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

@@ -1,80 +0,0 @@
-// -----------------------------------------------------------------------------
-// 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

@@ -1,86 +0,0 @@
-// -----------------------------------------------------------------------------
-// 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

@@ -1,72 +0,0 @@
-// -----------------------------------------------------------------------------
-// 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;
-  }
-`;