@telesign/boreal-web-components 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/cjs/{index-Cdb66Tqj.js → index-C9JKWXwa.js}

@@ -118,6 +118,12 @@ var styles = /* @__PURE__ */ new Map();
 var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
+var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
+  "formAssociatedCallback",
+  "formResetCallback",
+  "formDisabledCallback",
+  "formStateRestoreCallback"
+];
 var win = typeof window !== "undefined" ? window : {};
 var H = win.HTMLElement || class {
 };
@@ -882,7 +888,9 @@ var convertToPrivate = (node) => {
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
-      {
+      if (isFormAssociated && typeof propValue === "string") {
+        return propValue === "" || !!propValue;
+      } else {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
@@ -1814,7 +1822,9 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const instance = hostRef.$lazyInstance$ ;
   newVal = parsePropertyValue(
     newVal,
-    cmpMeta.$members$[propName][0]);
+    cmpMeta.$members$[propName][0],
+    !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+  );
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
@@ -1858,6 +1868,26 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
+  if (cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
+    FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach((cbName) => {
+      Object.defineProperty(prototype, cbName, {
+        value(...args) {
+          var _a2;
+          const hostRef = getHostRef(this);
+          const instance = hostRef == null ? void 0 : hostRef.$lazyInstance$ ;
+          if (!instance) {
+            (_a2 = hostRef == null ? void 0 : hostRef.$onReadyPromise$) == null ? void 0 : _a2.then((asyncInstance) => {
+              const cb = asyncInstance[cbName];
+              typeof cb === "function" && cb.call(asyncInstance, ...args);
+            });
+          } else {
+            const cb = instance[cbName] ;
+            typeof cb === "function" && cb.call(instance, ...args);
+          }
+        }
+      });
+    });
+  }
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
     {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
@@ -1907,7 +1937,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               origSetter.apply(this, [
                 parsePropertyValue(
                   newValue,
-                  memberFlags)
+                  memberFlags,
+                  !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+                )
               ]);
               newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               setValue(this, memberName, newValue, cmpMeta);
@@ -1932,7 +1964,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
                 }
                 ref.$lazyInstance$[memberName] = parsePropertyValue(
                   newValue,
-                  memberFlags);
+                  memberFlags,
+                  !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+                );
                 setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
               };
               if (ref.$lazyInstance$) {
@@ -2288,6 +2322,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       } else {
         patchCloneNode(HostElement.prototype);
       }
+      if (cmpMeta.$flags$ & 64 /* formAssociated */) {
+        HostElement.formAssociated = true;
+      }
       cmpMeta.$lazyBundleId$ = lazyBundle[0];
       if (!exclude.includes(tagName) && !customElements2.get(tagName)) {
         cmpTags.push(tagName);

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-Cdb66Tqj.js');
+var index = require('./index-C9JKWXwa.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]], options);
+  return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-button.cjs",[[324,"bds-button",{"label":[1],"disabled":[4],"name":[1],"type":[1],"color":[1],"variant":[1],"size":[1],"loading":[4],"disclosure":[4],"currentState":[32]},null,{"type":[{"checkPropValues":0}],"color":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"size":[{"checkPropValues":0}]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/states-C03fKOhs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const COMPONENT_STATES = {
+    DEFAULT: 'default',
+    ERROR: 'error',
+    DISABLED: 'disabled',
+    ACTIVE: 'active'};
+const STATUS_VARIANT = {
+    INFO: 'info'};
+
+exports.COMPONENT_STATES = COMPONENT_STATES;
+exports.STATUS_VARIANT = STATUS_VARIANT;

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "components/actions/bds-button/bds-button.js",
     "components/feedback/bds-banner/bds-banner.js",
     "components/titles-text/bds-typography/bds-typography.js"
   ],

package/dist/collection/components/actions/bds-button/bds-button.css

@@ -0,0 +1,479 @@
+bds-button {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.bds-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  appearance: none;
+  border: 1px solid transparent;
+  height: fit-content;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+  margin: var(--boreal-spacing-2xs) var(--boreal-spacing-3xs);
+  outline: none;
+  font-family: "Inter", sans-serif;
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  width: fit-content;
+  vertical-align: middle;
+}
+.bds-button .bds-button__content {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--boreal-spacing-2xs);
+}
+.bds-button--is-loading {
+  pointer-events: none;
+  position: relative;
+  color: transparent !important;
+}
+.bds-button--is-loading::after {
+  position: absolute;
+  content: " ";
+  box-sizing: inherit;
+  animation: rotateSpinner 0.5s linear infinite;
+  border-radius: 9999px;
+  display: block;
+  height: 1em;
+  width: 1em;
+  rotate: 45deg;
+  left: calc(50% - 0.5em);
+  top: calc(50% - 0.5em);
+  border: 3px solid;
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+.bds-button--size-small {
+  border-radius: var(--boreal-radius-xs);
+  font-size: var(--boreal-typography-font-size-xs);
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
+  line-height: var(--boreal-typography-line-height-xs);
+  height: 26px;
+}
+.bds-button--size-small .bds-button__content {
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
+}
+.bds-button--size-small .bds-button__content-icon {
+  display: flex;
+  font-size: var(--boreal-typography-font-size-sm);
+  line-height: var(--boreal-typography-line-height-xs);
+}
+.bds-button--size-small .bds-button__content-icon:empty {
+  display: none;
+}
+.bds-button--size-small .bds-button__content {
+  /* TODO: Adjust badge styles when badge component is created */
+}
+.bds-button--size-small .bds-button__content-badge:empty {
+  display: none;
+}
+.bds-button--size-small .bds-button__content-badge {
+  display: none;
+}
+.bds-button--size-medium {
+  border-radius: var(--boreal-radius-xs);
+  font-size: var(--boreal-typography-font-size-sm);
+  padding: var(--boreal-spacing-2xs) var(--boreal-spacing-1xs);
+  line-height: var(--boreal-typography-line-height-sm);
+  height: 32px;
+}
+.bds-button--size-medium .bds-button__content {
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
+}
+.bds-button--size-medium .bds-button__content-icon {
+  display: flex;
+  font-size: var(--boreal-typography-font-size-md);
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-button--size-medium .bds-button__content-icon:empty {
+  display: none;
+}
+.bds-button--size-medium .bds-button__content {
+  /* TODO: Adjust badge styles when badge component is created */
+}
+.bds-button--size-medium .bds-button__content-badge:empty {
+  display: none;
+}
+.bds-button--size-large {
+  border-radius: var(--boreal-radius-xs);
+  font-size: var(--boreal-typography-font-size-md);
+  padding: var(--boreal-spacing-xs);
+  line-height: var(--boreal-typography-line-height-md);
+  height: 44px;
+}
+.bds-button--size-large .bds-button__content {
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
+}
+.bds-button--size-large .bds-button__content-icon {
+  display: flex;
+  font-size: var(--boreal-typography-font-size-lg);
+  line-height: var(--boreal-typography-line-height-md);
+}
+.bds-button--size-large .bds-button__content-icon:empty {
+  display: none;
+}
+.bds-button--size-large .bds-button__content {
+  /* TODO: Adjust badge styles when badge component is created */
+}
+.bds-button--size-large .bds-button__content-badge:empty {
+  display: none;
+}
+.bds-button.bds-button--var-default.bds-button--default {
+  color: var(--boreal-text-default);
+  background-color: var(--boreal-ui-inverse);
+  border-color: transparent;
+}
+.bds-button.bds-button--var-default.bds-button--default:hover {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-default.bds-button--default:focus {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--default:active, .bds-button.bds-button--var-default.bds-button--default.bds-button--state-active {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-button.bds-button--var-default.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-disabled);
+  background-color: var(--boreal-ui-inverse);
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-disabled);
+  border-bottom-color: var(--boreal-text-disabled);
+}
+.bds-button.bds-button--var-default.bds-button--primary {
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-primary-base);
+  border-color: transparent;
+}
+.bds-button.bds-button--var-default.bds-button--primary:hover {
+  background-color: var(--boreal-ui-primary-dark);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-default.bds-button--primary:focus {
+  background-color: var(--boreal-ui-primary-base);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--primary:active, .bds-button.bds-button--var-default.bds-button--primary.bds-button--state-active {
+  background-color: var(--boreal-ui-primary-dark);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-primary-light);
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-inverse);
+  border-bottom-color: var(--boreal-text-inverse);
+}
+.bds-button.bds-button--var-default.bds-button--success {
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-success-base);
+  border-color: transparent;
+}
+.bds-button.bds-button--var-default.bds-button--success:hover {
+  background-color: var(--boreal-ui-success-dark);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-default.bds-button--success:focus {
+  background-color: var(--boreal-ui-success-base);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--success:active, .bds-button.bds-button--var-default.bds-button--success.bds-button--state-active {
+  background-color: var(--boreal-ui-success-dark);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-success-light);
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-inverse);
+  border-bottom-color: var(--boreal-text-inverse);
+}
+.bds-button.bds-button--var-default.bds-button--error {
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-danger-base);
+  border-color: transparent;
+}
+.bds-button.bds-button--var-default.bds-button--error:hover {
+  background-color: var(--boreal-ui-danger-dark);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-default.bds-button--error:focus {
+  background-color: var(--boreal-ui-danger-base);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--error:active, .bds-button.bds-button--var-default.bds-button--error.bds-button--state-active {
+  background-color: var(--boreal-ui-danger-dark);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-danger-light);
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-inverse);
+  border-bottom-color: var(--boreal-text-inverse);
+}
+.bds-button.bds-button--var-outline {
+  background-color: transparent;
+}
+.bds-button.bds-button--var-outline.bds-button--default {
+  color: var(--boreal-text-default);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-default-light);
+}
+.bds-button.bds-button--var-outline.bds-button--default:hover {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-outline.bds-button--default:focus {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--default:active, .bds-button.bds-button--var-outline.bds-button--default.bds-button--state-active {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-disabled);
+  background-color: var(--boreal-ui-inverse);
+  border-color: var(--boreal-stroke-default-light);
+  box-shadow: none;
+}
+.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-disabled);
+  border-bottom-color: var(--boreal-text-disabled);
+}
+.bds-button.bds-button--var-outline.bds-button--primary {
+  color: var(--boreal-text-primary-base);
+  background-color: transparent;
+  border-color: var(--boreal-ui-primary-base);
+}
+.bds-button.bds-button--var-outline.bds-button--primary:hover {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-outline.bds-button--primary:focus {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--primary:active, .bds-button.bds-button--var-outline.bds-button--primary.bds-button--state-active {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-primary-light);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-primary-light);
+  box-shadow: none;
+}
+.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-primary-light);
+  border-bottom-color: var(--boreal-text-primary-light);
+}
+.bds-button.bds-button--var-outline.bds-button--success {
+  color: var(--boreal-text-success-base);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-success-base);
+}
+.bds-button.bds-button--var-outline.bds-button--success:hover {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-outline.bds-button--success:focus {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--success:active, .bds-button.bds-button--var-outline.bds-button--success.bds-button--state-active {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-success-light);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-success-light);
+  box-shadow: none;
+}
+.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-success-light);
+  border-bottom-color: var(--boreal-text-success-light);
+}
+.bds-button.bds-button--var-outline.bds-button--error {
+  color: var(--boreal-text-danger-base);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-danger-base);
+}
+.bds-button.bds-button--var-outline.bds-button--error:hover {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-outline.bds-button--error:focus {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--error:active, .bds-button.bds-button--var-outline.bds-button--error.bds-button--state-active {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-danger-light);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-danger-light);
+  box-shadow: none;
+}
+.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-danger-light);
+  border-bottom-color: var(--boreal-text-danger-light);
+}
+.bds-button.bds-button--var-plain {
+  background-color: transparent;
+}
+.bds-button.bds-button--var-plain.bds-button--default {
+  color: var(--boreal-text-default);
+  background-color: transparent;
+  border-color: transparent;
+}
+.bds-button.bds-button--var-plain.bds-button--default:hover {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-plain.bds-button--default:focus {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-plain.bds-button--default:active, .bds-button.bds-button--var-plain.bds-button--default.bds-button--state-active {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-disabled);
+  background-color: var(--boreal-ui-inverse);
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-disabled);
+  border-bottom-color: var(--boreal-text-disabled);
+}
+.bds-button.bds-button--var-plain.bds-button--primary {
+  color: var(--boreal-text-primary-base);
+  background-color: transparent;
+  border-color: transparent;
+}
+.bds-button.bds-button--var-plain.bds-button--primary:hover {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-plain.bds-button--primary:focus {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-plain.bds-button--primary:active, .bds-button.bds-button--var-plain.bds-button--primary.bds-button--state-active {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-primary-light);
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-primary-light);
+  border-bottom-color: var(--boreal-text-primary-light);
+}
+.bds-button.bds-button--var-plain.bds-button--success {
+  color: var(--boreal-text-success-base);
+  background-color: transparent;
+  border-color: transparent;
+}
+.bds-button.bds-button--var-plain.bds-button--success:hover {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-plain.bds-button--success:focus {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-plain.bds-button--success:active, .bds-button.bds-button--var-plain.bds-button--success.bds-button--state-active {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-success-light);
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-success-light);
+  border-bottom-color: var(--boreal-text-success-light);
+}
+.bds-button.bds-button--var-plain.bds-button--error {
+  color: var(--boreal-text-danger-base);
+  background-color: transparent;
+  border-color: transparent;
+}
+.bds-button.bds-button--var-plain.bds-button--error:hover {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-plain.bds-button--error:focus {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-plain.bds-button--error:active, .bds-button.bds-button--var-plain.bds-button--error.bds-button--state-active {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-danger-light);
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-danger-light);
+  border-bottom-color: var(--boreal-text-danger-light);
+}
+
+@keyframes rotateSpinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}