@usecapsule/core-components 1.0.0 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -518,8 +518,20 @@ const Mail = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke
518
518
  </svg>
519
519
  `;
520
520
 
521
+ const MoreLoginOptionsDark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
522
+ <path d="M6.1 20C6.98366 20 7.7 19.2837 7.7 18.4C7.7 17.5164 6.98366 16.8 6.1 16.8C5.21634 16.8 4.5 17.5164 4.5 18.4C4.5 19.2837 5.21634 20 6.1 20Z" fill="#808080"/>
523
+ <path d="M6.1 13.5999C6.98366 13.5999 7.7 12.8836 7.7 11.9999C7.7 11.1162 6.98366 10.3999 6.1 10.3999C5.21634 10.3999 4.5 11.1162 4.5 11.9999C4.5 12.8836 5.21634 13.5999 6.1 13.5999Z" fill="#3F3F3F"/>
524
+ <path d="M6.1 7.2C6.98366 7.2 7.7 6.48366 7.7 5.6C7.7 4.71634 6.98366 4 6.1 4C5.21634 4 4.5 4.71634 4.5 5.6C4.5 6.48366 5.21634 7.2 6.1 7.2Z" fill="#3F3F3F"/>
525
+ <path d="M12.4999 20C13.3836 20 14.0999 19.2837 14.0999 18.4C14.0999 17.5164 13.3836 16.8 12.4999 16.8C11.6162 16.8 10.8999 17.5164 10.8999 18.4C10.8999 19.2837 11.6162 20 12.4999 20Z" fill="#3F3F3F"/>
526
+ <path d="M12.4999 13.5999C13.3836 13.5999 14.0999 12.8836 14.0999 11.9999C14.0999 11.1162 13.3836 10.3999 12.4999 10.3999C11.6162 10.3999 10.8999 11.1162 10.8999 11.9999C10.8999 12.8836 11.6162 13.5999 12.4999 13.5999Z" fill="#808080"/>
527
+ <path d="M12.4999 7.2C13.3836 7.2 14.0999 6.48366 14.0999 5.6C14.0999 4.71634 13.3836 4 12.4999 4C11.6162 4 10.8999 4.71634 10.8999 5.6C10.8999 6.48366 11.6162 7.2 12.4999 7.2Z" fill="#808080"/>
528
+ <path d="M18.9 20C19.7837 20 20.5 19.2837 20.5 18.4C20.5 17.5164 19.7837 16.8 18.9 16.8C18.0164 16.8 17.3 17.5164 17.3 18.4C17.3 19.2837 18.0164 20 18.9 20Z" fill="#3F3F3F"/>
529
+ <path d="M18.9 13.5999C19.7837 13.5999 20.5 12.8836 20.5 11.9999C20.5 11.1162 19.7837 10.3999 18.9 10.3999C18.0164 10.3999 17.3 11.1162 17.3 11.9999C17.3 12.8836 18.0164 13.5999 18.9 13.5999Z" fill="#3F3F3F"/>
530
+ <path d="M18.9 7.2C19.7837 7.2 20.5 6.48366 20.5 5.6C20.5 4.71634 19.7837 4 18.9 4C18.0164 4 17.3 4.71634 17.3 5.6C17.3 6.48366 18.0164 7.2 18.9 7.2Z" fill="#808080"/>
531
+ </svg>
532
+ `;
533
+
521
534
  const MoreLoginOptions = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
522
- <rect width="24" height="24" fill="white"/>
523
535
  <path d="M5.6 20C6.48366 20 7.2 19.2836 7.2 18.4C7.2 17.5163 6.48366 16.8 5.6 16.8C4.71634 16.8 4 17.5163 4 18.4C4 19.2836 4.71634 20 5.6 20Z" fill="#737373"/>
524
536
  <path d="M5.6 13.6C6.48366 13.6 7.2 12.8836 7.2 12C7.2 11.1163 6.48366 10.4 5.6 10.4C4.71634 10.4 4 11.1163 4 12C4 12.8836 4.71634 13.6 5.6 13.6Z" fill="#A3A3A3"/>
525
537
  <path d="M5.6 7.2C6.48366 7.2 7.2 6.48366 7.2 5.6C7.2 4.71634 6.48366 4 5.6 4C4.71634 4 4 4.71634 4 5.6C4 6.48366 4.71634 7.2 5.6 7.2Z" fill="#A3A3A3"/>
@@ -704,7 +716,7 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
704
716
  </svg>
705
717
  `;
706
718
 
707
- const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, 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, 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, xBrand: XBrand, x: X, youtubeBrand: YoutubeBrand, youtube: Youtube, };
719
+ const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, 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, moreLoginOptionsDark: MoreLoginOptionsDark, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, 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, xBrand: XBrand, x: X, youtubeBrand: YoutubeBrand, youtube: Youtube, };
708
720
 
709
721
  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);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}";
710
722
  const CpslAlertStyle0 = cpslAlertCss;