@app-studio/web 0.8.54 → 0.8.57

package/dist/web.umd.development.js

@@ -134,7 +134,6 @@
     } : {};
     var fontSize = appStudio.Typography.fontSizes[size];
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-      role: "text",
       fontSize: fontSize,
       lineHeight: appStudio.Typography.lineHeights[size],
       fontStyle: isItalic ? 'italic' : 'normal',
@@ -230,14 +229,14 @@
     _excluded17 = ["size", "color", "filled", "strokeWidth"],
     _excluded18 = ["size", "color", "filled", "strokeWidth"],
     _excluded19 = ["size", "color", "filled", "strokeWidth"],
-    _excluded20 = ["size", "color", "strokeWidth", "filled"],
-    _excluded21 = ["size", "color", "filled", "strokeWidth"],
-    _excluded22 = ["size", "color", "strokeWidth"],
-    _excluded23 = ["size", "color", "filled", "strokeWidth"],
-    _excluded24 = ["size", "color", "strokeWidth"],
-    _excluded25 = ["size", "color", "filled", "strokeWidth"],
-    _excluded26 = ["size", "color", "strokeWidth"],
-    _excluded27 = ["size", "color", "filled", "strokeWidth"],
+    _excluded20 = ["size", "color", "filled", "strokeWidth"],
+    _excluded21 = ["size", "color", "strokeWidth", "filled"],
+    _excluded22 = ["size", "color", "filled", "strokeWidth"],
+    _excluded23 = ["size", "color", "strokeWidth"],
+    _excluded24 = ["size", "color", "filled", "strokeWidth"],
+    _excluded25 = ["size", "color", "strokeWidth"],
+    _excluded26 = ["size", "color", "filled", "strokeWidth"],
+    _excluded27 = ["size", "color", "strokeWidth"],
     _excluded28 = ["size", "color", "filled", "strokeWidth"],
     _excluded29 = ["size", "color", "filled", "strokeWidth"],
     _excluded30 = ["size", "color", "filled", "strokeWidth"],
@@ -249,9 +248,9 @@
     _excluded36 = ["size", "color", "filled", "strokeWidth"],
     _excluded37 = ["size", "color", "filled", "strokeWidth"],
     _excluded38 = ["size", "color", "filled", "strokeWidth"],
-    _excluded39 = ["size", "color", "strokeWidth"],
+    _excluded39 = ["size", "color", "filled", "strokeWidth"],
     _excluded40 = ["size", "color", "strokeWidth"],
-    _excluded41 = ["size", "color", "filled", "strokeWidth"],
+    _excluded41 = ["size", "color", "strokeWidth"],
     _excluded42 = ["size", "color", "filled", "strokeWidth"],
     _excluded43 = ["size", "color", "filled", "strokeWidth"],
     _excluded44 = ["size", "color", "filled", "strokeWidth"],
@@ -264,14 +263,15 @@
     _excluded51 = ["size", "color", "filled", "strokeWidth"],
     _excluded52 = ["size", "color", "filled", "strokeWidth"],
     _excluded53 = ["size", "color", "filled", "strokeWidth"],
-    _excluded54 = ["size", "color", "strokeWidth"];
+    _excluded54 = ["size", "color", "filled", "strokeWidth"],
+    _excluded55 = ["size", "color", "strokeWidth"];
   // Default wrapper component for consistent sizing and styling
   var IconWrapper = _ref => {
     var {
         size,
         color = 'black',
         transform,
-        orientation,
+        orientation = 'up',
         children
       } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
@@ -313,8 +313,8 @@
       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"
     })));
   };
-  // Example of another Icon: CloseIcon
-  var CloseIcon = _ref3 => {
+  // Example of a Twitch Icon
+  var TwitchIcon = _ref3 => {
     var {
         size = 24,
         color = 'currentColor',
@@ -329,6 +329,34 @@
       viewBox: "0 0 24 24",
       "aria-hidden": "true",
       focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
+      d: "M2 2v16h5v4l4-4h5l6-6V2H2zm18 10-3 3h-5l-3 3v-3H4V4h16v8z",
+      fill: filled ? color : 'none',
+      stroke: color,
+      strokeWidth: filled ? 0 : strokeWidth
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M14 7h2v5h-2V7zm-4 0h2v5H10V7z",
+      fill: filled ? color : 'none',
+      stroke: color,
+      strokeWidth: filled ? 0 : strokeWidth
+    })));
+  };
+  // Example of another Icon: CloseIcon
+  var CloseIcon = _ref4 => {
+    var {
+        size = 24,
+        color = 'currentColor',
+        filled = false,
+        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("line", {
       stroke: color,
       x1: "18",
@@ -343,14 +371,14 @@
       y2: "18"
     })));
   };
-  var InstagramIcon = _ref4 => {
+  var InstagramIcon = _ref5 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+      } = _ref5,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -374,14 +402,14 @@
       y2: "6.5"
     })));
   };
-  var YoutubeIcon = _ref5 => {
+  var YoutubeIcon = _ref6 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+      } = _ref6,
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -393,14 +421,14 @@
       points: "9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"
     })));
   };
-  var LinkedinIcon = _ref6 => {
+  var LinkedinIcon = _ref7 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+      } = _ref7,
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -419,14 +447,14 @@
       r: "2"
     })));
   };
-  var ThreadsIcon = _ref7 => {
+  var ThreadsIcon = _ref8 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref7,
-      props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+      } = _ref8,
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -441,15 +469,15 @@
     })));
   };
   // Example Refactored Icon: MinusIcon without undefined 'padding' prop
-  var MinusIcon = _ref8 => {
+  var MinusIcon = _ref9 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         // Assuming minus can be filled; adjust as needed
         strokeWidth = 1
-      } = _ref8,
-      props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
+      } = _ref9,
+      props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -466,14 +494,14 @@
     })));
   };
   // Example Refactored Icon: InfoIcon with accessibility enhancements
-  var InfoIcon = _ref9 => {
+  var InfoIcon = _ref10 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref9,
-      props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
+      } = _ref10,
+      props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -487,14 +515,14 @@
       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 = _ref10 => {
+  var HeartIcon = _ref11 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref10,
-      props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
+      } = _ref11,
+      props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -506,14 +534,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 = _ref11 => {
+  var StarIcon = _ref12 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref11,
-      props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
+      } = _ref12,
+      props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -525,14 +553,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 = _ref12 => {
+  var SaveIcon = _ref13 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref12,
-      props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
+      } = _ref13,
+      props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -548,14 +576,14 @@
       points: "7 3 7 8 15 8"
     })));
   };
-  var WarningIcon = _ref13 => {
+  var WarningIcon = _ref14 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref13,
-      props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
+      } = _ref14,
+      props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -579,14 +607,14 @@
       y2: "15"
     })));
   };
-  var BatteryIcon = _ref14 => {
+  var BatteryIcon = _ref15 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref14,
-      props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
+      } = _ref15,
+      props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -598,14 +626,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 = _ref15 => {
+  var BookmarkIcon = _ref16 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref15,
-      props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
+      } = _ref16,
+      props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -617,14 +645,14 @@
       d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
     })));
   };
-  var CloudIcon = _ref16 => {
+  var CloudIcon = _ref17 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref16,
-      props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
+      } = _ref17,
+      props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -636,14 +664,14 @@
       d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"
     })));
   };
-  var CopyIcon = _ref17 => {
+  var CopyIcon = _ref18 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref17,
-      props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
+      } = _ref18,
+      props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -662,14 +690,14 @@
       d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
     })));
   };
-  var DustBinIcon = _ref18 => {
+  var DustBinIcon = _ref19 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref18,
-      props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
+      } = _ref19,
+      props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -681,14 +709,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 = _ref19 => {
+  var EditIcon = _ref20 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref19,
-      props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
+      } = _ref20,
+      props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -700,14 +728,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 = _ref20 => {
+  var ErrorIcon = _ref21 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1,
         filled = true
-      } = _ref20,
-      props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
+      } = _ref21,
+      props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -733,14 +761,14 @@
       stroke: filled ? 'white' : color
     })));
   };
-  var DownloadIcon = _ref21 => {
+  var DownloadIcon = _ref22 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref21,
-      props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
+      } = _ref22,
+      props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -752,13 +780,13 @@
       d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
     })));
   };
-  var MenuIcon = _ref22 => {
+  var MenuIcon = _ref23 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1
-      } = _ref22,
-      props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
+      } = _ref23,
+      props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -786,14 +814,14 @@
       y2: "18"
     })));
   };
-  var ShareIcon = _ref23 => {
+  var ShareIcon = _ref24 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref23,
-      props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
+      } = _ref24,
+      props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -827,13 +855,13 @@
       y2: "10.49"
     })));
   };
-  var RefreshIcon = _ref24 => {
+  var RefreshIcon = _ref25 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1
-      } = _ref24,
-      props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
+      } = _ref25,
+      props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -847,14 +875,14 @@
       d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10"
     })));
   };
-  var PrintIcon = _ref25 => {
+  var PrintIcon = _ref26 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref25,
-      props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
+      } = _ref26,
+      props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -867,13 +895,13 @@
       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 = _ref26 => {
+  var PanelIcon = _ref27 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1
-      } = _ref26,
-      props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
+      } = _ref27,
+      props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -937,14 +965,14 @@
       y2: "16"
     })));
   };
-  var FilterIcon = _ref27 => {
+  var FilterIcon = _ref28 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref27,
-      props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
+      } = _ref28,
+      props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -956,14 +984,14 @@
       d: "M3 4h18l-7 10v5l-4 2v-7L3 4z"
     })));
   };
-  var HomeIcon = _ref28 => {
+  var HomeIcon = _ref29 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref28,
-      props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
+      } = _ref29,
+      props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -975,14 +1003,14 @@
       d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"
     })));
   };
-  var LocationIcon = _ref29 => {
+  var LocationIcon = _ref30 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref29,
-      props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
+      } = _ref30,
+      props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -994,14 +1022,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 = _ref30 => {
+  var LockIcon = _ref31 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref30,
-      props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
+      } = _ref31,
+      props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1020,14 +1048,14 @@
       d: "M7 11V7a5 5 0 0 1 10 0v4"
     })));
   };
-  var MicrophoneIcon = _ref31 => {
+  var MicrophoneIcon = _ref32 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref31,
-      props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
+      } = _ref32,
+      props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1053,14 +1081,14 @@
       y2: "23"
     })));
   };
-  var MoonIcon = _ref32 => {
+  var MoonIcon = _ref33 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref32,
-      props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
+      } = _ref33,
+      props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1072,14 +1100,14 @@
       d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
     })));
   };
-  var NotificationIcon = _ref33 => {
+  var NotificationIcon = _ref34 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref33,
-      props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
+      } = _ref34,
+      props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1093,14 +1121,14 @@
       d: "M13.73 21a2 2 0 0 1-3.46 0"
     })));
   };
-  var OpenEyeIcon = _ref34 => {
+  var OpenEyeIcon = _ref35 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref34,
-      props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
+      } = _ref35,
+      props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1112,14 +1140,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 = _ref35 => {
+  var ProfileIcon = _ref36 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref35,
-      props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
+      } = _ref36,
+      props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1132,14 +1160,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 = _ref36 => {
+  var SettingsIcon = _ref37 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref36,
-      props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
+      } = _ref37,
+      props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1151,14 +1179,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 = _ref37 => {
+  var SuccessIcon = _ref38 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref37,
-      props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
+      } = _ref38,
+      props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1170,14 +1198,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 = _ref38 => {
+  var UnLikeIcon = _ref39 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref38,
-      props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
+      } = _ref39,
+      props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1189,13 +1217,13 @@
       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 = _ref39 => {
+  var ClockIcon = _ref40 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1
-      } = _ref39,
-      props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
+      } = _ref40,
+      props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1211,13 +1239,13 @@
       points: "12 6 12 12 16 14"
     })));
   };
-  var CameraIcon = _ref40 => {
+  var CameraIcon = _ref41 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1
-      } = _ref40,
-      props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
+      } = _ref41,
+      props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1233,14 +1261,14 @@
       r: "4"
     })));
   };
-  var BluetoothIcon = _ref41 => {
+  var BluetoothIcon = _ref42 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref41,
-      props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
+      } = _ref42,
+      props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1252,14 +1280,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 = _ref42 => {
+  var LikeIcon = _ref43 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref42,
-      props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
+      } = _ref43,
+      props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1271,14 +1299,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 = _ref43 => {
+  var UnlockIcon = _ref44 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref43,
-      props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
+      } = _ref44,
+      props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1297,14 +1325,14 @@
       d: "M7 11V7a5 5 0 0 1 9.9-1"
     })));
   };
-  var WifiIcon = _ref44 => {
+  var WifiIcon = _ref45 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref44,
-      props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
+      } = _ref45,
+      props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1316,14 +1344,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 = _ref45 => {
+  var UploadIcon = _ref46 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref45,
-      props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
+      } = _ref46,
+      props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1339,14 +1367,14 @@
       d: "M12 12l0 9"
     })));
   };
-  var SearchIcon = _ref46 => {
+  var SearchIcon = _ref47 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref46,
-      props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
+      } = _ref47,
+      props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1358,14 +1386,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 = _ref47 => {
+  var CloseEyeIcon = _ref48 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref47,
-      props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
+      } = _ref48,
+      props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1378,14 +1406,14 @@
       fill: "currentColor"
     })));
   };
-  var ExternalLinkIcon = _ref48 => {
+  var ExternalLinkIcon = _ref49 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref48,
-      props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
+      } = _ref49,
+      props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1397,14 +1425,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 = _ref49 => {
+  var PlusIcon = _ref50 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref49,
-      props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
+      } = _ref50,
+      props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1426,14 +1454,14 @@
       y2: "12"
     })));
   };
-  var TickIcon = _ref50 => {
+  var TickIcon = _ref51 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref50,
-      props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
+      } = _ref51,
+      props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1447,14 +1475,14 @@
       strokeLinejoin: "round"
     })));
   };
-  var BoldArrowIcon = _ref51 => {
+  var BoldArrowIcon = _ref52 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref51,
-      props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
+      } = _ref52,
+      props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1466,14 +1494,14 @@
       d: "M12 4l7 7h-4v7h-6v-7H5l7-7z"
     })));
   };
-  var ArrowIcon = _ref52 => {
+  var ArrowIcon = _ref53 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref52,
-      props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
+      } = _ref53,
+      props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1491,14 +1519,14 @@
       points: "6 12 12 6 18 12"
     })));
   };
-  var SpinnerIcon = _ref53 => {
+  var SpinnerIcon = _ref54 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref53,
-      props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
+      } = _ref54,
+      props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1516,13 +1544,13 @@
       strokeOpacity: "1"
     })));
   };
-  var CalendarIcon = _ref54 => {
+  var CalendarIcon = _ref55 => {
     var {
         size = 24,
         color = 'currentColor',
         strokeWidth = 1
-      } = _ref54,
-      props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
+      } = _ref55,
+      props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -1561,6 +1589,7 @@
   var Icon = {
     __proto__: null,
     ChevronIcon: ChevronIcon,
+    TwitchIcon: TwitchIcon,
     CloseIcon: CloseIcon,
     InstagramIcon: InstagramIcon,
     YoutubeIcon: YoutubeIcon,
@@ -2215,19 +2244,23 @@
     slow: 300
   };
 
-  var _excluded$8 = ["size", "speed", "color"],
-    _excluded2$1 = ["size", "speed", "color"],
-    _excluded3$1 = ["size", "speed", "color"],
+  var _excluded$8 = ["size", "speed", "color", "themeMode"],
+    _excluded2$1 = ["size", "speed", "color", "themeMode"],
+    _excluded3$1 = ["size", "speed", "color", "themeMode"],
     _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
   var DefaultSpinner = _ref => {
     var {
         size = 'md',
         speed = 'normal',
-        color = 'theme.loading'
+        color = 'theme.loading',
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-    var theme = appStudio.useTheme();
-    var colorStyle = theme.getColor(color);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
     var [angle, setAngle] = React.useState(0);
     React.useEffect(() => {
@@ -2266,11 +2299,15 @@
     var {
         size = 'md',
         speed = 'normal',
-        color = 'theme.loading'
+        color = 'theme.loading',
+        themeMode: elementMode
       } = _ref2,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-    var theme = appStudio.useTheme();
-    var colorStyle = theme.getColor(color);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
     var [angle, setAngle] = React.useState(0);
     React.useEffect(() => {
@@ -2308,11 +2345,15 @@
     var {
         size = 'md',
         speed = 'normal',
-        color = 'theme.loading'
+        color = 'theme.loading',
+        themeMode: elementMode
       } = _ref3,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
-    var theme = appStudio.useTheme();
-    var colorStyle = theme.getColor(color);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
     var [angle, setAngle] = React.useState(0);
     React.useEffect(() => {
@@ -2378,7 +2419,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"];
+  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 contrast = /*#__PURE__*/require('contrast');
   var ButtonView = _ref => {
     var _props$onClick;
@@ -2412,14 +2453,16 @@
         effect = 'default',
         isHovered,
         setIsHovered = () => {},
-        isExternal = false
+        isExternal = false,
+        themeMode: elementMode
         // Defines CSS properties for 'outline' variant of the button with conditional styles based on reverse state.
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     var {
-      getColor
+      getColor,
+      themeMode
     } = appStudio.useTheme();
-    var handleHover = () => setIsHovered(!isHovered);
+    var handleHover = over => setIsHovered(over);
     var isActive = !(isDisabled || isLoading);
     var defaultNativeProps = {
       disabled: !isActive
@@ -2427,7 +2470,7 @@
     var buttonColor = isActive ? colorScheme : 'theme.disabled';
     var hovering = isHovered && effect === 'hover';
     var reverse = isHovered && effect === 'reverse';
-    var isLight = contrast(getColor(buttonColor)) == 'light';
+    var isLight = contrast(getColor(buttonColor, elementMode ? elementMode : themeMode)) == 'light';
     var ButtonVariants = {
       filled: {
         // Defines CSS properties for 'link' variant of the button with conditional styles based on reverse state, includes text decoration.
@@ -2478,7 +2521,6 @@
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       gap: 8,
       as: "button",
-      role: "button",
       border: "none",
       color: "color.white",
       display: "flex",
@@ -2488,8 +2530,8 @@
       backgroundColor: buttonColor,
       borderRadius: ButtonShapes[shape],
       onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
-      onMouseEnter: handleHover,
-      onMouseLeave: handleHover,
+      onMouseEnter: () => handleHover(true),
+      onMouseLeave: () => handleHover(false),
       cursor: isActive ? 'pointer' : 'default',
       filter: hovering ? 'brightness(0.85)' : 'brightness(1)'
     }, hovering && !props.isDisabled ? {
@@ -2530,20 +2572,22 @@
   };
   var Button = ButtonComponent;
 
-  var _excluded$a = ["src", "color"],
+  var _excluded$a = ["src", "color", "themeMode"],
     _excluded2$2 = ["path"];
   var FileSVG = _ref => {
     var {
         src,
-        color
+        color,
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     var {
-      getColor
+      getColor,
+      themeMode
     } = appStudio.useTheme();
     var Colorprops = color ? {
-      fill: getColor(color),
-      stroke: getColor(color)
+      fill: getColor(color, elementMode ? elementMode : themeMode),
+      stroke: getColor(color, elementMode ? elementMode : themeMode)
     } : {};
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({}, props), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({}, Colorprops, {
       content: 'url("' + src + '")',
@@ -3647,7 +3691,7 @@
     };
   };
 
-  var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur"];
+  var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
   var TextFieldInput = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "text"
   }, props));
@@ -3688,13 +3732,15 @@
         setValue = () => {},
         onClick = () => {},
         onFocus,
-        onBlur = () => {}
+        onBlur = () => {},
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     var {
-      getColor
+      getColor,
+      themeMode
     } = appStudio.useTheme();
-    var IconColor = getColor('color.blueGray.700');
+    var IconColor = getColor('color.blueGray.700', elementMode ? elementMode : themeMode);
     var isWithLabel = !!(isFocused && label);
     var fieldStyles = Object.assign({
       margin: 0,
@@ -5465,7 +5511,7 @@
 
   var _excluded$n = ["size"],
     _excluded2$4 = ["size"],
-    _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles"];
+    _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles", "themeMode"];
   var CountryList = _ref => {
     var props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
@@ -5577,13 +5623,15 @@
           dropDown: {},
           helperText: {},
           box: {}
-        }
+        },
+        themeMode: elementMode
       } = _ref5,
       props = _objectWithoutPropertiesLoose(_ref5, _excluded3$3);
     var {
-      getColor
+      getColor,
+      themeMode
     } = appStudio.useTheme();
-    var IconColor = getColor('color.blueGray.700');
+    var IconColor = getColor('color.blueGray.700', elementMode ? elementMode : themeMode);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);
     var handleCallback = option => {
@@ -6619,6 +6667,11 @@
 
   var useModalStore = /*#__PURE__*/zustand.create(set => ({
     modals: [],
+    onHide: name => name,
+    onShow: (name, props) => ({
+      name,
+      props
+    }),
     show: function show(name, modalProps, overlayProps) {
       if (modalProps === void 0) {
         modalProps = {};
@@ -6626,7 +6679,7 @@
       if (overlayProps === void 0) {
         overlayProps = {};
       }
-      set(state => ({
+      set(state => Object.assign({}, state, {
         modals: [...state.modals, {
           name,
           props: Object.assign({}, modalProps, {
@@ -6645,10 +6698,20 @@
           };
         }
         // Hide specific modal by name
-        return {
+        return Object.assign({}, state, {
           modals: state.modals.filter(modal => modal.name !== name)
-        };
+        });
       });
+    },
+    setOnHide: onHide => {
+      set(state => Object.assign({}, state, {
+        onHide
+      }));
+    },
+    setOnShow: onShow => {
+      set(state => Object.assign({}, state, {
+        onShow
+      }));
     }
   }));
   var showModal = function showModal(name, modalProps, overlayProps) {
@@ -6659,9 +6722,11 @@
       overlayProps = {};
     }
     useModalStore.getState().show(name, modalProps, overlayProps);
+    useModalStore.getState().onShow(name, modalProps);
   };
   var hideModal = name => {
     console.log('hideModal', name);
+    useModalStore.getState().onHide(name);
     useModalStore.getState().hide(typeof name === 'string' ? name : undefined);
   };
 
@@ -6832,9 +6897,17 @@
 
   var ModalLayout = _ref => {
     var {
-      modals: availableModals
+      modals: availableModals,
+      onShow,
+      onHide
     } = _ref;
     var activeModals = useModalStore(state => state.modals);
+    if (onShow) {
+      useModalStore.getState().setOnShow(onShow);
+    }
+    if (onHide) {
+      useModalStore.getState().setOnHide(onHide);
+    }
     if (activeModals.length === 0) {
       return null;
     }
@@ -7404,6 +7477,7 @@
   exports.Toggle = Toggle;
   exports.ToggleGroup = ToggleGroup;
   exports.Top = Top;
+  exports.TwitchIcon = TwitchIcon;
   exports.UnLikeIcon = UnLikeIcon;
   exports.UnlockIcon = UnlockIcon;
   exports.UploadIcon = UploadIcon;