npm - @planningcenter/chat-react-native - Versions diffs - 3.1.0-rc.7 → 3.1.0-rc.8 - Mend

@planningcenter/chat-react-native 3.1.0-rc.7 → 3.1.0-rc.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/build/components/display/banner_collapsible.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner_collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/display/banner_collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,WAAW,EAA0B,MAAM,UAAU,CAAA;~~AAiC9D~~,UAAU,sBAAuB,SAAQ,WAAW;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAe,GAChB,EAAE,sBAAsB,~~4BAsBxB~~"}
1	+ {"version":3,"file":"banner_collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/display/banner_collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,WAAW,EAA0B,MAAM,UAAU,CAAA;AAO9D,UAAU,sBAAuB,SAAQ,WAAW;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAe,GAChB,EAAE,sBAAsB,4BAqBxB"}

package/build/components/display/banner_collapsible.js CHANGED Viewed

@@ -1,33 +1,9 @@
 import React from 'react';
 import { ConditionalDescription } from './banner';
 import BannerPrimitive from '../primitive/banner_primitive';
-import { LayoutAnimation } from 'react-native';
-// =================================
-// ====== Constants ================
-// =================================
-const OPACITY_DURATION = 100; // Ensures the content fades before the height rolls up
-const collapsibleAnimationConfig = {
-    duration: 300,
-    create: {
-        type: LayoutAnimation.Types.easeInEaseOut,
-        property: LayoutAnimation.Properties.opacity,
-        duration: OPACITY_DURATION,
-    },
-    update: {
-        type: LayoutAnimation.Types.easeInEaseOut,
-        property: LayoutAnimation.Properties.opacity,
-        duration: OPACITY_DURATION,
-    },
-    delete: {
-        type: LayoutAnimation.Types.easeInEaseOut,
-        property: LayoutAnimation.Properties.opacity,
-        duration: OPACITY_DURATION,
-    },
-};
 export function BannerCollapsible({ appearance, children, description, heading, iconName, showIcon = true, }) {
     const [expanded, setExpanded] = React.useState(false);
     const toggleCollapsible = () => {
-        LayoutAnimation.configureNext(collapsibleAnimationConfig);
         setExpanded(prev => !prev);
     };
     if (!description && !heading)

package/build/components/display/banner_collapsible.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner_collapsible.js","sourceRoot":"","sources":["../../../src/components/display/banner_collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAe,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,eAAe,MAAM,+BAA+B,CAAA;~~AAC3D~~,~~OAAO,EAAE,eAAe,EAAE,~~MAAM,cAAc,CAAA;AAE9C,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAC,uDAAuD;AAEpF,MAAM,0BAA0B,GAAG;IACjC,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE;QACN,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,aAAa;QACzC,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,OAAO;QAC5C,QAAQ,EAAE,gBAAgB;KAC3B;IACD,MAAM,EAAE;QACN,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,aAAa;QACzC,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,OAAO;QAC5C,QAAQ,EAAE,gBAAgB;KAC3B;IACD,MAAM,EAAE;QACN,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,aAAa;QACzC,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,OAAO;QAC5C,QAAQ,EAAE,gBAAgB;KAC3B;CACF,CAAA;AAaD,MAAM,UAAU,iBAAiB,CAAC,EAChC,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,IAAI,GACQ;IACvB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAErD,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,~~eAAe,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAA;QACzD,~~WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC,CAAA;IAED,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAEzC,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAC3C;MAAA,CAAC,eAAe,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAChF;QAAA,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC/D;QAAA,CAAC,eAAe,CAAC,OAAO,CACtB;UAAA,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CACjF;UAAA,CAAC,sBAAsB,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,EACjD;UAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAC7B;QAAA,EAAE,eAAe,CAAC,OAAO,CAC3B;MAAA,EAAE,eAAe,CAAC,iBAAiB,CACrC;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React, { ReactNode } from 'react'\nimport { BannerProps, ConditionalDescription } from './banner'\nimport BannerPrimitive from '../primitive/banner_primitive'\~~nimport { LayoutAnimation } from 'react-native'\~~n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst OPACITY_DURATION = 100 // Ensures the content fades before the height rolls up\n\nconst collapsibleAnimationConfig = {\n duration: 300,\n create: {\n type: LayoutAnimation.Types.easeInEaseOut,\n property: LayoutAnimation.Properties.opacity,\n duration: OPACITY_DURATION,\n },\n update: {\n type: LayoutAnimation.Types.easeInEaseOut,\n property: LayoutAnimation.Properties.opacity,\n duration: OPACITY_DURATION,\n },\n delete: {\n type: LayoutAnimation.Types.easeInEaseOut,\n property: LayoutAnimation.Properties.opacity,\n duration: OPACITY_DURATION,\n },\n}\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface BannerCollapsibleProps extends BannerProps {\n /*\n Hidden by default and shown when the banner is expanded.\n */\n children?: ReactNode\n}\n\nexport function BannerCollapsible({\n appearance,\n children,\n description,\n heading,\n iconName,\n showIcon = true,\n}: BannerCollapsibleProps) {\n const [expanded, setExpanded] = React.useState(false)\n\n const toggleCollapsible = () => {\n ~~LayoutAnimation.configureNext(collapsibleAnimationConfig)\n~~ setExpanded(prev => !prev)\n }\n\n if (!description && !heading) return null\n\n return (\n <BannerPrimitive.Root appearance={appearance}>\n <BannerPrimitive.CollapsibleLayout onPress={toggleCollapsible} expanded={expanded}>\n {showIcon && <BannerPrimitive.StatusIcon iconName={iconName} />}\n <BannerPrimitive.Content>\n {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}\n <ConditionalDescription description={description} />\n {expanded ? children : null}\n </BannerPrimitive.Content>\n </BannerPrimitive.CollapsibleLayout>\n </BannerPrimitive.Root>\n )\n}\n"]}
1	+ {"version":3,"file":"banner_collapsible.js","sourceRoot":"","sources":["../../../src/components/display/banner_collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAe,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,eAAe,MAAM,+BAA+B,CAAA;AAa3D,MAAM,UAAU,iBAAiB,CAAC,EAChC,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,IAAI,GACQ;IACvB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAErD,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC,CAAA;IAED,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAEzC,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAC3C;MAAA,CAAC,eAAe,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAChF;QAAA,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC/D;QAAA,CAAC,eAAe,CAAC,OAAO,CACtB;UAAA,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CACjF;UAAA,CAAC,sBAAsB,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,EACjD;UAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAC7B;QAAA,EAAE,eAAe,CAAC,OAAO,CAC3B;MAAA,EAAE,eAAe,CAAC,iBAAiB,CACrC;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React, { ReactNode } from 'react'\nimport { BannerProps, ConditionalDescription } from './banner'\nimport BannerPrimitive from '../primitive/banner_primitive'\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface BannerCollapsibleProps extends BannerProps {\n /*\n Hidden by default and shown when the banner is expanded.\n */\n children?: ReactNode\n}\n\nexport function BannerCollapsible({\n appearance,\n children,\n description,\n heading,\n iconName,\n showIcon = true,\n}: BannerCollapsibleProps) {\n const [expanded, setExpanded] = React.useState(false)\n\n const toggleCollapsible = () => {\n setExpanded(prev => !prev)\n }\n\n if (!description && !heading) return null\n\n return (\n <BannerPrimitive.Root appearance={appearance}>\n <BannerPrimitive.CollapsibleLayout onPress={toggleCollapsible} expanded={expanded}>\n {showIcon && <BannerPrimitive.StatusIcon iconName={iconName} />}\n <BannerPrimitive.Content>\n {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}\n <ConditionalDescription description={description} />\n {expanded ? children : null}\n </BannerPrimitive.Content>\n </BannerPrimitive.CollapsibleLayout>\n </BannerPrimitive.Root>\n )\n}\n"]}

package/build/components/display/child_notice.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MemberResource } from '../../types';
+interface ChildNoticeProps {
+    childMembers: MemberResource[];
+}
+export declare function ChildNotice({ childMembers }: ChildNoticeProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=child_notice.d.ts.map

package/build/components/display/child_notice.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"child_notice.d.ts","sourceRoot":"","sources":["../../../src/components/display/child_notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAY5C,UAAU,gBAAgB;IACxB,YAAY,EAAE,cAAc,EAAE,CAAA;CAC/B;AAED,wBAAgB,WAAW,CAAC,EAAE,YAAY,EAAE,EAAE,gBAAgB,qBAc7D"}

package/build/components/display/child_notice.js ADDED Viewed

@@ -0,0 +1,48 @@
+import React from 'react';
+import { BannerCollapsible } from './banner_collapsible';
+import BannerPrimitive from '../primitive/banner_primitive';
+import { View, StyleSheet } from 'react-native';
+import { Avatar } from './avatar';
+import { platformFontWeightMedium } from '../../utils';
+import { Text } from './text';
+export function ChildNotice({ childMembers }) {
+    const styles = useStyles();
+    const heading = `${childMembers.length} members under age 13`;
+    return (<BannerCollapsible appearance="warning" iconName="general.shieldExclamation" heading={heading}>
+      <BannerPrimitive.Text>
+        Under age members cannot chat. They won't see conversations or notifications.
+      </BannerPrimitive.Text>
+      <View style={styles.childrenWrapper}>
+        {childMembers?.map(child => <Child key={child.id} child={child}/>)}
+      </View>
+    </BannerCollapsible>);
+}
+function Child({ child }) {
+    const styles = useStyles();
+    return (<View style={styles.child}>
+      <Avatar sourceUri={child.avatar} size="sm"/>
+      <Text variant="tertiary" style={styles.name}>
+        {child.name}
+      </Text>
+    </View>);
+}
+// =================================
+// ====== Styles ===================
+// =================================
+const useStyles = () => {
+    return StyleSheet.create({
+        childrenWrapper: {
+            marginTop: 8,
+            gap: 8,
+        },
+        child: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        },
+        name: {
+            fontWeight: platformFontWeightMedium,
+        },
+    });
+};
+//# sourceMappingURL=child_notice.js.map

package/build/components/display/child_notice.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"child_notice.js","sourceRoot":"","sources":["../../../src/components/display/child_notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,eAAe,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAU7B,MAAM,UAAU,WAAW,CAAC,EAAE,YAAY,EAAoB;IAC5D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,GAAG,YAAY,CAAC,MAAM,uBAAuB,CAAA;IAE7D,OAAO,CACL,CAAC,iBAAiB,CAAC,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,2BAA2B,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAC5F;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;;MACF,EAAE,eAAe,CAAC,IAAI,CACtB;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAClC;QAAA,CAAC,YAAY,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC,CACrE;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAA;AACH,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,KAAK,EAA6B;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACxB;MAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,EAC1C;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAC1C;QAAA,CAAC,KAAK,CAAC,IAAI,CACb;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,eAAe,EAAE;YACf,SAAS,EAAE,CAAC;YACZ,GAAG,EAAE,CAAC;SACP;QACD,KAAK,EAAE;YACL,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;SACP;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;SACrC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { MemberResource } from '../../types'\nimport { BannerCollapsible } from './banner_collapsible'\nimport BannerPrimitive from '../primitive/banner_primitive'\nimport { View, StyleSheet } from 'react-native'\nimport { Avatar } from './avatar'\nimport { platformFontWeightMedium } from '../../utils'\nimport { Text } from './text'\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface ChildNoticeProps {\n childMembers: MemberResource[]\n}\n\nexport function ChildNotice({ childMembers }: ChildNoticeProps) {\n const styles = useStyles()\n const heading = `${childMembers.length} members under age 13`\n\n return (\n <BannerCollapsible appearance=\"warning\" iconName=\"general.shieldExclamation\" heading={heading}>\n <BannerPrimitive.Text>\n Under age members cannot chat. They won't see conversations or notifications.\n </BannerPrimitive.Text>\n <View style={styles.childrenWrapper}>\n {childMembers?.map(child => <Child key={child.id} child={child} />)}\n </View>\n </BannerCollapsible>\n )\n}\n\nfunction Child({ child }: { child: MemberResource }) {\n const styles = useStyles()\n return (\n <View style={styles.child}>\n <Avatar sourceUri={child.avatar} size=\"sm\" />\n <Text variant=\"tertiary\" style={styles.name}>\n {child.name}\n </Text>\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n return StyleSheet.create({\n childrenWrapper: {\n marginTop: 8,\n gap: 8,\n },\n child: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n },\n name: {\n fontWeight: platformFontWeightMedium,\n },\n })\n}\n"]}

package/build/components/display/index.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export * from './badge';
 export * from './banner_collapsible';
 export * from './banner';
 export * from './button';
+export * from './child_notice';
 export * from './heading';
 export * from './icon_button';
 export * from './icon';

package/build/components/display/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA"}

package/build/components/display/index.js CHANGED Viewed

@@ -4,6 +4,7 @@ export * from './badge';
 export * from './banner_collapsible';
 export * from './banner';
 export * from './button';
+export * from './child_notice';
 export * from './heading';
 export * from './icon_button';
 export * from './icon';

package/build/components/display/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA","sourcesContent":["export * from './avatar_group'\nexport * from './avatar'\nexport * from './badge'\nexport * from './banner_collapsible'\nexport * from './banner'\nexport * from './button'\nexport * from './heading'\nexport * from './icon_button'\nexport * from './icon'\nexport * from './image'\nexport * from './person'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text_button'\nexport * from './text_inline_button'\nexport * from './text'\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,QAAQ,CAAA","sourcesContent":["export * from './avatar_group'\nexport * from './avatar'\nexport * from './badge'\nexport * from './banner_collapsible'\nexport * from './banner'\nexport * from './button'\nexport * from './child_notice'\nexport * from './heading'\nexport * from './icon_button'\nexport * from './icon'\nexport * from './image'\nexport * from './person'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text_button'\nexport * from './text_inline_button'\nexport * from './text'\n"]}

package/build/components/display/person.d.ts CHANGED Viewed

@@ -4,7 +4,5 @@ interface PersonProps {
     person: MemberResource;
 }
 export declare function Person({ person }: PersonProps): React.JSX.Element;
-export declare function Adult({ person }: PersonProps): React.JSX.Element;
-export declare function Child({ person }: PersonProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=person.d.ts.map

package/build/components/display/person.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../src/components/display/person.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;~~AAIzB~~,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAU5C,UAAU,WAAW;IACnB,MAAM,EAAE,cAAc,CAAA;CACvB;AAED,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,~~qBAE7C;AAED,wBAAgB,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,qBAc5C;AACD,wBAAgB,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,qBAoB5C~~"}
1	+ {"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../src/components/display/person.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAU5C,UAAU,WAAW;IACnB,MAAM,EAAE,cAAc,CAAA;CACvB;AAED,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,qBAc7C"}

package/build/components/display/person.js CHANGED Viewed

@@ -1,15 +1,11 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useTheme } from '../../hooks';
 import { platformFontWeightMedium } from '../../utils/styles';
 import { Avatar } from './avatar';
 import { Text } from './text';
 import { Badge } from './badge';
 import { space } from '../../utils';
 export function Person({ person }) {
-    return person.child ? <Child person={person}/> : <Adult person={person}/>;
-}
-export function Adult({ person }) {
     const styles = useStyles();
     return (<View style={styles.wrapper}>
       <Avatar sourceUri={person.avatar}/>
@@ -21,25 +17,10 @@ export function Adult({ person }) {
       </View>
     </View>);
 }
-export function Child({ person }) {
-    const styles = useStyles();
-    return (<View style={styles.wrapper}>
-      <View style={styles.childAvatar}>
-        <Avatar sourceUri={person.avatar}/>
-      </View>
-      <View style={styles.content}>
-        <Text style={[styles.name, styles.childName]}>{person.name}</Text>
-        <View style={styles.badges}>
-          <Badge label="Not eligible to chat" appearance="warning" iconName="general.shieldExclamation"/>
-        </View>
-      </View>
-    </View>);
-}
 // =================================
 // ====== Styles ===================
 // =================================
 const useStyles = () => {
-    const { colors } = useTheme();
     return StyleSheet.create({
         wrapper: {
             flexDirection: 'row',
@@ -52,12 +33,6 @@ const useStyles = () => {
         name: {
             fontWeight: platformFontWeightMedium,
         },
-        childName: {
-            color: colors.textColorDefaultSecondary,
-        },
-        childAvatar: {
-            opacity: 0.5,
-        },
         badges: {
             flexDirection: 'row',
             gap: space(0.5),

package/build/components/display/person.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"person.js","sourceRoot":"","sources":["../../../src/components/display/person.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,~~QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,~~wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAUnC,MAAM,UAAU,MAAM,CAAC,EAAE,MAAM,EAAe;IAC5C,~~OAAO,~~MAAM,~~CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,~~MAAM,~~CAAC,CAAC,MAAM,CAAC,EAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAG,CAAA;AAC7E,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,EAAE,MAAM,EAAe;IAC3C,MAAM,MAAM,~~GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;MAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EACjC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CAC7C;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;UAAA,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAG,CAAC,CAClF;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AACD,MAAM,UAAU,KAAK,CAAC,EAAE,MAAM,EAAe;IAC3C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC9B;QAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EACnC;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CACjE;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;UAAA,CAAC,KAAK,CACJ,KAAK,CAAC,sBAAsB,CAC5B,UAAU,CAAC,SAAS,CACpB,QAAQ,CAAC,2BAA2B,EAExC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,~~MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,~~OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,OAAO,EAAE;YACP,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;SACd;QACD,OAAO,EAAE;YACP,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC;SACjB;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;SACrC;QACD,~~SAAS,EAAE;YACT,KAAK,EAAE,~~MAAM,~~CAAC,yBAAyB;SACxC;QACD,WAAW,~~EAAE;~~YACX,OAAO,EAAE,GAAG;SACb;QACD,MAAM,EAAE;~~YACN,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;SAChB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { ~~useTheme } from '../../hooks'\nimport {~~ platformFontWeightMedium } from '../../utils/styles'\nimport { MemberResource } from '../../types'\nimport { Avatar } from './avatar'\nimport { Text } from './text'\nimport { Badge } from './badge'\nimport { space } from '../../utils'\n\n// =================================\n// ====== Components ===============\n// =================================\n\ninterface PersonProps {\n person: MemberResource\n}\n\nexport function Person({ person }: PersonProps) {\n ~~return person.child ? <Child person={person} /> : <Adult person={person} />\n}\n\nexport function Adult({ person }: PersonProps) {\n~~ const styles = useStyles()\n\n return (\n <View style={styles.wrapper}>\n <Avatar sourceUri={person.avatar} />\n <View style={styles.content}>\n <Text style={styles.name}>{person.name}</Text>\n <View style={styles.badges}>\n {person.badges?.map((badge, index) => <Badge key={index} label={badge.title} />)}\n </View>\n </View>\n </View>\n )\n}\~~nexport function Child({ person }: PersonProps) {\~~n ~~const styles = useStyles()~~\n\n return (\n <View style={styles.wrapper}>\n <View style={styles.childAvatar}>\n <Avatar sourceUri={person.avatar} />\n </View>\n <View style={styles.content}>\n <Text style={[styles.name, styles.childName]}>{person.name}</Text>\n <View style={styles.badges}>\n <Badge\n label=\"Not eligible to chat\"\n appearance=\"warning\"\n iconName=\"general.shieldExclamation\"\n />\n </View>\n </View>\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n ~~const { colors } = useTheme()\n\n~~ return StyleSheet.create({\n wrapper: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: space(1),\n },\n content: {\n gap: space(0.25),\n },\n name: {\n fontWeight: platformFontWeightMedium,\n },\n ~~childName: {\n color: colors.textColorDefaultSecondary,\n },\n childAvatar: {\n opacity: 0.5,\n },\n~~ badges: {\n flexDirection: 'row',\n gap: space(0.5),\n },\n })\n}\n"]}
1	+ {"version":3,"file":"person.js","sourceRoot":"","sources":["../../../src/components/display/person.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAUnC,MAAM,UAAU,MAAM,CAAC,EAAE,MAAM,EAAe;IAC5C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;MAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EACjC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CAC7C;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACzB;UAAA,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAG,CAAC,CAClF;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,OAAO,EAAE;YACP,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;SACd;QACD,OAAO,EAAE;YACP,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC;SACjB;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,wBAAwB;SACrC;QACD,MAAM,EAAE;YACN,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;SAChB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { platformFontWeightMedium } from '../../utils/styles'\nimport { MemberResource } from '../../types'\nimport { Avatar } from './avatar'\nimport { Text } from './text'\nimport { Badge } from './badge'\nimport { space } from '../../utils'\n\n// =================================\n// ====== Components ===============\n// =================================\n\ninterface PersonProps {\n person: MemberResource\n}\n\nexport function Person({ person }: PersonProps) {\n const styles = useStyles()\n\n return (\n <View style={styles.wrapper}>\n <Avatar sourceUri={person.avatar} />\n <View style={styles.content}>\n <Text style={styles.name}>{person.name}</Text>\n <View style={styles.badges}>\n {person.badges?.map((badge, index) => <Badge key={index} label={badge.title} />)}\n </View>\n </View>\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = () => {\n return StyleSheet.create({\n wrapper: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: space(1),\n },\n content: {\n gap: space(0.25),\n },\n name: {\n fontWeight: platformFontWeightMedium,\n },\n badges: {\n flexDirection: 'row',\n gap: space(0.5),\n },\n })\n}\n"]}

package/build/components/primitive/avatar_primitive.d.ts CHANGED Viewed

@@ -13,6 +13,7 @@ declare const _default: AvatarComponents;
 export default _default;
 export type { AvatarImageProps, AvatarPresenceProps, AvatarGroupProps, AvatarMaskProps, AvatarRootProps, };
 declare const AVATAR_SIZES: {
+    readonly sm: "sm";
     readonly md: "md";
     readonly lg: "lg";
 };

package/build/components/primitive/avatar_primitive.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAgBpD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;CAChC,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,CAAA;AAMD,QAAA,MAAM,YAAY~~;;;CAGR~~,CAAA;AAEV,QAAA,MAAM,qBAAqB;;;CAGjB,CAAA;AAGV,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAA;AAClE,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAA;~~AAoC5F~~,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAmBD,KAAK,eAAe,GAAG,SAAS,CAAA;AAkBhC,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,KAAK,CAAC;IACnE,SAAS,EAAE,MAAM,CAAA;CAClB;AAgCD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB;AAsID,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,QAAQ,EAAE,kBAAkB,CAAA;CAC7B"}
1	+ {"version":3,"file":"avatar_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAgBpD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;CAChC,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,CAAA;AAMD,QAAA,MAAM,YAAY;;;;CAIR,CAAA;AAEV,QAAA,MAAM,qBAAqB;;;CAGjB,CAAA;AAGV,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAA;AAClE,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAA;AAsC5F,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAmBD,KAAK,eAAe,GAAG,SAAS,CAAA;AAkBhC,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,KAAK,CAAC;IACnE,SAAS,EAAE,MAAM,CAAA;CAClB;AAgCD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB;AAsID,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,QAAQ,EAAE,kBAAkB,CAAA;CAC7B"}

package/build/components/primitive/avatar_primitive.js CHANGED Viewed

@@ -19,6 +19,7 @@ export default Avatar;
 // ====== Constants & Types ========
 // =================================
 const AVATAR_SIZES = {
+    sm: 'sm',
     md: 'md',
     lg: 'lg',
 };
@@ -27,10 +28,12 @@ const AVATAR_PRESENCE_TYPES = {
     offline: 'offline',
 };
 const AVATAR_PX = {
+    [AVATAR_SIZES.sm]: 24,
     [AVATAR_SIZES.md]: 32,
     [AVATAR_SIZES.lg]: 40,
 };
 const AVATAR_PRESENCE_PX = {
+    [AVATAR_SIZES.sm]: 10,
     [AVATAR_SIZES.md]: 12,
     [AVATAR_SIZES.lg]: 14,
 };

package/build/components/primitive/avatar_primitive.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar_primitive.js","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react'\nimport { StyleSheet, View, ViewProps } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Image, ImageProps } from '../display/image'\nimport { Spinner } from '../display/spinner'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\nconst Avatar = {\n Root: AvatarRoot,\n Image: AvatarImage,\n Presence: AvatarPresence,\n Group: AvatarGroup,\n GroupLoader: AvatarGroupLoader,\n Mask: AvatarMask,\n} as const\n\ntype AvatarComponents = {\n Root: React.FC<AvatarRootProps>\n Image: React.FC<AvatarImageProps>\n Presence: React.FC<AvatarPresenceProps>\n Group: React.FC<AvatarGroupProps>\n GroupLoader: React.FC<Record<string, never>>\n Mask: React.FC<AvatarMaskProps>\n}\n\nexport default Avatar as AvatarComponents\nexport type {\n AvatarImageProps,\n AvatarPresenceProps,\n AvatarGroupProps,\n AvatarMaskProps,\n AvatarRootProps,\n}\n\n// =================================\n// ====== Constants & Types ========\n// =================================\n\nconst AVATAR_SIZES = {\n md: 'md',\n lg: 'lg',\n} as const\n\nconst AVATAR_PRESENCE_TYPES = {\n online: 'online',\n offline: 'offline',\n} as const\n\n// Progrmatically creates type unions\ntype AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES]\ntype AvatarPresenceType = (typeof AVATAR_PRESENCE_TYPES)[keyof typeof AVATAR_PRESENCE_TYPES]\n\nconst AVATAR_PX: Record<AvatarSize, number> = {\n [AVATAR_SIZES.md]: 32,\n [AVATAR_SIZES.lg]: 40,\n}\n\nconst AVATAR_PRESENCE_PX: Record<AvatarSize, number> = {\n [AVATAR_SIZES.md]: 12,\n [AVATAR_SIZES.lg]: 14,\n}\n\n// =================================\n// ====== Context ==================\n// =================================\n\ninterface AvatarContextType {\n size: AvatarSize\n allImagesLoaded: boolean\n setAllImagesLoaded: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nconst AvatarContext = createContext<AvatarContextType \| null>(null)\n\nfunction useAvatarContext() {\n const context = useContext(AvatarContext)\n if (!context) {\n throw new Error('Avatar components must be used within Avatar.Root')\n }\n return context\n}\n\n// =================================\n// ====== AvatarRoot ===============\n// =================================\n\ninterface AvatarRootProps {\n children: React.ReactNode\n size?: AvatarSize\n}\n\nfunction AvatarRoot({ children, size = 'md' }: AvatarRootProps) {\n const [allImagesLoaded, setAllImagesLoaded] = useState(false)\n const styles = useStyles({ size })\n\n return (\n <AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded }}>\n <View style={styles.rootContainer}>{children}</View>\n </AvatarContext.Provider>\n )\n}\n\nAvatarRoot.displayName = 'Avatar.Root'\n\n// =================================\n// ====== AvatarMask ===============\n// =================================\n\ntype AvatarMaskProps = ViewProps\n\nfunction AvatarMask({ children, ...props }: AvatarMaskProps) {\n const styles = useStyles()\n\n return (\n <View style={styles.mask} {...props}>\n {children}\n </View>\n )\n}\n\nAvatarMask.displayName = 'Avatar.Mask'\n\n// =================================\n// ====== AvatarImage ============\n// =================================\n\ninterface AvatarImageProps extends Omit<ImageProps, 'source' \| 'alt'> {\n sourceUri: string\n}\n\nfunction AvatarImage({ sourceUri, ...props }: AvatarImageProps) {\n const { size } = useAvatarContext()\n\n return <Image source={{ uri: sourceUri }} loaderSize={AVATAR_PX[size]} {...props} alt=\"\" />\n}\n\nAvatarImage.displayName = 'Avatar.Image'\n\ninterface AvatarGroupImageProps {\n sourceUri: string\n style?: ImageProps['wrapperStyle']\n onLoad?: () => void\n}\n\nfunction AvatarGroupImage({ sourceUri, style, onLoad }: AvatarGroupImageProps) {\n return (\n <Image\n source={{ uri: sourceUri }}\n loadingEnabled={false}\n wrapperStyle={style}\n onLoad={onLoad}\n alt=\"\"\n />\n )\n}\n\n// =================================\n// ====== AvatarGroup ============\n// =================================\n\ninterface AvatarGroupProps {\n sourceUris: string[]\n}\n\nfunction AvatarGroup({ sourceUris }: AvatarGroupProps) {\n const styles = useStyles()\n const { setAllImagesLoaded } = useAvatarContext()\n const [loadingStatus, setLoadingStatus] = useState({\n 0: false,\n 1: false,\n 2: false,\n 3: false,\n })\n const displayUris = sourceUris.slice(0, 4)\n const hasDisplayUris = displayUris.length > 0\n\n const handleImageLoaded = index => {\n setLoadingStatus(prev => ({\n ...prev,\n [index]: true,\n }))\n }\n\n useEffect(() => {\n const allImagesLoaded =\n hasDisplayUris && displayUris.every((_, index) => loadingStatus[index] === true)\n\n setAllImagesLoaded(allImagesLoaded)\n }, [displayUris, hasDisplayUris, loadingStatus, setAllImagesLoaded])\n\n if (!hasDisplayUris) {\n return null\n }\n\n if (displayUris.length === 1) {\n return <AvatarGroupImage sourceUri={displayUris[0]} onLoad={() => handleImageLoaded(0)} />\n }\n\n if (displayUris.length === 2) {\n return (\n <View style={styles.groupRow}>\n <AvatarGroupImage\n sourceUri={displayUris[0]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(0)}\n />\n <AvatarGroupImage\n sourceUri={displayUris[1]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(1)}\n />\n </View>\n )\n }\n\n if (displayUris.length === 3) {\n return (\n <View style={styles.groupColumn}>\n <View style={styles.groupRow}>\n <AvatarGroupImage\n sourceUri={displayUris[0]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(0)}\n />\n <View style={styles.groupColumn}>\n <AvatarGroupImage\n sourceUri={displayUris[1]}\n style={styles.fullWidthHalfHeight}\n onLoad={() => handleImageLoaded(1)}\n />\n <AvatarGroupImage\n sourceUri={displayUris[2]}\n style={styles.fullWidthHalfHeight}\n onLoad={() => handleImageLoaded(2)}\n />\n </View>\n </View>\n </View>\n )\n }\n\n return (\n <View style={styles.groupColumn}>\n <View style={styles.groupRow}>\n <AvatarGroupImage\n sourceUri={displayUris[0]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(0)}\n />\n <AvatarGroupImage\n sourceUri={displayUris[1]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(1)}\n />\n </View>\n <View style={styles.groupRow}>\n <AvatarGroupImage\n sourceUri={displayUris[2]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(2)}\n />\n <AvatarGroupImage\n sourceUri={displayUris[3]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(3)}\n />\n </View>\n </View>\n )\n}\n\nAvatarGroup.displayName = 'Avatar.Group'\n\n// =================================\n// ====== AvatarGroupLoader =========\n// =================================\n\nfunction AvatarGroupLoader() {\n const { size, allImagesLoaded } = useAvatarContext()\n const styles = useStyles({ size })\n\n if (allImagesLoaded) return null\n\n return (\n <View style={styles.groupLoader}>\n <Spinner size={AVATAR_PX[size]} />\n </View>\n )\n}\n\nAvatarGroupLoader.displayName = 'Avatar.GroupLoader'\n\n// =================================\n// ====== AvatarPresence =========\n// =================================\n\ninterface AvatarPresenceProps extends ViewProps {\n presence: AvatarPresenceType\n}\n\nfunction AvatarPresence({ presence, ...props }: AvatarPresenceProps) {\n const { size } = useAvatarContext()\n const styles = useStyles({ size, presence })\n\n return <View style={styles.presence} {...props} />\n}\n\nAvatarPresence.displayName = 'Avatar.Presence'\n\n// =================================\n// ====== Styles ===================\n// =================================\n\ninterface Styles {\n size?: AvatarSize\n presence?: AvatarPresenceType\n}\n\nconst useStyles = ({ size = 'md', presence = 'offline' }: Styles = {}) => {\n const { colors } = useTheme()\n const PRESENCE_COLOR = {\n online: colors.fillColorInteractionOnlineDefault,\n offline: colors.iconColorDefaultDisabled,\n }\n const presenceDiameter = AVATAR_PRESENCE_PX[size]\n const avatarDiameter = AVATAR_PX[size]\n const groupGap = 1\n\n return StyleSheet.create({\n rootContainer: {\n height: avatarDiameter,\n width: avatarDiameter,\n },\n mask: {\n borderRadius: avatarDiameter,\n overflow: 'hidden',\n width: '100%',\n height: '100%',\n },\n presence: {\n height: presenceDiameter,\n width: presenceDiameter,\n backgroundColor: PRESENCE_COLOR[presence],\n borderColor: colors.fillColorNeutral100Inverted,\n borderWidth: 2,\n borderRadius: presenceDiameter,\n position: 'absolute',\n bottom: -1,\n right: -1,\n },\n groupLoader: {\n position: 'absolute',\n top: 0,\n left: 0,\n borderRadius: avatarDiameter,\n width: avatarDiameter,\n height: avatarDiameter,\n },\n groupColumn: {\n flex: 1,\n gap: groupGap,\n },\n groupRow: {\n flexDirection: 'row',\n flex: 1,\n gap: groupGap,\n },\n halfWidthFullHeight: {\n width: '50%',\n height: '100%',\n },\n fullWidthHalfHeight: {\n width: '100%',\n height: '50%',\n },\n })\n}\n"]}
1	+ {"version":3,"file":"avatar_primitive.js","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react'\nimport { StyleSheet, View, ViewProps } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Image, ImageProps } from '../display/image'\nimport { Spinner } from '../display/spinner'\n\n// =================================\n// ====== Exports ==================\n// =================================\n\nconst Avatar = {\n Root: AvatarRoot,\n Image: AvatarImage,\n Presence: AvatarPresence,\n Group: AvatarGroup,\n GroupLoader: AvatarGroupLoader,\n Mask: AvatarMask,\n} as const\n\ntype AvatarComponents = {\n Root: React.FC<AvatarRootProps>\n Image: React.FC<AvatarImageProps>\n Presence: React.FC<AvatarPresenceProps>\n Group: React.FC<AvatarGroupProps>\n GroupLoader: React.FC<Record<string, never>>\n Mask: React.FC<AvatarMaskProps>\n}\n\nexport default Avatar as AvatarComponents\nexport type {\n AvatarImageProps,\n AvatarPresenceProps,\n AvatarGroupProps,\n AvatarMaskProps,\n AvatarRootProps,\n}\n\n// =================================\n// ====== Constants & Types ========\n// =================================\n\nconst AVATAR_SIZES = {\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n} as const\n\nconst AVATAR_PRESENCE_TYPES = {\n online: 'online',\n offline: 'offline',\n} as const\n\n// Progrmatically creates type unions\ntype AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES]\ntype AvatarPresenceType = (typeof AVATAR_PRESENCE_TYPES)[keyof typeof AVATAR_PRESENCE_TYPES]\n\nconst AVATAR_PX: Record<AvatarSize, number> = {\n [AVATAR_SIZES.sm]: 24,\n [AVATAR_SIZES.md]: 32,\n [AVATAR_SIZES.lg]: 40,\n}\n\nconst AVATAR_PRESENCE_PX: Record<AvatarSize, number> = {\n [AVATAR_SIZES.sm]: 10,\n [AVATAR_SIZES.md]: 12,\n [AVATAR_SIZES.lg]: 14,\n}\n\n// =================================\n// ====== Context ==================\n// =================================\n\ninterface AvatarContextType {\n size: AvatarSize\n allImagesLoaded: boolean\n setAllImagesLoaded: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nconst AvatarContext = createContext<AvatarContextType \| null>(null)\n\nfunction useAvatarContext() {\n const context = useContext(AvatarContext)\n if (!context) {\n throw new Error('Avatar components must be used within Avatar.Root')\n }\n return context\n}\n\n// =================================\n// ====== AvatarRoot ===============\n// =================================\n\ninterface AvatarRootProps {\n children: React.ReactNode\n size?: AvatarSize\n}\n\nfunction AvatarRoot({ children, size = 'md' }: AvatarRootProps) {\n const [allImagesLoaded, setAllImagesLoaded] = useState(false)\n const styles = useStyles({ size })\n\n return (\n <AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded }}>\n <View style={styles.rootContainer}>{children}</View>\n </AvatarContext.Provider>\n )\n}\n\nAvatarRoot.displayName = 'Avatar.Root'\n\n// =================================\n// ====== AvatarMask ===============\n// =================================\n\ntype AvatarMaskProps = ViewProps\n\nfunction AvatarMask({ children, ...props }: AvatarMaskProps) {\n const styles = useStyles()\n\n return (\n <View style={styles.mask} {...props}>\n {children}\n </View>\n )\n}\n\nAvatarMask.displayName = 'Avatar.Mask'\n\n// =================================\n// ====== AvatarImage ============\n// =================================\n\ninterface AvatarImageProps extends Omit<ImageProps, 'source' \| 'alt'> {\n sourceUri: string\n}\n\nfunction AvatarImage({ sourceUri, ...props }: AvatarImageProps) {\n const { size } = useAvatarContext()\n\n return <Image source={{ uri: sourceUri }} loaderSize={AVATAR_PX[size]} {...props} alt=\"\" />\n}\n\nAvatarImage.displayName = 'Avatar.Image'\n\ninterface AvatarGroupImageProps {\n sourceUri: string\n style?: ImageProps['wrapperStyle']\n onLoad?: () => void\n}\n\nfunction AvatarGroupImage({ sourceUri, style, onLoad }: AvatarGroupImageProps) {\n return (\n <Image\n source={{ uri: sourceUri }}\n loadingEnabled={false}\n wrapperStyle={style}\n onLoad={onLoad}\n alt=\"\"\n />\n )\n}\n\n// =================================\n// ====== AvatarGroup ============\n// =================================\n\ninterface AvatarGroupProps {\n sourceUris: string[]\n}\n\nfunction AvatarGroup({ sourceUris }: AvatarGroupProps) {\n const styles = useStyles()\n const { setAllImagesLoaded } = useAvatarContext()\n const [loadingStatus, setLoadingStatus] = useState({\n 0: false,\n 1: false,\n 2: false,\n 3: false,\n })\n const displayUris = sourceUris.slice(0, 4)\n const hasDisplayUris = displayUris.length > 0\n\n const handleImageLoaded = index => {\n setLoadingStatus(prev => ({\n ...prev,\n [index]: true,\n }))\n }\n\n useEffect(() => {\n const allImagesLoaded =\n hasDisplayUris && displayUris.every((_, index) => loadingStatus[index] === true)\n\n setAllImagesLoaded(allImagesLoaded)\n }, [displayUris, hasDisplayUris, loadingStatus, setAllImagesLoaded])\n\n if (!hasDisplayUris) {\n return null\n }\n\n if (displayUris.length === 1) {\n return <AvatarGroupImage sourceUri={displayUris[0]} onLoad={() => handleImageLoaded(0)} />\n }\n\n if (displayUris.length === 2) {\n return (\n <View style={styles.groupRow}>\n <AvatarGroupImage\n sourceUri={displayUris[0]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(0)}\n />\n <AvatarGroupImage\n sourceUri={displayUris[1]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(1)}\n />\n </View>\n )\n }\n\n if (displayUris.length === 3) {\n return (\n <View style={styles.groupColumn}>\n <View style={styles.groupRow}>\n <AvatarGroupImage\n sourceUri={displayUris[0]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(0)}\n />\n <View style={styles.groupColumn}>\n <AvatarGroupImage\n sourceUri={displayUris[1]}\n style={styles.fullWidthHalfHeight}\n onLoad={() => handleImageLoaded(1)}\n />\n <AvatarGroupImage\n sourceUri={displayUris[2]}\n style={styles.fullWidthHalfHeight}\n onLoad={() => handleImageLoaded(2)}\n />\n </View>\n </View>\n </View>\n )\n }\n\n return (\n <View style={styles.groupColumn}>\n <View style={styles.groupRow}>\n <AvatarGroupImage\n sourceUri={displayUris[0]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(0)}\n />\n <AvatarGroupImage\n sourceUri={displayUris[1]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(1)}\n />\n </View>\n <View style={styles.groupRow}>\n <AvatarGroupImage\n sourceUri={displayUris[2]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(2)}\n />\n <AvatarGroupImage\n sourceUri={displayUris[3]}\n style={styles.halfWidthFullHeight}\n onLoad={() => handleImageLoaded(3)}\n />\n </View>\n </View>\n )\n}\n\nAvatarGroup.displayName = 'Avatar.Group'\n\n// =================================\n// ====== AvatarGroupLoader =========\n// =================================\n\nfunction AvatarGroupLoader() {\n const { size, allImagesLoaded } = useAvatarContext()\n const styles = useStyles({ size })\n\n if (allImagesLoaded) return null\n\n return (\n <View style={styles.groupLoader}>\n <Spinner size={AVATAR_PX[size]} />\n </View>\n )\n}\n\nAvatarGroupLoader.displayName = 'Avatar.GroupLoader'\n\n// =================================\n// ====== AvatarPresence =========\n// =================================\n\ninterface AvatarPresenceProps extends ViewProps {\n presence: AvatarPresenceType\n}\n\nfunction AvatarPresence({ presence, ...props }: AvatarPresenceProps) {\n const { size } = useAvatarContext()\n const styles = useStyles({ size, presence })\n\n return <View style={styles.presence} {...props} />\n}\n\nAvatarPresence.displayName = 'Avatar.Presence'\n\n// =================================\n// ====== Styles ===================\n// =================================\n\ninterface Styles {\n size?: AvatarSize\n presence?: AvatarPresenceType\n}\n\nconst useStyles = ({ size = 'md', presence = 'offline' }: Styles = {}) => {\n const { colors } = useTheme()\n const PRESENCE_COLOR = {\n online: colors.fillColorInteractionOnlineDefault,\n offline: colors.iconColorDefaultDisabled,\n }\n const presenceDiameter = AVATAR_PRESENCE_PX[size]\n const avatarDiameter = AVATAR_PX[size]\n const groupGap = 1\n\n return StyleSheet.create({\n rootContainer: {\n height: avatarDiameter,\n width: avatarDiameter,\n },\n mask: {\n borderRadius: avatarDiameter,\n overflow: 'hidden',\n width: '100%',\n height: '100%',\n },\n presence: {\n height: presenceDiameter,\n width: presenceDiameter,\n backgroundColor: PRESENCE_COLOR[presence],\n borderColor: colors.fillColorNeutral100Inverted,\n borderWidth: 2,\n borderRadius: presenceDiameter,\n position: 'absolute',\n bottom: -1,\n right: -1,\n },\n groupLoader: {\n position: 'absolute',\n top: 0,\n left: 0,\n borderRadius: avatarDiameter,\n width: avatarDiameter,\n height: avatarDiameter,\n },\n groupColumn: {\n flex: 1,\n gap: groupGap,\n },\n groupRow: {\n flexDirection: 'row',\n flex: 1,\n gap: groupGap,\n },\n halfWidthFullHeight: {\n width: '50%',\n height: '100%',\n },\n fullWidthHalfHeight: {\n width: '100%',\n height: '50%',\n },\n })\n}\n"]}

package/build/components/primitive/banner_primitive.js CHANGED Viewed

@@ -69,7 +69,7 @@ function BannerStatusIcon({ iconName }) {
         success: 'general.check',
         warning: 'general.exclamationTriangle',
     };
-    return (<Icon name={iconName || iconNameMap[appearance]} style={styles.icon} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>);
+    return (<Icon name={iconName || iconNameMap[appearance]} style={styles.icon} maxFontSizeMultiplier={1}/>);
 }
 BannerStatusIcon.displayName = 'Banner.StatusIcon';
 function BannerHeading({ children }) {
@@ -99,7 +99,7 @@ BannerLink.displayName = 'Banner.Link';
 const useStyles = ({ appearance = 'neutral' } = {}) => {
     const statusColorMap = useStatusColorAppearanceMap();
     const fontScale = useFontScale();
-    const LINE_HEIGHT_OFFSET = 1;
+    const LINE_HEIGHT_OFFSET = fontScale > 1 ? 0 : 1;
     return StyleSheet.create({
         staticLayout: {
             flexDirection: 'row',
@@ -116,7 +116,7 @@ const useStyles = ({ appearance = 'neutral' } = {}) => {
         icon: {
             color: statusColorMap[appearance].icon,
             fontSize: tokens.fontSizeMd,
-            marginTop: space(0.5) - LINE_HEIGHT_OFFSET * fontScale,
+            marginTop: (space(0.5) - LINE_HEIGHT_OFFSET) * fontScale,
         },
         heading: {
             color: statusColorMap[appearance].text,

package/build/components/primitive/banner_primitive.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner_primitive.js","sourceRoot":"","sources":["../../../src/components/primitive/banner_primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, FC, ReactNode, useContext } from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport {\n useStatusColorAppearanceMap,\n type StatusAppearanceUnion,\n} from '../display/utils/status_colors'\nimport {\n MAX_FONT_SIZE_MULTIPLIER,\n platformFontWeightMedium,\n platformPressedOpacityStyle,\n space,\n} from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { useCreateAndroidRippleColor, useFontScale } from '../../hooks'\nimport { Icon } from '../display/icon'\nimport { Heading } from '../display/heading'\nimport { Text } from '../display/text'\nimport { TextInlineButton } from '../display/text_inline_button'\n\n// ========================================\n// ====== Exports =========================\n// ========================================\n\nconst Banner = {\n Root: BannerRoot,\n StaticLayout: BannerStaticLayout,\n CollapsibleLayout: BannerCollapsibleLayout,\n Content: BannerContent,\n StatusIcon: BannerStatusIcon,\n Heading: BannerHeading,\n Text: BannerText,\n Link: BannerLink,\n} as const\n\ntype BannerComponents = {\n Root: FC<BannerRootProps>\n StaticLayout: FC<BannerStaticLayoutProps>\n CollapsibleLayout: FC<BannerCollapsibleLayoutProps>\n Content: FC<BannerContentProps>\n StatusIcon: FC<BannerStatusIconProps>\n Heading: FC<BannerHeadingProps>\n Text: FC<BannerTextProps>\n Link: FC<BannerLinkProps>\n}\n\nexport default Banner as BannerComponents\nexport type {\n BannerRootProps,\n BannerStaticLayoutProps,\n BannerCollapsibleLayoutProps,\n BannerContentProps,\n BannerStatusIconProps,\n BannerHeadingProps,\n BannerTextProps,\n BannerLinkProps,\n}\n\n// ========================================\n// ====== Context =========================\n// ========================================\n\ninterface BannerContextType {\n appearance?: StatusAppearanceUnion\n}\n\nconst BannerContext = createContext<BannerContextType \| null>(null)\n\nfunction useBannerContext() {\n const context = useContext(BannerContext)\n if (!context) {\n throw new Error('Banner components must be used within Banner.Root')\n }\n return context\n}\n\n// ========================================\n// ====== BannerRoot ======================\n// ========================================\n\ninterface BannerRootProps {\n children: ReactNode\n appearance?: StatusAppearanceUnion\n}\n\nfunction BannerRoot({ children, appearance = 'neutral' }: BannerRootProps) {\n return <BannerContext.Provider value={{ appearance }}>{children}</BannerContext.Provider>\n}\n\nBannerRoot.displayName = 'Banner.Root'\n\n// ========================================\n// ====== BannerStaticLayout ==============\n// ========================================\n\ninterface BannerStaticLayoutProps {\n children: ReactNode\n}\n\nfunction BannerStaticLayout({ children }: BannerStaticLayoutProps) {\n const { appearance } = useBannerContext()\n const styles = useStyles({ appearance })\n\n return <View style={styles.staticLayout}>{children}</View>\n}\n\nBannerStaticLayout.displayName = 'Banner.StaticLayout'\n\n// ========================================\n// ====== BannerCollapsibleLayout =========\n// ========================================\n\ninterface BannerCollapsibleLayoutProps {\n children: ReactNode\n expanded?: boolean\n onPress?: () => void\n}\n\nfunction BannerCollapsibleLayout({ children, expanded, onPress }: BannerCollapsibleLayoutProps) {\n const { appearance = 'neutral' } = useBannerContext()\n const styles = useStyles({ appearance })\n const iconName = expanded ? 'general.upCaret' : 'general.downCaret'\n const statusColorMap = useStatusColorAppearanceMap()\n const androidRippleColor = useCreateAndroidRippleColor({\n color: statusColorMap[appearance].background,\n })\n\n return (\n <Pressable\n onPress={onPress}\n style={({ pressed }) => [styles.staticLayout, pressed && platformPressedOpacityStyle]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n accessibilityState={{ expanded }}\n accessibilityRole=\"button\"\n >\n {children}\n <Icon name={iconName} style={styles.icon} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER} />\n </Pressable>\n )\n}\n\nBannerCollapsibleLayout.displayName = 'Banner.CollapsibleLayout'\n\n// ========================================\n// ====== BannerContent ===================\n// ========================================\n\ninterface BannerContentProps {\n children: ReactNode\n}\n\nfunction BannerContent({ children }: BannerContentProps) {\n const styles = useStyles()\n\n return <View style={styles.content}>{children}</View>\n}\n\nBannerContent.displayName = 'Banner.Content'\n\n// ========================================\n// ====== BannerStatusIcon ================\n// ========================================\n\ninterface BannerStatusIconProps {\n iconName?: string\n}\n\nfunction BannerStatusIcon({ iconName }: BannerStatusIconProps) {\n const { appearance = 'neutral' } = useBannerContext()\n const styles = useStyles({ appearance })\n\n const iconNameMap = {\n error: 'general.exclamationTriangle',\n info: 'general.outlinedInfoCircle',\n neutral: 'general.outlinedInfoCircle',\n success: 'general.check',\n warning: 'general.exclamationTriangle',\n } as const\n\n return (\n <Icon\n name={iconName \|\| iconNameMap[appearance]}\n style={styles.icon}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n )\n}\n\nBannerStatusIcon.displayName = 'Banner.StatusIcon'\n\n// ========================================\n// ====== BannerHeading ===================\n// ========================================\n\ninterface BannerHeadingProps {\n children: ReactNode\n}\n\nfunction BannerHeading({ children }: BannerHeadingProps) {\n const { appearance = 'neutral' } = useBannerContext()\n const styles = useStyles({ appearance })\n\n return (\n <Heading variant=\"h3\" style={styles.heading}>\n {children}\n </Heading>\n )\n}\n\nBannerHeading.displayName = 'Banner.Heading'\n\n// ========================================\n// ====== BannerText ======================\n// ========================================\n\ninterface BannerTextProps {\n children: ReactNode\n}\n\nfunction BannerText({ children }: BannerTextProps) {\n const { appearance = 'neutral' } = useBannerContext()\n const styles = useStyles({ appearance })\n\n return (\n <Text variant=\"tertiary\" style={styles.text}>\n {children}\n </Text>\n )\n}\n\nBannerText.displayName = 'Banner.Text'\n\n// ========================================\n// ====== BannerLink ======================\n// ========================================\n\ninterface BannerLinkProps {\n children: ReactNode\n onPress?: () => void\n}\n\nfunction BannerLink({ children, onPress }: BannerLinkProps) {\n const { appearance = 'neutral' } = useBannerContext()\n const styles = useStyles({ appearance })\n\n return (\n <TextInlineButton variant=\"tertiary\" style={styles.text} onPress={onPress}>\n {children}\n </TextInlineButton>\n )\n}\n\nBannerLink.displayName = 'Banner.Link'\n\n// ========================================\n// ====== Styles ==========================\n// ========================================\n\ninterface Styles {\n appearance?: StatusAppearanceUnion\n}\n\nconst useStyles = ({ appearance = 'neutral' }: Styles = {}) => {\n const statusColorMap = useStatusColorAppearanceMap()\n const fontScale = useFontScale()\n const LINE_HEIGHT_OFFSET = 1\n\n return StyleSheet.create({\n staticLayout: {\n flexDirection: 'row',\n backgroundColor: statusColorMap[appearance].background,\n padding: space(1.5),\n gap: space(1),\n borderRadius: tokens.borderRadiusMd,\n flex: 1,\n },\n content: {\n gap: space(0.5),\n flex: 1,\n },\n icon: {\n color: statusColorMap[appearance].icon,\n fontSize: tokens.fontSizeMd,\n marginTop: space(0.5) - LINE_HEIGHT_OFFSET * fontScale,\n },\n heading: {\n color: statusColorMap[appearance].text,\n fontWeight: platformFontWeightMedium,\n fontSize: tokens.fontSizeMd,\n },\n text: {\n color: statusColorMap[appearance].text,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"banner_primitive.js","sourceRoot":"","sources":["../../../src/components/primitive/banner_primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, FC, ReactNode, useContext } from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport {\n useStatusColorAppearanceMap,\n type StatusAppearanceUnion,\n} from '../display/utils/status_colors'\nimport {\n MAX_FONT_SIZE_MULTIPLIER,\n platformFontWeightMedium,\n platformPressedOpacityStyle,\n space,\n} from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { useCreateAndroidRippleColor, useFontScale } from '../../hooks'\nimport { Icon } from '../display/icon'\nimport { Heading } from '../display/heading'\nimport { Text } from '../display/text'\nimport { TextInlineButton } from '../display/text_inline_button'\n\n// ========================================\n// ====== Exports =========================\n// ========================================\n\nconst Banner = {\n Root: BannerRoot,\n StaticLayout: BannerStaticLayout,\n CollapsibleLayout: BannerCollapsibleLayout,\n Content: BannerContent,\n StatusIcon: BannerStatusIcon,\n Heading: BannerHeading,\n Text: BannerText,\n Link: BannerLink,\n} as const\n\ntype BannerComponents = {\n Root: FC<BannerRootProps>\n StaticLayout: FC<BannerStaticLayoutProps>\n CollapsibleLayout: FC<BannerCollapsibleLayoutProps>\n Content: FC<BannerContentProps>\n StatusIcon: FC<BannerStatusIconProps>\n Heading: FC<BannerHeadingProps>\n Text: FC<BannerTextProps>\n Link: FC<BannerLinkProps>\n}\n\nexport default Banner as BannerComponents\nexport type {\n BannerRootProps,\n BannerStaticLayoutProps,\n BannerCollapsibleLayoutProps,\n BannerContentProps,\n BannerStatusIconProps,\n BannerHeadingProps,\n BannerTextProps,\n BannerLinkProps,\n}\n\n// ========================================\n// ====== Context =========================\n// ========================================\n\ninterface BannerContextType {\n appearance?: StatusAppearanceUnion\n}\n\nconst BannerContext = createContext<BannerContextType \| null>(null)\n\nfunction useBannerContext() {\n const context = useContext(BannerContext)\n if (!context) {\n throw new Error('Banner components must be used within Banner.Root')\n }\n return context\n}\n\n// ========================================\n// ====== BannerRoot ======================\n// ========================================\n\ninterface BannerRootProps {\n children: ReactNode\n appearance?: StatusAppearanceUnion\n}\n\nfunction BannerRoot({ children, appearance = 'neutral' }: BannerRootProps) {\n return <BannerContext.Provider value={{ appearance }}>{children}</BannerContext.Provider>\n}\n\nBannerRoot.displayName = 'Banner.Root'\n\n// ========================================\n// ====== BannerStaticLayout ==============\n// ========================================\n\ninterface BannerStaticLayoutProps {\n children: ReactNode\n}\n\nfunction BannerStaticLayout({ children }: BannerStaticLayoutProps) {\n const { appearance } = useBannerContext()\n const styles = useStyles({ appearance })\n\n return <View style={styles.staticLayout}>{children}</View>\n}\n\nBannerStaticLayout.displayName = 'Banner.StaticLayout'\n\n// ========================================\n// ====== BannerCollapsibleLayout =========\n// ========================================\n\ninterface BannerCollapsibleLayoutProps {\n children: ReactNode\n expanded?: boolean\n onPress?: () => void\n}\n\nfunction BannerCollapsibleLayout({ children, expanded, onPress }: BannerCollapsibleLayoutProps) {\n const { appearance = 'neutral' } = useBannerContext()\n const styles = useStyles({ appearance })\n const iconName = expanded ? 'general.upCaret' : 'general.downCaret'\n const statusColorMap = useStatusColorAppearanceMap()\n const androidRippleColor = useCreateAndroidRippleColor({\n color: statusColorMap[appearance].background,\n })\n\n return (\n <Pressable\n onPress={onPress}\n style={({ pressed }) => [styles.staticLayout, pressed && platformPressedOpacityStyle]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n accessibilityState={{ expanded }}\n accessibilityRole=\"button\"\n >\n {children}\n <Icon name={iconName} style={styles.icon} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER} />\n </Pressable>\n )\n}\n\nBannerCollapsibleLayout.displayName = 'Banner.CollapsibleLayout'\n\n// ========================================\n// ====== BannerContent ===================\n// ========================================\n\ninterface BannerContentProps {\n children: ReactNode\n}\n\nfunction BannerContent({ children }: BannerContentProps) {\n const styles = useStyles()\n\n return <View style={styles.content}>{children}</View>\n}\n\nBannerContent.displayName = 'Banner.Content'\n\n// ========================================\n// ====== BannerStatusIcon ================\n// ========================================\n\ninterface BannerStatusIconProps {\n iconName?: string\n}\n\nfunction BannerStatusIcon({ iconName }: BannerStatusIconProps) {\n const { appearance = 'neutral' } = useBannerContext()\n const styles = useStyles({ appearance })\n\n const iconNameMap = {\n error: 'general.exclamationTriangle',\n info: 'general.outlinedInfoCircle',\n neutral: 'general.outlinedInfoCircle',\n success: 'general.check',\n warning: 'general.exclamationTriangle',\n } as const\n\n return (\n <Icon\n name={iconName \|\| iconNameMap[appearance]}\n style={styles.icon}\n maxFontSizeMultiplier={1}\n />\n )\n}\n\nBannerStatusIcon.displayName = 'Banner.StatusIcon'\n\n// ========================================\n// ====== BannerHeading ===================\n// ========================================\n\ninterface BannerHeadingProps {\n children: ReactNode\n}\n\nfunction BannerHeading({ children }: BannerHeadingProps) {\n const { appearance = 'neutral' } = useBannerContext()\n const styles = useStyles({ appearance })\n\n return (\n <Heading variant=\"h3\" style={styles.heading}>\n {children}\n </Heading>\n )\n}\n\nBannerHeading.displayName = 'Banner.Heading'\n\n// ========================================\n// ====== BannerText ======================\n// ========================================\n\ninterface BannerTextProps {\n children: ReactNode\n}\n\nfunction BannerText({ children }: BannerTextProps) {\n const { appearance = 'neutral' } = useBannerContext()\n const styles = useStyles({ appearance })\n\n return (\n <Text variant=\"tertiary\" style={styles.text}>\n {children}\n </Text>\n )\n}\n\nBannerText.displayName = 'Banner.Text'\n\n// ========================================\n// ====== BannerLink ======================\n// ========================================\n\ninterface BannerLinkProps {\n children: ReactNode\n onPress?: () => void\n}\n\nfunction BannerLink({ children, onPress }: BannerLinkProps) {\n const { appearance = 'neutral' } = useBannerContext()\n const styles = useStyles({ appearance })\n\n return (\n <TextInlineButton variant=\"tertiary\" style={styles.text} onPress={onPress}>\n {children}\n </TextInlineButton>\n )\n}\n\nBannerLink.displayName = 'Banner.Link'\n\n// ========================================\n// ====== Styles ==========================\n// ========================================\n\ninterface Styles {\n appearance?: StatusAppearanceUnion\n}\n\nconst useStyles = ({ appearance = 'neutral' }: Styles = {}) => {\n const statusColorMap = useStatusColorAppearanceMap()\n const fontScale = useFontScale()\n const LINE_HEIGHT_OFFSET = fontScale > 1 ? 0 : 1\n\n return StyleSheet.create({\n staticLayout: {\n flexDirection: 'row',\n backgroundColor: statusColorMap[appearance].background,\n padding: space(1.5),\n gap: space(1),\n borderRadius: tokens.borderRadiusMd,\n flex: 1,\n },\n content: {\n gap: space(0.5),\n flex: 1,\n },\n icon: {\n color: statusColorMap[appearance].icon,\n fontSize: tokens.fontSizeMd,\n marginTop: (space(0.5) - LINE_HEIGHT_OFFSET) * fontScale,\n },\n heading: {\n color: statusColorMap[appearance].text,\n fontWeight: platformFontWeightMedium,\n fontSize: tokens.fontSizeMd,\n },\n text: {\n color: statusColorMap[appearance].text,\n },\n })\n}\n"]}

package/build/screens/conversation_details_screen.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation_details_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAQN,MAAM,OAAO,CAAA;~~AAqDd~~,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC;IAC7D,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,yBAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,8BAA8B,~~qBA8HlF~~"}
1	+ {"version":3,"file":"conversation_details_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAQN,MAAM,OAAO,CAAA;AAsDd,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC;IAC7D,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,yBAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,8BAA8B,qBA+JlF"}

package/build/screens/conversation_details_screen.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useEffect, useState, useRef, } from 'react';
 import { StyleSheet, TextInput, View, Pressable, } from 'react-native';
-import { Heading, Icon, Person, Switch, Text } from '../components';
+import { ChildNotice, Heading, Icon, Person, Switch, Text } from '../components';
 import { useSuspenseGet, useTheme } from '../hooks';
 import { useConversation, useConversationMute, useConversationUpdate, } from '../hooks/use_conversation';
 import { isDefined } from '../types';
@@ -39,9 +39,14 @@ export function ConversationDetailsScreen({ route }) {
             },
         },
     });
+    const childMembers = members.filter(member => member.child);
+    const hasChildren = childMembers.length > 0;
+    const isLeader = true; // TODO: replace with value from the server
     const memberItems = members.map(data => ({
-        type: SectionTypes.members,
+        type: data.child ? SectionTypes.hidden : SectionTypes.members,
         data,
+        sectionOuterStyle: styles.memberSectionOuter,
+        sectionInnerStyle: styles.memberSectionInner,
     }));
     const HeaderRight = useCallback(() => {
         return (<HeaderRightButton onPress={() => {
@@ -66,7 +71,7 @@ export function ConversationDetailsScreen({ route }) {
         {
             type: SectionTypes.header,
             data: { title: 'Settings' },
-            sectionStyle: styles.addBottomBorder,
+            sectionInnerStyle: styles.addBottomBorder,
         },
         {
             type: SectionTypes.setting,
@@ -79,6 +84,13 @@ export function ConversationDetailsScreen({ route }) {
             type: SectionTypes.header,
             data: { title: 'Members' },
         },
+        {
+            type: hasChildren && isLeader ? SectionTypes.view : SectionTypes.hidden,
+            data: {
+                children: <ChildNotice childMembers={childMembers}/>,
+            },
+            sectionOuterStyle: styles.childNoticeSectionOuter,
+        },
         ...memberItems,
     ].filter(item => item.type !== SectionTypes.hidden);
     const headerIndices = listData
@@ -91,19 +103,19 @@ export function ConversationDetailsScreen({ route }) {
             ];
             switch (item.type) {
                 case SectionTypes.header:
-                    return (<ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+                    return (<ListSection isStart={isStart} isEnd={isEnd} outerStyle={item?.sectionOuterStyle} innerStyle={item?.sectionInnerStyle}>
                 <SectionHeading title={item.data.title}/>
               </ListSection>);
                 case SectionTypes.members:
-                    return (<ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+                    return (<ListSection isStart={isStart} isEnd={isEnd} outerStyle={item?.sectionOuterStyle} innerStyle={item?.sectionInnerStyle}>
                 <Person person={{ ...item.data }}/>
               </ListSection>);
                 case SectionTypes.setting:
-                    return (<ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+                    return (<ListSection isStart={isStart} isEnd={isEnd} outerStyle={item?.sectionOuterStyle} innerStyle={item?.sectionInnerStyle}>
                 <SettingRow {...item.data}/>
               </ListSection>);
                 case SectionTypes.view:
-                    return (<ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+                    return (<ListSection isStart={isStart} isEnd={isEnd} outerStyle={item?.sectionOuterStyle} innerStyle={item?.sectionInnerStyle}>
                 <View {...item.data} style={item.data.style}/>
               </ListSection>);
                 default:
@@ -111,10 +123,10 @@ export function ConversationDetailsScreen({ route }) {
             }
         }}/>);
 }
-function ListSection({ isStart, isEnd, style, children }) {
+function ListSection({ isStart, isEnd, outerStyle, innerStyle, children }) {
     const styles = useStyles({ isStart, isEnd });
-    return (<View style={styles.sectionOuter}>
-      <View style={[styles.sectionInner, style]}>{children}</View>
+    return (<View style={[styles.sectionOuter, outerStyle]}>
+      <View style={[styles.sectionInner, innerStyle]}>{children}</View>
     </View>);
 }
 function SectionHeading({ title }) {
@@ -228,21 +240,15 @@ const useStyles = ({ isStart, isEnd } = {}) => {
         settingRowText: {
             lineHeight: 20,
         },
-        member: {
-            flexDirection: 'row',
-            gap: space(1),
-        },
-        memberBody: {
-            gap: space(0.5),
+        childNoticeSectionOuter: {
+            paddingTop: 0,
         },
-        memberName: {
-            lineHeight: space(2),
+        memberSectionOuter: {
+            paddingTop: 6,
         },
-        memberBadges: {
-            flexDirection: 'row',
-            gap: space(1),
+        memberSectionInner: {
+            paddingBottom: 6,
         },
-        memberBadge: {},
     });
 };
 //# sourceMappingURL=conversation_details_screen.js.map

package/build/screens/conversation_details_screen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation_details_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React, {\n useCallback,\n useEffect,\n useState,\n type SetStateAction,\n type Dispatch,\n type ReactNode,\n useRef,\n} from 'react'\nimport {\n StyleSheet,\n TextInput,\n View,\n type TextStyle,\n type ViewStyle,\n type ViewProps,\n Pressable,\n} from 'react-native'\nimport { Heading, Icon, Person, Switch, Text } from '../components'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport {\n useConversation,\n useConversationMute,\n useConversationUpdate,\n} from '../hooks/use_conversation'\nimport { MemberResource, isDefined } from '../types'\nimport { HeaderRightButton } from '../navigation/header'\nimport { FlashList } from '@shopify/flash-list'\nimport { space } from '../utils'\nimport { tokens } from '../vendor/tapestry/tokens'\n\n// =========================================\n// ====== Factory Constants & Types ========\n// =========================================\n\nenum SectionTypes {\n header,\n hidden,\n members,\n setting,\n view,\n}\n\ntype SectionListData = Array<\n \| DataItem<{ title: string }, SectionTypes.header>\n \| DataItem<MemberResource, SectionTypes.members>\n \| DataItem<ViewProps, SectionTypes.view>\n \| DataItem<{ title: string }, SectionTypes.setting>\n \| DataItem<any, SectionTypes.hidden>\n>\n\ninterface DataItem<T, TName extends SectionTypes> {\n type: TName\n data: T\n sectionStyle?: ViewStyle\n}\n\n// =================================\n// ====== Components ===============\n// =================================\n\nexport type ConversationDetailsScreenProps = StaticScreenProps<{\n conversation_id: number\n}>\n\nexport function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {\n const navigation = useNavigation()\n const styles = useStyles()\n\n const { data: conversation } = useConversation(route.params)\n const [title, setTitle] = useState(conversation.title)\n const { muted, setMuted } = useConversationMute(route.params)\n const { mutate: saveTitle } = useConversationUpdate(route.params)\n\n const trimmedTitle = title.trim()\n const emptyTitle = trimmedTitle === '' \|\| title === null\n\n const canUpdate = conversation.memberAbility?.canUpdate \|\| false\n const { data: members } = useSuspenseGet<MemberResource[]>({\n url: `/me/conversations/${route.params.conversation_id}/members`,\n data: {\n include: ['person'],\n fields: {\n Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],\n },\n },\n })\n\n const memberItems = members.map(data => ({\n type: SectionTypes.members,\n data,\n }))\n\n const HeaderRight = useCallback(() => {\n return (\n <HeaderRightButton\n onPress={() => {\n saveTitle({ title: trimmedTitle \|\| conversation.title })\n navigation.goBack()\n }}\n >\n Done\n </HeaderRightButton>\n )\n }, [conversation.title, navigation, saveTitle, trimmedTitle])\n\n useEffect(() => {\n navigation.setOptions({\n headerRight: HeaderRight,\n })\n }, [HeaderRight, navigation])\n\n const listData = [\n {\n type: SectionTypes.view,\n data: {\n children: (\n <TitleInput\n canUpdate={canUpdate}\n title={title}\n setTitle={setTitle}\n isEmpty={emptyTitle}\n />\n ),\n },\n },\n {\n type: SectionTypes.header,\n data: { title: 'Settings' },\n sectionStyle: styles.addBottomBorder,\n },\n {\n type: SectionTypes.setting,\n data: {\n title: 'Mute',\n rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,\n },\n },\n {\n type: SectionTypes.header,\n data: { title: 'Members' },\n },\n ...memberItems,\n ].filter(item => item.type !== SectionTypes.hidden)\n\n const headerIndices = listData\n .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))\n .filter(isDefined)\n\n return (\n <FlashList\n data={listData as SectionListData}\n estimatedItemSize={52}\n contentContainerStyle={styles.contentContainer}\n renderItem={({ item, index }) => {\n const [isStart, isEnd] = [\n index === 0 \|\| headerIndices.includes(index),\n index === listData.length - 1 \|\| headerIndices.includes(index + 1),\n ]\n\n switch (item.type) {\n case SectionTypes.header:\n return (\n <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n <SectionHeading title={item.data.title} />\n </ListSection>\n )\n case SectionTypes.members:\n return (\n <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n <Person person={{ ...item.data }} />\n </ListSection>\n )\n case SectionTypes.setting:\n return (\n <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n <SettingRow {...item.data} />\n </ListSection>\n )\n case SectionTypes.view:\n return (\n <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>\n <View {...item.data} style={item.data.style} />\n </ListSection>\n )\n default:\n return null\n }\n }}\n />\n )\n}\n\ninterface ListSectionProps {\n isStart?: boolean\n isEnd?: boolean\n style?: ViewStyle\n children: ReactNode\n}\n\nfunction ListSection({ isStart, isEnd, style, children }: ListSectionProps) {\n const styles = useStyles({ isStart, isEnd })\n\n return (\n <View style={styles.sectionOuter}>\n <View style={[styles.sectionInner, style]}>{children}</View>\n </View>\n )\n}\n\ninterface SectionHeadingProps {\n title: string\n}\n\nfunction SectionHeading({ title }: SectionHeadingProps) {\n const styles = useStyles()\n\n return (\n <View style={styles.header}>\n <Heading variant=\"h3\">{title}</Heading>\n </View>\n )\n}\n\ninterface InputProps {\n canUpdate: boolean\n title: string\n setTitle: Dispatch<SetStateAction<string>>\n style?: ViewStyle\n isEmpty: boolean\n}\n\nfunction TitleInput({ canUpdate, title, setTitle, style, isEmpty }: InputProps) {\n const styles = useStyles()\n const textRef = useRef<TextInput>(null)\n\n const handleFocus = () => {\n if (textRef.current) {\n textRef.current.focus()\n }\n }\n\n return (\n <Pressable style={[styles.titleContainer, style]} onPress={() => handleFocus()}>\n <View style={styles.titleLabelContainer}>\n <Text variant=\"tertiary\" style={styles.titleLabel}>\n Title\n </Text>\n {!canUpdate && <Icon name=\"general.lock\" style={styles.titleDisabledIcon} />}\n </View>\n <TextInput\n ref={textRef}\n editable={canUpdate}\n onChangeText={setTitle}\n style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}\n value={title}\n multiline\n maxLength={255} // Matches Chat Web\n enterKeyHint=\"done\"\n submitBehavior=\"blurAndSubmit\"\n />\n {isEmpty && (\n <Text variant=\"footnote\" style={styles.inputValidationText}>\n A title is required for your conversation.\n </Text>\n )}\n </Pressable>\n )\n}\n\ninterface SettingRowProps {\n title: string\n style?: ViewStyle\n rightItem?: ReactNode\n titleStyle?: TextStyle\n subtitle?: string\n rightItemStyle?: ViewStyle\n}\n\nfunction SettingRow({\n title,\n style,\n titleStyle = {},\n subtitle,\n rightItem,\n rightItemStyle = {},\n}: SettingRowProps) {\n const styles = useStyles()\n\n return (\n <View style={[styles.settingRow, style]}>\n <View style={styles.settingRowContent}>\n <Text variant=\"plain\" style={[styles.settingRowText, titleStyle]}>\n {title}\n </Text>\n {Boolean(subtitle) && <Text variant=\"footnote\">{subtitle}</Text>}\n </View>\n {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n contentContainer: {\n backgroundColor: colors.fillColorNeutral080,\n padding: space(2),\n },\n sectionOuter: {\n paddingTop: space(1),\n paddingLeft: space(2),\n backgroundColor: colors.fillColorNeutral100Inverted,\n borderTopLeftRadius: isStart ? space(1) : 0,\n borderTopRightRadius: isStart ? space(1) : 0,\n borderBottomLeftRadius: isEnd ? space(1) : 0,\n borderBottomRightRadius: isEnd ? space(1) : 0,\n marginBottom: isEnd ? space(2) : 0,\n },\n sectionInner: {\n borderBottomWidth: 0,\n borderBottomColor: colors.borderColorDefaultBase,\n paddingRight: space(2),\n paddingBottom: space(1),\n },\n addBottomBorder: {\n borderBottomWidth: isEnd ? 0 : 1,\n },\n titleContainer: {\n gap: 4,\n },\n titleLabelContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n titleLabel: {\n color: colors.textColorDefaultSecondary,\n },\n titleDisabledIcon: {\n color: colors.iconColorDefaultSecondary,\n },\n titleInput: {\n color: colors.textColorDefaultPrimary,\n fontSize: tokens.fontSizeMd,\n },\n titleInputDisabled: {\n color: colors.textColorDefaultSecondary,\n },\n inputValidationText: {\n color: colors.statusErrorText,\n paddingTop: 8,\n borderTopWidth: 1,\n borderColor: colors.borderColorStatusError,\n },\n header: {\n paddingVertical: space(1.5),\n },\n settingRow: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n gap: space(1),\n },\n settingRowContent: {\n flex: 1,\n },\n settingRowText: {\n lineHeight: 20,\n },\n member: {\n flexDirection: 'row',\n gap: space(1),\n },\n memberBody: {\n gap: space(0.5),\n },\n memberName: {\n lineHeight: space(2),\n },\n memberBadges: {\n flexDirection: 'row',\n gap: space(1),\n },\n memberBadge: {},\n })\n}\n"]}
1	+ {"version":3,"file":"conversation_details_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React, {\n useCallback,\n useEffect,\n useState,\n type SetStateAction,\n type Dispatch,\n type ReactNode,\n useRef,\n} from 'react'\nimport {\n StyleSheet,\n TextInput,\n View,\n type TextStyle,\n type ViewStyle,\n type ViewProps,\n Pressable,\n} from 'react-native'\nimport { ChildNotice, Heading, Icon, Person, Switch, Text } from '../components'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport {\n useConversation,\n useConversationMute,\n useConversationUpdate,\n} from '../hooks/use_conversation'\nimport { MemberResource, isDefined } from '../types'\nimport { HeaderRightButton } from '../navigation/header'\nimport { FlashList } from '@shopify/flash-list'\nimport { space } from '../utils'\nimport { tokens } from '../vendor/tapestry/tokens'\n\n// =========================================\n// ====== Factory Constants & Types ========\n// =========================================\n\nenum SectionTypes {\n header,\n hidden,\n members,\n setting,\n view,\n}\n\ntype SectionListData = Array<\n \| DataItem<{ title: string }, SectionTypes.header>\n \| DataItem<MemberResource, SectionTypes.members>\n \| DataItem<ViewProps, SectionTypes.view>\n \| DataItem<{ title: string }, SectionTypes.setting>\n \| DataItem<any, SectionTypes.hidden>\n>\n\ninterface DataItem<T, TName extends SectionTypes> {\n type: TName\n data: T\n sectionOuterStyle?: ViewStyle\n sectionInnerStyle?: ViewStyle\n}\n\n// =================================\n// ====== Components ===============\n// =================================\n\nexport type ConversationDetailsScreenProps = StaticScreenProps<{\n conversation_id: number\n}>\n\nexport function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {\n const navigation = useNavigation()\n const styles = useStyles()\n\n const { data: conversation } = useConversation(route.params)\n const [title, setTitle] = useState(conversation.title)\n const { muted, setMuted } = useConversationMute(route.params)\n const { mutate: saveTitle } = useConversationUpdate(route.params)\n\n const trimmedTitle = title.trim()\n const emptyTitle = trimmedTitle === '' \|\| title === null\n\n const canUpdate = conversation.memberAbility?.canUpdate \|\| false\n const { data: members } = useSuspenseGet<MemberResource[]>({\n url: `/me/conversations/${route.params.conversation_id}/members`,\n data: {\n include: ['person'],\n fields: {\n Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],\n },\n },\n })\n\n const childMembers = members.filter(member => member.child)\n const hasChildren = childMembers.length > 0\n const isLeader = true // TODO: replace with value from the server\n\n const memberItems = members.map(data => ({\n type: data.child ? SectionTypes.hidden : SectionTypes.members,\n data,\n sectionOuterStyle: styles.memberSectionOuter,\n sectionInnerStyle: styles.memberSectionInner,\n }))\n\n const HeaderRight = useCallback(() => {\n return (\n <HeaderRightButton\n onPress={() => {\n saveTitle({ title: trimmedTitle \|\| conversation.title })\n navigation.goBack()\n }}\n >\n Done\n </HeaderRightButton>\n )\n }, [conversation.title, navigation, saveTitle, trimmedTitle])\n\n useEffect(() => {\n navigation.setOptions({\n headerRight: HeaderRight,\n })\n }, [HeaderRight, navigation])\n\n const listData = [\n {\n type: SectionTypes.view,\n data: {\n children: (\n <TitleInput\n canUpdate={canUpdate}\n title={title}\n setTitle={setTitle}\n isEmpty={emptyTitle}\n />\n ),\n },\n },\n {\n type: SectionTypes.header,\n data: { title: 'Settings' },\n sectionInnerStyle: styles.addBottomBorder,\n },\n {\n type: SectionTypes.setting,\n data: {\n title: 'Mute',\n rightItem: <Switch value={muted} onChange={() => setMuted(!muted)} />,\n },\n },\n {\n type: SectionTypes.header,\n data: { title: 'Members' },\n },\n {\n type: hasChildren && isLeader ? SectionTypes.view : SectionTypes.hidden,\n data: {\n children: <ChildNotice childMembers={childMembers} />,\n },\n sectionOuterStyle: styles.childNoticeSectionOuter,\n },\n ...memberItems,\n ].filter(item => item.type !== SectionTypes.hidden)\n\n const headerIndices = listData\n .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))\n .filter(isDefined)\n\n return (\n <FlashList\n data={listData as SectionListData}\n estimatedItemSize={52}\n contentContainerStyle={styles.contentContainer}\n renderItem={({ item, index }) => {\n const [isStart, isEnd] = [\n index === 0 \|\| headerIndices.includes(index),\n index === listData.length - 1 \|\| headerIndices.includes(index + 1),\n ]\n\n switch (item.type) {\n case SectionTypes.header:\n return (\n <ListSection\n isStart={isStart}\n isEnd={isEnd}\n outerStyle={item?.sectionOuterStyle}\n innerStyle={item?.sectionInnerStyle}\n >\n <SectionHeading title={item.data.title} />\n </ListSection>\n )\n case SectionTypes.members:\n return (\n <ListSection\n isStart={isStart}\n isEnd={isEnd}\n outerStyle={item?.sectionOuterStyle}\n innerStyle={item?.sectionInnerStyle}\n >\n <Person person={{ ...item.data }} />\n </ListSection>\n )\n case SectionTypes.setting:\n return (\n <ListSection\n isStart={isStart}\n isEnd={isEnd}\n outerStyle={item?.sectionOuterStyle}\n innerStyle={item?.sectionInnerStyle}\n >\n <SettingRow {...item.data} />\n </ListSection>\n )\n case SectionTypes.view:\n return (\n <ListSection\n isStart={isStart}\n isEnd={isEnd}\n outerStyle={item?.sectionOuterStyle}\n innerStyle={item?.sectionInnerStyle}\n >\n <View {...item.data} style={item.data.style} />\n </ListSection>\n )\n default:\n return null\n }\n }}\n />\n )\n}\n\ninterface ListSectionProps {\n isStart?: boolean\n isEnd?: boolean\n outerStyle?: ViewStyle\n innerStyle?: ViewStyle\n children: ReactNode\n}\n\nfunction ListSection({ isStart, isEnd, outerStyle, innerStyle, children }: ListSectionProps) {\n const styles = useStyles({ isStart, isEnd })\n\n return (\n <View style={[styles.sectionOuter, outerStyle]}>\n <View style={[styles.sectionInner, innerStyle]}>{children}</View>\n </View>\n )\n}\n\ninterface SectionHeadingProps {\n title: string\n}\n\nfunction SectionHeading({ title }: SectionHeadingProps) {\n const styles = useStyles()\n\n return (\n <View style={styles.header}>\n <Heading variant=\"h3\">{title}</Heading>\n </View>\n )\n}\n\ninterface InputProps {\n canUpdate: boolean\n title: string\n setTitle: Dispatch<SetStateAction<string>>\n style?: ViewStyle\n isEmpty: boolean\n}\n\nfunction TitleInput({ canUpdate, title, setTitle, style, isEmpty }: InputProps) {\n const styles = useStyles()\n const textRef = useRef<TextInput>(null)\n\n const handleFocus = () => {\n if (textRef.current) {\n textRef.current.focus()\n }\n }\n\n return (\n <Pressable style={[styles.titleContainer, style]} onPress={() => handleFocus()}>\n <View style={styles.titleLabelContainer}>\n <Text variant=\"tertiary\" style={styles.titleLabel}>\n Title\n </Text>\n {!canUpdate && <Icon name=\"general.lock\" style={styles.titleDisabledIcon} />}\n </View>\n <TextInput\n ref={textRef}\n editable={canUpdate}\n onChangeText={setTitle}\n style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}\n value={title}\n multiline\n maxLength={255} // Matches Chat Web\n enterKeyHint=\"done\"\n submitBehavior=\"blurAndSubmit\"\n />\n {isEmpty && (\n <Text variant=\"footnote\" style={styles.inputValidationText}>\n A title is required for your conversation.\n </Text>\n )}\n </Pressable>\n )\n}\n\ninterface SettingRowProps {\n title: string\n style?: ViewStyle\n rightItem?: ReactNode\n titleStyle?: TextStyle\n subtitle?: string\n rightItemStyle?: ViewStyle\n}\n\nfunction SettingRow({\n title,\n style,\n titleStyle = {},\n subtitle,\n rightItem,\n rightItemStyle = {},\n}: SettingRowProps) {\n const styles = useStyles()\n\n return (\n <View style={[styles.settingRow, style]}>\n <View style={styles.settingRowContent}>\n <Text variant=\"plain\" style={[styles.settingRowText, titleStyle]}>\n {title}\n </Text>\n {Boolean(subtitle) && <Text variant=\"footnote\">{subtitle}</Text>}\n </View>\n {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n contentContainer: {\n backgroundColor: colors.fillColorNeutral080,\n padding: space(2),\n },\n sectionOuter: {\n paddingTop: space(1),\n paddingLeft: space(2),\n backgroundColor: colors.fillColorNeutral100Inverted,\n borderTopLeftRadius: isStart ? space(1) : 0,\n borderTopRightRadius: isStart ? space(1) : 0,\n borderBottomLeftRadius: isEnd ? space(1) : 0,\n borderBottomRightRadius: isEnd ? space(1) : 0,\n marginBottom: isEnd ? space(2) : 0,\n },\n sectionInner: {\n borderBottomWidth: 0,\n borderBottomColor: colors.borderColorDefaultBase,\n paddingRight: space(2),\n paddingBottom: space(1),\n },\n addBottomBorder: {\n borderBottomWidth: isEnd ? 0 : 1,\n },\n titleContainer: {\n gap: 4,\n },\n titleLabelContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n titleLabel: {\n color: colors.textColorDefaultSecondary,\n },\n titleDisabledIcon: {\n color: colors.iconColorDefaultSecondary,\n },\n titleInput: {\n color: colors.textColorDefaultPrimary,\n fontSize: tokens.fontSizeMd,\n },\n titleInputDisabled: {\n color: colors.textColorDefaultSecondary,\n },\n inputValidationText: {\n color: colors.statusErrorText,\n paddingTop: 8,\n borderTopWidth: 1,\n borderColor: colors.borderColorStatusError,\n },\n header: {\n paddingVertical: space(1.5),\n },\n settingRow: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n gap: space(1),\n },\n settingRowContent: {\n flex: 1,\n },\n settingRowText: {\n lineHeight: 20,\n },\n childNoticeSectionOuter: {\n paddingTop: 0,\n },\n memberSectionOuter: {\n paddingTop: 6,\n },\n memberSectionInner: {\n paddingBottom: 6,\n },\n })\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.1.0-rc.7",
+  "version": "3.1.0-rc.8",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -52,5 +52,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "5013f8c59a511a8bcdd3245b7388fbe3287bf22b"
+  "gitHead": "e931a8ec9af84775e5cfb3492000f9fef4d686de"
 }

package/src/components/display/banner_collapsible.tsx CHANGED Viewed

@@ -1,32 +1,6 @@
 import React, { ReactNode } from 'react'
 import { BannerProps, ConditionalDescription } from './banner'
 import BannerPrimitive from '../primitive/banner_primitive'
-import { LayoutAnimation } from 'react-native'
-// =================================
-// ====== Constants ================
-// =================================
-const OPACITY_DURATION = 100 // Ensures the content fades before the height rolls up
-const collapsibleAnimationConfig = {
-  duration: 300,
-  create: {
-    type: LayoutAnimation.Types.easeInEaseOut,
-    property: LayoutAnimation.Properties.opacity,
-    duration: OPACITY_DURATION,
-  },
-  update: {
-    type: LayoutAnimation.Types.easeInEaseOut,
-    property: LayoutAnimation.Properties.opacity,
-    duration: OPACITY_DURATION,
-  },
-  delete: {
-    type: LayoutAnimation.Types.easeInEaseOut,
-    property: LayoutAnimation.Properties.opacity,
-    duration: OPACITY_DURATION,
-  },
-}
 // =================================
 // ====== Component ================
@@ -50,7 +24,6 @@ export function BannerCollapsible({
   const [expanded, setExpanded] = React.useState(false)
   const toggleCollapsible = () => {
-    LayoutAnimation.configureNext(collapsibleAnimationConfig)
     setExpanded(prev => !prev)
   }

package/src/components/display/child_notice.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import React from 'react'
+import { MemberResource } from '../../types'
+import { BannerCollapsible } from './banner_collapsible'
+import BannerPrimitive from '../primitive/banner_primitive'
+import { View, StyleSheet } from 'react-native'
+import { Avatar } from './avatar'
+import { platformFontWeightMedium } from '../../utils'
+import { Text } from './text'
+// =================================
+// ====== Component ================
+// =================================
+interface ChildNoticeProps {
+  childMembers: MemberResource[]
+}
+export function ChildNotice({ childMembers }: ChildNoticeProps) {
+  const styles = useStyles()
+  const heading = `${childMembers.length} members under age 13`
+  return (
+    <BannerCollapsible appearance="warning" iconName="general.shieldExclamation" heading={heading}>
+      <BannerPrimitive.Text>
+        Under age members cannot chat. They won't see conversations or notifications.
+      </BannerPrimitive.Text>
+      <View style={styles.childrenWrapper}>
+        {childMembers?.map(child => <Child key={child.id} child={child} />)}
+      </View>
+    </BannerCollapsible>
+  )
+}
+function Child({ child }: { child: MemberResource }) {
+  const styles = useStyles()
+  return (
+    <View style={styles.child}>
+      <Avatar sourceUri={child.avatar} size="sm" />
+      <Text variant="tertiary" style={styles.name}>
+        {child.name}
+      </Text>
+    </View>
+  )
+}
+// =================================
+// ====== Styles ===================
+// =================================
+const useStyles = () => {
+  return StyleSheet.create({
+    childrenWrapper: {
+      marginTop: 8,
+      gap: 8,
+    },
+    child: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    name: {
+      fontWeight: platformFontWeightMedium,
+    },
+  })
+}

package/src/components/display/index.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export * from './badge'
 export * from './banner_collapsible'
 export * from './banner'
 export * from './button'
+export * from './child_notice'
 export * from './heading'
 export * from './icon_button'
 export * from './icon'

package/src/components/display/person.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { useTheme } from '../../hooks'
 import { platformFontWeightMedium } from '../../utils/styles'
 import { MemberResource } from '../../types'
 import { Avatar } from './avatar'
@@ -17,10 +16,6 @@ interface PersonProps {
 }
 export function Person({ person }: PersonProps) {
-  return person.child ? <Child person={person} /> : <Adult person={person} />
-}
-export function Adult({ person }: PersonProps) {
   const styles = useStyles()
   return (
@@ -35,35 +30,12 @@ export function Adult({ person }: PersonProps) {
     </View>
   )
 }
-export function Child({ person }: PersonProps) {
-  const styles = useStyles()
-  return (
-    <View style={styles.wrapper}>
-      <View style={styles.childAvatar}>
-        <Avatar sourceUri={person.avatar} />
-      </View>
-      <View style={styles.content}>
-        <Text style={[styles.name, styles.childName]}>{person.name}</Text>
-        <View style={styles.badges}>
-          <Badge
-            label="Not eligible to chat"
-            appearance="warning"
-            iconName="general.shieldExclamation"
-          />
-        </View>
-      </View>
-    </View>
-  )
-}
 // =================================
 // ====== Styles ===================
 // =================================
 const useStyles = () => {
-  const { colors } = useTheme()
   return StyleSheet.create({
     wrapper: {
       flexDirection: 'row',
@@ -76,12 +48,6 @@ const useStyles = () => {
     name: {
       fontWeight: platformFontWeightMedium,
     },
-    childName: {
-      color: colors.textColorDefaultSecondary,
-    },
-    childAvatar: {
-      opacity: 0.5,
-    },
     badges: {
       flexDirection: 'row',
       gap: space(0.5),

package/src/components/primitive/avatar_primitive.tsx CHANGED Viewed

@@ -40,6 +40,7 @@ export type {
 // =================================
 const AVATAR_SIZES = {
+  sm: 'sm',
   md: 'md',
   lg: 'lg',
 } as const
@@ -54,11 +55,13 @@ type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES]
 type AvatarPresenceType = (typeof AVATAR_PRESENCE_TYPES)[keyof typeof AVATAR_PRESENCE_TYPES]
 const AVATAR_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.sm]: 24,
   [AVATAR_SIZES.md]: 32,
   [AVATAR_SIZES.lg]: 40,
 }
 const AVATAR_PRESENCE_PX: Record<AvatarSize, number> = {
+  [AVATAR_SIZES.sm]: 10,
   [AVATAR_SIZES.md]: 12,
   [AVATAR_SIZES.lg]: 14,
 }

package/src/components/primitive/banner_primitive.tsx CHANGED Viewed

@@ -180,7 +180,7 @@ function BannerStatusIcon({ iconName }: BannerStatusIconProps) {
     <Icon
       name={iconName || iconNameMap[appearance]}
       style={styles.icon}
-      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+      maxFontSizeMultiplier={1}
     />
   )
 }
@@ -262,7 +262,7 @@ interface Styles {
 const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
   const statusColorMap = useStatusColorAppearanceMap()
   const fontScale = useFontScale()
-  const LINE_HEIGHT_OFFSET = 1
+  const LINE_HEIGHT_OFFSET = fontScale > 1 ? 0 : 1
   return StyleSheet.create({
     staticLayout: {
@@ -280,7 +280,7 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
     icon: {
       color: statusColorMap[appearance].icon,
       fontSize: tokens.fontSizeMd,
-      marginTop: space(0.5) - LINE_HEIGHT_OFFSET * fontScale,
+      marginTop: (space(0.5) - LINE_HEIGHT_OFFSET) * fontScale,
     },
     heading: {
       color: statusColorMap[appearance].text,

package/src/screens/conversation_details_screen.tsx CHANGED Viewed

@@ -17,7 +17,7 @@ import {
   type ViewProps,
   Pressable,
 } from 'react-native'
-import { Heading, Icon, Person, Switch, Text } from '../components'
+import { ChildNotice, Heading, Icon, Person, Switch, Text } from '../components'
 import { useSuspenseGet, useTheme } from '../hooks'
 import {
   useConversation,
@@ -53,7 +53,8 @@ type SectionListData = Array<
 interface DataItem<T, TName extends SectionTypes> {
   type: TName
   data: T
-  sectionStyle?: ViewStyle
+  sectionOuterStyle?: ViewStyle
+  sectionInnerStyle?: ViewStyle
 }
 // =================================
@@ -87,9 +88,15 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     },
   })
+  const childMembers = members.filter(member => member.child)
+  const hasChildren = childMembers.length > 0
+  const isLeader = true // TODO: replace with value from the server
   const memberItems = members.map(data => ({
-    type: SectionTypes.members,
+    type: data.child ? SectionTypes.hidden : SectionTypes.members,
     data,
+    sectionOuterStyle: styles.memberSectionOuter,
+    sectionInnerStyle: styles.memberSectionInner,
   }))
   const HeaderRight = useCallback(() => {
@@ -128,7 +135,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     {
       type: SectionTypes.header,
       data: { title: 'Settings' },
-      sectionStyle: styles.addBottomBorder,
+      sectionInnerStyle: styles.addBottomBorder,
     },
     {
       type: SectionTypes.setting,
@@ -141,6 +148,13 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
       type: SectionTypes.header,
       data: { title: 'Members' },
     },
+    {
+      type: hasChildren && isLeader ? SectionTypes.view : SectionTypes.hidden,
+      data: {
+        children: <ChildNotice childMembers={childMembers} />,
+      },
+      sectionOuterStyle: styles.childNoticeSectionOuter,
+    },
     ...memberItems,
   ].filter(item => item.type !== SectionTypes.hidden)
@@ -162,25 +176,45 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
         switch (item.type) {
           case SectionTypes.header:
             return (
-              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+              <ListSection
+                isStart={isStart}
+                isEnd={isEnd}
+                outerStyle={item?.sectionOuterStyle}
+                innerStyle={item?.sectionInnerStyle}
+              >
                 <SectionHeading title={item.data.title} />
               </ListSection>
             )
           case SectionTypes.members:
             return (
-              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+              <ListSection
+                isStart={isStart}
+                isEnd={isEnd}
+                outerStyle={item?.sectionOuterStyle}
+                innerStyle={item?.sectionInnerStyle}
+              >
                 <Person person={{ ...item.data }} />
               </ListSection>
             )
           case SectionTypes.setting:
             return (
-              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+              <ListSection
+                isStart={isStart}
+                isEnd={isEnd}
+                outerStyle={item?.sectionOuterStyle}
+                innerStyle={item?.sectionInnerStyle}
+              >
                 <SettingRow {...item.data} />
               </ListSection>
             )
           case SectionTypes.view:
             return (
-              <ListSection isStart={isStart} isEnd={isEnd} style={item?.sectionStyle}>
+              <ListSection
+                isStart={isStart}
+                isEnd={isEnd}
+                outerStyle={item?.sectionOuterStyle}
+                innerStyle={item?.sectionInnerStyle}
+              >
                 <View {...item.data} style={item.data.style} />
               </ListSection>
             )
@@ -195,16 +229,17 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 interface ListSectionProps {
   isStart?: boolean
   isEnd?: boolean
-  style?: ViewStyle
+  outerStyle?: ViewStyle
+  innerStyle?: ViewStyle
   children: ReactNode
 }
-function ListSection({ isStart, isEnd, style, children }: ListSectionProps) {
+function ListSection({ isStart, isEnd, outerStyle, innerStyle, children }: ListSectionProps) {
   const styles = useStyles({ isStart, isEnd })
   return (
-    <View style={styles.sectionOuter}>
-      <View style={[styles.sectionInner, style]}>{children}</View>
+    <View style={[styles.sectionOuter, outerStyle]}>
+      <View style={[styles.sectionInner, innerStyle]}>{children}</View>
     </View>
   )
 }
@@ -374,20 +409,14 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
     settingRowText: {
       lineHeight: 20,
     },
-    member: {
-      flexDirection: 'row',
-      gap: space(1),
-    },
-    memberBody: {
-      gap: space(0.5),
+    childNoticeSectionOuter: {
+      paddingTop: 0,
     },
-    memberName: {
-      lineHeight: space(2),
+    memberSectionOuter: {
+      paddingTop: 6,
     },
-    memberBadges: {
-      flexDirection: 'row',
-      gap: space(1),
+    memberSectionInner: {
+      paddingBottom: 6,
     },
-    memberBadge: {},
   })
 }