@app-studio/web 0.8.65 → 0.8.67

package/dist/web.cjs.development.js

@@ -22,6 +22,7 @@ require('core-js/modules/web.url.js');
 require('core-js/modules/web.url.to-json.js');
 require('core-js/modules/web.url-search-params.js');
 var zustand = require('zustand');
+var Layout = require('src/components/Layout');
 
 var Top = props => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
   marginBottom: "auto"
@@ -84,19 +85,25 @@ var HeadingSizes = {
   }
 };
 
-var _excluded = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "weight", "size"];
+var _excluded = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "weight", "size", "views"];
 var TextContent = _ref => {
   var {
     children,
     isSub,
-    isSup
+    isSup,
+    views
   } = _ref;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, isSub && /*#__PURE__*/React__default.createElement("sup", null, children), isSup && /*#__PURE__*/React__default.createElement("sup", null, children), !isSub && !isSup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children))) : children);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, isSub && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    as: "sup"
+  }, views == null ? void 0 : views.sup), children)), isSup && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    as: "sup"
+  }, views == null ? void 0 : views.sup), children)), !isSub && !isSup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children))) : children);
 };
 var TruncateText = _ref2 => {
   var {
     text,
-    maxLines = 1
+    maxLines = 1,
+    views
   } = _ref2;
   var containerRef = React.useRef(null);
   var [truncatedLength, setTruncatedLength] = React.useState(text.length);
@@ -125,9 +132,9 @@ var TruncateText = _ref2 => {
     updateTruncatedText();
   }, [text, maxLines]);
   var displayText = text.length > truncatedLength ? text.substring(0, truncatedLength) + '...' : text;
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     ref: containerRef
-  }, displayText);
+  }, views == null ? void 0 : views.truncateText), displayText);
 };
 var TextView = _ref3 => {
   var {
@@ -140,7 +147,8 @@ var TextView = _ref3 => {
       isSup = false,
       isStriked = false,
       weight = 'normal',
-      size = 'md'
+      size = 'md',
+      views
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded);
   var headingStyles = heading ? HeadingSizes[heading] : {};
@@ -154,13 +162,13 @@ var TextView = _ref3 => {
     fontStyle: isItalic ? 'italic' : 'normal',
     fontWeight: appStudio.Typography.fontWeights[weight],
     textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
-  }, noLineBreak, headingStyles, props), maxLines && typeof children === 'string' ? (/*#__PURE__*/React__default.createElement(TruncateText, {
+  }, noLineBreak, headingStyles, props, views == null ? void 0 : views.container), maxLines && typeof children === 'string' ? (/*#__PURE__*/React__default.createElement(TruncateText, {
     text: children,
     maxLines: maxLines
-  })) : (/*#__PURE__*/React__default.createElement(TextContent, Object.assign({
+  })) : (/*#__PURE__*/React__default.createElement(TextContent, {
     isSub: isSub,
     isSup: isSup
-  }, props), children)));
+  }, children)));
 };
 
 var TextComponent = props => {
@@ -225,74 +233,74 @@ var CenterBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 CenterBase.displayName = 'Center';
 var Center = CenterBase;
 
-var _excluded$4 = ["size", "color", "transform", "orientation", "children"],
-  _excluded2 = ["size", "color", "filled", "strokeWidth"],
-  _excluded3 = ["size", "color", "filled", "strokeWidth"],
-  _excluded4 = ["size", "color", "filled", "strokeWidth"],
-  _excluded5 = ["size", "color", "filled", "strokeWidth"],
-  _excluded6 = ["size", "color", "filled", "strokeWidth"],
-  _excluded7 = ["size", "color", "filled", "strokeWidth"],
-  _excluded8 = ["size", "color", "filled", "strokeWidth"],
-  _excluded9 = ["size", "color", "filled", "strokeWidth"],
-  _excluded10 = ["size", "color", "filled", "strokeWidth"],
-  _excluded11 = ["size", "color", "filled", "strokeWidth"],
-  _excluded12 = ["size", "color", "filled", "strokeWidth"],
-  _excluded13 = ["size", "color", "filled", "strokeWidth"],
-  _excluded14 = ["size", "color", "filled", "strokeWidth"],
-  _excluded15 = ["size", "color", "filled", "strokeWidth"],
-  _excluded16 = ["size", "color", "filled", "strokeWidth"],
-  _excluded17 = ["size", "color", "filled", "strokeWidth"],
-  _excluded18 = ["size", "color", "filled", "strokeWidth"],
-  _excluded19 = ["size", "color", "filled", "strokeWidth"],
-  _excluded20 = ["size", "color", "filled", "strokeWidth"],
-  _excluded21 = ["size", "color", "filled", "strokeWidth"],
-  _excluded22 = ["size", "color", "filled", "strokeWidth"],
-  _excluded23 = ["size", "color", "filled", "strokeWidth"],
-  _excluded24 = ["size", "color", "filled", "strokeWidth"],
-  _excluded25 = ["size", "color", "filled", "strokeWidth"],
-  _excluded26 = ["size", "color", "filled", "strokeWidth"],
-  _excluded27 = ["size", "color", "filled", "strokeWidth"],
-  _excluded28 = ["size", "color", "filled", "strokeWidth"],
-  _excluded29 = ["size", "color", "filled", "strokeWidth"],
-  _excluded30 = ["size", "color", "strokeWidth", "filled"],
-  _excluded31 = ["size", "color", "filled", "strokeWidth"],
-  _excluded32 = ["size", "color", "strokeWidth", "filled"],
-  _excluded33 = ["size", "color", "filled", "strokeWidth"],
-  _excluded34 = ["size", "color", "strokeWidth", "filled"],
-  _excluded35 = ["size", "color", "filled", "strokeWidth"],
-  _excluded36 = ["size", "color", "strokeWidth", "filled"],
-  _excluded37 = ["size", "color", "filled", "strokeWidth"],
-  _excluded38 = ["size", "color", "filled", "strokeWidth"],
-  _excluded39 = ["size", "color", "filled", "strokeWidth"],
-  _excluded40 = ["size", "color", "filled", "strokeWidth"],
-  _excluded41 = ["size", "color", "filled", "strokeWidth"],
-  _excluded42 = ["size", "color", "filled", "strokeWidth"],
-  _excluded43 = ["size", "color", "filled", "strokeWidth"],
-  _excluded44 = ["size", "color", "filled", "strokeWidth"],
-  _excluded45 = ["size", "color", "filled", "strokeWidth"],
-  _excluded46 = ["size", "color", "filled", "strokeWidth"],
-  _excluded47 = ["size", "color", "filled", "strokeWidth"],
-  _excluded48 = ["size", "color", "filled", "strokeWidth"],
-  _excluded49 = ["size", "color", "strokeWidth", "filled"],
-  _excluded50 = ["size", "color", "strokeWidth", "filled"],
-  _excluded51 = ["size", "color", "filled", "strokeWidth"],
-  _excluded52 = ["size", "color", "filled", "strokeWidth"],
-  _excluded53 = ["size", "color", "filled", "strokeWidth"],
-  _excluded54 = ["size", "color", "filled", "strokeWidth"],
-  _excluded55 = ["size", "color", "filled", "strokeWidth"],
-  _excluded56 = ["size", "color", "filled", "strokeWidth"],
-  _excluded57 = ["size", "color", "filled", "strokeWidth"],
-  _excluded58 = ["size", "color", "filled", "strokeWidth"],
-  _excluded59 = ["size", "color", "filled", "strokeWidth"],
-  _excluded60 = ["size", "color", "filled", "strokeWidth"],
-  _excluded61 = ["size", "color", "filled", "strokeWidth"],
-  _excluded62 = ["size", "color", "filled", "strokeWidth"],
-  _excluded63 = ["size", "color", "filled", "strokeWidth"],
-  _excluded64 = ["size", "color", "strokeWidth", "filled"];
+var _excluded$4 = ["widthHeight", "color", "transform", "orientation", "children"],
+  _excluded2 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded3 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded4 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded5 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded6 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded7 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded8 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded9 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded10 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded11 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded12 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded13 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded14 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded15 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded16 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded17 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded18 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded19 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded20 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded21 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded22 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded23 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded24 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded25 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded26 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded27 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded28 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded29 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded30 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded31 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded32 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded33 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded34 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded35 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded36 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded37 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded38 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded39 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded40 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded41 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded42 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded43 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded44 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded45 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded46 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded47 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded48 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded49 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded50 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded51 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded52 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded53 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded54 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded55 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded56 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded57 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded58 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded59 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded60 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded61 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded62 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded63 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded64 = ["widthHeight", "color", "strokeWidth", "filled"];
 // Default wrapper component for consistent sizing and styling
 var IconWrapper = _ref => {
   var {
-      size,
+      widthHeight,
       color = 'black',
       transform,
       orientation = 'up',
@@ -300,8 +308,8 @@ var IconWrapper = _ref => {
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({
-    size: size,
-    lineHeight: size,
+    widthHeight: widthHeight,
+    lineHeight: widthHeight,
     color: color,
     display: "flex",
     transform: transform ? transform : orientation === 'left' ? 'rotate(-90deg)' : orientation === 'right' ? 'rotate(90deg)' : orientation === 'up' ? 'rotate(0deg)' : orientation === 'down' ? 'rotate(180deg)' : 'none'
@@ -320,14 +328,14 @@ var getSvgProps = (filled, color, strokeWidth) => {
 // Example Icon Component: ChevronIcon
 var ChevronIcon = _ref2 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -339,14 +347,14 @@ var ChevronIcon = _ref2 => {
 };
 var DragHandleIcon = _ref3 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -381,14 +389,14 @@ var DragHandleIcon = _ref3 => {
 // File Icon Component
 var FileIcon = _ref4 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -409,14 +417,14 @@ var FileIcon = _ref4 => {
 // Video Icon Component
 var VideoIcon = _ref5 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref5,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -442,14 +450,14 @@ var VideoIcon = _ref5 => {
 // Image Icon Component
 var ImageIcon = _ref6 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref6,
     props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -481,14 +489,14 @@ var ImageIcon = _ref6 => {
 };
 var TwitterIcon = _ref7 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref7,
     props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -503,14 +511,14 @@ var TwitterIcon = _ref7 => {
 };
 var XIcon = _ref8 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref8,
     props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -526,14 +534,14 @@ var XIcon = _ref8 => {
 // Example of a Twitch Icon
 var TwitchIcon = _ref9 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref9,
     props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -554,14 +562,14 @@ var TwitchIcon = _ref9 => {
 // Example of another Icon: CloseIcon
 var CloseIcon = _ref10 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref10,
     props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -583,14 +591,14 @@ var CloseIcon = _ref10 => {
 };
 var InstagramIcon = _ref11 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref11,
     props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -614,14 +622,14 @@ var InstagramIcon = _ref11 => {
 };
 var YoutubeIcon = _ref12 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref12,
     props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -642,14 +650,14 @@ var YoutubeIcon = _ref12 => {
 };
 var FacebookIcon = _ref13 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref13,
     props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -664,14 +672,14 @@ var FacebookIcon = _ref13 => {
 };
 var LinkedinIcon = _ref14 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref14,
     props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24"
@@ -690,14 +698,14 @@ var LinkedinIcon = _ref14 => {
 };
 var ThreadsIcon = _ref15 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref15,
     props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24"
@@ -712,7 +720,7 @@ var ThreadsIcon = _ref15 => {
 // Example Refactored Icon: MinusIcon without undefined 'padding' prop
 var MinusIcon = _ref16 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       // Assuming minus can be filled; adjust as needed
@@ -720,7 +728,7 @@ var MinusIcon = _ref16 => {
     } = _ref16,
     props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -737,14 +745,14 @@ var MinusIcon = _ref16 => {
 // Example Refactored Icon: InfoIcon with accessibility enhancements
 var InfoIcon = _ref17 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref17,
     props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props, {
     "aria-label": "Information"
@@ -758,14 +766,14 @@ var InfoIcon = _ref17 => {
 };
 var PlayIcon = _ref18 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref18,
     props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -777,14 +785,14 @@ var PlayIcon = _ref18 => {
 };
 var PauseIcon = _ref19 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref19,
     props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -796,14 +804,14 @@ var PauseIcon = _ref19 => {
 };
 var HeartIcon = _ref20 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref20,
     props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -815,14 +823,14 @@ var HeartIcon = _ref20 => {
 };
 var StarIcon = _ref21 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref21,
     props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -834,14 +842,14 @@ var StarIcon = _ref21 => {
 };
 var SaveIcon = _ref22 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref22,
     props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -857,14 +865,14 @@ var SaveIcon = _ref22 => {
 };
 var WarningIcon = _ref23 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref23,
     props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -888,14 +896,14 @@ var WarningIcon = _ref23 => {
 };
 var BatteryIcon = _ref24 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref24,
     props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -907,14 +915,14 @@ var BatteryIcon = _ref24 => {
 };
 var BookmarkIcon = _ref25 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref25,
     props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -926,14 +934,14 @@ var BookmarkIcon = _ref25 => {
 };
 var CloudIcon = _ref26 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref26,
     props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -945,14 +953,14 @@ var CloudIcon = _ref26 => {
 };
 var CopyIcon = _ref27 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref27,
     props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -971,14 +979,14 @@ var CopyIcon = _ref27 => {
 };
 var DustBinIcon = _ref28 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref28,
     props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -990,14 +998,14 @@ var DustBinIcon = _ref28 => {
 };
 var EditIcon = _ref29 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref29,
     props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1009,14 +1017,14 @@ var EditIcon = _ref29 => {
 };
 var ErrorIcon = _ref30 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = true
     } = _ref30,
     props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1042,14 +1050,14 @@ var ErrorIcon = _ref30 => {
 };
 var DownloadIcon = _ref31 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref31,
     props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1061,14 +1069,14 @@ var DownloadIcon = _ref31 => {
 };
 var MenuIcon = _ref32 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
     } = _ref32,
     props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1096,14 +1104,14 @@ var MenuIcon = _ref32 => {
 };
 var ShareIcon = _ref33 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref33,
     props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1137,14 +1145,14 @@ var ShareIcon = _ref33 => {
 };
 var RefreshIcon = _ref34 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
     } = _ref34,
     props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1158,14 +1166,14 @@ var RefreshIcon = _ref34 => {
 };
 var PrintIcon = _ref35 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref35,
     props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", {
     viewBox: "0 0 24 24",
@@ -1178,14 +1186,14 @@ var PrintIcon = _ref35 => {
 };
 var PanelIcon = _ref36 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
     } = _ref36,
     props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1249,14 +1257,14 @@ var PanelIcon = _ref36 => {
 };
 var FilterIcon = _ref37 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref37,
     props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1268,14 +1276,14 @@ var FilterIcon = _ref37 => {
 };
 var HomeIcon = _ref38 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref38,
     props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1287,14 +1295,14 @@ var HomeIcon = _ref38 => {
 };
 var LocationIcon = _ref39 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref39,
     props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1306,14 +1314,14 @@ var LocationIcon = _ref39 => {
 };
 var LockIcon = _ref40 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref40,
     props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1332,14 +1340,14 @@ var LockIcon = _ref40 => {
 };
 var MicrophoneIcon = _ref41 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref41,
     props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1365,14 +1373,14 @@ var MicrophoneIcon = _ref41 => {
 };
 var MoonIcon = _ref42 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref42,
     props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1384,14 +1392,14 @@ var MoonIcon = _ref42 => {
 };
 var NotificationIcon = _ref43 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref43,
     props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1405,14 +1413,14 @@ var NotificationIcon = _ref43 => {
 };
 var OpenEyeIcon = _ref44 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref44,
     props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1424,14 +1432,14 @@ var OpenEyeIcon = _ref44 => {
 };
 var ProfileIcon = _ref45 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref45,
     props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1444,14 +1452,14 @@ var ProfileIcon = _ref45 => {
 };
 var SettingsIcon = _ref46 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref46,
     props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1463,14 +1471,14 @@ var SettingsIcon = _ref46 => {
 };
 var SuccessIcon = _ref47 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref47,
     props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1482,14 +1490,14 @@ var SuccessIcon = _ref47 => {
 };
 var UnLikeIcon = _ref48 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref48,
     props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1501,14 +1509,14 @@ var UnLikeIcon = _ref48 => {
 };
 var ClockIcon = _ref49 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
     } = _ref49,
     props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1524,14 +1532,14 @@ var ClockIcon = _ref49 => {
 };
 var CameraIcon = _ref50 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
     } = _ref50,
     props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1547,14 +1555,14 @@ var CameraIcon = _ref50 => {
 };
 var BluetoothIcon = _ref51 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref51,
     props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1566,14 +1574,14 @@ var BluetoothIcon = _ref51 => {
 };
 var LikeIcon = _ref52 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref52,
     props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1585,14 +1593,14 @@ var LikeIcon = _ref52 => {
 };
 var UnlockIcon = _ref53 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref53,
     props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1611,14 +1619,14 @@ var UnlockIcon = _ref53 => {
 };
 var WifiIcon = _ref54 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref54,
     props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1630,14 +1638,14 @@ var WifiIcon = _ref54 => {
 };
 var UploadIcon = _ref55 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref55,
     props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1653,14 +1661,14 @@ var UploadIcon = _ref55 => {
 };
 var SearchIcon = _ref56 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref56,
     props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1672,14 +1680,14 @@ var SearchIcon = _ref56 => {
 };
 var CloseEyeIcon = _ref57 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref57,
     props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1692,14 +1700,14 @@ var CloseEyeIcon = _ref57 => {
 };
 var ExternalLinkIcon = _ref58 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref58,
     props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1711,14 +1719,14 @@ var ExternalLinkIcon = _ref58 => {
 };
 var PlusIcon = _ref59 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref59,
     props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1740,14 +1748,14 @@ var PlusIcon = _ref59 => {
 };
 var TickIcon = _ref60 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref60,
     props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1761,14 +1769,14 @@ var TickIcon = _ref60 => {
 };
 var BoldArrowIcon = _ref61 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
     } = _ref61,
     props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1780,14 +1788,14 @@ var BoldArrowIcon = _ref61 => {
 };
 var ArrowIcon = _ref62 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref62,
     props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1805,14 +1813,14 @@ var ArrowIcon = _ref62 => {
 };
 var SpinnerIcon = _ref63 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
     } = _ref63,
     props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1830,14 +1838,14 @@ var SpinnerIcon = _ref63 => {
 };
 var CalendarIcon = _ref64 => {
   var {
-      size = 24,
+      widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
     } = _ref64,
     props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    size: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1938,7 +1946,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: {
@@ -1951,7 +1959,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',
@@ -1962,7 +1970,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',
@@ -1973,7 +1981,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',
@@ -1984,7 +1992,7 @@ var Themes = {
       color: '#ef4444'
     }
   },
-  // Introduction of the 'warning' theme styles.
+  // Introduction of the 'warning' theme views.
   warning: {
     container: {
       backgroundColor: 'color.orange.200',
@@ -1999,11 +2007,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, _views$icon;
   var {
     icon,
     title,
-    styles,
+    views,
     description,
     // Sets a default variant prop to 'default' if none is provided.
     variant = 'default'
@@ -2015,20 +2023,20 @@ var AlertView = _ref => {
     borderStyle: "solid",
     padding: 16,
     flexWrap: "nowrap"
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(View, {
+  }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(View, {
     alignSelf: 'center'
   }, icon ? icon : (/*#__PURE__*/React__default.createElement(WarningIcon, {
-    size: 24,
-    color: (_styles$icon$color = styles == null ? void 0 : styles.icon.color) != null ? _styles$icon$color : Themes[variant].content.color
+    widthHeight: 24,
+    color: (_views$icon$color = views == null || (_views$icon = views.icon) == null ? void 0 : _views$icon.color) != null ? _views$icon$color : Themes[variant].content.color
   }))), /*#__PURE__*/React__default.createElement(Vertical, {
     gap: 10
   }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
     fontSize: "16px",
     color: Themes[variant].content.color
-  }, styles == null ? void 0 : styles.title), title), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+  }, views == null ? void 0 : views.title), title), /*#__PURE__*/React__default.createElement(Text, Object.assign({
     fontSize: "14px",
     color: Themes[variant].content.color
-  }, styles == null ? void 0 : styles.description), description)));
+  }, views == null ? void 0 : views.description), description)));
 };
 
 // Definition of the AlertComponent functional component with destructured props.
@@ -2036,14 +2044,14 @@ var AlertComponent = _ref => {
   var {
     icon,
     title,
-    styles,
+    views,
     description,
     variant
   } = _ref;
   return /*#__PURE__*/React__default.createElement(AlertView, {
     icon: icon,
     title: title,
-    styles: styles,
+    views: views,
     description: description,
     variant: variant
   });
@@ -2051,14 +2059,15 @@ var AlertComponent = _ref => {
 // Exporting the AlertComponent as 'Alert' for use in other parts of the application.
 var Alert = AlertComponent;
 
-var _excluded$5 = ["ratio", "children"];
+var _excluded$5 = ["ratio", "children", "views"];
 // Declaration of a functional component named AspectRatioView.
 var AspectRatioView = _ref => {
   var {
       // Set a default aspect ratio of 16:9 if no ratio is provided as a prop.
       ratio = 16 / 9,
       // children prop used to render enclosed components.
-      children
+      children,
+      views
       // Spread the rest of the props to inherit additional properties.
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
@@ -2068,13 +2077,13 @@ var AspectRatioView = _ref => {
     overflow: "hidden",
     paddingTop: 1 / ratio * 100 + "%",
     borderRadius: 8
-  }, props), /*#__PURE__*/React__default.createElement(View, {
+  }, props, views == null ? void 0 : views.center), /*#__PURE__*/React__default.createElement(View, Object.assign({
     position: "absolute",
     top: 0,
     right: 0,
     bottom: 0,
     left: 0
-  }, children));
+  }, views == null ? void 0 : views.view), children));
 };
 
 var _excluded$6 = ["ratio", "children"];
@@ -2117,7 +2126,7 @@ var AvatarView = _ref => {
     src,
     size = 'md',
     fallback = 'IM',
-    styles,
+    views,
     imageError,
     setImageError,
     onClick = () => {}
@@ -2127,7 +2136,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__default.createElement(Center, Object.assign({
     role: "avatar",
@@ -2140,7 +2149,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__default.createElement(appStudio.Image, {
+  }, views == null ? void 0 : views.container), !imageError ? (/*#__PURE__*/React__default.createElement(appStudio.Image, {
     alt: "IM",
     src: src,
     style: imageStyle,
@@ -2149,7 +2158,7 @@ var AvatarView = _ref => {
     onError: () => setImageError(true)
   })) : (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: size
-  }, styles == null ? void 0 : styles.fallback), fallback)));
+  }, views == null ? void 0 : views.fallback), fallback)));
 };
 
 // Defines the AvatarComponent functional component with destructured props from AvatarProps type.
@@ -2157,7 +2166,7 @@ var AvatarComponent = _ref => {
   var {
     src,
     size,
-    styles,
+    views,
     fallback,
     onClick
   } = _ref;
@@ -2170,7 +2179,7 @@ var AvatarComponent = _ref => {
   return /*#__PURE__*/React__default.createElement(AvatarView, {
     src: src,
     size: size,
-    styles: styles,
+    views: views,
     fallback: fallback,
     imageError: imageError,
     setImageError: setImageError,
@@ -2241,17 +2250,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',
@@ -2262,23 +2270,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'
@@ -2287,13 +2295,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__default.createElement(Center, Object.assign({
     role: "badge"
   }, combinedStyles), /*#__PURE__*/React__default.createElement(Text, Object.assign({
     role: "badgeText",
     size: size
-  }, styles == null ? void 0 : styles.text), content));
+  }, views == null ? void 0 : views.text), content));
 };
 
 // Importing type definitions for BadgeProps that will be used to type-check the Badge component's props.
@@ -2304,22 +2312,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__default.createElement(BadgeView, {
     content: content,
     shape: shape,
-    colorScheme: colorScheme,
     position: position,
     variant: variant,
     size: size,
-    styles: styles
+    views: views
   });
 };
 
@@ -2358,7 +2363,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 {
@@ -2374,7 +2379,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: {}
       },
@@ -2393,12 +2398,12 @@ var LinkView = _ref => {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
-  }, styles.text, props), /*#__PURE__*/React__default.createElement(Horizontal, {
+  }, views.text, props), /*#__PURE__*/React__default.createElement(Horizontal, {
     gap: 3,
     alignItems: "center",
     flexWrap: "nowrap"
   }, children, isExternal && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
-    size: IconSizes[iconSize]
+    widthHeight: IconSizes[iconSize]
   }))));
 };
 
@@ -2541,7 +2546,7 @@ var DefaultSpeeds = {
 var _excluded$8 = ["size", "speed", "color", "themeMode"],
   _excluded2$1 = ["size", "speed", "color", "themeMode"],
   _excluded3$1 = ["size", "speed", "color", "themeMode"],
-  _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
+  _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition", "views"];
 var DefaultSpinner = _ref => {
   var {
       size = 'md',
@@ -2682,7 +2687,8 @@ var LoaderView = _ref4 => {
       loaderColor,
       type = 'default',
       speed = 'normal',
-      textPosition = 'right'
+      textPosition = 'right',
+      views
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
   var style = {
@@ -2698,11 +2704,11 @@ var LoaderView = _ref4 => {
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({
     gap: 10,
     flexDirection: textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'
-  }, props), (textPosition === 'left' || textPosition === 'top') && children && (/*#__PURE__*/React__default.createElement(View, {
+  }, props, views == null ? void 0 : views.container), (textPosition === 'left' || textPosition === 'top') && children && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     color: textColor
-  }, children)), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && (/*#__PURE__*/React__default.createElement(View, {
+  }, views == null ? void 0 : views.text), children)), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     color: textColor
-  }, children)));
+  }, views == null ? void 0 : views.text), children)));
 };
 
 // Defines a LoaderComponent as a functional component with props defined by LoaderProps and returns the LoaderView component, passing along any received props.
@@ -2713,7 +2719,7 @@ React__default.createElement(LoaderView, Object.assign({}, props)));
 // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
 var Loader = LoaderComponent;
 
-var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "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", "views"];
 var contrast = /*#__PURE__*/require('contrast');
 var ButtonView = _ref => {
   var _props$onClick;
@@ -2721,25 +2727,16 @@ var ButtonView = _ref => {
       icon,
       shadow,
       children,
-      // Defines the functional component ButtonView with its expected props detailed in ButtonProps.
       ariaLabel,
-      // Initializes default values for the ButtonProps object; useful for defining states like isAuto, isFilled, etc.
       to,
       isAuto = false,
-      // Determines if button should be active based on isDisabled and isLoading properties.
       isFilled = false,
-      // Prepares default properties for the native button element based on isActive state.
       isIconRounded = false,
-      // Sets button color; defaults to the theme's disabled color if button is not active.
       isLoading = false,
-      // Determines if the hover effect shall be applied based on isHovered and effect property.
       isDisabled = false,
-      // Determines if the reverse style shall be applied based on isHovered and effect property.
       size = 'md',
       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 = {},
@@ -2749,9 +2746,8 @@ var ButtonView = _ref => {
       setIsHovered = () => {},
       isExternal = false,
       themeMode: elementMode,
-      containerProps,
-      linkProps
-      // Defines CSS properties for 'outline' variant of the button with conditional styles based on reverse state.
+      linkProps,
+      views
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var {
@@ -2763,13 +2759,12 @@ 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';
   var ButtonVariants = {
     filled: {
-      // Defines CSS properties for 'link' variant of the button with conditional styles based on reverse state, includes text decoration.
       backgroundColor: reverse ? 'transparent' : buttonColor,
       color: reverse ? isLight ? 'white' : buttonColor : isLight ? buttonColor : 'white',
       borderWidth: 1,
@@ -2778,42 +2773,36 @@ var ButtonView = _ref => {
     },
     outline: {
       backgroundColor: reverse ? buttonColor : 'transparent',
-      // Defines CSS properties for 'ghost' variant of the button with conditional styles based on reverse state.
       borderWidth: 1,
       borderStyle: 'solid',
-      borderColor: reverse ? buttonColor : colorScheme,
-      // Fetches size-specific styles from ButtonSizes based on the 'size' prop.
+      borderColor: reverse ? buttonColor : 'theme.primary',
       color: reverse ? 'white' : buttonColor
     },
-    // Adjusts button width based on isAuto and isFilled properties, using buttonSizeStyles for fallback width.
     link: {
       backgroundColor: 'transparent',
-      // Changes padding for the button based on whether isIconRounded is true or false.
       borderWidth: 1,
       borderStyle: 'solid',
-      // Creates the content for the button including loaders and icons positioned based on their respective properties.
       borderColor: reverse ? buttonColor : 'transparent',
       color: buttonColor,
       textDecoration: reverse ? 'none' : 'underline'
     },
     ghost: {
-      backgroundColor: reverse ? buttonColor : 'transparent',
+      backgroundColor: 'transparent',
       color: reverse ? 'white' : buttonColor,
       borderWidth: 1,
       borderStyle: 'solid',
       borderColor: reverse ? buttonColor : 'transparent'
     }
   };
-  // Executes rendering of the button or a link element based on the variant; applies conditional rendering for to in 'link' variant.
   var buttonSizeStyles = ButtonSizes[size];
   var buttonVariant = ButtonVariants[variant];
   var scaleWidth = {
     width: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
   };
   var changePadding = isIconRounded ? IconSizes$1[size] : ButtonSizes[size];
-  var content = /*#__PURE__*/React__default.createElement(Horizontal, {
+  var content = /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
     gap: 10
-  }, isLoading && loaderPosition === 'left' && /*#__PURE__*/React__default.createElement(Loader, Object.assign({}, loaderProps)), icon && iconPosition === 'left' && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, isHovered ? {
+  }, views == null ? void 0 : views.horizontal), isLoading && loaderPosition === 'left' && /*#__PURE__*/React__default.createElement(Loader, Object.assign({}, loaderProps)), icon && iconPosition === 'left' && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, isHovered ? {
     animate: appStudio.Animation.jackInTheBox({})
   } : {}), icon)), children, icon && iconPosition === 'right' && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, isHovered ? {
     animate: appStudio.Animation.jackInTheBox({})
@@ -2837,12 +2826,11 @@ var ButtonView = _ref => {
   }, hovering && !props.isDisabled ? {
     transition: 'transform 0.3s ease',
     transform: 'translateY(-5px)'
-  } : {}, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, shadow, props, containerProps), variant === 'link' && to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
+  } : {}, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, shadow, props, views == null ? void 0 : views.container), variant === 'link' && to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
     to: to,
-    textDecorationColor: colorScheme,
-    colorScheme: colorScheme,
+    textDecorationColor: 'theme.primary',
     isExternal: isExternal
-  }, linkProps), content)) : content);
+  }, linkProps, views == null ? void 0 : views.link), content)) : content);
 };
 
 // Importing a custom hook to manage the state specific to the button component.
@@ -2872,13 +2860,13 @@ var ButtonComponent = props => {
 };
 var Button = ButtonComponent;
 
-var _excluded$a = ["src", "color", "themeMode"],
+var _excluded$a = ["src", "color", "views", "themeMode"],
   _excluded2$2 = ["path"];
 var FileSVG = _ref => {
   var {
       src,
       color,
-      themeMode: elementMode
+      views
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
@@ -2886,14 +2874,18 @@ var FileSVG = _ref => {
     themeMode
   } = appStudio.useTheme();
   var Colorprops = color ? {
-    fill: getColor(color, elementMode ? elementMode : themeMode),
-    stroke: getColor(color, elementMode ? elementMode : themeMode)
+    fill: getColor(color, {
+      themeMode
+    }),
+    stroke: getColor(color, {
+      themeMode
+    })
   } : {};
-  return /*#__PURE__*/React__default.createElement(Center, Object.assign({}, props), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({}, Colorprops, {
+  return /*#__PURE__*/React__default.createElement(Center, Object.assign({}, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({}, Colorprops, {
     content: 'url("' + src + '")',
     width: "100%",
     height: "100%"
-  })));
+  }, views == null ? void 0 : views.image)));
 };
 var FileImage = _ref2 => {
   var {
@@ -2950,11 +2942,11 @@ var useItemState = () => {
   };
 };
 
-var _excluded$b = ["children", "styles"];
+var _excluded$b = ["children", "views"];
 var HelperText = _ref => {
   var {
       children,
-      styles = {
+      views = {
         helperText: {}
       }
     } = _ref,
@@ -2964,22 +2956,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__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
-  }, props), children, !error && helperText && /*#__PURE__*/React__default.createElement(HelperText, Object.assign({}, styles), helperText), error && (/*#__PURE__*/React__default.createElement(Text, {
+  }, props), children, !error && helperText && /*#__PURE__*/React__default.createElement(HelperText, Object.assign({}, views), helperText), error && (/*#__PURE__*/React__default.createElement(Text, {
     size: "xs",
     marginVertical: 0,
     marginHorizontal: 0,
@@ -3034,7 +3026,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,
@@ -3048,14 +3040,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__default.createElement(Horizontal, Object.assign({
     gap: 10,
     width: "100%",
@@ -3071,7 +3062,7 @@ var FieldContent = _ref => {
     fontSize: appStudio.Typography.fontSizes[size],
     // filter={isHovered ?  'brightness(1)':'brightness(0.97)'}
     cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
-  }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
+  }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], views['box'], props), children);
 };
 
 var _excluded$e = ["children"];
@@ -3119,13 +3110,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
   }
@@ -3179,14 +3170,14 @@ React__default.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,
@@ -3200,7 +3191,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"];
@@ -3228,7 +3219,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 {
@@ -3262,7 +3253,7 @@ var SelectBox = _ref2 => {
   var _ref3;
   var {
     size = 'md',
-    styles = {
+    views = {
       field: {},
       text: {}
     },
@@ -3283,7 +3274,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__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || Array.isArray(value) && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_ref3 = option && option.label) != null ? _ref3 : value :
   // If value is an array and not empty, render MultiSelect options
@@ -3336,7 +3327,7 @@ var HiddenSelect = _ref4 => {
 var DropDown = _ref5 => {
   var {
     size,
-    styles = {
+    views = {
       dropDown: {}
     },
     options,
@@ -3383,10 +3374,10 @@ var DropDown = _ref5 => {
         display: 'none'
       }
     }
-  }, shadow, styles['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
+  }, shadow, views['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
     key: option.value,
     size: size,
-    style: styles['text'],
+    style: views['text'],
     option: option,
     callback: handleCallback,
     backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
@@ -3414,7 +3405,7 @@ var MultiSelect = _ref6 => {
   }, option), /*#__PURE__*/React__default.createElement(CloseIcon, {
     role: "close-button",
     color: "inherit",
-    size: IconSizes$2[size],
+    widthHeight: IconSizes$2[size],
     onClick: handleClick
   }));
 };
@@ -3436,10 +3427,9 @@ var SelectView = _ref7 => {
       options = [],
       shadow = {},
       size = 'md',
-      colorScheme = 'theme.primary',
       shape = 'default',
       variant = 'default',
-      styles = {
+      views = {
         text: {},
         icon: {},
         dropDown: {},
@@ -3483,31 +3473,30 @@ var SelectView = _ref7 => {
     role: "SelectBox",
     helperText: helperText,
     error: error,
-    styles: styles,
+    views: views,
     onClick: isDisabled || isReadOnly ? () => {} : handleClick
   }, /*#__PURE__*/React__default.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
     shape: shape,
-    styles: styles,
+    views: views,
     shadow: shadow,
     variant: variant,
     value: value,
-    color: colorScheme,
+    color: 'theme.primary',
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
     isFocused: isFocused,
     isWithLabel: isWithLabel,
-    colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
   }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: colorScheme,
+    color: 'theme.primary',
     error: error
-  }, styles), label)), /*#__PURE__*/React__default.createElement(HiddenSelect, Object.assign({
+  }, views), label)), /*#__PURE__*/React__default.createElement(HiddenSelect, Object.assign({
     id: id,
     name: name,
     options: options,
@@ -3520,24 +3509,24 @@ var SelectView = _ref7 => {
   }, props)), /*#__PURE__*/React__default.createElement(SelectBox, {
     options: options,
     size: size,
-    styles: styles,
+    views: views,
     value: value,
     isDisabled: isDisabled,
     placeholder: placeholder,
     removeOption: handleRemoveOption
   })), /*#__PURE__*/React__default.createElement(FieldIcons, null, !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, hide ? (/*#__PURE__*/React__default.createElement(ChevronIcon, {
     color: "inherit",
-    size: IconSizes$2[size],
-    style: styles.icon,
+    widthHeight: IconSizes$2[size],
+    style: views.icon,
     orientation: "down"
   })) : (/*#__PURE__*/React__default.createElement(ChevronIcon, {
     color: "inherit",
     orientation: "up",
-    size: IconSizes$2[size],
-    style: styles.icon
+    widthHeight: IconSizes$2[size],
+    style: views.icon
   })))))), !hide && (/*#__PURE__*/React__default.createElement(DropDown, {
     size: size,
-    styles: styles,
+    views: views,
     options: options,
     callback: handleCallback,
     highlightedIndex: highlightedIndex,
@@ -3701,7 +3690,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__default.createElement(appStudio.Input, Object.assign({
   type: "checkbox"
 }, props));
@@ -3715,7 +3704,6 @@ var SwitchView = _ref => {
       labelPosition = 'right',
       shadow = {},
       size = 'sm',
-      colorScheme = 'theme.primary',
       value = false,
       isHovered = false,
       isDisabled = false,
@@ -3725,7 +3713,7 @@ var SwitchView = _ref => {
       onChange,
       setValue = () => {},
       setIsHovered = () => {},
-      styles = {
+      views = {
         slider: {},
         circle: {},
         label: {}
@@ -3747,7 +3735,7 @@ var SwitchView = _ref => {
       height: 'fit-content',
       width: 'fit-content',
       cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
-    }, styles.label)
+    }, views.label)
   };
   return /*#__PURE__*/React__default.createElement(Label, Object.assign({
     htmlFor: id,
@@ -3771,12 +3759,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__default.createElement(View, null, activeChild), /*#__PURE__*/React__default.createElement(View, Object.assign({
+  }, shadow, SliderPadding[size], SliderSizes[size], views['slider']), activeChild && value && /*#__PURE__*/React__default.createElement(View, null, activeChild), /*#__PURE__*/React__default.createElement(View, Object.assign({
     borderRadius: "50%",
     backgroundColor: "white"
-  }, KnobSizes[size], styles['circle'])), inActiveChild && !value && /*#__PURE__*/React__default.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && /*#__PURE__*/React__default.createElement(View, null, label));
+  }, KnobSizes[size], views['circle'])), inActiveChild && !value && /*#__PURE__*/React__default.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && /*#__PURE__*/React__default.createElement(View, null, label));
 };
 
 // Defines the SwitchComponent as a functional component that takes SwitchProps as props.
@@ -3821,7 +3809,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,
@@ -3835,7 +3823,6 @@ var TextAreaView = _ref => {
       size = 'sm',
       shape = 'default',
       variant = 'default',
-      colorScheme = 'theme.primary',
       isHovered = false,
       isFocused = false,
       isEditable = false,
@@ -3853,7 +3840,7 @@ var TextAreaView = _ref => {
       setValue = () => {},
       setIsFocused = () => {},
       setIsHovered = () => {},
-      styles = {
+      views = {
         box: {},
         text: {},
         label: {},
@@ -3879,7 +3866,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);
@@ -3903,30 +3890,29 @@ var TextAreaView = _ref => {
   return /*#__PURE__*/React__default.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
-    styles: styles
+    views: views
   }, /*#__PURE__*/React__default.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
     shape: shape,
-    styles: styles,
+    views: views,
     shadow: shadow,
     variant: variant,
     value: value,
-    color: colorScheme,
+    color: 'theme.primary',
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
     isFocused: isFocused,
     isWithLabel: isWithLabel,
-    colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
   }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: colorScheme,
+    color: 'theme.primary',
     error: error
-  }, styles), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  }, views), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "textarea",
     id: id,
     name: name,
@@ -3991,7 +3977,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__default.createElement(appStudio.Input, Object.assign({
   type: "text"
 }, props));
@@ -4008,7 +3994,7 @@ var TextFieldView = _ref => {
       helperText,
       onChangeText,
       shadow = {},
-      styles = {
+      views = {
         box: {},
         field: {},
         label: {},
@@ -4018,7 +4004,6 @@ var TextFieldView = _ref => {
       size = 'md',
       shape = 'default',
       variant = 'default',
-      colorScheme = 'theme.primary',
       error = false,
       isFocused = false,
       isHovered = false,
@@ -4059,7 +4044,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();
@@ -4096,30 +4081,29 @@ var TextFieldView = _ref => {
   return /*#__PURE__*/React__default.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
-    styles: styles
+    views: views
   }, /*#__PURE__*/React__default.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
     shape: shape,
-    styles: styles,
+    views: views,
     shadow: shadow,
     variant: variant,
     value: value,
-    color: colorScheme,
+    color: 'theme.primary',
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
     isFocused: isFocused,
     isWithLabel: isWithLabel,
-    colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
   }, left, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: colorScheme,
+    color: 'theme.primary',
     error: error
-  }, styles), label)), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
+  }, views), label)), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
     id: id,
     name: name,
     readOnly: isReadOnly,
@@ -4133,7 +4117,7 @@ var TextFieldView = _ref => {
     onChange: handleChange,
     value: value
   }))), isClearable && value && !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(FieldIcons, null, /*#__PURE__*/React__default.createElement(CloseIcon, {
-    size: appStudio.Typography.fontSizes[size],
+    widthHeight: appStudio.Typography.fontSizes[size],
     color: IconColor,
     onClick: handleClear
   }))), right));
@@ -4217,7 +4201,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,
@@ -4229,7 +4213,6 @@ var CheckboxView = _ref => {
       shadow = {},
       labelPosition = 'right',
       size = 'md',
-      colorScheme = 'theme.primary',
       error = false,
       isSelected = false,
       isHovered = false,
@@ -4239,7 +4222,7 @@ var CheckboxView = _ref => {
       defaultIsSelected = false,
       setIsSelected = () => {},
       setIsHovered = () => {},
-      styles = {
+      views = {
         checkbox: {},
         label: {}
       },
@@ -4263,11 +4246,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',
@@ -4276,7 +4259,7 @@ var CheckboxView = _ref => {
       borderRadius: 3
     }, isHovered ? {
       filter: 'brightness(0.9)'
-    } : {}, Sizes[size], shadow, styles['checkbox'])
+    } : {}, Sizes[size], shadow, views['checkbox'])
   };
   return /*#__PURE__*/React__default.createElement(Label, Object.assign({
     htmlFor: id,
@@ -4292,19 +4275,19 @@ var CheckboxView = _ref => {
     alignItems: "center"
   }, labelPosition === 'left' && label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: size
-  }, styles == null ? void 0 : styles.label), label)), /*#__PURE__*/React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? (/*#__PURE__*/React__default.createElement(MinusIcon, {
-    size: IconSizes$3[size],
+  }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? (/*#__PURE__*/React__default.createElement(MinusIcon, {
+    widthHeight: IconSizes$3[size],
     color: "white"
   })) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React__default.createElement(TickIcon, {
-    size: IconSizes$3[size],
+    widthHeight: IconSizes$3[size],
     color: "white"
   }))), labelPosition === 'right' && label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: size
-  }, styles == null ? void 0 : styles.label), label))), infoText && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+  }, views == null ? void 0 : views.label), label))), infoText && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     marginLeft: labelPosition === 'left' ? 0 : 27,
     color: "color.gray.400",
     size: "sm"
-  }, styles == null ? void 0 : styles.infoText), infoText))), error && (/*#__PURE__*/React__default.createElement(Text, {
+  }, views == null ? void 0 : views.infoText), infoText))), error && (/*#__PURE__*/React__default.createElement(Text, {
     size: "xs",
     marginVertical: 0,
     marginHorizontal: 0,
@@ -5811,7 +5794,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__default.createElement(appStudio.Element, Object.assign({
@@ -5832,7 +5815,7 @@ var DropDownItem = _ref3 => {
     option,
     size = 'md',
     callback = () => {},
-    styles = {
+    views = {
       text: {}
     }
   } = _ref3;
@@ -5854,15 +5837,15 @@ var DropDownItem = _ref3 => {
     onClick: handleOptionClick,
     fontSize: appStudio.Typography.fontSizes[size],
     backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
-  }, styles['text']), option);
+  }, views['text']), option);
 };
 var DropDown$1 = _ref4 => {
   var {
     size,
-    styles = {
+    views = {
       dropDown: {}
     },
-    options,
+    options = [],
     callback = () => {}
   } = _ref4;
   var handleCallback = option => callback(option);
@@ -5881,12 +5864,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__default.createElement(DropDownItem, Object.assign({
+  }, views['dropDown']), options.map(option => (/*#__PURE__*/React__default.createElement(DropDownItem, Object.assign({
     key: option.code,
     size: size,
     option: option.name,
     callback: handleCallback
-  }, styles['text'])))));
+  }, views['text'])))));
 };
 var CountryPickerView = _ref5 => {
   var {
@@ -5908,7 +5891,6 @@ var CountryPickerView = _ref5 => {
       size = 'md',
       variant = 'default',
       shape = 'default',
-      colorScheme = 'theme.primary',
       onChange,
       onBlur = () => {},
       setHide = () => {},
@@ -5916,7 +5898,7 @@ var CountryPickerView = _ref5 => {
       setIsHovered = () => {},
       setIsFocused = () => {},
       setValue = () => {},
-      styles = {
+      views = {
         text: {},
         icon: {},
         label: {},
@@ -5971,36 +5953,35 @@ var CountryPickerView = _ref5 => {
     fontSize: appStudio.Typography.fontSizes[size],
     backgroundColor: 'transparent',
     color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
-    cursor: isDisabled ? 'not-allowed' : 'auto'
-  }, styles['field']);
+    cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
+  }, views['field']);
   return /*#__PURE__*/React__default.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
-    styles: styles,
+    views: views,
     onClick: handleClick
   }, /*#__PURE__*/React__default.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
     shape: shape,
-    styles: styles,
+    views: views,
     shadow: shadow,
     variant: variant,
     value: value,
-    color: colorScheme,
+    color: 'theme.primary',
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
     isFocused: isFocused,
     isWithLabel: isWithLabel,
-    colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
   }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: colorScheme,
+    color: 'theme.primary',
     error: error
-  }, styles), label)), /*#__PURE__*/React__default.createElement(CountrySelector, Object.assign({
+  }, views), label)), /*#__PURE__*/React__default.createElement(CountrySelector, Object.assign({
     id: id,
     name: name,
     placeholder: placeholder,
@@ -6014,17 +5995,17 @@ var CountryPickerView = _ref5 => {
     onChange: handleChange
   }))), /*#__PURE__*/React__default.createElement(FieldIcons, null, hide ? (/*#__PURE__*/React__default.createElement(ChevronIcon, {
     orientation: "down",
-    size: IconSizes$4[size],
+    widthHeight: IconSizes$4[size],
     color: IconColor,
-    style: styles['icon']
+    style: views['icon']
   })) : (/*#__PURE__*/React__default.createElement(ChevronIcon, {
     orientation: "up",
-    size: IconSizes$4[size],
+    widthHeight: IconSizes$4[size],
     color: IconColor,
-    style: styles['icon']
+    style: views['icon']
   })))), !hide && (/*#__PURE__*/React__default.createElement(DropDown$1, {
     size: size,
-    styles: styles,
+    views: views,
     options: newOptions,
     callback: handleCallback
   })));
@@ -6054,7 +6035,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__default.createElement(appStudio.Input, Object.assign({
   type: "date"
 }, props));
@@ -6069,8 +6050,7 @@ var DatePickerView = _ref => {
       size = 'md',
       variant = 'default',
       shape = 'default',
-      colorScheme = 'theme.primary',
-      styles = {
+      views = {
         box: {},
         label: {},
         helperText: {},
@@ -6118,34 +6098,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__default.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
-    styles: styles
+    views: views
   }, /*#__PURE__*/React__default.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
     shape: shape,
-    styles: styles,
+    views: views,
     shadow: shadow,
+    color: 'theme.primary',
     variant: variant,
     value: date,
-    color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
     isFocused: isFocused,
     isWithLabel: isWithLabel,
-    colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
   }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: colorScheme,
+    color: 'theme.primary',
     error: error
-  }, styles), label)), /*#__PURE__*/React__default.createElement(DatePickerContent, Object.assign({
+  }, views), label)), /*#__PURE__*/React__default.createElement(DatePickerContent, Object.assign({
     id: id,
     name: name,
     onFocus: handleFocus,
@@ -6181,10 +6160,10 @@ var _excluded$p = ["visibleIcon", "hiddenIcon"],
 var PasswordComponent = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
-        size: 14
+        widthHeight: 14
       }),
       hiddenIcon = /*#__PURE__*/React__default.createElement(CloseEyeIcon, {
-        size: 14
+        widthHeight: 14
       })
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
@@ -6241,7 +6220,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 {
@@ -6261,7 +6240,7 @@ var ComboBoxView = _ref => {
       searchQuery,
       setSearchQuery,
       setFilteredItems,
-      styles,
+      views,
       isDropdownVisible,
       setIsDropdownVisible
       // Collects all further props not destructured explicitly.
@@ -6304,7 +6283,7 @@ var ComboBoxView = _ref => {
     alignItems: "center",
     width: "100%"
   }, props), label && (/*#__PURE__*/React__default.createElement(Text, {
-    styles: styles == null ? void 0 : styles.label,
+    views: views == null ? void 0 : views.label,
     htmlFor: props.id
   }, label)), /*#__PURE__*/React__default.createElement(View, {
     position: "relative"
@@ -6319,16 +6298,16 @@ var ComboBoxView = _ref => {
     justifyContent: "space-between",
     minWidth: 300,
     flexWrap: "nowrap"
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+  }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
     gap: 15,
     alignItems: "center",
     position: "relative",
     width: "100%",
     onClick: () => setIsDropdownVisible(!isDropdownVisible)
-  }, styles == null ? void 0 : styles.labelContainer), left, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+  }, views == null ? void 0 : views.labelContainer), left, /*#__PURE__*/React__default.createElement(Text, Object.assign({
     weight: "medium",
     flexGrow: 1
-  }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(View, Object.assign({
+  }, views == null ? void 0 : views.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(View, Object.assign({
     id: "combobox-dropdown",
     position: "absolute",
     backgroundColor: "white",
@@ -6341,7 +6320,7 @@ var ComboBoxView = _ref => {
     transform: "translateY(100%)",
     marginTop: "4px",
     borderRadius: "4px"
-  }, styles == null ? void 0 : styles.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
+  }, views == null ? void 0 : views.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
     id: props.id,
     name: props.name,
     width: "100%",
@@ -6351,14 +6330,14 @@ var ComboBoxView = _ref => {
     hint: placeholder,
     isClearable: false,
     left: /*#__PURE__*/React__default.createElement(SearchIcon, {
-      size: 12
+      widthHeight: 12
     }),
-    styles: {
+    views: {
       box: Object.assign({
         width: '100%',
         padding: '6px 12px',
         borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
-      }, styles == null ? void 0 : styles.text)
+      }, views == null ? void 0 : views.text)
     }
   })), filteredItems.length > 0 && (/*#__PURE__*/React__default.createElement(View, {
     margin: 0,
@@ -6372,8 +6351,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__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(TickIcon, {
-    size: 20
+  }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(TickIcon, {
+    widthHeight: 20
   }))))))))))));
 };
 
@@ -6637,10 +6616,10 @@ var _excluded$w = ["visibleIcon", "hiddenIcon"],
 var PasswordComponent$1 = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
-        size: 14
+        widthHeight: 14
       }),
       hiddenIcon = /*#__PURE__*/React__default.createElement(CloseEyeIcon, {
-        size: 14
+        widthHeight: 14
       })
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
@@ -6699,12 +6678,12 @@ var useMessageStore = /*#__PURE__*/zustand.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 = '';
     }
@@ -6717,7 +6696,7 @@ var useMessageStore = /*#__PURE__*/zustand.create(set => ({
       title,
       subtitle,
       isClosable,
-      styles,
+      views,
       action,
       actionText,
       showIcon,
@@ -6729,7 +6708,7 @@ var useMessageStore = /*#__PURE__*/zustand.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();
@@ -6807,7 +6786,7 @@ var Themes$1 = {
 };
 
 var MessageView = _ref => {
-  var _styles$closingIcon, _styles$closingIcon2;
+  var _views$closingIcon, _views$closingIcon2;
   var {
     variant,
     hide,
@@ -6819,7 +6798,7 @@ var MessageView = _ref => {
     showIcon = false,
     isClosable = false,
     timeout = 3000,
-    styles
+    views
   } = _ref;
   React.useEffect(() => {
     if (timeout && !isClosable) {
@@ -6849,21 +6828,21 @@ var MessageView = _ref => {
   }[variant];
   var iconComponent = {
     info: /*#__PURE__*/React__default.createElement(InfoIcon, Object.assign({
-      size: 24,
+      widthHeight: 24,
       color: iconColor
-    }, styles == null ? void 0 : styles.icon)),
-    success: /*#__PURE__*/React__default.createElement(SuccessIcon, Object.assign({
-      size: 24,
+    }, views == null ? void 0 : views.icon)),
+    success: (/*#__PURE__*/React__default.createElement(SuccessIcon, Object.assign({
+      widthHeight: 24,
       color: iconColor
-    }, styles == null ? void 0 : styles.icon)),
-    warning: /*#__PURE__*/React__default.createElement(WarningIcon, Object.assign({
-      size: 24,
+    }, views == null ? void 0 : views.icon))),
+    warning: (/*#__PURE__*/React__default.createElement(WarningIcon, Object.assign({
+      widthHeight: 24,
       color: iconColor
-    }, styles == null ? void 0 : styles.icon)),
+    }, views == null ? void 0 : views.icon))),
     error: /*#__PURE__*/React__default.createElement(ErrorIcon, Object.assign({
-      size: 24,
+      widthHeight: 24,
       color: iconColor
-    }, styles == null ? void 0 : styles.icon))
+    }, views == null ? void 0 : views.icon))
   }[variant];
   var isShowIcon = showIcon && iconComponent;
   return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
@@ -6880,20 +6859,20 @@ var MessageView = _ref => {
     onClick: isClosable ? () => {} : () => {
       hide();
     }
-  }, containerStyle, styles == null ? void 0 : styles.container), isShowIcon && iconComponent, /*#__PURE__*/React__default.createElement(Vertical, {
+  }, containerStyle, views == null ? void 0 : views.container), isShowIcon && iconComponent, /*#__PURE__*/React__default.createElement(Vertical, {
     gap: 8,
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "md",
     weight: "semiBold"
-  }, styles == null ? void 0 : styles.title), title), subtitle && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+  }, views == null ? void 0 : views.title), title), subtitle && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "sm"
-  }, styles == null ? void 0 : styles.subtitle), subtitle))), isWithAction && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+  }, views == null ? void 0 : views.subtitle), subtitle))), isWithAction && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     marginRight: 10,
     onClick: action,
     padding: "6px 10px",
     whiteSpace: "nowrap"
-  }, containerStyle, styles == null ? void 0 : styles.actionText), actionText)), isClosable && (/*#__PURE__*/React__default.createElement(View, Object.assign({
+  }, containerStyle, views == null ? void 0 : views.actionText), actionText)), isClosable && (/*#__PURE__*/React__default.createElement(View, Object.assign({
     position: "absolute",
     zIndex: 10000,
     right: 8,
@@ -6901,10 +6880,10 @@ var MessageView = _ref => {
     onClick: () => {
       hide();
     }
-  }, styles == null || (_styles$closingIcon = styles.closingIcon) == null ? void 0 : _styles$closingIcon.container), /*#__PURE__*/React__default.createElement(CloseIcon, Object.assign({
-    size: 18,
+  }, views == null || (_views$closingIcon = views.closingIcon) == null ? void 0 : _views$closingIcon.container), /*#__PURE__*/React__default.createElement(CloseIcon, Object.assign({
+    widthHeight: 18,
     color: iconColor
-  }, styles == null || (_styles$closingIcon2 = styles.closingIcon) == null ? void 0 : _styles$closingIcon2.icon)))));
+  }, views == null || (_views$closingIcon2 = views.closingIcon) == null ? void 0 : _views$closingIcon2.icon)))));
 };
 
 var MessageLayout = _ref => {
@@ -6919,7 +6898,7 @@ var MessageLayout = _ref => {
     variant,
     subtitle,
     isClosable,
-    styles,
+    views,
     action,
     actionText,
     showIcon,
@@ -6951,7 +6930,7 @@ var MessageLayout = _ref => {
     title: title,
     theme: theme,
     isClosable: isClosable,
-    styles: styles,
+    views: views,
     action: action,
     actionText: actionText,
     showIcon: showIcon,
@@ -7054,16 +7033,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,
@@ -7071,120 +7056,108 @@ var Uploader = _ref2 => {
     imageProps,
     iconProps,
     textProps,
-    renderError = _ref3 => {
+    fileType,
+    previewUrl: externalPreviewUrl,
+    renderError = _ref2 => {
       var {
         errorMessage,
         errorMessageProps
-      } = _ref3;
+      } = _ref2;
       return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         color: "red",
         fontSize: 12,
         marginTop: 8
-      }, errorMessageProps), errorMessage);
+      }, errorMessageProps, views == null ? void 0 : views.text), errorMessage);
     },
-    renderText = _ref4 => {
+    renderText = _ref3 => {
       var {
         text,
         textProps
-      } = _ref4;
+      } = _ref3;
       return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         marginTop: 8
-      }, textProps), text);
+      }, textProps, views == null ? void 0 : views.text), text);
     },
-    renderFile = _ref5 => {
+    renderFile = _ref4 => {
       var {
         selectedFile,
         textProps
-      } = _ref5;
-      return /*#__PURE__*/React__default.createElement(Center, {
+      } = _ref4;
+      return selectedFile ? (/*#__PURE__*/React__default.createElement(Center, Object.assign({
         marginTop: 8,
         gap: 10,
         flexDirection: "column"
-      }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         maxLines: 2
-      }, textProps), selectedFile.name), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, textProps), "(", Math.round(selectedFile.size / 1024), " KB)"));
+      }, textProps, views == null ? void 0 : views.text), selectedFile.name), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, textProps, views == null ? void 0 : views.text), "(", Math.round(selectedFile.size / 1024), " KB)"))) : null;
     },
-    renderVideo = _ref6 => {
+    renderVideo = _ref5 => {
       var {
         selectedFile,
         thumbnailUrl,
         videoRef,
         videoProps,
         imageProps
-      } = _ref6;
-      console.log('thumbnailUrl', thumbnailUrl);
-      return /*#__PURE__*/React__default.createElement(appStudio.View, {
+      } = _ref5;
+      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
         width: "100%",
         height: "100%",
         position: "relative"
-      }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      }, views == null ? void 0 : views.view), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
         as: "video",
-        width: 0,
-        height: 0,
-        src: selectedFile == null ? void 0 : selectedFile.name,
+        width: "100%",
+        height: "100%",
+        src: selectedFile ? URL.createObjectURL(selectedFile) : undefined,
         style: {
           objectFit: 'cover'
         },
         ref: videoRef
-      }, videoProps)), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
+      }, videoProps, views == null ? void 0 : views.view)), thumbnailUrl && (/*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
         src: thumbnailUrl,
         alt: "Video Thumbnail",
         width: "100%",
         height: "100%",
         objectFit: "cover"
-      }, imageProps)));
+      }, imageProps, views == null ? void 0 : views.image))));
     },
-    renderImage = _ref7 => {
+    renderImage = _ref6 => {
       var {
         previewUrl,
         imageProps
-      } = _ref7;
+      } = _ref6;
       return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
         src: previewUrl,
         alt: "Preview",
         width: "100%",
         height: "100%",
         objectFit: "cover"
-      }, imageProps));
+      }, imageProps, views == null ? void 0 : views.image));
     },
-    renderProgress = _ref8 => {
+    renderProgress = _ref7 => {
       var {
         progress,
         progressProps
-      } = _ref8;
+      } = _ref7;
       return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
         gap: 8,
         alignItems: "center"
-      }, progressProps), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      }, progressProps, views == null ? void 0 : views.horizontal), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
         height: 4,
         backgroundColor: "rgba(0,0,0,0.1)",
         width: "100%",
         borderRadius: 2
-      }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+      }, views == null ? void 0 : views.view), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
         height: 4,
         width: progress + "%",
-        borderRadius: 2
-      })), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+        borderRadius: 2,
+        backgroundColor: "#000"
+      }, views == null ? void 0 : views.view))), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         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';
+      }, views == null ? void 0 : views.text), progress, "%"));
+    },
+    views = {}
+  } = _ref;
+  var finalPreviewUrl = externalPreviewUrl || previewUrl;
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({
     onClick: handleClick,
     cursor: "pointer",
@@ -7194,29 +7167,30 @@ var Uploader = _ref2 => {
     flexDirection: "column",
     overflow: "hidden",
     position: "relative"
-  }, containerProps), progress == 100 && fileType == 'image' && previewUrl && renderImage({
-    previewUrl,
+  }, containerProps, views == null ? void 0 : views.container), progress === 100 && fileType === 'image' && finalPreviewUrl && renderImage({
+    previewUrl: finalPreviewUrl,
     imageProps
-  }), progress == 100 && fileType == 'video' && thumbnailUrl && renderVideo({
+  }), progress === 100 && fileType === 'video' && thumbnailUrl && renderVideo({
+    selectedFile,
     thumbnailUrl,
     videoRef,
     videoProps,
-    iconProps
-  }), progress == 100 && fileType == 'file' && previewUrl && renderFile({
+    imageProps
+  }), progress === 100 && fileType === 'file' && selectedFile && renderFile({
     selectedFile,
     textProps
   }), progress < 100 && (icon || /*#__PURE__*/React__default.createElement(UploadIcon, Object.assign({
-    size: 32
+    widthHeight: 32
   }, iconProps))), !selectedFile && text && renderText({
     text,
     textProps
   }), isLoading && renderProgress({
     progress,
     progressProps
-  }), renderError({
+  }), errorMessage && renderError({
     errorMessage,
     errorMessageProps
-  }), /*#__PURE__*/React__default.createElement(appStudio.View, {
+  }), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     as: "input",
     type: "file",
     ref: fileInputRef,
@@ -7225,7 +7199,55 @@ var Uploader = _ref2 => {
     style: {
       display: 'none'
     }
-  }));
+  }, views == null ? void 0 : views.view)));
+};
+
+var _excluded$y = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress"];
+var Uploader = _ref => {
+  var {
+      accept = '*/*',
+      icon,
+      text,
+      maxSize,
+      onFileSelect,
+      validateFile,
+      isLoading = false,
+      progress = 0
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+  var {
+    previewUrl,
+    thumbnailUrl,
+    errorMessage,
+    videoRef,
+    fileInputRef,
+    selectedFile,
+    handleFileChange,
+    handleClick
+  } = useUpload({
+    accept,
+    maxSize,
+    onFileSelect,
+    validateFile
+  });
+  return /*#__PURE__*/React__default.createElement(UploadView, Object.assign({
+    handleClick: handleClick,
+    accept: accept,
+    isLoading: isLoading,
+    progress: progress,
+    icon: icon,
+    text: text,
+    maxSize: maxSize,
+    onFileSelect: onFileSelect,
+    validateFile: validateFile,
+    errorMessage: errorMessage,
+    handleFileChange: handleFileChange,
+    selectedFile: selectedFile,
+    videoRef: videoRef,
+    fileInputRef: fileInputRef,
+    previewUrl: previewUrl,
+    thumbnailUrl: thumbnailUrl
+  }, props));
 };
 
 var useModalStore = /*#__PURE__*/zustand.create(set => ({
@@ -7329,11 +7351,11 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$y = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
-  _excluded2$7 = ["children", "shadow", "isFullScreen", "shape"],
-  _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition"],
-  _excluded4$3 = ["children"],
-  _excluded5$1 = ["children"];
+var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
+  _excluded2$7 = ["children", "shadow", "isFullScreen", "shape", "views"],
+  _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
+  _excluded4$3 = ["children", "views"],
+  _excluded5$1 = ["children", "views"];
 var ModalOverlay = _ref => {
   var {
       children,
@@ -7341,13 +7363,14 @@ var ModalOverlay = _ref => {
       isOpen = false,
       isClosePrevented = false,
       onClose = () => {},
-      position = 'center'
+      position = 'center',
+      views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
-  return /*#__PURE__*/React__default.createElement(Center, {
+  return /*#__PURE__*/React__default.createElement(Layout.Center, Object.assign({
     position: "fixed",
     top: 0,
     left: 0,
@@ -7356,7 +7379,7 @@ var ModalOverlay = _ref => {
     zIndex: 1000,
     onClick: handleClick,
     visibility: isOpen ? 'visible' : 'hidden'
-  }, /*#__PURE__*/React__default.createElement(View, Object.assign({
+  }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     position: "absolute",
     top: 0,
     left: 0,
@@ -7367,14 +7390,15 @@ var ModalOverlay = _ref => {
     backgroundColor: "color.blackAlpha.500",
     backdropFilter: blur ? "blur(" + blur + "px)" : undefined,
     onClick: handleClick
-  }, OverlayAlignments[position], props), children));
+  }, OverlayAlignments[position], props, views == null ? void 0 : views.view), children));
 };
 var ModalContainer = _ref2 => {
   var {
       children,
       shadow,
       isFullScreen = false,
-      shape = 'rounded'
+      shape = 'rounded',
+      views
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
   var defaultShadow = typeof document !== undefined ? {
@@ -7392,28 +7416,28 @@ var ModalContainer = _ref2 => {
   var handleClick = event => {
     if (event && event.stopPropagation) event.stopPropagation();
   };
-  return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
+  return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
     cursor: "default",
     backgroundColor: "white",
     width: isFullScreen ? '100%' : 600,
     height: isFullScreen ? '100%' : 'fit-content',
     onClick: handleClick
-  }, shadow ? shadow : defaultShadow, ContainerShapes[shape], props), children);
+  }, shadow ? shadow : defaultShadow, ContainerShapes[shape], props, views == null ? void 0 : views.container), children);
 };
 var ModalHeader = _ref3 => {
   var {
       children,
       buttonColor = 'theme.primary',
       iconSize = 'md',
-      buttonPosition = 'right'
+      buttonPosition = 'right',
+      views
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
   var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = /*#__PURE__*/React__default.createElement(Button, {
     onClick: onClose,
-    colorScheme: "transparent",
     icon: /*#__PURE__*/React__default.createElement(CloseIcon, {
-      size: HeaderIconSizes[iconSize],
+      widthHeight: HeaderIconSizes[iconSize],
       color: buttonColor
     }),
     padding: 0,
@@ -7421,16 +7445,17 @@ var ModalHeader = _ref3 => {
     filter: "none",
     width: 0
   });
-  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+  return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',
     alignItems: "center",
     paddingVertical: 15,
     paddingHorizontal: 20
-  }, props), buttonPosition === 'left' && buttonIcon, children, buttonPosition === 'right' && buttonIcon);
+  }, props, views == null ? void 0 : views.header), buttonPosition === 'left' && buttonIcon, children, buttonPosition === 'right' && buttonIcon);
 };
 var ModalBody = _ref4 => {
   var {
-      children
+      children,
+      views
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
   var defaultBorder = {
@@ -7439,23 +7464,24 @@ var ModalBody = _ref4 => {
     borderColor: 'rgba(250, 250, 250, 1)',
     borderStyle: 'solid'
   };
-  return /*#__PURE__*/React__default.createElement(View, Object.assign({
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     paddingVertical: 15,
     paddingHorizontal: 20
-  }, defaultBorder, props), children);
+  }, defaultBorder, props, views == null ? void 0 : views.view), children);
 };
 var ModalFooter = _ref5 => {
   var {
-      children
+      children,
+      views
     } = _ref5,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded5$1);
-  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+  return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     marginTop: "auto",
     alignItems: "center",
     justifyContent: "flex-end",
     paddingVertical: 15,
     paddingHorizontal: 20
-  }, props), children);
+  }, props, views == null ? void 0 : views.container), children);
 };
 
 var ModalLayout = _ref => {
@@ -7512,14 +7538,14 @@ Modal.Layout = ModalLayout;
 
 var defaultStyles = {};
 // Create a context that includes both styles and the onClick function
-var TableContext = /*#__PURE__*/React__default.createContext({
-  styles: defaultStyles,
+var TableContext = /*#__PURE__*/React.createContext({
+  views: defaultStyles,
   onRowClick: () => {}
 });
 var TableProvider = _ref => {
   var {
     children,
-    styles = defaultStyles,
+    views = defaultStyles,
     onRowClick
   } = _ref;
   return (
@@ -7527,93 +7553,93 @@ var TableProvider = _ref => {
     // Pass both styles and onClick to the context
     React__default.createElement(TableContext.Provider, {
       value: {
-        styles,
+        views,
         onRowClick
       }
     }, children)
   );
 };
 // Custom hook to consume the context and get the styles and onClick handler
-var useTableContext = () => React__default.useContext(TableContext);
+var useTableContext = () => React.useContext(TableContext);
 
 var TableContainer = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "table",
     borderCollapse: "collapse"
-  }, styles.table, props));
+  }, views == null ? void 0 : views.table, props));
 };
 var TableHead = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "thead",
     borderBottom: "0.5px solid #ddd",
     textAlign: "left",
     color: "color.gray.400"
-  }, styles.thead, props));
+  }, views == null ? void 0 : views.thead, props));
 };
 var TableHeadCell = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "th",
     padding: "14px",
     whiteSpace: "nowrap",
     fontWeight: "500"
-  }, styles.th, props));
+  }, views == null ? void 0 : views.th, props));
 };
 var TableRow = props => {
   var {
-    styles,
+    views,
     onRowClick
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "tr"
-  }, styles.tr, {
+  }, views == null ? void 0 : views.tr, {
     onClick: onRowClick
   }, props));
 };
 var TableCell = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "td",
     padding: "14px",
     whiteSpace: "nowrap",
     fontWeight: props.isFirstColumn ? '400' : '300'
-  }, styles.td, props));
+  }, views == null ? void 0 : views.td, props));
 };
 var TableBody = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "tbody"
-  }, styles.tbody, props));
+  }, views == null ? void 0 : views.tbody, props));
 };
 var TableFooter = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "tfoot"
-  }, styles.tfoot, props));
+  }, views == null ? void 0 : views.tfoot, props));
 };
 var TableCaption = props => {
   var {
-    styles
+    views
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "caption",
     margin: '10px 0',
     color: "color.gray.400"
-  }, styles.caption, props));
+  }, views == null ? void 0 : views.caption, props));
 };
 var TableView = _ref => {
   var {
@@ -7639,11 +7665,11 @@ var TableView = _ref => {
 var Table = _ref => {
   var {
     children,
-    styles,
+    views,
     onClick
   } = _ref;
   return /*#__PURE__*/React__default.createElement(TableProvider, {
-    styles: styles,
+    views: views,
     onRowClick: onClick
   }, children);
 };
@@ -7710,7 +7736,7 @@ var TabsView = _ref => {
     // Default to empty array
     activeTab,
     handleTabClick,
-    styles = {},
+    views = {},
     // Default to empty object
     renderTab,
     renderContent
@@ -7718,7 +7744,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 (
@@ -7727,7 +7753,7 @@ var TabsView = _ref => {
     React__default.createElement(Vertical, Object.assign({
       width: "100%",
       height: '100%'
-    }, styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({}, styles.headerTabs), tabs.map(tab => {
+    }, views.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({}, views.headerTabs), tabs.map(tab => {
       // Determine if the current tab in the loop is the active one
       var isActive = tab.title === activeTab.title;
       // Prepare the onClick handler for this specific tab
@@ -7742,17 +7768,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__default.createElement(Text
       // Apply base title styles and merge activeText styles if this tab is active
-      , Object.assign({}, styles.title, isActive ? styles.activeText : {}), tab.title));
+      , Object.assign({}, views.title, isActive ? views.activeText : {}), tab.title));
     })), /*#__PURE__*/React__default.createElement(View, Object.assign({
       width: '100%',
       height: "100%"
-    }, styles.content), renderContent ? renderContent(activeTab) :
+    }, views.content), renderContent ? renderContent(activeTab) :
     // Otherwise, render the content property from the active tab object
     activeTab.content))
   );
@@ -7765,7 +7791,7 @@ var TabsView = _ref => {
 var TabsComponent = _ref => {
   var {
     tabs,
-    styles,
+    views,
     initialTabValue,
     onTabChange,
     renderTab,
@@ -7790,7 +7816,7 @@ var TabsComponent = _ref => {
   // Render the presentation component with the necessary props
   return /*#__PURE__*/React__default.createElement(TabsView, {
     tabs: tabs,
-    styles: styles,
+    views: views,
     activeTab: activeTab,
     handleTabClick: handleTabClick,
     renderTab: renderTab,
@@ -7815,34 +7841,28 @@ 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", "views"];
 var ToggleView = _ref => {
   var {
       children,
       shape = 'rounded',
-      colorScheme = 'color.trueGray.400',
       variant = 'ghost',
       isHovered,
       setIsHovered,
       isDisabled,
       isToggle,
       setIsToggled,
-      onToggle
+      onToggle,
+      views
     } = _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,
@@ -7852,6 +7872,7 @@ var ToggleView = _ref => {
     },
     ghost: {}
   };
+  var handleHover = () => setIsHovered(!isHovered);
   var handleToggle = () => {
     if (!isDisabled) {
       setIsToggled(prev => {
@@ -7869,28 +7890,27 @@ var ToggleView = _ref => {
     width: "fit-content",
     color: isActive ? 'color.white' : toggleColor,
     backgroundColor: isActive ? toggleColor : 'transparent',
-    onMouseEnter: () => setIsHovered(true),
+    onMouseEnter: handleHover,
     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, views == null ? void 0 : views.container), 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,
@@ -7905,7 +7925,6 @@ var ToggleComponent = _ref => {
   // Beginning of the JSX block to render the Toggle view component.
   return /*#__PURE__*/React__default.createElement(ToggleView, Object.assign({
     shape: shape,
-    colorScheme: colorScheme,
     variant: variant,
     isDisabled: isDisabled,
     isHovered: isHovered,
@@ -7941,8 +7960,7 @@ var ToggleGroupView = _ref => {
     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'
+    views
   } = _ref;
   // handleToggle is a memoized callback that handles the toggle state changes.
   var handleToggle = React.useCallback((id, isActive) => {
@@ -7957,19 +7975,19 @@ var ToggleGroupView = _ref => {
       return newActiveToggles;
     });
   }, [onToggleChange, setActiveToggles]);
-  return /*#__PURE__*/React__default.createElement(Horizontal, {
+  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
     role: "ToggleGroup",
     display: "flex",
     gap: 5
-  }, items.map(item => (/*#__PURE__*/React__default.createElement(Toggle, {
+  }, views == null ? void 0 : views.container), items.map(item => (/*#__PURE__*/React__default.createElement(Toggle, {
     role: "toggle-" + item.id,
     key: item.id,
-    colorScheme: colorScheme,
     shape: shape,
     variant: variant,
     isToggled: activeToggles.includes(item.id) || item.isActive,
     onToggle: state => handleToggle(item.id, state),
-    isDisabled: item.isDisabled
+    isDisabled: item.isDisabled,
+    views: views == null ? void 0 : views.toggle
   }, item.value))));
 };
 
@@ -7980,8 +7998,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
@@ -7995,7 +8011,6 @@ var ToggleGroupComponent = _ref => {
   return /*#__PURE__*/React__default.createElement(ToggleGroupView, {
     items: items,
     shape: shape,
-    colorScheme: colorScheme,
     variant: variant,
     activeToggles: activeToggles,
     setActiveToggles: setActiveToggles,
@@ -8101,12 +8116,13 @@ var DragAndDropView = _ref => {
     itemProps,
     draggedIndex,
     itemRefs,
-    handleDragStart
+    handleDragStart,
+    views
   } = _ref;
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     overflow: "hidden",
     position: "relative"
-  }, containerProps), items.map((item, index) => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  }, containerProps, views == null ? void 0 : views.container), items.map((item, index) => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     key: index,
     ref: el => itemRefs.current[index] = el,
     onMouseDown: e => handleDragStart(e, index),
@@ -8115,7 +8131,7 @@ var DragAndDropView = _ref => {
     cursor: "grab",
     transition: "transform 0.2s",
     backgroundColor: draggedIndex === index ? 'color.gray.100' : 'transparent'
-  }, itemProps), renderItem ? renderItem(item, index) : item))));
+  }, itemProps, views == null ? void 0 : views.item), renderItem ? renderItem(item, index) : item))));
 };
 
 var DragAndDropComponent = props => {
@@ -8249,12 +8265,10 @@ exports.WarningIcon = WarningIcon;
 exports.WifiIcon = WifiIcon;
 exports.XIcon = XIcon;
 exports.YoutubeIcon = YoutubeIcon;
-exports.generateThumbnail = generateThumbnail;
 exports.hideMessage = hideMessage;
 exports.hideModal = hideModal;
 exports.showMessage = showMessage;
 exports.showModal = showModal;
 exports.useMessageStore = useMessageStore;
 exports.useModalStore = useModalStore;
-exports.useUpload = useUpload;
 //# sourceMappingURL=web.cjs.development.js.map