@app-studio/web 0.8.69 → 0.8.71

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('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('src/components/Layout')) :
-  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', 'src/components/Layout'], 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, global.Layout));
-}(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, Layout) { '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('core-js/modules/es.array.includes.js'), require('react-router-dom'), 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'), require('src/components/Layout')) :
+  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', 'core-js/modules/es.array.includes.js', 'react-router-dom', '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', 'src/components/Layout'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, global.appStudio, null, null, null, null, global.reactRouterDom, null, null, global.format, global.formik, null, null, null, global.zustand, global.Layout));
+}(this, (function (exports, es_symbol_description_js, React, es_object_assign_js, appStudio, es_array_iterator_js, es_parseFloat_js, web_domCollections_iterator_js, es_array_includes_js, reactRouterDom, es_string_includes_js, es_string_startsWith_js, format, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, Layout) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   format = format && Object.prototype.hasOwnProperty.call(format, 'default') ? format['default'] : format;
@@ -252,8 +252,8 @@
     _excluded34 = ["widthHeight", "color", "strokeWidth", "filled"],
     _excluded35 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded36 = ["widthHeight", "color", "strokeWidth", "filled"],
-    _excluded37 = ["widthHeight", "color", "filled", "strokeWidth"],
-    _excluded38 = ["widthHeight", "color", "filled", "strokeWidth"],
+    _excluded37 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded38 = ["widthHeight", "color", "strokeWidth", "filled"],
     _excluded39 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded40 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded41 = ["widthHeight", "color", "filled", "strokeWidth"],
@@ -264,10 +264,10 @@
     _excluded46 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded47 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded48 = ["widthHeight", "color", "filled", "strokeWidth"],
-    _excluded49 = ["widthHeight", "color", "strokeWidth", "filled"],
-    _excluded50 = ["widthHeight", "color", "strokeWidth", "filled"],
-    _excluded51 = ["widthHeight", "color", "filled", "strokeWidth"],
-    _excluded52 = ["widthHeight", "color", "filled", "strokeWidth"],
+    _excluded49 = ["widthHeight", "color", "filled", "strokeWidth"],
+    _excluded50 = ["widthHeight", "color", "filled", "strokeWidth"],
+    _excluded51 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded52 = ["widthHeight", "color", "strokeWidth", "filled"],
     _excluded53 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded54 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded55 = ["widthHeight", "color", "filled", "strokeWidth"],
@@ -279,7 +279,16 @@
     _excluded61 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded62 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded63 = ["widthHeight", "color", "filled", "strokeWidth"],
-    _excluded64 = ["widthHeight", "color", "strokeWidth", "filled"];
+    _excluded64 = ["widthHeight", "color", "filled", "strokeWidth"],
+    _excluded65 = ["widthHeight", "color", "filled", "strokeWidth"],
+    _excluded66 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded67 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded68 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded69 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded70 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded71 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded72 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded73 = ["widthHeight", "color", "strokeWidth", "filled"];
   // Default wrapper component for consistent sizing and styling
   var IconWrapper = _ref => {
     var {
@@ -1167,12 +1176,12 @@
       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 = _ref36 => {
+  var MagicWandIcon = _ref36 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         strokeWidth = 1,
-        filled = false
+        filled = true
       } = _ref36,
       props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
@@ -1182,6 +1191,36 @@
       viewBox: "0 0 24 24",
       "aria-hidden": "false",
       focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
+      x: "-3",
+      y: "17",
+      width: "15",
+      height: "4",
+      rx: "1",
+      transform: "rotate(-40 2 13)"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M17 3L18 6L21 7L18 8L17 11L16 8L13 7L16 6L17 3Z"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M21 9L21.7 11L23.5 12L21.7 13L21 15L20.3 13L18.5 12L20.3 11L21 9Z"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M16 15L16.7 16.5L18 17L16.7 17.5L16 19L15.3 17.5L14 17L15.3 16.5L16 15Z"
+    })));
+  };
+  var SliderVerticalIcon = _ref37 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = false
+      } = _ref37,
+      props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
+    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("line", {
       stroke: color,
       x1: "4",
@@ -1238,14 +1277,57 @@
       y2: "16"
     })));
   };
-  var FilterIcon = _ref37 => {
+  var PanelIcon = _ref38 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = false
+      } = _ref38,
+      props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
+    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", {
+      x: "3",
+      y: "3",
+      width: "18",
+      height: "18",
+      rx: "2"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "9",
+      y1: "3",
+      x2: "9",
+      y2: "21"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "12",
+      y1: "7",
+      x2: "17",
+      y2: "7"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "12",
+      y1: "11",
+      x2: "17",
+      y2: "11"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "12",
+      y1: "15",
+      x2: "17",
+      y2: "15"
+    })));
+  };
+  var FilterIcon = _ref39 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref37,
-      props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
+      } = _ref39,
+      props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1257,14 +1339,14 @@
       d: "M3 4h18l-7 10v5l-4 2v-7L3 4z"
     })));
   };
-  var HomeIcon = _ref38 => {
+  var HomeIcon = _ref40 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref38,
-      props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
+      } = _ref40,
+      props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1276,14 +1358,14 @@
       d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"
     })));
   };
-  var LocationIcon = _ref39 => {
+  var LocationIcon = _ref41 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref39,
-      props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
+      } = _ref41,
+      props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1295,14 +1377,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 = _ref40 => {
+  var LockIcon = _ref42 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref40,
-      props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
+      } = _ref42,
+      props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1321,14 +1403,14 @@
       d: "M7 11V7a5 5 0 0 1 10 0v4"
     })));
   };
-  var MicrophoneIcon = _ref41 => {
+  var MicrophoneIcon = _ref43 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref41,
-      props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
+      } = _ref43,
+      props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1354,14 +1436,14 @@
       y2: "23"
     })));
   };
-  var MoonIcon = _ref42 => {
+  var MoonIcon = _ref44 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref42,
-      props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
+      } = _ref44,
+      props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1373,14 +1455,14 @@
       d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
     })));
   };
-  var NotificationIcon = _ref43 => {
+  var NotificationIcon = _ref45 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref43,
-      props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
+      } = _ref45,
+      props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1394,14 +1476,14 @@
       d: "M13.73 21a2 2 0 0 1-3.46 0"
     })));
   };
-  var OpenEyeIcon = _ref44 => {
+  var OpenEyeIcon = _ref46 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref44,
-      props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
+      } = _ref46,
+      props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1413,14 +1495,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 = _ref45 => {
+  var ProfileIcon = _ref47 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref45,
-      props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
+      } = _ref47,
+      props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1433,14 +1515,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 = _ref46 => {
+  var SettingsIcon = _ref48 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref46,
-      props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
+      } = _ref48,
+      props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1452,14 +1534,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 = _ref47 => {
+  var SuccessIcon = _ref49 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref47,
-      props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
+      } = _ref49,
+      props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1471,14 +1553,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 = _ref48 => {
+  var UnLikeIcon = _ref50 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref48,
-      props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
+      } = _ref50,
+      props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1490,14 +1572,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 = _ref49 => {
+  var ClockIcon = _ref51 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = false
-      } = _ref49,
-      props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
+      } = _ref51,
+      props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1513,14 +1595,14 @@
       points: "12 6 12 12 16 14"
     })));
   };
-  var CameraIcon = _ref50 => {
+  var CameraIcon = _ref52 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = false
-      } = _ref50,
-      props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
+      } = _ref52,
+      props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1536,14 +1618,14 @@
       r: "4"
     })));
   };
-  var BluetoothIcon = _ref51 => {
+  var BluetoothIcon = _ref53 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref51,
-      props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
+      } = _ref53,
+      props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1555,14 +1637,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 = _ref52 => {
+  var LikeIcon = _ref54 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref52,
-      props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
+      } = _ref54,
+      props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1574,14 +1656,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 = _ref53 => {
+  var UnlockIcon = _ref55 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref53,
-      props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
+      } = _ref55,
+      props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1600,14 +1682,14 @@
       d: "M7 11V7a5 5 0 0 1 9.9-1"
     })));
   };
-  var WifiIcon = _ref54 => {
+  var WifiIcon = _ref56 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref54,
-      props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
+      } = _ref56,
+      props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1619,14 +1701,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 = _ref55 => {
+  var UploadIcon = _ref57 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref55,
-      props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
+      } = _ref57,
+      props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1642,14 +1724,14 @@
       d: "M12 12l0 9"
     })));
   };
-  var SearchIcon = _ref56 => {
+  var SearchIcon = _ref58 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref56,
-      props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
+      } = _ref58,
+      props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1661,14 +1743,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 = _ref57 => {
+  var CloseEyeIcon = _ref59 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref57,
-      props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
+      } = _ref59,
+      props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1681,14 +1763,14 @@
       fill: "currentColor"
     })));
   };
-  var ExternalLinkIcon = _ref58 => {
+  var ExternalLinkIcon = _ref60 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref58,
-      props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
+      } = _ref60,
+      props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1700,14 +1782,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 = _ref59 => {
+  var PlusIcon = _ref61 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref59,
-      props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
+      } = _ref61,
+      props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1729,14 +1811,14 @@
       y2: "12"
     })));
   };
-  var TickIcon = _ref60 => {
+  var TickIcon = _ref62 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref60,
-      props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
+      } = _ref62,
+      props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1750,14 +1832,14 @@
       strokeLinejoin: "round"
     })));
   };
-  var BoldArrowIcon = _ref61 => {
+  var BoldArrowIcon = _ref63 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref61,
-      props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
+      } = _ref63,
+      props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1769,14 +1851,14 @@
       d: "M12 4l7 7h-4v7h-6v-7H5l7-7z"
     })));
   };
-  var ArrowIcon = _ref62 => {
+  var ArrowIcon = _ref64 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref62,
-      props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
+      } = _ref64,
+      props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1794,14 +1876,14 @@
       points: "6 12 12 6 18 12"
     })));
   };
-  var SpinnerIcon = _ref63 => {
+  var SpinnerIcon = _ref65 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref63,
-      props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
+      } = _ref65,
+      props = _objectWithoutPropertiesLoose(_ref65, _excluded65);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1819,14 +1901,14 @@
       strokeOpacity: "1"
     })));
   };
-  var CalendarIcon = _ref64 => {
+  var CalendarIcon = _ref66 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = false
-      } = _ref64,
-      props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
+      } = _ref66,
+      props = _objectWithoutPropertiesLoose(_ref66, _excluded66);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       widthHeight: widthHeight,
       color: color
@@ -1861,6 +1943,237 @@
       y2: "10"
     })));
   };
+  var SliderIcon = _ref67 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = false
+      } = _ref67,
+      props = _objectWithoutPropertiesLoose(_ref67, _excluded67);
+    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("line", {
+      x1: "3",
+      y1: "4",
+      x2: "10",
+      y2: "4"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "14",
+      y1: "4",
+      x2: "21",
+      y2: "4"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "3",
+      y1: "12",
+      x2: "12",
+      y2: "12"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "16",
+      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",
+      x2: "10",
+      y2: "7"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "16",
+      y1: "9",
+      x2: "16",
+      y2: "15"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "8",
+      y1: "17",
+      x2: "8",
+      y2: "23"
+    })));
+  };
+  var CropIcon = _ref68 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = false
+      } = _ref68,
+      props = _objectWithoutPropertiesLoose(_ref68, _excluded68);
+    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: "M6 2v14a2 2 0 0 0 2 2h14"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M18 22V8a2 2 0 0 0-2-2H2"
+    })));
+  };
+  var ZoomInIcon = _ref69 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = false
+      } = _ref69,
+      props = _objectWithoutPropertiesLoose(_ref69, _excluded69);
+    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("circle", {
+      cx: "11",
+      cy: "11",
+      r: "8"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "21",
+      y1: "21",
+      x2: "16.65",
+      y2: "16.65"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "11",
+      y1: "8",
+      x2: "11",
+      y2: "14"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "8",
+      y1: "11",
+      x2: "14",
+      y2: "11"
+    })));
+  };
+  var ZoomOutIcon = _ref70 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = false
+      } = _ref70,
+      props = _objectWithoutPropertiesLoose(_ref70, _excluded70);
+    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("circle", {
+      cx: "11",
+      cy: "11",
+      r: "8"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "21",
+      y1: "21",
+      x2: "16.65",
+      y2: "16.65"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "8",
+      y1: "11",
+      x2: "14",
+      y2: "11"
+    })));
+  };
+  var TextIcon = _ref71 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = false
+      } = _ref71,
+      props = _objectWithoutPropertiesLoose(_ref71, _excluded71);
+    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("line", {
+      x1: "4",
+      y1: "6",
+      x2: "20",
+      y2: "6"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "12",
+      y1: "6",
+      x2: "12",
+      y2: "18"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "8",
+      y1: "18",
+      x2: "16",
+      y2: "18"
+    })));
+  };
+  var ShapeIcon = _ref72 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = false
+      } = _ref72,
+      props = _objectWithoutPropertiesLoose(_ref72, _excluded72);
+    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", {
+      x: "4",
+      y: "8",
+      width: "8",
+      height: "8"
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "16",
+      cy: "16",
+      r: "4"
+    }), /*#__PURE__*/React__default.createElement("polygon", {
+      points: "16,4 19,8 13,8"
+    })));
+  };
+  var RotateIcon = _ref73 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = false
+      } = _ref73,
+      props = _objectWithoutPropertiesLoose(_ref73, _excluded73);
+    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("polyline", {
+      points: "1 4 1 10 7 10"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10"
+    })));
+  };
 
   var Icon = {
     __proto__: null,
@@ -1898,6 +2211,8 @@
     ShareIcon: ShareIcon,
     RefreshIcon: RefreshIcon,
     PrintIcon: PrintIcon,
+    MagicWandIcon: MagicWandIcon,
+    SliderVerticalIcon: SliderVerticalIcon,
     PanelIcon: PanelIcon,
     FilterIcon: FilterIcon,
     HomeIcon: HomeIcon,
@@ -1926,7 +2241,14 @@
     BoldArrowIcon: BoldArrowIcon,
     ArrowIcon: ArrowIcon,
     SpinnerIcon: SpinnerIcon,
-    CalendarIcon: CalendarIcon
+    CalendarIcon: CalendarIcon,
+    SliderIcon: SliderIcon,
+    CropIcon: CropIcon,
+    ZoomInIcon: ZoomInIcon,
+    ZoomOutIcon: ZoomOutIcon,
+    TextIcon: TextIcon,
+    ShapeIcon: ShapeIcon,
+    RotateIcon: RotateIcon
   };
 
   // Define a constant object 'Themes' exporting various theme views.
@@ -2783,13 +3105,11 @@
       width: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
     };
     var changePadding = isIconRounded ? IconSizes$1[size] : ButtonSizes[size];
-    var content = /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
-      gap: 10
-    }, views == null ? void 0 : views.horizontal), 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)));
+    var Container = ['left', 'right'].includes(iconPosition) ? Horizontal : appStudio.Vertical;
+    var content = /*#__PURE__*/React__default.createElement(Container, Object.assign({
+      gap: 5,
+      alignItems: "center"
+    }, views == null ? void 0 : views.container), isLoading && loaderPosition === 'left' && /*#__PURE__*/React__default.createElement(Loader, Object.assign({}, loaderProps)), icon && ['left', 'top'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.icon), icon)), children, icon && ['right', 'bottom'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.icon), 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",
@@ -7722,7 +8042,8 @@
       views = {},
       // Default to empty object
       renderTab,
-      renderContent
+      renderContent,
+      iconPosition = 'left'
     } = _ref;
     // If there's no active tab (e.g., tabs array is empty), render nothing or a placeholder
     if (!activeTab) {
@@ -7755,7 +8076,10 @@
           // Example: Set variant based on active state (can be overridden by styles)
           variant: isActive ? 'filled' : 'ghost',
           cursor: "pointer" // Ensure pointer cursor
-        }), tab.icon, /*#__PURE__*/React__default.createElement(Text
+          ,
+          iconPosition: iconPosition,
+          icon: tab.icon
+        }), /*#__PURE__*/React__default.createElement(Text
         // Apply base title styles and merge activeText styles if this tab is active
         , Object.assign({}, views.title, isActive ? views.activeText : {}), tab.title));
       })), /*#__PURE__*/React__default.createElement(View, Object.assign({
@@ -8157,6 +8481,7 @@
   exports.ComboBox = ComboBox;
   exports.CopyIcon = CopyIcon;
   exports.CountryPicker = CountryPicker;
+  exports.CropIcon = CropIcon;
   exports.DatePicker = DatePicker;
   exports.DownloadIcon = DownloadIcon;
   exports.DragAndDrop = DragAndDrop;
@@ -8197,6 +8522,7 @@
   exports.Loader = Loader;
   exports.LocationIcon = LocationIcon;
   exports.LockIcon = LockIcon;
+  exports.MagicWandIcon = MagicWandIcon;
   exports.MenuIcon = MenuIcon;
   exports.MessageLayout = MessageLayout;
   exports.MessageView = MessageView;
@@ -8215,11 +8541,15 @@
   exports.ProfileIcon = ProfileIcon;
   exports.RefreshIcon = RefreshIcon;
   exports.Right = Right;
+  exports.RotateIcon = RotateIcon;
   exports.SaveIcon = SaveIcon;
   exports.SearchIcon = SearchIcon;
   exports.Select = Select;
   exports.SettingsIcon = SettingsIcon;
+  exports.ShapeIcon = ShapeIcon;
   exports.ShareIcon = ShareIcon;
+  exports.SliderIcon = SliderIcon;
+  exports.SliderVerticalIcon = SliderVerticalIcon;
   exports.SpinnerIcon = SpinnerIcon;
   exports.StarIcon = StarIcon;
   exports.SuccessIcon = SuccessIcon;
@@ -8229,6 +8559,7 @@
   exports.Text = Text;
   exports.TextArea = TextArea;
   exports.TextField = TextField;
+  exports.TextIcon = TextIcon;
   exports.ThreadsIcon = ThreadsIcon;
   exports.TickIcon = TickIcon;
   exports.Toggle = Toggle;
@@ -8248,6 +8579,8 @@
   exports.WifiIcon = WifiIcon;
   exports.XIcon = XIcon;
   exports.YoutubeIcon = YoutubeIcon;
+  exports.ZoomInIcon = ZoomInIcon;
+  exports.ZoomOutIcon = ZoomOutIcon;
   exports.hideMessage = hideMessage;
   exports.hideModal = hideModal;
   exports.showMessage = showMessage;