@draftbit/core 46.2.4-710cbc.10 → 46.2.4-88e325.34

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

@@ -24,3 +24,4 @@ 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/lib/typescript/src/utilities.d.ts.map

@@ -0,0 +1 @@
+{"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.2.4-710cbc.10+710cbc93",
+  "version": "46.2.4-88e325.34+88e3252f",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,12 +41,12 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.3.0",
+    "@draftbit/types": "^46.4.3",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
     "@react-native-picker/picker": "2.4.2",
-    "@shopify/flash-list": "1.1.0",
+    "@shopify/flash-list": "1.2.0",
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
@@ -81,5 +81,5 @@
       ]
     ]
   },
-  "gitHead": "710cbc93659ee88f995f95167ad63f445cb48a19"
+  "gitHead": "88e3252feb7646fdd26bbbfd9b8174e97b5f2a51"
 }

package/src/components/Button.js

@@ -53,6 +53,8 @@ const Solid = ({ style, theme, ...props }) => {
 };
 const ButtonSolid = withTheme(Solid);
 export { ButtonSolid };
+const Button = withTheme(Solid);
+export { Button };
 const Outline = ({ style, theme, ...props }) => {
     return (React.createElement(Base, { style: [
             styles.outline,

package/src/components/Button.tsx

@@ -139,6 +139,9 @@ const Solid = ({ style, theme, ...props }: Props): JSX.Element => {
 const ButtonSolid: any = withTheme(Solid);
 export { ButtonSolid };
 
+const Button: any = withTheme(Solid);
+export { Button };
+
 const Outline = ({ style, theme, ...props }: Props): JSX.Element => {
   return (
     <Base

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/Stepper.js

@@ -36,4 +36,5 @@ const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultVal
             ] }, 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

@@ -97,5 +97,5 @@ const Stepper: FC<Props> = ({
     </View>
   );
 };
-
+//oh hello
 export default withTheme(Stepper);

package/src/components/Text.js

@@ -2,13 +2,19 @@ import * as React from "react";
 import { Text as NativeText, I18nManager } from "react-native";
 import { withTheme } from "../theming";
 class Text extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            nativeProps: {},
+        };
+    }
     setNativeProps(args) {
-        return this._root && this._root.setNativeProps(args);
+        this.state.nativeProps = args || {};
     }
     render() {
         const { style, ...rest } = this.props;
         const writingDirection = I18nManager.isRTL ? "rtl" : "ltr";
-        return (React.createElement(NativeText, { ...rest, ref: (c) => {
+        return (React.createElement(NativeText, { ...rest, ...this.state.nativeProps, ref: (c) => {
                 this._root = c;
             }, style: [
                 {

package/src/components/Text.tsx

@@ -10,8 +10,12 @@ type Props = {
 class Text extends React.Component<Props> {
   _root: any;
 
+  state: any = {
+    nativeProps: {},
+  };
+
   setNativeProps(args: TextProps) {
-    return this._root && this._root.setNativeProps(args);
+    this.state.nativeProps = args || {};
   }
 
   render() {
@@ -21,6 +25,7 @@ class Text extends React.Component<Props> {
     return (
       <NativeText
         {...rest}
+        {...this.state.nativeProps}
         ref={(c) => {
           this._root = c;
         }}

package/src/components/TextField.js

@@ -10,6 +10,7 @@ class TextField extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
+            nativeProps: {},
             labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
             focused: false,
             placeholder: this.props.error ? this.props.placeholder : "",
@@ -121,7 +122,10 @@ class TextField extends React.Component {
      * @internal
      */
     setNativeProps(args) {
-        return this._root && this._root.setNativeProps(args);
+        this.setState((state) => ({
+            ...state,
+            nativeState: args || {},
+        }));
     }
     isFocused() {
         return this._root && this._root.isFocused();
@@ -381,6 +385,7 @@ class TextField extends React.Component {
                     underlineColorAndroid: "transparent",
                     style: inputStyles,
                     ...rest,
+                    ...this.state.nativeProps,
                     value: this.state.value,
                 })),
             rightIconName ? (React.createElement(Icon, { name: rightIconName, size: ICON_SIZE, color: colors.light, style: {

package/src/components/TextField.tsx

@@ -52,6 +52,7 @@ export type Props = {
   IconSlot;
 
 interface State {
+  nativeProps: any;
   labeled: Animated.Value;
   focused?: boolean;
   placeholder?: string | undefined;
@@ -73,6 +74,7 @@ class TextField extends React.Component<Props, State> {
   }
 
   state: State = {
+    nativeProps: {},
     labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
     focused: false,
     placeholder: this.props.error ? this.props.placeholder : "",
@@ -207,7 +209,10 @@ class TextField extends React.Component<Props, State> {
    * @internal
    */
   setNativeProps(args: Props) {
-    return this._root && this._root.setNativeProps(args);
+    this.setState((state) => ({
+      ...state,
+      nativeState: args || {},
+    }));
   }
 
   isFocused() {
@@ -566,6 +571,7 @@ class TextField extends React.Component<Props, State> {
             underlineColorAndroid: "transparent",
             style: inputStyles,
             ...rest,
+            ...this.state.nativeProps,
             value: this.state.value,
           })}
         </View>

package/src/index.js

@@ -4,7 +4,7 @@ export { default as Provider } from "./Provider";
 export { default as DefaultTheme } from "./styles/DefaultTheme";
 export { Link } from "./components/Text";
 export { default as Banner } from "./components/Banner";
-export { ButtonSolid, ButtonOutline } from "./components/Button";
+export { Button, ButtonSolid, ButtonOutline } from "./components/Button";
 export { default as Avatar } from "./components/CircleImage";
 export { default as AvatarEdit } from "./components/AvatarEdit";
 export { default as Card } from "./components/Card";
@@ -32,7 +32,6 @@ 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";
 /* Deprecated: Fix or Delete!  */
-export { default as Button } from "./components/DeprecatedButton";
 export { default as CardBlock } from "./components/CardBlock";
 export { default as CardContainer } from "./components/CardContainer";
 export { default as CardContainerRating } from "./components/CardContainerRating";

package/src/index.tsx

@@ -5,7 +5,7 @@ export { default as DefaultTheme } from "./styles/DefaultTheme";
 
 export { Link } from "./components/Text";
 export { default as Banner } from "./components/Banner";
-export { ButtonSolid, ButtonOutline } from "./components/Button";
+export { Button, ButtonSolid, ButtonOutline } from "./components/Button";
 export { default as Avatar } from "./components/CircleImage";
 export { default as AvatarEdit } from "./components/AvatarEdit";
 export { default as Card } from "./components/Card";
@@ -52,7 +52,6 @@ export {
 } from "./components/RadioButton/index";
 
 /* Deprecated: Fix or Delete!  */
-export { default as Button } from "./components/DeprecatedButton";
 export { default as CardBlock } from "./components/CardBlock";
 export { default as CardContainer } from "./components/CardContainer";
 export { default as CardContainerRating } from "./components/CardContainerRating";

package/src/mappings/ActionSheet.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Action Sheet",
     tag: "ActionSheet",
     description: "Action Sheet container",
-    category: COMPONENT_TYPES.container,
+    category: COMPONENT_TYPES.actionsheet,
     props: {
         visible: createStaticBoolProp({
             group: GROUPS.data,

package/src/mappings/ActionSheet.ts

@@ -4,7 +4,7 @@ export const SEED_DATA = {
   name: "Action Sheet",
   tag: "ActionSheet",
   description: "Action Sheet container",
-  category: COMPONENT_TYPES.container,
+  category: COMPONENT_TYPES.actionsheet,
   props: {
     visible: createStaticBoolProp({
       group: GROUPS.data,

package/src/mappings/ActionSheetCancel.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Action Sheet Cancel",
     tag: "ActionSheetCancel",
     description: "Action Sheet cancel",
-    category: COMPONENT_TYPES.button,
+    category: COMPONENT_TYPES.actionsheet,
     triggers: [Triggers.OnPress],
     props: {
         onPress: createActionProp(),

package/src/mappings/ActionSheetCancel.ts

@@ -11,7 +11,7 @@ export const SEED_DATA = {
   name: "Action Sheet Cancel",
   tag: "ActionSheetCancel",
   description: "Action Sheet cancel",
-  category: COMPONENT_TYPES.button,
+  category: COMPONENT_TYPES.actionsheet,
   triggers: [Triggers.OnPress],
   props: {
     onPress: createActionProp(),

package/src/mappings/ActionSheetItem.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Action Sheet Item",
     tag: "ActionSheetItem",
     description: "Action Sheet item",
-    category: COMPONENT_TYPES.button,
+    category: COMPONENT_TYPES.actionsheet,
     triggers: [Triggers.OnPress],
     layout: {
         textAlign: "center",

package/src/mappings/ActionSheetItem.ts

@@ -11,7 +11,7 @@ export const SEED_DATA = {
   name: "Action Sheet Item",
   tag: "ActionSheetItem",
   description: "Action Sheet item",
-  category: COMPONENT_TYPES.button,
+  category: COMPONENT_TYPES.actionsheet,
   triggers: [Triggers.OnPress],
   layout: {
     textAlign: "center",

package/src/mappings/ActivityIndicator.js

@@ -5,7 +5,7 @@ export const SEED_DATA = {
     description: "Displays a circular loading indicator.",
     doc_link: "https://docs.expo.io/versions/latest/react-native/activityindicator/",
     code_link: "https://github.com/expo/expo/blob/master/ios/versioned-react-native/ABI32_0_0/Libraries/Components/ActivityIndicator/ActivityIndicator.js",
-    category: COMPONENT_TYPES.input,
+    category: COMPONENT_TYPES.utility,
     stylesPanelSections: [
         StylesPanelSections.Size,
         StylesPanelSections.Margins,

package/src/mappings/ActivityIndicator.ts

@@ -14,7 +14,7 @@ export const SEED_DATA = {
     "https://docs.expo.io/versions/latest/react-native/activityindicator/",
   code_link:
     "https://github.com/expo/expo/blob/master/ios/versioned-react-native/ABI32_0_0/Libraries/Components/ActivityIndicator/ActivityIndicator.js",
-  category: COMPONENT_TYPES.input,
+  category: COMPONENT_TYPES.utility,
   stylesPanelSections: [
     StylesPanelSections.Size,
     StylesPanelSections.Margins,

package/src/mappings/Banner.js

@@ -2,7 +2,7 @@ import { COMPONENT_TYPES, createIconProp, createBoolProp, createColorProp, creat
 export const SEED_DATA = {
     name: "Banner",
     tag: "Banner",
-    category: COMPONENT_TYPES.button,
+    category: COMPONENT_TYPES.deprecated,
     props: {
         icon: createIconProp({
             defaultValue: null,

package/src/mappings/Banner.ts

@@ -10,7 +10,7 @@ import {
 export const SEED_DATA = {
   name: "Banner",
   tag: "Banner",
-  category: COMPONENT_TYPES.button,
+  category: COMPONENT_TYPES.deprecated,
   props: {
     icon: createIconProp({
       defaultValue: null,

package/src/mappings/BlurView.js

@@ -5,7 +5,7 @@ export const SEED_DATA = {
     description: "Expo Blur View",
     doc_link: "https://docs.expo.io/versions/latest/sdk/blur-view/",
     code_link: "https://github.com/expo/expo/blob/master/packages/expo/src/effects/BlurView.d.ts",
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.view,
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {
         flexGrow: 1,

package/src/mappings/BlurView.ts

@@ -13,7 +13,7 @@ export const SEED_DATA = {
   doc_link: "https://docs.expo.io/versions/latest/sdk/blur-view/",
   code_link:
     "https://github.com/expo/expo/blob/master/packages/expo/src/effects/BlurView.d.ts",
-  category: COMPONENT_TYPES.layout,
+  category: COMPONENT_TYPES.view,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {
     flexGrow: 1,

package/src/mappings/Button.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createIconProp, createBoolProp, createTextProp, GROUPS, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconProp, createTextProp, createDisabledProp, createLoadingProp, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
 const SEED_DATA_TRIGGERS = [Triggers.OnPress];
 const SEED_DATA_PROPS = {
     onPress: createActionProp(),
@@ -11,16 +11,8 @@ const SEED_DATA_PROPS = {
         description: "Button Label",
         defaultValue: "Get Started",
     }),
-    disabled: createBoolProp({
-        group: GROUPS.basic,
-        label: "Disabled",
-        description: "Whether the button should be disabled",
-    }),
-    loading: createBoolProp({
-        group: GROUPS.basic,
-        label: "Loading",
-        description: "Whether to show a loading indicator",
-    }),
+    disabled: createDisabledProp(),
+    loading: createLoadingProp(),
 };
 const LAYOUT = {
     backgroundColor: "transparent",
@@ -31,7 +23,7 @@ export const SEED_DATA = [
     {
         name: "Button Outline",
         tag: "ButtonOutline",
-        category: COMPONENT_TYPES.button,
+        category: COMPONENT_TYPES.deprecated,
         stylesPanelSections: [
             StylesPanelSections.Typography,
             StylesPanelSections.Background,
@@ -53,6 +45,27 @@ export const SEED_DATA = [
     {
         name: "Button Solid",
         tag: "ButtonSolid",
+        category: COMPONENT_TYPES.deprecated,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Effects,
+        ],
+        layout: {
+            ...LAYOUT,
+            backgroundColor: "primary",
+            textAlign: "center",
+        },
+        triggers: SEED_DATA_TRIGGERS,
+        props: SEED_DATA_PROPS,
+    },
+    {
+        name: "Button",
+        tag: "Button",
         category: COMPONENT_TYPES.button,
         stylesPanelSections: [
             StylesPanelSections.Typography,