@learncard/react 2.6.53 → 2.6.55

package/dist/esm/{VCCard-72b77d65.js → VCCard-ce237f01.js}

@@ -4,7 +4,7 @@ import { V as VCDisplayCard } from './VCDisplayCard-a35f3a6a.js';
 import './default-face.jpeg';
 import 'react-dom';
 import './types.esm-b07820bb.js';
-import { V as VCDisplayCard2 } from './VCDisplayCard2-b868c0b6.js';
+import { V as VCDisplayCard2 } from './VCDisplayCard2-531202a8.js';
 
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -73,4 +73,4 @@ const VCCard = ({
 };
 
 export { VCCard as V };
-//# sourceMappingURL=VCCard-72b77d65.js.map
+//# sourceMappingURL=VCCard-ce237f01.js.map

package/dist/esm/{VCCard-72b77d65.js.map → VCCard-ce237f01.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCCard-72b77d65.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/init';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\nimport {\n    VCDisplayCard2,\n    MediaMetadata,\n    VideoMetadata,\n    CredentialIconType,\n} from '../VCDisplayCard2';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n    version?: '1' | '2';\n\n    /* Only used for version 2 */\n    subjectImageComponent?: React.ReactNode;\n    // convertTagsToSkills?: (tags: string[]) => { [skill: string]: string[] };\n    handleXClick?: () => void;\n    getFileMetadata?: (url: string) => MediaMetadata;\n    getVideoMetadata?: (url: string) => VideoMetadata;\n    onMediaAttachmentClick?: (url: string) => void;\n    bottomRightIcon?: CredentialIconType;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({\n    credential,\n    issueeOverride,\n    className = '',\n    version = '1',\n    subjectImageComponent,\n    // convertTagsToSkills,\n    handleXClick,\n    getFileMetadata,\n    getVideoMetadata,\n    onMediaAttachmentClick,\n    bottomRightIcon,\n}) => {\n    const [loading, setLoading] = useState(true);\n    const [vcVerification, setVCVerification] = useState<VerificationItem[]>([]);\n\n    useEffect(() => {\n        const verify = async () => {\n            const wallet = await initLearnCard();\n            const verification = await wallet.invoke.verifyCredential(credential, {}, true);\n            setVCVerification(verification);\n            setLoading(false);\n        };\n\n        verify();\n    }, [credential]);\n\n    if (version === '1') {\n        return (\n            <VCDisplayCard\n                credential={credential}\n                issueeOverride={issueeOverride}\n                className={className}\n                loading={loading}\n                verification={vcVerification}\n            />\n        );\n    }\n    return (\n        <VCDisplayCard2\n            credential={credential}\n            issueeOverride={issueeOverride}\n            verificationInProgress={loading}\n            verificationItems={vcVerification}\n            subjectImageComponent={subjectImageComponent}\n            // convertTagsToSkills={convertTagsToSkills}\n            handleXClick={handleXClick}\n            getFileMetadata={getFileMetadata}\n            getVideoMetadata={getVideoMetadata}\n            onMediaAttachmentClick={onMediaAttachmentClick}\n            bottomRightIcon={bottomRightIcon}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":["this"],"mappings":";;;;;;;;AAAA,IAAI,OAAO,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,KAAK;AAClD,EAAE,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK;AAC1C,IAAI,IAAI,SAAS,GAAG,CAAC,KAAK,KAAK;AAC/B,MAAM,IAAI;AACV,QAAQ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AACpC,OAAO,CAAC,OAAO,CAAC,EAAE;AAClB,QAAQ,MAAM,CAAC,CAAC,CAAC,CAAC;AAClB,OAAO;AACP,KAAK,CAAC;AACN,IAAI,IAAI,QAAQ,GAAG,CAAC,KAAK,KAAK;AAC9B,MAAM,IAAI;AACV,QAAQ,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACrC,OAAO,CAAC,OAAO,CAAC,EAAE;AAClB,QAAQ,MAAM,CAAC,CAAC,CAAC,CAAC;AAClB,OAAO;AACP,KAAK,CAAC;AACN,IAAI,IAAI,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AACrG,IAAI,IAAI,CAAC,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;AACpE,GAAG,CAAC,CAAC;AACL,CAAC,CAAC;AAOU,MAAC,MAAM,GAAG,CAAC;AACvB,EAAE,UAAU;AACZ,EAAE,cAAc;AAChB,EAAE,SAAS,GAAG,EAAE;AAChB,EAAE,OAAO,GAAG,GAAG;AACf,EAAE,qBAAqB;AACvB,EAAE,YAAY;AACd,EAAE,eAAe;AACjB,EAAE,gBAAgB;AAClB,EAAE,sBAAsB;AACxB,EAAE,eAAe;AACjB,CAAC,KAAK;AACN,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC/C,EAAE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC3D,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,MAAM,MAAM,GAAG,MAAM,OAAO,CAACA,SAAI,EAAE,IAAI,EAAE,aAAa;AAC1D,MAAM,MAAM,MAAM,GAAG,MAAM,aAAa,EAAE,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC;AACtF,MAAM,iBAAiB,CAAC,YAAY,CAAC,CAAC;AACtC,MAAM,UAAU,CAAC,KAAK,CAAC,CAAC;AACxB,KAAK,CAAC,CAAC;AACP,IAAI,MAAM,EAAE,CAAC;AACb,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;AACnB,EAAE,IAAI,OAAO,KAAK,GAAG,EAAE;AACvB,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE;AAC9D,MAAM,UAAU;AAChB,MAAM,cAAc;AACpB,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,YAAY,EAAE,cAAc;AAClC,KAAK,CAAC,CAAC;AACP,GAAG;AACH,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE;AAC7D,IAAI,UAAU;AACd,IAAI,cAAc;AAClB,IAAI,sBAAsB,EAAE,OAAO;AACnC,IAAI,iBAAiB,EAAE,cAAc;AACrC,IAAI,qBAAqB;AACzB,IAAI,YAAY;AAChB,IAAI,eAAe;AACnB,IAAI,gBAAgB;AACpB,IAAI,sBAAsB;AAC1B,IAAI,eAAe;AACnB,GAAG,CAAC,CAAC;AACL;;;;"}
+{"version":3,"file":"VCCard-ce237f01.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/init';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\nimport {\n    VCDisplayCard2,\n    MediaMetadata,\n    VideoMetadata,\n    CredentialIconType,\n} from '../VCDisplayCard2';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n    version?: '1' | '2';\n\n    /* Only used for version 2 */\n    subjectImageComponent?: React.ReactNode;\n    // convertTagsToSkills?: (tags: string[]) => { [skill: string]: string[] };\n    handleXClick?: () => void;\n    getFileMetadata?: (url: string) => MediaMetadata;\n    getVideoMetadata?: (url: string) => VideoMetadata;\n    onMediaAttachmentClick?: (url: string) => void;\n    bottomRightIcon?: CredentialIconType;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({\n    credential,\n    issueeOverride,\n    className = '',\n    version = '1',\n    subjectImageComponent,\n    // convertTagsToSkills,\n    handleXClick,\n    getFileMetadata,\n    getVideoMetadata,\n    onMediaAttachmentClick,\n    bottomRightIcon,\n}) => {\n    const [loading, setLoading] = useState(true);\n    const [vcVerification, setVCVerification] = useState<VerificationItem[]>([]);\n\n    useEffect(() => {\n        const verify = async () => {\n            const wallet = await initLearnCard();\n            const verification = await wallet.invoke.verifyCredential(credential, {}, true);\n            setVCVerification(verification);\n            setLoading(false);\n        };\n\n        verify();\n    }, [credential]);\n\n    if (version === '1') {\n        return (\n            <VCDisplayCard\n                credential={credential}\n                issueeOverride={issueeOverride}\n                className={className}\n                loading={loading}\n                verification={vcVerification}\n            />\n        );\n    }\n    return (\n        <VCDisplayCard2\n            credential={credential}\n            issueeOverride={issueeOverride}\n            verificationInProgress={loading}\n            verificationItems={vcVerification}\n            subjectImageComponent={subjectImageComponent}\n            // convertTagsToSkills={convertTagsToSkills}\n            handleXClick={handleXClick}\n            getFileMetadata={getFileMetadata}\n            getVideoMetadata={getVideoMetadata}\n            onMediaAttachmentClick={onMediaAttachmentClick}\n            bottomRightIcon={bottomRightIcon}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":["this"],"mappings":"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"}

package/dist/esm/{VCDisplayCard2-b868c0b6.js → VCDisplayCard2-531202a8.js}

@@ -1,7 +1,8 @@
-import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
+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 { c as getColorForVerificationStatus, f as format, g as getNameFromProfile, a as getImageFromProfile, b as getInfoFromCredential } from './credential.helpers-89728941.js';
+import { c as getColorForVerificationStatus, f as format$1, g as getNameFromProfile, a as getImageFromProfile, b as getInfoFromCredential } from './credential.helpers-89728941.js';
 import { L as Lightbox } from './Lightbox-a1aab9ea.js';
 import { V as VerificationStatusEnum } from './types.esm-b07820bb.js';
 import { A as AwardRibbon } from './AwardRibbon-3e682281.js';
@@ -758,7 +759,7 @@ const VC2BackFace = ({
   enableLightbox
 }) => {
   var _a;
-  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;
@@ -859,6 +860,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=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,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={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).indexOf(t)>-1?g[t]:{}};"undefined"!=typeof window&&(o=window.requestAnimationFrame);var v=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(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()]})},k=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,k=void 0===x?{}:x,j=n.handleEnterUpdateDelete,B=n.onComplete,N=n.onStart;if(!window.matchMedia("(prefers-reduced-motion: reduce)").matches){var L,q=M(T((L={element:E,portalKey:I}).element,L.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,{}),X=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}),Y=function(t){return function(e){return t("["+c$1+'="'+e+'"]')[0]}}(X),W=function(t){return y[t]&&q[t]},K=Object.keys(y).concat(Object.keys(q)).filter(function(t){return !W(t)}),H={flipCallbacks:S,getElement:Y,flippedElementPositionsBeforeUpdate:y,flippedElementPositionsAfterUpdate:q,inProgressAnimations:h,decisionData:k},J=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({},H,{unflippedIds:K})),z=J.hideEnteringElements,G=J.animateEnteringElements,Q=J.animateExitingElements,Z=a({},H,{containerEl:E,flippedIds:p.filter(W),applyTransformOrigin:A,spring:C,debug:b,staggerConfig:O,scopedSelector:X,onComplete:B});N&&N(E,k);var $=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(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.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}}(Z);j?j({hideEnteringElements:z,animateEnteringElements:G,animateExitingElements:Q,animateFlippedElements:$}):(z(),Q().then(G),$());}},j=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 c(e,t){return (c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(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=createContext({}),u=createContext("portal"),h=function(t){var r,n;function i(){var e;return (e=t.apply(this,arguments)||this).inProgressAnimations={},e.flipCallbacks={},e.el=void 0,e}n=t,(r=i).prototype=Object.create(n.prototype),r.prototype.constructor=r,c(r,n);var l=i.prototype;return l.getSnapshotBeforeUpdate=function(e){return e.flipKey!==this.props.flipKey&&this.el?j({element:this.el,flipCallbacks:this.flipCallbacks,inProgressAnimations:this.inProgressAnimations,portalKey:this.props.portalKey}):null},l.componentDidUpdate=function(e,t,r){this.props.flipKey!==e.flipKey&&this.el&&k({flippedElementPositionsBeforeUpdate:r.flippedElementPositions,cachedOrderedFlipIds:r.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 t=this,r=this.props,n=r.portalKey,i=React.createElement(f.Provider,{value:this.flipCallbacks},React.createElement(r.element,{className:r.className,ref:function(e){return t.el=e}},this.props.children));return n&&(i=React.createElement(u.Provider,{value:n},i)),i},i}(Component);h.defaultProps={applyTransformOrigin:!0,element:"div"};var m=function(e){var t,r=e.children,o=e.flipId,p$1=e.inverseFlipId,a=e.portalKey,c=d(e,["children","flipId","inverseFlipId","portalKey"]),f=r,u=function(e){return "function"==typeof e}(f);if(!u)try{f=Children.only(r);}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!==a&&(h[h$1.DATA_PORTAL_KEY]=a),u?f(h):cloneElement(f,h)},y=function(t){var r=t.children,n=t.flipId,i=t.shouldFlip,o=t.shouldInvert,p$1=t.onAppear,s=t.onStart,a=t.onStartImmediate,c=t.onComplete,h=t.onExit,y=t.onSpringUpdate,g=d(t,["children","flipId","shouldFlip","shouldInvert","onAppear","onStart","onStartImmediate","onComplete","onExit","onSpringUpdate"]);return r?g.inverseFlipId?React.createElement(m,Object.assign({},g),r):React.createElement(u.Consumer,null,function(t){return React.createElement(f.Consumer,null,function(d){return p.isObject(d)&&n&&(d[n]={shouldFlip:i,shouldInvert:o,onAppear:p$1,onStart:s,onStartImmediate:a,onComplete:c,onExit:h,onSpringUpdate:y}),React.createElement(m,Object.assign({flipId:n},g,{portalKey:t}),r)})}):null};y.displayName="Flipped";
+
 const getCategoryTextColor = (category = LCCategoryEnum.achievement) => {
   if (category === LCCategoryEnum.socialBadge)
     return "text-cyan-700";
@@ -891,22 +1074,6 @@ const VCDisplayCardCategoryType = ({
   }, categoryType);
 };
 
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 const VCDisplayCard2 = ({
   categoryType,
   credential,
@@ -970,13 +1137,18 @@ const VCDisplayCard2 = ({
   const backgroundStyle = {
     backgroundColor: (_a = credential.display) == null ? void 0 : _a.backgroundColor,
     backgroundImage: ((_b = credential.display) == null ? void 0 : _b.backgroundImage) ? `linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25)), url(${(_c = credential.display) == null ? void 0 : _c.backgroundImage})` : void 0,
-    backgroundSize: "contain",
+    backgroundSize: "cover",
     backgroundPosition: "center",
     backgroundAttachment: "fixed"
   };
   const _title = titleOverride || title;
-  return /* @__PURE__ */ React.createElement("section", {
-    className: "vc-display-card font-mouse flex flex-col items-center border-solid border-[5px] border-white rounded-[30px] overflow-visible z-10 max-w-[400px] relative bg-white shadow-3xl"
+  return /* @__PURE__ */ React.createElement(h, {
+    className: "w-full",
+    flipKey: isFront
+  }, /* @__PURE__ */ React.createElement(y, {
+    flipId: "card"
+  }, /* @__PURE__ */ React.createElement("section", {
+    className: "vc-display-card font-mouse flex flex-col items-center border-solid border-[5px] border-white rounded-[30px] overflow-visible z-10 min-h-[800px] max-w-[400px] relative bg-white shadow-3xl"
   }, /* @__PURE__ */ React.createElement(RibbonEnd, {
     side: "left",
     className: "absolute left-[-30px] top-[50px] z-0",
@@ -1001,14 +1173,15 @@ const VCDisplayCard2 = ({
     className: "vc-card-x-button absolute top-[-25px] bg-white rounded-full h-[50px] w-[50px] flex items-center justify-center z-50",
     onClick: handleXClick
   }, /* @__PURE__ */ React.createElement(RoundedX, null)), /* @__PURE__ */ React.createElement("div", {
-    className: "vc-card-background-hider absolute h-[40px] w-full z-20 flex grow rounded-t-[30px] ",
+    className: "relative pt-[114px] vc-card-content-container flex flex-col items-center grow basis-0 min-h-0 h-full w-full rounded-t-[30px] bg-[#353E64] rounded-b-[200px]",
     style: backgroundStyle
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: "vc-card-content-container flex flex-col items-center grow w-full rounded-t-[30px] rounded-b-[20px] overflow-scroll scrollbar-hide"
+  }, /* @__PURE__ */ React.createElement(y, {
+    flipId: "scroll-container"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "vc-card-content-scroll-container w-full flex flex-col justify-center items-center rounded-b-[200px] bg-[#353E64] pb-[50px]",
-    style: __spreadValues({ paddingTop: "170px" }, backgroundStyle)
-  }, isFront && /* @__PURE__ */ React.createElement(VC2FrontFaceInfo, {
+    className: "vc-card-content-scroll-container w-full pt-[20px] min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[200px] overflow-y-auto scrollbar-hide pb-[50px]"
+  }, isFront && /* @__PURE__ */ React.createElement(y, {
+    flipId: "face"
+  }, /* @__PURE__ */ React.createElement(VC2FrontFaceInfo, {
     issuee,
     subjectDID,
     issuer,
@@ -1019,7 +1192,9 @@ const VCDisplayCard2 = ({
     customThumbComponent,
     createdAt: createdAt != null ? createdAt : "",
     imageUrl
-  }), !isFront && /* @__PURE__ */ React.createElement(VC2BackFace, {
+  })), !isFront && /* @__PURE__ */ React.createElement(y, {
+    flipId: "face"
+  }, /* @__PURE__ */ React.createElement(VC2BackFace, {
     credential,
     verificationItems,
     issueHistory,
@@ -1032,17 +1207,21 @@ const VCDisplayCard2 = ({
     customCriteria,
     customIssueHistoryComponent,
     enableLightbox
-  }), isFront && customFrontButton, isFront && !customFrontButton && /* @__PURE__ */ React.createElement("button", {
+  })), isFront && customFrontButton, isFront && !customFrontButton && /* @__PURE__ */ React.createElement(y, {
+    flipId: "details-back-button"
+  }, /* @__PURE__ */ React.createElement("button", {
     type: "button",
     className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[40px] w-fit select-none",
     onClick: () => setIsFront(!isFront)
-  }, "Details"), !isFront && /* @__PURE__ */ React.createElement("button", {
+  }, "Details")), !isFront && /* @__PURE__ */ React.createElement(y, {
+    flipId: "details-back-button"
+  }, /* @__PURE__ */ React.createElement("button", {
     type: "button",
     className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[40px] w-fit select-none",
     onClick: () => setIsFront(!isFront)
   }, /* @__PURE__ */ React.createElement("span", {
     className: "flex gap-[10px] items-center"
-  }, /* @__PURE__ */ React.createElement(LeftArrow, null), "Back")))), /* @__PURE__ */ React.createElement("footer", {
+  }, /* @__PURE__ */ React.createElement(LeftArrow, null), "Back")))))), /* @__PURE__ */ React.createElement("footer", {
     className: "vc-card-footer w-full flex justify-between p-[5px] mt-[5px]"
   }, customFooterComponent && customFooterComponent, !customFooterComponent && /* @__PURE__ */ React.createElement(React.Fragment, null, worstVerificationStatus === VerificationStatusEnum.Failed ? /* @__PURE__ */ React.createElement("div", {
     className: "w-[40px]",
@@ -1061,8 +1240,8 @@ const VCDisplayCard2 = ({
   }, worstVerificationStatus)), /* @__PURE__ */ React.createElement("div", {
     className: "vc-footer-icon rounded-[20px] h-[40px] w-[40px] flex items-center justify-center overflow-hidden",
     style: { backgroundColor: (_d = bottomRightIcon == null ? void 0 : bottomRightIcon.color) != null ? _d : "#6366F1" }
-  }, (_e = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _e : /* @__PURE__ */ React.createElement(AwardRibbon, null)))));
+  }, (_e = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _e : /* @__PURE__ */ React.createElement(AwardRibbon, null)))))));
 };
 
 export { VCDisplayCard2 as V };
-//# sourceMappingURL=VCDisplayCard2-b868c0b6.js.map
+//# sourceMappingURL=VCDisplayCard2-531202a8.js.map