@draftbit/core 48.4.6-959edf.2 → 48.4.6-f29495.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "48.4.6-959edf.2+959edf9",
+  "version": "48.4.6-f29495.2+f294955",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^48.4.6-959edf.2+959edf9",
+    "@draftbit/types": "^48.4.6-f29495.2+f294955",
     "@expo/vector-icons": "^13.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
@@ -100,5 +100,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "959edf9653df6734eb9616ce7d064861e5484057"
+  "gitHead": "f294955bf838045f67595649535c9ed22a890118"
 }

package/src/components/BottomSheet/BottomSheet.js

@@ -2,7 +2,7 @@ import React from "react";
 import { StyleSheet, View, } from "react-native";
 import BottomSheetComponent from "./BottomSheetComponent";
 import { withTheme } from "../../theming";
-const BottomSheet = React.forwardRef(({ theme, snapPoints: snapPointsProp, topSnapPosition = "10%", middleSnapPosition = "50%", bottomSnapPosition = "80%", initialSnapIndex, initialSnapPosition = "bottom", showHandle = true, handleColor = theme.colors.divider, topBorderRadius = 20, borderWidth = 1, borderColor = theme.colors.divider, onSettle, style, children, ...rest }, ref) => {
+const BottomSheet = ({ theme, snapPoints: snapPointsProp, topSnapPosition = "10%", middleSnapPosition = "50%", bottomSnapPosition = "80%", initialSnapIndex, initialSnapPosition = "bottom", showHandle = true, handleColor = theme.colors.divider, topBorderRadius = 20, borderWidth = 1, borderColor = theme.colors.divider, onSettle, style, children, ...rest }) => {
     const backgroundColor = (style === null || style === void 0 ? void 0 : style.backgroundColor) || theme.colors.background;
     const snapPoints = snapPointsProp || [
         topSnapPosition,
@@ -20,7 +20,7 @@ const BottomSheet = React.forwardRef(({ theme, snapPoints: snapPointsProp, topSn
         }
     };
     return (React.createElement(View, { style: styles.parentContainer, pointerEvents: "box-none" },
-        React.createElement(BottomSheetComponent, { ref: ref, componentType: "ScrollView", snapPoints: snapPoints, initialSnapIndex: initialSnapIndex !== null && initialSnapIndex !== void 0 ? initialSnapIndex : getSnapIndexFromPosition(initialSnapPosition), renderHandle: () => (React.createElement(React.Fragment, null, showHandle && (React.createElement(View, { style: [
+        React.createElement(BottomSheetComponent, { componentType: "ScrollView", snapPoints: snapPoints, initialSnapIndex: initialSnapIndex !== null && initialSnapIndex !== void 0 ? initialSnapIndex : getSnapIndexFromPosition(initialSnapPosition), renderHandle: () => (React.createElement(React.Fragment, null, showHandle && (React.createElement(View, { style: [
                     styles.handleContainer,
                     {
                         backgroundColor,
@@ -38,7 +38,7 @@ const BottomSheet = React.forwardRef(({ theme, snapPoints: snapPointsProp, topSn
                     borderColor,
                 },
             ]), onSettle: onSettle, ...rest }, children)));
-});
+};
 const styles = StyleSheet.create({
     //Render on top of everything
     parentContainer: {

package/src/components/BottomSheet/BottomSheet.js.map

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

package/src/components/BottomSheet/BottomSheet.tsx

@@ -32,100 +32,91 @@ export interface BottomSheetProps extends ScrollViewProps {
   theme: Theme;
 }
 
-const BottomSheet = React.forwardRef<
-  BottomSheetComponent<any>,
-  BottomSheetProps
->(
-  (
-    {
-      theme,
-      snapPoints: snapPointsProp,
-      topSnapPosition = "10%",
-      middleSnapPosition = "50%",
-      bottomSnapPosition = "80%",
-      initialSnapIndex,
-      initialSnapPosition = "bottom",
-      showHandle = true,
-      handleColor = theme.colors.divider,
-      topBorderRadius = 20,
-      borderWidth = 1,
-      borderColor = theme.colors.divider,
-      onSettle,
-      style,
-      children,
-      ...rest
-    },
-    ref
-  ) => {
-    const backgroundColor =
-      (style as ViewStyle)?.backgroundColor || theme.colors.background;
+const BottomSheet: React.FC<React.PropsWithChildren<BottomSheetProps>> = ({
+  theme,
+  snapPoints: snapPointsProp,
+  topSnapPosition = "10%",
+  middleSnapPosition = "50%",
+  bottomSnapPosition = "80%",
+  initialSnapIndex,
+  initialSnapPosition = "bottom",
+  showHandle = true,
+  handleColor = theme.colors.divider,
+  topBorderRadius = 20,
+  borderWidth = 1,
+  borderColor = theme.colors.divider,
+  onSettle,
+  style,
+  children,
+  ...rest
+}) => {
+  const backgroundColor =
+    (style as ViewStyle)?.backgroundColor || theme.colors.background;
 
-    const snapPoints = snapPointsProp || [
-      topSnapPosition,
-      middleSnapPosition,
-      bottomSnapPosition,
-    ];
+  const snapPoints = snapPointsProp || [
+    topSnapPosition,
+    middleSnapPosition,
+    bottomSnapPosition,
+  ];
 
-    const getSnapIndexFromPosition = (position: SnapPosition) => {
-      switch (position) {
-        case "top":
-          return 0;
-        case "middle":
-          return 1;
-        case "bottom":
-          return 2;
-      }
-    };
+  const getSnapIndexFromPosition = (position: SnapPosition) => {
+    switch (position) {
+      case "top":
+        return 0;
+      case "middle":
+        return 1;
+      case "bottom":
+        return 2;
+    }
+  };
 
-    return (
-      <View style={styles.parentContainer} pointerEvents="box-none">
-        <BottomSheetComponent
-          ref={ref}
-          componentType="ScrollView"
-          snapPoints={snapPoints}
-          initialSnapIndex={
-            initialSnapIndex ?? getSnapIndexFromPosition(initialSnapPosition)
-          }
-          renderHandle={() => (
-            <>
-              {showHandle && (
+  return (
+    <View style={styles.parentContainer} pointerEvents="box-none">
+      <BottomSheetComponent
+        componentType="ScrollView"
+        snapPoints={snapPoints}
+        initialSnapIndex={
+          initialSnapIndex ?? getSnapIndexFromPosition(initialSnapPosition)
+        }
+        renderHandle={() => (
+          <>
+            {showHandle && (
+              <View
+                style={[
+                  styles.handleContainer,
+                  {
+                    backgroundColor,
+                    borderTopLeftRadius: topBorderRadius,
+                    borderTopRightRadius: topBorderRadius,
+                  },
+                ]}
+              >
                 <View
-                  style={[
-                    styles.handleContainer,
-                    {
-                      backgroundColor,
-                      borderTopLeftRadius: topBorderRadius,
-                      borderTopRightRadius: topBorderRadius,
-                    },
-                  ]}
-                >
-                  <View
-                    style={[styles.handle, { backgroundColor: handleColor }]}
-                  />
-                </View>
-              )}
-            </>
-          )}
-          contentContainerStyle={[styles.contentContainerStyle, style]}
-          containerStyle={StyleSheet.flatten([
-            styles.containerStyle,
-            {
-              backgroundColor,
-              borderTopLeftRadius: topBorderRadius,
-              borderTopRightRadius: topBorderRadius,
-              borderWidth,
-              borderColor,
-            },
-          ])}
-          onSettle={onSettle}
-          {...rest}
-        >
-          {children}
-        </BottomSheetComponent>
-      </View>
-    );
-  }
-);
+                  style={[styles.handle, { backgroundColor: handleColor }]}
+                />
+              </View>
+            )}
+          </>
+        )}
+        contentContainerStyle={[styles.contentContainerStyle, style]}
+        containerStyle={StyleSheet.flatten([
+          styles.containerStyle,
+          {
+            backgroundColor,
+            borderTopLeftRadius: topBorderRadius,
+            borderTopRightRadius: topBorderRadius,
+            borderWidth,
+            borderColor,
+          },
+        ])}
+        onSettle={onSettle}
+        {...rest}
+      >
+        {children}
+      </BottomSheetComponent>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   //Render on top of everything

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 = ({ style, children }) => {
+    return React.createElement(View, { style: style, children: children });
+};
+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,EAAE,MAAM,cAAc,CAAC;AAM1D;;;GAGG;AACH,MAAM,kBAAkB,GAEpB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1B,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACpD,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/src/components/PinInput/CustomPinInputCell.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleProp, ViewStyle, View } from "react-native";
+
+interface CustomPinInputCellProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * 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>
+> = ({ style, children }) => {
+  return <View style={style} children={children} />;
+};
+
+export default CustomPinInputCell;

package/src/components/PinInput/PinInput.js

@@ -0,0 +1,70 @@
+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, unFocusedBorderColor = theme.colors.disabled, focusedBackgroundColor, unFocusedBackgroundColor, focusedBorderWidth = 2, unFocusedBorderWidth = 1, focusedTextColor = theme.colors.strong, unFocusedTextColor = 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]);
+    return (React.createElement(CodeField, { ref: pinInputRef, ...(clearOnCellFocus ? codeFieldProps : {}), value: value, onChangeText: onChangeText, textInputStyle: { height: "100%" }, InputComponent: TextInput, cellCount: cellCount, renderCell: ({ symbol: cellValue, index, isFocused }) => (React.createElement(View, { key: index, onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined, style: { flex: 1 } }, (renderItem === null || renderItem === void 0 ? void 0 : renderItem({ cellValue, index, isFocused })) || (React.createElement(View, { testID: "default-code-input-cell", style: [
+                styles.cell,
+                {
+                    borderWidth: isFocused
+                        ? focusedBorderWidth
+                        : unFocusedBorderWidth,
+                    borderColor: isFocused
+                        ? focusedBorderColor
+                        : unFocusedBorderColor,
+                    backgroundColor: isFocused
+                        ? focusedBackgroundColor
+                        : unFocusedBackgroundColor,
+                },
+                viewStyles,
+            ] },
+            React.createElement(PinInputText, { style: [
+                    styles.cellText,
+                    {
+                        color: isFocused ? focusedTextColor : unFocusedTextColor,
+                    },
+                    textStyles,
+                ], isFocused: isFocused }, cellValue))))), ...rest }));
+});
+const styles = StyleSheet.create({
+    cell: {
+        marginStart: 5,
+        marginEnd: 5,
+        padding: 5,
+        borderRadius: 5,
+        justifyContent: "center",
+        alignItems: "center",
+        aspectRatio: 1,
+        maxWidth: 70,
+        maxHeight: 70,
+    },
+    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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"}

package/src/components/PinInput/PinInput.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import {
+  StyleProp,
+  ViewStyle,
+  TextInput as NativeTextInput,
+  View,
+  StyleSheet,
+} from "react-native";
+import TextInput, { TextInputProps } from "../TextInput";
+import {
+  CodeField,
+  useClearByFocusCell,
+} from "react-native-confirmation-code-field";
+import type { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+import PinInputText from "./PinInputText";
+import { extractStyles } from "../../utilities";
+
+interface CellItem {
+  cellValue: string;
+  index: number;
+  isFocused: boolean;
+}
+
+interface PinInputProps extends TextInputProps {
+  onInputFull?: (value: string) => void;
+  cellCount?: number;
+  clearOnCellFocus?: boolean;
+  blurOnFull?: boolean;
+  renderItem?: ({ cellValue, index, isFocused }: CellItem) => JSX.Element;
+  focusedBorderColor?: string;
+  unFocusedBorderColor?: string;
+  focusedBackgroundColor?: string;
+  unFocusedBackgroundColor?: string;
+  focusedBorderWidth?: number;
+  unFocusedBorderWidth?: number;
+  focusedTextColor?: string;
+  unFocusedTextColor?: string;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+}
+
+const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
+  (
+    {
+      theme,
+      onInputFull,
+      cellCount = 4,
+      clearOnCellFocus = true,
+      blurOnFull = true,
+      renderItem,
+      value,
+      onChangeText,
+      focusedBorderColor = theme.colors.primary,
+      unFocusedBorderColor = theme.colors.disabled,
+      focusedBackgroundColor,
+      unFocusedBackgroundColor,
+      focusedBorderWidth = 2,
+      unFocusedBorderWidth = 1,
+      focusedTextColor = theme.colors.strong,
+      unFocusedTextColor = focusedTextColor,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const newPinInputRef = React.useRef<NativeTextInput>(null);
+
+    // Use the provided ref or default to new ref when not provided
+    const pinInputRef = ref
+      ? (ref as React.RefObject<NativeTextInput>)
+      : 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?.(text),
+    });
+
+    React.useEffect(() => {
+      if (value?.length === cellCount) {
+        if (blurOnFull) {
+          pinInputRef.current?.blur();
+        }
+        onInputFull?.(value);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, cellCount, blurOnFull, pinInputRef]);
+
+    return (
+      <CodeField
+        ref={pinInputRef}
+        {...(clearOnCellFocus ? codeFieldProps : {})}
+        value={value}
+        onChangeText={onChangeText}
+        textInputStyle={{ height: "100%" }} // addresses issue on firefox where the hidden input did not fill the height
+        InputComponent={TextInput}
+        cellCount={cellCount}
+        renderCell={({ symbol: cellValue, index, isFocused }) => (
+          <View
+            key={index}
+            onLayout={clearOnCellFocus ? getCellOnLayout(index) : undefined}
+            style={{ flex: 1 }}
+          >
+            {renderItem?.({ cellValue, index, isFocused }) || (
+              <View
+                testID="default-code-input-cell"
+                style={[
+                  styles.cell,
+                  {
+                    borderWidth: isFocused
+                      ? focusedBorderWidth
+                      : unFocusedBorderWidth,
+                    borderColor: isFocused
+                      ? focusedBorderColor
+                      : unFocusedBorderColor,
+                    backgroundColor: isFocused
+                      ? focusedBackgroundColor
+                      : unFocusedBackgroundColor,
+                  },
+                  viewStyles,
+                ]}
+              >
+                <PinInputText
+                  style={[
+                    styles.cellText,
+                    {
+                      color: isFocused ? focusedTextColor : unFocusedTextColor,
+                    },
+                    textStyles,
+                  ]}
+                  isFocused={isFocused}
+                >
+                  {cellValue}
+                </PinInputText>
+              </View>
+            )}
+          </View>
+        )}
+        {...rest}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  cell: {
+    marginStart: 5,
+    marginEnd: 5,
+    padding: 5,
+    borderRadius: 5,
+    justifyContent: "center",
+    alignItems: "center",
+    aspectRatio: 1,
+    maxWidth: 70,
+    maxHeight: 70,
+  },
+  cellText: {
+    fontSize: 25,
+  },
+});
+
+export default withTheme(PinInput);

package/src/components/{CodeInput/CodeInputText.js → PinInput/PinInputText.js}

@@ -4,11 +4,11 @@ import { withTheme } from "../../theming";
 import { Cursor } from "react-native-confirmation-code-field";
 /**
  * Text component that can conditionally render a blinking cursor when focused and empty
- * Meant to be used within a CodeInputCell component
+ * Meant to be used within a CustomPinInputCell component
  */
-const CodeInputText = ({ isFocused, cursorBlinkDuration, cursorText, style, theme, children, ...rest }) => {
+const CustomPinInputText = ({ isFocused, cursorBlinkDuration, cursorText, style, theme, children, ...rest }) => {
     return (React.createElement(Text, { style: [{ color: theme.colors.strong }, style], ...rest }, children ||
         (isFocused ? (React.createElement(Cursor, { cursorSymbol: cursorText, delay: cursorBlinkDuration })) : null)));
 };
-export default withTheme(CodeInputText);
-//# sourceMappingURL=CodeInputText.js.map
+export default withTheme(CustomPinInputText);
+//# sourceMappingURL=PinInputText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinInputText.js","sourceRoot":"","sources":["PinInputText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAS9D;;;GAGG;AACH,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,SAAS,EACT,mBAAmB,EACnB,UAAU,EACV,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,KAAM,IAAI,IAC3D,QAAQ;QACP,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,MAAM,IAAC,YAAY,EAAE,UAAU,EAAE,KAAK,EAAE,mBAAmB,GAAI,CACjE,CAAC,CAAC,CAAC,IAAI,CAAC,CACN,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC,kBAAkB,CAAC,CAAC"}

package/src/components/{CodeInput/CodeInputText.tsx → PinInput/PinInputText.tsx}

@@ -4,7 +4,7 @@ import type { Theme } from "../../styles/DefaultTheme";
 import { withTheme } from "../../theming";
 import { Cursor } from "react-native-confirmation-code-field";
 
-interface CodeInputTextProps extends TextProps {
+interface CustomPinInputTextProps extends TextProps {
   cursorBlinkDuration?: number;
   cursorText?: string;
   isFocused?: boolean;
@@ -13,9 +13,9 @@ interface CodeInputTextProps extends TextProps {
 
 /**
  * Text component that can conditionally render a blinking cursor when focused and empty
- * Meant to be used within a CodeInputCell component
+ * Meant to be used within a CustomPinInputCell component
  */
-const CodeInputText: React.FC<CodeInputTextProps> = ({
+const CustomPinInputText: React.FC<CustomPinInputTextProps> = ({
   isFocused,
   cursorBlinkDuration,
   cursorText,
@@ -34,4 +34,4 @@ const CodeInputText: React.FC<CodeInputTextProps> = ({
   );
 };
 
-export default withTheme(CodeInputText);
+export default withTheme(CustomPinInputText);

package/src/components/PinInput/index.js

@@ -0,0 +1,4 @@
+export { default as PinInput } from "./PinInput";
+export { default as CustomPinInputCell } from "./CustomPinInputCell";
+export { default as PinInputText } from "./PinInputText";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/src/components/PinInput/index.tsx

@@ -0,0 +1,3 @@
+export { default as PinInput } from "./PinInput";
+export { default as CustomPinInputCell } from "./CustomPinInputCell";
+export { default as PinInputText } from "./PinInputText";

package/src/index.js

@@ -40,7 +40,7 @@ export { default as LinearProgress } from "./components/Progress/LinearProgress"
 export { default as CircularProgress } from "./components/Progress/CircularProgress";
 export { default as TextInput } from "./components/TextInput";
 export { default as VideoPlayer, } from "./components/MediaPlayer/VideoPlayer";
-export { CodeInput, CodeInputCell, CodeInputText, } from "./components/CodeInput";
+export { PinInput, CustomPinInputCell, PinInputText as CustomPinInputText, } from "./components/PinInput";
 export { AspectRatio, Circle, Center, HStack, VStack, ZStack, Spacer, Square, } from "./components/Layout";
 /* Deprecated: Fix or Delete!  */
 export { default as AccordionItem } from "./deprecated-components/AccordionItem";

package/src/index.js.map

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

package/src/index.tsx

@@ -59,10 +59,10 @@ export {
   VideoPlayerRef,
 } from "./components/MediaPlayer/VideoPlayer";
 export {
-  CodeInput,
-  CodeInputCell,
-  CodeInputText,
-} from "./components/CodeInput";
+  PinInput,
+  CustomPinInputCell,
+  PinInputText as CustomPinInputText,
+} from "./components/PinInput";
 export {
   AspectRatio,
   Circle,

package/src/utilities.js

@@ -16,6 +16,12 @@ export function extractStyles(style) {
         textDecorationColor,
         textDecorationStyle,
     };
+    for (let key in textStyles) {
+        const styleKey = key;
+        if (textStyles[styleKey] === undefined) {
+            delete textStyles[styleKey];
+        }
+    }
     return { viewStyles, textStyles };
 }
 export const borderStyleNames = [