@app-studio/web 0.8.64 → 0.8.66

package/dist/web.esm.js

@@ -293,7 +293,7 @@ var IconWrapper = _ref => {
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return /*#__PURE__*/React.createElement(Center, Object.assign({
-    size: size,
+    widthHeight: size,
     lineHeight: size,
     color: color,
     display: "flex",
@@ -320,7 +320,7 @@ var ChevronIcon = _ref2 => {
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -339,7 +339,7 @@ var DragHandleIcon = _ref3 => {
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -381,7 +381,7 @@ var FileIcon = _ref4 => {
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -409,7 +409,7 @@ var VideoIcon = _ref5 => {
     } = _ref5,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -442,7 +442,7 @@ var ImageIcon = _ref6 => {
     } = _ref6,
     props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -481,7 +481,7 @@ var TwitterIcon = _ref7 => {
     } = _ref7,
     props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -503,7 +503,7 @@ var XIcon = _ref8 => {
     } = _ref8,
     props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -526,7 +526,7 @@ var TwitchIcon = _ref9 => {
     } = _ref9,
     props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -554,7 +554,7 @@ var CloseIcon = _ref10 => {
     } = _ref10,
     props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -583,7 +583,7 @@ var InstagramIcon = _ref11 => {
     } = _ref11,
     props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -614,7 +614,7 @@ var YoutubeIcon = _ref12 => {
     } = _ref12,
     props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -642,7 +642,7 @@ var FacebookIcon = _ref13 => {
     } = _ref13,
     props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -664,7 +664,7 @@ var LinkedinIcon = _ref14 => {
     } = _ref14,
     props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24"
@@ -690,7 +690,7 @@ var ThreadsIcon = _ref15 => {
     } = _ref15,
     props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24"
@@ -713,7 +713,7 @@ var MinusIcon = _ref16 => {
     } = _ref16,
     props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -737,7 +737,7 @@ var InfoIcon = _ref17 => {
     } = _ref17,
     props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props, {
     "aria-label": "Information"
@@ -758,7 +758,7 @@ var PlayIcon = _ref18 => {
     } = _ref18,
     props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -777,7 +777,7 @@ var PauseIcon = _ref19 => {
     } = _ref19,
     props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -796,7 +796,7 @@ var HeartIcon = _ref20 => {
     } = _ref20,
     props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -815,7 +815,7 @@ var StarIcon = _ref21 => {
     } = _ref21,
     props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -834,7 +834,7 @@ var SaveIcon = _ref22 => {
     } = _ref22,
     props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -857,7 +857,7 @@ var WarningIcon = _ref23 => {
     } = _ref23,
     props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -888,7 +888,7 @@ var BatteryIcon = _ref24 => {
     } = _ref24,
     props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -907,7 +907,7 @@ var BookmarkIcon = _ref25 => {
     } = _ref25,
     props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -926,7 +926,7 @@ var CloudIcon = _ref26 => {
     } = _ref26,
     props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -945,7 +945,7 @@ var CopyIcon = _ref27 => {
     } = _ref27,
     props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -971,7 +971,7 @@ var DustBinIcon = _ref28 => {
     } = _ref28,
     props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -990,7 +990,7 @@ var EditIcon = _ref29 => {
     } = _ref29,
     props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1009,7 +1009,7 @@ var ErrorIcon = _ref30 => {
     } = _ref30,
     props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1042,7 +1042,7 @@ var DownloadIcon = _ref31 => {
     } = _ref31,
     props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1061,7 +1061,7 @@ var MenuIcon = _ref32 => {
     } = _ref32,
     props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1096,7 +1096,7 @@ var ShareIcon = _ref33 => {
     } = _ref33,
     props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1137,7 +1137,7 @@ var RefreshIcon = _ref34 => {
     } = _ref34,
     props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1158,7 +1158,7 @@ var PrintIcon = _ref35 => {
     } = _ref35,
     props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 24 24",
@@ -1178,7 +1178,7 @@ var PanelIcon = _ref36 => {
     } = _ref36,
     props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1249,7 +1249,7 @@ var FilterIcon = _ref37 => {
     } = _ref37,
     props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1268,7 +1268,7 @@ var HomeIcon = _ref38 => {
     } = _ref38,
     props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1287,7 +1287,7 @@ var LocationIcon = _ref39 => {
     } = _ref39,
     props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1306,7 +1306,7 @@ var LockIcon = _ref40 => {
     } = _ref40,
     props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1332,7 +1332,7 @@ var MicrophoneIcon = _ref41 => {
     } = _ref41,
     props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1365,7 +1365,7 @@ var MoonIcon = _ref42 => {
     } = _ref42,
     props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1384,7 +1384,7 @@ var NotificationIcon = _ref43 => {
     } = _ref43,
     props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1405,7 +1405,7 @@ var OpenEyeIcon = _ref44 => {
     } = _ref44,
     props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1424,7 +1424,7 @@ var ProfileIcon = _ref45 => {
     } = _ref45,
     props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1444,7 +1444,7 @@ var SettingsIcon = _ref46 => {
     } = _ref46,
     props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1463,7 +1463,7 @@ var SuccessIcon = _ref47 => {
     } = _ref47,
     props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1482,7 +1482,7 @@ var UnLikeIcon = _ref48 => {
     } = _ref48,
     props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1501,7 +1501,7 @@ var ClockIcon = _ref49 => {
     } = _ref49,
     props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1524,7 +1524,7 @@ var CameraIcon = _ref50 => {
     } = _ref50,
     props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1547,7 +1547,7 @@ var BluetoothIcon = _ref51 => {
     } = _ref51,
     props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1566,7 +1566,7 @@ var LikeIcon = _ref52 => {
     } = _ref52,
     props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1585,7 +1585,7 @@ var UnlockIcon = _ref53 => {
     } = _ref53,
     props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1611,7 +1611,7 @@ var WifiIcon = _ref54 => {
     } = _ref54,
     props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1630,7 +1630,7 @@ var UploadIcon = _ref55 => {
     } = _ref55,
     props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1653,7 +1653,7 @@ var SearchIcon = _ref56 => {
     } = _ref56,
     props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1672,7 +1672,7 @@ var CloseEyeIcon = _ref57 => {
     } = _ref57,
     props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1692,7 +1692,7 @@ var ExternalLinkIcon = _ref58 => {
     } = _ref58,
     props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1711,7 +1711,7 @@ var PlusIcon = _ref59 => {
     } = _ref59,
     props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1740,7 +1740,7 @@ var TickIcon = _ref60 => {
     } = _ref60,
     props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1761,7 +1761,7 @@ var BoldArrowIcon = _ref61 => {
     } = _ref61,
     props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1780,7 +1780,7 @@ var ArrowIcon = _ref62 => {
     } = _ref62,
     props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1805,7 +1805,7 @@ var SpinnerIcon = _ref63 => {
     } = _ref63,
     props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1830,7 +1830,7 @@ var CalendarIcon = _ref64 => {
     } = _ref64,
     props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: size,
     color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1931,7 +1931,7 @@ var Icon = {
   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: {
@@ -1944,7 +1944,7 @@ var Themes = {
       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',
@@ -1955,7 +1955,7 @@ var Themes = {
       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',
@@ -1966,7 +1966,7 @@ var Themes = {
       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',
@@ -1977,7 +1977,7 @@ var Themes = {
       color: '#ef4444'
     }
   },
-  // Introduction of the 'warning' theme styles.
+  // Introduction of the 'warning' theme views.
   warning: {
     container: {
       backgroundColor: 'color.orange.200',
@@ -1992,11 +1992,11 @@ var Themes = {
 
 // 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'
@@ -2008,20 +2008,20 @@ var AlertView = _ref => {
     borderStyle: "solid",
     padding: 16,
     flexWrap: "nowrap"
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React.createElement(View, {
+  }, views == null ? void 0 : views.container), /*#__PURE__*/React.createElement(View, {
     alignSelf: 'center'
   }, icon ? icon : (/*#__PURE__*/React.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.createElement(Vertical, {
     gap: 10
   }, /*#__PURE__*/React.createElement(Text, Object.assign({
     fontSize: "16px",
     color: Themes[variant].content.color
-  }, styles == null ? void 0 : styles.title), title), /*#__PURE__*/React.createElement(Text, Object.assign({
+  }, views == null ? void 0 : views.title), title), /*#__PURE__*/React.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.
@@ -2029,14 +2029,14 @@ var AlertComponent = _ref => {
   var {
     icon,
     title,
-    styles,
+    views,
     description,
     variant
   } = _ref;
   return /*#__PURE__*/React.createElement(AlertView, {
     icon: icon,
     title: title,
-    styles: styles,
+    views: views,
     description: description,
     variant: variant
   });
@@ -2110,7 +2110,7 @@ var AvatarView = _ref => {
     src,
     size = 'md',
     fallback = 'IM',
-    styles,
+    views,
     imageError,
     setImageError,
     onClick = () => {}
@@ -2120,7 +2120,7 @@ var AvatarView = _ref => {
   // 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.createElement(Center, Object.assign({
     role: "avatar",
@@ -2133,7 +2133,7 @@ var AvatarView = _ref => {
     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.createElement(Image, {
+  }, views == null ? void 0 : views.container), !imageError ? (/*#__PURE__*/React.createElement(Image, {
     alt: "IM",
     src: src,
     style: imageStyle,
@@ -2142,7 +2142,7 @@ var AvatarView = _ref => {
     onError: () => setImageError(true)
   })) : (/*#__PURE__*/React.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.
@@ -2150,7 +2150,7 @@ var AvatarComponent = _ref => {
   var {
     src,
     size,
-    styles,
+    views,
     fallback,
     onClick
   } = _ref;
@@ -2163,7 +2163,7 @@ var AvatarComponent = _ref => {
   return /*#__PURE__*/React.createElement(AvatarView, {
     src: src,
     size: size,
-    styles: styles,
+    views: views,
     fallback: fallback,
     imageError: imageError,
     setImageError: setImageError,
@@ -2234,17 +2234,16 @@ var BadgeView = _ref => {
   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',
@@ -2255,23 +2254,23 @@ var BadgeView = _ref => {
       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'
@@ -2280,13 +2279,13 @@ var BadgeView = _ref => {
   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.createElement(Center, Object.assign({
     role: "badge"
   }, combinedStyles), /*#__PURE__*/React.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.
@@ -2297,22 +2296,19 @@ var Badge = _ref => {
     // 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.createElement(BadgeView, {
     content: content,
     shape: shape,
-    colorScheme: colorScheme,
     position: position,
     variant: variant,
     size: size,
-    styles: styles
+    views: views
   });
 };
 
@@ -2351,7 +2347,7 @@ var IconSizes = {
   '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 {
@@ -2367,7 +2363,7 @@ var LinkView = _ref => {
       // 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: {}
       },
@@ -2386,12 +2382,12 @@ var LinkView = _ref => {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
-  }, styles.text, props), /*#__PURE__*/React.createElement(Horizontal, {
+  }, views.text, props), /*#__PURE__*/React.createElement(Horizontal, {
     gap: 3,
     alignItems: "center",
     flexWrap: "nowrap"
   }, children, isExternal && /*#__PURE__*/React.createElement(ExternalLinkIcon, {
-    size: IconSizes[iconSize]
+    widthHeight: IconSizes[iconSize]
   }))));
 };
 
@@ -2706,7 +2702,7 @@ React.createElement(LoaderView, Object.assign({}, props)));
 // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
 var Loader = LoaderComponent;
 
-var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "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;
@@ -2732,7 +2728,6 @@ var ButtonView = _ref => {
       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 = {},
@@ -2756,7 +2751,7 @@ var ButtonView = _ref => {
   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';
@@ -2774,7 +2769,7 @@ var ButtonView = _ref => {
       // 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
     },
@@ -2832,8 +2827,7 @@ var ButtonView = _ref => {
     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.createElement(Link, Object.assign({
     to: to,
-    textDecorationColor: colorScheme,
-    colorScheme: colorScheme,
+    textDecorationColor: 'theme.primary',
     isExternal: isExternal
   }, linkProps), content)) : content);
 };
@@ -2870,8 +2864,7 @@ var _excluded$a = ["src", "color", "themeMode"],
 var FileSVG = _ref => {
   var {
       src,
-      color,
-      themeMode: elementMode
+      color
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
@@ -2879,8 +2872,12 @@ var FileSVG = _ref => {
     themeMode
   } = 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.createElement(Center, Object.assign({}, props), /*#__PURE__*/React.createElement(Image, Object.assign({}, Colorprops, {
     content: 'url("' + src + '")',
@@ -2943,11 +2940,11 @@ var useItemState = () => {
   };
 };
 
-var _excluded$b = ["children", "styles"];
+var _excluded$b = ["children", "views"];
 var HelperText = _ref => {
   var {
       children,
-      styles = {
+      views = {
         helperText: {}
       }
     } = _ref,
@@ -2957,22 +2954,22 @@ var HelperText = _ref => {
     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.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
-  }, props), children, !error && helperText && /*#__PURE__*/React.createElement(HelperText, Object.assign({}, styles), helperText), error && (/*#__PURE__*/React.createElement(Text, {
+  }, props), children, !error && helperText && /*#__PURE__*/React.createElement(HelperText, Object.assign({}, views), helperText), error && (/*#__PURE__*/React.createElement(Text, {
     size: "xs",
     marginVertical: 0,
     marginHorizontal: 0,
@@ -3027,7 +3024,7 @@ var PaddingWithoutLabel = {
   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,
@@ -3041,14 +3038,13 @@ var FieldContent = _ref => {
       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.createElement(Horizontal, Object.assign({
     gap: 10,
     width: "100%",
@@ -3064,7 +3060,7 @@ var FieldContent = _ref => {
     fontSize: 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"];
@@ -3112,13 +3108,13 @@ var HeadingSizes$1 = {
   },
   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
   }
@@ -3172,14 +3168,14 @@ React.createElement(LabelView, Object.assign({}, props))
 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,
@@ -3193,7 +3189,7 @@ var FieldLabel = _ref => {
     position: "absolute",
     color: error ? 'error' : color,
     fontSize: LabelSizes[size]
-  }, styles['label'], props), children);
+  }, views['label'], props), children);
 };
 
 var _excluded$h = ["children"];
@@ -3221,7 +3217,7 @@ var IconSizes$2 = {
 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 {
@@ -3255,7 +3251,7 @@ var SelectBox = _ref2 => {
   var _ref3;
   var {
     size = 'md',
-    styles = {
+    views = {
       field: {},
       text: {}
     },
@@ -3276,7 +3272,7 @@ var SelectBox = _ref2 => {
     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.createElement(Text, Object.assign({}, fieldStyles), (value === '' || Array.isArray(value) && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React.createElement(React.Fragment, null, typeof value === 'string' ? (_ref3 = option && option.label) != null ? _ref3 : value :
   // If value is an array and not empty, render MultiSelect options
@@ -3329,7 +3325,7 @@ var HiddenSelect = _ref4 => {
 var DropDown = _ref5 => {
   var {
     size,
-    styles = {
+    views = {
       dropDown: {}
     },
     options,
@@ -3376,10 +3372,10 @@ var DropDown = _ref5 => {
         display: 'none'
       }
     }
-  }, shadow, styles['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React.createElement(Item, Object.assign({
+  }, shadow, views['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React.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',
@@ -3429,10 +3425,9 @@ var SelectView = _ref7 => {
       options = [],
       shadow = {},
       size = 'md',
-      colorScheme = 'theme.primary',
       shape = 'default',
       variant = 'default',
-      styles = {
+      views = {
         text: {},
         icon: {},
         dropDown: {},
@@ -3476,31 +3471,30 @@ var SelectView = _ref7 => {
     role: "SelectBox",
     helperText: helperText,
     error: error,
-    styles: styles,
+    views: views,
     onClick: isDisabled || isReadOnly ? () => {} : handleClick
   }, /*#__PURE__*/React.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.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: colorScheme,
+    color: 'theme.primary',
     error: error
-  }, styles), label)), /*#__PURE__*/React.createElement(HiddenSelect, Object.assign({
+  }, views), label)), /*#__PURE__*/React.createElement(HiddenSelect, Object.assign({
     id: id,
     name: name,
     options: options,
@@ -3513,7 +3507,7 @@ var SelectView = _ref7 => {
   }, props)), /*#__PURE__*/React.createElement(SelectBox, {
     options: options,
     size: size,
-    styles: styles,
+    views: views,
     value: value,
     isDisabled: isDisabled,
     placeholder: placeholder,
@@ -3521,16 +3515,16 @@ var SelectView = _ref7 => {
   })), /*#__PURE__*/React.createElement(FieldIcons, null, !isReadOnly && !isDisabled && (/*#__PURE__*/React.createElement(React.Fragment, null, hide ? (/*#__PURE__*/React.createElement(ChevronIcon, {
     color: "inherit",
     size: IconSizes$2[size],
-    style: styles.icon,
+    style: views.icon,
     orientation: "down"
   })) : (/*#__PURE__*/React.createElement(ChevronIcon, {
     color: "inherit",
     orientation: "up",
     size: IconSizes$2[size],
-    style: styles.icon
+    style: views.icon
   })))))), !hide && (/*#__PURE__*/React.createElement(DropDown, {
     size: size,
-    styles: styles,
+    views: views,
     options: options,
     callback: handleCallback,
     highlightedIndex: highlightedIndex,
@@ -3694,7 +3688,7 @@ var SliderPadding = {
   }
 };
 
-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.createElement(Input, Object.assign({
   type: "checkbox"
 }, props));
@@ -3708,7 +3702,6 @@ var SwitchView = _ref => {
       labelPosition = 'right',
       shadow = {},
       size = 'sm',
-      colorScheme = 'theme.primary',
       value = false,
       isHovered = false,
       isDisabled = false,
@@ -3718,7 +3711,7 @@ var SwitchView = _ref => {
       onChange,
       setValue = () => {},
       setIsHovered = () => {},
-      styles = {
+      views = {
         slider: {},
         circle: {},
         label: {}
@@ -3740,7 +3733,7 @@ var SwitchView = _ref => {
       height: 'fit-content',
       width: 'fit-content',
       cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
-    }, styles.label)
+    }, views.label)
   };
   return /*#__PURE__*/React.createElement(Label, Object.assign({
     htmlFor: id,
@@ -3764,12 +3757,12 @@ var SwitchView = _ref => {
     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.createElement(View, null, activeChild), /*#__PURE__*/React.createElement(View, Object.assign({
+  }, shadow, SliderPadding[size], SliderSizes[size], views['slider']), activeChild && value && /*#__PURE__*/React.createElement(View, null, activeChild), /*#__PURE__*/React.createElement(View, Object.assign({
     borderRadius: "50%",
     backgroundColor: "white"
-  }, KnobSizes[size], styles['circle'])), inActiveChild && !value && /*#__PURE__*/React.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && /*#__PURE__*/React.createElement(View, null, label));
+  }, KnobSizes[size], views['circle'])), inActiveChild && !value && /*#__PURE__*/React.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && /*#__PURE__*/React.createElement(View, null, label));
 };
 
 // Defines the SwitchComponent as a functional component that takes SwitchProps as props.
@@ -3814,7 +3807,7 @@ var useTextAreaState = _ref => {
   // 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,
@@ -3828,7 +3821,6 @@ var TextAreaView = _ref => {
       size = 'sm',
       shape = 'default',
       variant = 'default',
-      colorScheme = 'theme.primary',
       isHovered = false,
       isFocused = false,
       isEditable = false,
@@ -3846,7 +3838,7 @@ var TextAreaView = _ref => {
       setValue = () => {},
       setIsFocused = () => {},
       setIsHovered = () => {},
-      styles = {
+      views = {
         box: {},
         text: {},
         label: {},
@@ -3872,7 +3864,7 @@ var TextAreaView = _ref => {
     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);
@@ -3896,30 +3888,29 @@ var TextAreaView = _ref => {
   return /*#__PURE__*/React.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
-    styles: styles
+    views: views
   }, /*#__PURE__*/React.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.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: colorScheme,
+    color: 'theme.primary',
     error: error
-  }, styles), label)), /*#__PURE__*/React.createElement(Element, Object.assign({
+  }, views), label)), /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "textarea",
     id: id,
     name: name,
@@ -3984,7 +3975,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "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.createElement(Input, Object.assign({
   type: "text"
 }, props));
@@ -4001,7 +3992,7 @@ var TextFieldView = _ref => {
       helperText,
       onChangeText,
       shadow = {},
-      styles = {
+      views = {
         box: {},
         field: {},
         label: {},
@@ -4011,7 +4002,6 @@ var TextFieldView = _ref => {
       size = 'md',
       shape = 'default',
       variant = 'default',
-      colorScheme = 'theme.primary',
       error = false,
       isFocused = false,
       isHovered = false,
@@ -4052,7 +4042,7 @@ var TextFieldView = _ref => {
     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();
@@ -4089,30 +4079,29 @@ var TextFieldView = _ref => {
   return /*#__PURE__*/React.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
-    styles: styles
+    views: views
   }, /*#__PURE__*/React.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.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: colorScheme,
+    color: 'theme.primary',
     error: error
-  }, styles), label)), /*#__PURE__*/React.createElement(TextFieldInput, Object.assign({
+  }, views), label)), /*#__PURE__*/React.createElement(TextFieldInput, Object.assign({
     id: id,
     name: name,
     readOnly: isReadOnly,
@@ -4210,7 +4199,7 @@ var IconSizes$3 = {
   '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,
@@ -4222,7 +4211,6 @@ var CheckboxView = _ref => {
       shadow = {},
       labelPosition = 'right',
       size = 'md',
-      colorScheme = 'theme.primary',
       error = false,
       isSelected = false,
       isHovered = false,
@@ -4232,7 +4220,7 @@ var CheckboxView = _ref => {
       defaultIsSelected = false,
       setIsSelected = () => {},
       setIsHovered = () => {},
-      styles = {
+      views = {
         checkbox: {},
         label: {}
       },
@@ -4256,11 +4244,11 @@ var CheckboxView = _ref => {
       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',
@@ -4269,7 +4257,7 @@ var CheckboxView = _ref => {
       borderRadius: 3
     }, isHovered ? {
       filter: 'brightness(0.9)'
-    } : {}, Sizes[size], shadow, styles['checkbox'])
+    } : {}, Sizes[size], shadow, views['checkbox'])
   };
   return /*#__PURE__*/React.createElement(Label, Object.assign({
     htmlFor: id,
@@ -4285,7 +4273,7 @@ var CheckboxView = _ref => {
     alignItems: "center"
   }, labelPosition === 'left' && label && (/*#__PURE__*/React.createElement(Text, Object.assign({
     size: size
-  }, styles == null ? void 0 : styles.label), label)), /*#__PURE__*/React.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? (/*#__PURE__*/React.createElement(MinusIcon, {
+  }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? (/*#__PURE__*/React.createElement(MinusIcon, {
     size: IconSizes$3[size],
     color: "white"
   })) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React.createElement(TickIcon, {
@@ -4293,11 +4281,11 @@ var CheckboxView = _ref => {
     color: "white"
   }))), labelPosition === 'right' && label && (/*#__PURE__*/React.createElement(Text, Object.assign({
     size: size
-  }, styles == null ? void 0 : styles.label), label))), infoText && (/*#__PURE__*/React.createElement(Text, Object.assign({
+  }, views == null ? void 0 : views.label), label))), infoText && (/*#__PURE__*/React.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.createElement(Text, {
+  }, views == null ? void 0 : views.infoText), infoText))), error && (/*#__PURE__*/React.createElement(Text, {
     size: "xs",
     marginVertical: 0,
     marginHorizontal: 0,
@@ -5804,7 +5792,7 @@ var IconSizes$4 = {
 
 var _excluded$n = ["size"],
   _excluded2$4 = ["size"],
-  _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles", "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.createElement(Element, Object.assign({
@@ -5825,7 +5813,7 @@ var DropDownItem = _ref3 => {
     option,
     size = 'md',
     callback = () => {},
-    styles = {
+    views = {
       text: {}
     }
   } = _ref3;
@@ -5847,12 +5835,12 @@ var DropDownItem = _ref3 => {
     onClick: handleOptionClick,
     fontSize: Typography.fontSizes[size],
     backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
-  }, styles['text']), option);
+  }, views['text']), option);
 };
 var DropDown$1 = _ref4 => {
   var {
     size,
-    styles = {
+    views = {
       dropDown: {}
     },
     options,
@@ -5874,12 +5862,12 @@ var DropDown$1 = _ref4 => {
     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.createElement(DropDownItem, Object.assign({
+  }, views['dropDown']), options.map(option => (/*#__PURE__*/React.createElement(DropDownItem, Object.assign({
     key: option.code,
     size: size,
     option: option.name,
     callback: handleCallback
-  }, styles['text'])))));
+  }, views['text'])))));
 };
 var CountryPickerView = _ref5 => {
   var {
@@ -5901,7 +5889,6 @@ var CountryPickerView = _ref5 => {
       size = 'md',
       variant = 'default',
       shape = 'default',
-      colorScheme = 'theme.primary',
       onChange,
       onBlur = () => {},
       setHide = () => {},
@@ -5909,7 +5896,7 @@ var CountryPickerView = _ref5 => {
       setIsHovered = () => {},
       setIsFocused = () => {},
       setValue = () => {},
-      styles = {
+      views = {
         text: {},
         icon: {},
         label: {},
@@ -5964,36 +5951,35 @@ var CountryPickerView = _ref5 => {
     fontSize: 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.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
-    styles: styles,
+    views: views,
     onClick: handleClick
   }, /*#__PURE__*/React.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.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: colorScheme,
+    color: 'theme.primary',
     error: error
-  }, styles), label)), /*#__PURE__*/React.createElement(CountrySelector, Object.assign({
+  }, views), label)), /*#__PURE__*/React.createElement(CountrySelector, Object.assign({
     id: id,
     name: name,
     placeholder: placeholder,
@@ -6009,15 +5995,15 @@ var CountryPickerView = _ref5 => {
     orientation: "down",
     size: IconSizes$4[size],
     color: IconColor,
-    style: styles['icon']
+    style: views['icon']
   })) : (/*#__PURE__*/React.createElement(ChevronIcon, {
     orientation: "up",
     size: IconSizes$4[size],
     color: IconColor,
-    style: styles['icon']
+    style: views['icon']
   })))), !hide && (/*#__PURE__*/React.createElement(DropDown$1, {
     size: size,
-    styles: styles,
+    views: views,
     options: newOptions,
     callback: handleCallback
   })));
@@ -6047,7 +6033,7 @@ var useDatePickerState = () => {
   };
 };
 
-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.createElement(Input, Object.assign({
   type: "date"
 }, props));
@@ -6062,8 +6048,7 @@ var DatePickerView = _ref => {
       size = 'md',
       variant = 'default',
       shape = 'default',
-      colorScheme = 'theme.primary',
-      styles = {
+      views = {
         box: {},
         label: {},
         helperText: {},
@@ -6111,34 +6096,33 @@ var DatePickerView = _ref => {
     backgroundColor: 'transparent',
     color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
-  }, styles['field']);
+  }, views['field']);
   return /*#__PURE__*/React.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
-    styles: styles
+    views: views
   }, /*#__PURE__*/React.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.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: colorScheme,
+    color: 'theme.primary',
     error: error
-  }, styles), label)), /*#__PURE__*/React.createElement(DatePickerContent, Object.assign({
+  }, views), label)), /*#__PURE__*/React.createElement(DatePickerContent, Object.assign({
     id: id,
     name: name,
     onFocus: handleFocus,
@@ -6174,10 +6158,10 @@ var _excluded$p = ["visibleIcon", "hiddenIcon"],
 var PasswordComponent = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React.createElement(OpenEyeIcon, {
-        size: 14
+        widthHeight: 14
       }),
       hiddenIcon = /*#__PURE__*/React.createElement(CloseEyeIcon, {
-        size: 14
+        widthHeight: 14
       })
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
@@ -6234,7 +6218,7 @@ var useComboBoxState = (items, placeholder, searchPlaceholder) => {
   };
 };
 
-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 {
@@ -6254,7 +6238,7 @@ var ComboBoxView = _ref => {
       searchQuery,
       setSearchQuery,
       setFilteredItems,
-      styles,
+      views,
       isDropdownVisible,
       setIsDropdownVisible
       // Collects all further props not destructured explicitly.
@@ -6297,7 +6281,7 @@ var ComboBoxView = _ref => {
     alignItems: "center",
     width: "100%"
   }, props), label && (/*#__PURE__*/React.createElement(Text, {
-    styles: styles == null ? void 0 : styles.label,
+    views: views == null ? void 0 : views.label,
     htmlFor: props.id
   }, label)), /*#__PURE__*/React.createElement(View, {
     position: "relative"
@@ -6312,16 +6296,16 @@ var ComboBoxView = _ref => {
     justifyContent: "space-between",
     minWidth: 300,
     flexWrap: "nowrap"
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+  }, views == null ? void 0 : views.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({
     gap: 15,
     alignItems: "center",
     position: "relative",
     width: "100%",
     onClick: () => setIsDropdownVisible(!isDropdownVisible)
-  }, styles == null ? void 0 : styles.labelContainer), left, /*#__PURE__*/React.createElement(Text, Object.assign({
+  }, views == null ? void 0 : views.labelContainer), left, /*#__PURE__*/React.createElement(Text, Object.assign({
     weight: "medium",
     flexGrow: 1
-  }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React.createElement(View, Object.assign({
+  }, views == null ? void 0 : views.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React.createElement(View, Object.assign({
     id: "combobox-dropdown",
     position: "absolute",
     backgroundColor: "white",
@@ -6334,7 +6318,7 @@ var ComboBoxView = _ref => {
     transform: "translateY(100%)",
     marginTop: "4px",
     borderRadius: "4px"
-  }, styles == null ? void 0 : styles.dropdown), searchEnabled && (/*#__PURE__*/React.createElement(TextFieldView, {
+  }, views == null ? void 0 : views.dropdown), searchEnabled && (/*#__PURE__*/React.createElement(TextFieldView, {
     id: props.id,
     name: props.name,
     width: "100%",
@@ -6344,14 +6328,14 @@ var ComboBoxView = _ref => {
     hint: placeholder,
     isClearable: false,
     left: /*#__PURE__*/React.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.createElement(View, {
     margin: 0,
@@ -6365,8 +6349,8 @@ var ComboBoxView = _ref => {
     backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
     onMouseEnter: () => setHighlightedIndex(index),
     onClick: () => handleSelect(item)
-  }, styles == null ? void 0 : styles.item), /*#__PURE__*/React.createElement(Text, null, item.label), /*#__PURE__*/React.createElement(React.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React.createElement(TickIcon, {
-    size: 20
+  }, views == null ? void 0 : views.item), /*#__PURE__*/React.createElement(Text, null, item.label), /*#__PURE__*/React.createElement(React.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React.createElement(TickIcon, {
+    widthHeight: 20
   }))))))))))));
 };
 
@@ -6630,10 +6614,10 @@ var _excluded$w = ["visibleIcon", "hiddenIcon"],
 var PasswordComponent$1 = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React.createElement(OpenEyeIcon, {
-        size: 14
+        widthHeight: 14
       }),
       hiddenIcon = /*#__PURE__*/React.createElement(CloseEyeIcon, {
-        size: 14
+        widthHeight: 14
       })
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
@@ -6692,12 +6676,12 @@ var useMessageStore = /*#__PURE__*/create(set => ({
   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 = '';
     }
@@ -6710,7 +6694,7 @@ var useMessageStore = /*#__PURE__*/create(set => ({
       title,
       subtitle,
       isClosable,
-      styles,
+      views,
       action,
       actionText,
       showIcon,
@@ -6722,7 +6706,7 @@ var useMessageStore = /*#__PURE__*/create(set => ({
   })
 }));
 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();
@@ -6800,7 +6784,7 @@ var Themes$1 = {
 };
 
 var MessageView = _ref => {
-  var _styles$closingIcon, _styles$closingIcon2;
+  var _views$closingIcon, _views$closingIcon2;
   var {
     variant,
     hide,
@@ -6812,7 +6796,7 @@ var MessageView = _ref => {
     showIcon = false,
     isClosable = false,
     timeout = 3000,
-    styles
+    views
   } = _ref;
   useEffect(() => {
     if (timeout && !isClosable) {
@@ -6842,21 +6826,21 @@ var MessageView = _ref => {
   }[variant];
   var iconComponent = {
     info: /*#__PURE__*/React.createElement(InfoIcon, Object.assign({
-      size: 24,
+      widthHeight: 24,
       color: iconColor
-    }, styles == null ? void 0 : styles.icon)),
-    success: /*#__PURE__*/React.createElement(SuccessIcon, Object.assign({
-      size: 24,
+    }, views == null ? void 0 : views.icon)),
+    success: (/*#__PURE__*/React.createElement(SuccessIcon, Object.assign({
+      widthHeight: 24,
       color: iconColor
-    }, styles == null ? void 0 : styles.icon)),
-    warning: /*#__PURE__*/React.createElement(WarningIcon, Object.assign({
-      size: 24,
+    }, views == null ? void 0 : views.icon))),
+    warning: (/*#__PURE__*/React.createElement(WarningIcon, Object.assign({
+      widthHeight: 24,
       color: iconColor
-    }, styles == null ? void 0 : styles.icon)),
+    }, views == null ? void 0 : views.icon))),
     error: /*#__PURE__*/React.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.createElement(Horizontal, Object.assign({
@@ -6873,20 +6857,20 @@ var MessageView = _ref => {
     onClick: isClosable ? () => {} : () => {
       hide();
     }
-  }, containerStyle, styles == null ? void 0 : styles.container), isShowIcon && iconComponent, /*#__PURE__*/React.createElement(Vertical, {
+  }, containerStyle, views == null ? void 0 : views.container), isShowIcon && iconComponent, /*#__PURE__*/React.createElement(Vertical, {
     gap: 8,
     width: "100%"
   }, /*#__PURE__*/React.createElement(Text, Object.assign({
     size: "md",
     weight: "semiBold"
-  }, styles == null ? void 0 : styles.title), title), subtitle && (/*#__PURE__*/React.createElement(Text, Object.assign({
+  }, views == null ? void 0 : views.title), title), subtitle && (/*#__PURE__*/React.createElement(Text, Object.assign({
     size: "sm"
-  }, styles == null ? void 0 : styles.subtitle), subtitle))), isWithAction && (/*#__PURE__*/React.createElement(Text, Object.assign({
+  }, views == null ? void 0 : views.subtitle), subtitle))), isWithAction && (/*#__PURE__*/React.createElement(Text, Object.assign({
     marginRight: 10,
     onClick: action,
     padding: "6px 10px",
     whiteSpace: "nowrap"
-  }, containerStyle, styles == null ? void 0 : styles.actionText), actionText)), isClosable && (/*#__PURE__*/React.createElement(View, Object.assign({
+  }, containerStyle, views == null ? void 0 : views.actionText), actionText)), isClosable && (/*#__PURE__*/React.createElement(View, Object.assign({
     position: "absolute",
     zIndex: 10000,
     right: 8,
@@ -6894,10 +6878,10 @@ var MessageView = _ref => {
     onClick: () => {
       hide();
     }
-  }, styles == null || (_styles$closingIcon = styles.closingIcon) == null ? void 0 : _styles$closingIcon.container), /*#__PURE__*/React.createElement(CloseIcon, Object.assign({
-    size: 18,
+  }, views == null || (_views$closingIcon = views.closingIcon) == null ? void 0 : _views$closingIcon.container), /*#__PURE__*/React.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 => {
@@ -6912,7 +6896,7 @@ var MessageLayout = _ref => {
     variant,
     subtitle,
     isClosable,
-    styles,
+    views,
     action,
     actionText,
     showIcon,
@@ -6944,7 +6928,7 @@ var MessageLayout = _ref => {
     title: title,
     theme: theme,
     isClosable: isClosable,
-    styles: styles,
+    views: views,
     action: action,
     actionText: actionText,
     showIcon: showIcon,
@@ -7047,16 +7031,22 @@ var useUpload = _ref => {
     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,
@@ -7064,74 +7054,75 @@ var Uploader = _ref2 => {
     imageProps,
     iconProps,
     textProps,
-    renderError = _ref3 => {
+    fileType,
+    previewUrl: externalPreviewUrl,
+    renderError = _ref2 => {
       var {
         errorMessage,
         errorMessageProps
-      } = _ref3;
+      } = _ref2;
       return /*#__PURE__*/React.createElement(Text$1, Object.assign({
         color: "red",
         fontSize: 12,
         marginTop: 8
       }, errorMessageProps), errorMessage);
     },
-    renderText = _ref4 => {
+    renderText = _ref3 => {
       var {
         text,
         textProps
-      } = _ref4;
+      } = _ref3;
       return /*#__PURE__*/React.createElement(Text$1, Object.assign({
         marginTop: 8
       }, textProps), text);
     },
-    renderFile = _ref5 => {
+    renderFile = _ref4 => {
       var {
         selectedFile,
         textProps
-      } = _ref5;
-      return /*#__PURE__*/React.createElement(Center, {
+      } = _ref4;
+      return selectedFile ? (/*#__PURE__*/React.createElement(Center, {
         marginTop: 8,
         gap: 10,
         flexDirection: "column"
       }, /*#__PURE__*/React.createElement(Text$1, Object.assign({
         maxLines: 2
-      }, textProps), selectedFile.name), /*#__PURE__*/React.createElement(Text$1, Object.assign({}, textProps), "(", Math.round(selectedFile.size / 1024), " KB)"));
+      }, textProps), selectedFile.name), /*#__PURE__*/React.createElement(Text$1, 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.createElement(View$1, {
         width: "100%",
         height: "100%",
         position: "relative"
       }, /*#__PURE__*/React.createElement(View$1, 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.createElement(Image, Object.assign({
+      }, videoProps)), thumbnailUrl && (/*#__PURE__*/React.createElement(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.createElement(Image, Object.assign({
         src: previewUrl,
         alt: "Preview",
@@ -7140,11 +7131,11 @@ var Uploader = _ref2 => {
         objectFit: "cover"
       }, imageProps));
     },
-    renderProgress = _ref8 => {
+    renderProgress = _ref7 => {
       var {
         progress,
         progressProps
-      } = _ref8;
+      } = _ref7;
       return /*#__PURE__*/React.createElement(Horizontal$1, Object.assign({
         gap: 8,
         alignItems: "center"
@@ -7156,28 +7147,14 @@ var Uploader = _ref2 => {
       }, /*#__PURE__*/React.createElement(View$1, {
         height: 4,
         width: progress + "%",
-        borderRadius: 2
+        borderRadius: 2,
+        backgroundColor: "#000"
       })), /*#__PURE__*/React.createElement(Text$1, {
         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.createElement(Center, Object.assign({
     onClick: handleClick,
     cursor: "pointer",
@@ -7187,26 +7164,27 @@ var Uploader = _ref2 => {
     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.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.createElement(View$1, {
@@ -7221,6 +7199,54 @@ var Uploader = _ref2 => {
   }));
 };
 
+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.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__*/create(set => ({
   modals: [],
   onHide: name => name,
@@ -7322,7 +7348,7 @@ var HeaderIconSizes = {
   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"],
@@ -7336,7 +7362,7 @@ var ModalOverlay = _ref => {
       onClose = () => {},
       position = 'center'
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -7404,9 +7430,8 @@ var ModalHeader = _ref3 => {
   var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = /*#__PURE__*/React.createElement(Button, {
     onClick: onClose,
-    colorScheme: "transparent",
     icon: /*#__PURE__*/React.createElement(CloseIcon, {
-      size: HeaderIconSizes[iconSize],
+      widthHeight: HeaderIconSizes[iconSize],
       color: buttonColor
     }),
     padding: 0,
@@ -7506,13 +7531,13 @@ Modal.Layout = ModalLayout;
 var defaultStyles = {};
 // Create a context that includes both styles and the onClick function
 var TableContext = /*#__PURE__*/React.createContext({
-  styles: defaultStyles,
+  views: defaultStyles,
   onRowClick: () => {}
 });
 var TableProvider = _ref => {
   var {
     children,
-    styles = defaultStyles,
+    views = defaultStyles,
     onRowClick
   } = _ref;
   return (
@@ -7520,7 +7545,7 @@ var TableProvider = _ref => {
     // Pass both styles and onClick to the context
     React.createElement(TableContext.Provider, {
       value: {
-        styles,
+        views,
         onRowClick
       }
     }, children)
@@ -7531,82 +7556,82 @@ var useTableContext = () => React.useContext(TableContext);
 
 var TableContainer = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "table",
     borderCollapse: "collapse"
-  }, styles.table, props));
+  }, views.table, props));
 };
 var TableHead = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React.createElement(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.createElement(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.createElement(Element, Object.assign({
     as: "tr"
-  }, styles.tr, {
+  }, views.tr, {
     onClick: onRowClick
   }, props));
 };
 var TableCell = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React.createElement(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.createElement(Element, Object.assign({
     as: "tbody"
-  }, styles.tbody, props));
+  }, views.tbody, props));
 };
 var TableFooter = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "tfoot"
-  }, styles.tfoot, props));
+  }, views.tfoot, props));
 };
 var TableCaption = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "caption",
     margin: '10px 0',
     color: "color.gray.400"
-  }, styles.caption, props));
+  }, views.caption, props));
 };
 var TableView = _ref => {
   var {
@@ -7632,11 +7657,11 @@ var TableView = _ref => {
 var Table = _ref => {
   var {
     children,
-    styles,
+    views,
     onClick
   } = _ref;
   return /*#__PURE__*/React.createElement(TableProvider, {
-    styles: styles,
+    views: views,
     onRowClick: onClick
   }, children);
 };
@@ -7650,90 +7675,147 @@ Table.Caption = TableCaption;
 Table.Container = TableContainer;
 Table.Template = TableView;
 
-// Initializes a custom hook for managing tab states with an array of 'Tab' objects passed as properties.
-var useTabsState = propTabs => {
-  var [isActive, setIsActive] = useState(propTabs[0]);
-  var [tabsState, setTabsState] = useState(propTabs);
+/**
+ * Custom hook to manage the state of the active tab.
+ * @param propTabs - The array of tab objects provided as props.
+ * @param initialTabValue - The optional title of the tab to be initially active.
+ * @returns An object containing the current activeTab and a function to update it.
+ */
+var useTabsState = (propTabs, initialTabValue) => {
+  // Find the initial tab based on initialTabValue, or default to the first tab.
+  // Ensure propTabs is not empty before accessing index 0.
+  var findInitialTab = () => {
+    if (!propTabs || propTabs.length === 0) {
+      return undefined; // No tabs, no initial active tab
+    }
+    if (initialTabValue !== undefined) {
+      var foundTab = propTabs.find(tab => tab.title === initialTabValue);
+      if (foundTab) {
+        return foundTab;
+      }
+      // Warn if initialTabValue is provided but not found
+      console.warn("Tabs: initialTabValue \"" + initialTabValue + "\" not found in tabs. Defaulting to the first tab.");
+    }
+    return propTabs[0]; // Default to the first tab
+  };
+  var [activeTab, setActiveTab] = useState(findInitialTab);
+  // Effect to update the active tab if the initialTabValue prop changes
+  // or if the tabs array changes and the current active tab is no longer valid.
+  useEffect(() => {
+    var newInitialTab = findInitialTab();
+    // Update only if the calculated initial tab is different from the current active tab
+    // or if the current active tab is no longer in the list (and there are tabs)
+    var currentActiveTabStillValid = activeTab && propTabs.some(t => t.title === activeTab.title);
+    if (newInitialTab && (!currentActiveTabStillValid || initialTabValue !== undefined && (activeTab == null ? void 0 : activeTab.title) !== initialTabValue)) {
+      setActiveTab(newInitialTab);
+    } else if (!newInitialTab && activeTab) {
+      // Handle case where all tabs are removed
+      setActiveTab(undefined);
+    }
+  }, [propTabs, initialTabValue]); // Rerun when tabs or initial title changes
   return {
-    isActive,
-    setIsActive,
-    tabsState,
-    setTabsState
+    activeTab,
+    setActiveTab
   };
 };
 
-// Defines a functional component 'TabsView' with props of type 'TabsViewProps'.
-var TabsView = props => {
-  // Destructures 'tabs', 'styles', 'isActive', 'setIsActive', 'tabsState', and 'setTabsState' from the component props.
-  var {
-    tabs,
-    styles,
-    isActive,
-    setIsActive,
-    tabsState,
-    setTabsState,
+/**
+ * The presentation component for Tabs. Renders the UI based on props.
+ */
+var TabsView = _ref => {
+  var {
+    tabs = [],
+    // Default to empty array
+    activeTab,
+    handleTabClick,
+    views = {},
+    // Default to empty object
     renderTab,
     renderContent
-  } = props;
-  // Declares a function 'moveSelectedTabToTop' that takes an index and modifies the tabs order.
-  var moveSelectedTabToTop = idx => {
-    // Creates a copy of the 'tabs' array from props to be altered.
-    var newTabs = [...tabs];
-    // Removes the tab at the provided index, effectively selecting this tab.
-    var selectedTab = newTabs.splice(idx, 1);
-    // Places the selected tab at the start of the 'newTabs' array.
-    newTabs.unshift(selectedTab[0]);
-    // Updates the state with the reordered tabs.
-    setTabsState(newTabs);
-    // Sets the active tab to the first tab in the 'newTabs' array.
-    setIsActive(newTabs[0]);
-  };
-  // Defines a function 'isContentActive' that checks if the given tab's content is to be displayed.
-  var isContentActive = tab => {
-    // Returns a boolean indicating if the given tab is identical to the first tab in 'tabsState'.
-    return tab.value === tabsState[0].value;
-  };
-  return /*#__PURE__*/React.createElement(Vertical, Object.assign({
-    width: "100%",
-    height: '100%'
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({}, styles == null ? void 0 : styles.headerTabs), tabs.map((tab, idx) => renderTab ? renderTab(tab, isContentActive(tab), idx) : (/*#__PURE__*/React.createElement(Button, Object.assign({
-    key: tab.title,
-    onClick: () => {
-      moveSelectedTabToTop(idx);
-    },
-    variant: isActive.value === tab.value ? 'filled' : 'ghost',
-    shape: "pillShaped",
-    cursor: "pointer",
-    isAuto: true,
-    margin: 10
-  }, styles == null ? void 0 : styles.tab, isActive.value === tab.value ? styles == null ? void 0 : styles.activeTab : {}), /*#__PURE__*/React.createElement(Text, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title))))), /*#__PURE__*/React.createElement(View, Object.assign({
-    width: '100%',
-    height: "100%"
-  }, styles == null ? void 0 : styles.content), tabsState.map(renderContent ? renderContent : (tab, idx) => isContentActive(tab) && /*#__PURE__*/React.createElement(View, {
-    key: idx
-  }, tab.content))));
+  } = _ref;
+  // 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 {...views.container}><Text>No tabs available.</Text></View>;
+    return null; // Or simply render nothing
+  }
+  return (
+    /*#__PURE__*/
+    // Use Vertical layout for overall structure (tabs header above content)
+    React.createElement(Vertical, Object.assign({
+      width: "100%",
+      height: '100%'
+    }, views.container), /*#__PURE__*/React.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
+      var onClick = () => handleTabClick(tab);
+      // Use the custom renderTab function if provided
+      if (renderTab) {
+        return renderTab(tab, isActive, onClick);
+      }
+      // Default rendering for a tab button
+      return /*#__PURE__*/React.createElement(Button, Object.assign({
+        key: tab.title,
+        onClick: onClick,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      }, 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.createElement(Text
+      // Apply base title styles and merge activeText styles if this tab is active
+      , Object.assign({}, views.title, isActive ? views.activeText : {}), tab.title));
+    })), /*#__PURE__*/React.createElement(View, Object.assign({
+      width: '100%',
+      height: "100%"
+    }, views.content), renderContent ? renderContent(activeTab) :
+    // Otherwise, render the content property from the active tab object
+    activeTab.content))
+  );
 };
 
+/**
+ * Tabs component allows users to navigate between different sections of content.
+ * It manages the active tab state and renders the corresponding content.
+ */
 var TabsComponent = _ref => {
   var {
     tabs,
-    styles
+    views,
+    initialTabValue,
+    onTabChange,
+    renderTab,
+    renderContent
   } = _ref;
-  var {
-    isActive,
-    setIsActive,
-    tabsState,
-    setTabsState
-  } = useTabsState(tabs);
+  // Use the custom hook to manage the active tab state
+  var {
+    activeTab,
+    setActiveTab
+  } = useTabsState(tabs, initialTabValue);
+  // Handler function to change the active tab and trigger the callback
+  var handleTabClick = tab => {
+    // Only update state and call callback if the clicked tab is different from the current one
+    if ((activeTab == null ? void 0 : activeTab.title) !== tab.title) {
+      setActiveTab(tab);
+      // Call the onTabChange callback if provided
+      if (onTabChange) {
+        onTabChange(tab);
+      }
+    }
+  };
+  // Render the presentation component with the necessary props
   return /*#__PURE__*/React.createElement(TabsView, {
     tabs: tabs,
-    styles: styles,
-    isActive: isActive,
-    tabsState: tabsState,
-    setTabsState: setTabsState,
-    setIsActive: setIsActive
+    views: views,
+    activeTab: activeTab,
+    handleTabClick: handleTabClick,
+    renderTab: renderTab,
+    renderContent: renderContent
   });
 };
+// Export the component wrapped in React.memo for performance optimization
 var Tabs = /*#__PURE__*/React.memo(TabsComponent);
 
 // Declares the useToggleState function which takes defaultToggled parameter to initialize the toggle state.
@@ -7751,18 +7833,11 @@ var useToggleState = defaultToggled => {
   };
 };
 
-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,
@@ -7771,14 +7846,14 @@ var ToggleView = _ref => {
       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,
@@ -7808,25 +7883,24 @@ var ToggleView = _ref => {
     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,
@@ -7841,7 +7915,6 @@ var ToggleComponent = _ref => {
   // Beginning of the JSX block to render the Toggle view component.
   return /*#__PURE__*/React.createElement(ToggleView, Object.assign({
     shape: shape,
-    colorScheme: colorScheme,
     variant: variant,
     isDisabled: isDisabled,
     isHovered: isHovered,
@@ -7876,9 +7949,7 @@ var ToggleGroupView = _ref => {
     // 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 = useCallback((id, isActive) => {
@@ -7900,7 +7971,6 @@ var ToggleGroupView = _ref => {
   }, items.map(item => (/*#__PURE__*/React.createElement(Toggle, {
     role: "toggle-" + item.id,
     key: item.id,
-    colorScheme: colorScheme,
     shape: shape,
     variant: variant,
     isToggled: activeToggles.includes(item.id) || item.isActive,
@@ -7916,8 +7986,6 @@ var ToggleGroupComponent = _ref => {
     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
@@ -7931,7 +7999,6 @@ var ToggleGroupComponent = _ref => {
   return /*#__PURE__*/React.createElement(ToggleGroupView, {
     items: items,
     shape: shape,
-    colorScheme: colorScheme,
     variant: variant,
     activeToggles: activeToggles,
     setActiveToggles: setActiveToggles,
@@ -8070,5 +8137,5 @@ var DragAndDropComponent = props => {
 };
 var DragAndDrop = DragAndDropComponent;
 
-export { Alert, ArrowIcon, AspectRatio, Avatar, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Bottom, Button, CalendarIcon, CameraIcon, Center, CenterBase, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ComboBox, CopyIcon, CountryPicker, DatePicker, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DustBinIcon, EditIcon, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikPassword, FormikSelect, FormikSwitch, FormikTextArea, FormikTextField, HeartIcon, HomeIcon, Horizontal, HorizontalBase, Icon, ImageIcon, InfoIcon, Inline, InstagramIcon, Left, LikeIcon, Link, LinkedinIcon, Loader, LocationIcon, LockIcon, MenuIcon, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NotificationIcon, OpenEyeIcon, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PrintIcon, ProfileIcon, RefreshIcon, Right, SaveIcon, SearchIcon, Select, SettingsIcon, ShareIcon, SpinnerIcon, StarIcon, SuccessIcon, Switch, Table, Tabs, Text, TextArea, TextField, ThreadsIcon, TickIcon, Toggle, ToggleGroup, Top, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, Vertical, VerticalBase, VideoIcon, View, WarningIcon, WifiIcon, XIcon, YoutubeIcon, generateThumbnail, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore, useUpload };
+export { Alert, ArrowIcon, AspectRatio, Avatar, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Bottom, Button, CalendarIcon, CameraIcon, Center, CenterBase, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ComboBox, CopyIcon, CountryPicker, DatePicker, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DustBinIcon, EditIcon, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikPassword, FormikSelect, FormikSwitch, FormikTextArea, FormikTextField, HeartIcon, HomeIcon, Horizontal, HorizontalBase, Icon, ImageIcon, InfoIcon, Inline, InstagramIcon, Left, LikeIcon, Link, LinkedinIcon, Loader, LocationIcon, LockIcon, MenuIcon, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NotificationIcon, OpenEyeIcon, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PrintIcon, ProfileIcon, RefreshIcon, Right, SaveIcon, SearchIcon, Select, SettingsIcon, ShareIcon, SpinnerIcon, StarIcon, SuccessIcon, Switch, Table, Tabs, Text, TextArea, TextField, ThreadsIcon, TickIcon, Toggle, ToggleGroup, Top, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, Vertical, VerticalBase, VideoIcon, View, WarningIcon, WifiIcon, XIcon, YoutubeIcon, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore };
 //# sourceMappingURL=web.esm.js.map