@planningcenter/chat-react-native 4.4.1-qa-staging.13 → 4.4.1-qa-staging.15

package/build/screens/design_system_screen.js

@@ -2,7 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import React, { useState } from 'react';
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
-import { Avatar, AvatarGroup, Badge, Banner, BannerCollapsible, Button, ConversationAvatar, EmojiAvatar, IconAvatar, ToggleButton, Heading, Icon, IconButton, Image, Person, Spinner, Switch, Text, TextButton, TextInlineButton, ImageAttachmentPreview } from '../components/display';
+import { Avatar, AvatarGroup, Badge, Banner, BannerCollapsible, Button, ConversationAvatar, EmojiAvatar, FilterDropdown, IconAvatar, ToggleButton, Heading, Icon, IconButton, Image, Person, Spinner, Switch, Text, TextButton, TextInlineButton, ImageAttachmentPreview } from '../components/display';
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview';
 import BannerPrimitive from '../components/primitive/banner_primitive';
 import BlankState from '../components/primitive/blank_state_primitive';
@@ -45,6 +45,22 @@ const personChild = {
   gender: null
 };
 const buttonPress = () => Alert.alert('Button clicked');
+const filterDropdownOptions = [{
+  id: 'all',
+  label: 'All conversations'
+}, {
+  id: 'groups',
+  label: 'Groups'
+}, {
+  id: 'teams',
+  label: 'Teams'
+}, {
+  id: 'dms',
+  label: 'DMs'
+}, {
+  id: 'unread',
+  label: 'Unread'
+}];
 
 // =================================
 // ====== Component ================
@@ -367,12 +383,13 @@ function HeadingTextSection(t0) {
   return t11;
 }
 function PressablesSection(t0) {
-  const $ = _c(71);
+  const $ = _c(80);
   const {
     isLast
   } = t0;
   const styles = useStyles();
   const [filterSelected, setFilterSelected] = useState("Groups");
+  const [dropdownSelected, setDropdownSelected] = useState("all");
   let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = /*#__PURE__*/_jsxs(Row, {
@@ -686,17 +703,56 @@ function PressablesSection(t0) {
     t18 = $[20];
   }
   let t19;
+  if ($[21] !== dropdownSelected) {
+    t19 = filterDropdownOptions.find(option => option.id === dropdownSelected)?.label ?? "";
+    $[21] = dropdownSelected;
+    $[22] = t19;
+  } else {
+    t19 = $[22];
+  }
   let t20;
+  if ($[23] !== dropdownSelected || $[24] !== t19) {
+    t20 = /*#__PURE__*/_jsx(FilterDropdown, {
+      options: filterDropdownOptions,
+      selectedId: dropdownSelected,
+      onSelect: setDropdownSelected,
+      onMoreFilters: _temp,
+      triggerLabel: t19
+    });
+    $[23] = dropdownSelected;
+    $[24] = t19;
+    $[25] = t20;
+  } else {
+    t20 = $[25];
+  }
   let t21;
-  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-    t19 = /*#__PURE__*/_jsx(IconButton, {
+  if ($[26] !== styles.alignRowLeft || $[27] !== t20) {
+    t21 = /*#__PURE__*/_jsx(Group, {
+      title: "FilterDropdown",
+      description: "Trigger that opens the host's native menu of filter options plus a More filters action. Needs a menu adapter.",
+      children: /*#__PURE__*/_jsx(Row, {
+        style: styles.alignRowLeft,
+        children: t20
+      })
+    });
+    $[26] = styles.alignRowLeft;
+    $[27] = t20;
+    $[28] = t21;
+  } else {
+    t21 = $[28];
+  }
+  let t22;
+  let t23;
+  let t24;
+  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
       accessibilityHint: "Opens your device's image gallary",
       size: "md"
     });
-    t20 = /*#__PURE__*/_jsx(IconButton, {
+    t23 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -704,7 +760,7 @@ function PressablesSection(t0) {
       appearance: "danger",
       size: "lg"
     });
-    t21 = /*#__PURE__*/_jsx(IconButton, {
+    t24 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -712,17 +768,17 @@ function PressablesSection(t0) {
       appearance: "interaction",
       size: "xl"
     });
-    $[21] = t19;
-    $[22] = t20;
-    $[23] = t21;
+    $[29] = t22;
+    $[30] = t23;
+    $[31] = t24;
   } else {
-    t19 = $[21];
-    t20 = $[22];
-    t21 = $[23];
+    t22 = $[29];
+    t23 = $[30];
+    t24 = $[31];
   }
-  let t22;
-  if ($[24] !== styles.customIconButtonColor) {
-    t22 = /*#__PURE__*/_jsx(IconButton, {
+  let t25;
+  if ($[32] !== styles.customIconButtonColor) {
+    t25 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -730,39 +786,39 @@ function PressablesSection(t0) {
       iconStyle: styles.customIconButtonColor,
       size: "xxl"
     });
-    $[24] = styles.customIconButtonColor;
-    $[25] = t22;
+    $[32] = styles.customIconButtonColor;
+    $[33] = t25;
   } else {
-    t22 = $[25];
+    t25 = $[33];
   }
-  let t23;
-  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-    t23 = /*#__PURE__*/_jsx(IconButton, {
+  let t26;
+  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+    t26 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
       accessibilityHint: "Opens your device's image gallary",
       size: "xxxl"
     });
-    $[26] = t23;
+    $[34] = t26;
   } else {
-    t23 = $[26];
+    t26 = $[34];
   }
-  let t24;
-  if ($[27] !== t22) {
-    t24 = /*#__PURE__*/_jsxs(Row, {
-      children: [t19, t20, t21, t22, t23]
+  let t27;
+  if ($[35] !== t25) {
+    t27 = /*#__PURE__*/_jsxs(Row, {
+      children: [t22, t23, t24, t25, t26]
     });
-    $[27] = t22;
-    $[28] = t24;
+    $[35] = t25;
+    $[36] = t27;
   } else {
-    t24 = $[28];
+    t27 = $[36];
   }
-  let t25;
-  let t26;
-  let t27;
-  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-    t25 = /*#__PURE__*/_jsx(IconButton, {
+  let t28;
+  let t29;
+  let t30;
+  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+    t28 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -770,7 +826,7 @@ function PressablesSection(t0) {
       size: "md",
       disabled: true
     });
-    t26 = /*#__PURE__*/_jsx(IconButton, {
+    t29 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -779,7 +835,7 @@ function PressablesSection(t0) {
       size: "lg",
       disabled: true
     });
-    t27 = /*#__PURE__*/_jsx(IconButton, {
+    t30 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -788,17 +844,17 @@ function PressablesSection(t0) {
       size: "xl",
       disabled: true
     });
-    $[29] = t25;
-    $[30] = t26;
-    $[31] = t27;
+    $[37] = t28;
+    $[38] = t29;
+    $[39] = t30;
   } else {
-    t25 = $[29];
-    t26 = $[30];
-    t27 = $[31];
+    t28 = $[37];
+    t29 = $[38];
+    t30 = $[39];
   }
-  let t28;
-  if ($[32] !== styles.customIconButtonColor) {
-    t28 = /*#__PURE__*/_jsx(IconButton, {
+  let t31;
+  if ($[40] !== styles.customIconButtonColor) {
+    t31 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -807,14 +863,14 @@ function PressablesSection(t0) {
       size: "xxl",
       disabled: true
     });
-    $[32] = styles.customIconButtonColor;
-    $[33] = t28;
+    $[40] = styles.customIconButtonColor;
+    $[41] = t31;
   } else {
-    t28 = $[33];
+    t31 = $[41];
   }
-  let t29;
-  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-    t29 = /*#__PURE__*/_jsx(IconButton, {
+  let t32;
+  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+    t32 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -822,25 +878,25 @@ function PressablesSection(t0) {
       size: "xxxl",
       disabled: true
     });
-    $[34] = t29;
+    $[42] = t32;
   } else {
-    t29 = $[34];
+    t32 = $[42];
   }
-  let t30;
-  if ($[35] !== t28) {
-    t30 = /*#__PURE__*/_jsxs(Row, {
-      children: [t25, t26, t27, t28, t29]
+  let t33;
+  if ($[43] !== t31) {
+    t33 = /*#__PURE__*/_jsxs(Row, {
+      children: [t28, t29, t30, t31, t32]
     });
-    $[35] = t28;
-    $[36] = t30;
+    $[43] = t31;
+    $[44] = t33;
   } else {
-    t30 = $[36];
+    t33 = $[44];
   }
-  let t31;
-  let t32;
-  let t33;
-  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-    t31 = /*#__PURE__*/_jsx(IconButton, {
+  let t34;
+  let t35;
+  let t36;
+  if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+    t34 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -848,7 +904,7 @@ function PressablesSection(t0) {
       size: "md",
       loading: true
     });
-    t32 = /*#__PURE__*/_jsx(IconButton, {
+    t35 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -857,7 +913,7 @@ function PressablesSection(t0) {
       size: "lg",
       loading: true
     });
-    t33 = /*#__PURE__*/_jsx(IconButton, {
+    t36 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -866,17 +922,17 @@ function PressablesSection(t0) {
       size: "xl",
       loading: true
     });
-    $[37] = t31;
-    $[38] = t32;
-    $[39] = t33;
+    $[45] = t34;
+    $[46] = t35;
+    $[47] = t36;
   } else {
-    t31 = $[37];
-    t32 = $[38];
-    t33 = $[39];
+    t34 = $[45];
+    t35 = $[46];
+    t36 = $[47];
   }
-  let t34;
-  if ($[40] !== styles.customIconButtonColor) {
-    t34 = /*#__PURE__*/_jsx(IconButton, {
+  let t37;
+  if ($[48] !== styles.customIconButtonColor) {
+    t37 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -885,14 +941,14 @@ function PressablesSection(t0) {
       size: "xxl",
       loading: true
     });
-    $[40] = styles.customIconButtonColor;
-    $[41] = t34;
+    $[48] = styles.customIconButtonColor;
+    $[49] = t37;
   } else {
-    t34 = $[41];
+    t37 = $[49];
   }
-  let t35;
-  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
-    t35 = /*#__PURE__*/_jsx(IconButton, {
+  let t38;
+  if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
+    t38 = /*#__PURE__*/_jsx(IconButton, {
       onPress: buttonPress,
       name: "general.paperclip",
       accessibilityLabel: "Add attachment",
@@ -900,37 +956,37 @@ function PressablesSection(t0) {
       size: "xxxl",
       loading: true
     });
-    $[42] = t35;
+    $[50] = t38;
   } else {
-    t35 = $[42];
+    t38 = $[50];
   }
-  let t36;
-  if ($[43] !== t34) {
-    t36 = /*#__PURE__*/_jsxs(Row, {
-      children: [t31, t32, t33, t34, t35]
+  let t39;
+  if ($[51] !== t37) {
+    t39 = /*#__PURE__*/_jsxs(Row, {
+      children: [t34, t35, t36, t37, t38]
     });
-    $[43] = t34;
-    $[44] = t36;
+    $[51] = t37;
+    $[52] = t39;
   } else {
-    t36 = $[44];
+    t39 = $[52];
   }
-  let t37;
-  if ($[45] !== t24 || $[46] !== t30 || $[47] !== t36) {
-    t37 = /*#__PURE__*/_jsxs(Group, {
+  let t40;
+  if ($[53] !== t27 || $[54] !== t33 || $[55] !== t39) {
+    t40 = /*#__PURE__*/_jsxs(Group, {
       title: "IconButton",
       description: "Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers.",
-      children: [t24, t30, t36]
+      children: [t27, t33, t39]
     });
-    $[45] = t24;
-    $[46] = t30;
-    $[47] = t36;
-    $[48] = t37;
+    $[53] = t27;
+    $[54] = t33;
+    $[55] = t39;
+    $[56] = t40;
   } else {
-    t37 = $[48];
+    t40 = $[56];
   }
-  let t38;
-  if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
-    t38 = /*#__PURE__*/_jsxs(Row, {
+  let t41;
+  if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+    t41 = /*#__PURE__*/_jsxs(Row, {
       children: [/*#__PURE__*/_jsx(TextButton, {
         onPress: buttonPress,
         children: "Default"
@@ -948,13 +1004,13 @@ function PressablesSection(t0) {
         children: "Default"
       })]
     });
-    $[49] = t38;
+    $[57] = t41;
   } else {
-    t38 = $[49];
+    t41 = $[57];
   }
-  let t39;
-  if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
-    t39 = /*#__PURE__*/_jsxs(Row, {
+  let t42;
+  if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
+    t42 = /*#__PURE__*/_jsxs(Row, {
       children: [/*#__PURE__*/_jsx(TextButton, {
         onPress: buttonPress,
         appearance: "danger",
@@ -976,16 +1032,16 @@ function PressablesSection(t0) {
         children: "Danger"
       })]
     });
-    $[50] = t39;
+    $[58] = t42;
   } else {
-    t39 = $[50];
+    t42 = $[58];
   }
-  let t40;
-  if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
-    t40 = /*#__PURE__*/_jsxs(Group, {
+  let t43;
+  if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+    t43 = /*#__PURE__*/_jsxs(Group, {
       title: "TextButton",
       description: "Pressable text with default & danger appearance options. Can be disabled and accept `Text` variance props.",
-      children: [t38, t39, /*#__PURE__*/_jsxs(Row, {
+      children: [t41, t42, /*#__PURE__*/_jsxs(Row, {
         children: [/*#__PURE__*/_jsx(TextButton, {
           onPress: buttonPress,
           disabled: true,
@@ -1008,189 +1064,193 @@ function PressablesSection(t0) {
         })]
       })]
     });
-    $[51] = t40;
+    $[59] = t43;
   } else {
-    t40 = $[51];
+    t43 = $[59];
   }
-  let t41;
-  if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
-    t41 = /*#__PURE__*/_jsx(TextInlineButton, {
+  let t44;
+  if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
+    t44 = /*#__PURE__*/_jsx(TextInlineButton, {
       onPress: buttonPress,
       children: "default button text"
     });
-    $[52] = t41;
+    $[60] = t44;
   } else {
-    t41 = $[52];
+    t44 = $[60];
   }
-  let t42;
-  if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
-    t42 = /*#__PURE__*/_jsx(TextInlineButton, {
+  let t45;
+  if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
+    t45 = /*#__PURE__*/_jsx(TextInlineButton, {
       onPress: buttonPress,
       appearance: "danger",
       children: "danger button text"
     });
-    $[53] = t42;
+    $[61] = t45;
   } else {
-    t42 = $[53];
+    t45 = $[61];
   }
-  let t43;
-  if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
-    t43 = /*#__PURE__*/_jsxs(Text, {
-      children: ["This text is next to", " ", t41, " Lorem ipsum dolor", " ", t42, " ", "consectetur", " ", /*#__PURE__*/_jsx(TextInlineButton, {
+  let t46;
+  if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
+    t46 = /*#__PURE__*/_jsxs(Text, {
+      children: ["This text is next to", " ", t44, " Lorem ipsum dolor", " ", t45, " ", "consectetur", " ", /*#__PURE__*/_jsx(TextInlineButton, {
         onPress: buttonPress,
         disabled: true,
         children: "disabled button text"
       }), " ", "elit."]
     });
-    $[54] = t43;
+    $[62] = t46;
   } else {
-    t43 = $[54];
+    t46 = $[62];
   }
-  let t44;
-  if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
-    t44 = /*#__PURE__*/_jsx(TextInlineButton, {
+  let t47;
+  if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+    t47 = /*#__PURE__*/_jsx(TextInlineButton, {
       variant: "secondary",
       onPress: buttonPress,
       children: "default button text"
     });
-    $[55] = t44;
+    $[63] = t47;
   } else {
-    t44 = $[55];
+    t47 = $[63];
   }
-  let t45;
-  if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
-    t45 = /*#__PURE__*/_jsx(TextInlineButton, {
+  let t48;
+  if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+    t48 = /*#__PURE__*/_jsx(TextInlineButton, {
       variant: "secondary",
       onPress: buttonPress,
       appearance: "danger",
       children: "danger button text"
     });
-    $[56] = t45;
+    $[64] = t48;
   } else {
-    t45 = $[56];
+    t48 = $[64];
   }
-  let t46;
-  if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
-    t46 = /*#__PURE__*/_jsxs(Text, {
+  let t49;
+  if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
+    t49 = /*#__PURE__*/_jsxs(Text, {
       variant: "secondary",
-      children: ["This text is next to", " ", t44, " ", "Lorem ipsum dolor", " ", t45, " ", "consectetur", " ", /*#__PURE__*/_jsx(TextInlineButton, {
+      children: ["This text is next to", " ", t47, " ", "Lorem ipsum dolor", " ", t48, " ", "consectetur", " ", /*#__PURE__*/_jsx(TextInlineButton, {
         variant: "secondary",
         onPress: buttonPress,
         disabled: true,
         children: "disabled button text"
       }), " ", "elit."]
     });
-    $[57] = t46;
+    $[65] = t49;
   } else {
-    t46 = $[57];
+    t49 = $[65];
   }
-  let t47;
-  if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
-    t47 = /*#__PURE__*/_jsx(TextInlineButton, {
+  let t50;
+  if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
+    t50 = /*#__PURE__*/_jsx(TextInlineButton, {
       variant: "tertiary",
       onPress: buttonPress,
       children: "default button text"
     });
-    $[58] = t47;
+    $[66] = t50;
   } else {
-    t47 = $[58];
+    t50 = $[66];
   }
-  let t48;
-  if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
-    t48 = /*#__PURE__*/_jsx(TextInlineButton, {
+  let t51;
+  if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
+    t51 = /*#__PURE__*/_jsx(TextInlineButton, {
       variant: "tertiary",
       onPress: buttonPress,
       appearance: "danger",
       children: "danger button text"
     });
-    $[59] = t48;
+    $[67] = t51;
   } else {
-    t48 = $[59];
+    t51 = $[67];
   }
-  let t49;
-  if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
-    t49 = /*#__PURE__*/_jsxs(Text, {
+  let t52;
+  if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+    t52 = /*#__PURE__*/_jsxs(Text, {
       variant: "tertiary",
-      children: ["This text is next to", " ", t47, " ", "Lorem ipsum dolor", " ", t48, " ", "consectetur", " ", /*#__PURE__*/_jsx(TextInlineButton, {
+      children: ["This text is next to", " ", t50, " ", "Lorem ipsum dolor", " ", t51, " ", "consectetur", " ", /*#__PURE__*/_jsx(TextInlineButton, {
         variant: "tertiary",
         onPress: buttonPress,
         disabled: true,
         children: "disabled button text"
       }), " ", "elit."]
     });
-    $[60] = t49;
+    $[68] = t52;
   } else {
-    t49 = $[60];
+    t52 = $[68];
   }
-  let t50;
-  if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
-    t50 = /*#__PURE__*/_jsx(TextInlineButton, {
+  let t53;
+  if ($[69] === Symbol.for("react.memo_cache_sentinel")) {
+    t53 = /*#__PURE__*/_jsx(TextInlineButton, {
       variant: "footnote",
       onPress: buttonPress,
       children: "default button text"
     });
-    $[61] = t50;
+    $[69] = t53;
   } else {
-    t50 = $[61];
+    t53 = $[69];
   }
-  let t51;
-  if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
-    t51 = /*#__PURE__*/_jsx(TextInlineButton, {
+  let t54;
+  if ($[70] === Symbol.for("react.memo_cache_sentinel")) {
+    t54 = /*#__PURE__*/_jsx(TextInlineButton, {
       variant: "footnote",
       onPress: buttonPress,
       appearance: "danger",
       children: "danger button text"
     });
-    $[62] = t51;
+    $[70] = t54;
   } else {
-    t51 = $[62];
+    t54 = $[70];
   }
-  let t52;
-  if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
-    t52 = /*#__PURE__*/_jsxs(Text, {
+  let t55;
+  if ($[71] === Symbol.for("react.memo_cache_sentinel")) {
+    t55 = /*#__PURE__*/_jsxs(Text, {
       variant: "footnote",
-      children: ["This text is next to", " ", t50, " ", "Lorem ipsum dolor", " ", t51, " ", "consectetur", " ", /*#__PURE__*/_jsx(TextInlineButton, {
+      children: ["This text is next to", " ", t53, " ", "Lorem ipsum dolor", " ", t54, " ", "consectetur", " ", /*#__PURE__*/_jsx(TextInlineButton, {
         variant: "footnote",
         onPress: buttonPress,
         disabled: true,
         children: "disabled button text"
       }), " ", "elit."]
     });
-    $[63] = t52;
+    $[71] = t55;
   } else {
-    t52 = $[63];
+    t55 = $[71];
   }
-  let t53;
-  if ($[64] !== styles.alignRowLeft) {
-    t53 = /*#__PURE__*/_jsx(Group, {
+  let t56;
+  if ($[72] !== styles.alignRowLeft) {
+    t56 = /*#__PURE__*/_jsx(Group, {
       title: "TextInlineButton",
       description: "Supports nesting within `Text`. Temporary component until React Native fixes a layout bug in `Pressable` which used in `TextButton`.",
       children: /*#__PURE__*/_jsxs(Row, {
         style: styles.alignRowLeft,
-        children: [t43, t46, t49, t52]
+        children: [t46, t49, t52, t55]
       })
     });
-    $[64] = styles.alignRowLeft;
-    $[65] = t53;
+    $[72] = styles.alignRowLeft;
+    $[73] = t56;
   } else {
-    t53 = $[65];
+    t56 = $[73];
   }
-  let t54;
-  if ($[66] !== isLast || $[67] !== t18 || $[68] !== t37 || $[69] !== t53) {
-    t54 = /*#__PURE__*/_jsxs(CollapsableSection, {
+  let t57;
+  if ($[74] !== isLast || $[75] !== t18 || $[76] !== t21 || $[77] !== t40 || $[78] !== t56) {
+    t57 = /*#__PURE__*/_jsxs(CollapsableSection, {
       title: "Pressables",
       isLast: isLast,
-      children: [t8, t18, t37, t40, t53]
+      children: [t8, t18, t21, t40, t43, t56]
     });
-    $[66] = isLast;
-    $[67] = t18;
-    $[68] = t37;
-    $[69] = t53;
-    $[70] = t54;
+    $[74] = isLast;
+    $[75] = t18;
+    $[76] = t21;
+    $[77] = t40;
+    $[78] = t56;
+    $[79] = t57;
   } else {
-    t54 = $[70];
+    t57 = $[79];
   }
-  return t54;
+  return t57;
+}
+function _temp() {
+  return Alert.alert("More filters");
 }
 function HapticsSection(t0) {
   const $ = _c(5);
@@ -1216,19 +1276,19 @@ function HapticsSection(t0) {
       children: /*#__PURE__*/_jsxs(Row, {
         children: [/*#__PURE__*/_jsx(HapticButton, {
           title: "Impact Light",
-          onPress: _temp
+          onPress: _temp2
         }), /*#__PURE__*/_jsx(HapticButton, {
           title: "Impact Medium",
-          onPress: _temp2
+          onPress: _temp3
         }), /*#__PURE__*/_jsx(HapticButton, {
           title: "Impact Heavy",
-          onPress: _temp3
+          onPress: _temp4
         }), /*#__PURE__*/_jsx(HapticButton, {
           title: "Rigid",
-          onPress: _temp4
+          onPress: _temp5
         }), /*#__PURE__*/_jsx(HapticButton, {
           title: "Soft",
-          onPress: _temp5
+          onPress: _temp6
         })]
       })
     });
@@ -1244,13 +1304,13 @@ function HapticsSection(t0) {
       children: /*#__PURE__*/_jsxs(Row, {
         children: [/*#__PURE__*/_jsx(HapticButton, {
           title: "Notification Success",
-          onPress: _temp6
+          onPress: _temp7
         }), /*#__PURE__*/_jsx(HapticButton, {
           title: "Notification Warning",
-          onPress: _temp7
+          onPress: _temp8
         }), /*#__PURE__*/_jsx(HapticButton, {
           title: "Notification Error",
-          onPress: _temp8
+          onPress: _temp9
         })]
       })
     });
@@ -1272,28 +1332,28 @@ function HapticsSection(t0) {
   }
   return t4;
 }
-function _temp8() {
+function _temp9() {
   return Haptic.notificationError();
 }
-function _temp7() {
+function _temp8() {
   return Haptic.notificationWarning();
 }
-function _temp6() {
+function _temp7() {
   return Haptic.notificationSuccess();
 }
-function _temp5() {
+function _temp6() {
   return Haptic.soft();
 }
-function _temp4() {
+function _temp5() {
   return Haptic.rigid();
 }
-function _temp3() {
+function _temp4() {
   return Haptic.impactHeavy();
 }
-function _temp2() {
+function _temp3() {
   return Haptic.impactMedium();
 }
-function _temp() {
+function _temp2() {
   return Haptic.impactLight();
 }
 function ImageIconsSection(t0) {