@draftbit/core 46.4.4-c5d4b3.2 → 46.4.4-c96c31.2

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

@@ -38,4 +38,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=KeyboardAvoidingView.d.ts.map

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

@@ -102,4 +102,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=KeyboardAwareScrollView.d.ts.map

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

@@ -166,4 +166,3 @@ export declare const SEED_DATA: ({
         height?: undefined;
     };
 })[];
-//# sourceMappingURL=Layout.d.ts.map

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

@@ -95,4 +95,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=LinearGradient.d.ts.map

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

@@ -29,4 +29,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=MapCallout.d.ts.map

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

@@ -52,4 +52,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=MapMarker.d.ts.map

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

@@ -166,4 +166,3 @@ export declare const SEED_DATA: {
         apiKey: any;
     };
 };
-//# sourceMappingURL=MapView.d.ts.map

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

@@ -49,4 +49,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=Modal.d.ts.map

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

@@ -296,4 +296,3 @@ export declare const SEED_DATA: {
         };
     };
 }[];
-//# sourceMappingURL=NumberInput.d.ts.map

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

@@ -157,4 +157,3 @@ export declare const SEED_DATA: {
     };
     layout: {};
 }[];
-//# sourceMappingURL=Picker.d.ts.map

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

@@ -96,4 +96,3 @@ export declare const SEED_DATA: {
         height: number;
     };
 }[];
-//# sourceMappingURL=ProgressBar.d.ts.map

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

@@ -106,4 +106,3 @@ export declare const SEED_DATA: {
         height: number;
     };
 };
-//# sourceMappingURL=ProgressCircle.d.ts.map

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

@@ -178,4 +178,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=ProgressIndicator.d.ts.map

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

@@ -69,4 +69,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=RadioButton.d.ts.map

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

@@ -31,4 +31,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=RadioButtonGroup.d.ts.map

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

@@ -40,4 +40,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=RadioButtonRow.d.ts.map

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

@@ -70,4 +70,3 @@ export declare const SEED_DATA: ({
     };
     layout: {};
 })[];
-//# sourceMappingURL=RowBodyIcon.d.ts.map

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

@@ -163,4 +163,3 @@ export declare const SEED_DATA: ({
     };
     layout: {};
 })[];
-//# sourceMappingURL=RowHeadlineImageCaption.d.ts.map

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

@@ -167,4 +167,3 @@ export declare const SEED_DATA: ({
         };
     };
 })[];
-//# sourceMappingURL=RowHeadlineImageIcon.d.ts.map

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

@@ -21,4 +21,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=SVG.d.ts.map

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

@@ -30,4 +30,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=SafeAreaView.d.ts.map

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

@@ -48,4 +48,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=ScrollView.d.ts.map

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

@@ -107,4 +107,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=Slider.d.ts.map

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

@@ -72,4 +72,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=StarRating.d.ts.map

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

@@ -64,4 +64,3 @@ export declare const SEED_DATA: {
         };
     };
 }[];
-//# sourceMappingURL=Stepper.d.ts.map

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

@@ -21,4 +21,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=Surface.d.ts.map

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

@@ -104,4 +104,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=Swiper.d.ts.map

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

@@ -5,4 +5,3 @@ export declare const SEED_DATA: {
     category: string;
     props: {};
 };
-//# sourceMappingURL=SwiperItem.d.ts.map

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

@@ -161,4 +161,3 @@ export declare const SEED_DATA: ({
         };
     };
 })[];
-//# sourceMappingURL=Switch.d.ts.map

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

@@ -408,4 +408,3 @@ export declare const SEED_DATA: ({
     };
     description?: undefined;
 })[];
-//# sourceMappingURL=Text.d.ts.map

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

@@ -239,4 +239,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=TextArea.d.ts.map

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

@@ -606,4 +606,3 @@ export declare const SEED_DATA: ({
     };
     layout: {};
 })[];
-//# sourceMappingURL=TextField.d.ts.map

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

@@ -392,4 +392,3 @@ export declare const SEED_DATA: {
         };
     };
 }[];
-//# sourceMappingURL=TextInput.d.ts.map

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

@@ -113,4 +113,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=ToggleButton.d.ts.map

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

@@ -19,4 +19,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=Touchable.d.ts.map

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

@@ -126,4 +126,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=Video.d.ts.map

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

@@ -176,4 +176,3 @@ export declare const SEED_DATA: {
         };
     };
 };
-//# sourceMappingURL=View.d.ts.map

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

@@ -132,4 +132,3 @@ export declare const SEED_DATA: {
         applicationNameForUserAgent: any;
     };
 };
-//# sourceMappingURL=WebView.d.ts.map

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

@@ -1,4 +1,3 @@
 import type { Theme } from "./DefaultTheme";
 declare const DarkTheme: Theme;
 export default DarkTheme;
-//# sourceMappingURL=DarkTheme.d.ts.map

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

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

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

@@ -3,4 +3,3 @@ import type { Fonts } from "@draftbit/types";
 export default function configureFonts(config?: {
     [platform in PlatformOSType | "default"]?: Fonts;
 }): Fonts;
-//# sourceMappingURL=fonts.d.ts.map

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

@@ -1,3 +1,2 @@
 import { Animated } from "react-native";
 export default function overlay<T extends Animated.Value | number>(elevation: T, surfaceColor?: string): T extends number ? string : Animated.AnimatedInterpolation;
-//# sourceMappingURL=overlay.d.ts.map

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

@@ -21,4 +21,3 @@ export default function shadow(elevation?: number | Animated.Value): {
     shadowOpacity: number;
     shadowRadius: number;
 };
-//# sourceMappingURL=shadow.d.ts.map

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

@@ -6,4 +6,3 @@ export declare const ThemeProvider: import("react").ComponentType<{
 }, C>(WrappedComponent: import("react").ComponentType<Props> & C) => import("react").ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
 }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<Props> & C, {}>, useTheme: (overrides?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined) => any;
-//# sourceMappingURL=theming.d.ts.map

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

@@ -24,4 +24,3 @@ export declare function extractBorderAndMarginStyles(style: StyleProp<any>, addi
  */
 export declare function applyStyles(baseStyles: Array<StyleProp<any>>, stylesToApply: StyleProp<any> | undefined): any;
 export declare function getValueForRadioButton(value: string | number): string;
-//# sourceMappingURL=utilities.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.4.4-c5d4b3.2+c5d4b3f",
+  "version": "46.4.4-c96c31.2+c96c31d",
   "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-c5d4b3.2+c5d4b3f",
+    "@draftbit/types": "^46.4.4-c96c31.2+c96c31d",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -81,5 +81,5 @@
       ]
     ]
   },
-  "gitHead": "c5d4b3fffefa427120c343b5111f9dc6c08e7aad"
+  "gitHead": "c96c31d5469aef87c29c27294246827cbed9ae7e"
 }

package/src/components/Carousel.js

@@ -46,7 +46,7 @@ function Carousel({ data, children, dotColor = "strong", style, ...rest }) {
 }
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: "#eee",
+        backgroundColor: "#eeeeee",
     },
     pager: {
         position: "absolute",
@@ -62,7 +62,7 @@ const styles = StyleSheet.create({
         width: 10,
         height: 10,
         borderRadius: 20,
-        backgroundColor: "#000",
+        backgroundColor: "#000000",
     },
 });
 export default withTheme(Carousel);

package/src/components/Carousel.tsx

@@ -111,7 +111,7 @@ function Carousel({
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "#eee",
+    backgroundColor: "#eeeeee",
   },
   pager: {
     position: "absolute",
@@ -127,7 +127,7 @@ const styles = StyleSheet.create({
     width: 10,
     height: 10,
     borderRadius: 20,
-    backgroundColor: "#000",
+    backgroundColor: "#000000",
   },
 });
 

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 { 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 === null || textStyles === void 0 ? void 0 : 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 = borderColor = 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,
@@ -245,6 +250,7 @@ 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] },
@@ -282,7 +288,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 +300,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: placeholderColor,
+                                        color: labelColor || placeholder,
                                         opacity: hasActiveOutline ? labeled : 1,
                                     },
                                 ], numberOfLines: 1 }, label))) : null,

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);
 
@@ -47,10 +48,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 +89,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 +115,8 @@ 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();
@@ -211,8 +222,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 +247,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 = borderColor = inputBorderColor || colors.light;
+    underlineColor = inputBorderColor || colors.light;
     backgroundColor = colors.background;
   }
 
@@ -306,6 +320,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)
@@ -351,6 +366,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     styles.input,
     inputStyle,
     type === "solid" ? { marginHorizontal: 12 } : {},
+    textStyles,
   ];
 
   // const render = (props) => <NativeTextInput {...props} />;
@@ -406,7 +422,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 +439,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: placeholderColor,
+                        color: labelColor || placeholder,
                         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,8 +34,9 @@ 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);