@learncard/react 2.7.15 → 2.7.17

package/dist/esm/{VCDisplayCard2-8d6cb009.js → VCDisplayCard2-06c93532.js}

@@ -455,6 +455,188 @@ const TruncateTextBox = ({
   }, "Close"))), children);
 };
 
+/*! @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 VerificationRow = ({ verification }) => {
   var _a, _b;
   const [showInfo, setShowInfo] = useState(false);
@@ -534,7 +716,9 @@ const VC2BackFace = ({
   const criteria = (_a = achievement == null ? void 0 : achievement.criteria) == null ? void 0 : _a.narrative;
   const description = achievement == null ? void 0 : achievement.description;
   const alignment = achievement == null ? void 0 : achievement.alignment;
-  return /* @__PURE__ */ React.createElement("section", {
+  return /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "card"
+  }, /* @__PURE__ */ React.createElement("section", {
     className: "vc-back-face flex flex-col gap-[20px] w-full px-[15px] pb-[25px]"
   }, showBackButton && /* @__PURE__ */ React.createElement("div", {
     className: "w-full"
@@ -578,7 +762,7 @@ const VC2BackFace = ({
     style: "boost"
   }), verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React.createElement(VerificationsBox, {
     verificationItems
-  }));
+  })));
 };
 
 const VC2FrontFaceInfo = ({
@@ -624,7 +808,9 @@ const VC2FrontFaceInfo = ({
       verifierState = VERIFIER_STATES$1.unknownVerifier;
     }
   }
-  return /* @__PURE__ */ React.createElement("section", {
+  return /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "card"
+  }, /* @__PURE__ */ React.createElement("section", {
     className: "vc-front-face w-full px-[15px] flex flex-col items-center gap-[15px]"
   }, imageUrl && !customThumbComponent && /* @__PURE__ */ React.createElement("img", {
     className: "vc-front-image h-[130px] w-[130px] rounded-[10px]",
@@ -653,191 +839,9 @@ const VC2FrontFaceInfo = ({
     className: "font-[700]"
   }, issuerName))), /* @__PURE__ */ React.createElement(VerifierStateBadgeAndText, {
     verifierState
-  })))));
+  }))))));
 };
 
-/*! @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
 }) => {
@@ -905,13 +909,24 @@ const VCIDDisplayFrontFace = ({
   const isSelfVerified = verifierState === VERIFIER_STATES.selfVerified;
   const achievement = "achievement" in (credential == null ? void 0 : credential.credentialSubject) ? (_a = credential == null ? void 0 : credential.credentialSubject) == null ? void 0 : _a.achievement : void 0;
   const description = achievement == null ? void 0 : achievement.description;
-  return /* @__PURE__ */ React.createElement("section", {
+  return /* @__PURE__ */ React.createElement(h, {
+    className: "w-full",
+    flipKey: isFront
+  }, /* @__PURE__ */ React.createElement(v, {
+    flipId: "face"
+  }, /* @__PURE__ */ React.createElement("section", {
     className: "vc-front-face w-full flex flex-col items-center gap-[15px]"
-  }, customThumbComponent && customThumbComponent, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "face"
+  }, customThumbComponent && customThumbComponent), /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "face"
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "text-white w-full flex items-center justify-center font-poppins"
   }, /* @__PURE__ */ React.createElement(IDIcon, {
     className: "text-white mr-1"
-  }), " ID"), /* @__PURE__ */ React.createElement("div", {
+  }), " ID")), /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "face"
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "w-full relative"
   }, !hideQRCode && /* @__PURE__ */ React.createElement("button", {
     onClick: (e) => {
@@ -925,7 +940,9 @@ const VCIDDisplayFrontFace = ({
     src: IDSleeve,
     alt: "id-sleeve",
     className: "w-full object-cover"
-  })), /* @__PURE__ */ React.createElement("div", {
+  }))), /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "face"
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "w-full bg-white relative mt-[-70px] px-6 pb-4 pt-4"
   }, description && !customIDDescription && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TruncateTextBox, {
     text: description,
@@ -959,7 +976,7 @@ const VCIDDisplayFrontFace = ({
     className: "uppercase font-poppins text-base font-[500] text-red-mastercard flex gap-[3px] items-center"
   }, /* @__PURE__ */ React.createElement(RedFlag, {
     className: "w-[20px] h-[20px]"
-  }), "Untrusted Verifier"))));
+  }), "Untrusted Verifier")))))));
 };
 
 const VCIDDisplayCard = ({
@@ -1008,13 +1025,9 @@ const VCIDDisplayCard = ({
     style: backgroundStyle,
     role: "button",
     onClick: () => setIsFront(!isFront)
-  }, /* @__PURE__ */ React.createElement(v, {
-    flipId: "scroll-container"
   }, /* @__PURE__ */ React.createElement("div", {
     className: "vc-card-content-scroll-container w-full min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[30px]  scrollbar-hide pt-[20px]"
-  }, isFront && /* @__PURE__ */ React.createElement(v, {
-    flipId: "face"
-  }, /* @__PURE__ */ React.createElement(VCIDDisplayFrontFace, {
+  }, isFront && /* @__PURE__ */ React.createElement(VCIDDisplayFrontFace, {
     isFront: _isFront,
     setIsFront,
     showDetailsBtn,
@@ -1024,9 +1037,7 @@ const VCIDDisplayCard = ({
     qrCodeOnClick,
     hideQRCode,
     customIDDescription
-  })), !isFront && /* @__PURE__ */ React.createElement(v, {
-    flipId: "face"
-  }, /* @__PURE__ */ React.createElement(VC2BackFace, {
+  }), !isFront && /* @__PURE__ */ React.createElement(VC2BackFace, {
     credential,
     verificationItems,
     issueHistory,
@@ -1040,7 +1051,7 @@ const VCIDDisplayCard = ({
     customIssueHistoryComponent,
     enableLightbox,
     customSkillsComponent
-  }))))))));
+  }))))));
 };
 
 const VCDisplayCard2 = ({
@@ -1101,9 +1112,9 @@ const VCDisplayCard2 = ({
   const headerRef = useRef(null);
   useLayoutEffect(() => {
     setTimeout(() => {
-      var _a2, _b2, _c2, _d2;
-      setHeaderHeight((_b2 = (_a2 = headerRef.current) == null ? void 0 : _a2.clientHeight) != null ? _b2 : 100);
-      setHeaderWidth((_d2 = (_c2 = headerRef.current) == null ? void 0 : _c2.clientWidth) != null ? _d2 : 0);
+      var _a2, _b2, _c2;
+      setHeaderHeight(((_a2 = headerRef.current) == null ? void 0 : _a2.clientHeight) || 100);
+      setHeaderWidth((_c2 = (_b2 = headerRef.current) == null ? void 0 : _b2.clientWidth) != null ? _c2 : 0);
     }, 10);
   });
   let worstVerificationStatus = verificationItems.reduce((currentWorst, verification) => {
@@ -1200,6 +1211,8 @@ const VCDisplayCard2 = ({
       hideGradientBackground
     }));
   }
+  const headerClassName = "vc-card-header px-[20px] pb-[10px] pt-[3px] overflow-visible mt-[40px] text-center bg-white border-y-[5px] border-[#EEF2FF] w-[calc(100%_+_16px)] rounded-t-[8px] z-50";
+  const headerFitTextClassName = "vc-card-header-main-title text-[#18224E] leading-[80%] text-shadow text-[32px]";
   return /* @__PURE__ */ React.createElement(h, {
     className: "w-full",
     flipKey: isFront
@@ -1209,17 +1222,23 @@ const VCDisplayCard2 = ({
     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(v, {
+    inverseFlipId: "card"
   }, /* @__PURE__ */ React.createElement(RibbonEnd, {
     side: "left",
     className: "absolute left-[-30px] top-[50px] z-0",
     height: "100"
-  }), /* @__PURE__ */ React.createElement(RibbonEnd, {
+  })), /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "card"
+  }, /* @__PURE__ */ React.createElement(RibbonEnd, {
     side: "right",
     className: "absolute right-[-30px] top-[50px] z-0",
     height: "100"
-  }), /* @__PURE__ */ React.createElement("h1", {
+  })), /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "card"
+  }, /* @__PURE__ */ React.createElement("h1", {
     ref: headerRef,
-    className: "vc-card-header px-[20px] pb-[10px] pt-[3px] overflow-visible mt-[40px] absolute text-center bg-white border-y-[5px] border-[#EEF2FF] shadow-bottom w-[calc(100%_+_16px)] rounded-t-[8px] z-50",
+    className: `${headerClassName} absolute`,
     style: { wordBreak: "break-word" }
   }, customRibbonCategoryComponent && customRibbonCategoryComponent, !customRibbonCategoryComponent && /* @__PURE__ */ React.createElement(VCDisplayCardCategoryType, {
     categoryType
@@ -1228,20 +1247,34 @@ const VCDisplayCard2 = ({
     maxFontSize: 32,
     minFontSize: 20,
     width: ((headerWidth != null ? headerWidth : 290) - 40).toString(),
-    className: "vc-card-header-main-title text-[#18224E] leading-[100%] text-shadow text-[32px]"
-  })), isFront && handleXClick && /* @__PURE__ */ React.createElement("button", {
+    className: headerFitTextClassName
+  }))), isFront && handleXClick && /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "card"
+  }, /* @__PURE__ */ React.createElement("button", {
     className: "vc-card-x-button absolute top-[-25px] bg-white rounded-full h-[50px] w-[50px] flex items-center justify-center z-50",
     onClick: handleXClick
-  }, /* @__PURE__ */ React.createElement(RoundedX, null)), /* @__PURE__ */ React.createElement("div", {
-    className: "relative pt-[114px] vc-card-content-container flex flex-col items-center grow min-h-0 w-full rounded-t-[30px] bg-[#353E64] rounded-b-[200px]",
-    style: backgroundStyle
+  }, /* @__PURE__ */ React.createElement(RoundedX, null))), /* @__PURE__ */ React.createElement("div", {
+    className: "relative vc-card-content-container flex flex-col items-center grow min-h-0 w-full rounded-t-[30px] bg-[#353E64] rounded-b-[200px]"
   }, /* @__PURE__ */ React.createElement(v, {
-    flipId: "scroll-container"
+    inverseFlipId: "card",
+    scale: true
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "vc-card-content-scroll-container w-full pt-[20px] min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[200px] scrollbar-hide pb-[50px]"
-  }, isFront && /* @__PURE__ */ React.createElement(v, {
-    flipId: "face"
-  }, /* @__PURE__ */ React.createElement(VC2FrontFaceInfo, {
+    className: "absolute top-0 left-0 w-full h-full rounded-b-[200px] rounded-t-[30px]",
+    style: backgroundStyle
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "vc-card-content-scroll-container w-full pt-[20px] min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[200px] scrollbar-hide pb-[50px] z-50"
+  }, /* @__PURE__ */ React.createElement("h1", {
+    className: `${headerClassName} invisible`,
+    style: { wordBreak: "break-word" }
+  }, customRibbonCategoryComponent && customRibbonCategoryComponent, !customRibbonCategoryComponent && /* @__PURE__ */ React.createElement(VCDisplayCardCategoryType, {
+    categoryType
+  }), /* @__PURE__ */ React.createElement(FitText, {
+    text: _title != null ? _title : "",
+    maxFontSize: 32,
+    minFontSize: 20,
+    width: ((headerWidth != null ? headerWidth : 290) - 40).toString(),
+    className: headerFitTextClassName
+  })), isFront && /* @__PURE__ */ React.createElement(VC2FrontFaceInfo, {
     credential,
     issuee,
     subjectDID,
@@ -1254,9 +1287,7 @@ const VCDisplayCard2 = ({
     createdAt: createdAt != null ? createdAt : "",
     imageUrl,
     trustedAppRegistry
-  })), !isFront && /* @__PURE__ */ React.createElement(v, {
-    flipId: "face"
-  }, /* @__PURE__ */ React.createElement(VC2BackFace, {
+  }), !isFront && /* @__PURE__ */ React.createElement(VC2BackFace, {
     credential,
     verificationItems,
     issueHistory,
@@ -1270,26 +1301,32 @@ const VCDisplayCard2 = ({
     customIssueHistoryComponent,
     enableLightbox,
     customSkillsComponent
-  })), isFront && /* @__PURE__ */ React.createElement(VCDisplayCardSkillsCount, {
+  }), /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "card"
+  }, isFront && /* @__PURE__ */ React.createElement(VCDisplayCardSkillsCount, {
     skills: credential == null ? void 0 : credential.skills,
     onClick: () => setIsFront(!isFront)
-  }), (!hideNavButtons || showDetailsBtn) && /* @__PURE__ */ React.createElement(React.Fragment, null, isFront && customFrontButton, (isFront && !customFrontButton || isFront && showDetailsBtn) && /* @__PURE__ */ React.createElement(v, {
-    flipId: "details-back-button"
+  })), (!hideNavButtons || showDetailsBtn) && /* @__PURE__ */ React.createElement(React.Fragment, null, isFront && customFrontButton, (isFront && !customFrontButton || isFront && showDetailsBtn) && /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "card"
   }, /* @__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(v, {
-    flipId: "details-back-button"
+    inverseFlipId: "card"
   }, /* @__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", {
+  }, /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "card"
+  }, customFooterComponent && customFooterComponent), /* @__PURE__ */ React.createElement(v, {
+    inverseFlipId: "card"
+  }, !customFooterComponent && /* @__PURE__ */ React.createElement(React.Fragment, null, worstVerificationStatus === VerificationStatusEnum.Failed ? /* @__PURE__ */ React.createElement("div", {
     className: "w-[40px]",
     role: "presentation"
   }) : /* @__PURE__ */ React.createElement(VCVerificationCheckWithSpinner, {
@@ -1305,9 +1342,11 @@ const VCDisplayCard2 = ({
     style: { color: statusColor }
   }, worstVerificationStatus)), /* @__PURE__ */ React.createElement("div", {
     className: "vc-footer-icon rounded-[20px] h-[40px] w-[40px] flex items-center justify-center overflow-hidden",
-    style: { backgroundColor: (_f = bottomRightIcon == null ? void 0 : bottomRightIcon.color) != null ? _f : "#6366F1" }
-  }, (_g = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _g : /* @__PURE__ */ React.createElement(AwardRibbon, null)))))));
+    style: {
+      backgroundColor: (_f = bottomRightIcon == null ? void 0 : bottomRightIcon.color) != null ? _f : "#6366F1"
+    }
+  }, (_g = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _g : /* @__PURE__ */ React.createElement(AwardRibbon, null))))))));
 };
 
 export { VCDisplayCard2 as V, VCDisplayCardSkillsCount as a, VCIDDisplayCard as b };
-//# sourceMappingURL=VCDisplayCard2-8d6cb009.js.map
+//# sourceMappingURL=VCDisplayCard2-06c93532.js.map