@app-studio/web 0.9.38 → 0.9.41

package/docs/components/TagInput.mdx

@@ -10,7 +10,7 @@ A form input component for managing a list of tags. Users can add tags by typing
 ### **Default**
 ```tsx
 import React, { useState } from 'react';
-import { Vertical, Text } from 'app-studio';
+import { Vertical, Text } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const DefaultTagInput = () => {
@@ -38,7 +38,7 @@ Characters that trigger tag creation. Supports 'enter', 'comma', 'space', and 't
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const CustomSeparatorsTagInput = () => {
@@ -67,7 +67,7 @@ Maximum number of tags allowed.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const LimitedTagInput = () => {
@@ -95,7 +95,7 @@ Validation constraints for tag length.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const ValidatedTagInput = () => {
@@ -126,7 +126,7 @@ Whether to allow duplicate tags.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const NoDuplicatesTagInput = () => {
@@ -171,7 +171,7 @@ Disabled and read-only states.
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const DisabledTagInput = () => {
@@ -202,7 +202,7 @@ Visual variant of the component: 'outline', 'default', or 'none'.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const VariantTagInput = () => {
@@ -238,7 +238,7 @@ Size of the component: 'xs', 'sm', 'md', 'lg', or 'xl'.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const SizeTagInput = () => {
@@ -266,7 +266,7 @@ Shape/border radius: 'default', 'sharp', 'rounded', or 'pillShaped'.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const ShapeTagInput = () => {
@@ -294,7 +294,7 @@ React nodes to render on the left and right sides of the input.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 import { SearchIcon, TagIcon } from '../../../Icon';
 
@@ -329,7 +329,7 @@ Custom styling for different parts of the component.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const StyledTagInput = () => {
@@ -378,7 +378,7 @@ Callbacks for individual tag operations.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical, Text } from 'app-studio';
+import { Vertical, Text } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const CallbackTagInput = () => {
@@ -409,7 +409,7 @@ Whether tags can be removed by clicking the X button.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const NonRemovableTagInput = () => {
@@ -440,7 +440,7 @@ TagInput works seamlessly with forms and form libraries.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical, Button } from 'app-studio';
+import { Vertical, Button } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const FormTagInput = () => {
@@ -491,7 +491,7 @@ Display validation errors and helper messages.
 
 ```tsx
 import React, { useState } from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TagInput } from '../TagInput';
 
 export const ErrorTagInput = () => {

package/docs/components/TextArea.mdx

@@ -24,7 +24,7 @@ Optional color scheme for the component.
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { TextArea } from '../TextArea';
 
@@ -54,7 +54,7 @@ import React from 'react';
 import { Button } from '../../../Button/Button';
 import { TextArea } from '../../../Form/TextArea/TextArea';
 
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const HelperTextArea = () => {
   const initialValues = {
@@ -110,7 +110,7 @@ Placeholder text for the text area when it is empty.
 import React from 'react';
 import { Button } from '../../../Button/Button';
 
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 import { TextArea } from '../TextArea';
 

package/docs/components/TextField.mdx

@@ -12,7 +12,7 @@ A customizable text input field with optional helpers, labels, and icons.
 import React from 'react';
 import { Button } from '../../../Button/Button';
 
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 import { TextField } from '../TextField';
 
@@ -46,7 +46,7 @@ import { Button } from '../../../Button/Button';
 
 import { TextField } from '../../../Form/TextField/TextField';
 
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const HelperTextInput = () => {
   const initialValues = {
@@ -110,7 +110,7 @@ Optional property to specify the color scheme of the TextField.
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { TextField } from '../TextField';
 
@@ -179,7 +179,7 @@ Optional placeholder text shown inside the TextField when empty.
 import React from 'react';
 import { Button } from '../../../Button/Button';
 
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 import { TextField } from '../TextField';
 
@@ -208,7 +208,7 @@ Optional flag that when true allows the TextField to be cleared.
 
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 import { TextField } from '../TextField';
 

package/docs/components/Toggle.mdx

@@ -23,10 +23,10 @@ Optional property to determine the shape of the toggle component.
 
 ```tsx
 import React from 'react';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 import { Toggle } from '../Toggle';
 import { Shape } from '../Toggle/Toggle.type';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 export const ShapeDemo = () => (
   <Horizontal gap={15}>
     {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
@@ -75,7 +75,7 @@ Optional property to style the toggle component with predefined sets of visual t
 ```tsx
 import React from 'react';
 import { Toggle } from '../Toggle';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { Variant } from '../Toggle/Toggle.type';
 
 export const VariantDemo = () => (
@@ -96,7 +96,7 @@ Optional string to set the color scheme for the toggle component's appearance.
 ```tsx
 import React from 'react';
 import { Toggle } from '../Toggle';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const ColorSchemeDemo = () => (
   <Horizontal gap={10}>

package/docs/components/ToggleGroup.mdx

@@ -31,8 +31,8 @@ import React from 'react';
 import { DustBinIcon } from '../../Icon';
 import { ToggleGroup } from '../ToggleGroup';
 import { Shape } from '../ToggleGroup/ToggleGroup.type';
-import { Horizontal } from 'app-studio';
-import { View } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
+import { View } from '@app-studio/web';
 
 export const ShapeDemo = () => {
   const items = [
@@ -61,7 +61,7 @@ Mandatory array of items defining each toggle in the group.
 ```tsx
 import React from 'react';
 import { ToggleGroup } from '../ToggleGroup';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const ItemsDemo = () => {
   const items = [
@@ -79,10 +79,10 @@ Optional variant prop to specify the visual style of the toggle group.
 
 ```tsx
 import React from 'react';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 import { ToggleGroup } from '../ToggleGroup';
 import { Variant } from '../ToggleGroup/ToggleGroup.type';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const VariantDemo = () => {
   const items = [
@@ -107,8 +107,8 @@ Optional colorScheme prop for theming the toggle group.
 ```tsx
 import React from 'react';
 import { ToggleGroup } from '../ToggleGroup';
-import { Vertical } from 'app-studio';
-import { Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { Text } from '@app-studio/web';
 
 export const ColorSchemeDemo = () => {
   const items = [
@@ -139,8 +139,8 @@ Optional callback function that fires when the active toggle changes, providing
 ```tsx
 import React, { useState } from 'react';
 import { ToggleGroup } from '../ToggleGroup';
-import { Text } from 'app-studio';
-import { Vertical } from 'app-studio';
+import { Text } from '@app-studio/web';
+import { Vertical } from '@app-studio/web';
 
 export const OnToggleChangeDemo = () => {
   const [newItems, setNewItems] = useState<any>([]);

package/docs/components/Tooltip.mdx

@@ -29,7 +29,7 @@ Tooltips can be positioned relative to the trigger element.
 import React from 'react';
 import { Tooltip } from '../Tooltip';
 import { Button } from '../../Button/Button';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const TooltipPositionsExample = () => {
   return (
@@ -61,7 +61,7 @@ Different visual styles for tooltips.
 import React from 'react';
 import { Tooltip } from '../Tooltip';
 import { Button } from '../../Button/Button';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const TooltipVariantsExample = () => {
   return (
@@ -89,7 +89,7 @@ Tooltips come in different sizes.
 import React from 'react';
 import { Tooltip } from '../Tooltip';
 import { Button } from '../../Button/Button';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const TooltipSizesExample = () => {
   return (
@@ -117,8 +117,8 @@ Tooltips can contain rich content, not just text.
 import React from 'react';
 import { Tooltip } from '../Tooltip';
 import { Button } from '../../Button/Button';
-import { Text } from 'app-studio';
-import { Vertical } from 'app-studio';
+import { Text } from '@app-studio/web';
+import { Vertical } from '@app-studio/web';
 
 export const CustomContentTooltip = () => {
   return (
@@ -153,7 +153,7 @@ For more control, you can use the compound component pattern.
 import React from 'react';
 import { Tooltip } from '../Tooltip';
 import { Button } from '../../Button/Button';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const CompoundTooltip = () => {
   return (

package/docs/components/Tree.mdx

@@ -11,7 +11,7 @@ A component for displaying hierarchical data with expandable/collapsible nodes.
 ```tsx
 import React from 'react';
 import { Tree } from '@app-studio/web';
-import { Text, Vertical } from 'app-studio';
+import { Text, Vertical } from '@app-studio/web';
 import { FolderIcon, FileIcon, DocumentIcon } from '@app-studio/web';
 
 export const DefaultTree = () => {
@@ -63,7 +63,7 @@ export const DefaultTree = () => {
 ```tsx
 import React from 'react';
 import { Tree } from '@app-studio/web';
-import { Text, Vertical } from 'app-studio';
+import { Text, Vertical } from '@app-studio/web';
 import { FolderIcon, FileIcon, DocumentIcon } from '@app-studio/web';
 import { TreeNode } from '@app-studio/web';
 
@@ -144,7 +144,7 @@ export const DataDrivenTree = () => {
 ```tsx
 import React, { useState } from 'react';
 import { Tree } from '@app-studio/web';
-import { Text, View, Vertical } from 'app-studio';
+import { Text, View, Vertical } from '@app-studio/web';
 import { FolderIcon, FileIcon, DragHandleIcon } from '@app-studio/web';
 import { TreeNode } from '@app-studio/web';
 
@@ -216,7 +216,7 @@ export const DraggableTree = () => {
 ```tsx
 import React from 'react';
 import { Tree } from '@app-studio/web';
-import { Text, Horizontal, Vertical } from 'app-studio';
+import { Text, Horizontal, Vertical } from '@app-studio/web';
 import { FolderIcon, FileIcon } from '@app-studio/web';
 import { TreeNode } from '@app-studio/web';
 

package/docs/components/Uploader.mdx

@@ -204,7 +204,7 @@ export const ValidatedUploader = () => {
 ```tsx
 import React from 'react';
 import { Uploader } from '@app-studio/web';
-import { View, Text } from 'app-studio';
+import { View, Text } from '@app-studio/web';
 import { CheckIcon, ErrorIcon } from '@app-studio/web';
 
 export const CustomUploader = () => {
@@ -271,7 +271,7 @@ The Uploader component is seamlessly integrated into the ChatInput component for
 ```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 ChatWithFileUpload = () => {
   const [inputValue, setInputValue] = useState('');

package/docs/components/Vertical.mdx

@@ -6,14 +6,14 @@ A flexible layout component that arranges its children in a vertical stack using
   ```tsx
   import { Vertical } from '@app-studio/web';
   // or from app-studio
-  import { Vertical } from 'app-studio';
+  import { Vertical } from '@app-studio/web';
   ```
 
 ### **Basic Usage**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const BasicVertical = () => (
   <Vertical>
@@ -27,8 +27,8 @@ export const BasicVertical = () => (
 ### **With Gap Spacing**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const VerticalWithGap = () => (
   <Vertical gap={16}>
@@ -48,8 +48,8 @@ export const VerticalWithGap = () => (
 ### **Alignment Options**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const VerticalAlignment = () => (
   <Vertical gap={20}>
@@ -91,8 +91,8 @@ export const VerticalAlignment = () => (
 ### **Justification Options**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const VerticalJustification = () => (
   <Vertical gap={20}>
@@ -138,9 +138,9 @@ export const VerticalJustification = () => (
 ### **Form Layout Example**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TextField, Button, Checkbox } from '@app-studio/web';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const FormLayout = () => (
   <Vertical gap={20} width="100%" maxWidth={400} padding={24}>
@@ -188,8 +188,8 @@ export const FormLayout = () => (
 ### **Navigation Menu Example**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text, Horizontal } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text, Horizontal } from '@app-studio/web';
 import { HomeIcon, UserIcon, SettingsIcon, LogoutIcon } from '@app-studio/web';
 
 export const NavigationMenu = () => (
@@ -261,8 +261,8 @@ export const NavigationMenu = () => (
 ### **Card Layout Example**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text, Horizontal } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text, Horizontal } from '@app-studio/web';
 import { Button } from '@app-studio/web';
 import { StarIcon, HeartIcon, ShareIcon } from '@app-studio/web';
 
@@ -344,8 +344,8 @@ The Vertical component extends ViewProps from app-studio, inheriting all standar
 ### **Responsive Design**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const ResponsiveVertical = () => (
   <Vertical
@@ -377,8 +377,8 @@ export const ResponsiveVertical = () => (
 **Sticky Header with Scrollable Content:**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const StickyHeaderLayout = () => (
   <Vertical height="100vh">
@@ -417,8 +417,8 @@ export const StickyHeaderLayout = () => (
 **Split Layout:**
 ```tsx
 import React from 'react';
-import { Vertical, Horizontal } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical, Horizontal } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const SplitLayout = () => (
   <Horizontal height="100vh">
@@ -544,7 +544,7 @@ export const SplitLayout = () => (
 The Vertical component works seamlessly with other layout components:
 
 ```tsx
-import { Vertical, Horizontal, Center } from 'app-studio';
+import { Vertical, Horizontal, Center } from '@app-studio/web';
 
 // Nested layouts
 <Vertical gap={20}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.38",
+  "version": "0.9.41",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [
@@ -112,7 +112,7 @@
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
-    "app-studio": "^0.6.28",
+    "app-studio": "^0.6.31",
     "async-mutex": "^0.5.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",