@learncard/react 2.6.57 → 2.6.59

package/dist/cjs/{CertificateDisplayCard-405573a7.js → CertificateDisplayCard-d93af598.js}

@@ -1,18 +1,18 @@
 'use strict';
 
 var React = require('react');
-var credential_helpers = require('./credential.helpers-f1087746.js');
+var credential_helpers = require('./credential.helpers-a3c3d503.js');
 require('./default-face.jpeg');
 require('react-dom');
-require('./athletics.svg');
-require('./business.svg');
-require('./creative.svg');
-require('./digital.svg');
-require('./durable.svg');
-require('./medical.svg');
-require('./social.svg');
-require('./stem.svg');
-require('./trade.svg');
+var Athletics = require('./athletics.svg');
+var Business = require('./business.svg');
+var Creative = require('./creative.svg');
+var Digital = require('./digital.svg');
+var Durable = require('./durable.svg');
+var Medical = require('./medical.svg');
+var Social = require('./social.svg');
+var Stem = require('./stem.svg');
+var Trade = require('./trade.svg');
 var VCVerificationPill = require('./VCVerificationPill-d0edd7ae.js');
 require('./index.es-f433af46.js');
 require('./vc.check.svg');
@@ -24,6 +24,15 @@ var Lightbox = require('./Lightbox-f19e13d2.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Athletics__default = /*#__PURE__*/_interopDefaultLegacy(Athletics);
+var Business__default = /*#__PURE__*/_interopDefaultLegacy(Business);
+var Creative__default = /*#__PURE__*/_interopDefaultLegacy(Creative);
+var Digital__default = /*#__PURE__*/_interopDefaultLegacy(Digital);
+var Durable__default = /*#__PURE__*/_interopDefaultLegacy(Durable);
+var Medical__default = /*#__PURE__*/_interopDefaultLegacy(Medical);
+var Social__default = /*#__PURE__*/_interopDefaultLegacy(Social);
+var Stem__default = /*#__PURE__*/_interopDefaultLegacy(Stem);
+var Trade__default = /*#__PURE__*/_interopDefaultLegacy(Trade);
 var ThreeDots__default = /*#__PURE__*/_interopDefaultLegacy(ThreeDots);
 
 const AcuteCheckmark = ({ className = "" }) => {
@@ -810,16 +819,1865 @@ const MediaAttachmentsBox = ({
   })));
 };
 
+const boostCMSSKillCategories = [
+  {
+    id: 1,
+    title: "Durable",
+    IconComponent: Durable__default["default"],
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "durable" /* Durable */
+  },
+  {
+    id: 2,
+    title: "Stem",
+    IconComponent: Stem__default["default"],
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "stem" /* Stem */
+  },
+  {
+    id: 3,
+    title: "Athletic",
+    IconComponent: Athletics__default["default"],
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "athletic" /* Athletic */
+  },
+  {
+    id: 4,
+    title: "Creative",
+    IconComponent: Creative__default["default"],
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "creative" /* Creative */
+  },
+  {
+    id: 5,
+    title: "Business",
+    IconComponent: Business__default["default"],
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "business" /* Business */
+  },
+  {
+    id: 6,
+    title: "Trade",
+    IconComponent: Trade__default["default"],
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "trade" /* Trade */
+  },
+  {
+    id: 7,
+    title: "Social",
+    IconComponent: Social__default["default"],
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "social" /* Social */
+  },
+  {
+    id: 8,
+    title: "Digital",
+    IconComponent: Digital__default["default"],
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "digital" /* Digital */
+  },
+  {
+    id: 9,
+    title: "Medical",
+    IconComponent: Medical__default["default"],
+    iconClassName: "text-white",
+    iconCircleClass: "bg-cyan-700",
+    type: "medical" /* Medical */
+  }
+];
+const CATEGORY_TO_SKILLS = {
+  ["durable" /* Durable */]: [
+    {
+      id: 1,
+      title: "Adaptability",
+      IconComponent: Durable__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "durable" /* Durable */,
+      type: "adaptability" /* Adaptability */
+    },
+    {
+      id: 2,
+      title: "Perseverance",
+      IconComponent: Durable__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "durable" /* Durable */,
+      type: "perseverance" /* Perseverance */
+    },
+    {
+      id: 3,
+      title: "Mental Toughness",
+      IconComponent: Durable__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "durable" /* Durable */,
+      type: "mentalToughness" /* MentalToughness */
+    },
+    {
+      id: 4,
+      title: "Physical Endurance",
+      IconComponent: Durable__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "durable" /* Durable */,
+      type: "physicalEndurance" /* PhysicalEndurance */
+    },
+    {
+      id: 5,
+      title: "Lifelong Learning",
+      IconComponent: Durable__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "durable" /* Durable */,
+      type: "lifelongLearning" /* LifelongLearning */
+    }
+  ],
+  ["stem" /* Stem */]: [
+    {
+      id: 1,
+      title: "Mathematics",
+      IconComponent: Stem__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "stem" /* Stem */,
+      type: "mathematics" /* Mathematics */
+    },
+    {
+      id: 2,
+      title: "Science",
+      IconComponent: Stem__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "stem" /* Stem */,
+      type: "science" /* Science */
+    },
+    {
+      id: 3,
+      title: "Technology",
+      IconComponent: Stem__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "stem" /* Stem */,
+      type: "technology" /* Technology */
+    },
+    {
+      id: 4,
+      title: "Engineering",
+      IconComponent: Stem__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "stem" /* Stem */,
+      type: "engineering" /* Engineering */
+    },
+    {
+      id: 5,
+      title: "Research",
+      IconComponent: Stem__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "stem" /* Stem */,
+      type: "research" /* Research */
+    }
+  ],
+  ["athletic" /* Athletic */]: [
+    {
+      id: 1,
+      title: "Sport specific skills",
+      IconComponent: Athletics__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "athletic" /* Athletic */,
+      type: "sportSpecificSkills" /* SportSpecificSkills */
+    },
+    {
+      id: 2,
+      title: "Strength and Conditioning",
+      IconComponent: Athletics__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "athletic" /* Athletic */,
+      type: "strengthAndConditioning" /* StrengthAndConditioning */
+    },
+    {
+      id: 3,
+      title: "Coordination",
+      IconComponent: Athletics__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "athletic" /* Athletic */,
+      type: "coordination" /* Coordination */
+    },
+    {
+      id: 4,
+      title: "Mental Focus",
+      IconComponent: Athletics__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "athletic" /* Athletic */,
+      type: "mentalFocus" /* MentalFocus */
+    },
+    {
+      id: 5,
+      title: "Team work",
+      IconComponent: Athletics__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "athletic" /* Athletic */,
+      type: "teamwork" /* Teamwork */
+    }
+  ],
+  ["creative" /* Creative */]: [
+    {
+      id: 1,
+      title: "Visual Arts",
+      IconComponent: Creative__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "creative" /* Creative */,
+      type: "visualArts" /* VisualArts */
+    },
+    {
+      id: 2,
+      title: "Performing Arts",
+      IconComponent: Creative__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "creative" /* Creative */,
+      type: "performingArts" /* PerformingArts */
+    },
+    {
+      id: 3,
+      title: "Writing",
+      IconComponent: Creative__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "creative" /* Creative */,
+      type: "writing" /* Writing */
+    },
+    {
+      id: 4,
+      title: "Design",
+      IconComponent: Creative__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "creative" /* Creative */,
+      type: "design" /* Design */
+    },
+    {
+      id: 5,
+      title: "Ideation",
+      IconComponent: Creative__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "creative" /* Creative */,
+      type: "ideation" /* Ideation */
+    }
+  ],
+  ["business" /* Business */]: [
+    {
+      id: 1,
+      title: "Management",
+      IconComponent: Business__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "business" /* Business */,
+      type: "management" /* Management */
+    },
+    {
+      id: 2,
+      title: "Finance",
+      IconComponent: Business__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "business" /* Business */,
+      type: "finance" /* Finance */
+    },
+    {
+      id: 3,
+      title: "Marketing",
+      IconComponent: Business__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "business" /* Business */,
+      type: "marketing" /* Marketing */
+    },
+    {
+      id: 4,
+      title: "Operations",
+      IconComponent: Business__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "business" /* Business */,
+      type: "operations" /* Operations */
+    },
+    {
+      id: 5,
+      title: "Entrepreneurship",
+      IconComponent: Business__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "business" /* Business */,
+      type: "entrepreneurship" /* Entrepreneurship */
+    }
+  ],
+  ["trade" /* Trade */]: [
+    {
+      id: 1,
+      title: "Construction",
+      IconComponent: Trade__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "trade" /* Trade */,
+      type: "construction" /* Construction */
+    },
+    {
+      id: 2,
+      title: "Mechanics",
+      IconComponent: Trade__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "trade" /* Trade */,
+      type: "mechanics" /* Mechanics */
+    },
+    {
+      id: 3,
+      title: "Manufacturing",
+      IconComponent: Trade__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "trade" /* Trade */,
+      type: "manufacturing" /* Manufacturing */
+    },
+    {
+      id: 4,
+      title: "Cosmetology",
+      IconComponent: Trade__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "trade" /* Trade */,
+      type: "cosmetology" /* Cosmetology */
+    },
+    {
+      id: 5,
+      title: "Culinary Arts",
+      IconComponent: Trade__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "trade" /* Trade */,
+      type: "culinaryArts" /* CulinaryArts */
+    }
+  ],
+  ["social" /* Social */]: [
+    {
+      id: 1,
+      title: "History",
+      IconComponent: Social__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "social" /* Social */,
+      type: "history" /* History */
+    },
+    {
+      id: 2,
+      title: "Psychology",
+      IconComponent: Social__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "social" /* Social */,
+      type: "psychology" /* Psychology */
+    },
+    {
+      id: 3,
+      title: "Sociology",
+      IconComponent: Social__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "social" /* Social */,
+      type: "sociology" /* Sociology */
+    },
+    {
+      id: 4,
+      title: "Economics",
+      IconComponent: Social__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "social" /* Social */,
+      type: "economics" /* Economics */
+    },
+    {
+      id: 5,
+      title: "Political Science",
+      IconComponent: Social__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "social" /* Social */,
+      type: "politicalScience" /* PoliticalScience */
+    }
+  ],
+  ["digital" /* Digital */]: [
+    {
+      id: 1,
+      title: "Basic Computer Skills",
+      IconComponent: Digital__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "digital" /* Digital */,
+      type: "basicComputerSkills" /* BasicComputerSkills */
+    },
+    {
+      id: 2,
+      title: "Information Literacy",
+      IconComponent: Digital__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "digital" /* Digital */,
+      type: "informationLiteracy" /* InformationLiteracy */
+    },
+    {
+      id: 3,
+      title: "Software Proficiency",
+      IconComponent: Digital__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "digital" /* Digital */,
+      type: "softwareProficiency" /* SoftwareProficiency */
+    },
+    {
+      id: 4,
+      title: "Online Communication",
+      IconComponent: Digital__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "digital" /* Digital */,
+      type: "onlineCommunication" /* OnlineCommunication */
+    },
+    {
+      id: 5,
+      title: "Cybersecurity",
+      IconComponent: Digital__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "digital" /* Digital */,
+      type: "cybersecurity" /* Cybersecurity */
+    }
+  ],
+  ["medical" /* Medical */]: [
+    {
+      id: 1,
+      title: "Clinical Skills",
+      IconComponent: Medical__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "medical" /* Medical */,
+      type: "clinicalSkills" /* ClinicalSkills */
+    },
+    {
+      id: 2,
+      title: "Anatomy and Physiology",
+      IconComponent: Medical__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "medical" /* Medical */,
+      type: "anatomyAndPhysiology" /* AnatomyAndPhysiology */
+    },
+    {
+      id: 3,
+      title: "Patient Care",
+      IconComponent: Medical__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "medical" /* Medical */,
+      type: "patientCare" /* PatientCare */
+    },
+    {
+      id: 4,
+      title: "Medical Specialties",
+      IconComponent: Medical__default["default"],
+      iconClassName: "text-white",
+      iconCircleClass: "bg-cyan-700",
+      category: "medical" /* Medical */,
+      type: "medicalSpecialties" /* MedicalSpecialties */
+    },
+    {
+      id: 5,
+      title: "Healthcare Administration",
+      IconComponent: Medical__default["default"],
+      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__default["default"].createElement("div", {
+    className: `flex items-center justify-between w-full mb-4 bg-violet-100 rounded-[20px]`
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex items-center justify-start w-[80%] px-[6px] py-[10px] overflow-hidden"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "rounded-full h-[50px] w-[50px]"
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: IconComponent,
+    alt: "skill icon",
+    className: "w-full h-full"
+  })), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex flex-col items-start justify-center ml-2"
+  }, /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "font-poppins text-left text-violet-800 font-semibold text-xs"
+  }, _category == null ? void 0 : _category.title), /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "text-black font-poppins text-left text-base font-normal"
+  }, title))), (subSkills == null ? void 0 : subSkills.length) > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex items-center justify-center rounded-full bg-white mr-4 h-[40px] w-[40px]"
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement("div", {
+    className: "flex items-center justify-between w-full mb-4  bg-violet-100 rounded-[20px]"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex items-center justify-start w-[80%] px-[6px] py-[10px] overflow-hidden"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "rounded-full h-[50px] w-[50px]"
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: IconComponent,
+    alt: "skill icon",
+    className: "w-full h-full"
+  })), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex flex-col items-start justify-center ml-2"
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].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] = React.useState(false);
+  const handleExpandSubSkills = () => setExandSubSkills(!expandSubSkills);
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(TopLevelSkill, {
+    skill,
+    skillSelected,
+    handleExpandSubSkills
+  }), skillSelected && skillSelected.subskills.length > 0 && expandSubSkills && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "w-full flex items-center justify-end"
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(Subskill, {
+      key: i,
+      skill,
+      subSkill: _subSkill,
+      subskillSelected
+    });
+  }))));
+};
+
+const SkillsBox = ({ skills }) => {
+  return /* @__PURE__ */ React__default["default"].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__default["default"].createElement("div", {
+    className: "flex items-center justify-start"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1"
+  }, /* @__PURE__ */ React__default["default"].createElement(types.PuzzlePiece, {
+    className: "text-white",
+    fill: "#fff"
+  })), " ", /* @__PURE__ */ React__default["default"].createElement("h3", {
+    className: "text-[20px] leading-[20px] text-grayscale-900 ml-2"
+  }, "Skills")), skills.length > 0 && /* @__PURE__ */ React__default["default"].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__default["default"].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 } = credential_helpers.getInfoFromCredential(credential, "MMM dd, yyyy", {
     uppercaseDate: false
   });
@@ -844,7 +2702,9 @@ const CertificateBackFace = ({
   }, "Awarded on ", createdAt)), criteria && /* @__PURE__ */ React__default["default"].createElement(TruncateTextBox, {
     headerText: "Criteria",
     text: criteria
-  }), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React__default["default"].createElement(MediaAttachmentsBox, {
+  }), ((_e = (_d = credential.skills) == null ? void 0 : _d.length) != null ? _e : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React__default["default"].createElement(SkillsBox, {
+    skills: (_f = credential.skills) != null ? _f : []
+  })), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React__default["default"].createElement(MediaAttachmentsBox, {
     attachments: credential.attachments,
     getFileMetadata,
     getVideoMetadata,
@@ -954,13 +2814,14 @@ const CertificateProfileImageDisplay = ({
   }));
 };
 
-const VCDisplayCardSkillsCount = ({ skills }) => {
+const VCDisplayCardSkillsCount = ({ skills, onClick }) => {
   const skillsCount = credential_helpers.getTotalCountOfSkills(skills);
   if (skillsCount === 0)
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null);
   const text = skillsCount === 1 ? "Skill" : "Skills";
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "flex items-center justify-center mt-8"
+    className: "flex items-center justify-center mt-8 cursor-pointer",
+    onClick
   }, /* @__PURE__ */ React__default["default"].createElement("p", {
     className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold"
   }, "+", skillsCount, " ", text, " ", /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -986,7 +2847,8 @@ const CertificateFrontFace = ({
   subjectImageComponent,
   issuerImageComponent,
   customBodyCardComponent,
-  hideIssueDate
+  hideIssueDate,
+  handleViewBackFace
 }) => {
   var _a, _b;
   const {
@@ -1074,7 +2936,8 @@ const CertificateFrontFace = ({
   }, description && /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "text-center text-grayscale-700 text-[12px] font-jacques line-clamp-4"
   }, description), /* @__PURE__ */ React__default["default"].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__default["default"].createElement("div", {
     className: "flex flex-col gap-[5px] items-center w-full"
   }, /* @__PURE__ */ React__default["default"].createElement("span", {
@@ -1122,6 +2985,7 @@ const CertificateDisplayCard = ({
   customBodyCardComponent,
   trustedAppRegistry,
   hideIssueDate,
+  customSkillsComponent,
   getFileMetadata,
   getVideoMetadata,
   onMediaAttachmentClick,
@@ -1141,7 +3005,8 @@ const CertificateDisplayCard = ({
     subjectImageComponent,
     issuerImageComponent,
     customBodyCardComponent,
-    hideIssueDate
+    hideIssueDate,
+    handleViewBackFace: () => setIsFront(!isFront)
   }), !isFront && /* @__PURE__ */ React__default["default"].createElement(CertificateBackFace, {
     credential,
     categoryType,
@@ -1182,6 +3047,8 @@ exports.ExclamationPoint = ExclamationPoint;
 exports.GenericDocumentIcon = GenericDocumentIcon;
 exports.InfoIcon = InfoIcon;
 exports.LinkIcon = LinkIcon;
+exports.SelectedSkills = SelectedSkills;
+exports.SkillsBox = SkillsBox;
 exports.VCDisplayCardSkillsCount = VCDisplayCardSkillsCount;
 exports.VideoIcon = VideoIcon;
 exports.X = X;
@@ -1189,4 +3056,4 @@ exports.capitalize = capitalize;
 exports.getBaseUrl = getBaseUrl;
 exports.prettyBytes = prettyBytes;
 exports.truncateWithEllipsis = truncateWithEllipsis;
-//# sourceMappingURL=CertificateDisplayCard-405573a7.js.map
+//# sourceMappingURL=CertificateDisplayCard-d93af598.js.map