@learncard/react 2.3.20 → 2.3.24

package/dist/esm/CircleIcon-7c21af00.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import coins from './coins.svg';
+import user from './user.svg';
+import trophy from './trophy.svg';
+import briefcase from './briefcase.svg';
+import graduation from './graduation.svg';
+import lightbulb from './lightbulb.svg';
+
+var Icons = /* @__PURE__ */ ((Icons2) => {
+  Icons2[Icons2["coinsIcon"] = 0] = "coinsIcon";
+  Icons2[Icons2["userIcon"] = 1] = "userIcon";
+  Icons2[Icons2["trophyIcon"] = 2] = "trophyIcon";
+  Icons2[Icons2["briefcaseIcon"] = 3] = "briefcaseIcon";
+  Icons2[Icons2["graduationIcon"] = 4] = "graduationIcon";
+  Icons2[Icons2["lightbulbIcon"] = 5] = "lightbulbIcon";
+  return Icons2;
+})(Icons || {});
+
+const ICONS_TO_SOURCE = {
+  [Icons.coinsIcon]: coins,
+  [Icons.userIcon]: user,
+  [Icons.trophyIcon]: trophy,
+  [Icons.briefcaseIcon]: briefcase,
+  [Icons.graduationIcon]: graduation,
+  [Icons.lightbulbIcon]: lightbulb
+};
+
+const CountCircle = ({
+  size = "auto",
+  count = "28",
+  innerPadding = "3px 5px",
+  className,
+  onClick = () => {
+  },
+  bgColor = "bg-grayscale-50"
+}) => {
+  const style = {
+    width: size,
+    height: size,
+    padding: innerPadding
+  };
+  return /* @__PURE__ */ React.createElement("section", {
+    onClick,
+    className: `${bgColor} rounded-full circle-icon-wrapper text-center absolute right-[-15px] top-[-15px] min-w-[25px] ${className}`,
+    style
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: `h-full`
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "h-full line-clamp-1 font-semibold text-grayscale-900 text-[12px]"
+  }, count)));
+};
+const CircleIcon = ({
+  iconSrc = ICONS_TO_SOURCE[Icons.coinsIcon],
+  size = "52px",
+  count = "28",
+  innerPadding = "6px",
+  onClick = () => {
+  },
+  bgColor = "bg-grayscale-900",
+  hideCount = true
+}) => {
+  const style = {
+    width: size,
+    height: size,
+    padding: innerPadding
+  };
+  return /* @__PURE__ */ React.createElement("section", {
+    onClick,
+    className: `${bgColor} rounded-full circle-icon-wrapper p-[0px] m-[0px]`,
+    style
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: `relative w-full h-full`
+  }, !hideCount && /* @__PURE__ */ React.createElement(CountCircle, {
+    count
+  }), /* @__PURE__ */ React.createElement("img", {
+    className: "h-full w-full object-cover",
+    src: iconSrc != null ? iconSrc : "",
+    alt: "Icon image"
+  })));
+};
+
+export { CountCircle as C, ICONS_TO_SOURCE as I, CircleIcon as a, Icons as b };
+//# sourceMappingURL=CircleIcon-7c21af00.js.map

package/dist/esm/CircleIcon-7c21af00.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleIcon-7c21af00.js","sources":["../../src/types/index.ts","../../src/constants/icons.ts","../../src/components/CircleIcon/CircleIcon.tsx"],"sourcesContent":["import { VerificationItem, VC, Profile, CredentialSubject } from '@learncard/types';\n\nexport enum Icons {\n    coinsIcon,\n    userIcon,\n    trophyIcon,\n    briefcaseIcon,\n    graduationIcon,\n    lightbulbIcon,\n}\n\nexport type CredentialInfo = {\n    title?: string;\n    createdAt?: string;\n    issuer?: Profile;\n    issuee?: Profile;\n    credentialSubject?: CredentialSubject;\n};\n\nexport type VCDisplayCardProps = {\n    title?: string;\n    createdAt?: string;\n    issuer?: Profile;\n    issuee?: Profile;\n    userImage?: string;\n    className?: string;\n    credentialSubject?: CredentialSubject;\n    onClick?: () => void;\n    loading?: boolean;\n    verification?: VerificationItem[];\n};\n\nexport type RoundedSquareProps = {\n    title?: string;\n    description?: string;\n    iconSrc?: string;\n    count?: string | number;\n    onClick?: () => void;\n    bgColor?: string;\n};\n\nexport type SmallAchievementCardProps = {\n    title?: string;\n    thumbImgSrc?: string;\n    date?: string;\n    onClick?: () => void;\n};\n","import coins from '../assets/images/coins.svg';\nimport user from '../assets/images/user.svg';\nimport trophy from '../assets/images/trophy.svg';\nimport briefcase from '../assets/images/briefcase.svg';\nimport graduation from '../assets/images/graduation.svg';\nimport lightbulb from '../assets/images/lightbulb.svg';\n\nimport { Icons } from '../types';\nexport { coins, user, trophy, briefcase, graduation, lightbulb };\n\nexport const ICONS_TO_SOURCE = {\n    [Icons.coinsIcon]: coins,\n    [Icons.userIcon]: user,\n    [Icons.trophyIcon]: trophy,\n    [Icons.briefcaseIcon]: briefcase,\n    [Icons.graduationIcon]: graduation,\n    [Icons.lightbulbIcon]: lightbulb,\n};\n","import React from 'react';\n\nimport { Icons } from '../../types';\nimport { ICONS_TO_SOURCE } from '../../constants/icons';\n\nexport type CircleIconProps = {\n    iconSrc?: string;\n    count?: string | number;\n    onClick?: () => void;\n    bgColor?: string;\n    innerPadding?: string;\n    size?: string;\n    hideCount?: boolean;\n    borderColor?: string;\n};\n\nexport type CountCircleProps = {\n    size?: string;\n    count?: string | number;\n    innerPadding?: string;\n    onClick?: () => {};\n    bgColor?: string;\n    className?: string;\n};\n\nexport const CountCircle: React.FC<CountCircleProps> = ({\n    size = 'auto',\n    count = '28',\n    innerPadding = '3px 5px',\n    className,\n    onClick = () => {},\n    bgColor = 'bg-grayscale-50',\n}) => {\n    const style = {\n        width: size,\n        height: size,\n        padding: innerPadding,\n    };\n\n    return (\n        <section\n            onClick={onClick}\n            className={`${bgColor} rounded-full circle-icon-wrapper text-center absolute right-[-15px] top-[-15px] min-w-[25px] ${className}`}\n            style={style}\n        >\n            <div className={`h-full`}>\n                <p className=\"h-full line-clamp-1 font-semibold text-grayscale-900 text-[12px]\">\n                    {count}\n                </p>\n            </div>\n        </section>\n    );\n};\n\nexport const CircleIcon: React.FC<CircleIconProps> = ({\n    iconSrc = ICONS_TO_SOURCE[Icons.coinsIcon],\n    size = '52px',\n    count = '28',\n    innerPadding = '6px',\n    onClick = () => {},\n    bgColor = 'bg-grayscale-900',\n    hideCount = true,\n}) => {\n    const style = {\n        width: size,\n        height: size,\n        padding: innerPadding,\n    };\n\n    return (\n        <section\n            onClick={onClick}\n            className={`${bgColor} rounded-full circle-icon-wrapper p-[0px] m-[0px]`}\n            style={style}\n        >\n            <div className={`relative w-full h-full`}>\n                {!hideCount && <CountCircle count={count} />}\n                <img className=\"h-full w-full object-cover\" src={iconSrc ?? ''} alt=\"Icon image\" />\n            </div>\n        </section>\n    );\n};\n\nexport default CircleIcon;\n"],"names":[],"mappings":"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"}

package/dist/esm/GreenCheckCircle.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30" height="30" rx="15" fill="#40CBA6"/>
+<path d="M21.875 10.6254L13.125 19.375L8.75 15.0004" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/esm/{LearnCardCreditCardBackFace-4f7eaaa9.js → LearnCardCreditCardBackFace-9baa9e6b.js}

@@ -1,6 +1,5 @@
 import React from 'react';
-
-var ContactlessSymbol = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAyNiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMTEuNTc1MUMyLjk5NzE1IDEzLjMxNjEgNC4zOTMxNiAxNy42MTA0IDIgMjAuODYwMU04LjU4MTE4IDguMjM4MzRDMTAuMDc2OSAxMC45OTQ4IDEyLjE3MDkgMTguMDQ1NiA4LjU4MTE4IDI0LjE5NjlNMTQuNDE0NSA0Ljc1NjQ4QzE2LjM1ODkgOC40ODAxNCAxOS4wODEyIDE4LjE5MDcgMTQuNDE0NSAyNy4yNDM1TTIwLjY5NjUgMkMyMy4xODk0IDYuNDAwNjkgMjYuNjc5NCAxOC4xNjE3IDIwLjY5NjUgMzAiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==";
+import ContactlessSymbol from './contactless-symbol.svg';
 
 const LearnCardCreditCardBackFace = ({
   className,
@@ -63,4 +62,4 @@ const LearnCardCreditCardBackFace = ({
 };
 
 export { LearnCardCreditCardBackFace as L };
-//# sourceMappingURL=LearnCardCreditCardBackFace-4f7eaaa9.js.map
+//# sourceMappingURL=LearnCardCreditCardBackFace-9baa9e6b.js.map

package/dist/esm/LearnCardCreditCardBackFace-9baa9e6b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearnCardCreditCardBackFace-9baa9e6b.js","sources":["../../src/components/LearnCardCreditCardBackFace/LearnCardCreditCardBackFace.tsx"],"sourcesContent":["import React from 'react';\n\nimport ContactlessSymbol from '../../assets/images/contactless-symbol.svg';\n\nimport { LearnCardCreditCardBackFaceProps } from './types';\n\nexport const LearnCardCreditCardBackFace: React.FC<LearnCardCreditCardBackFaceProps> = ({\n    className,\n    card,\n    user,\n}) => {\n    return (\n        <div\n            className={`flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`}\n        >\n            <div\n                className={`flex flex-col justify-start items-start w-full min-h-[220px] rounded-[20px] shadow-3xl bg-grayscale-900 relative overflow-hidden credit-card-front-face`}\n            >\n                <div className=\"flex justify-between items-center w-full px-3 pt-4 text-white\">\n                    <p className=\"text-[6px]\">\n                        Please visit LearnCard app or learncard.com for assistance\n                    </p>\n                    <p className=\"text-[6px]\">854-000-000-24</p>\n                </div>\n\n                <div className=\"w-full h-8 bg-white mt-1\" />\n\n                <div className=\"flex justify-end items-center w-full px-3 mt-1 text-white\">\n                    <p className=\"text-[6px]\">IDEMIA 0 00000 00000 0/00</p>\n                </div>\n\n                <div className=\"flex flex-row justify-between items-center px-3 pt-2 w-full text-white\">\n                    <div>\n                        {user?.username && (\n                            <p\n                                className=\"text-[10px] font-medium\"\n                                data-testid=\"credit-card-backface-username\"\n                            >\n                                {user?.username}\n                            </p>\n                        )}\n\n                        <p\n                            className=\"text-sm tracking-wider\"\n                            data-testid=\"credit-card-backface-fullname\"\n                        >\n                            {user?.fullName ?? ''}\n                        </p>\n                        {card?.cardIssueDate && (\n                            <p\n                                className=\"text-[10px] tracking-wider\"\n                                data-testid=\"credit-card-backface-issueDate\"\n                            >\n                                MEMBER SINCE {card?.cardIssueDate}\n                            </p>\n                        )}\n                    </div>\n                    <div>\n                        <img src={ContactlessSymbol} alt=\"contactless icon\" />\n                    </div>\n                </div>\n\n                <div className=\"flex flex-row justify-between items-center px-3 pt-2 w-full text-white\">\n                    <div className=\"flex flex-col\">\n                        <p\n                            className=\"text-sm tracking-wider\"\n                            data-testid=\"credit-card-backface-cardNum\"\n                        >\n                            {card?.cardNumber ?? ''}\n                        </p>\n                        <div className=\"flex flex-row justify-between items-center\">\n                            <p\n                                className=\"text-[10px] tracking-wider\"\n                                data-testid=\"credit-card-backface-expDate\"\n                            >\n                                EXP {card?.cardExpirationDate ?? ''}\n                            </p>\n                            {card?.cardSecurityCode && (\n                                <p\n                                    className=\"text-[10px] tracking-wider\"\n                                    data-testid=\"credit-card-backface-secCode\"\n                                >\n                                    SEC {card?.cardSecurityCode ?? ''}\n                                </p>\n                            )}\n                        </div>\n                    </div>\n                    <div>\n                        <div className=\"h-[33px] w-[55px] rounded-[60px] bg-gradient-to-r from-[#F4F5F5] to-[#E3E5E8]\" />\n                    </div>\n                </div>\n\n                <div className=\"flex justify-start items-center w-full px-3 py-2 text-white\">\n                    <p className=\"text-[6px]\">\n                        Issued by the bank of Tennessee pursuant to license by Mastercard\n                        International\n                    </p>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardBackFace;\n"],"names":[],"mappings":"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"}

package/dist/esm/LearnCardCreditCardFrontFace-2f2e066d.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Q as QRCodeSVG } from './index-aa1098e1.js';
+import CardChip from './card-chip.svg';
+import MasterCardLogo from './master-card-logo.svg';
+
+const LearnCardCreditCardFrontFace = ({
+  userImage,
+  userImageComponent = null,
+  qrCodeValue,
+  className,
+  showActionButton = false,
+  actionButtonText = "Open Card",
+  onClick = () => {
+  }
+}) => {
+  var _a, _b;
+  let userImageEl = null;
+  if (userImage) {
+    userImageEl = /* @__PURE__ */ React.createElement("div", {
+      className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4"
+    }, /* @__PURE__ */ React.createElement("img", {
+      className: "w-full h-full absolute rounded-full object-cover border-solid border-2 border-white",
+      src: userImage,
+      alt: "user image",
+      "data-testid": "credit-card-frontface-userImg"
+    }));
+  } else if (!userImage && userImageComponent) {
+    userImageEl = userImageComponent;
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: `flex flex-row justify-center items-start pt-9 w-full min-h-[220px] rounded-[20px] shadow-3xl relative overflow-hidden credit-card-front-face`
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble"
+  }), showActionButton && /* @__PURE__ */ React.createElement("button", {
+    className: "absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white",
+    onClick,
+    "data-testid": "credit-card-frontface-button"
+  }, actionButtonText), /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-row justify-between items-start w-full h-full relative"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-1 flex-col"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "pl-8"
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title"
+  }, "LEARNCARD"), /* @__PURE__ */ React.createElement("img", {
+    src: (_a = CardChip) != null ? _a : "",
+    alt: "card chip",
+    className: "h-[30px] w-[42px]"
+  })), userImageEl), qrCodeValue && /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "h-auto relative qr-code-container"
+  }, /* @__PURE__ */ React.createElement(QRCodeSVG, {
+    className: "h-full w-full",
+    value: qrCodeValue,
+    "data-testid": "credit-card-qr-code",
+    bgColor: "transparent"
+  }))), /* @__PURE__ */ React.createElement("img", {
+    src: (_b = MasterCardLogo) != null ? _b : "",
+    alt: "mastercard icon",
+    className: "absolute bottom-[-8px] right-4 learn-card-mastercard-logo"
+  }))));
+};
+
+export { LearnCardCreditCardFrontFace as L };
+//# sourceMappingURL=LearnCardCreditCardFrontFace-2f2e066d.js.map

package/dist/esm/LearnCardCreditCardFrontFace-2f2e066d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearnCardCreditCardFrontFace-2f2e066d.js","sources":["../../src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx"],"sourcesContent":["import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { LearnCardCreditCardFrontFaceProps } from './types';\n\nimport CardChip from '../../assets/images/card-chip.svg';\nimport MasterCardLogo from '../../assets/images/master-card-logo.svg';\n\nexport const LearnCardCreditCardFrontFace: React.FC<LearnCardCreditCardFrontFaceProps> = ({\n    userImage,\n    userImageComponent = null,\n    qrCodeValue,\n    className,\n    showActionButton = false,\n    actionButtonText = 'Open Card',\n    onClick = () => {},\n}) => {\n    let userImageEl: React.ReactNode | null = null;\n\n    if (userImage) {\n        userImageEl = (\n            <div className=\"inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4\">\n                <img\n                    className=\"w-full h-full absolute rounded-full object-cover border-solid border-2 border-white\"\n                    src={userImage}\n                    alt=\"user image\"\n                    data-testid=\"credit-card-frontface-userImg\"\n                />\n            </div>\n        );\n    } else if (!userImage && userImageComponent) {\n        userImageEl = userImageComponent;\n    }\n\n    return (\n        <div\n            className={`flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`}\n        >\n            <div\n                className={`flex flex-row justify-center items-start pt-9 w-full min-h-[220px] rounded-[20px] shadow-3xl relative overflow-hidden credit-card-front-face`}\n            >\n                <div className=\"absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble\" />\n                {showActionButton && (\n                    <button\n                        className=\"absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white\"\n                        onClick={onClick}\n                        data-testid=\"credit-card-frontface-button\"\n                    >\n                        {actionButtonText}\n                    </button>\n                )}\n                <div className=\"flex flex-row justify-between items-start w-full h-full relative\">\n                    <div className=\"flex flex-1 flex-col\">\n                        <div className=\"pl-8\">\n                            <p className=\"w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title\">\n                                LEARNCARD\n                            </p>\n                            <img\n                                src={CardChip ?? ''}\n                                alt=\"card chip\"\n                                className=\"h-[30px] w-[42px]\"\n                            />\n                        </div>\n\n                        {userImageEl}\n                    </div>\n\n                    {qrCodeValue && (\n                        <div className=\"flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container\">\n                            <div className=\"h-auto relative qr-code-container\">\n                                {/* <div className=\"qr-code-upper-left-yellow\" />\n                            <div className=\"qr-code-upper-right-pink-square\" />\n                            <div className=\"qr-code-bottom-left-purple-square\" />\n                            <div className=\"qr-code-green-blob\" />\n                            <div className=\"qr-code-green-blob-2\" />\n                            <div className=\"qr-code-blue-blob\" />\n                            <div className=\"qr-code-orange-blob\" /> */}\n                                <QRCodeSVG\n                                    className=\"h-full w-full\"\n                                    value={qrCodeValue}\n                                    data-testid=\"credit-card-qr-code\"\n                                    bgColor=\"transparent\"\n                                    // fgColor=\"#999999\"\n                                />\n                            </div>\n                        </div>\n                    )}\n\n                    <img\n                        src={MasterCardLogo ?? ''}\n                        alt=\"mastercard icon\"\n                        className=\"absolute bottom-[-8px] right-4 learn-card-mastercard-logo\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardFrontFace;\n"],"names":[],"mappings":"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"}

package/dist/esm/{MiniVCThumbnail-934ab645.js → MiniVCThumbnail-6a07e810.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { V as VerifiedCheck } from './verified-check-32de410b.js';
+import VerifiedCheck from './verified-check.png';
 
 const MiniVCThumbnail = ({
   title,
@@ -59,4 +59,4 @@ const MiniVCThumbnail = ({
 };
 
 export { MiniVCThumbnail as M };
-//# sourceMappingURL=MiniVCThumbnail-934ab645.js.map
+//# sourceMappingURL=MiniVCThumbnail-6a07e810.js.map

package/dist/esm/{MiniVCThumbnail-934ab645.js.map → MiniVCThumbnail-6a07e810.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MiniVCThumbnail-934ab645.js","sources":["../../src/components/MiniVCThumbnail/MiniVCThumbnail.tsx"],"sourcesContent":["import React from 'react';\n\nimport VerifiedCheck from '../../assets/images/verified-check.png';\n\nimport { MiniVCThumbnailProps } from './types';\n\nexport const MiniVCThumbnail: React.FC<MiniVCThumbnailProps> = ({\n    title,\n    createdAt,\n    issuerImage,\n    badgeImage,\n    className = '',\n    onClick = () => {},\n}) => {\n    const titleClasses = !issuerImage ? 'w-full text-center' : 'w-3/4 text-left';\n    const createdAtClasses = !issuerImage ? 'w-full text-center' : 'text-left';\n\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 min-h-[120px] max-w-sm mini-vc-thumbnail-container ${className}`}\n            data-testid=\"mini-vc-thumbnail\"\n        >\n            <div className=\"flex flex-row items-center justify-between mb-3 z-10\">\n                {issuerImage && (\n                    <div\n                        className=\"flex flex-row justify-center items-center w-1/4 text-center\"\n                        data-testid=\"mini-vc-thumbnail-issuer\"\n                    >\n                        <div className=\"min-w-[40px] min-h-[40px] max-h-[48px] max-w-[48px] shadow-3xl p-1 rounded-full bg-white\">\n                            <img\n                                className=\"h-full w-full object-cover rounded-full\"\n                                src={issuerImage}\n                                alt=\"issuer image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className={`flex flex-col items-start justify-center ${titleClasses}`}>\n                    <h2\n                        className=\"ml-2 text-sm tracking-wide leading-snug line-clamp-2\"\n                        data-testid=\"mini-vc-thumbnail-title\"\n                    >\n                        {title ?? ''}\n                    </h2>\n                    <p\n                        className={`ml-2 text-sm font-light line-clamp-1 ${createdAtClasses}`}\n                        data-testid=\"mini-vc-thumbnail-createdAt\"\n                    >\n                        {createdAt ?? ''}\n                    </p>\n                </div>\n            </div>\n            <div className=\"flex items-center justify-center w-full mt-3\">\n                {badgeImage && (\n                    <div\n                        className=\"flex item-center justify-center w-full -mt-3\"\n                        data-testid=\"mini-vc-thumbnail-badge\"\n                    >\n                        <div className=\"max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10\">\n                            <img\n                                className=\"h-full w-full object-cover\"\n                                src={badgeImage}\n                                alt=\"badge image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className=\"flex absolute bottom-1 right-1 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            </div>\n        </div>\n    );\n};\n\nexport default MiniVCThumbnail;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MiniVCThumbnail-6a07e810.js","sources":["../../src/components/MiniVCThumbnail/MiniVCThumbnail.tsx"],"sourcesContent":["import React from 'react';\n\nimport VerifiedCheck from '../../assets/images/verified-check.png';\n\nimport { MiniVCThumbnailProps } from './types';\n\nexport const MiniVCThumbnail: React.FC<MiniVCThumbnailProps> = ({\n    title,\n    createdAt,\n    issuerImage,\n    badgeImage,\n    className = '',\n    onClick = () => {},\n}) => {\n    const titleClasses = !issuerImage ? 'w-full text-center' : 'w-3/4 text-left';\n    const createdAtClasses = !issuerImage ? 'w-full text-center' : 'text-left';\n\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 min-h-[120px] max-w-sm mini-vc-thumbnail-container ${className}`}\n            data-testid=\"mini-vc-thumbnail\"\n        >\n            <div className=\"flex flex-row items-center justify-between mb-3 z-10\">\n                {issuerImage && (\n                    <div\n                        className=\"flex flex-row justify-center items-center w-1/4 text-center\"\n                        data-testid=\"mini-vc-thumbnail-issuer\"\n                    >\n                        <div className=\"min-w-[40px] min-h-[40px] max-h-[48px] max-w-[48px] shadow-3xl p-1 rounded-full bg-white\">\n                            <img\n                                className=\"h-full w-full object-cover rounded-full\"\n                                src={issuerImage}\n                                alt=\"issuer image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className={`flex flex-col items-start justify-center ${titleClasses}`}>\n                    <h2\n                        className=\"ml-2 text-sm tracking-wide leading-snug line-clamp-2\"\n                        data-testid=\"mini-vc-thumbnail-title\"\n                    >\n                        {title ?? ''}\n                    </h2>\n                    <p\n                        className={`ml-2 text-sm font-light line-clamp-1 ${createdAtClasses}`}\n                        data-testid=\"mini-vc-thumbnail-createdAt\"\n                    >\n                        {createdAt ?? ''}\n                    </p>\n                </div>\n            </div>\n            <div className=\"flex items-center justify-center w-full mt-3\">\n                {badgeImage && (\n                    <div\n                        className=\"flex item-center justify-center w-full -mt-3\"\n                        data-testid=\"mini-vc-thumbnail-badge\"\n                    >\n                        <div className=\"max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10\">\n                            <img\n                                className=\"h-full w-full object-cover\"\n                                src={badgeImage}\n                                alt=\"badge image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className=\"flex absolute bottom-1 right-1 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            </div>\n        </div>\n    );\n};\n\nexport default MiniVCThumbnail;\n"],"names":[],"mappings":"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"}

package/dist/esm/RedXCircle.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30" height="30" rx="15" fill="#E11D48"/>
+<path d="M20.625 9.375L9.375 20.625" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.625 20.625L9.375 9.375" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/esm/RoundedSquare-c3706147.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { C as CountCircle, a as CircleIcon, I as ICONS_TO_SOURCE, b as Icons } from './CircleIcon-7c21af00.js';
+import coinsGraphic from './walletcurrency.webp';
+import idsGraphic from './walletids.webp';
+import jobhistoryGraphic from './walletjobhistory.webp';
+import learningHistoryGraphic from './walletlearninghistory.webp';
+import skillsGraphic from './walletskills.webp';
+import achievementsGraphic from './walletTrophy.webp';
+
+const WALLET_SUBTYPES = {
+  ACHIEVEMENTS: "achievements",
+  IDS: "ids",
+  JOB_HISTORY: "jobHistory",
+  CURRENCIES: "currency",
+  LEARNING_HISTORY: "learningHistory",
+  SKILLS: "skills"
+};
+const TYPE_TO_IMG_SRC = {
+  [WALLET_SUBTYPES.ACHIEVEMENTS]: achievementsGraphic,
+  [WALLET_SUBTYPES.IDS]: idsGraphic,
+  [WALLET_SUBTYPES.JOB_HISTORY]: jobhistoryGraphic,
+  [WALLET_SUBTYPES.LEARNING_HISTORY]: learningHistoryGraphic,
+  [WALLET_SUBTYPES.CURRENCIES]: coinsGraphic,
+  [WALLET_SUBTYPES.SKILLS]: skillsGraphic
+};
+const TYPE_TO_WALLET_COLOR = {
+  [WALLET_SUBTYPES.ACHIEVEMENTS]: "spice-300",
+  [WALLET_SUBTYPES.IDS]: "yellow-300",
+  [WALLET_SUBTYPES.JOB_HISTORY]: "rose-300",
+  [WALLET_SUBTYPES.LEARNING_HISTORY]: "emerald-300",
+  [WALLET_SUBTYPES.CURRENCIES]: "cyan-200",
+  [WALLET_SUBTYPES.SKILLS]: "indigo-300"
+};
+
+const RoundedSquare = ({
+  title = "Currencies",
+  description = "Lorem ipsum sit dalor amet",
+  iconSrc = ICONS_TO_SOURCE[Icons.trophyIcon],
+  imgSrc,
+  type = WALLET_SUBTYPES.ACHIEVEMENTS,
+  count = "28",
+  onClick = () => {
+  },
+  bgColor
+}) => {
+  const imgSource = imgSrc || TYPE_TO_IMG_SRC[type];
+  const backgroundColor = bgColor != null ? bgColor : `bg-${TYPE_TO_WALLET_COLOR[type]}`;
+  const circleClass = `flex w-full justify-end icon-display absolute right-[15px] bottom-[10px] max-h-[40px] max-w-[40px]`;
+  return /* @__PURE__ */ React.createElement("button", {
+    onClick,
+    className: `flex relative ${backgroundColor} py-[15px] px-[15px] w-[170px] h-[170px] rounded-[40px] rounded-square-card-container`
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "w-full relative"
+  }, /* @__PURE__ */ React.createElement("section", {
+    className: "title-headline-container flex items-center justify-between"
+  }, /* @__PURE__ */ React.createElement(CountCircle, {
+    count,
+    className: "solo-counter-circle right-[0px] top-[0px] relative"
+  }), /* @__PURE__ */ React.createElement("h3", {
+    className: "line-clamp-2 font-bold text-[13px] text-grayscale-900 text-left"
+  }, title)), /* @__PURE__ */ React.createElement("div", {
+    className: "graphic-background relative flex justify-center"
+  }, /* @__PURE__ */ React.createElement("img", {
+    className: "max-w-[130px]",
+    src: imgSource
+  }))), /* @__PURE__ */ React.createElement("div", {
+    className: circleClass
+  }, /* @__PURE__ */ React.createElement(CircleIcon, {
+    iconSrc,
+    count,
+    size: "40"
+  })));
+};
+
+export { RoundedSquare as R, TYPE_TO_IMG_SRC as T, WALLET_SUBTYPES as W, TYPE_TO_WALLET_COLOR as a };
+//# sourceMappingURL=RoundedSquare-c3706147.js.map

package/dist/esm/RoundedSquare-c3706147.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundedSquare-c3706147.js","sources":["../../src/components/RoundedSquare/constants.ts","../../src/components/RoundedSquare/RoundedSquare.tsx"],"sourcesContent":["import coinsGraphic from '../../assets/images/walletcurrency.webp';\nimport idsGraphic from '../../assets/images/walletids.webp';\nimport jobhistoryGraphic from '../../assets/images/walletjobhistory.webp';\nimport learningHistoryGraphic from '../../assets/images/walletlearninghistory.webp';\nimport skillsGraphic from '../../assets/images/walletskills.webp';\nimport achievementsGraphic from '../../assets/images/walletTrophy.webp';\n\nexport const WALLET_SUBTYPES = {\n    ACHIEVEMENTS: 'achievements',\n    IDS: 'ids',\n    JOB_HISTORY: 'jobHistory',\n    CURRENCIES: 'currency',\n    LEARNING_HISTORY: 'learningHistory',\n    SKILLS: 'skills',\n};\n\nexport const TYPE_TO_IMG_SRC = {\n    [WALLET_SUBTYPES.ACHIEVEMENTS]: achievementsGraphic,\n    [WALLET_SUBTYPES.IDS]: idsGraphic,\n    [WALLET_SUBTYPES.JOB_HISTORY]: jobhistoryGraphic,\n    [WALLET_SUBTYPES.LEARNING_HISTORY]: learningHistoryGraphic,\n    [WALLET_SUBTYPES.CURRENCIES]: coinsGraphic,\n    [WALLET_SUBTYPES.SKILLS]: skillsGraphic,\n};\n\nexport const TYPE_TO_WALLET_COLOR = {\n    [WALLET_SUBTYPES.ACHIEVEMENTS]: 'spice-300',\n    [WALLET_SUBTYPES.IDS]: 'yellow-300',\n    [WALLET_SUBTYPES.JOB_HISTORY]: 'rose-300',\n    [WALLET_SUBTYPES.LEARNING_HISTORY]: 'emerald-300',\n    [WALLET_SUBTYPES.CURRENCIES]: 'cyan-200',\n    [WALLET_SUBTYPES.SKILLS]: 'indigo-300',\n};\n","import React from 'react';\nimport { Icons } from '../../types';\nimport { ICONS_TO_SOURCE } from '../../constants/icons';\nimport CircleIcon from '../CircleIcon/CircleIcon';\nimport { CountCircle } from '../CircleIcon';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_COLOR } from './constants';\nimport { WALLET_SUBTYPES } from './constants';\n\nexport type RoundedSquareProps = {\n    title?: string;\n    description?: string;\n    type?: string;\n    iconSrc?: string;\n    imgSrc?: string;\n    count?: string | number;\n    onClick?: () => void;\n    bgColor?: string;\n};\n\nexport const RoundedSquare: React.FC<RoundedSquareProps> = ({\n    title = 'Currencies',\n    description = 'Lorem ipsum sit dalor amet',\n    iconSrc = ICONS_TO_SOURCE[Icons.trophyIcon],\n    imgSrc,\n    type = WALLET_SUBTYPES.ACHIEVEMENTS,\n    count = '28',\n    onClick = () => {},\n    bgColor,\n}) => {\n    const imgSource = imgSrc || TYPE_TO_IMG_SRC[type];\n    const backgroundColor = bgColor ?? `bg-${TYPE_TO_WALLET_COLOR[type]}`;\n    const circleClass = `flex w-full justify-end icon-display absolute right-[15px] bottom-[10px] max-h-[40px] max-w-[40px]`;\n\n    return (\n        <button\n            onClick={onClick}\n            className={`flex relative ${backgroundColor} py-[15px] px-[15px] w-[170px] h-[170px] rounded-[40px] rounded-square-card-container`}\n        >\n            <div className=\"w-full relative\">\n                <section className=\"title-headline-container flex items-center justify-between\">\n                    <CountCircle\n                        count={count}\n                        className=\"solo-counter-circle right-[0px] top-[0px] relative\"\n                    />\n                    <h3 className=\"line-clamp-2 font-bold text-[13px] text-grayscale-900 text-left\">\n                        {title}\n                    </h3>\n                </section>\n\n                <div className=\"graphic-background relative flex justify-center\">\n                    <img className=\"max-w-[130px]\" src={imgSource} />\n                </div>\n            </div>\n\n            <div className={circleClass}>\n                <CircleIcon iconSrc={iconSrc} count={count} size=\"40\" />\n            </div>\n        </button>\n    );\n};\n\nexport default RoundedSquare;\n"],"names":[],"mappings":"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"}

package/dist/esm/{VCCard-4184885f.js → VCCard-ddbb8820.js}

@@ -8,7 +8,7 @@ import zlib from 'zlib';
 import * as crypto__default from 'crypto';
 import crypto__default__default from 'crypto';
 import * as process$1 from 'process';
-import { V as VCDisplayCard } from './VCDisplayCard-d9ff62dc.js';
+import { V as VCDisplayCard } from './VCDisplayCard-5d0628ee.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -167377,4 +167377,4 @@ const VCCard = ({ credential, issueeOverride, className = "" }) => {
 };
 
 export { VCCard as V };
-//# sourceMappingURL=VCCard-4184885f.js.map
+//# sourceMappingURL=VCCard-ddbb8820.js.map