@draftbit/core 46.5.2-13b65f.2 → 46.5.2-5f6e91.0

package/lib/typescript/src/mappings/Touchable.d.ts

@@ -0,0 +1,22 @@
+export declare const SEED_DATA: {
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {};
+    triggers: string[];
+    props: {
+        onPress: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+    };
+};
+//# sourceMappingURL=Touchable.d.ts.map

package/lib/typescript/src/mappings/Touchable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Touchable.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Touchable.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAerB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.5.2-13b65f.2+13b65fd",
+  "version": "46.5.2-5f6e91.0+5f6e919f",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.5.2-13b65f.2+13b65fd",
+    "@draftbit/types": "^46.5.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "13b65fd21f56082a5d36ed9822aebe327cdc5143"
+  "gitHead": "5f6e919f90653f6a093791d248baed3a1dbe31a2"
 }

package/src/components/Button.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import * as React from "react";
 import { Text, Pressable, Platform, StyleSheet, ActivityIndicator, } from "react-native";
 import { withTheme } from "../theming";
 const CONSTANTS = {
@@ -7,7 +7,7 @@ const CONSTANTS = {
     padding: 8,
     icon: 24,
 };
-function Base({ Icon, icon, title, onPress, onLongPress, activeOpacity, disabledOpacity, loading, disabled, style, ...props }) {
+function Base({ Icon, icon, title, onPress, loading, disabled, style, ...props }) {
     const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...buttonStyles } = StyleSheet.flatten(style || {});
     const titleStyles = {
         color,
@@ -28,22 +28,15 @@ function Base({ Icon, icon, title, onPress, onLongPress, activeOpacity, disabled
     if (textAlign === "right") {
         buttonStyles.justifyContent = "flex-end";
     }
-    const getOpacity = useCallback((pressed) => {
-        if (disabled) {
-            return disabledOpacity;
-        }
-        else {
-            if (pressed)
-                return activeOpacity;
-            else
-                return 1;
-        }
-    }, [activeOpacity, disabled, disabledOpacity]);
-    const _style = useCallback(({ pressed }) => [
-        buttonStyles,
-        { opacity: getOpacity(pressed) },
-    ], [getOpacity, buttonStyles]);
-    return (React.createElement(Pressable, { onPress: onPress, onLongPress: onLongPress, disabled: disabled || loading, style: (styles.base, _style), ...props },
+    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled || loading, style: ({ pressed }) => {
+            return [
+                styles.base,
+                {
+                    opacity: pressed || disabled ? 0.75 : 1,
+                },
+                buttonStyles,
+            ];
+        }, ...props },
         loading ? (React.createElement(ActivityIndicator, { size: "small", color: color, style: styles.loading })) : null,
         icon && !loading ? (React.createElement(Icon, { name: icon, color: color, style: styles.icon, size: CONSTANTS.icon })) : null,
         React.createElement(Text, { style: titleStyles }, title)));

package/src/components/Button.tsx

@@ -1,14 +1,11 @@
-import React, { useCallback } from "react";
+import * as React from "react";
 import {
   Text,
   Pressable,
-  PressableProps,
-  PressableStateCallbackType,
   Platform,
   StyleSheet,
-  StyleProp,
   TextStyle,
-  ViewStyle,
+  PressableProps,
   ActivityIndicator,
 } from "react-native";
 
@@ -30,12 +27,6 @@ type BaseProps = {
   loading: boolean;
   style?: TextStyle;
   onPress: () => void;
-  onLongPress?: () => void;
-  activeOpacity?: number;
-  disabledOpacity?: number;
-  delayLongPress?: number;
-  hitSlop?: number;
-  pressRetentionOffset?: number;
   icon?: string;
 } & PressableProps &
   IconSlot;
@@ -46,29 +37,16 @@ type Props = {
   loading: boolean;
   style?: TextStyle;
   onPress: () => void;
-  onLongPress?: () => void;
-  activeOpacity?: number;
-  disabledOpacity?: number;
-  delayLongPress?: number;
-  hitSlop?: number;
-  pressRetentionOffset?: number;
   icon?: string;
   theme: Theme;
 } & PressableProps &
   IconSlot;
 
-export type StyleType = (
-  state: PressableStateCallbackType
-) => StyleProp<ViewStyle>;
-
 function Base({
   Icon,
   icon,
   title,
   onPress,
-  onLongPress,
-  activeOpacity,
-  disabledOpacity,
   loading,
   disabled,
   style,
@@ -111,31 +89,19 @@ function Base({
     buttonStyles.justifyContent = "flex-end";
   }
 
-  const getOpacity = useCallback(
-    (pressed: boolean) => {
-      if (disabled) {
-        return disabledOpacity;
-      } else {
-        if (pressed) return activeOpacity;
-        else return 1;
-      }
-    },
-    [activeOpacity, disabled, disabledOpacity]
-  );
-  const _style = useCallback<StyleType>(
-    ({ pressed }) => [
-      buttonStyles as ViewStyle,
-      { opacity: getOpacity(pressed) },
-    ],
-    [getOpacity, buttonStyles]
-  );
-
   return (
     <Pressable
       onPress={onPress}
-      onLongPress={onLongPress}
       disabled={disabled || loading}
-      style={(styles.base, _style)}
+      style={({ pressed }) => {
+        return [
+          styles.base,
+          {
+            opacity: pressed || disabled ? 0.75 : 1,
+          },
+          buttonStyles,
+        ];
+      }}
       {...props}
     >
       {loading ? (

package/src/components/Checkbox/Checkbox.js

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { View, StyleSheet, Pressable, } from "react-native";
+import { View, StyleSheet, } from "react-native";
 import { useTheme } from "../../theming";
+import Touchable from "../Touchable";
 import { usePrevious } from "../../hooks";
 const Checkbox = ({ Icon, status, disabled = false, onPress, onCheck, onUncheck, color, uncheckedColor, defaultValue, checkedIcon = "MaterialCommunityIcons/checkbox-marked", uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline", size = 24, style, ...rest }) => {
     const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
@@ -32,7 +33,7 @@ const Checkbox = ({ Icon, status, disabled = false, onPress, onCheck, onUncheck,
             onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
         }
     };
-    return (React.createElement(Pressable, { ...rest, onPress: handlePress, disabled: disabled, accessibilityState: { disabled }, accessibilityRole: "button", accessibilityLiveRegion: "polite", style: [styles.container, style, { width: size, height: size }] },
+    return (React.createElement(Touchable, { ...rest, onPress: handlePress, disabled: disabled, accessibilityState: { disabled }, accessibilityRole: "button", accessibilityLiveRegion: "polite", style: [styles.container, style, { width: size, height: size }] },
         React.createElement(Icon, { style: styles.icon, name: internalValue ? checkedIcon : uncheckedIcon, size: size, color: checkboxColor }),
         React.createElement(View, { style: [StyleSheet.absoluteFill, styles.fillContainer] },
             React.createElement(View, { style: [

package/src/components/Checkbox/Checkbox.tsx

@@ -2,14 +2,14 @@ import * as React from "react";
 import {
   View,
   StyleSheet,
+  TouchableHighlightProps,
   StyleProp,
   ViewStyle,
-  Pressable,
-  PressableProps,
 } from "react-native";
 import { useTheme } from "../../theming";
 import type { IconSlot } from "../../interfaces/Icon";
 
+import Touchable from "../Touchable";
 import { usePrevious } from "../../hooks";
 
 export interface CheckboxProps {
@@ -27,7 +27,9 @@ export interface CheckboxProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
+const Checkbox: React.FC<
+  CheckboxProps & TouchableHighlightProps & IconSlot
+> = ({
   Icon,
   status,
   disabled = false,
@@ -85,7 +87,7 @@ const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
   };
 
   return (
-    <Pressable
+    <Touchable
       {...rest}
       onPress={handlePress}
       disabled={disabled}
@@ -109,7 +111,7 @@ const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
           ]}
         />
       </View>
-    </Pressable>
+    </Touchable>
   );
 };
 

package/src/components/DatePicker/DatePicker.js

@@ -25,7 +25,7 @@ const MONTHS = [
     "November",
     "December",
 ];
-const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, ...props }) => {
+const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, pickerAccentColor, pickerTextColor, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -333,7 +333,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                             paddingRight: insets.right,
                         },
                     ] },
-                    React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
+                    React.createElement(DateTimePicker, { accentColor: pickerAccentColor, textColor: pickerTextColor, value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
                             toggleVisibility();
                             setValue(data);
                             onDateChange(data);

package/src/components/DatePicker/DatePicker.tsx

@@ -55,6 +55,8 @@ type Props = {
   rightIconName?: string;
   borderColor?: string;
   borderColorActive?: string;
+  pickerTextColor?: string;
+  pickerAccentColor?: string;
 } & IconSlot &
   TextInputProps;
 
@@ -93,6 +95,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   placeholder,
   borderColor: inputBorderColor,
   borderColorActive: inputBorderColorActive,
+  pickerAccentColor,
+  pickerTextColor,
   ...props
 }) => {
   const [value, setValue] = React.useState<any>(date || defaultValue);
@@ -513,6 +517,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
               ]}
             >
               <DateTimePicker
+                accentColor={pickerAccentColor}
+                textColor={pickerTextColor}
                 value={getValidDate()}
                 mode={mode}
                 isVisible={pickerVisible}

package/src/components/DatePicker/DatePickerComponent.js

@@ -2,12 +2,12 @@ import React from "react";
 import { Platform } from "react-native";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
-const DatePickerComponent = ({ value, onChange, mode, toggleVisibility, }) => {
-    return Platform.OS === "ios" || Platform.OS === "android" ? (React.createElement(DateTimePickerModal, { date: value, mode: mode, isVisible: true, display: Platform.OS === "ios" ? "spinner" : "default", onCancel: () => {
+const DatePickerComponent = ({ value, onChange, textColor, accentColor, mode, toggleVisibility, }) => {
+    return Platform.OS === "ios" || Platform.OS === "android" ? (React.createElement(DateTimePickerModal, { date: value, mode: mode, textColor: textColor, accentColor: accentColor, isVisible: true, display: Platform.OS === "ios" ? "spinner" : "default", onCancel: () => {
             console.log("Picker cancelled before selecting anything.");
             toggleVisibility();
         }, onConfirm: (data) => {
             onChange(null, data);
-        } })) : (React.createElement(DateTimePicker, { value: value, mode: mode, onChange: onChange, display: "default" }));
+        } })) : (React.createElement(DateTimePicker, { value: value, mode: mode, textColor: textColor, accentColor: accentColor, onChange: onChange, display: "default" }));
 };
 export default DatePickerComponent;

package/src/components/DatePicker/DatePickerComponent.tsx

@@ -7,6 +7,8 @@ import { DatePickerComponentProps as Props } from "./DatePickerComponentType";
 const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
   value,
   onChange,
+  textColor,
+  accentColor,
   mode,
   toggleVisibility,
 }) => {
@@ -14,6 +16,8 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
     <DateTimePickerModal
       date={value}
       mode={mode}
+      textColor={textColor}
+      accentColor={accentColor}
       isVisible={true}
       display={Platform.OS === "ios" ? "spinner" : "default"}
       onCancel={() => {
@@ -28,6 +32,8 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
     <DateTimePicker
       value={value}
       mode={mode}
+      textColor={textColor}
+      accentColor={accentColor}
       onChange={onChange}
       display={"default"}
     />

package/src/components/DatePicker/DatePickerComponentType.ts

@@ -7,4 +7,6 @@ export interface DatePickerComponentProps {
   toggleVisibility: () => void;
   isVisible?: boolean;
   theme?: typeof theme;
+  accentColor?: string;
+  textColor?: string;
 }

package/src/components/DeprecatedButton.js

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { ActivityIndicator, View, Text, StyleSheet, } from "react-native";
+import color from "color";
+import Config from "./Config";
+import Touchable from "./Touchable";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+const Button = ({ Icon, icon, disabled = false, type = "solid", loading = false, labelColor, color: colorOverride, children, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
+    let backgroundColor, borderColor, textColor, borderWidth;
+    const buttonColor = colorOverride || colors.primary;
+    if (type === "solid") {
+        backgroundColor = buttonColor;
+        if (disabled) {
+            textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
+        }
+        else {
+            textColor = labelColor || colors.surface;
+        }
+    }
+    else {
+        backgroundColor = "transparent";
+        if (disabled) {
+            textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+        }
+        else {
+            textColor = labelColor || buttonColor;
+        }
+    }
+    if (type === "outline") {
+        if (disabled) {
+            borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+        }
+        else {
+            borderColor = buttonColor;
+        }
+        borderWidth = StyleSheet.hairlineWidth;
+    }
+    else {
+        borderColor = "transparent";
+        borderWidth = 0;
+    }
+    const buttonStyle = {
+        backgroundColor,
+        borderColor,
+        borderWidth,
+        borderRadius: roundness,
+    };
+    const textStyle = {
+        textAlign: "center",
+        color: textColor,
+        marginVertical: 16,
+        marginHorizontal: 16,
+    };
+    const iconStyle = [
+        styles.icon,
+        {
+            marginLeft: 16,
+            marginRight: -8,
+            width: Config.buttonIconSize,
+        },
+    ];
+    const { margin, marginEnd, marginTop, marginLeft, marginRight, marginBottom, marginHorizontal, marginVertical, ...innerStyles } = StyleSheet.flatten(style || {});
+    const margins = {
+        margin,
+        marginEnd,
+        marginTop,
+        marginLeft,
+        marginRight,
+        marginBottom,
+        marginHorizontal,
+        marginVertical,
+    };
+    return (React.createElement(Elevation, { style: { elevation, alignSelf: "stretch", ...margins } },
+        React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: [styles.button, buttonStyle, innerStyles] },
+            React.createElement(View, { style: styles.content },
+                icon && loading !== true ? (React.createElement(View, { style: iconStyle },
+                    React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,
+                loading ? (React.createElement(ActivityIndicator, { size: "small", color: textColor, style: iconStyle })) : null,
+                React.createElement(Text, { numberOfLines: 1, style: [textStyle, typography.button] }, children)))));
+};
+const styles = StyleSheet.create({
+    button: {
+        minWidth: 64,
+        borderStyle: "solid",
+    },
+    content: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    icon: {
+        width: Config.buttonIconSize,
+    },
+});
+export default withTheme(Button);

package/src/components/DeprecatedButton.tsx

@@ -0,0 +1,214 @@
+import * as React from "react";
+import {
+  ActivityIndicator,
+  View,
+  Text,
+  StyleSheet,
+  TouchableHighlightProps,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
+import color from "color";
+import Config from "./Config";
+import Touchable from "./Touchable";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+
+import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
+
+/**
+ * A button is component that the user can press to trigger an action.
+ *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img src="screenshots/button-1.png" />
+ *     <figcaption>Text button</figcaption>
+ *   </figure>
+ *   <figure>
+ *     <img src="screenshots/button-2.png" />
+ *     <figcaption>Outlined button</figcaption>
+ *   </figure>
+ *   <figure>
+ *     <img src="screenshots/button-3.png" />
+ *     <figcaption>Contained button</figcaption>
+ *   </figure>
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Button } from '@draftbit/ui';
+ *
+ * const MyComponent = () => (
+ *   <Button icon="add-a-photo" type="solid" onPress={() => console.log('Pressed')}>
+ *     Press me
+ *   </Button>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+
+type Props = {
+  disabled?: boolean;
+  type?: "solid" | "outline" | "text";
+  loading?: boolean;
+  icon?: string;
+  labelColor?: string;
+  color?: string;
+  children?: React.ReactNode;
+  onPress: () => void;
+  elevation?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+} & TouchableHighlightProps &
+  IconSlot;
+
+const Button: React.FC<React.PropsWithChildren<Props>> = ({
+  Icon,
+  icon,
+  disabled = false,
+  type = "solid",
+  loading = false,
+  labelColor,
+  color: colorOverride,
+  children,
+  onPress,
+  elevation = 0,
+  style,
+  theme: { colors, disabledOpacity, roundness, typography },
+  ...rest
+}) => {
+  let backgroundColor, borderColor, textColor, borderWidth;
+  const buttonColor = colorOverride || colors.primary;
+
+  if (type === "solid") {
+    backgroundColor = buttonColor;
+
+    if (disabled) {
+      textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
+    } else {
+      textColor = labelColor || colors.surface;
+    }
+  } else {
+    backgroundColor = "transparent";
+
+    if (disabled) {
+      textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+    } else {
+      textColor = labelColor || buttonColor;
+    }
+  }
+
+  if (type === "outline") {
+    if (disabled) {
+      borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+    } else {
+      borderColor = buttonColor;
+    }
+    borderWidth = StyleSheet.hairlineWidth;
+  } else {
+    borderColor = "transparent";
+    borderWidth = 0;
+  }
+
+  const buttonStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius: roundness,
+  };
+
+  const textStyle: StyleProp<TextStyle> = {
+    textAlign: "center",
+    color: textColor,
+    marginVertical: 16,
+    marginHorizontal: 16,
+  };
+
+  const iconStyle = [
+    styles.icon,
+    {
+      marginLeft: 16,
+      marginRight: -8,
+      width: Config.buttonIconSize,
+    },
+  ];
+
+  const {
+    margin,
+    marginEnd,
+    marginTop,
+    marginLeft,
+    marginRight,
+    marginBottom,
+    marginHorizontal,
+    marginVertical,
+    ...innerStyles
+  } = StyleSheet.flatten(style || {});
+
+  const margins = {
+    margin,
+    marginEnd,
+    marginTop,
+    marginLeft,
+    marginRight,
+    marginBottom,
+    marginHorizontal,
+    marginVertical,
+  };
+
+  return (
+    <Elevation style={{ elevation, alignSelf: "stretch", ...margins }}>
+      <Touchable
+        {...rest}
+        onPress={onPress}
+        accessibilityState={{ disabled }}
+        accessibilityRole="button"
+        disabled={disabled || loading}
+        style={[styles.button, buttonStyle, innerStyles]}
+      >
+        <View style={styles.content}>
+          {icon && loading !== true ? (
+            <View style={iconStyle}>
+              <Icon
+                name={icon}
+                size={Config.buttonIconSize}
+                color={textColor}
+              />
+            </View>
+          ) : null}
+          {loading ? (
+            <ActivityIndicator
+              size="small"
+              color={textColor}
+              style={iconStyle}
+            />
+          ) : null}
+          <Text numberOfLines={1} style={[textStyle, typography.button]}>
+            {children}
+          </Text>
+        </View>
+      </Touchable>
+    </Elevation>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    minWidth: 64,
+    borderStyle: "solid",
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  icon: {
+    width: Config.buttonIconSize,
+  },
+});
+
+export default withTheme(Button);

package/src/components/DeprecatedCardWrapper.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { withTheme } from "../theming";
-import { Pressable } from "react-native";
+import Touchable from "./Touchable";
 const getWidth = (numColumns) => {
     switch (numColumns) {
         case 1:
@@ -13,6 +13,6 @@ const getWidth = (numColumns) => {
 };
 const Card = ({ numColumns = 3, children, onPress, style, ...rest }) => {
     const width = getWidth(numColumns);
-    return (React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: [style, { width }], ...rest }, children));
+    return (React.createElement(Touchable, { disabled: !onPress, onPress: onPress, style: [style, { width }], ...rest }, children));
 };
 export default withTheme(Card);