@app-studio/web 0.8.54 → 0.8.57

package/dist/web.cjs.development.js

@@ -147,7 +147,6 @@ var TextView = _ref3 => {
   } : {};
   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',
@@ -243,14 +242,14 @@ var _excluded$4 = ["size", "color", "transform", "orientation", "children"],
   _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"],
@@ -262,9 +261,9 @@ var _excluded$4 = ["size", "color", "transform", "orientation", "children"],
   _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"],
@@ -277,14 +276,15 @@ var _excluded$4 = ["size", "color", "transform", "orientation", "children"],
   _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);
@@ -326,8 +326,8 @@ var ChevronIcon = _ref2 => {
     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',
@@ -342,6 +342,34 @@ var CloseIcon = _ref3 => {
     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",
@@ -356,14 +384,14 @@ var CloseIcon = _ref3 => {
     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
@@ -387,14 +415,14 @@ var InstagramIcon = _ref4 => {
     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
@@ -406,14 +434,14 @@ var YoutubeIcon = _ref5 => {
     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
@@ -432,14 +460,14 @@ var LinkedinIcon = _ref6 => {
     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
@@ -454,15 +482,15 @@ var ThreadsIcon = _ref7 => {
   })));
 };
 // 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
@@ -479,14 +507,14 @@ var MinusIcon = _ref8 => {
   })));
 };
 // 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
@@ -500,14 +528,14 @@ var InfoIcon = _ref9 => {
     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
@@ -519,14 +547,14 @@ var HeartIcon = _ref10 => {
     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
@@ -538,14 +566,14 @@ var StarIcon = _ref11 => {
     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
@@ -561,14 +589,14 @@ var SaveIcon = _ref12 => {
     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
@@ -592,14 +620,14 @@ var WarningIcon = _ref13 => {
     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
@@ -611,14 +639,14 @@ var BatteryIcon = _ref14 => {
     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
@@ -630,14 +658,14 @@ var BookmarkIcon = _ref15 => {
     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
@@ -649,14 +677,14 @@ var CloudIcon = _ref16 => {
     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
@@ -675,14 +703,14 @@ var CopyIcon = _ref17 => {
     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
@@ -694,14 +722,14 @@ var DustBinIcon = _ref18 => {
     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
@@ -713,14 +741,14 @@ var EditIcon = _ref19 => {
     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
@@ -746,14 +774,14 @@ var ErrorIcon = _ref20 => {
     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
@@ -765,13 +793,13 @@ var DownloadIcon = _ref21 => {
     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
@@ -799,14 +827,14 @@ var MenuIcon = _ref22 => {
     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
@@ -840,13 +868,13 @@ var ShareIcon = _ref23 => {
     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
@@ -860,14 +888,14 @@ var RefreshIcon = _ref24 => {
     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
@@ -880,13 +908,13 @@ var PrintIcon = _ref25 => {
     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
@@ -950,14 +978,14 @@ var PanelIcon = _ref26 => {
     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
@@ -969,14 +997,14 @@ var FilterIcon = _ref27 => {
     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
@@ -988,14 +1016,14 @@ var HomeIcon = _ref28 => {
     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
@@ -1007,14 +1035,14 @@ var LocationIcon = _ref29 => {
     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
@@ -1033,14 +1061,14 @@ var LockIcon = _ref30 => {
     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
@@ -1066,14 +1094,14 @@ var MicrophoneIcon = _ref31 => {
     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
@@ -1085,14 +1113,14 @@ var MoonIcon = _ref32 => {
     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
@@ -1106,14 +1134,14 @@ var NotificationIcon = _ref33 => {
     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
@@ -1125,14 +1153,14 @@ var OpenEyeIcon = _ref34 => {
     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
@@ -1145,14 +1173,14 @@ var ProfileIcon = _ref35 => {
     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
@@ -1164,14 +1192,14 @@ var SettingsIcon = _ref36 => {
     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
@@ -1183,14 +1211,14 @@ var SuccessIcon = _ref37 => {
     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
@@ -1202,13 +1230,13 @@ var UnLikeIcon = _ref38 => {
     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
@@ -1224,13 +1252,13 @@ var ClockIcon = _ref39 => {
     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
@@ -1246,14 +1274,14 @@ var CameraIcon = _ref40 => {
     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
@@ -1265,14 +1293,14 @@ var BluetoothIcon = _ref41 => {
     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
@@ -1284,14 +1312,14 @@ var LikeIcon = _ref42 => {
     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
@@ -1310,14 +1338,14 @@ var UnlockIcon = _ref43 => {
     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
@@ -1329,14 +1357,14 @@ var WifiIcon = _ref44 => {
     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
@@ -1352,14 +1380,14 @@ var UploadIcon = _ref45 => {
     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
@@ -1371,14 +1399,14 @@ var SearchIcon = _ref46 => {
     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
@@ -1391,14 +1419,14 @@ var CloseEyeIcon = _ref47 => {
     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
@@ -1410,14 +1438,14 @@ var ExternalLinkIcon = _ref48 => {
     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
@@ -1439,14 +1467,14 @@ var PlusIcon = _ref49 => {
     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
@@ -1460,14 +1488,14 @@ var TickIcon = _ref50 => {
     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
@@ -1479,14 +1507,14 @@ var BoldArrowIcon = _ref51 => {
     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
@@ -1504,14 +1532,14 @@ var ArrowIcon = _ref52 => {
     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
@@ -1529,13 +1557,13 @@ var SpinnerIcon = _ref53 => {
     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
@@ -1574,6 +1602,7 @@ var CalendarIcon = _ref54 => {
 var Icon = {
   __proto__: null,
   ChevronIcon: ChevronIcon,
+  TwitchIcon: TwitchIcon,
   CloseIcon: CloseIcon,
   InstagramIcon: InstagramIcon,
   YoutubeIcon: YoutubeIcon,
@@ -2228,19 +2257,23 @@ var DefaultSpeeds = {
   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(() => {
@@ -2279,11 +2312,15 @@ var Dotted = _ref2 => {
   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(() => {
@@ -2321,11 +2358,15 @@ var Quarter = _ref3 => {
   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(() => {
@@ -2391,7 +2432,7 @@ React__default.createElement(LoaderView, Object.assign({}, props)));
 // 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;
@@ -2425,14 +2466,16 @@ var ButtonView = _ref => {
       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
@@ -2440,7 +2483,7 @@ var ButtonView = _ref => {
   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.
@@ -2491,7 +2534,6 @@ var ButtonView = _ref => {
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
     as: "button",
-    role: "button",
     border: "none",
     color: "color.white",
     display: "flex",
@@ -2501,8 +2543,8 @@ var ButtonView = _ref => {
     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 ? {
@@ -2543,20 +2585,22 @@ var ButtonComponent = props => {
 };
 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 + '")',
@@ -3660,7 +3704,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-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));
@@ -3701,13 +3745,15 @@ var TextFieldView = _ref => {
       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,
@@ -5478,7 +5524,7 @@ var IconSizes$4 = {
 
 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({
@@ -5590,13 +5636,15 @@ var CountryPickerView = _ref5 => {
         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 => {
@@ -6632,6 +6680,11 @@ var MessageLayout = _ref => {
 
 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 = {};
@@ -6639,7 +6692,7 @@ var useModalStore = /*#__PURE__*/zustand.create(set => ({
     if (overlayProps === void 0) {
       overlayProps = {};
     }
-    set(state => ({
+    set(state => Object.assign({}, state, {
       modals: [...state.modals, {
         name,
         props: Object.assign({}, modalProps, {
@@ -6658,10 +6711,20 @@ var useModalStore = /*#__PURE__*/zustand.create(set => ({
         };
       }
       // 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) {
@@ -6672,9 +6735,11 @@ var showModal = function showModal(name, modalProps, overlayProps) {
     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);
 };
 
@@ -6845,9 +6910,17 @@ var ModalFooter = _ref5 => {
 
 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;
   }
@@ -7417,6 +7490,7 @@ exports.TickIcon = TickIcon;
 exports.Toggle = Toggle;
 exports.ToggleGroup = ToggleGroup;
 exports.Top = Top;
+exports.TwitchIcon = TwitchIcon;
 exports.UnLikeIcon = UnLikeIcon;
 exports.UnlockIcon = UnlockIcon;
 exports.UploadIcon = UploadIcon;