@databricks/design-system 1.12.12 → 1.12.14

package/dist/development.js

@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
-import React__default, { useState, useEffect, forwardRef } from 'react';
-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 React__default, { useRef, useEffect, useState, forwardRef } from 'react';
+import { Z as MegaphoneIcon, W as WarningIcon, k as DangerIcon, u as useDesignSystemTheme, G as useDesignSystemEventComponentCallbacks, E as DesignSystemEventProviderComponentTypes, F as DesignSystemEventProviderAnalyticsEventTypes, B as Button$1, C as CloseIcon, T as Typography, a4 as primitiveColors, f as Input, U as CursorIcon, Y as FaceSmileIcon, X as FaceNeutralIcon, V as FaceFrownIcon, e as CheckIcon, o as ChevronLeftIcon, b as ChevronRightIcon } from './Stepper-839336b1.js';
+export { y as Stepper } from './Stepper-839336b1.js';
+import { jsx, Fragment, jsxs } 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 * as RadixToolbar from '@radix-ui/react-toolbar';
 import 'antd';
-import '@radix-ui/react-dropdown-menu';
-import 'chroma-js';
+import '@ant-design/icons';
 import 'lodash/isNil';
 import 'lodash/endsWith';
 import 'lodash/isBoolean';
@@ -15,9 +15,233 @@ import 'lodash/isString';
 import 'lodash/mapValues';
 import 'lodash/memoize';
 import '@emotion/unitless';
-import '@ant-design/icons';
+
+// Define a module-global observer and a WeakMap on elements to hold callbacks
+let sharedObserver = null;
+const entryCallbackMap = new WeakMap();
+const ensureSharedObserverExists = () => {
+  if (!sharedObserver) {
+    sharedObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const entryCallback = entryCallbackMap.get(entry.target);
+          if (entryCallback) {
+            entryCallback();
+            entryCallbackMap.delete(entry.target);
+          }
+        }
+      });
+    });
+  }
+};
+function observeElement(element, callback) {
+  var _sharedObserver;
+  ensureSharedObserverExists();
+  entryCallbackMap.set(element, callback);
+  (_sharedObserver = sharedObserver) === null || _sharedObserver === void 0 || _sharedObserver.observe(element);
+  return () => {
+    if (element) {
+      var _sharedObserver2;
+      (_sharedObserver2 = sharedObserver) === null || _sharedObserver2 === void 0 || _sharedObserver2.unobserve(element);
+      entryCallbackMap.delete(element);
+    }
+  };
+}
+/**
+ * Checks if the element was viewed and calls the onView callback.
+ * NOTE: This hook only triggers the onView callback once for the element.
+ * @param onView - callback to be called when the element is viewed
+ * @typeParam T - extends Element to specify the type of element being observed
+ */
+const useNotifyOnFirstView = _ref => {
+  let {
+    onView
+  } = _ref;
+  const isViewedRef = useRef(false);
+  const elementRef = useRef(null);
+  useEffect(() => {
+    const element = elementRef.current;
+    // If already viewed or element is not available, do nothing
+    if (!element || isViewedRef.current) {
+      return;
+    }
+    const callback = () => {
+      isViewedRef.current = true;
+      onView();
+    };
+
+    // If IntersectionObserver is not available, assume that the element is visible
+    if (!window.IntersectionObserver) {
+      callback();
+      return;
+    }
+    return observeElement(element, callback);
+  }, [onView]);
+  return {
+    elementRef
+  };
+};
 
 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 {
+  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$1 = 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__$7
+};
+const useStyles = (props, theme) => {
+  const bannerLevelToBannerColors = {
+    info: {
+      backgroundDefaultColor: theme.colors.actionPrimaryBackgroundDefault,
+      actionButtonBackgroundHoverColor: theme.colors.actionPrimaryBackgroundHover,
+      actionButtonBackgroundPressColor: theme.colors.actionPrimaryBackgroundPress,
+      textColor: theme.colors.actionPrimaryTextDefault,
+      textHoverColor: theme.colors.actionPrimaryTextHover,
+      textPressColor: theme.colors.actionPrimaryTextPress
+    },
+    // TODO (PLAT-80558, zack.brody) Update hover and press states once we have colors for these
+    warning: {
+      backgroundDefaultColor: theme.colors.tagLemon,
+      actionButtonBackgroundHoverColor: theme.colors.tagLemon,
+      actionButtonBackgroundPressColor: theme.colors.tagLemon,
+      textColor: primitiveColors.grey800,
+      textHoverColor: primitiveColors.grey800,
+      textPressColor: primitiveColors.grey800
+    },
+    error: {
+      backgroundDefaultColor: theme.colors.actionDangerPrimaryBackgroundDefault,
+      actionButtonBackgroundHoverColor: theme.colors.actionDangerPrimaryBackgroundHover,
+      actionButtonBackgroundPressColor: theme.colors.actionDangerPrimaryBackgroundPress,
+      textColor: theme.colors.actionPrimaryTextDefault,
+      textHoverColor: theme.colors.actionPrimaryTextHover,
+      textPressColor: theme.colors.actionPrimaryTextPress
+    }
+  };
+  const colorScheme = bannerLevelToBannerColors[props.level];
+  return {
+    banner: /*#__PURE__*/css("max-height:", BANNER_MAX_HEIGHT, "px;display:flex;align-items:center;width:100%;padding:8px;box-sizing:border-box;background-color:", colorScheme.backgroundDefaultColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:banner;")),
+    iconContainer: /*#__PURE__*/css("display:flex;color:", colorScheme.textColor, ";align-self:", props.description ? 'flex-start' : 'center', ";box-sizing:border-box;max-width:60px;padding-top:4px;padding-bottom:4px;padding-right:", theme.spacing.xs, "px;" + (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;padding-top:2px;padding-bottom:2px;min-width:", theme.spacing.lg, "px;width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:mainContent;")),
+    messageTextBlock: /*#__PURE__*/css("display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;&&{color:", colorScheme.textColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:messageTextBlock;")),
+    descriptionBlock: /*#__PURE__*/css("display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;&&{color:", colorScheme.textColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:descriptionBlock;")),
+    rightContainer: _ref$1,
+    closeIconContainer: /*#__PURE__*/css("display:flex;margin-left:", theme.spacing.xs, "px;box-sizing:border-box;line-height:0;" + (process.env.NODE_ENV === "production" ? "" : ";label:closeIconContainer;")),
+    closeButton: /*#__PURE__*/css("cursor:pointer;background:none;border:none;margin:0;&&{height:24px!important;width:24px!important;padding:", theme.spacing.xs, "px!important;}&&:hover{background-color:transparent!important;}" + (process.env.NODE_ENV === "production" ? "" : ";label:closeButton;")),
+    closeIcon: /*#__PURE__*/css("color:", colorScheme.textColor, "!important;" + (process.env.NODE_ENV === "production" ? "" : ";label:closeIcon;")),
+    actionButtonContainer: /*#__PURE__*/css("margin-right:", theme.spacing.xs, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:actionButtonContainer;")),
+    // 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:", colorScheme.textHoverColor, "!important;color:", colorScheme.textHoverColor, "!important;background-color:", colorScheme.actionButtonBackgroundHoverColor, "!important;}&:active{border-color:", colorScheme.textPressColor, "!important;color:", colorScheme.textPressColor, "!important;background-color:", colorScheme.actionButtonBackgroundPressColor, "!important;}a{color:", theme.colors.actionPrimaryTextDefault, ";}a:focus,a:hover{color:", colorScheme.textHoverColor, ";text-decoration:none;}a:active{color:", colorScheme.textPressColor, " text-decoration:none;}" + (process.env.NODE_ENV === "production" ? "" : ";label:actionButton;"))
+  };
+};
+const levelToIconMap = {
+  info: jsx(MegaphoneIcon, {
+    "data-testid": "level-info-icon"
+  }),
+  warning: jsx(WarningIcon, {
+    "data-testid": "level-warning-icon"
+  }),
+  error: jsx(DangerIcon, {
+    "data-testid": "level-error-icon"
+  })
+};
+const Banner = props => {
+  const {
+    level,
+    message,
+    description,
+    ctaText,
+    onAccept,
+    closable,
+    onClose,
+    closeButtonAriaLabel,
+    componentId,
+    analyticsEvents
+  } = props;
+  const [closed, setClosed] = React__default.useState(false);
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const styles = useStyles(props, theme);
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.Banner,
+    componentId,
+    analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnView]
+  });
+  const {
+    elementRef
+  } = useNotifyOnFirstView({
+    onView: eventContext.onView
+  });
+  const actionButton = onAccept && ctaText ? jsx("div", {
+    css: styles.actionButtonContainer,
+    children: jsx(Button$1, {
+      componentId: `${componentId}.accept`,
+      onClick: onAccept,
+      css: styles.actionButton,
+      size: "small",
+      children: ctaText
+    })
+  }) : null;
+  const close = closable !== false ? jsx("div", {
+    css: styles.closeIconContainer,
+    children: jsx(Button$1, {
+      componentId: `${componentId}.close`,
+      css: styles.closeButton,
+      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", {
+      ref: elementRef,
+      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",
+          bold: true,
+          css: styles.messageTextBlock,
+          title: message,
+          children: message
+        }), description && jsx(Paragraph, {
+          withoutMargins: true,
+          css: styles.descriptionBlock,
+          title: description,
+          children: description
+        })]
+      }), jsxs("div", {
+        css: styles.rightContainer,
+        children: [actionButton, close]
+      })]
+    })
+  });
+};
+
+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 chatInputStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "ets5eq",
@@ -25,7 +249,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__$7
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   },
   suggestionButtons: process.env.NODE_ENV === "production" ? {
     name: "zsd1o9",
@@ -33,7 +257,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__$7
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   },
   textArea: process.env.NODE_ENV === "production" ? {
     name: "ge1ym1",
@@ -41,7 +265,7 @@ const chatInputStyles = {
   } : {
     name: "hcagyb-textArea",
     styles: "min-width:100%;max-height:150px !important;label:textArea;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   },
   button: process.env.NODE_ENV === "production" ? {
     name: "1c60og2",
@@ -49,7 +273,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__$7
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   }
 };
 const ChatInput = _ref => {
@@ -94,7 +318,8 @@ const ChatInput = _ref => {
         }
       },
       ...textAreaProps
-    }), jsx(Button, {
+    }), jsx(Button$1, {
+      componentId: "codegen_design-system_src_development_chatui_chatinput.tsx_83",
       size: "small",
       css: chatInputStyles.button,
       icon: jsx(CursorIcon, {}),
@@ -104,7 +329,7 @@ const ChatInput = _ref => {
 };
 var ChatInput$1 = ChatInput;
 
-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__$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 snippetStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "emyse7",
@@ -112,7 +337,7 @@ const snippetStyles = {
   } : {
     name: "15luuk2-container",
     styles: "margin:var(--spacing-md) 0;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   },
   header: process.env.NODE_ENV === "production" ? {
     name: "dtwnbh",
@@ -120,7 +345,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__$6
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   },
   buttonSvg: process.env.NODE_ENV === "production" ? {
     name: "s8x62f",
@@ -128,7 +353,7 @@ const snippetStyles = {
   } : {
     name: "g0ytlm-buttonSvg",
     styles: "svg{color:var(--color-grey300);};label:buttonSvg;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   },
   code: process.env.NODE_ENV === "production" ? {
     name: "u1l3ou",
@@ -136,7 +361,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__$6
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   }
 };
 const CodeSnippet = _ref => {
@@ -174,7 +399,7 @@ const CodeSnippet = _ref => {
 };
 var CodeSnippet$1 = CodeSnippet;
 
-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__$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 feedbackStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "1laz9o6",
@@ -182,7 +407,7 @@ const feedbackStyles = {
   } : {
     name: "1dbf7uj-container",
     styles: "display:flex;justify-content:space-between;align-items:flex-end;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
   },
   feedbackPrompt: process.env.NODE_ENV === "production" ? {
     name: "1hsyf68",
@@ -190,7 +415,7 @@ const feedbackStyles = {
   } : {
     name: "1yi757f-feedbackPrompt",
     styles: "display:flex;flex-direction:column;gap:var(--spacing-sm);label:feedbackPrompt;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
   },
   feedbackOptions: process.env.NODE_ENV === "production" ? {
     name: "1s3radb",
@@ -198,7 +423,7 @@ const feedbackStyles = {
   } : {
     name: "125q18r-feedbackOptions",
     styles: "display:flex;gap:var(--spacing-sm);label:feedbackOptions;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
   }
 };
 const Feedback = _ref => {
@@ -227,21 +452,24 @@ const Feedback = _ref => {
         children: "Was this response:"
       }), jsxs("div", {
         css: feedbackStyles.feedbackOptions,
-        children: [jsx(Button, {
+        children: [jsx(Button$1, {
+          componentId: "codegen_design-system_src_development_chatui_feedback.tsx_57",
           icon: jsx(FaceSmileIcon, {}),
           onClick: () => {
             onFeedback('Better');
             setIsVisible(false);
           },
           children: "Better"
-        }), jsx(Button, {
+        }), jsx(Button$1, {
+          componentId: "codegen_design-system_src_development_chatui_feedback.tsx_66",
           icon: jsx(FaceNeutralIcon, {}),
           onClick: () => {
             onFeedback('Same');
             setIsVisible(false);
           },
           children: "Same"
-        }), jsx(Button, {
+        }), jsx(Button$1, {
+          componentId: "codegen_design-system_src_development_chatui_feedback.tsx_75",
           icon: jsx(FaceFrownIcon, {}),
           onClick: () => {
             onFeedback('Worse');
@@ -250,7 +478,8 @@ const Feedback = _ref => {
           children: "Worse"
         })]
       })]
-    }), jsx(Button, {
+    }), jsx(Button$1, {
+      componentId: "codegen_design-system_src_development_chatui_feedback.tsx_86",
       icon: jsx(CloseIcon, {}),
       onClick: () => setIsVisible(false)
     })]
@@ -292,7 +521,7 @@ const Message = _ref => {
 };
 var Message$1 = Message;
 
-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__$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 buttonStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "f9548c",
@@ -300,7 +529,7 @@ const buttonStyles = {
   } : {
     name: "12rixe4-container",
     styles: "position:relative;display:inline-block;width:max-content;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
   },
   checkIcon: process.env.NODE_ENV === "production" ? {
     name: "441ysl",
@@ -308,7 +537,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__$4
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
   }
 };
 const MessageActionButton = props => {
@@ -340,7 +569,7 @@ const MessageActionButton = props => {
     style: {
       ['--checkmark-color']: theme.colors.green500
     },
-    children: [jsx(Button, {
+    children: [jsx(Button$1, {
       size: "small",
       ...props,
       onClick: handleClick,
@@ -380,7 +609,7 @@ const MessageBody = _ref => {
 };
 var MessageBody$1 = MessageBody;
 
-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__$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 headerStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "30lgt6",
@@ -388,7 +617,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__$3
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
   },
   leftContent: process.env.NODE_ENV === "production" ? {
     name: "sz7nmf",
@@ -396,7 +625,7 @@ const headerStyles = {
   } : {
     name: "11wiry4-leftContent",
     styles: "display:flex;align-items:center;gap:var(--spacing-sm);label:leftContent;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
   },
   rightContent: process.env.NODE_ENV === "production" ? {
     name: "s5xdrg",
@@ -404,7 +633,7 @@ const headerStyles = {
   } : {
     name: "6oh64j-rightContent",
     styles: "display:flex;align-items:center;label:rightContent;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
   },
   avatar: /*#__PURE__*/css({
     position: 'absolute',
@@ -454,7 +683,7 @@ const MessageHeader = _ref => {
 };
 var MessageHeader$1 = MessageHeader;
 
-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__$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)."; }
 const paginationStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "1lyitb8",
@@ -462,7 +691,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__$2
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
   },
   button: process.env.NODE_ENV === "production" ? {
     name: "waw0s4",
@@ -470,7 +699,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__$2
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
   }
 };
 const MessagePagination = _ref => {
@@ -526,21 +755,21 @@ const ChatUI = {
   ChatInput: ChatInput$1
 };
 
-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" ? {
+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" ? {
   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__$1
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-const getRootStyles = () => {
-  return _ref$1;
+const getRootStyles$1 = () => {
+  return _ref;
 };
 const Root$1 = /*#__PURE__*/forwardRef((props, ref) => {
   return jsx(RadixSlider.Root, {
-    css: getRootStyles(),
+    css: getRootStyles$1(),
     ...props,
     ref: ref
   });
@@ -630,314 +859,98 @@ var Slider = /*#__PURE__*/Object.freeze({
   Track: Track
 });
 
-const Root = ContextMenu$1;
-const Trigger = ContextMenuTrigger;
-const ItemIndicator = ContextMenuItemIndicator;
-const Group = ContextMenuGroup;
-const RadioGroup = ContextMenuRadioGroup;
-const Arrow = ContextMenuArrow;
-const Sub = ContextMenuSub;
-const SubTrigger = _ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(ContextMenuSubTrigger, {
-    ...props,
-    css: dropdownItemStyles(theme),
-    children: children
-  });
-};
-const Content = _ref2 => {
-  let {
-    children,
-    minWidth,
-    ...childrenProps
-  } = _ref2;
-  const {
-    getPopupContainer
-  } = useDesignSystemContext();
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(ContextMenuPortal, {
-    container: getPopupContainer && getPopupContainer(),
-    children: jsx(ContextMenuContent, {
-      ...childrenProps,
-      css: [dropdownContentStyles(theme), {
-        minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
-      children: children
-    })
-  });
-};
-const SubContent = _ref3 => {
-  let {
-    children,
-    minWidth,
-    ...childrenProps
-  } = _ref3;
-  const {
-    getPopupContainer
-  } = useDesignSystemContext();
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(ContextMenuPortal, {
-    container: getPopupContainer && getPopupContainer(),
-    children: jsx(ContextMenuSubContent, {
-      ...childrenProps,
-      css: [dropdownContentStyles(theme), {
-        minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:SubContent;"],
-      children: children
-    })
-  });
+const getRootStyles = theme => {
+  return /*#__PURE__*/css({
+    alignItems: 'center',
+    backgroundColor: theme.colors.backgroundSecondary,
+    border: `1px solid ${theme.colors.borderDecorative}`,
+    borderRadius: theme.borders.borderRadiusMd,
+    boxShadow: theme.general.shadowLow,
+    display: 'flex',
+    gap: theme.spacing.md,
+    width: 'max-content',
+    padding: theme.spacing.sm
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getRootStyles;");
 };
-const Item = _ref4 => {
-  let {
-    children,
-    ...props
-  } = _ref4;
+const Root = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(ContextMenuItem, {
+  return jsx(RadixToolbar.Root, {
+    css: getRootStyles(theme),
     ...props,
-    css: dropdownItemStyles(theme),
-    children: children
+    ref: ref
   });
-};
-const CheckboxItem = _ref5 => {
-  let {
-    children,
-    ...props
-  } = _ref5;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsxs(ContextMenuCheckboxItem, {
+});
+const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx(RadixToolbar.Button, {
     ...props,
-    css: dropdownItemStyles(theme),
-    children: [jsx(ContextMenuItemIndicator, {
-      css: itemIndicatorStyles(theme),
-      children: jsx(CheckIcon, {})
-    }), !props.checked && jsx("div", {
-      style: {
-        width: theme.general.iconFontSize + theme.spacing.xs
-      }
-    }), children]
+    ref: ref
   });
+});
+const getSeparatorStyles = theme => {
+  return /*#__PURE__*/css({
+    alignSelf: 'stretch',
+    backgroundColor: theme.colors.borderDecorative,
+    width: 1
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getSeparatorStyles;");
 };
-const RadioItem = _ref6 => {
-  let {
-    children,
-    ...props
-  } = _ref6;
+const Separator = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
-  return jsxs(ContextMenuRadioItem, {
+  return jsx(RadixToolbar.Separator, {
+    css: getSeparatorStyles(theme),
     ...props,
-    css: [dropdownItemStyles(theme), {
-      '&[data-state="unchecked"]': {
-        paddingLeft: theme.general.iconFontSize + theme.spacing.xs + theme.spacing.sm
-      }
-    }, process.env.NODE_ENV === "production" ? "" : ";label:RadioItem;"],
-    children: [jsx(ContextMenuItemIndicator, {
-      css: itemIndicatorStyles(theme),
-      children: jsx(CheckIcon, {})
-    }), children]
+    ref: ref
   });
-};
-const Label = _ref7 => {
-  let {
-    children,
-    ...props
-  } = _ref7;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(ContextMenuLabel, {
+});
+const Link = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx(RadixToolbar.Link, {
     ...props,
-    css: /*#__PURE__*/css({
-      color: theme.colors.textSecondary,
-      padding: `${theme.spacing.sm - 2}px ${theme.spacing.sm}px`
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Label;"),
-    children: children
-  });
-};
-const Hint = _ref8 => {
-  let {
-    children
-  } = _ref8;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx("span", {
-    css: /*#__PURE__*/css({
-      display: 'inline-flex',
-      marginLeft: 'auto',
-      paddingLeft: theme.spacing.sm
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Hint;"),
-    children: children
+    ref: ref
   });
-};
-const Separator = () => {
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(ContextMenuSeparator, {
-    css: dropdownSeparatorStyles(theme)
+});
+const ToggleGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx(RadixToolbar.ToggleGroup, {
+    ...props,
+    ref: ref
   });
-};
-const itemIndicatorStyles = theme => /*#__PURE__*/css({
-  display: 'inline-flex',
-  paddingRight: theme.spacing.xs
-}, process.env.NODE_ENV === "production" ? "" : ";label:itemIndicatorStyles;");
-const ContextMenu = {
-  Root,
-  Trigger,
-  Label,
-  Item,
-  Group,
-  RadioGroup,
-  CheckboxItem,
-  RadioItem,
-  Arrow,
-  Separator,
-  Sub,
-  SubTrigger,
-  SubContent,
-  Content,
-  Hint
-};
-
-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
+});
+const getToggleItemStyles = theme => {
+  return /*#__PURE__*/css({
+    background: 'none',
+    color: theme.colors.textPrimary,
+    border: 'none',
+    cursor: 'pointer',
+    '&:hover': {
+      color: theme.colors.actionDefaultTextHover
     },
-    error: {
-      backgroundDefaultColor: theme.colors.actionDangerPrimaryBackgroundDefault,
-      backgroundHoverColor: theme.colors.actionDangerPrimaryBackgroundHover,
-      backgroundPressColor: theme.colors.actionDangerPrimaryBackgroundPress,
-      textColor: theme.colors.actionPrimaryTextDefault
+    '&[data-state="on"]': {
+      color: theme.colors.actionDefaultTextPress
     }
-  };
-  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;"))
-  };
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getToggleItemStyles;");
 };
-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 ToggleItem = /*#__PURE__*/forwardRef((props, ref) => {
   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]
-      })]
-    })
+  return jsx(RadixToolbar.ToggleItem, {
+    css: getToggleItemStyles(theme),
+    ...props,
+    ref: ref
   });
-};
+});
+
+var Toolbar = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Button: Button,
+  Link: Link,
+  Root: Root,
+  Separator: Separator,
+  ToggleGroup: ToggleGroup,
+  ToggleItem: ToggleItem
+});
 
-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 };
+export { BANNER_MAX_HEIGHT, BANNER_MIN_HEIGHT, Banner, ChatUI, Slider, Toolbar };
 //# sourceMappingURL=development.js.map