@getpara/core-components 2.0.0-alpha.6 → 2.0.0-alpha.60

package/dist/collection/assets/icons/okx.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19415_51)">
+<rect width="24" height="24" rx="2" fill="#B7F260"/>
+<path d="M9.33333 20H4V14.6667H9.33333V20Z" fill="black"/>
+<path d="M20 20H14.6667V14.6667H20V20Z" fill="black"/>
+<path d="M14.6667 14.6667H9.33333V9.33333H14.6667V14.6667Z" fill="black"/>
+<path d="M9.33333 9.33333H4V4H9.33333V9.33333Z" fill="black"/>
+<path d="M20 9.33333H14.6667V4H20V9.33333Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_19415_51">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/para-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 0H8.85714V4.42857H19.9286C21.1515 4.42857 22.1429 5.41989 22.1429 6.64286C22.1429 7.86582 21.1515 8.85714 19.9286 8.85714H17.7143V11.0714C17.7143 12.2944 16.7229 13.2857 15.5 13.2857H13.2857V15.5C13.2857 16.723 12.2943 17.7143 11.0714 17.7143H8.85714V19.9286C8.85714 21.1515 7.86577 22.1429 6.64286 22.1429H4.42857V24.3571C4.42857 25.5801 3.4372 26.5714 2.21429 26.5714H0V31H4.42857V28.7857C4.42857 27.5627 5.41994 26.5714 6.64286 26.5714H8.85714V24.3571C8.85714 23.1342 9.84851 22.1429 11.0714 22.1429H13.2857V19.9286C13.2857 18.7056 14.2771 17.7143 15.5 17.7143H17.7143V15.5C17.7143 14.277 18.7057 13.2857 19.9286 13.2857H22.1429V11.0714C22.1429 9.84846 23.1342 8.85714 24.3571 8.85714C25.5801 8.85714 26.5714 9.84846 26.5714 11.0714V22.1429H31V0Z" fill="white"/>
+</svg>

package/dist/collection/assets/icons/phantom.svg

@@ -0,0 +1,11 @@
+<svg width="1200" height="1200" viewBox="0 0 1200 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2596_138580)">
+<rect y="-0.000976562" width="1200" height="1200" fill="#AB9FF2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M522.218 764.813C475.101 837.011 396.147 928.377 291.089 928.377C241.425 928.377 193.671 907.932 193.671 819.121C193.671 592.942 502.479 242.812 789.003 242.812C952.003 242.812 1016.95 355.901 1016.95 484.325C1016.95 649.167 909.979 837.65 803.647 837.65C769.901 837.65 753.346 819.121 753.346 789.731C753.346 782.064 754.62 773.758 757.167 764.813C720.874 826.788 650.835 884.292 585.253 884.292C537.499 884.292 513.304 854.262 513.304 812.093C513.304 796.759 516.487 780.786 522.218 764.813ZM769.035 479.871C769.035 517.293 746.956 536.003 722.258 536.003C697.185 536.003 675.481 517.293 675.481 479.871C675.481 442.449 697.185 423.738 722.258 423.738C746.956 423.738 769.035 442.449 769.035 479.871ZM909.367 479.872C909.367 517.294 887.288 536.005 862.59 536.005C837.517 536.005 815.813 517.294 815.813 479.872C815.813 442.45 837.517 423.74 862.59 423.74C887.288 423.74 909.367 442.45 909.367 479.872Z" fill="#FFFDF8"/>
+</g>
+<defs>
+<clipPath id="clip0_2596_138580">
+<rect y="-0.000976562" width="1200" height="1200" rx="600" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/rabby.svg

@@ -0,0 +1,24 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.8978 10.9312C20.6833 9.17043 16.7999 4.25115 13.0899 2.20168C10.7514 0.613975 8.31466 0.832098 7.82115 1.52922C6.73808 3.0591 11.4075 4.35546 14.5303 5.8682C13.859 6.16074 13.2264 6.6857 12.8544 7.35707C11.6902 6.08181 9.13493 4.9836 6.13663 5.8682C4.11612 6.46434 2.4369 7.86973 1.78788 9.99243C1.6302 9.92213 1.45558 9.88302 1.27189 9.88302C0.569447 9.88302 0 10.4544 0 11.1592C0 11.864 0.569447 12.4354 1.27189 12.4354C1.40209 12.4354 1.8092 12.3478 1.8092 12.3478L8.31466 12.3951C5.71299 16.5363 3.65695 17.1417 3.65695 17.8591C3.65695 18.5766 5.62424 18.3821 6.36287 18.1147C9.899 16.8345 13.697 12.8447 14.3487 11.6961C17.0855 12.0387 19.3856 12.0792 19.8978 10.9312Z" fill="url(#paint0_linear_1_18)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.53 5.86842C14.5302 5.86847 14.5304 5.86858 14.5305 5.86864C14.6753 5.81141 14.6519 5.59693 14.6121 5.42845C14.5207 5.04132 12.9445 3.4796 11.4644 2.78013C9.44753 1.82696 7.96235 1.87611 7.74293 2.31543C8.15377 3.16027 10.0584 3.95352 12.0476 4.78193C12.8963 5.13538 13.7603 5.49523 14.5304 5.86826C14.5302 5.86831 14.5301 5.86837 14.53 5.86842Z" fill="url(#paint1_linear_1_18)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9706 14.3716C11.5627 14.2152 11.102 14.0717 10.5781 13.9415C11.1367 12.9388 11.2538 11.4542 10.7264 10.5157C9.98606 9.19842 9.05682 8.49732 6.89739 8.49732C5.70973 8.49732 2.51198 8.89873 2.45524 11.5772C2.44927 11.8582 2.45508 12.1157 2.47536 12.3526L8.31466 12.3951C7.52743 13.6482 6.79015 14.5775 6.14471 15.2841C6.91968 15.4834 7.55921 15.6507 8.1464 15.8042C8.70348 15.9499 9.21342 16.0833 9.74717 16.2199C10.5523 15.6314 11.3092 14.9897 11.9706 14.3716Z" fill="url(#paint2_linear_1_18)"/>
+<path d="M1.70994 12.0774C1.9485 14.112 3.10095 14.9094 5.45587 15.1454C7.81079 15.3813 9.16162 15.2231 10.96 15.3872C12.4621 15.5243 13.8032 16.2923 14.3007 16.027C14.7484 15.7881 14.4979 14.9252 13.8988 14.3715C13.1221 13.6539 12.0473 13.1549 10.156 12.9778C10.5329 11.9424 10.4273 10.4905 9.84188 9.7006C8.99547 8.55846 7.43321 8.04211 5.45587 8.26771C3.39007 8.5034 1.41059 9.52388 1.70994 12.0774Z" fill="url(#paint3_linear_1_18)"/>
+<defs>
+<linearGradient id="paint0_linear_1_18" x1="5.90132" y1="9.37194" x2="19.7355" y2="13.2819" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8697FF"/>
+<stop offset="1" stop-color="#ABB7FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_18" x1="27.9949" y1="32.9423" x2="-13.0198" y2="6.56013" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8697FF"/>
+<stop offset="1" stop-color="#5156D8" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1_18" x1="20.5833" y1="14.9881" x2="-0.237437" y2="3.8336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#465EED"/>
+<stop offset="1" stop-color="#8697FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1_18" x1="6.72685" y1="9.26839" x2="13.2319" y2="17.506" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8898FF"/>
+<stop offset="0.983895" stop-color="#6277F1"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/collection/assets/icons/rainbow.svg

@@ -0,0 +1,54 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_144_3127)">
+<path d="M0 4.5H1.5C9.23198 4.5 15.5 10.768 15.5 18.5V20H18.5C19.3284 20 20 19.3284 20 18.5C20 8.28273 11.7173 0 1.5 0C0.671573 0 0 0.671573 0 1.5V4.5Z" fill="url(#paint0_radial_144_3127)"/>
+<path d="M16 18.5H20C20 19.3284 19.3284 20 18.5 20H16V18.5Z" fill="url(#paint1_linear_144_3127)"/>
+<path d="M1.5 0L1.5 4H0L1.09278e-07 1.5C1.4549e-07 0.671572 0.671573 -3.62117e-08 1.5 0Z" fill="url(#paint2_linear_144_3127)"/>
+<path d="M0 4H1.5C9.50812 4 16 10.4919 16 18.5V20H11.5V18.5C11.5 12.9771 7.02284 8.5 1.5 8.5H0V4Z" fill="url(#paint3_radial_144_3127)"/>
+<path d="M12 18.5H16V20H12V18.5Z" fill="url(#paint4_linear_144_3127)"/>
+<path d="M1.74845e-07 8L0 4L1.5 4L1.5 8H1.74845e-07Z" fill="url(#paint5_linear_144_3127)"/>
+<path d="M0 10.5C0 11.3284 0.671573 12 1.5 12C5.08985 12 8 14.9101 8 18.5C8 19.3284 8.67157 20 9.5 20H12V18.5C12 12.701 7.29899 8 1.5 8H0V10.5Z" fill="url(#paint6_radial_144_3127)"/>
+<path d="M8 18.5H12V20H9.5C8.67157 20 8 19.3284 8 18.5Z" fill="url(#paint7_radial_144_3127)"/>
+<path d="M1.5 12C0.671573 12 1.4549e-07 11.3284 1.09278e-07 10.5L0 8L1.5 8L1.5 12Z" fill="url(#paint8_radial_144_3127)"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_144_3127" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1.5 18.5) rotate(-90) scale(18.5)">
+<stop offset="0.770277" stop-color="#FF4000"/>
+<stop offset="1" stop-color="#8754C9"/>
+</radialGradient>
+<linearGradient id="paint1_linear_144_3127" x1="15.75" y1="19.25" x2="20" y2="19.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF4000"/>
+<stop offset="1" stop-color="#8754C9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_144_3127" x1="0.75" y1="-3.27825e-07" x2="0.749998" y2="4.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8754C9"/>
+<stop offset="1" stop-color="#FF4000"/>
+</linearGradient>
+<radialGradient id="paint3_radial_144_3127" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1.5 18.5) rotate(-90) scale(14.5)">
+<stop offset="0.723929" stop-color="#FFF700"/>
+<stop offset="1" stop-color="#FF9901"/>
+</radialGradient>
+<linearGradient id="paint4_linear_144_3127" x1="12" y1="19.25" x2="16" y2="19.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF700"/>
+<stop offset="1" stop-color="#FF9901"/>
+</linearGradient>
+<linearGradient id="paint5_linear_144_3127" x1="0.750001" y1="8" x2="0.75" y2="4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF700"/>
+<stop offset="1" stop-color="#FF9901"/>
+</linearGradient>
+<radialGradient id="paint6_radial_144_3127" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1.5 18.5) rotate(-90) scale(10.5)">
+<stop offset="0.59513" stop-color="#00AAFF"/>
+<stop offset="1" stop-color="#01DA40"/>
+</radialGradient>
+<radialGradient id="paint7_radial_144_3127" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.75 19.25) scale(4.25 11.3333)">
+<stop stop-color="#00AAFF"/>
+<stop offset="1" stop-color="#01DA40"/>
+</radialGradient>
+<radialGradient id="paint8_radial_144_3127" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0.749999 12.25) rotate(-90) scale(4.25 80.5925)">
+<stop stop-color="#00AAFF"/>
+<stop offset="1" stop-color="#01DA40"/>
+</radialGradient>
+<clipPath id="clip0_144_3127">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/safe.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" fill="#12FF80"/>
+<path d="M22.5151 13.9979H20.4244C19.7981 13.9979 19.2945 14.5058 19.2945 15.128V18.163C19.2945 18.7894 18.7866 19.2931 18.1645 19.2931H9.8398C9.21344 19.2931 8.70981 19.8011 8.70981 20.4233V22.5185C8.70981 23.145 9.21767 23.6487 9.8398 23.6487H18.6427C19.2691 23.6487 19.7642 23.1407 19.7642 22.5185V20.8423C19.7642 20.2159 20.2721 19.7757 20.8942 19.7757H22.5151C23.1415 19.7757 23.6451 19.2677 23.6451 18.6455V15.1196C23.6451 14.4889 23.1373 13.9979 22.5151 13.9979Z" fill="black"/>
+<path d="M8.7098 9.84127C8.7098 9.21481 9.21766 8.71111 9.83978 8.71111H18.156C18.7823 8.71111 19.286 8.20317 19.286 7.58095V5.48995C19.286 4.86349 18.7781 4.35979 18.156 4.35979H9.35732C8.73096 4.35979 8.22733 4.86772 8.22733 5.48995V7.10264C8.22733 7.7291 7.71947 8.2328 7.09734 8.2328H5.48912C4.86276 8.2328 4.35913 8.74074 4.35913 9.36296V12.8931C4.35913 13.5196 4.86699 13.9979 5.49335 13.9979H7.58404C8.2104 13.9979 8.71403 13.4899 8.71403 12.8677L8.7098 9.84127Z" fill="black"/>
+<path d="M13.0139 11.8011H15.0242C15.6802 11.8011 16.2092 12.3344 16.2092 12.9862V14.9968C16.2092 15.6529 15.6759 16.182 15.0242 16.182H13.0139C12.3579 16.182 11.8289 15.6487 11.8289 14.9968V12.9862C11.8289 12.3302 12.3621 11.8011 13.0139 11.8011Z" fill="black"/>
+</svg> 

package/dist/collection/assets/icons/solana-circle.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="black"/>
+  <path d="M7.95016 13.8704C8.02359 13.8002 8.12315 13.7608 8.22694 13.7608H17.8038C17.9783 13.7608 18.0656 13.9627 17.9422 14.0807L16.0498 15.8903C15.9764 15.9606 15.8769 16 15.7731 16H6.19617C6.02172 16 5.93438 15.7981 6.05778 15.6801L7.95016 13.8704Z" fill="url(#paint0_linear_19531_828)"/>
+  <path d="M7.95016 7.10967C8.02359 7.03944 8.12314 7 8.22694 7H17.8038C17.9783 7 18.0656 7.2019 17.9422 7.31993L16.0498 9.12959C15.9764 9.1998 15.8769 9.23923 15.7731 9.23923H6.19617C6.02172 9.23923 5.93438 9.03733 6.05778 8.91932L7.95016 7.10967Z" fill="url(#paint1_linear_19531_828)"/>
+  <path d="M16.0498 10.4685C15.9764 10.3983 15.8769 10.3589 15.7731 10.3589H6.19617C6.02172 10.3589 5.93438 10.5608 6.05778 10.6788L7.95016 12.4884C8.02359 12.5586 8.12314 12.5981 8.22694 12.5981H17.8038C17.9783 12.5981 18.0656 12.3962 17.9422 12.2782L16.0498 10.4685Z" fill="url(#paint2_linear_19531_828)"/>
+  <defs>
+    <linearGradient id="paint0_linear_19531_828" x1="14.1127" y1="4.53127" x2="7.9305" y2="16.9041" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#00FFA3"/>
+      <stop offset="1" stop-color="#DC1FFF"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_19531_828" x1="14.1127" y1="4.53127" x2="7.9305" y2="16.9041" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#00FFA3"/>
+      <stop offset="1" stop-color="#DC1FFF"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_19531_828" x1="14.1127" y1="4.53127" x2="7.9305" y2="16.9041" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#00FFA3"/>
+      <stop offset="1" stop-color="#DC1FFF"/>
+    </linearGradient>
+  </defs>
+</svg>

package/dist/collection/assets/icons/solflare.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19477_3213)">
+<path d="M5.19141 0.5H18.8086C21.3995 0.5 23.5 2.6005 23.5 5.19141V18.8086C23.5 21.3995 21.3995 23.5 18.8086 23.5H5.19141C2.6005 23.5 0.5 21.3995 0.5 18.8086V5.19141C0.5 2.6005 2.6005 0.5 5.19141 0.5Z" fill="#FFEF46" stroke="#EEDA0F"/>
+<path d="M11.5559 12.6355L12.6539 11.5701L14.701 12.243C16.0409 12.6916 16.7109 13.514 16.7109 14.6729C16.7109 15.5514 16.3759 16.1309 15.706 16.8785L15.5013 17.1028L15.5757 16.5794C15.8734 14.6729 15.3152 13.8505 13.4727 13.2523L11.5559 12.6355ZM8.80147 6.11216L14.3846 7.98131L13.1749 9.1402L10.2717 8.16823C9.26677 7.83178 8.93177 7.28972 8.80147 6.14954V6.11216ZM8.46647 15.6075L9.732 14.3925L12.1142 15.1776C13.361 15.5888 13.789 16.1309 13.6588 17.4953L8.46647 15.6075ZM6.866 10.1869C6.866 9.83182 7.0521 9.49535 7.36848 9.21493C7.70347 9.70095 8.28039 10.1308 9.19229 10.4299L11.165 11.0841L10.067 12.1496L8.13151 11.514C7.23821 11.215 6.866 10.7663 6.866 10.1869ZM12.7097 20C16.8039 17.2711 19 15.4206 19 13.1402C19 11.6262 18.1067 10.785 16.134 10.1308L14.6452 9.62614L18.7209 5.70094L17.902 4.82244L16.6923 5.88785L10.9789 4C9.21089 4.57944 6.97767 6.28037 6.97767 7.9813C6.97767 8.16822 6.99628 8.35514 7.05211 8.56076C5.58188 9.40185 4.98635 10.1869 4.98635 11.1588C4.98635 12.0747 5.47022 12.9906 7.01489 13.4953L8.24317 13.9065L4 18L4.81886 18.8785L6.1402 17.6636L12.7097 20Z" fill="#02050A"/>
+</g>
+<defs>
+<clipPath id="clip0_19477_3213">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/star-05.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2L10.6985 7.20599C10.4445 8.22185 10.3176 8.72978 10.0531 9.14309C9.81915 9.50868 9.50868 9.81915 9.14309 10.0531C8.72978 10.3176 8.22185 10.4445 7.20599 10.6985L2 12L7.20599 13.3015C8.22185 13.5555 8.72978 13.6824 9.14309 13.9469C9.50868 14.1808 9.81915 14.4913 10.0531 14.8569C10.3176 15.2702 10.4445 15.7782 10.6985 16.794L12 22L13.3015 16.794C13.5555 15.7782 13.6824 15.2702 13.9469 14.8569C14.1808 14.4913 14.4913 14.1808 14.8569 13.9469C15.2702 13.6824 15.7782 13.5555 16.794 13.3015L22 12L16.794 10.6985C15.7782 10.4445 15.2702 10.3176 14.8569 10.0531C14.4913 9.81915 14.1808 9.50868 13.9469 9.14309C13.6824 8.72978 13.5555 8.22185 13.3015 7.20599L12 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/user-01.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 21C20.5 19.6044 20.5 18.9067 20.3278 18.3389C19.94 17.0605 18.9395 16.06 17.6611 15.6722C17.0933 15.5 16.3956 15.5 15 15.5H10C8.60444 15.5 7.90665 15.5 7.33886 15.6722C6.06045 16.06 5.06004 17.0605 4.67224 18.3389C4.5 18.9067 4.5 19.6044 4.5 21M17 7.5C17 9.98528 14.9853 12 12.5 12C10.0147 12 8 9.98528 8 7.5C8 5.01472 10.0147 3 12.5 3C14.9853 3 17 5.01472 17 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/user-plus.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 12.9167H6.25001C5.08704 12.9167 4.50555 12.9167 4.03239 13.0602C2.96705 13.3834 2.13337 14.217 1.8102 15.2824C1.66667 15.7555 1.66667 16.337 1.66667 17.5M15.8333 17.5V12.5M13.3333 15H18.3333M12.0833 6.25C12.0833 8.32107 10.4044 10 8.33334 10C6.26227 10 4.58334 8.32107 4.58334 6.25C4.58334 4.17893 6.26227 2.5 8.33334 2.5C10.4044 2.5 12.0833 4.17893 12.0833 6.25Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/valora.svg

@@ -0,0 +1,25 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_316_2)">
+<mask id="mask0_316_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<path d="M24 0H0V24H24V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_316_2)">
+<path d="M0 0H24V24H0V0Z" fill="url(#paint0_linear_316_2)"/>
+<mask id="mask1_316_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="6" width="16" height="12">
+<path d="M4.28564 6H19.7142V18H4.28564V6Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_316_2)">
+<path d="M13.3825 18C14.0031 13.32 16.2771 10.6551 19.7142 8.24057L17.9571 6C15.7088 7.668 13.2531 10.0329 12.1165 13.2943C11.1856 10.6311 9.24764 8.29029 6.11993 6L4.28564 8.29029C8.18822 10.98 10.1519 13.992 10.6945 18H13.3825Z" fill="white"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_316_2" x1="-4.59807e-07" y1="24" x2="21.8571" y2="3.42857" gradientUnits="userSpaceOnUse">
+<stop offset="0.17" stop-color="#FFD52C"/>
+<stop offset="1" stop-color="#26D98A"/>
+</linearGradient>
+<clipPath id="clip0_316_2">
+<rect width="24" height="24" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/wallet-02.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 14H17.01M7 7H19C19.5304 7 20.0391 7.21071 20.4142 7.58579C20.7893 7.96086 21 8.46957 21 9V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/wallet-connect.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.91331 7.87401C8.82718 4.042 15.1728 4.042 19.0867 7.87401L19.5577 8.33519C19.7534 8.52681 19.7534 8.83744 19.5577 9.02906L17.9464 10.6067C17.8486 10.7025 17.6899 10.7025 17.5921 10.6067L16.9439 9.97206C14.2134 7.29872 9.78656 7.29872 7.05612 9.97206L6.36193 10.6517C6.26412 10.7475 6.1055 10.7475 6.00762 10.6517L4.39631 9.07406C4.20056 8.88244 4.20056 8.57181 4.39631 8.38019L4.91331 7.87401ZM22.4191 11.1367L23.8532 12.5408C24.0489 12.7324 24.0489 13.0431 23.8532 13.2347L17.3868 19.566C17.1911 19.7576 16.8738 19.7576 16.6781 19.566L12.0886 15.0725C12.0397 15.0246 11.9604 15.0246 11.9114 15.0725L7.32206 19.566C7.12637 19.7576 6.80906 19.7576 6.61337 19.566L0.14677 13.2346C-0.0489234 13.043 -0.0489234 12.7324 0.14677 12.5407L1.58087 11.1366C1.77656 10.9451 2.09385 10.9451 2.28954 11.1366L6.87912 15.6302C6.928 15.6781 7.00731 15.6781 7.05625 15.6302L11.6456 11.1366C11.8412 10.9451 12.1586 10.9451 12.3542 11.1366L16.9438 15.6302C16.9927 15.6781 17.0721 15.6781 17.121 15.6302L21.7104 11.1367C21.9062 10.9451 22.2234 10.9451 22.4191 11.1367Z" fill="#3396FF"/>
+</svg>

package/dist/collection/assets/icons/zerion.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_2847)">
+<mask id="mask0_201_2847" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<path d="M24 0H0V24H24V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_201_2847)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2259 11.639C10.8298 9.26344 5.48086 6.18284 1.45515 3.67192C0.267398 2.81616 0.870213 1 2.30576 1H22.2249C23.336 1 24.0794 2.23884 23.5226 3.17633C22.1841 5.48804 20.23 8.42303 18.5977 10.7501C17.7215 11.9992 16.2936 12.2138 15.2259 11.639ZM8.81447 12.4105C13.0649 14.6763 19.0218 18.1221 23.2544 20.7276C24.5649 21.5347 24.0411 23.471 22.5137 23.471C20.0141 23.471 15.9523 23.4717 11.9117 23.4723C7.91274 23.4729 3.93445 23.4736 1.51142 23.4736C0.290479 23.4736 -0.335349 22.2065 0.183201 21.3228C1.93549 18.3366 3.90497 15.3225 5.54229 13.0721C6.27026 12.0682 7.75188 11.8434 8.81447 12.4105Z" fill="#2461ED"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_201_2847">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/components/cpsl-alert/cpsl-alert.js

@@ -48,7 +48,7 @@ export class CpslAlert {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"search\" | \"lg\" | \"alertCircle\" | \"alertTriangle\" | \"alignVerticalCenter\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowNarrow\" | \"arrow\" | \"asterisk\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"checkSquare\" | \"check\" | \"chevronDown\" | \"chevronRight\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"code\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"dell\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"gridDots\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"hp\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"laptop\" | \"lenovo\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"lockKeyholeCircle\" | \"logOut\" | \"mail\" | \"menu\" | \"monitor\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"motorola\" | \"nobleBrand\" | \"optimismBrand\" | \"paraBlackBg\" | \"paraBrand\" | \"paraIconBrand\" | \"paraIconQr\" | \"paraIcon\" | \"paraLogo\" | \"paraRingsDark\" | \"paraRings\" | \"para\" | \"passcode\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"samsung\" | \"send\" | \"settings\" | \"share\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"spacingHeight\" | \"star04Filled\" | \"stars01Filled\" | \"stars02\" | \"stars\" | \"stopSquare\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"userCircle\" | \"user\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
+                    "resolved": "\"search\" | \"lg\" | \"alertCircle\" | \"alertTriangle\" | \"alignVerticalCenter\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowCircleDown\" | \"arrowNarrow\" | \"arrow\" | \"asterisk\" | \"backpack\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"beraBrand\" | \"brush\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"checkSquare\" | \"check\" | \"chevronDown\" | \"chevronRight\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"code\" | \"coinbase\" | \"copy07\" | \"copy\" | \"cosmosCircle\" | \"cosmos\" | \"cosmostation\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"dell\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dotsSquare\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"ethCircle\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"glow\" | \"googleBrand\" | \"google\" | \"gridDots\" | \"haha\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"hp\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"keplr\" | \"key\" | \"laptop\" | \"leap\" | \"lenovo\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"lockKeyholeCircle\" | \"logOut\" | \"mail\" | \"menu\" | \"metamask\" | \"monitor\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"motorola\" | \"nobleBrand\" | \"okx\" | \"optimismBrand\" | \"paraArrow\" | \"paraBlackBg\" | \"paraBrand\" | \"paraIconBrand\" | \"paraIconQr\" | \"paraIcon\" | \"paraLogo\" | \"paraRingsDark\" | \"paraRings\" | \"para\" | \"passcode\" | \"phantom\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rabby\" | \"rainbow\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"safe\" | \"samsung\" | \"send\" | \"settings\" | \"share\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solanaCircle\" | \"solana\" | \"solflare\" | \"spacingHeight\" | \"star04Filled\" | \"star05\" | \"stars01Filled\" | \"stars02\" | \"stars\" | \"stopSquare\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"user01\" | \"userCircle\" | \"userPlus\" | \"user\" | \"valora\" | \"wallet02\" | \"walletConnect\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"zerion\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.css

@@ -54,7 +54,7 @@
    * }
    */
 :host {
-  --container-width: 560px;
+  --container-width: 420px;
   --container-gap: 8px;
   --card-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
   display: block;
@@ -153,9 +153,9 @@
 
 .modal-body-card {
   --card-padding-top: 16px;
-  --card-padding-bottom: 16px;
-  --card-padding-start: 16px;
-  --card-padding-end: 16px;
+  --card-padding-bottom: 24px;
+  --card-padding-start: 24px;
+  --card-padding-end: 24px;
   --card-border-width: 0px;
 }
 

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js

@@ -14,10 +14,27 @@ export class CpslCodeInput {
                     inputElements[ind].value = '';
                     return;
                 }
+                // Prevent input beyond the maximum length
+                if (this.code && this.code.length >= this.length) {
+                    inputElements[ind].value = this.code[ind] || '';
+                    return;
+                }
                 const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
-                inputElements[Math.min(this.length - 1, newCode.length)].focus();
-                this.cpslInput.emit({ value: newCode });
-                this.code = newCode;
+                // Ensure we don't exceed the maximum length
+                if (newCode.length > this.length) {
+                    const truncatedCode = newCode.substring(0, this.length);
+                    this.cpslInput.emit({ value: truncatedCode });
+                    this.code = truncatedCode;
+                    // Set each input to its corresponding character
+                    inputElements.forEach((input, index) => {
+                        input.value = truncatedCode[index] || '';
+                    });
+                }
+                else {
+                    inputElements[Math.min(this.length - 1, newCode.length)].focus();
+                    this.cpslInput.emit({ value: newCode });
+                    this.code = newCode;
+                }
             }
         };
         this.handleKeyDown = (ind, ev) => {
@@ -66,21 +83,28 @@ export class CpslCodeInput {
         };
         this.handlePaste = (e) => {
             const inputElements = this.inputs;
-            const pastedCode = e.clipboardData.getData('text');
-            if (this.type === 'number' && isNaN(parseInt(pastedCode))) {
-                // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.
-                setTimeout(() => {
-                    inputElements[0].value = '';
-                }, 0);
-                return;
+            let pastedCode = e.clipboardData.getData('text');
+            // Filter based on type
+            if (this.type === 'number') {
+                // Remove all non-numeric characters
+                pastedCode = pastedCode.replace(/\D/g, '');
+                // If no valid numbers remain, clear and return
+                if (!pastedCode) {
+                    setTimeout(() => {
+                        inputElements[0].value = '';
+                    }, 0);
+                    return;
+                }
             }
+            // Truncate pasted code to match the expected length
+            const truncatedCode = pastedCode.substring(0, this.length);
             this.cpslInput.emit({
-                value: pastedCode,
+                value: truncatedCode,
             });
             inputElements.forEach((input, index) => {
-                input.value = pastedCode.charAt(index);
+                input.value = truncatedCode.charAt(index) || '';
             });
-            inputElements[Math.min(this.length - 1, pastedCode.length)].focus();
+            inputElements[Math.min(this.length - 1, truncatedCode.length)].focus();
         };
         this.code = undefined;
         this.errorText = undefined;
@@ -93,10 +117,10 @@ export class CpslCodeInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9c620c8eb41b595e672e2b7d22944e37de630f73' }, h("div", { key: 'd8e870d0b15b90cfccd78ba5f15cf7b9c0680f0a', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: '090ef84f543cea35b4e128c5ec2bbcd188bb2a86' }, h("div", { key: '93d16d0a74e81cd367f8ee23bfbfea8118b39b0c', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a, _b;
             return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText), 'has-value': ((_a = this.code) === null || _a === void 0 ? void 0 : _a[i]) !== undefined }, id: `code-input-${i}`, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_b = this.code) === null || _b === void 0 ? void 0 : _b[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (h("div", { key: '532bccdc9d9135f4728c503c77b3795440a3607a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: '02db8b47b661f64f2fb3073827aef50d7b94f1f3', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '228b294db359a308d3e76f2ce3c5d17b2d039781' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        })), (this.errorText || this.helperText) && (h("div", { key: 'ae9ccf7cb7736ab4ad186f6d317afbb0f58a518c', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: '1fb36b201fe1aa1640b39900881e8b1eaeff614d', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '30cc9abb139ef14dca8fae44dfcbb61002e1ca6d' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-code-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface.js';\n\n@Component({\n  tag: 'cpsl-code-input',\n  styleUrl: 'cpsl-code-input.scss',\n  shadow: true,\n})\nexport class CpslCodeInput {\n  @Element() el!: HTMLCpslCodeInputElement;\n\n  /**\n   * Value of the code.\n   */\n\n  @Prop({ mutable: true }) code: string;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Length of the code.\n   */\n  @Prop() length: number;\n\n  /**\n   * Type of characters to accept in the code.\n   * Defaults to number.\n   */\n  @Prop() type?: 'number' | 'string' = 'number';\n\n  /**\n   * The `cpslInput` event is fired each time the user modifies the input's value.\n   */\n  @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n  private handleInput = (ind: number, ev: InputEvent) => {\n    const inputElements = this.inputs;\n    // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event\n    if (ev.inputType === 'insertFromPaste') {\n      inputElements[Math.min(this.length - 1, ind)].value = '';\n      return;\n    }\n    if (ev.inputType === 'insertText') {\n      if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n        inputElements[ind].value = '';\n        return;\n      }\n      const newCode = `${this.code ?? ''}${ev.data}`;\n      inputElements[Math.min(this.length - 1, newCode.length)].focus();\n      this.cpslInput.emit({ value: newCode });\n      this.code = newCode;\n    }\n  };\n\n  private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n    const inputElements = this.inputs;\n\n    switch (ev.key) {\n      case 'Backspace': {\n        let newCode;\n        if (!inputElements[ind].value) {\n          inputElements[Math.max(0, ind - 1)].value = '';\n          inputElements[Math.max(0, ind - 1)].focus();\n          newCode = this.code.substring(0, ind - 1);\n        } else {\n          newCode = this.code.substring(0, ind);\n        }\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n        break;\n      }\n      case 'ArrowLeft': {\n        setTimeout(() => {\n          this.inputs[ind].setSelectionRange(1, 1);\n        }, 0);\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  };\n\n  private handleFocus = (ind: number) => {\n    const inputElements = this.inputs;\n\n    for (const input of inputElements) {\n      if (!input.value) {\n        input.focus();\n        break;\n      } else if (input.id === `code-input-${this.length - 1}`) {\n        input.focus();\n        break;\n      }\n    }\n\n    setTimeout(() => {\n      inputElements[ind].setSelectionRange(1, 1);\n    }, 0);\n  };\n\n  private handlePaste = (e: ClipboardEvent) => {\n    const inputElements = this.inputs;\n    const pastedCode = e.clipboardData.getData('text');\n\n    if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n      // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n      setTimeout(() => {\n        inputElements[0].value = '';\n      }, 0);\n      return;\n    }\n\n    this.cpslInput.emit({\n      value: pastedCode,\n    });\n    inputElements.forEach((input, index) => {\n      input.value = pastedCode.charAt(index);\n    });\n    inputElements[Math.min(this.length - 1, pastedCode.length)].focus();\n  };\n\n  private get inputs() {\n    return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"code-container\">\n          {new Array(this.length).fill(0).map((_, i) => (\n            <input\n              class={{ 'code-input': true, 'error': Boolean(this.errorText), 'has-value': this.code?.[i] !== undefined }}\n              id={`code-input-${i}`}\n              onKeyDown={ev => this.handleKeyDown(i, ev)}\n              onInput={ev => this.handleInput(i, ev)}\n              onFocus={() => this.handleFocus(i)}\n              onPaste={this.handlePaste}\n              min={0}\n              max={9}\n              value={this.code?.[i]}\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n            />\n          ))}\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <cpsl-icon icon={this.errorText ? 'alertCircle' : 'infoCircle'} />\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface.js';\n\n@Component({\n  tag: 'cpsl-code-input',\n  styleUrl: 'cpsl-code-input.scss',\n  shadow: true,\n})\nexport class CpslCodeInput {\n  @Element() el!: HTMLCpslCodeInputElement;\n\n  /**\n   * Value of the code.\n   */\n\n  @Prop({ mutable: true }) code: string;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Length of the code.\n   */\n  @Prop() length: number;\n\n  /**\n   * Type of characters to accept in the code.\n   * Defaults to number.\n   */\n  @Prop() type?: 'number' | 'string' = 'number';\n\n  /**\n   * The `cpslInput` event is fired each time the user modifies the input's value.\n   */\n  @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n  private handleInput = (ind: number, ev: InputEvent) => {\n    const inputElements = this.inputs;\n\n    // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event\n    if (ev.inputType === 'insertFromPaste') {\n      inputElements[Math.min(this.length - 1, ind)].value = '';\n      return;\n    }\n\n    if (ev.inputType === 'insertText') {\n      if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n        inputElements[ind].value = '';\n        return;\n      }\n\n      // Prevent input beyond the maximum length\n      if (this.code && this.code.length >= this.length) {\n        inputElements[ind].value = this.code[ind] || '';\n        return;\n      }\n\n      const newCode = `${this.code ?? ''}${ev.data}`;\n\n      // Ensure we don't exceed the maximum length\n      if (newCode.length > this.length) {\n        const truncatedCode = newCode.substring(0, this.length);\n        this.cpslInput.emit({ value: truncatedCode });\n        this.code = truncatedCode;\n        // Set each input to its corresponding character\n        inputElements.forEach((input, index) => {\n          input.value = truncatedCode[index] || '';\n        });\n      } else {\n        inputElements[Math.min(this.length - 1, newCode.length)].focus();\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n      }\n    }\n  };\n\n  private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n    const inputElements = this.inputs;\n\n    switch (ev.key) {\n      case 'Backspace': {\n        let newCode;\n        if (!inputElements[ind].value) {\n          inputElements[Math.max(0, ind - 1)].value = '';\n          inputElements[Math.max(0, ind - 1)].focus();\n          newCode = this.code.substring(0, ind - 1);\n        } else {\n          newCode = this.code.substring(0, ind);\n        }\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n        break;\n      }\n      case 'ArrowLeft': {\n        setTimeout(() => {\n          this.inputs[ind].setSelectionRange(1, 1);\n        }, 0);\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  };\n\n  private handleFocus = (ind: number) => {\n    const inputElements = this.inputs;\n\n    for (const input of inputElements) {\n      if (!input.value) {\n        input.focus();\n        break;\n      } else if (input.id === `code-input-${this.length - 1}`) {\n        input.focus();\n        break;\n      }\n    }\n\n    setTimeout(() => {\n      inputElements[ind].setSelectionRange(1, 1);\n    }, 0);\n  };\n\n  private handlePaste = (e: ClipboardEvent) => {\n    const inputElements = this.inputs;\n    let pastedCode = e.clipboardData.getData('text');\n\n    // Filter based on type\n    if (this.type === 'number') {\n      // Remove all non-numeric characters\n      pastedCode = pastedCode.replace(/\\D/g, '');\n\n      // If no valid numbers remain, clear and return\n      if (!pastedCode) {\n        setTimeout(() => {\n          inputElements[0].value = '';\n        }, 0);\n        return;\n      }\n    }\n\n    // Truncate pasted code to match the expected length\n    const truncatedCode = pastedCode.substring(0, this.length);\n\n    this.cpslInput.emit({\n      value: truncatedCode,\n    });\n\n    inputElements.forEach((input, index) => {\n      input.value = truncatedCode.charAt(index) || '';\n    });\n\n    inputElements[Math.min(this.length - 1, truncatedCode.length)].focus();\n  };\n\n  private get inputs() {\n    return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"code-container\">\n          {new Array(this.length).fill(0).map((_, i) => (\n            <input\n              class={{ 'code-input': true, 'error': Boolean(this.errorText), 'has-value': this.code?.[i] !== undefined }}\n              id={`code-input-${i}`}\n              onKeyDown={ev => this.handleKeyDown(i, ev)}\n              onInput={ev => this.handleInput(i, ev)}\n              onFocus={() => this.handleFocus(i)}\n              onPaste={this.handlePaste}\n              min={0}\n              max={9}\n              value={this.code?.[i]}\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n            />\n          ))}\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <cpsl-icon icon={this.errorText ? 'alertCircle' : 'infoCircle'} />\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-icon/cpsl-icon.css

@@ -58,11 +58,12 @@
   --filter: auto;
   --height: 24px;
   --width: 24px;
-  --svg-height: calc(var(--height) - (2 * var(--inset)));
-  --svg-width: calc(var(--width) - (2 * var(--inset)));
-  --icon-color: currentColor;
-  --icon-fill-color: currentColor;
-  --icon-stroke-color: currentColor;
+  --inset: 0px;
+  --computed-height: calc(var(--height) - (2 * var(--inset)));
+  --computed-width: calc(var(--width) - (2 * var(--inset)));
+  --icon-color: var(--icon-color, currentColor);
+  --icon-fill-color: var(--icon-fill-color, var(--icon-color, currentColor));
+  --icon-stroke-color: var(--icon-stroke-color, var(--icon-color, currentColor));
   width: var(--width);
   height: var(--height);
 }
@@ -81,12 +82,15 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  border: var(--icon-border, auto);
+  border-radius: var(--icon-border-radius, 0);
+  background: var(--icon-background, transparent);
   color: var(--icon-color);
 }
 
 :host svg {
-  width: var(--svg-width, "100%");
-  height: var(--svg-height, "100%");
+  width: var(--computed-width, "100%");
+  height: var(--computed-height, "100%");
   filter: var(--filter);
 }
 :host svg .background-16 {
@@ -103,7 +107,9 @@
 }
 
 :host img {
-  width: 100%;
-  height: 100%;
+  width: var(--computed-width, 100%);
+  height: var(--computed-height, 100%);
+  max-width: 100%;
+  max-height: 100%;
   object-fit: contain;
 }