@procivis/one-react-native-components 0.1.63

package/lib/module/buttons/scan-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","useSafeAreaInsets","TouchableOpacity","useAccessibilityTranslation","BlurView","ScanIcon","useAppColorScheme","hitSlop","top","left","bottom","right","ScanButton","forwardRef","_ref","ref","style","props","t","colorScheme","insets","createElement","_extends","accessibilityLabel","accessibilityRole","styles","button","Math","max","blurStyle","blurWrapper","iconWrapper","backgroundColor","accent","color","white","displayName","create","borderRadius","height","padding","width","marginLeft","position","shadowColor","shadowOffset","shadowOpacity","shadowRadius","alignItems","justifyContent"],"sources":["scan-button.tsx"],"sourcesContent":["import React from 'react';\nimport { Insets, StyleSheet, TouchableOpacityProps, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';\nimport { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';\nimport BlurView from '../blur/blur-view';\nimport { ScanIcon } from '../icons';\nimport { useAppColorScheme } from '../theme';\n\nexport type ScanButtonProps = TouchableOpacityProps;\n\nconst hitSlop: Insets = { top: 10, left: 10, bottom: 10, right: 10 };\n\nconst ScanButton = React.forwardRef<TouchableOpacityRef, ScanButtonProps>(({ style, ...props }, ref) => {\n  const t = useAccessibilityTranslation();\n  const colorScheme = useAppColorScheme();\n  const insets = useSafeAreaInsets();\n\n  return (\n    <TouchableOpacity\n      accessibilityLabel={t('accessibility.icon.scan')}\n      accessibilityRole=\"button\"\n      hitSlop={hitSlop}\n      ref={ref}\n      style={[styles.button, { bottom: Math.max(24, insets.bottom) }, style]}\n      {...props}>\n      <BlurView blurStyle=\"soft\" style={styles.blurWrapper}>\n        <View style={[styles.iconWrapper, { backgroundColor: colorScheme.accent }]}>\n          <ScanIcon color={colorScheme.white} />\n        </View>\n      </BlurView>\n    </TouchableOpacity>\n  );\n});\n\nScanButton.displayName = 'ScanButton';\nexport default ScanButton;\n\nconst styles = StyleSheet.create({\n  blurWrapper: {\n    borderRadius: 28,\n    height: 80,\n    padding: 8,\n    width: 104,\n  },\n  button: {\n    borderRadius: 28,\n    height: 80,\n    left: '50%',\n    marginLeft: -52,\n    position: 'absolute',\n    shadowColor: '#000000',\n    shadowOffset: { height: 4, width: 0 },\n    shadowOpacity: 0.2,\n    shadowRadius: 24,\n    width: 104,\n  },\n  iconWrapper: {\n    alignItems: 'center',\n    borderRadius: 20,\n    height: '100%',\n    justifyContent: 'center',\n    width: '100%',\n  },\n});\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAiBC,UAAU,EAAyBC,IAAI,QAAQ,cAAc;AAC9E,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE,SAASC,gBAAgB,QAA6B,+CAA+C;AACrG,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,OAAOC,QAAQ,MAAM,mBAAmB;AACxC,SAASC,QAAQ,QAAQ,UAAU;AACnC,SAASC,iBAAiB,QAAQ,UAAU;AAI5C,MAAMC,OAAe,GAAG;EAAEC,GAAG,EAAE,EAAE;EAAEC,IAAI,EAAE,EAAE;EAAEC,MAAM,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAG,CAAC;AAEpE,MAAMC,UAAU,gBAAGd,KAAK,CAACe,UAAU,CAAuC,CAAAC,IAAA,EAAsBC,GAAG,KAAK;EAAA,IAA7B;IAAEC,KAAK;IAAE,GAAGC;EAAM,CAAC,GAAAH,IAAA;EAC5F,MAAMI,CAAC,GAAGf,2BAA2B,EAAE;EACvC,MAAMgB,WAAW,GAAGb,iBAAiB,EAAE;EACvC,MAAMc,MAAM,GAAGnB,iBAAiB,EAAE;EAElC,oBACEH,KAAA,CAAAuB,aAAA,CAACnB,gBAAgB,EAAAoB,QAAA;IACfC,kBAAkB,EAAEL,CAAC,CAAC,yBAAyB,CAAE;IACjDM,iBAAiB,EAAC,QAAQ;IAC1BjB,OAAO,EAAEA,OAAQ;IACjBQ,GAAG,EAAEA,GAAI;IACTC,KAAK,EAAE,CAACS,MAAM,CAACC,MAAM,EAAE;MAAEhB,MAAM,EAAEiB,IAAI,CAACC,GAAG,CAAC,EAAE,EAAER,MAAM,CAACV,MAAM;IAAE,CAAC,EAAEM,KAAK;EAAE,GACnEC,KAAK,gBACTnB,KAAA,CAAAuB,aAAA,CAACjB,QAAQ;IAACyB,SAAS,EAAC,MAAM;IAACb,KAAK,EAAES,MAAM,CAACK;EAAY,gBACnDhC,KAAA,CAAAuB,aAAA,CAACrB,IAAI;IAACgB,KAAK,EAAE,CAACS,MAAM,CAACM,WAAW,EAAE;MAAEC,eAAe,EAAEb,WAAW,CAACc;IAAO,CAAC;EAAE,gBACzEnC,KAAA,CAAAuB,aAAA,CAAChB,QAAQ;IAAC6B,KAAK,EAAEf,WAAW,CAACgB;EAAM,EAAG,CACjC,CACE,CACM;AAEvB,CAAC,CAAC;AAEFvB,UAAU,CAACwB,WAAW,GAAG,YAAY;AACrC,eAAexB,UAAU;AAEzB,MAAMa,MAAM,GAAG1B,UAAU,CAACsC,MAAM,CAAC;EAC/BP,WAAW,EAAE;IACXQ,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,EAAE;IACVC,OAAO,EAAE,CAAC;IACVC,KAAK,EAAE;EACT,CAAC;EACDf,MAAM,EAAE;IACNY,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,EAAE;IACV9B,IAAI,EAAE,KAAK;IACXiC,UAAU,EAAE,CAAC,EAAE;IACfC,QAAQ,EAAE,UAAU;IACpBC,WAAW,EAAE,SAAS;IACtBC,YAAY,EAAE;MAAEN,MAAM,EAAE,CAAC;MAAEE,KAAK,EAAE;IAAE,CAAC;IACrCK,aAAa,EAAE,GAAG;IAClBC,YAAY,EAAE,EAAE;IAChBN,KAAK,EAAE;EACT,CAAC;EACDV,WAAW,EAAE;IACXiB,UAAU,EAAE,QAAQ;IACpBV,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,MAAM;IACdU,cAAc,EAAE,QAAQ;IACxBR,KAAK,EAAE;EACT;AACF,CAAC,CAAC"}

package/lib/module/camera/camera-overlay.js

@@ -0,0 +1,51 @@
+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 from 'react';
+import { Dimensions, StyleSheet, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+const CameraOverlay = _ref => {
+  var _scannerSize;
+  let {
+    scannerSize,
+    style,
+    ...viewProps
+  } = _ref;
+  const windowWidth = Dimensions.get('window').width;
+  scannerSize = (_scannerSize = scannerSize) !== null && _scannerSize !== void 0 ? _scannerSize : windowWidth * 0.6;
+  const transformSize = scannerSize / 2;
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [StyleSheet.absoluteFill, style]
+  }, viewProps), /*#__PURE__*/React.createElement(Svg, {
+    style: [styles.scannerOutline, {
+      width: scannerSize,
+      height: scannerSize,
+      transform: [{
+        translateX: -transformSize
+      }, {
+        translateY: -transformSize
+      }]
+    }],
+    viewBox: "0 0 245 245",
+    fill: "none",
+    strokeWidth: 4,
+    strokeLinecap: "round",
+    stroke: '#FFFFFF'
+  }, /*#__PURE__*/React.createElement(Path, {
+    d: "M44.9348 2.5H40.9C27.4587 2.5 20.7381 2.5 15.6042 5.11584C11.0883 7.4168 7.4168 11.0883 5.11584 15.6042C2.5 20.7381 2.5 27.4587 2.5 40.9V44.9348"
+  }), /*#__PURE__*/React.createElement(Path, {
+    d: "M242.5 44.9348L242.5 26.5C242.5 13.2452 231.755 2.5 218.5 2.5L200.065 2.5"
+  }), /*#__PURE__*/React.createElement(Path, {
+    d: "M242.5 44.9348L242.5 40.9C242.5 27.4587 242.5 20.7381 239.884 15.6042C237.583 11.0883 233.912 7.4168 229.396 5.11584C224.262 2.5 217.541 2.5 204.1 2.5L200.065 2.5"
+  }), /*#__PURE__*/React.createElement(Path, {
+    d: "M200.065 242.5L204.1 242.5C217.541 242.5 224.262 242.5 229.396 239.884C233.912 237.583 237.583 233.912 239.884 229.396C242.5 224.262 242.5 217.541 242.5 204.1L242.5 200.065"
+  }), /*#__PURE__*/React.createElement(Path, {
+    d: "M2.5 200.065L2.5 204.1C2.5 217.541 2.5 224.262 5.11584 229.396C7.4168 233.912 11.0883 237.583 15.6042 239.884C20.7381 242.5 27.4587 242.5 40.9 242.5L44.9348 242.5"
+  })));
+};
+export default CameraOverlay;
+const styles = StyleSheet.create({
+  scannerOutline: {
+    left: '50%',
+    top: '50%'
+  }
+});
+//# sourceMappingURL=camera-overlay.js.map

package/lib/module/camera/camera-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Dimensions","StyleSheet","View","Svg","Path","CameraOverlay","_ref","_scannerSize","scannerSize","style","viewProps","windowWidth","get","width","transformSize","createElement","_extends","absoluteFill","styles","scannerOutline","height","transform","translateX","translateY","viewBox","fill","strokeWidth","strokeLinecap","stroke","d","create","left","top"],"sources":["camera-overlay.tsx"],"sourcesContent":["import React, { FunctionComponent } from 'react';\nimport { Dimensions, StyleSheet, View, ViewProps } from 'react-native';\nimport Svg, { Path } from 'react-native-svg';\n\nexport type CameraMaskProps = ViewProps & {\n  scannerSize?: number;\n};\n\nconst CameraOverlay: FunctionComponent<CameraMaskProps> = ({ scannerSize, style, ...viewProps }) => {\n  const windowWidth = Dimensions.get('window').width;\n\n  scannerSize = scannerSize ?? windowWidth * 0.6;\n  const transformSize = scannerSize / 2;\n\n  return (\n    <View style={[StyleSheet.absoluteFill, style]} {...viewProps}>\n      <Svg\n        style={[\n          styles.scannerOutline,\n          {\n            width: scannerSize,\n            height: scannerSize,\n            transform: [{ translateX: -transformSize }, { translateY: -transformSize }],\n          },\n        ]}\n        viewBox=\"0 0 245 245\"\n        fill=\"none\"\n        strokeWidth={4}\n        strokeLinecap=\"round\"\n        stroke={'#FFFFFF'}>\n        <Path d=\"M44.9348 2.5H40.9C27.4587 2.5 20.7381 2.5 15.6042 5.11584C11.0883 7.4168 7.4168 11.0883 5.11584 15.6042C2.5 20.7381 2.5 27.4587 2.5 40.9V44.9348\" />\n        <Path d=\"M242.5 44.9348L242.5 26.5C242.5 13.2452 231.755 2.5 218.5 2.5L200.065 2.5\" />\n        <Path d=\"M242.5 44.9348L242.5 40.9C242.5 27.4587 242.5 20.7381 239.884 15.6042C237.583 11.0883 233.912 7.4168 229.396 5.11584C224.262 2.5 217.541 2.5 204.1 2.5L200.065 2.5\" />\n        <Path d=\"M200.065 242.5L204.1 242.5C217.541 242.5 224.262 242.5 229.396 239.884C233.912 237.583 237.583 233.912 239.884 229.396C242.5 224.262 242.5 217.541 242.5 204.1L242.5 200.065\" />\n        <Path d=\"M2.5 200.065L2.5 204.1C2.5 217.541 2.5 224.262 5.11584 229.396C7.4168 233.912 11.0883 237.583 15.6042 239.884C20.7381 242.5 27.4587 242.5 40.9 242.5L44.9348 242.5\" />\n      </Svg>\n    </View>\n  );\n};\n\nexport default CameraOverlay;\n\nconst styles = StyleSheet.create({\n  scannerOutline: {\n    left: '50%',\n    top: '50%',\n  },\n});\n"],"mappings":";AAAA,OAAOA,KAAK,MAA6B,OAAO;AAChD,SAASC,UAAU,EAAEC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AACtE,OAAOC,GAAG,IAAIC,IAAI,QAAQ,kBAAkB;AAM5C,MAAMC,aAAiD,GAAGC,IAAA,IAA0C;EAAA,IAAAC,YAAA;EAAA,IAAzC;IAAEC,WAAW;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAAJ,IAAA;EAC7F,MAAMK,WAAW,GAAGX,UAAU,CAACY,GAAG,CAAC,QAAQ,CAAC,CAACC,KAAK;EAElDL,WAAW,IAAAD,YAAA,GAAGC,WAAW,cAAAD,YAAA,cAAAA,YAAA,GAAII,WAAW,GAAG,GAAG;EAC9C,MAAMG,aAAa,GAAGN,WAAW,GAAG,CAAC;EAErC,oBACET,KAAA,CAAAgB,aAAA,CAACb,IAAI,EAAAc,QAAA;IAACP,KAAK,EAAE,CAACR,UAAU,CAACgB,YAAY,EAAER,KAAK;EAAE,GAAKC,SAAS,gBAC1DX,KAAA,CAAAgB,aAAA,CAACZ,GAAG;IACFM,KAAK,EAAE,CACLS,MAAM,CAACC,cAAc,EACrB;MACEN,KAAK,EAAEL,WAAW;MAClBY,MAAM,EAAEZ,WAAW;MACnBa,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAE,CAACR;MAAc,CAAC,EAAE;QAAES,UAAU,EAAE,CAACT;MAAc,CAAC;IAC5E,CAAC,CACD;IACFU,OAAO,EAAC,aAAa;IACrBC,IAAI,EAAC,MAAM;IACXC,WAAW,EAAE,CAAE;IACfC,aAAa,EAAC,OAAO;IACrBC,MAAM,EAAE;EAAU,gBAClB7B,KAAA,CAAAgB,aAAA,CAACX,IAAI;IAACyB,CAAC,EAAC;EAAkJ,EAAG,eAC7J9B,KAAA,CAAAgB,aAAA,CAACX,IAAI;IAACyB,CAAC,EAAC;EAA2E,EAAG,eACtF9B,KAAA,CAAAgB,aAAA,CAACX,IAAI;IAACyB,CAAC,EAAC;EAAoK,EAAG,eAC/K9B,KAAA,CAAAgB,aAAA,CAACX,IAAI;IAACyB,CAAC,EAAC;EAA8K,EAAG,eACzL9B,KAAA,CAAAgB,aAAA,CAACX,IAAI;IAACyB,CAAC,EAAC;EAAoK,EAAG,CAC3K,CACD;AAEX,CAAC;AAED,eAAexB,aAAa;AAE5B,MAAMa,MAAM,GAAGjB,UAAU,CAAC6B,MAAM,CAAC;EAC/BX,cAAc,EAAE;IACdY,IAAI,EAAE,KAAK;IACXC,GAAG,EAAE;EACP;AACF,CAAC,CAAC"}

package/lib/module/camera/index.js

@@ -0,0 +1,3 @@
+import QRCodeScanner, { QRCodeScannerProps } from './qr-code-scanner';
+export { QRCodeScanner, QRCodeScannerProps };
+//# sourceMappingURL=index.js.map

package/lib/module/camera/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["QRCodeScanner","QRCodeScannerProps"],"sources":["index.tsx"],"sourcesContent":["import QRCodeScanner, { QRCodeScannerProps } from './qr-code-scanner';\n\nexport { QRCodeScanner, QRCodeScannerProps };\n"],"mappings":"AAAA,OAAOA,aAAa,IAAIC,kBAAkB,QAAQ,mBAAmB;AAErE,SAASD,aAAa,EAAEC,kBAAkB"}

package/lib/module/camera/qr-code-scanner.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Camera, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';
+import CameraOverlay from './camera-overlay';
+const QRCodeScanner = _ref => {
+  let {
+    cameraOverlay,
+    codeTypes = ['qr'],
+    onQRCodeRead,
+    noCameraView = null,
+    ...viewProps
+  } = _ref;
+  const qrCodeScanner = useCodeScanner({
+    codeTypes,
+    onCodeScanned: onQRCodeRead
+  });
+  const device = useCameraDevice('back');
+  const cameraOverlayView = useMemo(() => {
+    if (!cameraOverlay) {
+      return /*#__PURE__*/React.createElement(CameraOverlay, null);
+    }
+    if ( /*#__PURE__*/React.isValidElement(cameraOverlay)) {
+      return cameraOverlay;
+    } else {
+      const CameraOverlayComponent = cameraOverlay;
+      return /*#__PURE__*/React.createElement(CameraOverlayComponent, null);
+    }
+  }, [cameraOverlay]);
+  if (!device) {
+    return noCameraView;
+  }
+  return /*#__PURE__*/React.createElement(View, viewProps, /*#__PURE__*/React.createElement(Camera, {
+    codeScanner: qrCodeScanner,
+    device: device,
+    isActive: true,
+    style: StyleSheet.absoluteFill
+  }), cameraOverlayView);
+};
+export default QRCodeScanner;
+//# sourceMappingURL=qr-code-scanner.js.map

package/lib/module/camera/qr-code-scanner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","StyleSheet","View","Camera","useCameraDevice","useCodeScanner","CameraOverlay","QRCodeScanner","_ref","cameraOverlay","codeTypes","onQRCodeRead","noCameraView","viewProps","qrCodeScanner","onCodeScanned","device","cameraOverlayView","createElement","isValidElement","CameraOverlayComponent","codeScanner","isActive","style","absoluteFill"],"sources":["qr-code-scanner.tsx"],"sourcesContent":["import React, { FunctionComponent, useMemo } from 'react';\nimport { StyleSheet, View, ViewProps } from 'react-native';\nimport { Camera, Code, CodeType, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';\n\nimport CameraOverlay from './camera-overlay';\n\nexport type QRCodeScannerProps = ViewProps & {\n  cameraOverlay?: React.ComponentType<any> | React.ReactElement;\n  codeTypes?: CodeType[];\n  noCameraView?: JSX.Element;\n  onQRCodeRead: (code: Code[]) => void;\n};\n\nconst QRCodeScanner: FunctionComponent<QRCodeScannerProps> = ({\n  cameraOverlay,\n  codeTypes = ['qr'],\n  onQRCodeRead,\n  noCameraView = null,\n  ...viewProps\n}) => {\n  const qrCodeScanner = useCodeScanner({\n    codeTypes,\n    onCodeScanned: onQRCodeRead,\n  });\n\n  const device = useCameraDevice('back');\n\n  const cameraOverlayView: React.ReactElement | undefined = useMemo(() => {\n    if (!cameraOverlay) {\n      return <CameraOverlay />;\n    }\n    if (React.isValidElement(cameraOverlay)) {\n      return cameraOverlay;\n    } else {\n      const CameraOverlayComponent = cameraOverlay as React.ComponentType<any>;\n      return <CameraOverlayComponent />;\n    }\n  }, [cameraOverlay]);\n\n  if (!device) {\n    return noCameraView;\n  }\n\n  return (\n    <View {...viewProps}>\n      <Camera codeScanner={qrCodeScanner} device={device} isActive={true} style={StyleSheet.absoluteFill} />\n      {cameraOverlayView}\n    </View>\n  );\n};\n\nexport default QRCodeScanner;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAuBC,OAAO,QAAQ,OAAO;AACzD,SAASC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAC1D,SAASC,MAAM,EAAkBC,eAAe,EAAEC,cAAc,QAAQ,4BAA4B;AAEpG,OAAOC,aAAa,MAAM,kBAAkB;AAS5C,MAAMC,aAAoD,GAAGC,IAAA,IAMvD;EAAA,IANwD;IAC5DC,aAAa;IACbC,SAAS,GAAG,CAAC,IAAI,CAAC;IAClBC,YAAY;IACZC,YAAY,GAAG,IAAI;IACnB,GAAGC;EACL,CAAC,GAAAL,IAAA;EACC,MAAMM,aAAa,GAAGT,cAAc,CAAC;IACnCK,SAAS;IACTK,aAAa,EAAEJ;EACjB,CAAC,CAAC;EAEF,MAAMK,MAAM,GAAGZ,eAAe,CAAC,MAAM,CAAC;EAEtC,MAAMa,iBAAiD,GAAGjB,OAAO,CAAC,MAAM;IACtE,IAAI,CAACS,aAAa,EAAE;MAClB,oBAAOV,KAAA,CAAAmB,aAAA,CAACZ,aAAa,OAAG;IAC1B;IACA,kBAAIP,KAAK,CAACoB,cAAc,CAACV,aAAa,CAAC,EAAE;MACvC,OAAOA,aAAa;IACtB,CAAC,MAAM;MACL,MAAMW,sBAAsB,GAAGX,aAAyC;MACxE,oBAAOV,KAAA,CAAAmB,aAAA,CAACE,sBAAsB,OAAG;IACnC;EACF,CAAC,EAAE,CAACX,aAAa,CAAC,CAAC;EAEnB,IAAI,CAACO,MAAM,EAAE;IACX,OAAOJ,YAAY;EACrB;EAEA,oBACEb,KAAA,CAAAmB,aAAA,CAAChB,IAAI,EAAKW,SAAS,eACjBd,KAAA,CAAAmB,aAAA,CAACf,MAAM;IAACkB,WAAW,EAAEP,aAAc;IAACE,MAAM,EAAEA,MAAO;IAACM,QAAQ,EAAE,IAAK;IAACC,KAAK,EAAEtB,UAAU,CAACuB;EAAa,EAAG,EACrGP,iBAAiB,CACb;AAEX,CAAC;AAED,eAAeV,aAAa"}

package/lib/module/control/checkbox.js

@@ -0,0 +1,70 @@
+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 } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
+import { CheckedIcon } from '../icons/selector';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+export const Checkbox = _ref => {
+  let {
+    style,
+    text,
+    value,
+    disabled,
+    onValueChanged,
+    ...props
+  } = _ref;
+  const t = useAccessibilityTranslation();
+  const colorScheme = useAppColorScheme();
+  const onPress = useCallback(() => onValueChanged(!value), [onValueChanged, value]);
+  return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
+    activeOpacity: 0.8,
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      disabled
+    },
+    accessibilityValue: disabled ? undefined : {
+      text: t(value ? 'accessibility.control.checked' : 'accessibility.control.unchecked')
+    },
+    disabled: disabled,
+    style: [styles.container, {
+      backgroundColor: colorScheme.background
+    }, style],
+    onPress: onPress
+  }, props), value ? /*#__PURE__*/React.createElement(CheckedIcon, {
+    style: disabled && styles.disabled
+  }) : /*#__PURE__*/React.createElement(View, {
+    style: [styles.unchecked, {
+      borderColor: colorScheme.grayDark,
+      backgroundColor: disabled ? colorScheme.background : colorScheme.white
+    }]
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.text, disabled && styles.disabled]
+  }, typeof text === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    preset: "xs/line-height-small",
+    color: colorScheme.text
+  }, text) : text));
+};
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    padding: 12
+  },
+  disabled: {
+    opacity: 0.4
+  },
+  text: {
+    flex: 1,
+    marginLeft: 12
+  },
+  unchecked: {
+    borderRadius: 12,
+    borderWidth: 1,
+    height: 24,
+    width: 24
+  }
+});
+//# sourceMappingURL=checkbox.js.map

package/lib/module/control/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","StyleSheet","View","TouchableOpacity","useAccessibilityTranslation","CheckedIcon","Typography","useAppColorScheme","Checkbox","_ref","style","text","value","disabled","onValueChanged","props","t","colorScheme","onPress","createElement","_extends","activeOpacity","accessibilityRole","accessibilityState","accessibilityValue","undefined","styles","container","backgroundColor","background","unchecked","borderColor","grayDark","white","preset","color","create","alignItems","borderRadius","flexDirection","padding","opacity","flex","marginLeft","borderWidth","height","width"],"sources":["checkbox.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback } from 'react';\nimport { StyleSheet, TouchableOpacityProps, View } from 'react-native';\n\nimport { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';\nimport { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';\nimport { CheckedIcon } from '../icons/selector';\nimport { Typography } from '../text';\nimport { useAppColorScheme } from '../theme';\n\nexport interface CheckboxProps extends TouchableOpacityProps {\n  value: boolean;\n  text: ReactNode;\n  onValueChanged: (value: boolean) => void;\n  disabled?: boolean;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({ style, text, value, disabled, onValueChanged, ...props }) => {\n  const t = useAccessibilityTranslation();\n  const colorScheme = useAppColorScheme();\n\n  const onPress = useCallback(() => onValueChanged(!value), [onValueChanged, value]);\n\n  return (\n    <TouchableOpacity\n      activeOpacity={0.8}\n      accessibilityRole=\"checkbox\"\n      accessibilityState={{ disabled }}\n      accessibilityValue={\n        disabled ? undefined : { text: t(value ? 'accessibility.control.checked' : 'accessibility.control.unchecked') }\n      }\n      disabled={disabled}\n      style={[styles.container, { backgroundColor: colorScheme.background }, style]}\n      onPress={onPress}\n      {...props}>\n      {value ? (\n        <CheckedIcon style={disabled && styles.disabled} />\n      ) : (\n        <View\n          style={[\n            styles.unchecked,\n            {\n              borderColor: colorScheme.grayDark,\n              backgroundColor: disabled ? colorScheme.background : colorScheme.white,\n            },\n          ]}\n        />\n      )}\n      <View style={[styles.text, disabled && styles.disabled]}>\n        {typeof text === 'string' ? (\n          <Typography preset=\"xs/line-height-small\" color={colorScheme.text}>\n            {text}\n          </Typography>\n        ) : (\n          text\n        )}\n      </View>\n    </TouchableOpacity>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    borderRadius: 12,\n    flexDirection: 'row',\n    padding: 12,\n  },\n  disabled: {\n    opacity: 0.4,\n  },\n  text: {\n    flex: 1,\n    marginLeft: 12,\n  },\n  unchecked: {\n    borderRadius: 12,\n    borderWidth: 1,\n    height: 24,\n    width: 24,\n  },\n});\n"],"mappings":";AAAA,OAAOA,KAAK,IAAmBC,WAAW,QAAQ,OAAO;AACzD,SAASC,UAAU,EAAyBC,IAAI,QAAQ,cAAc;AAEtE,SAASC,gBAAgB,QAAQ,+CAA+C;AAChF,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,UAAU,QAAQ,SAAS;AACpC,SAASC,iBAAiB,QAAQ,UAAU;AAS5C,OAAO,MAAMC,QAA2B,GAAGC,IAAA,IAAgE;EAAA,IAA/D;IAAEC,KAAK;IAAEC,IAAI;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,cAAc;IAAE,GAAGC;EAAM,CAAC,GAAAN,IAAA;EACpG,MAAMO,CAAC,GAAGZ,2BAA2B,EAAE;EACvC,MAAMa,WAAW,GAAGV,iBAAiB,EAAE;EAEvC,MAAMW,OAAO,GAAGlB,WAAW,CAAC,MAAMc,cAAc,CAAC,CAACF,KAAK,CAAC,EAAE,CAACE,cAAc,EAAEF,KAAK,CAAC,CAAC;EAElF,oBACEb,KAAA,CAAAoB,aAAA,CAAChB,gBAAgB,EAAAiB,QAAA;IACfC,aAAa,EAAE,GAAI;IACnBC,iBAAiB,EAAC,UAAU;IAC5BC,kBAAkB,EAAE;MAAEV;IAAS,CAAE;IACjCW,kBAAkB,EAChBX,QAAQ,GAAGY,SAAS,GAAG;MAAEd,IAAI,EAAEK,CAAC,CAACJ,KAAK,GAAG,+BAA+B,GAAG,iCAAiC;IAAE,CAC/G;IACDC,QAAQ,EAAEA,QAAS;IACnBH,KAAK,EAAE,CAACgB,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAEX,WAAW,CAACY;IAAW,CAAC,EAAEnB,KAAK,CAAE;IAC9EQ,OAAO,EAAEA;EAAQ,GACbH,KAAK,GACRH,KAAK,gBACJb,KAAA,CAAAoB,aAAA,CAACd,WAAW;IAACK,KAAK,EAAEG,QAAQ,IAAIa,MAAM,CAACb;EAAS,EAAG,gBAEnDd,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IACHQ,KAAK,EAAE,CACLgB,MAAM,CAACI,SAAS,EAChB;MACEC,WAAW,EAAEd,WAAW,CAACe,QAAQ;MACjCJ,eAAe,EAAEf,QAAQ,GAAGI,WAAW,CAACY,UAAU,GAAGZ,WAAW,CAACgB;IACnE,CAAC;EACD,EAEL,eACDlC,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IAACQ,KAAK,EAAE,CAACgB,MAAM,CAACf,IAAI,EAAEE,QAAQ,IAAIa,MAAM,CAACb,QAAQ;EAAE,GACrD,OAAOF,IAAI,KAAK,QAAQ,gBACvBZ,KAAA,CAAAoB,aAAA,CAACb,UAAU;IAAC4B,MAAM,EAAC,sBAAsB;IAACC,KAAK,EAAElB,WAAW,CAACN;EAAK,GAC/DA,IAAI,CACM,GAEbA,IACD,CACI,CACU;AAEvB,CAAC;AAED,MAAMe,MAAM,GAAGzB,UAAU,CAACmC,MAAM,CAAC;EAC/BT,SAAS,EAAE;IACTU,UAAU,EAAE,QAAQ;IACpBC,YAAY,EAAE,EAAE;IAChBC,aAAa,EAAE,KAAK;IACpBC,OAAO,EAAE;EACX,CAAC;EACD3B,QAAQ,EAAE;IACR4B,OAAO,EAAE;EACX,CAAC;EACD9B,IAAI,EAAE;IACJ+B,IAAI,EAAE,CAAC;IACPC,UAAU,EAAE;EACd,CAAC;EACDb,SAAS,EAAE;IACTQ,YAAY,EAAE,EAAE;IAChBM,WAAW,EAAE,CAAC;IACdC,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT;AACF,CAAC,CAAC"}

package/lib/module/control/index.js

@@ -0,0 +1,4 @@
+import { Checkbox, CheckboxProps } from './checkbox';
+import { Switch, SwitchProps } from './switch';
+export { Checkbox, CheckboxProps, Switch, SwitchProps };
+//# sourceMappingURL=index.js.map

package/lib/module/control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Checkbox","CheckboxProps","Switch","SwitchProps"],"sources":["index.ts"],"sourcesContent":["import { Checkbox, CheckboxProps } from './checkbox';\nimport { Switch, SwitchProps } from './switch';\n\nexport { Checkbox, CheckboxProps, Switch, SwitchProps };\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,aAAa,QAAQ,YAAY;AACpD,SAASC,MAAM,EAAEC,WAAW,QAAQ,UAAU;AAE9C,SAASH,QAAQ,EAAEC,aAAa,EAAEC,MAAM,EAAEC,WAAW"}

package/lib/module/control/switch.js

@@ -0,0 +1,56 @@
+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, { forwardRef } from 'react';
+import { Platform, StyleSheet, Switch as RNSwitch } from 'react-native';
+import { useAppColorScheme } from '../theme';
+const hitSlop = {
+  top: 10,
+  bottom: 10,
+  left: 10,
+  right: 10
+};
+
+// https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=8%3A744&t=xeivYJN0RLNSObzn-4
+// https://www.figma.com/file/tNPSTYXGCjaVCK9z8Yvy0e/Procivis-SSI%2B-%E2%80%93-App-(Base-File)-(Copy)?node-id=156%3A13826&t=sDAfSW7cmQKmaWNG-4
+export const Switch = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    value,
+    disabled,
+    style,
+    onChange,
+    ...props
+  } = _ref;
+  const colorScheme = useAppColorScheme();
+  return /*#__PURE__*/React.createElement(RNSwitch, _extends({
+    ref: ref,
+    value: value,
+    disabled: disabled,
+    hitSlop: hitSlop,
+    style: [disabled && styles.disabled, style],
+    onValueChange: onChange,
+    trackColor: Platform.select({
+      default: {
+        true: colorScheme.grayDark,
+        false: colorScheme.grayDark
+      },
+      ios: {
+        true: colorScheme.accent,
+        false: colorScheme.grayDark
+      }
+    }),
+    thumbColor: Platform.select({
+      default: value ? colorScheme.accent : disabled ? colorScheme.background : colorScheme.white,
+      ios: colorScheme.white
+    }),
+    ios_backgroundColor: colorScheme.grayDark
+    // @ts-ignore: web only prop
+    ,
+    activeThumbColor: colorScheme.accent
+  }, props));
+});
+const styles = StyleSheet.create({
+  disabled: {
+    opacity: 0.38
+  }
+});
+Switch.displayName = 'Switch';
+//# sourceMappingURL=switch.js.map

package/lib/module/control/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","Platform","StyleSheet","Switch","RNSwitch","useAppColorScheme","hitSlop","top","bottom","left","right","_ref","ref","value","disabled","style","onChange","props","colorScheme","createElement","_extends","styles","onValueChange","trackColor","select","default","true","grayDark","false","ios","accent","thumbColor","background","white","ios_backgroundColor","activeThumbColor","create","opacity","displayName"],"sources":["switch.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Insets, Platform, StyleSheet, Switch as RNSwitch, SwitchProps as RNSwitchProps } from 'react-native';\n\nimport { useAppColorScheme } from '../theme';\n\nexport interface SwitchProps extends Omit<RNSwitchProps, 'value' | 'onChange' | 'onValueChange'> {\n  value: boolean;\n  onChange: (newValue: boolean) => void;\n}\n\nconst hitSlop: Insets = { top: 10, bottom: 10, left: 10, right: 10 };\n\n// https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=8%3A744&t=xeivYJN0RLNSObzn-4\n// https://www.figma.com/file/tNPSTYXGCjaVCK9z8Yvy0e/Procivis-SSI%2B-%E2%80%93-App-(Base-File)-(Copy)?node-id=156%3A13826&t=sDAfSW7cmQKmaWNG-4\nexport const Switch = forwardRef<RNSwitch, SwitchProps>(({ value, disabled, style, onChange, ...props }, ref) => {\n  const colorScheme = useAppColorScheme();\n  return (\n    <RNSwitch\n      ref={ref}\n      value={value}\n      disabled={disabled}\n      hitSlop={hitSlop}\n      style={[disabled && styles.disabled, style]}\n      onValueChange={onChange}\n      trackColor={Platform.select({\n        default: { true: colorScheme.grayDark, false: colorScheme.grayDark },\n        ios: { true: colorScheme.accent, false: colorScheme.grayDark },\n      })}\n      thumbColor={Platform.select({\n        default: value ? colorScheme.accent : disabled ? colorScheme.background : colorScheme.white,\n        ios: colorScheme.white,\n      })}\n      ios_backgroundColor={colorScheme.grayDark}\n      // @ts-ignore: web only prop\n      activeThumbColor={colorScheme.accent}\n      {...props}\n    />\n  );\n});\n\nconst styles = StyleSheet.create({\n  disabled: {\n    opacity: 0.38,\n  },\n});\n\nSwitch.displayName = 'Switch';\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAAiBC,QAAQ,EAAEC,UAAU,EAAEC,MAAM,IAAIC,QAAQ,QAAsC,cAAc;AAE7G,SAASC,iBAAiB,QAAQ,UAAU;AAO5C,MAAMC,OAAe,GAAG;EAAEC,GAAG,EAAE,EAAE;EAAEC,MAAM,EAAE,EAAE;EAAEC,IAAI,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAG,CAAC;;AAEpE;AACA;AACA,OAAO,MAAMP,MAAM,gBAAGH,UAAU,CAAwB,CAAAW,IAAA,EAAiDC,GAAG,KAAK;EAAA,IAAxD;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;EAAM,CAAC,GAAAN,IAAA;EACrG,MAAMO,WAAW,GAAGb,iBAAiB,EAAE;EACvC,oBACEN,KAAA,CAAAoB,aAAA,CAACf,QAAQ,EAAAgB,QAAA;IACPR,GAAG,EAAEA,GAAI;IACTC,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBR,OAAO,EAAEA,OAAQ;IACjBS,KAAK,EAAE,CAACD,QAAQ,IAAIO,MAAM,CAACP,QAAQ,EAAEC,KAAK,CAAE;IAC5CO,aAAa,EAAEN,QAAS;IACxBO,UAAU,EAAEtB,QAAQ,CAACuB,MAAM,CAAC;MAC1BC,OAAO,EAAE;QAAEC,IAAI,EAAER,WAAW,CAACS,QAAQ;QAAEC,KAAK,EAAEV,WAAW,CAACS;MAAS,CAAC;MACpEE,GAAG,EAAE;QAAEH,IAAI,EAAER,WAAW,CAACY,MAAM;QAAEF,KAAK,EAAEV,WAAW,CAACS;MAAS;IAC/D,CAAC,CAAE;IACHI,UAAU,EAAE9B,QAAQ,CAACuB,MAAM,CAAC;MAC1BC,OAAO,EAAEZ,KAAK,GAAGK,WAAW,CAACY,MAAM,GAAGhB,QAAQ,GAAGI,WAAW,CAACc,UAAU,GAAGd,WAAW,CAACe,KAAK;MAC3FJ,GAAG,EAAEX,WAAW,CAACe;IACnB,CAAC,CAAE;IACHC,mBAAmB,EAAEhB,WAAW,CAACS;IACjC;IAAA;IACAQ,gBAAgB,EAAEjB,WAAW,CAACY;EAAO,GACjCb,KAAK,EACT;AAEN,CAAC,CAAC;AAEF,MAAMI,MAAM,GAAGnB,UAAU,CAACkC,MAAM,CAAC;EAC/BtB,QAAQ,EAAE;IACRuB,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAEFlC,MAAM,CAACmC,WAAW,GAAG,QAAQ"}

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

@@ -0,0 +1,177 @@
+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, useMemo, useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { TouchableOpacity } from '../../accessibility/accessibilityHistoryWrappers';
+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';
+import { concatTestID } from '../../utils/testID';
+import CredentialHeader from './credential-header';
+import CarouselComponent from './credential-image-carousel';
+export const CredentialCardShadow = {
+  shadowColor: '#10274226',
+  shadowOffset: {
+    height: 5,
+    width: 0
+  },
+  shadowOpacity: 1,
+  shadowRadius: 7
+};
+export const CredentialCardRatio = 18 / 11;
+const CredentialCard = _ref => {
+  var _header$color;
+  let {
+    cardCarouselImages = [],
+    cardImage,
+    color = '#5A69F3',
+    credentialId,
+    header,
+    notice,
+    noticeIcon,
+    onCardPress,
+    onHeaderPress,
+    style,
+    testID
+  } = _ref;
+  const colorScheme = useAppColorScheme();
+  const [tappableHeaderHeight, setTappableHeaderHeight] = useState();
+  const [noticeHeight, setNoticeHeight] = useState();
+  const [cardSize, setCardSize] = useState();
+  const onCardLayoutChange = useCallback(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setCardSize({
+      width,
+      height
+    });
+  }, []);
+  const onHeaderLayoutChange = useCallback(event => {
+    setTappableHeaderHeight(event.nativeEvent.layout.height);
+  }, []);
+  const onNoticeLayoutChange = useCallback(event => {
+    setNoticeHeight(event.nativeEvent.layout.height);
+  }, []);
+  const headerPressHandler = useCallback(() => {
+    onHeaderPress === null || onHeaderPress === void 0 ? void 0 : onHeaderPress(credentialId);
+  }, [credentialId, onHeaderPress]);
+  const cardPressHandler = useCallback(() => {
+    onCardPress === null || onCardPress === void 0 ? void 0 : onCardPress(credentialId);
+  }, [credentialId, onCardPress]);
+  const noticeIconView = useMemo(() => {
+    if (!noticeIcon) {
+      return undefined;
+    }
+    if ( /*#__PURE__*/React.isValidElement(noticeIcon)) {
+      return noticeIcon;
+    } else {
+      const NoticeIconComponent = noticeIcon;
+      return /*#__PURE__*/React.createElement(NoticeIconComponent, null);
+    }
+  }, [noticeIcon]);
+  const shouldShowCarousel = (cardSize === null || cardSize === void 0 ? void 0 : cardSize.width) && cardSize.height;
+  return /*#__PURE__*/React.createElement(View, {
+    onLayout: onCardLayoutChange,
+    style: [styles.card, style],
+    testID: testID
+  }, cardImage ? 'imageSource' in cardImage ? /*#__PURE__*/React.createElement(View, {
+    style: styles.cardImage
+  }, /*#__PURE__*/React.createElement(Image, {
+    testID: concatTestID(testID, 'imageSource'),
+    source: cardImage.imageSource,
+    style: styles.image
+  })) : /*#__PURE__*/React.createElement(ImageOrComponent, {
+    testID: concatTestID(testID, 'cardImage'),
+    source: cardImage,
+    style: styles.cardImage
+  }) : /*#__PURE__*/React.createElement(View, {
+    testID: concatTestID(testID, 'cardBackgroundColor', String(color)),
+    style: [styles.cardImage, {
+      backgroundColor: color
+    }]
+  }), onCardPress && /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.cardButton,
+    onPress: cardPressHandler
+  }), shouldShowCarousel ? /*#__PURE__*/React.createElement(CarouselComponent, {
+    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: concatTestID(testID, 'carousel')
+  }) : null, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onLayout: onHeaderLayoutChange,
+    activeOpacity: 0.9,
+    disabled: !onHeaderPress,
+    onPress: headerPressHandler,
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(CredentialHeader, _extends({}, header, {
+    color: (_header$color = header.color) !== null && _header$color !== void 0 ? _header$color : color,
+    testID: concatTestID(testID, 'header')
+  }))), notice && /*#__PURE__*/React.createElement(BlurView, {
+    onLayout: onNoticeLayoutChange,
+    blurStyle: "soft",
+    style: [styles.notice, style],
+    testID: concatTestID(testID, 'notice')
+  }, noticeIconView && /*#__PURE__*/React.createElement(View, {
+    style: styles.noticeIcon
+  }, noticeIconView), /*#__PURE__*/React.createElement(View, {
+    style: styles.noticeTextWrapper
+  }, /*#__PURE__*/React.createElement(Typography, {
+    color: colorScheme.text,
+    preset: "xs/line-height-small",
+    style: styles.noticeText,
+    testID: concatTestID(testID, 'notice.text')
+  }, notice))));
+};
+const styles = 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
+  }
+});
+export default CredentialCard;
+//# sourceMappingURL=credential-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","useState","Image","StyleSheet","View","TouchableOpacity","BlurView","ImageOrComponent","Typography","useAppColorScheme","concatTestID","CredentialHeader","CarouselComponent","CredentialCardShadow","shadowColor","shadowOffset","height","width","shadowOpacity","shadowRadius","CredentialCardRatio","CredentialCard","_ref","_header$color","cardCarouselImages","cardImage","color","credentialId","header","notice","noticeIcon","onCardPress","onHeaderPress","style","testID","colorScheme","tappableHeaderHeight","setTappableHeaderHeight","noticeHeight","setNoticeHeight","cardSize","setCardSize","onCardLayoutChange","event","nativeEvent","layout","onHeaderLayoutChange","onNoticeLayoutChange","headerPressHandler","cardPressHandler","noticeIconView","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 { 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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"}