@app-studio/web 0.8.66 → 0.8.69

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({
-      widthHeight: size,
-      lineHeight: size,
+      widthHeight: widthHeight,
+      lineHeight: widthHeight,
       color: color,
       display: "flex",
       transform: transform ? transform : orientation === 'left' ? 'rotate(-90deg)' : orientation === 'right' ? 'rotate(90deg)' : orientation === 'up' ? 'rotate(0deg)' : orientation === 'down' ? 'rotate(180deg)' : 'none'
@@ -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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: 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({
-      widthHeight: size,
+      widthHeight: widthHeight,
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
@@ -1983,7 +1990,7 @@
 
   // Defines AlertView as a functional component using destructuring to extract props.
   var AlertView = _ref => {
-    var _views$icon$color;
+    var _views$icon$color, _views$icon;
     var {
       icon,
       title,
@@ -2002,8 +2009,8 @@
     }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(View, {
       alignSelf: 'center'
     }, icon ? icon : (/*#__PURE__*/React__default.createElement(WarningIcon, {
-      size: 24,
-      color: (_views$icon$color = views == null ? void 0 : views.icon.color) != null ? _views$icon$color : Themes[variant].content.color
+      widthHeight: 24,
+      color: (_views$icon$color = views == null || (_views$icon = views.icon) == null ? void 0 : _views$icon.color) != null ? _views$icon$color : Themes[variant].content.color
     }))), /*#__PURE__*/React__default.createElement(Vertical, {
       gap: 10
     }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
@@ -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"];
@@ -2521,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',
@@ -2662,7 +2670,8 @@
         loaderColor,
         type = 'default',
         speed = 'normal',
-        textPosition = 'right'
+        textPosition = 'right',
+        views
       } = _ref4,
       props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
     var style = {
@@ -2678,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.
@@ -2693,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", "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;
@@ -2701,24 +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.
         shape = 'rounded',
         onClick = () => {},
         loaderProps = {},
@@ -2728,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 {
@@ -2748,7 +2748,6 @@
     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,
@@ -2757,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 : 'theme.primary',
-        // Fetches size-specific styles from ButtonSizes based on the 'size' prop.
         color: reverse ? 'white' : buttonColor
       },
-      // Adjusts button width based on isAuto and isFilled properties, using buttonSizeStyles for fallback width.
       link: {
         backgroundColor: 'transparent',
-        // Changes padding for the button based on whether isIconRounded is true or false.
         borderWidth: 1,
         borderStyle: 'solid',
-        // Creates the content for the button including loaders and icons positioned based on their respective properties.
         borderColor: reverse ? buttonColor : 'transparent',
         color: buttonColor,
         textDecoration: reverse ? 'none' : 'underline'
       },
       ghost: {
-        backgroundColor: reverse ? buttonColor : 'transparent',
+        backgroundColor: 'transparent',
         color: reverse ? 'white' : buttonColor,
         borderWidth: 1,
         borderStyle: 'solid',
         borderColor: reverse ? buttonColor : 'transparent'
       }
     };
-    // Executes rendering of the button or a link element based on the variant; applies conditional rendering for to in 'link' variant.
     var buttonSizeStyles = ButtonSizes[size];
     var buttonVariant = ButtonVariants[variant];
     var scaleWidth = {
       width: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
     };
     var changePadding = isIconRounded ? IconSizes$1[size] : ButtonSizes[size];
-    var content = /*#__PURE__*/React__default.createElement(Horizontal, {
+    var content = /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
       gap: 10
-    }, isLoading && loaderPosition === 'left' && /*#__PURE__*/React__default.createElement(Loader, Object.assign({}, loaderProps)), icon && iconPosition === 'left' && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, isHovered ? {
+    }, views == null ? void 0 : views.horizontal), isLoading && loaderPosition === 'left' && /*#__PURE__*/React__default.createElement(Loader, Object.assign({}, loaderProps)), icon && iconPosition === 'left' && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, isHovered ? {
       animate: appStudio.Animation.jackInTheBox({})
     } : {}), icon)), children, icon && iconPosition === 'right' && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, isHovered ? {
       animate: appStudio.Animation.jackInTheBox({})
@@ -2816,11 +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: '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.
@@ -2850,12 +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
+        color,
+        views
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     var {
@@ -2870,11 +2864,11 @@
         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 {
@@ -3394,7 +3388,7 @@
     }, option), /*#__PURE__*/React__default.createElement(CloseIcon, {
       role: "close-button",
       color: "inherit",
-      size: IconSizes$2[size],
+      widthHeight: IconSizes$2[size],
       onClick: handleClick
     }));
   };
@@ -3505,13 +3499,13 @@
       removeOption: handleRemoveOption
     })), /*#__PURE__*/React__default.createElement(FieldIcons, null, !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, hide ? (/*#__PURE__*/React__default.createElement(ChevronIcon, {
       color: "inherit",
-      size: IconSizes$2[size],
+      widthHeight: IconSizes$2[size],
       style: views.icon,
       orientation: "down"
     })) : (/*#__PURE__*/React__default.createElement(ChevronIcon, {
       color: "inherit",
       orientation: "up",
-      size: IconSizes$2[size],
+      widthHeight: IconSizes$2[size],
       style: views.icon
     })))))), !hide && (/*#__PURE__*/React__default.createElement(DropDown, {
       size: size,
@@ -4106,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));
@@ -4265,10 +4259,10 @@
     }, labelPosition === 'left' && label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: size
     }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? (/*#__PURE__*/React__default.createElement(MinusIcon, {
-      size: IconSizes$3[size],
+      widthHeight: IconSizes$3[size],
       color: "white"
     })) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React__default.createElement(TickIcon, {
-      size: IconSizes$3[size],
+      widthHeight: IconSizes$3[size],
       color: "white"
     }))), labelPosition === 'right' && label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: size
@@ -5834,7 +5828,7 @@
       views = {
         dropDown: {}
       },
-      options,
+      options = [],
       callback = () => {}
     } = _ref4;
     var handleCallback = option => callback(option);
@@ -5984,12 +5978,12 @@
       onChange: handleChange
     }))), /*#__PURE__*/React__default.createElement(FieldIcons, null, hide ? (/*#__PURE__*/React__default.createElement(ChevronIcon, {
       orientation: "down",
-      size: IconSizes$4[size],
+      widthHeight: IconSizes$4[size],
       color: IconColor,
       style: views['icon']
     })) : (/*#__PURE__*/React__default.createElement(ChevronIcon, {
       orientation: "up",
-      size: IconSizes$4[size],
+      widthHeight: IconSizes$4[size],
       color: IconColor,
       style: views['icon']
     })))), !hide && (/*#__PURE__*/React__default.createElement(DropDown$1, {
@@ -7056,7 +7050,7 @@
           color: "red",
           fontSize: 12,
           marginTop: 8
-        }, errorMessageProps), errorMessage);
+        }, errorMessageProps, views == null ? void 0 : views.text), errorMessage);
       },
       renderText = _ref3 => {
         var {
@@ -7065,20 +7059,20 @@
         } = _ref3;
         return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
           marginTop: 8
-        }, textProps), text);
+        }, textProps, views == null ? void 0 : views.text), text);
       },
       renderFile = _ref4 => {
         var {
           selectedFile,
           textProps
         } = _ref4;
-        return selectedFile ? (/*#__PURE__*/React__default.createElement(Center, {
+        return selectedFile ? (/*#__PURE__*/React__default.createElement(Center, Object.assign({
           marginTop: 8,
           gap: 10,
           flexDirection: "column"
-        }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+        }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
           maxLines: 2
-        }, textProps), selectedFile.name), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, textProps), "(", Math.round(selectedFile.size / 1024), " KB)"))) : null;
+        }, textProps, views == null ? void 0 : views.text), selectedFile.name), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, textProps, views == null ? void 0 : views.text), "(", Math.round(selectedFile.size / 1024), " KB)"))) : null;
       },
       renderVideo = _ref5 => {
         var {
@@ -7088,11 +7082,11 @@
           videoProps,
           imageProps
         } = _ref5;
-        return /*#__PURE__*/React__default.createElement(appStudio.View, {
+        return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
           width: "100%",
           height: "100%",
           position: "relative"
-        }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        }, views == null ? void 0 : views.view), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
           as: "video",
           width: "100%",
           height: "100%",
@@ -7101,13 +7095,13 @@
             objectFit: 'cover'
           },
           ref: videoRef
-        }, videoProps)), thumbnailUrl && (/*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
+        }, videoProps, views == null ? void 0 : views.view)), thumbnailUrl && (/*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
           src: thumbnailUrl,
           alt: "Video Thumbnail",
           width: "100%",
           height: "100%",
           objectFit: "cover"
-        }, imageProps))));
+        }, imageProps, views == null ? void 0 : views.image))));
       },
       renderImage = _ref6 => {
         var {
@@ -7120,7 +7114,7 @@
           width: "100%",
           height: "100%",
           objectFit: "cover"
-        }, imageProps));
+        }, imageProps, views == null ? void 0 : views.image));
       },
       renderProgress = _ref7 => {
         var {
@@ -7130,20 +7124,21 @@
         return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
           gap: 8,
           alignItems: "center"
-        }, progressProps), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        }, progressProps, views == null ? void 0 : views.horizontal), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
           height: 4,
           backgroundColor: "rgba(0,0,0,0.1)",
           width: "100%",
           borderRadius: 2
-        }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+        }, views == null ? void 0 : views.view), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
           height: 4,
           width: progress + "%",
           borderRadius: 2,
           backgroundColor: "#000"
-        })), /*#__PURE__*/React__default.createElement(appStudio.Text, {
+        }, views == null ? void 0 : views.view))), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
           fontSize: 12
-        }, progress, "%"));
-      }
+        }, views == null ? void 0 : views.text), progress, "%"));
+      },
+      views = {}
     } = _ref;
     var finalPreviewUrl = externalPreviewUrl || previewUrl;
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
@@ -7155,7 +7150,7 @@
       flexDirection: "column",
       overflow: "hidden",
       position: "relative"
-    }, containerProps), progress === 100 && fileType === 'image' && finalPreviewUrl && renderImage({
+    }, containerProps, views == null ? void 0 : views.container), progress === 100 && fileType === 'image' && finalPreviewUrl && renderImage({
       previewUrl: finalPreviewUrl,
       imageProps
     }), progress === 100 && fileType === 'video' && thumbnailUrl && renderVideo({
@@ -7178,7 +7173,7 @@
     }), errorMessage && renderError({
       errorMessage,
       errorMessageProps
-    }), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    }), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       as: "input",
       type: "file",
       ref: fileInputRef,
@@ -7187,7 +7182,7 @@
       style: {
         display: 'none'
       }
-    }));
+    }, views == null ? void 0 : views.view)));
   };
 
   var _excluded$y = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress"];
@@ -7339,11 +7334,11 @@
     xl: 28
   };
 
-  var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
-    _excluded2$7 = ["children", "shadow", "isFullScreen", "shape"],
-    _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition"],
-    _excluded4$3 = ["children"],
-    _excluded5$1 = ["children"];
+  var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
+    _excluded2$7 = ["children", "shadow", "isFullScreen", "shape", "views"],
+    _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
+    _excluded4$3 = ["children", "views"],
+    _excluded5$1 = ["children", "views"];
   var ModalOverlay = _ref => {
     var {
         children,
@@ -7351,13 +7346,14 @@
         isOpen = false,
         isClosePrevented = false,
         onClose = () => {},
-        position = 'center'
+        position = 'center',
+        views
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
-    return /*#__PURE__*/React__default.createElement(Center, {
+    return /*#__PURE__*/React__default.createElement(Layout.Center, Object.assign({
       position: "fixed",
       top: 0,
       left: 0,
@@ -7366,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,
@@ -7377,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 ? {
@@ -7402,20 +7399,21 @@
     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;
@@ -7430,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 = {
@@ -7448,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 => {
@@ -7521,7 +7521,7 @@
 
   var defaultStyles = {};
   // Create a context that includes both styles and the onClick function
-  var TableContext = /*#__PURE__*/React__default.createContext({
+  var TableContext = /*#__PURE__*/React.createContext({
     views: defaultStyles,
     onRowClick: () => {}
   });
@@ -7543,7 +7543,7 @@
     );
   };
   // 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 {
@@ -7552,7 +7552,7 @@
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "table",
       borderCollapse: "collapse"
-    }, views.table, props));
+    }, views == null ? void 0 : views.table, props));
   };
   var TableHead = props => {
     var {
@@ -7563,7 +7563,7 @@
       borderBottom: "0.5px solid #ddd",
       textAlign: "left",
       color: "color.gray.400"
-    }, views.thead, props));
+    }, views == null ? void 0 : views.thead, props));
   };
   var TableHeadCell = props => {
     var {
@@ -7574,7 +7574,7 @@
       padding: "14px",
       whiteSpace: "nowrap",
       fontWeight: "500"
-    }, views.th, props));
+    }, views == null ? void 0 : views.th, props));
   };
   var TableRow = props => {
     var {
@@ -7583,7 +7583,7 @@
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "tr"
-    }, views.tr, {
+    }, views == null ? void 0 : views.tr, {
       onClick: onRowClick
     }, props));
   };
@@ -7596,7 +7596,7 @@
       padding: "14px",
       whiteSpace: "nowrap",
       fontWeight: props.isFirstColumn ? '400' : '300'
-    }, views.td, props));
+    }, views == null ? void 0 : views.td, props));
   };
   var TableBody = props => {
     var {
@@ -7604,7 +7604,7 @@
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "tbody"
-    }, views.tbody, props));
+    }, views == null ? void 0 : views.tbody, props));
   };
   var TableFooter = props => {
     var {
@@ -7612,7 +7612,7 @@
     } = useTableContext();
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "tfoot"
-    }, views.tfoot, props));
+    }, views == null ? void 0 : views.tfoot, props));
   };
   var TableCaption = props => {
     var {
@@ -7622,7 +7622,7 @@
       as: "caption",
       margin: '10px 0',
       color: "color.gray.400"
-    }, views.caption, props));
+    }, views == null ? void 0 : views.caption, props));
   };
   var TableView = _ref => {
     var {
@@ -7824,7 +7824,7 @@
     };
   };
 
-  var _excluded$A = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
+  var _excluded$A = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
   var ToggleView = _ref => {
     var {
         children,
@@ -7835,7 +7835,8 @@
         isDisabled,
         isToggle,
         setIsToggled,
-        onToggle
+        onToggle,
+        views
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
@@ -7854,6 +7855,7 @@
       },
       ghost: {}
     };
+    var handleHover = () => setIsHovered(!isHovered);
     var handleToggle = () => {
       if (!isDisabled) {
         setIsToggled(prev => {
@@ -7871,12 +7873,12 @@
       width: "fit-content",
       color: isActive ? 'color.white' : toggleColor,
       backgroundColor: isActive ? toggleColor : 'transparent',
-      onMouseEnter: () => setIsHovered(true),
+      onMouseEnter: handleHover,
       onMouseLeave: () => setIsHovered(false),
       cursor: isDisabled ? 'not-allowed' : 'pointer',
       borderRadius: shape === 'pillShaped' ? '50px' : '8px',
       onClick: handleToggle
-    }, toggleVariants[variant], props), children);
+    }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
   };
 
   var _excluded$B = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
@@ -7940,7 +7942,8 @@
       // Prop 'shape' with default value 'rounded', determines the shape of the toggle buttons.
       shape = 'rounded',
       // Prop 'variant' with default value 'ghost' represents the visual style variant of the toggles.
-      variant = 'ghost'
+      variant = 'ghost',
+      views
     } = _ref;
     // handleToggle is a memoized callback that handles the toggle state changes.
     var handleToggle = React.useCallback((id, isActive) => {
@@ -7955,18 +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,
       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))));
   };
 
@@ -8095,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),
@@ -8109,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 => {