@app-studio/web 0.9.38 → 0.9.41

package/docs/components/Accordion.mdx

@@ -11,7 +11,7 @@ A component that displays collapsible content panels for presenting information
 ```tsx
 import React from 'react';
 import { Accordion } from '../Accordion';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const DefaultAccordion = () => {
   return (
@@ -48,7 +48,7 @@ Allow multiple items to be expanded at once.
 ```tsx
 import React from 'react';
 import { Accordion } from '../Accordion';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const MultipleAccordion = () => {
   return (
@@ -85,7 +85,7 @@ Different visual styles for the accordion.
 ```tsx
 import React from 'react';
 import { Accordion } from '../Accordion';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const AccordionVariants = () => {
   return (
@@ -126,7 +126,7 @@ Disable specific accordion items.
 ```tsx
 import React from 'react';
 import { Accordion } from '../Accordion';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const DisabledAccordion = () => {
   return (

package/docs/components/Alert.mdx

@@ -48,7 +48,7 @@ Optional variant property to determine the style of the alert
 
 ```tsx
 import React from 'react';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 import { Alert } from '../Alert';
 import { Variant } from '../Alert/Alert.type';
 
@@ -95,8 +95,8 @@ The Alert component supports both light and dark themes through the `themeMode`
 ```tsx
 import React from 'react';
 import { Alert } from '../Alert';
-import { Vertical } from 'app-studio';
-import { Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const DarkModeDemo = () => {
   return (

package/docs/components/AspectRatio.mdx

@@ -10,7 +10,7 @@ Maintains a set aspect ratio for child content
 ### **Default**
 ```tsx
 import React from 'react';
-import { Image } from 'app-studio';
+import { Image } from '@app-studio/web';
 import { AspectRatio } from '../AspectRatio';
 
 export const DefaultDemo = () => {
@@ -34,7 +34,7 @@ specifying the aspect ratio
 
 ```tsx
 import React from 'react';
-import { Image } from 'app-studio';
+import { Image } from '@app-studio/web';
 import { AspectRatio } from '../AspectRatio';
 
 export const RatioDemo = () => {

package/docs/components/Avatar.mdx

@@ -23,7 +23,7 @@ Optional property to specify the size of the avatar, from predefined Size option
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { Avatar } from '../Avatar';
 import { Size } from '../Avatar/Avatar.type';
 

package/docs/components/Background.mdx

@@ -13,7 +13,7 @@ Creates a beautiful animated aurora gradient background effect.
 ```tsx
 import React from 'react';
 import { Background } from '../Background';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const AuroraDemo = () => (
   <Background.Aurora height="300px" showRadialGradient={true}>
@@ -30,7 +30,7 @@ Animated falling meteors effect with customizable count.
 ```tsx
 import React from 'react';
 import { Background } from '../Background';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const MeteorsDemo = () => (
   <Background.Meteors number={20} height="300px">
@@ -106,7 +106,7 @@ Display images as backgrounds with overlay support and blend modes.
 ```tsx
 import React from 'react';
 import { Background } from '../Background';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const BackgroundImageDemo = () => (
   <Background.Image
@@ -129,7 +129,7 @@ Create beautiful gradient backgrounds with animation support.
 ```tsx
 import React from 'react';
 import { Background } from '../Background';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 // Simple two-color gradient
 export const SimpleGradientDemo = () => (
@@ -228,8 +228,8 @@ Multiple background effects can be combined for rich visual experiences.
 ```tsx
 import React from 'react';
 import { Background } from '../Background';
-import { Text } from 'app-studio';
-import { Vertical, Horizontal } from 'app-studio';
+import { Text } from '@app-studio/web';
+import { Vertical, Horizontal } from '@app-studio/web';
 
 // Aurora with content
 export const CombinedAuroraDemo = () => (

package/docs/components/Badge.mdx

@@ -32,11 +32,11 @@ Determines the Badge's style variant.
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { Badge } from '../Badge';
 import { Variant } from '../Badge/Badge.type';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 export const VariantDemo = () => (
   <Vertical gap={15}>
     {['filled', 'outline', 'link', 'ghost'].map((variant, index) => (
@@ -59,7 +59,7 @@ Specifies a custom color scheme for the Badge.
 ```tsx
 import React from 'react';
 import { Badge } from '../Badge';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const ColorSchemeDemo = () => (
   <Horizontal gap={10}>
@@ -83,8 +83,8 @@ Defines the position of the Badge relative to its container.
 ```tsx
 import React from 'react';
 import { Badge } from '../Badge';
-import { View } from 'app-studio';
-import { Horizontal } from 'app-studio';
+import { View } from '@app-studio/web';
+import { Horizontal } from '@app-studio/web';
 import { Position } from '../Badge/Badge.type';
 
 export const PositionDemo = () => (
@@ -112,11 +112,11 @@ Determines the size of the Badge.
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { Badge } from '../Badge';
 import { Size } from '../Badge/Badge.type';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 export const SizeDemo = () => (
   <Vertical gap={10}>
     {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
@@ -134,10 +134,10 @@ Specifies the shape of the Badge.
 
 ```tsx
 import React from 'react';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 import { Badge } from '../Badge';
 import { Shape } from '../Badge/Badge.type';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 export const ShapeDemo = () => (
   <Horizontal gap={15}>
     {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
@@ -181,8 +181,8 @@ The Badge component supports both light and dark themes through the `themeMode`
 ```tsx
 import React from 'react';
 import { Badge } from '../Badge';
-import { Vertical, Horizontal } from 'app-studio';
-import { Text } from 'app-studio';
+import { Vertical, Horizontal } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 import { Variant } from '../Badge/Badge.type';
 
 export const DarkModeDemo = () => {

package/docs/components/Button.mdx

@@ -24,7 +24,7 @@ Optional string to define the color scheme of the button.
 ```tsx
 import React from 'react';
 import { Button } from '../Button';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const ColoredButtons = () => (
   <Horizontal gap={10}>
@@ -50,7 +50,7 @@ Optional LoaderProps object to configure the appearance and behavior of the load
 ```tsx
 import React from 'react';
 import { Button } from '../Button';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const LoaderButtons = () => (
   <Vertical gap={15}>
@@ -97,7 +97,7 @@ Optional React node(s) defining the icon to be displayed within the button.
 ```tsx
 import React from 'react';
 import { Button } from '../Button';
-import { Center } from 'app-studio';
+import { Center } from '@app-studio/web';
 
 import { DustBinIcon } from '../../Icon/Icon';
 
@@ -154,7 +154,7 @@ Optional boolean indicating if the button size should automatically adjust to it
 ```tsx
 import React from 'react';
 import { Button } from '../Button';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 import { Shape } from '../Button/Button.type';
 
@@ -176,7 +176,7 @@ Optional Size to specify the size of the button.
 ```tsx
 import React from 'react';
 import { Button } from '../Button';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { Size } from '../Button/Button.type';
 
@@ -213,7 +213,7 @@ Optional Variant to define the stylistic variation of the button.
 ```tsx
 import React from 'react';
 import { Button } from '../Button';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { Variant } from '../Button/Button.type';
 
@@ -251,7 +251,7 @@ Optional effect to apply interactive effects (e.g., ripple) to the button.
 ```tsx
 import React from 'react';
 import { Button } from '../../Button/Button';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const EffectButton = () => (
   <Horizontal gap={10}>

package/docs/components/Card.mdx

@@ -11,7 +11,7 @@ A flexible container component for organizing and displaying content.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const DefaultDemo = () => {
   return (
@@ -28,8 +28,8 @@ Different visual styles for the card.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from 'app-studio';
-import { Vertical } from 'app-studio';
+import { Text } from '@app-studio/web';
+import { Vertical } from '@app-studio/web';
 
 export const VariantsDemo = () => {
   return (
@@ -65,8 +65,8 @@ Using Card.Header, Card.Content, and Card.Footer for structured layout.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from 'app-studio';
-import { Horizontal } from 'app-studio';
+import { Text } from '@app-studio/web';
+import { Horizontal } from '@app-studio/web';
 import { Button } from '../../Button/Button';
 
 export const StructuredDemo = () => {
@@ -100,8 +100,8 @@ Different corner styles for the card.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from 'app-studio';
-import { Vertical } from 'app-studio';
+import { Text } from '@app-studio/web';
+import { Vertical } from '@app-studio/web';
 import { Shape } from '../Card/Card.type';
 
 export const ShapesDemo = () => {
@@ -128,8 +128,8 @@ Different padding sizes for the card.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from 'app-studio';
-import { Vertical } from 'app-studio';
+import { Text } from '@app-studio/web';
+import { Vertical } from '@app-studio/web';
 import { Size } from '../Card/Card.type';
 
 export const SizesDemo = () => {
@@ -156,8 +156,8 @@ Customize the appearance of the card.
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from 'app-studio';
-import { Horizontal } from 'app-studio';
+import { Text } from '@app-studio/web';
+import { Horizontal } from '@app-studio/web';
 import { Button } from '../../Button/Button';
 
 export const CustomDemo = () => {
@@ -215,9 +215,9 @@ The Card component uses a context-based styling system that allows styles to be
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 import { Button } from '../../Button/Button';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const ContextStylingDemo = () => {
   return (
@@ -275,8 +275,8 @@ The Card component supports both light and dark themes through the `themeMode` p
 ```tsx
 import React from 'react';
 import { Card } from '../Card';
-import { Text } from 'app-studio';
-import { Horizontal, Vertical } from 'app-studio';
+import { Text } from '@app-studio/web';
+import { Horizontal, Vertical } from '@app-studio/web';
 import { Button } from '../../Button/Button';
 
 export const DarkModeExample = () => {

package/docs/components/Carousel.mdx

@@ -14,8 +14,8 @@ A component for displaying a series of content items that can be navigated throu
 ```tsx
 import React from 'react';
 import { Carousel } from '../Carousel';
-import { View } from 'app-studio';
-import { Text } from 'app-studio';
+import { View } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const DefaultDemo = () => {
   // Create an array of slides with different background colors
@@ -55,8 +55,8 @@ Use the compound component pattern for more flexibility and control over the car
 ```tsx
 import React from 'react';
 import { Carousel } from '../Carousel';
-import { View } from 'app-studio';
-import { Text } from 'app-studio';
+import { View } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const CompoundDemo = () => {
   const slides = [
@@ -129,7 +129,7 @@ Restrict navigation to specific slide indices using the `stepIndices` prop.
 ```tsx
 import React, { useState } from 'react';
 import { Carousel } from '../Carousel';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 import { Button } from '../../Button/Button';
 
 export const StepIndicesDemo = () => {
@@ -181,8 +181,8 @@ Automatically advance through slides with customizable interval.
 ```tsx
 import React from 'react';
 import { Carousel } from '../Carousel';
-import { View } from 'app-studio';
-import { Text } from 'app-studio';
+import { View } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const AutoPlayDemo = () => {
   const slides = [
@@ -225,8 +225,8 @@ Different styles of indicators to show the current slide position.
 ```tsx
 import React from 'react';
 import { Carousel } from '../Carousel';
-import { View } from 'app-studio';
-import { Text } from 'app-studio';
+import { View } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const IndicatorsDemo = () => {
   const slides = [
@@ -268,8 +268,8 @@ Customize the navigation controls.
 ```tsx
 import React from 'react';
 import { Carousel } from '../Carousel';
-import { View } from 'app-studio';
-import { Text } from 'app-studio';
+import { View } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 import { Button } from '../../Button/Button';
 
 export const NavigationDemo = () => {
@@ -321,8 +321,8 @@ Customize the appearance of the carousel.
 ```tsx
 import React from 'react';
 import { Carousel } from '../Carousel';
-import { View } from 'app-studio';
-import { Text } from 'app-studio';
+import { View } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 import { Card } from '../../Card/Card';
 
 export const CustomDemo = () => {

package/docs/components/Center.mdx

@@ -6,14 +6,14 @@ A layout component that centers its children both horizontally and vertically wi
   ```tsx
   import { Center } from '@app-studio/web';
   // or from app-studio
-  import { Center } from 'app-studio';
+  import { Center } from '@app-studio/web';
   ```
 
 ### **Basic Usage**
 ```tsx
 import React from 'react';
-import { Center } from 'app-studio';
-import { Text } from 'app-studio';
+import { Center } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const BasicCenter = () => (
   <Center height={200} backgroundColor="color.gray.100">
@@ -27,9 +27,9 @@ export const BasicCenter = () => (
 ### **Loading State Example**
 ```tsx
 import React from 'react';
-import { Center } from 'app-studio';
+import { Center } from '@app-studio/web';
 import { Loader } from '@app-studio/web';
-import { Text, Vertical } from 'app-studio';
+import { Text, Vertical } from '@app-studio/web';
 
 export const LoadingCenter = () => (
   <Center height="100vh" backgroundColor="color.white">
@@ -44,9 +44,9 @@ export const LoadingCenter = () => (
 ### **Empty State Example**
 ```tsx
 import React from 'react';
-import { Center } from 'app-studio';
+import { Center } from '@app-studio/web';
 import { Button } from '@app-studio/web';
-import { Text, Vertical } from 'app-studio';
+import { Text, Vertical } from '@app-studio/web';
 import { EmptyIcon } from '@app-studio/web';
 
 export const EmptyStateCenter = () => (
@@ -72,9 +72,9 @@ export const EmptyStateCenter = () => (
 ### **Modal Content Example**
 ```tsx
 import React from 'react';
-import { Center } from 'app-studio';
+import { Center } from '@app-studio/web';
 import { Modal, Button } from '@app-studio/web';
-import { Text, Vertical, Horizontal } from 'app-studio';
+import { Text, Vertical, Horizontal } from '@app-studio/web';
 
 export const ModalCenter = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -120,9 +120,9 @@ export const ModalCenter = () => {
 ### **Hero Section Example**
 ```tsx
 import React from 'react';
-import { Center } from 'app-studio';
+import { Center } from '@app-studio/web';
 import { Button } from '@app-studio/web';
-import { Text, Vertical, Horizontal } from 'app-studio';
+import { Text, Vertical, Horizontal } from '@app-studio/web';
 
 export const HeroCenter = () => (
   <Center
@@ -167,8 +167,8 @@ export const HeroCenter = () => (
 ### **Card Center Example**
 ```tsx
 import React from 'react';
-import { Center } from 'app-studio';
-import { View, Text, Vertical } from 'app-studio';
+import { Center } from '@app-studio/web';
+import { View, Text, Vertical } from '@app-studio/web';
 import { StarIcon } from '@app-studio/web';
 
 export const CardCenter = () => (
@@ -216,8 +216,8 @@ The Center component extends ViewProps from app-studio, inheriting all standard
 ### **Responsive Centering**
 ```tsx
 import React from 'react';
-import { Center } from 'app-studio';
-import { Text, Vertical } from 'app-studio';
+import { Center } from '@app-studio/web';
+import { Text, Vertical } from '@app-studio/web';
 
 export const ResponsiveCenter = () => (
   <Center
@@ -250,8 +250,8 @@ export const ResponsiveCenter = () => (
 ### **Multiple Children with Gap**
 ```tsx
 import React from 'react';
-import { Center } from 'app-studio';
-import { View } from 'app-studio';
+import { Center } from '@app-studio/web';
+import { View } from '@app-studio/web';
 
 export const CenterWithGap = () => (
   <Center height={300} gap={16}>
@@ -280,9 +280,9 @@ export const CenterWithGap = () => (
 ### **Error State Example**
 ```tsx
 import React from 'react';
-import { Center } from 'app-studio';
+import { Center } from '@app-studio/web';
 import { Button } from '@app-studio/web';
-import { Text, Vertical } from 'app-studio';
+import { Text, Vertical } from '@app-studio/web';
 import { ErrorIcon } from '@app-studio/web';
 
 export const ErrorStateCenter = () => (
@@ -319,8 +319,8 @@ export const ErrorStateCenter = () => (
 ### **Image Placeholder Example**
 ```tsx
 import React from 'react';
-import { Center } from 'app-studio';
-import { Text } from 'app-studio';
+import { Center } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 import { ImageIcon } from '@app-studio/web';
 
 export const ImagePlaceholder = () => (
@@ -412,7 +412,7 @@ export const ImagePlaceholder = () => (
 The Center component works well with other layout components:
 
 ```tsx
-import { Center, Vertical, Horizontal } from 'app-studio';
+import { Center, Vertical, Horizontal } from '@app-studio/web';
 
 // Centered content within a larger layout
 <Vertical height="100vh">

package/docs/components/Chart.mdx

@@ -11,7 +11,7 @@ A component for visualizing data in various chart formats.
 ```tsx
 import React from 'react';
 import { Chart } from '../Chart';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const BarChartDemo = () => {
   const data = {
@@ -48,7 +48,7 @@ export const BarChartDemo = () => {
 ```tsx
 import React from 'react';
 import { Chart } from '../Chart';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const LineChartDemo = () => {
   const data = {
@@ -86,7 +86,7 @@ export const LineChartDemo = () => {
 ```tsx
 import React from 'react';
 import { Chart } from '../Chart';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const AreaChartDemo = () => {
   const data = {
@@ -123,7 +123,7 @@ export const AreaChartDemo = () => {
 ```tsx
 import React from 'react';
 import { Chart } from '../Chart';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const PieChartDemo = () => {
   const dataPoints = [
@@ -150,7 +150,7 @@ export const PieChartDemo = () => {
 ```tsx
 import React from 'react';
 import { Chart } from '../Chart';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const DonutChartDemo = () => {
   const dataPoints = [
@@ -176,7 +176,7 @@ export const DonutChartDemo = () => {
 ```tsx
 import React from 'react';
 import { Chart } from '../Chart';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const CustomChartDemo = () => {
   const data = {

package/docs/components/ChatInput.mdx

@@ -10,7 +10,7 @@
 ```tsx
 import React, { useState } from 'react';
 import { ChatInput } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const BasicChatInput = () => {
   const [inputValue, setInputValue] = useState('');
@@ -40,7 +40,7 @@ The ChatInput component uses the integrated Uploader component for seamless file
 ```tsx
 import React, { useState } from 'react';
 import { ChatInput } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const ChatInputWithFileUploads = () => {
   const [inputValue, setInputValue] = useState('');
@@ -75,7 +75,7 @@ export const ChatInputWithFileUploads = () => {
 ```tsx
 import React, { useState } from 'react';
 import { ChatInput } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 import { PromptExample } from '@app-studio/web';
 
 export const ChatInputWithPromptExamples = () => {
@@ -119,7 +119,7 @@ The ChatInput supports drag & drop functionality for easy file uploads:
 ```tsx
 import React, { useState } from 'react';
 import { ChatInput } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const ChatInputWithDragDrop = () => {
   const [inputValue, setInputValue] = useState('');
@@ -152,7 +152,7 @@ export const ChatInputWithDragDrop = () => {
 ```tsx
 import React from 'react';
 import { ChatInput } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const StyledChatInput = () => {
   const handleSubmit = (message) => {
@@ -187,7 +187,7 @@ export const StyledChatInput = () => {
 ```tsx
 import React, { useState } from 'react';
 import { ChatInput } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const ChatInputWithAgent = () => {
   const [isAgentRunning, setIsAgentRunning] = useState(false);
@@ -322,7 +322,7 @@ The ChatInput component includes a demo page with simulate upload functionality
 // Available in src/pages/chat.page.tsx
 import React, { useState } from 'react';
 import { ChatInput } from '@app-studio/web';
-import { Button } from 'app-studio';
+import { Button } from '@app-studio/web';
 
 export const ChatInputDemo = () => {
   const [isSimulatingUpload, setIsSimulatingUpload] = useState(false);