@draftbit/core 46.4.4-cbd3a5.2 → 46.4.4-cd0423.2

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;
   }
 
@@ -259,6 +273,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
       borderTopRightRadius: roundness,
       paddingBottom: 12,
       marginTop: 16,
+      backgroundColor,
     };
   } else {
     containerStyle = {
@@ -306,6 +321,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,21 +367,20 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     styles.input,
     inputStyle,
     type === "solid" ? { marginHorizontal: 12 } : {},
+    textStyles,
   ];
 
   // const render = (props) => <NativeTextInput {...props} />;
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container]}>
       <Touchable disabled={disabled} onPress={toggleVisibility}>
         <View pointerEvents="none">
-          <View style={[styles.container, style]}>
+          <View style={[styles.container]}>
             {leftIconName && leftIconMode === "outset" ? (
               <Icon {...leftIconProps} style={leftIconStyle} />
             ) : null}
-            <View
-              style={[containerStyle, style ? { height: style.height } : {}]}
-            >
+            <View style={[containerStyle, style]}>
               {type === "underline" ? (
                 // When type === 'flat', render an underline
                 <Animated.View
@@ -406,7 +421,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 +438,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: placeholderColor,
+                        color: labelColor || placeholder,
                         opacity: hasActiveOutline ? labeled : 1,
                       },
                     ]}
@@ -453,7 +468,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                 onFocus={_handleFocus}
                 onBlur={_handleBlur}
                 underlineColorAndroid={"transparent"}
-                style={inputStyles}
+                style={[inputStyles, style]}
                 {...props}
               />
             </View>
@@ -497,6 +512,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
               <DateTimePicker
                 value={getValidDate()}
                 mode={mode}
+                style={inputStyles}
                 isVisible={pickerVisible}
                 toggleVisibility={toggleVisibility}
                 onChange={(_event: any, data: any) => {

package/src/components/DatePicker/{DatePickerComponent.web.js → DatePickerComponent.__web.js}

@@ -4,7 +4,7 @@ import { MuiPickersUtilsProvider, DatePicker, TimePicker, DateTimePicker, } from
 import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
 import { withTheme } from "../../theming";
 import Theme from "../../styles/DefaultTheme";
-const DatePickerComponent = ({ value, onChange, mode, toggleVisibility, isVisible, theme, }) => {
+const DatePickerComponent = ({ value, onChange, mode, style, toggleVisibility, isVisible, theme, }) => {
     const internalTheme = createMuiTheme({
         palette: {
             primary: {
@@ -25,6 +25,6 @@ const DatePickerComponent = ({ value, onChange, mode, toggleVisibility, isVisibl
             React.createElement(Picker, { value: value, open: isVisible, onChange: (d) => {
                     toggleVisibility();
                     onChange(null, d);
-                }, onClose: () => toggleVisibility(), variant: "dialog", TextFieldComponent: () => null }))));
+                }, onClose: () => toggleVisibility(), variant: "dialog", inputVariant: "outlined", style: style, TextFieldComponent: () => null }))));
 };
 export default withTheme(DatePickerComponent);

package/src/components/DatePicker/{DatePickerComponent.web.tsx → DatePickerComponent.__web.tsx}

@@ -15,6 +15,7 @@ const DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
   value,
   onChange,
   mode,
+  style,
   toggleVisibility,
   isVisible,
   theme,
@@ -49,6 +50,8 @@ const DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
           }}
           onClose={() => toggleVisibility()}
           variant="dialog"
+          inputVariant="outlined"
+          style={style}
           TextFieldComponent={() => null}
         />
       </ThemeProvider>

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, }) => {
+const DatePickerComponent = ({ value, onChange, style, 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: () => {
             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, { style: style, value: value, mode: mode, onChange: onChange, display: "default" }));
 };
 export default DatePickerComponent;

package/src/components/DatePicker/DatePickerComponent.tsx

@@ -7,6 +7,7 @@ import { DatePickerComponentProps as Props } from "./DatePickerComponentType";
 const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
   value,
   onChange,
+  style,
   mode,
   toggleVisibility,
 }) => {
@@ -26,6 +27,7 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
     />
   ) : (
     <DateTimePicker
+      style={style}
       value={value}
       mode={mode}
       onChange={onChange}

package/src/components/DatePicker/DatePickerComponentType.ts

@@ -4,6 +4,7 @@ export interface DatePickerComponentProps {
   value: Date;
   onChange: (e: any, data?: any) => void;
   mode: "date" | "time" | "datetime";
+  style?: any;
   toggleVisibility: () => void;
   isVisible?: boolean;
   theme?: typeof theme;

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/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, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     label: {
         label: "Label",
@@ -10,6 +10,16 @@ const SEED_DATA_PROPS = {
         required: true,
         group: GROUPS.data,
     },
+    labelSize: createNumberProp({
+        label: "Label Font Size",
+        group: GROUPS.basic,
+        description: "Label font size",
+        editable: true,
+        defaultValue: null,
+    }),
+    labelColor: createColorProp({
+        label: "Label Color",
+    }),
     mode: {
         label: "Mode",
         description: "Choose between date, time and datetime",
@@ -21,6 +31,12 @@ const SEED_DATA_PROPS = {
         options: ["date", "time", "datetime"],
         group: GROUPS.basic,
     },
+    borderColor: createColorProp({
+        label: "Default Border Color",
+    }),
+    borderColorActive: createColorProp({
+        label: "Active Border Color",
+    }),
     format: {
         label: "Format",
         description: "Create an output format for the date.",
@@ -29,7 +45,7 @@ const SEED_DATA_PROPS = {
         formType: FORM_TYPES.string,
         propType: PROP_TYPES.STRING,
         defaultValue: null,
-        group: GROUPS.basic,
+        group: GROUPS.data,
     },
     assistiveText: {
         label: "Assistive text",
@@ -39,7 +55,7 @@ const SEED_DATA_PROPS = {
         defaultValue: null,
         editable: true,
         required: false,
-        group: GROUPS.basic,
+        group: GROUPS.data,
     },
     // locale: {
     //   label: "Locale",
@@ -81,7 +97,7 @@ const SEED_DATA_PROPS = {
         defaultValue: false,
         editable: true,
         required: false,
-        group: GROUPS.basic,
+        group: GROUPS.data,
     },
     // error: {
     //   label: "Error",
@@ -139,6 +155,14 @@ export const SEED_DATA = [
         category: COMPONENT_TYPES.input,
         layout: null,
         triggers: [Triggers.OnDateChange],
+        StylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Borders,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Size,
+        ],
         props: {
             ...SEED_DATA_PROPS,
             type: {

package/src/mappings/DatePicker.ts

@@ -5,6 +5,9 @@ import {
   FIELD_NAME,
   GROUPS,
   Triggers,
+  StylesPanelSections,
+  createNumberProp,
+  createColorProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -18,6 +21,16 @@ const SEED_DATA_PROPS = {
     required: true,
     group: GROUPS.data,
   },
+  labelSize: createNumberProp({
+    label: "Label Font Size",
+    group: GROUPS.basic,
+    description: "Label font size",
+    editable: true,
+    defaultValue: null,
+  }),
+  labelColor: createColorProp({
+    label: "Label Color",
+  }),
   mode: {
     label: "Mode",
     description: "Choose between date, time and datetime",
@@ -29,6 +42,12 @@ const SEED_DATA_PROPS = {
     options: ["date", "time", "datetime"],
     group: GROUPS.basic,
   },
+  borderColor: createColorProp({
+    label: "Default Border Color",
+  }),
+  borderColorActive: createColorProp({
+    label: "Active Border Color",
+  }),
   format: {
     label: "Format",
     description: "Create an output format for the date.",
@@ -37,7 +56,7 @@ const SEED_DATA_PROPS = {
     formType: FORM_TYPES.string,
     propType: PROP_TYPES.STRING,
     defaultValue: null,
-    group: GROUPS.basic,
+    group: GROUPS.data,
   },
   assistiveText: {
     label: "Assistive text",
@@ -47,7 +66,7 @@ const SEED_DATA_PROPS = {
     defaultValue: null,
     editable: true,
     required: false,
-    group: GROUPS.basic,
+    group: GROUPS.data,
   },
   // locale: {
   //   label: "Locale",
@@ -90,7 +109,7 @@ const SEED_DATA_PROPS = {
     defaultValue: false,
     editable: true,
     required: false,
-    group: GROUPS.basic,
+    group: GROUPS.data,
   },
   // error: {
   //   label: "Error",
@@ -150,6 +169,14 @@ export const SEED_DATA = [
     category: COMPONENT_TYPES.input,
     layout: null,
     triggers: [Triggers.OnDateChange],
+    StylesPanelSections: [
+      StylesPanelSections.Typography,
+      StylesPanelSections.Background,
+      StylesPanelSections.Borders,
+      StylesPanelSections.MarginsAndPaddings,
+      StylesPanelSections.Position,
+      StylesPanelSections.Size,
+    ],
     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: {