@databricks/design-system 1.12.13 → 1.12.15

package/dist/development.js

@@ -1,12 +1,13 @@
 import { css } from '@emotion/react';
 import React__default, { useState, useEffect, forwardRef } from 'react';
-import { a2 as MegaphoneIcon, W as WarningIcon, l as DangerIcon, u as useDesignSystemTheme, B as Button$1, C as CloseIcon, d as Tooltip, T as Typography, a8 as primitiveColors, f as Input, _ as CursorIcon, a1 as FaceSmileIcon, a0 as FaceNeutralIcon, $ as FaceFrownIcon, h as CheckIcon, r as ChevronLeftIcon, b as ChevronRightIcon, a9 as dropdownItemStyles, c as useDesignSystemContext, n as dropdownContentStyles, aa as dropdownSeparatorStyles } from './DropdownMenu-dbeef1b7.js';
+import { _ as MegaphoneIcon, W as WarningIcon, k as DangerIcon, u as useDesignSystemTheme, p as useDesignSystemEventComponentCallbacks, q as DesignSystemEventProviderComponentTypes, r as DesignSystemEventProviderAnalyticsEventTypes, t as useNotifyOnFirstView, B as Button$1, C as CloseIcon, T as Typography, a5 as primitiveColors, f as Input, V as CursorIcon, Z as FaceSmileIcon, Y as FaceNeutralIcon, X as FaceFrownIcon, e as CheckIcon, o as ChevronLeftIcon, b as ChevronRightIcon } from './Stepper-a0fb4d9b.js';
+export { G as Stepper } from './Stepper-a0fb4d9b.js';
 import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
-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 RadixSlider from '@radix-ui/react-slider';
 import * as RadixToolbar from '@radix-ui/react-toolbar';
+import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group';
 import 'antd';
-import '@radix-ui/react-dropdown-menu';
+import '@ant-design/icons';
 import 'lodash/isNil';
 import 'lodash/endsWith';
 import 'lodash/isBoolean';
@@ -15,7 +16,6 @@ import 'lodash/isString';
 import 'lodash/mapValues';
 import 'lodash/memoize';
 import '@emotion/unitless';
-import '@ant-design/icons';
 
 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 {
@@ -35,13 +35,41 @@ var _ref$1 = process.env.NODE_ENV === "production" ? {
 };
 const useStyles = (props, theme) => {
   const bannerLevelToBannerColors = {
+    info_light_purple: {
+      backgroundDefaultColor: theme.isDarkMode ? '#6E2EC729' : '#ECE1FC',
+      actionButtonBackgroundHoverColor: theme.colors.actionDefaultBackgroundHover,
+      actionButtonBackgroundPressColor: theme.colors.actionDefaultBackgroundPress,
+      textColor: theme.colors.actionDefaultTextDefault,
+      textHoverColor: '#92A4B38F',
+      textPressColor: theme.colors.actionDefaultTextDefault,
+      borderDefaultColor: theme.isDarkMode ? '#955CE5' : '#E2D0FB',
+      actionBorderColor: '#92A4B38F',
+      closeIconColor: theme.isDarkMode ? '#92A4B3' : '#5F7281',
+      iconColor: theme.colors.purple,
+      actionButtonBorderHoverColor: theme.colors.actionDefaultBorderHover,
+      actionButtonBorderPressColor: theme.colors.actionDefaultBorderPress,
+      closeIconBackgroundHoverColor: theme.colors.actionTertiaryBackgroundHover,
+      closeIconTextHoverColor: theme.colors.actionTertiaryTextHover,
+      closeIconBackgroundPressColor: theme.colors.actionDefaultBackgroundPress,
+      closeIconTextPressColor: theme.colors.actionTertiaryTextPress
+    },
+    info_dark_purple: {
+      backgroundDefaultColor: theme.isDarkMode ? '#BC92F7DB' : theme.colors.purple,
+      actionButtonBackgroundHoverColor: theme.isDarkMode ? '#BC92F7DB' : theme.colors.purple,
+      actionButtonBackgroundPressColor: theme.isDarkMode ? '#BC92F7DB' : theme.colors.purple,
+      textColor: theme.colors.actionPrimaryTextDefault,
+      textHoverColor: theme.colors.actionPrimaryTextHover,
+      textPressColor: theme.colors.actionPrimaryTextPress,
+      borderDefaultColor: theme.isDarkMode ? '#BC92F7DB' : theme.colors.purple
+    },
     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
+      textPressColor: theme.colors.actionPrimaryTextPress,
+      borderDefaultColor: theme.colors.actionPrimaryBackgroundDefault
     },
     // TODO (PLAT-80558, zack.brody) Update hover and press states once we have colors for these
     warning: {
@@ -50,7 +78,8 @@ const useStyles = (props, theme) => {
       actionButtonBackgroundPressColor: theme.colors.tagLemon,
       textColor: primitiveColors.grey800,
       textHoverColor: primitiveColors.grey800,
-      textPressColor: primitiveColors.grey800
+      textPressColor: primitiveColors.grey800,
+      borderDefaultColor: theme.colors.tagLemon
     },
     error: {
       backgroundDefaultColor: theme.colors.actionDangerPrimaryBackgroundDefault,
@@ -58,29 +87,37 @@ const useStyles = (props, theme) => {
       actionButtonBackgroundPressColor: theme.colors.actionDangerPrimaryBackgroundPress,
       textColor: theme.colors.actionPrimaryTextDefault,
       textHoverColor: theme.colors.actionPrimaryTextHover,
-      textPressColor: theme.colors.actionPrimaryTextPress
+      textPressColor: theme.colors.actionPrimaryTextPress,
+      borderDefaultColor: theme.colors.actionDangerPrimaryBackgroundDefault
     }
   };
   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;" + (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;")),
+    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, ";border:1px solid ", colorScheme.borderDefaultColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:banner;")),
+    iconContainer: /*#__PURE__*/css("display:flex;color:", colorScheme.iconColor ? colorScheme.iconColor : 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;padding:", theme.spacing.xs, "px ", theme.spacing.xs, "px ", theme.spacing.xs, "px ", theme.spacing.xs, "px;margin-left:", theme.spacing.xs, "px;box-sizing:border-box;line-height:0;" + (process.env.NODE_ENV === "production" ? "" : ";label:closeIconContainer;")),
-    closeIcon: /*#__PURE__*/css("color:", colorScheme.textColor, "!important;cursor:pointer;" + (process.env.NODE_ENV === "production" ? "" : ";label:closeIcon;")),
+    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;border-color:", colorScheme.textHoverColor, "!important;color:", colorScheme.closeIconTextHoverColor ? colorScheme.closeIconTextHoverColor : colorScheme.textColor, "!important;background-color:", colorScheme.closeIconBackgroundHoverColor ? colorScheme.closeIconBackgroundHoverColor : colorScheme.backgroundDefaultColor, "!important;}&&:active{border-color:", colorScheme.actionBorderColor, "!important;color:", colorScheme.closeIconTextPressColor ? colorScheme.closeIconTextPressColor : colorScheme.textColor, "!important;background-color:", colorScheme.closeIconBackgroundPressColor ? colorScheme.closeIconBackgroundPressColor : colorScheme.backgroundDefaultColor, "!important;}" + (process.env.NODE_ENV === "production" ? "" : ";label:closeButton;")),
+    closeIcon: /*#__PURE__*/css("color:", colorScheme.closeIconColor ? colorScheme.closeIconColor : 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;"))
+    actionButton: /*#__PURE__*/css("color:", colorScheme.textColor, "!important;border-color:", colorScheme.actionBorderColor ? colorScheme.actionBorderColor : colorScheme.textColor, "!important;&:focus,&:hover{border-color:", colorScheme.actionButtonBorderHoverColor ? colorScheme.actionButtonBorderHoverColor : colorScheme.textHoverColor, "!important;color:", colorScheme.textColor, "!important;background-color:", colorScheme.actionButtonBackgroundHoverColor, "!important;}&:active{border-color:", colorScheme.actionButtonBorderPressColor ? colorScheme.actionButtonBorderPressColor : colorScheme.actionBorderColor, "!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"
   }),
+  info_light_purple: jsx(MegaphoneIcon, {
+    "data-testid": "level-info-light-purple-icon"
+  }),
+  info_dark_purple: jsx(MegaphoneIcon, {
+    "data-testid": "level-info-dark-purple-icon"
+  }),
   warning: jsx(WarningIcon, {
     "data-testid": "level-warning-icon"
   }),
@@ -97,18 +134,29 @@ const Banner = props => {
     onAccept,
     closable,
     onClose,
-    closeButtonAriaLabel
+    closeButtonAriaLabel,
+    componentId,
+    analyticsEvents
   } = props;
   const [closed, setClosed] = React__default.useState(false);
-  const [showingDescriptionEllipses, setShowingDescriptionEllipses] = React__default.useState(false);
-  const [showingMessageEllipses, setShowingMessageEllipses] = 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",
@@ -117,7 +165,9 @@ const Banner = props => {
   }) : null;
   const close = closable !== false ? jsx("div", {
     css: styles.closeIconContainer,
-    children: jsx("a", {
+    children: jsx(Button$1, {
+      componentId: `${componentId}.close`,
+      css: styles.closeButton,
       onClick: () => {
         if (onClose) {
           onClose();
@@ -131,31 +181,9 @@ const Banner = props => {
       })
     })
   }) : null;
-  const messageElement = jsx(Text, {
-    size: "md",
-    ellipsis: {
-      onEllipsis: setShowingMessageEllipses
-    },
-    bold: true,
-    css: styles.messageTextBlock,
-    children: message
-  });
-  const descriptionElement = jsx(Paragraph, {
-    ellipsis: {
-      rows: 2,
-      onEllipsis: setShowingDescriptionEllipses
-    },
-    withoutMargins: true,
-    css: styles.descriptionBlock,
-    children: description
-  });
-  const descriptionElementWithConditionalTooltip = showingDescriptionEllipses ? jsx(Tooltip, {
-    title: description,
-    placement: "bottom",
-    children: descriptionElement
-  }) : descriptionElement;
   return jsx(Fragment, {
     children: !closed && jsxs("div", {
+      ref: elementRef,
       css: styles.banner,
       className: "banner",
       "data-testid": props['data-testid'],
@@ -164,11 +192,18 @@ const Banner = props => {
         children: levelToIconMap[level]
       }), jsxs("div", {
         css: styles.mainContent,
-        children: [showingMessageEllipses ? jsx(Tooltip, {
+        children: [jsx(Text, {
+          size: "md",
+          bold: true,
+          css: styles.messageTextBlock,
           title: message,
-          placement: "bottom",
-          children: messageElement
-        }) : messageElement, description && descriptionElementWithConditionalTooltip]
+          children: message
+        }), description && jsx(Paragraph, {
+          withoutMargins: true,
+          css: styles.descriptionBlock,
+          title: description,
+          children: description
+        })]
       }), jsxs("div", {
         css: styles.rightContainer,
         children: [actionButton, close]
@@ -255,6 +290,7 @@ const ChatInput = _ref => {
       },
       ...textAreaProps
     }), jsx(Button$1, {
+      componentId: "codegen_design-system_src_development_chatui_chatinput.tsx_83",
       size: "small",
       css: chatInputStyles.button,
       icon: jsx(CursorIcon, {}),
@@ -388,6 +424,7 @@ const Feedback = _ref => {
       }), jsxs("div", {
         css: feedbackStyles.feedbackOptions,
         children: [jsx(Button$1, {
+          componentId: "codegen_design-system_src_development_chatui_feedback.tsx_57",
           icon: jsx(FaceSmileIcon, {}),
           onClick: () => {
             onFeedback('Better');
@@ -395,6 +432,7 @@ const Feedback = _ref => {
           },
           children: "Better"
         }), jsx(Button$1, {
+          componentId: "codegen_design-system_src_development_chatui_feedback.tsx_66",
           icon: jsx(FaceNeutralIcon, {}),
           onClick: () => {
             onFeedback('Same');
@@ -402,6 +440,7 @@ const Feedback = _ref => {
           },
           children: "Same"
         }), jsx(Button$1, {
+          componentId: "codegen_design-system_src_development_chatui_feedback.tsx_75",
           icon: jsx(FaceFrownIcon, {}),
           onClick: () => {
             onFeedback('Worse');
@@ -411,6 +450,7 @@ const Feedback = _ref => {
         })]
       })]
     }), jsx(Button$1, {
+      componentId: "codegen_design-system_src_development_chatui_feedback.tsx_86",
       icon: jsx(CloseIcon, {}),
       onClick: () => setIsVisible(false)
     })]
@@ -686,192 +726,6 @@ const ChatUI = {
   ChatInput: ChatInput$1
 };
 
-const Root$2 = 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 Item = _ref4 => {
-  let {
-    children,
-    ...props
-  } = _ref4;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(ContextMenuItem, {
-    ...props,
-    css: dropdownItemStyles(theme),
-    children: children
-  });
-};
-const CheckboxItem = _ref5 => {
-  let {
-    children,
-    ...props
-  } = _ref5;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsxs(ContextMenuCheckboxItem, {
-    ...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]
-  });
-};
-const RadioItem = _ref6 => {
-  let {
-    children,
-    ...props
-  } = _ref6;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsxs(ContextMenuRadioItem, {
-    ...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]
-  });
-};
-const Label = _ref7 => {
-  let {
-    children,
-    ...props
-  } = _ref7;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(ContextMenuLabel, {
-    ...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
-  });
-};
-const Separator$1 = () => {
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(ContextMenuSeparator, {
-    css: dropdownSeparatorStyles(theme)
-  });
-};
-const itemIndicatorStyles = theme => /*#__PURE__*/css({
-  display: 'inline-flex',
-  paddingRight: theme.spacing.xs
-}, process.env.NODE_ENV === "production" ? "" : ";label:itemIndicatorStyles;");
-const ContextMenu = {
-  Root: Root$2,
-  Trigger,
-  Label,
-  Item,
-  Group,
-  RadioGroup,
-  CheckboxItem,
-  RadioItem,
-  Arrow,
-  Separator: Separator$1,
-  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)."; }
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1tciq3q",
@@ -884,7 +738,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 const getRootStyles$1 = () => {
   return _ref;
 };
-const Root$1 = /*#__PURE__*/forwardRef((props, ref) => {
+const Root$2 = /*#__PURE__*/forwardRef((props, ref) => {
   return jsx(RadixSlider.Root, {
     css: getRootStyles$1(),
     ...props,
@@ -971,7 +825,7 @@ const Thumb = /*#__PURE__*/forwardRef((props, ref) => {
 var Slider = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Range: Range,
-  Root: Root$1,
+  Root: Root$2,
   Thumb: Thumb,
   Track: Track
 });
@@ -989,7 +843,7 @@ const getRootStyles = theme => {
     padding: theme.spacing.sm
   }, process.env.NODE_ENV === "production" ? "" : ";label:getRootStyles;");
 };
-const Root = /*#__PURE__*/forwardRef((props, ref) => {
+const Root$1 = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
@@ -1063,11 +917,272 @@ var Toolbar = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Button: Button,
   Link: Link,
-  Root: Root,
+  Root: Root$1,
   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$2 as Root, Separator$1 as Separator, Slider, Sub, SubContent, SubTrigger, Toolbar, Trigger, itemIndicatorStyles };
+const PreviewCard = _ref => {
+  let {
+    icon,
+    title,
+    subtitle,
+    children,
+    startActions,
+    endActions,
+    image,
+    onClick,
+    dangerouslyAppendEmotionCSS,
+    ...props
+  } = _ref;
+  const styles = useResultCardStyles({
+    onClick
+  });
+  const tabIndex = onClick ? 0 : undefined;
+  const role = onClick ? 'button' : undefined;
+  return jsxs("div", {
+    css: [styles['container'], dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:PreviewCard;"],
+    tabIndex: tabIndex,
+    onClick: onClick,
+    role: role,
+    ...props,
+    children: [image && jsx("div", {
+      children: image
+    }), jsxs("div", {
+      css: styles['header'],
+      children: [icon && jsx("div", {
+        children: icon
+      }), jsxs("div", {
+        children: [title && jsx("div", {
+          css: styles['title'],
+          children: title
+        }), subtitle && jsx("div", {
+          children: subtitle
+        })]
+      })]
+    }), jsx("div", {
+      children: children
+    }), jsxs("div", {
+      css: styles['footer'],
+      children: [jsx("div", {
+        children: startActions
+      }), jsx("div", {
+        children: endActions
+      })]
+    })]
+  });
+};
+const useResultCardStyles = _ref2 => {
+  let {
+    onClick
+  } = _ref2;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const isInteractive = onClick !== undefined;
+  return {
+    container: {
+      borderRadius: theme.borders.borderRadiusMd,
+      border: `1px solid ${theme.colors.border}`,
+      padding: theme.spacing.md,
+      color: theme.colors.textSecondary,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing.sm,
+      cursor: isInteractive ? 'pointer' : 'default',
+      ...(isInteractive && {
+        '&:hover, &:focus-within': {
+          background: theme.colors.actionTertiaryBackgroundHover
+        },
+        '&:active': {
+          background: theme.colors.actionTertiaryBackgroundPress
+        },
+        '&:focus': {
+          outlineColor: theme.colors.actionPrimaryBackgroundDefault,
+          outlineWidth: 2,
+          outlineOffset: -2,
+          outlineStyle: 'solid',
+          boxShadow: 'none',
+          borderColor: 'transparent'
+        }
+      })
+    },
+    header: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing.sm
+    },
+    title: {
+      fontWeight: theme.typography.typographyBoldFontWeight,
+      color: theme.colors.textPrimary
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
+  };
+};
+
+const RadioGroupContext = /*#__PURE__*/React__default.createContext('medium');
+const Root = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) => {
+  let {
+    size,
+    ...props
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const contextValue = React__default.useMemo(() => size !== null && size !== void 0 ? size : 'medium', [size]);
+  return jsx(RadioGroupContext.Provider, {
+    value: contextValue,
+    children: jsx(RadioGroup, {
+      css: /*#__PURE__*/css({
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: theme.spacing.sm
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Root;"),
+      ...props,
+      ref: forwardedRef
+    })
+  });
+});
+const Item = /*#__PURE__*/React__default.forwardRef((_ref2, forwardedRef) => {
+  let {
+    children,
+    icon,
+    ...props
+  } = _ref2;
+  const size = React__default.useContext(RadioGroupContext);
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const iconClass = 'pill-control-icon';
+  const css$1 = useRadioGroupItemStyles(size, iconClass);
+  return jsxs(RadioGroupItem, {
+    css: css$1,
+    ...props,
+    children: [icon && jsx("span", {
+      className: iconClass,
+      css: /*#__PURE__*/css({
+        marginRight: size === 'large' ? theme.spacing.sm : theme.spacing.xs,
+        [`& > .anticon`]: {
+          verticalAlign: `-3px`
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Item;"),
+      children: icon
+    }), children]
+  });
+});
+const useRadioGroupItemStyles = (size, iconClass) => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    appearance: 'none',
+    textDecoration: 'none',
+    background: 'none',
+    border: '1px solid',
+    cursor: 'pointer',
+    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+    borderColor: theme.colors.border,
+    color: theme.colors.textPrimary,
+    lineHeight: theme.typography.lineHeightBase,
+    height: 32,
+    paddingInline: '12px',
+    fontWeight: theme.typography.typographyRegularFontWeight,
+    borderRadius: theme.spacing.md,
+    transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out',
+    [`& > .${iconClass}`]: {
+      color: theme.colors.textSecondary,
+      ...(size === 'large' ? {
+        backgroundColor: theme.colors.actionDefaultBackgroundHover,
+        padding: theme.spacing.sm,
+        borderRadius: theme.spacing.md
+      } : {})
+    },
+    '&[data-state="checked"]': {
+      backgroundColor: theme.colors.actionDefaultBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.textPrimary,
+      // outline
+      outlineStyle: 'solid',
+      outlineWidth: '2px',
+      outlineOffset: '0px',
+      outlineColor: theme.isDarkMode ? theme.colors.actionLinkDefault : theme.colors.actionLinkDefault,
+      '&:hover': {
+        backgroundColor: theme.colors.actionDefaultBackgroundPress,
+        borderColor: theme.colors.actionLinkPress,
+        color: 'inherit'
+      },
+      [`& > .${iconClass}, &:hover > .${iconClass}`]: {
+        color: theme.colors.actionDefaultTextPress,
+        ...(size === 'large' ? {
+          backgroundColor: theme.colors.actionIconBackgroundPress
+        } : {})
+      }
+    },
+    '&:focus-visible': {
+      outlineStyle: 'solid',
+      outlineWidth: '2px',
+      outlineOffset: '0px',
+      outlineColor: theme.colors.actionDefaultBorderFocus
+    },
+    '&:hover': {
+      backgroundColor: theme.colors.actionDefaultBackgroundHover,
+      borderColor: theme.colors.actionLinkHover,
+      color: theme.colors.actionDefaultTextHover,
+      [`& > .${iconClass}`]: {
+        color: 'inherit',
+        ...(size === 'large' ? {
+          backgroundColor: theme.colors.actionIconBackgroundHover
+        } : {})
+      }
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDefaultBackgroundPress,
+      borderColor: theme.colors.actionLinkPress,
+      color: theme.colors.actionDefaultTextPress,
+      [`& > .${iconClass}`]: {
+        color: 'inherit',
+        ...(size === 'large' ? {
+          backgroundColor: theme.colors.actionIconBackgroundPress
+        } : {})
+      }
+    },
+    '&:disabled': {
+      backgroundColor: theme.colors.actionDisabledBackground,
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText,
+      cursor: 'not-allowed',
+      [`& > .${iconClass}`]: {
+        color: 'inherit'
+      }
+    },
+    ...(size === 'small' ? {
+      height: 24,
+      lineHeight: theme.typography.lineHeightSm,
+      paddingInline: theme.spacing.sm
+    } : {}),
+    ...(size === 'large' ? {
+      height: 44,
+      lineHeight: theme.typography.lineHeightXl,
+      paddingInline: theme.spacing.md,
+      paddingInlineStart: '6px',
+      borderRadius: theme.spacing.lg
+    } : {})
+  };
+};
+
+var PillControl = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Item: Item,
+  Root: Root
+});
+
+export { BANNER_MAX_HEIGHT, BANNER_MIN_HEIGHT, Banner, ChatUI, PillControl, PreviewCard, Slider, Toolbar };
 //# sourceMappingURL=development.js.map