@draftbit/core 46.4.4-e6ab40.2 → 46.4.4-f71daf.2

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

@@ -58,6 +58,26 @@ export declare const SEED_DATA: {
             formType: string;
             propType: string;
         };
+        blurOnSubmit: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        disabled: {
+            label: string;
+            description: string;
+            group: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+        };
         caretHidden: {
             group: string;
             label: string;
@@ -84,7 +104,7 @@ export declare const SEED_DATA: {
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: boolean;
+            defaultValue: null;
             formType: string;
             propType: string;
         };

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextArea.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4QrB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextArea.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuRrB,CAAC"}

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

@@ -125,7 +125,17 @@ export declare const SEED_DATA: ({
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        blurOnSubmit: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
             formType: string;
             propType: string;
         };
@@ -432,7 +442,17 @@ export declare const SEED_DATA: ({
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        blurOnSubmit: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
             formType: string;
             propType: string;
         };

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextField.ts"],"names":[],"mappings":"AAmTA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgGrB,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextField.ts"],"names":[],"mappings":"AA6TA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgGrB,CAAC"}

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

@@ -108,6 +108,16 @@ export declare const SEED_DATA: {
             formType: string;
             propType: string;
         };
+        disabled: {
+            label: string;
+            description: string;
+            group: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+        };
         scrollEnabled: {
             group: string;
             label: string;
@@ -280,7 +290,7 @@ export declare const SEED_DATA: {
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: boolean;
+            defaultValue: null;
             formType: string;
             propType: string;
         };
@@ -349,6 +359,16 @@ export declare const SEED_DATA: {
             formType: string;
             propType: string;
         };
+        blurOnSubmit: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
         returnKeyType: {
             group: string;
             label: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextInput.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyVrB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextInput.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoWrB,CAAC"}

package/lib/typescript/src/styles/DefaultTheme.d.ts

@@ -1498,5 +1498,5 @@ declare const DefaultTheme: {
     };
 };
 export default DefaultTheme;
-export type Theme = typeof DefaultTheme;
+export declare type Theme = typeof DefaultTheme;
 //# sourceMappingURL=DefaultTheme.d.ts.map

package/lib/typescript/src/styles/DefaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/DefaultTheme.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GjB,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,MAAM,MAAM,KAAK,GAAG,OAAO,YAAY,CAAC"}
+{"version":3,"file":"DefaultTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/DefaultTheme.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GjB,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,oBAAY,KAAK,GAAG,OAAO,YAAY,CAAC"}

package/lib/typescript/src/utilities.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="lodash" />
-import { StyleProp } from "react-native";
+import { StyleProp, TextStyle } from "react-native";
 export declare function extractStyles(style: StyleProp<any>): {
-    viewStyles: Partial<any>;
-    textStyles: import("lodash").Dictionary<any>;
+    viewStyles: any;
+    textStyles: TextStyle;
 };
 export declare const borderStyleNames: string[];
 export declare const marginStyleNames: string[];

package/lib/typescript/src/utilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../src/utilities.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,SAAS,EAAa,MAAM,cAAc,CAAC;AAWhE,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC;;;EAkClD;AAED,eAAO,MAAM,gBAAgB,UAwB5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAU5B,CAAC;AAEF,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,sBAAsB,CAAC,EAAE,MAAM,EAAE,EACjC,sBAAsB,CAAC,EAAE,MAAM,EAAE;;;EAqBlC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EACjC,aAAa,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,OAe1C;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,UAQ5D"}
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../src/utilities.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhE,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC;;;EA+BlD;AAED,eAAO,MAAM,gBAAgB,UAwB5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAU5B,CAAC;AAEF,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,sBAAsB,CAAC,EAAE,MAAM,EAAE,EACjC,sBAAsB,CAAC,EAAE,MAAM,EAAE;;;EAqBlC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EACjC,aAAa,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,OAe1C;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,UAQ5D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.4.4-e6ab40.2+e6ab400",
+  "version": "46.4.4-f71daf.2+f71daf4",
   "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.4.4-e6ab40.2+e6ab400",
+    "@draftbit/types": "^46.4.4-f71daf.2+f71daf4",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -70,8 +70,18 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "sourceMaps": false
+        }
+      ],
+      [
+        "module",
+        {
+          "sourceMaps": false
+        }
+      ],
       [
         "typescript",
         {
@@ -81,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "e6ab40015a26703daf93e8e4068f1e42cfc51991"
+  "gitHead": "f71daf49835bde68f0c9b2f106c2d9177e29533b"
 }

package/src/components/DatePicker/DatePicker.js

@@ -6,6 +6,7 @@ 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;
@@ -24,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, placeholder, ...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, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -36,6 +37,7 @@ 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 { viewStyles, textStyles } = extractStyles(style);
     const getValidDate = () => {
         if (!value) {
             return new Date();
@@ -125,8 +127,10 @@ 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 = typography.subtitle1.fontSize;
-    const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
+    const MAXIMIZED_LABEL_FONT_SIZE = textStyles.fontSize || typography.subtitle1.fontSize;
+    const MINIMIZED_LABEL_FONT_SIZE = labelSize
+        ? labelSize
+        : typography.caption.fontSize;
     const hasActiveOutline = focused;
     let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
     inputTextColor = colors.strong;
@@ -138,9 +142,9 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         backgroundColor = colors.divider;
     }
     else {
-        activeColor = colors.primary;
-        placeholderColor = borderColor = colors.light;
-        underlineColor = colors.light;
+        activeColor = inputBorderColorActive || colors.primary;
+        placeholderColor = inputBorderColor || colors.light;
+        underlineColor = inputBorderColor || colors.light;
         backgroundColor = colors.background;
     }
     const { lineHeight, ...subtitle1 } = typography.subtitle1;
@@ -202,6 +206,7 @@ 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,
@@ -252,7 +257,11 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(View, { style: [styles.container, style] },
                     leftIconName && leftIconMode === "outset" ? (React.createElement(Icon, { ...leftIconProps, style: leftIconStyle })) : null,
-                    React.createElement(View, { style: [containerStyle, style ? { height: style.height } : {}] },
+                    React.createElement(View, { style: [
+                            containerStyle,
+                            style ? { height: style.height } : {},
+                            viewStyles,
+                        ] },
                         type === "underline" ? (
                         // When type === 'flat', render an underline
                         React.createElement(Animated.View, { style: [
@@ -282,7 +291,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: colors.light,
+                                        color: labelColor || colors.light,
                                         opacity: labeled.interpolate({
                                             inputRange: [0, 1],
                                             outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -294,7 +303,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: placeholderColor,
+                                        color: labelColor || placeholderColor,
                                         opacity: hasActiveOutline ? labeled : 1,
                                     },
                                 ], numberOfLines: 1 }, label))) : null,
@@ -302,7 +311,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                 ...leftIconStyle,
                                 marginLeft: type === "solid" ? 16 : 0,
                             } })) : null,
-                        React.createElement(NativeTextInput, { value: formatDate(), placeholder: label ? placeholder1 : placeholder, editable: !disabled, placeholderTextColor: placeholderColor, selectionColor: activeColor, onFocus: _handleFocus, onBlur: _handleBlur, underlineColorAndroid: "transparent", style: inputStyles, ...props })),
+                        React.createElement(NativeTextInput, { value: formatDate(), placeholder: label ? placeholder1 : placeholder, editable: !disabled, placeholderTextColor: placeholderColor, selectionColor: activeColor, onFocus: _handleFocus, onBlur: _handleBlur, underlineColorAndroid: "transparent", style: [inputStyles, textStyles], ...props })),
                     rightIconName ? (React.createElement(Icon, { name: rightIconName, size: ICON_SIZE, color: colors.light, style: {
                             position: "absolute",
                             right: 16,

package/src/components/DatePicker/DatePicker.tsx

@@ -23,6 +23,7 @@ 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);
 
@@ -31,14 +32,13 @@ const BLUR_ANIMATION_DURATION = 180;
 const ICON_SIZE = 24;
 
 type Props = {
-  style?: StyleProp<ViewStyle> & { height?: number };
+  style?: StyleProp<ViewStyle | TextStyle> & { height?: number };
   theme: Theme;
   // initialDate?: string;
   // locale?: string;
   // minuteInterval?: number;
   // timeZoneOffsetInMinutes?: number;
   // error?: boolean;
-  // type?: string;
   date?: Date;
   format?: string;
   onDateChange?: (data?: Date) => void;
@@ -47,10 +47,14 @@ 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;
 
@@ -84,7 +88,11 @@ 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);
@@ -106,6 +114,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     width: number;
   }>({ measured: false, width: 0 });
 
+  const { viewStyles, textStyles } = extractStyles(style);
+
   const getValidDate = (): Date => {
     if (!value) {
       return new Date();
@@ -211,8 +221,11 @@ 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 = typography.subtitle1.fontSize;
-  const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
+  const MAXIMIZED_LABEL_FONT_SIZE =
+    textStyles.fontSize || typography.subtitle1.fontSize;
+  const MINIMIZED_LABEL_FONT_SIZE = labelSize
+    ? labelSize
+    : typography.caption.fontSize;
 
   const hasActiveOutline = focused;
 
@@ -233,9 +246,9 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     underlineColor = "transparent";
     backgroundColor = colors.divider;
   } else {
-    activeColor = colors.primary;
-    placeholderColor = borderColor = colors.light;
-    underlineColor = colors.light;
+    activeColor = inputBorderColorActive || colors.primary;
+    placeholderColor = inputBorderColor || colors.light;
+    underlineColor = inputBorderColor || colors.light;
     backgroundColor = colors.background;
   }
 
@@ -306,6 +319,7 @@ 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)
@@ -364,7 +378,11 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
               <Icon {...leftIconProps} style={leftIconStyle} />
             ) : null}
             <View
-              style={[containerStyle, style ? { height: style.height } : {}]}
+              style={[
+                containerStyle,
+                style ? { height: style.height } : {},
+                viewStyles,
+              ]}
             >
               {type === "underline" ? (
                 // When type === 'flat', render an underline
@@ -406,7 +424,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: colors.light,
+                        color: labelColor || colors.light,
                         opacity: labeled.interpolate({
                           inputRange: [0, 1],
                           outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -423,7 +441,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: placeholderColor,
+                        color: labelColor || placeholderColor,
                         opacity: hasActiveOutline ? labeled : 1,
                       },
                     ]}
@@ -453,7 +471,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                 onFocus={_handleFocus}
                 onBlur={_handleBlur}
                 underlineColorAndroid={"transparent"}
-                style={inputStyles}
+                style={[inputStyles, textStyles]}
                 {...props}
               />
             </View>

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,7 +34,7 @@ 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 } })));
 };

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}

package/src/index.js

@@ -31,7 +31,6 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/A
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
-export { Table, TableRow, TablePaginator, TableHeader, TableCell, TableTitle, } from "./components/Table";
 /* Deprecated: Fix or Delete!  */
 export { default as CardBlock } from "./components/CardBlock";
 export { default as CardContainer } from "./components/CardContainer";

package/src/index.tsx

@@ -51,15 +51,6 @@ export {
   RadioButtonFieldGroup,
 } from "./components/RadioButton/index";
 
-export {
-  Table,
-  TableRow,
-  TablePaginator,
-  TableHeader,
-  TableCell,
-  TableTitle,
-} from "./components/Table";
-
 /* Deprecated: Fix or Delete!  */
 export { default as CardBlock } from "./components/CardBlock";
 export { default as CardContainer } from "./components/CardContainer";

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",
+        }),
     },
 };