@planningcenter/chat-react-native 3.14.0-rc.4 → 3.14.0-rc.5

package/src/components/primitive/blank_state_primitive.tsx

@@ -0,0 +1,194 @@
+import React, { FC, ReactNode } from 'react'
+import { View, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../hooks'
+import {
+  Button,
+  Heading,
+  Icon,
+  Text,
+  type ButtonProps,
+  type HeadingProps,
+  type IconString,
+  type IconStyle,
+  type TextProps,
+} from '../display'
+
+// ========================================
+// ====== Exports =========================
+// ========================================
+
+const BlankState = {
+  Root: BlankStateRoot,
+  Imagery: BlankStateImagery,
+  Content: BlankStateContent,
+  Heading: BlankStateHeading,
+  Text: BlankStateText,
+  Button: BlankStateButton,
+} as const
+
+type BlankStateComponents = {
+  Root: FC<BlankStateRootProps>
+  Imagery: FC<BlankStateImageryProps>
+  Content: FC<BlankStateContentProps>
+  Heading: FC<BlankStateHeadingProps>
+  Text: FC<BlankStateTextProps>
+  Button: FC<BlankStateButtonProps>
+}
+
+export default BlankState as BlankStateComponents
+export type {
+  BlankStateRootProps,
+  BlankStateImageryProps,
+  BlankStateContentProps,
+  BlankStateHeadingProps,
+  BlankStateTextProps,
+  BlankStateButtonProps,
+}
+
+// ========================================
+// ====== BlankStateRoot ==================
+// ========================================
+
+interface BlankStateRootProps {
+  children: ReactNode
+  style?: ViewStyle
+}
+
+function BlankStateRoot({ children, style }: BlankStateRootProps) {
+  const styles = useStyles()
+
+  return <View style={[styles.container, style]}>{children}</View>
+}
+
+BlankStateRoot.displayName = 'BlankState.Root'
+
+// ========================================
+// ====== BlankStateImagery ===============
+// ========================================
+
+interface BlankStateImageryProps {
+  name: IconString
+  size?: number
+  style?: IconStyle
+}
+
+function BlankStateImagery({ name, size = 32, style }: BlankStateImageryProps) {
+  const styles = useStyles()
+
+  /*
+  NOTE:
+  BlankState.Imagery will eventually return more then just an Icon component
+  Eventually it will need to return SVG illustrations from the theme or internally for Services Mobile.
+  This first step of using a more abstract component just allows us to keep this component open to change, without being overly perscriptive on how the change should be implomented.
+
+*/
+
+  return <Icon name={name} size={size} style={[styles.imagery, style]} />
+}
+
+BlankStateImagery.displayName = 'BlankState.Imagery'
+
+// ========================================
+// ====== BlankStateContent ===============
+// ========================================
+
+interface BlankStateContentProps {
+  children: ReactNode
+  style?: ViewStyle
+}
+
+function BlankStateContent({ children, style }: BlankStateContentProps) {
+  const styles = useStyles()
+
+  return <View style={[styles.content, style]}>{children}</View>
+}
+
+BlankStateContent.displayName = 'BlankState.Content'
+
+// ========================================
+// ====== BlankStateHeading ===============
+// ========================================
+
+interface BlankStateHeadingProps {
+  children: ReactNode
+  style?: HeadingProps['style']
+}
+
+function BlankStateHeading({ children, style }: BlankStateHeadingProps) {
+  const styles = useStyles()
+
+  return (
+    <Heading variant="h3" style={[styles.heading, style]}>
+      {children}
+    </Heading>
+  )
+}
+
+BlankStateHeading.displayName = 'BlankState.Heading'
+
+// ========================================
+// ====== BlankStateText ==================
+// ========================================
+
+interface BlankStateTextProps {
+  children: ReactNode
+  style?: TextProps['style']
+}
+
+function BlankStateText({ children, style }: BlankStateTextProps) {
+  const styles = useStyles()
+
+  return (
+    <Text variant="tertiary" style={[styles.text, style]}>
+      {children}
+    </Text>
+  )
+}
+
+BlankStateText.displayName = 'BlankState.Text'
+
+// ========================================
+// ====== BlankStateButton ================
+// ========================================
+
+interface BlankStateButtonProps extends ButtonProps {}
+
+function BlankStateButton(props: BlankStateButtonProps) {
+  return <Button variant="outline" size="sm" {...props} />
+}
+
+BlankStateButton.displayName = 'BlankState.Button'
+
+// ========================================
+// ====== Styles ==========================
+// ========================================
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 16,
+      padding: 16,
+    },
+    imagery: {
+      color: colors.iconColorDefaultDisabled,
+    },
+    content: {
+      alignItems: 'center',
+      gap: 4,
+      maxWidth: 250,
+    },
+    heading: {
+      textAlign: 'center',
+      color: colors.textColorDefaultSecondary,
+    },
+    text: {
+      textAlign: 'center',
+      color: colors.textColorDefaultSecondary,
+    },
+  })
+}

package/src/screens/bug_report_screen.tsx

@@ -11,10 +11,10 @@ import {
   Text,
   TextInlineButton,
   ImageAttachmentPreview,
-  BlankState,
   Icon,
   KeyboardView,
 } from '../components'
+import BlankState from '../components/primitive/blank_state_primitive'
 import { useTheme } from '../hooks'
 import { useUploadClient } from '../hooks/use_upload_client'
 import { ImagePicker, ImagePickerResult, platformFontWeightBold } from '../utils'
@@ -165,20 +165,22 @@ ${stepsToResolve}`
 
   if (status === 'success') {
     return (
-      <BlankState
-        iconName="general.checkCircle"
-        iconStyle={styles.successIcon}
-        title="Thank you!"
-        titleStyle={styles.successTitle}
-        subtitle="We appreciate you taking the time to help improve chat! We'll take a look at the issue you reported."
-        subtitleStyle={styles.successSubtitle}
-        buttonProps={{
-          title: 'Return to chat',
-          onPress: navigation.goBack,
-          size: 'lg',
-          variant: 'fill',
-        }}
-      />
+      <BlankState.Root>
+        <BlankState.Imagery name="general.checkCircle" style={styles.successIcon} />
+        <BlankState.Content>
+          <BlankState.Heading style={styles.successTitle}>Thank you!</BlankState.Heading>
+          <BlankState.Text style={styles.successSubtitle}>
+            We appreciate you taking the time to help improve chat! We'll take a look at the issue
+            you reported.
+          </BlankState.Text>
+        </BlankState.Content>
+        <BlankState.Button
+          title="Return to chat"
+          onPress={navigation.goBack}
+          size="lg"
+          variant="fill"
+        />
+      </BlankState.Root>
     )
   }
 

package/src/screens/conversation_filter_recipients/conversation_filter_recipients_screen.tsx

@@ -4,7 +4,8 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { LayoutChangeEvent, Platform, StyleSheet, View } from 'react-native'
 import { FlatList, TextInput } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { BlankState, Heading, ToggleButton } from '../../components'
+import { Heading, ToggleButton } from '../../components'
+import BlankState from '../../components/primitive/blank_state_primitive'
 import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
 import { useTheme } from '../../hooks'
 import { tokens } from '../../vendor/tapestry/tokens'
@@ -120,7 +121,7 @@ export const ConversationFilterRecipientsScreen = ({
             ? `service-type-${item.data.serviceTypeId}`
             : `team-${item.data.teamId}-${item.data.serviceTypeId}`
         }
-        ListEmptyComponent={isFetched ? <BlankState title="No teams found" /> : <DefaultLoading />}
+        ListEmptyComponent={isFetched ? <ListBlankState /> : <DefaultLoading />}
         renderItem={({ item }) => {
           switch (item.type) {
             case SectionTypes.header:
@@ -150,6 +151,14 @@ export const ConversationFilterRecipientsScreen = ({
   )
 }
 
+const ListBlankState = () => {
+  return (
+    <BlankState.Root>
+      <BlankState.Heading>No teams found</BlankState.Heading>
+    </BlankState.Root>
+  )
+}
+
 const TeamFilters = ({ onLayout }: { onLayout?: (event: LayoutChangeEvent) => void }) => {
   const styles = useStyles()
   const { colors } = useTheme()

package/src/screens/conversation_screen.tsx

@@ -18,7 +18,7 @@ import {
   MemberDisabledRepliesBanner,
 } from '../components/conversation/disabled_replies_banners'
 import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
-import { BlankState } from '../components/display/blank_state'
+import BlankState from '../components/primitive/blank_state_primitive'
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
@@ -94,16 +94,18 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   if (!conversation || conversation.deleted) {
     return (
       <View style={styles.container}>
-        <BlankState
-          iconName="general.outlinedTextMessage"
-          title="This conversation has been deleted"
-          buttonProps={{
-            onPress: navigation.goBack,
-            title: 'Back to conversations',
-            accessibilityHint: 'Navigates back to the conversations list',
-            accessibilityRole: 'link',
-          }}
-        />
+        <BlankState.Root>
+          <BlankState.Imagery name="general.outlinedTextMessage" />
+          <BlankState.Content>
+            <BlankState.Heading>This conversation has been deleted</BlankState.Heading>
+          </BlankState.Content>
+          <BlankState.Button
+            onPress={navigation.goBack}
+            title="Back to conversations"
+            accessibilityHint="Navigates back to the conversations list"
+            accessibilityRole="link"
+          />
+        </BlankState.Root>
       </View>
     )
   }

package/src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx

@@ -1,7 +1,8 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
-import { BlankState, Button, Heading } from '../../components'
+import { Button, Heading } from '../../components'
+import BlankState from '../../components/primitive/blank_state_primitive'
 import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -95,10 +96,7 @@ export const ConversationSelectRecipientsScreen = ({
             {isGroupsFetching ? (
               <DefaultLoading />
             ) : groupsWithCreatePermission.length === 0 ? (
-              <BlankState
-                subtitle="Join a group with chat enabled and permissions to start a new conversation."
-                style={styles.blankState}
-              />
+              <RecipientsBlankState subtitle="Join a group with chat enabled and permissions to start a new conversation." />
             ) : (
               <>
                 {visibleGroups.map(group => {
@@ -167,7 +165,7 @@ export const ConversationSelectRecipientsScreen = ({
                 )}
               </>
             ) : (
-              <BlankState subtitle="You don't lead any teams." style={styles.blankState} />
+              <RecipientsBlankState subtitle="You don't lead any teams." />
             )}
           </View>
         </View>
@@ -176,6 +174,19 @@ export const ConversationSelectRecipientsScreen = ({
   )
 }
 
+const RecipientsBlankState = ({ subtitle }: { subtitle: string }) => {
+  const styles = useStyles()
+
+  return (
+    <BlankState.Root style={styles.blankState}>
+      <BlankState.Imagery name="general.outlinedTextMessage" />
+      <BlankState.Content>
+        <BlankState.Text>{subtitle}</BlankState.Text>
+      </BlankState.Content>
+    </BlankState.Root>
+  )
+}
+
 const useStyles = () => {
   const { bottom } = useSafeAreaInsets()
 

package/src/screens/design_system_screen.tsx

@@ -8,7 +8,6 @@ import {
   Badge,
   Banner,
   BannerCollapsible,
-  BlankState,
   Button,
   ToggleButton,
   Heading,
@@ -23,6 +22,7 @@ import {
   TextInlineButton,
   ImageAttachmentPreview,
 } from '../components/display'
+import BlankState from '../components/primitive/blank_state_primitive'
 import {
   MAX_FONT_SIZE_MULTIPLIER,
   platformPressedOpacityStyle,
@@ -1056,20 +1056,24 @@ function MiscComponentsSection({ isLast }: SectionProps) {
       </Group>
       <Group
         title="BlankState"
-        description="Displays a title and an optional icon, subtitle, and button. Button can be customized via `buttonProps`."
+        description="Compound component with primitives to display imagary, heading, title, and a button."
       >
         <Column>
-          <BlankState
-            iconName="general.outlinedTextMessage"
-            title="No messages"
-            subtitle="Conversation is hidden from everyone until you send a message."
-            buttonProps={{
-              onPress: buttonPress,
-              title: 'Go back',
-              accessibilityHint: 'Navigates back to the conversations list',
-              accessibilityRole: 'link',
-            }}
-          />
+          <BlankState.Root>
+            <BlankState.Imagery name="general.outlinedTextMessage" />
+            <BlankState.Content>
+              <BlankState.Heading>No messages</BlankState.Heading>
+              <BlankState.Text>
+                Conversation is hidden from everyone until you send a message.
+              </BlankState.Text>
+            </BlankState.Content>
+            <BlankState.Button
+              onPress={buttonPress}
+              title="Go back"
+              accessibilityHint="Navigates back to the conversations list"
+              accessibilityRole="link"
+            />
+          </BlankState.Root>
         </Column>
       </Group>
     </CollapsableSection>

package/src/screens/send_giphy_screen.tsx

@@ -1,7 +1,8 @@
 import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
-import { BlankState, Button, IconButton, IconString, TextButton } from '../components'
+import { Button, IconButton, IconString, TextButton } from '../components'
+import BlankState from '../components/primitive/blank_state_primitive'
 import { DefaultLoading } from '../components/page/loading'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useTheme } from '../hooks'
@@ -36,16 +37,14 @@ export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
   if (!result)
     return (
       <FormSheet.Root contentStyle={styles.blankStateContainer}>
-        <BlankState
-          style={styles.blankState}
-          title="No Giphys found"
-          subtitle="Try a different search term."
-          iconName="general.bolt"
-          buttonProps={{
-            onPress: () => navigation.goBack(),
-            title: 'Close',
-          }}
-        />
+        <BlankState.Root style={styles.blankState}>
+          <BlankState.Imagery name="general.bolt" />
+          <BlankState.Content>
+            <BlankState.Heading>No Giphys found</BlankState.Heading>
+            <BlankState.Text>Try a different search term.</BlankState.Text>
+          </BlankState.Content>
+          <BlankState.Button onPress={() => navigation.goBack()} title="Close" />
+        </BlankState.Root>
       </FormSheet.Root>
     )
 

package/build/components/display/blank_state.d.ts

@@ -1,18 +0,0 @@
-import { type ViewStyle } from 'react-native';
-import { type HeadingProps } from './heading';
-import { type IconString, type IconStyle } from './icon';
-import { type TextProps } from './text';
-import { type ButtonProps } from './button';
-interface BlankStateProps {
-    iconName?: IconString;
-    iconStyle?: IconStyle;
-    title?: string;
-    titleStyle?: HeadingProps['style'];
-    subtitle?: string;
-    subtitleStyle?: TextProps['style'];
-    style?: ViewStyle;
-    buttonProps?: ButtonProps;
-}
-export declare const BlankState: ({ iconName, title, titleStyle, subtitle, subtitleStyle, style, iconStyle, buttonProps, }: BlankStateProps) => import("react").JSX.Element;
-export {};
-//# sourceMappingURL=blank_state.d.ts.map

package/build/components/display/blank_state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"blank_state.d.ts","sourceRoot":"","sources":["../../../src/components/display/blank_state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAc,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC9D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAEnD,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAED,eAAO,MAAM,UAAU,6FASpB,eAAe,gCAsBjB,CAAA"}

package/build/components/display/blank_state.js

@@ -1,47 +0,0 @@
-import { View, StyleSheet } from 'react-native';
-import { Heading } from './heading';
-import { Icon } from './icon';
-import { Text } from './text';
-import { useTheme } from '../../hooks';
-import { Button } from './button';
-export const BlankState = ({ iconName, title, titleStyle, subtitle, subtitleStyle, style, iconStyle, buttonProps, }) => {
-    const styles = useStyles();
-    return (<View style={[styles.container, style]}>
-      {iconName && <Icon name={iconName} size={32} style={[styles.icon, iconStyle]}/>}
-
-      <View style={styles.content}>
-        {title && (<Heading variant="h3" style={[styles.baseText, titleStyle]}>
-            {title}
-          </Heading>)}
-        {subtitle && (<Text variant="tertiary" style={[styles.baseText, subtitleStyle]}>
-            {subtitle}
-          </Text>)}
-      </View>
-      {buttonProps && <Button variant="outline" size="sm" {...buttonProps}/>}
-    </View>);
-};
-const useStyles = () => {
-    const { colors } = useTheme();
-    return StyleSheet.create({
-        container: {
-            flex: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 16,
-            padding: 16,
-        },
-        icon: {
-            color: colors.iconColorDefaultDisabled,
-        },
-        content: {
-            alignItems: 'center',
-            gap: 4,
-            maxWidth: 250,
-        },
-        baseText: {
-            textAlign: 'center',
-            color: colors.textColorDefaultSecondary,
-        },
-    });
-};
-//# sourceMappingURL=blank_state.js.map

package/build/components/display/blank_state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"blank_state.js","sourceRoot":"","sources":["../../../src/components/display/blank_state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,UAAU,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAA;AACtD,OAAO,EAAE,IAAI,EAAmC,MAAM,QAAQ,CAAA;AAC9D,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAanD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,SAAS,EACT,WAAW,GACK,EAAE,EAAE;IACpB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACrC;MAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAG,CAEhF;;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,KAAK,IAAI,CACR,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CACzD;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,OAAO,CAAC,CACX,CACD;QAAA,CAAC,QAAQ,IAAI,CACX,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAC/D;YAAA,CAAC,QAAQ,CACX;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,WAAW,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,EAAG,CACzE;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,IAAI,EAAE,CAAC;YACP,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,GAAG,EAAE,EAAE;YACP,OAAO,EAAE,EAAE;SACZ;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC;QACD,OAAO,EAAE;YACP,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,QAAQ,EAAE,GAAG;SACd;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,QAAQ;YACnB,KAAK,EAAE,MAAM,CAAC,yBAAyB;SACxC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { View, type ViewStyle, StyleSheet } from 'react-native'\nimport { Heading, type HeadingProps } from './heading'\nimport { Icon, type IconString, type IconStyle } from './icon'\nimport { Text, type TextProps } from './text'\nimport { useTheme } from '../../hooks'\nimport { Button, type ButtonProps } from './button'\n\ninterface BlankStateProps {\n  iconName?: IconString\n  iconStyle?: IconStyle\n  title?: string\n  titleStyle?: HeadingProps['style']\n  subtitle?: string\n  subtitleStyle?: TextProps['style']\n  style?: ViewStyle\n  buttonProps?: ButtonProps\n}\n\nexport const BlankState = ({\n  iconName,\n  title,\n  titleStyle,\n  subtitle,\n  subtitleStyle,\n  style,\n  iconStyle,\n  buttonProps,\n}: BlankStateProps) => {\n  const styles = useStyles()\n\n  return (\n    <View style={[styles.container, style]}>\n      {iconName && <Icon name={iconName} size={32} style={[styles.icon, iconStyle]} />}\n\n      <View style={styles.content}>\n        {title && (\n          <Heading variant=\"h3\" style={[styles.baseText, titleStyle]}>\n            {title}\n          </Heading>\n        )}\n        {subtitle && (\n          <Text variant=\"tertiary\" style={[styles.baseText, subtitleStyle]}>\n            {subtitle}\n          </Text>\n        )}\n      </View>\n      {buttonProps && <Button variant=\"outline\" size=\"sm\" {...buttonProps} />}\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 16,\n      padding: 16,\n    },\n    icon: {\n      color: colors.iconColorDefaultDisabled,\n    },\n    content: {\n      alignItems: 'center',\n      gap: 4,\n      maxWidth: 250,\n    },\n    baseText: {\n      textAlign: 'center',\n      color: colors.textColorDefaultSecondary,\n    },\n  })\n}\n"]}

package/src/components/display/blank_state.tsx

@@ -1,76 +0,0 @@
-import { View, type ViewStyle, StyleSheet } from 'react-native'
-import { Heading, type HeadingProps } from './heading'
-import { Icon, type IconString, type IconStyle } from './icon'
-import { Text, type TextProps } from './text'
-import { useTheme } from '../../hooks'
-import { Button, type ButtonProps } from './button'
-
-interface BlankStateProps {
-  iconName?: IconString
-  iconStyle?: IconStyle
-  title?: string
-  titleStyle?: HeadingProps['style']
-  subtitle?: string
-  subtitleStyle?: TextProps['style']
-  style?: ViewStyle
-  buttonProps?: ButtonProps
-}
-
-export const BlankState = ({
-  iconName,
-  title,
-  titleStyle,
-  subtitle,
-  subtitleStyle,
-  style,
-  iconStyle,
-  buttonProps,
-}: BlankStateProps) => {
-  const styles = useStyles()
-
-  return (
-    <View style={[styles.container, style]}>
-      {iconName && <Icon name={iconName} size={32} style={[styles.icon, iconStyle]} />}
-
-      <View style={styles.content}>
-        {title && (
-          <Heading variant="h3" style={[styles.baseText, titleStyle]}>
-            {title}
-          </Heading>
-        )}
-        {subtitle && (
-          <Text variant="tertiary" style={[styles.baseText, subtitleStyle]}>
-            {subtitle}
-          </Text>
-        )}
-      </View>
-      {buttonProps && <Button variant="outline" size="sm" {...buttonProps} />}
-    </View>
-  )
-}
-
-const useStyles = () => {
-  const { colors } = useTheme()
-
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 16,
-      padding: 16,
-    },
-    icon: {
-      color: colors.iconColorDefaultDisabled,
-    },
-    content: {
-      alignItems: 'center',
-      gap: 4,
-      maxWidth: 250,
-    },
-    baseText: {
-      textAlign: 'center',
-      color: colors.textColorDefaultSecondary,
-    },
-  })
-}