@learncard/react 2.3.21 → 2.3.25

package/dist/cjs/master-card-logo.svg

@@ -0,0 +1,20 @@
+<svg width="38" height="23" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.638 2.45389C17.629 0.861652 15.1421 -0.00309551 12.5811 8.32635e-06C9.54775 8.32635e-06 6.6386 1.20811 4.49368 3.35853C2.34875 5.50896 1.14374 8.42557 1.14374 11.4667C1.14374 14.5079 2.34875 17.4245 4.49368 19.5749C6.6386 21.7254 9.54775 22.9335 12.5811 22.9335C15.1397 22.9336 17.6244 22.0736 19.638 20.491C18.2789 19.4171 17.1806 18.048 16.4258 16.4868C15.6709 14.9257 15.2793 13.2131 15.2804 11.4782C15.2776 9.74134 15.6684 8.02655 16.4233 6.46325C17.1782 4.89995 18.2774 3.529 19.638 2.45389Z" fill="#AF0014"/>
+<path d="M18.4943 2.45389C16.4852 0.861652 13.9984 -0.00309551 11.4374 8.32635e-06C8.40401 8.32635e-06 5.49487 1.20811 3.34994 3.35853C1.20501 5.50896 0 8.42557 0 11.4667C0 14.5079 1.20501 17.4245 3.34994 19.5749C5.49487 21.7254 8.40401 22.9335 11.4374 22.9335C13.996 22.9336 16.4807 22.0736 18.4943 20.491C17.1352 19.4171 16.0368 18.048 15.282 16.4868C14.5272 14.9257 14.1356 13.2131 14.1366 11.4782C14.1338 9.74134 14.5246 8.02655 15.2795 6.46325C16.0344 4.89995 17.1336 3.529 18.4943 2.45389Z" fill="#EB001B"/>
+<g filter="url(#filter0_d_547_1495)">
+<path d="M25.5626 0C22.9988 0.000582271 20.5095 0.86478 18.4943 2.45388C19.8555 3.52664 20.956 4.89524 21.7128 6.45648C22.4697 8.01773 22.8631 9.73087 22.8634 11.4667C22.8631 13.2026 22.4697 14.9157 21.7128 16.477C20.956 18.0382 19.8555 19.4068 18.4943 20.4796C20.511 22.0646 23.0001 22.9247 25.5626 22.922C28.596 22.922 31.5051 21.7139 33.6501 19.5635C35.795 17.413 37 14.4964 37 11.4553C36.997 8.41608 35.7906 5.50242 33.646 3.35447C31.5014 1.20653 28.594 -1.51959e-06 25.5626 0Z" fill="#F79E1B"/>
+</g>
+<path d="M18.4943 2.45411H18.506L18.4943 2.44238V2.45411Z" fill="#F79E1B"/>
+<path d="M14.1366 11.4667C14.1356 13.2016 14.5272 14.9142 15.282 16.4753C16.0368 18.0365 17.1352 19.4056 18.4943 20.4795C19.8555 19.4068 20.956 18.0382 21.7128 16.4769C22.4697 14.9157 22.8631 13.2026 22.8634 11.4667C22.8631 9.73084 22.4697 8.0177 21.7128 6.45646C20.956 4.89522 19.8555 3.52662 18.4943 2.45386C17.1352 3.52777 16.0368 4.89689 15.282 6.45806C14.5272 8.01924 14.1356 9.73178 14.1366 11.4667Z" fill="#FF5F00"/>
+<defs>
+<filter id="filter0_d_547_1495" x="18.4943" y="0" width="19.5057" height="22.9219" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.891667 0 0 0 0 0.530947 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_547_1495"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_547_1495" result="shape"/>
+</filter>
+</defs>
+</svg>

package/dist/cjs/trophy.svg

@@ -0,0 +1,3 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.75 5H23V3.75C23 3.41848 22.8683 3.10054 22.6339 2.86612C22.3995 2.6317 22.0815 2.5 21.75 2.5H9.25C8.91848 2.5 8.60054 2.6317 8.36612 2.86612C8.1317 3.10054 8 3.41848 8 3.75V5H4.25C3.91848 5 3.60054 5.1317 3.36612 5.36612C3.1317 5.60054 3 5.91848 3 6.25V10C3 11.3261 3.52678 12.5979 4.46447 13.5355C5.40215 14.4732 6.67392 15 8 15H9.925C11.0557 16.2614 12.5801 17.1029 14.25 17.3875V20H13C12.0054 20 11.0516 20.3951 10.3483 21.0983C9.64509 21.8016 9.25 22.7554 9.25 23.75V26.25C9.25 26.5815 9.3817 26.8995 9.61612 27.1339C9.85054 27.3683 10.1685 27.5 10.5 27.5H20.5C20.8315 27.5 21.1495 27.3683 21.3839 27.1339C21.6183 26.8995 21.75 26.5815 21.75 26.25V23.75C21.75 22.7554 21.3549 21.8016 20.6517 21.0983C19.9484 20.3951 18.9946 20 18 20H16.75V17.3875C18.4199 17.1029 19.9443 16.2614 21.075 15H23C24.3261 15 25.5979 14.4732 26.5355 13.5355C27.4732 12.5979 28 11.3261 28 10V6.25C28 5.91848 27.8683 5.60054 27.6339 5.36612C27.3995 5.1317 27.0815 5 26.75 5ZM8 12.5C7.33696 12.5 6.70107 12.2366 6.23223 11.7678C5.76339 11.2989 5.5 10.663 5.5 10V7.5H8V10C8.00275 10.8521 8.1507 11.6976 8.4375 12.5H8ZM18 22.5C18.3315 22.5 18.6495 22.6317 18.8839 22.8661C19.1183 23.1005 19.25 23.4185 19.25 23.75V25H11.75V23.75C11.75 23.4185 11.8817 23.1005 12.1161 22.8661C12.3505 22.6317 12.6685 22.5 13 22.5H18ZM20.5 10C20.5 11.3261 19.9732 12.5979 19.0355 13.5355C18.0979 14.4732 16.8261 15 15.5 15C14.1739 15 12.9021 14.4732 11.9645 13.5355C11.0268 12.5979 10.5 11.3261 10.5 10V5H20.5V10ZM25.5 10C25.5 10.663 25.2366 11.2989 24.7678 11.7678C24.2989 12.2366 23.663 12.5 23 12.5H22.5625C22.8493 11.6976 22.9972 10.8521 23 10V7.5H25.5V10Z" fill="#FF9470"/>
+</svg>

package/dist/cjs/user.svg

@@ -0,0 +1,4 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 19.25C19.6421 19.25 23 15.8921 23 11.75C23 7.60786 19.6421 4.25 15.5 4.25C11.3579 4.25 8 7.60786 8 11.75C8 15.8921 11.3579 19.25 15.5 19.25Z" stroke="#FDE047" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.13152 25.8114C5.28413 23.8164 6.94146 22.1598 8.93701 21.008C10.9326 19.8563 13.1961 19.25 15.5001 19.25C17.8042 19.25 20.0677 19.8564 22.0632 21.0082C24.0587 22.1599 25.716 23.8166 26.8686 25.8116" stroke="#FDE047" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/cjs/vc.check.svg

@@ -0,0 +1,10 @@
+<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.1436 15.739C24.1436 16.2315 24.3392 16.7038 24.6874 17.052C25.0357 17.4003 25.508 17.5959 26.0005 17.5959C26.4929 17.5959 26.9653 17.4003 27.3135 17.052C27.6617 16.7038 27.8574 16.2315 27.8574 15.739C27.8574 15.2465 27.6617 14.7742 27.3135 14.426C26.9653 14.0777 26.4929 13.8821 26.0005 13.8821V13.8821C25.508 13.8821 25.0357 14.0777 24.6874 14.426C24.3392 14.7742 24.1436 15.2465 24.1436 15.739V15.739Z" fill="#818CF8"/>
+<path d="M22.9091 5.26959C22.4166 5.26959 21.9443 5.46523 21.5961 5.81347C21.2479 6.1617 21.0522 6.63402 21.0522 7.1265C21.0522 7.61898 20.8566 8.09129 20.5083 8.43953C20.1601 8.78777 19.6878 8.9834 19.1953 8.9834V8.9834C18.7028 8.9834 18.2305 9.17904 17.8823 9.52728C17.534 9.87552 17.3384 10.3478 17.3384 10.8403C17.3384 11.3328 17.1428 11.8051 16.7945 12.1533C16.4463 12.5016 15.974 12.6972 15.4815 12.6972V12.6972C15.2372 12.6966 14.9952 12.7441 14.7694 12.8371C14.5435 12.9302 14.3382 13.0668 14.1652 13.2393C13.9923 13.4118 13.8551 13.6167 13.7614 13.8424C13.6678 14.068 13.6196 14.3099 13.6196 14.5541C13.6196 14.7984 13.5714 15.0403 13.4778 15.2659C13.3842 15.4915 13.2469 15.6964 13.074 15.8689C12.901 16.0414 12.6957 16.1781 12.4699 16.2711C12.244 16.3641 12.002 16.4117 11.7577 16.411V16.411C11.2652 16.411 10.7929 16.2154 10.4447 15.8672C10.0965 15.5189 9.90082 15.0466 9.90082 14.5541C9.90082 14.0616 9.70519 13.5893 9.35695 13.2411C9.00871 12.8929 8.5364 12.6972 8.04392 12.6972C7.55144 12.6972 7.07912 12.8929 6.73089 13.2411C6.38265 13.5893 6.18701 14.0616 6.18701 14.5541V18.2679C6.18701 18.7604 6.38265 19.2327 6.73089 19.581C7.07912 19.9292 7.55144 20.1248 8.04392 20.1248C8.5364 20.1248 9.00871 20.3205 9.35695 20.6687C9.70519 21.017 9.90082 21.4893 9.90082 21.9817C9.90082 22.4742 10.0965 22.9465 10.4447 23.2948C10.7929 23.643 11.2652 23.8387 11.7577 23.8387C12.2502 23.8387 12.7225 23.643 13.0708 23.2948C13.419 22.9465 13.6146 22.4742 13.6146 21.9817C13.6146 21.7375 13.6628 21.4956 13.7565 21.27C13.8501 21.0444 13.9873 20.8394 14.1603 20.667C14.3332 20.4945 14.5385 20.3578 14.7644 20.2648C14.9902 20.1717 15.2322 20.1242 15.4765 20.1248C15.969 20.1248 16.4413 19.9292 16.7896 19.581C17.1378 19.2327 17.3334 18.7604 17.3334 18.2679C17.3334 18.0241 17.3815 17.7826 17.4748 17.5573C17.5681 17.332 17.7049 17.1273 17.8773 16.9549C18.0497 16.7825 18.2544 16.6457 18.4797 16.5524C18.705 16.4591 18.9465 16.411 19.1903 16.411V16.411C19.6828 16.411 20.1551 16.2154 20.5034 15.8672C20.8516 15.5189 21.0472 15.0466 21.0472 14.5541C21.0472 14.0616 21.2429 13.5893 21.5911 13.2411C21.9394 12.8929 22.4117 12.6972 22.9041 12.6972C23.1486 12.6985 23.3909 12.6514 23.6171 12.5586C23.8432 12.4659 24.0488 12.3292 24.2219 12.1566C24.395 11.984 24.5322 11.7788 24.6255 11.5529C24.7189 11.3269 24.7667 11.0848 24.766 10.8403V8.9834V7.1265C24.766 6.63402 24.5704 6.1617 24.2222 5.81347C23.8739 5.46523 23.4016 5.26959 22.9091 5.26959V5.26959Z" fill="#00BA88"/>
+<path d="M2.64255 15.9132C2.27529 15.9132 1.91628 16.0221 1.61091 16.2262C1.30554 16.4302 1.06754 16.7202 0.926994 17.0595C0.786449 17.3988 0.749676 17.7722 0.821325 18.1324C0.892974 18.4926 1.06983 18.8235 1.32952 19.0831C1.58921 19.3428 1.92008 19.5197 2.28029 19.5913C2.64049 19.663 3.01385 19.6262 3.35316 19.4857C3.69246 19.3451 3.98247 19.1071 4.18651 18.8018C4.39055 18.4964 4.49946 18.1374 4.49946 17.7701C4.49946 17.2776 4.30382 16.8053 3.95558 16.4571C3.60735 16.1088 3.13503 15.9132 2.64255 15.9132V15.9132Z" fill="#FF9470"/>
+<path d="M10.0702 7.45008C9.57769 7.45008 9.10538 7.25444 8.75714 6.9062C8.40891 6.55797 8.21327 6.08566 8.21327 5.59317C8.21327 5.10069 8.01763 4.62838 7.66939 4.28014C7.32116 3.93191 6.84884 3.73627 6.35636 3.73627C5.86388 3.73627 5.39157 3.93191 5.04333 4.28014C4.69509 4.62838 4.49946 5.10069 4.49946 5.59317C4.49946 6.08566 4.30382 6.55797 3.95558 6.9062C3.60734 7.25444 3.13503 7.45008 2.64255 7.45008C2.15007 7.45008 1.67776 7.64572 1.32952 7.99395C0.981282 8.34219 0.785645 8.8145 0.785645 9.30698V13.0208C0.785645 13.5133 0.981282 13.9856 1.32952 14.3338C1.67776 14.6821 2.15007 14.8777 2.64255 14.8777C3.13503 14.8777 3.60734 14.6821 3.95558 14.3338C4.30382 13.9856 4.49946 13.5133 4.49946 13.0208V12.971C4.50947 12.4974 4.70104 12.0458 5.0346 11.7095C5.36815 11.3731 5.81817 11.1778 6.29164 11.1639H10.0702C10.5627 11.1639 11.035 10.9683 11.3832 10.62C11.7314 10.2718 11.9271 9.79947 11.9271 9.30698C11.9271 8.8145 11.7314 8.34219 11.3832 7.99395C11.035 7.64572 10.5627 7.45008 10.0702 7.45008V7.45008Z" fill="#41CEF2"/>
+<path d="M17.2436 4.69709V2.84018C17.2436 2.3477 17.048 1.87539 16.6997 1.52715C16.3515 1.17891 15.8792 0.983276 15.3867 0.983276C14.8942 0.983276 14.4219 1.17891 14.0737 1.52715C13.7254 1.87539 13.5298 2.3477 13.5298 2.84018V4.69709H17.2436Z" fill="#FDE047"/>
+<path d="M13.5298 4.69708V6.55399C13.5298 7.04647 13.7254 7.51878 14.0737 7.86702C14.4219 8.21526 14.8942 8.41089 15.3867 8.41089C15.8792 8.41089 16.3515 8.21526 16.6997 7.86702C17.048 7.51878 17.2436 7.04647 17.2436 6.55399V4.69708H13.5298Z" fill="#FDE047"/>
+<path d="M25.2489 18.8006H21.5351C21.0426 18.8006 20.5703 18.9962 20.2221 19.3445C19.8738 19.6927 19.6782 20.165 19.6782 20.6575V20.7372C19.6625 21.1993 19.4736 21.6386 19.1489 21.9678C18.8243 22.2971 18.3877 22.4922 17.9258 22.5144H17.8213C17.3448 22.5391 16.896 22.7457 16.5674 23.0917C16.2388 23.4377 16.0557 23.8967 16.0557 24.3738C16.0557 24.8509 16.2388 25.3099 16.5674 25.6559C16.896 26.0019 17.3448 26.2085 17.8213 26.2332H21.5351C22.0241 26.228 22.4913 26.03 22.8353 25.6823C23.1792 25.3347 23.3721 24.8653 23.3721 24.3763C23.3715 24.132 23.419 23.89 23.512 23.6642C23.6051 23.4383 23.7417 23.233 23.9142 23.06C24.0867 22.8871 24.2916 22.7499 24.5173 22.6562C24.7429 22.5626 24.9847 22.5144 25.229 22.5144C25.7215 22.5144 26.1938 22.3188 26.542 21.9705C26.8903 21.6223 27.0859 21.15 27.0859 20.6575C27.0859 20.165 26.8903 19.6927 26.542 19.3445C26.1938 18.9962 25.7215 18.8006 25.229 18.8006H25.2489Z" fill="#818CF8"/>
+<path d="M10.1098 24.675H10.0351C9.57204 24.6581 9.13212 24.4683 8.80218 24.143C8.47223 23.8176 8.27623 23.3804 8.25287 22.9177V22.8181C8.25287 22.3256 8.05724 21.8533 7.709 21.5051C7.36076 21.1568 6.88845 20.9612 6.39597 20.9612C5.90349 20.9612 5.43117 21.1568 5.08294 21.5051C4.7347 21.8533 4.53906 22.3256 4.53906 22.8181V26.5319C4.53906 27.0244 4.7347 27.4967 5.08294 27.8449C5.43117 28.1932 5.90349 28.3888 6.39597 28.3888H10.1098C10.3536 28.3888 10.5951 28.3408 10.8204 28.2475C11.0457 28.1541 11.2504 28.0174 11.4228 27.8449C11.5952 27.6725 11.732 27.4678 11.8253 27.2425C11.9187 27.0172 11.9667 26.7758 11.9667 26.5319C11.9667 26.288 11.9187 26.0466 11.8253 25.8213C11.732 25.596 11.5952 25.3913 11.4228 25.2189C11.2504 25.0464 11.0457 24.9097 10.8204 24.8163C10.5951 24.723 10.3536 24.675 10.1098 24.675V24.675Z" fill="#F43F5E"/>
+</svg>

package/dist/esm/ArrowArcRight.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4854 19.198H28.4854V11.198" stroke="#6366F1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 23.6832C4 21.3098 4.70379 18.9898 6.02236 17.0164C7.34094 15.043 9.21508 13.5049 11.4078 12.5967C13.6005 11.6884 16.0133 11.4508 18.3411 11.9138C20.6689 12.3768 22.8071 13.5197 24.4853 15.1979L28.4853 19.1979" stroke="#6366F1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/esm/CircleIcon-7c21af00.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import coins from './coins.svg';
+import user from './user.svg';
+import trophy from './trophy.svg';
+import briefcase from './briefcase.svg';
+import graduation from './graduation.svg';
+import lightbulb from './lightbulb.svg';
+
+var Icons = /* @__PURE__ */ ((Icons2) => {
+  Icons2[Icons2["coinsIcon"] = 0] = "coinsIcon";
+  Icons2[Icons2["userIcon"] = 1] = "userIcon";
+  Icons2[Icons2["trophyIcon"] = 2] = "trophyIcon";
+  Icons2[Icons2["briefcaseIcon"] = 3] = "briefcaseIcon";
+  Icons2[Icons2["graduationIcon"] = 4] = "graduationIcon";
+  Icons2[Icons2["lightbulbIcon"] = 5] = "lightbulbIcon";
+  return Icons2;
+})(Icons || {});
+
+const ICONS_TO_SOURCE = {
+  [Icons.coinsIcon]: coins,
+  [Icons.userIcon]: user,
+  [Icons.trophyIcon]: trophy,
+  [Icons.briefcaseIcon]: briefcase,
+  [Icons.graduationIcon]: graduation,
+  [Icons.lightbulbIcon]: lightbulb
+};
+
+const CountCircle = ({
+  size = "auto",
+  count = "28",
+  innerPadding = "3px 5px",
+  className,
+  onClick = () => {
+  },
+  bgColor = "bg-grayscale-50"
+}) => {
+  const style = {
+    width: size,
+    height: size,
+    padding: innerPadding
+  };
+  return /* @__PURE__ */ React.createElement("section", {
+    onClick,
+    className: `${bgColor} rounded-full circle-icon-wrapper text-center absolute right-[-15px] top-[-15px] min-w-[25px] ${className}`,
+    style
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: `h-full`
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "h-full line-clamp-1 font-semibold text-grayscale-900 text-[12px]"
+  }, count)));
+};
+const CircleIcon = ({
+  iconSrc = ICONS_TO_SOURCE[Icons.coinsIcon],
+  size = "52px",
+  count = "28",
+  innerPadding = "6px",
+  onClick = () => {
+  },
+  bgColor = "bg-grayscale-900",
+  hideCount = true
+}) => {
+  const style = {
+    width: size,
+    height: size,
+    padding: innerPadding
+  };
+  return /* @__PURE__ */ React.createElement("section", {
+    onClick,
+    className: `${bgColor} rounded-full circle-icon-wrapper p-[0px] m-[0px]`,
+    style
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: `relative w-full h-full`
+  }, !hideCount && /* @__PURE__ */ React.createElement(CountCircle, {
+    count
+  }), /* @__PURE__ */ React.createElement("img", {
+    className: "h-full w-full object-cover",
+    src: iconSrc != null ? iconSrc : "",
+    alt: "Icon image"
+  })));
+};
+
+export { CountCircle as C, ICONS_TO_SOURCE as I, CircleIcon as a, Icons as b };
+//# sourceMappingURL=CircleIcon-7c21af00.js.map

package/dist/esm/CircleIcon-7c21af00.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleIcon-7c21af00.js","sources":["../../src/types/index.ts","../../src/constants/icons.ts","../../src/components/CircleIcon/CircleIcon.tsx"],"sourcesContent":["import { VerificationItem, VC, Profile, CredentialSubject } from '@learncard/types';\n\nexport enum Icons {\n    coinsIcon,\n    userIcon,\n    trophyIcon,\n    briefcaseIcon,\n    graduationIcon,\n    lightbulbIcon,\n}\n\nexport type CredentialInfo = {\n    title?: string;\n    createdAt?: string;\n    issuer?: Profile;\n    issuee?: Profile;\n    credentialSubject?: CredentialSubject;\n};\n\nexport type VCDisplayCardProps = {\n    title?: string;\n    createdAt?: string;\n    issuer?: Profile;\n    issuee?: Profile;\n    userImage?: string;\n    className?: string;\n    credentialSubject?: CredentialSubject;\n    onClick?: () => void;\n    loading?: boolean;\n    verification?: VerificationItem[];\n};\n\nexport type RoundedSquareProps = {\n    title?: string;\n    description?: string;\n    iconSrc?: string;\n    count?: string | number;\n    onClick?: () => void;\n    bgColor?: string;\n};\n\nexport type SmallAchievementCardProps = {\n    title?: string;\n    thumbImgSrc?: string;\n    date?: string;\n    onClick?: () => void;\n};\n","import coins from '../assets/images/coins.svg';\nimport user from '../assets/images/user.svg';\nimport trophy from '../assets/images/trophy.svg';\nimport briefcase from '../assets/images/briefcase.svg';\nimport graduation from '../assets/images/graduation.svg';\nimport lightbulb from '../assets/images/lightbulb.svg';\n\nimport { Icons } from '../types';\nexport { coins, user, trophy, briefcase, graduation, lightbulb };\n\nexport const ICONS_TO_SOURCE = {\n    [Icons.coinsIcon]: coins,\n    [Icons.userIcon]: user,\n    [Icons.trophyIcon]: trophy,\n    [Icons.briefcaseIcon]: briefcase,\n    [Icons.graduationIcon]: graduation,\n    [Icons.lightbulbIcon]: lightbulb,\n};\n","import React from 'react';\n\nimport { Icons } from '../../types';\nimport { ICONS_TO_SOURCE } from '../../constants/icons';\n\nexport type CircleIconProps = {\n    iconSrc?: string;\n    count?: string | number;\n    onClick?: () => void;\n    bgColor?: string;\n    innerPadding?: string;\n    size?: string;\n    hideCount?: boolean;\n    borderColor?: string;\n};\n\nexport type CountCircleProps = {\n    size?: string;\n    count?: string | number;\n    innerPadding?: string;\n    onClick?: () => {};\n    bgColor?: string;\n    className?: string;\n};\n\nexport const CountCircle: React.FC<CountCircleProps> = ({\n    size = 'auto',\n    count = '28',\n    innerPadding = '3px 5px',\n    className,\n    onClick = () => {},\n    bgColor = 'bg-grayscale-50',\n}) => {\n    const style = {\n        width: size,\n        height: size,\n        padding: innerPadding,\n    };\n\n    return (\n        <section\n            onClick={onClick}\n            className={`${bgColor} rounded-full circle-icon-wrapper text-center absolute right-[-15px] top-[-15px] min-w-[25px] ${className}`}\n            style={style}\n        >\n            <div className={`h-full`}>\n                <p className=\"h-full line-clamp-1 font-semibold text-grayscale-900 text-[12px]\">\n                    {count}\n                </p>\n            </div>\n        </section>\n    );\n};\n\nexport const CircleIcon: React.FC<CircleIconProps> = ({\n    iconSrc = ICONS_TO_SOURCE[Icons.coinsIcon],\n    size = '52px',\n    count = '28',\n    innerPadding = '6px',\n    onClick = () => {},\n    bgColor = 'bg-grayscale-900',\n    hideCount = true,\n}) => {\n    const style = {\n        width: size,\n        height: size,\n        padding: innerPadding,\n    };\n\n    return (\n        <section\n            onClick={onClick}\n            className={`${bgColor} rounded-full circle-icon-wrapper p-[0px] m-[0px]`}\n            style={style}\n        >\n            <div className={`relative w-full h-full`}>\n                {!hideCount && <CountCircle count={count} />}\n                <img className=\"h-full w-full object-cover\" src={iconSrc ?? ''} alt=\"Icon image\" />\n            </div>\n        </section>\n    );\n};\n\nexport default CircleIcon;\n"],"names":[],"mappings":"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"}

package/dist/esm/GreenCheckCircle.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30" height="30" rx="15" fill="#40CBA6"/>
+<path d="M21.875 10.6254L13.125 19.375L8.75 15.0004" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/esm/{LearnCardCreditCardBackFace-4f7eaaa9.js → LearnCardCreditCardBackFace-9baa9e6b.js}

@@ -1,6 +1,5 @@
 import React from 'react';
-
-var ContactlessSymbol = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAyNiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMTEuNTc1MUMyLjk5NzE1IDEzLjMxNjEgNC4zOTMxNiAxNy42MTA0IDIgMjAuODYwMU04LjU4MTE4IDguMjM4MzRDMTAuMDc2OSAxMC45OTQ4IDEyLjE3MDkgMTguMDQ1NiA4LjU4MTE4IDI0LjE5NjlNMTQuNDE0NSA0Ljc1NjQ4QzE2LjM1ODkgOC40ODAxNCAxOS4wODEyIDE4LjE5MDcgMTQuNDE0NSAyNy4yNDM1TTIwLjY5NjUgMkMyMy4xODk0IDYuNDAwNjkgMjYuNjc5NCAxOC4xNjE3IDIwLjY5NjUgMzAiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==";
+import ContactlessSymbol from './contactless-symbol.svg';
 
 const LearnCardCreditCardBackFace = ({
   className,
@@ -63,4 +62,4 @@ const LearnCardCreditCardBackFace = ({
 };
 
 export { LearnCardCreditCardBackFace as L };
-//# sourceMappingURL=LearnCardCreditCardBackFace-4f7eaaa9.js.map
+//# sourceMappingURL=LearnCardCreditCardBackFace-9baa9e6b.js.map

package/dist/esm/LearnCardCreditCardBackFace-9baa9e6b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearnCardCreditCardBackFace-9baa9e6b.js","sources":["../../src/components/LearnCardCreditCardBackFace/LearnCardCreditCardBackFace.tsx"],"sourcesContent":["import React from 'react';\n\nimport ContactlessSymbol from '../../assets/images/contactless-symbol.svg';\n\nimport { LearnCardCreditCardBackFaceProps } from './types';\n\nexport const LearnCardCreditCardBackFace: React.FC<LearnCardCreditCardBackFaceProps> = ({\n    className,\n    card,\n    user,\n}) => {\n    return (\n        <div\n            className={`flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`}\n        >\n            <div\n                className={`flex flex-col justify-start items-start w-full min-h-[220px] rounded-[20px] shadow-3xl bg-grayscale-900 relative overflow-hidden credit-card-front-face`}\n            >\n                <div className=\"flex justify-between items-center w-full px-3 pt-4 text-white\">\n                    <p className=\"text-[6px]\">\n                        Please visit LearnCard app or learncard.com for assistance\n                    </p>\n                    <p className=\"text-[6px]\">854-000-000-24</p>\n                </div>\n\n                <div className=\"w-full h-8 bg-white mt-1\" />\n\n                <div className=\"flex justify-end items-center w-full px-3 mt-1 text-white\">\n                    <p className=\"text-[6px]\">IDEMIA 0 00000 00000 0/00</p>\n                </div>\n\n                <div className=\"flex flex-row justify-between items-center px-3 pt-2 w-full text-white\">\n                    <div>\n                        {user?.username && (\n                            <p\n                                className=\"text-[10px] font-medium\"\n                                data-testid=\"credit-card-backface-username\"\n                            >\n                                {user?.username}\n                            </p>\n                        )}\n\n                        <p\n                            className=\"text-sm tracking-wider\"\n                            data-testid=\"credit-card-backface-fullname\"\n                        >\n                            {user?.fullName ?? ''}\n                        </p>\n                        {card?.cardIssueDate && (\n                            <p\n                                className=\"text-[10px] tracking-wider\"\n                                data-testid=\"credit-card-backface-issueDate\"\n                            >\n                                MEMBER SINCE {card?.cardIssueDate}\n                            </p>\n                        )}\n                    </div>\n                    <div>\n                        <img src={ContactlessSymbol} alt=\"contactless icon\" />\n                    </div>\n                </div>\n\n                <div className=\"flex flex-row justify-between items-center px-3 pt-2 w-full text-white\">\n                    <div className=\"flex flex-col\">\n                        <p\n                            className=\"text-sm tracking-wider\"\n                            data-testid=\"credit-card-backface-cardNum\"\n                        >\n                            {card?.cardNumber ?? ''}\n                        </p>\n                        <div className=\"flex flex-row justify-between items-center\">\n                            <p\n                                className=\"text-[10px] tracking-wider\"\n                                data-testid=\"credit-card-backface-expDate\"\n                            >\n                                EXP {card?.cardExpirationDate ?? ''}\n                            </p>\n                            {card?.cardSecurityCode && (\n                                <p\n                                    className=\"text-[10px] tracking-wider\"\n                                    data-testid=\"credit-card-backface-secCode\"\n                                >\n                                    SEC {card?.cardSecurityCode ?? ''}\n                                </p>\n                            )}\n                        </div>\n                    </div>\n                    <div>\n                        <div className=\"h-[33px] w-[55px] rounded-[60px] bg-gradient-to-r from-[#F4F5F5] to-[#E3E5E8]\" />\n                    </div>\n                </div>\n\n                <div className=\"flex justify-start items-center w-full px-3 py-2 text-white\">\n                    <p className=\"text-[6px]\">\n                        Issued by the bank of Tennessee pursuant to license by Mastercard\n                        International\n                    </p>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardBackFace;\n"],"names":[],"mappings":"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"}

package/dist/esm/LearnCardCreditCardFrontFace-2f2e066d.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Q as QRCodeSVG } from './index-aa1098e1.js';
+import CardChip from './card-chip.svg';
+import MasterCardLogo from './master-card-logo.svg';
+
+const LearnCardCreditCardFrontFace = ({
+  userImage,
+  userImageComponent = null,
+  qrCodeValue,
+  className,
+  showActionButton = false,
+  actionButtonText = "Open Card",
+  onClick = () => {
+  }
+}) => {
+  var _a, _b;
+  let userImageEl = null;
+  if (userImage) {
+    userImageEl = /* @__PURE__ */ React.createElement("div", {
+      className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4"
+    }, /* @__PURE__ */ React.createElement("img", {
+      className: "w-full h-full absolute rounded-full object-cover border-solid border-2 border-white",
+      src: userImage,
+      alt: "user image",
+      "data-testid": "credit-card-frontface-userImg"
+    }));
+  } else if (!userImage && userImageComponent) {
+    userImageEl = userImageComponent;
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: `flex flex-row justify-center items-start pt-9 w-full min-h-[220px] rounded-[20px] shadow-3xl relative overflow-hidden credit-card-front-face`
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble"
+  }), showActionButton && /* @__PURE__ */ React.createElement("button", {
+    className: "absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white",
+    onClick,
+    "data-testid": "credit-card-frontface-button"
+  }, actionButtonText), /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-row justify-between items-start w-full h-full relative"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-1 flex-col"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "pl-8"
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title"
+  }, "LEARNCARD"), /* @__PURE__ */ React.createElement("img", {
+    src: (_a = CardChip) != null ? _a : "",
+    alt: "card chip",
+    className: "h-[30px] w-[42px]"
+  })), userImageEl), qrCodeValue && /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "h-auto relative qr-code-container"
+  }, /* @__PURE__ */ React.createElement(QRCodeSVG, {
+    className: "h-full w-full",
+    value: qrCodeValue,
+    "data-testid": "credit-card-qr-code",
+    bgColor: "transparent"
+  }))), /* @__PURE__ */ React.createElement("img", {
+    src: (_b = MasterCardLogo) != null ? _b : "",
+    alt: "mastercard icon",
+    className: "absolute bottom-[-8px] right-4 learn-card-mastercard-logo"
+  }))));
+};
+
+export { LearnCardCreditCardFrontFace as L };
+//# sourceMappingURL=LearnCardCreditCardFrontFace-2f2e066d.js.map

package/dist/esm/LearnCardCreditCardFrontFace-2f2e066d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearnCardCreditCardFrontFace-2f2e066d.js","sources":["../../src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx"],"sourcesContent":["import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { LearnCardCreditCardFrontFaceProps } from './types';\n\nimport CardChip from '../../assets/images/card-chip.svg';\nimport MasterCardLogo from '../../assets/images/master-card-logo.svg';\n\nexport const LearnCardCreditCardFrontFace: React.FC<LearnCardCreditCardFrontFaceProps> = ({\n    userImage,\n    userImageComponent = null,\n    qrCodeValue,\n    className,\n    showActionButton = false,\n    actionButtonText = 'Open Card',\n    onClick = () => {},\n}) => {\n    let userImageEl: React.ReactNode | null = null;\n\n    if (userImage) {\n        userImageEl = (\n            <div className=\"inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4\">\n                <img\n                    className=\"w-full h-full absolute rounded-full object-cover border-solid border-2 border-white\"\n                    src={userImage}\n                    alt=\"user image\"\n                    data-testid=\"credit-card-frontface-userImg\"\n                />\n            </div>\n        );\n    } else if (!userImage && userImageComponent) {\n        userImageEl = userImageComponent;\n    }\n\n    return (\n        <div\n            className={`flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`}\n        >\n            <div\n                className={`flex flex-row justify-center items-start pt-9 w-full min-h-[220px] rounded-[20px] shadow-3xl relative overflow-hidden credit-card-front-face`}\n            >\n                <div className=\"absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble\" />\n                {showActionButton && (\n                    <button\n                        className=\"absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white\"\n                        onClick={onClick}\n                        data-testid=\"credit-card-frontface-button\"\n                    >\n                        {actionButtonText}\n                    </button>\n                )}\n                <div className=\"flex flex-row justify-between items-start w-full h-full relative\">\n                    <div className=\"flex flex-1 flex-col\">\n                        <div className=\"pl-8\">\n                            <p className=\"w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title\">\n                                LEARNCARD\n                            </p>\n                            <img\n                                src={CardChip ?? ''}\n                                alt=\"card chip\"\n                                className=\"h-[30px] w-[42px]\"\n                            />\n                        </div>\n\n                        {userImageEl}\n                    </div>\n\n                    {qrCodeValue && (\n                        <div className=\"flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container\">\n                            <div className=\"h-auto relative qr-code-container\">\n                                {/* <div className=\"qr-code-upper-left-yellow\" />\n                            <div className=\"qr-code-upper-right-pink-square\" />\n                            <div className=\"qr-code-bottom-left-purple-square\" />\n                            <div className=\"qr-code-green-blob\" />\n                            <div className=\"qr-code-green-blob-2\" />\n                            <div className=\"qr-code-blue-blob\" />\n                            <div className=\"qr-code-orange-blob\" /> */}\n                                <QRCodeSVG\n                                    className=\"h-full w-full\"\n                                    value={qrCodeValue}\n                                    data-testid=\"credit-card-qr-code\"\n                                    bgColor=\"transparent\"\n                                    // fgColor=\"#999999\"\n                                />\n                            </div>\n                        </div>\n                    )}\n\n                    <img\n                        src={MasterCardLogo ?? ''}\n                        alt=\"mastercard icon\"\n                        className=\"absolute bottom-[-8px] right-4 learn-card-mastercard-logo\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardFrontFace;\n"],"names":[],"mappings":"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"}

package/dist/esm/{MiniVCThumbnail-934ab645.js → MiniVCThumbnail-6a07e810.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { V as VerifiedCheck } from './verified-check-32de410b.js';
+import VerifiedCheck from './verified-check.png';
 
 const MiniVCThumbnail = ({
   title,
@@ -59,4 +59,4 @@ const MiniVCThumbnail = ({
 };
 
 export { MiniVCThumbnail as M };
-//# sourceMappingURL=MiniVCThumbnail-934ab645.js.map
+//# sourceMappingURL=MiniVCThumbnail-6a07e810.js.map

package/dist/esm/{MiniVCThumbnail-934ab645.js.map → MiniVCThumbnail-6a07e810.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MiniVCThumbnail-934ab645.js","sources":["../../src/components/MiniVCThumbnail/MiniVCThumbnail.tsx"],"sourcesContent":["import React from 'react';\n\nimport VerifiedCheck from '../../assets/images/verified-check.png';\n\nimport { MiniVCThumbnailProps } from './types';\n\nexport const MiniVCThumbnail: React.FC<MiniVCThumbnailProps> = ({\n    title,\n    createdAt,\n    issuerImage,\n    badgeImage,\n    className = '',\n    onClick = () => {},\n}) => {\n    const titleClasses = !issuerImage ? 'w-full text-center' : 'w-3/4 text-left';\n    const createdAtClasses = !issuerImage ? 'w-full text-center' : 'text-left';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 min-h-[120px] max-w-sm mini-vc-thumbnail-container ${className}`}\n            data-testid=\"mini-vc-thumbnail\"\n        >\n            <div className=\"flex flex-row items-center justify-between mb-3 z-10\">\n                {issuerImage && (\n                    <div\n                        className=\"flex flex-row justify-center items-center w-1/4 text-center\"\n                        data-testid=\"mini-vc-thumbnail-issuer\"\n                    >\n                        <div className=\"min-w-[40px] min-h-[40px] max-h-[48px] max-w-[48px] shadow-3xl p-1 rounded-full bg-white\">\n                            <img\n                                className=\"h-full w-full object-cover rounded-full\"\n                                src={issuerImage}\n                                alt=\"issuer image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className={`flex flex-col items-start justify-center ${titleClasses}`}>\n                    <h2\n                        className=\"ml-2 text-sm tracking-wide leading-snug line-clamp-2\"\n                        data-testid=\"mini-vc-thumbnail-title\"\n                    >\n                        {title ?? ''}\n                    </h2>\n                    <p\n                        className={`ml-2 text-sm font-light line-clamp-1 ${createdAtClasses}`}\n                        data-testid=\"mini-vc-thumbnail-createdAt\"\n                    >\n                        {createdAt ?? ''}\n                    </p>\n                </div>\n            </div>\n            <div className=\"flex items-center justify-center w-full mt-3\">\n                {badgeImage && (\n                    <div\n                        className=\"flex item-center justify-center w-full -mt-3\"\n                        data-testid=\"mini-vc-thumbnail-badge\"\n                    >\n                        <div className=\"max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10\">\n                            <img\n                                className=\"h-full w-full object-cover\"\n                                src={badgeImage}\n                                alt=\"badge image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className=\"flex absolute bottom-1 right-1 items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden\">\n                    <div className=\"flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-4 border-emerald-700 overflow-hidden\">\n                        <img\n                            className=\"h-full w-full object-cover\"\n                            src={VerifiedCheck ?? ''}\n                            alt=\"credential icon\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default MiniVCThumbnail;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MiniVCThumbnail-6a07e810.js","sources":["../../src/components/MiniVCThumbnail/MiniVCThumbnail.tsx"],"sourcesContent":["import React from 'react';\n\nimport VerifiedCheck from '../../assets/images/verified-check.png';\n\nimport { MiniVCThumbnailProps } from './types';\n\nexport const MiniVCThumbnail: React.FC<MiniVCThumbnailProps> = ({\n    title,\n    createdAt,\n    issuerImage,\n    badgeImage,\n    className = '',\n    onClick = () => {},\n}) => {\n    const titleClasses = !issuerImage ? 'w-full text-center' : 'w-3/4 text-left';\n    const createdAtClasses = !issuerImage ? 'w-full text-center' : 'text-left';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 min-h-[120px] max-w-sm mini-vc-thumbnail-container ${className}`}\n            data-testid=\"mini-vc-thumbnail\"\n        >\n            <div className=\"flex flex-row items-center justify-between mb-3 z-10\">\n                {issuerImage && (\n                    <div\n                        className=\"flex flex-row justify-center items-center w-1/4 text-center\"\n                        data-testid=\"mini-vc-thumbnail-issuer\"\n                    >\n                        <div className=\"min-w-[40px] min-h-[40px] max-h-[48px] max-w-[48px] shadow-3xl p-1 rounded-full bg-white\">\n                            <img\n                                className=\"h-full w-full object-cover rounded-full\"\n                                src={issuerImage}\n                                alt=\"issuer image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className={`flex flex-col items-start justify-center ${titleClasses}`}>\n                    <h2\n                        className=\"ml-2 text-sm tracking-wide leading-snug line-clamp-2\"\n                        data-testid=\"mini-vc-thumbnail-title\"\n                    >\n                        {title ?? ''}\n                    </h2>\n                    <p\n                        className={`ml-2 text-sm font-light line-clamp-1 ${createdAtClasses}`}\n                        data-testid=\"mini-vc-thumbnail-createdAt\"\n                    >\n                        {createdAt ?? ''}\n                    </p>\n                </div>\n            </div>\n            <div className=\"flex items-center justify-center w-full mt-3\">\n                {badgeImage && (\n                    <div\n                        className=\"flex item-center justify-center w-full -mt-3\"\n                        data-testid=\"mini-vc-thumbnail-badge\"\n                    >\n                        <div className=\"max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10\">\n                            <img\n                                className=\"h-full w-full object-cover\"\n                                src={badgeImage}\n                                alt=\"badge image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className=\"flex absolute bottom-1 right-1 items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden\">\n                    <div className=\"flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-4 border-emerald-700 overflow-hidden\">\n                        <img\n                            className=\"h-full w-full object-cover\"\n                            src={VerifiedCheck ?? ''}\n                            alt=\"credential icon\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default MiniVCThumbnail;\n"],"names":[],"mappings":"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"}

package/dist/esm/RedXCircle.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="30" height="30" rx="15" fill="#E11D48"/>
+<path d="M20.625 9.375L9.375 20.625" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.625 20.625L9.375 9.375" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/esm/RoundedSquare-c3706147.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { C as CountCircle, a as CircleIcon, I as ICONS_TO_SOURCE, b as Icons } from './CircleIcon-7c21af00.js';
+import coinsGraphic from './walletcurrency.webp';
+import idsGraphic from './walletids.webp';
+import jobhistoryGraphic from './walletjobhistory.webp';
+import learningHistoryGraphic from './walletlearninghistory.webp';
+import skillsGraphic from './walletskills.webp';
+import achievementsGraphic from './walletTrophy.webp';
+
+const WALLET_SUBTYPES = {
+  ACHIEVEMENTS: "achievements",
+  IDS: "ids",
+  JOB_HISTORY: "jobHistory",
+  CURRENCIES: "currency",
+  LEARNING_HISTORY: "learningHistory",
+  SKILLS: "skills"
+};
+const TYPE_TO_IMG_SRC = {
+  [WALLET_SUBTYPES.ACHIEVEMENTS]: achievementsGraphic,
+  [WALLET_SUBTYPES.IDS]: idsGraphic,
+  [WALLET_SUBTYPES.JOB_HISTORY]: jobhistoryGraphic,
+  [WALLET_SUBTYPES.LEARNING_HISTORY]: learningHistoryGraphic,
+  [WALLET_SUBTYPES.CURRENCIES]: coinsGraphic,
+  [WALLET_SUBTYPES.SKILLS]: skillsGraphic
+};
+const TYPE_TO_WALLET_COLOR = {
+  [WALLET_SUBTYPES.ACHIEVEMENTS]: "spice-300",
+  [WALLET_SUBTYPES.IDS]: "yellow-300",
+  [WALLET_SUBTYPES.JOB_HISTORY]: "rose-300",
+  [WALLET_SUBTYPES.LEARNING_HISTORY]: "emerald-300",
+  [WALLET_SUBTYPES.CURRENCIES]: "cyan-200",
+  [WALLET_SUBTYPES.SKILLS]: "indigo-300"
+};
+
+const RoundedSquare = ({
+  title = "Currencies",
+  description = "Lorem ipsum sit dalor amet",
+  iconSrc = ICONS_TO_SOURCE[Icons.trophyIcon],
+  imgSrc,
+  type = WALLET_SUBTYPES.ACHIEVEMENTS,
+  count = "28",
+  onClick = () => {
+  },
+  bgColor
+}) => {
+  const imgSource = imgSrc || TYPE_TO_IMG_SRC[type];
+  const backgroundColor = bgColor != null ? bgColor : `bg-${TYPE_TO_WALLET_COLOR[type]}`;
+  const circleClass = `flex w-full justify-end icon-display absolute right-[15px] bottom-[10px] max-h-[40px] max-w-[40px]`;
+  return /* @__PURE__ */ React.createElement("button", {
+    onClick,
+    className: `flex relative ${backgroundColor} py-[15px] px-[15px] w-[170px] h-[170px] rounded-[40px] rounded-square-card-container`
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "w-full relative"
+  }, /* @__PURE__ */ React.createElement("section", {
+    className: "title-headline-container flex items-center justify-between"
+  }, /* @__PURE__ */ React.createElement(CountCircle, {
+    count,
+    className: "solo-counter-circle right-[0px] top-[0px] relative"
+  }), /* @__PURE__ */ React.createElement("h3", {
+    className: "line-clamp-2 font-bold text-[13px] text-grayscale-900 text-left"
+  }, title)), /* @__PURE__ */ React.createElement("div", {
+    className: "graphic-background relative flex justify-center"
+  }, /* @__PURE__ */ React.createElement("img", {
+    className: "max-w-[130px]",
+    src: imgSource
+  }))), /* @__PURE__ */ React.createElement("div", {
+    className: circleClass
+  }, /* @__PURE__ */ React.createElement(CircleIcon, {
+    iconSrc,
+    count,
+    size: "40"
+  })));
+};
+
+export { RoundedSquare as R, TYPE_TO_IMG_SRC as T, WALLET_SUBTYPES as W, TYPE_TO_WALLET_COLOR as a };
+//# sourceMappingURL=RoundedSquare-c3706147.js.map

package/dist/esm/RoundedSquare-c3706147.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundedSquare-c3706147.js","sources":["../../src/components/RoundedSquare/constants.ts","../../src/components/RoundedSquare/RoundedSquare.tsx"],"sourcesContent":["import coinsGraphic from '../../assets/images/walletcurrency.webp';\nimport idsGraphic from '../../assets/images/walletids.webp';\nimport jobhistoryGraphic from '../../assets/images/walletjobhistory.webp';\nimport learningHistoryGraphic from '../../assets/images/walletlearninghistory.webp';\nimport skillsGraphic from '../../assets/images/walletskills.webp';\nimport achievementsGraphic from '../../assets/images/walletTrophy.webp';\n\nexport const WALLET_SUBTYPES = {\n    ACHIEVEMENTS: 'achievements',\n    IDS: 'ids',\n    JOB_HISTORY: 'jobHistory',\n    CURRENCIES: 'currency',\n    LEARNING_HISTORY: 'learningHistory',\n    SKILLS: 'skills',\n};\n\nexport const TYPE_TO_IMG_SRC = {\n    [WALLET_SUBTYPES.ACHIEVEMENTS]: achievementsGraphic,\n    [WALLET_SUBTYPES.IDS]: idsGraphic,\n    [WALLET_SUBTYPES.JOB_HISTORY]: jobhistoryGraphic,\n    [WALLET_SUBTYPES.LEARNING_HISTORY]: learningHistoryGraphic,\n    [WALLET_SUBTYPES.CURRENCIES]: coinsGraphic,\n    [WALLET_SUBTYPES.SKILLS]: skillsGraphic,\n};\n\nexport const TYPE_TO_WALLET_COLOR = {\n    [WALLET_SUBTYPES.ACHIEVEMENTS]: 'spice-300',\n    [WALLET_SUBTYPES.IDS]: 'yellow-300',\n    [WALLET_SUBTYPES.JOB_HISTORY]: 'rose-300',\n    [WALLET_SUBTYPES.LEARNING_HISTORY]: 'emerald-300',\n    [WALLET_SUBTYPES.CURRENCIES]: 'cyan-200',\n    [WALLET_SUBTYPES.SKILLS]: 'indigo-300',\n};\n","import React from 'react';\nimport { Icons } from '../../types';\nimport { ICONS_TO_SOURCE } from '../../constants/icons';\nimport CircleIcon from '../CircleIcon/CircleIcon';\nimport { CountCircle } from '../CircleIcon';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_COLOR } from './constants';\nimport { WALLET_SUBTYPES } from './constants';\n\nexport type RoundedSquareProps = {\n    title?: string;\n    description?: string;\n    type?: string;\n    iconSrc?: string;\n    imgSrc?: string;\n    count?: string | number;\n    onClick?: () => void;\n    bgColor?: string;\n};\n\nexport const RoundedSquare: React.FC<RoundedSquareProps> = ({\n    title = 'Currencies',\n    description = 'Lorem ipsum sit dalor amet',\n    iconSrc = ICONS_TO_SOURCE[Icons.trophyIcon],\n    imgSrc,\n    type = WALLET_SUBTYPES.ACHIEVEMENTS,\n    count = '28',\n    onClick = () => {},\n    bgColor,\n}) => {\n    const imgSource = imgSrc || TYPE_TO_IMG_SRC[type];\n    const backgroundColor = bgColor ?? `bg-${TYPE_TO_WALLET_COLOR[type]}`;\n    const circleClass = `flex w-full justify-end icon-display absolute right-[15px] bottom-[10px] max-h-[40px] max-w-[40px]`;\n\n    return (\n        <button\n            onClick={onClick}\n            className={`flex relative ${backgroundColor} py-[15px] px-[15px] w-[170px] h-[170px] rounded-[40px] rounded-square-card-container`}\n        >\n            <div className=\"w-full relative\">\n                <section className=\"title-headline-container flex items-center justify-between\">\n                    <CountCircle\n                        count={count}\n                        className=\"solo-counter-circle right-[0px] top-[0px] relative\"\n                    />\n                    <h3 className=\"line-clamp-2 font-bold text-[13px] text-grayscale-900 text-left\">\n                        {title}\n                    </h3>\n                </section>\n\n                <div className=\"graphic-background relative flex justify-center\">\n                    <img className=\"max-w-[130px]\" src={imgSource} />\n                </div>\n            </div>\n\n            <div className={circleClass}>\n                <CircleIcon iconSrc={iconSrc} count={count} size=\"40\" />\n            </div>\n        </button>\n    );\n};\n\nexport default RoundedSquare;\n"],"names":[],"mappings":"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"}