@nectary/components 0.8.0

package/tabs-option/index.js

@@ -0,0 +1,129 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+
+var _onInput;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);font:var(--sinch-font-body)}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500);font:var(--sinch-font-emphasized-body)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span> <input type="radio"/></div>';
+export const isTabsOptionElement = element => {
+  return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
+};
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tabs-option', (_onInput = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _onInput, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        this.$input.checked = false;
+        this.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: this.value
+        }));
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$input = shadowRoot.querySelector('input');
+    this.$label = shadowRoot.querySelector('#content');
+  }
+
+  connectedCallback() {
+    this.$input.addEventListener('input', _classPrivateFieldGet(this, _onInput));
+  }
+
+  disconnectedCallback() {
+    this.$input.removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+  }
+
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'text', 'value'];
+  }
+
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.$label.textContent = newVal;
+          break;
+        }
+
+      case 'checked':
+        {
+          const isChecked = isAttrTrue(newVal);
+          this.$input.checked = isChecked;
+
+          if (isChecked) {
+            this.scrollIntoView?.({
+              block: 'nearest'
+            });
+          }
+
+          break;
+        }
+
+      case 'disabled':
+        {
+          this.$input.disabled = isAttrTrue(newVal);
+          break;
+        }
+
+      case 'value':
+        {
+          this.$input.value = newVal ?? '';
+          break;
+        }
+    }
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+
+  blur() {
+    this.$input.blur();
+  }
+
+}));

package/tag/index.d.ts

@@ -0,0 +1,27 @@
+import '../icon/cancel';
+import type { TSinchElementReact } from '../types';
+declare const categoryValues: readonly ["candy", "bolt", "aqua", "grass", "berry", "orange", "night", "mud", "dirt"];
+export declare type TSinchTagCategory = typeof categoryValues[number];
+export declare type TSinchTagElement = HTMLElement & {
+    category: TSinchTagCategory | null;
+    text: string;
+    inverted: boolean;
+    small: boolean;
+};
+export declare type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
+    category?: TSinchTagCategory;
+    text: string;
+    inverted?: boolean;
+    small?: boolean;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tag': TSinchTagReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tag': TSinchTagElement;
+    }
+}
+export {};

package/tag/index.js

@@ -0,0 +1,79 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import '../icon/cancel';
+import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;position:relative;padding:2px 8px;border-radius:12px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:100%;height:24px;box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-400)}:host([category=candy])>#wrapper{background-color:var(--sinch-color-candy-200)}:host([category=bolt])>#wrapper{background-color:var(--sinch-color-bolt-200)}:host([category=aqua])>#wrapper{background-color:var(--sinch-color-aqua-200)}:host([category=grass])>#wrapper{background-color:var(--sinch-color-grass-200)}:host([category=berry])>#wrapper{background-color:var(--sinch-color-berry-200)}:host([category=orange])>#wrapper{background-color:var(--sinch-color-orange-200)}:host([category=night])>#wrapper{background-color:var(--sinch-color-night-200)}:host([category=mud])>#wrapper{background-color:var(--sinch-color-mud-200)}:host([category=dirt])>#wrapper{background-color:var(--sinch-color-dirt-200)}:host([inverted]:not([inverted=false]))>#wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-snow-100)}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px}#text{text-overflow:ellipsis;white-space:nowrap;overflow:auto;flex:1}</style><div id="wrapper"><slot name="icon"></slot><span id="text"></span><slot name="close"></slot></div>';
+const categoryValues = ['candy', 'bolt', 'aqua', 'grass', 'berry', 'orange', 'night', 'mud', 'dirt'];
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  get category() {
+    return getLiteralAttribute(this, categoryValues, 'category', null);
+  }
+
+  set category(value) {
+    updateLiteralAttribute(this, categoryValues, 'category', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get inverted() {
+    return getBooleanAttribute(this, 'inverted');
+  }
+
+  set inverted(isInverted) {
+    updateBooleanAttribute(this, 'inverted', isInverted);
+  }
+
+  get small() {
+    return getBooleanAttribute(this, 'small');
+  }
+
+  set small(isSmall) {
+    updateBooleanAttribute(this, 'small', isSmall);
+  }
+
+  static get observedAttributes() {
+    return ['text'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+}));

package/tag-close/index.d.ts

@@ -0,0 +1,24 @@
+import '../icon/cancel';
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, MouseEvent } from 'react';
+export declare type TSinchTagCloseElement = HTMLElement & {
+    small: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchTagCloseReact = TSinchElementReact<TSinchTagCloseElement> & {
+    small?: boolean;
+    onClick?: (e: MouseEvent<TSinchTagCloseElement>) => void;
+    onFocus?: (e: FocusEvent<TSinchTagCloseElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchTagCloseElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tag-close': TSinchTagCloseReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tag-close': TSinchTagCloseElement;
+    }
+}

package/tag-close/index.js

@@ -0,0 +1,70 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$icon, _$button;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import '../icon/cancel';
+import { defineCustomElement, getBooleanAttribute, updateAttribute, isAttrTrue } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:14px;height:14px}:host([small]:not([small=false])) #wrapper{width:12px;height:12px}button{all:initial;position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);cursor:pointer}button>*{pointer-events:none}</style><div id="wrapper"><button><sinch-icon-cancel></sinch-icon-cancel></button></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tag-close', (_$icon = new WeakMap(), _$button = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$icon, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$icon, shadowRoot.querySelector('sinch-icon-cancel'));
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('button'));
+  }
+
+  get small() {
+    return getBooleanAttribute(this, 'small');
+  }
+
+  set small(isSmall) {
+    updateAttribute(this, 'small', isSmall);
+  }
+
+  static get observedAttributes() {
+    return ['small'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'small':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$icon), 'size', isAttrTrue(newVal) ? 12 : 14);
+          break;
+        }
+    }
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$button).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$button).blur();
+  }
+
+}));

package/textarea/index.d.ts

@@ -0,0 +1,35 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, SyntheticEvent } from 'react';
+export declare type TSinchTextareaElement = HTMLElement & {
+    value: string;
+    label: string;
+    placeholder: string | null;
+    optionalText: string | null;
+    invalidText: string | null;
+    additionalText: string | null;
+    disabled: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
+    value: string;
+    label: string;
+    placeholder?: string;
+    optionalText?: string;
+    invalidText?: string;
+    additionalText?: string;
+    disabled?: boolean;
+    onChange: (e: SyntheticEvent<TSinchTextareaElement, CustomEvent<string>>) => void;
+    onFocus?: (e: FocusEvent<TSinchTextareaElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchTextareaElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-textarea': TSinchTextareaReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-textarea': TSinchTextareaElement;
+    }
+}

package/textarea/index.js

@@ -0,0 +1,201 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _onInput;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:2px;width:100%;min-height:86px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:vertical}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-300)}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) ::slotted(sinch-help-tooltip){fill:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input" rows="3"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$input, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$label, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$optionalText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$additionalText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$invalidText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onInput, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        const value = _classPrivateFieldGet(this, _$input).value;
+
+        _classPrivateFieldGet(this, _$input).value = this.value;
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: value,
+          bubbles: true
+        }));
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
+
+    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
+
+    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
+
+    _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
+
+    _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+  }
+
+  static get observedAttributes() {
+    return ['value', 'placeholder', 'label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          _classPrivateFieldGet(this, _$input).value = newVal ?? '';
+          break;
+        }
+
+      case 'label':
+        {
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          break;
+        }
+
+      case 'placeholder':
+        {
+          _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
+          break;
+        }
+
+      case 'optionaltext':
+        {
+          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
+          break;
+        }
+
+      case 'additionaltext':
+        {
+          _classPrivateFieldGet(this, _$additionalText).textContent = newVal;
+          break;
+        }
+
+      case 'invalidtext':
+        {
+          _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
+          break;
+        }
+
+      case 'disabled':
+        {
+          _classPrivateFieldGet(this, _$input).disabled = isAttrTrue(newVal);
+          break;
+        }
+    }
+  }
+
+  get nodeName() {
+    return 'textarea';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+
+  get placeholder() {
+    return getAttribute(this, 'placeholder', null);
+  }
+
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+
+  get label() {
+    return getAttribute(this, 'label', '');
+  }
+
+  set optionalText(value) {
+    updateAttribute(this, 'optionaltext', value);
+  }
+
+  get optionalText() {
+    return getAttribute(this, 'optionaltext', null);
+  }
+
+  set additionalText(value) {
+    updateAttribute(this, 'additionaltext', value);
+  }
+
+  get additionalText() {
+    return getAttribute(this, 'additionaltext', null);
+  }
+
+  set invalidText(value) {
+    updateAttribute(this, 'invalidtext', value);
+  }
+
+  get invalidText() {
+    return getAttribute(this, 'invalidtext', null);
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$input).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$input).blur();
+  }
+
+}));

package/theme.css

@@ -0,0 +1,112 @@
+:root {
+  --sinch-theme: 1;
+  --sinch-color-honey-700: #CC8800;
+  --sinch-color-honey-600: #FFAA00;
+  --sinch-color-honey-500: #FFBE3C;
+  --sinch-color-honey-400: #FFCC66;
+  --sinch-color-honey-300: #FFDD99;
+  --sinch-color-honey-200: #FFEECC;
+  --sinch-color-honey-100: #FFF7E6;
+  --sinch-color-tropical-700: #003D3D;
+  --sinch-color-tropical-600: #005757;
+  --sinch-color-tropical-500: #007171;
+  --sinch-color-tropical-400: #338D8D;
+  --sinch-color-tropical-300: #66AAAA;
+  --sinch-color-tropical-200: #99C6C6;
+  --sinch-color-tropical-100: #CCE3E3;
+  --sinch-color-stormy-600: #061927;
+  --sinch-color-stormy-500: #0A273D;
+  --sinch-color-stormy-400: #3B5264;
+  --sinch-color-stormy-300: #677784;
+  --sinch-color-stormy-200: #7F8F99;
+  --sinch-color-stormy-100: #9CA8B0;
+  --sinch-color-snow-800: #C6CDD2;
+  --sinch-color-snow-700: #D4DADD;
+  --sinch-color-snow-600: #E3E6E8;
+  --sinch-color-snow-500: #F1F3F4;
+  --sinch-color-snow-100: #FFFFFF;
+  --sinch-color-raspberry-700: #881125;
+  --sinch-color-raspberry-600: #B61631;
+  --sinch-color-raspberry-500: #E31C3D;
+  --sinch-color-raspberry-400: #E94964;
+  --sinch-color-raspberry-300: #EE778B;
+  --sinch-color-raspberry-200: #F4A4B1;
+  --sinch-color-raspberry-100: #F9D2D8;
+  --sinch-color-text-default: #0A273D;
+  --sinch-color-text-inverted: #FFFFFF;
+  --sinch-color-text-muted: #677784;
+  --sinch-color-text-link: #007171;
+  --sinch-color-text-invalid: #E31C3D;
+  --sinch-color-error-800: #57000E;
+  --sinch-color-error-500: #E31C3D;
+  --sinch-color-error-200: #FCD7D4;
+  --sinch-color-success-700: #005419;
+  --sinch-color-success-500: #2E8540;
+  --sinch-color-success-200: #D7F1D8;
+  --sinch-color-informative-700: #003B7E;
+  --sinch-color-informative-500: #2071CE;
+  --sinch-color-informative-200: #D5E5F8;
+  --sinch-color-warning-700: #9C2E00;
+  --sinch-color-warning-500: #F35B1C;
+  --sinch-color-warning-200: #FFE8D6;
+  --sinch-color-night-400: #3247E9;
+  --sinch-color-night-200: #D1D6FA;
+  --sinch-color-aqua-400: #3DAED8;
+  --sinch-color-aqua-200: #AADBEE;
+  --sinch-color-grass-400: #39B93D;
+  --sinch-color-grass-200: #B4E4B5;
+  --sinch-color-dirt-400: #828282;
+  --sinch-color-dirt-200: #E0DDDC;
+  --sinch-color-berry-400: #F95252;
+  --sinch-color-berry-200: #FCA7A7;
+  --sinch-color-candy-400: #E467C3;
+  --sinch-color-candy-200: #F6CBEA;
+  --sinch-color-mud-400: #8B6559;
+  --sinch-color-mud-200: #D7C6C1;
+  --sinch-color-orange-400: #FF8C34;
+  --sinch-color-orange-200: #FFD4B3;
+  --sinch-color-bolt-400: #FFBE3C;
+  --sinch-color-bolt-200: #FFE6B3;
+  --sinch-color-transparent: transparent;
+  --sinch-font-hero: 700 56px/72px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-1: 600 40px/48px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-2: 600 24px/32px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-3: 600 20px/24px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-4: 600 16px/24px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-title-5: 700 16px/24px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-body: 400 16px/24px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-emphasized-body: 600 16px/24px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-small-text: 400 14px/22px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-extra-small-text: 400 12px/20px "Gilroy", "Arial", "sans-serif";
+  --sinch-font-monospace: 400 16px/24px "monospace";
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-weight: 400;
+  font-style: normal;
+  src:
+    local("Gilroy-Regular"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-weight: 600;
+  font-style: normal;
+  src:
+    local("Gilroy-SemiBold"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-weight: 700;
+  font-style: normal;
+  src:
+    local("Gilroy-Bold"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff") format("woff");
+}