@draftbit/core 46.4.4-29778d.2 → 46.4.4-2fce56.2

package/src/components/DatePicker/DatePicker.js

@@ -6,7 +6,6 @@ import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
 import Touchable from "../Touchable";
 import DateTimePicker from "./DatePickerComponent";
-import { extractStyles } from "../../utilities";
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const FOCUS_ANIMATION_DURATION = 150;
 const BLUR_ANIMATION_DURATION = 180;
@@ -25,7 +24,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, placeholder, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -37,7 +36,6 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     const [placeholder1, setPlaceholder1] = React.useState("");
     const [focused, setFocused] = React.useState(false);
     const [labelLayout, setLabelLayout] = React.useState({ measured: false, width: 0 });
-    const { textStyles } = extractStyles(style);
     const getValidDate = () => {
         if (!value) {
             return new Date();
@@ -127,10 +125,8 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     };
     const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
     const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
-    const MAXIMIZED_LABEL_FONT_SIZE = (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontSize) || typography.subtitle1.fontSize;
-    const MINIMIZED_LABEL_FONT_SIZE = labelSize
-        ? labelSize
-        : typography.caption.fontSize;
+    const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
+    const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
     const hasActiveOutline = focused;
     let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
     inputTextColor = colors.strong;
@@ -142,9 +138,9 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         backgroundColor = colors.divider;
     }
     else {
-        activeColor = inputBorderColorActive || colors.primary;
-        placeholderColor = borderColor = inputBorderColor || colors.light;
-        underlineColor = inputBorderColor || colors.light;
+        activeColor = colors.primary;
+        placeholderColor = borderColor = colors.light;
+        underlineColor = colors.light;
         backgroundColor = colors.background;
     }
     const { lineHeight, ...subtitle1 } = typography.subtitle1;
@@ -206,7 +202,6 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     const labelStyle = {
         ...typography.subtitle1,
         top: type === "solid" ? 16 : 0,
-        fontFamily: textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily,
         left: leftIconName && leftIconMode === "inset"
             ? ICON_SIZE + (type === "solid" ? 16 : 12)
             : 0,
@@ -250,7 +245,6 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         styles.input,
         inputStyle,
         type === "solid" ? { marginHorizontal: 12 } : {},
-        textStyles,
     ];
     // const render = (props) => <NativeTextInput {...props} />;
     return (React.createElement(View, { style: [styles.container, style] },
@@ -288,7 +282,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: labelColor || colors.light,
+                                        color: colors.light,
                                         opacity: labeled.interpolate({
                                             inputRange: [0, 1],
                                             outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -300,7 +294,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: labelColor || placeholder,
+                                        color: placeholderColor,
                                         opacity: hasActiveOutline ? labeled : 1,
                                     },
                                 ], numberOfLines: 1 }, label))) : null,

package/src/components/DatePicker/DatePicker.tsx

@@ -23,7 +23,6 @@ import DateTimePicker from "./DatePickerComponent";
 
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
-import { extractStyles } from "../../utilities";
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
@@ -48,14 +47,10 @@ type Props = {
   mode?: "date" | "time" | "datetime";
   type?: "solid" | "underline";
   label?: string;
-  labelSize?: number;
-  labelColor: string;
   placeholder?: string;
   leftIconName?: string;
   leftIconMode?: "outset" | "inset";
   rightIconName?: string;
-  borderColor?: string;
-  borderColorActive?: string;
 } & IconSlot &
   TextInputProps;
 
@@ -89,11 +84,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   rightIconName,
   leftIconMode = "inset",
   label,
-  labelSize,
-  labelColor,
   placeholder,
-  borderColor: inputBorderColor,
-  borderColorActive: inputBorderColorActive,
   ...props
 }) => {
   const [value, setValue] = React.useState<any>(date || defaultValue);
@@ -115,8 +106,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     width: number;
   }>({ measured: false, width: 0 });
 
-  const { textStyles } = extractStyles(style);
-
   const getValidDate = (): Date => {
     if (!value) {
       return new Date();
@@ -222,11 +211,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
 
   const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
   const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
-  const MAXIMIZED_LABEL_FONT_SIZE =
-    textStyles?.fontSize || typography.subtitle1.fontSize;
-  const MINIMIZED_LABEL_FONT_SIZE = labelSize
-    ? labelSize
-    : typography.caption.fontSize;
+  const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
+  const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
 
   const hasActiveOutline = focused;
 
@@ -247,9 +233,9 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     underlineColor = "transparent";
     backgroundColor = colors.divider;
   } else {
-    activeColor = inputBorderColorActive || colors.primary;
-    placeholderColor = borderColor = inputBorderColor || colors.light;
-    underlineColor = inputBorderColor || colors.light;
+    activeColor = colors.primary;
+    placeholderColor = borderColor = colors.light;
+    underlineColor = colors.light;
     backgroundColor = colors.background;
   }
 
@@ -320,7 +306,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   const labelStyle = {
     ...typography.subtitle1,
     top: type === "solid" ? 16 : 0,
-    fontFamily: textStyles?.fontFamily,
     left:
       leftIconName && leftIconMode === "inset"
         ? ICON_SIZE + (type === "solid" ? 16 : 12)
@@ -366,7 +351,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     styles.input,
     inputStyle,
     type === "solid" ? { marginHorizontal: 12 } : {},
-    textStyles,
   ];
 
   // const render = (props) => <NativeTextInput {...props} />;
@@ -422,7 +406,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: labelColor || colors.light,
+                        color: colors.light,
                         opacity: labeled.interpolate({
                           inputRange: [0, 1],
                           outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -439,7 +423,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: labelColor || placeholder,
+                        color: placeholderColor,
                         opacity: hasActiveOutline ? labeled : 1,
                       },
                     ]}

package/src/components/Picker/Picker.js

@@ -194,7 +194,6 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
                     React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
         !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
 };
-export default withTheme(Picker);
 const styles = StyleSheet.create({
     marginsContainer: {
         alignSelf: "stretch",
@@ -265,3 +264,4 @@ const styles = StyleSheet.create({
         maxHeight: deviceHeight,
     },
 });
+export default withTheme(Picker);

package/src/components/Picker/Picker.tsx

@@ -406,8 +406,6 @@ const Picker: React.FC<PickerProps> = ({
   );
 };
 
-export default withTheme(Picker);
-
 const styles = StyleSheet.create({
   marginsContainer: {
     alignSelf: "stretch",
@@ -478,3 +476,5 @@ const styles = StyleSheet.create({
     maxHeight: deviceHeight,
   },
 });
+
+export default withTheme(Picker);

package/src/components/Stepper.js

@@ -3,7 +3,9 @@ import { View, Text } from "react-native";
 import { isNumber } from "lodash";
 import { withTheme } from "../theming";
 import IconButton from "./IconButton";
-const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, typeStyle, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
+import { extractStyles } from "../utilities";
+const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
+    const { viewStyles, textStyles } = extractStyles(style);
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
     const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
     const handlePlusOrMinus = (type) => {
@@ -22,7 +24,7 @@ const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultVal
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [valueProp]);
-    return (React.createElement(View, { style: [{ flexDirection: "row" }, style] },
+    return (React.createElement(View, { style: [{ flexDirection: "row" }, viewStyles] },
         React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
         React.createElement(Text, { style: [
                 typography.body1,
@@ -32,9 +34,8 @@ const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultVal
                     color: colors.medium,
                     marginHorizontal: 8,
                 },
-                typeStyle,
+                textStyles,
             ] }, value),
         React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
 };
-//oh hello
 export default withTheme(Stepper);

package/src/components/Stepper.tsx

@@ -6,14 +6,14 @@ import { withTheme } from "../theming";
 import type { Theme } from "../styles/DefaultTheme";
 import type { IconSlot } from "../interfaces/Icon";
 import IconButton from "./IconButton";
+import { extractStyles } from "../utilities";
 
 type Props = {
   min: number;
   max: number;
   value?: number;
   defaultValue?: number;
-  style?: StyleProp<ViewStyle>;
-  typeStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle | TextStyle>;
   iconSize: number;
   iconColor?: string;
   onChange?: (value: number) => void;
@@ -26,13 +26,13 @@ const Stepper: FC<Props> = ({
   value: valueProp,
   defaultValue,
   style,
-  typeStyle,
   iconSize = 24,
   iconColor,
   onChange,
   theme: { colors, typography },
   Icon,
 }) => {
+  const { viewStyles, textStyles } = extractStyles(style);
   const [value, setValue] = useState(defaultValue ?? 0);
 
   const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;
@@ -59,7 +59,7 @@ const Stepper: FC<Props> = ({
   }, [valueProp]);
 
   return (
-    <View style={[{ flexDirection: "row" }, style]}>
+    <View style={[{ flexDirection: "row" }, viewStyles]}>
       <IconButton
         Icon={Icon}
         icon="MaterialIcons/remove"
@@ -79,7 +79,7 @@ const Stepper: FC<Props> = ({
             color: colors.medium,
             marginHorizontal: 8,
           },
-          typeStyle,
+          textStyles,
         ]}
       >
         {value}
@@ -97,5 +97,5 @@ const Stepper: FC<Props> = ({
     </View>
   );
 };
-//oh hello
+
 export default withTheme(Stepper);

package/src/mappings/AudioPlayer.js

@@ -1,10 +1,27 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, StylesPanelSections, createColorProp, createNumberProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Audio Player",
     tag: "AudioPlayer",
     description: "Given a source URL, plays sounds & audio!",
     category: COMPONENT_TYPES.media,
-    layout: {},
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.Background,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+    ],
+    layout: {
+        backgroundColor: "#eee",
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 8,
+        paddingBottom: 8,
+        borderRadius: 24,
+        flexDirection: "row",
+        alignItems: "center",
+    },
     props: {
         source: {
             group: GROUPS.data,
@@ -16,5 +33,25 @@ export const SEED_DATA = {
             formType: FORM_TYPES.sourceUrl,
             propType: PROP_TYPES.OBJECT,
         },
+        sliderColor: createColorProp({
+            label: "Thumb Color",
+            defaultValue: "strong",
+        }),
+        completedTrackColor: createColorProp({
+            label: "Completed Track Color",
+            defaultValue: "background",
+        }),
+        remainingTrackColor: createColorProp({
+            label: "Remaining Track Color",
+            defaultValue: "light",
+        }),
+        trackThumbSize: createNumberProp({
+            label: "Thumb Size",
+            defaultValue: 24,
+        }),
+        playIconColor: createColorProp({
+            label: "Play Icon Color",
+            defaultValue: "strong",
+        }),
     },
 };

package/src/mappings/AudioPlayer.ts

@@ -3,6 +3,9 @@ import {
   COMPONENT_TYPES,
   FORM_TYPES,
   PROP_TYPES,
+  StylesPanelSections,
+  createColorProp,
+  createNumberProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,7 +13,24 @@ export const SEED_DATA = {
   tag: "AudioPlayer",
   description: "Given a source URL, plays sounds & audio!",
   category: COMPONENT_TYPES.media,
-  layout: {},
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.Background,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+  ],
+  layout: {
+    backgroundColor: "#eee",
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+    borderRadius: 24,
+    flexDirection: "row",
+    alignItems: "center",
+  },
   props: {
     source: {
       group: GROUPS.data,
@@ -23,5 +43,25 @@ export const SEED_DATA = {
       formType: FORM_TYPES.sourceUrl,
       propType: PROP_TYPES.OBJECT,
     },
+    sliderColor: createColorProp({
+      label: "Thumb Color",
+      defaultValue: "strong",
+    }),
+    completedTrackColor: createColorProp({
+      label: "Completed Track Color",
+      defaultValue: "background",
+    }),
+    remainingTrackColor: createColorProp({
+      label: "Remaining Track Color",
+      defaultValue: "light",
+    }),
+    trackThumbSize: createNumberProp({
+      label: "Thumb Size",
+      defaultValue: 24,
+    }),
+    playIconColor: createColorProp({
+      label: "Play Icon Color",
+      defaultValue: "strong",
+    }),
   },
 };

package/src/mappings/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     label: {
         label: "Label",
@@ -10,12 +10,6 @@ const SEED_DATA_PROPS = {
         required: true,
         group: GROUPS.data,
     },
-    labelSize: createNumberProp({
-        label: "Label Size",
-    }),
-    labelColor: createColorProp({
-        label: "Label Color",
-    }),
     mode: {
         label: "Mode",
         description: "Choose between date, time and datetime",
@@ -27,12 +21,6 @@ const SEED_DATA_PROPS = {
         options: ["date", "time", "datetime"],
         group: GROUPS.basic,
     },
-    borderColor: createColorProp({
-        label: "Border Color",
-    }),
-    borderColorActive: createColorProp({
-        label: "Border Color",
-    }),
     format: {
         label: "Format",
         description: "Create an output format for the date.",
@@ -151,14 +139,6 @@ export const SEED_DATA = [
         category: COMPONENT_TYPES.input,
         layout: null,
         triggers: [Triggers.OnDateChange],
-        StylesPanelSections: [
-            StylesPanelSections.Background,
-            StylesPanelSections.Borders,
-            StylesPanelSections.MarginsAndPaddings,
-            StylesPanelSections.Position,
-            StylesPanelSections.Size,
-            StylesPanelSections.Typography,
-        ],
         props: {
             ...SEED_DATA_PROPS,
             type: {

package/src/mappings/DatePicker.ts

@@ -5,9 +5,6 @@ import {
   FIELD_NAME,
   GROUPS,
   Triggers,
-  StylesPanelSections,
-  createNumberProp,
-  createColorProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -21,12 +18,6 @@ const SEED_DATA_PROPS = {
     required: true,
     group: GROUPS.data,
   },
-  labelSize: createNumberProp({
-    label: "Label Size",
-  }),
-  labelColor: createColorProp({
-    label: "Label Color",
-  }),
   mode: {
     label: "Mode",
     description: "Choose between date, time and datetime",
@@ -38,12 +29,6 @@ const SEED_DATA_PROPS = {
     options: ["date", "time", "datetime"],
     group: GROUPS.basic,
   },
-  borderColor: createColorProp({
-    label: "Border Color",
-  }),
-  borderColorActive: createColorProp({
-    label: "Border Color",
-  }),
   format: {
     label: "Format",
     description: "Create an output format for the date.",
@@ -165,14 +150,6 @@ export const SEED_DATA = [
     category: COMPONENT_TYPES.input,
     layout: null,
     triggers: [Triggers.OnDateChange],
-    StylesPanelSections: [
-      StylesPanelSections.Background,
-      StylesPanelSections.Borders,
-      StylesPanelSections.MarginsAndPaddings,
-      StylesPanelSections.Position,
-      StylesPanelSections.Size,
-      StylesPanelSections.Typography,
-    ],
     props: {
       ...SEED_DATA_PROPS,
       type: {

package/src/mappings/Stepper.js

@@ -1,11 +1,14 @@
-import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Stepper",
         tag: "Stepper",
         description: "A component used to control the quantity of something",
         category: COMPONENT_TYPES.control,
-        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            ...BLOCK_STYLES_SECTIONS,
+        ],
         layout: {},
         triggers: [Triggers.OnChange],
         props: {

package/src/mappings/Stepper.ts

@@ -6,6 +6,7 @@ import {
   createStaticNumberProp,
   Triggers,
   BLOCK_STYLES_SECTIONS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -14,7 +15,10 @@ export const SEED_DATA = [
     tag: "Stepper",
     description: "A component used to control the quantity of something",
     category: COMPONENT_TYPES.control,
-    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    stylesPanelSections: [
+      StylesPanelSections.Typography,
+      ...BLOCK_STYLES_SECTIONS,
+    ],
     layout: {},
     triggers: [Triggers.OnChange],
     props: {

package/src/mappings/TextField.js

@@ -62,7 +62,7 @@ const SEED_DATA_PROPS = {
         propType: PROP_TYPES.BOOLEAN,
     },
     disabled: {
-        group: GROUPS.basic,
+        group: GROUPS.data,
         label: "Disabled",
         description: "Whether the input should be disabled. Will prevent input and show a greyed out state.",
         formType: FORM_TYPES.boolean,
@@ -72,7 +72,7 @@ const SEED_DATA_PROPS = {
         required: false,
     },
     editable: {
-        group: GROUPS.advanced,
+        group: GROUPS.data,
         label: "Editable",
         description: "If false, the text is not editable",
         editable: true,
@@ -81,6 +81,16 @@ const SEED_DATA_PROPS = {
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
     },
+    blurOnSubmit: {
+        group: GROUPS.advanced,
+        label: "Blur On Submit",
+        description: "If true, the text field will blur when submitted. ",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+    },
     keyboardAppearance: {
         group: GROUPS.advanced,
         label: "Keyboard Appearance",

package/src/mappings/TextField.ts

@@ -77,7 +77,7 @@ const SEED_DATA_PROPS = {
     propType: PROP_TYPES.BOOLEAN,
   },
   disabled: {
-    group: GROUPS.basic,
+    group: GROUPS.data,
     label: "Disabled",
     description:
       "Whether the input should be disabled. Will prevent input and show a greyed out state.",
@@ -88,7 +88,7 @@ const SEED_DATA_PROPS = {
     required: false,
   },
   editable: {
-    group: GROUPS.advanced,
+    group: GROUPS.data,
     label: "Editable",
     description: "If false, the text is not editable",
     editable: true,
@@ -97,6 +97,16 @@ const SEED_DATA_PROPS = {
     formType: FORM_TYPES.boolean,
     propType: PROP_TYPES.BOOLEAN,
   },
+  blurOnSubmit: {
+    group: GROUPS.advanced,
+    label: "Blur On Submit",
+    description: "If true, the text field will blur when submitted. ",
+    editable: true,
+    required: false,
+    defaultValue: null,
+    formType: FORM_TYPES.boolean,
+    propType: PROP_TYPES.BOOLEAN,
+  },
   keyboardAppearance: {
     group: GROUPS.advanced,
     label: "Keyboard Appearance",

package/lib/commonjs/Provider.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Provider","React","Component","render","props","theme","children"],"sourceRoot":"../../src","sources":["Provider.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AAAwD;AAAA;AAAA;AAQzC,MAAMA,QAAQ,SAASC,KAAK,CAACC,SAAS,CAAQ;EAC3DC,MAAM,GAAG;IACP,oBACE,oBAAC,mBAAU,qBAET,oBAAC,sBAAa;MAAC,KAAK,EAAE,IAAI,CAACC,KAAK,CAACC;IAAM,GACpC,IAAI,CAACD,KAAK,CAACE,QAAQ,CACN,CACL;EAEjB;AACF;AAAC"}

package/lib/commonjs/components/Accordion/AccordionGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["AccordionGroup","label","expanded","expandedProp","openColor","closedColor","caretColor","caretColorProp","caretSize","icon","iconSize","style","children","theme","Icon","setExpanded","React","useState","textStyles","viewStyles","extractStyles","expandedColor","colors","primary","collapsedColor","labelColor","handlePressAction","styles","row","content","color","StyleSheet","create","flexDirection","alignItems","flex","justifyContent","marginRight","withTheme"],"sourceRoot":"../../src","sources":["AccordionGroup.tsx"],"mappings":";;;;;;AAAA;AACA;AAOA;AACA;AAGA;AAAgD;AAAA;AAAA;AAgBhD,MAAMA,cAAc,GAAG,QAaI;EAAA,IAbH;IACtBC,KAAK;IACLC,QAAQ,EAAEC,YAAY,GAAG,KAAK;IAC9BC,SAAS;IACTC,WAAW;IACXC,UAAU,EAAEC,cAAc;IAC1BC,SAAS,GAAG,EAAE;IACdC,IAAI;IACJC,QAAQ,GAAG,EAAE;IACbC,KAAK;IACLC,QAAQ;IACRC,KAAK;IACLC;EACmB,CAAC;EACpB,MAAM,CAACZ,QAAQ,EAAEa,WAAW,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAUd,YAAY,CAAC;EACrE,MAAM;IAAEe,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,wBAAa,EAACT,KAAK,CAAC;EACvD,MAAMU,aAAa,GAAGjB,SAAS,IAAIS,KAAK,CAACS,MAAM,CAACC,OAAO;EACvD,MAAMC,cAAc,GAAGnB,WAAW,IAAIQ,KAAK,CAACS,MAAM,CAACC,OAAO;EAC1D,MAAME,UAAU,GAAGvB,QAAQ,GAAGmB,aAAa,GAAGG,cAAc;EAC5D,MAAMlB,UAAU,GAAGC,cAAc,IAAIkB,UAAU;EAE/C,MAAMC,iBAAiB,GAAG,MAAM;IAC9BX,WAAW,CAAC,CAACb,QAAQ,CAAC;EACxB,CAAC;EAED,oBACE,uDACE,oBAAC,sBAAS;IACR,KAAK,EAAE,CAACyB,MAAM,CAACC,GAAG,EAAET,UAAU,CAAE;IAChC,OAAO,EAAEO,iBAAkB;IAC3B,iBAAiB,EAAC;EAAQ,GAEzBjB,IAAI,gBACH,oBAAC,IAAI;IACH,IAAI,EAAEA,IAAK;IACX,IAAI,EAAEC,QAAS;IACf,KAAK,EAAEe,UAAW;IAClB,KAAK,EAAEE,MAAM,CAAClB;EAAK,EACnB,GACA,IAAI,eACR,oBAAC,iBAAI;IAAC,KAAK,EAAEkB,MAAM,CAACE;EAAQ,gBAC1B,oBAAC,aAAI;IACH,UAAU,EAAE,KAAM;IAClB,KAAK,EAAE,CACLX,UAAU,EACV;MACEY,KAAK,EAAEL;IACT,CAAC;EACD,GAEDxB,KAAK,CACD,CACF,eACP,oBAAC,IAAI;IACH,IAAI,EACFC,QAAQ,GACJ,iCAAiC,GACjC,mCACL;IACD,KAAK,EAAEI,UAAW;IAClB,IAAI,EAAEE;EAAU,EAChB,CACQ,EACXN,QAAQ,GAAGU,QAAQ,GAAG,IAAI,CAC1B;AAEP,CAAC;AAED,MAAMe,MAAM,GAAGI,uBAAU,CAACC,MAAM,CAAC;EAC/BJ,GAAG,EAAE;IACHK,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd,CAAC;EACDL,OAAO,EAAE;IACPM,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE;EAClB,CAAC;EACD3B,IAAI,EAAE;IACJ4B,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAAC,eAEY,IAAAC,kBAAS,EAACtC,cAAc,CAAC;AAAA"}

package/lib/commonjs/components/Accordion/AccordionItem.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["AccordionItem","Icon","icon","label","style","iconColor","theme","rest","textStyles","viewStyles","extractStyles","styles","container","row","colors","primary","item","content","StyleSheet","create","padding","flexDirection","alignItems","paddingLeft","marginVertical","flex","justifyContent","withTheme"],"sourceRoot":"../../src","sources":["AccordionItem.tsx"],"mappings":";;;;;;AAAA;AACA;AAQA;AAEA;AACA;AAA0C;AAAA;AAAA;AAAA;AAW1C,MAAMA,aAAa,GAAG,QAQT;EAAA,IARU;IACrBC,IAAI;IACJC,IAAI;IACJC,KAAK;IACLC,KAAK;IACLC,SAAS;IACTC,KAAK;IACL,GAAGC;EACE,CAAC;EACN,MAAM;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,wBAAa,EAACN,KAAK,CAAC;EAEvD,oBACE,oBAAC,sBAAS;IAAC,KAAK,EAAE,CAACO,MAAM,CAACC,SAAS,EAAEH,UAAU;EAAE,GAAKF,IAAI,gBACxD,oBAAC,iBAAI;IAAC,KAAK,EAAEI,MAAM,CAACE;EAAI,GACrBX,IAAI,gBACH,oBAAC,IAAI;IACH,IAAI,EAAEA,IAAK;IACX,IAAI,EAAE,EAAG;IACT,KAAK,EAAEG,SAAS,IAAIC,KAAK,CAACQ,MAAM,CAACC;EAAQ,EACzC,GACA,IAAI,eACR,oBAAC,iBAAI;IAAC,KAAK,EAAE,CAACJ,MAAM,CAACK,IAAI,EAAEL,MAAM,CAACM,OAAO;EAAE,gBACzC,oBAAC,aAAI;IAAC,UAAU,EAAE,KAAM;IAAC,KAAK,EAAET;EAAW,GACxCL,KAAK,CACD,CACF,CACF,CACG;AAEhB,CAAC;AAED,MAAMQ,MAAM,GAAGO,uBAAU,CAACC,MAAM,CAAC;EAC/BP,SAAS,EAAE;IACTQ,OAAO,EAAE;EACX,CAAC;EACDP,GAAG,EAAE;IACHQ,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,WAAW,EAAE;EACf,CAAC;EACDP,IAAI,EAAE;IACJQ,cAAc,EAAE,CAAC;IACjBD,WAAW,EAAE;EACf,CAAC;EACDN,OAAO,EAAE;IACPQ,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAAC,eAEY,IAAAC,kBAAS,EAAC3B,aAAa,CAAC;AAAA"}

package/lib/commonjs/components/Accordion/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AACA;AAA2D"}

package/lib/commonjs/components/ActionSheet/ActionSheet.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ActionSheet","visible","onClose","children","styles","wrapper","overlay","groupWrapper","group","React","Children","toArray","filter","child","type","ActionSheetCancel","StyleSheet","create","flex","display","flexDirection","position","top","left","right","bottom","backgroundColor","opacity","justifyContent","marginBottom","borderRadius","marginHorizontal","marginVertical","overflow"],"sourceRoot":"../../src","sources":["ActionSheet.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAAoD;AAQpD,MAAMA,WAAW,GAAG,QAAmD;EAAA,IAAlD;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO;IAAEC;EAAgB,CAAC;EAChE,OAAOF,OAAO,gBACZ,6BAAC,eAAM,qBACL,6BAAC,kBAAS;IAAC,KAAK,EAAEG,MAAM,CAACC,OAAQ;IAAC,OAAO,EAAEH;EAAQ,gBACjD,6BAAC,iBAAI;IAAC,KAAK,EAAEE,MAAM,CAACE;EAAQ,EAAG,eAC/B,6BAAC,iBAAI;IAAC,KAAK,EAAEF,MAAM,CAACG;EAAa,gBAC/B,6BAAC,iBAAI;IAAC,KAAK,EAAEH,MAAM,CAACI;EAAM,GACvBC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACR,QAAQ,CAAC,CAACS,MAAM,CACrCC,KAAU,IAAK,CAAAA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,IAAI,MAAKC,0BAAiB,CAClD,CACI,eACP,6BAAC,iBAAI;IAAC,KAAK,EAAEX,MAAM,CAACI;EAAM,GACvBC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACR,QAAQ,CAAC,CAACS,MAAM,CACrCC,KAAU,IAAKA,KAAK,CAACC,IAAI,KAAKC,0BAAiB,CACjD,CACI,CACF,CACG,CACL,gBAET,2DACD;AACH,CAAC;AAED,MAAMX,MAAM,GAAGY,uBAAU,CAACC,MAAM,CAAC;EAC/BZ,OAAO,EAAE;IACPa,IAAI,EAAE,CAAC;IACPC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACjB,CAAC;EACDd,OAAO,EAAE;IACPe,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,eAAe,EAAE,SAAS;IAC1BC,OAAO,EAAE;EACX,CAAC;EACDpB,YAAY,EAAE;IACZW,IAAI,EAAE,CAAC;IACPE,aAAa,EAAE,QAAQ;IACvBQ,cAAc,EAAE,UAAU;IAC1BT,OAAO,EAAE,MAAM;IACfU,YAAY,EAAE;EAChB,CAAC;EACDrB,KAAK,EAAE;IACLW,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,QAAQ;IACvBU,YAAY,EAAE,EAAE;IAChBC,gBAAgB,EAAE,CAAC;IACnBC,cAAc,EAAE,GAAG;IACnBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAAC,eAEYjC,WAAW;AAAA"}

package/lib/commonjs/components/ActionSheet/ActionSheetCancel.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ActionSheetCancel","label","color","style","onPress"],"sourceRoot":"../../src","sources":["ActionSheetCancel.tsx"],"mappings":";;;;;;AAAA;AAEA;AAAgD;AAShD,MAAMA,iBAA2D,GAAG,QAK9D;EAAA,IAL+D;IACnEC,KAAK,GAAG,QAAQ;IAChBC,KAAK;IACLC,KAAK;IACLC;EACF,CAAC;EACC,oBACE,6BAAC,wBAAe;IACd,KAAK,EAAEH,KAAM;IACb,KAAK,EAAEC,KAAK,IAAI,SAAU;IAC1B,KAAK,EAAE,CAACC,KAAK,CAAE;IACf,OAAO,EAAEC;EAAQ,EACjB;AAEN,CAAC;AAAC,eAEaJ,iBAAiB;AAAA"}

package/lib/commonjs/components/ActionSheet/ActionSheetItem.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ActionSheetItem","label","style","color","onPress","textStyles","viewStyles","extractStyles","styles","wrapper","StyleSheet","create","borderBottomWidth","hairlineWidth","borderBottomColor","backgroundColor","minHeight","overflow","display","justifyContent","fontSize","textAlign","fontWeight","paddingHorizontal","paddingVertical","alignSelf"],"sourceRoot":"../../src","sources":["ActionSheetItem.tsx"],"mappings":";;;;;;AAAA;AACA;AAQA;AAAgD;AAShD,MAAMA,eAAyD,GAAG,QAK5D;EAAA,IAL6D;IACjEC,KAAK;IACLC,KAAK;IACLC,KAAK;IACLC;EACF,CAAC;EACC,MAAM;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,wBAAa,EAACL,KAAK,CAAC;EACvD,oBACE,6BAAC,6BAAgB;IACf,aAAa,EAAE,GAAI;IACnB,KAAK,EAAE,CAACM,MAAM,CAACC,OAAO,EAAEH,UAAU,CAAE;IACpC,OAAO,EAAEF;EAAQ,gBAEjB,6BAAC,iBAAI;IAAC,KAAK,EAAE,CAACI,MAAM,CAACP,KAAK,EAAEI,UAAU,EAAE;MAAEF;IAAM,CAAC;EAAE,GAAEF,KAAK,CAAQ,CACjD;AAEvB,CAAC;AAED,MAAMO,MAAM,GAAGE,uBAAU,CAACC,MAAM,CAAC;EAC/BF,OAAO,EAAE;IACPG,iBAAiB,EAAEF,uBAAU,CAACG,aAAa;IAC3CC,iBAAiB,EAAE,SAAS;IAC5BC,eAAe,EAAE,SAAS;IAC1BC,SAAS,EAAE,EAAE;IACbC,QAAQ,EAAE,QAAQ;IAClBC,OAAO,EAAE,MAAM;IACfC,cAAc,EAAE;EAClB,CAAC;EACDlB,KAAK,EAAE;IACLmB,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE,QAAQ;IACnBlB,KAAK,EAAE,SAAS;IAChBmB,UAAU,EAAE,KAAK;IACjBL,QAAQ,EAAE,QAAQ;IAClBM,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,EAAE;IACnBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAAC,eAEYzB,eAAe;AAAA"}