@app-studio/web 0.8.65 → 0.8.66

package/dist/web.umd.development.js

@@ -284,7 +284,7 @@
       } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
-      size: size,
+      widthHeight: size,
       lineHeight: size,
       color: color,
       display: "flex",
@@ -311,7 +311,7 @@
       } = _ref2,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -330,7 +330,7 @@
       } = _ref3,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -372,7 +372,7 @@
       } = _ref4,
       props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -400,7 +400,7 @@
       } = _ref5,
       props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -433,7 +433,7 @@
       } = _ref6,
       props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -472,7 +472,7 @@
       } = _ref7,
       props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -494,7 +494,7 @@
       } = _ref8,
       props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -517,7 +517,7 @@
       } = _ref9,
       props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -545,7 +545,7 @@
       } = _ref10,
       props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -574,7 +574,7 @@
       } = _ref11,
       props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -605,7 +605,7 @@
       } = _ref12,
       props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -633,7 +633,7 @@
       } = _ref13,
       props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -655,7 +655,7 @@
       } = _ref14,
       props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24"
@@ -681,7 +681,7 @@
       } = _ref15,
       props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24"
@@ -704,7 +704,7 @@
       } = _ref16,
       props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -728,7 +728,7 @@
       } = _ref17,
       props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props, {
       "aria-label": "Information"
@@ -749,7 +749,7 @@
       } = _ref18,
       props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -768,7 +768,7 @@
       } = _ref19,
       props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -787,7 +787,7 @@
       } = _ref20,
       props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -806,7 +806,7 @@
       } = _ref21,
       props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -825,7 +825,7 @@
       } = _ref22,
       props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -848,7 +848,7 @@
       } = _ref23,
       props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -879,7 +879,7 @@
       } = _ref24,
       props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -898,7 +898,7 @@
       } = _ref25,
       props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -917,7 +917,7 @@
       } = _ref26,
       props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -936,7 +936,7 @@
       } = _ref27,
       props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -962,7 +962,7 @@
       } = _ref28,
       props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -981,7 +981,7 @@
       } = _ref29,
       props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1000,7 +1000,7 @@
       } = _ref30,
       props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1033,7 +1033,7 @@
       } = _ref31,
       props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1052,7 +1052,7 @@
       } = _ref32,
       props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1087,7 +1087,7 @@
       } = _ref33,
       props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1128,7 +1128,7 @@
       } = _ref34,
       props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1149,7 +1149,7 @@
       } = _ref35,
       props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", {
       viewBox: "0 0 24 24",
@@ -1169,7 +1169,7 @@
       } = _ref36,
       props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1240,7 +1240,7 @@
       } = _ref37,
       props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1259,7 +1259,7 @@
       } = _ref38,
       props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1278,7 +1278,7 @@
       } = _ref39,
       props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1297,7 +1297,7 @@
       } = _ref40,
       props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1323,7 +1323,7 @@
       } = _ref41,
       props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1356,7 +1356,7 @@
       } = _ref42,
       props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1375,7 +1375,7 @@
       } = _ref43,
       props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1396,7 +1396,7 @@
       } = _ref44,
       props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1415,7 +1415,7 @@
       } = _ref45,
       props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1435,7 +1435,7 @@
       } = _ref46,
       props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1454,7 +1454,7 @@
       } = _ref47,
       props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1473,7 +1473,7 @@
       } = _ref48,
       props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1492,7 +1492,7 @@
       } = _ref49,
       props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1515,7 +1515,7 @@
       } = _ref50,
       props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1538,7 +1538,7 @@
       } = _ref51,
       props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1557,7 +1557,7 @@
       } = _ref52,
       props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1576,7 +1576,7 @@
       } = _ref53,
       props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1602,7 +1602,7 @@
       } = _ref54,
       props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1621,7 +1621,7 @@
       } = _ref55,
       props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1644,7 +1644,7 @@
       } = _ref56,
       props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1663,7 +1663,7 @@
       } = _ref57,
       props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1683,7 +1683,7 @@
       } = _ref58,
       props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1702,7 +1702,7 @@
       } = _ref59,
       props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1731,7 +1731,7 @@
       } = _ref60,
       props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1752,7 +1752,7 @@
       } = _ref61,
       props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1771,7 +1771,7 @@
       } = _ref62,
       props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1796,7 +1796,7 @@
       } = _ref63,
       props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1821,7 +1821,7 @@
       } = _ref64,
       props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
+      widthHeight: size,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1922,7 +1922,7 @@
     CalendarIcon: CalendarIcon
   };
 
-  // Define a constant object 'Themes' exporting various theme styles.
+  // Define a constant object 'Themes' exporting various theme views.
   var Themes = {
     // Start of the 'default' theme definition with style properties.
     default: {
@@ -1935,7 +1935,7 @@
         color: 'color.blackAlpha.800'
       }
     },
-    // The 'info' theme with unique container and content styles.
+    // The 'info' theme with unique container and content views.
     info: {
       container: {
         backgroundColor: 'color.blue.200',
@@ -1946,7 +1946,7 @@
         color: '#60a5fa'
       }
     },
-    // Specifies the 'success' theme with corresponding container and content styles.
+    // Specifies the 'success' theme with corresponding container and content views.
     success: {
       container: {
         backgroundColor: 'color.green.200',
@@ -1957,7 +1957,7 @@
         color: '#22c55e'
       }
     },
-    // Start of the 'error' theme with its characteristic styles.
+    // Start of the 'error' theme with its characteristic views.
     error: {
       container: {
         backgroundColor: 'color.red.200',
@@ -1968,7 +1968,7 @@
         color: '#ef4444'
       }
     },
-    // Introduction of the 'warning' theme styles.
+    // Introduction of the 'warning' theme views.
     warning: {
       container: {
         backgroundColor: 'color.orange.200',
@@ -1983,11 +1983,11 @@
 
   // Defines AlertView as a functional component using destructuring to extract props.
   var AlertView = _ref => {
-    var _styles$icon$color;
+    var _views$icon$color;
     var {
       icon,
       title,
-      styles,
+      views,
       description,
       // Sets a default variant prop to 'default' if none is provided.
       variant = 'default'
@@ -1999,20 +1999,20 @@
       borderStyle: "solid",
       padding: 16,
       flexWrap: "nowrap"
-    }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(View, {
+    }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(View, {
       alignSelf: 'center'
     }, icon ? icon : (/*#__PURE__*/React__default.createElement(WarningIcon, {
       size: 24,
-      color: (_styles$icon$color = styles == null ? void 0 : styles.icon.color) != null ? _styles$icon$color : Themes[variant].content.color
+      color: (_views$icon$color = views == null ? void 0 : views.icon.color) != null ? _views$icon$color : Themes[variant].content.color
     }))), /*#__PURE__*/React__default.createElement(Vertical, {
       gap: 10
     }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
       fontSize: "16px",
       color: Themes[variant].content.color
-    }, styles == null ? void 0 : styles.title), title), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+    }, views == null ? void 0 : views.title), title), /*#__PURE__*/React__default.createElement(Text, Object.assign({
       fontSize: "14px",
       color: Themes[variant].content.color
-    }, styles == null ? void 0 : styles.description), description)));
+    }, views == null ? void 0 : views.description), description)));
   };
 
   // Definition of the AlertComponent functional component with destructured props.
@@ -2020,14 +2020,14 @@
     var {
       icon,
       title,
-      styles,
+      views,
       description,
       variant
     } = _ref;
     return /*#__PURE__*/React__default.createElement(AlertView, {
       icon: icon,
       title: title,
-      styles: styles,
+      views: views,
       description: description,
       variant: variant
     });
@@ -2101,7 +2101,7 @@
       src,
       size = 'md',
       fallback = 'IM',
-      styles,
+      views,
       imageError,
       setImageError,
       onClick = () => {}
@@ -2111,7 +2111,7 @@
     // Initiates a style object for the image with an objectFit property and spreads additional image styles if provided.
     var imageStyle = Object.assign({
       objectFit: 'cover'
-    }, (styles == null ? void 0 : styles.image) || {});
+    }, (views == null ? void 0 : views.image) || {});
     // Start of the JSX returned by the AvatarView component, which uses the Center component as its root element.
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
       role: "avatar",
@@ -2124,7 +2124,7 @@
       borderColor: imageError ? 'black' : 'transparent',
       boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
       onClick: onClick
-    }, styles == null ? void 0 : styles.container), !imageError ? (/*#__PURE__*/React__default.createElement(appStudio.Image, {
+    }, views == null ? void 0 : views.container), !imageError ? (/*#__PURE__*/React__default.createElement(appStudio.Image, {
       alt: "IM",
       src: src,
       style: imageStyle,
@@ -2133,7 +2133,7 @@
       onError: () => setImageError(true)
     })) : (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: size
-    }, styles == null ? void 0 : styles.fallback), fallback)));
+    }, views == null ? void 0 : views.fallback), fallback)));
   };
 
   // Defines the AvatarComponent functional component with destructured props from AvatarProps type.
@@ -2141,7 +2141,7 @@
     var {
       src,
       size,
-      styles,
+      views,
       fallback,
       onClick
     } = _ref;
@@ -2154,7 +2154,7 @@
     return /*#__PURE__*/React__default.createElement(AvatarView, {
       src: src,
       size: size,
-      styles: styles,
+      views: views,
       fallback: fallback,
       imageError: imageError,
       setImageError: setImageError,
@@ -2225,17 +2225,16 @@
     var {
       // Declaring the functional component BadgeView with BadgeProps as its type for props.
       content,
-      // Destructuring props with default values for shape, colorScheme, variant, size, and styles.
+      // Destructuring props with default values for shape, variant, size, and views.
       position,
       shape = 'pillShaped',
-      colorScheme = 'theme.primary',
       variant = 'filled',
       size = 'md',
-      styles
+      views
     } = _ref;
     var BadgeVariants = {
       filled: {
-        backgroundColor: colorScheme,
+        backgroundColor: 'theme.primary',
         color: 'color.white',
         borderWidth: 1,
         borderStyle: 'solid',
@@ -2246,23 +2245,23 @@
         backgroundColor: 'transparent',
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: colorScheme,
-        color: colorScheme
+        borderColor: 'theme.primary',
+        color: 'theme.primary'
       },
       link: {
         backgroundColor: 'transparent',
         // Rendering the Badge component using the Center layout component with combinedStyles applied.
         borderWidth: 1,
-        // Inserting a Text component into the badge to display the content, with dynamic size and additional text styles.
+        // Inserting a Text component into the badge to display the content, with dynamic size and additional text views.
         borderStyle: 'solid',
         borderColor: 'transparent',
-        color: colorScheme,
+        color: 'theme.primary',
         // Exporting BadgeView to be used in other parts of the application.
         textDecoration: 'underline'
       },
       ghost: {
         backgroundColor: 'transparent',
-        color: colorScheme,
+        color: 'color.trueGray.400',
         borderWidth: 1,
         borderStyle: 'solid',
         borderColor: 'transparent'
@@ -2271,13 +2270,13 @@
     var combinedStyles = Object.assign({
       width: 'fit-content',
       borderRadius: BadgeShapes[shape]
-    }, BadgeSizes[size], BadgeVariants[variant], position ? PositionStyles[position] : {}, styles == null ? void 0 : styles.container);
+    }, BadgeSizes[size], BadgeVariants[variant], position ? PositionStyles[position] : {}, views == null ? void 0 : views.container);
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
       role: "badge"
     }, combinedStyles), /*#__PURE__*/React__default.createElement(Text, Object.assign({
       role: "badgeText",
       size: size
-    }, styles == null ? void 0 : styles.text), content));
+    }, views == null ? void 0 : views.text), content));
   };
 
   // Importing type definitions for BadgeProps that will be used to type-check the Badge component's props.
@@ -2288,22 +2287,19 @@
       // Exporting the Badge as a functional component from this module.
       shape,
       // Destructuring the props in the component function parameter list, to directly access individual properties.
-      colorScheme,
-      // The functional component Badge is implicitly returning the BadgeView component.
       position,
       // Passing all the destructured props to the BadgeView component to maintain the same API surface.
       variant,
       size,
-      styles
+      views
     } = _ref;
     return /*#__PURE__*/React__default.createElement(BadgeView, {
       content: content,
       shape: shape,
-      colorScheme: colorScheme,
       position: position,
       variant: variant,
       size: size,
-      styles: styles
+      views: views
     });
   };
 
@@ -2342,7 +2338,7 @@
     '6xl': 64
   };
 
-  var _excluded$7 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
+  var _excluded$7 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "views", "setIsHovered"];
   // Component definition for 'LinkView', a functional component with props defined by 'LinkViewProps'.
   var LinkView = _ref => {
     var {
@@ -2358,7 +2354,7 @@
         // Boolean indicating if the link leads to an external resource.
         isExternal = false,
         // Custom styles for the icon and text, provided via a styles object.
-        styles = {
+        views = {
           icon: {},
           text: {}
         },
@@ -2377,12 +2373,12 @@
       onMouseEnter: handleHover,
       onMouseLeave: handleHover,
       textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
-    }, styles.text, props), /*#__PURE__*/React__default.createElement(Horizontal, {
+    }, views.text, props), /*#__PURE__*/React__default.createElement(Horizontal, {
       gap: 3,
       alignItems: "center",
       flexWrap: "nowrap"
     }, children, isExternal && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
-      size: IconSizes[iconSize]
+      widthHeight: IconSizes[iconSize]
     }))));
   };
 
@@ -2697,7 +2693,7 @@
   // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
   var Loader = LoaderComponent;
 
-  var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "containerProps", "linkProps"];
+  var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "containerProps", "linkProps"];
   var contrast = /*#__PURE__*/require('contrast');
   var ButtonView = _ref => {
     var _props$onClick;
@@ -2723,7 +2719,6 @@
         variant = 'filled',
         iconPosition = 'left',
         // Defines CSS properties for 'filled' variant of the button with conditional styles based on reverse state.
-        colorScheme = 'theme.primary',
         shape = 'rounded',
         onClick = () => {},
         loaderProps = {},
@@ -2747,7 +2742,7 @@
     var defaultNativeProps = {
       disabled: !isActive
     };
-    var buttonColor = isActive ? colorScheme : 'theme.disabled';
+    var buttonColor = isActive ? 'theme.primary' : 'theme.disabled';
     var hovering = isHovered && effect === 'hover';
     var reverse = isHovered && effect === 'reverse';
     var isLight = contrast(getColor(buttonColor, elementMode ? elementMode : themeMode)) == 'light';
@@ -2765,7 +2760,7 @@
         // Defines CSS properties for 'ghost' variant of the button with conditional styles based on reverse state.
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: reverse ? buttonColor : colorScheme,
+        borderColor: reverse ? buttonColor : 'theme.primary',
         // Fetches size-specific styles from ButtonSizes based on the 'size' prop.
         color: reverse ? 'white' : buttonColor
       },
@@ -2823,8 +2818,7 @@
       transform: 'translateY(-5px)'
     } : {}, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, shadow, props, containerProps), variant === 'link' && to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
       to: to,
-      textDecorationColor: colorScheme,
-      colorScheme: colorScheme,
+      textDecorationColor: 'theme.primary',
       isExternal: isExternal
     }, linkProps), content)) : content);
   };
@@ -2861,8 +2855,7 @@
   var FileSVG = _ref => {
     var {
         src,
-        color,
-        themeMode: elementMode
+        color
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     var {
@@ -2870,8 +2863,12 @@
       themeMode
     } = appStudio.useTheme();
     var Colorprops = color ? {
-      fill: getColor(color, elementMode ? elementMode : themeMode),
-      stroke: getColor(color, elementMode ? elementMode : themeMode)
+      fill: getColor(color, {
+        themeMode
+      }),
+      stroke: getColor(color, {
+        themeMode
+      })
     } : {};
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({}, props), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({}, Colorprops, {
       content: 'url("' + src + '")',
@@ -2934,11 +2931,11 @@
     };
   };
 
-  var _excluded$b = ["children", "styles"];
+  var _excluded$b = ["children", "views"];
   var HelperText = _ref => {
     var {
         children,
-        styles = {
+        views = {
           helperText: {}
         }
       } = _ref,
@@ -2948,22 +2945,22 @@
       marginVertical: 0,
       marginHorizontal: 0,
       color: 'theme.text.dark'
-    }, styles['helperText'], props), children);
+    }, views['helperText'], props), children);
   };
 
-  var _excluded$c = ["children", "helperText", "error", "styles"];
+  var _excluded$c = ["children", "helperText", "error", "views"];
   var FieldContainer = _ref => {
     var {
         children,
         helperText,
         error = false,
-        styles
+        views
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
     return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
       gap: 5,
       position: "relative"
-    }, props), children, !error && helperText && /*#__PURE__*/React__default.createElement(HelperText, Object.assign({}, styles), helperText), error && (/*#__PURE__*/React__default.createElement(Text, {
+    }, props), children, !error && helperText && /*#__PURE__*/React__default.createElement(HelperText, Object.assign({}, views), helperText), error && (/*#__PURE__*/React__default.createElement(Text, {
       size: "xs",
       marginVertical: 0,
       marginHorizontal: 0,
@@ -3018,7 +3015,7 @@
     paddingRight: 16
   };
 
-  var _excluded$d = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+  var _excluded$d = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "views"];
   var FieldContent = _ref => {
     var {
         shadow,
@@ -3032,14 +3029,13 @@
         isHovered = false,
         isDisabled = false,
         isReadOnly = false,
-        colorScheme = 'theme.primary',
-        styles = {
+        views = {
           pickerBox: {}
         }
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
     var isInteractive = (isHovered || isFocused) && !isDisabled;
-    var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
+    var color = error ? 'error' : isInteractive ? 'theme.primary' : 'midgray';
     return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
       gap: 10,
       width: "100%",
@@ -3055,7 +3051,7 @@
       fontSize: appStudio.Typography.fontSizes[size],
       // filter={isHovered ?  'brightness(1)':'brightness(0.97)'}
       cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
-    }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
+    }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], views['box'], props), children);
   };
 
   var _excluded$e = ["children"];
@@ -3103,13 +3099,13 @@
     },
     h5: {
       fontSize: 24,
-      // Set the 'h5' heading tag styles, opting for no additional letter spacing.
+      // Set the 'h5' heading tag views, opting for no additional letter spacing.
       lineHeight: 28,
       letterSpacing: 0
     },
     h6: {
       fontSize: 20,
-      // Set the 'h6' heading tag styles, with the smallest font size and a subtle letter spacing.
+      // Set the 'h6' heading tag views, with the smallest font size and a subtle letter spacing.
       lineHeight: 24,
       letterSpacing: 0.15
     }
@@ -3163,14 +3159,14 @@
   var Label = LabelComponent;
   // Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
-  var _excluded$g = ["children", "size", "error", "color", "styles", "helperText"];
+  var _excluded$g = ["children", "size", "error", "color", "views", "helperText"];
   var FieldLabel = _ref => {
     var {
         children,
         size = 'md',
         error = false,
         color = 'theme.primary',
-        styles = {
+        views = {
           label: {}
         }
       } = _ref,
@@ -3184,7 +3180,7 @@
       position: "absolute",
       color: error ? 'error' : color,
       fontSize: LabelSizes[size]
-    }, styles['label'], props), children);
+    }, views['label'], props), children);
   };
 
   var _excluded$h = ["children"];
@@ -3212,7 +3208,7 @@
   var _excluded$i = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
     _excluded2$3 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
     _excluded3$2 = ["option", "size", "removeOption"],
-    _excluded4$2 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
+    _excluded4$2 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
   // Defines a component to render individual selection items within a list.
   var Item = _ref => {
     var {
@@ -3246,7 +3242,7 @@
     var _ref3;
     var {
       size = 'md',
-      styles = {
+      views = {
         field: {},
         text: {}
       },
@@ -3267,7 +3263,7 @@
       backgroundColor: 'transparent',
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
       cursor: isDisabled ? 'not-allowed' : 'auto'
-    }, styles['field'], styles['text']);
+    }, views['field'], views['text']);
     var option = options.length > 0 && options.find(option => option.value === value);
     return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || Array.isArray(value) && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_ref3 = option && option.label) != null ? _ref3 : value :
     // If value is an array and not empty, render MultiSelect options
@@ -3320,7 +3316,7 @@
   var DropDown = _ref5 => {
     var {
       size,
-      styles = {
+      views = {
         dropDown: {}
       },
       options,
@@ -3367,10 +3363,10 @@
           display: 'none'
         }
       }
-    }, shadow, styles['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
+    }, shadow, views['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
       key: option.value,
       size: size,
-      style: styles['text'],
+      style: views['text'],
       option: option,
       callback: handleCallback,
       backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
@@ -3420,10 +3416,9 @@
         options = [],
         shadow = {},
         size = 'md',
-        colorScheme = 'theme.primary',
         shape = 'default',
         variant = 'default',
-        styles = {
+        views = {
           text: {},
           icon: {},
           dropDown: {},
@@ -3467,31 +3462,30 @@
       role: "SelectBox",
       helperText: helperText,
       error: error,
-      styles: styles,
+      views: views,
       onClick: isDisabled || isReadOnly ? () => {} : handleClick
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
       error: error,
       shape: shape,
-      styles: styles,
+      views: views,
       shadow: shadow,
       variant: variant,
       value: value,
-      color: colorScheme,
+      color: 'theme.primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       isWithLabel: isWithLabel,
-      colorScheme: colorScheme,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: colorScheme,
+      color: 'theme.primary',
       error: error
-    }, styles), label)), /*#__PURE__*/React__default.createElement(HiddenSelect, Object.assign({
+    }, views), label)), /*#__PURE__*/React__default.createElement(HiddenSelect, Object.assign({
       id: id,
       name: name,
       options: options,
@@ -3504,7 +3498,7 @@
     }, props)), /*#__PURE__*/React__default.createElement(SelectBox, {
       options: options,
       size: size,
-      styles: styles,
+      views: views,
       value: value,
       isDisabled: isDisabled,
       placeholder: placeholder,
@@ -3512,16 +3506,16 @@
     })), /*#__PURE__*/React__default.createElement(FieldIcons, null, !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, hide ? (/*#__PURE__*/React__default.createElement(ChevronIcon, {
       color: "inherit",
       size: IconSizes$2[size],
-      style: styles.icon,
+      style: views.icon,
       orientation: "down"
     })) : (/*#__PURE__*/React__default.createElement(ChevronIcon, {
       color: "inherit",
       orientation: "up",
       size: IconSizes$2[size],
-      style: styles.icon
+      style: views.icon
     })))))), !hide && (/*#__PURE__*/React__default.createElement(DropDown, {
       size: size,
-      styles: styles,
+      views: views,
       options: options,
       callback: handleCallback,
       highlightedIndex: highlightedIndex,
@@ -3685,7 +3679,7 @@
     }
   };
 
-  var _excluded$j = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "styles"];
+  var _excluded$j = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
   var SwitchContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
   }, props));
@@ -3699,7 +3693,6 @@
         labelPosition = 'right',
         shadow = {},
         size = 'sm',
-        colorScheme = 'theme.primary',
         value = false,
         isHovered = false,
         isDisabled = false,
@@ -3709,7 +3702,7 @@
         onChange,
         setValue = () => {},
         setIsHovered = () => {},
-        styles = {
+        views = {
           slider: {},
           circle: {},
           label: {}
@@ -3731,7 +3724,7 @@
         height: 'fit-content',
         width: 'fit-content',
         cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
-      }, styles.label)
+      }, views.label)
     };
     return /*#__PURE__*/React__default.createElement(Label, Object.assign({
       htmlFor: id,
@@ -3755,12 +3748,12 @@
       marginBottom: 5,
       filter: isHovered && value ? 'brightness(0.9)' : 'brightness(1)',
       transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-      backgroundColor: isDisabled ? 'disabled' : value ? colorScheme : 'lightgray',
+      backgroundColor: isDisabled ? 'disabled' : value ? 'theme.primary' : 'lightgray',
       justifyContent: activeChild ? 'space-between' : value ? 'flex-end' : 'flex-start'
-    }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && value && /*#__PURE__*/React__default.createElement(View, null, activeChild), /*#__PURE__*/React__default.createElement(View, Object.assign({
+    }, shadow, SliderPadding[size], SliderSizes[size], views['slider']), activeChild && value && /*#__PURE__*/React__default.createElement(View, null, activeChild), /*#__PURE__*/React__default.createElement(View, Object.assign({
       borderRadius: "50%",
       backgroundColor: "white"
-    }, KnobSizes[size], styles['circle'])), inActiveChild && !value && /*#__PURE__*/React__default.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && /*#__PURE__*/React__default.createElement(View, null, label));
+    }, KnobSizes[size], views['circle'])), inActiveChild && !value && /*#__PURE__*/React__default.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && /*#__PURE__*/React__default.createElement(View, null, label));
   };
 
   // Defines the SwitchComponent as a functional component that takes SwitchProps as props.
@@ -3805,7 +3798,7 @@
     // Export of the useTextAreaState hook for external usage.
   };
 
-  var _excluded$k = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "styles"];
+  var _excluded$k = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
   var TextAreaView = _ref => {
     var {
         id,
@@ -3819,7 +3812,6 @@
         size = 'sm',
         shape = 'default',
         variant = 'default',
-        colorScheme = 'theme.primary',
         isHovered = false,
         isFocused = false,
         isEditable = false,
@@ -3837,7 +3829,7 @@
         setValue = () => {},
         setIsFocused = () => {},
         setIsHovered = () => {},
-        styles = {
+        views = {
           box: {},
           text: {},
           label: {},
@@ -3863,7 +3855,7 @@
       backgroundColor: 'transparent',
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
       cursor: isDisabled ? 'not-allowed' : 'auto'
-    }, styles['field']);
+    }, views['field']);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => {
       setIsFocused(true);
@@ -3887,30 +3879,29 @@
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
       helperText: helperText,
       error: error,
-      styles: styles
+      views: views
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
       error: error,
       shape: shape,
-      styles: styles,
+      views: views,
       shadow: shadow,
       variant: variant,
       value: value,
-      color: colorScheme,
+      color: 'theme.primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       isWithLabel: isWithLabel,
-      colorScheme: colorScheme,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: colorScheme,
+      color: 'theme.primary',
       error: error
-    }, styles), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+    }, views), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "textarea",
       id: id,
       name: name,
@@ -3975,7 +3966,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", "themeMode"];
+  var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "views", "size", "shape", "variant", "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));
@@ -3992,7 +3983,7 @@
         helperText,
         onChangeText,
         shadow = {},
-        styles = {
+        views = {
           box: {},
           field: {},
           label: {},
@@ -4002,7 +3993,6 @@
         size = 'md',
         shape = 'default',
         variant = 'default',
-        colorScheme = 'theme.primary',
         error = false,
         isFocused = false,
         isHovered = false,
@@ -4043,7 +4033,7 @@
       backgroundColor: 'transparent',
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
       cursor: isDisabled ? 'not-allowed' : 'auto'
-    }, styles['field']);
+    }, views['field']);
     var handleFocus = () => {
       setIsFocused(true);
       if (onFocus) onFocus();
@@ -4080,30 +4070,29 @@
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
       helperText: helperText,
       error: error,
-      styles: styles
+      views: views
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
       error: error,
       shape: shape,
-      styles: styles,
+      views: views,
       shadow: shadow,
       variant: variant,
       value: value,
-      color: colorScheme,
+      color: 'theme.primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       isWithLabel: isWithLabel,
-      colorScheme: colorScheme,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
     }, left, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: colorScheme,
+      color: 'theme.primary',
       error: error
-    }, styles), label)), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
+    }, views), label)), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
       id: id,
       name: name,
       readOnly: isReadOnly,
@@ -4201,7 +4190,7 @@
     '6xl': 60
   };
 
-  var _excluded$m = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles", "infoText", "helperText"];
+  var _excluded$m = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
   var CheckboxView = _ref => {
     var {
         id,
@@ -4213,7 +4202,6 @@
         shadow = {},
         labelPosition = 'right',
         size = 'md',
-        colorScheme = 'theme.primary',
         error = false,
         isSelected = false,
         isHovered = false,
@@ -4223,7 +4211,7 @@
         defaultIsSelected = false,
         setIsSelected = () => {},
         setIsHovered = () => {},
-        styles = {
+        views = {
           checkbox: {},
           label: {}
         },
@@ -4247,11 +4235,11 @@
         width: 'fit-content',
         color: error ? 'theme.error' : isDisabled ? 'theme.disabled' : 'color.blueGray.700',
         cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
-      }, styles['label']),
+      }, views['label']),
       checkbox: Object.assign({}, isDisabled ? {
         backgroundColor: 'theme.disabled'
       } : (isChecked || isSelected) && !isIndeterminate || isIndeterminate ? {
-        backgroundColor: colorScheme
+        backgroundColor: 'theme.primary'
       } : {
         borderWidth: 2,
         borderColor: error ? 'theme.error' : isHovered ? 'color.gray.500' : 'color.gray.300',
@@ -4260,7 +4248,7 @@
         borderRadius: 3
       }, isHovered ? {
         filter: 'brightness(0.9)'
-      } : {}, Sizes[size], shadow, styles['checkbox'])
+      } : {}, Sizes[size], shadow, views['checkbox'])
     };
     return /*#__PURE__*/React__default.createElement(Label, Object.assign({
       htmlFor: id,
@@ -4276,7 +4264,7 @@
       alignItems: "center"
     }, labelPosition === 'left' && label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: size
-    }, styles == null ? void 0 : styles.label), label)), /*#__PURE__*/React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? (/*#__PURE__*/React__default.createElement(MinusIcon, {
+    }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? (/*#__PURE__*/React__default.createElement(MinusIcon, {
       size: IconSizes$3[size],
       color: "white"
     })) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React__default.createElement(TickIcon, {
@@ -4284,11 +4272,11 @@
       color: "white"
     }))), labelPosition === 'right' && label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: size
-    }, styles == null ? void 0 : styles.label), label))), infoText && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+    }, views == null ? void 0 : views.label), label))), infoText && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       marginLeft: labelPosition === 'left' ? 0 : 27,
       color: "color.gray.400",
       size: "sm"
-    }, styles == null ? void 0 : styles.infoText), infoText))), error && (/*#__PURE__*/React__default.createElement(Text, {
+    }, views == null ? void 0 : views.infoText), infoText))), error && (/*#__PURE__*/React__default.createElement(Text, {
       size: "xs",
       marginVertical: 0,
       marginHorizontal: 0,
@@ -5795,7 +5783,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", "themeMode"];
+    _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
   var CountryList = _ref => {
     var props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
@@ -5816,7 +5804,7 @@
       option,
       size = 'md',
       callback = () => {},
-      styles = {
+      views = {
         text: {}
       }
     } = _ref3;
@@ -5838,12 +5826,12 @@
       onClick: handleOptionClick,
       fontSize: appStudio.Typography.fontSizes[size],
       backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
-    }, styles['text']), option);
+    }, views['text']), option);
   };
   var DropDown$1 = _ref4 => {
     var {
       size,
-      styles = {
+      views = {
         dropDown: {}
       },
       options,
@@ -5865,12 +5853,12 @@
       flexDirection: "column",
       backgroundColor: "white",
       boxShadow: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px"
-    }, styles['dropDown']), options.map(option => (/*#__PURE__*/React__default.createElement(DropDownItem, Object.assign({
+    }, views['dropDown']), options.map(option => (/*#__PURE__*/React__default.createElement(DropDownItem, Object.assign({
       key: option.code,
       size: size,
       option: option.name,
       callback: handleCallback
-    }, styles['text'])))));
+    }, views['text'])))));
   };
   var CountryPickerView = _ref5 => {
     var {
@@ -5892,7 +5880,6 @@
         size = 'md',
         variant = 'default',
         shape = 'default',
-        colorScheme = 'theme.primary',
         onChange,
         onBlur = () => {},
         setHide = () => {},
@@ -5900,7 +5887,7 @@
         setIsHovered = () => {},
         setIsFocused = () => {},
         setValue = () => {},
-        styles = {
+        views = {
           text: {},
           icon: {},
           label: {},
@@ -5955,36 +5942,35 @@
       fontSize: appStudio.Typography.fontSizes[size],
       backgroundColor: 'transparent',
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
-      cursor: isDisabled ? 'not-allowed' : 'auto'
-    }, styles['field']);
+      cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
+    }, views['field']);
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
       helperText: helperText,
       error: error,
-      styles: styles,
+      views: views,
       onClick: handleClick
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
       error: error,
       shape: shape,
-      styles: styles,
+      views: views,
       shadow: shadow,
       variant: variant,
       value: value,
-      color: colorScheme,
+      color: 'theme.primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       isWithLabel: isWithLabel,
-      colorScheme: colorScheme,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: colorScheme,
+      color: 'theme.primary',
       error: error
-    }, styles), label)), /*#__PURE__*/React__default.createElement(CountrySelector, Object.assign({
+    }, views), label)), /*#__PURE__*/React__default.createElement(CountrySelector, Object.assign({
       id: id,
       name: name,
       placeholder: placeholder,
@@ -6000,15 +5986,15 @@
       orientation: "down",
       size: IconSizes$4[size],
       color: IconColor,
-      style: styles['icon']
+      style: views['icon']
     })) : (/*#__PURE__*/React__default.createElement(ChevronIcon, {
       orientation: "up",
       size: IconSizes$4[size],
       color: IconColor,
-      style: styles['icon']
+      style: views['icon']
     })))), !hide && (/*#__PURE__*/React__default.createElement(DropDown$1, {
       size: size,
-      styles: styles,
+      views: views,
       options: newOptions,
       callback: handleCallback
     })));
@@ -6038,7 +6024,7 @@
     };
   };
 
-  var _excluded$o = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+  var _excluded$o = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
   var DatePickerContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "date"
   }, props));
@@ -6053,8 +6039,7 @@
         size = 'md',
         variant = 'default',
         shape = 'default',
-        colorScheme = 'theme.primary',
-        styles = {
+        views = {
           box: {},
           label: {},
           helperText: {},
@@ -6102,34 +6087,33 @@
       backgroundColor: 'transparent',
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
       cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
-    }, styles['field']);
+    }, views['field']);
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
       helperText: helperText,
       error: error,
-      styles: styles
+      views: views
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
       error: error,
       shape: shape,
-      styles: styles,
+      views: views,
       shadow: shadow,
+      color: 'theme.primary',
       variant: variant,
       value: date,
-      color: colorScheme,
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       isWithLabel: isWithLabel,
-      colorScheme: colorScheme,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: colorScheme,
+      color: 'theme.primary',
       error: error
-    }, styles), label)), /*#__PURE__*/React__default.createElement(DatePickerContent, Object.assign({
+    }, views), label)), /*#__PURE__*/React__default.createElement(DatePickerContent, Object.assign({
       id: id,
       name: name,
       onFocus: handleFocus,
@@ -6165,10 +6149,10 @@
   var PasswordComponent = _ref => {
     var {
         visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
-          size: 14
+          widthHeight: 14
         }),
         hiddenIcon = /*#__PURE__*/React__default.createElement(CloseEyeIcon, {
-          size: 14
+          widthHeight: 14
         })
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
@@ -6225,7 +6209,7 @@
     };
   };
 
-  var _excluded$q = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "styles", "isDropdownVisible", "setIsDropdownVisible"];
+  var _excluded$q = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
   // Defines the functional component 'ComboBoxView' with destructured props.
   var ComboBoxView = _ref => {
     var {
@@ -6245,7 +6229,7 @@
         searchQuery,
         setSearchQuery,
         setFilteredItems,
-        styles,
+        views,
         isDropdownVisible,
         setIsDropdownVisible
         // Collects all further props not destructured explicitly.
@@ -6288,7 +6272,7 @@
       alignItems: "center",
       width: "100%"
     }, props), label && (/*#__PURE__*/React__default.createElement(Text, {
-      styles: styles == null ? void 0 : styles.label,
+      views: views == null ? void 0 : views.label,
       htmlFor: props.id
     }, label)), /*#__PURE__*/React__default.createElement(View, {
       position: "relative"
@@ -6303,16 +6287,16 @@
       justifyContent: "space-between",
       minWidth: 300,
       flexWrap: "nowrap"
-    }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+    }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
       gap: 15,
       alignItems: "center",
       position: "relative",
       width: "100%",
       onClick: () => setIsDropdownVisible(!isDropdownVisible)
-    }, styles == null ? void 0 : styles.labelContainer), left, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+    }, views == null ? void 0 : views.labelContainer), left, /*#__PURE__*/React__default.createElement(Text, Object.assign({
       weight: "medium",
       flexGrow: 1
-    }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(View, Object.assign({
+    }, views == null ? void 0 : views.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(View, Object.assign({
       id: "combobox-dropdown",
       position: "absolute",
       backgroundColor: "white",
@@ -6325,7 +6309,7 @@
       transform: "translateY(100%)",
       marginTop: "4px",
       borderRadius: "4px"
-    }, styles == null ? void 0 : styles.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
+    }, views == null ? void 0 : views.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
       id: props.id,
       name: props.name,
       width: "100%",
@@ -6335,14 +6319,14 @@
       hint: placeholder,
       isClearable: false,
       left: /*#__PURE__*/React__default.createElement(SearchIcon, {
-        size: 12
+        widthHeight: 12
       }),
-      styles: {
+      views: {
         box: Object.assign({
           width: '100%',
           padding: '6px 12px',
           borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
-        }, styles == null ? void 0 : styles.text)
+        }, views == null ? void 0 : views.text)
       }
     })), filteredItems.length > 0 && (/*#__PURE__*/React__default.createElement(View, {
       margin: 0,
@@ -6356,8 +6340,8 @@
       backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
       onMouseEnter: () => setHighlightedIndex(index),
       onClick: () => handleSelect(item)
-    }, styles == null ? void 0 : styles.item), /*#__PURE__*/React__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(TickIcon, {
-      size: 20
+    }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(TickIcon, {
+      widthHeight: 20
     }))))))))))));
   };
 
@@ -6621,10 +6605,10 @@
   var PasswordComponent$1 = _ref => {
     var {
         visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
-          size: 14
+          widthHeight: 14
         }),
         hiddenIcon = /*#__PURE__*/React__default.createElement(CloseEyeIcon, {
-          size: 14
+          widthHeight: 14
         })
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
@@ -6683,12 +6667,12 @@
     subtitle: '',
     variant: 'info',
     isClosable: false,
-    styles: {},
+    views: {},
     action: () => {},
     actionText: '',
     showIcon: false,
     timeout: 3000,
-    show: function show(variant, title, subtitle, isClosable, styles, action, actionText, showIcon, timeout) {
+    show: function show(variant, title, subtitle, isClosable, views, action, actionText, showIcon, timeout) {
       if (title === void 0) {
         title = '';
       }
@@ -6701,7 +6685,7 @@
         title,
         subtitle,
         isClosable,
-        styles,
+        views,
         action,
         actionText,
         showIcon,
@@ -6713,7 +6697,7 @@
     })
   }));
   var showMessage = (variant, title, subtitle, props) => {
-    useMessageStore.getState().show(variant, title, subtitle, props == null ? void 0 : props.isClosable, props == null ? void 0 : props.styles, props == null ? void 0 : props.action, props == null ? void 0 : props.actionText, props == null ? void 0 : props.showIcon, props == null ? void 0 : props.timeout);
+    useMessageStore.getState().show(variant, title, subtitle, props == null ? void 0 : props.isClosable, props == null ? void 0 : props.views, props == null ? void 0 : props.action, props == null ? void 0 : props.actionText, props == null ? void 0 : props.showIcon, props == null ? void 0 : props.timeout);
   };
   var hideMessage = () => {
     useMessageStore.getState().hide();
@@ -6791,7 +6775,7 @@
   };
 
   var MessageView = _ref => {
-    var _styles$closingIcon, _styles$closingIcon2;
+    var _views$closingIcon, _views$closingIcon2;
     var {
       variant,
       hide,
@@ -6803,7 +6787,7 @@
       showIcon = false,
       isClosable = false,
       timeout = 3000,
-      styles
+      views
     } = _ref;
     React.useEffect(() => {
       if (timeout && !isClosable) {
@@ -6833,21 +6817,21 @@
     }[variant];
     var iconComponent = {
       info: /*#__PURE__*/React__default.createElement(InfoIcon, Object.assign({
-        size: 24,
+        widthHeight: 24,
         color: iconColor
-      }, styles == null ? void 0 : styles.icon)),
-      success: /*#__PURE__*/React__default.createElement(SuccessIcon, Object.assign({
-        size: 24,
+      }, views == null ? void 0 : views.icon)),
+      success: (/*#__PURE__*/React__default.createElement(SuccessIcon, Object.assign({
+        widthHeight: 24,
         color: iconColor
-      }, styles == null ? void 0 : styles.icon)),
-      warning: /*#__PURE__*/React__default.createElement(WarningIcon, Object.assign({
-        size: 24,
+      }, views == null ? void 0 : views.icon))),
+      warning: (/*#__PURE__*/React__default.createElement(WarningIcon, Object.assign({
+        widthHeight: 24,
         color: iconColor
-      }, styles == null ? void 0 : styles.icon)),
+      }, views == null ? void 0 : views.icon))),
       error: /*#__PURE__*/React__default.createElement(ErrorIcon, Object.assign({
-        size: 24,
+        widthHeight: 24,
         color: iconColor
-      }, styles == null ? void 0 : styles.icon))
+      }, views == null ? void 0 : views.icon))
     }[variant];
     var isShowIcon = showIcon && iconComponent;
     return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
@@ -6864,20 +6848,20 @@
       onClick: isClosable ? () => {} : () => {
         hide();
       }
-    }, containerStyle, styles == null ? void 0 : styles.container), isShowIcon && iconComponent, /*#__PURE__*/React__default.createElement(Vertical, {
+    }, containerStyle, views == null ? void 0 : views.container), isShowIcon && iconComponent, /*#__PURE__*/React__default.createElement(Vertical, {
       gap: 8,
       width: "100%"
     }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: "md",
       weight: "semiBold"
-    }, styles == null ? void 0 : styles.title), title), subtitle && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+    }, views == null ? void 0 : views.title), title), subtitle && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: "sm"
-    }, styles == null ? void 0 : styles.subtitle), subtitle))), isWithAction && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+    }, views == null ? void 0 : views.subtitle), subtitle))), isWithAction && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       marginRight: 10,
       onClick: action,
       padding: "6px 10px",
       whiteSpace: "nowrap"
-    }, containerStyle, styles == null ? void 0 : styles.actionText), actionText)), isClosable && (/*#__PURE__*/React__default.createElement(View, Object.assign({
+    }, containerStyle, views == null ? void 0 : views.actionText), actionText)), isClosable && (/*#__PURE__*/React__default.createElement(View, Object.assign({
       position: "absolute",
       zIndex: 10000,
       right: 8,
@@ -6885,10 +6869,10 @@
       onClick: () => {
         hide();
       }
-    }, styles == null || (_styles$closingIcon = styles.closingIcon) == null ? void 0 : _styles$closingIcon.container), /*#__PURE__*/React__default.createElement(CloseIcon, Object.assign({
-      size: 18,
+    }, views == null || (_views$closingIcon = views.closingIcon) == null ? void 0 : _views$closingIcon.container), /*#__PURE__*/React__default.createElement(CloseIcon, Object.assign({
+      widthHeight: 18,
       color: iconColor
-    }, styles == null || (_styles$closingIcon2 = styles.closingIcon) == null ? void 0 : _styles$closingIcon2.icon)))));
+    }, views == null || (_views$closingIcon2 = views.closingIcon) == null ? void 0 : _views$closingIcon2.icon)))));
   };
 
   var MessageLayout = _ref => {
@@ -6903,7 +6887,7 @@
       variant,
       subtitle,
       isClosable,
-      styles,
+      views,
       action,
       actionText,
       showIcon,
@@ -6935,7 +6919,7 @@
       title: title,
       theme: theme,
       isClosable: isClosable,
-      styles: styles,
+      views: views,
       action: action,
       actionText: actionText,
       showIcon: showIcon,
@@ -7038,16 +7022,22 @@
       handleClick
     };
   };
-  var Uploader = _ref2 => {
+
+  var UploadView = _ref => {
     var {
-      accept = '*/*',
+      accept,
       isLoading = false,
       progress = 0,
       icon,
       text,
-      maxSize,
-      onFileSelect,
-      validateFile,
+      previewUrl,
+      thumbnailUrl,
+      errorMessage,
+      fileInputRef,
+      videoRef,
+      selectedFile,
+      handleFileChange,
+      handleClick,
       containerProps,
       errorMessageProps,
       progressProps,
@@ -7055,74 +7045,75 @@
       imageProps,
       iconProps,
       textProps,
-      renderError = _ref3 => {
+      fileType,
+      previewUrl: externalPreviewUrl,
+      renderError = _ref2 => {
         var {
           errorMessage,
           errorMessageProps
-        } = _ref3;
+        } = _ref2;
         return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
           color: "red",
           fontSize: 12,
           marginTop: 8
         }, errorMessageProps), errorMessage);
       },
-      renderText = _ref4 => {
+      renderText = _ref3 => {
         var {
           text,
           textProps
-        } = _ref4;
+        } = _ref3;
         return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
           marginTop: 8
         }, textProps), text);
       },
-      renderFile = _ref5 => {
+      renderFile = _ref4 => {
         var {
           selectedFile,
           textProps
-        } = _ref5;
-        return /*#__PURE__*/React__default.createElement(Center, {
+        } = _ref4;
+        return selectedFile ? (/*#__PURE__*/React__default.createElement(Center, {
           marginTop: 8,
           gap: 10,
           flexDirection: "column"
         }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
           maxLines: 2
-        }, textProps), selectedFile.name), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, textProps), "(", Math.round(selectedFile.size / 1024), " KB)"));
+        }, textProps), selectedFile.name), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, textProps), "(", Math.round(selectedFile.size / 1024), " KB)"))) : null;
       },
-      renderVideo = _ref6 => {
+      renderVideo = _ref5 => {
         var {
           selectedFile,
           thumbnailUrl,
           videoRef,
           videoProps,
           imageProps
-        } = _ref6;
-        console.log('thumbnailUrl', thumbnailUrl);
+        } = _ref5;
         return /*#__PURE__*/React__default.createElement(appStudio.View, {
           width: "100%",
           height: "100%",
           position: "relative"
         }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
           as: "video",
-          width: 0,
-          height: 0,
-          src: selectedFile == null ? void 0 : selectedFile.name,
+          width: "100%",
+          height: "100%",
+          src: selectedFile ? URL.createObjectURL(selectedFile) : undefined,
           style: {
             objectFit: 'cover'
           },
           ref: videoRef
-        }, videoProps)), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
+        }, videoProps)), thumbnailUrl && (/*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
           src: thumbnailUrl,
           alt: "Video Thumbnail",
           width: "100%",
           height: "100%",
           objectFit: "cover"
-        }, imageProps)));
+        }, imageProps))));
       },
-      renderImage = _ref7 => {
+      renderImage = _ref6 => {
         var {
           previewUrl,
           imageProps
-        } = _ref7;
+        } = _ref6;
         return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
           src: previewUrl,
           alt: "Preview",
@@ -7131,11 +7122,11 @@
           objectFit: "cover"
         }, imageProps));
       },
-      renderProgress = _ref8 => {
+      renderProgress = _ref7 => {
         var {
           progress,
           progressProps
-        } = _ref8;
+        } = _ref7;
         return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
           gap: 8,
           alignItems: "center"
@@ -7147,28 +7138,14 @@
         }, /*#__PURE__*/React__default.createElement(appStudio.View, {
           height: 4,
           width: progress + "%",
-          borderRadius: 2
+          borderRadius: 2,
+          backgroundColor: "#000"
         })), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           fontSize: 12
         }, progress, "%"));
       }
-    } = _ref2;
-    var {
-      previewUrl,
-      thumbnailUrl,
-      errorMessage,
-      videoRef,
-      fileInputRef,
-      selectedFile,
-      handleFileChange,
-      handleClick
-    } = useUpload({
-      accept,
-      maxSize,
-      onFileSelect,
-      validateFile
-    });
-    var fileType = previewUrl && accept.includes('video') ? 'video' : previewUrl && accept.includes('image') ? 'image' : 'file';
+    } = _ref;
+    var finalPreviewUrl = externalPreviewUrl || previewUrl;
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
       onClick: handleClick,
       cursor: "pointer",
@@ -7178,26 +7155,27 @@
       flexDirection: "column",
       overflow: "hidden",
       position: "relative"
-    }, containerProps), progress == 100 && fileType == 'image' && previewUrl && renderImage({
-      previewUrl,
+    }, containerProps), progress === 100 && fileType === 'image' && finalPreviewUrl && renderImage({
+      previewUrl: finalPreviewUrl,
       imageProps
-    }), progress == 100 && fileType == 'video' && thumbnailUrl && renderVideo({
+    }), progress === 100 && fileType === 'video' && thumbnailUrl && renderVideo({
+      selectedFile,
       thumbnailUrl,
       videoRef,
       videoProps,
-      iconProps
-    }), progress == 100 && fileType == 'file' && previewUrl && renderFile({
+      imageProps
+    }), progress === 100 && fileType === 'file' && selectedFile && renderFile({
       selectedFile,
       textProps
     }), progress < 100 && (icon || /*#__PURE__*/React__default.createElement(UploadIcon, Object.assign({
-      size: 32
+      widthHeight: 32
     }, iconProps))), !selectedFile && text && renderText({
       text,
       textProps
     }), isLoading && renderProgress({
       progress,
       progressProps
-    }), renderError({
+    }), errorMessage && renderError({
       errorMessage,
       errorMessageProps
     }), /*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -7212,6 +7190,54 @@
     }));
   };
 
+  var _excluded$y = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress"];
+  var Uploader = _ref => {
+    var {
+        accept = '*/*',
+        icon,
+        text,
+        maxSize,
+        onFileSelect,
+        validateFile,
+        isLoading = false,
+        progress = 0
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    var {
+      previewUrl,
+      thumbnailUrl,
+      errorMessage,
+      videoRef,
+      fileInputRef,
+      selectedFile,
+      handleFileChange,
+      handleClick
+    } = useUpload({
+      accept,
+      maxSize,
+      onFileSelect,
+      validateFile
+    });
+    return /*#__PURE__*/React__default.createElement(UploadView, Object.assign({
+      handleClick: handleClick,
+      accept: accept,
+      isLoading: isLoading,
+      progress: progress,
+      icon: icon,
+      text: text,
+      maxSize: maxSize,
+      onFileSelect: onFileSelect,
+      validateFile: validateFile,
+      errorMessage: errorMessage,
+      handleFileChange: handleFileChange,
+      selectedFile: selectedFile,
+      videoRef: videoRef,
+      fileInputRef: fileInputRef,
+      previewUrl: previewUrl,
+      thumbnailUrl: thumbnailUrl
+    }, props));
+  };
+
   var useModalStore = /*#__PURE__*/zustand.create(set => ({
     modals: [],
     onHide: name => name,
@@ -7313,7 +7339,7 @@
     xl: 28
   };
 
-  var _excluded$y = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+  var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
     _excluded2$7 = ["children", "shadow", "isFullScreen", "shape"],
     _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition"],
     _excluded4$3 = ["children"],
@@ -7327,7 +7353,7 @@
         onClose = () => {},
         position = 'center'
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -7395,9 +7421,8 @@
     var onClose = props.onClose ? props.onClose : hideModal;
     var buttonIcon = /*#__PURE__*/React__default.createElement(Button, {
       onClick: onClose,
-      colorScheme: "transparent",
       icon: /*#__PURE__*/React__default.createElement(CloseIcon, {
-        size: HeaderIconSizes[iconSize],
+        widthHeight: HeaderIconSizes[iconSize],
         color: buttonColor
       }),
       padding: 0,
@@ -7497,13 +7522,13 @@
   var defaultStyles = {};
   // Create a context that includes both styles and the onClick function
   var TableContext = /*#__PURE__*/React__default.createContext({
-    styles: defaultStyles,
+    views: defaultStyles,
     onRowClick: () => {}
   });
   var TableProvider = _ref => {
     var {
       children,
-      styles = defaultStyles,
+      views = defaultStyles,
       onRowClick
     } = _ref;
     return (
@@ -7511,7 +7536,7 @@
       // Pass both styles and onClick to the context
       React__default.createElement(TableContext.Provider, {
         value: {
-          styles,
+          views,
           onRowClick
         }
       }, children)
@@ -7522,82 +7547,82 @@
 
   var TableContainer = props => {
     var {
-      styles
+      views
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "table",
       borderCollapse: "collapse"
-    }, styles.table, props));
+    }, views.table, props));
   };
   var TableHead = props => {
     var {
-      styles
+      views
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "thead",
       borderBottom: "0.5px solid #ddd",
       textAlign: "left",
       color: "color.gray.400"
-    }, styles.thead, props));
+    }, views.thead, props));
   };
   var TableHeadCell = props => {
     var {
-      styles
+      views
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "th",
       padding: "14px",
       whiteSpace: "nowrap",
       fontWeight: "500"
-    }, styles.th, props));
+    }, views.th, props));
   };
   var TableRow = props => {
     var {
-      styles,
+      views,
       onRowClick
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "tr"
-    }, styles.tr, {
+    }, views.tr, {
       onClick: onRowClick
     }, props));
   };
   var TableCell = props => {
     var {
-      styles
+      views
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "td",
       padding: "14px",
       whiteSpace: "nowrap",
       fontWeight: props.isFirstColumn ? '400' : '300'
-    }, styles.td, props));
+    }, views.td, props));
   };
   var TableBody = props => {
     var {
-      styles
+      views
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "tbody"
-    }, styles.tbody, props));
+    }, views.tbody, props));
   };
   var TableFooter = props => {
     var {
-      styles
+      views
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "tfoot"
-    }, styles.tfoot, props));
+    }, views.tfoot, props));
   };
   var TableCaption = props => {
     var {
-      styles
+      views
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "caption",
       margin: '10px 0',
       color: "color.gray.400"
-    }, styles.caption, props));
+    }, views.caption, props));
   };
   var TableView = _ref => {
     var {
@@ -7623,11 +7648,11 @@
   var Table = _ref => {
     var {
       children,
-      styles,
+      views,
       onClick
     } = _ref;
     return /*#__PURE__*/React__default.createElement(TableProvider, {
-      styles: styles,
+      views: views,
       onRowClick: onClick
     }, children);
   };
@@ -7694,7 +7719,7 @@
       // Default to empty array
       activeTab,
       handleTabClick,
-      styles = {},
+      views = {},
       // Default to empty object
       renderTab,
       renderContent
@@ -7702,7 +7727,7 @@
     // If there's no active tab (e.g., tabs array is empty), render nothing or a placeholder
     if (!activeTab) {
       // Optionally render a placeholder when no tabs are active/available
-      // return <View {...styles.container}><Text>No tabs available.</Text></View>;
+      // return <View {...views.container}><Text>No tabs available.</Text></View>;
       return null; // Or simply render nothing
     }
     return (
@@ -7711,7 +7736,7 @@
       React__default.createElement(Vertical, Object.assign({
         width: "100%",
         height: '100%'
-      }, styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({}, styles.headerTabs), tabs.map(tab => {
+      }, views.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({}, views.headerTabs), tabs.map(tab => {
         // Determine if the current tab in the loop is the active one
         var isActive = tab.title === activeTab.title;
         // Prepare the onClick handler for this specific tab
@@ -7726,17 +7751,17 @@
           onClick: onClick,
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0
-        }, styles.tab, isActive ? styles.activeTab : {}, {
+        }, views.tab, isActive ? views.activeTab : {}, {
           // Example: Set variant based on active state (can be overridden by styles)
           variant: isActive ? 'filled' : 'ghost',
           cursor: "pointer" // Ensure pointer cursor
         }), tab.icon, /*#__PURE__*/React__default.createElement(Text
         // Apply base title styles and merge activeText styles if this tab is active
-        , Object.assign({}, styles.title, isActive ? styles.activeText : {}), tab.title));
+        , Object.assign({}, views.title, isActive ? views.activeText : {}), tab.title));
       })), /*#__PURE__*/React__default.createElement(View, Object.assign({
         width: '100%',
         height: "100%"
-      }, styles.content), renderContent ? renderContent(activeTab) :
+      }, views.content), renderContent ? renderContent(activeTab) :
       // Otherwise, render the content property from the active tab object
       activeTab.content))
     );
@@ -7749,7 +7774,7 @@
   var TabsComponent = _ref => {
     var {
       tabs,
-      styles,
+      views,
       initialTabValue,
       onTabChange,
       renderTab,
@@ -7774,7 +7799,7 @@
     // Render the presentation component with the necessary props
     return /*#__PURE__*/React__default.createElement(TabsView, {
       tabs: tabs,
-      styles: styles,
+      views: views,
       activeTab: activeTab,
       handleTabClick: handleTabClick,
       renderTab: renderTab,
@@ -7799,18 +7824,11 @@
     };
   };
 
-  var ToggleShapes = {
-    sharp: 0,
-    rounded: 4,
-    pillShaped: 24
-  };
-
-  var _excluded$z = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
+  var _excluded$A = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
   var ToggleView = _ref => {
     var {
         children,
         shape = 'rounded',
-        colorScheme = 'color.trueGray.400',
         variant = 'ghost',
         isHovered,
         setIsHovered,
@@ -7819,14 +7837,14 @@
         setIsToggled,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
-    var toggleColor = !isDisabled ? colorScheme : 'theme.disabled';
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
     var isActive = !!(isToggle || isHovered);
-    var ToggleVariants = {
+    var toggleVariants = {
       outline: {
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: colorScheme
+        borderColor: 'color.trueGray.400'
       },
       link: {
         borderWidth: 1,
@@ -7856,25 +7874,24 @@
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       cursor: isDisabled ? 'not-allowed' : 'pointer',
-      borderRadius: ToggleShapes[shape],
+      borderRadius: shape === 'pillShaped' ? '50px' : '8px',
       onClick: handleToggle
-    }, ToggleVariants[variant], props), children);
+    }, toggleVariants[variant], props), children);
   };
 
-  var _excluded$A = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
+  var _excluded$B = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
   // Destructuring properties from ToggleProps to be used within the ToggleComponent.
   var ToggleComponent = _ref => {
     var {
         children,
         shape,
-        colorScheme,
         variant,
         isDisabled,
         // Assigning a default value of false to the isToggled property if none is provided.
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,
@@ -7889,7 +7906,6 @@
     // Beginning of the JSX block to render the Toggle view component.
     return /*#__PURE__*/React__default.createElement(ToggleView, Object.assign({
       shape: shape,
-      colorScheme: colorScheme,
       variant: variant,
       isDisabled: isDisabled,
       isHovered: isHovered,
@@ -7924,9 +7940,7 @@
       // Prop 'shape' with default value 'rounded', determines the shape of the toggle buttons.
       shape = 'rounded',
       // Prop 'variant' with default value 'ghost' represents the visual style variant of the toggles.
-      variant = 'ghost',
-      // Prop 'colorScheme' with default value 'color.trueGray.400' sets the color theme for toggles.
-      colorScheme = 'color.trueGray.400'
+      variant = 'ghost'
     } = _ref;
     // handleToggle is a memoized callback that handles the toggle state changes.
     var handleToggle = React.useCallback((id, isActive) => {
@@ -7948,7 +7962,6 @@
     }, items.map(item => (/*#__PURE__*/React__default.createElement(Toggle, {
       role: "toggle-" + item.id,
       key: item.id,
-      colorScheme: colorScheme,
       shape: shape,
       variant: variant,
       isToggled: activeToggles.includes(item.id) || item.isActive,
@@ -7964,8 +7977,6 @@
       items,
       // Destructure 'shape' prop to define the shape of the toggle buttons
       shape,
-      // Destructure 'colorScheme' prop for toggle button styling
-      colorScheme,
       // Destructure 'variant' prop to determine the visual style of the toggle group
       variant,
       // Destructure 'onToggleChange' prop for the callback when toggle state changes
@@ -7979,7 +7990,6 @@
     return /*#__PURE__*/React__default.createElement(ToggleGroupView, {
       items: items,
       shape: shape,
-      colorScheme: colorScheme,
       variant: variant,
       activeToggles: activeToggles,
       setActiveToggles: setActiveToggles,
@@ -8233,14 +8243,12 @@
   exports.WifiIcon = WifiIcon;
   exports.XIcon = XIcon;
   exports.YoutubeIcon = YoutubeIcon;
-  exports.generateThumbnail = generateThumbnail;
   exports.hideMessage = hideMessage;
   exports.hideModal = hideModal;
   exports.showMessage = showMessage;
   exports.showModal = showModal;
   exports.useMessageStore = useMessageStore;
   exports.useModalStore = useModalStore;
-  exports.useUpload = useUpload;
 
   Object.defineProperty(exports, '__esModule', { value: true });