@databricks/design-system 1.12.11 → 1.12.12

package/dist/design-system/utils/css-utils.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CSSObject } from '@emotion/react';
 import type { Theme } from '../../theme';
 import type { TypographyColor, ValidationState } from '../types';
@@ -26,4 +27,12 @@ export declare function getValidationStateColor(theme: Theme, validationState?:
     warningColor?: string;
     successColor?: string;
 }): string | undefined;
+export declare function getDarkModePortalStyles(theme: Theme): React.CSSProperties;
+type GetShadowScrollFunction = (theme: Theme, options?: {
+    backgroundColor?: string;
+    orientation?: 'vertical' | 'horizontal';
+}) => Pick<CSSObject, 'background' | 'backgroundRepeat' | 'backgroundSize' | 'backgroundAttachment'>;
+export declare const getShadowScrollStyles: GetShadowScrollFunction;
+export declare const getBottomOnlyShadowScrollStyles: GetShadowScrollFunction;
+export {};
 //# sourceMappingURL=css-utils.d.ts.map

package/dist/design-system/utils/css-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-utils.d.ts","sourceRoot":"","sources":["../../../src/design-system/utils/css-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEjE;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,CAwBtD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,eAAe,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAMtG;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,KAAK,EACZ,eAAe,CAAC,EAAE,eAAe,EACjC,EACE,UAAU,EACV,YAAY,EACZ,YAAY,GACb,GAAE;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CAClB,GACL,MAAM,GAAG,SAAS,CAYpB"}
+{"version":3,"file":"css-utils.d.ts","sourceRoot":"","sources":["../../../src/design-system/utils/css-utils.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEjE;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,CAwBtD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,eAAe,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAMtG;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,KAAK,EACZ,eAAe,CAAC,EAAE,eAAe,EACjC,EACE,UAAU,EACV,YAAY,EACZ,YAAY,GACb,GAAE;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CAClB,GACL,MAAM,GAAG,SAAS,CAWpB;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,aAAa,CASzE;AAgCD,KAAK,uBAAuB,GAAG,CAC7B,KAAK,EAAE,KAAK,EACZ,OAAO,CAAC,EAAE;IAAE,eAAe,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;CAAE,KAC5E,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,sBAAsB,CAAC,CAAC;AAgDpG,eAAO,MAAM,qBAAqB,EAAE,uBAKnC,CAAC;AAmBF,eAAO,MAAM,+BAA+B,EAAE,uBAK7C,CAAC"}

package/dist/design-system/utils/useStableUid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStableUid.d.ts","sourceRoot":"","sources":["../../../src/design-system/utils/useStableUid.ts"],"names":[],"mappings":"AAIA,wBAAgB,YAAY,WAE3B"}
+{"version":3,"file":"useStableUid.d.ts","sourceRoot":"","sources":["../../../src/design-system/utils/useStableUid.ts"],"names":[],"mappings":"AAqBA,wBAAgB,YAAY,WAE3B"}

package/dist/design-system/utils/useUniqueId.d.ts

@@ -1,2 +1,2 @@
-export declare function useUniqueId(prefix: string): string;
+export declare function useUniqueId(prefix?: string): string;
 //# sourceMappingURL=useUniqueId.d.ts.map

package/dist/design-system/utils/useUniqueId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../../src/design-system/utils/useUniqueId.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,UAEzC"}
+{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../../src/design-system/utils/useUniqueId.ts"],"names":[],"mappings":"AASA,wBAAgB,WAAW,CAAC,MAAM,GAAE,MAAW,UAE9C"}

package/dist/development/Banner/Banner.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+export declare const BANNER_MIN_HEIGHT = 68;
+export declare const BANNER_MAX_HEIGHT = 82;
+type BannerLevel = 'info' | 'error';
+export interface BannerProps {
+    level: BannerLevel;
+    message: ReactNode;
+    description?: ReactNode;
+    ctaText?: ReactNode;
+    onAccept?: () => void;
+    closable?: boolean;
+    onClose?: () => void;
+    'data-testid'?: string;
+    closeButtonAriaLabel?: string;
+}
+export declare const Banner: React.FC<BannerProps>;
+export {};
+//# sourceMappingURL=Banner.d.ts.map

package/dist/development/Banner/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/development/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAQpC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAoHD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqDxC,CAAC"}

package/dist/development/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Banner';
+//# sourceMappingURL=index.d.ts.map

package/dist/development/Banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/development/Banner/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/development/ChatUI/MessageHeader.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 type MessageHeaderProps = {
     userName: React.ReactNode;
+    customHeaderIcon?: React.ReactNode;
     avatarURL?: string;
     leftContent?: React.ReactNode;
     rightContent?: React.ReactNode;
 };
-declare const MessageHeader: ({ userName, avatarURL, leftContent, rightContent }: MessageHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const MessageHeader: ({ userName, customHeaderIcon, avatarURL, leftContent, rightContent }: MessageHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default MessageHeader;
 //# sourceMappingURL=MessageHeader.d.ts.map

package/dist/development/ChatUI/MessageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/development/ChatUI/MessageHeader.tsx"],"names":[],"mappings":";AAKA,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAkCF,QAAA,MAAM,aAAa,uDAAwD,kBAAkB,qDAyB5F,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/development/ChatUI/MessageHeader.tsx"],"names":[],"mappings":";AAKA,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAkCF,QAAA,MAAM,aAAa,yEAA0E,kBAAkB,qDA6B9G,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/development/ChatUI/index.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 export declare const ChatUI: {
     MessageActionButton: (props: import("../..").ButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-    MessageHeader: ({ userName, avatarURL, leftContent, rightContent }: {
+    MessageHeader: ({ userName, customHeaderIcon, avatarURL, leftContent, rightContent }: {
         userName: import("react").ReactNode;
+        customHeaderIcon?: import("react").ReactNode;
         avatarURL?: string | undefined;
         leftContent?: import("react").ReactNode;
         rightContent?: import("react").ReactNode;

package/dist/development/ChatUI/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/development/ChatUI/index.tsx"],"names":[],"mappings":";AASA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASlB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/development/ChatUI/index.tsx"],"names":[],"mappings":";AASA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASlB,CAAC"}

package/dist/development/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ChatUI';
 export * from './Slider';
 export * from './ContextMenu';
+export * from './Banner';
 //# sourceMappingURL=index.d.ts.map

package/dist/development/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/development/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/development/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}

package/dist/development.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import React__default, { useState, useEffect, forwardRef } from 'react';
-import { u as useDesignSystemTheme, e as Input, B as Button, N as CursorIcon, j as Typography, Q as FaceSmileIcon, P as FaceNeutralIcon, O as FaceFrownIcon, C as CloseIcon, f as CheckIcon, o as ChevronLeftIcon, a as ChevronRightIcon, $ as dropdownItemStyles, c as useDesignSystemContext, l as dropdownContentStyles, a0 as dropdownSeparatorStyles } from './DropdownMenu-eb8788e5.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { u as useDesignSystemTheme, f as Input, B as Button, U as CursorIcon, T as Typography, Y as FaceSmileIcon, X as FaceNeutralIcon, V as FaceFrownIcon, C as CloseIcon, h as CheckIcon, q as ChevronLeftIcon, b as ChevronRightIcon, a3 as dropdownItemStyles, c as useDesignSystemContext, n as dropdownContentStyles, a4 as dropdownSeparatorStyles, Z as MegaphoneIcon, l as DangerIcon } from './DropdownMenu-06a1051f.js';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 import * as RadixSlider from '@radix-ui/react-slider';
 import { ContextMenu as ContextMenu$1, ContextMenuTrigger, ContextMenuItemIndicator, ContextMenuGroup, ContextMenuRadioGroup, ContextMenuArrow, ContextMenuSub, ContextMenuSubTrigger, ContextMenuPortal, ContextMenuContent, ContextMenuSubContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator } from '@radix-ui/react-context-menu';
 import 'antd';
@@ -13,11 +13,11 @@ import 'lodash/isBoolean';
 import 'lodash/isNumber';
 import 'lodash/isString';
 import 'lodash/mapValues';
+import 'lodash/memoize';
 import '@emotion/unitless';
 import '@ant-design/icons';
-import 'lodash/uniqueId';
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$6() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$7() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const chatInputStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "ets5eq",
@@ -25,7 +25,7 @@ const chatInputStyles = {
   } : {
     name: "t01lrg-container",
     styles: "background-color:var(--background-primary);padding:var(--spacing-sm);position:relative;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
   },
   suggestionButtons: process.env.NODE_ENV === "production" ? {
     name: "zsd1o9",
@@ -33,7 +33,7 @@ const chatInputStyles = {
   } : {
     name: "3tz5r6-suggestionButtons",
     styles: "display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);label:suggestionButtons;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
   },
   textArea: process.env.NODE_ENV === "production" ? {
     name: "ge1ym1",
@@ -41,7 +41,7 @@ const chatInputStyles = {
   } : {
     name: "hcagyb-textArea",
     styles: "min-width:100%;max-height:150px !important;label:textArea;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
   },
   button: process.env.NODE_ENV === "production" ? {
     name: "1c60og2",
@@ -49,7 +49,7 @@ const chatInputStyles = {
   } : {
     name: "1h7quuz-button",
     styles: "position:absolute;bottom:calc(var(--spacing-sm) + 4px);right:calc(var(--spacing-sm) + 4px);transform:scaleX(-1);label:button;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
   }
 };
 const ChatInput = _ref => {
@@ -67,7 +67,7 @@ const ChatInput = _ref => {
     if (!value) {
       return;
     }
-    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(value);
+    onSubmit === null || onSubmit === void 0 || onSubmit(value);
     setValue('');
   };
   return jsxs("div", {
@@ -104,7 +104,7 @@ const ChatInput = _ref => {
 };
 var ChatInput$1 = ChatInput;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$5() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$6() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const snippetStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "emyse7",
@@ -112,7 +112,7 @@ const snippetStyles = {
   } : {
     name: "15luuk2-container",
     styles: "margin:var(--spacing-md) 0;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   },
   header: process.env.NODE_ENV === "production" ? {
     name: "dtwnbh",
@@ -120,7 +120,7 @@ const snippetStyles = {
   } : {
     name: "1o07vd-header",
     styles: "background-color:var(--color-grey700);color:var(--color-grey300);border-radius:var(--border-radius) var(--border-radius) 0 0;padding:var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);display:flex;justify-content:space-between;align-items:center;label:header;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   },
   buttonSvg: process.env.NODE_ENV === "production" ? {
     name: "s8x62f",
@@ -128,7 +128,7 @@ const snippetStyles = {
   } : {
     name: "g0ytlm-buttonSvg",
     styles: "svg{color:var(--color-grey300);};label:buttonSvg;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   },
   code: process.env.NODE_ENV === "production" ? {
     name: "u1l3ou",
@@ -136,7 +136,7 @@ const snippetStyles = {
   } : {
     name: "gdk9wh-code",
     styles: "padding:var(--spacing-sm) var(--spacing-md);margin:0;border-radius:0 0 var(--border-radius) var(--border-radius);background-color:var(--color-grey800);color:var(--color-grey300);label:code;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   }
 };
 const CodeSnippet = _ref => {
@@ -174,7 +174,7 @@ const CodeSnippet = _ref => {
 };
 var CodeSnippet$1 = CodeSnippet;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$5() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const feedbackStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "1laz9o6",
@@ -182,7 +182,7 @@ const feedbackStyles = {
   } : {
     name: "1dbf7uj-container",
     styles: "display:flex;justify-content:space-between;align-items:flex-end;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   },
   feedbackPrompt: process.env.NODE_ENV === "production" ? {
     name: "1hsyf68",
@@ -190,7 +190,7 @@ const feedbackStyles = {
   } : {
     name: "1yi757f-feedbackPrompt",
     styles: "display:flex;flex-direction:column;gap:var(--spacing-sm);label:feedbackPrompt;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   },
   feedbackOptions: process.env.NODE_ENV === "production" ? {
     name: "1s3radb",
@@ -198,7 +198,7 @@ const feedbackStyles = {
   } : {
     name: "125q18r-feedbackOptions",
     styles: "display:flex;gap:var(--spacing-sm);label:feedbackOptions;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   }
 };
 const Feedback = _ref => {
@@ -292,7 +292,7 @@ const Message = _ref => {
 };
 var Message$1 = Message;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$3() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const buttonStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "f9548c",
@@ -300,7 +300,7 @@ const buttonStyles = {
   } : {
     name: "12rixe4-container",
     styles: "position:relative;display:inline-block;width:max-content;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
   },
   checkIcon: process.env.NODE_ENV === "production" ? {
     name: "441ysl",
@@ -308,7 +308,7 @@ const buttonStyles = {
   } : {
     name: "hmgfz4-checkIcon",
     styles: "position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;svg{color:var(--checkmark-color);};label:checkIcon;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
   }
 };
 const MessageActionButton = props => {
@@ -319,7 +319,7 @@ const MessageActionButton = props => {
   const handleClick = e => {
     var _props$onClick;
     setShowCheck(true);
-    (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, e);
+    (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, e);
   };
   if (props.children) {
     throw new Error('MessageActionButton: Children not supported; use as icon-only button.');
@@ -380,7 +380,7 @@ const MessageBody = _ref => {
 };
 var MessageBody$1 = MessageBody;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$3() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const headerStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "30lgt6",
@@ -388,7 +388,7 @@ const headerStyles = {
   } : {
     name: "10tss9b-container",
     styles: "display:flex;justify-content:space-between;align-items:center;position:relative;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
   },
   leftContent: process.env.NODE_ENV === "production" ? {
     name: "sz7nmf",
@@ -396,7 +396,7 @@ const headerStyles = {
   } : {
     name: "11wiry4-leftContent",
     styles: "display:flex;align-items:center;gap:var(--spacing-sm);label:leftContent;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
   },
   rightContent: process.env.NODE_ENV === "production" ? {
     name: "s5xdrg",
@@ -404,7 +404,7 @@ const headerStyles = {
   } : {
     name: "6oh64j-rightContent",
     styles: "display:flex;align-items:center;label:rightContent;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
   },
   avatar: /*#__PURE__*/css({
     position: 'absolute',
@@ -421,6 +421,7 @@ const avatarDefaultBackgroundImage = 'linear-gradient(180deg, #FFD983 0%, #FFB80
 const MessageHeader = _ref => {
   let {
     userName,
+    customHeaderIcon,
     avatarURL,
     leftContent,
     rightContent
@@ -436,7 +437,7 @@ const MessageHeader = _ref => {
     },
     children: [jsxs("div", {
       css: headerStyles.leftContent,
-      children: [jsx("div", {
+      children: [customHeaderIcon ? customHeaderIcon : jsx("div", {
         css: headerStyles.avatar,
         style: {
           backgroundImage: avatarURL ? `url(${avatarURL}), ${avatarDefaultBackgroundImage}` : avatarDefaultBackgroundImage
@@ -453,7 +454,7 @@ const MessageHeader = _ref => {
 };
 var MessageHeader$1 = MessageHeader;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const paginationStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "1lyitb8",
@@ -461,7 +462,7 @@ const paginationStyles = {
   } : {
     name: "tx606a-container",
     styles: "display:flex;align-items:center;justify-items:center;gap:var(--spacing-sm);label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
   },
   button: process.env.NODE_ENV === "production" ? {
     name: "waw0s4",
@@ -469,7 +470,7 @@ const paginationStyles = {
   } : {
     name: "18u25xw-button",
     styles: "border:none;background-color:transparent;padding:0;display:flex;height:var(--spacing-md);align-items:center;label:button;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
   }
 };
 const MessagePagination = _ref => {
@@ -525,17 +526,17 @@ const ChatUI = {
   ChatInput: ChatInput$1
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var _ref = process.env.NODE_ENV === "production" ? {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref$1 = process.env.NODE_ENV === "production" ? {
   name: "1tciq3q",
   styles: "position:relative;display:flex;align-items:center;&[data-orientation=\"vertical\"]{flex-direction:column;width:20px;height:100px;}&[data-orientation=\"horizontal\"]{height:20px;width:200px;}"
 } : {
   name: "18im58f-getRootStyles",
   styles: "position:relative;display:flex;align-items:center;&[data-orientation=\"vertical\"]{flex-direction:column;width:20px;height:100px;}&[data-orientation=\"horizontal\"]{height:20px;width:200px;};label:getRootStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
 };
 const getRootStyles = () => {
-  return _ref;
+  return _ref$1;
 };
 const Root$1 = /*#__PURE__*/forwardRef((props, ref) => {
   return jsx(RadixSlider.Root, {
@@ -815,5 +816,128 @@ const ContextMenu = {
   Hint
 };
 
-export { Arrow, ChatUI, CheckboxItem, Content, ContextMenu, Group, Hint, Item, ItemIndicator, Label, RadioGroup, RadioItem, Root, Separator, Slider, Sub, SubContent, SubTrigger, Trigger, itemIndicatorStyles };
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const {
+  Text,
+  Paragraph
+} = Typography;
+const BANNER_MIN_HEIGHT = 68;
+// Max height will allow 2 lines of description (3 lines total)
+const BANNER_MAX_HEIGHT = 82;
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1te1whx",
+  styles: "margin-left:auto;display:flex;align-items:center"
+} : {
+  name: "13c4h59-rightContainer",
+  styles: "margin-left:auto;display:flex;align-items:center;label:rightContainer;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const useStyles = (props, theme) => {
+  const bannerLevelToBannerColors = {
+    info: {
+      backgroundDefaultColor: theme.colors.actionPrimaryBackgroundDefault,
+      backgroundHoverColor: theme.colors.actionPrimaryBackgroundHover,
+      backgroundPressColor: theme.colors.actionPrimaryBackgroundPress,
+      textColor: theme.colors.actionPrimaryTextDefault
+    },
+    error: {
+      backgroundDefaultColor: theme.colors.actionDangerPrimaryBackgroundDefault,
+      backgroundHoverColor: theme.colors.actionDangerPrimaryBackgroundHover,
+      backgroundPressColor: theme.colors.actionDangerPrimaryBackgroundPress,
+      textColor: theme.colors.actionPrimaryTextDefault
+    }
+  };
+  const colorScheme = bannerLevelToBannerColors[props.level];
+  return {
+    banner: /*#__PURE__*/css("max-height:", BANNER_MAX_HEIGHT, "px;min-height:", BANNER_MIN_HEIGHT, "px;display:flex;align-items:center;width:100%;padding:12px;box-sizing:border-box;background-color:", colorScheme.backgroundDefaultColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:banner;")),
+    iconContainer: /*#__PURE__*/css("display:flex;color:", colorScheme.textColor, ";padding:2px ", theme.spacing.sm, "px;align-self:", props.description ? 'flex-start' : 'center', ";box-sizing:border-box;max-width:60px;" + (process.env.NODE_ENV === "production" ? "" : ";label:iconContainer;")),
+    mainContent: /*#__PURE__*/css("flex-direction:column;align-self:", props.description ? 'flex-start' : 'center', ";display:flex;box-sizing:border-box;padding-right:", theme.spacing.sm, "px;min-width:", theme.spacing.lg, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:mainContent;")),
+    messageTextBlock: /*#__PURE__*/css("&&{color:", colorScheme.textColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:messageTextBlock;")),
+    descriptionBlock: /*#__PURE__*/css("&&{color:", colorScheme.textColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:descriptionBlock;")),
+    rightContainer: _ref,
+    closeIconContainer: /*#__PURE__*/css("display:flex;padding:", theme.spacing.sm, "px ", theme.spacing.sm, "px ", theme.spacing.sm, "px ", theme.spacing.md, "px;box-sizing:border-box;" + (process.env.NODE_ENV === "production" ? "" : ";label:closeIconContainer;")),
+    closeIcon: /*#__PURE__*/css("color:", colorScheme.textColor, "!important;cursor:pointer;" + (process.env.NODE_ENV === "production" ? "" : ";label:closeIcon;")),
+    // Override design system colors to show the use the action text color for text and border.
+    // Also overrides text for links.
+    actionButton: /*#__PURE__*/css("color:", colorScheme.textColor, "!important;border-color:", colorScheme.textColor, "!important;&:focus,&:hover{border-color:", theme.colors.actionPrimaryTextHover, "!important;color:", theme.colors.actionPrimaryTextHover, "!important;background-color:", colorScheme.backgroundHoverColor, "!important;}&:active{border-color:", theme.colors.actionPrimaryTextPress, "!important;color:", theme.colors.actionPrimaryTextPress, "!important;background-color:", theme.colors.actionPrimaryBackgroundPress, "!important;}a{color:", theme.colors.actionPrimaryTextDefault, ";}a:focus,a:hover{color:", theme.colors.actionPrimaryTextHover, ";text-decoration:none;}a:active{color:", theme.colors.actionPrimaryTextPress, " text-decoration:none;}" + (process.env.NODE_ENV === "production" ? "" : ";label:actionButton;"))
+  };
+};
+const levelToIconMap = {
+  info: jsx(MegaphoneIcon, {
+    "data-testid": "level-info-icon"
+  }),
+  error: jsx(DangerIcon, {
+    "data-testid": "level-error-icon"
+  })
+};
+const Banner = props => {
+  const {
+    level,
+    message,
+    description,
+    ctaText,
+    onAccept,
+    closable,
+    onClose,
+    closeButtonAriaLabel
+  } = props;
+  const [closed, setClosed] = React__default.useState(false);
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const styles = useStyles(props, theme);
+  const actionButton = onAccept && ctaText ? jsx(Button, {
+    onClick: onAccept,
+    css: styles.actionButton,
+    children: ctaText
+  }) : null;
+  const close = closable !== false ? jsx("div", {
+    css: styles.closeIconContainer,
+    children: jsx("a", {
+      onClick: () => {
+        if (onClose) {
+          onClose();
+        }
+        setClosed(true);
+      },
+      "aria-label": closeButtonAriaLabel !== null && closeButtonAriaLabel !== void 0 ? closeButtonAriaLabel : 'Close',
+      "data-testid": "banner-dismiss",
+      children: jsx(CloseIcon, {
+        css: styles.closeIcon
+      })
+    })
+  }) : null;
+  return jsx(Fragment, {
+    children: !closed && jsxs("div", {
+      css: styles.banner,
+      className: "banner",
+      "data-testid": props['data-testid'],
+      children: [jsx("div", {
+        css: styles.iconContainer,
+        children: levelToIconMap[level]
+      }), jsxs("div", {
+        css: styles.mainContent,
+        children: [jsx(Text, {
+          size: "md",
+          ellipsis: true,
+          bold: true,
+          css: styles.messageTextBlock,
+          children: message
+        }), description && jsx(Paragraph, {
+          ellipsis: {
+            rows: 2
+          },
+          withoutMargins: true,
+          css: styles.descriptionBlock,
+          children: description
+        })]
+      }), jsxs("div", {
+        css: styles.rightContainer,
+        children: [actionButton, close]
+      })]
+    })
+  });
+};
+
+export { Arrow, BANNER_MAX_HEIGHT, BANNER_MIN_HEIGHT, Banner, ChatUI, CheckboxItem, Content, ContextMenu, Group, Hint, Item, ItemIndicator, Label, RadioGroup, RadioItem, Root, Separator, Slider, Sub, SubContent, SubTrigger, Trigger, itemIndicatorStyles };
 //# sourceMappingURL=development.js.map