@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/navbar-switcher-option/NavbarSwitcherOption.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import './NavbarSwitcherOption.css';
+import { navbarSwitcherOptionDefaults, navbarSwitcherOptionParts, } from './NavbarSwitcherOption.types.js';
+/**
+ * One choice inside a NavbarSwitcher.
+ *
+ * A `<button>`, not a link. Choosing a language changes how the page a reader is already on is
+ * drawn — no navigation, no history entry, nothing for the back button to undo — and a row that
+ * claimed to be a link would be wrong to the browser, the back button and every assistive
+ * technology at once.
+ *
+ * It takes the ink around it rather than naming one, except when it is the choice in force. A
+ * switcher's options are drawn on whatever surface holds them, and a row that named a colour would
+ * be the one thing on that surface not answering to it.
+ */
+export function NavbarSwitcherOption({ current = navbarSwitcherOptionDefaults.current, onSelect, children, ...rest }) {
+    return (_jsx("button", { ...rest, type: "button", className: navbarSwitcherOptionParts.root, "data-current": String(current), "aria-current": current, onClick: onSelect, children: children }));
+}

package/dist/components/core/navbar-switcher-option/NavbarSwitcherOption.types.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export interface NavbarSwitcherOptionOwnProps {
+    /** This is the choice in force — the language the page is being read in. Exactly one of a set carries it */
+    current?: boolean;
+    /** Always. Choosing is the whole of what this does, and a row that reported nothing would be a row that did nothing */
+    onSelect: () => void;
+    /** Allowed: text */
+    children: ReactNode;
+}
+export type NavbarSwitcherOptionProps = NavbarSwitcherOptionOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const navbarSwitcherOptionParts: {
+    readonly root: "dds-navbarswitcheroption";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const navbarSwitcherOptionDefaults: {
+    readonly current: false;
+};

package/dist/components/core/navbar-switcher-option/NavbarSwitcherOption.types.js

@@ -0,0 +1,7 @@
+// GENERATED from navbar-switcher-option.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const navbarSwitcherOptionParts = {
+    root: 'dds-navbarswitcheroption',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const navbarSwitcherOptionDefaults = { current: false };

package/dist/components/core/option/Option.css

@@ -0,0 +1,133 @@
+/* GENERATED from option.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-option {
+  transition-property: background-color, opacity;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  inline-size: 100%;
+  justify-content: space-between;
+  list-style: none;
+  border-radius: var(--radius-menu-item);
+  color: var(--color-fg-default);
+  gap: var(--space-gap-sm);
+  padding-block: var(--space-inset-xs);
+  padding-inline: var(--space-inset-sm);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-option .dds-option__leading-icon {
+  align-items: center;
+  display: flex;
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-option .dds-option__text {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+:where([data-dds-context="marketing"]) .dds-option .dds-option__label {
+  transition-property: font-weight;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where([data-dds-context="marketing"]) .dds-option .dds-option__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where([data-dds-context="marketing"]) .dds-option .dds-option__tick {
+  align-items: center;
+  display: flex;
+  flex: none;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-active="true"] {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-disabled="true"] {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="md"] {
+  min-block-size: var(--size-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="md"] .dds-option__description {
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="md"] .dds-option__label {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="md"] .dds-option__leading-icon {
+  block-size: var(--icon-size-sm);
+  inline-size: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="md"] .dds-option__tick {
+  min-inline-size: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="sm"] {
+  min-block-size: var(--size-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="sm"] .dds-option__description {
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="sm"] .dds-option__label {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="sm"] .dds-option__leading-icon {
+  block-size: var(--icon-size-xs);
+  inline-size: var(--icon-size-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="sm"] .dds-option__tick {
+  min-inline-size: var(--icon-size-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-disabled="false"]:hover {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="md"][data-selected="true"] .dds-option__label {
+  font-weight: var(--font-label-md-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-option[data-size="sm"][data-selected="true"] .dds-option__label {
+  font-weight: var(--font-label-md-weight);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-option,
+  :where([data-dds-context="marketing"]) .dds-option * { transition: none; }
+}
+

package/dist/components/core/option/Option.d.ts

@@ -0,0 +1,25 @@
+import './Option.css';
+import { type OptionProps } from './Option.types.js';
+export type { OptionProps };
+/**
+ * One answer on offer inside a control that opens a list.
+ *
+ * It knows what it is worth and what to call itself. Everything else about it —
+ * whether it is the answer, whether the arrow keys are on it, how tall to be — is
+ * passed down, because only the control can see the set and only one row can be
+ * right about any of those at a time.
+ *
+ * Not focusable, which is the pattern rather than an oversight. Focus stays on the
+ * trigger while the list is open and the trigger names the active row through
+ * `aria-activedescendant`. A row that took focus would be a second tab stop for a
+ * single choice, and a set of twenty would be twenty presses on the way to whatever
+ * follows the control.
+ *
+ * Trimmed against product's. There is no checkbox form — that exists for a list
+ * several answers may be taken from, which this package has no control for yet —
+ * and no match-emboldening, which exists for a control that filters, where this
+ * one's own guidance says the set is short enough to scan rather than search.
+ * Neither is a gap to fill later by default; each comes back with the control that
+ * needs it.
+ */
+export declare function Option({ size, selected, active, disabled, value: _value, leadingIcon, description, children, ...rest }: OptionProps): import("react").JSX.Element;

package/dist/components/core/option/Option.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckSolidIcon } from '@deriv-com/quill-icons-web';
+import { Icon } from '../icon/Icon.js';
+import { given } from '../../given.js';
+import './Option.css';
+import { optionDefaults, optionGlyphStep, optionParts } from './Option.types.js';
+/**
+ * One answer on offer inside a control that opens a list.
+ *
+ * It knows what it is worth and what to call itself. Everything else about it —
+ * whether it is the answer, whether the arrow keys are on it, how tall to be — is
+ * passed down, because only the control can see the set and only one row can be
+ * right about any of those at a time.
+ *
+ * Not focusable, which is the pattern rather than an oversight. Focus stays on the
+ * trigger while the list is open and the trigger names the active row through
+ * `aria-activedescendant`. A row that took focus would be a second tab stop for a
+ * single choice, and a set of twenty would be twenty presses on the way to whatever
+ * follows the control.
+ *
+ * Trimmed against product's. There is no checkbox form — that exists for a list
+ * several answers may be taken from, which this package has no control for yet —
+ * and no match-emboldening, which exists for a control that filters, where this
+ * one's own guidance says the set is short enough to scan rather than search.
+ * Neither is a gap to fill later by default; each comes back with the control that
+ * needs it.
+ */
+export function Option({ size = optionDefaults.size, selected = optionDefaults.selected, active = optionDefaults.active, disabled = optionDefaults.disabled, value: _value, leadingIcon, description, children, ...rest }) {
+    return (_jsxs("li", { className: optionParts.root, role: "option", "data-size": size, "data-selected": String(selected), "data-active": String(active), "data-disabled": String(disabled), "aria-selected": selected, "aria-disabled": disabled || undefined, ...rest, children: [leadingIcon === undefined ? null : (_jsx("span", { className: optionParts['leading-icon'], "aria-hidden": "true", children: _jsx(Icon, { size: optionGlyphStep[size], children: leadingIcon }) })), _jsxs("span", { className: optionParts.text, children: [_jsx("span", { className: optionParts.label, children: children }), given(description) ? (_jsx("span", { className: optionParts.description, children: description })) : null] }), _jsx("span", { className: optionParts.tick, "aria-hidden": "true", children: selected ? (_jsx(Icon, { size: optionGlyphStep[size], children: _jsx(CheckSolidIcon, {}) })) : null })] }));
+}

package/dist/components/core/option/Option.types.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+export interface OptionOwnProps {
+    /**
+     * `sm` — The default, and the step a SelectChip at its own default opens
+     * `md` — Touch-first, where the row is also the target and a finger has to land inside it
+     */
+    size?: 'sm' | 'md';
+    /** Set by the control that owns the list, not by a page. The row has to say it is the answer and carry aria-selected, and both are facts about the set rather than about the row — a page setting this directly would be claiming an answer the control does not think it has. It is said by the words and the mark rather than by a ground, which leaves the background to mean one thing only */
+    selected?: boolean;
+    /** Whether the arrow keys are resting here. The control's to set: only the control knows where the keys are, and only one row can be right at a time. It brings the same ground a pointer brings, because they are the same fact in two input modes and a reader should not have to learn two marks for it */
+    active?: boolean;
+    /** This one answer cannot be taken. The row stays in the list and stays readable, because a set that hides what it will not accept leaves the reader hunting for something that was there last week */
+    disabled?: boolean;
+    /** What the control reports when this row is taken. A stable code rather than the words, so the words can be reworded or translated without changing what anything submits */
+    value: string;
+    /** A mark the reader knows the answer by — a flag on a language, a glyph on a market. For a set met before, where recognising is faster than reading. Pass the glyph itself rather than one already wrapped in an Icon: the row wraps it at icon.size.xs on sm and icon.size.sm on md, and the tick at the other end takes the same ramp so the two marks are one size */
+    leadingIcon?: ReactNode;
+    /** What the name does not say on its own — a code beside a market, where an answer applies. Give it where two answers are hard to tell apart by name, and leave it out where the name is the whole of the answer */
+    description?: string;
+    /** Allowed: text */
+    children: ReactNode;
+}
+export type OptionProps = OptionOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const optionParts: {
+    readonly root: "dds-option";
+    readonly 'leading-icon': "dds-option__leading-icon";
+    readonly text: "dds-option__text";
+    readonly label: "dds-option__label";
+    readonly description: "dds-option__description";
+    readonly tick: "dds-option__tick";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const optionDefaults: {
+    readonly size: "sm";
+    readonly selected: false;
+    readonly active: false;
+    readonly disabled: false;
+};
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export declare const optionGlyphStep: {
+    readonly sm: "xs";
+    readonly md: "sm";
+};

package/dist/components/core/option/Option.types.js

@@ -0,0 +1,14 @@
+// GENERATED from option.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const optionParts = {
+    root: 'dds-option',
+    'leading-icon': 'dds-option__leading-icon',
+    text: 'dds-option__text',
+    label: 'dds-option__label',
+    description: 'dds-option__description',
+    tick: 'dds-option__tick',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const optionDefaults = { size: 'sm', selected: false, active: false, disabled: false };
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export const optionGlyphStep = { sm: 'xs', md: 'sm' };

package/dist/components/core/pagination/Pagination.css

@@ -0,0 +1,237 @@
+/* GENERATED from pagination.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-pagination {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  max-inline-size: 100%;
+  position: relative;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__list {
+  transition-property: gap;
+  align-items: center;
+  display: flex;
+  min-inline-size: 0;
+  overflow-x: auto;
+  gap: var(--space-gap-xs);
+  min-block-size: var(--size-target-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__summary {
+  align-items: center;
+  display: flex;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--color-fg-default);
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot {
+  transition-property: color, min-inline-size, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  outline-style: solid;
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-none);
+  color: var(--color-bg-track);
+  min-block-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot-mark {
+  background-color: currentcolor;
+  display: block;
+  flex: none;
+  block-size: var(--size-dot-diameter);
+  border-radius: var(--radius-pill);
+  inline-size: var(--size-dot-diameter);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__step {
+  transition-property: background-color, opacity, outline-color, outline-width;
+  align-items: center;
+  background-color: transparent;
+  border-style: none;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  outline-style: solid;
+  text-decoration-line: none;
+  block-size: var(--size-control-sm);
+  border-radius: var(--radius-pill);
+  color: var(--color-fg-default);
+  inline-size: var(--size-control-sm);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__page {
+  transition-property: background-color, color, outline-color, outline-width;
+  align-items: center;
+  background-color: transparent;
+  border-style: none;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  outline-style: solid;
+  text-decoration-line: none;
+  block-size: var(--size-control-sm);
+  border-radius: var(--radius-pill);
+  color: var(--color-fg-default);
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  line-height: var(--font-label-sm-line-height);
+  min-inline-size: var(--size-control-sm);
+  outline-width: var(--border-width-none);
+  padding-inline: var(--space-inset-sm);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__break {
+  transition-property: background-color, outline-color, outline-width;
+  align-items: center;
+  background-color: transparent;
+  border-style: none;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  outline-style: solid;
+  block-size: var(--size-control-sm);
+  border-radius: var(--radius-pill);
+  color: var(--color-fg-default);
+  inline-size: var(--size-control-sm);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__break:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot:hover:where(:not(:disabled)) {
+  color: var(--color-bg-track-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__page:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__step:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__break:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot:active {
+  color: var(--color-bg-track-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__page:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__step:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__break:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__page:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__step:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot[data-current="true"] {
+  color: var(--color-bg-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__page[data-current="true"] {
+  background-color: var(--color-bg-strong);
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__step:disabled:not(:where(:disabled *)) {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination[data-show-steps="false"] .dds-pagination__dot {
+  min-inline-size: var(--size-target-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination[data-show-steps="true"] .dds-pagination__dot {
+  min-inline-size: var(--size-dot-diameter);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination[data-variant="compact"] {
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination[data-variant="count"] {
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination[data-variant="none"] {
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination[data-variant="dots"][data-show-steps="false"] .dds-pagination__list {
+  gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination[data-variant="dots"][data-show-steps="true"] .dds-pagination__list {
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__dot:disabled {
+  cursor: not-allowed;
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__step:disabled {
+  cursor: not-allowed;
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__page:disabled {
+  cursor: not-allowed;
+}
+
+:where([data-dds-context="marketing"]) .dds-pagination .dds-pagination__break:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-pagination,
+  :where([data-dds-context="marketing"]) .dds-pagination * { transition: none; }
+}
+

package/dist/components/core/pagination/Pagination.d.ts

@@ -0,0 +1,30 @@
+import './Pagination.css';
+import './pagination-impl.css';
+import { type PaginationProps } from './Pagination.types.js';
+export type { PaginationProps };
+/**
+ * A `<nav>` holding the ways through a set that has been divided into pages.
+ *
+ * Nothing about the reader's position is held here. `page` is the consumer's, because the
+ * results above this control are theirs too, and the two are one fact — a component keeping
+ * its own copy is how a row of numbers comes to disagree with what it describes.
+ *
+ * The one thing it does hold is how much of the window there is room for, which is not the
+ * reader's position but the container's width, and is a fact no consumer can pass because
+ * only the row can see it.
+ *
+ * Every control in the row is drawn here rather than borrowed, which is where this parts
+ * company with product's. There the steps are ButtonIcons and the numbered pages are
+ * Buttons; this package's ButtonIcon has no disabled state and says so in its own source,
+ * being a family of links, and a step at the end of the set has to be disabled rather than
+ * removed. Its Button is an anchor with a required href and has no quiet form, so a row of
+ * page numbers built from it would be a row of calls to action. Both are correct decisions
+ * for what those components are, and neither leaves anything to borrow.
+ *
+ * What a press is depends on the variant, and on `pageHref`. Given it, every route to a
+ * page is an anchor — the numbered targets and both steps — which is what gives a visitor
+ * cmd-click, a destination in the status bar and a link a crawler can follow. Without it
+ * they are buttons reporting through `onPageChange`. The marks under `dots` are always
+ * buttons: a slide has no address.
+ */
+export declare function Pagination({ variant, showSteps, page, totalPages, onPageChange, pageHref, totalItems, pageSize, siblingCount, label, previousLabel, nextLabel, morePagesLabel, ...rest }: PaginationProps): import("react").JSX.Element;