@learncard/react 2.6.79 → 2.7.0

package/dist/esm/{VCDisplayCard2-e2e1d9f1.js → VCDisplayCard2-b0f44405.js}

@@ -1,13 +1,14 @@
-import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
-import { h, v } from './index.es-0cc0c240.js';
+import React, { useRef, useEffect, useState, createContext, Component, Children, cloneElement, useLayoutEffect } from 'react';
+import './index-4fa491c1.js';
 import { a as VCVerificationCheckWithSpinner } from './VCVerificationCheck-80249524.js';
 import DefaultFace from './default-face.jpeg';
-import { g as getColorForVerificationStatus, j as format, h as getNameFromProfile, i as getImageFromProfile, k as getCategoryColor, a as getInfoFromCredential } from './credential.helpers-20680b00.js';
-import { g as getBaseUrl, c as VideoIcon, d as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, e as capitalize, X, E as ExclamationPoint, A as AcuteCheckmark, I as InfoIcon, f as LeftArrow, h as SkillsBox, i as AlignmentsBox, t as truncateWithEllipsis, P as PersonBadge, j as VerifiedBadge, U as UnknownVerifierBadge, R as RedFlag, a as CertificateDisplayCard, V as VCDisplayCardSkillsCount } from './CertificateDisplayCard-711f2e93.js';
+import { a as getColorForVerificationStatus, j as format$1, h as getNameFromProfile, i as getImageFromProfile, k as getCategoryColor, g as getTotalCountOfSkills, c as categorizeSkills, b as getInfoFromCredential } from './credential.helpers-c06a1aa8.js';
+import { g as getBaseUrl, V as VideoIcon, d as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, e as capitalize, X, E as ExclamationPoint, A as AcuteCheckmark, I as InfoIcon, f as LeftArrow, h as SkillsBox, i as AlignmentsBox, t as truncateWithEllipsis, P as PersonBadge, j as VerifiedBadge, U as UnknownVerifierBadge, R as RedFlag, b as CertificateDisplayCard } from './CertificateDisplayCard-b3c93952.js';
 import { L as Lightbox } from './Lightbox-a1aab9ea.js';
-import { a as VerificationStatusEnum } from './VCVerificationPill-2c48beee.js';
+import { V as VerificationStatusEnum } from './types.esm-8f6a5623.js';
 import { I as IDIcon, Q as QRCodeIcon, A as AwardRibbon } from './QRCodeIcon-e9569804.js';
 import { a as LCCategoryEnum } from './index-43f63ea7.js';
+import { P as PuzzlePiece } from './PuzzlePiece-1fb12c2e.js';
 import IDSleeve from './id-sleeve.png';
 import './CaretRightFilled.svg';
 import 'react-dom';
@@ -103,7 +104,10 @@ const InfoBox = ({ text, handleClose, backgroundColor = "#6366F1" }) => {
     className: "info-box p-[10px] rounded-[10px] w-full font-poppins text-[12px] leading[18px]",
     style: { backgroundColor: bgColorWithOpacity }
   }, text, " ", /* @__PURE__ */ React.createElement("button", {
-    onClick: handleClose,
+    onClick: (e) => {
+      e.stopPropagation();
+      handleClose();
+    },
     className: "text-indigo-500 font-[700] select-none"
   }, "Close"));
 };
@@ -291,7 +295,10 @@ const MediaAttachmentsBox = ({
       return /* @__PURE__ */ React.createElement("button", {
         key: index,
         className,
-        onClick: () => handleMediaAttachmentClick(media.url, media.type)
+        onClick: (e) => {
+          e.stopPropagation();
+          handleMediaAttachmentClick(media.url, media.type);
+        }
       }, innerContent);
     }
     return /* @__PURE__ */ React.createElement("div", {
@@ -322,21 +329,26 @@ const MediaAttachmentsBox = ({
       href: docOrLink.url,
       target: "_blank",
       rel: "noreferrer",
-      className: "text-grayscale-600 font-[600] px-[5px] hover:underline"
+      className: "text-grayscale-600 font-[600] px-[5px] hover:underline",
+      onClick: (e) => e.stopPropagation()
     }, fileExtension && /* @__PURE__ */ React.createElement("span", {
       className: "uppercase"
     }, fileExtension), fileExtension && (numberOfPages || sizeInBytes) && " \u2022 ", numberOfPages && /* @__PURE__ */ React.createElement("span", null, numberOfPages, " page", numberOfPages === 1 ? "" : "s"), numberOfPages && sizeInBytes && " \u2022 ", sizeInBytes && /* @__PURE__ */ React.createElement("span", null, prettyBytes(sizeInBytes))), docOrLink.type === "link" && /* @__PURE__ */ React.createElement("a", {
       href: docOrLink.url,
       target: "_blank",
       rel: "noreferrer",
-      className: "text-indigo-500 font-[600] px-[5px] hover:underline"
+      className: "text-indigo-500 font-[600] px-[5px] hover:underline",
+      onClick: (e) => e.stopPropagation()
     }, baseUrl));
     const className = `row-attachment ${docOrLink.type} bg-grayscale-100 rounded-[15px] p-[10px] w-full font-poppins text-[12px] leading-[18px] tracking-[-0.33px] text-left`;
     if (onMediaAttachmentClick) {
       return /* @__PURE__ */ React.createElement("button", {
         key: index,
         className,
-        onClick: () => handleMediaAttachmentClick(docOrLink.url, docOrLink.type)
+        onClick: (e) => {
+          e.stopPropagation();
+          handleMediaAttachmentClick(docOrLink.url, docOrLink.type);
+        }
       }, innerContent);
     }
     return /* @__PURE__ */ React.createElement("div", {
@@ -428,10 +440,16 @@ const TruncateTextBox = ({
     className: `text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] mb-0 ${textClassName}`
   }, displayText, truncated && /* @__PURE__ */ React.createElement(React.Fragment, null, "...", " ", /* @__PURE__ */ React.createElement("button", {
     className: "text-indigo-500 font-[700]",
-    onClick: () => setShowFullText(true)
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowFullText(true);
+    }
   }, "More")), needsTruncate && showFullText && /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement("button", {
     className: "text-indigo-500 font-[700]",
-    onClick: () => setShowFullText(false)
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowFullText(false);
+    }
   }, "Close"))), children);
 };
 
@@ -477,7 +495,10 @@ const VerificationsBox = ({ verificationItems }) => {
     className: "text-[20px] leading-[20px] text-grayscale-900"
   }, "Credential Verifications"), /* @__PURE__ */ React.createElement("button", {
     className: "absolute top-[17px] right-[17px]",
-    onClick: () => setShowInfo(!showInfo)
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowInfo(!showInfo);
+    }
   }, /* @__PURE__ */ React.createElement(InfoIcon, {
     color: showInfo ? "#6366F1" : void 0
   })), showInfo && /* @__PURE__ */ React.createElement(InfoBox, {
@@ -505,7 +526,7 @@ const VC2BackFace = ({
   enableLightbox
 }) => {
   var _a, _b, _c, _d;
-  const expiration = credential.expirationDate ? format(new Date(credential.expirationDate), "MMM dd, yyyy") : void 0;
+  const expiration = credential.expirationDate ? format$1(new Date(credential.expirationDate), "MMM dd, yyyy") : void 0;
   const isExpired = credential.expirationDate && Number(new Date(credential.expirationDate)) < Number(new Date());
   const achievement = "achievement" in credential.credentialSubject ? credential.credentialSubject.achievement : void 0;
   const criteria = (_a = achievement == null ? void 0 : achievement.criteria) == null ? void 0 : _a.narrative;
@@ -612,6 +633,188 @@ const VC2FrontFaceInfo = ({
   }, issuerName))))));
 };
 
+/*! @license Rematrix v0.2.2
+
+	Copyright 2018 Fisssion LLC.
+
+	Permission is hereby granted, free of charge, to any person obtaining a copy
+	of this software and associated documentation files (the "Software"), to deal
+	in the Software without restriction, including without limitation the rights
+	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+	copies of the Software, and to permit persons to whom the Software is
+	furnished to do so, subject to the following conditions:
+
+	The above copyright notice and this permission notice shall be included in
+	all copies or substantial portions of the Software.
+
+	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+	THE SOFTWARE.
+*/
+/**
+ * @module Rematrix
+ */
+
+/**
+ * Transformation matrices in the browser come in two flavors:
+ *
+ *  - `matrix` using 6 values (short)
+ *  - `matrix3d` using 16 values (long)
+ *
+ * This utility follows this [conversion guide](https://goo.gl/EJlUQ1)
+ * to expand short form matrices to their equivalent long form.
+ *
+ * @param  {array} source - Accepts both short and long form matrices.
+ * @return {array}
+ */
+function format(source) {
+	if (source.constructor !== Array) {
+		throw new TypeError('Expected array.')
+	}
+	if (source.length === 16) {
+		return source
+	}
+	if (source.length === 6) {
+		var matrix = identity();
+		matrix[0] = source[0];
+		matrix[1] = source[1];
+		matrix[4] = source[2];
+		matrix[5] = source[3];
+		matrix[12] = source[4];
+		matrix[13] = source[5];
+		return matrix
+	}
+	throw new RangeError('Expected array with either 6 or 16 values.')
+}
+
+/**
+ * Returns a matrix representing no transformation. The product of any matrix
+ * multiplied by the identity matrix will be the original matrix.
+ *
+ * > **Tip:** Similar to how `5 * 1 === 5`, where `1` is the identity.
+ *
+ * @return {array}
+ */
+function identity() {
+	var matrix = [];
+	for (var i = 0; i < 16; i++) {
+		i % 5 == 0 ? matrix.push(1) : matrix.push(0);
+	}
+	return matrix
+}
+
+/**
+ * Returns a 4x4 matrix describing the combined transformations
+ * of both arguments.
+ *
+ * > **Note:** Order is very important. For example, rotating 45°
+ * along the Z-axis, followed by translating 500 pixels along the
+ * Y-axis... is not the same as translating 500 pixels along the
+ * Y-axis, followed by rotating 45° along on the Z-axis.
+ *
+ * @param  {array} m - Accepts both short and long form matrices.
+ * @param  {array} x - Accepts both short and long form matrices.
+ * @return {array}
+ */
+function multiply(m, x) {
+	var fm = format(m);
+	var fx = format(x);
+	var product = [];
+
+	for (var i = 0; i < 4; i++) {
+		var row = [fm[i], fm[i + 4], fm[i + 8], fm[i + 12]];
+		for (var j = 0; j < 4; j++) {
+			var k = j * 4;
+			var col = [fx[k], fx[k + 1], fx[k + 2], fx[k + 3]];
+			var result =
+				row[0] * col[0] + row[1] * col[1] + row[2] * col[2] + row[3] * col[3];
+
+			product[i + k] = result;
+		}
+	}
+
+	return product
+}
+
+/**
+ * Attempts to return a 4x4 matrix describing the CSS transform
+ * matrix passed in, but will return the identity matrix as a
+ * fallback.
+ *
+ * **Tip:** In virtually all cases, this method is used to convert
+ * a CSS matrix (retrieved as a `string` from computed styles) to
+ * its equivalent array format.
+ *
+ * @param  {string} source - String containing a valid CSS `matrix` or `matrix3d` property.
+ * @return {array}
+ */
+function parse(source) {
+	if (typeof source === 'string') {
+		var match = source.match(/matrix(3d)?\(([^)]+)\)/);
+		if (match) {
+			var raw = match[2].split(', ').map(parseFloat);
+			return format(raw)
+		}
+	}
+	return identity()
+}
+
+/**
+ * Returns a 4x4 matrix describing X-axis scaling.
+ *
+ * @param  {number} scalar - Decimal multiplier.
+ * @return {array}
+ */
+function scaleX(scalar) {
+	var matrix = identity();
+	matrix[0] = scalar;
+	return matrix
+}
+
+/**
+ * Returns a 4x4 matrix describing Y-axis scaling.
+ *
+ * @param  {number} scalar - Decimal multiplier.
+ * @return {array}
+ */
+function scaleY(scalar) {
+	var matrix = identity();
+	matrix[5] = scalar;
+	return matrix
+}
+
+/**
+ * Returns a 4x4 matrix describing X-axis translation.
+ *
+ * @param  {number} distance - Measured in pixels.
+ * @return {array}
+ */
+function translateX(distance) {
+	var matrix = identity();
+	matrix[12] = distance;
+	return matrix
+}
+
+/**
+ * Returns a 4x4 matrix describing Y-axis translation.
+ *
+ * @param  {number} distance - Measured in pixels.
+ * @return {array}
+ */
+function translateY(distance) {
+	var matrix = identity();
+	matrix[13] = distance;
+	return matrix
+}
+
+var e=function(t){return "number"==typeof t},i=function(t){return "function"==typeof t},n=function(t){return "[object Object]"===Object.prototype.toString.call(t)},r=function(t){return Array.prototype.slice.apply(t)},s$1=function(t){var e=t.reduce(function(t,e){return t[e]=(t[e]||0)+1,t},{});return Object.keys(e).filter(function(t){return e[t]>1})};function a(t){return [].slice.call(arguments,1).forEach(function(e){if(e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);}),t}var o,l=function(t,e,i){return t+(e-t)*i},p={__proto__:null,isNumber:e,isFunction:i,isObject:n,toArray:r,getDuplicateValsAsStrings:s$1,assign:a,tweenProp:l},c$1="data-flip-id",u$1="data-inverse-flip-id",d$1="data-portal-key",f$1="data-exit-container",h$1={__proto__:null,DATA_FLIP_ID:c$1,DATA_INVERSE_FLIP_ID:u$1,DATA_FLIP_COMPONENT_ID:"data-flip-component-id",DATA_FLIP_CONFIG:"data-flip-config",DATA_PORTAL_KEY:d$1,DATA_EXIT_CONTAINER:f$1},g$1={noWobble:{stiffness:200,damping:26},gentle:{stiffness:120,damping:14},veryGentle:{stiffness:130,damping:17},wobbly:{stiffness:180,damping:12},stiff:{stiffness:260,damping:26}},m$1=function(t){return n(t)?t:Object.keys(g$1).indexOf(t)>-1?g$1[t]:{}};"undefined"!=typeof window&&(o=window.requestAnimationFrame);var v$1=o=o||function(t){window.setTimeout(t,1e3/60);},y$1=Date.now(),_="object"==typeof performance&&"function"==typeof performance.now?function(){return performance.now()}:function(){return Date.now()-y$1};function S(t,e){var i=t.indexOf(e);-1!==i&&t.splice(i,1);}var E=/*#__PURE__*/function(){function t(){}return t.prototype.run=function(){var t=this;v$1(function(){t.springSystem.loop(_());});},t}(),A=function(){this.position=0,this.velocity=0;},C=0,b=.001,I=/*#__PURE__*/function(){function t(t){this._id="s"+C++,this._springSystem=t,this.listeners=[],this._startValue=0,this._currentState=new A,this._displacementFromRestThreshold=.001,this._endValue=0,this._overshootClampingEnabled=!1,this._previousState=new A,this._restSpeedThreshold=.001,this._tempState=new A,this._timeAccumulator=0,this._wasAtRest=!0,this._cachedSpringConfig={};}var e=t.prototype;return e.getId=function(){return this._id},e.destroy=function(){this.listeners=[],this._springSystem.deregisterSpring(this);},e.setSpringConfig=function(t){return this._springConfig=t,this},e.getCurrentValue=function(){return this._currentState.position},e.getDisplacementDistanceForState=function(t){return Math.abs(this._endValue-t.position)},e.setEndValue=function(t){if(t===this._endValue)return this;if(this.prevEndValue=t,this._endValue===t&&this.isAtRest())return this;this._startValue=this.getCurrentValue(),this._endValue=t,this._springSystem.activateSpring(this.getId());for(var e=0,i=this.listeners.length;e<i;e++){var n=this.listeners[e].onSpringEndStateChange;n&&n(this);}return this},e.setVelocity=function(t){return t===this._currentState.velocity||(this._currentState.velocity=t,this._springSystem.activateSpring(this.getId())),this},e.setCurrentValue=function(t){this._startValue=t,this._currentState.position=t;for(var e=0,i=this.listeners.length;e<i;e++){var n=this.listeners[e];n.onSpringUpdate&&n.onSpringUpdate(this);}return this},e.setAtRest=function(){return this._endValue=this._currentState.position,this._tempState.position=this._currentState.position,this._currentState.velocity=0,this},e.setOvershootClampingEnabled=function(t){return this._overshootClampingEnabled=t,this},e.isOvershooting=function(){var t=this._startValue,e=this._endValue;return this._springConfig.tension>0&&(t<e&&this.getCurrentValue()>e||t>e&&this.getCurrentValue()<e)},e.advance=function(t,e){var i=this.isAtRest();if(!i||!this._wasAtRest){var n=e;e>.064&&(n=.064),this._timeAccumulator+=n;for(var r,s,a,o,l,p,c=this._springConfig.tension,u=this._springConfig.friction,d=this._currentState.position,f=this._currentState.velocity,h=this._tempState.position,g=this._tempState.velocity;this._timeAccumulator>=b;)this._timeAccumulator-=b,this._timeAccumulator<b&&(this._previousState.position=d,this._previousState.velocity=f),s=c*(this._endValue-h)-u*f,o=c*(this._endValue-(h=d+(r=f)*b*.5))-u*(g=f+s*b*.5),p=c*(this._endValue-(h=d+(a=g)*b*.5))-u*(g=f+o*b*.5),h=d+(l=g)*b,d+=1/6*(r+2*(a+l)+(g=f+p*b))*b,f+=1/6*(s+2*(o+p)+(c*(this._endValue-h)-u*g))*b;this._tempState.position=h,this._tempState.velocity=g,this._currentState.position=d,this._currentState.velocity=f,this._timeAccumulator>0&&this._interpolate(this._timeAccumulator/b),(this.isAtRest()||this._overshootClampingEnabled&&this.isOvershooting())&&(this._springConfig.tension>0?(this._startValue=this._endValue,this._currentState.position=this._endValue):(this._endValue=this._currentState.position,this._startValue=this._endValue),this.setVelocity(0),i=!0);var m=!1;this._wasAtRest&&(this._wasAtRest=!1,m=!0);var v=!1;i&&(this._wasAtRest=!0,v=!0),this.notifyPositionUpdated(m,v);}},e.notifyPositionUpdated=function(t,e){var i=this;this.listeners.filter(Boolean).forEach(function(n){t&&n.onSpringActivate&&!i._onActivateCalled&&(n.onSpringActivate(i),i._onActivateCalled=!0),n.onSpringUpdate&&n.onSpringUpdate(i),e&&n.onSpringAtRest&&n.onSpringAtRest(i);});},e.systemShouldAdvance=function(){return !this.isAtRest()||!this.wasAtRest()},e.wasAtRest=function(){return this._wasAtRest},e.isAtRest=function(){return Math.abs(this._currentState.velocity)<this._restSpeedThreshold&&(this.getDisplacementDistanceForState(this._currentState)<=this._displacementFromRestThreshold||0===this._springConfig.tension)},e._interpolate=function(t){this._currentState.position=this._currentState.position*t+this._previousState.position*(1-t),this._currentState.velocity=this._currentState.velocity*t+this._previousState.velocity*(1-t);},e.addListener=function(t){return this.listeners.push(t),this},e.addOneTimeListener=function(t){var e=this;return Object.keys(t).forEach(function(i){var n;t[i]=(n=t[i],function(){n.apply(void 0,[].slice.call(arguments)),e.removeListener(t);});}),this.listeners.push(t),this},e.removeListener=function(t){return S(this.listeners,t),this},t}(),w=/*#__PURE__*/function(){function t(t){this.looper=t||new E,this.looper.springSystem=this,this.listeners=[],this._activeSprings=[],this._idleSpringIndices=[],this._isIdle=!0,this._lastTimeMillis=-1,this._springRegistry={};}var e=t.prototype;return e.createSpring=function(t,e){return this.createSpringWithConfig({tension:t,friction:e})},e.createSpringWithConfig=function(t){var e=new I(this);return this.registerSpring(e),e.setSpringConfig(t),e},e.getIsIdle=function(){return this._isIdle},e.registerSpring=function(t){this._springRegistry[t.getId()]=t;},e.deregisterSpring=function(t){S(this._activeSprings,t),delete this._springRegistry[t.getId()];},e.advance=function(t,e){for(var i=this;this._idleSpringIndices.length>0;)this._idleSpringIndices.pop();for(this._activeSprings.filter(Boolean).forEach(function(n){n.systemShouldAdvance()?n.advance(t/1e3,e/1e3):i._idleSpringIndices.push(i._activeSprings.indexOf(n));});this._idleSpringIndices.length>0;){var n=this._idleSpringIndices.pop();n>=0&&this._activeSprings.splice(n,1);}},e.loop=function(t){var e;-1===this._lastTimeMillis&&(this._lastTimeMillis=t-1);var i=t-this._lastTimeMillis;this._lastTimeMillis=t;var n=0,r=this.listeners.length;for(n=0;n<r;n++)(e=this.listeners[n]).onBeforeIntegrate&&e.onBeforeIntegrate(this);for(this.advance(t,i),0===this._activeSprings.length&&(this._isIdle=!0,this._lastTimeMillis=-1),n=0;n<r;n++)(e=this.listeners[n]).onAfterIntegrate&&e.onAfterIntegrate(this);this._isIdle||this.looper.run();},e.activateSpring=function(t){var e=this._springRegistry[t];-1===this._activeSprings.indexOf(e)&&this._activeSprings.push(e),this.getIsIdle()&&(this._isIdle=!1,this.looper.run());},t}(),O=new w,x=function(t){var e=t.springConfig,i=e.overshootClamping,n=t.getOnUpdateFunc,r=t.onAnimationEnd,s=t.onSpringActivate,a=O.createSpring(e.stiffness,e.damping);a.setOvershootClampingEnabled(!!i);var o={onSpringActivate:s,onSpringAtRest:function(){a.destroy(),r();},onSpringUpdate:n({spring:a,onAnimationEnd:r})};return a.addListener(o),a},U=function(t){var e=x(t);return e.setEndValue(1),e},V=function(t,e){if(void 0===e&&(e={}),t&&t.length){e.reverse&&t.reverse();var i,n="number"!=typeof(i=e.speed)?1.1:1+Math.min(Math.max(5*i,0),5),r=1/Math.max(Math.min(t.length,100),10),s=t.map(function(t,e){var i=t.getOnUpdateFunc;return t.getOnUpdateFunc=function(t){var a=i(t);return function(t){var i=t.getCurrentValue();(i=i<.01?0:i>.99?1:i)>=r&&s[e+1]&&s[e+1](Math.max(Math.min(i*n,1),0)),a(t);}},t}).map(function(t){var e=x(t);if(e)return e.setEndValue.bind(e)}).filter(Boolean);s[0]&&s[0](1);}},F=function(t){return [0,1,4,5,12,13].map(function(e){return t[e]})},P=function(t){return t.top<window.innerHeight&&t.bottom>0&&t.left<window.innerWidth&&t.right>0};function D(t){return JSON.parse(t.dataset.flipConfig||"{}")}var R=function(t,e){var i;return a(t,((i={})[e[0]]=e[1],i))},T=function(t,e){return r(e?document.querySelectorAll("["+d$1+'="'+e+'"]'):t.querySelectorAll("["+c$1+"]"))},M=function(t){return t.map(function(t){return [t,t.getBoundingClientRect()]})},L=function(n){var o=n.cachedOrderedFlipIds,p=void 0===o?[]:o,f=n.inProgressAnimations,h=void 0===f?{}:f,v=n.flippedElementPositionsBeforeUpdate,y=void 0===v?{}:v,_=n.flipCallbacks,S=void 0===_?{}:_,E=n.containerEl,A=n.applyTransformOrigin,C=n.spring,b=n.debug,I=n.portalKey,w=n.staggerConfig,O=void 0===w?{}:w,x=n.decisionData,j=void 0===x?{}:x,B=n.handleEnterUpdateDelete,N=n.onComplete,L=n.onStart;if(!window.matchMedia("(prefers-reduced-motion: reduce)").matches){var q,X=M(T((q={element:E,portalKey:I}).element,q.portalKey)).map(function(t){var e=t[0],i=t[1],n=window.getComputedStyle(e);return [e.dataset.flipId,{element:e,rect:i,opacity:parseFloat(n.opacity),transform:n.transform}]}).reduce(R,{}),Y=function(t){var e=t.containerEl,i=t.portalKey;return i?function(t){return function(e){return r(document.querySelectorAll("["+d$1+'="'+t+'"]'+e))}}(i):e?function(t){var e=Math.random().toFixed(5);return t.dataset.flipperId=e,function(i){return r(t.querySelectorAll('[data-flipper-id="'+e+'"] '+i))}}(e):function(){return []}}({containerEl:E,portalKey:I}),W=function(t){return function(e){return t("["+c$1+'="'+e+'"]')[0]}}(Y),K=function(t){return y[t]&&X[t]},H=Object.keys(y).concat(Object.keys(X)).filter(function(t){return !K(t)}),J={flipCallbacks:S,getElement:W,flippedElementPositionsBeforeUpdate:y,flippedElementPositionsAfterUpdate:X,inProgressAnimations:h,decisionData:j},z=function(t){var e,i=t.unflippedIds,n=t.flipCallbacks,r=t.getElement,s=t.flippedElementPositionsBeforeUpdate,a=t.flippedElementPositionsAfterUpdate,o=t.inProgressAnimations,l=t.decisionData,p=i.filter(function(t){return a[t]}).filter(function(t){return n[t]&&n[t].onAppear}),c=i.filter(function(t){return s[t]&&n[t]&&n[t].onExit}),u=new Promise(function(t){e=t;}),d=[],f=0,h=c.map(function(t,i){var r=s[t].domDataForExitAnimations,a=r.element,p=r.parent,c=r.childPosition,u=c.top,h=c.left,g=c.width,m=c.height;"static"===getComputedStyle(p).position&&(p.style.position="relative"),a.style.transform="matrix(1, 0, 0, 1, 0, 0)",a.style.position="absolute",a.style.top=u+"px",a.style.left=h+"px",a.style.height=m+"px",a.style.width=g+"px";var v=d.filter(function(t){return t[0]===p})[0];v||(v=[p,document.createDocumentFragment()],d.push(v)),v[1].appendChild(a),f+=1;var y=function(){try{p.removeChild(a);}catch(t){}finally{0==(f-=1)&&e();}};return o[t]={stop:y},function(){return n[t].onExit(a,i,y,l)}});return d.forEach(function(t){t[0].appendChild(t[1]);}),h.length||e(),{hideEnteringElements:function(){p.forEach(function(t){var e=r(t);e&&(e.style.opacity="0");});},animateEnteringElements:function(){p.forEach(function(t,e){var i=r(t);i&&n[t].onAppear(i,e,l);});},animateExitingElements:function(){return h.forEach(function(t){return t()}),u}}}(a({},J,{unflippedIds:H})),G=z.hideEnteringElements,Q=z.animateEnteringElements,Z=z.animateExitingElements,$=a({},J,{containerEl:E,flippedIds:p.filter(K),applyTransformOrigin:A,spring:C,debug:b,staggerConfig:O,scopedSelector:Y,onComplete:N});L&&L(E,j);var tt=function(n){var o,p=n.flippedIds,c=n.flipCallbacks,d=n.inProgressAnimations,f=n.flippedElementPositionsBeforeUpdate,h=n.flippedElementPositionsAfterUpdate,v=n.applyTransformOrigin,y=n.spring,_=n.getElement,S=n.debug,E=n.staggerConfig,A=void 0===E?{}:E,C=n.decisionData,b=void 0===C?{}:C,I=n.onComplete,w=n.containerEl,O=new Promise(function(t){o=t;});if(I&&O.then(function(){return I(w,b)}),!p.length)return function(){return o([]),O};var x=[],R=_(p[0]),T=R?R.ownerDocument.querySelector("body"):document.querySelector("body");s$1(p);var M=p.map(function(n){var s=f[n].rect,p=h[n].rect,_=f[n].opacity,S=h[n].opacity,E=p.width<1||p.height<1,A=h[n].element;if(!P(s)&&!P(p))return !1;if(!A)return !1;var C,I,w,O=D(A),U=(w=(I=void 0===(C={flipperSpring:y,flippedSpring:O.spring})?{}:C).flippedSpring,a({},g$1.noWobble,m$1(I.flipperSpring),m$1(w))),V=!0===O.stagger?"default":O.stagger,R={element:A,id:n,stagger:V,springConfig:U};if(c[n]&&c[n].shouldFlip&&!c[n].shouldFlip(b.previous,b.current))return !1;var k=Math.abs(s.left-p.left)+Math.abs(s.top-p.top),j=Math.abs(s.width-p.width)+Math.abs(s.height-p.height),B=Math.abs(S-_);if(0===s.height&&0===p.height||0===s.width&&0===p.width||k<.5&&j<.5&&B<.01)return !1;var N=parse(h[n].transform),L={matrix:N},q={matrix:[]},X=[N];O.translate&&(X.push(translateX(s.left-p.left)),X.push(translateY(s.top-p.top))),O.scale&&(X.push(scaleX(Math.max(s.width,1)/Math.max(p.width,1))),X.push(scaleY(Math.max(s.height,1)/Math.max(p.height,1)))),O.opacity&&(q.opacity=_,L.opacity=S);var Y=[];if(!c[n]||!c[n].shouldInvert||c[n].shouldInvert(b.previous,b.current)){var W=function(t,e){return r(t.querySelectorAll("["+u$1+'="'+e+'"]'))}(A,n);Y=W.map(function(t){return [t,D(t)]});}q.matrix=F(X.reduce(multiply)),L.matrix=F(L.matrix);var K,H=function(t){var i=t.element,n=t.invertedChildren,r=t.body;return function(t){var s=t.matrix,a=t.opacity,o=t.forceMinVals;if(e(a)&&(i.style.opacity=a+""),o&&(i.style.minHeight="1px",i.style.minWidth="1px"),s){var l=function(t){return "matrix("+t.join(", ")+")"}(s);i.style.transform=l,n&&function(t){var e=t.matrix,i=t.body;t.invertedChildren.forEach(function(t){var n=t[0],r=t[1];if(i.contains(n)){var s=e[0],a=e[3],o=e[5],l={translateX:0,translateY:0,scaleX:1,scaleY:1},p="";r.translate&&(l.translateX=-e[4]/s,l.translateY=-o/a,p+="translate("+l.translateX+"px, "+l.translateY+"px)"),r.scale&&(l.scaleX=1/s,l.scaleY=1/a,p+=" scale("+l.scaleX+", "+l.scaleY+")"),n.style.transform=p;}});}({invertedChildren:n,matrix:s,body:r});}}}({element:A,invertedChildren:Y,body:T});if(c[n]&&c[n].onComplete){var J=c[n].onComplete;K=function(){return J(A,b)};}var z=e(q.opacity)&&e(L.opacity)&&q.opacity!==L.opacity,G=!1;return a({},R,{stagger:V,springConfig:U,getOnUpdateFunc:function(t){var e=t.spring,i=t.onAnimationEnd;return d[n]={destroy:e.destroy.bind(e),onAnimationEnd:i},function(t){c[n]&&c[n].onSpringUpdate&&c[n].onSpringUpdate(t.getCurrentValue()),G||(G=!0,c[n]&&c[n].onStart&&c[n].onStart(A,b));var e=t.getCurrentValue();if(T.contains(A)){var i={matrix:[]};i.matrix=q.matrix.map(function(t,i){return l(t,L.matrix[i],e)}),z&&(i.opacity=l(q.opacity,L.opacity,e)),H(i);}else t.destroy();}},initializeFlip:function(){H({matrix:q.matrix,opacity:z?q.opacity:void 0,forceMinVals:E}),c[n]&&c[n].onStartImmediate&&c[n].onStartImmediate(A,b),O.transformOrigin?A.style.transformOrigin=O.transformOrigin:v&&(A.style.transformOrigin="0 0"),Y.forEach(function(t){var e=t[0],i=t[1];i.transformOrigin?e.style.transformOrigin=i.transformOrigin:v&&(e.style.transformOrigin="0 0");});},onAnimationEnd:function(t){delete d[n],i(K)&&K(),A.style.transform="",Y.forEach(function(t){t[0].style.transform="";}),E&&A&&(A.style.minHeight="",A.style.minWidth=""),t||(x.push(n),x.length>=M.length&&o(x));},delayUntil:O.delayUntil})}).filter(Boolean);if(M.forEach(function(t){return (0, t.initializeFlip)()}),S)return function(){};var k=M.filter(function(t){return t.delayUntil&&(e=t.delayUntil,M.filter(function(t){return t.id===e}).length);var e;}),j={},B={},N={};k.forEach(function(t){t.stagger?(N[t.stagger]=!0,B[t.delayUntil]?B[t.delayUntil].push(t.stagger):B[t.delayUntil]=[t.stagger]):j[t.delayUntil]?j[t.delayUntil].push(t):j[t.delayUntil]=[t];});var L=M.filter(function(t){return t.stagger}).reduce(function(t,e){return t[e.stagger]?t[e.stagger].push(e):t[e.stagger]=[e],t},{}),q=M.filter(function(t){return -1===k.indexOf(t)});return q.forEach(function(t){t.onSpringActivate=function(){j[t.id]&&j[t.id].forEach(U),B[t.id]&&Object.keys(B[t.id].reduce(function(t,e){var i;return a(t,((i={})[e]=!0,i))},{})).forEach(function(t){V(L[t],A[t]);});};}),function(){return M.length||o([]),q.filter(function(t){return !t.stagger}).forEach(U),Object.keys(L).forEach(function(t){N[t]||V(L[t],A[t]);}),O}}($);B?B({hideEnteringElements:G,animateEnteringElements:Q,animateExitingElements:Z,animateFlippedElements:tt}):(G(),Z().then(Q),tt());}},q=function(t){var e=t.element,i=t.flipCallbacks,n=void 0===i?{}:i,s=t.inProgressAnimations,o=void 0===s?{}:s,l=T(e,t.portalKey),p=r(e.querySelectorAll("["+u$1+"]")),c={},d=[],h={};l.filter(function(t){return n&&n[t.dataset.flipId]&&n[t.dataset.flipId].onExit}).forEach(function(t){var e=t.parentNode;if(t.closest){var i=t.closest("["+f$1+"]");i&&(e=i);}var n=d.findIndex(function(t){return t[0]===e});-1===n&&(d.push([e,e.getBoundingClientRect()]),n=d.length-1),c[t.dataset.flipId]=d[n][1],h[t.dataset.flipId]=e;});var g=M(l),m=g.map(function(t){var e=t[0],i=t[1],r={};if(n&&n[e.dataset.flipId]&&n[e.dataset.flipId].onExit){var s=c[e.dataset.flipId];a(r,{element:e,parent:h[e.dataset.flipId],childPosition:{top:i.top-s.top,left:i.left-s.left,width:i.width,height:i.height}});}return [e.dataset.flipId,{rect:i,opacity:parseFloat(window.getComputedStyle(e).opacity||"1"),domDataForExitAnimations:r}]}).reduce(R,{});return function(t,e){Object.keys(t).forEach(function(e){t[e].destroy&&t[e].destroy(),t[e].onAnimationEnd&&t[e].onAnimationEnd(!0),delete t[e];}),e.forEach(function(t){t.style.transform="",t.style.opacity="";});}(o,l.concat(p)),{flippedElementPositions:m,cachedOrderedFlipIds:g.map(function(t){return t[0].dataset.flipId})}};new w;
+
+function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},s.apply(this,arguments)}function c(e,t){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},c(e,t)}function d(e,t){if(null==e)return {};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(i[r]=e[r]);return i}var f=/*#__PURE__*/createContext({}),u=/*#__PURE__*/createContext("portal"),h=/*#__PURE__*/function(r){var n,o;function p(){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];return (e=r.call.apply(r,[this].concat(n))||this).inProgressAnimations={},e.flipCallbacks={},e.el=void 0,e}o=r,(n=p).prototype=Object.create(o.prototype),n.prototype.constructor=n,c(n,o);var l=p.prototype;return l.getSnapshotBeforeUpdate=function(t){return t.flipKey!==this.props.flipKey&&this.el?q({element:this.el,flipCallbacks:this.flipCallbacks,inProgressAnimations:this.inProgressAnimations,portalKey:this.props.portalKey}):null},l.componentDidUpdate=function(e,r,n){this.props.flipKey!==e.flipKey&&this.el&&L({flippedElementPositionsBeforeUpdate:n.flippedElementPositions,cachedOrderedFlipIds:n.cachedOrderedFlipIds,containerEl:this.el,inProgressAnimations:this.inProgressAnimations,flipCallbacks:this.flipCallbacks,applyTransformOrigin:this.props.applyTransformOrigin,spring:this.props.spring,debug:this.props.debug,portalKey:this.props.portalKey,staggerConfig:this.props.staggerConfig,handleEnterUpdateDelete:this.props.handleEnterUpdateDelete,decisionData:{previous:e.decisionData,current:this.props.decisionData},onComplete:this.props.onComplete,onStart:this.props.onStart});},l.render=function(){var e=this,t=this.props,r=t.portalKey,n=/*#__PURE__*/React.createElement(f.Provider,{value:this.flipCallbacks},/*#__PURE__*/React.createElement(t.element,{className:t.className,ref:function(t){return e.el=t}},this.props.children));return r&&(n=/*#__PURE__*/React.createElement(u.Provider,{value:r},n)),n},p}(Component);h.defaultProps={applyTransformOrigin:!0,element:"div"};var m=["children","flipId","inverseFlipId","portalKey"],y=["children","flipId","shouldFlip","shouldInvert","onAppear","onStart","onStartImmediate","onComplete","onExit","onSpringUpdate"],g=function(e){var t,i=e.children,o=e.flipId,p$1=e.inverseFlipId,s=e.portalKey,c=d(e,m),f=i,u=function(e){return "function"==typeof e}(f);if(!u)try{f=Children.only(i);}catch(e){throw new Error("Each Flipped component must wrap a single child")}c.scale||c.translate||c.opacity||p.assign(c,{translate:!0,scale:!0,opacity:!0});var h=((t={})[h$1.DATA_FLIP_CONFIG]=JSON.stringify(c),t);return void 0!==o?h[h$1.DATA_FLIP_ID]=String(o):p$1&&(h[h$1.DATA_INVERSE_FLIP_ID]=String(p$1)),void 0!==s&&(h[h$1.DATA_PORTAL_KEY]=s),u?f(h):/*#__PURE__*/cloneElement(f,h)},v=function(e){var t=e.children,n=e.flipId,o=e.shouldFlip,p$1=e.shouldInvert,l=e.onAppear,a=e.onStart,c=e.onStartImmediate,h=e.onComplete,m=e.onExit,v=e.onSpringUpdate,I=d(e,y);return t?I.inverseFlipId?/*#__PURE__*/React.createElement(g,s({},I),t):/*#__PURE__*/React.createElement(u.Consumer,null,function(e){return React.createElement(f.Consumer,null,function(d){return p.isObject(d)&&n&&(d[n]={shouldFlip:o,shouldInvert:p$1,onAppear:l,onStart:a,onStartImmediate:c,onComplete:h,onExit:m,onSpringUpdate:v}),/*#__PURE__*/React.createElement(g,s({flipId:n},I,{portalKey:e}),t)})}):null};v.displayName="Flipped";
+
 const VCDisplayCardCategoryType = ({
   categoryType = LCCategoryEnum.achievement
 }) => {
@@ -621,6 +824,28 @@ const VCDisplayCardCategoryType = ({
   }, categoryType);
 };
 
+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 cursor-pointer px-4 py-2 bg-white rounded-[20px] shadow-bottom",
+    onClick
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold"
+  }, "+", 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",
+    fill: "#fff"
+  }))));
+};
+
 const VERIFIER_STATES = {
   selfVerified: "Self Verified",
   trustedVerifier: "Trusted Verifier",
@@ -666,7 +891,10 @@ const VCIDDisplayFrontFace = ({
   }), " ID"), /* @__PURE__ */ React.createElement("div", {
     className: "w-full relative"
   }, !hideQRCode && /* @__PURE__ */ React.createElement("button", {
-    onClick: () => qrCodeOnClick == null ? void 0 : qrCodeOnClick(),
+    onClick: (e) => {
+      e.stopPropagation();
+      qrCodeOnClick == null ? void 0 : qrCodeOnClick();
+    },
     className: "text-grayscale-900 bg-white rounded-full p-[10px] absolute top-[-10px] right-[45%]"
   }, /* @__PURE__ */ React.createElement(QRCodeIcon, {
     className: "text-grayscale-900 "
@@ -754,7 +982,9 @@ const VCIDDisplayCard = ({
     className: `vc-display-card font-mouse flex flex-col items-center border-solid border-white rounded-[30px] z-10 max-w-[400px] relative bg-white shadow-3xl ${isFront ? "" : "min-h-[800px]"}`
   }, /* @__PURE__ */ React.createElement("div", {
     className: "relative vc-card-content-container flex flex-col items-center grow min-h-0 w-full rounded-t-[30px] rounded-b-[30px] overflow-hidden",
-    style: backgroundStyle
+    style: backgroundStyle,
+    role: "button",
+    onClick: () => setIsFront(!isFront)
   }, /* @__PURE__ */ React.createElement(v, {
     flipId: "scroll-container"
   }, /* @__PURE__ */ React.createElement("div", {
@@ -928,7 +1158,9 @@ const VCDisplayCard2 = ({
   }, /* @__PURE__ */ React.createElement(v, {
     flipId: "card"
   }, /* @__PURE__ */ React.createElement("section", {
-    className: "vc-display-card font-mouse flex flex-col items-center border-solid border-[5px] border-white rounded-[30px] z-10 min-h-[800px] max-w-[400px] relative bg-white shadow-3xl"
+    className: "vc-display-card font-mouse flex flex-col items-center border-solid border-[5px] border-white rounded-[30px] z-10 min-h-[800px] max-w-[400px] relative bg-white shadow-3xl",
+    role: "button",
+    onClick: () => setIsFront(!isFront)
   }, /* @__PURE__ */ React.createElement(RibbonEnd, {
     side: "left",
     className: "absolute left-[-30px] top-[50px] z-0",
@@ -1027,5 +1259,5 @@ const VCDisplayCard2 = ({
   }, (_g = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _g : /* @__PURE__ */ React.createElement(AwardRibbon, null)))))));
 };
 
-export { VCDisplayCard2 as V, VCIDDisplayCard as a };
-//# sourceMappingURL=VCDisplayCard2-e2e1d9f1.js.map
+export { VCDisplayCard2 as V, VCDisplayCardSkillsCount as a, VCIDDisplayCard as b };
+//# sourceMappingURL=VCDisplayCard2-b0f44405.js.map