@app-studio/web 0.8.66 → 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: 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({
-    widthHeight: size,
+    widthHeight: widthHeight,
     color: color
   }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
@@ -1999,7 +2007,7 @@ var Themes = {
 
 // Defines AlertView as a functional component using destructuring to extract props.
 var AlertView = _ref => {
-  var _views$icon$color;
+  var _views$icon$color, _views$icon;
   var {
     icon,
     title,
@@ -2018,8 +2026,8 @@ var AlertView = _ref => {
   }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(View, {
     alignSelf: 'center'
   }, icon ? icon : (/*#__PURE__*/React__default.createElement(WarningIcon, {
-    size: 24,
-    color: (_views$icon$color = views == null ? void 0 : views.icon.color) != null ? _views$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({
@@ -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"];
@@ -2537,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',
@@ -2678,7 +2687,8 @@ var LoaderView = _ref4 => {
       loaderColor,
       type = 'default',
       speed = 'normal',
-      textPosition = 'right'
+      textPosition = 'right',
+      views
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
   var style = {
@@ -2694,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.
@@ -2709,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", "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;
@@ -2717,24 +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.
       shape = 'rounded',
       onClick = () => {},
       loaderProps = {},
@@ -2744,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 {
@@ -2764,7 +2765,6 @@ var ButtonView = _ref => {
   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,
@@ -2773,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 : 'theme.primary',
-      // Fetches size-specific styles from ButtonSizes based on the 'size' prop.
       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({})
@@ -2832,11 +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: '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.
@@ -2866,12 +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
+      color,
+      views
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
@@ -2886,11 +2881,11 @@ var FileSVG = _ref => {
       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 {
@@ -3410,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
   }));
 };
@@ -3521,13 +3516,13 @@ var SelectView = _ref7 => {
     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],
+    widthHeight: IconSizes$2[size],
     style: views.icon,
     orientation: "down"
   })) : (/*#__PURE__*/React__default.createElement(ChevronIcon, {
     color: "inherit",
     orientation: "up",
-    size: IconSizes$2[size],
+    widthHeight: IconSizes$2[size],
     style: views.icon
   })))))), !hide && (/*#__PURE__*/React__default.createElement(DropDown, {
     size: size,
@@ -4122,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));
@@ -4281,10 +4276,10 @@ var CheckboxView = _ref => {
   }, labelPosition === 'left' && label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: size
   }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? (/*#__PURE__*/React__default.createElement(MinusIcon, {
-    size: IconSizes$3[size],
+    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
@@ -5850,7 +5845,7 @@ var DropDown$1 = _ref4 => {
     views = {
       dropDown: {}
     },
-    options,
+    options = [],
     callback = () => {}
   } = _ref4;
   var handleCallback = option => callback(option);
@@ -6000,12 +5995,12 @@ 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: views['icon']
   })) : (/*#__PURE__*/React__default.createElement(ChevronIcon, {
     orientation: "up",
-    size: IconSizes$4[size],
+    widthHeight: IconSizes$4[size],
     color: IconColor,
     style: views['icon']
   })))), !hide && (/*#__PURE__*/React__default.createElement(DropDown$1, {
@@ -7072,7 +7067,7 @@ var UploadView = _ref => {
         color: "red",
         fontSize: 12,
         marginTop: 8
-      }, errorMessageProps), errorMessage);
+      }, errorMessageProps, views == null ? void 0 : views.text), errorMessage);
     },
     renderText = _ref3 => {
       var {
@@ -7081,20 +7076,20 @@ var UploadView = _ref => {
       } = _ref3;
       return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         marginTop: 8
-      }, textProps), text);
+      }, textProps, views == null ? void 0 : views.text), text);
     },
     renderFile = _ref4 => {
       var {
         selectedFile,
         textProps
       } = _ref4;
-      return selectedFile ? (/*#__PURE__*/React__default.createElement(Center, {
+      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)"))) : null;
+      }, 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 = _ref5 => {
       var {
@@ -7104,11 +7099,11 @@ var UploadView = _ref => {
         videoProps,
         imageProps
       } = _ref5;
-      return /*#__PURE__*/React__default.createElement(appStudio.View, {
+      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: "100%",
         height: "100%",
@@ -7117,13 +7112,13 @@ var UploadView = _ref => {
           objectFit: 'cover'
         },
         ref: videoRef
-      }, videoProps)), thumbnailUrl && (/*#__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 = _ref6 => {
       var {
@@ -7136,7 +7131,7 @@ var UploadView = _ref => {
         width: "100%",
         height: "100%",
         objectFit: "cover"
-      }, imageProps));
+      }, imageProps, views == null ? void 0 : views.image));
     },
     renderProgress = _ref7 => {
       var {
@@ -7146,20 +7141,21 @@ var UploadView = _ref => {
       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,
         backgroundColor: "#000"
-      })), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+      }, views == null ? void 0 : views.view))), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         fontSize: 12
-      }, progress, "%"));
-    }
+      }, views == null ? void 0 : views.text), progress, "%"));
+    },
+    views = {}
   } = _ref;
   var finalPreviewUrl = externalPreviewUrl || previewUrl;
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({
@@ -7171,7 +7167,7 @@ var UploadView = _ref => {
     flexDirection: "column",
     overflow: "hidden",
     position: "relative"
-  }, containerProps), progress === 100 && fileType === 'image' && finalPreviewUrl && renderImage({
+  }, containerProps, views == null ? void 0 : views.container), progress === 100 && fileType === 'image' && finalPreviewUrl && renderImage({
     previewUrl: finalPreviewUrl,
     imageProps
   }), progress === 100 && fileType === 'video' && thumbnailUrl && renderVideo({
@@ -7194,7 +7190,7 @@ var UploadView = _ref => {
   }), errorMessage && renderError({
     errorMessage,
     errorMessageProps
-  }), /*#__PURE__*/React__default.createElement(appStudio.View, {
+  }), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     as: "input",
     type: "file",
     ref: fileInputRef,
@@ -7203,7 +7199,7 @@ var UploadView = _ref => {
     style: {
       display: 'none'
     }
-  }));
+  }, views == null ? void 0 : views.view)));
 };
 
 var _excluded$y = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress"];
@@ -7355,11 +7351,11 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$z = ["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,
@@ -7367,13 +7363,14 @@ var ModalOverlay = _ref => {
       isOpen = false,
       isClosePrevented = false,
       onClose = () => {},
-      position = 'center'
+      position = 'center',
+      views
     } = _ref,
     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,
@@ -7382,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,
@@ -7393,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 ? {
@@ -7418,20 +7416,21 @@ 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;
@@ -7446,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 = {
@@ -7464,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 => {
@@ -7537,7 +7538,7 @@ Modal.Layout = ModalLayout;
 
 var defaultStyles = {};
 // Create a context that includes both styles and the onClick function
-var TableContext = /*#__PURE__*/React__default.createContext({
+var TableContext = /*#__PURE__*/React.createContext({
   views: defaultStyles,
   onRowClick: () => {}
 });
@@ -7559,7 +7560,7 @@ var TableProvider = _ref => {
   );
 };
 // 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 {
@@ -7568,7 +7569,7 @@ var TableContainer = props => {
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "table",
     borderCollapse: "collapse"
-  }, views.table, props));
+  }, views == null ? void 0 : views.table, props));
 };
 var TableHead = props => {
   var {
@@ -7579,7 +7580,7 @@ var TableHead = props => {
     borderBottom: "0.5px solid #ddd",
     textAlign: "left",
     color: "color.gray.400"
-  }, views.thead, props));
+  }, views == null ? void 0 : views.thead, props));
 };
 var TableHeadCell = props => {
   var {
@@ -7590,7 +7591,7 @@ var TableHeadCell = props => {
     padding: "14px",
     whiteSpace: "nowrap",
     fontWeight: "500"
-  }, views.th, props));
+  }, views == null ? void 0 : views.th, props));
 };
 var TableRow = props => {
   var {
@@ -7599,7 +7600,7 @@ var TableRow = props => {
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "tr"
-  }, views.tr, {
+  }, views == null ? void 0 : views.tr, {
     onClick: onRowClick
   }, props));
 };
@@ -7612,7 +7613,7 @@ var TableCell = props => {
     padding: "14px",
     whiteSpace: "nowrap",
     fontWeight: props.isFirstColumn ? '400' : '300'
-  }, views.td, props));
+  }, views == null ? void 0 : views.td, props));
 };
 var TableBody = props => {
   var {
@@ -7620,7 +7621,7 @@ var TableBody = props => {
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "tbody"
-  }, views.tbody, props));
+  }, views == null ? void 0 : views.tbody, props));
 };
 var TableFooter = props => {
   var {
@@ -7628,7 +7629,7 @@ var TableFooter = props => {
   } = useTableContext();
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "tfoot"
-  }, views.tfoot, props));
+  }, views == null ? void 0 : views.tfoot, props));
 };
 var TableCaption = props => {
   var {
@@ -7638,7 +7639,7 @@ var TableCaption = props => {
     as: "caption",
     margin: '10px 0',
     color: "color.gray.400"
-  }, views.caption, props));
+  }, views == null ? void 0 : views.caption, props));
 };
 var TableView = _ref => {
   var {
@@ -7840,7 +7841,7 @@ var useToggleState = defaultToggled => {
   };
 };
 
-var _excluded$A = ["children", "shape", "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,
@@ -7851,7 +7852,8 @@ var ToggleView = _ref => {
       isDisabled,
       isToggle,
       setIsToggled,
-      onToggle
+      onToggle,
+      views
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
@@ -7870,6 +7872,7 @@ var ToggleView = _ref => {
     },
     ghost: {}
   };
+  var handleHover = () => setIsHovered(!isHovered);
   var handleToggle = () => {
     if (!isDisabled) {
       setIsToggled(prev => {
@@ -7887,12 +7890,12 @@ 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: shape === 'pillShaped' ? '50px' : '8px',
     onClick: handleToggle
-  }, toggleVariants[variant], props), children);
+  }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
 };
 
 var _excluded$B = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
@@ -7956,7 +7959,8 @@ var ToggleGroupView = _ref => {
     // Prop 'shape' with default value 'rounded', determines the shape of the toggle buttons.
     shape = 'rounded',
     // Prop 'variant' with default value 'ghost' represents the visual style variant of the toggles.
-    variant = 'ghost'
+    variant = 'ghost',
+    views
   } = _ref;
   // handleToggle is a memoized callback that handles the toggle state changes.
   var handleToggle = React.useCallback((id, isActive) => {
@@ -7971,18 +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,
     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))));
 };
 
@@ -8111,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),
@@ -8125,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 => {