tuix-webcomponents 0.63.0 → 0.64.0

package/dist/assets/index-DBzYXxxs.js

@@ -0,0 +1,1554 @@
+import{r as l,i as u,T as It,s as H,x as d,A as z,m as zt,f as K,c as nt,p as ft,a as Mt}from"./iframe-ClsPaEIM.js";import{e as St,i as Et,t as Ot,o as dt,a as Y}from"./state-CLjydI9z.js";import{S as g,n as a,e as M}from"./screenSizes.enum-C1IhC_dy.js";import{T as p,M as Q,a as N,c as Dt,b as Bt}from"./tuix-text.enums-Ck8cVqZZ.js";import{s as b,b as Rt,h as Nt,a as Vt,T as jt}from"./TuixIconButton-eQtxZNXh.js";import{P as c,D as h,a as st,I as k}from"./tuix-icon.enums-DYTtwLZl.js";import{P as Z,B as Ht}from"./tuix-paper.enum-DhmlUJB7.js";import"./TuixToast-BhxwZIGo.js";import"./TuixModal-BZFIHTi_.js";/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Yt=({finisher:t,descriptor:e})=>(o,n)=>{var i;if(n===void 0){const r=(i=o.originalKey)!==null&&i!==void 0?i:o.key,s=e!=null?{kind:"method",placement:"prototype",key:r,descriptor:e(o.key)}:{...o,key:r};return t!=null&&(s.finisher=function(O){t(O,r)}),s}{const r=o.constructor;e!==void 0&&Object.defineProperty(o,n,e(n)),t?.(r,n)}};/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function _t(t,e){return Yt({descriptor:o=>({get(){var i,r;return(r=(i=this.renderRoot)===null||i===void 0?void 0:i.querySelector(t))!==null&&r!==void 0?r:null},enumerable:!0,configurable:!0})})}const At=u`
+  ${l(`
+  ${b(p.Link)} {
+    font-family: 'Rubik', sans-serif;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.25rem;    
+  }
+  @media only screen and (max-width: ${g.TABLET}px) {
+    ${b(p.Link)} {   
+      font-size: 0.938rem;
+      line-height: 1.125rem;    
+    }  
+  }
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    ${b(p.Link)} {   
+      font-size: 0.875rem;
+      line-height: 1rem;    
+    }  
+  }
+`)}
+`,Ft=u`
+  ${l(`
+  ${b(p.XL)} {
+    font-size: 3.375rem;
+    font-weight: 600;
+    line-height: 3.688rem;
+  }
+
+  ${b(p.L)} {
+    font-size: 2.813rem;
+    font-weight: 600;
+    line-height: 3.375rem;
+  }
+
+  ${b(p.M)} {
+    font-size: 2.313rem;
+    font-weight: 600;
+    line-height: 2.75rem;
+  }
+
+  ${b(p.S)} {
+    font-size: 1.938rem;
+    font-weight: 600;
+    line-height: 2.313rem;
+  }
+
+  ${b(p.XS)} {
+    font-size: 1.313rem;
+    font-weight: 600;
+    line-height: 1.563rem;
+  }
+
+  ${b(p.Body1)} {
+    font-size: 1.125rem;
+    font-weight: 300;
+    line-height: 1.688rem;
+  }
+
+  ${b(p.Body2)} {
+    font-size: 0.938rem;
+    font-weight: 300;
+    line-height: 1.313rem;
+  }
+
+  ${b(p.Field1)} {
+    font-size: 1rem;
+    font-weight: 300;
+    line-height: 1.25rem;
+  }
+
+  ${b(p.Field2)} {
+    font-size: 0.75rem;
+    font-weight: 300;
+    line-height: 0.875rem;
+  }
+
+  @media only screen and (max-width: ${g.TABLET}px) {
+    ${b(p.XL)} {
+      font-size: 3rem;
+      line-height: 3.313rem;
+    }
+    ${b(p.L)} {
+      font-size: 2.5rem;
+      line-height: 3rem;
+    }
+    ${b(p.M)} {
+      font-size: 2.063rem;
+      line-height: 2.5rem;
+    }
+    ${b(p.S)} {
+      font-size: 1.75rem;
+      line-height: 2.125rem;
+    }
+    ${b(p.XS)} {
+      font-size: 1.188rem;
+      line-height: 1.438rem;
+    }
+
+    ${b(p.Body1)} {
+      font-size: 1rem;
+      line-height: 1.5rem;
+    }
+
+    ${b(p.Body2)} {
+      font-size: 0.875rem;
+      line-height: 1.125rem;
+    }
+
+    ${b(p.Field1)} {
+      font-size: 0.938rem;
+      line-height: 1.125rem;
+    }
+  }
+
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    ${b(p.Body1)} {
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1.313rem;
+    }
+    ${b(p.Body2)} {
+      font-size: 0.75rem;
+      line-height: 1rem;
+    }
+    ${b(p.Field1)} {
+      font-size: 0.875rem;
+      font-weight: 300;
+      line-height: 1rem;
+    }
+    ${b(p.XL)} {
+      font-size: 2.625rem;
+      line-height: 2.875rem;
+    }
+    ${b(p.L)} {
+      font-size: 2.188rem;
+      line-height: 2.438rem;
+    }
+    ${b(p.M)} {
+      font-size: 1.813rem;
+      line-height: 2rem;
+    }
+    ${b(p.S)} {
+      font-size: 1.5rem;
+      line-height: 1.625rem;
+    }
+    ${b(p.XS)} {
+      font-size: 1.063rem;
+      line-height: 1.188rem;
+    }
+  }
+`)}
+`;/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const E=St(class extends Et{constructor(t){var e;if(super(t),t.type!==Ot.ATTRIBUTE||t.name!=="class"||((e=t.strings)===null||e===void 0?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(t,[e]){var o,n;if(this.it===void 0){this.it=new Set,t.strings!==void 0&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter((r=>r!==""))));for(const r in e)e[r]&&!(!((o=this.nt)===null||o===void 0)&&o.has(r))&&this.it.add(r);return this.render(e)}const i=t.element.classList;this.it.forEach((r=>{r in e||(i.remove(r),this.it.delete(r))}));for(const r in e){const s=!!e[r];s===this.it.has(r)||!((n=this.nt)===null||n===void 0)&&n.has(r)||(s?(i.add(r),this.it.add(r)):(i.remove(r),this.it.delete(r)))}return It}}),B="--t-link-text-color",Ut=u`
+  ${l(`
+  :host {
+    --t-link-border-color: ${c.MAIN};
+    ${B}: ${c.MAIN}
+  }
+
+  :host([dark]) {
+    --t-link-border-color: ${h.MAIN};
+    ${B}: ${h.MAIN}
+  }
+
+  :host([variant=${Q.SECONDARY}]) {
+    --t-link-border-color: ${c.WHITE};
+    ${B}: ${c.WHITE}
+  }
+
+  :host([variant=${Q.SECONDARY}][dark]) {
+    --t-link-border-color: ${h.WHITE};
+    ${B}: ${h.WHITE}
+  }
+
+  :host([disabled]) .link.disabled {
+    --t-link-border-color: ${c.PRIMARY_300};
+    ${B}: ${c.PRIMARY_300}
+  }
+
+  .link {    
+    text-decoration: none;
+    display: inline;
+    color: var(${B});
+    border-bottom: solid 1px var(--t-link-border-active-color, transparent);
+  }
+  .link:hover {
+    border-bottom: solid 1px var(--t-link-border-color);
+    cursor: pointer;
+  }
+  .link.secondary {
+    color: var(${B});
+  }
+  .link.secondary:hover {
+    border-bottom: solid 1px var(--t-link-border-color);
+  }  
+  .link.disabled {
+    border-bottom: solid 1px var(--t-link-border-color);
+    color: var(${B});
+    cursor: not-allowed;
+  }  
+`)}
+`;var Xt=Object.defineProperty,Wt=Object.getOwnPropertyDescriptor,ht=(t,e,o,n)=>{for(var i=n>1?void 0:n?Wt(e,o):e,r=t.length-1,s;r>=0;r--)(s=t[r])&&(i=(n?s(e,o,i):s(i))||i);return n&&i&&Xt(e,o,i),i};let tt=class extends H{constructor(){super(...arguments),this.size=p.Body1,this.color=N.PRIMARY,this.dark=!1,this._getStyleMap=()=>({color:`var(${B}, ${this._getTextColor()})`}),this._getClassMap=()=>({text:!0,[this.size]:!0})}_getTextColor(){return(this.dark?Dt:Bt)[this.color||N.PRIMARY]}render(){return d` <div
+      class="${E(this._getClassMap())}"
+      style="${dt(this._getStyleMap())}"
+    >
+      <slot></slot>
+    </div>`}};tt.styles=[u`
+      ${l(b("text"))} {
+        font-family: 'Rubik', sans-serif;
+        display: inline;
+        margin: 0;
+      }
+    `,Ft,At,Rt];ht([a({type:p})],tt.prototype,"size",2);ht([a({type:N})],tt.prototype,"color",2);ht([a({type:Boolean,reflect:!0})],tt.prototype,"dark",2);tt=ht([M("tuix-text")],tt);var Kt=Object.defineProperty,Gt=Object.getOwnPropertyDescriptor,ut=(t,e,o,n)=>{for(var i=n>1?void 0:n?Gt(e,o):e,r=t.length-1,s;r>=0;r--)(s=t[r])&&(i=(n?s(e,o,i):s(i))||i);return n&&i&&Kt(e,o,i),i};let et=class extends jt{constructor(){super(...arguments),this.full=!1}_updateIconColor(){!this.iconLeft&&!this.iconRight||(this.iconColor=this._getTextColor())}_buttonContent(){let t=st.MEDIUM;return screen.width<=g.TABLET&&(t=st.SMALL),d` <div class="container">
+      ${this.iconLeft?this._iconTemplate(this.iconLeft,t):z}
+      <slot></slot>
+      ${this.iconRight?this._iconTemplate(this.iconRight,t):z}
+    </div>`}};et.styles=[u`
+      :host([full]) .button {
+        width: 100%;
+      }
+      .button {
+        padding: 16px 32px;
+        border-radius: 4px;
+        border: none;
+        font-family: 'Rubik', sans-serif;
+      }
+
+      @media only screen and (max-width: ${g.TABLET}px) {
+        .button {
+          padding: 14px 32px;
+        }
+      }
+
+      @media only screen and (max-width: ${g.MOBILE}px) {
+        .button {
+          padding: 12px 24px;
+        }
+      }
+
+      .container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+      }
+
+      @media only screen and (max-width: ${g.MOBILE}px) {
+        .container {
+          gap: 6px;
+        }
+      }
+    `,Nt,Vt,Rt];ut([a({type:Boolean,reflect:!0})],et.prototype,"full",2);ut([a({type:k})],et.prototype,"iconRight",2);ut([a({type:k})],et.prototype,"iconLeft",2);et=ut([M("tuix-button")],et);const qt=Object.values(Z).slice(1,-1).map((t,e)=>`
+  .elevation.variant_${t} {
+    box-shadow: 0px ${2**e}px ${2**(e+2)}px ${c.SHADOW};
+  }
+  .elevation.dark_${t} {
+    background-color:rgb(${23+3*e},${23+3*e},${26+5*e});
+  }`).join(`
+`),Jt=u`
+  ${l(`
+  .elevation {
+    background-color: ${c.WHITE};
+  }
+  .elevation.dark_${Z.VARIANT_0} {
+    background-color: ${c.BLACK};
+  }
+  ${qt}
+  .elevation.variant_${Z.VARIANT_4} {
+    box-shadow: 0px 7px 24px ${c.SHADOW};
+  }
+  .elevation.dark_${Z.VARIANT_4} {
+    background-color: rgb(33, 33, 40);
+  }
+`)}
+`;var Qt=Object.defineProperty,Zt=Object.getOwnPropertyDescriptor,bt=(t,e,o,n)=>{for(var i=n>1?void 0:n?Zt(e,o):e,r=t.length-1,s;r>=0;r--)(s=t[r])&&(i=(n?s(e,o,i):s(i))||i);return n&&i&&Qt(e,o,i),i};let it=class extends H{constructor(){super(...arguments),this.elevation=Z.VARIANT_1,this.borderRadius=Ht.NONE,this.dark=!1}_getOptionalClasses(){const t=`variant_${this.elevation}`,e=`dark_${this.elevation}`;return{elevation:!0,[t]:!this.dark,[e]:this.dark}}render(){return d` <div
+      class="${E(this._getOptionalClasses())}"
+      style="${dt({borderRadius:this.borderRadius})}"
+    >
+      <slot></slot>
+    </div>`}};it.styles=[Jt];bt([a({type:Z})],it.prototype,"elevation",2);bt([a({type:String,attribute:"border-radius"})],it.prototype,"borderRadius",2);bt([a({type:Boolean,reflect:!0})],it.prototype,"dark",2);it=bt([M("tuix-paper")],it);var pt=(t=>(t.BLANK="_blank",t.SELF="_self",t.PARENT="_parent",t.TOP="_top",t))(pt||{}),te=Object.defineProperty,ee=Object.getOwnPropertyDescriptor,ot=(t,e,o,n)=>{for(var i=n>1?void 0:n?ee(e,o):e,r=t.length-1,s;r>=0;r--)(s=t[r])&&(i=(n?s(e,o,i):s(i))||i);return n&&i&&te(e,o,i),i};let U=class extends H{constructor(){super(...arguments),this.target=pt.BLANK,this.variant=Q.PRIMARY,this.disabled=!1,this.dark=!1}_getClassMap(){return{link:!0,disabled:this.disabled,[Q.SECONDARY]:this.variant===Q.SECONDARY}}_anchorTemplate(){return d`
+      <a
+        target="${this.disabled?pt.SELF:this.target}"
+        class="${E(this._getClassMap())}"
+        href="${this.disabled?"javascript:void(0)":this.href}"
+      >
+        <slot></slot>
+      </a>
+    `}_divTemplate(){return d`
+      <div class="${E(this._getClassMap())}">
+        <slot></slot>
+      </div>
+    `}render(){return this.href&&!this.disabled?this._anchorTemplate():this._divTemplate()}};U.styles=[Ut,At];ot([a({type:String})],U.prototype,"href",2);ot([a({type:pt})],U.prototype,"target",2);ot([a({type:Q,reflect:!0})],U.prototype,"variant",2);ot([a({type:Boolean,reflect:!0})],U.prototype,"disabled",2);ot([a({type:Boolean,reflect:!0})],U.prototype,"dark",2);U=ot([M("tuix-link")],U);const Pt=t=>{const o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return o?{r:parseInt(o[1],16),g:parseInt(o[2],16),b:parseInt(o[3],16)}:{r:0,g:0,b:0}},F={gapX:"10px",iconDesktopSize:"1.5rem",iconMobileSize:"1rem"},mt=Pt(h.VALIDATION),vt=Pt(h.ERROR),Lt=u`
+  :host {
+    --t-field-color-form: ${l(c.PRIMARY_50)};
+    --t-field-color-title: ${l(c.PRIMARY_600)};
+    --t-field-color-text: ${l(c.BLACK)};
+    --t-field-color-description: ${l(c.NEUTRAL_600)};
+    --t-field-color-stroke-hover: ${l(c.PRIMARY_300)};
+    --t-field-color-stroke-focus: ${l(c.MAIN)};
+    --t-field-color-text-disabled: ${l(c.PRIMARY_300)};
+    --t-field-color-stroke-validation: ${l(c.VALIDATION_200)};
+    --t-field-color-bg-validation: ${l(c.VALIDATION_50)};
+    --t-field-color-stroke-loading: ${l(c.PRIMARY_300)};
+    --t-field-color-bg-error: ${l(c.ERROR_50)};
+    --t-field-color-stroke-error: ${l(c.ERROR_200)};
+    --t-field-input-cursor: auto;
+    --t-field-font-size: 1rem;
+    --t-field-font-weight: 300;
+    --t-field-line-height: 1.25rem;
+    --t-field-padding-x: 1.25rem;
+    --t-field-padding-y: 1.125rem;
+    --t-field-padding-top: 1.625rem;
+    --t-field-padding-bottom: 0.625rem;
+    --t-field-title-left-position: 1.25rem;
+  }
+  :host([dark]) {
+    --t-field-color-form: ${l(h.PRIMARY_950)};
+    --t-field-color-text: ${l(h.PRIMARY_100)};
+    --t-field-color-description: ${l(h.NEUTRAL_200)};
+    --t-field-color-stroke-focus: ${l(h.SECONDARY)};
+    --t-field-color-text-disabled: ${l(h.PRIMARY_800)};
+    --t-field-color-stroke-validation: ${l(h.VALIDATION_200)};
+    --t-field-color-bg-validation: rgba(
+      ${mt.r},
+      ${mt.g},
+      ${mt.b},
+      0.2
+    );
+    --t-field-color-bg-error: rgba(
+      ${vt.r},
+      ${vt.g},
+      ${vt.b},
+      0.2
+    );
+    --t-field-color-stroke-error: ${l(h.ERROR_200)};
+  }
+`,ie=u`
+  .t-textarea-main-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+  .t-input-container {
+    position: relative;
+    --t-padding-x-desktop-with-icon: calc(
+      var(--t-field-padding-x) + ${l(F.iconDesktopSize)} +
+        ${l(F.gapX)}
+    );
+    --t-padding-x-mobile-with-icon: calc(
+      var(--t-field-padding-x) + ${l(F.iconMobileSize)} +
+        ${l(F.gapX)}
+    );
+    --t-border-size: 1px;
+  }
+  .t-input-container.t-textarea-container {
+    height: 100%;
+  }
+  .t-input {
+    padding: calc(var(--t-field-padding-y) - var(--t-border-size))
+      var(--t-field-padding-x);
+    border-radius: 4px;
+    font-family: 'Rubik', sans-serif;
+    cursor: var(--t-field-input-cursor);
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .t-input.t-textarea {
+    height: 100%;
+    display: block;
+  }
+  .t-input.with-title {
+    padding-top: calc(var(--t-field-padding-top) - var(--t-border-size));
+    padding-bottom: calc(var(--t-field-padding-bottom) - var(--t-border-size));
+  }
+  .t-input.with-icon-right {
+    padding-right: var(--t-padding-x-desktop-with-icon);
+  }
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    .t-input.with-icon-right {
+      padding-right: var(--t-padding-x-mobile-with-icon);
+    }
+  }
+`,oe=u`
+  .t-input::placeholder,
+  .t-input,
+  .t-title {
+    font-size: var(--t-field-font-size);
+    font-weight: var(--t-field-font-weight);
+    line-height: var(--t-field-line-height);
+  }
+  @media only screen and (max-width: ${g.TABLET}px) {
+    :host {
+      --t-field-font-size: 0.813rem;
+      --t-field-line-height: 1.125rem;
+      --t-field-padding-y: 1.063rem;
+      --t-field-padding-top: 1.5rem;
+    }
+  }
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    :host {
+      --t-field-font-size: 0.813rem;
+      --t-field-line-height: 1rem;
+      --t-field-padding-y: 1rem;
+      --t-field-padding-top: 1.375rem;
+    }
+  }
+`,re=u`
+  .t-input {
+    background-color: var(--t-field-color-form);
+    border: 1px solid var(--t-field-color-form);
+    color: var(--t-field-color-text);
+  }
+  .t-input-container:hover .t-input,
+  .t-input:hover {
+    border: 1px solid var(--t-field-color-stroke-hover);
+  }
+  .t-input:focus {
+    border: 1px solid var(--t-field-color-stroke-focus);
+    outline: 1px solid var(--t-field-color-stroke-focus);
+  }
+  .t-input[disabled]:disabled {
+    cursor: not-allowed;
+    border: 1px solid var(--t-field-color-form);
+    color: var(--t-field-color-text-disabled);
+  }
+  .t-input.with-title::placeholder {
+    color: transparent;
+  }
+  .t-input::placeholder,
+  .t-input.with-title:focus::placeholder {
+    color: var(--t-field-color-title);
+  }
+  .t-input.with-warning {
+    border: 1px solid var(--t-field-color-stroke-validation);
+    background-color: var(--t-field-color-bg-validation);
+  }
+  .t-input.with-error {
+    border: 1px solid var(--t-field-color-stroke-error);
+    background-color: var(--t-field-color-bg-error);
+  }
+  .t-input.with-loading {
+    border: 1px solid var(--t-field-color-stroke-loading);
+  }
+`,ne=u`
+  .t-title {
+    position: absolute;
+    top: 50%;
+    left: var(--t-field-title-left-position);
+    font-family: 'Rubik', sans-serif;
+    color: var(--t-field-color-title);
+    transform: translateY(-50%);
+    transition-duration: 0.3s;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .t-textarea-container .t-title {
+    top: 1rem;
+    transform: none;
+  }
+  .t-input.with-title:focus + .t-title,
+  .t-input.with-title:not(:placeholder-shown) + .t-title {
+    font-size: 0.75rem;
+    font-weight: 300;
+    line-height: 0.875rem;
+    transform: translateY(0);
+    top: 0.5rem;
+  }
+`,se=u`
+  .t-input-container .t-icon-set-container {
+    height: ${l(F.iconDesktopSize)};
+    width: ${l(F.iconDesktopSize)};
+    cursor: var(--t-field-input-cursor);
+  }
+  .t-icon-set-container.t-icon-click {
+    cursor: pointer;
+  }
+  .t-input-container .t-icon-set-container.t-icon-right {
+    position: absolute;
+    top: 50%;
+    right: var(--t-field-padding-x);
+    transform: translateY(-50%);
+  }
+  .t-input-container .t-icon-set-container.t-icon-left {
+    position: absolute;
+    top: 50%;
+    left: var(--t-field-padding-x);
+    transform: translateY(-50%);
+  }
+  .t-icon-inactive {
+    display: inline;
+  }
+  .t-icon-active {
+    display: none;
+  }
+  .t-icon-disabled {
+    display: none;
+  }
+  .t-input-container:hover .t-icon-set-container .t-icon-inactive,
+  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,
+  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {
+    display: none;
+  }
+  .t-input-container:hover .t-icon-set-container .t-icon-active,
+  .t-input:hover ~ .t-icon-set-container .t-icon-active,
+  .t-input:focus ~ .t-icon-set-container .t-icon-active {
+    display: inline;
+  }
+  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {
+    display: none;
+  }
+  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {
+    display: none;
+  }
+  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {
+    display: inline;
+    cursor: not-allowed;
+  }
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    .t-input-container .t-icon-set-container {
+      height: ${l(F.iconMobileSize)};
+      width: ${l(F.iconMobileSize)};
+    }
+  }
+`,ae=u`
+  .t-input[type='search'] {
+    padding-left: var(--t-padding-x-desktop-with-icon);
+  }
+  .t-input[type='search'] + .t-title {
+    left: var(--t-padding-x-desktop-with-icon);
+  }
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    .t-input[type='search'] {
+      padding-left: var(--t-padding-x-mobile-with-icon);
+    }
+    .t-input[type='search'] + .t-title {
+      left: var(--t-padding-x-mobile-with-icon);
+    }
+  }
+  input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='search']::-webkit-search-results-button,
+  input[type='search']::-webkit-search-results-decoration {
+    display: none;
+  }
+`,le=u`
+  .t-input-description-container {
+    margin-top: 0.5rem;
+    font-family: 'Rubik', sans-serif;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: var(--t-field-color-description);
+    display: flex;
+    justify-content: space-between;
+  }
+  .t-input-description-container .t-letter-counter {
+    align-self: flex-end;
+  }
+  .t-input-description-container .t-input-description {
+    display: flex;
+    gap: 0.5rem;
+  }
+`;var f=(t=>(t.TEXT="text",t.SEARCH="search",t.PASSWORD="password",t.TEXT_AREA="textarea",t))(f||{}),yt=(t=>(t.LEFT="left",t.RIGHT="right",t))(yt||{}),w=(t=>(t.TEXT="text",t.WARNING="warning",t.ERROR="error",t.SUCCESS="success",t.LOADING="loading",t))(w||{});const ce={warning:k.TRIANGLE_EXCLAMATION,error:k.CIRCLE_X,success:k.CIRCLE_CHECK,loading:k.LOADER},de={warning:c.VALIDATION,error:c.ERROR,success:c.SUCCESS,loading:c.PRIMARY_300},pe={warning:h.VALIDATION,error:h.ERROR,success:h.SUCCESS,loading:h.PRIMARY_300},A={INACTIVE:"inactive",ACTIVE:"active",DISABLED:"disabled"};var _=[];for(var xt=0;xt<256;++xt)_.push((xt+256).toString(16).slice(1));function he(t,e=0){return(_[t[e+0]]+_[t[e+1]]+_[t[e+2]]+_[t[e+3]]+"-"+_[t[e+4]]+_[t[e+5]]+"-"+_[t[e+6]]+_[t[e+7]]+"-"+_[t[e+8]]+_[t[e+9]]+"-"+_[t[e+10]]+_[t[e+11]]+_[t[e+12]]+_[t[e+13]]+_[t[e+14]]+_[t[e+15]]).toLowerCase()}var lt,ue=new Uint8Array(16);function be(){if(!lt&&(lt=typeof crypto<"u"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!lt))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return lt(ue)}var ge=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto);const Tt={randomUUID:ge};function fe(t,e,o){if(Tt.randomUUID&&!t)return Tt.randomUUID();t=t||{};var n=t.random||(t.rng||be)();return n[6]=n[6]&15|64,n[8]=n[8]&63|128,he(n)}var me=Object.defineProperty,ve=Object.getOwnPropertyDescriptor,T=(t,e,o,n)=>{for(var i=n>1?void 0:n?ve(e,o):e,r=t.length-1,s;r>=0;r--)(s=t[r])&&(i=(n?s(e,o,i):s(i))||i);return n&&i&&me(e,o,i),i};let x=class extends H{constructor(){super(...arguments),this._inputId=this._setIdInput(),this.disabled=!1,this.value="",this.placeholder="",this.title="",this.type=f.TEXT,this.descriptionType=w.TEXT,this.dark=!1,this.readonly=!1,this.autofocus=!1,this._type=this.type,this._letterCounter=this.value?.length||0,this._previousType=this.type,this._previousValue="",this._generalIconColorsLight={[A.INACTIVE]:c.BLACK,[A.ACTIVE]:c.MAIN,[A.DISABLED]:c.PRIMARY_300},this._generalIconColorsDark={[A.INACTIVE]:h.PRIMARY_100,[A.ACTIVE]:h.MAIN,[A.DISABLED]:h.PRIMARY_800}}_handleInputBase(t,e){this.dispatchEvent(new CustomEvent(e,{detail:{value:(t.target instanceof HTMLInputElement||t.target instanceof HTMLTextAreaElement)&&t.target.value},bubbles:!0}))}_handleClickOnInput(){this.disabled||this.dispatchEvent(new CustomEvent("on-click",{bubbles:!0}))}_handleInput(t){this._handleInputBase(t,"on-change"),this._updateLetterCounter()}_handleBlur(t){this._handleInputBase(t,"on-blur")}_handlePasswordIconClick(){this._type===f.PASSWORD?(this._type=f.TEXT,this._inputElement.setAttribute("type",f.TEXT)):(this._type=f.PASSWORD,this._inputElement.setAttribute("type",f.PASSWORD))}_formatIconSet({iconName:t,colorByState:e,location:o=yt.RIGHT,clickHandler:n=void 0}){const i={"t-icon-set-container":!0,"t-icon-click":!!n,[`t-icon-${o}`]:!0};return d`<div
+      class="${E(i)}"
+      @click="${n}"
+    >
+      ${Object.entries(e).map(([r,s])=>d`<tuix-icon
+          size="${st.FULL}"
+          name="${t}"
+          color="${s}"
+          class="t-icon-${r}"
+        ></tuix-icon>`)}
+    </div>`}_updateLetterCounter(){this.maxlength!=null&&this.type===f.TEXT_AREA&&(this._letterCounter=Number(this._inputElement.value?.length))}_getInputTextFeatureTemplate(){return d`${this.iconRight?this._formatIconSet({iconName:this.iconRight,colorByState:this.dark?this._generalIconColorsDark:this._generalIconColorsLight}):z}`}_getInputSearchFeatureTemplate(){const t={[A.INACTIVE]:c.BLACK,[A.ACTIVE]:c.BLACK,[A.DISABLED]:c.PRIMARY_300},e={[A.INACTIVE]:h.PRIMARY_100,[A.ACTIVE]:h.PRIMARY_100,[A.DISABLED]:h.PRIMARY_800};return d`${this._formatIconSet({iconName:k.SEARCH,colorByState:this.dark?e:t,location:yt.LEFT})}`}_getInputPasswordFeatureTemplate(){return d`${this._formatIconSet({iconName:this._type===f.PASSWORD?k.EYE_CLOSE_LINE:k.EYE_ON,colorByState:this.dark?this._generalIconColorsDark:this._generalIconColorsLight,clickHandler:this._handlePasswordIconClick})} `}_getFeatureTemplateByInputType(){switch(this.type){case f.SEARCH:return this._getInputSearchFeatureTemplate();case f.TEXT:return this._getInputTextFeatureTemplate();case f.PASSWORD:return this._getInputPasswordFeatureTemplate();default:return d`${z}`}}_getInputElementClasses(){const t=this.type===f.PASSWORD||this.type===f.TEXT?!!this.iconRight:!1;return{"t-input":!0,"t-textarea":this.type===f.TEXT_AREA,"with-title":!!this.title,"with-icon-right":t,[`with-${this.descriptionType}`]:this.descriptionType!==w.TEXT}}_getInputContainerClasses(){return{"t-input-container":!0,"t-textarea-container":this.type===f.TEXT_AREA}}_getMainContainerClasses(){return{"t-textarea-main-container":this.type===f.TEXT_AREA}}_setIdInput(){return fe()}_getInputTemplate(){return d`<input
+      id=${this._inputId}
+      type="text"
+      class="${E(this._getInputElementClasses())}"
+      ?disabled="${this.disabled}"
+      ?readonly="${this.readonly}"
+      .value="${this.value}"
+      .type="${this.type}"
+      placeholder="${this.placeholder||" "}"
+      maxlength="${this.maxlength}"
+      @input="${this._handleInput}"
+      @blur="${this._handleBlur}"
+    >
+    </input>
+    ${this.title?d`<label for=${this._inputId} class="t-title"
+            >${this.title}</label
+          >`:z}
+    ${this._getFeatureTemplateByInputType()}
+    `}_getLetterCounterTemplate(){return this._hasLetterCounter()?d`<div class="t-letter-counter">
+      ${this.maxlength?d`${this._letterCounter}/${this.maxlength}`:z}
+    </div> `:d`${z}`}_hasLetterCounter(){return this.type===f.TEXT_AREA&&typeof this.maxlength=="number"&&this.maxlength>=0}_getTextAreaTemplate(){return d`<textarea
+        id="${this._inputId}"
+        class="${E(this._getInputElementClasses())}"
+        ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        .value="${this.value}"
+        placeholder="${this.placeholder}"
+        maxlength="${this.maxlength}"
+        @input="${this._handleInput}"
+        @blur="${this._handleBlur}"
+      ></textarea>
+      ${this.title?d`<label for=${this._inputId} class="t-title"
+            >${this.title}</label
+          >`:z} `}_getIconDescriptionTemplate(){return!this.descriptionType||this.descriptionType===w.TEXT?d`${z}`:d`<tuix-icon
+      size="${st.SMALL}"
+      name="${ce[this.descriptionType]}"
+      color="${this.dark?pe[this.descriptionType]:de[this.descriptionType]}"
+    >
+    </tuix-icon>`}_getDescriptionTemplate(){if(!this._hasValidDescriptionType())return d`<div></div>`;const e={[w.WARNING]:"Warning",[w.ERROR]:"Error",[w.SUCCESS]:"Success",[w.LOADING]:"Loading",[w.TEXT]:""};return d`<div class="t-input-description">
+      ${this._getIconDescriptionTemplate()}
+      <span
+        >${this.description??e[this.descriptionType]}</span
+      >
+    </div>`}_hasValidDescriptionType(){return Object.values(w).includes(this.descriptionType)}_getDescriptionContainerTemplate(){const t=this._hasLetterCounter(),e=this._hasValidDescriptionType()&&(this.descriptionType===w.TEXT?!!this.description:!0);return!t&&!e?d`${z}`:d`<div class="t-input-description-container">
+      ${this._getDescriptionTemplate()} ${this._getLetterCounterTemplate()}
+    </div>`}render(){return this._previousType!==this.type&&(this._previousType=this.type,this._type=this.type),this._previousValue!==this.value&&(this._previousValue=this.value,this._letterCounter=this.value.length),d`<div class="${E(this._getMainContainerClasses())}">
+      <div
+        class="${E(this._getInputContainerClasses())}"
+        @click="${this._handleClickOnInput}"
+      >
+        ${this.type===f.TEXT_AREA?this._getTextAreaTemplate():this._getInputTemplate()}
+      </div>
+      ${this._getDescriptionContainerTemplate()}
+    </div>`}updated(t){for(const[e]of t){if(this.disabled||this.readonly)break;String(e)==="autofocus"&&this.autofocus&&this._inputElement.focus()}}};x.styles=[Lt,ie,oe,re,ne,se,ae,le];T([a({type:Boolean,reflect:!0})],x.prototype,"disabled",2);T([a({type:k})],x.prototype,"iconRight",2);T([a({type:String})],x.prototype,"value",2);T([a({type:String})],x.prototype,"placeholder",2);T([a({type:String})],x.prototype,"title",2);T([a({type:f})],x.prototype,"type",2);T([a({type:Number})],x.prototype,"maxlength",2);T([a({type:String})],x.prototype,"description",2);T([a({type:w})],x.prototype,"descriptionType",2);T([a({type:Boolean,reflect:!0})],x.prototype,"dark",2);T([a({type:Boolean})],x.prototype,"readonly",2);T([a({type:Boolean,reflect:!0})],x.prototype,"autofocus",2);T([_t(".t-input-container .t-input")],x.prototype,"_inputElement",2);T([Y()],x.prototype,"_type",2);T([Y()],x.prototype,"_letterCounter",2);x=T([M("tuix-input")],x);const xe=u`
+  ${Lt}
+  :host {
+    --t-field-color-option: ${l(c.WHITE)};
+    --t-field-color-main: ${l(c.MAIN)};
+  }
+
+  :host .t-input-dropdown {
+    --t-field-font-weight: 300;
+    --t-field-font-size: 1rem;
+    --t-field-padding-x: 1rem;
+    --t-field-title-left-position: 1rem;
+  }
+
+  @media only screen and (max-width: ${g.TABLET}px) {
+    :host .t-input-dropdown {
+      --t-field-font-size: 0.938rem;
+      --t-field-line-height: 1.125rem;
+    }
+  }
+
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    :host .t-input-dropdown {
+      --t-field-font-size: 0.813rem;
+      --t-field-line-height: 1rem;
+    }
+  }
+
+  :host([dark]) {
+    --t-field-color-option: ${l(h.ELEVATION_2)};
+  }
+`,ye=u`
+  .t-dropdown-full-container {
+    position: relative;
+    font-family: 'Rubik', sans-serif;
+  }
+  .t-dropdown-container .t-input-dropdown {
+    --t-field-input-cursor: pointer;
+  }
+`,_e=u`
+  .t-options-container {
+    width: 100%;
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    border: none;
+    border-radius: 0 0 5px 5px;
+    background-color: var(--t-field-color-option);
+    visibility: collapse;
+    overflow-y: auto;
+    max-height: 250px;
+    color: var(--t-field-color-text);
+    box-shadow: 0px 2px 8px 0px ${l(c.SHADOW)};
+    z-index: 9999;
+  }
+  .t-options-container::-webkit-scrollbar {
+    width: 0.75rem;
+  }
+  .t-options-container::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  .t-options-container::-webkit-scrollbar-thumb {
+    background-color: ${l(c.PRIMARY_100)};
+    border-radius: 0.25rem;
+    border: 0.188rem solid transparent;
+    background-clip: content-box;
+  }
+  .t-options-container.show {
+    visibility: visible;
+  }
+  .t-options-container.show.t-with-description {
+    top: calc(100% + 2px - 1.5rem);
+  }
+  @media only screen and (max-height: 500px) {
+    .t-options-container {
+      max-height: 50vh;
+    }
+  }
+  .t-dropdown-option {
+    padding: var(--t-field-padding-y) 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 1.25rem;
+    font-weight: 300;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .t-dropdown-option.t-option-hover {
+    background-color: var(--t-field-color-form);
+  }
+  .t-dropdown-option.t-option-selected {
+    color: var(--t-field-color-main);
+  }
+  .t-dropdown-option.t-option-filtered {
+    display: none;
+  }
+  .t-dropdown-option:focus {
+    outline: none;
+  }
+  @media only screen and (max-width: ${g.TABLET}px) {
+    .t-dropdown-option {
+      font-size: 0.938rem;
+      line-height: 1.125rem;
+      --t-field-padding-y: 1.063rem;
+      --t-field-padding-top: 1.5rem;
+    }
+  }
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    .t-dropdown-option {
+      font-size: 0.813rem;
+      line-height: 1rem;
+      --t-field-padding-y: 1rem;
+      --t-field-padding-top: 1.375rem;
+    }
+  }
+`;var L=(t=>(t.SINGLE="single",t.SEARCH="search",t))(L||{}),$e=Object.defineProperty,we=Object.getOwnPropertyDescriptor,C=(t,e,o,n)=>{for(var i=n>1?void 0:n?we(e,o):e,r=t.length-1,s;r>=0;r--)(s=t[r])&&(i=(n?s(e,o,i):s(i))||i);return n&&i&&$e(e,o,i),i};let y=class extends H{constructor(){super(...arguments),this.value=void 0,this.options=[],this.placeholder="",this.title="",this.disabled=!1,this.dark=!1,this.descriptionType=w.TEXT,this.type=L.SINGLE,this._value="",this._isOptionsVisible=!1,this._searchingOption=!1,this._extendedOptions=[],this._previousSelectedOption=null,this._previousFocusedOption=null,this._handleClickOutside=t=>{t.composedPath().includes(this)||(this._isOptionsVisible=!1)}}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._handleClickOutside),this.addEventListener("blur",this._handleBlur.bind(this))}disconnectedCallback(){window.removeEventListener("click",this._handleClickOutside),super.disconnectedCallback()}_onEnterPress(t){t.key==="Enter"&&this._toggleOptions()}_onKeyDownOption(t){switch(t.key){case"ArrowDown":return this._handleArrowDown();case"ArrowUp":return this._handleArrowUp();case"Escape":this._isOptionsVisible=!1;break}}_onKeyPressOption(t){t.key==="Enter"&&this._onClickOption(t)}_onMouseOverOption(t){const e=t.target;this._focusTargetOption(e)}_onClickOption(t){const e=t.target;this._value=e.innerText,this._isOptionsVisible=!1,this._unselectPreviousOption(),e.classList.add("t-option-selected"),this._previousSelectedOption=e,this._handleSelectEvent(t)}_onInputSingle(t){this._handleInputBase(t,"input-single")}_handleSelectEvent(t){const e=t.target.getAttribute("data-value"),o=this.options[Number(e)];this.dispatchEvent(new CustomEvent("select",{detail:{value:this._getOptionValue(o)},bubbles:!0})),this.type===L.SEARCH&&(this._extendOptionsList(this._getOptionName(o)),this._searchingOption=!1)}_handleBlur(){if(this.type===L.SEARCH&&this._searchingOption){const t=this._previousSelectedOption?.getAttribute("data-value"),e=typeof t=="string"?this.options[Number(t)]:"";this._value=this._getOptionName(e),this._extendOptionsList()}}_getOptionName(t){return String(typeof t=="object"?t?.name:t)}_getOptionValue(t){return typeof t=="object"?t.value:t}_findIndex(t){return this._extendedOptions.findIndex(e=>e.value===this._getOptionValue(t))}_handleInputBase(t,e){this._searchingOption||(this._searchingOption=!0),this._extendOptionsList(t.detail.value),this._isOptionsVisible=!0,this.dispatchEvent(new CustomEvent(e,{detail:{value:t.detail.value},bubbles:!0})),this._value=t.detail.value}_extendOptionsList(t=""){t=t.trim(),this._extendedOptions=this.options.map(e=>{const o=this._getOptionName(e);return{name:o,value:this._getOptionValue(e),filtered:this.type===L.SEARCH&&t!==""&&!o.toLowerCase().includes(t.toLowerCase())}})}_handleArrowDown(){const t=this._previousFocusedOption?.nextElementSibling;t&&this._focusTargetOption(t)}_handleArrowUp(){const t=this._previousFocusedOption?.previousElementSibling;t&&this._focusTargetOption(t)}_focusTargetOption(t,e=!0){this._previousFocusedOption?.classList?.remove("t-option-hover"),t?.classList.add("t-option-hover"),e&&t?.focus(),this._previousFocusedOption=t}_toggleOptions(){this.disabled||(this._isOptionsVisible=!this._isOptionsVisible,this._isOptionsVisible&&this.type===L.SEARCH&&this._previousSelectedOption&&(this._optionsContainer?.scrollTo({top:this._previousSelectedOption.offsetTop,behavior:"auto"}),this._inputDropdown?.shadowRoot?.querySelector("input")?.select()))}_focusOptionsContainer(){if(this.type===L.SEARCH){this._previousSelectedOption&&this._focusTargetOption(this._previousSelectedOption,!1);return}if(!this._isOptionsVisible||!this._optionsContainer){this._inputDropdown?.shadowRoot?.querySelector("input")?.focus();return}if(this._previousSelectedOption)this._focusTargetOption(this._previousSelectedOption);else{const t=this._optionsContainer.firstElementChild;t&&this._focusTargetOption(t)}}_unselectPreviousOption(){this._previousSelectedOption&&(this._previousSelectedOption.classList?.remove("t-option-selected"),this._previousSelectedOption=null)}_hasCompleteDescription(){return Object.values(w).includes(this.descriptionType)&&(this.descriptionType===w.TEXT?!!this.description:!0)}_getOptionsContainerClasses(){return{"t-options-container":!0,show:this._isOptionsVisible,"t-with-description":this._hasCompleteDescription()}}_triggerUpdateByExternalValueChange(){if(this._unselectPreviousOption(),!this.value){this._value="",this._extendOptionsList();return}const t=this._findIndex(this.value);if(this.type===L.SEARCH&&this._extendOptionsList(""),t<0){this._value="";return}const e=this._optionsContainer?.children[t];e?.classList.add("t-option-selected"),this._previousSelectedOption=e||null,this._value=e?this._getOptionName(this.options[t]):""}_resetPreviousSelection(){this._value="",this._unselectPreviousOption()}_getOptionsTemplate(){return(this.type===L.SINGLE||this._searchingOption===!1)&&this._extendOptionsList(),this._extendedOptions?.map((t,e)=>d`<div
+        class="${E({"t-dropdown-option":!0,"t-option-filtered":t.filtered})}"
+        @click="${this._onClickOption}"
+        data-value="${e}"
+        tabindex="0"
+        @keydown="${this._onKeyDownOption}"
+        @keypress="${this._onKeyPressOption}"
+        @mouseover="${this._onMouseOverOption}"
+      >
+        ${t.name}
+      </div>`)}updated(t){t.has("_isOptionsVisible")?this._focusOptionsContainer():t.has("value")&&this._triggerUpdateByExternalValueChange()}willUpdate(t){t.has("options")&&this._resetPreviousSelection()}firstUpdated(t){super.firstUpdated(t),this._triggerUpdateByExternalValueChange()}render(){return d`<div class="t-dropdown-full-container">
+      <div class="t-dropdown-container">
+        <tuix-input
+          .value="${this._value}"
+          class="t-input-dropdown"
+          iconRight="${this._isOptionsVisible?k.CHEVRON_UP:k.CHEVRON_DOWN}"
+          placeholder="${this.placeholder}"
+          title="${this.title}"
+          .description="${this.description}"
+          descriptionType="${this.descriptionType}"
+          ?disabled="${this.disabled}"
+          ?dark="${this.dark}"
+          ?readonly="${this.type!==L.SEARCH}"
+          @on-click="${this._toggleOptions}"
+          @keypress="${this._onEnterPress}"
+          @on-change="${this._onInputSingle}"
+        >
+        </tuix-input>
+      </div>
+      <div class="${E(this._getOptionsContainerClasses())}">
+        ${this._getOptionsTemplate()}
+      </div>
+    </div>`}};y.styles=[xe,ye,_e];C([a({type:Object})],y.prototype,"value",2);C([a({type:Array})],y.prototype,"options",2);C([a({type:String})],y.prototype,"placeholder",2);C([a({type:String})],y.prototype,"title",2);C([a({type:Boolean,reflect:!0})],y.prototype,"disabled",2);C([a({type:Boolean,reflect:!0})],y.prototype,"dark",2);C([a({type:String})],y.prototype,"description",2);C([a({type:w})],y.prototype,"descriptionType",2);C([a({type:String})],y.prototype,"type",2);C([Y()],y.prototype,"_value",2);C([Y()],y.prototype,"_isOptionsVisible",2);C([Y()],y.prototype,"_searchingOption",2);C([Y()],y.prototype,"_extendedOptions",2);C([_t(".t-options-container")],y.prototype,"_optionsContainer",2);C([_t(".t-dropdown-container .t-input-dropdown")],y.prototype,"_inputDropdown",2);y=C([M("tuix-dropdown")],y);const $t=u`
+  :host {
+    --t-main-color-tuix: ${l(c.MAIN)};
+    --t-bg-color-primary: ${l(c.WHITE)};
+    --t-bg-color-disabled: ${l(c.PRIMARY_100)};
+    --t-text-color-error: ${l(c.ERROR)};
+    --t-stroke-color-focus: ${l(c.SECONDARY)};
+    --t-stroke-color-grey: ${l(c.PRIMARY_300)};
+    --t-text-color-label: ${l(c.BLACK)};
+    --t-label-right-default-justify: flex-start;
+    --t-label-left-default-justify: space-between;
+  }
+  :host([dark]) {
+    --t-main-color-tuix: ${l(h.MAIN)};
+    --t-bg-color-primary: ${l(h.BLACK)};
+    --t-bg-color-disabled: ${l(h.PRIMARY_800)};
+    --t-text-color-error: ${l(h.ERROR)};
+    --t-stroke-color-focus: ${l(h.SECONDARY)};
+    --t-stroke-color-grey: ${l(h.PRIMARY_100)};
+    --t-text-color-label: ${l(h.WHITE)};
+  }
+`,ke=u`
+  .t-checkbox-full-container {
+    display: flex;
+    justify-content: var(--t-label-right-default-justify, flex-start);
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  :host([disabled]) .t-checkbox-full-container {
+    cursor: not-allowed;
+  }
+  .t-checkbox-container {
+    --t-checkbox-size-box: 1.5rem;
+    --t-checkbox-shadow-width: 2px;
+    --t-checkbox-border-radius: 0.25rem;
+    display: block;
+    position: relative;
+    height: var(--t-checkbox-size-box);
+    width: var(--t-checkbox-size-box);
+    min-width: var(--t-checkbox-size-box);
+  }
+  .t-checkbox-container .t-checkbox {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    .t-checkbox-container {
+      --t-checkbox-size-box: 1rem;
+      --t-checkbox-shadow-width: 1px;
+      --t-checkbox-border-radius: 0.125rem;
+      margin-top: 1px;
+    }
+  }
+`,Te=u`
+  .t-checkbox-container .t-checkbox-checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: var(--t-checkbox-size-box);
+    width: var(--t-checkbox-size-box);
+    border-radius: var(--t-checkbox-border-radius);
+    background-color: var(--t-bg-color-primary);
+    border: 1px solid var(--t-stroke-color-grey);
+    box-sizing: border-box;
+  }
+  .t-checkbox-container .t-checkbox-checkmark tuix-icon {
+    margin: auto;
+    display: none;
+    width: calc(var(--t-checkbox-size-box) - 0.5rem);
+    height: calc(var(--t-checkbox-size-box) - 0.5rem);
+  }
+  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {
+    background-color: var(--t-main-color-tuix);
+    border: none;
+  }
+  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {
+    box-shadow: 0 0 0px var(--t-checkbox-shadow-width)
+      var(--t-stroke-color-focus);
+    border: 1px solid var(--t-main-color-tuix);
+  }
+  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {
+    display: block;
+  }
+  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {
+    border: 1px solid var(--t-main-color-tuix);
+  }
+  .t-checkbox-full-container.t-with-error
+    .t-checkbox-container
+    .t-checkbox-checkmark {
+    border: 1px solid var(--t-text-color-error);
+  }
+  .t-checkbox-full-container.t-with-error
+    .t-checkbox-container
+    .t-checkbox:checked
+    ~ .t-checkbox-checkmark {
+    background-color: var(--t-text-color-error);
+    border: none;
+  }
+
+  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {
+    background-color: var(--t-bg-color-disabled);
+    border: none;
+    box-shadow: none;
+  }
+`,Ce=u`
+  .t-checkbox-label {
+    display: block;
+    color: var(--t-text-color-label);
+    margin-left: 0.625rem;
+  }
+  .t-checkbox-full-container.t-with-label-left {
+    flex-direction: row-reverse;
+    justify-content: var(--t-label-left-default-justify, space-between);
+  }
+  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {
+    margin-right: 0.625rem;
+    margin-left: 0;
+  }
+`;var ct=(t=>(t.DEFAULT="default",t.DISABLED="disabled",t.ERROR="error",t))(ct||{}),G=(t=>(t.LEFT="left",t.RIGHT="right",t))(G||{});const Ie={default:c.WHITE,disabled:c.PRIMARY_300,error:c.WHITE},Se={default:h.WHITE,disabled:h.PRIMARY_100,error:h.WHITE};var Ee=Object.defineProperty,Oe=Object.getOwnPropertyDescriptor,q=(t,e,o,n)=>{for(var i=n>1?void 0:n?Oe(e,o):e,r=t.length-1,s;r>=0;r--)(s=t[r])&&(i=(n?s(e,o,i):s(i))||i);return n&&i&&Ee(e,o,i),i};let V=class extends H{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.dark=!1,this.error=!1,this.label="",this.labelSide=G.RIGHT}_onCheckboxChange(t){this.dispatchEvent(new CustomEvent("change",{detail:{value:t.target.checked,label:this.label},bubbles:!0}))}_getIconMode(){return this.disabled?ct.DISABLED:this.error?ct.ERROR:ct.DEFAULT}_getFullContainerClasses(){return{"t-checkbox-full-container":!0,"t-with-error":this.error&&!this.disabled,"t-with-label-left":this.labelSide===G.LEFT}}render(){return d`<label class="${E(this._getFullContainerClasses())}">
+      <div class="t-checkbox-container">
+        <input
+          type="checkbox"
+          class="t-checkbox"
+          .checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          @change="${this._onCheckboxChange}"
+        />
+        <div class="t-checkbox-checkmark">
+          <tuix-icon
+            size="${st.FULL}"
+            name="${k.CHECK}"
+            color="${this.dark?Se[this._getIconMode()]:Ie[this._getIconMode()]}"
+          >
+          </tuix-icon>
+        </div>
+      </div>
+      <div class="t-checkbox-label">
+        <slot>
+          <tuix-text
+            size="${p.Field1}"
+            color="${N.PRIMARY}"
+            ?dark="${this.dark}"
+          >
+            ${this.label}
+          </tuix-text>
+        </slot>
+      </div>
+    </label>`}};V.styles=[$t,ke,Te,Ce];q([a({type:Boolean})],V.prototype,"checked",2);q([a({type:Boolean,reflect:!0})],V.prototype,"disabled",2);q([a({type:Boolean,reflect:!0})],V.prototype,"dark",2);q([a({type:Boolean,reflect:!0})],V.prototype,"error",2);q([a({type:String})],V.prototype,"label",2);q([a({type:String})],V.prototype,"labelSide",2);V=q([M("tuix-checkbox")],V);const Re=u`
+  ${$t}
+  :host {
+    --t-margin-between-radio-buttons: 1rem;
+    --t-radio-button-inner-color-disabled: ${l(c.PRIMARY_300)};
+  }
+`,Ae=u`
+  .t-radio-button-full-container {
+    display: flex;
+    justify-content: var(--t-label-right-default-justify, flex-start);
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  :host([disabled]) .t-radio-button-full-container {
+    cursor: not-allowed;
+  }
+  .t-radio-button-container {
+    --t-radio-button-size-box: 1.5rem;
+    --t-radio-button-shadow-width: 2px;
+    display: block;
+    position: relative;
+    height: var(--t-radio-button-size-box);
+    width: var(--t-radio-button-size-box);
+    min-width: var(--t-radio-button-size-box);
+  }
+  .t-radio-button-container .t-radio-button {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    .t-radio-button-container {
+      --t-radio-button-size-box: 1rem;
+      --t-radio-button-shadow-width: 1px;
+      margin-top: 1px;
+    }
+  }
+`,Pe=u`
+  .t-radio-button-full-container.t-multiple-options {
+    margin-bottom: var(--t-margin-between-radio-buttons);
+  }
+  .t-radio-button-container .t-radio-button-checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: var(--t-radio-button-size-box);
+    width: var(--t-radio-button-size-box);
+    background-color: var(--t-bg-color-primary);
+    border: 1px solid var(--t-stroke-color-grey);
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+  .t-radio-button-container
+    .t-radio-button:checked
+    ~ .t-radio-button-checkmark {
+    border: 1px solid var(--t-main-color-tuix);
+  }
+  .t-radio-button-container .t-radio-button:focus ~ .t-radio-button-checkmark {
+    box-shadow: 0 0 0px var(--t-radio-button-shadow-width)
+      var(--t-stroke-color-focus);
+  }
+  .t-radio-button-full-container:hover
+    .t-radio-button-container
+    .t-radio-button-checkmark {
+    border: 1px solid var(--t-main-color-tuix);
+  }
+  .t-radio-button-full-container.t-with-error
+    .t-radio-button-container
+    .t-radio-button-checkmark {
+    border: 1px solid var(--t-text-color-error);
+  }
+
+  .t-radio-button-container
+    .t-radio-button:disabled
+    ~ .t-radio-button-checkmark {
+    background-color: var(--t-bg-color-disabled);
+    border: none;
+    box-shadow: none;
+  }
+`,Le=u`
+  .t-radio-button-container .t-radio-button-checkmark .t-radio-button-inner {
+    background-color: var(--t-main-color-tuix);
+    margin: auto;
+    height: calc(var(--t-radio-button-size-box) / 2 - 2px);
+    width: calc(var(--t-radio-button-size-box) / 2 - 2px);
+    border-radius: 50%;
+    display: none;
+  }
+  .t-radio-button-container
+    .t-radio-button:checked
+    ~ .t-radio-button-checkmark
+    .t-radio-button-inner {
+    display: block;
+  }
+  :host([error])
+    .t-radio-button-container
+    .t-radio-button-checkmark
+    .t-radio-button-inner {
+    background-color: var(--t-text-color-error);
+  }
+  :host([disabled])
+    .t-radio-button-container
+    .t-radio-button-checkmark
+    .t-radio-button-inner {
+    background-color: var(--t-radio-button-inner-color-disabled);
+    cursor: not-allowed;
+  }
+`,ze=u`
+  .t-radio-button-label {
+    display: block;
+    color: var(--t-text-color-label);
+    margin-left: 0.625rem;
+  }
+  .t-radio-button-full-container.t-with-label-left {
+    flex-direction: row-reverse;
+    justify-content: var(--t-label-left-default-justify, space-between);
+  }
+  .t-radio-button-full-container.t-with-label-left .t-radio-button-label {
+    margin-right: 0.625rem;
+    margin-left: 0;
+  }
+`;var Me=Object.defineProperty,De=Object.getOwnPropertyDescriptor,J=(t,e,o,n)=>{for(var i=n>1?void 0:n?De(e,o):e,r=t.length-1,s;r>=0;r--)(s=t[r])&&(i=(n?s(e,o,i):s(i))||i);return n&&i&&Me(e,o,i),i};let j=class extends H{constructor(){super(...arguments),this.disabled=!1,this.dark=!1,this.error=!1,this.options=[],this.labelSide=G.RIGHT,this.selectedOption=null}_onRadioButtonChange(t){this.dispatchEvent(new CustomEvent("change",{detail:{value:t.target.value},bubbles:!0}))}_getFullContainerClasses(){return{"t-radio-button-full-container":!0,"t-with-error":this.error&&!this.disabled,"t-with-label-left":this.labelSide===G.LEFT,"t-multiple-options":this.options.length>1}}_formatTemplate(t,e){return d`<label class="${E(this._getFullContainerClasses())}">
+      <div class="t-radio-button-container">
+        <input
+          type="radio"
+          class="t-radio-button"
+          ?disabled="${this.disabled}"
+          .value="${t}"
+          name="tuix-radio-button"
+          ?checked="${this.selectedOption===t}"
+          @change="${this._onRadioButtonChange}"
+        />
+        <div class="t-radio-button-checkmark">
+          <div class="t-radio-button-inner"></div>
+        </div>
+      </div>
+      <div class="t-radio-button-label">
+        <slot name="label-${e}">
+          <tuix-text
+            size="${p.Field1}"
+            color="${N.PRIMARY}"
+            ?dark="${this.dark}"
+          >
+            ${t}
+          </tuix-text>
+        </slot>
+      </div>
+    </label>`}render(){return d`${this.options.map((t,e)=>this._formatTemplate(t,e))}`}};j.styles=[Re,Ae,Pe,Le,ze];J([a({type:Boolean,reflect:!0})],j.prototype,"disabled",2);J([a({type:Boolean,reflect:!0})],j.prototype,"dark",2);J([a({type:Boolean,reflect:!0})],j.prototype,"error",2);J([a({type:Array})],j.prototype,"options",2);J([a({type:String})],j.prototype,"labelSide",2);J([a({type:String})],j.prototype,"selectedOption",2);j=J([M("tuix-radio-button")],j);const Be=u`
+  ${$t}
+  :host {
+    --t-bg-color-primary: ${l(c.PRIMARY_300)};
+    --t-bg-color-disabled: ${l(c.PRIMARY_100)};
+    --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);
+  }
+  :host([dark]) {
+    --t-bg-color-primary: ${l(h.PRIMARY_800)};
+    --t-bg-color-disabled: ${l(h.PRIMARY_800)};
+    --t-bg-color-inner: ${l(h.WHITE)};
+  }
+  :host([dark][disabled]) {
+    --t-bg-color-inner: ${l(h.MAIN)};
+  }
+`,Ne=u`
+  .t-toggle-button-full-container {
+    display: flex;
+    justify-content: var(--t-label-right-default-justify, flex-start);
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  :host([disabled]) .t-toggle-button-full-container {
+    cursor: not-allowed;
+  }
+  .t-toggle-button-container {
+    --t-toggle-button-size-box: 3rem;
+    --t-toggle-button-shadow-width: 2px;
+    --t-toggle-inner-radio: 1rem;
+    display: block;
+    position: relative;
+    height: calc(var(--t-toggle-button-size-box) / 2);
+    width: var(--t-toggle-button-size-box);
+    min-width: var(--t-toggle-button-size-box);
+  }
+  .t-toggle-button-container .t-toggle-button {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+  .t-radio-button-full-container:not(.t-with-label-left) {
+    justify-content: flex-start;
+  }
+  @media only screen and (max-width: ${g.MOBILE}px) {
+    .t-toggle-button-container {
+      --t-toggle-button-size-box: 2rem;
+      --t-toggle-button-shadow-width: 1px;
+      --t-toggle-inner-radio: 0.75rem;
+      margin-top: 1px;
+    }
+  }
+`,Ve=u`
+  .t-toggle-button-container .t-toggle-button-checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: calc(var(--t-toggle-button-size-box) / 2);
+    width: var(--t-toggle-button-size-box);
+    border-radius: 0.75rem;
+    background-color: var(--t-bg-color-primary);
+    box-sizing: border-box;
+  }
+  .t-toggle-button-container
+    .t-toggle-button:checked
+    ~ .t-toggle-button-checkmark {
+    background-color: var(--t-main-color-tuix);
+  }
+  .t-toggle-button-full-container:hover
+    .t-toggle-button-container
+    .t-toggle-button-checkmark {
+    box-shadow: 0px 4px 4px 0px var(--t-toggle-shadow-color-focus);
+  }
+  .t-toggle-button-container
+    .t-toggle-button:focus
+    ~ .t-toggle-button-checkmark {
+    box-shadow: 0 0 0px var(--t-toggle-button-shadow-width)
+      var(--t-stroke-color-focus);
+  }
+  .t-toggle-button-container
+    .t-toggle-button:disabled
+    ~ .t-toggle-button-checkmark {
+    background-color: var(--t-bg-color-disabled);
+    box-shadow: none;
+  }
+`,je=u`
+  .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {
+    background-color: var(--t-bg-color-inner, ${l(c.WHITE)});
+    margin: auto auto auto calc(var(--t-toggle-button-shadow-width) * 2);
+    height: var(--t-toggle-inner-radio);
+    width: var(--t-toggle-inner-radio);
+    border-radius: 50%;
+    display: block;
+    transition: 0.3s;
+  }
+  .t-toggle-button-container
+    .t-toggle-button:checked
+    ~ .t-toggle-button-checkmark
+    .t-toggle-button-inner {
+    transform: translateX(
+      calc(
+        var(--t-toggle-button-size-box) - var(--t-toggle-inner-radio) -
+          var(--t-toggle-button-shadow-width) * 4
+      )
+    );
+  }
+`,He=u`
+  .t-toggle-button-label {
+    display: block;
+    color: var(--t-text-color-label);
+    margin-left: 0.625rem;
+  }
+  .t-toggle-button-full-container.t-with-label-left {
+    flex-direction: row-reverse;
+    justify-content: var(--t-label-left-default-justify, space-between);
+  }
+  .t-toggle-button-full-container.t-with-label-left .t-toggle-button-label {
+    margin-right: 0.625rem;
+    margin-left: 0;
+  }
+`;var Ye=Object.defineProperty,Fe=Object.getOwnPropertyDescriptor,rt=(t,e,o,n)=>{for(var i=n>1?void 0:n?Fe(e,o):e,r=t.length-1,s;r>=0;r--)(s=t[r])&&(i=(n?s(e,o,i):s(i))||i);return n&&i&&Ye(e,o,i),i};let X=class extends H{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.dark=!1,this.label="",this.labelSide=G.RIGHT}_onToggleButtonChange(t){this.dispatchEvent(new CustomEvent("change",{detail:{value:t.target.checked,label:this.label},bubbles:!0}))}_getFullContainerClasses(){return{"t-toggle-button-full-container":!0,"t-with-label-left":this.labelSide===G.LEFT}}render(){return d`<label class="${E(this._getFullContainerClasses())}">
+      <div class="t-toggle-button-container">
+        <input
+          type="checkbox"
+          class="t-toggle-button"
+          .checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          @change="${this._onToggleButtonChange}"
+        />
+        <div class="t-toggle-button-checkmark">
+          <div class="t-toggle-button-inner"></div>
+        </div>
+      </div>
+      <div class="t-toggle-button-label">
+        <slot>
+          <tuix-text
+            size="${p.Field1}"
+            color="${N.PRIMARY}"
+            ?dark="${this.dark}"
+          >
+            ${this.label}
+          </tuix-text>
+        </slot>
+      </div>
+    </label>`}};X.styles=[Be,Ne,Ve,je,He];rt([a({type:Boolean})],X.prototype,"checked",2);rt([a({type:Boolean,reflect:!0})],X.prototype,"disabled",2);rt([a({type:Boolean,reflect:!0})],X.prototype,"dark",2);rt([a({type:String})],X.prototype,"label",2);rt([a({type:String})],X.prototype,"labelSide",2);X=rt([M("tuix-toggle-button")],X);/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Ct=(t,e,o)=>{const n=new Map;for(let i=e;i<=o;i++)n.set(t[i],i);return n},Ue=St(class extends Et{constructor(t){if(super(t),t.type!==Ot.CHILD)throw Error("repeat() can only be used in text expressions")}ct(t,e,o){let n;o===void 0?o=e:e!==void 0&&(n=e);const i=[],r=[];let s=0;for(const O of t)i[s]=n?n(O,s):s,r[s]=o(O,s),s++;return{values:r,keys:i}}render(t,e,o){return this.ct(t,e,o).values}update(t,[e,o,n]){var i;const r=zt(t),{values:s,keys:O}=this.ct(e,o,n);if(!Array.isArray(r))return this.ut=O,s;const W=(i=this.ut)!==null&&i!==void 0?i:this.ut=[],P=[];let at,wt,m=0,I=r.length-1,v=0,R=s.length-1;for(;m<=I&&v<=R;)if(r[m]===null)m++;else if(r[I]===null)I--;else if(W[m]===O[v])P[v]=K(r[m],s[v]),m++,v++;else if(W[I]===O[R])P[R]=K(r[I],s[R]),I--,R--;else if(W[m]===O[R])P[R]=K(r[m],s[R]),nt(t,P[R+1],r[m]),m++,R--;else if(W[I]===O[v])P[v]=K(r[I],s[v]),nt(t,r[m],r[I]),I--,v++;else if(at===void 0&&(at=Ct(O,v,R),wt=Ct(W,m,I)),at.has(W[m]))if(at.has(W[I])){const D=wt.get(O[v]),gt=D!==void 0?r[D]:null;if(gt===null){const kt=nt(t,r[m]);K(kt,s[v]),P[v]=kt}else P[v]=K(gt,s[v]),nt(t,r[m],gt),r[D]=null;v++}else ft(r[I]),I--;else ft(r[m]),m++;for(;v<=R;){const D=nt(t,P[R+1]);K(D,s[v]),P[v++]=D}for(;m<=I;){const D=r[m++];D!==null&&ft(D)}return this.ut=O,Mt(t,P),It}}),Xe=u`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .table_wrapper {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  table {
+    min-width: 650px;
+    table-layout: fixed;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  thead th {
+    box-sizing: border-box;
+    padding: 8px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  tbody tr td {
+    box-sizing: border-box;
+    height: 52px;
+    padding: 6px 8px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  ::slotted(*) {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 8px;
+    gap: 10px;
+  }
+
+  .dropdown_container {
+    position: relative;
+    border-radius: 4px;
+  }
+
+  .dropdown_container .items-per-page-dropdown {
+    width: 55px;
+    border: none;
+    background-color: transparent;
+    padding: 8px;
+    cursor: pointer;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+
+  .dropdown_container .items-per-page-dropdown:focus-visible {
+    border: none;
+    outline: none;
+  }
+
+  .dropdown_container .arrow-icon {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    cursor: pointer;
+    pointer-events: none;
+  }
+
+  footer.table_footer {
+    height: 48px;
+    padding: 8px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  footer.table_footer .items-per-page {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  footer.table_footer .navigation {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  footer.table_footer .navigation .buttons {
+    display: flex;
+    gap: 8px;
+    cursor: pointer;
+  }
+
+  .mobile_table {
+    display: none;
+  }
+
+  @media only screen and (max-width: ${g.TABLET}px) {
+    .mobile_table {
+      display: block;
+    }
+
+    footer.table_footer {
+      align-items: flex-start;
+      gap: 8px;
+    }
+
+    .mobile_table .table_row {
+      display: flex;
+      min-height: 40px;
+    }
+
+    .mobile_table .table_row > * {
+      padding: 0 16px;
+      width: 50%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+    }
+  }
+`,We=u`
+  .tuix-spinner-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 24px 0;
+  }
+
+  .three-dots-wrapper {
+    display: inline-flex;
+    gap: calc(var(--dot-size) * 0.5);
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+  .three-dots-wrapper .dot {
+    width: var(--dot-size);
+    height: var(--dot-size);
+    background: var(--dot-color);
+    border-radius: 50%;
+    display: inline-block;
+    animation: threeDots 0.9s infinite ease-in-out both;
+  }
+  .three-dots-wrapper .dot:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+  .three-dots-wrapper .dot:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+
+  @keyframes threeDots {
+    0%,
+    80%,
+    100% {
+      transform: scale(0.6);
+      opacity: 0.6;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+  }
+
+  .clientsLoader,
+  .mobileClientsLoader,
+  .tabletClientsLoader {
+    display: flex;
+    justify-content: center;
+    padding: 16px 0;
+  }
+`;var Ke=Object.defineProperty,Ge=Object.getOwnPropertyDescriptor,S=(t,e,o,n)=>{for(var i=n>1?void 0:n?Ge(e,o):e,r=t.length-1,s;r>=0;r--)(s=t[r])&&(i=(n?s(e,o,i):s(i))||i);return n&&i&&Ke(e,o,i),i};let $=class extends H{constructor(){super(...arguments),this.paginated=!1,this.disableMobileTable=!1,this.showMobileTableInTablet=!1,this.data=[],this.headers=[],this.pageSizeOptions=[5,10,20],this.isLoadingData=!1,this._isTabletView=!1,this._isMobileView=!1,this._headerPercents=[],this._onScreenSizeChange=()=>{this._isTabletView=!!this._mqTablet?.matches,this._isMobileView=!!this._mqMobile?.matches},this._nextPage=()=>{if(this.currentPage===this.totalPages)return;const e={page:Math.min(this.totalPages,this._effectiveCurrentPage+1),pageSize:this._effectivePageSize};this.dispatchEvent(new CustomEvent("next-page",{detail:e,bubbles:!0,composed:!0}))},this._prevPage=()=>{if(this.currentPage===1)return;const e={page:Math.max(1,this._effectiveCurrentPage-1),pageSize:this._effectivePageSize};this.dispatchEvent(new CustomEvent("previous-page",{detail:e,bubbles:!0,composed:!0}))},this._setPageSize=t=>{const n={page:1,pageSize:Math.max(1,Math.floor(t))};this.dispatchEvent(new CustomEvent("page-size-change",{detail:n,bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this._mqTablet=window.matchMedia(`(max-width:${g.TABLET}px)`),this._mqMobile=window.matchMedia(`(max-width:${g.MOBILE}px)`),this._onScreenSizeChange(),this._mqTablet.addEventListener("change",this._onScreenSizeChange),this._mqMobile.addEventListener("change",this._onScreenSizeChange),this._computeHeaderPercents()}disconnectedCallback(){super.disconnectedCallback(),this._mqTablet?.removeEventListener("change",this._onScreenSizeChange),this._mqMobile?.removeEventListener("change",this._onScreenSizeChange)}updated(t){t.has("headers")&&this._computeHeaderPercents()}get _effectiveTotalItems(){return this.totalItems??this.data.length}get _effectiveCurrentPage(){return this.currentPage??1}get _effectivePageSize(){return this.currentSize??this.pageSizeOptions[0]}get totalPages(){const t=this._effectivePageSize;return Math.max(1,Math.ceil(this._effectiveTotalItems/t))}get _paginationProps(){const t=this._effectiveTotalItems,e=this._effectivePageSize,o=t?(this._effectiveCurrentPage-1)*e+1:0,n=Math.min(this._effectiveCurrentPage*e,t);return{totalItems:t,currentPage:this._effectiveCurrentPage,itemsPerPage:e,startItem:o,endItem:n,onNextPage:this._nextPage,onPreviousPage:this._prevPage,onItemsPerPageChange:this._setPageSize,isLoading:this.isLoadingData}}_computeHeaderPercents(){const t=this.headers.reduce((e,o)=>e+o.width,0);this._headerPercents=t===0?this.headers.map(()=>100/this.headers.length):this.headers.map(e=>e.width/t*100)}_cellStyleString(){return`border-bottom:1px solid ${c.NEUTRAL_200};`}_textVariantColor(t,e){return t.cellColor?t.cellColor(e):N.PRIMARY}_renderHeaderCells(){return d`<tr>
+      ${this.headers.map((t,e)=>d`<th
+          style=${dt({width:`${this._headerPercents[e]}%`,color:c.WHITE})}
+        >
+          <tuix-text size=${p.Body1} color=${N.SECONDARY}
+            >${t.name}</tuix-text
+          >
+        </th>`)}
+    </tr>`}_renderCell(t,e){if(t.isSlot){const n=`${t.slotName}-${e.id}`;return d`<td style="${this._cellStyleString()}">
+        <slot name=${n}></slot>
+      </td>`}const o=e[t.dataKey];return d`<td style="${this._cellStyleString()}">
+      <tuix-text
+        size=${p.Body1}
+        color=${this._textVariantColor(t,e)}
+        >${o}</tuix-text
+      >
+    </td>`}_renderRows(){const t=this.data;return Ue(t,e=>e.id,e=>d`<tr>
+          ${this.headers.map(o=>this._renderCell(o,e))}
+        </tr>`)}_onPageSizeChange(t){const e=parseInt(t.target.value);this._setPageSize(e)}_renderPageSizeOptions(){return this.pageSizeOptions.map(t=>d`<option value=${t}>${t}</option>`)}_renderSpinner(){const t={size:"14px",color:c.MAIN,visible:!0,ariaLabel:"Loading",wrapperStyle:{width:"100%",display:"flex",justifyContent:"center",padding:"48px 0"},...this.loader};if(!t.visible)return null;const e={"--dot-size":t.size,"--dot-color":t.color,...t.wrapperStyle},o=t.ariaLabel;return d`<div class="tuix-spinner-wrapper">
+      <div
+        class="three-dots-wrapper"
+        role="status"
+        aria-label=${o}
+        style=${dt(e)}
+      >
+        <span class="dot" aria-hidden="true"></span>
+        <span class="dot" aria-hidden="true"></span>
+        <span class="dot" aria-hidden="true"></span>
+        <span class="sr-only">${o}</span>
+      </div>
+    </div>`}_renderPagination(){const{totalItems:t,startItem:e,endItem:o,itemsPerPage:n,isLoading:i}=this._paginationProps;return d`<footer
+      style="background-color:${c.SECTION_BG};"
+      class="table_footer sticky"
+    >
+      <div class="items-per-page">
+        <tuix-text size=${p.Body2}>Items per page</tuix-text>
+        <div
+          style="outline: 1px solid ${c.NEUTRAL_200};"
+          class="dropdown_container"
+        >
+          <select
+            class="items-per-page-dropdown"
+            .value=${String(n)}
+            @change=${this._onPageSizeChange}
+            ?disabled=${i}
+          >
+            ${this._renderPageSizeOptions()}
+          </select>
+          <tuix-icon
+            class="arrow-icon"
+            name=${k.CHEVRON_DOWN}
+          ></tuix-icon>
+        </div>
+      </div>
+
+      <div class="navigation">
+        <tuix-text size=${p.Body2}
+          >${e} - ${o} of ${t}</tuix-text
+        >
+        <div class="buttons">
+          <tuix-icon
+            class="arrow-icon"
+            name=${k.CHEVRON_LEFT}
+            @click=${this._prevPage}
+          ></tuix-icon>
+          <tuix-icon
+            class="arrow-icon"
+            name=${k.CHEVRON_RIGHT}
+            @click=${this._nextPage}
+          ></tuix-icon>
+        </div>
+      </div>
+    </footer>`}_renderTable(){return d`<table>
+        <thead style="background-color: ${c.MAIN}">
+          ${this._renderHeaderCells()}
+        </thead>
+        ${this.isLoadingData?d`<tbody>
+              <tr>
+                <td colspan=${this.headers.length}>${this._renderSpinner()}</td>
+              </tr>
+            </tbody>`:d`<tbody>
+              ${this._renderRows()}
+            </tbody>`}
+      </table>
+      ${this.paginated?this._renderPagination():null}`}_renderCards(){const t=this.data;return d`<div class="mobile_table">
+        ${this.isLoadingData?this._renderSpinner():t.map(e=>d`<div
+                style="border-bottom: 2px solid ${c.MAIN};"
+                class="table_entity"
+              >
+                ${this.headers.map(o=>d`<div
+                    class="table_row"
+                    style="border-bottom:1px solid ${c.NEUTRAL_200};"
+                  >
+                    <div
+                      class="header"
+                      style="background-color:${c.SECTION_BG};"
+                    >
+                      <tuix-text
+                        size=${p.Body1}
+                        color=${N.PRIMARY}
+                        >${o.name}</tuix-text
+                      >
+                    </div>
+                    <div class="content">
+                      ${o.isSlot?d`<slot
+                            name="${o.slotName}-${e.id}"
+                          ></slot>`:d`<tuix-text size=${p.Body1}
+                            >${e[o.dataKey]}</tuix-text
+                          >`}
+                    </div>
+                  </div>`)}
+              </div>`)}
+      </div>
+      ${this.paginated?this._renderPagination():null}`}render(){return!this.disableMobileTable&&(this._isMobileView||this._isTabletView&&this.showMobileTableInTablet)?d`${this._renderCards()}`:d`${this._renderTable()}`}};$.styles=[Xe,We];S([a({type:Boolean})],$.prototype,"paginated",2);S([a({type:Boolean})],$.prototype,"disableMobileTable",2);S([a({type:Boolean})],$.prototype,"showMobileTableInTablet",2);S([a({type:Object})],$.prototype,"loader",2);S([a({type:Array})],$.prototype,"data",2);S([a({type:Array})],$.prototype,"headers",2);S([a({type:Array})],$.prototype,"pageSizeOptions",2);S([a({type:Number})],$.prototype,"totalItems",2);S([a({type:Number})],$.prototype,"currentPage",2);S([a({type:Number})],$.prototype,"currentSize",2);S([a({type:Boolean})],$.prototype,"isLoadingData",2);S([Y()],$.prototype,"_isTabletView",2);S([Y()],$.prototype,"_isMobileView",2);S([Y()],$.prototype,"_headerPercents",2);$=S([M("tuix-table")],$);function ni(){const t=document.createElement("link");t.rel="preconnect",t.href="https://fonts.googleapis.com";const e=document.createElement("link");e.rel="preconnect",e.href="https://fonts.gstatic.com";const o=document.createElement("link");o.rel="stylesheet",o.href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",document.head.appendChild(t),document.head.appendChild(e),document.head.appendChild(o)}export{G as C,L as D,f as I,pt as L,w as a,ni as l};