@learncard/react 2.8.61 → 2.9.2

package/dist/cjs/VCThumbnail-f84d0d01.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var React = require('react');
+var FatArrow = require('./icon.green.fat-arrow.png');
+var VerifiedCheck = require('./verified-check.png');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var FatArrow__default = /*#__PURE__*/_interopDefaultLegacy(FatArrow);
+var VerifiedCheck__default = /*#__PURE__*/_interopDefaultLegacy(VerifiedCheck);
+
+const VCThumbnail = ({
+  title,
+  createdAt,
+  issuerImage,
+  userImage,
+  userImageComponent,
+  badgeImage,
+  className = "",
+  listView = false,
+  onClick = () => {
+  }
+}) => {
+  var _a, _b, _c;
+  let imageElement = null;
+  let userImageEl = null;
+  if (issuerImage) {
+    imageElement = /* @__PURE__ */ React__default["default"].createElement("img", { className: "h-full w-full object-cover", src: issuerImage, alt: "issuer image" });
+  } else if (badgeImage) {
+    imageElement = /* @__PURE__ */ React__default["default"].createElement("img", { className: "h-full w-full object-cover", src: badgeImage, alt: "badge image" });
+  }
+  if (userImage) {
+    userImageEl = /* @__PURE__ */ React__default["default"].createElement("div", { className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct" }, /* @__PURE__ */ React__default["default"].createElement(
+      "img",
+      {
+        className: "w-full h-full absolute rounded-full object-cover border-solid border-4 border-white",
+        src: userImage,
+        alt: "user image"
+      }
+    ));
+  } else if (!userImage && userImageComponent) {
+    userImageEl = userImageComponent;
+  }
+  const titleClass = issuerImage || badgeImage ? "items-start justify-center w-3/4 text-left" : "item-center justify-center w-full text-center";
+  if (listView) {
+    return /* @__PURE__ */ React__default["default"].createElement(
+      "div",
+      {
+        onClick,
+        className: `flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 max-w-sm vc-thumbnail-listview-container ${className}`,
+        "data-testid": "vc-thumbnail-list-view"
+      },
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-between mb-3 z-10" }, imageElement && /* @__PURE__ */ React__default["default"].createElement(
+        "div",
+        {
+          className: "flex flex-row justify-center items-center w-1/4 text-center",
+          "data-testid": "vc-thumbnail-image"
+        },
+        /* @__PURE__ */ React__default["default"].createElement("div", { className: "h-16 w-16 border-solid border-2 border-black bg-white" }, imageElement)
+      ), /* @__PURE__ */ React__default["default"].createElement("div", { className: `flex flex-col  ${titleClass}` }, /* @__PURE__ */ React__default["default"].createElement(
+        "h2",
+        {
+          className: "ml-1 sm:ml-0 md:ml-0 lg:ml-0 text-base tracking-wide leading-snug text-left line-clamp-2",
+          "data-testid": "vc-thumbnail-title"
+        },
+        title != null ? title : ""
+      ), /* @__PURE__ */ React__default["default"].createElement(
+        "p",
+        {
+          className: "ml-1 sm:ml-0 md:ml-0 lg:ml-0 text-sm font-light text-center line-clamp-1",
+          "data-testid": "vc-thumbnail-createdAt"
+        },
+        createdAt != null ? createdAt : ""
+      ))),
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center w-full mt-3 vc-thumbnail-footer" }, /* @__PURE__ */ React__default["default"].createElement("h3", { className: "text-white text-sm text-right font-normal tracking-wide leading-tight flex-1" }, "Verified"), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-4 border-emerald-700 overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement(
+        "img",
+        {
+          className: "h-full w-full object-cover",
+          src: (_a = VerifiedCheck__default["default"]) != null ? _a : "",
+          alt: "credential icon"
+        }
+      ))), /* @__PURE__ */ React__default["default"].createElement("h3", { className: "text-white text-sm text-left font-normal tracking-wide leading-tight flex-1" }, "Credential"))
+    );
+  }
+  const vcThumbNailAltContainerClass = !badgeImage ? "vc-thumbnail-alt-container" : "";
+  return /* @__PURE__ */ React__default["default"].createElement(
+    "div",
+    {
+      onClick,
+      className: `relative py-3 xxsm:py-1 rounded-3xl shadow-3xl bg-emerald-700 vc-thumbnail-container ${vcThumbNailAltContainerClass} ${className}`,
+      "data-testid": "vc-thumbnail"
+    },
+    /* @__PURE__ */ React__default["default"].createElement("div", { className: "h-full w-full absolute" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-col items-center justify-center z-10 text-center w-full" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-center w-full px-2" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-center w-full" }, /* @__PURE__ */ React__default["default"].createElement(
+      "h2",
+      {
+        className: "text-base tracking-wide leading-snug text-center line-clamp-2",
+        "data-testid": "vc-thumbnail-title"
+      },
+      title != null ? title : ""
+    ))), /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ React__default["default"].createElement(
+      "p",
+      {
+        className: "text-sm font-light text-center line-clamp-1",
+        "data-testid": "vc-thumbnail-createdAt"
+      },
+      createdAt != null ? createdAt : ""
+    )), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-center mt-3 xxsm:mt-1 w-full" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct" }, /* @__PURE__ */ React__default["default"].createElement(
+      "img",
+      {
+        className: "h-5/6 w-10/12 left-1 top-1 absolute rounded-full object-cover",
+        src: issuerImage,
+        alt: "issuer image"
+      }
+    )), /* @__PURE__ */ React__default["default"].createElement(
+      "img",
+      {
+        className: "h-8 w-8 my-0 mx-4",
+        src: (_b = FatArrow__default["default"]) != null ? _b : "",
+        alt: "fat arrow icon"
+      }
+    ), userImageEl)), badgeImage && /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center w-full mt-4 xxxsm:mt-0" }, /* @__PURE__ */ React__default["default"].createElement(
+      "div",
+      {
+        className: "border-solid border-2 border-black bg-white relative w-1/4 h-0 overflow-hidden pt-25pct pb-0 px-0",
+        "data-testid": "vc-thumbnail-badge"
+      },
+      /* @__PURE__ */ React__default["default"].createElement(
+        "img",
+        {
+          className: "h-full w-full object-cover absolute top-0 left-0",
+          src: badgeImage,
+          alt: "badge image"
+        }
+      )
+    )), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center absolute right-2 bottom-5 xxsm:bottom-3 xxxsm:bottom-3 h-8 w-8 rounded-full bg-white overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-2 border-emerald-700 overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement(
+      "img",
+      {
+        className: "h-full w-full object-cover",
+        src: (_c = VerifiedCheck__default["default"]) != null ? _c : "",
+        alt: "credential icon"
+      }
+    ))))
+  );
+};
+
+exports.VCThumbnail = VCThumbnail;
+//# sourceMappingURL=VCThumbnail-f84d0d01.js.map

package/dist/cjs/{VCThumbnail-6bf86bb2.js.map → VCThumbnail-f84d0d01.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCThumbnail-6bf86bb2.js","sources":["../../src/components/VCThumbnail/VCThumbnail.tsx"],"sourcesContent":["import React from 'react';\n\nimport FatArrow from '../../assets/images/icon.green.fat-arrow.png';\nimport VerifiedCheck from '../../assets/images/verified-check.png';\n\nimport { VCThumbnailProps } from './types';\n\nexport const VCThumbnail: React.FC<VCThumbnailProps> = ({\n    title,\n    createdAt,\n    issuerImage,\n    userImage,\n    userImageComponent,\n    badgeImage,\n    className = '',\n    listView = false,\n    onClick = () => {},\n}) => {\n    let imageElement: React.ReactNode | null = null;\n    let userImageEl: React.ReactNode | null = null;\n\n    if (issuerImage) {\n        imageElement = (\n            <img className=\"h-full w-full object-cover\" src={issuerImage} alt=\"issuer image\" />\n        );\n    } else if (badgeImage) {\n        imageElement = (\n            <img className=\"h-full w-full object-cover\" src={badgeImage} alt=\"badge image\" />\n        );\n    }\n\n    if (userImage) {\n        userImageEl = (\n            <div className=\"inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct\">\n                <img\n                    className=\"w-full h-full absolute rounded-full object-cover border-solid border-4 border-white\"\n                    src={userImage}\n                    alt=\"user image\"\n                />\n            </div>\n        );\n    } else if (!userImage && userImageComponent) {\n        userImageEl = userImageComponent;\n    }\n\n    const titleClass =\n        issuerImage || badgeImage\n            ? 'items-start justify-center w-3/4 text-left'\n            : 'item-center justify-center w-full text-center';\n\n    if (listView) {\n        return (\n            <div\n                onClick={onClick}\n                className={`flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 max-w-sm vc-thumbnail-listview-container ${className}`}\n                data-testid=\"vc-thumbnail-list-view\"\n            >\n                <div className=\"flex flex-row items-center justify-between mb-3 z-10\">\n                    {imageElement && (\n                        <div\n                            className=\"flex flex-row justify-center items-center w-1/4 text-center\"\n                            data-testid=\"vc-thumbnail-image\"\n                        >\n                            <div className=\"h-16 w-16 border-solid border-2 border-black bg-white\">\n                                {imageElement}\n                            </div>\n                        </div>\n                    )}\n\n                    <div className={`flex flex-col  ${titleClass}`}>\n                        <h2\n                            className=\"ml-1 sm:ml-0 md:ml-0 lg:ml-0 text-base tracking-wide leading-snug text-left line-clamp-2\"\n                            data-testid=\"vc-thumbnail-title\"\n                        >\n                            {title ?? ''}\n                        </h2>\n                        <p\n                            className=\"ml-1 sm:ml-0 md:ml-0 lg:ml-0 text-sm font-light text-center line-clamp-1\"\n                            data-testid=\"vc-thumbnail-createdAt\"\n                        >\n                            {createdAt ?? ''}\n                        </p>\n                    </div>\n                </div>\n                <div className=\"flex items-center justify-center w-full mt-3 vc-thumbnail-footer\">\n                    <h3 className=\"text-white text-sm text-right font-normal tracking-wide leading-tight flex-1\">\n                        Verified\n                    </h3>\n                    <div className=\"flex items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden\">\n                        <div className=\"flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-4 border-emerald-700 overflow-hidden\">\n                            <img\n                                className=\"h-full w-full object-cover\"\n                                src={VerifiedCheck ?? ''}\n                                alt=\"credential icon\"\n                            />\n                        </div>\n                    </div>\n                    <h3 className=\"text-white text-sm text-left font-normal tracking-wide leading-tight flex-1\">\n                        Credential\n                    </h3>\n                </div>\n            </div>\n        );\n    }\n\n    const vcThumbNailAltContainerClass = !badgeImage ? 'vc-thumbnail-alt-container' : '';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`relative py-3 xxsm:py-1 rounded-3xl shadow-3xl bg-emerald-700 vc-thumbnail-container ${vcThumbNailAltContainerClass} ${className}`}\n            data-testid=\"vc-thumbnail\"\n        >\n            <div className=\"h-full w-full absolute\">\n                <div className=\"flex flex-col items-center justify-center z-10 text-center w-full\">\n                    <div className=\"flex flex-row items-center justify-center w-full px-2\">\n                        <div className=\"flex flex-row items-center justify-center w-full\">\n                            <h2\n                                className=\"text-base tracking-wide leading-snug text-center line-clamp-2\"\n                                data-testid=\"vc-thumbnail-title\"\n                            >\n                                {title ?? ''}\n                            </h2>\n                        </div>\n                    </div>\n                    <div className=\"w-full mt-2\">\n                        <p\n                            className=\"text-sm font-light text-center line-clamp-1\"\n                            data-testid=\"vc-thumbnail-createdAt\"\n                        >\n                            {createdAt ?? ''}\n                        </p>\n                    </div>\n\n                    <div className=\"flex flex-row items-center justify-center mt-3 xxsm:mt-1 w-full\">\n                        <div className=\"inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct\">\n                            <img\n                                className=\"h-5/6 w-10/12 left-1 top-1 absolute rounded-full object-cover\"\n                                src={issuerImage}\n                                alt=\"issuer image\"\n                            />\n                        </div>\n\n                        <img\n                            className=\"h-8 w-8 my-0 mx-4\"\n                            src={FatArrow ?? ''}\n                            alt=\"fat arrow icon\"\n                        />\n                        {userImageEl}\n                    </div>\n                </div>\n\n                {badgeImage && (\n                    <div className=\"flex items-center justify-center w-full mt-4 xxxsm:mt-0\">\n                        <div\n                            className=\"border-solid border-2 border-black bg-white relative w-1/4 h-0 overflow-hidden pt-25pct pb-0 px-0\"\n                            data-testid=\"vc-thumbnail-badge\"\n                        >\n                            <img\n                                className=\"h-full w-full object-cover absolute top-0 left-0\"\n                                src={badgeImage}\n                                alt=\"badge image\"\n                            />\n                        </div>\n                    </div>\n                )}\n\n                <div className=\"flex items-center justify-center absolute right-2 bottom-5 xxsm:bottom-3 xxxsm:bottom-3 h-8 w-8 rounded-full bg-white overflow-hidden\">\n                    <div className=\"flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-2 border-emerald-700 overflow-hidden\">\n                        <img\n                            className=\"h-full w-full object-cover\"\n                            src={VerifiedCheck ?? ''}\n                            alt=\"credential icon\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default VCThumbnail;\n"],"names":["React","VerifiedCheck","FatArrow"],"mappings":"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"}
+{"version":3,"file":"VCThumbnail-f84d0d01.js","sources":["../../src/components/VCThumbnail/VCThumbnail.tsx"],"sourcesContent":["import React from 'react';\n\nimport FatArrow from '../../assets/images/icon.green.fat-arrow.png';\nimport VerifiedCheck from '../../assets/images/verified-check.png';\n\nimport { VCThumbnailProps } from './types';\n\nexport const VCThumbnail: React.FC<VCThumbnailProps> = ({\n    title,\n    createdAt,\n    issuerImage,\n    userImage,\n    userImageComponent,\n    badgeImage,\n    className = '',\n    listView = false,\n    onClick = () => {},\n}) => {\n    let imageElement: React.ReactNode | null = null;\n    let userImageEl: React.ReactNode | null = null;\n\n    if (issuerImage) {\n        imageElement = (\n            <img className=\"h-full w-full object-cover\" src={issuerImage} alt=\"issuer image\" />\n        );\n    } else if (badgeImage) {\n        imageElement = (\n            <img className=\"h-full w-full object-cover\" src={badgeImage} alt=\"badge image\" />\n        );\n    }\n\n    if (userImage) {\n        userImageEl = (\n            <div className=\"inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct\">\n                <img\n                    className=\"w-full h-full absolute rounded-full object-cover border-solid border-4 border-white\"\n                    src={userImage}\n                    alt=\"user image\"\n                />\n            </div>\n        );\n    } else if (!userImage && userImageComponent) {\n        userImageEl = userImageComponent;\n    }\n\n    const titleClass =\n        issuerImage || badgeImage\n            ? 'items-start justify-center w-3/4 text-left'\n            : 'item-center justify-center w-full text-center';\n\n    if (listView) {\n        return (\n            <div\n                onClick={onClick}\n                className={`flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 max-w-sm vc-thumbnail-listview-container ${className}`}\n                data-testid=\"vc-thumbnail-list-view\"\n            >\n                <div className=\"flex flex-row items-center justify-between mb-3 z-10\">\n                    {imageElement && (\n                        <div\n                            className=\"flex flex-row justify-center items-center w-1/4 text-center\"\n                            data-testid=\"vc-thumbnail-image\"\n                        >\n                            <div className=\"h-16 w-16 border-solid border-2 border-black bg-white\">\n                                {imageElement}\n                            </div>\n                        </div>\n                    )}\n\n                    <div className={`flex flex-col  ${titleClass}`}>\n                        <h2\n                            className=\"ml-1 sm:ml-0 md:ml-0 lg:ml-0 text-base tracking-wide leading-snug text-left line-clamp-2\"\n                            data-testid=\"vc-thumbnail-title\"\n                        >\n                            {title ?? ''}\n                        </h2>\n                        <p\n                            className=\"ml-1 sm:ml-0 md:ml-0 lg:ml-0 text-sm font-light text-center line-clamp-1\"\n                            data-testid=\"vc-thumbnail-createdAt\"\n                        >\n                            {createdAt ?? ''}\n                        </p>\n                    </div>\n                </div>\n                <div className=\"flex items-center justify-center w-full mt-3 vc-thumbnail-footer\">\n                    <h3 className=\"text-white text-sm text-right font-normal tracking-wide leading-tight flex-1\">\n                        Verified\n                    </h3>\n                    <div className=\"flex items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden\">\n                        <div className=\"flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-4 border-emerald-700 overflow-hidden\">\n                            <img\n                                className=\"h-full w-full object-cover\"\n                                src={VerifiedCheck ?? ''}\n                                alt=\"credential icon\"\n                            />\n                        </div>\n                    </div>\n                    <h3 className=\"text-white text-sm text-left font-normal tracking-wide leading-tight flex-1\">\n                        Credential\n                    </h3>\n                </div>\n            </div>\n        );\n    }\n\n    const vcThumbNailAltContainerClass = !badgeImage ? 'vc-thumbnail-alt-container' : '';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`relative py-3 xxsm:py-1 rounded-3xl shadow-3xl bg-emerald-700 vc-thumbnail-container ${vcThumbNailAltContainerClass} ${className}`}\n            data-testid=\"vc-thumbnail\"\n        >\n            <div className=\"h-full w-full absolute\">\n                <div className=\"flex flex-col items-center justify-center z-10 text-center w-full\">\n                    <div className=\"flex flex-row items-center justify-center w-full px-2\">\n                        <div className=\"flex flex-row items-center justify-center w-full\">\n                            <h2\n                                className=\"text-base tracking-wide leading-snug text-center line-clamp-2\"\n                                data-testid=\"vc-thumbnail-title\"\n                            >\n                                {title ?? ''}\n                            </h2>\n                        </div>\n                    </div>\n                    <div className=\"w-full mt-2\">\n                        <p\n                            className=\"text-sm font-light text-center line-clamp-1\"\n                            data-testid=\"vc-thumbnail-createdAt\"\n                        >\n                            {createdAt ?? ''}\n                        </p>\n                    </div>\n\n                    <div className=\"flex flex-row items-center justify-center mt-3 xxsm:mt-1 w-full\">\n                        <div className=\"inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct\">\n                            <img\n                                className=\"h-5/6 w-10/12 left-1 top-1 absolute rounded-full object-cover\"\n                                src={issuerImage}\n                                alt=\"issuer image\"\n                            />\n                        </div>\n\n                        <img\n                            className=\"h-8 w-8 my-0 mx-4\"\n                            src={FatArrow ?? ''}\n                            alt=\"fat arrow icon\"\n                        />\n                        {userImageEl}\n                    </div>\n                </div>\n\n                {badgeImage && (\n                    <div className=\"flex items-center justify-center w-full mt-4 xxxsm:mt-0\">\n                        <div\n                            className=\"border-solid border-2 border-black bg-white relative w-1/4 h-0 overflow-hidden pt-25pct pb-0 px-0\"\n                            data-testid=\"vc-thumbnail-badge\"\n                        >\n                            <img\n                                className=\"h-full w-full object-cover absolute top-0 left-0\"\n                                src={badgeImage}\n                                alt=\"badge image\"\n                            />\n                        </div>\n                    </div>\n                )}\n\n                <div className=\"flex items-center justify-center absolute right-2 bottom-5 xxsm:bottom-3 xxxsm:bottom-3 h-8 w-8 rounded-full bg-white overflow-hidden\">\n                    <div className=\"flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-2 border-emerald-700 overflow-hidden\">\n                        <img\n                            className=\"h-full w-full object-cover\"\n                            src={VerifiedCheck ?? ''}\n                            alt=\"credential icon\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default VCThumbnail;\n"],"names":["React","VerifiedCheck","FatArrow"],"mappings":"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"}

package/dist/cjs/VCVerificationCheck-92198135.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var React = require('react');
+var VerificationCheckDisplay = require('./vc.check.svg');
+var CircleSpinner = require('./CircleSpinner-f518569a.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var VerificationCheckDisplay__default = /*#__PURE__*/_interopDefaultLegacy(VerificationCheckDisplay);
+
+const VCVerificationCheck = ({ size = "44px" }) => {
+  var _a;
+  const imageSize = {
+    width: size,
+    height: size
+  };
+  return /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-verification-wrapper", style: { position: "relative" } }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center bg-white rounded-full overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement(
+    "img",
+    {
+      className: "h-full w-full object-contain p-1",
+      src: (_a = VerificationCheckDisplay__default["default"]) != null ? _a : "",
+      style: imageSize,
+      alt: "Verification Icon"
+    }
+  )));
+};
+const VCVerificationCheckWithSpinner = ({ size = "44px", spinnerSize = "60px", loading = true, withBorder = false }) => {
+  const loadingState = loading ? CircleSpinner.CircleLoadingState.spin : CircleSpinner.CircleLoadingState.stop;
+  const spinnerStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: spinnerSize,
+    width: spinnerSize
+  };
+  const spinnerSizeNumber = parseInt(spinnerSize.replace("px", ""));
+  const offset = spinnerSizeNumber > 50 ? 3 : 2;
+  return /* @__PURE__ */ React__default["default"].createElement(
+    "div",
+    {
+      style: { width: spinnerSize, height: spinnerSize, position: "relative" },
+      className: `flex items-center justify-center bg-white rounded-full overflow-hidden select-none ${withBorder ? " ml-3 mr-3" : ""}`
+    },
+    /* @__PURE__ */ React__default["default"].createElement(VCVerificationCheck, { size, loading }),
+    /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-verification-spinner-overlay", style: spinnerStyle }, /* @__PURE__ */ React__default["default"].createElement(
+      CircleSpinner.CircleSpinner,
+      {
+        loadingState,
+        size: spinnerSizeNumber,
+        marginOffset: offset
+      }
+    ))
+  );
+};
+const VCVerificationCheckWithText = ({ size = "44px", spinnerSize = "60px", loading = true }) => {
+  const [defaultLoading, setDefaultLoading] = React.useState(true);
+  React.useEffect(() => {
+    let timer1 = setTimeout(() => setDefaultLoading(false), 3 * 1e3);
+    return () => {
+      clearTimeout(timer1);
+    };
+  });
+  return /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex justify-center items-center translate-x-[10px] w-full vc-verification-full-wrapper" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-white font-bold tracking-wider" }, "Verified"), /* @__PURE__ */ React__default["default"].createElement(
+    VCVerificationCheckWithSpinner,
+    {
+      size,
+      spinnerSize,
+      loading: loading || defaultLoading,
+      withBorder: true
+    }
+  ), /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-white font-bold tracking-wider" }, "Credential"));
+};
+
+exports.VCVerificationCheck = VCVerificationCheck;
+exports.VCVerificationCheckWithSpinner = VCVerificationCheckWithSpinner;
+exports.VCVerificationCheckWithText = VCVerificationCheckWithText;
+//# sourceMappingURL=VCVerificationCheck-92198135.js.map

package/dist/cjs/{VCVerificationCheck-46fa75d3.js.map → VCVerificationCheck-92198135.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCVerificationCheck-46fa75d3.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 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 VCVerificationCheckWithSpinner: React.FC<\n    VCVerificationCheckProps & { spinnerSize?: string; withBorder?: boolean }\n> = ({ size = '44px', spinnerSize = '60px', loading = true, withBorder = false }) => {\n    const loadingState = loading ? CircleLoadingState.spin : CircleLoadingState.stop;\n\n    const spinnerStyle: React.CSSProperties = {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: spinnerSize,\n        width: spinnerSize,\n    };\n\n    const spinnerSizeNumber = parseInt(spinnerSize.replace('px', ''));\n    const offset = spinnerSizeNumber > 50 ? 3 : 2;\n\n    return (\n        <div\n            style={{ width: spinnerSize, height: spinnerSize, position: 'relative' }}\n            className={`flex items-center justify-center bg-white rounded-full overflow-hidden select-none ${withBorder ? ' ml-3 mr-3' : ''\n                }`}\n        >\n            <VCVerificationCheck size={size} loading={loading} />\n            <div className=\"vc-verification-spinner-overlay\" style={spinnerStyle}>\n                <CircleSpinner\n                    loadingState={loadingState}\n                    size={spinnerSizeNumber}\n                    marginOffset={offset}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport const VCVerificationCheckWithText: React.FC<\n    VCVerificationCheckProps & { spinnerSize?: string }\n> = ({ size = '44px', spinnerSize = '60px', loading = true }) => {\n    const [defaultLoading, setDefaultLoading] = useState(true);\n\n    useEffect(() => {\n        let timer1 = setTimeout(() => setDefaultLoading(false), 3 * 1000);\n        return () => {\n            clearTimeout(timer1);\n        };\n    });\n\n    return (\n        <div className=\"flex justify-center items-center translate-x-[10px] w-full vc-verification-full-wrapper\">\n            <span className=\"text-white font-bold tracking-wider\">Verified</span>\n            <VCVerificationCheckWithSpinner\n                size={size}\n                spinnerSize={spinnerSize}\n                loading={loading || defaultLoading}\n                withBorder\n            />\n            <span className=\"text-white font-bold tracking-wider\">Credential</span>\n        </div>\n    );\n};\n"],"names":["React","VerificationCheckDisplay","CircleLoadingState","CircleSpinner","useState","useEffect"],"mappings":"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"}
+{"version":3,"file":"VCVerificationCheck-92198135.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 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 VCVerificationCheckWithSpinner: React.FC<\n    VCVerificationCheckProps & { spinnerSize?: string; withBorder?: boolean }\n> = ({ size = '44px', spinnerSize = '60px', loading = true, withBorder = false }) => {\n    const loadingState = loading ? CircleLoadingState.spin : CircleLoadingState.stop;\n\n    const spinnerStyle: React.CSSProperties = {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: spinnerSize,\n        width: spinnerSize,\n    };\n\n    const spinnerSizeNumber = parseInt(spinnerSize.replace('px', ''));\n    const offset = spinnerSizeNumber > 50 ? 3 : 2;\n\n    return (\n        <div\n            style={{ width: spinnerSize, height: spinnerSize, position: 'relative' }}\n            className={`flex items-center justify-center bg-white rounded-full overflow-hidden select-none ${withBorder ? ' ml-3 mr-3' : ''\n                }`}\n        >\n            <VCVerificationCheck size={size} loading={loading} />\n            <div className=\"vc-verification-spinner-overlay\" style={spinnerStyle}>\n                <CircleSpinner\n                    loadingState={loadingState}\n                    size={spinnerSizeNumber}\n                    marginOffset={offset}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport const VCVerificationCheckWithText: React.FC<\n    VCVerificationCheckProps & { spinnerSize?: string }\n> = ({ size = '44px', spinnerSize = '60px', loading = true }) => {\n    const [defaultLoading, setDefaultLoading] = useState(true);\n\n    useEffect(() => {\n        let timer1 = setTimeout(() => setDefaultLoading(false), 3 * 1000);\n        return () => {\n            clearTimeout(timer1);\n        };\n    });\n\n    return (\n        <div className=\"flex justify-center items-center translate-x-[10px] w-full vc-verification-full-wrapper\">\n            <span className=\"text-white font-bold tracking-wider\">Verified</span>\n            <VCVerificationCheckWithSpinner\n                size={size}\n                spinnerSize={spinnerSize}\n                loading={loading || defaultLoading}\n                withBorder\n            />\n            <span className=\"text-white font-bold tracking-wider\">Credential</span>\n        </div>\n    );\n};\n"],"names":["React","VerificationCheckDisplay","CircleLoadingState","CircleSpinner","useState","useEffect"],"mappings":"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"}

package/dist/cjs/{VCVerificationPill-88723dfa.js → VCVerificationPill-729ac239.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var types_esm = require('./types.esm-6ce4cc67.js');
+var types_esm = require('./types.esm-beffa54c.js');
 var VerificationFailedIcon = require('./RedXCircle.svg');
 var VerificationPassedIcon = require('./GreenCheckCircle.svg');
 var VerificationWarningIcon = require('./YellowWarningCircle.svg');
@@ -36,15 +36,14 @@ const StatusToText = {
 const ValidationStateIndicator = ({ status }) => {
   const bgColor = StatusToBgColor[status];
   const source = StatusToIcon[status];
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: `relative rounded-full w-[30px] h-[30px] ${bgColor}`
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "relative w-[100%] h-[100%] flex items-center justify-center rounded-[50%] bg-white rounded-full overflow-hidden"
-  }, /* @__PURE__ */ React__default["default"].createElement("img", {
-    className: "h-full w-full object-contain p-1",
-    src: source != null ? source : "",
-    alt: "Verification Status Icon"
-  })));
+  return /* @__PURE__ */ React__default["default"].createElement("div", { className: `relative rounded-full w-[30px] h-[30px] ${bgColor}` }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "relative w-[100%] h-[100%] flex items-center justify-center rounded-[50%] bg-white rounded-full overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement(
+    "img",
+    {
+      className: "h-full w-full object-contain p-1",
+      src: source != null ? source : "",
+      alt: "Verification Status Icon"
+    }
+  )));
 };
 const VCVerificationPill = ({
   message = "",
@@ -53,23 +52,9 @@ const VCVerificationPill = ({
 }) => {
   const statusColor = StatusToTextColor[status];
   const statusInfoText = StatusToText[status];
-  return /* @__PURE__ */ React__default["default"].createElement("section", {
-    className: "flex width-full bg-white p-2 px-5 my-3.5 justify-between items-center relative vc-verification-checklist-pill rounded-[22px]"
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "vc-pill-left"
-  }, /* @__PURE__ */ React__default["default"].createElement("p", {
-    className: `text-[10px] font-bold status-text uppercase ${statusColor}`
-  }, statusInfoText), /* @__PURE__ */ React__default["default"].createElement("p", {
-    className: "text-[12px] text-grayscale-900 vc-pill-text"
-  }, message), details && /* @__PURE__ */ React__default["default"].createElement("p", {
-    className: "text-[12px] text-gray-600"
-  }, " ", details)), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "vc-pill-right"
-  }, /* @__PURE__ */ React__default["default"].createElement(ValidationStateIndicator, {
-    status
-  })));
+  return /* @__PURE__ */ React__default["default"].createElement("section", { className: "flex width-full bg-white p-2 px-5 my-3.5 justify-between items-center relative vc-verification-checklist-pill rounded-[22px]" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-pill-left" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: `text-[10px] font-bold status-text uppercase ${statusColor}` }, statusInfoText), /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[12px] text-grayscale-900 vc-pill-text" }, message), details && /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[12px] text-gray-600" }, " ", details)), /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-pill-right" }, /* @__PURE__ */ React__default["default"].createElement(ValidationStateIndicator, { status })));
 };
 
 exports.VCVerificationPill = VCVerificationPill;
 exports.ValidationStateIndicator = ValidationStateIndicator;
-//# sourceMappingURL=VCVerificationPill-88723dfa.js.map
+//# sourceMappingURL=VCVerificationPill-729ac239.js.map

package/dist/cjs/{VCVerificationPill-88723dfa.js.map → VCVerificationPill-729ac239.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCVerificationPill-88723dfa.js","sources":["../../src/components/VCVerificationPill/VCVerificationPill.tsx"],"sourcesContent":["import React from 'react';\nimport { VerificationStatus, VerificationStatusEnum } from '@learncard/types';\n\nimport VerificationFailedIcon from '../../assets/images/RedXCircle.svg';\nimport VerificationPassedIcon from '../../assets/images/GreenCheckCircle.svg';\nimport VerificationWarningIcon from '../../assets/images/YellowWarningCircle.svg';\n\ntype VerificationDisplayItemProps = {\n    status?: VerificationStatus;\n    message?: string;\n    details?: string;\n};\n\ntype VerifiableStateIndicatorProps = {\n    status: VerificationStatus;\n};\n\nconst StatusToBgColor = {\n    [VerificationStatusEnum.Success]: 'bg-emerald-500',\n    [VerificationStatusEnum.Failed]: 'bg-yellow-400',\n    [VerificationStatusEnum.Error]: 'bg-rose-600',\n};\n\nconst StatusToTextColor = {\n    [VerificationStatusEnum.Success]: 'text-emerald-700',\n    [VerificationStatusEnum.Failed]: 'text-yellow-400',\n    [VerificationStatusEnum.Error]: 'text-rose-600',\n};\n\nconst StatusToIcon = {\n    [VerificationStatusEnum.Success]: VerificationPassedIcon,\n    [VerificationStatusEnum.Failed]: VerificationWarningIcon,\n    [VerificationStatusEnum.Error]: VerificationFailedIcon,\n};\n\nconst StatusToText = {\n    [VerificationStatusEnum.Success]: 'Verification Success',\n    [VerificationStatusEnum.Error]: 'Verification Error ',\n    [VerificationStatusEnum.Failed]: 'Verification Failed',\n};\n\nexport const ValidationStateIndicator: React.FC<VerifiableStateIndicatorProps> = ({ status }) => {\n    const bgColor = StatusToBgColor[status];\n    const source = StatusToIcon[status];\n\n    return (\n        <div className={`relative rounded-full w-[30px] h-[30px] ${bgColor}`}>\n            <div className=\"relative w-[100%] h-[100%] 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={source ?? ''}\n                    alt=\"Verification Status Icon\"\n                />\n            </div>\n        </div>\n    );\n};\n\nconst VCVerificationPill: React.FC<VerificationDisplayItemProps> = ({\n    message = '',\n    details,\n    status = VerificationStatusEnum.Success,\n}) => {\n    const statusColor = StatusToTextColor[status];\n    const statusInfoText = StatusToText[status];\n\n    return (\n        <section className=\"flex width-full bg-white p-2 px-5 my-3.5 justify-between items-center relative vc-verification-checklist-pill rounded-[22px]\">\n            <div className=\"vc-pill-left\">\n                <p className={`text-[10px] font-bold status-text uppercase ${statusColor}`}>\n                    {statusInfoText}\n                </p>\n\n                <p className=\"text-[12px] text-grayscale-900 vc-pill-text\">{message}</p>\n\n                {details && <p className=\"text-[12px] text-gray-600\"> {details}</p>}\n            </div>\n            <div className=\"vc-pill-right\">\n                <ValidationStateIndicator status={status} />\n            </div>\n        </section>\n    );\n};\n\nexport default VCVerificationPill;\n"],"names":["VerificationStatusEnum","VerificationPassedIcon","VerificationWarningIcon","VerificationFailedIcon","React"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,eAAkB,GAAA;AAAA,EACpB,CAACA,iCAAuB,OAAU,GAAA,gBAAA;AAAA,EAClC,CAACA,iCAAuB,MAAS,GAAA,eAAA;AAAA,EACjC,CAACA,iCAAuB,KAAQ,GAAA,aAAA;AACpC,CAAA,CAAA;AAEA,MAAM,iBAAoB,GAAA;AAAA,EACtB,CAACA,iCAAuB,OAAU,GAAA,kBAAA;AAAA,EAClC,CAACA,iCAAuB,MAAS,GAAA,iBAAA;AAAA,EACjC,CAACA,iCAAuB,KAAQ,GAAA,eAAA;AACpC,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA;AAAA,EACjB,CAACA,iCAAuB,OAAU,GAAAC,0CAAA;AAAA,EAClC,CAACD,iCAAuB,MAAS,GAAAE,2CAAA;AAAA,EACjC,CAACF,iCAAuB,KAAQ,GAAAG,0CAAA;AACpC,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA;AAAA,EACjB,CAACH,iCAAuB,OAAU,GAAA,sBAAA;AAAA,EAClC,CAACA,iCAAuB,KAAQ,GAAA,qBAAA;AAAA,EAChC,CAACA,iCAAuB,MAAS,GAAA,qBAAA;AACrC,CAAA,CAAA;AAEO,MAAM,wBAAoE,GAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AAC7F,EAAA,MAAM,UAAU,eAAgB,CAAA,MAAA,CAAA,CAAA;AAChC,EAAA,MAAM,SAAS,YAAa,CAAA,MAAA,CAAA,CAAA;AAE5B,EAAA,uBACKI,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,CAA2C,wCAAA,EAAA,OAAA,CAAA,CAAA;AAAA,GAAA,kBACtDA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,iHAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,SAAU,EAAA,kCAAA;AAAA,IACV,KAAK,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAA;AAAA,IACf,GAAI,EAAA,0BAAA;AAAA,GACR,CACJ,CACJ,CAAA,CAAA;AAER,EAAA;AAEA,MAAM,qBAA6D,CAAC;AAAA,EAChE,OAAU,GAAA,EAAA;AAAA,EACV,OAAA;AAAA,EACA,SAASJ,gCAAuB,CAAA,OAAA;AACpC,CAAM,KAAA;AACF,EAAA,MAAM,cAAc,iBAAkB,CAAA,MAAA,CAAA,CAAA;AACtC,EAAA,MAAM,iBAAiB,YAAa,CAAA,MAAA,CAAA,CAAA;AAEpC,EAAA,uBACKI,yBAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,SAAU,EAAA,8HAAA;AAAA,GAAA,kBACdA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,cAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,WAAW,CAA+C,4CAAA,EAAA,WAAA,CAAA,CAAA;AAAA,GACxD,EAAA,cACL,mBAECA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,6CAAA;AAAA,GAA+C,EAAA,OAAQ,CAEnE,EAAA,OAAA,oBAAYA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,2BAAA;AAAA,GAAA,EAA4B,GAAE,EAAA,OAAQ,CACnE,CAAA,kBACCA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,eAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAA,IAAyB,MAAA;AAAA,GAAgB,CAC9C,CACJ,CAAA,CAAA;AAER;;;;;"}
+{"version":3,"file":"VCVerificationPill-729ac239.js","sources":["../../src/components/VCVerificationPill/VCVerificationPill.tsx"],"sourcesContent":["import React from 'react';\nimport { VerificationStatus, VerificationStatusEnum } from '@learncard/types';\n\nimport VerificationFailedIcon from '../../assets/images/RedXCircle.svg';\nimport VerificationPassedIcon from '../../assets/images/GreenCheckCircle.svg';\nimport VerificationWarningIcon from '../../assets/images/YellowWarningCircle.svg';\n\ntype VerificationDisplayItemProps = {\n    status?: VerificationStatus;\n    message?: string;\n    details?: string;\n};\n\ntype VerifiableStateIndicatorProps = {\n    status: VerificationStatus;\n};\n\nconst StatusToBgColor = {\n    [VerificationStatusEnum.Success]: 'bg-emerald-500',\n    [VerificationStatusEnum.Failed]: 'bg-yellow-400',\n    [VerificationStatusEnum.Error]: 'bg-rose-600',\n};\n\nconst StatusToTextColor = {\n    [VerificationStatusEnum.Success]: 'text-emerald-700',\n    [VerificationStatusEnum.Failed]: 'text-yellow-400',\n    [VerificationStatusEnum.Error]: 'text-rose-600',\n};\n\nconst StatusToIcon = {\n    [VerificationStatusEnum.Success]: VerificationPassedIcon,\n    [VerificationStatusEnum.Failed]: VerificationWarningIcon,\n    [VerificationStatusEnum.Error]: VerificationFailedIcon,\n};\n\nconst StatusToText = {\n    [VerificationStatusEnum.Success]: 'Verification Success',\n    [VerificationStatusEnum.Error]: 'Verification Error ',\n    [VerificationStatusEnum.Failed]: 'Verification Failed',\n};\n\nexport const ValidationStateIndicator: React.FC<VerifiableStateIndicatorProps> = ({ status }) => {\n    const bgColor = StatusToBgColor[status];\n    const source = StatusToIcon[status];\n\n    return (\n        <div className={`relative rounded-full w-[30px] h-[30px] ${bgColor}`}>\n            <div className=\"relative w-[100%] h-[100%] 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={source ?? ''}\n                    alt=\"Verification Status Icon\"\n                />\n            </div>\n        </div>\n    );\n};\n\nconst VCVerificationPill: React.FC<VerificationDisplayItemProps> = ({\n    message = '',\n    details,\n    status = VerificationStatusEnum.Success,\n}) => {\n    const statusColor = StatusToTextColor[status];\n    const statusInfoText = StatusToText[status];\n\n    return (\n        <section className=\"flex width-full bg-white p-2 px-5 my-3.5 justify-between items-center relative vc-verification-checklist-pill rounded-[22px]\">\n            <div className=\"vc-pill-left\">\n                <p className={`text-[10px] font-bold status-text uppercase ${statusColor}`}>\n                    {statusInfoText}\n                </p>\n\n                <p className=\"text-[12px] text-grayscale-900 vc-pill-text\">{message}</p>\n\n                {details && <p className=\"text-[12px] text-gray-600\"> {details}</p>}\n            </div>\n            <div className=\"vc-pill-right\">\n                <ValidationStateIndicator status={status} />\n            </div>\n        </section>\n    );\n};\n\nexport default VCVerificationPill;\n"],"names":["VerificationStatusEnum","VerificationPassedIcon","VerificationWarningIcon","VerificationFailedIcon","React"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,eAAkB,GAAA;AAAA,EACpB,CAACA,gCAAuB,CAAA,OAAO,GAAG,gBAAA;AAAA,EAClC,CAACA,gCAAuB,CAAA,MAAM,GAAG,eAAA;AAAA,EACjC,CAACA,gCAAuB,CAAA,KAAK,GAAG,aAAA;AACpC,CAAA,CAAA;AAEA,MAAM,iBAAoB,GAAA;AAAA,EACtB,CAACA,gCAAuB,CAAA,OAAO,GAAG,kBAAA;AAAA,EAClC,CAACA,gCAAuB,CAAA,MAAM,GAAG,iBAAA;AAAA,EACjC,CAACA,gCAAuB,CAAA,KAAK,GAAG,eAAA;AACpC,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA;AAAA,EACjB,CAACA,gCAAuB,CAAA,OAAO,GAAGC,0CAAA;AAAA,EAClC,CAACD,gCAAuB,CAAA,MAAM,GAAGE,2CAAA;AAAA,EACjC,CAACF,gCAAuB,CAAA,KAAK,GAAGG,0CAAA;AACpC,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA;AAAA,EACjB,CAACH,gCAAuB,CAAA,OAAO,GAAG,sBAAA;AAAA,EAClC,CAACA,gCAAuB,CAAA,KAAK,GAAG,qBAAA;AAAA,EAChC,CAACA,gCAAuB,CAAA,MAAM,GAAG,qBAAA;AACrC,CAAA,CAAA;AAEO,MAAM,wBAAoE,GAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AAC7F,EAAM,MAAA,OAAA,GAAU,gBAAgB,MAAM,CAAA,CAAA;AACtC,EAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA,CAAA;AAElC,EACI,uBAAAI,yBAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,CAAA,wCAAA,EAA2C,OAAO,CAC9D,CAAA,EAAA,kBAAAA,yBAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iHACX,EAAA,kBAAAA,yBAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,SAAU,EAAA,kCAAA;AAAA,MACV,KAAK,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAA;AAAA,MACf,GAAI,EAAA,0BAAA;AAAA,KAAA;AAAA,GAEZ,CACJ,CAAA,CAAA;AAER,EAAA;AAEA,MAAM,qBAA6D,CAAC;AAAA,EAChE,OAAU,GAAA,EAAA;AAAA,EACV,OAAA;AAAA,EACA,SAASJ,gCAAuB,CAAA,OAAA;AACpC,CAAM,KAAA;AACF,EAAM,MAAA,WAAA,GAAc,kBAAkB,MAAM,CAAA,CAAA;AAC5C,EAAM,MAAA,cAAA,GAAiB,aAAa,MAAM,CAAA,CAAA;AAE1C,EAAA,+DACK,SAAQ,EAAA,EAAA,SAAA,EAAU,8HACf,EAAA,kBAAAI,yBAAA,CAAA,aAAA,CAAC,SAAI,SAAU,EAAA,cAAA,EAAA,kBACVA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAE,WAAW,CAA+C,4CAAA,EAAA,WAAW,MACnE,cACL,CAAA,0DAEC,GAAE,EAAA,EAAA,SAAA,EAAU,6CAA+C,EAAA,EAAA,OAAQ,GAEnE,OAAW,oBAAAA,yBAAA,CAAA,aAAA,CAAC,OAAE,SAAU,EAAA,2BAAA,EAAA,EAA4B,KAAE,OAAQ,CACnE,CACA,kBAAAA,yBAAA,CAAA,aAAA,CAAC,SAAI,SAAU,EAAA,eAAA,EAAA,0DACV,wBAAyB,EAAA,EAAA,MAAA,EAAgB,CAC9C,CACJ,CAAA,CAAA;AAER;;;;;"}