@learncard/react 2.8.62 → 2.9.2

package/dist/esm/CourseCard-990fdc99.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import CourseCardPlaceholder from './lhplaceholder.png';
+import trophylight from './minitrophy.svg';
+import MiniJobIcon from './minijob.svg';
+import puzzlelight from './minipuzzle.svg';
+
+const TYPE_TO_COURSE_MINI_ICON = {
+  ["job"]: MiniJobIcon,
+  ["achievement"]: trophylight,
+  ["skill"]: puzzlelight
+};
+const TYPE_TO_COLOR = {
+  ["job"]: "bg-emerald-700",
+  ["achievement"]: "bg-spice-500",
+  ["skill"]: "bg-indigo-500"
+};
+const CourseCardStatBubble = ({
+  count = 0,
+  type = "job",
+  className
+}) => {
+  const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];
+  const bgColor = TYPE_TO_COLOR[type];
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[80px] h-[30px] items-center ${className}`
+    },
+    /* @__PURE__ */ React.createElement("img", { src: imgSrc, className: "pr-[5px]" }),
+    /* @__PURE__ */ React.createElement("span", { className: "flex items-center text-sm text-white" }, count)
+  );
+};
+const CourseCard = ({
+  status = "Enrolled",
+  title = "MECH 1340 Digital Fundamentals and Programmable Logic Controllers",
+  semester = "Fall 2022",
+  jobCount = 1,
+  achievementCount = 4,
+  thumbSrc,
+  hideHeader = false,
+  skillCount = 9,
+  className,
+  onClick = () => {
+  }
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick,
+      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}`
+    },
+    /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: CourseCardPlaceholder,
+        className: "course-card-img w-[100px] h-[111px] mr-[10px]"
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: "course-card-detail-info flex flex-col justify-between" }, !hideHeader && /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, /* @__PURE__ */ React.createElement("span", { className: "text-emerald-700 font-semibold" }, status), /* @__PURE__ */ React.createElement("span", { className: "spacer-dot mx-[3px]" }, "\u2022"), /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-500" }, semester)), /* @__PURE__ */ React.createElement("p", { className: "course-card-title text-sm font-semibold line-clamp-2" }, title), /* @__PURE__ */ React.createElement("div", { className: "course-card-counts-container flex items-center mt-[5px]" }, /* @__PURE__ */ React.createElement(CourseCardStatBubble, { type: "job", count: jobCount, className: "mr-[5px]" }), /* @__PURE__ */ React.createElement(
+      CourseCardStatBubble,
+      {
+        type: "achievement",
+        count: achievementCount,
+        className: "mr-[5px]"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      CourseCardStatBubble,
+      {
+        type: "skill",
+        count: skillCount,
+        className: "mr-[0px]"
+      }
+    )))
+  );
+};
+
+export { CourseCard as C };
+//# sourceMappingURL=CourseCard-990fdc99.js.map

package/dist/esm/{CourseCard-663ff174.js.map → CourseCard-990fdc99.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CourseCard-663ff174.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    hideHeader = false,\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                {!hideHeader && (\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                )}\n                <p className=\"course-card-title text-sm font-semibold line-clamp-2\">{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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"}
+{"version":3,"file":"CourseCard-990fdc99.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    hideHeader = false,\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                {!hideHeader && (\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                )}\n                <p className=\"course-card-title text-sm font-semibold line-clamp-2\">{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/CourseVerticalCard-aae0c030.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import CourseCardPlaceholder from './lhplaceholder.png';
+import trophylight from './minitrophy.svg';
+import MiniJobIcon from './minijob.svg';
+import puzzlelight from './minipuzzle.svg';
+import { L as LCSubtypes } from './index-28917993.js';
+import { C as CircleCheckButton } from './CircleCheckButton-23a9c7d4.js';
+import { R as RoundedPill } from './RoundedPill-50279e5d.js';
+
+const TYPE_TO_COURSE_MINI_ICON = {
+  ["job"]: MiniJobIcon,
+  ["achievement"]: trophylight,
+  ["skill"]: puzzlelight
+};
+const TYPE_TO_COLOR = {
+  ["job"]: "bg-emerald-700",
+  ["achievement"]: "bg-spice-500",
+  ["skill"]: "bg-indigo-500"
+};
+const CourseCardStatBubble = ({
+  count = 0,
+  type = LCSubtypes.job,
+  className
+}) => {
+  const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];
+  const bgColor = TYPE_TO_COLOR[type];
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[80px] h-[30px] items-center ${className}`
+    },
+    /* @__PURE__ */ React.createElement("img", { src: imgSrc, className: "pr-[5px]" }),
+    /* @__PURE__ */ React.createElement("span", { className: "flex items-center text-sm text-white" }, count)
+  );
+};
+const CourseVerticalCard = ({
+  className,
+  title,
+  thumbImgSrc,
+  showStatus,
+  claimStatus = false,
+  achievementCount = 0,
+  skillCount = 0,
+  checked,
+  showChecked,
+  showSubCount,
+  onCheckClick,
+  onClick
+}) => {
+  const claimBtnStatusType = claimStatus ? LCSubtypes.course : LCSubtypes.locked;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick,
+      className: `flex flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[265px] rounded-[20px] ${className}`
+    },
+    /* @__PURE__ */ React.createElement(
+      "section",
+      {
+        className: `relative flex h-[120px] flex-col justify-center items-center w-full rounded-[20px]`
+      },
+      /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          src: CourseCardPlaceholder,
+          className: "course-card-img h-full w-full object-cover rounded-[20px]"
+        }
+      ),
+      showChecked && /* @__PURE__ */ React.createElement(
+        CircleCheckButton,
+        {
+          checked,
+          onClick: onCheckClick,
+          className: "absolute top-[5px] left-[5px]"
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: "course-card-detail-info flex flex-col justify-between" }, /* @__PURE__ */ React.createElement("p", { className: "course-card-title text-sm text-center font-semibold line-clamp-2 mt-[4px]" }, title), showSubCount && /* @__PURE__ */ React.createElement("div", { className: "course-card-counts-container flex items-center justify-center my-[5px]" }, /* @__PURE__ */ React.createElement(
+      CourseCardStatBubble,
+      {
+        type: "achievement",
+        count: achievementCount,
+        className: "mr-[5px]"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      CourseCardStatBubble,
+      {
+        type: "skill",
+        count: skillCount,
+        className: "mr-[0px]"
+      }
+    ))),
+    showStatus && /* @__PURE__ */ React.createElement("div", { className: "course-card-footer absolute bottom-[6px] left-[5px]" }, /* @__PURE__ */ React.createElement(
+      RoundedPill,
+      {
+        onClick,
+        showCheckmark: true,
+        type: claimBtnStatusType,
+        statusText: "Passed"
+      }
+    ))
+  );
+};
+
+export { CourseVerticalCard as C };
+//# sourceMappingURL=CourseVerticalCard-aae0c030.js.map

package/dist/esm/{CourseVerticalCard-130b0d91.js.map → CourseVerticalCard-aae0c030.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CourseVerticalCard-130b0d91.js","sources":["../../src/components/CourseVerticalCard/CourseVerticalCard.tsx"],"sourcesContent":["import React from 'react';\nimport { CourseCardVerticalProps } from '../../types';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport CourseCardPlaceholder from '../../assets/images/lhplaceholder.png';\nimport { RoundedPill } from '../RoundedPill';\nimport MiniTrophyIcon from '../../assets/images/minitrophy.svg';\nimport MiniJobIcon from '../../assets/images/minijob.svg';\nimport MiniPuzzleIcon from '../../assets/images/minipuzzle.svg';\nimport { LCSubtypes } from '../../types';\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 = LCSubtypes.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 CourseVerticalCard: React.FC<CourseCardVerticalProps> = ({\n    className,\n    title,\n    thumbImgSrc,\n    showStatus,\n    claimStatus = false,\n    achievementCount = 0,\n    skillCount = 0,\n    checked,\n    showChecked,\n    showSubCount,\n    onCheckClick,\n    onClick,\n}) => {\n    const claimBtnStatusType = claimStatus ? LCSubtypes.course : LCSubtypes.locked;\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[265px] rounded-[20px] ${className}`}\n        >\n            <section\n                className={`relative flex h-[120px] flex-col justify-center items-center w-full rounded-[20px]`}\n            >\n                <img\n                    src={CourseCardPlaceholder}\n                    className=\"course-card-img h-full w-full object-cover rounded-[20px]\"\n                />\n\n                {showChecked && (\n                    <CircleCheckButton\n                        checked={checked}\n                        onClick={onCheckClick}\n                        className=\"absolute top-[5px] left-[5px]\"\n                    />\n                )}\n            </section>\n\n            <div className=\"course-card-detail-info flex flex-col justify-between\">\n                <p className=\"course-card-title text-sm text-center font-semibold line-clamp-2 mt-[4px]\">\n                    {title}\n                </p>\n                {showSubCount && (\n                    <div className=\"course-card-counts-container flex items-center justify-center my-[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                )}\n            </div>\n            {showStatus && (\n                <div className=\"course-card-footer absolute bottom-[6px] left-[5px]\">\n                    <RoundedPill\n                        onClick={onClick}\n                        showCheckmark\n                        type={claimBtnStatusType}\n                        statusText={'Passed'}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default CourseVerticalCard;\n"],"names":["MiniTrophyIcon","MiniPuzzleIcon"],"mappings":"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"}
+{"version":3,"file":"CourseVerticalCard-aae0c030.js","sources":["../../src/components/CourseVerticalCard/CourseVerticalCard.tsx"],"sourcesContent":["import React from 'react';\nimport { CourseCardVerticalProps } from '../../types';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport CourseCardPlaceholder from '../../assets/images/lhplaceholder.png';\nimport { RoundedPill } from '../RoundedPill';\nimport MiniTrophyIcon from '../../assets/images/minitrophy.svg';\nimport MiniJobIcon from '../../assets/images/minijob.svg';\nimport MiniPuzzleIcon from '../../assets/images/minipuzzle.svg';\nimport { LCSubtypes } from '../../types';\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 = LCSubtypes.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 CourseVerticalCard: React.FC<CourseCardVerticalProps> = ({\n    className,\n    title,\n    thumbImgSrc,\n    showStatus,\n    claimStatus = false,\n    achievementCount = 0,\n    skillCount = 0,\n    checked,\n    showChecked,\n    showSubCount,\n    onCheckClick,\n    onClick,\n}) => {\n    const claimBtnStatusType = claimStatus ? LCSubtypes.course : LCSubtypes.locked;\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[265px] rounded-[20px] ${className}`}\n        >\n            <section\n                className={`relative flex h-[120px] flex-col justify-center items-center w-full rounded-[20px]`}\n            >\n                <img\n                    src={CourseCardPlaceholder}\n                    className=\"course-card-img h-full w-full object-cover rounded-[20px]\"\n                />\n\n                {showChecked && (\n                    <CircleCheckButton\n                        checked={checked}\n                        onClick={onCheckClick}\n                        className=\"absolute top-[5px] left-[5px]\"\n                    />\n                )}\n            </section>\n\n            <div className=\"course-card-detail-info flex flex-col justify-between\">\n                <p className=\"course-card-title text-sm text-center font-semibold line-clamp-2 mt-[4px]\">\n                    {title}\n                </p>\n                {showSubCount && (\n                    <div className=\"course-card-counts-container flex items-center justify-center my-[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                )}\n            </div>\n            {showStatus && (\n                <div className=\"course-card-footer absolute bottom-[6px] left-[5px]\">\n                    <RoundedPill\n                        onClick={onClick}\n                        showCheckmark\n                        type={claimBtnStatusType}\n                        statusText={'Passed'}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default CourseVerticalCard;\n"],"names":["MiniTrophyIcon","MiniPuzzleIcon"],"mappings":";;;;;;;;;AAUA,MAAM,wBAAgC,GAAA;AAAA,EAClC,CAAC,KAAK,GAAG,WAAA;AAAA,EACT,CAAC,aAAa,GAAGA,WAAA;AAAA,EACjB,CAAC,OAAO,GAAGC,WAAA;AACf,CAAA,CAAA;AAEA,MAAM,aAAqB,GAAA;AAAA,EACvB,CAAC,KAAK,GAAG,gBAAA;AAAA,EACT,CAAC,aAAa,GAAG,cAAA;AAAA,EACjB,CAAC,OAAO,GAAG,eAAA;AACf,CAAA,CAAA;AAQA,MAAM,uBAA4D,CAAC;AAAA,EAC/D,KAAQ,GAAA,CAAA;AAAA,EACR,OAAO,UAAW,CAAA,GAAA;AAAA,EAClB,SAAA;AACJ,CAAM,KAAA;AACF,EAAM,MAAA,MAAA,GAAS,yBAAyB,IAAI,CAAA,CAAA;AAC5C,EAAM,MAAA,OAAA,GAAU,cAAc,IAAI,CAAA,CAAA;AAElC,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,SAAW,EAAA,CAAA,sDAAA,EAAyD,OAAO,CAAA,iDAAA,EAAoD,SAAS,CAAA,CAAA;AAAA,KAAA;AAAA,oBAEvI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,MAAA,EAAQ,WAAU,UAAW,EAAA,CAAA;AAAA,oBACtC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,sCAAA,EAAA,EAAwC,KAAM,CAAA;AAAA,GAClE,CAAA;AAER,CAAA,CAAA;AAEO,MAAM,qBAAwD,CAAC;AAAA,EAClE,SAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd,gBAAmB,GAAA,CAAA;AAAA,EACnB,UAAa,GAAA,CAAA;AAAA,EACb,OAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AACJ,CAAM,KAAA;AACF,EAAA,MAAM,kBAAqB,GAAA,WAAA,GAAc,UAAW,CAAA,MAAA,GAAS,UAAW,CAAA,MAAA,CAAA;AAExE,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,OAAA;AAAA,MACA,SAAA,EAAW,sHAAsH,SAAS,CAAA,CAAA;AAAA,KAAA;AAAA,oBAE1I,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACG,SAAW,EAAA,CAAA,kFAAA,CAAA;AAAA,OAAA;AAAA,sBAEX,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACG,GAAK,EAAA,qBAAA;AAAA,UACL,SAAU,EAAA,2DAAA;AAAA,SAAA;AAAA,OACd;AAAA,MAEC,WACG,oBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACG,OAAA;AAAA,UACA,OAAS,EAAA,YAAA;AAAA,UACT,SAAU,EAAA,+BAAA;AAAA,SAAA;AAAA,OACd;AAAA,KAER;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,uDAAA,EAAA,sCACV,GAAE,EAAA,EAAA,SAAA,EAAU,2EACR,EAAA,EAAA,KACL,CACC,EAAA,YAAA,oBACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAU,wEACX,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACG,IAAM,EAAA,aAAA;AAAA,QACN,KAAO,EAAA,gBAAA;AAAA,QACP,SAAW,EAAA,UAAA;AAAA,OAAA;AAAA,KAEf,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACG,IAAM,EAAA,OAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,QACP,SAAW,EAAA,UAAA;AAAA,OAAA;AAAA,KAEnB,CAER,CAAA;AAAA,IACC,UACG,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qDACX,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACG,OAAA;AAAA,QACA,aAAa,EAAA,IAAA;AAAA,QACb,IAAM,EAAA,kBAAA;AAAA,QACN,UAAY,EAAA,QAAA;AAAA,OAAA;AAAA,KAEpB,CAAA;AAAA,GAER,CAAA;AAER;;;;"}

package/dist/esm/FlippyCard-458dc9b1.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const FlippyCard = ({ children, flipState = "front" }) => {
+  if ((children == null ? void 0 : children.length) > 3) {
+    console.warn("More than two children passed into Flippy Card! \u{1F633}\u{1F633}\u{1F633} Picking first two...");
+  }
+  if (!children) return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  const frontCard = children == null ? void 0 : children[0];
+  const backCard = (children == null ? void 0 : children[1]) || (children == null ? void 0 : children[0]);
+  const flipCardCSSClass = flipState === "front" ? "flippy-card" : "flippy-card is-flipped";
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "flippy-card-wrapper", className: "flippy-wrapper-container" }, /* @__PURE__ */ React.createElement("div", { "data-testid": "flippy-card", className: flipCardCSSClass }, /* @__PURE__ */ React.createElement("section", { "data-testid": "flippy-card-front", className: "card-face card-face--front" }, frontCard), /* @__PURE__ */ React.createElement("section", { "data-testid": "flippy-card-back", className: "card-face card-face--back" }, backCard)));
+};
+
+export { FlippyCard as F };
+//# sourceMappingURL=FlippyCard-458dc9b1.js.map

package/dist/esm/{FlippyCard-a2de5cf1.js.map → FlippyCard-458dc9b1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FlippyCard-a2de5cf1.js","sources":["../../src/components/FlippyCard/FlippyCard.tsx"],"sourcesContent":["import React from 'react';\n\nexport type FlippyCardProps = {\n    children: React.ReactChild[];\n    flipState?: 'front' | 'back' | string;\n};\n\nexport const FlippyCard: React.FC<FlippyCardProps> = ({ children, flipState = 'front' }) => {\n    if (children?.length > 3) {\n        console.warn('More than two children passed into Flippy Card! 😳😳😳 Picking first two...');\n    }\n\n    if (!children) return <></>;\n\n    const frontCard = children?.[0] as React.ReactNode;\n    const backCard = (children?.[1] as React.ReactNode) || (children?.[0] as React.ReactNode);\n\n    const flipCardCSSClass = flipState === 'front' ? 'flippy-card' : 'flippy-card is-flipped';\n\n    return (\n        <div data-testid=\"flippy-card-wrapper\" className=\"flippy-wrapper-container\">\n            <div data-testid=\"flippy-card\" className={flipCardCSSClass}>\n                <section data-testid=\"flippy-card-front\" className=\"card-face card-face--front\">\n                    {frontCard}\n                </section>\n                <section data-testid=\"flippy-card-back\" className=\"card-face card-face--back\">\n                    {backCard}\n                </section>\n            </div>\n        </div>\n    );\n};\n\nexport default FlippyCard;\n"],"names":[],"mappings":";;AAOO,MAAM,aAAwC,CAAC,EAAE,QAAU,EAAA,SAAA,GAAY,SAAc,KAAA;AACxF,EAAI,IAAA,CAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,UAAS,CAAG,EAAA;AACtB,IAAA,OAAA,CAAQ,KAAK,kGAA6E,CAAA,CAAA;AAAA,GAC9F;AAEA,EAAA,IAAI,CAAC,QAAA;AAAU,IAAA,uBAAS,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAExB,EAAA,MAAM,YAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAA,CAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,MAA2B,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEnE,EAAM,MAAA,gBAAA,GAAmB,SAAc,KAAA,OAAA,GAAU,aAAgB,GAAA,wBAAA,CAAA;AAEjE,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,qBAAA;AAAA,IAAsB,SAAU,EAAA,0BAAA;AAAA,GAAA,kBAC5C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,aAAA;AAAA,IAAc,SAAW,EAAA,gBAAA;AAAA,GAAA,kBACrC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,aAAY,EAAA,mBAAA;AAAA,IAAoB,SAAU,EAAA,4BAAA;AAAA,GAC9C,EAAA,SACL,mBACC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,aAAY,EAAA,kBAAA;AAAA,IAAmB,SAAU,EAAA,2BAAA;AAAA,GAC7C,EAAA,QACL,CACJ,CACJ,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"FlippyCard-458dc9b1.js","sources":["../../src/components/FlippyCard/FlippyCard.tsx"],"sourcesContent":["import React from 'react';\n\nexport type FlippyCardProps = {\n    children: React.ReactChild[];\n    flipState?: 'front' | 'back' | string;\n};\n\nexport const FlippyCard: React.FC<FlippyCardProps> = ({ children, flipState = 'front' }) => {\n    if (children?.length > 3) {\n        console.warn('More than two children passed into Flippy Card! 😳😳😳 Picking first two...');\n    }\n\n    if (!children) return <></>;\n\n    const frontCard = children?.[0] as React.ReactNode;\n    const backCard = (children?.[1] as React.ReactNode) || (children?.[0] as React.ReactNode);\n\n    const flipCardCSSClass = flipState === 'front' ? 'flippy-card' : 'flippy-card is-flipped';\n\n    return (\n        <div data-testid=\"flippy-card-wrapper\" className=\"flippy-wrapper-container\">\n            <div data-testid=\"flippy-card\" className={flipCardCSSClass}>\n                <section data-testid=\"flippy-card-front\" className=\"card-face card-face--front\">\n                    {frontCard}\n                </section>\n                <section data-testid=\"flippy-card-back\" className=\"card-face card-face--back\">\n                    {backCard}\n                </section>\n            </div>\n        </div>\n    );\n};\n\nexport default FlippyCard;\n"],"names":[],"mappings":";;AAOO,MAAM,aAAwC,CAAC,EAAE,QAAU,EAAA,SAAA,GAAY,SAAc,KAAA;AACxF,EAAI,IAAA,CAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,UAAS,CAAG,EAAA;AACtB,IAAA,OAAA,CAAQ,KAAK,kGAA6E,CAAA,CAAA;AAAA,GAC9F;AAEA,EAAI,IAAA,CAAC,QAAU,EAAA,uBAAS,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAExB,EAAA,MAAM,YAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAA,CAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,MAA2B,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEnE,EAAM,MAAA,gBAAA,GAAmB,SAAc,KAAA,OAAA,GAAU,aAAgB,GAAA,wBAAA,CAAA;AAEjE,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,aAAY,EAAA,qBAAA,EAAsB,SAAU,EAAA,0BAAA,EAAA,kBAC5C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,aAAY,EAAA,aAAA,EAAc,SAAW,EAAA,gBAAA,EAAA,kBACrC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAQ,aAAY,EAAA,mBAAA,EAAoB,SAAU,EAAA,4BAAA,EAAA,EAC9C,SACL,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAQ,aAAY,EAAA,kBAAA,EAAmB,SAAU,EAAA,2BAAA,EAAA,EAC7C,QACL,CACJ,CACJ,CAAA,CAAA;AAER;;;;"}

package/dist/esm/GenericArrow-b2822cf6.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const GenericArrow = ({ className = "", color = "#18224E", width = "20", height = "19" }) => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width,
+      className,
+      height,
+      viewBox: "0 0 12 19",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M2.375 1.6875L10.1875 9.5L2.375 17.3125",
+        stroke: color,
+        strokeWidth: "3",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  );
+};
+
+export { GenericArrow as G };
+//# sourceMappingURL=GenericArrow-b2822cf6.js.map

package/dist/esm/{GenericArrow-0dba1707.js.map → GenericArrow-b2822cf6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GenericArrow-0dba1707.js","sources":["../../src/components/svgs/GenericArrow.tsx"],"sourcesContent":["import React from 'react';\n\nexport const GenericArrow: React.FC<{\n    className?: string;\n    color?: string;\n    width?: string;\n    height?: string;\n}> = ({ className = '', color = '#18224E', width = '20', height = '19' }) => {\n    return (\n        <svg\n            width={width}\n            className={className}\n            height={height}\n            viewBox=\"0 0 12 19\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <path\n                d=\"M2.375 1.6875L10.1875 9.5L2.375 17.3125\"\n                stroke={color}\n                strokeWidth=\"3\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n};\n\nexport default GenericArrow;\n"],"names":[],"mappings":";;AAEa,MAAA,YAAA,GAKR,CAAC,EAAE,SAAY,GAAA,EAAA,EAAI,KAAQ,GAAA,SAAA,EAAW,KAAQ,GAAA,IAAA,EAAM,MAAS,GAAA,IAAA,EAAW,KAAA;AACzE,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,KAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACR,IAAK,EAAA,MAAA;AAAA,IACL,KAAM,EAAA,4BAAA;AAAA,GAAA,kBAEL,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACG,CAAE,EAAA,yCAAA;AAAA,IACF,MAAQ,EAAA,KAAA;AAAA,IACR,WAAY,EAAA,GAAA;AAAA,IACZ,aAAc,EAAA,OAAA;AAAA,IACd,cAAe,EAAA,OAAA;AAAA,GACnB,CACJ,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"GenericArrow-b2822cf6.js","sources":["../../src/components/svgs/GenericArrow.tsx"],"sourcesContent":["import React from 'react';\n\nexport const GenericArrow: React.FC<{\n    className?: string;\n    color?: string;\n    width?: string;\n    height?: string;\n}> = ({ className = '', color = '#18224E', width = '20', height = '19' }) => {\n    return (\n        <svg\n            width={width}\n            className={className}\n            height={height}\n            viewBox=\"0 0 12 19\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <path\n                d=\"M2.375 1.6875L10.1875 9.5L2.375 17.3125\"\n                stroke={color}\n                strokeWidth=\"3\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n};\n\nexport default GenericArrow;\n"],"names":[],"mappings":";;AAEa,MAAA,YAAA,GAKR,CAAC,EAAE,SAAY,GAAA,EAAA,EAAI,KAAQ,GAAA,SAAA,EAAW,KAAQ,GAAA,IAAA,EAAM,MAAS,GAAA,IAAA,EAAW,KAAA;AACzE,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,KAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA,MAAA;AAAA,MACL,KAAM,EAAA,4BAAA;AAAA,KAAA;AAAA,oBAEN,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACG,CAAE,EAAA,yCAAA;AAAA,QACF,MAAQ,EAAA,KAAA;AAAA,QACR,WAAY,EAAA,GAAA;AAAA,QACZ,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACnB;AAAA,GACJ,CAAA;AAER;;;;"}

package/dist/esm/GenericCard-24648e62.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { W as WalletCategoryTypes } from './index-28917993.js';
+import { b as TYPE_TO_WALLET_DARK_COLOR, a as TYPE_TO_IMG_SRC } from './index-cbe3a76a.js';
+import { C as CircleCheckButton } from './CircleCheckButton-23a9c7d4.js';
+
+const GenericCard = ({
+  title = "Title Lorem Ipsum",
+  thumbImgSrc,
+  customThumbClass = "",
+  customHeaderClass = "",
+  type = WalletCategoryTypes.achievements,
+  className,
+  onClick = () => {
+  },
+  showChecked,
+  checkStatus,
+  flipped
+}) => {
+  const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type] ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` : "bg-grayscale-50";
+  const defaultThumbClass = `flex h-[110px] m-auto ${thumbClass} w-[140px] overflow-hidden flex-col justify-center items-center w-full rounded-[20px] ${customThumbClass}`;
+  const imgSrc = (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" ? thumbImgSrc : TYPE_TO_IMG_SRC[type];
+  const headerBgColor = TYPE_TO_WALLET_DARK_COLOR[type] ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` : "bg-grayscale-900";
+  const checkBtnClass = checkStatus ? "generic-vc-card checked" : "generic-vc-card unchecked";
+  const defaultHeaderClass = `flex generic-card-title w-full flex justify-center items-center  h-[76px] ${headerBgColor} ${customHeaderClass}`;
+  const flippedClass = flipped ? "flex-col-reverse" : "flex-col";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick,
+      className: `flex generic-display-card-simple bg-white ${flippedClass} shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`
+    },
+    /* @__PURE__ */ React.createElement("section", { className: defaultHeaderClass }, /* @__PURE__ */ React.createElement("p", { className: "relative z-[100] text-[14px] px-[10px] py-[0px] font-bold mt-[10px] text-center text-white line-clamp-2" }, title)),
+    /* @__PURE__ */ React.createElement("section", { className: defaultThumbClass }, thumbImgSrc && (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" && /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        className: "generic-display-card-img h-full w-full  w-[140px] h-[119px] rounded-[20px] object-cover overflow-hidden",
+        src: thumbImgSrc != null ? thumbImgSrc : "",
+        alt: "Credential Achievement Image"
+      }
+    ), (!thumbImgSrc || (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) === "") && /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        className: "max-w-[130px] w-full h-full p-[10px] object-contain",
+        src: imgSrc
+      }
+    )),
+    /* @__PURE__ */ React.createElement("section", { className: "generic-card-footer" }),
+    showChecked && /* @__PURE__ */ React.createElement("div", { className: "check-btn-overlay absolute top-[5px] left-[5px]" }, /* @__PURE__ */ React.createElement(
+      CircleCheckButton,
+      {
+        checked: checkStatus,
+        onClick,
+        className: checkBtnClass
+      }
+    ))
+  );
+};
+
+export { GenericCard as G };
+//# sourceMappingURL=GenericCard-24648e62.js.map

package/dist/esm/{GenericCard-4bb4220a.js.map → GenericCard-24648e62.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GenericCard-4bb4220a.js","sources":["../../src/components/GenericCard/GenericCard.tsx"],"sourcesContent":["import React from 'react';\nimport { GenericCardProps, WalletCategoryTypes } from '../../types';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';\nimport { CircleCheckButton } from '../CircleCheckButton';\n\nexport const GenericCard: React.FC<GenericCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onClick = () => { },\n    showChecked,\n    checkStatus,\n    flipped,\n}) => {\n    const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type]\n        ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`\n        : 'bg-grayscale-50';\n    const defaultThumbClass = `flex h-[110px] m-auto ${thumbClass} w-[140px] overflow-hidden flex-col justify-center items-center w-full rounded-[20px] ${customThumbClass}`;\n    const imgSrc = thumbImgSrc?.trim() !== '' ? thumbImgSrc : TYPE_TO_IMG_SRC[type];\n    const headerBgColor = TYPE_TO_WALLET_DARK_COLOR[type]\n        ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`\n        : 'bg-grayscale-900';\n    const checkBtnClass = checkStatus ? 'generic-vc-card checked' : 'generic-vc-card unchecked';\n    const defaultHeaderClass = `flex generic-card-title w-full flex justify-center items-center  h-[76px] ${headerBgColor} ${customHeaderClass}`;\n    const flippedClass = flipped ? 'flex-col-reverse' : 'flex-col';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex generic-display-card-simple bg-white ${flippedClass} shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            <section className={defaultHeaderClass}>\n                <p className=\"relative z-[100] text-[14px] px-[10px] py-[0px] font-bold mt-[10px] text-center text-white line-clamp-2\">\n                    {title}\n                </p>\n            </section>\n\n            <section className={defaultThumbClass}>\n                {thumbImgSrc && thumbImgSrc?.trim() !== '' && (\n                    <img\n                        className=\"generic-display-card-img h-full w-full  w-[140px] h-[119px] rounded-[20px] object-cover overflow-hidden\"\n                        src={thumbImgSrc ?? ''}\n                        alt=\"Credential Achievement Image\"\n                    />\n                )}\n                {(!thumbImgSrc || thumbImgSrc?.trim() === '') && (\n                    <img\n                        className=\"max-w-[130px] w-full h-full p-[10px] object-contain\"\n                        src={imgSrc}\n                    />\n                )}\n            </section>\n\n            <section className=\"generic-card-footer\"></section>\n            {showChecked && (\n                <div className=\"check-btn-overlay absolute top-[5px] left-[5px]\">\n                    <CircleCheckButton\n                        checked={checkStatus}\n                        onClick={onClick}\n                        className={checkBtnClass}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default GenericCard;\n"],"names":[],"mappings":";;;;;AAKO,MAAM,cAA0C,CAAC;AAAA,EACpD,KAAQ,GAAA,mBAAA;AAAA,EACR,WAAA;AAAA,EACA,gBAAmB,GAAA,EAAA;AAAA,EACnB,iBAAoB,GAAA,EAAA;AAAA,EACpB,OAAO,mBAAoB,CAAA,YAAA;AAAA,EAC3B,SAAA;AAAA,EACA,UAAU,MAAM;AAAA,GAAE;AAAA,EAClB,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AACJ,CAAM,KAAA;AACF,EAAA,MAAM,UAAa,GAAA,yBAAA,CAA0B,IACvC,CAAA,GAAA,CAAA,GAAA,EAAM,0BAA0B,IAChC,CAAA,CAAA,CAAA,GAAA,iBAAA,CAAA;AACN,EAAM,MAAA,iBAAA,GAAoB,yBAAyB,UAAmG,CAAA,sFAAA,EAAA,gBAAA,CAAA,CAAA,CAAA;AACtJ,EAAA,MAAM,MAAS,GAAA,CAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,IAAW,EAAA,MAAA,EAAA,GAAK,cAAc,eAAgB,CAAA,IAAA,CAAA,CAAA;AAC1E,EAAA,MAAM,aAAgB,GAAA,yBAAA,CAA0B,IAC1C,CAAA,GAAA,CAAA,GAAA,EAAM,0BAA0B,IAChC,CAAA,CAAA,CAAA,GAAA,kBAAA,CAAA;AACN,EAAM,MAAA,aAAA,GAAgB,cAAc,yBAA4B,GAAA,2BAAA,CAAA;AAChE,EAAM,MAAA,kBAAA,GAAqB,6EAA6E,aAAiB,CAAA,CAAA,EAAA,iBAAA,CAAA,CAAA,CAAA;AACzH,EAAM,MAAA,YAAA,GAAe,UAAU,kBAAqB,GAAA,UAAA,CAAA;AAEpD,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,OAAA;AAAA,IACA,SAAA,EAAW,6CAA6C,YAAqI,CAAA,sHAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,kBAE5L,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,SAAW,EAAA,kBAAA;AAAA,GAAA,kBACf,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,yGAAA;AAAA,GACR,EAAA,KACL,CACJ,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,SAAW,EAAA,iBAAA;AAAA,GAAA,EACf,WAAe,IAAA,CAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,IAAW,EAAA,MAAA,EAAA,oBACnC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,SAAU,EAAA,yGAAA;AAAA,IACV,KAAK,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,EAAA;AAAA,IACpB,GAAI,EAAA,8BAAA;AAAA,GACR,IAEF,CAAC,WAAA,IAAA,CAAe,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,IAAA,EAAA,MAAW,uBACrC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,SAAU,EAAA,qDAAA;AAAA,IACV,GAAK,EAAA,MAAA;AAAA,GACT,CAER,mBAEC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,SAAU,EAAA,qBAAA;AAAA,GAAsB,CAAA,EACxC,+BACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,iDAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAA,IACG,OAAS,EAAA,WAAA;AAAA,IACT,OAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,GACf,CACJ,CAER,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"GenericCard-24648e62.js","sources":["../../src/components/GenericCard/GenericCard.tsx"],"sourcesContent":["import React from 'react';\nimport { GenericCardProps, WalletCategoryTypes } from '../../types';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';\nimport { CircleCheckButton } from '../CircleCheckButton';\n\nexport const GenericCard: React.FC<GenericCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onClick = () => { },\n    showChecked,\n    checkStatus,\n    flipped,\n}) => {\n    const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type]\n        ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`\n        : 'bg-grayscale-50';\n    const defaultThumbClass = `flex h-[110px] m-auto ${thumbClass} w-[140px] overflow-hidden flex-col justify-center items-center w-full rounded-[20px] ${customThumbClass}`;\n    const imgSrc = thumbImgSrc?.trim() !== '' ? thumbImgSrc : TYPE_TO_IMG_SRC[type];\n    const headerBgColor = TYPE_TO_WALLET_DARK_COLOR[type]\n        ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`\n        : 'bg-grayscale-900';\n    const checkBtnClass = checkStatus ? 'generic-vc-card checked' : 'generic-vc-card unchecked';\n    const defaultHeaderClass = `flex generic-card-title w-full flex justify-center items-center  h-[76px] ${headerBgColor} ${customHeaderClass}`;\n    const flippedClass = flipped ? 'flex-col-reverse' : 'flex-col';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex generic-display-card-simple bg-white ${flippedClass} shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            <section className={defaultHeaderClass}>\n                <p className=\"relative z-[100] text-[14px] px-[10px] py-[0px] font-bold mt-[10px] text-center text-white line-clamp-2\">\n                    {title}\n                </p>\n            </section>\n\n            <section className={defaultThumbClass}>\n                {thumbImgSrc && thumbImgSrc?.trim() !== '' && (\n                    <img\n                        className=\"generic-display-card-img h-full w-full  w-[140px] h-[119px] rounded-[20px] object-cover overflow-hidden\"\n                        src={thumbImgSrc ?? ''}\n                        alt=\"Credential Achievement Image\"\n                    />\n                )}\n                {(!thumbImgSrc || thumbImgSrc?.trim() === '') && (\n                    <img\n                        className=\"max-w-[130px] w-full h-full p-[10px] object-contain\"\n                        src={imgSrc}\n                    />\n                )}\n            </section>\n\n            <section className=\"generic-card-footer\"></section>\n            {showChecked && (\n                <div className=\"check-btn-overlay absolute top-[5px] left-[5px]\">\n                    <CircleCheckButton\n                        checked={checkStatus}\n                        onClick={onClick}\n                        className={checkBtnClass}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default GenericCard;\n"],"names":[],"mappings":";;;;;AAKO,MAAM,cAA0C,CAAC;AAAA,EACpD,KAAQ,GAAA,mBAAA;AAAA,EACR,WAAA;AAAA,EACA,gBAAmB,GAAA,EAAA;AAAA,EACnB,iBAAoB,GAAA,EAAA;AAAA,EACpB,OAAO,mBAAoB,CAAA,YAAA;AAAA,EAC3B,SAAA;AAAA,EACA,UAAU,MAAM;AAAA,GAAE;AAAA,EAClB,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AACJ,CAAM,KAAA;AACF,EAAM,MAAA,UAAA,GAAa,0BAA0B,IAAI,CAAA,GAC3C,MAAM,yBAA0B,CAAA,IAAI,CAAC,CACrC,CAAA,GAAA,iBAAA,CAAA;AACN,EAAA,MAAM,iBAAoB,GAAA,CAAA,sBAAA,EAAyB,UAAU,CAAA,sFAAA,EAAyF,gBAAgB,CAAA,CAAA,CAAA;AACtK,EAAA,MAAM,UAAS,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,IAAA,EAAA,MAAW,EAAK,GAAA,WAAA,GAAc,gBAAgB,IAAI,CAAA,CAAA;AAC9E,EAAM,MAAA,aAAA,GAAgB,0BAA0B,IAAI,CAAA,GAC9C,MAAM,yBAA0B,CAAA,IAAI,CAAC,CACrC,CAAA,GAAA,kBAAA,CAAA;AACN,EAAM,MAAA,aAAA,GAAgB,cAAc,yBAA4B,GAAA,2BAAA,CAAA;AAChE,EAAA,MAAM,kBAAqB,GAAA,CAAA,0EAAA,EAA6E,aAAa,CAAA,CAAA,EAAI,iBAAiB,CAAA,CAAA,CAAA;AAC1I,EAAM,MAAA,YAAA,GAAe,UAAU,kBAAqB,GAAA,UAAA,CAAA;AAEpD,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,OAAA;AAAA,MACA,SAAW,EAAA,CAAA,0CAAA,EAA6C,YAAY,CAAA,sHAAA,EAAyH,SAAS,CAAA,CAAA;AAAA,KAAA;AAAA,oBAEtM,KAAA,CAAA,aAAA,CAAC,aAAQ,SAAW,EAAA,kBAAA,EAAA,sCACf,GAAE,EAAA,EAAA,SAAA,EAAU,yGACR,EAAA,EAAA,KACL,CACJ,CAAA;AAAA,wCAEC,SAAQ,EAAA,EAAA,SAAA,EAAW,qBACf,WAAe,IAAA,CAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,YAAW,EACpC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACG,SAAU,EAAA,yGAAA;AAAA,QACV,KAAK,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,EAAA;AAAA,QACpB,GAAI,EAAA,8BAAA;AAAA,OAAA;AAAA,KAGV,EAAA,CAAA,CAAC,WAAe,IAAA,CAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,YAAW,EACtC,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACG,SAAU,EAAA,qDAAA;AAAA,QACV,GAAK,EAAA,MAAA;AAAA,OAAA;AAAA,KAGjB,CAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,SAAQ,EAAA,EAAA,SAAA,EAAU,qBAAsB,EAAA,CAAA;AAAA,IACxC,WACG,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iDACX,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACG,OAAS,EAAA,WAAA;AAAA,QACT,OAAA;AAAA,QACA,SAAW,EAAA,aAAA;AAAA,OAAA;AAAA,KAEnB,CAAA;AAAA,GAER,CAAA;AAER;;;;"}