@app-studio/web 0.8.65 → 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);
 };
@@ -7703,7 +7728,7 @@ var TabsView = _ref => {
     // Default to empty array
     activeTab,
     handleTabClick,
-    styles = {},
+    views = {},
     // Default to empty object
     renderTab,
     renderContent
@@ -7711,7 +7736,7 @@ var TabsView = _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 {...styles.container}><Text>No tabs available.</Text></View>;
+    // return <View {...views.container}><Text>No tabs available.</Text></View>;
     return null; // Or simply render nothing
   }
   return (
@@ -7720,7 +7745,7 @@ var TabsView = _ref => {
     React.createElement(Vertical, Object.assign({
       width: "100%",
       height: '100%'
-    }, styles.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({}, styles.headerTabs), tabs.map(tab => {
+    }, 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
@@ -7735,17 +7760,17 @@ var TabsView = _ref => {
         onClick: onClick,
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0
-      }, styles.tab, isActive ? styles.activeTab : {}, {
+      }, views.tab, isActive ? views.activeTab : {}, {
         // Example: Set variant based on active state (can be overridden by styles)
         variant: isActive ? 'filled' : 'ghost',
         cursor: "pointer" // Ensure pointer cursor
       }), tab.icon, /*#__PURE__*/React.createElement(Text
       // Apply base title styles and merge activeText styles if this tab is active
-      , Object.assign({}, styles.title, isActive ? styles.activeText : {}), tab.title));
+      , Object.assign({}, views.title, isActive ? views.activeText : {}), tab.title));
     })), /*#__PURE__*/React.createElement(View, Object.assign({
       width: '100%',
       height: "100%"
-    }, styles.content), renderContent ? renderContent(activeTab) :
+    }, views.content), renderContent ? renderContent(activeTab) :
     // Otherwise, render the content property from the active tab object
     activeTab.content))
   );
@@ -7758,7 +7783,7 @@ var TabsView = _ref => {
 var TabsComponent = _ref => {
   var {
     tabs,
-    styles,
+    views,
     initialTabValue,
     onTabChange,
     renderTab,
@@ -7783,7 +7808,7 @@ var TabsComponent = _ref => {
   // Render the presentation component with the necessary props
   return /*#__PURE__*/React.createElement(TabsView, {
     tabs: tabs,
-    styles: styles,
+    views: views,
     activeTab: activeTab,
     handleTabClick: handleTabClick,
     renderTab: renderTab,
@@ -7808,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,
@@ -7828,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,
@@ -7865,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,
@@ -7898,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,
@@ -7933,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) => {
@@ -7957,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,
@@ -7973,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
@@ -7988,7 +7999,6 @@ var ToggleGroupComponent = _ref => {
   return /*#__PURE__*/React.createElement(ToggleGroupView, {
     items: items,
     shape: shape,
-    colorScheme: colorScheme,
     variant: variant,
     activeToggles: activeToggles,
     setActiveToggles: setActiveToggles,
@@ -8127,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