@cronos-labs/ui 0.5.1 → 0.6.0

package/dist/FooterWaitlist/helper.d.ts

@@ -1,3 +1,10 @@
 import type { NavigationContent } from '../navigationContent.js';
-import type { WaitlistFormMessages } from '../waitlist/types.js';
-export declare const resolveWaitlistFormContent: (navContent: NavigationContent) => WaitlistFormMessages;
+import type { FooterWaitlistContent } from './types.js';
+/**
+ * Falls back to the bundled Cronos copy for a locale.
+ *
+ * The dictionary shipped with this package is a convenience for the Cronos
+ * properties, not a definition of what the component says — a differently
+ * branded site passes its own `content` instead and never reads this.
+ */
+export declare const resolveFooterWaitlistContent: (navContent: NavigationContent) => FooterWaitlistContent;

package/dist/FooterWaitlist/helper.js

@@ -1,7 +1,22 @@
-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,
+/**
+ * Falls back to the bundled Cronos copy for a locale.
+ *
+ * The dictionary shipped with this package is a convenience for the Cronos
+ * properties, not a definition of what the component says — a differently
+ * branded site passes its own `content` instead and never reads this.
+ */
+export const resolveFooterWaitlistContent = (navContent) => ({
+    ctaTitle: navContent.footer.ctaTitle,
+    emailPlaceholder: navContent.footer.emailPlaceholder,
+    submitLabel: navContent.footer.submitLabel,
+    consentLabel: navContent.footer.consentLabel,
+    consentNote: navContent.footer.consentNote,
+    socialHeading: navContent.footer.socialHeading,
+    messages: {
+        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

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import type { WaitlistRequest, WaitlistSource } from '../waitlist/types.js';
+import type { FooterWaitlistContent } from './types.js';
 import { type FooterWaitlistVariant } from './styles.js';
 export interface FooterWaitlistProps {
     /** Identifies which form on the site was submitted. */
@@ -14,6 +15,14 @@ export interface FooterWaitlistProps {
     onWaitlistError?: ((message: string) => void) | undefined;
     /** Fires when submit is pressed, before validation. For analytics. */
     onSubmitClick?: (() => void) | undefined;
+    /**
+     * Every string this renders, already localized.
+     *
+     * Omit it and the component falls back to the Cronos copy bundled with this
+     * package for the active locale. Any site that is not Cronos should pass its
+     * own — the bundled dictionary is a convenience, not the component's voice.
+     */
+    content?: FooterWaitlistContent | undefined;
 }
 /**
  * Email capture card with the site's social row beneath it.
@@ -21,4 +30,4 @@ export interface FooterWaitlistProps {
  * 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;
+export declare function FooterWaitlist({ source, submit, attributionKey, variant, legalMeta, onWaitlistSuccess, onWaitlistError, onSubmitClick, content, }: FooterWaitlistProps): React.JSX.Element;

package/dist/FooterWaitlist/index.js

@@ -5,7 +5,7 @@ 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 { resolveFooterWaitlistContent } 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;
@@ -15,18 +15,17 @@ const minWaitlistInputScale = 0.5;
  * 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, }) {
+export function FooterWaitlist({ source, submit, attributionKey, variant = 'footer', legalMeta, onWaitlistSuccess, onWaitlistError, onSubmitClick, content, }) {
     const locale = useCurrentLocale();
     const brand = useBrand();
-    const navContent = navigationContent[locale];
-    const waitlistContent = resolveWaitlistFormContent(navContent);
+    const copy = content ?? resolveFooterWaitlistContent(navigationContent[locale]);
     const inputRef = useRef(null);
     const inputMeasureRef = useRef(null);
     const [waitlistInputScale, setWaitlistInputScale] = useState(1);
     const waitlistMessages = {
-        ...waitlistContent,
-        emailPlaceholder: navContent.footer.emailPlaceholder,
-        submitLabel: navContent.footer.submitLabel,
+        ...copy.messages,
+        emailPlaceholder: copy.emailPlaceholder,
+        submitLabel: copy.submitLabel,
     };
     const waitlistOptions = {
         source,
@@ -80,7 +79,7 @@ export function FooterWaitlist({ source, submit, attributionKey, variant = 'foot
             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) => {
+    return (_jsx(WaitlistSectionShell, { "$variant": variant, children: _jsx(WaitlistContainer, { "$variant": variant, children: _jsx(WaitlistCard, { children: _jsxs(WaitlistCardContent, { "$variant": variant, children: [_jsx(WaitlistCardTitle, { "$variant": variant, children: copy.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", loading: "lazy" }) }, socialLink.key))) }) })) : null, legalMeta] })] }) }) }) }));
+                            }, 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: copy.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: copy.consentLabel })] }), brand.socialLinks.length > 0 ? (_jsx(WaitlistSocialBlock, { "$variant": variant, "aria-label": copy.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", loading: "lazy" }) }, socialLink.key))) }) })) : null, legalMeta] })] }) }) }) }));
 }

package/dist/FooterWaitlist/types.d.ts

@@ -0,0 +1,21 @@
+import type { WaitlistFormMessages } from '../waitlist/types.js';
+/**
+ * Every string `FooterWaitlist` renders.
+ *
+ * Supplied per site so the component carries no brand's wording. Localize
+ * before passing it in — this package does not translate.
+ */
+export interface FooterWaitlistContent {
+    /** Heading above the form. */
+    ctaTitle: string;
+    emailPlaceholder: string;
+    submitLabel: string;
+    /** Label beside the marketing-consent checkbox. */
+    consentLabel: string;
+    /** Fine print under the form, e.g. a privacy-notice acknowledgement. */
+    consentNote: string;
+    /** Accessible name for the social-links group. */
+    socialHeading: string;
+    /** Validation and submission feedback. */
+    messages: WaitlistFormMessages;
+}

package/dist/FooterWaitlist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Header/index.js

@@ -94,7 +94,7 @@ export function Header({ brandWordmarkSrc, content, forceDocumentNavigation = fa
         setIsMobileMenuOpen(false);
         waitlistCta?.onClick?.(event, ctaLocation);
     };
-    return (_jsxs(HeaderFrame, { "data-header-frame": "true", "$shouldAnimatePresentation": shouldAnimatePresentation, "$backgroundColor": presentation.backgroundColor, "$mobileBackgroundColor": mobilePresentation?.backgroundColor, "$contrast": presentation.contrast, children: [_jsxs(HeaderShell, { "$shouldAnimatePresentation": shouldAnimatePresentation, "$textColor": presentation.textColor, "$mobileTextColor": mobilePresentation?.textColor, children: [_jsx(HeaderBrandLink, { href: forceDocumentNavigation ? canonicalizeDocumentHref(homeHref) : homeHref, "aria-label": "Cronos home", onClick: forceDocumentNavigation
+    return (_jsxs(HeaderFrame, { "data-header-frame": "true", "$shouldAnimatePresentation": shouldAnimatePresentation, "$backgroundColor": presentation.backgroundColor, "$mobileBackgroundColor": mobilePresentation?.backgroundColor, "$contrast": presentation.contrast, children: [_jsxs(HeaderShell, { "$shouldAnimatePresentation": shouldAnimatePresentation, "$textColor": presentation.textColor, "$mobileTextColor": mobilePresentation?.textColor, children: [_jsx(HeaderBrandLink, { href: forceDocumentNavigation ? canonicalizeDocumentHref(homeHref) : homeHref, "aria-label": brandName ? `${brandName} home` : 'Home', onClick: forceDocumentNavigation
                             ? undefined
                             : (event) => handleInternalNavigation(event, homeHref), children: presentation.contrast ? (_jsx(BrandWordmarkMask, { "$url": wordmarkSrc, role: "img", "aria-label": brandName })) : (_jsx(Wordmark, { "$shouldAnimatePresentation": shouldAnimatePresentation, "$variant": presentation.variant, "$mobileVariant": mobilePresentation?.variant, src: wordmarkSrc, alt: brandName })) }), _jsx(Nav, { "$variant": presentation.variant, "$contrast": presentation.contrast, "aria-label": "Global navigation", children: enabledNavItems.map((item) => {
                             const label = item.label;

package/dist/index.d.ts

@@ -25,6 +25,8 @@ export { isOneTrustEventTarget, openCookiePreferences } from './onetrust.js';
 export { BrandProvider, useBrand, useOptionalBrand } from './brand/index.js';
 export type { BrandAssets, BrandSocialLink } from './brand/index.js';
 export { FooterWaitlist, type FooterWaitlistProps } from './FooterWaitlist/index.js';
+export type { FooterWaitlistContent } from './FooterWaitlist/types.js';
+export { resolveFooterWaitlistContent } from './FooterWaitlist/helper.js';
 export { useWaitlistForm } from './waitlist/useWaitlistForm.js';
 export type { UseWaitlistFormOptions, WaitlistStatusTone } from './waitlist/useWaitlistForm.js';
 export type { WaitlistRequest, WaitlistResponse, WaitlistSource, WaitlistFormMessages, } from './waitlist/types.js';

package/dist/index.js

@@ -21,6 +21,7 @@ export { fetchJson, HttpError } from './fetch.js';
 export { isOneTrustEventTarget, openCookiePreferences } from './onetrust.js';
 export { BrandProvider, useBrand, useOptionalBrand } from './brand/index.js';
 export { FooterWaitlist } from './FooterWaitlist/index.js';
+export { resolveFooterWaitlistContent } from './FooterWaitlist/helper.js';
 export { useWaitlistForm } from './waitlist/useWaitlistForm.js';
 export { resetAutocompleteFillMarkersAfterInput } from './waitlist/autocompleteFillMarkers.js';
 export { clearWaitlistAttribution, getWaitlistBrowserContext } from './waitlist/attribution.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronos-labs/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Shared Header, Footer, Seo, locale and theme primitives for Cronos web properties.",
   "license": "UNLICENSED",
   "type": "module",