@learncard/react 2.3.32 → 2.3.34

package/dist/cjs/AchievementCard-ddf84c60.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var React = require('react');
+var constants = require('./constants-6621833f.js');
+var Trophy = require('./Trophy-9ede7f2b.js');
+var RoundedPill = require('./RoundedPill-726904e1.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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 = constants.TYPE_TO_MINI_ICON.skill;
+  const skillCountTxt = skillCount && skillCount > 1 ? "Skills" : "Skill";
+  console.log("///skilCount", skillCount);
+  const showSkillCounter = showSkills && skillCount !== 0;
+  return /* @__PURE__ */ React__default["default"].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__default["default"].createElement("section", {
+    className: `relative flex h-[130px] ${thumbClass} flex-col justify-center items-center w-full rounded-[20px]`
+  }, thumbImgSrc && /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "h-full w-full object-cover rounded-[20px]",
+    src: thumbImgSrc != null ? thumbImgSrc : "",
+    alt: "Credential Achievement Image"
+  }), (!thumbImgSrc || thumbImgSrc === "") && /* @__PURE__ */ React__default["default"].createElement(Trophy.Trophy, {
+    className: "achievement-placeholder-trophy flex p-[15px]",
+    color: "#ffffff"
+  }), showSkills && showSkillCounter && /* @__PURE__ */ React__default["default"].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__default["default"].createElement("img", {
+    src: skillIconSrc,
+    className: "flex items-center justify-center mr-[4px]"
+  }), "+", skillCount, " ", skillCountTxt)), /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "achievement-title w-full flex justify-center line-clamp-2"
+  }, /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "text-[14px] text-grayscale-900 font-bold mt-[10px] text-center"
+  }, title)), /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "achievement-card-footer absolute bottom-[10px] left-[5px]"
+  }, showStatus && /* @__PURE__ */ React__default["default"].createElement(RoundedPill.RoundedPill, {
+    onClick,
+    showCheckmark: true,
+    type: claimBtnStatusType,
+    statusText: "Claimed"
+  })));
+};
+
+exports.AchievementCard = AchievementCard;
+//# sourceMappingURL=AchievementCard-ddf84c60.js.map

package/dist/cjs/AchievementCard-ddf84c60.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AchievementCard-ddf84c60.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":["TYPE_TO_MINI_ICON","React","Trophy","RoundedPill"],"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,GAAGA,2BAAiB,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,uBAAuBC,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,CAAC,2IAA2I,CAAC;AAC5J,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,CAAC,wBAAwB,EAAE,UAAU,CAAC,2DAA2D,CAAC;AACjH,GAAG,EAAE,WAAW,oBAAoBA,yBAAK,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,qBAAqBA,yBAAK,CAAC,aAAa,CAACC,aAAM,EAAE;AAC1F,IAAI,SAAS,EAAE,8CAA8C;AAC7D,IAAI,KAAK,EAAE,SAAS;AACpB,GAAG,CAAC,EAAE,UAAU,IAAI,gBAAgB,oBAAoBD,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACnF,IAAI,SAAS,EAAE,oLAAoL;AACnM,GAAG,kBAAkBA,yBAAK,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,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC5F,IAAI,SAAS,EAAE,2DAA2D;AAC1E,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AAC9C,IAAI,SAAS,EAAE,gEAAgE;AAC/E,GAAG,EAAE,KAAK,CAAC,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7D,IAAI,SAAS,EAAE,2DAA2D;AAC1E,GAAG,EAAE,UAAU,oBAAoBA,yBAAK,CAAC,aAAa,CAACE,uBAAW,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/cjs/{CircleIcon-45ef66fd.js → CircleIcon-ad088e75.js}

@@ -1,41 +1,11 @@
 'use strict';
 
 var React = require('react');
-var coins = require('./coins.svg');
-var user = require('./user.svg');
-var trophy = require('./trophy.svg');
-var briefcase = require('./briefcase.svg');
-var graduation = require('./graduation.svg');
-var lightbulb = require('./lightbulb.svg');
+var icons = require('./icons-20dfd25b.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var coins__default = /*#__PURE__*/_interopDefaultLegacy(coins);
-var user__default = /*#__PURE__*/_interopDefaultLegacy(user);
-var trophy__default = /*#__PURE__*/_interopDefaultLegacy(trophy);
-var briefcase__default = /*#__PURE__*/_interopDefaultLegacy(briefcase);
-var graduation__default = /*#__PURE__*/_interopDefaultLegacy(graduation);
-var lightbulb__default = /*#__PURE__*/_interopDefaultLegacy(lightbulb);
-
-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__default["default"],
-  [Icons.userIcon]: user__default["default"],
-  [Icons.trophyIcon]: trophy__default["default"],
-  [Icons.briefcaseIcon]: briefcase__default["default"],
-  [Icons.graduationIcon]: graduation__default["default"],
-  [Icons.lightbulbIcon]: lightbulb__default["default"]
-};
 
 const CountCircle = ({
   size = "auto",
@@ -62,7 +32,7 @@ const CountCircle = ({
   }, count)));
 };
 const CircleIcon = ({
-  iconSrc = ICONS_TO_SOURCE[Icons.coinsIcon],
+  iconSrc = icons.ICONS_TO_SOURCE[icons.Icons.coinsIcon],
   size = "52px",
   count = "28",
   innerPadding = "6px",
@@ -93,6 +63,4 @@ const CircleIcon = ({
 
 exports.CircleIcon = CircleIcon;
 exports.CountCircle = CountCircle;
-exports.ICONS_TO_SOURCE = ICONS_TO_SOURCE;
-exports.Icons = Icons;
-//# sourceMappingURL=CircleIcon-45ef66fd.js.map
+//# sourceMappingURL=CircleIcon-ad088e75.js.map

package/dist/cjs/CircleIcon-ad088e75.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleIcon-ad088e75.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":["React","ICONS_TO_SOURCE","Icons"],"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,uBAAuBA,yBAAK,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,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,CAAC,MAAM,CAAC;AACvB,GAAG,kBAAkBA,yBAAK,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,GAAGC,qBAAe,CAACC,WAAK,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,uBAAuBF,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACxD,IAAI,OAAO;AACX,IAAI,SAAS,EAAE,CAAC,EAAE,OAAO,CAAC,iDAAiD,CAAC;AAC5E,IAAI,KAAK;AACT,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,CAAC,sBAAsB,CAAC;AACvC,GAAG,EAAE,CAAC,SAAS,oBAAoBA,yBAAK,CAAC,aAAa,CAAC,WAAW,EAAE;AACpE,IAAI,KAAK;AACT,GAAG,CAAC,kBAAkBA,yBAAK,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/cjs/{CourseCard-c3c13b2c.js → CourseCard-22b1e164.js}

@@ -2,22 +2,22 @@
 
 var React = require('react');
 var CourseCardPlaceholder = require('./lhplaceholder.png');
-var MiniTrophyIcon = require('./minitrophy.svg');
+var trophylight = require('./minitrophy.svg');
 var MiniJobIcon = require('./minijob.svg');
-var MiniPuzzleIcon = require('./minipuzzle.svg');
+var puzzlelight = require('./minipuzzle.svg');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var CourseCardPlaceholder__default = /*#__PURE__*/_interopDefaultLegacy(CourseCardPlaceholder);
-var MiniTrophyIcon__default = /*#__PURE__*/_interopDefaultLegacy(MiniTrophyIcon);
+var trophylight__default = /*#__PURE__*/_interopDefaultLegacy(trophylight);
 var MiniJobIcon__default = /*#__PURE__*/_interopDefaultLegacy(MiniJobIcon);
-var MiniPuzzleIcon__default = /*#__PURE__*/_interopDefaultLegacy(MiniPuzzleIcon);
+var puzzlelight__default = /*#__PURE__*/_interopDefaultLegacy(puzzlelight);
 
 const TYPE_TO_COURSE_MINI_ICON = {
   ["job"]: MiniJobIcon__default["default"],
-  ["achievement"]: MiniTrophyIcon__default["default"],
-  ["skill"]: MiniPuzzleIcon__default["default"]
+  ["achievement"]: trophylight__default["default"],
+  ["skill"]: puzzlelight__default["default"]
 };
 const TYPE_TO_COLOR = {
   ["job"]: "bg-emerald-700",
@@ -88,4 +88,4 @@ const CourseCard = ({
 };
 
 exports.CourseCard = CourseCard;
-//# sourceMappingURL=CourseCard-c3c13b2c.js.map
+//# sourceMappingURL=CourseCard-22b1e164.js.map

package/dist/cjs/{CourseCard-c3c13b2c.js.map → CourseCard-22b1e164.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CourseCard-c3c13b2c.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":["MiniJobIcon","MiniTrophyIcon","MiniPuzzleIcon","React","CourseCardPlaceholder"],"mappings":"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"}
+{"version":3,"file":"CourseCard-22b1e164.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":["MiniJobIcon","MiniTrophyIcon","MiniPuzzleIcon","React","CourseCardPlaceholder"],"mappings":"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"}

package/dist/cjs/JobListCard-abdcd580.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var React = require('react');
+var constants = require('./constants-6621833f.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const TYPE_TO_COLOR = {
+  job: "bg-emerald-50",
+  achievement: "bg-spice-50",
+  skill: "bg-indigo-50"
+};
+const TYPE_TO_TEXT_COLOR = {
+  job: "text-emerald-700",
+  achievement: "text-spice-500",
+  skill: "text-indigo-600"
+};
+const JobListingBubble = ({
+  count = 0,
+  type = "job",
+  className
+}) => {
+  const imgSrc = constants.TYPE_TO_MINI_ICON[type];
+  const bgColor = TYPE_TO_COLOR[type];
+  const textColor = TYPE_TO_TEXT_COLOR[type];
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[100px] h-[30px] items-center ${className}`
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: imgSrc
+  }), /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: `flex items-center text-sm ${textColor} font-bold`
+  }, count));
+};
+const JobListCard = ({
+  company,
+  className = "job-listing-card",
+  title,
+  compensation,
+  location,
+  locationRequirement,
+  timeRequirement,
+  qualificationDisplay,
+  percentQualifiedDisplay,
+  postDateDisplay,
+  imgThumb,
+  isBookmarked,
+  onBookmark,
+  onClick
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  const courseCountDisplay = `${(_b = (_a = qualificationDisplay == null ? void 0 : qualificationDisplay.courses) == null ? void 0 : _a.fulfilledCount) != null ? _b : 0}/${(_d = (_c = qualificationDisplay == null ? void 0 : qualificationDisplay.courses) == null ? void 0 : _c.totalRequiredCount) != null ? _d : 0}`;
+  const achievementsCountDisplay = `${(_f = (_e = qualificationDisplay == null ? void 0 : qualificationDisplay.achievements) == null ? void 0 : _e.fulfilledCount) != null ? _f : 0}/${(_h = (_g = qualificationDisplay == null ? void 0 : qualificationDisplay.achievements) == null ? void 0 : _g.totalRequiredCount) != null ? _h : 0}`;
+  const skillsCountDisplay = `${(_j = (_i = qualificationDisplay == null ? void 0 : qualificationDisplay.skills) == null ? void 0 : _i.fulfilledCount) != null ? _j : 0}/${(_l = (_k = qualificationDisplay == null ? void 0 : qualificationDisplay.skills) == null ? void 0 : _k.totalRequiredCount) != null ? _l : 0}`;
+  const qualifiedText = percentQualifiedDisplay ? `${percentQualifiedDisplay}% Qualified - Apply` : "Apply";
+  let topText = "";
+  if (!compensation && timeRequirement)
+    topText = timeRequirement;
+  if (!timeRequirement && compensation)
+    topText = compensation;
+  if (timeRequirement && compensation)
+    topText = `${compensation} \u2022 ${timeRequirement}`;
+  let locationText = "";
+  if (!location && locationRequirement)
+    locationText = locationRequirement;
+  if (!locationRequirement && location)
+    locationText = location;
+  if (locationRequirement && location)
+    locationText = `${locationRequirement} \u2022 ${location}`;
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    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}`
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "job-listing-top flex"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex text-grayscale-500 text-xs uppercase w-full line-clamp-1"
+  }, topText)), /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "text-grayscale-500 text-xs line-clamp-1 flex-shrink-0"
+  }, " ", postDateDisplay), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "job-listing-center flex mt-[5px]"
+  }, imgThumb && /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "object-cover w-[80px] flex-shrink-0 items-center justify-center rounded-[15px] mr-[10px]",
+    src: imgThumb
+  }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "job-listing-description flex flex-col"
+  }, /* @__PURE__ */ React__default["default"].createElement("h4", {
+    className: "text-lg font-bold line-clamp-2"
+  }, title), /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "text-sm line-clamp-1"
+  }, company), /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "text-sm line-clamp-1"
+  }, locationText))), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "job-listing-qualifications mt-[10px]"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "course-card-counts-container flex items-center"
+  }, ((_m = qualificationDisplay == null ? void 0 : qualificationDisplay.courses) == null ? void 0 : _m.fulfilledCount) && /* @__PURE__ */ React__default["default"].createElement(JobListingBubble, {
+    type: "job",
+    count: courseCountDisplay,
+    className: "mr-[5px]"
+  }), ((_n = qualificationDisplay == null ? void 0 : qualificationDisplay.achievements) == null ? void 0 : _n.fulfilledCount) && /* @__PURE__ */ React__default["default"].createElement(JobListingBubble, {
+    type: "achievement",
+    count: achievementsCountDisplay,
+    className: "mr-[5px]"
+  }), ((_o = qualificationDisplay == null ? void 0 : qualificationDisplay.skills) == null ? void 0 : _o.fulfilledCount) && /* @__PURE__ */ React__default["default"].createElement(JobListingBubble, {
+    type: "skill",
+    count: skillsCountDisplay,
+    className: "mr-[0px]"
+  }))), /* @__PURE__ */ React__default["default"].createElement("button", {
+    type: "button",
+    onClick,
+    className: "mt-[10px] bg-cyan-700 py-[15px] px-[2px] rounded-[40px] text-grayscale-50 text-[17px] font-bold"
+  }, qualifiedText));
+};
+
+exports.JobListCard = JobListCard;
+exports.JobListingBubble = JobListingBubble;
+//# sourceMappingURL=JobListCard-abdcd580.js.map

package/dist/cjs/JobListCard-abdcd580.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JobListCard-abdcd580.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":["TYPE_TO_MINI_ICON","React"],"mappings":"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"}

package/dist/cjs/{Notification-92b06ed9.js → Notification-10b40c07.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var Trophy = require('./Trophy-9ede7f2b.js');
-var Checkmark = require('./Checkmark-66ed153f.js');
+var User = require('./User-b16d5499.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,7 +25,7 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-cyan-600 bg-cyan-50 border-cyan-50",
     textStyles: "text-cyan-600 capitalize",
     iconCircleStyles: "bg-cyan-600",
-    IconComponent: Checkmark.Coins
+    IconComponent: User.Coins
   },
   [NotificationTypeEnum.ID]: {
     viewButtonStyles: "border-yellow-400 text-yellow-400",
@@ -33,7 +33,7 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-yellow-400 bg-yellow-50 border-yellow-50",
     textStyles: "text-yellow-400 uppercase",
     iconCircleStyles: "bg-yellow-400",
-    IconComponent: Checkmark.User
+    IconComponent: User.User
   },
   [NotificationTypeEnum.Achievement]: {
     viewButtonStyles: "border-spice-400 text-spice-400",
@@ -49,7 +49,7 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-indigo-400 bg-indigo-50 border-indigo-50",
     textStyles: "text-indigo-400 capitalize",
     iconCircleStyles: "bg-indigo-400",
-    IconComponent: Checkmark.Lightbulb
+    IconComponent: User.Lightbulb
   },
   [NotificationTypeEnum.Job]: {
     viewButtonStyles: "border-emerald-400 text-emerald-400",
@@ -57,7 +57,7 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-emerald-400 bg-emerald-50 border-emerald-50",
     textStyles: "text-emerald-400 capitalize",
     iconCircleStyles: "bg-emerald-400",
-    IconComponent: Checkmark.Briefcase
+    IconComponent: User.Briefcase
   },
   [NotificationTypeEnum.Learning]: {
     viewButtonStyles: "border-rose-400 text-rose-400",
@@ -65,7 +65,7 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-rose-400 bg-rose-50 border-rose-50",
     textStyles: "text-rose-400 capitalize",
     iconCircleStyles: "bg-rose-400",
-    IconComponent: Checkmark.Graduation
+    IconComponent: User.Graduation
   }
 };
 
@@ -128,11 +128,11 @@ const Notification = ({
     onClick: handleClaim,
     role: "button",
     name: "notification-claim-button"
-  }, isClaimed && /* @__PURE__ */ React__default["default"].createElement(Checkmark.Checkmark, {
+  }, isClaimed && /* @__PURE__ */ React__default["default"].createElement(User.Checkmark, {
     className: "h-[24px] p-0 m-0"
   }), " ", isClaimed ? "Claimed" : "Claim"))));
 };
 
 exports.Notification = Notification;
 exports.NotificationTypeStyles = NotificationTypeStyles;
-//# sourceMappingURL=Notification-92b06ed9.js.map
+//# sourceMappingURL=Notification-10b40c07.js.map

package/dist/cjs/{Notification-92b06ed9.js.map → Notification-10b40c07.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Notification-92b06ed9.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":["Coins","User","Trophy","Lightbulb","Briefcase","Graduation","useState","React","Checkmark"],"mappings":"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"}
+{"version":3,"file":"Notification-10b40c07.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":["Coins","User","Trophy","Lightbulb","Briefcase","Graduation","useState","React","Checkmark"],"mappings":"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"}

package/dist/cjs/RoundedPill-726904e1.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var React = require('react');
+var icons = require('./icons-20dfd25b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].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__default["default"].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 = icons.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__default["default"].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__default["default"].createElement("div", {
+    className: circleClass
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement("span", {
+    className: `font-semibold ${textColor} w-full flex items-center justify-center text-[14px]`
+  }, showCheckmark && !locked && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "rounded-pill-checkmark mr-[5px]"
+  }, /* @__PURE__ */ React__default["default"].createElement(Checkmark, {
+    color: checkColor
+  })), locked && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "rounded-pill-checkmark mr-[5px]"
+  }, /* @__PURE__ */ React__default["default"].createElement(LockedIcon, null)), displayText));
+};
+
+exports.RoundedPill = RoundedPill;
+//# sourceMappingURL=RoundedPill-726904e1.js.map

package/dist/cjs/RoundedPill-726904e1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundedPill-726904e1.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":["React","TYPE_TO_ICON"],"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,uBAAuBA,yBAAK,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,kBAAkBA,yBAAK,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,uBAAuBA,yBAAK,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,kBAAkBA,yBAAK,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,kBAAkBA,yBAAK,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,kBAAkBA,yBAAK,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,GAAGC,kBAAY,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,uBAAuBD,yBAAK,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,oBAAoBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC3D,IAAI,SAAS,EAAE,WAAW;AAC1B,GAAG,kBAAkBA,yBAAK,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,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACnD,IAAI,SAAS,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,oDAAoD,CAAC;AAC/F,GAAG,EAAE,aAAa,IAAI,CAAC,MAAM,oBAAoBA,yBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC7E,IAAI,SAAS,EAAE,iCAAiC;AAChD,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,KAAK,EAAE,UAAU;AACrB,GAAG,CAAC,CAAC,EAAE,MAAM,oBAAoBA,yBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC7D,IAAI,SAAS,EAAE,iCAAiC;AAChD,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;AAC3E;;;;"}