@nectary/components 5.38.1 → 5.39.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/bundle.d.ts +2 -0
  2. package/bundle.js +1710 -219
  3. package/bundle.ts +2 -0
  4. package/package.json +3 -3
  5. package/progress/index.js +4 -3
  6. package/progress-stepper-item-v2/global/index.d.ts +1 -0
  7. package/progress-stepper-item-v2/global/index.js +2 -0
  8. package/progress-stepper-item-v2/index.d.ts +23 -0
  9. package/progress-stepper-item-v2/index.js +187 -0
  10. package/progress-stepper-item-v2/types.d.ts +69 -0
  11. package/progress-stepper-item-v2/types.js +1 -0
  12. package/progress-stepper-item-v2/utils.d.ts +22 -0
  13. package/progress-stepper-item-v2/utils.js +88 -0
  14. package/progress-stepper-v2/compact-format.d.ts +22 -0
  15. package/progress-stepper-v2/compact-format.js +56 -0
  16. package/progress-stepper-v2/compact.d.ts +26 -0
  17. package/progress-stepper-v2/compact.js +330 -0
  18. package/progress-stepper-v2/global/index.d.ts +1 -0
  19. package/progress-stepper-v2/global/index.js +2 -0
  20. package/progress-stepper-v2/index.d.ts +31 -0
  21. package/progress-stepper-v2/index.js +618 -0
  22. package/progress-stepper-v2/model.d.ts +32 -0
  23. package/progress-stepper-v2/model.js +59 -0
  24. package/progress-stepper-v2/orientation.d.ts +8 -0
  25. package/progress-stepper-v2/orientation.js +24 -0
  26. package/progress-stepper-v2/separators.d.ts +1 -0
  27. package/progress-stepper-v2/separators.js +48 -0
  28. package/progress-stepper-v2/step-chip.d.ts +9 -0
  29. package/progress-stepper-v2/step-chip.js +126 -0
  30. package/progress-stepper-v2/types.d.ts +66 -0
  31. package/progress-stepper-v2/types.js +1 -0
  32. package/standalone.d.ts +2 -0
  33. package/standalone.js +2 -0
  34. package/standalone.ts +2 -0
  35. package/utils/component-names.d.ts +2 -2
  36. package/utils/component-names.js +2 -0
  37. package/utils/dom.d.ts +10 -2
  38. package/utils/dom.js +29 -0
  39. package/utils/element.d.ts +2 -0
  40. package/utils/index.js +4 -1
package/bundle.js CHANGED
@@ -49,6 +49,9 @@ const DEFAULT_INTEGER_OPTIONS = {
49
49
  itemSpaceBetween: 0,
50
50
  defaultValue: null
51
51
  };
52
+ const DEFAULT_FLOAT_OPTIONS = {
53
+ fractionDigits: 2
54
+ };
52
55
  const applyRange = (value, { min, max }) => {
53
56
  let result = value;
54
57
  if (min != null) {
@@ -59,6 +62,21 @@ const applyRange = (value, { min, max }) => {
59
62
  }
60
63
  return result;
61
64
  };
65
+ const attrValueToFloat = (value, options) => {
66
+ const opts = {
67
+ ...DEFAULT_FLOAT_OPTIONS,
68
+ ...options
69
+ };
70
+ const float = Number.parseFloat(String(value));
71
+ if (Number.isNaN(float)) {
72
+ return null;
73
+ }
74
+ if (opts.min !== void 0 || opts.max !== void 0) {
75
+ const rangedFloat = applyRange(float, { min: opts.min, max: opts.max });
76
+ return rangedFloat.toFixed(opts.fractionDigits);
77
+ }
78
+ return float.toFixed(opts.fractionDigits);
79
+ };
62
80
  const attrValueToInteger = (value, options = DEFAULT_INTEGER_OPTIONS) => {
63
81
  const { defaultValue = null, itemSizeMultiplier = 1, itemSpaceBetween = 0, addExtraSpace = false } = options;
64
82
  let intValue = defaultValue;
@@ -169,6 +187,14 @@ const getScrollableParents = (node) => {
169
187
  scrollableParents.push(document);
170
188
  return scrollableParents;
171
189
  };
190
+ const createScopedElement = (anchor, tag) => {
191
+ const root = anchor.getRootNode();
192
+ const shadowCreateElement = root.createElement;
193
+ if (typeof shadowCreateElement === "function") {
194
+ return shadowCreateElement.call(root, tag);
195
+ }
196
+ return document.createElement(tag);
197
+ };
172
198
  const isTransformedElement = (element) => {
173
199
  if (element == null) {
174
200
  return false;
@@ -251,15 +277,15 @@ class NectaryElement extends NectaryElementBase {
251
277
  return this.#isDomConnected;
252
278
  }
253
279
  }
254
- const templateHTML$1j = '<style>:host{display:inline-block;text-transform:none}#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>';
255
- const template$1j = document.createElement("template");
256
- template$1j.innerHTML = templateHTML$1j;
280
+ const templateHTML$1l = '<style>:host{display:inline-block;text-transform:none}#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>';
281
+ const template$1l = document.createElement("template");
282
+ template$1l.innerHTML = templateHTML$1l;
257
283
  class Icon extends NectaryElement {
258
284
  #$icon;
259
285
  constructor() {
260
286
  super();
261
287
  const shadowRoot = this.attachShadow();
262
- shadowRoot.appendChild(template$1j.content.cloneNode(true));
288
+ shadowRoot.appendChild(template$1l.content.cloneNode(true));
263
289
  this.#$icon = shadowRoot.querySelector("#icon");
264
290
  }
265
291
  static get observedAttributes() {
@@ -335,14 +361,14 @@ class Icon extends NectaryElement {
335
361
  }
336
362
  defineCustomElement("sinch-icon", Icon);
337
363
  const typeValues$7 = ["m", "s", "xs", "xxs"];
338
- const templateHTML$1i = '<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([type=xs][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-xs)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
339
- const template$1i = document.createElement("template");
340
- template$1i.innerHTML = templateHTML$1i;
364
+ const templateHTML$1k = '<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([type=xs][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-xs)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
365
+ const template$1k = document.createElement("template");
366
+ template$1k.innerHTML = templateHTML$1k;
341
367
  class Text extends NectaryElement {
342
368
  constructor() {
343
369
  super();
344
370
  const shadowRoot = this.attachShadow();
345
- shadowRoot.appendChild(template$1i.content.cloneNode(true));
371
+ shadowRoot.appendChild(template$1k.content.cloneNode(true));
346
372
  }
347
373
  connectedCallback() {
348
374
  this.#updateRole();
@@ -400,15 +426,15 @@ class Text extends NectaryElement {
400
426
  }
401
427
  defineCustomElement("sinch-text", Text);
402
428
  const typeValues$6 = ["xl", "l", "m", "s", "xs"];
403
- const templateHTML$1h = '<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>';
404
- const template$1h = document.createElement("template");
405
- template$1h.innerHTML = templateHTML$1h;
429
+ const templateHTML$1j = '<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>';
430
+ const template$1j = document.createElement("template");
431
+ template$1j.innerHTML = templateHTML$1j;
406
432
  class Title extends NectaryElement {
407
433
  #$text;
408
434
  constructor() {
409
435
  super();
410
436
  const shadowRoot = this.attachShadow();
411
- shadowRoot.appendChild(template$1h.content.cloneNode(true));
437
+ shadowRoot.appendChild(template$1j.content.cloneNode(true));
412
438
  this.#$text = shadowRoot.querySelector("#text");
413
439
  }
414
440
  connectedCallback() {
@@ -462,9 +488,9 @@ class Title extends NectaryElement {
462
488
  }
463
489
  defineCustomElement("sinch-title", Title);
464
490
  const statusValues$1 = ["info", "success", "warn", "error"];
465
- const templateHTML$1g = '<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:flex-start;gap:8px;box-sizing:border-box;width:100%;min-height:48px;padding:12px 4px 12px 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{flex-shrink:0;margin-top:2px;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{flex-shrink:0;--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"></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>';
466
- const template$1g = document.createElement("template");
467
- template$1g.innerHTML = templateHTML$1g;
491
+ const templateHTML$1i = '<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:flex-start;gap:8px;box-sizing:border-box;width:100%;min-height:48px;padding:12px 4px 12px 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{flex-shrink:0;margin-top:2px;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{flex-shrink:0;--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"></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>';
492
+ const template$1i = document.createElement("template");
493
+ template$1i.innerHTML = templateHTML$1i;
468
494
  class AccordionItem extends NectaryElement {
469
495
  #$button;
470
496
  #$title;
@@ -473,7 +499,7 @@ class AccordionItem extends NectaryElement {
473
499
  constructor() {
474
500
  super();
475
501
  const shadowRoot = this.attachShadow({ delegatesFocus: true });
476
- shadowRoot.appendChild(template$1g.content.cloneNode(true));
502
+ shadowRoot.appendChild(template$1i.content.cloneNode(true));
477
503
  this.#$button = shadowRoot.querySelector("#button");
478
504
  this.#$title = shadowRoot.querySelector("#title");
479
505
  this.#$optionalText = shadowRoot.querySelector("#optional");
@@ -633,16 +659,16 @@ const getTargetIndexInParent = (e, parent) => {
633
659
  }
634
660
  return -1;
635
661
  };
636
- const templateHTML$1f = '<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>';
637
- const template$1f = document.createElement("template");
638
- template$1f.innerHTML = templateHTML$1f;
662
+ const templateHTML$1h = '<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>';
663
+ const template$1h = document.createElement("template");
664
+ template$1h.innerHTML = templateHTML$1h;
639
665
  class Accordion extends NectaryElement {
640
666
  #$slot;
641
667
  #controller = null;
642
668
  constructor() {
643
669
  super();
644
670
  const shadowRoot = this.attachShadow();
645
- shadowRoot.appendChild(template$1f.content.cloneNode(true));
671
+ shadowRoot.appendChild(template$1h.content.cloneNode(true));
646
672
  this.#$slot = shadowRoot.querySelector("slot");
647
673
  }
648
674
  static get observedAttributes() {
@@ -719,16 +745,16 @@ class Accordion extends NectaryElement {
719
745
  };
720
746
  }
721
747
  defineCustomElement("sinch-accordion", Accordion);
722
- const templateHTML$1e = '<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([slot=icon]){margin-left:-6px}::slotted([slot=right-icon]){margin-right:-6px}</style><div id="wrapper" inert><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><slot name="right-icon"></slot></div>';
723
- const template$1e = document.createElement("template");
724
- template$1e.innerHTML = templateHTML$1e;
748
+ const templateHTML$1g = '<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([slot=icon]){margin-left:-6px}::slotted([slot=right-icon]){margin-right:-6px}</style><div id="wrapper" inert><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><slot name="right-icon"></slot></div>';
749
+ const template$1g = document.createElement("template");
750
+ template$1g.innerHTML = templateHTML$1g;
725
751
  class ActionMenuOption extends NectaryElement {
726
752
  #$content;
727
753
  #controller = null;
728
754
  constructor() {
729
755
  super();
730
756
  const shadowRoot = this.attachShadow();
731
- shadowRoot.appendChild(template$1e.content.cloneNode(true));
757
+ shadowRoot.appendChild(template$1g.content.cloneNode(true));
732
758
  this.#$content = shadowRoot.querySelector("#content");
733
759
  }
734
760
  connectedCallback() {
@@ -866,10 +892,10 @@ const subscribeContext = ($el, name, cb, signal) => {
866
892
  );
867
893
  }, { once: true });
868
894
  };
869
- const templateHTML$1d = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
895
+ const templateHTML$1f = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
870
896
  const ITEM_HEIGHT$2 = 40;
871
- const template$1d = document.createElement("template");
872
- template$1d.innerHTML = templateHTML$1d;
897
+ const template$1f = document.createElement("template");
898
+ template$1f.innerHTML = templateHTML$1f;
873
899
  class ActionMenu extends NectaryElement {
874
900
  #$optionSlot;
875
901
  #$listbox;
@@ -877,7 +903,7 @@ class ActionMenu extends NectaryElement {
877
903
  constructor() {
878
904
  super();
879
905
  const shadowRoot = this.attachShadow();
880
- shadowRoot.appendChild(template$1d.content.cloneNode(true));
906
+ shadowRoot.appendChild(template$1f.content.cloneNode(true));
881
907
  this.#$optionSlot = shadowRoot.querySelector("slot");
882
908
  this.#$listbox = shadowRoot.querySelector("#listbox");
883
909
  }
@@ -1102,15 +1128,15 @@ const getEmojiUrl = (baseUrl, char) => {
1102
1128
  }
1103
1129
  return baseUrl.replace("%s", codepoints);
1104
1130
  };
1105
- const templateHTML$1c = '<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">';
1106
- const template$1c = document.createElement("template");
1107
- template$1c.innerHTML = templateHTML$1c;
1131
+ const templateHTML$1e = '<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">';
1132
+ const template$1e = document.createElement("template");
1133
+ template$1e.innerHTML = templateHTML$1e;
1108
1134
  class Emoji extends NectaryElement {
1109
1135
  #$img;
1110
1136
  constructor() {
1111
1137
  super();
1112
1138
  const shadowRoot = this.attachShadow();
1113
- shadowRoot.appendChild(template$1c.content.cloneNode(true));
1139
+ shadowRoot.appendChild(template$1e.content.cloneNode(true));
1114
1140
  this.#$img = shadowRoot.querySelector("#image");
1115
1141
  }
1116
1142
  connectedCallback() {
@@ -1146,15 +1172,15 @@ class Emoji extends NectaryElement {
1146
1172
  }
1147
1173
  }
1148
1174
  defineCustomElement("sinch-emoji", Emoji);
1149
- const templateHTML$1b = '<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>';
1150
- const template$1b = document.createElement("template");
1151
- template$1b.innerHTML = templateHTML$1b;
1175
+ const templateHTML$1d = '<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>';
1176
+ const template$1d = document.createElement("template");
1177
+ template$1d.innerHTML = templateHTML$1d;
1152
1178
  class CodeTag extends NectaryElement {
1153
1179
  #$text;
1154
1180
  constructor() {
1155
1181
  super();
1156
1182
  const shadowRoot = this.attachShadow();
1157
- shadowRoot.appendChild(template$1b.content.cloneNode(true));
1183
+ shadowRoot.appendChild(template$1d.content.cloneNode(true));
1158
1184
  this.#$text = shadowRoot.querySelector("#content");
1159
1185
  }
1160
1186
  static get observedAttributes() {
@@ -1176,9 +1202,9 @@ class CodeTag extends NectaryElement {
1176
1202
  }
1177
1203
  }
1178
1204
  defineCustomElement("sinch-code-tag", CodeTag);
1179
- const templateHTML$1a = '<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)}button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;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}button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}</style><a referrerpolicy="no-referer"><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><button type="button"><span id="button-content"></span></button>';
1180
- const template$1a = document.createElement("template");
1181
- template$1a.innerHTML = templateHTML$1a;
1205
+ const templateHTML$1c = '<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)}button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;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}button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}</style><a referrerpolicy="no-referer"><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><button type="button"><span id="button-content"></span></button>';
1206
+ const template$1c = document.createElement("template");
1207
+ template$1c.innerHTML = templateHTML$1c;
1182
1208
  class Link extends NectaryElement {
1183
1209
  #$anchor;
1184
1210
  #$text;
@@ -1187,7 +1213,7 @@ class Link extends NectaryElement {
1187
1213
  constructor() {
1188
1214
  super();
1189
1215
  const shadowRoot = this.attachShadow();
1190
- shadowRoot.appendChild(template$1a.content.cloneNode(true));
1216
+ shadowRoot.appendChild(template$1c.content.cloneNode(true));
1191
1217
  this.#$anchor = shadowRoot.querySelector("a");
1192
1218
  this.#$text = shadowRoot.querySelector("#content");
1193
1219
  this.#$button = shadowRoot.querySelector("button");
@@ -1382,9 +1408,9 @@ const getTagColorBg = (id) => {
1382
1408
  const getTagColorFg = (id) => {
1383
1409
  return `var(--sinch-comp-tag-color-${id}-foreground)`;
1384
1410
  };
1385
- const templateHTML$19 = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#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(:not([icon])) #icon-start{display:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([readonly]) #button{padding-right:9px}#icon-close{cursor:pointer}:host([readonly]) #icon-close{display:none}</style><div id="button"><sinch-icon icons-version="2" id="icon-start"></sinch-icon><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon></div>';
1386
- const template$19 = document.createElement("template");
1387
- template$19.innerHTML = templateHTML$19;
1411
+ const templateHTML$1b = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#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(:not([icon])) #icon-start{display:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([readonly]) #button{padding-right:9px}#icon-close{cursor:pointer}:host([readonly]) #icon-close{display:none}</style><div id="button"><sinch-icon icons-version="2" id="icon-start"></sinch-icon><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon></div>';
1412
+ const template$1b = document.createElement("template");
1413
+ template$1b.innerHTML = templateHTML$1b;
1388
1414
  class RichTextareaChip extends NectaryElement {
1389
1415
  #$text;
1390
1416
  #$button;
@@ -1394,7 +1420,7 @@ class RichTextareaChip extends NectaryElement {
1394
1420
  constructor() {
1395
1421
  super();
1396
1422
  const shadowRoot = this.attachShadow();
1397
- shadowRoot.appendChild(template$19.content.cloneNode(true));
1423
+ shadowRoot.appendChild(template$1b.content.cloneNode(true));
1398
1424
  this.#$text = shadowRoot.querySelector("#text");
1399
1425
  this.#$button = shadowRoot.querySelector("#button");
1400
1426
  this.#$iconStart = shadowRoot.querySelector("#icon-start");
@@ -1818,9 +1844,9 @@ const createParseVisitor$1 = (doc) => {
1818
1844
  }
1819
1845
  };
1820
1846
  };
1821
- const templateHTML$18 = '<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>';
1822
- const template$18 = document.createElement("template");
1823
- template$18.innerHTML = templateHTML$18;
1847
+ const templateHTML$1a = '<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>';
1848
+ const template$1a = document.createElement("template");
1849
+ template$1a.innerHTML = templateHTML$1a;
1824
1850
  class RichText extends NectaryElement {
1825
1851
  #wrapper;
1826
1852
  #parseVisitor;
@@ -1840,7 +1866,7 @@ class RichText extends NectaryElement {
1840
1866
  Object.defineProperty(shadowRoot, "createDocumentFragment", {
1841
1867
  value: document.createDocumentFragment.bind(shadowRoot.ownerDocument)
1842
1868
  });
1843
- shadowRoot.appendChild(template$18.content.cloneNode(true));
1869
+ shadowRoot.appendChild(template$1a.content.cloneNode(true));
1844
1870
  this.#wrapper = shadowRoot.querySelector("#wrapper");
1845
1871
  this.#parseVisitor = createParseVisitor$1(shadowRoot);
1846
1872
  }
@@ -1944,15 +1970,15 @@ class RichText extends NectaryElement {
1944
1970
  }
1945
1971
  defineCustomElement("sinch-rich-text", RichText);
1946
1972
  const typeValues$5 = ["info", "warn", "error"];
1947
- const templateHTML$17 = '<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>';
1948
- const template$17 = document.createElement("template");
1949
- template$17.innerHTML = templateHTML$17;
1973
+ const templateHTML$19 = '<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>';
1974
+ const template$19 = document.createElement("template");
1975
+ template$19.innerHTML = templateHTML$19;
1950
1976
  class Alert extends NectaryElement {
1951
1977
  #$text;
1952
1978
  constructor() {
1953
1979
  super();
1954
1980
  const shadowRoot = this.attachShadow();
1955
- shadowRoot.appendChild(template$17.content.cloneNode(true));
1981
+ shadowRoot.appendChild(template$19.content.cloneNode(true));
1956
1982
  this.#$text = shadowRoot.querySelector("#text");
1957
1983
  }
1958
1984
  connectedCallback() {
@@ -1997,9 +2023,9 @@ const getAvatarColorBg = (id) => {
1997
2023
  const getAvatarColorFg = (id) => {
1998
2024
  return `var(--sinch-comp-avatar-container-color-${id}-foreground)`;
1999
2025
  };
2000
- const templateHTML$16 = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);outline:var(--sinch-comp-avatar-container-size-border,1px) solid var(--sinch-comp-avatar-container-color-border,transparent);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:var(--sinch-comp-avatar-shape-radius);-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>';
2001
- const template$16 = document.createElement("template");
2002
- template$16.innerHTML = templateHTML$16;
2026
+ const templateHTML$18 = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);outline:var(--sinch-comp-avatar-container-size-border,1px) solid var(--sinch-comp-avatar-container-color-border,transparent);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:var(--sinch-comp-avatar-shape-radius);-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>';
2027
+ const template$18 = document.createElement("template");
2028
+ template$18.innerHTML = templateHTML$18;
2003
2029
  class Avatar extends NectaryElement {
2004
2030
  #$circle;
2005
2031
  #$text;
@@ -2007,7 +2033,7 @@ class Avatar extends NectaryElement {
2007
2033
  constructor() {
2008
2034
  super();
2009
2035
  const shadowRoot = this.attachShadow();
2010
- shadowRoot.appendChild(template$16.content.cloneNode(true));
2036
+ shadowRoot.appendChild(template$18.content.cloneNode(true));
2011
2037
  this.#$circle = shadowRoot.querySelector("#circle");
2012
2038
  this.#$text = shadowRoot.querySelector("#text");
2013
2039
  this.#$image = shadowRoot.querySelector("#image");
@@ -2131,9 +2157,9 @@ const rectOverlap = (targetRect, contentRect) => {
2131
2157
  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;
2132
2158
  };
2133
2159
  const modeValues = ["square", "circle"];
2134
- const templateHTML$15 = '<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>';
2135
- const template$15 = document.createElement("template");
2136
- template$15.innerHTML = templateHTML$15;
2160
+ const templateHTML$17 = '<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>';
2161
+ const template$17 = document.createElement("template");
2162
+ template$17.innerHTML = templateHTML$17;
2137
2163
  class Badge extends NectaryElement {
2138
2164
  #$badgeWrapper;
2139
2165
  #$badge;
@@ -2142,7 +2168,7 @@ class Badge extends NectaryElement {
2142
2168
  constructor() {
2143
2169
  super();
2144
2170
  const shadowRoot = this.attachShadow();
2145
- shadowRoot.appendChild(template$15.content.cloneNode(true));
2171
+ shadowRoot.appendChild(template$17.content.cloneNode(true));
2146
2172
  this.#$badgeWrapper = shadowRoot.querySelector("#badge-wrapper");
2147
2173
  this.#$badge = shadowRoot.querySelector("#badge");
2148
2174
  this.#$text = shadowRoot.querySelector("#text");
@@ -2239,16 +2265,16 @@ class Badge extends NectaryElement {
2239
2265
  };
2240
2266
  }
2241
2267
  defineCustomElement("sinch-badge", Badge);
2242
- const templateHTML$14 = '<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>';
2243
- const template$14 = document.createElement("template");
2244
- template$14.innerHTML = templateHTML$14;
2268
+ const templateHTML$16 = '<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>';
2269
+ const template$16 = document.createElement("template");
2270
+ template$16.innerHTML = templateHTML$16;
2245
2271
  class ButtonGroupItem extends NectaryElement {
2246
2272
  #$sinchButton;
2247
2273
  #controller = null;
2248
2274
  constructor() {
2249
2275
  super();
2250
2276
  const shadowRoot = this.attachShadow();
2251
- shadowRoot.appendChild(template$14.content.cloneNode(true));
2277
+ shadowRoot.appendChild(template$16.content.cloneNode(true));
2252
2278
  this.#$sinchButton = shadowRoot.querySelector("#sinch-button-element");
2253
2279
  }
2254
2280
  static get observedAttributes() {
@@ -2324,15 +2350,15 @@ const formTypeValues = [
2324
2350
  "reset",
2325
2351
  "button"
2326
2352
  ];
2327
- const templateHTML$13 = '<style>:host{display:block}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%}</style><div id="wrapper"><slot></slot></div>';
2328
- const template$13 = document.createElement("template");
2329
- template$13.innerHTML = templateHTML$13;
2353
+ const templateHTML$15 = '<style>:host{display:block}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%}</style><div id="wrapper"><slot></slot></div>';
2354
+ const template$15 = document.createElement("template");
2355
+ template$15.innerHTML = templateHTML$15;
2330
2356
  class ButtonGroup extends NectaryElement {
2331
2357
  #$slot;
2332
2358
  constructor() {
2333
2359
  super();
2334
2360
  const shadowRoot = this.attachShadow();
2335
- shadowRoot.appendChild(template$13.content.cloneNode(true));
2361
+ shadowRoot.appendChild(template$15.content.cloneNode(true));
2336
2362
  this.#$slot = shadowRoot.querySelector("slot");
2337
2363
  }
2338
2364
  static get observedAttributes() {
@@ -2405,9 +2431,9 @@ const CSVToFormData = (name, csv) => {
2405
2431
  });
2406
2432
  return formData;
2407
2433
  };
2408
- const templateHTML$12 = '<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:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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-local-padding:var(--sinch-comp-button-spacing-padding-l, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-l, 12px);--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-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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-local-padding:var(--sinch-comp-button-spacing-padding-s, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-s, 12px);--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:var(--sinch-comp-button-spacing-padding-xs, 8px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-xs, 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:var(--sinch-comp-button-spacing-icon-only-padding-m, 8px)}:host([data-size="l"]:is([text=""],:not([text])))>#button{--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-l, 8px)}:host([data-size="s"]:is([text=""],:not([text])))>#button{--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-s, 4px)}:host([data-size=xs]:is([text=""],:not([text])))>#button{--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-xs, 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-toggled-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-toggled-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-toggled-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-toggled-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:var(--sinch-local-gap);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>';
2409
- const template$12 = document.createElement("template");
2410
- template$12.innerHTML = templateHTML$12;
2434
+ const templateHTML$14 = '<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:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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-local-padding:var(--sinch-comp-button-spacing-padding-l, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-l, 12px);--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-local-padding:var(--sinch-comp-button-spacing-padding-m, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-m, 12px);--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-local-padding:var(--sinch-comp-button-spacing-padding-s, 16px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-s, 12px);--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:var(--sinch-comp-button-spacing-padding-xs, 8px);--sinch-local-gap:var(--sinch-comp-button-spacing-gap-xs, 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:var(--sinch-comp-button-spacing-icon-only-padding-m, 8px)}:host([data-size="l"]:is([text=""],:not([text])))>#button{--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-l, 8px)}:host([data-size="s"]:is([text=""],:not([text])))>#button{--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-s, 4px)}:host([data-size=xs]:is([text=""],:not([text])))>#button{--sinch-local-padding:var(--sinch-comp-button-spacing-icon-only-padding-xs, 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-toggled-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-toggled-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-toggled-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-toggled-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:var(--sinch-local-gap);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>';
2435
+ const template$14 = document.createElement("template");
2436
+ template$14.innerHTML = templateHTML$14;
2411
2437
  class Button extends NectaryElement {
2412
2438
  #$button;
2413
2439
  #$text;
@@ -2418,7 +2444,7 @@ class Button extends NectaryElement {
2418
2444
  constructor() {
2419
2445
  super();
2420
2446
  const shadowRoot = this.attachShadow();
2421
- shadowRoot.appendChild(template$12.content.cloneNode(true));
2447
+ shadowRoot.appendChild(template$14.content.cloneNode(true));
2422
2448
  this.#internals = this.attachInternals();
2423
2449
  this.#$button = shadowRoot.querySelector("#button");
2424
2450
  this.#$text = shadowRoot.querySelector("#text");
@@ -2648,26 +2674,26 @@ class Button extends NectaryElement {
2648
2674
  };
2649
2675
  }
2650
2676
  defineCustomElement("sinch-button", Button);
2651
- const templateHTML$11 = '<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>';
2652
- const template$11 = document.createElement("template");
2653
- template$11.innerHTML = templateHTML$11;
2677
+ const templateHTML$13 = '<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>';
2678
+ const template$13 = document.createElement("template");
2679
+ template$13.innerHTML = templateHTML$13;
2654
2680
  class CardContainer extends NectaryElement {
2655
2681
  constructor() {
2656
2682
  super();
2657
2683
  const shadowRoot = this.attachShadow();
2658
- shadowRoot.appendChild(template$11.content.cloneNode(true));
2684
+ shadowRoot.appendChild(template$13.content.cloneNode(true));
2659
2685
  }
2660
2686
  }
2661
2687
  defineCustomElement("sinch-card-container", CardContainer);
2662
- const templateHTML$10 = '<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>';
2663
- const template$10 = document.createElement("template");
2664
- template$10.innerHTML = templateHTML$10;
2688
+ const templateHTML$12 = '<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>';
2689
+ const template$12 = document.createElement("template");
2690
+ template$12.innerHTML = templateHTML$12;
2665
2691
  class CardV2Title extends NectaryElement {
2666
2692
  #$text;
2667
2693
  constructor() {
2668
2694
  super();
2669
2695
  const shadowRoot = this.attachShadow();
2670
- shadowRoot.appendChild(template$10.content.cloneNode(true));
2696
+ shadowRoot.appendChild(template$12.content.cloneNode(true));
2671
2697
  this.#$text = shadowRoot.querySelector("#title-text");
2672
2698
  }
2673
2699
  connectedCallback() {
@@ -2712,9 +2738,9 @@ class CardV2Title extends NectaryElement {
2712
2738
  }
2713
2739
  }
2714
2740
  defineCustomElement("sinch-card-v2-title", CardV2Title);
2715
- const templateHTML$$ = '<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: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>';
2716
- const template$$ = document.createElement("template");
2717
- template$$.innerHTML = templateHTML$$;
2741
+ const templateHTML$11 = '<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: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>';
2742
+ const template$11 = document.createElement("template");
2743
+ template$11.innerHTML = templateHTML$11;
2718
2744
  const CLICK_EVENTS = ["click", "-click"];
2719
2745
  class CardV2 extends NectaryElement {
2720
2746
  #$slots;
@@ -2723,7 +2749,7 @@ class CardV2 extends NectaryElement {
2723
2749
  constructor() {
2724
2750
  super();
2725
2751
  const shadowRoot = this.attachShadow();
2726
- shadowRoot.appendChild(template$$.content.cloneNode(true));
2752
+ shadowRoot.appendChild(template$11.content.cloneNode(true));
2727
2753
  this.#$slots = shadowRoot.querySelectorAll("slot");
2728
2754
  }
2729
2755
  connectedCallback() {
@@ -2848,9 +2874,9 @@ class CardV2 extends NectaryElement {
2848
2874
  }
2849
2875
  }
2850
2876
  defineCustomElement("sinch-card-v2", CardV2);
2851
- const templateHTML$_ = '<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>';
2852
- const template$_ = document.createElement("template");
2853
- template$_.innerHTML = templateHTML$_;
2877
+ const templateHTML$10 = '<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>';
2878
+ const template$10 = document.createElement("template");
2879
+ template$10.innerHTML = templateHTML$10;
2854
2880
  class Checkbox extends NectaryElement {
2855
2881
  #$label;
2856
2882
  #controller = null;
@@ -2859,7 +2885,7 @@ class Checkbox extends NectaryElement {
2859
2885
  constructor() {
2860
2886
  super();
2861
2887
  const shadowRoot = this.attachShadow();
2862
- shadowRoot.appendChild(template$_.content.cloneNode(true));
2888
+ shadowRoot.appendChild(template$10.content.cloneNode(true));
2863
2889
  this.#internals = this.attachInternals();
2864
2890
  this.#$label = shadowRoot.querySelector("#label");
2865
2891
  }
@@ -3031,9 +3057,9 @@ const getChipColorBg = (id) => {
3031
3057
  const getChipColorFg = (id) => {
3032
3058
  return `var(--sinch-comp-chip-color-${id}-default-foreground-initial)`;
3033
3059
  };
3034
- const templateHTML$Z = '<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:1px solid var(--sinch-comp-chip-border);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>';
3035
- const template$Z = document.createElement("template");
3036
- template$Z.innerHTML = templateHTML$Z;
3060
+ const templateHTML$$ = '<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:1px solid var(--sinch-comp-chip-border);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>';
3061
+ const template$$ = document.createElement("template");
3062
+ template$$.innerHTML = templateHTML$$;
3037
3063
  class Chip extends NectaryElement {
3038
3064
  #$text;
3039
3065
  #$button;
@@ -3041,7 +3067,7 @@ class Chip extends NectaryElement {
3041
3067
  constructor() {
3042
3068
  super();
3043
3069
  const shadowRoot = this.attachShadow();
3044
- shadowRoot.appendChild(template$Z.content.cloneNode(true));
3070
+ shadowRoot.appendChild(template$$.content.cloneNode(true));
3045
3071
  this.#$button = shadowRoot.querySelector("#button");
3046
3072
  this.#$text = shadowRoot.querySelector("#text");
3047
3073
  }
@@ -3201,15 +3227,15 @@ const getSwatchColorBg = (id) => {
3201
3227
  const getSwatchColorFg = (id) => {
3202
3228
  return `var(--sinch-comp-color-swatch-color-${id}-foreground)`;
3203
3229
  };
3204
- const templateHTML$Y = '<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>';
3205
- const template$Y = document.createElement("template");
3206
- template$Y.innerHTML = templateHTML$Y;
3230
+ const templateHTML$_ = '<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>';
3231
+ const template$_ = document.createElement("template");
3232
+ template$_.innerHTML = templateHTML$_;
3207
3233
  class ColorSwatch extends NectaryElement {
3208
3234
  #$wrapper;
3209
3235
  constructor() {
3210
3236
  super();
3211
3237
  const shadowRoot = this.attachShadow();
3212
- shadowRoot.appendChild(template$Y.content.cloneNode(true));
3238
+ shadowRoot.appendChild(template$_.content.cloneNode(true));
3213
3239
  this.#$wrapper = shadowRoot.querySelector("#wrapper");
3214
3240
  }
3215
3241
  connectedCallback() {
@@ -3431,9 +3457,9 @@ const enableOverscroll = () => {
3431
3457
  document.documentElement.style.removeProperty("overscroll-behavior");
3432
3458
  }
3433
3459
  };
3434
- const templateHTML$X = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;transform:translate(var(--sinch-pop-offset-x),var(--sinch-pop-offset-y));margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:var(--sinch-comp-pop-z-index,1);background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:var(--sinch-comp-pop-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>';
3435
- const template$X = document.createElement("template");
3436
- template$X.innerHTML = templateHTML$X;
3460
+ const templateHTML$Z = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;transform:translate(var(--sinch-pop-offset-x),var(--sinch-pop-offset-y));margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:var(--sinch-comp-pop-z-index,1);background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:var(--sinch-comp-pop-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>';
3461
+ const template$Z = document.createElement("template");
3462
+ template$Z.innerHTML = templateHTML$Z;
3437
3463
  class Pop extends NectaryElement {
3438
3464
  #$targetWrapper;
3439
3465
  #$focus;
@@ -3461,7 +3487,7 @@ class Pop extends NectaryElement {
3461
3487
  constructor() {
3462
3488
  super();
3463
3489
  const shadowRoot = this.attachShadow();
3464
- shadowRoot.appendChild(template$X.content.cloneNode(true));
3490
+ shadowRoot.appendChild(template$Z.content.cloneNode(true));
3465
3491
  this.#$targetWrapper = shadowRoot.querySelector("#target");
3466
3492
  this.#$focus = shadowRoot.querySelector("#focus");
3467
3493
  this.#$dialog = shadowRoot.querySelector("#dialog");
@@ -4068,7 +4094,7 @@ const getPopOrientation$1 = (orientation) => {
4068
4094
  }
4069
4095
  return orientation;
4070
4096
  };
4071
- const templateHTML$W = '<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>';
4097
+ const templateHTML$Y = '<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>';
4072
4098
  const TIP_SIZE$1 = 8;
4073
4099
  const SHOW_DELAY_SLOW = 1e3;
4074
4100
  const SHOW_DELAY_FAST = 250;
@@ -4083,8 +4109,8 @@ let activeTooltip = null;
4083
4109
  let focusedTooltip = null;
4084
4110
  let hoveredTooltip = null;
4085
4111
  let suspendedFocusedTooltip = null;
4086
- const template$W = document.createElement("template");
4087
- template$W.innerHTML = templateHTML$W;
4112
+ const template$Y = document.createElement("template");
4113
+ template$Y.innerHTML = templateHTML$Y;
4088
4114
  class Tooltip extends NectaryElement {
4089
4115
  #$pop;
4090
4116
  #$tooltipText;
@@ -4110,7 +4136,7 @@ class Tooltip extends NectaryElement {
4110
4136
  constructor() {
4111
4137
  super();
4112
4138
  const shadowRoot = this.attachShadow();
4113
- shadowRoot.appendChild(template$W.content.cloneNode(true));
4139
+ shadowRoot.appendChild(template$Y.content.cloneNode(true));
4114
4140
  this.#$pop = shadowRoot.querySelector("#pop");
4115
4141
  this.#$tooltipText = shadowRoot.querySelector("#text");
4116
4142
  this.#$content = shadowRoot.querySelector("#content");
@@ -4850,9 +4876,9 @@ class Tooltip extends NectaryElement {
4850
4876
  };
4851
4877
  }
4852
4878
  defineCustomElement("sinch-tooltip", Tooltip);
4853
- const templateHTML$V = '<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>';
4854
- const template$V = document.createElement("template");
4855
- template$V.innerHTML = templateHTML$V;
4879
+ const templateHTML$X = '<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>';
4880
+ const template$X = document.createElement("template");
4881
+ template$X.innerHTML = templateHTML$X;
4856
4882
  class ColorMenuOption extends NectaryElement {
4857
4883
  #$wrapper;
4858
4884
  #$tooltip;
@@ -4860,7 +4886,7 @@ class ColorMenuOption extends NectaryElement {
4860
4886
  constructor() {
4861
4887
  super();
4862
4888
  const shadowRoot = this.attachShadow();
4863
- shadowRoot.appendChild(template$V.content.cloneNode(true));
4889
+ shadowRoot.appendChild(template$X.content.cloneNode(true));
4864
4890
  this.#$wrapper = shadowRoot.querySelector("#wrapper");
4865
4891
  this.#$tooltip = shadowRoot.querySelector("#tooltip");
4866
4892
  this.#$swatch = shadowRoot.querySelector("#swatch");
@@ -4906,12 +4932,12 @@ class ColorMenuOption extends NectaryElement {
4906
4932
  }
4907
4933
  }
4908
4934
  defineCustomElement("sinch-color-menu-option", ColorMenuOption);
4909
- const templateHTML$U = '<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>';
4935
+ const templateHTML$W = '<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>';
4910
4936
  const NUM_COLS_DEFAULT = 5;
4911
4937
  const ITEM_WIDTH = 44;
4912
4938
  const ITEM_HEIGHT$1 = 56;
4913
- const template$U = document.createElement("template");
4914
- template$U.innerHTML = templateHTML$U;
4939
+ const template$W = document.createElement("template");
4940
+ template$W.innerHTML = templateHTML$W;
4915
4941
  class ColorMenu extends NectaryElement {
4916
4942
  #$listbox;
4917
4943
  #$optionsSlot;
@@ -4919,7 +4945,7 @@ class ColorMenu extends NectaryElement {
4919
4945
  constructor() {
4920
4946
  super();
4921
4947
  const shadowRoot = this.attachShadow();
4922
- shadowRoot.appendChild(template$U.content.cloneNode(true));
4948
+ shadowRoot.appendChild(template$W.content.cloneNode(true));
4923
4949
  this.#$listbox = shadowRoot.querySelector("#listbox");
4924
4950
  this.#$optionsSlot = shadowRoot.querySelector("#options");
4925
4951
  }
@@ -5391,9 +5417,9 @@ const isDateOnScreen = (uiDate, date) => {
5391
5417
  const lastDateOfMonth = new Date(Date.UTC(uiDate.getUTCFullYear(), uiDate.getUTCMonth() + 1, 0));
5392
5418
  return isDateBetween(date, firstDateOfMonth, lastDateOfMonth);
5393
5419
  };
5394
- const templateHTML$T = '<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>';
5395
- const template$T = document.createElement("template");
5396
- template$T.innerHTML = templateHTML$T;
5420
+ const templateHTML$V = '<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>';
5421
+ const template$V = document.createElement("template");
5422
+ template$V.innerHTML = templateHTML$V;
5397
5423
  class DatePicker extends NectaryElement {
5398
5424
  #$month;
5399
5425
  #$weeks;
@@ -5417,7 +5443,7 @@ class DatePicker extends NectaryElement {
5417
5443
  constructor() {
5418
5444
  super();
5419
5445
  const shadowRoot = this.attachShadow({ delegatesFocus: true });
5420
- shadowRoot.appendChild(template$T.content.cloneNode(true));
5446
+ shadowRoot.appendChild(template$V.content.cloneNode(true));
5421
5447
  this.#internals = this.attachInternals();
5422
5448
  this.#$prevMonth = shadowRoot.querySelector("#prev-month");
5423
5449
  this.#$nextMonth = shadowRoot.querySelector("#next-month");
@@ -5841,9 +5867,9 @@ const enableScroll = () => {
5841
5867
  bodyEl.style.removeProperty("padding-right");
5842
5868
  }
5843
5869
  };
5844
- const templateHTML$S = '<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}:host([hide-close-button]) #close{display:none}</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>';
5845
- const template$S = document.createElement("template");
5846
- template$S.innerHTML = templateHTML$S;
5870
+ const templateHTML$U = '<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}:host([hide-close-button]) #close{display:none}</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>';
5871
+ const template$U = document.createElement("template");
5872
+ template$U.innerHTML = templateHTML$U;
5847
5873
  class Dialog extends NectaryElement {
5848
5874
  #$dialog;
5849
5875
  #$closeButton;
@@ -5854,7 +5880,7 @@ class Dialog extends NectaryElement {
5854
5880
  constructor() {
5855
5881
  super();
5856
5882
  const shadowRoot = this.attachShadow();
5857
- shadowRoot.appendChild(template$S.content.cloneNode(true));
5883
+ shadowRoot.appendChild(template$U.content.cloneNode(true));
5858
5884
  this.#$dialog = shadowRoot.querySelector("#dialog");
5859
5885
  this.#$closeButton = shadowRoot.querySelector("#close");
5860
5886
  this.#$caption = shadowRoot.querySelector("#caption");
@@ -6354,9 +6380,9 @@ const getMergedValueSliced = (inputValue, maskSymbols, selectionStart, selection
6354
6380
  }
6355
6381
  return chars.slice(selectionStart, selectionEnd).join("");
6356
6382
  };
6357
- const templateHTML$R = '<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-local-padding:var(--sinch-comp-input-spacing-padding-m, 12px);--sinch-local-icon-gap:var(--sinch-comp-input-spacing-icon-gap-m, 8px);--sinch-local-slot-gap:var(--sinch-comp-input-spacing-slot-gap-m, 4px);--sinch-local-slot-padding:var(--sinch-comp-input-spacing-slot-padding-m, 4px);--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-local-padding:var(--sinch-comp-input-spacing-padding-l, 12px);--sinch-local-icon-gap:var(--sinch-comp-input-spacing-icon-gap-l, 8px);--sinch-local-slot-gap:var(--sinch-comp-input-spacing-slot-gap-l, 4px);--sinch-local-slot-padding:var(--sinch-comp-input-spacing-slot-padding-l, 4px);--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-local-padding:var(--sinch-comp-input-spacing-padding-m, 12px);--sinch-local-icon-gap:var(--sinch-comp-input-spacing-icon-gap-m, 8px);--sinch-local-slot-gap:var(--sinch-comp-input-spacing-slot-gap-m, 4px);--sinch-local-slot-padding:var(--sinch-comp-input-spacing-slot-padding-m, 4px);--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-local-padding:var(--sinch-comp-input-spacing-padding-s, 12px);--sinch-local-icon-gap:var(--sinch-comp-input-spacing-icon-gap-s, 8px);--sinch-local-slot-gap:var(--sinch-comp-input-spacing-slot-gap-s, 4px);--sinch-local-slot-padding:var(--sinch-comp-input-spacing-slot-padding-s, 4px);--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 var(--sinch-local-padding);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 var(--sinch-local-padding);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){letter-spacing:.1em}:host(:not([enforce-consistent-font-size])) #input[type=password]:not(:placeholder-shown){font-size:1.5em}:host([enforce-consistent-font-size]) #input[type=password]:not(:placeholder-shown){font-size:inherit}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:var(--sinch-local-padding);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:var(--sinch-local-padding)}#icon-wrapper:not(.empty)~#input-wrapper>#input,#icon-wrapper:not(.empty)~#input-wrapper>#input-mask{padding-left:calc(var(--sinch-local-padding) + var(--sinch-global-size-icon) + var(--sinch-local-icon-gap))}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:var(--sinch-local-slot-gap);padding-right:var(--sinch-local-slot-padding)}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:var(--sinch-local-slot-gap);padding-left:var(--sinch-local-slot-padding)}#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>';
6358
- const template$R = document.createElement("template");
6359
- template$R.innerHTML = templateHTML$R;
6383
+ const templateHTML$T = '<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-local-padding:var(--sinch-comp-input-spacing-padding-m, 12px);--sinch-local-icon-gap:var(--sinch-comp-input-spacing-icon-gap-m, 8px);--sinch-local-slot-gap:var(--sinch-comp-input-spacing-slot-gap-m, 4px);--sinch-local-slot-padding:var(--sinch-comp-input-spacing-slot-padding-m, 4px);--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-local-padding:var(--sinch-comp-input-spacing-padding-l, 12px);--sinch-local-icon-gap:var(--sinch-comp-input-spacing-icon-gap-l, 8px);--sinch-local-slot-gap:var(--sinch-comp-input-spacing-slot-gap-l, 4px);--sinch-local-slot-padding:var(--sinch-comp-input-spacing-slot-padding-l, 4px);--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-local-padding:var(--sinch-comp-input-spacing-padding-m, 12px);--sinch-local-icon-gap:var(--sinch-comp-input-spacing-icon-gap-m, 8px);--sinch-local-slot-gap:var(--sinch-comp-input-spacing-slot-gap-m, 4px);--sinch-local-slot-padding:var(--sinch-comp-input-spacing-slot-padding-m, 4px);--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-local-padding:var(--sinch-comp-input-spacing-padding-s, 12px);--sinch-local-icon-gap:var(--sinch-comp-input-spacing-icon-gap-s, 8px);--sinch-local-slot-gap:var(--sinch-comp-input-spacing-slot-gap-s, 4px);--sinch-local-slot-padding:var(--sinch-comp-input-spacing-slot-padding-s, 4px);--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 var(--sinch-local-padding);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 var(--sinch-local-padding);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){letter-spacing:.1em}:host(:not([enforce-consistent-font-size])) #input[type=password]:not(:placeholder-shown){font-size:1.5em}:host([enforce-consistent-font-size]) #input[type=password]:not(:placeholder-shown){font-size:inherit}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:var(--sinch-local-padding);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:var(--sinch-local-padding)}#icon-wrapper:not(.empty)~#input-wrapper>#input,#icon-wrapper:not(.empty)~#input-wrapper>#input-mask{padding-left:calc(var(--sinch-local-padding) + var(--sinch-global-size-icon) + var(--sinch-local-icon-gap))}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:var(--sinch-local-slot-gap);padding-right:var(--sinch-local-slot-padding)}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:var(--sinch-local-slot-gap);padding-left:var(--sinch-local-slot-padding)}#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>';
6384
+ const template$T = document.createElement("template");
6385
+ template$T.innerHTML = templateHTML$T;
6360
6386
  class Input extends NectaryElement {
6361
6387
  #$input;
6362
6388
  #$inputMask;
@@ -6385,7 +6411,7 @@ class Input extends NectaryElement {
6385
6411
  constructor() {
6386
6412
  super();
6387
6413
  const shadowRoot = this.attachShadow({ delegatesFocus: true });
6388
- shadowRoot.appendChild(template$R.content.cloneNode(true));
6414
+ shadowRoot.appendChild(template$T.content.cloneNode(true));
6389
6415
  this.#internals = this.attachInternals();
6390
6416
  this.#$input = shadowRoot.querySelector("#input");
6391
6417
  this.#$inputMask = shadowRoot.querySelector("#input-mask");
@@ -7170,10 +7196,10 @@ const getPopOrientation = (orientation) => {
7170
7196
  }
7171
7197
  return orientation;
7172
7198
  };
7173
- const templateHTML$Q = '<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=left]) #content-wrapper{padding-top:0;padding-right:4px}:host([orientation=right]) #content-wrapper{padding-top:0;padding-left:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}:host([orientation=left][tip]) #content-wrapper{padding-top:0;padding-right:12px}:host([orientation=right][tip]) #content-wrapper{padding-top:0;padding-left: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([orientation=left]) #tip{transform:translateX(-50%) rotate(-90deg);top:calc(50%);left:calc(100% - 13px)}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:calc(50%);left: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>';
7199
+ const templateHTML$S = '<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=left]) #content-wrapper{padding-top:0;padding-right:4px}:host([orientation=right]) #content-wrapper{padding-top:0;padding-left:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}:host([orientation=left][tip]) #content-wrapper{padding-top:0;padding-right:12px}:host([orientation=right][tip]) #content-wrapper{padding-top:0;padding-left: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([orientation=left]) #tip{transform:translateX(-50%) rotate(-90deg);top:calc(50%);left:calc(100% - 13px)}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:calc(50%);left: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>';
7174
7200
  const TIP_SIZE = 16;
7175
- const template$Q = document.createElement("template");
7176
- template$Q.innerHTML = templateHTML$Q;
7201
+ const template$S = document.createElement("template");
7202
+ template$S.innerHTML = templateHTML$S;
7177
7203
  class Popover extends NectaryElement {
7178
7204
  #$pop;
7179
7205
  #$content;
@@ -7185,7 +7211,7 @@ class Popover extends NectaryElement {
7185
7211
  constructor() {
7186
7212
  super();
7187
7213
  const shadowRoot = this.attachShadow();
7188
- shadowRoot.appendChild(template$Q.content.cloneNode(true));
7214
+ shadowRoot.appendChild(template$S.content.cloneNode(true));
7189
7215
  this.#$pop = shadowRoot.querySelector("#pop");
7190
7216
  this.#$content = shadowRoot.querySelector("#content");
7191
7217
  this.#$tip = shadowRoot.querySelector("#tip");
@@ -7442,9 +7468,9 @@ function createKeyboardNavigation() {
7442
7468
  }
7443
7469
  };
7444
7470
  }
7445
- const templateHTML$P = '<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>';
7446
- const template$P = document.createElement("template");
7447
- template$P.innerHTML = templateHTML$P;
7471
+ const templateHTML$R = '<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>';
7472
+ const template$R = document.createElement("template");
7473
+ template$R.innerHTML = templateHTML$R;
7448
7474
  class Tabs extends NectaryElement {
7449
7475
  #$slot;
7450
7476
  #controller = null;
@@ -7455,7 +7481,7 @@ class Tabs extends NectaryElement {
7455
7481
  constructor() {
7456
7482
  super();
7457
7483
  const shadowRoot = this.attachShadow();
7458
- shadowRoot.appendChild(template$P.content.cloneNode(true));
7484
+ shadowRoot.appendChild(template$R.content.cloneNode(true));
7459
7485
  this.#$slot = shadowRoot.querySelector("slot");
7460
7486
  }
7461
7487
  connectedCallback() {
@@ -7604,15 +7630,15 @@ class Tabs extends NectaryElement {
7604
7630
  };
7605
7631
  }
7606
7632
  defineCustomElement("sinch-tabs", Tabs);
7607
- const templateHTML$O = '<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)}:host([disabled]) #button{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)}:host(:hover:not([disabled])) #button{background-color:var(--sinch-comp-tab-color-default-background-hover)}:host(:focus-visible) #button::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}::slotted(*){display:block;pointer-events:none}</style><sinch-tooltip id="tooltip"><div id="button"><slot name="icon"></slot></div></sinch-tooltip>';
7608
- const template$O = document.createElement("template");
7609
- template$O.innerHTML = templateHTML$O;
7633
+ const templateHTML$Q = '<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)}:host([disabled]) #button{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)}:host(:hover:not([disabled])) #button{background-color:var(--sinch-comp-tab-color-default-background-hover)}:host(:focus-visible) #button::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}::slotted(*){display:block;pointer-events:none}</style><sinch-tooltip id="tooltip"><div id="button"><slot name="icon"></slot></div></sinch-tooltip>';
7634
+ const template$Q = document.createElement("template");
7635
+ template$Q.innerHTML = templateHTML$Q;
7610
7636
  class TabsIconOption extends NectaryElement {
7611
7637
  #$tooltip;
7612
7638
  constructor() {
7613
7639
  super();
7614
7640
  const shadowRoot = this.attachShadow();
7615
- shadowRoot.appendChild(template$O.content.cloneNode(true));
7641
+ shadowRoot.appendChild(template$Q.content.cloneNode(true));
7616
7642
  this.#$tooltip = shadowRoot.querySelector("#tooltip");
7617
7643
  }
7618
7644
  connectedCallback() {
@@ -7719,7 +7745,7 @@ const debounceTimeout = (ms) => createDebounce(
7719
7745
  globalThis.clearTimeout
7720
7746
  );
7721
7747
  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}]}]');
7722
- const templateHTML$N = '<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>';
7748
+ const templateHTML$P = '<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>';
7723
7749
  const groupLabels = [
7724
7750
  "Emotions",
7725
7751
  "People",
@@ -7731,10 +7757,10 @@ const groupLabels = [
7731
7757
  "Symbols and flags"
7732
7758
  ];
7733
7759
  const data = dataJson;
7734
- const template$N = document.createElement("template");
7760
+ const template$P = document.createElement("template");
7735
7761
  const MIN_SEARCH_LENGTH = 2;
7736
7762
  const SEARCH_DEBOUNCE_TIMEOUT = 300;
7737
- template$N.innerHTML = templateHTML$N;
7763
+ template$P.innerHTML = templateHTML$P;
7738
7764
  class EmojiPicker extends NectaryElement {
7739
7765
  #$tabs;
7740
7766
  #$searchInput;
@@ -7753,7 +7779,7 @@ class EmojiPicker extends NectaryElement {
7753
7779
  constructor() {
7754
7780
  super();
7755
7781
  const shadowRoot = this.attachShadow();
7756
- shadowRoot.appendChild(template$N.content.cloneNode(true));
7782
+ shadowRoot.appendChild(template$P.content.cloneNode(true));
7757
7783
  this.#$sh = shadowRoot;
7758
7784
  this.#$tabs = shadowRoot.querySelector("#tabs");
7759
7785
  this.#$searchInput = shadowRoot.querySelector("#search");
@@ -8028,9 +8054,9 @@ class EmojiPicker extends NectaryElement {
8028
8054
  }
8029
8055
  }
8030
8056
  defineCustomElement("sinch-emoji-picker", EmojiPicker);
8031
- const templateHTML$M = '<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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#optional:empty{display:none}#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><sinch-tooltip id="optional-tooltip" allow-scroll><span id="optional"></span></sinch-tooltip></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
8032
- const template$M = document.createElement("template");
8033
- template$M.innerHTML = templateHTML$M;
8057
+ const templateHTML$O = '<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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#optional:empty{display:none}#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><sinch-tooltip id="optional-tooltip" allow-scroll><span id="optional"></span></sinch-tooltip></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
8058
+ const template$O = document.createElement("template");
8059
+ template$O.innerHTML = templateHTML$O;
8034
8060
  class Field extends NectaryElement {
8035
8061
  topSection;
8036
8062
  #$label;
@@ -8045,7 +8071,7 @@ class Field extends NectaryElement {
8045
8071
  constructor() {
8046
8072
  super();
8047
8073
  const shadowRoot = this.attachShadow();
8048
- shadowRoot.appendChild(template$M.content.cloneNode(true));
8074
+ shadowRoot.appendChild(template$O.content.cloneNode(true));
8049
8075
  this.topSection = shadowRoot.querySelector("#top");
8050
8076
  this.#$label = shadowRoot.querySelector("#label");
8051
8077
  this.#$optionalText = shadowRoot.querySelector("#optional");
@@ -8167,9 +8193,9 @@ class Field extends NectaryElement {
8167
8193
  };
8168
8194
  }
8169
8195
  defineCustomElement("sinch-field", Field);
8170
- const templateHTML$L = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#top{display:flex;align-items:baseline;height:24px;margin-bottom:2px}#bottom{display:flex;flex-direction:column;align-items:baseline;width:100%}#top.empty{display:none}#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:left;line-height:20px;margin-top:2px;white-space:normal;overflow:visible;--sinch-comp-rich-text-font:var(--sinch-comp-field-font-additional);--sinch-global-color-text:var(--sinch-comp-field-color-default-additional-initial);--sinch-comp-link-color-default-text-initial:var(--sinch-comp-field-color-default-additional-initial);--sinch-comp-link-color-default-text-hover:var(--sinch-comp-field-color-default-additional-initial)}#additional:is([text=""],:not([text])){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;white-space:normal;overflow:visible;--sinch-comp-rich-text-font:var(--sinch-comp-field-font-invalid);--sinch-global-color-text:var(--sinch-comp-field-color-invalid-text-initial);--sinch-comp-link-color-default-text-initial:var(--sinch-comp-field-color-invalid-text-initial);--sinch-comp-link-color-default-text-hover:var(--sinch-comp-field-color-invalid-text-initial)}#invalid:is([text=""],:not([text])){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{--sinch-global-color-text:var(--sinch-comp-field-color-disabled-additional-initial);--sinch-comp-link-color-default-text-initial:var(--sinch-comp-field-color-disabled-additional-initial);--sinch-comp-link-color-default-text-hover: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"><sinch-rich-text id="additional"></sinch-rich-text><sinch-rich-text id="invalid"></sinch-rich-text></div></div>';
8171
- const template$L = document.createElement("template");
8172
- template$L.innerHTML = templateHTML$L;
8196
+ const templateHTML$N = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#top{display:flex;align-items:baseline;height:24px;margin-bottom:2px}#bottom{display:flex;flex-direction:column;align-items:baseline;width:100%}#top.empty{display:none}#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:left;line-height:20px;margin-top:2px;white-space:normal;overflow:visible;--sinch-comp-rich-text-font:var(--sinch-comp-field-font-additional);--sinch-global-color-text:var(--sinch-comp-field-color-default-additional-initial);--sinch-comp-link-color-default-text-initial:var(--sinch-comp-field-color-default-additional-initial);--sinch-comp-link-color-default-text-hover:var(--sinch-comp-field-color-default-additional-initial)}#additional:is([text=""],:not([text])){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;white-space:normal;overflow:visible;--sinch-comp-rich-text-font:var(--sinch-comp-field-font-invalid);--sinch-global-color-text:var(--sinch-comp-field-color-invalid-text-initial);--sinch-comp-link-color-default-text-initial:var(--sinch-comp-field-color-invalid-text-initial);--sinch-comp-link-color-default-text-hover:var(--sinch-comp-field-color-invalid-text-initial)}#invalid:is([text=""],:not([text])){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{--sinch-global-color-text:var(--sinch-comp-field-color-disabled-additional-initial);--sinch-comp-link-color-default-text-initial:var(--sinch-comp-field-color-disabled-additional-initial);--sinch-comp-link-color-default-text-hover: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"><sinch-rich-text id="additional"></sinch-rich-text><sinch-rich-text id="invalid"></sinch-rich-text></div></div>';
8197
+ const template$N = document.createElement("template");
8198
+ template$N.innerHTML = templateHTML$N;
8173
8199
  class FieldV2 extends NectaryElement {
8174
8200
  #topSection;
8175
8201
  #$label;
@@ -8183,7 +8209,7 @@ class FieldV2 extends NectaryElement {
8183
8209
  constructor() {
8184
8210
  super();
8185
8211
  const shadowRoot = this.attachShadow();
8186
- shadowRoot.appendChild(template$L.content.cloneNode(true));
8212
+ shadowRoot.appendChild(template$N.content.cloneNode(true));
8187
8213
  this.#topSection = shadowRoot.querySelector("#top");
8188
8214
  this.#$label = shadowRoot.querySelector("#label");
8189
8215
  this.#$optionalText = shadowRoot.querySelector("#optional");
@@ -8326,9 +8352,9 @@ const doFilesSatisfySize$1 = (files, size) => {
8326
8352
  return file.size <= size;
8327
8353
  });
8328
8354
  };
8329
- const templateHTML$K = "<style>:host{display:inline-block}::slotted(*){display:block}</style><slot></slot>";
8330
- const template$K = document.createElement("template");
8331
- template$K.innerHTML = templateHTML$K;
8355
+ const templateHTML$M = "<style>:host{display:inline-block}::slotted(*){display:block}</style><slot></slot>";
8356
+ const template$M = document.createElement("template");
8357
+ template$M.innerHTML = templateHTML$M;
8332
8358
  class FilePicker extends NectaryElement {
8333
8359
  #$input;
8334
8360
  #$targetSlot;
@@ -8336,7 +8362,7 @@ class FilePicker extends NectaryElement {
8336
8362
  constructor() {
8337
8363
  super();
8338
8364
  const shadowRoot = this.attachShadow();
8339
- shadowRoot.appendChild(template$K.content.cloneNode(true));
8365
+ shadowRoot.appendChild(template$M.content.cloneNode(true));
8340
8366
  this.#$input = document.createElement("input");
8341
8367
  this.#$input.type = "file";
8342
8368
  this.#$targetSlot = shadowRoot.querySelector("slot");
@@ -8478,9 +8504,9 @@ const doFilesSatisfySize = (files, size) => {
8478
8504
  return file.size <= size;
8479
8505
  });
8480
8506
  };
8481
- const templateHTML$J = '<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>';
8482
- const template$J = document.createElement("template");
8483
- template$J.innerHTML = templateHTML$J;
8507
+ const templateHTML$L = '<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>';
8508
+ const template$L = document.createElement("template");
8509
+ template$L.innerHTML = templateHTML$L;
8484
8510
  class FileDrop extends NectaryElement {
8485
8511
  #$filePicker;
8486
8512
  #$dropArea;
@@ -8489,7 +8515,7 @@ class FileDrop extends NectaryElement {
8489
8515
  constructor() {
8490
8516
  super();
8491
8517
  const shadowRoot = this.attachShadow();
8492
- shadowRoot.appendChild(template$J.content.cloneNode(true));
8518
+ shadowRoot.appendChild(template$L.content.cloneNode(true));
8493
8519
  this.#$dropArea = shadowRoot.querySelector("#wrapper");
8494
8520
  this.#$placeholder = shadowRoot.querySelector("#placeholder");
8495
8521
  this.#$filePicker = shadowRoot.querySelector("#file-picker");
@@ -8688,15 +8714,15 @@ class FileDrop extends NectaryElement {
8688
8714
  }
8689
8715
  }
8690
8716
  defineCustomElement("sinch-file-drop", FileDrop);
8691
- const templateHTML$I = '<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>';
8692
- const template$I = document.createElement("template");
8693
- template$I.innerHTML = templateHTML$I;
8717
+ const templateHTML$K = '<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>';
8718
+ const template$K = document.createElement("template");
8719
+ template$K.innerHTML = templateHTML$K;
8694
8720
  class Spinner extends NectaryElement {
8695
8721
  #controller = null;
8696
8722
  constructor() {
8697
8723
  super();
8698
8724
  const shadowRoot = this.attachShadow();
8699
- shadowRoot.appendChild(template$I.content.cloneNode(true));
8725
+ shadowRoot.appendChild(template$K.content.cloneNode(true));
8700
8726
  }
8701
8727
  connectedCallback() {
8702
8728
  this.#controller = new AbortController();
@@ -8743,9 +8769,9 @@ class Spinner extends NectaryElement {
8743
8769
  }
8744
8770
  defineCustomElement("sinch-spinner", Spinner);
8745
8771
  const typeValues$2 = ["pending", "loading", "progress", "success", "error"];
8746
- const templateHTML$H = '<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>';
8747
- const template$H = document.createElement("template");
8748
- template$H.innerHTML = templateHTML$H;
8772
+ const templateHTML$J = '<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>';
8773
+ const template$J = document.createElement("template");
8774
+ template$J.innerHTML = templateHTML$J;
8749
8775
  class FileStatus extends NectaryElement {
8750
8776
  #$filename;
8751
8777
  #$contentSlot;
@@ -8753,7 +8779,7 @@ class FileStatus extends NectaryElement {
8753
8779
  constructor() {
8754
8780
  super();
8755
8781
  const shadowRoot = this.attachShadow();
8756
- shadowRoot.appendChild(template$H.content.cloneNode(true));
8782
+ shadowRoot.appendChild(template$J.content.cloneNode(true));
8757
8783
  this.#$filename = shadowRoot.querySelector("#filename");
8758
8784
  this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
8759
8785
  }
@@ -8823,15 +8849,15 @@ const getFlagUrl = (root, code) => {
8823
8849
  }
8824
8850
  return flagUrl.replace("%s", code);
8825
8851
  };
8826
- const templateHTML$G = '<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">';
8827
- const template$G = document.createElement("template");
8828
- template$G.innerHTML = templateHTML$G;
8852
+ const templateHTML$I = '<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">';
8853
+ const template$I = document.createElement("template");
8854
+ template$I.innerHTML = templateHTML$I;
8829
8855
  class Flag extends NectaryElement {
8830
8856
  #$img;
8831
8857
  constructor() {
8832
8858
  super();
8833
8859
  const shadowRoot = this.attachShadow();
8834
- shadowRoot.appendChild(template$G.content.cloneNode(true));
8860
+ shadowRoot.appendChild(template$I.content.cloneNode(true));
8835
8861
  this.#$img = shadowRoot.querySelector("#image");
8836
8862
  }
8837
8863
  connectedCallback() {
@@ -8867,16 +8893,16 @@ class Flag extends NectaryElement {
8867
8893
  }
8868
8894
  }
8869
8895
  defineCustomElement("sinch-flag", Flag);
8870
- const templateHTML$F = '<style>:host{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;box-sizing:border-box;cursor:pointer}sinch-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-comp-button-color-subtle-secondary-default-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-disabled-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-default-background-initial:transparent;--sinch-comp-button-color-subtle-secondary-default-icon-initial:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-text-initial:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-background-hover:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-color-subtle-secondary-default-background-active:var(--sinch-comp-floating-panel-color-button-background-active);--sinch-comp-button-shadow-subtle-hover:none;--sinch-comp-button-shadow-subtle-active:none}sinch-button:focus-visible{--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-shadow-subtle-focus:none}:host(.edge-start:active) sinch-button,:host(.edge-start:focus) sinch-button,:host(.edge-start:hover) sinch-button{--sinch-button-shape-radius-top-left:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-floating-panel-shape-radius)}:host(.edge-end:active) sinch-button,:host(.edge-end:focus) sinch-button,:host(.edge-end:hover) sinch-button{--sinch-button-shape-radius-top-right:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-floating-panel-shape-radius)}sinch-icon{--sinch-global-color-icon:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-global-size-icon:var(--sinch-comp-floating-panel-size-button-icon)}</style><sinch-button id="button" type="subtle-secondary"><sinch-icon id="icon" icons-version="2" slot="icon"></sinch-icon></sinch-button>';
8871
- const template$F = document.createElement("template");
8872
- template$F.innerHTML = templateHTML$F;
8896
+ const templateHTML$H = '<style>:host{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;box-sizing:border-box;cursor:pointer}sinch-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-comp-button-color-subtle-secondary-default-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-disabled-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-default-background-initial:transparent;--sinch-comp-button-color-subtle-secondary-default-icon-initial:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-text-initial:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-background-hover:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-color-subtle-secondary-default-background-active:var(--sinch-comp-floating-panel-color-button-background-active);--sinch-comp-button-shadow-subtle-hover:none;--sinch-comp-button-shadow-subtle-active:none}sinch-button:focus-visible{--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-shadow-subtle-focus:none}:host(.edge-start:active) sinch-button,:host(.edge-start:focus) sinch-button,:host(.edge-start:hover) sinch-button{--sinch-button-shape-radius-top-left:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-floating-panel-shape-radius)}:host(.edge-end:active) sinch-button,:host(.edge-end:focus) sinch-button,:host(.edge-end:hover) sinch-button{--sinch-button-shape-radius-top-right:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-floating-panel-shape-radius)}sinch-icon{--sinch-global-color-icon:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-global-size-icon:var(--sinch-comp-floating-panel-size-button-icon)}</style><sinch-button id="button" type="subtle-secondary"><sinch-icon id="icon" icons-version="2" slot="icon"></sinch-icon></sinch-button>';
8897
+ const template$H = document.createElement("template");
8898
+ template$H.innerHTML = templateHTML$H;
8873
8899
  class FloatingPanelIconButton extends NectaryElement {
8874
8900
  #$icon;
8875
8901
  #$button;
8876
8902
  constructor() {
8877
8903
  super();
8878
8904
  const shadowRoot = this.attachShadow();
8879
- shadowRoot.appendChild(template$F.content.cloneNode(true));
8905
+ shadowRoot.appendChild(template$H.content.cloneNode(true));
8880
8906
  this.#$icon = shadowRoot.querySelector("#icon");
8881
8907
  this.#$button = shadowRoot.querySelector("#button");
8882
8908
  }
@@ -8910,15 +8936,15 @@ class FloatingPanelIconButton extends NectaryElement {
8910
8936
  }
8911
8937
  }
8912
8938
  defineCustomElement("sinch-floating-panel-icon-button", FloatingPanelIconButton);
8913
- const templateHTML$E = '<style>:host{display:flex;flex-shrink:0;height:100%;min-height:40px;color:var(--sinch-comp-floating-panel-color-text,var(--sinch-sys-color-primary-foreground))}sinch-button{height:100%;padding:0;white-space:nowrap;--sinch-button-shape-radius-base:0;--sinch-comp-button-color-subtle-secondary-default-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-disabled-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-spacing-padding-m:16px;--sinch-comp-button-color-subtle-secondary-default-text-initial:var(--sinch-comp-floating-panel-color-button-text-initial, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-initial, transparent);--sinch-comp-button-color-subtle-secondary-default-background-hover:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-color-subtle-secondary-default-background-active:var(--sinch-comp-floating-panel-color-button-background-active);--sinch-comp-button-shadow-subtle-hover:none;--sinch-comp-button-shadow-subtle-active:none}sinch-button:focus-visible{--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-shadow-subtle-focus:none}</style><sinch-button id="button" type="subtle-secondary"></sinch-button>';
8914
- const template$E = document.createElement("template");
8915
- template$E.innerHTML = templateHTML$E;
8939
+ const templateHTML$G = '<style>:host{display:flex;flex-shrink:0;height:100%;min-height:40px;color:var(--sinch-comp-floating-panel-color-text,var(--sinch-sys-color-primary-foreground))}sinch-button{height:100%;padding:0;white-space:nowrap;--sinch-button-shape-radius-base:0;--sinch-comp-button-color-subtle-secondary-default-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-disabled-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-spacing-padding-m:16px;--sinch-comp-button-color-subtle-secondary-default-text-initial:var(--sinch-comp-floating-panel-color-button-text-initial, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-initial, transparent);--sinch-comp-button-color-subtle-secondary-default-background-hover:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-color-subtle-secondary-default-background-active:var(--sinch-comp-floating-panel-color-button-background-active);--sinch-comp-button-shadow-subtle-hover:none;--sinch-comp-button-shadow-subtle-active:none}sinch-button:focus-visible{--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-shadow-subtle-focus:none}</style><sinch-button id="button" type="subtle-secondary"></sinch-button>';
8940
+ const template$G = document.createElement("template");
8941
+ template$G.innerHTML = templateHTML$G;
8916
8942
  class FloatingPanelButton extends NectaryElement {
8917
8943
  #$button;
8918
8944
  constructor() {
8919
8945
  super();
8920
8946
  const shadowRoot = this.attachShadow();
8921
- shadowRoot.appendChild(template$E.content.cloneNode(true));
8947
+ shadowRoot.appendChild(template$G.content.cloneNode(true));
8922
8948
  this.#$button = shadowRoot.querySelector("#button");
8923
8949
  }
8924
8950
  static get observedAttributes() {
@@ -8947,9 +8973,9 @@ class FloatingPanelButton extends NectaryElement {
8947
8973
  }
8948
8974
  }
8949
8975
  defineCustomElement("sinch-floating-panel-button", FloatingPanelButton);
8950
- const templateHTML$D = '<style>:host{display:block;max-width:100%;min-width:0}@keyframes panel-slide-in{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes panel-slide-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}dialog{display:flex;align-items:center;box-sizing:border-box;height:40px;padding:0;overflow:visible;width:fit-content;max-width:100%;min-width:0;background-color:var(--sinch-comp-floating-panel-color-background,var(--sinch-sys-color-primary-default));border:none;border-radius:var(--sinch-comp-floating-panel-shape-radius);box-shadow:var(--sinch-comp-floating-panel-shadow);color:var(--sinch-comp-floating-panel-color-text,var(--sinch-sys-color-primary-foreground))}dialog.closing,dialog.opening{overflow:hidden}dialog:not([open]){display:none}dialog.opening{animation:panel-slide-in .2s ease-out forwards}dialog.closing{animation:panel-slide-out .2s ease-in forwards}#items-selected{display:flex;align-items:baseline;gap:10px;padding:0 8px;white-space:nowrap}#cta{display:flex}#no-of-items-selected{font:var(--sinch-comp-floating-panel-font-bold)}#items-selected-label{font:var(--sinch-comp-floating-panel-font-regular)}#left-actions{display:flex;align-items:center}#divider{width:1px;align-self:stretch;background-color:var(--sinch-comp-floating-panel-color-divider)}#actions-end{display:flex;align-items:center;flex-shrink:1;min-width:0}#right-actions{display:flex;align-items:center}#right-actions-overflow{display:none;align-items:center;flex-shrink:0}:host([data-density=compact]) #right-actions,:host([data-density=extra-compact]) #right-actions{display:none}:host([data-density=compact]) #right-actions-overflow,:host([data-density=extra-compact]) #right-actions-overflow{display:flex}#actions-popover{display:block;--sinch-comp-pop-z-index:2147483000}#overflow-trigger{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#overflow-menu-surface{box-sizing:border-box;display:block;min-width:var(--sinch-comp-floating-panel-overflow-menu-min-width,220px);width:max-content;max-width:min(var(--sinch-comp-floating-panel-overflow-menu-max-width,288px),calc(100vw - 24px))}#overflow-menu-surface sinch-action-menu{display:block;width:100%}#right-actions sinch-floating-panel-icon-button:last-child:active,#right-actions sinch-floating-panel-icon-button:last-child:focus,#right-actions sinch-floating-panel-icon-button:last-child:hover{--sinch-button-shape-radius-top-right:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-floating-panel-shape-radius)}@media (prefers-reduced-motion){dialog.closing,dialog.opening{animation:none}}</style><dialog id="wrapper" role="toolbar" aria-label="Bulk actions"><div id="left-actions"><sinch-floating-panel-icon-button id="close-btn" icon="fa-xmark" aria-label="Close selection" class="edge-start"></sinch-floating-panel-icon-button></div><div id="divider" role="separator" aria-orientation="vertical"></div><div id="items-selected" aria-live="polite" aria-atomic="true"><span id="no-of-items-selected"></span> <span id="items-selected-label"></span></div><div id="cta"><sinch-floating-panel-button id="cta-btn" text=""></sinch-floating-panel-button></div><div id="actions-end"><div id="right-actions" role="group" aria-label="Actions"></div><div id="right-actions-overflow"><sinch-popover id="actions-popover" orientation="bottom-right" allow-scroll aria-label="More actions"><sinch-floating-panel-icon-button slot="target" id="overflow-trigger" icon="fa-ellipsis" aria-label="More actions" class="edge-end"></sinch-floating-panel-icon-button><div id="overflow-menu-surface" slot="content"><sinch-action-menu id="overflow-menu" aria-label="Actions" rows="5"></sinch-action-menu></div></sinch-popover></div></div></dialog>';
8951
- const template$D = document.createElement("template");
8952
- template$D.innerHTML = templateHTML$D;
8976
+ const templateHTML$F = '<style>:host{display:block;max-width:100%;min-width:0}@keyframes panel-slide-in{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes panel-slide-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}dialog{display:flex;align-items:center;box-sizing:border-box;height:40px;padding:0;overflow:visible;width:fit-content;max-width:100%;min-width:0;background-color:var(--sinch-comp-floating-panel-color-background,var(--sinch-sys-color-primary-default));border:none;border-radius:var(--sinch-comp-floating-panel-shape-radius);box-shadow:var(--sinch-comp-floating-panel-shadow);color:var(--sinch-comp-floating-panel-color-text,var(--sinch-sys-color-primary-foreground))}dialog.closing,dialog.opening{overflow:hidden}dialog:not([open]){display:none}dialog.opening{animation:panel-slide-in .2s ease-out forwards}dialog.closing{animation:panel-slide-out .2s ease-in forwards}#items-selected{display:flex;align-items:baseline;gap:10px;padding:0 8px;white-space:nowrap}#cta{display:flex}#no-of-items-selected{font:var(--sinch-comp-floating-panel-font-bold)}#items-selected-label{font:var(--sinch-comp-floating-panel-font-regular)}#left-actions{display:flex;align-items:center}#divider{width:1px;align-self:stretch;background-color:var(--sinch-comp-floating-panel-color-divider)}#actions-end{display:flex;align-items:center;flex-shrink:1;min-width:0}#right-actions{display:flex;align-items:center}#right-actions-overflow{display:none;align-items:center;flex-shrink:0}:host([data-density=compact]) #right-actions,:host([data-density=extra-compact]) #right-actions{display:none}:host([data-density=compact]) #right-actions-overflow,:host([data-density=extra-compact]) #right-actions-overflow{display:flex}#actions-popover{display:block;--sinch-comp-pop-z-index:2147483000}#overflow-trigger{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#overflow-menu-surface{box-sizing:border-box;display:block;min-width:var(--sinch-comp-floating-panel-overflow-menu-min-width,220px);width:max-content;max-width:min(var(--sinch-comp-floating-panel-overflow-menu-max-width,288px),calc(100vw - 24px))}#overflow-menu-surface sinch-action-menu{display:block;width:100%}#right-actions sinch-floating-panel-icon-button:last-child:active,#right-actions sinch-floating-panel-icon-button:last-child:focus,#right-actions sinch-floating-panel-icon-button:last-child:hover{--sinch-button-shape-radius-top-right:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-floating-panel-shape-radius)}@media (prefers-reduced-motion){dialog.closing,dialog.opening{animation:none}}</style><dialog id="wrapper" role="toolbar" aria-label="Bulk actions"><div id="left-actions"><sinch-floating-panel-icon-button id="close-btn" icon="fa-xmark" aria-label="Close selection" class="edge-start"></sinch-floating-panel-icon-button></div><div id="divider" role="separator" aria-orientation="vertical"></div><div id="items-selected" aria-live="polite" aria-atomic="true"><span id="no-of-items-selected"></span> <span id="items-selected-label"></span></div><div id="cta"><sinch-floating-panel-button id="cta-btn" text=""></sinch-floating-panel-button></div><div id="actions-end"><div id="right-actions" role="group" aria-label="Actions"></div><div id="right-actions-overflow"><sinch-popover id="actions-popover" orientation="bottom-right" allow-scroll aria-label="More actions"><sinch-floating-panel-icon-button slot="target" id="overflow-trigger" icon="fa-ellipsis" aria-label="More actions" class="edge-end"></sinch-floating-panel-icon-button><div id="overflow-menu-surface" slot="content"><sinch-action-menu id="overflow-menu" aria-label="Actions" rows="5"></sinch-action-menu></div></sinch-popover></div></div></dialog>';
8977
+ const template$F = document.createElement("template");
8978
+ template$F.innerHTML = templateHTML$F;
8953
8979
  const MAX_ACTIONS = 5;
8954
8980
  const WIDTH_COMPACT = 400;
8955
8981
  const WIDTH_EXTRA_COMPACT = 320;
@@ -9000,7 +9026,7 @@ class FloatingPanel extends NectaryElement {
9000
9026
  constructor() {
9001
9027
  super();
9002
9028
  const shadowRoot = this.attachShadow();
9003
- shadowRoot.appendChild(template$D.content.cloneNode(true));
9029
+ shadowRoot.appendChild(template$F.content.cloneNode(true));
9004
9030
  this.#$dialog = shadowRoot.querySelector("#wrapper");
9005
9031
  this.#$noOfItemsSelected = shadowRoot.querySelector("#no-of-items-selected");
9006
9032
  this.#$itemsSelectedLabel = shadowRoot.querySelector("#items-selected-label");
@@ -9434,14 +9460,14 @@ class FloatingPanel extends NectaryElement {
9434
9460
  }
9435
9461
  }
9436
9462
  defineCustomElement("sinch-floating-panel", FloatingPanel);
9437
- const templateHTML$C = '<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>';
9438
- const template$C = document.createElement("template");
9439
- template$C.innerHTML = templateHTML$C;
9463
+ const templateHTML$E = '<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>';
9464
+ const template$E = document.createElement("template");
9465
+ template$E.innerHTML = templateHTML$E;
9440
9466
  class GridItem extends NectaryElement {
9441
9467
  constructor() {
9442
9468
  super();
9443
9469
  const shadowRoot = this.attachShadow();
9444
- shadowRoot.appendChild(template$C.content.cloneNode(true));
9470
+ shadowRoot.appendChild(template$E.content.cloneNode(true));
9445
9471
  }
9446
9472
  get s() {
9447
9473
  return getIntegerAttribute(this, "s", null);
@@ -9469,27 +9495,27 @@ class GridItem extends NectaryElement {
9469
9495
  }
9470
9496
  }
9471
9497
  defineCustomElement("sinch-grid-item", GridItem);
9472
- const templateHTML$B = '<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>';
9473
- const template$B = document.createElement("template");
9474
- template$B.innerHTML = templateHTML$B;
9498
+ const templateHTML$D = '<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>';
9499
+ const template$D = document.createElement("template");
9500
+ template$D.innerHTML = templateHTML$D;
9475
9501
  class Grid extends NectaryElement {
9476
9502
  constructor() {
9477
9503
  super();
9478
9504
  const shadowRoot = this.attachShadow();
9479
- shadowRoot.appendChild(template$B.content.cloneNode(true));
9505
+ shadowRoot.appendChild(template$D.content.cloneNode(true));
9480
9506
  }
9481
9507
  }
9482
9508
  defineCustomElement("sinch-grid", Grid);
9483
- const templateHTML$A = '<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>';
9484
- const template$A = document.createElement("template");
9485
- template$A.innerHTML = templateHTML$A;
9509
+ const templateHTML$C = '<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>';
9510
+ const template$C = document.createElement("template");
9511
+ template$C.innerHTML = templateHTML$C;
9486
9512
  class HelpTooltip extends NectaryElement {
9487
9513
  #$tooltip;
9488
9514
  #controller = null;
9489
9515
  constructor() {
9490
9516
  super();
9491
9517
  const shadowRoot = this.attachShadow();
9492
- shadowRoot.appendChild(template$A.content.cloneNode(true));
9518
+ shadowRoot.appendChild(template$C.content.cloneNode(true));
9493
9519
  this.#$tooltip = shadowRoot.querySelector("sinch-tooltip");
9494
9520
  }
9495
9521
  connectedCallback() {
@@ -9553,9 +9579,9 @@ class HelpTooltip extends NectaryElement {
9553
9579
  }
9554
9580
  defineCustomElement("sinch-help-tooltip", HelpTooltip);
9555
9581
  const typeValues$1 = ["info", "success", "warn", "error"];
9556
- const templateHTML$z = '<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)}#spinner{display:none}:host([type=success]) #icon,:host([type=success]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}:host([type=warn]) #icon,:host([type=warn]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}:host([type=error]) #icon,:host([type=error]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}:host([type=info]) #icon,:host([type=info]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([loading]) #icon{display:none}:host([loading]) #spinner{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-spinner id="spinner" size="m"></sinch-spinner><sinch-icon icons-version="2" name="" id="icon"></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>';
9557
- const template$z = document.createElement("template");
9558
- template$z.innerHTML = templateHTML$z;
9582
+ const templateHTML$B = '<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)}#spinner{display:none}:host([type=success]) #icon,:host([type=success]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}:host([type=warn]) #icon,:host([type=warn]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}:host([type=error]) #icon,:host([type=error]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}:host([type=info]) #icon,:host([type=info]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([loading]) #icon{display:none}:host([loading]) #spinner{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-spinner id="spinner" size="m"></sinch-spinner><sinch-icon icons-version="2" name="" id="icon"></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>';
9583
+ const template$B = document.createElement("template");
9584
+ template$B.innerHTML = templateHTML$B;
9559
9585
  class InlineAlert extends NectaryElement {
9560
9586
  #$text;
9561
9587
  #$caption;
@@ -9567,7 +9593,7 @@ class InlineAlert extends NectaryElement {
9567
9593
  constructor() {
9568
9594
  super();
9569
9595
  const shadowRoot = this.attachShadow();
9570
- shadowRoot.appendChild(template$z.content.cloneNode(true));
9596
+ shadowRoot.appendChild(template$B.content.cloneNode(true));
9571
9597
  this.#$text = shadowRoot.querySelector("#text");
9572
9598
  this.#$caption = shadowRoot.querySelector("#caption");
9573
9599
  this.#$closeWrapper = shadowRoot.querySelector("#close");
@@ -9693,35 +9719,35 @@ class InlineAlert extends NectaryElement {
9693
9719
  };
9694
9720
  }
9695
9721
  defineCustomElement("sinch-inline-alert", InlineAlert);
9696
- const templateHTML$y = '<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>';
9697
- const template$y = document.createElement("template");
9698
- template$y.innerHTML = templateHTML$y;
9722
+ const templateHTML$A = '<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>';
9723
+ const template$A = document.createElement("template");
9724
+ template$A.innerHTML = templateHTML$A;
9699
9725
  class ListItem extends NectaryElement {
9700
9726
  constructor() {
9701
9727
  super();
9702
9728
  const shadowRoot = this.attachShadow();
9703
- shadowRoot.appendChild(template$y.content.cloneNode(true));
9729
+ shadowRoot.appendChild(template$A.content.cloneNode(true));
9704
9730
  }
9705
9731
  connectedCallback() {
9706
9732
  this.setAttribute("role", "listitem");
9707
9733
  }
9708
9734
  }
9709
9735
  defineCustomElement("sinch-list-item", ListItem);
9710
- const templateHTML$x = '<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>';
9711
- const template$x = document.createElement("template");
9712
- template$x.innerHTML = templateHTML$x;
9736
+ const templateHTML$z = '<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>';
9737
+ const template$z = document.createElement("template");
9738
+ template$z.innerHTML = templateHTML$z;
9713
9739
  class List extends NectaryElement {
9714
9740
  constructor() {
9715
9741
  super();
9716
9742
  const shadowRoot = this.attachShadow();
9717
- shadowRoot.appendChild(template$x.content.cloneNode(true));
9743
+ shadowRoot.appendChild(template$z.content.cloneNode(true));
9718
9744
  }
9719
9745
  connectedCallback() {
9720
9746
  this.setAttribute("role", "list");
9721
9747
  }
9722
9748
  }
9723
9749
  defineCustomElement("sinch-list", List);
9724
- const templateHTML$w = '<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><nav id="wrapper"><button id="left" aria-label="Go back"><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" aria-label="Go forward"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></nav>';
9750
+ const templateHTML$y = '<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><nav id="wrapper"><button id="left" aria-label="Go back"><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" aria-label="Go forward"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></nav>';
9725
9751
  const NUM_BUTTONS = 7;
9726
9752
  const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
9727
9753
  const FIRST_BTN_INDEX = 0;
@@ -9731,8 +9757,8 @@ const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
9731
9757
  const isEllipsis = (btnIndex, value, max) => {
9732
9758
  return btnIndex === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || btnIndex === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX;
9733
9759
  };
9734
- const template$w = document.createElement("template");
9735
- template$w.innerHTML = templateHTML$w;
9760
+ const template$y = document.createElement("template");
9761
+ template$y.innerHTML = templateHTML$y;
9736
9762
  class Pagination extends NectaryElement {
9737
9763
  #$left;
9738
9764
  #$right;
@@ -9741,7 +9767,7 @@ class Pagination extends NectaryElement {
9741
9767
  constructor() {
9742
9768
  super();
9743
9769
  const shadowRoot = this.attachShadow();
9744
- shadowRoot.appendChild(template$w.content.cloneNode(true));
9770
+ shadowRoot.appendChild(template$y.content.cloneNode(true));
9745
9771
  this.#$left = shadowRoot.querySelector("#left");
9746
9772
  this.#$right = shadowRoot.querySelector("#right");
9747
9773
  this.#$buttons = shadowRoot.querySelectorAll(".page");
@@ -9890,9 +9916,9 @@ class Pagination extends NectaryElement {
9890
9916
  }
9891
9917
  }
9892
9918
  defineCustomElement("sinch-pagination", Pagination);
9893
- const templateHTML$v = '<style>#persisted-dialog{--sinch-dialog-close-button-display:none}::slotted(*){display:block}</style><sinch-dialog id="persisted-dialog" prevent-close><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>';
9894
- const template$v = document.createElement("template");
9895
- template$v.innerHTML = templateHTML$v;
9919
+ const templateHTML$x = '<style>#persisted-dialog{--sinch-dialog-close-button-display:none}::slotted(*){display:block}</style><sinch-dialog id="persisted-dialog" prevent-close><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>';
9920
+ const template$x = document.createElement("template");
9921
+ template$x.innerHTML = templateHTML$x;
9896
9922
  function isVisible(elementStyle) {
9897
9923
  return elementStyle.visibility === "visible" && elementStyle.display !== "none";
9898
9924
  }
@@ -9912,7 +9938,7 @@ class PersistentOverlay extends NectaryElement {
9912
9938
  constructor() {
9913
9939
  super();
9914
9940
  const shadowRoot = this.attachShadow();
9915
- shadowRoot.appendChild(template$v.content.cloneNode(true));
9941
+ shadowRoot.appendChild(template$x.content.cloneNode(true));
9916
9942
  this.#$sinchDialog = shadowRoot.querySelector("#persisted-dialog");
9917
9943
  }
9918
9944
  static get observedAttributes() {
@@ -9998,6 +10024,379 @@ class PersistentOverlay extends NectaryElement {
9998
10024
  }
9999
10025
  }
10000
10026
  defineCustomElement("sinch-persistent-overlay", PersistentOverlay);
10027
+ const STEP_CHIP_TOKEN = "--sinch-comp-progress-stepper-v2-step";
10028
+ const chipStyles = new CSSStyleSheet();
10029
+ chipStyles.replaceSync(`
10030
+ .step-chip {
10031
+ display: inline-grid;
10032
+ place-items: center;
10033
+ width: 24px;
10034
+ height: 24px;
10035
+ border-radius: var(${STEP_CHIP_TOKEN}-shape-radius-indicator);
10036
+ flex-shrink: 0;
10037
+ box-sizing: border-box;
10038
+ vertical-align: middle;
10039
+ line-height: var(--sinch-comp-text-line-height);
10040
+ font: var(--sinch-sys-font-body-s);
10041
+ }
10042
+
10043
+ .step-chip[data-checked] {
10044
+ font: var(--sinch-sys-font-body-emphasize-s);
10045
+ }
10046
+
10047
+ .step-chip[data-status="incomplete"] {
10048
+ background: var(${STEP_CHIP_TOKEN}-color-incomplete-icon-container-initial);
10049
+ color: var(${STEP_CHIP_TOKEN}-color-incomplete-icon-initial);
10050
+ }
10051
+
10052
+ .step-chip[data-status="incomplete"][data-checked] {
10053
+ background: var(${STEP_CHIP_TOKEN}-color-incomplete-icon-container-current);
10054
+ color: var(${STEP_CHIP_TOKEN}-color-incomplete-icon-current);
10055
+ }
10056
+
10057
+ .step-chip[data-status="complete"] {
10058
+ background: var(${STEP_CHIP_TOKEN}-color-complete-icon-container-initial);
10059
+ color: var(${STEP_CHIP_TOKEN}-color-complete-icon-initial);
10060
+ }
10061
+
10062
+ .step-chip[data-status="complete"][data-checked] {
10063
+ background: var(${STEP_CHIP_TOKEN}-color-complete-icon-container-current);
10064
+ color: var(${STEP_CHIP_TOKEN}-color-complete-icon-current);
10065
+ }
10066
+
10067
+ .step-chip[data-invalid] {
10068
+ background: var(${STEP_CHIP_TOKEN}-color-invalid-icon-container-initial);
10069
+ color: var(${STEP_CHIP_TOKEN}-color-invalid-icon-initial);
10070
+ }
10071
+
10072
+ .step-chip[data-invalid][data-checked] {
10073
+ background: var(${STEP_CHIP_TOKEN}-color-invalid-icon-container-current);
10074
+ color: var(${STEP_CHIP_TOKEN}-color-invalid-icon-current);
10075
+ }
10076
+
10077
+ .step-chip__num,
10078
+ .step-chip__check,
10079
+ .step-chip__warn {
10080
+ grid-area: 1 / 1;
10081
+ }
10082
+
10083
+ .step-chip__check,
10084
+ .step-chip__warn {
10085
+ display: none;
10086
+ --sinch-global-size-icon: 20px;
10087
+ --sinch-global-color-icon: currentcolor;
10088
+ }
10089
+
10090
+ .step-chip[data-invalid] .step-chip__num,
10091
+ .step-chip[data-status="complete"] .step-chip__num {
10092
+ display: none;
10093
+ }
10094
+
10095
+ .step-chip[data-invalid] .step-chip__warn {
10096
+ display: block;
10097
+ }
10098
+
10099
+ .step-chip[data-status="complete"]:not([data-invalid]) .step-chip__check {
10100
+ display: block;
10101
+ }
10102
+ `);
10103
+ const adoptChipStylesOnce = (root) => {
10104
+ if (!root.adoptedStyleSheets.includes(chipStyles)) {
10105
+ root.adoptedStyleSheets = [...root.adoptedStyleSheets, chipStyles];
10106
+ }
10107
+ };
10108
+ const ensureChipStyles = (host) => {
10109
+ const root = host.getRootNode();
10110
+ if (root instanceof ShadowRoot || root instanceof Document) {
10111
+ adoptChipStylesOnce(root);
10112
+ }
10113
+ };
10114
+ const buildProgressStepperStepChip = (anchor) => {
10115
+ const chip = document.createElement("span");
10116
+ chip.className = "step-chip";
10117
+ chip.setAttribute("aria-hidden", "true");
10118
+ const num = document.createElement("span");
10119
+ num.className = "step-chip__num";
10120
+ const check = createScopedElement(anchor, "sinch-icon");
10121
+ check.className = "step-chip__check";
10122
+ check.setAttribute("icons-version", "2");
10123
+ check.setAttribute("name", "fa-check");
10124
+ check.setAttribute("aria-hidden", "true");
10125
+ const warn = createScopedElement(anchor, "sinch-icon");
10126
+ warn.className = "step-chip__warn";
10127
+ warn.setAttribute("icons-version", "2");
10128
+ warn.setAttribute("name", "triangle-exclamation");
10129
+ warn.setAttribute("aria-hidden", "true");
10130
+ chip.append(num, check, warn);
10131
+ return chip;
10132
+ };
10133
+ const fillProgressStepperStepChipHost = (host, model) => {
10134
+ ensureChipStyles(host);
10135
+ let chip = host.querySelector(":scope > .step-chip");
10136
+ if (!(chip instanceof HTMLElement)) {
10137
+ chip = buildProgressStepperStepChip(host);
10138
+ host.appendChild(chip);
10139
+ }
10140
+ chip.toggleAttribute("data-invalid", model.invalid);
10141
+ chip.toggleAttribute("data-checked", model.checked);
10142
+ chip.setAttribute(
10143
+ "data-status",
10144
+ model.status === "inactive" ? "incomplete" : model.status
10145
+ );
10146
+ chip.querySelector(".step-chip__num").textContent = model.stepIndexDisplay;
10147
+ };
10148
+ const TAG_PROGRESS_STEPPER = "sinch-progress-stepper-v2";
10149
+ const TAG_PROGRESS_STEPPER_ITEM = "sinch-progress-stepper-item-v2";
10150
+ const ATTR_PROGRESS_STEPPER_ITEM_CHECKED$1 = "data-checked";
10151
+ const ATTR_PROGRESS_STEPPER_ITEM_STATUS$1 = "data-status";
10152
+ const ATTR_PROGRESS_STEPPER_ITEM_LAYOUT = "data-stepper-layout";
10153
+ const isProgressStepperItemChecked$1 = ($el) => getBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_CHECKED$1);
10154
+ const setProgressStepperItemChecked$1 = ($el, isChecked) => updateBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_CHECKED$1, isChecked);
10155
+ const isProgressStepperItemActive$1 = ($el) => {
10156
+ const attrValue = getAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS$1);
10157
+ if (attrValue === null || attrValue === "") {
10158
+ return true;
10159
+ }
10160
+ return attrValue !== "inactive";
10161
+ };
10162
+ const setProgressStepperItemStatus$1 = ($el, status) => updateAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS$1, status);
10163
+ const isStepperTabFocusable = (item) => !getBooleanAttribute(item, "disabled") && isProgressStepperItemActive$1(item);
10164
+ const getProgressStepperFocusedItemIndex = (items, active, fromEvent) => {
10165
+ if (fromEvent != null && typeof fromEvent.composedPath === "function") {
10166
+ for (const node of fromEvent.composedPath()) {
10167
+ if (node instanceof HTMLElement) {
10168
+ const i = items.indexOf(node);
10169
+ if (i >= 0) {
10170
+ return i;
10171
+ }
10172
+ }
10173
+ }
10174
+ }
10175
+ if (active === null) {
10176
+ return -1;
10177
+ }
10178
+ let n = active;
10179
+ while (n != null) {
10180
+ if (n instanceof HTMLElement) {
10181
+ const i = items.indexOf(n);
10182
+ if (i >= 0) {
10183
+ return i;
10184
+ }
10185
+ }
10186
+ const parentNode = n.parentNode;
10187
+ if (parentNode != null) {
10188
+ n = parentNode;
10189
+ continue;
10190
+ }
10191
+ const root = n.getRootNode();
10192
+ if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
10193
+ n = root.host;
10194
+ continue;
10195
+ }
10196
+ break;
10197
+ }
10198
+ return -1;
10199
+ };
10200
+ const syncProgressStepperItemsRovingTabIndexes = (items) => {
10201
+ const focusIdx = getProgressStepperFocusedItemIndex(items, document.activeElement);
10202
+ let primaryIdx = -1;
10203
+ if (focusIdx >= 0 && isStepperTabFocusable(items[focusIdx])) {
10204
+ primaryIdx = focusIdx;
10205
+ } else {
10206
+ const checkedIdx = items.findIndex((s) => getBooleanAttribute(s, ATTR_PROGRESS_STEPPER_ITEM_CHECKED$1));
10207
+ if (checkedIdx >= 0 && isStepperTabFocusable(items[checkedIdx])) {
10208
+ primaryIdx = checkedIdx;
10209
+ } else {
10210
+ primaryIdx = items.findIndex(isStepperTabFocusable);
10211
+ }
10212
+ }
10213
+ for (let i = 0; i < items.length; i++) {
10214
+ const item = items[i];
10215
+ if (!isStepperTabFocusable(item)) {
10216
+ item.tabIndex = -1;
10217
+ continue;
10218
+ }
10219
+ item.tabIndex = i === primaryIdx ? 0 : -1;
10220
+ }
10221
+ };
10222
+ const templateHTML$w = '<style>:host{display:grid;grid-template-columns:minmax(0,max-content);grid-template-rows:minmax(0,1fr);min-height:0;min-width:0;outline:0}#button{position:relative;grid-area:1/1;align-self:stretch;justify-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:0;width:100%;min-width:100%;min-height:0;padding:8px 4px;box-sizing:border-box;cursor:pointer;border-radius:var(--sinch-comp-progress-stepper-v2-step-shape-radius-container)}:host([data-stepper-layout=horizontal]) #button{padding:8px 12px 8px 10px}#label-bar{position:relative;width:100%;min-width:0}:host([data-status=inactive])>#button{cursor:default}:host([data-status=incomplete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-background-hover)}:host([data-status=complete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-v2-step-color-complete-background-hover)}:host([invalid]:not([data-status=inactive]):hover)>#button{background-color:var(--sinch-comp-progress-stepper-v2-step-color-invalid-background-hover)}#outline{position:absolute;inset:-2px;border:2px solid var(--sinch-comp-progress-stepper-v2-step-color-outline-focus);border-radius:calc(var(--sinch-comp-progress-stepper-v2-step-shape-radius-container) + 2px);pointer-events:none;opacity:0}:host(:focus-visible) #outline,:host([data-force-focus-visible]) #outline{opacity:1}#text{flex-shrink:1;flex-basis:auto;min-width:0;transition:color .25s ease-out}#label-content{display:flex;align-items:center;gap:8px;min-width:0}:host([invalid]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-invalid-label-initial);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-initial)}:host(:is([data-status=incomplete],[data-status=inactive]):not([invalid])) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-label-initial);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-initial)}:host([data-status=complete]:not([invalid])) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-complete-label-initial);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-initial)}:host([invalid][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-invalid-label-current);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-current)}:host(:is([data-status=incomplete],[data-status=inactive]):not([invalid])[data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-label-current);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-current)}:host([data-status=complete]:not([invalid])[data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-v2-step-color-complete-label-current);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-v2-step-font-label-current)}</style><div id="button"><div id="label-bar"><div id="label-content"><span id="index" aria-hidden="true"></span><sinch-text id="text" type="m"></sinch-text></div></div><div id="outline"></div></div>';
10223
+ const template$w = document.createElement("template");
10224
+ template$w.innerHTML = templateHTML$w;
10225
+ class ProgressStepperItemV2 extends NectaryElement {
10226
+ #$text;
10227
+ #$indicator;
10228
+ constructor() {
10229
+ super();
10230
+ const shadowRoot = this.attachShadow({ delegatesFocus: false });
10231
+ shadowRoot.appendChild(template$w.content.cloneNode(true));
10232
+ this.#$text = shadowRoot.querySelector("#text");
10233
+ this.#$indicator = shadowRoot.querySelector("#index");
10234
+ }
10235
+ connectedCallback() {
10236
+ this.setAttribute("role", "tab");
10237
+ this.#syncAriaDisabled();
10238
+ this.#syncStepIndex();
10239
+ this.#updateTabIndex();
10240
+ }
10241
+ disconnectedCallback() {
10242
+ }
10243
+ static get observedAttributes() {
10244
+ return [
10245
+ "text",
10246
+ "data-step-index",
10247
+ "invalid",
10248
+ "complete",
10249
+ "disabled",
10250
+ ATTR_PROGRESS_STEPPER_ITEM_STATUS$1,
10251
+ ATTR_PROGRESS_STEPPER_ITEM_CHECKED$1
10252
+ ];
10253
+ }
10254
+ attributeChangedCallback(name, oldVal, newVal) {
10255
+ switch (name) {
10256
+ case "text": {
10257
+ this.#$text.textContent = newVal;
10258
+ break;
10259
+ }
10260
+ case "data-step-index": {
10261
+ this.#syncIndicatorAttributes();
10262
+ break;
10263
+ }
10264
+ case ATTR_PROGRESS_STEPPER_ITEM_CHECKED$1: {
10265
+ updateExplicitBooleanAttribute(
10266
+ this,
10267
+ "aria-selected",
10268
+ isAttrTrue(newVal)
10269
+ );
10270
+ this.#syncIndicatorAttributes();
10271
+ this.#updateTabIndex();
10272
+ break;
10273
+ }
10274
+ case ATTR_PROGRESS_STEPPER_ITEM_STATUS$1: {
10275
+ this.#syncAriaDisabled();
10276
+ this.#updateTabIndex();
10277
+ this.#syncIndicatorAttributes();
10278
+ break;
10279
+ }
10280
+ case "invalid": {
10281
+ if (isAttrEqual(oldVal, newVal)) {
10282
+ return;
10283
+ }
10284
+ const isInvalid = isAttrTrue(newVal);
10285
+ updateExplicitBooleanAttribute(this, "aria-invalid", isInvalid);
10286
+ updateBooleanAttribute(this, "invalid", isInvalid);
10287
+ this.#syncIndicatorAttributes();
10288
+ break;
10289
+ }
10290
+ case "disabled": {
10291
+ if (isAttrEqual(oldVal, newVal)) {
10292
+ return;
10293
+ }
10294
+ updateBooleanAttribute(this, "disabled", isAttrTrue(newVal));
10295
+ this.#syncAriaDisabled();
10296
+ this.#updateTabIndex();
10297
+ break;
10298
+ }
10299
+ case "complete": {
10300
+ if (isAttrEqual(oldVal, newVal)) {
10301
+ return;
10302
+ }
10303
+ updateBooleanAttribute(this, "complete", isAttrTrue(newVal));
10304
+ break;
10305
+ }
10306
+ }
10307
+ }
10308
+ set value(value) {
10309
+ updateAttribute(this, "value", value);
10310
+ }
10311
+ get value() {
10312
+ return getAttribute(this, "value", "");
10313
+ }
10314
+ set text(value) {
10315
+ updateAttribute(this, "text", value);
10316
+ }
10317
+ get text() {
10318
+ return getAttribute(this, "text", "");
10319
+ }
10320
+ set invalid(isInvalid) {
10321
+ updateBooleanAttribute(this, "invalid", isInvalid);
10322
+ }
10323
+ get invalid() {
10324
+ return getBooleanAttribute(this, "invalid");
10325
+ }
10326
+ set complete(value) {
10327
+ updateBooleanAttribute(this, "complete", value);
10328
+ }
10329
+ get complete() {
10330
+ return getBooleanAttribute(this, "complete");
10331
+ }
10332
+ set disabled(value) {
10333
+ updateBooleanAttribute(this, "disabled", value);
10334
+ }
10335
+ get disabled() {
10336
+ return getBooleanAttribute(this, "disabled");
10337
+ }
10338
+ get focusable() {
10339
+ return true;
10340
+ }
10341
+ #syncAriaDisabled() {
10342
+ const status = getAttribute(this, ATTR_PROGRESS_STEPPER_ITEM_STATUS$1, "");
10343
+ const isUnavailable = getBooleanAttribute(this, "disabled") || status === "inactive";
10344
+ updateExplicitBooleanAttribute(this, "aria-disabled", isUnavailable);
10345
+ }
10346
+ #syncIndicatorAttributes() {
10347
+ let stepIndexDisplay = getAttribute(this, "data-step-index", "");
10348
+ if (stepIndexDisplay === "") {
10349
+ const fallback = this.#computeFallbackIndex();
10350
+ if (fallback > 0) {
10351
+ stepIndexDisplay = String(fallback);
10352
+ }
10353
+ }
10354
+ fillProgressStepperStepChipHost(this.#$indicator, {
10355
+ stepIndexDisplay,
10356
+ status: getAttribute(this, ATTR_PROGRESS_STEPPER_ITEM_STATUS$1, "incomplete"),
10357
+ invalid: getBooleanAttribute(this, "invalid"),
10358
+ checked: getBooleanAttribute(this, ATTR_PROGRESS_STEPPER_ITEM_CHECKED$1)
10359
+ });
10360
+ }
10361
+ #updateTabIndex() {
10362
+ const parent = this.parentElement;
10363
+ if (parent === null) {
10364
+ return;
10365
+ }
10366
+ const items = [...parent.children].filter(
10367
+ (el) => el.tagName.toLowerCase() === TAG_PROGRESS_STEPPER_ITEM
10368
+ );
10369
+ syncProgressStepperItemsRovingTabIndexes(items);
10370
+ }
10371
+ #syncStepIndex() {
10372
+ let index = getAttribute(this, "data-step-index", "");
10373
+ if (index === "") {
10374
+ const fallback = this.#computeFallbackIndex();
10375
+ if (fallback > 0) {
10376
+ index = String(fallback);
10377
+ this.setAttribute("data-step-index", index);
10378
+ }
10379
+ }
10380
+ this.#syncIndicatorAttributes();
10381
+ }
10382
+ #computeFallbackIndex() {
10383
+ const parent = this.parentElement;
10384
+ if (parent === null) {
10385
+ return -1;
10386
+ }
10387
+ let index = 0;
10388
+ for (const sibling of Array.from(parent.children)) {
10389
+ if (sibling.tagName.toLowerCase() === TAG_PROGRESS_STEPPER_ITEM) {
10390
+ index += 1;
10391
+ }
10392
+ if (sibling === this) {
10393
+ return index;
10394
+ }
10395
+ }
10396
+ return -1;
10397
+ }
10398
+ }
10399
+ defineCustomElement(TAG_PROGRESS_STEPPER_ITEM, ProgressStepperItemV2);
10001
10400
  const ATTR_PROGRESS_STEPPER_ITEM_CHECKED = "data-checked";
10002
10401
  const ATTR_PROGRESS_STEPPER_ITEM_STATUS = "data-status";
10003
10402
  const ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT = "data-active-descendant";
@@ -10010,15 +10409,15 @@ const isProgressStepperItemActive = ($el) => {
10010
10409
  const setProgressStepperItemStatus = ($el, status) => updateAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS, status);
10011
10410
  const isProgressStepperItemActiveDescendant = ($el) => getBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT);
10012
10411
  const setProgressStepperItemActiveDescendant = ($el, isActiveDescendant) => updateBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT, isActiveDescendant);
10013
- const templateHTML$u = '<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>';
10014
- const template$u = document.createElement("template");
10015
- template$u.innerHTML = templateHTML$u;
10412
+ const templateHTML$v = '<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>';
10413
+ const template$v = document.createElement("template");
10414
+ template$v.innerHTML = templateHTML$v;
10016
10415
  class ProgressStepperItem extends NectaryElement {
10017
10416
  #$text;
10018
10417
  constructor() {
10019
10418
  super();
10020
10419
  const shadowRoot = this.attachShadow({ delegatesFocus: false });
10021
- shadowRoot.appendChild(template$u.content.cloneNode(true));
10420
+ shadowRoot.appendChild(template$v.content.cloneNode(true));
10022
10421
  this.#$text = shadowRoot.querySelector("#text");
10023
10422
  }
10024
10423
  connectedCallback() {
@@ -10094,6 +10493,1092 @@ class ProgressStepperItem extends NectaryElement {
10094
10493
  }
10095
10494
  }
10096
10495
  defineCustomElement("sinch-progress-stepper-item", ProgressStepperItem);
10496
+ const DEFAULT_COMPACT_COUNTER_FORMAT = "{current} of {total}";
10497
+ const DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT_WITH_LABEL = "{label}, {current} of {total}, {step}";
10498
+ const DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT = "{current} of {total}, {step}";
10499
+ function formatCompactTemplate(template2, vars) {
10500
+ return template2.replace(/\{(\w+)\}/g, (_, key) => {
10501
+ const value = vars[key];
10502
+ return value != null ? String(value) : "";
10503
+ });
10504
+ }
10505
+ function resolveCompactCounterFormat(explicit) {
10506
+ return explicit !== "" ? explicit : DEFAULT_COMPACT_COUNTER_FORMAT;
10507
+ }
10508
+ function resolveCompactTriggerAriaLabelFormat(explicit, hostAriaLabel) {
10509
+ if (explicit !== "") {
10510
+ return explicit;
10511
+ }
10512
+ if (hostAriaLabel != null && hostAriaLabel !== "") {
10513
+ return DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT_WITH_LABEL;
10514
+ }
10515
+ return DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT;
10516
+ }
10517
+ function adjustDefaultTriggerFormatForEmptyStep(format, stepEmpty) {
10518
+ if (!stepEmpty) {
10519
+ return format;
10520
+ }
10521
+ if (format === DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT) {
10522
+ return "{current} of {total}";
10523
+ }
10524
+ if (format === DEFAULT_COMPACT_TRIGGER_ARIA_LABEL_FORMAT_WITH_LABEL) {
10525
+ return "{label}, {current} of {total}";
10526
+ }
10527
+ return format;
10528
+ }
10529
+ function resolveCompactTriggerAriaLabel(compactTriggerAriaLabelFormat, hostAriaLabel, vars) {
10530
+ let format = resolveCompactTriggerAriaLabelFormat(compactTriggerAriaLabelFormat, hostAriaLabel);
10531
+ if (compactTriggerAriaLabelFormat === "") {
10532
+ format = adjustDefaultTriggerFormatForEmptyStep(format, vars.step === "");
10533
+ }
10534
+ return formatCompactTemplate(format, vars);
10535
+ }
10536
+ function resolveCompactMenuAndPopAriaLabel(hostAriaLabel, compactTriggerAriaLabelFormat, vars) {
10537
+ if (hostAriaLabel != null && hostAriaLabel !== "") {
10538
+ return hostAriaLabel;
10539
+ }
10540
+ return resolveCompactTriggerAriaLabel(compactTriggerAriaLabelFormat, hostAriaLabel, vars);
10541
+ }
10542
+ class ProgressStepperCompactController {
10543
+ #$actionMenu;
10544
+ #$compactPop;
10545
+ #$compactTrigger;
10546
+ #$compactLabel;
10547
+ #$compactCounter;
10548
+ #hostAriaLabel = null;
10549
+ #compactCounterFormat = "";
10550
+ #compactTriggerAriaLabelFormat = "";
10551
+ #warnedMissingHostAriaLabel = false;
10552
+ #compactCurrentIndex = -1;
10553
+ constructor(elements) {
10554
+ this.#$actionMenu = elements.actionMenu;
10555
+ this.#$compactPop = elements.pop;
10556
+ this.#$compactTrigger = elements.trigger;
10557
+ this.#$compactLabel = elements.label;
10558
+ this.#$compactCounter = elements.counter;
10559
+ }
10560
+ connect(signal) {
10561
+ subscribeContext(this.#$actionMenu, "visibility", this.#onActionMenuVisibility, signal);
10562
+ }
10563
+ onTriggerClick(usesCompactActionMenu) {
10564
+ if (!usesCompactActionMenu) {
10565
+ return;
10566
+ }
10567
+ const willOpen = !getBooleanAttribute(this.#$compactPop, "open");
10568
+ updateBooleanAttribute(this.#$compactPop, "open", willOpen);
10569
+ }
10570
+ onPopoverClose() {
10571
+ updateBooleanAttribute(this.#$compactPop, "open", false);
10572
+ queueMicrotask(() => this.#syncCompactMenuListboxSelection(false));
10573
+ }
10574
+ sync(params) {
10575
+ const {
10576
+ usesCompactActionMenu,
10577
+ items,
10578
+ hostAriaLabel,
10579
+ compactCounterFormat,
10580
+ compactTriggerAriaLabelFormat,
10581
+ getCheckedItemIndex,
10582
+ getFirstActiveItemIndex,
10583
+ onChange
10584
+ } = params;
10585
+ if (!usesCompactActionMenu) {
10586
+ this.#compactCurrentIndex = -1;
10587
+ updateBooleanAttribute(this.#$compactPop, "open", false);
10588
+ this.#clearCompactStateAttributes(this.#$compactTrigger);
10589
+ this.#clearActionMenuChildren();
10590
+ return;
10591
+ }
10592
+ this.#hostAriaLabel = hostAriaLabel;
10593
+ this.#compactCounterFormat = compactCounterFormat;
10594
+ this.#compactTriggerAriaLabelFormat = compactTriggerAriaLabelFormat;
10595
+ this.#warnMissingHostAriaLabel(hostAriaLabel);
10596
+ if (items.length === 0) {
10597
+ this.#compactCurrentIndex = -1;
10598
+ this.#clearActionMenuChildren();
10599
+ this.#syncCompactTrigger(items, -1);
10600
+ this.#syncCompactMenuAndPopAccessibleName(null, false);
10601
+ return;
10602
+ }
10603
+ const currentIndex = this.#resolveCurrentIndex(items.length, getCheckedItemIndex, getFirstActiveItemIndex);
10604
+ this.#compactCurrentIndex = currentIndex;
10605
+ const formatVars = this.#buildCompactFormatVars(items, currentIndex);
10606
+ this.#syncCompactMenuAndPopAccessibleName(formatVars, true);
10607
+ if (this.#menuOptionsNeedFullRebuild(items)) {
10608
+ this.#clearActionMenuChildren();
10609
+ for (let i = 0; i < items.length; i++) {
10610
+ const opt = this.#createMenuOptionForItem(items[i], onChange);
10611
+ this.#$actionMenu.appendChild(opt);
10612
+ this.#refreshCompactOptionPresentation(opt, items[i], i, i === currentIndex);
10613
+ }
10614
+ this.#syncCompactTrigger(items, currentIndex, formatVars);
10615
+ this.#syncCompactMenuListboxSelection(false);
10616
+ return;
10617
+ }
10618
+ for (let i = 0; i < items.length; i++) {
10619
+ const item = items[i];
10620
+ const opt = this.#$actionMenu.children[i];
10621
+ opt.setAttribute("text", getAttribute(item, "text", ""));
10622
+ opt.toggleAttribute("disabled", !isProgressStepperItemActive$1(item));
10623
+ if (getBooleanAttribute(item, "invalid")) {
10624
+ opt.setAttribute("aria-invalid", "true");
10625
+ } else {
10626
+ opt.removeAttribute("aria-invalid");
10627
+ }
10628
+ this.#refreshCompactOptionPresentation(opt, item, i, i === currentIndex);
10629
+ }
10630
+ this.#syncCompactTrigger(items, currentIndex, formatVars);
10631
+ this.#syncCompactMenuListboxSelection(false);
10632
+ }
10633
+ #onActionMenuVisibility = (e) => {
10634
+ if (e.detail) {
10635
+ queueMicrotask(() => {
10636
+ requestAnimationFrame(() => {
10637
+ this.#syncCompactMenuListboxSelection(true);
10638
+ });
10639
+ });
10640
+ return;
10641
+ }
10642
+ this.#syncCompactMenuListboxSelection(false);
10643
+ };
10644
+ /**
10645
+ * `sinch-action-menu-option` maps `data-selected` to `aria-selected`. When the popover is open,
10646
+ * highlight the first enabled row (listbox entry point). When closed, mark the current value step.
10647
+ */
10648
+ #syncCompactMenuListboxSelection(focusSelectedOption) {
10649
+ if (getBooleanAttribute(this.#$compactPop, "open")) {
10650
+ this.#syncCompactMenuOpenListboxSelection(focusSelectedOption);
10651
+ return;
10652
+ }
10653
+ this.#syncCompactMenuClosedListboxSelection();
10654
+ }
10655
+ #syncCompactMenuOpenListboxSelection(focusSelectedOption) {
10656
+ const count = this.#$actionMenu.childElementCount;
10657
+ if (count === 0) {
10658
+ return;
10659
+ }
10660
+ const selectedIndex = this.#getFirstActiveMenuOptionIndex();
10661
+ if (selectedIndex < 0) {
10662
+ return;
10663
+ }
10664
+ let selectedOption = null;
10665
+ for (let i = 0; i < count; i++) {
10666
+ const opt = this.#$actionMenu.children[i];
10667
+ const isSelected = i === selectedIndex;
10668
+ updateBooleanAttribute(opt, "data-selected", isSelected);
10669
+ if (isSelected) {
10670
+ selectedOption = opt;
10671
+ }
10672
+ }
10673
+ if (focusSelectedOption && selectedOption !== null) {
10674
+ selectedOption.focus();
10675
+ }
10676
+ }
10677
+ #syncCompactMenuClosedListboxSelection() {
10678
+ const count = this.#$actionMenu.childElementCount;
10679
+ if (count === 0 || this.#compactCurrentIndex < 0) {
10680
+ return;
10681
+ }
10682
+ for (let i = 0; i < count; i++) {
10683
+ const opt = this.#$actionMenu.children[i];
10684
+ const isCurrent = i === this.#compactCurrentIndex && !getBooleanAttribute(opt, "disabled");
10685
+ updateBooleanAttribute(opt, "data-selected", isCurrent);
10686
+ }
10687
+ }
10688
+ #getFirstActiveMenuOptionIndex() {
10689
+ const count = this.#$actionMenu.childElementCount;
10690
+ for (let i = 0; i < count; i++) {
10691
+ const opt = this.#$actionMenu.children[i];
10692
+ if (!getBooleanAttribute(opt, "disabled")) {
10693
+ return i;
10694
+ }
10695
+ }
10696
+ return -1;
10697
+ }
10698
+ #clearActionMenuChildren() {
10699
+ while (this.#$actionMenu.firstChild !== null) {
10700
+ this.#$actionMenu.removeChild(this.#$actionMenu.firstChild);
10701
+ }
10702
+ }
10703
+ #menuOptionsNeedFullRebuild(items) {
10704
+ if (this.#$actionMenu.childElementCount !== items.length) {
10705
+ return true;
10706
+ }
10707
+ for (let i = 0; i < items.length; i++) {
10708
+ const opt = this.#$actionMenu.children[i];
10709
+ if (opt === void 0) {
10710
+ return true;
10711
+ }
10712
+ if (getAttribute(opt, "data-step-value", "") !== getAttribute(items[i], "value", "")) {
10713
+ return true;
10714
+ }
10715
+ }
10716
+ return false;
10717
+ }
10718
+ #createMenuOptionForItem(item, onChange) {
10719
+ const opt = createScopedElement(this.#$actionMenu, "sinch-action-menu-option");
10720
+ const text = getAttribute(item, "text", "");
10721
+ const value = getAttribute(item, "value", "");
10722
+ opt.setAttribute("text", text);
10723
+ opt.setAttribute("data-step-value", value);
10724
+ opt.toggleAttribute("disabled", !isProgressStepperItemActive$1(item));
10725
+ if (getBooleanAttribute(item, "invalid")) {
10726
+ opt.setAttribute("aria-invalid", "true");
10727
+ }
10728
+ opt.addEventListener("-click", () => {
10729
+ if (opt.hasAttribute("disabled")) {
10730
+ return;
10731
+ }
10732
+ updateBooleanAttribute(this.#$compactPop, "open", false);
10733
+ onChange(value);
10734
+ });
10735
+ return opt;
10736
+ }
10737
+ #buildCompactFormatVars(items, currentIndex) {
10738
+ const labelIndex = currentIndex >= 0 ? currentIndex : 0;
10739
+ const item = items[labelIndex];
10740
+ return {
10741
+ current: labelIndex + 1,
10742
+ total: items.length,
10743
+ step: getAttribute(item, "text", ""),
10744
+ label: this.#hostAriaLabel ?? ""
10745
+ };
10746
+ }
10747
+ #syncCompactMenuAndPopAccessibleName(formatVars, hasItems) {
10748
+ if (!hasItems || formatVars === null) {
10749
+ this.#$actionMenu.removeAttribute("aria-label");
10750
+ this.#$compactPop.removeAttribute("aria-label");
10751
+ return;
10752
+ }
10753
+ const name = resolveCompactMenuAndPopAriaLabel(
10754
+ this.#hostAriaLabel,
10755
+ this.#compactTriggerAriaLabelFormat,
10756
+ formatVars
10757
+ );
10758
+ updateAttribute(this.#$actionMenu, "aria-label", name);
10759
+ updateAttribute(this.#$compactPop, "aria-label", name);
10760
+ }
10761
+ #warnMissingHostAriaLabel(hostAriaLabel) {
10762
+ if (hostAriaLabel != null && hostAriaLabel !== "") {
10763
+ this.#warnedMissingHostAriaLabel = false;
10764
+ return;
10765
+ }
10766
+ if (this.#warnedMissingHostAriaLabel) {
10767
+ return;
10768
+ }
10769
+ this.#warnedMissingHostAriaLabel = true;
10770
+ console.warn(
10771
+ "[sinch-progress-stepper-v2] aria-label is recommended in compact layout so the step list has a concise widget name; a derived name from the current step is used when omitted."
10772
+ );
10773
+ }
10774
+ #syncCompactTrigger(items, currentIndex, formatVars) {
10775
+ const total = items.length;
10776
+ if (total === 0) {
10777
+ this.#$compactCounter.textContent = "";
10778
+ this.#$compactLabel.textContent = " ";
10779
+ this.#clearCompactStateAttributes(this.#$compactTrigger);
10780
+ this.#$compactTrigger.removeAttribute("aria-label");
10781
+ return;
10782
+ }
10783
+ const labelIndex = currentIndex >= 0 ? currentIndex : 0;
10784
+ const item = items[labelIndex];
10785
+ const vars = formatVars ?? this.#buildCompactFormatVars(items, currentIndex);
10786
+ this.#$compactCounter.textContent = formatCompactTemplate(
10787
+ resolveCompactCounterFormat(this.#compactCounterFormat),
10788
+ vars
10789
+ );
10790
+ this.#$compactLabel.textContent = getAttribute(item, "text", " ");
10791
+ updateAttribute(
10792
+ this.#$compactTrigger,
10793
+ "aria-label",
10794
+ resolveCompactTriggerAriaLabel(
10795
+ this.#compactTriggerAriaLabelFormat,
10796
+ this.#hostAriaLabel,
10797
+ vars
10798
+ )
10799
+ );
10800
+ this.#syncCompactStateAttributes(this.#$compactTrigger, item, true);
10801
+ }
10802
+ #clearCompactStateAttributes(el) {
10803
+ el.removeAttribute("data-step-status");
10804
+ el.removeAttribute("data-step-checked");
10805
+ el.removeAttribute("data-step-invalid");
10806
+ }
10807
+ #syncCompactStateAttributes(el, item, isCurrent = false) {
10808
+ if (item === void 0) {
10809
+ this.#clearCompactStateAttributes(el);
10810
+ return;
10811
+ }
10812
+ updateAttribute(el, "data-step-status", getAttribute(item, ATTR_PROGRESS_STEPPER_ITEM_STATUS$1, "incomplete"));
10813
+ updateBooleanAttribute(el, "data-step-checked", isCurrent);
10814
+ updateBooleanAttribute(el, "data-step-invalid", getBooleanAttribute(item, "invalid"));
10815
+ }
10816
+ #ensureOptionIconSlot(opt) {
10817
+ const found = opt.querySelector(':scope > [slot="icon"]');
10818
+ if (found instanceof HTMLElement) {
10819
+ return found;
10820
+ }
10821
+ const wrap = document.createElement("span");
10822
+ wrap.slot = "icon";
10823
+ opt.appendChild(wrap);
10824
+ return wrap;
10825
+ }
10826
+ #renderCompactOptionIcon(wrap, item, index, isCurrent) {
10827
+ Object.assign(wrap.style, {
10828
+ display: "flex",
10829
+ alignItems: "center",
10830
+ justifyContent: "center",
10831
+ flexShrink: "0",
10832
+ marginLeft: "0"
10833
+ });
10834
+ const stepNum = String(index + 1);
10835
+ const rawStepIndex = getAttribute(item, "data-step-index", "");
10836
+ const stepIdx = rawStepIndex !== "" ? rawStepIndex : stepNum;
10837
+ fillProgressStepperStepChipHost(wrap, {
10838
+ stepIndexDisplay: stepIdx,
10839
+ status: getAttribute(item, ATTR_PROGRESS_STEPPER_ITEM_STATUS$1, "incomplete"),
10840
+ invalid: getBooleanAttribute(item, "invalid"),
10841
+ checked: isCurrent
10842
+ });
10843
+ }
10844
+ #refreshCompactOptionPresentation(opt, item, index, isCurrent) {
10845
+ const wrap = this.#ensureOptionIconSlot(opt);
10846
+ this.#renderCompactOptionIcon(wrap, item, index, isCurrent);
10847
+ this.#syncCompactStateAttributes(opt, item, isCurrent);
10848
+ }
10849
+ #resolveCurrentIndex(totalItems, getCheckedItemIndex, getFirstActiveItemIndex) {
10850
+ if (totalItems <= 0) {
10851
+ return -1;
10852
+ }
10853
+ const checkedIndex = getCheckedItemIndex();
10854
+ if (checkedIndex >= 0 && checkedIndex < totalItems) {
10855
+ return checkedIndex;
10856
+ }
10857
+ const firstActiveIndex = getFirstActiveItemIndex();
10858
+ if (firstActiveIndex >= 0 && firstActiveIndex < totalItems) {
10859
+ return firstActiveIndex;
10860
+ }
10861
+ return 0;
10862
+ }
10863
+ }
10864
+ function deriveStepStatuses(items, params) {
10865
+ const { noCompletionOrder, progressValue } = params;
10866
+ if (noCompletionOrder) {
10867
+ return items.map((item) => {
10868
+ if (item.disabled) {
10869
+ return "inactive";
10870
+ }
10871
+ if (item.complete) {
10872
+ return "complete";
10873
+ }
10874
+ return "incomplete";
10875
+ });
10876
+ }
10877
+ let progressIndex = items.findIndex((it) => it.value === progressValue);
10878
+ if (progressIndex < 0 && items.length > 0) {
10879
+ progressIndex = 0;
10880
+ }
10881
+ return items.map((_, i) => {
10882
+ if (progressIndex < 0 || progressIndex < i) {
10883
+ return "inactive";
10884
+ }
10885
+ if (progressIndex > i) {
10886
+ return "complete";
10887
+ }
10888
+ return "incomplete";
10889
+ });
10890
+ }
10891
+ function computeOrientationLayout(params) {
10892
+ const {
10893
+ noAutoOrientation,
10894
+ containerWidth,
10895
+ wrapperScrollWidth
10896
+ } = params;
10897
+ if (noAutoOrientation) {
10898
+ return {
10899
+ isHorizontal: true,
10900
+ dataOrientation: "horizontal",
10901
+ mode: "horizontal"
10902
+ };
10903
+ }
10904
+ const safeWidth = Math.max(containerWidth, 1);
10905
+ const isHorizontal = wrapperScrollWidth <= safeWidth;
10906
+ if (isHorizontal) {
10907
+ return {
10908
+ isHorizontal: true,
10909
+ dataOrientation: "horizontal",
10910
+ mode: "horizontal"
10911
+ };
10912
+ }
10913
+ return {
10914
+ isHorizontal: false,
10915
+ dataOrientation: "vertical",
10916
+ mode: "compact"
10917
+ };
10918
+ }
10919
+ class OrientationScheduler {
10920
+ constructor(run) {
10921
+ this.run = run;
10922
+ }
10923
+ #rafId = null;
10924
+ schedule() {
10925
+ if (this.#rafId !== null) {
10926
+ cancelAnimationFrame(this.#rafId);
10927
+ }
10928
+ this.#rafId = requestAnimationFrame(() => {
10929
+ this.#rafId = null;
10930
+ this.run();
10931
+ });
10932
+ }
10933
+ cancel() {
10934
+ if (this.#rafId !== null) {
10935
+ cancelAnimationFrame(this.#rafId);
10936
+ this.#rafId = null;
10937
+ }
10938
+ }
10939
+ }
10940
+ const TAG_STEP_SEPARATOR_ICON = "sinch-icon";
10941
+ const ATTR_STEP_SEPARATOR = "data-nectary-progress-stepper-v2-separator";
10942
+ function isStepSeparatorNode(el) {
10943
+ return el instanceof HTMLElement && el.tagName.toLowerCase() === TAG_STEP_SEPARATOR_ICON && el.hasAttribute(ATTR_STEP_SEPARATOR);
10944
+ }
10945
+ function separatorsPlacementValid(items) {
10946
+ for (let i = 0; i < items.length - 1; i++) {
10947
+ const between = items[i].nextElementSibling;
10948
+ if (!isStepSeparatorNode(between)) {
10949
+ return false;
10950
+ }
10951
+ if (between.nextElementSibling !== items[i + 1]) {
10952
+ return false;
10953
+ }
10954
+ }
10955
+ return true;
10956
+ }
10957
+ function createStepSeparator(anchor) {
10958
+ const icon = createScopedElement(anchor, TAG_STEP_SEPARATOR_ICON);
10959
+ icon.setAttribute(ATTR_STEP_SEPARATOR, "");
10960
+ icon.setAttribute("icons-version", "2");
10961
+ icon.setAttribute("name", "fa-chevron-right");
10962
+ icon.setAttribute("aria-hidden", "true");
10963
+ icon.setAttribute("tabindex", "-1");
10964
+ return icon;
10965
+ }
10966
+ function syncStepSeparators(host, itemTagName) {
10967
+ const normalizedItemTagName = itemTagName.toLowerCase();
10968
+ const items = [...host.children].filter(
10969
+ (el) => el.tagName.toLowerCase() === normalizedItemTagName
10970
+ );
10971
+ const separators = [...host.children].filter(isStepSeparatorNode);
10972
+ if (items.length <= 1) {
10973
+ separators.forEach((n) => n.remove());
10974
+ return;
10975
+ }
10976
+ if (separators.length === items.length - 1 && separatorsPlacementValid(items)) {
10977
+ return;
10978
+ }
10979
+ separators.forEach((n) => n.remove());
10980
+ for (let i = 0; i < items.length - 1; i++) {
10981
+ items[i].insertAdjacentElement("afterend", createStepSeparator(host));
10982
+ }
10983
+ }
10984
+ const templateHTML$u = '<style>:host{display:block;position:relative}#wrapper{display:flex;width:100%;align-items:stretch}#wrapper[data-orientation=horizontal]{flex-direction:row}#wrapper[data-orientation=horizontal] ::slotted(sinch-progress-stepper-item-v2){flex:0 0 auto;align-self:stretch;min-width:0}#wrapper[data-orientation=horizontal] ::slotted(sinch-icon[data-nectary-progress-stepper-v2-separator]){display:flex;flex-shrink:0;align-items:center;align-self:center;box-sizing:border-box;min-inline-size:24px;padding-inline:4px;pointer-events:none;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-progress-stepper-v2-step-color-chevron)}#wrapper[data-orientation=vertical] ::slotted(sinch-icon[data-nectary-progress-stepper-v2-separator]){display:none!important}:host(:dir(rtl)) #wrapper[data-orientation=horizontal] ::slotted(sinch-icon[data-nectary-progress-stepper-v2-separator]){transform:scaleX(-1)}#wrapper[data-orientation=vertical]{position:absolute;width:100%;max-width:100%;height:0;overflow:hidden;visibility:hidden;pointer-events:none;flex-direction:row;align-items:stretch}#wrapper[data-orientation=vertical] ::slotted(sinch-progress-stepper-item-v2){flex:0 0 auto}#menu-wrapper{display:none;width:100%}#menu-wrapper[data-visible=true]{display:block;width:100%}#menu-wrapper[data-visible=true] sinch-pop{width:100%}#menu-wrapper[data-visible=true] #compact-stepper-pop-panel-gap{position:relative;padding-top:0;width:fit-content;min-width:100%;box-sizing:border-box}#menu-wrapper[data-visible=true] #compact-stepper-pop-panel{background-color:var(--sinch-comp-progress-stepper-v2-step-color-compact-background);border:1px solid var(--sinch-comp-progress-stepper-v2-step-color-compact-border);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}#menu-wrapper[data-visible=true] #compact-stepper-trigger{all:unset;display:flex;align-items:center;gap:8px;width:100%;max-width:100%;min-height:var(--sinch-comp-button-size-container-l);padding:8px 10px;box-sizing:border-box;border:1px solid var(--sinch-comp-progress-stepper-v2-step-color-compact-border);border-radius:var(--sinch-comp-popover-shape-radius);background-color:var(--sinch-comp-progress-stepper-v2-step-color-compact-background);cursor:pointer;user-select:none}#menu-wrapper[data-visible=true] #compact-stepper-trigger:focus-visible{outline:2px solid var(--sinch-sys-color-focus);outline-offset:2px}#menu-wrapper[data-visible=true] #compact-stepper-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:start;font:var(--sinch-comp-progress-stepper-v2-step-font-label-initial);color:var(--sinch-comp-progress-stepper-v2-step-color-complete-label-initial)}#menu-wrapper[data-visible=true] #compact-stepper-chevron{flex-shrink:0;color:var(--sinch-comp-progress-stepper-v2-step-color-compact-chevron);pointer-events:none;--sinch-global-color-icon:currentcolor;--sinch-global-size-icon:24px}#menu-wrapper[data-visible=true] #compact-stepper-counter{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;height:24px;min-height:24px;padding:2px 9px;border:none;border-radius:var(--sinch-comp-progress-stepper-v2-step-shape-radius-indicator);background-color:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-icon-container-initial);color:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-icon-initial);user-select:none;white-space:nowrap;font:var(--sinch-sys-font-body-s);line-height:1}#menu-wrapper[data-visible=true] #compact-stepper-trigger[data-step-invalid] #compact-stepper-counter{background-color:var(--sinch-comp-progress-stepper-v2-step-color-invalid-icon-container-initial);color:var(--sinch-comp-progress-stepper-v2-step-color-invalid-icon-initial)}#menu-wrapper[data-visible=true] #compact-stepper-trigger[data-step-status=complete]:not([data-step-invalid]) #compact-stepper-counter{background-color:var(--sinch-comp-progress-stepper-v2-step-color-complete-icon-container-initial);color:var(--sinch-comp-progress-stepper-v2-step-color-complete-icon-initial)}#menu-wrapper[data-visible=true] sinch-action-menu{display:block;width:100%;box-sizing:border-box}#menu-wrapper[data-visible=true] sinch-action-menu-option{width:100%;box-sizing:border-box;outline:0;-webkit-tap-highlight-color:transparent;--sinch-comp-text-align:start}#menu-wrapper[data-visible=true] sinch-action-menu-option:focus,#menu-wrapper[data-visible=true] sinch-action-menu-option:focus-visible{outline:0}#menu-wrapper[data-visible=true] sinch-action-menu-option:is([data-step-status=incomplete],[data-step-status=inactive]):not([data-step-invalid]){--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-initial);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-label-initial);--sinch-comp-action-menu-color-default-background-hover:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-background-hover);--sinch-comp-action-menu-color-disabled-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-label-initial)}#menu-wrapper[data-visible=true] sinch-action-menu-option:is([data-step-status=incomplete],[data-step-status=inactive]):not([data-step-invalid])[data-step-checked]{--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-current);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-incomplete-label-current)}#menu-wrapper[data-visible=true] sinch-action-menu-option[data-step-status=complete]:not([data-step-invalid]){--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-initial);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-complete-label-initial);--sinch-comp-action-menu-color-default-background-hover:var(--sinch-comp-progress-stepper-v2-step-color-complete-background-hover)}#menu-wrapper[data-visible=true] sinch-action-menu-option[data-step-status=complete]:not([data-step-invalid])[data-step-checked]{--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-current);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-complete-label-current)}#menu-wrapper[data-visible=true] sinch-action-menu-option[data-step-invalid]{--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-initial);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-invalid-label-initial);--sinch-comp-action-menu-color-default-background-hover:var(--sinch-comp-progress-stepper-v2-step-color-invalid-background-hover)}#menu-wrapper[data-visible=true] sinch-action-menu-option[data-step-invalid][data-step-checked]{--sinch-comp-action-menu-font-option:var(--sinch-comp-progress-stepper-v2-step-font-label-current);--sinch-comp-action-menu-color-default-text-initial:var(--sinch-comp-progress-stepper-v2-step-color-invalid-label-current)}</style><div id="wrapper" data-orientation="horizontal"><slot></slot></div><div id="menu-wrapper" data-visible="false"><sinch-pop id="compact-stepper-pop" inset="4" orientation="bottom-stretch" allow-scroll><button id="compact-stepper-trigger" slot="target" type="button" tabindex="0"><span id="compact-stepper-counter" aria-hidden="true"></span> <span id="compact-stepper-label"></span><sinch-icon id="compact-stepper-chevron" icons-version="2" name="fa-chevron-down" aria-hidden="true"></sinch-icon></button><div id="compact-stepper-pop-panel-gap" slot="content"><div id="compact-stepper-pop-panel"><sinch-action-menu></sinch-action-menu></div></div></sinch-pop></div>';
10985
+ const template$u = document.createElement("template");
10986
+ template$u.innerHTML = templateHTML$u;
10987
+ const ITEM_ATTR_FILTER = [
10988
+ "text",
10989
+ "invalid",
10990
+ "value",
10991
+ "complete",
10992
+ "disabled",
10993
+ ATTR_PROGRESS_STEPPER_ITEM_STATUS$1,
10994
+ "data-checked"
10995
+ ];
10996
+ const ITEM_ATTR_RECOMPUTE_STEP_STATUS = /* @__PURE__ */ new Set(["complete", "disabled", "value"]);
10997
+ const ATTR_PROGRESS_STEPPER_ITEM_INDEX = "data-step-index";
10998
+ const ATTR_PROGRESS_STEPPER_ITEM_FORCE_FOCUS_VISIBLE = "data-force-focus-visible";
10999
+ class ProgressStepperV2 extends NectaryElement {
11000
+ #$slot;
11001
+ #$wrapper;
11002
+ #$menuWrapper;
11003
+ #$actionMenu;
11004
+ #$compactPop;
11005
+ #$compactTrigger;
11006
+ #$compactLabel;
11007
+ #$compactCounter;
11008
+ #controller = null;
11009
+ #$items = [];
11010
+ #isGoingToFocusItem = false;
11011
+ #resizeObserver;
11012
+ #isHorizontal = true;
11013
+ #usesCompactActionMenu = false;
11014
+ #itemAttrObserver = null;
11015
+ #childListObserver = null;
11016
+ #orientationScheduler = new OrientationScheduler(() => this.#scheduleRender({ orientation: true }));
11017
+ #renderQueued = false;
11018
+ #renderNeedsItems = false;
11019
+ #renderNeedsValue = false;
11020
+ #renderNeedsStepStatuses = false;
11021
+ #renderNeedsOrientation = false;
11022
+ #renderNeedsCompactSync = false;
11023
+ #renderShouldFocusValue = false;
11024
+ #compactController;
11025
+ constructor() {
11026
+ super();
11027
+ const shadowRoot = this.attachShadow();
11028
+ shadowRoot.appendChild(template$u.content.cloneNode(true));
11029
+ this.#$slot = shadowRoot.querySelector("slot:not([name])");
11030
+ this.#$wrapper = shadowRoot.querySelector("#wrapper");
11031
+ this.#$menuWrapper = shadowRoot.querySelector("#menu-wrapper");
11032
+ this.#$compactPop = shadowRoot.querySelector("#compact-stepper-pop");
11033
+ this.#$compactTrigger = shadowRoot.querySelector("#compact-stepper-trigger");
11034
+ this.#$compactLabel = shadowRoot.querySelector("#compact-stepper-label");
11035
+ this.#$compactCounter = shadowRoot.querySelector("#compact-stepper-counter");
11036
+ this.#$actionMenu = shadowRoot.querySelector("sinch-action-menu");
11037
+ this.#compactController = new ProgressStepperCompactController({
11038
+ actionMenu: this.#$actionMenu,
11039
+ pop: this.#$compactPop,
11040
+ trigger: this.#$compactTrigger,
11041
+ label: this.#$compactLabel,
11042
+ counter: this.#$compactCounter
11043
+ });
11044
+ this.#resizeObserver = new ResizeObserver(this.#onResize);
11045
+ }
11046
+ connectedCallback() {
11047
+ this.setAttribute("data-orientation", "horizontal");
11048
+ this.#controller = new AbortController();
11049
+ const { signal } = this.#controller;
11050
+ const options = { signal };
11051
+ this.#updateHostAriaRole();
11052
+ this.#$slot.addEventListener("click", this.#onOptionClick, options);
11053
+ this.#$slot.addEventListener("keydown", this.#onOptionKeydown, options);
11054
+ this.addEventListener("focusout", this.#onStepperFocusOut, { ...options, capture: true });
11055
+ this.addEventListener("-change", this.#onChangeReactHandler, options);
11056
+ this.addEventListener("focusin", this.#onHostFocusInCompactOnly, options);
11057
+ this.#$compactTrigger.addEventListener("click", this.#onCompactTriggerClick, options);
11058
+ this.#$compactPop.addEventListener("-close", this.#onCompactPopoverClose, options);
11059
+ this.#compactController.connect(signal);
11060
+ this.#resizeObserver.observe(this);
11061
+ this.#resizeObserver.observe(this.#$wrapper);
11062
+ this.#setupChildListObserver();
11063
+ this.#primeAssignedSlotStepStatuses();
11064
+ window.addEventListener("resize", this.#onResize, { signal });
11065
+ queueMicrotask(() => {
11066
+ this.#$slot.addEventListener("slotchange", this.#onSlotChange, options);
11067
+ this.#scheduleRender({ items: true });
11068
+ });
11069
+ }
11070
+ disconnectedCallback() {
11071
+ this.#orientationScheduler.cancel();
11072
+ this.#controller.abort();
11073
+ this.#controller = null;
11074
+ this.#resizeObserver.disconnect();
11075
+ this.#teardownItemAttrObserver();
11076
+ this.#teardownChildListObserver();
11077
+ }
11078
+ static get observedAttributes() {
11079
+ return [
11080
+ "value",
11081
+ "progressvalue",
11082
+ "nocompletionorder",
11083
+ "noautoorientation",
11084
+ "aria-label",
11085
+ "compact-counter-format",
11086
+ "compact-trigger-aria-label-format"
11087
+ ];
11088
+ }
11089
+ attributeChangedCallback(name, _, _newVal) {
11090
+ switch (name) {
11091
+ case "value": {
11092
+ const activeElement = document.activeElement;
11093
+ const shouldFocusValue = activeElement === this || activeElement != null && this.contains(activeElement);
11094
+ this.#scheduleRender({
11095
+ value: true,
11096
+ compact: true,
11097
+ focusValue: shouldFocusValue
11098
+ });
11099
+ break;
11100
+ }
11101
+ case "progressvalue":
11102
+ case "nocompletionorder": {
11103
+ this.#scheduleRender({
11104
+ stepStatuses: true,
11105
+ compact: true
11106
+ });
11107
+ break;
11108
+ }
11109
+ case "noautoorientation": {
11110
+ this.#scheduleRender({
11111
+ orientation: true,
11112
+ compact: true
11113
+ });
11114
+ break;
11115
+ }
11116
+ case "aria-label":
11117
+ case "compact-counter-format":
11118
+ case "compact-trigger-aria-label-format": {
11119
+ this.#scheduleRender({ compact: true });
11120
+ break;
11121
+ }
11122
+ }
11123
+ }
11124
+ set value(value) {
11125
+ updateAttribute(this, "value", value);
11126
+ }
11127
+ get value() {
11128
+ return getAttribute(this, "value", "");
11129
+ }
11130
+ set progressValue(value) {
11131
+ updateAttribute(this, "progressvalue", value);
11132
+ }
11133
+ get progressValue() {
11134
+ return getAttribute(this, "progressvalue", "");
11135
+ }
11136
+ set noCompletionOrder(value) {
11137
+ updateBooleanAttribute(this, "nocompletionorder", value);
11138
+ }
11139
+ get noCompletionOrder() {
11140
+ return getBooleanAttribute(this, "nocompletionorder");
11141
+ }
11142
+ set noAutoOrientation(value) {
11143
+ updateBooleanAttribute(this, "noautoorientation", value);
11144
+ }
11145
+ get noAutoOrientation() {
11146
+ return getBooleanAttribute(this, "noautoorientation");
11147
+ }
11148
+ set compactCounterFormat(value) {
11149
+ updateAttribute(this, "compact-counter-format", value);
11150
+ }
11151
+ get compactCounterFormat() {
11152
+ return getAttribute(this, "compact-counter-format", "");
11153
+ }
11154
+ set compactTriggerAriaLabelFormat(value) {
11155
+ updateAttribute(this, "compact-trigger-aria-label-format", value);
11156
+ }
11157
+ get compactTriggerAriaLabelFormat() {
11158
+ return getAttribute(this, "compact-trigger-aria-label-format", "");
11159
+ }
11160
+ nthOptionRect(index) {
11161
+ if (this.#usesCompactActionMenu) {
11162
+ const $opt = this.#$actionMenu.children[index];
11163
+ if ($opt != null) {
11164
+ return getRect($opt);
11165
+ }
11166
+ return null;
11167
+ }
11168
+ const $el = this.#$items[index];
11169
+ if ($el != null) {
11170
+ return getRect($el);
11171
+ }
11172
+ return null;
11173
+ }
11174
+ #scheduleRender({
11175
+ items = false,
11176
+ value = false,
11177
+ stepStatuses = false,
11178
+ orientation = false,
11179
+ compact = false,
11180
+ focusValue = false
11181
+ }) {
11182
+ this.#renderNeedsItems ||= items;
11183
+ this.#renderNeedsValue ||= value;
11184
+ this.#renderNeedsStepStatuses ||= stepStatuses;
11185
+ this.#renderNeedsOrientation ||= orientation;
11186
+ this.#renderNeedsCompactSync ||= compact;
11187
+ this.#renderShouldFocusValue ||= focusValue;
11188
+ if (this.#renderQueued) {
11189
+ return;
11190
+ }
11191
+ this.#renderQueued = true;
11192
+ queueMicrotask(() => this.#flushRender());
11193
+ }
11194
+ #flushRender() {
11195
+ this.#renderQueued = false;
11196
+ const needsItems = this.#renderNeedsItems;
11197
+ let needsValue = this.#renderNeedsValue;
11198
+ let needsStepStatuses = this.#renderNeedsStepStatuses;
11199
+ let needsOrientation = this.#renderNeedsOrientation;
11200
+ let needsCompactSync = this.#renderNeedsCompactSync;
11201
+ const shouldFocusValue = this.#renderShouldFocusValue;
11202
+ this.#renderNeedsItems = false;
11203
+ this.#renderNeedsValue = false;
11204
+ this.#renderNeedsStepStatuses = false;
11205
+ this.#renderNeedsOrientation = false;
11206
+ this.#renderNeedsCompactSync = false;
11207
+ this.#renderShouldFocusValue = false;
11208
+ if (needsItems) {
11209
+ this.#$items = this.#getAssignedStepItems();
11210
+ this.#updateStepIndexes();
11211
+ this.#setupItemAttrObserver();
11212
+ needsValue = true;
11213
+ needsStepStatuses = true;
11214
+ needsOrientation = true;
11215
+ needsCompactSync = true;
11216
+ }
11217
+ if (needsValue) {
11218
+ this.#onValueChange(this.value, shouldFocusValue);
11219
+ }
11220
+ if (needsStepStatuses) {
11221
+ this.#syncStepItemStatuses();
11222
+ }
11223
+ if (needsValue || needsStepStatuses) {
11224
+ needsCompactSync = true;
11225
+ }
11226
+ if (needsOrientation) {
11227
+ this.#updateOrientation();
11228
+ needsCompactSync = true;
11229
+ }
11230
+ if (needsCompactSync) {
11231
+ this.#syncCompactMenuOptions();
11232
+ }
11233
+ }
11234
+ #onSlotChange = () => {
11235
+ this.#primeAssignedSlotStepStatuses();
11236
+ this.#scheduleRender({ items: true });
11237
+ };
11238
+ #updateStepIndexes() {
11239
+ for (let i = 0; i < this.#$items.length; i++) {
11240
+ this.#$items[i].setAttribute(ATTR_PROGRESS_STEPPER_ITEM_INDEX, String(i + 1));
11241
+ }
11242
+ }
11243
+ #getAssignedStepItems() {
11244
+ return [...this.#$slot.assignedElements()].filter(
11245
+ (el) => el.tagName.toLowerCase() === TAG_PROGRESS_STEPPER_ITEM
11246
+ );
11247
+ }
11248
+ #setupChildListObserver() {
11249
+ this.#teardownChildListObserver();
11250
+ this.#childListObserver = new MutationObserver(() => {
11251
+ this.#primeAssignedSlotStepStatuses();
11252
+ this.#scheduleRender({ items: true });
11253
+ });
11254
+ this.#childListObserver.observe(this, { childList: true });
11255
+ }
11256
+ #teardownChildListObserver() {
11257
+ this.#childListObserver?.disconnect();
11258
+ this.#childListObserver = null;
11259
+ }
11260
+ #onResize = () => {
11261
+ this.#orientationScheduler.schedule();
11262
+ };
11263
+ #updateHostAriaRole() {
11264
+ if (this.#usesCompactActionMenu) {
11265
+ this.setAttribute("role", "group");
11266
+ } else {
11267
+ this.setAttribute("role", "tablist");
11268
+ }
11269
+ }
11270
+ #teardownItemAttrObserver() {
11271
+ this.#itemAttrObserver?.disconnect();
11272
+ this.#itemAttrObserver = null;
11273
+ }
11274
+ #setupItemAttrObserver() {
11275
+ this.#teardownItemAttrObserver();
11276
+ if (this.#$items.length === 0) {
11277
+ return;
11278
+ }
11279
+ this.#itemAttrObserver = new MutationObserver((records) => {
11280
+ const needsStepStatusSync = records.some(
11281
+ (r) => r.type === "attributes" && r.attributeName != null && ITEM_ATTR_RECOMPUTE_STEP_STATUS.has(r.attributeName)
11282
+ );
11283
+ if (needsStepStatusSync) {
11284
+ this.#scheduleRender({
11285
+ stepStatuses: true,
11286
+ compact: true
11287
+ });
11288
+ } else {
11289
+ this.#scheduleRender({ compact: true });
11290
+ }
11291
+ });
11292
+ for (const el of this.#$items) {
11293
+ this.#itemAttrObserver.observe(el, {
11294
+ attributes: true,
11295
+ attributeFilter: [...ITEM_ATTR_FILTER]
11296
+ });
11297
+ }
11298
+ }
11299
+ #updateOrientation() {
11300
+ if (!this.isConnected || !this.#$wrapper.isConnected) {
11301
+ return;
11302
+ }
11303
+ const containerWidth = Math.max(this.clientWidth, 1);
11304
+ syncStepSeparators(this, TAG_PROGRESS_STEPPER_ITEM);
11305
+ this.#$wrapper.dataset.orientation = "horizontal";
11306
+ this.#syncItemLayoutAttributes(true);
11307
+ let wrapperScrollWidth = 0;
11308
+ if (!this.noAutoOrientation) {
11309
+ void this.#$wrapper.offsetWidth;
11310
+ wrapperScrollWidth = this.#$wrapper.scrollWidth;
11311
+ }
11312
+ const layout = computeOrientationLayout({
11313
+ noAutoOrientation: this.noAutoOrientation,
11314
+ containerWidth,
11315
+ wrapperScrollWidth
11316
+ });
11317
+ const { isHorizontal, dataOrientation: orientation, mode } = layout;
11318
+ const usesCompactActionMenu = mode === "compact";
11319
+ this.#$wrapper.dataset.orientation = orientation;
11320
+ this.setAttribute("data-orientation", orientation);
11321
+ this.#$menuWrapper.dataset.visible = usesCompactActionMenu ? "true" : "false";
11322
+ this.#$wrapper.toggleAttribute("inert", usesCompactActionMenu);
11323
+ const prevCompact = this.#usesCompactActionMenu;
11324
+ this.#usesCompactActionMenu = usesCompactActionMenu;
11325
+ if (prevCompact !== usesCompactActionMenu) {
11326
+ this.#updateHostAriaRole();
11327
+ }
11328
+ if (isHorizontal !== this.#isHorizontal) {
11329
+ this.#isHorizontal = isHorizontal;
11330
+ }
11331
+ if (!isHorizontal) {
11332
+ this.#syncItemLayoutAttributes(false);
11333
+ }
11334
+ }
11335
+ #syncItemLayoutAttributes(isHorizontal) {
11336
+ const layout = isHorizontal ? "horizontal" : "vertical";
11337
+ for (const item of this.#$items) {
11338
+ updateAttribute(item, ATTR_PROGRESS_STEPPER_ITEM_LAYOUT, layout);
11339
+ }
11340
+ }
11341
+ #onCompactTriggerClick = () => {
11342
+ this.#compactController.onTriggerClick(this.#usesCompactActionMenu);
11343
+ };
11344
+ #onCompactPopoverClose = () => {
11345
+ this.#compactController.onPopoverClose();
11346
+ };
11347
+ #syncCompactMenuOptions() {
11348
+ this.#compactController.sync({
11349
+ usesCompactActionMenu: this.#usesCompactActionMenu,
11350
+ items: this.#$items,
11351
+ hostAriaLabel: this.getAttribute("aria-label"),
11352
+ compactCounterFormat: getAttribute(this, "compact-counter-format", ""),
11353
+ compactTriggerAriaLabelFormat: getAttribute(this, "compact-trigger-aria-label-format", ""),
11354
+ getCheckedItemIndex: () => this.#getCheckedItemIndex(),
11355
+ getFirstActiveItemIndex: () => this.#getFirstActiveItemIndex(),
11356
+ onChange: (value) => {
11357
+ this.dispatchEvent(new CustomEvent("-change", {
11358
+ detail: value
11359
+ }));
11360
+ }
11361
+ });
11362
+ }
11363
+ #onOptionClick = (e) => {
11364
+ if (this.#usesCompactActionMenu) {
11365
+ return;
11366
+ }
11367
+ this.#clearForcedFocusVisible();
11368
+ const target = getTargetByAttribute(e, "value");
11369
+ if (target !== null && isProgressStepperItemActive$1(target)) {
11370
+ this.dispatchEvent(new CustomEvent("-change", {
11371
+ detail: getAttribute(target, "value", "")
11372
+ }));
11373
+ }
11374
+ };
11375
+ #onValueChange(value, shouldFocus) {
11376
+ for (const $item of this.#$items) {
11377
+ const isChecked = value === getAttribute($item, "value");
11378
+ if (shouldFocus && isChecked && this.#isItemKeyboardFocusable($item)) {
11379
+ requestAnimationFrame(() => {
11380
+ if (this.#usesCompactActionMenu) {
11381
+ this.#$compactTrigger.focus();
11382
+ } else {
11383
+ $item.focus();
11384
+ syncProgressStepperItemsRovingTabIndexes(this.#$items);
11385
+ }
11386
+ });
11387
+ }
11388
+ setProgressStepperItemChecked$1($item, isChecked);
11389
+ }
11390
+ queueMicrotask(() => syncProgressStepperItemsRovingTabIndexes(this.#$items));
11391
+ }
11392
+ #isItemKeyboardFocusable(item) {
11393
+ return !getBooleanAttribute(item, "disabled") && isProgressStepperItemActive$1(item);
11394
+ }
11395
+ #findFirstKeyboardFocusableIndex() {
11396
+ for (let i = 0; i < this.#$items.length; i++) {
11397
+ if (this.#isItemKeyboardFocusable(this.#$items[i])) {
11398
+ return i;
11399
+ }
11400
+ }
11401
+ return -1;
11402
+ }
11403
+ #getArrowNavigationOriginIndex(e) {
11404
+ const focusIdx = getProgressStepperFocusedItemIndex(
11405
+ this.#$items,
11406
+ document.activeElement,
11407
+ e
11408
+ );
11409
+ if (focusIdx >= 0 && this.#isItemKeyboardFocusable(this.#$items[focusIdx])) {
11410
+ return focusIdx;
11411
+ }
11412
+ const checkedIdx = this.#getCheckedItemIndex();
11413
+ if (checkedIdx >= 0 && this.#isItemKeyboardFocusable(this.#$items[checkedIdx])) {
11414
+ return checkedIdx;
11415
+ }
11416
+ return this.#findFirstKeyboardFocusableIndex();
11417
+ }
11418
+ #focusStepItemAtIndex(nextIndex) {
11419
+ const item = this.#$items[nextIndex];
11420
+ if (!this.#isItemKeyboardFocusable(item)) {
11421
+ return;
11422
+ }
11423
+ this.#setForcedFocusVisible(item);
11424
+ const alreadyFocused = getProgressStepperFocusedItemIndex(this.#$items, document.activeElement) === nextIndex;
11425
+ if (!alreadyFocused) {
11426
+ this.#isGoingToFocusItem = true;
11427
+ item.focus();
11428
+ }
11429
+ syncProgressStepperItemsRovingTabIndexes(this.#$items);
11430
+ }
11431
+ #focusNextItem(e) {
11432
+ if (this.#usesCompactActionMenu) {
11433
+ return;
11434
+ }
11435
+ const origin = this.#getArrowNavigationOriginIndex(e);
11436
+ if (origin < 0) {
11437
+ return;
11438
+ }
11439
+ for (let i = 0; i < this.#$items.length; i++) {
11440
+ const nextIndex = (origin + 1 + i) % this.#$items.length;
11441
+ if (this.#isItemKeyboardFocusable(this.#$items[nextIndex])) {
11442
+ this.#focusStepItemAtIndex(nextIndex);
11443
+ break;
11444
+ }
11445
+ }
11446
+ }
11447
+ #focusPrevItem(e) {
11448
+ if (this.#usesCompactActionMenu) {
11449
+ return;
11450
+ }
11451
+ const origin = this.#getArrowNavigationOriginIndex(e);
11452
+ if (origin < 0) {
11453
+ return;
11454
+ }
11455
+ for (let i = 0; i < this.#$items.length; i++) {
11456
+ const nextIndex = (origin - i - 1 + this.#$items.length) % this.#$items.length;
11457
+ if (this.#isItemKeyboardFocusable(this.#$items[nextIndex])) {
11458
+ this.#focusStepItemAtIndex(nextIndex);
11459
+ break;
11460
+ }
11461
+ }
11462
+ }
11463
+ /**
11464
+ * Apply derived `data-status` before the queued `#flushRender` microtask so styling/state match
11465
+ * assigned slot items on the first paint (frameworks may leave `data-status` as `""` briefly).
11466
+ */
11467
+ #primeAssignedSlotStepStatuses() {
11468
+ this.#deriveAndApplyStepStatuses(this.#getAssignedStepItems());
11469
+ }
11470
+ #deriveAndApplyStepStatuses($items) {
11471
+ if ($items.length === 0) {
11472
+ return;
11473
+ }
11474
+ const snapshots = $items.map((item) => ({
11475
+ value: getAttribute(item, "value", ""),
11476
+ disabled: getBooleanAttribute(item, "disabled"),
11477
+ complete: getBooleanAttribute(item, "complete")
11478
+ }));
11479
+ const statuses = deriveStepStatuses(snapshots, {
11480
+ noCompletionOrder: this.noCompletionOrder,
11481
+ progressValue: this.progressValue
11482
+ });
11483
+ for (let i = 0; i < $items.length; i++) {
11484
+ setProgressStepperItemStatus$1($items[i], statuses[i]);
11485
+ }
11486
+ }
11487
+ #syncStepItemStatuses() {
11488
+ this.#deriveAndApplyStepStatuses(this.#$items);
11489
+ }
11490
+ #getCheckedItemIndex() {
11491
+ for (let i = 0; i < this.#$items.length; i++) {
11492
+ if (isProgressStepperItemChecked$1(this.#$items[i])) {
11493
+ return i;
11494
+ }
11495
+ }
11496
+ return -1;
11497
+ }
11498
+ #getFirstActiveItemIndex() {
11499
+ for (let i = 0; i < this.#$items.length; i++) {
11500
+ if (isProgressStepperItemActive$1(this.#$items[i])) {
11501
+ return i;
11502
+ }
11503
+ }
11504
+ return -1;
11505
+ }
11506
+ #onOptionKeydown = (e) => {
11507
+ if (this.#usesCompactActionMenu) {
11508
+ return;
11509
+ }
11510
+ switch (e.code) {
11511
+ case "Enter":
11512
+ case "Space": {
11513
+ e.preventDefault();
11514
+ getTargetByAttribute(e, "value")?.click();
11515
+ break;
11516
+ }
11517
+ case "ArrowRight": {
11518
+ e.preventDefault();
11519
+ this.#focusNextItem(e);
11520
+ break;
11521
+ }
11522
+ case "ArrowLeft": {
11523
+ e.preventDefault();
11524
+ this.#focusPrevItem(e);
11525
+ break;
11526
+ }
11527
+ }
11528
+ };
11529
+ #onStepperFocusOut = (e) => {
11530
+ if (this.#usesCompactActionMenu) {
11531
+ return;
11532
+ }
11533
+ if (this.#isGoingToFocusItem) {
11534
+ this.#isGoingToFocusItem = false;
11535
+ return;
11536
+ }
11537
+ const related = e.relatedTarget;
11538
+ if (related instanceof Element && getProgressStepperFocusedItemIndex(this.#$items, related) >= 0) {
11539
+ return;
11540
+ }
11541
+ queueMicrotask(() => {
11542
+ if (this.#usesCompactActionMenu) {
11543
+ return;
11544
+ }
11545
+ const active = document.activeElement;
11546
+ if (active instanceof Element && getProgressStepperFocusedItemIndex(this.#$items, active) >= 0) {
11547
+ return;
11548
+ }
11549
+ this.#clearForcedFocusVisible();
11550
+ syncProgressStepperItemsRovingTabIndexes(this.#$items);
11551
+ });
11552
+ };
11553
+ #setForcedFocusVisible(nextItem) {
11554
+ for (const item of this.#$items) {
11555
+ if (item === nextItem) {
11556
+ item.setAttribute(ATTR_PROGRESS_STEPPER_ITEM_FORCE_FOCUS_VISIBLE, "");
11557
+ } else {
11558
+ item.removeAttribute(ATTR_PROGRESS_STEPPER_ITEM_FORCE_FOCUS_VISIBLE);
11559
+ }
11560
+ }
11561
+ }
11562
+ #clearForcedFocusVisible() {
11563
+ for (const item of this.#$items) {
11564
+ item.removeAttribute(ATTR_PROGRESS_STEPPER_ITEM_FORCE_FOCUS_VISIBLE);
11565
+ }
11566
+ }
11567
+ #onChangeReactHandler = (e) => {
11568
+ getReactEventHandler(this, "on-change")?.(e);
11569
+ getReactEventHandler(this, "onChange")?.(e);
11570
+ };
11571
+ #onHostFocusInCompactOnly = (e) => {
11572
+ if (e.target !== this) {
11573
+ return;
11574
+ }
11575
+ if (!this.#usesCompactActionMenu) {
11576
+ return;
11577
+ }
11578
+ this.#$compactTrigger.focus();
11579
+ };
11580
+ }
11581
+ defineCustomElement(TAG_PROGRESS_STEPPER, ProgressStepperV2);
10097
11582
  const templateHTML$t = '<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>';
10098
11583
  const template$t = document.createElement("template");
10099
11584
  template$t.innerHTML = templateHTML$t;
@@ -10318,8 +11803,9 @@ class Progress extends NectaryElement {
10318
11803
  attributeChangedCallback(name, oldVal, newVal) {
10319
11804
  switch (name) {
10320
11805
  case "value": {
10321
- const int = attrValueToInteger(newVal, { min: 0, max: 100 }) ?? 0;
10322
- this.#$bar.style.width = `${int}%`;
11806
+ const float = attrValueToFloat(newVal, { min: 0, max: 100, fractionDigits: 2 }) ?? "0";
11807
+ const int = parseInt(float);
11808
+ this.#$bar.style.width = `${float}%`;
10323
11809
  this.#$text.textContent = Intl.NumberFormat(navigator.language, { style: "percent" }).format(int / 100);
10324
11810
  this.setAttribute("valuenow", int !== null ? String(int) : "0");
10325
11811
  this.setAttribute("aria-valuenow", int !== null ? String(int) : "0");
@@ -16334,6 +17820,7 @@ export {
16334
17820
  Link,
16335
17821
  List,
16336
17822
  ListItem,
17823
+ OrientationScheduler,
16337
17824
  Pagination,
16338
17825
  PersistentOverlay,
16339
17826
  Pop,
@@ -16341,6 +17828,8 @@ export {
16341
17828
  Progress,
16342
17829
  ProgressStepper,
16343
17830
  ProgressStepperItem,
17831
+ ProgressStepperItemV2,
17832
+ ProgressStepperV2,
16344
17833
  Radio,
16345
17834
  RadioOption,
16346
17835
  RichText,
@@ -16379,5 +17868,7 @@ export {
16379
17868
  Toast,
16380
17869
  ToastManager,
16381
17870
  Toggle,
16382
- Tooltip
17871
+ Tooltip,
17872
+ computeOrientationLayout,
17873
+ deriveStepStatuses
16383
17874
  };