@learncard/react 2.3.20 → 2.3.24

package/dist/esm/VCVerificationCheck-eef7883b.js

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import VerificationCheckDisplay from './vc.check.svg';
+import { C as CircleLoadingState, a as CircleSpinner } from './CircleSpinner-9b8b1a6b.js';
+
+const VCVerificationCheck = ({ size = "44px" }) => {
+  var _a;
+  const imageSize = {
+    width: size,
+    height: size
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "vc-verification-wrapper",
+    style: { position: "relative" }
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center justify-center rounded-[50%] bg-white rounded-full overflow-hidden"
+  }, /* @__PURE__ */ React.createElement("img", {
+    className: "h-full w-full object-contain p-1",
+    src: (_a = VerificationCheckDisplay) != null ? _a : "",
+    style: imageSize,
+    alt: "Verification Icon"
+  })));
+};
+const VCVerificationCheckWithText = ({
+  size = "60px",
+  loading = true
+}) => {
+  const [defaultLoading, setDefaultLoading] = useState(true);
+  const spinnerStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: "60px",
+    width: "60px"
+  };
+  useEffect(() => {
+    let timer1 = setTimeout(() => setDefaultLoading(false), 3 * 1e3);
+    return () => {
+      clearTimeout(timer1);
+    };
+  });
+  const loadingState = loading || defaultLoading ? CircleLoadingState.spin : CircleLoadingState.stop;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex vc-verification-full-wrapper justify-center items-center translate-x-[10px]"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "text-white font-bold tracking-wider"
+  }, "Verified"), /* @__PURE__ */ React.createElement("div", {
+    style: { width: size, height: size, position: "relative" },
+    className: `flex items-center justify-center bg-white rounded-full ml-3 mr-3 overflow-hidden`
+  }, /* @__PURE__ */ React.createElement(VCVerificationCheck, {
+    size: "44px",
+    loading
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "vc-verification-spinner-overlay",
+    style: spinnerStyle
+  }, /* @__PURE__ */ React.createElement(CircleSpinner, {
+    loadingState
+  }))), /* @__PURE__ */ React.createElement("span", {
+    className: "text-white font-bold tracking-wider"
+  }, "Credential"));
+};
+
+export { VCVerificationCheck as V, VCVerificationCheckWithText as a };
+//# sourceMappingURL=VCVerificationCheck-eef7883b.js.map

package/dist/esm/VCVerificationCheck-eef7883b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCVerificationCheck-eef7883b.js","sources":["../../src/components/VCVerificationCheck/VCVerificationCheck.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport VerificationCheckDisplay from '../../assets/images/vc.check.svg';\nimport CircleSpinner, { CircleLoadingState } from '../Loading/CircleSpinner';\n\nexport type VCVerificationCheckProps = {\n    size?: string | number;\n    loading?: boolean;\n};\n\nexport const VCVerificationCheck: React.FC<VCVerificationCheckProps> = ({ size = '44px' }) => {\n    const imageSize = {\n        width: size,\n        height: size,\n    };\n    return (\n        <div className=\"vc-verification-wrapper\" style={{ position: 'relative' }}>\n            <div className=\"flex items-center justify-center rounded-[50%] bg-white rounded-full overflow-hidden\">\n                <img\n                    className=\"h-full w-full object-contain p-1\"\n                    src={VerificationCheckDisplay ?? ''}\n                    style={imageSize}\n                    alt=\"Verification Icon\"\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default VCVerificationCheck;\n\nexport const VCVerificationCheckWithText: React.FC<VCVerificationCheckProps> = ({\n    size = '60px',\n    loading = true,\n}) => {\n    const [defaultLoading, setDefaultLoading] = useState(true);\n\n    const spinnerStyle: React.CSSProperties = {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '60px', //todo calculate this based on other\n        width: '60px',\n    };\n\n    useEffect(() => {\n        let timer1 = setTimeout(() => setDefaultLoading(false), 3 * 1000);\n        return () => {\n            clearTimeout(timer1);\n        };\n    });\n\n    const loadingState =\n        loading || defaultLoading ? CircleLoadingState.spin : CircleLoadingState.stop;\n\n    return (\n        <div className=\"flex vc-verification-full-wrapper justify-center items-center translate-x-[10px]\">\n            <span className=\"text-white font-bold tracking-wider\">Verified</span>\n            <div\n                style={{ width: size, height: size, position: 'relative' }}\n                className={`flex items-center justify-center bg-white rounded-full ml-3 mr-3 overflow-hidden`}\n            >\n                <VCVerificationCheck size={'44px'} loading={loading} />\n                <div className=\"vc-verification-spinner-overlay\" style={spinnerStyle}>\n                    <CircleSpinner loadingState={loadingState} />\n                </div>\n            </div>\n            <span className=\"text-white font-bold tracking-wider\">Credential</span>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;AAGY,MAAC,mBAAmB,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK;AAC1D,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,SAAS,GAAG;AACpB,IAAI,KAAK,EAAE,IAAI;AACf,IAAI,MAAM,EAAE,IAAI;AAChB,GAAG,CAAC;AACJ,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,yBAAyB;AACxC,IAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;AACnC,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,sFAAsF;AACrG,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,kCAAkC;AACjD,IAAI,GAAG,EAAE,CAAC,EAAE,GAAG,wBAAwB,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;AAC1D,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,GAAG,EAAE,mBAAmB;AAC5B,GAAG,CAAC,CAAC,CAAC,CAAC;AACP,EAAE;AAEU,MAAC,2BAA2B,GAAG,CAAC;AAC5C,EAAE,IAAI,GAAG,MAAM;AACf,EAAE,OAAO,GAAG,IAAI;AAChB,CAAC,KAAK;AACN,EAAE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7D,EAAE,MAAM,YAAY,GAAG;AACvB,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,MAAM,EAAE,MAAM;AAClB,IAAI,KAAK,EAAE,MAAM;AACjB,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,MAAM,GAAG,UAAU,CAAC,MAAM,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC;AACrE,IAAI,OAAO,MAAM;AACjB,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAC3B,KAAK,CAAC;AACN,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,YAAY,GAAG,OAAO,IAAI,cAAc,GAAG,kBAAkB,CAAC,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC;AACrG,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,kFAAkF;AACjG,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACjD,IAAI,SAAS,EAAE,qCAAqC;AACpD,GAAG,EAAE,UAAU,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC7D,IAAI,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE;AAC9D,IAAI,SAAS,EAAE,CAAC,gFAAgF,CAAC;AACjG,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE;AAC9D,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO;AACX,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,iCAAiC;AAChD,IAAI,KAAK,EAAE,YAAY;AACvB,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE;AACxD,IAAI,YAAY;AAChB,GAAG,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACpD,IAAI,SAAS,EAAE,qCAAqC;AACpD,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;AACpB;;;;"}

package/dist/esm/{VCVerificationPill-14ba1e6c.js → VCVerificationPill-dd174003.js}

@@ -1,4 +1,7 @@
 import React from 'react';
+import VerificationFailedIcon from './RedXCircle.svg';
+import VerificationPassedIcon from './GreenCheckCircle.svg';
+import VerificationWarningIcon from './YellowWarningCircle.svg';
 
 var util;
 (function (util) {
@@ -3239,12 +3242,6 @@ mod.object({
   credentialSubject: CredentialSubjectValidator.optional()
 });
 
-var VerificationFailedIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiByeD0iMTUiIGZpbGw9IiNFMTFENDgiLz4KPHBhdGggZD0iTTIwLjYyNSA5LjM3NUw5LjM3NSAyMC42MjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0yMC42MjUgMjAuNjI1TDkuMzc1IDkuMzc1IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
-
-var VerificationPassedIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiByeD0iMTUiIGZpbGw9IiM0MENCQTYiLz4KPHBhdGggZD0iTTIxLjg3NSAxMC42MjU0TDEzLjEyNSAxOS4zNzVMOC43NSAxNS4wMDA0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
-
-var VerificationWarningIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiByeD0iMTUiIGZpbGw9IiNGQUNDMTUiLz4KPHBhdGggZD0iTTEzLjI4NTcgMTYuOTA4TDEyLjQzMDcgOC43SDE3LjU2MDdMMTYuNzA1NyAxNi45MDhIMTMuMjg1N1pNMTQuOTk1NyAyMi4xOUMxNC4yNjEgMjIuMTkgMTMuNjU5NCAyMS45NjgzIDEzLjE5MDcgMjEuNTI1QzEyLjcyMiAyMS4wNjkgMTIuNDg3NyAyMC41MzA3IDEyLjQ4NzcgMTkuOTFDMTIuNDg3NyAxOS4yNzY3IDEyLjcyMiAxOC43NDQ3IDEzLjE5MDcgMTguMzE0QzEzLjY1OTQgMTcuODgzMyAxNC4yNjEgMTcuNjY4IDE0Ljk5NTcgMTcuNjY4QzE1Ljc0MyAxNy42NjggMTYuMzQ0NyAxNy44ODMzIDE2LjgwMDcgMTguMzE0QzE3LjI2OTQgMTguNzQ0NyAxNy41MDM3IDE5LjI3NjcgMTcuNTAzNyAxOS45MUMxNy41MDM3IDIwLjUzMDcgMTcuMjY5NCAyMS4wNjkgMTYuODAwNyAyMS41MjVDMTYuMzQ0NyAyMS45NjgzIDE1Ljc0MyAyMi4xOSAxNC45OTU3IDIyLjE5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
-
 const StatusToBgColor = {
   [VerificationStatusEnum.Success]: "bg-emerald-500",
   [VerificationStatusEnum.Failed]: "bg-yellow-400",
@@ -3303,4 +3300,4 @@ const VCVerificationPill = ({
 };
 
 export { ValidationStateIndicator as V, VCVerificationPill as a };
-//# sourceMappingURL=VCVerificationPill-14ba1e6c.js.map
+//# sourceMappingURL=VCVerificationPill-dd174003.js.map