@procivis/one-react-native-components 0.1.63 → 0.3.22

package/lib/commonjs/ui-components/input/selection-input.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNativePicker = _interopRequireDefault(require("@procivis/react-native-picker"));
+var _react = _interopRequireWildcard(require("react"));
+var _ref = require("../../utils/ref");
+var _accessibility = require("../accessibility/accessibility");
+var _accessibilityHistoryWrappers = require("../accessibility/accessibilityHistoryWrappers");
+var _accessibilityLanguage = require("../accessibility/accessibilityLanguage");
+var _theme = require("../theme");
+var _textInput = _interopRequireWildcard(require("./text-input"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Generic selection input component
+ * @see https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=4%3A127&t=B2Y3PtJHH22XDPkx-0
+ */
+const SelectionInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  selectedValue,
+  values,
+  label,
+  pickerTitle,
+  pickerConfirmLabel,
+  pickerCancelLabel,
+  onChange,
+  error,
+  ...props
+}, ref) => {
+  var _selectedChoice$short;
+  const t = (0, _accessibilityLanguage.useAccessibilityTranslation)();
+  const colorScheme = (0, _theme.useAppColorScheme)();
+  const selectedChoice = (0, _react.useMemo)(() => selectedValue !== undefined ? values.find(({
+    value
+  }) => value === selectedValue) : undefined, [selectedValue, values]);
+  const [forwardedRef, refObject] = (0, _ref.useForwardedRef)(ref);
+  const [pickerOpen, setPickerOpen] = (0, _react.useState)(false);
+  const onOpen = (0, _react.useCallback)(() => setPickerOpen(true), []);
+  const onConfirm = (0, _react.useCallback)(valueLabel => {
+    setPickerOpen(false);
+    const choice = values.find(({
+      label: choiceLabel
+    }) => choiceLabel === valueLabel);
+    if (!choice || !(onChange !== null && onChange !== void 0 && onChange(choice))) {
+      setTimeout(() => (0, _accessibility.focusAccessibility)(refObject.current), 200);
+    }
+  }, [onChange, refObject, values]);
+  const onCancel = (0, _react.useCallback)(() => {
+    setPickerOpen(false);
+    requestAnimationFrame(() => (0, _accessibility.focusAccessibility)(refObject.current));
+  }, [refObject]);
+  const accessibilityLabel = error ? `${label}, ${error}` : label;
+  return /*#__PURE__*/_react.default.createElement(_accessibilityHistoryWrappers.TouchableOpacity, _extends({
+    accessibilityHint: t('accessibility.control.combobox.tapToSelect'),
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "combobox",
+    accessibilityValue: {
+      text: selectedChoice === null || selectedChoice === void 0 ? void 0 : selectedChoice.label
+    },
+    onPress: onOpen,
+    ref: forwardedRef
+  }, props), /*#__PURE__*/_react.default.createElement(_textInput.default, {
+    accessory: _textInput.TextInputAccessory.Dropdown,
+    disabled: true,
+    error: error,
+    label: label,
+    pointerEvents: "none",
+    value: (_selectedChoice$short = selectedChoice === null || selectedChoice === void 0 ? void 0 : selectedChoice.shortLabel) !== null && _selectedChoice$short !== void 0 ? _selectedChoice$short : selectedChoice === null || selectedChoice === void 0 ? void 0 : selectedChoice.label
+  }), /*#__PURE__*/_react.default.createElement(_reactNativePicker.default, {
+    cancelText: pickerCancelLabel,
+    confirmText: pickerConfirmLabel,
+    items: values.map(({
+      label: itemLabel
+    }) => itemLabel),
+    modal: true,
+    mode: "list",
+    onCancel: onCancel,
+    onConfirm: onConfirm,
+    open: pickerOpen,
+    selectedValue: selectedChoice === null || selectedChoice === void 0 ? void 0 : selectedChoice.label,
+    textColor: colorScheme.text,
+    title: pickerTitle !== null && pickerTitle !== void 0 ? pickerTitle : label
+  }));
+});
+SelectionInput.displayName = 'SelectionInput';
+var _default = exports.default = SelectionInput;
+//# sourceMappingURL=selection-input.js.map

package/lib/commonjs/ui-components/input/selection-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativePicker","_interopRequireDefault","require","_react","_interopRequireWildcard","_ref","_accessibility","_accessibilityHistoryWrappers","_accessibilityLanguage","_theme","_textInput","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","SelectionInput","forwardRef","selectedValue","values","label","pickerTitle","pickerConfirmLabel","pickerCancelLabel","onChange","error","props","ref","_selectedChoice$short","useAccessibilityTranslation","colorScheme","useAppColorScheme","selectedChoice","useMemo","undefined","find","value","forwardedRef","refObject","useForwardedRef","pickerOpen","setPickerOpen","useState","onOpen","useCallback","onConfirm","valueLabel","choice","choiceLabel","setTimeout","focusAccessibility","current","onCancel","requestAnimationFrame","accessibilityLabel","createElement","TouchableOpacity","accessibilityHint","accessibilityRole","accessibilityValue","text","onPress","accessory","TextInputAccessory","Dropdown","disabled","pointerEvents","shortLabel","cancelText","confirmText","items","map","itemLabel","modal","mode","open","textColor","title","displayName","_default","exports"],"sources":["selection-input.tsx"],"sourcesContent":["import Picker from '@procivis/react-native-picker';\nimport React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport type { TouchableOpacityProps } from 'react-native';\n\nimport { useForwardedRef } from '../../utils/ref';\nimport { focusAccessibility } from '../accessibility/accessibility';\nimport { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';\nimport { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';\nimport { useAppColorScheme } from '../theme';\nimport TextInput, { TextInputAccessory } from './text-input';\n\nexport interface SelectionInputChoice {\n  label: string;\n  /**\n   * If specified used in the input display, otherwise {@link label} used.\n   * The {@link label} is always used for the picker values.\n   */\n  shortLabel?: string;\n  value: string | number;\n}\n\nexport interface SelectionInputProps extends TouchableOpacityProps {\n  error?: string;\n  label: string;\n  /**\n   * Called when selection changes\n   * @return `true` to avoid accessibility auto-focusing, `false` otherwise\n   */\n  onChange?: (value: SelectionInputChoice) => boolean;\n  pickerCancelLabel: string;\n\n  pickerConfirmLabel: string;\n  pickerTitle?: string;\n  /** {@link SelectionInputChoice.label} of the selected choice */\n  selectedValue?: string | number;\n\n  values: SelectionInputChoice[];\n}\n\n/**\n * Generic selection input component\n * @see https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=4%3A127&t=B2Y3PtJHH22XDPkx-0\n */\nconst SelectionInput = forwardRef<TouchableOpacityRef, SelectionInputProps>(\n  (\n    { selectedValue, values, label, pickerTitle, pickerConfirmLabel, pickerCancelLabel, onChange, error, ...props },\n    ref,\n  ) => {\n    const t = useAccessibilityTranslation();\n    const colorScheme = useAppColorScheme();\n    const selectedChoice = useMemo(\n      () => (selectedValue !== undefined ? values.find(({ value }) => value === selectedValue) : undefined),\n      [selectedValue, values],\n    );\n\n    const [forwardedRef, refObject] = useForwardedRef(ref);\n    const [pickerOpen, setPickerOpen] = useState(false);\n\n    const onOpen = useCallback(() => setPickerOpen(true), []);\n    const onConfirm = useCallback(\n      (valueLabel: any) => {\n        setPickerOpen(false);\n        const choice = values.find(({ label: choiceLabel }) => choiceLabel === valueLabel);\n        if (!choice || !onChange?.(choice)) {\n          setTimeout(() => focusAccessibility(refObject.current), 200);\n        }\n      },\n      [onChange, refObject, values],\n    );\n    const onCancel = useCallback(() => {\n      setPickerOpen(false);\n      requestAnimationFrame(() => focusAccessibility(refObject.current));\n    }, [refObject]);\n\n    const accessibilityLabel = error ? `${label}, ${error}` : label;\n    return (\n      <TouchableOpacity\n        accessibilityHint={t('accessibility.control.combobox.tapToSelect')}\n        accessibilityLabel={accessibilityLabel}\n        accessibilityRole=\"combobox\"\n        accessibilityValue={{ text: selectedChoice?.label }}\n        onPress={onOpen}\n        ref={forwardedRef}\n        {...props}>\n        <TextInput\n          accessory={TextInputAccessory.Dropdown}\n          disabled={true}\n          error={error}\n          label={label}\n          pointerEvents=\"none\"\n          value={selectedChoice?.shortLabel ?? selectedChoice?.label}\n        />\n        <Picker\n          cancelText={pickerCancelLabel}\n          confirmText={pickerConfirmLabel}\n          items={values.map(({ label: itemLabel }) => itemLabel)}\n          modal\n          mode=\"list\"\n          onCancel={onCancel}\n          onConfirm={onConfirm}\n          open={pickerOpen}\n          selectedValue={selectedChoice?.label}\n          textColor={colorScheme.text}\n          title={pickerTitle ?? label}\n        />\n      </TouchableOpacity>\n    );\n  },\n);\n\nSelectionInput.displayName = 'SelectionInput';\nexport default SelectionInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui-components/input/text-input.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextInputAccessory = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _testID = require("../../utils/testID");
+var _accessibilityHistoryWrappers = require("../accessibility/accessibilityHistoryWrappers");
+var _input = require("../icons/input");
+var _font = _interopRequireDefault(require("../text/font"));
+var _typography = _interopRequireDefault(require("../text/typography"));
+var _colorSchemeContext = require("../theme/color-scheme-context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+// difference between font sizes
+const LABEL_SCALE_RATIO = 14 / 12;
+let TextInputAccessory = exports.TextInputAccessory = /*#__PURE__*/function (TextInputAccessory) {
+  TextInputAccessory["Dropdown"] = "dropdown";
+  TextInputAccessory["Clear"] = "clear";
+  return TextInputAccessory;
+}({});
+const hitSlop = {
+  bottom: 10,
+  left: 10,
+  right: 10,
+  top: 10
+};
+/**
+ * Generic text input component
+ * @see https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=3%3A824&t=r7HhHF1rsNLmOBL2-4
+ */
+const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  value,
+  label,
+  accessory = TextInputAccessory.Clear,
+  accessoryAccessibilityLabel,
+  onAccessoryPress,
+  onSubmit,
+  onFocus,
+  onBlur,
+  disabled,
+  error,
+  style,
+  placeholder,
+  ...props
+}, ref) => {
+  const colorScheme = (0, _colorSchemeContext.useAppColorScheme)();
+  const {
+    fontScale
+  } = (0, _reactNative.useWindowDimensions)();
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const onFocusAction = (0, _react.useCallback)(e => {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 || onFocus(e);
+  }, [onFocus]);
+  const onBlurAction = (0, _react.useCallback)(e => {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 || onBlur(e);
+  }, [onBlur]);
+  const onSubmitEditing = (0, _react.useCallback)(e => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e.nativeEvent.text), [onSubmit]);
+  const accessoryIcon = (0, _react.useMemo)(() => {
+    switch (accessory) {
+      case TextInputAccessory.Dropdown:
+        return /*#__PURE__*/_react.default.createElement(_input.DropdownInputIcon, null);
+      case TextInputAccessory.Clear:
+        return value && !disabled ? /*#__PURE__*/_react.default.createElement(_input.ClearInputIcon, null) : undefined;
+    }
+  }, [accessory, disabled, value]);
+  const accessoryComponent = accessoryIcon ? /*#__PURE__*/_react.default.createElement(_accessibilityHistoryWrappers.TouchableOpacity, {
+    accessibilityLabel: accessoryAccessibilityLabel,
+    accessibilityRole: "button",
+    accessible: !disabled,
+    disabled: disabled,
+    hitSlop: hitSlop,
+    onPress: onAccessoryPress,
+    testID: (0, _testID.concatTestID)(props.testID, 'accessoryButton')
+  }, accessoryIcon) : null;
+  const labelPosition = focused || value ? 0 : 1;
+  const [labelAnimation] = (0, _react.useState)(() => new _reactNative.Animated.Value(labelPosition));
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(labelAnimation, {
+      duration: 200,
+      toValue: labelPosition,
+      useNativeDriver: true
+    }).start();
+  }, [labelAnimation, labelPosition]);
+  const [labelLayout, setLabelLayout] = (0, _react.useState)();
+  const onLabelLayout = (0, _react.useCallback)(event => setLabelLayout(event.nativeEvent.layout), []);
+  const accessibilityLabel = disabled ? undefined : label;
+  const inputStyle = {
+    height: Math.min(2, fontScale) * 24
+  };
+  const input = /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
+    accessibilityLabel: accessibilityLabel,
+    defaultValue: value || '',
+    editable: !disabled,
+    hitSlop: hitSlop,
+    maxFontSizeMultiplier: 2,
+    numberOfLines: 1,
+    onBlur: onBlurAction,
+    onFocus: onFocusAction,
+    onSubmitEditing: onSubmitEditing,
+    placeholder: focused ? placeholder : undefined,
+    ref: ref,
+    returnKeyType: "next",
+    style: [_font.default.regular, styles.inputText, _reactNative.Platform.OS === 'android' ? styles.inputAndroid : styles.inputIOS, {
+      color: colorScheme.text
+    }],
+    textAlignVertical: "center"
+    // https://github.com/facebook/react-native/issues/17530
+    ,
+    underlineColorAndroid: "#00000000",
+    value: value
+  }, props));
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    onLayout: onLabelLayout,
+    style: labelLayout ? {
+      transform: [{
+        // move label into the position of placeholder
+        translateY: labelAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, labelLayout.height + 4]
+        })
+      }, {
+        // compensate scale position in X direction
+        translateX: labelAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, labelLayout.width * (LABEL_SCALE_RATIO - 1) / 2]
+        })
+      }, {
+        // scale label into the size of placeholder
+        scale: labelAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, LABEL_SCALE_RATIO]
+        })
+      }]
+    } : undefined
+  }, /*#__PURE__*/_react.default.createElement(_typography.default, {
+    accessible: false,
+    color: 'rgba(0, 0, 0, 0.50)',
+    preset: "s"
+  }, label)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.inputRow, {
+      borderColor: focused ? colorScheme.accent : colorScheme.grayDark
+    }]
+  }, _reactNative.Platform.OS === 'android' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.inputWrapperAndroid, inputStyle]
+  }, input) : input, accessoryComponent), error ? /*#__PURE__*/_react.default.createElement(_typography.default, {
+    color: colorScheme.error,
+    preset: "s"
+  }, error) : null);
+});
+const styles = _reactNative.StyleSheet.create({
+  inputAndroid: {
+    fontSize: 14,
+    left: 0,
+    letterSpacing: 0.2,
+    lineHeight: 22,
+    position: 'absolute',
+    right: 0
+  },
+  inputIOS: {
+    flex: 1
+  },
+  inputRow: {
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    marginBottom: 4,
+    paddingVertical: 4
+  },
+  inputText: {
+    fontSize: 14,
+    letterSpacing: 0.2,
+    lineHeight: _reactNative.Platform.OS === 'android' ? 22 : 20,
+    minHeight: 24
+  },
+  inputWrapperAndroid: {
+    flex: 1,
+    justifyContent: 'center',
+    overflow: 'visible'
+  }
+});
+TextInput.displayName = 'Input';
+var _default = exports.default = TextInput;
+//# sourceMappingURL=text-input.js.map

package/lib/commonjs/ui-components/input/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_testID","_accessibilityHistoryWrappers","_input","_font","_interopRequireDefault","_typography","_colorSchemeContext","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","LABEL_SCALE_RATIO","TextInputAccessory","exports","hitSlop","bottom","left","right","top","TextInput","forwardRef","value","label","accessory","Clear","accessoryAccessibilityLabel","onAccessoryPress","onSubmit","onFocus","onBlur","disabled","error","style","placeholder","props","ref","colorScheme","useAppColorScheme","fontScale","useWindowDimensions","focused","setFocused","useState","onFocusAction","useCallback","onBlurAction","onSubmitEditing","nativeEvent","text","accessoryIcon","useMemo","Dropdown","createElement","DropdownInputIcon","ClearInputIcon","undefined","accessoryComponent","TouchableOpacity","accessibilityLabel","accessibilityRole","accessible","onPress","testID","concatTestID","labelPosition","labelAnimation","Animated","Value","useEffect","timing","duration","toValue","useNativeDriver","start","labelLayout","setLabelLayout","onLabelLayout","event","layout","inputStyle","height","Math","min","input","defaultValue","editable","maxFontSizeMultiplier","numberOfLines","returnKeyType","font","regular","styles","inputText","Platform","OS","inputAndroid","inputIOS","color","textAlignVertical","underlineColorAndroid","View","onLayout","transform","translateY","interpolate","inputRange","outputRange","translateX","width","scale","preset","inputRow","borderColor","accent","grayDark","inputWrapperAndroid","StyleSheet","create","fontSize","letterSpacing","lineHeight","position","flex","alignItems","borderBottomWidth","flexDirection","marginBottom","paddingVertical","minHeight","justifyContent","overflow","displayName","_default"],"sources":["text-input.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  Animated,\n  Insets,\n  LayoutChangeEvent,\n  LayoutRectangle,\n  NativeSyntheticEvent,\n  Platform,\n  StyleProp,\n  StyleSheet,\n  TextInput as RNTextInput,\n  TextInputFocusEventData as RNTextInputFocusEventData,\n  TextInputProps as RNTextInputProps,\n  TextInputSubmitEditingEventData as RNTextInputSubmitEditingEventData,\n  useWindowDimensions,\n  View,\n  ViewStyle,\n} from 'react-native';\n\nimport { concatTestID } from '../../utils/testID';\nimport { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';\nimport { ClearInputIcon, DropdownInputIcon } from '../icons/input';\nimport font from '../text/font';\nimport Typography from '../text/typography';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\n// difference between font sizes\nconst LABEL_SCALE_RATIO = 14 / 12;\n\nexport enum TextInputAccessory {\n  Dropdown = 'dropdown',\n  Clear = 'clear',\n}\n\nconst hitSlop: Insets = { bottom: 10, left: 10, right: 10, top: 10 };\n\nexport type TextInputProps = Omit<RNTextInputProps, 'editable' | 'onSubmitEditing' | 'style'> & {\n  accessory?: TextInputAccessory;\n  accessoryAccessibilityLabel?: string;\n  disabled?: boolean;\n  error?: string;\n  label: string;\n  onAccessoryPress?: () => void;\n  onSubmit?: (value: string) => void;\n  style?: StyleProp<ViewStyle>;\n};\n\n/**\n * Generic text input component\n * @see https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=3%3A824&t=r7HhHF1rsNLmOBL2-4\n */\nconst TextInput = forwardRef<RNTextInput, TextInputProps>(\n  (\n    {\n      value,\n      label,\n      accessory = TextInputAccessory.Clear,\n      accessoryAccessibilityLabel,\n      onAccessoryPress,\n      onSubmit,\n      onFocus,\n      onBlur,\n      disabled,\n      error,\n      style,\n      placeholder,\n      ...props\n    },\n    ref,\n  ) => {\n    const colorScheme = useAppColorScheme();\n    const { fontScale } = useWindowDimensions();\n\n    const [focused, setFocused] = useState(false);\n    const onFocusAction = useCallback(\n      (e: NativeSyntheticEvent<RNTextInputFocusEventData>) => {\n        setFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const onBlurAction = useCallback(\n      (e: NativeSyntheticEvent<RNTextInputFocusEventData>) => {\n        setFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n\n    const onSubmitEditing = useCallback(\n      (e: NativeSyntheticEvent<RNTextInputSubmitEditingEventData>) => onSubmit?.(e.nativeEvent.text),\n      [onSubmit],\n    );\n\n    const accessoryIcon = useMemo(() => {\n      switch (accessory) {\n        case TextInputAccessory.Dropdown:\n          return <DropdownInputIcon />;\n        case TextInputAccessory.Clear:\n          return value && !disabled ? <ClearInputIcon /> : undefined;\n      }\n    }, [accessory, disabled, value]);\n\n    const accessoryComponent = accessoryIcon ? (\n      <TouchableOpacity\n        accessibilityLabel={accessoryAccessibilityLabel}\n        accessibilityRole=\"button\"\n        accessible={!disabled}\n        disabled={disabled}\n        hitSlop={hitSlop}\n        onPress={onAccessoryPress}\n        testID={concatTestID(props.testID, 'accessoryButton')}>\n        {accessoryIcon}\n      </TouchableOpacity>\n    ) : null;\n\n    const labelPosition = focused || value ? 0 : 1;\n    const [labelAnimation] = useState<Animated.Value>(() => new Animated.Value(labelPosition));\n    useEffect(() => {\n      Animated.timing(labelAnimation, {\n        duration: 200,\n        toValue: labelPosition,\n        useNativeDriver: true,\n      }).start();\n    }, [labelAnimation, labelPosition]);\n\n    const [labelLayout, setLabelLayout] = useState<LayoutRectangle>();\n    const onLabelLayout = useCallback((event: LayoutChangeEvent) => setLabelLayout(event.nativeEvent.layout), []);\n\n    const accessibilityLabel = disabled ? undefined : label;\n    const inputStyle = { height: Math.min(2, fontScale) * 24 };\n\n    const input = (\n      <RNTextInput\n        accessibilityLabel={accessibilityLabel}\n        defaultValue={value || ''}\n        editable={!disabled}\n        hitSlop={hitSlop}\n        maxFontSizeMultiplier={2}\n        numberOfLines={1}\n        onBlur={onBlurAction}\n        onFocus={onFocusAction}\n        onSubmitEditing={onSubmitEditing}\n        placeholder={focused ? placeholder : undefined}\n        ref={ref}\n        returnKeyType=\"next\"\n        style={[\n          font.regular,\n          styles.inputText,\n          Platform.OS === 'android' ? styles.inputAndroid : styles.inputIOS,\n          {\n            color: colorScheme.text,\n          },\n        ]}\n        textAlignVertical=\"center\"\n        // https://github.com/facebook/react-native/issues/17530\n        underlineColorAndroid=\"#00000000\"\n        value={value}\n        {...props}\n      />\n    );\n    return (\n      <View style={style}>\n        <Animated.View\n          onLayout={onLabelLayout}\n          style={\n            labelLayout\n              ? {\n                  transform: [\n                    {\n                      // move label into the position of placeholder\n                      translateY: labelAnimation.interpolate({\n                        inputRange: [0, 1],\n                        outputRange: [0, labelLayout.height + 4],\n                      }),\n                    },\n                    {\n                      // compensate scale position in X direction\n                      translateX: labelAnimation.interpolate({\n                        inputRange: [0, 1],\n                        outputRange: [0, (labelLayout.width * (LABEL_SCALE_RATIO - 1)) / 2],\n                      }),\n                    },\n                    {\n                      // scale label into the size of placeholder\n                      scale: labelAnimation.interpolate({\n                        inputRange: [0, 1],\n                        outputRange: [1, LABEL_SCALE_RATIO],\n                      }),\n                    },\n                  ],\n                }\n              : undefined\n          }>\n          <Typography accessible={false} color={'rgba(0, 0, 0, 0.50)'} preset=\"s\">\n            {label}\n          </Typography>\n        </Animated.View>\n        <View\n          style={[\n            styles.inputRow,\n            {\n              borderColor: focused ? colorScheme.accent : colorScheme.grayDark,\n            },\n          ]}>\n          {Platform.OS === 'android' ? <View style={[styles.inputWrapperAndroid, inputStyle]}>{input}</View> : input}\n          {accessoryComponent}\n        </View>\n        {error ? (\n          <Typography color={colorScheme.error} preset=\"s\">\n            {error}\n          </Typography>\n        ) : null}\n      </View>\n    );\n  },\n);\n\nconst styles = StyleSheet.create({\n  inputAndroid: {\n    fontSize: 14,\n    left: 0,\n    letterSpacing: 0.2,\n    lineHeight: 22,\n    position: 'absolute',\n    right: 0,\n  },\n  inputIOS: {\n    flex: 1,\n  },\n  inputRow: {\n    alignItems: 'center',\n    borderBottomWidth: 1,\n    flexDirection: 'row',\n    marginBottom: 4,\n    paddingVertical: 4,\n  },\n  inputText: {\n    fontSize: 14,\n    letterSpacing: 0.2,\n    lineHeight: Platform.OS === 'android' ? 22 : 20,\n    minHeight: 24,\n  },\n  inputWrapperAndroid: {\n    flex: 1,\n    justifyContent: 'center',\n    overflow: 'visible',\n  },\n});\n\nTextInput.displayName = 'Input';\n\nexport default TextInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui-components/list/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  ListSectionHeader: true,
+  ListSectionHeaderProps: true,
+  ListTitleHeader: true,
+  ListTitleHeaderProps: true
+};
+Object.defineProperty(exports, "ListSectionHeader", {
+  enumerable: true,
+  get: function () {
+    return _listSectionHeader.default;
+  }
+});
+Object.defineProperty(exports, "ListSectionHeaderProps", {
+  enumerable: true,
+  get: function () {
+    return _listSectionHeader.ListSectionHeaderProps;
+  }
+});
+Object.defineProperty(exports, "ListTitleHeader", {
+  enumerable: true,
+  get: function () {
+    return _listTitleHeader.default;
+  }
+});
+Object.defineProperty(exports, "ListTitleHeaderProps", {
+  enumerable: true,
+  get: function () {
+    return _listTitleHeader.ListTitleHeaderProps;
+  }
+});
+var _listSectionHeader = _interopRequireWildcard(require("./list-section-header"));
+var _listTitleHeader = _interopRequireWildcard(require("./list-title-header"));
+var _wallet = require("./wallet");
+Object.keys(_wallet).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _wallet[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _wallet[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/ui-components/list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_listSectionHeader","_interopRequireWildcard","require","_listTitleHeader","_wallet","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"sources":["index.ts"],"sourcesContent":["import ListSectionHeader, { ListSectionHeaderProps } from './list-section-header';\nimport ListTitleHeader, { ListTitleHeaderProps } from './list-title-header';\n\nexport { ListSectionHeader, ListSectionHeaderProps };\nexport { ListTitleHeader, ListTitleHeaderProps };\nexport * from './wallet';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,uBAAA,CAAAC,OAAA;AAIA,IAAAE,OAAA,GAAAF,OAAA;AAAAG,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAAyB,SAAAS,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAjB,wBAAAiB,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAL,GAAA,CAAAE,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAtB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAuB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAAnB,cAAA,CAAAC,IAAA,CAAAO,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAtB,MAAA,CAAAuB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAd,GAAA,IAAAc,CAAA,CAAAC,GAAA,IAAA1B,MAAA,CAAAS,cAAA,CAAAW,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,CAAAF,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA","ignoreList":[]}

package/lib/commonjs/ui-components/list/list-page-loading-indicator.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ListPageLoadingIndicator = props => {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, props);
+};
+var _default = exports.default = ListPageLoadingIndicator;
+//# sourceMappingURL=list-page-loading-indicator.js.map

package/lib/commonjs/ui-components/list/list-page-loading-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","e","__esModule","default","ListPageLoadingIndicator","props","createElement","ActivityIndicator","_default","exports"],"sources":["list-page-loading-indicator.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ActivityIndicator, ActivityIndicatorProps } from 'react-native';\n\nconst ListPageLoadingIndicator: FC<ActivityIndicatorProps> = (props) => {\n  return <ActivityIndicator {...props} />;\n};\n\nexport default ListPageLoadingIndicator;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAyE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEzE,MAAMG,wBAAoD,GAAIC,KAAK,IAAK;EACtE,oBAAOR,MAAA,CAAAM,OAAA,CAAAG,aAAA,CAACN,YAAA,CAAAO,iBAAiB,EAAKF,KAAQ,CAAC;AACzC,CAAC;AAAC,IAAAG,QAAA,GAAAC,OAAA,CAAAN,OAAA,GAEaC,wBAAwB","ignoreList":[]}

package/lib/commonjs/ui-components/list/list-section-header.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _typography = _interopRequireDefault(require("../text/typography"));
+var _colorSchemeContext = require("../theme/color-scheme-context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const ListSectionHeader = ({
+  accessibilityRole,
+  color,
+  style,
+  title,
+  ...typographyProps
+}) => {
+  const colorScheme = (0, _colorSchemeContext.useAppColorScheme)();
+  return /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
+    accessibilityRole: accessibilityRole !== null && accessibilityRole !== void 0 ? accessibilityRole : 'header',
+    color: color !== null && color !== void 0 ? color : colorScheme.text,
+    style: [styles.sectionHeader, style]
+  }, typographyProps), title);
+};
+const styles = _reactNative.StyleSheet.create({
+  sectionHeader: {
+    marginHorizontal: 20,
+    marginVertical: 16
+  }
+});
+var _default = exports.default = ListSectionHeader;
+//# sourceMappingURL=list-section-header.js.map

package/lib/commonjs/ui-components/list/list-section-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_typography","_colorSchemeContext","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","ListSectionHeader","accessibilityRole","color","style","title","typographyProps","colorScheme","useAppColorScheme","createElement","text","styles","sectionHeader","StyleSheet","create","marginHorizontal","marginVertical","_default","exports"],"sources":["list-section-header.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport Typography, { TypographyProps } from '../text/typography';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type ListSectionHeaderProps = Partial<TypographyProps> & {\n  title: string;\n};\n\nconst ListSectionHeader: FC<ListSectionHeaderProps> = ({\n  accessibilityRole,\n  color,\n  style,\n  title,\n  ...typographyProps\n}) => {\n  const colorScheme = useAppColorScheme();\n  return (\n    <Typography\n      accessibilityRole={accessibilityRole ?? 'header'}\n      color={color ?? colorScheme.text}\n      style={[styles.sectionHeader, style]}\n      {...typographyProps}>\n      {title}\n    </Typography>\n  );\n};\n\nconst styles = StyleSheet.create({\n  sectionHeader: {\n    marginHorizontal: 20,\n    marginVertical: 16,\n  },\n});\n\nexport default ListSectionHeader;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAAkE,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAP,CAAA,MAAAA,CAAA,GAAAQ,SAAA,CAAAC,MAAA,EAAAT,CAAA,UAAAU,CAAA,GAAAF,SAAA,CAAAR,CAAA,YAAAW,CAAA,IAAAD,CAAA,OAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,aAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAMlE,MAAMO,iBAA6C,GAAGA,CAAC;EACrDC,iBAAiB;EACjBC,KAAK;EACLC,KAAK;EACLC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAG,IAAAC,qCAAiB,EAAC,CAAC;EACvC,oBACE5B,MAAA,CAAAQ,OAAA,CAAAqB,aAAA,CAACzB,WAAA,CAAAI,OAAU,EAAAC,QAAA;IACTa,iBAAiB,EAAEA,iBAAiB,aAAjBA,iBAAiB,cAAjBA,iBAAiB,GAAI,QAAS;IACjDC,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAII,WAAW,CAACG,IAAK;IACjCN,KAAK,EAAE,CAACO,MAAM,CAACC,aAAa,EAAER,KAAK;EAAE,GACjCE,eAAe,GAClBD,KACS,CAAC;AAEjB,CAAC;AAED,MAAMM,MAAM,GAAGE,uBAAU,CAACC,MAAM,CAAC;EAC/BF,aAAa,EAAE;IACbG,gBAAgB,EAAE,EAAE;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9B,OAAA,GAEYa,iBAAiB","ignoreList":[]}

package/lib/commonjs/ui-components/list/list-title-header.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _typography = _interopRequireDefault(require("../text/typography"));
+var _colorSchemeContext = require("../theme/color-scheme-context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ListTitleHeader = ({
+  title,
+  testID
+}) => {
+  const colorScheme = (0, _colorSchemeContext.useAppColorScheme)();
+  return /*#__PURE__*/_react.default.createElement(_typography.default, {
+    testID: testID,
+    accessibilityRole: "header",
+    color: colorScheme.text,
+    preset: "l",
+    style: styles.listTitle
+  }, title);
+};
+const styles = _reactNative.StyleSheet.create({
+  listTitle: {
+    marginBottom: 20,
+    marginHorizontal: 20,
+    marginTop: 9
+  }
+});
+var _default = exports.default = ListTitleHeader;
+//# sourceMappingURL=list-title-header.js.map

package/lib/commonjs/ui-components/list/list-title-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_typography","_colorSchemeContext","e","__esModule","default","ListTitleHeader","title","testID","colorScheme","useAppColorScheme","createElement","accessibilityRole","color","text","preset","style","styles","listTitle","StyleSheet","create","marginBottom","marginHorizontal","marginTop","_default","exports"],"sources":["list-title-header.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport Typography from '../text/typography';\nimport { useAppColorScheme } from '../theme/color-scheme-context';\n\nexport type ListTitleHeaderProps = {\n  title: string;\n  testID?: string;\n};\n\nconst ListTitleHeader: FC<ListTitleHeaderProps> = ({ title, testID }) => {\n  const colorScheme = useAppColorScheme();\n\n  return (\n    <Typography testID={testID} accessibilityRole=\"header\" color={colorScheme.text} preset=\"l\" style={styles.listTitle}>\n      {title}\n    </Typography>\n  );\n};\n\nconst styles = StyleSheet.create({\n  listTitle: {\n    marginBottom: 20,\n    marginHorizontal: 20,\n    marginTop: 9,\n  },\n});\n\nexport default ListTitleHeader;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAAkE,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOlE,MAAMG,eAAyC,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAO,CAAC,KAAK;EACvE,MAAMC,WAAW,GAAG,IAAAC,qCAAiB,EAAC,CAAC;EAEvC,oBACEb,MAAA,CAAAQ,OAAA,CAAAM,aAAA,CAACV,WAAA,CAAAI,OAAU;IAACG,MAAM,EAAEA,MAAO;IAACI,iBAAiB,EAAC,QAAQ;IAACC,KAAK,EAAEJ,WAAW,CAACK,IAAK;IAACC,MAAM,EAAC,GAAG;IAACC,KAAK,EAAEC,MAAM,CAACC;EAAU,GAChHX,KACS,CAAC;AAEjB,CAAC;AAED,MAAMU,MAAM,GAAGE,uBAAU,CAACC,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,YAAY,EAAE,EAAE;IAChBC,gBAAgB,EAAE,EAAE;IACpBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApB,OAAA,GAEYC,eAAe","ignoreList":[]}

package/lib/commonjs/ui-components/list/wallet/empty-list.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _utils = require("../../../utils");
+var _buttons = require("../../buttons");
+var _icons = require("../../icons");
+var _text = require("../../text");
+var _theme = require("../../theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const WalletEmptyList = ({
+  onScanPress,
+  scanButtonTitle,
+  subtitle,
+  testID,
+  title
+}) => {
+  const safeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const colorScheme = (0, _theme.useAppColorScheme)();
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.empty
+  }, /*#__PURE__*/_react.default.createElement(_text.Typography, {
+    align: "center",
+    color: colorScheme.text,
+    preset: "l/line-height-large",
+    style: styles.emptyTitle,
+    testID: (0, _utils.concatTestID)(testID, 'title')
+  }, title), /*#__PURE__*/_react.default.createElement(_text.Typography, {
+    align: "center",
+    color: colorScheme.text,
+    style: styles.emptySubtitle,
+    testID: (0, _utils.concatTestID)(testID, 'subtitle')
+  }, subtitle), /*#__PURE__*/_react.default.createElement(_icons.NoCredentialsIcon, {
+    style: styles.emptyIcon
+  }), /*#__PURE__*/_react.default.createElement(_buttons.Button, {
+    onPress: onScanPress,
+    style: [styles.emptyButton, {
+      bottom: Math.max(24, safeAreaInsets.bottom)
+    }],
+    testID: (0, _utils.concatTestID)(testID, 'scanQrCode'),
+    title: scanButtonTitle
+  }));
+};
+const styles = _reactNative.StyleSheet.create({
+  empty: {
+    alignItems: 'center',
+    flex: 1,
+    marginHorizontal: 16,
+    marginTop: 224
+  },
+  emptyButton: {
+    marginBottom: 16,
+    position: 'absolute',
+    width: '100%'
+  },
+  emptyIcon: {
+    marginTop: -30
+  },
+  emptySubtitle: {
+    opacity: 0.7
+  },
+  emptyTitle: {
+    marginBottom: 8,
+    opacity: 0.7
+  }
+});
+var _default = exports.default = WalletEmptyList;
+//# sourceMappingURL=empty-list.js.map

package/lib/commonjs/ui-components/list/wallet/empty-list.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeSafeAreaContext","_utils","_buttons","_icons","_text","_theme","e","__esModule","default","WalletEmptyList","onScanPress","scanButtonTitle","subtitle","testID","title","safeAreaInsets","useSafeAreaInsets","colorScheme","useAppColorScheme","createElement","View","style","styles","empty","Typography","align","color","text","preset","emptyTitle","concatTestID","emptySubtitle","NoCredentialsIcon","emptyIcon","Button","onPress","emptyButton","bottom","Math","max","StyleSheet","create","alignItems","flex","marginHorizontal","marginTop","marginBottom","position","width","opacity","_default","exports"],"sources":["empty-list.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { concatTestID } from '../../../utils';\nimport { Button } from '../../buttons';\nimport { NoCredentialsIcon } from '../../icons';\nimport { Typography } from '../../text';\nimport { useAppColorScheme } from '../../theme';\n\ntype WalletEmptyListProps = {\n  onScanPress: () => void;\n  scanButtonTitle: string;\n  subtitle: string;\n  testID: string;\n  title: string;\n};\n\nconst WalletEmptyList: FC<WalletEmptyListProps> = ({ onScanPress, scanButtonTitle, subtitle, testID, title }) => {\n  const safeAreaInsets = useSafeAreaInsets();\n  const colorScheme = useAppColorScheme();\n\n  return (\n    <View style={styles.empty}>\n      <Typography\n        align=\"center\"\n        color={colorScheme.text}\n        preset=\"l/line-height-large\"\n        style={styles.emptyTitle}\n        testID={concatTestID(testID, 'title')}>\n        {title}\n      </Typography>\n      <Typography\n        align=\"center\"\n        color={colorScheme.text}\n        style={styles.emptySubtitle}\n        testID={concatTestID(testID, 'subtitle')}>\n        {subtitle}\n      </Typography>\n      <NoCredentialsIcon style={styles.emptyIcon} />\n      <Button\n        onPress={onScanPress}\n        style={[styles.emptyButton, { bottom: Math.max(24, safeAreaInsets.bottom) }]}\n        testID={concatTestID(testID, 'scanQrCode')}\n        title={scanButtonTitle}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  empty: {\n    alignItems: 'center',\n    flex: 1,\n    marginHorizontal: 16,\n    marginTop: 224,\n  },\n  emptyButton: {\n    marginBottom: 16,\n    position: 'absolute',\n    width: '100%',\n  },\n  emptyIcon: {\n    marginTop: -30,\n  },\n  emptySubtitle: {\n    opacity: 0.7,\n  },\n  emptyTitle: {\n    marginBottom: 8,\n    opacity: 0.7,\n  },\n});\n\nexport default WalletEmptyList;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,2BAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAAgD,SAAAD,uBAAAS,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAUhD,MAAMG,eAAyC,GAAGA,CAAC;EAAEC,WAAW;EAAEC,eAAe;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAM,CAAC,KAAK;EAC/G,MAAMC,cAAc,GAAG,IAAAC,6CAAiB,EAAC,CAAC;EAC1C,MAAMC,WAAW,GAAG,IAAAC,wBAAiB,EAAC,CAAC;EAEvC,oBACEtB,MAAA,CAAAY,OAAA,CAAAW,aAAA,CAACpB,YAAA,CAAAqB,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC;EAAM,gBACxB3B,MAAA,CAAAY,OAAA,CAAAW,aAAA,CAACf,KAAA,CAAAoB,UAAU;IACTC,KAAK,EAAC,QAAQ;IACdC,KAAK,EAAET,WAAW,CAACU,IAAK;IACxBC,MAAM,EAAC,qBAAqB;IAC5BP,KAAK,EAAEC,MAAM,CAACO,UAAW;IACzBhB,MAAM,EAAE,IAAAiB,mBAAY,EAACjB,MAAM,EAAE,OAAO;EAAE,GACrCC,KACS,CAAC,eACblB,MAAA,CAAAY,OAAA,CAAAW,aAAA,CAACf,KAAA,CAAAoB,UAAU;IACTC,KAAK,EAAC,QAAQ;IACdC,KAAK,EAAET,WAAW,CAACU,IAAK;IACxBN,KAAK,EAAEC,MAAM,CAACS,aAAc;IAC5BlB,MAAM,EAAE,IAAAiB,mBAAY,EAACjB,MAAM,EAAE,UAAU;EAAE,GACxCD,QACS,CAAC,eACbhB,MAAA,CAAAY,OAAA,CAAAW,aAAA,CAAChB,MAAA,CAAA6B,iBAAiB;IAACX,KAAK,EAAEC,MAAM,CAACW;EAAU,CAAE,CAAC,eAC9CrC,MAAA,CAAAY,OAAA,CAAAW,aAAA,CAACjB,QAAA,CAAAgC,MAAM;IACLC,OAAO,EAAEzB,WAAY;IACrBW,KAAK,EAAE,CAACC,MAAM,CAACc,WAAW,EAAE;MAAEC,MAAM,EAAEC,IAAI,CAACC,GAAG,CAAC,EAAE,EAAExB,cAAc,CAACsB,MAAM;IAAE,CAAC,CAAE;IAC7ExB,MAAM,EAAE,IAAAiB,mBAAY,EAACjB,MAAM,EAAE,YAAY,CAAE;IAC3CC,KAAK,EAAEH;EAAgB,CACxB,CACG,CAAC;AAEX,CAAC;AAED,MAAMW,MAAM,GAAGkB,uBAAU,CAACC,MAAM,CAAC;EAC/BlB,KAAK,EAAE;IACLmB,UAAU,EAAE,QAAQ;IACpBC,IAAI,EAAE,CAAC;IACPC,gBAAgB,EAAE,EAAE;IACpBC,SAAS,EAAE;EACb,CAAC;EACDT,WAAW,EAAE;IACXU,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE;EACT,CAAC;EACDf,SAAS,EAAE;IACTY,SAAS,EAAE,CAAC;EACd,CAAC;EACDd,aAAa,EAAE;IACbkB,OAAO,EAAE;EACX,CAAC;EACDpB,UAAU,EAAE;IACViB,YAAY,EAAE,CAAC;IACfG,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3C,OAAA,GAEYC,eAAe","ignoreList":[]}