@rebilly/instruments 3.0.0-beta.0 → 3.1.2-beta.0

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

@@ -1,95 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.select = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the select component.
-// -----------------------------------------------------------------------------
-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);
-  }
-`;
-
-exports.select = select;

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

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.validation = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the form validations.
-// -----------------------------------------------------------------------------
-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;
-  }
-`;
-
-exports.validation = validation;

package/dist/style/components/icons.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.icons = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the icons component.
-// -----------------------------------------------------------------------------
-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);
-  }
-`;
-
-exports.icons = icons;

package/dist/style/components/index.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.components = void 0;
-
-var _methods = require("./methods");
-
-var _form = require("./forms/form");
-
-var _checkbox = require("./forms/checkbox");
-
-var _field = require("./forms/field");
-
-var _input = require("./forms/input");
-
-var _label = require("./forms/label");
-
-var _select = require("./forms/select");
-
-var _validation = require("./forms/validation");
-
-var _button = require("./button");
-
-var _divider = require("./divider");
-
-var _loader = require("./loader");
-
-var _icons = require("./icons");
-
-var _address = require("./address");
-
-var _overlay = require("./overlay");
-
-// Order of components matters for style cascade
-const components = theme => `
-  /* Components
-  ------------------------------------------------------------ */
-  ${(0, _methods.expressMethods)(theme)}
-  ${(0, _methods.methods)()}
-  ${(0, _form.form)(theme)}
-  ${(0, _field.field)(theme)}
-  ${(0, _input.input)(theme)}
-  ${(0, _select.select)(theme)}
-  ${(0, _label.label)(theme)}
-  ${(0, _checkbox.checkbox)(theme)}
-  ${(0, _validation.validation)(theme)}
-  ${(0, _button.button)(theme)}
-  ${(0, _divider.divider)(theme)}
-  ${(0, _loader.loader)(theme)}
-  ${(0, _icons.icons)(theme)}
-  ${(0, _address.address)(theme)}
-  ${(0, _overlay.overlay)(theme)}
-`;
-
-exports.components = components;

package/dist/style/components/loader.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.loader = void 0;
-
-var _colorValues = require("../utils/color-values");
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the loader component.
-// -----------------------------------------------------------------------------
-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;
-    background-color: var(--rebilly-colorBackground);
-    z-index: 9000;
-    transition: all 200ms;
-  }
-
-  .rebilly-instruments-loader.is-active {
-    display: flex;
-  }
-
-  .rebilly-instruments-loader-spinner {
-    border: 4px solid ${(0, _colorValues.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); }
-  }
-`;
-
-exports.loader = loader;

package/dist/style/components/methods.js

@@ -1,108 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.methods = exports.expressMethods = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the methods component.
-// -----------------------------------------------------------------------------
-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-xs);
-    }
-    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
-      margin: 0;
-    }
-  }
-`;
-
-exports.expressMethods = expressMethods;
-
-const methods = () => `
-  /**
-  * Methods
-  */
-
-  .rebilly-instruments-methods {}
-`;
-
-exports.methods = methods;

package/dist/style/components/overlay.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.overlay = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the overlay component.
-// -----------------------------------------------------------------------------
-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
-  }
-`;
-
-exports.overlay = overlay;

package/dist/style/helpers/index.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.helpers = void 0;
-
-// -----------------------------------------------------------------------------
-// This file contains all styles related to helpers.
-// -----------------------------------------------------------------------------
-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 }
-`;
-
-exports.helpers = helpers;

package/dist/style/index.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mainStyle = void 0;
-
-var _postcss = _interopRequireDefault(require("postcss"));
-
-var _autoprefixer = _interopRequireDefault(require("autoprefixer"));
-
-var _browserslist = require("./browserslist");
-
-var _removeEmptyNull = _interopRequireDefault(require("./utils/remove-empty-null"));
-
-var _theme = require("./base/theme");
-
-var _base = require("./base");
-
-var _framepay = require("./vendor/framepay");
-
-var _postmate = require("./vendor/postmate");
-
-var _components = require("./components");
-
-var _paymentInstruments = require("./payment-instruments");
-
-var _views = require("./views");
-
-var _helpers = require("./helpers");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const mainStyle = async themeOverride => {
-  const resolvedTheme = new _theme.Theme(themeOverride).build();
-  const style = `
-    ${(0, _base.base)(resolvedTheme)}
-    ${(0, _components.components)(resolvedTheme)}
-    ${(0, _views.views)(resolvedTheme)}
-    ${(0, _paymentInstruments.paymentInstruments)(resolvedTheme)}
-    ${(0, _framepay.framepayStyle)(resolvedTheme)}
-    ${(0, _postmate.postmateStyle)(resolvedTheme)}
-    ${(0, _helpers.helpers)(resolvedTheme)}
-  `;
-  return (0, _postcss.default)([_removeEmptyNull.default, (0, _autoprefixer.default)(_browserslist.browserslist)]).process(style, {
-    from: undefined
-  }).then(result => result.css);
-};
-
-exports.mainStyle = mainStyle;

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

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.methodContent = void 0;
-
-const methodContent = () => `
-  /**
-  * Content
-  */
-   .rebilly-instruments-method-content {
-    padding: 2px;
-  }
-`;
-
-exports.methodContent = methodContent;

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

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.paymentInstruments = void 0;
-
-var _content = require("./content");
-
-var _paymentCard = require("./payment-card");
-
-// Order of components matters for style cascade
-const paymentInstruments = theme => `
-  /* Payment instruments
-  ------------------------------------------------------------ */
-  ${(0, _content.methodContent)()}
-  ${(0, _paymentCard.paymentCard)(theme)}
-`;
-
-exports.paymentInstruments = paymentInstruments;

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

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.paymentCard = void 0;
-
-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: 42px;
-    border-radius: 4px;
-  }
-
-  .rebilly-instruments-modal-container.rebilly-instruments-payment-card {
-    max-width: 600px;
-  }
-`;
-
-exports.paymentCard = paymentCard;

package/dist/style/utils/border.js

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