@app-studio/web 0.8.89 → 0.8.91

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, {
@@ -608,12 +608,7 @@
       fontStyle: isItalic ? 'italic' : 'normal',
       fontWeight: fontWeight,
       letterSpacing: "-0.01em",
-      textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none',
-      color: "color.gray.900",
-      // Apply dark mode styles
-      _dark: {
-        color: 'color.gray.100'
-      }
+      textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
     }, noLineBreak, headingStyles, props, views == null ? void 0 : views.container), maxLines && typeof children === 'string' ? (/*#__PURE__*/React__default.createElement(TruncateText, {
       text: children,
       maxLines: maxLines
@@ -633,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"],
@@ -707,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 {
@@ -762,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({
@@ -771,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
@@ -1754,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 => {
@@ -2731,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,
@@ -2810,7 +2851,10 @@
     ShapeIcon: ShapeIcon,
     RotateIcon: RotateIcon,
     DocumentIcon: DocumentIcon,
-    ChartIcon: ChartIcon
+    ChartIcon: ChartIcon,
+    GiftIcon: GiftIcon,
+    ShieldIcon: ShieldIcon,
+    CheckIcon: CheckIcon
   };
 
   /**
@@ -5556,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,
@@ -5733,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"],
@@ -5789,7 +6100,7 @@
         isDisabled = false,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
     var {
       triggerRef,
       contentId,
@@ -6072,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.
@@ -6087,7 +6398,7 @@
         onOpenChange,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
     var state = useContextMenuState({
       size,
       variant,
@@ -6139,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 {
@@ -6147,7 +6458,7 @@
         color,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
     var {
       getColor,
       themeMode
@@ -6221,7 +6532,7 @@
     };
   };
 
-  var _excluded$h = ["children", "views"];
+  var _excluded$i = ["children", "views"];
   var HelperText = _ref => {
     var {
         children,
@@ -6229,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({
@@ -6255,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,
@@ -6263,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({
@@ -6379,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,
@@ -6397,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
@@ -6426,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,
@@ -6483,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,
@@ -6499,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.
@@ -6531,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,
@@ -6542,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({
@@ -6563,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({
@@ -6601,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"];
@@ -6619,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
@@ -7112,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));
@@ -7141,7 +7452,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
     var handleToggle = event => {
       if (!isReadOnly) {
         setValue(!value);
@@ -7265,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,
@@ -7300,7 +7611,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
     var showLabel = !!(isFocused && label);
     /**
      * Styles for the textarea field
@@ -7439,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
    */
@@ -7485,7 +7796,7 @@
         onBlur = () => {},
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
     var {
       getColor,
       themeMode
@@ -7741,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,
@@ -7768,7 +8079,7 @@
         },
         infoText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
     var handleHover = () => setIsHovered(!isHovered);
     var handleChange = () => {
       if (!isReadOnly && !isDisabled) {
@@ -9354,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));
@@ -9599,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));
@@ -9632,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);
@@ -9719,7 +10030,7 @@
     }, props, textFieldStates);
   };
 
-  var _excluded$v = ["visibleIcon", "hiddenIcon"],
+  var _excluded$w = ["visibleIcon", "hiddenIcon"],
     _excluded2$a = ["isVisible", "setIsVisible"];
   var PasswordComponent = _ref => {
     var {
@@ -9730,7 +10041,7 @@
           widthHeight: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
     var _usePasswordState = usePasswordState(props),
       {
         isVisible,
@@ -9784,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 {
@@ -9809,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 => {
@@ -9921,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 {
@@ -9937,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 (
@@ -10259,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: [],
@@ -10313,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
@@ -10545,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: () => {},
@@ -10561,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);
@@ -10609,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':
@@ -10648,7 +10959,7 @@
         name,
         type
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
     var focus = useFormFocus();
     var {
       touched,
@@ -10692,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));
@@ -10756,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));
   };
   /**
@@ -10768,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 {
@@ -10779,7 +11090,7 @@
           widthHeight: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
     var formProps = useFormikInput(props);
     var _usePasswordState = usePasswordState(formProps),
       {
@@ -10804,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
@@ -11092,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 {
@@ -11135,7 +11446,7 @@
           tooltip: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
     var {
       getColor,
       themeMode
@@ -12013,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 = '*/*',
@@ -12026,7 +12337,7 @@
         progress = 0,
         fileType
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
     var {
       previewUrl,
       thumbnailUrl,
@@ -12217,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"],
@@ -12232,7 +12543,7 @@
         position = 'center',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -12528,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,
@@ -12763,7 +13074,7 @@
         children,
         views
       } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded$I);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded$J);
     var {
       itemValue,
       isDisabled
@@ -12830,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.
@@ -12847,7 +13158,7 @@
         onItemActivate,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
     var {
       activeItemId,
       setActiveItemId,
@@ -13302,6 +13613,507 @@
   // Export the component wrapped in React.memo for performance optimization
   var Tabs = /*#__PURE__*/React__default.memo(TabsComponent);
 
+  /**
+   * Custom hook for managing Title component state and animations
+   */
+  var useTitleState = props => {
+    var {
+      animation = 'none',
+      animationDirection = 'left',
+      animationDuration = '1s',
+      animationDelay = '0s',
+      children,
+      _isInView = false,
+      alternateHighlightText = [],
+      alternateAnimation = false,
+      alternateDuration = 3000,
+      highlightText
+    } = props;
+    // State for typewriter animation
+    var [displayText, setDisplayText] = React.useState('');
+    // State for alternating highlight text
+    var [currentHighlightText, setCurrentHighlightText] = React.useState(highlightText);
+    // State for the alternating text content
+    var [alternatingContent, setAlternatingContent] = React.useState(children);
+    // Handle alternating highlight text animation
+    React.useEffect(() => {
+      // Initialize with the provided highlightText
+      setCurrentHighlightText(highlightText);
+      // If not using alternating animation or no alternateHighlightText provided, return early
+      if (!alternateAnimation || alternateHighlightText.length === 0 || !_isInView) {
+        return () => {};
+      }
+      // Only proceed if children is a string
+      if (typeof children !== 'string') {
+        return () => {};
+      }
+      // Set initial content with the first alternating text
+      var baseText = children;
+      var currentIndex = 0;
+      // Function to update the content with the current alternating text
+      var updateContent = index => {
+        if (highlightText && typeof highlightText === 'string') {
+          // Replace the highlightText with the current alternating text
+          var regex = new RegExp(highlightText, 'gi');
+          var newContent = baseText.replace(regex, alternateHighlightText[index]);
+          setAlternatingContent(newContent);
+        }
+      };
+      // Set initial content
+      updateContent(currentIndex);
+      // Create interval to cycle through the alternateHighlightText array
+      var interval = setInterval(() => {
+        currentIndex = (currentIndex + 1) % alternateHighlightText.length;
+        updateContent(currentIndex);
+      }, alternateDuration);
+      return () => clearInterval(interval);
+    }, [alternateAnimation, alternateHighlightText, alternateDuration, highlightText, children, _isInView]);
+    // Handle typewriter animation
+    React.useEffect(() => {
+      // Only start the typewriter animation when the component is in view
+      if (animation === 'typewriter' && typeof children === 'string' && _isInView) {
+        var text = children;
+        var currentIndex = 0;
+        setDisplayText('');
+        var interval = setInterval(() => {
+          if (currentIndex <= text.length) {
+            setDisplayText(text.substring(0, currentIndex));
+            currentIndex++;
+          } else {
+            clearInterval(interval);
+          }
+        }, 100);
+        return () => clearInterval(interval);
+      }
+      // Reset the text if not in view
+      if (animation === 'typewriter' && !_isInView) {
+        setDisplayText('');
+      }
+      return () => {};
+    }, [animation, children, _isInView]);
+    // Get animation configuration based on animation type
+    var getAnimation = () => {
+      // For typewriter animation, we handle it separately with useState and useEffect
+      if (animation === 'typewriter') {
+        return undefined;
+      }
+      switch (animation) {
+        case 'fadeIn':
+          return {
+            from: {
+              opacity: 0
+            },
+            to: {
+              opacity: 1
+            },
+            duration: animationDuration,
+            delay: animationDelay,
+            // iterationCount: 'infinite',
+            direction: 'alternate'
+          };
+        case 'slideIn':
+          switch (animationDirection) {
+            case 'left':
+              return {
+                from: {
+                  transform: 'translateX(-100%)'
+                },
+                to: {
+                  transform: 'translateX(0)'
+                },
+                duration: animationDuration,
+                delay: animationDelay,
+                // iterationCount: 'infinite',
+                direction: 'alternate'
+              };
+            case 'right':
+              return {
+                from: {
+                  transform: 'translateX(100%)'
+                },
+                to: {
+                  transform: 'translateX(0)'
+                },
+                duration: animationDuration,
+                delay: animationDelay,
+                // iterationCount: 'infinite',
+                direction: 'alternate'
+              };
+            case 'top':
+              return {
+                from: {
+                  transform: 'translateY(-100%)'
+                },
+                to: {
+                  transform: 'translateY(0)'
+                },
+                duration: animationDuration,
+                delay: animationDelay,
+                // iterationCount: 'infinite',
+                direction: 'alternate'
+              };
+            case 'bottom':
+              return {
+                from: {
+                  transform: 'translateY(100%)'
+                },
+                to: {
+                  transform: 'translateY(0)'
+                },
+                duration: animationDuration,
+                delay: animationDelay,
+                // iterationCount: 'infinite',
+                direction: 'alternate'
+              };
+            default:
+              return {
+                from: {
+                  transform: 'translateX(-100%)'
+                },
+                to: {
+                  transform: 'translateX(0)'
+                },
+                duration: animationDuration,
+                delay: animationDelay,
+                // iterationCount: 'infinite',
+                direction: 'alternate'
+              };
+          }
+        case 'bounce':
+          return {
+            from: {
+              transform: 'translateY(0)'
+            },
+            '20%': {
+              transform: 'translateY(-30px)'
+            },
+            '40%': {
+              transform: 'translateY(0)'
+            },
+            '60%': {
+              transform: 'translateY(-15px)'
+            },
+            '80%': {
+              transform: 'translateY(0)'
+            },
+            to: {
+              transform: 'translateY(0)'
+            },
+            duration: animationDuration,
+            delay: animationDelay,
+            iterationCount: '1'
+          };
+        case 'highlight':
+          return {
+            from: {
+              backgroundSize: '0 100%'
+            },
+            to: {
+              backgroundSize: '100% 100%'
+            },
+            duration: animationDuration,
+            delay: animationDelay
+          };
+        case 'reveal':
+          return {
+            from: {
+              clipPath: 'polygon(0 0, 0 0, 0 100%, 0% 100%)'
+            },
+            to: {
+              clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)'
+            },
+            duration: animationDuration,
+            delay: animationDelay
+          };
+        case 'none':
+        default:
+          return undefined;
+      }
+    };
+    return {
+      displayText,
+      getAnimation,
+      currentHighlightText,
+      alternatingContent
+    };
+  };
+
+  /**
+   * 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: 64,
+    xl: 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) + ")",
+      webkitBackgroundClip: 'text',
+      webkitTextFillColor: 'transparent',
+      backgroundClip: 'text',
+      color: 'transparent',
+      display: 'inline-block'
+    }),
+    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 = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "animation", "size", "centered", "views"];
+  /**
+   * Title View Component
+   *
+   * Renders a title with optional highlighting and animations for hero sections.
+   */
+  var TitleView = _ref => {
+    var {
+        children,
+        highlightText,
+        highlightStyle = 'background',
+        highlightColor = 'theme.primary',
+        highlightSecondaryColor,
+        animation = 'none',
+        size = 'xl',
+        centered = false,
+        views
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    // Use the inView hook to detect when the component is visible
+    var {
+      ref,
+      inView
+    } = appStudio.useInView();
+    // Get theme utilities
+    var {
+      getColor,
+      themeMode: contextThemeMode
+    } = appStudio.useTheme();
+    var themeMode = props.themeMode || contextThemeMode;
+    // Resolve theme colors
+    var resolvedHighlightColor = getColor(highlightColor, {
+      themeMode
+    });
+    var resolvedSecondaryColor = highlightSecondaryColor ? getColor(highlightSecondaryColor, {
+      themeMode
+    }) : undefined;
+    // Get state and animation functions from custom hook
+    var {
+      displayText,
+      getAnimation,
+      currentHighlightText,
+      alternatingContent
+    } = useTitleState(Object.assign({
+      children,
+      highlightText,
+      highlightStyle,
+      highlightColor: resolvedHighlightColor,
+      animation,
+      _isInView: inView
+    }, props));
+    // Get animation configuration only when the component is in view
+    // For typewriter animation, we don't need an animation config as it's handled by useState/useEffect
+    var animationConfig = inView && animation !== 'typewriter' ? getAnimation() : undefined;
+    // Get highlight styles
+    var highlightStyleProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedSecondaryColor);
+    // Get font size and line height based on size prop
+    var fontSize = TitleSizes[size];
+    var lineHeight = LineHeights$1[size];
+    // For typewriter animation, use the displayText state
+    // For alternating animation, use the alternatingContent state
+    var content = animation === 'typewriter' ? displayText : props.alternateAnimation && typeof alternatingContent === 'string' ? alternatingContent : children;
+    // If the content is a simple string and we have highlight text
+    if (typeof children === 'string' && currentHighlightText) {
+      var text = children;
+      // For a single highlight text
+      if (typeof currentHighlightText === 'string') {
+        // Create a regex pattern to match the highlight text
+        // Use a more flexible approach that can match within words
+        var pattern = new RegExp("(" + currentHighlightText + ")", 'gi');
+        // Check if the pattern matches anything in the text
+        if (pattern.test(text)) {
+          // Reset the regex pattern's lastIndex property
+          pattern.lastIndex = 0;
+          // Split the text by the pattern and keep the matches
+          var parts = [];
+          var lastIndex = 0;
+          var match;
+          while ((match = pattern.exec(text)) !== null) {
+            // Add the text before the match
+            if (match.index > lastIndex) {
+              parts.push(text.substring(lastIndex, match.index));
+            }
+            // Add the match as a special part to be highlighted
+            parts.push({
+              highlight: true,
+              text: match[0]
+            });
+            lastIndex = match.index + match[0].length;
+          }
+          // Add any remaining text after the last match
+          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: animationConfig
+          }, props, views == null ? void 0 : views.container), parts.map((part, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+            key: index
+          }, typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+            as: "span",
+            display: "inline"
+          }, highlightStyleProps, views == null ? void 0 : views.highlight), part.text))))));
+        }
+      }
+      // For multiple highlight texts
+      if (Array.isArray(currentHighlightText)) {
+        // Create a regex pattern to match any of the highlight texts
+        // Use a more flexible approach that can match within words
+        var _pattern = new RegExp("(" + currentHighlightText.join('|') + ")", 'gi');
+        // Check if the pattern matches anything in the text
+        if (_pattern.test(text)) {
+          // Reset the regex pattern's lastIndex property
+          _pattern.lastIndex = 0;
+          // Split the text by the pattern and keep the matches
+          var _parts = [];
+          var _lastIndex = 0;
+          var _match;
+          while ((_match = _pattern.exec(text)) !== null) {
+            // Add the text before the match
+            if (_match.index > _lastIndex) {
+              _parts.push(text.substring(_lastIndex, _match.index));
+            }
+            // Add the match as a special part to be highlighted
+            _parts.push({
+              highlight: true,
+              text: _match[0]
+            });
+            _lastIndex = _match.index + _match[0].length;
+          }
+          // Add any remaining text after the last match
+          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: animationConfig
+          }, props, views == null ? void 0 : views.container), _parts.map((part, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+            key: index
+          }, typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+            as: "span",
+            display: "inline"
+          }, highlightStyleProps, views == null ? void 0 : views.highlight), part.text))))));
+        }
+      }
+    }
+    // Default rendering for non-string children or 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: animationConfig
+    }, props, views == null ? void 0 : views.container), content);
+  };
+
+  /**
+   * 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.
@@ -13317,7 +14129,7 @@
     };
   };
 
-  var _excluded$K = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
+  var _excluded$M = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
   var ToggleView = _ref => {
     var {
         children,
@@ -13331,7 +14143,7 @@
         onToggle,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
     var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
     var isActive = !!(isToggle || isHovered);
     var toggleVariants = {
@@ -13374,7 +14186,7 @@
     }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
   };
 
-  var _excluded$L = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+  var _excluded$N = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
   // Destructuring properties from ToggleProps to be used within the ToggleComponent.
   var ToggleComponent = _ref => {
     var {
@@ -13386,7 +14198,7 @@
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,
@@ -13777,7 +14589,7 @@
     return positions[side];
   };
 
-  var _excluded$M = ["children", "views"],
+  var _excluded$O = ["children", "views"],
     _excluded2$d = ["items", "side", "align", "views"],
     _excluded3$9 = ["item", "views"],
     _excluded4$8 = ["views"],
@@ -13815,7 +14627,7 @@
         children,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
     var {
       isOpen,
       setIsOpen
@@ -13975,7 +14787,7 @@
     }));
   };
 
-  var _excluded$N = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+  var _excluded$P = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
   /**
    * DropdownMenu component for displaying a menu when clicking on a trigger element.
    */
@@ -13990,7 +14802,7 @@
         defaultOpen = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
     var {
       isOpen,
       setIsOpen,
@@ -14188,7 +15000,7 @@
     return rect;
   };
 
-  var _excluded$O = ["children", "views", "asChild"],
+  var _excluded$Q = ["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({
@@ -14227,7 +15039,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Q);
     var {
       openCard,
       closeCard,
@@ -14314,7 +15126,7 @@
     }, views == null ? void 0 : views.container, props), children);
   };
 
-  var _excluded$P = ["children", "views", "openDelay", "closeDelay"];
+  var _excluded$R = ["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.
@@ -14326,7 +15138,7 @@
         openDelay,
         closeDelay
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
     var hoverCardState = useHoverCardState({
       openDelay,
       closeDelay
@@ -14456,7 +15268,7 @@
     };
   };
 
-  var _excluded$Q = ["children", "orientation", "size", "variant", "views"];
+  var _excluded$S = ["children", "orientation", "size", "variant", "views"];
   // Create context for the Menubar
   var MenubarContext = /*#__PURE__*/React.createContext({
     activeMenuId: null,
@@ -14490,7 +15302,7 @@
         variant = 'default',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Q);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$S);
     var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
     return /*#__PURE__*/React__default.createElement(Container, Object.assign({
       role: "menubar",
@@ -14676,7 +15488,7 @@
     })))))));
   };
 
-  var _excluded$R = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+  var _excluded$T = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
   /**
    * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
    */
@@ -14690,7 +15502,7 @@
         defaultOpenMenuId = null,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
     var {
       activeMenuId,
       setActiveMenuId,
@@ -14846,7 +15658,7 @@
     }
   };
 
-  var _excluded$S = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+  var _excluded$U = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
   var PaginationView = _ref => {
     var {
         currentPage,
@@ -14877,7 +15689,7 @@
         visiblePageNumbers,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
     var handlePageChange = page => {
       if (page < 1 || page > totalPages || page === currentPage) {
         return;
@@ -14996,7 +15808,7 @@
     }, option.label))))));
   };
 
-  var _excluded$T = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+  var _excluded$V = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
   /**
    * Pagination component for navigating through pages of content.
    */
@@ -15017,7 +15829,7 @@
         shape = 'rounded',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
     var {
       visiblePageNumbers
     } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -15087,7 +15899,7 @@
     }
   };
 
-  var _excluded$U = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+  var _excluded$W = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
   var SeparatorView = _ref => {
     var {
         orientation = 'horizontal',
@@ -15099,7 +15911,7 @@
         decorative = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
     // Access theme if needed for future enhancements
     var {
       themeMode
@@ -15337,7 +16149,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$X = ["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"];
@@ -15370,7 +16182,7 @@
         showToggleButton = true,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
     var {
       isExpanded,
       toggleExpanded,
@@ -15525,7 +16337,7 @@
     }))));
   };
 
-  var _excluded$W = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
+  var _excluded$Y = ["children", "position", "size", "variant", "defaultExpanded", "expanded", "onExpandedChange", "fixed", "hasBackdrop", "showToggleButton", "expandedWidth", "collapsedWidth", "breakpoint", "breakpointBehavior", "views"];
   /**
    * Sidebar component for creating collapsible, themeable and customizable sidebars.
    */
@@ -15547,7 +16359,7 @@
         breakpointBehavior = 'overlay',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
     var {
       isExpanded,
       toggleExpanded,
@@ -16012,7 +16824,7 @@
     }
   };
 
-  var _excluded$X = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
+  var _excluded$Z = ["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
@@ -16057,7 +16869,7 @@
         onCollapseChange,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
     var {
       orientation,
       registerPanel,
@@ -16272,7 +17084,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.
    */
@@ -16292,7 +17104,7 @@
         keyboardResizeBy = 10,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
     var {
       isResizing,
       setIsResizing,
@@ -17060,7 +17872,7 @@
     color: 'color.gray.500'
   };
 
-  var _excluded$Z = ["value", "onValueChange", "placeholder", "views"],
+  var _excluded$$ = ["value", "onValueChange", "placeholder", "views"],
     _excluded2$h = ["children", "views"],
     _excluded3$c = ["heading", "children", "views"],
     _excluded4$a = ["item", "selected", "onSelect", "views"],
@@ -17092,7 +17904,7 @@
         placeholder = 'Type a command or search...',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
     var inputRef = React.useRef(null);
     // Focus input when component mounts
     React__default.useEffect(() => {
@@ -17275,7 +18087,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$10 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "filter", "emptyState", "footer", "views"];
   /**
    * Command component for displaying a command palette with search functionality.
    */
@@ -17293,7 +18105,7 @@
         footer,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
     var {
       search,
       setSearch,
@@ -17580,7 +18392,7 @@
     }
   };
 
-  var _excluded$$ = ["children", "views", "asChild"],
+  var _excluded$11 = ["children", "views", "asChild"],
     _excluded2$i = ["children", "views"],
     _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
   // Create context for the Tooltip
@@ -17616,7 +18428,7 @@
         views,
         asChild = false
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
     var {
       openTooltip,
       closeTooltip,
@@ -17709,7 +18521,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$12 = ["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.
@@ -17729,7 +18541,7 @@
         isDisabled = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
     var tooltipState = useTooltipState({
       defaultOpen,
       openDelay,
@@ -17770,6 +18582,7 @@
   exports.Carousel = Carousel;
   exports.Chart = Chart;
   exports.ChartIcon = ChartIcon;
+  exports.CheckIcon = CheckIcon;
   exports.Checkbox = Checkbox;
   exports.ChevronIcon = ChevronIcon;
   exports.ClockIcon = ClockIcon;
@@ -17779,6 +18592,7 @@
   exports.ComboBox = ComboBox;
   exports.Command = Command;
   exports.ContextMenu = ContextMenu;
+  exports.CookieConsent = CookieConsent;
   exports.CopyIcon = CopyIcon;
   exports.CountryPicker = CountryPicker;
   exports.CropIcon = CropIcon;
@@ -17812,6 +18626,7 @@
   exports.FormikSwitch = FormikSwitch;
   exports.FormikTextArea = FormikTextArea;
   exports.FormikTextField = FormikTextField;
+  exports.GiftIcon = GiftIcon;
   exports.HeartIcon = HeartIcon;
   exports.HelpIcon = HelpIcon;
   exports.HomeIcon = HomeIcon;
@@ -17857,6 +18672,7 @@
   exports.SettingsIcon = SettingsIcon;
   exports.ShapeIcon = ShapeIcon;
   exports.ShareIcon = ShareIcon;
+  exports.ShieldIcon = ShieldIcon;
   exports.Sidebar = Sidebar;
   exports.Slider = Slider;
   exports.SliderIcon = SliderIcon;
@@ -17873,6 +18689,7 @@
   exports.TextIcon = TextIcon;
   exports.ThreadsIcon = ThreadsIcon;
   exports.TickIcon = TickIcon;
+  exports.Title = Title;
   exports.Toast = Toast;
   exports.Toggle = Toggle;
   exports.ToggleGroup = ToggleGroup;