@draftbit/core 46.10.3-6f5759.2 → 46.10.3-7476ab.2

package/lib/commonjs/components/Table/TableRow.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _TableCommon = require("./TableCommon");
+var _theming = require("../../theming");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TableRow = _ref => {
+  let {
+    borderWidth,
+    borderColor,
+    borderStyle,
+    drawTopBorder = false,
+    drawBottomBorder = true,
+    drawStartBorder = true,
+    drawEndBorder = false,
+    cellVerticalPadding,
+    cellHorizontalPadding,
+    isTableHeader = false,
+    children,
+    style,
+    theme
+  } = _ref;
+  const parentContextValue = _react.default.useContext(_TableCommon.TableStyleContext);
+
+  //Create context to use and pass to children based on own props or fall back to parent provided context
+  const contextValue = {
+    borderColor: borderColor || parentContextValue.borderColor,
+    borderStyle: borderStyle || parentContextValue.borderStyle,
+    borderWidth: borderWidth || parentContextValue.borderWidth,
+    cellHorizontalPadding: cellHorizontalPadding || parentContextValue.cellHorizontalPadding,
+    cellVerticalPadding: cellVerticalPadding || parentContextValue.cellVerticalPadding
+  };
+  const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
+    borderColor: contextValue.borderColor,
+    borderWidth: contextValue.borderWidth,
+    borderStyle: contextValue.borderStyle,
+    drawTopBorder,
+    drawBottomBorder,
+    drawStartBorder,
+    drawEndBorder
+  });
+  return /*#__PURE__*/_react.default.createElement(_TableCommon.TableStyleContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [borderViewStyle, isTableHeader ? {
+      backgroundColor: theme.colors.primary
+    } : {}, style, styles.cellsContainer]
+  }, children));
+};
+const styles = _reactNative.StyleSheet.create({
+  cellsContainer: {
+    flexDirection: "row"
+  }
+});
+var _default = (0, _theming.withTheme)(TableRow);
+exports.default = _default;

package/lib/commonjs/components/Table/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _Table.default;
+  }
+});
+Object.defineProperty(exports, "TableCell", {
+  enumerable: true,
+  get: function () {
+    return _TableCell.default;
+  }
+});
+Object.defineProperty(exports, "TableRow", {
+  enumerable: true,
+  get: function () {
+    return _TableRow.default;
+  }
+});
+var _Table = _interopRequireDefault(require("./Table"));
+var _TableRow = _interopRequireDefault(require("./TableRow"));
+var _TableCell = _interopRequireDefault(require("./TableCell"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/commonjs/constants.js

@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
   android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
   ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
 });
-exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
+exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;

package/lib/commonjs/index.js

@@ -117,12 +117,6 @@ Object.defineProperty(exports, "CircleImage", {
     return _CircleImage.default;
   }
 });
-Object.defineProperty(exports, "Container", {
-  enumerable: true,
-  get: function () {
-    return _Container.default;
-  }
-});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function () {
@@ -351,6 +345,24 @@ Object.defineProperty(exports, "TabViewItem", {
     return _TabView.TabViewItem;
   }
 });
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _Table.Table;
+  }
+});
+Object.defineProperty(exports, "TableCell", {
+  enumerable: true,
+  get: function () {
+    return _Table.TableCell;
+  }
+});
+Object.defineProperty(exports, "TableRow", {
+  enumerable: true,
+  get: function () {
+    return _Table.TableRow;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function () {
@@ -410,7 +422,6 @@ var _CircleImage = _interopRequireDefault(require("./components/CircleImage"));
 var _AvatarEdit = _interopRequireDefault(require("./components/AvatarEdit"));
 var _Card = _interopRequireDefault(require("./components/Card"));
 var _Checkbox = require("./components/Checkbox");
-var _Container = _interopRequireDefault(require("./components/Container"));
 var _Divider = _interopRequireDefault(require("./components/Divider"));
 var _FAB = _interopRequireDefault(require("./components/FAB"));
 var _FieldSearchBarFull = _interopRequireDefault(require("./components/FieldSearchBarFull"));
@@ -437,6 +448,7 @@ var _TabView = require("./components/TabView");
 var _Markdown = _interopRequireDefault(require("./components/Markdown"));
 var _BottomSheet = require("./components/BottomSheet");
 var _YoutubePlayer = require("./components/YoutubePlayer");
+var _Table = require("./components/Table");
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));

package/lib/commonjs/mappings/FieldSearchBarFull.js

@@ -14,7 +14,6 @@ const SEED_DATA = [{
   preview_image_url: "{CLOUDINARY_URL}/Field_SearchBar_Full.png",
   supports_list_render: false,
   triggers: [_types.Triggers.OnChange],
-  // TODO Triggers.OnSubmit for multiple triggers
   props: {
     icon: {
       group: _types.GROUPS.basic,
@@ -53,4 +52,7 @@ const SEED_DATA = [{
   },
   layout: {}
 }];
+exports.SEED_DATA = SEED_DATA;},
+  layout: {}
+}];
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/NativeBase/Layout.js

@@ -22,7 +22,8 @@ const SEED_DATA = [{
       description: "The aspect ratio of the container in decimal format (ex: 3/4 -> 1.33)",
       defaultValue: 1.33
     })
-  }
+  },
+  stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects]
 }, {
   name: "Box",
   tag: "Box",
@@ -44,6 +45,13 @@ const SEED_DATA = [{
   name: "Container",
   tag: "Container",
   description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
+  props: {
+    centerContent: (0, _types.createStaticBoolProp)({
+      label: "Center content",
+      description: "Center child elements based on their content width",
+      defaultValue: true
+    })
+  },
   ...SHARED_SEED_DATA
 }, {
   name: "Column",
@@ -65,24 +73,17 @@ const SEED_DATA = [{
   name: "Spacer",
   tag: "Spacer",
   description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
+  layout: {
+    flex: 1
+  },
   ...SHARED_SEED_DATA,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
+  stylesPanelSections: [_types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.Background, _types.StylesPanelSections.Margins]
 }, {
   name: "Stack",
   tag: "Stack",
   description: "Stack aligns items vertically or horizontally based on the direction prop",
   ...SHARED_SEED_DATA,
   props: {
-    direction: (0, _types.createTextEnumProp)({
-      label: "Direction",
-      description: "The direction of the Stack",
-      options: ["row", "column"],
-      defaultValue: "column"
-    }),
-    reversed: (0, _types.createBoolProp)({
-      label: "Reversed",
-      description: "Determines whether to reverse the direction of items"
-    }),
     isDisabled: (0, _types.createBoolProp)({
       label: "Disabled",
       description: "If true, the Stack will be disabled"

package/lib/commonjs/mappings/StarRating.js

@@ -23,9 +23,7 @@ const SEED_DATA = {
     }),
     fieldName: (0, _types.createFieldNameProp)({
       defaultValue: "ratingValue",
-      // this is the name of the variable declared on the screen in Draftbit
       handlerPropName: "onPress",
-      // the change handler prop in this component
       valuePropName: "rating" // the value prop in this component
     }),
 
@@ -50,4 +48,10 @@ const SEED_DATA = {
     })
   }
 };
+exports.SEED_DATA = SEED_DATA;pes.createColorProp)({
+      label: "Inactive Color",
+      defaultValue: "divider"
+    })
+  }
+};
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/Table.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SHARED_SEED_DATA_PROPS = {
+  borderWidth: (0, _types.createStaticNumberProp)({
+    label: "Border Width",
+    description: "Specifies the width of the border. Passed down to child Table(Row/Cell) components unless overridden",
+    required: false,
+    defaultValue: null
+  }),
+  borderColor: (0, _types.createColorProp)({
+    label: "Border Color",
+    description: "Specifies the color of the border. Passed down to child Table(Row/Cell) components unless overridden",
+    defaultValue: null
+  }),
+  borderStyle: (0, _types.createTextEnumProp)({
+    label: "Border Style",
+    description: "Specifies the style of the border. Passed down to child Table(Row/Cell) components unless overridden",
+    options: ["solid", "dotted", "dashed"],
+    defaultValue: null
+  }),
+  drawTopBorder: (0, _types.createStaticBoolProp)({
+    label: "Draw Top Border",
+    description: "Whether to draw the top border at this layer of the Table tree or not",
+    defaultValue: false
+  }),
+  drawBottomBorder: (0, _types.createStaticBoolProp)({
+    label: "Draw Bottom Border",
+    description: "Whether to draw the bottom border at this layer of the Table tree or not",
+    defaultValue: false
+  }),
+  drawStartBorder: (0, _types.createStaticBoolProp)({
+    label: "Draw Start Border",
+    description: "Whether to draw the start border at this layer of the Table tree or not",
+    defaultValue: false
+  }),
+  drawEndBorder: (0, _types.createStaticBoolProp)({
+    label: "Draw End Border",
+    description: "Whether to draw the end border at this layer of the Table tree or not",
+    defaultValue: false
+  }),
+  cellVerticalPadding: (0, _types.createStaticNumberProp)({
+    label: "Cell Vertical Padding",
+    description: "Specifies the vertical padding of the cell. Passed down to TableCell components unless overridden",
+    required: false,
+    defaultValue: null
+  }),
+  cellHorizontalPadding: (0, _types.createStaticNumberProp)({
+    label: "Cell Horizontal Padding",
+    description: "Specifies the horizontal padding of the cell. Passed down to TableCell components unless overridden",
+    required: false,
+    defaultValue: null
+  })
+};
+const SEED_DATA = [{
+  name: "Table",
+  tag: "Table",
+  description: "Top level table container",
+  category: _types.COMPONENT_TYPES.table,
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects, _types.StylesPanelSections.Background, _types.StylesPanelSections.LayoutSelectedItem],
+  layout: {
+    flex: 1
+  },
+  props: {
+    ...SHARED_SEED_DATA_PROPS,
+    borderWidth: {
+      ...SHARED_SEED_DATA_PROPS.borderWidth,
+      defaultValue: 1
+    },
+    borderColor: {
+      ...SHARED_SEED_DATA_PROPS.borderColor,
+      defaultValue: "divider"
+    },
+    borderStyle: {
+      ...SHARED_SEED_DATA_PROPS.borderStyle,
+      defaultValue: "solid"
+    },
+    drawTopBorder: {
+      ...SHARED_SEED_DATA_PROPS.drawTopBorder,
+      defaultValue: true
+    },
+    cellVerticalPadding: {
+      ...SHARED_SEED_DATA_PROPS.cellVerticalPadding,
+      defaultValue: 10
+    },
+    cellHorizontalPadding: {
+      ...SHARED_SEED_DATA_PROPS.cellHorizontalPadding,
+      defaultValue: 10
+    },
+    showsVerticalScrollIndicator: (0, _types.createStaticBoolProp)({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
+    })
+  }
+}, {
+  name: "Table Row",
+  tag: "TableRow",
+  description: "Table Row container",
+  category: _types.COMPONENT_TYPES.table,
+  stylesPanelSections: [_types.StylesPanelSections.Background],
+  props: {
+    ...SHARED_SEED_DATA_PROPS,
+    drawStartBorder: {
+      ...SHARED_SEED_DATA_PROPS.drawStartBorder,
+      defaultValue: true
+    },
+    drawBottomBorder: {
+      ...SHARED_SEED_DATA_PROPS.drawBottomBorder,
+      defaultValue: true
+    },
+    isTableHeader: (0, _types.createStaticBoolProp)({
+      label: "Header",
+      description: "Whether this row is a header or not (changes background and sticks while scrolling)",
+      defaultValue: false
+    })
+  }
+}, {
+  name: "Table Cell",
+  tag: "TableCell",
+  description: "Table Cell container",
+  category: _types.COMPONENT_TYPES.table,
+  stylesPanelSections: [_types.StylesPanelSections.LayoutFlexItems, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.LayoutContent, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
+  layout: {
+    flex: 1,
+    flexDirection: "row"
+  },
+  props: {
+    ...SHARED_SEED_DATA_PROPS,
+    drawEndBorder: {
+      ...SHARED_SEED_DATA_PROPS.drawEndBorder,
+      defaultValue: true
+    }
+  }
+}];
+exports.SEED_DATA = SEED_DATA;

package/lib/module/components/AspectRatio.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { View, StyleSheet } from "react-native";
 const AspectRatio = props => {
@@ -27,6 +26,24 @@ const AspectRatio = props => {
       });
     }
   }
+  return /*#__PURE__*/React.createElement(View, {
+    ...props,
+    style: style,
+    onLayout: _ref => {
+      let {
+        nativeEvent: {
+          layout: l
+        }
+      } = _ref;
+      return setLayout(l);
+    }
+  }, props.children);
+};
+export default AspectRatio;idth,
+        height: width * (1 / aspectRatio)
+      });
+    }
+  }
   return /*#__PURE__*/React.createElement(View, _extends({}, props, {
     style: style,
     onLayout: _ref => {

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { StyleSheet, View } from "react-native";
 import BottomSheetComponent from "./BottomSheetComponent";
@@ -22,7 +21,7 @@ const BottomSheet = _ref => {
   return /*#__PURE__*/React.createElement(View, {
     style: styles.parentContainer,
     pointerEvents: "box-none"
-  }, /*#__PURE__*/React.createElement(BottomSheetComponent, _extends({
+  }, /*#__PURE__*/React.createElement(BottomSheetComponent, {
     componentType: "ScrollView",
     snapPoints: snapPoints,
     initialSnapIndex: initialSnapIndex,
@@ -45,8 +44,9 @@ const BottomSheet = _ref => {
       borderWidth,
       borderColor
     }]),
-    onSettle: onSettle
-  }, rest), children));
+    onSettle: onSettle,
+    ...rest
+  }, children));
 };
 const styles = StyleSheet.create({
   //Render on top of everything
@@ -77,4 +77,24 @@ const styles = StyleSheet.create({
     borderRadius: 4
   }
 });
+export default withTheme(BottomSheet); "hidden"
+  },
+  contentContainerStyle: {
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  },
+  containerStyle: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  handleContainer: {
+    alignItems: "center",
+    paddingVertical: 20
+  },
+  handle: {
+    width: 40,
+    height: 2,
+    borderRadius: 4
+  }
+});
 export default withTheme(BottomSheet);

package/lib/module/components/Button.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { Text, Pressable, Platform, StyleSheet, ActivityIndicator } from "react-native";
 import { withTheme } from "../theming";
@@ -53,7 +52,7 @@ function Base(_ref) {
   if (textAlign === "right") {
     buttonStyles.justifyContent = "flex-end";
   }
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, {
     disabled: disabled || loading,
     style: _ref2 => {
       let {
@@ -62,8 +61,9 @@ function Base(_ref) {
       return [styles.base, {
         opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
       }, buttonStyles];
-    }
-  }, props), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    },
+    ...props
+  }, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
     size: "small",
     color: color,
     style: styles.loading
@@ -82,13 +82,14 @@ const Solid = _ref3 => {
     theme,
     ...props
   } = _ref3;
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Base, {
     style: [{
       color: "#FFF",
       borderRadius: theme.roundness,
       backgroundColor: theme.colors.primary
-    }, style]
-  }, props));
+    }, style],
+    ...props
+  });
 };
 const ButtonSolid = withTheme(Solid);
 export { ButtonSolid };
@@ -100,13 +101,14 @@ const Outline = _ref4 => {
     theme,
     ...props
   } = _ref4;
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Base, {
     style: [styles.outline, {
       borderRadius: theme.roundness,
       borderColor: theme.colors.primary,
       color: theme.colors.primary
-    }, style]
-  }, props));
+    }, style],
+    ...props
+  });
 };
 const ButtonOutline = withTheme(Outline);
 export { ButtonOutline };
@@ -153,4 +155,25 @@ const styles = StyleSheet.create({
       }
     })
   }
+});or: "transparent",
+    padding: 0,
+    minHeight: undefined
+  },
+  loading: {
+    marginRight: 6
+  },
+  icon: {
+    ...Platform.select({
+      web: {
+        marginTop: 1,
+        marginRight: 4,
+        alignSelf: "center"
+      },
+      default: {
+        marginBottom: 2,
+        marginRight: 4,
+        alignSelf: "center"
+      }
+    })
+  }
 });

package/lib/module/components/Checkbox/Checkbox.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { View, StyleSheet, Pressable } from "react-native";
 import { useTheme } from "../../theming";
@@ -26,7 +25,6 @@ const Checkbox = _ref => {
       setInternalValue(status);
     }
   }, [status]);
-
   // This special logic is to handle weird APIs like Airtable that return
   // true or undefined for a boolean
   const previousDefaultValue = usePrevious(defaultValue);
@@ -50,7 +48,8 @@ const Checkbox = _ref => {
       onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
     }
   };
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Pressable, {
+    ...rest,
     onPress: handlePress,
     disabled: disabled,
     accessibilityState: {
@@ -62,7 +61,7 @@ const Checkbox = _ref => {
       width: size,
       height: size
     }]
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     style: styles.icon,
     name: internalValue ? checkedIcon : uncheckedIcon,
     size: size,

package/lib/module/components/Checkbox/CheckboxRow.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { StyleSheet, View, Platform, Pressable } from "react-native";
 import { isString } from "lodash";
@@ -6,7 +5,7 @@ import { extractStyles } from "../../utilities";
 import { usePrevious } from "../../hooks";
 import Text from "../Text";
 import Checkbox from "./Checkbox";
-export let Direction;
+export var Direction;
 (function (Direction) {
   Direction["Row"] = "row";
   Direction["RowReverse"] = "row-reverse";
@@ -48,7 +47,6 @@ const CheckboxRow = _ref => {
       setInternalValue(status);
     }
   }, [status]);
-
   // This special logic is to handle weird APIs like Airtable that return
   // true or undefined for a boolean
   const previousDefaultValue = usePrevious(defaultValue);
@@ -72,13 +70,14 @@ const CheckboxRow = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, {
     onPress: handlePress,
     style: [viewStyles, styles.mainParent, {
       flexDirection: direction
     }],
-    disabled: disabled
-  }, rest), /*#__PURE__*/React.createElement(View, {
+    disabled: disabled,
+    ...rest
+  }, /*#__PURE__*/React.createElement(View, {
     style: [styles.label, {
       alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
     }, labelContainerStyle]
@@ -114,4 +113,23 @@ const styles = StyleSheet.create({
     flex: 3
   }
 });
+export default CheckboxRow;heet.create({
+  mainParent: {
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingStart: 20,
+    minHeight: 50,
+    paddingEnd: 20,
+    display: "flex",
+    ...Platform.select({
+      web: {
+        cursor: "pointer",
+        userSelect: "none"
+      }
+    })
+  },
+  label: {
+    flex: 3
+  }
+});
 export default CheckboxRow;

package/lib/module/components/Checkbox/context.js

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-export let Direction;
+export var Direction;
 (function (Direction) {
   Direction["Horizontal"] = "horizontal";
   Direction["Vertical"] = "vertical";