@databricks/design-system 1.12.8 → 1.12.10

package/dist/development.js

@@ -1,11 +1,12 @@
 import { css } from '@emotion/react';
-import React__default, { forwardRef, useState } from 'react';
-import { u as useDesignSystemTheme, e as Input, B as Button, w as CursorIcon, T as Typography, y as FaceSmileIcon, x as FaceNeutralIcon, F as FaceFrownIcon, C as CloseIcon, j as ChevronLeftIcon, a as ChevronRightIcon } from './Typography-e3d5ff23.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import React__default, { useState, useEffect, forwardRef } from 'react';
+import { u as useDesignSystemTheme, f as Input, B as Button, J as CursorIcon, k as Typography, M as FaceSmileIcon, L as FaceNeutralIcon, K as FaceFrownIcon, C as CloseIcon, h as CheckIcon, n as ChevronLeftIcon, a as ChevronRightIcon, S as dropdownItemStyles, d as useDesignSystemContext, l as dropdownContentStyles, U as dropdownSeparatorStyles } from './DropdownMenu-e0c3fc1d.js';
+import { jsxs, jsx } 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';
+import '@radix-ui/react-dropdown-menu';
 import 'chroma-js';
-import '@ant-design/icons';
 import 'lodash/isNil';
 import 'lodash/endsWith';
 import 'lodash/isBoolean';
@@ -13,112 +14,9 @@ import 'lodash/isNumber';
 import 'lodash/isString';
 import 'lodash/mapValues';
 import '@emotion/unitless';
+import '@ant-design/icons';
 
-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)."; }
-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__$5
-};
-const getRootStyles = () => {
-  return _ref;
-};
-const Root = /*#__PURE__*/forwardRef((props, ref) => {
-  return jsx(RadixSlider.Root, {
-    css: getRootStyles(),
-    ...props,
-    ref: ref
-  });
-});
-const getTrackStyles = theme => {
-  return /*#__PURE__*/css({
-    backgroundColor: theme.colors.grey100,
-    position: 'relative',
-    flexGrow: 1,
-    borderRadius: 9999,
-    '&[data-orientation="vertical"]': {
-      width: 3
-    },
-    '&[data-orientation="horizontal"]': {
-      height: 3
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTrackStyles;");
-};
-const Track = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(RadixSlider.Track, {
-    css: getTrackStyles(theme),
-    ...props,
-    ref: ref
-  });
-});
-const getRangeStyles = theme => {
-  return /*#__PURE__*/css({
-    backgroundColor: theme.colors.primary,
-    position: 'absolute',
-    borderRadius: 9999,
-    height: '100%',
-    '&[data-disabled]': {
-      backgroundColor: theme.colors.grey100
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getRangeStyles;");
-};
-const Range = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(RadixSlider.Range, {
-    css: getRangeStyles(theme),
-    ...props,
-    ref: ref
-  });
-});
-const getThumbStyles = theme => {
-  return /*#__PURE__*/css({
-    display: 'block',
-    width: 20,
-    height: 20,
-    backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
-    boxShadow: `0 2px 4px 0 ${theme.colors.grey400}`,
-    borderRadius: 10,
-    outline: 'none',
-    '&:hover': {
-      backgroundColor: theme.colors.actionPrimaryBackgroundHover
-    },
-    '&:focus': {
-      backgroundColor: theme.colors.actionPrimaryBackgroundPress
-    },
-    '&[data-disabled]': {
-      backgroundColor: theme.colors.grey200,
-      boxShadow: 'none'
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getThumbStyles;");
-};
-const Thumb = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(RadixSlider.Thumb, {
-    css: getThumbStyles(theme),
-    ...props,
-    ref: ref
-  });
-});
-
-var Slider = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Root: Root,
-  Track: Track,
-  Range: Range,
-  Thumb: Thumb
-});
-
-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__$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",
@@ -126,7 +24,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__$4
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   },
   suggestionButtons: process.env.NODE_ENV === "production" ? {
     name: "zsd1o9",
@@ -134,7 +32,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__$4
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   },
   textArea: process.env.NODE_ENV === "production" ? {
     name: "ge1ym1",
@@ -142,7 +40,7 @@ const chatInputStyles = {
   } : {
     name: "hcagyb-textArea",
     styles: "min-width:100%;max-height:150px !important;label:textArea;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   },
   button: process.env.NODE_ENV === "production" ? {
     name: "1c60og2",
@@ -150,7 +48,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__$4
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
   }
 };
 const ChatInput = _ref => {
@@ -205,7 +103,7 @@ const ChatInput = _ref => {
 };
 var ChatInput$1 = ChatInput;
 
-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__$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",
@@ -213,7 +111,7 @@ const snippetStyles = {
   } : {
     name: "15luuk2-container",
     styles: "margin:var(--spacing-md) 0;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   },
   header: process.env.NODE_ENV === "production" ? {
     name: "dtwnbh",
@@ -221,15 +119,15 @@ 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__$3
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   },
   buttonSvg: process.env.NODE_ENV === "production" ? {
-    name: "1v56ljg",
-    styles: "color:var(--color-grey300)"
+    name: "s8x62f",
+    styles: "svg{color:var(--color-grey300);}"
   } : {
-    name: "19o33i2-buttonSvg",
-    styles: "color:var(--color-grey300);label:buttonSvg;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+    name: "g0ytlm-buttonSvg",
+    styles: "svg{color:var(--color-grey300);};label:buttonSvg;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   },
   code: process.env.NODE_ENV === "production" ? {
     name: "u1l3ou",
@@ -237,7 +135,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__$3
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
   }
 };
 const CodeSnippet = _ref => {
@@ -275,7 +173,7 @@ const CodeSnippet = _ref => {
 };
 var CodeSnippet$1 = CodeSnippet;
 
-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__$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",
@@ -283,7 +181,7 @@ const feedbackStyles = {
   } : {
     name: "1dbf7uj-container",
     styles: "display:flex;justify-content:space-between;align-items:flex-end;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
   },
   feedbackPrompt: process.env.NODE_ENV === "production" ? {
     name: "1hsyf68",
@@ -291,7 +189,7 @@ const feedbackStyles = {
   } : {
     name: "1yi757f-feedbackPrompt",
     styles: "display:flex;flex-direction:column;gap:var(--spacing-sm);label:feedbackPrompt;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
   },
   feedbackOptions: process.env.NODE_ENV === "production" ? {
     name: "1s3radb",
@@ -299,7 +197,7 @@ const feedbackStyles = {
   } : {
     name: "125q18r-feedbackOptions",
     styles: "display:flex;gap:var(--spacing-sm);label:feedbackOptions;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
   }
 };
 const Feedback = _ref => {
@@ -393,6 +291,75 @@ 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)."; }
+const buttonStyles = {
+  container: process.env.NODE_ENV === "production" ? {
+    name: "f9548c",
+    styles: "position:relative;display:inline-block;width:max-content"
+  } : {
+    name: "12rixe4-container",
+    styles: "position:relative;display:inline-block;width:max-content;label:container;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+  },
+  checkIcon: process.env.NODE_ENV === "production" ? {
+    name: "441ysl",
+    styles: "position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;svg{color:var(--checkmark-color);}"
+  } : {
+    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
+  }
+};
+const MessageActionButton = props => {
+  const [showCheck, setShowCheck] = useState(false);
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const handleClick = e => {
+    var _props$onClick;
+    setShowCheck(true);
+    (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, e);
+  };
+  if (props.children) {
+    throw new Error('MessageActionButton: Children not supported; use as icon-only button.');
+  }
+  useEffect(() => {
+    let timeoutId;
+    if (showCheck) {
+      timeoutId = setTimeout(() => {
+        setShowCheck(false);
+      }, 750);
+    }
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [showCheck]);
+  return jsxs("span", {
+    css: buttonStyles.container,
+    style: {
+      ['--checkmark-color']: theme.colors.green500
+    },
+    children: [jsx(Button, {
+      size: "small",
+      ...props,
+      onClick: handleClick,
+      css: /*#__PURE__*/css({
+        svg: {
+          transition: showCheck ? 'none' : 'opacity 350ms',
+          opacity: showCheck ? '0' : '1'
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:MessageActionButton;")
+    }), jsx(CheckIcon, {
+      css: buttonStyles.checkIcon,
+      style: {
+        transition: showCheck ? 'none' : 'opacity 350ms',
+        opacity: showCheck ? '1' : '0'
+      }
+    })]
+  });
+};
+var MessageActionButton$1 = MessageActionButton;
+
 const MessageBody = _ref => {
   let {
     children
@@ -412,7 +379,7 @@ const MessageBody = _ref => {
 };
 var MessageBody$1 = MessageBody;
 
-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 headerStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "30lgt6",
@@ -420,7 +387,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__$1
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
   },
   leftContent: process.env.NODE_ENV === "production" ? {
     name: "sz7nmf",
@@ -428,7 +395,7 @@ const headerStyles = {
   } : {
     name: "11wiry4-leftContent",
     styles: "display:flex;align-items:center;gap:var(--spacing-sm);label:leftContent;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
   },
   rightContent: process.env.NODE_ENV === "production" ? {
     name: "s5xdrg",
@@ -436,7 +403,7 @@ const headerStyles = {
   } : {
     name: "6oh64j-rightContent",
     styles: "display:flex;align-items:center;label:rightContent;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
   },
   avatar: /*#__PURE__*/css({
     position: 'absolute',
@@ -449,6 +416,7 @@ const headerStyles = {
     borderRadius: '50%'
   }, process.env.NODE_ENV === "production" ? "" : ";label:avatar;")
 };
+const avatarDefaultBackgroundImage = 'linear-gradient(180deg, #FFD983 0%, #FFB800 100%)';
 const MessageHeader = _ref => {
   let {
     userName,
@@ -470,7 +438,7 @@ const MessageHeader = _ref => {
       children: [jsx("div", {
         css: headerStyles.avatar,
         style: {
-          backgroundImage: `url(${avatarURL}), linear-gradient(180deg, #FFD983 0%, #FFB800 100%)`
+          backgroundImage: avatarURL ? `url(${avatarURL}), ${avatarDefaultBackgroundImage}` : avatarDefaultBackgroundImage
         }
       }), jsx(Typography.Text, {
         bold: true,
@@ -484,7 +452,7 @@ const MessageHeader = _ref => {
 };
 var MessageHeader$1 = MessageHeader;
 
-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)."; }
+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",
@@ -492,7 +460,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__
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
   },
   button: process.env.NODE_ENV === "production" ? {
     name: "waw0s4",
@@ -500,7 +468,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__
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
   }
 };
 const MessagePagination = _ref => {
@@ -546,6 +514,7 @@ const MessagePagination = _ref => {
 var MessagePagination$1 = MessagePagination;
 
 const ChatUI = {
+  MessageActionButton: MessageActionButton$1,
   MessageHeader: MessageHeader$1,
   MessageBody: MessageBody$1,
   MessagePagination: MessagePagination$1,
@@ -555,5 +524,295 @@ const ChatUI = {
   ChatInput: ChatInput$1
 };
 
-export { ChatUI, Slider };
+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__
+};
+const getRootStyles = () => {
+  return _ref;
+};
+const Root$1 = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx(RadixSlider.Root, {
+    css: getRootStyles(),
+    ...props,
+    ref: ref
+  });
+});
+const getTrackStyles = theme => {
+  return /*#__PURE__*/css({
+    backgroundColor: theme.colors.grey100,
+    position: 'relative',
+    flexGrow: 1,
+    borderRadius: 9999,
+    '&[data-orientation="vertical"]': {
+      width: 3
+    },
+    '&[data-orientation="horizontal"]': {
+      height: 3
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTrackStyles;");
+};
+const Track = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(RadixSlider.Track, {
+    css: getTrackStyles(theme),
+    ...props,
+    ref: ref
+  });
+});
+const getRangeStyles = theme => {
+  return /*#__PURE__*/css({
+    backgroundColor: theme.colors.primary,
+    position: 'absolute',
+    borderRadius: 9999,
+    height: '100%',
+    '&[data-disabled]': {
+      backgroundColor: theme.colors.grey100
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getRangeStyles;");
+};
+const Range = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(RadixSlider.Range, {
+    css: getRangeStyles(theme),
+    ...props,
+    ref: ref
+  });
+});
+const getThumbStyles = theme => {
+  return /*#__PURE__*/css({
+    display: 'block',
+    width: 20,
+    height: 20,
+    backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
+    boxShadow: `0 2px 4px 0 ${theme.colors.grey400}`,
+    borderRadius: 10,
+    outline: 'none',
+    '&:hover': {
+      backgroundColor: theme.colors.actionPrimaryBackgroundHover
+    },
+    '&:focus': {
+      backgroundColor: theme.colors.actionPrimaryBackgroundPress
+    },
+    '&[data-disabled]': {
+      backgroundColor: theme.colors.grey200,
+      boxShadow: 'none'
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getThumbStyles;");
+};
+const Thumb = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(RadixSlider.Thumb, {
+    css: getThumbStyles(theme),
+    ...props,
+    ref: ref
+  });
+});
+
+var Slider = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Range: Range,
+  Root: Root$1,
+  Thumb: Thumb,
+  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 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 = () => {
+  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,
+  Trigger,
+  Label,
+  Item,
+  Group,
+  RadioGroup,
+  CheckboxItem,
+  RadioItem,
+  Arrow,
+  Separator,
+  Sub,
+  SubTrigger,
+  SubContent,
+  Content,
+  Hint
+};
+
+export { Arrow, ChatUI, CheckboxItem, Content, ContextMenu, Group, Hint, Item, ItemIndicator, Label, RadioGroup, RadioItem, Root, Separator, Slider, Sub, SubContent, SubTrigger, Trigger, itemIndicatorStyles };
 //# sourceMappingURL=development.js.map