@cronos-labs/ui 0.2.1 → 0.5.1

package/dist/FooterWaitlist/styles.js

@@ -0,0 +1,303 @@
+import styled, { css } from 'styled-components';
+import { compactBodyTypography, metaTypography, sectionTitleTypography } from '../typography.js';
+export const WaitlistSectionShell = styled.section `
+  background: ${({ theme }) => theme.colors.brandSky};
+  color: ${({ theme }) => theme.colors.ink};
+  overflow: clip;
+  padding: ${({ $variant }) => ($variant === 'footer' ? '0' : '28px 0 16px')};
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    padding: ${({ $variant }) => ($variant === 'footer' ? '0' : '36px 0 18px')};
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: ${({ $variant }) => ($variant === 'footer' ? '0' : '40px 0 20px')};
+  }
+`;
+export const WaitlistContainer = styled.div `
+  width: ${({ $variant, theme }) => $variant === 'footer'
+    ? '100%'
+    : `min(calc(100% - (2 * ${theme.layout.pagePaddingInline})), ${theme.layout.landingWideWidth})`};
+  margin: 0 auto;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: ${({ $variant, theme: currentTheme }) => $variant === 'footer' ? '100%' : currentTheme.layout.landingWideWidth};
+  }
+`;
+export const WaitlistCard = styled.section `
+  width: 100%;
+`;
+export const WaitlistCardContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $variant }) => ($variant === 'footer' ? '40px' : '18px')};
+  min-width: 0;
+  max-width: ${({ $variant }) => ($variant === 'footer' ? '100%' : '520px')};
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    max-width: ${({ $variant }) => ($variant === 'footer' ? '100%' : '535px')};
+    gap: ${({ $variant }) => ($variant === 'footer' ? '14px' : '16px')};
+  }
+`;
+export const WaitlistCardTitle = styled.h2 `
+  margin: 0;
+  ${sectionTitleTypography}
+  font-weight: ${({ theme }) => theme.fontWeight.extrabold};
+  text-wrap: balance;
+  max-width: ${({ $variant }) => ($variant === 'footer' ? '270px' : 'none')};
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    max-width: 402px;
+  }
+`;
+export const WaitlistForm = styled.form `
+  display: grid;
+  gap: ${({ $variant }) => ($variant === 'footer' ? '12px' : '10px')};
+  width: 100%;
+  max-width: ${({ $variant }) => ($variant === 'footer' ? '100%' : '497px')};
+  margin-top: 2px;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    max-width: ${({ $variant }) => ($variant === 'footer' ? '100%' : '497px')};
+    gap: ${({ $variant }) => ($variant === 'footer' ? '8px' : '10px')};
+  }
+`;
+export const WaitlistLowerContent = styled.div `
+  display: grid;
+  gap: ${({ $variant }) => ($variant === 'footer' ? '24px' : '14px')};
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    gap: ${({ $variant }) => ($variant === 'footer' ? '28px' : '14px')};
+  }
+`;
+export const WaitlistFieldGroup = styled.div `
+  box-sizing: border-box;
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: ${({ $variant }) => ($variant === 'footer' ? '8px' : '8px')};
+  width: 100%;
+  padding: ${({ $variant }) => ($variant === 'footer' ? '8px' : '4px')};
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background: #eefbff;
+  overflow: hidden;
+
+  ${({ $variant }) => $variant === 'footer'
+    ? css `
+          grid-template-columns: minmax(0, 1fr) auto;
+          align-items: center;
+          min-height: 65px;
+        `
+    : null}
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    min-height: 65px;
+  }
+`;
+export const WaitlistInputMeasure = styled.span `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  white-space: pre;
+  pointer-events: none;
+  font-size: ${({ $variant }) => ($variant === 'footer' ? '1.5rem' : '1.125rem')};
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  line-height: 1;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 1.5rem;
+    line-height: 0.9;
+  }
+`;
+export const WaitlistInput = styled.input `
+  min-width: 0;
+  border: 0;
+  padding: ${({ $variant }) => ($variant === 'footer' ? '0 11px 0 24px' : '0 20px')};
+  background: transparent;
+  -webkit-tap-highlight-color: transparent;
+  caret-color: ${({ theme }) => theme.colors.ink};
+  color: ${({ theme }) => theme.colors.heroTextMuted};
+  font-size: ${({ $variant, $fontScale }) => `calc(${$variant === 'footer' ? '1.5rem' : '1.125rem'} * ${$fontScale})`};
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  line-height: 1;
+  outline: none;
+  transition: color ${({ theme }) => theme.motion.duration.fast}
+    ${({ theme }) => theme.motion.easing.standard};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.heroTextMuted};
+    opacity: 1;
+    transition: color ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+  }
+
+  &:focus {
+    color: ${({ theme }) => theme.colors.ink};
+  }
+
+  &:focus::placeholder {
+    color: transparent;
+  }
+
+  &:not(:placeholder-shown) {
+    color: ${({ theme }) => theme.colors.ink};
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: ${({ $variant }) => $variant === 'footer' ? '0 16px 0 32px' : '0 22px'};
+    font-size: calc(1.5rem * ${({ $fontScale }) => $fontScale});
+    line-height: 0.9;
+  }
+`;
+export const WaitlistSubmitButton = styled.button `
+  min-height: 50px;
+  border: 0;
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  padding: ${({ $variant }) => ($variant === 'footer' ? '0 20px' : '0 18px')};
+  min-width: ${({ $variant }) => ($variant === 'footer' ? '129px' : '0')};
+  background: ${({ theme }) => theme.colors.brandSky};
+  -webkit-tap-highlight-color: transparent;
+  color: ${({ theme }) => theme.colors.ink};
+  ${compactBodyTypography}
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition:
+    transform ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    opacity ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    opacity: 0.94;
+  }
+
+  &:disabled {
+    opacity: 0.72;
+    cursor: wait;
+  }
+
+  &::selection {
+    background: transparent;
+  }
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    min-width: ${({ $variant }) => ($variant === 'footer' ? '159px' : '117px')};
+    padding-inline: ${({ $variant }) => ($variant === 'footer' ? '12px' : '22px')};
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    min-width: ${({ $variant }) => ($variant === 'footer' ? '159px' : '116px')};
+  }
+`;
+export const WaitlistDisclaimer = styled.p `
+  margin: 0;
+  color: ${({ theme }) => theme.colors.textMutedStrong};
+  ${metaTypography}
+  font-size: 0.6875rem;
+  font-weight: ${({ theme }) => theme.fontWeight.default};
+  line-height: 1.2727;
+  max-width: 467.665px;
+`;
+export const WaitlistCheckboxRow = styled.label `
+  display: inline-flex;
+  align-items: center;
+  gap: 11px;
+  width: fit-content;
+  cursor: pointer;
+`;
+export const WaitlistCheckbox = styled.input `
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  margin: 0;
+  border: 0;
+  border-radius: 6px;
+  background: ${({ theme }) => theme.colors.footerBadgeSurface};
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    width: 10px;
+    height: 6px;
+    border-bottom: 2px solid ${({ theme }) => theme.colors.ink};
+    border-left: 2px solid ${({ theme }) => theme.colors.ink};
+    transform: rotate(-45deg) scale(0);
+    transform-origin: center;
+    transition: transform ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+  }
+
+  &:checked::after {
+    transform: rotate(-45deg) scale(1);
+  }
+`;
+export const WaitlistCheckboxLabel = styled.span `
+  ${metaTypography}
+  font-weight: ${({ theme }) => theme.fontWeight.default};
+`;
+export const WaitlistStatusText = styled.p `
+  margin: 0;
+  ${metaTypography}
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+
+  ${({ $tone, theme }) => $tone === 'success'
+    ? css `
+          color: ${theme.colors.success};
+        `
+    : $tone === 'error'
+        ? css `
+            color: ${theme.colors.error};
+          `
+        : css `
+            color: ${theme.colors.ink};
+          `}
+`;
+export const WaitlistSocialBlock = styled.div `
+  display: grid;
+  margin-top: ${({ $variant }) => ($variant === 'footer' ? '0' : '14px')};
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: ${({ $variant }) => ($variant === 'footer' ? '10px' : '14px')};
+  }
+`;
+export const WaitlistSocialLinks = styled.div `
+  display: inline-flex;
+  align-items: center;
+  gap: 24px;
+`;
+export const WaitlistSocialLink = styled.a `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: ${({ theme }) => theme.colors.ink};
+  transition:
+    transform ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    opacity ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    transform: translateY(-1px);
+    opacity: 0.72;
+  }
+`;
+export const WaitlistSocialIcon = styled.img `
+  display: block;
+  width: 32px;
+  height: 32px;
+`;

package/dist/Header/index.d.ts

@@ -31,7 +31,8 @@ export interface HeaderWaitlistCta {
     onClick?: (event: React.MouseEvent<HTMLAnchorElement>, ctaLocation: 'nav_desktop' | 'nav_mobile') => void;
 }
 interface HeaderProps {
-    brandWordmarkSrc: string;
+    /** Overrides the wordmark from `<BrandProvider>`. Optional when one is present. */
+    brandWordmarkSrc?: string;
     content: HeaderContent;
     forceDocumentNavigation?: boolean;
     homeHref: string;

package/dist/Header/index.js

@@ -5,6 +5,7 @@ import { LocaleSelector } from '../LocaleSelector/index.js';
 import { buildLocalizedPath, stripLocalePrefix } from '../locale/routes.js';
 import { useCurrentLocale } from '../locale/hooks.js';
 import { desktopViewportQuery } from '../tokens.js';
+import { useOptionalBrand } from '../brand/index.js';
 import { normalizePathname } from './helper.js';
 import { NavDropdown } from './NavDropdown.js';
 import { BrandWordmarkMask, HeaderAction, HeaderActionArrow, HeaderBrandLink, HeaderFrame, HeaderMobileNav, HeaderMobileNavDisabledItem, HeaderMobileNavGroup, HeaderMobileNavGroupChevron, HeaderMobileNavGroupPanel, HeaderMobileNavGroupPanelInner, HeaderMobileNavGroupToggle, HeaderMobileNavSubLink, HeaderMobileNavSubList, HeaderMobileNavLink, HeaderMobileOverlay, HeaderMobileLocaleSlot, HeaderMobileSheet, HeaderMobileSoonBadge, HeaderMobileToggle, HeaderMobileToggleIcon, HeaderMobileWaitlistArrow, HeaderMobileWaitlistLabel, HeaderMobileWaitlistLink, HeaderShell, Nav, NavBadge, NavBadgeLabel, Wordmark, } from './styles.js';
@@ -14,6 +15,14 @@ function MobileNavGroup({ label, items }) {
     return (_jsxs(HeaderMobileNavGroup, { children: [_jsxs(HeaderMobileNavGroupToggle, { type: "button", "aria-expanded": isExpanded, "aria-controls": panelId, onClick: () => setIsExpanded((currentValue) => !currentValue), children: [label, _jsx(HeaderMobileNavGroupChevron, { "$open": isExpanded, "aria-hidden": "true" })] }), _jsx(HeaderMobileNavGroupPanel, { "$open": isExpanded, id: panelId, children: _jsx(HeaderMobileNavGroupPanelInner, { "$open": isExpanded, children: _jsx(HeaderMobileNavSubList, { "aria-hidden": !isExpanded, children: items.map((item) => (_jsx(HeaderMobileNavSubLink, { href: item.href, "aria-label": item.ariaLabel, tabIndex: isExpanded ? undefined : -1, onClick: item.onClick, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: item.label }, item.key))) }) }) })] }));
 }
 export function Header({ brandWordmarkSrc, content, forceDocumentNavigation = false, homeHref, isExternalHref, mobilePresentation, navItems, presentation, shouldAnimatePresentation, waitlistCta, }) {
+    const brand = useOptionalBrand();
+    const wordmarkSrc = brandWordmarkSrc ?? brand?.wordmarkSrc;
+    const brandName = brand?.name ?? '';
+    // Rendering a header with no wordmark is never what the caller meant, and a
+    // broken image is harder to diagnose than a named error.
+    if (wordmarkSrc === undefined) {
+        throw new Error('<Header> needs a brandWordmarkSrc prop or a <BrandProvider>.');
+    }
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     const locale = useCurrentLocale();
     const location = useLocation();
@@ -87,7 +96,7 @@ export function Header({ brandWordmarkSrc, content, forceDocumentNavigation = fa
     };
     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
                             ? undefined
-                            : (event) => handleInternalNavigation(event, homeHref), children: presentation.contrast ? (_jsx(BrandWordmarkMask, { "$url": brandWordmarkSrc, role: "img", "aria-label": "Cronos" })) : (_jsx(Wordmark, { "$shouldAnimatePresentation": shouldAnimatePresentation, "$variant": presentation.variant, "$mobileVariant": mobilePresentation?.variant, src: brandWordmarkSrc, alt: "Cronos" })) }), _jsx(Nav, { "$variant": presentation.variant, "$contrast": presentation.contrast, "aria-label": "Global navigation", children: enabledNavItems.map((item) => {
+                            : (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;
                             if (item.children && item.children.length > 0) {
                                 const dropdownItems = item.children

package/dist/Toast/index.d.ts

@@ -0,0 +1,21 @@
+export type ToastTone = 'success' | 'error';
+/**
+ * Resolved icon URLs. Each app resolves its own assets its bundler's way
+ * (Astro's `.src`, Vite's plain import) and passes the strings in, so a site
+ * can ship its own iconography without forking the component.
+ */
+export interface ToastIcons {
+    /** Shown alongside a `success` message. */
+    success: string;
+    /** Shown alongside an `error` message. */
+    error: string;
+    /** Decorative flourish on success only. Omit it for no decoration. */
+    stars?: string;
+}
+interface ToastProps {
+    message: string;
+    tone: ToastTone;
+    icons: ToastIcons;
+}
+export declare function Toast({ message, tone, icons }: ToastProps): React.JSX.Element;
+export {};

package/dist/Toast/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToastBody, ToastIcon, ToastIconAsset, ToastStarsAsset, ToastStarsCluster, ToastSurface, ToastText, } from './styles.js';
+export function Toast({ message, tone, icons }) {
+    return (_jsxs(ToastSurface, { "$tone": tone, "aria-live": "polite", role: "status", children: [_jsxs(ToastBody, { "$tone": tone, children: [_jsx(ToastIcon, { "$tone": tone, "aria-hidden": "true", children: _jsx(ToastIconAsset, { src: tone === 'success' ? icons.success : icons.error, alt: "" }) }), _jsx(ToastText, { children: message })] }), tone === 'success' && icons.stars !== undefined ? (_jsx(ToastStarsCluster, { "aria-hidden": "true", children: _jsx(ToastStarsAsset, { src: icons.stars, alt: "" }) })) : null] }));
+}

package/dist/Toast/styles.d.ts

@@ -0,0 +1,27 @@
+export declare const ToastSurface: 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;
+}, {
+    $tone: "success" | "error";
+}>> & string;
+export declare const ToastBody: 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;
+}, {
+    $tone: "success" | "error";
+}>> & string;
+export declare const ToastIcon: 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;
+}, {
+    $tone: "success" | "error";
+}>> & string;
+export declare const ToastIconAsset: 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 declare const ToastText: 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 ToastStarsCluster: 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 ToastStarsAsset: 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;

package/dist/Toast/styles.js

@@ -0,0 +1,180 @@
+import styled, { css, keyframes } from 'styled-components';
+const toastSurfaceLife = keyframes `
+  0% {
+    opacity: 0;
+    transform: translate3d(18px, -10px, 0) scale(0.86);
+    filter: blur(6px);
+  }
+
+  7% {
+    opacity: 1;
+    transform: translate3d(-4px, 2px, 0) scale(1.035);
+    filter: blur(0);
+  }
+
+  12%,
+  84% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+    filter: blur(0);
+  }
+
+  92% {
+    opacity: 0;
+    transform: translate3d(8px, -4px, 0) scale(0.96);
+    filter: blur(3px);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(8px, -4px, 0) scale(0.96);
+    filter: blur(3px);
+  }
+`;
+const toastBodyReveal = keyframes `
+  0% {
+    opacity: 0;
+    transform: translate3d(12px, 0, 0);
+  }
+
+  45% {
+    opacity: 1;
+    transform: translate3d(-2px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+const toastIconPop = keyframes `
+  0% {
+    opacity: 0;
+    transform: rotate(-18deg) scale(0.34);
+  }
+
+  42% {
+    opacity: 1;
+    transform: rotate(8deg) scale(1.18);
+  }
+
+  68% {
+    opacity: 1;
+    transform: rotate(-4deg) scale(0.96);
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+`;
+const toastStarsTwinkle = keyframes `
+  0% {
+    opacity: 0;
+    transform: translate3d(10px, -8px, 0) rotate(-10deg) scale(0.45);
+  }
+
+  48% {
+    opacity: 1;
+    transform: translate3d(-2px, 1px, 0) rotate(4deg) scale(1.08);
+  }
+
+  72% {
+    opacity: 0.76;
+    transform: translate3d(0, 0, 0) rotate(-2deg) scale(0.94);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
+  }
+`;
+export const ToastSurface = styled.div `
+  position: fixed;
+  top: calc(${({ theme }) => theme.sizes.xxxl} + ${({ theme }) => theme.sizes.lg});
+  right: ${({ theme }) => theme.sizes.lg};
+  z-index: ${({ theme }) => theme.zIndex.overlay};
+  width: min(calc(100% - ${({ theme }) => theme.sizes.xl}), 335px);
+  min-height: 72px;
+  padding: ${({ theme }) => theme.sizes.sm};
+  border-radius: 12px;
+  backdrop-filter: blur(50px);
+  color: ${({ theme }) => theme.colors.light};
+  text-align: left;
+  pointer-events: none;
+  overflow: clip;
+  transform-origin: top right;
+  will-change: opacity, transform, filter;
+  animation: ${toastSurfaceLife} 4000ms ${({ theme }) => theme.motion.easing.emphasized} both;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    top: calc(${({ theme }) => theme.sizes['4xl']} + ${({ theme }) => theme.sizes.lg});
+  }
+
+  ${({ $tone }) => $tone === 'success'
+    ? css `
+          background: rgb(114 114 114 / 0.4);
+          box-shadow: none;
+        `
+    : css `
+          background: rgb(114 114 114 / 0.4);
+          box-shadow: none;
+        `}
+`;
+export const ToastBody = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: ${({ theme }) => theme.sizes.xxs};
+  min-width: 0;
+  padding-right: ${({ $tone, theme }) => ($tone === 'success' ? theme.sizes.lg : theme.sizes.zero)};
+  animation: ${toastBodyReveal} 420ms 90ms ${({ theme }) => theme.motion.easing.emphasized} both;
+`;
+export const ToastIcon = styled.span `
+  position: relative;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  margin-top: 1px;
+  transform-origin: center;
+  will-change: opacity, transform;
+  animation: ${toastIconPop} 520ms 120ms ${({ theme }) => theme.motion.easing.emphasized} both;
+
+  ${({ $tone, theme }) => $tone === 'success'
+    ? css `
+          box-shadow: ${theme.shadow.positiveGlow};
+        `
+    : css `
+          box-shadow: none;
+        `}
+`;
+export const ToastIconAsset = styled.img `
+  display: block;
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+`;
+export const ToastText = styled.p `
+  margin: 0;
+  min-width: 0;
+  color: ${({ theme }) => theme.colors.light};
+  font-size: ${({ theme }) => theme.typography.fontSize.body};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  line-height: 20px;
+`;
+export const ToastStarsCluster = styled.span `
+  position: absolute;
+  top: 7px;
+  right: 3.16px;
+  width: 31.844px;
+  height: 36.147px;
+  pointer-events: none;
+  transform-origin: 58% 42%;
+  will-change: opacity, transform;
+  animation: ${toastStarsTwinkle} 620ms 180ms ${({ theme }) => theme.motion.easing.emphasized} both;
+`;
+export const ToastStarsAsset = styled.img `
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;

package/dist/brand/index.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+/**
+ * A social destination shown in the footer.
+ *
+ * `iconSrc` is a resolved URL: each site resolves its own asset its bundler's
+ * way (Astro's `.src`, Vite's plain import) and passes the string in. This
+ * package imports no assets of its own, so no site inherits another's artwork.
+ */
+export interface BrandSocialLink {
+    /** Stable identifier, used as the React key and for analytics. */
+    key: string;
+    /** Accessible name, e.g. "Instagram". Localize before passing it in. */
+    label: string;
+    href: string;
+    iconSrc: string;
+}
+/**
+ * Everything visually identifying one site, supplied once at the layout root.
+ *
+ * Sites are expected to differ here — that is the point. Two properties can
+ * share every component in this package while shipping entirely different
+ * wordmarks and social sets.
+ */
+export interface BrandAssets {
+    /** The site's name, used as the wordmark's accessible label. */
+    name: string;
+    /** Primary wordmark, used by Header and Footer. */
+    wordmarkSrc: string;
+    /** Wordmark for inverted surfaces. Falls back to `wordmarkSrc` when absent. */
+    wordmarkInverseSrc?: string;
+    /** Rendered in the order given. An empty array renders no social row. */
+    socialLinks: BrandSocialLink[];
+}
+export declare function BrandProvider({ brand, children, }: {
+    brand: BrandAssets;
+    children: ReactNode;
+}): React.JSX.Element;
+/**
+ * Reads the site's brand assets.
+ *
+ * Throws when no provider is present rather than returning placeholder
+ * artwork — shipping the wrong wordmark is worse than failing loudly.
+ */
+export declare function useBrand(): BrandAssets;
+/** Reads brand assets where a component must also work without a provider. */
+export declare function useOptionalBrand(): BrandAssets | null;

package/dist/brand/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const BrandContext = createContext(null);
+export function BrandProvider({ brand, children, }) {
+    return _jsx(BrandContext.Provider, { value: brand, children: children });
+}
+/**
+ * Reads the site's brand assets.
+ *
+ * Throws when no provider is present rather than returning placeholder
+ * artwork — shipping the wrong wordmark is worse than failing loudly.
+ */
+export function useBrand() {
+    const brand = useContext(BrandContext);
+    if (brand === null) {
+        throw new Error('useBrand must be used inside a <BrandProvider>.');
+    }
+    return brand;
+}
+/** Reads brand assets where a component must also work without a provider. */
+export function useOptionalBrand() {
+    return useContext(BrandContext);
+}

package/dist/fetch.d.ts

@@ -0,0 +1,14 @@
+export declare class HttpError extends Error {
+    readonly status: number;
+    constructor(status: number, message: string);
+}
+/**
+ * Performs a JSON request with timeout support.
+ * @param input Fetch URL or Request object.
+ * @param init Optional fetch init.
+ * @param timeoutMs Timeout in milliseconds.
+ * @returns Parsed JSON payload.
+ * @throws {DOMException} When request is aborted by timeout.
+ * @throws {HttpError} When response status is not 2xx.
+ */
+export declare const fetchJson: <T>(input: RequestInfo | URL, init?: RequestInit, timeoutMs?: number) => Promise<T>;