@app-studio/web 0.9.38 → 0.9.41

package/docs/components/Gradient.mdx

@@ -28,8 +28,8 @@ Specifies the type of gradient to render.
 ```tsx
 import React from 'react';
 import { Gradient } from '../Gradient';
-import { Vertical } from 'app-studio';
-import { Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const TypesDemo = () => (
   <Vertical gap={16}>
@@ -80,9 +80,9 @@ Specifies the direction for linear gradients.
 ```tsx
 import React from 'react';
 import { Gradient } from '../Gradient';
-import { Vertical } from 'app-studio';
-import { Horizontal } from 'app-studio';
-import { Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { Horizontal } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const DirectionsDemo = () => (
   <Vertical gap={16}>
@@ -129,8 +129,8 @@ Specifies an array of color stops for multi-color gradients.
 ```tsx
 import React from 'react';
 import { Gradient } from '../Gradient';
-import { Vertical } from 'app-studio';
-import { Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const MulticolorDemo = () => (
   <Vertical gap={16}>
@@ -177,8 +177,8 @@ Enables animation for the gradient.
 ```tsx
 import React from 'react';
 import { Gradient } from '../Gradient';
-import { Vertical } from 'app-studio';
-import { Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const AnimatedDemo = () => (
   <Vertical gap={16}>
@@ -206,10 +206,10 @@ Content to render inside the gradient.
 ```tsx
 import React from 'react';
 import { Gradient } from '../Gradient';
-import { Vertical } from 'app-studio';
-import { Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 import { Button } from '../../Button/Button';
-import { Center } from 'app-studio';
+import { Center } from '@app-studio/web';
 
 export const WithContentDemo = () => (
   <Gradient 
@@ -240,8 +240,8 @@ Custom styling that overrides default views.
 ```tsx
 import React from 'react';
 import { Gradient } from '../Gradient';
-import { Center } from 'app-studio';
-import { Text } from 'app-studio';
+import { Center } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const StylesDemo = () => (
   <Gradient 

package/docs/components/Horizontal.mdx

@@ -11,7 +11,7 @@ Aligns child components horizontally, with optional reverse order.
 ```tsx
 import React from 'react';
 
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 import { Horizontal } from '../../Horizontal/Horizontal';
 
 export const DefaultHorizontal = () => (

package/docs/components/HoverCard.mdx

@@ -12,7 +12,7 @@ A floating card that appears when hovering over a trigger element. Supports conf
 import React from 'react';
 import { HoverCard } from '../HoverCard';
 import { Button } from '../../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const DefaultHoverCard = () => {
   return (
@@ -37,7 +37,7 @@ You can control the position of the HoverCard content using the `side` and `alig
 import React from 'react';
 import { HoverCard } from '../HoverCard';
 import { Button } from '../../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const PositionedHoverCard = () => {
   return (
@@ -62,7 +62,7 @@ You can customize the appearance of the HoverCard using the `views` prop.
 import React from 'react';
 import { HoverCard } from '../HoverCard';
 import { Button } from '../../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const StyledHoverCard = () => {
   return (
@@ -96,7 +96,7 @@ You can control the timing of when the HoverCard opens and closes using the `ope
 import React from 'react';
 import { HoverCard } from '../HoverCard';
 import { Button } from '../../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const DelayedHoverCard = () => {
   return (
@@ -121,7 +121,7 @@ You can use the `asChild` prop on the Trigger to apply hover behavior directly t
 import React from 'react';
 import { HoverCard } from '../HoverCard';
 import { Link } from '../../Link/Link';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const LinkHoverCard = () => {
   return (

package/docs/components/Icon.mdx

@@ -20,7 +20,7 @@ A comprehensive collection of SVG icons with consistent styling, customizable co
 ```tsx
 import React from 'react';
 import { UploadIcon, EditIcon, DeleteIcon } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const BasicIcons = () => (
   <Horizontal gap={16}>
@@ -35,7 +35,7 @@ export const BasicIcons = () => (
 ```tsx
 import React from 'react';
 import { StarIcon } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const IconSizes = () => (
   <Horizontal gap={16} alignItems="center">
@@ -52,7 +52,7 @@ export const IconSizes = () => (
 ```tsx
 import React from 'react';
 import { HeartIcon } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const IconColors = () => (
   <Horizontal gap={16}>
@@ -69,7 +69,7 @@ export const IconColors = () => (
 ```tsx
 import React from 'react';
 import { StarIcon, HeartIcon, BookmarkIcon } from '@app-studio/web';
-import { Horizontal, Vertical, Text } from 'app-studio';
+import { Horizontal, Vertical, Text } from '@app-studio/web';
 
 export const IconVariants = () => (
   <Vertical gap={16}>
@@ -94,7 +94,7 @@ export const IconVariants = () => (
 ```tsx
 import React from 'react';
 import { ArrowIcon } from '@app-studio/web';
-import { Horizontal, Text } from 'app-studio';
+import { Horizontal, Text } from '@app-studio/web';
 
 export const IconOrientations = () => (
   <Horizontal gap={24} alignItems="center">
@@ -181,7 +181,7 @@ The icon library includes a comprehensive set of icons organized by category:
 import React from 'react';
 import { Button } from '@app-studio/web';
 import { EditIcon, DeleteIcon, SaveIcon } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const IconButtons = () => (
   <Horizontal gap={12}>
@@ -213,7 +213,7 @@ export const IconButtons = () => (
 ```tsx
 import React from 'react';
 import { StarIcon } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const CustomStyledIcon = () => (
   <View>
@@ -265,7 +265,7 @@ All icons inherit from the base `IconWrapper` component which extends `ViewProps
 ```tsx
 import React from 'react';
 import { MenuIcon } from '@app-studio/web';
-import { useBreakpoint } from 'app-studio';
+import { useBreakpoint } from '@app-studio/web';
 
 export const ResponsiveIcon = () => {
   const { isMobile, isTablet, isDesktop } = useBreakpoint();
@@ -302,7 +302,7 @@ export const IconWithTooltip = () => (
 ```tsx
 import React, { useState } from 'react';
 import { HeartIcon } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const AnimatedIcon = () => {
   const [isLiked, setIsLiked] = useState(false);
@@ -330,7 +330,7 @@ export const AnimatedIcon = () => {
 ```tsx
 import React from 'react';
 import * as Icons from '@app-studio/web';
-import { View, Text } from 'app-studio';
+import { View, Text } from '@app-studio/web';
 
 export const IconGrid = () => {
   const iconNames = Object.keys(Icons).filter(name =>

package/docs/components/KanbanBoard.mdx

@@ -63,7 +63,7 @@ Customize how cards are displayed using the `renderCard` prop. This is useful fo
 import React, { useState } from 'react';
 import { KanbanBoard } from '../KanbanBoard';
 import { KanbanBoardColumn, KanbanBoardCard } from '../KanbanBoard/KanbanBoard.props';
-import { View, Text, Horizontal } from 'app-studio';
+import { View, Text, Horizontal } from '@app-studio/web';
 
 export const CustomRenderKanbanBoard = () => {
   const [columns, setColumns] = useState<KanbanBoardColumn[]>([
@@ -132,7 +132,7 @@ import React, { useState } from 'react';
 import { KanbanBoard } from '../KanbanBoard';
 import { Button } from '../Button';
 import { KanbanBoardColumn, KanbanBoardCard } from '../KanbanBoard/KanbanBoard.props';
-import { View, Text, Horizontal } from 'app-studio';
+import { View, Text, Horizontal } from '@app-studio/web';
 
 export const CustomHeaderKanbanBoard = () => {
   const [columns, setColumns] = useState<KanbanBoardColumn[]>([
@@ -176,7 +176,7 @@ You can implement inline editing of card titles by using the `onCardTitleChange`
 import React, { useState } from 'react';
 import { KanbanBoard } from '../KanbanBoard';
 import { KanbanBoardColumn, KanbanBoardCard } from '../KanbanBoard/KanbanBoard.props';
-import { Input, Text } from 'app-studio';
+import { Input, Text } from '@app-studio/web';
 
 export const EditableKanbanBoard = () => {
   const [columns, setColumns] = useState<KanbanBoardColumn[]>([

package/docs/components/Label.mdx

@@ -12,7 +12,7 @@ A semantic text element designed for form labels and descriptive text with compr
 import React from 'react';
 import { Label } from '@app-studio/web';
 import { TextField } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const BasicLabel = () => (
   <Vertical gap={8}>
@@ -26,7 +26,7 @@ export const BasicLabel = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const LabelSizes = () => (
   <Vertical gap={16}>
@@ -43,7 +43,7 @@ export const LabelSizes = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const LabelWeights = () => (
   <Vertical gap={12}>
@@ -60,7 +60,7 @@ export const LabelWeights = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const HeadingLabels = () => (
   <Vertical gap={16}>
@@ -78,7 +78,7 @@ export const HeadingLabels = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const TextDecorations = () => (
   <Vertical gap={12}>
@@ -98,7 +98,7 @@ export const TextDecorations = () => (
 import React from 'react';
 import { Label } from '@app-studio/web';
 import { TextField, TextArea } from '@app-studio/web';
-import { Vertical, Horizontal } from 'app-studio';
+import { Vertical, Horizontal } from '@app-studio/web';
 
 export const FormLabels = () => (
   <Vertical gap={20}>
@@ -131,7 +131,7 @@ export const FormLabels = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { View, Vertical } from 'app-studio';
+import { View, Vertical } from '@app-studio/web';
 
 export const SectionHeaders = () => (
   <Vertical gap={24}>
@@ -172,7 +172,7 @@ export const SectionHeaders = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const ColoredLabels = () => (
   <Vertical gap={12}>

package/docs/components/Link.mdx

@@ -22,8 +22,8 @@ Optional prop to define the text decoration style of the link as underline views
 
 ```tsx
 import React from 'react';
-import { Text } from 'app-studio';
-import { Vertical } from 'app-studio';
+import { Text } from '@app-studio/web';
+import { Vertical } from '@app-studio/web';
 
 import { Link } from '../Link';
 
@@ -53,7 +53,7 @@ Optional boolean indicating whether the link points to an external resource. Def
 
 ```tsx
 import React from 'react';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 import { Link } from '../Link';
 

package/docs/components/Loader.mdx

@@ -21,7 +21,7 @@ export const BasicLoader = () => (
 ```tsx
 import React from 'react';
 import { Loader } from '@app-studio/web';
-import { Vertical, Horizontal } from 'app-studio';
+import { Vertical, Horizontal } from '@app-studio/web';
 
 export const LoaderTypes = () => (
   <Vertical gap={24}>
@@ -38,7 +38,7 @@ export const LoaderTypes = () => (
 ```tsx
 import React from 'react';
 import { Loader } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const LoaderSizes = () => (
   <Horizontal gap={24} alignItems="center">
@@ -55,7 +55,7 @@ export const LoaderSizes = () => (
 ```tsx
 import React from 'react';
 import { Loader } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const CustomSizes = () => (
   <Horizontal gap={24} alignItems="center">
@@ -71,7 +71,7 @@ export const CustomSizes = () => (
 ```tsx
 import React from 'react';
 import { Loader } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const TextPositioning = () => (
   <Vertical gap={32}>
@@ -87,7 +87,7 @@ export const TextPositioning = () => (
 ```tsx
 import React from 'react';
 import { Loader } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const ColoredLoaders = () => (
   <Vertical gap={20}>
@@ -126,7 +126,7 @@ export const ColoredLoaders = () => (
 ```tsx
 import React from 'react';
 import { Loader } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const AnimationSpeeds = () => (
   <Horizontal gap={32} alignItems="center">
@@ -142,7 +142,7 @@ export const AnimationSpeeds = () => (
 import React, { useState } from 'react';
 import { Loader } from '@app-studio/web';
 import { Button } from '@app-studio/web';
-import { View, Text, Vertical } from 'app-studio';
+import { View, Text, Vertical } from '@app-studio/web';
 
 export const LoadingStates = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -209,7 +209,7 @@ export const LoadingStates = () => {
 ```tsx
 import React from 'react';
 import { Loader } from '@app-studio/web';
-import { Center } from 'app-studio';
+import { Center } from '@app-studio/web';
 
 export const FullPageLoader = () => (
   <Center
@@ -237,7 +237,7 @@ export const FullPageLoader = () => (
 import React, { useState } from 'react';
 import { Loader } from '@app-studio/web';
 import { Button } from '@app-studio/web';
-import { Horizontal, Text } from 'app-studio';
+import { Horizontal, Text } from '@app-studio/web';
 
 export const InlineLoader = () => {
   const [saving, setSaving] = useState(false);
@@ -273,7 +273,7 @@ export const InlineLoader = () => {
 ```tsx
 import React, { useState, useEffect } from 'react';
 import { Loader } from '@app-studio/web';
-import { View, Text, Vertical } from 'app-studio';
+import { View, Text, Vertical } from '@app-studio/web';
 
 export const CardLoader = () => {
   const [loading, setLoading] = useState(true);
@@ -330,7 +330,7 @@ export const CardLoader = () => {
 import React, { useState } from 'react';
 import { Loader } from '@app-studio/web';
 import { Button } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const ButtonLoaders = () => {
   const [loading1, setLoading1] = useState(false);
@@ -374,7 +374,7 @@ export const ButtonLoaders = () => {
 ```tsx
 import React from 'react';
 import { Loader } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const CustomLoader = () => (
   <View

package/docs/components/Menubar.mdx

@@ -11,8 +11,8 @@ A flexible menubar component for creating application menus with dropdown submen
 ```tsx
 import React from 'react';
 import { Menubar } from '../Menubar';
-import { View } from 'app-studio';
-import { Text } from 'app-studio';
+import { View } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const DefaultMenubar = () => {
   const items = [

package/docs/components/Message.mdx

@@ -1,7 +1,7 @@
 ### **Import**
 
 ```tsx
-import { Message } from 'app-studio';
+import { Message } from '@app-studio/web';
 ```
 
 ### **Default**
@@ -258,7 +258,7 @@ It represents the main container or wrapper that holds all the content and compo
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 import { Horizontal } from '../Layout/Horizontal/Horizontal';
 
 const [showSharp, setShowSharp] = useState(false);
@@ -306,7 +306,7 @@ const [showRounded, setShowRounded] = useState(false);
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 const [show, setShow] = useState(false);
 
@@ -398,7 +398,7 @@ A vertical scroll is displayed, if the content height exceed the body height.
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 const [show, setShow] = useState(false);
 
@@ -439,7 +439,7 @@ It represents the footer section of a message, where the primary information or
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 const [show, setShow] = useState(false);
 

package/docs/components/Modal.mdx

@@ -1,7 +1,7 @@
 ### **Import**
 
 ```tsx
-import { Modal } from 'app-studio';
+import { Modal } from '@app-studio/web';
 ```
 
 ### **Default**
@@ -263,7 +263,7 @@ It represents the main container or wrapper that holds all the content and compo
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 import { Horizontal } from '../Layout/Horizontal/Horizontal';
 
 const [showSharp, setShowSharp] = useState(false);
@@ -311,7 +311,7 @@ const [showRounded, setShowRounded] = useState(false);
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 const [show, setShow] = useState(false);
 
@@ -410,7 +410,7 @@ A vertical scroll is displayed, if the content height exceed the body height.
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 const [show, setShow] = useState(false);
 
@@ -451,7 +451,7 @@ It represents the footer section of a modal, which typically contains buttons or
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 const [show, setShow] = useState(false);
 

package/docs/components/Slider.mdx

@@ -88,7 +88,7 @@ Change the orientation of the slider.
 ```tsx
 import React, { useState } from 'react';
 import { Slider } from '../Slider';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const VerticalSlider = () => {
   const [value, setValue] = useState(50);

package/docs/components/Tabs.mdx

@@ -125,7 +125,7 @@ Allows for optional styling to be applied to the tabs via a TabsStyles object.
 
 ```tsx
 import React from 'react';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 import { Tabs } from '../../Tabs/Tabs';
 
 export const StylesTabs = () => {