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

package/lib/module/ui-components/credential/card/credential-card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","useState","Image","StyleSheet","View","concatTestID","TouchableOpacity","BlurView","ImageOrComponent","Typography","useAppColorScheme","CredentialHeader","CarouselComponent","CredentialCardShadow","shadowColor","shadowOffset","height","width","shadowOpacity","shadowRadius","CredentialCardRatio","CredentialCard","_ref","_header$color","cardCarouselImages","cardImage","color","credentialId","header","notice","onCardPress","onHeaderPress","style","testID","colorScheme","tappableHeaderHeight","setTappableHeaderHeight","cardSize","setCardSize","onCardLayoutChange","event","nativeEvent","layout","onHeaderLayoutChange","headerPressHandler","cardPressHandler","noticeIconView","noticeIcon","undefined","isValidElement","NoticeIconComponent","createElement","shouldShowCarousel","onLayout","styles","card","source","imageSource","image","String","backgroundColor","cardButton","onPress","marginTop","imagesToRender","carouselSize","activeOpacity","disabled","_extends","blurStyle","noticeTextWrapper","text","preset","noticeText","create","borderRadius","overflow","position","aspectRatio","top","bottom","columnGap","flexDirection","justifyContent","paddingBottom","paddingHorizontal","paddingTop","marginVertical","flex"],"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 { concatTestID } from '../../../utils/testID';\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 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 CredentialCardNotice = {\n  text: string;\n  noticeIcon?: React.ComponentType<any> | React.ReactElement;\n};\n\nexport type CredentialCardProps = {\n  cardCarouselImages?: CarouselImage[];\n  cardImage?: ImageOrComponentSource;\n  color?: ColorValue;\n  credentialId?: string;\n  header: CredentialHeaderProps;\n  notice?: CredentialCardNotice;\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  onCardPress,\n  onHeaderPress,\n  style,\n  testID,\n}) => {\n  const colorScheme = useAppColorScheme();\n  const [tappableHeaderHeight, setTappableHeaderHeight] = 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 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 (!notice?.noticeIcon) {\n      return undefined;\n    }\n    if (React.isValidElement(notice.noticeIcon)) {\n      return notice.noticeIcon;\n    } else {\n      const NoticeIconComponent = notice.noticeIcon as React.ComponentType<any>;\n      return <NoticeIconComponent />;\n    }\n  }, [notice?.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),\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 blurStyle=\"soft\" style={[styles.notice]} 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.text}\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/module/ui-components/credential/card/credential-details-card.js

@@ -0,0 +1,189 @@
+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); }
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { concatTestID } from '../../../utils/testID';
+import { Button, ButtonType } from '../../buttons';
+import { DownIcon, UpIcon } from '../../icons/credential';
+import { useAppColorScheme } from '../../theme/color-scheme-context';
+import CredentialAttributeItem from '../credential-attribute-item';
+import CredentialCard from './credential-card';
+const PREVIEW_ATTRIBUTES_COUNT = 3;
+const CredentialDetailsCard = _ref => {
+  var _header$accessory;
+  let {
+    animate = true,
+    attributes,
+    card,
+    expanded,
+    footer,
+    onImagePreview,
+    onAttributeSelected,
+    style,
+    showAllButtonLabel,
+    testID,
+    ...viewProps
+  } = _ref;
+  const colorScheme = useAppColorScheme();
+  const [previewAttributesHeight, setPreviewAttributesHeight] = useState();
+  const [fullAttributesHeight, setFullAttributesHeight] = useState();
+  const [buttonViewHeight, setButtonViewHeight] = useState();
+  const [allAttributesRendered, setAllAttributesRendered] = useState(attributes && attributes.length <= PREVIEW_ATTRIBUTES_COUNT || !showAllButtonLabel);
+  const CaretIcon = expanded ? UpIcon : DownIcon;
+  const currentHeight = useSharedValue(undefined);
+  const previewAttributes = attributes ? attributes.slice(0, PREVIEW_ATTRIBUTES_COUNT) : [];
+  const extraAttributes = useMemo(() => attributes ? attributes.slice(PREVIEW_ATTRIBUTES_COUNT) : [], [attributes]);
+  useEffect(() => {
+    if (!extraAttributes || allAttributesRendered) {
+      setButtonViewHeight(0);
+    }
+  }, [extraAttributes, allAttributesRendered]);
+  useEffect(() => {
+    if (extraAttributes.length === 0) {
+      const viewStyle = StyleSheet.flatten([styles.allAttributesWrapper, footer && styles.allAttributesWrapperWithFooter]);
+      const padding = viewStyle.paddingBottom;
+      setFullAttributesHeight(padding);
+    }
+  }, [extraAttributes, footer]);
+  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 = withTiming(newHeight, {
+      duration
+    });
+  }, [allAttributesRendered, buttonViewHeight, currentHeight, animate, expanded, extraAttributes.length, fullAttributesHeight, previewAttributes.length, previewAttributesHeight]);
+  const credentialAttributesStyle = useAnimatedStyle(() => {
+    if (currentHeight.value === undefined) {
+      if (expanded) {
+        return {};
+      }
+      return {
+        height: 0
+      };
+    }
+    return {
+      height: currentHeight.value
+    };
+  });
+  const onPreviewAttrContentLayout = useCallback(event => {
+    setPreviewAttributesHeight(event.nativeEvent.layout.height);
+  }, []);
+  const onFullAttrContentLayout = useCallback(event => {
+    setFullAttributesHeight(event.nativeEvent.layout.height);
+  }, []);
+  const onButtonViewLayout = useCallback(event => {
+    setButtonViewHeight(event.nativeEvent.layout.height);
+  }, []);
+  const footerView = useMemo(() => {
+    if (!footer) {
+      return undefined;
+    }
+    if ( /*#__PURE__*/React.isValidElement(footer)) {
+      return footer;
+    } else {
+      const FooterComponent = footer;
+      return /*#__PURE__*/React.createElement(FooterComponent, null);
+    }
+  }, [footer]);
+  const {
+    header,
+    ...cardProps
+  } = card;
+  const renderExtraAttributes = allAttributesRendered || previewAttributesHeight !== undefined && currentHeight.value !== undefined;
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [styles.detailsCard, {
+      backgroundColor: colorScheme.white
+    }, style]
+  }, viewProps, {
+    testID: concatTestID(card.testID, expanded ? 'expanded' : 'collapsed')
+  }), /*#__PURE__*/React.createElement(CredentialCard, _extends({}, cardProps, {
+    header: {
+      ...header,
+      accessory: (_header$accessory = header.accessory) !== null && _header$accessory !== void 0 ? _header$accessory : CaretIcon
+    },
+    style: [styles.card, cardProps.style]
+  })), previewAttributes.length > 0 && /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.attributesAnimatedWrapper, credentialAttributesStyle]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.attributesWrapper
+  }, /*#__PURE__*/React.createElement(View, {
+    onLayout: onPreviewAttrContentLayout,
+    style: styles.previewAttributesWrapper
+  }, previewAttributes.map((attribute, idx) => /*#__PURE__*/React.createElement(CredentialAttributeItem, _extends({
+    key: attribute.id,
+    last: !footerView && !extraAttributes.length && idx === previewAttributes.length - 1,
+    testID: concatTestID(testID, 'attribute', idx.toString()),
+    onImagePreview: onImagePreview,
+    onPress: onAttributeSelected
+  }, attribute)))), !allAttributesRendered && extraAttributes.length > 0 && /*#__PURE__*/React.createElement(View, {
+    style: styles.allAttributesWrapper,
+    onLayout: onButtonViewLayout
+  }, /*#__PURE__*/React.createElement(Button, {
+    onPress: () => setAllAttributesRendered(true),
+    type: ButtonType.Secondary,
+    testID: concatTestID(testID, 'showAllAttributesButton'),
+    title: showAllButtonLabel
+  })), renderExtraAttributes && /*#__PURE__*/React.createElement(View, {
+    style: [styles.allAttributesWrapper, footerView && styles.allAttributesWrapperWithFooter],
+    onLayout: onFullAttrContentLayout
+  }, extraAttributes.map((attribute, index, _ref2) => {
+    let {
+      length
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(CredentialAttributeItem, _extends({
+      key: attribute.id,
+      last: !footerView && index === length - 1,
+      testID: concatTestID(testID, 'attribute', index.toString()),
+      onImagePreview: onImagePreview,
+      onPress: onAttributeSelected
+    }, attribute));
+  })))), footerView ? /*#__PURE__*/React.createElement(View, {
+    style: styles.footer
+  }, footerView) : null);
+};
+const styles = 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%'
+  }
+});
+export default CredentialDetailsCard;
+//# sourceMappingURL=credential-details-card.js.map

package/lib/module/ui-components/credential/card/credential-details-card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","StyleSheet","View","Animated","useAnimatedStyle","useSharedValue","withTiming","concatTestID","Button","ButtonType","DownIcon","UpIcon","useAppColorScheme","CredentialAttributeItem","CredentialCard","PREVIEW_ATTRIBUTES_COUNT","CredentialDetailsCard","_ref","_header$accessory","animate","attributes","card","expanded","footer","onImagePreview","onAttributeSelected","style","showAllButtonLabel","testID","viewProps","colorScheme","previewAttributesHeight","setPreviewAttributesHeight","fullAttributesHeight","setFullAttributesHeight","buttonViewHeight","setButtonViewHeight","allAttributesRendered","setAllAttributesRendered","length","CaretIcon","currentHeight","undefined","previewAttributes","slice","extraAttributes","viewStyle","flatten","styles","allAttributesWrapper","allAttributesWrapperWithFooter","padding","paddingBottom","additionalAttributesHeight","additionalHeight","newHeight","value","duration","credentialAttributesStyle","height","onPreviewAttrContentLayout","event","nativeEvent","layout","onFullAttrContentLayout","onButtonViewLayout","footerView","isValidElement","FooterComponent","createElement","header","cardProps","renderExtraAttributes","_extends","detailsCard","backgroundColor","white","accessory","attributesAnimatedWrapper","attributesWrapper","onLayout","previewAttributesWrapper","map","attribute","idx","key","id","last","toString","onPress","type","Secondary","title","index","_ref2","create","paddingHorizontal","width","overflow","paddingTop","position","borderRadius","marginTop"],"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 { concatTestID } from '../../../utils/testID';\nimport { Button, ButtonType } from '../../buttons';\nimport { DownIcon, UpIcon } from '../../icons/credential';\nimport { useAppColorScheme } from '../../theme/color-scheme-context';\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  showAllButtonLabel,\n  testID,\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\n      style={[styles.detailsCard, { backgroundColor: colorScheme.white }, style]}\n      {...viewProps}\n      testID={concatTestID(card.testID, expanded ? 'expanded' : 'collapsed')}>\n      <CredentialCard\n        {...cardProps}\n        header={{ ...header, accessory: header.accessory ?? CaretIcon }}\n        style={[styles.card, cardProps.style]}\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', idx.toString())}\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', index.toString())}\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  );\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/module/ui-components/credential/card/credential-header.js

@@ -0,0 +1,163 @@
+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); }
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { concatTestID } from '../../../utils/testID';
+import BlurView from '../../blur/blur-view';
+import ImageOrComponent from '../../image/image-or-component';
+import Typography from '../../text/typography';
+import { useAppColorScheme } from '../../theme/color-scheme-context';
+const CredentialHeader = _ref => {
+  let {
+    accessory,
+    blur = true,
+    color = '#5A69F3',
+    credentialDetailPrimary,
+    credentialDetailSecondary,
+    credentialDetailTestID,
+    credentialDetailErrorColor,
+    credentialName,
+    icon,
+    iconLabelColor = '#FFFFFF',
+    statusIcon,
+    style,
+    testID
+  } = _ref;
+  const colorScheme = useAppColorScheme();
+  const statusIconView = useMemo(() => {
+    if (!statusIcon) {
+      return undefined;
+    }
+    if ( /*#__PURE__*/React.isValidElement(statusIcon)) {
+      return statusIcon;
+    } else {
+      const StatusIconComponent = statusIcon;
+      return /*#__PURE__*/React.createElement(StatusIconComponent, null);
+    }
+  }, [statusIcon]);
+  const accessoryView = useMemo(() => {
+    if (!accessory) {
+      return undefined;
+    }
+    if ( /*#__PURE__*/React.isValidElement(accessory)) {
+      return accessory;
+    } else {
+      const AccessoryComponent = accessory;
+      return /*#__PURE__*/React.createElement(AccessoryComponent, null);
+    }
+  }, [accessory]);
+  const DetailText = useMemo(() => {
+    const commonProps = {
+      color: credentialDetailErrorColor ? colorScheme.error : colorScheme.text,
+      ellipsizeMode: 'tail',
+      numberOfLines: 1,
+      preset: 'xs',
+      style: styles.detailText
+    };
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.detailTextContainer
+    }, /*#__PURE__*/React.createElement(Typography, _extends({}, commonProps, {
+      testID: credentialDetailTestID !== null && credentialDetailTestID !== void 0 ? credentialDetailTestID : concatTestID(testID, 'primaryDetail')
+    }), credentialDetailPrimary), credentialDetailSecondary ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, _extends({}, commonProps, {
+      style: styles.interpunct
+    }), '·'), /*#__PURE__*/React.createElement(Typography, _extends({}, commonProps, {
+      testID: concatTestID(testID, 'secondaryDetail')
+    }), credentialDetailSecondary)) : null);
+  }, [credentialDetailPrimary, credentialDetailSecondary, colorScheme, testID, credentialDetailErrorColor, credentialDetailTestID]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: blur ? undefined : colorScheme.white
+    }, style],
+    testID: testID
+  }, blur && /*#__PURE__*/React.createElement(BlurView, {
+    blurStyle: "strong",
+    style: StyleSheet.absoluteFill
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.imageContainer, {
+      backgroundColor: color
+    }]
+  }, icon ? /*#__PURE__*/React.createElement(ImageOrComponent, {
+    testID: concatTestID(testID, 'logoIcon'),
+    source: icon,
+    style: styles.image
+  }) : /*#__PURE__*/React.createElement(View, {
+    testID: concatTestID(testID, 'logoBackgroundColor', String(color))
+  }, /*#__PURE__*/React.createElement(View, {
+    testID: concatTestID(testID, 'logoTextColor', String(iconLabelColor))
+  }, /*#__PURE__*/React.createElement(Typography, {
+    testID: concatTestID(testID, 'logoName'),
+    color: iconLabelColor,
+    preset: "m",
+    style: styles.imagePlaceholder
+  }, credentialName.substring(0, 1))))), statusIconView && /*#__PURE__*/React.createElement(View, {
+    style: styles.statusIconWrapper
+  }, statusIconView), /*#__PURE__*/React.createElement(View, {
+    style: styles.text
+  }, /*#__PURE__*/React.createElement(Typography, {
+    testID: concatTestID(testID, 'name'),
+    color: colorScheme.text,
+    ellipsizeMode: 'tail',
+    numberOfLines: 1,
+    preset: "regular",
+    style: styles.nameText
+  }, credentialName), DetailText), accessoryView && /*#__PURE__*/React.createElement(View, {
+    style: styles.accessory
+  }, accessoryView));
+};
+const styles = StyleSheet.create({
+  accessory: {
+    alignItems: 'center',
+    height: 44,
+    justifyContent: 'center',
+    width: 44
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 60,
+    padding: 8
+  },
+  detailText: {
+    flex: 1,
+    opacity: 0.7
+  },
+  detailTextContainer: {
+    flexDirection: 'row',
+    marginTop: -1
+  },
+  image: {
+    height: 44,
+    width: 44
+  },
+  imageContainer: {
+    alignItems: 'center',
+    borderRadius: 5,
+    height: 44,
+    justifyContent: 'center',
+    marginRight: 8,
+    overflow: 'hidden',
+    width: 44
+  },
+  imagePlaceholder: {
+    paddingLeft: 1,
+    paddingTop: 3,
+    textTransform: 'uppercase'
+  },
+  interpunct: {
+    marginHorizontal: 12,
+    opacity: 0.5
+  },
+  nameText: {
+    marginTop: 2
+  },
+  statusIconWrapper: {
+    bottom: 3,
+    left: 36,
+    position: 'absolute'
+  },
+  text: {
+    flex: 1,
+    justifyContent: 'center'
+  }
+});
+export default CredentialHeader;
+//# sourceMappingURL=credential-header.js.map

package/lib/module/ui-components/credential/card/credential-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","StyleSheet","View","concatTestID","BlurView","ImageOrComponent","Typography","useAppColorScheme","CredentialHeader","_ref","accessory","blur","color","credentialDetailPrimary","credentialDetailSecondary","credentialDetailTestID","credentialDetailErrorColor","credentialName","icon","iconLabelColor","statusIcon","style","testID","colorScheme","statusIconView","undefined","isValidElement","StatusIconComponent","createElement","accessoryView","AccessoryComponent","DetailText","commonProps","error","text","ellipsizeMode","numberOfLines","preset","styles","detailText","detailTextContainer","_extends","Fragment","interpunct","container","backgroundColor","white","blurStyle","absoluteFill","imageContainer","source","image","String","imagePlaceholder","substring","statusIconWrapper","nameText","create","alignItems","height","justifyContent","width","flexDirection","padding","flex","opacity","marginTop","borderRadius","marginRight","overflow","paddingLeft","paddingTop","textTransform","marginHorizontal","bottom","left","position"],"sources":["credential-header.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { AccessibilityProps, ColorValue, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { concatTestID } from '../../../utils/testID';\nimport BlurView from '../../blur/blur-view';\nimport ImageOrComponent, { ImageOrComponentSource } from '../../image/image-or-component';\nimport Typography, { TypographyProps } from '../../text/typography';\nimport { useAppColorScheme } from '../../theme/color-scheme-context';\n\nexport interface CredentialHeaderProps extends AccessibilityProps {\n  accessory?: React.ComponentType<any> | React.ReactElement;\n  blur?: boolean;\n  color?: ColorValue;\n  credentialDetailPrimary: string;\n  credentialDetailSecondary?: string;\n  credentialDetailTestID?: string;\n  credentialDetailErrorColor?: boolean;\n  credentialName: string;\n  icon?: ImageOrComponentSource;\n  iconLabelColor?: ColorValue;\n  statusIcon?: React.ComponentType<any> | React.ReactElement;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst CredentialHeader: FC<CredentialHeaderProps> = ({\n  accessory,\n  blur = true,\n  color = '#5A69F3',\n  credentialDetailPrimary,\n  credentialDetailSecondary,\n  credentialDetailTestID,\n  credentialDetailErrorColor,\n  credentialName,\n  icon,\n  iconLabelColor = '#FFFFFF',\n  statusIcon,\n  style,\n  testID,\n}) => {\n  const colorScheme = useAppColorScheme();\n\n  const statusIconView: React.ReactElement | undefined = useMemo(() => {\n    if (!statusIcon) {\n      return undefined;\n    }\n    if (React.isValidElement(statusIcon)) {\n      return statusIcon;\n    } else {\n      const StatusIconComponent = statusIcon as React.ComponentType<any>;\n      return <StatusIconComponent />;\n    }\n  }, [statusIcon]);\n\n  const accessoryView: React.ReactElement | undefined = useMemo(() => {\n    if (!accessory) {\n      return undefined;\n    }\n    if (React.isValidElement(accessory)) {\n      return accessory;\n    } else {\n      const AccessoryComponent = accessory as React.ComponentType<any>;\n      return <AccessoryComponent />;\n    }\n  }, [accessory]);\n\n  const DetailText = useMemo(() => {\n    const commonProps: TypographyProps = {\n      color: credentialDetailErrorColor ? colorScheme.error : colorScheme.text,\n      ellipsizeMode: 'tail',\n      numberOfLines: 1,\n      preset: 'xs',\n      style: styles.detailText,\n    };\n    return (\n      <View style={styles.detailTextContainer}>\n        <Typography {...commonProps} testID={credentialDetailTestID ?? concatTestID(testID, 'primaryDetail')}>\n          {credentialDetailPrimary}\n        </Typography>\n        {credentialDetailSecondary ? (\n          <>\n            <Typography {...commonProps} style={styles.interpunct}>\n              {'·'}\n            </Typography>\n            <Typography {...commonProps} testID={concatTestID(testID, 'secondaryDetail')}>\n              {credentialDetailSecondary}\n            </Typography>\n          </>\n        ) : null}\n      </View>\n    );\n  }, [\n    credentialDetailPrimary,\n    credentialDetailSecondary,\n    colorScheme,\n    testID,\n    credentialDetailErrorColor,\n    credentialDetailTestID,\n  ]);\n\n  return (\n    <View style={[styles.container, { backgroundColor: blur ? undefined : colorScheme.white }, style]} testID={testID}>\n      {blur && <BlurView blurStyle=\"strong\" style={StyleSheet.absoluteFill} />}\n      <View style={[styles.imageContainer, { backgroundColor: color }]}>\n        {icon ? (\n          <ImageOrComponent testID={concatTestID(testID, 'logoIcon')} source={icon} style={styles.image} />\n        ) : (\n          <View testID={concatTestID(testID, 'logoBackgroundColor', String(color))}>\n            <View testID={concatTestID(testID, 'logoTextColor', String(iconLabelColor))}>\n              <Typography\n                testID={concatTestID(testID, 'logoName')}\n                color={iconLabelColor}\n                preset=\"m\"\n                style={styles.imagePlaceholder}>\n                {credentialName.substring(0, 1)}\n              </Typography>\n            </View>\n          </View>\n        )}\n      </View>\n      {statusIconView && <View style={styles.statusIconWrapper}>{statusIconView}</View>}\n      <View style={styles.text}>\n        <Typography\n          testID={concatTestID(testID, 'name')}\n          color={colorScheme.text}\n          ellipsizeMode={'tail'}\n          numberOfLines={1}\n          preset=\"regular\"\n          style={styles.nameText}>\n          {credentialName}\n        </Typography>\n        {DetailText}\n      </View>\n      {accessoryView && <View style={styles.accessory}>{accessoryView}</View>}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  accessory: {\n    alignItems: 'center',\n    height: 44,\n    justifyContent: 'center',\n    width: 44,\n  },\n  container: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    height: 60,\n    padding: 8,\n  },\n  detailText: {\n    flex: 1,\n    opacity: 0.7,\n  },\n  detailTextContainer: {\n    flexDirection: 'row',\n    marginTop: -1,\n  },\n  image: {\n    height: 44,\n    width: 44,\n  },\n  imageContainer: {\n    alignItems: 'center',\n    borderRadius: 5,\n    height: 44,\n    justifyContent: 'center',\n    marginRight: 8,\n    overflow: 'hidden',\n    width: 44,\n  },\n  imagePlaceholder: {\n    paddingLeft: 1,\n    paddingTop: 3,\n    textTransform: 'uppercase',\n  },\n  interpunct: {\n    marginHorizontal: 12,\n    opacity: 0.5,\n  },\n  nameText: {\n    marginTop: 2,\n  },\n  statusIconWrapper: {\n    bottom: 3,\n    left: 36,\n    position: 'absolute',\n  },\n  text: {\n    flex: 1,\n    justifyContent: 'center',\n  },\n});\n\nexport default CredentialHeader;\n"],"mappings":"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"}

package/lib/module/ui-components/credential/card/credential-image-carousel.js

@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Carousel from 'react-native-reanimated-carousel';
+import Svg, { Circle } from 'react-native-svg';
+import { concatTestID } from '../../../utils';
+export let CarouselImageType;
+(function (CarouselImageType) {
+  CarouselImageType["Barcode"] = "Barcode";
+  CarouselImageType["QrCode"] = "QrCode";
+  CarouselImageType["MRZ"] = "MRZ";
+  CarouselImageType["Photo"] = "Photo";
+})(CarouselImageType || (CarouselImageType = {}));
+const CarouselComponent = _ref => {
+  let {
+    carouselSize,
+    imagesToRender,
+    style,
+    testID
+  } = _ref;
+  const [selectedDot, setSelectedDot] = useState(0);
+  if (!carouselSize.width || !carouselSize.height) {
+    return null;
+  }
+  const numberOfSlides = imagesToRender.length;
+  if (!numberOfSlides) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, style]
+  }, /*#__PURE__*/React.createElement(Carousel, {
+    width: carouselSize.width,
+    onSnapToItem: setSelectedDot,
+    height: carouselSize.height,
+    enabled: numberOfSlides >= 2,
+    data: imagesToRender,
+    testID: testID,
+    renderItem: _ref2 => {
+      let {
+        item: {
+          type,
+          element
+        }
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.carouselItem
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [styles[type]]
+      }, element));
+    }
+  }), numberOfSlides >= 2 ? /*#__PURE__*/React.createElement(View, {
+    style: styles.pageDotContainer
+  }, imagesToRender.map((_, index) => /*#__PURE__*/React.createElement(Svg, {
+    key: index,
+    width: "8",
+    height: "8",
+    viewBox: "0 0 8 8",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement(Circle, {
+    testID: concatTestID(testID, 'dot', index.toString()),
+    cx: "4.5",
+    cy: "4",
+    r: "4",
+    fill: "white",
+    fillOpacity: selectedDot === index ? 0.8 : 0.2
+  })))) : null);
+};
+const styles = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-unused-styles
+  Barcode: {
+    borderRadius: 4,
+    height: '50%',
+    width: '80%'
+  },
+  // eslint-disable-next-line react-native/no-unused-styles
+  MRZ: {
+    height: '50%',
+    width: '100%'
+  },
+  // eslint-disable-next-line react-native/no-unused-styles
+  Photo: {
+    aspectRatio: 1,
+    borderColor: '#FFFFFF',
+    borderRadius: 100,
+    borderWidth: 2,
+    height: '70%',
+    overflow: 'hidden'
+  },
+  // eslint-disable-next-line react-native/no-unused-styles
+  QrCode: {
+    aspectRatio: 1,
+    borderRadius: 4,
+    height: '70%'
+  },
+  carouselItem: {
+    alignItems: 'center',
+    height: '100%',
+    justifyContent: 'center',
+    width: '100%'
+  },
+  container: {
+    flex: 1,
+    position: 'absolute',
+    width: '100%'
+  },
+  pageDotContainer: {
+    bottom: 15,
+    columnGap: 8,
+    flexDirection: 'row',
+    justifyContent: 'center'
+  }
+});
+export default CarouselComponent;
+//# sourceMappingURL=credential-image-carousel.js.map

package/lib/module/ui-components/credential/card/credential-image-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","StyleSheet","View","Carousel","Svg","Circle","concatTestID","CarouselImageType","CarouselComponent","_ref","carouselSize","imagesToRender","style","testID","selectedDot","setSelectedDot","width","height","numberOfSlides","length","createElement","styles","container","onSnapToItem","enabled","data","renderItem","_ref2","item","type","element","carouselItem","pageDotContainer","map","_","index","key","viewBox","fill","toString","cx","cy","r","fillOpacity","create","Barcode","borderRadius","MRZ","Photo","aspectRatio","borderColor","borderWidth","overflow","QrCode","alignItems","justifyContent","flex","position","bottom","columnGap","flexDirection"],"sources":["credential-image-carousel.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport Carousel from 'react-native-reanimated-carousel';\nimport Svg, { Circle } from 'react-native-svg';\n\nimport { concatTestID } from '../../../utils';\n\nexport enum CarouselImageType {\n  Barcode = 'Barcode',\n  QrCode = 'QrCode',\n  MRZ = 'MRZ',\n  Photo = 'Photo',\n}\n\nexport type CarouselImage = {\n  type: CarouselImageType;\n  element: React.ReactElement;\n};\n\ntype CarouselProps = {\n  carouselSize: { width: number; height: number };\n  imagesToRender: CarouselImage[];\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n};\n\nconst CarouselComponent: FC<CarouselProps> = ({ carouselSize, imagesToRender, style, testID }) => {\n  const [selectedDot, setSelectedDot] = useState(0);\n\n  if (!carouselSize.width || !carouselSize.height) {\n    return null;\n  }\n\n  const numberOfSlides = imagesToRender.length;\n\n  if (!numberOfSlides) {\n    return null;\n  }\n\n  return (\n    <View style={[styles.container, style]}>\n      <Carousel\n        width={carouselSize.width}\n        onSnapToItem={setSelectedDot}\n        height={carouselSize.height}\n        enabled={numberOfSlides >= 2}\n        data={imagesToRender}\n        testID={testID}\n        renderItem={({ item: { type, element } }) => (\n          <View style={styles.carouselItem}>\n            <View style={[styles[type]]}>{element}</View>\n          </View>\n        )}\n      />\n      {numberOfSlides >= 2 ? (\n        <View style={styles.pageDotContainer}>\n          {imagesToRender.map((_, index) => (\n            <Svg key={index} width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\n              <Circle\n                testID={concatTestID(testID, 'dot', index.toString())}\n                cx=\"4.5\"\n                cy=\"4\"\n                r=\"4\"\n                fill=\"white\"\n                fillOpacity={selectedDot === index ? 0.8 : 0.2}\n              />\n            </Svg>\n          ))}\n        </View>\n      ) : null}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  // eslint-disable-next-line react-native/no-unused-styles\n  Barcode: { borderRadius: 4, height: '50%', width: '80%' },\n  // eslint-disable-next-line react-native/no-unused-styles\n  MRZ: {\n    height: '50%',\n    width: '100%',\n  },\n  // eslint-disable-next-line react-native/no-unused-styles\n  Photo: {\n    aspectRatio: 1,\n    borderColor: '#FFFFFF',\n    borderRadius: 100,\n    borderWidth: 2,\n    height: '70%',\n    overflow: 'hidden',\n  },\n  // eslint-disable-next-line react-native/no-unused-styles\n  QrCode: { aspectRatio: 1, borderRadius: 4, height: '70%' },\n  carouselItem: {\n    alignItems: 'center',\n    height: '100%',\n    justifyContent: 'center',\n    width: '100%',\n  },\n  container: {\n    flex: 1,\n    position: 'absolute',\n    width: '100%',\n  },\n  pageDotContainer: {\n    bottom: 15,\n    columnGap: 8,\n    flexDirection: 'row',\n    justifyContent: 'center',\n  },\n});\n\nexport default CarouselComponent;\n"],"mappings":"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"}

package/lib/module/ui-components/credential/card/index.js

@@ -0,0 +1,11 @@
+import CredentialCard, { CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow } from './credential-card';
+import CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';
+import CredentialDetailsCardListItem, { CredentialDetailsCardListItemProps } from './credential-details-list-item';
+import CredentialHeader, { CredentialHeaderProps } from './credential-header';
+import { CarouselImage, CarouselImageType } from './credential-image-carousel';
+export { CarouselImage, CarouselImageType };
+export { CredentialCard, CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow };
+export { CredentialDetailsCard, CredentialDetailsCardProps };
+export { CredentialDetailsCardListItem, CredentialDetailsCardListItemProps };
+export { CredentialHeader, CredentialHeaderProps };
+//# sourceMappingURL=index.js.map

package/lib/module/ui-components/credential/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CredentialCard","CredentialCardNotice","CredentialCardProps","CredentialCardRatio","CredentialCardShadow","CredentialDetailsCard","CredentialDetailsCardProps","CredentialDetailsCardListItem","CredentialDetailsCardListItemProps","CredentialHeader","CredentialHeaderProps","CarouselImage","CarouselImageType"],"sources":["index.ts"],"sourcesContent":["import CredentialCard, {\n  CredentialCardNotice,\n  CredentialCardProps,\n  CredentialCardRatio,\n  CredentialCardShadow,\n} from './credential-card';\nimport CredentialDetailsCard, { CredentialDetailsCardProps } from './credential-details-card';\nimport CredentialDetailsCardListItem, { CredentialDetailsCardListItemProps } from './credential-details-list-item';\nimport CredentialHeader, { CredentialHeaderProps } from './credential-header';\nimport { CarouselImage, CarouselImageType } from './credential-image-carousel';\n\nexport { CarouselImage, CarouselImageType };\nexport { CredentialCard, CredentialCardNotice, CredentialCardProps, CredentialCardRatio, CredentialCardShadow };\nexport { CredentialDetailsCard, CredentialDetailsCardProps };\nexport { CredentialDetailsCardListItem, CredentialDetailsCardListItemProps };\nexport { CredentialHeader, CredentialHeaderProps };\n"],"mappings":"AAAA,OAAOA,cAAc,IACnBC,oBAAoB,EACpBC,mBAAmB,EACnBC,mBAAmB,EACnBC,oBAAoB,QACf,mBAAmB;AAC1B,OAAOC,qBAAqB,IAAIC,0BAA0B,QAAQ,2BAA2B;AAC7F,OAAOC,6BAA6B,IAAIC,kCAAkC,QAAQ,gCAAgC;AAClH,OAAOC,gBAAgB,IAAIC,qBAAqB,QAAQ,qBAAqB;AAC7E,SAASC,aAAa,EAAEC,iBAAiB,QAAQ,6BAA6B;AAE9E,SAASD,aAAa,EAAEC,iBAAiB;AACzC,SAASZ,cAAc,EAAEC,oBAAoB,EAAEC,mBAAmB,EAAEC,mBAAmB,EAAEC,oBAAoB;AAC7G,SAASC,qBAAqB,EAAEC,0BAA0B;AAC1D,SAASC,6BAA6B,EAAEC,kCAAkC;AAC1E,SAASC,gBAAgB,EAAEC,qBAAqB"}