@nectary/components 0.21.0 → 0.22.0

package/icon/filter-list/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconElement, TSinchIconReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-filter-list': TSinchIconReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-filter-list': TSinchIconElement;
+    }
+}

package/icon/filter-list/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 18h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1ZM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1Zm4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1Z"/></svg>';
+defineCustomElement('sinch-icon-filter-list', createIconClass(templateHTML));

package/icon-button/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getBooleanAttribute, isAttrTrue, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:4px;background-color:transparent;box-shadow:0 0 0 1px transparent inset;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-color-stormy-500)}button:focus{box-shadow:0 0 0 1px var(--sinch-color-stormy-500) inset}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border-radius:4px;background-color:transparent;box-shadow:0 0 0 1px transparent inset;cursor:pointer;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500))}button:focus{box-shadow:0 0 0 1px var(--sinch-color-stormy-500) inset}button:hover{background-color:var(--sinch-color-snow-500)}button:active{background-color:var(--sinch-color-snow-600)}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false]))>button{width:32px;height:32px}button>*{pointer-events:none}</style><button><slot name="icon"></slot></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-icon-button', (_$button = new WeakMap(), class extends HTMLElement {

package/index.d.ts

@@ -90,6 +90,7 @@ import './icon/arrow-right';
 import './icon/campaign';
 import './icon/check';
 import './icon/double-arrow';
+import './icon/filter-list';
 import './icon/first-page';
 import './icon/fullscreen';
 import './icon/fullscreen-exit';
@@ -114,7 +115,6 @@ import './table';
 import './table-cell';
 import './table-head';
 import './table-head-cell';
-import './table-head-sort';
 import './table-body';
 import './table-row';
 import './spinner';

package/index.js

@@ -90,6 +90,7 @@ import './icon/arrow-right';
 import './icon/campaign';
 import './icon/check';
 import './icon/double-arrow';
+import './icon/filter-list';
 import './icon/first-page';
 import './icon/fullscreen';
 import './icon/fullscreen-exit';
@@ -114,7 +115,6 @@ import './table';
 import './table-cell';
 import './table-head';
 import './table-head-cell';
-import './table-head-sort';
 import './table-body';
 import './table-row';
 import './spinner';

package/input/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 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, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#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-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}: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-s);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])){--sinch-color-icon: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><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100)}#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-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}: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-s);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])){--sinch-color-icon: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><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const inputTypes = ['text', 'password'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "files": [
     "theme.css",
     "**/*/*.js",

package/search/index.js

@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
 
 import { isSearchOptionElement } from '../search-option';
 import { attrValueToPixels, defineCustomElement, getAttribute, getIntegerAttribute, getRect, updateAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto;contain:content}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto;contain:content}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
 import '../icon/search';
 import '../icon/close';
 import '../icon-button';

package/table-body/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement } from '../utils';
-const templateHTML = '<style>:host{display:table-row-group}</style><slot></slot>';
+const templateHTML = '<style>:host{display:table-row-group}::slotted(sinch-table-row:hover){background-color:var(--sinch-color-tropical-50)}::slotted(sinch-table-row[selected]:not([selected=false])){background-color:var(--sinch-color-tropical-100)}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-table-body', class extends HTMLElement {

package/table-head-cell/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 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, getLiteralAttribute, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);display:flex;align-items:center;gap:4px}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end]) #text{margin-left:auto}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}::slotted(sinch-help-tooltip){position:relative;z-index:1}</style><slot name="checkbox"></slot><div id="wrapper"><span id="text"></span><slot name="tooltip"></slot><slot name="sort"></slot></div>';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);--sinch-icon-button-color:var(--sinch-color-stormy-100)}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}</style><slot name="checkbox"></slot><div id="wrapper"><slot name="left"></slot><span id="text"></span><slot name="tooltip"></slot><slot name="right"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const alignValues = ['start', 'center', 'end'];

package/table-row/index.d.ts

@@ -1,9 +1,11 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchTableRowElement = HTMLElement & {
     sticky: boolean;
+    selected: boolean;
 };
 export declare type TSinchTableRowReact = TSinchElementReact<TSinchTableRowElement> & {
     sticky?: boolean;
+    selected?: boolean;
 };
 declare global {
     namespace JSX {

package/table-row/index.js

@@ -23,4 +23,12 @@ defineCustomElement('sinch-table-row', class extends HTMLElement {
     return getBooleanAttribute(this, 'sticky');
   }
 
+  set selected(isSelected) {
+    updateBooleanAttribute(this, 'selected', isSelected);
+  }
+
+  get selected() {
+    return getBooleanAttribute(this, 'selected');
+  }
+
 });

package/textarea/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 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, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;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:none}#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-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}: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-s);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])){--sinch-color-icon: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"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);background-color:var(--sinch-color-snow-100);resize:none}#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-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}: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-s);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])){--sinch-color-icon: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"></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(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {

package/theme.css

@@ -15,6 +15,7 @@
   --sinch-color-tropical-300: #66AAAA;
   --sinch-color-tropical-200: #99C6C6;
   --sinch-color-tropical-100: #CCE3E3;
+  --sinch-color-tropical-50: #E5F1F1;
   --sinch-color-stormy-600: #061927;
   --sinch-color-stormy-500: #0A273D;
   --sinch-color-stormy-400: #3B5264;
@@ -33,6 +34,7 @@
   --sinch-color-raspberry-300: #EE778B;
   --sinch-color-raspberry-200: #F4A4B1;
   --sinch-color-raspberry-100: #F9D2D8;
+  --sinch-color-raspberry-50: #FCE8EB;
   --sinch-color-text-default: #0A273D;
   --sinch-color-text-inverted: #FFFFFF;
   --sinch-color-text-muted: #677784;

package/table-head-sort/index.d.ts

@@ -1,26 +0,0 @@
-import '../icon/north';
-import '../icon/south';
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent, SyntheticEvent } from 'react';
-export declare type TSinchTableHeaderSortElement = HTMLElement & {
-    value: boolean;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchTableHeaderSortReact = TSinchElementReact<TSinchTableHeaderSortElement> & {
-    value: boolean;
-    'aria-label': string;
-    onChange: (e: SyntheticEvent<TSinchTableHeaderSortElement, CustomEvent<boolean>>) => void;
-    onFocus?: (e: FocusEvent<TSinchTableHeaderSortElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchTableHeaderSortElement>) => void;
-};
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-table-head-sort': TSinchTableHeaderSortReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-table-head-sort': TSinchTableHeaderSortElement;
-    }
-}

package/table-head-sort/index.js

@@ -1,94 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$input;
-
-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/north';
-import '../icon/south';
-import { defineCustomElement, getBooleanAttribute, isAttrTrue, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents;--sinch-size-icon:16px}input{all:initial;position:absolute;width:100%;height:100%;box-sizing:border-box;cursor:pointer}#up{display:none}#down{display:block}:host([value]:not([value=false])) #up{display:block}:host([value]:not([value=false])) #down{display:none}</style><sinch-icon-north id="up"></sinch-icon-north><sinch-icon-south id="down"></sinch-icon-south><input type="checkbox"/>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-table-head-sort', (_$input = new WeakMap(), class extends HTMLElement {
-  constructor() {
-    super();
-
-    _classPrivateFieldInitSpec(this, _$input, {
-      writable: true,
-      value: void 0
-    });
-
-    _defineProperty(this, 'onCheckboxInput', e => {
-      e.stopPropagation();
-
-      const isChecked = _classPrivateFieldGet(this, _$input).checked;
-
-      _classPrivateFieldGet(this, _$input).checked = this.value;
-      this.dispatchEvent(new CustomEvent('change', {
-        detail: isChecked,
-        bubbles: true
-      }));
-    });
-
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
-    shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
-  }
-
-  connectedCallback() {
-    this.setAttribute('role', 'checkbox');
-
-    _classPrivateFieldGet(this, _$input).addEventListener('input', this.onCheckboxInput);
-  }
-
-  disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', this.onCheckboxInput);
-  }
-
-  get type() {
-    return 'text';
-  }
-
-  get nodeName() {
-    return 'input';
-  }
-
-  static get observedAttributes() {
-    return ['value'];
-  }
-
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'value':
-        {
-          _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
-          break;
-        }
-    }
-  }
-
-  set value(isChecked) {
-    updateBooleanAttribute(this, 'value', isChecked);
-  }
-
-  get value() {
-    return getBooleanAttribute(this, 'value');
-  }
-
-  focus() {
-    _classPrivateFieldGet(this, _$input).focus();
-  }
-
-  blur() {
-    _classPrivateFieldGet(this, _$input).blur();
-  }
-
-}));