@descope/web-components-ui 1.0.108 → 1.0.110

package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[483],{4332:(t,e,r)=>{r.r(e),r.d(e,{SwitchToggleClass:()=>u});var o=r(4567),c=r(2061),n=r(9241),a=r(818),i=r(6882);const p=(0,o.iY)("switch-toggle"),{host:l,component:d,checkboxElement:h,checkboxSurface:s,checkboxHiddenLabel:b,label:k,requiredIndicator:y}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"::part(required-indicator)::after"},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxHiddenLabel:{selector:'vaadin-checkbox [slot="label"]'}},u=(0,c.qC)((0,n.yk)({mappings:{width:l,cursor:[d,b,h],fontSize:[d,k,b],trackBorderWidth:{...h,property:"border-width"},trackBorderStyle:{...h,property:"border-style"},trackBorderColor:{...h,property:"border-color"},trackBackgroundColor:{...h,property:"background-color"},trackRadius:{...h,property:"border-radius"},trackWidth:[{...h,property:"width"}],trackHeight:[{...s,property:"font-size"},{...h,property:"height"}],switchOutlineWidth:{...h,property:"outline-width"},switchOutlineOffset:{...h,property:"outline-offset"},switchOutlineColor:{...h,property:"outline-color"},switchOutlineStyle:{...h,property:"outline-style"},knobSize:[{...s,property:"width"},{...s,property:"height"}],knobTextColor:{...s,property:"color"},knobRadius:{...s,property:"border-radius"},knobTransition:{...s,property:"transition"},knobColor:{...s,property:"background-color"},knobTopOffset:{...s,property:"top"},knobPosition:{...s,property:"left"},labelMargin:[{...k,property:"padding-left"},{...b,property:"padding-left"}],labelLineHeight:[{...k,property:"line-height"},{...b,property:"line-height"}],labelFontWeight:[{...k,property:"font-weight"},{...b,property:"font-weight"}],labelTextColor:[{...k,property:"color"},{...y,property:"color"}]}}),n.e4,n.dj,n.Ae,a.h)((0,n.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t${i.Z}\n\n\t\tvaadin-text-field::part(label) {\n\t\t\tleft: calc(var(${SwitchToggle.cssVarList.trackWidth}) + var(${SwitchToggle.cssVarList.trackBorderWidth}) * 2);\n\t\t}\n\n\t\tvaadin-checkbox[active]::part(checkbox) {\n\t\t\ttransform: none;\n\t\t}\n\t\tvaadin-checkbox[checked]::part(checkbox) {\n\t\t\tbackground: none;\n\t\t}\n\t\tvaadin-checkbox::part(checkbox)::after {\n\t\t\tposition: absolute;\n\t\t\topacity: 1;\n\t\t\tcontent: '';\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:p}));r(9515),r(9789),r(6676),customElements.define(p,u)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[483],{4332:(t,e,r)=>{r.r(e),r.d(e,{SwitchToggleClass:()=>f});var o=r(4567),c=r(2061),n=r(9241),a=r(818),i=r(6882);const p=(0,o.iY)("switch-toggle"),{host:l,component:d,checkboxElement:s,checkboxSurface:h,checkboxHiddenLabel:b,label:k,requiredIndicator:y}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"::part(required-indicator)::after"},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxHiddenLabel:{selector:'vaadin-checkbox [slot="label"]'}},u=(0,c.qC)((0,n.yk)({mappings:{width:l,cursor:[d,b,s],fontSize:[d,k,b],trackBorderWidth:{...s,property:"border-width"},trackBorderStyle:{...s,property:"border-style"},trackBorderColor:{...s,property:"border-color"},trackBackgroundColor:{...s,property:"background-color"},trackRadius:{...s,property:"border-radius"},trackWidth:[{...s,property:"width"}],trackHeight:[{...h,property:"font-size"},{...s,property:"height"}],switchOutlineWidth:{...s,property:"outline-width"},switchOutlineOffset:{...s,property:"outline-offset"},switchOutlineColor:{...s,property:"outline-color"},switchOutlineStyle:{...s,property:"outline-style"},knobSize:[{...h,property:"width"},{...h,property:"height"}],knobTextColor:{...h,property:"color"},knobRadius:{...h,property:"border-radius"},knobTransition:{...h,property:"transition"},knobColor:{...h,property:"background-color"},knobTopOffset:{...h,property:"top"},knobPosition:{...h,property:"left"},labelMargin:[{...k,property:"padding-left"},{...b,property:"padding-left"}],labelLineHeight:[{...k,property:"line-height"},{...b,property:"line-height"}],labelFontWeight:[{...k,property:"font-weight"},{...b,property:"font-weight"}],labelTextColor:[{...k,property:"color"},{...y,property:"color"}]}}),n.e4,n.dj,n.Ae,a.h)((0,n.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t${i.Z}\n\n\t\tvaadin-text-field::part(label) {\n\t\t\tleft: calc(var(${u.cssVarList.trackWidth}) + var(${u.cssVarList.trackBorderWidth}) * 2);\n\t\t}\n\n\t\tvaadin-checkbox[active]::part(checkbox) {\n\t\t\ttransform: none;\n\t\t}\n\t\tvaadin-checkbox[checked]::part(checkbox) {\n\t\t\tbackground: none;\n\t\t}\n\t\tvaadin-checkbox::part(checkbox)::after {\n\t\t\tposition: absolute;\n\t\t\topacity: 1;\n\t\t\tcontent: '';\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:p})),f=u;r(9515),r(9789),r(6676),customElements.define(p,f)}}]);

package/dist/umd/descope-button-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[662],{3029:(t,n,e)=>{e.r(n),e.d(n,{ButtonClass:()=>u}),e(729);var r=e(2061),o=e(4567),a=e(9241);const i=(0,o.iY)("button"),{host:l,label:d}={host:{selector:()=>":host"},label:{selector:"::part(label)"}},s=(0,r.qC)((0,a.yk)({mappings:{color:{},textDecoration:d,fontSize:{},cursor:{},backgroundColor:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},width:l,gap:d,verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}]}}),a.e4,a.Ae)((0,a.DM)({slots:["prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t\t\t${c}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:i})),{color:p,fontSize:b}=Button.cssVarList,c=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${p});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`,u=s;customElements.define(i,u)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[662],{3029:(t,n,e)=>{e.r(n),e.d(n,{ButtonClass:()=>u}),e(729);var r=e(2061),o=e(4567),a=e(9241);const i=(0,o.iY)("button"),{host:l,label:d}={host:{selector:()=>":host"},label:{selector:"::part(label)"}},s=(0,r.qC)((0,a.yk)({mappings:{color:{},textDecoration:d,fontSize:{},cursor:{},backgroundColor:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},width:l,gap:d,verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}]}}),a.e4,a.Ae)((0,a.DM)({slots:["prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t\t\t${c}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:i})),{color:p,fontSize:b}=s.cssVarList,c=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${p});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`,u=s;customElements.define(i,u)}}]);

package/dist/umd/descope-combo-box-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4],{3352:(t,e,o)=>{o.d(e,{Z:()=>p,f:()=>i});var r=o(2061),n=o(4567),a=o(9241);const i=(0,n.iY)("combo-box"),{host:l,input:d,placeholder:s,toggle:c,label:b}={host:{selector:()=>":host"},input:{selector:"::part(input-field)"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},label:{selector:"::part(label)"}},p=(0,r.qC)((0,a.yk)({mappings:{width:l,height:d,padding:d,inputBackgroundColor:{...d,property:"background-color"},boxShadow:d,borderColor:d,borderWidth:d,borderStyle:d,borderRadius:d,color:[b,d],fontSize:[{},l],placeholderColor:{...s,property:"color"},toggleCursor:{...c,property:"cursor"},toggleColor:{...c,property:"color"},overlayBackground:{property:()=>ComboBox.cssVarList.overlay.backgroundColor},overlayBorder:{property:()=>ComboBox.cssVarList.overlay.border}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},cursor:{selector:"vaadin-combo-box-item"}},forward:{include:!1,attributes:["size"]}}),a.dj,a.Ae,(t=>class extends t{constructor(){super()}#t(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name")}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id")})})),t.items=e,t.renderer=(t,e,o)=>{t.innerHTML=o.item.outerHTML})}#e(){const t=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");t._attachOverlay=function(){this.bringToFront()},t._detachOverlay=function(){},t._enterModalState=function(){}}init(){super.init?.(),this.#e(),(0,n.P$)(this,this.#t.bind(this))}}))((0,a.DM)({slots:["prefix"],wrappedEleName:"vaadin-combo-box",style:()=>'\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t}\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\t-webkit-mask-image: none;\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-combo-box::part(input-field)::after {\n\t\t\topacity: 0;\n\t\t}\n\t\tvaadin-combo-box[readonly]::part(input-field)::after {\n\t\t\tborder: none;\n\t\t}\n\t\tvaadin-combo-box[readonly] > input:placeholder-shown {\n\t\t\topacity: 1;\n\t\t}\t\t\n\t\t',excludeAttrsSync:["tabindex","size"],componentName:i,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,o)=>{o.r(e),o.d(e,{ComboBoxClass:()=>r.Z}),o(9314);var r=o(3352);customElements.define(r.f,r.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4],{3352:(t,e,o)=>{o.d(e,{Z:()=>u,f:()=>i});var r=o(2061),n=o(4567),a=o(9241);const i=(0,n.iY)("combo-box"),{host:l,input:d,placeholder:s,toggle:c,label:p}={host:{selector:()=>":host"},input:{selector:"::part(input-field)"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},label:{selector:"::part(label)"}},b=(0,r.qC)((0,a.yk)({mappings:{width:l,height:d,padding:d,inputBackgroundColor:{...d,property:"background-color"},boxShadow:d,borderColor:d,borderWidth:d,borderStyle:d,borderRadius:d,color:[p,d],fontSize:[{},l],placeholderColor:{...s,property:"color"},toggleCursor:{...c,property:"cursor"},toggleColor:{...c,property:"color"},overlayBackground:{property:()=>b.cssVarList.overlay.backgroundColor},overlayBorder:{property:()=>b.cssVarList.overlay.border}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},cursor:{selector:"vaadin-combo-box-item"}},forward:{include:!1,attributes:["size"]}}),a.dj,a.Ae,(t=>class extends t{constructor(){super()}#t(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name")}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id")})})),t.items=e,t.renderer=(t,e,o)=>{t.innerHTML=o.item.outerHTML})}#e(){const t=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");t._attachOverlay=function(){this.bringToFront()},t._detachOverlay=function(){},t._enterModalState=function(){}}init(){super.init?.(),this.#e(),(0,n.P$)(this,this.#t.bind(this))}}))((0,a.DM)({slots:["prefix"],wrappedEleName:"vaadin-combo-box",style:()=>'\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t}\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\t-webkit-mask-image: none;\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-combo-box::part(input-field)::after {\n\t\t\topacity: 0;\n\t\t}\n\t\tvaadin-combo-box[readonly]::part(input-field)::after {\n\t\t\tborder: none;\n\t\t}\n\t\tvaadin-combo-box[readonly] > input:placeholder-shown {\n\t\t\topacity: 1;\n\t\t}\t\t\n\t\t',excludeAttrsSync:["tabindex","size"],componentName:i,includeForwardProps:["items","renderer","selectedItem"]})),u=b},1294:(t,e,o)=>{o.r(e),o.d(e,{ComboBoxClass:()=>r.Z}),o(9314);var r=o(3352);customElements.define(r.f,r.Z)}}]);

package/dist/umd/descope-email-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[760],{689:(t,i,e)=>{e.r(i),e.d(i,{EmailFieldClass:()=>r}),e(9437);var n=e(9241),a=e(4447),l=e(2061);const d=(0,e(4567).iY)("email-field");let o="";const s=(0,l.qC)((0,n.yk)({mappings:{...a.Z}}),n.e4,n.dj,n.Ae)((0,n.DM)({slots:["suffix"],wrappedEleName:"vaadin-email-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:d}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tmin-width: 10em;\n\t\tmax-width: 100%;\n\t}\n\tvaadin-email-field {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-email-field::before {\n\t\theight: 0;\n\t}\n\tvaadin-email-field > input {\n\t\t-webkit-mask-image: none;\n\t}\n\tvaadin-email-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-email-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-email-field input:-webkit-autofill,\n\tvaadin-email-field input:-webkit-autofill::first-line,\n\tvaadin-email-field input:-webkit-autofill:hover,\n\tvaadin-email-field input:-webkit-autofill:active,\n\tvaadin-email-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${EmailField.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${EmailField.cssVarList.height}) var(${EmailField.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-email-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t\tcolor: var(${EmailField.cssVarList.color});\n\t}\n\tvaadin-email-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const r=s;customElements.define(d,r)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[760],{689:(t,i,e)=>{e.r(i),e.d(i,{EmailFieldClass:()=>r}),e(9437);var n=e(9241),a=e(4447),l=e(2061);const d=(0,e(4567).iY)("email-field");let o="";const s=(0,l.qC)((0,n.yk)({mappings:{...a.Z}}),n.e4,n.dj,n.Ae)((0,n.DM)({slots:["suffix"],wrappedEleName:"vaadin-email-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:d}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tmin-width: 10em;\n\t\tmax-width: 100%;\n\t}\n\tvaadin-email-field {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-email-field::before {\n\t\theight: 0;\n\t}\n\tvaadin-email-field > input {\n\t\t-webkit-mask-image: none;\n\t}\n\tvaadin-email-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-email-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-email-field input:-webkit-autofill,\n\tvaadin-email-field input:-webkit-autofill::first-line,\n\tvaadin-email-field input:-webkit-autofill:hover,\n\tvaadin-email-field input:-webkit-autofill:active,\n\tvaadin-email-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${s.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${s.cssVarList.height}) var(${s.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-email-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t\tcolor: var(${s.cssVarList.color});\n\t}\n\tvaadin-email-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const r=s;customElements.define(d,r)}}]);

package/dist/umd/descope-logo-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[984],{4641:(t,n,e)=>{e.r(n),e.d(n,{LogoClass:()=>h});var s=e(9241),o=e(693),a=e(2061);const c=(0,e(4567).iY)("logo");let i;class l extends((0,o.s)({componentName:c,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n\t\t\t${i}\n\t\t</style>\n\t\t<div></div>`}}const r=(0,a.qC)((0,s.yk)({mappings:{height:{selector:()=>":host"},width:{selector:()=>":host"},fallbackUrl:{property:"content"},url:{property:"content"}}}),s.e4,s.Ae)(l);i=`\n:host {\n\tdisplay: inline-flex;\n}\n:host > div {\n\tdisplay: inline-block;\n\tcontent: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));\n\tmax-width: 100%;\n\tmax-height: 100%;\n\tobject-fit: contain;\n\tmargin: auto;\n}\n:host([draggable="true"]) > div {\n\tpointer-events: none\n}\n`;const h=r;customElements.define(c,h)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[984],{4641:(t,n,e)=>{e.r(n),e.d(n,{LogoClass:()=>h});var s=e(9241),o=e(693),a=e(2061);const c=(0,e(4567).iY)("logo");let i;class l extends((0,o.s)({componentName:c,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n\t\t\t${i}\n\t\t</style>\n\t\t<div></div>`}}const r=(0,a.qC)((0,s.yk)({mappings:{height:{selector:()=>":host"},width:{selector:()=>":host"},fallbackUrl:{property:"content"},url:{property:"content"}}}),s.e4,s.Ae)(l);i=`\n:host {\n\tdisplay: inline-flex;\n}\n:host > div {\n\tdisplay: inline-block;\n\tcontent: var(${r.cssVarList.url}, var(${r.cssVarList.fallbackUrl}));\n\tmax-width: 100%;\n\tmax-height: 100%;\n\tobject-fit: contain;\n\tmargin: auto;\n}\n:host([draggable="true"]) > div {\n\tpointer-events: none\n}\n`;const h=r;customElements.define(c,h)}}]);

package/dist/umd/descope-number-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[142],{4951:(t,n,e)=>{e.r(n),e.d(n,{NumberFieldClass:()=>o}),e(5806);var i=e(9241),a=e(4447),d=e(2061);const r=(0,e(4567).iY)("number-field");let l="";const u=(0,d.qC)((0,i.yk)({mappings:{...a.Z}}),i.e4,i.dj,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-number-field",style:()=>l,excludeAttrsSync:["tabindex"],componentName:r}));l=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tmin-width: 10em;\n\t\tmax-width: 100%;\n\t}\n\tvaadin-number-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t}\n\tvaadin-number-field > input {\n\t\t-webkit-mask-image: none;\n\t}\n\tvaadin-number-field::part(input-field) {\n\t\tpadding: 0;\n\t}\n\tvaadin-number-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-number-field input:-webkit-autofill,\n\tvaadin-number-field input:-webkit-autofill::first-line,\n\tvaadin-number-field input:-webkit-autofill:hover,\n\tvaadin-number-field input:-webkit-autofill:active,\n\tvaadin-number-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${NumberField.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${NumberField.cssVarList.height}) var(${NumberField.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-number-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t\tcolor: var(${NumberField.cssVarList.color});\n\t}\n\tvaadin-number-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const o=u;customElements.define(r,o)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[142],{4951:(t,n,e)=>{e.r(n),e.d(n,{NumberFieldClass:()=>s}),e(5806);var i=e(9241),a=e(4447),d=e(2061);const r=(0,e(4567).iY)("number-field");let l="";const o=(0,d.qC)((0,i.yk)({mappings:{...a.Z}}),i.e4,i.dj,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-number-field",style:()=>l,excludeAttrsSync:["tabindex"],componentName:r}));l=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tmin-width: 10em;\n\t\tmax-width: 100%;\n\t}\n\tvaadin-number-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t}\n\tvaadin-number-field > input {\n\t\t-webkit-mask-image: none;\n\t}\n\tvaadin-number-field::part(input-field) {\n\t\tpadding: 0;\n\t}\n\tvaadin-number-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-number-field input:-webkit-autofill,\n\tvaadin-number-field input:-webkit-autofill::first-line,\n\tvaadin-number-field input:-webkit-autofill:hover,\n\tvaadin-number-field input:-webkit-autofill:active,\n\tvaadin-number-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${o.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${o.cssVarList.height}) var(${o.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-number-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-number-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const s=o;customElements.define(r,s)}}]);

package/dist/umd/descope-text-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{9063:(t,e,n)=>{n.d(e,{Z:()=>f,f:()=>l});var i=n(9241),a=n(4447),d=n(2061);const l=(0,n(4567).iY)("text-field");let s="";const o=["type"],r=(0,d.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.dj,i.Ae,(t=>class extends t{static get observedAttributes(){return o.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n)}}))((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>s,excludeAttrsSync:["tabindex"],componentName:l}));s=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\t--vaadin-field-default-width: auto;\n\t\tmax-width: 100%;\n\t\tmin-width: 10em;\n\n\t}\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field[disabled] > input:placeholder-shown,\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${TextField.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;\n\t}\n\n\tvaadin-text-field > input {\n\t\t-webkit-mask-image: none;\n\t\tmin-height: 0;\n\t}\n\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t\tcolor: var(${TextField.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field)::after {\n\t\topacity: 0 !important;\n\t}\n\n\tvaadin-text-field::before {\n\t\theight: unset;\n\t}\n`;const f=r},9357:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.Z}),n(9789);var i=n(9063);customElements.define(i.f,i.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{9063:(t,e,n)=>{n.d(e,{Z:()=>f,f:()=>l});var i=n(9241),a=n(4447),d=n(2061);const l=(0,n(4567).iY)("text-field");let s="";const o=["type"],r=(0,d.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.dj,i.Ae,(t=>class extends t{static get observedAttributes(){return o.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n)}}))((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>s,excludeAttrsSync:["tabindex"],componentName:l}));s=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\t--vaadin-field-default-width: auto;\n\t\tmax-width: 100%;\n\t\tmin-width: 10em;\n\n\t}\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field[disabled] > input:placeholder-shown,\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${r.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${r.cssVarList.height}) var(${r.cssVarList.backgroundColor}) inset;\n\t}\n\n\tvaadin-text-field > input {\n\t\t-webkit-mask-image: none;\n\t\tmin-height: 0;\n\t}\n\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field)::after {\n\t\topacity: 0 !important;\n\t}\n\n\tvaadin-text-field::before {\n\t\theight: unset;\n\t}\n`;const f=r},9357:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.Z}),n(9789);var i=n(9063);customElements.define(i.f,i.Z)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.108",
+	"version": "1.0.110",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",

package/src/components/boolean-fields/descope-switch-toggle/SwitchToggle.js

@@ -101,7 +101,7 @@ const SwitchToggleClass = compose(
 		${commonStyles}
 
 		vaadin-text-field::part(label) {
-			left: calc(var(${SwitchToggle.cssVarList.trackWidth}) + var(${SwitchToggle.cssVarList.trackBorderWidth}) * 2);
+			left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
 		}
 
 		vaadin-checkbox[active]::part(checkbox) {

package/src/components/descope-button/Button.js

@@ -85,7 +85,7 @@ const ButtonClass = compose(
 	})
 );
 
-const { color, fontSize } = Button.cssVarList;
+const { color, fontSize } = ButtonClass.cssVarList;
 const loadingIndicatorStyles = `
 	@keyframes spin {
 		0% { -webkit-transform: rotate(0deg); }

package/src/components/descope-combo-box/ComboBox.js

@@ -110,8 +110,8 @@ const ComboBoxClass = compose(
 			// so we need to use an arrow function on the selector
 			// for that to work, because ComboBox is not available
 			// at this time.
-			overlayBackground: { property: () => ComboBox.cssVarList.overlay.backgroundColor },
-			overlayBorder: { property: () => ComboBox.cssVarList.overlay.border }
+			overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
+			overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border }
 		}
 	}),
 	draggableMixin,

package/src/components/descope-email-field/EmailField.js

@@ -61,12 +61,12 @@ overrides = `
 	vaadin-email-field input:-webkit-autofill:hover,
 	vaadin-email-field input:-webkit-autofill:active,
 	vaadin-email-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${EmailField.cssVarList.color});
-		box-shadow: 0 0 0 var(${EmailField.cssVarList.height}) var(${EmailField.cssVarList.backgroundColor}) inset;
+		-webkit-text-fill-color: var(${EmailFieldClass.cssVarList.color});
+		box-shadow: 0 0 0 var(${EmailFieldClass.cssVarList.height}) var(${EmailFieldClass.cssVarList.backgroundColor}) inset;
 	}
 	vaadin-email-field[required]::part(required-indicator)::after {
 		content: "*";
-		color: var(${EmailField.cssVarList.color});
+		color: var(${EmailFieldClass.cssVarList.color});
 	}
 	vaadin-email-field[readonly]::part(input-field)::after {
 		border: 0 solid;

package/src/components/descope-link/Link.js

@@ -4,7 +4,7 @@ import {
 	componentNameValidationMixin,
 } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
-import Text from '../descope-text/Text';
+import TextClass from '../descope-text/Text';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 
@@ -48,7 +48,7 @@ const selectors = {
 	host: { selector: () => ':host' },
 	anchor: {},
 	wrapper: { selector: () => ':host > div' },
-	text: { selector: () => Text.componentName }
+	text: { selector: () => TextClass.componentName }
 };
 
 const { anchor, text, host, wrapper } = selectors;
@@ -58,7 +58,7 @@ const LinkClass = compose(
 		mappings: {
 			width: host,
 			textAlign: wrapper,
-			color: [anchor, { ...text, property: Text.cssVarList.color }],
+			color: [anchor, { ...text, property: TextClass.cssVarList.color }],
 			cursor: anchor,
 			borderBottomWidth: anchor,
 			borderBottomStyle: anchor,

package/src/components/descope-logo/Logo.js

@@ -43,7 +43,7 @@ style = `
 }
 :host > div {
 	display: inline-block;
-	content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
+	content: var(${LogoClass.cssVarList.url}, var(${LogoClass.cssVarList.fallbackUrl}));
 	max-width: 100%;
 	max-height: 100%;
 	object-fit: contain;

package/src/components/descope-new-password/NewPassword.js

@@ -7,7 +7,7 @@ import {
 	createProxy,
 } from '../../mixins';
 import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
-import PasswordField from '../descope-password-field/PasswordField';
+import PasswordFieldClass from '../descope-password-field/PasswordField';
 
 export const componentName = getComponentName('new-password');
 
@@ -63,8 +63,8 @@ const NewPasswordClass = compose(
 			fontSize: [
 				host,
 				{
-					selector: PasswordField.componentName,
-					property: PasswordField.cssVarList.fontSize
+					selector: PasswordFieldClass.componentName,
+					property: PasswordFieldClass.cssVarList.fontSize
 				}
 			],
 			componentWidth: { ...host, property: 'width' },

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -1,6 +1,6 @@
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
 import { observeAttributes } from '../../../helpers/componentHelpers';
-import NewPassword from '../NewPassword';
+import NewPasswordClass from '../NewPassword';
 import { componentName } from './componentName';
 
 const passwordAttrPrefixRegex = /^password-/
@@ -117,7 +117,7 @@ class NewPasswordInternal extends BaseInputClass {
 			const styleTag = document.createElement('style');
 			styleTag.innerHTML = `
 				:host::part(required-indicator)::after {
-					content: var(${NewPassword.cssVarList.requiredContent});
+					content: var(${NewPasswordClass.cssVarList.requiredContent});
 				}
 				`;
 			input?.shadowRoot.appendChild(styleTag);

package/src/components/descope-number-field/NumberField.js

@@ -57,12 +57,12 @@ overrides = `
 	vaadin-number-field input:-webkit-autofill:hover,
 	vaadin-number-field input:-webkit-autofill:active,
 	vaadin-number-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${NumberField.cssVarList.color});
-		box-shadow: 0 0 0 var(${NumberField.cssVarList.height}) var(${NumberField.cssVarList.backgroundColor}) inset;
+		-webkit-text-fill-color: var(${NumberFieldClass.cssVarList.color});
+		box-shadow: 0 0 0 var(${NumberFieldClass.cssVarList.height}) var(${NumberFieldClass.cssVarList.backgroundColor}) inset;
 	}
 	vaadin-number-field[required]::part(required-indicator)::after {
 		content: "*";
-		color: var(${NumberField.cssVarList.color});
+		color: var(${NumberFieldClass.cssVarList.color});
 	}
 	vaadin-number-field[readonly]::part(input-field)::after {
 		border: 0 solid;

package/src/components/descope-passcode/Passcode.js

@@ -7,7 +7,7 @@ import {
 } from '../../mixins';
 import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
-import TextField from '../descope-text-field/TextField'
+import TextFieldClass from '../descope-text-field/TextField'
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 
@@ -64,14 +64,14 @@ const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
 const { digitField, label, requiredIndicator, internalWrapper, focusedDigitField } = {
-	focusedDigitField: { selector: () => `${TextField.componentName}[focused="true"]` },
-	digitField: { selector: () => TextField.componentName },
+	focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
+	digitField: { selector: () => TextFieldClass.componentName },
 	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
 	internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
 }
 
-const textVars = TextField.cssVarList
+const textVars = TextFieldClass.cssVarList
 
 const PasscodeClass = compose(
 	createStyleMixin({

package/src/components/descope-phone-field/PhoneField.js

@@ -7,12 +7,12 @@ import {
 	draggableMixin,
 	proxyInputMixin
 } from '../../mixins';
-import TextField from '../descope-text-field/TextField';
-import ComboBox from '../descope-combo-box/ComboBox';
+import TextFieldClass from '../descope-text-field/TextField';
+import ComboBoxClass from '../descope-combo-box/ComboBox';
 import CountryCodes from './CountryCodes';
 
-const textVars = TextField.cssVarList;
-const comboVars = ComboBox.cssVarList;
+const textVars = TextFieldClass.cssVarList;
+const comboVars = ComboBoxClass.cssVarList;
 
 export const componentName = getComponentName('phone-field');
 
@@ -81,12 +81,12 @@ const PhoneFieldClass = compose(
 			fontSize: [
 				host, inputWrapper,
 				{
-					selector: TextField.componentName,
-					property: TextField.cssVarList.fontSize
+					selector: TextFieldClass.componentName,
+					property: TextFieldClass.cssVarList.fontSize
 				},
 				{
-					selector: ComboBox.componentName,
-					property: ComboBox.cssVarList.fontSize
+					selector: ComboBoxClass.componentName,
+					property: ComboBoxClass.cssVarList.fontSize
 				}
 			],
 

package/src/components/descope-text-field/TextField.js

@@ -81,8 +81,8 @@ overrides = `
 	vaadin-text-field input:-webkit-autofill:hover,
 	vaadin-text-field input:-webkit-autofill:active,
 	vaadin-text-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${TextField.cssVarList.color});
-		box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
+		-webkit-text-fill-color: var(${TextFieldClass.cssVarList.color});
+		box-shadow: 0 0 0 var(${TextFieldClass.cssVarList.height}) var(${TextFieldClass.cssVarList.backgroundColor}) inset;
 	}
 
 	vaadin-text-field > input {
@@ -92,7 +92,7 @@ overrides = `
 
 	vaadin-text-field[required]::part(required-indicator)::after {
 		content: "*";
-		color: var(${TextField.cssVarList.color});
+		color: var(${TextFieldClass.cssVarList.color});
 	}
 	vaadin-text-field::part(input-field)::after {
 		opacity: 0 !important;

package/src/theme/components/button.js

@@ -1,9 +1,9 @@
 import globals from '../globals';
 import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
-import Button, { componentName } from '../../components/descope-button/Button';
+import ButtonClass, { componentName } from '../../components/descope-button/Button';
 
 const globalRefs = getThemeRefs(globals);
-const vars = Button.cssVarList;
+const vars = ButtonClass.cssVarList;
 
 const mode = {
 	primary: globalRefs.colors.primary,

package/src/theme/components/checkbox.js

@@ -1,9 +1,9 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import Checkbox from '../../components/boolean-fields/descope-checkbox/Checkbox';
+import CheckboxClass from '../../components/boolean-fields/descope-checkbox/Checkbox';
 
 const globalRefs = getThemeRefs(globals);
-const vars = Checkbox.cssVarList;
+const vars = CheckboxClass.cssVarList;
 
 const checkbox = {
 	[vars.checkboxBackgroundColor]: globalRefs.colors.surface.main,

package/src/theme/components/comboBox.js

@@ -1,10 +1,10 @@
 import globals from '../globals';
-import ComboBox from '../../components/descope-combo-box/ComboBox';
+import ComboBoxClass from '../../components/descope-combo-box/ComboBox';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = ComboBox.cssVarList;
+const vars = ComboBoxClass.cssVarList;
 
 export const comboBox = {
 	[vars.borderColor]: globalRefs.colors.surface.main,

package/src/theme/components/container.js

@@ -1,10 +1,10 @@
 import globals from "../globals";
 import { getThemeRefs, createHelperVars } from "../../helpers/themeHelpers";
-import Container from "../../components/descope-container/Container";
+import ContainerClass from "../../components/descope-container/Container";
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = Container.cssVarList
+const vars = ContainerClass.cssVarList
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -23,7 +23,7 @@ const [helperTheme, helperRefs, helperVars] =
 		verticalAlignment,
 		horizontalAlignment,
 		shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
-	}, Container.componentName)
+	}, ContainerClass.componentName)
 
 const container = {
 	...helperTheme,

package/src/theme/components/divider.js

@@ -1,10 +1,10 @@
-import Divider, { componentName } from '../../components/descope-divider/Divider';
+import DividerClass, { componentName } from '../../components/descope-divider/Divider';
 import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
 import globals from '../globals';
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = Divider.cssVarList;
+const vars = DividerClass.cssVarList;
 
 const thickness = '2px'
 const textPaddingSize = '10px'

package/src/theme/components/emailField.js

@@ -1,8 +1,8 @@
-import EmailField from '../../components/descope-email-field/EmailField';
+import EmailFieldClass from '../../components/descope-email-field/EmailField';
 import { textField } from './textField';
 
 const emailField = {
-	...textField(EmailField.cssVarList)
+	...textField(EmailFieldClass.cssVarList)
 };
 
 export default emailField;

package/src/theme/components/image.js

@@ -1,6 +1,6 @@
-import Image from "../../components/descope-image/Image";
+import ImageClass from "../../components/descope-image/Image";
 
-const vars = Image.cssVarList
+const vars = ImageClass.cssVarList
 
 const image = {};
 

package/src/theme/components/link.js

@@ -1,9 +1,9 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import Link from '../../components/descope-link/Link';
+import LinkClass from '../../components/descope-link/Link';
 
 const globalRefs = getThemeRefs(globals);
-const vars = Link.cssVarList;
+const vars = LinkClass.cssVarList;
 
 const link = {
 	[vars.cursor]: 'pointer',

package/src/theme/components/loader/loaderLinear.js

@@ -1,10 +1,10 @@
-import LoaderLinear from '../../../components/descope-loader-linear/LoaderLinear';
+import LoaderLinearClass from '../../../components/descope-loader-linear/LoaderLinear';
 import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = LoaderLinear.cssVarList;
+const vars = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
 	[vars.display]: 'inline-block',

package/src/theme/components/loader/loaderRadial.js

@@ -1,10 +1,10 @@
-import LoaderRadial from '../../../components/descope-loader-radial/LoaderRadial';
+import LoaderRadialClass from '../../../components/descope-loader-radial/LoaderRadial';
 import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = LoaderRadial.cssVarList;
+const vars = LoaderRadialClass.cssVarList;
 
 const loaderRadial = {
 	[vars.display]: 'inline-block',

package/src/theme/components/logo.js

@@ -1,6 +1,6 @@
-import Logo from "../../components/descope-logo/Logo";
+import LogoClass from "../../components/descope-logo/Logo";
 
-const vars = Logo.cssVarList
+const vars = LogoClass.cssVarList
 
 const logo = {
 	[vars.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'

package/src/theme/components/newPassword.js

@@ -1,6 +1,6 @@
-import NewPassword from '../../components/descope-new-password/NewPassword';
+import NewPasswordClass from '../../components/descope-new-password/NewPassword';
 
-const vars = NewPassword.cssVarList;
+const vars = NewPasswordClass.cssVarList;
 
 const newPassword = {
 	[vars.inputsGap]: '1em',

package/src/theme/components/numberField.js

@@ -1,8 +1,8 @@
-import NumberField from '../../components/descope-number-field/NumberField';
+import NumberFieldClass from '../../components/descope-number-field/NumberField';
 import { textField } from './textField';
 
 const numberField = {
-	...textField(NumberField.cssVarList)
+	...textField(NumberFieldClass.cssVarList)
 };
 
 export default numberField;

package/src/theme/components/passcode.js

@@ -1,8 +1,8 @@
-import Passcode from '../../components/descope-passcode/Passcode';
+import PasscodeClass from '../../components/descope-passcode/Passcode';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 import globals from '../globals';
 
-const vars = Passcode.cssVarList
+const vars = PasscodeClass.cssVarList
 const globalRefs = getThemeRefs(globals);
 
 const passcode = {

package/src/theme/components/passwordField.js

@@ -1,10 +1,10 @@
-import PasswordField from '../../components/descope-password-field/PasswordField';
+import PasswordFieldClass from '../../components/descope-password-field/PasswordField';
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = PasswordField.cssVarList;
+const vars = PasswordFieldClass.cssVarList;
 
 const passwordField = {
 	[vars.wrapperBorderStyle]: 'solid',

package/src/theme/components/phoneField.js

@@ -1,9 +1,9 @@
 import globals from '../globals';
-import PhoneField from '../../components/descope-phone-field/PhoneField';
+import PhoneFieldClass from '../../components/descope-phone-field/PhoneField';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 
 const globalRefs = getThemeRefs(globals);
-const vars = PhoneField.cssVarList;
+const vars = PhoneFieldClass.cssVarList;
 
 const phoneField = {
 	[vars.wrapperBorderStyle]: 'solid',

package/src/theme/components/switchToggle.js

@@ -1,13 +1,13 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import SwitchToggle from '../../components/boolean-fields/descope-switch-toggle/SwitchToggle';
+import SwitchToggleClass from '../../components/boolean-fields/descope-switch-toggle/SwitchToggle';
 
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 const trackBorderWidth = '2px';
 
 const globalRefs = getThemeRefs(globals);
-const vars = SwitchToggle.cssVarList;
+const vars = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
     size: {

package/src/theme/components/text.js

@@ -1,10 +1,10 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import Text from '../../components/descope-text/Text';
+import TextClass from '../../components/descope-text/Text';
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = Text.cssVarList;
+const vars = TextClass.cssVarList;
 
 const text = {
 	[vars.lineHeight]: '1em',

package/src/theme/components/textArea.js

@@ -1,9 +1,9 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import TextArea from '../../components/descope-text-area/TextArea';
+import TextAreaClass from '../../components/descope-text-area/TextArea';
 
 const globalRefs = getThemeRefs(globals);
-const vars = TextArea.cssVarList;
+const vars = TextAreaClass.cssVarList;
 
 const textArea = {
 	[vars.labelColor]: globalRefs.colors.surface.contrast,

package/src/theme/components/textField.js

@@ -1,10 +1,10 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import TextField from '../../components/descope-text-field/TextField';
+import TextFieldClass from '../../components/descope-text-field/TextField';
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = TextField.cssVarList;
+const vars = TextFieldClass.cssVarList;
 
 export const textField = (vars) => ({
 	[vars.padding]: '0 1em',