@databricks/design-system 1.12.14 → 1.12.16

package/dist/development.js

@@ -1,10 +1,11 @@
 import { css } from '@emotion/react';
-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 React__default, { useState, useEffect, forwardRef } from 'react';
+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-ff25c5d1.js';
+export { G as Stepper } from './Stepper-ff25c5d1.js';
 import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
 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 '@ant-design/icons';
 import 'lodash/isNil';
@@ -16,72 +17,6 @@ import 'lodash/mapValues';
 import 'lodash/memoize';
 import '@emotion/unitless';
 
-// 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,
@@ -100,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: {
@@ -115,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,
@@ -123,30 +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;")),
+    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;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;")),
+    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"
   }),
@@ -767,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,
@@ -854,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
 });
@@ -872,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();
@@ -946,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 { BANNER_MAX_HEIGHT, BANNER_MIN_HEIGHT, Banner, ChatUI, Slider, Toolbar };
+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