@app-studio/web 0.8.89 → 0.8.91

package/dist/web.cjs.development.js

@@ -31,6 +31,7 @@ require('core-js/modules/web.url.js');
 require('core-js/modules/web.url.to-json.js');
 require('core-js/modules/web.url-search-params.js');
 var zustand = require('zustand');
+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');
@@ -593,7 +594,7 @@ var TruncateText = _ref2 => {
       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, {
@@ -638,12 +639,7 @@ var TextView = _ref3 => {
     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
@@ -663,7 +659,7 @@ var Text = TextComponent;
 
 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"],
@@ -737,7 +733,9 @@ var _excluded$3 = ["widthHeight", "color", "transform", "orientation", "children
   _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 {
@@ -792,8 +790,8 @@ var HelpIcon = _ref3 => {
   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({
@@ -801,10 +799,19 @@ var HelpIcon = _ref3 => {
     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
@@ -1784,31 +1791,13 @@ var PanelIcon = _ref40 => {
     "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 => {
@@ -2761,6 +2750,59 @@ var ChartIcon = _ref77 => {
     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,
@@ -2840,7 +2882,10 @@ var Icon = {
   ShapeIcon: ShapeIcon,
   RotateIcon: RotateIcon,
   DocumentIcon: DocumentIcon,
-  ChartIcon: ChartIcon
+  ChartIcon: ChartIcon,
+  GiftIcon: GiftIcon,
+  ShieldIcon: ShieldIcon,
+  CheckIcon: CheckIcon
 };
 
 /**
@@ -5586,6 +5631,273 @@ var ChartComponent = props => {
 };
 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,
@@ -5763,7 +6075,7 @@ var calculateMenuPosition = function calculateMenuPosition(x, y, menuWidth, menu
   };
 };
 
-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"],
@@ -5819,7 +6131,7 @@ var ContextMenuTrigger = _ref2 => {
       isDisabled = false,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
   var {
     triggerRef,
     contentId,
@@ -6102,7 +6414,7 @@ var ContextMenuView = _ref7 => {
   }));
 };
 
-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.
@@ -6117,7 +6429,7 @@ var ContextMenuComponent = _ref => {
       onOpenChange,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var state = useContextMenuState({
     size,
     variant,
@@ -6169,7 +6481,7 @@ ContextMenu.Item = ContextMenuItem;
 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 {
@@ -6177,7 +6489,7 @@ var FileSVG = _ref => {
       color,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var {
     getColor,
     themeMode
@@ -6251,7 +6563,7 @@ var useItemState = () => {
   };
 };
 
-var _excluded$h = ["children", "views"];
+var _excluded$i = ["children", "views"];
 var HelperText = _ref => {
   var {
       children,
@@ -6259,7 +6571,7 @@ var HelperText = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(Text
   // Typography properties
   , Object.assign({
@@ -6285,7 +6597,7 @@ var HelperText = _ref => {
   }, views['helperText'], props), children);
 };
 
-var _excluded$i = ["children", "helperText", "error", "views"];
+var _excluded$j = ["children", "helperText", "error", "views"];
 var FieldContainer = _ref => {
   var {
       children,
@@ -6293,7 +6605,7 @@ var FieldContainer = _ref => {
       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({
@@ -6409,7 +6721,7 @@ var PaddingWithoutLabel = {
   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,
@@ -6427,7 +6739,7 @@ var FieldContent = _ref => {
         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
@@ -6456,12 +6768,12 @@ var FieldContent = _ref => {
   }, 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,
@@ -6513,7 +6825,7 @@ var HeadingSizes$1 = {
   }
 };
 
-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,
@@ -6529,7 +6841,7 @@ var LabelView = _ref => {
       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.
@@ -6561,7 +6873,7 @@ React__default.createElement(LabelView, Object.assign({}, props))
 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,
@@ -6572,7 +6884,7 @@ var FieldLabel = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return /*#__PURE__*/React__default.createElement(Label
   // Position properties
   , Object.assign({
@@ -6593,12 +6905,12 @@ var FieldLabel = _ref => {
   }, 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({
@@ -6631,7 +6943,7 @@ var IconSizes$2 = {
   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"];
@@ -6649,7 +6961,7 @@ var Item = _ref => {
       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
@@ -7142,7 +7454,7 @@ var ColorSchemes = {
   }
 };
 
-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));
@@ -7171,7 +7483,7 @@ var SwitchView = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var handleToggle = event => {
     if (!isReadOnly) {
       setValue(!value);
@@ -7295,7 +7607,7 @@ var useTextAreaState = _ref => {
   // 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,
@@ -7330,7 +7642,7 @@ var TextAreaView = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var showLabel = !!(isFocused && label);
   /**
    * Styles for the textarea field
@@ -7469,7 +7781,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-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
  */
@@ -7515,7 +7827,7 @@ var TextFieldView = _ref => {
       onBlur = () => {},
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var {
     getColor,
     themeMode
@@ -7771,7 +8083,7 @@ var StateStyles = {
   }
 };
 
-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,
@@ -7798,7 +8110,7 @@ var CheckboxView = _ref => {
       },
       infoText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var handleHover = () => setIsHovered(!isHovered);
   var handleChange = () => {
     if (!isReadOnly && !isDisabled) {
@@ -9384,11 +9696,11 @@ var IconSizes$4 = {
   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));
@@ -9629,7 +9941,7 @@ var useDatePickerState = () => {
   };
 };
 
-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));
@@ -9662,7 +9974,7 @@ var DatePickerView = _ref => {
       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);
@@ -9749,7 +10061,7 @@ var usePasswordState = props => {
   }, props, textFieldStates);
 };
 
-var _excluded$v = ["visibleIcon", "hiddenIcon"],
+var _excluded$w = ["visibleIcon", "hiddenIcon"],
   _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
@@ -9760,7 +10072,7 @@ var PasswordComponent = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var _usePasswordState = usePasswordState(props),
     {
       isVisible,
@@ -9814,7 +10126,7 @@ var useComboBoxState = (items, placeholder, searchPlaceholder) => {
   };
 };
 
-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 {
@@ -9839,7 +10151,7 @@ var ComboBoxView = _ref => {
       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 => {
@@ -9951,7 +10263,7 @@ var ComboBoxView = _ref => {
   }))))))))))));
 };
 
-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 {
@@ -9967,7 +10279,7 @@ var ComboBoxComponent = _ref => {
       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 (
@@ -10289,7 +10601,7 @@ var useOTPInputState = _ref => {
   };
 };
 
-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: [],
@@ -10343,7 +10655,7 @@ var OTPInputView = _ref => {
       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
@@ -10575,7 +10887,7 @@ var OTPInputComponent = props => {
 };
 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: () => {},
@@ -10591,7 +10903,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var formik$1 = formik.useFormikContext();
   React.useEffect(() => {
     onChange(formik$1.values);
@@ -10639,7 +10951,7 @@ var FormikForm = _ref => {
   }, /*#__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':
@@ -10678,7 +10990,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   var focus = useFormFocus();
   var {
     touched,
@@ -10722,13 +11034,13 @@ var useFormikInput = _ref => {
   } : {});
 };
 
-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));
@@ -10786,11 +11098,11 @@ var TextAreaComponent$1 = props => {
  */
 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));
 };
 /**
@@ -10798,7 +11110,7 @@ var TextFieldComponent$1 = props => {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$D = ["visibleIcon", "hiddenIcon"],
+var _excluded$E = ["visibleIcon", "hiddenIcon"],
   _excluded2$b = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
@@ -10809,7 +11121,7 @@ var PasswordComponent$1 = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     {
@@ -10834,14 +11146,14 @@ var PasswordComponent$1 = _ref => {
  */
 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
@@ -11122,7 +11434,7 @@ var OrientationStyles = {
   }
 };
 
-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 {
@@ -11165,7 +11477,7 @@ var SliderView = _ref => {
         tooltip: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   var {
     getColor,
     themeMode
@@ -12043,7 +12355,7 @@ var UploadView = _ref => {
   }, 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 = '*/*',
@@ -12056,7 +12368,7 @@ var Uploader = _ref => {
       progress = 0,
       fileType
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var {
     previewUrl,
     thumbnailUrl,
@@ -12247,7 +12559,7 @@ var ModalTypography = {
   }
 };
 
-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"],
@@ -12262,7 +12574,7 @@ var ModalOverlay = _ref => {
       position = 'center',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -12558,7 +12870,7 @@ var NavigationMenuItemStates = {
   }
 };
 
-var _excluded$I = ["href", "children", "views"];
+var _excluded$J = ["href", "children", "views"];
 // Create context for the NavigationMenu
 var NavigationMenuContext = /*#__PURE__*/React.createContext({
   activeItemId: null,
@@ -12793,7 +13105,7 @@ var NavigationMenuLink = _ref6 => {
       children,
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$I);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$J);
   var {
     itemValue,
     isDisabled
@@ -12860,7 +13172,7 @@ var NavigationMenuView = _ref7 => {
   })))));
 };
 
-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.
@@ -12877,7 +13189,7 @@ var NavigationMenuComponent = _ref => {
       onItemActivate,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   var {
     activeItemId,
     setActiveItemId,
@@ -13332,6 +13644,507 @@ var TabsComponent = _ref => {
 // 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.
@@ -13347,7 +14160,7 @@ var useToggleState = defaultToggled => {
   };
 };
 
-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,
@@ -13361,7 +14174,7 @@ var ToggleView = _ref => {
       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 = {
@@ -13404,7 +14217,7 @@ var ToggleView = _ref => {
   }, 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 {
@@ -13416,7 +14229,7 @@ var ToggleComponent = _ref => {
       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,
@@ -13807,7 +14620,7 @@ var getDropdownPosition = function getDropdownPosition(side, align) {
   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"],
@@ -13845,7 +14658,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$M);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
   var {
     isOpen,
     setIsOpen
@@ -14005,7 +14818,7 @@ var DropdownMenuView = _ref6 => {
   }));
 };
 
-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.
  */
@@ -14020,7 +14833,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
   var {
     isOpen,
     setIsOpen,
@@ -14218,7 +15031,7 @@ var useRect = ref => {
   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({
@@ -14257,7 +15070,7 @@ var HoverCardTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$O);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Q);
   var {
     openCard,
     closeCard,
@@ -14344,7 +15157,7 @@ var HoverCardContent = _ref3 => {
   }, 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.
@@ -14356,7 +15169,7 @@ var HoverCardComponent = _ref => {
       openDelay,
       closeDelay
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
   var hoverCardState = useHoverCardState({
     openDelay,
     closeDelay
@@ -14486,7 +15299,7 @@ var getMenubarContentPosition = orientation => {
   };
 };
 
-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,
@@ -14520,7 +15333,7 @@ var MenubarRoot = _ref2 => {
       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",
@@ -14706,7 +15519,7 @@ var MenubarView = _ref8 => {
   })))))));
 };
 
-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.
  */
@@ -14720,7 +15533,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$R);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -14876,7 +15689,7 @@ var DisabledButtonStyles = {
   }
 };
 
-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,
@@ -14907,7 +15720,7 @@ var PaginationView = _ref => {
       visiblePageNumbers,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$S);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
   var handlePageChange = page => {
     if (page < 1 || page > totalPages || page === currentPage) {
       return;
@@ -15026,7 +15839,7 @@ var PaginationView = _ref => {
   }, 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.
  */
@@ -15047,7 +15860,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$T);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$V);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -15117,7 +15930,7 @@ var DefaultSeparatorStyles = {
   }
 };
 
-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',
@@ -15129,7 +15942,7 @@ var SeparatorView = _ref => {
       decorative = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
   // Access theme if needed for future enhancements
   var {
     themeMode
@@ -15367,7 +16180,7 @@ var SidebarTransitions = {
   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"];
@@ -15400,7 +16213,7 @@ var SidebarHeader = _ref2 => {
       showToggleButton = true,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$V);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
   var {
     isExpanded,
     toggleExpanded,
@@ -15555,7 +16368,7 @@ var SidebarView = _ref5 => {
   }))));
 };
 
-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.
  */
@@ -15577,7 +16390,7 @@ var SidebarComponent = _ref => {
       breakpointBehavior = 'overlay',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$W);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
   var {
     isExpanded,
     toggleExpanded,
@@ -16042,7 +16855,7 @@ var HandleIconStyles = {
   }
 };
 
-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
@@ -16087,7 +16900,7 @@ var ResizablePanel = _ref2 => {
       onCollapseChange,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$X);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$Z);
   var {
     orientation,
     registerPanel,
@@ -16302,7 +17115,7 @@ var ResizableView = _ref4 => {
   }, 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.
  */
@@ -16322,7 +17135,7 @@ var ResizableComponent = _ref => {
       keyboardResizeBy = 10,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var {
     isResizing,
     setIsResizing,
@@ -17090,7 +17903,7 @@ var CommandFooterStyles = {
   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"],
@@ -17122,7 +17935,7 @@ var CommandInput = _ref2 => {
       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(() => {
@@ -17305,7 +18118,7 @@ var CommandView = _ref7 => {
   })))), 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.
  */
@@ -17323,7 +18136,7 @@ var CommandComponent = _ref => {
       footer,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   var {
     search,
     setSearch,
@@ -17610,7 +18423,7 @@ var getArrowStyles = position => {
   }
 };
 
-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
@@ -17646,7 +18459,7 @@ var TooltipTrigger = _ref2 => {
       views,
       asChild = false
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
   var {
     openTooltip,
     closeTooltip,
@@ -17739,7 +18552,7 @@ var TooltipView = _ref4 => {
   }, 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.
@@ -17759,7 +18572,7 @@ var TooltipComponent = _ref => {
       isDisabled = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
   var tooltipState = useTooltipState({
     defaultOpen,
     openDelay,
@@ -17800,6 +18613,7 @@ exports.Card = Card;
 exports.Carousel = Carousel;
 exports.Chart = Chart;
 exports.ChartIcon = ChartIcon;
+exports.CheckIcon = CheckIcon;
 exports.Checkbox = Checkbox;
 exports.ChevronIcon = ChevronIcon;
 exports.ClockIcon = ClockIcon;
@@ -17809,6 +18623,7 @@ exports.CloudIcon = CloudIcon;
 exports.ComboBox = ComboBox;
 exports.Command = Command;
 exports.ContextMenu = ContextMenu;
+exports.CookieConsent = CookieConsent;
 exports.CopyIcon = CopyIcon;
 exports.CountryPicker = CountryPicker;
 exports.CropIcon = CropIcon;
@@ -17842,6 +18657,7 @@ exports.FormikSlider = FormikSlider;
 exports.FormikSwitch = FormikSwitch;
 exports.FormikTextArea = FormikTextArea;
 exports.FormikTextField = FormikTextField;
+exports.GiftIcon = GiftIcon;
 exports.HeartIcon = HeartIcon;
 exports.HelpIcon = HelpIcon;
 exports.HomeIcon = HomeIcon;
@@ -17887,6 +18703,7 @@ exports.Separator = Separator;
 exports.SettingsIcon = SettingsIcon;
 exports.ShapeIcon = ShapeIcon;
 exports.ShareIcon = ShareIcon;
+exports.ShieldIcon = ShieldIcon;
 exports.Sidebar = Sidebar;
 exports.Slider = Slider;
 exports.SliderIcon = SliderIcon;
@@ -17903,6 +18720,7 @@ exports.TextField = TextField;
 exports.TextIcon = TextIcon;
 exports.ThreadsIcon = ThreadsIcon;
 exports.TickIcon = TickIcon;
+exports.Title = Title;
 exports.Toast = Toast;
 exports.Toggle = Toggle;
 exports.ToggleGroup = ToggleGroup;