@procivis/one-react-native-components 0.1.63

package/lib/commonjs/credential/card/credential-card.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CredentialCardShadow = exports.CredentialCardRatio = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _accessibilityHistoryWrappers = require("../../accessibility/accessibilityHistoryWrappers");
+var _blurView = _interopRequireDefault(require("../../blur/blur-view"));
+var _imageOrComponent = _interopRequireDefault(require("../../image/image-or-component"));
+var _typography = _interopRequireDefault(require("../../text/typography"));
+var _colorSchemeContext = require("../../theme/color-scheme-context");
+var _testID = require("../../utils/testID");
+var _credentialHeader = _interopRequireDefault(require("./credential-header"));
+var _credentialImageCarousel = _interopRequireDefault(require("./credential-image-carousel"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const CredentialCardShadow = {
+  shadowColor: '#10274226',
+  shadowOffset: {
+    height: 5,
+    width: 0
+  },
+  shadowOpacity: 1,
+  shadowRadius: 7
+};
+exports.CredentialCardShadow = CredentialCardShadow;
+const CredentialCardRatio = 18 / 11;
+exports.CredentialCardRatio = CredentialCardRatio;
+const CredentialCard = _ref => {
+  var _header$color;
+  let {
+    cardCarouselImages = [],
+    cardImage,
+    color = '#5A69F3',
+    credentialId,
+    header,
+    notice,
+    noticeIcon,
+    onCardPress,
+    onHeaderPress,
+    style,
+    testID
+  } = _ref;
+  const colorScheme = (0, _colorSchemeContext.useAppColorScheme)();
+  const [tappableHeaderHeight, setTappableHeaderHeight] = (0, _react.useState)();
+  const [noticeHeight, setNoticeHeight] = (0, _react.useState)();
+  const [cardSize, setCardSize] = (0, _react.useState)();
+  const onCardLayoutChange = (0, _react.useCallback)(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setCardSize({
+      width,
+      height
+    });
+  }, []);
+  const onHeaderLayoutChange = (0, _react.useCallback)(event => {
+    setTappableHeaderHeight(event.nativeEvent.layout.height);
+  }, []);
+  const onNoticeLayoutChange = (0, _react.useCallback)(event => {
+    setNoticeHeight(event.nativeEvent.layout.height);
+  }, []);
+  const headerPressHandler = (0, _react.useCallback)(() => {
+    onHeaderPress === null || onHeaderPress === void 0 ? void 0 : onHeaderPress(credentialId);
+  }, [credentialId, onHeaderPress]);
+  const cardPressHandler = (0, _react.useCallback)(() => {
+    onCardPress === null || onCardPress === void 0 ? void 0 : onCardPress(credentialId);
+  }, [credentialId, onCardPress]);
+  const noticeIconView = (0, _react.useMemo)(() => {
+    if (!noticeIcon) {
+      return undefined;
+    }
+    if ( /*#__PURE__*/_react.default.isValidElement(noticeIcon)) {
+      return noticeIcon;
+    } else {
+      const NoticeIconComponent = noticeIcon;
+      return /*#__PURE__*/_react.default.createElement(NoticeIconComponent, null);
+    }
+  }, [noticeIcon]);
+  const shouldShowCarousel = (cardSize === null || cardSize === void 0 ? void 0 : cardSize.width) && cardSize.height;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    onLayout: onCardLayoutChange,
+    style: [styles.card, style],
+    testID: testID
+  }, cardImage ? 'imageSource' in cardImage ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.cardImage
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    testID: (0, _testID.concatTestID)(testID, 'imageSource'),
+    source: cardImage.imageSource,
+    style: styles.image
+  })) : /*#__PURE__*/_react.default.createElement(_imageOrComponent.default, {
+    testID: (0, _testID.concatTestID)(testID, 'cardImage'),
+    source: cardImage,
+    style: styles.cardImage
+  }) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    testID: (0, _testID.concatTestID)(testID, 'cardBackgroundColor', String(color)),
+    style: [styles.cardImage, {
+      backgroundColor: color
+    }]
+  }), onCardPress && /*#__PURE__*/_react.default.createElement(_accessibilityHistoryWrappers.TouchableOpacity, {
+    style: styles.cardButton,
+    onPress: cardPressHandler
+  }), shouldShowCarousel ? /*#__PURE__*/_react.default.createElement(_credentialImageCarousel.default, {
+    style: {
+      marginTop: tappableHeaderHeight !== null && tappableHeaderHeight !== void 0 ? tappableHeaderHeight : 0
+    },
+    imagesToRender: cardCarouselImages !== null && cardCarouselImages !== void 0 ? cardCarouselImages : [],
+    carouselSize: {
+      width: cardSize.width,
+      height: cardSize.height - (tappableHeaderHeight !== null && tappableHeaderHeight !== void 0 ? tappableHeaderHeight : 0) - (noticeHeight !== null && noticeHeight !== void 0 ? noticeHeight : 0)
+    },
+    testID: (0, _testID.concatTestID)(testID, 'carousel')
+  }) : null, /*#__PURE__*/_react.default.createElement(_accessibilityHistoryWrappers.TouchableOpacity, {
+    onLayout: onHeaderLayoutChange,
+    activeOpacity: 0.9,
+    disabled: !onHeaderPress,
+    onPress: headerPressHandler,
+    style: styles.header
+  }, /*#__PURE__*/_react.default.createElement(_credentialHeader.default, _extends({}, header, {
+    color: (_header$color = header.color) !== null && _header$color !== void 0 ? _header$color : color,
+    testID: (0, _testID.concatTestID)(testID, 'header')
+  }))), notice && /*#__PURE__*/_react.default.createElement(_blurView.default, {
+    onLayout: onNoticeLayoutChange,
+    blurStyle: "soft",
+    style: [styles.notice, style],
+    testID: (0, _testID.concatTestID)(testID, 'notice')
+  }, noticeIconView && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.noticeIcon
+  }, noticeIconView), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.noticeTextWrapper
+  }, /*#__PURE__*/_react.default.createElement(_typography.default, {
+    color: colorScheme.text,
+    preset: "xs/line-height-small",
+    style: styles.noticeText,
+    testID: (0, _testID.concatTestID)(testID, 'notice.text')
+  }, notice))));
+};
+const styles = _reactNative.StyleSheet.create({
+  card: {
+    borderRadius: 10,
+    overflow: 'hidden'
+  },
+  cardButton: {
+    height: '100%',
+    position: 'absolute',
+    width: '100%'
+  },
+  cardImage: {
+    aspectRatio: CredentialCardRatio,
+    width: '100%'
+  },
+  header: {
+    position: 'absolute',
+    top: 0,
+    width: '100%'
+  },
+  image: {
+    height: '100%',
+    width: '100%'
+  },
+  notice: {
+    bottom: 0,
+    columnGap: 6,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    paddingBottom: 6,
+    paddingHorizontal: 12,
+    paddingTop: 2,
+    position: 'absolute',
+    width: '100%'
+  },
+  noticeIcon: {
+    marginTop: 4
+  },
+  noticeText: {
+    marginVertical: 5
+  },
+  noticeTextWrapper: {
+    flex: 1
+  }
+});
+var _default = CredentialCard;
+exports.default = _default;
+//# sourceMappingURL=credential-card.js.map

package/lib/commonjs/credential/card/credential-card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_accessibilityHistoryWrappers","_blurView","_interopRequireDefault","_imageOrComponent","_typography","_colorSchemeContext","_testID","_credentialHeader","_credentialImageCarousel","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","CredentialCardShadow","shadowColor","shadowOffset","height","width","shadowOpacity","shadowRadius","exports","CredentialCardRatio","CredentialCard","_ref","_header$color","cardCarouselImages","cardImage","color","credentialId","header","notice","noticeIcon","onCardPress","onHeaderPress","style","testID","colorScheme","useAppColorScheme","tappableHeaderHeight","setTappableHeaderHeight","useState","noticeHeight","setNoticeHeight","cardSize","setCardSize","onCardLayoutChange","useCallback","event","nativeEvent","layout","onHeaderLayoutChange","onNoticeLayoutChange","headerPressHandler","cardPressHandler","noticeIconView","useMemo","undefined","React","isValidElement","NoticeIconComponent","createElement","shouldShowCarousel","View","onLayout","styles","card","Image","concatTestID","imageSource","image","String","backgroundColor","TouchableOpacity","cardButton","onPress","marginTop","imagesToRender","carouselSize","activeOpacity","disabled","blurStyle","noticeTextWrapper","text","preset","noticeText","StyleSheet","create","borderRadius","overflow","position","aspectRatio","top","bottom","columnGap","flexDirection","justifyContent","paddingBottom","paddingHorizontal","paddingTop","marginVertical","flex","_default"],"sources":["credential-card.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo, useState } from 'react';\nimport { ColorValue, Image, LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { TouchableOpacity } from '../../accessibility/accessibilityHistoryWrappers';\nimport BlurView from '../../blur/blur-view';\nimport ImageOrComponent, { ImageOrComponentSource } from '../../image/image-or-component';\nimport Typography from '../../text/typography';\nimport { useAppColorScheme } from '../../theme/color-scheme-context';\nimport { concatTestID } from '../../utils/testID';\nimport CredentialHeader, { CredentialHeaderProps } from './credential-header';\nimport CarouselComponent, { CarouselImage } from './credential-image-carousel';\n\nexport const CredentialCardShadow: Pick<ViewStyle, 'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius'> =\n  {\n    shadowColor: '#10274226',\n    shadowOffset: {\n      height: 5,\n      width: 0,\n    },\n    shadowOpacity: 1,\n    shadowRadius: 7,\n  };\n\nexport const CredentialCardRatio = 18 / 11;\n\nexport type CredentialCardProps = {\n  cardCarouselImages?: CarouselImage[];\n  cardImage?: ImageOrComponentSource;\n  color?: ColorValue;\n  credentialId?: string;\n  header: CredentialHeaderProps;\n  notice?: string;\n  noticeIcon?: React.ComponentType<any> | React.ReactElement;\n  onCardPress?: (credentialId?: string) => void;\n  onHeaderPress?: (credentialId?: string) => void;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n};\n\nconst CredentialCard: FC<CredentialCardProps> = ({\n  cardCarouselImages = [],\n  cardImage,\n  color = '#5A69F3',\n  credentialId,\n  header,\n  notice,\n  noticeIcon,\n  onCardPress,\n  onHeaderPress,\n  style,\n  testID,\n}) => {\n  const colorScheme = useAppColorScheme();\n  const [tappableHeaderHeight, setTappableHeaderHeight] = useState<number>();\n  const [noticeHeight, setNoticeHeight] = useState<number>();\n  const [cardSize, setCardSize] = useState<{ height: number; width: number }>();\n\n  const onCardLayoutChange = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setCardSize({ width, height });\n  }, []);\n\n  const onHeaderLayoutChange = useCallback((event: LayoutChangeEvent) => {\n    setTappableHeaderHeight(event.nativeEvent.layout.height);\n  }, []);\n\n  const onNoticeLayoutChange = useCallback((event: LayoutChangeEvent) => {\n    setNoticeHeight(event.nativeEvent.layout.height);\n  }, []);\n\n  const headerPressHandler = useCallback(() => {\n    onHeaderPress?.(credentialId);\n  }, [credentialId, onHeaderPress]);\n\n  const cardPressHandler = useCallback(() => {\n    onCardPress?.(credentialId);\n  }, [credentialId, onCardPress]);\n\n  const noticeIconView: React.ReactElement | undefined = useMemo(() => {\n    if (!noticeIcon) {\n      return undefined;\n    }\n    if (React.isValidElement(noticeIcon)) {\n      return noticeIcon;\n    } else {\n      const NoticeIconComponent = noticeIcon as React.ComponentType<any>;\n      return <NoticeIconComponent />;\n    }\n  }, [noticeIcon]);\n\n  const shouldShowCarousel = cardSize?.width && cardSize.height;\n  return (\n    <View onLayout={onCardLayoutChange} style={[styles.card, style]} testID={testID}>\n      {cardImage ? (\n        'imageSource' in cardImage ? (\n          <View style={styles.cardImage}>\n            <Image testID={concatTestID(testID, 'imageSource')} source={cardImage.imageSource} style={styles.image} />\n          </View>\n        ) : (\n          <ImageOrComponent testID={concatTestID(testID, 'cardImage')} source={cardImage} style={styles.cardImage} />\n        )\n      ) : (\n        <View\n          testID={concatTestID(testID, 'cardBackgroundColor', String(color))}\n          style={[styles.cardImage, { backgroundColor: color }]}\n        />\n      )}\n      {onCardPress && <TouchableOpacity style={styles.cardButton} onPress={cardPressHandler} />}\n      {shouldShowCarousel ? (\n        <CarouselComponent\n          style={{ marginTop: tappableHeaderHeight ?? 0 }}\n          imagesToRender={cardCarouselImages ?? []}\n          carouselSize={{\n            width: cardSize.width,\n            height: cardSize.height - (tappableHeaderHeight ?? 0) - (noticeHeight ?? 0),\n          }}\n          testID={concatTestID(testID, 'carousel')}\n        />\n      ) : null}\n      <TouchableOpacity\n        onLayout={onHeaderLayoutChange}\n        activeOpacity={0.9}\n        disabled={!onHeaderPress}\n        onPress={headerPressHandler}\n        style={styles.header}>\n        <CredentialHeader {...header} color={header.color ?? color} testID={concatTestID(testID, 'header')} />\n      </TouchableOpacity>\n      {notice && (\n        <BlurView\n          onLayout={onNoticeLayoutChange}\n          blurStyle=\"soft\"\n          style={[styles.notice, style]}\n          testID={concatTestID(testID, 'notice')}>\n          {noticeIconView && <View style={styles.noticeIcon}>{noticeIconView}</View>}\n          <View style={styles.noticeTextWrapper}>\n            <Typography\n              color={colorScheme.text}\n              preset=\"xs/line-height-small\"\n              style={styles.noticeText}\n              testID={concatTestID(testID, 'notice.text')}>\n              {notice}\n            </Typography>\n          </View>\n        </BlurView>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  card: {\n    borderRadius: 10,\n    overflow: 'hidden',\n  },\n  cardButton: {\n    height: '100%',\n    position: 'absolute',\n    width: '100%',\n  },\n  cardImage: {\n    aspectRatio: CredentialCardRatio,\n    width: '100%',\n  },\n  header: {\n    position: 'absolute',\n    top: 0,\n    width: '100%',\n  },\n  image: {\n    height: '100%',\n    width: '100%',\n  },\n  notice: {\n    bottom: 0,\n    columnGap: 6,\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    paddingBottom: 6,\n    paddingHorizontal: 12,\n    paddingTop: 2,\n    position: 'absolute',\n    width: '100%',\n  },\n  noticeIcon: {\n    marginTop: 4,\n  },\n  noticeText: {\n    marginVertical: 5,\n  },\n  noticeTextWrapper: {\n    flex: 1,\n  },\n});\n\nexport default CredentialCard;\n"],"mappings":"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"}

package/lib/commonjs/credential/card/credential-details-card.js

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _buttons = require("../../buttons");
+var _credential = require("../../icons/credential");
+var _colorSchemeContext = require("../../theme/color-scheme-context");
+var _testID = require("../../utils/testID");
+var _credentialAttributeItem = _interopRequireDefault(require("../credential-attribute-item"));
+var _credentialCard = _interopRequireDefault(require("./credential-card"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const PREVIEW_ATTRIBUTES_COUNT = 3;
+const CredentialDetailsCard = _ref => {
+  var _header$accessory;
+  let {
+    animate = true,
+    attributes,
+    card,
+    expanded,
+    footer,
+    onImagePreview,
+    onAttributeSelected,
+    style,
+    testID,
+    showAllButtonLabel,
+    ...viewProps
+  } = _ref;
+  const colorScheme = (0, _colorSchemeContext.useAppColorScheme)();
+  const [previewAttributesHeight, setPreviewAttributesHeight] = (0, _react.useState)();
+  const [fullAttributesHeight, setFullAttributesHeight] = (0, _react.useState)();
+  const [buttonViewHeight, setButtonViewHeight] = (0, _react.useState)();
+  const [allAttributesRendered, setAllAttributesRendered] = (0, _react.useState)(attributes && attributes.length <= PREVIEW_ATTRIBUTES_COUNT || !showAllButtonLabel);
+  const CaretIcon = expanded ? _credential.UpIcon : _credential.DownIcon;
+  const currentHeight = (0, _reactNativeReanimated.useSharedValue)(undefined);
+  const previewAttributes = attributes ? attributes.slice(0, PREVIEW_ATTRIBUTES_COUNT) : [];
+  const extraAttributes = (0, _react.useMemo)(() => attributes ? attributes.slice(PREVIEW_ATTRIBUTES_COUNT) : [], [attributes]);
+  (0, _react.useEffect)(() => {
+    if (!extraAttributes || allAttributesRendered) {
+      setButtonViewHeight(0);
+    }
+  }, [extraAttributes, allAttributesRendered]);
+  (0, _react.useEffect)(() => {
+    if (extraAttributes.length === 0) {
+      const viewStyle = _reactNative.StyleSheet.flatten([styles.allAttributesWrapper, footer && styles.allAttributesWrapperWithFooter]);
+      const padding = viewStyle.paddingBottom;
+      setFullAttributesHeight(padding);
+    }
+  }, [extraAttributes, footer]);
+  (0, _react.useEffect)(() => {
+    if (previewAttributesHeight === undefined || buttonViewHeight === undefined) {
+      return;
+    }
+    if (allAttributesRendered && fullAttributesHeight === undefined) {
+      return;
+    }
+    const additionalAttributesHeight = fullAttributesHeight !== null && fullAttributesHeight !== void 0 ? fullAttributesHeight : 0;
+    const additionalHeight = allAttributesRendered ? additionalAttributesHeight : buttonViewHeight;
+    const newHeight = expanded ? previewAttributesHeight + additionalHeight : 0;
+    if (currentHeight.value === undefined || !animate) {
+      currentHeight.value = newHeight;
+      return;
+    }
+    const duration = !expanded ? 250 : allAttributesRendered ? previewAttributes.length * 50 : extraAttributes.length * 50;
+    currentHeight.value = (0, _reactNativeReanimated.withTiming)(newHeight, {
+      duration
+    });
+  }, [allAttributesRendered, buttonViewHeight, currentHeight, animate, expanded, extraAttributes.length, fullAttributesHeight, previewAttributes.length, previewAttributesHeight]);
+  const credentialAttributesStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    if (currentHeight.value === undefined) {
+      if (expanded) {
+        return {};
+      }
+      return {
+        height: 0
+      };
+    }
+    return {
+      height: currentHeight.value
+    };
+  });
+  const onPreviewAttrContentLayout = (0, _react.useCallback)(event => {
+    setPreviewAttributesHeight(event.nativeEvent.layout.height);
+  }, []);
+  const onFullAttrContentLayout = (0, _react.useCallback)(event => {
+    setFullAttributesHeight(event.nativeEvent.layout.height);
+  }, []);
+  const onButtonViewLayout = (0, _react.useCallback)(event => {
+    setButtonViewHeight(event.nativeEvent.layout.height);
+  }, []);
+  const footerView = (0, _react.useMemo)(() => {
+    if (!footer) {
+      return undefined;
+    }
+    if ( /*#__PURE__*/_react.default.isValidElement(footer)) {
+      return footer;
+    } else {
+      const FooterComponent = footer;
+      return /*#__PURE__*/_react.default.createElement(FooterComponent, null);
+    }
+  }, [footer]);
+  const {
+    header,
+    ...cardProps
+  } = card;
+  const renderExtraAttributes = allAttributesRendered || previewAttributesHeight !== undefined && currentHeight.value !== undefined;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
+    style: [styles.detailsCard, {
+      backgroundColor: colorScheme.white
+    }, style],
+    testID: testID
+  }, viewProps), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    testID: (0, _testID.concatTestID)(testID, expanded ? 'expanded' : 'collapsed')
+  }, /*#__PURE__*/_react.default.createElement(_credentialCard.default, _extends({}, cardProps, {
+    header: {
+      ...header,
+      accessory: (_header$accessory = header.accessory) !== null && _header$accessory !== void 0 ? _header$accessory : CaretIcon
+    },
+    style: [styles.card, cardProps.style],
+    testID: (0, _testID.concatTestID)(testID, 'card')
+  })), previewAttributes.length > 0 && /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: [styles.attributesAnimatedWrapper, credentialAttributesStyle]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.attributesWrapper
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    onLayout: onPreviewAttrContentLayout,
+    style: styles.previewAttributesWrapper
+  }, previewAttributes.map((attribute, idx) => /*#__PURE__*/_react.default.createElement(_credentialAttributeItem.default, _extends({
+    key: attribute.id,
+    last: !footerView && !extraAttributes.length && idx === previewAttributes.length - 1,
+    testID: (0, _testID.concatTestID)(testID, 'attribute', attribute.id),
+    onImagePreview: onImagePreview,
+    onPress: onAttributeSelected
+  }, attribute)))), !allAttributesRendered && extraAttributes.length > 0 && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.allAttributesWrapper,
+    onLayout: onButtonViewLayout
+  }, /*#__PURE__*/_react.default.createElement(_buttons.Button, {
+    onPress: () => setAllAttributesRendered(true),
+    type: _buttons.ButtonType.Secondary,
+    testID: (0, _testID.concatTestID)(testID, 'showAllAttributesButton'),
+    title: showAllButtonLabel
+  })), renderExtraAttributes && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.allAttributesWrapper, footerView && styles.allAttributesWrapperWithFooter],
+    onLayout: onFullAttrContentLayout
+  }, extraAttributes.map((attribute, index, _ref2) => {
+    let {
+      length
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_credentialAttributeItem.default, _extends({
+      key: attribute.id,
+      last: !footerView && index === length - 1,
+      testID: (0, _testID.concatTestID)(testID, 'attribute', attribute.id),
+      onImagePreview: onImagePreview,
+      onPress: onAttributeSelected
+    }, attribute));
+  })))), footerView ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.footer
+  }, footerView) : null));
+};
+const styles = _reactNative.StyleSheet.create({
+  allAttributesWrapper: {
+    paddingBottom: 12,
+    paddingHorizontal: 4,
+    width: '100%'
+  },
+  allAttributesWrapperWithFooter: {
+    paddingBottom: 0
+  },
+  attributesAnimatedWrapper: {
+    overflow: 'hidden'
+  },
+  attributesWrapper: {
+    paddingTop: 7,
+    position: 'absolute',
+    width: '100%'
+  },
+  card: {
+    borderRadius: 0
+  },
+  detailsCard: {
+    borderRadius: 10,
+    overflow: 'hidden'
+  },
+  footer: {
+    marginTop: 12
+  },
+  previewAttributesWrapper: {
+    paddingHorizontal: 4,
+    width: '100%'
+  }
+});
+var _default = CredentialDetailsCard;
+exports.default = _default;
+//# sourceMappingURL=credential-details-card.js.map

package/lib/commonjs/credential/card/credential-details-card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_buttons","_credential","_colorSchemeContext","_testID","_credentialAttributeItem","_interopRequireDefault","_credentialCard","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","PREVIEW_ATTRIBUTES_COUNT","CredentialDetailsCard","_ref","_header$accessory","animate","attributes","card","expanded","footer","onImagePreview","onAttributeSelected","style","testID","showAllButtonLabel","viewProps","colorScheme","useAppColorScheme","previewAttributesHeight","setPreviewAttributesHeight","useState","fullAttributesHeight","setFullAttributesHeight","buttonViewHeight","setButtonViewHeight","allAttributesRendered","setAllAttributesRendered","CaretIcon","UpIcon","DownIcon","currentHeight","useSharedValue","undefined","previewAttributes","slice","extraAttributes","useMemo","useEffect","viewStyle","StyleSheet","flatten","styles","allAttributesWrapper","allAttributesWrapperWithFooter","padding","paddingBottom","additionalAttributesHeight","additionalHeight","newHeight","value","duration","withTiming","credentialAttributesStyle","useAnimatedStyle","height","onPreviewAttrContentLayout","useCallback","event","nativeEvent","layout","onFullAttrContentLayout","onButtonViewLayout","footerView","React","isValidElement","FooterComponent","createElement","header","cardProps","renderExtraAttributes","View","detailsCard","backgroundColor","white","concatTestID","accessory","attributesAnimatedWrapper","attributesWrapper","onLayout","previewAttributesWrapper","map","attribute","idx","id","last","onPress","Button","type","ButtonType","Secondary","title","index","_ref2","create","paddingHorizontal","width","overflow","paddingTop","position","borderRadius","marginTop","_default","exports"],"sources":["credential-details-card.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport { ImageSourcePropType, LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\n\nimport { Button, ButtonType } from '../../buttons';\nimport { DownIcon, UpIcon } from '../../icons/credential';\nimport { useAppColorScheme } from '../../theme/color-scheme-context';\nimport { concatTestID } from '../../utils/testID';\nimport CredentialAttributeItem, { CredentialAttribute } from '../credential-attribute-item';\nimport CredentialCard, { CredentialCardProps } from './credential-card';\n\nexport type CredentialDetailsCardProps = ViewProps & {\n  animate?: boolean;\n  attributes: CredentialAttribute[] | false;\n  card: CredentialCardProps;\n  expanded?: boolean;\n  footer?: ComponentType<any> | ReactElement;\n  onImagePreview?: (name: string, image: ImageSourcePropType) => void;\n  onAttributeSelected?: (id: string, selected: boolean) => void;\n  showAllButtonLabel?: string;\n};\n\nconst PREVIEW_ATTRIBUTES_COUNT = 3;\n\nconst CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({\n  animate = true,\n  attributes,\n  card,\n  expanded,\n  footer,\n  onImagePreview,\n  onAttributeSelected,\n  style,\n  testID,\n  showAllButtonLabel,\n  ...viewProps\n}) => {\n  const colorScheme = useAppColorScheme();\n  const [previewAttributesHeight, setPreviewAttributesHeight] = useState<number>();\n  const [fullAttributesHeight, setFullAttributesHeight] = useState<number>();\n  const [buttonViewHeight, setButtonViewHeight] = useState<number>();\n\n  const [allAttributesRendered, setAllAttributesRendered] = useState<boolean>(\n    (attributes && attributes.length <= PREVIEW_ATTRIBUTES_COUNT) || !showAllButtonLabel,\n  );\n\n  const CaretIcon = expanded ? UpIcon : DownIcon;\n\n  const currentHeight = useSharedValue<number | undefined>(undefined);\n\n  const previewAttributes = attributes ? attributes.slice(0, PREVIEW_ATTRIBUTES_COUNT) : [];\n  const extraAttributes = useMemo(() => (attributes ? attributes.slice(PREVIEW_ATTRIBUTES_COUNT) : []), [attributes]);\n\n  useEffect(() => {\n    if (!extraAttributes || allAttributesRendered) {\n      setButtonViewHeight(0);\n    }\n  }, [extraAttributes, allAttributesRendered]);\n\n  useEffect(() => {\n    if (extraAttributes.length === 0) {\n      const viewStyle = StyleSheet.flatten([\n        styles.allAttributesWrapper,\n        footer && styles.allAttributesWrapperWithFooter,\n      ]);\n      const padding = viewStyle.paddingBottom;\n      setFullAttributesHeight(padding);\n    }\n  }, [extraAttributes, footer]);\n\n  useEffect(() => {\n    if (previewAttributesHeight === undefined || buttonViewHeight === undefined) {\n      return;\n    }\n    if (allAttributesRendered && fullAttributesHeight === undefined) {\n      return;\n    }\n\n    const additionalAttributesHeight = fullAttributesHeight ?? 0;\n    const additionalHeight = allAttributesRendered ? additionalAttributesHeight : buttonViewHeight;\n    const newHeight = expanded ? previewAttributesHeight + additionalHeight : 0;\n\n    if (currentHeight.value === undefined || !animate) {\n      currentHeight.value = newHeight;\n      return;\n    }\n\n    const duration = !expanded\n      ? 250\n      : allAttributesRendered\n      ? previewAttributes.length * 50\n      : extraAttributes.length * 50;\n    currentHeight.value = withTiming(newHeight, {\n      duration,\n    });\n  }, [\n    allAttributesRendered,\n    buttonViewHeight,\n    currentHeight,\n    animate,\n    expanded,\n    extraAttributes.length,\n    fullAttributesHeight,\n    previewAttributes.length,\n    previewAttributesHeight,\n  ]);\n\n  const credentialAttributesStyle = useAnimatedStyle(() => {\n    if (currentHeight.value === undefined) {\n      if (expanded) {\n        return {};\n      }\n      return {\n        height: 0,\n      };\n    }\n    return {\n      height: currentHeight.value,\n    };\n  });\n\n  const onPreviewAttrContentLayout = useCallback((event: LayoutChangeEvent) => {\n    setPreviewAttributesHeight(event.nativeEvent.layout.height);\n  }, []);\n\n  const onFullAttrContentLayout = useCallback((event: LayoutChangeEvent) => {\n    setFullAttributesHeight(event.nativeEvent.layout.height);\n  }, []);\n\n  const onButtonViewLayout = useCallback((event: LayoutChangeEvent) => {\n    setButtonViewHeight(event.nativeEvent.layout.height);\n  }, []);\n\n  const footerView: ReactElement | undefined = useMemo(() => {\n    if (!footer) {\n      return undefined;\n    }\n    if (React.isValidElement(footer)) {\n      return footer;\n    } else {\n      const FooterComponent = footer as React.ComponentType<any>;\n      return <FooterComponent />;\n    }\n  }, [footer]);\n\n  const { header, ...cardProps } = card;\n\n  const renderExtraAttributes =\n    allAttributesRendered || (previewAttributesHeight !== undefined && currentHeight.value !== undefined);\n  return (\n    <View style={[styles.detailsCard, { backgroundColor: colorScheme.white }, style]} testID={testID} {...viewProps}>\n      <View testID={concatTestID(testID, expanded ? 'expanded' : 'collapsed')}>\n        <CredentialCard\n          {...cardProps}\n          header={{ ...header, accessory: header.accessory ?? CaretIcon }}\n          style={[styles.card, cardProps.style]}\n          testID={concatTestID(testID, 'card')}\n        />\n        {previewAttributes.length > 0 && (\n          <Animated.View style={[styles.attributesAnimatedWrapper, credentialAttributesStyle]}>\n            <View style={styles.attributesWrapper}>\n              <View onLayout={onPreviewAttrContentLayout} style={styles.previewAttributesWrapper}>\n                {previewAttributes.map((attribute, idx) => (\n                  <CredentialAttributeItem\n                    key={attribute.id}\n                    last={!footerView && !extraAttributes.length && idx === previewAttributes.length - 1}\n                    testID={concatTestID(testID, 'attribute', attribute.id)}\n                    onImagePreview={onImagePreview}\n                    onPress={onAttributeSelected}\n                    {...attribute}\n                  />\n                ))}\n              </View>\n              {!allAttributesRendered && extraAttributes.length > 0 && (\n                <View style={styles.allAttributesWrapper} onLayout={onButtonViewLayout}>\n                  <Button\n                    onPress={() => setAllAttributesRendered(true)}\n                    type={ButtonType.Secondary}\n                    testID={concatTestID(testID, 'showAllAttributesButton')}\n                    title={showAllButtonLabel!}\n                  />\n                </View>\n              )}\n              {renderExtraAttributes && (\n                <View\n                  style={[styles.allAttributesWrapper, footerView && styles.allAttributesWrapperWithFooter]}\n                  onLayout={onFullAttrContentLayout}>\n                  {extraAttributes.map((attribute, index, { length }) => (\n                    <CredentialAttributeItem\n                      key={attribute.id}\n                      last={!footerView && index === length - 1}\n                      testID={concatTestID(testID, 'attribute', attribute.id)}\n                      onImagePreview={onImagePreview}\n                      onPress={onAttributeSelected}\n                      {...attribute}\n                    />\n                  ))}\n                </View>\n              )}\n            </View>\n          </Animated.View>\n        )}\n        {footerView ? <View style={styles.footer}>{footerView}</View> : null}\n      </View>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  allAttributesWrapper: {\n    paddingBottom: 12,\n    paddingHorizontal: 4,\n    width: '100%',\n  },\n  allAttributesWrapperWithFooter: {\n    paddingBottom: 0,\n  },\n  attributesAnimatedWrapper: {\n    overflow: 'hidden',\n  },\n  attributesWrapper: {\n    paddingTop: 7,\n    position: 'absolute',\n    width: '100%',\n  },\n  card: {\n    borderRadius: 0,\n  },\n  detailsCard: {\n    borderRadius: 10,\n    overflow: 'hidden',\n  },\n  footer: {\n    marginTop: 12,\n  },\n  previewAttributesWrapper: {\n    paddingHorizontal: 4,\n    width: '100%',\n  },\n});\n\nexport default CredentialDetailsCard;\n"],"mappings":"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"}

package/lib/commonjs/credential/card/credential-details-list-item.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _credentialCard = require("./credential-card");
+var _credentialDetailsCard = _interopRequireDefault(require("./credential-details-card"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const CredentialDetailsCardListItem = _ref => {
+  let {
+    detailsCardStyle,
+    expanded,
+    lastItem,
+    style,
+    ...props
+  } = _ref;
+  const [minHeight, setMinHeight] = (0, _react.useState)();
+  const [detailsCardHeight, setDetailsCardHeight] = (0, _react.useState)();
+  const cardListItemHeight = (0, _reactNativeReanimated.useSharedValue)(undefined);
+  (0, _react.useEffect)(() => {
+    if (!detailsCardHeight || !minHeight) {
+      return;
+    }
+    const newValue = expanded ? detailsCardHeight : minHeight;
+    if (cardListItemHeight.value === undefined) {
+      cardListItemHeight.value = newValue;
+      return;
+    }
+    cardListItemHeight.value = (0, _reactNativeReanimated.withTiming)(newValue, {
+      duration: 250
+    });
+  }, [cardListItemHeight, detailsCardHeight, minHeight, expanded]);
+  const cardWrapperStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    if (cardListItemHeight.value !== undefined) {
+      return {
+        height: cardListItemHeight.value
+      };
+    }
+    if (lastItem || expanded) {
+      return {};
+    }
+    return {
+      height: 60
+    };
+  });
+  const onContentLayout = (0, _react.useCallback)(event => {
+    var _StyleSheet$flatten$b, _StyleSheet$flatten;
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    if (!minHeight) {
+      setMinHeight(lastItem ? width / _credentialCard.CredentialCardRatio : 60);
+    }
+    const borderWidth = (_StyleSheet$flatten$b = (_StyleSheet$flatten = _reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.borderWidth) !== null && _StyleSheet$flatten$b !== void 0 ? _StyleSheet$flatten$b : 0;
+    setDetailsCardHeight(height + 2 * borderWidth);
+  }, [lastItem, minHeight, style]);
+  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: [cardWrapperStyle, style]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.cardWrapper
+  }, /*#__PURE__*/_react.default.createElement(_credentialDetailsCard.default, _extends({
+    animate: false,
+    expanded: expanded,
+    onLayout: onContentLayout,
+    style: detailsCardStyle
+  }, props))));
+};
+const styles = _reactNative.StyleSheet.create({
+  cardWrapper: {
+    ..._credentialCard.CredentialCardShadow,
+    overflow: 'visible'
+  }
+});
+var _default = CredentialDetailsCardListItem;
+exports.default = _default;
+//# sourceMappingURL=credential-details-list-item.js.map

package/lib/commonjs/credential/card/credential-details-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_credentialCard","_credentialDetailsCard","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","CredentialDetailsCardListItem","_ref","detailsCardStyle","expanded","lastItem","style","props","minHeight","setMinHeight","useState","detailsCardHeight","setDetailsCardHeight","cardListItemHeight","useSharedValue","undefined","useEffect","newValue","value","withTiming","duration","cardWrapperStyle","useAnimatedStyle","height","onContentLayout","useCallback","event","_StyleSheet$flatten$b","_StyleSheet$flatten","width","nativeEvent","layout","CredentialCardRatio","borderWidth","StyleSheet","flatten","createElement","View","styles","cardWrapper","animate","onLayout","create","CredentialCardShadow","overflow","_default","exports"],"sources":["credential-details-list-item.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useState } from 'react';\nimport { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\n\nimport { CredentialCardRatio, CredentialCardShadow } from './credential-card';\nimport CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';\n\nexport type CredentialDetailsCardListItemProps = Omit<CredentialDetailsCardProps, 'animate'> & {\n  detailsCardStyle?: StyleProp<ViewStyle>;\n  lastItem?: boolean;\n};\n\nconst CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({\n  detailsCardStyle,\n  expanded,\n  lastItem,\n  style,\n  ...props\n}) => {\n  const [minHeight, setMinHeight] = useState<number>();\n  const [detailsCardHeight, setDetailsCardHeight] = useState<number>();\n\n  const cardListItemHeight = useSharedValue<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (!detailsCardHeight || !minHeight) {\n      return;\n    }\n    const newValue = expanded ? detailsCardHeight : minHeight;\n    if (cardListItemHeight.value === undefined) {\n      cardListItemHeight.value = newValue;\n      return;\n    }\n    cardListItemHeight.value = withTiming(newValue, {\n      duration: 250,\n    });\n  }, [cardListItemHeight, detailsCardHeight, minHeight, expanded]);\n\n  const cardWrapperStyle = useAnimatedStyle(() => {\n    if (cardListItemHeight.value !== undefined) {\n      return {\n        height: cardListItemHeight.value,\n      };\n    }\n    if (lastItem || expanded) {\n      return {};\n    }\n    return {\n      height: 60,\n    };\n  });\n\n  const onContentLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      const { width, height } = event.nativeEvent.layout;\n      if (!minHeight) {\n        setMinHeight(lastItem ? width / CredentialCardRatio : 60);\n      }\n      const borderWidth = StyleSheet.flatten(style)?.borderWidth ?? 0;\n      setDetailsCardHeight(height + 2 * borderWidth);\n    },\n    [lastItem, minHeight, style],\n  );\n\n  return (\n    <Animated.View style={[cardWrapperStyle, style]}>\n      <View style={styles.cardWrapper}>\n        <CredentialDetailsCard\n          animate={false}\n          expanded={expanded}\n          onLayout={onContentLayout}\n          style={detailsCardStyle}\n          {...props}\n        />\n      </View>\n    </Animated.View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  cardWrapper: {\n    ...CredentialCardShadow,\n    overflow: 'visible',\n  },\n});\n\nexport default CredentialDetailsCardListItem;\n"],"mappings":"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"}