@learncard/react 2.3.57 → 2.3.62

package/LICENSE

@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2022 Learning Economy Foundation <sdk@learningeconomy.io>
+
+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.
+Footer
+© 2022 GitHub, Inc.
+Footer navigation
+Terms

package/README.md

@@ -8,10 +8,14 @@
 
 **LearnCard React** is dedicated set of **open-source**, **flexible**, and **reusable Storybook UX React components for credential and currency** built for the future of education and work.
 
+![learn-card](https://user-images.githubusercontent.com/2185016/201373744-058bef30-dec8-46cf-9552-408b7bc43532.gif)
+
 ## Documentation
 All LearnCard documentation can be found at:
 https://docs.learncard.com
 
+Docs for LearnCard React can be found at:
+https://docs.learncard.com/learn-card-sdk/learncard-ux
 
 ## Install
 
@@ -35,8 +39,8 @@ const Test = () => {
     useEffect(() => {
         const getVc = async () => {
             const wallet = await initLearnCard({ seed: 'a' }); // Bad practice! You should be generating keys...
-            const uvc = wallet.getTestVc();
-            setVc(await wallet.issueCredential(uvc));
+            const uvc = wallet.invoke.getTestVc();
+            setVc(await wallet.invoke.issueCredential(uvc));
         };
         
         getVc();

package/dist/base.css

@@ -1 +1 @@
-/*! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}
+/*! tailwindcss v3.2.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}

package/dist/base.js

@@ -1,3 +1,3 @@
-var css = "/*! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}";
+var css = "/*! tailwindcss v3.2.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}";
 
 export { css, css as default };

package/dist/cjs/{CourseVerticalCard-ba8fc2f7.js → CourseVerticalCard-ef3e7ea6.js}

@@ -53,6 +53,7 @@ const CourseVerticalCard = ({
   skillCount = 0,
   checked,
   showChecked,
+  showSubCount,
   onCheckClick,
   onClick
 }) => {
@@ -73,7 +74,7 @@ const CourseVerticalCard = ({
     className: "course-card-detail-info flex flex-col justify-between"
   }, /* @__PURE__ */ React__default["default"].createElement("p", {
     className: "course-card-title text-sm text-center font-semibold line-clamp-2 mt-[4px]"
-  }, title), /* @__PURE__ */ React__default["default"].createElement("div", {
+  }, title), showSubCount && /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "course-card-counts-container flex items-center justify-center my-[5px]"
   }, /* @__PURE__ */ React__default["default"].createElement(CourseCardStatBubble, {
     type: "achievement",
@@ -94,4 +95,4 @@ const CourseVerticalCard = ({
 };
 
 exports.CourseVerticalCard = CourseVerticalCard;
-//# sourceMappingURL=CourseVerticalCard-ba8fc2f7.js.map
+//# sourceMappingURL=CourseVerticalCard-ef3e7ea6.js.map

package/dist/cjs/CourseVerticalCard-ef3e7ea6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseVerticalCard-ef3e7ea6.js","sources":["../../src/components/CourseVerticalCard/CourseVerticalCard.tsx"],"sourcesContent":["import React from 'react';\nimport { CourseCardVerticalProps } from '../../types';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport CourseCardPlaceholder from '../../assets/images/lhplaceholder.png';\nimport { RoundedPill } from '../RoundedPill';\nimport MiniTrophyIcon from '../../assets/images/minitrophy.svg';\nimport MiniJobIcon from '../../assets/images/minijob.svg';\nimport MiniPuzzleIcon from '../../assets/images/minipuzzle.svg';\nimport { LCSubtypes } from '../../types';\n\nconst TYPE_TO_COURSE_MINI_ICON: any = {\n    ['job']: MiniJobIcon,\n    ['achievement']: MiniTrophyIcon,\n    ['skill']: MiniPuzzleIcon,\n};\n\nconst TYPE_TO_COLOR: any = {\n    ['job']: 'bg-emerald-700',\n    ['achievement']: 'bg-spice-500',\n    ['skill']: 'bg-indigo-500',\n};\n\ntype CourseCardStatBubbleProps = {\n    count: number | string;\n    type: string;\n    className?: string;\n};\n\nconst CourseCardStatBubble: React.FC<CourseCardStatBubbleProps> = ({\n    count = 0,\n    type = LCSubtypes.job,\n    className,\n}) => {\n    const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];\n    const bgColor = TYPE_TO_COLOR[type];\n\n    return (\n        <div\n            className={`course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[80px] h-[30px] items-center ${className}`}\n        >\n            <img src={imgSrc} className=\"pr-[5px]\" />\n            <span className=\"flex items-center text-sm text-white\">{count}</span>\n        </div>\n    );\n};\n\nexport const CourseVerticalCard: React.FC<CourseCardVerticalProps> = ({\n    className,\n    title,\n    thumbImgSrc,\n    showStatus,\n    claimStatus = false,\n    achievementCount = 0,\n    skillCount = 0,\n    checked,\n    showChecked,\n    showSubCount,\n    onCheckClick,\n    onClick,\n}) => {\n    const claimBtnStatusType = claimStatus ? LCSubtypes.course : LCSubtypes.locked;\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[265px] rounded-[20px] ${className}`}\n        >\n            <section\n                className={`relative flex h-[120px] flex-col justify-center items-center w-full rounded-[20px]`}\n            >\n                <img\n                    src={CourseCardPlaceholder}\n                    className=\"course-card-img h-full w-full object-cover rounded-[20px]\"\n                />\n\n                {showChecked && (\n                    <CircleCheckButton\n                        checked={checked}\n                        onClick={onCheckClick}\n                        className=\"absolute top-[5px] left-[5px]\"\n                    />\n                )}\n            </section>\n\n            <div className=\"course-card-detail-info flex flex-col justify-between\">\n                <p className=\"course-card-title text-sm text-center font-semibold line-clamp-2 mt-[4px]\">\n                    {title}\n                </p>\n                {showSubCount && (\n                    <div className=\"course-card-counts-container flex items-center justify-center my-[5px]\">\n                        <CourseCardStatBubble\n                            type={'achievement'}\n                            count={achievementCount}\n                            className={'mr-[5px]'}\n                        />\n                        <CourseCardStatBubble\n                            type={'skill'}\n                            count={skillCount}\n                            className={'mr-[0px]'}\n                        />\n                    </div>\n                )}\n            </div>\n            {showStatus && (\n                <div className=\"course-card-footer absolute bottom-[6px] left-[5px]\">\n                    <RoundedPill\n                        onClick={onClick}\n                        showCheckmark\n                        type={claimBtnStatusType}\n                        statusText={'Passed'}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default CourseVerticalCard;\n"],"names":["MiniJobIcon","MiniTrophyIcon","MiniPuzzleIcon","LCSubtypes","React","CourseCardPlaceholder","CircleCheckButton","RoundedPill"],"mappings":"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"}

package/dist/cjs/{FlippyCard-33e03a9e.js → FlippyCard-2cbe2dbe.js}

@@ -6,10 +6,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const FRONT_FACE = "front";
-const BACK_FACE = "back";
-const FlippyCard = ({ children }) => {
-  const [flipState, setFlipState] = React.useState(FRONT_FACE);
+const FlippyCard = ({ children, flipState }) => {
   if ((children == null ? void 0 : children.length) > 3) {
     console.warn("More than two children passed into Flippy Card! \u{1F633}\u{1F633}\u{1F633} Picking first two...");
   }
@@ -17,20 +14,13 @@ const FlippyCard = ({ children }) => {
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null);
   const frontCard = children == null ? void 0 : children[0];
   const backCard = (children == null ? void 0 : children[1]) || (children == null ? void 0 : children[0]);
-  const handleClick = () => {
-    if (flipState === FRONT_FACE)
-      setFlipState(BACK_FACE);
-    if (flipState === BACK_FACE)
-      setFlipState(FRONT_FACE);
-  };
-  const flipCardCSSClass = flipState === FRONT_FACE ? "flippy-card" : "flippy-card is-flipped";
+  const flipCardCSSClass = flipState === "front" ? "flippy-card" : "flippy-card is-flipped";
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     "data-testid": "flippy-card-wrapper",
     className: "flippy-wrapper-container"
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     "data-testid": "flippy-card",
-    className: flipCardCSSClass,
-    onClick: handleClick
+    className: flipCardCSSClass
   }, /* @__PURE__ */ React__default["default"].createElement("section", {
     "data-testid": "flippy-card-front",
     className: "card-face card-face--front"
@@ -41,4 +31,4 @@ const FlippyCard = ({ children }) => {
 };
 
 exports.FlippyCard = FlippyCard;
-//# sourceMappingURL=FlippyCard-33e03a9e.js.map
+//# sourceMappingURL=FlippyCard-2cbe2dbe.js.map

package/dist/cjs/FlippyCard-2cbe2dbe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlippyCard-2cbe2dbe.js","sources":["../../src/components/FlippyCard/FlippyCard.tsx"],"sourcesContent":["import React from 'react';\n\nexport type FlippyCardProps = {\n    children: React.ReactChild[];\n    flipState?: 'front' | 'back' | undefined | string;\n};\n\nexport const FlippyCard: React.FC<FlippyCardProps> = ({ children, flipState }) => {\n    if (children?.length > 3) {\n        console.warn('More than two children passed into Flippy Card! 😳😳😳 Picking first two...');\n    }\n\n    if (!children) return <></>;\n\n    const frontCard = children?.[0] as React.ReactNode;\n    const backCard = (children?.[1] as React.ReactNode) || (children?.[0] as React.ReactNode);\n\n    const flipCardCSSClass = flipState === 'front' ? 'flippy-card' : 'flippy-card is-flipped';\n\n    return (\n        <div data-testid=\"flippy-card-wrapper\" className=\"flippy-wrapper-container\">\n            <div data-testid=\"flippy-card\" className={flipCardCSSClass}>\n                <section data-testid=\"flippy-card-front\" className=\"card-face card-face--front\">\n                    {frontCard}\n                </section>\n                <section data-testid=\"flippy-card-back\" className=\"card-face card-face--back\">\n                    {backCard}\n                </section>\n            </div>\n        </div>\n    );\n};\n\nexport default FlippyCard;\n"],"names":["React"],"mappings":";;;;;;;;AAOO,MAAM,UAAwC,GAAA,CAAC,EAAE,QAAA,EAAU,WAAgB,KAAA;AAC9E,EAAI,IAAA,CAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,UAAS,CAAG,EAAA;AACtB,IAAA,OAAA,CAAQ,KAAK,kGAA6E,CAAA,CAAA;AAAA,GAC9F;AAEA,EAAA,IAAI,CAAC,QAAA;AAAU,IAAA,uBAASA,yBAAA,CAAA,aAAA,CAAAA,yBAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAExB,EAAA,MAAM,YAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAA,CAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,MAA2B,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEnE,EAAM,MAAA,gBAAA,GAAmB,SAAc,KAAA,OAAA,GAAU,aAAgB,GAAA,wBAAA,CAAA;AAEjE,EAAA,uBACKA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,qBAAA;AAAA,IAAsB,SAAU,EAAA,0BAAA;AAAA,GAAA,kBAC5CA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,aAAA;AAAA,IAAc,SAAW,EAAA,gBAAA;AAAA,GAAA,kBACrCA,yBAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,aAAY,EAAA,mBAAA;AAAA,IAAoB,SAAU,EAAA,4BAAA;AAAA,GAC9C,EAAA,SACL,mBACCA,yBAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,aAAY,EAAA,kBAAA;AAAA,IAAmB,SAAU,EAAA,2BAAA;AAAA,GAC7C,EAAA,QACL,CACJ,CACJ,CAAA,CAAA;AAER;;;;"}

package/dist/cjs/{GenericCard-c5b70b29.js → GenericCard-39248302.js}

@@ -3,6 +3,7 @@
 var React = require('react');
 var index$1 = require('./index-63ee021e.js');
 var index = require('./index-6cab6d37.js');
+var CircleCheckButton = require('./CircleCheckButton-97c4f608.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -16,17 +17,22 @@ const GenericCard = ({
   type = index$1.WalletCategoryTypes.achievements,
   className,
   onClick = () => {
-  }
+  },
+  showChecked,
+  checkStatus,
+  flipped
 }) => {
   var _a, _b;
   const thumbClass = (_a = `bg-${index.TYPE_TO_WALLET_DARK_COLOR[type]}`) != null ? _a : "bg-grayscale-50";
   const defaultThumbClass = `flex h-[110px] m-auto ${thumbClass} w-[140px] overflow-hidden flex-col justify-center items-center w-full rounded-[20px] ${customThumbClass}`;
   const imgSrc = (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" ? thumbImgSrc : index.TYPE_TO_IMG_SRC[type];
   const headerBgColor = (_b = `bg-${index.TYPE_TO_WALLET_DARK_COLOR[type]}`) != null ? _b : "bg-grayscale-900";
+  const checkBtnClass = checkStatus ? "generic-vc-card checked" : "generic-vc-card unchecked";
   const defaultHeaderClass = `flex generic-card-title w-full flex justify-center items-center  h-[76px] ${headerBgColor} ${customHeaderClass}`;
+  const flippedClass = flipped ? "flex-col-reverse" : "flex-col";
   return /* @__PURE__ */ React__default["default"].createElement("button", {
     onClick,
-    className: `flex generic-display-card-simple bg-white flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`
+    className: `flex generic-display-card-simple bg-white ${flippedClass} shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`
   }, /* @__PURE__ */ React__default["default"].createElement("section", {
     className: defaultHeaderClass
   }, /* @__PURE__ */ React__default["default"].createElement("p", {
@@ -42,8 +48,14 @@ const GenericCard = ({
     src: imgSrc
   })), /* @__PURE__ */ React__default["default"].createElement("section", {
     className: "generic-card-footer"
-  }));
+  }), showChecked && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "check-btn-overlay absolute top-[5px] left-[5px]"
+  }, /* @__PURE__ */ React__default["default"].createElement(CircleCheckButton.CircleCheckButton, {
+    checked: checkStatus,
+    onClick,
+    className: checkBtnClass
+  })));
 };
 
 exports.GenericCard = GenericCard;
-//# sourceMappingURL=GenericCard-c5b70b29.js.map
+//# sourceMappingURL=GenericCard-39248302.js.map

package/dist/cjs/GenericCard-39248302.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericCard-39248302.js","sources":["../../src/components/GenericCard/GenericCard.tsx"],"sourcesContent":["import React from 'react';\nimport { GenericCardProps, WalletCategoryTypes } from '../../types';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';\nimport { CircleCheckButton } from '../CircleCheckButton';\n\nexport const GenericCard: React.FC<GenericCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onClick = () => {},\n    showChecked,\n    checkStatus,\n    flipped,\n}) => {\n    const thumbClass = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` ?? 'bg-grayscale-50';\n    const defaultThumbClass = `flex h-[110px] m-auto ${thumbClass} w-[140px] overflow-hidden flex-col justify-center items-center w-full rounded-[20px] ${customThumbClass}`;\n    const imgSrc = thumbImgSrc?.trim() !== '' ? thumbImgSrc : TYPE_TO_IMG_SRC[type];\n    const headerBgColor = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` ?? 'bg-grayscale-900';\n    const checkBtnClass = checkStatus ? 'generic-vc-card checked' : 'generic-vc-card unchecked';\n    const defaultHeaderClass = `flex generic-card-title w-full flex justify-center items-center  h-[76px] ${headerBgColor} ${customHeaderClass}`;\n    const flippedClass = flipped ? 'flex-col-reverse' : 'flex-col';\n\n    return (\n        <button\n            onClick={onClick}\n            className={`flex generic-display-card-simple bg-white ${flippedClass} shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            <section className={defaultHeaderClass}>\n                <p className=\"relative z-[100] text-[14px] px-[10px] py-[0px] font-bold mt-[10px] text-center text-white line-clamp-2\">\n                    {title}\n                </p>\n            </section>\n            <section className={defaultThumbClass}>\n                {thumbImgSrc && thumbImgSrc?.trim() !== '' && (\n                    <img\n                        className=\"generic-display-card-img h-full w-full  w-[140px] h-[119px] rounded-[20px] object-cover overflow-hidden\"\n                        src={thumbImgSrc ?? ''}\n                        alt=\"Credential Achievement Image\"\n                    />\n                )}\n                {(!thumbImgSrc || thumbImgSrc?.trim() === '') && (\n                    <img\n                        className=\"max-w-[130px] w-full h-full p-[10px] object-contain\"\n                        src={imgSrc}\n                    />\n                )}\n            </section>\n\n            <section className=\"generic-card-footer\"></section>\n            {showChecked && (\n                <div className=\"check-btn-overlay absolute top-[5px] left-[5px]\">\n                    <CircleCheckButton\n                        checked={checkStatus}\n                        onClick={onClick}\n                        className={checkBtnClass}\n                    />\n                </div>\n            )}\n        </button>\n    );\n};\n\nexport default GenericCard;\n"],"names":["WalletCategoryTypes","TYPE_TO_WALLET_DARK_COLOR","TYPE_TO_IMG_SRC","React","CircleCheckButton"],"mappings":"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"}

package/dist/cjs/{SkillTabCard-82f2fae0.js → SkillTabCard-2f6e8b78.js}

@@ -16,24 +16,27 @@ const SkillTabCard = ({
   showChecked,
   onClick,
   onCheckClicked,
+  showStatus = true,
   className = "skill-tab-card"
 }) => {
+  const buttonClass = checked ? "skill-tab-check-toggle checked" : "skill-tab-check-toggle unchecked";
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: `flex-col flex justify-between items-center font-bold shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[168px] rounded-[20px] ${className}`
   }, showChecked && /* @__PURE__ */ React__default["default"].createElement(CircleCheckButton.CircleCheckButton, {
     onClick: onCheckClicked,
     checked,
+    className: buttonClass,
     bgColor: "bg-grayscale-200"
   }), /* @__PURE__ */ React__default["default"].createElement("h4", {
     className: "text-indigo-600 text-[14px] text-center line-clamp-2"
   }, title), /* @__PURE__ */ React__default["default"].createElement("p", {
     className: "line-clamp-2 text-[12px] text-center"
-  }, description), /* @__PURE__ */ React__default["default"].createElement(RoundedPill.RoundedPill, {
+  }, description), /* @__PURE__ */ React__default["default"].createElement("div", null, showStatus && /* @__PURE__ */ React__default["default"].createElement(RoundedPill.RoundedPill, {
     type: index.LCSubtypes.skill,
     statusText: "Earned",
     onClick
-  }));
+  })));
 };
 
 exports.SkillTabCard = SkillTabCard;
-//# sourceMappingURL=SkillTabCard-82f2fae0.js.map
+//# sourceMappingURL=SkillTabCard-2f6e8b78.js.map

package/dist/cjs/SkillTabCard-2f6e8b78.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTabCard-2f6e8b78.js","sources":["../../src/components/SkillTabCard/SkillTabCard.tsx"],"sourcesContent":["import React from 'react';\nimport { RoundedPill } from '../RoundedPill';\nimport { LCSubtypes } from '../../types';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport { SkillTabCardProps } from '../../types';\n\nexport const SkillTabCard: React.FC<SkillTabCardProps> = ({\n    title,\n    description,\n    checked = false,\n    showChecked,\n    onClick,\n    onCheckClicked,\n    showStatus = true,\n    className = 'skill-tab-card',\n}) => {\n    const buttonClass = checked\n        ? 'skill-tab-check-toggle checked'\n        : 'skill-tab-check-toggle unchecked';\n    return (\n        <div\n            className={`flex-col flex justify-between items-center font-bold shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[168px] rounded-[20px] ${className}`}\n        >\n            {showChecked && (\n                <CircleCheckButton\n                    onClick={onCheckClicked}\n                    checked={checked}\n                    className={buttonClass}\n                    bgColor=\"bg-grayscale-200\"\n                />\n            )}\n            <h4 className=\"text-indigo-600 text-[14px] text-center line-clamp-2\">{title}</h4>\n            <p className=\"line-clamp-2 text-[12px] text-center\">{description}</p>\n\n            <div>\n                {showStatus && (\n                    <RoundedPill type={LCSubtypes.skill} statusText={'Earned'} onClick={onClick} />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default SkillTabCard;\n"],"names":["React","CircleCheckButton","RoundedPill","LCSubtypes"],"mappings":";;;;;;;;;;;AAMO,MAAM,eAA4C,CAAC;AAAA,EACtD,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAU,GAAA,KAAA;AAAA,EACV,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAa,GAAA,IAAA;AAAA,EACb,SAAY,GAAA,gBAAA;AAChB,CAAM,KAAA;AACF,EAAM,MAAA,WAAA,GAAc,UACd,gCACA,GAAA,kCAAA,CAAA;AACN,EAAA,uBACKA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAA6J,0JAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,EAEvK,+BACIA,yBAAA,CAAA,aAAA,CAAAC,mCAAA,EAAA;AAAA,IACG,OAAS,EAAA,cAAA;AAAA,IACT,OAAA;AAAA,IACA,SAAW,EAAA,WAAA;AAAA,IACX,OAAQ,EAAA,kBAAA;AAAA,GACZ,mBAEHD,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAG,SAAU,EAAA,sDAAA;AAAA,GAAwD,EAAA,KAAM,mBAC3EA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,sCAAA;AAAA,GAAA,EAAwC,WAAY,CAAA,kBAEhEA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EACI,8BACIA,yBAAA,CAAA,aAAA,CAAAE,uBAAA,EAAA;AAAA,IAAY,MAAMC,gBAAW,CAAA,KAAA;AAAA,IAAO,UAAY,EAAA,QAAA;AAAA,IAAU,OAAA;AAAA,GAAkB,CAErF,CACJ,CAAA,CAAA;AAER;;;;"}

package/dist/cjs/{VCCard-5f411418.js → VCCard-69176b38.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var core = require('@learncard/core');
-var VCDisplayCard = require('./VCDisplayCard-dfb9701f.js');
+var VCDisplayCard = require('./VCDisplayCard-1f6d7964.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -50,4 +50,4 @@ const VCCard = ({ credential, issueeOverride, className = "" }) => {
 };
 
 exports.VCCard = VCCard;
-//# sourceMappingURL=VCCard-5f411418.js.map
+//# sourceMappingURL=VCCard-69176b38.js.map

package/dist/cjs/{VCCard-5f411418.js.map → VCCard-69176b38.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCCard-5f411418.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/core';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({ credential, issueeOverride, className = '' }) => {\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    return (\n        <VCDisplayCard\n            credential={credential}\n            issueeOverride={issueeOverride}\n            className={className}\n            loading={loading}\n            verification={vcVerification}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":["useState","useEffect","initLearnCard","React","VCDisplayCard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,SAAgC,CAAC,EAAE,YAAY,cAAgB,EAAA,SAAA,GAAY,IAAS,KAAA;AAC7F,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAAA,cAAA,CAA6B,EAAE,CAAA,CAAA;AAE3E,EAAAC,eAAA,CAAU,MAAM;AACZ,IAAA,MAAM,SAAS,MAAY,OAAA,CAAA,KAAA,CAAA,EAAA,IAAA,EAAA,aAAA;AACvB,MAAM,MAAA,MAAA,GAAS,MAAMC,kBAAc,EAAA,CAAA;AACnC,MAAM,MAAA,YAAA,GAAe,MAAM,MAAO,CAAA,MAAA,CAAO,iBAAiB,UAAY,EAAA,IAAI,IAAI,CAAA,CAAA;AAC9E,MAAA,iBAAA,CAAkB,YAAY,CAAA,CAAA;AAC9B,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KACpB,CAAA,CAAA;AAEA,IAAO,MAAA,EAAA,CAAA;AAAA,GACX,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,uBACKC,yBAAA,CAAA,aAAA,CAAAC,2BAAA,EAAA;AAAA,IACG,UAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAc,EAAA,cAAA;AAAA,GAClB,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"VCCard-69176b38.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/core';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({ credential, issueeOverride, className = '' }) => {\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    return (\n        <VCDisplayCard\n            credential={credential}\n            issueeOverride={issueeOverride}\n            className={className}\n            loading={loading}\n            verification={vcVerification}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":["useState","useEffect","initLearnCard","React","VCDisplayCard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,SAAgC,CAAC,EAAE,YAAY,cAAgB,EAAA,SAAA,GAAY,IAAS,KAAA;AAC7F,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAAA,cAAA,CAA6B,EAAE,CAAA,CAAA;AAE3E,EAAAC,eAAA,CAAU,MAAM;AACZ,IAAA,MAAM,SAAS,MAAY,OAAA,CAAA,KAAA,CAAA,EAAA,IAAA,EAAA,aAAA;AACvB,MAAM,MAAA,MAAA,GAAS,MAAMC,kBAAc,EAAA,CAAA;AACnC,MAAM,MAAA,YAAA,GAAe,MAAM,MAAO,CAAA,MAAA,CAAO,iBAAiB,UAAY,EAAA,IAAI,IAAI,CAAA,CAAA;AAC9E,MAAA,iBAAA,CAAkB,YAAY,CAAA,CAAA;AAC9B,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KACpB,CAAA,CAAA;AAEA,IAAO,MAAA,EAAA,CAAA;AAAA,GACX,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,uBACKC,yBAAA,CAAA,aAAA,CAAAC,2BAAA,EAAA;AAAA,IACG,UAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAc,EAAA,cAAA;AAAA,GAClB,CAAA,CAAA;AAER;;;;"}

package/dist/cjs/{VCDisplayBackFace-0ffe0e45.js → VCDisplayBackFace-30fcbf18.js}

@@ -34,27 +34,16 @@ const VCDisplayBackFace = ({
   credentialSubject,
   className = "",
   loading,
-  verification = []
+  verification = [],
+  handleClick,
+  overrideDetailsComponent
 }) => {
   var _a, _b, _c, _d;
   const descriptionText = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _a.description;
   const criteriaText = (_c = (_b = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _b.criteria) == null ? void 0 : _c.narrative;
   const issuerUrl = typeof issuer === "object" ? issuer.url : "";
   const issuerName = getNameFromProfile(issuer != null ? issuer : "");
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: `flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
-  }, /* @__PURE__ */ React__default["default"].createElement("section", {
-    className: "flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]"
-  }), /* @__PURE__ */ React__default["default"].createElement("section", {
-    className: "flex flex-col items-center justify-center z-10 text-left credential-details-container max-w-[100%] relative"
-  }, /* @__PURE__ */ React__default["default"].createElement("section", {
-    className: "flex flex-row items-start justify-start w-full line-clamp-2"
-  }, /* @__PURE__ */ React__default["default"].createElement("h3", {
-    className: "text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700",
-    "data-testid": "vc-credential-details-title tracking-wide subpixel-antialiased"
-  }, "Credential Details")), /* @__PURE__ */ React__default["default"].createElement("section", {
-    className: "flex flex-col mt-2 w-full my-2 min-h-[200px] credential-details-info"
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+  const defaultDetails = /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "width-full"
   }, /* @__PURE__ */ React__default["default"].createElement("h6", {
     className: "line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased"
@@ -74,10 +63,26 @@ const VCDisplayBackFace = ({
     className: "max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all"
   }, issuerName)), issuerUrl && /* @__PURE__ */ React__default["default"].createElement("p", {
     className: "text-indigo-500 font-bold text-xs width-full text-center mt-8"
-  }, issuerUrl)), /* @__PURE__ */ React__default["default"].createElement("div", {
+  }, issuerUrl));
+  const renderDetails = overrideDetailsComponent ? overrideDetailsComponent : defaultDetails;
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `z-[9] vc-display-main-card-back flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
+  }, /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]"
+  }), /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "flex flex-col items-center justify-center w-full z-10 text-left credential-details-container max-w-[100%] relative"
+  }, /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "flex flex-row items-start justify-start w-full line-clamp-2"
+  }, /* @__PURE__ */ React__default["default"].createElement("h3", {
+    className: "text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700",
+    "data-testid": "vc-credential-details-title tracking-wide subpixel-antialiased"
+  }, "Credential Details")), /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "flex flex-col mt-2 w-full my-2 min-h-[200px] credential-details-info"
+  }, renderDetails), /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "w-full mt-2"
   }), /* @__PURE__ */ React__default["default"].createElement("button", {
-    className: "bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 shadow-3xl rounded-full"
+    onClick: handleClick,
+    className: "vc-flip-btn bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 shadow-3xl rounded-full"
   }, /* @__PURE__ */ React__default["default"].createElement("span", {
     className: "flex justify-center"
   }, /* @__PURE__ */ React__default["default"].createElement("img", {
@@ -99,4 +104,4 @@ const VCDisplayBackFace = ({
 exports.VCDisplayBackFace = VCDisplayBackFace;
 exports.getImageFromProfile = getImageFromProfile;
 exports.getNameFromProfile = getNameFromProfile;
-//# sourceMappingURL=VCDisplayBackFace-0ffe0e45.js.map
+//# sourceMappingURL=VCDisplayBackFace-30fcbf18.js.map

package/dist/cjs/VCDisplayBackFace-30fcbf18.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCDisplayBackFace-30fcbf18.js","sources":["../../src/helpers/credential.helpers.ts","../../src/components/VCDisplayBackFace/VCDisplayBackFace.tsx"],"sourcesContent":["import { Image, Profile } from '@learncard/types';\n\nexport const getImageFromImage = (image: Image): string => {\n    if (typeof image === 'string') return image;\n\n    return image.id ?? '';\n};\n\nexport const getNameFromProfile = (profile: Profile): string => {\n    if (typeof profile === 'string') return profile;\n\n    return profile.name ?? '';\n};\n\nexport const getImageFromProfile = (profile: Profile): string => {\n    if (typeof profile === 'string') return '';\n\n    return getImageFromImage(profile.image ?? '');\n};\n","import React from 'react';\nimport { VCDisplayCardProps } from '../../types';\nimport { VCVerificationCheckWithText } from '../VCVerificationCheck/VCVerificationCheck';\nimport VCVerificationPill from '../VCVerificationPill/VCVerificationPill';\nimport FlipArrowRight from '../../assets/images/ArrowArcRight.svg';\nimport { getNameFromProfile } from '../../helpers/credential.helpers';\n\nexport const VCDisplayBackFace: React.FC<VCDisplayCardProps> = ({\n    issuer,\n    credentialSubject,\n    className = '',\n    loading,\n    verification = [],\n    handleClick,\n    overrideDetailsComponent,\n}) => {\n    const descriptionText = credentialSubject?.achievement?.description;\n    const criteriaText = credentialSubject?.achievement?.criteria?.narrative;\n    const issuerUrl = typeof issuer === 'object' ? issuer.url : '';\n    const issuerName = getNameFromProfile(issuer ?? '');\n    const defaultDetails = (\n        <>\n            <div className=\"width-full\">\n                <h6 className=\"line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased\">\n                    Description\n                </h6>\n                <p className=\"line-clamp-3 subpixel-antialiased text-grayscale-600 text-[14px] lc-line-clamp\">\n                    {descriptionText}\n                </p>\n            </div>\n\n            <div className=\"width-full mt-[10px]\">\n                <h6 className=\"line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider  subpixel-antialiased\">\n                    Criteria\n                </h6>\n                <p className=\"line-clamp-3 subpixel-antialiased text-grayscale-600 text-[14px] lc-line-clamp\">\n                    {criteriaText}\n                </p>\n            </div>\n\n            <div className=\"width-full mt-[10px] line-clamp-1 overflow-hidden vc-issuer-name-info\">\n                <h6 className=\"line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased\">\n                    Issuer\n                </h6>\n                <p className=\"max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all\">\n                    {issuerName}\n                </p>\n            </div>\n\n            {issuerUrl && (\n                <p className=\"text-indigo-500 font-bold text-xs width-full text-center mt-8\">\n                    {issuerUrl}\n                </p>\n            )}\n        </>\n    );\n\n    const renderDetails = overrideDetailsComponent ? overrideDetailsComponent : defaultDetails;\n\n    return (\n        <div\n            className={`z-[9] vc-display-main-card-back flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}\n        >\n            <section className=\"flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]\"></section>\n            <section className=\"flex flex-col items-center justify-center w-full z-10 text-left credential-details-container max-w-[100%] relative\">\n                <section className=\"flex flex-row items-start justify-start w-full line-clamp-2\">\n                    <h3\n                        className=\"text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700\"\n                        data-testid=\"vc-credential-details-title tracking-wide subpixel-antialiased\"\n                    >\n                        Credential Details\n                    </h3>\n                </section>\n\n                <section className=\"flex flex-col mt-2 w-full my-2 min-h-[200px] credential-details-info\">\n                    {renderDetails}\n                </section>\n\n                <div className=\"w-full mt-2\"></div>\n\n                <button\n                    onClick={handleClick}\n                    className=\"vc-flip-btn bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 shadow-3xl rounded-full\"\n                >\n                    <span className=\"flex justify-center\">\n                        <img\n                            className=\"h-8 w-8 my-0 mx-4 scale-x-[-1]\"\n                            src={FlipArrowRight ?? ''}\n                            alt=\"Flip Card\"\n                        />\n                    </span>\n                </button>\n\n                <section className=\"flex-col items-center justify-center checklist-container justify-center w-[100%] width-full mt-[20px]\">\n                    <VCVerificationCheckWithText loading={loading} />\n                    <section>\n                        {verification.map(item => (\n                            <VCVerificationPill\n                                key={item.check}\n                                status={item.status}\n                                message={item.message}\n                                details={item.details}\n                            />\n                        ))}\n                    </section>\n                </section>\n            </section>\n        </div>\n    );\n};\n\nexport default VCDisplayBackFace;\n"],"names":["React","FlipArrowRight","VCVerificationCheckWithText","VCVerificationPill"],"mappings":"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"}

package/dist/cjs/{VCDisplayCard-dfb9701f.js → VCDisplayCard-1f6d7964.js}

@@ -1,18 +1,16 @@
 'use strict';
 
 var React = require('react');
-var FlippyCard = require('./FlippyCard-33e03a9e.js');
+var FlippyCard = require('./FlippyCard-2cbe2dbe.js');
 var FatArrow = require('./icon.green.fat-arrow.png');
-var FlipArrowRight = require('./ArrowArcRight.svg');
 var DefaultFace = require('./default-face.jpeg');
 var VCVerificationCheck = require('./VCVerificationCheck-0e495524.js');
-var VCDisplayBackFace = require('./VCDisplayBackFace-0ffe0e45.js');
+var VCDisplayBackFace = require('./VCDisplayBackFace-30fcbf18.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var FatArrow__default = /*#__PURE__*/_interopDefaultLegacy(FatArrow);
-var FlipArrowRight__default = /*#__PURE__*/_interopDefaultLegacy(FlipArrowRight);
 var DefaultFace__default = /*#__PURE__*/_interopDefaultLegacy(DefaultFace);
 
 function toInteger(dirtyNumber) {
@@ -5688,9 +5686,13 @@ const VCDisplayFrontFace = ({
   hideProfileBubbles = false,
   credentialSubject,
   className = "",
-  loading
+  loading,
+  handleClick,
+  overrideCardImageComponent,
+  overrideCardTitle,
+  customHeaderComponent
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e;
   const credentialAchievementImage = ((_b = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _a.image) == null ? void 0 : _b.id) || ((_c = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _c.image);
   const issuerName = VCDisplayBackFace.getNameFromProfile(issuer != null ? issuer : "");
   const issueeName = VCDisplayBackFace.getNameFromProfile(issuee != null ? issuee : "");
@@ -5726,26 +5728,29 @@ const VCDisplayFrontFace = ({
   if (issuerImageComponent) {
     issuerImageEl = issuerImageComponent;
   }
+  const credImg = credentialAchievementImage ? /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "h-full w-full object-cover",
+    src: credentialAchievementImage != null ? credentialAchievementImage : "",
+    alt: "Credential Achievement Image"
+  }) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null);
+  const renderCardImg = overrideCardImageComponent ? overrideCardImageComponent : credImg;
+  const cardTitle = overrideCardTitle ? overrideCardTitle : title;
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: `flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[600px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
+    className: `z-[9] vc-display-main-card-front flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[600px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
   }, /* @__PURE__ */ React__default["default"].createElement("section", {
     className: "bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[77%]"
   }), /* @__PURE__ */ React__default["default"].createElement("section", {
     className: "flex flex-col items-center justify-center z-10 text-center credential-thumb-img"
   }, /* @__PURE__ */ React__default["default"].createElement("section", {
     className: "max-w-[100px] max-h-[100px]"
-  }, credentialAchievementImage && /* @__PURE__ */ React__default["default"].createElement("img", {
-    className: "h-full w-full object-cover",
-    src: credentialAchievementImage != null ? credentialAchievementImage : "",
-    alt: "Credential Achievement Image"
-  })), /* @__PURE__ */ React__default["default"].createElement("section", {
+  }, renderCardImg), /* @__PURE__ */ React__default["default"].createElement("section", {
     className: "flex flex-row  w-full line-clamp-2"
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "flex flex-row w-full line-clamp-2 py-4 vc-flippy-card-title-front "
   }, /* @__PURE__ */ React__default["default"].createElement("h3", {
     className: "vc-thumbnail-title w-full text-2xl line-clamp-2 tracking-wide leading-snug text-center vc-display-title text-gray-900 font-medium",
     "data-testid": "vc-thumbnail-title"
-  }, title != null ? title : ""))), /* @__PURE__ */ React__default["default"].createElement("section", {
+  }, cardTitle != null ? cardTitle : "")), customHeaderComponent && customHeaderComponent), /* @__PURE__ */ React__default["default"].createElement("section", {
     className: "flex flex-row items-center justify-center mt-2 w-full my-2 vc-card-issuer-thumbs"
   }, !hideProfileBubbles && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white"
@@ -5765,22 +5770,21 @@ const VCDisplayFrontFace = ({
   }, issueeName), " on", " ", createdAt != null ? createdAt : "", " by", " ", /* @__PURE__ */ React__default["default"].createElement("span", {
     className: "font-bold text-gray-900"
   }, " ", issuerName))), /* @__PURE__ */ React__default["default"].createElement("button", {
-    className: "cursor-alias bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 shadow-3xl rounded-full"
+    onClick: handleClick,
+    className: "cursor-alias bg-white my-3 border-0 text-indigo-500 font-semibold py-2 px-4 sl"
   }, /* @__PURE__ */ React__default["default"].createElement("span", {
     className: "flex justify-center"
   }, /* @__PURE__ */ React__default["default"].createElement("p", {
     className: "flex items-center"
-  }, "Details"), /* @__PURE__ */ React__default["default"].createElement("img", {
-    className: "h-8 w-8 my-0 mx-1",
-    src: (_f = FlipArrowRight__default["default"]) != null ? _f : "",
-    alt: "Flip Card"
-  })))), /* @__PURE__ */ React__default["default"].createElement("div", {
+  }, "View Details")))), /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "flex items-center justify-center w-full"
   }, /* @__PURE__ */ React__default["default"].createElement(VCVerificationCheck.VCVerificationCheckWithText, {
     loading
   })));
 };
 
+const FRONT_FACE = "front";
+const BACK_FACE = "back";
 const getInfoFromCredential = (credential) => {
   var _a;
   const { issuer, issuanceDate } = credential;
@@ -5799,8 +5803,13 @@ const VCDisplayCard = ({
   verification = [],
   hideProfileBubbles = false,
   subjectImageComponent,
-  issuerImageComponent
+  issuerImageComponent,
+  overrideDetailsComponent,
+  overrideCardTitle,
+  overrideCardImageComponent,
+  customHeaderComponent
 }) => {
+  const [flipState, setFlipState] = React.useState(FRONT_FACE);
   const {
     title,
     createdAt,
@@ -5810,28 +5819,44 @@ const VCDisplayCard = ({
   } = getInfoFromCredential(credential);
   const issuee = issueeOverride || _issuee;
   const issuer = issuerOverride || _issuer;
-  return /* @__PURE__ */ React__default["default"].createElement(FlippyCard.FlippyCard, null, /* @__PURE__ */ React__default["default"].createElement(VCDisplayFrontFace, {
+  const handleFlip = () => {
+    if (flipState === FRONT_FACE) {
+      setFlipState(BACK_FACE);
+    }
+    if (flipState === BACK_FACE) {
+      setFlipState(FRONT_FACE);
+    }
+  };
+  return /* @__PURE__ */ React__default["default"].createElement(FlippyCard.FlippyCard, {
+    flipState
+  }, /* @__PURE__ */ React__default["default"].createElement(VCDisplayFrontFace, {
     title,
     credentialSubject,
+    customHeaderComponent,
     issuer,
     issuee,
     subjectImageComponent,
     issuerImageComponent,
+    overrideCardImageComponent,
+    overrideCardTitle,
     hideProfileBubbles,
     createdAt,
     className,
-    loading
+    loading,
+    handleClick: handleFlip
   }), /* @__PURE__ */ React__default["default"].createElement(VCDisplayBackFace.VCDisplayBackFace, {
     title,
     credentialSubject,
+    overrideDetailsComponent,
     issuer,
     issuee,
     createdAt,
     className,
     loading,
-    verification
+    verification,
+    handleClick: handleFlip
   }));
 };
 
 exports.VCDisplayCard = VCDisplayCard;
-//# sourceMappingURL=VCDisplayCard-dfb9701f.js.map
+//# sourceMappingURL=VCDisplayCard-1f6d7964.js.map