@cronos-labs/ui 0.2.1 → 0.5.0

package/dist/Button/index.d.ts

@@ -0,0 +1,32 @@
+import type { ElementType, MouseEvent, ReactNode } from 'react';
+export type ButtonVariant = 'light' | 'dark';
+export interface ButtonProps {
+    label: string;
+    variant?: ButtonVariant;
+    /** Decorative mark shown before the label. Pair with `iconSrc`. */
+    icon?: 'google-play' | 'app-store';
+    /** Resolved icon URL, so each site can ship its own artwork. */
+    iconSrc?: string;
+    /** Smaller line above the label, e.g. "Download on the". */
+    subLabel?: ReactNode;
+    href?: string;
+    rel?: string;
+    target?: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Render as a different element or component.
+     *
+     * The reason this exists: an in-app destination needs a router link, not an
+     * `<a>`, or the navigation becomes a full page reload. Without it, callers
+     * re-implemented this button's surface by hand to get a `Link`.
+     *
+     * ```tsx
+     * <Button as={Link} to="/create" label="Create token" />
+     * ```
+     */
+    as?: ElementType;
+    /** Destination when rendering as a router link. Forwarded verbatim. */
+    to?: string;
+    'aria-label'?: string;
+}
+export declare function Button({ icon, iconSrc, href, label, rel, subLabel, target, variant, as, to, onClick, 'aria-label': ariaLabel, }: ButtonProps): React.JSX.Element;

package/dist/Button/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconWrap, Label, StoreSubLabel, Surface } from './styles.js';
+export function Button({ icon, iconSrc, href, label, rel, subLabel, target, variant = 'light', as, to, onClick, 'aria-label': ariaLabel, }) {
+    return (_jsxs(Surface, { "$variant": variant, ...(as ? { as } : {}), ...(to !== undefined ? { to } : {}), href: href, rel: rel, target: target, onClick: onClick, "aria-label": ariaLabel, children: [icon && iconSrc ? (_jsx(IconWrap, { "$variant": variant, children: _jsx("img", { src: iconSrc, alt: "", "aria-hidden": "true" }) })) : null, _jsxs(Label, { children: [subLabel ? _jsx(StoreSubLabel, { "$variant": variant, children: subLabel }) : null, _jsx("strong", { children: label })] })] }));
+}

package/dist/Button/styles.d.ts

@@ -0,0 +1,18 @@
+export declare const Surface: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $variant: "light" | "dark";
+}>> & string;
+export declare const IconWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $variant: "light" | "dark";
+}>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StoreSubLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $variant: "light" | "dark";
+}>> & string;

package/dist/Button/styles.js

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+export const Surface = styled.a `
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${({ $variant }) => ($variant === 'dark' ? '10px' : '8px')};
+  min-height: 56px;
+  min-width: 0;
+  padding: 16px 20px;
+  border: 1px solid
+    ${({ $variant, theme }) => $variant === 'dark' ? theme.colors.overlayBorderStrong : 'rgb(255 255 255 / 0.4)'};
+  border-radius: ${({ theme }) => theme.borderRadius.panel};
+  background: ${({ $variant, theme }) => ($variant === 'dark' ? '#111111' : theme.colors.light)};
+  color: ${({ $variant, theme }) => ($variant === 'dark' ? theme.colors.light : theme.colors.ink)};
+  box-shadow: ${({ theme }) => theme.shadow.button};
+  transition:
+    transform ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    box-shadow ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    background-color ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    transform: translateY(-2px);
+    background: ${({ $variant, theme }) => $variant === 'dark' ? theme.colors.dark : 'rgb(255 255 255 / 0.92)'};
+    box-shadow: ${({ theme }) => theme.shadow.md};
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 3px ${({ theme }) => theme.colors.focusRing},
+      ${({ theme }) => theme.shadow.button};
+  }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    min-height: 60px;
+    min-width: 153px;
+    padding: 18px 24px;
+  }
+`;
+export const IconWrap = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 24px;
+  font-size: 1.2rem;
+  line-height: 1;
+
+  img {
+    display: block;
+    width: auto;
+    height: 100%;
+  }
+`;
+export const Label = styled.span `
+  display: grid;
+  justify-items: start;
+  text-align: left;
+  gap: 6px;
+  line-height: 1;
+  min-width: 0;
+  font-family: ${({ theme }) => theme.typography.fontFamily.ui};
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+    min-width: max-content;
+  }
+
+  strong {
+    font-size: 0.875rem;
+    font-weight: ${({ theme }) => theme.fontWeight.semibold};
+    letter-spacing: -0.03em;
+  }
+`;
+export const StoreSubLabel = styled.span `
+  color: ${({ $variant, theme }) => $variant === 'dark' ? theme.colors.overlayTextMuted : 'rgb(0 0 0 / 0.4)'};
+  font-size: 0.625rem;
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  letter-spacing: -0.03em;
+  text-transform: uppercase;
+`;

package/dist/Footer/index.d.ts

@@ -22,7 +22,8 @@ export interface FooterContent {
     disclaimer: string[];
 }
 interface FooterProps {
-    brandWordmarkSrc: string;
+    /** Overrides the wordmark from `<BrandProvider>`. Optional when one is present. */
+    brandWordmarkSrc?: string;
     columns: FooterLinkGroup[];
     content: FooterContent;
     forceDocumentNavigation?: boolean;

package/dist/Footer/index.js

@@ -4,6 +4,7 @@ import { LocaleSelector } from '../LocaleSelector/index.js';
 import { buildLocalizedPath } from '../locale/routes.js';
 import { useCurrentLocale } from '../locale/hooks.js';
 import { desktopViewportQuery } from '../tokens.js';
+import { useOptionalBrand } from '../brand/index.js';
 import { FooterColumn, FooterColumnHeading, FooterContainer, FooterCopyright, FooterColumnsGrid, FooterDesktopLocaleSlot, FooterDisclaimer, FooterDisclaimerStack, FooterGrid, FooterLegalButton, FooterLegalDivider, FooterLegalLink as FooterLegalLinkStyled, FooterLegalMeta, FooterLegalNav, FooterLegalText, FooterLocaleSlot, FooterLink as FooterLinkStyled, FooterLinkList, FooterMobileCopyright, FooterMobileDivider, FooterMobileLegalDividerTrack, FooterMobileLegalMeta, FooterMobileLegalNav, FooterShell, FooterWaitlistSlot, FooterWordmark, FooterWordmarkImage, } from './styles.js';
 const buildFooterHref = (target, locale, localize = true) => {
     if (target.startsWith('/') && localize) {
@@ -18,6 +19,11 @@ const getExternalLinkProps = (external) => {
     return { target: '_blank', rel: 'noreferrer' };
 };
 export function Footer({ brandWordmarkSrc, columns, content, forceDocumentNavigation = false, legalLinks, onOpenCookiePreferences, waitlistSlot, }) {
+    const brand = useOptionalBrand();
+    const wordmarkSrc = brandWordmarkSrc ?? brand?.wordmarkSrc;
+    if (wordmarkSrc === undefined) {
+        throw new Error('<Footer> needs a brandWordmarkSrc prop or a <BrandProvider>.');
+    }
     const locale = useCurrentLocale();
     const [isDesktopFooterLayout, setIsDesktopFooterLayout] = useState(true);
     useEffect(() => {
@@ -44,5 +50,5 @@ export function Footer({ brandWordmarkSrc, columns, content, forceDocumentNaviga
         return (_jsx(FooterLegalLinkStyled, { href: buildFooterHref(link.target, locale), ...getExternalLinkProps(link.external), children: link.label }));
     };
     const legalMeta = isDesktopFooterLayout ? (_jsxs(FooterLegalMeta, { children: [_jsx(FooterCopyright, { children: content.copyrightText }), _jsx(FooterLegalNav, { "aria-label": content.legalNavLabel, children: legalLinks.map((link, index) => (_jsxs("span", { children: [index > 0 ? _jsx(FooterLegalDivider, { "aria-hidden": "true" }) : null, renderLegalLink(link)] }, link.target))) })] })) : undefined;
-    return (_jsx(FooterShell, { children: _jsxs(FooterContainer, { children: [_jsxs(FooterGrid, { children: [_jsx(FooterWaitlistSlot, { children: waitlistSlot?.(legalMeta) }), _jsx(FooterMobileDivider, { "aria-hidden": "true" }), _jsxs(FooterColumnsGrid, { children: [columns.map((group) => (_jsxs(FooterColumn, { children: [_jsx(FooterColumnHeading, { children: group.group }), _jsx(FooterLinkList, { children: group.links.map((link) => renderFooterLink(link)) })] }, group.group))), _jsxs(FooterDisclaimerStack, { children: [isDesktopFooterLayout ? (_jsx(FooterDesktopLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation }) })) : null, _jsx(FooterDisclaimer, { children: content.disclaimer.map((paragraph) => (_jsx("p", { children: paragraph }, paragraph))) })] })] }), !isDesktopFooterLayout ? (_jsxs(FooterMobileLegalMeta, { children: [_jsx(FooterLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation }) }), _jsx(FooterMobileCopyright, { children: content.copyrightText }), _jsx(FooterMobileLegalNav, { "aria-label": content.legalNavLabel, children: legalLinks.map((link, index) => (_jsxs(Fragment, { children: [index > 0 ? (_jsx(FooterMobileLegalDividerTrack, { children: _jsx(FooterLegalDivider, { "aria-hidden": "true" }) })) : null, renderLegalLink(link)] }, link.target))) })] })) : null] }), _jsx(FooterWordmark, { "aria-hidden": "true", children: _jsx(FooterWordmarkImage, { src: brandWordmarkSrc, alt: "" }) })] }) }));
+    return (_jsx(FooterShell, { children: _jsxs(FooterContainer, { children: [_jsxs(FooterGrid, { children: [_jsx(FooterWaitlistSlot, { children: waitlistSlot?.(legalMeta) }), _jsx(FooterMobileDivider, { "aria-hidden": "true" }), _jsxs(FooterColumnsGrid, { children: [columns.map((group) => (_jsxs(FooterColumn, { children: [_jsx(FooterColumnHeading, { children: group.group }), _jsx(FooterLinkList, { children: group.links.map((link) => renderFooterLink(link)) })] }, group.group))), _jsxs(FooterDisclaimerStack, { children: [isDesktopFooterLayout ? (_jsx(FooterDesktopLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation }) })) : null, _jsx(FooterDisclaimer, { children: content.disclaimer.map((paragraph) => (_jsx("p", { children: paragraph }, paragraph))) })] })] }), !isDesktopFooterLayout ? (_jsxs(FooterMobileLegalMeta, { children: [_jsx(FooterLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation }) }), _jsx(FooterMobileCopyright, { children: content.copyrightText }), _jsx(FooterMobileLegalNav, { "aria-label": content.legalNavLabel, children: legalLinks.map((link, index) => (_jsxs(Fragment, { children: [index > 0 ? (_jsx(FooterMobileLegalDividerTrack, { children: _jsx(FooterLegalDivider, { "aria-hidden": "true" }) })) : null, renderLegalLink(link)] }, link.target))) })] })) : null] }), _jsx(FooterWordmark, { "aria-hidden": "true", children: _jsx(FooterWordmarkImage, { src: wordmarkSrc, alt: "" }) })] }) }));
 }

package/dist/FooterWaitlist/helper.d.ts

@@ -0,0 +1,3 @@
+import type { NavigationContent } from '../navigationContent.js';
+import type { WaitlistFormMessages } from '../waitlist/types.js';
+export declare const resolveWaitlistFormContent: (navContent: NavigationContent) => WaitlistFormMessages;

package/dist/FooterWaitlist/helper.js

@@ -0,0 +1,7 @@
+export const resolveWaitlistFormContent = (navContent) => ({
+    successMessage: navContent.footer.waitlistForm.successMessage,
+    emptyEmailMessage: navContent.footer.waitlistForm.emptyEmailMessage,
+    invalidEmailMessage: navContent.footer.waitlistForm.invalidEmailMessage,
+    errorMessage: navContent.footer.waitlistForm.errorMessage,
+    submittingLabel: navContent.footer.waitlistForm.submittingLabel,
+});

package/dist/FooterWaitlist/index.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import type { WaitlistRequest, WaitlistSource } from '../waitlist/types.js';
+import { type FooterWaitlistVariant } from './styles.js';
+export interface FooterWaitlistProps {
+    /** Identifies which form on the site was submitted. */
+    source: WaitlistSource;
+    /** Performs the submission. Resolve for success, throw for failure. */
+    submit: (request: WaitlistRequest) => Promise<unknown>;
+    /** Namespaces stored attribution. One stable value per site. */
+    attributionKey: string;
+    variant?: FooterWaitlistVariant;
+    legalMeta?: ReactNode | undefined;
+    onWaitlistSuccess?: ((message: string) => void) | undefined;
+    onWaitlistError?: ((message: string) => void) | undefined;
+    /** Fires when submit is pressed, before validation. For analytics. */
+    onSubmitClick?: (() => void) | undefined;
+}
+/**
+ * Email capture card with the site's social row beneath it.
+ *
+ * Wordmark and social links come from `<BrandProvider>`, so two sites render
+ * this identically while showing entirely different artwork and destinations.
+ */
+export declare function FooterWaitlist({ source, submit, attributionKey, variant, legalMeta, onWaitlistSuccess, onWaitlistError, onSubmitClick, }: FooterWaitlistProps): React.JSX.Element;

package/dist/FooterWaitlist/index.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useBrand } from '../brand/index.js';
+import { navigationContent } from '../navigationContent.js';
+import { useCurrentLocale } from '../locale/hooks.js';
+import { resetAutocompleteFillMarkersAfterInput } from '../waitlist/autocompleteFillMarkers.js';
+import { useWaitlistForm } from '../waitlist/useWaitlistForm.js';
+import { resolveWaitlistFormContent } from './helper.js';
+import { WaitlistCard, WaitlistCardContent, WaitlistCardTitle, WaitlistCheckbox, WaitlistCheckboxLabel, WaitlistCheckboxRow, WaitlistContainer, WaitlistDisclaimer, WaitlistFieldGroup, WaitlistForm, WaitlistInput, WaitlistInputMeasure, WaitlistLowerContent, WaitlistSectionShell, WaitlistSocialBlock, WaitlistSocialIcon, WaitlistSocialLink, WaitlistSocialLinks, WaitlistStatusText, WaitlistSubmitButton, } from './styles.js';
+// Below this the address is unreadable; the field scrolls instead of shrinking further.
+const minWaitlistInputScale = 0.5;
+/**
+ * Email capture card with the site's social row beneath it.
+ *
+ * Wordmark and social links come from `<BrandProvider>`, so two sites render
+ * this identically while showing entirely different artwork and destinations.
+ */
+export function FooterWaitlist({ source, submit, attributionKey, variant = 'footer', legalMeta, onWaitlistSuccess, onWaitlistError, onSubmitClick, }) {
+    const locale = useCurrentLocale();
+    const brand = useBrand();
+    const navContent = navigationContent[locale];
+    const waitlistContent = resolveWaitlistFormContent(navContent);
+    const inputRef = useRef(null);
+    const inputMeasureRef = useRef(null);
+    const [waitlistInputScale, setWaitlistInputScale] = useState(1);
+    const waitlistMessages = {
+        ...waitlistContent,
+        emailPlaceholder: navContent.footer.emailPlaceholder,
+        submitLabel: navContent.footer.submitLabel,
+    };
+    const waitlistOptions = {
+        source,
+        submit,
+        attributionKey,
+        messages: waitlistMessages,
+        initialConsentMarketing: false,
+    };
+    if (onWaitlistSuccess) {
+        waitlistOptions.onSuccess = onWaitlistSuccess;
+    }
+    if (onWaitlistError) {
+        waitlistOptions.onError = onWaitlistError;
+    }
+    const { email, setEmail, consentMarketing, setConsentMarketing, emailError, isSubmitting, statusMessage, statusTone, onSubmit, } = useWaitlistForm(waitlistOptions);
+    const describedBy = statusMessage ? `${variant}-waitlist-status` : undefined;
+    const setWaitlistInputRef = useCallback((input) => {
+        inputRef.current = input;
+        if (input) {
+            resetAutocompleteFillMarkersAfterInput(input);
+        }
+    }, []);
+    const updateWaitlistInputScale = useCallback(() => {
+        const input = inputRef.current;
+        const inputMeasure = inputMeasureRef.current;
+        if (!email || !input || !inputMeasure) {
+            setWaitlistInputScale(1);
+            return;
+        }
+        const inputStyles = window.getComputedStyle(input);
+        const inputHorizontalPadding = Number.parseFloat(inputStyles.paddingLeft) + Number.parseFloat(inputStyles.paddingRight);
+        const availableInputWidth = input.clientWidth - inputHorizontalPadding;
+        const measuredTextWidth = inputMeasure.getBoundingClientRect().width;
+        if (availableInputWidth <= 0 || measuredTextWidth <= 0) {
+            setWaitlistInputScale(1);
+            return;
+        }
+        const nextScale = Math.min(1, Math.max(minWaitlistInputScale, availableInputWidth / measuredTextWidth));
+        setWaitlistInputScale((currentScale) => Math.abs(currentScale - nextScale) < 0.01 ? currentScale : nextScale);
+    }, [email]);
+    const handleWaitlistEmailChange = useCallback((event) => {
+        setEmail(event.currentTarget.value);
+        resetAutocompleteFillMarkersAfterInput(event.currentTarget);
+    }, [setEmail]);
+    useLayoutEffect(() => {
+        updateWaitlistInputScale();
+    }, [updateWaitlistInputScale]);
+    useEffect(() => {
+        window.addEventListener('resize', updateWaitlistInputScale);
+        return () => {
+            window.removeEventListener('resize', updateWaitlistInputScale);
+        };
+    }, [updateWaitlistInputScale]);
+    return (_jsx(WaitlistSectionShell, { "$variant": variant, children: _jsx(WaitlistContainer, { "$variant": variant, children: _jsx(WaitlistCard, { children: _jsxs(WaitlistCardContent, { "$variant": variant, children: [_jsx(WaitlistCardTitle, { "$variant": variant, children: navContent.footer.ctaTitle }), _jsxs(WaitlistForm, { "$variant": variant, noValidate: true, onSubmit: (event) => {
+                                void onSubmit(event);
+                            }, children: [_jsxs(WaitlistFieldGroup, { "$variant": variant, children: [_jsx(WaitlistInputMeasure, { ref: inputMeasureRef, "$variant": variant, "aria-hidden": "true", children: email }), _jsx(WaitlistInput, { ref: setWaitlistInputRef, "$variant": variant, "$fontScale": waitlistInputScale, "aria-describedby": describedBy, "aria-invalid": emailError ? true : undefined, "aria-label": waitlistMessages.emailPlaceholder, autoComplete: "email", placeholder: waitlistMessages.emailPlaceholder, type: "email", value: email, onChange: handleWaitlistEmailChange, onFocus: (event) => resetAutocompleteFillMarkersAfterInput(event.currentTarget) }), _jsx(WaitlistSubmitButton, { "$variant": variant, type: "submit", disabled: isSubmitting, onClick: onSubmitClick, children: isSubmitting ? waitlistMessages.submittingLabel : waitlistMessages.submitLabel })] }), statusMessage ? (_jsx(WaitlistStatusText, { "$tone": statusTone, id: `${variant}-waitlist-status`, "aria-live": "polite", role: "status", children: statusMessage })) : null, _jsx(WaitlistDisclaimer, { children: navContent.footer.consentNote })] }), _jsxs(WaitlistLowerContent, { "$variant": variant, children: [_jsxs(WaitlistCheckboxRow, { htmlFor: `${variant}-waitlist-marketing`, children: [_jsx(WaitlistCheckbox, { id: `${variant}-waitlist-marketing`, checked: consentMarketing, type: "checkbox", onChange: (event) => setConsentMarketing(event.target.checked) }), _jsx(WaitlistCheckboxLabel, { children: navContent.footer.consentLabel })] }), brand.socialLinks.length > 0 ? (_jsx(WaitlistSocialBlock, { "$variant": variant, "aria-label": navContent.footer.socialHeading, children: _jsx(WaitlistSocialLinks, { children: brand.socialLinks.map((socialLink) => (_jsx(WaitlistSocialLink, { href: socialLink.href, target: "_blank", rel: "noreferrer", "aria-label": socialLink.label, children: _jsx(WaitlistSocialIcon, { src: socialLink.iconSrc, alt: "", "aria-hidden": "true" }) }, socialLink.key))) }) })) : null, legalMeta] })] }) }) }) }));
+}

package/dist/FooterWaitlist/styles.d.ts

@@ -0,0 +1,71 @@
+export type FooterWaitlistVariant = 'standalone' | 'footer';
+type StatusTone = 'default' | 'success' | 'error';
+interface VariantProps {
+    $variant: FooterWaitlistVariant;
+}
+interface WaitlistInputProps extends VariantProps {
+    $fontScale: number;
+}
+export declare const WaitlistSectionShell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistCard: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistCardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistLowerContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistFieldGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistInputMeasure: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, WaitlistInputProps>> & string;
+export declare const WaitlistSubmitButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistDisclaimer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistCheckboxRow: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistStatusText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $tone: StatusTone;
+}>> & string;
+export declare const WaitlistSocialBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, VariantProps>> & string;
+export declare const WaitlistSocialLinks: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistSocialLink: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const WaitlistSocialIcon: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export {};