@draftbit/core 43.3.4-f04c6f.2 → 43.4.2-80bace.1

package/lib/module/mappings/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextArea.ts"],"names":["GROUPS","COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","FIELD_NAME","TEXT_INPUT_PROPS","Triggers","SEED_DATA","name","tag","description","category","input","layout","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth","borderColor","paddingLeft","paddingRight","paddingTop","paddingBottom","borderRadius","textAlignVertical","minHeight","triggers","OnChangeText","props","placeholder","defaultValue","multiline","label","group","uncategorized","formType","boolean","propType","BOOLEAN","editable","required","numberOfLines","basic","number","NUMBER","fieldName","handlerPropName"],"mappings":"AAAA,SACEA,MADF,EAEEC,eAFF,EAGEC,UAHF,EAIEC,UAJF,EAKEC,UALF,EAMEC,gBANF,EAOEC,QAPF,QAQO,iBARP;AAUA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,WADiB;AAEvBC,EAAAA,GAAG,EAAE,WAFkB;AAGvBC,EAAAA,WAAW,EAAE,gDAHU;AAIvBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,KAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,eAAe,EAAE,CADX;AAENC,IAAAA,gBAAgB,EAAE,CAFZ;AAGNC,IAAAA,cAAc,EAAE,CAHV;AAINC,IAAAA,iBAAiB,EAAE,CAJb;AAKNC,IAAAA,WAAW,EAAE,SALP;AAMNC,IAAAA,WAAW,EAAE,CANP;AAONC,IAAAA,YAAY,EAAE,CAPR;AAQNC,IAAAA,UAAU,EAAE,CARN;AASNC,IAAAA,aAAa,EAAE,CATT;AAUNC,IAAAA,YAAY,EAAE,CAVR;AAWNC,IAAAA,iBAAiB,EAAE,KAXb;AAYNC,IAAAA,SAAS,EAAE;AAZL,GALe;AAmBvBC,EAAAA,QAAQ,EAAE,CAACpB,QAAQ,CAACqB,YAAV,CAnBa;AAoBvBC,EAAAA,KAAK,EAAE,EACL,GAAGvB,gBADE;AAELwB,IAAAA,WAAW,EAAE,EACX,GAAGxB,gBAAgB,CAACwB,WADT;AAEXC,MAAAA,YAAY,EACV;AAHS,KAFR;AAOLC,IAAAA,SAAS,EAAE;AACTC,MAAAA,KAAK,EAAE,WADE;AAETtB,MAAAA,WAAW,EAAE,WAFJ;AAGTuB,MAAAA,KAAK,EAAEjC,MAAM,CAACkC,aAHL;AAITC,MAAAA,QAAQ,EAAEjC,UAAU,CAACkC,OAJZ;AAKTC,MAAAA,QAAQ,EAAElC,UAAU,CAACmC,OALZ;AAMTR,MAAAA,YAAY,EAAE,IANL;AAOTS,MAAAA,QAAQ,EAAE,IAPD;AAQTC,MAAAA,QAAQ,EAAE;AARD,KAPN;AAiBLC,IAAAA,aAAa,EAAE;AACbT,MAAAA,KAAK,EAAE,iBADM;AAEbtB,MAAAA,WAAW,EAAE,iBAFA;AAGbuB,MAAAA,KAAK,EAAEjC,MAAM,CAAC0C,KAHD;AAIbP,MAAAA,QAAQ,EAAEjC,UAAU,CAACyC,MAJR;AAKbN,MAAAA,QAAQ,EAAElC,UAAU,CAACyC,MALR;AAMbd,MAAAA,YAAY,EAAE,CAND;AAObS,MAAAA,QAAQ,EAAE,IAPG;AAQbC,MAAAA,QAAQ,EAAE;AARG,KAjBV;AA2BLK,IAAAA,SAAS,EAAE,EACT,GAAGzC,UADM;AAET0B,MAAAA,YAAY,EAAE,gBAFL;AAGTgB,MAAAA,eAAe,EAAE;AAHR;AA3BN;AApBgB,CAAlB","sourcesContent":["import {\n  GROUPS,\n  COMPONENT_TYPES,\n  FORM_TYPES,\n  PROP_TYPES,\n  FIELD_NAME,\n  TEXT_INPUT_PROPS,\n  Triggers,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Text Area\",\n  tag: \"TextInput\",\n  description: \"An input field that allows for multiple lines.\",\n  category: COMPONENT_TYPES.input,\n  layout: {\n    borderLeftWidth: 1,\n    borderRightWidth: 1,\n    borderTopWidth: 1,\n    borderBottomWidth: 1,\n    borderColor: \"divider\",\n    paddingLeft: 8,\n    paddingRight: 8,\n    paddingTop: 8,\n    paddingBottom: 8,\n    borderRadius: 8,\n    textAlignVertical: \"top\",\n    minHeight: 100,\n  },\n  triggers: [Triggers.OnChangeText],\n  props: {\n    ...TEXT_INPUT_PROPS,\n    placeholder: {\n      ...TEXT_INPUT_PROPS.placeholder,\n      defaultValue:\n        \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.\",\n    },\n    multiline: {\n      label: \"Multiline\",\n      description: \"Multiline\",\n      group: GROUPS.uncategorized,\n      formType: FORM_TYPES.boolean,\n      propType: PROP_TYPES.BOOLEAN,\n      defaultValue: true,\n      editable: true,\n      required: false,\n    },\n    numberOfLines: {\n      label: \"Number Of Lines\",\n      description: \"Number Of Lines\",\n      group: GROUPS.basic,\n      formType: FORM_TYPES.number,\n      propType: PROP_TYPES.NUMBER,\n      defaultValue: 4,\n      editable: true,\n      required: false,\n    },\n    fieldName: {\n      ...FIELD_NAME,\n      defaultValue: \"textInputValue\",\n      handlerPropName: \"onChangeText\",\n    },\n  },\n};\n"]}
+{"version":3,"sources":["TextArea.ts"],"names":["GROUPS","COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","FIELD_NAME","TEXT_INPUT_PROPS","Triggers","SEED_DATA","name","tag","description","category","input","layout","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth","borderColor","paddingLeft","paddingRight","paddingTop","paddingBottom","borderRadius","triggers","OnChangeText","props","placeholder","defaultValue","multiline","label","group","uncategorized","formType","boolean","propType","BOOLEAN","editable","required","numberOfLines","basic","number","NUMBER","fieldName","handlerPropName"],"mappings":"AAAA,SACEA,MADF,EAEEC,eAFF,EAGEC,UAHF,EAIEC,UAJF,EAKEC,UALF,EAMEC,gBANF,EAOEC,QAPF,QAQO,iBARP;AAUA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,WADiB;AAEvBC,EAAAA,GAAG,EAAE,WAFkB;AAGvBC,EAAAA,WAAW,EAAE,gDAHU;AAIvBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,KAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,eAAe,EAAE,CADX;AAENC,IAAAA,gBAAgB,EAAE,CAFZ;AAGNC,IAAAA,cAAc,EAAE,CAHV;AAINC,IAAAA,iBAAiB,EAAE,CAJb;AAKNC,IAAAA,WAAW,EAAE,SALP;AAMNC,IAAAA,WAAW,EAAE,CANP;AAONC,IAAAA,YAAY,EAAE,CAPR;AAQNC,IAAAA,UAAU,EAAE,CARN;AASNC,IAAAA,aAAa,EAAE,CATT;AAUNC,IAAAA,YAAY,EAAE;AAVR,GALe;AAiBvBC,EAAAA,QAAQ,EAAE,CAAClB,QAAQ,CAACmB,YAAV,CAjBa;AAkBvBC,EAAAA,KAAK,EAAE,EACL,GAAGrB,gBADE;AAELsB,IAAAA,WAAW,EAAE,EACX,GAAGtB,gBAAgB,CAACsB,WADT;AAEXC,MAAAA,YAAY,EACV;AAHS,KAFR;AAOLC,IAAAA,SAAS,EAAE;AACTC,MAAAA,KAAK,EAAE,WADE;AAETpB,MAAAA,WAAW,EAAE,WAFJ;AAGTqB,MAAAA,KAAK,EAAE/B,MAAM,CAACgC,aAHL;AAITC,MAAAA,QAAQ,EAAE/B,UAAU,CAACgC,OAJZ;AAKTC,MAAAA,QAAQ,EAAEhC,UAAU,CAACiC,OALZ;AAMTR,MAAAA,YAAY,EAAE,IANL;AAOTS,MAAAA,QAAQ,EAAE,IAPD;AAQTC,MAAAA,QAAQ,EAAE;AARD,KAPN;AAiBLC,IAAAA,aAAa,EAAE;AACbT,MAAAA,KAAK,EAAE,iBADM;AAEbpB,MAAAA,WAAW,EAAE,iBAFA;AAGbqB,MAAAA,KAAK,EAAE/B,MAAM,CAACwC,KAHD;AAIbP,MAAAA,QAAQ,EAAE/B,UAAU,CAACuC,MAJR;AAKbN,MAAAA,QAAQ,EAAEhC,UAAU,CAACuC,MALR;AAMbd,MAAAA,YAAY,EAAE,CAND;AAObS,MAAAA,QAAQ,EAAE,IAPG;AAQbC,MAAAA,QAAQ,EAAE;AARG,KAjBV;AA2BLK,IAAAA,SAAS,EAAE,EACT,GAAGvC,UADM;AAETwB,MAAAA,YAAY,EAAE,gBAFL;AAGTgB,MAAAA,eAAe,EAAE;AAHR;AA3BN;AAlBgB,CAAlB","sourcesContent":["import {\n  GROUPS,\n  COMPONENT_TYPES,\n  FORM_TYPES,\n  PROP_TYPES,\n  FIELD_NAME,\n  TEXT_INPUT_PROPS,\n  Triggers,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Text Area\",\n  tag: \"TextInput\",\n  description: \"An input field that allows for multiple lines.\",\n  category: COMPONENT_TYPES.input,\n  layout: {\n    borderLeftWidth: 1,\n    borderRightWidth: 1,\n    borderTopWidth: 1,\n    borderBottomWidth: 1,\n    borderColor: \"divider\",\n    paddingLeft: 8,\n    paddingRight: 8,\n    paddingTop: 8,\n    paddingBottom: 8,\n    borderRadius: 8,\n  },\n  triggers: [Triggers.OnChangeText],\n  props: {\n    ...TEXT_INPUT_PROPS,\n    placeholder: {\n      ...TEXT_INPUT_PROPS.placeholder,\n      defaultValue:\n        \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.\",\n    },\n    multiline: {\n      label: \"Multiline\",\n      description: \"Multiline\",\n      group: GROUPS.uncategorized,\n      formType: FORM_TYPES.boolean,\n      propType: PROP_TYPES.BOOLEAN,\n      defaultValue: true,\n      editable: true,\n      required: false,\n    },\n    numberOfLines: {\n      label: \"Number Of Lines\",\n      description: \"Number Of Lines\",\n      group: GROUPS.basic,\n      formType: FORM_TYPES.number,\n      propType: PROP_TYPES.NUMBER,\n      defaultValue: 4,\n      editable: true,\n      required: false,\n    },\n    fieldName: {\n      ...FIELD_NAME,\n      defaultValue: \"textInputValue\",\n      handlerPropName: \"onChangeText\",\n    },\n  },\n};\n"]}

package/lib/typescript/src/{mappings/DeprecatedButton.d.ts → components/LinearGradient.d.ts}

@@ -1,89 +1,108 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+declare type LinearGradientComponentProps = {
+    color1: string;
+    color2: string;
+    color3?: string;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+declare const LinearGradientComponent: ({ children, color1, color2, color3, startX, startY, endX, endY, style, }: LinearGradientComponentProps) => JSX.Element;
+export default LinearGradientComponent;
 export declare const SEED_DATA: {
     name: string;
     tag: string;
-    category: string;
-    triggers: string[];
+    description: string;
     props: {
-        type: {
+        color1: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
+            defaultValue: null;
             formType: string;
             propType: string;
-            defaultValue: string;
         };
-        onPress: {
+        color2: {
+            group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
+            defaultValue: null;
             formType: string;
             propType: string;
-            defaultValue: null;
-            group: string;
         };
-        icon: {
+        color3: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
-            formType: string;
-            propType: string;
             defaultValue: null;
-        };
-        children: {
-            group: string;
-            label: string;
-            description: string;
-            required: boolean;
-            editable: boolean;
             formType: string;
             propType: string;
-            defaultValue: string;
         };
-        color: {
+        startX: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            precision: number;
             formType: string;
             propType: string;
-            defaultValue: null;
         };
-        labelColor: {
+        startY: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            precision: number;
             formType: string;
             propType: string;
-            defaultValue: null;
         };
-        disabled: {
+        endX: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            precision: number;
             formType: string;
             propType: string;
-            defaultValue: null;
         };
-        loading: {
+        endY: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            precision: number;
             formType: string;
             propType: string;
-            defaultValue: null;
         };
     };
-    layout: {};
-}[];
+};

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

@@ -7,9 +7,13 @@ export interface SwiperProps {
     timeout?: number;
     prevTitle?: string;
     nextTitle?: string;
+    prevTitleColor?: string;
+    nextTitleColor?: string;
     dotsTouchable?: boolean;
+    dotColor?: string;
+    dotActiveColor?: string;
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare const Swiper: ({ vertical, loop, timeout, from, prevTitle, nextTitle, dotsTouchable, children, style, }: SwiperProps) => JSX.Element;
+declare const Swiper: ({ vertical, loop, timeout, from, prevTitle, nextTitle, prevTitleColor, nextTitleColor, dotsTouchable, dotColor, dotActiveColor, children, style, }: SwiperProps) => JSX.Element;
 export default Swiper;

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

@@ -25,6 +25,7 @@ export { default as TextField } from "./components/TextField";
 export { default as ToggleButton } from "./components/ToggleButton";
 export { default as Touchable } from "./components/Touchable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
+export { default as LinearGradient } from "./components/LinearGradient";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";

package/lib/typescript/src/mappings/{AccordionGroup.d.ts → Accordion.d.ts}

@@ -3,6 +3,13 @@ export declare const SEED_DATA: {
     tag: string;
     description: string;
     category: string;
+    layout: {
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        fontSize: number;
+    };
     props: {
         openColor: {
             group: string;

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

@@ -52,6 +52,46 @@ export declare const SEED_DATA: {
         };
         prevTitle: any;
         nextTitle: any;
+        prevTitleColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        nextTitleColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        dotColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        dotActiveColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
         dotsTouchable: {
             label: string;
             description: string;

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

@@ -14,8 +14,6 @@ export declare const SEED_DATA: {
         paddingTop: number;
         paddingBottom: number;
         borderRadius: number;
-        textAlignVertical: string;
-        minHeight: number;
     };
     triggers: string[];
     props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "43.3.4-f04c6f.2+f04c6fc8",
+  "version": "43.4.2-80bace.1+80bace74",
   "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": "^43.3.4-f04c6f.2+f04c6fc8",
+    "@draftbit/types": "^43.4.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.1.7",
@@ -49,6 +49,7 @@
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
+    "expo-linear-gradient": "^9.2.0",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
@@ -79,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "f04c6fc8cb5966dccdf4503e30a94600f28f4674"
+  "gitHead": "80bace74bf70bd1768c7d68c3a02e79f0d1aa3d1"
 }

package/src/components/Accordion/AccordionGroup.js

@@ -2,63 +2,43 @@ import * as React from "react";
 import { View, StyleSheet, Pressable, } from "react-native";
 import Text from "../Text";
 import { withTheme } from "../../theming";
+import { extractStyles } from "../../utilities";
 const AccordionGroup = ({ Icon, openColor, closedColor, caretColor, icon, iconSize = 24, style, label, children, expanded: expandedProp, theme, }) => {
     const [expanded, setExpanded] = React.useState(expandedProp || false);
     const handlePressAction = () => {
-        if (expandedProp === undefined) {
-            setExpanded(!expanded);
-        }
+        setExpanded(!expanded);
     };
     const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
     const expandedColor = openColor || theme.colors.primary;
     const collapsedColor = closedColor || theme.colors.primary;
     const labelColor = expanded ? expandedColor : collapsedColor;
+    const { textStyles, viewStyles } = extractStyles(style);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Pressable, { style: [style], onPress: handlePressAction, accessibilityRole: "button" },
-            React.createElement(View, { style: styles.row },
-                icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
-                React.createElement(View, { style: [styles.item, styles.content] },
-                    React.createElement(Text, { selectable: false, style: [
-                            styles.label,
-                            {
-                                color: labelColor,
-                            },
-                            style,
-                        ] }, label)),
-                React.createElement(View, { style: [styles.item] },
-                    React.createElement(Icon, { name: expanded
-                            ? "MaterialIcons/keyboard-arrow-up"
-                            : "MaterialIcons/keyboard-arrow-down", color: caretColor, size: 24 })))),
-        expandedInternal
-            ? React.Children.map(children, (child) => {
-                if (React.isValidElement(child) &&
-                    !child.props.left &&
-                    !child.props.right) {
-                    return React.cloneElement(child, {
-                        style: child.props.style,
-                    });
-                }
-                return child;
-            })
-            : null));
+        React.createElement(Pressable, { style: [styles.row, viewStyles], onPress: handlePressAction, accessibilityRole: "button" },
+            icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
+            React.createElement(View, { style: styles.content },
+                React.createElement(Text, { selectable: false, style: [
+                        {
+                            color: labelColor,
+                        },
+                        textStyles,
+                    ] }, label)),
+            React.createElement(Icon, { name: expanded
+                    ? "MaterialIcons/keyboard-arrow-up"
+                    : "MaterialIcons/keyboard-arrow-down", color: caretColor, size: 24 })),
+        expandedInternal ? children : null));
 };
 const styles = StyleSheet.create({
     row: {
         flexDirection: "row",
         alignItems: "center",
     },
-    label: {
-        fontSize: 16,
-    },
-    item: {
-        margin: 8,
-    },
     content: {
         flex: 1,
         justifyContent: "center",
     },
     icon: {
-        marginLeft: 8,
+        marginRight: 8,
     },
 });
 export default withTheme(AccordionGroup);

package/src/components/Accordion/AccordionGroup.tsx

@@ -10,6 +10,7 @@ import Text from "../Text";
 import { withTheme } from "../../theming";
 import type { IconSlot } from "../../interfaces/Icon";
 import type { Theme } from "../../styles/DefaultTheme";
+import { extractStyles } from "../../utilities";
 
 type Props = {
   openColor: string;
@@ -42,9 +43,7 @@ const AccordionGroup = ({
   );
 
   const handlePressAction = () => {
-    if (expandedProp === undefined) {
-      setExpanded(!expanded);
-    }
+    setExpanded(!expanded);
   };
 
   const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
@@ -54,64 +53,47 @@ const AccordionGroup = ({
 
   const labelColor = expanded ? expandedColor : collapsedColor;
 
+  const { textStyles, viewStyles } = extractStyles(style);
+
   return (
     <>
       <Pressable
-        style={[style]}
+        style={[styles.row, viewStyles]}
         onPress={handlePressAction}
         accessibilityRole="button"
       >
-        <View style={styles.row}>
-          {icon ? (
-            <Icon
-              name={icon}
-              size={iconSize}
-              color={labelColor}
-              style={styles.icon}
-            />
-          ) : null}
-          <View style={[styles.item, styles.content]}>
-            <Text
-              selectable={false}
-              style={[
-                styles.label,
-                {
-                  color: labelColor,
-                },
-                style,
-              ]}
-            >
-              {label}
-            </Text>
-          </View>
-          <View style={[styles.item]}>
-            <Icon
-              name={
-                expanded
-                  ? "MaterialIcons/keyboard-arrow-up"
-                  : "MaterialIcons/keyboard-arrow-down"
-              }
-              color={caretColor}
-              size={24}
-            />
-          </View>
+        {icon ? (
+          <Icon
+            name={icon}
+            size={iconSize}
+            color={labelColor}
+            style={styles.icon}
+          />
+        ) : null}
+        <View style={styles.content}>
+          <Text
+            selectable={false}
+            style={[
+              {
+                color: labelColor,
+              },
+              textStyles,
+            ]}
+          >
+            {label}
+          </Text>
         </View>
+        <Icon
+          name={
+            expanded
+              ? "MaterialIcons/keyboard-arrow-up"
+              : "MaterialIcons/keyboard-arrow-down"
+          }
+          color={caretColor}
+          size={24}
+        />
       </Pressable>
-      {expandedInternal
-        ? React.Children.map(children, (child) => {
-            if (
-              React.isValidElement(child) &&
-              !child.props.left &&
-              !child.props.right
-            ) {
-              return React.cloneElement(child, {
-                style: child.props.style,
-              });
-            }
-
-            return child;
-          })
-        : null}
+      {expandedInternal ? children : null}
     </>
   );
 };
@@ -121,18 +103,12 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
-  label: {
-    fontSize: 16,
-  },
-  item: {
-    margin: 8,
-  },
   content: {
     flex: 1,
     justifyContent: "center",
   },
   icon: {
-    marginLeft: 8,
+    marginRight: 8,
   },
 });
 

package/src/components/FAB.js

@@ -28,7 +28,7 @@ const FAB = ({ onPress, disabled, loading, iconName = "MaterialIcons/add", style
                     },
                 ];
             }, ...props },
-            React.createElement(View, null, loading ? (React.createElement(ActivityIndicator, { size: "small", color: color })) : (React.createElement(Icon, { name: iconName, size: 28, color: color }))))));
+            React.createElement(View, null, loading ? (React.createElement(ActivityIndicator, { style: size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined, size: size <= 50 ? "small" : "large", color: color })) : (React.createElement(Icon, { name: iconName, size: size, color: color }))))));
 };
 const styles = StyleSheet.create({
     button: {

package/src/components/FAB.tsx

@@ -77,9 +77,13 @@ const FAB: React.FC<Props> = ({
       >
         <View>
           {loading ? (
-            <ActivityIndicator size="small" color={color} />
+            <ActivityIndicator
+              style={size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined}
+              size={size <= 50 ? "small" : "large"}
+              color={color}
+            />
           ) : (
-            <Icon name={iconName} size={28} color={color} />
+            <Icon name={iconName} size={size} color={color} />
           )}
         </View>
       </Pressable>

package/src/components/LinearGradient.js

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { LinearGradient } from "expo-linear-gradient";
+import { extractStyles } from "../utilities";
+import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+const LinearGradientComponent = ({ children, color1, color2, color3 = undefined, startX = 0, startY = 0, endX = 100, endY = 0, style, }) => {
+    const { viewStyles } = extractStyles(style);
+    const colors = [color1, color2, color3].filter((color) => color);
+    const start = { x: startX / 100, y: startY / 100 };
+    const end = { x: endX / 100, y: endY / 100 };
+    return (React.createElement(LinearGradient, { colors: colors, start: start, end: end, style: viewStyles }, children));
+};
+export default LinearGradientComponent;
+export const SEED_DATA = {
+    name: "LinearGradient",
+    tag: "LinearGradient",
+    description: "Linear Gradient Component",
+    props: {
+        color1: createColorProp({
+            label: "Color 1",
+        }),
+        color2: createColorProp({
+            label: "Color 2",
+        }),
+        color3: createColorProp({
+            label: "Color 3",
+        }),
+        startX: {
+            group: GROUPS.basic,
+            label: "Start X",
+            description: "Start position from Left",
+            editable: true,
+            required: false,
+            defaultValue: 0,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+        startY: {
+            group: GROUPS.basic,
+            label: "Start Y",
+            description: "Start position from Top",
+            editable: true,
+            required: false,
+            defaultValue: 0,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+        endX: {
+            group: GROUPS.basic,
+            label: "End Y",
+            description: "End position from Right",
+            editable: true,
+            required: false,
+            defaultValue: 100,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+        endY: {
+            group: GROUPS.basic,
+            label: "End Y",
+            description: "End position from Bottom",
+            editable: true,
+            required: false,
+            defaultValue: 100,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+    },
+};