@draftbit/core 44.2.1-ada448.0 → 44.2.1

package/lib/commonjs/utilities.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.applyStyles = applyStyles;
+exports.borderStyleNames = void 0;
+exports.extractBorderAndMarginStyles = extractBorderAndMarginStyles;
 exports.extractStyles = extractStyles;
 exports.getValueForRadioButton = getValueForRadioButton;
+exports.marginStyleNames = void 0;
 
 var _reactNative = require("react-native");
 
@@ -45,6 +48,22 @@ function extractStyles(style) {
     textStyles
   };
 }
+
+const borderStyleNames = ["borderRadius", "borderBottomColor", "borderBottomEndRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStartRadius", "borderBottomWidth", "borderColor", "borderEndColor", "borderLeftColor", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightWidth", "borderStartColor", "borderStyle", "borderTopColor", "borderTopEndRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStartRadius", "borderTopWidth", "borderWidth"];
+exports.borderStyleNames = borderStyleNames;
+const marginStyleNames = ["margin", "marginBottom", "marginEnd", "marginHorizontal", "marginLeft", "marginRight", "marginStart", "marginTop", "marginVertical"];
+exports.marginStyleNames = marginStyleNames;
+
+function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalMarginStyles) {
+  const flatStyle = _reactNative.StyleSheet.flatten(style || {});
+
+  const borderStyles = (0, _lodash.pickBy)((0, _lodash.pick)(flatStyle, [...borderStyleNames, ...(additionalBorderStyles ? additionalBorderStyles : [])]), _lodash.identity);
+  const marginStyles = (0, _lodash.pickBy)((0, _lodash.pick)(flatStyle, [...marginStyleNames, ...(additionalMarginStyles ? additionalMarginStyles : [])]), _lodash.identity);
+  return {
+    borderStyles,
+    marginStyles
+  };
+}
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles

package/lib/commonjs/utilities.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utilities.ts"],"names":["extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","StyleSheet","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","getValueForRadioButton","String","Error"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,SAASA,aAAT,CAAuBC,KAAvB,EAA8C;AACnD,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,UAFI;AAGJC,IAAAA,UAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,aANI;AAOJC,IAAAA,aAPI;AAQJC,IAAAA,SARI;AASJC,IAAAA,kBATI;AAUJC,IAAAA,mBAVI;AAWJC,IAAAA,mBAXI;AAYJ,OAAGC;AAZC,MAaFC,wBAAWC,OAAX,CAAmBd,KAAK,IAAI,EAA5B,CAbJ;;AAeA,QAAMe,UAAqB,GAAG;AAC5Bd,IAAAA,KAD4B;AAE5BC,IAAAA,UAF4B;AAG5BC,IAAAA,UAH4B;AAI5BC,IAAAA,QAJ4B;AAK5BC,IAAAA,UAL4B;AAM5BC,IAAAA,aAN4B;AAO5BC,IAAAA,aAP4B;AAQ5BC,IAAAA,SAR4B;AAS5BC,IAAAA,kBAT4B;AAU5BC,IAAAA,mBAV4B;AAW5BC,IAAAA;AAX4B,GAA9B;AAcA,SAAO;AAAEC,IAAAA,UAAF;AAAcG,IAAAA;AAAd,GAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,WAAT,CACLC,UADK,EAELC,aAFK,EAGL;AACA,MAAI,CAACA,aAAL,EAAoB;AAClB;AACD;;AAED,QAAMC,eAAe,GAAGN,wBAAWC,OAAX,CAAmBG,UAAnB,CAAxB;;AAEA,OAAK,MAAM,CAACG,GAAD,EAAMC,KAAN,CAAX,IAA2BC,MAAM,CAACC,OAAP,CAAeL,aAAf,CAA3B,EAA0D;AACxD,QAAIG,KAAK,IAAI,IAAb,EAAmB;AACjBF,MAAAA,eAAe,CAACC,GAAD,CAAf,GAAuBC,KAAvB;AACD;AACF;;AAED,SAAOF,eAAP;AACD;;AAEM,SAASK,sBAAT,CAAgCH,KAAhC,EAAwD;AAC7D,MAAI,sBAASA,KAAT,CAAJ,EAAqB;AACnB,WAAOA,KAAP;AACD,GAFD,MAEO,IAAI,sBAASA,KAAT,CAAJ,EAAqB;AAC1B,WAAOI,MAAM,CAACJ,KAAD,CAAb;AACD,GAFM,MAEA;AACL,UAAM,IAAIK,KAAJ,CAAW,kBAAiBL,KAAM,EAAlC,CAAN;AACD;AACF","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\nimport { isString, isNumber } from \"lodash\";\n\nexport function extractStyles(style: StyleProp<any>) {\n  const {\n    color,\n    fontFamily,\n    fontWeight,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textTransform,\n    textAlign,\n    textDecorationLine,\n    textDecorationColor,\n    textDecorationStyle,\n    ...viewStyles\n  } = StyleSheet.flatten(style || {});\n\n  const textStyles: TextStyle = {\n    color,\n    fontFamily,\n    fontWeight,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textTransform,\n    textAlign,\n    textDecorationLine,\n    textDecorationColor,\n    textDecorationStyle,\n  };\n\n  return { viewStyles, textStyles };\n}\n\n/**\n * Merges a style object on top of another style object. In React Native,\n * keys with undefined values in a style object will still override styles\n * that appear earlier in a sequence. This avoids that problem.\n *\n * This lets us avoid the `...(something ? { something } : {})` pattern.\n * There doesn't seem to be a better way to do this. These all seem to not\n * work (i.e. they all result in `{ color: undefined }`:\n * `const mergedStyles = [{ color: \"red\" }, { color: undefined }]`\n * `const mergedStyles = StyleSheet.compose({ color: \"red\" }, { color: undefined })`\n * `const mergedStyles = StyleSheet.flatten([{ color: \"red\" }, { color: undefined }])`\n */\nexport function applyStyles(\n  baseStyles: Array<StyleProp<any>>,\n  stylesToApply: StyleProp<any> | undefined\n) {\n  if (!stylesToApply) {\n    return;\n  }\n\n  const flattenedStyles = StyleSheet.flatten(baseStyles);\n\n  for (const [key, value] of Object.entries(stylesToApply)) {\n    if (value != null) {\n      flattenedStyles[key] = value;\n    }\n  }\n\n  return flattenedStyles;\n}\n\nexport function getValueForRadioButton(value: string | number) {\n  if (isString(value)) {\n    return value;\n  } else if (isNumber(value)) {\n    return String(value);\n  } else {\n    throw new Error(`Invalid value: ${value}`);\n  }\n}\n"]}
+{"version":3,"sources":["utilities.ts"],"names":["extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","StyleSheet","flatten","textStyles","borderStyleNames","marginStyleNames","extractBorderAndMarginStyles","additionalBorderStyles","additionalMarginStyles","flatStyle","borderStyles","identity","marginStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","getValueForRadioButton","String","Error"],"mappings":"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","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\nimport { isString, isNumber, pick, pickBy, identity } from \"lodash\";\n\nexport function extractStyles(style: StyleProp<any>) {\n  const {\n    color,\n    fontFamily,\n    fontWeight,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textTransform,\n    textAlign,\n    textDecorationLine,\n    textDecorationColor,\n    textDecorationStyle,\n    ...viewStyles\n  } = StyleSheet.flatten(style || {});\n\n  const textStyles: TextStyle = {\n    color,\n    fontFamily,\n    fontWeight,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textTransform,\n    textAlign,\n    textDecorationLine,\n    textDecorationColor,\n    textDecorationStyle,\n  };\n\n  return { viewStyles, textStyles };\n}\n\nexport const borderStyleNames = [\n  \"borderRadius\",\n  \"borderBottomColor\",\n  \"borderBottomEndRadius\",\n  \"borderBottomLeftRadius\",\n  \"borderBottomRightRadius\",\n  \"borderBottomStartRadius\",\n  \"borderBottomWidth\",\n  \"borderColor\",\n  \"borderEndColor\",\n  \"borderLeftColor\",\n  \"borderLeftWidth\",\n  \"borderRadius\",\n  \"borderRightColor\",\n  \"borderRightWidth\",\n  \"borderStartColor\",\n  \"borderStyle\",\n  \"borderTopColor\",\n  \"borderTopEndRadius\",\n  \"borderTopLeftRadius\",\n  \"borderTopRightRadius\",\n  \"borderTopStartRadius\",\n  \"borderTopWidth\",\n  \"borderWidth\",\n];\n\nexport const marginStyleNames = [\n  \"margin\",\n  \"marginBottom\",\n  \"marginEnd\",\n  \"marginHorizontal\",\n  \"marginLeft\",\n  \"marginRight\",\n  \"marginStart\",\n  \"marginTop\",\n  \"marginVertical\",\n];\n\nexport function extractBorderAndMarginStyles(\n  style: StyleProp<any>,\n  additionalBorderStyles?: string[],\n  additionalMarginStyles?: string[]\n) {\n  const flatStyle = StyleSheet.flatten(style || {});\n\n  const borderStyles = pickBy(\n    pick(flatStyle, [\n      ...borderStyleNames,\n      ...(additionalBorderStyles ? additionalBorderStyles : []),\n    ]),\n    identity\n  );\n\n  const marginStyles = pickBy(\n    pick(flatStyle, [\n      ...marginStyleNames,\n      ...(additionalMarginStyles ? additionalMarginStyles : []),\n    ]),\n    identity\n  );\n\n  return { borderStyles, marginStyles };\n}\n\n/**\n * Merges a style object on top of another style object. In React Native,\n * keys with undefined values in a style object will still override styles\n * that appear earlier in a sequence. This avoids that problem.\n *\n * This lets us avoid the `...(something ? { something } : {})` pattern.\n * There doesn't seem to be a better way to do this. These all seem to not\n * work (i.e. they all result in `{ color: undefined }`:\n * `const mergedStyles = [{ color: \"red\" }, { color: undefined }]`\n * `const mergedStyles = StyleSheet.compose({ color: \"red\" }, { color: undefined })`\n * `const mergedStyles = StyleSheet.flatten([{ color: \"red\" }, { color: undefined }])`\n */\nexport function applyStyles(\n  baseStyles: Array<StyleProp<any>>,\n  stylesToApply: StyleProp<any> | undefined\n) {\n  if (!stylesToApply) {\n    return;\n  }\n\n  const flattenedStyles = StyleSheet.flatten(baseStyles);\n\n  for (const [key, value] of Object.entries(stylesToApply)) {\n    if (value != null) {\n      flattenedStyles[key] = value;\n    }\n  }\n\n  return flattenedStyles;\n}\n\nexport function getValueForRadioButton(value: string | number) {\n  if (isString(value)) {\n    return value;\n  } else if (isNumber(value)) {\n    return String(value);\n  } else {\n    throw new Error(`Invalid value: ${value}`);\n  }\n}\n"]}

package/lib/module/components/Accordion/AccordionItem.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || 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 { Pressable, StyleSheet, View } from "react-native";
 import Text from "../Text";
@@ -20,9 +18,10 @@ const AccordionItem = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [styles.container, viewStyles]
-  }, rest), /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: [styles.container, viewStyles],
+    ...rest
+  }, /*#__PURE__*/React.createElement(View, {
     style: styles.row
   }, icon ? /*#__PURE__*/React.createElement(Icon, {
     name: icon,
@@ -55,4 +54,22 @@ const styles = StyleSheet.create({
   }
 });
 export default withTheme(AccordionItem);
+//# sourceMappingURL=AccordionItem.js.map  container: {
+    padding: 8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingLeft: 8
+  },
+  item: {
+    marginVertical: 6,
+    paddingLeft: 8
+  },
+  content: {
+    flex: 1,
+    justifyContent: "center"
+  }
+});
+export default withTheme(AccordionItem);
 //# sourceMappingURL=AccordionItem.js.map

package/lib/module/components/Layout.js

@@ -1,5 +1,8 @@
+function _extends() { _extends = Object.assign || 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 } from "react-native";
+import { View } from "react-native"; // @ts-ignore
+
 export function Center(_ref) {
   let {
     width = 240,
@@ -9,16 +12,15 @@ export function Center(_ref) {
     style,
     ...rest
   } = _ref;
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(View, _extends({
     style: [{
       justifyContent: "center",
       alignItems: "center",
       width,
       height,
       backgroundColor: bgColor
-    }, style],
-    ...rest
-  }, children);
+    }, style]
+  }, rest), children);
 }
 export function Circle(_ref2) {
   let {
@@ -29,7 +31,7 @@ export function Circle(_ref2) {
     ...rest
   } = _ref2;
   const borderRadius = 1000;
-  return /*#__PURE__*/React.createElement(Center, {
+  return /*#__PURE__*/React.createElement(Center, _extends({
     width: size,
     height: size,
     bgColor: bgColor,
@@ -37,9 +39,8 @@ export function Circle(_ref2) {
       backgroundColor: bgColor,
       borderRadius,
       overflow: "hidden"
-    }],
-    ...rest
-  }, children);
+    }]
+  }, rest), children);
 }
 export function Square(_ref3) {
   let {
@@ -49,13 +50,12 @@ export function Square(_ref3) {
     style,
     ...rest
   } = _ref3;
-  return /*#__PURE__*/React.createElement(Center, {
+  return /*#__PURE__*/React.createElement(Center, _extends({
     style: style,
     width: size,
     height: size,
-    bgColor: bgColor,
-    ...rest
-  }, children);
+    bgColor: bgColor
+  }, rest), children);
 }
 export function Row(_ref4) {
   let {
@@ -65,14 +65,14 @@ export function Row(_ref4) {
     style,
     ...rest
   } = _ref4;
-  return /*#__PURE__*/React.createElement(View, {
-    style: [style, {
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [style, // style goes first b/c we can't override these
+    {
       alignItems,
       flexDirection: "row",
       justifyContent: justifyContent
-    }],
-    ...rest
-  }, children);
+    }]
+  }, rest), children);
 }
 export function Spacer(_ref5) {
   let {
@@ -84,15 +84,14 @@ export function Spacer(_ref5) {
     style,
     ...rest
   } = _ref5;
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(View, _extends({
     style: [style, {
       paddingRight: right,
       paddingTop: top,
       paddingLeft: left,
       paddingBottom: bottom
-    }],
-    ...rest
-  }, children);
+    }]
+  }, rest), children);
 }
 export function Stack(_ref6) {
   let {
@@ -105,13 +104,12 @@ export function Stack(_ref6) {
   return (
     /*#__PURE__*/
     // style must go first since we don't want justifyContent, alignItems overridden
-    React.createElement(View, {
+    React.createElement(View, _extends({
       style: [style, {
         justifyContent,
         alignItems
-      }],
-      ...rest
-    }, children)
+      }]
+    }, rest), children)
   );
 }
 //# sourceMappingURL=Layout.js.map

package/lib/module/components/Layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Layout.js"],"names":["React","View","Center","width","height","children","bgColor","style","rest","createElement","justifyContent","alignItems","backgroundColor","Circle","size","borderRadius","overflow","Square","Row","flexDirection","Spacer","top","right","bottom","left","paddingRight","paddingTop","paddingLeft","paddingBottom","Stack"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View } from \"react-native\";\nexport function Center({ width = 240, height = 200, children, bgColor, style, ...rest }) {\n    return (React.createElement(View, { style: [\n            {\n                justifyContent: \"center\",\n                alignItems: \"center\",\n                width,\n                height,\n                backgroundColor: bgColor,\n            },\n            style,\n        ], ...rest }, children));\n}\nexport function Circle({ size = 50, bgColor, children, style, ...rest }) {\n    const borderRadius = 1000;\n    return (React.createElement(Center, { width: size, height: size, bgColor: bgColor, style: [\n            style,\n            { backgroundColor: bgColor, borderRadius, overflow: \"hidden\" },\n        ], ...rest }, children));\n}\nexport function Square({ size = 50, bgColor, children, style, ...rest }) {\n    return (React.createElement(Center, { style: style, width: size, height: size, bgColor: bgColor, ...rest }, children));\n}\nexport function Row({ justifyContent, alignItems, children, style, ...rest }) {\n    return (React.createElement(View, { style: [\n            style,\n            {\n                alignItems,\n                flexDirection: \"row\",\n                justifyContent: justifyContent,\n            },\n        ], ...rest }, children));\n}\nexport function Spacer({ top = 8, right = 8, bottom = 8, left = 8, children, style, ...rest }) {\n    return (React.createElement(View, { style: [\n            style,\n            {\n                paddingRight: right,\n                paddingTop: top,\n                paddingLeft: left,\n                paddingBottom: bottom,\n            },\n        ], ...rest }, children));\n}\nexport function Stack({ children, justifyContent = \"flex-start\", alignItems = \"flex-start\", style, ...rest }) {\n    return (\n    // style must go first since we don't want justifyContent, alignItems overridden\n    React.createElement(View, { style: [style, { justifyContent, alignItems }], ...rest }, children));\n}\n"]}
+{"version":3,"sources":["Layout.tsx"],"names":["React","View","Center","width","height","children","bgColor","style","rest","justifyContent","alignItems","backgroundColor","Circle","size","borderRadius","overflow","Square","Row","flexDirection","Spacer","top","right","bottom","left","paddingRight","paddingTop","paddingLeft","paddingBottom","Stack"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\n// @ts-ignore\nimport type { ViewStyleProp } from \"react-native/Libraries/StyleSheet/StyleSheet\";\n\nexport function Center({\n  width = 240,\n  height = 200,\n  children,\n  bgColor,\n  style,\n  ...rest\n}: {\n  width: number;\n  height: number;\n  bgColor: string;\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}) {\n  return (\n    <View\n      style={[\n        {\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          width,\n          height,\n          backgroundColor: bgColor,\n        },\n        style,\n      ]}\n      {...rest}\n    >\n      {children}\n    </View>\n  );\n}\n\nexport function Circle({\n  size = 50,\n  bgColor,\n  children,\n  style,\n  ...rest\n}: {\n  size: number;\n  bgColor: string;\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}) {\n  const borderRadius = 1000;\n  return (\n    <Center\n      width={size}\n      height={size}\n      bgColor={bgColor}\n      style={[\n        style,\n        { backgroundColor: bgColor, borderRadius, overflow: \"hidden\" },\n      ]}\n      {...rest}\n    >\n      {children}\n    </Center>\n  );\n}\n\nexport function Square({\n  size = 50,\n  bgColor,\n  children,\n  style,\n  ...rest\n}: {\n  size: number;\n  bgColor: string;\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}) {\n  return (\n    <Center\n      style={style}\n      width={size}\n      height={size}\n      bgColor={bgColor}\n      {...rest}\n    >\n      {children}\n    </Center>\n  );\n}\n\nexport function Row({\n  justifyContent,\n  alignItems,\n  children,\n  style,\n  ...rest\n}: {\n  alignItems: ViewStyleProp.alignItems;\n  justifyContent: ViewStyleProp.justifyContent;\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}) {\n  return (\n    <View\n      style={[\n        style, // style goes first b/c we can't override these\n        {\n          alignItems,\n          flexDirection: \"row\",\n          justifyContent: justifyContent,\n        },\n      ]}\n      {...rest}\n    >\n      {children}\n    </View>\n  );\n}\n\nexport function Spacer({\n  top = 8,\n  right = 8,\n  bottom = 8,\n  left = 8,\n  children,\n  style,\n  ...rest\n}: {\n  top?: number;\n  right?: number;\n  left?: number;\n  bottom?: number;\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}) {\n  return (\n    <View\n      style={[\n        style,\n        {\n          paddingRight: right,\n          paddingTop: top,\n          paddingLeft: left,\n          paddingBottom: bottom,\n        },\n      ]}\n      {...rest}\n    >\n      {children}\n    </View>\n  );\n}\n\nexport function Stack({\n  children,\n  justifyContent = \"flex-start\",\n  alignItems = \"flex-start\",\n  style,\n  ...rest\n}: {\n  justifyContent: ViewStyleProp.justifyContent;\n  alignItems: ViewStyleProp.alignItems;\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}) {\n  return (\n    // style must go first since we don't want justifyContent, alignItems overridden\n    <View style={[style, { justifyContent, alignItems }]} {...rest}>\n      {children}\n    </View>\n  );\n}\n"]}

package/lib/module/components/Picker/Picker.js

@@ -1,26 +1,30 @@
-function _extends() { _extends = Object.assign || 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 { withTheme } from "../../theming"; //@ts-ignore
-
-import PickerComponent from "./PickerComponent"; //unable to find file due to using .android/.web/.ios
+import { View, StyleSheet, Text, Platform, Dimensions } from "react-native";
+import { omit, pickBy, identity, isObject } from "lodash";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import { withTheme } from "../../theming";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
+import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames } from "../../utilities";
 
 function normalizeOptions(options) {
   if (options.length === 0) {
     return [];
   }
 
-  if (typeof options[0] === "string") {
+  if (typeof options[0] === ("string" || "number")) {
     return options.map(option => ({
-      label: option,
+      label: String(option),
       value: String(option)
     }));
   }
 
-  if (options[0].label && options[0].value) {
+  if (isObject(options[0]) && options[0].value !== null && options[0].label !== null) {
     return options.map(option => {
       return {
-        label: option.label,
+        label: String(option.label),
         value: String(option.value)
       };
     });
@@ -29,16 +33,47 @@ function normalizeOptions(options) {
   throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
 }
 
+const {
+  width: deviceWidth,
+  height: deviceHeight
+} = Dimensions.get("screen");
+const isIos = Platform.OS === "ios";
+const unstyledColor = "rgba(165, 173, 183, 1)";
+const disabledColor = "rgb(240, 240, 240)";
+const errorColor = "rgba(255, 69, 100, 1)";
+
 const Picker = _ref => {
+  var _find$label, _find;
+
   let {
+    error,
     options = [],
+    onValueChange,
+    defaultValue,
+    Icon,
+    style,
     placeholder,
-    onValueChange: onValueChangeOverride,
     value,
-    defaultValue,
-    ...props
+    disabled = false,
+    theme,
+    assistiveText,
+    label,
+    iconColor = unstyledColor,
+    iconSize = 24,
+    leftIconMode = "inset",
+    leftIconName,
+    placeholderTextColor = unstyledColor,
+    rightIconName,
+    type = "solid"
   } = _ref;
+  const androidPickerRef = React.useRef(undefined);
   const [internalValue, setInternalValue] = React.useState(value || defaultValue);
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+
+  const togglePickerVisible = () => {
+    setPickerVisible(!pickerVisible);
+  };
+
   React.useEffect(() => {
     if (value != null) {
       setInternalValue(value);
@@ -49,34 +84,252 @@ const Picker = _ref => {
       setInternalValue(defaultValue);
     }
   }, [defaultValue]);
-  const onValueChange = React.useCallback((itemValue, itemIndex) => {
-    if (placeholder && itemIndex === 0) {
-      return;
-    }
+  React.useEffect(() => {
+    if (pickerVisible && androidPickerRef.current) {
+      var _androidPickerRef$cur;
 
-    onValueChangeOverride && onValueChangeOverride(String(itemValue), itemIndex);
-  }, [placeholder, onValueChangeOverride]);
+      androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
+    }
+  }, [pickerVisible, androidPickerRef]);
   const normalizedOptions = normalizeOptions(options);
   const pickerOptions = placeholder ? [{
     value: placeholder,
     label: placeholder
   }, ...normalizedOptions] : normalizedOptions;
+  const {
+    colors
+  } = theme;
+  const {
+    viewStyles,
+    textStyles
+  } = extractStyles(style);
+  const additionalBorderStyles = ["backgroundColor"];
+  const additionalMarginStyles = ["bottom", "height", "left", "maxHeight", "maxWidth", "minHeight", "minWidth", "overflow", "position", "right", "top", "width", "zIndex"];
+  const {
+    borderStyles: extractedBorderStyles,
+    marginStyles: extractedMarginStyles
+  } = extractBorderAndMarginStyles(viewStyles, additionalBorderStyles, additionalMarginStyles);
+  const borderStyles = { ...{ ...(type === "solid" ? {
+        borderTopLeftRadius: 5,
+        borderTopRightRadius: 5,
+        borderBottomRightRadius: 5,
+        borderBottomLeftRadius: 5,
+        borderTopWidth: 1,
+        borderRightWidth: 1,
+        borderLeftWidth: 1
+      } : {}),
+      borderBottomWidth: 1,
+      borderColor: unstyledColor,
+      borderStyle: "solid"
+    },
+    ...extractedBorderStyles,
+    ...(error ? {
+      borderColor: errorColor
+    } : {}),
+    ...(disabled ? {
+      borderColor: "transparent",
+      backgroundColor: disabledColor
+    } : {})
+  };
+  const marginStyles = {
+    height: 60,
+    ...extractedMarginStyles
+  };
+  const stylesWithoutBordersAndMargins = omit(viewStyles, [...borderStyleNames, ...marginStyleNames, ...additionalBorderStyles, ...additionalMarginStyles]);
+  const selectedLabel = internalValue && ((_find$label = (_find = pickerOptions.find(option => option.value === internalValue)) === null || _find === void 0 ? void 0 : _find.label) !== null && _find$label !== void 0 ? _find$label : internalValue);
+  const labelText = label ? /*#__PURE__*/React.createElement(Text, {
+    style: {
+      textAlign: textStyles.textAlign,
+      color: unstyledColor,
+      fontSize: 12,
+      paddingBottom: 4
+    }
+  }, label) : null;
+  const leftIconOutset = leftIconMode === "outset";
+  const leftIcon = leftIconName ? /*#__PURE__*/React.createElement(Icon, {
+    name: leftIconName,
+    color: disabled ? unstyledColor : iconColor,
+    size: iconSize,
+    style: {
+      marginRight: 4,
+      marginLeft: 4
+    }
+  }) : null;
+  const rightIcon = rightIconName ? /*#__PURE__*/React.createElement(Icon, {
+    name: rightIconName,
+    color: disabled ? unstyledColor : iconColor,
+    size: iconSize,
+    style: {
+      marginRight: -10,
+      marginLeft: 8
+    }
+  }) : null;
+  const textAlign = textStyles === null || textStyles === void 0 ? void 0 : textStyles.textAlign;
 
-  const handleValueChange = (newValue, itemIndex) => {
-    setInternalValue(newValue);
+  const calculateLeftPadding = () => {
+    if (leftIconOutset) {
+      if (textAlign === "center") {
+        return iconSize - Math.abs(8 - iconSize);
+      }
+
+      return iconSize + 8;
+    }
+
+    return 0;
+  };
 
-    if (onValueChange) {
-      onValueChange(newValue, itemIndex);
+  const assistiveTextLabel = assistiveText ? /*#__PURE__*/React.createElement(Text, {
+    style: {
+      textAlign,
+      width: "100%",
+      paddingLeft: calculateLeftPadding(),
+      color: unstyledColor,
+      fontSize: 12,
+      paddingTop: 4
     }
+  }, assistiveText) : null;
+  const primaryTextStyle = {
+    color: unstyledColor,
+    fontSize: 14,
+    ...pickBy(textStyles, identity),
+    ...(placeholder === internalValue ? {
+      color: placeholderTextColor
+    } : {}),
+    ...(disabled ? {
+      color: unstyledColor
+    } : {})
   };
 
-  return /*#__PURE__*/React.createElement(PickerComponent, _extends({}, props, {
-    selectedValue: String(internalValue),
-    placeholder: placeholder,
-    options: pickerOptions,
-    onValueChange: handleValueChange
-  }));
+  const handleValueChange = (newValue, itemIndex) => {
+    if (!placeholder || itemIndex > 0) {
+      onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
+    }
+
+    setInternalValue(newValue);
+  };
+
+  return (
+    /*#__PURE__*/
+
+    /* marginsContainer */
+    React.createElement(View, {
+      style: [styles.marginsContainer, marginStyles]
+    }, /*#__PURE__*/React.createElement(Touchable, {
+      disabled: disabled,
+      onPress: togglePickerVisible,
+      style: styles.touchableContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      pointerEvents: "none",
+      style: [styles.outsetContainer, stylesWithoutBordersAndMargins, !leftIconOutset ? borderStyles : {}]
+    }, leftIcon, /*#__PURE__*/React.createElement(View, {
+      style: [styles.insetContainer, leftIconOutset ? borderStyles : {}]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.primaryTextContainer
+    }, labelText, /*#__PURE__*/React.createElement(Text, {
+      style: primaryTextStyle
+    }, String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder))), rightIcon)), assistiveTextLabel), isIos && pickerVisible ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+      style: [styles.iosPicker, {
+        backgroundColor: colors.divider
+      }]
+    }, /*#__PURE__*/React.createElement(SafeAreaView, {
+      style: styles.iosSafeArea
+    }, /*#__PURE__*/React.createElement(Button, {
+      Icon: Icon,
+      type: "text",
+      onPress: togglePickerVisible,
+      style: styles.iosButton
+    }, "Close"), /*#__PURE__*/React.createElement(NativePicker, {
+      style: styles.iosNativePicker,
+      selectedValue: internalValue,
+      onValueChange: handleValueChange
+    }, pickerOptions.map(option => /*#__PURE__*/React.createElement(NativePicker.Item, {
+      label: option.label,
+      value: option.value,
+      key: option.value
+    })))))) : null, !isIos && pickerVisible ? /*#__PURE__*/React.createElement(NativePicker, {
+      enabled: pickerVisible,
+      selectedValue: internalValue,
+      onValueChange: handleValueChange,
+      style: styles.nonIosPicker,
+      ref: androidPickerRef,
+      onBlur: () => setPickerVisible(false)
+    }, pickerOptions.map(option => /*#__PURE__*/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",
+    alignItems: "center",
+    width: "100%",
+    maxWidth: deviceWidth
+  },
+  touchableContainer: {
+    flex: 1,
+    height: "100%",
+    width: "100%",
+    alignSelf: "stretch",
+    alignItems: "center"
+  },
+  outsetContainer: {
+    flex: 1,
+    height: "100%",
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  insetContainer: {
+    flex: 1,
+    height: "100%",
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingLeft: 12,
+    paddingRight: 12
+  },
+  primaryTextContainer: {
+    flex: 1
+  },
+  iosPicker: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    justifyContent: "center",
+    width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight
+  },
+  iosSafeArea: {
+    backgroundColor: "white",
+    flexDirection: "column",
+    width: "100%",
+    maxWidth: deviceWidth
+  },
+  iosButton: {
+    alignSelf: "flex-end"
+  },
+  iosNativePicker: {
+    backgroundColor: "white"
+  },
+  nonIosPicker: {
+    opacity: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight
+  }
+});
 //# sourceMappingURL=Picker.js.map