@usecapsule/core-components 2.0.3 → 2.0.4-dev.2

package/dist/cjs/cpsl-alert_17.cjs.entry.js

@@ -177,6 +177,16 @@ const Copy = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
 </svg>
 `;
 
+const DecentBrand = `<svg width="26" height="21" viewBox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.778 2.78753C14.0232 2.78753 14.984 4.90478 15.5758 6.3203C15.9631 7.2468 16.7703 8.7695 17.7174 9.6841C18.9174 6.8477 19.7749 1e-05 20.9598 0C22.4868 1e-05 25.2514 4.71852 25.2514 10.4107C25.2514 16.1232 22.4888 20.8962 20.96 20.8962C19.7774 20.8962 18.9206 14.0677 17.7252 11.2048C16.773 12.1181 15.9607 13.6496 15.5717 14.58C14.98 15.9955 14.0191 18.1128 12.7739 18.1128C11.5287 18.1128 10.5679 15.9955 9.97612 14.58C9.54017 13.5372 8.57227 11.739 7.47171 10.9028C6.84001 11.4891 6.29866 12.5072 6.04207 13.121C5.65917 14.0369 5.03745 15.4069 4.23174 15.4069C3.42602 15.4069 2.8043 14.0369 2.4214 13.121C2.05134 12.2358 1.07371 10.5066 0.101214 10.4476C0.0674785 10.4496 0.0337325 10.4496 0 10.4476C0.0337143 10.4455 0.0674613 10.4455 0.101214 10.4476C1.07268 10.3887 2.03506 8.6625 2.40511 7.7773C2.78801 6.8614 3.40973 5.4914 4.21545 5.4914C5.02116 5.4914 5.64288 6.8614 6.02578 7.7773C6.28377 8.3944 6.82965 9.4203 7.4658 10.005C8.57048 9.1721 9.5429 7.3663 9.98018 6.3203C10.5719 4.90478 11.5328 2.78753 12.778 2.78753Z" fill="#9969FF"/>
+</svg>
+`;
+
+const Decent = `<svg width="26" height="21" viewBox="0 0 26 21" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.778 2.78753C14.0232 2.78753 14.984 4.90478 15.5758 6.3203C15.9631 7.2468 16.7703 8.7695 17.7174 9.6841C18.9174 6.8477 19.7749 1e-05 20.9598 0C22.4868 1e-05 25.2514 4.71852 25.2514 10.4107C25.2514 16.1232 22.4888 20.8962 20.96 20.8962C19.7774 20.8962 18.9206 14.0677 17.7252 11.2048C16.773 12.1181 15.9607 13.6496 15.5717 14.58C14.98 15.9955 14.0191 18.1128 12.7739 18.1128C11.5287 18.1128 10.5679 15.9955 9.97612 14.58C9.54017 13.5372 8.57227 11.739 7.47171 10.9028C6.84001 11.4891 6.29866 12.5072 6.04207 13.121C5.65917 14.0369 5.03745 15.4069 4.23174 15.4069C3.42602 15.4069 2.8043 14.0369 2.4214 13.121C2.05134 12.2358 1.07371 10.5066 0.101214 10.4476C0.0674785 10.4496 0.0337325 10.4496 0 10.4476C0.0337143 10.4455 0.0674613 10.4455 0.101214 10.4476C1.07268 10.3887 2.03506 8.6625 2.40511 7.7773C2.78801 6.8614 3.40973 5.4914 4.21545 5.4914C5.02116 5.4914 5.64288 6.8614 6.02578 7.7773C6.28377 8.3944 6.82965 9.4203 7.4658 10.005C8.57048 9.1721 9.5429 7.3663 9.98018 6.3203C10.5719 4.90478 11.5328 2.78753 12.778 2.78753Z" fill="currentColor"/>
+</svg>
+`;
+
 const DiscordBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.88806 10.068C9.20406 10.068 8.66406 10.668 8.66406 11.4C8.66406 12.132 9.21606 12.732 9.88806 12.732C10.5721 12.732 11.1121 12.132 11.1121 11.4C11.1241 10.668 10.5721 10.068 9.88806 10.068ZM14.2681 10.068C13.5841 10.068 13.0441 10.668 13.0441 11.4C13.0441 12.132 13.5961 12.732 14.2681 12.732C14.9521 12.732 15.4921 12.132 15.4921 11.4C15.4921 10.668 14.9521 10.068 14.2681 10.068Z" fill="#7289DA"/>
 <path d="M20.1001 0H4.02006C2.66406 0 1.56006 1.104 1.56006 2.472V18.696C1.56006 20.064 2.66406 21.168 4.02006 21.168H17.6281L16.9921 18.948L18.5281 20.376L19.9801 21.72L22.5601 24V2.472C22.5601 1.104 21.4561 0 20.1001 0ZM15.4681 15.672C15.4681 15.672 15.0361 15.156 14.6761 14.7C16.2481 14.256 16.8481 13.272 16.8481 13.272C16.3561 13.596 15.8881 13.824 15.4681 13.98C14.8681 14.232 14.2921 14.4 13.7281 14.496C12.5761 14.712 11.5201 14.652 10.6201 14.484C9.93606 14.352 9.34806 14.16 8.85606 13.968C8.58006 13.86 8.28006 13.728 7.98006 13.56C7.94406 13.536 7.90806 13.524 7.87206 13.5C7.84806 13.488 7.83606 13.476 7.82406 13.464C7.60806 13.344 7.48806 13.26 7.48806 13.26C7.48806 13.26 8.06406 14.22 9.58806 14.676C9.22806 15.132 8.78406 15.672 8.78406 15.672C6.13206 15.588 5.12406 13.848 5.12406 13.848C5.12406 9.984 6.85206 6.852 6.85206 6.852C8.58006 5.556 10.2241 5.592 10.2241 5.592L10.3441 5.736C8.18406 6.36 7.18806 7.308 7.18806 7.308C7.18806 7.308 7.45206 7.164 7.89606 6.96C9.18006 6.396 10.2001 6.24 10.6201 6.204C10.6921 6.192 10.7521 6.18 10.8241 6.18C11.5561 6.084 12.3841 6.06 13.2481 6.156C14.3881 6.288 15.6121 6.624 16.8601 7.308C16.8601 7.308 15.9121 6.408 13.8721 5.784L14.0401 5.592C14.0401 5.592 15.6841 5.556 17.4121 6.852C17.4121 6.852 19.1401 9.984 19.1401 13.848C19.1401 13.848 18.1201 15.588 15.4681 15.672Z" fill="#7289DA"/>
@@ -398,6 +408,11 @@ const Key = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke=
 </svg>
 `;
 
+const Lightning = `<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 14.8962L5 9.89624L1 8.39624L8 0.89624L7 5.89624L11 7.39624L4 14.8962Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 const LinkedinBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_106_21170)">
 <path d="M22.2283 0H1.77167C1.30179 0 0.851161 0.186657 0.518909 0.518909C0.186657 0.851161 0 1.30179 0 1.77167V22.2283C0 22.6982 0.186657 23.1488 0.518909 23.4811C0.851161 23.8133 1.30179 24 1.77167 24H22.2283C22.6982 24 23.1488 23.8133 23.4811 23.4811C23.8133 23.1488 24 22.6982 24 22.2283V1.77167C24 1.30179 23.8133 0.851161 23.4811 0.518909C23.1488 0.186657 22.6982 0 22.2283 0ZM7.15333 20.445H3.545V8.98333H7.15333V20.445ZM5.34667 7.395C4.93736 7.3927 4.53792 7.2692 4.19873 7.04009C3.85955 6.81098 3.59584 6.48653 3.44088 6.10769C3.28591 5.72885 3.24665 5.31259 3.32803 4.91145C3.40941 4.51032 3.6078 4.14228 3.89816 3.85378C4.18851 3.56529 4.55782 3.36927 4.95947 3.29046C5.36112 3.21165 5.77711 3.25359 6.15495 3.41099C6.53279 3.56838 6.85554 3.83417 7.08247 4.17481C7.30939 4.51546 7.43032 4.91569 7.43 5.325C7.43386 5.59903 7.38251 5.87104 7.27901 6.1248C7.17551 6.37857 7.02198 6.6089 6.82757 6.80207C6.63316 6.99523 6.40185 7.14728 6.14742 7.24915C5.893 7.35102 5.62067 7.40062 5.34667 7.395ZM20.4533 20.455H16.8467V14.1933C16.8467 12.3467 16.0617 11.7767 15.0483 11.7767C13.9783 11.7767 12.9283 12.5833 12.9283 14.24V20.455H9.32V8.99167H12.79V10.58H12.8367C13.185 9.875 14.405 8.67 16.2667 8.67C18.28 8.67 20.455 9.865 20.455 13.365L20.4533 20.455Z" fill="#0A66C2"/>
@@ -479,6 +494,16 @@ const PlusCircle = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
 </svg>
 `;
 
+const RampNetworkBrand = `<svg width="32" height="21" viewBox="0 0 32 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0204 12.6656L13.7622 16.4664C13.9145 16.6214 14 16.8312 14 17.0498C14 17.2684 13.9145 17.4782 13.7622 17.6333L10.9029 20.5311C10.6661 20.7652 10.3482 20.8962 10.0172 20.8962C9.68616 20.8962 9.36827 20.7652 9.13148 20.5311L0.365454 11.777C0.249692 11.6614 0.157776 11.5237 0.0950404 11.3718C0.0323051 11.2199 0 11.057 0 10.8924C0 10.7277 0.0323051 10.5648 0.0950404 10.4129C0.157776 10.261 0.249692 10.1233 0.365454 10.0077L9.13108 1.2614C9.36787 1.0273 9.68575 0.89624 10.0168 0.89624C10.3478 0.89624 10.6657 1.0273 10.9025 1.2614L13.7618 4.15922C13.9141 4.31428 13.9996 4.52403 13.9996 4.74267C13.9996 4.96131 13.9141 5.17106 13.7618 5.32612L10.0204 9.12726C9.78891 9.35849 9.60508 9.63395 9.47962 9.93765C9.35415 10.2414 9.28955 10.5673 9.28955 10.8964C9.28955 11.2256 9.35415 11.5515 9.47962 11.8552C9.60508 12.1589 9.78891 12.4344 10.0204 12.6656ZM21.9802 12.6656L18.2378 16.4664C18.0855 16.6214 18 16.8312 18 17.0498C18 17.2684 18.0855 17.4782 18.2378 17.6333L21.0976 20.5311C21.3344 20.7652 21.6523 20.8962 21.9834 20.8962C22.3145 20.8962 22.6324 20.7652 22.8692 20.5311L31.6345 11.777C31.7503 11.6614 31.8422 11.5237 31.9049 11.3718C31.9677 11.2199 32 11.057 32 10.8924C32 10.7277 31.9677 10.5648 31.9049 10.4129C31.8422 10.261 31.7503 10.1233 31.6345 10.0077L22.87 1.2614C22.6332 1.0273 22.3153 0.89624 21.9842 0.89624C21.6531 0.89624 21.3352 1.0273 21.0984 1.2614L18.2386 4.15922C18.0863 4.31428 18.0008 4.52403 18.0008 4.74267C18.0008 4.96131 18.0863 5.17106 18.2386 5.32612L21.981 9.12685C22.2125 9.35814 22.3964 9.63367 22.5218 9.93744C22.6473 10.2412 22.7118 10.5672 22.7117 10.8964C22.7117 11.2256 22.647 11.5516 22.5214 11.8553C22.3958 12.159 22.2118 12.4345 21.9802 12.6656ZM11 10.8964C11 11.1677 11.1077 11.4278 11.2994 11.6197L15.2764 15.5969C15.4682 15.7886 15.7284 15.8962 15.9996 15.8962C16.2708 15.8962 16.5309 15.7886 16.7228 15.5969L20.7006 11.6197C20.8923 11.4278 21 11.1677 21 10.8964C21 10.6252 20.8923 10.3651 20.7006 10.1732L16.7232 6.19563C16.5313 6.00392 16.2712 5.89624 16 5.89624C15.7288 5.89624 15.4687 6.00392 15.2768 6.19563L11.2994 10.1732C11.1077 10.3651 11 10.6252 11 10.8964Z" fill="#21BF73"/>
+</svg>
+`;
+
+const RampNetwork = `<svg width="32" height="21" viewBox="0 0 32 21" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0204 12.6656L13.7622 16.4664C13.9145 16.6214 14 16.8312 14 17.0498C14 17.2684 13.9145 17.4782 13.7622 17.6333L10.9029 20.5311C10.6661 20.7652 10.3482 20.8962 10.0172 20.8962C9.68616 20.8962 9.36827 20.7652 9.13148 20.5311L0.365454 11.777C0.249692 11.6614 0.157776 11.5237 0.0950404 11.3718C0.0323051 11.2199 0 11.057 0 10.8924C0 10.7277 0.0323051 10.5648 0.0950404 10.4129C0.157776 10.261 0.249692 10.1233 0.365454 10.0077L9.13108 1.2614C9.36787 1.0273 9.68575 0.89624 10.0168 0.89624C10.3478 0.89624 10.6657 1.0273 10.9025 1.2614L13.7618 4.15922C13.9141 4.31428 13.9996 4.52403 13.9996 4.74267C13.9996 4.96131 13.9141 5.17106 13.7618 5.32612L10.0204 9.12726C9.78891 9.35849 9.60508 9.63395 9.47962 9.93765C9.35415 10.2414 9.28955 10.5673 9.28955 10.8964C9.28955 11.2256 9.35415 11.5515 9.47962 11.8552C9.60508 12.1589 9.78891 12.4344 10.0204 12.6656ZM21.9802 12.6656L18.2378 16.4664C18.0855 16.6214 18 16.8312 18 17.0498C18 17.2684 18.0855 17.4782 18.2378 17.6333L21.0976 20.5311C21.3344 20.7652 21.6523 20.8962 21.9834 20.8962C22.3145 20.8962 22.6324 20.7652 22.8692 20.5311L31.6345 11.777C31.7503 11.6614 31.8422 11.5237 31.9049 11.3718C31.9677 11.2199 32 11.057 32 10.8924C32 10.7277 31.9677 10.5648 31.9049 10.4129C31.8422 10.261 31.7503 10.1233 31.6345 10.0077L22.87 1.2614C22.6332 1.0273 22.3153 0.89624 21.9842 0.89624C21.6531 0.89624 21.3352 1.0273 21.0984 1.2614L18.2386 4.15922C18.0863 4.31428 18.0008 4.52403 18.0008 4.74267C18.0008 4.96131 18.0863 5.17106 18.2386 5.32612L21.981 9.12685C22.2125 9.35814 22.3964 9.63367 22.5218 9.93744C22.6473 10.2412 22.7118 10.5672 22.7117 10.8964C22.7117 11.2256 22.647 11.5516 22.5214 11.8553C22.3958 12.159 22.2118 12.4345 21.9802 12.6656ZM11 10.8964C11 11.1677 11.1077 11.4278 11.2994 11.6197L15.2764 15.5969C15.4682 15.7886 15.7284 15.8962 15.9996 15.8962C16.2708 15.8962 16.5309 15.7886 16.7228 15.5969L20.7006 11.6197C20.8923 11.4278 21 11.1677 21 10.8964C21 10.6252 20.8923 10.3651 20.7006 10.1732L16.7232 6.19563C16.5313 6.00392 16.2712 5.89624 16 5.89624C15.7288 5.89624 15.4687 6.00392 15.2768 6.19563L11.2994 10.1732C11.1077 10.3651 11 10.6252 11 10.8964Z" fill="currentColor"/>
+</svg>
+`;
+
 const RedditBrand = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_106_21199)">
 <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="#FF4500"/>
@@ -618,7 +643,7 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
 </svg>
 `;
 
-const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, check: Check, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, eyeOff: EyeOff, eye: Eye, facebookBrand: FacebookBrand, facebook: Facebook, figmaBrand: FigmaBrand, figma: Figma, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, redditBrand: RedditBrand, reddit: Reddit, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, youtubeBrand: YoutubeBrand, youtube: Youtube, };
+const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, check: Check, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, decentBrand: DecentBrand, decent: Decent, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, eyeOff: EyeOff, eye: Eye, facebookBrand: FacebookBrand, facebook: Facebook, figmaBrand: FigmaBrand, figma: Figma, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, lightning: Lightning, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, rampNetworkBrand: RampNetworkBrand, rampNetwork: RampNetwork, redditBrand: RedditBrand, reddit: Reddit, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, youtubeBrand: YoutubeBrand, youtube: Youtube, };
 
 const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-start:16px;--container-padding-end:16px;--container-font-size:clamp(12px, 0.75rem, 18px);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-background-color:var(--cpsl-color-alert-surface-error);--container-border-color:var(--cpsl-color-alert-border-error);--container-color:var(--cpsl-color-text-error)}.alert-container{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);font-weight:500;display:flex;align-items:center;justify-content:center;gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}.icon{display:flex}";
 const CpslAlertStyle0 = cpslAlertCss;
@@ -10158,8 +10183,9 @@ const CpslModal = class {
                         this.cpslModalExiting.emit();
                     },
                     onComplete: () => {
+                        var _a;
                         this.cpslModalExited.emit();
-                        this.modalWrapperEl.style.setProperty('display', 'none');
+                        (_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
                     },
                 })
                     .to(this.modalWrapperEl, {
@@ -10175,8 +10201,9 @@ const CpslModal = class {
                         this.cpslModalExiting.emit();
                     },
                     onComplete: () => {
+                        var _a;
                         this.cpslModalExited.emit();
-                        this.modalWrapperEl.style.setProperty('display', 'none');
+                        (_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
                     },
                 })
                     .to(this.modalWrapperEl, {
@@ -10273,7 +10300,7 @@ const CpslModal = class {
     }
     render() {
         if (this.noOverlay) {
-            return index.h(index.Host, null, this.Modal);
+            return (index.h(index.Host, null, index.h("div", { id: "modal-wrapper" }, this.Modal)));
         }
         return (index.h(index.Host, { class: { 'include-mobile-styling': true } }, index.h("cpsl-overlay", { id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), index.h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
     }