@descope/web-components-ui 1.0.234 → 1.0.236

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,769,3726,9662,7487,1383,3705,3878,4803],{3878:(t,e,n)=>{n.d(e,{P:()=>s});var r=n(2061),o=n(1e3),i=n(2561);const s=(...t)=>(0,r.qC)(o.wX,o.li,o.QT,o.mE)((0,i.s)(...t))},818:(t,e,n)=>{n.d(e,{h:()=>i});var r=n(4567),o=n(1250);const i=t=>class extends t{init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,r.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,r.Db)(this.inputElement,this,["checked"]),(0,r.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(t,e,n)=>{n.d(e,{Z:()=>r});const r=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,n(4201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\nvaadin-text-field {\n\tposition: relative;\n\tpadding: 0;\n\tdisplay: inline-flex;\n\talign-items: flex-start;\n}\nvaadin-text-field::before {\n\theight: 0;\n\tmargin: 0;\n}\nvaadin-text-field::part(label) {\n  position: absolute;\n  top: 0;\n}\nvaadin-text-field::part(input-field) {\n\tpadding: 0;\n\tbackground: none;\n\tmin-height: 0;\n}\nvaadin-text-field::part(input-field)::after {\n  background: none;\n}\nvaadin-text-field[focus-ring]::part(input-field) {\n\tbox-shadow: none;\n}\n\nvaadin-checkbox [slot="label"] {\n  align-self: flex-start;\n  padding: 0;\n}\n[required] vaadin-checkbox [slot="label"]:not(:empty) {\n\tpadding-inline-end: 1em;\n}\ndescope-boolean-field-internal {\n  -webkit-mask-image: none;\n  min-height: initial;\n}\n`},1250:(t,e,n)=>{n.d(e,{Z:()=>l,f:()=>i});var r=n(3878),o=n(4567);const i=(0,o.iY)("boolean-field-internal"),s=["disabled","label","invalid","readonly"],a=(0,r.P)({componentName:i,baseSelector:"div"}),l=class extends a{static get observedAttributes(){return["readonly"]}constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper">\n\t\t\t\t<vaadin-checkbox></vaadin-checkbox>\n\t\t\t</div>\n\t\t',this.wrapperEle=this.querySelector("div"),this.checkbox=this.querySelector("vaadin-checkbox")}get value(){return this.checkbox?.checked}set value(t){this.checkbox.checked=t}get checked(){return this.value}set checked(t){this.value=t}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.checkbox.focus()})),super.init?.(),(0,o.oP)(this,this.checkbox,{includeAttrs:s}),(0,o.tg)(this,this.checkbox,{includeAttrs:["checked"]}),this.handleFocusEventsDispatching([this.checkbox])}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"readonly"===t&&this.onReadOnlyChange(null!==n)}onReadOnlyChange(t){this.baseElement.setAttribute("inert",t)}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}}},6676:(t,e,n)=>{n.r(e);var r=n(1250);customElements.define(r.f,r.Z)},3483:(t,e,n)=>{n.r(e),n.d(e,{CheckboxClass:()=>y});var r=n(4567),o=n(2061),i=n(1e3),s=n(818),a=n(6882),l=n(4201);const d=(0,r.iY)("checkbox"),{host:c,component:h,checkboxElement:p,checkboxSurface:u,checkboxLabel:m,requiredIndicator:b,helperText:g,errorMessage:f}={host:{selector:()=>":host"},requiredIndicator:{selector:'[required] vaadin-checkbox [slot="label"]:not(:empty)::after'},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxLabel:{selector:'vaadin-checkbox [slot="label"]:not(:empty)'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},y=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,p,m],fontFamily:[m,g,f],labelTextColor:{...m,property:"color"},labelSpacing:{...m,property:"padding-inline-start"},labelLineHeight:{...m,property:"line-height"},labelFontWeight:{...m,property:"font-weight"},labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...p,property:"background-color"},inputBorderRadius:{...p,property:"border-radius"},inputBorderWidth:{...p,property:"border-width"},inputBorderOffset:{...p,property:"border-offset"},inputBorderColor:{...p,property:"border-color"},inputBorderStyle:{...p,property:"border-style"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineOffset:{...p,property:"outline-offset"},inputOutlineColor:{...p,property:"outline-color"},inputOutlineStyle:{...p,property:"outline-style"},inputSize:[{...p,property:"width"},{...p,property:"height"},{...u,property:"font-size"},{...h,property:"font-size"}]}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,s.h)((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${a.Z}\n      ${(0,l.bi)(y.cssVarList)}\n\n      :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n      }\n\n      :host ::part(error-message) {\n        direction: ltr;\n      }\n\n      vaadin-text-field {\n        width: 100%;\n      }\n\n      descope-boolean-field-internal {\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n        height: 100%;\n      }\n\n      vaadin-checkbox::part(checkbox) {\n        margin: 0;\n      }\n\n      vaadin-checkbox::part(checkbox)::after {\n        top: 0;\n        left: 0;\n      }\n\n      vaadin-text-field::part(input-field)::after {\n        content: none;\n      }\n    `,excludeAttrsSync:["label","tabindex"],componentName:d}));n(3092),n(9789),n(6676),customElements.define(d,y)},9690:(t,e,n)=>{n.d(e,{n:()=>c,f:()=>s});var r=n(2061),o=n(4567),i=n(1e3);const s=(0,o.iY)("button"),{host:a,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const c=(0,r.qC)((0,i.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...a,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...l,property:"text-decoration"},labelSpacing:{...l,property:"gap"}}}),(t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}),i.e4,i.Ae)((0,i.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\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${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${c.cssVarList.outlineWidth}) + var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${c.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${c.cssVarList.hostHeight}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${c.cssVarList.hostWidth}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s})),{color:h,fontSize:p}=c.cssVarList;d=`\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(${h});\n\t\ttop: calc(50% - (var(${p}) / 2));\n\t\tleft: calc(50% - (var(${p}) / 2));\n\t\tborder-width: calc(var(${p}) / 10);\n\t\twidth: var(${p});\n\t\theight: var(${p});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},2018:(t,e,n)=>{n.r(e),n.d(e,{ButtonClass:()=>r.n}),n(729);var r=n(9690);customElements.define(r.f,r.n)},426:(t,e,n)=>{n.r(e),n.d(e,{GridSelectionColumnClass:()=>a,componentName:()=>o});var r=n(9629);n(3483);const o=(0,n(4567).iY)("grid-selection-column"),i=()=>{const t=document.createElement("descope-checkbox");return t.setAttribute("bordered","true"),t.setAttribute("size","xs"),t},s=t=>t.selectedItems.length===t.items?.length;class a extends r.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(t){const e=t.parentNode;let n=t.querySelector("descope-checkbox");n||(n=i(),n.addEventListener("input",(()=>{const t=s(e);e.selectedItems=t?[]:e.items})),t.appendChild(n)),n.setAttribute("checked",s(e))}_defaultRenderer(t,e,n){const r=t.parentNode;let o=t.querySelector("descope-checkbox");o||(o=i(),t.appendChild(o)),o.onchange=()=>{o.checked?r.selectItem(n.item):r.deselectItem(n.item)},o.setAttribute("checked",n.selected)}}customElements.define(o,a)},830:(t,e,n)=>{n.r(e),n.d(e,{GridStatusColumnClass:()=>i,componentName:()=>o});var r=n(446);const o=(0,n(4567).iY)("grid-status-column");class i extends r.n{_defaultRenderer(t,e,n){const r=this.getAttribute("status");if(!r)return void(t.innerHTML=n.item[this.path]);const[o,i]=r.split(","),s=n.item[this.path]?o:i;t.innerHTML=`<div style="padding:0 0.25em; border-radius:4px; background:${n.item[this.path]?"lightgreen":"pink"};">${s}</div>`}}customElements.define(o,i)},2356:(t,e,n)=>{n.r(e),n.d(e,{GridTextColumnClass:()=>i,componentName:()=>o});var r=n(446);n(2018);const o=(0,n(4567).iY)("grid-text-column");class i extends r.n{}customElements.define(o,i)},9950:(t,e,n)=>{n.r(e),n.d(e,{GridClass:()=>f}),n(2873),n(2356),n(830),n(426);var r=n(2061),o=n(4567),i=n(1e3);const s=t=>{const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e},a=(0,o.iY)("grid"),{host:l,headerRow:d,contentRow:c,firstRow:h,sortIndicators:p,activeSortIndicator:u,selectedRow:m,rowSeparator:b,resizeHandle:g}={host:{selector:()=>"vaadin-grid"},headerRow:{selector:()=>"::part(header-cell)"},contentRow:{selector:()=>"::part(cell)"},firstRow:{selector:()=>"::part(first-header-row-cell)"},selectedRow:{selector:()=>"::part(selected-row-cell)"},sortIndicators:{selector:()=>"vaadin-grid-sorter::part(indicators)"},activeSortIndicator:{selector:()=>"vaadin-grid-sorter[direction]"},rowSeparator:{selector:()=>"vaadin-grid::part(body-cell)"},resizeHandle:{selector:()=>"::part(resize-handle)"}},f=(0,r.qC)((0,i.yk)({componentNameOverride:(0,o.iY)("input-wrapper")}),(0,i.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...d},{...c}],fontSize:[{...d},{...c}],fontWeight:{...c},valueTextColor:{...c,property:"color"},sortIndicatorsColor:{...p,property:"color"},activeSortIndicator:{...u,property:"color"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},selectedBackgroundColor:{...m,property:"background-color"},selectedTextColor:{...m,property:"color"},separatorColor:[{...h,property:"border-bottom-color"},{...b,property:"border-top-color"}],resizeHandleColor:{...g,property:"background-color"}}}),i.e4,i.Ae,(t=>class extends t{#t;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange(),this.baseElement._mapSorters=()=>{}}forwardSelectedItemsChange(){this.baseElement.addEventListener("selected-items-changed",(t=>{this.dispatchEvent(new CustomEvent("selected-items-changed",{bubbles:!0,composed:!0,detail:t.detail}))}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"columns"===t&&this.setColumnsDataFromAttr()}handleColumns(){this.columnsAttr?this.setColumnsDataFromAttr():this.children.length&&this.setColumnsFromChildren()}setColumnsFromChildren(){this.#t=Array.from(this.children).map((t=>({path:t.getAttribute("path"),header:t.getAttribute("header"),type:t.localName.match("^descope-grid-(\\w+)-column$")?.[1]||"text",attrs:["frozen","resizable","auto-width","status"].reduce(((e,n)=>{const r=t.getAttribute(n);return r&&(e[n]=r),e}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const t=JSON.parse(this.columnsAttr);s(t)&&(this.columns=t)}catch(t){console.error('could not parse data string from attribute "columns" -',t.message)}}#e=({path:t,header:e,type:n,attrs:r})=>{const o=`descope-grid-${n}-column`;return`<${o} header="${e}" path="${t}" ${Object.entries(r).map((([t,e])=>`${t}="${e}"`)).join(" ")}></${o}>`};get renderColumn(){return this.#e}set renderColumn(t){this.#e=t,this.renderColumns()}getColumnsTemplate(){return this.#t?.reduce?.(((t,e)=>t+(this.renderColumn?.(e||{})||"")),"")}renderColumns(){const t=this.getColumnsTemplate();t&&(this.innerHTML=t)}get grid(){return this.shadowRoot.querySelector("vaadin-grid")}get data(){return this.grid.items}set data(t){if(s(t)&&this.grid.items!==t&&(this.grid.items=t,this.grid.selectedItems)){const t=new Set(this.grid.items.map((t=>t[this.uniqueColumnId]??t))),e=this.grid.selectedItems.filter((e=>t.has(e[this.uniqueColumnId]??e)));this.grid.selectedItems.length!==e.length&&(this.grid.selectedItems=e)}}get columns(){return this.#t}set columns(t){this.#t=t,this.renderColumns()}get paths(){return this.columns.map((t=>t.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,i.DM)({slots:[""],wrappedEleName:"vaadin-grid",style:()=>"\n      vaadin-grid {\n        overflow: hidden;\n        height: 100%;\n        min-height: 300px;\n      }\n      vaadin-grid-cell-content {\n        display: flex;\n      }\n\t\t",excludeAttrsSync:["columns","tabindex"],componentName:a}));customElements.define(a,f)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,769,3726,9662,7487,1383,3705,4803],{818:(t,e,n)=>{n.d(e,{h:()=>i});var r=n(4567),o=n(1250);const i=t=>class extends t{init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,r.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,r.Db)(this.inputElement,this,["checked"]),(0,r.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(t,e,n)=>{n.d(e,{Z:()=>r});const r=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,n(4201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\nvaadin-text-field {\n\tposition: relative;\n\tpadding: 0;\n\tdisplay: inline-flex;\n\talign-items: flex-start;\n}\nvaadin-text-field::before {\n\theight: 0;\n\tmargin: 0;\n}\nvaadin-text-field::part(label) {\n  position: absolute;\n  top: 0;\n}\nvaadin-text-field::part(input-field) {\n\tpadding: 0;\n\tbackground: none;\n\tmin-height: 0;\n}\nvaadin-text-field::part(input-field)::after {\n  background: none;\n}\nvaadin-text-field[focus-ring]::part(input-field) {\n\tbox-shadow: none;\n}\n\nvaadin-checkbox [slot="label"] {\n  align-self: flex-start;\n  padding: 0;\n}\n[required] vaadin-checkbox [slot="label"]:not(:empty) {\n\tpadding-inline-end: 1em;\n}\ndescope-boolean-field-internal {\n  -webkit-mask-image: none;\n  min-height: initial;\n}\n`},1250:(t,e,n)=>{n.d(e,{Z:()=>l,f:()=>i});var r=n(3878),o=n(4567);const i=(0,o.iY)("boolean-field-internal"),s=["disabled","label","invalid","readonly"],a=(0,r.P)({componentName:i,baseSelector:"div"}),l=class extends a{static get observedAttributes(){return["readonly"]}constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper">\n\t\t\t\t<vaadin-checkbox></vaadin-checkbox>\n\t\t\t</div>\n\t\t',this.wrapperEle=this.querySelector("div"),this.checkbox=this.querySelector("vaadin-checkbox")}get value(){return this.checkbox?.checked}set value(t){this.checkbox.checked=t}get checked(){return this.value}set checked(t){this.value=t}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.checkbox.focus()})),super.init?.(),(0,o.oP)(this,this.checkbox,{includeAttrs:s}),(0,o.tg)(this,this.checkbox,{includeAttrs:["checked"]}),this.handleFocusEventsDispatching([this.checkbox])}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"readonly"===t&&this.onReadOnlyChange(null!==n)}onReadOnlyChange(t){this.baseElement.setAttribute("inert",t)}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}}},6676:(t,e,n)=>{n.r(e);var r=n(1250);customElements.define(r.f,r.Z)},3483:(t,e,n)=>{n.r(e),n.d(e,{CheckboxClass:()=>y});var r=n(4567),o=n(2061),i=n(1e3),s=n(818),a=n(6882),l=n(4201);const d=(0,r.iY)("checkbox"),{host:c,component:h,checkboxElement:p,checkboxSurface:u,checkboxLabel:b,requiredIndicator:m,helperText:g,errorMessage:f}={host:{selector:()=>":host"},requiredIndicator:{selector:'[required] vaadin-checkbox [slot="label"]:not(:empty)::after'},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxLabel:{selector:'vaadin-checkbox [slot="label"]:not(:empty)'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},y=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,p,b],fontFamily:[b,g,f],labelTextColor:{...b,property:"color"},labelSpacing:{...b,property:"padding-inline-start"},labelLineHeight:{...b,property:"line-height"},labelFontWeight:{...b,property:"font-weight"},labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...p,property:"background-color"},inputBorderRadius:{...p,property:"border-radius"},inputBorderWidth:{...p,property:"border-width"},inputBorderOffset:{...p,property:"border-offset"},inputBorderColor:{...p,property:"border-color"},inputBorderStyle:{...p,property:"border-style"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineOffset:{...p,property:"outline-offset"},inputOutlineColor:{...p,property:"outline-color"},inputOutlineStyle:{...p,property:"outline-style"},inputSize:[{...p,property:"width"},{...p,property:"height"},{...u,property:"font-size"},{...h,property:"font-size"}]}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,s.h)((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${a.Z}\n      ${(0,l.bi)(y.cssVarList)}\n\n      :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n      }\n\n      :host ::part(error-message) {\n        direction: ltr;\n      }\n\n      vaadin-text-field {\n        width: 100%;\n      }\n\n      descope-boolean-field-internal {\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n        height: 100%;\n      }\n\n      vaadin-checkbox::part(checkbox) {\n        margin: 0;\n      }\n\n      vaadin-checkbox::part(checkbox)::after {\n        top: 0;\n        left: 0;\n      }\n\n      vaadin-text-field::part(input-field)::after {\n        content: none;\n      }\n    `,excludeAttrsSync:["label","tabindex"],componentName:d}));n(3092),n(9789),n(6676),customElements.define(d,y)},9690:(t,e,n)=>{n.d(e,{n:()=>c,f:()=>s});var r=n(2061),o=n(4567),i=n(1e3);const s=(0,o.iY)("button"),{host:a,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const c=(0,r.qC)((0,i.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...a,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...l,property:"text-decoration"},labelSpacing:{...l,property:"gap"}}}),(t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}),i.e4,i.Ae)((0,i.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\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${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${c.cssVarList.outlineWidth}) + var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${c.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${c.cssVarList.hostHeight}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${c.cssVarList.hostWidth}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s})),{color:h,fontSize:p}=c.cssVarList;d=`\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(${h});\n\t\ttop: calc(50% - (var(${p}) / 2));\n\t\tleft: calc(50% - (var(${p}) / 2));\n\t\tborder-width: calc(var(${p}) / 10);\n\t\twidth: var(${p});\n\t\theight: var(${p});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},2018:(t,e,n)=>{n.r(e),n.d(e,{ButtonClass:()=>r.n}),n(1721);var r=n(9690);customElements.define(r.f,r.n)},426:(t,e,n)=>{n.r(e),n.d(e,{GridSelectionColumnClass:()=>a,componentName:()=>o});var r=n(8623);n(3483);const o=(0,n(4567).iY)("grid-selection-column"),i=()=>{const t=document.createElement("descope-checkbox");return t.setAttribute("bordered","true"),t.setAttribute("size","xs"),t},s=t=>t.selectedItems.length===t.items?.length;class a extends r.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(t){const e=t.parentNode;let n=t.querySelector("descope-checkbox");n||(n=i(),n.addEventListener("input",(()=>{const t=s(e);e.selectedItems=t?[]:e.items})),t.appendChild(n)),n.setAttribute("checked",s(e))}_defaultRenderer(t,e,n){const r=t.parentNode;let o=t.querySelector("descope-checkbox");o||(o=i(),t.appendChild(o)),o.onchange=()=>{o.checked?r.selectItem(n.item):r.deselectItem(n.item)},o.setAttribute("checked",n.selected)}}customElements.define(o,a)},830:(t,e,n)=>{n.r(e),n.d(e,{GridStatusColumnClass:()=>i,componentName:()=>o});var r=n(322);const o=(0,n(4567).iY)("grid-status-column");class i extends r.n{_defaultRenderer(t,e,n){const r=this.getAttribute("status");if(!r)return void(t.innerHTML=n.item[this.path]);const[o,i]=r.split(","),s=n.item[this.path]?o:i;t.innerHTML=`<div style="padding:0 0.25em; border-radius:4px; background:${n.item[this.path]?"lightgreen":"pink"};">${s}</div>`}}customElements.define(o,i)},2356:(t,e,n)=>{n.r(e),n.d(e,{GridTextColumnClass:()=>i,componentName:()=>o});var r=n(322);n(2018);const o=(0,n(4567).iY)("grid-text-column");class i extends r.n{}customElements.define(o,i)},9950:(t,e,n)=>{n.r(e),n.d(e,{GridClass:()=>f}),n(849),n(2356),n(830),n(426);var r=n(2061),o=n(4567),i=n(1e3);const s=t=>{const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e},a=(0,o.iY)("grid"),{host:l,headerRow:d,contentRow:c,firstRow:h,sortIndicators:p,activeSortIndicator:u,selectedRow:b,rowSeparator:m,resizeHandle:g}={host:{selector:()=>"vaadin-grid"},headerRow:{selector:()=>"::part(header-cell)"},contentRow:{selector:()=>"::part(cell)"},firstRow:{selector:()=>"::part(first-header-row-cell)"},selectedRow:{selector:()=>"::part(selected-row-cell)"},sortIndicators:{selector:()=>"vaadin-grid-sorter::part(indicators)"},activeSortIndicator:{selector:()=>"vaadin-grid-sorter[direction]"},rowSeparator:{selector:()=>"vaadin-grid::part(body-cell)"},resizeHandle:{selector:()=>"::part(resize-handle)"}},f=(0,r.qC)((0,i.yk)({componentNameOverride:(0,o.iY)("input-wrapper")}),(0,i.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...d},{...c}],fontSize:[{...d},{...c}],fontWeight:{...c},valueTextColor:{...c,property:"color"},sortIndicatorsColor:{...p,property:"color"},activeSortIndicator:{...u,property:"color"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},selectedBackgroundColor:{...b,property:"background-color"},selectedTextColor:{...b,property:"color"},separatorColor:[{...h,property:"border-bottom-color"},{...m,property:"border-top-color"}],resizeHandleColor:{...g,property:"background-color"}}}),i.e4,i.Ae,(t=>class extends t{#t;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange(),this.baseElement._mapSorters=()=>{}}forwardSelectedItemsChange(){this.baseElement.addEventListener("selected-items-changed",(t=>{this.dispatchEvent(new CustomEvent("selected-items-changed",{bubbles:!0,composed:!0,detail:t.detail}))}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"columns"===t&&this.setColumnsDataFromAttr()}handleColumns(){this.columnsAttr?this.setColumnsDataFromAttr():this.children.length&&this.setColumnsFromChildren()}setColumnsFromChildren(){this.#t=Array.from(this.children).map((t=>({path:t.getAttribute("path"),header:t.getAttribute("header"),type:t.localName.match("^descope-grid-(\\w+)-column$")?.[1]||"text",attrs:["frozen","resizable","auto-width","status"].reduce(((e,n)=>{const r=t.getAttribute(n);return r&&(e[n]=r),e}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const t=JSON.parse(this.columnsAttr);s(t)&&(this.columns=t)}catch(t){console.error('could not parse data string from attribute "columns" -',t.message)}}#e=({path:t,header:e,type:n,attrs:r})=>{const o=`descope-grid-${n}-column`;return`<${o} header="${e}" path="${t}" ${Object.entries(r).map((([t,e])=>`${t}="${e}"`)).join(" ")}></${o}>`};get renderColumn(){return this.#e}set renderColumn(t){this.#e=t,this.renderColumns()}getColumnsTemplate(){return this.#t?.reduce?.(((t,e)=>t+(this.renderColumn?.(e||{})||"")),"")}renderColumns(){const t=this.getColumnsTemplate();t&&(this.innerHTML=t)}get grid(){return this.shadowRoot.querySelector("vaadin-grid")}get data(){return this.grid.items}set data(t){if(s(t)&&this.grid.items!==t&&(this.grid.items=t,this.grid.selectedItems)){const t=new Set(this.grid.items.map((t=>t[this.uniqueColumnId]??t))),e=this.grid.selectedItems.filter((e=>t.has(e[this.uniqueColumnId]??e)));this.grid.selectedItems.length!==e.length&&(this.grid.selectedItems=e)}}get columns(){return this.#t}set columns(t){this.#t=t,this.renderColumns()}get paths(){return this.columns.map((t=>t.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,i.DM)({slots:[""],wrappedEleName:"vaadin-grid",style:()=>"\n      vaadin-grid {\n        overflow: hidden;\n        height: 100%;\n        min-height: 300px;\n      }\n      vaadin-grid-cell-content {\n        display: flex;\n      }\n\t\t",excludeAttrsSync:["columns","tabindex"],componentName:a}));customElements.define(a,f)}}]);

package/dist/umd/index.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.DescopeUI=o():e.DescopeUI=o()}(self,(()=>(()=>{var e,o,s,n={534:(e,o,s)=>{var n={"./boolean-fields/descope-boolean-field-internal/index.js":[6676,5910,4567,1e3,3878,769],"./boolean-fields/descope-checkbox/index.js":[3483,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,1224,8725,9789,3092,4567,1e3,4201,3878,769,4803,3726],"./boolean-fields/descope-switch-toggle/index.js":[9203,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,1224,8725,9789,3092,4567,1e3,4201,3878,769,4803,4483],"./descope-button-selection-group/descope-button-selection-group-internal/index.js":[8460,5910,7531,4226,2269,2066,3660,1224,9211,4513,729,4567,1e3,3878,9662,1348],"./descope-button-selection-group/descope-button-selection-group-item/index.js":[7901,5910,7531,4226,2269,2066,3660,1224,9211,4513,729,4567,1e3,9662,206],"./descope-button-selection-group/index.js":[8086,5910,7531,4226,2269,2066,3660,1224,9211,4513,729,4567,1e3,4201,3878,9662,1348,6699],"./descope-button/index.js":[2018,5910,7531,4226,2269,2066,3660,1224,9211,4513,729,4567,1e3,9662],"./descope-combo-box/index.js":[1294,5910,7531,4226,2269,2066,3660,1037,7514,3208,262,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,9483],"./descope-container/index.js":[7107,5910,4567,1e3,7317],"./descope-date-picker/index.js":[2552,5910,7531,4226,2269,2066,3660,1037,7514,3208,1224,9211,9320,4513,9189,6091,5345,1990,4567,1e3,8017],"./descope-divider/index.js":[6162,5910,4567,1e3,2528,4178],"./descope-email-field/index.js":[1272,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,8725,9437,4567,1e3,4201,9671,9760],"./descope-grid/descope-grid-selection-column/index.js":[426,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,1224,8725,262,9789,4905,4447,3092,9629,4567,1e3,4201,3878,769,4803,3726,7487],"./descope-grid/descope-grid-status-column/index.js":[830,7531,2066,262,4905,4447,446,4567,1383],"./descope-grid/descope-grid-text-column/index.js":[2356,5910,7531,4226,2269,2066,3660,1224,262,9211,4905,4513,729,4447,446,4567,1e3,9662,3705],"./descope-grid/index.js":[9950,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,1224,8725,262,9789,9211,4905,4513,9189,729,3003,4447,3092,446,9629,9680,2873,4567,1e3,4201,9461],"./descope-image/index.js":[8278,5910,4567,1e3,6772],"./descope-link/index.js":[5846,5910,4567,1e3,2528,58],"./descope-loader-linear/index.js":[7845,5910,4567,1e3,6453],"./descope-loader-radial/index.js":[2797,5910,4567,1e3,3072],"./descope-logo/index.js":[1034,5910,4567,1e3,3585,1984],"./descope-modal/index.js":[958,5910,7531,4226,2269,1037,262,9320,9189,6091,1932,4567,1e3,4641],"./descope-new-password/descope-new-password-internal/index.js":[1545,5910,4567,1e3,4201,3878,2481,1842],"./descope-new-password/index.js":[8974,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,1224,8725,9789,9211,7056,4567,1e3,4201,3878,9671,2934,2481,1842,8106,7055],"./descope-notification/descope-notification-card/index.js":[5400,5910,7531,4226,1037,262,9320,6542,4567,1e3,7401],"./descope-notification/index.js":[1845,5910,7531,4226,1037,262,9320,6542,4567,1e3,7401,9655],"./descope-number-field/index.js":[6916,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,5806,4567,1e3,4201,9671,2142],"./descope-passcode/descope-passcode-internal/index.js":[4775,5910,4567,1e3,3878,1841],"./descope-passcode/index.js":[4919,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,8725,9789,4567,1e3,4201,3878,9671,2934,1841,939],"./descope-password/index.js":[9279,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,1224,8725,9211,7056,4567,1e3,4201,2481,8106],"./descope-recaptcha/index.js":[8164,5910,4567,1e3,964],"./descope-text-area/index.js":[1962,5910,7531,4226,2269,2066,3660,1037,7514,422,9680,6770,4567,1e3,4201,3322],"./descope-text-field/index.js":[9357,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,8725,9789,4567,1e3,4201,9671,2934],"./descope-text/index.js":[1876,5910,4567,1e3,2528],"./descope-totp-image/index.js":[1331,5910,4567,1e3,3585,5364],"./descope-upload-file/index.js":[6667,5910,7531,4226,2269,2066,3660,1224,9211,4513,729,4567,1e3,3878,9662,5874],"./phone-fields/descope-phone-field/descope-phone-field-internal/index.js":[9240,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,9671,2934,7262,9483,9288],"./phone-fields/descope-phone-field/index.js":[6581,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,9671,2934,7262,9483,9288,9806],"./phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js":[3067,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,8725,9789,4567,1e3,4201,3878,9671,2934,7262,4981],"./phone-fields/descope-phone-input-box-field/index.js":[9423,5910,7531,4226,2269,2066,3660,1037,7514,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,9671,2934,7262,9483,4981,5119]};function d(e){if(!s.o(n,e))return Promise.resolve().then((()=>{var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}));var o=n[e],d=o[0];return Promise.all(o.slice(1).map(s.e)).then((()=>s(d)))}d.keys=()=>Object.keys(n),d.id=534,e.exports=d},5561:(e,o,s)=>{"use strict";s.r(o),s.d(o,{componentsThemeManager:()=>n});const n=new class{static mountOnPropName="DescopeThemeManager";#e={};#o="light";#s=new Set;#n(){this.#s.forEach((e=>e?.()))}get currentThemeName(){return this.#o}set currentThemeName(e){this.#o=e,this.#n()}get currentTheme(){return this.#e[this.currentThemeName]}onCurrentThemeChange(e){return this.#s.add(e),()=>{this.#s.delete(e)}}set themes(e){this.#e=e,this.#n()}}},7507:(e,o,s)=>{const{componentsThemeManager:n}=s(5561),d=s(534);e.exports=d.keys().reduce(((e,o)=>{const s=o.replace(/.*?([^\/]+)\/index\.js$/,"$1");return s.endsWith("-internal")||(e[s]=()=>d(o)),e}),{}),e.exports.componentsThemeManager=n}},d={};function i(e){var o=d[e];if(void 0!==o)return o.exports;var s=d[e]={exports:{}};return n[e](s,s.exports,i),s.exports}i.m=n,e=[],i.O=(o,s,n,d)=>{if(!s){var t=1/0;for(a=0;a<e.length;a++){for(var[s,n,d]=e[a],r=!0,c=0;c<s.length;c++)(!1&d||t>=d)&&Object.keys(i.O).every((e=>i.O[e](s[c])))?s.splice(c--,1):(r=!1,d<t&&(t=d));if(r){e.splice(a--,1);var p=n();void 0!==p&&(o=p)}}return o}d=d||0;for(var a=e.length;a>0&&e[a-1][2]>d;a--)e[a]=e[a-1];e[a]=[s,n,d]},i.F={},i.E=e=>{Object.keys(i.F).map((o=>{i.F[o](e)}))},i.d=(e,o)=>{for(var s in o)i.o(o,s)&&!i.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:o[s]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((o,s)=>(i.f[s](e,o),o)),[])),i.u=e=>(({58:"descope-link-index-js",206:"descope-button-selection-group-descope-button-selection-group-item-index-js",769:"boolean-fields-descope-boolean-field-internal-index-js",939:"descope-passcode-index-js",964:"descope-recaptcha-index-js",1348:"descope-button-selection-group-descope-button-selection-group-internal-index-js",1383:"descope-grid-descope-grid-status-column-index-js",1841:"descope-passcode-descope-passcode-internal-index-js",1842:"descope-new-password-descope-new-password-internal-index-js",1984:"descope-logo-index-js",2142:"descope-number-field-index-js",2528:"descope-text-index-js",2934:"descope-text-field-index-js",3072:"descope-loader-radial-index-js",3322:"descope-text-area-index-js",3705:"descope-grid-descope-grid-text-column-index-js",3726:"boolean-fields-descope-checkbox-index-js",4178:"descope-divider-index-js",4483:"boolean-fields-descope-switch-toggle-index-js",4641:"descope-modal-index-js",4981:"phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js",5119:"phone-fields-descope-phone-input-box-field-index-js",5364:"descope-totp-image-index-js",5874:"descope-upload-file-index-js",6453:"descope-loader-linear-index-js",6699:"descope-button-selection-group-index-js",6772:"descope-image-index-js",7055:"descope-new-password-index-js",7317:"descope-container-index-js",7401:"descope-notification-descope-notification-card-index-js",7487:"descope-grid-descope-grid-selection-column-index-js",8017:"descope-date-picker-index-js",8106:"descope-password-index-js",9288:"phone-fields-descope-phone-field-descope-phone-field-internal-index-js",9461:"descope-grid-index-js",9483:"descope-combo-box-index-js",9655:"descope-notification-index-js",9662:"descope-button-index-js",9760:"descope-email-field-index-js",9806:"phone-fields-descope-phone-field-index-js"}[e]||e)+".js"),i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),o={},s="DescopeUI:",i.l=(e,n,d,t)=>{if(o[e])o[e].push(n);else{var r,c;if(void 0!==d)for(var p=document.getElementsByTagName("script"),a=0;a<p.length;a++){var l=p[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==s+d){r=l;break}}r||(c=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,i.nc&&r.setAttribute("nonce",i.nc),r.setAttribute("data-webpack",s+d),r.src=e),o[e]=[n];var u=(s,n)=>{r.onerror=r.onload=null,clearTimeout(x);var d=o[e];if(delete o[e],r.parentNode&&r.parentNode.removeChild(r),d&&d.forEach((e=>e(n))),s)return s(n)},x=setTimeout(u.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=u.bind(null,r.onerror),r.onload=u.bind(null,r.onload),c&&document.head.appendChild(r)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;i.g.importScripts&&(e=i.g.location+"");var o=i.g.document;if(!e&&o&&(o.currentScript&&(e=o.currentScript.src),!e)){var s=o.getElementsByTagName("script");if(s.length)for(var n=s.length-1;n>-1&&!e;)e=s[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={4826:0};i.f.j=(o,s)=>{var n=i.o(e,o)?e[o]:void 0;if(0!==n)if(n)s.push(n[2]);else{var d=new Promise(((s,d)=>n=e[o]=[s,d]));s.push(n[2]=d);var t=i.p+i.u(o),r=new Error;i.l(t,(s=>{if(i.o(e,o)&&(0!==(n=e[o])&&(e[o]=void 0),n)){var d=s&&("load"===s.type?"missing":s.type),t=s&&s.target&&s.target.src;r.message="Loading chunk "+o+" failed.\n("+d+": "+t+")",r.name="ChunkLoadError",r.type=d,r.request=t,n[1](r)}}),"chunk-"+o,o)}},i.F.j=o=>{if(!i.o(e,o)||void 0===e[o]){e[o]=null;var s=document.createElement("link");i.nc&&s.setAttribute("nonce",i.nc),s.rel="prefetch",s.as="script",s.href=i.p+i.u(o),document.head.appendChild(s)}},i.O.j=o=>0===e[o];var o=(o,s)=>{var n,d,[t,r,c]=s,p=0;if(t.some((o=>0!==e[o]))){for(n in r)i.o(r,n)&&(i.m[n]=r[n]);if(c)var a=c(i)}for(o&&o(s);p<t.length;p++)d=t[p],i.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return i.O(a)},s=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];s.forEach(o.bind(null,0)),s.push=o.bind(null,s.push.bind(s))})(),i.O(0,[4826],(()=>{[5910,4567,1e3,3878,769,7531,4226,2269,2066,3660,1037,7514,3208,422,1224,8725,9789,3092,4201,4803,3726,4483,9211,4513,729,9662,1348,206,6699,262,9320,4905,9189,6091,3003,5345,5977,9483,7317,1990,8017,2528,4178,9437,9671,9760,4447,9629,7487,446,1383,3705,9680,2873,9461,6772,58,6453,3072,3585,1984,1932,4641,2481,1842,7056,2934,8106,7055,6542,7401,9655,5806,2142,1841,939,964,6770,3322,5364,5874,7262,9288,9806,4981,5119].map(i.E)}),5);var t=i(7507);return i.O(t)})()));
+!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.DescopeUI=o():e.DescopeUI=o()}(self,(()=>(()=>{var e,o,s,n={534:(e,o,s)=>{var n={"./boolean-fields/descope-boolean-field-internal/index.js":[6676,5910,4567,1e3,3878,769],"./boolean-fields/descope-checkbox/index.js":[3483,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,9789,3092,4567,1e3,4201,3878,769,4803,3726],"./boolean-fields/descope-switch-toggle/index.js":[9203,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,9789,3092,4567,1e3,4201,3878,769,4803,4483],"./descope-badge/index.js":[8506,5910,4567,1e3,8012],"./descope-button-selection-group/descope-button-selection-group-internal/index.js":[8460,5910,7531,4226,2269,2066,3660,1224,9211,1721,4567,1e3,3878,9662,1348],"./descope-button-selection-group/descope-button-selection-group-item/index.js":[7901,5910,7531,4226,2269,2066,3660,1224,9211,1721,4567,1e3,9662,206],"./descope-button-selection-group/index.js":[8086,5910,7531,4226,2269,2066,3660,1224,9211,1721,4567,1e3,4201,3878,9662,1348,6699],"./descope-button/index.js":[2018,5910,7531,4226,2269,2066,3660,1224,9211,1721,4567,1e3,9662],"./descope-combo-box/index.js":[1294,5910,7531,4226,2269,2066,3660,1037,9558,3208,262,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,9483],"./descope-container/index.js":[7107,5910,4567,1e3,7317],"./descope-date-picker/index.js":[2552,5910,7531,4226,2269,2066,3660,1037,9558,3208,1224,9211,9320,9189,6091,5345,9092,4567,1e3,8017],"./descope-divider/index.js":[6162,5910,4567,1e3,2528,4178],"./descope-email-field/index.js":[1272,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,9437,4567,1e3,4201,4447,9760],"./descope-grid/descope-grid-selection-column/index.js":[426,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,262,9789,4905,5517,3092,8623,4567,1e3,4201,3878,769,4803,3726,7487],"./descope-grid/descope-grid-status-column/index.js":[830,7531,2066,262,4905,5517,322,4567,1383],"./descope-grid/descope-grid-text-column/index.js":[2356,5910,7531,4226,2269,2066,3660,1224,262,9211,4905,1721,5517,322,4567,1e3,9662,3705],"./descope-grid/index.js":[9950,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,262,9789,9211,4905,9189,1721,3003,5517,3092,322,8623,9680,849,4567,1e3,4201,3878,9461],"./descope-image/index.js":[8278,5910,4567,1e3,6772],"./descope-link/index.js":[5846,5910,4567,1e3,2528,58],"./descope-loader-linear/index.js":[7845,5910,4567,1e3,6453],"./descope-loader-radial/index.js":[2797,5910,4567,1e3,3072],"./descope-logo/index.js":[1034,5910,4567,1e3,3585,1984],"./descope-modal/index.js":[958,5910,7531,4226,2269,1037,262,9320,9189,6091,1932,4567,1e3,4641],"./descope-new-password/descope-new-password-internal/index.js":[1545,5910,4567,1e3,4201,3878,2481,1842],"./descope-new-password/index.js":[8974,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,9789,9211,7056,4567,1e3,4201,3878,4447,2934,2481,1842,8106,7055],"./descope-notification/descope-notification-card/index.js":[5400,5910,7531,4226,1037,262,9320,6542,4567,1e3,7401],"./descope-notification/index.js":[1845,5910,7531,4226,1037,262,9320,6542,4567,1e3,7401,9655],"./descope-number-field/index.js":[6916,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,5806,4567,1e3,4201,4447,2142],"./descope-passcode/descope-passcode-internal/index.js":[4775,5910,4567,1e3,3878,1841],"./descope-passcode/index.js":[4919,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,9789,4567,1e3,4201,3878,4447,2934,1841,939],"./descope-password/index.js":[9279,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,9211,7056,4567,1e3,4201,2481,8106],"./descope-recaptcha/index.js":[8164,5910,4567,1e3,964],"./descope-text-area/index.js":[1962,5910,7531,4226,2269,2066,3660,1037,9558,422,9680,6770,4567,1e3,4201,3322],"./descope-text-field/index.js":[9357,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,9789,4567,1e3,4201,4447,2934],"./descope-text/index.js":[1876,5910,4567,1e3,2528],"./descope-totp-image/index.js":[1331,5910,4567,1e3,3585,5364],"./descope-upload-file/index.js":[6667,5910,7531,4226,2269,2066,3660,1224,9211,1721,4567,1e3,3878,9662,5874],"./phone-fields/descope-phone-field/descope-phone-field-internal/index.js":[9240,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,4447,2934,7262,9483,9288],"./phone-fields/descope-phone-field/index.js":[6581,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,4447,2934,7262,9483,9288,9806],"./phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js":[3067,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,9789,4567,1e3,4201,3878,4447,2934,7262,4981],"./phone-fields/descope-phone-input-box-field/index.js":[9423,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,4447,2934,7262,9483,4981,5119]};function d(e){if(!s.o(n,e))return Promise.resolve().then((()=>{var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}));var o=n[e],d=o[0];return Promise.all(o.slice(1).map(s.e)).then((()=>s(d)))}d.keys=()=>Object.keys(n),d.id=534,e.exports=d},5561:(e,o,s)=>{"use strict";s.r(o),s.d(o,{componentsThemeManager:()=>n});const n=new class{static mountOnPropName="DescopeThemeManager";#e={};#o="light";#s=new Set;#n(){this.#s.forEach((e=>e?.()))}get currentThemeName(){return this.#o}set currentThemeName(e){this.#o=e,this.#n()}get currentTheme(){return this.#e[this.currentThemeName]}onCurrentThemeChange(e){return this.#s.add(e),()=>{this.#s.delete(e)}}set themes(e){this.#e=e,this.#n()}}},7507:(e,o,s)=>{const{componentsThemeManager:n}=s(5561),d=s(534);e.exports=d.keys().reduce(((e,o)=>{const s=o.replace(/.*?([^\/]+)\/index\.js$/,"$1");return s.endsWith("-internal")||(e[s]=()=>d(o)),e}),{}),e.exports.componentsThemeManager=n}},d={};function i(e){var o=d[e];if(void 0!==o)return o.exports;var s=d[e]={exports:{}};return n[e](s,s.exports,i),s.exports}i.m=n,e=[],i.O=(o,s,n,d)=>{if(!s){var t=1/0;for(a=0;a<e.length;a++){for(var[s,n,d]=e[a],r=!0,c=0;c<s.length;c++)(!1&d||t>=d)&&Object.keys(i.O).every((e=>i.O[e](s[c])))?s.splice(c--,1):(r=!1,d<t&&(t=d));if(r){e.splice(a--,1);var p=n();void 0!==p&&(o=p)}}return o}d=d||0;for(var a=e.length;a>0&&e[a-1][2]>d;a--)e[a]=e[a-1];e[a]=[s,n,d]},i.F={},i.E=e=>{Object.keys(i.F).map((o=>{i.F[o](e)}))},i.d=(e,o)=>{for(var s in o)i.o(o,s)&&!i.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:o[s]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((o,s)=>(i.f[s](e,o),o)),[])),i.u=e=>(({58:"descope-link-index-js",206:"descope-button-selection-group-descope-button-selection-group-item-index-js",769:"boolean-fields-descope-boolean-field-internal-index-js",939:"descope-passcode-index-js",964:"descope-recaptcha-index-js",1348:"descope-button-selection-group-descope-button-selection-group-internal-index-js",1383:"descope-grid-descope-grid-status-column-index-js",1841:"descope-passcode-descope-passcode-internal-index-js",1842:"descope-new-password-descope-new-password-internal-index-js",1984:"descope-logo-index-js",2142:"descope-number-field-index-js",2528:"descope-text-index-js",2934:"descope-text-field-index-js",3072:"descope-loader-radial-index-js",3322:"descope-text-area-index-js",3705:"descope-grid-descope-grid-text-column-index-js",3726:"boolean-fields-descope-checkbox-index-js",4178:"descope-divider-index-js",4483:"boolean-fields-descope-switch-toggle-index-js",4641:"descope-modal-index-js",4981:"phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js",5119:"phone-fields-descope-phone-input-box-field-index-js",5364:"descope-totp-image-index-js",5874:"descope-upload-file-index-js",6453:"descope-loader-linear-index-js",6699:"descope-button-selection-group-index-js",6772:"descope-image-index-js",7055:"descope-new-password-index-js",7317:"descope-container-index-js",7401:"descope-notification-descope-notification-card-index-js",7487:"descope-grid-descope-grid-selection-column-index-js",8012:"descope-badge-index-js",8017:"descope-date-picker-index-js",8106:"descope-password-index-js",9288:"phone-fields-descope-phone-field-descope-phone-field-internal-index-js",9461:"descope-grid-index-js",9483:"descope-combo-box-index-js",9655:"descope-notification-index-js",9662:"descope-button-index-js",9760:"descope-email-field-index-js",9806:"phone-fields-descope-phone-field-index-js"}[e]||e)+".js"),i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),o={},s="DescopeUI:",i.l=(e,n,d,t)=>{if(o[e])o[e].push(n);else{var r,c;if(void 0!==d)for(var p=document.getElementsByTagName("script"),a=0;a<p.length;a++){var l=p[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==s+d){r=l;break}}r||(c=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,i.nc&&r.setAttribute("nonce",i.nc),r.setAttribute("data-webpack",s+d),r.src=e),o[e]=[n];var u=(s,n)=>{r.onerror=r.onload=null,clearTimeout(x);var d=o[e];if(delete o[e],r.parentNode&&r.parentNode.removeChild(r),d&&d.forEach((e=>e(n))),s)return s(n)},x=setTimeout(u.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=u.bind(null,r.onerror),r.onload=u.bind(null,r.onload),c&&document.head.appendChild(r)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;i.g.importScripts&&(e=i.g.location+"");var o=i.g.document;if(!e&&o&&(o.currentScript&&(e=o.currentScript.src),!e)){var s=o.getElementsByTagName("script");if(s.length)for(var n=s.length-1;n>-1&&!e;)e=s[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={4826:0};i.f.j=(o,s)=>{var n=i.o(e,o)?e[o]:void 0;if(0!==n)if(n)s.push(n[2]);else{var d=new Promise(((s,d)=>n=e[o]=[s,d]));s.push(n[2]=d);var t=i.p+i.u(o),r=new Error;i.l(t,(s=>{if(i.o(e,o)&&(0!==(n=e[o])&&(e[o]=void 0),n)){var d=s&&("load"===s.type?"missing":s.type),t=s&&s.target&&s.target.src;r.message="Loading chunk "+o+" failed.\n("+d+": "+t+")",r.name="ChunkLoadError",r.type=d,r.request=t,n[1](r)}}),"chunk-"+o,o)}},i.F.j=o=>{if(!i.o(e,o)||void 0===e[o]){e[o]=null;var s=document.createElement("link");i.nc&&s.setAttribute("nonce",i.nc),s.rel="prefetch",s.as="script",s.href=i.p+i.u(o),document.head.appendChild(s)}},i.O.j=o=>0===e[o];var o=(o,s)=>{var n,d,[t,r,c]=s,p=0;if(t.some((o=>0!==e[o]))){for(n in r)i.o(r,n)&&(i.m[n]=r[n]);if(c)var a=c(i)}for(o&&o(s);p<t.length;p++)d=t[p],i.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return i.O(a)},s=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];s.forEach(o.bind(null,0)),s.push=o.bind(null,s.push.bind(s))})(),i.O(0,[4826],(()=>{[5910,4567,1e3,3878,769,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,9789,3092,4201,4803,3726,4483,8012,9211,1721,9662,1348,206,6699,262,9320,4905,9189,6091,3003,5345,5977,9483,7317,9092,8017,2528,4178,9437,4447,9760,5517,8623,7487,322,1383,3705,9680,849,9461,6772,58,6453,3072,3585,1984,1932,4641,2481,1842,7056,2934,8106,7055,6542,7401,9655,5806,2142,1841,939,964,6770,3322,5364,5874,7262,9288,9806,4981,5119].map(i.E)}),5);var t=i(7507);return i.O(t)})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.234",
+  "version": "1.0.236",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -49,6 +49,7 @@
   ],
   "license": "UNLICENSED",
   "devDependencies": {
+    "@babel/plugin-transform-logical-assignment-operators": "^7.23.4",
     "@babel/preset-env": "^7.22.2",
     "@jest/globals": "^29.7.0",
     "@playwright/test": "^1.38.1",
@@ -77,18 +78,18 @@
     "webpack-dev-server": "^4.13.3"
   },
   "dependencies": {
-    "@vaadin/button": "24.2.5",
-    "@vaadin/checkbox": "24.2.5",
-    "@vaadin/combo-box": "24.2.5",
-    "@vaadin/date-picker": "24.2.5",
-    "@vaadin/dialog": "24.2.5",
-    "@vaadin/email-field": "24.2.5",
-    "@vaadin/grid": "24.2.5",
-    "@vaadin/notification": "24.2.5",
-    "@vaadin/number-field": "24.2.5",
-    "@vaadin/password-field": "24.2.5",
-    "@vaadin/text-area": "24.2.5",
-    "@vaadin/text-field": "24.2.5",
+    "@vaadin/button": "24.3.4",
+    "@vaadin/checkbox": "24.3.4",
+    "@vaadin/combo-box": "24.3.4",
+    "@vaadin/date-picker": "24.3.4",
+    "@vaadin/dialog": "24.3.4",
+    "@vaadin/email-field": "24.3.4",
+    "@vaadin/grid": "24.3.4",
+    "@vaadin/notification": "24.3.4",
+    "@vaadin/number-field": "24.3.4",
+    "@vaadin/password-field": "24.3.4",
+    "@vaadin/text-area": "24.3.4",
+    "@vaadin/text-field": "24.3.4",
     "color": "^4.2.3",
     "element-internals-polyfill": "^1.3.9",
     "lint-staged": "^15.0.0",

package/src/components/descope-badge/BadgeClass.js

@@ -0,0 +1,54 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+
+export const componentName = getComponentName('badge');
+
+class RawBadge extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+      :host > div {
+        width: 100%;
+      }
+		</style>
+		<div>
+      <slot></slot>
+		</div>
+		`;
+  }
+}
+
+export const BadgeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostDirection: { property: 'direction' },
+
+      fontFamily: {},
+      fontSize: {},
+      fontWeight: {},
+
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+      borderRadius: {},
+
+      backgroundColor: {},
+
+      textColor: { property: 'color' },
+      textAlign: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawBadge);

package/src/components/descope-badge/index.js

@@ -0,0 +1,5 @@
+import { componentName, BadgeClass } from './BadgeClass';
+
+customElements.define(componentName, BadgeClass);
+
+export { BadgeClass };

package/src/index.cjs.js

@@ -31,3 +31,4 @@ export { ButtonSelectionGroupClass } from './components/descope-button-selection
 export { ButtonSelectionGroupItemClass } from './components/descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
 export { ModalClass } from './components/descope-modal/ModalClass';
 export { NotificationClass } from './components/descope-notification/NotificationClass';
+export { BadgeClass } from './components/descope-badge/BadgeClass';

package/src/index.d.ts

@@ -38,6 +38,7 @@ export { GridTextColumnClass } from './components/descope-grid/descope-grid-text
 export { GridSelectionColumnClass } from './components/descope-grid/descope-grid-selection-column/index';
 export { ModalClass } from './components/descope-modal/ModalClass';
 export { NotificationClass } from './components/descope-notification/';
+export { BadgeClass } from './components/descope-badge/';
 
 export type Theme = {
   globals: {

package/src/theme/components/badge.js

@@ -0,0 +1,71 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { BadgeClass } from '../../components/descope-badge/BadgeClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = BadgeClass.cssVarList;
+
+const badge = {
+  [vars.hostWidth]: 'fit-content',
+  [vars.hostDirection]: globalRefs.direction,
+
+  [vars.textAlign]: 'center',
+
+  [vars.fontFamily]: globalRefs.fonts.font1.family,
+  [vars.fontWeight]: '400',
+
+  [vars.verticalPadding]: '0.25em',
+  [vars.horizontalPadding]: '0.5em',
+
+  [vars.borderWidth]: globalRefs.border.xs,
+  [vars.borderRadius]: globalRefs.radius.sm,
+  [vars.borderColor]: 'transparent',
+  [vars.borderStyle]: 'solid',
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+
+  size: {
+    xs: { [vars.fontSize]: '12px' },
+    sm: { [vars.fontSize]: '14px' },
+    md: { [vars.fontSize]: '16px' },
+    lg: { [vars.fontSize]: '18px' },
+  },
+
+  mode: {
+    default: {
+      [vars.textColor]: globalRefs.colors.surface.dark,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.surface.main,
+      },
+    },
+    primary: {
+      [vars.textColor]: globalRefs.colors.primary.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.primary.light,
+      },
+    },
+    secondary: {
+      [vars.textColor]: globalRefs.colors.secondary.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.secondary.light,
+      },
+    },
+    error: {
+      [vars.borderColor]: globalRefs.colors.error.light,
+      _bordered: {
+        [vars.textColor]: globalRefs.colors.error.main,
+      },
+    },
+    success: {
+      [vars.textColor]: globalRefs.colors.success.main,
+      _bordered: {
+        [vars.borderColor]: globalRefs.colors.success.light,
+      },
+    },
+  },
+};
+
+export default badge;
+export { vars };

package/src/theme/components/index.js

@@ -26,6 +26,7 @@ import * as buttonSelectionGroup from './buttonSelectionGroup/buttonSelectionGro
 import * as modal from './modal';
 import * as grid from './grid';
 import * as notificationCard from './notificationCard';
+import * as badge from './badge';
 
 const components = {
   button,
@@ -57,6 +58,7 @@ const components = {
   modal,
   grid,
   notificationCard,
+  badge,
 };
 
 const theme = Object.keys(components).reduce(