@umituz/react-native-design-system 1.5.17 → 1.5.18

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.5.17",
+  "version": "1.5.18",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "require": "./src/index.ts"
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.js"
     }
   },
   "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit",
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
     "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
     "version:major": "npm version major -m 'chore: release v%s'"
@@ -78,6 +78,7 @@
     "access": "public"
   },
   "files": [
+    "lib",
     "src",
     "README.md",
     "LICENSE"

package/src/index.js

@@ -0,0 +1,100 @@
+/**
+ * @umituz/react-native-design-system - Public API
+ *
+ * Universal UI component library for React Native apps
+ * Domain-Driven Design (DDD) Architecture
+ *
+ * This is the SINGLE SOURCE OF TRUTH for all UI components.
+ * ALL imports from the design system MUST go through this file.
+ *
+ * Architecture:
+ * - presentation/atoms: Primitive UI components (AtomicButton, AtomicText, etc.)
+ * - presentation/molecules: Composite components (SearchBar, ListItem, etc.)
+ * - presentation/organisms: Complex patterns (ScreenLayout, AppHeader, FormContainer)
+ * - presentation/tokens: Design tokens (colors, typography, spacing, etc.)
+ * - presentation/utils: Utility functions and helpers
+ *
+ * Usage:
+ *   import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar, STATIC_TOKENS } from '@umituz/react-native-design-system';
+ */
+// =============================================================================
+// ATOMS - Primitive UI Components
+// =============================================================================
+export { AtomicButton, } from './presentation/atoms/AtomicButton';
+export { AtomicText, } from './presentation/atoms/AtomicText';
+export { AtomicCard, } from './presentation/atoms/AtomicCard';
+export { AtomicInput, } from './presentation/atoms/AtomicInput';
+export { AtomicNumberInput, } from './presentation/atoms/AtomicNumberInput';
+export { AtomicSwitch, } from './presentation/atoms/AtomicSwitch';
+export { AtomicIcon, } from './presentation/atoms/AtomicIcon';
+export { AtomicFormError, } from './presentation/atoms/AtomicFormError';
+export { AtomicDatePicker, } from './presentation/atoms/AtomicDatePicker';
+export { AtomicPicker, } from './presentation/atoms/AtomicPicker';
+export { AtomicTextArea, } from './presentation/atoms/AtomicTextArea';
+export { AtomicBadge, } from './presentation/atoms/AtomicBadge';
+export { AtomicProgress, } from './presentation/atoms/AtomicProgress';
+export { AtomicDivider, } from './presentation/atoms/AtomicDivider';
+export { AtomicFab, getFabVariants, } from './presentation/atoms/AtomicFab';
+export { AtomicFilter, getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, } from './presentation/atoms/AtomicFilter';
+export { AtomicTouchable, TouchablePresets, getOpacityValue, normalizeHitSlop, } from './presentation/atoms/AtomicTouchable';
+export { AtomicSearchBar, } from './presentation/atoms/AtomicSearchBar';
+export { AtomicSort, } from './presentation/atoms/AtomicSort';
+// =============================================================================
+// MOLECULES - Composite Components
+// =============================================================================
+export { FormField, } from './presentation/molecules/FormField';
+export { ListItem, } from './presentation/molecules/ListItem';
+export { SearchBar, } from './presentation/molecules/SearchBar';
+// SettingItem moved to @domains/settings/presentation/components/SettingItem
+// LanguageSwitcher moved to @umituz/react-native-localization
+// Import directly: import { SettingItem } from '@domains/settings/presentation/components/SettingItem';
+export { SectionCard, } from './presentation/molecules/SectionCard';
+export { IconContainer, } from './presentation/molecules/IconContainer';
+export { SectionHeader, } from './presentation/molecules/SectionHeader';
+export { EmptyState, } from './presentation/molecules/EmptyState';
+export { GridContainer, } from './presentation/molecules/GridContainer';
+export { SectionContainer, } from './presentation/molecules/SectionContainer';
+export { ScreenHeader, } from './presentation/molecules/ScreenHeader';
+export { AtomicConfirmationModal, useConfirmationModal, } from './presentation/molecules/AtomicConfirmationModal';
+// =============================================================================
+// ORGANISMS - Complex Patterns
+// =============================================================================
+export { ScreenLayout, } from './presentation/organisms/ScreenLayout';
+export { AppHeader, } from './presentation/organisms/AppHeader';
+export { FormContainer, } from './presentation/organisms/FormContainer';
+// Note: FeedbackModal moved to @domains/feedback
+// Import from feedback domain: import { FeedbackModal } from '@domains/feedback';
+// =============================================================================
+// THEME-RELATED EXPORTS - Re-exported from @umituz/react-native-theme
+// =============================================================================
+// All tokens, colors, and theme utilities come from @umituz/react-native-theme
+// Design system does NOT define any tokens - it only uses them from theme package
+export { 
+// Token factory
+createDesignTokens, STATIC_DESIGN_TOKENS, BASE_TOKENS, STATIC_TOKENS, 
+// Color utilities
+withAlpha, lightColors, darkColors, getColorPalette, } from '@umituz/react-native-theme';
+// Hook for dynamic theme-aware tokens (re-exported from theme package)
+export { useAppDesignTokens } from '@umituz/react-native-theme';
+export { useCommonStyles, } from './presentation/tokens/commonStyles';
+// =============================================================================
+// UTILITIES - Helper Functions
+// =============================================================================
+export { IOS_HIG, ANDROID_MATERIAL, PLATFORM_CONSTANTS, isValidTouchTarget, getMinTouchTarget, } from './presentation/utils/platformConstants';
+// =============================================================================
+// RESPONSIVE UTILITIES - Centralized Responsive Management
+// =============================================================================
+export { useResponsive, useResponsiveSizes, useDeviceType, } from './presentation/hooks/useResponsive';
+export { getScreenDimensions, isSmallPhone, isTablet, getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveMaxWidth, getResponsiveFontSize, isLandscape, getKeyboardBehavior, getDeviceType, getMinTouchTargetSize, getSpacingMultiplier, getOnboardingIconMarginTop, getOnboardingIconMarginBottom, getOnboardingTitleMarginBottom, getOnboardingTextPadding, getOnboardingDescriptionMarginTop, DeviceType, } from './presentation/utils/responsive';
+// =============================================================================
+// THEME MANAGEMENT - Global Theme Store
+// =============================================================================
+// Theme management moved to @umituz/react-native-theme
+export { useDesignSystemTheme, } from '@umituz/react-native-theme';
+// =============================================================================
+// ICONS DOMAIN - Universal Icon System
+// =============================================================================
+// Icon components have been moved to @umituz/react-native-icon package.
+// Import directly: import { Icon, IconName, IconSize, IconColor } from '@umituz/react-native-icon';
+// Re-export for backward compatibility (deprecated - use @umituz/react-native-icon directly)
+export { Icon, } from '@umituz/react-native-icon';

package/src/presentation/atoms/AtomicAvatar.js

@@ -0,0 +1,84 @@
+/**
+ * AtomicAvatar - Universal Avatar Component
+ *
+ * Displays user profile images with fallback to initials
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: User profile image display
+ *
+ * Usage:
+ * - User profile pictures
+ * - Contact avatars
+ * - Group member avatars
+ * - Default user placeholders
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicImage } from './AtomicImage';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AtomicAvatar = ({ source, name, size = 'md', customSize, backgroundColor, textColor, borderRadius, borderWidth = 0, borderColor, style, imageStyle, testID, }) => {
+    const tokens = useAppDesignTokens();
+    const avatarSize = customSize || tokens.avatarSizes[size];
+    const avatarRadius = borderRadius ?? avatarSize / 2;
+    // Generate initials from name
+    const getInitials = (name) => {
+        return name
+            .split(' ')
+            .map(word => word.charAt(0))
+            .join('')
+            .toUpperCase()
+            .slice(0, 2);
+    };
+    // Default colors
+    const defaultBackgroundColor = backgroundColor || tokens.colors.primary;
+    const defaultTextColor = textColor || tokens.colors.onPrimary;
+    const defaultBorderColor = borderColor || tokens.colors.border;
+    const avatarStyle = {
+        width: avatarSize,
+        height: avatarSize,
+        borderRadius: avatarRadius,
+        backgroundColor: defaultBackgroundColor,
+        borderWidth,
+        borderColor: defaultBorderColor,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    };
+    const imageStyleFinal = {
+        width: avatarSize,
+        height: avatarSize,
+        borderRadius: avatarRadius,
+    };
+    // Font size based on avatar size
+    const getFontSize = (size) => {
+        if (size <= 32)
+            return 12;
+        if (size <= 48)
+            return 16;
+        if (size <= 64)
+            return 20;
+        return 24;
+    };
+    return (<View style={[avatarStyle, style]} testID={testID}>
+      {source ? (<AtomicImage source={source} style={StyleSheet.flatten([imageStyleFinal, imageStyle])} resizeMode="cover"/>) : name ? (<AtomicText type="labelLarge" color={defaultTextColor} style={{
+                fontSize: getFontSize(avatarSize),
+                fontWeight: tokens.typography.semibold,
+            }}>
+          {getInitials(name)}
+        </AtomicText>) : (<AtomicText type="labelLarge" color={defaultTextColor} style={{
+                fontSize: getFontSize(avatarSize),
+                fontWeight: tokens.typography.semibold,
+            }}>
+          ?
+        </AtomicText>)}
+    </View>);
+};
+// =============================================================================
+// EXPORTS
+// =============================================================================
+export default AtomicAvatar;

package/src/presentation/atoms/AtomicAvatarGroup.js

@@ -0,0 +1,82 @@
+/**
+ * AtomicAvatarGroup - Universal Avatar Group Component
+ *
+ * Displays multiple avatars in a group with overlap and overflow handling
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Multiple avatar display with group behavior
+ *
+ * Usage:
+ * - Team member avatars
+ * - Group chat participants
+ * - Project collaborators
+ * - Event attendees
+ * - Social connections
+ */
+import React from 'react';
+import { View } from 'react-native';
+import { AtomicAvatar } from './AtomicAvatar';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AtomicAvatarGroup = ({ avatars, maxVisible = 3, size = 'md', customSize, spacing = -8, showOverflow = true, overflowBackgroundColor, overflowTextColor, borderWidth = 2, borderColor, style, testID, }) => {
+    const tokens = useAppDesignTokens();
+    // Calculate visible avatars and overflow count
+    const visibleAvatars = avatars.slice(0, maxVisible);
+    const overflowCount = avatars.length - maxVisible;
+    // Size mapping for overflow text
+    const sizeMap = {
+        xs: 10,
+        sm: 12,
+        md: 14,
+        lg: 16,
+        xl: 18,
+        xxl: 20,
+    };
+    const textSize = sizeMap[size];
+    // Default colors for overflow
+    const defaultOverflowBackground = overflowBackgroundColor || tokens.colors.surfaceVariant;
+    const defaultOverflowText = overflowTextColor || tokens.colors.textPrimary;
+    const containerStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+    };
+    const avatarStyle = {
+        marginLeft: spacing,
+        borderWidth,
+        borderColor: borderColor || tokens.colors.surface,
+    };
+    return (<View style={[containerStyle, style]} testID={testID}>
+      {visibleAvatars.map((avatar, index) => (<AtomicAvatar key={avatar.id} source={avatar.source} name={avatar.name} size={size} customSize={customSize} backgroundColor={avatar.backgroundColor} textColor={avatar.textColor} borderWidth={borderWidth} borderColor={borderColor} style={[
+                avatarStyle,
+                ...(index === 0 ? [{ marginLeft: 0 }] : []), // First avatar has no left margin
+            ]}/>))}
+      {showOverflow && overflowCount > 0 && (<View style={[
+                {
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: customSize || 40,
+                    height: customSize || 40,
+                    borderRadius: (customSize || 40) / 2,
+                    backgroundColor: defaultOverflowBackground,
+                    borderWidth,
+                    borderColor: borderColor || tokens.colors.surface,
+                    marginLeft: spacing,
+                },
+            ]}>
+          <AtomicText type="labelMedium" color={defaultOverflowText} style={{
+                fontWeight: tokens.typography.semibold,
+                fontSize: textSize,
+            }}>
+            +{overflowCount}
+          </AtomicText>
+        </View>)}
+    </View>);
+};
+// =============================================================================
+// EXPORTS
+// =============================================================================
+export default AtomicAvatarGroup;

package/src/presentation/atoms/AtomicBadge.js

@@ -0,0 +1,167 @@
+/**
+ * AtomicBadge - Universal Badge Component
+ *
+ * Provides consistent badge/notification count display
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Display counts, notifications, status indicators
+ *
+ * Usage:
+ * - Notification counts
+ * - Cart item counts
+ * - Status indicators
+ * - Achievement badges
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+// =============================================================================
+// SIZE CONFIGURATION
+// =============================================================================
+const getSizeConfig = (tokens) => ({
+    xs: {
+        minHeight: tokens.spacing.sm,
+        paddingHorizontal: tokens.spacing.xs,
+        fontSize: tokens.typography.labelSmall.fontSize,
+        borderRadius: tokens.borders.radius.sm,
+    },
+    sm: {
+        minHeight: tokens.spacing.md,
+        paddingHorizontal: tokens.spacing.sm,
+        fontSize: tokens.typography.bodySmall.fontSize,
+        borderRadius: tokens.borders.radius.md,
+    },
+    md: {
+        minHeight: tokens.spacing.lg,
+        paddingHorizontal: tokens.spacing.sm,
+        fontSize: tokens.typography.bodyMedium.fontSize,
+        borderRadius: tokens.borders.radius.md,
+    },
+    lg: {
+        minHeight: tokens.spacing.xl,
+        paddingHorizontal: tokens.spacing.md,
+        fontSize: tokens.typography.bodyLarge.fontSize,
+        borderRadius: tokens.borders.radius.lg,
+    },
+});
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AtomicBadge = ({ children, size = 'md', variant = 'primary', shape = 'circle', max, showZero = false, style, textStyle, minWidth, maxWidth, }) => {
+    const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
+    const sizeConfig = getSizeConfig(tokens)[size];
+    const colors = getVariantColors(tokens, variant);
+    const borderRadius = getBorderRadius(shape, sizeConfig.borderRadius, tokens);
+    // Handle max value display
+    const displayValue = React.useMemo(() => {
+        if (typeof children === 'number') {
+            if (max && children > max) {
+                return `${max}+`;
+            }
+            return children.toString();
+        }
+        return children;
+    }, [children, max]);
+    // Don't render if count is 0 and showZero is false
+    if (typeof children === 'number' && children === 0 && !showZero) {
+        return null;
+    }
+    const containerStyle = [
+        styles.container,
+        {
+            minHeight: sizeConfig.minHeight,
+            paddingHorizontal: sizeConfig.paddingHorizontal,
+            borderRadius,
+            backgroundColor: colors.background,
+            minWidth: minWidth || sizeConfig.minHeight,
+            maxWidth,
+        },
+        style,
+    ];
+    const textStyleFinal = StyleSheet.flatten([
+        styles.text,
+        {
+            fontSize: sizeConfig.fontSize,
+        },
+        textStyle,
+    ]);
+    return (<View style={containerStyle}>
+      <AtomicText type="bodySmall" color={colors.text} style={textStyleFinal} numberOfLines={1}>
+        {displayValue}
+      </AtomicText>
+    </View>);
+};
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+const getVariantColors = (tokens, variant) => {
+    switch (variant) {
+        case 'primary':
+            return {
+                background: tokens.colors.primary,
+                text: tokens.colors.textInverse,
+            };
+        case 'secondary':
+            return {
+                background: tokens.colors.secondary,
+                text: tokens.colors.textInverse,
+            };
+        case 'success':
+            return {
+                background: tokens.colors.success,
+                text: tokens.colors.textInverse,
+            };
+        case 'warning':
+            return {
+                background: tokens.colors.warning,
+                text: tokens.colors.textInverse,
+            };
+        case 'error':
+            return {
+                background: tokens.colors.error,
+                text: tokens.colors.textInverse,
+            };
+        case 'info':
+            return {
+                background: tokens.colors.info,
+                text: tokens.colors.textInverse,
+            };
+        default:
+            return {
+                background: tokens.colors.primary,
+                text: tokens.colors.textInverse,
+            };
+    }
+};
+const getBorderRadius = (shape, defaultRadius, tokens) => {
+    switch (shape) {
+        case 'circle':
+            return tokens.borders.radius.full; // Very large radius for circle
+        case 'square':
+            return tokens.borders.radius.sm;
+        case 'rounded':
+        default:
+            return defaultRadius;
+    }
+};
+// =============================================================================
+// STYLES
+// =============================================================================
+const getStyles = (tokens) => StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+    },
+    text: {
+        fontWeight: tokens.typography.semibold,
+        textAlign: 'center',
+    },
+});
+// =============================================================================
+// EXPORTS
+// =============================================================================
+export default AtomicBadge;

package/src/presentation/atoms/AtomicButton.js

@@ -0,0 +1,171 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { Icon } from '@umituz/react-native-icon';
+import { useAppDesignTokens } from '@umituz/react-native-theme';
+export const AtomicButton = ({ title, children, onPress, variant = 'primary', size = 'md', disabled = false, icon, fullWidth = false, style, textStyle, testID, }) => {
+    const tokens = useAppDesignTokens();
+    const handlePress = () => {
+        if (!disabled) {
+            onPress();
+        }
+    };
+    // Size configurations
+    const sizeConfig = {
+        sm: {
+            paddingVertical: tokens.spacing.xs,
+            paddingHorizontal: tokens.spacing.sm,
+            fontSize: tokens.typography.bodySmall.fontSize,
+            iconSize: 16,
+            minHeight: 32,
+        },
+        md: {
+            paddingVertical: tokens.spacing.sm,
+            paddingHorizontal: tokens.spacing.md,
+            fontSize: tokens.typography.bodyMedium.fontSize,
+            iconSize: 20,
+            minHeight: 44,
+        },
+        lg: {
+            paddingVertical: tokens.spacing.md,
+            paddingHorizontal: tokens.spacing.lg,
+            fontSize: tokens.typography.bodyLarge.fontSize,
+            iconSize: 24,
+            minHeight: 52,
+        },
+    };
+    const config = sizeConfig[size];
+    // Variant styles
+    const getVariantStyles = () => {
+        const baseStyle = {
+            backgroundColor: tokens.colors.primary,
+            borderWidth: 0,
+        };
+        const baseTextStyle = {
+            color: tokens.colors.textInverse,
+        };
+        switch (variant) {
+            case 'primary':
+                return {
+                    container: {
+                        ...baseStyle,
+                        backgroundColor: tokens.colors.primary,
+                    },
+                    text: {
+                        ...baseTextStyle,
+                        color: tokens.colors.textInverse,
+                    },
+                };
+            case 'secondary':
+                return {
+                    container: {
+                        ...baseStyle,
+                        backgroundColor: tokens.colors.surfaceSecondary,
+                    },
+                    text: {
+                        ...baseTextStyle,
+                        color: tokens.colors.textPrimary,
+                    },
+                };
+            case 'outline':
+                return {
+                    container: {
+                        ...baseStyle,
+                        backgroundColor: 'transparent',
+                        borderWidth: 1,
+                        borderColor: tokens.colors.border,
+                    },
+                    text: {
+                        ...baseTextStyle,
+                        color: tokens.colors.textPrimary,
+                    },
+                };
+            case 'text':
+                return {
+                    container: {
+                        ...baseStyle,
+                        backgroundColor: 'transparent',
+                    },
+                    text: {
+                        ...baseTextStyle,
+                        color: tokens.colors.primary,
+                    },
+                };
+            case 'danger':
+                return {
+                    container: {
+                        ...baseStyle,
+                        backgroundColor: tokens.colors.error,
+                    },
+                    text: {
+                        ...baseTextStyle,
+                        color: tokens.colors.textInverse,
+                    },
+                };
+            default:
+                return {
+                    container: baseStyle,
+                    text: baseTextStyle,
+                };
+        }
+    };
+    const variantStyles = getVariantStyles();
+    const containerStyle = [
+        styles.button,
+        {
+            paddingVertical: config.paddingVertical,
+            paddingHorizontal: config.paddingHorizontal,
+            minHeight: config.minHeight,
+            borderRadius: tokens.borders.radius.md,
+        },
+        variantStyles.container,
+        fullWidth ? styles.fullWidth : undefined,
+        disabled ? styles.disabled : undefined,
+        style,
+    ];
+    const buttonTextStyle = [
+        {
+            fontSize: config.fontSize,
+            fontWeight: '600',
+        },
+        variantStyles.text,
+        disabled ? styles.disabledText : undefined,
+        textStyle,
+    ];
+    const buttonText = title || children;
+    const showIcon = icon;
+    const iconColor = variantStyles.text.color;
+    return (<TouchableOpacity style={containerStyle} onPress={handlePress} activeOpacity={0.8} disabled={disabled} testID={testID}>
+      <View style={styles.content}>
+        {showIcon ? (<Icon name={icon} customSize={config.iconSize} customColor={typeof iconColor === 'string' ? iconColor : undefined} style={styles.icon}/>) : null}
+
+        <AtomicText style={buttonTextStyle}>
+          {buttonText}
+        </AtomicText>
+      </View>
+    </TouchableOpacity>);
+};
+const styles = StyleSheet.create({
+    button: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    fullWidth: {
+        width: '100%',
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    disabledText: {
+        opacity: 0.7,
+    },
+    icon: {
+        marginRight: 8,
+    },
+});