@solostylist/ui-kit-native 1.0.1 → 1.0.3

package/dist/s-chat-input/s-chat-input.js

@@ -1,66 +1,135 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as DocumentPicker from 'expo-document-picker';
 import { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { TextInput } from 'react-native-paper';
+import { Image, View } from 'react-native';
+import EmojiPicker from 'rn-emoji-keyboard';
+import { SFileIcon } from '../s-file-icon';
 import { SIconButton } from '../s-icon-button';
+import SText from '../s-text';
+import { STextField } from '../s-text-field';
 import { useSTheme } from '../theme';
 /**
  * A chat input component with file attachment support, emoji picker, and multiline text input.
- * Synced with web SChatInput from @solostylist/ui-kit.
  */
-export const SChatInput = ({ value: controlledValue, onChangeText: controlledOnChangeText, onSubmit, placeholder = 'Enter your message here...', disabled = false, hideFileAttachment = false, hideEmojiPicker = false, onFileAttachmentPress, onEmojiPickerPress, minLines = 1, maxLines = 10, autoFocus = false, }) => {
+export const SChatInput = ({ value: controlledValue, onChangeText: controlledOnChangeText, onSubmit, onFileSelect, placeholder = 'Enter your message here...', disabled = false, hideFileAttachment = false, hideEmojiPicker = false, acceptedFileTypes, minLines = 1, maxLines = 10, autoFocus = false, }) => {
     const { theme } = useSTheme();
     const [internalValue, setInternalValue] = useState('');
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
     // Use controlled value if provided, otherwise use internal state
     const inputValue = controlledValue !== undefined ? controlledValue : internalValue;
     const handleTextChange = controlledOnChangeText || setInternalValue;
+    const isImageFile = (mimeType) => {
+        return mimeType?.startsWith('image/') ?? false;
+    };
+    const handleFileSelect = async () => {
+        if (disabled)
+            return;
+        try {
+            const result = await DocumentPicker.getDocumentAsync({
+                type: acceptedFileTypes || '*/*',
+                multiple: true,
+                copyToCacheDirectory: true,
+            });
+            if (!result.canceled && result.assets) {
+                const newFiles = result.assets.map((asset) => ({
+                    uri: asset.uri,
+                    name: asset.name,
+                    size: asset.size ?? undefined,
+                    mimeType: asset.mimeType ?? undefined,
+                }));
+                setSelectedFiles((prev) => [...prev, ...newFiles]);
+                onFileSelect?.(newFiles);
+            }
+        }
+        catch (error) {
+            console.error('Error picking document:', error);
+        }
+    };
+    const handleRemoveFile = (index) => {
+        setSelectedFiles((prev) => prev.filter((_, i) => i !== index));
+    };
+    const handleEmojiSelect = (emoji) => {
+        const newValue = inputValue + emoji.emoji;
+        handleTextChange(newValue);
+        setEmojiPickerOpen(false);
+    };
     const handleSubmit = () => {
-        if (disabled || inputValue.trim().length === 0)
+        if (disabled || (inputValue.trim().length === 0 && selectedFiles.length === 0))
             return;
-        onSubmit?.(inputValue);
-        // Clear input after submission if using internal state
+        onSubmit?.(inputValue, selectedFiles);
+        // Clear input and files after submission if using internal state
         if (controlledValue === undefined) {
             setInternalValue('');
         }
+        setSelectedFiles([]);
     };
-    const styles = StyleSheet.create({
-        container: {
-            borderWidth: 1,
-            borderColor: theme.colors.divider,
-            borderRadius: theme.borderRadius.md,
-            padding: 8,
-            backgroundColor: theme.colors.background.paper,
-        },
-        inputContainer: {
-            backgroundColor: 'transparent',
-        },
-        input: {
-            backgroundColor: 'transparent',
-            paddingHorizontal: 0,
-            paddingVertical: 0,
-            minHeight: minLines * 20,
-            maxHeight: maxLines * 20,
-        },
-        content: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: theme.typography.fontSize.md,
-            color: theme.colors.text.primary,
-        },
-        actionsContainer: {
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginTop: 8,
-        },
-        leftActions: {
-            flexDirection: 'row',
-            gap: 4,
-        },
-        iconButton: {
-            margin: 0,
-        },
-    });
-    return (_jsxs(View, { style: styles.container, children: [_jsx(TextInput, { mode: "flat", placeholder: placeholder, placeholderTextColor: theme.colors.divider, value: inputValue, onChangeText: handleTextChange, disabled: disabled, multiline: true, numberOfLines: minLines, autoFocus: autoFocus, style: styles.input, contentStyle: styles.content, underlineStyle: { display: 'none' }, activeUnderlineColor: "transparent", underlineColor: "transparent", textColor: theme.colors.text.primary }), _jsxs(View, { style: styles.actionsContainer, children: [_jsxs(View, { style: styles.leftActions, children: [!hideFileAttachment && (_jsx(SIconButton, { icon: "attachment", size: "medium", disabled: disabled, onPress: onFileAttachmentPress, style: styles.iconButton })), !hideEmojiPicker && (_jsx(SIconButton, { icon: "emoticon-happy-outline", size: "medium", disabled: disabled, onPress: onEmojiPickerPress, style: styles.iconButton }))] }), _jsx(SIconButton, { icon: "arrow-up", size: "medium", disabled: disabled || inputValue.trim().length === 0, onPress: handleSubmit, style: styles.iconButton, iconColor: disabled || inputValue.trim().length === 0 ? theme.colors.text.disabled : theme.colors.primary[500] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: {
+                    borderWidth: 1,
+                    borderColor: theme.colors.divider,
+                    borderRadius: theme.borderRadius.lg,
+                    backgroundColor: theme.colors.background.default,
+                }, children: [_jsx(STextField, { variant: "flat", placeholder: placeholder, value: inputValue, onChangeText: handleTextChange, disabled: disabled, multiline: true, numberOfLines: minLines, autoFocus: autoFocus, style: {
+                            backgroundColor: 'transparent',
+                            minHeight: minLines * 20,
+                            maxHeight: maxLines * 20,
+                        }, underlineStyle: { display: 'none' }, activeUnderlineColor: "transparent", underlineColor: "transparent", textColor: theme.colors.text.primary }), selectedFiles.length > 0 && (_jsx(View, { style: { paddingLeft: 16, paddingRight: 16 }, children: selectedFiles.map((file, index) => {
+                            const isImage = isImageFile(file.mimeType);
+                            const extension = file.name.split('.').pop();
+                            return (_jsxs(View, { style: {
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    backgroundColor: theme.colors.background.paper,
+                                    borderWidth: 1,
+                                    borderColor: theme.colors.divider,
+                                    borderRadius: theme.borderRadius.sm,
+                                    padding: 8,
+                                    marginBottom: 4,
+                                }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 8, flex: 1 }, children: [isImage ? (_jsx(Image, { source: { uri: file.uri }, style: {
+                                                    width: 40,
+                                                    height: 40,
+                                                    borderRadius: theme.borderRadius.sm,
+                                                    borderWidth: 1,
+                                                    borderColor: theme.colors.divider,
+                                                }, resizeMode: "cover" })) : (_jsx(SFileIcon, { extension: extension, size: 40 })), _jsx(View, { style: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 4 }, children: _jsxs(SText, { numberOfLines: 1, ellipsizeMode: "middle", style: { color: theme.colors.text.primary, flex: 1 }, children: [file.name, ' ', file.size && (_jsxs(SText, { variant: "caption", style: { color: theme.colors.text.secondary }, children: ["(", Math.round(file.size / 1024), " KB)"] }))] }) })] }), _jsx(SIconButton, { icon: "close", disabled: disabled, onPress: () => handleRemoveFile(index) })] }, `${file.name}-${index}`));
+                        }) })), _jsxs(View, { style: {
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            marginTop: 8,
+                            paddingHorizontal: 8,
+                        }, children: [_jsxs(View, { style: {
+                                    flexDirection: 'row',
+                                    gap: 4,
+                                }, children: [!hideFileAttachment && _jsx(SIconButton, { icon: "attachment", disabled: disabled, onPress: handleFileSelect }), !hideEmojiPicker && (_jsx(SIconButton, { icon: "emoticon-happy-outline", disabled: disabled, onPress: () => setEmojiPickerOpen(true) }))] }), _jsx(SIconButton, { icon: "arrow-up", disabled: disabled || (inputValue.trim().length === 0 && selectedFiles.length === 0), onPress: handleSubmit })] })] }), _jsx(EmojiPicker, { onEmojiSelected: handleEmojiSelect, open: emojiPickerOpen, onClose: () => setEmojiPickerOpen(false), theme: {
+                    backdrop: theme.colors.blackAlpha.medium,
+                    knob: theme.colors.divider,
+                    container: theme.colors.background.paper,
+                    header: theme.colors.text.primary,
+                    skinTonesContainer: theme.colors.background.paper,
+                    category: {
+                        icon: theme.colors.text.secondary,
+                        iconActive: theme.colors.primary.main,
+                        container: 'transparent',
+                        containerActive: theme.colors.whiteAlpha.light,
+                    },
+                    search: {
+                        background: theme.colors.background.default,
+                        text: theme.colors.text.primary,
+                        placeholder: theme.colors.text.disabled,
+                        icon: theme.colors.text.secondary,
+                    },
+                    customButton: {
+                        icon: theme.colors.text.secondary,
+                        iconPressed: theme.colors.primary.main,
+                        background: 'transparent',
+                        backgroundPressed: theme.colors.whiteAlpha.light,
+                    },
+                    emoji: {
+                        selected: theme.colors.whiteAlpha.medium,
+                    },
+                }, enableSearchBar: true, enableRecentlyUsed: true, categoryPosition: "top" })] }));
 };
 SChatInput.displayName = 'SChatInput';
 export default SChatInput;

package/dist/s-chat-message/s-chat-message.d.ts

@@ -1,17 +1,16 @@
 import React from 'react';
-import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type ImageSourcePropType, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 export interface ChatAttachment {
     id: string;
     type: 'image' | 'file';
-    url: string;
+    url: ImageSourcePropType;
     name?: string;
     size?: number;
     mimeType?: string;
-    thumbnailUrl?: string;
+    thumbnailUrl?: ImageSourcePropType;
 }
 /**
  * Props interface for SChatMessage component
- * Synced with web SChatMessage from @solostylist/ui-kit
  */
 export interface SChatMessageProps {
     /** The message content to display in the chat bubble */
@@ -20,8 +19,8 @@ export interface SChatMessageProps {
     variant?: 'sent' | 'received';
     /** The timestamp for the message, displayed when showTimestamp is true */
     timestamp?: string | Date;
-    /** Avatar image URL or base64 string to display next to the message */
-    avatar?: string;
+    /** Avatar image URL or local asset to display next to the message */
+    avatar?: ImageSourcePropType;
     /** Name of the message sender, displayed above received messages when provided */
     senderName?: string;
     /** Whether to display the avatar next to the message */
@@ -53,7 +52,6 @@ export interface SChatMessageProps {
 }
 /**
  * A comprehensive chat message component for conversation interfaces with support for text, images, and file attachments.
- * Synced with web SChatMessage from @solostylist/ui-kit.
  */
 export declare const SChatMessage: {
     ({ message, variant, timestamp, avatar, senderName, showAvatar, showTimestamp, maxWidth, attachments, onAttachmentClick, onDownload, hasError, errorMessage, onRetry, loading, style, messageBubbleStyle, messageTextStyle, }: SChatMessageProps): React.JSX.Element;

package/dist/s-chat-message/s-chat-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-chat-message.d.ts","sourceRoot":"","sources":["../../src/s-chat-message/s-chat-message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM3G,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC9B,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IACzD,0DAA0D;IAC1D,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACzC;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;mOAmBtB,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA6SvC,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"s-chat-message.d.ts","sourceRoot":"","sources":["../../src/s-chat-message/s-chat-message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,GAAG,EAAE,mBAAmB,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC9B,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,qEAAqE;IACrE,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IACzD,0DAA0D;IAC1D,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,YAAY;mOAmBtB,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAqQvC,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/s-chat-message/s-chat-message.js

@@ -1,31 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pressable, StyleSheet, View } from 'react-native';
-import { IconButton, Text } from 'react-native-paper';
+import { Pressable, View, } from 'react-native';
+import { formatFileSize, formatTimestamp } from '@solostylist/core';
 import { SAvatar } from '../s-avatar';
+import { SIconButton } from '../s-icon-button';
 import { SLazyImage } from '../s-lazy-image';
+import { SSkeleton } from '../s-skeleton';
+import { SText } from '../s-text';
 import { useSTheme } from '../theme';
 /**
  * A comprehensive chat message component for conversation interfaces with support for text, images, and file attachments.
- * Synced with web SChatMessage from @solostylist/ui-kit.
  */
 export const SChatMessage = ({ message, variant = 'received', timestamp, avatar, senderName, showAvatar = true, showTimestamp = false, maxWidth = 70, attachments = [], onAttachmentClick, onDownload, hasError = false, errorMessage = 'Failed to send message', onRetry, loading = false, style, messageBubbleStyle, messageTextStyle, }) => {
     const { theme } = useSTheme();
     const isSent = variant === 'sent';
-    const formatTimestamp = (ts) => {
-        const date = typeof ts === 'string' ? new Date(ts) : ts;
-        return date.toLocaleTimeString('en-US', {
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: true,
-        });
-    };
-    const formatFileSize = (bytes) => {
-        if (!bytes)
-            return '';
-        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(1024));
-        return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + ' ' + sizes[i];
-    };
     const handleImageClick = (attachment) => {
         if (onAttachmentClick) {
             onAttachmentClick(attachment);
@@ -41,167 +28,105 @@ export const SChatMessage = ({ message, variant = 'received', timestamp, avatar,
     };
     const imageAttachments = attachments.filter((a) => a.type === 'image');
     const fileAttachments = attachments.filter((a) => a.type === 'file');
-    const styles = StyleSheet.create({
-        container: {
-            flexDirection: isSent ? 'row-reverse' : 'row',
-            alignItems: 'flex-start',
-            gap: theme.spacing.sm,
-            marginBottom: theme.spacing.sm,
-            maxWidth: `${maxWidth}%`,
-            alignSelf: isSent ? 'flex-end' : 'flex-start',
-        },
-        contentColumn: {
-            flexDirection: 'column',
-            alignItems: isSent ? 'flex-end' : 'flex-start',
-            gap: theme.spacing.xs,
-            minWidth: 0,
-            flex: 1,
-        },
-        senderName: {
-            fontSize: theme.typography.fontSize.sm,
-            fontFamily: theme.typography.fontFamily,
-            color: theme.colors.text.primary,
-            marginLeft: isSent ? 0 : theme.spacing.xs,
-            marginRight: isSent ? theme.spacing.xs : 0,
-        },
-        messageBubble: {
-            borderRadius: theme.borderRadius.md,
-            maxWidth: '100%',
-            borderWidth: 1,
-            borderColor: hasError ? theme.colors.error.main : theme.colors.divider,
-            overflow: 'hidden',
-            opacity: hasError ? 0.7 : 1,
-        },
-        imagesGrid: {
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            gap: theme.spacing.xs,
-            padding: theme.spacing.xs,
-            minWidth: 200,
-        },
-        imageContainer: {
-            borderRadius: theme.borderRadius.sm,
-            overflow: 'hidden',
-            width: imageAttachments.length === 1 ? '100%' : '48%',
-            aspectRatio: imageAttachments.length === 1 ? 1.5 : 1,
-        },
-        fileAttachmentsContainer: {
-            padding: theme.spacing.md,
-        },
-        fileAttachment: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: theme.spacing.md,
-            padding: theme.spacing.sm,
-            borderWidth: 1,
-            borderColor: theme.colors.divider,
-            borderRadius: theme.borderRadius.sm,
-        },
-        fileIcon: {
-            width: 32,
-            height: 32,
-            backgroundColor: theme.colors.secondary[300],
-            borderRadius: theme.borderRadius.sm,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-        fileIconText: {
-            fontSize: 10,
-            fontWeight: '600',
-            color: theme.colors.secondary[700],
-        },
-        fileInfo: {
-            flex: 1,
-            minWidth: 0,
-        },
-        fileName: {
-            fontSize: theme.typography.fontSize.sm,
-            fontWeight: '500',
-            color: theme.colors.text.primary,
-        },
-        fileSize: {
-            fontSize: theme.typography.fontSize.xs,
-            color: theme.colors.text.secondary,
-        },
-        messageContent: {
-            paddingHorizontal: theme.spacing.md,
-            paddingVertical: theme.spacing.md,
-            paddingTop: attachments.length > 0 ? 0 : theme.spacing.md,
-        },
-        messageText: {
-            fontSize: theme.typography.fontSize.sm,
-            fontFamily: theme.typography.fontFamily,
-            color: hasError ? theme.colors.error.main : theme.colors.text.primary,
-        },
-        timestampText: {
-            fontSize: theme.typography.fontSize.xs,
-            color: theme.colors.text.secondary,
-            marginLeft: isSent ? 0 : theme.spacing.xs,
-            marginRight: isSent ? theme.spacing.xs : 0,
-        },
-        errorContainer: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: theme.spacing.xs,
-        },
-        errorText: {
-            fontSize: theme.typography.fontSize.xs,
-            color: theme.colors.error.main,
-        },
-        skeletonContainer: {
-            flexDirection: isSent ? 'row-reverse' : 'row',
-            alignItems: 'flex-start',
-            gap: theme.spacing.sm,
-            marginBottom: theme.spacing.sm,
-            maxWidth: `${maxWidth}%`,
-            alignSelf: isSent ? 'flex-end' : 'flex-start',
-        },
-        skeletonAvatar: {
-            width: 36,
-            height: 36,
-            borderRadius: 18,
-            backgroundColor: theme.dark ? theme.colors.secondary[700] : theme.colors.secondary[300],
-        },
-        skeletonContent: {
-            flex: 1,
-            gap: theme.spacing.xs,
-        },
-        skeletonName: {
-            width: 100,
-            height: 12,
-            borderRadius: theme.borderRadius.sm,
-            backgroundColor: theme.dark ? theme.colors.secondary[700] : theme.colors.secondary[300],
-            marginLeft: theme.spacing.xs,
-        },
-        skeletonMessage: {
-            width: '100%',
-            minWidth: 200,
-            backgroundColor: theme.dark ? theme.colors.secondary[700] : theme.colors.secondary[300],
-            borderRadius: theme.borderRadius.md,
-            padding: theme.spacing.md,
-            gap: theme.spacing.xs,
-        },
-        skeletonLine: {
-            height: 16,
-            borderRadius: theme.borderRadius.sm,
-            backgroundColor: theme.dark ? theme.colors.secondary[600] : theme.colors.secondary[200],
-        },
-        skeletonTimestamp: {
-            width: 60,
-            height: 10,
-            borderRadius: theme.borderRadius.sm,
-            backgroundColor: theme.dark ? theme.colors.secondary[700] : theme.colors.secondary[300],
-            marginLeft: isSent ? 0 : theme.spacing.xs,
-            marginRight: isSent ? theme.spacing.xs : 0,
-        },
-    });
     // Skeleton loading component
     if (loading) {
-        return (_jsxs(View, { style: [styles.skeletonContainer, style], children: [showAvatar && !isSent && _jsx(View, { style: styles.skeletonAvatar }), _jsxs(View, { style: styles.skeletonContent, children: [senderName && !isSent && _jsx(View, { style: styles.skeletonName }), _jsxs(View, { style: styles.skeletonMessage, children: [_jsx(View, { style: [styles.skeletonLine, { width: '100%' }] }), _jsx(View, { style: [styles.skeletonLine, { width: '85%' }] }), _jsx(View, { style: [styles.skeletonLine, { width: '70%' }] })] }), showTimestamp && _jsx(View, { style: styles.skeletonTimestamp })] }), showAvatar && isSent && _jsx(View, { style: styles.skeletonAvatar })] }));
+        return (_jsxs(View, { style: [
+                {
+                    flexDirection: isSent ? 'row-reverse' : 'row',
+                    alignItems: 'flex-start',
+                    gap: theme.spacing.sm,
+                    marginBottom: theme.spacing.sm,
+                    maxWidth: `${maxWidth}%`,
+                    alignSelf: isSent ? 'flex-end' : 'flex-start',
+                },
+                style,
+            ], children: [showAvatar && !isSent && _jsx(SSkeleton, { variant: "circular", width: 36, height: 36 }), _jsxs(View, { style: {
+                        flex: 1,
+                        gap: theme.spacing.xs,
+                    }, children: [senderName && !isSent && (_jsx(SSkeleton, { variant: "text", width: 100, height: 12, style: { marginLeft: theme.spacing.xs } })), _jsxs(View, { style: {
+                                width: 250,
+                                maxWidth: '100%',
+                                marginLeft: isSent ? 0 : theme.spacing.xs,
+                                marginRight: isSent ? theme.spacing.xs : 0,
+                                gap: theme.spacing.xs,
+                            }, children: [_jsx(SSkeleton, { variant: "text", width: "100%", height: 16 }), _jsx(SSkeleton, { variant: "text", width: "85%", height: 16 }), _jsx(SSkeleton, { variant: "text", width: "70%", height: 16 })] }), showTimestamp && (_jsx(SSkeleton, { variant: "text", width: 60, height: 10, style: {
+                                marginLeft: isSent ? 0 : theme.spacing.xs,
+                                marginRight: isSent ? theme.spacing.xs : 0,
+                            } }))] }), showAvatar && isSent && _jsx(SSkeleton, { variant: "circular", width: 36, height: 36 })] }));
     }
-    return (_jsxs(View, { style: [styles.container, style], children: [showAvatar && !isSent && _jsx(SAvatar, { avatar: avatar, name: senderName, size: 36 }), _jsxs(View, { style: styles.contentColumn, children: [senderName && !isSent && _jsx(Text, { style: styles.senderName, children: senderName }), _jsxs(View, { style: [styles.messageBubble, messageBubbleStyle], children: [imageAttachments.length > 0 && (_jsx(View, { style: styles.imagesGrid, children: imageAttachments.map((attachment) => (_jsx(Pressable, { style: styles.imageContainer, onPress: () => handleImageClick(attachment), children: _jsx(SLazyImage, { src: attachment.thumbnailUrl || attachment.url, width: "100%", height: "100%", variant: "rounded", containerStyle: { width: '100%', height: '100%' } }) }, attachment.id))) })), fileAttachments.length > 0 && (_jsx(View, { style: styles.fileAttachmentsContainer, children: fileAttachments.map((attachment, index) => (_jsxs(Pressable, { style: [styles.fileAttachment, index > 0 && { marginTop: theme.spacing.sm }], onPress: () => handleFileClick(attachment), children: [_jsx(View, { style: styles.fileIcon, children: _jsx(Text, { style: styles.fileIconText, children: attachment.mimeType?.split('/')[1]?.slice(0, 3).toUpperCase() || 'FILE' }) }), _jsxs(View, { style: styles.fileInfo, children: [_jsx(Text, { style: styles.fileName, numberOfLines: 1, ellipsizeMode: "middle", children: attachment.name || 'Unnamed File' }), attachment.size && _jsx(Text, { style: styles.fileSize, children: formatFileSize(attachment.size) })] }), onDownload && (_jsx(IconButton, { icon: "download", size: 20, onPress: () => {
+    return (_jsxs(View, { style: [
+            {
+                flexDirection: isSent ? 'row-reverse' : 'row',
+                alignItems: 'flex-start',
+                gap: theme.spacing.sm,
+                marginBottom: theme.spacing.sm,
+                maxWidth: `${maxWidth}%`,
+                alignSelf: isSent ? 'flex-end' : 'flex-start',
+            },
+            style,
+        ], children: [showAvatar && !isSent && _jsx(SAvatar, { avatar: avatar, name: senderName, size: 36 }), _jsxs(View, { style: {
+                    flexDirection: 'column',
+                    alignItems: isSent ? 'flex-end' : 'flex-start',
+                    gap: theme.spacing.xs,
+                    minWidth: 0,
+                    flex: 1,
+                }, children: [senderName && !isSent && _jsx(SText, { children: senderName }), _jsxs(View, { style: [
+                            {
+                                borderRadius: theme.borderRadius.md,
+                                maxWidth: '100%',
+                                borderWidth: 1,
+                                borderColor: hasError ? theme.colors.error[500] : theme.colors.divider,
+                                overflow: 'hidden',
+                                opacity: hasError ? 0.7 : 1,
+                            },
+                            messageBubbleStyle,
+                        ], children: [imageAttachments.length > 0 && (_jsx(View, { style: {
+                                    flexDirection: 'row',
+                                    flexWrap: 'wrap',
+                                    gap: theme.spacing.xs,
+                                    padding: theme.spacing.xs,
+                                    minWidth: 200,
+                                }, children: imageAttachments.map((attachment) => (_jsx(Pressable, { style: {
+                                        borderRadius: theme.borderRadius.sm,
+                                        overflow: 'hidden',
+                                        width: imageAttachments.length === 1 ? '100%' : '48%',
+                                        aspectRatio: imageAttachments.length === 1 ? 1.5 : 1,
+                                    }, onPress: () => handleImageClick(attachment), children: _jsx(SLazyImage, { src: attachment.thumbnailUrl || attachment.url, width: "100%", height: "100%", variant: "rounded", containerStyle: { width: '100%', height: '100%' } }) }, attachment.id))) })), fileAttachments.length > 0 && (_jsx(View, { style: { padding: theme.spacing.md }, children: fileAttachments.map((attachment, index) => (_jsxs(Pressable, { style: [
+                                        {
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            gap: theme.spacing.md,
+                                            padding: theme.spacing.sm,
+                                            borderWidth: 1,
+                                            borderColor: theme.colors.divider,
+                                            borderRadius: theme.borderRadius.md,
+                                        },
+                                        index > 0 && { marginTop: theme.spacing.sm },
+                                    ], onPress: () => handleFileClick(attachment), children: [_jsx(View, { style: {
+                                                width: 32,
+                                                height: 32,
+                                                backgroundColor: theme.colors.secondary[700],
+                                                borderRadius: theme.borderRadius.md,
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                            }, children: _jsx(SText, { variant: "caption", children: attachment.mimeType?.split('/')[1]?.slice(0, 3).toUpperCase() || 'FILE' }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(SText, { numberOfLines: 1, ellipsizeMode: "middle", children: attachment.name || 'Unnamed File' }), attachment.size && _jsx(SText, { variant: "caption", children: formatFileSize(attachment.size) })] }), onDownload && (_jsx(SIconButton, { icon: "download", onPress: () => {
                                                 onDownload(attachment);
-                                            } }))] }, attachment.id))) })), message && (_jsx(View, { style: styles.messageContent, children: _jsx(Text, { style: [styles.messageText, messageTextStyle], children: message }) }))] }), showTimestamp && timestamp && _jsx(Text, { style: styles.timestampText, children: formatTimestamp(timestamp) }), hasError && (_jsxs(View, { style: styles.errorContainer, children: [_jsx(Text, { style: styles.errorText, children: errorMessage }), onRetry && _jsx(IconButton, { icon: "refresh", size: 16, iconColor: theme.colors.error.main, onPress: onRetry })] }))] }), showAvatar && isSent && _jsx(SAvatar, { avatar: avatar, name: senderName, size: 36 })] }));
+                                            } }))] }, attachment.id))) })), message && (_jsx(View, { style: {
+                                    paddingHorizontal: theme.spacing.md,
+                                    paddingVertical: theme.spacing.md,
+                                    paddingTop: attachments.length > 0 ? 0 : theme.spacing.md,
+                                }, children: _jsx(SText, { style: [
+                                        {
+                                            color: hasError ? theme.colors.error[500] : theme.colors.text.primary,
+                                        },
+                                        messageTextStyle,
+                                    ], children: message }) }))] }), showTimestamp && timestamp && _jsx(SText, { variant: "caption", children: formatTimestamp(timestamp) }), hasError && (_jsxs(View, { style: {
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: theme.spacing.xs,
+                        }, children: [_jsx(SText, { style: {
+                                    color: theme.colors.error[500],
+                                }, variant: "caption", children: errorMessage }), onRetry && (_jsx(SIconButton, { icon: "refresh", size: "medium", iconColor: theme.colors.error[500], onPress: onRetry }))] }))] }), showAvatar && isSent && _jsx(SAvatar, { avatar: avatar, name: senderName, size: 36 })] }));
 };
 SChatMessage.displayName = 'SChatMessage';
 export default SChatMessage;

package/dist/s-checkbox/s-checkbox.d.ts

@@ -3,7 +3,6 @@ import { type StyleProp, type ViewStyle } from 'react-native';
 import { type CheckboxProps } from 'react-native-paper';
 /**
  * Props interface for SCheckbox component
- * Synced with web SCheckbox from @solostylist/ui-kit
  */
 export interface SCheckboxProps extends Omit<CheckboxProps, 'theme' | 'status'> {
     /** Content displayed as a clickable label next to the checkbox */
@@ -24,7 +23,6 @@ export interface SCheckboxProps extends Omit<CheckboxProps, 'theme' | 'status'>
 /**
  * A checkbox component with integrated label support and proper accessibility.
  * Built on React Native Paper Checkbox with consistent theming.
- * Synced with web SCheckbox from @solostylist/ui-kit.
  */
 export declare const SCheckbox: {
     ({ content, checked, indeterminate, disabled, onPress, style, labelStyle, ...props }: SCheckboxProps): React.JSX.Element;

package/dist/s-checkbox/s-checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-checkbox.d.ts","sourceRoot":"","sources":["../../src/s-checkbox/s-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIlE;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7E,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS;0FASnB,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAiFpC,CAAC;AAIF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"s-checkbox.d.ts","sourceRoot":"","sources":["../../src/s-checkbox/s-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIlE;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7E,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS;0FASnB,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAoEpC,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/dist/s-checkbox/s-checkbox.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native';
+import { Pressable } from 'react-native';
 import { Checkbox } from 'react-native-paper';
 import { SText } from '../s-text';
 import { useSTheme } from '../theme';
 /**
  * A checkbox component with integrated label support and proper accessibility.
  * Built on React Native Paper Checkbox with consistent theming.
- * Synced with web SCheckbox from @solostylist/ui-kit.
  */
 export const SCheckbox = ({ content, checked = false, indeterminate = false, disabled = false, onPress, style, labelStyle, ...props }) => {
     const { theme } = useSTheme();
@@ -31,21 +30,6 @@ export const SCheckbox = ({ content, checked = false, indeterminate = false, dis
             labelColor,
         };
     }, [theme.dark, theme.colors, checked, indeterminate, disabled]);
-    const styles = useMemo(() => StyleSheet.create({
-        container: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'flex-start',
-        },
-        checkbox: {
-            marginRight: content ? -8 : 0, // Adjust spacing when there's a label
-        },
-        label: {
-            flex: 1,
-            marginLeft: theme.spacing.xs,
-            opacity: disabled ? 0.6 : 1,
-        },
-    }), [theme.spacing.xs, content, disabled]);
     const handlePress = () => {
         if (!disabled && onPress) {
             onPress();
@@ -53,7 +37,16 @@ export const SCheckbox = ({ content, checked = false, indeterminate = false, dis
     };
     // Determine checkbox status
     const status = indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked';
-    return (_jsxs(SText, { variant: "body2", style: [styles.container, style], onPress: handlePress, suppressHighlighting: true, disabled: disabled, children: [_jsx(Checkbox.Android, { status: status, disabled: disabled, onPress: handlePress, color: colors.checkboxColor, uncheckedColor: colors.checkboxColor, style: styles.checkbox, ...props }), content && (_jsx(SText, { variant: "body2", style: [styles.label, { color: colors.labelColor }, labelStyle], children: content }))] }));
+    return (_jsxs(Pressable, { style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+            },
+            style,
+        ], onPress: handlePress, disabled: disabled, children: [_jsx(Checkbox.Android, { status: status, disabled: disabled, onPress: handlePress, color: colors.checkboxColor, uncheckedColor: colors.checkboxColor, style: {
+                    marginRight: content ? -8 : 0, // Adjust spacing when there's a label
+                }, ...props }), content && (_jsx(SText, { variant: "body2", style: [{ color: colors.labelColor }, labelStyle], children: content }))] }));
 };
 SCheckbox.displayName = 'SCheckbox';
 export default SCheckbox;

package/dist/s-chip/s-chip.d.ts

@@ -15,7 +15,6 @@ export type SChipVariant = 'filled' | 'outlined';
 export type SChipSize = 'small' | 'medium';
 /**
  * Props interface for SChip component
- * Synced with web SChip from @solostylist/ui-kit
  */
 export interface SChipProps extends Omit<ChipProps, 'theme' | 'mode' | 'children' | 'icon' | 'avatar'> {
     /** Label text to display in the chip */
@@ -44,7 +43,6 @@ export interface SChipProps extends Omit<ChipProps, 'theme' | 'mode' | 'children
 /**
  * A versatile chip component for displaying compact elements like tags, filters, or selections.
  * Built on React Native Paper Chip with consistent theming.
- * Synced with web SChip from @solostylist/ui-kit.
  */
 export declare const SChip: {
     ({ label, variant, color, size, disabled, icon, avatar, selected, onPress, onClose, style, textStyle, ...props }: SChipProps): React.JSX.Element;

package/dist/s-chip/s-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-chip.d.ts","sourceRoot":"","sources":["../../src/s-chip/s-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAoB1D;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExG;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3C;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpG,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,yDAAyD;IACzD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAsDD;;;;GAIG;AACH,eAAO,MAAM,KAAK;sHAcf,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAwIhC,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"s-chip.d.ts","sourceRoot":"","sources":["../../src/s-chip/s-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAoBhE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExG;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpG,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,yDAAyD;IACzD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAsDD;;;GAGG;AACH,eAAO,MAAM,KAAK;sHAcf,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAmHhC,CAAC;AAIF,eAAe,KAAK,CAAC"}