@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/typography/Typography.d.ts

@@ -0,0 +1,297 @@
+import { type ReactNode } from 'react';
+import './Typography.css';
+import { type TypographyProps } from './Typography.types.js';
+export type { TypographyProps };
+/**
+ * Copy, set in one of the page's type roles.
+ *
+ * The element comes from `as` and the scale from `variant`, and the two are separate props
+ * because they are separate decisions. Every heading role in this package carries the same
+ * sentence — a size, not an instruction — and this is the component that makes it true rather
+ * than advisory: `as="h2" variant="h1"` is a section heading drawn at hero scale, and a page
+ * cannot reach for a size and receive a document structure it did not ask for.
+ */
+export declare function Typography({ variant, as, children, ...rest }: TypographyProps & {
+    children?: ReactNode;
+}): import("react").DetailedReactHTMLElement<{
+    className: "dds-typography";
+    'data-variant': "figure" | "h1" | "h2" | "h3" | "h4" | "h5" | "eyebrow" | "subtitle" | "body-lg" | "body-md" | "body-sm";
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined | undefined;
+    title?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLElement, Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLElement> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLElement> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+}, HTMLElement>;

package/dist/components/core/typography/Typography.js

@@ -0,0 +1,28 @@
+import { createElement } from 'react';
+import './Typography.css';
+import { typographyDefaults, typographyParts } from './Typography.types.js';
+/**
+ * Copy, set in one of the page's type roles.
+ *
+ * The element comes from `as` and the scale from `variant`, and the two are separate props
+ * because they are separate decisions. Every heading role in this package carries the same
+ * sentence — a size, not an instruction — and this is the component that makes it true rather
+ * than advisory: `as="h2" variant="h1"` is a section heading drawn at hero scale, and a page
+ * cannot reach for a size and receive a document structure it did not ask for.
+ */
+export function Typography({ variant = typographyDefaults.variant, as = typographyDefaults.as, children, ...rest }) {
+    /**
+     * `createElement` rather than a component variable.
+     *
+     * `const As = as` and `<As …>` reads better and is the usual recipe, but it recreates the
+     * element type on every render from the caller's point of view, and it obliges the tag to be
+     * capitalised to escape JSX's lowercase-is-an-intrinsic rule. This takes the string straight,
+     * which is what it already is.
+     *
+     * `rest` is spread before the class so a consumer cannot replace it: the stylesheet and this
+     * component are written by different processes, and a part rendered without its class renders
+     * bare with its rule sitting unused. `className` is stripped from the props by the generated
+     * type, so nothing here is being taken away that the contract offered.
+     */
+    return createElement(as, { ...rest, className: typographyParts.root, 'data-variant': variant }, children);
+}

package/dist/components/core/typography/Typography.types.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface TypographyOwnProps {
+    /**
+     * `h1` — The line a landing page is built around, and there is one of them
+     * `h2` — A headline opening a major section of a long page
+     * `h3` — A section heading under an h1 and h2
+     * `h4` — A subsection heading, the first step below the extrabold the larger headings carry
+     * `h5` — A label over a group of cards, a list, or a short block of copy
+     * `subtitle` — A secondary title under a heading — a pricing plan's name, a sub-feature group
+     * `body-lg` — An introductory paragraph under a headline, a hero description, a section intro
+     * `body-md` — The default, and most of the copy on a page — feature descriptions, article text
+     * `body-sm` — De-emphasised copy: legal lines, disclaimers, help text
+     * `eyebrow` — A category label above a headline — a section tag, a plan badge. Drawn in capitals by this component, so write it in the case it should be read in
+     * `figure` — A number that is the point of its block — a count, a total, a span of time — with a label under it
+     */
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'subtitle' | 'body-lg' | 'body-md' | 'body-sm' | 'eyebrow' | 'figure';
+    /**
+     * `p` — The default, and any block of prose
+     * `span` — Text inside a sentence, or inside something that is already a block
+     * `h1` — The page's one document-level heading
+     * `h2` — A section heading
+     * `h3` — A heading under an h2
+     * `h4` — A heading under an h3
+     * `h5` — A heading under an h4
+     * `h6` — The deepest heading level
+     */
+    as?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Allowed: text */
+    children: ReactNode;
+}
+export type TypographyProps = TypographyOwnProps & Omit<HTMLAttributes<HTMLElement>, 'className' | 'variant' | 'as'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const typographyParts: {
+    readonly root: "dds-typography";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const typographyDefaults: {
+    readonly variant: "body-md";
+    readonly as: "p";
+};

package/dist/components/core/typography/Typography.types.js

@@ -0,0 +1,7 @@
+// GENERATED from typography.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const typographyParts = {
+    root: 'dds-typography',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const typographyDefaults = { variant: 'body-md', as: 'p' };

package/dist/components/css-time.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A CSS time, read as milliseconds.
+ *
+ * `Element.animate` takes a number and reads it as milliseconds. A custom property holds a CSS
+ * time, which carries its unit, and the two are equal only by accident: the same token arrives
+ * here as `400ms` from a dev server and as `.4s` once a minifier has been over it, because a
+ * minifier is free to pick whichever spelling is shorter and both mean the same thing to CSS.
+ *
+ * Reading the number alone and handing it to `animate` therefore worked in development and failed
+ * in every production build — `.4s` parsed to `0.4`, the keyframes ran for four tenths of a
+ * millisecond, and everything they moved snapped into place instead of travelling. Nothing looked
+ * broken: the animation was running, correct in every other respect, and over before a frame could
+ * show it. It survived a build that is byte-identical from a clean checkout, a passing test suite,
+ * and every check this repo runs, because none of them watch a transition happen.
+ *
+ * So the unit is read rather than assumed. `ms` is tested before `s`, since `ms` ends in one.
+ * A value this cannot make sense of returns `null` rather than a guess, leaving the caller to say
+ * what it wants when the role is missing — a number here would be this file inventing timing.
+ */
+export declare function milliseconds(value: string): number | null;

package/dist/components/css-time.js

@@ -0,0 +1,30 @@
+/**
+ * A CSS time, read as milliseconds.
+ *
+ * `Element.animate` takes a number and reads it as milliseconds. A custom property holds a CSS
+ * time, which carries its unit, and the two are equal only by accident: the same token arrives
+ * here as `400ms` from a dev server and as `.4s` once a minifier has been over it, because a
+ * minifier is free to pick whichever spelling is shorter and both mean the same thing to CSS.
+ *
+ * Reading the number alone and handing it to `animate` therefore worked in development and failed
+ * in every production build — `.4s` parsed to `0.4`, the keyframes ran for four tenths of a
+ * millisecond, and everything they moved snapped into place instead of travelling. Nothing looked
+ * broken: the animation was running, correct in every other respect, and over before a frame could
+ * show it. It survived a build that is byte-identical from a clean checkout, a passing test suite,
+ * and every check this repo runs, because none of them watch a transition happen.
+ *
+ * So the unit is read rather than assumed. `ms` is tested before `s`, since `ms` ends in one.
+ * A value this cannot make sense of returns `null` rather than a guess, leaving the caller to say
+ * what it wants when the role is missing — a number here would be this file inventing timing.
+ */
+export function milliseconds(value) {
+    const time = value.trim();
+    const amount = Number.parseFloat(time);
+    if (!Number.isFinite(amount))
+        return null;
+    if (/ms$/i.test(time))
+        return amount;
+    if (/s$/i.test(time))
+        return amount * 1000;
+    return null;
+}

package/dist/components/given.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether a string prop was supplied, for the props whose presence is the switch.
+ *
+ * Absence is the switch — which means an empty string has to count as absent,
+ * and so does whitespace.
+ */
+export declare function given(value: string | undefined): boolean;

package/dist/components/given.js

@@ -0,0 +1,9 @@
+/**
+ * Whether a string prop was supplied, for the props whose presence is the switch.
+ *
+ * Absence is the switch — which means an empty string has to count as absent,
+ * and so does whitespace.
+ */
+export function given(value) {
+    return value !== undefined && value.trim() !== '';
+}

package/dist/components/hover-open.d.ts

@@ -0,0 +1,34 @@
+import { type PointerEvent as ReactPointerEvent } from 'react';
+export interface HoverOpen {
+    onPointerEnter: (event: ReactPointerEvent<HTMLElement>) => void;
+    onPointerLeave: (event: ReactPointerEvent<HTMLElement>) => void;
+    /** Called when a press takes over: the pointer's intention is no longer the one in force. */
+    release: () => void;
+}
+/**
+ * Opening on hover, where hovering is something a reader can do.
+ *
+ * Shared because two components in this package want the identical behaviour and the behaviour is
+ * subtle in three separate ways — each of which has already been got wrong once. A second copy
+ * would be a second place to fix them, and the copies would agree only until one of them was
+ * touched.
+ *
+ * `pointerType === 'mouse'`, because a tap fires this too: a touch reports `touch` and a stylus
+ * `pen`, so asking the event what kind of pointer it is answers per gesture rather than per device
+ * — the only answer that holds on a laptop with a touchscreen, where a media query has to commit to
+ * one for the whole session.
+ *
+ * Only what hover opened may be closed by hover. Opened from the keyboard and then brushed by a
+ * mouse on its way elsewhere, a menu would otherwise close under a reader who never asked — the
+ * pointer leaving says nothing about a reader who is not using one.
+ *
+ * And a pending close is dropped the moment the thing closes for any other reason. Crossing from
+ * one menu to the next is two events in order: this one's leave, which arms a close, and the next
+ * one's enter, which opens it — and a bar holding one open at a time closes this one on the spot.
+ * The armed timer then reports `false` for something already shut, which a governing parent reads
+ * as "nothing is open", and the menu the reader actually moved to closes under them.
+ *
+ * Hover opens; it does not take over. Whatever this is attached to stays a button: Enter and Space
+ * work where no pointer exists at all, and the press still toggles for a reader who uses both.
+ */
+export declare function useHoverOpen(enabled: boolean, open: boolean, setOpen: (next: boolean) => void): HoverOpen;

package/dist/components/hover-open.js

@@ -0,0 +1,90 @@
+'use client';
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * How long a surface waits before a pointer that has left it is believed.
+ *
+ * What opens on hover hangs a step below what opened it, and that step is real estate the pointer
+ * has to cross: for those few pixels it is over neither, which the DOM reports as having left
+ * entirely. Closing on that would make the panel unreachable by the one gesture that opened it.
+ *
+ * A constant rather than a token, which is worth naming rather than hiding. `motion.duration.*`
+ * holds how long things take to move; this is how long a component waits before believing an
+ * intention, and reading a duration role for it would tie the two together — retuning an animation
+ * would change how forgiving a menu is, which is not a relationship anybody would predict from
+ * either name.
+ */
+const GRACE_MS = 150;
+/**
+ * Opening on hover, where hovering is something a reader can do.
+ *
+ * Shared because two components in this package want the identical behaviour and the behaviour is
+ * subtle in three separate ways — each of which has already been got wrong once. A second copy
+ * would be a second place to fix them, and the copies would agree only until one of them was
+ * touched.
+ *
+ * `pointerType === 'mouse'`, because a tap fires this too: a touch reports `touch` and a stylus
+ * `pen`, so asking the event what kind of pointer it is answers per gesture rather than per device
+ * — the only answer that holds on a laptop with a touchscreen, where a media query has to commit to
+ * one for the whole session.
+ *
+ * Only what hover opened may be closed by hover. Opened from the keyboard and then brushed by a
+ * mouse on its way elsewhere, a menu would otherwise close under a reader who never asked — the
+ * pointer leaving says nothing about a reader who is not using one.
+ *
+ * And a pending close is dropped the moment the thing closes for any other reason. Crossing from
+ * one menu to the next is two events in order: this one's leave, which arms a close, and the next
+ * one's enter, which opens it — and a bar holding one open at a time closes this one on the spot.
+ * The armed timer then reports `false` for something already shut, which a governing parent reads
+ * as "nothing is open", and the menu the reader actually moved to closes under them.
+ *
+ * Hover opens; it does not take over. Whatever this is attached to stays a button: Enter and Space
+ * work where no pointer exists at all, and the press still toggles for a reader who uses both.
+ */
+export function useHoverOpen(enabled, open, setOpen) {
+    const timer = useRef(undefined);
+    const opened = useRef(false);
+    const cancel = useCallback(() => {
+        if (timer.current === undefined)
+            return;
+        window.clearTimeout(timer.current);
+        timer.current = undefined;
+    }, []);
+    // A pending close outlives the element without this: the callback would run against something
+    // unmounted, and in controlled use would report a state change for a menu its owner no longer has.
+    useEffect(() => cancel, [cancel]);
+    useEffect(() => {
+        if (open)
+            return;
+        opened.current = false;
+        cancel();
+    }, [open, cancel]);
+    const release = useCallback(() => {
+        opened.current = false;
+        cancel();
+    }, [cancel]);
+    return {
+        onPointerEnter: (event) => {
+            if (!enabled || event.pointerType !== 'mouse')
+                return;
+            // Back inside before the grace ran out — the pointer was crossing the gap, not leaving.
+            cancel();
+            if (open)
+                return;
+            opened.current = true;
+            setOpen(true);
+        },
+        onPointerLeave: (event) => {
+            if (!enabled || event.pointerType !== 'mouse')
+                return;
+            if (!open || !opened.current)
+                return;
+            cancel();
+            timer.current = window.setTimeout(() => {
+                timer.current = undefined;
+                opened.current = false;
+                setOpen(false);
+            }, GRACE_MS);
+        },
+        release,
+    };
+}