@cronos-labs/ui 0.2.0

package/dist/FilterPillGroup/index.d.ts

@@ -0,0 +1 @@
+export { PillButton, FilterPillRow } from './styles.js';

package/dist/FilterPillGroup/index.js

@@ -0,0 +1 @@
+export { PillButton, FilterPillRow } from './styles.js';

package/dist/FilterPillGroup/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const FilterPillRow: 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 PillButton: 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;
+}, {
+    $active: boolean;
+}>> & string;

package/dist/FilterPillGroup/styles.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+export const FilterPillRow = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.sizes.xxs};
+`;
+export const PillButton = styled.button `
+  padding: 6px ${({ theme }) => theme.sizes.sm};
+  border: none;
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background: ${({ theme, $active }) => $active ? theme.colors.brandSky : theme.colors.brandSkySurfaceLight};
+  color: ${({ theme }) => theme.colors.ink};
+  font-family: inherit;
+  font-size: ${({ theme }) => theme.typography.fontSize.footnote};
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard},
+    color ${({ theme }) => theme.motion.duration.fast}
+      ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    background: ${({ theme, $active }) => $active ? theme.colors.brandSky : theme.colors.brandSkyMuted};
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px ${({ theme }) => theme.colors.focusRing};
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;

package/dist/Footer/index.d.ts

@@ -0,0 +1,34 @@
+export interface FooterLinkItem {
+    label: string;
+    target: string;
+    external: boolean;
+    localizeTarget?: boolean;
+}
+export interface FooterLinkGroup {
+    group: string;
+    links: FooterLinkItem[];
+}
+export interface FooterLegalLinkItem {
+    label: string;
+    target: string;
+    external: boolean;
+    disabled?: boolean;
+    isCookiePreferences?: boolean;
+}
+export interface FooterContent {
+    localeSelectorAriaLabel: string;
+    legalNavLabel: string;
+    copyrightText: string;
+    disclaimer: string[];
+}
+interface FooterProps {
+    brandWordmarkSrc: string;
+    columns: FooterLinkGroup[];
+    content: FooterContent;
+    forceDocumentNavigation?: boolean;
+    legalLinks: FooterLegalLinkItem[];
+    onOpenCookiePreferences: () => void;
+    waitlistSlot?: ((legalMeta: React.ReactNode | undefined) => React.ReactNode) | undefined;
+}
+export declare function Footer({ brandWordmarkSrc, columns, content, forceDocumentNavigation, legalLinks, onOpenCookiePreferences, waitlistSlot, }: FooterProps): React.JSX.Element;
+export {};

package/dist/Footer/index.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from 'react';
+import { LocaleSelector } from '../LocaleSelector/index.js';
+import { buildLocalizedPath } from '../locale/routes.js';
+import { useCurrentLocale } from '../locale/hooks.js';
+import { desktopViewportQuery } from '../tokens.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) {
+        return buildLocalizedPath(target, locale);
+    }
+    return target;
+};
+const getExternalLinkProps = (external) => {
+    if (!external) {
+        return {};
+    }
+    return { target: '_blank', rel: 'noreferrer' };
+};
+export function Footer({ brandWordmarkSrc, columns, content, forceDocumentNavigation = false, legalLinks, onOpenCookiePreferences, waitlistSlot, }) {
+    const locale = useCurrentLocale();
+    const [isDesktopFooterLayout, setIsDesktopFooterLayout] = useState(true);
+    useEffect(() => {
+        const desktopMediaQuery = window.matchMedia(desktopViewportQuery);
+        const handleChange = (event) => {
+            setIsDesktopFooterLayout(event.matches);
+        };
+        setIsDesktopFooterLayout(desktopMediaQuery.matches);
+        desktopMediaQuery.addEventListener('change', handleChange);
+        return () => {
+            desktopMediaQuery.removeEventListener('change', handleChange);
+        };
+    }, []);
+    const renderFooterLink = (link) => {
+        return (_jsx(FooterLinkStyled, { href: buildFooterHref(link.target, locale, link.localizeTarget ?? true), ...getExternalLinkProps(link.external), children: _jsx("span", { children: link.label }) }, link.target));
+    };
+    const renderLegalLink = (link) => {
+        if (link.isCookiePreferences) {
+            return (_jsx(FooterLegalButton, { id: "ot-sdk-btn", className: "ot-sdk-show-settings", type: "button", onClick: onOpenCookiePreferences, children: link.label }));
+        }
+        if (link.disabled) {
+            return _jsx(FooterLegalText, { "aria-disabled": "true", children: link.label });
+        }
+        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: "" }) })] }) }));
+}

package/dist/Footer/styles.d.ts

@@ -0,0 +1,97 @@
+export declare const FooterShell: 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 FooterContainer: 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 FooterGrid: 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 FooterWaitlistSlot: 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 FooterMobileDivider: 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 FooterColumnsGrid: 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 FooterDisclaimerStack: 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 FooterDesktopLocaleSlot: 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 FooterDisclaimer: 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 FooterCopyright: 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 FooterColumn: 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 FooterColumnHeading: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const FooterLinkList: 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 FooterLink: 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 FooterLegalMeta: 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 FooterLocaleSlot: 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 FooterLegalNav: 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 FooterLegalLink: 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 FooterLegalButton: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const FooterLegalText: 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 FooterLegalDivider: 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 FooterMobileLegalMeta: 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 FooterMobileCopyright: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
+        [key: `--${string}`]: string | number | undefined;
+    }) | undefined;
+}> & string;
+export declare const FooterMobileLegalDividerTrack: 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 FooterMobileLegalNav: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
+        [key: `--${string}`]: string | number | undefined;
+    }) | undefined;
+}> & string;
+export declare const FooterWordmark: 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 FooterWordmarkImage: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, "property" | "title" | "slot" | "style" | "dir" | "content" | "rel" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "referrerPolicy" | "alt" | "crossOrigin" | "decoding" | "fetchPriority" | "height" | "loading" | "sizes" | "src" | "srcSet" | "useMap" | "width"> & Partial<Pick<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, "property" | "title" | "slot" | "style" | "dir" | "content" | "rel" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "referrerPolicy" | "alt" | "crossOrigin" | "decoding" | "fetchPriority" | "height" | "loading" | "sizes" | "src" | "srcSet" | "useMap" | "width">>> & string;

package/dist/Footer/styles.js

@@ -0,0 +1,326 @@
+import styled from 'styled-components';
+export const FooterShell = styled.footer `
+  position: relative;
+  z-index: 1;
+  background: ${({ theme }) => theme.colors.brandSky};
+  color: ${({ theme }) => theme.colors.ink};
+  padding: 64px 0 0;
+  overflow: visible;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: 56px 0 0;
+  }
+`;
+export const FooterContainer = styled.div `
+  width: min(
+    calc(100% - (2 * ${({ theme }) => theme.layout.pagePaddingInline})),
+    ${({ theme }) => theme.layout.landingWideWidth}
+  );
+  margin: 0 auto;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: min(calc(100% - (2 * ${({ theme }) => theme.layout.pagePaddingInlineWide})), 1209px);
+    margin: 0 auto;
+  }
+`;
+export const FooterGrid = styled.div `
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    'waitlist'
+    'divider'
+    'columns'
+    'mobileLegal';
+  row-gap: 40px;
+  align-items: start;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
+    grid-template-areas: 'waitlist columns';
+    column-gap: clamp(24px, 3vw, 69px);
+    row-gap: 40px;
+  }
+`;
+export const FooterWaitlistSlot = styled.div `
+  display: grid;
+  gap: 28px;
+  min-width: 0;
+  grid-area: waitlist;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    align-self: start;
+  }
+`;
+export const FooterMobileDivider = styled.div `
+  grid-area: divider;
+  width: 100%;
+  height: 1px;
+  background: ${({ theme }) => theme.colors.footerDivider};
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: none;
+  }
+`;
+export const FooterColumnsGrid = styled.div `
+  display: grid;
+  gap: 24px;
+  grid-area: columns;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    align-self: start;
+    grid-template-columns: max-content max-content minmax(0, 1fr);
+    column-gap: clamp(32px, 5vw, 63px);
+    row-gap: 34px;
+  }
+`;
+export const FooterDisclaimerStack = styled.div `
+  display: grid;
+  gap: 16px;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    grid-column: 1 / -1;
+    width: min(100%, 487px);
+    margin-top: clamp(40px, 6vw, 84px);
+  }
+`;
+export const FooterDesktopLocaleSlot = styled.div `
+  width: 197px;
+`;
+export const FooterDisclaimer = styled.div `
+  display: grid;
+  gap: 14px;
+  width: 100%;
+  margin-top: 10px;
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.colors.footerTextMuted};
+  font-size: 0.75rem;
+  font-weight: ${({ theme }) => theme.fontWeight.default};
+  line-height: 1.1667;
+
+  p {
+    margin: 0;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 0;
+  }
+`;
+export const FooterCopyright = styled.p `
+  margin: 0;
+  color: ${({ theme }) => theme.colors.footerTextMuted};
+  font-size: 0.6875rem;
+  font-weight: ${({ theme }) => theme.fontWeight.default};
+  line-height: 1.2727;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 0.75rem;
+    line-height: 1.3333;
+    white-space: nowrap;
+  }
+`;
+export const FooterColumn = styled.section `
+  display: grid;
+  gap: 8px;
+  align-content: start;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    gap: 4px;
+  }
+`;
+export const FooterColumnHeading = styled.h3 `
+  margin: 0;
+  font-size: 1rem;
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  line-height: 1.2;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 1.5rem;
+    line-height: 2;
+  }
+`;
+export const FooterLinkList = styled.div `
+  display: grid;
+  gap: 8px;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    gap: 2px;
+  }
+`;
+export const FooterLink = styled.a `
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  color: ${({ theme }) => theme.colors.ink};
+  font-size: 0.875rem;
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  line-height: 1.5;
+  text-decoration: none;
+  transition: opacity ${({ theme }) => theme.motion.duration.fast}
+    ${({ theme }) => theme.motion.easing.standard};
+
+  &:hover {
+    opacity: 0.68;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: ${({ theme }) => theme.typography.fontSize.body};
+  }
+`;
+export const FooterLegalMeta = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    gap: 10px 12px;
+  }
+`;
+export const FooterLocaleSlot = styled.div `
+  width: 100%;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: auto;
+  }
+`;
+export const FooterLegalNav = styled.nav `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+
+  > span {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    gap: 10px 12px;
+
+    > span {
+      gap: 10px 12px;
+    }
+  }
+`;
+export const FooterLegalLink = styled.a `
+  color: ${({ theme }) => theme.colors.footerTextMuted};
+  font-size: 0.6875rem;
+  font-weight: ${({ theme }) => theme.fontWeight.default};
+  line-height: 1.2727;
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 0.75rem;
+    line-height: 1.3333;
+  }
+`;
+export const FooterLegalButton = styled.button `
+  display: inline !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  color: ${({ theme }) => theme.colors.footerTextMuted} !important;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.6875rem !important;
+  font-weight: ${({ theme }) => theme.fontWeight.default} !important;
+  line-height: 1.2727 !important;
+  text-decoration: none !important;
+  white-space: nowrap !important;
+
+  &:hover {
+    background: transparent !important;
+    color: ${({ theme }) => theme.colors.footerTextMuted} !important;
+    text-decoration: underline !important;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.focusRing};
+    outline-offset: 2px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 0.75rem !important;
+    line-height: 1.3333 !important;
+  }
+`;
+export const FooterLegalText = styled.span `
+  color: ${({ theme }) => theme.colors.footerTextMuted};
+  font-size: 0.6875rem;
+  font-weight: ${({ theme }) => theme.fontWeight.default};
+  line-height: 1.2727;
+  opacity: 0.6;
+  white-space: nowrap;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 0.75rem;
+    line-height: 1.3333;
+  }
+`;
+export const FooterLegalDivider = styled.span `
+  width: 1px;
+  height: 18px;
+  background: ${({ theme }) => theme.colors.footerDivider};
+`;
+export const FooterMobileLegalMeta = styled.div `
+  grid-area: mobileLegal;
+  display: grid;
+  gap: 14px;
+  width: 100%;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: none;
+  }
+`;
+export const FooterMobileCopyright = styled(FooterCopyright) `
+  max-width: none;
+`;
+export const FooterMobileLegalDividerTrack = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1px;
+  height: 18px;
+`;
+export const FooterMobileLegalNav = styled(FooterLegalNav) `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 12px;
+`;
+export const FooterWordmark = styled.div `
+  margin-top: 28px;
+  pointer-events: none;
+  width: calc(100% + (2 * ${({ theme }) => theme.layout.pagePaddingInline}));
+  margin-left: calc(-1 * ${({ theme }) => theme.layout.pagePaddingInline});
+  max-height: 79px;
+  overflow: clip;
+  opacity: 0.18;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 28px;
+    width: 100%;
+    margin-left: 0;
+    max-height: 132px;
+  }
+`;
+export const FooterWordmarkImage = styled.img.attrs({
+    decoding: 'async',
+    fetchPriority: 'low',
+    loading: 'lazy',
+}) `
+  display: block;
+  width: 100%;
+  aspect-ratio: 179 / 31;
+  height: auto;
+  object-fit: contain;
+`;

package/dist/Header/NavDropdown.d.ts

@@ -0,0 +1,17 @@
+import type { HeaderPresentationVariant } from './index.js';
+export interface NavDropdownItem {
+    key: string;
+    label: string;
+    href: string;
+    ariaLabel?: string | undefined;
+    external?: boolean | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement>) => void) | undefined;
+}
+interface NavDropdownProps {
+    label: string;
+    items: NavDropdownItem[];
+    variant: HeaderPresentationVariant;
+    contrast?: boolean | undefined;
+}
+export declare function NavDropdown({ label, items, variant, contrast, }: NavDropdownProps): React.JSX.Element;
+export {};

package/dist/Header/NavDropdown.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { NavDropdown as NavDropdownRoot, NavDropdownChevron, NavDropdownLabel, NavDropdownList, NavDropdownMenu, NavDropdownOption, NavDropdownTrigger, } from './styles.js';
+const buildMenuId = (label) => `header-nav-dropdown-${label.toLowerCase().replace(/\s+/gu, '-')}`;
+export function NavDropdown({ label, items, variant, contrast, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const rootRef = useRef(null);
+    const location = useLocation();
+    const menuId = buildMenuId(label);
+    useEffect(() => {
+        setIsOpen(false);
+    }, [location.pathname, location.hash]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handlePointerDown = (event) => {
+            if (event.target instanceof Node && rootRef.current?.contains(event.target)) {
+                return;
+            }
+            setIsOpen(false);
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+    return (_jsxs(NavDropdownRoot, { ref: rootRef, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), children: [_jsxs(NavDropdownTrigger, { type: "button", "$variant": variant, "$contrast": contrast, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, onClick: () => setIsOpen((currentValue) => !currentValue), children: [_jsx(NavDropdownLabel, { "$contrast": contrast, children: label }), _jsx(NavDropdownChevron, { "$open": isOpen, "aria-hidden": "true" })] }), _jsx(NavDropdownMenu, { "$open": isOpen, id: menuId, role: "menu", "aria-label": label, children: _jsx(NavDropdownList, { children: items.map((item) => (_jsx(NavDropdownOption, { role: "menuitem", href: item.href, "aria-label": item.ariaLabel, onClick: (event) => {
+                            setIsOpen(false);
+                            item.onClick?.(event);
+                        }, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: item.label }, item.key))) }) })] }));
+}

package/dist/Header/helper.d.ts

@@ -0,0 +1 @@
+export declare const normalizePathname: (pathname: string) => string;