@getpara/core-components 2.0.0-dev.1 → 2.0.0-dev.2

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/stars-02.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <g clip-path="url(#clip0_2396_384)">
+    <path d="M3.74999 18.3334V14.1667M3.74999 5.83341V1.66675M1.66666 3.75008H5.83332M1.66666 16.2501H5.83332M10.8333 2.50008L9.38817 6.25747C9.15317 6.86849 9.03566 7.174 8.85293 7.43099C8.69098 7.65875 8.49199 7.85774 8.26423 8.01969C8.00725 8.20242 7.70173 8.31992 7.09071 8.55493L3.33332 10.0001L7.09071 11.4452C7.70173 11.6802 8.00725 11.7977 8.26423 11.9805C8.49199 12.1424 8.69098 12.3414 8.85293 12.5692C9.03566 12.8262 9.15317 13.1317 9.38818 13.7427L10.8333 17.5001L12.2785 13.7427C12.5135 13.1317 12.631 12.8262 12.8137 12.5692C12.9757 12.3414 13.1747 12.1424 13.4024 11.9805C13.6594 11.7977 13.9649 11.6802 14.5759 11.4452L18.3333 10.0001L14.5759 8.55493C13.9649 8.31992 13.6594 8.20242 13.4024 8.01969C13.1747 7.85774 12.9757 7.65875 12.8137 7.43099C12.631 7.174 12.5135 6.86849 12.2785 6.25747L10.8333 2.50008Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_2396_384">
+      <rect width="20" height="20" fill="currentColor"/>
+    </clipPath>
+  </defs>
+</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-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\" | \"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\" | \"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\" | \"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\" | \"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\" | \"userCircle\" | \"userPlus\" | \"user\" | \"valora\" | \"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-col/cpsl-col.js

@@ -5,6 +5,9 @@ const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports(
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 export class CpslCol {
     constructor() {
+        this.align = 'center';
+        this.justify = 'center';
+        this.gap = '8px';
         this.offset = undefined;
         this.offsetXs = undefined;
         this.offsetSm = undefined;
@@ -105,7 +108,7 @@ export class CpslCol {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (h(Host, { key: 'c9d2d0d4c021bc38e672ef6a8db36b1f50f53e2c', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: 'a9f61e679573d1ec7cf26ac9837b0fabf9f885eb' })));
+        return (h(Host, { key: 'f4939676b491eb1d76138f93495ca714338efa34', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '58799b5710715af09184b88c94d46638e78e1f41' })));
     }
     static get is() { return "cpsl-col"; }
     static get encapsulation() { return "shadow"; }
@@ -121,6 +124,75 @@ export class CpslCol {
     }
     static get properties() {
         return {
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "React.CSSProperties['alignItems']",
+                    "resolved": "\"-moz-initial\" | \"baseline\" | \"center\" | \"end\" | \"flex-end\" | \"flex-start\" | \"inherit\" | \"initial\" | \"normal\" | \"revert\" | \"revert-layer\" | \"self-end\" | \"self-start\" | \"start\" | \"stretch\" | \"unset\" | string & {}",
+                    "references": {
+                        "React": {
+                            "location": "global",
+                            "id": "global::React"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "align",
+                "reflect": false,
+                "defaultValue": "'center'"
+            },
+            "justify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "React.CSSProperties['justifyContent']",
+                    "resolved": "\"-moz-initial\" | \"center\" | \"end\" | \"flex-end\" | \"flex-start\" | \"inherit\" | \"initial\" | \"left\" | \"normal\" | \"revert\" | \"revert-layer\" | \"right\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\" | \"stretch\" | \"unset\" | string & {}",
+                    "references": {
+                        "React": {
+                            "location": "global",
+                            "id": "global::React"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "justify",
+                "reflect": false,
+                "defaultValue": "'center'"
+            },
+            "gap": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "React.CSSProperties['gap']",
+                    "resolved": "number | string | string & {}",
+                    "references": {
+                        "React": {
+                            "location": "global",
+                            "id": "global::React"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "gap",
+                "reflect": false,
+                "defaultValue": "'8px'"
+            },
             "offset": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/cpsl-col/cpsl-col.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-col.js","sourceRoot":"","sources":["../../../../src/components/cpsl-col/cpsl-col.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media.js';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n  tag: 'cpsl-col',\n  styleUrl: 'cpsl-col.scss',\n  shadow: true,\n})\nexport class CpslCol {\n  /**\n   * The amount to offset the column, in terms of how many columns it should shift to the end\n   * of the total available.\n   */\n  @Prop() offset?: string;\n\n  /**\n   * The amount to offset the column for xs screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetXs?: string;\n\n  /**\n   * The amount to offset the column for sm screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetSm?: string;\n\n  /**\n   * The amount to offset the column for md screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetMd?: string;\n\n  /**\n   * The amount to offset the column for lg screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetLg?: string;\n\n  /**\n   * The amount to offset the column for xl screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetXl?: string;\n\n  /**\n   * The amount to pull the column, in terms of how many columns it should shift to the start of\n   * the total available.\n   */\n  @Prop() pull?: string;\n\n  /**\n   * The amount to pull the column for xs screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullXs?: string;\n  /**\n   * The amount to pull the column for sm screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullSm?: string;\n  /**\n   * The amount to pull the column for md screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullMd?: string;\n  /**\n   * The amount to pull the column for lg screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullLg?: string;\n  /**\n   * The amount to pull the column for xl screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullXl?: string;\n\n  /**\n   * The amount to push the column, in terms of how many columns it should shift to the end\n   * of the total available.\n   */\n  @Prop() push?: string;\n\n  /**\n   * The amount to push the column for xs screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushXs?: string;\n\n  /**\n   * The amount to push the column for sm screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushSm?: string;\n\n  /**\n   * The amount to push the column for md screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushMd?: string;\n\n  /**\n   * The amount to push the column for lg screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushLg?: string;\n\n  /**\n   * The amount to push the column for xl screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushXl?: string;\n\n  /**\n   * The size of the column, in terms of how many columns it should take up out of the total\n   * available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() size?: string;\n\n  /**\n   * The size of the column for xs screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeXs?: string;\n\n  /**\n   * The size of the column for sm screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeSm?: string;\n\n  /**\n   * The size of the column for md screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeMd?: string;\n\n  /**\n   * The size of the column for lg screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeLg?: string;\n\n  /**\n   * The size of the column for xl screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeXl?: string;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  // Loop through all of the breakpoints to see if the media query\n  // matches and grab the column value from the relevant prop if so\n  private getColumns(property: string) {\n    let matched;\n\n    for (const breakpoint of BREAKPOINTS) {\n      const matches = matchBreakpoint(breakpoint);\n\n      // Grab the value of the property, if it exists and our\n      // media query matches we return the value\n      const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n      if (matches && columns !== undefined) {\n        matched = columns;\n      }\n    }\n\n    // Return the last matched columns since the breakpoints\n    // increase in size and we want to return the largest match\n    return matched;\n  }\n\n  private calculateSize() {\n    const columns = this.getColumns('size');\n\n    // If size wasn't set for any breakpoint\n    // or if the user set the size without a value\n    // it means we need to stick with the default and return\n    // e.g. <ion-col size-md>\n    if (!columns || columns === '') {\n      return;\n    }\n\n    // If the size is set to auto then don't calculate a size\n    const colSize =\n      columns === 'auto'\n        ? 'auto'\n        : // If CSS supports variables we should use the grid columns var\n          SUPPORTS_VARS\n          ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n          : // Convert the columns to a percentage by dividing by the total number\n            // of columns (12) and then multiplying by 100\n            (columns / 12) * 100 + '%';\n\n    return {\n      'flex': `0 0 ${colSize}`,\n      'width': `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  // Called by push, pull, and offset since they use the same calculations\n  private calculatePosition(property: string, modifier: string) {\n    const columns = this.getColumns(property);\n\n    if (!columns) {\n      return;\n    }\n\n    // If the number of columns passed are greater than 0 and less than\n    // 12 we can position the column, else default to auto\n    const amount = SUPPORTS_VARS\n      ? // If CSS supports variables we should use the grid columns var\n        `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n      : // Convert the columns to a percentage by dividing by the total number\n        // of columns (12) and then multiplying by 100\n        columns > 0 && columns < 12\n        ? (columns / 12) * 100 + '%'\n        : 'auto';\n\n    return {\n      [modifier]: amount,\n    };\n  }\n\n  private calculateOffset(isRTL: boolean) {\n    return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n  }\n\n  private calculatePull(isRTL: boolean) {\n    return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n  }\n\n  private calculatePush(isRTL: boolean) {\n    return this.calculatePosition('push', isRTL ? 'right' : 'left');\n  }\n\n  render() {\n    const isRTL = document.dir === 'rtl';\n    return (\n      <Host\n        style={{\n          ...this.calculateOffset(isRTL),\n          ...this.calculatePull(isRTL),\n          ...this.calculatePush(isRTL),\n          ...this.calculateSize(),\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-col.js","sourceRoot":"","sources":["../../../../src/components/cpsl-col/cpsl-col.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media.js';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n  tag: 'cpsl-col',\n  styleUrl: 'cpsl-col.scss',\n  shadow: true,\n})\nexport class CpslCol {\n  @Prop() align?: React.CSSProperties['alignItems'] = 'center';\n\n  @Prop() justify?: React.CSSProperties['justifyContent'] = 'center';\n\n  @Prop() gap?: React.CSSProperties['gap'] = '8px';\n\n  /**\n   * The amount to offset the column, in terms of how many columns it should shift to the end\n   * of the total available.\n   */\n  @Prop() offset?: string;\n\n  /**\n   * The amount to offset the column for xs screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetXs?: string;\n\n  /**\n   * The amount to offset the column for sm screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetSm?: string;\n\n  /**\n   * The amount to offset the column for md screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetMd?: string;\n\n  /**\n   * The amount to offset the column for lg screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetLg?: string;\n\n  /**\n   * The amount to offset the column for xl screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() offsetXl?: string;\n\n  /**\n   * The amount to pull the column, in terms of how many columns it should shift to the start of\n   * the total available.\n   */\n  @Prop() pull?: string;\n\n  /**\n   * The amount to pull the column for xs screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullXs?: string;\n  /**\n   * The amount to pull the column for sm screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullSm?: string;\n  /**\n   * The amount to pull the column for md screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullMd?: string;\n  /**\n   * The amount to pull the column for lg screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullLg?: string;\n  /**\n   * The amount to pull the column for xl screens, in terms of how many columns it should shift\n   * to the start of the total available.\n   */\n  @Prop() pullXl?: string;\n\n  /**\n   * The amount to push the column, in terms of how many columns it should shift to the end\n   * of the total available.\n   */\n  @Prop() push?: string;\n\n  /**\n   * The amount to push the column for xs screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushXs?: string;\n\n  /**\n   * The amount to push the column for sm screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushSm?: string;\n\n  /**\n   * The amount to push the column for md screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushMd?: string;\n\n  /**\n   * The amount to push the column for lg screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushLg?: string;\n\n  /**\n   * The amount to push the column for xl screens, in terms of how many columns it should shift\n   * to the end of the total available.\n   */\n  @Prop() pushXl?: string;\n\n  /**\n   * The size of the column, in terms of how many columns it should take up out of the total\n   * available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() size?: string;\n\n  /**\n   * The size of the column for xs screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeXs?: string;\n\n  /**\n   * The size of the column for sm screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeSm?: string;\n\n  /**\n   * The size of the column for md screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeMd?: string;\n\n  /**\n   * The size of the column for lg screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeLg?: string;\n\n  /**\n   * The size of the column for xl screens, in terms of how many columns it should take up out\n   * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n   */\n  @Prop() sizeXl?: string;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  // Loop through all of the breakpoints to see if the media query\n  // matches and grab the column value from the relevant prop if so\n  private getColumns(property: string) {\n    let matched;\n\n    for (const breakpoint of BREAKPOINTS) {\n      const matches = matchBreakpoint(breakpoint);\n\n      // Grab the value of the property, if it exists and our\n      // media query matches we return the value\n      const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n      if (matches && columns !== undefined) {\n        matched = columns;\n      }\n    }\n\n    // Return the last matched columns since the breakpoints\n    // increase in size and we want to return the largest match\n    return matched;\n  }\n\n  private calculateSize() {\n    const columns = this.getColumns('size');\n\n    // If size wasn't set for any breakpoint\n    // or if the user set the size without a value\n    // it means we need to stick with the default and return\n    // e.g. <ion-col size-md>\n    if (!columns || columns === '') {\n      return;\n    }\n\n    // If the size is set to auto then don't calculate a size\n    const colSize =\n      columns === 'auto'\n        ? 'auto'\n        : // If CSS supports variables we should use the grid columns var\n          SUPPORTS_VARS\n          ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n          : // Convert the columns to a percentage by dividing by the total number\n            // of columns (12) and then multiplying by 100\n            (columns / 12) * 100 + '%';\n\n    return {\n      'flex': `0 0 ${colSize}`,\n      'width': `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  // Called by push, pull, and offset since they use the same calculations\n  private calculatePosition(property: string, modifier: string) {\n    const columns = this.getColumns(property);\n\n    if (!columns) {\n      return;\n    }\n\n    // If the number of columns passed are greater than 0 and less than\n    // 12 we can position the column, else default to auto\n    const amount = SUPPORTS_VARS\n      ? // If CSS supports variables we should use the grid columns var\n        `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n      : // Convert the columns to a percentage by dividing by the total number\n        // of columns (12) and then multiplying by 100\n        columns > 0 && columns < 12\n        ? (columns / 12) * 100 + '%'\n        : 'auto';\n\n    return {\n      [modifier]: amount,\n    };\n  }\n\n  private calculateOffset(isRTL: boolean) {\n    return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n  }\n\n  private calculatePull(isRTL: boolean) {\n    return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n  }\n\n  private calculatePush(isRTL: boolean) {\n    return this.calculatePosition('push', isRTL ? 'right' : 'left');\n  }\n\n  render() {\n    const isRTL = document.dir === 'rtl';\n    return (\n      <Host\n        style={{\n          ...this.calculateOffset(isRTL),\n          ...this.calculatePull(isRTL),\n          ...this.calculatePush(isRTL),\n          ...this.calculateSize(),\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -55,8 +55,12 @@
    */
 :host {
   display: block;
+  --filter: auto;
   --height: 24px;
   --width: 24px;
+  --inset: 0px;
+  --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;
@@ -74,14 +78,17 @@
 
 :host div {
   display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   height: 100%;
   color: var(--icon-color);
 }
 
 :host svg {
-  width: 100%;
-  height: 100%;
+  width: var(--svg-width, "100%");
+  height: var(--svg-height, "100%");
+  filter: var(--filter);
 }
 :host svg .background-16 {
   fill: var(--cpsl-color-background-16);

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

@@ -4,10 +4,12 @@ export class CpslIcon {
     constructor() {
         this.src = undefined;
         this.size = undefined;
+        this.invert = undefined;
+        this.inset = '0px';
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '3eeac68688cf0a4acf173be909a7f36b4285f97d', part: "icon", role: "img", style: this.size ? { width: this.size, height: this.size } : {} }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '0430d12efb436b0617a9e4c70cf24bee39fa8382', part: "icon", role: "img", style: Object.assign(Object.assign(Object.assign({}, (this.inset ? { ['--inset']: this.inset } : {})), (this.size ? { ['--height']: this.size, ['--width']: this.size } : {})), (this.invert ? { ['--filter']: 'invert(100%)' } : {})) }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
     static get is() { return "cpsl-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -57,12 +59,47 @@ export class CpslIcon {
                 "attribute": "size",
                 "reflect": false
             },
+            "invert": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to invert the icon's colors."
+                },
+                "attribute": "invert",
+                "reflect": false
+            },
+            "inset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The CSS length to inset the icon."
+                },
+                "attribute": "inset",
+                "reflect": false,
+                "defaultValue": "'0px'"
+            },
             "icon": {
                 "type": "string",
                 "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\" | \"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\" | \"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\" | \"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\" | \"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\" | \"userCircle\" | \"userPlus\" | \"user\" | \"valora\" | \"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-icon/cpsl-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAOpD,MAAM,OAAO,QAAQ;;;;;;IAgBnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IACzF,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACtE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface.js';\nimport { Icons } from '../../assets/icons/index.js';\n\n@Component({\n  tag: 'cpsl-icon',\n  styleUrl: 'cpsl-icon.scss',\n  shadow: true,\n})\nexport class CpslIcon {\n  /**\n   * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() src?: string;\n\n  /**\n   * The CSS size of the icon.\n   */\n  @Prop() size?: string;\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  render() {\n    return (\n      <Host part=\"icon\" role=\"img\" style={this.size ? { width: this.size, height: this.size } : {}}>\n        {!this.icon ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAOpD,MAAM,OAAO,QAAQ;;;;;qBAmBK,KAAK;;;IAO7B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,EACV,KAAK,gDACA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC/C,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACtE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAGzD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACtE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface.js';\nimport { Icons } from '../../assets/icons/index.js';\n\n@Component({\n  tag: 'cpsl-icon',\n  styleUrl: 'cpsl-icon.scss',\n  shadow: true,\n})\nexport class CpslIcon {\n  /**\n   * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() src?: string;\n\n  /**\n   * The CSS size of the icon.\n   */\n  @Prop() size?: string;\n\n  /**\n   * Whether to invert the icon's colors.\n   */\n  @Prop() invert?: boolean;\n\n  /**\n   * The CSS length to inset the icon.\n   */\n  @Prop() inset: string = '0px';\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  render() {\n    return (\n      <Host\n        part=\"icon\"\n        role=\"img\"\n        style={{\n          ...(this.inset ? { ['--inset']: this.inset } : {}),\n          ...(this.size ? { ['--height']: this.size, ['--width']: this.size } : {}),\n          ...(this.invert ? { ['--filter']: 'invert(100%)' } : {}),\n        }}\n      >\n        {!this.icon ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -6,6 +6,7 @@
   --identicon-background-blue: linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);
   --identicon-background-purple: linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);
   --identicon-background-empty: linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);
+  --identicon-arc-width: 30%;
   display: block;
   aspect-ratio: 1;
   border-radius: 25%;
@@ -15,7 +16,7 @@
 :host > svg {
   fill: rgba(255, 255, 255, 0.6);
   position: absolute;
-  width: 30%;
+  width: var(--identicon-arc-width);
 }
 :host > svg.rotate90 {
   transform: rotate(0.25turn);