@app-studio/web 0.8.65 → 0.8.67

package/dist/web.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.symbol.description.js'), require('react'), require('core-js/modules/es.object.assign.js'), require('app-studio'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('react-router-dom'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('formik'), 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'), require('zustand')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.symbol.description.js', 'react', 'core-js/modules/es.object.assign.js', 'app-studio', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/web.dom-collections.iterator.js', 'react-router-dom', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, global.appStudio, null, null, null, global.reactRouterDom, null, null, null, global.format, global.formik, null, null, null, global.zustand));
-}(this, (function (exports, es_symbol_description_js, React, es_object_assign_js, appStudio, es_array_iterator_js, es_parseFloat_js, web_domCollections_iterator_js, reactRouterDom, es_array_includes_js, es_string_includes_js, es_string_startsWith_js, format, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.symbol.description.js'), require('react'), require('core-js/modules/es.object.assign.js'), require('app-studio'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('react-router-dom'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('formik'), 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'), require('zustand'), require('src/components/Layout')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.symbol.description.js', 'react', 'core-js/modules/es.object.assign.js', 'app-studio', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/web.dom-collections.iterator.js', 'react-router-dom', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'src/components/Layout'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, global.appStudio, null, null, null, global.reactRouterDom, null, null, null, global.format, global.formik, null, null, null, global.zustand, global.Layout));
+}(this, (function (exports, es_symbol_description_js, React, es_object_assign_js, appStudio, es_array_iterator_js, es_parseFloat_js, web_domCollections_iterator_js, reactRouterDom, es_array_includes_js, es_string_includes_js, es_string_startsWith_js, format, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, Layout) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   format = format && Object.prototype.hasOwnProperty.call(format, 'default') ? format['default'] : format;
@@ -68,19 +68,25 @@
     }
   };
 
-  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);
@@ -109,9 +115,9 @@
       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 {
@@ -124,7 +130,8 @@
         isSup = false,
         isStriked = false,
         weight = 'normal',
-        size = 'md'
+        size = 'md',
+        views
       } = _ref3,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded);
     var headingStyles = heading ? HeadingSizes[heading] : {};
@@ -138,13 +145,13 @@
       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 => {
@@ -209,74 +216,74 @@
   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',
@@ -284,8 +291,8 @@
       } = _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'
@@ -304,14 +311,14 @@
   // 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",
@@ -323,14 +330,14 @@
   };
   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",
@@ -365,14 +372,14 @@
   // 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",
@@ -393,14 +400,14 @@
   // 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",
@@ -426,14 +433,14 @@
   // 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",
@@ -465,14 +472,14 @@
   };
   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",
@@ -487,14 +494,14 @@
   };
   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",
@@ -510,14 +517,14 @@
   // 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",
@@ -538,14 +545,14 @@
   // 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",
@@ -567,14 +574,14 @@
   };
   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",
@@ -598,14 +605,14 @@
   };
   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",
@@ -626,14 +633,14 @@
   };
   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",
@@ -648,14 +655,14 @@
   };
   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"
@@ -674,14 +681,14 @@
   };
   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"
@@ -696,7 +703,7 @@
   // 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
@@ -704,7 +711,7 @@
       } = _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",
@@ -721,14 +728,14 @@
   // 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"
@@ -742,14 +749,14 @@
   };
   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",
@@ -761,14 +768,14 @@
   };
   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",
@@ -780,14 +787,14 @@
   };
   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",
@@ -799,14 +806,14 @@
   };
   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",
@@ -818,14 +825,14 @@
   };
   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",
@@ -841,14 +848,14 @@
   };
   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",
@@ -872,14 +879,14 @@
   };
   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",
@@ -891,14 +898,14 @@
   };
   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",
@@ -910,14 +917,14 @@
   };
   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",
@@ -929,14 +936,14 @@
   };
   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",
@@ -955,14 +962,14 @@
   };
   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",
@@ -974,14 +981,14 @@
   };
   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",
@@ -993,14 +1000,14 @@
   };
   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",
@@ -1026,14 +1033,14 @@
   };
   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",
@@ -1045,14 +1052,14 @@
   };
   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",
@@ -1080,14 +1087,14 @@
   };
   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",
@@ -1121,14 +1128,14 @@
   };
   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",
@@ -1142,14 +1149,14 @@
   };
   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",
@@ -1162,14 +1169,14 @@
   };
   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",
@@ -1233,14 +1240,14 @@
   };
   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",
@@ -1252,14 +1259,14 @@
   };
   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",
@@ -1271,14 +1278,14 @@
   };
   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",
@@ -1290,14 +1297,14 @@
   };
   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",
@@ -1316,14 +1323,14 @@
   };
   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",
@@ -1349,14 +1356,14 @@
   };
   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",
@@ -1368,14 +1375,14 @@
   };
   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",
@@ -1389,14 +1396,14 @@
   };
   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",
@@ -1408,14 +1415,14 @@
   };
   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",
@@ -1428,14 +1435,14 @@
   };
   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",
@@ -1447,14 +1454,14 @@
   };
   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",
@@ -1466,14 +1473,14 @@
   };
   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",
@@ -1485,14 +1492,14 @@
   };
   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",
@@ -1508,14 +1515,14 @@
   };
   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",
@@ -1531,14 +1538,14 @@
   };
   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",
@@ -1550,14 +1557,14 @@
   };
   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",
@@ -1569,14 +1576,14 @@
   };
   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",
@@ -1595,14 +1602,14 @@
   };
   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",
@@ -1614,14 +1621,14 @@
   };
   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",
@@ -1637,14 +1644,14 @@
   };
   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",
@@ -1656,14 +1663,14 @@
   };
   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",
@@ -1676,14 +1683,14 @@
   };
   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",
@@ -1695,14 +1702,14 @@
   };
   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",
@@ -1724,14 +1731,14 @@
   };
   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",
@@ -1745,14 +1752,14 @@
   };
   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",
@@ -1764,14 +1771,14 @@
   };
   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",
@@ -1789,14 +1796,14 @@
   };
   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",
@@ -1814,14 +1821,14 @@
   };
   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",
@@ -1922,7 +1929,7 @@
     CalendarIcon: CalendarIcon
   };
 
-  // Define a constant object 'Themes' exporting various theme styles.
+  // Define a constant object 'Themes' exporting various theme views.
   var Themes = {
     // Start of the 'default' theme definition with style properties.
     default: {
@@ -1935,7 +1942,7 @@
         color: 'color.blackAlpha.800'
       }
     },
-    // The 'info' theme with unique container and content styles.
+    // The 'info' theme with unique container and content views.
     info: {
       container: {
         backgroundColor: 'color.blue.200',
@@ -1946,7 +1953,7 @@
         color: '#60a5fa'
       }
     },
-    // Specifies the 'success' theme with corresponding container and content styles.
+    // Specifies the 'success' theme with corresponding container and content views.
     success: {
       container: {
         backgroundColor: 'color.green.200',
@@ -1957,7 +1964,7 @@
         color: '#22c55e'
       }
     },
-    // Start of the 'error' theme with its characteristic styles.
+    // Start of the 'error' theme with its characteristic views.
     error: {
       container: {
         backgroundColor: 'color.red.200',
@@ -1968,7 +1975,7 @@
         color: '#ef4444'
       }
     },
-    // Introduction of the 'warning' theme styles.
+    // Introduction of the 'warning' theme views.
     warning: {
       container: {
         backgroundColor: 'color.orange.200',
@@ -1983,11 +1990,11 @@
 
   // 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'
@@ -1999,20 +2006,20 @@
       borderStyle: "solid",
       padding: 16,
       flexWrap: "nowrap"
-    }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(View, {
+    }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(View, {
       alignSelf: 'center'
     }, icon ? icon : (/*#__PURE__*/React__default.createElement(WarningIcon, {
-      size: 24,
-      color: (_styles$icon$color = styles == null ? void 0 : styles.icon.color) != null ? _styles$icon$color : Themes[variant].content.color
+      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.
@@ -2020,14 +2027,14 @@
     var {
       icon,
       title,
-      styles,
+      views,
       description,
       variant
     } = _ref;
     return /*#__PURE__*/React__default.createElement(AlertView, {
       icon: icon,
       title: title,
-      styles: styles,
+      views: views,
       description: description,
       variant: variant
     });
@@ -2035,14 +2042,15 @@
   // 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);
@@ -2052,13 +2060,13 @@
       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"];
@@ -2101,7 +2109,7 @@
       src,
       size = 'md',
       fallback = 'IM',
-      styles,
+      views,
       imageError,
       setImageError,
       onClick = () => {}
@@ -2111,7 +2119,7 @@
     // Initiates a style object for the image with an objectFit property and spreads additional image styles if provided.
     var imageStyle = Object.assign({
       objectFit: 'cover'
-    }, (styles == null ? void 0 : styles.image) || {});
+    }, (views == null ? void 0 : views.image) || {});
     // Start of the JSX returned by the AvatarView component, which uses the Center component as its root element.
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
       role: "avatar",
@@ -2124,7 +2132,7 @@
       borderColor: imageError ? 'black' : 'transparent',
       boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
       onClick: onClick
-    }, styles == null ? void 0 : styles.container), !imageError ? (/*#__PURE__*/React__default.createElement(appStudio.Image, {
+    }, views == null ? void 0 : views.container), !imageError ? (/*#__PURE__*/React__default.createElement(appStudio.Image, {
       alt: "IM",
       src: src,
       style: imageStyle,
@@ -2133,7 +2141,7 @@
       onError: () => setImageError(true)
     })) : (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: size
-    }, styles == null ? void 0 : styles.fallback), fallback)));
+    }, views == null ? void 0 : views.fallback), fallback)));
   };
 
   // Defines the AvatarComponent functional component with destructured props from AvatarProps type.
@@ -2141,7 +2149,7 @@
     var {
       src,
       size,
-      styles,
+      views,
       fallback,
       onClick
     } = _ref;
@@ -2154,7 +2162,7 @@
     return /*#__PURE__*/React__default.createElement(AvatarView, {
       src: src,
       size: size,
-      styles: styles,
+      views: views,
       fallback: fallback,
       imageError: imageError,
       setImageError: setImageError,
@@ -2225,17 +2233,16 @@
     var {
       // Declaring the functional component BadgeView with BadgeProps as its type for props.
       content,
-      // Destructuring props with default values for shape, colorScheme, variant, size, and styles.
+      // Destructuring props with default values for shape, variant, size, and views.
       position,
       shape = 'pillShaped',
-      colorScheme = 'theme.primary',
       variant = 'filled',
       size = 'md',
-      styles
+      views
     } = _ref;
     var BadgeVariants = {
       filled: {
-        backgroundColor: colorScheme,
+        backgroundColor: 'theme.primary',
         color: 'color.white',
         borderWidth: 1,
         borderStyle: 'solid',
@@ -2246,23 +2253,23 @@
         backgroundColor: 'transparent',
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: colorScheme,
-        color: colorScheme
+        borderColor: 'theme.primary',
+        color: 'theme.primary'
       },
       link: {
         backgroundColor: 'transparent',
         // Rendering the Badge component using the Center layout component with combinedStyles applied.
         borderWidth: 1,
-        // Inserting a Text component into the badge to display the content, with dynamic size and additional text styles.
+        // Inserting a Text component into the badge to display the content, with dynamic size and additional text views.
         borderStyle: 'solid',
         borderColor: 'transparent',
-        color: colorScheme,
+        color: 'theme.primary',
         // Exporting BadgeView to be used in other parts of the application.
         textDecoration: 'underline'
       },
       ghost: {
         backgroundColor: 'transparent',
-        color: colorScheme,
+        color: 'color.trueGray.400',
         borderWidth: 1,
         borderStyle: 'solid',
         borderColor: 'transparent'
@@ -2271,13 +2278,13 @@
     var combinedStyles = Object.assign({
       width: 'fit-content',
       borderRadius: BadgeShapes[shape]
-    }, BadgeSizes[size], BadgeVariants[variant], position ? PositionStyles[position] : {}, styles == null ? void 0 : styles.container);
+    }, BadgeSizes[size], BadgeVariants[variant], position ? PositionStyles[position] : {}, views == null ? void 0 : views.container);
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
       role: "badge"
     }, combinedStyles), /*#__PURE__*/React__default.createElement(Text, Object.assign({
       role: "badgeText",
       size: size
-    }, styles == null ? void 0 : styles.text), content));
+    }, views == null ? void 0 : views.text), content));
   };
 
   // Importing type definitions for BadgeProps that will be used to type-check the Badge component's props.
@@ -2288,22 +2295,19 @@
       // Exporting the Badge as a functional component from this module.
       shape,
       // Destructuring the props in the component function parameter list, to directly access individual properties.
-      colorScheme,
-      // The functional component Badge is implicitly returning the BadgeView component.
       position,
       // Passing all the destructured props to the BadgeView component to maintain the same API surface.
       variant,
       size,
-      styles
+      views
     } = _ref;
     return /*#__PURE__*/React__default.createElement(BadgeView, {
       content: content,
       shape: shape,
-      colorScheme: colorScheme,
       position: position,
       variant: variant,
       size: size,
-      styles: styles
+      views: views
     });
   };
 
@@ -2342,7 +2346,7 @@
     '6xl': 64
   };
 
-  var _excluded$7 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
+  var _excluded$7 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "views", "setIsHovered"];
   // Component definition for 'LinkView', a functional component with props defined by 'LinkViewProps'.
   var LinkView = _ref => {
     var {
@@ -2358,7 +2362,7 @@
         // Boolean indicating if the link leads to an external resource.
         isExternal = false,
         // Custom styles for the icon and text, provided via a styles object.
-        styles = {
+        views = {
           icon: {},
           text: {}
         },
@@ -2377,12 +2381,12 @@
       onMouseEnter: handleHover,
       onMouseLeave: handleHover,
       textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
-    }, styles.text, props), /*#__PURE__*/React__default.createElement(Horizontal, {
+    }, views.text, props), /*#__PURE__*/React__default.createElement(Horizontal, {
       gap: 3,
       alignItems: "center",
       flexWrap: "nowrap"
     }, children, isExternal && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
-      size: IconSizes[iconSize]
+      widthHeight: IconSizes[iconSize]
     }))));
   };
 
@@ -2525,7 +2529,7 @@
   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',
@@ -2666,7 +2670,8 @@
         loaderColor,
         type = 'default',
         speed = 'normal',
-        textPosition = 'right'
+        textPosition = 'right',
+        views
       } = _ref4,
       props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
     var style = {
@@ -2682,11 +2687,11 @@
     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.
@@ -2697,7 +2702,7 @@
   // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
   var Loader = LoaderComponent;
 
-  var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "containerProps", "linkProps"];
+  var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "containerProps", "linkProps", "views"];
   var contrast = /*#__PURE__*/require('contrast');
   var ButtonView = _ref => {
     var _props$onClick;
@@ -2705,25 +2710,16 @@
         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 = {},
@@ -2733,9 +2729,8 @@
         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 {
@@ -2747,13 +2742,12 @@
     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,
@@ -2762,42 +2756,36 @@
       },
       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({})
@@ -2821,12 +2809,11 @@
     }, 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.
@@ -2856,13 +2843,13 @@
   };
   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 {
@@ -2870,14 +2857,18 @@
       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 {
@@ -2934,11 +2925,11 @@
     };
   };
 
-  var _excluded$b = ["children", "styles"];
+  var _excluded$b = ["children", "views"];
   var HelperText = _ref => {
     var {
         children,
-        styles = {
+        views = {
           helperText: {}
         }
       } = _ref,
@@ -2948,22 +2939,22 @@
       marginVertical: 0,
       marginHorizontal: 0,
       color: 'theme.text.dark'
-    }, styles['helperText'], props), children);
+    }, views['helperText'], props), children);
   };
 
-  var _excluded$c = ["children", "helperText", "error", "styles"];
+  var _excluded$c = ["children", "helperText", "error", "views"];
   var FieldContainer = _ref => {
     var {
         children,
         helperText,
         error = false,
-        styles
+        views
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
     return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
       gap: 5,
       position: "relative"
-    }, props), children, !error && helperText && /*#__PURE__*/React__default.createElement(HelperText, Object.assign({}, styles), helperText), error && (/*#__PURE__*/React__default.createElement(Text, {
+    }, props), children, !error && helperText && /*#__PURE__*/React__default.createElement(HelperText, Object.assign({}, views), helperText), error && (/*#__PURE__*/React__default.createElement(Text, {
       size: "xs",
       marginVertical: 0,
       marginHorizontal: 0,
@@ -3018,7 +3009,7 @@
     paddingRight: 16
   };
 
-  var _excluded$d = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+  var _excluded$d = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "views"];
   var FieldContent = _ref => {
     var {
         shadow,
@@ -3032,14 +3023,13 @@
         isHovered = false,
         isDisabled = false,
         isReadOnly = false,
-        colorScheme = 'theme.primary',
-        styles = {
+        views = {
           pickerBox: {}
         }
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
     var isInteractive = (isHovered || isFocused) && !isDisabled;
-    var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
+    var color = error ? 'error' : isInteractive ? 'theme.primary' : 'midgray';
     return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
       gap: 10,
       width: "100%",
@@ -3055,7 +3045,7 @@
       fontSize: appStudio.Typography.fontSizes[size],
       // filter={isHovered ?  'brightness(1)':'brightness(0.97)'}
       cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
-    }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
+    }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], views['box'], props), children);
   };
 
   var _excluded$e = ["children"];
@@ -3103,13 +3093,13 @@
     },
     h5: {
       fontSize: 24,
-      // Set the 'h5' heading tag styles, opting for no additional letter spacing.
+      // Set the 'h5' heading tag views, opting for no additional letter spacing.
       lineHeight: 28,
       letterSpacing: 0
     },
     h6: {
       fontSize: 20,
-      // Set the 'h6' heading tag styles, with the smallest font size and a subtle letter spacing.
+      // Set the 'h6' heading tag views, with the smallest font size and a subtle letter spacing.
       lineHeight: 24,
       letterSpacing: 0.15
     }
@@ -3163,14 +3153,14 @@
   var Label = LabelComponent;
   // Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
-  var _excluded$g = ["children", "size", "error", "color", "styles", "helperText"];
+  var _excluded$g = ["children", "size", "error", "color", "views", "helperText"];
   var FieldLabel = _ref => {
     var {
         children,
         size = 'md',
         error = false,
         color = 'theme.primary',
-        styles = {
+        views = {
           label: {}
         }
       } = _ref,
@@ -3184,7 +3174,7 @@
       position: "absolute",
       color: error ? 'error' : color,
       fontSize: LabelSizes[size]
-    }, styles['label'], props), children);
+    }, views['label'], props), children);
   };
 
   var _excluded$h = ["children"];
@@ -3212,7 +3202,7 @@
   var _excluded$i = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
     _excluded2$3 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
     _excluded3$2 = ["option", "size", "removeOption"],
-    _excluded4$2 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
+    _excluded4$2 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
   // Defines a component to render individual selection items within a list.
   var Item = _ref => {
     var {
@@ -3246,7 +3236,7 @@
     var _ref3;
     var {
       size = 'md',
-      styles = {
+      views = {
         field: {},
         text: {}
       },
@@ -3267,7 +3257,7 @@
       backgroundColor: 'transparent',
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
       cursor: isDisabled ? 'not-allowed' : 'auto'
-    }, styles['field'], styles['text']);
+    }, views['field'], views['text']);
     var option = options.length > 0 && options.find(option => option.value === value);
     return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || Array.isArray(value) && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_ref3 = option && option.label) != null ? _ref3 : value :
     // If value is an array and not empty, render MultiSelect options
@@ -3320,7 +3310,7 @@
   var DropDown = _ref5 => {
     var {
       size,
-      styles = {
+      views = {
         dropDown: {}
       },
       options,
@@ -3367,10 +3357,10 @@
           display: 'none'
         }
       }
-    }, shadow, styles['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
+    }, shadow, views['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
       key: option.value,
       size: size,
-      style: styles['text'],
+      style: views['text'],
       option: option,
       callback: handleCallback,
       backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
@@ -3398,7 +3388,7 @@
     }, option), /*#__PURE__*/React__default.createElement(CloseIcon, {
       role: "close-button",
       color: "inherit",
-      size: IconSizes$2[size],
+      widthHeight: IconSizes$2[size],
       onClick: handleClick
     }));
   };
@@ -3420,10 +3410,9 @@
         options = [],
         shadow = {},
         size = 'md',
-        colorScheme = 'theme.primary',
         shape = 'default',
         variant = 'default',
-        styles = {
+        views = {
           text: {},
           icon: {},
           dropDown: {},
@@ -3467,31 +3456,30 @@
       role: "SelectBox",
       helperText: helperText,
       error: error,
-      styles: styles,
+      views: views,
       onClick: isDisabled || isReadOnly ? () => {} : handleClick
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
       error: error,
       shape: shape,
-      styles: styles,
+      views: views,
       shadow: shadow,
       variant: variant,
       value: value,
-      color: colorScheme,
+      color: 'theme.primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       isWithLabel: isWithLabel,
-      colorScheme: colorScheme,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: colorScheme,
+      color: 'theme.primary',
       error: error
-    }, styles), label)), /*#__PURE__*/React__default.createElement(HiddenSelect, Object.assign({
+    }, views), label)), /*#__PURE__*/React__default.createElement(HiddenSelect, Object.assign({
       id: id,
       name: name,
       options: options,
@@ -3504,24 +3492,24 @@
     }, 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,
@@ -3685,7 +3673,7 @@
     }
   };
 
-  var _excluded$j = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "styles"];
+  var _excluded$j = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
   var SwitchContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
   }, props));
@@ -3699,7 +3687,6 @@
         labelPosition = 'right',
         shadow = {},
         size = 'sm',
-        colorScheme = 'theme.primary',
         value = false,
         isHovered = false,
         isDisabled = false,
@@ -3709,7 +3696,7 @@
         onChange,
         setValue = () => {},
         setIsHovered = () => {},
-        styles = {
+        views = {
           slider: {},
           circle: {},
           label: {}
@@ -3731,7 +3718,7 @@
         height: 'fit-content',
         width: 'fit-content',
         cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
-      }, styles.label)
+      }, views.label)
     };
     return /*#__PURE__*/React__default.createElement(Label, Object.assign({
       htmlFor: id,
@@ -3755,12 +3742,12 @@
       marginBottom: 5,
       filter: isHovered && value ? 'brightness(0.9)' : 'brightness(1)',
       transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-      backgroundColor: isDisabled ? 'disabled' : value ? colorScheme : 'lightgray',
+      backgroundColor: isDisabled ? 'disabled' : value ? 'theme.primary' : 'lightgray',
       justifyContent: activeChild ? 'space-between' : value ? 'flex-end' : 'flex-start'
-    }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && value && /*#__PURE__*/React__default.createElement(View, null, activeChild), /*#__PURE__*/React__default.createElement(View, Object.assign({
+    }, shadow, SliderPadding[size], SliderSizes[size], views['slider']), activeChild && value && /*#__PURE__*/React__default.createElement(View, null, activeChild), /*#__PURE__*/React__default.createElement(View, Object.assign({
       borderRadius: "50%",
       backgroundColor: "white"
-    }, KnobSizes[size], styles['circle'])), inActiveChild && !value && /*#__PURE__*/React__default.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && /*#__PURE__*/React__default.createElement(View, null, label));
+    }, KnobSizes[size], views['circle'])), inActiveChild && !value && /*#__PURE__*/React__default.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && /*#__PURE__*/React__default.createElement(View, null, label));
   };
 
   // Defines the SwitchComponent as a functional component that takes SwitchProps as props.
@@ -3805,7 +3792,7 @@
     // Export of the useTextAreaState hook for external usage.
   };
 
-  var _excluded$k = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "styles"];
+  var _excluded$k = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
   var TextAreaView = _ref => {
     var {
         id,
@@ -3819,7 +3806,6 @@
         size = 'sm',
         shape = 'default',
         variant = 'default',
-        colorScheme = 'theme.primary',
         isHovered = false,
         isFocused = false,
         isEditable = false,
@@ -3837,7 +3823,7 @@
         setValue = () => {},
         setIsFocused = () => {},
         setIsHovered = () => {},
-        styles = {
+        views = {
           box: {},
           text: {},
           label: {},
@@ -3863,7 +3849,7 @@
       backgroundColor: 'transparent',
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
       cursor: isDisabled ? 'not-allowed' : 'auto'
-    }, styles['field']);
+    }, views['field']);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => {
       setIsFocused(true);
@@ -3887,30 +3873,29 @@
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
       helperText: helperText,
       error: error,
-      styles: styles
+      views: views
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
       error: error,
       shape: shape,
-      styles: styles,
+      views: views,
       shadow: shadow,
       variant: variant,
       value: value,
-      color: colorScheme,
+      color: 'theme.primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       isWithLabel: isWithLabel,
-      colorScheme: colorScheme,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: colorScheme,
+      color: 'theme.primary',
       error: error
-    }, styles), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+    }, views), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "textarea",
       id: id,
       name: name,
@@ -3975,7 +3960,7 @@
     };
   };
 
-  var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
+  var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "views", "size", "shape", "variant", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
   var TextFieldInput = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "text"
   }, props));
@@ -3992,7 +3977,7 @@
         helperText,
         onChangeText,
         shadow = {},
-        styles = {
+        views = {
           box: {},
           field: {},
           label: {},
@@ -4002,7 +3987,6 @@
         size = 'md',
         shape = 'default',
         variant = 'default',
-        colorScheme = 'theme.primary',
         error = false,
         isFocused = false,
         isHovered = false,
@@ -4043,7 +4027,7 @@
       backgroundColor: 'transparent',
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
       cursor: isDisabled ? 'not-allowed' : 'auto'
-    }, styles['field']);
+    }, views['field']);
     var handleFocus = () => {
       setIsFocused(true);
       if (onFocus) onFocus();
@@ -4080,30 +4064,29 @@
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
       helperText: helperText,
       error: error,
-      styles: styles
+      views: views
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
       error: error,
       shape: shape,
-      styles: styles,
+      views: views,
       shadow: shadow,
       variant: variant,
       value: value,
-      color: colorScheme,
+      color: 'theme.primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       isWithLabel: isWithLabel,
-      colorScheme: colorScheme,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
     }, left, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: colorScheme,
+      color: 'theme.primary',
       error: error
-    }, styles), label)), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
+    }, views), label)), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
       id: id,
       name: name,
       readOnly: isReadOnly,
@@ -4117,7 +4100,7 @@
       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));
@@ -4201,7 +4184,7 @@
     '6xl': 60
   };
 
-  var _excluded$m = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles", "infoText", "helperText"];
+  var _excluded$m = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
   var CheckboxView = _ref => {
     var {
         id,
@@ -4213,7 +4196,6 @@
         shadow = {},
         labelPosition = 'right',
         size = 'md',
-        colorScheme = 'theme.primary',
         error = false,
         isSelected = false,
         isHovered = false,
@@ -4223,7 +4205,7 @@
         defaultIsSelected = false,
         setIsSelected = () => {},
         setIsHovered = () => {},
-        styles = {
+        views = {
           checkbox: {},
           label: {}
         },
@@ -4247,11 +4229,11 @@
         width: 'fit-content',
         color: error ? 'theme.error' : isDisabled ? 'theme.disabled' : 'color.blueGray.700',
         cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
-      }, styles['label']),
+      }, views['label']),
       checkbox: Object.assign({}, isDisabled ? {
         backgroundColor: 'theme.disabled'
       } : (isChecked || isSelected) && !isIndeterminate || isIndeterminate ? {
-        backgroundColor: colorScheme
+        backgroundColor: 'theme.primary'
       } : {
         borderWidth: 2,
         borderColor: error ? 'theme.error' : isHovered ? 'color.gray.500' : 'color.gray.300',
@@ -4260,7 +4242,7 @@
         borderRadius: 3
       }, isHovered ? {
         filter: 'brightness(0.9)'
-      } : {}, Sizes[size], shadow, styles['checkbox'])
+      } : {}, Sizes[size], shadow, views['checkbox'])
     };
     return /*#__PURE__*/React__default.createElement(Label, Object.assign({
       htmlFor: id,
@@ -4276,19 +4258,19 @@
       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,
@@ -5795,7 +5777,7 @@
 
   var _excluded$n = ["size"],
     _excluded2$4 = ["size"],
-    _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles", "themeMode"];
+    _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
   var CountryList = _ref => {
     var props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
@@ -5816,7 +5798,7 @@
       option,
       size = 'md',
       callback = () => {},
-      styles = {
+      views = {
         text: {}
       }
     } = _ref3;
@@ -5838,15 +5820,15 @@
       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);
@@ -5865,12 +5847,12 @@
       flexDirection: "column",
       backgroundColor: "white",
       boxShadow: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px"
-    }, styles['dropDown']), options.map(option => (/*#__PURE__*/React__default.createElement(DropDownItem, Object.assign({
+    }, views['dropDown']), options.map(option => (/*#__PURE__*/React__default.createElement(DropDownItem, Object.assign({
       key: option.code,
       size: size,
       option: option.name,
       callback: handleCallback
-    }, styles['text'])))));
+    }, views['text'])))));
   };
   var CountryPickerView = _ref5 => {
     var {
@@ -5892,7 +5874,6 @@
         size = 'md',
         variant = 'default',
         shape = 'default',
-        colorScheme = 'theme.primary',
         onChange,
         onBlur = () => {},
         setHide = () => {},
@@ -5900,7 +5881,7 @@
         setIsHovered = () => {},
         setIsFocused = () => {},
         setValue = () => {},
-        styles = {
+        views = {
           text: {},
           icon: {},
           label: {},
@@ -5955,36 +5936,35 @@
       fontSize: appStudio.Typography.fontSizes[size],
       backgroundColor: 'transparent',
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
-      cursor: isDisabled ? 'not-allowed' : 'auto'
-    }, styles['field']);
+      cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
+    }, views['field']);
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
       helperText: helperText,
       error: error,
-      styles: styles,
+      views: views,
       onClick: handleClick
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
       error: error,
       shape: shape,
-      styles: styles,
+      views: views,
       shadow: shadow,
       variant: variant,
       value: value,
-      color: colorScheme,
+      color: 'theme.primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       isWithLabel: isWithLabel,
-      colorScheme: colorScheme,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: colorScheme,
+      color: 'theme.primary',
       error: error
-    }, styles), label)), /*#__PURE__*/React__default.createElement(CountrySelector, Object.assign({
+    }, views), label)), /*#__PURE__*/React__default.createElement(CountrySelector, Object.assign({
       id: id,
       name: name,
       placeholder: placeholder,
@@ -5998,17 +5978,17 @@
       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
     })));
@@ -6038,7 +6018,7 @@
     };
   };
 
-  var _excluded$o = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+  var _excluded$o = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
   var DatePickerContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "date"
   }, props));
@@ -6053,8 +6033,7 @@
         size = 'md',
         variant = 'default',
         shape = 'default',
-        colorScheme = 'theme.primary',
-        styles = {
+        views = {
           box: {},
           label: {},
           helperText: {},
@@ -6102,34 +6081,33 @@
       backgroundColor: 'transparent',
       color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
       cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
-    }, styles['field']);
+    }, views['field']);
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
       helperText: helperText,
       error: error,
-      styles: styles
+      views: views
     }, /*#__PURE__*/React__default.createElement(FieldContent, {
       label: label,
       size: size,
       error: error,
       shape: shape,
-      styles: styles,
+      views: views,
       shadow: shadow,
+      color: 'theme.primary',
       variant: variant,
       value: date,
-      color: colorScheme,
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       isWithLabel: isWithLabel,
-      colorScheme: colorScheme,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: colorScheme,
+      color: 'theme.primary',
       error: error
-    }, styles), label)), /*#__PURE__*/React__default.createElement(DatePickerContent, Object.assign({
+    }, views), label)), /*#__PURE__*/React__default.createElement(DatePickerContent, Object.assign({
       id: id,
       name: name,
       onFocus: handleFocus,
@@ -6165,10 +6143,10 @@
   var PasswordComponent = _ref => {
     var {
         visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
-          size: 14
+          widthHeight: 14
         }),
         hiddenIcon = /*#__PURE__*/React__default.createElement(CloseEyeIcon, {
-          size: 14
+          widthHeight: 14
         })
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
@@ -6225,7 +6203,7 @@
     };
   };
 
-  var _excluded$q = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "styles", "isDropdownVisible", "setIsDropdownVisible"];
+  var _excluded$q = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
   // Defines the functional component 'ComboBoxView' with destructured props.
   var ComboBoxView = _ref => {
     var {
@@ -6245,7 +6223,7 @@
         searchQuery,
         setSearchQuery,
         setFilteredItems,
-        styles,
+        views,
         isDropdownVisible,
         setIsDropdownVisible
         // Collects all further props not destructured explicitly.
@@ -6288,7 +6266,7 @@
       alignItems: "center",
       width: "100%"
     }, props), label && (/*#__PURE__*/React__default.createElement(Text, {
-      styles: styles == null ? void 0 : styles.label,
+      views: views == null ? void 0 : views.label,
       htmlFor: props.id
     }, label)), /*#__PURE__*/React__default.createElement(View, {
       position: "relative"
@@ -6303,16 +6281,16 @@
       justifyContent: "space-between",
       minWidth: 300,
       flexWrap: "nowrap"
-    }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+    }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
       gap: 15,
       alignItems: "center",
       position: "relative",
       width: "100%",
       onClick: () => setIsDropdownVisible(!isDropdownVisible)
-    }, styles == null ? void 0 : styles.labelContainer), left, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+    }, views == null ? void 0 : views.labelContainer), left, /*#__PURE__*/React__default.createElement(Text, Object.assign({
       weight: "medium",
       flexGrow: 1
-    }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(View, Object.assign({
+    }, views == null ? void 0 : views.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(View, Object.assign({
       id: "combobox-dropdown",
       position: "absolute",
       backgroundColor: "white",
@@ -6325,7 +6303,7 @@
       transform: "translateY(100%)",
       marginTop: "4px",
       borderRadius: "4px"
-    }, styles == null ? void 0 : styles.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
+    }, views == null ? void 0 : views.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
       id: props.id,
       name: props.name,
       width: "100%",
@@ -6335,14 +6313,14 @@
       hint: placeholder,
       isClearable: false,
       left: /*#__PURE__*/React__default.createElement(SearchIcon, {
-        size: 12
+        widthHeight: 12
       }),
-      styles: {
+      views: {
         box: Object.assign({
           width: '100%',
           padding: '6px 12px',
           borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
-        }, styles == null ? void 0 : styles.text)
+        }, views == null ? void 0 : views.text)
       }
     })), filteredItems.length > 0 && (/*#__PURE__*/React__default.createElement(View, {
       margin: 0,
@@ -6356,8 +6334,8 @@
       backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
       onMouseEnter: () => setHighlightedIndex(index),
       onClick: () => handleSelect(item)
-    }, styles == null ? void 0 : styles.item), /*#__PURE__*/React__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(TickIcon, {
-      size: 20
+    }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(TickIcon, {
+      widthHeight: 20
     }))))))))))));
   };
 
@@ -6621,10 +6599,10 @@
   var PasswordComponent$1 = _ref => {
     var {
         visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
-          size: 14
+          widthHeight: 14
         }),
         hiddenIcon = /*#__PURE__*/React__default.createElement(CloseEyeIcon, {
-          size: 14
+          widthHeight: 14
         })
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
@@ -6683,12 +6661,12 @@
     subtitle: '',
     variant: 'info',
     isClosable: false,
-    styles: {},
+    views: {},
     action: () => {},
     actionText: '',
     showIcon: false,
     timeout: 3000,
-    show: function show(variant, title, subtitle, isClosable, styles, action, actionText, showIcon, timeout) {
+    show: function show(variant, title, subtitle, isClosable, views, action, actionText, showIcon, timeout) {
       if (title === void 0) {
         title = '';
       }
@@ -6701,7 +6679,7 @@
         title,
         subtitle,
         isClosable,
-        styles,
+        views,
         action,
         actionText,
         showIcon,
@@ -6713,7 +6691,7 @@
     })
   }));
   var showMessage = (variant, title, subtitle, props) => {
-    useMessageStore.getState().show(variant, title, subtitle, props == null ? void 0 : props.isClosable, props == null ? void 0 : props.styles, props == null ? void 0 : props.action, props == null ? void 0 : props.actionText, props == null ? void 0 : props.showIcon, props == null ? void 0 : props.timeout);
+    useMessageStore.getState().show(variant, title, subtitle, props == null ? void 0 : props.isClosable, props == null ? void 0 : props.views, props == null ? void 0 : props.action, props == null ? void 0 : props.actionText, props == null ? void 0 : props.showIcon, props == null ? void 0 : props.timeout);
   };
   var hideMessage = () => {
     useMessageStore.getState().hide();
@@ -6791,7 +6769,7 @@
   };
 
   var MessageView = _ref => {
-    var _styles$closingIcon, _styles$closingIcon2;
+    var _views$closingIcon, _views$closingIcon2;
     var {
       variant,
       hide,
@@ -6803,7 +6781,7 @@
       showIcon = false,
       isClosable = false,
       timeout = 3000,
-      styles
+      views
     } = _ref;
     React.useEffect(() => {
       if (timeout && !isClosable) {
@@ -6833,21 +6811,21 @@
     }[variant];
     var iconComponent = {
       info: /*#__PURE__*/React__default.createElement(InfoIcon, Object.assign({
-        size: 24,
+        widthHeight: 24,
         color: iconColor
-      }, styles == null ? void 0 : styles.icon)),
-      success: /*#__PURE__*/React__default.createElement(SuccessIcon, Object.assign({
-        size: 24,
+      }, views == null ? void 0 : views.icon)),
+      success: (/*#__PURE__*/React__default.createElement(SuccessIcon, Object.assign({
+        widthHeight: 24,
         color: iconColor
-      }, styles == null ? void 0 : styles.icon)),
-      warning: /*#__PURE__*/React__default.createElement(WarningIcon, Object.assign({
-        size: 24,
+      }, views == null ? void 0 : views.icon))),
+      warning: (/*#__PURE__*/React__default.createElement(WarningIcon, Object.assign({
+        widthHeight: 24,
         color: iconColor
-      }, styles == null ? void 0 : styles.icon)),
+      }, views == null ? void 0 : views.icon))),
       error: /*#__PURE__*/React__default.createElement(ErrorIcon, Object.assign({
-        size: 24,
+        widthHeight: 24,
         color: iconColor
-      }, styles == null ? void 0 : styles.icon))
+      }, views == null ? void 0 : views.icon))
     }[variant];
     var isShowIcon = showIcon && iconComponent;
     return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
@@ -6864,20 +6842,20 @@
       onClick: isClosable ? () => {} : () => {
         hide();
       }
-    }, containerStyle, styles == null ? void 0 : styles.container), isShowIcon && iconComponent, /*#__PURE__*/React__default.createElement(Vertical, {
+    }, containerStyle, views == null ? void 0 : views.container), isShowIcon && iconComponent, /*#__PURE__*/React__default.createElement(Vertical, {
       gap: 8,
       width: "100%"
     }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: "md",
       weight: "semiBold"
-    }, styles == null ? void 0 : styles.title), title), subtitle && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+    }, views == null ? void 0 : views.title), title), subtitle && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: "sm"
-    }, styles == null ? void 0 : styles.subtitle), subtitle))), isWithAction && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+    }, views == null ? void 0 : views.subtitle), subtitle))), isWithAction && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       marginRight: 10,
       onClick: action,
       padding: "6px 10px",
       whiteSpace: "nowrap"
-    }, containerStyle, styles == null ? void 0 : styles.actionText), actionText)), isClosable && (/*#__PURE__*/React__default.createElement(View, Object.assign({
+    }, containerStyle, views == null ? void 0 : views.actionText), actionText)), isClosable && (/*#__PURE__*/React__default.createElement(View, Object.assign({
       position: "absolute",
       zIndex: 10000,
       right: 8,
@@ -6885,10 +6863,10 @@
       onClick: () => {
         hide();
       }
-    }, styles == null || (_styles$closingIcon = styles.closingIcon) == null ? void 0 : _styles$closingIcon.container), /*#__PURE__*/React__default.createElement(CloseIcon, Object.assign({
-      size: 18,
+    }, views == null || (_views$closingIcon = views.closingIcon) == null ? void 0 : _views$closingIcon.container), /*#__PURE__*/React__default.createElement(CloseIcon, Object.assign({
+      widthHeight: 18,
       color: iconColor
-    }, styles == null || (_styles$closingIcon2 = styles.closingIcon) == null ? void 0 : _styles$closingIcon2.icon)))));
+    }, views == null || (_views$closingIcon2 = views.closingIcon) == null ? void 0 : _views$closingIcon2.icon)))));
   };
 
   var MessageLayout = _ref => {
@@ -6903,7 +6881,7 @@
       variant,
       subtitle,
       isClosable,
-      styles,
+      views,
       action,
       actionText,
       showIcon,
@@ -6935,7 +6913,7 @@
       title: title,
       theme: theme,
       isClosable: isClosable,
-      styles: styles,
+      views: views,
       action: action,
       actionText: actionText,
       showIcon: showIcon,
@@ -7038,16 +7016,22 @@
       handleClick
     };
   };
-  var Uploader = _ref2 => {
+
+  var UploadView = _ref => {
     var {
-      accept = '*/*',
+      accept,
       isLoading = false,
       progress = 0,
       icon,
       text,
-      maxSize,
-      onFileSelect,
-      validateFile,
+      previewUrl,
+      thumbnailUrl,
+      errorMessage,
+      fileInputRef,
+      videoRef,
+      selectedFile,
+      handleFileChange,
+      handleClick,
       containerProps,
       errorMessageProps,
       progressProps,
@@ -7055,120 +7039,108 @@
       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",
@@ -7178,29 +7150,30 @@
       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,
@@ -7209,7 +7182,55 @@
       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 => ({
@@ -7313,11 +7334,11 @@
     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,
@@ -7325,13 +7346,14 @@
         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,
@@ -7340,7 +7362,7 @@
       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,
@@ -7351,14 +7373,15 @@
       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 ? {
@@ -7376,28 +7399,28 @@
     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,
@@ -7405,16 +7428,17 @@
       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 = {
@@ -7423,23 +7447,24 @@
       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 => {
@@ -7496,14 +7521,14 @@
 
   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 (
@@ -7511,93 +7536,93 @@
       // 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 {
@@ -7623,11 +7648,11 @@
   var Table = _ref => {
     var {
       children,
-      styles,
+      views,
       onClick
     } = _ref;
     return /*#__PURE__*/React__default.createElement(TableProvider, {
-      styles: styles,
+      views: views,
       onRowClick: onClick
     }, children);
   };
@@ -7694,7 +7719,7 @@
       // Default to empty array
       activeTab,
       handleTabClick,
-      styles = {},
+      views = {},
       // Default to empty object
       renderTab,
       renderContent
@@ -7702,7 +7727,7 @@
     // If there's no active tab (e.g., tabs array is empty), render nothing or a placeholder
     if (!activeTab) {
       // Optionally render a placeholder when no tabs are active/available
-      // return <View {...styles.container}><Text>No tabs available.</Text></View>;
+      // return <View {...views.container}><Text>No tabs available.</Text></View>;
       return null; // Or simply render nothing
     }
     return (
@@ -7711,7 +7736,7 @@
       React__default.createElement(Vertical, Object.assign({
         width: "100%",
         height: '100%'
-      }, styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({}, styles.headerTabs), tabs.map(tab => {
+      }, views.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({}, views.headerTabs), tabs.map(tab => {
         // Determine if the current tab in the loop is the active one
         var isActive = tab.title === activeTab.title;
         // Prepare the onClick handler for this specific tab
@@ -7726,17 +7751,17 @@
           onClick: onClick,
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0
-        }, styles.tab, isActive ? styles.activeTab : {}, {
+        }, views.tab, isActive ? views.activeTab : {}, {
           // Example: Set variant based on active state (can be overridden by styles)
           variant: isActive ? 'filled' : 'ghost',
           cursor: "pointer" // Ensure pointer cursor
         }), tab.icon, /*#__PURE__*/React__default.createElement(Text
         // Apply base title styles and merge activeText styles if this tab is active
-        , Object.assign({}, styles.title, isActive ? styles.activeText : {}), tab.title));
+        , Object.assign({}, views.title, isActive ? views.activeText : {}), tab.title));
       })), /*#__PURE__*/React__default.createElement(View, Object.assign({
         width: '100%',
         height: "100%"
-      }, styles.content), renderContent ? renderContent(activeTab) :
+      }, views.content), renderContent ? renderContent(activeTab) :
       // Otherwise, render the content property from the active tab object
       activeTab.content))
     );
@@ -7749,7 +7774,7 @@
   var TabsComponent = _ref => {
     var {
       tabs,
-      styles,
+      views,
       initialTabValue,
       onTabChange,
       renderTab,
@@ -7774,7 +7799,7 @@
     // Render the presentation component with the necessary props
     return /*#__PURE__*/React__default.createElement(TabsView, {
       tabs: tabs,
-      styles: styles,
+      views: views,
       activeTab: activeTab,
       handleTabClick: handleTabClick,
       renderTab: renderTab,
@@ -7799,34 +7824,28 @@
     };
   };
 
-  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,
@@ -7836,6 +7855,7 @@
       },
       ghost: {}
     };
+    var handleHover = () => setIsHovered(!isHovered);
     var handleToggle = () => {
       if (!isDisabled) {
         setIsToggled(prev => {
@@ -7853,28 +7873,27 @@
       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,
@@ -7889,7 +7908,6 @@
     // Beginning of the JSX block to render the Toggle view component.
     return /*#__PURE__*/React__default.createElement(ToggleView, Object.assign({
       shape: shape,
-      colorScheme: colorScheme,
       variant: variant,
       isDisabled: isDisabled,
       isHovered: isHovered,
@@ -7925,8 +7943,7 @@
       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) => {
@@ -7941,19 +7958,19 @@
         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))));
   };
 
@@ -7964,8 +7981,6 @@
       items,
       // Destructure 'shape' prop to define the shape of the toggle buttons
       shape,
-      // Destructure 'colorScheme' prop for toggle button styling
-      colorScheme,
       // Destructure 'variant' prop to determine the visual style of the toggle group
       variant,
       // Destructure 'onToggleChange' prop for the callback when toggle state changes
@@ -7979,7 +7994,6 @@
     return /*#__PURE__*/React__default.createElement(ToggleGroupView, {
       items: items,
       shape: shape,
-      colorScheme: colorScheme,
       variant: variant,
       activeToggles: activeToggles,
       setActiveToggles: setActiveToggles,
@@ -8085,12 +8099,13 @@
       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),
@@ -8099,7 +8114,7 @@
       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 => {
@@ -8233,14 +8248,12 @@
   exports.WifiIcon = WifiIcon;
   exports.XIcon = XIcon;
   exports.YoutubeIcon = YoutubeIcon;
-  exports.generateThumbnail = generateThumbnail;
   exports.hideMessage = hideMessage;
   exports.hideModal = hideModal;
   exports.showMessage = showMessage;
   exports.showModal = showModal;
   exports.useMessageStore = useMessageStore;
   exports.useModalStore = useModalStore;
-  exports.useUpload = useUpload;
 
   Object.defineProperty(exports, '__esModule', { value: true });