@draftbit/core 48.5.6 → 48.5.7-cd0364.2

package/src/components/Picker/dropdown/DropDownPicker.tsx

@@ -1,157 +1,157 @@
-import * as React from "react";
-import { Keyboard } from "react-native";
-import {
-  extractStyles,
-  flattenReactFragments,
-  useDeepCompareMemo,
-} from "../../../utilities";
-import {
-  CommonDropDownPickerProps,
-  MultiSelectPickerProps,
-  SinglePickerProps,
-  normalizeToPickerOptions,
-} from "../PickerCommon";
-import PickerInputContainer from "../PickerInputContainer";
-import DropDownPickerComponent from "react-native-dropdown-picker";
-import { withTheme } from "../../../theming";
-import PickerItem, { PickerItemProps } from "./PickerItem";
-
-const DropDownPicker: React.FC<
-  React.PropsWithChildren<
-    CommonDropDownPickerProps & (SinglePickerProps | MultiSelectPickerProps)
-  >
-> = ({
-  theme,
-  options: optionsProp = [],
-  onValueChange,
-  Icon,
-  placeholder,
-  value,
-  autoDismissKeyboard = true,
-  selectedIconName = "Feather/check",
-  selectedIconColor = theme.colors.strong,
-  selectedIconSize = 20,
-  dropDownBackgroundColor = theme.colors.background,
-  dropDownBorderColor = theme.colors.divider,
-  dropDownTextColor = theme.colors.strong,
-  dropDownBorderWidth = 1,
-  dropDownBorderRadius = 8,
-  children: childrenProp,
-  disabled,
-  ...rest
-}) => {
-  const [pickerVisible, setPickerVisible] = React.useState(false);
-  const [internalValue, setInternalValue] = React.useState<
-    string | number | (string | number)[]
-  >();
-
-  const isMultiSelect = Array.isArray(value);
-
-  const pickerItemProps: PickerItemProps = React.useMemo(() => {
-    const children = flattenReactFragments(
-      React.Children.toArray(childrenProp) as React.ReactElement[]
-    );
-
-    // Only the props of the first PickerItem are used, any others are ignored
-    const firstPickerItem = children.find((child) => child.type === PickerItem);
-
-    return firstPickerItem?.props || {};
-  }, [childrenProp]);
-
-  const { viewStyles: pickerItemViewStyles, textStyles: pickerItemTextStyles } =
-    extractStyles(pickerItemProps.style);
-
-  const options = useDeepCompareMemo(
-    () =>
-      normalizeToPickerOptions(optionsProp).map((option) => ({
-        label: option.label.toString(),
-        value: option.value,
-      })),
-    [optionsProp]
-  );
-
-  React.useEffect(() => {
-    onValueChange?.(
-      (isMultiSelect ? internalValue ?? [] : internalValue ?? "") as any // cannot determine if multiselect or not on compile time
-    );
-    // onValueChange excluded to prevent running on every re-render when using an anoymous function, which is the common case
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [internalValue]);
-
-  React.useEffect(() => {
-    if (pickerVisible && autoDismissKeyboard) {
-      Keyboard.dismiss();
-    }
-  }, [pickerVisible, autoDismissKeyboard]);
-
-  React.useEffect(() => {
-    if (disabled) {
-      setPickerVisible(false);
-    }
-  }, [disabled]);
-
-  return (
-    <PickerInputContainer
-      testID="dropdown-picker"
-      Icon={Icon}
-      placeholder={placeholder}
-      selectedValue={value}
-      options={options}
-      onPress={() => setPickerVisible(!pickerVisible)}
-      zIndex={pickerVisible ? 100 : undefined} // Guarantees drop down is rendered above all sibling components
-      disabled={disabled}
-      {...rest}
-    >
-      <DropDownPickerComponent
-        open={pickerVisible}
-        setOpen={setPickerVisible}
-        value={(value || null) as any}
-        setValue={setInternalValue}
-        items={options}
-        placeholder={placeholder}
-        listMode="SCROLLVIEW"
-        multiple={isMultiSelect}
-        style={{ display: "none" }} // To not render the default input container
-        listItemLabelStyle={[
-          { color: dropDownTextColor, fontSize: 14 },
-          pickerItemTextStyles,
-        ]}
-        selectedItemLabelStyle={[
-          pickerItemProps.selectedTextColor
-            ? {
-                color: pickerItemProps.selectedTextColor,
-              }
-            : {},
-          pickerItemProps.selectedTextSize
-            ? {
-                fontSize: pickerItemProps.selectedTextSize,
-              }
-            : {},
-        ]}
-        listItemContainerStyle={pickerItemViewStyles}
-        selectedItemContainerStyle={
-          pickerItemProps.selectedBackgroundColor
-            ? {
-                backgroundColor: pickerItemProps.selectedBackgroundColor,
-              }
-            : {}
-        }
-        dropDownContainerStyle={{
-          borderColor: dropDownBorderColor,
-          borderWidth: dropDownBorderWidth,
-          borderRadius: dropDownBorderRadius,
-          backgroundColor: dropDownBackgroundColor,
-        }}
-        TickIconComponent={() => (
-          <Icon
-            name={selectedIconName}
-            size={selectedIconSize}
-            color={selectedIconColor}
-          />
-        )}
-      />
-    </PickerInputContainer>
-  );
-};
-
-export default withTheme(DropDownPicker);
+import * as React from "react";
+import { Keyboard } from "react-native";
+import {
+  extractStyles,
+  flattenReactFragments,
+  useDeepCompareMemo,
+} from "../../../utilities";
+import {
+  CommonDropDownPickerProps,
+  MultiSelectPickerProps,
+  SinglePickerProps,
+  normalizeToPickerOptions,
+} from "../PickerCommon";
+import PickerInputContainer from "../PickerInputContainer";
+import DropDownPickerComponent from "react-native-dropdown-picker";
+import { withTheme } from "../../../theming";
+import PickerItem, { PickerItemProps } from "./PickerItem";
+
+const DropDownPicker: React.FC<
+  React.PropsWithChildren<
+    CommonDropDownPickerProps & (SinglePickerProps | MultiSelectPickerProps)
+  >
+> = ({
+  theme,
+  options: optionsProp = [],
+  onValueChange,
+  Icon,
+  placeholder,
+  value,
+  autoDismissKeyboard = true,
+  selectedIconName = "Feather/check",
+  selectedIconColor = theme.colors.strong,
+  selectedIconSize = 20,
+  dropDownBackgroundColor = theme.colors.background,
+  dropDownBorderColor = theme.colors.divider,
+  dropDownTextColor = theme.colors.strong,
+  dropDownBorderWidth = 1,
+  dropDownBorderRadius = 8,
+  children: childrenProp,
+  disabled,
+  ...rest
+}) => {
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState<
+    string | number | (string | number)[]
+  >();
+
+  const isMultiSelect = Array.isArray(value);
+
+  const pickerItemProps: PickerItemProps = React.useMemo(() => {
+    const children = flattenReactFragments(
+      React.Children.toArray(childrenProp) as React.ReactElement[]
+    );
+
+    // Only the props of the first PickerItem are used, any others are ignored
+    const firstPickerItem = children.find((child) => child.type === PickerItem);
+
+    return firstPickerItem?.props || {};
+  }, [childrenProp]);
+
+  const { viewStyles: pickerItemViewStyles, textStyles: pickerItemTextStyles } =
+    extractStyles(pickerItemProps.style);
+
+  const options = useDeepCompareMemo(
+    () =>
+      normalizeToPickerOptions(optionsProp).map((option) => ({
+        label: option.label.toString(),
+        value: option.value,
+      })),
+    [optionsProp]
+  );
+
+  React.useEffect(() => {
+    onValueChange?.(
+      (isMultiSelect ? internalValue ?? [] : internalValue ?? "") as any // cannot determine if multiselect or not on compile time
+    );
+    // onValueChange excluded to prevent running on every re-render when using an anoymous function, which is the common case
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [internalValue]);
+
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
+
+  React.useEffect(() => {
+    if (disabled) {
+      setPickerVisible(false);
+    }
+  }, [disabled]);
+
+  return (
+    <PickerInputContainer
+      testID="dropdown-picker"
+      Icon={Icon}
+      placeholder={placeholder}
+      selectedValue={value}
+      options={options}
+      onPress={() => setPickerVisible(!pickerVisible)}
+      zIndex={pickerVisible ? 100 : undefined} // Guarantees drop down is rendered above all sibling components
+      disabled={disabled}
+      {...rest}
+    >
+      <DropDownPickerComponent
+        open={pickerVisible}
+        setOpen={setPickerVisible}
+        value={(value || null) as any}
+        setValue={setInternalValue}
+        items={options}
+        placeholder={placeholder}
+        listMode="SCROLLVIEW"
+        multiple={isMultiSelect}
+        style={{ display: "none" }} // To not render the default input container
+        listItemLabelStyle={[
+          { color: dropDownTextColor, fontSize: 14 },
+          pickerItemTextStyles,
+        ]}
+        selectedItemLabelStyle={[
+          pickerItemProps.selectedTextColor
+            ? {
+                color: pickerItemProps.selectedTextColor,
+              }
+            : {},
+          pickerItemProps.selectedTextSize
+            ? {
+                fontSize: pickerItemProps.selectedTextSize,
+              }
+            : {},
+        ]}
+        listItemContainerStyle={pickerItemViewStyles}
+        selectedItemContainerStyle={
+          pickerItemProps.selectedBackgroundColor
+            ? {
+                backgroundColor: pickerItemProps.selectedBackgroundColor,
+              }
+            : {}
+        }
+        dropDownContainerStyle={{
+          borderColor: dropDownBorderColor,
+          borderWidth: dropDownBorderWidth,
+          borderRadius: dropDownBorderRadius,
+          backgroundColor: dropDownBackgroundColor,
+        }}
+        TickIconComponent={() => (
+          <Icon
+            name={selectedIconName}
+            size={selectedIconSize}
+            color={selectedIconColor}
+          />
+        )}
+      />
+    </PickerInputContainer>
+  );
+};
+
+export default withTheme(DropDownPicker);

package/src/components/Picker/dropdown/MultiSelectPicker.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import DropDownPicker from "./DropDownPicker";
+import { withTheme } from "../../../theming";
+const MultiSelectPicker = ({ value, ...rest }) => {
+    //@ts-ignore Ignore theme type issues
+    return React.createElement(DropDownPicker, { value: value || [], ...rest });
+};
+export default withTheme(MultiSelectPicker);
+//# sourceMappingURL=MultiSelectPicker.js.map

package/src/components/Picker/dropdown/MultiSelectPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectPicker.js","sourceRoot":"","sources":["MultiSelectPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,iBAAiB,GAEnB,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACzB,qCAAqC;IACrC,OAAO,oBAAC,cAAc,IAAC,KAAK,EAAE,KAAK,IAAI,EAAE,KAAM,IAAI,GAAI,CAAC;AAC1D,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC,iBAAiB,CAAC,CAAC"}

package/src/components/Picker/dropdown/MultiSelectPicker.tsx

@@ -1,16 +1,16 @@
-import * as React from "react";
-import {
-  CommonDropDownPickerProps,
-  MultiSelectPickerProps,
-} from "../PickerCommon";
-import DropDownPicker from "./DropDownPicker";
-import { withTheme } from "../../../theming";
-
-const MultiSelectPicker: React.FC<
-  React.PropsWithChildren<CommonDropDownPickerProps & MultiSelectPickerProps>
-> = ({ value, ...rest }) => {
-  //@ts-ignore Ignore theme type issues
-  return <DropDownPicker value={value || []} {...rest} />;
-};
-
-export default withTheme(MultiSelectPicker);
+import * as React from "react";
+import {
+  CommonDropDownPickerProps,
+  MultiSelectPickerProps,
+} from "../PickerCommon";
+import DropDownPicker from "./DropDownPicker";
+import { withTheme } from "../../../theming";
+
+const MultiSelectPicker: React.FC<
+  React.PropsWithChildren<CommonDropDownPickerProps & MultiSelectPickerProps>
+> = ({ value, ...rest }) => {
+  //@ts-ignore Ignore theme type issues
+  return <DropDownPicker value={value || []} {...rest} />;
+};
+
+export default withTheme(MultiSelectPicker);

package/src/components/Picker/dropdown/PickerItem.js

@@ -0,0 +1,9 @@
+/**
+ * Renders nothing, only serves as a container for the props
+ * Prop values are used by the DropDownPicker
+ */
+export const PickerItem = () => {
+    return null;
+};
+export default PickerItem;
+//# sourceMappingURL=PickerItem.js.map

package/src/components/Picker/dropdown/PickerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerItem.js","sourceRoot":"","sources":["PickerItem.tsx"],"names":[],"mappings":"AAUA;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAA8B,GAAG,EAAE;IACxD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/src/components/Picker/dropdown/PickerItem.tsx

@@ -1,19 +1,19 @@
-import React from "react";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
-
-export interface PickerItemProps {
-  selectedTextSize?: number;
-  selectedTextColor?: string;
-  selectedBackgroundColor?: string;
-  style?: StyleProp<ViewStyle | TextStyle>;
-}
-
-/**
- * Renders nothing, only serves as a container for the props
- * Prop values are used by the DropDownPicker
- */
-export const PickerItem: React.FC<PickerItemProps> = () => {
-  return null;
-};
-
-export default PickerItem;
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+
+export interface PickerItemProps {
+  selectedTextSize?: number;
+  selectedTextColor?: string;
+  selectedBackgroundColor?: string;
+  style?: StyleProp<ViewStyle | TextStyle>;
+}
+
+/**
+ * Renders nothing, only serves as a container for the props
+ * Prop values are used by the DropDownPicker
+ */
+export const PickerItem: React.FC<PickerItemProps> = () => {
+  return null;
+};
+
+export default PickerItem;

package/src/components/Picker/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import NativePicker from "./NativePicker";
+import DropDownPicker from "./dropdown/DropDownPicker";
+import { withTheme } from "../../theming";
+const SinglePicker = ({ mode = "native", ...rest }) => {
+    switch (mode) {
+        case "native":
+            //@ts-ignore Ignore theme type issues
+            return React.createElement(NativePicker, { ...rest });
+        case "dropdown":
+            //@ts-ignore
+            return React.createElement(DropDownPicker, { ...rest });
+    }
+};
+export const Picker = withTheme(SinglePicker);
+export { default as MultiSelectPicker } from "./dropdown/MultiSelectPicker";
+export { default as PickerItem } from "./dropdown/PickerItem";
+//# sourceMappingURL=index.js.map

package/src/components/Picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM1C,MAAM,YAAY,GAAmD,CAAC,EACpE,IAAI,GAAG,QAAQ,EACf,GAAG,IAAI,EACR,EAAE,EAAE;IACH,QAAQ,IAAI,EAAE;QACZ,KAAK,QAAQ;YACX,qCAAqC;YACrC,OAAO,oBAAC,YAAY,OAAK,IAAI,GAAI,CAAC;QACpC,KAAK,UAAU;YACb,YAAY;YACZ,OAAO,oBAAC,cAAc,OAAK,IAAI,GAAI,CAAC;KACvC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,YAAY,CAAC,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC"}

package/src/components/Picker/index.tsx

@@ -1,27 +1,27 @@
-import React from "react";
-import { CommonDropDownPickerProps, SinglePickerProps } from "./PickerCommon";
-import NativePicker from "./NativePicker";
-import DropDownPicker from "./dropdown/DropDownPicker";
-import { withTheme } from "../../theming";
-
-interface PickerProps extends CommonDropDownPickerProps, SinglePickerProps {
-  mode?: "native" | "dropdown";
-}
-
-const SinglePicker: React.FC<React.PropsWithChildren<PickerProps>> = ({
-  mode = "native",
-  ...rest
-}) => {
-  switch (mode) {
-    case "native":
-      //@ts-ignore Ignore theme type issues
-      return <NativePicker {...rest} />;
-    case "dropdown":
-      //@ts-ignore
-      return <DropDownPicker {...rest} />;
-  }
-};
-
-export const Picker = withTheme(SinglePicker);
-export { default as MultiSelectPicker } from "./dropdown/MultiSelectPicker";
-export { default as PickerItem } from "./dropdown/PickerItem";
+import React from "react";
+import { CommonDropDownPickerProps, SinglePickerProps } from "./PickerCommon";
+import NativePicker from "./NativePicker";
+import DropDownPicker from "./dropdown/DropDownPicker";
+import { withTheme } from "../../theming";
+
+interface PickerProps extends CommonDropDownPickerProps, SinglePickerProps {
+  mode?: "native" | "dropdown";
+}
+
+const SinglePicker: React.FC<React.PropsWithChildren<PickerProps>> = ({
+  mode = "native",
+  ...rest
+}) => {
+  switch (mode) {
+    case "native":
+      //@ts-ignore Ignore theme type issues
+      return <NativePicker {...rest} />;
+    case "dropdown":
+      //@ts-ignore
+      return <DropDownPicker {...rest} />;
+  }
+};
+
+export const Picker = withTheme(SinglePicker);
+export { default as MultiSelectPicker } from "./dropdown/MultiSelectPicker";
+export { default as PickerItem } from "./dropdown/PickerItem";

package/src/components/PinInput/CustomPinInputCell.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { View } from "react-native";
+/**
+ * Simple View wrapper component to create a custom pin input cell
+ * Meant to be used in PinInput's renderItem
+ */
+const CustomPinInputCell = (props) => {
+    return React.createElement(View, { ...props });
+};
+export default CustomPinInputCell;
+//# sourceMappingURL=CustomPinInputCell.js.map

package/src/components/PinInput/CustomPinInputCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomPinInputCell.js","sourceRoot":"","sources":["CustomPinInputCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwB,IAAI,EAAqB,MAAM,cAAc,CAAC;AAO7E;;;GAGG;AACH,MAAM,kBAAkB,GAEpB,CAAC,KAAK,EAAE,EAAE;IACZ,OAAO,oBAAC,IAAI,OAAK,KAAK,GAAI,CAAC;AAC7B,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/src/components/PinInput/CustomPinInputCell.tsx

@@ -1,19 +1,19 @@
-import React from "react";
-import { StyleProp, ViewStyle, View, LayoutChangeEvent } from "react-native";
-
-interface CustomPinInputCellProps {
-  style?: StyleProp<ViewStyle>;
-  onLayout: (event: LayoutChangeEvent) => void;
-}
-
-/**
- * Simple View wrapper component to create a custom pin input cell
- * Meant to be used in PinInput's renderItem
- */
-const CustomPinInputCell: React.FC<
-  React.PropsWithChildren<CustomPinInputCellProps>
-> = (props) => {
-  return <View {...props} />;
-};
-
-export default CustomPinInputCell;
+import React from "react";
+import { StyleProp, ViewStyle, View, LayoutChangeEvent } from "react-native";
+
+interface CustomPinInputCellProps {
+  style?: StyleProp<ViewStyle>;
+  onLayout: (event: LayoutChangeEvent) => void;
+}
+
+/**
+ * Simple View wrapper component to create a custom pin input cell
+ * Meant to be used in PinInput's renderItem
+ */
+const CustomPinInputCell: React.FC<
+  React.PropsWithChildren<CustomPinInputCellProps>
+> = (props) => {
+  return <View {...props} />;
+};
+
+export default CustomPinInputCell;

package/src/components/PinInput/PinInput.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { View, StyleSheet, } from "react-native";
+import TextInput from "../TextInput";
+import { CodeField, useClearByFocusCell, } from "react-native-confirmation-code-field";
+import { withTheme } from "../../theming";
+import PinInputText from "./PinInputText";
+import { extractStyles } from "../../utilities";
+const PinInput = React.forwardRef(({ theme, onInputFull, cellCount = 4, clearOnCellFocus = true, blurOnFull = true, renderItem, value, onChangeText, focusedBorderColor = theme.colors.primary, focusedBackgroundColor, focusedBorderWidth, focusedTextColor, style, ...rest }, ref) => {
+    const newPinInputRef = React.useRef(null);
+    // Use the provided ref or default to new ref when not provided
+    const pinInputRef = ref
+        ? ref
+        : newPinInputRef;
+    const { viewStyles, textStyles } = extractStyles(style);
+    // Clears input of a cell when focused, configured as explained here (https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md#useclearbyfocuscellvalue-string-setvalue-text-string--void)
+    const [codeFieldProps, getCellOnLayout] = useClearByFocusCell({
+        value,
+        setValue: (text) => onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text),
+    });
+    React.useEffect(() => {
+        var _a;
+        if ((value === null || value === void 0 ? void 0 : value.length) === cellCount) {
+            if (blurOnFull) {
+                (_a = pinInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+            onInputFull === null || onInputFull === void 0 ? void 0 : onInputFull(value);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, cellCount, blurOnFull, pinInputRef]);
+    const renderCell = (cellValue, index, isFocused) => {
+        const cell = (renderItem === null || renderItem === void 0 ? void 0 : renderItem({ cellValue, index, isFocused })) || (React.createElement(View, { testID: "default-code-input-cell", style: [
+                styles.cell,
+                { borderColor: theme.colors.disabled },
+                viewStyles,
+                isFocused && focusedBorderWidth
+                    ? { borderWidth: focusedBorderWidth }
+                    : undefined,
+                isFocused && focusedBorderColor
+                    ? { borderColor: focusedBorderColor }
+                    : undefined,
+                isFocused && focusedBackgroundColor
+                    ? { backgroundColor: focusedBackgroundColor }
+                    : undefined,
+            ] },
+            React.createElement(PinInputText, { style: [
+                    styles.cellText,
+                    { color: theme.colors.strong },
+                    textStyles,
+                    isFocused && focusedTextColor
+                        ? { color: focusedTextColor }
+                        : undefined,
+                ], isFocused: isFocused }, cellValue)));
+        return React.cloneElement(cell, {
+            onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined,
+        });
+    };
+    return (React.createElement(CodeField, { ref: pinInputRef, ...(clearOnCellFocus ? codeFieldProps : {}), value: value, onChangeText: onChangeText, rootStyle: styles.rootContainer, textInputStyle: { height: "100%" }, InputComponent: TextInput, cellCount: cellCount, renderCell: ({ symbol: cellValue, index, isFocused }) => (React.createElement(React.Fragment, { key: index }, renderCell(cellValue, index, isFocused))), ...rest }));
+});
+const styles = StyleSheet.create({
+    rootContainer: {
+        justifyContent: "center",
+    },
+    cell: {
+        marginLeft: 5,
+        marginRight: 5,
+        padding: 5,
+        borderRadius: 5,
+        justifyContent: "center",
+        alignItems: "center",
+        aspectRatio: 1,
+        maxWidth: 70,
+        maxHeight: 70,
+        borderWidth: 1,
+        flex: 1,
+    },
+    cellText: {
+        fontSize: 25,
+    },
+});
+export default withTheme(PinInput);
+//# sourceMappingURL=PinInput.js.map

package/src/components/PinInput/PinInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinInput.js","sourceRoot":"","sources":["PinInput.tsx"],"names":[],"mappings":"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"}