@learncard/react 2.6.58 → 2.6.60

package/dist/esm/{CertificateDisplayCard-565f4c4c.js → CertificateDisplayCard-dcebf9a7.js}

@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import { g as getColorForVerificationStatus, a as getInfoFromCredential, b as getCategoryDarkColor, c as getCategoryLightColor, d as getCategoryIcon, e as getTotalCountOfSkills, f as getNameFromProfile, h as getImageFromProfile } from './credential.helpers-96c9bb51.js';
+import { g as getColorForVerificationStatus, a as getInfoFromCredential, b as getCategoryDarkColor, c as getCategoryLightColor, d as getCategoryIcon, e as getTotalCountOfSkills, f as categorizeSkills, h as getNameFromProfile, i as getImageFromProfile } from './credential.helpers-cf70a857.js';
 import './default-face.jpeg';
 import 'react-dom';
-import './athletics.svg';
-import './business.svg';
-import './creative.svg';
-import './digital.svg';
-import './durable.svg';
-import './medical.svg';
-import './social.svg';
-import './stem.svg';
-import './trade.svg';
+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 { a as VerificationStatusEnum } from './VCVerificationPill-1a8e55d1.js';
 import './index.es-76d64136.js';
 import './vc.check.svg';
@@ -803,16 +803,1865 @@ const MediaAttachmentsBox = ({
   })));
 };
 
+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-[90%] 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-[95%] 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 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: "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 CertificateBackFace = ({
   credential,
   categoryType,
   verificationItems,
+  customSkillsComponent,
   getFileMetadata,
   getVideoMetadata,
   onMediaAttachmentClick,
   enableLightbox
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f;
   const { createdAt, credentialSubject } = getInfoFromCredential(credential, "MMM dd, yyyy", {
     uppercaseDate: false
   });
@@ -837,7 +2686,9 @@ const CertificateBackFace = ({
   }, "Awarded on ", createdAt)), criteria && /* @__PURE__ */ React.createElement(TruncateTextBox, {
     headerText: "Criteria",
     text: criteria
-  }), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React.createElement(MediaAttachmentsBox, {
+  }), ((_e = (_d = credential.skills) == null ? void 0 : _d.length) != null ? _e : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React.createElement(SkillsBox, {
+    skills: (_f = credential.skills) != null ? _f : []
+  })), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React.createElement(MediaAttachmentsBox, {
     attachments: credential.attachments,
     getFileMetadata,
     getVideoMetadata,
@@ -947,16 +2798,21 @@ const CertificateProfileImageDisplay = ({
   }));
 };
 
-const VCDisplayCardSkillsCount = ({ skills }) => {
+const VCDisplayCardSkillsCount = ({ skills, onClick }) => {
   const skillsCount = getTotalCountOfSkills(skills);
   if (skillsCount === 0)
     return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  const skillsMap = categorizeSkills(skills);
+  const totalSkills = Object.values(skillsMap).reduce((total2, category) => total2 + (category == null ? void 0 : category.length), 0);
+  const totalSubskills = Object.values(skillsMap).reduce((total2, category) => total2 + ((category == null ? void 0 : category.totalSubskillsCount) || 0), 0);
+  const total = totalSkills + totalSubskills;
   const text = skillsCount === 1 ? "Skill" : "Skills";
   return /* @__PURE__ */ React.createElement("div", {
-    className: "flex items-center justify-center mt-8"
+    className: "flex items-center justify-center mt-8 cursor-pointer",
+    onClick
   }, /* @__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", {
+  }, "+", total, " ", 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",
@@ -979,7 +2835,8 @@ const CertificateFrontFace = ({
   subjectImageComponent,
   issuerImageComponent,
   customBodyCardComponent,
-  hideIssueDate
+  hideIssueDate,
+  handleViewBackFace
 }) => {
   var _a, _b;
   const {
@@ -1067,7 +2924,8 @@ const CertificateFrontFace = ({
   }, description && /* @__PURE__ */ React.createElement("div", {
     className: "text-center text-grayscale-700 text-[12px] font-jacques line-clamp-4"
   }, description), /* @__PURE__ */ React.createElement(VCDisplayCardSkillsCount, {
-    skills: (_b = credential == null ? void 0 : credential.skills) != null ? _b : []
+    skills: (_b = credential == null ? void 0 : credential.skills) != null ? _b : [],
+    onClick: handleViewBackFace
   })), /* @__PURE__ */ React.createElement("div", {
     className: "flex flex-col gap-[5px] items-center w-full"
   }, /* @__PURE__ */ React.createElement("span", {
@@ -1115,6 +2973,7 @@ const CertificateDisplayCard = ({
   customBodyCardComponent,
   trustedAppRegistry,
   hideIssueDate,
+  customSkillsComponent,
   getFileMetadata,
   getVideoMetadata,
   onMediaAttachmentClick,
@@ -1124,7 +2983,7 @@ const CertificateDisplayCard = ({
 }) => {
   const [isFront, setIsFront] = useState(true);
   return /* @__PURE__ */ React.createElement("section", {
-    className: `w-full border-solid border-[5px] border-grayscale-200 rounded-[30px] relative min-w-[250px] max-w-[300px] ${isFront ? "bg-white p-[13px]" : ``}`
+    className: `w-full border-solid border-[5px] border-grayscale-200 rounded-[30px] relative min-w-[250px]  ${isFront ? "bg-white p-[13px] max-w-[300px]" : `max-w-[400px]`}`
   }, isFront && /* @__PURE__ */ React.createElement(CertificateFrontFace, {
     credential,
     categoryType,
@@ -1134,7 +2993,8 @@ const CertificateDisplayCard = ({
     subjectImageComponent,
     issuerImageComponent,
     customBodyCardComponent,
-    hideIssueDate
+    hideIssueDate,
+    handleViewBackFace: () => setIsFront(!isFront)
   }), !isFront && /* @__PURE__ */ React.createElement(CertificateBackFace, {
     credential,
     categoryType,
@@ -1168,5 +3028,5 @@ const CertificateDisplayCard = ({
   })));
 };
 
-export { AcuteCheckmark as A, CertificateDisplayCard as C, ExclamationPoint as E, GenericDocumentIcon as G, InfoIcon as I, LinkIcon as L, VCDisplayCardSkillsCount as V, X, VideoIcon as a, Camera as b, capitalize as c, getBaseUrl as g, prettyBytes as p, truncateWithEllipsis as t };
-//# sourceMappingURL=CertificateDisplayCard-565f4c4c.js.map
+export { AcuteCheckmark as A, CertificateDisplayCard as C, ExclamationPoint as E, GenericDocumentIcon as G, InfoIcon as I, LinkIcon as L, SelectedSkills as S, VCDisplayCardSkillsCount as V, X, VideoIcon as a, Camera as b, capitalize as c, SkillsBox as d, getBaseUrl as g, prettyBytes as p, truncateWithEllipsis as t };
+//# sourceMappingURL=CertificateDisplayCard-dcebf9a7.js.map