@ni/spright-components 4.4.0 → 4.5.0

package/dist/all-components-bundle.min.js

@@ -4383,7 +4383,7 @@ _i.getOrCreate().withPrefix("nimble").register(ey())
 let ny=class t extends We{constructor(){super(...arguments),this.expandedItem=null,this.focusIndex=-1,this.isNestedMenu=()=>null!==this.parentElement&&za(this.parentElement)&&"menuitem"===this.parentElement.getAttribute("role"),this.handleFocusOut=t=>{if(!this.contains(t.relatedTarget)&&void 0!==this.menuItems){this.collapseExpandedItem()
 const t=this.menuItems.findIndex(this.isFocusableElement)
 this.menuItems[this.focusIndex]?.setAttribute("tabindex","-1"),this.menuItems[t]?.setAttribute("tabindex","0"),this.focusIndex=t}},this.handleItemFocus=t=>{const e=t.target
-void 0!==this.menuItems&&e!==this.menuItems[this.focusIndex]&&(this.menuItems[this.focusIndex]?.setAttribute("tabindex","-1"),this.focusIndex=this.menuItems.indexOf(e),e.setAttribute("tabindex","0"))},this.handleExpandedChanged=t=>{if(t.defaultPrevented||null===t.target||void 0===this.menuItems||!this.menuItems.includes(t.target))return
+void 0!==this.menuItems&&e!==this.menuItems[this.focusIndex]&&(this.menuItems[this.focusIndex]?.setAttribute("tabindex","-1"),this.focusIndex=this.menuItems.indexOf(e),e.setAttribute("tabindex","0"))},this.handleExpandedChanged=t=>{if(t.defaultPrevented||null===t.target||!this.menuItems?.includes(t.target))return
 t.preventDefault()
 const e=t.target
 null===this.expandedItem||e!==this.expandedItem||!1!==e.expanded?e.expanded&&(null!==this.expandedItem&&this.expandedItem!==e&&(this.expandedItem.expanded=!1),this.menuItems[this.focusIndex]?.setAttribute("tabindex","-1"),this.expandedItem=e,this.focusIndex=this.menuItems.indexOf(e),e.setAttribute("tabindex","0")):this.expandedItem=null},this.removeItemListeners=()=>{void 0!==this.menuItems&&this.menuItems.forEach((t=>{t.removeEventListener("expanded-change",this.handleExpandedChanged),t.removeEventListener("focus",this.handleItemFocus)}))},this.setItems=()=>{const t=this.domChildren()
@@ -7031,8 +7031,8 @@ class U_{constructor(t){this.editor=t.editor,this.rawCommands=this.editor.extens
 return Object.fromEntries(Object.entries(t).map((([t,e])=>[t,(...t)=>{const n=e(...t)(o)
 return s.getMeta("preventDispatch")||this.hasCustomState||i.dispatch(s),n}])))}get chain(){return()=>this.createChain()}get can(){return()=>this.createCan()}createChain(t,e=!0){const{rawCommands:n,editor:i,state:s}=this,{view:o}=i,r=[],a=!!t,l=t||s.tr,c={...Object.fromEntries(Object.entries(n).map((([t,n])=>[t,(...t)=>{const i=this.buildProps(l,e),s=n(...t)(i)
 return r.push(s),c}]))),run:()=>(a||!e||l.getMeta("preventDispatch")||this.hasCustomState||o.dispatch(l),r.every((t=>!0===t)))}
-return c}createCan(t){const{rawCommands:e,state:n}=this,i=t||n.tr,s=this.buildProps(i,false),o=Object.fromEntries(Object.entries(e).map((([t,e])=>[t,(...t)=>e(...t)({...s,dispatch:void 0})])))
-return{...o,chain:()=>this.createChain(i,false)}}buildProps(t,e=!0){const{rawCommands:n,editor:i,state:s}=this,{view:o}=i,r={tr:t,editor:i,view:o,state:H_({state:s,transaction:t}),dispatch:e?()=>{}:void 0,chain:()=>this.createChain(t,e),can:()=>this.createCan(t),get commands(){return Object.fromEntries(Object.entries(n).map((([t,e])=>[t,(...t)=>e(...t)(r)])))}}
+return c}createCan(t){const{rawCommands:e,state:n}=this,i=!1,s=t||n.tr,o=this.buildProps(s,i),r=Object.fromEntries(Object.entries(e).map((([t,e])=>[t,(...t)=>e(...t)({...o,dispatch:void 0})])))
+return{...r,chain:()=>this.createChain(s,i)}}buildProps(t,e=!0){const{rawCommands:n,editor:i,state:s}=this,{view:o}=i,r={tr:t,editor:i,view:o,state:H_({state:s,transaction:t}),dispatch:e?()=>{}:void 0,chain:()=>this.createChain(t,e),can:()=>this.createCan(t),get commands(){return Object.fromEntries(Object.entries(n).map((([t,e])=>[t,(...t)=>e(...t)(r)])))}}
 return r}}class q_{constructor(){this.callbacks={}}on(t,e){return this.callbacks[t]||(this.callbacks[t]=[]),this.callbacks[t].push(e),this}emit(t,...e){const n=this.callbacks[t]
 return n&&n.forEach((t=>t.apply(this,e))),this}off(t,e){const n=this.callbacks[t]
 return n&&(e?this.callbacks[t]=n.filter((t=>t!==e)):delete this.callbacks[t]),this}once(t,e){const n=(...i)=>{this.off(t,n),e.apply(this,i)}
@@ -7456,10 +7456,10 @@ i=i.parent}return n}querySelector(t,e={}){return this.querySelectorAll(t,e,!0)[0
 if(!this.children||0===this.children.length)return i
 const s=Object.keys(e)
 return this.children.forEach((o=>{if(!(n&&i.length>0)){if(o.node.type.name===t){s.every((t=>e[t]===o.node.attrs[t]))&&i.push(o)}n&&i.length>0||(i=i.concat(o.querySelectorAll(t,e,n)))}})),i}setAttribute(t){const{tr:e}=this.editor.state
-e.setNodeMarkup(this.from,void 0,{...this.node.attrs,...t}),this.editor.view.dispatch(e)}}class rM extends q_{constructor(t={}){super(),this.isFocused=!1,this.isInitialized=!1,this.extensionStorage={},this.options={element:document.createElement("div"),content:"",injectCSS:!0,injectNonce:void 0,extensions:[],autofocus:!1,editable:!0,editorProps:{},parseOptions:{},coreExtensionOptions:{},enableInputRules:!0,enablePasteRules:!0,enableCoreExtensions:!0,enableContentCheck:!1,onBeforeCreate:()=>null,onCreate:()=>null,onUpdate:()=>null,onSelectionUpdate:()=>null,onTransaction:()=>null,onFocus:()=>null,onBlur:()=>null,onDestroy:()=>null,onContentError:({error:t})=>{throw t},onPaste:()=>null,onDrop:()=>null},this.isCapturingTransaction=!1,this.capturedTransaction=null,this.setOptions(t),this.createExtensionManager(),this.createCommandManager(),this.createSchema(),this.on("beforeCreate",this.options.onBeforeCreate),this.emit("beforeCreate",{editor:this}),this.on("contentError",this.options.onContentError),this.createView(),this.injectCSS(),this.on("create",this.options.onCreate),this.on("update",this.options.onUpdate),this.on("selectionUpdate",this.options.onSelectionUpdate),this.on("transaction",this.options.onTransaction),this.on("focus",this.options.onFocus),this.on("blur",this.options.onBlur),this.on("destroy",this.options.onDestroy),this.on("drop",(({event:t,slice:e,moved:n})=>this.options.onDrop(t,e,n))),this.on("paste",(({event:t,slice:e})=>this.options.onPaste(t,e))),window.setTimeout((()=>{this.isDestroyed||(this.commands.focus(this.options.autofocus),this.emit("create",{editor:this}),this.isInitialized=!0)}),0)}get storage(){return this.extensionStorage}get commands(){return this.commandManager.commands}chain(){return this.commandManager.chain()}can(){return this.commandManager.can()}injectCSS(){this.options.injectCSS&&document&&(this.css=function(t,e,n){const i=document.querySelector("style[data-tiptap-style]")
-if(null!==i)return i
-const s=document.createElement("style")
-return e&&s.setAttribute("nonce",e),s.setAttribute("data-tiptap-style",""),s.innerHTML=t,document.getElementsByTagName("head")[0].appendChild(s),s}('.ProseMirror {\n  position: relative;\n}\n\n.ProseMirror {\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  white-space: break-spaces;\n  -webkit-font-variant-ligatures: none;\n  font-variant-ligatures: none;\n  font-feature-settings: "liga" 0; /* the above doesn\'t seem to work in Edge */\n}\n\n.ProseMirror [contenteditable="false"] {\n  white-space: normal;\n}\n\n.ProseMirror [contenteditable="false"] [contenteditable="true"] {\n  white-space: pre-wrap;\n}\n\n.ProseMirror pre {\n  white-space: pre-wrap;\n}\n\nimg.ProseMirror-separator {\n  display: inline !important;\n  border: none !important;\n  margin: 0 !important;\n  width: 0 !important;\n  height: 0 !important;\n}\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin: 0;\n}\n\n.ProseMirror-gapcursor:after {\n  content: "";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-hideselection *::selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection *::-moz-selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection * {\n  caret-color: transparent;\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.tippy-box[data-animation=fade][data-state=hidden] {\n  opacity: 0\n}',this.options.injectNonce))}setOptions(t={}){this.options={...this.options,...t},this.view&&this.state&&!this.isDestroyed&&(this.options.editorProps&&this.view.setProps(this.options.editorProps),this.view.updateState(this.state))}setEditable(t,e=!0){this.setOptions({editable:t}),e&&this.emit("update",{editor:this,transaction:this.state.tr})}get isEditable(){return this.options.editable&&this.view&&this.view.editable}get state(){return this.view.state}registerPlugin(t,e){const n=X_(e)?e(t,[...this.state.plugins]):[...this.state.plugins,t],i=this.state.reconfigure({plugins:n})
+e.setNodeMarkup(this.from,void 0,{...this.node.attrs,...t}),this.editor.view.dispatch(e)}}class rM extends q_{constructor(t={}){super(),this.isFocused=!1,this.isInitialized=!1,this.extensionStorage={},this.options={element:document.createElement("div"),content:"",injectCSS:!0,injectNonce:void 0,extensions:[],autofocus:!1,editable:!0,editorProps:{},parseOptions:{},coreExtensionOptions:{},enableInputRules:!0,enablePasteRules:!0,enableCoreExtensions:!0,enableContentCheck:!1,onBeforeCreate:()=>null,onCreate:()=>null,onUpdate:()=>null,onSelectionUpdate:()=>null,onTransaction:()=>null,onFocus:()=>null,onBlur:()=>null,onDestroy:()=>null,onContentError:({error:t})=>{throw t},onPaste:()=>null,onDrop:()=>null},this.isCapturingTransaction=!1,this.capturedTransaction=null,this.setOptions(t),this.createExtensionManager(),this.createCommandManager(),this.createSchema(),this.on("beforeCreate",this.options.onBeforeCreate),this.emit("beforeCreate",{editor:this}),this.on("contentError",this.options.onContentError),this.createView(),this.injectCSS(),this.on("create",this.options.onCreate),this.on("update",this.options.onUpdate),this.on("selectionUpdate",this.options.onSelectionUpdate),this.on("transaction",this.options.onTransaction),this.on("focus",this.options.onFocus),this.on("blur",this.options.onBlur),this.on("destroy",this.options.onDestroy),this.on("drop",(({event:t,slice:e,moved:n})=>this.options.onDrop(t,e,n))),this.on("paste",(({event:t,slice:e})=>this.options.onPaste(t,e))),window.setTimeout((()=>{this.isDestroyed||(this.commands.focus(this.options.autofocus),this.emit("create",{editor:this}),this.isInitialized=!0)}),0)}get storage(){return this.extensionStorage}get commands(){return this.commandManager.commands}chain(){return this.commandManager.chain()}can(){return this.commandManager.can()}injectCSS(){this.options.injectCSS&&document&&(this.css=function(t,e){const n=document.querySelector("style[data-tiptap-style]")
+if(null!==n)return n
+const i=document.createElement("style")
+return e&&i.setAttribute("nonce",e),i.setAttribute("data-tiptap-style",""),i.innerHTML=t,document.getElementsByTagName("head")[0].appendChild(i),i}('.ProseMirror {\n  position: relative;\n}\n\n.ProseMirror {\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  white-space: break-spaces;\n  -webkit-font-variant-ligatures: none;\n  font-variant-ligatures: none;\n  font-feature-settings: "liga" 0; /* the above doesn\'t seem to work in Edge */\n}\n\n.ProseMirror [contenteditable="false"] {\n  white-space: normal;\n}\n\n.ProseMirror [contenteditable="false"] [contenteditable="true"] {\n  white-space: pre-wrap;\n}\n\n.ProseMirror pre {\n  white-space: pre-wrap;\n}\n\nimg.ProseMirror-separator {\n  display: inline !important;\n  border: none !important;\n  margin: 0 !important;\n  width: 0 !important;\n  height: 0 !important;\n}\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin: 0;\n}\n\n.ProseMirror-gapcursor:after {\n  content: "";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-hideselection *::selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection *::-moz-selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection * {\n  caret-color: transparent;\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.tippy-box[data-animation=fade][data-state=hidden] {\n  opacity: 0\n}',this.options.injectNonce))}setOptions(t={}){this.options={...this.options,...t},this.view&&this.state&&!this.isDestroyed&&(this.options.editorProps&&this.view.setProps(this.options.editorProps),this.view.updateState(this.state))}setEditable(t,e=!0){this.setOptions({editable:t}),e&&this.emit("update",{editor:this,transaction:this.state.tr})}get isEditable(){return this.options.editable&&this.view&&this.view.editable}get state(){return this.view.state}registerPlugin(t,e){const n=X_(e)?e(t,[...this.state.plugins]):[...this.state.plugins,t],i=this.state.reconfigure({plugins:n})
 return this.view.updateState(i),i}unregisterPlugin(t){if(this.isDestroyed)return
 const e=this.state.plugins
 let n=e
@@ -9185,7 +9185,7 @@ if(null!==o&&!b)return null
 const y=m+g.index
 let w=y+g[0].length
 return l&&d.test(f.slice(w-1,w+1))&&(g[0]+=" ",w+=1),y<a.pos&&w>=a.pos?{range:{from:y,to:w},query:g[0].slice(n.length),text:g[0]}:null}const FT=new Wx("suggestion")
-function NT({pluginKey:t=FT,editor:e,char:n="@",allowSpaces:i=!1,allowToIncludeChar:s=!1,allowedPrefixes:o=[" "],startOfLine:r=!1,decorationTag:a="span",decorationClass:l="suggestion",command:c=(()=>null),items:d=(()=>[]),render:h=(()=>({})),allow:u=(()=>!0),findSuggestionMatch:p=RT}){let f
+function NT({pluginKey:t=FT,editor:e,char:n="@",allowSpaces:i=!1,allowToIncludeChar:s=!1,allowedPrefixes:o=[" "],startOfLine:r=!1,decorationTag:a="span",decorationClass:l="suggestion",command:c=()=>null,items:d=()=>[],render:h=()=>({}),allow:u=()=>!0,findSuggestionMatch:p=RT}){let f
 const m=null==h?void 0:h(),g=new Ux({key:t,view(){return{update:async(t,n)=>{var i,s,o,r,a,l,h
 const u=null===(i=this.key)||void 0===i?void 0:i.getState(n),p=null===(s=this.key)||void 0===s?void 0:s.getState(t.state),g=u.active&&p.active&&u.range.from!==p.range.from,v=!u.active&&p.active,b=u.active&&!p.active,y=!v&&!b&&u.query!==p.query,w=v||g&&y,x=y||g,C=b||g&&y
 if(!w&&!x&&!C)return
@@ -9509,12 +9509,14 @@ const nR=Mt`
         }
 
         div.bit1 {
-            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
+            animation-name:
+                ni-private-spinner-no-motion-opacity-keyframes,
                 ni-private-spinner-no-motion-transform-keyframes-1;
         }
 
         div.bit2 {
-            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
+            animation-name:
+                ni-private-spinner-no-motion-opacity-keyframes,
                 ni-private-spinner-no-motion-transform-keyframes-2;
         }
     }
@@ -11565,9 +11567,10 @@ if(!i)return
 const s=t=>{const{width:n,height:i}=t
 e({width:Math.round(n),height:Math.round(i)})}
 if(s(n.getBoundingClientRect()),!i.ResizeObserver)return()=>{}
-const o=new i.ResizeObserver((t=>{const e=t[0]
-if(null==e?void 0:e.borderBoxSize){const t=e.borderBoxSize[0]
-if(t)return void s({width:t.inlineSize,height:t.blockSize})}s(n.getBoundingClientRect())}))
+const o=new i.ResizeObserver((e=>{const i=()=>{const t=e[0]
+if(null==t?void 0:t.borderBoxSize){const e=t.borderBoxSize[0]
+if(e)return void s({width:e.inlineSize,height:e.blockSize})}s(n.getBoundingClientRect())}
+t.options.useAnimationFrameWithResizeObserver?requestAnimationFrame(i):i()}))
 return o.observe(n,{box:"border-box"}),()=>{o.unobserve(n)}},ON={passive:!0},TN="undefined"==typeof window||"onscrollend"in window,RN=(t,e)=>{const n=t.scrollElement
 if(!n)return
 const i=t.targetWindow
@@ -11582,11 +11585,12 @@ if(t){return Math.round(t[n.options.horizontal?"inlineSize":"blockSize"])}}retur
 const r=t+e
 null==(o=null==(s=i.scrollElement)?void 0:s.scrollTo)||o.call(s,{[i.options.horizontal?"left":"top"]:r,behavior:n})}
 let LN=class{constructor(t){this.unsubs=[],this.scrollElement=null,this.targetWindow=null,this.isScrolling=!1,this.scrollToIndexTimeoutId=null,this.measurementsCache=[],this.itemSizeCache=new Map,this.pendingMeasuredCacheIndexes=[],this.scrollRect=null,this.scrollOffset=null,this.scrollDirection=null,this.scrollAdjustments=0,this.elementsCache=new Map,this.observer=(()=>{let t=null
-const e=()=>t||(this.targetWindow&&this.targetWindow.ResizeObserver?t=new this.targetWindow.ResizeObserver((t=>{t.forEach((t=>{this._measureElement(t.target,t)}))})):null)
+const e=()=>t||(this.targetWindow&&this.targetWindow.ResizeObserver?t=new this.targetWindow.ResizeObserver((t=>{t.forEach((t=>{const e=()=>{this._measureElement(t.target,t)}
+this.options.useAnimationFrameWithResizeObserver?requestAnimationFrame(e):e()}))})):null)
 return{disconnect:()=>{var n
 null==(n=e())||n.disconnect(),t=null},observe:t=>{var n
 return null==(n=e())?void 0:n.observe(t,{box:"border-box"})},unobserve:t=>{var n
-return null==(n=e())?void 0:n.unobserve(t)}}})(),this.range=null,this.setOptions=t=>{Object.entries(t).forEach((([e,n])=>{void 0===n&&delete t[e]})),this.options={debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:DN,rangeExtractor:EN,onChange:()=>{},measureElement:FN,initialRect:{width:0,height:0},scrollMargin:0,gap:0,indexAttribute:"data-index",initialMeasurementsCache:[],lanes:1,isScrollingResetDelay:150,enabled:!0,isRtl:!1,useScrollendEvent:!0,...t}},this.notify=t=>{var e,n
+return null==(n=e())?void 0:n.unobserve(t)}}})(),this.range=null,this.setOptions=t=>{Object.entries(t).forEach((([e,n])=>{void 0===n&&delete t[e]})),this.options={debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:DN,rangeExtractor:EN,onChange:()=>{},measureElement:FN,initialRect:{width:0,height:0},scrollMargin:0,gap:0,indexAttribute:"data-index",initialMeasurementsCache:[],lanes:1,isScrollingResetDelay:150,enabled:!0,isRtl:!1,useScrollendEvent:!0,useAnimationFrameWithResizeObserver:!1,...t}},this.notify=t=>{var e,n
 null==(n=(e=this.options).onChange)||n.call(e,this,t)},this.maybeNotify=IN((()=>(this.calculateRange(),[this.isScrolling,this.range?this.range.startIndex:null,this.range?this.range.endIndex:null])),(t=>{this.notify(t)}),{key:!1,debug:()=>this.options.debug,initialDeps:[this.isScrolling,this.range?this.range.startIndex:null,this.range?this.range.endIndex:null]}),this.cleanup=()=>{this.unsubs.filter(Boolean).forEach((t=>t())),this.unsubs=[],this.observer.disconnect(),this.scrollElement=null,this.targetWindow=null},this._didMount=()=>()=>{this.cleanup()},this._willUpdate=()=>{var t
 const e=this.options.enabled?this.options.getScrollElement():null
 if(this.scrollElement!==e){if(this.cleanup(),!e)return void this.maybeNotify()
@@ -15003,8 +15007,65 @@ this.canvas.width=i,this.canvas.height=n,this.canvasWidth=i,this.canvasHeight=n}
 return zU(n)?n.then((e=>t(e))):n.isAsync()?n.readAll().then((t=>new uK(t))):new uK(n.readAll())}},t([ft({attribute:"origin-location"})],ZX.prototype,"originLocation",void 0),t([ft({attribute:"grid-min-x",converter:ut})],ZX.prototype,"gridMinX",void 0),t([ft({attribute:"grid-max-x",converter:ut})],ZX.prototype,"gridMaxX",void 0),t([ft({attribute:"grid-min-y",converter:ut})],ZX.prototype,"gridMinY",void 0),t([ft({attribute:"grid-max-y",converter:ut})],ZX.prototype,"gridMaxY",void 0),t([ft],ZX.prototype,"orientation",void 0),t([ft({attribute:"max-characters",converter:ut})],ZX.prototype,"maxCharacters",void 0),t([ft({attribute:"die-labels-hidden",mode:"boolean"})],ZX.prototype,"dieLabelsHidden",void 0),t([ft({attribute:"die-labels-suffix"})],ZX.prototype,"dieLabelsSuffix",void 0),t([ft({attribute:"color-scale-mode"})],ZX.prototype,"colorScaleMode",void 0),t([C],ZX.prototype,"renderer",void 0),t([C],ZX.prototype,"canvasWidth",void 0),t([C],ZX.prototype,"canvasHeight",void 0),t([C],ZX.prototype,"transform",void 0),t([C],ZX.prototype,"hoverTransform",void 0),t([C],ZX.prototype,"hoverOpacity",void 0),t([C],ZX.prototype,"hoverWidth",void 0),t([C],ZX.prototype,"hoverHeight",void 0),t([C],ZX.prototype,"hoverDie",void 0),t([C],ZX.prototype,"highlightedTags",void 0),t([C],ZX.prototype,"dies",void 0),t([C],ZX.prototype,"diesTable",void 0),t([C],ZX.prototype,"colorScale",void 0)
 const KX=ZX.compose({baseName:"wafer-map",template:uY,styles:pY})
 _i.getOrCreate().withPrefix("nimble").register(KX())
-const YX=Mt`
-    ${XX="inline-block",`${Ns(XX)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`}
+const YX=t=>`${Ns(t)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`,XX=Mt`
+    ${YX("flex")}
+
+    :host {
+        flex-direction: column;
+        justify-content: flex-start;
+        row-gap: ${ql};
+        padding: ${Ul};
+        background: ${vl};
+        overflow-y: auto;
+    }
+`,JX=Q`<slot></slot>`
+const QX=class extends We{}.compose({baseName:"chat-conversation",template:JX,styles:XX})
+_i.getOrCreate().withPrefix("spright").register(QX())
+const tJ=Mt`
+    ${YX("flex")}
+
+    :host {
+        min-width: 16px;
+        min-height: 16px;
+
+        flex-direction: row;
+        justify-content: center;
+        flex-shrink: 0;
+        font: ${od};
+        color: ${rd};
+    }
+
+    :host([message-type='outbound']) {
+        justify-content: flex-end;
+    }
+
+    :host([message-type='inbound']) {
+        justify-content: flex-start;
+    }
+
+    div {
+        max-width: calc(100% - 200px);
+        width: fit-content;
+        height: fit-content;
+        padding: ${Ul};
+        overflow-x: auto;
+    }
+
+    :host([message-type='outbound']) div {
+        background: ${bl};
+        border: ${Wl} solid ${$l};
+        border-radius: 8px 8px 0px 8px;
+    }
+
+    :host([message-type='inbound']) div {
+        border-radius: 8px 8px 8px 0px;
+    }
+`,eJ=Q`<div><slot></slot></div>`,nJ={system:void 0}
+class iJ extends We{constructor(){super(...arguments),this.messageType=nJ.system}}t([ft({attribute:"message-type"})],iJ.prototype,"messageType",void 0)
+const sJ=iJ.compose({baseName:"chat-message",template:eJ,styles:tJ})
+_i.getOrCreate().withPrefix("spright").register(sJ())
+const oJ=Mt`
+    ${YX("inline-block")}
 
     :host {
         border: 2px solid ${$l};
@@ -15026,9 +15087,7 @@ const YX=Mt`
     :host([disabled]) slot {
         color: ${ad};
     }
-`
-var XX
-const JX=Q`<slot></slot>`
-const QX=class extends We{}.compose({baseName:"rectangle",template:JX,styles:YX})
-_i.getOrCreate().withPrefix("spright").register(QX())}()
+`,rJ=Q`<slot></slot>`
+const aJ=class extends We{}.compose({baseName:"rectangle",template:rJ,styles:oJ})
+_i.getOrCreate().withPrefix("spright").register(aJ())}()
 //# sourceMappingURL=all-components-bundle.min.js.map