@learncard/react 2.6.55 → 2.6.56

package/dist/esm/VCDisplayCard2-0b6776f9.js

@@ -0,0 +1,2691 @@
+import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
+import { h, y } from './index.es-ed959f7e.js';
+import { a as VCVerificationCheckWithSpinner } from './VCVerificationCheck-80249524.js';
+import DefaultFace from './default-face.jpeg';
+import { g as getColorForVerificationStatus, h as format, e as getNameFromProfile, f as getImageFromProfile, i as getCategoryColor, j as getTotalCountOfSkills, a as getInfoFromCredential } from './credential.helpers-aae8d75f.js';
+import { g as getBaseUrl, V as VideoIcon, a as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, c as capitalize, X, E as ExclamationPoint, A as AcuteCheckmark, I as InfoIcon, t as truncateWithEllipsis, C as CertificateDisplayCard } from './CertificateDisplayCard-21dadcd3.js';
+import { L as Lightbox } from './Lightbox-a1aab9ea.js';
+import Athletics from './athletics.svg';
+import Business from './business.svg';
+import Creative from './creative.svg';
+import Digital from './digital.svg';
+import Durable from './durable.svg';
+import Medical from './medical.svg';
+import Social from './social.svg';
+import Stem from './stem.svg';
+import Trade from './trade.svg';
+import { P as PuzzlePiece } from './types-c31e4bae.js';
+import { a as VerificationStatusEnum } from './VCVerificationPill-1a8e55d1.js';
+import { A as AwardRibbon } from './AwardRibbon-3e682281.js';
+import { a as LCCategoryEnum } from './index-146dd88a.js';
+import 'react-dom';
+
+const LeftArrow = ({ className = "", size = "20" }) => {
+  return /* @__PURE__ */ React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M8.93299 17.942L1.43299 10.442C1.31582 10.3247 1.25 10.1657 1.25 9.99999C1.25 9.83423 1.31582 9.67526 1.43299 9.55802L8.93299 2.05802C9.02041 1.97062 9.13178 1.91111 9.25301 1.887C9.37425 1.8629 9.49991 1.87528 9.61412 1.92258C9.72832 1.96989 9.82593 2.04999 9.89461 2.15277C9.96329 2.25554 9.99995 2.37638 9.99996 2.49999V5.62499H16.25C16.5814 5.62537 16.8991 5.75718 17.1334 5.99152C17.3678 6.22586 17.4996 6.54358 17.5 6.87499V13.125C17.4996 13.4564 17.3678 13.7741 17.1334 14.0085C16.8991 14.2428 16.5814 14.3746 16.25 14.375H9.99996V17.5C9.99995 17.6236 9.96329 17.7444 9.89461 17.8472C9.82593 17.95 9.72832 18.0301 9.61412 18.0774C9.49991 18.1247 9.37425 18.1371 9.25301 18.113C9.13178 18.0889 9.02041 18.0294 8.93299 17.942Z",
+    fill: "currentColor"
+  }));
+};
+
+const RoundedX = ({ className = "" }) => {
+  return /* @__PURE__ */ React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M18.75 5.25L5.25 18.75",
+    stroke: "#18224E",
+    strokeWidth: "4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M18.75 18.75L5.25 5.25",
+    stroke: "#18224E",
+    strokeWidth: "4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+const FitText = ({
+  text,
+  width,
+  className = "",
+  minFontSize = 10,
+  maxFontSize = 100
+}) => {
+  const textRef = useRef(null);
+  let animationFrameId = null;
+  const adjustFontSize = () => {
+    var _a;
+    if (textRef.current) {
+      const currentFontSize = parseFloat(window.getComputedStyle(textRef.current).getPropertyValue("font-size"));
+      textRef.current.style.whiteSpace = "nowrap";
+      const parentWidth = (_a = textRef.current.parentNode) == null ? void 0 : _a.clientWidth;
+      const scrollWidth = textRef.current.scrollWidth || textRef.current.offsetWidth;
+      if (scrollWidth === 0) {
+        if (animationFrameId !== null) {
+          cancelAnimationFrame(animationFrameId);
+        }
+        animationFrameId = requestAnimationFrame(adjustFontSize);
+        return;
+      }
+      const newFontSize = Math.min(Math.max(parentWidth / scrollWidth * currentFontSize, minFontSize), maxFontSize);
+      textRef.current.style.fontSize = `${newFontSize}px`;
+      textRef.current.style.whiteSpace = newFontSize === minFontSize ? "normal" : "nowrap";
+    }
+  };
+  const handleResize = () => {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+    }
+    animationFrameId = requestAnimationFrame(adjustFontSize);
+  };
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    adjustFontSize();
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+      }
+    };
+  }, [text]);
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { width },
+    className: `text-center ${className}`
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: `text-[${minFontSize}px] transition-[font-size] whitespace-nowrap`,
+    ref: textRef
+  }, text));
+};
+
+const InfoBox = ({ text, handleClose, backgroundColor = "#6366F1" }) => {
+  const bgColorWithOpacity = `${backgroundColor}1F`;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "info-box p-[10px] rounded-[10px] w-full font-poppins text-[12px] leading[18px]",
+    style: { backgroundColor: bgColorWithOpacity }
+  }, text, " ", /* @__PURE__ */ React.createElement("button", {
+    onClick: handleClose,
+    className: "text-indigo-500 font-[700] select-none"
+  }, "Close"));
+};
+
+const IssueHistoryBox = ({
+  issueHistory,
+  customIssueHistoryComponent
+}) => {
+  let renderIssueHistory = issueHistory == null ? void 0 : issueHistory.map((issueItem) => {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "flex items-center issue-log-item border-b-[1px] py-[5px] border-grayscale-200 border-solid w-full",
+      key: issueItem == null ? void 0 : issueItem.id
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: "profile-thumb-img vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden"
+    }, /* @__PURE__ */ React.createElement("img", {
+      className: "h-full w-full object-cover select-none",
+      src: (issueItem == null ? void 0 : issueItem.thumb) || DefaultFace,
+      alt: "profile"
+    })), /* @__PURE__ */ React.createElement("div", {
+      className: "ml-[9px] flex flex-col justify-center"
+    }, /* @__PURE__ */ React.createElement("p", {
+      className: "issue-item-name font-montserrat font-semibold text-grayscale-900 text-[14px] "
+    }, issueItem == null ? void 0 : issueItem.name), /* @__PURE__ */ React.createElement("p", {
+      className: "issue-item-date font-montserrat  text-[12px] text-grayscale-600 "
+    }, issueItem == null ? void 0 : issueItem.date)));
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative"
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "text-[20px] leading-[20px] text-grayscale-900"
+  }, "Issue Log"), !customIssueHistoryComponent ? renderIssueHistory : customIssueHistoryComponent);
+};
+
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const defaultGetFileMetadata = (url) => __async(undefined, null, function* () {
+  var _a;
+  const isFilestack = url.includes("filestack");
+  if (!isFilestack)
+    return;
+  const urlParams = (_a = url.split(".com/")[1]) == null ? void 0 : _a.split("/");
+  if (!urlParams)
+    return;
+  const handle = urlParams[urlParams.length - 1];
+  let fetchFailed = false;
+  const data = yield fetch(`https://cdn.filestackcontent.com/${handle}/metadata`).then((res) => res.json()).catch(() => fetchFailed = true);
+  if (fetchFailed)
+    return;
+  const fileExtension = data.filename.split(".")[1];
+  return {
+    fileExtension,
+    sizeInBytes: data.size,
+    numberOfPages: void 0
+  };
+});
+const defaultGetVideoMetadata = (url) => __async(undefined, null, function* () {
+  const isYoutube = url.includes("youtube");
+  if (!isYoutube)
+    return;
+  const metadataUrl = `http://youtube.com/oembed?url=${url}&format=json`;
+  let fetchFailed = false;
+  const metadata = yield fetch(metadataUrl).then((res) => res.json()).catch(() => fetchFailed = true);
+  if (fetchFailed)
+    return;
+  return {
+    title: metadata.title,
+    imageUrl: metadata.thumbnail_url,
+    videoLength: ""
+  };
+});
+const MediaAttachmentsBox = ({
+  attachments,
+  getFileMetadata = defaultGetFileMetadata,
+  getVideoMetadata = defaultGetVideoMetadata,
+  onMediaAttachmentClick,
+  enableLightbox = false
+}) => {
+  const [documentMetadata, setDocumentMetadata] = useState({});
+  const [videoMetadata, setVideoMetadata] = useState({});
+  const mediaAttachments = [];
+  const documentsAndLinks = [];
+  attachments.forEach((a) => {
+    switch (a.type) {
+      case "document":
+      case "link":
+        documentsAndLinks.push(a);
+        break;
+      case "photo":
+      case "video":
+        mediaAttachments.push(a);
+        break;
+    }
+  });
+  useEffect(() => {
+    const getMetadata = (attachments2) => __async(undefined, null, function* () {
+      const docMetadata = {};
+      const videoMetadata2 = {};
+      yield Promise.all(attachments2.map((attachment) => __async(this, null, function* () {
+        if (attachment.type === "document") {
+          docMetadata[attachment.url] = yield getFileMetadata(attachment.url);
+        } else if (attachment.type === "video") {
+          videoMetadata2[attachment.url] = yield getVideoMetadata(attachment.url);
+        }
+      })));
+      setVideoMetadata(videoMetadata2);
+      setDocumentMetadata(docMetadata);
+    });
+    const videos = attachments.filter((a) => a.type === "video");
+    getMetadata([...documentsAndLinks, ...videos]);
+  }, []);
+  const [currentLightboxUrl, setCurrentLightboxUrl] = useState(void 0);
+  const lightboxItems = mediaAttachments.filter((a) => a.type === "photo" || a.type === "video");
+  const handleMediaAttachmentClick = (url, type) => {
+    if (type === "photo" || type === "video") {
+      setCurrentLightboxUrl(url);
+    }
+    onMediaAttachmentClick == null ? void 0 : onMediaAttachmentClick(url, type);
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "media-attachments-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full"
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "text-[20px] leading-[20px] text-grayscale-900"
+  }, "Media Attachments"), mediaAttachments.length > 0 && /* @__PURE__ */ React.createElement("div", {
+    className: "flex gap-[5px] justify-between flex-wrap w-full"
+  }, enableLightbox && /* @__PURE__ */ React.createElement(Lightbox, {
+    items: lightboxItems,
+    currentUrl: currentLightboxUrl,
+    setCurrentUrl: setCurrentLightboxUrl
+  }), mediaAttachments.map((media, index) => {
+    var _a, _b;
+    let innerContent;
+    let title = media.title;
+    if (media.type === "video") {
+      const metadata = videoMetadata[media.url];
+      title = (_a = title || (metadata == null ? void 0 : metadata.title)) != null ? _a : "";
+      const baseUrl = getBaseUrl(media.url);
+      const iconTop = title || baseUrl;
+      innerContent = /* @__PURE__ */ React.createElement("div", {
+        className: "absolute top-0 left-0 right-0 bottom-0 bg-cover bg-no-repeat font-poppins text-white text-[12px] font-[400] leading-[17px] flex flex-col justify-end items-start p-[10px] text-left bg-rose-600 rounded-[15px]",
+        style: {
+          backgroundImage: (metadata == null ? void 0 : metadata.imageUrl) ? `linear-gradient(180deg, rgba(0, 0, 0, 0) 44.20%, rgba(0, 0, 0, 0.6) 69%), url(${(_b = metadata == null ? void 0 : metadata.imageUrl) != null ? _b : ""})` : void 0
+        }
+      }, !(metadata == null ? void 0 : metadata.imageUrl) && /* @__PURE__ */ React.createElement(VideoIcon, {
+        size: "60",
+        className: "m-auto"
+      }), /* @__PURE__ */ React.createElement("div", {
+        className: `absolute ${iconTop ? "top-[10px]" : "bottom-[10px]"} left-[10px] z-10 flex items-center gap-[5px]`
+      }, (metadata == null ? void 0 : metadata.imageUrl) && /* @__PURE__ */ React.createElement(VideoIcon, null), (metadata == null ? void 0 : metadata.videoLength) && /* @__PURE__ */ React.createElement("span", {
+        className: "leading-[23px]"
+      }, metadata.videoLength)), baseUrl && /* @__PURE__ */ React.createElement("span", {
+        className: "font-[600]"
+      }, baseUrl), title && /* @__PURE__ */ React.createElement("span", {
+        className: "line-clamp-2"
+      }, title));
+    } else {
+      innerContent = /* @__PURE__ */ React.createElement("div", {
+        className: "absolute top-0 left-0 right-0 bottom-0 h-min"
+      }, /* @__PURE__ */ React.createElement("img", {
+        className: "rounded-[15px]",
+        src: media.url
+      }), /* @__PURE__ */ React.createElement(Camera, {
+        className: "relative bottom-[30px] left-[10px] z-10"
+      }));
+    }
+    const className = `media-attachment ${media.type} w-[49%] pt-[49%] overflow-hidden relative`;
+    if (onMediaAttachmentClick || enableLightbox) {
+      return /* @__PURE__ */ React.createElement("button", {
+        key: index,
+        className,
+        onClick: () => handleMediaAttachmentClick(media.url, media.type)
+      }, innerContent);
+    }
+    return /* @__PURE__ */ React.createElement("div", {
+      key: index,
+      className
+    }, innerContent);
+  })), documentsAndLinks.length > 0 && /* @__PURE__ */ React.createElement("div", {
+    className: "w-full flex flex-col gap-[5px]"
+  }, documentsAndLinks.map((docOrLink, index) => {
+    var _a;
+    const metadata = docOrLink.type === "document" ? documentMetadata[docOrLink.url] : void 0;
+    const { fileExtension, sizeInBytes, numberOfPages } = metadata != null ? metadata : {};
+    let baseUrl = "";
+    if (docOrLink.type === "link") {
+      baseUrl = getBaseUrl(docOrLink.url);
+    }
+    const innerContent = /* @__PURE__ */ React.createElement("div", {
+      className: "flex flex-col gap-[5px]"
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: "flex gap-[5px] items-center"
+    }, docOrLink.type === "document" && /* @__PURE__ */ React.createElement(GenericDocumentIcon, {
+      className: "shrink-0"
+    }), docOrLink.type === "link" && /* @__PURE__ */ React.createElement(LinkIcon, {
+      className: "shrink-0"
+    }), /* @__PURE__ */ React.createElement("span", {
+      className: "text-grayscale-900 font-[400]"
+    }, (_a = docOrLink.title) != null ? _a : "No title")), docOrLink.type === "document" && metadata && /* @__PURE__ */ React.createElement("a", {
+      href: docOrLink.url,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "text-grayscale-600 font-[600] px-[5px] hover:underline"
+    }, fileExtension && /* @__PURE__ */ React.createElement("span", {
+      className: "uppercase"
+    }, fileExtension), fileExtension && (numberOfPages || sizeInBytes) && " \u2022 ", numberOfPages && /* @__PURE__ */ React.createElement("span", null, numberOfPages, " page", numberOfPages === 1 ? "" : "s"), numberOfPages && sizeInBytes && " \u2022 ", sizeInBytes && /* @__PURE__ */ React.createElement("span", null, prettyBytes(sizeInBytes))), docOrLink.type === "link" && /* @__PURE__ */ React.createElement("a", {
+      href: docOrLink.url,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "text-indigo-500 font-[600] px-[5px] hover:underline"
+    }, baseUrl));
+    const className = `row-attachment ${docOrLink.type} bg-grayscale-100 rounded-[15px] p-[10px] w-full font-poppins text-[12px] leading-[18px] tracking-[-0.33px] text-left`;
+    if (onMediaAttachmentClick) {
+      return /* @__PURE__ */ React.createElement("button", {
+        key: index,
+        className,
+        onClick: () => handleMediaAttachmentClick(docOrLink.url, docOrLink.type)
+      }, innerContent);
+    }
+    return /* @__PURE__ */ React.createElement("div", {
+      key: index,
+      className
+    }, innerContent);
+  })));
+};
+
+const RibbonEnd = ({
+  side,
+  className = "",
+  height = "64"
+}) => {
+  const halfHeight = parseInt(height) / 2;
+  return /* @__PURE__ */ React.createElement("svg", {
+    className,
+    width: "30",
+    height,
+    viewBox: `0 0 30 ${height}`,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: { transform: `scaleX(${side === "left" ? "1" : "-1"})` }
+  }, /* @__PURE__ */ React.createElement("g", {
+    filter: "url(#filter0_d_4620_22659)"
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: `M0 0H30V${height}H0L6.36364 ${halfHeight}L0 0Z`,
+    fill: "white"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: `M3.08593 2.5H27.5V${height}H3.08593L8.80922 ${halfHeight}L8.91926 30L8.80922 29.4812L3.08593 2.5Z`,
+    stroke: "#EEF2FF",
+    strokeWidth: "5"
+  })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", {
+    id: "filter0_d_4620_22659",
+    x: "0",
+    y: "0",
+    width: "30",
+    height,
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /* @__PURE__ */ React.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /* @__PURE__ */ React.createElement("feColorMatrix", {
+    in: "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /* @__PURE__ */ React.createElement("feOffset", {
+    dy: "4"
+  }), /* @__PURE__ */ React.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /* @__PURE__ */ React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+  }), /* @__PURE__ */ React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_4620_22659"
+  }), /* @__PURE__ */ React.createElement("feBlend", {
+    mode: "normal",
+    in: "SourceGraphic",
+    in2: "effect1_dropShadow_4620_22659",
+    result: "shape"
+  }))));
+};
+
+const boostCMSSKillCategories = [
+  {
+    id: 1,
+    title: "Durable",
+    IconComponent: Durable,
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "durable" /* Durable */
+  },
+  {
+    id: 2,
+    title: "Stem",
+    IconComponent: Stem,
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "stem" /* Stem */
+  },
+  {
+    id: 3,
+    title: "Athletic",
+    IconComponent: Athletics,
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "athletic" /* Athletic */
+  },
+  {
+    id: 4,
+    title: "Creative",
+    IconComponent: Creative,
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "creative" /* Creative */
+  },
+  {
+    id: 5,
+    title: "Business",
+    IconComponent: Business,
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "business" /* Business */
+  },
+  {
+    id: 6,
+    title: "Trade",
+    IconComponent: Trade,
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "trade" /* Trade */
+  },
+  {
+    id: 7,
+    title: "Social",
+    IconComponent: Social,
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "social" /* Social */
+  },
+  {
+    id: 8,
+    title: "Digital",
+    IconComponent: Digital,
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "digital" /* Digital */
+  },
+  {
+    id: 9,
+    title: "Medical",
+    IconComponent: Medical,
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "medical" /* Medical */
+  }
+];
+const CATEGORY_TO_SKILLS = {
+  ["durable" /* Durable */]: [
+    {
+      id: 1,
+      title: "Adaptability",
+      IconComponent: Durable,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "durable" /* Durable */,
+      type: "adaptability" /* Adaptability */
+    },
+    {
+      id: 2,
+      title: "Perseverance",
+      IconComponent: Durable,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "durable" /* Durable */,
+      type: "perseverance" /* Perseverance */
+    },
+    {
+      id: 3,
+      title: "Mental Toughness",
+      IconComponent: Durable,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "durable" /* Durable */,
+      type: "mentalToughness" /* MentalToughness */
+    },
+    {
+      id: 4,
+      title: "Physical Endurance",
+      IconComponent: Durable,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "durable" /* Durable */,
+      type: "physicalEndurance" /* PhysicalEndurance */
+    },
+    {
+      id: 5,
+      title: "Lifelong Learning",
+      IconComponent: Durable,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "durable" /* Durable */,
+      type: "lifelongLearning" /* LifelongLearning */
+    }
+  ],
+  ["stem" /* Stem */]: [
+    {
+      id: 1,
+      title: "Mathematics",
+      IconComponent: Stem,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "stem" /* Stem */,
+      type: "mathematics" /* Mathematics */
+    },
+    {
+      id: 2,
+      title: "Science",
+      IconComponent: Stem,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "stem" /* Stem */,
+      type: "science" /* Science */
+    },
+    {
+      id: 3,
+      title: "Technology",
+      IconComponent: Stem,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "stem" /* Stem */,
+      type: "technology" /* Technology */
+    },
+    {
+      id: 4,
+      title: "Engineering",
+      IconComponent: Stem,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "stem" /* Stem */,
+      type: "engineering" /* Engineering */
+    },
+    {
+      id: 5,
+      title: "Research",
+      IconComponent: Stem,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "stem" /* Stem */,
+      type: "research" /* Research */
+    }
+  ],
+  ["athletic" /* Athletic */]: [
+    {
+      id: 1,
+      title: "Sport specific skills",
+      IconComponent: Athletics,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "athletic" /* Athletic */,
+      type: "sportSpecificSkills" /* SportSpecificSkills */
+    },
+    {
+      id: 2,
+      title: "Strength and Conditioning",
+      IconComponent: Athletics,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "athletic" /* Athletic */,
+      type: "strengthAndConditioning" /* StrengthAndConditioning */
+    },
+    {
+      id: 3,
+      title: "Coordination",
+      IconComponent: Athletics,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "athletic" /* Athletic */,
+      type: "coordination" /* Coordination */
+    },
+    {
+      id: 4,
+      title: "Mental Focus",
+      IconComponent: Athletics,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "athletic" /* Athletic */,
+      type: "mentalFocus" /* MentalFocus */
+    },
+    {
+      id: 5,
+      title: "Team work",
+      IconComponent: Athletics,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "athletic" /* Athletic */,
+      type: "teamwork" /* Teamwork */
+    }
+  ],
+  ["creative" /* Creative */]: [
+    {
+      id: 1,
+      title: "Visual Arts",
+      IconComponent: Creative,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "creative" /* Creative */,
+      type: "visualArts" /* VisualArts */
+    },
+    {
+      id: 2,
+      title: "Performing Arts",
+      IconComponent: Creative,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "creative" /* Creative */,
+      type: "performingArts" /* PerformingArts */
+    },
+    {
+      id: 3,
+      title: "Writing",
+      IconComponent: Creative,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "creative" /* Creative */,
+      type: "writing" /* Writing */
+    },
+    {
+      id: 4,
+      title: "Design",
+      IconComponent: Creative,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "creative" /* Creative */,
+      type: "design" /* Design */
+    },
+    {
+      id: 5,
+      title: "Ideation",
+      IconComponent: Creative,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "creative" /* Creative */,
+      type: "ideation" /* Ideation */
+    }
+  ],
+  ["business" /* Business */]: [
+    {
+      id: 1,
+      title: "Management",
+      IconComponent: Business,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "business" /* Business */,
+      type: "management" /* Management */
+    },
+    {
+      id: 2,
+      title: "Finance",
+      IconComponent: Business,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "business" /* Business */,
+      type: "finance" /* Finance */
+    },
+    {
+      id: 3,
+      title: "Marketing",
+      IconComponent: Business,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "business" /* Business */,
+      type: "marketing" /* Marketing */
+    },
+    {
+      id: 4,
+      title: "Operations",
+      IconComponent: Business,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "business" /* Business */,
+      type: "operations" /* Operations */
+    },
+    {
+      id: 5,
+      title: "Entrepreneurship",
+      IconComponent: Business,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "business" /* Business */,
+      type: "entrepreneurship" /* Entrepreneurship */
+    }
+  ],
+  ["trade" /* Trade */]: [
+    {
+      id: 1,
+      title: "Construction",
+      IconComponent: Trade,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "trade" /* Trade */,
+      type: "construction" /* Construction */
+    },
+    {
+      id: 2,
+      title: "Mechanics",
+      IconComponent: Trade,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "trade" /* Trade */,
+      type: "mechanics" /* Mechanics */
+    },
+    {
+      id: 3,
+      title: "Manufacturing",
+      IconComponent: Trade,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "trade" /* Trade */,
+      type: "manufacturing" /* Manufacturing */
+    },
+    {
+      id: 4,
+      title: "Cosmetology",
+      IconComponent: Trade,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "trade" /* Trade */,
+      type: "cosmetology" /* Cosmetology */
+    },
+    {
+      id: 5,
+      title: "Culinary Arts",
+      IconComponent: Trade,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "trade" /* Trade */,
+      type: "culinaryArts" /* CulinaryArts */
+    }
+  ],
+  ["social" /* Social */]: [
+    {
+      id: 1,
+      title: "History",
+      IconComponent: Social,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "social" /* Social */,
+      type: "history" /* History */
+    },
+    {
+      id: 2,
+      title: "Psychology",
+      IconComponent: Social,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "social" /* Social */,
+      type: "psychology" /* Psychology */
+    },
+    {
+      id: 3,
+      title: "Sociology",
+      IconComponent: Social,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "social" /* Social */,
+      type: "sociology" /* Sociology */
+    },
+    {
+      id: 4,
+      title: "Economics",
+      IconComponent: Social,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "social" /* Social */,
+      type: "economics" /* Economics */
+    },
+    {
+      id: 5,
+      title: "Political Science",
+      IconComponent: Social,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "social" /* Social */,
+      type: "politicalScience" /* PoliticalScience */
+    }
+  ],
+  ["digital" /* Digital */]: [
+    {
+      id: 1,
+      title: "Basic Computer Skills",
+      IconComponent: Digital,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "digital" /* Digital */,
+      type: "basicComputerSkills" /* BasicComputerSkills */
+    },
+    {
+      id: 2,
+      title: "Information Literacy",
+      IconComponent: Digital,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "digital" /* Digital */,
+      type: "informationLiteracy" /* InformationLiteracy */
+    },
+    {
+      id: 3,
+      title: "Software Proficiency",
+      IconComponent: Digital,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "digital" /* Digital */,
+      type: "softwareProficiency" /* SoftwareProficiency */
+    },
+    {
+      id: 4,
+      title: "Online Communication",
+      IconComponent: Digital,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "digital" /* Digital */,
+      type: "onlineCommunication" /* OnlineCommunication */
+    },
+    {
+      id: 5,
+      title: "Cybersecurity",
+      IconComponent: Digital,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "digital" /* Digital */,
+      type: "cybersecurity" /* Cybersecurity */
+    }
+  ],
+  ["medical" /* Medical */]: [
+    {
+      id: 1,
+      title: "Clinical Skills",
+      IconComponent: Medical,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "medical" /* Medical */,
+      type: "clinicalSkills" /* ClinicalSkills */
+    },
+    {
+      id: 2,
+      title: "Anatomy and Physiology",
+      IconComponent: Medical,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "medical" /* Medical */,
+      type: "anatomyAndPhysiology" /* AnatomyAndPhysiology */
+    },
+    {
+      id: 3,
+      title: "Patient Care",
+      IconComponent: Medical,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "medical" /* Medical */,
+      type: "patientCare" /* PatientCare */
+    },
+    {
+      id: 4,
+      title: "Medical Specialties",
+      IconComponent: Medical,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "medical" /* Medical */,
+      type: "medicalSpecialties" /* MedicalSpecialties */
+    },
+    {
+      id: 5,
+      title: "Healthcare Administration",
+      IconComponent: Medical,
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "medical" /* Medical */,
+      type: "healthcareAdministration" /* HealthcareAdministration */
+    }
+  ]
+};
+const SKILLS_TO_SUBSKILLS = {
+  ["adaptability" /* Adaptability */]: [
+    {
+      id: 1,
+      title: "Flexibility",
+      type: "flexibility" /* flexibility */
+    },
+    {
+      id: 2,
+      title: "Resilience",
+      type: "resilience" /* resilience */
+    },
+    {
+      id: 3,
+      title: "Problem Solving",
+      type: "problemSolving" /* problemSolving */
+    },
+    {
+      id: 4,
+      title: "Resourcefulness",
+      type: "resourcefulness" /* resourcefulness */
+    },
+    {
+      id: 5,
+      title: "Stress management",
+      type: "stressManagement" /* stressManagement */
+    }
+  ],
+  ["perseverance" /* Perseverance */]: [
+    {
+      id: 1,
+      title: "Discipline",
+      type: "discipline" /* discipline */
+    },
+    {
+      id: 2,
+      title: "focus",
+      type: "focus" /* focus */
+    },
+    {
+      id: 3,
+      title: "Commitment",
+      type: "commitment" /* commitment */
+    },
+    {
+      id: 4,
+      title: "Grit",
+      type: "grit" /* grit */
+    },
+    {
+      id: 5,
+      title: "Tenacity",
+      type: "tenacity" /* tenacity */
+    }
+  ],
+  ["mentalToughness" /* MentalToughness */]: [
+    {
+      id: 1,
+      title: "optimism",
+      type: "optimism" /* optimism */
+    },
+    {
+      id: 2,
+      title: "Self Confidence",
+      type: "selfConfidence" /* selfConfidence */
+    },
+    {
+      id: 3,
+      title: "Emotional Regulation",
+      type: "emotionalRegulation" /* emotionalRegulation */
+    },
+    {
+      id: 4,
+      title: "Growth Mindset",
+      type: "growthMindset" /* growthMindset */
+    },
+    {
+      id: 5,
+      title: "Positive Self-Talk",
+      type: "positiveSelfTalk" /* positiveSelfTalk */
+    }
+  ],
+  ["physicalEndurance" /* PhysicalEndurance */]: [
+    {
+      id: 1,
+      title: "Strength",
+      type: "strength" /* strength */
+    },
+    {
+      id: 2,
+      title: "Stamina",
+      type: "stamina" /* stamina */
+    },
+    {
+      id: 3,
+      title: "Cardiovascular Fitness",
+      type: "cardiovascularFitness" /* cardiovascularFitness */
+    },
+    {
+      id: 4,
+      title: "Pain Tolerance",
+      type: "painTolerance" /* painTolerance */
+    },
+    {
+      id: 5,
+      title: "Injury Prevention",
+      type: "injuryPrevention" /* injuryPrevention */
+    }
+  ],
+  ["lifelongLearning" /* LifelongLearning */]: [
+    {
+      id: 1,
+      title: "Curiosity",
+      type: "curiosity" /* curiosity */
+    },
+    {
+      id: 2,
+      title: "Open Mindedness",
+      type: "openMindedness" /* openMindedness */
+    },
+    {
+      id: 3,
+      title: "Critical Thinking",
+      type: "critical thinking" /* criticalThinking */
+    },
+    {
+      id: 4,
+      title: "Self-directed Learning",
+      type: "selfDirectedLearning" /* selfDirectedLearning */
+    },
+    {
+      id: 5,
+      title: "Knowledge Retention",
+      type: "knowledgeRetention" /* knowledgeRetention */
+    }
+  ],
+  ["mathematics" /* Mathematics */]: [
+    {
+      id: 1,
+      title: "Algebra",
+      type: "algebra" /* algebra */
+    },
+    {
+      id: 2,
+      title: "Geometry",
+      type: "geometry" /* geometry */
+    },
+    {
+      id: 3,
+      title: "Trigonometry",
+      type: "trigonometry" /* trigonometry */
+    },
+    {
+      id: 4,
+      title: "Calculus",
+      type: "calculus" /* calculus */
+    },
+    {
+      id: 5,
+      title: "Statistics",
+      type: "statistics" /* statistics */
+    }
+  ],
+  ["science" /* Science */]: [
+    {
+      id: 1,
+      title: "Physics",
+      type: "physics" /* physics */
+    },
+    {
+      id: 2,
+      title: "Chemistry",
+      type: "chemistry" /* chemistry */
+    },
+    {
+      id: 3,
+      title: "Biology",
+      type: "biology" /* biology */
+    },
+    {
+      id: 4,
+      title: "Earth science",
+      type: "earthScience" /* earthScience */
+    },
+    {
+      id: 5,
+      title: "Environmental science",
+      type: "environmentalScience" /* environmentalScience */
+    }
+  ],
+  ["technology" /* Technology */]: [
+    {
+      id: 1,
+      title: "Coding",
+      type: "coding" /* coding */
+    },
+    {
+      id: 2,
+      title: "Software Development",
+      type: "softwareDevelopment" /* softwareDevelopment */
+    },
+    {
+      id: 3,
+      title: "Data Analysis",
+      type: "dataAnalysis" /* dataAnalysis */
+    },
+    {
+      id: 4,
+      title: "Robotics",
+      type: "robotics" /* robotics */
+    },
+    {
+      id: 5,
+      title: "Cybersecurity",
+      type: "cybersecurity" /* cybersecurity */
+    }
+  ],
+  ["engineering" /* Engineering */]: [
+    {
+      id: 1,
+      title: "Mechanical Engineering",
+      type: "mechanicalEngineering" /* mechanicalEngineering */
+    },
+    {
+      id: 2,
+      title: "Electrical Engineering",
+      type: "electricalEngineering" /* electricalEngineering */
+    },
+    {
+      id: 3,
+      title: "Civil Engineering",
+      type: "civilEngineering" /* civilEngineering */
+    },
+    {
+      id: 4,
+      title: "Chemical Engineering",
+      type: "chemicalEngineering" /* chemicalEngineering */
+    },
+    {
+      id: 5,
+      title: "Computer Engineering",
+      type: "computerEngineering" /* computerEngineering */
+    }
+  ],
+  ["research" /* Research */]: [
+    {
+      id: 1,
+      title: "Hypothesis Development",
+      type: "hypothesisDevelopment" /* hypothesisDevelopment */
+    },
+    {
+      id: 2,
+      title: "Experimental Design",
+      type: "experimentalDesign" /* experimentalDesign */
+    },
+    {
+      id: 3,
+      title: "Data Collection",
+      type: "dataCollection" /* dataCollection */
+    },
+    {
+      id: 4,
+      title: "Analysis",
+      type: "analysis" /* analysis */
+    },
+    {
+      id: 5,
+      title: "presentation",
+      type: "presentation" /* presentation */
+    }
+  ],
+  ["sportSpecificSkills" /* SportSpecificSkills */]: [
+    {
+      id: 1,
+      title: "Ball Handling",
+      type: "ballHandling" /* ballHandling */
+    },
+    {
+      id: 2,
+      title: "Running Technique",
+      type: "runningTechnique" /* runningTechnique */
+    },
+    {
+      id: 3,
+      title: "Swing Mechanics",
+      type: "swingMechanics" /* swingMechanics */
+    },
+    {
+      id: 4,
+      title: "Tackling",
+      type: "tackling" /* tackling */
+    },
+    {
+      id: 5,
+      title: "Swimming Strokes",
+      type: "swimmingStrokes" /* swimmingStrokes */
+    }
+  ],
+  ["strengthAndConditioning" /* StrengthAndConditioning */]: [
+    {
+      id: 1,
+      title: "Weight Lifting",
+      type: "weightLifting" /* weightLifting */
+    },
+    {
+      id: 2,
+      title: "Speed Training",
+      type: "speedTraining" /* speedTraining */
+    },
+    {
+      id: 3,
+      title: "Agility",
+      type: "agility" /* agility */
+    },
+    {
+      id: 4,
+      title: "Flexibility",
+      type: "flexibility" /* flexibility */
+    },
+    {
+      id: 5,
+      title: "Injury Prevention",
+      type: "injuryPrevention" /* injuryPrevention */
+    }
+  ],
+  ["coordination" /* Coordination */]: [
+    {
+      id: 1,
+      title: "Hand Eye Coordination",
+      type: "handEyeCoordination" /* handEyeCoordination */
+    },
+    {
+      id: 2,
+      title: "Footwork",
+      type: "footwork" /* footwork */
+    },
+    {
+      id: 3,
+      title: "Balance",
+      type: "balance" /* balance */
+    },
+    {
+      id: 4,
+      title: "Reaction Time",
+      type: "reactionTime" /* reactionTime */
+    },
+    {
+      id: 5,
+      title: "Spatial Awareness",
+      type: "spatialAwareness" /* spatialAwareness */
+    }
+  ],
+  ["mentalFocus" /* MentalFocus */]: [
+    {
+      id: 1,
+      title: "Visualization",
+      type: "visualization" /* visualization */
+    },
+    {
+      id: 2,
+      title: "Goal Setting",
+      type: "goalSetting" /* goalSetting */
+    },
+    {
+      id: 3,
+      title: "Competitiveness",
+      type: "competitiveness" /* competitiveness */
+    },
+    {
+      id: 4,
+      title: "Resilience",
+      type: "resilience" /* resilience */
+    },
+    {
+      id: 5,
+      title: "Handling pressure",
+      type: "handlingPressure" /* handlingPressure */
+    }
+  ],
+  ["teamwork" /* Teamwork */]: [
+    {
+      id: 1,
+      title: "Communication",
+      type: "communication" /* communication */
+    },
+    {
+      id: 2,
+      title: "Cooperation",
+      type: "cooperation" /* cooperation */
+    },
+    {
+      id: 3,
+      title: "Role Understanding",
+      type: "roleUnderstanding" /* roleUnderstanding */
+    },
+    {
+      id: 4,
+      title: "Strategy",
+      type: "strategy" /* strategy */
+    },
+    {
+      id: 5,
+      title: "Sportsmanship",
+      type: "sportsmanship" /* sportsmanship */
+    }
+  ],
+  ["visualArts" /* VisualArts */]: [
+    {
+      id: 1,
+      title: "Drawing",
+      type: "drawing" /* drawing */
+    },
+    {
+      id: 2,
+      title: "Painting",
+      type: "painting" /* painting */
+    },
+    {
+      id: 3,
+      title: "Sculpture",
+      type: "sculpture" /* sculpture */
+    },
+    {
+      id: 4,
+      title: "Graphic design",
+      type: "graphicDesign" /* graphicDesign */
+    },
+    {
+      id: 5,
+      title: "Photography",
+      type: "photography" /* photography */
+    }
+  ],
+  ["performingArts" /* PerformingArts */]: [
+    {
+      id: 1,
+      title: "Acting",
+      type: "acting" /* acting */
+    },
+    {
+      id: 2,
+      title: "Dance",
+      type: "dance" /* dance */
+    },
+    {
+      id: 3,
+      title: "Singing",
+      type: "singing" /* singing */
+    },
+    {
+      id: 4,
+      title: "Instrumental",
+      type: "instrumental" /* instrumental */
+    },
+    {
+      id: 5,
+      title: "Theatre Production",
+      type: "theaterProduction" /* theaterProduction */
+    },
+    {
+      id: 6,
+      title: "Costume Design",
+      type: "costumeDesign" /* costumeDesign */
+    },
+    {
+      id: 7,
+      title: "Directing",
+      type: "directing" /* directing */
+    }
+  ],
+  ["writing" /* Writing */]: [
+    {
+      id: 1,
+      title: "Poetry",
+      type: "poetry" /* poetry */
+    },
+    {
+      id: 2,
+      title: "Fiction",
+      type: "fiction" /* fiction */
+    },
+    {
+      id: 3,
+      title: "Non fiction",
+      type: "nonfiction" /* nonfiction */
+    },
+    {
+      id: 4,
+      title: "Script Writing",
+      type: "scriptWriting" /* scriptWriting */
+    },
+    {
+      id: 5,
+      title: "Copy Writing",
+      type: "copyWriting" /* copyWriting */
+    },
+    {
+      id: 6,
+      title: "Journalism",
+      type: "journalism" /* journalism */
+    }
+  ],
+  ["design" /* Design */]: [
+    {
+      id: 1,
+      title: "Fashion Design",
+      type: "fashionDesign" /* fashionDesign */
+    },
+    {
+      id: 2,
+      title: "Interior Design",
+      type: "interiorDesign" /* interiorDesign */
+    },
+    {
+      id: 3,
+      title: "Web Design",
+      type: "webDesign" /* webDesign */
+    },
+    {
+      id: 4,
+      title: "Product Design",
+      type: "productDesign" /* productDesign */
+    },
+    {
+      id: 5,
+      title: "Game Design",
+      type: "gameDesign" /* gameDesign */
+    }
+  ],
+  ["ideation" /* Ideation */]: [
+    {
+      id: 1,
+      title: "Brainstorming",
+      type: "brainstorming" /* brainstorming */
+    },
+    {
+      id: 2,
+      title: "Concept Development",
+      type: "concept development" /* conceptDevelopment */
+    },
+    {
+      id: 3,
+      title: "Innovation",
+      type: "innovation" /* innovation */
+    },
+    {
+      id: 4,
+      title: "Problem Solving",
+      type: "problemSolving" /* problemSolving */
+    },
+    {
+      id: 5,
+      title: "Out of the box thinking",
+      type: "outOfTheBoxThinking" /* outOfTheBoxThinking */
+    }
+  ],
+  ["management" /* Management */]: [
+    {
+      id: 1,
+      title: "Leadership",
+      type: "leadership" /* leadership */
+    },
+    {
+      id: 2,
+      title: "Strategic Planning",
+      type: "strategicPlanning" /* strategicPlanning */
+    },
+    {
+      id: 3,
+      title: "Team Building",
+      type: "teamBuilding" /* teamBuilding */
+    },
+    {
+      id: 4,
+      title: "Delegation",
+      type: "delegation" /* delegation */
+    },
+    {
+      id: 5,
+      title: "Conflict Resolution",
+      type: "conflictResolution" /* conflictResolution */
+    }
+  ],
+  ["finance" /* Finance */]: [
+    {
+      id: 1,
+      title: "Accounting",
+      type: "accounting" /* accounting */
+    },
+    {
+      id: 2,
+      title: "Budgeting",
+      type: "budgeting" /* budgeting */
+    },
+    {
+      id: 3,
+      title: "Financial Analysis",
+      type: "financialAnalysis" /* financialAnalysis */
+    },
+    {
+      id: 4,
+      title: "Investment",
+      type: "investment" /* investment */
+    },
+    {
+      id: 5,
+      title: "Risk Management",
+      type: "riskManagement" /* riskManagement */
+    }
+  ],
+  ["marketing" /* Marketing */]: [
+    {
+      id: 1,
+      title: "Market Research",
+      type: "marketResearch" /* marketResearch */
+    },
+    {
+      id: 2,
+      title: "Branding",
+      type: "branding" /* branding */
+    },
+    {
+      id: 3,
+      title: "Advertising",
+      type: "advertising" /* advertising */
+    },
+    {
+      id: 4,
+      title: "Sales",
+      type: "sales" /* sales */
+    },
+    {
+      id: 5,
+      title: "Customer Relationship Management",
+      type: "customerRelationshipManagement" /* customerRelationshipManagement */
+    }
+  ],
+  ["operations" /* Operations */]: [
+    {
+      id: 1,
+      title: "Logistics",
+      type: "logistics" /* logistics */
+    },
+    {
+      id: 2,
+      title: "Supply Chain Management",
+      type: "supplyChainManagement" /* supplyChainManagement */
+    },
+    {
+      id: 3,
+      title: "Process Improvement",
+      type: "processImprovement" /* processImprovement */
+    },
+    {
+      id: 4,
+      title: "Project Management",
+      type: "projectManagement" /* projectManagement */
+    },
+    {
+      id: 5,
+      title: "Quality Control",
+      type: "qualityControl" /* qualityControl */
+    }
+  ],
+  ["entrepreneurship" /* Entrepreneurship */]: [
+    {
+      id: 1,
+      title: "Opportunity Recognition",
+      type: "opportunityRecognition" /* opportunityRecognition */
+    },
+    {
+      id: 2,
+      title: "Business Planning",
+      type: "businessPlanning" /* businessPlanning */
+    },
+    {
+      id: 3,
+      title: "Fundraising",
+      type: "fundraising" /* fundraising */
+    },
+    {
+      id: 4,
+      title: "Networking",
+      type: "networking" /* networking */
+    },
+    {
+      id: 5,
+      title: "Decision-making",
+      type: "decisionMaking" /* decisionMaking */
+    }
+  ],
+  ["construction" /* Construction */]: [
+    {
+      id: 1,
+      title: "Carpentry",
+      type: "carpentry" /* carpentry */
+    },
+    {
+      id: 2,
+      title: "Electrical Work",
+      type: "electricalWork" /* electricalWork */
+    },
+    {
+      id: 3,
+      title: "Plumbing",
+      type: "plumbing" /* plumbing */
+    },
+    {
+      id: 4,
+      title: "Masonry",
+      type: "masonry" /* masonry */
+    },
+    {
+      id: 5,
+      title: "HVAC",
+      type: "HVAC" /* HVAC */
+    }
+  ],
+  ["mechanics" /* Mechanics */]: [
+    {
+      id: 1,
+      title: "Automotive Repair",
+      type: "automotiveRepair" /* automotiveRepair */
+    },
+    {
+      id: 2,
+      title: "Diesel Engine Repair",
+      type: "dieselEngineRepair" /* dieselEngineRepair */
+    },
+    {
+      id: 3,
+      title: "Small Engine Repair",
+      type: "smallEngineRepair" /* smallEngineRepair */
+    },
+    {
+      id: 4,
+      title: "Aircraft Maintenance",
+      type: "aircraftMaintenance" /* aircraftMaintenance */
+    },
+    {
+      id: 5,
+      title: "Heavy Equipment Operation",
+      type: "heavyEquipmentOperation" /* heavyEquipmentOperation */
+    }
+  ],
+  ["manufacturing" /* Manufacturing */]: [
+    {
+      id: 1,
+      title: "Welding",
+      type: "welding" /* welding */
+    },
+    {
+      id: 2,
+      title: "Machining",
+      type: "machining" /* machining */
+    },
+    {
+      id: 3,
+      title: "Assembly",
+      type: "assembly" /* assembly */
+    },
+    {
+      id: 4,
+      title: "Fabrication",
+      type: "fabrication" /* fabrication */
+    },
+    {
+      id: 5,
+      title: "Quality Assurance",
+      type: "qualityAssurance" /* qualityAssurance */
+    }
+  ],
+  ["cosmetology" /* Cosmetology */]: [
+    {
+      id: 1,
+      title: "Hairstyling",
+      type: "hairstyling" /* hairstyling */
+    },
+    {
+      id: 2,
+      title: "Barbering",
+      type: "barbering" /* barbering */
+    },
+    {
+      id: 3,
+      title: "Nail Technology",
+      type: "nailTechnology" /* nailTechnology */
+    },
+    {
+      id: 4,
+      title: "Makeup Artistry",
+      type: "makeupArtistry" /* makeupArtistry */
+    },
+    {
+      id: 5,
+      title: "Esthetics",
+      type: "esthetics" /* esthetics */
+    }
+  ],
+  ["culinaryArts" /* CulinaryArts */]: [
+    {
+      id: 1,
+      title: "Cooking Techniques",
+      type: "cookingTechniques" /* cookingTechniques */
+    },
+    {
+      id: 2,
+      title: "Baking",
+      type: "baking" /* baking */
+    },
+    {
+      id: 3,
+      title: "Food Safety",
+      type: "foodSafety" /* foodSafety */
+    },
+    {
+      id: 4,
+      title: "Menu Planning",
+      type: "menuPlanning" /* menuPlanning */
+    },
+    {
+      id: 5,
+      title: "Restaurant Management",
+      type: "restaurantManagement" /* restaurantManagement */
+    }
+  ],
+  ["history" /* History */]: [
+    {
+      id: 1,
+      title: "Research Methods",
+      type: "researchMethods" /* researchMethods */
+    },
+    {
+      id: 2,
+      title: "Analysis of Primary Sources",
+      type: "analysisOfPrimarySources" /* analysisOfPrimarySources */
+    },
+    {
+      id: 3,
+      title: "Chronological Reasoning",
+      type: "chronologicalReasoning" /* chronologicalReasoning */
+    },
+    {
+      id: 4,
+      title: "Comparative History",
+      type: "comparativeHistory" /* comparativeHistory */
+    },
+    {
+      id: 5,
+      title: "Historiography",
+      type: "historiography" /* historiography */
+    }
+  ],
+  ["psychology" /* Psychology */]: [
+    {
+      id: 1,
+      title: "Cognitive Psychology",
+      type: "cognitivePsychology" /* cognitivePsychology */
+    },
+    {
+      id: 2,
+      title: "Developmental Psychology",
+      type: "developmentalPsychology" /* developmentalPsychology */
+    },
+    {
+      id: 3,
+      title: "Social Psychology",
+      type: "socialPsychology" /* socialPsychology */
+    },
+    {
+      id: 4,
+      title: "Experimental Methods",
+      type: "experimentalMethods" /* experimentalMethods */
+    },
+    {
+      id: 5,
+      title: "Clinical Psychology",
+      type: "clinicalPsychology" /* clinicalPsychology */
+    }
+  ],
+  ["sociology" /* Sociology */]: [
+    {
+      id: 1,
+      title: "Social Inequality",
+      type: "socialInequality" /* socialInequality */
+    },
+    {
+      id: 2,
+      title: "Social Institutions",
+      type: "socialInstitutions" /* socialInstitutions */
+    },
+    {
+      id: 3,
+      title: "Research Methods",
+      type: "researchMethods" /* researchMethods */
+    },
+    {
+      id: 4,
+      title: "Social Change",
+      type: "socialChange" /* socialChange */
+    },
+    {
+      id: 5,
+      title: "Social Movements",
+      type: "socialMovements" /* socialMovements */
+    }
+  ],
+  ["economics" /* Economics */]: [
+    {
+      id: 1,
+      title: "Microeconomics",
+      type: "microeconomics" /* microeconomics */
+    },
+    {
+      id: 2,
+      title: "Macroeconomics",
+      type: "macroeconomics" /* macroeconomics */
+    },
+    {
+      id: 3,
+      title: "Econometrics",
+      type: "econometrics" /* econometrics */
+    },
+    {
+      id: 4,
+      title: "Economic Policy",
+      type: "economicPolicy" /* economicPolicy */
+    },
+    {
+      id: 5,
+      title: "International Economics",
+      type: "internationalEconomics" /* internationalEconomics */
+    }
+  ],
+  ["politicalScience" /* PoliticalScience */]: [
+    {
+      id: 1,
+      title: "Government Systems",
+      type: "governmentSystems" /* governmentSystems */
+    },
+    {
+      id: 2,
+      title: "Political Theory",
+      type: "politicalTheory" /* politicalTheory */
+    },
+    {
+      id: 3,
+      title: "International Relations",
+      type: "internationalRelations" /* internationalRelations */
+    },
+    {
+      id: 4,
+      title: "Comparative Politics",
+      type: "comparativePolitics" /* comparativePolitics */
+    },
+    {
+      id: 5,
+      title: "Public Policy",
+      type: "publicPolicy" /* publicPolicy */
+    }
+  ],
+  ["basicComputerSkills" /* BasicComputerSkills */]: [
+    {
+      id: 1,
+      title: "Typing",
+      type: "typing" /* typing */
+    },
+    {
+      id: 2,
+      title: "File Management",
+      type: "fileManagement" /* fileManagement */
+    },
+    {
+      id: 3,
+      title: "Internet Navigation",
+      type: "internetNavigation" /* internetNavigation */
+    },
+    {
+      id: 4,
+      title: "Email",
+      type: "email" /* email */
+    },
+    {
+      id: 5,
+      title: "Word Processing",
+      type: "wordProcessing" /* wordProcessing */
+    }
+  ],
+  ["informationLiteracy" /* InformationLiteracy */]: [
+    {
+      id: 1,
+      title: "Search Engine Proficiency",
+      type: "searchEngineProficiency" /* searchEngineProficiency */
+    },
+    {
+      id: 2,
+      title: "evaluating sources",
+      type: "evaluatingSources" /* evaluatingSources */
+    },
+    {
+      id: 3,
+      title: "Fact Checking",
+      type: "factChecking" /* factChecking */
+    },
+    {
+      id: 4,
+      title: "Critical Media Analysis",
+      type: "criticalMediaAnalysis" /* criticalMediaAnalysis */
+    },
+    {
+      id: 5,
+      title: "Understanding Bias",
+      type: "understandingBias" /* understandingBias */
+    }
+  ],
+  ["softwareProficiency" /* SoftwareProficiency */]: [
+    {
+      id: 1,
+      title: "Productivity Suites",
+      type: "productivitySuites" /* productivitySuites */
+    },
+    {
+      id: 2,
+      title: "Specialized Software",
+      type: "specializedSoftware" /* specializedSoftware */
+    },
+    {
+      id: 3,
+      title: "Design Software",
+      type: "designSoftware" /* designSoftware */
+    },
+    {
+      id: 4,
+      title: "Programming Basics",
+      type: "programmingBasics" /* programmingBasics */
+    },
+    {
+      id: 5,
+      title: "Data Visualization Tools",
+      type: "dataVisualizationTools" /* dataVisualizationTools */
+    }
+  ],
+  ["onlineCommunication" /* OnlineCommunication */]: [
+    {
+      id: 1,
+      title: "Netiquette",
+      type: "netiquette" /* netiquette */
+    },
+    {
+      id: 2,
+      title: "Effective Email and Messaging",
+      type: "effectiveEmailAndMessaging" /* effectiveEmailAndMessaging */
+    },
+    {
+      id: 3,
+      title: "Social Media Platforms",
+      type: "socialMediaPlatforms" /* socialMediaPlatforms */
+    },
+    {
+      id: 4,
+      title: "Video Conferencing",
+      type: "videoConferencing" /* videoConferencing */
+    },
+    {
+      id: 5,
+      title: "Collaboration Tools",
+      type: "collaborationTools" /* collaborationTools */
+    }
+  ],
+  ["cybersecurity" /* Cybersecurity */]: [
+    {
+      id: 1,
+      title: "Password Management",
+      type: "passwordManagement" /* passwordManagement */
+    },
+    {
+      id: 2,
+      title: "Phishing Awareness",
+      type: "phishingAwareness" /* phishingAwareness */
+    },
+    {
+      id: 3,
+      title: "Data Privacy",
+      type: "dataPrivacy" /* dataPrivacy */
+    },
+    {
+      id: 4,
+      title: "Safe Online Practices",
+      type: "safeOnlinePractices" /* safeOnlinePractices */
+    },
+    {
+      id: 5,
+      title: "Protecting Devices",
+      type: "protectingDevices" /* protectingDevices */
+    }
+  ],
+  ["clinicalSkills" /* ClinicalSkills */]: [
+    {
+      id: 1,
+      title: "Patient Assessment",
+      type: "patientAssessment" /* patientAssessment */
+    },
+    {
+      id: 2,
+      title: "Diagnostic Procedures",
+      type: "diagnosticProcedures" /* diagnosticProcedures */
+    },
+    {
+      id: 3,
+      title: "Medication Administration",
+      type: "medicationAdministration" /* medicationAdministration */
+    },
+    {
+      id: 4,
+      title: "Wound Care",
+      type: "woundCare" /* woundCare */
+    },
+    {
+      id: 5,
+      title: "Basic Life Support",
+      type: "basicLifeSupport" /* basicLifeSupport */
+    }
+  ],
+  ["anatomyAndPhysiology" /* AnatomyAndPhysiology */]: [
+    {
+      id: 1,
+      title: "Body Systems",
+      type: "bodySystems" /* bodySystems */
+    },
+    {
+      id: 2,
+      title: "Medical Terminology",
+      type: "medicalTerminology" /* medicalTerminology */
+    },
+    {
+      id: 3,
+      title: "Disease Processes",
+      type: "diseaseProcesses" /* diseaseProcesses */
+    },
+    {
+      id: 4,
+      title: "Pharmacology",
+      type: "pharmacology" /* pharmacology */
+    },
+    {
+      id: 5,
+      title: "Pathophysiology",
+      type: "pathophysiology" /* pathophysiology */
+    }
+  ],
+  ["patientCare" /* PatientCare */]: [
+    {
+      id: 1,
+      title: "Bedside Manner",
+      type: "bedsideManner" /* bedsideManner */
+    },
+    {
+      id: 2,
+      title: "Empathy",
+      type: "empathy" /* empathy */
+    },
+    {
+      id: 3,
+      title: "Communication",
+      type: "communication" /* communication */
+    },
+    {
+      id: 4,
+      title: "Cultural Sensitivity",
+      type: "culturalSensitivity" /* culturalSensitivity */
+    },
+    {
+      id: 5,
+      title: "Ethics",
+      type: "ethics" /* ethics */
+    }
+  ],
+  ["medicalSpecialties" /* MedicalSpecialties */]: [
+    {
+      id: 1,
+      title: "Surgery",
+      type: "surgery" /* surgery */
+    },
+    {
+      id: 2,
+      title: "Emergency Medicine",
+      type: "emergencyMedicine" /* emergencyMedicine */
+    },
+    {
+      id: 3,
+      title: "Pediatrics",
+      type: "pediatrics" /* pediatrics */
+    },
+    {
+      id: 4,
+      title: "Radiology",
+      type: "radiology" /* radiology */
+    },
+    {
+      id: 5,
+      title: "Diagnostic Reasoning",
+      type: "diagnosticReasoning" /* diagnosticReasoning */
+    },
+    {
+      id: 6,
+      title: "Treatment Planning",
+      type: "treatmentPlanning" /* treatmentPlanning */
+    },
+    {
+      id: 7,
+      title: "Interdisciplinary Collaboration",
+      type: "interdisciplinaryCollaboration" /* interdisciplinaryCollaboration */
+    }
+  ],
+  ["healthcareAdministration" /* HealthcareAdministration */]: [
+    {
+      id: 1,
+      title: "Insurance and Billing",
+      type: "insuranceAndBilling" /* insuranceAndBilling */
+    },
+    {
+      id: 2,
+      title: "Medical Records",
+      type: "medicalRecords" /* medicalRecords */
+    },
+    {
+      id: 3,
+      title: "Patient Scheduling",
+      type: "patientScheduling" /* patientScheduling */
+    },
+    {
+      id: 4,
+      title: "Regulatory Compliance",
+      type: "regulatoryCompliance" /* regulatoryCompliance */
+    },
+    {
+      id: 5,
+      title: "Facility Management",
+      type: "facilityManagement" /* facilityManagement */
+    }
+  ]
+};
+
+const TopLevelSkill = ({ skillSelected, skill, handleExpandSubSkills }) => {
+  var _a, _b;
+  const { title, IconComponent, type, category } = skill;
+  const _category = boostCMSSKillCategories.find((c) => c.type === category);
+  const subSkills = (_a = skillSelected.subskills) != null ? _a : [];
+  const subSkillsCount = (_b = skillSelected.subskills.length) != null ? _b : 0;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `flex items-center justify-between w-full mb-4 bg-violet-100 rounded-[20px]`
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center justify-start w-[80%] px-[6px] py-[10px] overflow-hidden"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "rounded-full h-[50px] w-[50px]"
+  }, /* @__PURE__ */ React.createElement("img", {
+    src: IconComponent,
+    alt: "skill icon",
+    className: "w-full h-full"
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col items-start justify-center ml-2"
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "font-poppins text-left text-violet-800 font-semibold text-xs"
+  }, _category == null ? void 0 : _category.title), /* @__PURE__ */ React.createElement("p", {
+    className: "text-black font-poppins text-left text-base font-normal"
+  }, title))), (subSkills == null ? void 0 : subSkills.length) > 0 && /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center justify-center rounded-full bg-white mr-4 h-[40px] w-[40px]"
+  }, /* @__PURE__ */ React.createElement("button", {
+    onClick: () => {
+      handleExpandSubSkills == null ? void 0 : handleExpandSubSkills();
+    },
+    className: "text-black font-bold flex items-center justify-center text-center font-poppins"
+  }, "+", subSkillsCount)));
+};
+
+const Subskill = ({ subskillSelected, skill, subSkill }) => {
+  const { title, IconComponent, type, category } = skill;
+  const _category = boostCMSSKillCategories.find((c) => c.type === category);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center justify-between w-full mb-4  bg-violet-100 rounded-[20px]"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center justify-start w-[80%] px-[6px] py-[10px] overflow-hidden"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "rounded-full h-[50px] w-[50px]"
+  }, /* @__PURE__ */ React.createElement("img", {
+    src: IconComponent,
+    alt: "skill icon",
+    className: "w-full h-full"
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col items-start justify-center ml-2"
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "font-poppins text-left text-violet-800 font-semibold text-xs"
+  }, _category == null ? void 0 : _category.title, " / ", skill == null ? void 0 : skill.title), /* @__PURE__ */ React.createElement("p", {
+    className: "text-black font-poppins text-left text-base font-normal"
+  }, subSkill == null ? void 0 : subSkill.title))));
+};
+
+const SelectedSkills = ({ skill, skillSelected }) => {
+  const [expandSubSkills, setExandSubSkills] = useState(false);
+  const handleExpandSubSkills = () => setExandSubSkills(!expandSubSkills);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TopLevelSkill, {
+    skill,
+    skillSelected,
+    handleExpandSubSkills
+  }), skillSelected && skillSelected.subskills.length > 0 && expandSubSkills && /* @__PURE__ */ React.createElement("div", {
+    className: "w-full flex items-center justify-end"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "w-[90%] flex items-center flex-col"
+  }, skillSelected.subskills.map((subSkill, i) => {
+    var _a;
+    const subskillSelected = (_a = skillSelected == null ? void 0 : skillSelected.subskills) == null ? void 0 : _a.includes(subSkill);
+    const _subSkill = SKILLS_TO_SUBSKILLS[skill.type].find((ss) => ss.type === subSkill);
+    return /* @__PURE__ */ React.createElement(Subskill, {
+      key: i,
+      skill,
+      subSkill: _subSkill,
+      subskillSelected
+    });
+  }))));
+};
+
+const SkillsBox = ({ skills }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center justify-start"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1"
+  }, /* @__PURE__ */ React.createElement(PuzzlePiece, {
+    className: "text-white",
+    fill: "#fff"
+  })), " ", /* @__PURE__ */ React.createElement("h3", {
+    className: "text-[20px] leading-[20px] text-grayscale-900 ml-2"
+  }, "Skills")), skills.length > 0 && /* @__PURE__ */ React.createElement("div", {
+    className: "ion-padding pt-0 pb-4 flex items-center justify-center flex-col w-full"
+  }, skills.map((_skill, index) => {
+    boostCMSSKillCategories.find((c) => c.type === _skill.category);
+    const skill = CATEGORY_TO_SKILLS[_skill.category].find((s) => s.type === _skill.skill);
+    SKILLS_TO_SUBSKILLS[_skill.skill];
+    const selectedSkills = skills != null ? skills : [];
+    const skillSelected = selectedSkills.find((s) => s.skill === skill.type);
+    return /* @__PURE__ */ React.createElement(SelectedSkills, {
+      key: index,
+      skill,
+      skillSelected
+    });
+  })));
+};
+
+const TruncateTextBox = ({
+  headerText,
+  headerClassName = "",
+  text,
+  truncateThreshold = 132,
+  children,
+  className = "truncate-text-box"
+}) => {
+  const needsTruncate = (text == null ? void 0 : text.length) > truncateThreshold;
+  const [showFullText, setShowFullText] = useState(false);
+  const truncated = needsTruncate && !showFullText;
+  const displayText = truncated ? text.substring(0, truncateThreshold) : text;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `${className} bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full"`
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: `${headerClassName} text-[20px] leading-[20px] text-grayscale-900`
+  }, headerText), /* @__PURE__ */ React.createElement("p", {
+    className: "text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] mb-0"
+  }, displayText, truncated && /* @__PURE__ */ React.createElement(React.Fragment, null, "...", " ", /* @__PURE__ */ React.createElement("button", {
+    className: "text-indigo-500 font-[700]",
+    onClick: () => setShowFullText(true)
+  }, "More")), needsTruncate && showFullText && /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement("button", {
+    className: "text-indigo-500 font-[700]",
+    onClick: () => setShowFullText(false)
+  }, "Close"))), children);
+};
+
+const VerificationRow = ({ verification }) => {
+  var _a, _b;
+  const [showInfo, setShowInfo] = useState(false);
+  const statusColor = getColorForVerificationStatus(verification.status);
+  const getIcon = () => {
+    switch (verification.status) {
+      case VerificationStatusEnum.Success:
+        return /* @__PURE__ */ React.createElement(AcuteCheckmark, null);
+      case VerificationStatusEnum.Error:
+        return /* @__PURE__ */ React.createElement(ExclamationPoint, null);
+      case VerificationStatusEnum.Failed:
+        return /* @__PURE__ */ React.createElement(X, null);
+    }
+  };
+  let primaryText = verification.check ? `${verification.check}: ${verification.message}` : verification.message;
+  if (verification.status === VerificationStatusEnum.Failed) {
+    primaryText = (_b = (_a = verification.message) != null ? _a : verification.details) != null ? _b : "";
+  }
+  primaryText = capitalize(primaryText);
+  const infoText = "";
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "font-[700] text-[11px] leading-[16px] uppercase flex items-center gap-[3px] select-none",
+    style: { color: statusColor }
+  }, getIcon(), verification.status, infoText ), showInfo && infoText && /* @__PURE__ */ React.createElement(InfoBox, {
+    text: infoText,
+    handleClose: () => setShowInfo(false),
+    backgroundColor: statusColor
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "font-[400] text-[14px] leading-[21px] text-grayscale-900"
+  }, primaryText));
+};
+
+const VerificationsBox = ({ verificationItems }) => {
+  const [showInfo, setShowInfo] = useState(false);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "verifications-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative"
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "text-[20px] leading-[20px] text-grayscale-900"
+  }, "Credential Verifications"), /* @__PURE__ */ React.createElement("button", {
+    className: "absolute top-[17px] right-[17px]",
+    onClick: () => setShowInfo(!showInfo)
+  }, /* @__PURE__ */ React.createElement(InfoIcon, {
+    color: showInfo ? "#6366F1" : void 0
+  })), showInfo && /* @__PURE__ */ React.createElement(InfoBox, {
+    text: "Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy.",
+    handleClose: () => setShowInfo(false)
+  }), verificationItems.map((verification, index) => /* @__PURE__ */ React.createElement(VerificationRow, {
+    key: index,
+    verification
+  })));
+};
+
+const VC2BackFace = ({
+  credential,
+  verificationItems,
+  getFileMetadata,
+  getVideoMetadata,
+  onMediaAttachmentClick,
+  issueHistory,
+  showBackButton,
+  showFrontFace,
+  customDescription,
+  customCriteria,
+  customSkillsComponent,
+  customIssueHistoryComponent,
+  enableLightbox
+}) => {
+  var _a, _b, _c, _d;
+  const expiration = credential.expirationDate ? format(new Date(credential.expirationDate), "MMM dd, yyyy") : void 0;
+  const isExpired = credential.expirationDate && Number(new Date(credential.expirationDate)) < Number(new Date());
+  const achievement = "achievement" in credential.credentialSubject ? credential.credentialSubject.achievement : void 0;
+  const criteria = (_a = achievement == null ? void 0 : achievement.criteria) == null ? void 0 : _a.narrative;
+  const description = achievement == null ? void 0 : achievement.description;
+  return /* @__PURE__ */ React.createElement("section", {
+    className: "vc-back-face flex flex-col gap-[20px] w-full px-[15px]"
+  }, showBackButton && /* @__PURE__ */ React.createElement("div", {
+    className: "w-full"
+  }, /* @__PURE__ */ React.createElement("button", {
+    className: "vc-card-back-button rounded-full h-[50px] px-[15px] flex items-center justify-center gap-[5px] z-50 text-[30px] text-white select-none",
+    onClick: showFrontFace
+  }, /* @__PURE__ */ React.createElement(LeftArrow, {
+    className: "text-white",
+    size: "25"
+  }), "Details")), customDescription && /* @__PURE__ */ React.createElement(TruncateTextBox, {
+    headerText: "About",
+    text: description,
+    className: "description-box"
+  }, customDescription), !customDescription && (description || expiration) && /* @__PURE__ */ React.createElement(TruncateTextBox, {
+    headerText: "About",
+    text: description,
+    className: "description-box"
+  }, expiration && /* @__PURE__ */ React.createElement("p", {
+    className: "text-grayscale-800 font-poppins font-[600] text-[12px] leading-[18px] mb-0"
+  }, "Expire", isExpired ? "d" : "s", " on ", expiration)), customCriteria && /* @__PURE__ */ React.createElement(TruncateTextBox, {
+    headerText: "Criteria",
+    text: description,
+    className: "description-box"
+  }, customCriteria), !customCriteria && criteria && /* @__PURE__ */ React.createElement(TruncateTextBox, {
+    headerText: "Criteria",
+    text: criteria,
+    className: "criteria-box"
+  }), ((_c = (_b = credential.skills) == null ? void 0 : _b.length) != null ? _c : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React.createElement(SkillsBox, {
+    skills: (_d = credential.skills) != null ? _d : []
+  })), issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 0 && /* @__PURE__ */ React.createElement(IssueHistoryBox, {
+    issueHistory,
+    customIssueHistoryComponent
+  }), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React.createElement(MediaAttachmentsBox, {
+    attachments: credential.attachments,
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    enableLightbox
+  }), verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React.createElement(VerificationsBox, {
+    verificationItems
+  }));
+};
+
+const VC2FrontFaceInfo = ({
+  issuee,
+  issuer,
+  subjectDID,
+  subjectImageComponent,
+  issuerImageComponent,
+  customBodyCardComponent,
+  createdAt,
+  imageUrl,
+  customThumbComponent
+}) => {
+  const issuerName = truncateWithEllipsis(getNameFromProfile(issuer != null ? issuer : ""), 25);
+  const issueeName = truncateWithEllipsis(getNameFromProfile(issuee != null ? issuee : ""), 25);
+  const issuerImage = getImageFromProfile(issuer != null ? issuer : "");
+  const issueeImage = getImageFromProfile(issuee != null ? issuee : "");
+  const getImageElement = (imageUrl2, alt, overrideComponent) => {
+    if (overrideComponent)
+      return overrideComponent;
+    return /* @__PURE__ */ React.createElement("img", {
+      className: "h-full w-full object-cover select-none",
+      src: imageUrl2 || DefaultFace,
+      alt
+    });
+  };
+  const issueeImageEl = getImageElement(issueeImage, "Issuee image", subjectImageComponent);
+  const issuerImageEl = getImageElement(issuerImage, "Issuer image", issuerImageComponent);
+  return /* @__PURE__ */ React.createElement("section", {
+    className: "vc-front-face w-full px-[15px] flex flex-col items-center gap-[15px]"
+  }, imageUrl && !customThumbComponent && /* @__PURE__ */ React.createElement("img", {
+    className: "vc-front-image h-[130px] w-[130px] rounded-[10px]",
+    src: imageUrl
+  }), customThumbComponent && customThumbComponent, /* @__PURE__ */ React.createElement("div", {
+    className: "vc-issue-info-box bg-white flex flex-col items-center gap-[5px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full"
+  }, customBodyCardComponent && customBodyCardComponent, !customBodyCardComponent && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", {
+    className: "text-[27px] flex flex-col text-center leading-[130%] text-grayscale-900 capitalize"
+  }, issueeName, subjectDID && /* @__PURE__ */ React.createElement("span", {
+    className: "text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] m-0 p-0 normal-case"
+  }, subjectDID)), /* @__PURE__ */ React.createElement("div", {
+    className: "relative"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "vc-issuee-image h-[60px] w-[60px] rounded-full overflow-hidden"
+  }, issueeImageEl), /* @__PURE__ */ React.createElement("div", {
+    className: "vc-issuer-image h-[30px] w-[30px] rounded-full overflow-hidden absolute bottom-[-12px] right-[-12px]"
+  }, issuerImageEl)), /* @__PURE__ */ React.createElement("div", {
+    className: "vc-issue-details mt-[10px] flex flex-col items-center font-montserrat text-[14px] leading-[20px]"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "created-at text-grayscale-700"
+  }, createdAt), /* @__PURE__ */ React.createElement("span", {
+    className: "issued-by text-grayscale-900 font-[500]"
+  }, "by ", /* @__PURE__ */ React.createElement("strong", {
+    className: "font-[700]"
+  }, issuerName))))));
+};
+
+const VCDisplayCardCategoryType = ({
+  categoryType = LCCategoryEnum.achievement
+}) => {
+  const categoryColor = getCategoryColor(categoryType);
+  return /* @__PURE__ */ React.createElement("span", {
+    className: `uppercase font-poppins text-[12px] font-[600] leading-[12px] select-none text-${categoryColor}`
+  }, categoryType);
+};
+
+const VCDisplayCardSkillsCount = ({ skills }) => {
+  const skillsCount = getTotalCountOfSkills(skills);
+  if (skillsCount === 0)
+    return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  const text = skillsCount === 1 ? "Skill" : "Skills";
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center justify-center mt-8"
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold"
+  }, "+", skillsCount, " ", text, " ", /* @__PURE__ */ React.createElement("div", {
+    className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1"
+  }, /* @__PURE__ */ React.createElement(PuzzlePiece, {
+    className: "text-white",
+    fill: "#fff"
+  }))));
+};
+
+const VCDisplayCard2 = ({
+  categoryType,
+  credential,
+  verificationItems,
+  issueeOverride,
+  issuerOverride,
+  subjectDID,
+  subjectImageComponent,
+  issuerImageComponent,
+  verificationInProgress = false,
+  handleXClick,
+  getFileMetadata,
+  getVideoMetadata,
+  onMediaAttachmentClick,
+  bottomRightIcon,
+  customFooterComponent,
+  customBodyCardComponent,
+  customThumbComponent,
+  customCriteria,
+  customDescription,
+  customIssueHistoryComponent,
+  issueHistory,
+  titleOverride,
+  showBackButton = true,
+  enableLightbox,
+  customRibbonCategoryComponent,
+  customFrontButton,
+  trustedAppRegistry,
+  hideIssueDate,
+  onDotsClick
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  console.log("credential", credential);
+  const {
+    title = "",
+    createdAt,
+    issuer: _issuer = "",
+    issuee: _issuee = "",
+    imageUrl
+  } = getInfoFromCredential(credential, "MMM dd, yyyy");
+  const issuee = issueeOverride || _issuee;
+  const issuer = issuerOverride || _issuer;
+  const [isFront, setIsFront] = useState(true);
+  const [headerHeight, setHeaderHeight] = useState(100);
+  const [headerWidth, setHeaderWidth] = useState(0);
+  const headerRef = useRef(null);
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      var _a2, _b2, _c2, _d2;
+      setHeaderHeight((_b2 = (_a2 = headerRef.current) == null ? void 0 : _a2.clientHeight) != null ? _b2 : 100);
+      setHeaderWidth((_d2 = (_c2 = headerRef.current) == null ? void 0 : _c2.clientWidth) != null ? _d2 : 0);
+    }, 10);
+  });
+  let worstVerificationStatus = verificationItems.reduce((currentWorst, verification) => {
+    switch (currentWorst) {
+      case VerificationStatusEnum.Success:
+        return verification.status;
+      case VerificationStatusEnum.Error:
+        return verification.status === VerificationStatusEnum.Failed ? verification.status : currentWorst;
+      case VerificationStatusEnum.Failed:
+        return currentWorst;
+    }
+  }, VerificationStatusEnum.Success);
+  const statusColor = getColorForVerificationStatus(worstVerificationStatus);
+  const backgroundStyle = {
+    backgroundColor: (_a = credential == null ? void 0 : credential.display) == null ? void 0 : _a.backgroundColor,
+    backgroundImage: ((_b = credential == null ? void 0 : credential.display) == null ? void 0 : _b.backgroundImage) ? `linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25)), url(${(_c = credential.display) == null ? void 0 : _c.backgroundImage})` : void 0,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundAttachment: "fixed"
+  };
+  const _title = titleOverride || title;
+  if (((_d = credential == null ? void 0 : credential.display) == null ? void 0 : _d.displayType) === "certificate") {
+    return /* @__PURE__ */ React.createElement(CertificateDisplayCard, {
+      credential,
+      categoryType,
+      issueeOverride: issuee,
+      issuerOverride: issuer,
+      verificationItems,
+      getFileMetadata,
+      getVideoMetadata,
+      onMediaAttachmentClick,
+      enableLightbox,
+      trustedAppRegistry,
+      handleXClick,
+      subjectImageComponent,
+      issuerImageComponent,
+      customBodyCardComponent,
+      hideIssueDate,
+      onDotsClick
+    });
+  }
+  return /* @__PURE__ */ React.createElement(h, {
+    className: "w-full",
+    flipKey: isFront
+  }, /* @__PURE__ */ React.createElement(y, {
+    flipId: "card"
+  }, /* @__PURE__ */ React.createElement("section", {
+    className: "vc-display-card font-mouse flex flex-col items-center border-solid border-[5px] border-white rounded-[30px] overflow-visible z-10 min-h-[800px] max-w-[400px] relative bg-white shadow-3xl"
+  }, /* @__PURE__ */ React.createElement(RibbonEnd, {
+    side: "left",
+    className: "absolute left-[-30px] top-[50px] z-0",
+    height: "100"
+  }), /* @__PURE__ */ React.createElement(RibbonEnd, {
+    side: "right",
+    className: "absolute right-[-30px] top-[50px] z-0",
+    height: "100"
+  }), /* @__PURE__ */ React.createElement("h1", {
+    ref: headerRef,
+    className: "vc-card-header px-[20px] pb-[10px] pt-[3px] overflow-visible mt-[40px] absolute text-center bg-white border-y-[5px] border-[#EEF2FF] shadow-bottom w-[calc(100%_+_16px)] rounded-t-[8px] z-50",
+    style: { wordBreak: "break-word" }
+  }, customRibbonCategoryComponent && customRibbonCategoryComponent, !customRibbonCategoryComponent && /* @__PURE__ */ React.createElement(VCDisplayCardCategoryType, {
+    categoryType
+  }), /* @__PURE__ */ React.createElement(FitText, {
+    text: _title != null ? _title : "",
+    maxFontSize: 32,
+    minFontSize: 20,
+    width: ((headerWidth != null ? headerWidth : 290) - 40).toString(),
+    className: "vc-card-header-main-title text-[#18224E] leading-[100%] text-shadow text-[32px]"
+  })), isFront && handleXClick && /* @__PURE__ */ React.createElement("button", {
+    className: "vc-card-x-button absolute top-[-25px] bg-white rounded-full h-[50px] w-[50px] flex items-center justify-center z-50",
+    onClick: handleXClick
+  }, /* @__PURE__ */ React.createElement(RoundedX, null)), /* @__PURE__ */ React.createElement("div", {
+    className: "relative pt-[114px] vc-card-content-container flex flex-col items-center grow basis-0 min-h-0 h-full w-full rounded-t-[30px] bg-[#353E64] rounded-b-[200px]",
+    style: backgroundStyle
+  }, /* @__PURE__ */ React.createElement(y, {
+    flipId: "scroll-container"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "vc-card-content-scroll-container w-full pt-[20px] min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[200px] overflow-y-auto scrollbar-hide pb-[50px]"
+  }, isFront && /* @__PURE__ */ React.createElement(y, {
+    flipId: "face"
+  }, /* @__PURE__ */ React.createElement(VC2FrontFaceInfo, {
+    issuee,
+    subjectDID,
+    issuer,
+    title,
+    subjectImageComponent,
+    issuerImageComponent,
+    customBodyCardComponent,
+    customThumbComponent,
+    createdAt: createdAt != null ? createdAt : "",
+    imageUrl
+  })), !isFront && /* @__PURE__ */ React.createElement(y, {
+    flipId: "face"
+  }, /* @__PURE__ */ React.createElement(VC2BackFace, {
+    credential,
+    verificationItems,
+    issueHistory,
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    showBackButton,
+    showFrontFace: () => setIsFront(true),
+    customDescription,
+    customCriteria,
+    customIssueHistoryComponent,
+    enableLightbox
+  })), /* @__PURE__ */ React.createElement(VCDisplayCardSkillsCount, {
+    skills: credential == null ? void 0 : credential.skills
+  }), isFront && customFrontButton, isFront && !customFrontButton && /* @__PURE__ */ React.createElement(y, {
+    flipId: "details-back-button"
+  }, /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[40px] w-fit select-none",
+    onClick: () => setIsFront(!isFront)
+  }, "Details")), !isFront && /* @__PURE__ */ React.createElement(y, {
+    flipId: "details-back-button"
+  }, /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[40px] w-fit select-none",
+    onClick: () => setIsFront(!isFront)
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "flex gap-[10px] items-center"
+  }, /* @__PURE__ */ React.createElement(LeftArrow, null), "Back")))))), /* @__PURE__ */ React.createElement("footer", {
+    className: "vc-card-footer w-full flex justify-between p-[5px] mt-[5px]"
+  }, customFooterComponent && customFooterComponent, !customFooterComponent && /* @__PURE__ */ React.createElement(React.Fragment, null, worstVerificationStatus === VerificationStatusEnum.Failed ? /* @__PURE__ */ React.createElement("div", {
+    className: "w-[40px]",
+    role: "presentation"
+  }) : /* @__PURE__ */ React.createElement(VCVerificationCheckWithSpinner, {
+    spinnerSize: "40px",
+    size: "32px",
+    loading: verificationInProgress
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "vc-footer-text font-montserrat flex flex-col items-center justify-center text-[12px] font-[700] leading-[15px] select-none"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "text-[#4F4F4F]"
+  }, "Verified Credential"), /* @__PURE__ */ React.createElement("span", {
+    className: "vc-footer-status uppercase",
+    style: { color: statusColor }
+  }, worstVerificationStatus)), /* @__PURE__ */ React.createElement("div", {
+    className: "vc-footer-icon rounded-[20px] h-[40px] w-[40px] flex items-center justify-center overflow-hidden",
+    style: { backgroundColor: (_e = bottomRightIcon == null ? void 0 : bottomRightIcon.color) != null ? _e : "#6366F1" }
+  }, (_f = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _f : /* @__PURE__ */ React.createElement(AwardRibbon, null)))))));
+};
+
+export { SelectedSkills as S, VCDisplayCard2 as V, VCDisplayCardSkillsCount as a };
+//# sourceMappingURL=VCDisplayCard2-0b6776f9.js.map