@nyaruka/temba-components 0.33.1 → 0.33.3

package/CHANGELOG.md

@@ -4,8 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.33.3](https://github.com/nyaruka/temba-components/compare/v0.33.2...v0.33.3)
+
+- Tweak tab alignment, nicer hovers [`#216`](https://github.com/nyaruka/temba-components/pull/216)
+- Add link icon [`ae8d181`](https://github.com/nyaruka/temba-components/commit/ae8d181134287e11b6b11206e66eaa4df7cf41a0)
+
+#### [v0.33.2](https://github.com/nyaruka/temba-components/compare/v0.33.1...v0.33.2)
+
+> 10 November 2022
+
+- Update some icon names [`233c27c`](https://github.com/nyaruka/temba-components/commit/233c27caf281e3bbd0e8174e9b9a1d8951a4bfb3)
+
 #### [v0.33.1](https://github.com/nyaruka/temba-components/compare/v0.33.0...v0.33.1)
 
+> 9 November 2022
+
 - Restyle icon names [`#214`](https://github.com/nyaruka/temba-components/pull/214)
 - Update screenshot [`306eca5`](https://github.com/nyaruka/temba-components/commit/306eca58674f76e172e46c101ea64920fe2c2638)
 
@@ -115,19 +128,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Allow null labels [`ca6e105`](https://github.com/nyaruka/temba-components/commit/ca6e10560fa3ee2099043d26ae1a11c43610d29e)
 - Fix checkboxes with no label [`0587ed9`](https://github.com/nyaruka/temba-components/commit/0587ed9fb6fd1833d2b669d3b6e0f8cb9d710557)
 
-#### [v0.31.0](https://github.com/nyaruka/temba-components/compare/v0.30.0...v0.31.0)
+#### [v0.31.0](https://github.com/nyaruka/temba-components/compare/v0.29.3...v0.31.0)
 
 > 23 August 2022
 
 - Add RunList component [`#191`](https://github.com/nyaruka/temba-components/pull/191)
 - fixed goofy checkbox label background hover [`#190`](https://github.com/nyaruka/temba-components/pull/190)
 - added trim for whitespace to remove goofy label background hover [`fd6ed1a`](https://github.com/nyaruka/temba-components/commit/fd6ed1aa961844d997376d025ff817725d63f1cb)
-
-#### [v0.30.0](https://github.com/nyaruka/temba-components/compare/v0.29.3...v0.30.0)
-
-> 23 August 2022
-
-- Add RunList component [`4135992`](https://github.com/nyaruka/temba-components/commit/41359924c09ed0b75f73207e7f182bebb325b5e3)
 - Remove comment, tweak formatting [`f31ac4b`](https://github.com/nyaruka/temba-components/commit/f31ac4b423b38d0feaf59a05a254f8aac726f4da)
 - Reduce wait for screenshot a bit [`1ef77ae`](https://github.com/nyaruka/temba-components/commit/1ef77aecb941e2cc0442308e580aa6a55920d127)
 
@@ -678,19 +685,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Create index build [`68cff93`](https://github.com/nyaruka/temba-components/commit/68cff937919ff4dec7a7764a9b60363d33f1209a)
 
-#### [v0.11.1](https://github.com/nyaruka/temba-components/compare/v0.11.0...v0.11.1)
+#### [v0.11.1](https://github.com/nyaruka/temba-components/compare/v0.10.3...v0.11.1)
 
 > 27 April 2021
 
 - Revert "Create bundle index" [`94b11ca`](https://github.com/nyaruka/temba-components/commit/94b11caecf0004f53c75780720548e0f1240908d)
-- Revert "version" [`ea3cd27`](https://github.com/nyaruka/temba-components/commit/ea3cd27f218c970b8ef018275c05d0802bd202b2)
-- version [`6a211a0`](https://github.com/nyaruka/temba-components/commit/6a211a0447d7f2c14954e8d9b97843daf8bca15b)
-
-#### [v0.11.0](https://github.com/nyaruka/temba-components/compare/v0.10.3...v0.11.0)
-
-> 27 April 2021
-
 - Create bundle index [`c39f230`](https://github.com/nyaruka/temba-components/commit/c39f2304271f2c437e87eab6918babe8191371de)
+- Revert "version" [`ea3cd27`](https://github.com/nyaruka/temba-components/commit/ea3cd27f218c970b8ef018275c05d0802bd202b2)
 
 #### [v0.10.3](https://github.com/nyaruka/temba-components/compare/v0.10.2...v0.10.3)
 

package/demo/index.html

@@ -189,7 +189,7 @@
 
       </temba-tab>
       
-      <temba-tab name="slider" icon="sliders">
+      <temba-tab name="slider" icon="sliders-02">
 
 
         <div class="example">
@@ -203,7 +203,7 @@
         </div>
 
       </temba-tab>
-      <temba-tab name="select" icon="credit-card">
+      <temba-tab name="select" icon="browser">
 
         <div class="example">
           <temba-select
@@ -281,7 +281,7 @@
         
       </temba-tab>
 
-      <temba-tab name="textinput" icon="edit">
+      <temba-tab name="textinput" icon="edit-05">
     
         <div class="example">
           <temba-textinput value="plain text"></temba-textinput>

package/dist/{253098e2.js → 7b0d8aca.js}

@@ -1,4 +1,4 @@
-function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s<3?o(r):s>3?o(e,i,r):o(e,i))||r);return s>3&&r&&Object.defineProperty(e,i,r),r}const e=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class o{constructor(t,e,n){if(this._$cssResult$=!0,n!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=n.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n.set(i,t))}return t}toString(){return this.cssText}}const s=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,i,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[n+1]),t[0]);return new o(n,t,i)},r=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,i))(e)})(t):t;var a;const l=window.trustedTypes,c=l?l.emptyScript:"",h=window.reactiveElementPolyfillSupport,u={toAttribute(t,e){switch(e){case Boolean:t=t?c:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},d=(t,e)=>e!==t&&(e==e||t==t),p={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:d};class m extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;null!==(e=this.h)&&void 0!==e||(this.h=[]),this.h.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const n=this._$Ep(i,e);void 0!==n&&(this._$Ev.set(n,i),t.push(n))})),t}static createProperty(t,e=p){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,n=this.getPropertyDescriptor(t,i,e);void 0!==n&&Object.defineProperty(this.prototype,t,n)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(n){const o=this[t];this[e]=n,this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||p}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(r(t))}else void 0!==t&&e.push(r(t));return e}static _$Ep(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const i=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{e?t.adoptedStyleSheets=i.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):i.forEach((e=>{const i=document.createElement("style"),n=window.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=e.cssText,t.appendChild(i)}))})(i,this.constructor.elementStyles),i}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EO(t,e,i=p){var n,o;const s=this.constructor._$Ep(t,i);if(void 0!==s&&!0===i.reflect){const r=(null!==(o=null===(n=i.converter)||void 0===n?void 0:n.toAttribute)&&void 0!==o?o:u.toAttribute)(e,i.type);this._$El=t,null==r?this.removeAttribute(s):this.setAttribute(s,r),this._$El=null}}_$AK(t,e){var i,n;const o=this.constructor,s=o._$Ev.get(t);if(void 0!==s&&this._$El!==s){const t=o.getPropertyOptions(s),r=t.converter,a=null!==(n=null!==(i=null==r?void 0:r.fromAttribute)&&void 0!==i?i:"function"==typeof r?r:null)&&void 0!==n?n:u.fromAttribute;this._$El=s,this[s]=a(e,t.type),this._$El=null}}requestUpdate(t,e,i){let n=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||d)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,i))):n=!1),!this.isUpdatePending&&n&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(i)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(i)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}var f;m.finalized=!0,m.elementProperties=new Map,m.elementStyles=[],m.shadowRootOptions={mode:"open"},null==h||h({ReactiveElement:m}),(null!==(a=globalThis.reactiveElementVersions)&&void 0!==a?a:globalThis.reactiveElementVersions=[]).push("1.3.4");const g=globalThis.trustedTypes,v=g?g.createPolicy("lit-html",{createHTML:t=>t}):void 0,y=`lit$${(Math.random()+"").slice(9)}$`,b="?"+y,_=`<${b}>`,x=document,w=(t="")=>x.createComment(t),k=t=>null===t||"object"!=typeof t&&"function"!=typeof t,S=Array.isArray,C=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,T=/-->/g,E=/>/g,$=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),A=/'/g,O=/"/g,M=/^(?:script|style|textarea|title)$/i,P=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),z=Symbol.for("lit-noChange"),I=Symbol.for("lit-nothing"),D=new WeakMap,N=x.createTreeWalker(x,129,null,!1),R=(t,e)=>{const i=t.length-1,n=[];let o,s=2===e?"<svg>":"",r=C;for(let e=0;e<i;e++){const i=t[e];let a,l,c=-1,h=0;for(;h<i.length&&(r.lastIndex=h,l=r.exec(i),null!==l);)h=r.lastIndex,r===C?"!--"===l[1]?r=T:void 0!==l[1]?r=E:void 0!==l[2]?(M.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=$):void 0!==l[3]&&(r=$):r===$?">"===l[0]?(r=null!=o?o:C,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?$:'"'===l[3]?O:A):r===O||r===A?r=$:r===T||r===E?r=C:(r=$,o=void 0);const u=r===$&&t[e+1].startsWith("/>")?" ":"";s+=r===C?i+_:c>=0?(n.push(a),i.slice(0,c)+"$lit$"+i.slice(c)+y+u):i+y+(-2===c?(n.push(void 0),e):u)}const a=s+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==v?v.createHTML(a):a,n]};class B{constructor({strings:t,_$litType$:e},i){let n;this.parts=[];let o=0,s=0;const r=t.length-1,a=this.parts,[l,c]=R(t,e);if(this.el=B.createElement(l,i),N.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(n=N.nextNode())&&a.length<r;){if(1===n.nodeType){if(n.hasAttributes()){const t=[];for(const e of n.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(y)){const i=c[s++];if(t.push(e),void 0!==i){const t=n.getAttribute(i.toLowerCase()+"$lit$").split(y),e=/([.?@])?(.*)/.exec(i);a.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?j:"?"===e[1]?H:"@"===e[1]?G:V})}else a.push({type:6,index:o})}for(const e of t)n.removeAttribute(e)}if(M.test(n.tagName)){const t=n.textContent.split(y),e=t.length-1;if(e>0){n.textContent=g?g.emptyScript:"";for(let i=0;i<e;i++)n.append(t[i],w()),N.nextNode(),a.push({type:2,index:++o});n.append(t[e],w())}}}else if(8===n.nodeType)if(n.data===b)a.push({type:2,index:o});else{let t=-1;for(;-1!==(t=n.data.indexOf(y,t+1));)a.push({type:7,index:o}),t+=y.length-1}o++}}static createElement(t,e){const i=x.createElement("template");return i.innerHTML=t,i}}function q(t,e,i=t,n){var o,s,r,a;if(e===z)return e;let l=void 0!==n?null===(o=i._$Cl)||void 0===o?void 0:o[n]:i._$Cu;const c=k(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==c&&(null===(s=null==l?void 0:l._$AO)||void 0===s||s.call(l,!1),void 0===c?l=void 0:(l=new c(t),l._$AT(t,i,n)),void 0!==n?(null!==(r=(a=i)._$Cl)&&void 0!==r?r:a._$Cl=[])[n]=l:i._$Cu=l),void 0!==l&&(e=q(t,l._$AS(t,e.values),l,n)),e}class Z{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:i},parts:n}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:x).importNode(i,!0);N.currentNode=o;let s=N.nextNode(),r=0,a=0,l=n[0];for(;void 0!==l;){if(r===l.index){let e;2===l.type?e=new F(s,s.nextSibling,this,t):1===l.type?e=new l.ctor(s,l.name,l.strings,this,t):6===l.type&&(e=new W(s,this,t)),this.v.push(e),l=n[++a]}r!==(null==l?void 0:l.index)&&(s=N.nextNode(),r++)}return o}m(t){let e=0;for(const i of this.v)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class F{constructor(t,e,i,n){var o;this.type=2,this._$AH=I,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=n,this._$C_=null===(o=null==n?void 0:n.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$C_}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=q(this,t,e),k(t)?t===I||null==t||""===t?(this._$AH!==I&&this._$AR(),this._$AH=I):t!==this._$AH&&t!==z&&this.T(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.k(t):(t=>S(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.S(t):this.T(t)}j(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.j(t))}T(t){this._$AH!==I&&k(this._$AH)?this._$AA.nextSibling.data=t:this.k(x.createTextNode(t)),this._$AH=t}$(t){var e;const{values:i,_$litType$:n}=t,o="number"==typeof n?this._$AC(t):(void 0===n.el&&(n.el=B.createElement(n.h,this.options)),n);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.m(i);else{const t=new Z(o,this),e=t.p(this.options);t.m(i),this.k(e),this._$AH=t}}_$AC(t){let e=D.get(t.strings);return void 0===e&&D.set(t.strings,e=new B(t)),e}S(t){S(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,n=0;for(const o of t)n===e.length?e.push(i=new F(this.j(w()),this.j(w()),this,this.options)):i=e[n],i._$AI(o),n++;n<e.length&&(this._$AR(i&&i._$AB.nextSibling,n),e.length=n)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$C_=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class V{constructor(t,e,i,n,o){this.type=1,this._$AH=I,this._$AN=void 0,this.element=t,this.name=e,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=I}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,n){const o=this.strings;let s=!1;if(void 0===o)t=q(this,t,e,0),s=!k(t)||t!==this._$AH&&t!==z,s&&(this._$AH=t);else{const n=t;let r,a;for(t=o[0],r=0;r<o.length-1;r++)a=q(this,n[i+r],e,r),a===z&&(a=this._$AH[r]),s||(s=!k(a)||a!==this._$AH[r]),a===I?t=I:t!==I&&(t+=(null!=a?a:"")+o[r+1]),this._$AH[r]=a}s&&!n&&this.P(t)}P(t){t===I?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class j extends V{constructor(){super(...arguments),this.type=3}P(t){this.element[this.name]=t===I?void 0:t}}const U=g?g.emptyScript:"";class H extends V{constructor(){super(...arguments),this.type=4}P(t){t&&t!==I?this.element.setAttribute(this.name,U):this.element.removeAttribute(this.name)}}class G extends V{constructor(t,e,i,n,o){super(t,e,i,n,o),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=q(this,t,e,0))&&void 0!==i?i:I)===z)return;const n=this._$AH,o=t===I&&n!==I||t.capture!==n.capture||t.once!==n.once||t.passive!==n.passive,s=t!==I&&(n===I||o);o&&this.element.removeEventListener(this.name,this,n),s&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class W{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){q(this,t)}}const K=window.litHtmlPolyfillSupport;var Y,J;null==K||K(B,F),(null!==(f=globalThis.litHtmlVersions)&&void 0!==f?f:globalThis.litHtmlVersions=[]).push("2.2.7");class X extends m{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{var n,o;const s=null!==(n=null==i?void 0:i.renderBefore)&&void 0!==n?n:e;let r=s._$litPart$;if(void 0===r){const t=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:null;s._$litPart$=r=new F(e.insertBefore(w(),t),t,void 0,null!=i?i:{})}return r._$AI(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return z}}X.finalized=!0,X._$litElement$=!0,null===(Y=globalThis.litElementHydrateSupport)||void 0===Y||Y.call(globalThis,{LitElement:X});const Q=globalThis.litElementPolyfillSupport;null==Q||Q({LitElement:X}),(null!==(J=globalThis.litElementVersions)&&void 0!==J?J:globalThis.litElementVersions=[]).push("3.2.2");class tt extends X{constructor(){super(...arguments),this.eles={}}getEventHandlers(){return[]}connectedCallback(){super.connectedCallback();for(const t of this.getEventHandlers())t.isDocument?document.addEventListener(t.event,t.method.bind(this)):this.addEventListener(t.event,t.method.bind(this))}disconnectedCallback(){for(const t of this.getEventHandlers())t.isDocument?document.removeEventListener(t.event,t.method):this.removeEventListener(t.event,t.method);super.disconnectedCallback()}fireEvent(t){return this.dispatchEvent(new Event(t,{bubbles:!0,composed:!0}))}fireCustomEvent(t,e={}){const i=new CustomEvent(t,{detail:e,bubbles:!0,composed:!0});return this.dispatchEvent(i)}dispatchEvent(t){super.dispatchEvent(t);const e=t.target;if(e){const i=e["-"+t.type];if(i)return i(t);return new Function("event",`with(document) {\n          with(this) {\n            let handler = ${e.getAttribute("-"+t.type)};\n            if(typeof handler === 'function') { \n              handler(event) ;\n            }\n          }\n        }`).call(e,t)}}closestElement(t,e=this){return function e(i){if(!i||i===document||i===window)return null;i.assignedSlot&&(i=i.assignedSlot);const n=i.closest(t);return n||e(i.getRootNode().host)}(e)}getDiv(t){let e=this.eles[t];return e||(e=this.shadowRoot.querySelector(t),e&&(this.eles[t]=e),e)}}const et=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function it(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):et(t,e)}var nt,ot;null===(nt=window.HTMLSlotElement)||void 0===nt||nt.prototype.assignedElements;class st extends tt{constructor(){super(...arguments),this.hiddenInputs=[],this.name="",this.values=[],this.value="",this.inputRoot=this,this.disabled=!1}setValue(t){t?this.setValues([t]):this.setValues([]),this.value=t}setValues(t){this.values=t,this.requestUpdate("values")}addValue(t){this.values.push(t),this.requestUpdate("values")}removeValue(t){this.values=this.values.filter((e=>e!==t)),this.requestUpdate("values")}popValue(){this.values.pop(),this.requestUpdate("values")}clear(){this.values=[],this.requestUpdate("values")}serializeValue(t){return JSON.stringify(t)}updateInputs(){for(let t=null;t=this.hiddenInputs.pop();)t.remove();for(const t of this.values){const e=document.createElement("input");e.setAttribute("type","hidden"),e.setAttribute("name",this.getAttribute("name")),e.setAttribute("value",this.serializeValue(t)),this.hiddenInputs.push(e),this.inputRoot.parentElement.appendChild(e)}}updated(t){super.updated(t),t.has("values")&&this.updateInputs()}}t([it({type:String})],st.prototype,"name",void 0),t([it({type:String,attribute:"help_text"})],st.prototype,"helpText",void 0),t([it({type:Boolean,attribute:"help_always"})],st.prototype,"helpAlways",void 0),t([it({type:Boolean,attribute:"widget_only"})],st.prototype,"widgetOnly",void 0),t([it({type:Boolean,attribute:"hide_label"})],st.prototype,"hideLabel",void 0),t([it({type:String})],st.prototype,"label",void 0),t([it({type:Array})],st.prototype,"errors",void 0),t([it({type:Array})],st.prototype,"values",void 0),t([it({type:String})],st.prototype,"value",void 0),t([it({attribute:!1})],st.prototype,"inputRoot",void 0),t([it({type:Boolean})],st.prototype,"disabled",void 0),function(t){t.account="user-01",t.active="play",t.add_note="file-02",t.airtime="bank-note-01",t.archive="archive",t.arrow_up="chevron-up",t.arrow_down="chevron-down",t.arrlow_left="chevron-left",t.arrow_right="chevron-right",t.attachment="paperclip",t.broadcast="announcement-01",t.call="phone-call-01",t.call_missed="phone-call-02",t.campaign="clock-refresh",t.check="check",t.checkbox="square",t.checkbox_checked="check-square",t.contact="user-01",t.contact_blocked="message-x-square",t.contact_stopped="slash-octagon",t.contact_updated="user-edit",t.copy="copy-04",t.delete="trash-03",t.delete_small="x",t.download="download-01",t.email="mail-01",t.error="alert-circle",t.event="zap",t.fields="user-edit",t.flow="flow",t.flow_interrupted="x-close",t.flow_ivr="phone-call-01",t.flow_message="message-square-02",t.flow_user="activity",t.group="users-01",t.group_smart="atom-01",t.help="help-circle",t.inbox="inbox-01",t.label="tag-01",t.language="globe-01",t.log="file-02",t.menu="menu-01",t.menu_collapse="chevron-left-double",t.message="message-square-02",t.org_active="credit-card-02",t.org_bulk="credit-card-plus",t.org_anonymous="glasses-01",t.org_suspended="slash-circle-01",t.org_verified="check-verified-02",t.org_flagged="flag-01",t.resthooks="share-07",t.restore="play",t.search="search-refraction",t.select_open="chevron-down",t.select_clear="x",t.service="magic-wand-01",t.settings="settings-02",t.staff="hard-drive",t.tickets="agent",t.tickets_all="archive",t.tickets_closed="check",t.tickets_mine="coffee",t.tickets_open="inbox-01",t.tickets_unassigned="inbox-01",t.two_factor_enabled="shield-02",t.two_factor_disabled="shield-01",t.trigger="signal-01",t.updated="edit-02",t.upload="upload-cloud-01",t.users="users-01",t.user_beta="shield-zap",t.webhook="link-external-01",t.workspace="message-chat-square",t.zendesk="zendesk"}(ot||(ot={}));class rt extends st{constructor(){super(...arguments),this.name="",this.disabled=!1,this.size=1.2,this.animateChange="pulse"}static get styles(){return s`
+function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s<3?o(r):s>3?o(e,i,r):o(e,i))||r);return s>3&&r&&Object.defineProperty(e,i,r),r}const e=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class o{constructor(t,e,n){if(this._$cssResult$=!0,n!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=n.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n.set(i,t))}return t}toString(){return this.cssText}}const s=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,i,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[n+1]),t[0]);return new o(n,t,i)},r=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,i))(e)})(t):t;var a;const l=window.trustedTypes,c=l?l.emptyScript:"",h=window.reactiveElementPolyfillSupport,u={toAttribute(t,e){switch(e){case Boolean:t=t?c:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},d=(t,e)=>e!==t&&(e==e||t==t),p={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:d};class m extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;null!==(e=this.h)&&void 0!==e||(this.h=[]),this.h.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const n=this._$Ep(i,e);void 0!==n&&(this._$Ev.set(n,i),t.push(n))})),t}static createProperty(t,e=p){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,n=this.getPropertyDescriptor(t,i,e);void 0!==n&&Object.defineProperty(this.prototype,t,n)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(n){const o=this[t];this[e]=n,this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||p}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(r(t))}else void 0!==t&&e.push(r(t));return e}static _$Ep(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const i=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{e?t.adoptedStyleSheets=i.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):i.forEach((e=>{const i=document.createElement("style"),n=window.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=e.cssText,t.appendChild(i)}))})(i,this.constructor.elementStyles),i}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EO(t,e,i=p){var n,o;const s=this.constructor._$Ep(t,i);if(void 0!==s&&!0===i.reflect){const r=(null!==(o=null===(n=i.converter)||void 0===n?void 0:n.toAttribute)&&void 0!==o?o:u.toAttribute)(e,i.type);this._$El=t,null==r?this.removeAttribute(s):this.setAttribute(s,r),this._$El=null}}_$AK(t,e){var i,n;const o=this.constructor,s=o._$Ev.get(t);if(void 0!==s&&this._$El!==s){const t=o.getPropertyOptions(s),r=t.converter,a=null!==(n=null!==(i=null==r?void 0:r.fromAttribute)&&void 0!==i?i:"function"==typeof r?r:null)&&void 0!==n?n:u.fromAttribute;this._$El=s,this[s]=a(e,t.type),this._$El=null}}requestUpdate(t,e,i){let n=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||d)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,i))):n=!1),!this.isUpdatePending&&n&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(i)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(i)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}var f;m.finalized=!0,m.elementProperties=new Map,m.elementStyles=[],m.shadowRootOptions={mode:"open"},null==h||h({ReactiveElement:m}),(null!==(a=globalThis.reactiveElementVersions)&&void 0!==a?a:globalThis.reactiveElementVersions=[]).push("1.3.4");const g=globalThis.trustedTypes,v=g?g.createPolicy("lit-html",{createHTML:t=>t}):void 0,y=`lit$${(Math.random()+"").slice(9)}$`,b="?"+y,_=`<${b}>`,x=document,w=(t="")=>x.createComment(t),k=t=>null===t||"object"!=typeof t&&"function"!=typeof t,S=Array.isArray,C=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,T=/-->/g,E=/>/g,$=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),A=/'/g,O=/"/g,M=/^(?:script|style|textarea|title)$/i,P=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),z=Symbol.for("lit-noChange"),I=Symbol.for("lit-nothing"),D=new WeakMap,N=x.createTreeWalker(x,129,null,!1),R=(t,e)=>{const i=t.length-1,n=[];let o,s=2===e?"<svg>":"",r=C;for(let e=0;e<i;e++){const i=t[e];let a,l,c=-1,h=0;for(;h<i.length&&(r.lastIndex=h,l=r.exec(i),null!==l);)h=r.lastIndex,r===C?"!--"===l[1]?r=T:void 0!==l[1]?r=E:void 0!==l[2]?(M.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=$):void 0!==l[3]&&(r=$):r===$?">"===l[0]?(r=null!=o?o:C,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?$:'"'===l[3]?O:A):r===O||r===A?r=$:r===T||r===E?r=C:(r=$,o=void 0);const u=r===$&&t[e+1].startsWith("/>")?" ":"";s+=r===C?i+_:c>=0?(n.push(a),i.slice(0,c)+"$lit$"+i.slice(c)+y+u):i+y+(-2===c?(n.push(void 0),e):u)}const a=s+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==v?v.createHTML(a):a,n]};class B{constructor({strings:t,_$litType$:e},i){let n;this.parts=[];let o=0,s=0;const r=t.length-1,a=this.parts,[l,c]=R(t,e);if(this.el=B.createElement(l,i),N.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(n=N.nextNode())&&a.length<r;){if(1===n.nodeType){if(n.hasAttributes()){const t=[];for(const e of n.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(y)){const i=c[s++];if(t.push(e),void 0!==i){const t=n.getAttribute(i.toLowerCase()+"$lit$").split(y),e=/([.?@])?(.*)/.exec(i);a.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?j:"?"===e[1]?H:"@"===e[1]?G:V})}else a.push({type:6,index:o})}for(const e of t)n.removeAttribute(e)}if(M.test(n.tagName)){const t=n.textContent.split(y),e=t.length-1;if(e>0){n.textContent=g?g.emptyScript:"";for(let i=0;i<e;i++)n.append(t[i],w()),N.nextNode(),a.push({type:2,index:++o});n.append(t[e],w())}}}else if(8===n.nodeType)if(n.data===b)a.push({type:2,index:o});else{let t=-1;for(;-1!==(t=n.data.indexOf(y,t+1));)a.push({type:7,index:o}),t+=y.length-1}o++}}static createElement(t,e){const i=x.createElement("template");return i.innerHTML=t,i}}function q(t,e,i=t,n){var o,s,r,a;if(e===z)return e;let l=void 0!==n?null===(o=i._$Cl)||void 0===o?void 0:o[n]:i._$Cu;const c=k(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==c&&(null===(s=null==l?void 0:l._$AO)||void 0===s||s.call(l,!1),void 0===c?l=void 0:(l=new c(t),l._$AT(t,i,n)),void 0!==n?(null!==(r=(a=i)._$Cl)&&void 0!==r?r:a._$Cl=[])[n]=l:i._$Cu=l),void 0!==l&&(e=q(t,l._$AS(t,e.values),l,n)),e}class Z{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:i},parts:n}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:x).importNode(i,!0);N.currentNode=o;let s=N.nextNode(),r=0,a=0,l=n[0];for(;void 0!==l;){if(r===l.index){let e;2===l.type?e=new F(s,s.nextSibling,this,t):1===l.type?e=new l.ctor(s,l.name,l.strings,this,t):6===l.type&&(e=new W(s,this,t)),this.v.push(e),l=n[++a]}r!==(null==l?void 0:l.index)&&(s=N.nextNode(),r++)}return o}m(t){let e=0;for(const i of this.v)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class F{constructor(t,e,i,n){var o;this.type=2,this._$AH=I,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=n,this._$C_=null===(o=null==n?void 0:n.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$C_}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=q(this,t,e),k(t)?t===I||null==t||""===t?(this._$AH!==I&&this._$AR(),this._$AH=I):t!==this._$AH&&t!==z&&this.T(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.k(t):(t=>S(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.S(t):this.T(t)}j(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.j(t))}T(t){this._$AH!==I&&k(this._$AH)?this._$AA.nextSibling.data=t:this.k(x.createTextNode(t)),this._$AH=t}$(t){var e;const{values:i,_$litType$:n}=t,o="number"==typeof n?this._$AC(t):(void 0===n.el&&(n.el=B.createElement(n.h,this.options)),n);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.m(i);else{const t=new Z(o,this),e=t.p(this.options);t.m(i),this.k(e),this._$AH=t}}_$AC(t){let e=D.get(t.strings);return void 0===e&&D.set(t.strings,e=new B(t)),e}S(t){S(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,n=0;for(const o of t)n===e.length?e.push(i=new F(this.j(w()),this.j(w()),this,this.options)):i=e[n],i._$AI(o),n++;n<e.length&&(this._$AR(i&&i._$AB.nextSibling,n),e.length=n)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$C_=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class V{constructor(t,e,i,n,o){this.type=1,this._$AH=I,this._$AN=void 0,this.element=t,this.name=e,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=I}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,n){const o=this.strings;let s=!1;if(void 0===o)t=q(this,t,e,0),s=!k(t)||t!==this._$AH&&t!==z,s&&(this._$AH=t);else{const n=t;let r,a;for(t=o[0],r=0;r<o.length-1;r++)a=q(this,n[i+r],e,r),a===z&&(a=this._$AH[r]),s||(s=!k(a)||a!==this._$AH[r]),a===I?t=I:t!==I&&(t+=(null!=a?a:"")+o[r+1]),this._$AH[r]=a}s&&!n&&this.P(t)}P(t){t===I?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class j extends V{constructor(){super(...arguments),this.type=3}P(t){this.element[this.name]=t===I?void 0:t}}const U=g?g.emptyScript:"";class H extends V{constructor(){super(...arguments),this.type=4}P(t){t&&t!==I?this.element.setAttribute(this.name,U):this.element.removeAttribute(this.name)}}class G extends V{constructor(t,e,i,n,o){super(t,e,i,n,o),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=q(this,t,e,0))&&void 0!==i?i:I)===z)return;const n=this._$AH,o=t===I&&n!==I||t.capture!==n.capture||t.once!==n.once||t.passive!==n.passive,s=t!==I&&(n===I||o);o&&this.element.removeEventListener(this.name,this,n),s&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class W{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){q(this,t)}}const K=window.litHtmlPolyfillSupport;var Y,J;null==K||K(B,F),(null!==(f=globalThis.litHtmlVersions)&&void 0!==f?f:globalThis.litHtmlVersions=[]).push("2.2.7");class X extends m{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{var n,o;const s=null!==(n=null==i?void 0:i.renderBefore)&&void 0!==n?n:e;let r=s._$litPart$;if(void 0===r){const t=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:null;s._$litPart$=r=new F(e.insertBefore(w(),t),t,void 0,null!=i?i:{})}return r._$AI(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return z}}X.finalized=!0,X._$litElement$=!0,null===(Y=globalThis.litElementHydrateSupport)||void 0===Y||Y.call(globalThis,{LitElement:X});const Q=globalThis.litElementPolyfillSupport;null==Q||Q({LitElement:X}),(null!==(J=globalThis.litElementVersions)&&void 0!==J?J:globalThis.litElementVersions=[]).push("3.2.2");class tt extends X{constructor(){super(...arguments),this.eles={}}getEventHandlers(){return[]}connectedCallback(){super.connectedCallback();for(const t of this.getEventHandlers())t.isDocument?document.addEventListener(t.event,t.method.bind(this)):this.addEventListener(t.event,t.method.bind(this))}disconnectedCallback(){for(const t of this.getEventHandlers())t.isDocument?document.removeEventListener(t.event,t.method):this.removeEventListener(t.event,t.method);super.disconnectedCallback()}fireEvent(t){return this.dispatchEvent(new Event(t,{bubbles:!0,composed:!0}))}fireCustomEvent(t,e={}){const i=new CustomEvent(t,{detail:e,bubbles:!0,composed:!0});return this.dispatchEvent(i)}dispatchEvent(t){super.dispatchEvent(t);const e=t.target;if(e){const i=e["-"+t.type];if(i)return i(t);return new Function("event",`with(document) {\n          with(this) {\n            let handler = ${e.getAttribute("-"+t.type)};\n            if(typeof handler === 'function') { \n              handler(event) ;\n            }\n          }\n        }`).call(e,t)}}closestElement(t,e=this){return function e(i){if(!i||i===document||i===window)return null;i.assignedSlot&&(i=i.assignedSlot);const n=i.closest(t);return n||e(i.getRootNode().host)}(e)}getDiv(t){let e=this.eles[t];return e||(e=this.shadowRoot.querySelector(t),e&&(this.eles[t]=e),e)}}const et=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function it(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):et(t,e)}var nt,ot;null===(nt=window.HTMLSlotElement)||void 0===nt||nt.prototype.assignedElements;class st extends tt{constructor(){super(...arguments),this.hiddenInputs=[],this.name="",this.values=[],this.value="",this.inputRoot=this,this.disabled=!1}setValue(t){t?this.setValues([t]):this.setValues([]),this.value=t}setValues(t){this.values=t,this.requestUpdate("values")}addValue(t){this.values.push(t),this.requestUpdate("values")}removeValue(t){this.values=this.values.filter((e=>e!==t)),this.requestUpdate("values")}popValue(){this.values.pop(),this.requestUpdate("values")}clear(){this.values=[],this.requestUpdate("values")}serializeValue(t){return JSON.stringify(t)}updateInputs(){for(let t=null;t=this.hiddenInputs.pop();)t.remove();for(const t of this.values){const e=document.createElement("input");e.setAttribute("type","hidden"),e.setAttribute("name",this.getAttribute("name")),e.setAttribute("value",this.serializeValue(t)),this.hiddenInputs.push(e),this.inputRoot.parentElement.appendChild(e)}}updated(t){super.updated(t),t.has("values")&&this.updateInputs()}}t([it({type:String})],st.prototype,"name",void 0),t([it({type:String,attribute:"help_text"})],st.prototype,"helpText",void 0),t([it({type:Boolean,attribute:"help_always"})],st.prototype,"helpAlways",void 0),t([it({type:Boolean,attribute:"widget_only"})],st.prototype,"widgetOnly",void 0),t([it({type:Boolean,attribute:"hide_label"})],st.prototype,"hideLabel",void 0),t([it({type:String})],st.prototype,"label",void 0),t([it({type:Array})],st.prototype,"errors",void 0),t([it({type:Array})],st.prototype,"values",void 0),t([it({type:String})],st.prototype,"value",void 0),t([it({attribute:!1})],st.prototype,"inputRoot",void 0),t([it({type:Boolean})],st.prototype,"disabled",void 0),function(t){t.account="user-01",t.active="play",t.add_note="file-02",t.airtime="bank-note-01",t.archive="archive",t.arrow_up="chevron-up",t.arrow_down="chevron-down",t.arrow_left="chevron-left",t.arrow_right="chevron-right",t.attachment="paperclip",t.broadcast="announcement-01",t.call="phone-call-01",t.call_missed="phone-call-02",t.campaign="clock-refresh",t.campaigns="clock-refresh",t.check="check",t.checkbox="square",t.checkbox_checked="check-square",t.contact="user-01",t.contact_blocked="message-x-square",t.contact_stopped="slash-octagon",t.contact_updated="user-edit",t.contacts="user-01",t.copy="copy-04",t.delete="trash-03",t.delete_small="x",t.download="download-01",t.email="mail-01",t.error="alert-circle",t.event="zap",t.fields="user-edit",t.flow="flow",t.flow_interrupted="x-close",t.flow_ivr="phone-call-01",t.flow_message="message-square-02",t.flow_user="activity",t.flows="flow",t.group="users-01",t.group_smart="atom-01",t.help="help-circle",t.inbox="inbox-01",t.label="tag-01",t.language="globe-01",t.link="link-external-01",t.log="file-02",t.menu="menu-01",t.menu_collapse="chevron-left-double",t.message="message-square-02",t.messages="message-square-02",t.org_active="credit-card-02",t.org_bulk="credit-card-plus",t.org_anonymous="glasses-01",t.org_suspended="slash-circle-01",t.org_verified="check-verified-02",t.org_flagged="flag-01",t.resthooks="share-07",t.restore="play",t.search="search-refraction",t.select_open="chevron-down",t.select_clear="x",t.service="magic-wand-01",t.settings="settings-02",t.staff="hard-drive",t.tickets="agent",t.tickets_all="archive",t.tickets_closed="check",t.tickets_mine="coffee",t.tickets_open="inbox-01",t.tickets_unassigned="inbox-01",t.two_factor_enabled="shield-02",t.two_factor_disabled="shield-01",t.trigger="signal-01",t.triggers="signal-01",t.updated="edit-02",t.upload="upload-cloud-01",t.user="users-01",t.users="users-01",t.user_beta="shield-zap",t.webhook="link-external-01",t.workspace="message-chat-square",t.zendesk="zendesk"}(ot||(ot={}));class rt extends st{constructor(){super(...arguments),this.name="",this.disabled=!1,this.size=1.2,this.animateChange="pulse"}static get styles(){return s`
       :host {
         color: var(--color-text);
         display: inline-block;
@@ -4049,7 +4049,6 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
       .tabs {
         display: flex;
-        padding-left: 0.18em;
       }
 
       .tab {
@@ -4058,6 +4057,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         margin: 0em 0em;
         cursor: pointer;
         display: flex;
+        font-size: 1.1em;
         align-items: center;
         border-radius: var(--curvature);
         border-bottom-right-radius: 0px;
@@ -4081,7 +4081,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         max-width: 80px;
         margin-right: 0.4em;
         overflow: hidden;
-        transition: max-width 500ms ease-in-out;
+        transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
@@ -4103,12 +4103,27 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         }
       }
 
-      .tab.selected {
+      .tab {
+        transform: scale(0.9) translateY(-0.05em);
+        --icon-color: #aaa;
+        color: #aaa;
+      }
+
+      .tab.selected,
+      .tab.selected:hover {
         cursor: default;
         box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
         background: #fff;
-        transform: scale(1.05) translateY(-0.05em);
+        transform: scale(1) translateY(0em);
         z-index: 0;
+        --icon-color: #666;
+        color: #666;
+      }
+
+      .tab:hover {
+        --icon-color: #666;
+        color: #666;
+        background: rgba(0, 0, 0, 0.02);
       }
 
       .pane {

package/dist/index.js

@@ -1,4 +1,4 @@
-function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s<3?o(r):s>3?o(e,i,r):o(e,i))||r);return s>3&&r&&Object.defineProperty(e,i,r),r}const e=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class o{constructor(t,e,n){if(this._$cssResult$=!0,n!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=n.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n.set(i,t))}return t}toString(){return this.cssText}}const s=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,i,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[n+1]),t[0]);return new o(n,t,i)},r=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,i))(e)})(t):t;var a;const l=window.trustedTypes,c=l?l.emptyScript:"",h=window.reactiveElementPolyfillSupport,u={toAttribute(t,e){switch(e){case Boolean:t=t?c:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},d=(t,e)=>e!==t&&(e==e||t==t),p={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:d};class m extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;null!==(e=this.h)&&void 0!==e||(this.h=[]),this.h.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const n=this._$Ep(i,e);void 0!==n&&(this._$Ev.set(n,i),t.push(n))})),t}static createProperty(t,e=p){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,n=this.getPropertyDescriptor(t,i,e);void 0!==n&&Object.defineProperty(this.prototype,t,n)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(n){const o=this[t];this[e]=n,this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||p}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(r(t))}else void 0!==t&&e.push(r(t));return e}static _$Ep(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const i=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{e?t.adoptedStyleSheets=i.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):i.forEach((e=>{const i=document.createElement("style"),n=window.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=e.cssText,t.appendChild(i)}))})(i,this.constructor.elementStyles),i}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EO(t,e,i=p){var n,o;const s=this.constructor._$Ep(t,i);if(void 0!==s&&!0===i.reflect){const r=(null!==(o=null===(n=i.converter)||void 0===n?void 0:n.toAttribute)&&void 0!==o?o:u.toAttribute)(e,i.type);this._$El=t,null==r?this.removeAttribute(s):this.setAttribute(s,r),this._$El=null}}_$AK(t,e){var i,n;const o=this.constructor,s=o._$Ev.get(t);if(void 0!==s&&this._$El!==s){const t=o.getPropertyOptions(s),r=t.converter,a=null!==(n=null!==(i=null==r?void 0:r.fromAttribute)&&void 0!==i?i:"function"==typeof r?r:null)&&void 0!==n?n:u.fromAttribute;this._$El=s,this[s]=a(e,t.type),this._$El=null}}requestUpdate(t,e,i){let n=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||d)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,i))):n=!1),!this.isUpdatePending&&n&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(i)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(i)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}var f;m.finalized=!0,m.elementProperties=new Map,m.elementStyles=[],m.shadowRootOptions={mode:"open"},null==h||h({ReactiveElement:m}),(null!==(a=globalThis.reactiveElementVersions)&&void 0!==a?a:globalThis.reactiveElementVersions=[]).push("1.3.4");const g=globalThis.trustedTypes,v=g?g.createPolicy("lit-html",{createHTML:t=>t}):void 0,y=`lit$${(Math.random()+"").slice(9)}$`,b="?"+y,_=`<${b}>`,x=document,w=(t="")=>x.createComment(t),k=t=>null===t||"object"!=typeof t&&"function"!=typeof t,S=Array.isArray,C=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,T=/-->/g,E=/>/g,$=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),A=/'/g,O=/"/g,M=/^(?:script|style|textarea|title)$/i,P=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),z=Symbol.for("lit-noChange"),I=Symbol.for("lit-nothing"),D=new WeakMap,N=x.createTreeWalker(x,129,null,!1),R=(t,e)=>{const i=t.length-1,n=[];let o,s=2===e?"<svg>":"",r=C;for(let e=0;e<i;e++){const i=t[e];let a,l,c=-1,h=0;for(;h<i.length&&(r.lastIndex=h,l=r.exec(i),null!==l);)h=r.lastIndex,r===C?"!--"===l[1]?r=T:void 0!==l[1]?r=E:void 0!==l[2]?(M.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=$):void 0!==l[3]&&(r=$):r===$?">"===l[0]?(r=null!=o?o:C,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?$:'"'===l[3]?O:A):r===O||r===A?r=$:r===T||r===E?r=C:(r=$,o=void 0);const u=r===$&&t[e+1].startsWith("/>")?" ":"";s+=r===C?i+_:c>=0?(n.push(a),i.slice(0,c)+"$lit$"+i.slice(c)+y+u):i+y+(-2===c?(n.push(void 0),e):u)}const a=s+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==v?v.createHTML(a):a,n]};class B{constructor({strings:t,_$litType$:e},i){let n;this.parts=[];let o=0,s=0;const r=t.length-1,a=this.parts,[l,c]=R(t,e);if(this.el=B.createElement(l,i),N.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(n=N.nextNode())&&a.length<r;){if(1===n.nodeType){if(n.hasAttributes()){const t=[];for(const e of n.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(y)){const i=c[s++];if(t.push(e),void 0!==i){const t=n.getAttribute(i.toLowerCase()+"$lit$").split(y),e=/([.?@])?(.*)/.exec(i);a.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?j:"?"===e[1]?H:"@"===e[1]?G:V})}else a.push({type:6,index:o})}for(const e of t)n.removeAttribute(e)}if(M.test(n.tagName)){const t=n.textContent.split(y),e=t.length-1;if(e>0){n.textContent=g?g.emptyScript:"";for(let i=0;i<e;i++)n.append(t[i],w()),N.nextNode(),a.push({type:2,index:++o});n.append(t[e],w())}}}else if(8===n.nodeType)if(n.data===b)a.push({type:2,index:o});else{let t=-1;for(;-1!==(t=n.data.indexOf(y,t+1));)a.push({type:7,index:o}),t+=y.length-1}o++}}static createElement(t,e){const i=x.createElement("template");return i.innerHTML=t,i}}function q(t,e,i=t,n){var o,s,r,a;if(e===z)return e;let l=void 0!==n?null===(o=i._$Cl)||void 0===o?void 0:o[n]:i._$Cu;const c=k(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==c&&(null===(s=null==l?void 0:l._$AO)||void 0===s||s.call(l,!1),void 0===c?l=void 0:(l=new c(t),l._$AT(t,i,n)),void 0!==n?(null!==(r=(a=i)._$Cl)&&void 0!==r?r:a._$Cl=[])[n]=l:i._$Cu=l),void 0!==l&&(e=q(t,l._$AS(t,e.values),l,n)),e}class Z{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:i},parts:n}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:x).importNode(i,!0);N.currentNode=o;let s=N.nextNode(),r=0,a=0,l=n[0];for(;void 0!==l;){if(r===l.index){let e;2===l.type?e=new F(s,s.nextSibling,this,t):1===l.type?e=new l.ctor(s,l.name,l.strings,this,t):6===l.type&&(e=new W(s,this,t)),this.v.push(e),l=n[++a]}r!==(null==l?void 0:l.index)&&(s=N.nextNode(),r++)}return o}m(t){let e=0;for(const i of this.v)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class F{constructor(t,e,i,n){var o;this.type=2,this._$AH=I,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=n,this._$C_=null===(o=null==n?void 0:n.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$C_}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=q(this,t,e),k(t)?t===I||null==t||""===t?(this._$AH!==I&&this._$AR(),this._$AH=I):t!==this._$AH&&t!==z&&this.T(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.k(t):(t=>S(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.S(t):this.T(t)}j(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.j(t))}T(t){this._$AH!==I&&k(this._$AH)?this._$AA.nextSibling.data=t:this.k(x.createTextNode(t)),this._$AH=t}$(t){var e;const{values:i,_$litType$:n}=t,o="number"==typeof n?this._$AC(t):(void 0===n.el&&(n.el=B.createElement(n.h,this.options)),n);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.m(i);else{const t=new Z(o,this),e=t.p(this.options);t.m(i),this.k(e),this._$AH=t}}_$AC(t){let e=D.get(t.strings);return void 0===e&&D.set(t.strings,e=new B(t)),e}S(t){S(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,n=0;for(const o of t)n===e.length?e.push(i=new F(this.j(w()),this.j(w()),this,this.options)):i=e[n],i._$AI(o),n++;n<e.length&&(this._$AR(i&&i._$AB.nextSibling,n),e.length=n)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$C_=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class V{constructor(t,e,i,n,o){this.type=1,this._$AH=I,this._$AN=void 0,this.element=t,this.name=e,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=I}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,n){const o=this.strings;let s=!1;if(void 0===o)t=q(this,t,e,0),s=!k(t)||t!==this._$AH&&t!==z,s&&(this._$AH=t);else{const n=t;let r,a;for(t=o[0],r=0;r<o.length-1;r++)a=q(this,n[i+r],e,r),a===z&&(a=this._$AH[r]),s||(s=!k(a)||a!==this._$AH[r]),a===I?t=I:t!==I&&(t+=(null!=a?a:"")+o[r+1]),this._$AH[r]=a}s&&!n&&this.P(t)}P(t){t===I?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class j extends V{constructor(){super(...arguments),this.type=3}P(t){this.element[this.name]=t===I?void 0:t}}const U=g?g.emptyScript:"";class H extends V{constructor(){super(...arguments),this.type=4}P(t){t&&t!==I?this.element.setAttribute(this.name,U):this.element.removeAttribute(this.name)}}class G extends V{constructor(t,e,i,n,o){super(t,e,i,n,o),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=q(this,t,e,0))&&void 0!==i?i:I)===z)return;const n=this._$AH,o=t===I&&n!==I||t.capture!==n.capture||t.once!==n.once||t.passive!==n.passive,s=t!==I&&(n===I||o);o&&this.element.removeEventListener(this.name,this,n),s&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class W{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){q(this,t)}}const K=window.litHtmlPolyfillSupport;var Y,J;null==K||K(B,F),(null!==(f=globalThis.litHtmlVersions)&&void 0!==f?f:globalThis.litHtmlVersions=[]).push("2.2.7");class X extends m{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{var n,o;const s=null!==(n=null==i?void 0:i.renderBefore)&&void 0!==n?n:e;let r=s._$litPart$;if(void 0===r){const t=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:null;s._$litPart$=r=new F(e.insertBefore(w(),t),t,void 0,null!=i?i:{})}return r._$AI(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return z}}X.finalized=!0,X._$litElement$=!0,null===(Y=globalThis.litElementHydrateSupport)||void 0===Y||Y.call(globalThis,{LitElement:X});const Q=globalThis.litElementPolyfillSupport;null==Q||Q({LitElement:X}),(null!==(J=globalThis.litElementVersions)&&void 0!==J?J:globalThis.litElementVersions=[]).push("3.2.2");class tt extends X{constructor(){super(...arguments),this.eles={}}getEventHandlers(){return[]}connectedCallback(){super.connectedCallback();for(const t of this.getEventHandlers())t.isDocument?document.addEventListener(t.event,t.method.bind(this)):this.addEventListener(t.event,t.method.bind(this))}disconnectedCallback(){for(const t of this.getEventHandlers())t.isDocument?document.removeEventListener(t.event,t.method):this.removeEventListener(t.event,t.method);super.disconnectedCallback()}fireEvent(t){return this.dispatchEvent(new Event(t,{bubbles:!0,composed:!0}))}fireCustomEvent(t,e={}){const i=new CustomEvent(t,{detail:e,bubbles:!0,composed:!0});return this.dispatchEvent(i)}dispatchEvent(t){super.dispatchEvent(t);const e=t.target;if(e){const i=e["-"+t.type];if(i)return i(t);return new Function("event",`with(document) {\n          with(this) {\n            let handler = ${e.getAttribute("-"+t.type)};\n            if(typeof handler === 'function') { \n              handler(event) ;\n            }\n          }\n        }`).call(e,t)}}closestElement(t,e=this){return function e(i){if(!i||i===document||i===window)return null;i.assignedSlot&&(i=i.assignedSlot);const n=i.closest(t);return n||e(i.getRootNode().host)}(e)}getDiv(t){let e=this.eles[t];return e||(e=this.shadowRoot.querySelector(t),e&&(this.eles[t]=e),e)}}const et=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function it(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):et(t,e)}var nt,ot;null===(nt=window.HTMLSlotElement)||void 0===nt||nt.prototype.assignedElements;class st extends tt{constructor(){super(...arguments),this.hiddenInputs=[],this.name="",this.values=[],this.value="",this.inputRoot=this,this.disabled=!1}setValue(t){t?this.setValues([t]):this.setValues([]),this.value=t}setValues(t){this.values=t,this.requestUpdate("values")}addValue(t){this.values.push(t),this.requestUpdate("values")}removeValue(t){this.values=this.values.filter((e=>e!==t)),this.requestUpdate("values")}popValue(){this.values.pop(),this.requestUpdate("values")}clear(){this.values=[],this.requestUpdate("values")}serializeValue(t){return JSON.stringify(t)}updateInputs(){for(let t=null;t=this.hiddenInputs.pop();)t.remove();for(const t of this.values){const e=document.createElement("input");e.setAttribute("type","hidden"),e.setAttribute("name",this.getAttribute("name")),e.setAttribute("value",this.serializeValue(t)),this.hiddenInputs.push(e),this.inputRoot.parentElement.appendChild(e)}}updated(t){super.updated(t),t.has("values")&&this.updateInputs()}}t([it({type:String})],st.prototype,"name",void 0),t([it({type:String,attribute:"help_text"})],st.prototype,"helpText",void 0),t([it({type:Boolean,attribute:"help_always"})],st.prototype,"helpAlways",void 0),t([it({type:Boolean,attribute:"widget_only"})],st.prototype,"widgetOnly",void 0),t([it({type:Boolean,attribute:"hide_label"})],st.prototype,"hideLabel",void 0),t([it({type:String})],st.prototype,"label",void 0),t([it({type:Array})],st.prototype,"errors",void 0),t([it({type:Array})],st.prototype,"values",void 0),t([it({type:String})],st.prototype,"value",void 0),t([it({attribute:!1})],st.prototype,"inputRoot",void 0),t([it({type:Boolean})],st.prototype,"disabled",void 0),function(t){t.account="user-01",t.active="play",t.add_note="file-02",t.airtime="bank-note-01",t.archive="archive",t.arrow_up="chevron-up",t.arrow_down="chevron-down",t.arrlow_left="chevron-left",t.arrow_right="chevron-right",t.attachment="paperclip",t.broadcast="announcement-01",t.call="phone-call-01",t.call_missed="phone-call-02",t.campaign="clock-refresh",t.check="check",t.checkbox="square",t.checkbox_checked="check-square",t.contact="user-01",t.contact_blocked="message-x-square",t.contact_stopped="slash-octagon",t.contact_updated="user-edit",t.copy="copy-04",t.delete="trash-03",t.delete_small="x",t.download="download-01",t.email="mail-01",t.error="alert-circle",t.event="zap",t.fields="user-edit",t.flow="flow",t.flow_interrupted="x-close",t.flow_ivr="phone-call-01",t.flow_message="message-square-02",t.flow_user="activity",t.group="users-01",t.group_smart="atom-01",t.help="help-circle",t.inbox="inbox-01",t.label="tag-01",t.language="globe-01",t.log="file-02",t.menu="menu-01",t.menu_collapse="chevron-left-double",t.message="message-square-02",t.org_active="credit-card-02",t.org_bulk="credit-card-plus",t.org_anonymous="glasses-01",t.org_suspended="slash-circle-01",t.org_verified="check-verified-02",t.org_flagged="flag-01",t.resthooks="share-07",t.restore="play",t.search="search-refraction",t.select_open="chevron-down",t.select_clear="x",t.service="magic-wand-01",t.settings="settings-02",t.staff="hard-drive",t.tickets="agent",t.tickets_all="archive",t.tickets_closed="check",t.tickets_mine="coffee",t.tickets_open="inbox-01",t.tickets_unassigned="inbox-01",t.two_factor_enabled="shield-02",t.two_factor_disabled="shield-01",t.trigger="signal-01",t.updated="edit-02",t.upload="upload-cloud-01",t.users="users-01",t.user_beta="shield-zap",t.webhook="link-external-01",t.workspace="message-chat-square",t.zendesk="zendesk"}(ot||(ot={}));class rt extends st{constructor(){super(...arguments),this.name="",this.disabled=!1,this.size=1.2,this.animateChange="pulse"}static get styles(){return s`
+function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s<3?o(r):s>3?o(e,i,r):o(e,i))||r);return s>3&&r&&Object.defineProperty(e,i,r),r}const e=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class o{constructor(t,e,n){if(this._$cssResult$=!0,n!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=n.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n.set(i,t))}return t}toString(){return this.cssText}}const s=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,i,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[n+1]),t[0]);return new o(n,t,i)},r=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,i))(e)})(t):t;var a;const l=window.trustedTypes,c=l?l.emptyScript:"",h=window.reactiveElementPolyfillSupport,u={toAttribute(t,e){switch(e){case Boolean:t=t?c:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},d=(t,e)=>e!==t&&(e==e||t==t),p={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:d};class m extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;null!==(e=this.h)&&void 0!==e||(this.h=[]),this.h.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,i)=>{const n=this._$Ep(i,e);void 0!==n&&(this._$Ev.set(n,i),t.push(n))})),t}static createProperty(t,e=p){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const i="symbol"==typeof t?Symbol():"__"+t,n=this.getPropertyDescriptor(t,i,e);void 0!==n&&Object.defineProperty(this.prototype,t,n)}}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(n){const o=this[t];this[e]=n,this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||p}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const i of e)this.createProperty(i,t[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(r(t))}else void 0!==t&&e.push(r(t));return e}static _$Ep(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,i;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(i=t.hostConnected)||void 0===i||i.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const i=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{e?t.adoptedStyleSheets=i.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):i.forEach((e=>{const i=document.createElement("style"),n=window.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=e.cssText,t.appendChild(i)}))})(i,this.constructor.elementStyles),i}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$EO(t,e,i=p){var n,o;const s=this.constructor._$Ep(t,i);if(void 0!==s&&!0===i.reflect){const r=(null!==(o=null===(n=i.converter)||void 0===n?void 0:n.toAttribute)&&void 0!==o?o:u.toAttribute)(e,i.type);this._$El=t,null==r?this.removeAttribute(s):this.setAttribute(s,r),this._$El=null}}_$AK(t,e){var i,n;const o=this.constructor,s=o._$Ev.get(t);if(void 0!==s&&this._$El!==s){const t=o.getPropertyOptions(s),r=t.converter,a=null!==(n=null!==(i=null==r?void 0:r.fromAttribute)&&void 0!==i?i:"function"==typeof r?r:null)&&void 0!==n?n:u.fromAttribute;this._$El=s,this[s]=a(e,t.type),this._$El=null}}requestUpdate(t,e,i){let n=!0;void 0!==t&&(((i=i||this.constructor.getPropertyOptions(t)).hasChanged||d)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===i.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,i))):n=!1),!this.isUpdatePending&&n&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(i)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(i)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}var f;m.finalized=!0,m.elementProperties=new Map,m.elementStyles=[],m.shadowRootOptions={mode:"open"},null==h||h({ReactiveElement:m}),(null!==(a=globalThis.reactiveElementVersions)&&void 0!==a?a:globalThis.reactiveElementVersions=[]).push("1.3.4");const g=globalThis.trustedTypes,v=g?g.createPolicy("lit-html",{createHTML:t=>t}):void 0,y=`lit$${(Math.random()+"").slice(9)}$`,b="?"+y,_=`<${b}>`,x=document,w=(t="")=>x.createComment(t),k=t=>null===t||"object"!=typeof t&&"function"!=typeof t,S=Array.isArray,C=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,T=/-->/g,E=/>/g,$=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),A=/'/g,O=/"/g,M=/^(?:script|style|textarea|title)$/i,P=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),z=Symbol.for("lit-noChange"),I=Symbol.for("lit-nothing"),D=new WeakMap,N=x.createTreeWalker(x,129,null,!1),R=(t,e)=>{const i=t.length-1,n=[];let o,s=2===e?"<svg>":"",r=C;for(let e=0;e<i;e++){const i=t[e];let a,l,c=-1,h=0;for(;h<i.length&&(r.lastIndex=h,l=r.exec(i),null!==l);)h=r.lastIndex,r===C?"!--"===l[1]?r=T:void 0!==l[1]?r=E:void 0!==l[2]?(M.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=$):void 0!==l[3]&&(r=$):r===$?">"===l[0]?(r=null!=o?o:C,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?$:'"'===l[3]?O:A):r===O||r===A?r=$:r===T||r===E?r=C:(r=$,o=void 0);const u=r===$&&t[e+1].startsWith("/>")?" ":"";s+=r===C?i+_:c>=0?(n.push(a),i.slice(0,c)+"$lit$"+i.slice(c)+y+u):i+y+(-2===c?(n.push(void 0),e):u)}const a=s+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==v?v.createHTML(a):a,n]};class B{constructor({strings:t,_$litType$:e},i){let n;this.parts=[];let o=0,s=0;const r=t.length-1,a=this.parts,[l,c]=R(t,e);if(this.el=B.createElement(l,i),N.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(n=N.nextNode())&&a.length<r;){if(1===n.nodeType){if(n.hasAttributes()){const t=[];for(const e of n.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(y)){const i=c[s++];if(t.push(e),void 0!==i){const t=n.getAttribute(i.toLowerCase()+"$lit$").split(y),e=/([.?@])?(.*)/.exec(i);a.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?j:"?"===e[1]?H:"@"===e[1]?G:V})}else a.push({type:6,index:o})}for(const e of t)n.removeAttribute(e)}if(M.test(n.tagName)){const t=n.textContent.split(y),e=t.length-1;if(e>0){n.textContent=g?g.emptyScript:"";for(let i=0;i<e;i++)n.append(t[i],w()),N.nextNode(),a.push({type:2,index:++o});n.append(t[e],w())}}}else if(8===n.nodeType)if(n.data===b)a.push({type:2,index:o});else{let t=-1;for(;-1!==(t=n.data.indexOf(y,t+1));)a.push({type:7,index:o}),t+=y.length-1}o++}}static createElement(t,e){const i=x.createElement("template");return i.innerHTML=t,i}}function q(t,e,i=t,n){var o,s,r,a;if(e===z)return e;let l=void 0!==n?null===(o=i._$Cl)||void 0===o?void 0:o[n]:i._$Cu;const c=k(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==c&&(null===(s=null==l?void 0:l._$AO)||void 0===s||s.call(l,!1),void 0===c?l=void 0:(l=new c(t),l._$AT(t,i,n)),void 0!==n?(null!==(r=(a=i)._$Cl)&&void 0!==r?r:a._$Cl=[])[n]=l:i._$Cu=l),void 0!==l&&(e=q(t,l._$AS(t,e.values),l,n)),e}class Z{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:i},parts:n}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:x).importNode(i,!0);N.currentNode=o;let s=N.nextNode(),r=0,a=0,l=n[0];for(;void 0!==l;){if(r===l.index){let e;2===l.type?e=new F(s,s.nextSibling,this,t):1===l.type?e=new l.ctor(s,l.name,l.strings,this,t):6===l.type&&(e=new W(s,this,t)),this.v.push(e),l=n[++a]}r!==(null==l?void 0:l.index)&&(s=N.nextNode(),r++)}return o}m(t){let e=0;for(const i of this.v)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class F{constructor(t,e,i,n){var o;this.type=2,this._$AH=I,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=n,this._$C_=null===(o=null==n?void 0:n.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$C_}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=q(this,t,e),k(t)?t===I||null==t||""===t?(this._$AH!==I&&this._$AR(),this._$AH=I):t!==this._$AH&&t!==z&&this.T(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.k(t):(t=>S(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.S(t):this.T(t)}j(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.j(t))}T(t){this._$AH!==I&&k(this._$AH)?this._$AA.nextSibling.data=t:this.k(x.createTextNode(t)),this._$AH=t}$(t){var e;const{values:i,_$litType$:n}=t,o="number"==typeof n?this._$AC(t):(void 0===n.el&&(n.el=B.createElement(n.h,this.options)),n);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.m(i);else{const t=new Z(o,this),e=t.p(this.options);t.m(i),this.k(e),this._$AH=t}}_$AC(t){let e=D.get(t.strings);return void 0===e&&D.set(t.strings,e=new B(t)),e}S(t){S(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,n=0;for(const o of t)n===e.length?e.push(i=new F(this.j(w()),this.j(w()),this,this.options)):i=e[n],i._$AI(o),n++;n<e.length&&(this._$AR(i&&i._$AB.nextSibling,n),e.length=n)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$C_=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class V{constructor(t,e,i,n,o){this.type=1,this._$AH=I,this._$AN=void 0,this.element=t,this.name=e,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=I}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,n){const o=this.strings;let s=!1;if(void 0===o)t=q(this,t,e,0),s=!k(t)||t!==this._$AH&&t!==z,s&&(this._$AH=t);else{const n=t;let r,a;for(t=o[0],r=0;r<o.length-1;r++)a=q(this,n[i+r],e,r),a===z&&(a=this._$AH[r]),s||(s=!k(a)||a!==this._$AH[r]),a===I?t=I:t!==I&&(t+=(null!=a?a:"")+o[r+1]),this._$AH[r]=a}s&&!n&&this.P(t)}P(t){t===I?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class j extends V{constructor(){super(...arguments),this.type=3}P(t){this.element[this.name]=t===I?void 0:t}}const U=g?g.emptyScript:"";class H extends V{constructor(){super(...arguments),this.type=4}P(t){t&&t!==I?this.element.setAttribute(this.name,U):this.element.removeAttribute(this.name)}}class G extends V{constructor(t,e,i,n,o){super(t,e,i,n,o),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=q(this,t,e,0))&&void 0!==i?i:I)===z)return;const n=this._$AH,o=t===I&&n!==I||t.capture!==n.capture||t.once!==n.once||t.passive!==n.passive,s=t!==I&&(n===I||o);o&&this.element.removeEventListener(this.name,this,n),s&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class W{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){q(this,t)}}const K=window.litHtmlPolyfillSupport;var Y,J;null==K||K(B,F),(null!==(f=globalThis.litHtmlVersions)&&void 0!==f?f:globalThis.litHtmlVersions=[]).push("2.2.7");class X extends m{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{var n,o;const s=null!==(n=null==i?void 0:i.renderBefore)&&void 0!==n?n:e;let r=s._$litPart$;if(void 0===r){const t=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:null;s._$litPart$=r=new F(e.insertBefore(w(),t),t,void 0,null!=i?i:{})}return r._$AI(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return z}}X.finalized=!0,X._$litElement$=!0,null===(Y=globalThis.litElementHydrateSupport)||void 0===Y||Y.call(globalThis,{LitElement:X});const Q=globalThis.litElementPolyfillSupport;null==Q||Q({LitElement:X}),(null!==(J=globalThis.litElementVersions)&&void 0!==J?J:globalThis.litElementVersions=[]).push("3.2.2");class tt extends X{constructor(){super(...arguments),this.eles={}}getEventHandlers(){return[]}connectedCallback(){super.connectedCallback();for(const t of this.getEventHandlers())t.isDocument?document.addEventListener(t.event,t.method.bind(this)):this.addEventListener(t.event,t.method.bind(this))}disconnectedCallback(){for(const t of this.getEventHandlers())t.isDocument?document.removeEventListener(t.event,t.method):this.removeEventListener(t.event,t.method);super.disconnectedCallback()}fireEvent(t){return this.dispatchEvent(new Event(t,{bubbles:!0,composed:!0}))}fireCustomEvent(t,e={}){const i=new CustomEvent(t,{detail:e,bubbles:!0,composed:!0});return this.dispatchEvent(i)}dispatchEvent(t){super.dispatchEvent(t);const e=t.target;if(e){const i=e["-"+t.type];if(i)return i(t);return new Function("event",`with(document) {\n          with(this) {\n            let handler = ${e.getAttribute("-"+t.type)};\n            if(typeof handler === 'function') { \n              handler(event) ;\n            }\n          }\n        }`).call(e,t)}}closestElement(t,e=this){return function e(i){if(!i||i===document||i===window)return null;i.assignedSlot&&(i=i.assignedSlot);const n=i.closest(t);return n||e(i.getRootNode().host)}(e)}getDiv(t){let e=this.eles[t];return e||(e=this.shadowRoot.querySelector(t),e&&(this.eles[t]=e),e)}}const et=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function it(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):et(t,e)}var nt,ot;null===(nt=window.HTMLSlotElement)||void 0===nt||nt.prototype.assignedElements;class st extends tt{constructor(){super(...arguments),this.hiddenInputs=[],this.name="",this.values=[],this.value="",this.inputRoot=this,this.disabled=!1}setValue(t){t?this.setValues([t]):this.setValues([]),this.value=t}setValues(t){this.values=t,this.requestUpdate("values")}addValue(t){this.values.push(t),this.requestUpdate("values")}removeValue(t){this.values=this.values.filter((e=>e!==t)),this.requestUpdate("values")}popValue(){this.values.pop(),this.requestUpdate("values")}clear(){this.values=[],this.requestUpdate("values")}serializeValue(t){return JSON.stringify(t)}updateInputs(){for(let t=null;t=this.hiddenInputs.pop();)t.remove();for(const t of this.values){const e=document.createElement("input");e.setAttribute("type","hidden"),e.setAttribute("name",this.getAttribute("name")),e.setAttribute("value",this.serializeValue(t)),this.hiddenInputs.push(e),this.inputRoot.parentElement.appendChild(e)}}updated(t){super.updated(t),t.has("values")&&this.updateInputs()}}t([it({type:String})],st.prototype,"name",void 0),t([it({type:String,attribute:"help_text"})],st.prototype,"helpText",void 0),t([it({type:Boolean,attribute:"help_always"})],st.prototype,"helpAlways",void 0),t([it({type:Boolean,attribute:"widget_only"})],st.prototype,"widgetOnly",void 0),t([it({type:Boolean,attribute:"hide_label"})],st.prototype,"hideLabel",void 0),t([it({type:String})],st.prototype,"label",void 0),t([it({type:Array})],st.prototype,"errors",void 0),t([it({type:Array})],st.prototype,"values",void 0),t([it({type:String})],st.prototype,"value",void 0),t([it({attribute:!1})],st.prototype,"inputRoot",void 0),t([it({type:Boolean})],st.prototype,"disabled",void 0),function(t){t.account="user-01",t.active="play",t.add_note="file-02",t.airtime="bank-note-01",t.archive="archive",t.arrow_up="chevron-up",t.arrow_down="chevron-down",t.arrow_left="chevron-left",t.arrow_right="chevron-right",t.attachment="paperclip",t.broadcast="announcement-01",t.call="phone-call-01",t.call_missed="phone-call-02",t.campaign="clock-refresh",t.campaigns="clock-refresh",t.check="check",t.checkbox="square",t.checkbox_checked="check-square",t.contact="user-01",t.contact_blocked="message-x-square",t.contact_stopped="slash-octagon",t.contact_updated="user-edit",t.contacts="user-01",t.copy="copy-04",t.delete="trash-03",t.delete_small="x",t.download="download-01",t.email="mail-01",t.error="alert-circle",t.event="zap",t.fields="user-edit",t.flow="flow",t.flow_interrupted="x-close",t.flow_ivr="phone-call-01",t.flow_message="message-square-02",t.flow_user="activity",t.flows="flow",t.group="users-01",t.group_smart="atom-01",t.help="help-circle",t.inbox="inbox-01",t.label="tag-01",t.language="globe-01",t.link="link-external-01",t.log="file-02",t.menu="menu-01",t.menu_collapse="chevron-left-double",t.message="message-square-02",t.messages="message-square-02",t.org_active="credit-card-02",t.org_bulk="credit-card-plus",t.org_anonymous="glasses-01",t.org_suspended="slash-circle-01",t.org_verified="check-verified-02",t.org_flagged="flag-01",t.resthooks="share-07",t.restore="play",t.search="search-refraction",t.select_open="chevron-down",t.select_clear="x",t.service="magic-wand-01",t.settings="settings-02",t.staff="hard-drive",t.tickets="agent",t.tickets_all="archive",t.tickets_closed="check",t.tickets_mine="coffee",t.tickets_open="inbox-01",t.tickets_unassigned="inbox-01",t.two_factor_enabled="shield-02",t.two_factor_disabled="shield-01",t.trigger="signal-01",t.triggers="signal-01",t.updated="edit-02",t.upload="upload-cloud-01",t.user="users-01",t.users="users-01",t.user_beta="shield-zap",t.webhook="link-external-01",t.workspace="message-chat-square",t.zendesk="zendesk"}(ot||(ot={}));class rt extends st{constructor(){super(...arguments),this.name="",this.disabled=!1,this.size=1.2,this.animateChange="pulse"}static get styles(){return s`
       :host {
         color: var(--color-text);
         display: inline-block;
@@ -4049,7 +4049,6 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
       .tabs {
         display: flex;
-        padding-left: 0.18em;
       }
 
       .tab {
@@ -4058,6 +4057,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         margin: 0em 0em;
         cursor: pointer;
         display: flex;
+        font-size: 1.1em;
         align-items: center;
         border-radius: var(--curvature);
         border-bottom-right-radius: 0px;
@@ -4081,7 +4081,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         max-width: 80px;
         margin-right: 0.4em;
         overflow: hidden;
-        transition: max-width 500ms ease-in-out;
+        transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
@@ -4103,12 +4103,27 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         }
       }
 
-      .tab.selected {
+      .tab {
+        transform: scale(0.9) translateY(-0.05em);
+        --icon-color: #aaa;
+        color: #aaa;
+      }
+
+      .tab.selected,
+      .tab.selected:hover {
         cursor: default;
         box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
         background: #fff;
-        transform: scale(1.05) translateY(-0.05em);
+        transform: scale(1) translateY(0em);
         z-index: 0;
+        --icon-color: #666;
+        color: #666;
+      }
+
+      .tab:hover {
+        --icon-color: #666;
+        color: #666;
+        background: rgba(0, 0, 0, 0.02);
       }
 
       .pane {

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"253098e2.js",revision:"b02136e291253d09668fc2ff171ca6b4"},{url:"templates/components-body.html",revision:"19951e5941cffa55c54ab045b10c1cfd"},{url:"templates/components-head.html",revision:"1b74585e602eeff3a73aa29329adba0f"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"7b0d8aca.js",revision:"309150a647d137d32b7ecfb890d830c0"},{url:"templates/components-body.html",revision:"8b24ac6a35e2e30b707d70f3d1ea2368"},{url:"templates/components-head.html",revision:"63238bd400682359b5f53d9d835991c8"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/f534685623b0b9a48039916487e2d8ef/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"253098e2.js\",\n    \"revision\": \"b02136e291253d09668fc2ff171ca6b4\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"19951e5941cffa55c54ab045b10c1cfd\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"1b74585e602eeff3a73aa29329adba0f\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/e5807b929016cdce32033b94ef752cee/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"7b0d8aca.js\",\n    \"revision\": \"309150a647d137d32b7ecfb890d830c0\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"8b24ac6a35e2e30b707d70f3d1ea2368\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"63238bd400682359b5f53d9d835991c8\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/253098e2.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.33.1"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/7b0d8aca.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.33.3"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/253098e2.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/7b0d8aca.js" crossorigin="anonymous">

package/out-tsc/src/tabpane/TabPane.js

@@ -20,7 +20,6 @@ export class TabPane extends RapidElement {
 
       .tabs {
         display: flex;
-        padding-left: 0.18em;
       }
 
       .tab {
@@ -29,6 +28,7 @@ export class TabPane extends RapidElement {
         margin: 0em 0em;
         cursor: pointer;
         display: flex;
+        font-size: 1.1em;
         align-items: center;
         border-radius: var(--curvature);
         border-bottom-right-radius: 0px;
@@ -52,7 +52,7 @@ export class TabPane extends RapidElement {
         max-width: 80px;
         margin-right: 0.4em;
         overflow: hidden;
-        transition: max-width 500ms ease-in-out;
+        transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
@@ -74,12 +74,27 @@ export class TabPane extends RapidElement {
         }
       }
 
-      .tab.selected {
+      .tab {
+        transform: scale(0.9) translateY(-0.05em);
+        --icon-color: #aaa;
+        color: #aaa;
+      }
+
+      .tab.selected,
+      .tab.selected:hover {
         cursor: default;
         box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
         background: #fff;
-        transform: scale(1.05) translateY(-0.05em);
+        transform: scale(1) translateY(0em);
         z-index: 0;
+        --icon-color: #666;
+        color: #666;
+      }
+
+      .tab:hover {
+        --icon-color: #666;
+        color: #666;
+        background: rgba(0, 0, 0, 0.02);
       }
 
       .pane {

package/out-tsc/src/tabpane/TabPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,OAAO,OAAQ,SAAQ,YAAY;IAAzC;;QAgHE,cAAS,GAAG,KAAK,CAAC;QAGlB,UAAK,GAAG,CAAC,CAAC;IAiFZ,CAAC;IAnMC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GT,CAAC;IACJ,CAAC;IAQO,cAAc,CAAC,KAAiB;QACtC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAClB,KAAK,CAAC,aAAgC,CAAC,OAAO,CAAC,KAAK,CACtD,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE;gBACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBAC7C,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAQ,CAAC;oBACpC,GAAG,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;oBAE/B,IAAI,GAAG,CAAC,QAAQ,EAAE;wBAChB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;qBAC5B;yBAAM;wBACL,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;qBAC5B;iBACF;aACF;YACD,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;SAChD;IACH,CAAC;IAEM,MAAM,CAAC,KAAa;QACzB,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAQ,CAAC;IAC1C,CAAC;IAEM,MAAM;QACX,MAAM,IAAI,GAAU,EAAE,CAAC;QACvB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,GAAU,CAAC,CAAC;SACvB;QAED,OAAO,IAAI,CAAA;;sBAEO,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;;UAEjE,IAAI,CAAC,GAAG,CACR,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAEP,IAAI,CAAC,cAAc;2BACf,KAAK;uBACT,UAAU,CAAC;YAClB,GAAG,EAAE,IAAI;YACT,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK;YAC7B,MAAM,EAAE,GAAG,CAAC,MAAM;YAClB,MAAM,EAAE,GAAG,CAAC,MAAM;SACnB,CAAC;uBACO,GAAG,CAAC,cAAc,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK;YAChD,CAAC,CAAC,SAAS,GAAG,CAAC,cAAc,iBAAiB,GAAG,CAAC,cAAc,GAAG;YACnE,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,mBAAmB,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK;YACtD,CAAC,CAAC,oBAAoB,GAAG,CAAC,mBAAmB,GAAG;YAChD,CAAC,CAAC,EAAE;;gBAEJ,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI;kCACrC,GAAG,CAAC,IAAI;gBAC1B,GAAG,CAAC,QAAQ,EAAE;YACd,CAAC,CAAC,IAAI,CAAA;;wBAEE,GAAG,CAAC,KAAK,GAAG,CAAC;gBACb,CAAC,CAAC,IAAI,CAAA;8BACA,GAAG,CAAC,KAAK,CAAC,cAAc,EAAE;iCACvB;gBACT,CAAC,CAAC,IAAI;;mBAEX;YACH,CAAC,CAAC,IAAI;;WAEX,CACF;;yBAEgB,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;;;KAGrD,CAAC;IACJ,CAAC;CACF;AApFC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .tabs {\n        display: flex;\n        padding-left: 0.18em;\n      }\n\n      .tab {\n        user-select: none;\n        padding: 0.5em 1em;\n        margin: 0em 0em;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        border-radius: var(--curvature);\n        border-bottom-right-radius: 0px;\n        border-bottom-left-radius: 0px;\n        border: 0px solid rgba(0, 0, 0, 0.45);\n        color: var(--color-text-dark);\n        --icon-color: var(--color-text-dark);\n        white-space: nowrap;\n        transition: all 100ms ease-in-out;\n      }\n\n      .tab.hidden {\n        display: none;\n      }\n\n      .tab temba-icon {\n      }\n\n      .tab .name {\n        margin-left: 0.4em;\n        max-width: 80px;\n        margin-right: 0.4em;\n        overflow: hidden;\n        transition: max-width 500ms ease-in-out;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tab .badge {\n        margin-left: 0.4em;\n      }\n\n      @media (max-width: 900px) {\n        .collapses .tab .name {\n          max-width: 0px;\n          margin: 0;\n        }\n      }\n\n      @media (max-width: 600px) {\n        .collapses .tab .badge {\n          display: none;\n        }\n      }\n\n      .tab.selected {\n        cursor: default;\n        box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);\n        background: #fff;\n        transform: scale(1.05) translateY(-0.05em);\n        z-index: 0;\n      }\n\n      .pane {\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),\n          3px 3px 2px 1px rgba(0, 0, 0, 0.05);\n        min-height: 0;\n        z-index: 1;\n      }\n\n      .pane.first {\n        border-top-left-radius: 0px;\n        overflow: hidden;\n      }\n\n      .badge {\n      }\n\n      .count {\n        border-radius: 99px;\n        background: rgba(0, 0, 0, 0.05);\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 0.6em;\n        font-weight: 400;\n        padding: 0.1em 0.4em;\n        min-width: 1em;\n        text-align: center;\n      }\n\n      .notify .count {\n        background: var(--color-alert);\n        color: #fff;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  collapses = false;\n\n  @property({ type: Number })\n  index = 0;\n\n  private handleTabClick(event: MouseEvent): void {\n    this.index = parseInt(\n      (event.currentTarget as HTMLDivElement).dataset.index\n    );\n    this.requestUpdate('index');\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('index')) {\n      if (this.children.length > this.index) {\n        for (let i = 0; i < this.children.length; i++) {\n          const tab = this.children[i] as Tab;\n          tab.selected = i == this.index;\n\n          if (tab.selected) {\n            tab.style.display = 'flex';\n          } else {\n            tab.style.display = 'none';\n          }\n        }\n      }\n      this.fireEvent(CustomEventType.ContextChanged);\n    }\n  }\n\n  public getTab(index: number): Tab {\n    return this.children.item(index) as Tab;\n  }\n\n  public render(): TemplateResult {\n    const tabs: Tab[] = [];\n    for (const tab of this.children) {\n      tabs.push(tab as Tab);\n    }\n\n    return html`\n      <div\n        class=\"tabs ${getClasses({ tabs: true, collapses: this.collapses })}\"\n      >\n        ${tabs.map(\n          (tab, index) => html`\n            <div\n              @click=${this.handleTabClick}\n              data-index=${index}\n              class=\"${getClasses({\n                tab: true,\n                selected: index == this.index,\n                hidden: tab.hidden,\n                notify: tab.notify,\n              })}\"\n              style=\"${tab.selectionColor && index == this.index\n                ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n                : ''} ${tab.selectionBackground && index == this.index\n                ? `background-color:${tab.selectionBackground};`\n                : ''}\"\n            >\n              ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n              <div class=\"name\">${tab.name}</div>\n              ${tab.hasBadge()\n                ? html`\n                    <div class=\"badge\">\n                      ${tab.count > 0\n                        ? html`<div class=\"count\">\n                            ${tab.count.toLocaleString()}\n                          </div>`\n                        : null}\n                    </div>\n                  `\n                : null}\n            </div>\n          `\n        )}\n      </div>\n      <div class=\"pane ${this.index === 0 ? 'first' : null}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,OAAO,OAAQ,SAAQ,YAAY;IAAzC;;QA+HE,cAAS,GAAG,KAAK,CAAC;QAGlB,UAAK,GAAG,CAAC,CAAC;IAiFZ,CAAC;IAlNC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyHT,CAAC;IACJ,CAAC;IAQO,cAAc,CAAC,KAAiB;QACtC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAClB,KAAK,CAAC,aAAgC,CAAC,OAAO,CAAC,KAAK,CACtD,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE;gBACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBAC7C,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAQ,CAAC;oBACpC,GAAG,CAAC,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;oBAE/B,IAAI,GAAG,CAAC,QAAQ,EAAE;wBAChB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;qBAC5B;yBAAM;wBACL,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;qBAC5B;iBACF;aACF;YACD,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;SAChD;IACH,CAAC;IAEM,MAAM,CAAC,KAAa;QACzB,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAQ,CAAC;IAC1C,CAAC;IAEM,MAAM;QACX,MAAM,IAAI,GAAU,EAAE,CAAC;QACvB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,GAAU,CAAC,CAAC;SACvB;QAED,OAAO,IAAI,CAAA;;sBAEO,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;;UAEjE,IAAI,CAAC,GAAG,CACR,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAEP,IAAI,CAAC,cAAc;2BACf,KAAK;uBACT,UAAU,CAAC;YAClB,GAAG,EAAE,IAAI;YACT,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK;YAC7B,MAAM,EAAE,GAAG,CAAC,MAAM;YAClB,MAAM,EAAE,GAAG,CAAC,MAAM;SACnB,CAAC;uBACO,GAAG,CAAC,cAAc,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK;YAChD,CAAC,CAAC,SAAS,GAAG,CAAC,cAAc,iBAAiB,GAAG,CAAC,cAAc,GAAG;YACnE,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC,mBAAmB,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK;YACtD,CAAC,CAAC,oBAAoB,GAAG,CAAC,mBAAmB,GAAG;YAChD,CAAC,CAAC,EAAE;;gBAEJ,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI;kCACrC,GAAG,CAAC,IAAI;gBAC1B,GAAG,CAAC,QAAQ,EAAE;YACd,CAAC,CAAC,IAAI,CAAA;;wBAEE,GAAG,CAAC,KAAK,GAAG,CAAC;gBACb,CAAC,CAAC,IAAI,CAAA;8BACA,GAAG,CAAC,KAAK,CAAC,cAAc,EAAE;iCACvB;gBACT,CAAC,CAAC,IAAI;;mBAEX;YACH,CAAC,CAAC,IAAI;;WAEX,CACF;;yBAEgB,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;;;KAGrD,CAAC;IACJ,CAAC;CACF;AApFC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .tabs {\n        display: flex;\n      }\n\n      .tab {\n        user-select: none;\n        padding: 0.5em 1em;\n        margin: 0em 0em;\n        cursor: pointer;\n        display: flex;\n        font-size: 1.1em;\n        align-items: center;\n        border-radius: var(--curvature);\n        border-bottom-right-radius: 0px;\n        border-bottom-left-radius: 0px;\n        border: 0px solid rgba(0, 0, 0, 0.45);\n        color: var(--color-text-dark);\n        --icon-color: var(--color-text-dark);\n        white-space: nowrap;\n        transition: all 100ms ease-in-out;\n      }\n\n      .tab.hidden {\n        display: none;\n      }\n\n      .tab temba-icon {\n      }\n\n      .tab .name {\n        margin-left: 0.4em;\n        max-width: 80px;\n        margin-right: 0.4em;\n        overflow: hidden;\n        transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tab .badge {\n        margin-left: 0.4em;\n      }\n\n      @media (max-width: 900px) {\n        .collapses .tab .name {\n          max-width: 0px;\n          margin: 0;\n        }\n      }\n\n      @media (max-width: 600px) {\n        .collapses .tab .badge {\n          display: none;\n        }\n      }\n\n      .tab {\n        transform: scale(0.9) translateY(-0.05em);\n        --icon-color: #aaa;\n        color: #aaa;\n      }\n\n      .tab.selected,\n      .tab.selected:hover {\n        cursor: default;\n        box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);\n        background: #fff;\n        transform: scale(1) translateY(0em);\n        z-index: 0;\n        --icon-color: #666;\n        color: #666;\n      }\n\n      .tab:hover {\n        --icon-color: #666;\n        color: #666;\n        background: rgba(0, 0, 0, 0.02);\n      }\n\n      .pane {\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),\n          3px 3px 2px 1px rgba(0, 0, 0, 0.05);\n        min-height: 0;\n        z-index: 1;\n      }\n\n      .pane.first {\n        border-top-left-radius: 0px;\n        overflow: hidden;\n      }\n\n      .badge {\n      }\n\n      .count {\n        border-radius: 99px;\n        background: rgba(0, 0, 0, 0.05);\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 0.6em;\n        font-weight: 400;\n        padding: 0.1em 0.4em;\n        min-width: 1em;\n        text-align: center;\n      }\n\n      .notify .count {\n        background: var(--color-alert);\n        color: #fff;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  collapses = false;\n\n  @property({ type: Number })\n  index = 0;\n\n  private handleTabClick(event: MouseEvent): void {\n    this.index = parseInt(\n      (event.currentTarget as HTMLDivElement).dataset.index\n    );\n    this.requestUpdate('index');\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('index')) {\n      if (this.children.length > this.index) {\n        for (let i = 0; i < this.children.length; i++) {\n          const tab = this.children[i] as Tab;\n          tab.selected = i == this.index;\n\n          if (tab.selected) {\n            tab.style.display = 'flex';\n          } else {\n            tab.style.display = 'none';\n          }\n        }\n      }\n      this.fireEvent(CustomEventType.ContextChanged);\n    }\n  }\n\n  public getTab(index: number): Tab {\n    return this.children.item(index) as Tab;\n  }\n\n  public render(): TemplateResult {\n    const tabs: Tab[] = [];\n    for (const tab of this.children) {\n      tabs.push(tab as Tab);\n    }\n\n    return html`\n      <div\n        class=\"tabs ${getClasses({ tabs: true, collapses: this.collapses })}\"\n      >\n        ${tabs.map(\n          (tab, index) => html`\n            <div\n              @click=${this.handleTabClick}\n              data-index=${index}\n              class=\"${getClasses({\n                tab: true,\n                selected: index == this.index,\n                hidden: tab.hidden,\n                notify: tab.notify,\n              })}\"\n              style=\"${tab.selectionColor && index == this.index\n                ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n                : ''} ${tab.selectionBackground && index == this.index\n                ? `background-color:${tab.selectionBackground};`\n                : ''}\"\n            >\n              ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n              <div class=\"name\">${tab.name}</div>\n              ${tab.hasBadge()\n                ? html`\n                    <div class=\"badge\">\n                      ${tab.count > 0\n                        ? html`<div class=\"count\">\n                            ${tab.count.toLocaleString()}\n                          </div>`\n                        : null}\n                    </div>\n                  `\n                : null}\n            </div>\n          `\n        )}\n      </div>\n      <div class=\"pane ${this.index === 0 ? 'first' : null}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/vectoricon/index.js

@@ -7,13 +7,14 @@ export var Icon;
     Icon["archive"] = "archive";
     Icon["arrow_up"] = "chevron-up";
     Icon["arrow_down"] = "chevron-down";
-    Icon["arrlow_left"] = "chevron-left";
+    Icon["arrow_left"] = "chevron-left";
     Icon["arrow_right"] = "chevron-right";
     Icon["attachment"] = "paperclip";
     Icon["broadcast"] = "announcement-01";
     Icon["call"] = "phone-call-01";
     Icon["call_missed"] = "phone-call-02";
     Icon["campaign"] = "clock-refresh";
+    Icon["campaigns"] = "clock-refresh";
     Icon["check"] = "check";
     Icon["checkbox"] = "square";
     Icon["checkbox_checked"] = "check-square";
@@ -21,6 +22,7 @@ export var Icon;
     Icon["contact_blocked"] = "message-x-square";
     Icon["contact_stopped"] = "slash-octagon";
     Icon["contact_updated"] = "user-edit";
+    Icon["contacts"] = "user-01";
     Icon["copy"] = "copy-04";
     Icon["delete"] = "trash-03";
     Icon["delete_small"] = "x";
@@ -34,16 +36,19 @@ export var Icon;
     Icon["flow_ivr"] = "phone-call-01";
     Icon["flow_message"] = "message-square-02";
     Icon["flow_user"] = "activity";
+    Icon["flows"] = "flow";
     Icon["group"] = "users-01";
     Icon["group_smart"] = "atom-01";
     Icon["help"] = "help-circle";
     Icon["inbox"] = "inbox-01";
     Icon["label"] = "tag-01";
     Icon["language"] = "globe-01";
+    Icon["link"] = "link-external-01";
     Icon["log"] = "file-02";
     Icon["menu"] = "menu-01";
     Icon["menu_collapse"] = "chevron-left-double";
     Icon["message"] = "message-square-02";
+    Icon["messages"] = "message-square-02";
     Icon["org_active"] = "credit-card-02";
     Icon["org_bulk"] = "credit-card-plus";
     Icon["org_anonymous"] = "glasses-01";
@@ -67,8 +72,10 @@ export var Icon;
     Icon["two_factor_enabled"] = "shield-02";
     Icon["two_factor_disabled"] = "shield-01";
     Icon["trigger"] = "signal-01";
+    Icon["triggers"] = "signal-01";
     Icon["updated"] = "edit-02";
     Icon["upload"] = "upload-cloud-01";
+    Icon["user"] = "users-01";
     Icon["users"] = "users-01";
     Icon["user_beta"] = "shield-zap";
     Icon["webhook"] = "link-external-01";

package/out-tsc/src/vectoricon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/vectoricon/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,IA2EX;AA3ED,WAAY,IAAI;IACd,2BAAmB,CAAA;IACnB,uBAAe,CAAA;IACf,4BAAoB,CAAA;IACpB,gCAAwB,CAAA;IACxB,2BAAmB,CAAA;IACnB,+BAAuB,CAAA;IACvB,mCAA2B,CAAA;IAC3B,oCAA4B,CAAA;IAC5B,qCAA6B,CAAA;IAC7B,gCAAwB,CAAA;IACxB,qCAA6B,CAAA;IAC7B,8BAAsB,CAAA;IACtB,qCAA6B,CAAA;IAC7B,kCAA0B,CAAA;IAC1B,uBAAe,CAAA;IACf,2BAAmB,CAAA;IACnB,yCAAiC,CAAA;IACjC,2BAAmB,CAAA;IACnB,4CAAoC,CAAA;IACpC,yCAAiC,CAAA;IACjC,qCAA6B,CAAA;IAC7B,wBAAgB,CAAA;IAChB,2BAAmB,CAAA;IACnB,0BAAkB,CAAA;IAClB,gCAAwB,CAAA;IACxB,yBAAiB,CAAA;IACjB,8BAAsB,CAAA;IACtB,qBAAa,CAAA;IACb,4BAAoB,CAAA;IACpB,qBAAa,CAAA;IACb,oCAA4B,CAAA;IAC5B,kCAA0B,CAAA;IAC1B,0CAAkC,CAAA;IAClC,8BAAsB,CAAA;IACtB,0BAAkB,CAAA;IAClB,+BAAuB,CAAA;IACvB,4BAAoB,CAAA;IACpB,0BAAkB,CAAA;IAClB,wBAAgB,CAAA;IAChB,6BAAqB,CAAA;IACrB,uBAAe,CAAA;IACf,wBAAgB,CAAA;IAChB,6CAAqC,CAAA;IACrC,qCAA6B,CAAA;IAC7B,qCAA6B,CAAA;IAC7B,qCAA6B,CAAA;IAC7B,oCAA4B,CAAA;IAC5B,yCAAiC,CAAA;IACjC,0CAAkC,CAAA;IAClC,+BAAuB,CAAA;IACvB,8BAAsB,CAAA;IACtB,wBAAgB,CAAA;IAChB,oCAA4B,CAAA;IAC5B,oCAA4B,CAAA;IAC5B,0BAAkB,CAAA;IAClB,iCAAyB,CAAA;IACzB,gCAAwB,CAAA;IACxB,4BAAoB,CAAA;IACpB,yBAAiB,CAAA;IACjB,+BAAuB,CAAA;IACvB,gCAAwB,CAAA;IACxB,+BAAuB,CAAA;IACvB,iCAAyB,CAAA;IACzB,uCAA+B,CAAA;IAC/B,wCAAgC,CAAA;IAChC,yCAAiC,CAAA;IACjC,6BAAqB,CAAA;IACrB,2BAAmB,CAAA;IACnB,kCAA0B,CAAA;IAC1B,0BAAkB,CAAA;IAClB,gCAAwB,CAAA;IACxB,oCAA4B,CAAA;IAC5B,yCAAiC,CAAA;IACjC,2BAAmB,CAAA;AACrB,CAAC,EA3EW,IAAI,KAAJ,IAAI,QA2Ef","sourcesContent":["export enum Icon {\n  account = 'user-01',\n  active = 'play',\n  add_note = 'file-02',\n  airtime = 'bank-note-01',\n  archive = 'archive',\n  arrow_up = 'chevron-up',\n  arrow_down = 'chevron-down',\n  arrlow_left = 'chevron-left',\n  arrow_right = 'chevron-right',\n  attachment = 'paperclip',\n  broadcast = 'announcement-01',\n  call = 'phone-call-01',\n  call_missed = 'phone-call-02',\n  campaign = 'clock-refresh',\n  check = 'check',\n  checkbox = 'square',\n  checkbox_checked = 'check-square',\n  contact = 'user-01',\n  contact_blocked = 'message-x-square',\n  contact_stopped = 'slash-octagon',\n  contact_updated = 'user-edit',\n  copy = 'copy-04',\n  delete = 'trash-03',\n  delete_small = 'x',\n  download = 'download-01',\n  email = 'mail-01',\n  error = 'alert-circle',\n  event = 'zap',\n  fields = 'user-edit',\n  flow = 'flow',\n  flow_interrupted = 'x-close',\n  flow_ivr = 'phone-call-01',\n  flow_message = 'message-square-02',\n  flow_user = 'activity',\n  group = 'users-01',\n  group_smart = 'atom-01',\n  help = 'help-circle',\n  inbox = 'inbox-01',\n  label = 'tag-01',\n  language = 'globe-01',\n  log = 'file-02',\n  menu = 'menu-01',\n  menu_collapse = 'chevron-left-double',\n  message = 'message-square-02',\n  org_active = 'credit-card-02',\n  org_bulk = 'credit-card-plus',\n  org_anonymous = 'glasses-01',\n  org_suspended = 'slash-circle-01',\n  org_verified = 'check-verified-02',\n  org_flagged = 'flag-01',\n  resthooks = 'share-07',\n  restore = 'play',\n  search = 'search-refraction',\n  select_open = 'chevron-down',\n  select_clear = 'x',\n  service = 'magic-wand-01',\n  settings = 'settings-02',\n  staff = 'hard-drive',\n  tickets = 'agent',\n  tickets_all = 'archive',\n  tickets_closed = 'check',\n  tickets_mine = 'coffee',\n  tickets_open = 'inbox-01',\n  tickets_unassigned = 'inbox-01',\n  two_factor_enabled = 'shield-02',\n  two_factor_disabled = 'shield-01',\n  trigger = 'signal-01',\n  updated = 'edit-02',\n  upload = 'upload-cloud-01',\n  users = 'users-01',\n  user_beta = 'shield-zap',\n  webhook = 'link-external-01',\n  workspace = 'message-chat-square',\n  zendesk = 'zendesk',\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/vectoricon/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,IAkFX;AAlFD,WAAY,IAAI;IACd,2BAAmB,CAAA;IACnB,uBAAe,CAAA;IACf,4BAAoB,CAAA;IACpB,gCAAwB,CAAA;IACxB,2BAAmB,CAAA;IACnB,+BAAuB,CAAA;IACvB,mCAA2B,CAAA;IAC3B,mCAA2B,CAAA;IAC3B,qCAA6B,CAAA;IAC7B,gCAAwB,CAAA;IACxB,qCAA6B,CAAA;IAC7B,8BAAsB,CAAA;IACtB,qCAA6B,CAAA;IAC7B,kCAA0B,CAAA;IAC1B,mCAA2B,CAAA;IAC3B,uBAAe,CAAA;IACf,2BAAmB,CAAA;IACnB,yCAAiC,CAAA;IACjC,2BAAmB,CAAA;IACnB,4CAAoC,CAAA;IACpC,yCAAiC,CAAA;IACjC,qCAA6B,CAAA;IAC7B,4BAAoB,CAAA;IACpB,wBAAgB,CAAA;IAChB,2BAAmB,CAAA;IACnB,0BAAkB,CAAA;IAClB,gCAAwB,CAAA;IACxB,yBAAiB,CAAA;IACjB,8BAAsB,CAAA;IACtB,qBAAa,CAAA;IACb,4BAAoB,CAAA;IACpB,qBAAa,CAAA;IACb,oCAA4B,CAAA;IAC5B,kCAA0B,CAAA;IAC1B,0CAAkC,CAAA;IAClC,8BAAsB,CAAA;IACtB,sBAAc,CAAA;IACd,0BAAkB,CAAA;IAClB,+BAAuB,CAAA;IACvB,4BAAoB,CAAA;IACpB,0BAAkB,CAAA;IAClB,wBAAgB,CAAA;IAChB,6BAAqB,CAAA;IACrB,iCAAyB,CAAA;IACzB,uBAAe,CAAA;IACf,wBAAgB,CAAA;IAChB,6CAAqC,CAAA;IACrC,qCAA6B,CAAA;IAC7B,sCAA8B,CAAA;IAC9B,qCAA6B,CAAA;IAC7B,qCAA6B,CAAA;IAC7B,oCAA4B,CAAA;IAC5B,yCAAiC,CAAA;IACjC,0CAAkC,CAAA;IAClC,+BAAuB,CAAA;IACvB,8BAAsB,CAAA;IACtB,wBAAgB,CAAA;IAChB,oCAA4B,CAAA;IAC5B,oCAA4B,CAAA;IAC5B,0BAAkB,CAAA;IAClB,iCAAyB,CAAA;IACzB,gCAAwB,CAAA;IACxB,4BAAoB,CAAA;IACpB,yBAAiB,CAAA;IACjB,+BAAuB,CAAA;IACvB,gCAAwB,CAAA;IACxB,+BAAuB,CAAA;IACvB,iCAAyB,CAAA;IACzB,uCAA+B,CAAA;IAC/B,wCAAgC,CAAA;IAChC,yCAAiC,CAAA;IACjC,6BAAqB,CAAA;IACrB,8BAAsB,CAAA;IACtB,2BAAmB,CAAA;IACnB,kCAA0B,CAAA;IAC1B,yBAAiB,CAAA;IACjB,0BAAkB,CAAA;IAClB,gCAAwB,CAAA;IACxB,oCAA4B,CAAA;IAC5B,yCAAiC,CAAA;IACjC,2BAAmB,CAAA;AACrB,CAAC,EAlFW,IAAI,KAAJ,IAAI,QAkFf","sourcesContent":["export enum Icon {\n  account = 'user-01',\n  active = 'play',\n  add_note = 'file-02',\n  airtime = 'bank-note-01',\n  archive = 'archive',\n  arrow_up = 'chevron-up',\n  arrow_down = 'chevron-down',\n  arrow_left = 'chevron-left',\n  arrow_right = 'chevron-right',\n  attachment = 'paperclip',\n  broadcast = 'announcement-01',\n  call = 'phone-call-01',\n  call_missed = 'phone-call-02',\n  campaign = 'clock-refresh',\n  campaigns = 'clock-refresh',\n  check = 'check',\n  checkbox = 'square',\n  checkbox_checked = 'check-square',\n  contact = 'user-01',\n  contact_blocked = 'message-x-square',\n  contact_stopped = 'slash-octagon',\n  contact_updated = 'user-edit',\n  contacts = 'user-01',\n  copy = 'copy-04',\n  delete = 'trash-03',\n  delete_small = 'x',\n  download = 'download-01',\n  email = 'mail-01',\n  error = 'alert-circle',\n  event = 'zap',\n  fields = 'user-edit',\n  flow = 'flow',\n  flow_interrupted = 'x-close',\n  flow_ivr = 'phone-call-01',\n  flow_message = 'message-square-02',\n  flow_user = 'activity',\n  flows = 'flow',\n  group = 'users-01',\n  group_smart = 'atom-01',\n  help = 'help-circle',\n  inbox = 'inbox-01',\n  label = 'tag-01',\n  language = 'globe-01',\n  link = 'link-external-01',\n  log = 'file-02',\n  menu = 'menu-01',\n  menu_collapse = 'chevron-left-double',\n  message = 'message-square-02',\n  messages = 'message-square-02',\n  org_active = 'credit-card-02',\n  org_bulk = 'credit-card-plus',\n  org_anonymous = 'glasses-01',\n  org_suspended = 'slash-circle-01',\n  org_verified = 'check-verified-02',\n  org_flagged = 'flag-01',\n  resthooks = 'share-07',\n  restore = 'play',\n  search = 'search-refraction',\n  select_open = 'chevron-down',\n  select_clear = 'x',\n  service = 'magic-wand-01',\n  settings = 'settings-02',\n  staff = 'hard-drive',\n  tickets = 'agent',\n  tickets_all = 'archive',\n  tickets_closed = 'check',\n  tickets_mine = 'coffee',\n  tickets_open = 'inbox-01',\n  tickets_unassigned = 'inbox-01',\n  two_factor_enabled = 'shield-02',\n  two_factor_disabled = 'shield-01',\n  trigger = 'signal-01',\n  triggers = 'signal-01',\n  updated = 'edit-02',\n  upload = 'upload-cloud-01',\n  user = 'users-01',\n  users = 'users-01',\n  user_beta = 'shield-zap',\n  webhook = 'link-external-01',\n  workspace = 'message-chat-square',\n  zendesk = 'zendesk',\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.33.1",
+  "version": "0.33.3",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/tabpane/TabPane.ts

@@ -16,7 +16,6 @@ export class TabPane extends RapidElement {
 
       .tabs {
         display: flex;
-        padding-left: 0.18em;
       }
 
       .tab {
@@ -25,6 +24,7 @@ export class TabPane extends RapidElement {
         margin: 0em 0em;
         cursor: pointer;
         display: flex;
+        font-size: 1.1em;
         align-items: center;
         border-radius: var(--curvature);
         border-bottom-right-radius: 0px;
@@ -48,7 +48,7 @@ export class TabPane extends RapidElement {
         max-width: 80px;
         margin-right: 0.4em;
         overflow: hidden;
-        transition: max-width 500ms ease-in-out;
+        transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
@@ -70,12 +70,27 @@ export class TabPane extends RapidElement {
         }
       }
 
-      .tab.selected {
+      .tab {
+        transform: scale(0.9) translateY(-0.05em);
+        --icon-color: #aaa;
+        color: #aaa;
+      }
+
+      .tab.selected,
+      .tab.selected:hover {
         cursor: default;
         box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
         background: #fff;
-        transform: scale(1.05) translateY(-0.05em);
+        transform: scale(1) translateY(0em);
         z-index: 0;
+        --icon-color: #666;
+        color: #666;
+      }
+
+      .tab:hover {
+        --icon-color: #666;
+        color: #666;
+        background: rgba(0, 0, 0, 0.02);
       }
 
       .pane {

package/src/vectoricon/index.ts

@@ -6,13 +6,14 @@ export enum Icon {
   archive = 'archive',
   arrow_up = 'chevron-up',
   arrow_down = 'chevron-down',
-  arrlow_left = 'chevron-left',
+  arrow_left = 'chevron-left',
   arrow_right = 'chevron-right',
   attachment = 'paperclip',
   broadcast = 'announcement-01',
   call = 'phone-call-01',
   call_missed = 'phone-call-02',
   campaign = 'clock-refresh',
+  campaigns = 'clock-refresh',
   check = 'check',
   checkbox = 'square',
   checkbox_checked = 'check-square',
@@ -20,6 +21,7 @@ export enum Icon {
   contact_blocked = 'message-x-square',
   contact_stopped = 'slash-octagon',
   contact_updated = 'user-edit',
+  contacts = 'user-01',
   copy = 'copy-04',
   delete = 'trash-03',
   delete_small = 'x',
@@ -33,16 +35,19 @@ export enum Icon {
   flow_ivr = 'phone-call-01',
   flow_message = 'message-square-02',
   flow_user = 'activity',
+  flows = 'flow',
   group = 'users-01',
   group_smart = 'atom-01',
   help = 'help-circle',
   inbox = 'inbox-01',
   label = 'tag-01',
   language = 'globe-01',
+  link = 'link-external-01',
   log = 'file-02',
   menu = 'menu-01',
   menu_collapse = 'chevron-left-double',
   message = 'message-square-02',
+  messages = 'message-square-02',
   org_active = 'credit-card-02',
   org_bulk = 'credit-card-plus',
   org_anonymous = 'glasses-01',
@@ -66,8 +71,10 @@ export enum Icon {
   two_factor_enabled = 'shield-02',
   two_factor_disabled = 'shield-01',
   trigger = 'signal-01',
+  triggers = 'signal-01',
   updated = 'edit-02',
   upload = 'upload-cloud-01',
+  user = 'users-01',
   users = 'users-01',
   user_beta = 'shield-zap',
   webhook = 'link-external-01',