@nectary/components 5.0.2 → 5.0.4

package/bundle.js

@@ -177,7 +177,7 @@ class NectaryElement extends NectaryElementBase {
     return this.#isDomConnected;
   }
 }
-const templateHTML$1c = '<style>\n:host {\n  display: inline-block;\n}\n\n#icon {\n  display: block;\n  font-weight: var(--sinch-comp-icon-font-weight);\n  font-size: var(--sinch-global-size-icon, 24px);\n  -webkit-font-smoothing: antialiased;\n  line-height: 1;\n  white-space: nowrap;\n  width: var(--sinch-global-size-icon, 24px);\n  height: var(--sinch-global-size-icon, 24px);\n  color: var(--sinch-global-color-icon, var(--sinch-sys-color-text-default));\n  user-select: none;\n  font-family: var(--sinch-comp-icon-font-family);\n  font-feature-settings: var(--sinch-comp-icon-font-feature-settings);\n}\n\n#icon.zero-to-d {\n  font-family: var(--sinch-comp-icon-font-family-zero-to-d);\n}\n\n#icon.e-to-o {\n  font-family: var(--sinch-comp-icon-font-family-e-to-o);\n}\n\n#icon.p-to-z {\n  font-family: var(--sinch-comp-icon-font-family-p-to-z);\n}\n</style>\n\n<span id="icon" role="img"></span>\n';
+const templateHTML$1c = '<style>:host{display:inline-block}#icon{display:block;font-weight:var(--sinch-comp-icon-font-weight);font-size:var(--sinch-global-size-icon, 24px);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-global-size-icon,24px);height:var(--sinch-global-size-icon,24px);color:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));user-select:none;font-family:var(--sinch-comp-icon-font-family);font-feature-settings:var(--sinch-comp-icon-font-feature-settings)}#icon.zero-to-d{font-family:var(--sinch-comp-icon-font-family-zero-to-d)}#icon.e-to-o{font-family:var(--sinch-comp-icon-font-family-e-to-o)}#icon.p-to-z{font-family:var(--sinch-comp-icon-font-family-p-to-z)}</style><span id="icon" role="img"></span>';
 const template$1c = document.createElement("template");
 template$1c.innerHTML = templateHTML$1c;
 class Icon extends NectaryElement {
@@ -235,7 +235,7 @@ class Icon extends NectaryElement {
 }
 defineCustomElement("sinch-icon", Icon);
 const typeValues$7 = ["m", "s", "xs", "xxs"];
-const templateHTML$1b = '<style>\n  :host {\n    text-align: var(--sinch-comp-text-align);\n    display: block;\n    font: var(--sinch-comp-text-font);\n    color: var(--sinch-global-color-text, var(--sinch-sys-color-text-default));\n\n    --sinch-comp-text-font: var(--sinch-sys-font-body-m);\n    --sinch-comp-text-align: unset;\n  }\n\n  :host([inline]) {\n    display: inline;\n  }\n\n  :host([type="s"]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-s);\n  }\n\n  :host([type="xs"]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-xs);\n  }\n\n  :host([type="xxs"]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-xxs);\n  }\n\n  :host([type="m"][emphasized]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-emphasize);\n  }\n\n  :host([type="s"][emphasized]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-emphasize-s);\n  }\n\n  :host([ellipsis]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    --sinch-global-text-white-space: nowrap;\n  }\n</style>\n\n<slot></slot>';
+const templateHTML$1b = '<style>:host{text-align:var(--sinch-comp-text-align);display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m);--sinch-comp-text-align:unset}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
 const template$1b = document.createElement("template");
 template$1b.innerHTML = templateHTML$1b;
 class Text extends NectaryElement {
@@ -300,7 +300,7 @@ class Text extends NectaryElement {
 }
 defineCustomElement("sinch-text", Text);
 const typeValues$6 = ["xl", "l", "m", "s", "xs"];
-const templateHTML$1a = '<style>\n:host {\n  display: block;\n\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-m);\n}\n\n:host([type="xl"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-xl);\n}\n\n:host([type="l"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-l);\n}\n\n:host([type="m"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-m);\n}\n\n:host([type="s"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-s);\n}\n\n:host([type="xs"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-xs);\n}\n\n#text {\n  letter-spacing: -2%;\n  color: var(--sinch-global-color-text, var(--sinch-sys-color-text-default));\n  font: var(--sinch-comp-title-font);\n}\n\n:host([ellipsis]) #text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n</style>\n\n<span id="text"></span>\n';
+const templateHTML$1a = '<style>:host{display:block;--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type=xl]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xl)}:host([type="l"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-l)}:host([type="m"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type="s"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-s)}:host([type=xs]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xs)}#text{letter-spacing:-2%;color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));font:var(--sinch-comp-title-font)}:host([ellipsis]) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
 const template$1a = document.createElement("template");
 template$1a.innerHTML = templateHTML$1a;
 class Title extends NectaryElement {
@@ -357,7 +357,7 @@ class Title extends NectaryElement {
 }
 defineCustomElement("sinch-title", Title);
 const statusValues$1 = ["info", "success", "warn", "error"];
-const templateHTML$19 = '<style>\n  :host {\n    display: block;\n    outline: none;\n    min-height: 48px;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    border-bottom:\n      1px solid\n      var(--sinch-comp-accordion-color-default-border-initial);\n  }\n\n  :host(:last-child) > #wrapper {\n    border-bottom: none;\n  }\n\n  #button {\n    all: initial;\n    display: flex;\n    position: relative;\n    align-items: center;\n    gap: 8px;\n    box-sizing: border-box;\n    width: 100%;\n    height: 48px;\n    padding: 0 4px 0 8px;\n    cursor: pointer;\n\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-accordion-color-default-icon-initial\n      );\n    --sinch-global-size-icon: var(--sinch-comp-accordion-size-icon);\n  }\n\n  #button > * {\n    pointer-events: none;\n  }\n\n  #button:disabled {\n    cursor: initial;\n\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-accordion-color-disabled-icon-initial\n      );\n  }\n\n  #button:focus-visible::after {\n    content: "";\n    position: absolute;\n    inset: 0;\n    border: 2px solid var(--sinch-comp-accordion-color-default-outline-focus);\n    pointer-events: none;\n  }\n\n  #status-wrapper {\n    display: none;\n    width: 18px;\n    height: 24px;\n    padding: 8px 8px 8px 2px;\n    box-sizing: border-box;\n  }\n\n  #status {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n  }\n\n  :host([status]:not([status=""])) #status-wrapper {\n    display: block;\n  }\n\n  :host([status="success"]) #status {\n    background-color: var(--sinch-comp-accordion-color-default-status-success);\n  }\n\n  :host([status="warn"]) #status {\n    background-color: var(--sinch-comp-accordion-color-default-status-warning);\n  }\n\n  :host([status="error"]) #status {\n    background-color: var(--sinch-comp-accordion-color-default-status-error);\n  }\n\n  :host([status="info"]) #status {\n    background-color: var(--sinch-comp-accordion-color-default-status-info);\n  }\n\n  #title {\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-title-font: var(--sinch-comp-accordion-font-title);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-accordion-color-default-title-initial\n      );\n  }\n\n  #button:disabled > #title {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-accordion-color-disabled-title-initial\n      );\n  }\n\n  #content {\n    display: none;\n    overflow-y: auto;\n    flex-shrink: 1;\n    min-height: 0;\n    padding: 0 8px 12px;\n  }\n\n  #dropdown-icon {\n    transform: rotate(0deg);\n    will-change: transform;\n    transition: transform 0.25s ease-in-out;\n  }\n\n  #button[aria-expanded="true"] > #dropdown-icon {\n    transform: rotate(180deg);\n  }\n\n  #button[aria-expanded="true"] + #content {\n    display: block;\n  }\n\n  #optional {\n    --sinch-comp-text-font: var(--sinch-comp-accordion-font-optional-text);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-accordion-color-default-optional-text-initial\n      );\n  }\n\n  #button:disabled > #optional {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-accordion-color-disabled-optional-text-initial\n      );\n  }\n</style>\n\n<div id="wrapper">\n  <button id="button" aria-controls="content" aria-expanded="false">\n    <div id="status-wrapper">\n      <div id="status"></div>\n    </div>\n    <slot name="icon"></slot>\n    <sinch-title id="title" level="3" type="m" ellipsis></sinch-title>\n    <sinch-text id="optional" type="m"></sinch-text>\n    <sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon>\n  </button>\n  <div id="content" role="region" aria-labelledby="button">\n    <slot name="content"></slot>\n  </div>\n</div>\n';
+const templateHTML$19 = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:0 4px 0 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 const template$19 = document.createElement("template");
 template$19.innerHTML = templateHTML$19;
 class AccordionItem extends NectaryElement {
@@ -504,7 +504,7 @@ const getTargetIndexInParent = (e, parent) => {
   }
   return -1;
 };
-const templateHTML$18 = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n}\n\n::slotted(sinch-accordion-item) {\n  flex-shrink: 1;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML$18 = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}::slotted(sinch-accordion-item){flex-shrink:1}</style><div id="wrapper"><slot></slot></div>';
 const template$18 = document.createElement("template");
 template$18.innerHTML = templateHTML$18;
 class Accordion extends NectaryElement {
@@ -586,10 +586,11 @@ class Accordion extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-accordion", Accordion);
-const templateHTML$17 = '<style>\n:host {\n  display: block;\n  cursor: pointer;\n}\n\n:host([disabled]) {\n  cursor: initial;\n}\n\n#wrapper {\n  all: initial;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  height: 40px;\n  width: 100%;\n  padding: 8px 16px;\n  align-items: center;\n  gap: 10px;\n  user-select: none;\n  background-color: var(--sinch-comp-action-menu-color-default-background-initial);\n\n  --sinch-global-color-text: var(--sinch-comp-action-menu-color-default-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-action-menu-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-action-menu-size-icon);\n}\n\n:host([data-selected]) > #wrapper {\n  background-color: var(--sinch-comp-action-menu-color-default-background-selected);\n}\n\n:host(:hover) > #wrapper {\n  background-color: var(--sinch-comp-action-menu-color-default-background-hover);\n}\n\n:host([disabled]) > #wrapper {\n  pointer-events: none;\n  background-color: var(--sinch-comp-action-menu-color-disabled-background-initial);\n\n  --sinch-global-color-text: var(--sinch-comp-action-menu-color-disabled-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-action-menu-color-disabled-icon-initial);\n}\n\n#content {\n  flex: 1;\n  min-width: 0;\n\n  --sinch-comp-text-font: var(--sinch-comp-action-menu-font-option);\n}\n\n::slotted(*) {\n  margin-left: -6px;\n}\n</style>\n\n<div id="wrapper" inert>\n  <slot name="icon"></slot>\n  <sinch-text id="content" type="m" ellipsis></sinch-text>\n</div>\n';
+const templateHTML$17 = '<style>:host{display:block;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;background-color:var(--sinch-comp-action-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-action-menu-size-icon)}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-hover)}:host([disabled])>#wrapper{pointer-events:none;background-color:var(--sinch-comp-action-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-disabled-icon-initial)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-action-menu-font-option)}::slotted(*){margin-left:-6px}</style><div id="wrapper" inert><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
 const template$17 = document.createElement("template");
 template$17.innerHTML = templateHTML$17;
 class ActionMenuOption extends NectaryElement {
@@ -736,7 +737,7 @@ const subscribeContext = ($el, name, cb, signal) => {
     );
   }, { once: true });
 };
-const templateHTML$16 = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#listbox {\n  overflow-y: auto;\n}\n</style>\n\n<div id="listbox" role="presentation">\n  <slot></slot>\n</div>\n';
+const templateHTML$16 = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT$2 = 40;
 const template$16 = document.createElement("template");
 template$16.innerHTML = templateHTML$16;
@@ -979,7 +980,7 @@ const getEmojiUrl = (baseUrl, char) => {
   }
   return baseUrl.replace("%s", codepoints);
 };
-const templateHTML$15 = '<style>\n:host {\n  display: contents;\n\n  --sinch-comp-emoji-vertical-align: initial;\n}\n\n#image {\n  vertical-align: var(--sinch-comp-emoji-vertical-align);\n  pointer-events: none;\n  width: var(--sinch-global-size-icon, 48px);\n  height: var(--sinch-global-size-icon, 48px);\n}\n</style>\n\n<img id="image" src="" alt="" loading="lazy"/>\n';
+const templateHTML$15 = '<style>:host{display:contents;--sinch-comp-emoji-vertical-align:initial}#image{vertical-align:var(--sinch-comp-emoji-vertical-align);pointer-events:none;width:var(--sinch-global-size-icon,48px);height:var(--sinch-global-size-icon,48px)}</style><img id="image" src="" alt="" loading="lazy">';
 const template$15 = document.createElement("template");
 template$15.innerHTML = templateHTML$15;
 class Emoji extends NectaryElement {
@@ -1023,7 +1024,7 @@ class Emoji extends NectaryElement {
   }
 }
 defineCustomElement("sinch-emoji", Emoji);
-const templateHTML$14 = '<style>\n:host {\n  display: inline;\n}\n\n#content {\n  font: var(--sinch-comp-code-tag-font-text);\n  font-size: inherit;\n  line-height: inherit;\n  color: var(--sinch-comp-code-tag-color-default-text-initial);\n  border: 1px solid var(--sinch-comp-code-tag-color-default-border-initial);\n  background-color: var(--sinch-comp-code-tag-color-default-background-initial);\n  padding: 0 0.25em;\n  border-radius: var(--sinch-comp-code-tag-shape-radius);\n  white-space: var(--sinch-global-text-white-space, normal);\n}\n</style>\n\n<span id="content"></span>\n';
+const templateHTML$14 = '<style>:host{display:inline}#content{font:var(--sinch-comp-code-tag-font-text);font-size:inherit;line-height:inherit;color:var(--sinch-comp-code-tag-color-default-text-initial);border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius);white-space:var(--sinch-global-text-white-space,normal)}</style><span id="content"></span>';
 const template$14 = document.createElement("template");
 template$14.innerHTML = templateHTML$14;
 class CodeTag extends NectaryElement {
@@ -1053,7 +1054,7 @@ class CodeTag extends NectaryElement {
   }
 }
 defineCustomElement("sinch-code-tag", CodeTag);
-const templateHTML$13 = '<style>\n  :host {\n    display: inline;\n  }\n\n  a {\n    font: var(--sinch-comp-link-default-font-initial);\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: var(--sinch-comp-link-default-text-decoration-initial);\n    color: var(--sinch-comp-link-color-default-text-initial);\n    border-radius: 0.5em;\n    white-space: nowrap;\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-default-icon-initial);\n  }\n\n  a:hover {\n    text-decoration: var(--sinch-comp-link-default-text-decoration-hover);\n    color: var(--sinch-comp-link-color-default-text-hover);\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-default-icon-hover);\n  }\n\n  a:focus-visible {\n    outline: 2px solid var(--sinch-comp-link-color-default-outline-focus);\n    outline-offset: 2px;\n  }\n\n  :host([standalone]) {\n    display: block;\n  }\n\n  :host([standalone]) a {\n    display: block;\n    font: var(--sinch-comp-link-standalone-font-initial);\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: none;\n    width: fit-content;\n  }\n\n  #external-icon,\n  #standalone-icon {\n    display: none;\n    height: 1em;\n  }\n\n  #icon-prefix {\n    display: none;\n    margin-left: -0.25em;\n  }\n\n  :host([external]:not([standalone])) #external-icon {\n    display: inline-block;\n    margin-left: 0.25em;\n    vertical-align: -0.2em;\n\n    --sinch-global-size-icon: 1em;\n  }\n\n  :host([standalone][external]) #external-icon {\n    display: inline-block;\n    vertical-align: -0.4em;\n\n    --sinch-global-size-icon: 1.5em;\n  }\n\n  :host([standalone]) #icon-prefix {\n    display: inline;\n  }\n\n  :host([standalone]:not([external])) #standalone-icon {\n    display: inline-block;\n    vertical-align: -0.4em;\n\n    --sinch-global-size-icon: 1.5em;\n  }\n\n  :host([disabled]) a {\n    color: var(--sinch-comp-link-color-disabled-text-initial);\n    pointer-events: none;\n    cursor: initial;\n    text-decoration: var(--sinch-comp-link-default-text-decoration-disabled);\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-disabled-icon-initial);\n  }\n\n  #content {\n    white-space: var(--sinch-global-text-white-space, normal);\n  }\n</style>\n\n<a referrerpolicy="no-referer" aria-hidden="true">\n  <span id="content"></span>\n  <span id="icon-prefix">&nbsp;</span>\n  <sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon>\n  <sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon>\n</a>\n';
+const templateHTML$13 = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
 const template$13 = document.createElement("template");
 template$13.innerHTML = templateHTML$13;
 class Link extends NectaryElement {
@@ -1481,7 +1482,7 @@ const createParseVisitor$1 = (doc) => {
     }
   };
 };
-const templateHTML$12 = '<style>\n:host {\n  display: block;\n\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-m);\n}\n\n:host([size="s"]) {\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-s);\n}\n\n:host([size="xs"]) {\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-xs);\n}\n\n:host([size="xxs"]) {\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-xxs);\n}\n\n#wrapper {\n  font: var(--sinch-comp-rich-text-font);\n  color: var(--sinch-global-color-text, var(--sinch-sys-color-text-default));\n}\n\n.em1 {\n  font-style: italic;\n}\n\n.em2 {\n  font-weight: var(--sinch-ref-typography-font-weight-700);\n}\n\n.strikethrough {\n  text-decoration: line-through;\n}\n\n.link {\n  font: var(--sinch-comp-link-default-font-initial);\n  color: var(--sinch-comp-link-color-default-text-initial);\n  text-decoration: underline;\n}\n\n.link:hover {\n  color: var(--sinch-comp-link-color-default-text-hover);\n  text-decoration: none;\n}\n\n.code {\n  font: var(--sinch-comp-code-tag-font-text);\n  line-height: inherit;\n  font-size: inherit;\n  border: 1px solid var(--sinch-comp-code-tag-color-default-border-initial);\n  background-color: var(--sinch-comp-code-tag-color-default-background-initial);\n  padding: 0 0.25em;\n  border-radius: var(--sinch-comp-code-tag-shape-radius);\n}\n\n.emoji {\n  --sinch-global-size-icon: 1em;\n  --sinch-comp-emoji-vertical-align: -0.2em;\n}\n\n.p,\n.ul,\n.ol {\n  margin: 0;\n}\n\n.ul,\n.ol {\n  padding-left: 1.5em;\n}\n\n.p + .p,\n.p + .ul,\n.p + .ol,\n.ol + .p,\n.ul + .p {\n  margin-top: 0.5em;\n}\n\n.li > .p + .ul,\n.li > .p + .ol {\n  margin-top: 0;\n}\n</style>\n\n<div id="wrapper"></div>\n';
+const templateHTML$12 = '<style>:host{display:block;--sinch-comp-rich-text-font:var(--sinch-sys-font-body-m)}:host([size="s"]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-s)}:host([size=xs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xs)}:host([size=xxs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xxs)}#wrapper{font:var(--sinch-comp-rich-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default))}.em1{font-style:italic}.em2{font-weight:var(--sinch-ref-typography-font-weight-700)}.strikethrough{text-decoration:line-through}.link{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.link:hover{color:var(--sinch-comp-link-color-default-text-hover);text-decoration:none}.code{font:var(--sinch-comp-code-tag-font-text);line-height:inherit;font-size:inherit;border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.emoji{--sinch-global-size-icon:1em;--sinch-comp-emoji-vertical-align:-0.2em}.ol,.p,.ul{margin:0}.ol,.ul{padding-left:1.5em}.ol+.p,.p+.ol,.p+.p,.p+.ul,.ul+.p{margin-top:.5em}.li>.p+.ol,.li>.p+.ul{margin-top:0}</style><div id="wrapper"></div>';
 const template$12 = document.createElement("template");
 template$12.innerHTML = templateHTML$12;
 class RichText extends NectaryElement {
@@ -1567,11 +1568,12 @@ class RichText extends NectaryElement {
   }
   #onClickReactHandler = (e) => {
     getReactEventHandler(this, "on-element-click")?.(e);
+    getReactEventHandler(this, "onElementClick")?.(e);
   };
 }
 defineCustomElement("sinch-rich-text", RichText);
 const typeValues$5 = ["info", "warn", "error"];
-const templateHTML$11 = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    align-items: center;\n    padding: 8px 16px;\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 48px;\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-warning-default-background);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-error-default-background);\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-info-default-background);\n  }\n\n  #icon-info,\n  #icon-warn,\n  #icon-error {\n    display: none;\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-alert-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-alert-color-error-default-icon);\n  }\n\n  #icon-info {\n    --sinch-global-color-icon: var(--sinch-comp-alert-color-info-default-icon);\n  }\n\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\n  }\n\n  #text {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-rich-text-font: var(--sinch-comp-alert-font-body);\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-alert-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-alert-color-error-default-text);\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-alert-color-info-default-text);\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon>\n  <sinch-icon icons-version="2" name="triangle-exclamation"\n    id="icon-warn"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <sinch-rich-text id="text"></sinch-rich-text>\n  <slot name="action"></slot>\n  <slot name="close"></slot>\n</div>\n';
+const templateHTML$11 = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-alert-color-info-default-background)}#icon-error,#icon-info,#icon-warn{display:none}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=warn]) #icon-warn{display:block}#text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;--sinch-comp-rich-text-font:var(--sinch-comp-alert-font-body)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-info-default-text)}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
 const template$11 = document.createElement("template");
 template$11.innerHTML = templateHTML$11;
 class Alert extends NectaryElement {
@@ -1624,7 +1626,7 @@ const getAvatarColorBg = (id) => {
 const getAvatarColorFg = (id) => {
   return `var(--sinch-comp-avatar-container-color-${id}-foreground)`;
 };
-const templateHTML$10 = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n  }\n\n  #wrapper {\n    position: relative;\n    width: var(--sinch-local-size);\n    height: var(--sinch-local-size);\n    border-radius: var(--sinch-comp-avatar-shape-radius);\n\n    --sinch-local-size: var(--sinch-comp-avatar-size-m);\n  }\n\n  :host([size="l"]) #wrapper {\n    --sinch-local-size: var(--sinch-comp-avatar-size-l);\n  }\n\n  :host([size="s"]) #wrapper {\n    --sinch-local-size: var(--sinch-comp-avatar-size-s);\n  }\n\n  #text {\n    display: block;\n    width: 100%;\n    height: 100%;\n    font: var(--sinch-comp-avatar-container-font-size-m-text);\n    line-height: calc(var(--sinch-local-size) - 2px);\n    text-transform: uppercase;\n    text-align: center;\n  }\n\n  :host([size="l"]) #text {\n    font: var(--sinch-comp-avatar-container-font-size-l-text);\n    line-height: calc(var(--sinch-local-size) - 2px);\n  }\n\n  :host([size="s"]) #text {\n    font: var(--sinch-comp-avatar-container-font-size-s-text);\n    line-height: calc(var(--sinch-local-size) - 2px);\n  }\n\n  #circle {\n    position: relative;\n    width: calc(100% - 2px);\n    height: calc(100% - 2px);\n    left: 1px;\n    top: 1px;\n    border-radius: 50%;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-mask: linear-gradient(#fff, #000);\n    mask: linear-gradient(#fff, #000);\n    background-color: var(--sinch-comp-avatar-container-color-default-background);\n    color: var(--sinch-comp-avatar-container-color-default-foreground);\n  }\n\n  #image {\n    display: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n\n  :host([src]:not([src=""])) #image {\n    display: block;\n  }\n\n  #person {\n    display: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    fill: var(--sinch-comp-avatar-container-color-default-foreground);\n  }\n\n  :host(:not([src]):is(:not([alt]), [alt=""])) #person {\n    display: block;\n  }\n\n  #status-wrapper {\n    position: absolute;\n    left: calc(85% - 5px);\n    top: calc(85% - 5px);\n    width: 10px;\n    height: 10px;\n    padding: 1px;\n    box-sizing: border-box;\n    border-radius: 50%;\n    background-color: var(--sinch-comp-avatar-status-color-border);\n    display: none;\n    pointer-events: none;\n  }\n\n  #status {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n  }\n\n  :host([status="online"]) #status-wrapper,\n  :host([status="away"]) #status-wrapper,\n  :host([status="busy"]) #status-wrapper,\n  :host([status="offline"]) #status-wrapper {\n    display: block;\n  }\n\n  :host([status="online"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-online-default-background);\n  }\n\n  :host([status="away"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-away-default-background);\n  }\n\n  :host([status="busy"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-busy-default-background);\n  }\n\n  :host([status="offline"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-offline-default-background);\n  }\n</style>\n\n<div id="wrapper">\n  <div id="circle">\n    <span id="text"></span>\n    <img id="image" alt="" />\n    <svg id="person" viewBox="0 0 40 40" fill="none">\n      <path\n        d="M29.451 15.785a9.451 9.451 0 1 1-18.902 0 9.452 9.452 0 0 1 18.902 0ZM4.734 40.5c.119-7.085 5.899-12.792 13.012-12.792h4.508c7.113 0 12.893 5.707 13.012 12.792H4.734Z" />\n    </svg>\n  </div>\n  <div id="status-wrapper">\n    <div id="status"></div>\n  </div>\n</div>';
+const templateHTML$10 = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);border-radius:var(--sinch-comp-avatar-shape-radius);--sinch-local-size:var(--sinch-comp-avatar-size-m)}:host([size="l"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-l)}:host([size="s"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-s)}#text{display:block;width:100%;height:100%;font:var(--sinch-comp-avatar-container-font-size-m-text);line-height:calc(var(--sinch-local-size) - 2px);text-transform:uppercase;text-align:center}:host([size="l"]) #text{font:var(--sinch-comp-avatar-container-font-size-l-text);line-height:calc(var(--sinch-local-size) - 2px)}:host([size="s"]) #text{font:var(--sinch-comp-avatar-container-font-size-s-text);line-height:calc(var(--sinch-local-size) - 2px)}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-comp-avatar-container-color-default-background);color:var(--sinch-comp-avatar-container-color-default-foreground)}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#person{display:none;position:absolute;left:0;top:0;width:100%;height:100%;fill:var(--sinch-comp-avatar-container-color-default-foreground)}:host(:not([src]):is(:not([alt]),[alt=""])) #person{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-comp-avatar-status-color-border);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-comp-avatar-status-color-online-default-background)}:host([status=away]) #status{background-color:var(--sinch-comp-avatar-status-color-away-default-background)}:host([status=busy]) #status{background-color:var(--sinch-comp-avatar-status-color-busy-default-background)}:host([status=offline]) #status{background-color:var(--sinch-comp-avatar-status-color-offline-default-background)}</style><div id="wrapper"><div id="circle"><span id="text"></span> <img id="image" alt=""> <svg id="person" viewBox="0 0 40 40" fill="none"><path d="M29.451 15.785a9.451 9.451 0 1 1-18.902 0 9.452 9.452 0 0 1 18.902 0ZM4.734 40.5c.119-7.085 5.899-12.792 13.012-12.792h4.508c7.113 0 12.893 5.707 13.012 12.792H4.734Z"/></svg></div><div id="status-wrapper"><div id="status"></div></div></div>';
 const template$10 = document.createElement("template");
 template$10.innerHTML = templateHTML$10;
 class Avatar extends NectaryElement {
@@ -1758,7 +1760,7 @@ const rectOverlap = (targetRect, contentRect) => {
   return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
 };
 const modeValues = ["square", "circle"];
-const templateHTML$$ = '<style>\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  position: relative;\n}\n\n#badge-wrapper {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: fit-content;\n  border-radius: var(--sinch-comp-badge-shape-radius);\n  padding: 1px;\n  pointer-events: none;\n  background-color: var(--sinch-comp-badge-color-border);\n}\n\n#badge {\n  box-sizing: border-box;\n  color: var(--sinch-comp-badge-color-text);\n  background-color: var(--sinch-comp-badge-color-background);\n  width: 20px;\n  height: 20px;\n  border-radius: var(--sinch-comp-badge-shape-radius);\n}\n\n#badge.long {\n  width: fit-content;\n  padding: 0 5px;\n}\n\n#text {\n  display: block;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  font: var(--sinch-comp-badge-font-size-l);\n  line-height: 20px;\n  text-rendering: optimizelegibility;\n}\n\n:host([size="m"]) #badge-wrapper {\n  left: calc(100% - 8px);\n  top: -8px;\n}\n\n:host([size="m"]) #badge {\n  width: 14px;\n  height: 14px;\n}\n\n:host([size="m"]) #badge.long {\n  width: fit-content;\n  padding: 0 3px;\n}\n\n:host([size="m"]) #text {\n  font: var(--sinch-comp-badge-font-size-m);\n  line-height: 14px;\n}\n\n:host([size="s"]) #badge {\n  width: 8px;\n  height: 8px;\n  padding: 0;\n}\n\n:host([size="s"]) #text {\n  display: none;\n}\n\n:host([hidden]) #badge-wrapper {\n  display: none;\n}\n</style>\n\n<slot id="slot"></slot>\n<div id="badge-wrapper">\n  <div id="badge">\n    <span id="text"></span>\n  </div>\n</div>\n';
+const templateHTML$$ = '<style>:host{display:inline-flex;flex-direction:column;position:relative}#badge-wrapper{position:absolute;left:0;top:0;width:fit-content;border-radius:var(--sinch-comp-badge-shape-radius);padding:1px;pointer-events:none;background-color:var(--sinch-comp-badge-color-border)}#badge{box-sizing:border-box;color:var(--sinch-comp-badge-color-text);background-color:var(--sinch-comp-badge-color-background);width:20px;height:20px;border-radius:var(--sinch-comp-badge-shape-radius)}#badge.long{width:fit-content;padding:0 5px}#text{display:block;width:100%;height:100%;text-align:center;font:var(--sinch-comp-badge-font-size-l);line-height:20px;text-rendering:optimizelegibility}:host([size="m"]) #badge-wrapper{left:calc(100% - 8px);top:-8px}:host([size="m"]) #badge{width:14px;height:14px}:host([size="m"]) #badge.long{width:fit-content;padding:0 3px}:host([size="m"]) #text{font:var(--sinch-comp-badge-font-size-m);line-height:14px}:host([size="s"]) #badge{width:8px;height:8px;padding:0}:host([size="s"]) #text{display:none}:host([hidden]) #badge-wrapper{display:none}</style><slot id="slot"></slot><div id="badge-wrapper"><div id="badge"><span id="text"></span></div></div>';
 const template$$ = document.createElement("template");
 template$$.innerHTML = templateHTML$$;
 class Badge extends NectaryElement {
@@ -1866,7 +1868,7 @@ class Badge extends NectaryElement {
   };
 }
 defineCustomElement("sinch-badge", Badge);
-const templateHTML$_ = '<style>\n  :host {\n    display: block;\n\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-secondary-default-text-initial\n      );\n  }\n\n  #wrapper {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: relative;\n  }\n\n  /* divider */\n  :host(:is(:not(:first-of-type))) #wrapper::before {\n    content: "";\n    position: absolute;\n    inset: 0;\n    background-color: var(--sinch-local-divider-color);\n    opacity: 0.3;\n    pointer-events: none;\n    z-index: 2;\n    top: 10%;\n    bottom: 10%;\n    left: -0.5px;\n    width: 1px;\n  }\n\n  :host([type="primary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-primary-default-text-initial\n      );\n  }\n\n  :host([type="secondary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-secondary-default-text-initial\n      );\n  }\n\n  :host([type="subtle-primary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-text-initial\n      );\n  }\n\n  :host([type="subtle-secondary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-text-initial\n      );\n  }\n\n  :host([type="cta-primary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-cta-primary-default-text-initial\n      );\n  }\n\n  :host([type="cta-secondary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-text-initial\n      );\n  }\n\n  :host([type="destructive"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-danger-default-text-initial\n      );\n  }\n\n  /* fix border */\n  #sinch-button-element {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n\n    --sinch-button-shape-radius-base: 0;\n    --sinch-button-shape-radius-top-right: 0;\n    --sinch-button-shape-radius-top-left: 0;\n    --sinch-button-shape-radius-bottom-right: 0;\n    --sinch-button-shape-radius-bottom-left: 0;\n  }\n\n  :host(:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host(:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host([size="l"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n  }\n\n  :host([size="l"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n  }\n\n  :host([size="m"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host([size="m"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host([size="s"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n  }\n\n  :host([size="s"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n  }\n\n  :host([size="xs"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n  }\n\n  :host([size="xs"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n  }\n\n  :host(:is(:not(:first-of-type, :last-of-type))) #sinch-button-element:not(:active) {\n    --sinch-button-border-left: none;\n    --sinch-button-border-right: none;\n  }\n\n  :host(:is(:first-of-type)) #sinch-button-element:not(:active) {\n    --sinch-button-border-right: none;\n  }\n\n  :host(:is(:last-of-type)) #sinch-button-element:not(:active) {\n    --sinch-button-border-left: none;\n  }\n\n  /* icon-button */\n  :host(:is([text=""], :not([text]))) :is(#left-icon, #right-icon, #text) {\n    display: none;\n  }\n\n  ::slotted(*) {\n    display: block;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-button id="sinch-button-element">\n    <slot id="left-icon" name="left-icon" slot="left-icon"></slot>\n    <slot id="icon" name="icon" slot="icon"></slot>\n    <slot id="right-icon" name="right-icon" slot="right-icon"></slot>\n  </sinch-button>\n</div>\n';
+const templateHTML$_ = '<style>:host{display:block;--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%;position:relative}:host(:is(:not(:first-of-type))) #wrapper::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-divider-color);opacity:.3;pointer-events:none;z-index:2;top:10%;bottom:10%;left:-.5px;width:1px}:host([type=primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-primary-default-text-initial)}:host([type=secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}:host([type=subtle-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-primary-default-text-initial)}:host([type=subtle-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-secondary-default-text-initial)}:host([type=cta-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-primary-default-text-initial)}:host([type=cta-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-secondary-default-text-initial)}:host([type=destructive]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-danger-default-text-initial)}#sinch-button-element{display:flex;box-sizing:border-box;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-button-shape-radius-top-right:0;--sinch-button-shape-radius-top-left:0;--sinch-button-shape-radius-bottom-right:0;--sinch-button-shape-radius-bottom-left:0}:host(:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host(:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="l"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-l)}:host([size="l"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-l)}:host([size="m"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host([size="m"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="s"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-s)}:host([size="s"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-s)}:host([size=xs]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-xs)}:host([size=xs]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-xs)}:host(:is(:not(:first-of-type,:last-of-type))) #sinch-button-element:not(:active){--sinch-button-border-left:none;--sinch-button-border-right:none}:host(:is(:first-of-type)) #sinch-button-element:not(:active){--sinch-button-border-right:none}:host(:is(:last-of-type)) #sinch-button-element:not(:active){--sinch-button-border-left:none}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="wrapper"><sinch-button id="sinch-button-element"><slot id="left-icon" name="left-icon" slot="left-icon"></slot><slot id="icon" name="icon" slot="icon"></slot><slot id="right-icon" name="right-icon" slot="right-icon"></slot></sinch-button></div>';
 const template$_ = document.createElement("template");
 template$_.innerHTML = templateHTML$_;
 class ButtonGroupItem extends NectaryElement {
@@ -1943,7 +1945,7 @@ const formTypeValues = [
   "reset",
   "button"
 ];
-const templateHTML$Z = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n  }\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML$Z = '<style>:host{display:block}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%}</style><div id="wrapper"><slot></slot></div>';
 const template$Z = document.createElement("template");
 template$Z.innerHTML = templateHTML$Z;
 class ButtonGroup extends NectaryElement {
@@ -2024,7 +2026,7 @@ const CSVToFormData = (name, csv) => {
   });
   return formData;
 };
-const templateHTML$Y = '<style>\n  /* stylelint-disable no-descending-specificity */\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    cursor: pointer;\n    user-select: none;\n\n    --sinch-button-shape-radius-base:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-initial);\n    --sinch-button-border: 1px solid;\n    --sinch-button-border-top: var(--sinch-button-border);\n    --sinch-button-border-bottom: var(--sinch-button-border);\n    --sinch-button-border-left: var(--sinch-button-border);\n    --sinch-button-border-right: var(--sinch-button-border);\n    --sinch-button-shape-radius-top-right: unset;\n    --sinch-button-shape-radius-top-left: unset;\n    --sinch-button-shape-radius-bottom-right: unset;\n    --sinch-button-shape-radius-bottom-left: unset;\n  }\n\n  :host([disabled]) {\n    cursor: initial;\n  }\n\n  #button {\n    all: initial;\n    display: block;\n    position: relative;\n    width: 100%;\n    height: var(--sinch-local-size);\n    user-select: none;\n\n    --sinch-local-size: var(--sinch-comp-button-size-container-m);\n    --sinch-local-padding: 16px;\n    --sinch-local-font: var(--sinch-comp-button-font-size-m-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-m);\n    --sinch-global-color-icon: var(--sinch-local-color-icon);\n  }\n\n  :host([data-size="l"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-l);\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-l-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-l);\n  }\n\n  :host([data-size="m"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-m);\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-m-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-m);\n  }\n\n  :host([data-size="s"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-s);\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-s-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-s);\n  }\n\n  :host([data-size="xs"]) > #button {\n    --sinch-local-size: var(--sinch-comp-button-size-container-xs);\n    --sinch-local-padding: 8px;\n    --sinch-button-set-size-shape-radius:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n    --sinch-local-font: var(--sinch-comp-button-font-size-s-text);\n    --sinch-global-size-icon: var(--sinch-comp-button-size-icon-xs);\n  }\n\n  /* icon-button */\n  :host(:is([text=""], :not([text]))) > #button {\n    --sinch-local-padding: 8px;\n  }\n\n  /* icon-button */\n  :host([data-size="s"]:is([text=""], :not([text]))) > #button {\n    --sinch-local-padding: 4px;\n  }\n\n  /* icon-button */\n  :host([data-size="xs"]:is([text=""], :not([text]))) > #button {\n    --sinch-local-padding: 4px;\n  }\n\n  /* Types */\n  :host([type="primary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-primary-default-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-primary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-primary-default-icon-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-primary-default-outline-focus\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-initial);\n  }\n\n  /* default type */\n  :host(:not([type])) > #button,\n  :host([type="secondary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-secondary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-secondary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-secondary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-secondary-default-icon-initial\n      );\n  }\n\n  :host([type="subtle-primary"]) > #button,\n  /* deprecated */\n  :host([type="tertiary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-initial);\n  }\n\n  :host([type="subtle-secondary"]) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text]))) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-initial);\n  }\n\n  :host([type="cta-primary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-primary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-cta-primary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-primary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-cta-primary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-initial);\n  }\n\n  :host([type="cta-secondary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-border-initial\n      );\n    --sinch-local-color-outline-focus:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-outline-focus\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-text-initial\n      );\n    --sinch-local-color-icon:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-icon-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-initial);\n  }\n\n  :host([type="destructive"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-default-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-danger-default-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-danger-default-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-initial);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-danger-default-icon-initial\n      );\n  }\n\n  :host([type="primary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-focus);\n  }\n\n  /* default type */\n  :host(:not([type]):focus-visible) > #button,\n  :host([type="secondary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-focus);\n  }\n\n  :host([type="subtle-primary"]:focus-visible) > #button,\n  /* deprecated */\n  :host([type="tertiary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-focus);\n  }\n\n  :host([type="subtle-secondary"]:focus-visible) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text])):focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-focus);\n  }\n\n  :host([type="cta-primary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-focus);\n  }\n\n  :host([type="cta-secondary"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-focus);\n  }\n\n  :host([type="destructive"]:focus-visible) > #button {\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-focus);\n  }\n\n  /* Toggled state */\n  :host([toggled]:not([disabled])[type="subtle-primary"]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-toggled-background-initial\n      );\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-secondary"]) > #button,\n  /* default type for icon-button */\n  :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text]))) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-toggled-background-initial\n      );\n  }\n\n  /* Hover / Active */\n  :host([type="primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-hover);\n  }\n\n  :host([type="primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-active);\n  }\n\n  /* default type */\n  :host(:not([type]):hover) > #button,\n  :host([type="secondary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-hover);\n  }\n\n  /* default type */\n  :host(:not([type]):active) > #button,\n  :host([type="secondary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-default-background-active\n      );\n  }\n\n  /* deprecated */\n  :host([type="tertiary"]:hover) > #button,\n  :host([type="subtle-primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  /* deprecated */\n  :host([type="tertiary"]:active) > #button,\n  :host([type="subtle-primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  :host([type="subtle-secondary"]:hover) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text])):hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  :host([type="subtle-secondary"]:active) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text])):active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  :host([type="cta-primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-hover);\n  }\n\n  :host([type="cta-primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-active);\n  }\n\n  :host([type="cta-secondary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-hover);\n  }\n\n  :host([type="cta-secondary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-secondary-active);\n  }\n\n  :host([type="destructive"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-hover);\n  }\n\n  :host([type="destructive"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-danger-active);\n  }\n\n  /* Toggled + Hover / Active */\n  :host([toggled]:not([disabled])[type="subtle-primary"]:hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-primary"]:active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-secondary"]:hover) > #button,\n  /* default type for icon-button */\n  :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text])):hover) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-hover\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-hover);\n  }\n\n  :host([toggled]:not([disabled])[type="subtle-secondary"]:active) > #button,\n  /* default type for icon-button */\n  :host([toggled]:not([disabled]):not([type]):is([text=""], :not([text])):active) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-background-active\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-active);\n  }\n\n  /* Disabled state */\n  :host([type="primary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-primary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-primary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-primary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-primary-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-primary-disabled-icon-initial\n      );\n  }\n\n  /* default type */\n  :host(:not([type])[disabled]) > #button,\n  :host([type="secondary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-secondary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-secondary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-secondary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-secondary-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-secondary-disabled-icon-initial\n      );\n  }\n\n  :host([type="subtle-primary"][disabled]) > #button,\n  /* deprecated */\n  :host([type="tertiary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-primary-disabled-icon-initial\n      );\n  }\n\n  :host([type="subtle-secondary"][disabled]) > #button,\n  /* default type for icon-button */\n  :host(:not([type]):is([text=""], :not([text]))[disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-subtle-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-subtle-secondary-disabled-icon-initial\n      );\n  }\n\n  :host([type="cta-primary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-text-initial\n      );\n    --sinch-local-shadow: var(--sinch-comp-button-shadow-cta-primary-disabled);\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-cta-primary-disabled-icon-initial\n      );\n  }\n\n  :host([type="cta-secondary"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-text-initial\n      );\n    --sinch-local-shadow:\n      var(\n        --sinch-comp-button-shadow-cta-secondary-disabled\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-cta-secondary-disabled-icon-initial\n      );\n  }\n\n  :host([type="destructive"][disabled]) > #button {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-button-color-danger-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-button-color-danger-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-button-color-danger-disabled-text-initial\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-button-color-danger-disabled-icon-initial\n      );\n  }\n\n  /* Border / Background */\n  #button::before {\n    content: "";\n    position: absolute;\n    inset: 0;\n    background-color: var(--sinch-local-color-background);\n    border-top: var(--sinch-button-border-top);\n    border-bottom: var(--sinch-button-border-bottom);\n    border-right: var(--sinch-button-border-right);\n    border-left: var(--sinch-button-border-left);\n    border-color: var(--sinch-local-color-border);\n    border-top-right-radius:\n      var(\n        --sinch-button-shape-radius-top-right,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    border-top-left-radius:\n      var(\n        --sinch-button-shape-radius-top-left,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    border-bottom-right-radius:\n      var(\n        --sinch-button-shape-radius-bottom-right,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    border-bottom-left-radius:\n      var(\n        --sinch-button-shape-radius-bottom-left,\n        var(\n          --sinch-button-set-size-shape-radius,\n          var(--sinch-button-shape-radius-base)\n        )\n      );\n    box-shadow: var(--sinch-local-shadow);\n    pointer-events: none;\n  }\n\n  :host(:not([disabled]):active) #button::before {\n    border-width: 2px;\n  }\n\n  /* Focus Outline */\n  :host(:focus-visible) #button::after {\n    position: absolute;\n    content: "";\n    inset: -3px;\n    border: 2px solid var(--sinch-local-color-outline-focus);\n    border-top-right-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-top-right,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    border-top-left-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-top-left,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    border-bottom-right-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-bottom-right,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    border-bottom-left-radius:\n      calc(\n        var(\n          --sinch-button-shape-radius-bottom-left,\n          var(\n            --sinch-button-set-size-shape-radius,\n            var(--sinch-button-shape-radius-base)\n          )\n        ) + 3px\n      );\n    pointer-events: none;\n  }\n\n  #content {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    width: 100%;\n    height: 100%;\n    padding: 0 var(--sinch-local-padding);\n    box-sizing: border-box;\n    pointer-events: none;\n    overflow: hidden;\n  }\n\n  #text {\n    font: var(--sinch-local-font);\n    color: var(--sinch-local-color-text);\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  /* icon-button */\n  :host(:is([text=""], :not([text]))) :is(#left-icon, #right-icon, #text) {\n    display: none;\n  }\n\n  ::slotted(*) {\n    display: block;\n  }\n</style>\n\n<div id="button" inert>\n  <div id="content">\n    <slot id="left-icon" name="left-icon"></slot>\n    <slot id="icon" name="icon"></slot>\n    <span id="text"></span>\n    <slot id="right-icon" name="right-icon"></slot>\n  </div>\n</div>\n';
+const templateHTML$Y = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer;user-select:none;--sinch-button-shape-radius-base:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial);--sinch-button-border:1px solid;--sinch-button-border-top:var(--sinch-button-border);--sinch-button-border-bottom:var(--sinch-button-border);--sinch-button-border-left:var(--sinch-button-border);--sinch-button-border-right:var(--sinch-button-border);--sinch-button-shape-radius-top-right:unset;--sinch-button-shape-radius-top-left:unset;--sinch-button-shape-radius-bottom-right:unset;--sinch-button-shape-radius-bottom-left:unset}:host([disabled]){cursor:initial}#button{all:initial;display:block;position:relative;width:100%;height:var(--sinch-local-size);user-select:none;--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-local-padding:16px;--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([data-size="l"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-l);--sinch-local-font:var(--sinch-comp-button-font-size-l-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l)}:host([data-size="m"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-m);--sinch-local-font:var(--sinch-comp-button-font-size-m-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m)}:host([data-size="s"])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-s);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s)}:host([data-size=xs])>#button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-local-padding:8px;--sinch-button-set-size-shape-radius:var(--sinch-comp-button-shape-radius-size-xs);--sinch-local-font:var(--sinch-comp-button-font-size-s-text);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs)}:host(:is([text=""],:not([text])))>#button{--sinch-local-padding:8px}:host([data-size="s"]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([data-size=xs]:is([text=""],:not([text])))>#button{--sinch-local-padding:4px}:host([type=primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-primary-default-outline-focus);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial)}:host(:not([type]))>#button,:host([type=secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial)}:host([type=subtle-primary])>#button,:host([type=tertiary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host(:not([type]):is([text=""],:not([text])))>#button,:host([type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial)}:host([type=cta-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-primary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-initial)}:host([type=cta-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-default-border-initial);--sinch-local-color-outline-focus:var(--sinch-comp-button-color-cta-secondary-default-outline-focus);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-cta-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-initial)}:host([type=destructive])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-default-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-default-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-default-icon-initial)}:host([type=primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host(:not([type]):focus-visible)>#button,:host([type=secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host([type=subtle-primary]:focus-visible)>#button,:host([type=tertiary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host(:not([type]):is([text=""],:not([text])):focus-visible)>#button,:host([type=subtle-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=cta-primary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-focus)}:host([type=cta-secondary]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-focus)}:host([type=destructive]:focus-visible)>#button{--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-focus)}:host([toggled]:not([disabled])[type=subtle-primary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-toggled-background-initial)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])))>#button,:host([toggled]:not([disabled])[type=subtle-secondary])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-toggled-background-initial)}:host([type=primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host(:not([type]):hover)>#button,:host([type=secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([type]):active)>#button,:host([type=secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active)}:host([type=subtle-primary]:hover)>#button,:host([type=tertiary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=subtle-primary]:active)>#button,:host([type=tertiary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host(:not([type]):is([text=""],:not([text])):hover)>#button,:host([type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host(:not([type]):is([text=""],:not([text])):active)>#button,:host([type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=cta-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-hover)}:host([type=cta-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-active)}:host([type=cta-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-hover)}:host([type=cta-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-active)}:host([type=destructive]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-hover)}:host([type=destructive]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-danger-active)}:host([toggled]:not([disabled])[type=subtle-primary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled])[type=subtle-primary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):hover)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:hover)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([toggled]:not([disabled]):not([type]):is([text=""],:not([text])):active)>#button,:host([toggled]:not([disabled])[type=subtle-secondary]:active)>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}:host([type=primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial)}:host(:not([type])[disabled])>#button,:host([type=secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial)}:host([type=subtle-primary][disabled])>#button,:host([type=tertiary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-primary-disabled-icon-initial)}:host(:not([type]):is([text=""],:not([text]))[disabled])>#button,:host([type=subtle-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-subtle-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial)}:host([type=cta-primary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-primary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-primary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-primary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-primary-disabled-icon-initial)}:host([type=cta-secondary][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-cta-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-cta-secondary-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-cta-secondary-disabled-text-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-cta-secondary-disabled);--sinch-global-color-icon:var(--sinch-comp-button-color-cta-secondary-disabled-icon-initial)}:host([type=destructive][disabled])>#button{--sinch-local-color-background:var(--sinch-comp-button-color-danger-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-danger-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-button-color-danger-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-button-color-danger-disabled-icon-initial)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border-top:var(--sinch-button-border-top);border-bottom:var(--sinch-button-border-bottom);border-right:var(--sinch-button-border-right);border-left:var(--sinch-button-border-left);border-color:var(--sinch-local-color-border);border-top-right-radius:var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-top-left-radius:var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-right-radius:var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));border-bottom-left-radius:var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base)));box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:not([disabled]):active) #button::before{border-width:2px}:host(:focus-visible) #button::after{position:absolute;content:"";inset:-3px;border:2px solid var(--sinch-local-color-outline-focus);border-top-right-radius:calc(var(--sinch-button-shape-radius-top-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-top-left-radius:calc(var(--sinch-button-shape-radius-top-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-right-radius:calc(var(--sinch-button-shape-radius-bottom-right,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);border-bottom-left-radius:calc(var(--sinch-button-shape-radius-bottom-left,var(--sinch-button-set-size-shape-radius,var(--sinch-button-shape-radius-base))) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 var(--sinch-local-padding);box-sizing:border-box;pointer-events:none;overflow:hidden}#text{font:var(--sinch-local-font);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-shrink:1;min-width:0}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="button" inert><div id="content"><slot id="left-icon" name="left-icon"></slot><slot id="icon" name="icon"></slot><span id="text"></span><slot id="right-icon" name="right-icon"></slot></div></div>';
 const template$Y = document.createElement("template");
 template$Y.innerHTML = templateHTML$Y;
 class Button extends NectaryElement {
@@ -2212,7 +2214,7 @@ class Button extends NectaryElement {
   };
 }
 defineCustomElement("sinch-button", Button);
-const templateHTML$X = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    height: 100%;\n    padding: 20px 0;\n    box-sizing: border-box;\n    background-color: var(--sinch-comp-card-color-default-background-initial);\n    border-radius: var(--sinch-comp-card-shape-radius);\n    border: 1px solid var(--sinch-comp-card-color-default-border-initial);\n  }\n\n  #scroll {\n    overflow: auto;\n    height: 100%;\n    box-sizing: border-box;\n    padding: 4px 24px;\n  }\n</style>\n\n<div id="wrapper">\n  <div id="scroll">\n    <slot></slot>\n  </div>\n</div>\n';
+const templateHTML$X = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-comp-card-color-default-background-initial);border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-default-border-initial)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
 const template$X = document.createElement("template");
 template$X.innerHTML = templateHTML$X;
 class CardContainer extends NectaryElement {
@@ -2223,7 +2225,7 @@ class CardContainer extends NectaryElement {
   }
 }
 defineCustomElement("sinch-card-container", CardContainer);
-const templateHTML$W = '<style>\n:host {\n  display: block;\n}\n\n#title {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n}\n\n#title-text {\n  font: var(--sinch-comp-card-v2-font-title);\n  color: var(--sinch-comp-card-v2-color-default-title-initial);\n}\n\n#title-icon {\n  display: flex;\n}\n\n:host([orientation="vertical"]) #title {\n  align-items: start;\n  flex-direction: column;\n}\n\n:host([disabled]:not([disabled="false"])) #title-text {\n  color: var(--sinch-comp-card-v2-color-default-title-disabled);\n}\n\n:host([selected]:not([selected="false"])[disabled]:not([disabled="false"])) #title-text {\n  color: var(--sinch-comp-card-v2-color-selected-title-disabled);\n}\n\n::slotted([slot="icon"]) {\n  --sinch-global-color-icon: var(--sinch-comp-card-v2-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-card-v2-size-icon);\n\n  margin-right: 8px;\n  margin-bottom: 0;\n}\n\n:host([orientation="vertical"]) ::slotted([slot="icon"]) {\n  margin-right: 0;\n  margin-bottom: 8px;\n}\n\n:host([selected]:not([selected="false"])) ::slotted([slot="icon"]) {\n  --sinch-global-color-icon: var(--sinch-comp-card-v2-color-selected-icon-initial);\n}\n\n:host([disabled]:not([disabled="false"])) ::slotted([slot="icon"]) {\n  --sinch-global-color-icon: var(--sinch-comp-card-v2-color-default-icon-disabled);\n}\n\n:host([selected]:not([selected="false"])[disabled]:not([disabled="false"])) ::slotted([slot="icon"]) {\n  --sinch-global-color-icon: var(--sinch-comp-card-v2-color-selected-icon-disabled);\n}\n\n</style>\n\n<div id="title">\n  <div id="title-icon">\n    <slot name="icon"></slot>\n  </div>\n  <sinch-text id="title-text" type="m"></sinch-text>\n</div>\n';
+const templateHTML$W = '<style>:host{display:block}#title{display:flex;align-items:center;flex-direction:row}#title-text{font:var(--sinch-comp-card-v2-font-title);color:var(--sinch-comp-card-v2-color-default-title-initial)}#title-icon{display:flex}:host([orientation=vertical]) #title{align-items:start;flex-direction:column}:host([disabled]:not([disabled=false])) #title-text{color:var(--sinch-comp-card-v2-color-default-title-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) #title-text{color:var(--sinch-comp-card-v2-color-selected-title-disabled)}::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-card-v2-size-icon);margin-right:8px;margin-bottom:0}:host([orientation=vertical]) ::slotted([slot=icon]){margin-right:0;margin-bottom:8px}:host([selected]:not([selected=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-selected-icon-initial)}:host([disabled]:not([disabled=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-default-icon-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-selected-icon-disabled)}</style><div id="title"><div id="title-icon"><slot name="icon"></slot></div><sinch-text id="title-text" type="m"></sinch-text></div>';
 const template$W = document.createElement("template");
 template$W.innerHTML = templateHTML$W;
 class CardV2Title extends NectaryElement {
@@ -2276,7 +2278,7 @@ class CardV2Title extends NectaryElement {
   }
 }
 defineCustomElement("sinch-card-v2-title", CardV2Title);
-const templateHTML$V = '<style>\n:host {\n  display: flex;\n}\n\n.empty {\n  display: none !important;\n}\n\n#card {\n  border-radius: var(--sinch-comp-card-v2-shape-radius);\n  border: 1px solid var(--sinch-comp-card-v2-color-default-border-initial);\n  background-color: var(--sinch-comp-card-v2-color-default-background-initial);\n  box-shadow: var(--sinch-comp-card-v2-shadow-initial);\n  overflow: hidden;\n  transition: 0.15s linear;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n#card-media {\n  display: block;\n  overflow: hidden;\n}\n\n#body {\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n  align-self: stretch;\n  flex: 1;\n}\n\n#card-title {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n}\n\n#card-content {\n  display: flex;\n  gap: 10px;\n  align-self: stretch;\n}\n\n#card-footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 16px;\n  align-self: stretch;\n  margin-top: auto;\n}\n\n:host([selected]:not([selected="false"])) #card {\n  background-color: var(--sinch-comp-card-v2-color-selected-background-initial);\n  border-color: var(--sinch-comp-card-v2-color-selected-border-initial);\n  cursor: pointer;\n}\n\n:host([clickable]:not([clickable="false"])) #card {\n  cursor: pointer;\n}\n\n:host([disabled]:not([disabled="false"])) #card {\n  box-shadow: var(--sinch-comp-card-v2-shadow-disabled);\n  background-color: var(--sinch-comp-card-v2-color-default-background-disabled);\n  border-color: var(--sinch-comp-card-v2-color-default-border-disabled);\n  cursor: not-allowed;\n}\n\n:host([clickable]:not([clickable="false"]):is(:not([disabled]), [disabled="false"]):hover) #card {\n  background-color: var(--sinch-comp-card-v2-color-default-background-hover);\n  border-color: var(--sinch-comp-card-v2-color-default-border-hover);\n  box-shadow: var(--sinch-comp-card-v2-shadow-hover);\n}\n\n:host([clickable]:not([clickable="false"]):is(:not([disabled]), [disabled="false"]):active) #card {\n  background-color: var(--sinch-comp-card-v2-color-default-background-active);\n  border-color: var(--sinch-comp-card-v2-color-default-border-active);\n  box-shadow: var(--sinch-comp-card-v2-shadow-active);\n}\n\n:host([selected]:not([selected="false"]):is(:not([disabled]), [disabled="false"]):hover) #card {\n  background-color: var(--sinch-comp-card-v2-color-selected-background-hover);\n  border-color: var(--sinch-comp-card-v2-color-selected-border-hover);\n}\n\n:host([selected]:not([selected="false"]):is(:not([disabled]), [disabled="false"]):active) #card {\n  background-color: var(--sinch-comp-card-v2-color-selected-background-active);\n  border-color: var(--sinch-comp-card-v2-color-selected-border-active);\n}\n\n:host([selected]:not([selected="false"])[disabled]:not([disabled="false"])) #card {\n  background-color: var(--sinch-comp-card-v2-color-selected-background-disabled);\n  border-color: var(--sinch-comp-card-v2-color-selected-border-disabled);\n}\n\n::slotted([slot="content"]) {\n  max-width: 100%;\n  color: var(--sinch-comp-card-v2-color-default-description-initial);\n  font-size: var(--sinch-comp-card-v2-font-description);\n}\n\n::slotted([slot="title"]) {\n  max-width: 100%;\n}\n\n::slotted([slot="footer"]) {\n  max-width: 100%;\n}\n\n:host([selected]:not([selected="false"])) ::slotted([slot="content"]) {\n  color: var(--sinch-comp-card-v2-color-selected-description-initial);\n}\n\n:host([disabled]:not([disabled="false"])) ::slotted([slot="content"]) {\n  color: var(--sinch-comp-card-v2-color-default-description-disabled);\n}\n\n:host([selected]:not([selected="false"])[disabled]:not([disabled="false"])) ::slotted([slot="content"]) {\n  color: var(--sinch-comp-card-v2-color-selected-description-disabled);\n}\n\n</style>\n\n<div id="card">\n  <div id="card-media">\n    <slot name="media"></slot>\n  </div>\n  <div id="body">\n    <div id="card-title">\n      <slot name="title"></slot>\n    </div>\n    <div id="card-content">\n      <slot name="content"></slot>\n    </div>\n    <div id="card-footer">\n      <slot name="footer"></slot>\n    </div>\n  </div>\n</div>\n';
+const templateHTML$V = '<style>:host{display:flex}.empty{display:none!important}#card{border-radius:var(--sinch-comp-card-v2-shape-radius);border:1px solid var(--sinch-comp-card-v2-color-default-border-initial);background-color:var(--sinch-comp-card-v2-color-default-background-initial);box-shadow:var(--sinch-comp-card-v2-shadow-initial);overflow:hidden;transition:.15s linear;display:flex;flex-direction:column;flex:1}#card-media{display:block;overflow:hidden}#body{display:flex;flex-direction:column;padding:16px;gap:8px;align-self:stretch;flex:1}#card-title{display:flex;flex-direction:row;align-items:center;gap:8px;align-self:stretch}#card-content{display:flex;gap:10px;align-self:stretch}#card-footer{display:flex;flex-direction:row;align-items:center;gap:16px;align-self:stretch;margin-top:auto}:host([selected]:not([selected=false])) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-initial);border-color:var(--sinch-comp-card-v2-color-selected-border-initial);cursor:pointer}:host([clickable]:not([clickable=false])) #card{cursor:pointer}:host([disabled]:not([disabled=false])) #card{box-shadow:var(--sinch-comp-card-v2-shadow-disabled);background-color:var(--sinch-comp-card-v2-color-default-background-disabled);border-color:var(--sinch-comp-card-v2-color-default-border-disabled);cursor:not-allowed}:host([clickable]:not([clickable=false]):is(:not([disabled]),[disabled=false]):hover) #card{background-color:var(--sinch-comp-card-v2-color-default-background-hover);border-color:var(--sinch-comp-card-v2-color-default-border-hover);box-shadow:var(--sinch-comp-card-v2-shadow-hover)}:host([clickable]:not([clickable=false]):is(:not([disabled]),[disabled=false]):active) #card{background-color:var(--sinch-comp-card-v2-color-default-background-active);border-color:var(--sinch-comp-card-v2-color-default-border-active);box-shadow:var(--sinch-comp-card-v2-shadow-active)}:host([selected]:not([selected=false]):is(:not([disabled]),[disabled=false]):hover) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-hover);border-color:var(--sinch-comp-card-v2-color-selected-border-hover)}:host([selected]:not([selected=false]):is(:not([disabled]),[disabled=false]):active) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-active);border-color:var(--sinch-comp-card-v2-color-selected-border-active)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-disabled);border-color:var(--sinch-comp-card-v2-color-selected-border-disabled)}::slotted([slot=content]){max-width:100%;color:var(--sinch-comp-card-v2-color-default-description-initial);font-size:var(--sinch-comp-card-v2-font-description)}::slotted([slot=title]){max-width:100%}::slotted([slot=footer]){max-width:100%}:host([selected]:not([selected=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-selected-description-initial)}:host([disabled]:not([disabled=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-default-description-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-selected-description-disabled)}</style><div id="card"><div id="card-media"><slot name="media"></slot></div><div id="body"><div id="card-title"><slot name="title"></slot></div><div id="card-content"><slot name="content"></slot></div><div id="card-footer"><slot name="footer"></slot></div></div></div>';
 const template$V = document.createElement("template");
 template$V.innerHTML = templateHTML$V;
 const CLICK_EVENTS = ["click", "-click"];
@@ -2407,7 +2409,7 @@ class CardV2 extends NectaryElement {
   }
 }
 defineCustomElement("sinch-card-v2", CardV2);
-const templateHTML$U = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 24px;\n\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-checkbox-color-default-background-initial\n      );\n    --sinch-local-color-background-hover:\n      var(\n        --sinch-comp-checkbox-color-default-background-hover\n      );\n    --sinch-local-color-background-active:\n      var(\n        --sinch-comp-checkbox-color-default-background-active\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-checkbox-color-default-border-initial\n      );\n    --sinch-local-color-border-hover:\n      var(\n        --sinch-comp-checkbox-color-default-border-hover\n      );\n    --sinch-local-color-border-active:\n      var(\n        --sinch-comp-checkbox-color-default-border-active\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-checkbox-color-default-text-initial\n      );\n  }\n\n  /* Invalid */\n  :host([invalid]) > #wrapper {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-checkbox-color-invalid-background-initial\n      );\n    --sinch-local-color-background-hover:\n      var(\n        --sinch-comp-checkbox-color-invalid-background-hover\n      );\n    --sinch-local-color-background-active:\n      var(\n        --sinch-comp-checkbox-color-invalid-background-active\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-checkbox-color-invalid-border-initial\n      );\n    --sinch-local-color-border-hover:\n      var(\n        --sinch-comp-checkbox-color-invalid-border-hover\n      );\n    --sinch-local-color-border-active:\n      var(\n        --sinch-comp-checkbox-color-invalid-border-active\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-checkbox-color-invalid-text-initial\n      );\n  }\n\n  /* Checked */\n  :host([checked]) > #wrapper {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-checkbox-color-checked-background-initial\n      );\n    --sinch-local-color-background-hover:\n      var(\n        --sinch-comp-checkbox-color-checked-background-hover\n      );\n    --sinch-local-color-background-active:\n      var(\n        --sinch-comp-checkbox-color-checked-background-active\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-checkbox-color-checked-border-initial\n      );\n    --sinch-local-color-border-hover:\n      var(\n        --sinch-comp-checkbox-color-checked-border-hover\n      );\n    --sinch-local-color-border-active:\n      var(\n        --sinch-comp-checkbox-color-checked-border-active\n      );\n  }\n\n  /* Disabled */\n  :host([disabled]) > #wrapper {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-checkbox-color-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-checkbox-color-disabled-border-initial\n      );\n    --sinch-local-color-text:\n      var(\n        --sinch-comp-checkbox-color-disabled-text-initial\n      );\n  }\n\n  /* Checked Disabled */\n  :host([disabled][checked]) > #wrapper {\n    --sinch-local-color-background:\n      var(\n        --sinch-comp-checkbox-color-checked-disabled-background-initial\n      );\n    --sinch-local-color-border:\n      var(\n        --sinch-comp-checkbox-color-checked-disabled-border-initial\n      );\n  }\n\n  /* Checked Invalid */\n\n  /* Invalid Disabled */\n\n  /* Checked Invalid Disabled */\n\n  #checkbox {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n  }\n\n  :host([disabled]) #checkbox {\n    cursor: initial;\n  }\n\n  #icon-container {\n    position: relative;\n    width: 18px;\n    height: 18px;\n    align-self: flex-start;\n    margin-top: 3px;\n  }\n\n  /* Outline */\n  #checkbox::before {\n    content: "";\n    position: absolute;\n    inset: -3px;\n    border: 2px solid var(--sinch-comp-checkbox-color-default-outline-focus);\n    border-radius: calc(var(--sinch-comp-checkbox-shape-radius) + 3px);\n    transition: opacity 0.1s linear;\n    opacity: 0;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n\n  :host(:focus-visible) #checkbox::before {\n    opacity: 1;\n  }\n\n  /* Border / Background */\n  #checkbox::after {\n    content: "";\n    position: absolute;\n    width: 18px;\n    height: 18px;\n    inset: 0;\n    margin: auto;\n    background-color: var(--sinch-local-color-background);\n    border: 1px solid var(--sinch-local-color-border);\n    border-radius: var(--sinch-comp-checkbox-shape-radius);\n    transition: background-color 0.1s linear;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n\n  :host(:hover:not([disabled])) #checkbox::after {\n    background-color: var(--sinch-local-color-background-hover);\n    border-color: var(--sinch-local-color-border-hover);\n  }\n\n  :host(:active:not([disabled])) #checkbox::after {\n    background-color: var(--sinch-local-color-background-active);\n    border-color: var(--sinch-local-color-border-active);\n  }\n\n  #icon-checkmark,\n  #icon-indeterminate {\n    position: absolute;\n    left: 1px;\n    top: 1px;\n    width: 16px;\n    height: 16px;\n    transition: opacity 0.1s linear;\n    opacity: 0;\n    pointer-events: none;\n    fill: var(--sinch-sys-color-surface-primary-default);\n  }\n\n  :host(:not([indeterminate])[checked]) #icon-checkmark {\n    opacity: 1;\n  }\n\n  :host([indeterminate][checked]) #icon-indeterminate {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion) {\n    #icon-checkmark,\n    #icon-indeterminate,\n    #checkbox::before,\n    #checkbox::after {\n      transition: none;\n    }\n  }\n\n  #label {\n    flex: 1;\n    align-self: center;\n    padding-left: 8px;\n    font: var(--sinch-comp-checkbox-font-label);\n    cursor: pointer;\n\n    --sinch-global-color-text: var(--sinch-local-color-text);\n  }\n\n  :host(:not([text])) #label,\n  :host([text=""]) #label {\n    display: none;\n  }\n\n  :host([disabled]) #label {\n    cursor: initial;\n  }\n\n</style>\n\n<div id="wrapper" >\n  <div id="icon-container">\n    <div id="checkbox"></div>\n    <svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true">\n      <path\n        d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"\n      />\n    </svg>\n    <svg id="icon-indeterminate" viewBox="0 0 24 24" aria-hidden="true">\n      <path\n        d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"\n      />\n    </svg>\n  </div>\n  <sinch-rich-text id="label"></sinch-rich-text>\n</div>\n';
+const templateHTML$U = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-checkbox-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-default-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-default-text-initial)}:host([invalid])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-invalid-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-invalid-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-invalid-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-invalid-text-initial)}:host([checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-checked-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-checked-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-checkbox-color-disabled-text-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-disabled-border-initial)}#checkbox{width:18px;height:18px;cursor:pointer}:host([disabled]) #checkbox{cursor:initial}#icon-container{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#checkbox::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-checkbox-color-default-outline-focus);border-radius:calc(var(--sinch-comp-checkbox-shape-radius) + 3px);transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #checkbox::before{opacity:1}#checkbox::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-comp-checkbox-shape-radius);transition:background-color .1s linear;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#icon-checkmark,#icon-indeterminate{position:absolute;left:1px;top:1px;width:16px;height:16px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-sys-color-surface-primary-default)}:host(:not([indeterminate])[checked]) #icon-checkmark{opacity:1}:host([indeterminate][checked]) #icon-indeterminate{opacity:1}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-checkbox-font-label);cursor:pointer;--sinch-global-color-text:var(--sinch-local-color-text)}:host(:not([text])) #label,:host([text=""]) #label{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="icon-container"><div id="checkbox"></div><svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg> <svg id="icon-indeterminate" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg></div><sinch-rich-text id="label"></sinch-rich-text></div>';
 const template$U = document.createElement("template");
 template$U.innerHTML = templateHTML$U;
 class Checkbox extends NectaryElement {
@@ -2567,6 +2569,7 @@ class Checkbox extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = (e) => {
     getReactEventHandler(this, "on-focus")?.(e);
@@ -2582,7 +2585,7 @@ const getChipColorBg = (id) => {
 const getChipColorFg = (id) => {
   return `var(--sinch-comp-chip-color-${id}-default-foreground-initial)`;
 };
-const templateHTML$T = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    cursor: pointer;\n  }\n\n  #button {\n    all: initial;\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n    width: 100%;\n    height: var(--sinch-comp-chip-size-container-m);\n    padding: 0 5px 0 9px;\n    border-radius: var(--sinch-comp-chip-shape-radius);\n    background-color:\n      var(\n        --sinch-comp-chip-color-neutral-default-background-initial\n      );\n    box-sizing: border-box;\n\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-chip-color-neutral-default-foreground-initial\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-chip-color-neutral-default-foreground-initial\n      );\n    --sinch-global-size-icon: var(--sinch-comp-chip-size-icon-m);\n  }\n\n  :host(:focus-visible) > #button::after {\n    content: "";\n    position: absolute;\n    inset: -4px;\n    border-radius: calc(var(--sinch-comp-chip-shape-radius) + 4px);\n    border: 2px solid var(--sinch-comp-chip-color-outiline-focus);\n    pointer-events: none;\n  }\n\n  #text {\n    flex: 1;\n\n    --sinch-comp-text-font: var(--sinch-comp-chip-font-size-m-label);\n  }\n\n  :host([small]) #button {\n    height: var(--sinch-comp-chip-size-container-s);\n    padding: 0 3px 0 7px;\n\n    --sinch-global-size-icon: var(--sinch-comp-chip-size-icon-s);\n  }\n\n  :host([small]) #text {\n    --sinch-comp-text-font: var(--sinch-comp-chip-font-size-s-label);\n  }\n\n  ::slotted([slot="icon"]) {\n    margin-left: -4px;\n  }\n</style>\n\n<div id="button" inert>\n  <slot name="icon"></slot>\n  <sinch-text id="text" type="xs" ellipsis></sinch-text>\n  <slot name="right-icon">\n    <sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon>\n  </slot>\n</div>\n';
+const templateHTML$T = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:focus-visible)>#button::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--sinch-comp-chip-shape-radius) + 4px);border:2px solid var(--sinch-comp-chip-color-outiline-focus);pointer-events:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([small]) #button{height:var(--sinch-comp-chip-size-container-s);padding:0 3px 0 7px;--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-s)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-chip-font-size-s-label)}::slotted([slot=icon]){margin-left:-4px}</style><div id="button" inert><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="right-icon"><sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon></slot></div>';
 const template$T = document.createElement("template");
 template$T.innerHTML = templateHTML$T;
 class Chip extends NectaryElement {
@@ -2713,7 +2716,7 @@ const getSwatchColorBg = (id) => {
 const getSwatchColorFg = (id) => {
   return `var(--sinch-comp-color-swatch-color-${id}-foreground)`;
 };
-const templateHTML$S = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  #wrapper {\n    width: var(--sinch-global-size-icon, 32px);\n    height: var(--sinch-global-size-icon, 32px);\n    border-radius: 50%;\n  }\n\n  #wrapper.no-color {\n    background:\n      linear-gradient(\n        45deg,\n        var(--sinch-ref-color-violet-200),\n        var(--sinch-ref-color-honey-200),\n        var(--sinch-ref-color-grass-200),\n        var(--sinch-ref-color-ocean-200),\n        var(--sinch-ref-color-violet-200)\n      );\n  }\n</style>\n\n<div id="wrapper"></div>\n';
+const templateHTML$S = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:var(--sinch-global-size-icon,32px);height:var(--sinch-global-size-icon,32px);border-radius:50%}#wrapper.no-color{background:linear-gradient(45deg,var(--sinch-ref-color-violet-200),var(--sinch-ref-color-honey-200),var(--sinch-ref-color-grass-200),var(--sinch-ref-color-ocean-200),var(--sinch-ref-color-violet-200))}</style><div id="wrapper"></div>';
 const template$S = document.createElement("template");
 template$S.innerHTML = templateHTML$S;
 class ColorSwatch extends NectaryElement {
@@ -2811,7 +2814,7 @@ const enableOverscroll = () => {
     document.documentElement.style.removeProperty("overscroll-behavior");
   }
 };
-const templateHTML$R = '<style>\n:host {\n  display: contents;\n  position: relative;\n}\n\ndialog {\n  position: fixed;\n  left: 0;\n  top: 0;\n  margin: 0;\n  outline: none;\n  padding: 0;\n  border: none;\n  box-sizing: border-box;\n  max-width: unset;\n  max-height: unset;\n  z-index: 1;\n  background: none;\n  overflow: visible;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog::backdrop {\n  background-color: transparent;\n}\n\n#content {\n  position: relative;\n  z-index: 1;\n}\n\n#target-open {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n#focus {\n  display: none;\n  position: absolute;\n  width: 0;\n  height: 0;\n}\n</style>\n\n<slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot>\n<div id="focus"></div>\n<dialog id="dialog">\n  <div id="target-open">\n    <slot name="target-open"></slot>\n  </div>\n  <div id="content">\n    <slot name="content"></slot>\n  </div>\n</dialog>\n';
+const templateHTML$R = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
 const template$R = document.createElement("template");
 template$R.innerHTML = templateHTML$R;
 class Pop extends NectaryElement {
@@ -3183,6 +3186,7 @@ class Pop extends NectaryElement {
   };
   #onCloseReactHandler = (e) => {
     getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
   };
   #dispatchCloseEvent() {
     this.dispatchEvent(
@@ -3370,7 +3374,7 @@ const getPopOrientation$1 = (orientation) => {
   }
   return orientation;
 };
-const templateHTML$Q = '<style>\n  :host {\n    display: contents;\n  }\n\n  #content-wrapper {\n    padding-bottom: 8px;\n    filter: drop-shadow(var(--sinch-comp-tooltip-shadow));\n  }\n\n  :host([orientation="left"]) #content-wrapper {\n    padding-bottom: 0;\n    padding-right: 8px;\n  }\n\n  :host([orientation="right"]) #content-wrapper {\n    padding-bottom: 0;\n    padding-left: 8px;\n  }\n\n  :host([orientation^="bottom"]) #content-wrapper {\n    padding-bottom: 0;\n    padding-top: 8px;\n  }\n\n  #content {\n    position: relative;\n    display: block;\n    max-width: 300px;\n    padding: 2px 6px;\n    box-sizing: border-box;\n    background-color: var(--sinch-local-color-background);\n    border-radius: var(--sinch-comp-tooltip-shape-radius);\n    pointer-events: none;\n    opacity: 0;\n\n    --sinch-local-color-background: var(--sinch-comp-tooltip-color-background);\n    --sinch-global-color-text: var(--sinch-comp-tooltip-color-text);\n  }\n\n  #text {\n    word-break: break-word;\n    pointer-events: none;\n\n    --sinch-comp-text-font: var(--sinch-comp-tooltip-font-body);\n  }\n\n  #tip {\n    position: absolute;\n    left: 50%;\n    top: 100%;\n    transform: translateX(-50%) rotate(0);\n    transform-origin: top center;\n    fill: var(--sinch-local-color-background);\n    pointer-events: none;\n  }\n\n  #tip.hidden {\n    display: none;\n  }\n\n  :host([orientation="left"]) #tip {\n    transform: translateX(-50%) rotate(270deg);\n    top: 50%;\n    left: 100%;\n  }\n\n  :host([orientation="right"]) #tip {\n    transform: translateX(-50%) rotate(90deg);\n    top: 50%;\n    left: 0;\n  }\n\n  :host([orientation^="bottom"]) #tip {\n    transform: translateX(-50%) rotate(180deg);\n    top: 0;\n  }\n\n  :host([text-align="right"]) #text {\n    --sinch-comp-text-align: right;\n  }\n\n  :host([text-align="center"]) #text {\n    --sinch-comp-text-align: center;\n  }\n\n  :host([text-align="left"]) #text {\n    --sinch-comp-text-align: left;\n  }\n</style>\n\n<sinch-pop id="pop">\n  <slot id="target" slot="target"></slot>\n  <div id="content-wrapper" slot="content">\n    <div id="content">\n      <sinch-text id="text" type="s"></sinch-text>\n      <svg id="tip" width="8" height="4" aria-hidden="true">\n        <path d="m4 4 4-4h-8l4 4Z" />\n      </svg>\n    </div>\n  </div>\n</sinch-pop>';
+const templateHTML$Q = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 const TIP_SIZE$1 = 8;
 const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
@@ -3641,13 +3645,15 @@ class Tooltip extends NectaryElement {
   }
   #onShowReactHandler = () => {
     getReactEventHandler(this, "on-show")?.();
+    getReactEventHandler(this, "onShow")?.();
   };
   #onHideReactHandler = () => {
     getReactEventHandler(this, "on-hide")?.();
+    getReactEventHandler(this, "onHide")?.();
   };
 }
 defineCustomElement("sinch-tooltip", Tooltip);
-const templateHTML$P = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  width: 44px;\n  height: 56px;\n  padding: 12px 6px;\n  box-sizing: border-box;\n}\n\n#swatch-wrapper {\n  position: relative;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n}\n\n#swatch-wrapper::after {\n  content: "";\n  position: absolute;\n  width: 34px;\n  height: 34px;\n  inset: -3px;\n  border: 2px solid var(--sinch-comp-color-menu-option-color-default-border-initial);\n  border-radius: 50%;\n  pointer-events: none;\n}\n\n:host([data-checked]) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-selected);\n}\n\n:host([data-selected]) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-focus);\n}\n\n:host(:hover) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-hover);\n}\n\n:host(:active) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-active);\n}\n</style>\n\n<div id="wrapper">\n  <sinch-tooltip id="tooltip">\n    <div id="swatch-wrapper">\n      <sinch-color-swatch id="swatch"></sinch-color-swatch>\n    </div>\n  </sinch-tooltip>\n</div>\n';
+const templateHTML$P = '<style>:host{display:block;outline:0}#wrapper{width:44px;height:56px;padding:12px 6px;box-sizing:border-box}#swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}#swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid var(--sinch-comp-color-menu-option-color-default-border-initial);border-radius:50%;pointer-events:none}:host([data-checked]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-selected)}:host([data-selected]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-focus)}:host(:hover) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-hover)}:host(:active) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-active)}</style><div id="wrapper"><sinch-tooltip id="tooltip"><div id="swatch-wrapper"><sinch-color-swatch id="swatch"></sinch-color-swatch></div></sinch-tooltip></div>';
 const template$P = document.createElement("template");
 template$P.innerHTML = templateHTML$P;
 class ColorMenuOption extends NectaryElement {
@@ -3692,7 +3698,7 @@ class ColorMenuOption extends NectaryElement {
   }
 }
 defineCustomElement("sinch-color-menu-option", ColorMenuOption);
-const templateHTML$O = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#listbox {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 10px;\n  overflow-y: auto;\n}\n\n#listbox.empty {\n  display: none;\n}\n</style>\n\n<div id="listbox" role="presentation">\n  <slot id="options"></slot>\n</div>\n';
+const templateHTML$O = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox.empty{display:none}</style><div id="listbox" role="presentation"><slot id="options"></slot></div>';
 const NUM_COLS_DEFAULT = 5;
 const ITEM_WIDTH = 44;
 const ITEM_HEIGHT$1 = 56;
@@ -3989,6 +3995,7 @@ class ColorMenu extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-color-menu", ColorMenu);
@@ -4126,7 +4133,7 @@ const isDateOnScreen = (uiDate, date) => {
   const lastDateOfMonth = new Date(Date.UTC(uiDate.getUTCFullYear(), uiDate.getUTCMonth() + 1, 0));
   return isDateBetween(date, firstDateOfMonth, lastDateOfMonth);
 };
-const templateHTML$N = '<style>\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  #content {\n    width: fit-content;\n    box-sizing: border-box;\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  #month {\n    display: flex;\n    flex-direction: column;\n    row-gap: 8px;\n  }\n\n  .week {\n    display: flex;\n    flex-direction: row;\n    column-gap: 8px;\n  }\n\n  .week.empty {\n    display: none;\n  }\n\n  .day {\n    all: initial;\n    font: var(--sinch-comp-date-picker-font-day);\n    width: 24px;\n    height: 24px;\n    line-height: 22px;\n    color: var(--sinch-comp-date-picker-day-color-default-text-initial);\n    background-color:\n      var(\n        --sinch-comp-date-picker-day-color-default-background-initial\n      );\n    border:\n      1px solid\n      var(--sinch-comp-date-picker-day-color-default-border-initial);\n    border-radius: var(--sinch-comp-date-picker-day-shape-radius);\n    text-align: center;\n    box-sizing: border-box;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .day:focus-visible {\n    outline:\n      1px solid\n      var(--sinch-comp-date-picker-day-color-default-outline-focus);\n    outline-offset: 1px;\n  }\n\n  .day:disabled {\n    cursor: initial;\n    color: var(--sinch-comp-date-picker-day-color-disabled-text-initial);\n  }\n\n  .day:enabled:hover {\n    background-color:\n      var(\n        --sinch-comp-date-picker-day-color-default-background-hover\n      );\n  }\n\n  .day:enabled.range {\n    background-color:\n      var(\n        --sinch-comp-date-picker-day-color-default-range-background\n      );\n  }\n\n  .day:enabled.selected {\n    color: var(--sinch-comp-date-picker-day-color-checked-text-initial);\n    background-color:\n      var(\n        --sinch-comp-date-picker-day-color-checked-background-initial\n      );\n    border-color:\n      var(\n        --sinch-comp-date-picker-day-color-checked-border-initial\n      );\n  }\n\n  .day.today {\n    font: var(--sinch-comp-date-picker-font-today);\n    color: var(--sinch-comp-date-picker-today-color-default-text-initial);\n    background-color:\n      var(\n        --sinch-comp-date-picker-today-color-default-background-initial\n      );\n    border-color:\n      var(\n        --sinch-comp-date-picker-today-color-default-border-initial\n      );\n  }\n\n  .day.today:hover {\n    background-color:\n      var(\n        --sinch-comp-date-picker-today-color-default-background-hover\n      );\n  }\n\n  .day.today:disabled {\n    color: var(--sinch-comp-date-picker-today-color-disabled-text-initial);\n    border-color:\n      var(\n        --sinch-comp-date-picker-today-color-disabled-border-initial\n      );\n  }\n\n  .day.today.selected {\n    color: var(--sinch-comp-date-picker-today-color-checked-text-initial);\n    background-color:\n      var(\n        --sinch-comp-date-picker-today-color-checked-background-initial\n      );\n    border-color:\n      var(\n        --sinch-comp-date-picker-today-color-checked-border-initial\n      );\n  }\n\n  #week-day-names {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    height: 24px;\n  }\n\n  .week-day-name {\n    font: var(--sinch-comp-date-picker-font-weekday);\n    color: var(--sinch-comp-date-picker-weekday-color-default-text-initial);\n    text-align: center;\n    width: 24px;\n    height: 24px;\n    line-height: 24px;\n    user-select: none;\n    text-transform: uppercase;\n  }\n\n  #content-header {\n    display: flex;\n    flex-direction: row;\n    height: 32px;\n    align-items: center;\n  }\n\n  #date {\n    flex: 1;\n    text-align: center;\n    text-transform: capitalize;\n\n    --sinch-com-text-font: var(--sinch-comp-date-picker-font-header);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-date-picker-header-color-default-text-initial\n      );\n  }\n\n  #prev-year {\n    margin-left: -4px;\n  }\n\n  #next-year {\n    margin-right: -4px;\n  }\n</style>\n\n<div id="content">\n  <div id="content-header">\n    <sinch-button id="prev-year" size="s">\n      <sinch-icon icons-version="2" name="fa-angles-left"\n        id="icon-prev-year"\n        slot="icon"\n      ></sinch-icon>\n    </sinch-button>\n    <sinch-button id="prev-month" size="s">\n      <sinch-icon icons-version="2" name="fa-angle-left"\n        id="icon-prev-month"\n        slot="icon"\n      ></sinch-icon>\n    </sinch-button>\n    <sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text>\n    <sinch-button id="next-month" size="s">\n      <sinch-icon icons-version="2" name="fa-angle-right"\n        id="icon-next-month"\n        slot="icon"\n      ></sinch-icon>\n    </sinch-button>\n    <sinch-button id="next-year" size="s">\n      <sinch-icon icons-version="2" name="fa-angles-right"\n        id="icon-next-year"\n        slot="icon"\n      ></sinch-icon>\n    </sinch-button>\n  </div>\n  <div id="week-day-names">\n    <div class="week-day-name"></div>\n    <div class="week-day-name"></div>\n    <div class="week-day-name"></div>\n    <div class="week-day-name"></div>\n    <div class="week-day-name"></div>\n    <div class="week-day-name"></div>\n    <div class="week-day-name"></div>\n  </div>\n  <div id="month">\n    <div class="week">\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n    </div>\n    <div class="week">\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n    </div>\n    <div class="week">\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n    </div>\n    <div class="week">\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n    </div>\n    <div class="week">\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n    </div>\n    <div class="week">\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n      <button class="day"></button>\n    </div>\n  </div>\n</div>\n';
+const templateHTML$N = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-comp-date-picker-font-day);width:24px;height:24px;line-height:22px;color:var(--sinch-comp-date-picker-day-color-default-text-initial);background-color:var(--sinch-comp-date-picker-day-color-default-background-initial);border:1px solid var(--sinch-comp-date-picker-day-color-default-border-initial);border-radius:var(--sinch-comp-date-picker-day-shape-radius);text-align:center;box-sizing:border-box;user-select:none;cursor:pointer}.day:focus-visible{outline:1px solid var(--sinch-comp-date-picker-day-color-default-outline-focus);outline-offset:1px}.day:disabled{cursor:initial;color:var(--sinch-comp-date-picker-day-color-disabled-text-initial)}.day:enabled:hover{background-color:var(--sinch-comp-date-picker-day-color-default-background-hover)}.day:enabled.range{background-color:var(--sinch-comp-date-picker-day-color-default-range-background)}.day:enabled.selected{color:var(--sinch-comp-date-picker-day-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-day-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-day-color-checked-border-initial)}.day.today{font:var(--sinch-comp-date-picker-font-today);color:var(--sinch-comp-date-picker-today-color-default-text-initial);background-color:var(--sinch-comp-date-picker-today-color-default-background-initial);border-color:var(--sinch-comp-date-picker-today-color-default-border-initial)}.day.today:hover{background-color:var(--sinch-comp-date-picker-today-color-default-background-hover)}.day.today:disabled{color:var(--sinch-comp-date-picker-today-color-disabled-text-initial);border-color:var(--sinch-comp-date-picker-today-color-disabled-border-initial)}.day.today.selected{color:var(--sinch-comp-date-picker-today-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-today-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-today-color-checked-border-initial)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-comp-date-picker-font-weekday);color:var(--sinch-comp-date-picker-weekday-color-default-text-initial);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize;--sinch-com-text-font:var(--sinch-comp-date-picker-font-header);--sinch-global-color-text:var(--sinch-comp-date-picker-header-color-default-text-initial)}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-button id="prev-year" size="s"><sinch-icon icons-version="2" name="fa-angles-left" id="icon-prev-year" slot="icon"></sinch-icon></sinch-button><sinch-button id="prev-month" size="s"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-prev-month" slot="icon"></sinch-icon></sinch-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-button id="next-month" size="s"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-next-month" slot="icon"></sinch-icon></sinch-button><sinch-button id="next-year" size="s"><sinch-icon icons-version="2" name="fa-angles-right" id="icon-next-year" slot="icon"></sinch-icon></sinch-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div><div class="week"><button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button> <button class="day"></button></div></div></div>';
 const template$N = document.createElement("template");
 template$N.innerHTML = templateHTML$N;
 class DatePicker extends NectaryElement {
@@ -4528,6 +4535,7 @@ class DatePicker extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-date-picker", DatePicker);
@@ -4572,7 +4580,7 @@ const enableScroll = () => {
     bodyEl.style.removeProperty("padding-right");
   }
 };
-const templateHTML$M = '<style>\n  :host {\n    display: contents;\n\n    --sinch-comp-dialog-max-width: 512px;\n    --sinch-comp-dialog-max-height: 90vh;\n    --sinch-comp-dialog-width: fit-content;\n    --sinch-dialog-close-button-display: unset;\n  }\n\n  #dialog {\n    position: fixed;\n    left: 0;\n    right: 0;\n    margin: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 24px 0;\n    width: var(--sinch-comp-dialog-width);\n    max-width: var(--sinch-comp-dialog-max-width);\n    max-height: var(--sinch-comp-dialog-max-height);\n    border-radius: var(--sinch-comp-dialog-shape-radius);\n    box-sizing: border-box;\n    contain: content;\n    background-color: var(--sinch-comp-dialog-color-default-background-initial);\n    border: none;\n    box-shadow: var(--sinch-comp-dialog-shadow);\n    outline: none;\n  }\n\n  #dialog:not([open]) {\n    display: none;\n  }\n\n  dialog::backdrop {\n    background-color: black;\n    opacity: 0.55;\n  }\n\n  #header {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    margin-bottom: 12px;\n    padding: 0 24px;\n    gap: 8px;\n\n    --sinch-global-size-icon: 24px;\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-dialog-color-default-icon-initial\n      );\n  }\n\n  #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-dialog-color-default-title-initial\n      );\n    --sinch-comp-title-font: var(--sinch-comp-dialog-font-title);\n  }\n\n  #content {\n    min-height: 0;\n    overflow: auto;\n    padding: 4px 24px;\n  }\n\n  #action {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    gap: 16px;\n    margin-top: 20px;\n    padding: 0 24px;\n  }\n\n  #action.empty {\n    display: none;\n  }\n\n  #close {\n    display: var(--sinch-dialog-close-button-display, initial);\n    position: relative;\n    left: 4px;\n    top: -4px;\n    margin-left: auto;\n  }\n</style>\n\n<dialog id="dialog">\n  <div id="header">\n    <slot id="icon" name="icon"></slot>\n    <sinch-title id="caption" type="m" level="3"></sinch-title>\n    <sinch-button id="close" size="s">\n      <sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon>\n    </sinch-button>\n  </div>\n  <div id="content">\n    <sinch-stop-events events="close">\n      <slot name="content"></slot>\n    </sinch-stop-events>\n  </div>\n  <div id="action">\n    <sinch-stop-events events="close">\n      <slot name="buttons"></slot>\n    </sinch-stop-events>\n  </div>\n</dialog>\n';
+const templateHTML$M = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{display:var(--sinch-dialog-close-button-display,initial);position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-button id="close" size="s"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template$M = document.createElement("template");
 template$M.innerHTML = templateHTML$M;
 class Dialog extends NectaryElement {
@@ -4695,6 +4703,7 @@ class Dialog extends NectaryElement {
   };
   #onCloseReactHandler = (e) => {
     getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
   };
   #dispatchCloseEvent(detail, cancelable) {
     this.dispatchEvent(new CustomEvent("-close", { detail, cancelable }));
@@ -5022,7 +5031,7 @@ const getMergedValueSliced = (inputValue, maskSymbols, selectionStart, selection
   }
   return chars.slice(selectionStart, selectionEnd).join("");
 };
-const templateHTML$L = '<style>\n:host {\n  all: initial;\n  display: inline-block;\n  vertical-align: middle;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--sinch-local-shape-radius);\n  width: 100%;\n  height: var(--sinch-local-size);\n  background-color: var(--sinch-comp-input-color-default-background-initial);\n\n  /* Default values */\n  --sinch-local-size: var(--sinch-comp-input-size-container-m);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-m);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-m);\n}\n\n:host([data-size="l"]) > #wrapper {\n  --sinch-local-size: var(--sinch-comp-input-size-container-l);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-l);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-l);\n}\n\n:host([data-size="m"]) > #wrapper {\n  --sinch-local-size: var(--sinch-comp-input-size-container-m);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-m);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-m);\n}\n\n:host([data-size="s"]) > #wrapper {\n  --sinch-local-size: var(--sinch-comp-input-size-container-s);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-s);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-s);\n}\n\n#input-wrapper {\n  position: relative;\n  flex: 1;\n  flex-basis: 0;\n  min-width: 0;\n  align-self: stretch;\n}\n\n#input {\n  all: initial;\n  width: 100%;\n  height: 100%;\n  padding: 0 12px;\n  box-sizing: border-box;\n  font: var(--sinch-comp-input-font-input);\n  color: var(--sinch-comp-input-color-default-text-initial);\n}\n\n#input::placeholder {\n  font: var(--sinch-comp-input-font-placeholder) !important;\n  color: var(--sinch-comp-input-color-default-text-placeholder);\n  opacity: 1;\n}\n\n#input:disabled {\n  color: var(--sinch-comp-input-color-disabled-text-initial);\n  -webkit-text-fill-color: var(--sinch-comp-input-color-disabled-text-initial);\n}\n\n#input-mask {\n  display: none;\n  position: absolute;\n  inset: 0;\n  padding: 0 12px;\n  pointer-events: none;\n  color: var(--sinch-comp-input-color-default-text-placeholder);\n  white-space: pre;\n  height: fit-content;\n  margin: auto 0;\n  overflow: hidden;\n}\n\n#border {\n  position: absolute;\n  border: 1px solid var(--sinch-comp-input-color-default-border-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  inset: 0;\n  pointer-events: none;\n}\n\n:host([disabled]) #border {\n  border-color: var(--sinch-comp-input-color-disabled-border-initial);\n}\n\n#input-wrapper:focus-within + #border {\n  border-color: var(--sinch-comp-input-color-default-border-focus);\n  border-width: 2px;\n}\n\n:host([mask]) #input,\n#input-mask {\n  font: var(--sinch-sys-font-body-monospace-m);\n}\n\n:host([mask]) #input-mask {\n  display: block;\n}\n\n:host([invalid]:not([disabled])) #input-wrapper:not(:focus-within) + #border {\n  border-color: var(--sinch-comp-input-color-invalid-border-initial);\n}\n\n#input[type="password"]:not(:placeholder-shown) {\n  font-size: 1.5em;\n  letter-spacing: 0.1em;\n}\n\n#icon-wrapper {\n  position: relative;\n  height: 100%;\n}\n\n#icon {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  left: 12px;\n  top: 0;\n  bottom: 0;\n  pointer-events: none;\n\n  --sinch-global-color-icon: var(--sinch-comp-input-color-default-icon-initial);\n}\n\n:host([disabled]) #icon {\n  --sinch-global-color-icon: var(--sinch-comp-input-color-disabled-icon-initial);\n}\n\n#icon-wrapper.empty {\n  display: none;\n}\n\n#icon-wrapper.empty ~ #input-wrapper > #input,\n#icon-wrapper.empty ~ #input-wrapper > #input-mask {\n  padding-left: 12px;\n}\n\n#icon-wrapper:not(.empty) ~ #input-wrapper > #input,\n#icon-wrapper:not(.empty) ~ #input-wrapper > #input-mask {\n  padding-left: calc(var(--sinch-global-size-icon) + 20px);\n}\n\n#right {\n  display: flex;\n  flex-direction: row;\n  align-self: stretch;\n  align-items: center;\n  gap: 4px;\n  padding-right: 4px;\n}\n\n#right.empty {\n  display: none;\n}\n\n#left {\n  display: flex;\n  flex-direction: row;\n  align-self: stretch;\n  align-items: center;\n  gap: 4px;\n  padding-left: 4px;\n}\n\n#left.empty {\n  display: none;\n}\n</style>\n\n<div id="wrapper">\n  <div id="left">\n    <slot name="left"></slot>\n  </div>\n  <div id="icon-wrapper">\n    <div id="icon">\n      <slot name="icon"></slot>\n    </div>\n  </div>\n  <div id="input-wrapper">\n    <div id="input-mask"></div>\n    <input id="input" type="text"/>\n  </div>\n  <div id="border"></div>\n  <div id="right">\n    <slot name="right"></slot>\n  </div>\n</div>\n';
+const templateHTML$L = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-local-shape-radius);width:100%;height:var(--sinch-local-size);background-color:var(--sinch-comp-input-color-default-background-initial);--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-l);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-s);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-s)}#input-wrapper{position:relative;flex:1;flex-basis:0;min-width:0;align-self:stretch}#input{all:initial;width:100%;height:100%;padding:0 12px;box-sizing:border-box;font:var(--sinch-comp-input-font-input);color:var(--sinch-comp-input-color-default-text-initial)}#input::placeholder{font:var(--sinch-comp-input-font-placeholder)!important;color:var(--sinch-comp-input-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-input-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-input-color-disabled-text-initial)}#input-mask{display:none;position:absolute;inset:0;padding:0 12px;pointer-events:none;color:var(--sinch-comp-input-color-default-text-placeholder);white-space:pre;height:fit-content;margin:auto 0;overflow:hidden}#border{position:absolute;border:1px solid var(--sinch-comp-input-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([disabled]) #border{border-color:var(--sinch-comp-input-color-disabled-border-initial)}#input-wrapper:focus-within+#border{border-color:var(--sinch-comp-input-color-default-border-focus);border-width:2px}#input-mask,:host([mask]) #input{font:var(--sinch-sys-font-body-monospace-m)}:host([mask]) #input-mask{display:block}:host([invalid]:not([disabled])) #input-wrapper:not(:focus-within)+#border{border-color:var(--sinch-comp-input-color-invalid-border-initial)}#input[type=password]:not(:placeholder-shown){font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:12px;top:0;bottom:0;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-input-color-default-icon-initial)}:host([disabled]) #icon{--sinch-global-color-icon:var(--sinch-comp-input-color-disabled-icon-initial)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input-wrapper>#input,#icon-wrapper.empty~#input-wrapper>#input-mask{padding-left:12px}#icon-wrapper:not(.empty)~#input-wrapper>#input,#icon-wrapper:not(.empty)~#input-wrapper>#input-mask{padding-left:calc(var(--sinch-global-size-icon) + 20px)}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><div id="input-wrapper"><div id="input-mask"></div><input id="input" type="text"></div><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
 const template$L = document.createElement("template");
 template$L.innerHTML = templateHTML$L;
 class Input extends NectaryElement {
@@ -5682,6 +5691,7 @@ class Input extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -5720,7 +5730,7 @@ const getPopOrientation = (orientation) => {
   }
   return orientation;
 };
-const templateHTML$K = '<style>\n:host {\n  display: contents;\n}\n\n#content-wrapper {\n  position: relative;\n  padding-top: 4px;\n  width: fit-content;\n  min-width: 100%;\n}\n\n:host([tip]) #content-wrapper {\n  padding-top: 12px;\n  filter: drop-shadow(var(--sinch-comp-popover-shadow));\n}\n\n:host([orientation^="top"]) #content-wrapper {\n  padding-top: 0;\n  padding-bottom: 4px;\n}\n\n:host([orientation^="top"][tip]) #content-wrapper {\n  padding-top: 0;\n  padding-bottom: 12px;\n}\n\n#content {\n  background-color: var(--sinch-comp-popover-color-default-background-initial);\n  border: 1px solid var(--sinch-comp-popover-color-default-border-initial);\n  border-radius: var(--sinch-comp-popover-shape-radius);\n  box-shadow: var(--sinch-comp-popover-shadow);\n  overflow: hidden;\n}\n\n:host([tip]) #content {\n  box-shadow: none;\n}\n\n#tip {\n  position: absolute;\n  left: 50%;\n  top: 13px;\n  transform: translateX(-50%) rotate(180deg);\n  transform-origin: top center;\n  fill: var(--sinch-comp-popover-color-default-background-initial);\n  stroke: var(--sinch-comp-popover-color-default-border-initial);\n  stroke-linecap: square;\n  pointer-events: none;\n  display: none;\n}\n\n:host([orientation^="top"]) #tip {\n  transform: translateX(-50%) rotate(0deg);\n  top: calc(100% - 13px);\n}\n\n:host([tip]) #tip:not(.hidden) {\n  display: block;\n}\n</style>\n\n<sinch-pop id="pop" inset="4">\n  <slot name="target" slot="target"></slot>\n  <div id="content-wrapper" slot="content">\n    <div id="content">\n      <slot name="content"></slot>\n    </div>\n    <svg id="tip" width="16" height="9" aria-hidden="true">\n      <path d="m0 0 8 8 8 -8"/>\n    </svg>\n  </div>\n</sinch-pop>\n';
+const templateHTML$K = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 const TIP_SIZE = 16;
 const template$K = document.createElement("template");
 template$K.innerHTML = templateHTML$K;
@@ -5909,7 +5919,7 @@ class Popover extends NectaryElement {
   };
 }
 defineCustomElement("sinch-popover", Popover);
-const templateHTML$J = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  width: 100%;\n  height: 40px;\n  border-bottom: 1px solid var(--sinch-comp-tab-color-default-border-initial);\n  box-sizing: border-box;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML$J = '<style>:host{display:block}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-comp-tab-color-default-border-initial);box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 const template$J = document.createElement("template");
 template$J.innerHTML = templateHTML$J;
 class Tabs extends NectaryElement {
@@ -5977,10 +5987,11 @@ class Tabs extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-tabs", Tabs);
-const templateHTML$I = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#button {\n  all: initial;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px 0;\n  box-sizing: border-box;\n  cursor: pointer;\n  background-color: var(--sinch-comp-tab-color-default-background-initial);\n  border-top-left-radius: var(--sinch-comp-tab-shape-radius);\n  border-top-right-radius: var(--sinch-comp-tab-shape-radius);\n  height: 39px;\n\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-tab-size-icon);\n}\n\n#button:hover {\n  background-color: var(--sinch-comp-tab-color-default-background-hover);\n}\n\n/* Outline */\n#button:focus-visible::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  bottom: -3px;\n  border: 2px solid var(--sinch-comp-tab-color-default-outline-focus);\n  border-top-left-radius: var(--sinch-comp-tab-shape-radius);\n  border-top-right-radius: var(--sinch-comp-tab-shape-radius);\n  pointer-events: none;\n}\n\n#button:disabled {\n  cursor: unset;\n  pointer-events: none;\n\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-disabled-icon-initial);\n}\n\n:host([data-checked]) #button {\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-checked-icon-initial);\n}\n\n/* Underline */\n:host([data-checked]) #button::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -1px;\n  pointer-events: none;\n  border-top: 2px solid var(--sinch-comp-tab-color-checked-border-initial);\n}\n\n::slotted(*) {\n  display: block;\n}\n</style>\n\n<sinch-tooltip id="tooltip">\n  <button id="button" tabindex="0">\n    <slot name="icon"></slot>\n  </button>\n</sinch-tooltip>\n';
+const templateHTML$I = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button" tabindex="0"><slot name="icon"></slot></button></sinch-tooltip>';
 const template$I = document.createElement("template");
 template$I.innerHTML = templateHTML$I;
 class TabsIconOption extends NectaryElement {
@@ -6078,7 +6089,7 @@ const debounceTimeout = (ms) => createDebounce(
   globalThis.clearTimeout
 );
 const dataJson = /* @__PURE__ */ JSON.parse('[{"name":"smileys-emotion","emojis":[{"emoji":"😀","label":"grinning face","tone":0},{"emoji":"😃","label":"grinning face with big eyes","tone":0},{"emoji":"😄","label":"grinning face with smiling eyes","tone":0},{"emoji":"😁","label":"beaming face with smiling eyes","tone":0},{"emoji":"😆","label":"grinning squinting face","tone":0},{"emoji":"😅","label":"grinning face with sweat","tone":0},{"emoji":"🤣","label":"rolling on the floor laughing","tone":0},{"emoji":"😂","label":"face with tears of joy","tone":0},{"emoji":"🙂","label":"slightly smiling face","tone":0},{"emoji":"🙃","label":"upside-down face","tone":0},{"emoji":"😉","label":"winking face","tone":0},{"emoji":"😊","label":"smiling face with smiling eyes","tone":0},{"emoji":"😇","label":"smiling face with halo","tone":0},{"emoji":"🥰","label":"smiling face with hearts","tone":0},{"emoji":"😍","label":"smiling face with heart-eyes","tone":0},{"emoji":"🤩","label":"star-struck","tone":0},{"emoji":"😘","label":"face blowing a kiss","tone":0},{"emoji":"😗","label":"kissing face","tone":0},{"emoji":"☺️","label":"smiling face","tone":0},{"emoji":"😚","label":"kissing face with closed eyes","tone":0},{"emoji":"😙","label":"kissing face with smiling eyes","tone":0},{"emoji":"🥲","label":"smiling face with tear","tone":0},{"emoji":"😋","label":"face savoring food","tone":0},{"emoji":"😛","label":"face with tongue","tone":0},{"emoji":"😜","label":"winking face with tongue","tone":0},{"emoji":"🤪","label":"zany face","tone":0},{"emoji":"😝","label":"squinting face with tongue","tone":0},{"emoji":"🤑","label":"money-mouth face","tone":0},{"emoji":"🤗","label":"smiling face with open hands","tone":0},{"emoji":"🤭","label":"face with hand over mouth","tone":0},{"emoji":"🤫","label":"shushing face","tone":0},{"emoji":"🤔","label":"thinking face","tone":0},{"emoji":"🤐","label":"zipper-mouth face","tone":0},{"emoji":"🤨","label":"face with raised eyebrow","tone":0},{"emoji":"😐️","label":"neutral face","tone":0},{"emoji":"😑","label":"expressionless face","tone":0},{"emoji":"😶","label":"face without mouth","tone":0},{"emoji":"😶‍🌫️","label":"face in clouds","tone":0},{"emoji":"😏","label":"smirking face","tone":0},{"emoji":"😒","label":"unamused face","tone":0},{"emoji":"🙄","label":"face with rolling eyes","tone":0},{"emoji":"😬","label":"grimacing face","tone":0},{"emoji":"😮‍💨","label":"face exhaling","tone":0},{"emoji":"🤥","label":"lying face","tone":0},{"emoji":"😌","label":"relieved face","tone":0},{"emoji":"😔","label":"pensive face","tone":0},{"emoji":"😪","label":"sleepy face","tone":0},{"emoji":"🤤","label":"drooling face","tone":0},{"emoji":"😴","label":"sleeping face","tone":0},{"emoji":"😷","label":"face with medical mask","tone":0},{"emoji":"🤒","label":"face with thermometer","tone":0},{"emoji":"🤕","label":"face with head-bandage","tone":0},{"emoji":"🤢","label":"nauseated face","tone":0},{"emoji":"🤮","label":"face vomiting","tone":0},{"emoji":"🤧","label":"sneezing face","tone":0},{"emoji":"🥵","label":"hot face","tone":0},{"emoji":"🥶","label":"cold face","tone":0},{"emoji":"🥴","label":"woozy face","tone":0},{"emoji":"😵","label":"face with crossed-out eyes","tone":0},{"emoji":"😵‍💫","label":"face with spiral eyes","tone":0},{"emoji":"🤯","label":"exploding head","tone":0},{"emoji":"🤠","label":"cowboy hat face","tone":0},{"emoji":"🥳","label":"partying face","tone":0},{"emoji":"🥸","label":"disguised face","tone":0},{"emoji":"😎","label":"smiling face with sunglasses","tone":0},{"emoji":"🤓","label":"nerd face","tone":0},{"emoji":"🧐","label":"face with monocle","tone":0},{"emoji":"😕","label":"confused face","tone":0},{"emoji":"😟","label":"worried face","tone":0},{"emoji":"🙁","label":"slightly frowning face","tone":0},{"emoji":"☹️","label":"frowning face","tone":0},{"emoji":"😮","label":"face with open mouth","tone":0},{"emoji":"😯","label":"hushed face","tone":0},{"emoji":"😲","label":"astonished face","tone":0},{"emoji":"😳","label":"flushed face","tone":0},{"emoji":"🥺","label":"pleading face","tone":0},{"emoji":"😦","label":"frowning face with open mouth","tone":0},{"emoji":"😧","label":"anguished face","tone":0},{"emoji":"😨","label":"fearful face","tone":0},{"emoji":"😰","label":"anxious face with sweat","tone":0},{"emoji":"😥","label":"sad but relieved face","tone":0},{"emoji":"😢","label":"crying face","tone":0},{"emoji":"😭","label":"loudly crying face","tone":0},{"emoji":"😱","label":"face screaming in fear","tone":0},{"emoji":"😖","label":"confounded face","tone":0},{"emoji":"😣","label":"persevering face","tone":0},{"emoji":"😞","label":"disappointed face","tone":0},{"emoji":"😓","label":"downcast face with sweat","tone":0},{"emoji":"😩","label":"weary face","tone":0},{"emoji":"😫","label":"tired face","tone":0},{"emoji":"🥱","label":"yawning face","tone":0},{"emoji":"😤","label":"face with steam from nose","tone":0},{"emoji":"😡","label":"enraged face","tone":0},{"emoji":"😠","label":"angry face","tone":0},{"emoji":"🤬","label":"face with symbols on mouth","tone":0},{"emoji":"😈","label":"smiling face with horns","tone":0},{"emoji":"👿","label":"angry face with horns","tone":0},{"emoji":"💀","label":"skull","tone":0},{"emoji":"☠️","label":"skull and crossbones","tone":0},{"emoji":"💩","label":"pile of poo","tone":0},{"emoji":"🤡","label":"clown face","tone":0},{"emoji":"👹","label":"ogre","tone":0},{"emoji":"👺","label":"goblin","tone":0},{"emoji":"👻","label":"ghost","tone":0},{"emoji":"👽️","label":"alien","tone":0},{"emoji":"👾","label":"alien monster","tone":0},{"emoji":"🤖","label":"robot","tone":0},{"emoji":"😺","label":"grinning cat","tone":0},{"emoji":"😸","label":"grinning cat with smiling eyes","tone":0},{"emoji":"😹","label":"cat with tears of joy","tone":0},{"emoji":"😻","label":"smiling cat with heart-eyes","tone":0},{"emoji":"😼","label":"cat with wry smile","tone":0},{"emoji":"😽","label":"kissing cat","tone":0},{"emoji":"🙀","label":"weary cat","tone":0},{"emoji":"😿","label":"crying cat","tone":0},{"emoji":"😾","label":"pouting cat","tone":0},{"emoji":"🙈","label":"see-no-evil monkey","tone":0},{"emoji":"🙉","label":"hear-no-evil monkey","tone":0},{"emoji":"🙊","label":"speak-no-evil monkey","tone":0},{"emoji":"💋","label":"kiss mark","tone":0},{"emoji":"💌","label":"love letter","tone":0},{"emoji":"💘","label":"heart with arrow","tone":0},{"emoji":"💝","label":"heart with ribbon","tone":0},{"emoji":"💖","label":"sparkling heart","tone":0},{"emoji":"💗","label":"growing heart","tone":0},{"emoji":"💓","label":"beating heart","tone":0},{"emoji":"💞","label":"revolving hearts","tone":0},{"emoji":"💕","label":"two hearts","tone":0},{"emoji":"💟","label":"heart decoration","tone":0},{"emoji":"❣️","label":"heart exclamation","tone":0},{"emoji":"💔","label":"broken heart","tone":0},{"emoji":"❤️‍🔥","label":"heart on fire","tone":0},{"emoji":"❤️‍🩹","label":"mending heart","tone":0},{"emoji":"❤️","label":"red heart","tone":0},{"emoji":"🧡","label":"orange heart","tone":0},{"emoji":"💛","label":"yellow heart","tone":0},{"emoji":"💚","label":"green heart","tone":0},{"emoji":"💙","label":"blue heart","tone":0},{"emoji":"💜","label":"purple heart","tone":0},{"emoji":"🤎","label":"brown heart","tone":0},{"emoji":"🖤","label":"black heart","tone":0},{"emoji":"🤍","label":"white heart","tone":0},{"emoji":"💯","label":"hundred points","tone":0},{"emoji":"💢","label":"anger symbol","tone":0},{"emoji":"💥","label":"collision","tone":0},{"emoji":"💫","label":"dizzy","tone":0},{"emoji":"💦","label":"sweat droplets","tone":0},{"emoji":"💨","label":"dashing away","tone":0},{"emoji":"🕳️","label":"hole","tone":0},{"emoji":"💣️","label":"bomb","tone":0},{"emoji":"💬","label":"speech balloon","tone":0},{"emoji":"👁️‍🗨️","label":"eye in speech bubble","tone":0},{"emoji":"🗨️","label":"left speech bubble","tone":0},{"emoji":"🗯️","label":"right anger bubble","tone":0},{"emoji":"💭","label":"thought balloon","tone":0},{"emoji":"💤","label":"ZZZ","tone":0}]},{"name":"people-body","emojis":[{"emoji":"👋","label":"waving hand","tone":0,"skins":[{"emoji":"👋🏻","label":"waving hand: light skin tone","tone":1},{"emoji":"👋🏼","label":"waving hand: medium-light skin tone","tone":2},{"emoji":"👋🏽","label":"waving hand: medium skin tone","tone":3},{"emoji":"👋🏾","label":"waving hand: medium-dark skin tone","tone":4},{"emoji":"👋🏿","label":"waving hand: dark skin tone","tone":5}]},{"emoji":"🤚","label":"raised back of hand","tone":0,"skins":[{"emoji":"🤚🏻","label":"raised back of hand: light skin tone","tone":1},{"emoji":"🤚🏼","label":"raised back of hand: medium-light skin tone","tone":2},{"emoji":"🤚🏽","label":"raised back of hand: medium skin tone","tone":3},{"emoji":"🤚🏾","label":"raised back of hand: medium-dark skin tone","tone":4},{"emoji":"🤚🏿","label":"raised back of hand: dark skin tone","tone":5}]},{"emoji":"🖐️","label":"hand with fingers splayed","tone":0,"skins":[{"emoji":"🖐🏻","label":"hand with fingers splayed: light skin tone","tone":1},{"emoji":"🖐🏼","label":"hand with fingers splayed: medium-light skin tone","tone":2},{"emoji":"🖐🏽","label":"hand with fingers splayed: medium skin tone","tone":3},{"emoji":"🖐🏾","label":"hand with fingers splayed: medium-dark skin tone","tone":4},{"emoji":"🖐🏿","label":"hand with fingers splayed: dark skin tone","tone":5}]},{"emoji":"✋","label":"raised hand","tone":0,"skins":[{"emoji":"✋🏻","label":"raised hand: light skin tone","tone":1},{"emoji":"✋🏼","label":"raised hand: medium-light skin tone","tone":2},{"emoji":"✋🏽","label":"raised hand: medium skin tone","tone":3},{"emoji":"✋🏾","label":"raised hand: medium-dark skin tone","tone":4},{"emoji":"✋🏿","label":"raised hand: dark skin tone","tone":5}]},{"emoji":"🖖","label":"vulcan salute","tone":0,"skins":[{"emoji":"🖖🏻","label":"vulcan salute: light skin tone","tone":1},{"emoji":"🖖🏼","label":"vulcan salute: medium-light skin tone","tone":2},{"emoji":"🖖🏽","label":"vulcan salute: medium skin tone","tone":3},{"emoji":"🖖🏾","label":"vulcan salute: medium-dark skin tone","tone":4},{"emoji":"🖖🏿","label":"vulcan salute: dark skin tone","tone":5}]},{"emoji":"👌","label":"OK hand","tone":0,"skins":[{"emoji":"👌🏻","label":"OK hand: light skin tone","tone":1},{"emoji":"👌🏼","label":"OK hand: medium-light skin tone","tone":2},{"emoji":"👌🏽","label":"OK hand: medium skin tone","tone":3},{"emoji":"👌🏾","label":"OK hand: medium-dark skin tone","tone":4},{"emoji":"👌🏿","label":"OK hand: dark skin tone","tone":5}]},{"emoji":"🤌","label":"pinched fingers","tone":0,"skins":[{"emoji":"🤌🏻","label":"pinched fingers: light skin tone","tone":1},{"emoji":"🤌🏼","label":"pinched fingers: medium-light skin tone","tone":2},{"emoji":"🤌🏽","label":"pinched fingers: medium skin tone","tone":3},{"emoji":"🤌🏾","label":"pinched fingers: medium-dark skin tone","tone":4},{"emoji":"🤌🏿","label":"pinched fingers: dark skin tone","tone":5}]},{"emoji":"🤏","label":"pinching hand","tone":0,"skins":[{"emoji":"🤏🏻","label":"pinching hand: light skin tone","tone":1},{"emoji":"🤏🏼","label":"pinching hand: medium-light skin tone","tone":2},{"emoji":"🤏🏽","label":"pinching hand: medium skin tone","tone":3},{"emoji":"🤏🏾","label":"pinching hand: medium-dark skin tone","tone":4},{"emoji":"🤏🏿","label":"pinching hand: dark skin tone","tone":5}]},{"emoji":"✌️","label":"victory hand","tone":0,"skins":[{"emoji":"✌🏻","label":"victory hand: light skin tone","tone":1},{"emoji":"✌🏼","label":"victory hand: medium-light skin tone","tone":2},{"emoji":"✌🏽","label":"victory hand: medium skin tone","tone":3},{"emoji":"✌🏾","label":"victory hand: medium-dark skin tone","tone":4},{"emoji":"✌🏿","label":"victory hand: dark skin tone","tone":5}]},{"emoji":"🤞","label":"crossed fingers","tone":0,"skins":[{"emoji":"🤞🏻","label":"crossed fingers: light skin tone","tone":1},{"emoji":"🤞🏼","label":"crossed fingers: medium-light skin tone","tone":2},{"emoji":"🤞🏽","label":"crossed fingers: medium skin tone","tone":3},{"emoji":"🤞🏾","label":"crossed fingers: medium-dark skin tone","tone":4},{"emoji":"🤞🏿","label":"crossed fingers: dark skin tone","tone":5}]},{"emoji":"🤟","label":"love-you gesture","tone":0,"skins":[{"emoji":"🤟🏻","label":"love-you gesture: light skin tone","tone":1},{"emoji":"🤟🏼","label":"love-you gesture: medium-light skin tone","tone":2},{"emoji":"🤟🏽","label":"love-you gesture: medium skin tone","tone":3},{"emoji":"🤟🏾","label":"love-you gesture: medium-dark skin tone","tone":4},{"emoji":"🤟🏿","label":"love-you gesture: dark skin tone","tone":5}]},{"emoji":"🤘","label":"sign of the horns","tone":0,"skins":[{"emoji":"🤘🏻","label":"sign of the horns: light skin tone","tone":1},{"emoji":"🤘🏼","label":"sign of the horns: medium-light skin tone","tone":2},{"emoji":"🤘🏽","label":"sign of the horns: medium skin tone","tone":3},{"emoji":"🤘🏾","label":"sign of the horns: medium-dark skin tone","tone":4},{"emoji":"🤘🏿","label":"sign of the horns: dark skin tone","tone":5}]},{"emoji":"🤙","label":"call me hand","tone":0,"skins":[{"emoji":"🤙🏻","label":"call me hand: light skin tone","tone":1},{"emoji":"🤙🏼","label":"call me hand: medium-light skin tone","tone":2},{"emoji":"🤙🏽","label":"call me hand: medium skin tone","tone":3},{"emoji":"🤙🏾","label":"call me hand: medium-dark skin tone","tone":4},{"emoji":"🤙🏿","label":"call me hand: dark skin tone","tone":5}]},{"emoji":"👈️","label":"backhand index pointing left","tone":0,"skins":[{"emoji":"👈🏻","label":"backhand index pointing left: light skin tone","tone":1},{"emoji":"👈🏼","label":"backhand index pointing left: medium-light skin tone","tone":2},{"emoji":"👈🏽","label":"backhand index pointing left: medium skin tone","tone":3},{"emoji":"👈🏾","label":"backhand index pointing left: medium-dark skin tone","tone":4},{"emoji":"👈🏿","label":"backhand index pointing left: dark skin tone","tone":5}]},{"emoji":"👉️","label":"backhand index pointing right","tone":0,"skins":[{"emoji":"👉🏻","label":"backhand index pointing right: light skin tone","tone":1},{"emoji":"👉🏼","label":"backhand index pointing right: medium-light skin tone","tone":2},{"emoji":"👉🏽","label":"backhand index pointing right: medium skin tone","tone":3},{"emoji":"👉🏾","label":"backhand index pointing right: medium-dark skin tone","tone":4},{"emoji":"👉🏿","label":"backhand index pointing right: dark skin tone","tone":5}]},{"emoji":"👆️","label":"backhand index pointing up","tone":0,"skins":[{"emoji":"👆🏻","label":"backhand index pointing up: light skin tone","tone":1},{"emoji":"👆🏼","label":"backhand index pointing up: medium-light skin tone","tone":2},{"emoji":"👆🏽","label":"backhand index pointing up: medium skin tone","tone":3},{"emoji":"👆🏾","label":"backhand index pointing up: medium-dark skin tone","tone":4},{"emoji":"👆🏿","label":"backhand index pointing up: dark skin tone","tone":5}]},{"emoji":"🖕","label":"middle finger","tone":0,"skins":[{"emoji":"🖕🏻","label":"middle finger: light skin tone","tone":1},{"emoji":"🖕🏼","label":"middle finger: medium-light skin tone","tone":2},{"emoji":"🖕🏽","label":"middle finger: medium skin tone","tone":3},{"emoji":"🖕🏾","label":"middle finger: medium-dark skin tone","tone":4},{"emoji":"🖕🏿","label":"middle finger: dark skin tone","tone":5}]},{"emoji":"👇️","label":"backhand index pointing down","tone":0,"skins":[{"emoji":"👇🏻","label":"backhand index pointing down: light skin tone","tone":1},{"emoji":"👇🏼","label":"backhand index pointing down: medium-light skin tone","tone":2},{"emoji":"👇🏽","label":"backhand index pointing down: medium skin tone","tone":3},{"emoji":"👇🏾","label":"backhand index pointing down: medium-dark skin tone","tone":4},{"emoji":"👇🏿","label":"backhand index pointing down: dark skin tone","tone":5}]},{"emoji":"☝️","label":"index pointing up","tone":0,"skins":[{"emoji":"☝🏻","label":"index pointing up: light skin tone","tone":1},{"emoji":"☝🏼","label":"index pointing up: medium-light skin tone","tone":2},{"emoji":"☝🏽","label":"index pointing up: medium skin tone","tone":3},{"emoji":"☝🏾","label":"index pointing up: medium-dark skin tone","tone":4},{"emoji":"☝🏿","label":"index pointing up: dark skin tone","tone":5}]},{"emoji":"👍️","label":"thumbs up","tone":0,"skins":[{"emoji":"👍🏻","label":"thumbs up: light skin tone","tone":1},{"emoji":"👍🏼","label":"thumbs up: medium-light skin tone","tone":2},{"emoji":"👍🏽","label":"thumbs up: medium skin tone","tone":3},{"emoji":"👍🏾","label":"thumbs up: medium-dark skin tone","tone":4},{"emoji":"👍🏿","label":"thumbs up: dark skin tone","tone":5}]},{"emoji":"👎️","label":"thumbs down","tone":0,"skins":[{"emoji":"👎🏻","label":"thumbs down: light skin tone","tone":1},{"emoji":"👎🏼","label":"thumbs down: medium-light skin tone","tone":2},{"emoji":"👎🏽","label":"thumbs down: medium skin tone","tone":3},{"emoji":"👎🏾","label":"thumbs down: medium-dark skin tone","tone":4},{"emoji":"👎🏿","label":"thumbs down: dark skin tone","tone":5}]},{"emoji":"✊","label":"raised fist","tone":0,"skins":[{"emoji":"✊🏻","label":"raised fist: light skin tone","tone":1},{"emoji":"✊🏼","label":"raised fist: medium-light skin tone","tone":2},{"emoji":"✊🏽","label":"raised fist: medium skin tone","tone":3},{"emoji":"✊🏾","label":"raised fist: medium-dark skin tone","tone":4},{"emoji":"✊🏿","label":"raised fist: dark skin tone","tone":5}]},{"emoji":"👊","label":"oncoming fist","tone":0,"skins":[{"emoji":"👊🏻","label":"oncoming fist: light skin tone","tone":1},{"emoji":"👊🏼","label":"oncoming fist: medium-light skin tone","tone":2},{"emoji":"👊🏽","label":"oncoming fist: medium skin tone","tone":3},{"emoji":"👊🏾","label":"oncoming fist: medium-dark skin tone","tone":4},{"emoji":"👊🏿","label":"oncoming fist: dark skin tone","tone":5}]},{"emoji":"🤛","label":"left-facing fist","tone":0,"skins":[{"emoji":"🤛🏻","label":"left-facing fist: light skin tone","tone":1},{"emoji":"🤛🏼","label":"left-facing fist: medium-light skin tone","tone":2},{"emoji":"🤛🏽","label":"left-facing fist: medium skin tone","tone":3},{"emoji":"🤛🏾","label":"left-facing fist: medium-dark skin tone","tone":4},{"emoji":"🤛🏿","label":"left-facing fist: dark skin tone","tone":5}]},{"emoji":"🤜","label":"right-facing fist","tone":0,"skins":[{"emoji":"🤜🏻","label":"right-facing fist: light skin tone","tone":1},{"emoji":"🤜🏼","label":"right-facing fist: medium-light skin tone","tone":2},{"emoji":"🤜🏽","label":"right-facing fist: medium skin tone","tone":3},{"emoji":"🤜🏾","label":"right-facing fist: medium-dark skin tone","tone":4},{"emoji":"🤜🏿","label":"right-facing fist: dark skin tone","tone":5}]},{"emoji":"👏","label":"clapping hands","tone":0,"skins":[{"emoji":"👏🏻","label":"clapping hands: light skin tone","tone":1},{"emoji":"👏🏼","label":"clapping hands: medium-light skin tone","tone":2},{"emoji":"👏🏽","label":"clapping hands: medium skin tone","tone":3},{"emoji":"👏🏾","label":"clapping hands: medium-dark skin tone","tone":4},{"emoji":"👏🏿","label":"clapping hands: dark skin tone","tone":5}]},{"emoji":"🙌","label":"raising hands","tone":0,"skins":[{"emoji":"🙌🏻","label":"raising hands: light skin tone","tone":1},{"emoji":"🙌🏼","label":"raising hands: medium-light skin tone","tone":2},{"emoji":"🙌🏽","label":"raising hands: medium skin tone","tone":3},{"emoji":"🙌🏾","label":"raising hands: medium-dark skin tone","tone":4},{"emoji":"🙌🏿","label":"raising hands: dark skin tone","tone":5}]},{"emoji":"👐","label":"open hands","tone":0,"skins":[{"emoji":"👐🏻","label":"open hands: light skin tone","tone":1},{"emoji":"👐🏼","label":"open hands: medium-light skin tone","tone":2},{"emoji":"👐🏽","label":"open hands: medium skin tone","tone":3},{"emoji":"👐🏾","label":"open hands: medium-dark skin tone","tone":4},{"emoji":"👐🏿","label":"open hands: dark skin tone","tone":5}]},{"emoji":"🤲","label":"palms up together","tone":0,"skins":[{"emoji":"🤲🏻","label":"palms up together: light skin tone","tone":1},{"emoji":"🤲🏼","label":"palms up together: medium-light skin tone","tone":2},{"emoji":"🤲🏽","label":"palms up together: medium skin tone","tone":3},{"emoji":"🤲🏾","label":"palms up together: medium-dark skin tone","tone":4},{"emoji":"🤲🏿","label":"palms up together: dark skin tone","tone":5}]},{"emoji":"🤝","label":"handshake","tone":0,"skins":[{"emoji":"🤝🏻","label":"handshake: light skin tone","tone":1},{"emoji":"🤝🏼","label":"handshake: medium-light skin tone","tone":2},{"emoji":"🤝🏽","label":"handshake: medium skin tone","tone":3},{"emoji":"🤝🏾","label":"handshake: medium-dark skin tone","tone":4},{"emoji":"🤝🏿","label":"handshake: dark skin tone","tone":5}]},{"emoji":"🙏","label":"folded hands","tone":0,"skins":[{"emoji":"🙏🏻","label":"folded hands: light skin tone","tone":1},{"emoji":"🙏🏼","label":"folded hands: medium-light skin tone","tone":2},{"emoji":"🙏🏽","label":"folded hands: medium skin tone","tone":3},{"emoji":"🙏🏾","label":"folded hands: medium-dark skin tone","tone":4},{"emoji":"🙏🏿","label":"folded hands: dark skin tone","tone":5}]},{"emoji":"✍️","label":"writing hand","tone":0,"skins":[{"emoji":"✍🏻","label":"writing hand: light skin tone","tone":1},{"emoji":"✍🏼","label":"writing hand: medium-light skin tone","tone":2},{"emoji":"✍🏽","label":"writing hand: medium skin tone","tone":3},{"emoji":"✍🏾","label":"writing hand: medium-dark skin tone","tone":4},{"emoji":"✍🏿","label":"writing hand: dark skin tone","tone":5}]},{"emoji":"💅","label":"nail polish","tone":0,"skins":[{"emoji":"💅🏻","label":"nail polish: light skin tone","tone":1},{"emoji":"💅🏼","label":"nail polish: medium-light skin tone","tone":2},{"emoji":"💅🏽","label":"nail polish: medium skin tone","tone":3},{"emoji":"💅🏾","label":"nail polish: medium-dark skin tone","tone":4},{"emoji":"💅🏿","label":"nail polish: dark skin tone","tone":5}]},{"emoji":"🤳","label":"selfie","tone":0,"skins":[{"emoji":"🤳🏻","label":"selfie: light skin tone","tone":1},{"emoji":"🤳🏼","label":"selfie: medium-light skin tone","tone":2},{"emoji":"🤳🏽","label":"selfie: medium skin tone","tone":3},{"emoji":"🤳🏾","label":"selfie: medium-dark skin tone","tone":4},{"emoji":"🤳🏿","label":"selfie: dark skin tone","tone":5}]},{"emoji":"💪","label":"flexed biceps","tone":0,"skins":[{"emoji":"💪🏻","label":"flexed biceps: light skin tone","tone":1},{"emoji":"💪🏼","label":"flexed biceps: medium-light skin tone","tone":2},{"emoji":"💪🏽","label":"flexed biceps: medium skin tone","tone":3},{"emoji":"💪🏾","label":"flexed biceps: medium-dark skin tone","tone":4},{"emoji":"💪🏿","label":"flexed biceps: dark skin tone","tone":5}]},{"emoji":"🦾","label":"mechanical arm","tone":0},{"emoji":"🦿","label":"mechanical leg","tone":0},{"emoji":"🦵","label":"leg","tone":0,"skins":[{"emoji":"🦵🏻","label":"leg: light skin tone","tone":1},{"emoji":"🦵🏼","label":"leg: medium-light skin tone","tone":2},{"emoji":"🦵🏽","label":"leg: medium skin tone","tone":3},{"emoji":"🦵🏾","label":"leg: medium-dark skin tone","tone":4},{"emoji":"🦵🏿","label":"leg: dark skin tone","tone":5}]},{"emoji":"🦶","label":"foot","tone":0,"skins":[{"emoji":"🦶🏻","label":"foot: light skin tone","tone":1},{"emoji":"🦶🏼","label":"foot: medium-light skin tone","tone":2},{"emoji":"🦶🏽","label":"foot: medium skin tone","tone":3},{"emoji":"🦶🏾","label":"foot: medium-dark skin tone","tone":4},{"emoji":"🦶🏿","label":"foot: dark skin tone","tone":5}]},{"emoji":"👂️","label":"ear","tone":0,"skins":[{"emoji":"👂🏻","label":"ear: light skin tone","tone":1},{"emoji":"👂🏼","label":"ear: medium-light skin tone","tone":2},{"emoji":"👂🏽","label":"ear: medium skin tone","tone":3},{"emoji":"👂🏾","label":"ear: medium-dark skin tone","tone":4},{"emoji":"👂🏿","label":"ear: dark skin tone","tone":5}]},{"emoji":"🦻","label":"ear with hearing aid","tone":0,"skins":[{"emoji":"🦻🏻","label":"ear with hearing aid: light skin tone","tone":1},{"emoji":"🦻🏼","label":"ear with hearing aid: medium-light skin tone","tone":2},{"emoji":"🦻🏽","label":"ear with hearing aid: medium skin tone","tone":3},{"emoji":"🦻🏾","label":"ear with hearing aid: medium-dark skin tone","tone":4},{"emoji":"🦻🏿","label":"ear with hearing aid: dark skin tone","tone":5}]},{"emoji":"👃","label":"nose","tone":0,"skins":[{"emoji":"👃🏻","label":"nose: light skin tone","tone":1},{"emoji":"👃🏼","label":"nose: medium-light skin tone","tone":2},{"emoji":"👃🏽","label":"nose: medium skin tone","tone":3},{"emoji":"👃🏾","label":"nose: medium-dark skin tone","tone":4},{"emoji":"👃🏿","label":"nose: dark skin tone","tone":5}]},{"emoji":"🧠","label":"brain","tone":0},{"emoji":"🫀","label":"anatomical heart","tone":0},{"emoji":"🫁","label":"lungs","tone":0},{"emoji":"🦷","label":"tooth","tone":0},{"emoji":"🦴","label":"bone","tone":0},{"emoji":"👀","label":"eyes","tone":0},{"emoji":"👁️","label":"eye","tone":0},{"emoji":"👅","label":"tongue","tone":0},{"emoji":"👄","label":"mouth","tone":0},{"emoji":"👶","label":"baby","tone":0,"skins":[{"emoji":"👶🏻","label":"baby: light skin tone","tone":1},{"emoji":"👶🏼","label":"baby: medium-light skin tone","tone":2},{"emoji":"👶🏽","label":"baby: medium skin tone","tone":3},{"emoji":"👶🏾","label":"baby: medium-dark skin tone","tone":4},{"emoji":"👶🏿","label":"baby: dark skin tone","tone":5}]},{"emoji":"🧒","label":"child","tone":0,"skins":[{"emoji":"🧒🏻","label":"child: light skin tone","tone":1},{"emoji":"🧒🏼","label":"child: medium-light skin tone","tone":2},{"emoji":"🧒🏽","label":"child: medium skin tone","tone":3},{"emoji":"🧒🏾","label":"child: medium-dark skin tone","tone":4},{"emoji":"🧒🏿","label":"child: dark skin tone","tone":5}]},{"emoji":"👦","label":"boy","tone":0,"skins":[{"emoji":"👦🏻","label":"boy: light skin tone","tone":1},{"emoji":"👦🏼","label":"boy: medium-light skin tone","tone":2},{"emoji":"👦🏽","label":"boy: medium skin tone","tone":3},{"emoji":"👦🏾","label":"boy: medium-dark skin tone","tone":4},{"emoji":"👦🏿","label":"boy: dark skin tone","tone":5}]},{"emoji":"👧","label":"girl","tone":0,"skins":[{"emoji":"👧🏻","label":"girl: light skin tone","tone":1},{"emoji":"👧🏼","label":"girl: medium-light skin tone","tone":2},{"emoji":"👧🏽","label":"girl: medium skin tone","tone":3},{"emoji":"👧🏾","label":"girl: medium-dark skin tone","tone":4},{"emoji":"👧🏿","label":"girl: dark skin tone","tone":5}]},{"emoji":"🧑","label":"person","tone":0,"skins":[{"emoji":"🧑🏻","label":"person: light skin tone","tone":1},{"emoji":"🧑🏼","label":"person: medium-light skin tone","tone":2},{"emoji":"🧑🏽","label":"person: medium skin tone","tone":3},{"emoji":"🧑🏾","label":"person: medium-dark skin tone","tone":4},{"emoji":"🧑🏿","label":"person: dark skin tone","tone":5}]},{"emoji":"👱","label":"person: blond hair","tone":0,"skins":[{"emoji":"👱🏻","label":"person: light skin tone, blond hair","tone":1},{"emoji":"👱🏼","label":"person: medium-light skin tone, blond hair","tone":2},{"emoji":"👱🏽","label":"person: medium skin tone, blond hair","tone":3},{"emoji":"👱🏾","label":"person: medium-dark skin tone, blond hair","tone":4},{"emoji":"👱🏿","label":"person: dark skin tone, blond hair","tone":5}]},{"emoji":"👨","label":"man","tone":0,"skins":[{"emoji":"👨🏻","label":"man: light skin tone","tone":1},{"emoji":"👨🏼","label":"man: medium-light skin tone","tone":2},{"emoji":"👨🏽","label":"man: medium skin tone","tone":3},{"emoji":"👨🏾","label":"man: medium-dark skin tone","tone":4},{"emoji":"👨🏿","label":"man: dark skin tone","tone":5}]},{"emoji":"🧔","label":"person: beard","tone":0,"skins":[{"emoji":"🧔🏻","label":"person: light skin tone, beard","tone":1},{"emoji":"🧔🏼","label":"person: medium-light skin tone, beard","tone":2},{"emoji":"🧔🏽","label":"person: medium skin tone, beard","tone":3},{"emoji":"🧔🏾","label":"person: medium-dark skin tone, beard","tone":4},{"emoji":"🧔🏿","label":"person: dark skin tone, beard","tone":5}]},{"emoji":"🧔‍♂️","label":"man: beard","tone":0,"skins":[{"emoji":"🧔🏻‍♂️","label":"man: light skin tone, beard","tone":1},{"emoji":"🧔🏼‍♂️","label":"man: medium-light skin tone, beard","tone":2},{"emoji":"🧔🏽‍♂️","label":"man: medium skin tone, beard","tone":3},{"emoji":"🧔🏾‍♂️","label":"man: medium-dark skin tone, beard","tone":4},{"emoji":"🧔🏿‍♂️","label":"man: dark skin tone, beard","tone":5}]},{"emoji":"🧔‍♀️","label":"woman: beard","tone":0,"skins":[{"emoji":"🧔🏻‍♀️","label":"woman: light skin tone, beard","tone":1},{"emoji":"🧔🏼‍♀️","label":"woman: medium-light skin tone, beard","tone":2},{"emoji":"🧔🏽‍♀️","label":"woman: medium skin tone, beard","tone":3},{"emoji":"🧔🏾‍♀️","label":"woman: medium-dark skin tone, beard","tone":4},{"emoji":"🧔🏿‍♀️","label":"woman: dark skin tone, beard","tone":5}]},{"emoji":"👨‍🦰","label":"man: red hair","tone":0,"skins":[{"emoji":"👨🏻‍🦰","label":"man: light skin tone, red hair","tone":1},{"emoji":"👨🏼‍🦰","label":"man: medium-light skin tone, red hair","tone":2},{"emoji":"👨🏽‍🦰","label":"man: medium skin tone, red hair","tone":3},{"emoji":"👨🏾‍🦰","label":"man: medium-dark skin tone, red hair","tone":4},{"emoji":"👨🏿‍🦰","label":"man: dark skin tone, red hair","tone":5}]},{"emoji":"👨‍🦱","label":"man: curly hair","tone":0,"skins":[{"emoji":"👨🏻‍🦱","label":"man: light skin tone, curly hair","tone":1},{"emoji":"👨🏼‍🦱","label":"man: medium-light skin tone, curly hair","tone":2},{"emoji":"👨🏽‍🦱","label":"man: medium skin tone, curly hair","tone":3},{"emoji":"👨🏾‍🦱","label":"man: medium-dark skin tone, curly hair","tone":4},{"emoji":"👨🏿‍🦱","label":"man: dark skin tone, curly hair","tone":5}]},{"emoji":"👨‍🦳","label":"man: white hair","tone":0,"skins":[{"emoji":"👨🏻‍🦳","label":"man: light skin tone, white hair","tone":1},{"emoji":"👨🏼‍🦳","label":"man: medium-light skin tone, white hair","tone":2},{"emoji":"👨🏽‍🦳","label":"man: medium skin tone, white hair","tone":3},{"emoji":"👨🏾‍🦳","label":"man: medium-dark skin tone, white hair","tone":4},{"emoji":"👨🏿‍🦳","label":"man: dark skin tone, white hair","tone":5}]},{"emoji":"👨‍🦲","label":"man: bald","tone":0,"skins":[{"emoji":"👨🏻‍🦲","label":"man: light skin tone, bald","tone":1},{"emoji":"👨🏼‍🦲","label":"man: medium-light skin tone, bald","tone":2},{"emoji":"👨🏽‍🦲","label":"man: medium skin tone, bald","tone":3},{"emoji":"👨🏾‍🦲","label":"man: medium-dark skin tone, bald","tone":4},{"emoji":"👨🏿‍🦲","label":"man: dark skin tone, bald","tone":5}]},{"emoji":"👩","label":"woman","tone":0,"skins":[{"emoji":"👩🏻","label":"woman: light skin tone","tone":1},{"emoji":"👩🏼","label":"woman: medium-light skin tone","tone":2},{"emoji":"👩🏽","label":"woman: medium skin tone","tone":3},{"emoji":"👩🏾","label":"woman: medium-dark skin tone","tone":4},{"emoji":"👩🏿","label":"woman: dark skin tone","tone":5}]},{"emoji":"👩‍🦰","label":"woman: red hair","tone":0,"skins":[{"emoji":"👩🏻‍🦰","label":"woman: light skin tone, red hair","tone":1},{"emoji":"👩🏼‍🦰","label":"woman: medium-light skin tone, red hair","tone":2},{"emoji":"👩🏽‍🦰","label":"woman: medium skin tone, red hair","tone":3},{"emoji":"👩🏾‍🦰","label":"woman: medium-dark skin tone, red hair","tone":4},{"emoji":"👩🏿‍🦰","label":"woman: dark skin tone, red hair","tone":5}]},{"emoji":"🧑‍🦰","label":"person: red hair","tone":0,"skins":[{"emoji":"🧑🏻‍🦰","label":"person: light skin tone, red hair","tone":1},{"emoji":"🧑🏼‍🦰","label":"person: medium-light skin tone, red hair","tone":2},{"emoji":"🧑🏽‍🦰","label":"person: medium skin tone, red hair","tone":3},{"emoji":"🧑🏾‍🦰","label":"person: medium-dark skin tone, red hair","tone":4},{"emoji":"🧑🏿‍🦰","label":"person: dark skin tone, red hair","tone":5}]},{"emoji":"👩‍🦱","label":"woman: curly hair","tone":0,"skins":[{"emoji":"👩🏻‍🦱","label":"woman: light skin tone, curly hair","tone":1},{"emoji":"👩🏼‍🦱","label":"woman: medium-light skin tone, curly hair","tone":2},{"emoji":"👩🏽‍🦱","label":"woman: medium skin tone, curly hair","tone":3},{"emoji":"👩🏾‍🦱","label":"woman: medium-dark skin tone, curly hair","tone":4},{"emoji":"👩🏿‍🦱","label":"woman: dark skin tone, curly hair","tone":5}]},{"emoji":"🧑‍🦱","label":"person: curly hair","tone":0,"skins":[{"emoji":"🧑🏻‍🦱","label":"person: light skin tone, curly hair","tone":1},{"emoji":"🧑🏼‍🦱","label":"person: medium-light skin tone, curly hair","tone":2},{"emoji":"🧑🏽‍🦱","label":"person: medium skin tone, curly hair","tone":3},{"emoji":"🧑🏾‍🦱","label":"person: medium-dark skin tone, curly hair","tone":4},{"emoji":"🧑🏿‍🦱","label":"person: dark skin tone, curly hair","tone":5}]},{"emoji":"👩‍🦳","label":"woman: white hair","tone":0,"skins":[{"emoji":"👩🏻‍🦳","label":"woman: light skin tone, white hair","tone":1},{"emoji":"👩🏼‍🦳","label":"woman: medium-light skin tone, white hair","tone":2},{"emoji":"👩🏽‍🦳","label":"woman: medium skin tone, white hair","tone":3},{"emoji":"👩🏾‍🦳","label":"woman: medium-dark skin tone, white hair","tone":4},{"emoji":"👩🏿‍🦳","label":"woman: dark skin tone, white hair","tone":5}]},{"emoji":"🧑‍🦳","label":"person: white hair","tone":0,"skins":[{"emoji":"🧑🏻‍🦳","label":"person: light skin tone, white hair","tone":1},{"emoji":"🧑🏼‍🦳","label":"person: medium-light skin tone, white hair","tone":2},{"emoji":"🧑🏽‍🦳","label":"person: medium skin tone, white hair","tone":3},{"emoji":"🧑🏾‍🦳","label":"person: medium-dark skin tone, white hair","tone":4},{"emoji":"🧑🏿‍🦳","label":"person: dark skin tone, white hair","tone":5}]},{"emoji":"👩‍🦲","label":"woman: bald","tone":0,"skins":[{"emoji":"👩🏻‍🦲","label":"woman: light skin tone, bald","tone":1},{"emoji":"👩🏼‍🦲","label":"woman: medium-light skin tone, bald","tone":2},{"emoji":"👩🏽‍🦲","label":"woman: medium skin tone, bald","tone":3},{"emoji":"👩🏾‍🦲","label":"woman: medium-dark skin tone, bald","tone":4},{"emoji":"👩🏿‍🦲","label":"woman: dark skin tone, bald","tone":5}]},{"emoji":"🧑‍🦲","label":"person: bald","tone":0,"skins":[{"emoji":"🧑🏻‍🦲","label":"person: light skin tone, bald","tone":1},{"emoji":"🧑🏼‍🦲","label":"person: medium-light skin tone, bald","tone":2},{"emoji":"🧑🏽‍🦲","label":"person: medium skin tone, bald","tone":3},{"emoji":"🧑🏾‍🦲","label":"person: medium-dark skin tone, bald","tone":4},{"emoji":"🧑🏿‍🦲","label":"person: dark skin tone, bald","tone":5}]},{"emoji":"👱‍♀️","label":"woman: blond hair","tone":0,"skins":[{"emoji":"👱🏻‍♀️","label":"woman: light skin tone, blond hair","tone":1},{"emoji":"👱🏼‍♀️","label":"woman: medium-light skin tone, blond hair","tone":2},{"emoji":"👱🏽‍♀️","label":"woman: medium skin tone, blond hair","tone":3},{"emoji":"👱🏾‍♀️","label":"woman: medium-dark skin tone, blond hair","tone":4},{"emoji":"👱🏿‍♀️","label":"woman: dark skin tone, blond hair","tone":5}]},{"emoji":"👱‍♂️","label":"man: blond hair","tone":0,"skins":[{"emoji":"👱🏻‍♂️","label":"man: light skin tone, blond hair","tone":1},{"emoji":"👱🏼‍♂️","label":"man: medium-light skin tone, blond hair","tone":2},{"emoji":"👱🏽‍♂️","label":"man: medium skin tone, blond hair","tone":3},{"emoji":"👱🏾‍♂️","label":"man: medium-dark skin tone, blond hair","tone":4},{"emoji":"👱🏿‍♂️","label":"man: dark skin tone, blond hair","tone":5}]},{"emoji":"🧓","label":"older person","tone":0,"skins":[{"emoji":"🧓🏻","label":"older person: light skin tone","tone":1},{"emoji":"🧓🏼","label":"older person: medium-light skin tone","tone":2},{"emoji":"🧓🏽","label":"older person: medium skin tone","tone":3},{"emoji":"🧓🏾","label":"older person: medium-dark skin tone","tone":4},{"emoji":"🧓🏿","label":"older person: dark skin tone","tone":5}]},{"emoji":"👴","label":"old man","tone":0,"skins":[{"emoji":"👴🏻","label":"old man: light skin tone","tone":1},{"emoji":"👴🏼","label":"old man: medium-light skin tone","tone":2},{"emoji":"👴🏽","label":"old man: medium skin tone","tone":3},{"emoji":"👴🏾","label":"old man: medium-dark skin tone","tone":4},{"emoji":"👴🏿","label":"old man: dark skin tone","tone":5}]},{"emoji":"👵","label":"old woman","tone":0,"skins":[{"emoji":"👵🏻","label":"old woman: light skin tone","tone":1},{"emoji":"👵🏼","label":"old woman: medium-light skin tone","tone":2},{"emoji":"👵🏽","label":"old woman: medium skin tone","tone":3},{"emoji":"👵🏾","label":"old woman: medium-dark skin tone","tone":4},{"emoji":"👵🏿","label":"old woman: dark skin tone","tone":5}]},{"emoji":"🙍","label":"person frowning","tone":0,"skins":[{"emoji":"🙍🏻","label":"person frowning: light skin tone","tone":1},{"emoji":"🙍🏼","label":"person frowning: medium-light skin tone","tone":2},{"emoji":"🙍🏽","label":"person frowning: medium skin tone","tone":3},{"emoji":"🙍🏾","label":"person frowning: medium-dark skin tone","tone":4},{"emoji":"🙍🏿","label":"person frowning: dark skin tone","tone":5}]},{"emoji":"🙍‍♂️","label":"man frowning","tone":0,"skins":[{"emoji":"🙍🏻‍♂️","label":"man frowning: light skin tone","tone":1},{"emoji":"🙍🏼‍♂️","label":"man frowning: medium-light skin tone","tone":2},{"emoji":"🙍🏽‍♂️","label":"man frowning: medium skin tone","tone":3},{"emoji":"🙍🏾‍♂️","label":"man frowning: medium-dark skin tone","tone":4},{"emoji":"🙍🏿‍♂️","label":"man frowning: dark skin tone","tone":5}]},{"emoji":"🙍‍♀️","label":"woman frowning","tone":0,"skins":[{"emoji":"🙍🏻‍♀️","label":"woman frowning: light skin tone","tone":1},{"emoji":"🙍🏼‍♀️","label":"woman frowning: medium-light skin tone","tone":2},{"emoji":"🙍🏽‍♀️","label":"woman frowning: medium skin tone","tone":3},{"emoji":"🙍🏾‍♀️","label":"woman frowning: medium-dark skin tone","tone":4},{"emoji":"🙍🏿‍♀️","label":"woman frowning: dark skin tone","tone":5}]},{"emoji":"🙎","label":"person pouting","tone":0,"skins":[{"emoji":"🙎🏻","label":"person pouting: light skin tone","tone":1},{"emoji":"🙎🏼","label":"person pouting: medium-light skin tone","tone":2},{"emoji":"🙎🏽","label":"person pouting: medium skin tone","tone":3},{"emoji":"🙎🏾","label":"person pouting: medium-dark skin tone","tone":4},{"emoji":"🙎🏿","label":"person pouting: dark skin tone","tone":5}]},{"emoji":"🙎‍♂️","label":"man pouting","tone":0,"skins":[{"emoji":"🙎🏻‍♂️","label":"man pouting: light skin tone","tone":1},{"emoji":"🙎🏼‍♂️","label":"man pouting: medium-light skin tone","tone":2},{"emoji":"🙎🏽‍♂️","label":"man pouting: medium skin tone","tone":3},{"emoji":"🙎🏾‍♂️","label":"man pouting: medium-dark skin tone","tone":4},{"emoji":"🙎🏿‍♂️","label":"man pouting: dark skin tone","tone":5}]},{"emoji":"🙎‍♀️","label":"woman pouting","tone":0,"skins":[{"emoji":"🙎🏻‍♀️","label":"woman pouting: light skin tone","tone":1},{"emoji":"🙎🏼‍♀️","label":"woman pouting: medium-light skin tone","tone":2},{"emoji":"🙎🏽‍♀️","label":"woman pouting: medium skin tone","tone":3},{"emoji":"🙎🏾‍♀️","label":"woman pouting: medium-dark skin tone","tone":4},{"emoji":"🙎🏿‍♀️","label":"woman pouting: dark skin tone","tone":5}]},{"emoji":"🙅","label":"person gesturing NO","tone":0,"skins":[{"emoji":"🙅🏻","label":"person gesturing NO: light skin tone","tone":1},{"emoji":"🙅🏼","label":"person gesturing NO: medium-light skin tone","tone":2},{"emoji":"🙅🏽","label":"person gesturing NO: medium skin tone","tone":3},{"emoji":"🙅🏾","label":"person gesturing NO: medium-dark skin tone","tone":4},{"emoji":"🙅🏿","label":"person gesturing NO: dark skin tone","tone":5}]},{"emoji":"🙅‍♂️","label":"man gesturing NO","tone":0,"skins":[{"emoji":"🙅🏻‍♂️","label":"man gesturing NO: light skin tone","tone":1},{"emoji":"🙅🏼‍♂️","label":"man gesturing NO: medium-light skin tone","tone":2},{"emoji":"🙅🏽‍♂️","label":"man gesturing NO: medium skin tone","tone":3},{"emoji":"🙅🏾‍♂️","label":"man gesturing NO: medium-dark skin tone","tone":4},{"emoji":"🙅🏿‍♂️","label":"man gesturing NO: dark skin tone","tone":5}]},{"emoji":"🙅‍♀️","label":"woman gesturing NO","tone":0,"skins":[{"emoji":"🙅🏻‍♀️","label":"woman gesturing NO: light skin tone","tone":1},{"emoji":"🙅🏼‍♀️","label":"woman gesturing NO: medium-light skin tone","tone":2},{"emoji":"🙅🏽‍♀️","label":"woman gesturing NO: medium skin tone","tone":3},{"emoji":"🙅🏾‍♀️","label":"woman gesturing NO: medium-dark skin tone","tone":4},{"emoji":"🙅🏿‍♀️","label":"woman gesturing NO: dark skin tone","tone":5}]},{"emoji":"🙆","label":"person gesturing OK","tone":0,"skins":[{"emoji":"🙆🏻","label":"person gesturing OK: light skin tone","tone":1},{"emoji":"🙆🏼","label":"person gesturing OK: medium-light skin tone","tone":2},{"emoji":"🙆🏽","label":"person gesturing OK: medium skin tone","tone":3},{"emoji":"🙆🏾","label":"person gesturing OK: medium-dark skin tone","tone":4},{"emoji":"🙆🏿","label":"person gesturing OK: dark skin tone","tone":5}]},{"emoji":"🙆‍♂️","label":"man gesturing OK","tone":0,"skins":[{"emoji":"🙆🏻‍♂️","label":"man gesturing OK: light skin tone","tone":1},{"emoji":"🙆🏼‍♂️","label":"man gesturing OK: medium-light skin tone","tone":2},{"emoji":"🙆🏽‍♂️","label":"man gesturing OK: medium skin tone","tone":3},{"emoji":"🙆🏾‍♂️","label":"man gesturing OK: medium-dark skin tone","tone":4},{"emoji":"🙆🏿‍♂️","label":"man gesturing OK: dark skin tone","tone":5}]},{"emoji":"🙆‍♀️","label":"woman gesturing OK","tone":0,"skins":[{"emoji":"🙆🏻‍♀️","label":"woman gesturing OK: light skin tone","tone":1},{"emoji":"🙆🏼‍♀️","label":"woman gesturing OK: medium-light skin tone","tone":2},{"emoji":"🙆🏽‍♀️","label":"woman gesturing OK: medium skin tone","tone":3},{"emoji":"🙆🏾‍♀️","label":"woman gesturing OK: medium-dark skin tone","tone":4},{"emoji":"🙆🏿‍♀️","label":"woman gesturing OK: dark skin tone","tone":5}]},{"emoji":"💁","label":"person tipping hand","tone":0,"skins":[{"emoji":"💁🏻","label":"person tipping hand: light skin tone","tone":1},{"emoji":"💁🏼","label":"person tipping hand: medium-light skin tone","tone":2},{"emoji":"💁🏽","label":"person tipping hand: medium skin tone","tone":3},{"emoji":"💁🏾","label":"person tipping hand: medium-dark skin tone","tone":4},{"emoji":"💁🏿","label":"person tipping hand: dark skin tone","tone":5}]},{"emoji":"💁‍♂️","label":"man tipping hand","tone":0,"skins":[{"emoji":"💁🏻‍♂️","label":"man tipping hand: light skin tone","tone":1},{"emoji":"💁🏼‍♂️","label":"man tipping hand: medium-light skin tone","tone":2},{"emoji":"💁🏽‍♂️","label":"man tipping hand: medium skin tone","tone":3},{"emoji":"💁🏾‍♂️","label":"man tipping hand: medium-dark skin tone","tone":4},{"emoji":"💁🏿‍♂️","label":"man tipping hand: dark skin tone","tone":5}]},{"emoji":"💁‍♀️","label":"woman tipping hand","tone":0,"skins":[{"emoji":"💁🏻‍♀️","label":"woman tipping hand: light skin tone","tone":1},{"emoji":"💁🏼‍♀️","label":"woman tipping hand: medium-light skin tone","tone":2},{"emoji":"💁🏽‍♀️","label":"woman tipping hand: medium skin tone","tone":3},{"emoji":"💁🏾‍♀️","label":"woman tipping hand: medium-dark skin tone","tone":4},{"emoji":"💁🏿‍♀️","label":"woman tipping hand: dark skin tone","tone":5}]},{"emoji":"🙋","label":"person raising hand","tone":0,"skins":[{"emoji":"🙋🏻","label":"person raising hand: light skin tone","tone":1},{"emoji":"🙋🏼","label":"person raising hand: medium-light skin tone","tone":2},{"emoji":"🙋🏽","label":"person raising hand: medium skin tone","tone":3},{"emoji":"🙋🏾","label":"person raising hand: medium-dark skin tone","tone":4},{"emoji":"🙋🏿","label":"person raising hand: dark skin tone","tone":5}]},{"emoji":"🙋‍♂️","label":"man raising hand","tone":0,"skins":[{"emoji":"🙋🏻‍♂️","label":"man raising hand: light skin tone","tone":1},{"emoji":"🙋🏼‍♂️","label":"man raising hand: medium-light skin tone","tone":2},{"emoji":"🙋🏽‍♂️","label":"man raising hand: medium skin tone","tone":3},{"emoji":"🙋🏾‍♂️","label":"man raising hand: medium-dark skin tone","tone":4},{"emoji":"🙋🏿‍♂️","label":"man raising hand: dark skin tone","tone":5}]},{"emoji":"🙋‍♀️","label":"woman raising hand","tone":0,"skins":[{"emoji":"🙋🏻‍♀️","label":"woman raising hand: light skin tone","tone":1},{"emoji":"🙋🏼‍♀️","label":"woman raising hand: medium-light skin tone","tone":2},{"emoji":"🙋🏽‍♀️","label":"woman raising hand: medium skin tone","tone":3},{"emoji":"🙋🏾‍♀️","label":"woman raising hand: medium-dark skin tone","tone":4},{"emoji":"🙋🏿‍♀️","label":"woman raising hand: dark skin tone","tone":5}]},{"emoji":"🧏","label":"deaf person","tone":0,"skins":[{"emoji":"🧏🏻","label":"deaf person: light skin tone","tone":1},{"emoji":"🧏🏼","label":"deaf person: medium-light skin tone","tone":2},{"emoji":"🧏🏽","label":"deaf person: medium skin tone","tone":3},{"emoji":"🧏🏾","label":"deaf person: medium-dark skin tone","tone":4},{"emoji":"🧏🏿","label":"deaf person: dark skin tone","tone":5}]},{"emoji":"🧏‍♂️","label":"deaf man","tone":0,"skins":[{"emoji":"🧏🏻‍♂️","label":"deaf man: light skin tone","tone":1},{"emoji":"🧏🏼‍♂️","label":"deaf man: medium-light skin tone","tone":2},{"emoji":"🧏🏽‍♂️","label":"deaf man: medium skin tone","tone":3},{"emoji":"🧏🏾‍♂️","label":"deaf man: medium-dark skin tone","tone":4},{"emoji":"🧏🏿‍♂️","label":"deaf man: dark skin tone","tone":5}]},{"emoji":"🧏‍♀️","label":"deaf woman","tone":0,"skins":[{"emoji":"🧏🏻‍♀️","label":"deaf woman: light skin tone","tone":1},{"emoji":"🧏🏼‍♀️","label":"deaf woman: medium-light skin tone","tone":2},{"emoji":"🧏🏽‍♀️","label":"deaf woman: medium skin tone","tone":3},{"emoji":"🧏🏾‍♀️","label":"deaf woman: medium-dark skin tone","tone":4},{"emoji":"🧏🏿‍♀️","label":"deaf woman: dark skin tone","tone":5}]},{"emoji":"🙇","label":"person bowing","tone":0,"skins":[{"emoji":"🙇🏻","label":"person bowing: light skin tone","tone":1},{"emoji":"🙇🏼","label":"person bowing: medium-light skin tone","tone":2},{"emoji":"🙇🏽","label":"person bowing: medium skin tone","tone":3},{"emoji":"🙇🏾","label":"person bowing: medium-dark skin tone","tone":4},{"emoji":"🙇🏿","label":"person bowing: dark skin tone","tone":5}]},{"emoji":"🙇‍♂️","label":"man bowing","tone":0,"skins":[{"emoji":"🙇🏻‍♂️","label":"man bowing: light skin tone","tone":1},{"emoji":"🙇🏼‍♂️","label":"man bowing: medium-light skin tone","tone":2},{"emoji":"🙇🏽‍♂️","label":"man bowing: medium skin tone","tone":3},{"emoji":"🙇🏾‍♂️","label":"man bowing: medium-dark skin tone","tone":4},{"emoji":"🙇🏿‍♂️","label":"man bowing: dark skin tone","tone":5}]},{"emoji":"🙇‍♀️","label":"woman bowing","tone":0,"skins":[{"emoji":"🙇🏻‍♀️","label":"woman bowing: light skin tone","tone":1},{"emoji":"🙇🏼‍♀️","label":"woman bowing: medium-light skin tone","tone":2},{"emoji":"🙇🏽‍♀️","label":"woman bowing: medium skin tone","tone":3},{"emoji":"🙇🏾‍♀️","label":"woman bowing: medium-dark skin tone","tone":4},{"emoji":"🙇🏿‍♀️","label":"woman bowing: dark skin tone","tone":5}]},{"emoji":"🤦","label":"person facepalming","tone":0,"skins":[{"emoji":"🤦🏻","label":"person facepalming: light skin tone","tone":1},{"emoji":"🤦🏼","label":"person facepalming: medium-light skin tone","tone":2},{"emoji":"🤦🏽","label":"person facepalming: medium skin tone","tone":3},{"emoji":"🤦🏾","label":"person facepalming: medium-dark skin tone","tone":4},{"emoji":"🤦🏿","label":"person facepalming: dark skin tone","tone":5}]},{"emoji":"🤦‍♂️","label":"man facepalming","tone":0,"skins":[{"emoji":"🤦🏻‍♂️","label":"man facepalming: light skin tone","tone":1},{"emoji":"🤦🏼‍♂️","label":"man facepalming: medium-light skin tone","tone":2},{"emoji":"🤦🏽‍♂️","label":"man facepalming: medium skin tone","tone":3},{"emoji":"🤦🏾‍♂️","label":"man facepalming: medium-dark skin tone","tone":4},{"emoji":"🤦🏿‍♂️","label":"man facepalming: dark skin tone","tone":5}]},{"emoji":"🤦‍♀️","label":"woman facepalming","tone":0,"skins":[{"emoji":"🤦🏻‍♀️","label":"woman facepalming: light skin tone","tone":1},{"emoji":"🤦🏼‍♀️","label":"woman facepalming: medium-light skin tone","tone":2},{"emoji":"🤦🏽‍♀️","label":"woman facepalming: medium skin tone","tone":3},{"emoji":"🤦🏾‍♀️","label":"woman facepalming: medium-dark skin tone","tone":4},{"emoji":"🤦🏿‍♀️","label":"woman facepalming: dark skin tone","tone":5}]},{"emoji":"🤷","label":"person shrugging","tone":0,"skins":[{"emoji":"🤷🏻","label":"person shrugging: light skin tone","tone":1},{"emoji":"🤷🏼","label":"person shrugging: medium-light skin tone","tone":2},{"emoji":"🤷🏽","label":"person shrugging: medium skin tone","tone":3},{"emoji":"🤷🏾","label":"person shrugging: medium-dark skin tone","tone":4},{"emoji":"🤷🏿","label":"person shrugging: dark skin tone","tone":5}]},{"emoji":"🤷‍♂️","label":"man shrugging","tone":0,"skins":[{"emoji":"🤷🏻‍♂️","label":"man shrugging: light skin tone","tone":1},{"emoji":"🤷🏼‍♂️","label":"man shrugging: medium-light skin tone","tone":2},{"emoji":"🤷🏽‍♂️","label":"man shrugging: medium skin tone","tone":3},{"emoji":"🤷🏾‍♂️","label":"man shrugging: medium-dark skin tone","tone":4},{"emoji":"🤷🏿‍♂️","label":"man shrugging: dark skin tone","tone":5}]},{"emoji":"🤷‍♀️","label":"woman shrugging","tone":0,"skins":[{"emoji":"🤷🏻‍♀️","label":"woman shrugging: light skin tone","tone":1},{"emoji":"🤷🏼‍♀️","label":"woman shrugging: medium-light skin tone","tone":2},{"emoji":"🤷🏽‍♀️","label":"woman shrugging: medium skin tone","tone":3},{"emoji":"🤷🏾‍♀️","label":"woman shrugging: medium-dark skin tone","tone":4},{"emoji":"🤷🏿‍♀️","label":"woman shrugging: dark skin tone","tone":5}]},{"emoji":"🧑‍⚕️","label":"health worker","tone":0,"skins":[{"emoji":"🧑🏻‍⚕️","label":"health worker: light skin tone","tone":1},{"emoji":"🧑🏼‍⚕️","label":"health worker: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍⚕️","label":"health worker: medium skin tone","tone":3},{"emoji":"🧑🏾‍⚕️","label":"health worker: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍⚕️","label":"health worker: dark skin tone","tone":5}]},{"emoji":"👨‍⚕️","label":"man health worker","tone":0,"skins":[{"emoji":"👨🏻‍⚕️","label":"man health worker: light skin tone","tone":1},{"emoji":"👨🏼‍⚕️","label":"man health worker: medium-light skin tone","tone":2},{"emoji":"👨🏽‍⚕️","label":"man health worker: medium skin tone","tone":3},{"emoji":"👨🏾‍⚕️","label":"man health worker: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍⚕️","label":"man health worker: dark skin tone","tone":5}]},{"emoji":"👩‍⚕️","label":"woman health worker","tone":0,"skins":[{"emoji":"👩🏻‍⚕️","label":"woman health worker: light skin tone","tone":1},{"emoji":"👩🏼‍⚕️","label":"woman health worker: medium-light skin tone","tone":2},{"emoji":"👩🏽‍⚕️","label":"woman health worker: medium skin tone","tone":3},{"emoji":"👩🏾‍⚕️","label":"woman health worker: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍⚕️","label":"woman health worker: dark skin tone","tone":5}]},{"emoji":"🧑‍🎓","label":"student","tone":0,"skins":[{"emoji":"🧑🏻‍🎓","label":"student: light skin tone","tone":1},{"emoji":"🧑🏼‍🎓","label":"student: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🎓","label":"student: medium skin tone","tone":3},{"emoji":"🧑🏾‍🎓","label":"student: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🎓","label":"student: dark skin tone","tone":5}]},{"emoji":"👨‍🎓","label":"man student","tone":0,"skins":[{"emoji":"👨🏻‍🎓","label":"man student: light skin tone","tone":1},{"emoji":"👨🏼‍🎓","label":"man student: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🎓","label":"man student: medium skin tone","tone":3},{"emoji":"👨🏾‍🎓","label":"man student: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🎓","label":"man student: dark skin tone","tone":5}]},{"emoji":"👩‍🎓","label":"woman student","tone":0,"skins":[{"emoji":"👩🏻‍🎓","label":"woman student: light skin tone","tone":1},{"emoji":"👩🏼‍🎓","label":"woman student: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🎓","label":"woman student: medium skin tone","tone":3},{"emoji":"👩🏾‍🎓","label":"woman student: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🎓","label":"woman student: dark skin tone","tone":5}]},{"emoji":"🧑‍🏫","label":"teacher","tone":0,"skins":[{"emoji":"🧑🏻‍🏫","label":"teacher: light skin tone","tone":1},{"emoji":"🧑🏼‍🏫","label":"teacher: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🏫","label":"teacher: medium skin tone","tone":3},{"emoji":"🧑🏾‍🏫","label":"teacher: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🏫","label":"teacher: dark skin tone","tone":5}]},{"emoji":"👨‍🏫","label":"man teacher","tone":0,"skins":[{"emoji":"👨🏻‍🏫","label":"man teacher: light skin tone","tone":1},{"emoji":"👨🏼‍🏫","label":"man teacher: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🏫","label":"man teacher: medium skin tone","tone":3},{"emoji":"👨🏾‍🏫","label":"man teacher: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🏫","label":"man teacher: dark skin tone","tone":5}]},{"emoji":"👩‍🏫","label":"woman teacher","tone":0,"skins":[{"emoji":"👩🏻‍🏫","label":"woman teacher: light skin tone","tone":1},{"emoji":"👩🏼‍🏫","label":"woman teacher: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🏫","label":"woman teacher: medium skin tone","tone":3},{"emoji":"👩🏾‍🏫","label":"woman teacher: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🏫","label":"woman teacher: dark skin tone","tone":5}]},{"emoji":"🧑‍⚖️","label":"judge","tone":0,"skins":[{"emoji":"🧑🏻‍⚖️","label":"judge: light skin tone","tone":1},{"emoji":"🧑🏼‍⚖️","label":"judge: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍⚖️","label":"judge: medium skin tone","tone":3},{"emoji":"🧑🏾‍⚖️","label":"judge: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍⚖️","label":"judge: dark skin tone","tone":5}]},{"emoji":"👨‍⚖️","label":"man judge","tone":0,"skins":[{"emoji":"👨🏻‍⚖️","label":"man judge: light skin tone","tone":1},{"emoji":"👨🏼‍⚖️","label":"man judge: medium-light skin tone","tone":2},{"emoji":"👨🏽‍⚖️","label":"man judge: medium skin tone","tone":3},{"emoji":"👨🏾‍⚖️","label":"man judge: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍⚖️","label":"man judge: dark skin tone","tone":5}]},{"emoji":"👩‍⚖️","label":"woman judge","tone":0,"skins":[{"emoji":"👩🏻‍⚖️","label":"woman judge: light skin tone","tone":1},{"emoji":"👩🏼‍⚖️","label":"woman judge: medium-light skin tone","tone":2},{"emoji":"👩🏽‍⚖️","label":"woman judge: medium skin tone","tone":3},{"emoji":"👩🏾‍⚖️","label":"woman judge: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍⚖️","label":"woman judge: dark skin tone","tone":5}]},{"emoji":"🧑‍🌾","label":"farmer","tone":0,"skins":[{"emoji":"🧑🏻‍🌾","label":"farmer: light skin tone","tone":1},{"emoji":"🧑🏼‍🌾","label":"farmer: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🌾","label":"farmer: medium skin tone","tone":3},{"emoji":"🧑🏾‍🌾","label":"farmer: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🌾","label":"farmer: dark skin tone","tone":5}]},{"emoji":"👨‍🌾","label":"man farmer","tone":0,"skins":[{"emoji":"👨🏻‍🌾","label":"man farmer: light skin tone","tone":1},{"emoji":"👨🏼‍🌾","label":"man farmer: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🌾","label":"man farmer: medium skin tone","tone":3},{"emoji":"👨🏾‍🌾","label":"man farmer: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🌾","label":"man farmer: dark skin tone","tone":5}]},{"emoji":"👩‍🌾","label":"woman farmer","tone":0,"skins":[{"emoji":"👩🏻‍🌾","label":"woman farmer: light skin tone","tone":1},{"emoji":"👩🏼‍🌾","label":"woman farmer: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🌾","label":"woman farmer: medium skin tone","tone":3},{"emoji":"👩🏾‍🌾","label":"woman farmer: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🌾","label":"woman farmer: dark skin tone","tone":5}]},{"emoji":"🧑‍🍳","label":"cook","tone":0,"skins":[{"emoji":"🧑🏻‍🍳","label":"cook: light skin tone","tone":1},{"emoji":"🧑🏼‍🍳","label":"cook: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🍳","label":"cook: medium skin tone","tone":3},{"emoji":"🧑🏾‍🍳","label":"cook: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🍳","label":"cook: dark skin tone","tone":5}]},{"emoji":"👨‍🍳","label":"man cook","tone":0,"skins":[{"emoji":"👨🏻‍🍳","label":"man cook: light skin tone","tone":1},{"emoji":"👨🏼‍🍳","label":"man cook: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🍳","label":"man cook: medium skin tone","tone":3},{"emoji":"👨🏾‍🍳","label":"man cook: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🍳","label":"man cook: dark skin tone","tone":5}]},{"emoji":"👩‍🍳","label":"woman cook","tone":0,"skins":[{"emoji":"👩🏻‍🍳","label":"woman cook: light skin tone","tone":1},{"emoji":"👩🏼‍🍳","label":"woman cook: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🍳","label":"woman cook: medium skin tone","tone":3},{"emoji":"👩🏾‍🍳","label":"woman cook: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🍳","label":"woman cook: dark skin tone","tone":5}]},{"emoji":"🧑‍🔧","label":"mechanic","tone":0,"skins":[{"emoji":"🧑🏻‍🔧","label":"mechanic: light skin tone","tone":1},{"emoji":"🧑🏼‍🔧","label":"mechanic: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🔧","label":"mechanic: medium skin tone","tone":3},{"emoji":"🧑🏾‍🔧","label":"mechanic: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🔧","label":"mechanic: dark skin tone","tone":5}]},{"emoji":"👨‍🔧","label":"man mechanic","tone":0,"skins":[{"emoji":"👨🏻‍🔧","label":"man mechanic: light skin tone","tone":1},{"emoji":"👨🏼‍🔧","label":"man mechanic: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🔧","label":"man mechanic: medium skin tone","tone":3},{"emoji":"👨🏾‍🔧","label":"man mechanic: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🔧","label":"man mechanic: dark skin tone","tone":5}]},{"emoji":"👩‍🔧","label":"woman mechanic","tone":0,"skins":[{"emoji":"👩🏻‍🔧","label":"woman mechanic: light skin tone","tone":1},{"emoji":"👩🏼‍🔧","label":"woman mechanic: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🔧","label":"woman mechanic: medium skin tone","tone":3},{"emoji":"👩🏾‍🔧","label":"woman mechanic: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🔧","label":"woman mechanic: dark skin tone","tone":5}]},{"emoji":"🧑‍🏭","label":"factory worker","tone":0,"skins":[{"emoji":"🧑🏻‍🏭","label":"factory worker: light skin tone","tone":1},{"emoji":"🧑🏼‍🏭","label":"factory worker: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🏭","label":"factory worker: medium skin tone","tone":3},{"emoji":"🧑🏾‍🏭","label":"factory worker: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🏭","label":"factory worker: dark skin tone","tone":5}]},{"emoji":"👨‍🏭","label":"man factory worker","tone":0,"skins":[{"emoji":"👨🏻‍🏭","label":"man factory worker: light skin tone","tone":1},{"emoji":"👨🏼‍🏭","label":"man factory worker: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🏭","label":"man factory worker: medium skin tone","tone":3},{"emoji":"👨🏾‍🏭","label":"man factory worker: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🏭","label":"man factory worker: dark skin tone","tone":5}]},{"emoji":"👩‍🏭","label":"woman factory worker","tone":0,"skins":[{"emoji":"👩🏻‍🏭","label":"woman factory worker: light skin tone","tone":1},{"emoji":"👩🏼‍🏭","label":"woman factory worker: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🏭","label":"woman factory worker: medium skin tone","tone":3},{"emoji":"👩🏾‍🏭","label":"woman factory worker: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🏭","label":"woman factory worker: dark skin tone","tone":5}]},{"emoji":"🧑‍💼","label":"office worker","tone":0,"skins":[{"emoji":"🧑🏻‍💼","label":"office worker: light skin tone","tone":1},{"emoji":"🧑🏼‍💼","label":"office worker: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍💼","label":"office worker: medium skin tone","tone":3},{"emoji":"🧑🏾‍💼","label":"office worker: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍💼","label":"office worker: dark skin tone","tone":5}]},{"emoji":"👨‍💼","label":"man office worker","tone":0,"skins":[{"emoji":"👨🏻‍💼","label":"man office worker: light skin tone","tone":1},{"emoji":"👨🏼‍💼","label":"man office worker: medium-light skin tone","tone":2},{"emoji":"👨🏽‍💼","label":"man office worker: medium skin tone","tone":3},{"emoji":"👨🏾‍💼","label":"man office worker: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍💼","label":"man office worker: dark skin tone","tone":5}]},{"emoji":"👩‍💼","label":"woman office worker","tone":0,"skins":[{"emoji":"👩🏻‍💼","label":"woman office worker: light skin tone","tone":1},{"emoji":"👩🏼‍💼","label":"woman office worker: medium-light skin tone","tone":2},{"emoji":"👩🏽‍💼","label":"woman office worker: medium skin tone","tone":3},{"emoji":"👩🏾‍💼","label":"woman office worker: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍💼","label":"woman office worker: dark skin tone","tone":5}]},{"emoji":"🧑‍🔬","label":"scientist","tone":0,"skins":[{"emoji":"🧑🏻‍🔬","label":"scientist: light skin tone","tone":1},{"emoji":"🧑🏼‍🔬","label":"scientist: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🔬","label":"scientist: medium skin tone","tone":3},{"emoji":"🧑🏾‍🔬","label":"scientist: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🔬","label":"scientist: dark skin tone","tone":5}]},{"emoji":"👨‍🔬","label":"man scientist","tone":0,"skins":[{"emoji":"👨🏻‍🔬","label":"man scientist: light skin tone","tone":1},{"emoji":"👨🏼‍🔬","label":"man scientist: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🔬","label":"man scientist: medium skin tone","tone":3},{"emoji":"👨🏾‍🔬","label":"man scientist: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🔬","label":"man scientist: dark skin tone","tone":5}]},{"emoji":"👩‍🔬","label":"woman scientist","tone":0,"skins":[{"emoji":"👩🏻‍🔬","label":"woman scientist: light skin tone","tone":1},{"emoji":"👩🏼‍🔬","label":"woman scientist: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🔬","label":"woman scientist: medium skin tone","tone":3},{"emoji":"👩🏾‍🔬","label":"woman scientist: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🔬","label":"woman scientist: dark skin tone","tone":5}]},{"emoji":"🧑‍💻","label":"technologist","tone":0,"skins":[{"emoji":"🧑🏻‍💻","label":"technologist: light skin tone","tone":1},{"emoji":"🧑🏼‍💻","label":"technologist: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍💻","label":"technologist: medium skin tone","tone":3},{"emoji":"🧑🏾‍💻","label":"technologist: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍💻","label":"technologist: dark skin tone","tone":5}]},{"emoji":"👨‍💻","label":"man technologist","tone":0,"skins":[{"emoji":"👨🏻‍💻","label":"man technologist: light skin tone","tone":1},{"emoji":"👨🏼‍💻","label":"man technologist: medium-light skin tone","tone":2},{"emoji":"👨🏽‍💻","label":"man technologist: medium skin tone","tone":3},{"emoji":"👨🏾‍💻","label":"man technologist: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍💻","label":"man technologist: dark skin tone","tone":5}]},{"emoji":"👩‍💻","label":"woman technologist","tone":0,"skins":[{"emoji":"👩🏻‍💻","label":"woman technologist: light skin tone","tone":1},{"emoji":"👩🏼‍💻","label":"woman technologist: medium-light skin tone","tone":2},{"emoji":"👩🏽‍💻","label":"woman technologist: medium skin tone","tone":3},{"emoji":"👩🏾‍💻","label":"woman technologist: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍💻","label":"woman technologist: dark skin tone","tone":5}]},{"emoji":"🧑‍🎤","label":"singer","tone":0,"skins":[{"emoji":"🧑🏻‍🎤","label":"singer: light skin tone","tone":1},{"emoji":"🧑🏼‍🎤","label":"singer: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🎤","label":"singer: medium skin tone","tone":3},{"emoji":"🧑🏾‍🎤","label":"singer: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🎤","label":"singer: dark skin tone","tone":5}]},{"emoji":"👨‍🎤","label":"man singer","tone":0,"skins":[{"emoji":"👨🏻‍🎤","label":"man singer: light skin tone","tone":1},{"emoji":"👨🏼‍🎤","label":"man singer: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🎤","label":"man singer: medium skin tone","tone":3},{"emoji":"👨🏾‍🎤","label":"man singer: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🎤","label":"man singer: dark skin tone","tone":5}]},{"emoji":"👩‍🎤","label":"woman singer","tone":0,"skins":[{"emoji":"👩🏻‍🎤","label":"woman singer: light skin tone","tone":1},{"emoji":"👩🏼‍🎤","label":"woman singer: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🎤","label":"woman singer: medium skin tone","tone":3},{"emoji":"👩🏾‍🎤","label":"woman singer: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🎤","label":"woman singer: dark skin tone","tone":5}]},{"emoji":"🧑‍🎨","label":"artist","tone":0,"skins":[{"emoji":"🧑🏻‍🎨","label":"artist: light skin tone","tone":1},{"emoji":"🧑🏼‍🎨","label":"artist: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🎨","label":"artist: medium skin tone","tone":3},{"emoji":"🧑🏾‍🎨","label":"artist: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🎨","label":"artist: dark skin tone","tone":5}]},{"emoji":"👨‍🎨","label":"man artist","tone":0,"skins":[{"emoji":"👨🏻‍🎨","label":"man artist: light skin tone","tone":1},{"emoji":"👨🏼‍🎨","label":"man artist: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🎨","label":"man artist: medium skin tone","tone":3},{"emoji":"👨🏾‍🎨","label":"man artist: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🎨","label":"man artist: dark skin tone","tone":5}]},{"emoji":"👩‍🎨","label":"woman artist","tone":0,"skins":[{"emoji":"👩🏻‍🎨","label":"woman artist: light skin tone","tone":1},{"emoji":"👩🏼‍🎨","label":"woman artist: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🎨","label":"woman artist: medium skin tone","tone":3},{"emoji":"👩🏾‍🎨","label":"woman artist: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🎨","label":"woman artist: dark skin tone","tone":5}]},{"emoji":"🧑‍✈️","label":"pilot","tone":0,"skins":[{"emoji":"🧑🏻‍✈️","label":"pilot: light skin tone","tone":1},{"emoji":"🧑🏼‍✈️","label":"pilot: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍✈️","label":"pilot: medium skin tone","tone":3},{"emoji":"🧑🏾‍✈️","label":"pilot: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍✈️","label":"pilot: dark skin tone","tone":5}]},{"emoji":"👨‍✈️","label":"man pilot","tone":0,"skins":[{"emoji":"👨🏻‍✈️","label":"man pilot: light skin tone","tone":1},{"emoji":"👨🏼‍✈️","label":"man pilot: medium-light skin tone","tone":2},{"emoji":"👨🏽‍✈️","label":"man pilot: medium skin tone","tone":3},{"emoji":"👨🏾‍✈️","label":"man pilot: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍✈️","label":"man pilot: dark skin tone","tone":5}]},{"emoji":"👩‍✈️","label":"woman pilot","tone":0,"skins":[{"emoji":"👩🏻‍✈️","label":"woman pilot: light skin tone","tone":1},{"emoji":"👩🏼‍✈️","label":"woman pilot: medium-light skin tone","tone":2},{"emoji":"👩🏽‍✈️","label":"woman pilot: medium skin tone","tone":3},{"emoji":"👩🏾‍✈️","label":"woman pilot: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍✈️","label":"woman pilot: dark skin tone","tone":5}]},{"emoji":"🧑‍🚀","label":"astronaut","tone":0,"skins":[{"emoji":"🧑🏻‍🚀","label":"astronaut: light skin tone","tone":1},{"emoji":"🧑🏼‍🚀","label":"astronaut: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🚀","label":"astronaut: medium skin tone","tone":3},{"emoji":"🧑🏾‍🚀","label":"astronaut: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🚀","label":"astronaut: dark skin tone","tone":5}]},{"emoji":"👨‍🚀","label":"man astronaut","tone":0,"skins":[{"emoji":"👨🏻‍🚀","label":"man astronaut: light skin tone","tone":1},{"emoji":"👨🏼‍🚀","label":"man astronaut: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🚀","label":"man astronaut: medium skin tone","tone":3},{"emoji":"👨🏾‍🚀","label":"man astronaut: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🚀","label":"man astronaut: dark skin tone","tone":5}]},{"emoji":"👩‍🚀","label":"woman astronaut","tone":0,"skins":[{"emoji":"👩🏻‍🚀","label":"woman astronaut: light skin tone","tone":1},{"emoji":"👩🏼‍🚀","label":"woman astronaut: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🚀","label":"woman astronaut: medium skin tone","tone":3},{"emoji":"👩🏾‍🚀","label":"woman astronaut: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🚀","label":"woman astronaut: dark skin tone","tone":5}]},{"emoji":"🧑‍🚒","label":"firefighter","tone":0,"skins":[{"emoji":"🧑🏻‍🚒","label":"firefighter: light skin tone","tone":1},{"emoji":"🧑🏼‍🚒","label":"firefighter: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🚒","label":"firefighter: medium skin tone","tone":3},{"emoji":"🧑🏾‍🚒","label":"firefighter: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🚒","label":"firefighter: dark skin tone","tone":5}]},{"emoji":"👨‍🚒","label":"man firefighter","tone":0,"skins":[{"emoji":"👨🏻‍🚒","label":"man firefighter: light skin tone","tone":1},{"emoji":"👨🏼‍🚒","label":"man firefighter: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🚒","label":"man firefighter: medium skin tone","tone":3},{"emoji":"👨🏾‍🚒","label":"man firefighter: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🚒","label":"man firefighter: dark skin tone","tone":5}]},{"emoji":"👩‍🚒","label":"woman firefighter","tone":0,"skins":[{"emoji":"👩🏻‍🚒","label":"woman firefighter: light skin tone","tone":1},{"emoji":"👩🏼‍🚒","label":"woman firefighter: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🚒","label":"woman firefighter: medium skin tone","tone":3},{"emoji":"👩🏾‍🚒","label":"woman firefighter: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🚒","label":"woman firefighter: dark skin tone","tone":5}]},{"emoji":"👮","label":"police officer","tone":0,"skins":[{"emoji":"👮🏻","label":"police officer: light skin tone","tone":1},{"emoji":"👮🏼","label":"police officer: medium-light skin tone","tone":2},{"emoji":"👮🏽","label":"police officer: medium skin tone","tone":3},{"emoji":"👮🏾","label":"police officer: medium-dark skin tone","tone":4},{"emoji":"👮🏿","label":"police officer: dark skin tone","tone":5}]},{"emoji":"👮‍♂️","label":"man police officer","tone":0,"skins":[{"emoji":"👮🏻‍♂️","label":"man police officer: light skin tone","tone":1},{"emoji":"👮🏼‍♂️","label":"man police officer: medium-light skin tone","tone":2},{"emoji":"👮🏽‍♂️","label":"man police officer: medium skin tone","tone":3},{"emoji":"👮🏾‍♂️","label":"man police officer: medium-dark skin tone","tone":4},{"emoji":"👮🏿‍♂️","label":"man police officer: dark skin tone","tone":5}]},{"emoji":"👮‍♀️","label":"woman police officer","tone":0,"skins":[{"emoji":"👮🏻‍♀️","label":"woman police officer: light skin tone","tone":1},{"emoji":"👮🏼‍♀️","label":"woman police officer: medium-light skin tone","tone":2},{"emoji":"👮🏽‍♀️","label":"woman police officer: medium skin tone","tone":3},{"emoji":"👮🏾‍♀️","label":"woman police officer: medium-dark skin tone","tone":4},{"emoji":"👮🏿‍♀️","label":"woman police officer: dark skin tone","tone":5}]},{"emoji":"🕵️","label":"detective","tone":0,"skins":[{"emoji":"🕵🏻","label":"detective: light skin tone","tone":1},{"emoji":"🕵🏼","label":"detective: medium-light skin tone","tone":2},{"emoji":"🕵🏽","label":"detective: medium skin tone","tone":3},{"emoji":"🕵🏾","label":"detective: medium-dark skin tone","tone":4},{"emoji":"🕵🏿","label":"detective: dark skin tone","tone":5}]},{"emoji":"🕵️‍♂️","label":"man detective","tone":0,"skins":[{"emoji":"🕵🏻‍♂️","label":"man detective: light skin tone","tone":1},{"emoji":"🕵🏼‍♂️","label":"man detective: medium-light skin tone","tone":2},{"emoji":"🕵🏽‍♂️","label":"man detective: medium skin tone","tone":3},{"emoji":"🕵🏾‍♂️","label":"man detective: medium-dark skin tone","tone":4},{"emoji":"🕵🏿‍♂️","label":"man detective: dark skin tone","tone":5}]},{"emoji":"🕵️‍♀️","label":"woman detective","tone":0,"skins":[{"emoji":"🕵🏻‍♀️","label":"woman detective: light skin tone","tone":1},{"emoji":"🕵🏼‍♀️","label":"woman detective: medium-light skin tone","tone":2},{"emoji":"🕵🏽‍♀️","label":"woman detective: medium skin tone","tone":3},{"emoji":"🕵🏾‍♀️","label":"woman detective: medium-dark skin tone","tone":4},{"emoji":"🕵🏿‍♀️","label":"woman detective: dark skin tone","tone":5}]},{"emoji":"💂","label":"guard","tone":0,"skins":[{"emoji":"💂🏻","label":"guard: light skin tone","tone":1},{"emoji":"💂🏼","label":"guard: medium-light skin tone","tone":2},{"emoji":"💂🏽","label":"guard: medium skin tone","tone":3},{"emoji":"💂🏾","label":"guard: medium-dark skin tone","tone":4},{"emoji":"💂🏿","label":"guard: dark skin tone","tone":5}]},{"emoji":"💂‍♂️","label":"man guard","tone":0,"skins":[{"emoji":"💂🏻‍♂️","label":"man guard: light skin tone","tone":1},{"emoji":"💂🏼‍♂️","label":"man guard: medium-light skin tone","tone":2},{"emoji":"💂🏽‍♂️","label":"man guard: medium skin tone","tone":3},{"emoji":"💂🏾‍♂️","label":"man guard: medium-dark skin tone","tone":4},{"emoji":"💂🏿‍♂️","label":"man guard: dark skin tone","tone":5}]},{"emoji":"💂‍♀️","label":"woman guard","tone":0,"skins":[{"emoji":"💂🏻‍♀️","label":"woman guard: light skin tone","tone":1},{"emoji":"💂🏼‍♀️","label":"woman guard: medium-light skin tone","tone":2},{"emoji":"💂🏽‍♀️","label":"woman guard: medium skin tone","tone":3},{"emoji":"💂🏾‍♀️","label":"woman guard: medium-dark skin tone","tone":4},{"emoji":"💂🏿‍♀️","label":"woman guard: dark skin tone","tone":5}]},{"emoji":"🥷","label":"ninja","tone":0,"skins":[{"emoji":"🥷🏻","label":"ninja: light skin tone","tone":1},{"emoji":"🥷🏼","label":"ninja: medium-light skin tone","tone":2},{"emoji":"🥷🏽","label":"ninja: medium skin tone","tone":3},{"emoji":"🥷🏾","label":"ninja: medium-dark skin tone","tone":4},{"emoji":"🥷🏿","label":"ninja: dark skin tone","tone":5}]},{"emoji":"👷","label":"construction worker","tone":0,"skins":[{"emoji":"👷🏻","label":"construction worker: light skin tone","tone":1},{"emoji":"👷🏼","label":"construction worker: medium-light skin tone","tone":2},{"emoji":"👷🏽","label":"construction worker: medium skin tone","tone":3},{"emoji":"👷🏾","label":"construction worker: medium-dark skin tone","tone":4},{"emoji":"👷🏿","label":"construction worker: dark skin tone","tone":5}]},{"emoji":"👷‍♂️","label":"man construction worker","tone":0,"skins":[{"emoji":"👷🏻‍♂️","label":"man construction worker: light skin tone","tone":1},{"emoji":"👷🏼‍♂️","label":"man construction worker: medium-light skin tone","tone":2},{"emoji":"👷🏽‍♂️","label":"man construction worker: medium skin tone","tone":3},{"emoji":"👷🏾‍♂️","label":"man construction worker: medium-dark skin tone","tone":4},{"emoji":"👷🏿‍♂️","label":"man construction worker: dark skin tone","tone":5}]},{"emoji":"👷‍♀️","label":"woman construction worker","tone":0,"skins":[{"emoji":"👷🏻‍♀️","label":"woman construction worker: light skin tone","tone":1},{"emoji":"👷🏼‍♀️","label":"woman construction worker: medium-light skin tone","tone":2},{"emoji":"👷🏽‍♀️","label":"woman construction worker: medium skin tone","tone":3},{"emoji":"👷🏾‍♀️","label":"woman construction worker: medium-dark skin tone","tone":4},{"emoji":"👷🏿‍♀️","label":"woman construction worker: dark skin tone","tone":5}]},{"emoji":"🤴","label":"prince","tone":0,"skins":[{"emoji":"🤴🏻","label":"prince: light skin tone","tone":1},{"emoji":"🤴🏼","label":"prince: medium-light skin tone","tone":2},{"emoji":"🤴🏽","label":"prince: medium skin tone","tone":3},{"emoji":"🤴🏾","label":"prince: medium-dark skin tone","tone":4},{"emoji":"🤴🏿","label":"prince: dark skin tone","tone":5}]},{"emoji":"👸","label":"princess","tone":0,"skins":[{"emoji":"👸🏻","label":"princess: light skin tone","tone":1},{"emoji":"👸🏼","label":"princess: medium-light skin tone","tone":2},{"emoji":"👸🏽","label":"princess: medium skin tone","tone":3},{"emoji":"👸🏾","label":"princess: medium-dark skin tone","tone":4},{"emoji":"👸🏿","label":"princess: dark skin tone","tone":5}]},{"emoji":"👳","label":"person wearing turban","tone":0,"skins":[{"emoji":"👳🏻","label":"person wearing turban: light skin tone","tone":1},{"emoji":"👳🏼","label":"person wearing turban: medium-light skin tone","tone":2},{"emoji":"👳🏽","label":"person wearing turban: medium skin tone","tone":3},{"emoji":"👳🏾","label":"person wearing turban: medium-dark skin tone","tone":4},{"emoji":"👳🏿","label":"person wearing turban: dark skin tone","tone":5}]},{"emoji":"👳‍♂️","label":"man wearing turban","tone":0,"skins":[{"emoji":"👳🏻‍♂️","label":"man wearing turban: light skin tone","tone":1},{"emoji":"👳🏼‍♂️","label":"man wearing turban: medium-light skin tone","tone":2},{"emoji":"👳🏽‍♂️","label":"man wearing turban: medium skin tone","tone":3},{"emoji":"👳🏾‍♂️","label":"man wearing turban: medium-dark skin tone","tone":4},{"emoji":"👳🏿‍♂️","label":"man wearing turban: dark skin tone","tone":5}]},{"emoji":"👳‍♀️","label":"woman wearing turban","tone":0,"skins":[{"emoji":"👳🏻‍♀️","label":"woman wearing turban: light skin tone","tone":1},{"emoji":"👳🏼‍♀️","label":"woman wearing turban: medium-light skin tone","tone":2},{"emoji":"👳🏽‍♀️","label":"woman wearing turban: medium skin tone","tone":3},{"emoji":"👳🏾‍♀️","label":"woman wearing turban: medium-dark skin tone","tone":4},{"emoji":"👳🏿‍♀️","label":"woman wearing turban: dark skin tone","tone":5}]},{"emoji":"👲","label":"person with skullcap","tone":0,"skins":[{"emoji":"👲🏻","label":"person with skullcap: light skin tone","tone":1},{"emoji":"👲🏼","label":"person with skullcap: medium-light skin tone","tone":2},{"emoji":"👲🏽","label":"person with skullcap: medium skin tone","tone":3},{"emoji":"👲🏾","label":"person with skullcap: medium-dark skin tone","tone":4},{"emoji":"👲🏿","label":"person with skullcap: dark skin tone","tone":5}]},{"emoji":"🧕","label":"woman with headscarf","tone":0,"skins":[{"emoji":"🧕🏻","label":"woman with headscarf: light skin tone","tone":1},{"emoji":"🧕🏼","label":"woman with headscarf: medium-light skin tone","tone":2},{"emoji":"🧕🏽","label":"woman with headscarf: medium skin tone","tone":3},{"emoji":"🧕🏾","label":"woman with headscarf: medium-dark skin tone","tone":4},{"emoji":"🧕🏿","label":"woman with headscarf: dark skin tone","tone":5}]},{"emoji":"🤵","label":"person in tuxedo","tone":0,"skins":[{"emoji":"🤵🏻","label":"person in tuxedo: light skin tone","tone":1},{"emoji":"🤵🏼","label":"person in tuxedo: medium-light skin tone","tone":2},{"emoji":"🤵🏽","label":"person in tuxedo: medium skin tone","tone":3},{"emoji":"🤵🏾","label":"person in tuxedo: medium-dark skin tone","tone":4},{"emoji":"🤵🏿","label":"person in tuxedo: dark skin tone","tone":5}]},{"emoji":"🤵‍♂️","label":"man in tuxedo","tone":0,"skins":[{"emoji":"🤵🏻‍♂️","label":"man in tuxedo: light skin tone","tone":1},{"emoji":"🤵🏼‍♂️","label":"man in tuxedo: medium-light skin tone","tone":2},{"emoji":"🤵🏽‍♂️","label":"man in tuxedo: medium skin tone","tone":3},{"emoji":"🤵🏾‍♂️","label":"man in tuxedo: medium-dark skin tone","tone":4},{"emoji":"🤵🏿‍♂️","label":"man in tuxedo: dark skin tone","tone":5}]},{"emoji":"🤵‍♀️","label":"woman in tuxedo","tone":0,"skins":[{"emoji":"🤵🏻‍♀️","label":"woman in tuxedo: light skin tone","tone":1},{"emoji":"🤵🏼‍♀️","label":"woman in tuxedo: medium-light skin tone","tone":2},{"emoji":"🤵🏽‍♀️","label":"woman in tuxedo: medium skin tone","tone":3},{"emoji":"🤵🏾‍♀️","label":"woman in tuxedo: medium-dark skin tone","tone":4},{"emoji":"🤵🏿‍♀️","label":"woman in tuxedo: dark skin tone","tone":5}]},{"emoji":"👰","label":"person with veil","tone":0,"skins":[{"emoji":"👰🏻","label":"person with veil: light skin tone","tone":1},{"emoji":"👰🏼","label":"person with veil: medium-light skin tone","tone":2},{"emoji":"👰🏽","label":"person with veil: medium skin tone","tone":3},{"emoji":"👰🏾","label":"person with veil: medium-dark skin tone","tone":4},{"emoji":"👰🏿","label":"person with veil: dark skin tone","tone":5}]},{"emoji":"👰‍♂️","label":"man with veil","tone":0,"skins":[{"emoji":"👰🏻‍♂️","label":"man with veil: light skin tone","tone":1},{"emoji":"👰🏼‍♂️","label":"man with veil: medium-light skin tone","tone":2},{"emoji":"👰🏽‍♂️","label":"man with veil: medium skin tone","tone":3},{"emoji":"👰🏾‍♂️","label":"man with veil: medium-dark skin tone","tone":4},{"emoji":"👰🏿‍♂️","label":"man with veil: dark skin tone","tone":5}]},{"emoji":"👰‍♀️","label":"woman with veil","tone":0,"skins":[{"emoji":"👰🏻‍♀️","label":"woman with veil: light skin tone","tone":1},{"emoji":"👰🏼‍♀️","label":"woman with veil: medium-light skin tone","tone":2},{"emoji":"👰🏽‍♀️","label":"woman with veil: medium skin tone","tone":3},{"emoji":"👰🏾‍♀️","label":"woman with veil: medium-dark skin tone","tone":4},{"emoji":"👰🏿‍♀️","label":"woman with veil: dark skin tone","tone":5}]},{"emoji":"🤰","label":"pregnant woman","tone":0,"skins":[{"emoji":"🤰🏻","label":"pregnant woman: light skin tone","tone":1},{"emoji":"🤰🏼","label":"pregnant woman: medium-light skin tone","tone":2},{"emoji":"🤰🏽","label":"pregnant woman: medium skin tone","tone":3},{"emoji":"🤰🏾","label":"pregnant woman: medium-dark skin tone","tone":4},{"emoji":"🤰🏿","label":"pregnant woman: dark skin tone","tone":5}]},{"emoji":"🤱","label":"breast-feeding","tone":0,"skins":[{"emoji":"🤱🏻","label":"breast-feeding: light skin tone","tone":1},{"emoji":"🤱🏼","label":"breast-feeding: medium-light skin tone","tone":2},{"emoji":"🤱🏽","label":"breast-feeding: medium skin tone","tone":3},{"emoji":"🤱🏾","label":"breast-feeding: medium-dark skin tone","tone":4},{"emoji":"🤱🏿","label":"breast-feeding: dark skin tone","tone":5}]},{"emoji":"👩‍🍼","label":"woman feeding baby","tone":0,"skins":[{"emoji":"👩🏻‍🍼","label":"woman feeding baby: light skin tone","tone":1},{"emoji":"👩🏼‍🍼","label":"woman feeding baby: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🍼","label":"woman feeding baby: medium skin tone","tone":3},{"emoji":"👩🏾‍🍼","label":"woman feeding baby: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🍼","label":"woman feeding baby: dark skin tone","tone":5}]},{"emoji":"👨‍🍼","label":"man feeding baby","tone":0,"skins":[{"emoji":"👨🏻‍🍼","label":"man feeding baby: light skin tone","tone":1},{"emoji":"👨🏼‍🍼","label":"man feeding baby: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🍼","label":"man feeding baby: medium skin tone","tone":3},{"emoji":"👨🏾‍🍼","label":"man feeding baby: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🍼","label":"man feeding baby: dark skin tone","tone":5}]},{"emoji":"🧑‍🍼","label":"person feeding baby","tone":0,"skins":[{"emoji":"🧑🏻‍🍼","label":"person feeding baby: light skin tone","tone":1},{"emoji":"🧑🏼‍🍼","label":"person feeding baby: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🍼","label":"person feeding baby: medium skin tone","tone":3},{"emoji":"🧑🏾‍🍼","label":"person feeding baby: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🍼","label":"person feeding baby: dark skin tone","tone":5}]},{"emoji":"👼","label":"baby angel","tone":0,"skins":[{"emoji":"👼🏻","label":"baby angel: light skin tone","tone":1},{"emoji":"👼🏼","label":"baby angel: medium-light skin tone","tone":2},{"emoji":"👼🏽","label":"baby angel: medium skin tone","tone":3},{"emoji":"👼🏾","label":"baby angel: medium-dark skin tone","tone":4},{"emoji":"👼🏿","label":"baby angel: dark skin tone","tone":5}]},{"emoji":"🎅","label":"Santa Claus","tone":0,"skins":[{"emoji":"🎅🏻","label":"Santa Claus: light skin tone","tone":1},{"emoji":"🎅🏼","label":"Santa Claus: medium-light skin tone","tone":2},{"emoji":"🎅🏽","label":"Santa Claus: medium skin tone","tone":3},{"emoji":"🎅🏾","label":"Santa Claus: medium-dark skin tone","tone":4},{"emoji":"🎅🏿","label":"Santa Claus: dark skin tone","tone":5}]},{"emoji":"🤶","label":"Mrs. Claus","tone":0,"skins":[{"emoji":"🤶🏻","label":"Mrs. Claus: light skin tone","tone":1},{"emoji":"🤶🏼","label":"Mrs. Claus: medium-light skin tone","tone":2},{"emoji":"🤶🏽","label":"Mrs. Claus: medium skin tone","tone":3},{"emoji":"🤶🏾","label":"Mrs. Claus: medium-dark skin tone","tone":4},{"emoji":"🤶🏿","label":"Mrs. Claus: dark skin tone","tone":5}]},{"emoji":"🧑‍🎄","label":"mx claus","tone":0,"skins":[{"emoji":"🧑🏻‍🎄","label":"mx claus: light skin tone","tone":1},{"emoji":"🧑🏼‍🎄","label":"mx claus: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🎄","label":"mx claus: medium skin tone","tone":3},{"emoji":"🧑🏾‍🎄","label":"mx claus: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🎄","label":"mx claus: dark skin tone","tone":5}]},{"emoji":"🦸","label":"superhero","tone":0,"skins":[{"emoji":"🦸🏻","label":"superhero: light skin tone","tone":1},{"emoji":"🦸🏼","label":"superhero: medium-light skin tone","tone":2},{"emoji":"🦸🏽","label":"superhero: medium skin tone","tone":3},{"emoji":"🦸🏾","label":"superhero: medium-dark skin tone","tone":4},{"emoji":"🦸🏿","label":"superhero: dark skin tone","tone":5}]},{"emoji":"🦸‍♂️","label":"man superhero","tone":0,"skins":[{"emoji":"🦸🏻‍♂️","label":"man superhero: light skin tone","tone":1},{"emoji":"🦸🏼‍♂️","label":"man superhero: medium-light skin tone","tone":2},{"emoji":"🦸🏽‍♂️","label":"man superhero: medium skin tone","tone":3},{"emoji":"🦸🏾‍♂️","label":"man superhero: medium-dark skin tone","tone":4},{"emoji":"🦸🏿‍♂️","label":"man superhero: dark skin tone","tone":5}]},{"emoji":"🦸‍♀️","label":"woman superhero","tone":0,"skins":[{"emoji":"🦸🏻‍♀️","label":"woman superhero: light skin tone","tone":1},{"emoji":"🦸🏼‍♀️","label":"woman superhero: medium-light skin tone","tone":2},{"emoji":"🦸🏽‍♀️","label":"woman superhero: medium skin tone","tone":3},{"emoji":"🦸🏾‍♀️","label":"woman superhero: medium-dark skin tone","tone":4},{"emoji":"🦸🏿‍♀️","label":"woman superhero: dark skin tone","tone":5}]},{"emoji":"🦹","label":"supervillain","tone":0,"skins":[{"emoji":"🦹🏻","label":"supervillain: light skin tone","tone":1},{"emoji":"🦹🏼","label":"supervillain: medium-light skin tone","tone":2},{"emoji":"🦹🏽","label":"supervillain: medium skin tone","tone":3},{"emoji":"🦹🏾","label":"supervillain: medium-dark skin tone","tone":4},{"emoji":"🦹🏿","label":"supervillain: dark skin tone","tone":5}]},{"emoji":"🦹‍♂️","label":"man supervillain","tone":0,"skins":[{"emoji":"🦹🏻‍♂️","label":"man supervillain: light skin tone","tone":1},{"emoji":"🦹🏼‍♂️","label":"man supervillain: medium-light skin tone","tone":2},{"emoji":"🦹🏽‍♂️","label":"man supervillain: medium skin tone","tone":3},{"emoji":"🦹🏾‍♂️","label":"man supervillain: medium-dark skin tone","tone":4},{"emoji":"🦹🏿‍♂️","label":"man supervillain: dark skin tone","tone":5}]},{"emoji":"🦹‍♀️","label":"woman supervillain","tone":0,"skins":[{"emoji":"🦹🏻‍♀️","label":"woman supervillain: light skin tone","tone":1},{"emoji":"🦹🏼‍♀️","label":"woman supervillain: medium-light skin tone","tone":2},{"emoji":"🦹🏽‍♀️","label":"woman supervillain: medium skin tone","tone":3},{"emoji":"🦹🏾‍♀️","label":"woman supervillain: medium-dark skin tone","tone":4},{"emoji":"🦹🏿‍♀️","label":"woman supervillain: dark skin tone","tone":5}]},{"emoji":"🧙","label":"mage","tone":0,"skins":[{"emoji":"🧙🏻","label":"mage: light skin tone","tone":1},{"emoji":"🧙🏼","label":"mage: medium-light skin tone","tone":2},{"emoji":"🧙🏽","label":"mage: medium skin tone","tone":3},{"emoji":"🧙🏾","label":"mage: medium-dark skin tone","tone":4},{"emoji":"🧙🏿","label":"mage: dark skin tone","tone":5}]},{"emoji":"🧙‍♂️","label":"man mage","tone":0,"skins":[{"emoji":"🧙🏻‍♂️","label":"man mage: light skin tone","tone":1},{"emoji":"🧙🏼‍♂️","label":"man mage: medium-light skin tone","tone":2},{"emoji":"🧙🏽‍♂️","label":"man mage: medium skin tone","tone":3},{"emoji":"🧙🏾‍♂️","label":"man mage: medium-dark skin tone","tone":4},{"emoji":"🧙🏿‍♂️","label":"man mage: dark skin tone","tone":5}]},{"emoji":"🧙‍♀️","label":"woman mage","tone":0,"skins":[{"emoji":"🧙🏻‍♀️","label":"woman mage: light skin tone","tone":1},{"emoji":"🧙🏼‍♀️","label":"woman mage: medium-light skin tone","tone":2},{"emoji":"🧙🏽‍♀️","label":"woman mage: medium skin tone","tone":3},{"emoji":"🧙🏾‍♀️","label":"woman mage: medium-dark skin tone","tone":4},{"emoji":"🧙🏿‍♀️","label":"woman mage: dark skin tone","tone":5}]},{"emoji":"🧚","label":"fairy","tone":0,"skins":[{"emoji":"🧚🏻","label":"fairy: light skin tone","tone":1},{"emoji":"🧚🏼","label":"fairy: medium-light skin tone","tone":2},{"emoji":"🧚🏽","label":"fairy: medium skin tone","tone":3},{"emoji":"🧚🏾","label":"fairy: medium-dark skin tone","tone":4},{"emoji":"🧚🏿","label":"fairy: dark skin tone","tone":5}]},{"emoji":"🧚‍♂️","label":"man fairy","tone":0,"skins":[{"emoji":"🧚🏻‍♂️","label":"man fairy: light skin tone","tone":1},{"emoji":"🧚🏼‍♂️","label":"man fairy: medium-light skin tone","tone":2},{"emoji":"🧚🏽‍♂️","label":"man fairy: medium skin tone","tone":3},{"emoji":"🧚🏾‍♂️","label":"man fairy: medium-dark skin tone","tone":4},{"emoji":"🧚🏿‍♂️","label":"man fairy: dark skin tone","tone":5}]},{"emoji":"🧚‍♀️","label":"woman fairy","tone":0,"skins":[{"emoji":"🧚🏻‍♀️","label":"woman fairy: light skin tone","tone":1},{"emoji":"🧚🏼‍♀️","label":"woman fairy: medium-light skin tone","tone":2},{"emoji":"🧚🏽‍♀️","label":"woman fairy: medium skin tone","tone":3},{"emoji":"🧚🏾‍♀️","label":"woman fairy: medium-dark skin tone","tone":4},{"emoji":"🧚🏿‍♀️","label":"woman fairy: dark skin tone","tone":5}]},{"emoji":"🧛","label":"vampire","tone":0,"skins":[{"emoji":"🧛🏻","label":"vampire: light skin tone","tone":1},{"emoji":"🧛🏼","label":"vampire: medium-light skin tone","tone":2},{"emoji":"🧛🏽","label":"vampire: medium skin tone","tone":3},{"emoji":"🧛🏾","label":"vampire: medium-dark skin tone","tone":4},{"emoji":"🧛🏿","label":"vampire: dark skin tone","tone":5}]},{"emoji":"🧛‍♂️","label":"man vampire","tone":0,"skins":[{"emoji":"🧛🏻‍♂️","label":"man vampire: light skin tone","tone":1},{"emoji":"🧛🏼‍♂️","label":"man vampire: medium-light skin tone","tone":2},{"emoji":"🧛🏽‍♂️","label":"man vampire: medium skin tone","tone":3},{"emoji":"🧛🏾‍♂️","label":"man vampire: medium-dark skin tone","tone":4},{"emoji":"🧛🏿‍♂️","label":"man vampire: dark skin tone","tone":5}]},{"emoji":"🧛‍♀️","label":"woman vampire","tone":0,"skins":[{"emoji":"🧛🏻‍♀️","label":"woman vampire: light skin tone","tone":1},{"emoji":"🧛🏼‍♀️","label":"woman vampire: medium-light skin tone","tone":2},{"emoji":"🧛🏽‍♀️","label":"woman vampire: medium skin tone","tone":3},{"emoji":"🧛🏾‍♀️","label":"woman vampire: medium-dark skin tone","tone":4},{"emoji":"🧛🏿‍♀️","label":"woman vampire: dark skin tone","tone":5}]},{"emoji":"🧜","label":"merperson","tone":0,"skins":[{"emoji":"🧜🏻","label":"merperson: light skin tone","tone":1},{"emoji":"🧜🏼","label":"merperson: medium-light skin tone","tone":2},{"emoji":"🧜🏽","label":"merperson: medium skin tone","tone":3},{"emoji":"🧜🏾","label":"merperson: medium-dark skin tone","tone":4},{"emoji":"🧜🏿","label":"merperson: dark skin tone","tone":5}]},{"emoji":"🧜‍♂️","label":"merman","tone":0,"skins":[{"emoji":"🧜🏻‍♂️","label":"merman: light skin tone","tone":1},{"emoji":"🧜🏼‍♂️","label":"merman: medium-light skin tone","tone":2},{"emoji":"🧜🏽‍♂️","label":"merman: medium skin tone","tone":3},{"emoji":"🧜🏾‍♂️","label":"merman: medium-dark skin tone","tone":4},{"emoji":"🧜🏿‍♂️","label":"merman: dark skin tone","tone":5}]},{"emoji":"🧜‍♀️","label":"mermaid","tone":0,"skins":[{"emoji":"🧜🏻‍♀️","label":"mermaid: light skin tone","tone":1},{"emoji":"🧜🏼‍♀️","label":"mermaid: medium-light skin tone","tone":2},{"emoji":"🧜🏽‍♀️","label":"mermaid: medium skin tone","tone":3},{"emoji":"🧜🏾‍♀️","label":"mermaid: medium-dark skin tone","tone":4},{"emoji":"🧜🏿‍♀️","label":"mermaid: dark skin tone","tone":5}]},{"emoji":"🧝","label":"elf","tone":0,"skins":[{"emoji":"🧝🏻","label":"elf: light skin tone","tone":1},{"emoji":"🧝🏼","label":"elf: medium-light skin tone","tone":2},{"emoji":"🧝🏽","label":"elf: medium skin tone","tone":3},{"emoji":"🧝🏾","label":"elf: medium-dark skin tone","tone":4},{"emoji":"🧝🏿","label":"elf: dark skin tone","tone":5}]},{"emoji":"🧝‍♂️","label":"man elf","tone":0,"skins":[{"emoji":"🧝🏻‍♂️","label":"man elf: light skin tone","tone":1},{"emoji":"🧝🏼‍♂️","label":"man elf: medium-light skin tone","tone":2},{"emoji":"🧝🏽‍♂️","label":"man elf: medium skin tone","tone":3},{"emoji":"🧝🏾‍♂️","label":"man elf: medium-dark skin tone","tone":4},{"emoji":"🧝🏿‍♂️","label":"man elf: dark skin tone","tone":5}]},{"emoji":"🧝‍♀️","label":"woman elf","tone":0,"skins":[{"emoji":"🧝🏻‍♀️","label":"woman elf: light skin tone","tone":1},{"emoji":"🧝🏼‍♀️","label":"woman elf: medium-light skin tone","tone":2},{"emoji":"🧝🏽‍♀️","label":"woman elf: medium skin tone","tone":3},{"emoji":"🧝🏾‍♀️","label":"woman elf: medium-dark skin tone","tone":4},{"emoji":"🧝🏿‍♀️","label":"woman elf: dark skin tone","tone":5}]},{"emoji":"🧞","label":"genie","tone":0},{"emoji":"🧞‍♂️","label":"man genie","tone":0},{"emoji":"🧞‍♀️","label":"woman genie","tone":0},{"emoji":"🧟","label":"zombie","tone":0},{"emoji":"🧟‍♂️","label":"man zombie","tone":0},{"emoji":"🧟‍♀️","label":"woman zombie","tone":0},{"emoji":"💆","label":"person getting massage","tone":0,"skins":[{"emoji":"💆🏻","label":"person getting massage: light skin tone","tone":1},{"emoji":"💆🏼","label":"person getting massage: medium-light skin tone","tone":2},{"emoji":"💆🏽","label":"person getting massage: medium skin tone","tone":3},{"emoji":"💆🏾","label":"person getting massage: medium-dark skin tone","tone":4},{"emoji":"💆🏿","label":"person getting massage: dark skin tone","tone":5}]},{"emoji":"💆‍♂️","label":"man getting massage","tone":0,"skins":[{"emoji":"💆🏻‍♂️","label":"man getting massage: light skin tone","tone":1},{"emoji":"💆🏼‍♂️","label":"man getting massage: medium-light skin tone","tone":2},{"emoji":"💆🏽‍♂️","label":"man getting massage: medium skin tone","tone":3},{"emoji":"💆🏾‍♂️","label":"man getting massage: medium-dark skin tone","tone":4},{"emoji":"💆🏿‍♂️","label":"man getting massage: dark skin tone","tone":5}]},{"emoji":"💆‍♀️","label":"woman getting massage","tone":0,"skins":[{"emoji":"💆🏻‍♀️","label":"woman getting massage: light skin tone","tone":1},{"emoji":"💆🏼‍♀️","label":"woman getting massage: medium-light skin tone","tone":2},{"emoji":"💆🏽‍♀️","label":"woman getting massage: medium skin tone","tone":3},{"emoji":"💆🏾‍♀️","label":"woman getting massage: medium-dark skin tone","tone":4},{"emoji":"💆🏿‍♀️","label":"woman getting massage: dark skin tone","tone":5}]},{"emoji":"💇","label":"person getting haircut","tone":0,"skins":[{"emoji":"💇🏻","label":"person getting haircut: light skin tone","tone":1},{"emoji":"💇🏼","label":"person getting haircut: medium-light skin tone","tone":2},{"emoji":"💇🏽","label":"person getting haircut: medium skin tone","tone":3},{"emoji":"💇🏾","label":"person getting haircut: medium-dark skin tone","tone":4},{"emoji":"💇🏿","label":"person getting haircut: dark skin tone","tone":5}]},{"emoji":"💇‍♂️","label":"man getting haircut","tone":0,"skins":[{"emoji":"💇🏻‍♂️","label":"man getting haircut: light skin tone","tone":1},{"emoji":"💇🏼‍♂️","label":"man getting haircut: medium-light skin tone","tone":2},{"emoji":"💇🏽‍♂️","label":"man getting haircut: medium skin tone","tone":3},{"emoji":"💇🏾‍♂️","label":"man getting haircut: medium-dark skin tone","tone":4},{"emoji":"💇🏿‍♂️","label":"man getting haircut: dark skin tone","tone":5}]},{"emoji":"💇‍♀️","label":"woman getting haircut","tone":0,"skins":[{"emoji":"💇🏻‍♀️","label":"woman getting haircut: light skin tone","tone":1},{"emoji":"💇🏼‍♀️","label":"woman getting haircut: medium-light skin tone","tone":2},{"emoji":"💇🏽‍♀️","label":"woman getting haircut: medium skin tone","tone":3},{"emoji":"💇🏾‍♀️","label":"woman getting haircut: medium-dark skin tone","tone":4},{"emoji":"💇🏿‍♀️","label":"woman getting haircut: dark skin tone","tone":5}]},{"emoji":"🚶","label":"person walking","tone":0,"skins":[{"emoji":"🚶🏻","label":"person walking: light skin tone","tone":1},{"emoji":"🚶🏼","label":"person walking: medium-light skin tone","tone":2},{"emoji":"🚶🏽","label":"person walking: medium skin tone","tone":3},{"emoji":"🚶🏾","label":"person walking: medium-dark skin tone","tone":4},{"emoji":"🚶🏿","label":"person walking: dark skin tone","tone":5}]},{"emoji":"🚶‍♂️","label":"man walking","tone":0,"skins":[{"emoji":"🚶🏻‍♂️","label":"man walking: light skin tone","tone":1},{"emoji":"🚶🏼‍♂️","label":"man walking: medium-light skin tone","tone":2},{"emoji":"🚶🏽‍♂️","label":"man walking: medium skin tone","tone":3},{"emoji":"🚶🏾‍♂️","label":"man walking: medium-dark skin tone","tone":4},{"emoji":"🚶🏿‍♂️","label":"man walking: dark skin tone","tone":5}]},{"emoji":"🚶‍♀️","label":"woman walking","tone":0,"skins":[{"emoji":"🚶🏻‍♀️","label":"woman walking: light skin tone","tone":1},{"emoji":"🚶🏼‍♀️","label":"woman walking: medium-light skin tone","tone":2},{"emoji":"🚶🏽‍♀️","label":"woman walking: medium skin tone","tone":3},{"emoji":"🚶🏾‍♀️","label":"woman walking: medium-dark skin tone","tone":4},{"emoji":"🚶🏿‍♀️","label":"woman walking: dark skin tone","tone":5}]},{"emoji":"🧍","label":"person standing","tone":0,"skins":[{"emoji":"🧍🏻","label":"person standing: light skin tone","tone":1},{"emoji":"🧍🏼","label":"person standing: medium-light skin tone","tone":2},{"emoji":"🧍🏽","label":"person standing: medium skin tone","tone":3},{"emoji":"🧍🏾","label":"person standing: medium-dark skin tone","tone":4},{"emoji":"🧍🏿","label":"person standing: dark skin tone","tone":5}]},{"emoji":"🧍‍♂️","label":"man standing","tone":0,"skins":[{"emoji":"🧍🏻‍♂️","label":"man standing: light skin tone","tone":1},{"emoji":"🧍🏼‍♂️","label":"man standing: medium-light skin tone","tone":2},{"emoji":"🧍🏽‍♂️","label":"man standing: medium skin tone","tone":3},{"emoji":"🧍🏾‍♂️","label":"man standing: medium-dark skin tone","tone":4},{"emoji":"🧍🏿‍♂️","label":"man standing: dark skin tone","tone":5}]},{"emoji":"🧍‍♀️","label":"woman standing","tone":0,"skins":[{"emoji":"🧍🏻‍♀️","label":"woman standing: light skin tone","tone":1},{"emoji":"🧍🏼‍♀️","label":"woman standing: medium-light skin tone","tone":2},{"emoji":"🧍🏽‍♀️","label":"woman standing: medium skin tone","tone":3},{"emoji":"🧍🏾‍♀️","label":"woman standing: medium-dark skin tone","tone":4},{"emoji":"🧍🏿‍♀️","label":"woman standing: dark skin tone","tone":5}]},{"emoji":"🧎","label":"person kneeling","tone":0,"skins":[{"emoji":"🧎🏻","label":"person kneeling: light skin tone","tone":1},{"emoji":"🧎🏼","label":"person kneeling: medium-light skin tone","tone":2},{"emoji":"🧎🏽","label":"person kneeling: medium skin tone","tone":3},{"emoji":"🧎🏾","label":"person kneeling: medium-dark skin tone","tone":4},{"emoji":"🧎🏿","label":"person kneeling: dark skin tone","tone":5}]},{"emoji":"🧎‍♂️","label":"man kneeling","tone":0,"skins":[{"emoji":"🧎🏻‍♂️","label":"man kneeling: light skin tone","tone":1},{"emoji":"🧎🏼‍♂️","label":"man kneeling: medium-light skin tone","tone":2},{"emoji":"🧎🏽‍♂️","label":"man kneeling: medium skin tone","tone":3},{"emoji":"🧎🏾‍♂️","label":"man kneeling: medium-dark skin tone","tone":4},{"emoji":"🧎🏿‍♂️","label":"man kneeling: dark skin tone","tone":5}]},{"emoji":"🧎‍♀️","label":"woman kneeling","tone":0,"skins":[{"emoji":"🧎🏻‍♀️","label":"woman kneeling: light skin tone","tone":1},{"emoji":"🧎🏼‍♀️","label":"woman kneeling: medium-light skin tone","tone":2},{"emoji":"🧎🏽‍♀️","label":"woman kneeling: medium skin tone","tone":3},{"emoji":"🧎🏾‍♀️","label":"woman kneeling: medium-dark skin tone","tone":4},{"emoji":"🧎🏿‍♀️","label":"woman kneeling: dark skin tone","tone":5}]},{"emoji":"🧑‍🦯","label":"person with white cane","tone":0,"skins":[{"emoji":"🧑🏻‍🦯","label":"person with white cane: light skin tone","tone":1},{"emoji":"🧑🏼‍🦯","label":"person with white cane: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🦯","label":"person with white cane: medium skin tone","tone":3},{"emoji":"🧑🏾‍🦯","label":"person with white cane: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🦯","label":"person with white cane: dark skin tone","tone":5}]},{"emoji":"👨‍🦯","label":"man with white cane","tone":0,"skins":[{"emoji":"👨🏻‍🦯","label":"man with white cane: light skin tone","tone":1},{"emoji":"👨🏼‍🦯","label":"man with white cane: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🦯","label":"man with white cane: medium skin tone","tone":3},{"emoji":"👨🏾‍🦯","label":"man with white cane: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🦯","label":"man with white cane: dark skin tone","tone":5}]},{"emoji":"👩‍🦯","label":"woman with white cane","tone":0,"skins":[{"emoji":"👩🏻‍🦯","label":"woman with white cane: light skin tone","tone":1},{"emoji":"👩🏼‍🦯","label":"woman with white cane: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🦯","label":"woman with white cane: medium skin tone","tone":3},{"emoji":"👩🏾‍🦯","label":"woman with white cane: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🦯","label":"woman with white cane: dark skin tone","tone":5}]},{"emoji":"🧑‍🦼","label":"person in motorized wheelchair","tone":0,"skins":[{"emoji":"🧑🏻‍🦼","label":"person in motorized wheelchair: light skin tone","tone":1},{"emoji":"🧑🏼‍🦼","label":"person in motorized wheelchair: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🦼","label":"person in motorized wheelchair: medium skin tone","tone":3},{"emoji":"🧑🏾‍🦼","label":"person in motorized wheelchair: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🦼","label":"person in motorized wheelchair: dark skin tone","tone":5}]},{"emoji":"👨‍🦼","label":"man in motorized wheelchair","tone":0,"skins":[{"emoji":"👨🏻‍🦼","label":"man in motorized wheelchair: light skin tone","tone":1},{"emoji":"👨🏼‍🦼","label":"man in motorized wheelchair: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🦼","label":"man in motorized wheelchair: medium skin tone","tone":3},{"emoji":"👨🏾‍🦼","label":"man in motorized wheelchair: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🦼","label":"man in motorized wheelchair: dark skin tone","tone":5}]},{"emoji":"👩‍🦼","label":"woman in motorized wheelchair","tone":0,"skins":[{"emoji":"👩🏻‍🦼","label":"woman in motorized wheelchair: light skin tone","tone":1},{"emoji":"👩🏼‍🦼","label":"woman in motorized wheelchair: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🦼","label":"woman in motorized wheelchair: medium skin tone","tone":3},{"emoji":"👩🏾‍🦼","label":"woman in motorized wheelchair: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🦼","label":"woman in motorized wheelchair: dark skin tone","tone":5}]},{"emoji":"🧑‍🦽","label":"person in manual wheelchair","tone":0,"skins":[{"emoji":"🧑🏻‍🦽","label":"person in manual wheelchair: light skin tone","tone":1},{"emoji":"🧑🏼‍🦽","label":"person in manual wheelchair: medium-light skin tone","tone":2},{"emoji":"🧑🏽‍🦽","label":"person in manual wheelchair: medium skin tone","tone":3},{"emoji":"🧑🏾‍🦽","label":"person in manual wheelchair: medium-dark skin tone","tone":4},{"emoji":"🧑🏿‍🦽","label":"person in manual wheelchair: dark skin tone","tone":5}]},{"emoji":"👨‍🦽","label":"man in manual wheelchair","tone":0,"skins":[{"emoji":"👨🏻‍🦽","label":"man in manual wheelchair: light skin tone","tone":1},{"emoji":"👨🏼‍🦽","label":"man in manual wheelchair: medium-light skin tone","tone":2},{"emoji":"👨🏽‍🦽","label":"man in manual wheelchair: medium skin tone","tone":3},{"emoji":"👨🏾‍🦽","label":"man in manual wheelchair: medium-dark skin tone","tone":4},{"emoji":"👨🏿‍🦽","label":"man in manual wheelchair: dark skin tone","tone":5}]},{"emoji":"👩‍🦽","label":"woman in manual wheelchair","tone":0,"skins":[{"emoji":"👩🏻‍🦽","label":"woman in manual wheelchair: light skin tone","tone":1},{"emoji":"👩🏼‍🦽","label":"woman in manual wheelchair: medium-light skin tone","tone":2},{"emoji":"👩🏽‍🦽","label":"woman in manual wheelchair: medium skin tone","tone":3},{"emoji":"👩🏾‍🦽","label":"woman in manual wheelchair: medium-dark skin tone","tone":4},{"emoji":"👩🏿‍🦽","label":"woman in manual wheelchair: dark skin tone","tone":5}]},{"emoji":"🏃","label":"person running","tone":0,"skins":[{"emoji":"🏃🏻","label":"person running: light skin tone","tone":1},{"emoji":"🏃🏼","label":"person running: medium-light skin tone","tone":2},{"emoji":"🏃🏽","label":"person running: medium skin tone","tone":3},{"emoji":"🏃🏾","label":"person running: medium-dark skin tone","tone":4},{"emoji":"🏃🏿","label":"person running: dark skin tone","tone":5}]},{"emoji":"🏃‍♂️","label":"man running","tone":0,"skins":[{"emoji":"🏃🏻‍♂️","label":"man running: light skin tone","tone":1},{"emoji":"🏃🏼‍♂️","label":"man running: medium-light skin tone","tone":2},{"emoji":"🏃🏽‍♂️","label":"man running: medium skin tone","tone":3},{"emoji":"🏃🏾‍♂️","label":"man running: medium-dark skin tone","tone":4},{"emoji":"🏃🏿‍♂️","label":"man running: dark skin tone","tone":5}]},{"emoji":"🏃‍♀️","label":"woman running","tone":0,"skins":[{"emoji":"🏃🏻‍♀️","label":"woman running: light skin tone","tone":1},{"emoji":"🏃🏼‍♀️","label":"woman running: medium-light skin tone","tone":2},{"emoji":"🏃🏽‍♀️","label":"woman running: medium skin tone","tone":3},{"emoji":"🏃🏾‍♀️","label":"woman running: medium-dark skin tone","tone":4},{"emoji":"🏃🏿‍♀️","label":"woman running: dark skin tone","tone":5}]},{"emoji":"💃","label":"woman dancing","tone":0,"skins":[{"emoji":"💃🏻","label":"woman dancing: light skin tone","tone":1},{"emoji":"💃🏼","label":"woman dancing: medium-light skin tone","tone":2},{"emoji":"💃🏽","label":"woman dancing: medium skin tone","tone":3},{"emoji":"💃🏾","label":"woman dancing: medium-dark skin tone","tone":4},{"emoji":"💃🏿","label":"woman dancing: dark skin tone","tone":5}]},{"emoji":"🕺","label":"man dancing","tone":0,"skins":[{"emoji":"🕺🏻","label":"man dancing: light skin tone","tone":1},{"emoji":"🕺🏼","label":"man dancing: medium-light skin tone","tone":2},{"emoji":"🕺🏽","label":"man dancing: medium skin tone","tone":3},{"emoji":"🕺🏾","label":"man dancing: medium-dark skin tone","tone":4},{"emoji":"🕺🏿","label":"man dancing: dark skin tone","tone":5}]},{"emoji":"🕴️","label":"person in suit levitating","tone":0,"skins":[{"emoji":"🕴🏻","label":"person in suit levitating: light skin tone","tone":1},{"emoji":"🕴🏼","label":"person in suit levitating: medium-light skin tone","tone":2},{"emoji":"🕴🏽","label":"person in suit levitating: medium skin tone","tone":3},{"emoji":"🕴🏾","label":"person in suit levitating: medium-dark skin tone","tone":4},{"emoji":"🕴🏿","label":"person in suit levitating: dark skin tone","tone":5}]},{"emoji":"👯","label":"people with bunny ears","tone":0},{"emoji":"👯‍♂️","label":"men with bunny ears","tone":0},{"emoji":"👯‍♀️","label":"women with bunny ears","tone":0},{"emoji":"🧖","label":"person in steamy room","tone":0,"skins":[{"emoji":"🧖🏻","label":"person in steamy room: light skin tone","tone":1},{"emoji":"🧖🏼","label":"person in steamy room: medium-light skin tone","tone":2},{"emoji":"🧖🏽","label":"person in steamy room: medium skin tone","tone":3},{"emoji":"🧖🏾","label":"person in steamy room: medium-dark skin tone","tone":4},{"emoji":"🧖🏿","label":"person in steamy room: dark skin tone","tone":5}]},{"emoji":"🧖‍♂️","label":"man in steamy room","tone":0,"skins":[{"emoji":"🧖🏻‍♂️","label":"man in steamy room: light skin tone","tone":1},{"emoji":"🧖🏼‍♂️","label":"man in steamy room: medium-light skin tone","tone":2},{"emoji":"🧖🏽‍♂️","label":"man in steamy room: medium skin tone","tone":3},{"emoji":"🧖🏾‍♂️","label":"man in steamy room: medium-dark skin tone","tone":4},{"emoji":"🧖🏿‍♂️","label":"man in steamy room: dark skin tone","tone":5}]},{"emoji":"🧖‍♀️","label":"woman in steamy room","tone":0,"skins":[{"emoji":"🧖🏻‍♀️","label":"woman in steamy room: light skin tone","tone":1},{"emoji":"🧖🏼‍♀️","label":"woman in steamy room: medium-light skin tone","tone":2},{"emoji":"🧖🏽‍♀️","label":"woman in steamy room: medium skin tone","tone":3},{"emoji":"🧖🏾‍♀️","label":"woman in steamy room: medium-dark skin tone","tone":4},{"emoji":"🧖🏿‍♀️","label":"woman in steamy room: dark skin tone","tone":5}]},{"emoji":"🧗","label":"person climbing","tone":0,"skins":[{"emoji":"🧗🏻","label":"person climbing: light skin tone","tone":1},{"emoji":"🧗🏼","label":"person climbing: medium-light skin tone","tone":2},{"emoji":"🧗🏽","label":"person climbing: medium skin tone","tone":3},{"emoji":"🧗🏾","label":"person climbing: medium-dark skin tone","tone":4},{"emoji":"🧗🏿","label":"person climbing: dark skin tone","tone":5}]},{"emoji":"🧗‍♂️","label":"man climbing","tone":0,"skins":[{"emoji":"🧗🏻‍♂️","label":"man climbing: light skin tone","tone":1},{"emoji":"🧗🏼‍♂️","label":"man climbing: medium-light skin tone","tone":2},{"emoji":"🧗🏽‍♂️","label":"man climbing: medium skin tone","tone":3},{"emoji":"🧗🏾‍♂️","label":"man climbing: medium-dark skin tone","tone":4},{"emoji":"🧗🏿‍♂️","label":"man climbing: dark skin tone","tone":5}]},{"emoji":"🧗‍♀️","label":"woman climbing","tone":0,"skins":[{"emoji":"🧗🏻‍♀️","label":"woman climbing: light skin tone","tone":1},{"emoji":"🧗🏼‍♀️","label":"woman climbing: medium-light skin tone","tone":2},{"emoji":"🧗🏽‍♀️","label":"woman climbing: medium skin tone","tone":3},{"emoji":"🧗🏾‍♀️","label":"woman climbing: medium-dark skin tone","tone":4},{"emoji":"🧗🏿‍♀️","label":"woman climbing: dark skin tone","tone":5}]},{"emoji":"🤺","label":"person fencing","tone":0},{"emoji":"🏇","label":"horse racing","tone":0,"skins":[{"emoji":"🏇🏻","label":"horse racing: light skin tone","tone":1},{"emoji":"🏇🏼","label":"horse racing: medium-light skin tone","tone":2},{"emoji":"🏇🏽","label":"horse racing: medium skin tone","tone":3},{"emoji":"🏇🏾","label":"horse racing: medium-dark skin tone","tone":4},{"emoji":"🏇🏿","label":"horse racing: dark skin tone","tone":5}]},{"emoji":"⛷️","label":"skier","tone":0},{"emoji":"🏂️","label":"snowboarder","tone":0,"skins":[{"emoji":"🏂🏻","label":"snowboarder: light skin tone","tone":1},{"emoji":"🏂🏼","label":"snowboarder: medium-light skin tone","tone":2},{"emoji":"🏂🏽","label":"snowboarder: medium skin tone","tone":3},{"emoji":"🏂🏾","label":"snowboarder: medium-dark skin tone","tone":4},{"emoji":"🏂🏿","label":"snowboarder: dark skin tone","tone":5}]},{"emoji":"🏌️","label":"person golfing","tone":0,"skins":[{"emoji":"🏌🏻","label":"person golfing: light skin tone","tone":1},{"emoji":"🏌🏼","label":"person golfing: medium-light skin tone","tone":2},{"emoji":"🏌🏽","label":"person golfing: medium skin tone","tone":3},{"emoji":"🏌🏾","label":"person golfing: medium-dark skin tone","tone":4},{"emoji":"🏌🏿","label":"person golfing: dark skin tone","tone":5}]},{"emoji":"🏌️‍♂️","label":"man golfing","tone":0,"skins":[{"emoji":"🏌🏻‍♂️","label":"man golfing: light skin tone","tone":1},{"emoji":"🏌🏼‍♂️","label":"man golfing: medium-light skin tone","tone":2},{"emoji":"🏌🏽‍♂️","label":"man golfing: medium skin tone","tone":3},{"emoji":"🏌🏾‍♂️","label":"man golfing: medium-dark skin tone","tone":4},{"emoji":"🏌🏿‍♂️","label":"man golfing: dark skin tone","tone":5}]},{"emoji":"🏌️‍♀️","label":"woman golfing","tone":0,"skins":[{"emoji":"🏌🏻‍♀️","label":"woman golfing: light skin tone","tone":1},{"emoji":"🏌🏼‍♀️","label":"woman golfing: medium-light skin tone","tone":2},{"emoji":"🏌🏽‍♀️","label":"woman golfing: medium skin tone","tone":3},{"emoji":"🏌🏾‍♀️","label":"woman golfing: medium-dark skin tone","tone":4},{"emoji":"🏌🏿‍♀️","label":"woman golfing: dark skin tone","tone":5}]},{"emoji":"🏄️","label":"person surfing","tone":0,"skins":[{"emoji":"🏄🏻","label":"person surfing: light skin tone","tone":1},{"emoji":"🏄🏼","label":"person surfing: medium-light skin tone","tone":2},{"emoji":"🏄🏽","label":"person surfing: medium skin tone","tone":3},{"emoji":"🏄🏾","label":"person surfing: medium-dark skin tone","tone":4},{"emoji":"🏄🏿","label":"person surfing: dark skin tone","tone":5}]},{"emoji":"🏄‍♂️","label":"man surfing","tone":0,"skins":[{"emoji":"🏄🏻‍♂️","label":"man surfing: light skin tone","tone":1},{"emoji":"🏄🏼‍♂️","label":"man surfing: medium-light skin tone","tone":2},{"emoji":"🏄🏽‍♂️","label":"man surfing: medium skin tone","tone":3},{"emoji":"🏄🏾‍♂️","label":"man surfing: medium-dark skin tone","tone":4},{"emoji":"🏄🏿‍♂️","label":"man surfing: dark skin tone","tone":5}]},{"emoji":"🏄‍♀️","label":"woman surfing","tone":0,"skins":[{"emoji":"🏄🏻‍♀️","label":"woman surfing: light skin tone","tone":1},{"emoji":"🏄🏼‍♀️","label":"woman surfing: medium-light skin tone","tone":2},{"emoji":"🏄🏽‍♀️","label":"woman surfing: medium skin tone","tone":3},{"emoji":"🏄🏾‍♀️","label":"woman surfing: medium-dark skin tone","tone":4},{"emoji":"🏄🏿‍♀️","label":"woman surfing: dark skin tone","tone":5}]},{"emoji":"🚣","label":"person rowing boat","tone":0,"skins":[{"emoji":"🚣🏻","label":"person rowing boat: light skin tone","tone":1},{"emoji":"🚣🏼","label":"person rowing boat: medium-light skin tone","tone":2},{"emoji":"🚣🏽","label":"person rowing boat: medium skin tone","tone":3},{"emoji":"🚣🏾","label":"person rowing boat: medium-dark skin tone","tone":4},{"emoji":"🚣🏿","label":"person rowing boat: dark skin tone","tone":5}]},{"emoji":"🚣‍♂️","label":"man rowing boat","tone":0,"skins":[{"emoji":"🚣🏻‍♂️","label":"man rowing boat: light skin tone","tone":1},{"emoji":"🚣🏼‍♂️","label":"man rowing boat: medium-light skin tone","tone":2},{"emoji":"🚣🏽‍♂️","label":"man rowing boat: medium skin tone","tone":3},{"emoji":"🚣🏾‍♂️","label":"man rowing boat: medium-dark skin tone","tone":4},{"emoji":"🚣🏿‍♂️","label":"man rowing boat: dark skin tone","tone":5}]},{"emoji":"🚣‍♀️","label":"woman rowing boat","tone":0,"skins":[{"emoji":"🚣🏻‍♀️","label":"woman rowing boat: light skin tone","tone":1},{"emoji":"🚣🏼‍♀️","label":"woman rowing boat: medium-light skin tone","tone":2},{"emoji":"🚣🏽‍♀️","label":"woman rowing boat: medium skin tone","tone":3},{"emoji":"🚣🏾‍♀️","label":"woman rowing boat: medium-dark skin tone","tone":4},{"emoji":"🚣🏿‍♀️","label":"woman rowing boat: dark skin tone","tone":5}]},{"emoji":"🏊️","label":"person swimming","tone":0,"skins":[{"emoji":"🏊🏻","label":"person swimming: light skin tone","tone":1},{"emoji":"🏊🏼","label":"person swimming: medium-light skin tone","tone":2},{"emoji":"🏊🏽","label":"person swimming: medium skin tone","tone":3},{"emoji":"🏊🏾","label":"person swimming: medium-dark skin tone","tone":4},{"emoji":"🏊🏿","label":"person swimming: dark skin tone","tone":5}]},{"emoji":"🏊‍♂️","label":"man swimming","tone":0,"skins":[{"emoji":"🏊🏻‍♂️","label":"man swimming: light skin tone","tone":1},{"emoji":"🏊🏼‍♂️","label":"man swimming: medium-light skin tone","tone":2},{"emoji":"🏊🏽‍♂️","label":"man swimming: medium skin tone","tone":3},{"emoji":"🏊🏾‍♂️","label":"man swimming: medium-dark skin tone","tone":4},{"emoji":"🏊🏿‍♂️","label":"man swimming: dark skin tone","tone":5}]},{"emoji":"🏊‍♀️","label":"woman swimming","tone":0,"skins":[{"emoji":"🏊🏻‍♀️","label":"woman swimming: light skin tone","tone":1},{"emoji":"🏊🏼‍♀️","label":"woman swimming: medium-light skin tone","tone":2},{"emoji":"🏊🏽‍♀️","label":"woman swimming: medium skin tone","tone":3},{"emoji":"🏊🏾‍♀️","label":"woman swimming: medium-dark skin tone","tone":4},{"emoji":"🏊🏿‍♀️","label":"woman swimming: dark skin tone","tone":5}]},{"emoji":"⛹️","label":"person bouncing ball","tone":0,"skins":[{"emoji":"⛹🏻","label":"person bouncing ball: light skin tone","tone":1},{"emoji":"⛹🏼","label":"person bouncing ball: medium-light skin tone","tone":2},{"emoji":"⛹🏽","label":"person bouncing ball: medium skin tone","tone":3},{"emoji":"⛹🏾","label":"person bouncing ball: medium-dark skin tone","tone":4},{"emoji":"⛹🏿","label":"person bouncing ball: dark skin tone","tone":5}]},{"emoji":"⛹️‍♂️","label":"man bouncing ball","tone":0,"skins":[{"emoji":"⛹🏻‍♂️","label":"man bouncing ball: light skin tone","tone":1},{"emoji":"⛹🏼‍♂️","label":"man bouncing ball: medium-light skin tone","tone":2},{"emoji":"⛹🏽‍♂️","label":"man bouncing ball: medium skin tone","tone":3},{"emoji":"⛹🏾‍♂️","label":"man bouncing ball: medium-dark skin tone","tone":4},{"emoji":"⛹🏿‍♂️","label":"man bouncing ball: dark skin tone","tone":5}]},{"emoji":"⛹️‍♀️","label":"woman bouncing ball","tone":0,"skins":[{"emoji":"⛹🏻‍♀️","label":"woman bouncing ball: light skin tone","tone":1},{"emoji":"⛹🏼‍♀️","label":"woman bouncing ball: medium-light skin tone","tone":2},{"emoji":"⛹🏽‍♀️","label":"woman bouncing ball: medium skin tone","tone":3},{"emoji":"⛹🏾‍♀️","label":"woman bouncing ball: medium-dark skin tone","tone":4},{"emoji":"⛹🏿‍♀️","label":"woman bouncing ball: dark skin tone","tone":5}]},{"emoji":"🏋️","label":"person lifting weights","tone":0,"skins":[{"emoji":"🏋🏻","label":"person lifting weights: light skin tone","tone":1},{"emoji":"🏋🏼","label":"person lifting weights: medium-light skin tone","tone":2},{"emoji":"🏋🏽","label":"person lifting weights: medium skin tone","tone":3},{"emoji":"🏋🏾","label":"person lifting weights: medium-dark skin tone","tone":4},{"emoji":"🏋🏿","label":"person lifting weights: dark skin tone","tone":5}]},{"emoji":"🏋️‍♂️","label":"man lifting weights","tone":0,"skins":[{"emoji":"🏋🏻‍♂️","label":"man lifting weights: light skin tone","tone":1},{"emoji":"🏋🏼‍♂️","label":"man lifting weights: medium-light skin tone","tone":2},{"emoji":"🏋🏽‍♂️","label":"man lifting weights: medium skin tone","tone":3},{"emoji":"🏋🏾‍♂️","label":"man lifting weights: medium-dark skin tone","tone":4},{"emoji":"🏋🏿‍♂️","label":"man lifting weights: dark skin tone","tone":5}]},{"emoji":"🏋️‍♀️","label":"woman lifting weights","tone":0,"skins":[{"emoji":"🏋🏻‍♀️","label":"woman lifting weights: light skin tone","tone":1},{"emoji":"🏋🏼‍♀️","label":"woman lifting weights: medium-light skin tone","tone":2},{"emoji":"🏋🏽‍♀️","label":"woman lifting weights: medium skin tone","tone":3},{"emoji":"🏋🏾‍♀️","label":"woman lifting weights: medium-dark skin tone","tone":4},{"emoji":"🏋🏿‍♀️","label":"woman lifting weights: dark skin tone","tone":5}]},{"emoji":"🚴","label":"person biking","tone":0,"skins":[{"emoji":"🚴🏻","label":"person biking: light skin tone","tone":1},{"emoji":"🚴🏼","label":"person biking: medium-light skin tone","tone":2},{"emoji":"🚴🏽","label":"person biking: medium skin tone","tone":3},{"emoji":"🚴🏾","label":"person biking: medium-dark skin tone","tone":4},{"emoji":"🚴🏿","label":"person biking: dark skin tone","tone":5}]},{"emoji":"🚴‍♂️","label":"man biking","tone":0,"skins":[{"emoji":"🚴🏻‍♂️","label":"man biking: light skin tone","tone":1},{"emoji":"🚴🏼‍♂️","label":"man biking: medium-light skin tone","tone":2},{"emoji":"🚴🏽‍♂️","label":"man biking: medium skin tone","tone":3},{"emoji":"🚴🏾‍♂️","label":"man biking: medium-dark skin tone","tone":4},{"emoji":"🚴🏿‍♂️","label":"man biking: dark skin tone","tone":5}]},{"emoji":"🚴‍♀️","label":"woman biking","tone":0,"skins":[{"emoji":"🚴🏻‍♀️","label":"woman biking: light skin tone","tone":1},{"emoji":"🚴🏼‍♀️","label":"woman biking: medium-light skin tone","tone":2},{"emoji":"🚴🏽‍♀️","label":"woman biking: medium skin tone","tone":3},{"emoji":"🚴🏾‍♀️","label":"woman biking: medium-dark skin tone","tone":4},{"emoji":"🚴🏿‍♀️","label":"woman biking: dark skin tone","tone":5}]},{"emoji":"🚵","label":"person mountain biking","tone":0,"skins":[{"emoji":"🚵🏻","label":"person mountain biking: light skin tone","tone":1},{"emoji":"🚵🏼","label":"person mountain biking: medium-light skin tone","tone":2},{"emoji":"🚵🏽","label":"person mountain biking: medium skin tone","tone":3},{"emoji":"🚵🏾","label":"person mountain biking: medium-dark skin tone","tone":4},{"emoji":"🚵🏿","label":"person mountain biking: dark skin tone","tone":5}]},{"emoji":"🚵‍♂️","label":"man mountain biking","tone":0,"skins":[{"emoji":"🚵🏻‍♂️","label":"man mountain biking: light skin tone","tone":1},{"emoji":"🚵🏼‍♂️","label":"man mountain biking: medium-light skin tone","tone":2},{"emoji":"🚵🏽‍♂️","label":"man mountain biking: medium skin tone","tone":3},{"emoji":"🚵🏾‍♂️","label":"man mountain biking: medium-dark skin tone","tone":4},{"emoji":"🚵🏿‍♂️","label":"man mountain biking: dark skin tone","tone":5}]},{"emoji":"🚵‍♀️","label":"woman mountain biking","tone":0,"skins":[{"emoji":"🚵🏻‍♀️","label":"woman mountain biking: light skin tone","tone":1},{"emoji":"🚵🏼‍♀️","label":"woman mountain biking: medium-light skin tone","tone":2},{"emoji":"🚵🏽‍♀️","label":"woman mountain biking: medium skin tone","tone":3},{"emoji":"🚵🏾‍♀️","label":"woman mountain biking: medium-dark skin tone","tone":4},{"emoji":"🚵🏿‍♀️","label":"woman mountain biking: dark skin tone","tone":5}]},{"emoji":"🤸","label":"person cartwheeling","tone":0,"skins":[{"emoji":"🤸🏻","label":"person cartwheeling: light skin tone","tone":1},{"emoji":"🤸🏼","label":"person cartwheeling: medium-light skin tone","tone":2},{"emoji":"🤸🏽","label":"person cartwheeling: medium skin tone","tone":3},{"emoji":"🤸🏾","label":"person cartwheeling: medium-dark skin tone","tone":4},{"emoji":"🤸🏿","label":"person cartwheeling: dark skin tone","tone":5}]},{"emoji":"🤸‍♂️","label":"man cartwheeling","tone":0,"skins":[{"emoji":"🤸🏻‍♂️","label":"man cartwheeling: light skin tone","tone":1},{"emoji":"🤸🏼‍♂️","label":"man cartwheeling: medium-light skin tone","tone":2},{"emoji":"🤸🏽‍♂️","label":"man cartwheeling: medium skin tone","tone":3},{"emoji":"🤸🏾‍♂️","label":"man cartwheeling: medium-dark skin tone","tone":4},{"emoji":"🤸🏿‍♂️","label":"man cartwheeling: dark skin tone","tone":5}]},{"emoji":"🤸‍♀️","label":"woman cartwheeling","tone":0,"skins":[{"emoji":"🤸🏻‍♀️","label":"woman cartwheeling: light skin tone","tone":1},{"emoji":"🤸🏼‍♀️","label":"woman cartwheeling: medium-light skin tone","tone":2},{"emoji":"🤸🏽‍♀️","label":"woman cartwheeling: medium skin tone","tone":3},{"emoji":"🤸🏾‍♀️","label":"woman cartwheeling: medium-dark skin tone","tone":4},{"emoji":"🤸🏿‍♀️","label":"woman cartwheeling: dark skin tone","tone":5}]},{"emoji":"🤼","label":"people wrestling","tone":0},{"emoji":"🤼‍♂️","label":"men wrestling","tone":0},{"emoji":"🤼‍♀️","label":"women wrestling","tone":0},{"emoji":"🤽","label":"person playing water polo","tone":0,"skins":[{"emoji":"🤽🏻","label":"person playing water polo: light skin tone","tone":1},{"emoji":"🤽🏼","label":"person playing water polo: medium-light skin tone","tone":2},{"emoji":"🤽🏽","label":"person playing water polo: medium skin tone","tone":3},{"emoji":"🤽🏾","label":"person playing water polo: medium-dark skin tone","tone":4},{"emoji":"🤽🏿","label":"person playing water polo: dark skin tone","tone":5}]},{"emoji":"🤽‍♂️","label":"man playing water polo","tone":0,"skins":[{"emoji":"🤽🏻‍♂️","label":"man playing water polo: light skin tone","tone":1},{"emoji":"🤽🏼‍♂️","label":"man playing water polo: medium-light skin tone","tone":2},{"emoji":"🤽🏽‍♂️","label":"man playing water polo: medium skin tone","tone":3},{"emoji":"🤽🏾‍♂️","label":"man playing water polo: medium-dark skin tone","tone":4},{"emoji":"🤽🏿‍♂️","label":"man playing water polo: dark skin tone","tone":5}]},{"emoji":"🤽‍♀️","label":"woman playing water polo","tone":0,"skins":[{"emoji":"🤽🏻‍♀️","label":"woman playing water polo: light skin tone","tone":1},{"emoji":"🤽🏼‍♀️","label":"woman playing water polo: medium-light skin tone","tone":2},{"emoji":"🤽🏽‍♀️","label":"woman playing water polo: medium skin tone","tone":3},{"emoji":"🤽🏾‍♀️","label":"woman playing water polo: medium-dark skin tone","tone":4},{"emoji":"🤽🏿‍♀️","label":"woman playing water polo: dark skin tone","tone":5}]},{"emoji":"🤾","label":"person playing handball","tone":0,"skins":[{"emoji":"🤾🏻","label":"person playing handball: light skin tone","tone":1},{"emoji":"🤾🏼","label":"person playing handball: medium-light skin tone","tone":2},{"emoji":"🤾🏽","label":"person playing handball: medium skin tone","tone":3},{"emoji":"🤾🏾","label":"person playing handball: medium-dark skin tone","tone":4},{"emoji":"🤾🏿","label":"person playing handball: dark skin tone","tone":5}]},{"emoji":"🤾‍♂️","label":"man playing handball","tone":0,"skins":[{"emoji":"🤾🏻‍♂️","label":"man playing handball: light skin tone","tone":1},{"emoji":"🤾🏼‍♂️","label":"man playing handball: medium-light skin tone","tone":2},{"emoji":"🤾🏽‍♂️","label":"man playing handball: medium skin tone","tone":3},{"emoji":"🤾🏾‍♂️","label":"man playing handball: medium-dark skin tone","tone":4},{"emoji":"🤾🏿‍♂️","label":"man playing handball: dark skin tone","tone":5}]},{"emoji":"🤾‍♀️","label":"woman playing handball","tone":0,"skins":[{"emoji":"🤾🏻‍♀️","label":"woman playing handball: light skin tone","tone":1},{"emoji":"🤾🏼‍♀️","label":"woman playing handball: medium-light skin tone","tone":2},{"emoji":"🤾🏽‍♀️","label":"woman playing handball: medium skin tone","tone":3},{"emoji":"🤾🏾‍♀️","label":"woman playing handball: medium-dark skin tone","tone":4},{"emoji":"🤾🏿‍♀️","label":"woman playing handball: dark skin tone","tone":5}]},{"emoji":"🤹","label":"person juggling","tone":0,"skins":[{"emoji":"🤹🏻","label":"person juggling: light skin tone","tone":1},{"emoji":"🤹🏼","label":"person juggling: medium-light skin tone","tone":2},{"emoji":"🤹🏽","label":"person juggling: medium skin tone","tone":3},{"emoji":"🤹🏾","label":"person juggling: medium-dark skin tone","tone":4},{"emoji":"🤹🏿","label":"person juggling: dark skin tone","tone":5}]},{"emoji":"🤹‍♂️","label":"man juggling","tone":0,"skins":[{"emoji":"🤹🏻‍♂️","label":"man juggling: light skin tone","tone":1},{"emoji":"🤹🏼‍♂️","label":"man juggling: medium-light skin tone","tone":2},{"emoji":"🤹🏽‍♂️","label":"man juggling: medium skin tone","tone":3},{"emoji":"🤹🏾‍♂️","label":"man juggling: medium-dark skin tone","tone":4},{"emoji":"🤹🏿‍♂️","label":"man juggling: dark skin tone","tone":5}]},{"emoji":"🤹‍♀️","label":"woman juggling","tone":0,"skins":[{"emoji":"🤹🏻‍♀️","label":"woman juggling: light skin tone","tone":1},{"emoji":"🤹🏼‍♀️","label":"woman juggling: medium-light skin tone","tone":2},{"emoji":"🤹🏽‍♀️","label":"woman juggling: medium skin tone","tone":3},{"emoji":"🤹🏾‍♀️","label":"woman juggling: medium-dark skin tone","tone":4},{"emoji":"🤹🏿‍♀️","label":"woman juggling: dark skin tone","tone":5}]},{"emoji":"🧘","label":"person in lotus position","tone":0,"skins":[{"emoji":"🧘🏻","label":"person in lotus position: light skin tone","tone":1},{"emoji":"🧘🏼","label":"person in lotus position: medium-light skin tone","tone":2},{"emoji":"🧘🏽","label":"person in lotus position: medium skin tone","tone":3},{"emoji":"🧘🏾","label":"person in lotus position: medium-dark skin tone","tone":4},{"emoji":"🧘🏿","label":"person in lotus position: dark skin tone","tone":5}]},{"emoji":"🧘‍♂️","label":"man in lotus position","tone":0,"skins":[{"emoji":"🧘🏻‍♂️","label":"man in lotus position: light skin tone","tone":1},{"emoji":"🧘🏼‍♂️","label":"man in lotus position: medium-light skin tone","tone":2},{"emoji":"🧘🏽‍♂️","label":"man in lotus position: medium skin tone","tone":3},{"emoji":"🧘🏾‍♂️","label":"man in lotus position: medium-dark skin tone","tone":4},{"emoji":"🧘🏿‍♂️","label":"man in lotus position: dark skin tone","tone":5}]},{"emoji":"🧘‍♀️","label":"woman in lotus position","tone":0,"skins":[{"emoji":"🧘🏻‍♀️","label":"woman in lotus position: light skin tone","tone":1},{"emoji":"🧘🏼‍♀️","label":"woman in lotus position: medium-light skin tone","tone":2},{"emoji":"🧘🏽‍♀️","label":"woman in lotus position: medium skin tone","tone":3},{"emoji":"🧘🏾‍♀️","label":"woman in lotus position: medium-dark skin tone","tone":4},{"emoji":"🧘🏿‍♀️","label":"woman in lotus position: dark skin tone","tone":5}]},{"emoji":"🛀","label":"person taking bath","tone":0,"skins":[{"emoji":"🛀🏻","label":"person taking bath: light skin tone","tone":1},{"emoji":"🛀🏼","label":"person taking bath: medium-light skin tone","tone":2},{"emoji":"🛀🏽","label":"person taking bath: medium skin tone","tone":3},{"emoji":"🛀🏾","label":"person taking bath: medium-dark skin tone","tone":4},{"emoji":"🛀🏿","label":"person taking bath: dark skin tone","tone":5}]},{"emoji":"🛌","label":"person in bed","tone":0,"skins":[{"emoji":"🛌🏻","label":"person in bed: light skin tone","tone":1},{"emoji":"🛌🏼","label":"person in bed: medium-light skin tone","tone":2},{"emoji":"🛌🏽","label":"person in bed: medium skin tone","tone":3},{"emoji":"🛌🏾","label":"person in bed: medium-dark skin tone","tone":4},{"emoji":"🛌🏿","label":"person in bed: dark skin tone","tone":5}]},{"emoji":"🧑‍🤝‍🧑","label":"people holding hands","tone":0,"skins":[{"emoji":"🧑🏻‍🤝‍🧑🏻","label":"people holding hands: light skin tone","tone":1},{"emoji":"🧑🏻‍🤝‍🧑🏼","label":"people holding hands: light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"🧑🏻‍🤝‍🧑🏽","label":"people holding hands: light skin tone, medium skin tone","tone":[1,3]},{"emoji":"🧑🏻‍🤝‍🧑🏾","label":"people holding hands: light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"🧑🏻‍🤝‍🧑🏿","label":"people holding hands: light skin tone, dark skin tone","tone":[1,5]},{"emoji":"🧑🏼‍🤝‍🧑🏻","label":"people holding hands: medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"🧑🏼‍🤝‍🧑🏼","label":"people holding hands: medium-light skin tone","tone":2},{"emoji":"🧑🏼‍🤝‍🧑🏽","label":"people holding hands: medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"🧑🏼‍🤝‍🧑🏾","label":"people holding hands: medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"🧑🏼‍🤝‍🧑🏿","label":"people holding hands: medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"🧑🏽‍🤝‍🧑🏻","label":"people holding hands: medium skin tone, light skin tone","tone":[3,1]},{"emoji":"🧑🏽‍🤝‍🧑🏼","label":"people holding hands: medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"🧑🏽‍🤝‍🧑🏽","label":"people holding hands: medium skin tone","tone":3},{"emoji":"🧑🏽‍🤝‍🧑🏾","label":"people holding hands: medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"🧑🏽‍🤝‍🧑🏿","label":"people holding hands: medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"🧑🏾‍🤝‍🧑🏻","label":"people holding hands: medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"🧑🏾‍🤝‍🧑🏼","label":"people holding hands: medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"🧑🏾‍🤝‍🧑🏽","label":"people holding hands: medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"🧑🏾‍🤝‍🧑🏾","label":"people holding hands: medium-dark skin tone","tone":4},{"emoji":"🧑🏾‍🤝‍🧑🏿","label":"people holding hands: medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"🧑🏿‍🤝‍🧑🏻","label":"people holding hands: dark skin tone, light skin tone","tone":[5,1]},{"emoji":"🧑🏿‍🤝‍🧑🏼","label":"people holding hands: dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"🧑🏿‍🤝‍🧑🏽","label":"people holding hands: dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"🧑🏿‍🤝‍🧑🏾","label":"people holding hands: dark skin tone, medium-dark skin tone","tone":[5,4]},{"emoji":"🧑🏿‍🤝‍🧑🏿","label":"people holding hands: dark skin tone","tone":5}]},{"emoji":"👭","label":"women holding hands","tone":0,"skins":[{"emoji":"👭🏻","label":"women holding hands: light skin tone","tone":1},{"emoji":"👭🏼","label":"women holding hands: medium-light skin tone","tone":2},{"emoji":"👭🏽","label":"women holding hands: medium skin tone","tone":3},{"emoji":"👭🏾","label":"women holding hands: medium-dark skin tone","tone":4},{"emoji":"👭🏿","label":"women holding hands: dark skin tone","tone":5},{"emoji":"👩🏻‍🤝‍👩🏼","label":"women holding hands: light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"👩🏻‍🤝‍👩🏽","label":"women holding hands: light skin tone, medium skin tone","tone":[1,3]},{"emoji":"👩🏻‍🤝‍👩🏾","label":"women holding hands: light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"👩🏻‍🤝‍👩🏿","label":"women holding hands: light skin tone, dark skin tone","tone":[1,5]},{"emoji":"👩🏼‍🤝‍👩🏻","label":"women holding hands: medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"👩🏼‍🤝‍👩🏽","label":"women holding hands: medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"👩🏼‍🤝‍👩🏾","label":"women holding hands: medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"👩🏼‍🤝‍👩🏿","label":"women holding hands: medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"👩🏽‍🤝‍👩🏻","label":"women holding hands: medium skin tone, light skin tone","tone":[3,1]},{"emoji":"👩🏽‍🤝‍👩🏼","label":"women holding hands: medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"👩🏽‍🤝‍👩🏾","label":"women holding hands: medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"👩🏽‍🤝‍👩🏿","label":"women holding hands: medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"👩🏾‍🤝‍👩🏻","label":"women holding hands: medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"👩🏾‍🤝‍👩🏼","label":"women holding hands: medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"👩🏾‍🤝‍👩🏽","label":"women holding hands: medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"👩🏾‍🤝‍👩🏿","label":"women holding hands: medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"👩🏿‍🤝‍👩🏻","label":"women holding hands: dark skin tone, light skin tone","tone":[5,1]},{"emoji":"👩🏿‍🤝‍👩🏼","label":"women holding hands: dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"👩🏿‍🤝‍👩🏽","label":"women holding hands: dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"👩🏿‍🤝‍👩🏾","label":"women holding hands: dark skin tone, medium-dark skin tone","tone":[5,4]}]},{"emoji":"👫","label":"woman and man holding hands","tone":0,"skins":[{"emoji":"👫🏻","label":"woman and man holding hands: light skin tone","tone":1},{"emoji":"👫🏼","label":"woman and man holding hands: medium-light skin tone","tone":2},{"emoji":"👫🏽","label":"woman and man holding hands: medium skin tone","tone":3},{"emoji":"👫🏾","label":"woman and man holding hands: medium-dark skin tone","tone":4},{"emoji":"👫🏿","label":"woman and man holding hands: dark skin tone","tone":5},{"emoji":"👩🏻‍🤝‍👨🏼","label":"woman and man holding hands: light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"👩🏻‍🤝‍👨🏽","label":"woman and man holding hands: light skin tone, medium skin tone","tone":[1,3]},{"emoji":"👩🏻‍🤝‍👨🏾","label":"woman and man holding hands: light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"👩🏻‍🤝‍👨🏿","label":"woman and man holding hands: light skin tone, dark skin tone","tone":[1,5]},{"emoji":"👩🏼‍🤝‍👨🏻","label":"woman and man holding hands: medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"👩🏼‍🤝‍👨🏽","label":"woman and man holding hands: medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"👩🏼‍🤝‍👨🏾","label":"woman and man holding hands: medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"👩🏼‍🤝‍👨🏿","label":"woman and man holding hands: medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"👩🏽‍🤝‍👨🏻","label":"woman and man holding hands: medium skin tone, light skin tone","tone":[3,1]},{"emoji":"👩🏽‍🤝‍👨🏼","label":"woman and man holding hands: medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"👩🏽‍🤝‍👨🏾","label":"woman and man holding hands: medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"👩🏽‍🤝‍👨🏿","label":"woman and man holding hands: medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"👩🏾‍🤝‍👨🏻","label":"woman and man holding hands: medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"👩🏾‍🤝‍👨🏼","label":"woman and man holding hands: medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"👩🏾‍🤝‍👨🏽","label":"woman and man holding hands: medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"👩🏾‍🤝‍👨🏿","label":"woman and man holding hands: medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"👩🏿‍🤝‍👨🏻","label":"woman and man holding hands: dark skin tone, light skin tone","tone":[5,1]},{"emoji":"👩🏿‍🤝‍👨🏼","label":"woman and man holding hands: dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"👩🏿‍🤝‍👨🏽","label":"woman and man holding hands: dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"👩🏿‍🤝‍👨🏾","label":"woman and man holding hands: dark skin tone, medium-dark skin tone","tone":[5,4]}]},{"emoji":"👬","label":"men holding hands","tone":0,"skins":[{"emoji":"👬🏻","label":"men holding hands: light skin tone","tone":1},{"emoji":"👬🏼","label":"men holding hands: medium-light skin tone","tone":2},{"emoji":"👬🏽","label":"men holding hands: medium skin tone","tone":3},{"emoji":"👬🏾","label":"men holding hands: medium-dark skin tone","tone":4},{"emoji":"👬🏿","label":"men holding hands: dark skin tone","tone":5},{"emoji":"👨🏻‍🤝‍👨🏼","label":"men holding hands: light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"👨🏻‍🤝‍👨🏽","label":"men holding hands: light skin tone, medium skin tone","tone":[1,3]},{"emoji":"👨🏻‍🤝‍👨🏾","label":"men holding hands: light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"👨🏻‍🤝‍👨🏿","label":"men holding hands: light skin tone, dark skin tone","tone":[1,5]},{"emoji":"👨🏼‍🤝‍👨🏻","label":"men holding hands: medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"👨🏼‍🤝‍👨🏽","label":"men holding hands: medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"👨🏼‍🤝‍👨🏾","label":"men holding hands: medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"👨🏼‍🤝‍👨🏿","label":"men holding hands: medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"👨🏽‍🤝‍👨🏻","label":"men holding hands: medium skin tone, light skin tone","tone":[3,1]},{"emoji":"👨🏽‍🤝‍👨🏼","label":"men holding hands: medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"👨🏽‍🤝‍👨🏾","label":"men holding hands: medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"👨🏽‍🤝‍👨🏿","label":"men holding hands: medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"👨🏾‍🤝‍👨🏻","label":"men holding hands: medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"👨🏾‍🤝‍👨🏼","label":"men holding hands: medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"👨🏾‍🤝‍👨🏽","label":"men holding hands: medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"👨🏾‍🤝‍👨🏿","label":"men holding hands: medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"👨🏿‍🤝‍👨🏻","label":"men holding hands: dark skin tone, light skin tone","tone":[5,1]},{"emoji":"👨🏿‍🤝‍👨🏼","label":"men holding hands: dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"👨🏿‍🤝‍👨🏽","label":"men holding hands: dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"👨🏿‍🤝‍👨🏾","label":"men holding hands: dark skin tone, medium-dark skin tone","tone":[5,4]}]},{"emoji":"💏","label":"kiss","tone":0,"skins":[{"emoji":"💏🏻","label":"kiss: light skin tone","tone":1},{"emoji":"💏🏼","label":"kiss: medium-light skin tone","tone":2},{"emoji":"💏🏽","label":"kiss: medium skin tone","tone":3},{"emoji":"💏🏾","label":"kiss: medium-dark skin tone","tone":4},{"emoji":"💏🏿","label":"kiss: dark skin tone","tone":5},{"emoji":"🧑🏻‍❤️‍💋‍🧑🏼","label":"kiss: person, person, light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"🧑🏻‍❤️‍💋‍🧑🏽","label":"kiss: person, person, light skin tone, medium skin tone","tone":[1,3]},{"emoji":"🧑🏻‍❤️‍💋‍🧑🏾","label":"kiss: person, person, light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"🧑🏻‍❤️‍💋‍🧑🏿","label":"kiss: person, person, light skin tone, dark skin tone","tone":[1,5]},{"emoji":"🧑🏼‍❤️‍💋‍🧑🏻","label":"kiss: person, person, medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"🧑🏼‍❤️‍💋‍🧑🏽","label":"kiss: person, person, medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"🧑🏼‍❤️‍💋‍🧑🏾","label":"kiss: person, person, medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"🧑🏼‍❤️‍💋‍🧑🏿","label":"kiss: person, person, medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"🧑🏽‍❤️‍💋‍🧑🏻","label":"kiss: person, person, medium skin tone, light skin tone","tone":[3,1]},{"emoji":"🧑🏽‍❤️‍💋‍🧑🏼","label":"kiss: person, person, medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"🧑🏽‍❤️‍💋‍🧑🏾","label":"kiss: person, person, medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"🧑🏽‍❤️‍💋‍🧑🏿","label":"kiss: person, person, medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"🧑🏾‍❤️‍💋‍🧑🏻","label":"kiss: person, person, medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"🧑🏾‍❤️‍💋‍🧑🏼","label":"kiss: person, person, medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"🧑🏾‍❤️‍💋‍🧑🏽","label":"kiss: person, person, medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"🧑🏾‍❤️‍💋‍🧑🏿","label":"kiss: person, person, medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"🧑🏿‍❤️‍💋‍🧑🏻","label":"kiss: person, person, dark skin tone, light skin tone","tone":[5,1]},{"emoji":"🧑🏿‍❤️‍💋‍🧑🏼","label":"kiss: person, person, dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"🧑🏿‍❤️‍💋‍🧑🏽","label":"kiss: person, person, dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"🧑🏿‍❤️‍💋‍🧑🏾","label":"kiss: person, person, dark skin tone, medium-dark skin tone","tone":[5,4]}]},{"emoji":"👩‍❤️‍💋‍👨","label":"kiss: woman, man","tone":0,"skins":[{"emoji":"👩🏻‍❤️‍💋‍👨🏻","label":"kiss: woman, man, light skin tone","tone":1},{"emoji":"👩🏻‍❤️‍💋‍👨🏼","label":"kiss: woman, man, light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"👩🏻‍❤️‍💋‍👨🏽","label":"kiss: woman, man, light skin tone, medium skin tone","tone":[1,3]},{"emoji":"👩🏻‍❤️‍💋‍👨🏾","label":"kiss: woman, man, light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"👩🏻‍❤️‍💋‍👨🏿","label":"kiss: woman, man, light skin tone, dark skin tone","tone":[1,5]},{"emoji":"👩🏼‍❤️‍💋‍👨🏻","label":"kiss: woman, man, medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"👩🏼‍❤️‍💋‍👨🏼","label":"kiss: woman, man, medium-light skin tone","tone":2},{"emoji":"👩🏼‍❤️‍💋‍👨🏽","label":"kiss: woman, man, medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"👩🏼‍❤️‍💋‍👨🏾","label":"kiss: woman, man, medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"👩🏼‍❤️‍💋‍👨🏿","label":"kiss: woman, man, medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"👩🏽‍❤️‍💋‍👨🏻","label":"kiss: woman, man, medium skin tone, light skin tone","tone":[3,1]},{"emoji":"👩🏽‍❤️‍💋‍👨🏼","label":"kiss: woman, man, medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"👩🏽‍❤️‍💋‍👨🏽","label":"kiss: woman, man, medium skin tone","tone":3},{"emoji":"👩🏽‍❤️‍💋‍👨🏾","label":"kiss: woman, man, medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"👩🏽‍❤️‍💋‍👨🏿","label":"kiss: woman, man, medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"👩🏾‍❤️‍💋‍👨🏻","label":"kiss: woman, man, medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"👩🏾‍❤️‍💋‍👨🏼","label":"kiss: woman, man, medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"👩🏾‍❤️‍💋‍👨🏽","label":"kiss: woman, man, medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"👩🏾‍❤️‍💋‍👨🏾","label":"kiss: woman, man, medium-dark skin tone","tone":4},{"emoji":"👩🏾‍❤️‍💋‍👨🏿","label":"kiss: woman, man, medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"👩🏿‍❤️‍💋‍👨🏻","label":"kiss: woman, man, dark skin tone, light skin tone","tone":[5,1]},{"emoji":"👩🏿‍❤️‍💋‍👨🏼","label":"kiss: woman, man, dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"👩🏿‍❤️‍💋‍👨🏽","label":"kiss: woman, man, dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"👩🏿‍❤️‍💋‍👨🏾","label":"kiss: woman, man, dark skin tone, medium-dark skin tone","tone":[5,4]},{"emoji":"👩🏿‍❤️‍💋‍👨🏿","label":"kiss: woman, man, dark skin tone","tone":5}]},{"emoji":"👨‍❤️‍💋‍👨","label":"kiss: man, man","tone":0,"skins":[{"emoji":"👨🏻‍❤️‍💋‍👨🏻","label":"kiss: man, man, light skin tone","tone":1},{"emoji":"👨🏻‍❤️‍💋‍👨🏼","label":"kiss: man, man, light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"👨🏻‍❤️‍💋‍👨🏽","label":"kiss: man, man, light skin tone, medium skin tone","tone":[1,3]},{"emoji":"👨🏻‍❤️‍💋‍👨🏾","label":"kiss: man, man, light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"👨🏻‍❤️‍💋‍👨🏿","label":"kiss: man, man, light skin tone, dark skin tone","tone":[1,5]},{"emoji":"👨🏼‍❤️‍💋‍👨🏻","label":"kiss: man, man, medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"👨🏼‍❤️‍💋‍👨🏼","label":"kiss: man, man, medium-light skin tone","tone":2},{"emoji":"👨🏼‍❤️‍💋‍👨🏽","label":"kiss: man, man, medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"👨🏼‍❤️‍💋‍👨🏾","label":"kiss: man, man, medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"👨🏼‍❤️‍💋‍👨🏿","label":"kiss: man, man, medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"👨🏽‍❤️‍💋‍👨🏻","label":"kiss: man, man, medium skin tone, light skin tone","tone":[3,1]},{"emoji":"👨🏽‍❤️‍💋‍👨🏼","label":"kiss: man, man, medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"👨🏽‍❤️‍💋‍👨🏽","label":"kiss: man, man, medium skin tone","tone":3},{"emoji":"👨🏽‍❤️‍💋‍👨🏾","label":"kiss: man, man, medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"👨🏽‍❤️‍💋‍👨🏿","label":"kiss: man, man, medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"👨🏾‍❤️‍💋‍👨🏻","label":"kiss: man, man, medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"👨🏾‍❤️‍💋‍👨🏼","label":"kiss: man, man, medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"👨🏾‍❤️‍💋‍👨🏽","label":"kiss: man, man, medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"👨🏾‍❤️‍💋‍👨🏾","label":"kiss: man, man, medium-dark skin tone","tone":4},{"emoji":"👨🏾‍❤️‍💋‍👨🏿","label":"kiss: man, man, medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"👨🏿‍❤️‍💋‍👨🏻","label":"kiss: man, man, dark skin tone, light skin tone","tone":[5,1]},{"emoji":"👨🏿‍❤️‍💋‍👨🏼","label":"kiss: man, man, dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"👨🏿‍❤️‍💋‍👨🏽","label":"kiss: man, man, dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"👨🏿‍❤️‍💋‍👨🏾","label":"kiss: man, man, dark skin tone, medium-dark skin tone","tone":[5,4]},{"emoji":"👨🏿‍❤️‍💋‍👨🏿","label":"kiss: man, man, dark skin tone","tone":5}]},{"emoji":"👩‍❤️‍💋‍👩","label":"kiss: woman, woman","tone":0,"skins":[{"emoji":"👩🏻‍❤️‍💋‍👩🏻","label":"kiss: woman, woman, light skin tone","tone":1},{"emoji":"👩🏻‍❤️‍💋‍👩🏼","label":"kiss: woman, woman, light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"👩🏻‍❤️‍💋‍👩🏽","label":"kiss: woman, woman, light skin tone, medium skin tone","tone":[1,3]},{"emoji":"👩🏻‍❤️‍💋‍👩🏾","label":"kiss: woman, woman, light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"👩🏻‍❤️‍💋‍👩🏿","label":"kiss: woman, woman, light skin tone, dark skin tone","tone":[1,5]},{"emoji":"👩🏼‍❤️‍💋‍👩🏻","label":"kiss: woman, woman, medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"👩🏼‍❤️‍💋‍👩🏼","label":"kiss: woman, woman, medium-light skin tone","tone":2},{"emoji":"👩🏼‍❤️‍💋‍👩🏽","label":"kiss: woman, woman, medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"👩🏼‍❤️‍💋‍👩🏾","label":"kiss: woman, woman, medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"👩🏼‍❤️‍💋‍👩🏿","label":"kiss: woman, woman, medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"👩🏽‍❤️‍💋‍👩🏻","label":"kiss: woman, woman, medium skin tone, light skin tone","tone":[3,1]},{"emoji":"👩🏽‍❤️‍💋‍👩🏼","label":"kiss: woman, woman, medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"👩🏽‍❤️‍💋‍👩🏽","label":"kiss: woman, woman, medium skin tone","tone":3},{"emoji":"👩🏽‍❤️‍💋‍👩🏾","label":"kiss: woman, woman, medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"👩🏽‍❤️‍💋‍👩🏿","label":"kiss: woman, woman, medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"👩🏾‍❤️‍💋‍👩🏻","label":"kiss: woman, woman, medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"👩🏾‍❤️‍💋‍👩🏼","label":"kiss: woman, woman, medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"👩🏾‍❤️‍💋‍👩🏽","label":"kiss: woman, woman, medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"👩🏾‍❤️‍💋‍👩🏾","label":"kiss: woman, woman, medium-dark skin tone","tone":4},{"emoji":"👩🏾‍❤️‍💋‍👩🏿","label":"kiss: woman, woman, medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"👩🏿‍❤️‍💋‍👩🏻","label":"kiss: woman, woman, dark skin tone, light skin tone","tone":[5,1]},{"emoji":"👩🏿‍❤️‍💋‍👩🏼","label":"kiss: woman, woman, dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"👩🏿‍❤️‍💋‍👩🏽","label":"kiss: woman, woman, dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"👩🏿‍❤️‍💋‍👩🏾","label":"kiss: woman, woman, dark skin tone, medium-dark skin tone","tone":[5,4]},{"emoji":"👩🏿‍❤️‍💋‍👩🏿","label":"kiss: woman, woman, dark skin tone","tone":5}]},{"emoji":"💑","label":"couple with heart","tone":0,"skins":[{"emoji":"💑🏻","label":"couple with heart: light skin tone","tone":1},{"emoji":"💑🏼","label":"couple with heart: medium-light skin tone","tone":2},{"emoji":"💑🏽","label":"couple with heart: medium skin tone","tone":3},{"emoji":"💑🏾","label":"couple with heart: medium-dark skin tone","tone":4},{"emoji":"💑🏿","label":"couple with heart: dark skin tone","tone":5},{"emoji":"🧑🏻‍❤️‍🧑🏼","label":"couple with heart: person, person, light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"🧑🏻‍❤️‍🧑🏽","label":"couple with heart: person, person, light skin tone, medium skin tone","tone":[1,3]},{"emoji":"🧑🏻‍❤️‍🧑🏾","label":"couple with heart: person, person, light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"🧑🏻‍❤️‍🧑🏿","label":"couple with heart: person, person, light skin tone, dark skin tone","tone":[1,5]},{"emoji":"🧑🏼‍❤️‍🧑🏻","label":"couple with heart: person, person, medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"🧑🏼‍❤️‍🧑🏽","label":"couple with heart: person, person, medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"🧑🏼‍❤️‍🧑🏾","label":"couple with heart: person, person, medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"🧑🏼‍❤️‍🧑🏿","label":"couple with heart: person, person, medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"🧑🏽‍❤️‍🧑🏻","label":"couple with heart: person, person, medium skin tone, light skin tone","tone":[3,1]},{"emoji":"🧑🏽‍❤️‍🧑🏼","label":"couple with heart: person, person, medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"🧑🏽‍❤️‍🧑🏾","label":"couple with heart: person, person, medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"🧑🏽‍❤️‍🧑🏿","label":"couple with heart: person, person, medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"🧑🏾‍❤️‍🧑🏻","label":"couple with heart: person, person, medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"🧑🏾‍❤️‍🧑🏼","label":"couple with heart: person, person, medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"🧑🏾‍❤️‍🧑🏽","label":"couple with heart: person, person, medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"🧑🏾‍❤️‍🧑🏿","label":"couple with heart: person, person, medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"🧑🏿‍❤️‍🧑🏻","label":"couple with heart: person, person, dark skin tone, light skin tone","tone":[5,1]},{"emoji":"🧑🏿‍❤️‍🧑🏼","label":"couple with heart: person, person, dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"🧑🏿‍❤️‍🧑🏽","label":"couple with heart: person, person, dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"🧑🏿‍❤️‍🧑🏾","label":"couple with heart: person, person, dark skin tone, medium-dark skin tone","tone":[5,4]}]},{"emoji":"👩‍❤️‍👨","label":"couple with heart: woman, man","tone":0,"skins":[{"emoji":"👩🏻‍❤️‍👨🏻","label":"couple with heart: woman, man, light skin tone","tone":1},{"emoji":"👩🏻‍❤️‍👨🏼","label":"couple with heart: woman, man, light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"👩🏻‍❤️‍👨🏽","label":"couple with heart: woman, man, light skin tone, medium skin tone","tone":[1,3]},{"emoji":"👩🏻‍❤️‍👨🏾","label":"couple with heart: woman, man, light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"👩🏻‍❤️‍👨🏿","label":"couple with heart: woman, man, light skin tone, dark skin tone","tone":[1,5]},{"emoji":"👩🏼‍❤️‍👨🏻","label":"couple with heart: woman, man, medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"👩🏼‍❤️‍👨🏼","label":"couple with heart: woman, man, medium-light skin tone","tone":2},{"emoji":"👩🏼‍❤️‍👨🏽","label":"couple with heart: woman, man, medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"👩🏼‍❤️‍👨🏾","label":"couple with heart: woman, man, medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"👩🏼‍❤️‍👨🏿","label":"couple with heart: woman, man, medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"👩🏽‍❤️‍👨🏻","label":"couple with heart: woman, man, medium skin tone, light skin tone","tone":[3,1]},{"emoji":"👩🏽‍❤️‍👨🏼","label":"couple with heart: woman, man, medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"👩🏽‍❤️‍👨🏽","label":"couple with heart: woman, man, medium skin tone","tone":3},{"emoji":"👩🏽‍❤️‍👨🏾","label":"couple with heart: woman, man, medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"👩🏽‍❤️‍👨🏿","label":"couple with heart: woman, man, medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"👩🏾‍❤️‍👨🏻","label":"couple with heart: woman, man, medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"👩🏾‍❤️‍👨🏼","label":"couple with heart: woman, man, medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"👩🏾‍❤️‍👨🏽","label":"couple with heart: woman, man, medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"👩🏾‍❤️‍👨🏾","label":"couple with heart: woman, man, medium-dark skin tone","tone":4},{"emoji":"👩🏾‍❤️‍👨🏿","label":"couple with heart: woman, man, medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"👩🏿‍❤️‍👨🏻","label":"couple with heart: woman, man, dark skin tone, light skin tone","tone":[5,1]},{"emoji":"👩🏿‍❤️‍👨🏼","label":"couple with heart: woman, man, dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"👩🏿‍❤️‍👨🏽","label":"couple with heart: woman, man, dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"👩🏿‍❤️‍👨🏾","label":"couple with heart: woman, man, dark skin tone, medium-dark skin tone","tone":[5,4]},{"emoji":"👩🏿‍❤️‍👨🏿","label":"couple with heart: woman, man, dark skin tone","tone":5}]},{"emoji":"👨‍❤️‍👨","label":"couple with heart: man, man","tone":0,"skins":[{"emoji":"👨🏻‍❤️‍👨🏻","label":"couple with heart: man, man, light skin tone","tone":1},{"emoji":"👨🏻‍❤️‍👨🏼","label":"couple with heart: man, man, light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"👨🏻‍❤️‍👨🏽","label":"couple with heart: man, man, light skin tone, medium skin tone","tone":[1,3]},{"emoji":"👨🏻‍❤️‍👨🏾","label":"couple with heart: man, man, light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"👨🏻‍❤️‍👨🏿","label":"couple with heart: man, man, light skin tone, dark skin tone","tone":[1,5]},{"emoji":"👨🏼‍❤️‍👨🏻","label":"couple with heart: man, man, medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"👨🏼‍❤️‍👨🏼","label":"couple with heart: man, man, medium-light skin tone","tone":2},{"emoji":"👨🏼‍❤️‍👨🏽","label":"couple with heart: man, man, medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"👨🏼‍❤️‍👨🏾","label":"couple with heart: man, man, medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"👨🏼‍❤️‍👨🏿","label":"couple with heart: man, man, medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"👨🏽‍❤️‍👨🏻","label":"couple with heart: man, man, medium skin tone, light skin tone","tone":[3,1]},{"emoji":"👨🏽‍❤️‍👨🏼","label":"couple with heart: man, man, medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"👨🏽‍❤️‍👨🏽","label":"couple with heart: man, man, medium skin tone","tone":3},{"emoji":"👨🏽‍❤️‍👨🏾","label":"couple with heart: man, man, medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"👨🏽‍❤️‍👨🏿","label":"couple with heart: man, man, medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"👨🏾‍❤️‍👨🏻","label":"couple with heart: man, man, medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"👨🏾‍❤️‍👨🏼","label":"couple with heart: man, man, medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"👨🏾‍❤️‍👨🏽","label":"couple with heart: man, man, medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"👨🏾‍❤️‍👨🏾","label":"couple with heart: man, man, medium-dark skin tone","tone":4},{"emoji":"👨🏾‍❤️‍👨🏿","label":"couple with heart: man, man, medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"👨🏿‍❤️‍👨🏻","label":"couple with heart: man, man, dark skin tone, light skin tone","tone":[5,1]},{"emoji":"👨🏿‍❤️‍👨🏼","label":"couple with heart: man, man, dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"👨🏿‍❤️‍👨🏽","label":"couple with heart: man, man, dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"👨🏿‍❤️‍👨🏾","label":"couple with heart: man, man, dark skin tone, medium-dark skin tone","tone":[5,4]},{"emoji":"👨🏿‍❤️‍👨🏿","label":"couple with heart: man, man, dark skin tone","tone":5}]},{"emoji":"👩‍❤️‍👩","label":"couple with heart: woman, woman","tone":0,"skins":[{"emoji":"👩🏻‍❤️‍👩🏻","label":"couple with heart: woman, woman, light skin tone","tone":1},{"emoji":"👩🏻‍❤️‍👩🏼","label":"couple with heart: woman, woman, light skin tone, medium-light skin tone","tone":[1,2]},{"emoji":"👩🏻‍❤️‍👩🏽","label":"couple with heart: woman, woman, light skin tone, medium skin tone","tone":[1,3]},{"emoji":"👩🏻‍❤️‍👩🏾","label":"couple with heart: woman, woman, light skin tone, medium-dark skin tone","tone":[1,4]},{"emoji":"👩🏻‍❤️‍👩🏿","label":"couple with heart: woman, woman, light skin tone, dark skin tone","tone":[1,5]},{"emoji":"👩🏼‍❤️‍👩🏻","label":"couple with heart: woman, woman, medium-light skin tone, light skin tone","tone":[2,1]},{"emoji":"👩🏼‍❤️‍👩🏼","label":"couple with heart: woman, woman, medium-light skin tone","tone":2},{"emoji":"👩🏼‍❤️‍👩🏽","label":"couple with heart: woman, woman, medium-light skin tone, medium skin tone","tone":[2,3]},{"emoji":"👩🏼‍❤️‍👩🏾","label":"couple with heart: woman, woman, medium-light skin tone, medium-dark skin tone","tone":[2,4]},{"emoji":"👩🏼‍❤️‍👩🏿","label":"couple with heart: woman, woman, medium-light skin tone, dark skin tone","tone":[2,5]},{"emoji":"👩🏽‍❤️‍👩🏻","label":"couple with heart: woman, woman, medium skin tone, light skin tone","tone":[3,1]},{"emoji":"👩🏽‍❤️‍👩🏼","label":"couple with heart: woman, woman, medium skin tone, medium-light skin tone","tone":[3,2]},{"emoji":"👩🏽‍❤️‍👩🏽","label":"couple with heart: woman, woman, medium skin tone","tone":3},{"emoji":"👩🏽‍❤️‍👩🏾","label":"couple with heart: woman, woman, medium skin tone, medium-dark skin tone","tone":[3,4]},{"emoji":"👩🏽‍❤️‍👩🏿","label":"couple with heart: woman, woman, medium skin tone, dark skin tone","tone":[3,5]},{"emoji":"👩🏾‍❤️‍👩🏻","label":"couple with heart: woman, woman, medium-dark skin tone, light skin tone","tone":[4,1]},{"emoji":"👩🏾‍❤️‍👩🏼","label":"couple with heart: woman, woman, medium-dark skin tone, medium-light skin tone","tone":[4,2]},{"emoji":"👩🏾‍❤️‍👩🏽","label":"couple with heart: woman, woman, medium-dark skin tone, medium skin tone","tone":[4,3]},{"emoji":"👩🏾‍❤️‍👩🏾","label":"couple with heart: woman, woman, medium-dark skin tone","tone":4},{"emoji":"👩🏾‍❤️‍👩🏿","label":"couple with heart: woman, woman, medium-dark skin tone, dark skin tone","tone":[4,5]},{"emoji":"👩🏿‍❤️‍👩🏻","label":"couple with heart: woman, woman, dark skin tone, light skin tone","tone":[5,1]},{"emoji":"👩🏿‍❤️‍👩🏼","label":"couple with heart: woman, woman, dark skin tone, medium-light skin tone","tone":[5,2]},{"emoji":"👩🏿‍❤️‍👩🏽","label":"couple with heart: woman, woman, dark skin tone, medium skin tone","tone":[5,3]},{"emoji":"👩🏿‍❤️‍👩🏾","label":"couple with heart: woman, woman, dark skin tone, medium-dark skin tone","tone":[5,4]},{"emoji":"👩🏿‍❤️‍👩🏿","label":"couple with heart: woman, woman, dark skin tone","tone":5}]},{"emoji":"👪️","label":"family","tone":0},{"emoji":"👨‍👩‍👦","label":"family: man, woman, boy","tone":0},{"emoji":"👨‍👩‍👧","label":"family: man, woman, girl","tone":0},{"emoji":"👨‍👩‍👧‍👦","label":"family: man, woman, girl, boy","tone":0},{"emoji":"👨‍👩‍👦‍👦","label":"family: man, woman, boy, boy","tone":0},{"emoji":"👨‍👩‍👧‍👧","label":"family: man, woman, girl, girl","tone":0},{"emoji":"👨‍👨‍👦","label":"family: man, man, boy","tone":0},{"emoji":"👨‍👨‍👧","label":"family: man, man, girl","tone":0},{"emoji":"👨‍👨‍👧‍👦","label":"family: man, man, girl, boy","tone":0},{"emoji":"👨‍👨‍👦‍👦","label":"family: man, man, boy, boy","tone":0},{"emoji":"👨‍👨‍👧‍👧","label":"family: man, man, girl, girl","tone":0},{"emoji":"👩‍👩‍👦","label":"family: woman, woman, boy","tone":0},{"emoji":"👩‍👩‍👧","label":"family: woman, woman, girl","tone":0},{"emoji":"👩‍👩‍👧‍👦","label":"family: woman, woman, girl, boy","tone":0},{"emoji":"👩‍👩‍👦‍👦","label":"family: woman, woman, boy, boy","tone":0},{"emoji":"👩‍👩‍👧‍👧","label":"family: woman, woman, girl, girl","tone":0},{"emoji":"👨‍👦","label":"family: man, boy","tone":0},{"emoji":"👨‍👦‍👦","label":"family: man, boy, boy","tone":0},{"emoji":"👨‍👧","label":"family: man, girl","tone":0},{"emoji":"👨‍👧‍👦","label":"family: man, girl, boy","tone":0},{"emoji":"👨‍👧‍👧","label":"family: man, girl, girl","tone":0},{"emoji":"👩‍👦","label":"family: woman, boy","tone":0},{"emoji":"👩‍👦‍👦","label":"family: woman, boy, boy","tone":0},{"emoji":"👩‍👧","label":"family: woman, girl","tone":0},{"emoji":"👩‍👧‍👦","label":"family: woman, girl, boy","tone":0},{"emoji":"👩‍👧‍👧","label":"family: woman, girl, girl","tone":0},{"emoji":"🗣️","label":"speaking head","tone":0},{"emoji":"👤","label":"bust in silhouette","tone":0},{"emoji":"👥","label":"busts in silhouette","tone":0},{"emoji":"🫂","label":"people hugging","tone":0},{"emoji":"👣","label":"footprints","tone":0}]},{"name":"animals-nature","emojis":[{"emoji":"🐵","label":"monkey face","tone":0},{"emoji":"🐒","label":"monkey","tone":0},{"emoji":"🦍","label":"gorilla","tone":0},{"emoji":"🦧","label":"orangutan","tone":0},{"emoji":"🐶","label":"dog face","tone":0},{"emoji":"🐕️","label":"dog","tone":0},{"emoji":"🦮","label":"guide dog","tone":0},{"emoji":"🐕‍🦺","label":"service dog","tone":0},{"emoji":"🐩","label":"poodle","tone":0},{"emoji":"🐺","label":"wolf","tone":0},{"emoji":"🦊","label":"fox","tone":0},{"emoji":"🦝","label":"raccoon","tone":0},{"emoji":"🐱","label":"cat face","tone":0},{"emoji":"🐈️","label":"cat","tone":0},{"emoji":"🐈‍⬛","label":"black cat","tone":0},{"emoji":"🦁","label":"lion","tone":0},{"emoji":"🐯","label":"tiger face","tone":0},{"emoji":"🐅","label":"tiger","tone":0},{"emoji":"🐆","label":"leopard","tone":0},{"emoji":"🐴","label":"horse face","tone":0},{"emoji":"🐎","label":"horse","tone":0},{"emoji":"🦄","label":"unicorn","tone":0},{"emoji":"🦓","label":"zebra","tone":0},{"emoji":"🦌","label":"deer","tone":0},{"emoji":"🦬","label":"bison","tone":0},{"emoji":"🐮","label":"cow face","tone":0},{"emoji":"🐂","label":"ox","tone":0},{"emoji":"🐃","label":"water buffalo","tone":0},{"emoji":"🐄","label":"cow","tone":0},{"emoji":"🐷","label":"pig face","tone":0},{"emoji":"🐖","label":"pig","tone":0},{"emoji":"🐗","label":"boar","tone":0},{"emoji":"🐽","label":"pig nose","tone":0},{"emoji":"🐏","label":"ram","tone":0},{"emoji":"🐑","label":"ewe","tone":0},{"emoji":"🐐","label":"goat","tone":0},{"emoji":"🐪","label":"camel","tone":0},{"emoji":"🐫","label":"two-hump camel","tone":0},{"emoji":"🦙","label":"llama","tone":0},{"emoji":"🦒","label":"giraffe","tone":0},{"emoji":"🐘","label":"elephant","tone":0},{"emoji":"🦣","label":"mammoth","tone":0},{"emoji":"🦏","label":"rhinoceros","tone":0},{"emoji":"🦛","label":"hippopotamus","tone":0},{"emoji":"🐭","label":"mouse face","tone":0},{"emoji":"🐁","label":"mouse","tone":0},{"emoji":"🐀","label":"rat","tone":0},{"emoji":"🐹","label":"hamster","tone":0},{"emoji":"🐰","label":"rabbit face","tone":0},{"emoji":"🐇","label":"rabbit","tone":0},{"emoji":"🐿️","label":"chipmunk","tone":0},{"emoji":"🦫","label":"beaver","tone":0},{"emoji":"🦔","label":"hedgehog","tone":0},{"emoji":"🦇","label":"bat","tone":0},{"emoji":"🐻","label":"bear","tone":0},{"emoji":"🐻‍❄️","label":"polar bear","tone":0},{"emoji":"🐨","label":"koala","tone":0},{"emoji":"🐼","label":"panda","tone":0},{"emoji":"🦥","label":"sloth","tone":0},{"emoji":"🦦","label":"otter","tone":0},{"emoji":"🦨","label":"skunk","tone":0},{"emoji":"🦘","label":"kangaroo","tone":0},{"emoji":"🦡","label":"badger","tone":0},{"emoji":"🐾","label":"paw prints","tone":0},{"emoji":"🦃","label":"turkey","tone":0},{"emoji":"🐔","label":"chicken","tone":0},{"emoji":"🐓","label":"rooster","tone":0},{"emoji":"🐣","label":"hatching chick","tone":0},{"emoji":"🐤","label":"baby chick","tone":0},{"emoji":"🐥","label":"front-facing baby chick","tone":0},{"emoji":"🐦️","label":"bird","tone":0},{"emoji":"🐧","label":"penguin","tone":0},{"emoji":"🕊️","label":"dove","tone":0},{"emoji":"🦅","label":"eagle","tone":0},{"emoji":"🦆","label":"duck","tone":0},{"emoji":"🦢","label":"swan","tone":0},{"emoji":"🦉","label":"owl","tone":0},{"emoji":"🦤","label":"dodo","tone":0},{"emoji":"🪶","label":"feather","tone":0},{"emoji":"🦩","label":"flamingo","tone":0},{"emoji":"🦚","label":"peacock","tone":0},{"emoji":"🦜","label":"parrot","tone":0},{"emoji":"🐸","label":"frog","tone":0},{"emoji":"🐊","label":"crocodile","tone":0},{"emoji":"🐢","label":"turtle","tone":0},{"emoji":"🦎","label":"lizard","tone":0},{"emoji":"🐍","label":"snake","tone":0},{"emoji":"🐲","label":"dragon face","tone":0},{"emoji":"🐉","label":"dragon","tone":0},{"emoji":"🦕","label":"sauropod","tone":0},{"emoji":"🦖","label":"T-Rex","tone":0},{"emoji":"🐳","label":"spouting whale","tone":0},{"emoji":"🐋","label":"whale","tone":0},{"emoji":"🐬","label":"dolphin","tone":0},{"emoji":"🦭","label":"seal","tone":0},{"emoji":"🐟️","label":"fish","tone":0},{"emoji":"🐠","label":"tropical fish","tone":0},{"emoji":"🐡","label":"blowfish","tone":0},{"emoji":"🦈","label":"shark","tone":0},{"emoji":"🐙","label":"octopus","tone":0},{"emoji":"🐚","label":"spiral shell","tone":0},{"emoji":"🐌","label":"snail","tone":0},{"emoji":"🦋","label":"butterfly","tone":0},{"emoji":"🐛","label":"bug","tone":0},{"emoji":"🐜","label":"ant","tone":0},{"emoji":"🐝","label":"honeybee","tone":0},{"emoji":"🪲","label":"beetle","tone":0},{"emoji":"🐞","label":"lady beetle","tone":0},{"emoji":"🦗","label":"cricket","tone":0},{"emoji":"🪳","label":"cockroach","tone":0},{"emoji":"🕷️","label":"spider","tone":0},{"emoji":"🕸️","label":"spider web","tone":0},{"emoji":"🦂","label":"scorpion","tone":0},{"emoji":"🦟","label":"mosquito","tone":0},{"emoji":"🪰","label":"fly","tone":0},{"emoji":"🪱","label":"worm","tone":0},{"emoji":"🦠","label":"microbe","tone":0},{"emoji":"💐","label":"bouquet","tone":0},{"emoji":"🌸","label":"cherry blossom","tone":0},{"emoji":"💮","label":"white flower","tone":0},{"emoji":"🏵️","label":"rosette","tone":0},{"emoji":"🌹","label":"rose","tone":0},{"emoji":"🥀","label":"wilted flower","tone":0},{"emoji":"🌺","label":"hibiscus","tone":0},{"emoji":"🌻","label":"sunflower","tone":0},{"emoji":"🌼","label":"blossom","tone":0},{"emoji":"🌷","label":"tulip","tone":0},{"emoji":"🌱","label":"seedling","tone":0},{"emoji":"🪴","label":"potted plant","tone":0},{"emoji":"🌲","label":"evergreen tree","tone":0},{"emoji":"🌳","label":"deciduous tree","tone":0},{"emoji":"🌴","label":"palm tree","tone":0},{"emoji":"🌵","label":"cactus","tone":0},{"emoji":"🌾","label":"sheaf of rice","tone":0},{"emoji":"🌿","label":"herb","tone":0},{"emoji":"☘️","label":"shamrock","tone":0},{"emoji":"🍀","label":"four leaf clover","tone":0},{"emoji":"🍁","label":"maple leaf","tone":0},{"emoji":"🍂","label":"fallen leaf","tone":0},{"emoji":"🍃","label":"leaf fluttering in wind","tone":0}]},{"name":"food-drink","emojis":[{"emoji":"🍇","label":"grapes","tone":0},{"emoji":"🍈","label":"melon","tone":0},{"emoji":"🍉","label":"watermelon","tone":0},{"emoji":"🍊","label":"tangerine","tone":0},{"emoji":"🍋","label":"lemon","tone":0},{"emoji":"🍌","label":"banana","tone":0},{"emoji":"🍍","label":"pineapple","tone":0},{"emoji":"🥭","label":"mango","tone":0},{"emoji":"🍎","label":"red apple","tone":0},{"emoji":"🍏","label":"green apple","tone":0},{"emoji":"🍐","label":"pear","tone":0},{"emoji":"🍑","label":"peach","tone":0},{"emoji":"🍒","label":"cherries","tone":0},{"emoji":"🍓","label":"strawberry","tone":0},{"emoji":"🫐","label":"blueberries","tone":0},{"emoji":"🥝","label":"kiwi fruit","tone":0},{"emoji":"🍅","label":"tomato","tone":0},{"emoji":"🫒","label":"olive","tone":0},{"emoji":"🥥","label":"coconut","tone":0},{"emoji":"🥑","label":"avocado","tone":0},{"emoji":"🍆","label":"eggplant","tone":0},{"emoji":"🥔","label":"potato","tone":0},{"emoji":"🥕","label":"carrot","tone":0},{"emoji":"🌽","label":"ear of corn","tone":0},{"emoji":"🌶️","label":"hot pepper","tone":0},{"emoji":"🫑","label":"bell pepper","tone":0},{"emoji":"🥒","label":"cucumber","tone":0},{"emoji":"🥬","label":"leafy green","tone":0},{"emoji":"🥦","label":"broccoli","tone":0},{"emoji":"🧄","label":"garlic","tone":0},{"emoji":"🧅","label":"onion","tone":0},{"emoji":"🍄","label":"mushroom","tone":0},{"emoji":"🥜","label":"peanuts","tone":0},{"emoji":"🌰","label":"chestnut","tone":0},{"emoji":"🍞","label":"bread","tone":0},{"emoji":"🥐","label":"croissant","tone":0},{"emoji":"🥖","label":"baguette bread","tone":0},{"emoji":"🫓","label":"flatbread","tone":0},{"emoji":"🥨","label":"pretzel","tone":0},{"emoji":"🥯","label":"bagel","tone":0},{"emoji":"🥞","label":"pancakes","tone":0},{"emoji":"🧇","label":"waffle","tone":0},{"emoji":"🧀","label":"cheese wedge","tone":0},{"emoji":"🍖","label":"meat on bone","tone":0},{"emoji":"🍗","label":"poultry leg","tone":0},{"emoji":"🥩","label":"cut of meat","tone":0},{"emoji":"🥓","label":"bacon","tone":0},{"emoji":"🍔","label":"hamburger","tone":0},{"emoji":"🍟","label":"french fries","tone":0},{"emoji":"🍕","label":"pizza","tone":0},{"emoji":"🌭","label":"hot dog","tone":0},{"emoji":"🥪","label":"sandwich","tone":0},{"emoji":"🌮","label":"taco","tone":0},{"emoji":"🌯","label":"burrito","tone":0},{"emoji":"🫔","label":"tamale","tone":0},{"emoji":"🥙","label":"stuffed flatbread","tone":0},{"emoji":"🧆","label":"falafel","tone":0},{"emoji":"🥚","label":"egg","tone":0},{"emoji":"🍳","label":"cooking","tone":0},{"emoji":"🥘","label":"shallow pan of food","tone":0},{"emoji":"🍲","label":"pot of food","tone":0},{"emoji":"🫕","label":"fondue","tone":0},{"emoji":"🥣","label":"bowl with spoon","tone":0},{"emoji":"🥗","label":"green salad","tone":0},{"emoji":"🍿","label":"popcorn","tone":0},{"emoji":"🧈","label":"butter","tone":0},{"emoji":"🧂","label":"salt","tone":0},{"emoji":"🥫","label":"canned food","tone":0},{"emoji":"🍱","label":"bento box","tone":0},{"emoji":"🍘","label":"rice cracker","tone":0},{"emoji":"🍙","label":"rice ball","tone":0},{"emoji":"🍚","label":"cooked rice","tone":0},{"emoji":"🍛","label":"curry rice","tone":0},{"emoji":"🍜","label":"steaming bowl","tone":0},{"emoji":"🍝","label":"spaghetti","tone":0},{"emoji":"🍠","label":"roasted sweet potato","tone":0},{"emoji":"🍢","label":"oden","tone":0},{"emoji":"🍣","label":"sushi","tone":0},{"emoji":"🍤","label":"fried shrimp","tone":0},{"emoji":"🍥","label":"fish cake with swirl","tone":0},{"emoji":"🥮","label":"moon cake","tone":0},{"emoji":"🍡","label":"dango","tone":0},{"emoji":"🥟","label":"dumpling","tone":0},{"emoji":"🥠","label":"fortune cookie","tone":0},{"emoji":"🥡","label":"takeout box","tone":0},{"emoji":"🦀","label":"crab","tone":0},{"emoji":"🦞","label":"lobster","tone":0},{"emoji":"🦐","label":"shrimp","tone":0},{"emoji":"🦑","label":"squid","tone":0},{"emoji":"🦪","label":"oyster","tone":0},{"emoji":"🍦","label":"soft ice cream","tone":0},{"emoji":"🍧","label":"shaved ice","tone":0},{"emoji":"🍨","label":"ice cream","tone":0},{"emoji":"🍩","label":"doughnut","tone":0},{"emoji":"🍪","label":"cookie","tone":0},{"emoji":"🎂","label":"birthday cake","tone":0},{"emoji":"🍰","label":"shortcake","tone":0},{"emoji":"🧁","label":"cupcake","tone":0},{"emoji":"🥧","label":"pie","tone":0},{"emoji":"🍫","label":"chocolate bar","tone":0},{"emoji":"🍬","label":"candy","tone":0},{"emoji":"🍭","label":"lollipop","tone":0},{"emoji":"🍮","label":"custard","tone":0},{"emoji":"🍯","label":"honey pot","tone":0},{"emoji":"🍼","label":"baby bottle","tone":0},{"emoji":"🥛","label":"glass of milk","tone":0},{"emoji":"☕️","label":"hot beverage","tone":0},{"emoji":"🫖","label":"teapot","tone":0},{"emoji":"🍵","label":"teacup without handle","tone":0},{"emoji":"🍶","label":"sake","tone":0},{"emoji":"🍾","label":"bottle with popping cork","tone":0},{"emoji":"🍷","label":"wine glass","tone":0},{"emoji":"🍸️","label":"cocktail glass","tone":0},{"emoji":"🍹","label":"tropical drink","tone":0},{"emoji":"🍺","label":"beer mug","tone":0},{"emoji":"🍻","label":"clinking beer mugs","tone":0},{"emoji":"🥂","label":"clinking glasses","tone":0},{"emoji":"🥃","label":"tumbler glass","tone":0},{"emoji":"🥤","label":"cup with straw","tone":0},{"emoji":"🧋","label":"bubble tea","tone":0},{"emoji":"🧃","label":"beverage box","tone":0},{"emoji":"🧉","label":"mate","tone":0},{"emoji":"🧊","label":"ice","tone":0},{"emoji":"🥢","label":"chopsticks","tone":0},{"emoji":"🍽️","label":"fork and knife with plate","tone":0},{"emoji":"🍴","label":"fork and knife","tone":0},{"emoji":"🥄","label":"spoon","tone":0},{"emoji":"🔪","label":"kitchen knife","tone":0},{"emoji":"🏺","label":"amphora","tone":0}]},{"name":"travel-places","emojis":[{"emoji":"🌍️","label":"globe showing Europe-Africa","tone":0},{"emoji":"🌎️","label":"globe showing Americas","tone":0},{"emoji":"🌏️","label":"globe showing Asia-Australia","tone":0},{"emoji":"🌐","label":"globe with meridians","tone":0},{"emoji":"🗺️","label":"world map","tone":0},{"emoji":"🗾","label":"map of Japan","tone":0},{"emoji":"🧭","label":"compass","tone":0},{"emoji":"🏔️","label":"snow-capped mountain","tone":0},{"emoji":"⛰️","label":"mountain","tone":0},{"emoji":"🌋","label":"volcano","tone":0},{"emoji":"🗻","label":"mount fuji","tone":0},{"emoji":"🏕️","label":"camping","tone":0},{"emoji":"🏖️","label":"beach with umbrella","tone":0},{"emoji":"🏜️","label":"desert","tone":0},{"emoji":"🏝️","label":"desert island","tone":0},{"emoji":"🏞️","label":"national park","tone":0},{"emoji":"🏟️","label":"stadium","tone":0},{"emoji":"🏛️","label":"classical building","tone":0},{"emoji":"🏗️","label":"building construction","tone":0},{"emoji":"🧱","label":"brick","tone":0},{"emoji":"🪨","label":"rock","tone":0},{"emoji":"🪵","label":"wood","tone":0},{"emoji":"🛖","label":"hut","tone":0},{"emoji":"🏘️","label":"houses","tone":0},{"emoji":"🏚️","label":"derelict house","tone":0},{"emoji":"🏠️","label":"house","tone":0},{"emoji":"🏡","label":"house with garden","tone":0},{"emoji":"🏢","label":"office building","tone":0},{"emoji":"🏣","label":"Japanese post office","tone":0},{"emoji":"🏤","label":"post office","tone":0},{"emoji":"🏥","label":"hospital","tone":0},{"emoji":"🏦","label":"bank","tone":0},{"emoji":"🏨","label":"hotel","tone":0},{"emoji":"🏩","label":"love hotel","tone":0},{"emoji":"🏪","label":"convenience store","tone":0},{"emoji":"🏫","label":"school","tone":0},{"emoji":"🏬","label":"department store","tone":0},{"emoji":"🏭️","label":"factory","tone":0},{"emoji":"🏯","label":"Japanese castle","tone":0},{"emoji":"🏰","label":"castle","tone":0},{"emoji":"💒","label":"wedding","tone":0},{"emoji":"🗼","label":"Tokyo tower","tone":0},{"emoji":"🗽","label":"Statue of Liberty","tone":0},{"emoji":"⛪️","label":"church","tone":0},{"emoji":"🕌","label":"mosque","tone":0},{"emoji":"🛕","label":"hindu temple","tone":0},{"emoji":"🕍","label":"synagogue","tone":0},{"emoji":"⛩️","label":"shinto shrine","tone":0},{"emoji":"🕋","label":"kaaba","tone":0},{"emoji":"⛲️","label":"fountain","tone":0},{"emoji":"⛺️","label":"tent","tone":0},{"emoji":"🌁","label":"foggy","tone":0},{"emoji":"🌃","label":"night with stars","tone":0},{"emoji":"🏙️","label":"cityscape","tone":0},{"emoji":"🌄","label":"sunrise over mountains","tone":0},{"emoji":"🌅","label":"sunrise","tone":0},{"emoji":"🌆","label":"cityscape at dusk","tone":0},{"emoji":"🌇","label":"sunset","tone":0},{"emoji":"🌉","label":"bridge at night","tone":0},{"emoji":"♨️","label":"hot springs","tone":0},{"emoji":"🎠","label":"carousel horse","tone":0},{"emoji":"🎡","label":"ferris wheel","tone":0},{"emoji":"🎢","label":"roller coaster","tone":0},{"emoji":"💈","label":"barber pole","tone":0},{"emoji":"🎪","label":"circus tent","tone":0},{"emoji":"🚂","label":"locomotive","tone":0},{"emoji":"🚃","label":"railway car","tone":0},{"emoji":"🚄","label":"high-speed train","tone":0},{"emoji":"🚅","label":"bullet train","tone":0},{"emoji":"🚆","label":"train","tone":0},{"emoji":"🚇️","label":"metro","tone":0},{"emoji":"🚈","label":"light rail","tone":0},{"emoji":"🚉","label":"station","tone":0},{"emoji":"🚊","label":"tram","tone":0},{"emoji":"🚝","label":"monorail","tone":0},{"emoji":"🚞","label":"mountain railway","tone":0},{"emoji":"🚋","label":"tram car","tone":0},{"emoji":"🚌","label":"bus","tone":0},{"emoji":"🚍️","label":"oncoming bus","tone":0},{"emoji":"🚎","label":"trolleybus","tone":0},{"emoji":"🚐","label":"minibus","tone":0},{"emoji":"🚑️","label":"ambulance","tone":0},{"emoji":"🚒","label":"fire engine","tone":0},{"emoji":"🚓","label":"police car","tone":0},{"emoji":"🚔️","label":"oncoming police car","tone":0},{"emoji":"🚕","label":"taxi","tone":0},{"emoji":"🚖","label":"oncoming taxi","tone":0},{"emoji":"🚗","label":"automobile","tone":0},{"emoji":"🚘️","label":"oncoming automobile","tone":0},{"emoji":"🚙","label":"sport utility vehicle","tone":0},{"emoji":"🛻","label":"pickup truck","tone":0},{"emoji":"🚚","label":"delivery truck","tone":0},{"emoji":"🚛","label":"articulated lorry","tone":0},{"emoji":"🚜","label":"tractor","tone":0},{"emoji":"🏎️","label":"racing car","tone":0},{"emoji":"🏍️","label":"motorcycle","tone":0},{"emoji":"🛵","label":"motor scooter","tone":0},{"emoji":"🦽","label":"manual wheelchair","tone":0},{"emoji":"🦼","label":"motorized wheelchair","tone":0},{"emoji":"🛺","label":"auto rickshaw","tone":0},{"emoji":"🚲️","label":"bicycle","tone":0},{"emoji":"🛴","label":"kick scooter","tone":0},{"emoji":"🛹","label":"skateboard","tone":0},{"emoji":"🛼","label":"roller skate","tone":0},{"emoji":"🚏","label":"bus stop","tone":0},{"emoji":"🛣️","label":"motorway","tone":0},{"emoji":"🛤️","label":"railway track","tone":0},{"emoji":"🛢️","label":"oil drum","tone":0},{"emoji":"⛽️","label":"fuel pump","tone":0},{"emoji":"🚨","label":"police car light","tone":0},{"emoji":"🚥","label":"horizontal traffic light","tone":0},{"emoji":"🚦","label":"vertical traffic light","tone":0},{"emoji":"🛑","label":"stop sign","tone":0},{"emoji":"🚧","label":"construction","tone":0},{"emoji":"⚓️","label":"anchor","tone":0},{"emoji":"⛵️","label":"sailboat","tone":0},{"emoji":"🛶","label":"canoe","tone":0},{"emoji":"🚤","label":"speedboat","tone":0},{"emoji":"🛳️","label":"passenger ship","tone":0},{"emoji":"⛴️","label":"ferry","tone":0},{"emoji":"🛥️","label":"motor boat","tone":0},{"emoji":"🚢","label":"ship","tone":0},{"emoji":"✈️","label":"airplane","tone":0},{"emoji":"🛩️","label":"small airplane","tone":0},{"emoji":"🛫","label":"airplane departure","tone":0},{"emoji":"🛬","label":"airplane arrival","tone":0},{"emoji":"🪂","label":"parachute","tone":0},{"emoji":"💺","label":"seat","tone":0},{"emoji":"🚁","label":"helicopter","tone":0},{"emoji":"🚟","label":"suspension railway","tone":0},{"emoji":"🚠","label":"mountain cableway","tone":0},{"emoji":"🚡","label":"aerial tramway","tone":0},{"emoji":"🛰️","label":"satellite","tone":0},{"emoji":"🚀","label":"rocket","tone":0},{"emoji":"🛸","label":"flying saucer","tone":0},{"emoji":"🛎️","label":"bellhop bell","tone":0},{"emoji":"🧳","label":"luggage","tone":0},{"emoji":"⌛️","label":"hourglass done","tone":0},{"emoji":"⏳️","label":"hourglass not done","tone":0},{"emoji":"⌚️","label":"watch","tone":0},{"emoji":"⏰","label":"alarm clock","tone":0},{"emoji":"⏱️","label":"stopwatch","tone":0},{"emoji":"⏲️","label":"timer clock","tone":0},{"emoji":"🕰️","label":"mantelpiece clock","tone":0},{"emoji":"🕛️","label":"twelve o’clock","tone":0},{"emoji":"🕧️","label":"twelve-thirty","tone":0},{"emoji":"🕐️","label":"one o’clock","tone":0},{"emoji":"🕜️","label":"one-thirty","tone":0},{"emoji":"🕑️","label":"two o’clock","tone":0},{"emoji":"🕝️","label":"two-thirty","tone":0},{"emoji":"🕒️","label":"three o’clock","tone":0},{"emoji":"🕞️","label":"three-thirty","tone":0},{"emoji":"🕓️","label":"four o’clock","tone":0},{"emoji":"🕟️","label":"four-thirty","tone":0},{"emoji":"🕔️","label":"five o’clock","tone":0},{"emoji":"🕠️","label":"five-thirty","tone":0},{"emoji":"🕕️","label":"six o’clock","tone":0},{"emoji":"🕡️","label":"six-thirty","tone":0},{"emoji":"🕖️","label":"seven o’clock","tone":0},{"emoji":"🕢️","label":"seven-thirty","tone":0},{"emoji":"🕗️","label":"eight o’clock","tone":0},{"emoji":"🕣️","label":"eight-thirty","tone":0},{"emoji":"🕘️","label":"nine o’clock","tone":0},{"emoji":"🕤️","label":"nine-thirty","tone":0},{"emoji":"🕙️","label":"ten o’clock","tone":0},{"emoji":"🕥️","label":"ten-thirty","tone":0},{"emoji":"🕚️","label":"eleven o’clock","tone":0},{"emoji":"🕦️","label":"eleven-thirty","tone":0},{"emoji":"🌑","label":"new moon","tone":0},{"emoji":"🌒","label":"waxing crescent moon","tone":0},{"emoji":"🌓","label":"first quarter moon","tone":0},{"emoji":"🌔","label":"waxing gibbous moon","tone":0},{"emoji":"🌕️","label":"full moon","tone":0},{"emoji":"🌖","label":"waning gibbous moon","tone":0},{"emoji":"🌗","label":"last quarter moon","tone":0},{"emoji":"🌘","label":"waning crescent moon","tone":0},{"emoji":"🌙","label":"crescent moon","tone":0},{"emoji":"🌚","label":"new moon face","tone":0},{"emoji":"🌛","label":"first quarter moon face","tone":0},{"emoji":"🌜️","label":"last quarter moon face","tone":0},{"emoji":"🌡️","label":"thermometer","tone":0},{"emoji":"☀️","label":"sun","tone":0},{"emoji":"🌝","label":"full moon face","tone":0},{"emoji":"🌞","label":"sun with face","tone":0},{"emoji":"🪐","label":"ringed planet","tone":0},{"emoji":"⭐️","label":"star","tone":0},{"emoji":"🌟","label":"glowing star","tone":0},{"emoji":"🌠","label":"shooting star","tone":0},{"emoji":"🌌","label":"milky way","tone":0},{"emoji":"☁️","label":"cloud","tone":0},{"emoji":"⛅️","label":"sun behind cloud","tone":0},{"emoji":"⛈️","label":"cloud with lightning and rain","tone":0},{"emoji":"🌤️","label":"sun behind small cloud","tone":0},{"emoji":"🌥️","label":"sun behind large cloud","tone":0},{"emoji":"🌦️","label":"sun behind rain cloud","tone":0},{"emoji":"🌧️","label":"cloud with rain","tone":0},{"emoji":"🌨️","label":"cloud with snow","tone":0},{"emoji":"🌩️","label":"cloud with lightning","tone":0},{"emoji":"🌪️","label":"tornado","tone":0},{"emoji":"🌫️","label":"fog","tone":0},{"emoji":"🌬️","label":"wind face","tone":0},{"emoji":"🌀","label":"cyclone","tone":0},{"emoji":"🌈","label":"rainbow","tone":0},{"emoji":"🌂","label":"closed umbrella","tone":0},{"emoji":"☂️","label":"umbrella","tone":0},{"emoji":"☔️","label":"umbrella with rain drops","tone":0},{"emoji":"⛱️","label":"umbrella on ground","tone":0},{"emoji":"⚡️","label":"high voltage","tone":0},{"emoji":"❄️","label":"snowflake","tone":0},{"emoji":"☃️","label":"snowman","tone":0},{"emoji":"⛄️","label":"snowman without snow","tone":0},{"emoji":"☄️","label":"comet","tone":0},{"emoji":"🔥","label":"fire","tone":0},{"emoji":"💧","label":"droplet","tone":0},{"emoji":"🌊","label":"water wave","tone":0}]},{"name":"activities","emojis":[{"emoji":"🎃","label":"jack-o-lantern","tone":0},{"emoji":"🎄","label":"Christmas tree","tone":0},{"emoji":"🎆","label":"fireworks","tone":0},{"emoji":"🎇","label":"sparkler","tone":0},{"emoji":"🧨","label":"firecracker","tone":0},{"emoji":"✨","label":"sparkles","tone":0},{"emoji":"🎈","label":"balloon","tone":0},{"emoji":"🎉","label":"party popper","tone":0},{"emoji":"🎊","label":"confetti ball","tone":0},{"emoji":"🎋","label":"tanabata tree","tone":0},{"emoji":"🎍","label":"pine decoration","tone":0},{"emoji":"🎎","label":"Japanese dolls","tone":0},{"emoji":"🎏","label":"carp streamer","tone":0},{"emoji":"🎐","label":"wind chime","tone":0},{"emoji":"🎑","label":"moon viewing ceremony","tone":0},{"emoji":"🧧","label":"red envelope","tone":0},{"emoji":"🎀","label":"ribbon","tone":0},{"emoji":"🎁","label":"wrapped gift","tone":0},{"emoji":"🎗️","label":"reminder ribbon","tone":0},{"emoji":"🎟️","label":"admission tickets","tone":0},{"emoji":"🎫","label":"ticket","tone":0},{"emoji":"🎖️","label":"military medal","tone":0},{"emoji":"🏆️","label":"trophy","tone":0},{"emoji":"🏅","label":"sports medal","tone":0},{"emoji":"🥇","label":"1st place medal","tone":0},{"emoji":"🥈","label":"2nd place medal","tone":0},{"emoji":"🥉","label":"3rd place medal","tone":0},{"emoji":"⚽️","label":"soccer ball","tone":0},{"emoji":"⚾️","label":"baseball","tone":0},{"emoji":"🥎","label":"softball","tone":0},{"emoji":"🏀","label":"basketball","tone":0},{"emoji":"🏐","label":"volleyball","tone":0},{"emoji":"🏈","label":"american football","tone":0},{"emoji":"🏉","label":"rugby football","tone":0},{"emoji":"🎾","label":"tennis","tone":0},{"emoji":"🥏","label":"flying disc","tone":0},{"emoji":"🎳","label":"bowling","tone":0},{"emoji":"🏏","label":"cricket game","tone":0},{"emoji":"🏑","label":"field hockey","tone":0},{"emoji":"🏒","label":"ice hockey","tone":0},{"emoji":"🥍","label":"lacrosse","tone":0},{"emoji":"🏓","label":"ping pong","tone":0},{"emoji":"🏸","label":"badminton","tone":0},{"emoji":"🥊","label":"boxing glove","tone":0},{"emoji":"🥋","label":"martial arts uniform","tone":0},{"emoji":"🥅","label":"goal net","tone":0},{"emoji":"⛳️","label":"flag in hole","tone":0},{"emoji":"⛸️","label":"ice skate","tone":0},{"emoji":"🎣","label":"fishing pole","tone":0},{"emoji":"🤿","label":"diving mask","tone":0},{"emoji":"🎽","label":"running shirt","tone":0},{"emoji":"🎿","label":"skis","tone":0},{"emoji":"🛷","label":"sled","tone":0},{"emoji":"🥌","label":"curling stone","tone":0},{"emoji":"🎯","label":"bullseye","tone":0},{"emoji":"🪀","label":"yo-yo","tone":0},{"emoji":"🪁","label":"kite","tone":0},{"emoji":"🎱","label":"pool 8 ball","tone":0},{"emoji":"🔮","label":"crystal ball","tone":0},{"emoji":"🪄","label":"magic wand","tone":0},{"emoji":"🧿","label":"nazar amulet","tone":0},{"emoji":"🎮️","label":"video game","tone":0},{"emoji":"🕹️","label":"joystick","tone":0},{"emoji":"🎰","label":"slot machine","tone":0},{"emoji":"🎲","label":"game die","tone":0},{"emoji":"🧩","label":"puzzle piece","tone":0},{"emoji":"🧸","label":"teddy bear","tone":0},{"emoji":"🪅","label":"piñata","tone":0},{"emoji":"🪆","label":"nesting dolls","tone":0},{"emoji":"♠️","label":"spade suit","tone":0},{"emoji":"♥️","label":"heart suit","tone":0},{"emoji":"♦️","label":"diamond suit","tone":0},{"emoji":"♣️","label":"club suit","tone":0},{"emoji":"♟️","label":"chess pawn","tone":0},{"emoji":"🃏","label":"joker","tone":0},{"emoji":"🀄️","label":"mahjong red dragon","tone":0},{"emoji":"🎴","label":"flower playing cards","tone":0},{"emoji":"🎭️","label":"performing arts","tone":0},{"emoji":"🖼️","label":"framed picture","tone":0},{"emoji":"🎨","label":"artist palette","tone":0},{"emoji":"🧵","label":"thread","tone":0},{"emoji":"🪡","label":"sewing needle","tone":0},{"emoji":"🧶","label":"yarn","tone":0},{"emoji":"🪢","label":"knot","tone":0}]},{"name":"objects","emojis":[{"emoji":"👓️","label":"glasses","tone":0},{"emoji":"🕶️","label":"sunglasses","tone":0},{"emoji":"🥽","label":"goggles","tone":0},{"emoji":"🥼","label":"lab coat","tone":0},{"emoji":"🦺","label":"safety vest","tone":0},{"emoji":"👔","label":"necktie","tone":0},{"emoji":"👕","label":"t-shirt","tone":0},{"emoji":"👖","label":"jeans","tone":0},{"emoji":"🧣","label":"scarf","tone":0},{"emoji":"🧤","label":"gloves","tone":0},{"emoji":"🧥","label":"coat","tone":0},{"emoji":"🧦","label":"socks","tone":0},{"emoji":"👗","label":"dress","tone":0},{"emoji":"👘","label":"kimono","tone":0},{"emoji":"🥻","label":"sari","tone":0},{"emoji":"🩱","label":"one-piece swimsuit","tone":0},{"emoji":"🩲","label":"briefs","tone":0},{"emoji":"🩳","label":"shorts","tone":0},{"emoji":"👙","label":"bikini","tone":0},{"emoji":"👚","label":"woman’s clothes","tone":0},{"emoji":"👛","label":"purse","tone":0},{"emoji":"👜","label":"handbag","tone":0},{"emoji":"👝","label":"clutch bag","tone":0},{"emoji":"🛍️","label":"shopping bags","tone":0},{"emoji":"🎒","label":"backpack","tone":0},{"emoji":"🩴","label":"thong sandal","tone":0},{"emoji":"👞","label":"man’s shoe","tone":0},{"emoji":"👟","label":"running shoe","tone":0},{"emoji":"🥾","label":"hiking boot","tone":0},{"emoji":"🥿","label":"flat shoe","tone":0},{"emoji":"👠","label":"high-heeled shoe","tone":0},{"emoji":"👡","label":"woman’s sandal","tone":0},{"emoji":"🩰","label":"ballet shoes","tone":0},{"emoji":"👢","label":"woman’s boot","tone":0},{"emoji":"👑","label":"crown","tone":0},{"emoji":"👒","label":"woman’s hat","tone":0},{"emoji":"🎩","label":"top hat","tone":0},{"emoji":"🎓️","label":"graduation cap","tone":0},{"emoji":"🧢","label":"billed cap","tone":0},{"emoji":"🪖","label":"military helmet","tone":0},{"emoji":"⛑️","label":"rescue worker’s helmet","tone":0},{"emoji":"📿","label":"prayer beads","tone":0},{"emoji":"💄","label":"lipstick","tone":0},{"emoji":"💍","label":"ring","tone":0},{"emoji":"💎","label":"gem stone","tone":0},{"emoji":"🔇","label":"muted speaker","tone":0},{"emoji":"🔈️","label":"speaker low volume","tone":0},{"emoji":"🔉","label":"speaker medium volume","tone":0},{"emoji":"🔊","label":"speaker high volume","tone":0},{"emoji":"📢","label":"loudspeaker","tone":0},{"emoji":"📣","label":"megaphone","tone":0},{"emoji":"📯","label":"postal horn","tone":0},{"emoji":"🔔","label":"bell","tone":0},{"emoji":"🔕","label":"bell with slash","tone":0},{"emoji":"🎼","label":"musical score","tone":0},{"emoji":"🎵","label":"musical note","tone":0},{"emoji":"🎶","label":"musical notes","tone":0},{"emoji":"🎙️","label":"studio microphone","tone":0},{"emoji":"🎚️","label":"level slider","tone":0},{"emoji":"🎛️","label":"control knobs","tone":0},{"emoji":"🎤","label":"microphone","tone":0},{"emoji":"🎧️","label":"headphone","tone":0},{"emoji":"📻️","label":"radio","tone":0},{"emoji":"🎷","label":"saxophone","tone":0},{"emoji":"🪗","label":"accordion","tone":0},{"emoji":"🎸","label":"guitar","tone":0},{"emoji":"🎹","label":"musical keyboard","tone":0},{"emoji":"🎺","label":"trumpet","tone":0},{"emoji":"🎻","label":"violin","tone":0},{"emoji":"🪕","label":"banjo","tone":0},{"emoji":"🥁","label":"drum","tone":0},{"emoji":"🪘","label":"long drum","tone":0},{"emoji":"📱","label":"mobile phone","tone":0},{"emoji":"📲","label":"mobile phone with arrow","tone":0},{"emoji":"☎️","label":"telephone","tone":0},{"emoji":"📞","label":"telephone receiver","tone":0},{"emoji":"📟️","label":"pager","tone":0},{"emoji":"📠","label":"fax machine","tone":0},{"emoji":"🔋","label":"battery","tone":0},{"emoji":"🔌","label":"electric plug","tone":0},{"emoji":"💻️","label":"laptop","tone":0},{"emoji":"🖥️","label":"desktop computer","tone":0},{"emoji":"🖨️","label":"printer","tone":0},{"emoji":"⌨️","label":"keyboard","tone":0},{"emoji":"🖱️","label":"computer mouse","tone":0},{"emoji":"🖲️","label":"trackball","tone":0},{"emoji":"💽","label":"computer disk","tone":0},{"emoji":"💾","label":"floppy disk","tone":0},{"emoji":"💿️","label":"optical disk","tone":0},{"emoji":"📀","label":"dvd","tone":0},{"emoji":"🧮","label":"abacus","tone":0},{"emoji":"🎥","label":"movie camera","tone":0},{"emoji":"🎞️","label":"film frames","tone":0},{"emoji":"📽️","label":"film projector","tone":0},{"emoji":"🎬️","label":"clapper board","tone":0},{"emoji":"📺️","label":"television","tone":0},{"emoji":"📷️","label":"camera","tone":0},{"emoji":"📸","label":"camera with flash","tone":0},{"emoji":"📹️","label":"video camera","tone":0},{"emoji":"📼","label":"videocassette","tone":0},{"emoji":"🔍️","label":"magnifying glass tilted left","tone":0},{"emoji":"🔎","label":"magnifying glass tilted right","tone":0},{"emoji":"🕯️","label":"candle","tone":0},{"emoji":"💡","label":"light bulb","tone":0},{"emoji":"🔦","label":"flashlight","tone":0},{"emoji":"🏮","label":"red paper lantern","tone":0},{"emoji":"🪔","label":"diya lamp","tone":0},{"emoji":"📔","label":"notebook with decorative cover","tone":0},{"emoji":"📕","label":"closed book","tone":0},{"emoji":"📖","label":"open book","tone":0},{"emoji":"📗","label":"green book","tone":0},{"emoji":"📘","label":"blue book","tone":0},{"emoji":"📙","label":"orange book","tone":0},{"emoji":"📚️","label":"books","tone":0},{"emoji":"📓","label":"notebook","tone":0},{"emoji":"📒","label":"ledger","tone":0},{"emoji":"📃","label":"page with curl","tone":0},{"emoji":"📜","label":"scroll","tone":0},{"emoji":"📄","label":"page facing up","tone":0},{"emoji":"📰","label":"newspaper","tone":0},{"emoji":"🗞️","label":"rolled-up newspaper","tone":0},{"emoji":"📑","label":"bookmark tabs","tone":0},{"emoji":"🔖","label":"bookmark","tone":0},{"emoji":"🏷️","label":"label","tone":0},{"emoji":"💰️","label":"money bag","tone":0},{"emoji":"🪙","label":"coin","tone":0},{"emoji":"💴","label":"yen banknote","tone":0},{"emoji":"💵","label":"dollar banknote","tone":0},{"emoji":"💶","label":"euro banknote","tone":0},{"emoji":"💷","label":"pound banknote","tone":0},{"emoji":"💸","label":"money with wings","tone":0},{"emoji":"💳️","label":"credit card","tone":0},{"emoji":"🧾","label":"receipt","tone":0},{"emoji":"💹","label":"chart increasing with yen","tone":0},{"emoji":"✉️","label":"envelope","tone":0},{"emoji":"📧","label":"e-mail","tone":0},{"emoji":"📨","label":"incoming envelope","tone":0},{"emoji":"📩","label":"envelope with arrow","tone":0},{"emoji":"📤️","label":"outbox tray","tone":0},{"emoji":"📥️","label":"inbox tray","tone":0},{"emoji":"📦️","label":"package","tone":0},{"emoji":"📫️","label":"closed mailbox with raised flag","tone":0},{"emoji":"📪️","label":"closed mailbox with lowered flag","tone":0},{"emoji":"📬️","label":"open mailbox with raised flag","tone":0},{"emoji":"📭️","label":"open mailbox with lowered flag","tone":0},{"emoji":"📮","label":"postbox","tone":0},{"emoji":"🗳️","label":"ballot box with ballot","tone":0},{"emoji":"✏️","label":"pencil","tone":0},{"emoji":"✒️","label":"black nib","tone":0},{"emoji":"🖋️","label":"fountain pen","tone":0},{"emoji":"🖊️","label":"pen","tone":0},{"emoji":"🖌️","label":"paintbrush","tone":0},{"emoji":"🖍️","label":"crayon","tone":0},{"emoji":"📝","label":"memo","tone":0},{"emoji":"💼","label":"briefcase","tone":0},{"emoji":"📁","label":"file folder","tone":0},{"emoji":"📂","label":"open file folder","tone":0},{"emoji":"🗂️","label":"card index dividers","tone":0},{"emoji":"📅","label":"calendar","tone":0},{"emoji":"📆","label":"tear-off calendar","tone":0},{"emoji":"🗒️","label":"spiral notepad","tone":0},{"emoji":"🗓️","label":"spiral calendar","tone":0},{"emoji":"📇","label":"card index","tone":0},{"emoji":"📈","label":"chart increasing","tone":0},{"emoji":"📉","label":"chart decreasing","tone":0},{"emoji":"📊","label":"bar chart","tone":0},{"emoji":"📋️","label":"clipboard","tone":0},{"emoji":"📌","label":"pushpin","tone":0},{"emoji":"📍","label":"round pushpin","tone":0},{"emoji":"📎","label":"paperclip","tone":0},{"emoji":"🖇️","label":"linked paperclips","tone":0},{"emoji":"📏","label":"straight ruler","tone":0},{"emoji":"📐","label":"triangular ruler","tone":0},{"emoji":"✂️","label":"scissors","tone":0},{"emoji":"🗃️","label":"card file box","tone":0},{"emoji":"🗄️","label":"file cabinet","tone":0},{"emoji":"🗑️","label":"wastebasket","tone":0},{"emoji":"🔒️","label":"locked","tone":0},{"emoji":"🔓️","label":"unlocked","tone":0},{"emoji":"🔏","label":"locked with pen","tone":0},{"emoji":"🔐","label":"locked with key","tone":0},{"emoji":"🔑","label":"key","tone":0},{"emoji":"🗝️","label":"old key","tone":0},{"emoji":"🔨","label":"hammer","tone":0},{"emoji":"🪓","label":"axe","tone":0},{"emoji":"⛏️","label":"pick","tone":0},{"emoji":"⚒️","label":"hammer and pick","tone":0},{"emoji":"🛠️","label":"hammer and wrench","tone":0},{"emoji":"🗡️","label":"dagger","tone":0},{"emoji":"⚔️","label":"crossed swords","tone":0},{"emoji":"🔫","label":"water pistol","tone":0},{"emoji":"🪃","label":"boomerang","tone":0},{"emoji":"🏹","label":"bow and arrow","tone":0},{"emoji":"🛡️","label":"shield","tone":0},{"emoji":"🪚","label":"carpentry saw","tone":0},{"emoji":"🔧","label":"wrench","tone":0},{"emoji":"🪛","label":"screwdriver","tone":0},{"emoji":"🔩","label":"nut and bolt","tone":0},{"emoji":"⚙️","label":"gear","tone":0},{"emoji":"🗜️","label":"clamp","tone":0},{"emoji":"⚖️","label":"balance scale","tone":0},{"emoji":"🦯","label":"white cane","tone":0},{"emoji":"🔗","label":"link","tone":0},{"emoji":"⛓️","label":"chains","tone":0},{"emoji":"🪝","label":"hook","tone":0},{"emoji":"🧰","label":"toolbox","tone":0},{"emoji":"🧲","label":"magnet","tone":0},{"emoji":"🪜","label":"ladder","tone":0},{"emoji":"⚗️","label":"alembic","tone":0},{"emoji":"🧪","label":"test tube","tone":0},{"emoji":"🧫","label":"petri dish","tone":0},{"emoji":"🧬","label":"dna","tone":0},{"emoji":"🔬","label":"microscope","tone":0},{"emoji":"🔭","label":"telescope","tone":0},{"emoji":"📡","label":"satellite antenna","tone":0},{"emoji":"💉","label":"syringe","tone":0},{"emoji":"🩸","label":"drop of blood","tone":0},{"emoji":"💊","label":"pill","tone":0},{"emoji":"🩹","label":"adhesive bandage","tone":0},{"emoji":"🩺","label":"stethoscope","tone":0},{"emoji":"🚪","label":"door","tone":0},{"emoji":"🛗","label":"elevator","tone":0},{"emoji":"🪞","label":"mirror","tone":0},{"emoji":"🪟","label":"window","tone":0},{"emoji":"🛏️","label":"bed","tone":0},{"emoji":"🛋️","label":"couch and lamp","tone":0},{"emoji":"🪑","label":"chair","tone":0},{"emoji":"🚽","label":"toilet","tone":0},{"emoji":"🪠","label":"plunger","tone":0},{"emoji":"🚿","label":"shower","tone":0},{"emoji":"🛁","label":"bathtub","tone":0},{"emoji":"🪤","label":"mouse trap","tone":0},{"emoji":"🪒","label":"razor","tone":0},{"emoji":"🧴","label":"lotion bottle","tone":0},{"emoji":"🧷","label":"safety pin","tone":0},{"emoji":"🧹","label":"broom","tone":0},{"emoji":"🧺","label":"basket","tone":0},{"emoji":"🧻","label":"roll of paper","tone":0},{"emoji":"🪣","label":"bucket","tone":0},{"emoji":"🧼","label":"soap","tone":0},{"emoji":"🪥","label":"toothbrush","tone":0},{"emoji":"🧽","label":"sponge","tone":0},{"emoji":"🧯","label":"fire extinguisher","tone":0},{"emoji":"🛒","label":"shopping cart","tone":0},{"emoji":"🚬","label":"cigarette","tone":0},{"emoji":"⚰️","label":"coffin","tone":0},{"emoji":"🪦","label":"headstone","tone":0},{"emoji":"⚱️","label":"funeral urn","tone":0},{"emoji":"🗿","label":"moai","tone":0},{"emoji":"🪧","label":"placard","tone":0}]},{"name":"symbols","emojis":[{"emoji":"🏧","label":"ATM sign","tone":0},{"emoji":"🚮","label":"litter in bin sign","tone":0},{"emoji":"🚰","label":"potable water","tone":0},{"emoji":"♿️","label":"wheelchair symbol","tone":0},{"emoji":"🚹️","label":"men’s room","tone":0},{"emoji":"🚺️","label":"women’s room","tone":0},{"emoji":"🚻","label":"restroom","tone":0},{"emoji":"🚼️","label":"baby symbol","tone":0},{"emoji":"🚾","label":"water closet","tone":0},{"emoji":"🛂","label":"passport control","tone":0},{"emoji":"🛃","label":"customs","tone":0},{"emoji":"🛄","label":"baggage claim","tone":0},{"emoji":"🛅","label":"left luggage","tone":0},{"emoji":"⚠️","label":"warning","tone":0},{"emoji":"🚸","label":"children crossing","tone":0},{"emoji":"⛔️","label":"no entry","tone":0},{"emoji":"🚫","label":"prohibited","tone":0},{"emoji":"🚳","label":"no bicycles","tone":0},{"emoji":"🚭️","label":"no smoking","tone":0},{"emoji":"🚯","label":"no littering","tone":0},{"emoji":"🚱","label":"non-potable water","tone":0},{"emoji":"🚷","label":"no pedestrians","tone":0},{"emoji":"📵","label":"no mobile phones","tone":0},{"emoji":"🔞","label":"no one under eighteen","tone":0},{"emoji":"☢️","label":"radioactive","tone":0},{"emoji":"☣️","label":"biohazard","tone":0},{"emoji":"⬆️","label":"up arrow","tone":0},{"emoji":"↗️","label":"up-right arrow","tone":0},{"emoji":"➡️","label":"right arrow","tone":0},{"emoji":"↘️","label":"down-right arrow","tone":0},{"emoji":"⬇️","label":"down arrow","tone":0},{"emoji":"↙️","label":"down-left arrow","tone":0},{"emoji":"⬅️","label":"left arrow","tone":0},{"emoji":"↖️","label":"up-left arrow","tone":0},{"emoji":"↕️","label":"up-down arrow","tone":0},{"emoji":"↔️","label":"left-right arrow","tone":0},{"emoji":"↩️","label":"right arrow curving left","tone":0},{"emoji":"↪️","label":"left arrow curving right","tone":0},{"emoji":"⤴️","label":"right arrow curving up","tone":0},{"emoji":"⤵️","label":"right arrow curving down","tone":0},{"emoji":"🔃","label":"clockwise vertical arrows","tone":0},{"emoji":"🔄","label":"counterclockwise arrows button","tone":0},{"emoji":"🔙","label":"BACK arrow","tone":0},{"emoji":"🔚","label":"END arrow","tone":0},{"emoji":"🔛","label":"ON! arrow","tone":0},{"emoji":"🔜","label":"SOON arrow","tone":0},{"emoji":"🔝","label":"TOP arrow","tone":0},{"emoji":"🛐","label":"place of worship","tone":0},{"emoji":"⚛️","label":"atom symbol","tone":0},{"emoji":"🕉️","label":"om","tone":0},{"emoji":"✡️","label":"star of David","tone":0},{"emoji":"☸️","label":"wheel of dharma","tone":0},{"emoji":"☯️","label":"yin yang","tone":0},{"emoji":"✝️","label":"latin cross","tone":0},{"emoji":"☦️","label":"orthodox cross","tone":0},{"emoji":"☪️","label":"star and crescent","tone":0},{"emoji":"☮️","label":"peace symbol","tone":0},{"emoji":"🕎","label":"menorah","tone":0},{"emoji":"🔯","label":"dotted six-pointed star","tone":0},{"emoji":"♈️","label":"Aries","tone":0},{"emoji":"♉️","label":"Taurus","tone":0},{"emoji":"♊️","label":"Gemini","tone":0},{"emoji":"♋️","label":"Cancer","tone":0},{"emoji":"♌️","label":"Leo","tone":0},{"emoji":"♍️","label":"Virgo","tone":0},{"emoji":"♎️","label":"Libra","tone":0},{"emoji":"♏️","label":"Scorpio","tone":0},{"emoji":"♐️","label":"Sagittarius","tone":0},{"emoji":"♑️","label":"Capricorn","tone":0},{"emoji":"♒️","label":"Aquarius","tone":0},{"emoji":"♓️","label":"Pisces","tone":0},{"emoji":"⛎","label":"Ophiuchus","tone":0},{"emoji":"🔀","label":"shuffle tracks button","tone":0},{"emoji":"🔁","label":"repeat button","tone":0},{"emoji":"🔂","label":"repeat single button","tone":0},{"emoji":"▶️","label":"play button","tone":0},{"emoji":"⏩️","label":"fast-forward button","tone":0},{"emoji":"⏭️","label":"next track button","tone":0},{"emoji":"⏯️","label":"play or pause button","tone":0},{"emoji":"◀️","label":"reverse button","tone":0},{"emoji":"⏪️","label":"fast reverse button","tone":0},{"emoji":"⏮️","label":"last track button","tone":0},{"emoji":"🔼","label":"upwards button","tone":0},{"emoji":"⏫","label":"fast up button","tone":0},{"emoji":"🔽","label":"downwards button","tone":0},{"emoji":"⏬","label":"fast down button","tone":0},{"emoji":"⏸️","label":"pause button","tone":0},{"emoji":"⏹️","label":"stop button","tone":0},{"emoji":"⏺️","label":"record button","tone":0},{"emoji":"⏏️","label":"eject button","tone":0},{"emoji":"🎦","label":"cinema","tone":0},{"emoji":"🔅","label":"dim button","tone":0},{"emoji":"🔆","label":"bright button","tone":0},{"emoji":"📶","label":"antenna bars","tone":0},{"emoji":"📳","label":"vibration mode","tone":0},{"emoji":"📴","label":"mobile phone off","tone":0},{"emoji":"♀️","label":"female sign","tone":0},{"emoji":"♂️","label":"male sign","tone":0},{"emoji":"⚧️","label":"transgender symbol","tone":0},{"emoji":"✖️","label":"multiply","tone":0},{"emoji":"➕","label":"plus","tone":0},{"emoji":"➖","label":"minus","tone":0},{"emoji":"➗","label":"divide","tone":0},{"emoji":"♾️","label":"infinity","tone":0},{"emoji":"‼️","label":"double exclamation mark","tone":0},{"emoji":"⁉️","label":"exclamation question mark","tone":0},{"emoji":"❓️","label":"red question mark","tone":0},{"emoji":"❔","label":"white question mark","tone":0},{"emoji":"❕","label":"white exclamation mark","tone":0},{"emoji":"❗️","label":"red exclamation mark","tone":0},{"emoji":"〰️","label":"wavy dash","tone":0},{"emoji":"💱","label":"currency exchange","tone":0},{"emoji":"💲","label":"heavy dollar sign","tone":0},{"emoji":"⚕️","label":"medical symbol","tone":0},{"emoji":"♻️","label":"recycling symbol","tone":0},{"emoji":"⚜️","label":"fleur-de-lis","tone":0},{"emoji":"🔱","label":"trident emblem","tone":0},{"emoji":"📛","label":"name badge","tone":0},{"emoji":"🔰","label":"Japanese symbol for beginner","tone":0},{"emoji":"⭕️","label":"hollow red circle","tone":0},{"emoji":"✅","label":"check mark button","tone":0},{"emoji":"☑️","label":"check box with check","tone":0},{"emoji":"✔️","label":"check mark","tone":0},{"emoji":"❌","label":"cross mark","tone":0},{"emoji":"❎","label":"cross mark button","tone":0},{"emoji":"➰","label":"curly loop","tone":0},{"emoji":"➿","label":"double curly loop","tone":0},{"emoji":"〽️","label":"part alternation mark","tone":0},{"emoji":"✳️","label":"eight-spoked asterisk","tone":0},{"emoji":"✴️","label":"eight-pointed star","tone":0},{"emoji":"❇️","label":"sparkle","tone":0},{"emoji":"©️","label":"copyright","tone":0},{"emoji":"®️","label":"registered","tone":0},{"emoji":"™️","label":"trade mark","tone":0},{"emoji":"#️⃣","label":"keycap: #","tone":0},{"emoji":"*️⃣","label":"keycap: *","tone":0},{"emoji":"0️⃣","label":"keycap: 0","tone":0},{"emoji":"1️⃣","label":"keycap: 1","tone":0},{"emoji":"2️⃣","label":"keycap: 2","tone":0},{"emoji":"3️⃣","label":"keycap: 3","tone":0},{"emoji":"4️⃣","label":"keycap: 4","tone":0},{"emoji":"5️⃣","label":"keycap: 5","tone":0},{"emoji":"6️⃣","label":"keycap: 6","tone":0},{"emoji":"7️⃣","label":"keycap: 7","tone":0},{"emoji":"8️⃣","label":"keycap: 8","tone":0},{"emoji":"9️⃣","label":"keycap: 9","tone":0},{"emoji":"🔟","label":"keycap: 10","tone":0},{"emoji":"🔠","label":"input latin uppercase","tone":0},{"emoji":"🔡","label":"input latin lowercase","tone":0},{"emoji":"🔢","label":"input numbers","tone":0},{"emoji":"🔣","label":"input symbols","tone":0},{"emoji":"🔤","label":"input latin letters","tone":0},{"emoji":"🅰️","label":"A button (blood type)","tone":0},{"emoji":"🆎","label":"AB button (blood type)","tone":0},{"emoji":"🅱️","label":"B button (blood type)","tone":0},{"emoji":"🆑","label":"CL button","tone":0},{"emoji":"🆒","label":"COOL button","tone":0},{"emoji":"🆓","label":"FREE button","tone":0},{"emoji":"ℹ️","label":"information","tone":0},{"emoji":"🆔","label":"ID button","tone":0},{"emoji":"Ⓜ️","label":"circled M","tone":0},{"emoji":"🆕","label":"NEW button","tone":0},{"emoji":"🆖","label":"NG button","tone":0},{"emoji":"🅾️","label":"O button (blood type)","tone":0},{"emoji":"🆗","label":"OK button","tone":0},{"emoji":"🅿️","label":"P button","tone":0},{"emoji":"🆘","label":"SOS button","tone":0},{"emoji":"🆙","label":"UP! button","tone":0},{"emoji":"🆚","label":"VS button","tone":0},{"emoji":"🈁","label":"Japanese “here” button","tone":0},{"emoji":"🈂️","label":"Japanese “service charge” button","tone":0},{"emoji":"🈷️","label":"Japanese “monthly amount” button","tone":0},{"emoji":"🈶","label":"Japanese “not free of charge” button","tone":0},{"emoji":"🈯️","label":"Japanese “reserved” button","tone":0},{"emoji":"🉐","label":"Japanese “bargain” button","tone":0},{"emoji":"🈹","label":"Japanese “discount” button","tone":0},{"emoji":"🈚️","label":"Japanese “free of charge” button","tone":0},{"emoji":"🈲","label":"Japanese “prohibited” button","tone":0},{"emoji":"🉑","label":"Japanese “acceptable” button","tone":0},{"emoji":"🈸","label":"Japanese “application” button","tone":0},{"emoji":"🈴","label":"Japanese “passing grade” button","tone":0},{"emoji":"🈳","label":"Japanese “vacancy” button","tone":0},{"emoji":"㊗️","label":"Japanese “congratulations” button","tone":0},{"emoji":"㊙️","label":"Japanese “secret” button","tone":0},{"emoji":"🈺","label":"Japanese “open for business” button","tone":0},{"emoji":"🈵","label":"Japanese “no vacancy” button","tone":0},{"emoji":"🔴","label":"red circle","tone":0},{"emoji":"🟠","label":"orange circle","tone":0},{"emoji":"🟡","label":"yellow circle","tone":0},{"emoji":"🟢","label":"green circle","tone":0},{"emoji":"🔵","label":"blue circle","tone":0},{"emoji":"🟣","label":"purple circle","tone":0},{"emoji":"🟤","label":"brown circle","tone":0},{"emoji":"⚫️","label":"black circle","tone":0},{"emoji":"⚪️","label":"white circle","tone":0},{"emoji":"🟥","label":"red square","tone":0},{"emoji":"🟧","label":"orange square","tone":0},{"emoji":"🟨","label":"yellow square","tone":0},{"emoji":"🟩","label":"green square","tone":0},{"emoji":"🟦","label":"blue square","tone":0},{"emoji":"🟪","label":"purple square","tone":0},{"emoji":"🟫","label":"brown square","tone":0},{"emoji":"⬛️","label":"black large square","tone":0},{"emoji":"⬜️","label":"white large square","tone":0},{"emoji":"◼️","label":"black medium square","tone":0},{"emoji":"◻️","label":"white medium square","tone":0},{"emoji":"◾️","label":"black medium-small square","tone":0},{"emoji":"◽️","label":"white medium-small square","tone":0},{"emoji":"▪️","label":"black small square","tone":0},{"emoji":"▫️","label":"white small square","tone":0},{"emoji":"🔶","label":"large orange diamond","tone":0},{"emoji":"🔷","label":"large blue diamond","tone":0},{"emoji":"🔸","label":"small orange diamond","tone":0},{"emoji":"🔹","label":"small blue diamond","tone":0},{"emoji":"🔺","label":"red triangle pointed up","tone":0},{"emoji":"🔻","label":"red triangle pointed down","tone":0},{"emoji":"💠","label":"diamond with a dot","tone":0},{"emoji":"🔘","label":"radio button","tone":0},{"emoji":"🔳","label":"white square button","tone":0},{"emoji":"🔲","label":"black square button","tone":0},{"emoji":"🏁","label":"chequered flag","tone":0},{"emoji":"🚩","label":"triangular flag","tone":0},{"emoji":"🎌","label":"crossed flags","tone":0},{"emoji":"🏴","label":"black flag","tone":0},{"emoji":"🏳️","label":"white flag","tone":0},{"emoji":"🏳️‍🌈","label":"rainbow flag","tone":0},{"emoji":"🏳️‍⚧️","label":"transgender flag","tone":0},{"emoji":"🏴‍☠️","label":"pirate flag","tone":0},{"emoji":"🇦🇨","label":"flag: Ascension Island","tone":0},{"emoji":"🇦🇩","label":"flag: Andorra","tone":0},{"emoji":"🇦🇪","label":"flag: United Arab Emirates","tone":0},{"emoji":"🇦🇫","label":"flag: Afghanistan","tone":0},{"emoji":"🇦🇬","label":"flag: Antigua & Barbuda","tone":0},{"emoji":"🇦🇮","label":"flag: Anguilla","tone":0},{"emoji":"🇦🇱","label":"flag: Albania","tone":0},{"emoji":"🇦🇲","label":"flag: Armenia","tone":0},{"emoji":"🇦🇴","label":"flag: Angola","tone":0},{"emoji":"🇦🇶","label":"flag: Antarctica","tone":0},{"emoji":"🇦🇷","label":"flag: Argentina","tone":0},{"emoji":"🇦🇸","label":"flag: American Samoa","tone":0},{"emoji":"🇦🇹","label":"flag: Austria","tone":0},{"emoji":"🇦🇺","label":"flag: Australia","tone":0},{"emoji":"🇦🇼","label":"flag: Aruba","tone":0},{"emoji":"🇦🇽","label":"flag: Åland Islands","tone":0},{"emoji":"🇦🇿","label":"flag: Azerbaijan","tone":0},{"emoji":"🇧🇦","label":"flag: Bosnia & Herzegovina","tone":0},{"emoji":"🇧🇧","label":"flag: Barbados","tone":0},{"emoji":"🇧🇩","label":"flag: Bangladesh","tone":0},{"emoji":"🇧🇪","label":"flag: Belgium","tone":0},{"emoji":"🇧🇫","label":"flag: Burkina Faso","tone":0},{"emoji":"🇧🇬","label":"flag: Bulgaria","tone":0},{"emoji":"🇧🇭","label":"flag: Bahrain","tone":0},{"emoji":"🇧🇮","label":"flag: Burundi","tone":0},{"emoji":"🇧🇯","label":"flag: Benin","tone":0},{"emoji":"🇧🇱","label":"flag: St. Barthélemy","tone":0},{"emoji":"🇧🇲","label":"flag: Bermuda","tone":0},{"emoji":"🇧🇳","label":"flag: Brunei","tone":0},{"emoji":"🇧🇴","label":"flag: Bolivia","tone":0},{"emoji":"🇧🇶","label":"flag: Caribbean Netherlands","tone":0},{"emoji":"🇧🇷","label":"flag: Brazil","tone":0},{"emoji":"🇧🇸","label":"flag: Bahamas","tone":0},{"emoji":"🇧🇹","label":"flag: Bhutan","tone":0},{"emoji":"🇧🇻","label":"flag: Bouvet Island","tone":0},{"emoji":"🇧🇼","label":"flag: Botswana","tone":0},{"emoji":"🇧🇾","label":"flag: Belarus","tone":0},{"emoji":"🇧🇿","label":"flag: Belize","tone":0},{"emoji":"🇨🇦","label":"flag: Canada","tone":0},{"emoji":"🇨🇨","label":"flag: Cocos (Keeling) Islands","tone":0},{"emoji":"🇨🇩","label":"flag: Congo - Kinshasa","tone":0},{"emoji":"🇨🇫","label":"flag: Central African Republic","tone":0},{"emoji":"🇨🇬","label":"flag: Congo - Brazzaville","tone":0},{"emoji":"🇨🇭","label":"flag: Switzerland","tone":0},{"emoji":"🇨🇮","label":"flag: Côte d’Ivoire","tone":0},{"emoji":"🇨🇰","label":"flag: Cook Islands","tone":0},{"emoji":"🇨🇱","label":"flag: Chile","tone":0},{"emoji":"🇨🇲","label":"flag: Cameroon","tone":0},{"emoji":"🇨🇳","label":"flag: China","tone":0},{"emoji":"🇨🇴","label":"flag: Colombia","tone":0},{"emoji":"🇨🇵","label":"flag: Clipperton Island","tone":0},{"emoji":"🇨🇷","label":"flag: Costa Rica","tone":0},{"emoji":"🇨🇺","label":"flag: Cuba","tone":0},{"emoji":"🇨🇻","label":"flag: Cape Verde","tone":0},{"emoji":"🇨🇼","label":"flag: Curaçao","tone":0},{"emoji":"🇨🇽","label":"flag: Christmas Island","tone":0},{"emoji":"🇨🇾","label":"flag: Cyprus","tone":0},{"emoji":"🇨🇿","label":"flag: Czechia","tone":0},{"emoji":"🇩🇪","label":"flag: Germany","tone":0},{"emoji":"🇩🇬","label":"flag: Diego Garcia","tone":0},{"emoji":"🇩🇯","label":"flag: Djibouti","tone":0},{"emoji":"🇩🇰","label":"flag: Denmark","tone":0},{"emoji":"🇩🇲","label":"flag: Dominica","tone":0},{"emoji":"🇩🇴","label":"flag: Dominican Republic","tone":0},{"emoji":"🇩🇿","label":"flag: Algeria","tone":0},{"emoji":"🇪🇦","label":"flag: Ceuta & Melilla","tone":0},{"emoji":"🇪🇨","label":"flag: Ecuador","tone":0},{"emoji":"🇪🇪","label":"flag: Estonia","tone":0},{"emoji":"🇪🇬","label":"flag: Egypt","tone":0},{"emoji":"🇪🇭","label":"flag: Western Sahara","tone":0},{"emoji":"🇪🇷","label":"flag: Eritrea","tone":0},{"emoji":"🇪🇸","label":"flag: Spain","tone":0},{"emoji":"🇪🇹","label":"flag: Ethiopia","tone":0},{"emoji":"🇪🇺","label":"flag: European Union","tone":0},{"emoji":"🇫🇮","label":"flag: Finland","tone":0},{"emoji":"🇫🇯","label":"flag: Fiji","tone":0},{"emoji":"🇫🇰","label":"flag: Falkland Islands","tone":0},{"emoji":"🇫🇲","label":"flag: Micronesia","tone":0},{"emoji":"🇫🇴","label":"flag: Faroe Islands","tone":0},{"emoji":"🇫🇷","label":"flag: France","tone":0},{"emoji":"🇬🇦","label":"flag: Gabon","tone":0},{"emoji":"🇬🇧","label":"flag: United Kingdom","tone":0},{"emoji":"🇬🇩","label":"flag: Grenada","tone":0},{"emoji":"🇬🇪","label":"flag: Georgia","tone":0},{"emoji":"🇬🇫","label":"flag: French Guiana","tone":0},{"emoji":"🇬🇬","label":"flag: Guernsey","tone":0},{"emoji":"🇬🇭","label":"flag: Ghana","tone":0},{"emoji":"🇬🇮","label":"flag: Gibraltar","tone":0},{"emoji":"🇬🇱","label":"flag: Greenland","tone":0},{"emoji":"🇬🇲","label":"flag: Gambia","tone":0},{"emoji":"🇬🇳","label":"flag: Guinea","tone":0},{"emoji":"🇬🇵","label":"flag: Guadeloupe","tone":0},{"emoji":"🇬🇶","label":"flag: Equatorial Guinea","tone":0},{"emoji":"🇬🇷","label":"flag: Greece","tone":0},{"emoji":"🇬🇸","label":"flag: South Georgia & South Sandwich Islands","tone":0},{"emoji":"🇬🇹","label":"flag: Guatemala","tone":0},{"emoji":"🇬🇺","label":"flag: Guam","tone":0},{"emoji":"🇬🇼","label":"flag: Guinea-Bissau","tone":0},{"emoji":"🇬🇾","label":"flag: Guyana","tone":0},{"emoji":"🇭🇰","label":"flag: Hong Kong SAR China","tone":0},{"emoji":"🇭🇲","label":"flag: Heard & McDonald Islands","tone":0},{"emoji":"🇭🇳","label":"flag: Honduras","tone":0},{"emoji":"🇭🇷","label":"flag: Croatia","tone":0},{"emoji":"🇭🇹","label":"flag: Haiti","tone":0},{"emoji":"🇭🇺","label":"flag: Hungary","tone":0},{"emoji":"🇮🇨","label":"flag: Canary Islands","tone":0},{"emoji":"🇮🇩","label":"flag: Indonesia","tone":0},{"emoji":"🇮🇪","label":"flag: Ireland","tone":0},{"emoji":"🇮🇱","label":"flag: Israel","tone":0},{"emoji":"🇮🇲","label":"flag: Isle of Man","tone":0},{"emoji":"🇮🇳","label":"flag: India","tone":0},{"emoji":"🇮🇴","label":"flag: British Indian Ocean Territory","tone":0},{"emoji":"🇮🇶","label":"flag: Iraq","tone":0},{"emoji":"🇮🇷","label":"flag: Iran","tone":0},{"emoji":"🇮🇸","label":"flag: Iceland","tone":0},{"emoji":"🇮🇹","label":"flag: Italy","tone":0},{"emoji":"🇯🇪","label":"flag: Jersey","tone":0},{"emoji":"🇯🇲","label":"flag: Jamaica","tone":0},{"emoji":"🇯🇴","label":"flag: Jordan","tone":0},{"emoji":"🇯🇵","label":"flag: Japan","tone":0},{"emoji":"🇰🇪","label":"flag: Kenya","tone":0},{"emoji":"🇰🇬","label":"flag: Kyrgyzstan","tone":0},{"emoji":"🇰🇭","label":"flag: Cambodia","tone":0},{"emoji":"🇰🇮","label":"flag: Kiribati","tone":0},{"emoji":"🇰🇲","label":"flag: Comoros","tone":0},{"emoji":"🇰🇳","label":"flag: St. Kitts & Nevis","tone":0},{"emoji":"🇰🇵","label":"flag: North Korea","tone":0},{"emoji":"🇰🇷","label":"flag: South Korea","tone":0},{"emoji":"🇰🇼","label":"flag: Kuwait","tone":0},{"emoji":"🇰🇾","label":"flag: Cayman Islands","tone":0},{"emoji":"🇰🇿","label":"flag: Kazakhstan","tone":0},{"emoji":"🇱🇦","label":"flag: Laos","tone":0},{"emoji":"🇱🇧","label":"flag: Lebanon","tone":0},{"emoji":"🇱🇨","label":"flag: St. Lucia","tone":0},{"emoji":"🇱🇮","label":"flag: Liechtenstein","tone":0},{"emoji":"🇱🇰","label":"flag: Sri Lanka","tone":0},{"emoji":"🇱🇷","label":"flag: Liberia","tone":0},{"emoji":"🇱🇸","label":"flag: Lesotho","tone":0},{"emoji":"🇱🇹","label":"flag: Lithuania","tone":0},{"emoji":"🇱🇺","label":"flag: Luxembourg","tone":0},{"emoji":"🇱🇻","label":"flag: Latvia","tone":0},{"emoji":"🇱🇾","label":"flag: Libya","tone":0},{"emoji":"🇲🇦","label":"flag: Morocco","tone":0},{"emoji":"🇲🇨","label":"flag: Monaco","tone":0},{"emoji":"🇲🇩","label":"flag: Moldova","tone":0},{"emoji":"🇲🇪","label":"flag: Montenegro","tone":0},{"emoji":"🇲🇫","label":"flag: St. Martin","tone":0},{"emoji":"🇲🇬","label":"flag: Madagascar","tone":0},{"emoji":"🇲🇭","label":"flag: Marshall Islands","tone":0},{"emoji":"🇲🇰","label":"flag: North Macedonia","tone":0},{"emoji":"🇲🇱","label":"flag: Mali","tone":0},{"emoji":"🇲🇲","label":"flag: Myanmar (Burma)","tone":0},{"emoji":"🇲🇳","label":"flag: Mongolia","tone":0},{"emoji":"🇲🇴","label":"flag: Macao SAR China","tone":0},{"emoji":"🇲🇵","label":"flag: Northern Mariana Islands","tone":0},{"emoji":"🇲🇶","label":"flag: Martinique","tone":0},{"emoji":"🇲🇷","label":"flag: Mauritania","tone":0},{"emoji":"🇲🇸","label":"flag: Montserrat","tone":0},{"emoji":"🇲🇹","label":"flag: Malta","tone":0},{"emoji":"🇲🇺","label":"flag: Mauritius","tone":0},{"emoji":"🇲🇻","label":"flag: Maldives","tone":0},{"emoji":"🇲🇼","label":"flag: Malawi","tone":0},{"emoji":"🇲🇽","label":"flag: Mexico","tone":0},{"emoji":"🇲🇾","label":"flag: Malaysia","tone":0},{"emoji":"🇲🇿","label":"flag: Mozambique","tone":0},{"emoji":"🇳🇦","label":"flag: Namibia","tone":0},{"emoji":"🇳🇨","label":"flag: New Caledonia","tone":0},{"emoji":"🇳🇪","label":"flag: Niger","tone":0},{"emoji":"🇳🇫","label":"flag: Norfolk Island","tone":0},{"emoji":"🇳🇬","label":"flag: Nigeria","tone":0},{"emoji":"🇳🇮","label":"flag: Nicaragua","tone":0},{"emoji":"🇳🇱","label":"flag: Netherlands","tone":0},{"emoji":"🇳🇴","label":"flag: Norway","tone":0},{"emoji":"🇳🇵","label":"flag: Nepal","tone":0},{"emoji":"🇳🇷","label":"flag: Nauru","tone":0},{"emoji":"🇳🇺","label":"flag: Niue","tone":0},{"emoji":"🇳🇿","label":"flag: New Zealand","tone":0},{"emoji":"🇴🇲","label":"flag: Oman","tone":0},{"emoji":"🇵🇦","label":"flag: Panama","tone":0},{"emoji":"🇵🇪","label":"flag: Peru","tone":0},{"emoji":"🇵🇫","label":"flag: French Polynesia","tone":0},{"emoji":"🇵🇬","label":"flag: Papua New Guinea","tone":0},{"emoji":"🇵🇭","label":"flag: Philippines","tone":0},{"emoji":"🇵🇰","label":"flag: Pakistan","tone":0},{"emoji":"🇵🇱","label":"flag: Poland","tone":0},{"emoji":"🇵🇲","label":"flag: St. Pierre & Miquelon","tone":0},{"emoji":"🇵🇳","label":"flag: Pitcairn Islands","tone":0},{"emoji":"🇵🇷","label":"flag: Puerto Rico","tone":0},{"emoji":"🇵🇸","label":"flag: Palestinian Territories","tone":0},{"emoji":"🇵🇹","label":"flag: Portugal","tone":0},{"emoji":"🇵🇼","label":"flag: Palau","tone":0},{"emoji":"🇵🇾","label":"flag: Paraguay","tone":0},{"emoji":"🇶🇦","label":"flag: Qatar","tone":0},{"emoji":"🇷🇪","label":"flag: Réunion","tone":0},{"emoji":"🇷🇴","label":"flag: Romania","tone":0},{"emoji":"🇷🇸","label":"flag: Serbia","tone":0},{"emoji":"🇷🇺","label":"flag: Russia","tone":0},{"emoji":"🇷🇼","label":"flag: Rwanda","tone":0},{"emoji":"🇸🇦","label":"flag: Saudi Arabia","tone":0},{"emoji":"🇸🇧","label":"flag: Solomon Islands","tone":0},{"emoji":"🇸🇨","label":"flag: Seychelles","tone":0},{"emoji":"🇸🇩","label":"flag: Sudan","tone":0},{"emoji":"🇸🇪","label":"flag: Sweden","tone":0},{"emoji":"🇸🇬","label":"flag: Singapore","tone":0},{"emoji":"🇸🇭","label":"flag: St. Helena","tone":0},{"emoji":"🇸🇮","label":"flag: Slovenia","tone":0},{"emoji":"🇸🇯","label":"flag: Svalbard & Jan Mayen","tone":0},{"emoji":"🇸🇰","label":"flag: Slovakia","tone":0},{"emoji":"🇸🇱","label":"flag: Sierra Leone","tone":0},{"emoji":"🇸🇲","label":"flag: San Marino","tone":0},{"emoji":"🇸🇳","label":"flag: Senegal","tone":0},{"emoji":"🇸🇴","label":"flag: Somalia","tone":0},{"emoji":"🇸🇷","label":"flag: Suriname","tone":0},{"emoji":"🇸🇸","label":"flag: South Sudan","tone":0},{"emoji":"🇸🇹","label":"flag: São Tomé & Príncipe","tone":0},{"emoji":"🇸🇻","label":"flag: El Salvador","tone":0},{"emoji":"🇸🇽","label":"flag: Sint Maarten","tone":0},{"emoji":"🇸🇾","label":"flag: Syria","tone":0},{"emoji":"🇸🇿","label":"flag: Eswatini","tone":0},{"emoji":"🇹🇦","label":"flag: Tristan da Cunha","tone":0},{"emoji":"🇹🇨","label":"flag: Turks & Caicos Islands","tone":0},{"emoji":"🇹🇩","label":"flag: Chad","tone":0},{"emoji":"🇹🇫","label":"flag: French Southern Territories","tone":0},{"emoji":"🇹🇬","label":"flag: Togo","tone":0},{"emoji":"🇹🇭","label":"flag: Thailand","tone":0},{"emoji":"🇹🇯","label":"flag: Tajikistan","tone":0},{"emoji":"🇹🇰","label":"flag: Tokelau","tone":0},{"emoji":"🇹🇱","label":"flag: Timor-Leste","tone":0},{"emoji":"🇹🇲","label":"flag: Turkmenistan","tone":0},{"emoji":"🇹🇳","label":"flag: Tunisia","tone":0},{"emoji":"🇹🇴","label":"flag: Tonga","tone":0},{"emoji":"🇹🇷","label":"flag: Turkey","tone":0},{"emoji":"🇹🇹","label":"flag: Trinidad & Tobago","tone":0},{"emoji":"🇹🇻","label":"flag: Tuvalu","tone":0},{"emoji":"🇹🇼","label":"flag: Taiwan","tone":0},{"emoji":"🇹🇿","label":"flag: Tanzania","tone":0},{"emoji":"🇺🇦","label":"flag: Ukraine","tone":0},{"emoji":"🇺🇬","label":"flag: Uganda","tone":0},{"emoji":"🇺🇲","label":"flag: U.S. Outlying Islands","tone":0},{"emoji":"🇺🇳","label":"flag: United Nations","tone":0},{"emoji":"🇺🇸","label":"flag: United States","tone":0},{"emoji":"🇺🇾","label":"flag: Uruguay","tone":0},{"emoji":"🇺🇿","label":"flag: Uzbekistan","tone":0},{"emoji":"🇻🇦","label":"flag: Vatican City","tone":0},{"emoji":"🇻🇨","label":"flag: St. Vincent & Grenadines","tone":0},{"emoji":"🇻🇪","label":"flag: Venezuela","tone":0},{"emoji":"🇻🇬","label":"flag: British Virgin Islands","tone":0},{"emoji":"🇻🇮","label":"flag: U.S. Virgin Islands","tone":0},{"emoji":"🇻🇳","label":"flag: Vietnam","tone":0},{"emoji":"🇻🇺","label":"flag: Vanuatu","tone":0},{"emoji":"🇼🇫","label":"flag: Wallis & Futuna","tone":0},{"emoji":"🇼🇸","label":"flag: Samoa","tone":0},{"emoji":"🇽🇰","label":"flag: Kosovo","tone":0},{"emoji":"🇾🇪","label":"flag: Yemen","tone":0},{"emoji":"🇾🇹","label":"flag: Mayotte","tone":0},{"emoji":"🇿🇦","label":"flag: South Africa","tone":0},{"emoji":"🇿🇲","label":"flag: Zambia","tone":0},{"emoji":"🇿🇼","label":"flag: Zimbabwe","tone":0},{"emoji":"🏴󠁧󠁢󠁥󠁮󠁧󠁿","label":"flag: England","tone":0},{"emoji":"🏴󠁧󠁢󠁳󠁣󠁴󠁿","label":"flag: Scotland","tone":0},{"emoji":"🏴󠁧󠁢󠁷󠁬󠁳󠁿","label":"flag: Wales","tone":0}]}]');
-const templateHTML$H = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    width: 384px;\n    max-height: 504px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding: 12px 0;\n  }\n\n  #toolbar {\n    display: flex;\n    gap: 8px;\n    padding: 0 12px;\n  }\n\n  #search {\n    flex: 1;\n    min-width: 0;\n  }\n\n  #search-clear:not(.active) {\n    display: none;\n  }\n\n  #list-wrapper {\n    overflow-y: auto;\n    overflow-x: hidden;\n    width: 384px;\n    box-sizing: border-box;\n    scrollbar-gutter: stable;\n  }\n\n  #list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding: 4px 12px 0;\n    width: 384px;\n    box-sizing: border-box;\n  }\n\n  #not-found {\n    display: none;\n    width: 100%;\n    height: 48px;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    user-select: none;\n\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-emoji-picker-color-default-text-not-found\n      );\n    --sinch-comp-text-font: var(--sinch-comp-emoji-picker-font-not-found);\n  }\n\n  #not-found.active {\n    display: flex;\n  }\n\n  sinch-tabs-icon-option > svg {\n    pointer-events: none;\n\n    /* Variables Defined in parent sinch-tabs-icon-option */\n    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n    height: var(--sinch-global-size-icon);\n    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */\n    fill: var(--sinch-global-color-icon);\n  }\n</style>\n\n<div id="wrapper">\n  <div id="toolbar">\n    <sinch-input id="search" size="l" aria-label="Search emojis">\n      <sinch-icon icons-version="2" name="magnifying-glass"\n        id="icon-search"\n        slot="icon"\n      ></sinch-icon>\n      <sinch-button id="search-clear" slot="right" aria-label="Clear">\n        <sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon>\n      </sinch-button>\n    </sinch-input>\n    <sinch-popover\n      id="skin-popover"\n      orientation="bottom-left"\n      aria-label="Emoji skin tone select"\n    >\n      <sinch-button\n        id="skin-button"\n        slot="target"\n        size="l"\n        aria-label="Select emoji skin tones"\n      >\n        <sinch-color-swatch\n          id="skin-swatch"\n          slot="icon"\n          name="skintone-default"\n        ></sinch-color-swatch>\n      </sinch-button>\n      <sinch-color-menu\n        id="skin-menu"\n        slot="content"\n        cols="1"\n        value="skintone-default"\n        aria-label="Emoji skin tone menu"\n      >\n        <sinch-color-menu-option\n          value="skintone-default"\n        ></sinch-color-menu-option>\n        <sinch-color-menu-option\n          value="skintone-light"\n        ></sinch-color-menu-option>\n        <sinch-color-menu-option\n          value="skintone-light-medium"\n        ></sinch-color-menu-option>\n        <sinch-color-menu-option\n          value="skintone-medium"\n        ></sinch-color-menu-option>\n        <sinch-color-menu-option\n          value="skintone-medium-dark"\n        ></sinch-color-menu-option>\n        <sinch-color-menu-option\n          value="skintone-dark"\n        ></sinch-color-menu-option>\n      </sinch-color-menu>\n    </sinch-popover>\n  </div>\n  <sinch-tabs id="tabs" aria-label="Emoji groups">\n    <sinch-tabs-icon-option id="tab-emotions">\n      <svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">\n        <path\n          d="M15.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"\n        />\n        <path\n          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm4.41-6.11a.745.745 0 0 0-1.03.24A3.98 3.98 0 0 1 12 16c-1.38 0-2.64-.7-3.38-1.88a.747.747 0 1 0-1.27.79A5.446 5.446 0 0 0 12 17.5c1.9 0 3.63-.97 4.65-2.58.22-.35.11-.81-.24-1.03Z"\n        />\n      </svg>\n    </sinch-tabs-icon-option>\n    <sinch-tabs-icon-option id="tab-people">\n      <svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">\n        <path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />\n        <path\n          d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54a5.023 5.023 0 0 1-4.92-4.15.998.998 0 0 0-.98-.85c-.61 0-1.09.54-1 1.14A7.037 7.037 0 0 0 9 8.71V21c0 .55.45 1 1 1s1-.45 1-1v-5h2v5c0 .55.45 1 1 1s1-.45 1-1V10.05l3.24 3.24a.996.996 0 1 0 1.41-1.41l-3.76-3.77Z"\n        />\n      </svg>\n    </sinch-tabs-icon-option>\n    <sinch-tabs-icon-option id="tab-animals">\n      <svg slot="icon" viewBox="0 0 24 24">\n        <path\n          d="M17 14c-.24-.24-.44-.49-.65-.75C17.51 11.5 19 8.56 19 5c0-1.95-.74-3-2-3-1.54 0-3.96 2.06-5 5.97C10.96 4.06 8.54 2 7 2 5.74 2 5 3.05 5 5c0 3.56 1.49 6.5 2.65 8.25-.21.26-.41.51-.65.75-.25.25-2 1.39-2 3.5C5 19.98 7.02 22 9.5 22c1.5 0 2.5-.5 2.5-.5s1 .5 2.5.5c2.48 0 4.5-2.02 4.5-4.5 0-2.11-1.75-3.25-2-3.5Zm-.12-9.97c.06.17.12.48.12.97 0 2.84-1.11 5.24-2.07 6.78-.38-.26-.83-.48-1.4-.62.24-4.52 2.44-6.83 3.35-7.13ZM7 5c0-.49.06-.8.12-.97.91.3 3.11 2.61 3.36 7.13-.58.14-1.03.35-1.4.62C8.11 10.24 7 7.84 7 5Zm7.5 15c-1 0-1.8-.33-2.22-.56.42-.18.72-.71.72-.94 0-.28-.45-.5-1-.5s-1 .22-1 .5c0 .23.3.76.72.94-.42.23-1.22.56-2.22.56A2.5 2.5 0 0 1 7 17.5c0-.7.43-1.24 1-1.73.44-.36.61-.52 1.3-1.37.76-.95 1.09-1.4 2.7-1.4s1.94.45 2.7 1.4c.69.85.86 1.01 1.3 1.37.57.49 1 1.03 1 1.73a2.5 2.5 0 0 1-2.5 2.5Zm-.5-4c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Zm-3 0c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Z"\n        />\n      </svg>\n    </sinch-tabs-icon-option>\n    <sinch-tabs-icon-option id="tab-food">\n      <svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">\n        <path\n          d="M19 19H3c-.55 0-1 .45-1 1s.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1Zm1-16H9v2.4l1.81 1.45c.12.09.19.24.19.39v4.26c0 .28-.22.5-.5.5h-4c-.28 0-.5-.22-.5-.5V7.24c0-.15.07-.3.19-.39L8 5.4V3H6c-1.1 0-2 .9-2 2v8c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 5h-2V5h2v3Z"\n        />\n      </svg>\n    </sinch-tabs-icon-option>\n    <sinch-tabs-icon-option id="tab-travel">\n      <svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">\n        <path\n          d="m21.99 14.77-1.43-4.11c-.14-.4-.52-.66-.97-.66H12.4c-.46 0-.83.26-.98.66L10 14.77v5.24c0 .55.45.99 1 .99s1-.45 1-1v-1h8v1a1 1 0 0 0 2 .01l-.01-5.24Zm-10.38-1.43.69-2c.05-.2.24-.34.46-.34h6.48c.21 0 .4.14.47.34l.69 2a.5.5 0 0 1-.47.66h-7.85a.5.5 0 0 1-.47-.66Zm.38 3.66c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Z"\n        />\n        <path\n          d="M14 4.5V9h1V4c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1v4H3c-.55 0-1 .45-1 1v12h1V9.5c0-.28.22-.5.5-.5h4c.28 0 .5-.22.5-.5v-4c0-.28.22-.5.5-.5h5c.28 0 .5.22.5.5Z"\n        />\n        <path d="M7 11H5v2h2v-2Zm5-6h-2v2h2V5ZM7 15H5v2h2v-2Zm0 4H5v2h2v-2Z" />\n      </svg>\n    </sinch-tabs-icon-option>\n    <sinch-tabs-icon-option id="tab-sports">\n      <svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">\n        <path\n          d="M19.52 2.49C17.18.15 12.9.62 9.97 3.55c-1.6 1.6-2.52 3.87-2.54 5.46-.02 1.58.26 3.89-1.35 5.5l-3.54 3.53c-.39.39-.39 1.02 0 1.42.39.39 1.02.39 1.42 0l3.53-3.54c1.61-1.61 3.92-1.33 5.5-1.35 1.58-.02 3.86-.94 5.46-2.54 2.93-2.92 3.41-7.2 1.07-9.54Zm-9.2 9.19c-1.53-1.53-1.05-4.61 1.06-6.72 2.11-2.11 5.18-2.59 6.72-1.06 1.53 1.53 1.05 4.61-1.06 6.72-2.11 2.11-5.18 2.59-6.72 1.06ZM18 17c.53 0 1.04.21 1.41.59.78.78.78 2.05 0 2.83-.37.37-.88.58-1.41.58-.53 0-1.04-.21-1.41-.59-.78-.78-.78-2.05 0-2.83.37-.37.88-.58 1.41-.58Zm0-2a3.998 3.998 0 0 0-2.83 6.83c.78.78 1.81 1.17 2.83 1.17a3.998 3.998 0 0 0 2.83-6.83A3.998 3.998 0 0 0 18 15Z"\n        />\n      </svg>\n    </sinch-tabs-icon-option>\n    <sinch-tabs-icon-option id="tab-objects">\n      <svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">\n        <path\n          d="M12 3c-.46 0-.93.04-1.4.14-2.76.53-4.96 2.76-5.48 5.52-.48 2.61.48 5.01 2.22 6.56.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28a1.98 1.98 0 0 0 3.44 0H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46A6.956 6.956 0 0 0 19 10c0-3.87-3.13-7-7-7Zm.5 11h-1v-2.59L9.67 9.59l.71-.71L12 10.5l1.62-1.62.71.71-1.83 1.83V14Zm1 5c-.01 0-.02-.01-.03-.01V19h-2.94v-.01c-.01 0-.02.01-.03.01-.28 0-.5-.22-.5-.5s.22-.5.5-.5c.01 0 .02.01.03.01V18h2.94v.01c.01 0 .02-.01.03-.01.28 0 .5.22.5.5s-.22.5-.5.5Zm0-2h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3c.28 0 .5.22.5.5s-.22.5-.5.5Z"\n        />\n      </svg>\n    </sinch-tabs-icon-option>\n    <sinch-tabs-icon-option id="tab-symbols">\n      <svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">\n        <path\n          d="M10 5H4c-.55 0-1 .45-1 1s.45 1 1 1h2v3c0 .55.45 1 1 1s1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1Zm0-3H4c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1Zm10.89 11.11a.996.996 0 0 0-1.41 0l-6.36 6.36a.996.996 0 1 0 1.41 1.41l6.36-6.36a.996.996 0 0 0 0-1.41ZM14.5 16a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-4-10A2.5 2.5 0 0 0 18 8.5V4h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1v3.51c-.42-.32-.93-.51-1.5-.51a2.5 2.5 0 0 0 0 5Zm-5.05 7.09a.996.996 0 1 0-1.41-1.41l-.71.71-.71-.71.35-.35a2.499 2.499 0 0 0-1.77-4.27 2.499 2.499 0 0 0-1.77 4.27l.35.35-1.06 1.06c-.98.98-.98 2.56 0 3.54.5.48 1.14.72 1.78.72.64 0 1.28-.24 1.77-.73l1.06-1.06.71.71a.996.996 0 1 0 1.41-1.41l-.71-.71.71-.71Zm-4.6-3.89a.5.5 0 0 1 .35-.15.5.5 0 0 1 .35.15c.19.2.19.51 0 .71l-.35.35-.35-.36a.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35Zm0 5.65a.5.5 0 0 1-.35.15.5.5 0 0 1-.35-.15.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35l1.06-1.06.71.71-1.07 1.05Z"\n        />\n      </svg>\n    </sinch-tabs-icon-option>\n  </sinch-tabs>\n  <div id="list-wrapper">\n    <div id="list"></div>\n    <div id="not-found">\n      <sinch-text type="m">No results</sinch-text>\n    </div>\n  </div>\n</div>\n';
+const templateHTML$H = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#search{flex:1;min-width:0}#search-clear:not(.active){display:none}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;pointer-events:none;user-select:none;--sinch-global-color-text:var(--sinch-comp-emoji-picker-color-default-text-not-found);--sinch-comp-text-font:var(--sinch-comp-emoji-picker-font-not-found)}#not-found.active{display:flex}sinch-tabs-icon-option>svg{pointer-events:none;height:var(--sinch-global-size-icon);fill:var(--sinch-global-color-icon)}</style><div id="wrapper"><div id="toolbar"><sinch-input id="search" size="l" aria-label="Search emojis"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right" aria-label="Clear"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skintone-default"></sinch-color-swatch></sinch-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skintone-default" aria-label="Emoji skin tone menu"><sinch-color-menu-option value="skintone-default"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium-dark"></sinch-color-menu-option><sinch-color-menu-option value="skintone-dark"></sinch-color-menu-option></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"><sinch-tabs-icon-option id="tab-emotions"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm4.41-6.11a.745.745 0 0 0-1.03.24A3.98 3.98 0 0 1 12 16c-1.38 0-2.64-.7-3.38-1.88a.747.747 0 1 0-1.27.79A5.446 5.446 0 0 0 12 17.5c1.9 0 3.63-.97 4.65-2.58.22-.35.11-.81-.24-1.03Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-people"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54a5.023 5.023 0 0 1-4.92-4.15.998.998 0 0 0-.98-.85c-.61 0-1.09.54-1 1.14A7.037 7.037 0 0 0 9 8.71V21c0 .55.45 1 1 1s1-.45 1-1v-5h2v5c0 .55.45 1 1 1s1-.45 1-1V10.05l3.24 3.24a.996.996 0 1 0 1.41-1.41l-3.76-3.77Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-animals"><svg slot="icon" viewBox="0 0 24 24"><path d="M17 14c-.24-.24-.44-.49-.65-.75C17.51 11.5 19 8.56 19 5c0-1.95-.74-3-2-3-1.54 0-3.96 2.06-5 5.97C10.96 4.06 8.54 2 7 2 5.74 2 5 3.05 5 5c0 3.56 1.49 6.5 2.65 8.25-.21.26-.41.51-.65.75-.25.25-2 1.39-2 3.5C5 19.98 7.02 22 9.5 22c1.5 0 2.5-.5 2.5-.5s1 .5 2.5.5c2.48 0 4.5-2.02 4.5-4.5 0-2.11-1.75-3.25-2-3.5Zm-.12-9.97c.06.17.12.48.12.97 0 2.84-1.11 5.24-2.07 6.78-.38-.26-.83-.48-1.4-.62.24-4.52 2.44-6.83 3.35-7.13ZM7 5c0-.49.06-.8.12-.97.91.3 3.11 2.61 3.36 7.13-.58.14-1.03.35-1.4.62C8.11 10.24 7 7.84 7 5Zm7.5 15c-1 0-1.8-.33-2.22-.56.42-.18.72-.71.72-.94 0-.28-.45-.5-1-.5s-1 .22-1 .5c0 .23.3.76.72.94-.42.23-1.22.56-2.22.56A2.5 2.5 0 0 1 7 17.5c0-.7.43-1.24 1-1.73.44-.36.61-.52 1.3-1.37.76-.95 1.09-1.4 2.7-1.4s1.94.45 2.7 1.4c.69.85.86 1.01 1.3 1.37.57.49 1 1.03 1 1.73a2.5 2.5 0 0 1-2.5 2.5Zm-.5-4c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Zm-3 0c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-food"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 19H3c-.55 0-1 .45-1 1s.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1Zm1-16H9v2.4l1.81 1.45c.12.09.19.24.19.39v4.26c0 .28-.22.5-.5.5h-4c-.28 0-.5-.22-.5-.5V7.24c0-.15.07-.3.19-.39L8 5.4V3H6c-1.1 0-2 .9-2 2v8c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 5h-2V5h2v3Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-travel"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m21.99 14.77-1.43-4.11c-.14-.4-.52-.66-.97-.66H12.4c-.46 0-.83.26-.98.66L10 14.77v5.24c0 .55.45.99 1 .99s1-.45 1-1v-1h8v1a1 1 0 0 0 2 .01l-.01-5.24Zm-10.38-1.43.69-2c.05-.2.24-.34.46-.34h6.48c.21 0 .4.14.47.34l.69 2a.5.5 0 0 1-.47.66h-7.85a.5.5 0 0 1-.47-.66Zm.38 3.66c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Z"/><path d="M14 4.5V9h1V4c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1v4H3c-.55 0-1 .45-1 1v12h1V9.5c0-.28.22-.5.5-.5h4c.28 0 .5-.22.5-.5v-4c0-.28.22-.5.5-.5h5c.28 0 .5.22.5.5Z"/><path d="M7 11H5v2h2v-2Zm5-6h-2v2h2V5ZM7 15H5v2h2v-2Zm0 4H5v2h2v-2Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-sports"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.52 2.49C17.18.15 12.9.62 9.97 3.55c-1.6 1.6-2.52 3.87-2.54 5.46-.02 1.58.26 3.89-1.35 5.5l-3.54 3.53c-.39.39-.39 1.02 0 1.42.39.39 1.02.39 1.42 0l3.53-3.54c1.61-1.61 3.92-1.33 5.5-1.35 1.58-.02 3.86-.94 5.46-2.54 2.93-2.92 3.41-7.2 1.07-9.54Zm-9.2 9.19c-1.53-1.53-1.05-4.61 1.06-6.72 2.11-2.11 5.18-2.59 6.72-1.06 1.53 1.53 1.05 4.61-1.06 6.72-2.11 2.11-5.18 2.59-6.72 1.06ZM18 17c.53 0 1.04.21 1.41.59.78.78.78 2.05 0 2.83-.37.37-.88.58-1.41.58-.53 0-1.04-.21-1.41-.59-.78-.78-.78-2.05 0-2.83.37-.37.88-.58 1.41-.58Zm0-2a3.998 3.998 0 0 0-2.83 6.83c.78.78 1.81 1.17 2.83 1.17a3.998 3.998 0 0 0 2.83-6.83A3.998 3.998 0 0 0 18 15Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-objects"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3c-.46 0-.93.04-1.4.14-2.76.53-4.96 2.76-5.48 5.52-.48 2.61.48 5.01 2.22 6.56.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28a1.98 1.98 0 0 0 3.44 0H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46A6.956 6.956 0 0 0 19 10c0-3.87-3.13-7-7-7Zm.5 11h-1v-2.59L9.67 9.59l.71-.71L12 10.5l1.62-1.62.71.71-1.83 1.83V14Zm1 5c-.01 0-.02-.01-.03-.01V19h-2.94v-.01c-.01 0-.02.01-.03.01-.28 0-.5-.22-.5-.5s.22-.5.5-.5c.01 0 .02.01.03.01V18h2.94v.01c.01 0 .02-.01.03-.01.28 0 .5.22.5.5s-.22.5-.5.5Zm0-2h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3c.28 0 .5.22.5.5s-.22.5-.5.5Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-symbols"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 5H4c-.55 0-1 .45-1 1s.45 1 1 1h2v3c0 .55.45 1 1 1s1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1Zm0-3H4c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1Zm10.89 11.11a.996.996 0 0 0-1.41 0l-6.36 6.36a.996.996 0 1 0 1.41 1.41l6.36-6.36a.996.996 0 0 0 0-1.41ZM14.5 16a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-4-10A2.5 2.5 0 0 0 18 8.5V4h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1v3.51c-.42-.32-.93-.51-1.5-.51a2.5 2.5 0 0 0 0 5Zm-5.05 7.09a.996.996 0 1 0-1.41-1.41l-.71.71-.71-.71.35-.35a2.499 2.499 0 0 0-1.77-4.27 2.499 2.499 0 0 0-1.77 4.27l.35.35-1.06 1.06c-.98.98-.98 2.56 0 3.54.5.48 1.14.72 1.78.72.64 0 1.28-.24 1.77-.73l1.06-1.06.71.71a.996.996 0 1 0 1.41-1.41l-.71-.71.71-.71Zm-4.6-3.89a.5.5 0 0 1 .35-.15.5.5 0 0 1 .35.15c.19.2.19.51 0 .71l-.35.35-.35-.36a.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35Zm0 5.65a.5.5 0 0 1-.35.15.5.5 0 0 1-.35-.15.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35l1.06-1.06.71.71-1.07 1.05Z"/></svg></sinch-tabs-icon-option></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
 const groupLabels = [
   "Emotions",
   "People",
@@ -6209,6 +6220,7 @@ class EmojiPicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   get focusable() {
     return true;
@@ -6386,7 +6398,7 @@ class EmojiPicker extends NectaryElement {
   }
 }
 defineCustomElement("sinch-emoji-picker", EmojiPicker);
-const templateHTML$G = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n#top,\n#bottom {\n  display: flex;\n  align-items: baseline;\n}\n\n#top {\n  height: 24px;\n  margin-bottom: 2px;\n}\n\n#top.empty {\n  display: none;\n}\n\n#label,\n#optional,\n#additional,\n#invalid {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n#label {\n  font: var(--sinch-comp-field-font-label);\n  color: var(--sinch-comp-field-color-default-label-initial);\n}\n\n#optional {\n  flex: 1;\n  font: var(--sinch-comp-field-font-optional);\n  color: var(--sinch-comp-field-color-default-optional-initial);\n  text-align: right;\n}\n\n#additional {\n  flex: 1;\n  text-align: right;\n  font: var(--sinch-comp-field-font-additional);\n  color: var(--sinch-comp-field-color-default-additional-initial);\n  line-height: 20px;\n  margin-top: 2px;\n}\n\n#additional:empty {\n  display: none;\n}\n\n#invalid {\n  font: var(--sinch-comp-field-font-invalid);\n  color: var(--sinch-comp-field-color-invalid-text-initial);\n  line-height: 20px;\n  margin-top: 2px;\n}\n\n#invalid:empty {\n  display: none;\n}\n\n#tooltip {\n  align-self: center;\n  margin: 0 8px;\n  display: flex;\n}\n\n#tooltip.empty {\n  display: none;\n}\n\n:host([disabled]) #label {\n  color: var(--sinch-comp-field-color-disabled-label-initial);\n}\n\n:host([disabled]) #additional {\n  color: var(--sinch-comp-field-color-disabled-additional-initial);\n}\n\n:host([disabled]) #optional {\n  color: var(--sinch-comp-field-color-disabled-optional-initial);\n}\n\n</style>\n\n<div id="wrapper">\n  <div id="top">\n    <label id="label" for="input"></label>\n    <div id="tooltip">\n      <slot name="tooltip"></slot>\n    </div>\n    <span id="optional"></span>\n  </div>\n  <slot name="input"></slot>\n  <div id="bottom">\n    <div id="invalid"></div>\n    <div id="additional"></div>\n  </div>\n</div>\n';
+const templateHTML$G = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template$G = document.createElement("template");
 template$G.innerHTML = templateHTML$G;
 class Field extends NectaryElement {
@@ -6512,7 +6524,7 @@ const doFilesSatisfySize$1 = (files, size) => {
     return file.size <= size;
   });
 };
-const templateHTML$F = "<style>\n:host {\n  display: inline-block;\n}\n\n::slotted(*) {\n  display: block;\n}\n</style>\n\n<slot></slot>\n";
+const templateHTML$F = "<style>:host{display:inline-block}::slotted(*){display:block}</style><slot></slot>";
 const template$F = document.createElement("template");
 template$F.innerHTML = templateHTML$F;
 class FilePicker extends NectaryElement {
@@ -6605,9 +6617,11 @@ class FilePicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onInvalidReactHandler = (e) => {
     getReactEventHandler(this, "on-invalid")?.(e);
+    getReactEventHandler(this, "onInvalid")?.(e);
   };
 }
 defineCustomElement("sinch-file-picker", FilePicker);
@@ -6662,7 +6676,7 @@ const doFilesSatisfySize = (files, size) => {
     return file.size <= size;
   });
 };
-const templateHTML$E = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  min-height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
+const templateHTML$E = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;min-height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-comp-file-drop-shape-radius);background-color:var(--sinch-comp-file-drop-color-default-background-initial)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-comp-file-drop-color-default-border-initial);border-radius:var(--sinch-comp-file-drop-shape-radius);pointer-events:none}#placeholder{align-self:center;text-align:center;--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-initial);--sinch-comp-text-font:var(--sinch-comp-file-drop-font-placeholder)}:host([invalid]) #wrapper{background-color:var(--sinch-comp-file-drop-color-invalid-background-initial)}:host([invalid]) #wrapper::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-initial);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid{background-color:var(--sinch-comp-file-drop-color-default-background-active)}#wrapper.drop.valid::after{border-color:var(--sinch-comp-file-drop-color-default-border-active);border-width:2px}#wrapper.drop.valid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-active)}#wrapper.drop.invalid{background-color:var(--sinch-comp-file-drop-color-invalid-background-active)}#wrapper.drop.invalid::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-active);border-width:2px}#wrapper.drop.invalid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-invalid-placeholder-active)}:host([disabled])>#wrapper>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-disabled-placeholder-initial)}:host([disabled])>#wrapper{background-color:var(--sinch-comp-file-drop-color-disabled-background-initial)}:host([disabled])>#wrapper::after{border-color:var(--sinch-comp-file-drop-color-disabled-border-initial);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
 const template$E = document.createElement("template");
 template$E.innerHTML = templateHTML$E;
 class FileDrop extends NectaryElement {
@@ -6850,9 +6864,11 @@ class FileDrop extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onInvalidReactHandler = (e) => {
     getReactEventHandler(this, "on-invalid")?.(e);
+    getReactEventHandler(this, "onInvalid")?.(e);
   };
   #dispatchChangeEvent(files) {
     this.dispatchEvent(
@@ -6870,7 +6886,7 @@ class FileDrop extends NectaryElement {
   }
 }
 defineCustomElement("sinch-file-drop", FileDrop);
-const templateHTML$D = '<style>\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n:host {\n  display: block;\n}\n\n:host([data-size="l"]) {\n  width: 50px;\n  height: 50px;\n  contain: strict;\n}\n\n:host([data-size="m"]) {\n  width: 24px;\n  height: 24px;\n  contain: strict;\n}\n\n:host([data-size="s"]) {\n  width: 16px;\n  height: 16px;\n  contain: strict;\n}\n\n#spinner-size-l,\n#spinner-size-m,\n#spinner-size-s {\n  display: none;\n  will-change: transform;\n}\n\n:host([data-size="l"]) > #spinner-size-l {\n  display: block;\n  animation: 1s linear infinite spinner;\n}\n\n:host([data-size="m"]) > #spinner-size-m {\n  display: block;\n  animation: 1s linear infinite spinner;\n}\n\n:host([data-size="s"]) > #spinner-size-s {\n  display: block;\n  animation: 1s linear infinite spinner;\n}\n\n.bg {\n  opacity: 0.3;\n  stroke: var(--sinch-global-color-icon, var(--sinch-sys-color-text-default));\n}\n\n.fg {\n  stroke: var(--sinch-global-color-icon, var(--sinch-sys-color-text-default));\n}\n</style>\n\n<svg id="spinner-size-l" width="50" height="50" fill="none">\n  <circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/>\n  <path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/>\n</svg>\n<svg id="spinner-size-m" width="24" height="24" fill="none">\n  <circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/>\n  <path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/>\n</svg>\n<svg id="spinner-size-s" width="16" height="16" fill="none">\n  <circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/>\n  <path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/>\n</svg>\n';
+const templateHTML$D = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}:host([data-size="l"]){width:50px;height:50px;contain:strict}:host([data-size="m"]){width:24px;height:24px;contain:strict}:host([data-size="s"]){width:16px;height:16px;contain:strict}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg> <svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg> <svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
 const template$D = document.createElement("template");
 template$D.innerHTML = templateHTML$D;
 class Spinner extends NectaryElement {
@@ -6925,7 +6941,7 @@ class Spinner extends NectaryElement {
 }
 defineCustomElement("sinch-spinner", Spinner);
 const typeValues$2 = ["pending", "loading", "progress", "success", "error"];
-const templateHTML$C = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 12px 16px;\n    box-sizing: border-box;\n    min-height: 48px;\n    min-width: 148px;\n    border-radius: var(--sinch-comp-file-status-shape-radius);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-error-background);\n  }\n\n  :host([type="success"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-success-background);\n  }\n\n  :host([type="pending"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-pending-background);\n  }\n\n  :host([type="progress"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-progress-background);\n  }\n\n  :host([type="loading"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-loading-background);\n  }\n\n  #content-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    min-height: 24px;\n    margin-left: 16px;\n  }\n\n  :host([type="error"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-error-text);\n  }\n\n  :host([type="success"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-success-text);\n  }\n\n  :host([type="pending"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-pending-text);\n  }\n\n  :host([type="progress"]) #filename {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-file-status-color-progress-text\n      );\n  }\n\n  :host([type="loading"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-loading-text);\n  }\n\n  #action {\n    display: flex;\n    gap: 4px;\n    height: 32px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n  }\n\n  #icon-pending,\n  #icon-progress,\n  #icon-success,\n  #icon-error,\n  #icon-loading {\n    display: none;\n  }\n\n  #icon-pending {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-pending-icon);\n  }\n\n  #icon-success {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-success-icon);\n  }\n\n  #icon-progress {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-file-status-color-progress-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-error-icon);\n  }\n\n  #icon-loading {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-loading-icon);\n  }\n\n  :host([type="success"]) #icon-success,\n  :host([type="progress"]) #icon-progress,\n  :host([type="error"]) #icon-error,\n  :host([type="pending"]) #icon-pending,\n  :host([type="loading"]) #icon-loading {\n    display: block;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-spinner id="icon-loading" size="m"></sinch-spinner>\n  <sinch-icon icons-version="2" name="fa-clipboard-question"\n    id="icon-pending"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon>\n  <sinch-icon icons-version="2" name="fa-file-lines" id="icon-progress"></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <div id="content-wrapper">\n    <sinch-text id="filename" type="m" ellipsis></sinch-text>\n    <slot name="content"></slot>\n  </div>\n  <div id="action">\n    <slot name="action"></slot>\n  </div>\n</div>\n';
+const templateHTML$C = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;border-radius:var(--sinch-comp-file-status-shape-radius)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-file-status-color-error-background)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-file-status-color-success-background)}:host([type=pending]) #wrapper{background-color:var(--sinch-comp-file-status-color-pending-background)}:host([type=progress]) #wrapper{background-color:var(--sinch-comp-file-status-color-progress-background)}:host([type=loading]) #wrapper{background-color:var(--sinch-comp-file-status-color-loading-background)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;min-height:24px;margin-left:16px}:host([type=error]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-error-text)}:host([type=success]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-success-text)}:host([type=pending]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-pending-text)}:host([type=progress]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-progress-text)}:host([type=loading]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-loading-text)}#action{display:flex;gap:4px;height:32px;margin-top:-4px;margin-bottom:-4px}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#icon-pending{--sinch-global-color-icon:var(--sinch-comp-file-status-color-pending-icon)}#icon-success{--sinch-global-color-icon:var(--sinch-comp-file-status-color-success-icon)}#icon-progress{--sinch-global-color-icon:var(--sinch-comp-file-status-color-progress-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-file-status-color-error-icon)}#icon-loading{--sinch-global-color-icon:var(--sinch-comp-file-status-color-loading-icon)}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon icons-version="2" name="fa-clipboard-question" id="icon-pending"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="fa-file-lines" id="icon-progress"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 const template$C = document.createElement("template");
 template$C.innerHTML = templateHTML$C;
 class FileStatus extends NectaryElement {
@@ -7005,7 +7021,7 @@ const getFlagUrl = (root, code) => {
   }
   return flagUrl.replace("%s", code);
 };
-const templateHTML$B = '<style>\n:host {\n  display: contents;\n}\n\n#image {\n  pointer-events: none;\n  width: var(--sinch-global-size-icon, 48px);\n  height: var(--sinch-global-size-icon, 48px);\n  object-fit: contain;\n}\n</style>\n\n<img id="image" src="" alt="" loading="lazy"/>\n';
+const templateHTML$B = '<style>:host{display:contents}#image{pointer-events:none;width:var(--sinch-global-size-icon,48px);height:var(--sinch-global-size-icon,48px);object-fit:contain}</style><img id="image" src="" alt="" loading="lazy">';
 const template$B = document.createElement("template");
 template$B.innerHTML = templateHTML$B;
 class Flag extends NectaryElement {
@@ -7049,7 +7065,7 @@ class Flag extends NectaryElement {
   }
 }
 defineCustomElement("sinch-flag", Flag);
-const templateHTML$A = '<style>\n:host {\n  display: block;\n  grid-column: span 12;\n}\n\n:host([xl="2"]) {\n  grid-column: span 2;\n}\n\n:host([xl="3"]) {\n  grid-column: span 3;\n}\n\n:host([xl="4"]) {\n  grid-column: span 4;\n}\n\n:host([xl="5"]) {\n  grid-column: span 5;\n}\n\n:host([xl="6"]) {\n  grid-column: span 6;\n}\n\n:host([xl="7"]) {\n  grid-column: span 7;\n}\n\n:host([xl="8"]) {\n  grid-column: span 8;\n}\n\n:host([xl="9"]) {\n  grid-column: span 9;\n}\n\n:host([xl="10"]) {\n  grid-column: span 10;\n}\n\n:host([xl="11"]) {\n  grid-column: span 11;\n}\n\n:host([xl="12"]) {\n  grid-column: span 12;\n}\n\n@media only screen and (max-width: 1439px) {\n  :host {\n    grid-column: span 12;\n  }\n\n  :host([l="2"]) {\n    grid-column: span 2;\n  }\n\n  :host([l="3"]) {\n    grid-column: span 3;\n  }\n\n  :host([l="4"]) {\n    grid-column: span 4;\n  }\n\n  :host([l="5"]) {\n    grid-column: span 5;\n  }\n\n  :host([l="6"]) {\n    grid-column: span 6;\n  }\n\n  :host([l="7"]) {\n    grid-column: span 7;\n  }\n\n  :host([l="8"]) {\n    grid-column: span 8;\n  }\n\n  :host([l="9"]) {\n    grid-column: span 9;\n  }\n\n  :host([l="10"]) {\n    grid-column: span 10;\n  }\n\n  :host([l="11"]) {\n    grid-column: span 11;\n  }\n\n  :host([l="12"]) {\n    grid-column: span 12;\n  }\n}\n\n@media only screen and (max-width: 1023px) {\n  :host {\n    grid-column: span 8;\n  }\n\n  :host([m="2"]) {\n    grid-column: span 2;\n  }\n\n  :host([m="3"]) {\n    grid-column: span 3;\n  }\n\n  :host([m="4"]) {\n    grid-column: span 4;\n  }\n\n  :host([m="5"]) {\n    grid-column: span 5;\n  }\n\n  :host([m="6"]) {\n    grid-column: span 6;\n  }\n\n  :host([m="7"]) {\n    grid-column: span 7;\n  }\n\n  :host([m="8"]) {\n    grid-column: span 8;\n  }\n}\n\n@media only screen and (max-width: 767px) {\n  :host {\n    grid-column: span 4;\n  }\n\n  :host([s="2"]) {\n    grid-column: span 2;\n  }\n\n  :host([s="3"]) {\n    grid-column: span 3;\n  }\n\n  :host([s="4"]) {\n    grid-column: span 4;\n  }\n}\n</style>\n\n<slot name="content"></slot>\n';
+const templateHTML$A = '<style>:host{display:block;grid-column:span 12}:host([xl="2"]){grid-column:span 2}:host([xl="3"]){grid-column:span 3}:host([xl="4"]){grid-column:span 4}:host([xl="5"]){grid-column:span 5}:host([xl="6"]){grid-column:span 6}:host([xl="7"]){grid-column:span 7}:host([xl="8"]){grid-column:span 8}:host([xl="9"]){grid-column:span 9}:host([xl="10"]){grid-column:span 10}:host([xl="11"]){grid-column:span 11}:host([xl="12"]){grid-column:span 12}@media only screen and (max-width:1439px){:host{grid-column:span 12}:host([l="2"]){grid-column:span 2}:host([l="3"]){grid-column:span 3}:host([l="4"]){grid-column:span 4}:host([l="5"]){grid-column:span 5}:host([l="6"]){grid-column:span 6}:host([l="7"]){grid-column:span 7}:host([l="8"]){grid-column:span 8}:host([l="9"]){grid-column:span 9}:host([l="10"]){grid-column:span 10}:host([l="11"]){grid-column:span 11}:host([l="12"]){grid-column:span 12}}@media only screen and (max-width:1023px){:host{grid-column:span 8}:host([m="2"]){grid-column:span 2}:host([m="3"]){grid-column:span 3}:host([m="4"]){grid-column:span 4}:host([m="5"]){grid-column:span 5}:host([m="6"]){grid-column:span 6}:host([m="7"]){grid-column:span 7}:host([m="8"]){grid-column:span 8}}@media only screen and (max-width:767px){:host{grid-column:span 4}:host([s="2"]){grid-column:span 2}:host([s="3"]){grid-column:span 3}:host([s="4"]){grid-column:span 4}}</style><slot name="content"></slot>';
 const template$A = document.createElement("template");
 template$A.innerHTML = templateHTML$A;
 class GridItem extends NectaryElement {
@@ -7084,7 +7100,7 @@ class GridItem extends NectaryElement {
   }
 }
 defineCustomElement("sinch-grid-item", GridItem);
-const templateHTML$z = '<style>\n:host {\n  display: grid;\n  grid-template-columns: repeat(var(--sinch-comp-grid-columns-xl), minmax(0, 1fr));\n  grid-column-gap: var(--sinch-comp-grid-gutter-xl);\n  grid-row-gap: var(--sinch-comp-grid-gutter-xl);\n  padding: var(--sinch-comp-grid-margin-xl);\n}\n\n/* L */\n@media only screen and (max-width: 1439px) {\n  :host {\n    grid-template-columns: repeat(var(--sinch-comp-grid-columns-l), minmax(0, 1fr));\n    grid-column-gap: var(--sinch-comp-grid-gutter-l);\n    grid-row-gap: var(--sinch-comp-grid-gutter-l);\n    padding: var(--sinch-comp-grid-margin-l);\n  }\n}\n\n/* M */\n@media only screen and (max-width: 1023px) {\n  :host {\n    grid-template-columns: repeat(var(--sinch-comp-grid-columns-m), minmax(0, 1fr));\n    grid-column-gap: var(--sinch-comp-grid-gutter-m);\n    grid-row-gap: var(--sinch-comp-grid-gutter-m);\n    padding: var(--sinch-comp-grid-margin-m);\n  }\n}\n\n/* S */\n@media only screen and (max-width: 767px) {\n  :host {\n    grid-template-columns: repeat(var(--sinch-comp-grid-columns-s), minmax(0, 1fr));\n    grid-column-gap: var(--sinch-comp-grid-gutter-s);\n    grid-row-gap: var(--sinch-comp-grid-gutter-s);\n    padding: var(--sinch-comp-grid-margin-s);\n  }\n}\n</style>\n\n<slot name="item"></slot>\n';
+const templateHTML$z = '<style>:host{display:grid;grid-template-columns:repeat(var(--sinch-comp-grid-columns-xl),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-xl);grid-row-gap:var(--sinch-comp-grid-gutter-xl);padding:var(--sinch-comp-grid-margin-xl)}@media only screen and (max-width:1439px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-l),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-l);grid-row-gap:var(--sinch-comp-grid-gutter-l);padding:var(--sinch-comp-grid-margin-l)}}@media only screen and (max-width:1023px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-m),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-m);grid-row-gap:var(--sinch-comp-grid-gutter-m);padding:var(--sinch-comp-grid-margin-m)}}@media only screen and (max-width:767px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-s),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-s);grid-row-gap:var(--sinch-comp-grid-gutter-s);padding:var(--sinch-comp-grid-margin-s)}}</style><slot name="item"></slot>';
 const template$z = document.createElement("template");
 template$z.innerHTML = templateHTML$z;
 class Grid extends NectaryElement {
@@ -7095,7 +7111,7 @@ class Grid extends NectaryElement {
   }
 }
 defineCustomElement("sinch-grid", Grid);
-const templateHTML$y = '<style>\n  :host {\n    display: contents;\n  }\n\n  #icon {\n    --sinch-global-size-icon: 18px;\n  }\n</style>\n\n<sinch-tooltip type="fast">\n  <sinch-icon icons-version="2" name="circle-question" id="icon"></sinch-icon>\n</sinch-tooltip>\n';
+const templateHTML$y = '<style>:host{display:contents}#icon{--sinch-global-size-icon:18px}</style><sinch-tooltip type="fast"><sinch-icon icons-version="2" name="circle-question" id="icon"></sinch-icon></sinch-tooltip>';
 const template$y = document.createElement("template");
 template$y.innerHTML = templateHTML$y;
 class HelpTooltip extends NectaryElement {
@@ -7159,14 +7175,16 @@ class HelpTooltip extends NectaryElement {
   };
   #onTooltipShowReactHandler = () => {
     getReactEventHandler(this, "on-show")?.();
+    getReactEventHandler(this, "onShow")?.();
   };
   #onTooltipHideReactHandler = () => {
     getReactEventHandler(this, "on-hide")?.();
+    getReactEventHandler(this, "onHide")?.();
   };
 }
 defineCustomElement("sinch-help-tooltip", HelpTooltip);
 const typeValues$1 = ["info", "success", "warn", "error"];
-const templateHTML$x = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 16px;\n    border-radius: var(--sinch-comp-inline-alert-shape-radius);\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  :host([type="success"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-success-default-background\n      );\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-background\n      );\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-error-default-background\n      );\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color:\n      var(\n        --sinch-comp-inline-alert-color-info-default-background\n      );\n  }\n\n  #icon-success,\n  #icon-warn,\n  #icon-error,\n  #icon-info {\n    display: none;\n  }\n\n  #icon-success {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-success-default-icon\n      );\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-error-default-icon\n      );\n  }\n\n  #icon-info {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-inline-alert-color-info-default-icon\n      );\n  }\n\n  :host([type="success"]) #icon-success,\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\n  }\n\n  #body-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    margin-left: 8px;\n    min-width: 0;\n    flex: 1;\n  }\n\n  #caption {\n    align-self: stretch;\n\n    --sinch-comp-title-font: var(--sinch-comp-inline-alert-font-title);\n  }\n\n  :host([type="success"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-success-default-text\n      );\n  }\n\n  :host([type="warn"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-error-default-text\n      );\n  }\n\n  :host([type="info"]) #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-info-default-text\n      );\n  }\n\n  #text {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 0;\n    align-self: stretch;\n\n    --sinch-comp-rich-text-font: var(--sinch-comp-inline-alert-font-body);\n  }\n\n  :host([type="success"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-success-default-text\n      );\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-error-default-text\n      );\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-inline-alert-color-info-default-text\n      );\n  }\n\n  :host([caption]) #text,\n  :host([caption=""]) #text {\n    margin-top: 4px;\n  }\n\n  #action {\n    width: 100%;\n    display: flex;\n    margin-top: 16px;\n    min-width: 0;\n    gap: 16px;\n  }\n\n  #action.empty {\n    display: none;\n  }\n\n  #close {\n    margin-left: 16px;\n  }\n\n  #close.empty {\n    display: none;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon>\n  <sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon>\n  <sinch-icon icons-version="2" name="triangle-exclamation"\n    id="icon-warn"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <div id="body-wrapper">\n    <sinch-title id="caption" level="3" type="s"></sinch-title>\n    <sinch-rich-text id="text"></sinch-rich-text>\n    <div id="action">\n      <slot name="action"></slot>\n    </div>\n  </div>\n  <div id="close">\n    <slot name="close"></slot>\n  </div>\n</div>\n';
+const templateHTML$x = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
 const template$x = document.createElement("template");
 template$x.innerHTML = templateHTML$x;
 class InlineAlert extends NectaryElement {
@@ -7259,7 +7277,7 @@ class InlineAlert extends NectaryElement {
   };
 }
 defineCustomElement("sinch-inline-alert", InlineAlert);
-const templateHTML$w = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 8px 0;\n  background-color: var(--sinch-comp-list-color-default-background-initial);\n  border-bottom: 1px solid var(--sinch-comp-list-color-default-border-initial);\n}\n\n:host(:last-child) > #wrapper {\n  border-bottom: none;\n}\n\n:host(:hover) > #wrapper {\n  background-color: var(--sinch-comp-list-color-default-background-hover);\n}\n</style>\n\n<div id="wrapper">\n  <slot name="content"></slot>\n</div>\n';
+const templateHTML$w = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;background-color:var(--sinch-comp-list-color-default-background-initial);border-bottom:1px solid var(--sinch-comp-list-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-comp-list-color-default-background-hover)}</style><div id="wrapper"><slot name="content"></slot></div>';
 const template$w = document.createElement("template");
 template$w.innerHTML = templateHTML$w;
 class ListItem extends NectaryElement {
@@ -7273,7 +7291,7 @@ class ListItem extends NectaryElement {
   }
 }
 defineCustomElement("sinch-list-item", ListItem);
-const templateHTML$v = '<style>\n:host {\n  display: block;\n  height: 100%;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML$v = '<style>:host{display:block;height:100%}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow-y:auto}</style><div id="wrapper"><slot></slot></div>';
 const template$v = document.createElement("template");
 template$v.innerHTML = templateHTML$v;
 class List extends NectaryElement {
@@ -7287,7 +7305,7 @@ class List extends NectaryElement {
   }
 }
 defineCustomElement("sinch-list", List);
-const templateHTML$u = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n  }\n\n  #wrapper {\n    display: flex;\n    justify-content: center;\n    gap: 8px;\n    width: 100%;\n    height: var(--sinch-local-size);\n\n    --sinch-local-size: 24px;\n  }\n\n  button {\n    all: initial;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-width: var(--sinch-local-size);\n    height: var(--sinch-local-size);\n    cursor: pointer;\n    border-radius: var(--sinch-comp-pagination-shape-radius);\n    user-select: none;\n\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-pagination-color-default-icon-default\n      );\n  }\n\n  button:focus-visible::before {\n    content: "";\n    position: absolute;\n    inset: -3px;\n    border: 2px solid var(--sinch-comp-pagination-color-default-outline-focus);\n    border-radius: calc(var(--sinch-comp-pagination-shape-radius) + 3px);\n    pointer-events: none;\n  }\n\n  button:disabled {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-pagination-color-disabled-icon-initial\n      );\n\n    cursor: initial;\n  }\n\n  button:enabled:hover {\n    background-color:\n      var(\n        --sinch-comp-pagination-color-default-background-hover\n      );\n  }\n\n  button > * {\n    display: block;\n    overflow: hidden;\n    pointer-events: none;\n  }\n\n  .page {\n    font: var(--sinch-comp-pagination-font-default-page-number);\n    color: var(--sinch-comp-pagination-color-default-text-initial);\n    background-color:\n      var(\n        --sinch-comp-pagination-color-default-background-initial\n      );\n    padding: 0 4px;\n    box-sizing: border-box;\n  }\n\n  .page.dots > span {\n    display: none;\n  }\n\n  .page.dots::after {\n    content: "...";\n  }\n\n  .page.active {\n    font: var(--sinch-comp-pagination-font-checked-page-number);\n    background-color:\n      var(\n        --sinch-comp-pagination-color-checked-background-initial\n      );\n    pointer-events: none;\n    cursor: initial;\n  }\n\n  .page.active:hover {\n    background-color:\n      var(\n        --sinch-comp-pagination-color-checked-background-hover\n      );\n  }\n\n  .page.hidden {\n    display: none;\n  }\n\n  #left,\n  #right {\n    --sinch-icon-size: 24px;\n  }\n</style>\n\n<div id="wrapper">\n  <button id="left">\n    <sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon>\n  </button>\n  <button class="page"><span>1</span></button>\n  <button class="page active"><span>2</span></button>\n  <button class="page"><span>3</span></button>\n  <button class="page"><span>4</span></button>\n  <button class="page"><span>5</span></button>\n  <button class="page dots"><span>6</span></button>\n  <button class="page"><span>20</span></button>\n  <button id="right">\n    <sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon>\n  </button>\n</div>\n';
+const templateHTML$u = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
 const FIRST_BTN_INDEX = 0;
@@ -7420,6 +7438,7 @@ class Pagination extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   get focusable() {
     return true;
@@ -7444,7 +7463,7 @@ class Pagination extends NectaryElement {
   }
 }
 defineCustomElement("sinch-pagination", Pagination);
-const templateHTML$t = '<style>\n  #persisted-dialog {\n    --sinch-dialog-close-button-display: none;\n  }\n\n  ::slotted(*) {\n    display: block;\n  }\n</style>\n\n<sinch-dialog id="persisted-dialog">\n  <div slot="icon"><slot id="icon" name="icon"></slot></div>\n  <div slot="content"><slot name="content"></slot></div>\n  <div slot="buttons"><slot name="buttons"></slot></div>\n</sinch-dialog>\n';
+const templateHTML$t = '<style>#persisted-dialog{--sinch-dialog-close-button-display:none}::slotted(*){display:block}</style><sinch-dialog id="persisted-dialog"><div slot="icon"><slot id="icon" name="icon"></slot></div><div slot="content"><slot name="content"></slot></div><div slot="buttons"><slot name="buttons"></slot></div></sinch-dialog>';
 const template$t = document.createElement("template");
 template$t.innerHTML = templateHTML$t;
 function isVisible(elementStyle) {
@@ -7534,6 +7553,7 @@ class PersistentOverlay extends NectaryElement {
   }
   #onVisibilityAlteredReactHandler = (e) => {
     getReactEventHandler(this, "on-visibility-altered")?.(e);
+    getReactEventHandler(this, "onVisibilityAltered")?.(e);
   };
 }
 defineCustomElement("sinch-persistent-overlay", PersistentOverlay);
@@ -7549,7 +7569,7 @@ const isProgressStepperItemActive = ($el) => {
 const setProgressStepperItemStatus = ($el, status) => updateAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS, status);
 const isProgressStepperItemActiveDescendant = ($el) => getBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT);
 const setProgressStepperItemActiveDescendant = ($el, isActiveDescendant) => updateBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT, isActiveDescendant);
-const templateHTML$s = '<style>\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  #button {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    width: 100%;\n    height: 100%;\n    padding: 8px 4px 4px;\n    box-sizing: border-box;\n    cursor: pointer;\n    border-radius: var(--sinch-comp-progress-stepper-step-shape-radius);\n  }\n\n  :host([data-status="inactive"]) > #button {\n    cursor: not-allowed;\n  }\n\n  :host([data-status="incomplete"]:hover) > #button {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-background-hover\n      );\n  }\n\n  :host([data-status="complete"]:hover) > #button {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-background-hover\n      );\n  }\n\n  :host([data-status="invalid"]:hover) > #button {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-background-hover\n      );\n  }\n\n  #outline {\n    position: absolute;\n    inset: -2px;\n    border:\n      2px solid\n      var(--sinch-comp-progress-stepper-step-color-outline-focus);\n    border-radius:\n      calc(\n        var(--sinch-comp-progress-stepper-step-shape-radius) + 2px\n      );\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  :host(:focus-visible) #outline {\n    opacity: 1;\n  }\n\n  #text {\n    flex-shrink: 1;\n    flex-basis: auto;\n    min-width: 0;\n    transform: translate(0, 0);\n    will-change: transform;\n    transition: transform 0.25s ease-out;\n    padding-right: 24px;\n  }\n\n  :host([data-status="incomplete"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-incomplete-label\n      );\n  }\n\n  :host([data-status="complete"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-complete-label\n      );\n  }\n\n  :host([data-status="inactive"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-inactive-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-inactive-label\n      );\n  }\n\n  :host([invalid]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-invalid-label\n      );\n\n    transform: translate(24px, 0);\n  }\n\n  :host([data-status="incomplete"][data-checked]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-current-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-incomplete-current-label\n      );\n  }\n\n  :host([data-status="complete"][data-checked]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-current-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-complete-current-label\n      );\n  }\n\n  :host([invalid][data-checked]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-invalid-current-label\n      );\n  }\n\n  #icon-error {\n    position: absolute;\n    left: 0;\n    top: 4px;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.25s ease-in-out;\n\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-icon-default\n      );\n    --sinch-global-size-icon: 16px;\n  }\n\n  :host([invalid]) #icon-error {\n    opacity: 1;\n  }\n\n  #progress {\n    height: 8px;\n    border-radius: 4px;\n    transition: background-color 0.25s ease-in-out;\n  }\n\n  :host([data-status="incomplete"]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-progress-background\n      );\n  }\n\n  :host([data-status="complete"]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-progress-background\n      );\n  }\n\n  :host([data-status="inactive"]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-inactive-progress-background\n      );\n  }\n\n  :host([invalid]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-progress-background\n      );\n  }\n\n  #bar {\n    width: 8px;\n    height: 8px;\n    border-radius: 4px;\n    opacity: 0;\n    transition: width 0.25s ease-in-out, opacity 0.25s ease-in-out;\n  }\n\n  :host([data-status="incomplete"]) #bar {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-progress-bar\n      );\n  }\n\n  :host([data-status="complete"]) #bar {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-progress-bar\n      );\n    width: 100%;\n  }\n\n  :host([data-status="incomplete"]:not([invalid])) #bar,\n  :host([data-status="complete"]:not([invalid])) #bar {\n    opacity: 1;\n  }\n\n  #label-bar {\n    position: relative;\n  }\n</style>\n\n<div id="button">\n  <div id="progress">\n    <div id="bar"></div>\n  </div>\n  <div id="label-bar">\n    <sinch-icon icons-version="2" name="triangle-exclamation"\n      id="icon-error"\n      aria-hidden="true"\n    ></sinch-icon>\n    <sinch-text id="text" type="m"></sinch-text>\n  </div>\n  <div id="outline"></div>\n</div>\n';
+const templateHTML$s = '<style>:host{display:block;outline:0}#button{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;height:100%;padding:8px 4px 4px;box-sizing:border-box;cursor:pointer;border-radius:var(--sinch-comp-progress-stepper-step-shape-radius)}:host([data-status=inactive])>#button{cursor:not-allowed}:host([data-status=incomplete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-background-hover)}:host([data-status=complete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-complete-background-hover)}:host([data-status=invalid]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-invalid-background-hover)}#outline{position:absolute;inset:-2px;border:2px solid var(--sinch-comp-progress-stepper-step-color-outline-focus);border-radius:calc(var(--sinch-comp-progress-stepper-step-shape-radius) + 2px);pointer-events:none;opacity:0}:host(:focus-visible) #outline{opacity:1}#text{flex-shrink:1;flex-basis:auto;min-width:0;transform:translate(0,0);will-change:transform;transition:transform .25s ease-out;padding-right:24px}:host([data-status=incomplete]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-incomplete-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-incomplete-label)}:host([data-status=complete]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-complete-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-complete-label)}:host([data-status=inactive]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-inactive-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-inactive-label)}:host([invalid]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-invalid-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-invalid-label);transform:translate(24px,0)}:host([data-status=incomplete][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-incomplete-current-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-incomplete-current-label)}:host([data-status=complete][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-complete-current-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-complete-current-label)}:host([invalid][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-invalid-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-invalid-current-label)}#icon-error{position:absolute;left:0;top:4px;pointer-events:none;opacity:0;transition:opacity .25s ease-in-out;--sinch-global-color-icon:var(--sinch-comp-progress-stepper-step-color-invalid-icon-default);--sinch-global-size-icon:16px}:host([invalid]) #icon-error{opacity:1}#progress{height:8px;border-radius:4px;transition:background-color .25s ease-in-out}:host([data-status=incomplete]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-progress-background)}:host([data-status=complete]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-complete-progress-background)}:host([data-status=inactive]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-inactive-progress-background)}:host([invalid]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-invalid-progress-background)}#bar{width:8px;height:8px;border-radius:4px;opacity:0;transition:width .25s ease-in-out,opacity .25s ease-in-out}:host([data-status=incomplete]) #bar{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-progress-bar)}:host([data-status=complete]) #bar{background-color:var(--sinch-comp-progress-stepper-step-color-complete-progress-bar);width:100%}:host([data-status=complete]:not([invalid])) #bar,:host([data-status=incomplete]:not([invalid])) #bar{opacity:1}#label-bar{position:relative}</style><div id="button"><div id="progress"><div id="bar"></div></div><div id="label-bar"><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-error" aria-hidden="true"></sinch-icon><sinch-text id="text" type="m"></sinch-text></div><div id="outline"></div></div>';
 const template$s = document.createElement("template");
 template$s.innerHTML = templateHTML$s;
 class ProgressStepperItem extends NectaryElement {
@@ -7633,7 +7653,7 @@ class ProgressStepperItem extends NectaryElement {
   }
 }
 defineCustomElement("sinch-progress-stepper-item", ProgressStepperItem);
-const templateHTML$r = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  width: 100%;\n}\n\n::slotted(sinch-progress-stepper-item) {\n  flex: 1;\n  min-width: 0;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML$r = '<style>:host{display:block}#wrapper{display:flex;width:100%}::slotted(sinch-progress-stepper-item){flex:1;min-width:0}</style><div id="wrapper"><slot></slot></div>';
 const template$r = document.createElement("template");
 template$r.innerHTML = templateHTML$r;
 class ProgressStepper extends NectaryElement {
@@ -7826,10 +7846,11 @@ class ProgressStepper extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-progress-stepper", ProgressStepper);
-const templateHTML$q = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  align-items: center;\n  height: 24px;\n}\n\n#progress,\n#bar {\n  height: 8px;\n  border-radius: 4px;\n}\n\n#progress {\n  background-color: var(--sinch-comp-progress-color-default-background-initial);\n  flex: 1;\n  min-width: 0;\n}\n\n#bar {\n  background-color: var(--sinch-comp-progress-color-default-bar-initial);\n  width: 0;\n}\n\n#text {\n  display: none;\n  width: 46px;\n\n  --sinch-global-color-text: var(--sinch-comp-progress-color-default-text-initial);\n}\n\n:host([detailed]) #text {\n  display: block;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="text" type="m"></sinch-text>\n  <div id="progress">\n    <div id="bar"></div>\n  </div>\n</div>\n';
+const templateHTML$q = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-comp-progress-color-default-background-initial);flex:1;min-width:0}#bar{background-color:var(--sinch-comp-progress-color-default-bar-initial);width:0}#text{display:none;width:46px;--sinch-global-color-text:var(--sinch-comp-progress-color-default-text-initial)}:host([detailed]) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
 const template$q = document.createElement("template");
 template$q.innerHTML = templateHTML$q;
 class Progress extends NectaryElement {
@@ -7881,7 +7902,7 @@ class Progress extends NectaryElement {
   }
 }
 defineCustomElement("sinch-progress", Progress);
-const templateHTML$p = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 24px;\n\n  --sinch-local-color-background: var(--sinch-comp-radio-color-default-background-initial);\n  --sinch-local-color-background-hover: var(--sinch-comp-radio-color-default-background-hover);\n  --sinch-local-color-background-active: var(--sinch-comp-radio-color-default-background-active);\n  --sinch-local-color-border: var(--sinch-comp-radio-color-default-border-initial);\n  --sinch-local-color-border-hover: var(--sinch-comp-radio-color-default-border-hover);\n  --sinch-local-color-border-active: var(--sinch-comp-radio-color-default-border-active);\n  --sinch-local-color-knob: var(--sinch-comp-radio-color-checked-knob-initial);\n  --sinch-local-color-knob-hover: var(--sinch-comp-radio-color-checked-knob-hover);\n  --sinch-local-color-knob-active: var(--sinch-comp-radio-color-checked-knob-active);\n  --sinch-local-color-text: var(--sinch-comp-radio-color-default-label-initial);\n}\n\n:host([data-invalid]) > #wrapper {\n  --sinch-local-color-border: var(--sinch-comp-radio-color-invalid-border-initial);\n  --sinch-local-color-border-hover: var(--sinch-comp-radio-color-invalid-border-hover);\n  --sinch-local-color-border-active: var(--sinch-comp-radio-color-invalid-border-active);\n  --sinch-local-color-text: var(--sinch-comp-radio-color-invalid-label-initial);\n}\n\n:host([checked]) > #wrapper {\n  --sinch-local-color-border: var(--sinch-comp-radio-color-checked-border-initial);\n  --sinch-local-color-border-hover: var(--sinch-comp-radio-color-checked-border-hover);\n  --sinch-local-color-border-active: var(--sinch-comp-radio-color-checked-border-active);\n}\n\n:host([disabled]) > #wrapper {\n  --sinch-local-color-background: var(--sinch-comp-radio-color-disabled-background-initial);\n  --sinch-local-color-border: var(--sinch-comp-radio-color-disabled-border-initial);\n  --sinch-local-color-text: var(--sinch-comp-radio-color-disabled-label-initial);\n}\n\n:host([disabled][checked]) > #wrapper {\n  --sinch-local-color-border: var(--sinch-comp-radio-color-checked-disabled-border-initial);\n  --sinch-local-color-knob: var(--sinch-comp-radio-color-checked-disabled-knob-initial);\n  --sinch-local-color-text: var(--sinch-comp-radio-color-checked-disabled-label-initial);\n}\n\n#input {\n  all: initial;\n  display: block;\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n:host([disabled]) #input {\n  cursor: initial;\n}\n\n#input-wrapper {\n  position: relative;\n  width: 18px;\n  height: 18px;\n  align-self: flex-start;\n  margin-top: 3px;\n}\n\n/* Outline */\n#input::before {\n  content: "";\n  position: absolute;\n  inset: -3px;\n  border: 2px solid var(--sinch-comp-radio-color-default-outline-focus);\n  border-radius: 50%;\n  transition: opacity 0.1s linear;\n  opacity: 0;\n  box-sizing: border-box;\n  pointer-events: none;\n}\n\n:host(:focus-visible) #input::before {\n  opacity: 1;\n}\n\n/* Circle Border / Background */\n#input::after {\n  content: "";\n  position: absolute;\n  width: 18px;\n  height: 18px;\n  inset: 0;\n  margin: auto;\n  background-color: var(--sinch-local-color-background);\n  border: 1px solid var(--sinch-local-color-border);\n  border-radius: 50%;\n  box-sizing: border-box;\n  pointer-events: none;\n}\n\n:host(:hover:not([disabled])) #input::after {\n  background-color: var(--sinch-local-color-background-hover);\n  border-color: var(--sinch-local-color-border-hover);\n}\n\n:host(:active:not([disabled])) #input::after {\n  background-color: var(--sinch-local-color-background-active);\n  border-color: var(--sinch-local-color-border-active);\n}\n\n#knob {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  inset: 0;\n  margin: auto;\n  border-radius: 50%;\n  transition: opacity 0.1s linear;\n  opacity: 0;\n  background-color: var(--sinch-local-color-knob);\n  pointer-events: none;\n}\n\n:host([checked]) #knob {\n  opacity: 1;\n}\n\n:host(:hover:not([disabled])) #knob {\n  background-color: var(--sinch-local-color-knob-hover);\n}\n\n:host(:active:not([disabled])) #knob {\n  background-color: var(--sinch-local-color-knob-active);\n}\n\n@media (prefers-reduced-motion) {\n  #knob,\n  #input::before,\n  #input::after {\n    transition: none;\n  }\n}\n\n#label {\n  flex: 1;\n  align-self: center;\n  padding-left: 8px;\n  font: var(--sinch-comp-radio-font-label);\n  color: var(--sinch-local-color-text);\n  cursor: pointer;\n}\n\n#label:empty {\n  display: none;\n}\n\n:host([disabled]) #label {\n  cursor: initial;\n}\n\n</style>\n\n<div id="wrapper">\n  <div id="input-wrapper">\n    <div id="input"></div>\n    <div id="knob"></div>\n  </div>\n  <span id="label"></span>\n</div>\n';
+const templateHTML$p = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-radio-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-radio-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-radio-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-radio-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-default-border-active);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-knob-initial);--sinch-local-color-knob-hover:var(--sinch-comp-radio-color-checked-knob-hover);--sinch-local-color-knob-active:var(--sinch-comp-radio-color-checked-knob-active);--sinch-local-color-text:var(--sinch-comp-radio-color-default-label-initial)}:host([data-invalid])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-radio-color-invalid-label-initial)}:host([checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-radio-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-radio-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-disabled-label-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-disabled-border-initial);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-disabled-knob-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-checked-disabled-label-initial)}#input{all:initial;display:block;width:18px;height:18px;cursor:pointer}:host([disabled]) #input{cursor:initial}#input-wrapper{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#input::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-radio-color-default-outline-focus);border-radius:50%;transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #input::before{opacity:1}#input::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #input::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #input::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#knob{position:absolute;width:10px;height:10px;inset:0;margin:auto;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-local-color-knob);pointer-events:none}:host([checked]) #knob{opacity:1}:host(:hover:not([disabled])) #knob{background-color:var(--sinch-local-color-knob-hover)}:host(:active:not([disabled])) #knob{background-color:var(--sinch-local-color-knob-active)}@media (prefers-reduced-motion){#input::after,#input::before,#knob{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-radio-font-label);color:var(--sinch-local-color-text);cursor:pointer}#label:empty{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="input-wrapper"><div id="input"></div><div id="knob"></div></div><span id="label"></span></div>';
 const template$p = document.createElement("template");
 template$p.innerHTML = templateHTML$p;
 class RadioOption extends NectaryElement {
@@ -7962,7 +7983,7 @@ class RadioOption extends NectaryElement {
   }
 }
 defineCustomElement("sinch-radio-option", RadioOption);
-const templateHTML$o = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: var(--sinch-comp-radio-direction, column);\n  gap: var(--sinch-comp-radio-gap, 8px);\n  box-sizing: border-box;\n  width: 100%;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML$o = '<style>:host{display:block}#wrapper{display:flex;flex-direction:var(--sinch-comp-radio-direction,column);gap:var(--sinch-comp-radio-gap,8px);box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
 const template$o = document.createElement("template");
 template$o.innerHTML = templateHTML$o;
 class Radio extends NectaryElement {
@@ -8147,6 +8168,7 @@ class Radio extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-radio", Radio);
@@ -9832,7 +9854,7 @@ const setBrowserCaret = ({ startContainer, startOffset, endContainer, endOffset
   range.setEnd(endContainer, endOffset);
   selection.addRange(range);
 };
-const templateHTML$n = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--sinch-comp-textarea-color-default-background-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  overflow: hidden;\n\n  --sinch-local-shape-radius: var(--sinch-comp-textarea-shape-radius);\n}\n\n#input-wrapper {\n  position: relative;\n  padding: 8px 10px 8px 12px;\n  box-sizing: border-box;\n}\n\n#input {\n  font: var(--sinch-comp-textarea-font-input);\n  color: var(--sinch-comp-textarea-color-default-text-initial);\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  border: none;\n  outline: none;\n}\n\n#placeholder {\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  font: var(--sinch-comp-textarea-font-input);\n  color: var(--sinch-comp-textarea-color-default-text-placeholder);\n  padding: 8px 10px 8px 12px;\n  pointer-events: none;\n  user-select: none;\n}\n\n#input.empty + #placeholder {\n  display: block;\n}\n\n#border {\n  position: absolute;\n  border: 1px solid var(--sinch-comp-textarea-color-default-border-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  inset: 0;\n  pointer-events: none;\n}\n\n:host([invalid]) #border {\n  border-color: var(--sinch-comp-textarea-color-invalid-border-initial);\n}\n\n:host([disabled]) {\n  color: var(--sinch-comp-textarea-color-disabled-text-initial);\n  -webkit-text-fill-color: var(--sinch-comp-textarea-color-disabled-text-initial);\n}\n\n:host([disabled]) #border {\n  border-color: var(--sinch-comp-textarea-color-disabled-border-initial);\n}\n\n:host(:not([disabled])) #input-wrapper:focus-within ~ #border {\n  border-color: var(--sinch-comp-textarea-color-default-border-focus);\n  border-width: 2px;\n}\n\n.p,\n.oli,\n.uli {\n  margin: 0;\n}\n\n.oli.l0,\n.uli.l0 {\n  margin-left: 6px;\n}\n\n.oli.l1,\n.uli.l1 {\n  margin-left: 36px;\n}\n\n.oli.l2,\n.uli.l2 {\n  margin-left: 64px;\n}\n\n.oli.l3,\n.uli.l3 {\n  margin-left: 92px;\n}\n\n.oli.l4,\n.uli.l4 {\n  margin-left: 120px;\n}\n\n.uli.l0 {\n  counter-reset: list-0 list-1 list-2 list-3 list-4;\n}\n\n.uli.l1 {\n  counter-reset: list-1 list-2 list-3 list-4;\n}\n\n.uli.l2 {\n  counter-reset: list-2 list-3 list-4;\n}\n\n.uli.l3 {\n  counter-reset: list-3 list-4;\n}\n\n.uli.l4 {\n  counter-reset: list-4;\n}\n\n.oli.l0 {\n  counter-reset: list-1 list-2 list-3 list-4;\n}\n\n.oli.l1 {\n  counter-reset: list-2 list-3 list-4;\n}\n\n.oli.l2 {\n  counter-reset: list-3 list-4;\n}\n\n.oli.l3 {\n  counter-reset: list-4;\n}\n\n.oli.l0::before {\n  counter-increment: list-0;\n  content: counter(list-0, decimal) ". ";\n}\n\n.oli.l1::before {\n  counter-increment: list-1;\n  content: counter(list-1, lower-alpha) ". ";\n}\n\n.oli.l2::before {\n  counter-increment: list-2;\n  content: counter(list-2, lower-roman) ". ";\n}\n\n.oli.l3::before {\n  counter-increment: list-3;\n  content: counter(list-3, decimal) ". ";\n}\n\n.oli.l4::before {\n  counter-increment: list-4;\n  content: counter(list-4, lower-alpha) ". ";\n}\n\n.oli:first-of-type,\n.oli.block,\n.p + .oli {\n  counter-reset: list-0 list-1 list-2 list-3 list-4;\n}\n\n.uli::before {\n  content: "\\25CF";\n  display: inline-block;\n  width: 16px;\n}\n\n.uli.block,\n.oli.block,\n.uli + .p,\n.oli + .p,\n.p + .uli,\n.p + .oli {\n  margin-top: 0.5em;\n}\n\n.c {\n  font: var(--sinch-comp-code-tag-font-text);\n  font-size: inherit;\n  line-height: inherit;\n  color: var(--sinch-comp-code-tag-color-default-text-initial);\n  border: 1px solid var(--sinch-comp-code-tag-color-default-border-initial);\n  background-color: var(--sinch-comp-code-tag-color-default-background-initial);\n  padding: 0 0.25em;\n  border-radius: var(--sinch-comp-code-tag-shape-radius);\n}\n\n.l {\n  font: var(--sinch-comp-link-default-font-initial);\n  color: var(--sinch-comp-link-color-default-text-initial);\n  text-decoration: underline;\n}\n\n.i {\n  font-style: italic;\n}\n\n.b {\n  font-weight: bold;\n}\n\n.s {\n  text-decoration: line-through;\n}\n\n.e {\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  background-size: contain;\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.2em;\n}\n\n#top-wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 4px 0;\n}\n\n#top-wrapper.empty {\n  display: none;\n}\n\n#bottom-wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 0 4px 4px;\n}\n\n#bottom-wrapper.empty {\n  display: none;\n}\n</style>\n\n<div id="wrapper">\n  <div id="top-wrapper">\n    <slot id="top" name="top"></slot>\n  </div>\n  <div id="input-wrapper">\n    <div\n      id="input"\n      contentEditable\n      suppressContentEditableWarning\n      autoCapitalize="false"\n      autoCorrect="false"\n      autoSave="false"\n      spellCheck="false"\n    >\n    </div>\n    <div id="placeholder"></div>\n  </div>\n  <div id="border"></div>\n  <div id="bottom-wrapper">\n    <slot id="bottom" name="bottom"></slot>\n  </div>\n</div>\n';
+const templateHTML$n = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input-wrapper{position:relative;padding:8px 10px 8px 12px;box-sizing:border-box}#input{font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);white-space:pre-wrap;overflow-wrap:break-word;border:none;outline:0}#placeholder{display:none;position:absolute;left:0;top:0;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-placeholder);padding:8px 10px 8px 12px;pointer-events:none;user-select:none}#input.empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}:host([disabled]){color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}:host(:not([disabled])) #input-wrapper:focus-within~#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}.oli,.p,.uli{margin:0}.oli.l0,.uli.l0{margin-left:6px}.oli.l1,.uli.l1{margin-left:36px}.oli.l2,.uli.l2{margin-left:64px}.oli.l3,.uli.l3{margin-left:92px}.oli.l4,.uli.l4{margin-left:120px}.uli.l0{counter-reset:list-0 list-1 list-2 list-3 list-4}.uli.l1{counter-reset:list-1 list-2 list-3 list-4}.uli.l2{counter-reset:list-2 list-3 list-4}.uli.l3{counter-reset:list-3 list-4}.uli.l4{counter-reset:list-4}.oli.l0{counter-reset:list-1 list-2 list-3 list-4}.oli.l1{counter-reset:list-2 list-3 list-4}.oli.l2{counter-reset:list-3 list-4}.oli.l3{counter-reset:list-4}.oli.l0::before{counter-increment:list-0;content:counter(list-0,decimal) ". "}.oli.l1::before{counter-increment:list-1;content:counter(list-1,lower-alpha) ". "}.oli.l2::before{counter-increment:list-2;content:counter(list-2,lower-roman) ". "}.oli.l3::before{counter-increment:list-3;content:counter(list-3,decimal) ". "}.oli.l4::before{counter-increment:list-4;content:counter(list-4,lower-alpha) ". "}.oli.block,.oli:first-of-type,.p+.oli{counter-reset:list-0 list-1 list-2 list-3 list-4}.uli::before{content:"\\25CF";display:inline-block;width:16px}.oli+.p,.oli.block,.p+.oli,.p+.uli,.uli+.p,.uli.block{margin-top:.5em}.c{font:var(--sinch-comp-code-tag-font-text);font-size:inherit;line-height:inherit;color:var(--sinch-comp-code-tag-color-default-text-initial);border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.l{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.i{font-style:italic}.b{font-weight:700}.s{text-decoration:line-through}.e{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;width:1em;height:1em;vertical-align:-.2em}#top-wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;padding:4px 4px 0}#top-wrapper.empty{display:none}#bottom-wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 4px 4px}#bottom-wrapper.empty{display:none}</style><div id="wrapper"><div id="top-wrapper"><slot id="top" name="top"></slot></div><div id="input-wrapper"><div id="input" contenteditable suppresscontenteditablewarning autocapitalize="false" autocorrect="false" autosave="false" spellcheck="false"></div><div id="placeholder"></div></div><div id="border"></div><div id="bottom-wrapper"><slot id="bottom" name="bottom"></slot></div></div>';
 const template$n = document.createElement("template");
 template$n.innerHTML = templateHTML$n;
 const SUPPORTS_SHADOW_SELECTION = typeof window.ShadowRoot.prototype.getSelection === "function";
@@ -10282,6 +10304,7 @@ class RichTextarea extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -10291,10 +10314,11 @@ class RichTextarea extends NectaryElement {
   };
   #onSelectionReactHandler = (e) => {
     getReactEventHandler(this, "on-selection")?.(e);
+    getReactEventHandler(this, "onSelection")?.(e);
   };
 }
 defineCustomElement("sinch-rich-textarea", RichTextarea);
-const templateHTML$m = '<style>\n  :host {\n    display: block;\n\n    --sinch-global-size-icon: 32px;\n  }\n\n  #icon-dropdown {\n    display: block;\n    will-change: transform;\n    transform: rotate(180deg);\n  }\n\n  :host([value]:not([value="false"])) #icon-dropdown {\n    transform: rotate(0deg);\n  }\n</style>\n\n<sinch-button id="button" size="s">\n  <sinch-icon icons-version="2" name="fa-chevron-down"\n    id="icon-dropdown"\n    slot="icon"\n  ></sinch-icon>\n</sinch-button>\n';
+const templateHTML$m = '<style>:host{display:block;--sinch-global-size-icon:32px}#icon-dropdown{display:block;will-change:transform;transform:rotate(180deg)}:host([value]:not([value=false])) #icon-dropdown{transform:rotate(0)}</style><sinch-button id="button" size="s"><sinch-icon icons-version="2" name="fa-chevron-down" id="icon-dropdown" slot="icon"></sinch-icon></sinch-button>';
 const template$m = document.createElement("template");
 template$m.innerHTML = templateHTML$m;
 class SegmentCollapse extends NectaryElement {
@@ -10350,10 +10374,11 @@ class SegmentCollapse extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segment-collapse", SegmentCollapse);
-const templateHTML$l = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  height: 32px;\n  padding: 0 16px;\n  box-sizing: border-box;\n  color: var(--sinch-local-color-text);\n  background-color: var(--sinch-local-color-background);\n  cursor: pointer;\n\n  --sinch-local-color-text: var(--sinch-comp-segmented-control-color-default-text-initial);\n  --sinch-local-shape-radius: var(--sinch-comp-segmented-control-shape-radius);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-default-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-default-background-initial);\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-segmented-control-size-icon);\n}\n\n:host(:hover) {\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-default-background-hover);\n}\n\n:host(:first-child) #wrapper {\n  border-top-left-radius: var(--sinch-local-shape-radius);\n  border-bottom-left-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:last-child) #wrapper {\n  border-top-right-radius: var(--sinch-local-shape-radius);\n  border-bottom-right-radius: var(--sinch-local-shape-radius);\n}\n\n:host([data-checked]) #wrapper {\n  --sinch-local-color-text: var(--sinch-comp-segmented-control-color-checked-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-checked-icon-initial);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-checked-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-checked-background-initial);\n}\n\n:host([disabled]) #wrapper {\n  --sinch-local-color-text: var(--sinch-comp-segmented-control-color-disabled-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-disabled-icon-initial);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-disabled-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-disabled-background-initial);\n}\n\n#border {\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--sinch-local-color-border);\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n:host(:first-child) #border {\n  border-top-left-radius: var(--sinch-local-shape-radius);\n  border-bottom-left-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:last-child) #border {\n  border-top-right-radius: var(--sinch-local-shape-radius);\n  border-bottom-right-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:not(:first-child)) #border {\n  border-left-width: 0;\n}\n\n:host([data-checked]) #border {\n  border-width: 2px;\n}\n\n:host([data-checked]:not(:first-child)) #border {\n  left: -1px;\n}\n\n#outline {\n  display: none;\n  position: absolute;\n  inset: -3px;\n  border: 2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);\n  pointer-events: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n:host(:focus-visible) #outline {\n  display: block;\n}\n\n:host(:first-child) #outline {\n  border-top-left-radius: calc(var(--sinch-local-shape-radius) + 3px);\n  border-bottom-left-radius: calc(var(--sinch-local-shape-radius) + 3px);\n}\n\n:host(:last-child) #outline {\n  border-top-right-radius: calc(var(--sinch-local-shape-radius) + 3px);\n  border-bottom-right-radius: calc(var(--sinch-local-shape-radius) + 3px);\n}\n\n:host(:not(:first-child)) #outline {\n  left: -4px;\n}\n\n#content {\n  font: var(--sinch-comp-segmented-control-font-label);\n  flex-shrink: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  pointer-events: none;\n}\n\n::slotted(*) {\n  display: block;\n  pointer-events: none;\n}\n</style>\n\n<div id="wrapper">\n  <slot name="icon"></slot>\n  <span id="content"></span>\n  <div id="border"></div>\n  <div id="outline"></div>\n</div>\n';
+const templateHTML$l = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;color:var(--sinch-local-color-text);background-color:var(--sinch-local-color-background);cursor:pointer;--sinch-local-color-text:var(--sinch-comp-segmented-control-color-default-text-initial);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon)}:host(:hover){--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-local-color-text:var(--sinch-comp-segmented-control-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}:host([disabled]) #wrapper{--sinch-local-color-text:var(--sinch-comp-segmented-control-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial)}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{border-left-width:0}:host([data-checked]) #border{border-width:2px}:host([data-checked]:not(:first-child)) #border{left:-1px}#outline{display:none;position:absolute;inset:-3px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);pointer-events:none;box-sizing:border-box;z-index:1}:host(:focus-visible) #outline{display:block}:host(:first-child) #outline{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #outline{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:not(:first-child)) #outline{left:-4px}#content{font:var(--sinch-comp-segmented-control-font-label);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}::slotted(*){display:block;pointer-events:none}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><div id="border"></div><div id="outline"></div></div>';
 const template$l = document.createElement("template");
 template$l.innerHTML = templateHTML$l;
 class SegmentedControlOption extends NectaryElement {
@@ -10441,7 +10466,7 @@ class SegmentedControlOption extends NectaryElement {
   };
 }
 defineCustomElement("sinch-segmented-control-option", SegmentedControlOption);
-const templateHTML$k = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 0;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML$k = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template$k = document.createElement("template");
 template$k.innerHTML = templateHTML$k;
 class SegmentedControl extends NectaryElement {
@@ -10517,10 +10542,11 @@ class SegmentedControl extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segmented-control", SegmentedControl);
-const templateHTML$j = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  position: relative;\n  width: 56px;\n  height: 32px;\n  padding: 3px 16px;\n  box-sizing: border-box;\n  background-color: var(--sinch-local-color-background);\n  cursor: pointer;\n\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-segmented-control-size-icon);\n  --sinch-local-shape-radius: var(--sinch-comp-segmented-control-shape-radius);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-default-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-default-background-initial);\n}\n\n:host(:hover) {\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-default-background-hover);\n}\n\n:host(:first-child) #wrapper {\n  border-top-left-radius: var(--sinch-local-shape-radius);\n  border-bottom-left-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:last-child) #wrapper {\n  border-top-right-radius: var(--sinch-local-shape-radius);\n  border-bottom-right-radius: var(--sinch-local-shape-radius);\n}\n\n:host([data-checked]) #wrapper {\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-checked-icon-initial);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-checked-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-checked-background-initial);\n}\n\n:host([disabled]) #wrapper {\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-disabled-icon-initial);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-disabled-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-disabled-background-initial);\n\n  cursor: initial;\n}\n\n#border {\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--sinch-local-color-border);\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n:host(:first-child) #border {\n  border-top-left-radius: var(--sinch-local-shape-radius);\n  border-bottom-left-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:last-child) #border {\n  border-top-right-radius: var(--sinch-local-shape-radius);\n  border-bottom-right-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:not(:first-child)) #border {\n  border-left-width: 0;\n}\n\n:host([data-checked]) #border {\n  border-width: 2px;\n}\n\n:host([data-checked]:not(:first-child)) #border {\n  left: -1px;\n}\n\n#outline {\n  display: none;\n  position: absolute;\n  inset: -3px;\n  border: 2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);\n  pointer-events: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n:host(:focus-visible) #outline {\n  display: block;\n}\n\n:host(:first-child) #outline {\n  border-top-left-radius: calc(var(--sinch-local-shape-radius) + 3px);\n  border-bottom-left-radius: calc(var(--sinch-local-shape-radius) + 3px);\n}\n\n:host(:last-child) #outline {\n  border-top-right-radius: calc(var(--sinch-local-shape-radius) + 3px);\n  border-bottom-right-radius: calc(var(--sinch-local-shape-radius) + 3px);\n}\n\n:host(:not(:first-child)) #outline {\n  left: -4px;\n}\n\n::slotted(*) {\n  display: block;\n  pointer-events: none;\n}\n</style>\n\n<div id="wrapper">\n  <slot name="icon"></slot>\n  <div id="border"></div>\n  <div id="outline"></div>\n</div>\n';
+const templateHTML$j = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;background-color:var(--sinch-local-color-background);cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial)}:host(:hover){--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial);cursor:initial}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{border-left-width:0}:host([data-checked]) #border{border-width:2px}:host([data-checked]:not(:first-child)) #border{left:-1px}#outline{display:none;position:absolute;inset:-3px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);pointer-events:none;box-sizing:border-box;z-index:1}:host(:focus-visible) #outline{display:block}:host(:first-child) #outline{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #outline{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:not(:first-child)) #outline{left:-4px}::slotted(*){display:block;pointer-events:none}</style><div id="wrapper"><slot name="icon"></slot><div id="border"></div><div id="outline"></div></div>';
 const template$j = document.createElement("template");
 template$j.innerHTML = templateHTML$j;
 class SegmentedIconControlOption extends NectaryElement {
@@ -10596,7 +10622,7 @@ class SegmentedIconControlOption extends NectaryElement {
   };
 }
 defineCustomElement("sinch-segmented-icon-control-option", SegmentedIconControlOption);
-const templateHTML$i = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 0;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML$i = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template$i = document.createElement("template");
 template$i.innerHTML = templateHTML$i;
 class SegmentedIconControl extends NectaryElement {
@@ -10688,10 +10714,11 @@ class SegmentedIconControl extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segmented-icon-control", SegmentedIconControl);
-const templateHTML$h = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    cursor: pointer;\n  }\n\n  :host([disabled]) {\n    cursor: initial;\n  }\n\n  #wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--sinch-local-size);\n    padding: 0 8px 0 12px;\n    background-color:\n      var(\n        --sinch-comp-select-button-color-default-background-initial\n      );\n    border-radius: var(--sinch-local-shape-radius);\n\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-m);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-m);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-m\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-select-button-color-default-icon-initial\n      );\n  }\n\n  :host([data-size="l"]) > #wrapper {\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-l);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-l);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-l\n      );\n  }\n\n  :host([data-size="m"]) > #wrapper {\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-m);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-m);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-m\n      );\n  }\n\n  :host([data-size="s"]) > #wrapper {\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-s);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-s);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-s\n      );\n  }\n\n  :host([data-size="l"]) #wrapper {\n    padding: 0 12px;\n  }\n\n  :host([data-size="m"]) #wrapper {\n    padding: 0 8px 0 12px;\n  }\n\n  :host([data-size="s"]) #wrapper {\n    padding: 0 4px 0 12px;\n  }\n\n  :host([disabled]) #wrapper {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-select-button-color-disabled-icon-initial\n      );\n  }\n\n  #text {\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-button-font-input);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-default-text-initial\n      );\n  }\n\n  #text:empty {\n    display: none;\n  }\n\n  #placeholder {\n    display: none;\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-button-font-placeholder);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-default-placeholder-initial\n      );\n  }\n\n  #text:empty + #placeholder {\n    display: block;\n  }\n\n  #border {\n    position: absolute;\n    border:\n      1px solid\n      var(--sinch-comp-select-button-color-default-border-initial);\n    border-radius: var(--sinch-local-shape-radius);\n    inset: 0;\n    pointer-events: none;\n  }\n\n  :host(:focus-visible) #border {\n    border-color: var(--sinch-comp-select-button-color-default-border-focus);\n    border-width: 2px;\n  }\n\n  :host([invalid]) #border {\n    border-color: var(--sinch-comp-select-button-color-invalid-border-initial);\n  }\n\n  :host([disabled]) #border {\n    border-color: var(--sinch-comp-select-button-color-disabled-border-initial);\n  }\n\n  :host([disabled]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-disabled-text-initial\n      );\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  :host([disabled]) #placeholder {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-disabled-placeholder-initial\n      );\n  }\n\n  #left {\n    display: flex;\n    flex-direction: row;\n    align-self: stretch;\n    align-items: center;\n    gap: 4px;\n    margin-left: -4px;\n  }\n\n  #left.empty {\n    display: none;\n  }\n\n  #dropdown-icon {\n    margin-left: -4px;\n  }\n</style>\n\n<div id="wrapper" inert>\n  <div id="border"></div>\n  <div id="left">\n    <slot name="left"></slot>\n  </div>\n  <slot name="icon"></slot>\n  <sinch-text id="text" type="m" ellipsis></sinch-text>\n  <sinch-text id="placeholder" type="m" ellipsis></sinch-text>\n  <sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon>\n</div>\n';
+const templateHTML$h = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></div>';
 const template$h = document.createElement("template");
 template$h.innerHTML = templateHTML$h;
 class SelectButton extends NectaryElement {
@@ -10876,7 +10903,7 @@ class SelectButton extends NectaryElement {
   };
 }
 defineCustomElement("sinch-select-button", SelectButton);
-const templateHTML$g = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    position: relative;\n    box-sizing: border-box;\n    min-height: 40px;\n    padding: 8px 16px;\n    align-items: center;\n    gap: 10px;\n    user-select: none;\n    cursor: pointer;\n    background-color:\n      var(\n        --sinch-comp-select-menu-color-default-background-initial\n      );\n\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-menu-color-default-option-initial\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-select-menu-color-default-icon-initial\n      );\n    --sinch-global-size-icon: var(--sinch-comp-select-menu-size-icon);\n  }\n\n  #content {\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-menu-font-option);\n  }\n\n  #icon-check {\n    display: none;\n    margin-right: -6px;\n  }\n\n  :host([data-checked]) #icon-check {\n    display: block;\n  }\n\n  :host([data-selected]) > #wrapper {\n    background-color:\n      var(\n        --sinch-comp-select-menu-color-default-background-selected\n      );\n  }\n\n  :host(:hover) > #wrapper {\n    background-color:\n      var(\n        --sinch-comp-select-menu-color-default-background-hover\n      );\n  }\n\n  :host([disabled]) > #wrapper {\n    cursor: initial;\n    pointer-events: none;\n    background-color:\n      var(\n        --sinch-comp-select-menu-color-disabled-background-initial\n      );\n\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-menu-color-disabled-option-initial\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-select-menu-color-disabled-icon-initial\n      );\n  }\n\n  ::slotted([slot="icon"]) {\n    margin-left: -6px;\n  }\n\n  ::slotted([slot="content"]) {\n    pointer-events: none;\n    flex: 1;\n  }\n</style>\n\n<div id="wrapper">\n  <slot name="icon"></slot>\n  <slot name="content"></slot>\n  <sinch-text id="content" type="m" ellipsis></sinch-text>\n  <sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon>\n</div>\n';
+const templateHTML$g = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
 const template$g = document.createElement("template");
 template$g.innerHTML = templateHTML$g;
 class SelectMenuOption extends NectaryElement {
@@ -10952,7 +10979,7 @@ class SelectMenuOption extends NectaryElement {
 }
 defineCustomElement("sinch-select-menu-option", SelectMenuOption);
 const isSelectMenuOption = (el) => el.localName === "sinch-select-menu-option";
-const templateHTML$f = '<style>\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  #listbox {\n    overflow-y: auto;\n    max-height: var(--sinch-comp-select-menu-font-max-height);\n  }\n\n  #search {\n    display: none;\n    margin: 10px;\n  }\n\n  #search.active {\n    display: block;\n  }\n\n  #search-clear:not(.active) {\n    display: none;\n  }\n\n  #not-found {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 30px;\n    margin-bottom: 10px;\n    pointer-events: none;\n    user-select: none;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-menu-font-not-found-text);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-menu-color-default-not-found-text-initial\n      );\n  }\n\n  #not-found:not(.active) {\n    display: none;\n  }\n\n  ::slotted(.hidden) {\n    display: none;\n  }\n\n  ::slotted(sinch-title) {\n    padding: 8px 16px;\n\n    --sinch-global-color-text: var(--sinch-comp-select-menu-color-default-title-initial);\n  }\n</style>\n\n<sinch-input id="search" size="s" placeholder="Search">\n  <sinch-icon icons-version="2" name="magnifying-glass"\n    id="icon-search"\n    slot="icon"\n  ></sinch-icon>\n  <sinch-button id="search-clear" slot="right">\n    <sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon>\n  </sinch-button>\n</sinch-input>\n<div id="not-found">\n  <sinch-text type="m">No results</sinch-text>\n</div>\n<div id="listbox" role="presentation">\n  <slot></slot>\n</div>\n';
+const templateHTML$f = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto;max-height:var(--sinch-comp-select-menu-font-max-height)}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}::slotted(sinch-title){padding:8px 16px;--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-title-initial)}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const NUM_ITEMS_SEARCH = 7;
 const template$f = document.createElement("template");
@@ -11387,13 +11414,15 @@ class SelectMenu extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onSearchChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-search-change")?.(e);
+    getReactEventHandler(this, "onSearchChange")?.(e);
   };
 }
 defineCustomElement("sinch-select-menu", SelectMenu);
-const templateHTML$e = '<style>\n  :host {\n    display: block;\n    height: var(--sinch-sys-size-m);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-m);\n  }\n\n  :host([size="xs"]) {\n    height: var(--sinch-sys-size-xs);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-xs);\n  }\n\n  :host([size="s"]) {\n    height: var(--sinch-sys-size-s);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-s);\n  }\n\n  :host([size="m"]) {\n    height: var(--sinch-sys-size-m);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-m);\n  }\n\n  :host([size="l"]) {\n    height: var(--sinch-sys-size-l);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-l);\n  }\n\n  #content {\n    height: 100%;\n    background-color: var(--sinch-sys-color-border-subtle);\n    border-radius: var(--sinch-local-shape-radius);\n  }\n</style>\n\n<div id="content"></div>\n';
+const templateHTML$e = '<style>:host{display:block;height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size=xs]){height:var(--sinch-sys-size-xs);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs)}:host([size="s"]){height:var(--sinch-sys-size-s);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s)}:host([size="m"]){height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size="l"]){height:var(--sinch-sys-size-l);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l)}#content{height:100%;background-color:var(--sinch-sys-color-border-subtle);border-radius:var(--sinch-local-shape-radius)}</style><div id="content"></div>';
 const template$e = document.createElement("template");
 template$e.innerHTML = templateHTML$e;
 class SkeletonItem extends NectaryElement {
@@ -11417,7 +11446,7 @@ const getUid = () => crypto.getRandomValues(new Uint8Array(21)).reduce((id, byte
   }
   return `${id}_`;
 }, "");
-const templateHTML$d = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    height: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  :host([card]:not([card="false"])) > #wrapper {\n    padding: 16px;\n    background-color: var(--sinch-sys-color-surface-primary-default);\n    border-radius: var(--sinch-sys-shape-radius-l);\n    border: 1px solid var(--sinch-sys-color-border-subtle);\n  }\n\n  #shimmer {\n    position: absolute;\n    inset: 0;\n    background-image:\n      linear-gradient(\n        90deg,\n        transparent 0,\n        var(--sinch-sys-color-surface-tertiary-default) 100px,\n        transparent 200px\n      );\n    clip-path: url("#clip");\n  }\n\n  #svg {\n    display: block;\n    width: 0;\n    height: 0;\n  }\n</style>\n\n<svg id="svg">\n  <defs>\n    <clipPath id="clip"></clipPath>\n  </defs>\n</svg>\n<div id="wrapper">\n  <slot></slot>\n  <div id="shimmer"></div>\n</div>\n';
+const templateHTML$d = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-sys-color-surface-primary-default);border-radius:var(--sinch-sys-shape-radius-l);border:1px solid var(--sinch-sys-color-border-subtle)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-sys-color-surface-tertiary-default) 100px,transparent 200px);clip-path:url("#clip")}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"></div></div>';
 const template$d = document.createElement("template");
 template$d.innerHTML = templateHTML$d;
 const ANIMATION_DURATION = 2e3;
@@ -11517,7 +11546,7 @@ class Skeleton extends NectaryElement {
   }
 }
 defineCustomElement("sinch-skeleton", Skeleton);
-const templateHTML$c = "<style>\n:host {\n  display: table-row-group;\n}\n</style>\n\n<slot></slot>\n";
+const templateHTML$c = "<style>:host{display:table-row-group}</style><slot></slot>";
 const template$c = document.createElement("template");
 template$c.innerHTML = templateHTML$c;
 class TableBody extends NectaryElement {
@@ -11532,7 +11561,7 @@ class TableBody extends NectaryElement {
 }
 defineCustomElement("sinch-table-body", TableBody);
 const alignValues = ["start", "center", "end"];
-const templateHTML$b = '<style>\n:host {\n  display: table-cell;\n  vertical-align: top;\n  border-bottom: 1px solid var(--sinch-comp-table-color-cell-default-border-initial);\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 48px;\n  box-sizing: border-box;\n  padding: 8px;\n}\n\n:host([align="end"]) #wrapper {\n  text-align: end;\n  align-items: flex-end;\n}\n\n:host([align="center"]) #wrapper {\n  text-align: center;\n  align-items: center;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML$b = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-comp-table-color-cell-default-border-initial)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
 const template$b = document.createElement("template");
 template$b.innerHTML = templateHTML$b;
 class TableCell extends NectaryElement {
@@ -11552,7 +11581,7 @@ class TableCell extends NectaryElement {
   }
 }
 defineCustomElement("sinch-table-cell", TableCell);
-const templateHTML$a = '<style>\n:host {\n  display: table-cell;\n  border-bottom: 1px solid var(--sinch-comp-table-color-head-cell-default-border-initial);\n  vertical-align: middle;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 100%;\n  padding: 8px;\n  box-sizing: border-box;\n\n  --sinch-global-color-icon: var(--sinch-comp-table-color-head-cell-default-icon-initial);\n}\n\n#text {\n  flex-shrink: 1;\n  min-width: 0;\n\n  --sinch-global-color-text: var(--sinch-comp-table-color-head-cell-default-text-initial);\n}\n\n#text:empty {\n  display: none;\n}\n\n:host([align="center"]) > #wrapper {\n  justify-content: center;\n}\n\n:host([align="end"]) > #wrapper {\n  justify-content: flex-end;\n}\n\n:host([fit]) {\n  /* 1px instead of 0, because of Safari */\n  width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <slot name="checkbox"></slot>\n  <slot name="left"></slot>\n  <sinch-text id="text" type="m"></sinch-text>\n  <slot name="tooltip"></slot>\n  <slot name="right"></slot>\n</div>\n';
+const templateHTML$a = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-comp-table-color-head-cell-default-border-initial);vertical-align:middle}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;--sinch-global-color-icon:var(--sinch-comp-table-color-head-cell-default-icon-initial)}#text{flex-shrink:1;min-width:0;--sinch-global-color-text:var(--sinch-comp-table-color-head-cell-default-text-initial)}#text:empty{display:none}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host([fit]){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><sinch-text id="text" type="m"></sinch-text><slot name="tooltip"></slot><slot name="right"></slot></div>';
 const template$a = document.createElement("template");
 template$a.innerHTML = templateHTML$a;
 class TableHeadCell extends NectaryElement {
@@ -11605,7 +11634,7 @@ class TableHeadCell extends NectaryElement {
   }
 }
 defineCustomElement("sinch-table-head-cell", TableHeadCell);
-const templateHTML$9 = "<style>\n:host {\n  display: table-header-group;\n}\n</style>\n\n<slot></slot>\n";
+const templateHTML$9 = "<style>:host{display:table-header-group}</style><slot></slot>";
 const template$9 = document.createElement("template");
 template$9.innerHTML = templateHTML$9;
 class TableHead extends NectaryElement {
@@ -11619,7 +11648,7 @@ class TableHead extends NectaryElement {
   }
 }
 defineCustomElement("sinch-table-head", TableHead);
-const templateHTML$8 = "<style>\n:host {\n  display: table-row;\n  background-color: var(--sinch-comp-table-color-row-default-background-initial);\n}\n\n:host([selected]) {\n  background-color: var(--sinch-comp-table-color-row-checked-background-initial);\n}\n\n:host(:hover) {\n  background-color: var(--sinch-comp-table-color-row-default-background-hover);\n}\n\n:host([sticky]) ::slotted(sinch-table-head-cell) {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: var(--sinch-comp-table-color-row-default-background-sticky);\n}\n\n:host(:last-child) ::slotted(sinch-table-cell) {\n  border-bottom: none;\n}\n</style>\n\n<slot></slot>\n";
+const templateHTML$8 = "<style>:host{display:table-row;background-color:var(--sinch-comp-table-color-row-default-background-initial)}:host([selected]){background-color:var(--sinch-comp-table-color-row-checked-background-initial)}:host(:hover){background-color:var(--sinch-comp-table-color-row-default-background-hover)}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-comp-table-color-row-default-background-sticky)}:host(:last-child) ::slotted(sinch-table-cell){border-bottom:none}</style><slot></slot>";
 const template$8 = document.createElement("template");
 template$8.innerHTML = templateHTML$8;
 class TableRow extends NectaryElement {
@@ -11660,7 +11689,7 @@ class TableRow extends NectaryElement {
   }
 }
 defineCustomElement("sinch-table-row", TableRow);
-const templateHTML$7 = "<style>\n:host {\n  display: table;\n}\n</style>\n\n<slot></slot>\n";
+const templateHTML$7 = "<style>:host{display:table}</style><slot></slot>";
 const template$7 = document.createElement("template");
 template$7.innerHTML = templateHTML$7;
 class Table extends NectaryElement {
@@ -11674,7 +11703,7 @@ class Table extends NectaryElement {
   }
 }
 defineCustomElement("sinch-table", Table);
-const templateHTML$6 = '<style>\n:host {\n  display: block;\n}\n\n#button {\n  all: initial;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 12px 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  background-color: var(--sinch-comp-tab-color-default-background-initial);\n  border-top-left-radius: var(--sinch-comp-tab-shape-radius);\n  border-top-right-radius: var(--sinch-comp-tab-shape-radius);\n  height: 39px;\n\n  --sinch-global-color-text: var(--sinch-comp-tab-color-default-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-tab-size-icon);\n}\n\n#button:hover {\n  background-color: var(--sinch-comp-tab-color-default-background-hover);\n}\n\n/* Outline */\n#button:focus-visible::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  bottom: -3px;\n  border: 2px solid var(--sinch-comp-tab-color-default-outline-focus);\n  border-top-left-radius: var(--sinch-comp-tab-shape-radius);\n  border-top-right-radius: var(--sinch-comp-tab-shape-radius);\n  pointer-events: none;\n}\n\n#button:disabled {\n  cursor: unset;\n  pointer-events: none;\n\n  --sinch-global-color-text: var(--sinch-comp-tab-color-disabled-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-disabled-icon-initial);\n}\n\n:host([data-checked]) #button {\n  --sinch-global-color-text: var(--sinch-comp-tab-color-checked-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-checked-icon-initial);\n}\n\n/* Underline */\n:host([data-checked]) #button::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -1px;\n  pointer-events: none;\n  border-top: 2px solid var(--sinch-comp-tab-color-checked-border-initial);\n}\n\n#text {\n  flex-shrink: 1;\n  flex-basis: auto;\n  min-width: 0;\n\n  --sinch-comp-text-font: var(--sinch-comp-tab-font-label);\n}\n\n::slotted(*) {\n  display: block;\n}\n</style>\n\n<button id="button" tabindex="0">\n  <slot name="icon"></slot>\n  <sinch-text id="text" type="m" ellipsis></sinch-text>\n</button>\n';
+const templateHTML$6 = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block}</style><button id="button" tabindex="0"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
 const template$6 = document.createElement("template");
 template$6.innerHTML = templateHTML$6;
 class TabsOption extends NectaryElement {
@@ -11759,7 +11788,7 @@ const getTagColorBg = (id) => {
 const getTagColorFg = (id) => {
   return `var(--sinch-comp-tag-color-${id}-foreground)`;
 };
-const templateHTML$5 = '<style>\n:host {\n  display: inline-block;\n  vertical-align: middle;\n  outline: none;\n}\n\n:host([ellipsis]) {\n  display: inline;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  height: var(--sinch-comp-tag-size-container-m);\n  padding: 0 9px;\n  border-radius: var(--sinch-comp-tag-shape-radius);\n  background-color: var(--sinch-comp-tag-color-default-background);\n  box-sizing: border-box;\n  user-select: none;\n\n  --sinch-global-color-text: var(--sinch-comp-tag-color-default-foreground);\n  --sinch-global-color-icon: var(--sinch-comp-tag-color-default-foreground);\n  --sinch-global-size-icon: var(--sinch-comp-tag-size-icon-m);\n}\n\n:host([small]) #wrapper {\n  height: var(--sinch-comp-tag-size-container-s);\n  padding: 0 8px;\n\n  --sinch-global-size-icon: var(--sinch-comp-tag-size-icon-s);\n}\n\n#text {\n  flex: 1;\n\n  --sinch-comp-text-font: var(--sinch-comp-tag-font-size-m-label);\n}\n\n:host([small]) #text {\n  --sinch-comp-text-font: var(--sinch-comp-tag-font-size-s-label);\n}\n\n::slotted(*) {\n  margin-left: -4px;\n}\n\n</style>\n\n<sinch-tooltip id="tooltip" type="fast">\n  <div id="wrapper">\n    <slot name="icon"></slot>\n    <sinch-text id="text" type="s" ellipsis></sinch-text>\n  </div>\n</sinch-tooltip>';
+const templateHTML$5 = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host([ellipsis]){display:inline}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><sinch-tooltip id="tooltip" type="fast"><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div></sinch-tooltip>';
 const template$5 = document.createElement("template");
 template$5.innerHTML = templateHTML$5;
 class Tag extends NectaryElement {
@@ -11854,7 +11883,7 @@ class Tag extends NectaryElement {
   }
 }
 defineCustomElement("sinch-tag", Tag);
-const templateHTML$4 = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--sinch-comp-textarea-color-default-background-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  padding-right: 2px;\n  overflow: hidden;\n\n  --sinch-local-shape-radius: var(--sinch-comp-textarea-shape-radius);\n}\n\n#input {\n  all: initial;\n  display: block;\n  font: var(--sinch-comp-textarea-font-input);\n  color: var(--sinch-comp-textarea-color-default-text-initial);\n  resize: none;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  padding: 8px 10px 8px 12px;\n  border: none;\n  box-sizing: border-box;\n}\n\n/* #input::-webkit-resizer {\n\n} */\n\n#input::placeholder {\n  color: var(--sinch-comp-textarea-color-default-text-placeholder);\n  opacity: 1;\n}\n\n#input:disabled {\n  color: var(--sinch-comp-textarea-color-disabled-text-initial);\n  -webkit-text-fill-color: var(--sinch-comp-textarea-color-disabled-text-initial);\n}\n\n#border {\n  position: absolute;\n  border: 1px solid var(--sinch-comp-textarea-color-default-border-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  inset: 0;\n  pointer-events: none;\n}\n\n:host([invalid]) #border {\n  border-color: var(--sinch-comp-textarea-color-invalid-border-initial);\n}\n\n#input:focus + #border {\n  border-color: var(--sinch-comp-textarea-color-default-border-focus);\n  border-width: 2px;\n}\n\n#input:disabled + #border {\n  border-color: var(--sinch-comp-textarea-color-disabled-border-initial);\n}\n\n#bottom {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 4px 4px;\n}\n\n#bottom.empty {\n  display: none;\n}\n\n:host([resizable]) #bottom {\n  padding-right: calc(var(--sinch-comp-textarea-size-resize-handle) + 4px);\n}\n\n#resize-handle {\n  display: none;\n  position: absolute;\n  width: var(--sinch-comp-textarea-size-resize-handle);\n  height: var(--sinch-comp-textarea-size-resize-handle);\n  bottom: 0;\n  right: 0;\n  cursor: ns-resize;\n}\n\n:host([resizable]) #resize-handle {\n  display: block;\n}\n\n#resize-icon {\n  display: block;\n  pointer-events: none;\n  fill: var(--sinch-comp-textarea-color-default-border-initial);\n}\n</style>\n\n<div id="wrapper">\n  <textarea id="input"></textarea>\n  <div id="border"></div>\n  <div id="bottom">\n    <slot name="bottom"></slot>\n    <div id="resize-handle">\n      <svg id="resize-icon" width="16" height="16">\n        <path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/>\n      </svg>\n    </div>\n  </div>\n</div>\n';
+const templateHTML$4 = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none;box-sizing:border-box}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:12px 4px 4px}#bottom.empty{display:none}:host([resizable]) #bottom{padding-right:calc(var(--sinch-comp-textarea-size-resize-handle) + 4px)}#resize-handle{display:none;position:absolute;width:var(--sinch-comp-textarea-size-resize-handle);height:var(--sinch-comp-textarea-size-resize-handle);bottom:0;right:0;cursor:ns-resize}:host([resizable]) #resize-handle{display:block}#resize-icon{display:block;pointer-events:none;fill:var(--sinch-comp-textarea-color-default-border-initial)}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot><div id="resize-handle"><svg id="resize-icon" width="16" height="16"><path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/></svg></div></div></div>';
 const template$4 = document.createElement("template");
 template$4.innerHTML = templateHTML$4;
 class Textarea extends NectaryElement {
@@ -12192,6 +12221,7 @@ class Textarea extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -12264,7 +12294,7 @@ const getShortestCssDeg = (currentDeg, nextDeg) => {
   }
   return currentDeg + diff;
 };
-const templateHTML$3 = '<style>\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 248px;\n    padding: 16px;\n    box-sizing: border-box;\n    gap: 16px;\n  }\n\n  #header {\n    position: relative;\n    width: 100%;\n    height: 48px;\n    font: var(--sinch-comp-time-picker-header-font);\n    line-height: 48px;\n    user-select: none;\n    color: var(--sinch-comp-time-picker-header-color-default-text-initial);\n  }\n\n  #footer {\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    height: 32px;\n  }\n\n  #picker {\n    position: relative;\n    width: 216px;\n    height: 216px;\n    border-radius: 50%;\n    box-sizing: border-box;\n    border:\n      1px solid\n      var(--sinch-comp-time-picker-watch-face-color-default-border-initial);\n    background-color:\n      var(\n        --sinch-comp-time-picker-watch-face-color-default-background-initial\n      );\n  }\n\n  #picker-hours,\n  #picker-minutes {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .digit-hour-12,\n  .digit-hour-24,\n  .digit-minute {\n    position: absolute;\n    width: 28px;\n    height: 28px;\n    text-align: center;\n    top: calc(50% - 14px);\n    left: calc(50% - 14px);\n    z-index: 1;\n    cursor: pointer;\n  }\n\n  .digit-hour-12 {\n    font: var(--sinch-comp-time-picker-digit-font-default-h12);\n    color: var(--sinch-comp-time-picker-digit-color-default-h12-initial);\n    line-height: 28px;\n  }\n\n  .digit-hour-12.selected {\n    font: var(--sinch-comp-time-picker-digit-font-checked-h12);\n    color: var(--sinch-comp-time-picker-digit-color-checked-h12-default);\n  }\n\n  .digit-hour-24 {\n    font: var(--sinch-comp-time-picker-digit-font-default-h24);\n    color: var(--sinch-comp-time-picker-digit-color-default-h24-initial);\n    line-height: 28px;\n  }\n\n  .digit-hour-24.selected {\n    font: var(--sinch-comp-time-picker-digit-font-checked-h24);\n    color: var(--sinch-comp-time-picker-digit-color-checked-h24-initial);\n  }\n\n  .digit-minute {\n    font: var(--sinch-comp-time-picker-digit-font-default-minutes);\n    color: var(--sinch-comp-time-picker-digit-color-default-minute-initial);\n    line-height: 28px;\n  }\n\n  .digit-minute.selected {\n    font: var(--sinch-comp-time-picker-digit-font-checked-minutes);\n    color: var(--sinch-comp-time-picker-digit-color-checked-minute-initial);\n  }\n\n  #picker-touch {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n    border-radius: 50%;\n  }\n\n  #needle-hour,\n  #needle-minute,\n  #picker-touch::after {\n    background-color:\n      var(\n        --sinch-comp-time-picker-needle-color-default-background-initial\n      );\n  }\n\n  #needle-hour,\n  #needle-minute {\n    position: absolute;\n    transform-origin: bottom center;\n    transform: rotate(0deg);\n    bottom: 50%;\n    height: 50px;\n    transition-duration: 0.25s;\n    transition-timing-function: ease-in-out;\n    transition-property: transform height;\n    z-index: 2;\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion) {\n    #needle-hour,\n    #needle-minute {\n      transition: none;\n    }\n  }\n\n  #needle-hour {\n    width: 4px;\n    left: calc(50% - 2px);\n    border-radius: 2px;\n  }\n\n  #needle-minute {\n    width: 2px;\n    left: calc(50% - 1px);\n    border-radius: 1px;\n  }\n\n  #needle-hour:focus-visible,\n  #needle-minute:focus-visible {\n    background-color:\n      var(\n        --sinch-comp-time-picker-needle-color-default-background-focus\n      );\n  }\n\n  #needle-minute:not(.selected)::after {\n    content: "";\n    position: absolute;\n    transform: translateX(-50%);\n    left: 0;\n    top: -16px;\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background-color:\n      var(\n        --sinch-comp-time-picker-digit-color-checked-minute-initial\n      );\n  }\n\n  #picker-touch::after {\n    content: "";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  #header-hours,\n  #header-minutes {\n    position: absolute;\n    padding: 0 4px;\n    width: 50px;\n    outline: none;\n  }\n\n  #header-hours {\n    right: calc(50% + 8px);\n    text-align: right;\n  }\n\n  #header-minutes {\n    left: calc(50% + 8px);\n  }\n\n  #header-colon {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  #submit {\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  #submit-icon {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-time-picker-header-color-default-icon-initial\n      );\n  }\n\n  :host([ampm]) .digit-hour-24 {\n    display: none;\n  }\n\n  :host(:not([ampm])) #footer {\n    display: none;\n  }\n</style>\n\n<div id="wrapper">\n  <div id="header">\n    <div\n      id="header-hours"\n      role="meter"\n      aria-valuemin="0"\n      aria-valuemax="23"\n      aria-valuenow="0"\n      aria-valuetext="0"\n    >\n      <span>00</span>\n    </div>\n    <div id="header-colon">&colon;</div>\n    <div\n      id="header-minutes"\n      role="meter"\n      aria-valuemin="0"\n      aria-valuemax="59"\n      aria-valuenow="0"\n      aria-valuetext="0"\n    >\n      <span>00</span>\n    </div>\n    <sinch-button id="submit" size="s" aria-label="Submit">\n      <sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon>\n    </sinch-button>\n  </div>\n  <div id="picker" aria-hidden="true">\n    <div id="picker-hours"></div>\n    <div id="picker-minutes"></div>\n    <div id="picker-touch">\n      <div id="needle-hour" tabindex="0"></div>\n      <div id="needle-minute" tabindex="0"></div>\n    </div>\n  </div>\n  <div id="footer">\n    <sinch-segmented-control id="ampm">\n      <sinch-segmented-control-option\n        value="am"\n        text="AM"\n        aria-label="AM"\n      ></sinch-segmented-control-option>\n      <sinch-segmented-control-option\n        value="pm"\n        text="PM"\n        aria-label="PM"\n      ></sinch-segmented-control-option>\n    </sinch-segmented-control>\n  </div>\n</div>\n';
+const templateHTML$3 = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
 const template$3 = document.createElement("template");
 template$3.innerHTML = templateHTML$3;
 const PICKER_RADIUS = 216 / 2;
@@ -12583,11 +12613,12 @@ class TimePicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-time-picker", TimePicker);
 const originValues = ["bottom-right", "top-right"];
-const templateHTML$2 = '<style>\n:host {\n  display: block;\n}\n\n#items {\n  display: block;\n  width: 0;\n  height: 0;\n  visibility: hidden;\n  overflow: hidden;\n}\n\n#list {\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  z-index: 1;\n  bottom: 0;\n  right: 16px;\n}\n\n:host([origin="top-right"]) #list {\n  flex-direction: column-reverse;\n  bottom: unset;\n  top: 16px;\n}\n\n.item-wrapper {\n  height: 0;\n  opacity: 0;\n  position: relative;\n}\n\n.item-wrapper[data-deleting]::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n</style>\n\n<slot id="items"></slot>\n<div id="list"></div>\n';
+const templateHTML$2 = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
@@ -12764,7 +12795,7 @@ class ToastManager extends NectaryElement {
 }
 defineCustomElement("sinch-toast-manager", ToastManager);
 const typeValues = ["info", "success", "warn", "error"];
-const templateHTML$1 = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    width: 328px;\n    max-width: 90vw;\n    padding: 16px;\n    box-sizing: border-box;\n    border-radius: var(--sinch-comp-toast-shape-radius);\n    box-shadow: var(--sinch-comp-toast-shadow);\n  }\n\n  :host([type="success"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-success-default-background);\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-warning-default-background);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-error-default-background);\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-info-default-background);\n  }\n\n  #text {\n    padding: 4px 0 4px 4px;\n    flex: 1;\n    min-width: 0;\n    word-wrap: break-word;\n\n    --sinch-comp-text-font: var(--sinch-comp-toast-font-body);\n  }\n\n  :host([type="success"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-toast-color-success-default-text\n      );\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-toast-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-toast-color-error-default-text);\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-toast-color-info-default-text);\n  }\n\n  #icon {\n    align-self: flex-start;\n    margin: 4px 0;\n  }\n\n  #icon-info,\n  #icon-success,\n  #icon-warn,\n  #icon-error {\n    display: none;\n  }\n\n  #icon-success {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-toast-color-success-default-icon\n      );\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-toast-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-toast-color-error-default-icon);\n  }\n\n  #icon-info {\n    --sinch-global-color-icon: var(--sinch-comp-toast-color-info-default-icon);\n  }\n\n  :host([type="success"]) #icon-success,\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon>\n  <sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon>\n  <sinch-icon icons-version="2" name="triangle-exclamation"\n    id="icon-warn"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <sinch-rich-text id="text" size="m"></sinch-rich-text>\n  <slot name="action"></slot>\n  <slot name="close"></slot>\n</div>\n';
+const templateHTML$1 = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
 const TIMEOUT = 5e3;
 const template$1 = document.createElement("template");
 template$1.innerHTML = templateHTML$1;
@@ -12842,10 +12873,11 @@ class Toast extends NectaryElement {
   }
   #onTimeoutReactHandler = (e) => {
     getReactEventHandler(this, "on-timeout")?.(e);
+    getReactEventHandler(this, "onTimeout")?.(e);
   };
 }
 defineCustomElement("sinch-toast", Toast);
-const templateHTML = '<style>\n:host {\n  display: inline-block;\n  vertical-align: middle;\n  outline: none;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  width: 100%;\n  height: var(--sinch-local-size);\n  cursor: pointer;\n  user-select: none;\n\n  --sinch-local-size: 20px;\n}\n\n:host([small]) #wrapper {\n  --sinch-local-size: 16px;\n}\n\n:host([disabled]) #wrapper {\n  cursor: initial;\n}\n\n#knob-container {\n  position: relative;\n  width: 40px;\n  height: var(--sinch-local-size);\n  border-radius: calc(var(--sinch-local-size) * 0.5);\n  background-color: var(--sinch-comp-toggle-color-default-background-initial);\n  pointer-events: none;\n  transition: background-color 0.15s ease-in-out;\n}\n\n:host([small]) #knob-container {\n  width: 32px;\n  height: var(--sinch-local-size);\n}\n\n:host([checked]) #knob-container {\n  background-color: var(--sinch-comp-toggle-color-checked-background-initial);\n}\n\n:host([disabled]) #knob-container {\n  background-color: var(--sinch-comp-toggle-color-disabled-background-initial);\n}\n\n:host([checked][disabled]) #knob-container {\n  background-color: var(--sinch-comp-toggle-color-checked-disabled-background-initial);\n}\n\n#knob {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  left: 2px;\n  top: 2px;\n  border-radius: 50%;\n  background-color: var(--sinch-comp-toggle-color-default-knob-background-initial);\n  box-shadow: var(--sinch-comp-toggle-shadow-knob-default);\n  transform: translateX(0);\n  transition: transform 0.15s ease-in-out;\n  will-change: transform;\n}\n\n:host([small]) #knob {\n  width: 12px;\n  height: 12px;\n}\n\n:host([disabled]) #knob-container > #knob {\n  box-shadow: var(--sinch-comp-toggle-shadow-knob-disabled);\n}\n\n:host([checked]) #knob-container > #knob {\n  transform: translateX(20px);\n}\n\n:host([small][checked]) #knob-container > #knob {\n  transform: translateX(16px);\n}\n\n/* Knob on-off labels */\n#knob::before,\n#knob::after {\n  font: var(--sinch-comp-toggle-font-size-m-inside-text);\n  color: var(--sinch-comp-toggle-color-default-text-inside-initial);\n  text-transform: uppercase;\n  position: absolute;\n  top: 0;\n  padding: 0 1px;\n  opacity: 0;\n  transition: opacity 0.15s ease-in-out;\n  user-select: none;\n}\n\n#knob::before {\n  content: "on";\n  right: 100%;\n}\n\n#knob::after {\n  content: "off";\n  left: 100%;\n}\n\n:host([labeled]:not([small]):not([checked])) #knob::after {\n  opacity: 1;\n}\n\n:host([labeled]:not([small])[checked]) #knob::before {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion) {\n  #knob-container,\n  #knob,\n  #knob::before,\n  #knob::after {\n    transition: none;\n  }\n}\n\n#outline {\n  display: none;\n  position: absolute;\n  left: -3px;\n  top: -3px;\n  right: -3px;\n  bottom: -3px;\n  border: 2px solid var(--sinch-comp-toggle-color-default-outline-focus);\n  border-radius: 17px;\n  pointer-events: none;\n}\n\n:host(:focus-visible) #outline {\n  display: block;\n}\n\n#label {\n  flex: 1;\n  min-width: 0;\n  align-self: center;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font: var(--sinch-comp-toggle-font-size-m-label);\n  color: var(--sinch-comp-toggle-color-default-label-initial);\n}\n\n#label:empty {\n  display: none;\n}\n\n:host([small]) #label {\n  font: var(--sinch-comp-toggle-font-size-s-label);\n}\n\n:host([disabled]) #label {\n  color: var(--sinch-comp-toggle-color-disabled-label-initial);\n}\n</style>\n\n<div id="wrapper">\n  <div id="knob-container">\n    <div id="outline"></div>\n    <div id="knob"></div>\n  </div>\n  <span id="label"></span>\n</div>\n';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;gap:8px;width:100%;height:var(--sinch-local-size);cursor:pointer;user-select:none;--sinch-local-size:20px}:host([small]) #wrapper{--sinch-local-size:16px}:host([disabled]) #wrapper{cursor:initial}#knob-container{position:relative;width:40px;height:var(--sinch-local-size);border-radius:calc(var(--sinch-local-size) * .5);background-color:var(--sinch-comp-toggle-color-default-background-initial);pointer-events:none;transition:background-color .15s ease-in-out}:host([small]) #knob-container{width:32px;height:var(--sinch-local-size)}:host([checked]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}:host([disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}:host([checked][disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .15s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}:host([disabled]) #knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}:host([checked]) #knob-container>#knob{transform:translateX(20px)}:host([small][checked]) #knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;position:absolute;top:0;padding:0 1px;opacity:0;transition:opacity .15s ease-in-out;user-select:none}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small]):not([checked])) #knob::after{opacity:1}:host([labeled]:not([small])[checked]) #knob::before{opacity:1}@media (prefers-reduced-motion){#knob,#knob-container,#knob::after,#knob::before{transition:none}}#outline{display:none;position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:17px;pointer-events:none}:host(:focus-visible) #outline{display:block}#label{flex:1;min-width:0;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial)}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}:host([disabled]) #label{color:var(--sinch-comp-toggle-color-disabled-label-initial)}</style><div id="wrapper"><div id="knob-container"><div id="outline"></div><div id="knob"></div></div><span id="label"></span></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Toggle extends NectaryElement {
@@ -12978,6 +13010,7 @@ class Toggle extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = (e) => {
     getReactEventHandler(this, "on-focus")?.(e);