@draftbit/core 44.1.13-9a8dff.0 → 44.1.13-c10e64.0

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

@@ -1,21 +1,112 @@
+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 {
-/* StyleSheet, Dimensions, View, */
-Text } from "react-native"; // import { Picker as NativePicker } from "@react-native-picker/picker";
+import { View, StyleSheet } from "react-native";
+import omit from "lodash.omit";
+import { withTheme } from "../../theming";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import { extractStyles } from "../../utilities";
+import TextField from "../TextField";
+import Touchable from "../Touchable";
+
+const Picker = _ref => {
+  var _options$find$label, _options$find;
+
+  let {
+    style,
+    options,
+    placeholder,
+    selectedValue,
+    disabled = false,
+    onValueChange: onValueChangeOverride = () => {},
+    ...props
+  } = _ref;
+  const {
+    viewStyles: {
+      borderRadius,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderTopWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderRightWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderBottomWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderLeftWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderColor,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      backgroundColor,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      padding,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingTop,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingRight,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingBottom,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingLeft,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      ...viewStyles
+    }
+  } = extractStyles(style);
+  const textField = React.useRef(undefined);
+
+  const onValueChange = (itemValue, itemIndex) => {
+    toggleFocus();
+    onValueChangeOverride(itemValue, itemIndex);
+  };
+
+  const toggleFocus = () => {
+    if (!disabled) {
+      // @ts-ignore
+      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
+    }
+  };
+
+  const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
+  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  return /*#__PURE__*/React.createElement(Touchable, {
+    disabled: disabled,
+    onPress: toggleFocus,
+    style: [styles.container, viewStyles]
+  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(NativePicker, {
+    enabled: !disabled,
+    selectedValue: selectedValue,
+    onValueChange: onValueChange,
+    style: {
+      opacity: 0,
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: "100%"
+    }
+  }, options.map(o => /*#__PURE__*/React.createElement(NativePicker.Item, {
+    label: o.label,
+    value: o.value,
+    key: o.value
+  }))), /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
+  }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
+    value: selectedLabel,
+    placeholder: placeholder // @ts-ignore
+    ,
+    ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
+    ,
+    disabled: disabled // @ts-expect-error
+    ,
+    style: stylesWithoutMargin
+  })))));
+};
 
-export const PickerComponent = () => {
-  return /*#__PURE__*/React.createElement(Text, null, "android");
-}; // const styles = StyleSheet.create({
-//   nonIosPicker: {
-//     opacity: 0,
-//     position: "absolute",
-//     top: 0,
-//     left: 0,
-//     right: 0,
-//     bottom: 0,
-//     width: "100%",
-//     maxWidth: deviceWidth,
-//     maxHeight: deviceHeight,
-//   },
-// });
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  }
+});
+export default withTheme(Picker);
 //# sourceMappingURL=PickerComponent.android.js.map

package/lib/module/components/Picker/PickerComponent.android.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PickerComponent.android.tsx"],"names":["React","Text","PickerComponent"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA;AAAS;AAAoCC,IAA7C,QAAyD,cAAzD,C,CAEA;;AAiBA,OAAO,MAAMC,eAA+C,GAAG,MAAM;AACnE,sBAAO,oBAAC,IAAD,kBAAP;AACD,CAFM,C,CAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import * as React from \"react\";\nimport { /* StyleSheet, Dimensions, View, */ Text } from \"react-native\";\n\n// import { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\n// const { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n  Icon: IconSlot[\"Icon\"];\n  androidPickerRef: React.RefObject<any>;\n  togglePickerVisible: () => void;\n  pickerOptions: PickerOption[];\n  internalValue: string | undefined;\n  handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = () => {\n  return <Text>android</Text>;\n};\n\n// const styles = StyleSheet.create({\n//   nonIosPicker: {\n//     opacity: 0,\n//     position: \"absolute\",\n//     top: 0,\n//     left: 0,\n//     right: 0,\n//     bottom: 0,\n//     width: \"100%\",\n//     maxWidth: deviceWidth,\n//     maxHeight: deviceHeight,\n//   },\n// });\n"]}
+{"version":3,"sources":["PickerComponent.android.tsx"],"names":["React","View","StyleSheet","omit","withTheme","Picker","NativePicker","extractStyles","TextField","Touchable","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","flatten","selectedLabel","find","o","value","label","styles","container","opacity","position","top","left","right","bottom","width","map","create","alignSelf"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AACA,OAAOC,IAAP,MAAiB,aAAjB;AACA,SAASC,SAAT,QAA0B,eAA1B;AACA,SAASC,MAAM,IAAIC,YAAnB,QAAuC,6BAAvC;AACA,SAASC,aAAT,QAA8B,iBAA9B;AAEA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,SAAP,MAAsB,cAAtB;;AAGA,MAAMJ,MAAsC,GAAG,QAQzC;AAAA;;AAAA,MAR0C;AAC9CK,IAAAA,KAD8C;AAE9CC,IAAAA,OAF8C;AAG9CC,IAAAA,WAH8C;AAI9CC,IAAAA,aAJ8C;AAK9CC,IAAAA,QAAQ,GAAG,KALmC;AAM9CC,IAAAA,aAAa,EAAEC,qBAAqB,GAAG,MAAM,CAAE,CAND;AAO9C,OAAGC;AAP2C,GAQ1C;AACJ,QAAM;AACJC,IAAAA,UAAU,EAAE;AACVC,MAAAA,YADU;AACI;AACdC,MAAAA,WAFU;AAEG;AACbC,MAAAA,cAHU;AAGM;AAChBC,MAAAA,gBAJU;AAIQ;AAClBC,MAAAA,iBALU;AAKS;AACnBC,MAAAA,eANU;AAMO;AACjBC,MAAAA,WAPU;AAOG;AACbC,MAAAA,eARU;AAQO;AACjBC,MAAAA,OATU;AASD;AACTC,MAAAA,UAVU;AAUE;AACZC,MAAAA,YAXU;AAWI;AACdC,MAAAA,aAZU;AAYK;AACfC,MAAAA,WAbU;AAaG;AACb,SAAGb;AAdO;AADR,MAiBFX,aAAa,CAACG,KAAD,CAjBjB;AAmBA,QAAMsB,SAAS,GAAGhC,KAAK,CAACiC,MAAN,CAA2CC,SAA3C,CAAlB;;AAEA,QAAMnB,aAAa,GAAG,CAACoB,SAAD,EAAoBC,SAApB,KAA0C;AAC9DC,IAAAA,WAAW;AACXrB,IAAAA,qBAAqB,CAACmB,SAAD,EAAYC,SAAZ,CAArB;AACD,GAHD;;AAKA,QAAMC,WAAW,GAAG,MAAM;AACxB,QAAI,CAACvB,QAAL,EAAe;AACb;AACAkB,MAAAA,SAAS,CAACM,OAAV,CAAkBD,WAAlB,GAFa,CAEoB;AAClC;AACF,GALD;;AAOA,QAAME,mBAAmB,GACvB7B,KAAK,IACLP,IAAI,CAACD,UAAU,CAACsC,OAAX,CAAmB9B,KAAnB,CAAD,EAA4B,CAC9B,QAD8B,EAE9B,WAF8B,EAG9B,aAH8B,EAI9B,cAJ8B,EAK9B,YAL8B,CAA5B,CAFN;AAUA,QAAM+B,aAAa,GACjB5B,aAAa,6CACZF,OAAO,CAAC+B,IAAR,CAAcC,CAAD,IAAOA,CAAC,CAACC,KAAF,KAAY/B,aAAhC,CADY,kDACZ,cAAgDgC,KADpC,qEAC6ChC,aAD7C,CADf;AAIA,sBACE,oBAAC,SAAD;AACE,IAAA,QAAQ,EAAEC,QADZ;AAEE,IAAA,OAAO,EAAEuB,WAFX;AAGE,IAAA,KAAK,EAAE,CAACS,MAAM,CAACC,SAAR,EAAmB7B,UAAnB;AAHT,kBAKE,oBAAC,IAAD,qBACE,oBAAC,YAAD;AACE,IAAA,OAAO,EAAE,CAACJ,QADZ;AAEE,IAAA,aAAa,EAAED,aAFjB;AAGE,IAAA,aAAa,EAAEE,aAHjB;AAIE,IAAA,KAAK,EAAE;AACLiC,MAAAA,OAAO,EAAE,CADJ;AAELC,MAAAA,QAAQ,EAAE,UAFL;AAGLC,MAAAA,GAAG,EAAE,CAHA;AAILC,MAAAA,IAAI,EAAE,CAJD;AAKLC,MAAAA,KAAK,EAAE,CALF;AAMLC,MAAAA,MAAM,EAAE,CANH;AAOLC,MAAAA,KAAK,EAAE;AAPF;AAJT,KAcG3C,OAAO,CAAC4C,GAAR,CAAaZ,CAAD,iBACX,oBAAC,YAAD,CAAc,IAAd;AAAmB,IAAA,KAAK,EAAEA,CAAC,CAACE,KAA5B;AAAmC,IAAA,KAAK,EAAEF,CAAC,CAACC,KAA5C;AAAmD,IAAA,GAAG,EAAED,CAAC,CAACC;AAA1D,IADD,CAdH,CADF,eAmBE,oBAAC,IAAD;AAAM,IAAA,aAAa,EAAC;AAApB,kBACE,oBAAC,SAAD,eACM3B,KADN;AAEE,IAAA,KAAK,EAAEwB,aAFT;AAGE,IAAA,WAAW,EAAE7B,WAHf,CAIE;AAJF;AAKE,IAAA,GAAG,EAAEoB,SALP,CAKkB;AALlB;AAME,IAAA,QAAQ,EAAElB,QANZ,CAOE;AAPF;AAQE,IAAA,KAAK,EAAEyB;AART,KADF,CAnBF,CALF,CADF;AAwCD,CAhGD;;AAkGA,MAAMO,MAAM,GAAG5C,UAAU,CAACsD,MAAX,CAAkB;AAC/BT,EAAAA,SAAS,EAAE;AACTU,IAAAA,SAAS,EAAE;AADF;AADoB,CAAlB,CAAf;AAMA,eAAerD,SAAS,CAACC,MAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange: onValueChangeOverride = () => {},\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n  const onValueChange = (itemValue: string, itemIndex: number) => {\n    toggleFocus();\n    onValueChangeOverride(itemValue, itemIndex);\n  };\n\n  const toggleFocus = () => {\n    if (!disabled) {\n      // @ts-ignore\n      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n    }\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n  return (\n    <Touchable\n      disabled={disabled}\n      onPress={toggleFocus}\n      style={[styles.container, viewStyles]}\n    >\n      <View>\n        <NativePicker\n          enabled={!disabled}\n          selectedValue={selectedValue}\n          onValueChange={onValueChange}\n          style={{\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            width: \"100%\",\n          }}\n        >\n          {options.map((o) => (\n            <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n          ))}\n        </NativePicker>\n        <View pointerEvents=\"none\">\n          <TextField\n            {...props}\n            value={selectedLabel}\n            placeholder={placeholder}\n            // @ts-ignore\n            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n            disabled={disabled}\n            // @ts-expect-error\n            style={stylesWithoutMargin}\n          />\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}

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

@@ -1,38 +1,135 @@
+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, StyleSheet, Dimensions, */
-Text } from "react-native"; // import { SafeAreaView } from "react-native-safe-area-context";
-// import { Picker as NativePicker } from "@react-native-picker/picker";
+import { View, StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import omit from "lodash.omit";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import { withTheme } from "../../theming";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import TextField from "../TextField";
+import Touchable from "../Touchable";
+import { extractStyles } from "../../utilities";
+
+const Picker = _ref => {
+  var _options$find$label, _options$find;
+
+  let {
+    Icon,
+    style,
+    options,
+    placeholder,
+    selectedValue,
+    disabled = false,
+    onValueChange = () => {},
+    theme: {
+      colors
+    },
+    ...props
+  } = _ref;
+  const {
+    viewStyles: {
+      borderRadius,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderTopWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderRightWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderBottomWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderLeftWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderColor,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      backgroundColor,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      padding,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingTop,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingRight,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingBottom,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingLeft,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      ...viewStyles
+    }
+  } = extractStyles(style);
+  const textField = React.useRef(undefined);
+  const [pickerVisible, setIsPickerVisible] = React.useState(false);
+
+  const toggleVisibility = () => {
+    setIsPickerVisible(!pickerVisible); // @ts-ignore
+
+    textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
+  };
+
+  const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
+  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, viewStyles]
+  }, /*#__PURE__*/React.createElement(Touchable, {
+    disabled: disabled,
+    onPress: toggleVisibility
+  }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
+    value: String(selectedLabel),
+    placeholder: placeholder // @ts-ignore
+    ,
+    ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
+    ,
+    disabled: disabled,
+    pointerEvents: "none" // @ts-expect-error
+    ,
+    style: stylesWithoutMargin,
+    Icon: Icon
+  }))), pickerVisible && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+    style: [styles.picker, {
+      backgroundColor: colors.divider
+    }]
+  }, /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: styles.pickerContainer
+  }, /*#__PURE__*/React.createElement(Button, {
+    Icon: Icon,
+    type: "text",
+    onPress: toggleVisibility,
+    style: styles.closeButton
+  }, "Close"), /*#__PURE__*/React.createElement(NativePicker, {
+    style: {
+      backgroundColor: "white"
+    },
+    selectedValue: selectedValue,
+    onValueChange: onValueChange
+  }, options.map(o => /*#__PURE__*/React.createElement(NativePicker.Item, {
+    label: o.label,
+    value: o.value,
+    key: o.value
+  })))))));
+};
 
-export const PickerComponent = () => {
-  return /*#__PURE__*/React.createElement(Text, null, "ios");
-}; // const styles = StyleSheet.create({
-//   iosPicker: {
-//     position: "absolute",
-//     bottom: 0,
-//     left: 0,
-//     right: 0,
-//     flexDirection: "row",
-//     justifyContent: "center",
-//     width: deviceWidth, // TODO
-//     maxWidth: deviceWidth,
-//     maxHeight: deviceHeight,
-//     backgroundColor: "green", // TODO
-//     // backgroundColor: "rgba(255, 255, 255, 1)",
-//   },
-//   iosSafeArea: {
-//     backgroundColor: "yellow",
-//     // backgroundColor: "white",// TODO
-//     flexDirection: "column",
-//     width: deviceWidth,
-//     maxWidth: deviceWidth,
-//   },
-//   iosButton: {
-//     alignSelf: "flex-end",
-//   },
-//   iosNativePicker: {
-//     //backgroundColor: "white",// TODO
-//     backgroundColor: "red",
-//   },
-// });
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  },
+  picker: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    justifyContent: "center"
+  },
+  pickerContainer: {
+    backgroundColor: "white",
+    flexDirection: "column",
+    width: "100%"
+  },
+  closeButton: {
+    alignSelf: "flex-end"
+  }
+});
+export default withTheme(Picker);
 //# sourceMappingURL=PickerComponent.ios.js.map

package/lib/module/components/Picker/PickerComponent.ios.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PickerComponent.ios.tsx"],"names":["React","Text","PickerComponent"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA;AAAS;AAAoCC,IAA7C,QAAyD,cAAzD,C,CACA;AACA;;AAkBA,OAAO,MAAMC,eAA+C,GAAG,MAAM;AACnE,sBAAO,oBAAC,IAAD,cAAP;AACD,CAFM,C,CAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import * as React from \"react\";\nimport { /* View, StyleSheet, Dimensions, */ Text } from \"react-native\";\n// import { SafeAreaView } from \"react-native-safe-area-context\";\n// import { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n// import Portal from \"../Portal/Portal\";\n// import Button from \"../DeprecatedButton\";\nimport { PickerOption } from \"./Picker\";\n\n// const { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n  Icon: IconSlot[\"Icon\"];\n  androidPickerRef: React.RefObject<any>;\n  togglePickerVisible: () => void;\n  pickerOptions: PickerOption[];\n  internalValue: string | undefined;\n  handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = () => {\n  return <Text>ios</Text>;\n};\n\n// const styles = StyleSheet.create({\n//   iosPicker: {\n//     position: \"absolute\",\n//     bottom: 0,\n//     left: 0,\n//     right: 0,\n//     flexDirection: \"row\",\n//     justifyContent: \"center\",\n//     width: deviceWidth, // TODO\n//     maxWidth: deviceWidth,\n//     maxHeight: deviceHeight,\n//     backgroundColor: \"green\", // TODO\n//     // backgroundColor: \"rgba(255, 255, 255, 1)\",\n//   },\n//   iosSafeArea: {\n//     backgroundColor: \"yellow\",\n//     // backgroundColor: \"white\",// TODO\n//     flexDirection: \"column\",\n//     width: deviceWidth,\n//     maxWidth: deviceWidth,\n//   },\n//   iosButton: {\n//     alignSelf: \"flex-end\",\n//   },\n//   iosNativePicker: {\n//     //backgroundColor: \"white\",// TODO\n//     backgroundColor: \"red\",\n//   },\n// });\n"]}
+{"version":3,"sources":["PickerComponent.ios.tsx"],"names":["React","View","StyleSheet","SafeAreaView","omit","Picker","NativePicker","withTheme","Portal","Button","TextField","Touchable","extractStyles","Icon","style","options","placeholder","selectedValue","disabled","onValueChange","theme","colors","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","pickerVisible","setIsPickerVisible","useState","toggleVisibility","current","toggleFocus","stylesWithoutMargin","flatten","selectedLabel","find","o","value","label","styles","container","String","picker","divider","pickerContainer","closeButton","map","create","alignSelf","position","bottom","left","right","flexDirection","justifyContent","width"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport omit from \"lodash.omit\";\n\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport { withTheme } from \"../../theming\";\n\nimport Portal from \"../Portal/Portal\";\nimport Button from \"../DeprecatedButton\";\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\nimport { extractStyles } from \"../../utilities\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nconst Picker: React.FC<PickerComponentProps & IconSlot> = ({\n  Icon,\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange = () => {},\n  theme: { colors },\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n  const [pickerVisible, setIsPickerVisible] = React.useState(false);\n\n  const toggleVisibility = () => {\n    setIsPickerVisible(!pickerVisible);\n    // @ts-ignore\n    textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n  return (\n    <View style={[styles.container, viewStyles]}>\n      <Touchable disabled={disabled} onPress={toggleVisibility}>\n        <TextField\n          {...props}\n          value={String(selectedLabel)}\n          placeholder={placeholder}\n          // @ts-ignore\n          ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n          disabled={disabled}\n          pointerEvents=\"none\"\n          // @ts-expect-error\n          style={stylesWithoutMargin}\n          Icon={Icon}\n        />\n      </Touchable>\n      {pickerVisible && (\n        <Portal>\n          <View style={[styles.picker, { backgroundColor: colors.divider }]}>\n            <SafeAreaView style={styles.pickerContainer}>\n              <Button\n                Icon={Icon}\n                type=\"text\"\n                onPress={toggleVisibility}\n                style={styles.closeButton}\n              >\n                Close\n              </Button>\n              <NativePicker\n                style={{ backgroundColor: \"white\" }}\n                selectedValue={selectedValue}\n                onValueChange={onValueChange}\n              >\n                {options.map((o: any) => (\n                  <NativePicker.Item\n                    label={o.label}\n                    value={o.value}\n                    key={o.value}\n                  />\n                ))}\n              </NativePicker>\n            </SafeAreaView>\n          </View>\n        </Portal>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n  picker: {\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n  },\n  pickerContainer: {\n    backgroundColor: \"white\",\n    flexDirection: \"column\",\n    width: \"100%\",\n  },\n  closeButton: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}

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

@@ -1,21 +1,113 @@
+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 {
-/* StyleSheet, Dimensions,  */
-Text } from "react-native"; // import { Picker as NativePicker } from "@react-native-picker/picker";
+import { View, StyleSheet } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import omit from "lodash.omit";
+import { withTheme } from "../../theming";
+import { extractStyles } from "../../utilities";
+import TextField from "../TextField";
+import Touchable from "../Touchable";
+
+const Picker = _ref => {
+  var _options$find$label, _options$find;
+
+  let {
+    style,
+    options,
+    placeholder,
+    selectedValue,
+    disabled = false,
+    onValueChange: onValueChangeOverride = () => {},
+    ...props
+  } = _ref;
+  const {
+    viewStyles: {
+      borderRadius,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderTopWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderRightWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderBottomWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderLeftWidth,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderColor,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      backgroundColor,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      padding,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingTop,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingRight,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingBottom,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingLeft,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      ...viewStyles
+    }
+  } = extractStyles(style);
+  const textField = React.useRef(undefined);
+
+  const onValueChange = (itemValue, itemIndex) => {
+    toggleFocus();
+    onValueChangeOverride(itemValue, itemIndex);
+  };
+
+  const toggleFocus = () => {
+    if (!disabled) {
+      // @ts-ignore
+      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
+    }
+  };
+
+  const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
+  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  return /*#__PURE__*/React.createElement(Touchable, {
+    disabled: disabled,
+    onPress: toggleFocus,
+    style: [styles.container, viewStyles]
+  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(NativePicker, {
+    enabled: !disabled,
+    selectedValue: selectedValue,
+    onValueChange: onValueChange,
+    style: {
+      flex: 1,
+      opacity: 0,
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: "100%"
+    }
+  }, options.map(o => /*#__PURE__*/React.createElement(NativePicker.Item, {
+    label: o.label,
+    value: o.value,
+    key: o.value
+  }))), /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
+  }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
+    value: selectedLabel,
+    placeholder: placeholder // @ts-ignore
+    ,
+    ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
+    ,
+    disabled: disabled // @ts-expect-error
+    ,
+    style: stylesWithoutMargin
+  })))));
+};
 
-export const PickerComponent = () => {
-  return /*#__PURE__*/React.createElement(Text, null, "web");
-}; // const styles = StyleSheet.create({
-//   nonIosPicker: {
-//     opacity: 0,
-//     position: "absolute",
-//     top: 0,
-//     left: 0,
-//     right: 0,
-//     bottom: 0,
-//     width: "100%",
-//     maxWidth: deviceWidth,
-//     maxHeight: deviceHeight,
-//   },
-// });
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  }
+});
+export default withTheme(Picker);
 //# sourceMappingURL=PickerComponent.web.js.map

package/lib/module/components/Picker/PickerComponent.web.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PickerComponent.web.tsx"],"names":["React","Text","PickerComponent"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA;AAAS;AAA+BC,IAAxC,QAAoD,cAApD,C,CAEA;;AAiBA,OAAO,MAAMC,eAA+C,GAAG,MAAM;AACnE,sBAAO,oBAAC,IAAD,cAAP;AACD,CAFM,C,CAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import * as React from \"react\";\nimport { /* StyleSheet, Dimensions,  */ Text } from \"react-native\";\n\n// import { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\n// const { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n  Icon: IconSlot[\"Icon\"];\n  androidPickerRef: React.RefObject<any>;\n  togglePickerVisible: () => void;\n  pickerOptions: PickerOption[];\n  internalValue: string | undefined;\n  handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = () => {\n  return <Text>web</Text>;\n};\n\n// const styles = StyleSheet.create({\n//   nonIosPicker: {\n//     opacity: 0,\n//     position: \"absolute\",\n//     top: 0,\n//     left: 0,\n//     right: 0,\n//     bottom: 0,\n//     width: \"100%\",\n//     maxWidth: deviceWidth,\n//     maxHeight: deviceHeight,\n//   },\n// });\n"]}
+{"version":3,"sources":["PickerComponent.web.tsx"],"names":["React","View","StyleSheet","Picker","NativePicker","omit","withTheme","extractStyles","TextField","Touchable","style","options","placeholder","selectedValue","disabled","onValueChange","onValueChangeOverride","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","textField","useRef","undefined","itemValue","itemIndex","toggleFocus","current","stylesWithoutMargin","flatten","selectedLabel","find","o","value","label","styles","container","flex","opacity","position","top","left","right","bottom","width","map","create","alignSelf"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\nimport omit from \"lodash.omit\";\nimport { withTheme } from \"../../theming\";\nimport { extractStyles } from \"../../utilities\";\n\nimport TextField from \"../TextField\";\nimport Touchable from \"../Touchable\";\nimport { PickerComponentProps } from \"./PickerTypes\";\n\nconst Picker: React.FC<PickerComponentProps> = ({\n  style,\n  options,\n  placeholder,\n  selectedValue,\n  disabled = false,\n  onValueChange: onValueChangeOverride = () => {},\n  ...props\n}) => {\n  const {\n    viewStyles: {\n      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars\n      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      padding, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars\n      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...viewStyles\n    },\n  } = extractStyles(style);\n\n  const textField = React.useRef<typeof TextField | undefined>(undefined);\n\n  const onValueChange = (itemValue: string, itemIndex: number) => {\n    toggleFocus();\n    onValueChangeOverride(itemValue, itemIndex);\n  };\n\n  const toggleFocus = () => {\n    if (!disabled) {\n      // @ts-ignore\n      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()\n    }\n  };\n\n  const stylesWithoutMargin =\n    style &&\n    omit(StyleSheet.flatten(style), [\n      \"margin\",\n      \"marginTop\",\n      \"marginRight\",\n      \"marginBottom\",\n      \"marginLeft\",\n    ]);\n\n  const selectedLabel =\n    selectedValue &&\n    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);\n\n  return (\n    <Touchable\n      disabled={disabled}\n      onPress={toggleFocus}\n      style={[styles.container, viewStyles]}\n    >\n      <View>\n        <NativePicker\n          enabled={!disabled}\n          selectedValue={selectedValue}\n          onValueChange={onValueChange}\n          style={{\n            flex: 1,\n            opacity: 0,\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            width: \"100%\",\n          }}\n        >\n          {options.map((o) => (\n            <NativePicker.Item label={o.label} value={o.value} key={o.value} />\n          ))}\n        </NativePicker>\n        <View pointerEvents=\"none\">\n          <TextField\n            {...props}\n            value={selectedLabel}\n            placeholder={placeholder}\n            // @ts-ignore\n            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()\n            disabled={disabled}\n            // @ts-expect-error\n            style={stylesWithoutMargin}\n          />\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignSelf: \"stretch\",\n  },\n});\n\nexport default withTheme(Picker);\n"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PickerTypes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["CheckboxRow.js"],"names":["createBoolProp","createTextProp","createTextStyle","createRowDirectionProp","createFieldNameProp","createIconProp","createStaticNumberProp","COMPONENT_TYPES","Triggers","createColorProp","SEED_DATA","name","tag","category","input","layout","minHeight","triggers","OnPress","OnCheck","OnUncheck","props","fieldName","defaultValue","valuePropName","handlerPropName","label","description","required","labelStyle","editable","direction","color","uncheckedColor","disabled","size","checkedIcon","uncheckedIcon"],"mappings":"AAAA,SAASA,cAAT,EAAyBC,cAAzB,EAAyCC,eAAzC,EAA0DC,sBAA1D,EAAkFC,mBAAlF,EAAuGC,cAAvG,EAAuHC,sBAAvH,EAA+IC,eAA/I,EAAgKC,QAAhK,EAA0KC,eAA1K,QAAkM,iBAAlM;AACA,OAAO,MAAMC,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,cADe;AAErBC,EAAAA,GAAG,EAAE,aAFgB;AAGrBC,EAAAA,QAAQ,EAAEN,eAAe,CAACO,KAHL;AAIrBC,EAAAA,MAAM,EAAE;AACJC,IAAAA,SAAS,EAAE;AADP,GAJa;AAOrBC,EAAAA,QAAQ,EAAE,CAACT,QAAQ,CAACU,OAAV,EAAmBV,QAAQ,CAACW,OAA5B,EAAqCX,QAAQ,CAACY,SAA9C,CAPW;AAQrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,SAAS,EAAElB,mBAAmB,CAAC;AAC3BmB,MAAAA,YAAY,EAAE,kBADa;AAE3BC,MAAAA,aAAa,EAAE,OAFY;AAG3BC,MAAAA,eAAe,EAAE;AAHU,KAAD,CAD3B;AAMHC,IAAAA,KAAK,EAAEzB,cAAc,CAAC;AAClByB,MAAAA,KAAK,EAAE,OADW;AAElBC,MAAAA,WAAW,EAAE,iCAFK;AAGlBC,MAAAA,QAAQ,EAAE,IAHQ;AAIlBL,MAAAA,YAAY,EAAE;AAJI,KAAD,CANlB;AAYHM,IAAAA,UAAU,EAAE3B,eAAe,CAAC;AACxBwB,MAAAA,KAAK,EAAE,aADiB;AAExBC,MAAAA,WAAW,EAAE,gCAFW;AAGxBC,MAAAA,QAAQ,EAAE,KAHc;AAIxBE,MAAAA,QAAQ,EAAE;AAJc,KAAD,CAZxB;AAkBHC,IAAAA,SAAS,EAAE5B,sBAAsB,EAlB9B;AAmBH6B,IAAAA,KAAK,EAAEvB,eAAe,CAAC;AACnBkB,MAAAA,WAAW,EAAE;AADM,KAAD,CAnBnB;AAsBHM,IAAAA,cAAc,EAAExB,eAAe,CAAC;AAC5BiB,MAAAA,KAAK,EAAE,kBADqB;AAE5BC,MAAAA,WAAW,EAAE;AAFe,KAAD,CAtB5B;AA0BHO,IAAAA,QAAQ,EAAElC,cAAc,CAAC;AACrB0B,MAAAA,KAAK,EAAE,UADc;AAErBC,MAAAA,WAAW,EAAE;AAFQ,KAAD,CA1BrB;AA8BHQ,IAAAA,IAAI,EAAE7B,sBAAsB,CAAC;AACzBoB,MAAAA,KAAK,EAAE,MADkB;AAEzBC,MAAAA,WAAW,EAAE,gCAFY;AAGzBJ,MAAAA,YAAY,EAAE;AAHW,KAAD,CA9BzB;AAmCHa,IAAAA,WAAW,EAAE/B,cAAc,CAAC;AACxBqB,MAAAA,KAAK,EAAE,cADiB;AAExBC,MAAAA,WAAW,EAAE,oDAFW;AAGxBJ,MAAAA,YAAY,EAAE;AAHU,KAAD,CAnCxB;AAwCHc,IAAAA,aAAa,EAAEhC,cAAc,CAAC;AAC1BqB,MAAAA,KAAK,EAAE,gBADmB;AAE1BC,MAAAA,WAAW,EAAE,sDAFa;AAG1BJ,MAAAA,YAAY,EAAE;AAHY,KAAD;AAxC1B;AARc,CAAlB","sourcesContent":["import { createBoolProp, createTextProp, createTextStyle, createRowDirectionProp, createFieldNameProp, createIconProp, createStaticNumberProp, COMPONENT_TYPES, Triggers, createColorProp, } from \"@draftbit/types\";\nexport const SEED_DATA = {\n    name: \"Checkbox Row\",\n    tag: \"CheckboxRow\",\n    category: COMPONENT_TYPES.input,\n    layout: {\n        minHeight: 50,\n    },\n    triggers: [Triggers.OnPress, Triggers.OnCheck, Triggers.OnUncheck],\n    props: {\n        fieldName: createFieldNameProp({\n            defaultValue: \"checkboxRowValue\",\n            valuePropName: \"value\",\n            handlerPropName: \"onPress\",\n        }),\n        label: createTextProp({\n            label: \"Label\",\n            description: \"Label to show with the checkbox\",\n            required: true,\n            defaultValue: \"First Option\",\n        }),\n        labelStyle: createTextStyle({\n            label: \"Label Style\",\n            description: \"Change the styles of the label\",\n            required: false,\n            editable: false,\n        }),\n        direction: createRowDirectionProp(),\n        color: createColorProp({\n            description: \"Color for the button (used when the checkbox is checked)\",\n        }),\n        uncheckedColor: createColorProp({\n            label: \"Unselected Color\",\n            description: \"Color for the button when the checkbox is unchecked\",\n        }),\n        disabled: createBoolProp({\n            label: \"Disabled\",\n            description: \"Whether the checkbox is disabled\",\n        }),\n        size: createStaticNumberProp({\n            label: \"Size\",\n            description: \"Specifies the size of the icon\",\n            defaultValue: null,\n        }),\n        checkedIcon: createIconProp({\n            label: \"Checked Icon\",\n            description: 'Icon to show when the checkbox status is \"checked\"',\n            defaultValue: null,\n        }),\n        uncheckedIcon: createIconProp({\n            label: \"Unchecked Icon\",\n            description: 'Icon to show when the checkbox status is \"unchecked\"',\n            defaultValue: null,\n        }),\n    },\n};\n"]}
+{"version":3,"sources":["CheckboxRow.ts"],"names":["createBoolProp","createTextProp","createTextStyle","createRowDirectionProp","createFieldNameProp","createIconProp","createStaticNumberProp","COMPONENT_TYPES","Triggers","createColorProp","SEED_DATA","name","tag","category","input","layout","minHeight","triggers","OnPress","OnCheck","OnUncheck","props","fieldName","defaultValue","valuePropName","handlerPropName","label","description","required","labelStyle","editable","direction","color","uncheckedColor","disabled","size","checkedIcon","uncheckedIcon"],"mappings":"AAAA,SACEA,cADF,EAEEC,cAFF,EAGEC,eAHF,EAIEC,sBAJF,EAKEC,mBALF,EAMEC,cANF,EAOEC,sBAPF,EAQEC,eARF,EASEC,QATF,EAUEC,eAVF,QAWO,iBAXP;AAaA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,cADiB;AAEvBC,EAAAA,GAAG,EAAE,aAFkB;AAGvBC,EAAAA,QAAQ,EAAEN,eAAe,CAACO,KAHH;AAIvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,SAAS,EAAE;AADL,GAJe;AAOvBC,EAAAA,QAAQ,EAAE,CAACT,QAAQ,CAACU,OAAV,EAAmBV,QAAQ,CAACW,OAA5B,EAAqCX,QAAQ,CAACY,SAA9C,CAPa;AAQvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAElB,mBAAmB,CAAC;AAC7BmB,MAAAA,YAAY,EAAE,kBADe;AAE7BC,MAAAA,aAAa,EAAE,OAFc;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAAD,CADzB;AAMLC,IAAAA,KAAK,EAAEzB,cAAc,CAAC;AACpByB,MAAAA,KAAK,EAAE,OADa;AAEpBC,MAAAA,WAAW,EAAE,iCAFO;AAGpBC,MAAAA,QAAQ,EAAE,IAHU;AAIpBL,MAAAA,YAAY,EAAE;AAJM,KAAD,CANhB;AAYLM,IAAAA,UAAU,EAAE3B,eAAe,CAAC;AAC1BwB,MAAAA,KAAK,EAAE,aADmB;AAE1BC,MAAAA,WAAW,EAAE,gCAFa;AAG1BC,MAAAA,QAAQ,EAAE,KAHgB;AAI1BE,MAAAA,QAAQ,EAAE;AAJgB,KAAD,CAZtB;AAkBLC,IAAAA,SAAS,EAAE5B,sBAAsB,EAlB5B;AAmBL6B,IAAAA,KAAK,EAAEvB,eAAe,CAAC;AACrBkB,MAAAA,WAAW,EAAE;AADQ,KAAD,CAnBjB;AAsBLM,IAAAA,cAAc,EAAExB,eAAe,CAAC;AAC9BiB,MAAAA,KAAK,EAAE,kBADuB;AAE9BC,MAAAA,WAAW,EAAE;AAFiB,KAAD,CAtB1B;AA0BLO,IAAAA,QAAQ,EAAElC,cAAc,CAAC;AACvB0B,MAAAA,KAAK,EAAE,UADgB;AAEvBC,MAAAA,WAAW,EAAE;AAFU,KAAD,CA1BnB;AA8BLQ,IAAAA,IAAI,EAAE7B,sBAAsB,CAAC;AAC3BoB,MAAAA,KAAK,EAAE,MADoB;AAE3BC,MAAAA,WAAW,EAAE,gCAFc;AAG3BJ,MAAAA,YAAY,EAAE;AAHa,KAAD,CA9BvB;AAmCLa,IAAAA,WAAW,EAAE/B,cAAc,CAAC;AAC1BqB,MAAAA,KAAK,EAAE,cADmB;AAE1BC,MAAAA,WAAW,EAAE,oDAFa;AAG1BJ,MAAAA,YAAY,EAAE;AAHY,KAAD,CAnCtB;AAwCLc,IAAAA,aAAa,EAAEhC,cAAc,CAAC;AAC5BqB,MAAAA,KAAK,EAAE,gBADqB;AAE5BC,MAAAA,WAAW,EAAE,sDAFe;AAG5BJ,MAAAA,YAAY,EAAE;AAHc,KAAD;AAxCxB;AARgB,CAAlB","sourcesContent":["import {\n  createBoolProp,\n  createTextProp,\n  createTextStyle,\n  createRowDirectionProp,\n  createFieldNameProp,\n  createIconProp,\n  createStaticNumberProp,\n  COMPONENT_TYPES,\n  Triggers,\n  createColorProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Checkbox Row\",\n  tag: \"CheckboxRow\",\n  category: COMPONENT_TYPES.input,\n  layout: {\n    minHeight: 50,\n  },\n  triggers: [Triggers.OnPress, Triggers.OnCheck, Triggers.OnUncheck],\n  props: {\n    fieldName: createFieldNameProp({\n      defaultValue: \"checkboxRowValue\",\n      valuePropName: \"value\",\n      handlerPropName: \"onPress\",\n    }),\n    label: createTextProp({\n      label: \"Label\",\n      description: \"Label to show with the checkbox\",\n      required: true,\n      defaultValue: \"First Option\",\n    }),\n    labelStyle: createTextStyle({\n      label: \"Label Style\",\n      description: \"Change the styles of the label\",\n      required: false,\n      editable: false,\n    }),\n    direction: createRowDirectionProp(),\n    color: createColorProp({\n      description: \"Color for the button (used when the checkbox is checked)\",\n    }),\n    uncheckedColor: createColorProp({\n      label: \"Unselected Color\",\n      description: \"Color for the button when the checkbox is unchecked\",\n    }),\n    disabled: createBoolProp({\n      label: \"Disabled\",\n      description: \"Whether the checkbox is disabled\",\n    }),\n    size: createStaticNumberProp({\n      label: \"Size\",\n      description: \"Specifies the size of the icon\",\n      defaultValue: null,\n    }),\n    checkedIcon: createIconProp({\n      label: \"Checked Icon\",\n      description: 'Icon to show when the checkbox status is \"checked\"',\n      defaultValue: null,\n    }),\n    uncheckedIcon: createIconProp({\n      label: \"Unchecked Icon\",\n      description: 'Icon to show when the checkbox status is \"unchecked\"',\n      defaultValue: null,\n    }),\n  },\n};\n"]}

package/lib/module/mappings/Picker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp } from "@draftbit/types";
+import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME } from "@draftbit/types";
 const SEED_DATA_PROPS = {
   label: {
     group: GROUPS.data,
@@ -127,13 +127,7 @@ export const SEED_DATA = [{
       editable: true,
       required: true,
       group: GROUPS.basic
-    },
-    iconSize: createIconSizeProp({
-      defaultValue: 24
-    }),
-    iconColor: createColorProp({
-      label: "Icon Color"
-    })
+    }
   },
   layout: {}
 }];