@app-studio/web 0.8.59 → 0.8.61

package/dist/web.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.symbol.description.js'), require('react'), require('core-js/modules/es.object.assign.js'), require('app-studio'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('react-router-dom'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('formik'), require('zustand')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.symbol.description.js', 'react', 'core-js/modules/es.object.assign.js', 'app-studio', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/web.dom-collections.iterator.js', 'react-router-dom', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'formik', 'zustand'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, global.appStudio, null, null, null, global.reactRouterDom, null, null, null, global.format, global.formik, global.zustand));
-}(this, (function (exports, es_symbol_description_js, React, es_object_assign_js, appStudio, es_array_iterator_js, es_parseFloat_js, web_domCollections_iterator_js, reactRouterDom, es_array_includes_js, es_string_includes_js, es_string_startsWith_js, format, formik, zustand) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.symbol.description.js'), require('react'), require('core-js/modules/es.object.assign.js'), require('app-studio'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('react-router-dom'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), 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')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.symbol.description.js', 'react', 'core-js/modules/es.object.assign.js', 'app-studio', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/web.dom-collections.iterator.js', 'react-router-dom', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, global.appStudio, null, null, null, global.reactRouterDom, null, null, null, global.format, global.formik, null, null, null, global.zustand));
+}(this, (function (exports, es_symbol_description_js, React, es_object_assign_js, appStudio, es_array_iterator_js, es_parseFloat_js, web_domCollections_iterator_js, reactRouterDom, es_array_includes_js, es_string_includes_js, es_string_startsWith_js, format, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   format = format && Object.prototype.hasOwnProperty.call(format, 'default') ? format['default'] : format;
@@ -68,7 +68,7 @@
     }
   };
 
-  var _excluded = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
+  var _excluded = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "weight", "size"];
   var TextContent = _ref => {
     var {
       children,
@@ -123,7 +123,6 @@
         isSub = false,
         isSup = false,
         isStriked = false,
-        isTruncated = false,
         weight = 'normal',
         size = 'md'
       } = _ref3,
@@ -139,7 +138,7 @@
       fontStyle: isItalic ? 'italic' : 'normal',
       fontWeight: appStudio.Typography.fontWeights[weight],
       textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
-    }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? (/*#__PURE__*/React__default.createElement(TruncateText, {
+    }, noLineBreak, headingStyles, props), maxLines && typeof children === 'string' ? (/*#__PURE__*/React__default.createElement(TruncateText, {
       text: children,
       maxLines: maxLines
     })) : (/*#__PURE__*/React__default.createElement(TextContent, Object.assign({
@@ -233,33 +232,33 @@
     _excluded21 = ["size", "color", "filled", "strokeWidth"],
     _excluded22 = ["size", "color", "filled", "strokeWidth"],
     _excluded23 = ["size", "color", "filled", "strokeWidth"],
-    _excluded24 = ["size", "color", "strokeWidth", "filled"],
+    _excluded24 = ["size", "color", "filled", "strokeWidth"],
     _excluded25 = ["size", "color", "filled", "strokeWidth"],
-    _excluded26 = ["size", "color", "strokeWidth", "filled"],
+    _excluded26 = ["size", "color", "filled", "strokeWidth"],
     _excluded27 = ["size", "color", "filled", "strokeWidth"],
-    _excluded28 = ["size", "color", "strokeWidth", "filled"],
+    _excluded28 = ["size", "color", "filled", "strokeWidth"],
     _excluded29 = ["size", "color", "filled", "strokeWidth"],
     _excluded30 = ["size", "color", "strokeWidth", "filled"],
     _excluded31 = ["size", "color", "filled", "strokeWidth"],
-    _excluded32 = ["size", "color", "filled", "strokeWidth"],
+    _excluded32 = ["size", "color", "strokeWidth", "filled"],
     _excluded33 = ["size", "color", "filled", "strokeWidth"],
-    _excluded34 = ["size", "color", "filled", "strokeWidth"],
+    _excluded34 = ["size", "color", "strokeWidth", "filled"],
     _excluded35 = ["size", "color", "filled", "strokeWidth"],
-    _excluded36 = ["size", "color", "filled", "strokeWidth"],
+    _excluded36 = ["size", "color", "strokeWidth", "filled"],
     _excluded37 = ["size", "color", "filled", "strokeWidth"],
     _excluded38 = ["size", "color", "filled", "strokeWidth"],
     _excluded39 = ["size", "color", "filled", "strokeWidth"],
     _excluded40 = ["size", "color", "filled", "strokeWidth"],
     _excluded41 = ["size", "color", "filled", "strokeWidth"],
     _excluded42 = ["size", "color", "filled", "strokeWidth"],
-    _excluded43 = ["size", "color", "strokeWidth", "filled"],
-    _excluded44 = ["size", "color", "strokeWidth", "filled"],
+    _excluded43 = ["size", "color", "filled", "strokeWidth"],
+    _excluded44 = ["size", "color", "filled", "strokeWidth"],
     _excluded45 = ["size", "color", "filled", "strokeWidth"],
     _excluded46 = ["size", "color", "filled", "strokeWidth"],
     _excluded47 = ["size", "color", "filled", "strokeWidth"],
     _excluded48 = ["size", "color", "filled", "strokeWidth"],
-    _excluded49 = ["size", "color", "filled", "strokeWidth"],
-    _excluded50 = ["size", "color", "filled", "strokeWidth"],
+    _excluded49 = ["size", "color", "strokeWidth", "filled"],
+    _excluded50 = ["size", "color", "strokeWidth", "filled"],
     _excluded51 = ["size", "color", "filled", "strokeWidth"],
     _excluded52 = ["size", "color", "filled", "strokeWidth"],
     _excluded53 = ["size", "color", "filled", "strokeWidth"],
@@ -267,7 +266,13 @@
     _excluded55 = ["size", "color", "filled", "strokeWidth"],
     _excluded56 = ["size", "color", "filled", "strokeWidth"],
     _excluded57 = ["size", "color", "filled", "strokeWidth"],
-    _excluded58 = ["size", "color", "strokeWidth", "filled"];
+    _excluded58 = ["size", "color", "filled", "strokeWidth"],
+    _excluded59 = ["size", "color", "filled", "strokeWidth"],
+    _excluded60 = ["size", "color", "filled", "strokeWidth"],
+    _excluded61 = ["size", "color", "filled", "strokeWidth"],
+    _excluded62 = ["size", "color", "filled", "strokeWidth"],
+    _excluded63 = ["size", "color", "filled", "strokeWidth"],
+    _excluded64 = ["size", "color", "strokeWidth", "filled"];
   // Default wrapper component for consistent sizing and styling
   var IconWrapper = _ref => {
     var {
@@ -316,7 +321,7 @@
       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"
     })));
   };
-  var TwitterIcon = _ref3 => {
+  var DragHandleIcon = _ref3 => {
     var {
         size = 24,
         color = 'currentColor',
@@ -331,6 +336,148 @@
       viewBox: "0 0 24 24",
       "aria-hidden": "true",
       focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("circle", {
+      cx: "9",
+      cy: "6",
+      r: "2"
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "9",
+      cy: "12",
+      r: "2"
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "9",
+      cy: "18",
+      r: "2"
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "15",
+      cy: "6",
+      r: "2"
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "15",
+      cy: "12",
+      r: "2"
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "15",
+      cy: "18",
+      r: "2"
+    }))));
+  };
+  // File Icon Component
+  var FileIcon = _ref4 => {
+    var {
+        size = 24,
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref4,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      size: size,
+      color: color
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      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",
+      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
+    })));
+  };
+  // Video Icon Component
+  var VideoIcon = _ref5 => {
+    var {
+        size = 24,
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref5,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      size: size,
+      color: color
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
+      x: "2",
+      y: "4",
+      width: "20",
+      height: "16",
+      rx: "2",
+      ry: "2",
+      fill: filled ? color : 'none',
+      stroke: filled ? 'none' : color,
+      strokeWidth: filled ? 0 : strokeWidth
+    }), /*#__PURE__*/React__default.createElement("polygon", {
+      points: "10 8 16 12 10 16 10 8",
+      fill: filled ? filled ? 'white' : color : 'none',
+      stroke: filled ? 'none' : color,
+      strokeWidth: filled ? 0 : strokeWidth
+    })));
+  };
+  // Image Icon Component
+  var ImageIcon = _ref6 => {
+    var {
+        size = 24,
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref6,
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      size: size,
+      color: color
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
+      x: "2",
+      y: "2",
+      width: "20",
+      height: "20",
+      rx: "2",
+      ry: "2",
+      fill: filled ? color : 'none',
+      stroke: filled ? 'none' : color,
+      strokeWidth: filled ? 0 : strokeWidth
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "8.5",
+      cy: "8.5",
+      r: "1.5",
+      fill: filled ? filled ? 'white' : color : 'none',
+      stroke: filled ? 'none' : color,
+      strokeWidth: filled ? 0 : strokeWidth
+    }), /*#__PURE__*/React__default.createElement("polyline", {
+      points: "21 15 16 10 5 21",
+      fill: "none",
+      stroke: filled ? 'white' : color,
+      strokeWidth: strokeWidth
+    })));
+  };
+  var TwitterIcon = _ref7 => {
+    var {
+        size = 24,
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref7,
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      size: size,
+      color: color
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      focusable: "false"
     }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
       d: "M22.46 6.01c-.83.37-1.72.62-2.65.74a4.6 4.6 0 0 0 2.01-2.54 9.2 9.2 0 0 1-2.91 1.11 4.54 4.54 0 0 0-7.75 4.14A12.86 12.86 0 0 1 3.15 4.47a4.54 4.54 0 0 0 1.4 6.06 4.5 4.5 0 0 1-2.06-.57v.06a4.54 4.54 0 0 0 3.64 4.45 4.61 4.61 0 0 1-2.05.08 4.54 4.54 0 0 0 4.23 3.15 9.12 9.12 0 0 1-5.64 1.94c-.37 0-.74-.02-1.1-.07A12.86 12.86 0 0 0 8.21 21c8.38 0 12.96-6.94 12.96-12.96 0-.2 0-.4-.01-.6a9.28 9.28 0 0 0 2.3-2.37z",
       fill: filled ? color : 'none',
@@ -338,14 +485,14 @@
       strokeWidth: filled ? 0 : strokeWidth
     })));
   };
-  var XIcon = _ref4 => {
+  var XIcon = _ref8 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+      } = _ref8,
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -361,14 +508,14 @@
     })));
   };
   // Example of a Twitch Icon
-  var TwitchIcon = _ref5 => {
+  var TwitchIcon = _ref9 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+      } = _ref9,
+      props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -389,14 +536,14 @@
     })));
   };
   // Example of another Icon: CloseIcon
-  var CloseIcon = _ref6 => {
+  var CloseIcon = _ref10 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+      } = _ref10,
+      props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -418,14 +565,14 @@
       y2: "18"
     })));
   };
-  var InstagramIcon = _ref7 => {
+  var InstagramIcon = _ref11 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref7,
-      props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+      } = _ref11,
+      props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -449,14 +596,14 @@
       y2: "6.5"
     })));
   };
-  var YoutubeIcon = _ref8 => {
+  var YoutubeIcon = _ref12 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref8,
-      props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
+      } = _ref12,
+      props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -477,14 +624,14 @@
       strokeWidth: strokeWidth
     })));
   };
-  var FacebookIcon = _ref9 => {
+  var FacebookIcon = _ref13 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref9,
-      props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
+      } = _ref13,
+      props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -499,14 +646,14 @@
       strokeWidth: filled ? 0 : strokeWidth
     })));
   };
-  var LinkedinIcon = _ref10 => {
+  var LinkedinIcon = _ref14 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref10,
-      props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
+      } = _ref14,
+      props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -525,14 +672,14 @@
       r: "2"
     })));
   };
-  var ThreadsIcon = _ref11 => {
+  var ThreadsIcon = _ref15 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref11,
-      props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
+      } = _ref15,
+      props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -547,15 +694,15 @@
     })));
   };
   // Example Refactored Icon: MinusIcon without undefined 'padding' prop
-  var MinusIcon = _ref12 => {
+  var MinusIcon = _ref16 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         // Assuming minus can be filled; adjust as needed
         strokeWidth = 1
-      } = _ref12,
-      props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
+      } = _ref16,
+      props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -572,14 +719,14 @@
     })));
   };
   // Example Refactored Icon: InfoIcon with accessibility enhancements
-  var InfoIcon = _ref13 => {
+  var InfoIcon = _ref17 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref13,
-      props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
+      } = _ref17,
+      props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -593,14 +740,52 @@
       d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
     })));
   };
-  var HeartIcon = _ref14 => {
+  var PlayIcon = _ref18 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref14,
-      props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
+      } = _ref18,
+      props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      size: size,
+      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: "M8 5v14l11-7z"
+    })));
+  };
+  var PauseIcon = _ref19 => {
+    var {
+        size = 24,
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref19,
+      props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      size: size,
+      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: "M6 4h4v16H6V4zm8 0h4v16h-4V4z"
+    })));
+  };
+  var HeartIcon = _ref20 => {
+    var {
+        size = 24,
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref20,
+      props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -612,14 +797,14 @@
       d: "M20.84 4.61c-1.54-1.56-4.04-1.56-5.59 0l-.7.72-.7-.72a3.95 3.95 0 0 0-5.59 0c-1.56 1.56-1.56 4.09 0 5.66l6.29 6.36 6.29-6.36c1.56-1.56 1.56-4.09 0-5.66z"
     })));
   };
-  var StarIcon = _ref15 => {
+  var StarIcon = _ref21 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref15,
-      props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
+      } = _ref21,
+      props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -631,14 +816,14 @@
       points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
     })));
   };
-  var SaveIcon = _ref16 => {
+  var SaveIcon = _ref22 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref16,
-      props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
+      } = _ref22,
+      props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -654,14 +839,14 @@
       points: "7 3 7 8 15 8"
     })));
   };
-  var WarningIcon = _ref17 => {
+  var WarningIcon = _ref23 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref17,
-      props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
+      } = _ref23,
+      props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -685,14 +870,14 @@
       y2: "15"
     })));
   };
-  var BatteryIcon = _ref18 => {
+  var BatteryIcon = _ref24 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref18,
-      props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
+      } = _ref24,
+      props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -704,14 +889,14 @@
       d: "M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"
     })));
   };
-  var BookmarkIcon = _ref19 => {
+  var BookmarkIcon = _ref25 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref19,
-      props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
+      } = _ref25,
+      props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -723,14 +908,14 @@
       d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
     })));
   };
-  var CloudIcon = _ref20 => {
+  var CloudIcon = _ref26 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref20,
-      props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
+      } = _ref26,
+      props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -742,14 +927,14 @@
       d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"
     })));
   };
-  var CopyIcon = _ref21 => {
+  var CopyIcon = _ref27 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref21,
-      props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
+      } = _ref27,
+      props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -768,14 +953,14 @@
       d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
     })));
   };
-  var DustBinIcon = _ref22 => {
+  var DustBinIcon = _ref28 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref22,
-      props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
+      } = _ref28,
+      props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -787,14 +972,14 @@
       d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
     })));
   };
-  var EditIcon = _ref23 => {
+  var EditIcon = _ref29 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref23,
-      props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
+      } = _ref29,
+      props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -806,14 +991,14 @@
       d: "M18.3785 8.44975L8.9636 17.8648C8.6844 18.144 8.3288 18.3343 7.94161 18.4117L4.99988 19.0001L5.58823 16.0583C5.66566 15.6711 5.85597 15.3155 6.13517 15.0363L15.5501 5.62132M18.3785 8.44975L19.7927 7.03553C20.1832 6.64501 20.1832 6.01184 19.7927 5.62132L18.3785 4.20711C17.988 3.81658 17.3548 3.81658 16.9643 4.20711L15.5501 5.62132M18.3785 8.44975L15.5501 5.62132"
     })));
   };
-  var ErrorIcon = _ref24 => {
+  var ErrorIcon = _ref30 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = true
-      } = _ref24,
-      props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
+      } = _ref30,
+      props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -839,14 +1024,14 @@
       stroke: filled ? 'white' : color
     })));
   };
-  var DownloadIcon = _ref25 => {
+  var DownloadIcon = _ref31 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref25,
-      props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
+      } = _ref31,
+      props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -858,14 +1043,14 @@
       d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
     })));
   };
-  var MenuIcon = _ref26 => {
+  var MenuIcon = _ref32 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = false
-      } = _ref26,
-      props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
+      } = _ref32,
+      props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -893,14 +1078,14 @@
       y2: "18"
     })));
   };
-  var ShareIcon = _ref27 => {
+  var ShareIcon = _ref33 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref27,
-      props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
+      } = _ref33,
+      props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -934,14 +1119,14 @@
       y2: "10.49"
     })));
   };
-  var RefreshIcon = _ref28 => {
+  var RefreshIcon = _ref34 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = false
-      } = _ref28,
-      props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
+      } = _ref34,
+      props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -955,14 +1140,14 @@
       d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10"
     })));
   };
-  var PrintIcon = _ref29 => {
+  var PrintIcon = _ref35 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref29,
-      props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
+      } = _ref35,
+      props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -975,14 +1160,14 @@
       d: "M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"
     })));
   };
-  var PanelIcon = _ref30 => {
+  var PanelIcon = _ref36 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = false
-      } = _ref30,
-      props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
+      } = _ref36,
+      props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1046,14 +1231,14 @@
       y2: "16"
     })));
   };
-  var FilterIcon = _ref31 => {
+  var FilterIcon = _ref37 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref31,
-      props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
+      } = _ref37,
+      props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1065,14 +1250,14 @@
       d: "M3 4h18l-7 10v5l-4 2v-7L3 4z"
     })));
   };
-  var HomeIcon = _ref32 => {
+  var HomeIcon = _ref38 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref32,
-      props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
+      } = _ref38,
+      props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1084,14 +1269,14 @@
       d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"
     })));
   };
-  var LocationIcon = _ref33 => {
+  var LocationIcon = _ref39 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref33,
-      props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
+      } = _ref39,
+      props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1103,14 +1288,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 = _ref34 => {
+  var LockIcon = _ref40 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref34,
-      props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
+      } = _ref40,
+      props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1129,14 +1314,14 @@
       d: "M7 11V7a5 5 0 0 1 10 0v4"
     })));
   };
-  var MicrophoneIcon = _ref35 => {
+  var MicrophoneIcon = _ref41 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref35,
-      props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
+      } = _ref41,
+      props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1162,14 +1347,14 @@
       y2: "23"
     })));
   };
-  var MoonIcon = _ref36 => {
+  var MoonIcon = _ref42 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref36,
-      props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
+      } = _ref42,
+      props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1181,14 +1366,14 @@
       d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
     })));
   };
-  var NotificationIcon = _ref37 => {
+  var NotificationIcon = _ref43 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref37,
-      props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
+      } = _ref43,
+      props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1202,14 +1387,14 @@
       d: "M13.73 21a2 2 0 0 1-3.46 0"
     })));
   };
-  var OpenEyeIcon = _ref38 => {
+  var OpenEyeIcon = _ref44 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref38,
-      props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
+      } = _ref44,
+      props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1221,14 +1406,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 = _ref39 => {
+  var ProfileIcon = _ref45 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref39,
-      props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
+      } = _ref45,
+      props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1241,14 +1426,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 = _ref40 => {
+  var SettingsIcon = _ref46 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref40,
-      props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
+      } = _ref46,
+      props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1260,14 +1445,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 = _ref41 => {
+  var SuccessIcon = _ref47 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref41,
-      props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
+      } = _ref47,
+      props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1279,14 +1464,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 = _ref42 => {
+  var UnLikeIcon = _ref48 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref42,
-      props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
+      } = _ref48,
+      props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1298,14 +1483,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 = _ref43 => {
+  var ClockIcon = _ref49 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = false
-      } = _ref43,
-      props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
+      } = _ref49,
+      props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1321,14 +1506,14 @@
       points: "12 6 12 12 16 14"
     })));
   };
-  var CameraIcon = _ref44 => {
+  var CameraIcon = _ref50 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = false
-      } = _ref44,
-      props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
+      } = _ref50,
+      props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1344,14 +1529,14 @@
       r: "4"
     })));
   };
-  var BluetoothIcon = _ref45 => {
+  var BluetoothIcon = _ref51 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref45,
-      props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
+      } = _ref51,
+      props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1363,14 +1548,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 = _ref46 => {
+  var LikeIcon = _ref52 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref46,
-      props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
+      } = _ref52,
+      props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1382,14 +1567,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 = _ref47 => {
+  var UnlockIcon = _ref53 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref47,
-      props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
+      } = _ref53,
+      props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1408,14 +1593,14 @@
       d: "M7 11V7a5 5 0 0 1 9.9-1"
     })));
   };
-  var WifiIcon = _ref48 => {
+  var WifiIcon = _ref54 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref48,
-      props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
+      } = _ref54,
+      props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1427,14 +1612,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 = _ref49 => {
+  var UploadIcon = _ref55 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref49,
-      props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
+      } = _ref55,
+      props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1450,14 +1635,14 @@
       d: "M12 12l0 9"
     })));
   };
-  var SearchIcon = _ref50 => {
+  var SearchIcon = _ref56 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref50,
-      props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
+      } = _ref56,
+      props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1469,14 +1654,14 @@
       d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
     })));
   };
-  var CloseEyeIcon = _ref51 => {
+  var CloseEyeIcon = _ref57 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref51,
-      props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
+      } = _ref57,
+      props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1489,14 +1674,14 @@
       fill: "currentColor"
     })));
   };
-  var ExternalLinkIcon = _ref52 => {
+  var ExternalLinkIcon = _ref58 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref52,
-      props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
+      } = _ref58,
+      props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1508,14 +1693,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 = _ref53 => {
+  var PlusIcon = _ref59 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref53,
-      props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
+      } = _ref59,
+      props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1537,14 +1722,14 @@
       y2: "12"
     })));
   };
-  var TickIcon = _ref54 => {
+  var TickIcon = _ref60 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref54,
-      props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
+      } = _ref60,
+      props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1558,14 +1743,14 @@
       strokeLinejoin: "round"
     })));
   };
-  var BoldArrowIcon = _ref55 => {
+  var BoldArrowIcon = _ref61 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref55,
-      props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
+      } = _ref61,
+      props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1577,14 +1762,14 @@
       d: "M12 4l7 7h-4v7h-6v-7H5l7-7z"
     })));
   };
-  var ArrowIcon = _ref56 => {
+  var ArrowIcon = _ref62 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref56,
-      props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
+      } = _ref62,
+      props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1602,14 +1787,14 @@
       points: "6 12 12 6 18 12"
     })));
   };
-  var SpinnerIcon = _ref57 => {
+  var SpinnerIcon = _ref63 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref57,
-      props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
+      } = _ref63,
+      props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1627,14 +1812,14 @@
       strokeOpacity: "1"
     })));
   };
-  var CalendarIcon = _ref58 => {
+  var CalendarIcon = _ref64 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = false
-      } = _ref58,
-      props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
+      } = _ref64,
+      props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1673,6 +1858,10 @@
   var Icon = {
     __proto__: null,
     ChevronIcon: ChevronIcon,
+    DragHandleIcon: DragHandleIcon,
+    FileIcon: FileIcon,
+    VideoIcon: VideoIcon,
+    ImageIcon: ImageIcon,
     TwitterIcon: TwitterIcon,
     XIcon: XIcon,
     TwitchIcon: TwitchIcon,
@@ -1684,6 +1873,8 @@
     ThreadsIcon: ThreadsIcon,
     MinusIcon: MinusIcon,
     InfoIcon: InfoIcon,
+    PlayIcon: PlayIcon,
+    PauseIcon: PauseIcon,
     HeartIcon: HeartIcon,
     StarIcon: StarIcon,
     SaveIcon: SaveIcon,
@@ -2506,7 +2697,7 @@
   // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
   var Loader = LoaderComponent;
 
-  var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode"];
+  var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "containerProps", "linkProps"];
   var contrast = /*#__PURE__*/require('contrast');
   var ButtonView = _ref => {
     var _props$onClick;
@@ -2541,7 +2732,9 @@
         isHovered,
         setIsHovered = () => {},
         isExternal = false,
-        themeMode: elementMode
+        themeMode: elementMode,
+        containerProps,
+        linkProps
         // Defines CSS properties for 'outline' variant of the button with conditional styles based on reverse state.
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
@@ -2604,7 +2797,11 @@
     var changePadding = isIconRounded ? IconSizes$1[size] : ButtonSizes[size];
     var content = /*#__PURE__*/React__default.createElement(Horizontal, {
       gap: 10
-    }, isLoading && loaderPosition === 'left' && /*#__PURE__*/React__default.createElement(Loader, Object.assign({}, loaderProps)), icon && iconPosition === 'left' && !isLoading && icon, children, icon && iconPosition === 'right' && !isLoading && icon, isLoading && loaderPosition === 'right' && /*#__PURE__*/React__default.createElement(Loader, Object.assign({}, loaderProps)));
+    }, isLoading && loaderPosition === 'left' && /*#__PURE__*/React__default.createElement(Loader, Object.assign({}, loaderProps)), icon && iconPosition === 'left' && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, isHovered ? {
+      animate: appStudio.Animation.jackInTheBox({})
+    } : {}), icon)), children, icon && iconPosition === 'right' && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, isHovered ? {
+      animate: appStudio.Animation.jackInTheBox({})
+    } : {}), icon)), isLoading && loaderPosition === 'right' && /*#__PURE__*/React__default.createElement(Loader, Object.assign({}, loaderProps)));
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       gap: 8,
       as: "button",
@@ -2624,12 +2821,12 @@
     }, hovering && !props.isDisabled ? {
       transition: 'transform 0.3s ease',
       transform: 'translateY(-5px)'
-    } : {}, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, shadow, props), variant === 'link' && to ? (/*#__PURE__*/React__default.createElement(Link, {
+    } : {}, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, shadow, props, containerProps), variant === 'link' && to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
       to: to,
       textDecorationColor: colorScheme,
       colorScheme: colorScheme,
       isExternal: isExternal
-    }, content)) : content);
+    }, linkProps), content)) : content);
   };
 
   // Importing a custom hook to manage the state specific to the button component.
@@ -6752,6 +6949,277 @@
     return visible ? MessageContainer : null;
   };
 
+  var useUpload = _ref => {
+    var {
+      maxSize = 100 * 1024 * 1024,
+      // 100MB default
+      onFileSelect,
+      validateFile,
+      thumbnail,
+      onError = error => {
+        showMessage('error', 'Error', error);
+      }
+    } = _ref;
+    var fileInputRef = React.useRef(null);
+    var videoRef = React.useRef(null);
+    var [selectedFile, setSelectedFile] = React.useState(null);
+    var [errorMessage, setErrorMessage] = React.useState(null);
+    var [previewUrl, setPreviewUrl] = React.useState(null);
+    var [thumbnailUrl, setThumbnailUrl] = React.useState(thumbnail || null);
+    var generateThumbnail = videoFile => {
+      var video = document.createElement('video');
+      video.preload = 'metadata';
+      video.onloadedmetadata = () => {
+        video.currentTime = 1;
+      };
+      video.oncanplay = () => {
+        var canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        var ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          var thumbnailDataUrl = canvas.toDataURL('image/jpeg');
+          setThumbnailUrl(thumbnailDataUrl);
+        }
+        URL.revokeObjectURL(video.src);
+      };
+      video.src = URL.createObjectURL(videoFile);
+    };
+    var handleFileChange = React.useCallback(event => {
+      var _event$target$files;
+      var file = (_event$target$files = event.target.files) == null ? void 0 : _event$target$files[0];
+      setErrorMessage(null);
+      if (!file) {
+        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);
+          return;
+        }
+      }
+      setPreviewUrl(URL.createObjectURL(file));
+      if (file.type.startsWith('video/')) {
+        generateThumbnail(file);
+      }
+      if (onFileSelect) {
+        setSelectedFile(file);
+        onFileSelect(file);
+      }
+    }, [maxSize, onFileSelect, validateFile]);
+    var handleClick = () => {
+      var _fileInputRef$current;
+      return (_fileInputRef$current = fileInputRef.current) == null ? void 0 : _fileInputRef$current.click();
+    };
+    React.useEffect(() => {
+      return () => {
+        if (previewUrl) URL.revokeObjectURL(previewUrl);
+        if (thumbnailUrl) URL.revokeObjectURL(thumbnailUrl);
+      };
+    }, [previewUrl, thumbnailUrl]);
+    return {
+      previewUrl,
+      thumbnailUrl,
+      errorMessage,
+      fileInputRef,
+      videoRef,
+      selectedFile,
+      handleFileChange,
+      handleClick
+    };
+  };
+  var Uploader = _ref2 => {
+    var {
+      accept = '*/*',
+      isLoading = false,
+      progress = 0,
+      icon,
+      text,
+      maxSize,
+      onFileSelect,
+      validateFile,
+      containerProps,
+      errorMessageProps,
+      progressProps,
+      videoProps,
+      imageProps,
+      iconProps,
+      textProps,
+      renderError = _ref3 => {
+        var {
+          errorMessage,
+          errorMessageProps
+        } = _ref3;
+        return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+          color: "red",
+          fontSize: 12,
+          marginTop: 8
+        }, errorMessageProps), errorMessage);
+      },
+      renderText = _ref4 => {
+        var {
+          text,
+          textProps
+        } = _ref4;
+        return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+          marginTop: 8
+        }, textProps), text);
+      },
+      renderFile = _ref5 => {
+        var {
+          selectedFile,
+          textProps
+        } = _ref5;
+        return /*#__PURE__*/React__default.createElement(Center, {
+          marginTop: 8,
+          gap: 10,
+          flexDirection: "column"
+        }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+          maxLines: 2
+        }, textProps), selectedFile.name), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, textProps), "(", Math.round(selectedFile.size / 1024), " KB)"));
+      },
+      renderVideo = _ref6 => {
+        var {
+          selectedFile,
+          thumbnailUrl,
+          videoRef,
+          videoProps,
+          imageProps,
+          iconProps
+        } = _ref6;
+        console.log('thumbnailUrl', thumbnailUrl);
+        return /*#__PURE__*/React__default.createElement(appStudio.View, {
+          width: "100%",
+          height: "100%",
+          position: "relative"
+        }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+          as: "video",
+          width: 0,
+          height: 0,
+          src: selectedFile == null ? void 0 : selectedFile.name,
+          style: {
+            objectFit: 'cover'
+          },
+          ref: videoRef
+        }, videoProps)), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
+          src: thumbnailUrl,
+          alt: "Video Thumbnail",
+          width: "100%",
+          height: "100%",
+          objectFit: "cover"
+        }, imageProps)), /*#__PURE__*/React__default.createElement(PlayIcon, Object.assign({
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          color: "white",
+          size: '20%',
+          transform: "translate(-50%, -50%)"
+        }, iconProps)));
+      },
+      renderImage = _ref7 => {
+        var {
+          previewUrl,
+          imageProps
+        } = _ref7;
+        return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
+          src: previewUrl,
+          alt: "Preview",
+          width: "100%",
+          height: "100%",
+          objectFit: "cover"
+        }, imageProps));
+      },
+      renderProgress = _ref8 => {
+        var {
+          progress,
+          progressProps
+        } = _ref8;
+        return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+          gap: 8,
+          alignItems: "center"
+        }, progressProps), /*#__PURE__*/React__default.createElement(appStudio.View, {
+          height: 4,
+          backgroundColor: "rgba(0,0,0,0.1)",
+          width: "100%",
+          borderRadius: 2
+        }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+          height: 4,
+          width: progress + "%",
+          borderRadius: 2
+        })), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+          fontSize: 12
+        }, progress, "%"));
+      }
+    } = _ref2;
+    var {
+      previewUrl,
+      thumbnailUrl,
+      errorMessage,
+      videoRef,
+      fileInputRef,
+      selectedFile,
+      handleFileChange,
+      handleClick
+    } = useUpload({
+      accept,
+      maxSize,
+      onFileSelect,
+      validateFile
+    });
+    var fileType = previewUrl && accept.includes('video') ? 'video' : previewUrl && accept.includes('image') ? 'image' : 'file';
+    return /*#__PURE__*/React__default.createElement(Center, Object.assign({
+      onClick: handleClick,
+      cursor: "pointer",
+      border: "1px solid rgba(0,0,0,0.1)",
+      borderRadius: 8,
+      padding: 16,
+      flexDirection: "column",
+      overflow: "hidden",
+      position: "relative"
+    }, containerProps), progress == 100 && fileType == 'image' && previewUrl && renderImage({
+      previewUrl,
+      imageProps
+    }), progress == 100 && fileType == 'video' && thumbnailUrl && renderVideo({
+      thumbnailUrl,
+      videoRef,
+      videoProps,
+      iconProps
+    }), progress == 100 && fileType == 'file' && previewUrl && renderFile({
+      selectedFile,
+      textProps
+    }), progress < 100 && (icon || /*#__PURE__*/React__default.createElement(UploadIcon, Object.assign({
+      size: 32
+    }, iconProps))), !selectedFile && text && renderText({
+      text,
+      textProps
+    }), isLoading && renderProgress({
+      progress,
+      progressProps
+    }), renderError({
+      errorMessage,
+      errorMessageProps
+    }), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      as: "input",
+      type: "file",
+      ref: fileInputRef,
+      onChange: handleFileChange,
+      accept: accept,
+      style: {
+        display: 'none'
+      }
+    }));
+  };
+
   var useModalStore = /*#__PURE__*/zustand.create(set => ({
     modals: [],
     onHide: name => name,
@@ -7471,6 +7939,135 @@
   // Expose the ToggleGroupComponent for import into other modules
   var ToggleGroup = ToggleGroupComponent;
 
+  var useDragAndDropState = _ref => {
+    var {
+      items: initialItems,
+      onChange
+    } = _ref;
+    var [items, setItems] = React.useState(initialItems);
+    var [draggedItem, setDraggedItem] = React.useState(null);
+    var [draggedIndex, setDraggedIndex] = React.useState(null);
+    var dragStartPosRef = React.useRef({
+      x: 0,
+      y: 0
+    });
+    var itemRefs = React.useRef([]);
+    var handleDragStart = React.useCallback((e, index) => {
+      e.preventDefault();
+      document.body.style.cursor = 'grabbing';
+      var clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+      var clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+      dragStartPosRef.current = {
+        x: clientX,
+        y: clientY
+      };
+      setDraggedIndex(index);
+      setDraggedItem(items[index]);
+    }, [items]);
+    var handleDragMove = React.useCallback(e => {
+      if (draggedIndex === null) return;
+      var clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+      var clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+      var draggedElement = itemRefs.current[draggedIndex];
+      if (!draggedElement) return;
+      var offsetX = clientX - dragStartPosRef.current.x;
+      var offsetY = clientY - dragStartPosRef.current.y;
+      draggedElement.style.transform = "translate(" + offsetX + "px, " + offsetY + "px)";
+      draggedElement.style.zIndex = '1000';
+      // Find the item being hovered over
+      var hoveredIndex = itemRefs.current.findIndex((itemRef, index) => {
+        if (!itemRef || index === draggedIndex) return false;
+        var rect = itemRef.getBoundingClientRect();
+        return clientY >= rect.top && clientY <= rect.bottom;
+      });
+      if (hoveredIndex !== -1 && hoveredIndex !== draggedIndex) {
+        var newItems = [...items];
+        var [removed] = newItems.splice(draggedIndex, 1);
+        newItems.splice(hoveredIndex, 0, removed);
+        setItems(newItems);
+        setDraggedIndex(hoveredIndex);
+        onChange == null || onChange(newItems);
+        dragStartPosRef.current = {
+          x: clientX,
+          y: clientY
+        };
+      }
+    }, [draggedIndex, items, onChange]);
+    var handleDragEnd = React.useCallback(() => {
+      document.body.style.cursor = '';
+      itemRefs.current.forEach(el => {
+        if (el) {
+          el.style.transform = '';
+          el.style.zIndex = '';
+        }
+      });
+      setDraggedIndex(null);
+      setDraggedItem(null);
+    }, [draggedIndex]);
+    React.useEffect(() => {
+      if (draggedIndex !== null) {
+        window.addEventListener('mousemove', handleDragMove);
+        window.addEventListener('touchmove', handleDragMove);
+        window.addEventListener('mouseup', handleDragEnd);
+        window.addEventListener('touchend', handleDragEnd);
+      }
+      return () => {
+        window.removeEventListener('mousemove', handleDragMove);
+        window.removeEventListener('touchmove', handleDragMove);
+        window.removeEventListener('mouseup', handleDragEnd);
+        window.removeEventListener('touchend', handleDragEnd);
+      };
+    }, [draggedIndex, handleDragMove, handleDragEnd]);
+    return {
+      items,
+      draggedItem,
+      draggedIndex,
+      itemRefs,
+      handleDragStart
+    };
+  };
+
+  var DragAndDropView = _ref => {
+    var {
+      items,
+      renderItem,
+      containerProps,
+      itemProps,
+      draggedIndex,
+      itemRefs,
+      handleDragStart
+    } = _ref;
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      overflow: "hidden",
+      position: "relative"
+    }, containerProps), items.map((item, index) => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      key: index,
+      ref: el => itemRefs.current[index] = el,
+      onMouseDown: e => handleDragStart(e, index),
+      onTouchStart: e => handleDragStart(e, index),
+      position: "relative",
+      cursor: "grab",
+      transition: "transform 0.2s",
+      backgroundColor: draggedIndex === index ? 'color.gray.100' : 'transparent'
+    }, itemProps), renderItem ? renderItem(item, index) : item))));
+  };
+
+  var DragAndDropComponent = props => {
+    var {
+      items,
+      draggedIndex,
+      itemRefs,
+      handleDragStart
+    } = useDragAndDropState(props);
+    return /*#__PURE__*/React__default.createElement(DragAndDropView, Object.assign({}, props, {
+      items: items,
+      draggedIndex: draggedIndex,
+      itemRefs: itemRefs,
+      handleDragStart: handleDragStart
+    }));
+  };
+  var DragAndDrop = DragAndDropComponent;
+
   exports.Alert = Alert;
   exports.ArrowIcon = ArrowIcon;
   exports.AspectRatio = AspectRatio;
@@ -7497,11 +8094,15 @@
   exports.CountryPicker = CountryPicker;
   exports.DatePicker = DatePicker;
   exports.DownloadIcon = DownloadIcon;
+  exports.DragAndDrop = DragAndDrop;
+  exports.DragAndDropComponent = DragAndDropComponent;
+  exports.DragHandleIcon = DragHandleIcon;
   exports.DustBinIcon = DustBinIcon;
   exports.EditIcon = EditIcon;
   exports.ErrorIcon = ErrorIcon;
   exports.ExternalLinkIcon = ExternalLinkIcon;
   exports.FacebookIcon = FacebookIcon;
+  exports.FileIcon = FileIcon;
   exports.FileImage = FileImage;
   exports.FileSVG = FileSVG;
   exports.FilterIcon = FilterIcon;
@@ -7520,6 +8121,7 @@
   exports.Horizontal = Horizontal;
   exports.HorizontalBase = HorizontalBase;
   exports.Icon = Icon;
+  exports.ImageIcon = ImageIcon;
   exports.InfoIcon = InfoIcon;
   exports.Inline = Inline;
   exports.InstagramIcon = InstagramIcon;
@@ -7541,6 +8143,8 @@
   exports.OpenEyeIcon = OpenEyeIcon;
   exports.PanelIcon = PanelIcon;
   exports.Password = Password;
+  exports.PauseIcon = PauseIcon;
+  exports.PlayIcon = PlayIcon;
   exports.PlusIcon = PlusIcon;
   exports.PrintIcon = PrintIcon;
   exports.ProfileIcon = ProfileIcon;
@@ -7570,8 +8174,10 @@
   exports.UnLikeIcon = UnLikeIcon;
   exports.UnlockIcon = UnlockIcon;
   exports.UploadIcon = UploadIcon;
+  exports.Uploader = Uploader;
   exports.Vertical = Vertical;
   exports.VerticalBase = VerticalBase;
+  exports.VideoIcon = VideoIcon;
   exports.View = View;
   exports.WarningIcon = WarningIcon;
   exports.WifiIcon = WifiIcon;
@@ -7583,6 +8189,7 @@
   exports.showModal = showModal;
   exports.useMessageStore = useMessageStore;
   exports.useModalStore = useModalStore;
+  exports.useUpload = useUpload;
 
   Object.defineProperty(exports, '__esModule', { value: true });