@app-studio/web 0.8.90 → 0.8.92

package/dist/web.umd.development.js

@@ -1,6 +1,6 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.trim-end.js'), require('react-router-dom'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), 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('core-js/modules/es.string.ends-with.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js'), require('core-js/modules/es.string.trim.js')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'react-router-dom', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js', 'core-js/modules/es.string.trim.js'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.trim-end.js'), require('react-router-dom'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), 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('core-js/modules/es.string.replace.js'), require('core-js/modules/es.string.ends-with.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js'), require('core-js/modules/es.string.trim.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'react-router-dom', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js', 'core-js/modules/es.string.trim.js'], factory) :
   (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, global.reactRouterDom, global.contrast, null, null, null, null, global.format, null, null, null, global.formik, null, null, null, global.zustand));
 }(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, reactRouterDom, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_parseInt_js, es_regexp_constructor_js, es_regexp_exec_js, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand) { 'use strict';
 
@@ -563,7 +563,7 @@
         n.style.lineHeight = lineHeight;
       }
     }, [text, maxLines]);
-    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       ref: containerRef,
       overflow: "hidden" // Crucial for final display state
     }, views == null ? void 0 : views.truncateText, rest, {
@@ -628,7 +628,7 @@
 
   var _excluded$3 = ["widthHeight", "color", "transform", "orientation", "children"],
     _excluded2$2 = ["widthHeight", "color", "filled", "strokeWidth"],
-    _excluded3$1 = ["widthHeight", "color", "filled", "strokeWidth"],
+    _excluded3$1 = ["widthHeight", "color", "strokeWidth", "filled"],
     _excluded4$1 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded5 = ["widthHeight", "color", "filled", "strokeWidth"],
     _excluded6 = ["widthHeight", "color", "filled", "strokeWidth"],
@@ -702,7 +702,9 @@
     _excluded74 = ["widthHeight", "color", "strokeWidth", "filled"],
     _excluded75 = ["widthHeight", "color", "strokeWidth", "filled"],
     _excluded76 = ["widthHeight", "color", "strokeWidth", "filled"],
-    _excluded77 = ["widthHeight", "color", "strokeWidth", "filled"];
+    _excluded77 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded78 = ["widthHeight", "color", "strokeWidth", "filled"],
+    _excluded79 = ["widthHeight", "color", "strokeWidth", "filled"];
   // Default wrapper component for consistent sizing and styling
   var IconWrapper = _ref => {
     var {
@@ -757,8 +759,8 @@
     var {
         widthHeight = 24,
         color = 'currentColor',
-        filled = true,
-        strokeWidth = 1
+        strokeWidth = 1,
+        filled = false
       } = _ref3,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
@@ -766,10 +768,19 @@
       color: color
     }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      "aria-hidden": "true",
+      "aria-hidden": "false",
       focusable: "false"
-    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-      d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M9.09 9a3 3 0 1 1 5.91 1c0 2-3 3-3 3"
+    }), /*#__PURE__*/React__default.createElement("line", {
+      x1: "12",
+      y1: "17",
+      x2: "12",
+      y2: "17"
     })));
   };
   // Example Icon Component: ChevronIcon
@@ -1749,31 +1760,13 @@
       "aria-hidden": "false",
       focusable: "false"
     }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-      x: "3",
-      y: "3",
       width: "18",
       height: "18",
+      x: "3",
+      y: "3",
       rx: "2"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      x1: "9",
-      y1: "3",
-      x2: "9",
-      y2: "21"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      x1: "12",
-      y1: "7",
-      x2: "17",
-      y2: "7"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      x1: "12",
-      y1: "11",
-      x2: "17",
-      y2: "11"
-    }), /*#__PURE__*/React__default.createElement("line", {
-      x1: "12",
-      y1: "15",
-      x2: "17",
-      y2: "15"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M9 3v18"
     })));
   };
   var FilterIcon = _ref41 => {
@@ -2726,6 +2719,59 @@
       y2: "17"
     })));
   };
+  var GiftIcon = _ref78 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = false
+      } = _ref78,
+      props = _objectWithoutPropertiesLoose(_ref78, _excluded78);
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      widthHeight: widthHeight,
+      color: color
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      viewBox: "0 0 24 24",
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
+      x: "3",
+      y: "8",
+      width: "18",
+      height: "4",
+      rx: "1"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M12 8V21"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M3 12v6a3 3 0 0 0 3 3h3V12"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M18 21h-3v-9h6v6a3 3 0 0 1-3 3z"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M12 8c-.5-2.5-4-3-5-1.5S9 10 12 8z"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M12 8c.5-2.5 4-3 5-1.5S15 10 12 8z"
+    })));
+  };
+  var ShieldIcon = _ref79 => {
+    var {
+        widthHeight = 24,
+        color = 'currentColor',
+        strokeWidth = 1,
+        filled = true
+      } = _ref79,
+      props = _objectWithoutPropertiesLoose(_ref79, _excluded79);
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      widthHeight: widthHeight,
+      color: color
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      viewBox: "0 0 24 24",
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
+      d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
+    })));
+  };
+  var CheckIcon = TickIcon;
 
   var Icon = {
     __proto__: null,
@@ -2805,7 +2851,10 @@
     ShapeIcon: ShapeIcon,
     RotateIcon: RotateIcon,
     DocumentIcon: DocumentIcon,
-    ChartIcon: ChartIcon
+    ChartIcon: ChartIcon,
+    GiftIcon: GiftIcon,
+    ShieldIcon: ShieldIcon,
+    CheckIcon: CheckIcon
   };
 
   /**
@@ -5551,6 +5600,273 @@
   };
   var Chart = ChartComponent;
 
+  /**
+   * Custom hook to manage cookie consent state
+   * @param cookieExpiration Number of days until the cookie expires
+   * @returns State and functions for managing cookie consent
+   */
+  var useCookieConsentState = function useCookieConsentState(cookieExpiration) {
+    if (cookieExpiration === void 0) {
+      cookieExpiration = 365;
+    }
+    // State for hover effects
+    var [isHovered, setIsHovered] = React.useState(false);
+    // State for tracking if consent has been given
+    var [hasConsent, setHasConsent] = React.useState(null);
+    // Cookie name for storing consent
+    var COOKIE_CONSENT_KEY = 'app-studio-cookie-consent';
+    // Check for existing consent when component mounts
+    React.useEffect(() => {
+      var storedConsent = localStorage.getItem(COOKIE_CONSENT_KEY);
+      if (storedConsent !== null) {
+        setHasConsent(storedConsent === 'true');
+      } else {
+        setHasConsent(false);
+      }
+    }, []);
+    /**
+     * Save consent to localStorage with expiration
+     */
+    var saveConsent = consent => {
+      localStorage.setItem(COOKIE_CONSENT_KEY, String(consent));
+      // Set expiration date
+      var expirationDate = new Date();
+      expirationDate.setDate(expirationDate.getDate() + cookieExpiration);
+      localStorage.setItem(COOKIE_CONSENT_KEY + "-expires", expirationDate.toISOString());
+      setHasConsent(consent);
+    };
+    /**
+     * Accept cookies
+     */
+    var acceptCookies = () => {
+      saveConsent(true);
+    };
+    /**
+     * Reset cookie consent (for testing)
+     */
+    var resetConsent = () => {
+      localStorage.removeItem(COOKIE_CONSENT_KEY);
+      localStorage.removeItem(COOKIE_CONSENT_KEY + "-expires");
+      setHasConsent(false);
+    };
+    return {
+      isHovered,
+      setIsHovered,
+      hasConsent,
+      acceptCookies,
+      resetConsent
+    };
+  };
+
+  /**
+   * Get theme-based styles for the CookieConsent component
+   */
+  var getThemes$1 = themeMode => {
+    var isDark = themeMode === 'dark';
+    return {
+      default: {
+        container: {
+          backgroundColor: isDark ? '#1f2937' : '#ffffff',
+          borderColor: isDark ? '#374151' : '#e5e7eb',
+          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+        },
+        content: {
+          color: isDark ? '#e5e7eb' : '#1f2937'
+        },
+        acceptButton: {
+          backgroundColor: '#3b82f6',
+          color: '#ffffff',
+          hoverBackgroundColor: '#2563eb'
+        },
+        customizeButton: {
+          backgroundColor: 'transparent',
+          color: isDark ? '#e5e7eb' : '#4b5563',
+          borderColor: isDark ? '#4b5563' : '#d1d5db',
+          hoverBackgroundColor: isDark ? '#374151' : '#f3f4f6'
+        }
+      },
+      info: {
+        container: {
+          backgroundColor: isDark ? '#1e3a8a' : '#eff6ff',
+          borderColor: isDark ? '#1e40af' : '#bfdbfe',
+          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+        },
+        content: {
+          color: isDark ? '#bfdbfe' : '#1e40af'
+        },
+        acceptButton: {
+          backgroundColor: '#3b82f6',
+          color: '#ffffff',
+          hoverBackgroundColor: '#2563eb'
+        },
+        customizeButton: {
+          backgroundColor: 'transparent',
+          color: isDark ? '#bfdbfe' : '#1e40af',
+          borderColor: isDark ? '#3b82f6' : '#93c5fd',
+          hoverBackgroundColor: isDark ? '#1e40af' : '#dbeafe'
+        }
+      },
+      primary: {
+        container: {
+          backgroundColor: isDark ? '#0c4a6e' : '#f0f9ff',
+          borderColor: isDark ? '#0369a1' : '#bae6fd',
+          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+        },
+        content: {
+          color: isDark ? '#bae6fd' : '#0369a1'
+        },
+        acceptButton: {
+          backgroundColor: '#0ea5e9',
+          color: '#ffffff',
+          hoverBackgroundColor: '#0284c7'
+        },
+        customizeButton: {
+          backgroundColor: 'transparent',
+          color: isDark ? '#bae6fd' : '#0369a1',
+          borderColor: isDark ? '#0ea5e9' : '#7dd3fc',
+          hoverBackgroundColor: isDark ? '#0369a1' : '#e0f2fe'
+        }
+      }
+    };
+  };
+
+  var _excluded$e = ["title", "description", "acceptButtonText", "customizeButtonText", "position", "variant", "onAccept", "onCustomize", "views", "showCustomizeButton", "cookieExpiration", "themeMode"];
+  /**
+   * CookieConsent View Component
+   *
+   * Renders a cookie consent banner with customizable styling, position, and content.
+   */
+  var CookieConsentView = _ref => {
+    var {
+        title = 'Nous utilisons des cookies',
+        description = 'Ce site utilise des cookies pour améliorer votre expérience. En continuant à naviguer sur ce site, vous acceptez notre utilisation des cookies conformément à notre politique de confidentialité.',
+        acceptButtonText = 'Accepter',
+        customizeButtonText = 'Personnaliser',
+        position = 'bottom',
+        variant = 'default',
+        onAccept,
+        onCustomize,
+        views,
+        showCustomizeButton = true,
+        cookieExpiration = 365,
+        themeMode: propThemeMode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    // Get theme context
+    var {
+      themeMode: contextThemeMode
+    } = appStudio.useTheme();
+    // Use provided theme mode or fall back to context
+    var themeMode = propThemeMode || contextThemeMode || 'light';
+    // Get state and functions from custom hook
+    var {
+      hasConsent,
+      acceptCookies
+    } = useCookieConsentState(cookieExpiration);
+    // Get theme-based styles
+    var themes = getThemes$1(themeMode);
+    var themeStyles = themes[variant];
+    // If user has already given consent, don't show the banner
+    if (hasConsent) {
+      return null;
+    }
+    // Handle accept button click
+    var handleAccept = () => {
+      acceptCookies();
+      if (onAccept) {
+        onAccept();
+      }
+    };
+    // Handle customize button click
+    var handleCustomize = () => {
+      if (onCustomize) {
+        onCustomize();
+      }
+    };
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "fixed",
+      left: 16,
+      right: 16,
+      zIndex: 1000,
+      padding: 16,
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderRadius: 8,
+      maxWidth: "800px",
+      marginX: "auto"
+    }, position === 'bottom' ? {
+      bottom: 16
+    } : {
+      top: 16
+    }, themeStyles.container, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+      gap: 12,
+      maxWidth: 1200,
+      marginX: "auto"
+    }, title && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      fontWeight: "bold",
+      fontSize: 18,
+      color: "color.black"
+    }, views == null ? void 0 : views.title), title)), description && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      fontSize: 14,
+      color: "color.black"
+    }, views == null ? void 0 : views.description), typeof description === 'string' ? description : description)), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      gap: 12,
+      justifyContent: "flex-end",
+      marginTop: 8
+    }, views == null ? void 0 : views.buttonGroup), showCustomizeButton && (/*#__PURE__*/React__default.createElement(Button, Object.assign({
+      variant: "outline",
+      onClick: handleCustomize,
+      size: "sm"
+    }, views == null ? void 0 : views.customizeButton), customizeButtonText)), /*#__PURE__*/React__default.createElement(Button, Object.assign({
+      variant: "primary",
+      onClick: handleAccept,
+      size: "sm"
+    }, views == null ? void 0 : views.acceptButton), acceptButtonText))));
+  };
+
+  /**
+   * CookieConsent Component
+   *
+   * A component for displaying a cookie consent banner with customizable styling and content.
+   *
+   * Features:
+   * - Customizable title and description
+   * - Configurable button text
+   * - Multiple visual variants
+   * - Position control (top or bottom)
+   * - Theme mode support (light or dark)
+   * - Custom styling via views prop
+   *
+   * @example
+   * // Basic usage
+   * <CookieConsent />
+   *
+   * @example
+   * // With custom text
+   * <CookieConsent
+   *   title="Avis de confidentialité"
+   *   description="Nous utilisons des cookies pour améliorer votre expérience."
+   *   acceptButtonText="J'accepte"
+   * />
+   *
+   * @example
+   * // With custom styling and callbacks
+   * <CookieConsent
+   *   variant="primary"
+   *   position="top"
+   *   onAccept={() => console.log('Cookies accepted')}
+   *   onCustomize={() => openPreferencesModal()}
+   *   views={{
+   *     container: { backgroundColor: 'color.blue.50' },
+   *     title: { color: 'color.blue.800' }
+   *   }}
+   * />
+   */
+  var CookieConsentComponent = props => {
+    return /*#__PURE__*/React__default.createElement(CookieConsentView, Object.assign({}, props));
+  };
+  var CookieConsent = CookieConsentComponent;
+
   var useContextMenuState = props => {
     var {
       size,
@@ -5728,7 +6044,7 @@
     };
   };
 
-  var _excluded$e = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
+  var _excluded$f = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
     _excluded2$6 = ["items", "children", "position", "side", "align", "views", "style"],
     _excluded3$5 = ["item", "children", "onSelect", "isDisabled", "views"],
     _excluded4$5 = ["views"],
@@ -5784,7 +6100,7 @@
         isDisabled = false,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
     var {
       triggerRef,
       contentId,
@@ -6067,7 +6383,7 @@
     }));
   };
 
-  var _excluded$f = ["children", "items", "size", "variant", "disableNativeContextMenu", "onOpenChange", "views"];
+  var _excluded$g = ["children", "items", "size", "variant", "disableNativeContextMenu", "onOpenChange", "views"];
   /**
    * ContextMenu component for displaying a custom context menu on right-click.
    * Supports both data-driven approach (with items prop) and compound component pattern.
@@ -6082,7 +6398,7 @@
         onOpenChange,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
     var state = useContextMenuState({
       size,
       variant,
@@ -6134,7 +6450,7 @@
   ContextMenu.Divider = ContextMenuDivider;
   ContextMenu.Separator = ContextMenuSeparator; // Add the Separator component
 
-  var _excluded$g = ["src", "color", "views", "themeMode"],
+  var _excluded$h = ["src", "color", "views", "themeMode"],
     _excluded2$7 = ["path"];
   var FileSVG = _ref => {
     var {
@@ -6142,7 +6458,7 @@
         color,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
     var {
       getColor,
       themeMode
@@ -6216,7 +6532,7 @@
     };
   };
 
-  var _excluded$h = ["children", "views"];
+  var _excluded$i = ["children", "views"];
   var HelperText = _ref => {
     var {
         children,
@@ -6224,7 +6540,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     return /*#__PURE__*/React__default.createElement(Text
     // Typography properties
     , Object.assign({
@@ -6250,7 +6566,7 @@
     }, views['helperText'], props), children);
   };
 
-  var _excluded$i = ["children", "helperText", "error", "views"];
+  var _excluded$j = ["children", "helperText", "error", "views"];
   var FieldContainer = _ref => {
     var {
         children,
@@ -6258,7 +6574,7 @@
         error = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
     return /*#__PURE__*/React__default.createElement(appStudio.Vertical
     // Layout properties
     , Object.assign({
@@ -6374,7 +6690,7 @@
     paddingRight: '16px'
   };
 
-  var _excluded$j = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "showLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "views"];
+  var _excluded$k = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "showLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "views"];
   var FieldContent = _ref => {
     var {
         shadow,
@@ -6392,7 +6708,7 @@
           pickerBox: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
     // Determine if the field is in an interactive state
     var isInteractive = (isHovered || isFocused) && !isDisabled;
     // Set the appropriate color based on state
@@ -6421,12 +6737,12 @@
     }, showLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], views['box'], props), children);
   };
 
-  var _excluded$k = ["children"];
+  var _excluded$l = ["children"];
   var FieldIcons = _ref => {
     var {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
       gap: 10,
       right: 16,
@@ -6478,7 +6794,7 @@
     }
   };
 
-  var _excluded$l = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size", "dropDown"];
+  var _excluded$m = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size", "dropDown"];
   var LabelView = _ref => {
     var {
         children,
@@ -6494,7 +6810,7 @@
         size = 'sm'
         // The fontSize prop for the Element is determined by the 'size' prop passed to LabelView.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
     // The fontStyle prop toggles between 'italic' and 'normal' based on the 'isItalic' boolean prop.
     var headingStyles = heading ? HeadingSizes$1[heading] : {};
     // fontWeight is derived from the Typography module, ensuring consistent font weighting across the app.
@@ -6526,7 +6842,7 @@
   var Label = LabelComponent;
   // Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
-  var _excluded$m = ["children", "size", "error", "color", "views", "helperText"];
+  var _excluded$n = ["children", "size", "error", "color", "views", "helperText"];
   var FieldLabel = _ref => {
     var {
         children,
@@ -6537,7 +6853,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     return /*#__PURE__*/React__default.createElement(Label
     // Position properties
     , Object.assign({
@@ -6558,12 +6874,12 @@
     }, views['label'], props), children);
   };
 
-  var _excluded$n = ["children"];
+  var _excluded$o = ["children"];
   var FieldWrapper = _ref => {
     var {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
     return /*#__PURE__*/React__default.createElement(appStudio.Vertical
     // Layout properties
     , Object.assign({
@@ -6596,7 +6912,7 @@
     xl: 28
   };
 
-  var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
+  var _excluded$p = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
     _excluded2$8 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
     _excluded3$6 = ["option", "size", "removeOption"],
     _excluded4$6 = ["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"];
@@ -6614,7 +6930,7 @@
         callback = () => {},
         style
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
     // Handles the click event on an option by invoking the callback with the selected option's value
     var handleOptionClick = option => callback(option);
     // Toggles the hover state on the item
@@ -7107,7 +7423,7 @@
     }
   };
 
-  var _excluded$p = ["id", "name", "label", "inActiveChild", "isChecked", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
+  var _excluded$q = ["id", "name", "label", "inActiveChild", "isChecked", "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));
@@ -7136,7 +7452,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
     var handleToggle = event => {
       if (!isReadOnly) {
         setValue(!value);
@@ -7260,7 +7576,7 @@
     // Export of the useTextAreaState hook for external usage.
   };
 
-  var _excluded$q = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
+  var _excluded$r = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
   var TextAreaView = _ref => {
     var {
         id,
@@ -7295,7 +7611,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
     var showLabel = !!(isFocused && label);
     /**
      * Styles for the textarea field
@@ -7434,7 +7750,7 @@
     };
   };
 
-  var _excluded$r = ["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 _excluded$s = ["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"];
   /**
    * Input component for text fields
    */
@@ -7480,7 +7796,7 @@
         onBlur = () => {},
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
     var {
       getColor,
       themeMode
@@ -7736,7 +8052,7 @@
     }
   };
 
-  var _excluded$s = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
+  var _excluded$t = ["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,
@@ -7763,7 +8079,7 @@
         },
         infoText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
     var handleHover = () => setIsHovered(!isHovered);
     var handleChange = () => {
       if (!isReadOnly && !isDisabled) {
@@ -9349,11 +9665,11 @@
     xl: 16
   };
 
-  var _excluded$t = ["size"],
+  var _excluded$u = ["size"],
     _excluded2$9 = ["size"],
     _excluded3$7 = ["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$t);
+    var props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "ul"
     }, props));
@@ -9594,7 +9910,7 @@
     };
   };
 
-  var _excluded$u = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+  var _excluded$v = ["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));
@@ -9627,7 +9943,7 @@
         onChange,
         onChangeText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
     var showLabel = !!(isFocused && label);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);
@@ -9714,7 +10030,7 @@
     }, props, textFieldStates);
   };
 
-  var _excluded$v = ["visibleIcon", "hiddenIcon"],
+  var _excluded$w = ["visibleIcon", "hiddenIcon"],
     _excluded2$a = ["isVisible", "setIsVisible"];
   var PasswordComponent = _ref => {
     var {
@@ -9725,7 +10041,7 @@
           widthHeight: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
     var _usePasswordState = usePasswordState(props),
       {
         isVisible,
@@ -9779,7 +10095,7 @@
     };
   };
 
-  var _excluded$w = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
+  var _excluded$x = ["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 {
@@ -9804,7 +10120,7 @@
         setIsDropdownVisible
         // Collects all further props not destructured explicitly.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
     // Sets up an effect to handle clicking outside the dropdown to close it.
     React.useEffect(() => {
       var handleClickOutside = event => {
@@ -9916,7 +10232,7 @@
     }))))))))))));
   };
 
-  var _excluded$x = ["id", "name", "items", "placeholder", "searchPlaceholder"];
+  var _excluded$y = ["id", "name", "items", "placeholder", "searchPlaceholder"];
   // Defines the ComboBoxComponent functional component with ComboBoxProps
   var ComboBoxComponent = _ref => {
     var {
@@ -9932,7 +10248,7 @@
         searchPlaceholder
         // Destructures the rest of the props not explicitly defined
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
     // Initializes ComboBox state using custom hook with items and placeholders
     var state = useComboBoxState(items, placeholder, searchPlaceholder);
     return (
@@ -10254,7 +10570,7 @@
     };
   };
 
-  var _excluded$y = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
+  var _excluded$z = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
   // Create a context for OTP input slots
   var OTPInputContext = /*#__PURE__*/React.createContext({
     slots: [],
@@ -10308,7 +10624,7 @@
         onFocus = () => {}
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     appStudio.useTheme(); // Initialize theme context
     var showLabel = !!label;
     // Create context value for slots
@@ -10540,7 +10856,7 @@
   };
   var OTPInput = OTPInputComponent;
 
-  var _excluded$z = ["children", "autoFocus", "initFocus", "onChange"];
+  var _excluded$A = ["children", "autoFocus", "initFocus", "onChange"];
   var FocusContext = /*#__PURE__*/React.createContext({
     active: false,
     focusNextInput: () => {},
@@ -10556,7 +10872,7 @@
         initFocus,
         onChange = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     var formik$1 = formik.useFormikContext();
     React.useEffect(() => {
       onChange(formik$1.values);
@@ -10604,7 +10920,7 @@
     }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
   };
 
-  var _excluded$A = ["name", "type"];
+  var _excluded$B = ["name", "type"];
   var getInputTypeProps = type => {
     switch (type) {
       case 'email':
@@ -10643,7 +10959,7 @@
         name,
         type
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
     var focus = useFormFocus();
     var {
       touched,
@@ -10687,13 +11003,13 @@
     } : {});
   };
 
-  var _excluded$B = ["value"];
+  var _excluded$C = ["value"];
   var CheckboxComponent$1 = props => {
     var _useFormikInput = useFormikInput(props),
       {
         value
       } = _useFormikInput,
-      formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$B);
+      formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$C);
     formProps.isChecked = value;
     var checkboxStates = useCheckboxState(props);
     return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -10751,11 +11067,11 @@
    */
   var FormikTextArea = TextAreaComponent$1;
 
-  var _excluded$C = ["value"];
+  var _excluded$D = ["value"];
   var TextFieldComponent$1 = props => {
     var formProps = useFormikInput(props);
     var _useTextFieldState = useTextFieldState(props),
-      textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$C);
+      textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$D);
     return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
   };
   /**
@@ -10763,7 +11079,7 @@
    */
   var FormikTextField = TextFieldComponent$1;
 
-  var _excluded$D = ["visibleIcon", "hiddenIcon"],
+  var _excluded$E = ["visibleIcon", "hiddenIcon"],
     _excluded2$b = ["isVisible", "setIsVisible"];
   var PasswordComponent$1 = _ref => {
     var {
@@ -10774,7 +11090,7 @@
           widthHeight: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
     var formProps = useFormikInput(props);
     var _usePasswordState = usePasswordState(formProps),
       {
@@ -10799,14 +11115,14 @@
    */
   var FormikPassword = PasswordComponent$1;
 
-  var _excluded$E = ["items", "placeholder", "searchPlaceholder"];
+  var _excluded$F = ["items", "placeholder", "searchPlaceholder"];
   var ComboBoxComponent$1 = _ref => {
     var {
         items,
         placeholder,
         searchPlaceholder
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
     var formProps = useFormikInput(props);
     var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
     // Ensure the onChange function from formProps is being called when an item is selected
@@ -11087,7 +11403,7 @@
     }
   };
 
-  var _excluded$F = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "backgroundColor", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
+  var _excluded$G = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "backgroundColor", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
   var SliderView = _ref => {
     var _views$tooltip, _views$tooltip2;
     var {
@@ -11130,7 +11446,7 @@
           tooltip: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
     var {
       getColor,
       themeMode
@@ -12008,7 +12324,7 @@
     }, views == null ? void 0 : views.view)));
   };
 
-  var _excluded$G = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress", "fileType"];
+  var _excluded$H = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress", "fileType"];
   var Uploader = _ref => {
     var {
         accept = '*/*',
@@ -12021,7 +12337,7 @@
         progress = 0,
         fileType
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
     var {
       previewUrl,
       thumbnailUrl,
@@ -12212,7 +12528,7 @@
     }
   };
 
-  var _excluded$H = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
+  var _excluded$I = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
     _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
     _excluded3$8 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
     _excluded4$7 = ["children", "views"],
@@ -12227,7 +12543,7 @@
         position = 'center',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -12523,7 +12839,7 @@
     }
   };
 
-  var _excluded$I = ["href", "children", "views"];
+  var _excluded$J = ["href", "children", "views"];
   // Create context for the NavigationMenu
   var NavigationMenuContext = /*#__PURE__*/React.createContext({
     activeItemId: null,
@@ -12758,7 +13074,7 @@
         children,
         views
       } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded$I);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded$J);
     var {
       itemValue,
       isDisabled
@@ -12825,7 +13141,7 @@
     })))));
   };
 
-  var _excluded$J = ["items", "children", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
+  var _excluded$K = ["items", "children", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
   /**
    * NavigationMenu component for creating navigation menus with optional nested items.
    * Supports both data-driven approach (with items prop) and compound component pattern.
@@ -12842,7 +13158,7 @@
         onItemActivate,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
     var {
       activeItemId,
       setActiveItemId,
@@ -13297,6 +13613,393 @@
   // Export the component wrapped in React.memo for performance optimization
   var Tabs = /*#__PURE__*/React__default.memo(TabsComponent);
 
+  /**
+   * Custom hook for managing Title component state
+   */
+  var useTitleState = props => {
+    var {
+      children,
+      // Original children
+      _isInView = false,
+      alternateHighlightText = [],
+      alternateAnimation = false,
+      // Default to false as per prop definition
+      alternateDuration = 3000,
+      highlightText: initialHighlightText,
+      // Renamed to avoid confusion with the dynamic target
+      highlightTypewriter = false,
+      highlightTypewriterDuration = 1500
+    } = props;
+    // State for the final text to be displayed (could be original children or alternating text)
+    var [finalDisplayedText, setFinalDisplayedText] = React.useState(children);
+    // State for the text that should be actively highlighted (could be initialHighlightText or a word from alternateHighlightText)
+    var [activeHighlightTarget, setActiveHighlightTarget] = React.useState(initialHighlightText);
+    // We don't need state for typewriter text anymore as we're using the TypewriterEffect component
+    // Handle alternating highlight text animation
+    React.useEffect(() => {
+      // If not using alternating animation or conditions not met, reset to initial/non-alternating state
+      if (!alternateAnimation || alternateHighlightText.length === 0 || !_isInView || typeof children !== 'string' ||
+      // Base text must be a string for replacement
+      typeof initialHighlightText !== 'string' // Placeholder must be a string
+      ) {
+        setFinalDisplayedText(children);
+        setActiveHighlightTarget(initialHighlightText);
+        return () => {};
+      }
+      // Proceed with alternating animation
+      var baseText = children;
+      var placeholder = initialHighlightText;
+      var currentIndex = 0;
+      // Function to update the state for alternating text
+      var updateAlternatingState = index => {
+        var currentWordToHighlight = alternateHighlightText[index];
+        // Replace the placeholder in the baseText with the current alternating word
+        var regex = new RegExp(placeholder, 'gi');
+        var newContent = baseText.replace(regex, currentWordToHighlight);
+        setFinalDisplayedText(newContent);
+        setActiveHighlightTarget(currentWordToHighlight); // Set the current word as the highlight target
+      };
+      // Set initial alternating state
+      updateAlternatingState(currentIndex);
+      // Create interval to cycle through the alternateHighlightText array
+      var interval = setInterval(() => {
+        currentIndex = (currentIndex + 1) % alternateHighlightText.length;
+        updateAlternatingState(currentIndex);
+      }, alternateDuration);
+      return () => clearInterval(interval);
+    }, [alternateAnimation, alternateHighlightText, alternateDuration, initialHighlightText, children, _isInView]);
+    // We don't need a separate effect for typewriter animation anymore
+    // as we're using the TypewriterEffect component directly in the view
+    return {
+      finalDisplayedText,
+      activeHighlightTarget,
+      highlightTypewriter
+    };
+  };
+
+  /**
+   * Font sizes for different title sizes
+   */
+  var TitleSizes = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 32,
+    xl: 40,
+    '2xl': 48,
+    '3xl': 56,
+    '4xl': 64,
+    '5xl': 72,
+    '6xl': 80
+  };
+  /**
+   * Line heights for different title sizes
+   */
+  var LineHeights$1 = {
+    xs: 24,
+    sm: 28,
+    md: 32,
+    lg: 40,
+    xl: 48,
+    '2xl': 56,
+    '3xl': 64,
+    '4xl': 72,
+    '5xl': 80,
+    '6xl': 88
+  };
+  /**
+   * Default styles for different highlight types
+   */
+  var HighlightStyles = {
+    underline: color => ({
+      textDecoration: 'underline',
+      textDecorationColor: color,
+      textDecorationThickness: '4px',
+      textUnderlineOffset: '4px'
+    }),
+    background: color => ({
+      backgroundColor: color,
+      color: 'color.white',
+      padding: '0 8px',
+      borderRadius: '4px'
+    }),
+    gradient: (color, secondaryColor) => ({
+      background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
+      backgroundClip: 'text',
+      webkitBackgroundClip: 'text',
+      color: 'transparent',
+      webkitTextFillColor: 'transparent',
+      display: 'inline-block',
+      textShadow: 'none'
+    }),
+    outline: color => ({
+      webkitTextStroke: "1px " + color,
+      webkitTextFillColor: 'transparent',
+      color: 'transparent',
+      textShadow: 'none'
+    }),
+    glow: color => ({
+      color: color,
+      textShadow: "0 0 10px " + color + "80, 0 0 20px " + color + "40, 0 0 30px " + color + "20"
+    })
+  };
+
+  var _excluded$L = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
+  /**
+   * A component that creates a typewriter effect for text
+   */
+  var TypewriterEffect = _ref => {
+    var {
+        text,
+        typingSpeed = 50,
+        pauseTime = 500,
+        onComplete,
+        showCursor = true,
+        cursorColor = 'currentColor',
+        textStyle
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    // Convert text to array if it's a string
+    var textArray = Array.isArray(text) ? text : [text];
+    // State for the currently displayed text
+    var [displayedText, setDisplayedText] = React.useState(textArray.map(() => ''));
+    // State to track if typing is complete
+    var [isComplete, setIsComplete] = React.useState(false);
+    // State to track which text item we're currently typing
+    var [currentTextIndex, setCurrentTextIndex] = React.useState(0);
+    // State to track the character position within the current text
+    var [charIndex, setCharIndex] = React.useState(0);
+    React.useEffect(() => {
+      // Reset state when text changes
+      setDisplayedText(textArray.map(() => ''));
+      setIsComplete(false);
+      setCurrentTextIndex(0);
+      setCharIndex(0);
+    }, [text]);
+    React.useEffect(() => {
+      // If all text is typed, call onComplete and return
+      if (isComplete) {
+        if (onComplete) onComplete();
+        return;
+      }
+      // Get the current text we're typing
+      var currentText = textArray[currentTextIndex];
+      // If we've typed all characters in the current text
+      if (charIndex >= currentText.length) {
+        // If we've typed all texts, we're done
+        if (currentTextIndex >= textArray.length - 1) {
+          setIsComplete(true);
+          return;
+        }
+        // Otherwise, move to the next text after a pause
+        var _timeout = setTimeout(() => {
+          setCurrentTextIndex(prev => prev + 1);
+          setCharIndex(0);
+        }, pauseTime);
+        return () => clearTimeout(_timeout);
+      }
+      // Type the next character
+      var timeout = setTimeout(() => {
+        setDisplayedText(prev => {
+          var newText = [...prev];
+          newText[currentTextIndex] = currentText.substring(0, charIndex + 1);
+          return newText;
+        });
+        setCharIndex(prev => prev + 1);
+      }, typingSpeed);
+      return () => clearTimeout(timeout);
+    }, [textArray, currentTextIndex, charIndex, isComplete, onComplete, pauseTime, typingSpeed]);
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, displayedText.map((text, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: index
+    }, text, showCursor && index === currentTextIndex && !isComplete && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+      as: "span",
+      display: "inline-block",
+      width: "0.1em",
+      height: "1em",
+      backgroundColor: cursorColor,
+      style: Object.assign({
+        animation: 'blink 1s step-end infinite',
+        verticalAlign: 'text-bottom',
+        marginLeft: '1px'
+      }, textStyle)
+    }))))));
+  };
+
+  var _excluded$M = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "centered", "views", "highlightAnimate", "animate", "highlightTypewriter", "highlightTypewriterDuration"];
+  function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
+  }
+  var TitleView = _ref => {
+    var {
+        children,
+        highlightText,
+        highlightStyle = 'background',
+        highlightColor = 'theme.primary',
+        highlightSecondaryColor,
+        size = 'xl',
+        centered = false,
+        views,
+        highlightAnimate,
+        animate,
+        highlightTypewriter: propHighlightTypewriter = false,
+        highlightTypewriterDuration = 3000
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
+    var {
+      ref,
+      inView
+    } = appStudio.useInView();
+    var {
+      getColor,
+      themeMode: ctxMode
+    } = appStudio.useTheme();
+    var themeMode = props.themeMode || ctxMode;
+    // Resolve colors, handling both theme colors and direct hex values
+    var resolveColorValue = colorValue => {
+      // If it's already a hex color, return it directly
+      if (colorValue.startsWith('#')) {
+        return colorValue;
+      }
+      // Otherwise, use the theme's getColor function
+      return getColor(colorValue, {
+        themeMode
+      });
+    };
+    var resolvedColor = resolveColorValue(highlightColor);
+    var resolvedSecondary = highlightSecondaryColor ? resolveColorValue(highlightSecondaryColor) : undefined;
+    var {
+      finalDisplayedText,
+      activeHighlightTarget,
+      highlightTypewriter
+    } = useTitleState(Object.assign({
+      children,
+      highlightText,
+      _isInView: inView,
+      highlightTypewriter: propHighlightTypewriter,
+      highlightTypewriterDuration
+    }, props));
+    var fontSize = TitleSizes[size];
+    var lineHeight = LineHeights$1[size];
+    // Get the text to display
+    var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
+    if (typeof text === 'string' && activeHighlightTarget) {
+      var pattern = new RegExp("(" + escapeRegExp(Array.isArray(activeHighlightTarget) ? activeHighlightTarget.join('|') : activeHighlightTarget) + ")", 'gi');
+      var parts = [];
+      var lastIndex = 0;
+      var match;
+      while (match = pattern.exec(text)) {
+        if (match.index > lastIndex) {
+          parts.push(text.substring(lastIndex, match.index));
+        }
+        parts.push({
+          highlight: true,
+          text: match[0]
+        });
+        lastIndex = match.index + match[0].length;
+      }
+      if (lastIndex < text.length) {
+        parts.push(text.substring(lastIndex));
+      }
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+        ref: ref,
+        as: "h1",
+        fontSize: fontSize,
+        lineHeight: lineHeight + "px",
+        fontWeight: "bold",
+        textAlign: centered ? 'center' : 'left',
+        animate: inView ? animate : undefined
+      }, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+        key: part.text + "-" + idx,
+        as: "span",
+        display: "inline",
+        animate: inView ? highlightAnimate : undefined
+      }, HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary), views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
+        text: part.text,
+        typingSpeed: Math.max(30, highlightTypewriterDuration / (part.text.length * 10)),
+        showCursor: true,
+        cursorColor: "currentColor"
+      })) : part.text))));
+    }
+    // If highlightStyle is provided but no highlightText, apply the style to the entire title
+    if (highlightStyle && !activeHighlightTarget) {
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+        ref: ref,
+        as: "h1",
+        fontSize: fontSize,
+        lineHeight: lineHeight + "px",
+        fontWeight: "bold",
+        textAlign: centered ? 'center' : 'left',
+        animate: inView ? animate : undefined
+      }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+        as: "span",
+        display: "inline",
+        animate: inView ? highlightAnimate : undefined
+      }, HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary), views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
+        text: text,
+        typingSpeed: Math.max(30, highlightTypewriterDuration / (text.length * 10)),
+        showCursor: true,
+        cursorColor: "currentColor"
+      })) : text));
+    }
+    // Default case - no highlighting
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+      ref: ref,
+      as: "h1",
+      fontSize: fontSize,
+      lineHeight: lineHeight + "px",
+      fontWeight: "bold",
+      textAlign: centered ? 'center' : 'left',
+      animate: inView ? animate : undefined
+    }, views == null ? void 0 : views.container, props), text);
+  };
+
+  /**
+   * Title Component
+   *
+   * A component for rendering animated and highlighted titles in hero sections.
+   *
+   * Features:
+   * - Text highlighting with various styles (background, underline, gradient, outline, glow)
+   * - Multiple animation options (fade, slide, typewriter, reveal)
+   * - Responsive sizing
+   * - Customizable styling
+   *
+   * @example
+   * // Basic usage
+   * <Title>Welcome to Our Platform</Title>
+   *
+   * @example
+   * // With highlighting
+   * <Title highlightText="Platform" highlightStyle="background" highlightColor="theme.primary">
+   *   Welcome to Our Platform
+   * </Title>
+   *
+   * @example
+   * // With animation
+   * <Title
+   *   animation="fadeIn"
+   *   animationDuration="1.5s"
+   *   size="2xl"
+   * >
+   *   Animated Title
+   * </Title>
+   *
+   * @example
+   * // With multiple highlights
+   * <Title
+   *   highlightText={["Amazing", "Features"]}
+   *   highlightStyle="gradient"
+   *   highlightColor="theme.primary"
+   *   highlightSecondaryColor="theme.secondary"
+   * >
+   *   Discover our Amazing Product with Great Features
+   * </Title>
+   */
+  var TitleComponent = props => {
+    return /*#__PURE__*/React__default.createElement(TitleView, Object.assign({}, props));
+  };
+  var Title = TitleComponent;
+
   // Declares the useToggleState function which takes defaultToggled parameter to initialize the toggle state.
   var useToggleState = defaultToggled => {
     // Creates a stateful value isHovered for tracking hover state and a function setIsHovered to update that state, initially false.
@@ -13312,7 +14015,7 @@
     };
   };
 
-  var _excluded$K = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
+  var _excluded$N = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
   var ToggleView = _ref => {
     var {
         children,
@@ -13326,7 +14029,7 @@
         onToggle,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
     var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
     var isActive = !!(isToggle || isHovered);
     var toggleVariants = {
@@ -13369,7 +14072,7 @@
     }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
   };
 
-  var _excluded$L = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+  var _excluded$O = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
   // Destructuring properties from ToggleProps to be used within the ToggleComponent.
   var ToggleComponent = _ref => {
     var {
@@ -13381,7 +14084,7 @@
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,
@@ -13772,7 +14475,7 @@
     return positions[side];
   };
 
-  var _excluded$M = ["children", "views"],
+  var _excluded$P = ["children", "views"],
     _excluded2$d = ["items", "side", "align", "views"],
     _excluded3$9 = ["item", "views"],
     _excluded4$8 = ["views"],
@@ -13810,7 +14513,7 @@
         children,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$P);
     var {
       isOpen,
       setIsOpen
@@ -13970,7 +14673,7 @@
     }));
   };
 
-  var _excluded$N = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+  var _excluded$Q = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
   /**
    * DropdownMenu component for displaying a menu when clicking on a trigger element.
    */
@@ -13985,7 +14688,7 @@
         defaultOpen = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Q);
     var {
       isOpen,
       setIsOpen,
@@ -14183,7 +14886,7 @@
     return rect;
   };
 
-  var _excluded$O = ["children", "views", "asChild"],
+  var _excluded$R = ["children", "views", "asChild"],
     _excluded2$e = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
   // Create context for the HoverCard
   var HoverCardContext = /*#__PURE__*/React.createContext({
@@ -14222,7 +14925,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$R);
     var {
       openCard,
       closeCard,
@@ -14309,7 +15012,7 @@
     }, views == null ? void 0 : views.container, props), children);
   };
 
-  var _excluded$P = ["children", "views", "openDelay", "closeDelay"];
+  var _excluded$S = ["children", "views", "openDelay", "closeDelay"];
   /**
    * HoverCard component displays floating content when hovering over a trigger element.
    * Supports configurable open and close delays for a smoother user experience.
@@ -14321,7 +15024,7 @@
         openDelay,
         closeDelay
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
     var hoverCardState = useHoverCardState({
       openDelay,
       closeDelay
@@ -14451,7 +15154,7 @@
     };
   };
 
-  var _excluded$Q = ["children", "orientation", "size", "variant", "views"];
+  var _excluded$T = ["children", "orientation", "size", "variant", "views"];
   // Create context for the Menubar
   var MenubarContext = /*#__PURE__*/React.createContext({
     activeMenuId: null,
@@ -14485,7 +15188,7 @@
         variant = 'default',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Q);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$T);
     var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
     return /*#__PURE__*/React__default.createElement(Container, Object.assign({
       role: "menubar",
@@ -14671,7 +15374,7 @@
     })))))));
   };
 
-  var _excluded$R = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+  var _excluded$U = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
   /**
    * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
    */
@@ -14685,7 +15388,7 @@
         defaultOpenMenuId = null,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
     var {
       activeMenuId,
       setActiveMenuId,
@@ -14841,7 +15544,7 @@
     }
   };
 
-  var _excluded$S = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+  var _excluded$V = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
   var PaginationView = _ref => {
     var {
         currentPage,
@@ -14872,7 +15575,7 @@
         visiblePageNumbers,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
     var handlePageChange = page => {
       if (page < 1 || page > totalPages || page === currentPage) {
         return;
@@ -14991,7 +15694,7 @@
     }, option.label))))));
   };
 
-  var _excluded$T = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+  var _excluded$W = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
   /**
    * Pagination component for navigating through pages of content.
    */
@@ -15012,7 +15715,7 @@
         shape = 'rounded',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
     var {
       visiblePageNumbers
     } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -15082,7 +15785,7 @@
     }
   };
 
-  var _excluded$U = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+  var _excluded$X = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
   var SeparatorView = _ref => {
     var {
         orientation = 'horizontal',
@@ -15094,7 +15797,7 @@
         decorative = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
     // Access theme if needed for future enhancements
     var {
       themeMode
@@ -15332,7 +16035,7 @@
     bounce: 'width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)'
   };
 
-  var _excluded$V = ["children", "showToggleButton", "views"],
+  var _excluded$Y = ["children", "showToggleButton", "views"],
     _excluded2$f = ["children", "views"],
     _excluded3$a = ["children", "views"],
     _excluded4$9 = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
@@ -15365,7 +16068,7 @@
         showToggleButton = true,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Y);
     var {
       isExpanded,
       toggleExpanded,
@@ -15520,7 +16223,7 @@
     }))));
   };
 
-  var _excluded$W = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
+  var _excluded$Z = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
   /**
    * Sidebar component for creating collapsible, themeable and customizable sidebars.
    */
@@ -15542,7 +16245,7 @@
         breakpointBehavior = 'overlay',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
     var {
       isExpanded,
       toggleExpanded,
@@ -16007,7 +16710,7 @@
     }
   };
 
-  var _excluded$X = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
+  var _excluded$_ = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
     _excluded2$g = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
     _excluded3$b = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
   // Create context for the Resizable component
@@ -16052,7 +16755,7 @@
         onCollapseChange,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$_);
     var {
       orientation,
       registerPanel,
@@ -16267,7 +16970,7 @@
     }, ResizableOrientations[orientation], views == null ? void 0 : views.container, props), children);
   };
 
-  var _excluded$Y = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
+  var _excluded$$ = ["children", "orientation", "size", "variant", "defaultSizes", "onSizesChange", "minSize", "maxSize", "collapsible", "autoSaveId", "storage", "keyboardResizeBy", "views"];
   /**
    * Resizable component for creating resizable panel groups and layouts.
    */
@@ -16287,7 +16990,7 @@
         keyboardResizeBy = 10,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     var {
       isResizing,
       setIsResizing,
@@ -17055,7 +17758,7 @@
     color: 'color.gray.500'
   };
 
-  var _excluded$Z = ["value", "onValueChange", "placeholder", "views"],
+  var _excluded$10 = ["value", "onValueChange", "placeholder", "views"],
     _excluded2$h = ["children", "views"],
     _excluded3$c = ["heading", "children", "views"],
     _excluded4$a = ["item", "selected", "onSelect", "views"],
@@ -17087,7 +17790,7 @@
         placeholder = 'Type a command or search...',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$10);
     var inputRef = React.useRef(null);
     // Focus input when component mounts
     React__default.useEffect(() => {
@@ -17270,7 +17973,7 @@
     })))), footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandFooterStyles, views == null ? void 0 : views.footer), footer)))));
   };
 
-  var _excluded$_ = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
+  var _excluded$11 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
   /**
    * Command component for displaying a command palette with search functionality.
    */
@@ -17288,7 +17991,7 @@
         footer,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
     var {
       search,
       setSearch,
@@ -17575,7 +18278,7 @@
     }
   };
 
-  var _excluded$$ = ["children", "views", "asChild"],
+  var _excluded$12 = ["children", "views", "asChild"],
     _excluded2$i = ["children", "views"],
     _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
   // Create context for the Tooltip
@@ -17611,7 +18314,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$12);
     var {
       openTooltip,
       closeTooltip,
@@ -17704,7 +18407,7 @@
     }, TooltipSizes[size], TooltipVariants[variant], positionStyles, views == null ? void 0 : views.content), typeof content === 'string' ? (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, views == null ? void 0 : views.text), content)) : content, showArrow && /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, arrowStyles, views == null ? void 0 : views.arrow)))));
   };
 
-  var _excluded$10 = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
+  var _excluded$13 = ["content", "children", "position", "align", "size", "variant", "openDelay", "closeDelay", "showArrow", "defaultOpen", "isDisabled", "views"];
   /**
    * Tooltip component for displaying additional information when hovering over an element.
    * Supports configurable positions, delays, and styling.
@@ -17724,7 +18427,7 @@
         isDisabled = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
     var tooltipState = useTooltipState({
       defaultOpen,
       openDelay,
@@ -17765,6 +18468,7 @@
   exports.Carousel = Carousel;
   exports.Chart = Chart;
   exports.ChartIcon = ChartIcon;
+  exports.CheckIcon = CheckIcon;
   exports.Checkbox = Checkbox;
   exports.ChevronIcon = ChevronIcon;
   exports.ClockIcon = ClockIcon;
@@ -17774,6 +18478,7 @@
   exports.ComboBox = ComboBox;
   exports.Command = Command;
   exports.ContextMenu = ContextMenu;
+  exports.CookieConsent = CookieConsent;
   exports.CopyIcon = CopyIcon;
   exports.CountryPicker = CountryPicker;
   exports.CropIcon = CropIcon;
@@ -17807,6 +18512,7 @@
   exports.FormikSwitch = FormikSwitch;
   exports.FormikTextArea = FormikTextArea;
   exports.FormikTextField = FormikTextField;
+  exports.GiftIcon = GiftIcon;
   exports.HeartIcon = HeartIcon;
   exports.HelpIcon = HelpIcon;
   exports.HomeIcon = HomeIcon;
@@ -17852,6 +18558,7 @@
   exports.SettingsIcon = SettingsIcon;
   exports.ShapeIcon = ShapeIcon;
   exports.ShareIcon = ShareIcon;
+  exports.ShieldIcon = ShieldIcon;
   exports.Sidebar = Sidebar;
   exports.Slider = Slider;
   exports.SliderIcon = SliderIcon;
@@ -17868,6 +18575,7 @@
   exports.TextIcon = TextIcon;
   exports.ThreadsIcon = ThreadsIcon;
   exports.TickIcon = TickIcon;
+  exports.Title = Title;
   exports.Toast = Toast;
   exports.Toggle = Toggle;
   exports.ToggleGroup = ToggleGroup;