@app-studio/web 0.9.2 → 0.9.4

package/dist/web.umd.development.js

@@ -1,38 +1,13 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.trim-end.js'), require('react-router-dom'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/es.string.ends-with.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js'), require('core-js/modules/es.string.trim.js'), require('src/components/Loader/Loader'), require('src/components/Icon/Icon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'react-router-dom', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js', 'core-js/modules/es.string.trim.js', 'src/components/Loader/Loader', 'src/components/Icon/Icon'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, global.reactRouterDom, global.contrast, null, null, null, null, global.format, null, null, null, global.formik, null, null, null, global.zustand, null, null, null, null, null, null, null, global.Loader$1, global.Icon$1));
-}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, reactRouterDom, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_parseInt_js, es_regexp_constructor_js, es_regexp_exec_js, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, es_string_replace_js, es_string_endsWith_js, es_string_match_js, es_string_search_js, es_array_flatMap_js, es_array_unscopables_flatMap_js, es_string_trim_js, Loader$1, Icon$1) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.trim-end.js'), require('react-router-dom'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/es.string.ends-with.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js'), require('core-js/modules/es.string.trim.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'react-router-dom', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js', 'core-js/modules/es.string.trim.js'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, global.reactRouterDom, global.contrast, null, null, null, null, global.format, null, null, null, global.formik, null, null, null, global.zustand));
+}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, reactRouterDom, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_parseInt_js, es_regexp_constructor_js, es_regexp_exec_js, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
   format = format && Object.prototype.hasOwnProperty.call(format, 'default') ? format['default'] : format;
 
-  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 = {};
@@ -691,7 +666,7 @@
     _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"],
@@ -703,9 +678,9 @@
     _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"],
@@ -723,8 +698,8 @@
     _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"],
@@ -736,9 +711,7 @@
     _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 {
@@ -781,12 +754,21 @@
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    }, props), /*#__PURE__*/React__default.createElement("svg", {
       viewBox: "0 0 24 24",
       "aria-hidden": "true",
-      focusable: "false"
-    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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__default.createElement("circle", {
+      cx: "12",
+      cy: "8",
+      r: "4"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M4 20c0-4 4-7 8-7s8 3 8 7"
     })));
   };
   var HelpIcon = _ref3 => {
@@ -933,7 +915,8 @@
       "aria-hidden": "true",
       focusable: "false"
     }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 => {
@@ -977,32 +960,28 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    }, props), /*#__PURE__*/React__default.createElement("svg", {
       viewBox: "0 0 24 24",
       "aria-hidden": "true",
-      focusable: "false"
-    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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__default.createElement("polyline", {
-      points: "14 2 14 8 20 8",
-      fill: "none",
-      stroke: color,
       strokeWidth: strokeWidth
+    }, /*#__PURE__*/React__default.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__default.createElement("path", {
+      d: "M14 2V8H20"
     })));
   };
   // Video Icon Component
@@ -1156,7 +1135,7 @@
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
-        strokeWidth = 1
+        strokeWidth = 2
       } = _ref13,
       props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
@@ -1806,7 +1785,7 @@
       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',
@@ -1821,77 +1800,6 @@
       viewBox: "0 0 24 24",
       "aria-hidden": "false",
       focusable: "false"
-    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-      stroke: color,
-      x1: "4",
-      y1: "21",
-      x2: "4",
-      y2: "14"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      stroke: color,
-      x1: "4",
-      y1: "10",
-      x2: "4",
-      y2: "3"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      stroke: color,
-      x1: "12",
-      y1: "21",
-      x2: "12",
-      y2: "12"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      stroke: color,
-      x1: "12",
-      y1: "8",
-      x2: "12",
-      y2: "3"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      stroke: color,
-      x1: "20",
-      y1: "21",
-      x2: "20",
-      y2: "16"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      stroke: color,
-      x1: "20",
-      y1: "12",
-      x2: "20",
-      y2: "3"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      stroke: color,
-      x1: "1",
-      y1: "14",
-      x2: "7",
-      y2: "14"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      stroke: color,
-      x1: "9",
-      y1: "8",
-      x2: "15",
-      y2: "8"
-    }), /*#__PURE__*/React__default.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__default.createElement(IconWrapper, Object.assign({
-      widthHeight: widthHeight,
-      color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-      viewBox: "0 0 24 24",
-      "aria-hidden": "false",
-      focusable: "false"
     }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
       width: "18",
       height: "18",
@@ -1902,14 +1810,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1921,14 +1829,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1940,14 +1848,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1959,14 +1867,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1991,14 +1899,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2024,14 +1932,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2043,14 +1951,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2064,14 +1972,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2083,14 +1991,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2103,14 +2011,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2122,14 +2030,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2141,14 +2049,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2160,14 +2068,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2183,14 +2091,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2206,14 +2114,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2225,14 +2133,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2244,14 +2152,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2276,14 +2184,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2295,14 +2203,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2318,14 +2226,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2338,14 +2246,14 @@
     })));
   };
   // 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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2363,14 +2271,14 @@
     })));
   };
   // 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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2388,14 +2296,14 @@
     })));
   };
   // 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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2446,14 +2354,14 @@
     })));
   };
   // 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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2473,36 +2381,14 @@
       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__default.createElement(IconWrapper, Object.assign({
-      widthHeight: widthHeight,
-      color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-      viewBox: "0 0 24 24",
-      "aria-hidden": "false",
-      focusable: "false"
-    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2511,39 +2397,40 @@
       "aria-hidden": "false",
       focusable: "false"
     }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
     }, props), /*#__PURE__*/React__default.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__default.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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2555,14 +2442,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2584,14 +2471,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2605,14 +2492,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2624,14 +2511,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2649,14 +2536,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2674,14 +2561,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2716,14 +2603,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2751,16 +2638,6 @@
       y1: "12",
       x2: "21",
       y2: "12"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      x1: "3",
-      y1: "20",
-      x2: "8",
-      y2: "20"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      x1: "12",
-      y1: "20",
-      x2: "21",
-      y2: "20"
     }), /*#__PURE__*/React__default.createElement("line", {
       x1: "10",
       y1: "1",
@@ -2771,21 +2648,16 @@
       y1: "9",
       x2: "16",
       y2: "15"
-    }), /*#__PURE__*/React__default.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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2799,14 +2671,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2835,14 +2707,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2866,14 +2738,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2898,14 +2770,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2926,14 +2798,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2947,14 +2819,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -2980,14 +2852,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -3031,14 +2903,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -3064,14 +2936,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -3084,14 +2956,14 @@
     })));
   };
   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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -3107,14 +2979,14 @@
       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__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -3173,7 +3045,6 @@
     RefreshIcon: RefreshIcon,
     PrintIcon: PrintIcon,
     MagicWandIcon: MagicWandIcon,
-    SliderVerticalIcon: SliderVerticalIcon,
     PanelIcon: PanelIcon,
     FilterIcon: FilterIcon,
     HomeIcon: HomeIcon,
@@ -3199,10 +3070,9 @@
     SendIcon: SendIcon,
     LoadingSpinnerIcon: LoadingSpinnerIcon,
     DragHandleLinesIcon: DragHandleLinesIcon,
-    ChevronDownIcon: ChevronDownIcon,
-    ChevronRightIcon: ChevronRightIcon,
     CloseEyeIcon: CloseEyeIcon,
     TrashIcon: TrashIcon,
+    AttachmentIcon: AttachmentIcon,
     ExternalLinkIcon: ExternalLinkIcon,
     PlusIcon: PlusIcon,
     TickIcon: TickIcon,
@@ -6630,7 +6500,8 @@
         flexGrow: 1
       }, item.label), hasSubmenu && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
         marginLeft: 8
-      }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React__default.createElement(ChevronRightIcon, {
+      }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React__default.createElement(ChevronIcon, {
+        orientation: "right",
         widthHeight: 16,
         color: "currentColor",
         filled: true
@@ -12499,8 +12370,10 @@
       maxSize = 100 * 1024 * 1024,
       // 100MB default
       onFileSelect,
+      onMultipleFileSelect,
       validateFile,
       thumbnail,
+      multiple = false,
       onError = error => {
         showMessage('error', 'Error', error);
       }
@@ -12508,40 +12381,70 @@
     var fileInputRef = React.useRef(null);
     var videoRef = React.useRef(null);
     var [selectedFile, setSelectedFile] = React.useState(null);
+    var [selectedFiles, setSelectedFiles] = React.useState([]);
     var [errorMessage, setErrorMessage] = React.useState(null);
     var [previewUrl, setPreviewUrl] = React.useState(null);
     var [thumbnailUrl, setThumbnailUrl] = React.useState(thumbnail || null);
     var handleFileChange = React.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();
@@ -12559,6 +12462,7 @@
       fileInputRef,
       videoRef,
       selectedFile,
+      selectedFiles,
       handleFileChange,
       handleClick
     };
@@ -12577,8 +12481,10 @@
       fileInputRef,
       videoRef,
       selectedFile,
+      selectedFiles,
       handleFileChange,
       handleClick,
+      multiple = false,
       containerProps,
       errorMessageProps,
       progressProps,
@@ -12737,13 +12643,14 @@
       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 = '*/*',
@@ -12751,10 +12658,12 @@
         text,
         maxSize,
         onFileSelect,
+        onMultipleFileSelect,
         validateFile,
         isLoading = false,
         progress = 0,
-        fileType
+        fileType,
+        multiple = false
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
     var {
@@ -12764,13 +12673,16 @@
       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 = () => {
@@ -12798,11 +12710,13 @@
       errorMessage: errorMessage,
       handleFileChange: handleFileChange,
       selectedFile: selectedFile,
+      selectedFiles: selectedFiles,
       videoRef: videoRef,
       fileInputRef: fileInputRef,
       previewUrl: previewUrl,
       thumbnailUrl: thumbnailUrl,
-      fileType: detectedFileType
+      fileType: detectedFileType,
+      multiple: multiple
     }, props));
   };
 
@@ -13449,7 +13363,8 @@
     }, children), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       transition: "transform 0.2s ease",
       transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'
-    }, views == null ? void 0 : views.indicator), /*#__PURE__*/React__default.createElement(ChevronDownIcon, {
+    }, views == null ? void 0 : views.indicator), /*#__PURE__*/React__default.createElement(ChevronIcon, {
+      orientation: "down",
       widthHeight: 16,
       color: "currentColor",
       filled: true
@@ -15036,7 +14951,8 @@
       flexGrow: 1
     }, item.label), hasSubmenu && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       marginLeft: 8
-    }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React__default.createElement(ChevronRightIcon, {
+    }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React__default.createElement(ChevronIcon, {
+      orientation: "right",
       widthHeight: 16,
       color: "currentColor",
       filled: true
@@ -21096,6 +21012,7 @@
     var [pendingFiles, setPendingFiles] = React.useState([]);
     var [isUploading, setIsUploading] = React.useState(false);
     var [isDraggingOver, setIsDraggingOver] = React.useState(false);
+    // Reference images are now tracked within uploadedFiles using isReferenceImage flag
     // State for model selection
     var [selectedModel, setSelectedModel] = React.useState('gpt-4');
     var [modelOptions] = React.useState([{
@@ -21153,9 +21070,17 @@
         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
@@ -21174,7 +21099,7 @@
       if (!isControlled) {
         setUncontrolledValue('');
       }
-      // Clear uploaded files
+      // Clear uploaded files (including reference images)
       setUploadedFiles([]);
     };
     // Handle removing an uploaded file
@@ -21232,6 +21157,52 @@
         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,
@@ -21257,7 +21228,10 @@
       hideGuideTip,
       isReferenceImageModalShown,
       toggleReferenceImageModal,
-      handlePromptExampleSelect
+      handlePromptExampleSelect,
+      handleReferenceImageUpload,
+      removeReferenceImage,
+      setFileAsReference
     };
   };
 
@@ -21428,6 +21402,7 @@
       files,
       sandboxId,
       onRemove,
+      onSetAsReference,
       layout = 'inline',
       maxHeight = '120px',
       showPreviews = false,
@@ -21485,7 +21460,7 @@
       as: "span",
       marginLeft: "4px",
       color: "theme.primary"
-    }, "(pending)"))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    }, "(pending)"))), onSetAsReference && file.type.startsWith('image/') && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       as: "button",
       type: "button",
       width: "16px",
@@ -21494,35 +21469,28 @@
       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__default.createElement("svg", {
-      width: "10",
-      height: "10",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("line", {
-      x1: "18",
-      y1: "6",
-      x2: "6",
-      y2: "18"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      x1: "6",
-      y1: "6",
-      x2: "18",
-      y2: "18"
-    })))))));
+    }, views == null ? void 0 : views.referenceButton), /*#__PURE__*/React__default.createElement(ImageIcon, {
+      widthHeight: 20,
+      color: "currentColor",
+      filled: file.isReferenceImage
+    }))), /*#__PURE__*/React__default.createElement(Button, {
+      variant: "ghost",
+      size: "sm",
+      icon: /*#__PURE__*/React__default.createElement(TrashIcon, {
+        widthHeight: 12
+      }),
+      onClick: () => onRemove(index)
+    })))));
   };
 
   var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -21594,132 +21562,6 @@
   });
   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__*/React.forwardRef((_ref2, ref) => {
-    var {
-      loading,
-      disabled,
-      isAgentRunning,
-      isUploading,
-      sandboxId,
-      setPendingFiles,
-      setUploadedFiles,
-      setIsUploading,
-      views = {}
-    } = _ref2;
-    var {
-      getColor
-    } = appStudio.useTheme();
-    // Clean up object URLs when component unmounts
-    React.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__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(appStudio.Button, 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__default.createElement(appStudio.Horizontal, {
-      gap: 4,
-      alignItems: "center"
-    }, isUploading ? (/*#__PURE__*/React__default.createElement(LoadingSpinnerIcon, Object.assign({
-      widthHeight: 16,
-      color: "currentColor",
-      filled: false,
-      style: {
-        animation: 'spin 1s linear infinite'
-      }
-    }, views == null ? void 0 : views.icon))) : (/*#__PURE__*/React__default.createElement(UploadIcon, Object.assign({
-      widthHeight: 16,
-      color: "currentColor",
-      filled: false
-    }, views == null ? void 0 : views.icon))), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
-      fontSize: "14px"
-    }, views == null ? void 0 : views.text), "Attachments"))), /*#__PURE__*/React__default.createElement("input", {
-      type: "file",
-      ref: ref,
-      style: {
-        display: 'none'
-      },
-      onChange: processFileUpload,
-      multiple: true
-    }));
-  });
-  FileUploadHandler.displayName = 'FileUploadHandler';
-
   var PromptExamples = _ref => {
     var {
       examples,
@@ -21757,109 +21599,7 @@
     }, 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__default.createElement(appStudio.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__default.createElement(appStudio.Text, Object.assign({
-      fontSize: "14px",
-      color: "color.gray.700"
-    }, views == null ? void 0 : views.text), "Reference image"), /*#__PURE__*/React__default.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__default.createElement(appStudio.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__default.createElement(appStudio.View, Object.assign({
-      padding: "16px",
-      width: "100%",
-      height: "100%"
-    }, views == null ? void 0 : views.content), /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      fontSize: "16px",
-      fontWeight: "600",
-      marginBottom: "16px"
-    }, "Reference Image"), /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(CloseIcon, {
-      widthHeight: 16,
-      color: "currentColor",
-      filled: false,
-      strokeWidth: 2
-    })), /*#__PURE__*/React__default.createElement(appStudio.View, {
-      width: "100%",
-      height: "calc(100% - 40px)",
-      backgroundColor: "color.gray.100",
-      borderRadius: "4px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      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 {
@@ -21868,9 +21608,11 @@
         loading = false,
         disabled = false,
         isAgentRunning = false,
+        loadingText = 'Agent is working...',
         autoFocus = true,
         sandboxId,
         hideAttachments = false,
+        attachmentText = '',
         promptExamples = [],
         showReferenceImageButton = false,
         errorMessage,
@@ -21883,17 +21625,18 @@
         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);
@@ -21903,39 +21646,55 @@
     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__default.createElement(appStudio.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__default.createElement(PromptExamples, {
@@ -21945,24 +21704,36 @@
         container: views == null ? void 0 : views.promptExamples,
         item: views == null ? void 0 : views.promptExampleItem
       }
-    })), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
-      justifyContent: "space-between",
-      alignItems: "center"
-    }, views == null ? void 0 : views.header), showReferenceImageButton && (/*#__PURE__*/React__default.createElement(ReferenceImageButton, {
-      onClick: toggleReferenceImageModal,
-      views: {
-        button: views == null ? void 0 : views.referenceImageButton
+    })), isAgentRunning && (/*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(appStudio.View, {
+    }, views == null ? void 0 : views.loadingIndicator), /*#__PURE__*/React__default.createElement(LoadingSpinnerIcon, {
+      widthHeight: 12,
+      color: "currentColor",
+      filled: false,
+      style: {
+        animation: 'spin 1s linear infinite'
+      }
+    }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      fontSize: "12px",
+      color: "color.gray.500"
+    }, loadingText))), /*#__PURE__*/React__default.createElement(appStudio.View, {
       position: "relative",
       width: "100%"
-    }, /*#__PURE__*/React__default.createElement(ReferenceImageModal, {
-      isOpen: isReferenceImageModalShown,
-      onClose: toggleReferenceImageModal,
-      views: {
-        container: views == null ? void 0 : views.referenceImageModal
-      }
-    }), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       as: "form",
       onSubmit: handleSubmit,
       overflowY: "auto",
@@ -21976,12 +21747,14 @@
       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__default.createElement(EditableInput, {
       ref: editableRef,
@@ -22002,18 +21775,46 @@
     }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       gap: 8,
       alignItems: "center"
-    }, !hideAttachments && (/*#__PURE__*/React__default.createElement(FileUploadHandler, {
-      ref: fileInputRef,
-      loading: loading,
-      disabled: disabled,
-      isAgentRunning: isAgentRunning,
-      isUploading: isUploading,
-      sandboxId: sandboxId,
-      setPendingFiles: setPendingFiles,
-      setUploadedFiles: setUploadedFiles,
-      setIsUploading: setIsUploading,
+    }, !hideAttachments && (/*#__PURE__*/React__default.createElement(Uploader, {
+      accept: "*/*",
+      icon: /*#__PURE__*/React__default.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__default.createElement(appStudio.View, Object.assign({
       as: "button",
@@ -22033,15 +21834,15 @@
       _hover: {
         backgroundColor: isAgentRunning ? 'color.red.600' : hasText ? 'color.blue.600' : 'color.gray.300'
       }
-    }, views == null ? void 0 : views.submitButton), isAgentRunning ? (/*#__PURE__*/React__default.createElement(Icon$1.StopIcon, {
+    }, views == null ? void 0 : views.submitButton), isAgentRunning ? (/*#__PURE__*/React__default.createElement(StopIcon, {
       widthHeight: 16,
       color: "currentColor",
       filled: false
-    })) : loading ? (/*#__PURE__*/React__default.createElement(Loader$1.Loader, {
+    })) : loading ? (/*#__PURE__*/React__default.createElement(Loader, {
       type: "quarter",
       size: 16,
       color: "color.white"
-    })) : (/*#__PURE__*/React__default.createElement(Icon$1.SendIcon, {
+    })) : (/*#__PURE__*/React__default.createElement(SendIcon, {
       widthHeight: 16,
       color: "currentColor",
       filled: false
@@ -22049,35 +21850,12 @@
       fontSize: "12px",
       color: "theme.error",
       marginTop: "4px"
-    }, views == null ? void 0 : views.bottomTip), errorMessage)), isAgentRunning && (/*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(Icon$1.LoadingSpinnerIcon, {
-      widthHeight: 12,
-      color: "currentColor",
-      filled: false,
-      style: {
-        animation: 'spin 1s linear infinite'
-      }
-    }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      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
    *
@@ -22086,11 +21864,6 @@
   var ChatInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Get state from custom hook
     var state = useChatInputState(props);
-    // Expose methods via ref
-    React.useImperativeHandle(ref, () => ({
-      getPendingFiles: () => state.pendingFiles || [],
-      clearPendingFiles: () => state.setPendingFiles([])
-    }));
     // Render the view component with props and state
     return /*#__PURE__*/React__default.createElement(ChatInputView, Object.assign({}, props, state));
   });
@@ -22100,6 +21873,7 @@
   exports.Alert = Alert;
   exports.ArrowIcon = ArrowIcon;
   exports.AspectRatio = AspectRatio;
+  exports.AttachmentIcon = AttachmentIcon;
   exports.Avatar = Avatar;
   exports.Badge = Badge;
   exports.BatteryIcon = BatteryIcon;
@@ -22116,9 +21890,7 @@
   exports.ChatInput = ChatInput;
   exports.CheckIcon = CheckIcon;
   exports.Checkbox = Checkbox;
-  exports.ChevronDownIcon = ChevronDownIcon;
   exports.ChevronIcon = ChevronIcon;
-  exports.ChevronRightIcon = ChevronRightIcon;
   exports.ClockIcon = ClockIcon;
   exports.CloseEyeIcon = CloseEyeIcon;
   exports.CloseIcon = CloseIcon;
@@ -22217,7 +21989,6 @@
   exports.Sidebar = Sidebar;
   exports.Slider = Slider;
   exports.SliderIcon = SliderIcon;
-  exports.SliderVerticalIcon = SliderVerticalIcon;
   exports.SpinnerIcon = SpinnerIcon;
   exports.StarIcon = StarIcon;
   exports.StopIcon = StopIcon;