@learncard/react 2.8.62 → 2.9.2

package/dist/esm/VCThumbnail-835921dd.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import FatArrow from './icon.green.fat-arrow.png';
+import VerifiedCheck from './verified-check.png';
+
+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.createElement("img", { className: "h-full w-full object-cover", src: issuerImage, alt: "issuer image" });
+  } else if (badgeImage) {
+    imageElement = /* @__PURE__ */ React.createElement("img", { className: "h-full w-full object-cover", src: badgeImage, alt: "badge image" });
+  }
+  if (userImage) {
+    userImageEl = /* @__PURE__ */ React.createElement("div", { className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct" }, /* @__PURE__ */ React.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.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.createElement("div", { className: "flex flex-row items-center justify-between mb-3 z-10" }, imageElement && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "flex flex-row justify-center items-center w-1/4 text-center",
+          "data-testid": "vc-thumbnail-image"
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "h-16 w-16 border-solid border-2 border-black bg-white" }, imageElement)
+      ), /* @__PURE__ */ React.createElement("div", { className: `flex flex-col  ${titleClass}` }, /* @__PURE__ */ React.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.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.createElement("div", { className: "flex items-center justify-center w-full mt-3 vc-thumbnail-footer" }, /* @__PURE__ */ React.createElement("h3", { className: "text-white text-sm text-right font-normal tracking-wide leading-tight flex-1" }, "Verified"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden" }, /* @__PURE__ */ React.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.createElement(
+        "img",
+        {
+          className: "h-full w-full object-cover",
+          src: (_a = VerifiedCheck) != null ? _a : "",
+          alt: "credential icon"
+        }
+      ))), /* @__PURE__ */ React.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.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.createElement("div", { className: "h-full w-full absolute" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center z-10 text-center w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center justify-center w-full px-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center justify-center w-full" }, /* @__PURE__ */ React.createElement(
+      "h2",
+      {
+        className: "text-base tracking-wide leading-snug text-center line-clamp-2",
+        "data-testid": "vc-thumbnail-title"
+      },
+      title != null ? title : ""
+    ))), /* @__PURE__ */ React.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ React.createElement(
+      "p",
+      {
+        className: "text-sm font-light text-center line-clamp-1",
+        "data-testid": "vc-thumbnail-createdAt"
+      },
+      createdAt != null ? createdAt : ""
+    )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center justify-center mt-3 xxsm:mt-1 w-full" }, /* @__PURE__ */ React.createElement("div", { className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct" }, /* @__PURE__ */ React.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.createElement(
+      "img",
+      {
+        className: "h-8 w-8 my-0 mx-4",
+        src: (_b = FatArrow) != null ? _b : "",
+        alt: "fat arrow icon"
+      }
+    ), userImageEl)), badgeImage && /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center w-full mt-4 xxxsm:mt-0" }, /* @__PURE__ */ React.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.createElement(
+        "img",
+        {
+          className: "h-full w-full object-cover absolute top-0 left-0",
+          src: badgeImage,
+          alt: "badge image"
+        }
+      )
+    )), /* @__PURE__ */ React.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.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.createElement(
+      "img",
+      {
+        className: "h-full w-full object-cover",
+        src: (_c = VerifiedCheck) != null ? _c : "",
+        alt: "credential icon"
+      }
+    ))))
+  );
+};
+
+export { VCThumbnail as V };
+//# sourceMappingURL=VCThumbnail-835921dd.js.map

package/dist/esm/{VCThumbnail-3c254bda.js.map → VCThumbnail-835921dd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCThumbnail-3c254bda.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":[],"mappings":"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"}
+{"version":3,"file":"VCThumbnail-835921dd.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":[],"mappings":"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"}

package/dist/esm/VCVerificationCheck-8b8b7a76.js

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import VerificationCheckDisplay from './vc.check.svg';
+import { C as CircleLoadingState, a as CircleSpinner } from './CircleSpinner-03a329fc.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 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 VCVerificationCheckWithSpinner = ({ size = "44px", spinnerSize = "60px", loading = true, withBorder = false }) => {
+  const loadingState = loading ? CircleLoadingState.spin : 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.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.createElement(VCVerificationCheck, { size, loading }),
+    /* @__PURE__ */ React.createElement("div", { className: "vc-verification-spinner-overlay", style: spinnerStyle }, /* @__PURE__ */ React.createElement(
+      CircleSpinner,
+      {
+        loadingState,
+        size: spinnerSizeNumber,
+        marginOffset: offset
+      }
+    ))
+  );
+};
+const VCVerificationCheckWithText = ({ size = "44px", spinnerSize = "60px", loading = true }) => {
+  const [defaultLoading, setDefaultLoading] = useState(true);
+  useEffect(() => {
+    let timer1 = setTimeout(() => setDefaultLoading(false), 3 * 1e3);
+    return () => {
+      clearTimeout(timer1);
+    };
+  });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex justify-center items-center translate-x-[10px] w-full vc-verification-full-wrapper" }, /* @__PURE__ */ React.createElement("span", { className: "text-white font-bold tracking-wider" }, "Verified"), /* @__PURE__ */ React.createElement(
+    VCVerificationCheckWithSpinner,
+    {
+      size,
+      spinnerSize,
+      loading: loading || defaultLoading,
+      withBorder: true
+    }
+  ), /* @__PURE__ */ React.createElement("span", { className: "text-white font-bold tracking-wider" }, "Credential"));
+};
+
+export { VCVerificationCheck as V, VCVerificationCheckWithSpinner as a, VCVerificationCheckWithText as b };
+//# sourceMappingURL=VCVerificationCheck-8b8b7a76.js.map

package/dist/esm/{VCVerificationCheck-80249524.js.map → VCVerificationCheck-8b8b7a76.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCVerificationCheck-80249524.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":[],"mappings":"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"}
+{"version":3,"file":"VCVerificationCheck-8b8b7a76.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":[],"mappings":"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"}

package/dist/esm/VCVerificationPill-77596013.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { V as VerificationStatusEnum } from './types.esm-8798df50.js';
+import VerificationFailedIcon from './RedXCircle.svg';
+import VerificationPassedIcon from './GreenCheckCircle.svg';
+import VerificationWarningIcon from './YellowWarningCircle.svg';
+
+const StatusToBgColor = {
+  [VerificationStatusEnum.Success]: "bg-emerald-500",
+  [VerificationStatusEnum.Failed]: "bg-yellow-400",
+  [VerificationStatusEnum.Error]: "bg-rose-600"
+};
+const StatusToTextColor = {
+  [VerificationStatusEnum.Success]: "text-emerald-700",
+  [VerificationStatusEnum.Failed]: "text-yellow-400",
+  [VerificationStatusEnum.Error]: "text-rose-600"
+};
+const StatusToIcon = {
+  [VerificationStatusEnum.Success]: VerificationPassedIcon,
+  [VerificationStatusEnum.Failed]: VerificationWarningIcon,
+  [VerificationStatusEnum.Error]: VerificationFailedIcon
+};
+const StatusToText = {
+  [VerificationStatusEnum.Success]: "Verification Success",
+  [VerificationStatusEnum.Error]: "Verification Error ",
+  [VerificationStatusEnum.Failed]: "Verification Failed"
+};
+const ValidationStateIndicator = ({ status }) => {
+  const bgColor = StatusToBgColor[status];
+  const source = StatusToIcon[status];
+  return /* @__PURE__ */ React.createElement("div", { className: `relative rounded-full w-[30px] h-[30px] ${bgColor}` }, /* @__PURE__ */ React.createElement("div", { className: "relative w-[100%] h-[100%] 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: source != null ? source : "",
+      alt: "Verification Status Icon"
+    }
+  )));
+};
+const VCVerificationPill = ({
+  message = "",
+  details,
+  status = VerificationStatusEnum.Success
+}) => {
+  const statusColor = StatusToTextColor[status];
+  const statusInfoText = StatusToText[status];
+  return /* @__PURE__ */ React.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.createElement("div", { className: "vc-pill-left" }, /* @__PURE__ */ React.createElement("p", { className: `text-[10px] font-bold status-text uppercase ${statusColor}` }, statusInfoText), /* @__PURE__ */ React.createElement("p", { className: "text-[12px] text-grayscale-900 vc-pill-text" }, message), details && /* @__PURE__ */ React.createElement("p", { className: "text-[12px] text-gray-600" }, " ", details)), /* @__PURE__ */ React.createElement("div", { className: "vc-pill-right" }, /* @__PURE__ */ React.createElement(ValidationStateIndicator, { status })));
+};
+
+export { ValidationStateIndicator as V, VCVerificationPill as a };
+//# sourceMappingURL=VCVerificationPill-77596013.js.map

package/dist/esm/{VCVerificationPill-0e2c1172.js.map → VCVerificationPill-77596013.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCVerificationPill-0e2c1172.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":[],"mappings":";;;;;;AAiBA,MAAM,eAAkB,GAAA;AAAA,EACpB,CAAC,uBAAuB,OAAU,GAAA,gBAAA;AAAA,EAClC,CAAC,uBAAuB,MAAS,GAAA,eAAA;AAAA,EACjC,CAAC,uBAAuB,KAAQ,GAAA,aAAA;AACpC,CAAA,CAAA;AAEA,MAAM,iBAAoB,GAAA;AAAA,EACtB,CAAC,uBAAuB,OAAU,GAAA,kBAAA;AAAA,EAClC,CAAC,uBAAuB,MAAS,GAAA,iBAAA;AAAA,EACjC,CAAC,uBAAuB,KAAQ,GAAA,eAAA;AACpC,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA;AAAA,EACjB,CAAC,uBAAuB,OAAU,GAAA,sBAAA;AAAA,EAClC,CAAC,uBAAuB,MAAS,GAAA,uBAAA;AAAA,EACjC,CAAC,uBAAuB,KAAQ,GAAA,sBAAA;AACpC,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA;AAAA,EACjB,CAAC,uBAAuB,OAAU,GAAA,sBAAA;AAAA,EAClC,CAAC,uBAAuB,KAAQ,GAAA,qBAAA;AAAA,EAChC,CAAC,uBAAuB,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,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,CAA2C,wCAAA,EAAA,OAAA,CAAA,CAAA;AAAA,GAAA,kBACtD,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,iHAAA;AAAA,GAAA,kBACV,KAAA,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,SAAS,sBAAuB,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,uBACK,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,SAAU,EAAA,8HAAA;AAAA,GAAA,kBACd,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,cAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,WAAW,CAA+C,4CAAA,EAAA,WAAA,CAAA,CAAA;AAAA,GACxD,EAAA,cACL,mBAEC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,6CAAA;AAAA,GAA+C,EAAA,OAAQ,CAEnE,EAAA,OAAA,oBAAY,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,2BAAA;AAAA,GAAA,EAA4B,GAAE,EAAA,OAAQ,CACnE,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,eAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAA,IAAyB,MAAA;AAAA,GAAgB,CAC9C,CACJ,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"VCVerificationPill-77596013.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":[],"mappings":";;;;;;AAiBA,MAAM,eAAkB,GAAA;AAAA,EACpB,CAAC,sBAAuB,CAAA,OAAO,GAAG,gBAAA;AAAA,EAClC,CAAC,sBAAuB,CAAA,MAAM,GAAG,eAAA;AAAA,EACjC,CAAC,sBAAuB,CAAA,KAAK,GAAG,aAAA;AACpC,CAAA,CAAA;AAEA,MAAM,iBAAoB,GAAA;AAAA,EACtB,CAAC,sBAAuB,CAAA,OAAO,GAAG,kBAAA;AAAA,EAClC,CAAC,sBAAuB,CAAA,MAAM,GAAG,iBAAA;AAAA,EACjC,CAAC,sBAAuB,CAAA,KAAK,GAAG,eAAA;AACpC,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA;AAAA,EACjB,CAAC,sBAAuB,CAAA,OAAO,GAAG,sBAAA;AAAA,EAClC,CAAC,sBAAuB,CAAA,MAAM,GAAG,uBAAA;AAAA,EACjC,CAAC,sBAAuB,CAAA,KAAK,GAAG,sBAAA;AACpC,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA;AAAA,EACjB,CAAC,sBAAuB,CAAA,OAAO,GAAG,sBAAA;AAAA,EAClC,CAAC,sBAAuB,CAAA,KAAK,GAAG,qBAAA;AAAA,EAChC,CAAC,sBAAuB,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,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,CAAA,wCAAA,EAA2C,OAAO,CAC9D,CAAA,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iHACX,EAAA,kBAAA,KAAA,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,SAAS,sBAAuB,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,2CACK,SAAQ,EAAA,EAAA,SAAA,EAAU,8HACf,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAU,EAAA,cAAA,EAAA,kBACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAE,WAAW,CAA+C,4CAAA,EAAA,WAAW,MACnE,cACL,CAAA,sCAEC,GAAE,EAAA,EAAA,SAAA,EAAU,6CAA+C,EAAA,EAAA,OAAQ,GAEnE,OAAW,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAE,SAAU,EAAA,2BAAA,EAAA,EAA4B,KAAE,OAAQ,CACnE,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAU,EAAA,eAAA,EAAA,sCACV,wBAAyB,EAAA,EAAA,MAAA,EAAgB,CAC9C,CACJ,CAAA,CAAA;AAER;;;;"}