@learncard/react 2.3.33 → 2.3.34

package/dist/cjs/index7.js

@@ -2,14 +2,113 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var JobListCard = require('./JobListCard-065f9225.js');
+var AchievementCard = require('./AchievementCard-ddf84c60.js');
+var Button = require('./Button-a7af702b.js');
+var CircleIcon = require('./CircleIcon-ad088e75.js');
+var CourseCard = require('./CourseCard-22b1e164.js');
+var FlippyCard = require('./FlippyCard-33e03a9e.js');
+var JobListCard = require('./JobListCard-abdcd580.js');
+var LearnCardCreditCardBackFace = require('./LearnCardCreditCardBackFace-87cc8b9f.js');
+var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-4452fd7a.js');
+var CircleSpinner = require('./CircleSpinner-093cce04.js');
+var MiniVCThumbnail = require('./MiniVCThumbnail-a78e44f2.js');
+var Notification = require('./Notification-10b40c07.js');
+var QRCodeCard = require('./QRCodeCard-efaa58e1.js');
+var RoundedPill = require('./RoundedPill-726904e1.js');
+var RoundedSquare = require('./RoundedSquare-8f736305.js');
+var constants = require('./constants-6621833f.js');
+var SchoolIDCard = require('./SchoolIDCard-32a47ae5.js');
+var SkillVerticalCard = require('./SkillVerticalCard-3eb3a8e9.js');
+var SkillsCard = require('./SkillsCard-4b6dbb4f.js');
+var SkillsStatsCard = require('./SkillsStatsCard-97a35a88.js');
+var SmallAchievementCard = require('./SmallAchievementCard-c76701ce.js');
+var VCCard = require('./VCCard-b63f75fc.js');
+var VCDisplayBackFace = require('./VCDisplayBackFace-4ae2b5c5.js');
+var VCDisplayCard = require('./VCDisplayCard-b67f991b.js');
+var VCThumbnail = require('./VCThumbnail-584d0b5f.js');
+var VCVerificationCheck = require('./VCVerificationCheck-04f3f7bc.js');
+var VCVerificationPill = require('./VCVerificationPill-1d535a72.js');
+var User = require('./User-b16d5499.js');
+var Trophy = require('./Trophy-9ede7f2b.js');
 require('react');
+require('./icons-20dfd25b.js');
+require('./coins.svg');
+require('./user.svg');
+require('./trophy.svg');
+require('./briefcase.svg');
+require('./graduation.svg');
+require('./lightbulb.svg');
+require('./minipuzzle.svg');
+require('./minitrophy.svg');
+require('./gradcaplight.svg');
+require('./lhplaceholder.png');
+require('./minijob.svg');
+require('./contactless-symbol.svg');
+require('./index-82de573c.js');
+require('./card-chip.svg');
+require('./master-card-logo.svg');
+require('./verified-check.png');
+require('./walletcurrency.webp');
+require('./walletids.webp');
+require('./walletjobhistory.webp');
+require('./walletlearninghistory.webp');
+require('./walletskills.webp');
+require('./walletTrophy.webp');
 require('./minitrophycolored.svg');
 require('./minigradcapcolored.svg');
 require('./minipuzzlecolored.svg');
+require('./skillplaceholder.png');
+require('./skillgraph.svg');
+require('@learncard/core');
+require('./ArrowArcRight.svg');
+require('./icon.green.fat-arrow.png');
+require('./default-face.jpeg');
+require('./vc.check.svg');
+require('./RedXCircle.svg');
+require('./GreenCheckCircle.svg');
+require('./YellowWarningCircle.svg');
 
 
 
+exports.AchievementCard = AchievementCard.AchievementCard;
+exports.Button = Button.Button;
+exports.CircleIcon = CircleIcon.CircleIcon;
+exports.CountCircle = CircleIcon.CountCircle;
+exports.CourseCard = CourseCard.CourseCard;
+exports.FlippyCard = FlippyCard.FlippyCard;
 exports.JobListCard = JobListCard.JobListCard;
 exports.JobListingBubble = JobListCard.JobListingBubble;
+exports.LearnCardCreditCardBackFace = LearnCardCreditCardBackFace.LearnCardCreditCardBackFace;
+exports.LearnCardCreditCardFrontFace = LearnCardCreditCardFrontFace.LearnCardCreditCardFrontFace;
+exports.CircleLoadingState = CircleSpinner.CircleLoadingState;
+exports.MiniVCThumbnail = MiniVCThumbnail.MiniVCThumbnail;
+exports.Notification = Notification.Notification;
+exports.NotificationTypeStyles = Notification.NotificationTypeStyles;
+exports.QRCodeCard = QRCodeCard.QRCodeCard;
+exports.RoundedPill = RoundedPill.RoundedPill;
+exports.RoundedSquare = RoundedSquare.RoundedSquare;
+exports.TYPE_TO_IMG_SRC = constants.TYPE_TO_IMG_SRC;
+exports.TYPE_TO_MINI_ICON = constants.TYPE_TO_MINI_ICON;
+exports.TYPE_TO_WALLET_COLOR = constants.TYPE_TO_WALLET_COLOR;
+exports.WALLET_SUBTYPES = constants.WALLET_SUBTYPES;
+exports.SchoolIDCard = SchoolIDCard.SchoolIDCard;
+exports.SkillVerticalCard = SkillVerticalCard.SkillVerticalCard;
+exports.SkillsCard = SkillsCard.SkillsCard;
+exports.SkillsMeterSegment = SkillsCard.SkillsMeterSegment;
+exports.SkillsStatsCard = SkillsStatsCard.SkillsStatsCard;
+exports.SmallAchievementCard = SmallAchievementCard.SmallAchievementCard;
+exports.VCCard = VCCard.VCCard;
+exports.VCDisplayBackFace = VCDisplayBackFace.VCDisplayBackFace;
+exports.VCDisplayCard = VCDisplayCard.VCDisplayCard;
+exports.VCThumbnail = VCThumbnail.VCThumbnail;
+exports.VCVerificationCheck = VCVerificationCheck.VCVerificationCheck;
+exports.VCVerificationCheckWithText = VCVerificationCheck.VCVerificationCheckWithText;
+exports.ValidationStateIndicator = VCVerificationPill.ValidationStateIndicator;
+exports.Briefcase = User.Briefcase;
+exports.Checkmark = User.Checkmark;
+exports.Coins = User.Coins;
+exports.Graduation = User.Graduation;
+exports.Lightbulb = User.Lightbulb;
+exports.User = User.User;
+exports.Trophy = Trophy.Trophy;
 //# sourceMappingURL=index7.js.map

package/dist/cjs/index7.js.map

@@ -1 +1 @@
-{"version":3,"file":"index7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"index7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/index8.js

@@ -2,11 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LearnCardCreditCardBackFace = require('./LearnCardCreditCardBackFace-87cc8b9f.js');
+var JobListCard = require('./JobListCard-abdcd580.js');
 require('react');
-require('./contactless-symbol.svg');
+require('./constants-6621833f.js');
+require('./walletcurrency.webp');
+require('./walletids.webp');
+require('./walletjobhistory.webp');
+require('./walletlearninghistory.webp');
+require('./walletskills.webp');
+require('./walletTrophy.webp');
+require('./minitrophycolored.svg');
+require('./minigradcapcolored.svg');
+require('./minipuzzlecolored.svg');
 
 
 
-exports.LearnCardCreditCardBackFace = LearnCardCreditCardBackFace.LearnCardCreditCardBackFace;
+exports.JobListCard = JobListCard.JobListCard;
+exports.JobListingBubble = JobListCard.JobListingBubble;
 //# sourceMappingURL=index8.js.map

package/dist/cjs/index8.js.map

@@ -1 +1 @@
-{"version":3,"file":"index8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/index9.js

@@ -2,13 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-4452fd7a.js');
+var LearnCardCreditCardBackFace = require('./LearnCardCreditCardBackFace-87cc8b9f.js');
 require('react');
-require('./index-82de573c.js');
-require('./card-chip.svg');
-require('./master-card-logo.svg');
+require('./contactless-symbol.svg');
 
 
 
-exports.LearnCardCreditCardFrontFace = LearnCardCreditCardFrontFace.LearnCardCreditCardFrontFace;
+exports.LearnCardCreditCardBackFace = LearnCardCreditCardBackFace.LearnCardCreditCardBackFace;
 //# sourceMappingURL=index9.js.map

package/dist/cjs/index9.js.map

@@ -1 +1 @@
-{"version":3,"file":"index9.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index9.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/esm/AchievementCard-2a3b7003.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { T as TYPE_TO_MINI_ICON } from './constants-e55bb833.js';
+import { T as Trophy } from './Trophy-702610b8.js';
+import { R as RoundedPill } from './RoundedPill-75154146.js';
+
+const AchievementCard = ({
+  title = "Title Lorem Ipsum",
+  thumbImgSrc,
+  claimStatus,
+  showSkills = true,
+  skillCount,
+  showStatus = true,
+  onClick = () => {
+  }
+}) => {
+  const thumbClass = thumbImgSrc ? "bg-grayscale-50" : "bg-indigo-200";
+  const claimBtnStatusType = claimStatus ? "achievement" : "locked";
+  const skillIconSrc = TYPE_TO_MINI_ICON.skill;
+  const skillCountTxt = skillCount && skillCount > 1 ? "Skills" : "Skill";
+  console.log("///skilCount", skillCount);
+  const showSkillCounter = showSkills && skillCount !== 0;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[265px] rounded-[20px] rounded-square-card-container`
+  }, /* @__PURE__ */ React.createElement("section", {
+    className: `relative flex h-[130px] ${thumbClass} flex-col justify-center items-center w-full rounded-[20px]`
+  }, thumbImgSrc && /* @__PURE__ */ React.createElement("img", {
+    className: "h-full w-full object-cover rounded-[20px]",
+    src: thumbImgSrc != null ? thumbImgSrc : "",
+    alt: "Credential Achievement Image"
+  }), (!thumbImgSrc || thumbImgSrc === "") && /* @__PURE__ */ React.createElement(Trophy, {
+    className: "achievement-placeholder-trophy flex p-[15px]",
+    color: "#ffffff"
+  }), showSkills && showSkillCounter && /* @__PURE__ */ React.createElement("div", {
+    className: "absolute px-[10px] text-[14px] flex items-center justify-center text-indigo-600 skill-pill font-bold min-w-[100px] bottom-[15px] right-[9px] rounded-[20px] h-[30px] bg-indigo-50 "
+  }, /* @__PURE__ */ React.createElement("img", {
+    src: skillIconSrc,
+    className: "flex items-center justify-center mr-[4px]"
+  }), "+", skillCount, " ", skillCountTxt)), /* @__PURE__ */ React.createElement("section", {
+    className: "achievement-title w-full flex justify-center line-clamp-2"
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "text-[14px] text-grayscale-900 font-bold mt-[10px] text-center"
+  }, title)), /* @__PURE__ */ React.createElement("section", {
+    className: "achievement-card-footer absolute bottom-[10px] left-[5px]"
+  }, showStatus && /* @__PURE__ */ React.createElement(RoundedPill, {
+    onClick,
+    showCheckmark: true,
+    type: claimBtnStatusType,
+    statusText: "Claimed"
+  })));
+};
+
+export { AchievementCard as A };
+//# sourceMappingURL=AchievementCard-2a3b7003.js.map

package/dist/esm/AchievementCard-2a3b7003.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AchievementCard-2a3b7003.js","sources":["../../src/components/AchievementCard/AchievementCard.tsx"],"sourcesContent":["import React from 'react';\nimport { AchievementCardProps } from '../../types';\nimport { RoundedPill } from '../RoundedPill';\nimport { Trophy } from '../svgs';\nimport { TYPE_TO_MINI_ICON } from '../RoundedSquare';\n\nexport const AchievementCard: React.FC<AchievementCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    thumbImgSrc,\n    claimStatus,\n    showSkills = true,\n    skillCount,\n    showStatus = true,\n    onClick = () => {},\n}) => {\n    const thumbClass = thumbImgSrc ? 'bg-grayscale-50' : 'bg-indigo-200';\n\n    const claimBtnStatusType = claimStatus ? 'achievement' : 'locked';\n    const skillIconSrc = TYPE_TO_MINI_ICON.skill;\n    const skillCountTxt = skillCount && skillCount > 1 ? 'Skills' : 'Skill';\n\n    console.log('///skilCount', skillCount);\n\n    const showSkillCounter = showSkills && skillCount !== 0;\n\n    return (\n        <div\n            className={`flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[265px] rounded-[20px] rounded-square-card-container`}\n        >\n            <section\n                className={`relative flex h-[130px] ${thumbClass} flex-col justify-center items-center w-full rounded-[20px]`}\n            >\n                {thumbImgSrc && (\n                    <img\n                        className=\"h-full w-full object-cover rounded-[20px]\"\n                        src={thumbImgSrc ?? ''}\n                        alt=\"Credential Achievement Image\"\n                    />\n                )}\n                {(!thumbImgSrc || thumbImgSrc === '') && (\n                    <Trophy\n                        className=\"achievement-placeholder-trophy flex p-[15px]\"\n                        color=\"#ffffff\"\n                    />\n                )}\n\n                {showSkills && showSkillCounter && (\n                    <div className=\"absolute px-[10px] text-[14px] flex items-center justify-center text-indigo-600 skill-pill font-bold min-w-[100px] bottom-[15px] right-[9px] rounded-[20px] h-[30px] bg-indigo-50 \">\n                        <img\n                            src={skillIconSrc}\n                            className=\"flex items-center justify-center mr-[4px]\"\n                        />\n                        +{skillCount} {skillCountTxt}\n                    </div>\n                )}\n            </section>\n\n            <section className=\"achievement-title w-full flex justify-center line-clamp-2\">\n                <p className=\"text-[14px] text-grayscale-900 font-bold mt-[10px] text-center\">\n                    {title}\n                </p>\n            </section>\n\n            <section className=\"achievement-card-footer absolute bottom-[10px] left-[5px]\">\n                {showStatus && (\n                    <RoundedPill\n                        onClick={onClick}\n                        showCheckmark\n                        type={claimBtnStatusType}\n                        statusText={'Claimed'}\n                    />\n                )}\n            </section>\n        </div>\n    );\n};\n\nexport default AchievementCard;\n"],"names":[],"mappings":";;;;;AAIY,MAAC,eAAe,GAAG,CAAC;AAChC,EAAE,KAAK,GAAG,mBAAmB;AAC7B,EAAE,WAAW;AACb,EAAE,WAAW;AACb,EAAE,UAAU,GAAG,IAAI;AACnB,EAAE,UAAU;AACZ,EAAE,UAAU,GAAG,IAAI;AACnB,EAAE,OAAO,GAAG,MAAM;AAClB,GAAG;AACH,CAAC,KAAK;AACN,EAAE,MAAM,UAAU,GAAG,WAAW,GAAG,iBAAiB,GAAG,eAAe,CAAC;AACvE,EAAE,MAAM,kBAAkB,GAAG,WAAW,GAAG,aAAa,GAAG,QAAQ,CAAC;AACpE,EAAE,MAAM,YAAY,GAAG,iBAAiB,CAAC,KAAK,CAAC;AAC/C,EAAE,MAAM,aAAa,GAAG,UAAU,IAAI,UAAU,GAAG,CAAC,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC1E,EAAE,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAC1C,EAAE,MAAM,gBAAgB,GAAG,UAAU,IAAI,UAAU,KAAK,CAAC,CAAC;AAC1D,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,CAAC,2IAA2I,CAAC;AAC5J,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,CAAC,wBAAwB,EAAE,UAAU,CAAC,2DAA2D,CAAC;AACjH,GAAG,EAAE,WAAW,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC/D,IAAI,SAAS,EAAE,2CAA2C;AAC1D,IAAI,GAAG,EAAE,WAAW,IAAI,IAAI,GAAG,WAAW,GAAG,EAAE;AAC/C,IAAI,GAAG,EAAE,8BAA8B;AACvC,GAAG,CAAC,EAAE,CAAC,CAAC,WAAW,IAAI,WAAW,KAAK,EAAE,qBAAqB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC1F,IAAI,SAAS,EAAE,8CAA8C;AAC7D,IAAI,KAAK,EAAE,SAAS;AACpB,GAAG,CAAC,EAAE,UAAU,IAAI,gBAAgB,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACnF,IAAI,SAAS,EAAE,oLAAoL;AACnM,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,GAAG,EAAE,YAAY;AACrB,IAAI,SAAS,EAAE,2CAA2C;AAC1D,GAAG,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC5F,IAAI,SAAS,EAAE,2DAA2D;AAC1E,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AAC9C,IAAI,SAAS,EAAE,gEAAgE;AAC/E,GAAG,EAAE,KAAK,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7D,IAAI,SAAS,EAAE,2DAA2D;AAC1E,GAAG,EAAE,UAAU,oBAAoB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACpE,IAAI,OAAO;AACX,IAAI,aAAa,EAAE,IAAI;AACvB,IAAI,IAAI,EAAE,kBAAkB;AAC5B,IAAI,UAAU,EAAE,SAAS;AACzB,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;;;;"}

package/dist/esm/{CircleIcon-7c21af00.js → CircleIcon-f11c1db9.js}

@@ -1,29 +1,5 @@
 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
-};
+import { I as ICONS_TO_SOURCE, a as Icons } from './icons-6138bb65.js';
 
 const CountCircle = ({
   size = "auto",
@@ -79,5 +55,5 @@ const CircleIcon = ({
   })));
 };
 
-export { CountCircle as C, ICONS_TO_SOURCE as I, CircleIcon as a, Icons as b };
-//# sourceMappingURL=CircleIcon-7c21af00.js.map
+export { CountCircle as C, CircleIcon as a };
+//# sourceMappingURL=CircleIcon-f11c1db9.js.map

package/dist/esm/CircleIcon-f11c1db9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleIcon-f11c1db9.js","sources":["../../src/components/CircleIcon/CircleIcon.tsx"],"sourcesContent":["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":";;;AAGY,MAAC,WAAW,GAAG,CAAC;AAC5B,EAAE,IAAI,GAAG,MAAM;AACf,EAAE,KAAK,GAAG,IAAI;AACd,EAAE,YAAY,GAAG,SAAS;AAC1B,EAAE,SAAS;AACX,EAAE,OAAO,GAAG,MAAM;AAClB,GAAG;AACH,EAAE,OAAO,GAAG,iBAAiB;AAC7B,CAAC,KAAK;AACN,EAAE,MAAM,KAAK,GAAG;AAChB,IAAI,KAAK,EAAE,IAAI;AACf,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,OAAO,EAAE,YAAY;AACzB,GAAG,CAAC;AACJ,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACxD,IAAI,OAAO;AACX,IAAI,SAAS,EAAE,CAAC,EAAE,OAAO,CAAC,8FAA8F,EAAE,SAAS,CAAC,CAAC;AACrI,IAAI,KAAK;AACT,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,CAAC,MAAM,CAAC;AACvB,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AAC9C,IAAI,SAAS,EAAE,kEAAkE;AACjF,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AACd,EAAE;AACU,MAAC,UAAU,GAAG,CAAC;AAC3B,EAAE,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC;AAC5C,EAAE,IAAI,GAAG,MAAM;AACf,EAAE,KAAK,GAAG,IAAI;AACd,EAAE,YAAY,GAAG,KAAK;AACtB,EAAE,OAAO,GAAG,MAAM;AAClB,GAAG;AACH,EAAE,OAAO,GAAG,kBAAkB;AAC9B,EAAE,SAAS,GAAG,IAAI;AAClB,CAAC,KAAK;AACN,EAAE,MAAM,KAAK,GAAG;AAChB,IAAI,KAAK,EAAE,IAAI;AACf,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,OAAO,EAAE,YAAY;AACzB,GAAG,CAAC;AACJ,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACxD,IAAI,OAAO;AACX,IAAI,SAAS,EAAE,CAAC,EAAE,OAAO,CAAC,iDAAiD,CAAC;AAC5E,IAAI,KAAK;AACT,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,CAAC,sBAAsB,CAAC;AACvC,GAAG,EAAE,CAAC,SAAS,oBAAoB,KAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACpE,IAAI,KAAK;AACT,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjD,IAAI,SAAS,EAAE,4BAA4B;AAC3C,IAAI,GAAG,EAAE,OAAO,IAAI,IAAI,GAAG,OAAO,GAAG,EAAE;AACvC,IAAI,GAAG,EAAE,YAAY;AACrB,GAAG,CAAC,CAAC,CAAC,CAAC;AACP;;;;"}

package/dist/esm/{CourseCard-b9e42233.js → CourseCard-4639b301.js}

@@ -1,13 +1,13 @@
 import React from 'react';
 import CourseCardPlaceholder from './lhplaceholder.png';
-import MiniTrophyIcon from './minitrophy.svg';
+import trophylight from './minitrophy.svg';
 import MiniJobIcon from './minijob.svg';
-import MiniPuzzleIcon from './minipuzzle.svg';
+import puzzlelight from './minipuzzle.svg';
 
 const TYPE_TO_COURSE_MINI_ICON = {
   ["job"]: MiniJobIcon,
-  ["achievement"]: MiniTrophyIcon,
-  ["skill"]: MiniPuzzleIcon
+  ["achievement"]: trophylight,
+  ["skill"]: puzzlelight
 };
 const TYPE_TO_COLOR = {
   ["job"]: "bg-emerald-700",
@@ -78,4 +78,4 @@ const CourseCard = ({
 };
 
 export { CourseCard as C };
-//# sourceMappingURL=CourseCard-b9e42233.js.map
+//# sourceMappingURL=CourseCard-4639b301.js.map

package/dist/esm/{CourseCard-b9e42233.js.map → CourseCard-4639b301.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CourseCard-b9e42233.js","sources":["../../src/components/CourseCard/CourseCard.tsx"],"sourcesContent":["import React from 'react';\nimport { CourseCardProps } from '../../types';\nimport CourseCardPlaceholder from '../../assets/images/lhplaceholder.png';\n\nimport MiniTrophyIcon from '../../assets/images/minitrophy.svg';\nimport MiniJobIcon from '../../assets/images/minijob.svg';\nimport MiniPuzzleIcon from '../../assets/images/minipuzzle.svg';\n\nconst TYPE_TO_COURSE_MINI_ICON: any = {\n    ['job']: MiniJobIcon,\n    ['achievement']: MiniTrophyIcon,\n    ['skill']: MiniPuzzleIcon,\n};\n\nconst TYPE_TO_COLOR: any = {\n    ['job']: 'bg-emerald-700',\n    ['achievement']: 'bg-spice-500',\n    ['skill']: 'bg-indigo-500',\n};\n\ntype CourseCardStatBubbleProps = {\n    count: number | string;\n    type: string;\n    className?: string;\n};\n\nconst CourseCardStatBubble: React.FC<CourseCardStatBubbleProps> = ({\n    count = 0,\n    type = 'job',\n    className,\n}) => {\n    const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];\n    const bgColor = TYPE_TO_COLOR[type];\n\n    return (\n        <div\n            className={`course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[80px] h-[30px] items-center ${className}`}\n        >\n            <img src={imgSrc} className=\"pr-[5px]\" />\n            <span className=\"flex items-center text-sm text-white\">{count}</span>\n        </div>\n    );\n};\n\nexport const CourseCard: React.FC<CourseCardProps> = ({\n    status = 'Enrolled',\n    title = 'MECH 1340 Digital Fundamentals and Programmable Logic Controllers',\n    semester = 'Fall 2022',\n    jobCount = 1,\n    achievementCount = 4,\n    thumbSrc,\n    skillCount = 9,\n    className,\n    onClick = () => {},\n}) => {\n    return (\n        <div\n            onClick={onClick}\n            className={`flex shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[130px] rounded-[20px] ${className}`}\n        >\n            <img\n                src={CourseCardPlaceholder}\n                className=\"course-card-img w-[100px] h-[111px] mr-[10px]\"\n            />\n\n            <div className=\"course-card-detail-info flex flex-col justify-between\">\n                <div className=\"text-sm\">\n                    <span className=\"text-emerald-700 font-semibold\">{status}</span>\n                    <span className=\"spacer-dot mx-[3px]\">•</span>\n                    <span className=\"text-grayscale-500\">{semester}</span>\n                </div>\n                <p className=\"course-card-title text-sm font-semibold\">{title}</p>\n                <div className=\"course-card-counts-container flex items-center mt-[5px]\">\n                    <CourseCardStatBubble type={'job'} count={jobCount} className={'mr-[5px]'} />\n                    <CourseCardStatBubble\n                        type={'achievement'}\n                        count={achievementCount}\n                        className={'mr-[5px]'}\n                    />\n                    <CourseCardStatBubble\n                        type={'skill'}\n                        count={skillCount}\n                        className={'mr-[0px]'}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default CourseCard;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CourseCard-4639b301.js","sources":["../../src/components/CourseCard/CourseCard.tsx"],"sourcesContent":["import React from 'react';\nimport { CourseCardProps } from '../../types';\nimport CourseCardPlaceholder from '../../assets/images/lhplaceholder.png';\n\nimport MiniTrophyIcon from '../../assets/images/minitrophy.svg';\nimport MiniJobIcon from '../../assets/images/minijob.svg';\nimport MiniPuzzleIcon from '../../assets/images/minipuzzle.svg';\n\nconst TYPE_TO_COURSE_MINI_ICON: any = {\n    ['job']: MiniJobIcon,\n    ['achievement']: MiniTrophyIcon,\n    ['skill']: MiniPuzzleIcon,\n};\n\nconst TYPE_TO_COLOR: any = {\n    ['job']: 'bg-emerald-700',\n    ['achievement']: 'bg-spice-500',\n    ['skill']: 'bg-indigo-500',\n};\n\ntype CourseCardStatBubbleProps = {\n    count: number | string;\n    type: string;\n    className?: string;\n};\n\nconst CourseCardStatBubble: React.FC<CourseCardStatBubbleProps> = ({\n    count = 0,\n    type = 'job',\n    className,\n}) => {\n    const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];\n    const bgColor = TYPE_TO_COLOR[type];\n\n    return (\n        <div\n            className={`course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[80px] h-[30px] items-center ${className}`}\n        >\n            <img src={imgSrc} className=\"pr-[5px]\" />\n            <span className=\"flex items-center text-sm text-white\">{count}</span>\n        </div>\n    );\n};\n\nexport const CourseCard: React.FC<CourseCardProps> = ({\n    status = 'Enrolled',\n    title = 'MECH 1340 Digital Fundamentals and Programmable Logic Controllers',\n    semester = 'Fall 2022',\n    jobCount = 1,\n    achievementCount = 4,\n    thumbSrc,\n    skillCount = 9,\n    className,\n    onClick = () => {},\n}) => {\n    return (\n        <div\n            onClick={onClick}\n            className={`flex shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[130px] rounded-[20px] ${className}`}\n        >\n            <img\n                src={CourseCardPlaceholder}\n                className=\"course-card-img w-[100px] h-[111px] mr-[10px]\"\n            />\n\n            <div className=\"course-card-detail-info flex flex-col justify-between\">\n                <div className=\"text-sm\">\n                    <span className=\"text-emerald-700 font-semibold\">{status}</span>\n                    <span className=\"spacer-dot mx-[3px]\">•</span>\n                    <span className=\"text-grayscale-500\">{semester}</span>\n                </div>\n                <p className=\"course-card-title text-sm font-semibold\">{title}</p>\n                <div className=\"course-card-counts-container flex items-center mt-[5px]\">\n                    <CourseCardStatBubble type={'job'} count={jobCount} className={'mr-[5px]'} />\n                    <CourseCardStatBubble\n                        type={'achievement'}\n                        count={achievementCount}\n                        className={'mr-[5px]'}\n                    />\n                    <CourseCardStatBubble\n                        type={'skill'}\n                        count={skillCount}\n                        className={'mr-[0px]'}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default CourseCard;\n"],"names":["MiniTrophyIcon","MiniPuzzleIcon"],"mappings":"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"}

package/dist/esm/{JobListCard-261c8028.js → JobListCard-ee0e644e.js}

@@ -1,13 +1,6 @@
 import React from 'react';
-import MiniTrophyIcon from './minitrophycolored.svg';
-import MiniGradIcon from './minigradcapcolored.svg';
-import MiniPuzzleIcon from './minipuzzlecolored.svg';
+import { T as TYPE_TO_MINI_ICON } from './constants-e55bb833.js';
 
-const TYPE_TO_COURSE_MINI_ICON = {
-  job: MiniGradIcon,
-  achievement: MiniTrophyIcon,
-  skill: MiniPuzzleIcon
-};
 const TYPE_TO_COLOR = {
   job: "bg-emerald-50",
   achievement: "bg-spice-50",
@@ -23,7 +16,7 @@ const JobListingBubble = ({
   type = "job",
   className
 }) => {
-  const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];
+  const imgSrc = TYPE_TO_MINI_ICON[type];
   const bgColor = TYPE_TO_COLOR[type];
   const textColor = TYPE_TO_TEXT_COLOR[type];
   return /* @__PURE__ */ React.createElement("div", {
@@ -114,4 +107,4 @@ const JobListCard = ({
 };
 
 export { JobListingBubble as J, JobListCard as a };
-//# sourceMappingURL=JobListCard-261c8028.js.map
+//# sourceMappingURL=JobListCard-ee0e644e.js.map

package/dist/esm/JobListCard-ee0e644e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JobListCard-ee0e644e.js","sources":["../../src/components/JobListCard/JobListCard.tsx"],"sourcesContent":["import React from 'react';\nimport { JobListCardProps } from '../../types';\nimport { TYPE_TO_MINI_ICON } from '../RoundedSquare';\n\nconst TYPE_TO_COLOR = {\n    job: 'bg-emerald-50',\n    achievement: 'bg-spice-50',\n    skill: 'bg-indigo-50',\n};\n\nconst TYPE_TO_TEXT_COLOR = {\n    job: 'text-emerald-700',\n    achievement: 'text-spice-500',\n    skill: 'text-indigo-600',\n};\n\ntype JobListingBubbleProps = {\n    count: number | string;\n    type: 'job' | 'achievement' | 'skill';\n    className?: string;\n};\n\nexport const JobListingBubble: React.FC<JobListingBubbleProps> = ({\n    count = 0,\n    type = 'job',\n    className,\n}) => {\n    const imgSrc = TYPE_TO_MINI_ICON[type];\n    const bgColor = TYPE_TO_COLOR[type];\n    const textColor = TYPE_TO_TEXT_COLOR[type];\n    return (\n        <div\n            className={`course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[100px] h-[30px] items-center ${className}`}\n        >\n            <img src={imgSrc} />\n            <span className={`flex items-center text-sm ${textColor} font-bold`}>{count}</span>\n        </div>\n    );\n};\n\nexport const JobListCard: React.FC<JobListCardProps> = ({\n    company,\n    className = 'job-listing-card',\n    title,\n    compensation,\n    location,\n    locationRequirement,\n    timeRequirement,\n    qualificationDisplay,\n    percentQualifiedDisplay,\n    postDateDisplay,\n    imgThumb,\n    isBookmarked,\n    onBookmark,\n    onClick,\n}) => {\n    const courseCountDisplay = `${qualificationDisplay?.courses?.fulfilledCount ?? 0}/${\n        qualificationDisplay?.courses?.totalRequiredCount ?? 0\n    }`;\n    const achievementsCountDisplay = `${qualificationDisplay?.achievements?.fulfilledCount ?? 0}/${\n        qualificationDisplay?.achievements?.totalRequiredCount ?? 0\n    }`;\n    const skillsCountDisplay = `${qualificationDisplay?.skills?.fulfilledCount ?? 0}/${\n        qualificationDisplay?.skills?.totalRequiredCount ?? 0\n    }`;\n\n    const qualifiedText = percentQualifiedDisplay\n        ? `${percentQualifiedDisplay}% Qualified - Apply`\n        : 'Apply';\n\n    let topText = '';\n    if (!compensation && timeRequirement) topText = timeRequirement;\n    if (!timeRequirement && compensation) topText = compensation;\n    if (timeRequirement && compensation) topText = `${compensation} • ${timeRequirement}`;\n\n    let locationText = '';\n    if (!location && locationRequirement) locationText = locationRequirement;\n    if (!locationRequirement && location) locationText = location;\n    if (locationRequirement && location) locationText = `${locationRequirement} • ${location}`;\n\n    return (\n        <div\n            className={`flex flex-col justify-between shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[260px] rounded-[20px] ${className}`}\n        >\n            <div className=\"job-listing-top flex\">\n                <div className=\"flex text-grayscale-500 text-xs uppercase w-full line-clamp-1\">\n                    {topText}\n                </div>\n            </div>\n            <p className=\"text-grayscale-500 text-xs line-clamp-1 flex-shrink-0\">\n                {' '}\n                {postDateDisplay}\n            </p>\n\n            <div className=\"job-listing-center flex mt-[5px]\">\n                {imgThumb && (\n                    <img\n                        className=\"object-cover w-[80px] flex-shrink-0 items-center justify-center rounded-[15px] mr-[10px]\"\n                        src={imgThumb}\n                    />\n                )}\n\n                <div className=\"job-listing-description flex flex-col\">\n                    <h4 className=\"text-lg font-bold line-clamp-2\">{title}</h4>\n                    <p className=\"text-sm line-clamp-1\">{company}</p>\n                    <span className=\"text-sm line-clamp-1\">{locationText}</span>\n                </div>\n            </div>\n\n            <div className=\"job-listing-qualifications mt-[10px]\">\n                <div className=\"course-card-counts-container flex items-center\">\n                    {qualificationDisplay?.courses?.fulfilledCount && (\n                        <JobListingBubble\n                            type={'job'}\n                            count={courseCountDisplay}\n                            className={'mr-[5px]'}\n                        />\n                    )}\n                    {qualificationDisplay?.achievements?.fulfilledCount && (\n                        <JobListingBubble\n                            type={'achievement'}\n                            count={achievementsCountDisplay}\n                            className={'mr-[5px]'}\n                        />\n                    )}\n                    {qualificationDisplay?.skills?.fulfilledCount && (\n                        <JobListingBubble\n                            type={'skill'}\n                            count={skillsCountDisplay}\n                            className={'mr-[0px]'}\n                        />\n                    )}\n                </div>\n            </div>\n\n            <button\n                type=\"button\"\n                onClick={onClick}\n                className=\"mt-[10px] bg-cyan-700 py-[15px] px-[2px] rounded-[40px] text-grayscale-50 text-[17px] font-bold\"\n            >\n                {qualifiedText}\n            </button>\n        </div>\n    );\n};\n\nexport default JobListCard;\n"],"names":[],"mappings":"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"}

package/dist/esm/{Notification-ddbb3c37.js → Notification-ac50790d.js}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { T as Trophy } from './Trophy-702610b8.js';
-import { a as Coins, U as User, L as Lightbulb, B as Briefcase, G as Graduation, C as Checkmark } from './Checkmark-fb8086c5.js';
+import { a as Coins, U as User, L as Lightbulb, B as Briefcase, G as Graduation, C as Checkmark } from './User-d3aa7eb3.js';
 
 var NotificationTypeEnum = /* @__PURE__ */ ((NotificationTypeEnum2) => {
   NotificationTypeEnum2["Currency"] = "currency";
@@ -128,4 +128,4 @@ const Notification = ({
 };
 
 export { Notification as N, NotificationTypeStyles as a };
-//# sourceMappingURL=Notification-ddbb3c37.js.map
+//# sourceMappingURL=Notification-ac50790d.js.map

package/dist/esm/{Notification-ddbb3c37.js.map → Notification-ac50790d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Notification-ddbb3c37.js","sources":["../../src/constants/notifications.ts","../../src/components/Notification/types.ts","../../src/components/Notification/Notification.tsx"],"sourcesContent":["export enum NotificationTypeEnum {\n    Currency = 'currency',\n    ID = 'id',\n    Achievement = 'achievement',\n    Skill = 'skill',\n    Job = 'job',\n    Learning = 'learning',\n}\n","import { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Trophy from '../svgs/Trophy';\nimport Coins from '../svgs/Coins';\nimport User from '../svgs/User';\nimport Briefcase from '../svgs/Briefcase';\nimport Lightbulb from '../svgs/Lightbulb';\nimport Graduation from '../svgs/Graduation';\n\nexport type NotificationProps = {\n    notificationType: NotificationTypeEnum;\n    title: string;\n    issuerImage?: string;\n    issueDate: string;\n    className?: string;\n    onClick: () => void;\n};\n\nexport const NotificationTypeStyles = {\n    [NotificationTypeEnum.Currency]: {\n        viewButtonStyles: 'border-cyan-600 text-cyan-600',\n        unclaimedButtonStyles: 'text-white bg-cyan-600 border-cyan-600',\n        claimedButtonStyles: 'text-cyan-600 bg-cyan-50 border-cyan-50',\n        textStyles: 'text-cyan-600 capitalize',\n        iconCircleStyles: 'bg-cyan-600',\n        IconComponent: Coins,\n    },\n    [NotificationTypeEnum.ID]: {\n        viewButtonStyles: 'border-yellow-400 text-yellow-400',\n        unclaimedButtonStyles: 'text-white bg-yellow-400 border-yellow-400',\n        claimedButtonStyles: 'text-yellow-400 bg-yellow-50 border-yellow-50',\n        textStyles: 'text-yellow-400 uppercase',\n        iconCircleStyles: 'bg-yellow-400',\n        IconComponent: User,\n    },\n    [NotificationTypeEnum.Achievement]: {\n        viewButtonStyles: 'border-spice-400 text-spice-400',\n        unclaimedButtonStyles: 'text-white bg-spice-400 border-spice-400',\n        claimedButtonStyles: 'text-spice-400 bg-spice-50 border-spice-50',\n        textStyles: 'text-spice-400 capitalize',\n        iconCircleStyles: 'bg-spice-400',\n        IconComponent: Trophy,\n    },\n    [NotificationTypeEnum.Skill]: {\n        viewButtonStyles: 'border-indigo-400 text-indigo-400',\n        unclaimedButtonStyles: 'text-white bg-indigo-400 border-indigo-400',\n        claimedButtonStyles: 'text-indigo-400 bg-indigo-50 border-indigo-50',\n        textStyles: 'text-indigo-400 capitalize',\n        iconCircleStyles: 'bg-indigo-400',\n        IconComponent: Lightbulb,\n    },\n    [NotificationTypeEnum.Job]: {\n        viewButtonStyles: 'border-emerald-400 text-emerald-400',\n        unclaimedButtonStyles: 'text-white bg-emerald-400 border-emerald-400',\n        claimedButtonStyles: 'text-emerald-400 bg-emerald-50 border-emerald-50',\n        textStyles: 'text-emerald-400 capitalize',\n        iconCircleStyles: 'bg-emerald-400',\n        IconComponent: Briefcase,\n    },\n    [NotificationTypeEnum.Learning]: {\n        viewButtonStyles: 'border-rose-400 text-rose-400',\n        unclaimedButtonStyles: 'text-white bg-rose-400 border-rose-400',\n        claimedButtonStyles: 'text-rose-400 bg-rose-50 border-rose-50',\n        textStyles: 'text-rose-400 capitalize',\n        iconCircleStyles: 'bg-rose-400',\n        IconComponent: Graduation,\n    },\n};\n","import React, { useState } from 'react';\n\nimport { NotificationProps, NotificationTypeStyles } from './types';\nimport { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Checkmark from '../svgs/Checkmark';\n\nexport const Notification: React.FC<NotificationProps> = ({\n    title,\n    issuerImage,\n    issueDate,\n    className,\n    notificationType = NotificationTypeEnum.Achievement,\n    onClick = () => {},\n}) => {\n    const [isClaimed, setIsClaimed] = useState<boolean>(false);\n\n    const handleClaim = () => setIsClaimed(!isClaimed);\n\n    const {\n        IconComponent,\n        iconCircleStyles,\n        textStyles,\n        viewButtonStyles,\n        claimedButtonStyles,\n        unclaimedButtonStyles,\n    } = NotificationTypeStyles[notificationType];\n\n    const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;\n\n    return (\n        <div\n            className={`flex justify-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`}\n        >\n            <div\n                className={`absolute flex items-center justify-center top-2 right-2 h-8 w-8 overflow-hidden rounded-full z-10 ${iconCircleStyles}`}\n            >\n                <IconComponent className=\"h-4/5 text-white\" />\n            </div>\n            <div className=\"flex flex-col justify-center items-center relative w-11/12\">\n                <div className=\"flex flex-row items-center justify-start w-full\">\n                    <div className=\"h-12 w-12 max-h-12 max-w-[48px] min-h-[48px] min-w-[48px] overflow-hidden rounded-full\">\n                        <img\n                            src={issuerImage}\n                            alt=\"issuer image\"\n                            className=\"w-full h-full object-cover\"\n                        />\n                    </div>\n                    <div className=\"text-left ml-3\">\n                        <h4\n                            className=\"font-bold tracking-wide line-clamp-1 text-black\"\n                            data-testid=\"notification-title\"\n                        >\n                            {title}\n                        </h4>\n                        <p\n                            className={`font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`}\n                            data-testid=\"notification-type\"\n                        >\n                            {notificationType}{' '}\n                            <span\n                                className=\"text-grayscale-600 normal-case font-normal text-sm\"\n                                data-testid=\"notification-cred-issue-date\"\n                            >\n                                • {issueDate}\n                            </span>\n                        </p>\n                    </div>\n                </div>\n                <div className=\"flex items-center justify-between w-full mt-3\">\n                    <button\n                        onClick={onClick}\n                        className={`flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`}\n                        role=\"button\"\n                        name=\"notification-view-button\"\n                    >\n                        View\n                    </button>\n                    <button\n                        className={`flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}\n                        onClick={handleClaim}\n                        role=\"button\"\n                        name=\"notification-claim-button\"\n                    >\n                        {isClaimed && <Checkmark className=\"h-[24px] p-0 m-0\" />}{' '}\n                        {isClaimed ? 'Claimed' : 'Claim'}\n                    </button>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default Notification;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Notification-ac50790d.js","sources":["../../src/constants/notifications.ts","../../src/components/Notification/types.ts","../../src/components/Notification/Notification.tsx"],"sourcesContent":["export enum NotificationTypeEnum {\n    Currency = 'currency',\n    ID = 'id',\n    Achievement = 'achievement',\n    Skill = 'skill',\n    Job = 'job',\n    Learning = 'learning',\n}\n","import { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Trophy from '../svgs/Trophy';\nimport Coins from '../svgs/Coins';\nimport User from '../svgs/User';\nimport Briefcase from '../svgs/Briefcase';\nimport Lightbulb from '../svgs/Lightbulb';\nimport Graduation from '../svgs/Graduation';\n\nexport type NotificationProps = {\n    notificationType: NotificationTypeEnum;\n    title: string;\n    issuerImage?: string;\n    issueDate: string;\n    className?: string;\n    onClick: () => void;\n};\n\nexport const NotificationTypeStyles = {\n    [NotificationTypeEnum.Currency]: {\n        viewButtonStyles: 'border-cyan-600 text-cyan-600',\n        unclaimedButtonStyles: 'text-white bg-cyan-600 border-cyan-600',\n        claimedButtonStyles: 'text-cyan-600 bg-cyan-50 border-cyan-50',\n        textStyles: 'text-cyan-600 capitalize',\n        iconCircleStyles: 'bg-cyan-600',\n        IconComponent: Coins,\n    },\n    [NotificationTypeEnum.ID]: {\n        viewButtonStyles: 'border-yellow-400 text-yellow-400',\n        unclaimedButtonStyles: 'text-white bg-yellow-400 border-yellow-400',\n        claimedButtonStyles: 'text-yellow-400 bg-yellow-50 border-yellow-50',\n        textStyles: 'text-yellow-400 uppercase',\n        iconCircleStyles: 'bg-yellow-400',\n        IconComponent: User,\n    },\n    [NotificationTypeEnum.Achievement]: {\n        viewButtonStyles: 'border-spice-400 text-spice-400',\n        unclaimedButtonStyles: 'text-white bg-spice-400 border-spice-400',\n        claimedButtonStyles: 'text-spice-400 bg-spice-50 border-spice-50',\n        textStyles: 'text-spice-400 capitalize',\n        iconCircleStyles: 'bg-spice-400',\n        IconComponent: Trophy,\n    },\n    [NotificationTypeEnum.Skill]: {\n        viewButtonStyles: 'border-indigo-400 text-indigo-400',\n        unclaimedButtonStyles: 'text-white bg-indigo-400 border-indigo-400',\n        claimedButtonStyles: 'text-indigo-400 bg-indigo-50 border-indigo-50',\n        textStyles: 'text-indigo-400 capitalize',\n        iconCircleStyles: 'bg-indigo-400',\n        IconComponent: Lightbulb,\n    },\n    [NotificationTypeEnum.Job]: {\n        viewButtonStyles: 'border-emerald-400 text-emerald-400',\n        unclaimedButtonStyles: 'text-white bg-emerald-400 border-emerald-400',\n        claimedButtonStyles: 'text-emerald-400 bg-emerald-50 border-emerald-50',\n        textStyles: 'text-emerald-400 capitalize',\n        iconCircleStyles: 'bg-emerald-400',\n        IconComponent: Briefcase,\n    },\n    [NotificationTypeEnum.Learning]: {\n        viewButtonStyles: 'border-rose-400 text-rose-400',\n        unclaimedButtonStyles: 'text-white bg-rose-400 border-rose-400',\n        claimedButtonStyles: 'text-rose-400 bg-rose-50 border-rose-50',\n        textStyles: 'text-rose-400 capitalize',\n        iconCircleStyles: 'bg-rose-400',\n        IconComponent: Graduation,\n    },\n};\n","import React, { useState } from 'react';\n\nimport { NotificationProps, NotificationTypeStyles } from './types';\nimport { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Checkmark from '../svgs/Checkmark';\n\nexport const Notification: React.FC<NotificationProps> = ({\n    title,\n    issuerImage,\n    issueDate,\n    className,\n    notificationType = NotificationTypeEnum.Achievement,\n    onClick = () => {},\n}) => {\n    const [isClaimed, setIsClaimed] = useState<boolean>(false);\n\n    const handleClaim = () => setIsClaimed(!isClaimed);\n\n    const {\n        IconComponent,\n        iconCircleStyles,\n        textStyles,\n        viewButtonStyles,\n        claimedButtonStyles,\n        unclaimedButtonStyles,\n    } = NotificationTypeStyles[notificationType];\n\n    const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;\n\n    return (\n        <div\n            className={`flex justify-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`}\n        >\n            <div\n                className={`absolute flex items-center justify-center top-2 right-2 h-8 w-8 overflow-hidden rounded-full z-10 ${iconCircleStyles}`}\n            >\n                <IconComponent className=\"h-4/5 text-white\" />\n            </div>\n            <div className=\"flex flex-col justify-center items-center relative w-11/12\">\n                <div className=\"flex flex-row items-center justify-start w-full\">\n                    <div className=\"h-12 w-12 max-h-12 max-w-[48px] min-h-[48px] min-w-[48px] overflow-hidden rounded-full\">\n                        <img\n                            src={issuerImage}\n                            alt=\"issuer image\"\n                            className=\"w-full h-full object-cover\"\n                        />\n                    </div>\n                    <div className=\"text-left ml-3\">\n                        <h4\n                            className=\"font-bold tracking-wide line-clamp-1 text-black\"\n                            data-testid=\"notification-title\"\n                        >\n                            {title}\n                        </h4>\n                        <p\n                            className={`font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`}\n                            data-testid=\"notification-type\"\n                        >\n                            {notificationType}{' '}\n                            <span\n                                className=\"text-grayscale-600 normal-case font-normal text-sm\"\n                                data-testid=\"notification-cred-issue-date\"\n                            >\n                                • {issueDate}\n                            </span>\n                        </p>\n                    </div>\n                </div>\n                <div className=\"flex items-center justify-between w-full mt-3\">\n                    <button\n                        onClick={onClick}\n                        className={`flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`}\n                        role=\"button\"\n                        name=\"notification-view-button\"\n                    >\n                        View\n                    </button>\n                    <button\n                        className={`flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}\n                        onClick={handleClaim}\n                        role=\"button\"\n                        name=\"notification-claim-button\"\n                    >\n                        {isClaimed && <Checkmark className=\"h-[24px] p-0 m-0\" />}{' '}\n                        {isClaimed ? 'Claimed' : 'Claim'}\n                    </button>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default Notification;\n"],"names":[],"mappings":"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"}

package/dist/esm/RoundedPill-75154146.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { T as TYPE_TO_ICON } from './icons-6138bb65.js';
+
+const TYPE_TO_BG_COLOR_CLASS = {
+  skill: "indigo-50",
+  achievement: "spice-50",
+  course: "emerald-50",
+  locked: "grayscale-100"
+};
+const TYPE_TO_FOREGROUND_COLOR = {
+  skill: "indigo-500",
+  achievement: "spice-500",
+  course: "emerald-700",
+  locked: "grayscale-700"
+};
+const TYPE_TO_CHECKMARK_COLOR = {
+  skill: "#6366F1",
+  achievement: "#FF5820",
+  course: "#00BA88",
+  locked: "#52597A"
+};
+const Checkmark = ({ color = "#00BA88", size = "20" }) => {
+  return /* @__PURE__ */ React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M16.875 5.62537L8.125 14.375L3.75 10.0004",
+    stroke: color,
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+const LockedIcon = ({ color = "#52597A", size = "20" }) => {
+  return /* @__PURE__ */ React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z",
+    fill: color
+  }));
+};
+const RoundedPill = ({
+  statusText,
+  type = "skill",
+  onClick,
+  showCheckmark = false
+}) => {
+  const backgroundColor = `bg-${TYPE_TO_BG_COLOR_CLASS[type]}`;
+  const iconBgColor = `bg-${TYPE_TO_FOREGROUND_COLOR[type]}`;
+  const circleClass = `flex w-full items-center justify-center icon-display h-[40px] w-[40px] rounded-full ${iconBgColor}  absolute flex-shrink-0 `;
+  const handleClick = () => {
+    onClick == null ? void 0 : onClick();
+  };
+  const iconSrc = TYPE_TO_ICON[type];
+  const textColor = `text-${TYPE_TO_FOREGROUND_COLOR[type]}`;
+  const checkColor = TYPE_TO_CHECKMARK_COLOR[type];
+  const locked = type === "locked";
+  const displayText = !locked ? statusText : "Locked";
+  return /* @__PURE__ */ React.createElement("button", {
+    onClick: handleClick,
+    className: `flex relative ${backgroundColor} items-center px-[5px] py-[2px]  w-[180px] h-[46px] rounded-[40px] rounded-pill-el`
+  }, !locked && /* @__PURE__ */ React.createElement("div", {
+    className: circleClass
+  }, /* @__PURE__ */ React.createElement("img", {
+    className: "h-full w-full object-cover max-h-[24px] max-w-[24px] flex-shrink-0 ",
+    src: iconSrc != null ? iconSrc : "",
+    alt: "Icon image"
+  })), /* @__PURE__ */ React.createElement("span", {
+    className: `font-semibold ${textColor} w-full flex items-center justify-center text-[14px]`
+  }, showCheckmark && !locked && /* @__PURE__ */ React.createElement("span", {
+    className: "rounded-pill-checkmark mr-[5px]"
+  }, /* @__PURE__ */ React.createElement(Checkmark, {
+    color: checkColor
+  })), locked && /* @__PURE__ */ React.createElement("span", {
+    className: "rounded-pill-checkmark mr-[5px]"
+  }, /* @__PURE__ */ React.createElement(LockedIcon, null)), displayText));
+};
+
+export { RoundedPill as R };
+//# sourceMappingURL=RoundedPill-75154146.js.map

package/dist/esm/RoundedPill-75154146.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundedPill-75154146.js","sources":["../../src/components/RoundedPill/RoundedPill.tsx"],"sourcesContent":["import React from 'react';\nimport { TYPE_TO_ICON } from '../../constants/icons';\nimport { RoundedPillProps } from '../../types';\n\nconst TYPE_TO_BG_COLOR_CLASS: any = {\n    skill: 'indigo-50',\n    achievement: 'spice-50',\n    course: 'emerald-50',\n    locked: 'grayscale-100',\n};\n\nconst TYPE_TO_FOREGROUND_COLOR: any = {\n    skill: 'indigo-500',\n    achievement: 'spice-500',\n    course: 'emerald-700',\n    locked: 'grayscale-700',\n};\n\nconst TYPE_TO_CHECKMARK_COLOR: any = {\n    skill: '#6366F1',\n    achievement: '#FF5820',\n    course: '#00BA88',\n    locked: '#52597A',\n};\n\ntype InlineSVGProps = {\n    color?: string;\n    size?: string | number;\n};\n\nconst Checkmark: React.FC<InlineSVGProps> = ({ color = '#00BA88', size = '20' }) => {\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <path\n                d=\"M16.875 5.62537L8.125 14.375L3.75 10.0004\"\n                stroke={color}\n                strokeWidth=\"3\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n};\n\nconst LockedIcon: React.FC<InlineSVGProps> = ({ color = '#52597A', size = '20' }) => {\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <path\n                d=\"M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z\"\n                stroke={color}\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875\"\n                stroke={color}\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z\"\n                fill={color}\n            />\n        </svg>\n    );\n};\n\nexport const RoundedPill: React.FC<RoundedPillProps> = ({\n    statusText,\n    type = 'skill',\n    onClick,\n    showCheckmark = false,\n}) => {\n    const backgroundColor = `bg-${TYPE_TO_BG_COLOR_CLASS[type]}`;\n    const iconBgColor = `bg-${TYPE_TO_FOREGROUND_COLOR[type]}`;\n    const circleClass = `flex w-full items-center justify-center icon-display h-[40px] w-[40px] rounded-full ${iconBgColor}  absolute flex-shrink-0 `;\n\n    const handleClick = () => {\n        onClick?.();\n    };\n\n    const iconSrc = TYPE_TO_ICON[type];\n    const textColor = `text-${TYPE_TO_FOREGROUND_COLOR[type]}`;\n    const checkColor = TYPE_TO_CHECKMARK_COLOR[type];\n    const locked = type === 'locked';\n\n    const displayText = !locked ? statusText : 'Locked';\n\n    return (\n        <button\n            onClick={handleClick}\n            className={`flex relative ${backgroundColor} items-center px-[5px] py-[2px]  w-[180px] h-[46px] rounded-[40px] rounded-pill-el`}\n        >\n            {!locked && (\n                <div className={circleClass}>\n                    <img\n                        className=\"h-full w-full object-cover max-h-[24px] max-w-[24px] flex-shrink-0 \"\n                        src={iconSrc ?? ''}\n                        alt=\"Icon image\"\n                    />\n                </div>\n            )}\n            <span\n                className={`font-semibold ${textColor} w-full flex items-center justify-center text-[14px]`}\n            >\n                {showCheckmark && !locked && (\n                    <span className=\"rounded-pill-checkmark mr-[5px]\">\n                        <Checkmark color={checkColor} />\n                    </span>\n                )}\n                {locked && (\n                    <span className=\"rounded-pill-checkmark mr-[5px]\">\n                        <LockedIcon />\n                    </span>\n                )}\n\n                {displayText}\n            </span>\n        </button>\n    );\n};\n\nexport default RoundedPill;\n"],"names":[],"mappings":";;;AAEA,MAAM,sBAAsB,GAAG;AAC/B,EAAE,KAAK,EAAE,WAAW;AACpB,EAAE,WAAW,EAAE,UAAU;AACzB,EAAE,MAAM,EAAE,YAAY;AACtB,EAAE,MAAM,EAAE,eAAe;AACzB,CAAC,CAAC;AACF,MAAM,wBAAwB,GAAG;AACjC,EAAE,KAAK,EAAE,YAAY;AACrB,EAAE,WAAW,EAAE,WAAW;AAC1B,EAAE,MAAM,EAAE,aAAa;AACvB,EAAE,MAAM,EAAE,eAAe;AACzB,CAAC,CAAC;AACF,MAAM,uBAAuB,GAAG;AAChC,EAAE,KAAK,EAAE,SAAS;AAClB,EAAE,WAAW,EAAE,SAAS;AACxB,EAAE,MAAM,EAAE,SAAS;AACnB,EAAE,MAAM,EAAE,SAAS;AACnB,CAAC,CAAC;AACF,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK;AAC1D,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,KAAK,EAAE,IAAI;AACf,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,OAAO,EAAE,WAAW;AACxB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,KAAK,EAAE,4BAA4B;AACvC,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACjD,IAAI,CAAC,EAAE,2CAA2C;AAClD,IAAI,MAAM,EAAE,KAAK;AACjB,IAAI,WAAW,EAAE,GAAG;AACpB,IAAI,aAAa,EAAE,OAAO;AAC1B,IAAI,cAAc,EAAE,OAAO;AAC3B,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK;AAC3D,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,KAAK,EAAE,IAAI;AACf,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,OAAO,EAAE,WAAW;AACxB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,KAAK,EAAE,4BAA4B;AACvC,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACjD,IAAI,CAAC,EAAE,uMAAuM;AAC9M,IAAI,MAAM,EAAE,KAAK;AACjB,IAAI,WAAW,EAAE,GAAG;AACpB,IAAI,aAAa,EAAE,OAAO;AAC1B,IAAI,cAAc,EAAE,OAAO;AAC3B,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAClD,IAAI,CAAC,EAAE,4MAA4M;AACnN,IAAI,MAAM,EAAE,KAAK;AACjB,IAAI,WAAW,EAAE,GAAG;AACpB,IAAI,aAAa,EAAE,OAAO;AAC1B,IAAI,cAAc,EAAE,OAAO;AAC3B,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAClD,IAAI,CAAC,EAAE,4KAA4K;AACnL,IAAI,IAAI,EAAE,KAAK;AACf,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,CAAC;AACU,MAAC,WAAW,GAAG,CAAC;AAC5B,EAAE,UAAU;AACZ,EAAE,IAAI,GAAG,OAAO;AAChB,EAAE,OAAO;AACT,EAAE,aAAa,GAAG,KAAK;AACvB,CAAC,KAAK;AACN,EAAE,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC/D,EAAE,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC7D,EAAE,MAAM,WAAW,GAAG,CAAC,oFAAoF,EAAE,WAAW,CAAC,yBAAyB,CAAC,CAAC;AACpJ,EAAE,MAAM,WAAW,GAAG,MAAM;AAC5B,IAAI,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,EAAE,CAAC;AACzC,GAAG,CAAC;AACJ,EAAE,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;AACrC,EAAE,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC7D,EAAE,MAAM,UAAU,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC;AACnD,EAAE,MAAM,MAAM,GAAG,IAAI,KAAK,QAAQ,CAAC;AACnC,EAAE,MAAM,WAAW,GAAG,CAAC,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AACtD,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE;AACvD,IAAI,OAAO,EAAE,WAAW;AACxB,IAAI,SAAS,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,kFAAkF,CAAC;AACnI,GAAG,EAAE,CAAC,MAAM,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC3D,IAAI,SAAS,EAAE,WAAW;AAC1B,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,qEAAqE;AACpF,IAAI,GAAG,EAAE,OAAO,IAAI,IAAI,GAAG,OAAO,GAAG,EAAE;AACvC,IAAI,GAAG,EAAE,YAAY;AACrB,GAAG,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACnD,IAAI,SAAS,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,oDAAoD,CAAC;AAC/F,GAAG,EAAE,aAAa,IAAI,CAAC,MAAM,oBAAoB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC7E,IAAI,SAAS,EAAE,iCAAiC;AAChD,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,KAAK,EAAE,UAAU;AACrB,GAAG,CAAC,CAAC,EAAE,MAAM,oBAAoB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC7D,IAAI,SAAS,EAAE,iCAAiC;AAChD,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;AAC3E;;;;"}