@ni/spright-components 6.5.0 → 6.6.1

package/dist/esm/all-components.d.ts

@@ -7,4 +7,7 @@ import '@ni/nimble-components/dist/esm/all-components';
 import './chat/conversation';
 import './chat/input';
 import './chat/message';
+import './chat/message/inbound';
+import './chat/message/outbound';
+import './chat/message/system';
 import './rectangle';

package/dist/esm/all-components.js

@@ -7,5 +7,8 @@ import '@ni/nimble-components/dist/esm/all-components';
 import './chat/conversation';
 import './chat/input';
 import './chat/message';
+import './chat/message/inbound';
+import './chat/message/outbound';
+import './chat/message/system';
 import './rectangle';
 //# sourceMappingURL=all-components.js.map

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+CAA+C,CAAC;AAEvD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC","sourcesContent":["/**\n * Import of all the web components available in Spright AND Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/nimble-components/dist/esm/all-components';\n\nimport './chat/conversation';\nimport './chat/input';\nimport './chat/message';\nimport './rectangle';\n"]}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,+CAA+C,CAAC;AAEvD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,aAAa,CAAC","sourcesContent":["/**\n * Import of all the web components available in Spright AND Nimble.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/nimble-components/dist/esm/all-components';\n\nimport './chat/conversation';\nimport './chat/input';\nimport './chat/message';\nimport './chat/message/inbound';\nimport './chat/message/outbound';\nimport './chat/message/system';\nimport './rectangle';\n"]}

package/dist/esm/chat/message/inbound/index.d.ts

@@ -0,0 +1,22 @@
+import { FoundationElement, type FoundationElementDefinition, type StartEndOptions } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'spright-chat-message-inbound': ChatMessageInbound;
+    }
+}
+/**
+ * SprightChatMessageInbound configuration options
+ * @public
+ */
+export type ChatMessageInboundOptions = FoundationElementDefinition & StartEndOptions;
+/**
+ * A Spright component for displaying a chat message
+ */
+export declare class ChatMessageInbound extends FoundationElement {
+    /** @internal */
+    footerActionsIsEmpty: boolean;
+    /** @internal */
+    readonly slottedFooterActionsElements?: HTMLElement[];
+    slottedFooterActionsElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
+}
+export declare const chatMessageInboundTag = "spright-chat-message-inbound";

package/dist/esm/chat/message/inbound/index.js

@@ -0,0 +1,33 @@
+import { __decorate } from "tslib";
+import { observable } from '@ni/fast-element';
+import { applyMixins, DesignSystem, FoundationElement, StartEnd } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Spright component for displaying a chat message
+ */
+export class ChatMessageInbound extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.footerActionsIsEmpty = true;
+    }
+    slottedFooterActionsElementsChanged(_prev, next) {
+        this.footerActionsIsEmpty = !next?.length;
+    }
+}
+__decorate([
+    observable
+], ChatMessageInbound.prototype, "footerActionsIsEmpty", void 0);
+__decorate([
+    observable
+], ChatMessageInbound.prototype, "slottedFooterActionsElements", void 0);
+applyMixins(ChatMessageInbound, StartEnd);
+const sprightChatMessageInbound = ChatMessageInbound.compose({
+    baseName: 'chat-message-inbound',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
+export const chatMessageInboundTag = 'spright-chat-message-inbound';
+//# sourceMappingURL=index.js.map

package/dist/esm/chat/message/inbound/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chat/message/inbound/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EAGX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AActC;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,iBAAiB;IAAzD;;QACI,gBAAgB;QAET,yBAAoB,GAAG,IAAI,CAAC;IAYvC,CAAC;IANU,mCAAmC,CACtC,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC;IAC9C,CAAC;CACJ;AAZU;IADN,UAAU;gEACwB;AAInB;IADf,UAAU;wEACkD;AASjE,WAAW,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AAE1C,MAAM,yBAAyB,GAAG,kBAAkB,CAAC,OAAO,CAAC;IACzD,QAAQ,EAAE,sBAAsB;IAChC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,yBAAyB,EAAE,CAAC,CAAC;AACvF,MAAM,CAAC,MAAM,qBAAqB,GAAG,8BAA8B,CAAC","sourcesContent":["import { observable } from '@ni/fast-element';\nimport {\n    applyMixins,\n    DesignSystem,\n    FoundationElement,\n    StartEnd,\n    type FoundationElementDefinition,\n    type StartEndOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-message-inbound': ChatMessageInbound;\n    }\n}\n\n/**\n * SprightChatMessageInbound configuration options\n * @public\n */\nexport type ChatMessageInboundOptions = FoundationElementDefinition & StartEndOptions;\n\n/**\n * A Spright component for displaying a chat message\n */\nexport class ChatMessageInbound extends FoundationElement {\n    /** @internal */\n    @observable\n    public footerActionsIsEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedFooterActionsElements?: HTMLElement[];\n\n    public slottedFooterActionsElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.footerActionsIsEmpty = !next?.length;\n    }\n}\napplyMixins(ChatMessageInbound, StartEnd);\n\nconst sprightChatMessageInbound = ChatMessageInbound.compose({\n    baseName: 'chat-message-inbound',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());\nexport const chatMessageInboundTag = 'spright-chat-message-inbound';\n"]}

package/dist/esm/chat/message/inbound/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/chat/message/inbound/styles.js

@@ -0,0 +1,65 @@
+import { css } from '@ni/fast-element';
+import { anchorButtonTag } from '@ni/nimble-components/dist/esm/anchor-button';
+import { buttonTag } from '@ni/nimble-components/dist/esm/button';
+import { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';
+import { toggleButtonTag } from '@ni/nimble-components/dist/esm/toggle-button';
+import { bodyFont, bodyFontColor, controlSlimHeight, largePadding, mediumPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../../utilities/style/display';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        min-width: ${standardPadding};
+        min-height: ${standardPadding};
+
+        flex-direction: row;
+        justify-content: flex-start;
+        flex-shrink: 0;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        max-width: calc(90%);
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    .message-content {
+        width: fit-content;
+        height: fit-content;
+        overflow-x: auto;
+    }
+
+    .footer-actions {
+        display: none;
+    }
+
+    :host .footer-actions.has-content {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${mediumPadding};
+    }
+
+    .footer-actions ::slotted(${buttonTag}),
+    .footer-actions ::slotted(${toggleButtonTag}),
+    .footer-actions ::slotted(${anchorButtonTag}),
+    .footer-actions ::slotted(${menuButtonTag}) {
+        height: ${controlSlimHeight};
+    }
+
+    .end {
+        display: none;
+    }
+
+    :host .end {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${largePadding};
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/chat/message/inbound/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/chat/message/inbound/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,OAAO,EACH,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;qBAGA,eAAe;sBACd,eAAe;;;;;gBAKrB,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;sBAyBR,eAAe;sBACf,aAAa;;;gCAGH,SAAS;gCACT,eAAe;gCACf,eAAe;gCACf,aAAa;kBAC3B,iBAAiB;;;;;;;;;sBASb,eAAe;sBACf,YAAY;;CAEjC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { anchorButtonTag } from '@ni/nimble-components/dist/esm/anchor-button';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';\nimport { toggleButtonTag } from '@ni/nimble-components/dist/esm/toggle-button';\n\nimport {\n    bodyFont,\n    bodyFontColor,\n    controlSlimHeight,\n    largePadding,\n    mediumPadding,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        min-width: ${standardPadding};\n        min-height: ${standardPadding};\n\n        flex-direction: row;\n        justify-content: flex-start;\n        flex-shrink: 0;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    .container {\n        display: flex;\n        flex-direction: column;\n        max-width: calc(90%);\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .message-content {\n        width: fit-content;\n        height: fit-content;\n        overflow-x: auto;\n    }\n\n    .footer-actions {\n        display: none;\n    }\n\n    :host .footer-actions.has-content {\n        display: flex;\n        column-gap: ${standardPadding};\n        margin-top: ${mediumPadding};\n    }\n\n    .footer-actions ::slotted(${buttonTag}),\n    .footer-actions ::slotted(${toggleButtonTag}),\n    .footer-actions ::slotted(${anchorButtonTag}),\n    .footer-actions ::slotted(${menuButtonTag}) {\n        height: ${controlSlimHeight};\n    }\n\n    .end {\n        display: none;\n    }\n\n    :host .end {\n        display: flex;\n        column-gap: ${standardPadding};\n        margin-top: ${largePadding};\n    }\n`;\n"]}

package/dist/esm/chat/message/inbound/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@ni/fast-element';
+import { type FoundationElementTemplate } from '@ni/fast-foundation';
+import type { ChatMessageInbound, ChatMessageInboundOptions } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<ChatMessageInbound>, ChatMessageInboundOptions>;

package/dist/esm/chat/message/inbound/template.js

@@ -0,0 +1,18 @@
+import { html, slotted, ViewTemplate } from '@ni/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '@ni/fast-foundation';
+export const template = (context, definition) => html `
+    <div class="container">
+        ${startSlotTemplate(context, definition)}
+        <section class="message-content">
+            <slot></slot>
+        </section>
+        <section class="footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}">
+           <slot 
+                name="footer-actions"
+                ${slotted({ property: 'slottedFooterActionsElements' })}
+           ></slot>
+        </section>
+        ${endSlotTemplate(context, definition)}
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/chat/message/inbound/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/chat/message/inbound/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EACH,eAAe,EACf,iBAAiB,EAEpB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,CAAC,MAAM,QAAQ,GAEQ,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAoB;;UAEpE,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;yCAIP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;;;kBAGzE,OAAO,CAAC,EAAE,QAAQ,EAAE,8BAA8B,EAAE,CAAC;;;UAG7D,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;CAE7C,CAAC","sourcesContent":["import { html, slotted, ViewTemplate } from '@ni/fast-element';\nimport {\n    endSlotTemplate,\n    startSlotTemplate,\n    type FoundationElementTemplate\n} from '@ni/fast-foundation';\nimport type { ChatMessageInbound, ChatMessageInboundOptions } from '.';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<ChatMessageInbound>,\nChatMessageInboundOptions> = (context, definition) => html<ChatMessageInbound>`\n    <div class=\"container\">\n        ${startSlotTemplate(context, definition)}\n        <section class=\"message-content\">\n            <slot></slot>\n        </section>\n        <section class=\"footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}\">\n           <slot \n                name=\"footer-actions\"\n                ${slotted({ property: 'slottedFooterActionsElements' })}\n           ></slot>\n        </section>\n        ${endSlotTemplate(context, definition)}\n    </div>\n`;\n"]}

package/dist/esm/chat/message/index.d.ts

@@ -12,6 +12,7 @@ declare global {
 export type ChatMessageOptions = FoundationElementDefinition & StartEndOptions;
 /**
  * A Spright component for displaying a chat message
+ * @deprecated Use specific message component types instead
  */
 export declare class ChatMessage extends FoundationElement {
     /**

package/dist/esm/chat/message/index.js

@@ -6,6 +6,7 @@ import { template } from './template';
 import { ChatMessageType } from './types';
 /**
  * A Spright component for displaying a chat message
+ * @deprecated Use specific message component types instead
  */
 export class ChatMessage extends FoundationElement {
     constructor() {

package/dist/esm/chat/message/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/message/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EACH,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EAGX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAc1C;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACI;;;;;WAKG;QAEI,gBAAW,GAAoB,eAAe,CAAC,MAAM,CAAC;QAE7D,gBAAgB;QAET,yBAAoB,GAAG,IAAI,CAAC;IAYvC,CAAC;IANU,mCAAmC,CACtC,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC;IAC9C,CAAC;CACJ;AAhBU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDACyB;AAItD;IADN,UAAU;yDACwB;AAInB;IADf,UAAU;iEACkD;AASjE,WAAW,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAEnC,MAAM,kBAAkB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC3C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport {\n    applyMixins,\n    DesignSystem,\n    FoundationElement,\n    StartEnd,\n    type FoundationElementDefinition,\n    type StartEndOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ChatMessageType } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-message': ChatMessage;\n    }\n}\n\n/**\n * SprightChatMessage configuration options\n * @public\n */\nexport type ChatMessageOptions = FoundationElementDefinition & StartEndOptions;\n\n/**\n * A Spright component for displaying a chat message\n */\nexport class ChatMessage extends FoundationElement {\n    /**\n     * @public\n     * The message type of this message in the chat conversation\n     * @remarks\n     * HTML Attribute: message-type\n     */\n    @attr({ attribute: 'message-type' })\n    public messageType: ChatMessageType = ChatMessageType.system;\n\n    /** @internal */\n    @observable\n    public footerActionsIsEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedFooterActionsElements?: HTMLElement[];\n\n    public slottedFooterActionsElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.footerActionsIsEmpty = !next?.length;\n    }\n}\napplyMixins(ChatMessage, StartEnd);\n\nconst sprightChatMessage = ChatMessage.compose({\n    baseName: 'chat-message',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());\nexport const chatMessageTag = 'spright-chat-message';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/chat/message/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EACH,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EAGX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAc1C;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QACI;;;;;WAKG;QAEI,gBAAW,GAAoB,eAAe,CAAC,MAAM,CAAC;QAE7D,gBAAgB;QAET,yBAAoB,GAAG,IAAI,CAAC;IAYvC,CAAC;IANU,mCAAmC,CACtC,KAAgC,EAChC,IAA+B;QAE/B,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC;IAC9C,CAAC;CACJ;AAhBU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDACyB;AAItD;IADN,UAAU;yDACwB;AAInB;IADf,UAAU;iEACkD;AASjE,WAAW,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAEnC,MAAM,kBAAkB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC3C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport {\n    applyMixins,\n    DesignSystem,\n    FoundationElement,\n    StartEnd,\n    type FoundationElementDefinition,\n    type StartEndOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { ChatMessageType } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-message': ChatMessage;\n    }\n}\n\n/**\n * SprightChatMessage configuration options\n * @public\n */\nexport type ChatMessageOptions = FoundationElementDefinition & StartEndOptions;\n\n/**\n * A Spright component for displaying a chat message\n * @deprecated Use specific message component types instead\n */\nexport class ChatMessage extends FoundationElement {\n    /**\n     * @public\n     * The message type of this message in the chat conversation\n     * @remarks\n     * HTML Attribute: message-type\n     */\n    @attr({ attribute: 'message-type' })\n    public messageType: ChatMessageType = ChatMessageType.system;\n\n    /** @internal */\n    @observable\n    public footerActionsIsEmpty = true;\n\n    /** @internal */\n    @observable\n    public readonly slottedFooterActionsElements?: HTMLElement[];\n\n    public slottedFooterActionsElementsChanged(\n        _prev: HTMLElement[] | undefined,\n        next: HTMLElement[] | undefined\n    ): void {\n        this.footerActionsIsEmpty = !next?.length;\n    }\n}\napplyMixins(ChatMessage, StartEnd);\n\nconst sprightChatMessage = ChatMessage.compose({\n    baseName: 'chat-message',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());\nexport const chatMessageTag = 'spright-chat-message';\n"]}

package/dist/esm/chat/message/outbound/index.d.ts

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'spright-chat-message-outbound': ChatMessageOutbound;
+    }
+}
+/**
+ * A Spright component for displaying an outbound chat message
+ */
+export declare class ChatMessageOutbound extends FoundationElement {
+}
+export declare const chatMessageOutboundTag = "spright-chat-message-outbound";

package/dist/esm/chat/message/outbound/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, FoundationElement, } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Spright component for displaying an outbound chat message
+ */
+export class ChatMessageOutbound extends FoundationElement {
+}
+const sprightChatMessageOutbound = ChatMessageOutbound.compose({
+    baseName: 'chat-message-outbound',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
+export const chatMessageOutboundTag = 'spright-chat-message-outbound';
+//# sourceMappingURL=index.js.map

package/dist/esm/chat/message/outbound/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chat/message/outbound/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,iBAAiB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,iBAAiB;CACzD;AAED,MAAM,0BAA0B,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAC3D,QAAQ,EAAE,uBAAuB;IACjC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,0BAA0B,EAAE,CAAC,CAAC;AACxF,MAAM,CAAC,MAAM,sBAAsB,GAAG,+BAA+B,CAAC","sourcesContent":["import {\n    DesignSystem,\n    FoundationElement,\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-message-outbound': ChatMessageOutbound;\n    }\n}\n\n/**\n * A Spright component for displaying an outbound chat message\n */\nexport class ChatMessageOutbound extends FoundationElement {\n}\n\nconst sprightChatMessageOutbound = ChatMessageOutbound.compose({\n    baseName: 'chat-message-outbound',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());\nexport const chatMessageOutboundTag = 'spright-chat-message-outbound';\n"]}

package/dist/esm/chat/message/outbound/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/chat/message/outbound/styles.js

@@ -0,0 +1,37 @@
+import { css } from '@ni/fast-element';
+import { bodyFont, bodyFontColor, borderHoverColor, borderWidth, fillSelectedColor, mediumPadding, standardPadding, } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../../utilities/style/display';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        min-width: ${standardPadding};
+        min-height: ${standardPadding};
+
+        flex-direction: row;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        max-width: calc(90%);
+    }
+
+    .message-content {
+        width: fit-content;
+        height: fit-content;
+        overflow-x: auto;
+    }
+
+    :host .message-content {
+        background: ${fillSelectedColor};
+        border: ${borderWidth} solid ${borderHoverColor};
+        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};
+        padding: ${mediumPadding};
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/chat/message/outbound/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/chat/message/outbound/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,eAAe,GAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;qBAGA,eAAe;sBACd,eAAe;;;;;gBAKrB,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;sBAgBR,iBAAiB;kBACrB,WAAW,UAAU,gBAAgB;yBAC9B,aAAa,IAAI,aAAa,QAAQ,aAAa;mBACzD,aAAa;;CAE/B,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\n\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    fillSelectedColor,\n    mediumPadding,\n    standardPadding,\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        min-width: ${standardPadding};\n        min-height: ${standardPadding};\n\n        flex-direction: row;\n        justify-content: flex-end;\n        flex-shrink: 0;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    .container {\n        display: flex;\n        flex-direction: column;\n        max-width: calc(90%);\n    }\n\n    .message-content {\n        width: fit-content;\n        height: fit-content;\n        overflow-x: auto;\n    }\n\n    :host .message-content {\n        background: ${fillSelectedColor};\n        border: ${borderWidth} solid ${borderHoverColor};\n        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};\n        padding: ${mediumPadding};\n    }\n`;\n"]}

package/dist/esm/chat/message/outbound/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@ni/fast-element';
+import type { FoundationElementTemplate } from '@ni/fast-foundation';
+import type { ChatMessageOutbound } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<ChatMessageOutbound>>;

package/dist/esm/chat/message/outbound/template.js

@@ -0,0 +1,9 @@
+import { html, ViewTemplate } from '@ni/fast-element';
+export const template = () => html `
+    <div class="container">
+        <section class="message-content">
+            <slot></slot>
+        </section>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/chat/message/outbound/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/chat/message/outbound/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAItD,MAAM,CAAC,MAAM,QAAQ,GAEjB,GAAG,EAAE,CAAC,IAAI,CAAqB;;;;;;CAMlC,CAAC","sourcesContent":["import { html, ViewTemplate } from '@ni/fast-element';\nimport type { FoundationElementTemplate } from '@ni/fast-foundation';\nimport type { ChatMessageOutbound } from '.';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<ChatMessageOutbound>\n> = () => html<ChatMessageOutbound>`\n    <div class=\"container\">\n        <section class=\"message-content\">\n            <slot></slot>\n        </section>\n    </div>\n`;\n"]}

package/dist/esm/chat/message/styles.js

@@ -10,8 +10,8 @@ export const styles = css `
     ${display('flex')}
 
     :host {
-        min-width: 16px;
-        min-height: 16px;
+        min-width: ${standardPadding};
+        min-height: ${standardPadding};
 
         flex-direction: row;
         justify-content: center;

package/dist/esm/chat/message/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/message/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;gBASL,QAAQ;iBACP,aAAa;;;2BAGH,eAAe,CAAC,QAAQ;;;;2BAIxB,eAAe,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;2BAoBvB,eAAe,CAAC,QAAQ;sBAC7B,iBAAiB;kBACrB,WAAW,UAAU,gBAAgB;yBAC9B,aAAa,IAAI,aAAa,QAAQ,aAAa;mBACzD,aAAa;;;;;;;2BAOL,eAAe,CAAC,OAAO;;;sBAG5B,eAAe;sBACf,aAAa;;;gCAGH,SAAS;gCACT,eAAe;gCACf,eAAe;gCACf,aAAa;kBAC3B,iBAAiB;;;;;;;2BAOR,eAAe,CAAC,OAAO;;sBAE5B,eAAe;sBACf,YAAY;;CAEjC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { anchorButtonTag } from '@ni/nimble-components/dist/esm/anchor-button';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';\nimport { toggleButtonTag } from '@ni/nimble-components/dist/esm/toggle-button';\n\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlSlimHeight,\n    fillSelectedColor,\n    largePadding,\n    mediumPadding,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\nimport { ChatMessageType } from './types';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        min-width: 16px;\n        min-height: 16px;\n\n        flex-direction: row;\n        justify-content: center;\n        flex-shrink: 0;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    :host([message-type='${ChatMessageType.outbound}']) {\n        justify-content: flex-end;\n    }\n\n    :host([message-type='${ChatMessageType.inbound}']) {\n        justify-content: flex-start;\n    }\n\n    .container {\n        display: flex;\n        flex-direction: column;\n        max-width: calc(90%);\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .message-content {\n        width: fit-content;\n        height: fit-content;\n        overflow-x: auto;\n    }\n\n    :host([message-type='${ChatMessageType.outbound}']) .message-content {\n        background: ${fillSelectedColor};\n        border: ${borderWidth} solid ${borderHoverColor};\n        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};\n        padding: ${mediumPadding};\n    }\n\n    .footer-actions {\n        display: none;\n    }\n\n    :host([message-type='${ChatMessageType.inbound}'])\n        .footer-actions.has-content {\n        display: flex;\n        column-gap: ${standardPadding};\n        margin-top: ${mediumPadding};\n    }\n\n    .footer-actions ::slotted(${buttonTag}),\n    .footer-actions ::slotted(${toggleButtonTag}),\n    .footer-actions ::slotted(${anchorButtonTag}),\n    .footer-actions ::slotted(${menuButtonTag}) {\n        height: ${controlSlimHeight};\n    }\n\n    .end {\n        display: none;\n    }\n\n    :host([message-type='${ChatMessageType.inbound}']) .end {\n        display: flex;\n        column-gap: ${standardPadding};\n        margin-top: ${largePadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/message/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;qBAGA,eAAe;sBACd,eAAe;;;;;gBAKrB,QAAQ;iBACP,aAAa;;;2BAGH,eAAe,CAAC,QAAQ;;;;2BAIxB,eAAe,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;2BAoBvB,eAAe,CAAC,QAAQ;sBAC7B,iBAAiB;kBACrB,WAAW,UAAU,gBAAgB;yBAC9B,aAAa,IAAI,aAAa,QAAQ,aAAa;mBACzD,aAAa;;;;;;;2BAOL,eAAe,CAAC,OAAO;;;sBAG5B,eAAe;sBACf,aAAa;;;gCAGH,SAAS;gCACT,eAAe;gCACf,eAAe;gCACf,aAAa;kBAC3B,iBAAiB;;;;;;;2BAOR,eAAe,CAAC,OAAO;;sBAE5B,eAAe;sBACf,YAAY;;CAEjC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { anchorButtonTag } from '@ni/nimble-components/dist/esm/anchor-button';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';\nimport { toggleButtonTag } from '@ni/nimble-components/dist/esm/toggle-button';\n\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlSlimHeight,\n    fillSelectedColor,\n    largePadding,\n    mediumPadding,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\nimport { ChatMessageType } from './types';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        min-width: ${standardPadding};\n        min-height: ${standardPadding};\n\n        flex-direction: row;\n        justify-content: center;\n        flex-shrink: 0;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    :host([message-type='${ChatMessageType.outbound}']) {\n        justify-content: flex-end;\n    }\n\n    :host([message-type='${ChatMessageType.inbound}']) {\n        justify-content: flex-start;\n    }\n\n    .container {\n        display: flex;\n        flex-direction: column;\n        max-width: calc(90%);\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .message-content {\n        width: fit-content;\n        height: fit-content;\n        overflow-x: auto;\n    }\n\n    :host([message-type='${ChatMessageType.outbound}']) .message-content {\n        background: ${fillSelectedColor};\n        border: ${borderWidth} solid ${borderHoverColor};\n        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};\n        padding: ${mediumPadding};\n    }\n\n    .footer-actions {\n        display: none;\n    }\n\n    :host([message-type='${ChatMessageType.inbound}'])\n        .footer-actions.has-content {\n        display: flex;\n        column-gap: ${standardPadding};\n        margin-top: ${mediumPadding};\n    }\n\n    .footer-actions ::slotted(${buttonTag}),\n    .footer-actions ::slotted(${toggleButtonTag}),\n    .footer-actions ::slotted(${anchorButtonTag}),\n    .footer-actions ::slotted(${menuButtonTag}) {\n        height: ${controlSlimHeight};\n    }\n\n    .end {\n        display: none;\n    }\n\n    :host([message-type='${ChatMessageType.inbound}']) .end {\n        display: flex;\n        column-gap: ${standardPadding};\n        margin-top: ${largePadding};\n    }\n`;\n"]}

package/dist/esm/chat/message/system/index.d.ts

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'spright-chat-message-system': ChatMessageSystem;
+    }
+}
+/**
+ * A Spright component for displaying an system chat message
+ */
+export declare class ChatMessageSystem extends FoundationElement {
+}
+export declare const chatMessageSystemTag = "spright-chat-message-system";

package/dist/esm/chat/message/system/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, FoundationElement, } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Spright component for displaying an system chat message
+ */
+export class ChatMessageSystem extends FoundationElement {
+}
+const sprightChatMessageSystem = ChatMessageSystem.compose({
+    baseName: 'chat-message-system',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
+export const chatMessageSystemTag = 'spright-chat-message-system';
+//# sourceMappingURL=index.js.map

package/dist/esm/chat/message/system/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chat/message/system/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,iBAAiB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,iBAAiB;CACvD;AAED,MAAM,wBAAwB,GAAG,iBAAiB,CAAC,OAAO,CAAC;IACvD,QAAQ,EAAE,qBAAqB;IAC/B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,wBAAwB,EAAE,CAAC,CAAC;AACtF,MAAM,CAAC,MAAM,oBAAoB,GAAG,6BAA6B,CAAC","sourcesContent":["import {\n    DesignSystem,\n    FoundationElement,\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'spright-chat-message-system': ChatMessageSystem;\n    }\n}\n\n/**\n * A Spright component for displaying an system chat message\n */\nexport class ChatMessageSystem extends FoundationElement {\n}\n\nconst sprightChatMessageSystem = ChatMessageSystem.compose({\n    baseName: 'chat-message-system',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());\nexport const chatMessageSystemTag = 'spright-chat-message-system';\n"]}

package/dist/esm/chat/message/system/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/chat/message/system/styles.js

@@ -0,0 +1,30 @@
+import { css } from '@ni/fast-element';
+import { bodyFont, bodyFontColor, standardPadding, } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../../utilities/style/display';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        min-width: ${standardPadding};
+        min-height: ${standardPadding};
+
+        flex-direction: row;
+        justify-content: center;
+        flex-shrink: 0;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        max-width: calc(90%);
+    }
+
+    .message-content {
+        width: fit-content;
+        height: fit-content;
+        overflow-x: auto;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/chat/message/system/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/chat/message/system/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,GAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;qBAGA,eAAe;sBACd,eAAe;;;;;gBAKrB,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;CAc7B,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\n\nimport {\n    bodyFont,\n    bodyFontColor,\n    standardPadding,\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        min-width: ${standardPadding};\n        min-height: ${standardPadding};\n\n        flex-direction: row;\n        justify-content: center;\n        flex-shrink: 0;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    .container {\n        display: flex;\n        flex-direction: column;\n        max-width: calc(90%);\n    }\n\n    .message-content {\n        width: fit-content;\n        height: fit-content;\n        overflow-x: auto;\n    }\n`;\n"]}

package/dist/esm/chat/message/system/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@ni/fast-element';
+import type { FoundationElementTemplate } from '@ni/fast-foundation';
+import type { ChatMessageSystem } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<ChatMessageSystem>>;

package/dist/esm/chat/message/system/template.js

@@ -0,0 +1,9 @@
+import { html, ViewTemplate } from '@ni/fast-element';
+export const template = () => html `
+    <div class="container">
+        <section class="message-content">
+            <slot></slot>
+        </section>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/chat/message/system/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/chat/message/system/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAItD,MAAM,CAAC,MAAM,QAAQ,GAEjB,GAAG,EAAE,CAAC,IAAI,CAAmB;;;;;;CAMhC,CAAC","sourcesContent":["import { html, ViewTemplate } from '@ni/fast-element';\nimport type { FoundationElementTemplate } from '@ni/fast-foundation';\nimport type { ChatMessageSystem } from '.';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<ChatMessageSystem>\n> = () => html<ChatMessageSystem>`\n    <div class=\"container\">\n        <section class=\"message-content\">\n            <slot></slot>\n        </section>\n    </div>\n`;\n"]}

package/dist/esm/chat/message/types.d.ts

@@ -1,6 +1,7 @@
 /**
  * A message type in a chat conversation.
  * @public
+ * @deprecated Use specific message component types instead
  */
 export declare const ChatMessageType: {
     readonly system: undefined;

package/dist/esm/chat/message/types.js

@@ -1,6 +1,7 @@
 /**
  * A message type in a chat conversation.
  * @public
+ * @deprecated Use specific message component types instead
  */
 export const ChatMessageType = {
     system: undefined,

package/dist/esm/chat/message/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/chat/message/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACZ,CAAC","sourcesContent":["/**\n * A message type in a chat conversation.\n * @public\n */\nexport const ChatMessageType = {\n    system: undefined,\n    outbound: 'outbound',\n    inbound: 'inbound'\n} as const;\n\nexport type ChatMessageType = (typeof ChatMessageType)[keyof typeof ChatMessageType];\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/chat/message/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACZ,CAAC","sourcesContent":["/**\n * A message type in a chat conversation.\n * @public\n * @deprecated Use specific message component types instead\n */\nexport const ChatMessageType = {\n    system: undefined,\n    outbound: 'outbound',\n    inbound: 'inbound'\n} as const;\n\nexport type ChatMessageType = (typeof ChatMessageType)[keyof typeof ChatMessageType];\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-components",
-  "version": "6.5.0",
+  "version": "6.6.1",
   "description": "NI Spright Components",
   "scripts": {
     "build": "tsc -p ./tsconfig.json",
@@ -37,7 +37,7 @@
     "@ni/fast-element": "^10.0.0",
     "@ni/fast-foundation": "^10.1.2",
     "@ni/fast-web-utilities": "^10.0.0",
-    "@ni/nimble-components": "^35.1.0",
+    "@ni/nimble-components": "^35.1.1",
     "tslib": "^2.2.0"
   },
   "devDependencies": {