@umituz/react-native-design-system 1.3.1 → 1.3.2

package/lib/presentation/molecules/FormField.js

@@ -0,0 +1,76 @@
+/**
+ * FormField Molecule - Complete Form Input with Label and Error
+ *
+ * Combines AtomicText (label/error) + AtomicInput (field)
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: AtomicText + AtomicInput
+ */
+import React from 'react';
+import { View } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicText } from '../atoms/AtomicText';
+import { AtomicInput } from '../atoms/AtomicInput';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const FormField = ({ label, error, helperText, required = false, containerStyle, style, // Accept both style and containerStyle
+...inputProps }) => {
+    const tokens = useAppDesignTokens();
+    const inputState = error ? 'error' : 'default';
+    const styles = getStyles(tokens);
+    return (<View style={[styles.container, containerStyle || style]}>
+      {/* Label */}
+      {label && (<View style={styles.labelContainer}>
+          <AtomicText type="labelMedium" color="primary" style={styles.label}>
+            {label}
+          </AtomicText>
+          {required && (<AtomicText type="labelMedium" color="error">
+              {' *'}
+            </AtomicText>)}
+        </View>)}
+
+      {/* Input Field */}
+      <AtomicInput {...inputProps} label={label || ''} state={inputState}/>
+
+      {/* Error Message */}
+      {error && (<AtomicText type="bodySmall" color="error" style={styles.errorText}>
+          {error}
+        </AtomicText>)}
+
+      {/* Helper Text */}
+      {!error && helperText && (<AtomicText type="bodySmall" color="secondary" style={styles.helperText}>
+          {helperText}
+        </AtomicText>)}
+    </View>);
+};
+// =============================================================================
+// STYLES
+// =============================================================================
+const getStyles = (tokens) => ({
+    container: {
+        marginBottom: tokens.spacing.md,
+    },
+    labelContainer: {
+        flexDirection: 'row',
+        marginBottom: tokens.spacing.sm,
+    },
+    label: {
+        fontWeight: tokens.typography.labelMedium.fontWeight,
+        color: tokens.colors.textPrimary,
+    },
+    inputError: {
+        borderColor: tokens.colors.error,
+    },
+    errorText: {
+        marginTop: tokens.spacing.xs,
+    },
+    helperText: {
+        marginTop: tokens.spacing.xs,
+    },
+});
+// =============================================================================
+// EXPORTS
+// =============================================================================
+//# sourceMappingURL=FormField.js.map

package/lib/presentation/molecules/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/presentation/molecules/FormField.tsx"],"names":[],"mappings":"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"}

package/lib/presentation/molecules/GridContainer.d.ts

@@ -0,0 +1,40 @@
+/**
+ * GridContainer Molecule - Responsive Grid Layout
+ *
+ * Provides flexible grid layout with configurable columns and gap
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: View + Responsive Layout
+ *
+ * Usage:
+ * - Stats grids (2 columns)
+ * - Action grids (2 columns)
+ * - Product grids (2-3 columns)
+ * - Gallery grids (3-4 columns)
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface GridContainerProps {
+    /** Number of columns (default: 2) */
+    columns?: 2 | 3 | 4;
+    /** Gap between items in pixels (default: 8) */
+    gap?: number;
+    /** Container style override */
+    style?: ViewStyle;
+    /** Grid items to render */
+    children: React.ReactNode;
+}
+export interface GridItemProps {
+    /** Item content */
+    children: React.ReactNode;
+    /** Item style override */
+    style?: ViewStyle;
+}
+declare const GridContainerComponent: React.FC<GridContainerProps>;
+export declare const GridItem: React.FC<GridItemProps>;
+export declare const GridContainer: typeof GridContainerComponent & {
+    Item: typeof GridItem;
+};
+export {};
+//# sourceMappingURL=GridContainer.d.ts.map

package/lib/presentation/molecules/GridContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/GridContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAkB,MAAM,cAAc,CAAC;AAM3E,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2BAA2B;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAMD,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsBxD,CAAC;AAMF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAE5C,CAAC;AAGF,eAAO,MAAM,aAAa,EAA6B,OAAO,sBAAsB,GAAG;IACrF,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC"}

package/lib/presentation/molecules/GridContainer.js

@@ -0,0 +1,77 @@
+/**
+ * GridContainer Molecule - Responsive Grid Layout
+ *
+ * Provides flexible grid layout with configurable columns and gap
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: View + Responsive Layout
+ *
+ * Usage:
+ * - Stats grids (2 columns)
+ * - Action grids (2 columns)
+ * - Product grids (2-3 columns)
+ * - Gallery grids (3-4 columns)
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+const GridContainerComponent = ({ columns = 2, gap = 8, style, children, }) => {
+    const styles = getStyles(gap);
+    return (<View style={[styles.container, style]}>
+      {React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                const childStyle = child.props.style;
+                const itemStyle = getItemStyle(columns, gap);
+                return React.cloneElement(child, {
+                    style: StyleSheet.flatten([itemStyle, childStyle]),
+                });
+            }
+            return child;
+        })}
+    </View>);
+};
+// =============================================================================
+// GRID ITEM COMPONENT
+// =============================================================================
+export const GridItem = ({ children, style }) => {
+    return <View style={style}>{children}</View>;
+};
+// Export GridContainer with Item property
+export const GridContainer = GridContainerComponent;
+// Attach GridItem to GridContainer for convenient usage
+GridContainer.Item = GridItem;
+// =============================================================================
+// HELPERS
+// =============================================================================
+const getItemStyle = (columns, gap) => {
+    // Calculate width: (100% - total gap space) / columns
+    // For 2 columns with 8px gap: (100% - 8px) / 2 = ~48%
+    // For 3 columns with 8px gap: (100% - 16px) / 3 = ~31.33%
+    const widthMap = {
+        2: '48%',
+        3: '31.33%',
+        4: '23%',
+    };
+    return {
+        width: widthMap[columns] || '48%',
+        marginHorizontal: gap / 2,
+        marginBottom: gap * 1.5,
+    };
+};
+// =============================================================================
+// STYLES
+// =============================================================================
+const getStyles = (gap) => StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginHorizontal: -(gap / 2),
+    },
+});
+// =============================================================================
+// EXPORTS
+// =============================================================================
+//# sourceMappingURL=GridContainer.js.map

package/lib/presentation/molecules/GridContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.js","sourceRoot":"","sources":["../../../src/presentation/molecules/GridContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAA6B,MAAM,cAAc,CAAC;AAwB3E,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,sBAAsB,GAAiC,CAAC,EAC5D,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,CAAC,EACP,KAAK,EACL,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;IAE9B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACrC;MAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,IAAI,KAAK,CAAC,cAAc,CAAgB,KAAK,CAAC,EAAE,CAAC;gBAC/C,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;gBACrC,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;gBAC7C,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC/B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;iBACnD,CAAC,CAAC;YACL,CAAC;YACD,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,sBAAsB;AACtB,gFAAgF;AAEhF,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF,0CAA0C;AAC1C,MAAM,CAAC,MAAM,aAAa,GAAG,sBAE5B,CAAC;AAEF,wDAAwD;AACxD,aAAa,CAAC,IAAI,GAAG,QAAQ,CAAC;AAE9B,gFAAgF;AAChF,UAAU;AACV,gFAAgF;AAEhF,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,GAAW,EAAa,EAAE;IAC/D,sDAAsD;IACtD,sDAAsD;IACtD,0DAA0D;IAE1D,MAAM,QAAQ,GAAmC;QAC/C,CAAC,EAAE,KAAuB;QAC1B,CAAC,EAAE,QAA0B;QAC7B,CAAC,EAAE,KAAuB;KAC3B,CAAC;IAEF,OAAO;QACL,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAK,KAAwB;QACrD,gBAAgB,EAAE,GAAG,GAAG,CAAC;QACzB,YAAY,EAAE,GAAG,GAAG,GAAG;KACxB,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,SAAS;AACT,gFAAgF;AAEhF,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE,CAChC,UAAU,CAAC,MAAM,CAAC;IAChB,SAAS,EAAE;QACT,aAAa,EAAE,KAAc;QAC7B,QAAQ,EAAE,MAAe;QACzB,gBAAgB,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;KAC7B;CACF,CAAC,CAAC;AAEL,gFAAgF;AAChF,UAAU;AACV,gFAAgF"}

package/lib/presentation/molecules/IconContainer.d.ts

@@ -0,0 +1,29 @@
+/**
+ * IconContainer Molecule Component
+ *
+ * Standardized icon container with consistent sizing and styling.
+ * Used throughout app for icon displays in lists, cards, and settings.
+ *
+ * Features:
+ * - Consistent sizing system
+ * - Optional background circle
+ * - Optional gradient background
+ * - Theme-aware colors
+ * - Accessibility support
+ *
+ * Atomic Design: Molecule (View + Icon)
+ */
+import React from 'react';
+interface IconContainerProps {
+    icon: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    backgroundColor?: string;
+    gradient?: string[];
+    withBorder?: boolean;
+    borderColor?: string;
+    style?: object;
+    testID?: string;
+}
+export declare const IconContainer: React.FC<IconContainerProps>;
+export {};
+//# sourceMappingURL=IconContainer.d.ts.map

package/lib/presentation/molecules/IconContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconContainer.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/IconContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,kBAAkB;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AASD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+CtD,CAAC"}

package/lib/presentation/molecules/IconContainer.js

@@ -0,0 +1,60 @@
+/**
+ * IconContainer Molecule Component
+ *
+ * Standardized icon container with consistent sizing and styling.
+ * Used throughout app for icon displays in lists, cards, and settings.
+ *
+ * Features:
+ * - Consistent sizing system
+ * - Optional background circle
+ * - Optional gradient background
+ * - Theme-aware colors
+ * - Accessibility support
+ *
+ * Atomic Design: Molecule (View + Icon)
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { LinearGradient } from 'expo-linear-gradient';
+const getSizeMap = (tokens) => ({
+    sm: tokens.iconSizes.sm,
+    md: tokens.iconSizes.md,
+    lg: tokens.iconSizes.lg,
+    xl: tokens.iconSizes.xl,
+});
+export const IconContainer = ({ icon, size = 'md', backgroundColor, gradient, withBorder = false, borderColor, style, testID, }) => {
+    const tokens = useAppDesignTokens();
+    const sizeMap = getSizeMap(tokens);
+    const containerSize = sizeMap[size];
+    const borderRadius = containerSize / 2;
+    const containerStyle = [
+        styles.container,
+        {
+            width: containerSize,
+            height: containerSize,
+            borderRadius,
+            backgroundColor: backgroundColor || (gradient ? undefined : tokens.colors.surfaceVariant),
+        },
+        withBorder && {
+            borderWidth: 1,
+            borderColor: borderColor || tokens.colors.border,
+        },
+        style,
+    ];
+    if (gradient) {
+        return (<LinearGradient colors={gradient} style={containerStyle} testID={testID}>
+        {icon}
+      </LinearGradient>);
+    }
+    return (<View style={containerStyle} testID={testID}>
+      {icon}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+//# sourceMappingURL=IconContainer.js.map

package/lib/presentation/molecules/IconContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconContainer.js","sourceRoot":"","sources":["../../../src/presentation/molecules/IconContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAatD,MAAM,UAAU,GAAG,CAAC,MAA6C,EAAE,EAAE,CAAC,CAAC;IACrE,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE;IACvB,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE;IACvB,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE;IACvB,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,eAAe,EACf,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,WAAW,EACX,KAAK,EACL,MAAM,GACP,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,YAAY,GAAG,aAAa,GAAG,CAAC,CAAC;IAEvC,MAAM,cAAc,GAAG;QACrB,MAAM,CAAC,SAAS;QAChB;YACE,KAAK,EAAE,aAAa;YACpB,MAAM,EAAE,aAAa;YACrB,YAAY;YACZ,eAAe,EAAE,eAAe,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;SAC1F;QACD,UAAU,IAAI;YACZ,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,WAAW,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM;SACjD;QACD,KAAK;KACN,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,CAAC,cAAc,CACb,MAAM,CAAC,CAAC,QAAQ,CAAC,CACjB,KAAK,CAAC,CAAC,cAAc,CAAC,CACtB,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;QAAA,CAAC,IAAI,CACP;MAAA,EAAE,cAAc,CAAC,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC1C;MAAA,CAAC,IAAI,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;CACF,CAAC,CAAC"}

package/lib/presentation/molecules/LanguageSwitcher.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface LanguageSwitcherProps {
+    showName?: boolean;
+    showFlag?: boolean;
+    color?: string;
+    navigationScreen?: string;
+}
+export declare const LanguageSwitcher: React.FC<LanguageSwitcherProps>;
+export default LanguageSwitcher;
+//# sourceMappingURL=LanguageSwitcher.d.ts.map

package/lib/presentation/molecules/LanguageSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/LanguageSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAmB5D,CAAC;AAQF,eAAe,gBAAgB,CAAC"}

package/lib/presentation/molecules/LanguageSwitcher.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon } from '../atoms';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useLanguageNavigation } from './languageswitcher/hooks/useLanguageNavigation';
+import { languageSwitcherConfig } from './languageswitcher/config/languageSwitcherConfig';
+export const LanguageSwitcher = ({ showName = false, showFlag = true, color, navigationScreen = languageSwitcherConfig.defaultNavigationScreen, }) => {
+    const tokens = useAppDesignTokens();
+    const { currentLang, navigateToLanguageSelection } = useLanguageNavigation(navigationScreen);
+    const iconColor = color || tokens.colors.textPrimary;
+    const styles = getStyles(tokens);
+    return (<TouchableOpacity style={styles.container} onPress={navigateToLanguageSelection} activeOpacity={0.7} hitSlop={languageSwitcherConfig.hitSlop}>
+      {showFlag && <AtomicText type="headlineSmall" style={styles.flag}>{currentLang.flag}</AtomicText>}
+      {showName && <AtomicText type="bodySmall" color={iconColor} style={styles.languageName}>{currentLang.nativeName}</AtomicText>}
+      {!showName && !showFlag && <AtomicIcon name="Languages" color="primary"/>}
+    </TouchableOpacity>);
+};
+const getStyles = (tokens) => ({
+    container: { flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.sm, paddingHorizontal: tokens.spacing.xs },
+    flag: { fontSize: tokens.typography.headingSmall.fontSize },
+    languageName: { fontSize: tokens.typography.bodySmall.fontSize, fontWeight: tokens.typography.semibold },
+});
+export default LanguageSwitcher;
+//# sourceMappingURL=LanguageSwitcher.js.map

package/lib/presentation/molecules/LanguageSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.js","sourceRoot":"","sources":["../../../src/presentation/molecules/LanguageSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAc,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AACvF,OAAO,EAAE,sBAAsB,EAAE,MAAM,kDAAkD,CAAC;AAS1F,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,IAAI,EACf,KAAK,EACL,gBAAgB,GAAG,sBAAsB,CAAC,uBAAuB,GAClE,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,EAAE,WAAW,EAAE,2BAA2B,EAAE,GAAG,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IAC7F,MAAM,SAAS,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;IAErD,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAEjC,OAAO,CACL,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,2BAA2B,CAAC,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAC3I;MAAA,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CACjG;MAAA,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC,CAC7H;MAAA,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,EAAG,CAC5E;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,MAA6C,EAAE,EAAE,CAAC,CAAC;IACpE,SAAS,EAAE,EAAE,aAAa,EAAE,KAAc,EAAE,UAAU,EAAE,QAAiB,EAAE,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE;IACzI,IAAI,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,EAAE;IAC3D,YAAY,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE;CACzG,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/lib/presentation/molecules/ListItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ListItemProps } from './listitem/types';
+export type { ListItemProps };
+export declare const ListItem: React.FC<ListItemProps>;
+//# sourceMappingURL=ListItem.d.ts.map

package/lib/presentation/molecules/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyB5C,CAAC"}

package/lib/presentation/molecules/ListItem.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicText } from '../atoms/AtomicText';
+import { AtomicIcon } from '../atoms/AtomicIcon';
+import { getListItemStyles } from './listitem/styles/listItemStyles';
+export const ListItem = ({ title, subtitle, leftIcon, rightIcon = 'forward', onPress, disabled = false, style, }) => {
+    const tokens = useAppDesignTokens();
+    const listItemStyles = getListItemStyles(tokens);
+    const Component = onPress ? TouchableOpacity : View;
+    return (<Component style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+      {leftIcon && (<View style={listItemStyles.iconContainer}>
+          <AtomicIcon name={leftIcon} color={disabled ? 'surfaceVariant' : 'primary'}/>
+        </View>)}
+      <View style={listItemStyles.content}>
+        <AtomicText type="bodyLarge" color={disabled ? 'surfaceVariant' : 'onSurface'} numberOfLines={1}>{title}</AtomicText>
+        {subtitle && <AtomicText type="bodySmall" color="surfaceVariant" numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
+      </View>
+      {rightIcon && onPress && (<View style={listItemStyles.iconContainer}>
+          <AtomicIcon name={rightIcon} color="surfaceVariant"/>
+        </View>)}
+    </Component>);
+};
+//# sourceMappingURL=ListItem.js.map

package/lib/presentation/molecules/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/presentation/molecules/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,GACnF,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,cAAc,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,SAAS,GAA6B,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9E,OAAO,CACL,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAC5J;MAAA,CAAC,QAAQ,IAAI,CACX,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,CACxC;UAAA,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,EAC7E;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAClC;QAAA,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CACpH;QAAA,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAC5I;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,SAAS,IAAI,OAAO,IAAI,CACvB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,CACxC;UAAA,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,gBAAgB,EACrD;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC"}

package/lib/presentation/molecules/ScreenHeader.d.ts

@@ -0,0 +1,55 @@
+/**
+ * ScreenHeader Component - {{APP_NAME}}
+ *
+ * Reusable screen header with consistent back button placement
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - Top-left back button (arrow-back icon)
+ * - Centered title text
+ * - Optional right action button
+ * - Consistent spacing and layout
+ * - Works with all 100+ generated apps
+ *
+ * CRITICAL: Back button MUST ALWAYS be top-left (never bottom, never center)
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface ScreenHeaderProps {
+    /** Screen title (centered) */
+    title: string;
+    /** Optional right action button */
+    rightAction?: React.ReactNode;
+    /** Custom back button action (default: navigation.goBack()) */
+    onBackPress?: () => void;
+    /** Hide back button (rare cases only) */
+    hideBackButton?: boolean;
+    /** Additional header style */
+    style?: ViewStyle;
+    /** Test ID for E2E testing */
+    testID?: string;
+}
+/**
+ * ScreenHeader Component
+ *
+ * @example
+ * // Basic usage (most common)
+ * <ScreenHeader title="Settings" />
+ *
+ * @example
+ * // With right action
+ * <ScreenHeader
+ *   title="Edit Profile"
+ *   rightAction={<TouchableOpacity onPress={handleSave}><Text>Save</Text></TouchableOpacity>}
+ * />
+ *
+ * @example
+ * // Custom back action
+ * <ScreenHeader
+ *   title="Unsaved Changes"
+ *   onBackPress={handleUnsavedChanges}
+ * />
+ */
+export declare const ScreenHeader: React.FC<ScreenHeaderProps>;
+export default ScreenHeader;
+//# sourceMappingURL=ScreenHeader.d.ts.map

package/lib/presentation/molecules/ScreenHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenHeader.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/ScreenHeader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsC,SAAS,EAAE,MAAM,cAAc,CAAC;AAM7E,MAAM,WAAW,iBAAiB;IAChC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyEpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/presentation/molecules/ScreenHeader.js

@@ -0,0 +1,94 @@
+/**
+ * ScreenHeader Component - {{APP_NAME}}
+ *
+ * Reusable screen header with consistent back button placement
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - Top-left back button (arrow-back icon)
+ * - Centered title text
+ * - Optional right action button
+ * - Consistent spacing and layout
+ * - Works with all 100+ generated apps
+ *
+ * CRITICAL: Back button MUST ALWAYS be top-left (never bottom, never center)
+ */
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { AtomicIcon } from '../atoms/AtomicIcon';
+import { AtomicText } from '../atoms/AtomicText';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+/**
+ * ScreenHeader Component
+ *
+ * @example
+ * // Basic usage (most common)
+ * <ScreenHeader title="Settings" />
+ *
+ * @example
+ * // With right action
+ * <ScreenHeader
+ *   title="Edit Profile"
+ *   rightAction={<TouchableOpacity onPress={handleSave}><Text>Save</Text></TouchableOpacity>}
+ * />
+ *
+ * @example
+ * // Custom back action
+ * <ScreenHeader
+ *   title="Unsaved Changes"
+ *   onBackPress={handleUnsavedChanges}
+ * />
+ */
+export const ScreenHeader = ({ title, rightAction, onBackPress, hideBackButton = false, style, testID = 'screen-header', }) => {
+    const navigation = useNavigation();
+    const tokens = useAppDesignTokens();
+    const handleBackPress = () => {
+        if (onBackPress) {
+            onBackPress();
+        }
+        else {
+            navigation.goBack();
+        }
+    };
+    return (<View style={[
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingHorizontal: tokens.spacing.screenPadding,
+                paddingVertical: tokens.spacing.md,
+                borderBottomWidth: 0.5,
+                backgroundColor: tokens.colors.backgroundPrimary,
+                borderBottomColor: tokens.colors.border,
+            },
+            style
+        ]} testID={testID}>
+      {/* Left: Back Button (ALWAYS top-left when visible) */}
+      <View style={{ width: 40, alignItems: 'flex-start' }}>
+        {!hideBackButton && (<TouchableOpacity onPress={handleBackPress} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} testID={`${testID}-back-button`}>
+            <AtomicIcon name="arrow-back" color="primary"/>
+          </TouchableOpacity>)}
+      </View>
+
+      {/* Center: Title */}
+      <View style={{ flex: 1, alignItems: 'center', paddingHorizontal: tokens.spacing.sm }}>
+        <AtomicText type="headlineMedium" style={[
+            {
+                fontWeight: tokens.typography.bold,
+                textAlign: 'center',
+                color: tokens.colors.textPrimary,
+            }
+        ]} numberOfLines={1} testID={`${testID}-title`}>
+          {title}
+        </AtomicText>
+      </View>
+
+      {/* Right: Optional Action or Placeholder */}
+      <View style={{ width: 40, alignItems: 'flex-start' }}>
+        {rightAction || <View style={{ width: 40 }}/>}
+      </View>
+    </View>);
+};
+export default ScreenHeader;
+//# sourceMappingURL=ScreenHeader.js.map

package/lib/presentation/molecules/ScreenHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenHeader.js","sourceRoot":"","sources":["../../../src/presentation/molecules/ScreenHeader.tsx"],"names":[],"mappings":"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"}

package/lib/presentation/molecules/SearchBar.d.ts

@@ -0,0 +1,18 @@
+/**
+ * SearchBar Molecule - Search Input with Icon and Clear Button
+ *
+ * Combines AtomicInput + AtomicIcon + AtomicButton
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: AtomicInput + AtomicIcon + TouchableOpacity
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { AtomicInputProps } from '../atoms/AtomicInput';
+export interface SearchBarProps extends Omit<AtomicInputProps, 'leftIcon' | 'rightIcon'> {
+    onClear?: () => void;
+    containerStyle?: ViewStyle;
+}
+export declare const SearchBar: React.FC<SearchBarProps>;
+//# sourceMappingURL=SearchBar.d.ts.map

package/lib/presentation/molecules/SearchBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/SearchBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAe,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAOrE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,WAAW,CAAC;IACtF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoC9C,CAAC"}

package/lib/presentation/molecules/SearchBar.js

@@ -0,0 +1,47 @@
+/**
+ * SearchBar Molecule - Search Input with Icon and Clear Button
+ *
+ * Combines AtomicInput + AtomicIcon + AtomicButton
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: AtomicInput + AtomicIcon + TouchableOpacity
+ */
+import React from 'react';
+import { View } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicInput } from '../atoms/AtomicInput';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const SearchBar = ({ value, onChangeText, onClear, placeholder = 'Search...', containerStyle, ...inputProps }) => {
+    const tokens = useAppDesignTokens();
+    const handleClear = () => {
+        if (onChangeText) {
+            onChangeText('');
+        }
+        if (onClear) {
+            onClear();
+        }
+    };
+    const styles = getStyles(tokens);
+    return (<View style={[styles.container, containerStyle]}>
+      <AtomicInput {...inputProps} value={value} onChangeText={onChangeText} placeholder={placeholder} variant="filled" style={styles.input} leadingIcon="Search" trailingIcon={value && value.length > 0 ? "X" : undefined} onTrailingIconPress={value && value.length > 0 ? handleClear : undefined}/>
+    </View>);
+};
+// =============================================================================
+// STYLES
+// =============================================================================
+const getStyles = (tokens) => ({
+    container: {
+        width: '100%',
+        marginVertical: tokens.spacing.sm,
+    },
+    input: {
+        backgroundColor: tokens.colors.surfaceVariant,
+    },
+});
+// =============================================================================
+// EXPORTS
+// =============================================================================
+//# sourceMappingURL=SearchBar.js.map

package/lib/presentation/molecules/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../src/presentation/molecules/SearchBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAA+B,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAoB,MAAM,sBAAsB,CAAC;AAYrE,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,KAAK,EACL,YAAY,EACZ,OAAO,EACP,WAAW,GAAG,WAAW,EACzB,cAAc,EACd,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,EAAE,CAAC,CAAC;QACnB,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAEjC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAC9C;MAAA,CAAC,WAAW,CACV,IAAI,UAAU,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,QAAQ,CAChB,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,WAAW,CAAC,QAAQ,CACpB,YAAY,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1D,mBAAmB,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,EAE7E;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,SAAS;AACT,gFAAgF;AAEhF,MAAM,SAAS,GAAG,CAAC,MAA6C,EAAE,EAAE,CAAC,CAAC;IACpE,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;KACrB;IACd,KAAK,EAAE;QACL,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc;KACjC;CACf,CAAC,CAAC;AAEH,gFAAgF;AAChF,UAAU;AACV,gFAAgF"}