@nectary/components 1.3.3 → 2.0.0

package/vertical-stepper-item/index.js

@@ -1,6 +1,8 @@
 import '../icon';
-import { defineCustomElement, getAttribute, getCssVars, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-size-icon:20px}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}#content{display:none;padding:16px 0 16px 40px}#progress{position:absolute;width:1px;left:16px;top:32px;bottom:0;background-color:var(--sinch-color-snow-700);transform:translateX(-50%)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-color-stormy-400);left:0;top:0}:host(:last-of-type) #progress{display:none}:host([data-progress=active]) #content{display:block}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-feedback-invalid-bg);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}:host([data-progress=done]) #bar{height:100%}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon id="icon-success"></sinch-icon><sinch-icon id="icon-error"></sinch-icon><span id="circle-text"></span></div><div id="label-wrapper"><div id="label"></div><div id="description"></div></div></div><div id="content"><slot></slot></div></div>';
+import '../title';
+import '../text';
+import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-local-color-background);font:var(--sinch-sys-font-desktop-title-s);line-height:32px;text-align:center;color:var(--sinch-local-color-text);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-default);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-default);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-default);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-default);--sinch-global-size-icon:20px}:host([data-progress=active]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-active);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-active);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-active);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-active)}:host([data-progress=done]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-visited);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-visited);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-visited);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-visited)}:host([data-progress=done][status=error]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-visited-error);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-visited-error);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-visited-error);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-visited-error)}:host([data-progress=done][status=skip]) #circle{--sinch-local-color-background:var(--sinch-comp-vertical-stepper-color-background-visited-skip);--sinch-local-color-border:var(--sinch-comp-vertical-stepper-color-border-visited-skip);--sinch-local-color-text:var(--sinch-comp-vertical-stepper-color-icon-visited-skip);--sinch-local-color-icon:var(--sinch-comp-vertical-stepper-color-icon-visited-skip)}#icon-error,#icon-success{display:none}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}#content{display:none;padding:16px 0 16px 40px}:host([data-progress=active]) #content{display:block}#progress{position:absolute;width:1px;left:15.5px;top:32px;bottom:0;background-color:var(--sinch-comp-vertical-stepper-color-progress)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-comp-vertical-stepper-color-progress-visited);left:0;top:0}:host([data-progress=done]) #bar{height:100%}:host(:last-of-type) #progress{display:none}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{--sinch-global-color-text:var(--sinch-comp-vertical-stepper-color-label)}#description{--sinch-global-color-text:var(--sinch-comp-vertical-stepper-color-description)}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon id="icon-success" name="check"></sinch-icon><sinch-icon id="icon-error" name="exclamation"></sinch-icon><span id="circle-text"></span></div><div id="label-wrapper"><sinch-title id="label" type="s" level="3" ellipsis></sinch-title><sinch-text id="description" type="xs" ellipsis></sinch-text></div></div><div id="content"><slot></slot></div></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -8,8 +10,6 @@ defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement
   #$label;
   #$description;
   #$circleText;
-  #$iconSuccess;
-  #$iconError;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -17,22 +17,18 @@ defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement
     this.#$label = shadowRoot.querySelector('#label');
     this.#$description = shadowRoot.querySelector('#description');
     this.#$circleText = shadowRoot.querySelector('#circle-text');
-    this.#$iconSuccess = shadowRoot.querySelector('#icon-success');
-    this.#$iconError = shadowRoot.querySelector('#icon-error');
-  }
-  connectedCallback() {
-    const [successName, errorName] = getCssVars(this, ['--sinch-vertical-stepper-icon-success', '--sinch-vertical-stepper-icon-error']);
-    updateAttribute(this.#$iconSuccess, 'name', successName);
-    updateAttribute(this.#$iconError, 'name', errorName);
   }
   static get observedAttributes() {
     return ['label', 'description', 'data-index'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
     switch (name) {
       case 'label':
         {
-          this.#$label.textContent = newVal;
+          updateAttribute(this.#$label, 'text', newVal);
           break;
         }
       case 'description':

package/logo/create-logo-class.d.ts

@@ -1 +0,0 @@
-export declare const createLogoClass: (templateHTML: string) => CustomElementConstructor;

package/logo/create-logo-class.js

@@ -1,52 +0,0 @@
-import { getBooleanAttribute, getIntegerAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const logoStylesHtml = '<style>:host{display:inline-block;vertical-align:middle}svg{display:block;fill:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) svg{fill:var(--sinch-color-snow-100)}</style>';
-const DEFAULT_SIZE = 16;
-const MIN_SIZE = 4;
-const MAX_SIZE = 256;
-export const createLogoClass = templateHTML => {
-  const template = document.createElement('template');
-  template.innerHTML = logoStylesHtml + templateHTML;
-  return class extends NectaryElement {
-    constructor() {
-      super();
-      const shadowRoot = this.attachShadow();
-      shadowRoot.appendChild(template.content.cloneNode(true));
-      this.$svg = shadowRoot.querySelector('svg');
-    }
-    static get observedAttributes() {
-      return ['size'];
-    }
-    set size(value) {
-      updateAttribute(this, 'size', value);
-    }
-    get size() {
-      return getIntegerAttribute(this, 'size', DEFAULT_SIZE);
-    }
-    set inverted(isInverted) {
-      updateBooleanAttribute(this, 'inverted', isInverted);
-    }
-    get inverted() {
-      return getBooleanAttribute(this, 'inverted');
-    }
-    connectedCallback() {
-      if (!this.$svg.hasAttribute('preserveAspectRatio')) {
-        this.$svg.setAttribute('preserveAspectRatio', 'xMinYMin meet');
-      }
-      if (!this.hasAttribute('size')) {
-        this.size = DEFAULT_SIZE;
-      }
-    }
-    attributeChangedCallback(name, _, newVal) {
-      switch (name) {
-        case 'size':
-          {
-            updateIntegerAttribute(this.$svg, 'height', newVal, {
-              min: MIN_SIZE,
-              max: MAX_SIZE
-            });
-            break;
-          }
-      }
-    }
-  };
-};

package/logo/engage-icon/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchLogoElement, TSinchLogoReact } from '../types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-logo-engage-icon': TSinchLogoReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-logo-engage-icon': TSinchLogoElement;
-    }
-}

package/logo/engage-icon/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createLogoClass } from '../create-logo-class';
-const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M46.398 19.2a17.48 17.48 0 0 1-5.155 12.443A17.488 17.488 0 0 1 28.8 36.798H24l4.8-4.8c7.057 0 12.799-5.741 12.799-12.798S35.857 6.402 28.8 6.402c-7.057 0-12.799 5.741-12.799 12.798v.25a15.66 15.66 0 0 0-2.801-.25h-.798c-.402 0-.803.014-1.2.046V19.2a17.48 17.48 0 0 1 5.155-12.443A17.488 17.488 0 0 1 28.8 1.602c4.698 0 9.12 1.832 12.443 5.155A17.488 17.488 0 0 1 46.398 19.2Z"/><path d="M24.046 46.398H12.8c-6.176 0-11.202-5.026-11.202-11.201 0-6.176 5.026-11.202 11.202-11.202 6.174 0 11.2 5.026 11.2 11.202v1.601h-4.8v-1.601c0-3.53-2.87-6.402-6.401-6.402a6.408 6.408 0 0 0-6.402 6.402c0 3.53 2.87 6.401 6.402 6.401h6.447l4.8 4.8Z"/></svg>';
-defineCustomElement('sinch-logo-engage-icon', createLogoClass(templateHTML));

package/logo/engage-icon-wordmark/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchLogoElement, TSinchLogoReact } from '../types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-logo-engage-icon-wordmark': TSinchLogoReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-logo-engage-icon-wordmark': TSinchLogoElement;
-    }
-}

package/logo/engage-icon-wordmark/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createLogoClass } from '../create-logo-class';
-const templateHTML = '<svg viewBox="0 0 159 48" aria-hidden="true"><path d="M53.94 40.214V16.722h15.338v3.456H58.236v6.444h10.035v3.356H58.236v6.78h11.042v3.456H53.94Zm17.62 0V23.568h3.792l.336 2.819a5.862 5.862 0 0 1 2.231-2.35c.974-.582 2.119-.872 3.44-.872 2.06 0 3.658.65 4.8 1.947 1.14 1.296 1.711 3.2 1.711 5.705v9.397h-4.296V31.22c0-1.43-.29-2.53-.872-3.29-.583-.758-1.49-1.14-2.719-1.14-1.229 0-2.198.423-2.97 1.275-.772.852-1.158 2.035-1.158 3.557v8.592H71.56Zm25.774-4.967a8.905 8.905 0 0 1-2.248-.269l-1.242 1.242c.382.202.893.37 1.544.504.65.134 1.699.268 3.154.402 2.215.202 3.826.726 4.833 1.578 1.007.851 1.51 2.026 1.51 3.524 0 .985-.268 1.917-.805 2.802s-1.364 1.598-2.484 2.148c-1.12.55-2.55.822-4.295.822-2.37 0-4.284-.44-5.74-1.326-1.455-.885-2.18-2.21-2.18-3.977 0-1.497.725-2.798 2.18-3.893a7.352 7.352 0 0 1-1.157-.637 6.089 6.089 0 0 1-.856-.705v-.772l2.92-3.087c-1.296-1.142-1.947-2.606-1.947-4.397 0-1.12.273-2.135.823-3.054.55-.919 1.325-1.644 2.332-2.181 1.007-.537 2.228-.806 3.658-.806.94 0 1.813.134 2.618.403h6.309v2.618l-2.852.201c.449.852.671 1.791.671 2.82 0 1.12-.269 2.134-.806 3.053s-1.313 1.645-2.332 2.181c-1.02.537-2.22.806-3.608.806Zm-4.027 7.014c0 .827.386 1.447 1.158 1.863.772.415 1.715.62 2.836.62 1.12 0 1.946-.218 2.617-.654.672-.436 1.007-1.023 1.007-1.762a1.97 1.97 0 0 0-.654-1.51c-.437-.403-1.305-.65-2.601-.738a26.661 26.661 0 0 1-2.55-.302c-.651.356-1.113.75-1.394 1.174-.28.424-.42.86-.42 1.31Zm4.027-10.303c.873 0 1.594-.235 2.165-.705.57-.47.856-1.14.856-2.013s-.286-1.544-.856-2.014c-.57-.47-1.292-.705-2.165-.705-.919 0-1.657.235-2.215.705-.558.47-.839 1.141-.839 2.014 0 .872.281 1.543.84 2.013.557.47 1.295.705 2.214.705Zm16.109 8.659c-1.43 0-2.605-.231-3.524-.688-.918-.458-1.598-1.07-2.047-1.83a4.851 4.851 0 0 1-.671-2.516c0-1.544.604-2.798 1.812-3.76 1.208-.96 3.021-1.442 5.437-1.442h4.229v-.403c0-1.141-.323-1.98-.973-2.517-.651-.537-1.456-.805-2.417-.805-.872 0-1.632.205-2.282.62-.65.416-1.053 1.024-1.208 1.83h-4.195c.113-1.209.52-2.262 1.225-3.155.705-.894 1.615-1.582 2.735-2.064 1.12-.483 2.37-.722 3.759-.722 2.37 0 4.241.592 5.604 1.779 1.364 1.187 2.048 2.865 2.048 5.034v10.236h-3.659l-.402-2.685a6.205 6.205 0 0 1-2.064 2.215c-.885.583-2.018.873-3.407.873Zm.974-3.356c1.229 0 2.185-.403 2.869-1.209.684-.805 1.112-1.8 1.292-2.986h-3.658c-1.141 0-1.959.205-2.45.62-.491.416-.738.923-.738 1.527 0 .65.247 1.154.738 1.51.491.357 1.141.538 1.947.538Zm18.022-2.014a8.905 8.905 0 0 1-2.249-.269l-1.242 1.242c.382.202.894.37 1.544.504s1.699.268 3.155.402c2.215.202 3.826.726 4.833 1.578 1.006.851 1.51 2.026 1.51 3.524 0 .985-.269 1.917-.806 2.802s-1.363 1.598-2.483 2.148-2.551.822-4.296.822c-2.37 0-4.283-.44-5.739-1.326-1.456-.885-2.181-2.21-2.181-3.977 0-1.497.725-2.798 2.181-3.893a7.349 7.349 0 0 1-1.158-.637 6.052 6.052 0 0 1-.855-.705v-.772l2.919-3.087c-1.296-1.142-1.946-2.606-1.946-4.397 0-1.12.272-2.135.822-3.054.55-.919 1.326-1.644 2.333-2.181 1.006-.537 2.227-.806 3.658-.806.939 0 1.812.134 2.617.403h6.31v2.618l-2.853.201c.449.852.671 1.791.671 2.82 0 1.12-.268 2.134-.805 3.053s-1.313 1.645-2.333 2.181c-1.019.537-2.219.806-3.607.806Zm-4.028 7.014c0 .827.386 1.447 1.158 1.863.772.415 1.716.62 2.836.62 1.12 0 1.947-.218 2.618-.654.671-.436 1.007-1.023 1.007-1.762 0-.604-.219-1.107-.655-1.51-.436-.403-1.304-.65-2.601-.738a26.617 26.617 0 0 1-2.55-.302c-.651.356-1.112.75-1.393 1.174-.281.424-.42.86-.42 1.31Zm4.028-10.303c.872 0 1.594-.235 2.164-.705.571-.47.856-1.14.856-2.013s-.285-1.544-.856-2.014c-.57-.47-1.292-.705-2.164-.705-.919 0-1.657.235-2.215.705-.558.47-.839 1.141-.839 2.014 0 .872.281 1.543.839 2.013.558.47 1.296.705 2.215.705Zm17.787 8.659c-1.678 0-3.168-.357-4.464-1.074a7.806 7.806 0 0 1-3.054-3.02c-.738-1.297-1.107-2.799-1.107-4.498 0-1.699.365-3.255 1.09-4.598a7.911 7.911 0 0 1 3.021-3.137c1.288-.751 2.802-1.125 4.547-1.125 1.632 0 3.075.357 4.33 1.074a7.715 7.715 0 0 1 2.936 2.937c.705 1.241 1.057 2.622 1.057 4.144 0 .248-.004.504-.016.772-.013.269-.03.55-.051.84h-12.652c.088 1.296.541 2.315 1.359 3.053.818.739 1.808 1.108 2.97 1.108.873 0 1.607-.197 2.198-.588a3.632 3.632 0 0 0 1.326-1.527h4.363a7.93 7.93 0 0 1-1.561 2.87 7.688 7.688 0 0 1-2.684 2.03c-1.062.491-2.266.739-3.608.739Zm.033-13.961c-1.053 0-1.98.297-2.785.889-.806.591-1.322 1.493-1.544 2.701h8.29c-.068-1.094-.47-1.967-1.209-2.617-.738-.65-1.657-.974-2.752-.974ZM56.944 11.742c-.604 0-1.137-.105-1.598-.31a2.524 2.524 0 0 1-1.091-.894c-.264-.386-.403-.86-.411-1.414h1.586c.016.386.155.71.415.97s.625.394 1.087.394c.398 0 .717-.097.952-.29a.944.944 0 0 0 .352-.768c0-.318-.105-.6-.31-.788-.206-.189-.483-.34-.827-.457l-1.103-.378c-.634-.218-1.12-.5-1.452-.847-.331-.344-.499-.802-.499-1.376-.008-.487.11-.902.348-1.25a2.37 2.37 0 0 1 .982-.81c.415-.193.894-.29 1.435-.29s1.032.097 1.451.294c.42.197.747.47.986.822.24.353.365.772.382 1.259h-1.611a1.109 1.109 0 0 0-.336-.768c-.214-.222-.516-.336-.897-.336-.328-.008-.604.072-.827.24-.222.167-.335.41-.335.734 0 .272.088.49.26.65.172.16.407.298.704.407.298.109.638.226 1.024.352.407.143.78.307 1.116.495.336.19.608.437.81.747.205.31.306.705.306 1.191 0 .433-.11.831-.327 1.2-.218.37-.546.663-.974.885-.432.223-.96.336-1.585.336h-.013Zm6.553-.138V3.38h1.502v8.223h-1.502Zm5.449 0V3.38h1.502l3.864 5.79V3.38h1.502v8.223h-1.502l-3.864-5.781v5.78h-1.502Zm14.544.138c-.83 0-1.543-.176-2.139-.533a3.565 3.565 0 0 1-1.376-1.493c-.323-.638-.482-1.376-.482-2.215 0-.84.159-1.578.482-2.22a3.56 3.56 0 0 1 1.376-1.501c.596-.361 1.309-.541 2.14-.541.985 0 1.795.243 2.424.734.63.49 1.024 1.174 1.18 2.06h-1.658a1.782 1.782 0 0 0-.65-1.053c-.332-.256-.772-.382-1.322-.382-.759 0-1.355.26-1.787.776-.432.516-.646 1.225-.646 2.127 0 .902.214 1.606.646 2.118.432.512 1.028.768 1.787.768.55 0 .99-.117 1.322-.357.331-.239.55-.57.65-.994h1.657c-.155.848-.55 1.506-1.179 1.984-.629.479-1.439.718-2.425.718v.004Zm7.283-.138V3.38h1.502V6.8h3.687V3.38h1.502v8.223h-1.502V8.02h-3.687v3.582h-1.502Zm-48.6 5.847c0 4.275-1.665 8.29-4.686 11.31a15.895 15.895 0 0 1-11.31 4.686h-4.363l4.363-4.363c6.415 0 11.633-5.218 11.633-11.633 0-6.414-5.218-11.632-11.633-11.632-6.414 0-11.633 5.218-11.633 11.633v.226a14.231 14.231 0 0 0-2.546-.227h-.726c-.365 0-.73.013-1.09.042v-.041c0-4.275 1.665-8.29 4.685-11.31a15.895 15.895 0 0 1 11.31-4.686c4.27 0 8.29 1.665 11.31 4.686a15.896 15.896 0 0 1 4.686 11.31Z"/><path d="M21.856 42.173H11.633c-5.613 0-10.181-4.568-10.181-10.181 0-5.613 4.568-10.182 10.181-10.182 5.613 0 10.181 4.569 10.181 10.182v1.455h-4.362v-1.455c0-3.21-2.61-5.819-5.819-5.819a5.824 5.824 0 0 0-5.819 5.819 5.824 5.824 0 0 0 5.819 5.818h5.86l4.363 4.363Z"/></svg>';
-defineCustomElement('sinch-logo-engage-icon-wordmark', createLogoClass(templateHTML));

package/logo/sinch-icon/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchLogoElement, TSinchLogoReact } from '../types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-logo-sinch-icon': TSinchLogoReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-logo-sinch-icon': TSinchLogoElement;
-    }
-}

package/logo/sinch-icon/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createLogoClass } from '../create-logo-class';
-const templateHTML = '<svg viewBox="0 0 93 48" aria-hidden="true"><path d="M92.298 25.271a17.167 17.167 0 0 1-.814 5.312c-1.51 4.734-5.27 8.678-10.06 10.549-5.64 2.202-12.252 1.416-18.624-2.21l-4.649-2.67a16.424 16.424 0 0 1-3.563 3.064l-14.817 8.679-.027.015v-7.501l.027-.014 22.29-13.057a16.017 16.017 0 0 1-.713 3.206l4.656 2.65c5.95 3.386 10.388 2.85 13.065 1.806 2.991-1.167 5.323-3.59 6.245-6.483.692-2.15.679-4.467-.04-6.609-.955-2.88-3.319-5.275-6.324-6.41-2.688-1.014-7.132-1.494-13.04 1.962L29.7 38.747l-.043.028c-4.017 2.35-8.14 3.556-12.065 3.58a18.162 18.162 0 0 1-6.53-1.145C6.247 39.396 2.44 35.498.874 30.783A17.116 17.116 0 0 1 .81 20.166c1.51-4.733 5.272-8.676 10.063-10.548 5.64-2.202 12.252-1.416 18.623 2.212l4.649 2.67a16.377 16.377 0 0 1 3.563-3.067l.281-.163 1.726-1.011-7.37-4.197A3.238 3.238 0 0 1 35.551.437l10.591 6.06L56.52.457a3.238 3.238 0 0 1 3.27 5.588l-29.528 17.05c.132-1.017.36-2.019.683-2.992l-4.656-2.65c-5.946-3.383-10.384-2.847-13.061-1.803-2.991 1.167-5.325 3.59-6.247 6.481a10.623 10.623 0 0 0 .039 6.608c.956 2.882 3.321 5.277 6.324 6.41 2.689 1.012 7.136 1.495 13.042-1.966l36.256-21.208c4.017-2.349 8.14-3.555 12.067-3.579a18.112 18.112 0 0 1 6.53 1.145c4.812 1.813 8.62 5.712 10.187 10.426a17.23 17.23 0 0 1 .872 5.304Z"/></svg>';
-defineCustomElement('sinch-logo-sinch-icon', createLogoClass(templateHTML));

package/logo/sinch-icon-wordmark/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchLogoElement, TSinchLogoReact } from '../types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-logo-sinch-icon-wordmark': TSinchLogoReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-logo-sinch-icon-wordmark': TSinchLogoElement;
-    }
-}

package/logo/sinch-icon-wordmark/index.js

@@ -1,4 +0,0 @@
-import { defineCustomElement } from '../../utils';
-import { createLogoClass } from '../create-logo-class';
-const templateHTML = '<svg viewBox="0 0 236 48" aria-hidden="true"><path d="m100.82 36.72 6.606-3.801c1.299 2.603 3.5 3.903 6.602 3.9 2.914 0 4.704-1.299 4.704-3.201 0-1.902-2.498-2.498-6.806-3.401-5.903-1.303-9.703-3.7-9.703-8.704 0-5.412 5.503-9.108 11.605-9.108 5.204 0 8.804 1.403 12.006 5.411l-6.303 3.605c-1.199-2.081-3.001-3.101-5.603-3.101-2.701 0-4.2 1.199-4.2 2.802 0 1.998 3.001 2.397 7.002 3.4 5.503 1.4 9.707 3.301 9.707 8.805 0 5.702-5.603 9.603-12.609 9.603-5.802-.008-10.207-1.607-13.008-6.21Zm29.618 5.41V16.739l7.405-4.333v29.717l-7.405.009Zm12.608 0V26.517c0-8.004 5.903-14.111 14.108-14.111 8.325 0 14.107 6.506 14.107 14.111v15.606h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106l-7.514.009Zm32.203-14.515c0-8.904 6.402-15.21 15.402-15.21 5.603 0 10.602 2.914 13.004 7.405l-6.402 3.805a7.36 7.36 0 0 0-6.702-4.005c-4.404 0-7.705 3.302-7.705 8.005 0 4.604 3.101 8.105 7.705 8.105 3.001 0 5.603-1.503 6.802-4.004l6.402 3.704a14.887 14.887 0 0 1-13.104 7.493c-8.883.009-15.402-6.394-15.402-15.298Zm32.519 14.507V4.304L215.186 0v14.607a12.584 12.584 0 0 1 6.902-2.202c8.204 0 13.907 5.603 13.907 13.907v15.819h-7.493V27.016c0-4.604-2.801-7.306-6.602-7.306-4.104 0-6.606 2.914-6.606 7.306v15.106h-7.526ZM82.892 27.578a15.068 15.068 0 0 1-9.766 14.244C68.06 43.8 62.124 43.072 56.4 39.837l-4.162-2.398a14.752 14.752 0 0 1-3.197 2.752l-13.32 7.792h-.026v-6.722h.025l20.02-11.735a14.647 14.647 0 0 1-.641 2.876l4.162 2.381c5.345 3.04 9.333 2.56 11.735 1.624a9.484 9.484 0 0 0 5.607-5.828 9.67 9.67 0 0 0 .458-2.972 9.257 9.257 0 0 0-6.17-8.717c-2.418-.911-6.406-1.344-11.713 1.761L26.675 39.679l-.038.025c-3.605 2.11-7.31 3.197-10.823 3.217-2.001.02-3.99-.328-5.865-1.028a15.185 15.185 0 0 1-9.22-18.898 15.352 15.352 0 0 1 9.037-9.475c5.066-1.977 11.002-1.274 16.725 1.986l4.163 2.398a14.678 14.678 0 0 1 3.201-2.752l.28-.166 1.552-.908-6.619-3.746a2.915 2.915 0 0 1 2.86-5.058l9.512 5.44 9.32-5.41a2.914 2.914 0 0 1 2.939 5.007l-26.52 15.31a14.67 14.67 0 0 1 .616-2.68l-4.163-2.382c-5.341-3.038-9.325-2.56-11.73-1.619a9.317 9.317 0 0 0 .103 17.508c2.415.912 6.407 1.345 11.714-1.76l32.557-19.053c3.604-2.11 7.31-3.193 10.823-3.214 2-.02 3.987.329 5.86 1.029a15.077 15.077 0 0 1 9.937 14.128"/></svg>';
-defineCustomElement('sinch-logo-sinch-icon-wordmark', createLogoClass(templateHTML));

package/logo/types.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchLogoElement = HTMLElement & {
-    size: number;
-    inverted: boolean;
-    setAttribute(name: 'size', value: string): void;
-    setAttribute(name: 'inverted', value: ''): void;
-};
-export type TSinchLogoReact = TSinchElementReact<TSinchLogoElement> & {
-    size?: number;
-    inverted?: boolean;
-};

package/theme/accordion-item.css

@@ -1,4 +0,0 @@
-:root,
-:host {
-  --sinch-accordion-item-icon-dropdown: keyboard_arrow_down;
-}

package/theme/alert.css

@@ -1,6 +0,0 @@
-:root,
-:host {
-  --sinch-alert-icon-info: info;
-  --sinch-alert-icon-warn: report_problem;
-  --sinch-alert-icon-error: report;
-}

package/theme/avatar.css

@@ -1,25 +0,0 @@
-:root,
-:host {
-  --sinch-avatar-color-light-blue-bg: var(--sinch-color-night-200);
-  --sinch-avatar-color-light-blue-fg: var(--sinch-color-night-700);
-  --sinch-avatar-color-light-brown-bg: var(--sinch-color-mud-200);
-  --sinch-avatar-color-light-brown-fg: var(--sinch-color-mud-700);
-  --sinch-avatar-color-light-gray-bg: var(--sinch-color-dirt-200);
-  --sinch-avatar-color-light-gray-fg: var(--sinch-color-dirt-700);
-  --sinch-avatar-color-light-green-bg: var(--sinch-color-grass-200);
-  --sinch-avatar-color-light-green-fg: var(--sinch-color-grass-700);
-  --sinch-avatar-color-light-orange-bg: var(--sinch-color-orange-200);
-  --sinch-avatar-color-light-orange-fg: var(--sinch-color-orange-700);
-  --sinch-avatar-color-light-pink-bg: var(--sinch-color-candy-200);
-  --sinch-avatar-color-light-pink-fg: var(--sinch-color-candy-700);
-  --sinch-avatar-color-light-violet-bg: var(--sinch-color-violet-200);
-  --sinch-avatar-color-light-violet-fg: var(--sinch-color-violet-700);
-  --sinch-avatar-color-light-yellow-bg: var(--sinch-color-bolt-200);
-  --sinch-avatar-color-light-yellow-fg: var(--sinch-color-bolt-700);
-  --sinch-avatar-color-default-bg: var(--sinch-avatar-color-light-gray-bg);
-  --sinch-avatar-color-default-fg: var(--sinch-avatar-color-light-gray-fg);
-  --sinch-avatar-status-color-online: var(--sinch-color-grass-400);
-  --sinch-avatar-status-color-away: var(--sinch-color-honey-500);
-  --sinch-avatar-status-color-busy: var(--sinch-color-raspberry-500);
-  --sinch-avatar-status-color-offline: var(--sinch-color-stormy-200);
-}

package/theme/badge.css

@@ -1,15 +0,0 @@
-:root,
-:host {
-  --sinch-badge-color-yellow-bg: var(--sinch-color-bolt-400);
-  --sinch-badge-color-yellow-fg: var(--sinch-color-stormy-500);
-  --sinch-badge-color-red-bg: var(--sinch-color-raspberry-500);
-  --sinch-badge-color-red-fg: var(--sinch-color-snow-100);
-  --sinch-badge-color-black-bg: var(--sinch-color-stormy-500);
-  --sinch-badge-color-black-fg: var(--sinch-color-snow-100);
-  --sinch-badge-color-gray-bg: var(--sinch-color-snow-500);
-  --sinch-badge-color-gray-fg: var(--sinch-color-stormy-500);
-  --sinch-badge-color-green-bg: var(--sinch-color-grass-400);
-  --sinch-badge-color-green-fg: var(--sinch-color-snow-100);
-  --sinch-badge-color-default-bg: var(--sinch-badge-color-red-bg);
-  --sinch-badge-color-default-fg: var(--sinch-badge-color-red-fg);
-}

package/theme/button.css

@@ -1,146 +0,0 @@
-:root,
-:host {
-  /* Primary */
-  --sinch-button-primary-color-background: var(--sinch-color-tropical-500);
-  --sinch-button-primary-color-background-hover: var(--sinch-color-tropical-400);
-  --sinch-button-primary-color-background-active: var(--sinch-color-tropical-600);
-  --sinch-button-primary-color-background-disabled: var(--sinch-color-tropical-200);
-  --sinch-button-primary-color-border: transparent;
-  --sinch-button-primary-color-border-hover: transparent;
-  --sinch-button-primary-color-border-active: transparent;
-  --sinch-button-primary-color-border-disabled: transparent;
-  --sinch-button-primary-color-text: var(--sinch-color-snow-100);
-  --sinch-button-primary-color-text-hover: var(--sinch-color-snow-100);
-  --sinch-button-primary-color-text-active: var(--sinch-color-snow-100);
-  --sinch-button-primary-color-text-disabled: var(--sinch-color-snow-100);
-  --sinch-button-primary-color-icon: var(--sinch-color-snow-100);
-  --sinch-button-primary-color-icon-hover: var(--sinch-color-snow-100);
-  --sinch-button-primary-color-icon-active: var(--sinch-color-snow-100);
-  --sinch-button-primary-color-icon-disabled: var(--sinch-color-snow-100);
-  --sinch-button-primary-mix-blend-mode: initial;
-
-  /* Secondary */
-  --sinch-button-secondary-color-background: var(--sinch-color-snow-100);
-  --sinch-button-secondary-color-background-hover: var(--sinch-color-tropical-100);
-  --sinch-button-secondary-color-background-active: var(--sinch-color-tropical-200);
-  --sinch-button-secondary-color-background-disabled: var(--sinch-color-snow-100);
-  --sinch-button-secondary-color-border: var(--sinch-color-tropical-500);
-  --sinch-button-secondary-color-border-hover: var(--sinch-color-tropical-500);
-  --sinch-button-secondary-color-border-active: var(--sinch-color-tropical-500);
-  --sinch-button-secondary-color-border-disabled: var(--sinch-color-tropical-200);
-  --sinch-button-secondary-color-text: var(--sinch-color-tropical-500);
-  --sinch-button-secondary-color-text-hover: var(--sinch-color-tropical-500);
-  --sinch-button-secondary-color-text-active: var(--sinch-color-tropical-500);
-  --sinch-button-secondary-color-text-disabled: var(--sinch-color-tropical-200);
-  --sinch-button-secondary-color-icon: var(--sinch-color-tropical-500);
-  --sinch-button-secondary-color-icon-hover: var(--sinch-color-tropical-500);
-  --sinch-button-secondary-color-icon-active: var(--sinch-color-tropical-500);
-  --sinch-button-secondary-color-icon-disabled: var(--sinch-color-tropical-200);
-  --sinch-button-secondary-mix-blend-mode: initial;
-
-  /* Tertiary */
-  --sinch-button-tertiary-color-background: transparent;
-  --sinch-button-tertiary-color-background-hover: var(--sinch-color-bg-hover);
-  --sinch-button-tertiary-color-background-active: var(--sinch-color-bg-active);
-  --sinch-button-tertiary-color-background-disabled: transparent;
-  --sinch-button-tertiary-color-border: transparent;
-  --sinch-button-tertiary-color-border-hover: transparent;
-  --sinch-button-tertiary-color-border-active: transparent;
-  --sinch-button-tertiary-color-border-disabled: transparent;
-  --sinch-button-tertiary-color-text: var(--sinch-color-tropical-500);
-  --sinch-button-tertiary-color-text-hover: var(--sinch-color-tropical-500);
-  --sinch-button-tertiary-color-text-active: var(--sinch-color-tropical-500);
-  --sinch-button-tertiary-color-text-disabled: var(--sinch-color-tropical-200);
-  --sinch-button-tertiary-color-icon: var(--sinch-color-tropical-500);
-  --sinch-button-tertiary-color-icon-hover: var(--sinch-color-tropical-500);
-  --sinch-button-tertiary-color-icon-active: var(--sinch-color-tropical-500);
-  --sinch-button-tertiary-color-icon-disabled: var(--sinch-color-tropical-200);
-  --sinch-button-tertiary-mix-blend-mode: multiply;
-
-  /* Cta Primary */
-  --sinch-button-cta-primary-color-background: var(--sinch-color-honey-500);
-  --sinch-button-cta-primary-color-background-hover: var(--sinch-color-honey-400);
-  --sinch-button-cta-primary-color-background-active: var(--sinch-color-honey-600);
-  --sinch-button-cta-primary-color-background-disabled: var(--sinch-color-honey-200);
-  --sinch-button-cta-primary-color-border: transparent;
-  --sinch-button-cta-primary-color-border-hover: transparent;
-  --sinch-button-cta-primary-color-border-active: transparent;
-  --sinch-button-cta-primary-color-border-disabled: transparent;
-  --sinch-button-cta-primary-color-text: var(--sinch-color-stormy-500);
-  --sinch-button-cta-primary-color-text-hover: var(--sinch-color-stormy-500);
-  --sinch-button-cta-primary-color-text-active: var(--sinch-color-stormy-500);
-  --sinch-button-cta-primary-color-text-disabled: var(--sinch-color-stormy-300);
-  --sinch-button-cta-primary-color-icon: var(--sinch-color-stormy-500);
-  --sinch-button-cta-primary-color-icon-hover: var(--sinch-color-stormy-500);
-  --sinch-button-cta-primary-color-icon-active: var(--sinch-color-stormy-500);
-  --sinch-button-cta-primary-color-icon-disabled: var(--sinch-color-stormy-300);
-  --sinch-button-cta-primary-mix-blend-mode: initial;
-
-  /* Cta Secondary */
-  --sinch-button-cta-secondary-color-background: var(--sinch-color-snow-100);
-  --sinch-button-cta-secondary-color-background-hover: var(--sinch-color-snow-200);
-  --sinch-button-cta-secondary-color-background-active: var(--sinch-color-snow-400);
-  --sinch-button-cta-secondary-color-background-disabled: var(--sinch-color-snow-100);
-  --sinch-button-cta-secondary-color-border: var(--sinch-color-stormy-500);
-  --sinch-button-cta-secondary-color-border-hover: var(--sinch-color-stormy-500);
-  --sinch-button-cta-secondary-color-border-active: var(--sinch-color-stormy-500);
-  --sinch-button-cta-secondary-color-border-disabled: var(--sinch-color-stormy-100);
-  --sinch-button-cta-secondary-color-text: var(--sinch-color-stormy-500);
-  --sinch-button-cta-secondary-color-text-hover: var(--sinch-color-stormy-500);
-  --sinch-button-cta-secondary-color-text-active: var(--sinch-color-stormy-500);
-  --sinch-button-cta-secondary-color-text-disabled: var(--sinch-color-stormy-100);
-  --sinch-button-cta-secondary-color-icon: var(--sinch-color-stormy-500);
-  --sinch-button-cta-secondary-color-icon-hover: var(--sinch-color-stormy-500);
-  --sinch-button-cta-secondary-color-icon-active: var(--sinch-color-stormy-500);
-  --sinch-button-cta-secondary-color-icon-disabled: var(--sinch-color-stormy-100);
-  --sinch-button-cta-secondary-mix-blend-mode: initial;
-
-  /* Destructive */
-  --sinch-button-destructive-color-background: var(--sinch-color-snow-100);
-  --sinch-button-destructive-color-background-hover: var(--sinch-color-raspberry-100);
-  --sinch-button-destructive-color-background-active: var(--sinch-color-raspberry-100);
-  --sinch-button-destructive-color-background-disabled: var(--sinch-color-snow-100);
-  --sinch-button-destructive-color-border: var(--sinch-color-raspberry-500);
-  --sinch-button-destructive-color-border-hover: var(--sinch-color-raspberry-500);
-  --sinch-button-destructive-color-border-active: var(--sinch-color-raspberry-500);
-  --sinch-button-destructive-color-border-disabled: var(--sinch-color-raspberry-200);
-  --sinch-button-destructive-color-text: var(--sinch-color-raspberry-500);
-  --sinch-button-destructive-color-text-hover: var(--sinch-color-raspberry-500);
-  --sinch-button-destructive-color-text-active: var(--sinch-color-raspberry-500);
-  --sinch-button-destructive-color-text-disabled: var(--sinch-color-raspberry-200);
-  --sinch-button-destructive-color-icon: var(--sinch-color-raspberry-500);
-  --sinch-button-destructive-color-icon-hover: var(--sinch-color-raspberry-500);
-  --sinch-button-destructive-color-icon-active: var(--sinch-color-raspberry-500);
-  --sinch-button-destructive-color-icon-disabled: var(--sinch-color-raspberry-200);
-  --sinch-button-destructive-mix-blend-mode: initial;
-
-  /* Default */
-  --sinch-button-color-background: var(--sinch-button-primary-color-background);
-  --sinch-button-color-background-hover: var(--sinch-button-primary-color-background-hover);
-  --sinch-button-color-background-active: var(--sinch-button-primary-color-background-active);
-  --sinch-button-color-background-disabled: var(--sinch-button-primary-color-background-disabled);
-  --sinch-button-color-border: var(--sinch-button-primary-color-border);
-  --sinch-button-color-border-hover: var(--sinch-button-primary-color-border-hover);
-  --sinch-button-color-border-active: var(--sinch-button-primary-color-border-active);
-  --sinch-button-color-border-disabled: var(--sinch-button-primary-color-border-disabled);
-  --sinch-button-color-text: var(--sinch-button-primary-color-text);
-  --sinch-button-color-text-hover: var(--sinch-button-primary-color-text-hover);
-  --sinch-button-color-text-active: var(--sinch-button-primary-color-text-active);
-  --sinch-button-color-text-disabled: var(--sinch-button-primary-color-text-disabled);
-  --sinch-button-color-icon: var(--sinch-button-primary-color-icon);
-  --sinch-button-color-icon-hover: var(--sinch-button-primary-color-icon-hover);
-  --sinch-button-color-icon-active: var(--sinch-button-primary-color-icon-active);
-  --sinch-button-color-icon-disabled: var(--sinch-button-primary-color-icon-disabled);
-  --sinch-button-mix-blend-mode: var(--sinch-button-primary-mix-blend-mode);
-
-  /* Font */
-  --sinch-button-font-l: 700 16px/24px var(--sinch-font-family);
-  --sinch-button-font-m: 700 16px/24px var(--sinch-font-family);
-  --sinch-button-font-s: 700 14px/20px var(--sinch-font-family);
-  --sinch-button-font: var(--sinch-button-font-m);
-
-  /* Icon Size */
-  --sinch-button-icon-size-l: 24px;
-  --sinch-button-icon-size-m: 24px;
-  --sinch-button-icon-size-s: 16px;
-}

package/theme/chat.css

@@ -1,9 +0,0 @@
-:root,
-:host {
-  --sinch-chat-icon-font-variation-settings: "FILL" 0;
-  --sinch-chat-icon-sending: query_builder;
-  --sinch-chat-icon-sent: check;
-  --sinch-chat-icon-received: done_all;
-  --sinch-chat-icon-seen: done_all;
-  --sinch-chat-icon-error: error_outline;
-}

package/theme/chip.css

@@ -1,68 +0,0 @@
-:root,
-:host {
-  --sinch-chip-color-default-bg: var(--sinch-color-snow-500);
-  --sinch-chip-color-default-fg: var(--sinch-color-stormy-500);
-  --sinch-chip-color-light-blue-bg: var(--sinch-color-night-200);
-  --sinch-chip-color-light-blue-fg: var(--sinch-color-night-700);
-  --sinch-chip-color-light-brown-bg: var(--sinch-color-mud-200);
-  --sinch-chip-color-light-brown-fg: var(--sinch-color-mud-700);
-  --sinch-chip-color-light-gray-bg: var(--sinch-color-dirt-200);
-  --sinch-chip-color-light-gray-fg: var(--sinch-color-dirt-700);
-  --sinch-chip-color-light-green-bg: var(--sinch-color-grass-200);
-  --sinch-chip-color-light-green-fg: var(--sinch-color-grass-700);
-  --sinch-chip-color-light-orange-bg: var(--sinch-color-orange-200);
-  --sinch-chip-color-light-orange-fg: var(--sinch-color-orange-700);
-  --sinch-chip-color-light-pink-bg: var(--sinch-color-candy-200);
-  --sinch-chip-color-light-pink-fg: var(--sinch-color-candy-700);
-  --sinch-chip-color-light-violet-bg: var(--sinch-color-violet-200);
-  --sinch-chip-color-light-violet-fg: var(--sinch-color-violet-700);
-  --sinch-chip-color-light-yellow-bg: var(--sinch-color-bolt-200);
-  --sinch-chip-color-light-yellow-fg: var(--sinch-color-bolt-700);
-  --sinch-chip-color-light-red-bg: var(--sinch-color-jasper-200);
-  --sinch-chip-color-light-red-fg: var(--sinch-color-jasper-700);
-  --sinch-chip-color-dark-blue-bg: var(--sinch-color-night-700);
-  --sinch-chip-color-dark-blue-fg: var(--sinch-color-night-200);
-  --sinch-chip-color-dark-brown-bg: var(--sinch-color-mud-700);
-  --sinch-chip-color-dark-brown-fg: var(--sinch-color-mud-200);
-  --sinch-chip-color-dark-gray-bg: var(--sinch-color-dirt-700);
-  --sinch-chip-color-dark-gray-fg: var(--sinch-color-dirt-200);
-  --sinch-chip-color-dark-green-bg: var(--sinch-color-grass-700);
-  --sinch-chip-color-dark-green-fg: var(--sinch-color-grass-200);
-  --sinch-chip-color-dark-orange-bg: var(--sinch-color-orange-700);
-  --sinch-chip-color-dark-orange-fg: var(--sinch-color-orange-200);
-  --sinch-chip-color-dark-pink-bg: var(--sinch-color-candy-700);
-  --sinch-chip-color-dark-pink-fg: var(--sinch-color-candy-200);
-  --sinch-chip-color-dark-violet-bg: var(--sinch-color-violet-700);
-  --sinch-chip-color-dark-violet-fg: var(--sinch-color-violet-200);
-  --sinch-chip-color-dark-yellow-bg: var(--sinch-color-bolt-700);
-  --sinch-chip-color-dark-yellow-fg: var(--sinch-color-bolt-200);
-  --sinch-chip-color-dark-red-bg: var(--sinch-color-jasper-700);
-  --sinch-chip-color-dark-red-fg: var(--sinch-color-jasper-200);
-  --sinch-chip-color-blue-bg: var(--sinch-color-night-400);
-  --sinch-chip-color-blue-fg: var(--sinch-color-snow-100);
-  --sinch-chip-color-brown-bg: var(--sinch-color-mud-400);
-  --sinch-chip-color-brown-fg: var(--sinch-color-snow-100);
-  --sinch-chip-color-gray-bg: var(--sinch-color-dirt-400);
-  --sinch-chip-color-gray-fg: var(--sinch-color-snow-100);
-  --sinch-chip-color-green-bg: var(--sinch-color-grass-400);
-  --sinch-chip-color-green-fg: var(--sinch-color-stormy-500);
-  --sinch-chip-color-orange-bg: var(--sinch-color-orange-400);
-  --sinch-chip-color-orange-fg: var(--sinch-color-stormy-500);
-  --sinch-chip-color-pink-bg: var(--sinch-color-candy-400);
-  --sinch-chip-color-pink-fg: var(--sinch-color-stormy-500);
-  --sinch-chip-color-violet-bg: var(--sinch-color-violet-400);
-  --sinch-chip-color-violet-fg: var(--sinch-color-stormy-500);
-  --sinch-chip-color-yellow-bg: var(--sinch-color-bolt-400);
-  --sinch-chip-color-yellow-fg: var(--sinch-color-stormy-500);
-  --sinch-chip-color-red-bg: var(--sinch-color-jasper-400);
-  --sinch-chip-color-red-fg: var(--sinch-color-stormy-500);
-  --sinch-chip-color-celtic-bg: var(--sinch-color-feedback-info-bg);
-  --sinch-chip-color-celtic-fg: var(--sinch-color-feedback-info-contrast);
-  --sinch-chip-color-olive-bg: var(--sinch-color-feedback-success-bg);
-  --sinch-chip-color-olive-fg: var(--sinch-color-feedback-success-contrast);
-  --sinch-chip-color-pumpkin-bg: var(--sinch-color-feedback-warning-bg);
-  --sinch-chip-color-pumpkin-fg: var(--sinch-color-feedback-warning-contrast);
-  --sinch-chip-color-jasper-bg: var(--sinch-color-feedback-invalid-bg);
-  --sinch-chip-color-jasper-fg: var(--sinch-color-feedback-invalid-contrast);
-  --sinch-chip-icon-close: cancel;
-}

package/theme/color-menu.css

@@ -1,4 +0,0 @@
-:root,
-:host {
-  --sinch-color-menu-icon-check: check;
-}

package/theme/color-swatch.css

@@ -1,71 +0,0 @@
-:root,
-:host {
-  --sinch-color-swatch-color-default-bg: var(--sinch-color-snow-500);
-  --sinch-color-swatch-color-default-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-light-blue-bg: var(--sinch-color-night-200);
-  --sinch-color-swatch-color-light-blue-fg: var(--sinch-color-night-700);
-  --sinch-color-swatch-color-light-brown-bg: var(--sinch-color-mud-200);
-  --sinch-color-swatch-color-light-brown-fg: var(--sinch-color-mud-700);
-  --sinch-color-swatch-color-light-gray-bg: var(--sinch-color-dirt-200);
-  --sinch-color-swatch-color-light-gray-fg: var(--sinch-color-dirt-700);
-  --sinch-color-swatch-color-light-green-bg: var(--sinch-color-grass-200);
-  --sinch-color-swatch-color-light-green-fg: var(--sinch-color-grass-700);
-  --sinch-color-swatch-color-light-orange-bg: var(--sinch-color-orange-200);
-  --sinch-color-swatch-color-light-orange-fg: var(--sinch-color-orange-700);
-  --sinch-color-swatch-color-light-pink-bg: var(--sinch-color-candy-200);
-  --sinch-color-swatch-color-light-pink-fg: var(--sinch-color-candy-700);
-  --sinch-color-swatch-color-light-violet-bg: var(--sinch-color-violet-200);
-  --sinch-color-swatch-color-light-violet-fg: var(--sinch-color-violet-700);
-  --sinch-color-swatch-color-light-yellow-bg: var(--sinch-color-bolt-200);
-  --sinch-color-swatch-color-light-yellow-fg: var(--sinch-color-bolt-700);
-  --sinch-color-swatch-color-light-red-bg: var(--sinch-color-jasper-200);
-  --sinch-color-swatch-color-light-red-fg: var(--sinch-color-jasper-700);
-  --sinch-color-swatch-color-dark-blue-bg: var(--sinch-color-night-700);
-  --sinch-color-swatch-color-dark-blue-fg: var(--sinch-color-night-200);
-  --sinch-color-swatch-color-dark-brown-bg: var(--sinch-color-mud-700);
-  --sinch-color-swatch-color-dark-brown-fg: var(--sinch-color-mud-200);
-  --sinch-color-swatch-color-dark-gray-bg: var(--sinch-color-dirt-700);
-  --sinch-color-swatch-color-dark-gray-fg: var(--sinch-color-dirt-200);
-  --sinch-color-swatch-color-dark-green-bg: var(--sinch-color-grass-700);
-  --sinch-color-swatch-color-dark-green-fg: var(--sinch-color-grass-200);
-  --sinch-color-swatch-color-dark-orange-bg: var(--sinch-color-orange-700);
-  --sinch-color-swatch-color-dark-orange-fg: var(--sinch-color-orange-200);
-  --sinch-color-swatch-color-dark-pink-bg: var(--sinch-color-candy-700);
-  --sinch-color-swatch-color-dark-pink-fg: var(--sinch-color-candy-200);
-  --sinch-color-swatch-color-dark-violet-bg: var(--sinch-color-violet-700);
-  --sinch-color-swatch-color-dark-violet-fg: var(--sinch-color-violet-200);
-  --sinch-color-swatch-color-dark-yellow-bg: var(--sinch-color-bolt-700);
-  --sinch-color-swatch-color-dark-yellow-fg: var(--sinch-color-bolt-200);
-  --sinch-color-swatch-color-dark-red-bg: var(--sinch-color-jasper-700);
-  --sinch-color-swatch-color-dark-red-fg: var(--sinch-color-jasper-200);
-  --sinch-color-swatch-color-blue-bg: var(--sinch-color-night-400);
-  --sinch-color-swatch-color-blue-fg: var(--sinch-color-snow-100);
-  --sinch-color-swatch-color-brown-bg: var(--sinch-color-mud-400);
-  --sinch-color-swatch-color-brown-fg: var(--sinch-color-snow-100);
-  --sinch-color-swatch-color-gray-bg: var(--sinch-color-dirt-400);
-  --sinch-color-swatch-color-gray-fg: var(--sinch-color-snow-100);
-  --sinch-color-swatch-color-green-bg: var(--sinch-color-grass-400);
-  --sinch-color-swatch-color-green-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-orange-bg: var(--sinch-color-orange-400);
-  --sinch-color-swatch-color-orange-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-pink-bg: var(--sinch-color-candy-400);
-  --sinch-color-swatch-color-pink-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-violet-bg: var(--sinch-color-violet-400);
-  --sinch-color-swatch-color-violet-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-yellow-bg: var(--sinch-color-bolt-400);
-  --sinch-color-swatch-color-yellow-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-red-bg: var(--sinch-color-jasper-400);
-  --sinch-color-swatch-color-red-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-skin-tone-0-bg: var(--sinch-color-skin-tone-0);
-  --sinch-color-swatch-color-skin-tone-0-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-skin-tone-10-bg: var(--sinch-color-skin-tone-10);
-  --sinch-color-swatch-color-skin-tone-10-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-skin-tone-20-bg: var(--sinch-color-skin-tone-20);
-  --sinch-color-swatch-color-skin-tone-20-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-skin-tone-30-bg: var(--sinch-color-skin-tone-30);
-  --sinch-color-swatch-color-skin-tone-30-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-skin-tone-40-bg: var(--sinch-color-skin-tone-40);
-  --sinch-color-swatch-color-skin-tone-40-fg: var(--sinch-color-stormy-500);
-  --sinch-color-swatch-color-skin-tone-50-bg: var(--sinch-color-skin-tone-50);
-  --sinch-color-swatch-color-skin-tone-50-fg: var(--sinch-color-snow-100);
-}

package/theme/colors.d.ts

@@ -1,4 +0,0 @@
-export declare const lightColorNames: string;
-export declare const darkColorNames: string;
-export declare const vibrantColorNames: string;
-export declare const skinToneColorNames: string;

package/theme/colors.js

@@ -1,4 +0,0 @@
-export const lightColorNames = ['light-violet', 'light-blue', 'light-green', 'light-yellow', 'light-orange', 'light-red', 'light-pink', 'light-brown', 'light-gray'].join(',');
-export const darkColorNames = ['dark-violet', 'dark-blue', 'dark-green', 'dark-yellow', 'dark-orange', 'dark-red', 'dark-pink', 'dark-brown', 'dark-gray'].join(',');
-export const vibrantColorNames = ['violet', 'blue', 'green', 'yellow', 'orange', 'red', 'pink', 'brown', 'gray'].join(',');
-export const skinToneColorNames = ['skin-tone-0', 'skin-tone-10', 'skin-tone-20', 'skin-tone-30', 'skin-tone-40', 'skin-tone-50'].join(',');