@databricks/design-system 1.12.16 → 1.12.18

package/dist/development.js

@@ -1,12 +1,18 @@
-import { css } from '@emotion/react';
-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 React__default, { useMemo, forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle, createContext, useReducer } from 'react';
 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 { css } from '@emotion/react';
+import { Z as WarningIcon, Y as DangerIcon, b as DesignSystemEventProviderAnalyticsEventTypes, a as useDesignSystemTheme, c as useDesignSystemEventComponentCallbacks, d as DesignSystemEventProviderComponentTypes, f as useNotifyOnFirstView, B as Button$1, C as CloseIcon, h as addDebugOutlineIfEnabled, q as Typography, as as primitiveColors, l as Root$3, T as Trigger, m as Content, a1 as ChevronLeftIcon, n as ChevronRightIcon, i as useDesignSystemSafexFlags, r as importantify } from './Typography-CTfAhQ8V.js';
+export { au as Form, at as useFormContext } from './Typography-CTfAhQ8V.js';
+import { M as MegaphoneIcon, I as Input, C as ClockIcon } from './index-DSCOuDtB.js';
+import { startOfToday, startOfYesterday, sub, format, isValid, startOfWeek, endOfToday, endOfYesterday, isAfter, isBefore } from 'date-fns';
+import { DayPicker, useDayRender, Button as Button$2 } from 'react-day-picker';
 import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group';
+import * as Progress$1 from '@radix-ui/react-progress';
+export { S as Stepper } from './Stepper-CHoSvjfT.js';
+import * as RadixToolbar from '@radix-ui/react-toolbar';
 import 'antd';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-tooltip';
 import '@ant-design/icons';
 import 'lodash/isNil';
 import 'lodash/endsWith';
@@ -16,8 +22,10 @@ import 'lodash/isString';
 import 'lodash/mapValues';
 import 'lodash/memoize';
 import '@emotion/unitless';
+import 'lodash/uniqueId';
+import 'lodash/isUndefined';
 
-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)."; }
+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 {
   Text,
   Paragraph
@@ -25,13 +33,13 @@ const {
 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" ? {
+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__$7
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
 };
 const useStyles = (props, theme) => {
   const bannerLevelToBannerColors = {
@@ -62,14 +70,15 @@ const useStyles = (props, theme) => {
       textPressColor: theme.colors.actionPrimaryTextPress,
       borderDefaultColor: theme.isDarkMode ? '#BC92F7DB' : theme.colors.purple
     },
+    // Clean up the experimental info banners
     info: {
-      backgroundDefaultColor: theme.colors.actionPrimaryBackgroundDefault,
-      actionButtonBackgroundHoverColor: theme.colors.actionPrimaryBackgroundHover,
-      actionButtonBackgroundPressColor: theme.colors.actionPrimaryBackgroundPress,
+      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.colors.actionPrimaryBackgroundDefault
+      borderDefaultColor: theme.isDarkMode ? '#BC92F7DB' : theme.colors.purple
     },
     // TODO (PLAT-80558, zack.brody) Update hover and press states once we have colors for these
     warning: {
@@ -98,7 +107,7 @@ const useStyles = (props, theme) => {
     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,
+    rightContainer: _ref,
     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;")),
@@ -136,17 +145,18 @@ const Banner = props => {
     onClose,
     closeButtonAriaLabel,
     componentId,
-    analyticsEvents
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnView]
   } = props;
   const [closed, setClosed] = React__default.useState(false);
   const {
     theme
   } = useDesignSystemTheme();
   const styles = useStyles(props, theme);
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
   const eventContext = useDesignSystemEventComponentCallbacks({
     componentType: DesignSystemEventProviderComponentTypes.Banner,
     componentId,
-    analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnView]
+    analyticsEvents: memoizedAnalyticsEvents
   });
   const {
     elementRef
@@ -184,9 +194,11 @@ const Banner = props => {
   return jsx(Fragment, {
     children: !closed && jsxs("div", {
       ref: elementRef,
+      ...addDebugOutlineIfEnabled(),
       css: styles.banner,
       className: "banner",
       "data-testid": props['data-testid'],
+      role: "alert",
       children: [jsx("div", {
         css: styles.iconContainer,
         children: levelToIconMap[level]
@@ -212,715 +224,898 @@ const Banner = props => {
   });
 };
 
-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",
-    styles: "background-color:var(--background-primary);padding:var(--spacing-sm);position:relative"
-  } : {
-    name: "t01lrg-container",
-    styles: "background-color:var(--background-primary);padding:var(--spacing-sm);position:relative;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
-  },
-  suggestionButtons: process.env.NODE_ENV === "production" ? {
-    name: "zsd1o9",
-    styles: "display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)"
-  } : {
-    name: "3tz5r6-suggestionButtons",
-    styles: "display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);label:suggestionButtons;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
-  },
-  textArea: process.env.NODE_ENV === "production" ? {
-    name: "ge1ym1",
-    styles: "min-width:100%;max-height:150px !important"
-  } : {
-    name: "hcagyb-textArea",
-    styles: "min-width:100%;max-height:150px !important;label:textArea;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
-  },
-  button: process.env.NODE_ENV === "production" ? {
-    name: "1c60og2",
-    styles: "position:absolute;bottom:calc(var(--spacing-sm) + 4px);right:calc(var(--spacing-sm) + 4px);transform:scaleX(-1)"
-  } : {
-    name: "1h7quuz-button",
-    styles: "position:absolute;bottom:calc(var(--spacing-sm) + 4px);right:calc(var(--spacing-sm) + 4px);transform:scaleX(-1);label:button;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+const getDayPickerStyles = (prefix, theme) => /*#__PURE__*/css(".", prefix, "{--rdp-cell-size:", theme.general.heightSm, "px;--rdp-caption-font-size:", theme.typography.fontSizeBase, "px;--rdp-accent-color:", theme.colors.actionPrimaryBackgroundDefault, ";--rdp-background-color:", theme.colors.actionTertiaryBackgroundPress, ";--rdp-accent-color-dark:", theme.colors.actionPrimaryBackgroundDefault, ";--rdp-background-color-dark:", theme.colors.actionTertiaryBackgroundPress, ";--rdp-outline:2px solid var(--rdp-accent-color);--rdp-outline-selected:3px solid var(--rdp-accent-color);--rdp-selected-color:#fff;padding:4px;}.", prefix, "-vhidden{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute!important;top:0;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip:rect(1px, 1px, 1px, 1px)!important;border:0!important;}.", prefix, "-button_reset{appearance:none;position:relative;margin:0;padding:0;cursor:default;color:inherit;background:none;font:inherit;-moz-appearance:none;-webkit-appearance:none;}.", prefix, "-button_reset:focus-visible{outline:none;}.", prefix, "-button{border:2px solid transparent;}.", prefix, "-button[disabled]:not(.", prefix, "-day_selected){opacity:0.25;}.", prefix, "-button:not([disabled]){cursor:pointer;}.", prefix, "-button:focus-visible:not([disabled]){color:inherit;background-color:var(--rdp-background-color);border:var(--rdp-outline);}.", prefix, "-button:hover:not([disabled]):not(.", prefix, "-day_selected){background-color:var(--rdp-background-color);}.", prefix, "-months{display:flex;justify-content:center;}.", prefix, "-month{margin:0 1em;}.", prefix, "-month:first-of-type{margin-left:0;}.", prefix, "-month:last-child{margin-right:0;}.", prefix, "-table{margin:0;max-width:calc(var(--rdp-cell-size) * 7);border-collapse:collapse;}.", prefix, "-with_weeknumber .", prefix, "-table{max-width:calc(var(--rdp-cell-size) * 8);border-collapse:collapse;}.", prefix, "-caption{display:flex;align-items:center;justify-content:space-between;padding:0;text-align:left;}.", prefix, "-multiple_months .", prefix, "-caption{position:relative;display:block;text-align:center;}.", prefix, "-caption_dropdowns{position:relative;display:inline-flex;}.", prefix, "-caption_label{position:relative;z-index:1;display:inline-flex;align-items:center;margin:0;padding:0 0.25em;white-space:nowrap;color:currentColor;border:0;border:2px solid transparent;font-family:inherit;font-size:var(--rdp-caption-font-size);font-weight:600;}.", prefix, "-nav{white-space:nowrap;}.", prefix, "-multiple_months .", prefix, "-caption_start .", prefix, "-nav{position:absolute;top:50%;left:0;transform:translateY(-50%);}.", prefix, "-multiple_months .", prefix, "-caption_end .", prefix, "-nav{position:absolute;top:50%;right:0;transform:translateY(-50%);}.", prefix, "-nav_button{display:inline-flex;align-items:center;justify-content:center;width:var(--rdp-cell-size);height:var(--rdp-cell-size);}.", prefix, "-dropdown_year,.", prefix, "-dropdown_month{position:relative;display:inline-flex;align-items:center;}.", prefix, "-dropdown{appearance:none;position:absolute;z-index:2;top:0;bottom:0;left:0;width:100%;margin:0;padding:0;cursor:inherit;opacity:0;border:none;background-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit;}.", prefix, "-dropdown[disabled]{opacity:unset;color:unset;}.", prefix, "-dropdown:focus-visible:not([disabled])+.", prefix, "-caption_label{background-color:var(--rdp-background-color);border:var(--rdp-outline);border-radius:6px;}.", prefix, "-dropdown_icon{margin:0 0 0 5px;}.", prefix, "-head{border:0;}.", prefix, "-head_row,.", prefix, "-row{height:100%;}.", prefix, "-head_cell{vertical-align:middle;font-size:inherit;font-weight:400;color:", theme.colors.textSecondary, ";text-align:center;height:100%;height:var(--rdp-cell-size);padding:0;text-transform:uppercase;}.", prefix, "-tbody{border:0;}.", prefix, "-tfoot{margin:0.5em;}.", prefix, "-cell{width:var(--rdp-cell-size);height:100%;height:var(--rdp-cell-size);padding:0;text-align:center;}.", prefix, "-weeknumber{font-size:0.75em;}.", prefix, "-weeknumber,.", prefix, "-day{display:flex;overflow:hidden;align-items:center;justify-content:center;box-sizing:border-box;width:var(--rdp-cell-size);max-width:var(--rdp-cell-size);height:var(--rdp-cell-size);margin:0;border:2px solid transparent;border-radius:", theme.general.borderRadiusBase, "px;}.", prefix, "-day_today:not(.", prefix, "-day_outside){font-weight:bold;}.", prefix, "-day_selected,.", prefix, "-day_selected:focus-visible,.", prefix, "-day_selected:hover{color:var(--rdp-selected-color);opacity:1;background-color:var(--rdp-accent-color);}.", prefix, "-day_outside{pointer-events:none;color:", theme.colors.textSecondary, ";}.", prefix, "-day_selected:focus-visible{outline:var(--rdp-outline);outline-offset:2px;z-index:1;}.", prefix, ":not([dir='rtl']) .", prefix, "-day_range_start:not(.", prefix, "-day_range_end){border-top-right-radius:0;border-bottom-right-radius:0;}.", prefix, ":not([dir='rtl']) .", prefix, "-day_range_end:not(.", prefix, "-day_range_start){border-top-left-radius:0;border-bottom-left-radius:0;}.", prefix, "[dir='rtl'] .", prefix, "-day_range_start:not(.", prefix, "-day_range_end){border-top-left-radius:0;border-bottom-left-radius:0;}.", prefix, "[dir='rtl'] .", prefix, "-day_range_end:not(.", prefix, "-day_range_start){border-top-right-radius:0;border-bottom-right-radius:0;}.", prefix, "-day_range_start,.", prefix, "-day_range_end{border:0;&>span{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:", theme.general.borderRadiusBase, "px;background-color:var(--rdp-accent-color);color:", theme.colors.white, ";}}.", prefix, "-day_range_end.", prefix, "-day_range_start{border-radius:", theme.general.borderRadiusBase, "px;}.", prefix, "-day_range_middle{border-radius:0;background-color:var(--rdp-background-color);color:", theme.colors.actionDefaultTextDefault, ";&:hover{color:", theme.colors.actionTertiaryTextHover, ";}}.", prefix, "-row>td:last-of-type .", prefix, "-day_range_middle{border-top-right-radius:", theme.general.borderRadiusBase, "px;border-bottom-right-radius:", theme.general.borderRadiusBase, "px;}.", prefix, "-row>td:first-of-type .", prefix, "-day_range_middle{border-top-left-radius:", theme.general.borderRadiusBase, "px;border-bottom-left-radius:", theme.general.borderRadiusBase, "px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:getDayPickerStyles;"));
+
+const generateDatePickerClassNames = prefix => ({
+  root: `${prefix}`,
+  multiple_months: `${prefix}-multiple_months`,
+  with_weeknumber: `${prefix}-with_weeknumber`,
+  vhidden: `${prefix}-vhidden`,
+  button_reset: `${prefix}-button_reset`,
+  button: `${prefix}-button`,
+  caption: `${prefix}-caption`,
+  caption_start: `${prefix}-caption_start`,
+  caption_end: `${prefix}-caption_end`,
+  caption_between: `${prefix}-caption_between`,
+  caption_label: `${prefix}-caption_label`,
+  caption_dropdowns: `${prefix}-caption_dropdowns`,
+  dropdown: `${prefix}-dropdown`,
+  dropdown_month: `${prefix}-dropdown_month`,
+  dropdown_year: `${prefix}-dropdown_year`,
+  dropdown_icon: `${prefix}-dropdown_icon`,
+  months: `${prefix}-months`,
+  month: `${prefix}-month`,
+  table: `${prefix}-table`,
+  tbody: `${prefix}-tbody`,
+  tfoot: `${prefix}-tfoot`,
+  head: `${prefix}-head`,
+  head_row: `${prefix}-head_row`,
+  head_cell: `${prefix}-head_cell`,
+  nav: `${prefix}-nav`,
+  nav_button: `${prefix}-nav_button`,
+  nav_button_previous: `${prefix}-nav_button_previous`,
+  nav_button_next: `${prefix}-nav_button_next`,
+  nav_icon: `${prefix}-nav_icon`,
+  row: `${prefix}-row`,
+  weeknumber: `${prefix}-weeknumber`,
+  cell: `${prefix}-cell`,
+  day: `${prefix}-day`,
+  day_today: `${prefix}-day_today`,
+  day_outside: `${prefix}-day_outside`,
+  day_selected: `${prefix}-day_selected`,
+  day_disabled: `${prefix}-day_disabled`,
+  day_hidden: `${prefix}-day_hidden`,
+  day_range_start: `${prefix}-day_range_start`,
+  day_range_end: `${prefix}-day_range_end`,
+  day_range_middle: `${prefix}-day_range_middle`
+});
+
+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 handleInputKeyDown = (event, setIsVisible) => {
+  if (event.key === ' ' || event.key === 'Enter' || event.key === 'Space') {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsVisible(true);
   }
 };
-const ChatInput = _ref => {
+function Day(props) {
+  const buttonRef = useRef(null);
+  const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
+  if (dayRender.isHidden) {
+    return jsx("div", {
+      role: "cell"
+    });
+  }
+  if (!dayRender.isButton) {
+    return jsx("div", {
+      ...dayRender.divProps
+    });
+  }
+  return jsx(Button$2, {
+    name: "day",
+    ref: buttonRef,
+    ...dayRender.buttonProps,
+    role: "button"
+  });
+}
+const getDatePickerQuickActionBasic = _ref => {
   let {
-    className,
-    onSubmit,
-    textAreaProps,
-    suggestionButtons
+    today,
+    yesterday,
+    sevenDaysAgo
   } = _ref;
+  return [{
+    label: 'Today',
+    value: startOfToday(),
+    ...today
+  }, {
+    label: 'Yesterday',
+    value: startOfYesterday(),
+    ...yesterday
+  }, {
+    label: '7 days ago',
+    value: sub(startOfToday(), {
+      days: 7
+    }),
+    ...sevenDaysAgo
+  }];
+};
+const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+    classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const [value, setValue] = React__default.useState('');
-  const handleSubmit = () => {
-    if (!value) {
+  const {
+    id,
+    name,
+    value,
+    validationState,
+    onChange,
+    allowClear,
+    onClear,
+    includeTime,
+    defaultTime,
+    onOpenChange,
+    open,
+    datePickerProps,
+    timeInputProps,
+    mode = 'single',
+    selected,
+    width,
+    maxWidth,
+    minWidth,
+    dateTimeDisabledFn,
+    quickActions,
+    wrapperProps,
+    onOkPress,
+    okButtonLabel,
+    showTimeZone,
+    ...restProps
+  } = props;
+  const format$1 = includeTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
+  const [date, setDate] = useState(value);
+  const [timezone, setTimezone] = useState();
+  const [isVisible, setIsVisible] = useState(Boolean(open));
+  const inputRef = useRef(null);
+  const visibleRef = useRef(isVisible);
+  // Needed to avoid the clear icon click also reopening the datepicker
+  const fromClearRef = useRef(null);
+  useEffect(() => {
+    if (!isVisible && visibleRef.current) {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    }
+    visibleRef.current = isVisible;
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(isVisible);
+  }, [isVisible, onOpenChange]);
+  useEffect(() => {
+    setIsVisible(Boolean(open));
+  }, [open]);
+  useEffect(() => {
+    const now = new Date();
+    if (showTimeZone) {
+      var _Intl$DateTimeFormat$, _Intl$DateTimeFormat$2;
+      setTimezone((_Intl$DateTimeFormat$ = (_Intl$DateTimeFormat$2 = Intl.DateTimeFormat('en-US', {
+        timeZoneName: 'short'
+      }).formatToParts(now).find(part => part.type === 'timeZoneName')) === null || _Intl$DateTimeFormat$2 === void 0 ? void 0 : _Intl$DateTimeFormat$2.value) !== null && _Intl$DateTimeFormat$ !== void 0 ? _Intl$DateTimeFormat$ : format(now, 'z'));
+    } else {
+      setTimezone(undefined);
+    }
+  }, [showTimeZone]);
+  useEffect(() => {
+    if (value) {
+      if (value instanceof Date && isValid(value)) {
+        setDate(value);
+      } else {
+        if (isValid(new Date(value))) {
+          setDate(new Date(value));
+        } else {
+          setDate(undefined);
+        }
+      }
+    } else {
+      setDate(undefined);
+    }
+  }, [value]);
+  const handleChange = useCallback((date, isCalendarUpdate) => {
+    if (onChange) {
+      onChange({
+        target: {
+          name,
+          value: date
+        },
+        type: 'change',
+        updateLocation: isCalendarUpdate ? 'calendar' : 'input'
+      });
+    }
+  }, [onChange, name]);
+  const handleDatePickerUpdate = date => {
+    setDate(prevDate => {
+      // Set default time if date is set the first time
+      if (!prevDate && date && includeTime && defaultTime) {
+        const timeSplit = defaultTime.split(':');
+        date === null || date === void 0 || date.setHours(+timeSplit[0]);
+        date === null || date === void 0 || date.setMinutes(+timeSplit[1]);
+      } else if (prevDate && date && includeTime) {
+        date.setHours(prevDate.getHours());
+        date.setMinutes(prevDate.getMinutes());
+      }
+      handleChange === null || handleChange === void 0 || handleChange(date, true);
+      return date;
+    });
+    if (!includeTime) {
+      setIsVisible(false);
+    }
+  };
+  const handleInputUpdate = updatedDate => {
+    if (!updatedDate || !isValid(updatedDate)) {
+      setDate(undefined);
+      handleChange === null || handleChange === void 0 || handleChange(undefined, false);
       return;
     }
-    onSubmit === null || onSubmit === void 0 || onSubmit(value);
-    setValue('');
+    if (date && updatedDate && includeTime) {
+      updatedDate.setHours(updatedDate.getHours());
+      updatedDate.setMinutes(updatedDate.getMinutes());
+    }
+    setDate(updatedDate);
+    handleChange === null || handleChange === void 0 || handleChange(updatedDate, false);
+    if (!includeTime) {
+      setIsVisible(false);
+    }
+  };
+  const handleClear = useCallback(() => {
+    setDate(undefined);
+    onClear === null || onClear === void 0 || onClear();
+    handleChange === null || handleChange === void 0 || handleChange(undefined, false);
+  }, [onClear, handleChange]);
+  const handleTimeUpdate = e => {
+    var _e$nativeEvent;
+    const newTime = (_e$nativeEvent = e.nativeEvent) === null || _e$nativeEvent === void 0 || (_e$nativeEvent = _e$nativeEvent.target) === null || _e$nativeEvent === void 0 ? void 0 : _e$nativeEvent.value;
+    const time = date && isValid(date) ? format(date, 'HH:mm') : undefined;
+    if (newTime && newTime !== time) {
+      if (date) {
+        const updatedDate = new Date(date);
+        const timeSplit = newTime.split(':');
+        updatedDate.setHours(+timeSplit[0]);
+        updatedDate.setMinutes(+timeSplit[1]);
+        handleInputUpdate(updatedDate);
+      }
+    }
   };
-  return jsxs("div", {
-    css: chatInputStyles.container,
-    style: {
-      ['--spacing-sm']: `${theme.spacing.sm}px`,
-      ['--background-primary']: theme.colors.backgroundPrimary,
-      ['--border-decorative']: theme.colors.borderDecorative
-    },
-    className: className,
-    children: [suggestionButtons && jsx("div", {
-      css: chatInputStyles.suggestionButtons,
-      children: suggestionButtons
-    }), jsx(Input.TextArea, {
-      autoSize: true,
-      value: value,
-      onChange: e => setValue(e.target.value),
-      placeholder: "Send a message",
-      css: chatInputStyles.textArea,
-      onKeyDown: e => {
-        if (e.key === 'Enter' && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
-          e.preventDefault();
-          handleSubmit();
-        }
-      },
-      ...textAreaProps
-    }), jsx(Button$1, {
-      componentId: "codegen_design-system_src_development_chatui_chatinput.tsx_83",
-      size: "small",
-      css: chatInputStyles.button,
-      icon: jsx(CursorIcon, {}),
-      onClick: handleSubmit
-    })]
-  });
-};
-var ChatInput$1 = ChatInput;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$5() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const snippetStyles = {
-  container: process.env.NODE_ENV === "production" ? {
-    name: "emyse7",
-    styles: "margin:var(--spacing-md) 0"
-  } : {
-    name: "15luuk2-container",
-    styles: "margin:var(--spacing-md) 0;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
-  },
-  header: process.env.NODE_ENV === "production" ? {
-    name: "dtwnbh",
-    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"
-  } : {
-    name: "1o07vd-header",
-    styles: "background-color:var(--color-grey700);color:var(--color-grey300);border-radius:var(--border-radius) var(--border-radius) 0 0;padding:var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);display:flex;justify-content:space-between;align-items:center;label:header;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
-  },
-  buttonSvg: process.env.NODE_ENV === "production" ? {
-    name: "s8x62f",
-    styles: "svg{color:var(--color-grey300);}"
-  } : {
-    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",
-    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)"
-  } : {
-    name: "gdk9wh-code",
-    styles: "padding:var(--spacing-sm) var(--spacing-md);margin:0;border-radius:0 0 var(--border-radius) var(--border-radius);background-color:var(--color-grey800);color:var(--color-grey300);label:code;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
-  }
-};
-const CodeSnippet = _ref => {
-  let {
-    language,
-    buttons,
-    children
-  } = _ref;
+  // Manually add the clear icon click event listener to avoid reopening the datepicker when clearing the input
+  useEffect(() => {
+    if (allowClear && inputRef.current) {
+      var _input;
+      const clearIcon = (_input = inputRef.current.input) === null || _input === void 0 || (_input = _input.closest('[type="button"]')) === null || _input === void 0 ? void 0 : _input.querySelector(`.${classNamePrefix}-input-clear-icon`);
+      if (clearIcon !== fromClearRef.current) {
+        fromClearRef.current = clearIcon;
+        const clientEventListener = e => {
+          e.stopPropagation();
+          e.preventDefault();
+          handleClear();
+        };
+        clearIcon.addEventListener('click', clientEventListener);
+      }
+    }
+  }, [classNamePrefix, defaultTime, handleClear, allowClear]);
   const {
-    theme
-  } = useDesignSystemTheme();
-  return jsxs("div", {
-    css: snippetStyles.container,
-    style: {
-      ['--spacing-sm']: `${theme.spacing.sm}px`,
-      ['--spacing-md']: `${theme.spacing.md}px`,
-      ['--border-radius']: `${theme.general.borderRadiusBase}px`,
-      ['--color-grey700']: theme.colors.grey700,
-      ['--color-grey300']: theme.colors.grey300,
-      ['--color-grey800']: theme.colors.grey800
-    },
-    children: [jsxs("div", {
-      css: snippetStyles.header,
-      children: [jsx("span", {
-        children: language
-      }), jsx("div", {
-        css: snippetStyles.buttonSvg,
-        children: buttons
-      })]
-    }), jsx("pre", {
-      css: snippetStyles.code,
-      children: children
-    })]
+    classNames,
+    datePickerStyles
+  } = useMemo(() => ({
+    classNames: generateDatePickerClassNames(`${classNamePrefix}-datepicker`),
+    datePickerStyles: getDayPickerStyles(`${classNamePrefix}-datepicker`, theme)
+  }), [classNamePrefix, theme]);
+  const chevronLeftIconComp = props => jsx(ChevronLeftIcon, {
+    ...props
   });
-};
-var CodeSnippet$1 = CodeSnippet;
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const feedbackStyles = {
-  container: process.env.NODE_ENV === "production" ? {
-    name: "1laz9o6",
-    styles: "display:flex;justify-content:space-between;align-items:flex-end"
-  } : {
-    name: "1dbf7uj-container",
-    styles: "display:flex;justify-content:space-between;align-items:flex-end;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
-  },
-  feedbackPrompt: process.env.NODE_ENV === "production" ? {
-    name: "1hsyf68",
-    styles: "display:flex;flex-direction:column;gap:var(--spacing-sm)"
-  } : {
-    name: "1yi757f-feedbackPrompt",
-    styles: "display:flex;flex-direction:column;gap:var(--spacing-sm);label:feedbackPrompt;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
-  },
-  feedbackOptions: process.env.NODE_ENV === "production" ? {
-    name: "1s3radb",
-    styles: "display:flex;gap:var(--spacing-sm)"
-  } : {
-    name: "125q18r-feedbackOptions",
-    styles: "display:flex;gap:var(--spacing-sm);label:feedbackOptions;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
-  }
-};
-const Feedback = _ref => {
-  let {
-    onFeedback
-  } = _ref;
-  const [isVisible, setIsVisible] = useState(true);
-  const {
-    theme
-  } = useDesignSystemTheme();
-  if (!isVisible) {
-    return null;
-  }
-  return jsxs("div", {
-    css: feedbackStyles.container,
-    style: {
-      ['--spacing-sm']: `${theme.spacing.sm}px`,
-      ['--text-secondary']: theme.colors.textSecondary
-    },
-    children: [jsxs("div", {
-      css: feedbackStyles.feedbackPrompt,
-      children: [jsx(Typography.Text, {
-        style: {
-          color: theme.colors.textSecondary
-        },
-        children: "Was this response:"
-      }), 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');
-            setIsVisible(false);
+  const chevronRightIconComp = props => jsx(ChevronRightIcon, {
+    ...props
+  });
+  return jsx("div", {
+    className: `${classNamePrefix}-datepicker`,
+    css: /*#__PURE__*/css({
+      width,
+      minWidth,
+      maxWidth,
+      pointerEvents: restProps !== null && restProps !== void 0 && restProps.disabled ? 'none' : 'auto'
+    }, process.env.NODE_ENV === "production" ? "" : ";label:DatePicker;"),
+    ...wrapperProps,
+    children: jsxs(Root$3, {
+      componentId: "codegen_design-system_src_development_datepicker_datepicker.tsx_330",
+      open: isVisible,
+      onOpenChange: setIsVisible,
+      children: [jsx(Trigger, {
+        asChild: true,
+        disabled: restProps === null || restProps === void 0 ? void 0 : restProps.disabled,
+        role: "combobox",
+        children: jsxs("div", {
+          children: [jsx(Input, {
+            id: id,
+            ref: inputRef,
+            name: name,
+            validationState: validationState,
+            allowClear: allowClear,
+            placeholder: "Select Date",
+            "aria-label": includeTime ? 'Select Date and Time' : 'Select Date',
+            prefix: "Date:",
+            role: "textbox",
+            suffix: showTimeZone ? jsx("span", {
+              children: timezone
+            }) : undefined,
+            max: includeTime ? '9999-12-31T23:59' : '9999-12-31',
+            ...restProps,
+            css: /*#__PURE__*/css({
+              '*::-webkit-calendar-picker-indicator': {
+                display: 'none'
+              },
+              [`.${classNamePrefix}-input-prefix`]: {
+                ...(!(restProps !== null && restProps !== void 0 && restProps.disabled) && {
+                  color: `${theme.colors.textPrimary} !important`
+                })
+              },
+              [`&.${classNamePrefix}-input-affix-wrapper > *`]: {
+                height: theme.typography.lineHeightBase
+              },
+              ...(showTimeZone && {
+                [`.${classNamePrefix}-input-suffix`]: {
+                  display: 'inline-flex',
+                  flexDirection: 'row-reverse',
+                  gap: theme.spacing.sm,
+                  alignItems: 'center'
+                }
+              })
+            }, process.env.NODE_ENV === "production" ? "" : ";label:DatePicker;"),
+            type: includeTime ? 'datetime-local' : 'date',
+            onKeyDown: event => handleInputKeyDown(event, setIsVisible),
+            onChange: e => handleInputUpdate(new Date(e.target.value)),
+            value: date && isValid(date) ? format(date, format$1) : undefined
+          }), jsx("input", {
+            type: "hidden",
+            ref: ref,
+            value: date || ''
+          })]
+        })
+      }), jsxs(Content, {
+        align: "start",
+        css: datePickerStyles,
+        children: [jsx(DayPicker, {
+          initialFocus: true,
+          ...datePickerProps,
+          mode: mode,
+          selected: mode === 'range' ? selected : date,
+          onDayClick: handleDatePickerUpdate,
+          showOutsideDays: mode === 'range' ? false : true,
+          formatters: {
+            formatWeekdayName: date => format(date, 'iiiii', {
+              locale: datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.locale
+            })
           },
-          children: "Better"
-        }), jsx(Button$1, {
-          componentId: "codegen_design-system_src_development_chatui_feedback.tsx_66",
-          icon: jsx(FaceNeutralIcon, {}),
-          onClick: () => {
-            onFeedback('Same');
-            setIsVisible(false);
+          components: {
+            Day,
+            IconLeft: chevronLeftIconComp,
+            IconRight: chevronRightIconComp
           },
-          children: "Same"
-        }), jsx(Button$1, {
-          componentId: "codegen_design-system_src_development_chatui_feedback.tsx_75",
-          icon: jsx(FaceFrownIcon, {}),
-          onClick: () => {
-            onFeedback('Worse');
-            setIsVisible(false);
+          defaultMonth: date,
+          classNames: classNames
+        }), (quickActions === null || quickActions === void 0 ? void 0 : quickActions.length) && jsx("div", {
+          style: {
+            display: 'flex',
+            gap: theme.spacing.sm,
+            marginBottom: theme.spacing.md,
+            padding: `${theme.spacing.xs}px ${theme.spacing.xs}px 0`,
+            maxWidth: 225,
+            flexWrap: 'wrap'
           },
-          children: "Worse"
+          children: quickActions === null || quickActions === void 0 ? void 0 : quickActions.map((action, i) => jsx(Button$1, {
+            size: "small",
+            componentId: "codegen_design-system_src_design-system_datepicker_datepicker.tsx_281",
+            onClick: () => action.onClick ? action.onClick(action.value) : !Array.isArray(action.value) && handleDatePickerUpdate(action.value),
+            children: action.label
+          }, i))
+        }), includeTime && jsx(Input, {
+          componentId: "codegen_design-system_src_development_datepicker_datepicker.tsx_306",
+          type: "time",
+          "aria-label": "Time",
+          role: "textbox",
+          ...timeInputProps,
+          value: date && isValid(date) ? format(date, 'HH:mm') : undefined,
+          onChange: handleTimeUpdate,
+          css: /*#__PURE__*/css({
+            '*::-webkit-calendar-picker-indicator': {
+              position: 'absolute',
+              right: -8,
+              width: theme.general.iconSize,
+              height: theme.general.iconSize,
+              zIndex: theme.options.zIndexBase + 1,
+              color: 'transparent',
+              background: 'transparent'
+            },
+            [`.${classNamePrefix}-input-suffix`]: {
+              position: 'absolute',
+              right: 12,
+              top: 8
+            }
+          }, process.env.NODE_ENV === "production" ? "" : ";label:DatePicker;"),
+          suffix: jsx(ClockIcon, {}),
+          disabled: timeInputProps === null || timeInputProps === void 0 ? void 0 : timeInputProps.disabled
+        }), mode === 'range' && includeTime && onOkPress && jsx("div", {
+          css: /*#__PURE__*/css({
+            paddingTop: theme.spacing.md,
+            display: 'flex',
+            justifyContent: 'flex-end'
+          }, process.env.NODE_ENV === "production" ? "" : ";label:DatePicker;"),
+          children: jsx(Button$1, {
+            "aria-label": "Open end date picker",
+            type: "primary",
+            componentId: "datepicker-dubois-ok-button",
+            onClick: onOkPress,
+            children: okButtonLabel !== null && okButtonLabel !== void 0 ? okButtonLabel : 'Ok'
+          })
         })]
       })]
-    }), jsx(Button$1, {
-      componentId: "codegen_design-system_src_development_chatui_feedback.tsx_86",
-      icon: jsx(CloseIcon, {}),
-      onClick: () => setIsVisible(false)
-    })]
+    })
   });
+});
+const getRangeQuickActionsBasic = _ref2 => {
+  let {
+    today,
+    yesterday,
+    lastWeek
+  } = _ref2;
+  const todayStart = startOfToday();
+  const weekStart = startOfWeek(todayStart);
+  return [{
+    label: 'Today',
+    value: [todayStart, endOfToday()],
+    ...today
+  }, {
+    label: 'Yesterday',
+    value: [startOfYesterday(), endOfYesterday()],
+    ...yesterday
+  }, {
+    label: 'Last week',
+    value: [sub(weekStart, {
+      days: 7
+    }), sub(weekStart, {
+      days: 1
+    })],
+    ...lastWeek
+  }];
 };
-var Feedback$1 = Feedback;
-
-const messageStyles = {
-  container: /*#__PURE__*/css({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 'var(--spacing-sm)',
-    paddingTop: 'var(--spacing-md)',
-    paddingRight: 'var(--spacing-sm)',
-    paddingBottom: 'var(--spacing-md)',
-    paddingLeft: 'calc(var(--spacing-md) * 2)',
-    backgroundColor: 'var(--background)',
-    borderBottom: `1px solid var(--border-decorative)`
-  }, process.env.NODE_ENV === "production" ? "" : ";label:container;")
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "stj4fv",
+  styles: "*::-webkit-calendar-picker-indicator{display:none;}border-top-right-radius:0;border-bottom-right-radius:0"
+} : {
+  name: "p55v8c-RangePicker",
+  styles: "*::-webkit-calendar-picker-indicator{display:none;}border-top-right-radius:0;border-bottom-right-radius:0;label:RangePicker;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-const Message = _ref => {
-  let {
-    isActiveUser,
-    children
-  } = _ref;
+const RangePicker = props => {
+  var _startDatePickerProps6, _endDatePickerProps$d5, _range$from;
   const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx("div", {
-    css: messageStyles.container,
-    style: {
-      ['--spacing-sm']: `${theme.spacing.sm}px`,
-      ['--spacing-md']: `${theme.spacing.md}px`,
-      ['--background']: isActiveUser ? theme.colors.backgroundPrimary : theme.colors.backgroundSecondary,
-      ['--border-decorative']: theme.colors.borderDecorative
-    },
-    children: children
+    id,
+    onChange,
+    startDatePickerProps,
+    endDatePickerProps,
+    includeTime,
+    allowClear,
+    minWidth,
+    maxWidth,
+    width,
+    disabled,
+    quickActions,
+    wrapperProps
+  } = props;
+  const [range, setRange] = useState({
+    from: startDatePickerProps === null || startDatePickerProps === void 0 ? void 0 : startDatePickerProps.value,
+    to: endDatePickerProps === null || endDatePickerProps === void 0 ? void 0 : endDatePickerProps.value
   });
-};
-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
+    classNamePrefix
   } = useDesignSystemTheme();
-  const handleClick = e => {
-    var _props$onClick;
-    setShowCheck(true);
-    (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, e);
-  };
-  if (props.children) {
-    throw new Error('MessageActionButton: Children not supported; use as icon-only button.');
-  }
+
+  // Focus is lost when the popover is closed, we need to set the focus back to the input that opened the popover manually.
+  const [isFromVisible, setIsFromVisible] = useState(false);
+  const [isToVisible, setIsToVisible] = useState(false);
+  const [isRangeInputFocused, setIsRangeInputFocused] = useState(false);
+  const fromInputRef = useRef(null);
+  const toInputRef = useRef(null);
+  useImperativeHandle(startDatePickerProps === null || startDatePickerProps === void 0 ? void 0 : startDatePickerProps.ref, () => fromInputRef.current);
+  useImperativeHandle(endDatePickerProps === null || endDatePickerProps === void 0 ? void 0 : endDatePickerProps.ref, () => toInputRef.current);
+  const fromInputRefVisible = useRef(isFromVisible);
+  const toInputRefVisible = useRef(isToVisible);
+  useEffect(() => {
+    if (!isFromVisible && fromInputRefVisible.current) {
+      var _fromInputRef$current;
+      (_fromInputRef$current = fromInputRef.current) === null || _fromInputRef$current === void 0 || _fromInputRef$current.focus();
+    }
+    fromInputRefVisible.current = isFromVisible;
+  }, [isFromVisible]);
+  useEffect(() => {
+    if (!isToVisible && toInputRefVisible.current) {
+      var _toInputRef$current;
+      (_toInputRef$current = toInputRef.current) === null || _toInputRef$current === void 0 || _toInputRef$current.focus();
+    }
+    toInputRefVisible.current = isToVisible;
+  }, [isToVisible]);
+  const checkIfDateTimeIsDisabled = useCallback(function (date) {
+    let isStart = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    const dateToCompareTo = isStart ? range === null || range === void 0 ? void 0 : range.to : range === null || range === void 0 ? void 0 : range.from;
+    if (date && dateToCompareTo) {
+      return isStart ? isAfter(date, dateToCompareTo) : isBefore(date, dateToCompareTo);
+    }
+    return false;
+  }, [range]);
+  useEffect(() => {
+    setRange(prevValue => ({
+      from: startDatePickerProps === null || startDatePickerProps === void 0 ? void 0 : startDatePickerProps.value,
+      to: prevValue === null || prevValue === void 0 ? void 0 : prevValue.to
+    }));
+  }, [startDatePickerProps === null || startDatePickerProps === void 0 ? void 0 : startDatePickerProps.value]);
   useEffect(() => {
-    let timeoutId;
-    if (showCheck) {
-      timeoutId = setTimeout(() => {
-        setShowCheck(false);
-      }, 750);
+    setRange(prevValue => ({
+      from: prevValue === null || prevValue === void 0 ? void 0 : prevValue.from,
+      to: endDatePickerProps === null || endDatePickerProps === void 0 ? void 0 : endDatePickerProps.value
+    }));
+  }, [endDatePickerProps === null || endDatePickerProps === void 0 ? void 0 : endDatePickerProps.value]);
+  const quickActionsWithHandler = useMemo(() => {
+    if (quickActions) {
+      return quickActions.map(action => {
+        if (Array.isArray(action.value)) {
+          return {
+            ...action,
+            onClick: value => {
+              var _action$onClick;
+              setRange({
+                from: value[0],
+                to: value[1]
+              });
+              onChange === null || onChange === void 0 || onChange({
+                from: value[0],
+                to: value[1]
+              });
+              (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action, value);
+              setIsFromVisible(false);
+              setIsToVisible(false);
+            }
+          };
+        }
+        return action;
+      });
     }
-    return () => {
-      clearTimeout(timeoutId);
+    return quickActions;
+  }, [quickActions, onChange]);
+  const handleUpdateDate = useCallback((e, isStart) => {
+    const date = e.target.value;
+    const newRange = isStart ? {
+      from: date,
+      to: range === null || range === void 0 ? void 0 : range.to
+    } : {
+      from: range === null || range === void 0 ? void 0 : range.from,
+      to: date
     };
-  }, [showCheck]);
-  return jsxs("span", {
-    css: buttonStyles.container,
-    style: {
-      ['--checkmark-color']: theme.colors.green500
-    },
-    children: [jsx(Button$1, {
-      size: "small",
-      ...props,
-      onClick: handleClick,
-      css: /*#__PURE__*/css({
-        svg: {
-          transition: showCheck ? 'none' : 'opacity 350ms',
-          opacity: showCheck ? '0' : '1'
+    if (!includeTime) {
+      if (isStart) {
+        setIsFromVisible(false);
+        if (e.updateLocation === 'calendar') {
+          setIsToVisible(true);
         }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:MessageActionButton;")
-    }), jsx(CheckIcon, {
-      css: buttonStyles.checkIcon,
-      style: {
-        transition: showCheck ? 'none' : 'opacity 350ms',
-        opacity: showCheck ? '1' : '0'
+      } else {
+        setIsToVisible(false);
       }
-    })]
-  });
-};
-var MessageActionButton$1 = MessageActionButton;
+    }
+    if (isStart) {
+      var _startDatePickerProps;
+      startDatePickerProps === null || startDatePickerProps === void 0 || (_startDatePickerProps = startDatePickerProps.onChange) === null || _startDatePickerProps === void 0 || _startDatePickerProps.call(startDatePickerProps, e);
+    } else {
+      var _endDatePickerProps$o;
+      endDatePickerProps === null || endDatePickerProps === void 0 || (_endDatePickerProps$o = endDatePickerProps.onChange) === null || _endDatePickerProps$o === void 0 || _endDatePickerProps$o.call(endDatePickerProps, e);
+    }
+    setRange(newRange);
+    onChange === null || onChange === void 0 || onChange(newRange);
+  }, [onChange, includeTime, startDatePickerProps, endDatePickerProps, range]);
 
-const MessageBody = _ref => {
-  let {
-    children
-  } = _ref;
-  const {
-    getPrefixedClassName
-  } = useDesignSystemTheme();
-  const typographyClassname = getPrefixedClassName('typography');
-  return jsx("div", {
+  // Use useMemo to calculate disabled dates
+  const disabledDates = useMemo(() => {
+    var _startDatePickerProps2, _endDatePickerProps$d;
+    let startDisabledFromProps, endDisabledFromProps;
+    if (startDatePickerProps !== null && startDatePickerProps !== void 0 && (_startDatePickerProps2 = startDatePickerProps.datePickerProps) !== null && _startDatePickerProps2 !== void 0 && _startDatePickerProps2.disabled) {
+      var _startDatePickerProps3, _startDatePickerProps4, _startDatePickerProps5;
+      startDisabledFromProps = Array.isArray(startDatePickerProps === null || startDatePickerProps === void 0 || (_startDatePickerProps3 = startDatePickerProps.datePickerProps) === null || _startDatePickerProps3 === void 0 ? void 0 : _startDatePickerProps3.disabled) ? startDatePickerProps === null || startDatePickerProps === void 0 || (_startDatePickerProps4 = startDatePickerProps.datePickerProps) === null || _startDatePickerProps4 === void 0 ? void 0 : _startDatePickerProps4.disabled : [startDatePickerProps === null || startDatePickerProps === void 0 || (_startDatePickerProps5 = startDatePickerProps.datePickerProps) === null || _startDatePickerProps5 === void 0 ? void 0 : _startDatePickerProps5.disabled];
+    }
+    const startDisabled = [{
+      after: range === null || range === void 0 ? void 0 : range.to
+    }, ...(startDisabledFromProps ? startDisabledFromProps : [])].filter(Boolean);
+    if (endDatePickerProps !== null && endDatePickerProps !== void 0 && (_endDatePickerProps$d = endDatePickerProps.datePickerProps) !== null && _endDatePickerProps$d !== void 0 && _endDatePickerProps$d.disabled) {
+      var _endDatePickerProps$d2, _endDatePickerProps$d3, _endDatePickerProps$d4;
+      endDisabledFromProps = Array.isArray(endDatePickerProps === null || endDatePickerProps === void 0 || (_endDatePickerProps$d2 = endDatePickerProps.datePickerProps) === null || _endDatePickerProps$d2 === void 0 ? void 0 : _endDatePickerProps$d2.disabled) ? endDatePickerProps === null || endDatePickerProps === void 0 || (_endDatePickerProps$d3 = endDatePickerProps.datePickerProps) === null || _endDatePickerProps$d3 === void 0 ? void 0 : _endDatePickerProps$d3.disabled : [endDatePickerProps === null || endDatePickerProps === void 0 || (_endDatePickerProps$d4 = endDatePickerProps.datePickerProps) === null || _endDatePickerProps$d4 === void 0 ? void 0 : _endDatePickerProps$d4.disabled];
+    }
+    const endDisabled = [{
+      before: range === null || range === void 0 ? void 0 : range.from
+    }, ...(endDisabledFromProps ? endDisabledFromProps : [])].filter(Boolean);
+    return {
+      startDisabled,
+      endDisabled
+    };
+  }, [range === null || range === void 0 ? void 0 : range.from, range === null || range === void 0 ? void 0 : range.to, startDatePickerProps === null || startDatePickerProps === void 0 || (_startDatePickerProps6 = startDatePickerProps.datePickerProps) === null || _startDatePickerProps6 === void 0 ? void 0 : _startDatePickerProps6.disabled, endDatePickerProps === null || endDatePickerProps === void 0 || (_endDatePickerProps$d5 = endDatePickerProps.datePickerProps) === null || _endDatePickerProps$d5 === void 0 ? void 0 : _endDatePickerProps$d5.disabled]);
+  const openEndDatePicker = () => {
+    setIsFromVisible(false);
+    setIsToVisible(true);
+  };
+  const closeEndDatePicker = () => {
+    setIsToVisible(false);
+  };
+  const handleTimePickerKeyPress = e => {
+    var _props$startDatePicke, _props$startDatePicke2;
+    if (e.key === 'Enter') {
+      openEndDatePicker();
+    }
+    (_props$startDatePicke = props.startDatePickerProps) === null || _props$startDatePicke === void 0 || (_props$startDatePicke = _props$startDatePicke.timeInputProps) === null || _props$startDatePicke === void 0 || (_props$startDatePicke2 = _props$startDatePicke.onKeyDown) === null || _props$startDatePicke2 === void 0 || _props$startDatePicke2.call(_props$startDatePicke, e);
+  };
+  return jsxs("div", {
+    className: `${classNamePrefix}-rangepicker`,
+    ...wrapperProps,
+    "data-focused": isRangeInputFocused,
     css: /*#__PURE__*/css({
-      [`& .${typographyClassname}:last-of-type`]: {
-        marginBottom: 0
+      display: 'flex',
+      alignItems: 'center',
+      minWidth,
+      maxWidth,
+      width
+    }, process.env.NODE_ENV === "production" ? "" : ";label:RangePicker;"),
+    children: [jsx(DatePicker, {
+      quickActions: quickActionsWithHandler,
+      prefix: "Start:",
+      open: isFromVisible,
+      onOpenChange: setIsFromVisible,
+      okButtonLabel: "Next",
+      ...startDatePickerProps,
+      id: id,
+      ref: fromInputRef,
+      disabled: disabled || (startDatePickerProps === null || startDatePickerProps === void 0 ? void 0 : startDatePickerProps.disabled),
+      onChange: e => handleUpdateDate(e, true),
+      includeTime: includeTime,
+      allowClear: allowClear,
+      datePickerProps: {
+        ...(startDatePickerProps === null || startDatePickerProps === void 0 ? void 0 : startDatePickerProps.datePickerProps),
+        disabled: disabledDates.startDisabled
+      },
+      timeInputProps: {
+        onKeyDown: handleTimePickerKeyPress
       }
-    }, process.env.NODE_ENV === "production" ? "" : ";label:MessageBody;"),
-    children: children
-  });
-};
-var MessageBody$1 = MessageBody;
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const headerStyles = {
-  container: process.env.NODE_ENV === "production" ? {
-    name: "30lgt6",
-    styles: "display:flex;justify-content:space-between;align-items:center;position:relative"
-  } : {
-    name: "10tss9b-container",
-    styles: "display:flex;justify-content:space-between;align-items:center;position:relative;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
-  },
-  leftContent: process.env.NODE_ENV === "production" ? {
-    name: "sz7nmf",
-    styles: "display:flex;align-items:center;gap:var(--spacing-sm)"
-  } : {
-    name: "11wiry4-leftContent",
-    styles: "display:flex;align-items:center;gap:var(--spacing-sm);label:leftContent;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
-  },
-  rightContent: process.env.NODE_ENV === "production" ? {
-    name: "s5xdrg",
-    styles: "display:flex;align-items:center"
-  } : {
-    name: "6oh64j-rightContent",
-    styles: "display:flex;align-items:center;label:rightContent;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
-  },
-  avatar: /*#__PURE__*/css({
-    position: 'absolute',
-    left: -22,
-    top: 2,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    width: 'var(--spacing-md)',
-    height: 'var(--spacing-md)',
-    borderRadius: '50%'
-  }, process.env.NODE_ENV === "production" ? "" : ";label:avatar;")
-};
-const avatarDefaultBackgroundImage = 'linear-gradient(180deg, #FFD983 0%, #FFB800 100%)';
-const MessageHeader = _ref => {
-  let {
-    userName,
-    customHeaderIcon,
-    avatarURL,
-    leftContent,
-    rightContent
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsxs("div", {
-    css: headerStyles.container,
-    style: {
-      ['--spacing-sm']: `${theme.spacing.sm}px`,
-      ['--spacing-md']: `${theme.spacing.md}px`
-    },
-    children: [jsxs("div", {
-      css: headerStyles.leftContent,
-      children: [customHeaderIcon ? customHeaderIcon : jsx("div", {
-        css: headerStyles.avatar,
+      // @ts-expect-error - DatePickerProps does not have a mode property in the public API but is needed for this use case
+      ,
+      mode: "range",
+      selected: range,
+      value: range === null || range === void 0 ? void 0 : range.from,
+      dateTimeDisabledFn: date => checkIfDateTimeIsDisabled(date, true),
+      onFocus: e => {
+        var _startDatePickerProps7;
+        setIsRangeInputFocused(true);
+        startDatePickerProps === null || startDatePickerProps === void 0 || (_startDatePickerProps7 = startDatePickerProps.onFocus) === null || _startDatePickerProps7 === void 0 || _startDatePickerProps7.call(startDatePickerProps, e);
+      },
+      onBlur: e => {
+        var _startDatePickerProps8;
+        setIsRangeInputFocused(false);
+        startDatePickerProps === null || startDatePickerProps === void 0 || (_startDatePickerProps8 = startDatePickerProps.onBlur) === null || _startDatePickerProps8 === void 0 || _startDatePickerProps8.call(startDatePickerProps, e);
+      },
+      css: _ref3,
+      wrapperProps: {
+        style: {
+          width: '50%'
+        }
+      },
+      onOkPress: openEndDatePicker
+    }), jsx(DatePicker, {
+      quickActions: quickActionsWithHandler,
+      prefix: "End:",
+      min: range === null || range === void 0 || (_range$from = range.from) === null || _range$from === void 0 ? void 0 : _range$from.toString(),
+      okButtonLabel: "Close",
+      ...endDatePickerProps,
+      ref: toInputRef,
+      disabled: disabled || (endDatePickerProps === null || endDatePickerProps === void 0 ? void 0 : endDatePickerProps.disabled),
+      onChange: e => handleUpdateDate(e, false),
+      includeTime: includeTime,
+      open: isToVisible,
+      onOpenChange: setIsToVisible,
+      allowClear: allowClear,
+      datePickerProps: {
+        ...(endDatePickerProps === null || endDatePickerProps === void 0 ? void 0 : endDatePickerProps.datePickerProps),
+        disabled: disabledDates.endDisabled
+      }
+      // @ts-expect-error - DatePickerProps does not have a mode property in the public API but is needed for this use case
+      ,
+      mode: "range",
+      selected: range,
+      value: range === null || range === void 0 ? void 0 : range.to,
+      dateTimeDisabledFn: date => checkIfDateTimeIsDisabled(date, false),
+      onFocus: e => {
+        var _startDatePickerProps9;
+        setIsRangeInputFocused(true);
+        startDatePickerProps === null || startDatePickerProps === void 0 || (_startDatePickerProps9 = startDatePickerProps.onFocus) === null || _startDatePickerProps9 === void 0 || _startDatePickerProps9.call(startDatePickerProps, e);
+      },
+      onBlur: e => {
+        var _startDatePickerProps10;
+        setIsRangeInputFocused(false);
+        startDatePickerProps === null || startDatePickerProps === void 0 || (_startDatePickerProps10 = startDatePickerProps.onBlur) === null || _startDatePickerProps10 === void 0 || _startDatePickerProps10.call(startDatePickerProps, e);
+      },
+      css: /*#__PURE__*/css({
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        left: -1
+      }, process.env.NODE_ENV === "production" ? "" : ";label:RangePicker;"),
+      wrapperProps: {
         style: {
-          backgroundImage: avatarURL ? `url(${avatarURL}), ${avatarDefaultBackgroundImage}` : avatarDefaultBackgroundImage
+          width: '50%'
         }
-      }), jsx(Typography.Text, {
-        bold: true,
-        children: userName
-      }), leftContent]
-    }), jsx("div", {
-      css: headerStyles.rightContent,
-      children: rightContent
+      },
+      onOkPress: closeEndDatePicker
     })]
   });
 };
-var MessageHeader$1 = MessageHeader;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const paginationStyles = {
-  container: process.env.NODE_ENV === "production" ? {
-    name: "1lyitb8",
-    styles: "display:flex;align-items:center;justify-items:center;gap:var(--spacing-sm)"
-  } : {
-    name: "tx606a-container",
-    styles: "display:flex;align-items:center;justify-items:center;gap:var(--spacing-sm);label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
-  },
-  button: process.env.NODE_ENV === "production" ? {
-    name: "waw0s4",
-    styles: "border:none;background-color:transparent;padding:0;display:flex;height:var(--spacing-md);align-items:center"
-  } : {
-    name: "18u25xw-button",
-    styles: "border:none;background-color:transparent;padding:0;display:flex;height:var(--spacing-md);align-items:center;label:button;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
-  }
-};
-const MessagePagination = _ref => {
+const RadioGroupContext = /*#__PURE__*/React__default.createContext('medium');
+const Root$2 = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) => {
   let {
-    onPrevious,
-    onNext,
-    current,
-    total
+    size,
+    componentId,
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnValueChange],
+    valueHasNoPii,
+    onValueChange,
+    ...props
   } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsxs("div", {
-    css: paginationStyles.container,
-    style: {
-      ['--spacing-sm']: `${theme.spacing.sm}px`,
-      ['--spacing-md']: `${theme.spacing.md}px`
-    },
-    children: [jsx("button", {
-      css: paginationStyles.button,
-      onClick: onPrevious,
-      style: {
-        color: current === 1 ? theme.colors.actionDisabledText : theme.colors.textSecondary,
-        cursor: current === 1 ? 'arrow' : 'pointer'
-      },
-      children: jsx(ChevronLeftIcon, {})
-    }), jsx(Typography.Text, {
-      style: {
-        color: theme.colors.textSecondary
-      },
-      children: `${current}/${total}`
-    }), jsx("button", {
-      css: paginationStyles.button,
-      onClick: onNext,
-      style: {
-        color: current === total ? theme.colors.actionDisabledText : theme.colors.textSecondary,
-        cursor: current === total ? 'arrow' : 'pointer'
-      },
-      children: jsx(ChevronRightIcon, {})
-    })]
+  const contextValue = React__default.useMemo(() => size !== null && size !== void 0 ? size : 'medium', [size]);
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.PillControl,
+    componentId,
+    analyticsEvents: memoizedAnalyticsEvents,
+    valueHasNoPii
   });
-};
-var MessagePagination$1 = MessagePagination;
-
-const ChatUI = {
-  MessageActionButton: MessageActionButton$1,
-  MessageHeader: MessageHeader$1,
-  MessageBody: MessageBody$1,
-  MessagePagination: MessagePagination$1,
-  Message: Message$1,
-  Feedback: Feedback$1,
-  CodeSnippet: CodeSnippet$1,
-  ChatInput: ChatInput$1
-};
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var _ref = process.env.NODE_ENV === "production" ? {
-  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$1 = () => {
-  return _ref;
-};
-const Root$2 = /*#__PURE__*/forwardRef((props, ref) => {
-  return jsx(RadixSlider.Root, {
-    css: getRootStyles$1(),
-    ...props,
-    ref: ref
+  const onValueChangeWrapper = useCallback(value => {
+    var _eventContext$onValue;
+    (_eventContext$onValue = eventContext.onValueChange) === null || _eventContext$onValue === void 0 || _eventContext$onValue.call(eventContext, value);
+    onValueChange === null || onValueChange === void 0 || onValueChange(value);
+  }, [eventContext, onValueChange]);
+  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;"),
+      onValueChange: onValueChangeWrapper,
+      ...props,
+      ref: forwardedRef
+    })
   });
 });
-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 Item = /*#__PURE__*/React__default.forwardRef((_ref2, forwardedRef) => {
+  let {
+    children,
+    icon,
+    ...props
+  } = _ref2;
+  const size = React__default.useContext(RadioGroupContext);
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(RadixSlider.Track, {
-    css: getTrackStyles(theme),
+  const iconClass = 'pill-control-icon';
+  const css$1 = useRadioGroupItemStyles(size, iconClass);
+  return jsxs(RadioGroupItem, {
+    css: css$1,
     ...props,
-    ref: ref
+    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 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 useRadioGroupItemStyles = (size, iconClass) => {
   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$2,
-  Thumb: Thumb,
-  Track: Track
-});
-
-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 Root$1 = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(RadixToolbar.Root, {
-    css: getRootStyles(theme),
-    ...props,
-    ref: ref
-  });
-});
-const Button = /*#__PURE__*/forwardRef((props, ref) => {
-  return jsx(RadixToolbar.Button, {
-    ...props,
-    ref: ref
-  });
-});
-const getSeparatorStyles = theme => {
-  return /*#__PURE__*/css({
-    alignSelf: 'stretch',
-    backgroundColor: theme.colors.borderDecorative,
-    width: 1
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getSeparatorStyles;");
-};
-const Separator = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(RadixToolbar.Separator, {
-    css: getSeparatorStyles(theme),
-    ...props,
-    ref: ref
-  });
-});
-const Link = /*#__PURE__*/forwardRef((props, ref) => {
-  return jsx(RadixToolbar.Link, {
-    ...props,
-    ref: ref
-  });
-});
-const ToggleGroup = /*#__PURE__*/forwardRef((props, ref) => {
-  return jsx(RadixToolbar.ToggleGroup, {
-    ...props,
-    ref: ref
-  });
-});
-const getToggleItemStyles = theme => {
-  return /*#__PURE__*/css({
+    useNewShadows
+  } = useDesignSystemSafexFlags();
+  return {
+    textOverflow: 'ellipsis',
+    ...(useNewShadows ? {
+      boxShadow: theme.shadows.xs
+    } : {}),
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    appearance: 'none',
+    textDecoration: 'none',
     background: 'none',
-    color: theme.colors.textPrimary,
-    border: '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,
+    fontSize: theme.typography.fontSizeBase,
+    borderRadius: theme.spacing.md,
+    transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out',
+    [`& > .${iconClass}`]: {
+      color: theme.colors.textSecondary,
+      ...(size === 'large' ? {
+        backgroundColor: theme.colors.tagDefault,
+        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': {
-      color: theme.colors.actionDefaultTextHover
+      backgroundColor: theme.colors.actionDefaultBackgroundHover,
+      borderColor: theme.colors.actionLinkHover,
+      color: theme.colors.actionDefaultTextHover,
+      [`& > .${iconClass}`]: {
+        color: 'inherit',
+        ...(size === 'large' ? {
+          backgroundColor: theme.colors.actionIconBackgroundHover
+        } : {})
+      }
     },
-    '&[data-state="on"]': {
-      color: theme.colors.actionDefaultTextPress
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getToggleItemStyles;");
+    '&: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
+    } : {})
+  };
 };
-const ToggleItem = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(RadixToolbar.ToggleItem, {
-    css: getToggleItemStyles(theme),
-    ...props,
-    ref: ref
-  });
-});
 
-var Toolbar = /*#__PURE__*/Object.freeze({
+var PillControl = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Button: Button,
-  Link: Link,
-  Root: Root$1,
-  Separator: Separator,
-  ToggleGroup: ToggleGroup,
-  ToggleItem: ToggleItem
+  Item: Item,
+  Root: Root$2
 });
 
 const PreviewCard = _ref => {
@@ -928,86 +1123,153 @@ const PreviewCard = _ref => {
     icon,
     title,
     subtitle,
+    titleActions,
     children,
     startActions,
     endActions,
     image,
     onClick,
+    size = 'default',
     dangerouslyAppendEmotionCSS,
+    componentId,
+    analyticsEvents = [],
+    disabled,
+    selected,
     ...props
   } = _ref;
-  const styles = useResultCardStyles({
-    onClick
+  const styles = usePreviewCardStyles({
+    onClick,
+    size,
+    disabled
   });
   const tabIndex = onClick ? 0 : undefined;
   const role = onClick ? 'button' : undefined;
+  const showFooter = startActions || endActions;
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.PreviewCard,
+    componentId,
+    analyticsEvents: memoizedAnalyticsEvents
+  });
+  const onClickWrapper = useCallback(e => {
+    if (onClick) {
+      eventContext.onClick(e);
+      onClick(e);
+    }
+  }, [eventContext, onClick]);
   return jsxs("div", {
+    ...addDebugOutlineIfEnabled(),
     css: [styles['container'], dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:PreviewCard;"],
     tabIndex: tabIndex,
-    onClick: onClick,
+    onClick: onClickWrapper,
+    onKeyDown: e => {
+      if (!onClick || disabled) {
+        return;
+      }
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onClickWrapper(e);
+      }
+    },
     role: role,
+    "aria-disabled": disabled,
+    "aria-pressed": selected,
     ...props,
     children: [image && jsx("div", {
+      css: styles['image'],
       children: image
     }), jsxs("div", {
       css: styles['header'],
       children: [icon && jsx("div", {
         children: icon
       }), jsxs("div", {
+        css: styles['titleWrapper'],
         children: [title && jsx("div", {
           css: styles['title'],
           children: title
         }), subtitle && jsx("div", {
+          css: styles['subTitle'],
           children: subtitle
         })]
+      }), titleActions && jsx("div", {
+        children: titleActions
       })]
-    }), jsx("div", {
+    }), children && jsx("div", {
+      css: styles['childrenWrapper'],
       children: children
-    }), jsxs("div", {
+    }), showFooter && jsxs("div", {
       css: styles['footer'],
       children: [jsx("div", {
+        css: styles['action'],
         children: startActions
       }), jsx("div", {
+        css: styles['action'],
         children: endActions
       })]
     })]
   });
 };
-const useResultCardStyles = _ref2 => {
+const usePreviewCardStyles = _ref2 => {
   let {
-    onClick
+    onClick,
+    size,
+    disabled
   } = _ref2;
   const {
     theme
   } = useDesignSystemTheme();
+  const {
+    useNewShadows
+  } = useDesignSystemSafexFlags();
   const isInteractive = onClick !== undefined;
   return {
     container: {
-      borderRadius: theme.borders.borderRadiusMd,
+      borderRadius: theme.legacyBorders.borderRadiusLg,
       border: `1px solid ${theme.colors.border}`,
-      padding: theme.spacing.md,
+      padding: size === 'large' ? theme.spacing.lg : theme.spacing.md,
       color: theme.colors.textSecondary,
       display: 'flex',
       flexDirection: 'column',
-      gap: theme.spacing.sm,
+      justifyContent: 'space-between',
+      gap: size === 'large' ? theme.spacing.md : theme.spacing.sm,
+      ...(useNewShadows ? {
+        boxShadow: theme.shadows.sm
+      } : {}),
       cursor: isInteractive ? 'pointer' : 'default',
       ...(isInteractive && {
+        '&[aria-disabled="true"]': {
+          pointerEvents: 'none',
+          backgroundColor: theme.colors.actionDisabledBackground,
+          borderColor: theme.colors.actionDisabledBorder,
+          color: theme.colors.actionDisabledText
+        },
         '&:hover, &:focus-within': {
-          background: theme.colors.actionTertiaryBackgroundHover
+          boxShadow: useNewShadows ? theme.shadows.md : theme.general.shadowLow
         },
         '&:active': {
-          background: theme.colors.actionTertiaryBackgroundPress
+          background: theme.colors.actionTertiaryBackgroundPress,
+          borderColor: theme.colors.actionDefaultBorderHover,
+          boxShadow: useNewShadows ? theme.shadows.md : theme.general.shadowLow
         },
-        '&:focus': {
+        '&:focus, &[aria-pressed="true"]': {
           outlineColor: theme.colors.actionPrimaryBackgroundDefault,
           outlineWidth: 2,
           outlineOffset: -2,
           outlineStyle: 'solid',
-          boxShadow: 'none',
-          borderColor: 'transparent'
+          boxShadow: useNewShadows ? theme.shadows.md : theme.general.shadowLow,
+          borderColor: theme.colors.actionDefaultBorderHover
+        },
+        '&:active:not(:focus):not(:focus-within)': {
+          background: 'transparent',
+          borderColor: theme.colors.border
         }
       })
     },
+    image: {
+      '& > *': {
+        borderRadius: theme.legacyBorders.borderRadiusMd
+      }
+    },
     header: {
       display: 'flex',
       alignItems: 'center',
@@ -1015,174 +1277,542 @@ const useResultCardStyles = _ref2 => {
     },
     title: {
       fontWeight: theme.typography.typographyBoldFontWeight,
-      color: theme.colors.textPrimary
+      color: disabled ? theme.colors.actionDisabledText : theme.colors.textPrimary,
+      lineHeight: theme.typography.lineHeightSm
+    },
+    subTitle: {
+      lineHeight: theme.typography.lineHeightSm
+    },
+    titleWrapper: {
+      flexGrow: 1,
+      overflow: 'hidden'
+    },
+    childrenWrapper: {
+      flexGrow: 1
     },
     footer: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center'
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    },
+    action: {
+      overflow: 'hidden',
+      // to ensure focus ring is rendered
+      margin: theme.spacing.md * -1,
+      padding: theme.spacing.md
     }
   };
 };
 
-const RadioGroupContext = /*#__PURE__*/React__default.createContext('medium');
-const Root = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) => {
+const progressContextDefaults = {
+  progress: 0
+};
+const ProgressContext = /*#__PURE__*/createContext(progressContextDefaults);
+const ProgressContextProvider = _ref => {
   let {
-    size,
-    ...props
+    children,
+    value
   } = _ref;
+  return jsx(ProgressContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+const getProgressRootStyles = (theme, _ref) => {
+  let {
+    minWidth,
+    maxWidth
+  } = _ref;
+  const styles = {
+    position: 'relative',
+    overflow: 'hidden',
+    backgroundColor: theme.colors.progressTrack,
+    height: theme.spacing.sm,
+    width: '100%',
+    borderRadius: theme.spacing.xs,
+    ...(minWidth && {
+      minWidth
+    }),
+    ...(maxWidth && {
+      maxWidth
+    }),
+    /* Fix overflow clipping in Safari */
+    /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
+    transform: 'translateZ(0)'
+  };
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getProgressRootStyles;");
+};
+const Root$1 = props => {
+  const {
+    children,
+    value,
+    minWidth,
+    maxWidth,
+    ...restProps
+  } = props;
   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
+  return jsx(ProgressContextProvider, {
+    value: {
+      progress: value
+    },
+    children: jsx(Progress$1.Root, {
+      value: value,
+      ...restProps,
+      css: getProgressRootStyles(theme, {
+        minWidth,
+        maxWidth
+      }),
+      children: children
     })
   });
-});
-const Item = /*#__PURE__*/React__default.forwardRef((_ref2, forwardedRef) => {
-  let {
-    children,
-    icon,
+};
+const getProgressIndicatorStyles = theme => {
+  const styles = {
+    backgroundColor: theme.colors.progressFill,
+    height: '100%',
+    width: '100%',
+    transition: 'transform 300ms linear',
+    borderRadius: theme.spacing.xs
+  };
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getProgressIndicatorStyles;");
+};
+const Indicator = props => {
+  const {
+    progress
+  } = React__default.useContext(ProgressContext);
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(Progress$1.Indicator, {
+    css: getProgressIndicatorStyles(theme),
+    style: {
+      transform: `translateX(-${100 - (progress !== null && progress !== void 0 ? progress : 100)}%)`
+    },
     ...props
-  } = _ref2;
-  const size = React__default.useContext(RadioGroupContext);
+  });
+};
+
+var Progress = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Indicator: Indicator,
+  Root: Root$1
+});
+
+const getRootStyles = (theme, useNewShadows) => {
+  return /*#__PURE__*/css({
+    alignItems: 'center',
+    backgroundColor: theme.colors.backgroundSecondary,
+    border: `1px solid ${theme.colors.borderDecorative}`,
+    borderRadius: theme.legacyBorders.borderRadiusMd,
+    boxShadow: useNewShadows ? theme.shadows.lg : theme.general.shadowLow,
+    display: 'flex',
+    gap: theme.spacing.md,
+    width: 'max-content',
+    padding: theme.spacing.sm
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getRootStyles;");
+};
+const Root = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
-  const iconClass = 'pill-control-icon';
-  const css$1 = useRadioGroupItemStyles(size, iconClass);
-  return jsxs(RadioGroupItem, {
-    css: css$1,
+  const {
+    useNewShadows
+  } = useDesignSystemSafexFlags();
+  return jsx(RadixToolbar.Root, {
+    ...addDebugOutlineIfEnabled(),
+    css: getRootStyles(theme, useNewShadows),
     ...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]
+    ref: ref
   });
 });
-const useRadioGroupItemStyles = (size, iconClass) => {
+const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx(RadixToolbar.Button, {
+    ...props,
+    ref: ref
+  });
+});
+const getSeparatorStyles = theme => {
+  return /*#__PURE__*/css({
+    alignSelf: 'stretch',
+    backgroundColor: theme.colors.borderDecorative,
+    width: 1
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getSeparatorStyles;");
+};
+const Separator = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
-  return {
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    appearance: 'none',
-    textDecoration: 'none',
+  return jsx(RadixToolbar.Separator, {
+    css: getSeparatorStyles(theme),
+    ...props,
+    ref: ref
+  });
+});
+const Link = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx(RadixToolbar.Link, {
+    ...props,
+    ref: ref
+  });
+});
+const ToggleGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx(RadixToolbar.ToggleGroup, {
+    ...props,
+    ref: ref
+  });
+});
+const getToggleItemStyles = theme => {
+  return /*#__PURE__*/css({
     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
-      } : {})
+    border: 'none',
+    cursor: 'pointer',
+    '&:hover': {
+      color: theme.colors.actionDefaultTextHover
     },
-    '&[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
-        } : {})
+    '&[data-state="on"]': {
+      color: theme.colors.actionDefaultTextPress
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getToggleItemStyles;");
+};
+const ToggleItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  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
+});
+
+const flattenData = function (data, expandedRows) {
+  let depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let parentId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  return data.reduce((acc, node) => {
+    acc.push({
+      ...node,
+      depth,
+      parentId
+    });
+    if (node.children && expandedRows[node.id]) {
+      acc.push(...flattenData(node.children, expandedRows, depth + 1, node.id));
+    }
+    return acc;
+  }, []);
+};
+function treeGridReducer(state, action) {
+  switch (action.type) {
+    case 'TOGGLE_ROW_EXPANDED':
+      return {
+        ...state,
+        expandedRows: {
+          ...state.expandedRows,
+          [action.rowId]: !state.expandedRows[action.rowId]
+        }
+      };
+    case 'SET_ACTIVE_ROW':
+      return {
+        ...state,
+        activeRowIndex: action.rowIndex
+      };
+    default:
+      return state;
+  }
+}
+const findFocusableElementForCellIndex = (row, cellIndex) => {
+  const cell = row.cells[cellIndex];
+  return (cell === null || cell === void 0 ? void 0 : cell.querySelector('[tabindex], button, a, input, select, textarea')) || null;
+};
+const findNextFocusableCellIndexInRow = (row, columns, startIndex, direction) => {
+  const cells = Array.from(row.cells);
+  const increment = direction === 'next' ? 1 : -1;
+  const limit = direction === 'next' ? cells.length : -1;
+  for (let i = startIndex + increment; i !== limit; i += increment) {
+    var _cell$textContent;
+    const cell = cells[i];
+    const column = columns[i];
+    const focusableElement = findFocusableElementForCellIndex(row, i);
+    const cellContent = cell === null || cell === void 0 || (_cell$textContent = cell.textContent) === null || _cell$textContent === void 0 ? void 0 : _cell$textContent.trim();
+    if (focusableElement || !column.contentFocusable && cellContent) {
+      return i;
+    }
+  }
+  return -1;
+};
+const TreeGrid = _ref => {
+  let {
+    data,
+    columns,
+    renderCell,
+    renderRow,
+    renderTable,
+    renderHeader,
+    onRowKeyboardSelect,
+    onCellKeyboardSelect,
+    includeHeader = false,
+    initialState = {
+      expandedRows: {}
+    }
+  } = _ref;
+  const [state, dispatch] = useReducer(treeGridReducer, {
+    ...initialState,
+    activeRowIndex: 0
+  });
+  const gridRef = useRef(null);
+  const flattenedData = useMemo(() => flattenData(data, state.expandedRows), [data, state.expandedRows]);
+  const toggleRowExpanded = useCallback(rowId => {
+    dispatch({
+      type: 'TOGGLE_ROW_EXPANDED',
+      rowId
+    });
+  }, []);
+  const focusRow = useCallback(rowIndex => {
+    var _gridRef$current;
+    const row = (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.querySelector(`tbody tr:nth-child(${rowIndex + 1})`);
+    row === null || row === void 0 || row.focus();
+    dispatch({
+      type: 'SET_ACTIVE_ROW',
+      rowIndex
+    });
+  }, []);
+  const handleKeyDown = useCallback((event, rowIndex) => {
+    const {
+      key
+    } = event;
+    let newRowIndex = rowIndex;
+    const closestTd = event.target.closest('td');
+    if (!gridRef.current || !gridRef.current.contains(document.activeElement)) {
+      return;
+    }
+    const handleArrowVerticalNavigation = direction => {
+      if (closestTd) {
+        var _closestTd$closest;
+        const currentCellIndex = closestTd.cellIndex;
+        let targetRow = (_closestTd$closest = closestTd.closest('tr')) === null || _closestTd$closest === void 0 ? void 0 : _closestTd$closest[`${direction}ElementSibling`];
+        const moveFocusToRow = row => {
+          var _row$cells$currentCel;
+          const focusableElement = findFocusableElementForCellIndex(row, currentCellIndex);
+          const cellContent = (_row$cells$currentCel = row.cells[currentCellIndex]) === null || _row$cells$currentCel === void 0 || (_row$cells$currentCel = _row$cells$currentCel.textContent) === null || _row$cells$currentCel === void 0 ? void 0 : _row$cells$currentCel.trim();
+          if (focusableElement || !columns[currentCellIndex].contentFocusable && cellContent) {
+            event.preventDefault();
+            focusElement(focusableElement || row.cells[currentCellIndex], flattenedData.findIndex(r => r.id === row.dataset['id']));
+            return true;
+          }
+          return false;
+        };
+        while (targetRow) {
+          if (moveFocusToRow(targetRow)) return;
+          targetRow = targetRow[`${direction}ElementSibling`];
+        }
+      } else if (document.activeElement instanceof HTMLTableRowElement) {
+        if (direction === 'next') {
+          newRowIndex = Math.min(rowIndex + 1, flattenedData.length - 1);
+        } else {
+          newRowIndex = Math.max(rowIndex - 1, 0);
+        }
       }
-    },
-    '&: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
-        } : {})
+    };
+    const handleArrowHorizontalNavigation = direction => {
+      if (closestTd) {
+        const currentRow = closestTd.closest('tr');
+        let targetCellIndex = closestTd.cellIndex;
+        targetCellIndex = findNextFocusableCellIndexInRow(currentRow, columns, targetCellIndex, direction);
+        if (targetCellIndex !== -1) {
+          event.preventDefault();
+          const targetCell = currentRow.cells[targetCellIndex];
+          const focusableElement = findFocusableElementForCellIndex(currentRow, targetCellIndex);
+          focusElement(focusableElement || targetCell, rowIndex);
+          return;
+        } else if (direction === 'previous' && targetCellIndex === -1) {
+          // If we're at the leftmost cell, focus on the row
+          event.preventDefault();
+          currentRow.focus();
+          return;
+        }
       }
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionDefaultBackgroundPress,
-      borderColor: theme.colors.actionLinkPress,
-      color: theme.colors.actionDefaultTextPress,
-      [`& > .${iconClass}`]: {
-        color: 'inherit',
-        ...(size === 'large' ? {
-          backgroundColor: theme.colors.actionIconBackgroundPress
-        } : {})
+      if (document.activeElement instanceof HTMLTableRowElement) {
+        const currentRow = document.activeElement;
+        if (direction === 'next') {
+          if (flattenedData[rowIndex].children) {
+            if (!state.expandedRows[flattenedData[rowIndex].id]) {
+              toggleRowExpanded(flattenedData[rowIndex].id);
+            } else {
+              const firstCell = currentRow.cells[0];
+              focusElement(firstCell, rowIndex);
+            }
+          } else {
+            const firstFocusableCell = findNextFocusableCellIndexInRow(currentRow, columns, -1, 'next');
+            if (firstFocusableCell !== -1) {
+              focusElement(currentRow.cells[firstFocusableCell], rowIndex);
+            }
+          }
+        } else {
+          if (state.expandedRows[flattenedData[rowIndex].id]) {
+            toggleRowExpanded(flattenedData[rowIndex].id);
+          } else if (flattenedData[rowIndex].depth && flattenedData[rowIndex].depth > 0) {
+            newRowIndex = flattenedData.findIndex(row => row.id === flattenedData[rowIndex].parentId);
+          }
+        }
+        return;
       }
-    },
-    '&:disabled': {
-      backgroundColor: theme.colors.actionDisabledBackground,
-      borderColor: theme.colors.actionDisabledBorder,
-      color: theme.colors.actionDisabledText,
-      cursor: 'not-allowed',
-      [`& > .${iconClass}`]: {
-        color: 'inherit'
+
+      // If we're at the edge of the row, handle expanding/collapsing or moving to parent/child
+      if (direction === 'next') {
+        if (flattenedData[rowIndex].children && !state.expandedRows[flattenedData[rowIndex].id]) {
+          toggleRowExpanded(flattenedData[rowIndex].id);
+        }
+      } else {
+        if (state.expandedRows[flattenedData[rowIndex].id]) {
+          toggleRowExpanded(flattenedData[rowIndex].id);
+        } else if (flattenedData[rowIndex].depth && flattenedData[rowIndex].depth > 0) {
+          newRowIndex = flattenedData.findIndex(row => row.id === flattenedData[rowIndex].parentId);
+        }
       }
-    },
-    ...(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
-    } : {})
+    };
+    const handleEnterKey = () => {
+      if (closestTd) {
+        onCellKeyboardSelect === null || onCellKeyboardSelect === void 0 || onCellKeyboardSelect(flattenedData[rowIndex].id, columns[closestTd.cellIndex].id);
+      } else if (document.activeElement instanceof HTMLTableRowElement) {
+        onRowKeyboardSelect === null || onRowKeyboardSelect === void 0 || onRowKeyboardSelect(flattenedData[rowIndex].id);
+      }
+    };
+    switch (key) {
+      case 'ArrowUp':
+        handleArrowVerticalNavigation('previous');
+        break;
+      case 'ArrowDown':
+        handleArrowVerticalNavigation('next');
+        break;
+      case 'ArrowLeft':
+        handleArrowHorizontalNavigation('previous');
+        break;
+      case 'ArrowRight':
+        handleArrowHorizontalNavigation('next');
+        break;
+      case 'Enter':
+        handleEnterKey();
+        break;
+      default:
+        return;
+    }
+    if (newRowIndex !== rowIndex) {
+      event.preventDefault();
+      focusRow(newRowIndex);
+    }
+  }, [state.expandedRows, columns, flattenedData, toggleRowExpanded, onRowKeyboardSelect, onCellKeyboardSelect, focusRow]);
+  const focusElement = (element, rowIndex) => {
+    if (element) {
+      element.focus();
+      dispatch({
+        type: 'SET_ACTIVE_ROW',
+        rowIndex
+      });
+    }
   };
+  const defaultRenderRow = useCallback(_ref2 => {
+    let {
+      rowProps,
+      children
+    } = _ref2;
+    return jsx("tr", {
+      ...rowProps,
+      children: children
+    });
+  }, []);
+  const defaultRenderTable = useCallback(_ref3 => {
+    let {
+      tableProps,
+      children
+    } = _ref3;
+    return jsx("table", {
+      ...tableProps,
+      children: children
+    });
+  }, []);
+  const defaultRenderHeader = useCallback(_ref4 => {
+    let {
+      columns,
+      headerProps
+    } = _ref4;
+    return jsx("thead", {
+      ...headerProps,
+      children: jsx("tr", {
+        children: columns.map(column => jsx("th", {
+          role: "columnheader",
+          children: column.header
+        }, column.id))
+      })
+    });
+  }, []);
+  const renderRowWrapper = useCallback((row, rowIndex) => {
+    const isExpanded = state.expandedRows[row.id];
+    const isKeyboardActive = rowIndex === state.activeRowIndex;
+    const rowProps = {
+      key: row.id,
+      'data-id': row.id,
+      role: 'row',
+      'aria-selected': false,
+      'aria-level': (row.depth || 0) + 1,
+      'aria-expanded': row.children ? isExpanded ? 'true' : 'false' : undefined,
+      tabIndex: isKeyboardActive ? 0 : -1,
+      onKeyDown: e => handleKeyDown(e, rowIndex)
+    };
+    const children = columns.map((column, colIndex) => {
+      const cellProps = {
+        key: `${row.id}-${column.id}`,
+        role: column.isRowHeader ? 'rowheader' : 'gridcell',
+        tabIndex: column.contentFocusable ? undefined : isKeyboardActive ? 0 : -1
+      };
+      return renderCell({
+        row,
+        column,
+        rowDepth: row.depth || 0,
+        rowIndex,
+        colIndex,
+        rowIsKeyboardActive: isKeyboardActive,
+        rowIsExpanded: isExpanded,
+        toggleRowExpanded,
+        cellProps
+      });
+    });
+    return (renderRow || defaultRenderRow)({
+      row,
+      rowIndex,
+      isExpanded,
+      isKeyboardActive,
+      rowProps,
+      children
+    });
+  }, [state.activeRowIndex, state.expandedRows, handleKeyDown, renderCell, renderRow, defaultRenderRow, toggleRowExpanded, columns]);
+  return (renderTable || defaultRenderTable)({
+    tableProps: {
+      role: 'treegrid',
+      ref: gridRef
+    },
+    children: jsxs(Fragment, {
+      children: [includeHeader && (renderHeader || defaultRenderHeader)({
+        columns,
+        headerProps: {}
+      }), jsx("tbody", {
+        children: flattenedData.map((row, index) => renderRowWrapper(row, index))
+      })]
+    })
+  });
 };
 
-var PillControl = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Item: Item,
-  Root: Root
-});
-
-export { BANNER_MAX_HEIGHT, BANNER_MIN_HEIGHT, Banner, ChatUI, PillControl, PreviewCard, Slider, Toolbar };
+export { BANNER_MAX_HEIGHT, BANNER_MIN_HEIGHT, Banner, DatePicker, PillControl, PreviewCard, Progress, RangePicker, Toolbar, TreeGrid, getDatePickerQuickActionBasic, getRangeQuickActionsBasic };
 //# sourceMappingURL=development.js.map