@app-studio/web 0.9.3 → 0.9.4

package/dist/web.esm.js

@@ -1,11 +1,11 @@
 import 'core-js/modules/es.object.assign.js';
-import React, { useState, useMemo, useEffect, useCallback, isValidElement, Children, cloneElement, useContext, createContext, useRef, Fragment, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
+import React, { useState, useMemo, useEffect, useCallback, isValidElement, Children, cloneElement, useContext, createContext, useRef, Fragment, useLayoutEffect, forwardRef } from 'react';
 import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.regexp.to-string.js';
-import { View, Horizontal, Vertical, Element, Text as Text$1, Center, useTheme, Image, useHover, Typography, Input, Form, useInView, Button as Button$1 } from 'app-studio';
+import { View, Horizontal, Vertical, Element, Text as Text$1, Center, useTheme, Image, useHover, Typography, Input, Form, useInView } from 'app-studio';
 import 'core-js/modules/es.symbol.description.js';
 import 'core-js/modules/es.parse-float.js';
 import 'core-js/modules/es.string.trim-end.js';
@@ -32,31 +32,6 @@ import 'core-js/modules/es.array.flat-map.js';
 import 'core-js/modules/es.array.unscopables.flat-map.js';
 import 'core-js/modules/es.string.trim.js';
 
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-  try {
-    var i = n[a](c),
-      u = i.value;
-  } catch (n) {
-    return void e(n);
-  }
-  i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-  return function () {
-    var t = this,
-      e = arguments;
-    return new Promise(function (r, o) {
-      var a = n.apply(t, e);
-      function _next(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-      }
-      function _throw(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-      }
-      _next(void 0);
-    });
-  };
-}
 function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
@@ -715,7 +690,7 @@ var _excluded$3 = ["widthHeight", "color", "transform", "orientation", "children
   _excluded38 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded39 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded40 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded41 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded41 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded42 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded43 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded44 = ["widthHeight", "color", "filled", "strokeWidth"],
@@ -727,9 +702,9 @@ var _excluded$3 = ["widthHeight", "color", "transform", "orientation", "children
   _excluded50 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded51 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded52 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded53 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded53 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded54 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded55 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded55 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded56 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded57 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded58 = ["widthHeight", "color", "filled", "strokeWidth"],
@@ -747,8 +722,8 @@ var _excluded$3 = ["widthHeight", "color", "transform", "orientation", "children
   _excluded70 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded71 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded72 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded73 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded74 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded73 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded74 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded75 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded76 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded77 = ["widthHeight", "color", "strokeWidth", "filled"],
@@ -760,9 +735,7 @@ var _excluded$3 = ["widthHeight", "color", "transform", "orientation", "children
   _excluded83 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded84 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded85 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded86 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded87 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded88 = ["widthHeight", "color", "strokeWidth", "filled"];
+  _excluded86 = ["widthHeight", "color", "strokeWidth", "filled"];
 // Default wrapper component for consistent sizing and styling
 var IconWrapper = _ref => {
   var {
@@ -805,12 +778,21 @@ var UserIcon = _ref2 => {
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
+  }, props), /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 24 24",
     "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
-    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+    focusable: "false",
+    fill: filled ? color : 'none',
+    stroke: filled ? 'none' : color,
+    strokeWidth: strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "8",
+    r: "4"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4 20c0-4 4-7 8-7s8 3 8 7"
   })));
 };
 var HelpIcon = _ref3 => {
@@ -957,7 +939,8 @@ var ChevronIcon = _ref5 => {
     "aria-hidden": "true",
     focusable: "false"
   }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
-    d: "M12.771 7.115a.829.829 0 0 0-1.2 0L3 15.686l1.2 1.2 7.971-7.971 7.972 7.971 1.2-1.2-8.572-8.571Z"
+    d: "M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z",
+    fill: "currentColor"
   })));
 };
 var DragHandleIcon = _ref6 => {
@@ -1001,32 +984,28 @@ var DragHandleIcon = _ref6 => {
     r: "2"
   }))));
 };
-// File Icon Component
 var FileIcon = _ref7 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
-      filled = true,
+      filled = false,
       strokeWidth = 1
     } = _ref7,
     props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
+  }, props), /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 24 24",
     "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
-    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z",
+    focusable: "false",
     fill: filled ? color : 'none',
     stroke: filled ? 'none' : color,
-    strokeWidth: filled ? 0 : strokeWidth
-  }), /*#__PURE__*/React.createElement("polyline", {
-    points: "14 2 14 8 20 8",
-    fill: "none",
-    stroke: color,
     strokeWidth: strokeWidth
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 2H14L20 8V20C20 21.1 19.1 22 18 22H6C4.9 22 4 21.1 4 20V4C4 2.9 4.9 2 6 2Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14 2V8H20"
   })));
 };
 // Video Icon Component
@@ -1180,7 +1159,7 @@ var CloseIcon = _ref13 => {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
-      strokeWidth = 1
+      strokeWidth = 2
     } = _ref13,
     props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
@@ -1830,7 +1809,7 @@ var MagicWandIcon = _ref39 => {
     d: "M16 15L16.7 16.5L18 17L16.7 17.5L16 19L15.3 17.5L14 17L15.3 16.5L16 15Z"
   })));
 };
-var SliderVerticalIcon = _ref40 => {
+var PanelIcon = _ref40 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
@@ -1845,77 +1824,6 @@ var SliderVerticalIcon = _ref40 => {
     viewBox: "0 0 24 24",
     "aria-hidden": "false",
     focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("line", {
-    stroke: color,
-    x1: "4",
-    y1: "21",
-    x2: "4",
-    y2: "14"
-  }), /*#__PURE__*/React.createElement("line", {
-    stroke: color,
-    x1: "4",
-    y1: "10",
-    x2: "4",
-    y2: "3"
-  }), /*#__PURE__*/React.createElement("line", {
-    stroke: color,
-    x1: "12",
-    y1: "21",
-    x2: "12",
-    y2: "12"
-  }), /*#__PURE__*/React.createElement("line", {
-    stroke: color,
-    x1: "12",
-    y1: "8",
-    x2: "12",
-    y2: "3"
-  }), /*#__PURE__*/React.createElement("line", {
-    stroke: color,
-    x1: "20",
-    y1: "21",
-    x2: "20",
-    y2: "16"
-  }), /*#__PURE__*/React.createElement("line", {
-    stroke: color,
-    x1: "20",
-    y1: "12",
-    x2: "20",
-    y2: "3"
-  }), /*#__PURE__*/React.createElement("line", {
-    stroke: color,
-    x1: "1",
-    y1: "14",
-    x2: "7",
-    y2: "14"
-  }), /*#__PURE__*/React.createElement("line", {
-    stroke: color,
-    x1: "9",
-    y1: "8",
-    x2: "15",
-    y2: "8"
-  }), /*#__PURE__*/React.createElement("line", {
-    stroke: color,
-    x1: "17",
-    y1: "16",
-    x2: "23",
-    y2: "16"
-  })));
-};
-var PanelIcon = _ref41 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref41,
-    props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
-  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
   }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("rect", {
     width: "18",
     height: "18",
@@ -1926,14 +1834,14 @@ var PanelIcon = _ref41 => {
     d: "M9 3v18"
   })));
 };
-var FilterIcon = _ref42 => {
+var FilterIcon = _ref41 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref42,
-    props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
+    } = _ref41,
+    props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1945,14 +1853,14 @@ var FilterIcon = _ref42 => {
     d: "M3 4h18l-7 10v5l-4 2v-7L3 4z"
   })));
 };
-var HomeIcon = _ref43 => {
+var HomeIcon = _ref42 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref43,
-    props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
+    } = _ref42,
+    props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1964,14 +1872,14 @@ var HomeIcon = _ref43 => {
     d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"
   })));
 };
-var LocationIcon = _ref44 => {
+var LocationIcon = _ref43 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref44,
-    props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
+    } = _ref43,
+    props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1983,14 +1891,14 @@ var LocationIcon = _ref44 => {
     d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
   })));
 };
-var LockIcon = _ref45 => {
+var LockIcon = _ref44 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref45,
-    props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
+    } = _ref44,
+    props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2015,14 +1923,14 @@ var LockIcon = _ref45 => {
     r: "1.5"
   })))));
 };
-var MicrophoneIcon = _ref46 => {
+var MicrophoneIcon = _ref45 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref46,
-    props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
+    } = _ref45,
+    props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2048,14 +1956,14 @@ var MicrophoneIcon = _ref46 => {
     y2: "23"
   })));
 };
-var MoonIcon = _ref47 => {
+var MoonIcon = _ref46 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref47,
-    props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
+    } = _ref46,
+    props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2067,14 +1975,14 @@ var MoonIcon = _ref47 => {
     d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
   })));
 };
-var NotificationIcon = _ref48 => {
+var NotificationIcon = _ref47 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref48,
-    props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
+    } = _ref47,
+    props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2088,14 +1996,14 @@ var NotificationIcon = _ref48 => {
     d: "M13.73 21a2 2 0 0 1-3.46 0"
   })));
 };
-var OpenEyeIcon = _ref49 => {
+var OpenEyeIcon = _ref48 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref49,
-    props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
+    } = _ref48,
+    props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2107,14 +2015,14 @@ var OpenEyeIcon = _ref49 => {
     d: "M12 4C7 4 2.73 7.11 1 12c1.73 4.89 6 8 11 8s9.27-3.11 11-8c-1.73-4.89-6-8-11-8zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
   })));
 };
-var ProfileIcon = _ref50 => {
+var ProfileIcon = _ref49 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref50,
-    props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
+    } = _ref49,
+    props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2127,14 +2035,14 @@ var ProfileIcon = _ref50 => {
     d: "M12 13c-2.67 0-8 1.34-8 4v2c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-2c0-2.66-5.33-4-8-4zm0-9c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z M12 2C9.79 2 8 3.79 8 6s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z M12 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
   }), ' '));
 };
-var SettingsIcon = _ref51 => {
+var SettingsIcon = _ref50 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref51,
-    props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
+    } = _ref50,
+    props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2146,14 +2054,14 @@ var SettingsIcon = _ref51 => {
     d: "M19.4 13c0-.3.1-.6.1-1s0-.7-.1-1l2.1-1.6c.2-.2.2-.4.1-.6l-2-3.5c-.1-.2-.4-.3-.6-.2l-2.5 1c-.5-.4-1.1-.7-1.7-.9l-.4-2.6c0-.2-.3-.4-.5-.4h-4c-.2 0-.5.2-.5.4l-.4 2.6c-.6.2-1.2.5-1.7.9l-2.5-1c-.2-.1-.5 0-.6.2l-2 3.5c-.1.2-.1.4.1.6L4.6 11c0 .3-.1.6-.1 1s0 .7.1 1l-2.1 1.6c-.2.2-.2.4-.1.6l2 3.5c.1.2.4.3.6.2l2.5-1c.5.4 1.1.7 1.7.9l.4 2.6c0 .2.3.4.5.4h4c.2 0 .5-.2.5-.4l.4-2.6c.6-.2 1.2-.5 1.7-.9l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.4-.1-.6L19.4 13zM12 15.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"
   })));
 };
-var SuccessIcon = _ref52 => {
+var SuccessIcon = _ref51 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref52,
-    props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
+    } = _ref51,
+    props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2165,14 +2073,14 @@ var SuccessIcon = _ref52 => {
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
   })));
 };
-var UnLikeIcon = _ref53 => {
+var UnLikeIcon = _ref52 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref53,
-    props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
+    } = _ref52,
+    props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2184,14 +2092,14 @@ var UnLikeIcon = _ref53 => {
     d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
   })));
 };
-var ClockIcon = _ref54 => {
+var ClockIcon = _ref53 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref54,
-    props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
+    } = _ref53,
+    props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2207,14 +2115,14 @@ var ClockIcon = _ref54 => {
     points: "12 6 12 12 16 14"
   })));
 };
-var CameraIcon = _ref55 => {
+var CameraIcon = _ref54 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref55,
-    props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
+    } = _ref54,
+    props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2230,14 +2138,14 @@ var CameraIcon = _ref55 => {
     r: "4"
   })));
 };
-var BluetoothIcon = _ref56 => {
+var BluetoothIcon = _ref55 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref56,
-    props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
+    } = _ref55,
+    props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2249,14 +2157,14 @@ var BluetoothIcon = _ref56 => {
     d: "M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z"
   })));
 };
-var LikeIcon = _ref57 => {
+var LikeIcon = _ref56 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref57,
-    props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
+    } = _ref56,
+    props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2268,14 +2176,14 @@ var LikeIcon = _ref57 => {
     d: "M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
   })));
 };
-var UnlockIcon = _ref58 => {
+var UnlockIcon = _ref57 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref58,
-    props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
+    } = _ref57,
+    props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2300,14 +2208,14 @@ var UnlockIcon = _ref58 => {
     r: "1.5"
   })))));
 };
-var WifiIcon = _ref59 => {
+var WifiIcon = _ref58 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref59,
-    props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
+    } = _ref58,
+    props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2319,14 +2227,14 @@ var WifiIcon = _ref59 => {
     d: "M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"
   })));
 };
-var UploadIcon = _ref60 => {
+var UploadIcon = _ref59 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref60,
-    props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
+    } = _ref59,
+    props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2342,14 +2250,14 @@ var UploadIcon = _ref60 => {
     d: "M12 12l0 9"
   })));
 };
-var SearchIcon = _ref61 => {
+var SearchIcon = _ref60 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref61,
-    props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
+    } = _ref60,
+    props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2362,14 +2270,14 @@ var SearchIcon = _ref61 => {
   })));
 };
 // Stop Icon (rectangle) for stopping agent
-var StopIcon = _ref62 => {
+var StopIcon = _ref61 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 2
-    } = _ref62,
-    props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
+    } = _ref61,
+    props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2387,14 +2295,14 @@ var StopIcon = _ref62 => {
   })));
 };
 // Send Icon (paper airplane) for chat submit
-var SendIcon = _ref63 => {
+var SendIcon = _ref62 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 2
-    } = _ref63,
-    props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
+    } = _ref62,
+    props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2412,14 +2320,14 @@ var SendIcon = _ref63 => {
   })));
 };
 // Loading Spinner Icon for agent running indicator
-var LoadingSpinnerIcon = _ref64 => {
+var LoadingSpinnerIcon = _ref63 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 2
-    } = _ref64,
-    props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
+    } = _ref63,
+    props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2470,14 +2378,14 @@ var LoadingSpinnerIcon = _ref64 => {
   })));
 };
 // Horizontal lines drag handle icon for Tree component
-var DragHandleLinesIcon = _ref65 => {
+var DragHandleLinesIcon = _ref64 => {
   var {
       widthHeight = 16,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1.5
-    } = _ref65,
-    props = _objectWithoutPropertiesLoose(_ref65, _excluded65);
+    } = _ref64,
+    props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2497,36 +2405,14 @@ var DragHandleLinesIcon = _ref65 => {
     strokeLinecap: "round"
   })));
 };
-// ChevronDown Icon for dropdown menus
-var ChevronDownIcon = _ref66 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref66,
-    props = _objectWithoutPropertiesLoose(_ref66, _excluded66);
-  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
-    d: "M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z",
-    fill: "currentColor"
-  })));
-};
-// ChevronRight Icon for submenu indicators
-var ChevronRightIcon = _ref67 => {
+var CloseEyeIcon = _ref65 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref67,
-    props = _objectWithoutPropertiesLoose(_ref67, _excluded67);
+    } = _ref65,
+    props = _objectWithoutPropertiesLoose(_ref65, _excluded65);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2535,39 +2421,40 @@ var ChevronRightIcon = _ref67 => {
     "aria-hidden": "false",
     focusable: "false"
   }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
-    d: "M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z",
+    d: "M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L14.032 8.55382C13.4365 8.20193 12.7418 8 12 8C9.79086 8 8 9.79086 8 12C8 12.7418 8.20193 13.4365 8.55382 14.032L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L9.96803 15.4462C10.5635 15.7981 11.2582 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2582 15.7981 10.5635 15.4462 9.96803L19.7071 5.70711ZM12.518 10.0677C12.3528 10.0236 12.1792 10 12 10C10.8954 10 10 10.8954 10 12C10 12.1792 10.0236 12.3528 10.0677 12.518L12.518 10.0677ZM11.482 13.9323L13.9323 11.482C13.9764 11.6472 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6472 13.9764 11.482 13.9323ZM15.7651 4.8207C14.6287 4.32049 13.3675 4 12 4C9.14754 4 6.75717 5.39462 4.99812 6.90595C3.23268 8.42276 2.00757 10.1376 1.46387 10.9698C1.05306 11.5985 1.05306 12.4015 1.46387 13.0302C1.92276 13.7326 2.86706 15.0637 4.21194 16.3739L5.62626 14.9596C4.4555 13.8229 3.61144 12.6531 3.18002 12C3.6904 11.2274 4.77832 9.73158 6.30147 8.42294C7.87402 7.07185 9.81574 6 12 6C12.7719 6 13.5135 6.13385 14.2193 6.36658L15.7651 4.8207ZM12 18C11.2282 18 10.4866 17.8661 9.78083 17.6334L8.23496 19.1793C9.37136 19.6795 10.6326 20 12 20C14.8525 20 17.2429 18.6054 19.002 17.0941C20.7674 15.5772 21.9925 13.8624 22.5362 13.0302C22.947 12.4015 22.947 11.5985 22.5362 10.9698C22.0773 10.2674 21.133 8.93627 19.7881 7.62611L18.3738 9.04043C19.5446 10.1771 20.3887 11.3469 20.8201 12C20.3097 12.7726 19.2218 14.2684 17.6986 15.5771C16.1261 16.9282 14.1843 18 12 18Z",
     fill: "currentColor"
   })));
 };
-var CloseEyeIcon = _ref68 => {
+var TrashIcon = DeleteIcon;
+var AttachmentIcon = _ref66 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref68,
-    props = _objectWithoutPropertiesLoose(_ref68, _excluded68);
+    } = _ref66,
+    props = _objectWithoutPropertiesLoose(_ref66, _excluded66);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
+    width: widthHeight,
+    height: widthHeight,
+    viewBox: "0 0 24 24"
   }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
-    d: "M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L14.032 8.55382C13.4365 8.20193 12.7418 8 12 8C9.79086 8 8 9.79086 8 12C8 12.7418 8.20193 13.4365 8.55382 14.032L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L9.96803 15.4462C10.5635 15.7981 11.2582 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2582 15.7981 10.5635 15.4462 9.96803L19.7071 5.70711ZM12.518 10.0677C12.3528 10.0236 12.1792 10 12 10C10.8954 10 10 10.8954 10 12C10 12.1792 10.0236 12.3528 10.0677 12.518L12.518 10.0677ZM11.482 13.9323L13.9323 11.482C13.9764 11.6472 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6472 13.9764 11.482 13.9323ZM15.7651 4.8207C14.6287 4.32049 13.3675 4 12 4C9.14754 4 6.75717 5.39462 4.99812 6.90595C3.23268 8.42276 2.00757 10.1376 1.46387 10.9698C1.05306 11.5985 1.05306 12.4015 1.46387 13.0302C1.92276 13.7326 2.86706 15.0637 4.21194 16.3739L5.62626 14.9596C4.4555 13.8229 3.61144 12.6531 3.18002 12C3.6904 11.2274 4.77832 9.73158 6.30147 8.42294C7.87402 7.07185 9.81574 6 12 6C12.7719 6 13.5135 6.13385 14.2193 6.36658L15.7651 4.8207ZM12 18C11.2282 18 10.4866 17.8661 9.78083 17.6334L8.23496 19.1793C9.37136 19.6795 10.6326 20 12 20C14.8525 20 17.2429 18.6054 19.002 17.0941C20.7674 15.5772 21.9925 13.8624 22.5362 13.0302C22.947 12.4015 22.947 11.5985 22.5362 10.9698C22.0773 10.2674 21.133 8.93627 19.7881 7.62611L18.3738 9.04043C19.5446 10.1771 20.3887 11.3469 20.8201 12C20.3097 12.7726 19.2218 14.2684 17.6986 15.5771C16.1261 16.9282 14.1843 18 12 18Z",
-    fill: "currentColor"
-  })));
+    // fillRule="evenodd"
+    // clipRule="evenodd"
+    d: "M3.70104 5.15932C3.0938 3.61775 3.85122 1.8758 5.39278 1.26856L5.56558 1.2005C7.10714 0.593259 8.84909 1.35068 9.45633 2.89225L13.071 12.0685C13.4252 12.9677 12.9833 13.9839 12.0841 14.3381L11.9977 14.3721C11.0985 14.7264 10.0823 14.2845 9.72809 13.3853L7.81051 8.5172C7.7093 8.26027 7.83554 7.96995 8.09247 7.86874C8.34939 7.76753 8.63972 7.89377 8.74092 8.1507L10.6585 13.0188C10.8103 13.4042 11.2458 13.5935 11.6312 13.4417L11.7176 13.4077C12.103 13.2559 12.2923 12.8204 12.1405 12.435L8.52592 3.25875C8.12109 2.23104 6.95979 1.72609 5.93208 2.13092L5.75929 2.19898C4.73158 2.60381 4.22663 3.76511 4.63145 4.79282L8.99282 15.8648C9.65066 17.5348 11.5378 18.3554 13.2078 17.6975L13.467 17.5954C15.137 16.9376 15.9576 15.0505 15.2997 13.3804L12.6354 6.61663C12.5342 6.3597 12.6604 6.06938 12.9173 5.96817C13.1743 5.86696 13.4646 5.9932 13.5658 6.25013L16.2301 13.0139C17.0904 15.1978 16.0174 17.6656 13.8335 18.5258L13.5743 18.6279C11.3904 19.4882 8.92266 18.4152 8.0624 16.2313L3.70104 5.15932Z"
+  }), ' '));
 };
-var TrashIcon = DeleteIcon;
-var ExternalLinkIcon = _ref69 => {
+var ExternalLinkIcon = _ref67 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref69,
-    props = _objectWithoutPropertiesLoose(_ref69, _excluded69);
+    } = _ref67,
+    props = _objectWithoutPropertiesLoose(_ref67, _excluded67);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2579,14 +2466,14 @@ var ExternalLinkIcon = _ref69 => {
     d: "M14 3h7v7h-2V5.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h5v2H6v11h11v-4h2v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"
   })));
 };
-var PlusIcon = _ref70 => {
+var PlusIcon = _ref68 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref70,
-    props = _objectWithoutPropertiesLoose(_ref70, _excluded70);
+    } = _ref68,
+    props = _objectWithoutPropertiesLoose(_ref68, _excluded68);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2608,14 +2495,14 @@ var PlusIcon = _ref70 => {
     y2: "12"
   })));
 };
-var TickIcon = _ref71 => {
+var TickIcon = _ref69 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref71,
-    props = _objectWithoutPropertiesLoose(_ref71, _excluded71);
+    } = _ref69,
+    props = _objectWithoutPropertiesLoose(_ref69, _excluded69);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2629,14 +2516,14 @@ var TickIcon = _ref71 => {
     strokeLinejoin: "round"
   })));
 };
-var BoldArrowIcon = _ref72 => {
+var BoldArrowIcon = _ref70 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref72,
-    props = _objectWithoutPropertiesLoose(_ref72, _excluded72);
+    } = _ref70,
+    props = _objectWithoutPropertiesLoose(_ref70, _excluded70);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2648,14 +2535,14 @@ var BoldArrowIcon = _ref72 => {
     d: "M12 4l7 7h-4v7h-6v-7H5l7-7z"
   })));
 };
-var ArrowIcon = _ref73 => {
+var ArrowIcon = _ref71 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref73,
-    props = _objectWithoutPropertiesLoose(_ref73, _excluded73);
+    } = _ref71,
+    props = _objectWithoutPropertiesLoose(_ref71, _excluded71);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2673,14 +2560,14 @@ var ArrowIcon = _ref73 => {
     points: "6 12 12 6 18 12"
   })));
 };
-var SpinnerIcon = _ref74 => {
+var SpinnerIcon = _ref72 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref74,
-    props = _objectWithoutPropertiesLoose(_ref74, _excluded74);
+    } = _ref72,
+    props = _objectWithoutPropertiesLoose(_ref72, _excluded72);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2698,14 +2585,14 @@ var SpinnerIcon = _ref74 => {
     strokeOpacity: "1"
   })));
 };
-var CalendarIcon = _ref75 => {
+var CalendarIcon = _ref73 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref75,
-    props = _objectWithoutPropertiesLoose(_ref75, _excluded75);
+    } = _ref73,
+    props = _objectWithoutPropertiesLoose(_ref73, _excluded73);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2740,14 +2627,14 @@ var CalendarIcon = _ref75 => {
     y2: "10"
   })));
 };
-var SliderIcon = _ref76 => {
+var SliderIcon = _ref74 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref76,
-    props = _objectWithoutPropertiesLoose(_ref76, _excluded76);
+    } = _ref74,
+    props = _objectWithoutPropertiesLoose(_ref74, _excluded74);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2775,16 +2662,6 @@ var SliderIcon = _ref76 => {
     y1: "12",
     x2: "21",
     y2: "12"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "3",
-    y1: "20",
-    x2: "8",
-    y2: "20"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "12",
-    y1: "20",
-    x2: "21",
-    y2: "20"
   }), /*#__PURE__*/React.createElement("line", {
     x1: "10",
     y1: "1",
@@ -2795,21 +2672,16 @@ var SliderIcon = _ref76 => {
     y1: "9",
     x2: "16",
     y2: "15"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "8",
-    y1: "17",
-    x2: "8",
-    y2: "23"
   })));
 };
-var CropIcon = _ref77 => {
+var CropIcon = _ref75 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref77,
-    props = _objectWithoutPropertiesLoose(_ref77, _excluded77);
+    } = _ref75,
+    props = _objectWithoutPropertiesLoose(_ref75, _excluded75);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2823,14 +2695,14 @@ var CropIcon = _ref77 => {
     d: "M18 22V8a2 2 0 0 0-2-2H2"
   })));
 };
-var ZoomInIcon = _ref78 => {
+var ZoomInIcon = _ref76 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref78,
-    props = _objectWithoutPropertiesLoose(_ref78, _excluded78);
+    } = _ref76,
+    props = _objectWithoutPropertiesLoose(_ref76, _excluded76);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2859,14 +2731,14 @@ var ZoomInIcon = _ref78 => {
     y2: "11"
   })));
 };
-var ZoomOutIcon = _ref79 => {
+var ZoomOutIcon = _ref77 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref79,
-    props = _objectWithoutPropertiesLoose(_ref79, _excluded79);
+    } = _ref77,
+    props = _objectWithoutPropertiesLoose(_ref77, _excluded77);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2890,14 +2762,14 @@ var ZoomOutIcon = _ref79 => {
     y2: "11"
   })));
 };
-var TextIcon = _ref80 => {
+var TextIcon = _ref78 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref80,
-    props = _objectWithoutPropertiesLoose(_ref80, _excluded80);
+    } = _ref78,
+    props = _objectWithoutPropertiesLoose(_ref78, _excluded78);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2922,14 +2794,14 @@ var TextIcon = _ref80 => {
     y2: "18"
   })));
 };
-var ShapeIcon = _ref81 => {
+var ShapeIcon = _ref79 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref81,
-    props = _objectWithoutPropertiesLoose(_ref81, _excluded81);
+    } = _ref79,
+    props = _objectWithoutPropertiesLoose(_ref79, _excluded79);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2950,14 +2822,14 @@ var ShapeIcon = _ref81 => {
     points: "16,4 19,8 13,8"
   })));
 };
-var RotateIcon = _ref82 => {
+var RotateIcon = _ref80 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref82,
-    props = _objectWithoutPropertiesLoose(_ref82, _excluded82);
+    } = _ref80,
+    props = _objectWithoutPropertiesLoose(_ref80, _excluded80);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2971,14 +2843,14 @@ var RotateIcon = _ref82 => {
     d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10"
   })));
 };
-var DocumentIcon = _ref83 => {
+var DocumentIcon = _ref81 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref83,
-    props = _objectWithoutPropertiesLoose(_ref83, _excluded83);
+    } = _ref81,
+    props = _objectWithoutPropertiesLoose(_ref81, _excluded81);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -3004,14 +2876,14 @@ var DocumentIcon = _ref83 => {
     points: "10 9 9 9 8 9"
   })));
 };
-var ChartIcon = _ref84 => {
+var ChartIcon = _ref82 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref84,
-    props = _objectWithoutPropertiesLoose(_ref84, _excluded84);
+    } = _ref82,
+    props = _objectWithoutPropertiesLoose(_ref82, _excluded82);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -3055,14 +2927,14 @@ var ChartIcon = _ref84 => {
     y2: "17"
   })));
 };
-var GiftIcon = _ref85 => {
+var GiftIcon = _ref83 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref85,
-    props = _objectWithoutPropertiesLoose(_ref85, _excluded85);
+    } = _ref83,
+    props = _objectWithoutPropertiesLoose(_ref83, _excluded83);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -3088,14 +2960,14 @@ var GiftIcon = _ref85 => {
     d: "M12 8c.5-2.5 4-3 5-1.5S15 10 12 8z"
   })));
 };
-var ShieldIcon = _ref86 => {
+var ShieldIcon = _ref84 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = true
-    } = _ref86,
-    props = _objectWithoutPropertiesLoose(_ref86, _excluded86);
+    } = _ref84,
+    props = _objectWithoutPropertiesLoose(_ref84, _excluded84);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -3108,14 +2980,14 @@ var ShieldIcon = _ref86 => {
   })));
 };
 var CheckIcon = TickIcon;
-var LogoutIcon = _ref87 => {
+var LogoutIcon = _ref85 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref87,
-    props = _objectWithoutPropertiesLoose(_ref87, _excluded87);
+    } = _ref85,
+    props = _objectWithoutPropertiesLoose(_ref85, _excluded85);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -3131,14 +3003,14 @@ var LogoutIcon = _ref87 => {
     d: "M13 5v-2a1 1 0 0 0-1-1H5a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h7a1 1 0 0 0 1-1v-2"
   })));
 };
-var PowerOffIcon = _ref88 => {
+var PowerOffIcon = _ref86 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1.5,
       filled = false
-    } = _ref88,
-    props = _objectWithoutPropertiesLoose(_ref88, _excluded88);
+    } = _ref86,
+    props = _objectWithoutPropertiesLoose(_ref86, _excluded86);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -3197,7 +3069,6 @@ var Icon = {
   RefreshIcon: RefreshIcon,
   PrintIcon: PrintIcon,
   MagicWandIcon: MagicWandIcon,
-  SliderVerticalIcon: SliderVerticalIcon,
   PanelIcon: PanelIcon,
   FilterIcon: FilterIcon,
   HomeIcon: HomeIcon,
@@ -3223,10 +3094,9 @@ var Icon = {
   SendIcon: SendIcon,
   LoadingSpinnerIcon: LoadingSpinnerIcon,
   DragHandleLinesIcon: DragHandleLinesIcon,
-  ChevronDownIcon: ChevronDownIcon,
-  ChevronRightIcon: ChevronRightIcon,
   CloseEyeIcon: CloseEyeIcon,
   TrashIcon: TrashIcon,
+  AttachmentIcon: AttachmentIcon,
   ExternalLinkIcon: ExternalLinkIcon,
   PlusIcon: PlusIcon,
   TickIcon: TickIcon,
@@ -6654,7 +6524,8 @@ var ContextMenuItem = _ref4 => {
       flexGrow: 1
     }, item.label), hasSubmenu && (/*#__PURE__*/React.createElement(View, Object.assign({
       marginLeft: 8
-    }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React.createElement(ChevronIcon, {
+      orientation: "right",
       widthHeight: 16,
       color: "currentColor",
       filled: true
@@ -12523,8 +12394,10 @@ var useUpload = _ref => {
     maxSize = 100 * 1024 * 1024,
     // 100MB default
     onFileSelect,
+    onMultipleFileSelect,
     validateFile,
     thumbnail,
+    multiple = false,
     onError = error => {
       showMessage('error', 'Error', error);
     }
@@ -12532,40 +12405,70 @@ var useUpload = _ref => {
   var fileInputRef = useRef(null);
   var videoRef = useRef(null);
   var [selectedFile, setSelectedFile] = useState(null);
+  var [selectedFiles, setSelectedFiles] = useState([]);
   var [errorMessage, setErrorMessage] = useState(null);
   var [previewUrl, setPreviewUrl] = useState(null);
   var [thumbnailUrl, setThumbnailUrl] = useState(thumbnail || null);
   var handleFileChange = useCallback(event => {
-    var _event$target$files;
-    var file = (_event$target$files = event.target.files) == null ? void 0 : _event$target$files[0];
+    var files = event.target.files;
     setErrorMessage(null);
-    if (!file) {
+    if (!files || files.length === 0) {
       onError('No file selected');
       setErrorMessage('No file selected');
       return;
     }
-    if (file.size > maxSize) {
-      onError("File exceeds " + Math.round(maxSize / (1024 * 1024)) + "MB.");
-      setErrorMessage("File exceeds " + Math.round(maxSize / (1024 * 1024)) + "MB.");
-      return;
-    }
-    if (validateFile) {
-      var validationError = validateFile(file);
-      if (validationError) {
-        onError(validationError);
-        setErrorMessage(validationError);
+    if (multiple) {
+      // Handle multiple files
+      var fileArray = Array.from(files);
+      var validFiles = [];
+      for (var file of fileArray) {
+        if (file.size > maxSize) {
+          onError("File " + file.name + " exceeds " + Math.round(maxSize / (1024 * 1024)) + "MB.");
+          setErrorMessage("File " + file.name + " exceeds " + Math.round(maxSize / (1024 * 1024)) + "MB.");
+          continue;
+        }
+        if (validateFile) {
+          var validationError = validateFile(file);
+          if (validationError) {
+            onError(file.name + ": " + validationError);
+            setErrorMessage(file.name + ": " + validationError);
+            continue;
+          }
+        }
+        validFiles.push(file);
+      }
+      if (validFiles.length > 0) {
+        setSelectedFiles(validFiles);
+        if (onMultipleFileSelect) {
+          onMultipleFileSelect(validFiles);
+        }
+      }
+    } else {
+      // Handle single file (existing logic)
+      var _file = files[0];
+      if (_file.size > maxSize) {
+        onError("File exceeds " + Math.round(maxSize / (1024 * 1024)) + "MB.");
+        setErrorMessage("File exceeds " + Math.round(maxSize / (1024 * 1024)) + "MB.");
         return;
       }
+      if (validateFile) {
+        var _validationError = validateFile(_file);
+        if (_validationError) {
+          onError(_validationError);
+          setErrorMessage(_validationError);
+          return;
+        }
+      }
+      setPreviewUrl(URL.createObjectURL(_file));
+      if (_file.type.startsWith('video/')) {
+        generateThumbnail(_file, setThumbnailUrl);
+      }
+      if (onFileSelect) {
+        setSelectedFile(_file);
+        onFileSelect(_file);
+      }
     }
-    setPreviewUrl(URL.createObjectURL(file));
-    if (file.type.startsWith('video/')) {
-      generateThumbnail(file, setThumbnailUrl);
-    }
-    if (onFileSelect) {
-      setSelectedFile(file);
-      onFileSelect(file);
-    }
-  }, [maxSize, onFileSelect, validateFile]);
+  }, [maxSize, onFileSelect, onMultipleFileSelect, validateFile, multiple]);
   var handleClick = () => {
     var _fileInputRef$current;
     return (_fileInputRef$current = fileInputRef.current) == null ? void 0 : _fileInputRef$current.click();
@@ -12583,6 +12486,7 @@ var useUpload = _ref => {
     fileInputRef,
     videoRef,
     selectedFile,
+    selectedFiles,
     handleFileChange,
     handleClick
   };
@@ -12601,8 +12505,10 @@ var UploadView = _ref => {
     fileInputRef,
     videoRef,
     selectedFile,
+    selectedFiles,
     handleFileChange,
     handleClick,
+    multiple = false,
     containerProps,
     errorMessageProps,
     progressProps,
@@ -12761,13 +12667,14 @@ var UploadView = _ref => {
     ref: fileInputRef,
     onChange: handleFileChange,
     accept: accept,
+    multiple: multiple,
     style: {
       display: 'none'
     }
   }, views == null ? void 0 : views.view)));
 };
 
-var _excluded$H = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress", "fileType"];
+var _excluded$H = ["accept", "icon", "text", "maxSize", "onFileSelect", "onMultipleFileSelect", "validateFile", "isLoading", "progress", "fileType", "multiple"];
 var Uploader = _ref => {
   var {
       accept = '*/*',
@@ -12775,10 +12682,12 @@ var Uploader = _ref => {
       text,
       maxSize,
       onFileSelect,
+      onMultipleFileSelect,
       validateFile,
       isLoading = false,
       progress = 0,
-      fileType
+      fileType,
+      multiple = false
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var {
@@ -12788,13 +12697,16 @@ var Uploader = _ref => {
     videoRef,
     fileInputRef,
     selectedFile,
+    selectedFiles,
     handleFileChange,
     handleClick
   } = useUpload({
     accept,
     maxSize,
     onFileSelect,
-    validateFile
+    onMultipleFileSelect,
+    validateFile,
+    multiple
   });
   // Determine file type based on the selected file's MIME type if not explicitly provided
   var determineFileType = () => {
@@ -12822,11 +12734,13 @@ var Uploader = _ref => {
     errorMessage: errorMessage,
     handleFileChange: handleFileChange,
     selectedFile: selectedFile,
+    selectedFiles: selectedFiles,
     videoRef: videoRef,
     fileInputRef: fileInputRef,
     previewUrl: previewUrl,
     thumbnailUrl: thumbnailUrl,
-    fileType: detectedFileType
+    fileType: detectedFileType,
+    multiple: multiple
   }, props));
 };
 
@@ -13473,7 +13387,8 @@ var NavigationMenuTrigger = _ref4 => {
   }, children), /*#__PURE__*/React.createElement(View, Object.assign({
     transition: "transform 0.2s ease",
     transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'
-  }, views == null ? void 0 : views.indicator), /*#__PURE__*/React.createElement(ChevronDownIcon, {
+  }, views == null ? void 0 : views.indicator), /*#__PURE__*/React.createElement(ChevronIcon, {
+    orientation: "down",
     widthHeight: 16,
     color: "currentColor",
     filled: true
@@ -15060,7 +14975,8 @@ var DropdownMenuItem = _ref4 => {
     flexGrow: 1
   }, item.label), hasSubmenu && (/*#__PURE__*/React.createElement(View, Object.assign({
     marginLeft: 8
-  }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React.createElement(ChevronRightIcon, {
+  }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React.createElement(ChevronIcon, {
+    orientation: "right",
     widthHeight: 16,
     color: "currentColor",
     filled: true
@@ -21120,6 +21036,7 @@ var useChatInputState = props => {
   var [pendingFiles, setPendingFiles] = useState([]);
   var [isUploading, setIsUploading] = useState(false);
   var [isDraggingOver, setIsDraggingOver] = useState(false);
+  // Reference images are now tracked within uploadedFiles using isReferenceImage flag
   // State for model selection
   var [selectedModel, setSelectedModel] = useState('gpt-4');
   var [modelOptions] = useState([{
@@ -21177,9 +21094,17 @@ var useChatInputState = props => {
       return;
     }
     var message = value;
+    // Separate reference images from regular files
+    var referenceFiles = uploadedFiles.filter(file => file.isReferenceImage);
+    var regularFiles = uploadedFiles.filter(file => !file.isReferenceImage);
+    // Add reference image information to the message if reference images are uploaded
+    if (referenceFiles.length > 0) {
+      var referenceImageInfo = referenceFiles.map(image => "[Reference Image: " + image.path + "]").join('\n');
+      message = message ? referenceImageInfo + "\n\n" + message : referenceImageInfo;
+    }
     // Add file information to the message if files are uploaded
-    if (uploadedFiles.length > 0) {
-      var fileInfo = uploadedFiles.map(file => "[Uploaded File: " + file.path + "]").join('\n');
+    if (regularFiles.length > 0) {
+      var fileInfo = regularFiles.map(file => "[Uploaded File: " + file.path + "]").join('\n');
       message = message ? message + "\n\n" + fileInfo : fileInfo;
     }
     // Determine model and thinking mode
@@ -21198,7 +21123,7 @@ var useChatInputState = props => {
     if (!isControlled) {
       setUncontrolledValue('');
     }
-    // Clear uploaded files
+    // Clear uploaded files (including reference images)
     setUploadedFiles([]);
   };
   // Handle removing an uploaded file
@@ -21256,6 +21181,52 @@ var useChatInputState = props => {
       editableRef.current.focus();
     }
   };
+  // Handle reference image upload
+  var handleReferenceImageUpload = files => {
+    var imageFiles = files.filter(file => file.type.startsWith('image/'));
+    if (imageFiles.length === 0) {
+      console.error('Only image files are allowed as reference images');
+      return;
+    }
+    // Clear existing reference images first
+    var updatedFiles = uploadedFiles.map(file => Object.assign({}, file, {
+      isReferenceImage: false
+    }));
+    // Create reference image objects (only take the first one)
+    var newReferenceImage = {
+      name: imageFiles[0].name,
+      path: "/workspace/" + imageFiles[0].name,
+      size: imageFiles[0].size,
+      type: imageFiles[0].type,
+      localUrl: URL.createObjectURL(imageFiles[0]),
+      isReferenceImage: true
+    };
+    // Add to pending files
+    setPendingFiles(prevFiles => [...prevFiles, imageFiles[0]]);
+    // Add the reference image to uploaded files
+    setUploadedFiles([...updatedFiles, newReferenceImage]);
+  };
+  // Remove reference image
+  var removeReferenceImage = () => {
+    // Clear reference image flag from all uploaded files
+    var updatedFiles = uploadedFiles.map(file => Object.assign({}, file, {
+      isReferenceImage: false
+    }));
+    setUploadedFiles(updatedFiles);
+  };
+  // Set an uploaded file as reference image
+  var setFileAsReference = fileIndex => {
+    var file = uploadedFiles[fileIndex];
+    if (!file || !file.type.startsWith('image/')) {
+      console.error('Only image files can be set as reference images');
+      return;
+    }
+    // Update the files to mark only the selected one as reference image
+    var updatedFiles = uploadedFiles.map((f, index) => Object.assign({}, f, {
+      isReferenceImage: index === fileIndex
+    }));
+    setUploadedFiles(updatedFiles);
+  };
   return {
     value,
     handleChange,
@@ -21281,7 +21252,10 @@ var useChatInputState = props => {
     hideGuideTip,
     isReferenceImageModalShown,
     toggleReferenceImageModal,
-    handlePromptExampleSelect
+    handlePromptExampleSelect,
+    handleReferenceImageUpload,
+    removeReferenceImage,
+    setFileAsReference
   };
 };
 
@@ -21452,6 +21426,7 @@ var AttachmentGroup = _ref => {
     files,
     sandboxId,
     onRemove,
+    onSetAsReference,
     layout = 'inline',
     maxHeight = '120px',
     showPreviews = false,
@@ -21509,7 +21484,7 @@ var AttachmentGroup = _ref => {
     as: "span",
     marginLeft: "4px",
     color: "theme.primary"
-  }, "(pending)"))), /*#__PURE__*/React.createElement(View, Object.assign({
+  }, "(pending)"))), onSetAsReference && file.type.startsWith('image/') && (/*#__PURE__*/React.createElement(View, Object.assign({
     as: "button",
     type: "button",
     width: "16px",
@@ -21518,35 +21493,28 @@ var AttachmentGroup = _ref => {
     alignItems: "center",
     justifyContent: "center",
     borderRadius: "50%",
-    backgroundColor: "transparent",
-    color: "color.gray.500",
+    backgroundColor: file.isReferenceImage ? 'theme.primary' : 'transparent',
+    color: file.isReferenceImage ? 'color.white' : 'color.gray.500',
     cursor: "pointer",
     transition: "all 0.2s ease",
-    onClick: () => onRemove(index),
+    onClick: () => onSetAsReference(index),
+    title: file.isReferenceImage ? 'Reference image' : 'Set as reference image',
     _hover: {
-      backgroundColor: 'color.gray.200',
-      color: 'color.gray.700'
+      backgroundColor: file.isReferenceImage ? 'color.blue.600' : 'color.blue.100',
+      color: file.isReferenceImage ? 'color.white' : 'theme.primary'
     }
-  }, views == null ? void 0 : views.removeButton), /*#__PURE__*/React.createElement("svg", {
-    width: "10",
-    height: "10",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("line", {
-    x1: "18",
-    y1: "6",
-    x2: "6",
-    y2: "18"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "6",
-    y1: "6",
-    x2: "18",
-    y2: "18"
-  })))))));
+  }, views == null ? void 0 : views.referenceButton), /*#__PURE__*/React.createElement(ImageIcon, {
+    widthHeight: 20,
+    color: "currentColor",
+    filled: file.isReferenceImage
+  }))), /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(TrashIcon, {
+      widthHeight: 12
+    }),
+    onClick: () => onRemove(index)
+  })))));
 };
 
 var EditableInput = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -21618,132 +21586,6 @@ var EditableInput = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 EditableInput.displayName = 'EditableInput';
 
-/**
- * Handle local files without uploading to server
- */
-var handleLocalFiles = (files, setPendingFiles, setUploadedFiles) => {
-  // Filter files that exceed size limit
-  var filteredFiles = files.filter(file => {
-    if (file.size > 50 * 1024 * 1024) {
-      console.error("File size exceeds 50MB limit: " + file.name);
-      return false;
-    }
-    return true;
-  });
-  // Add files to pending files
-  setPendingFiles(prevFiles => [...prevFiles, ...filteredFiles]);
-  // Create uploaded file objects
-  var newUploadedFiles = filteredFiles.map(file => ({
-    name: file.name,
-    path: "/workspace/" + file.name,
-    size: file.size,
-    type: file.type || 'application/octet-stream',
-    localUrl: URL.createObjectURL(file)
-  }));
-  // Add files to uploaded files
-  setUploadedFiles(prev => [...prev, ...newUploadedFiles]);
-};
-/**
- * Handle files based on whether a sandboxId is available
- */
-var handleFiles = /*#__PURE__*/function () {
-  var _ref = /*#__PURE__*/_asyncToGenerator(function* (files, sandboxId, setPendingFiles, setUploadedFiles, setIsUploading) {
-    // If no sandboxId, just handle files locally
-    handleLocalFiles(files, setPendingFiles, setUploadedFiles);
-  });
-  return function handleFiles(_x, _x2, _x3, _x4, _x5) {
-    return _ref.apply(this, arguments);
-  };
-}();
-var FileUploadHandler = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  var {
-    loading,
-    disabled,
-    isAgentRunning,
-    isUploading,
-    sandboxId,
-    setPendingFiles,
-    setUploadedFiles,
-    setIsUploading,
-    views = {}
-  } = _ref2;
-  var {
-    getColor
-  } = useTheme();
-  // Clean up object URLs when component unmounts
-  useEffect(() => {
-    return () => {
-      setUploadedFiles(prev => {
-        prev.forEach(file => {
-          if (file.localUrl) {
-            URL.revokeObjectURL(file.localUrl);
-          }
-        });
-        return prev;
-      });
-    };
-  }, [setUploadedFiles]);
-  // Handle file upload button click
-  var handleFileUpload = () => {
-    if (ref && 'current' in ref && ref.current) {
-      ref.current.click();
-    }
-  };
-  // Process file upload
-  var processFileUpload = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(function* (event) {
-      if (!event.target.files || event.target.files.length === 0) return;
-      var files = Array.from(event.target.files);
-      // Handle files
-      handleFiles(files, sandboxId, setPendingFiles, setUploadedFiles, setIsUploading);
-      // Reset the input value
-      event.target.value = '';
-    });
-    return function processFileUpload(_x6) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, Object.assign({
-    type: "button",
-    onClick: handleFileUpload,
-    variant: "ghost",
-    height: "36px",
-    padding: "0 12px",
-    borderRadius: "8px",
-    backgroundColor: "transparent",
-    color: "color.gray.500",
-    disabled: loading || disabled && !isAgentRunning || isUploading,
-    _hover: {
-      backgroundColor: 'color.gray.100'
-    }
-  }, views == null ? void 0 : views.button), /*#__PURE__*/React.createElement(Horizontal, {
-    gap: 4,
-    alignItems: "center"
-  }, isUploading ? (/*#__PURE__*/React.createElement(LoadingSpinnerIcon, Object.assign({
-    widthHeight: 16,
-    color: "currentColor",
-    filled: false,
-    style: {
-      animation: 'spin 1s linear infinite'
-    }
-  }, views == null ? void 0 : views.icon))) : (/*#__PURE__*/React.createElement(UploadIcon, Object.assign({
-    widthHeight: 16,
-    color: "currentColor",
-    filled: false
-  }, views == null ? void 0 : views.icon))), /*#__PURE__*/React.createElement(Text$1, Object.assign({
-    fontSize: "14px"
-  }, views == null ? void 0 : views.text), "Attachments"))), /*#__PURE__*/React.createElement("input", {
-    type: "file",
-    ref: ref,
-    style: {
-      display: 'none'
-    },
-    onChange: processFileUpload,
-    multiple: true
-  }));
-});
-FileUploadHandler.displayName = 'FileUploadHandler';
-
 var PromptExamples = _ref => {
   var {
     examples,
@@ -21781,109 +21623,7 @@ var PromptExamples = _ref => {
   }, views == null ? void 0 : views.text), example.text)))));
 };
 
-var ReferenceImageButton = _ref => {
-  var {
-    onClick,
-    views = {}
-  } = _ref;
-  // Using theme context for potential future styling
-  return /*#__PURE__*/React.createElement(View, Object.assign({
-    as: "button",
-    type: "button",
-    display: "flex",
-    alignItems: "center",
-    gap: 4,
-    padding: "6px 10px",
-    border: "1px solid",
-    borderColor: "color.gray.300",
-    borderRadius: "4px",
-    backgroundColor: "transparent",
-    cursor: "pointer",
-    transition: "all 0.2s ease",
-    onClick: onClick,
-    _hover: {
-      backgroundColor: 'color.gray.100'
-    }
-  }, views == null ? void 0 : views.button), /*#__PURE__*/React.createElement(Text$1, Object.assign({
-    fontSize: "14px",
-    color: "color.gray.700"
-  }, views == null ? void 0 : views.text), "Reference image"), /*#__PURE__*/React.createElement(ImageIcon, Object.assign({
-    widthHeight: 20,
-    color: "currentColor",
-    filled: false,
-    strokeWidth: 2
-  }, views == null ? void 0 : views.icon)));
-};
-
-var ReferenceImageModal = _ref => {
-  var {
-    isOpen,
-    onClose,
-    views = {}
-  } = _ref;
-  // Using theme context for potential future styling
-  if (!isOpen) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(View, Object.assign({
-    position: "absolute",
-    top: "0",
-    left: "0",
-    width: "100%",
-    height: isOpen ? '300px' : '0',
-    backgroundColor: "color.white",
-    borderRadius: "8px",
-    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-    overflow: "hidden",
-    transition: "height 0.3s ease",
-    zIndex: "10"
-  }, views == null ? void 0 : views.container), /*#__PURE__*/React.createElement(View, Object.assign({
-    padding: "16px",
-    width: "100%",
-    height: "100%"
-  }, views == null ? void 0 : views.content), /*#__PURE__*/React.createElement(Text$1, {
-    fontSize: "16px",
-    fontWeight: "600",
-    marginBottom: "16px"
-  }, "Reference Image"), /*#__PURE__*/React.createElement(View, Object.assign({
-    as: "button",
-    type: "button",
-    position: "absolute",
-    top: "8px",
-    right: "8px",
-    width: "24px",
-    height: "24px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "50%",
-    backgroundColor: "transparent",
-    border: "none",
-    cursor: "pointer",
-    transition: "all 0.2s ease",
-    onClick: onClose,
-    _hover: {
-      backgroundColor: 'color.gray.100'
-    }
-  }, views == null ? void 0 : views.closeButton), /*#__PURE__*/React.createElement(CloseIcon, {
-    widthHeight: 16,
-    color: "currentColor",
-    filled: false,
-    strokeWidth: 2
-  })), /*#__PURE__*/React.createElement(View, {
-    width: "100%",
-    height: "calc(100% - 40px)",
-    backgroundColor: "color.gray.100",
-    borderRadius: "4px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    color: "color.gray.500"
-  }, "Drop an image here or click to upload"))));
-};
-
-var _excluded$18 = ["onSubmit", "placeholder", "loading", "disabled", "isAgentRunning", "onStopAgent", "autoFocus", "sandboxId", "hideAttachments", "promptExamples", "showReferenceImageButton", "errorMessage", "size", "shape", "variant", "views", "value", "handleChange", "handleSubmit", "editableRef", "fileInputRef", "isUploading", "isDraggingOver", "uploadedFiles", "removeUploadedFile", "setPendingFiles", "setUploadedFiles", "setIsUploading", "selectedModel", "handleModelChange", "modelOptions", "subscriptionStatus", "canAccessModel", "isGuideTipShown", "hideGuideTip", "isReferenceImageModalShown", "toggleReferenceImageModal", "handlePromptExampleSelect"];
+var _excluded$18 = ["onSubmit", "placeholder", "loading", "disabled", "isAgentRunning", "onStopAgent", "loadingText", "autoFocus", "sandboxId", "hideAttachments", "attachmentText", "promptExamples", "showReferenceImageButton", "errorMessage", "size", "shape", "variant", "views", "value", "handleChange", "handleSubmit", "editableRef", "fileInputRef", "isUploading", "isDraggingOver", "uploadedFiles", "removeUploadedFile", "setPendingFiles", "setUploadedFiles", "setIsUploading", "selectedModel", "handleModelChange", "modelOptions", "subscriptionStatus", "canAccessModel", "isGuideTipShown", "hideGuideTip", "isReferenceImageModalShown", "toggleReferenceImageModal", "handlePromptExampleSelect", "handleDragOver", "handleDragLeave", "handleReferenceImageUpload", "removeReferenceImage", "setFileAsReference"];
 var ChatInputView = _ref => {
   var _value$trim$length;
   var {
@@ -21892,9 +21632,11 @@ var ChatInputView = _ref => {
       loading = false,
       disabled = false,
       isAgentRunning = false,
+      loadingText = 'Agent is working...',
       autoFocus = true,
       sandboxId,
       hideAttachments = false,
+      attachmentText = '',
       promptExamples = [],
       showReferenceImageButton = false,
       errorMessage,
@@ -21907,17 +21649,18 @@ var ChatInputView = _ref => {
       handleChange,
       handleSubmit,
       editableRef,
-      fileInputRef,
       isUploading,
       isDraggingOver,
       uploadedFiles,
       removeUploadedFile,
       setPendingFiles,
       setUploadedFiles,
-      setIsUploading,
       isReferenceImageModalShown,
-      toggleReferenceImageModal,
-      handlePromptExampleSelect
+      handlePromptExampleSelect,
+      handleDragOver,
+      handleDragLeave,
+      handleReferenceImageUpload,
+      setFileAsReference
       // Other props
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
@@ -21927,39 +21670,55 @@ var ChatInputView = _ref => {
   var contentStyles = Object.assign({}, DefaultChatInputStyles.content, Sizes$1[size], Variants[variant], views == null ? void 0 : views.content);
   // Determine if the submit button should be enabled
   var hasText = ((_value$trim$length = value == null ? void 0 : value.trim().length) != null ? _value$trim$length : 0) > 0 || uploadedFiles.length > 0;
+  // Handle multiple file uploads for the Uploader component
+  var handleMultipleFileUpload = files => {
+    // Filter files that exceed size limit (50MB)
+    var filteredFiles = files.filter(file => {
+      if (file.size > 50 * 1024 * 1024) {
+        console.error("File size exceeds 50MB limit: " + file.name);
+        return false;
+      }
+      return true;
+    });
+    if (filteredFiles.length > 0) {
+      // Add files to pending files
+      setPendingFiles(prevFiles => [...prevFiles, ...filteredFiles]);
+      // Create uploaded file objects
+      var newUploadedFiles = filteredFiles.map(file => ({
+        name: file.name,
+        path: "/workspace/" + file.name,
+        size: file.size,
+        type: file.type || 'application/octet-stream',
+        localUrl: URL.createObjectURL(file),
+        isReferenceImage: false
+      }));
+      // Add files to uploaded files
+      setUploadedFiles(prev => [...prev, ...newUploadedFiles]);
+    }
+  };
   return /*#__PURE__*/React.createElement(View, Object.assign({
     display: "flex",
     flexDirection: "column",
     // Width and maxWidth will come from containerStyles
     boxSizing: "border-box"
   }, containerStyles, props, {
-    onDragOver: e => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (fileInputRef.current) {
-        props.handleDragOver == null || props.handleDragOver(e);
-      }
-    },
-    onDragLeave: e => {
-      e.preventDefault();
-      e.stopPropagation();
-      props.handleDragLeave == null || props.handleDragLeave(e);
-    },
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
     onDrop: e => {
       e.preventDefault();
       e.stopPropagation();
-      props.handleDragLeave == null || props.handleDragLeave(e);
-      if (fileInputRef.current && e.dataTransfer.files.length > 0) {
+      handleDragLeave(e);
+      if (e.dataTransfer.files.length > 0) {
         var files = Array.from(e.dataTransfer.files);
-        setPendingFiles(prevFiles => [...prevFiles, ...files]);
-        var newUploadedFiles = files.map(file => ({
-          name: file.name,
-          path: "/workspace/" + file.name,
-          size: file.size,
-          type: file.type || 'application/octet-stream',
-          localUrl: URL.createObjectURL(file)
-        }));
-        setUploadedFiles(prev => [...prev, ...newUploadedFiles]);
+        // Separate image files from other files
+        var imageFiles = files.filter(file => file.type.startsWith('image/'));
+        // Handle image files as reference images if reference image modal is open
+        if (isReferenceImageModalShown && imageFiles.length > 0) {
+          handleReferenceImageUpload(imageFiles);
+        } else {
+          // Use the same file handling logic as the Uploader component
+          handleMultipleFileUpload(files);
+        }
       }
     }
   }), promptExamples.length > 0 && (/*#__PURE__*/React.createElement(PromptExamples, {
@@ -21969,24 +21728,36 @@ var ChatInputView = _ref => {
       container: views == null ? void 0 : views.promptExamples,
       item: views == null ? void 0 : views.promptExampleItem
     }
-  })), /*#__PURE__*/React.createElement(Horizontal, Object.assign({
-    justifyContent: "space-between",
-    alignItems: "center"
-  }, views == null ? void 0 : views.header), showReferenceImageButton && (/*#__PURE__*/React.createElement(ReferenceImageButton, {
-    onClick: toggleReferenceImageModal,
-    views: {
-      button: views == null ? void 0 : views.referenceImageButton
+  })), isAgentRunning && (/*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 8,
+    padding: "8px 0",
+    animate: {
+      from: {
+        opacity: 0,
+        y: -10
+      },
+      to: {
+        opacity: 1,
+        y: 0
+      },
+      duration: '0.3s'
     }
-  }))), /*#__PURE__*/React.createElement(View, {
+  }, views == null ? void 0 : views.loadingIndicator), /*#__PURE__*/React.createElement(LoadingSpinnerIcon, {
+    widthHeight: 12,
+    color: "currentColor",
+    filled: false,
+    style: {
+      animation: 'spin 1s linear infinite'
+    }
+  }), /*#__PURE__*/React.createElement(Text$1, {
+    fontSize: "12px",
+    color: "color.gray.500"
+  }, loadingText))), /*#__PURE__*/React.createElement(View, {
     position: "relative",
     width: "100%"
-  }, /*#__PURE__*/React.createElement(ReferenceImageModal, {
-    isOpen: isReferenceImageModalShown,
-    onClose: toggleReferenceImageModal,
-    views: {
-      container: views == null ? void 0 : views.referenceImageModal
-    }
-  }), /*#__PURE__*/React.createElement(View, Object.assign({
+  }, /*#__PURE__*/React.createElement(View, Object.assign({
     as: "form",
     onSubmit: handleSubmit,
     overflowY: "auto",
@@ -22000,12 +21771,14 @@ var ChatInputView = _ref => {
     files: uploadedFiles,
     sandboxId: sandboxId,
     onRemove: removeUploadedFile,
+    onSetAsReference: setFileAsReference,
     views: {
       container: views == null ? void 0 : views.attachments,
       item: views == null ? void 0 : views.attachmentItem,
       name: views == null ? void 0 : views.attachmentName,
       size: views == null ? void 0 : views.attachmentSize,
-      removeButton: views == null ? void 0 : views.attachmentRemove
+      removeButton: views == null ? void 0 : views.attachmentRemove,
+      referenceButton: views == null ? void 0 : views.referenceButton
     }
   }), /*#__PURE__*/React.createElement(EditableInput, {
     ref: editableRef,
@@ -22026,18 +21799,46 @@ var ChatInputView = _ref => {
   }, /*#__PURE__*/React.createElement(Horizontal, {
     gap: 8,
     alignItems: "center"
-  }, !hideAttachments && (/*#__PURE__*/React.createElement(FileUploadHandler, {
-    ref: fileInputRef,
-    loading: loading,
-    disabled: disabled,
-    isAgentRunning: isAgentRunning,
-    isUploading: isUploading,
-    sandboxId: sandboxId,
-    setPendingFiles: setPendingFiles,
-    setUploadedFiles: setUploadedFiles,
-    setIsUploading: setIsUploading,
+  }, !hideAttachments && (/*#__PURE__*/React.createElement(Uploader, {
+    accept: "*/*",
+    icon: /*#__PURE__*/React.createElement(AttachmentIcon, {
+      widthHeight: 16
+    }),
+    maxSize: 50 * 1024 * 1024,
+    multiple: true,
+    onMultipleFileSelect: handleMultipleFileUpload,
+    isLoading: isUploading,
+    text: attachmentText,
+    fileType: "file",
     views: {
-      button: views == null ? void 0 : views.fileButton
+      container: Object.assign({
+        height: '36px',
+        margin: '0 12px',
+        // borderRadius: '8px',
+        // backgroundColor: 'transparent',
+        // border: '1px solid',
+        // borderColor: 'color.gray.300',
+        cursor: 'pointer',
+        _hover: {
+          backgroundColor: 'color.gray.100'
+        }
+      }, views == null ? void 0 : views.fileButton, containerStyles)
+    },
+    containerProps: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4
+    },
+    textProps: {
+      fontSize: '14px',
+      color: 'color.gray.600'
+    },
+    validateFile: file => {
+      if (file.size > 50 * 1024 * 1024) {
+        return 'File size exceeds 50MB limit';
+      }
+      return null;
     }
   }))), /*#__PURE__*/React.createElement(View, Object.assign({
     as: "button",
@@ -22073,35 +21874,12 @@ var ChatInputView = _ref => {
     fontSize: "12px",
     color: "theme.error",
     marginTop: "4px"
-  }, views == null ? void 0 : views.bottomTip), errorMessage)), isAgentRunning && (/*#__PURE__*/React.createElement(Horizontal, Object.assign({
-    justifyContent: "center",
-    alignItems: "center",
-    gap: 8,
-    padding: "8px 0",
-    animate: {
-      from: {
-        opacity: 0,
-        y: -10
-      },
-      to: {
-        opacity: 1,
-        y: 0
-      },
-      duration: '0.3s'
-    }
-  }, views == null ? void 0 : views.loadingIndicator), /*#__PURE__*/React.createElement(LoadingSpinnerIcon, {
-    widthHeight: 12,
-    color: "currentColor",
-    filled: false,
-    style: {
-      animation: 'spin 1s linear infinite'
-    }
-  }), /*#__PURE__*/React.createElement(Text$1, {
-    fontSize: "12px",
-    color: "color.gray.500"
-  }, "Agent is working..."))));
+  }, views == null ? void 0 : views.bottomTip), errorMessage)));
 };
 
+/**
+ * Interface for the ChatInput component's imperative handle
+ */
 /**
  * ChatInput component
  *
@@ -22110,15 +21888,10 @@ var ChatInputView = _ref => {
 var ChatInput = /*#__PURE__*/forwardRef((props, ref) => {
   // Get state from custom hook
   var state = useChatInputState(props);
-  // Expose methods via ref
-  useImperativeHandle(ref, () => ({
-    getPendingFiles: () => state.pendingFiles || [],
-    clearPendingFiles: () => state.setPendingFiles([])
-  }));
   // Render the view component with props and state
   return /*#__PURE__*/React.createElement(ChatInputView, Object.assign({}, props, state));
 });
 ChatInput.displayName = 'ChatInput';
 
-export { Accordion, Alert, ArrowIcon, AspectRatio, Avatar, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronDownIcon, ChevronIcon, ChevronRightIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, DropdownMenu, DustBinIcon, EditIcon, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, Flow, FolderIcon, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTextArea, FormikTextField, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SliderVerticalIcon, SpinnerIcon, StarIcon, StopIcon, SuccessIcon, Switch, Table, Tabs, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, Tree, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
+export { Accordion, Alert, ArrowIcon, AspectRatio, AttachmentIcon, Avatar, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, DropdownMenu, DustBinIcon, EditIcon, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, Flow, FolderIcon, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTextArea, FormikTextField, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StopIcon, SuccessIcon, Switch, Table, Tabs, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, Tree, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
 //# sourceMappingURL=web.esm.js.map