@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/dist/components/blocks/text-scroll/text-scroll-impl.css

@@ -0,0 +1,115 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * Centred from the fold, and at the start on a phone — the section-title rule and its reason: on a
+ * phone the measure is the screen, and a centred statement wraps to ragged lines whose left edge
+ * the eye loses. The reference design turns at 768px, which is this package's `48rem`.
+ *
+ * The paragraph is held to a measure, so centring its words is half of it: the capped box has to
+ * come to the middle as well, or the lines are centred inside a column sitting at the start.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__text {
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+/*
+ * The words brighten with the scroll, one after another.
+ *
+ * The section names a view timeline, and every word runs down it from opacity.track — the dimmed
+ * share of the same ink, which is the job that role already does for a track behind what travels
+ * over it — up to the full strength it has at rest. Scroll-driven, so the reveal moves forward as
+ * the reader scrolls down and back as they scroll up, and stands still while the page does. Linear,
+ * because the scroll is the easing; a curve here would be a second one on top of the reader's own.
+ * Only `from` is written: the end of the animation is the word's own resting opacity, so nothing
+ * here restates full strength as a number.
+ *
+ * The window runs from the section's top edge a quarter of the way up the viewport to its bottom
+ * edge reaching the viewport's foot. On the `cover` range that is `25vh` in from the start to
+ * `100% - 100vh` — the section's own height. The reference design ran it until the bottom edge
+ * crossed the middle of the viewport instead, and that is a point a page cannot always reach: as
+ * the last section, or above less than half a screen of page, the last words stayed dim for good,
+ * at about 1.6:1. The bottom edge reaching the foot of the viewport is the one end every section
+ * can be scrolled to. The start is held to the end where a section is shorter than a quarter of the
+ * viewport, so the window never runs backwards.
+ *
+ * Each word takes its own stretch of that window, the reference's stagger said as arithmetic. There
+ * a word brightened over five steps and the next one started a step later, so a word is still
+ * coming up while the four after it begin and the front of the reveal is a soft edge rather than a
+ * hard one. With `n` words that is `n + 4` steps in all: a word at place `i` starts at step `i` and
+ * lands at step `i + 5`. The place and the count are set on the word and the paragraph by the
+ * component, the only two numbers that change from one statement to the next.
+ *
+ * The timeline measures against the nearest scroll container, which is why nothing between the
+ * section and the page may clip with `overflow: hidden`: `hidden` makes a box a scroll container
+ * even when it never scrolls, and the words would then sit wherever they started however far the
+ * page moved. Clip with `overflow: clip` instead.
+ *
+ * A browser with no scroll timeline never applies the dim at all, so every word is at full strength
+ * from the start, which is the whole of the fallback — and the same is true before any script,
+ * because nothing here waits for one.
+ */
+@keyframes dds-textscroll-brighten {
+  from {
+    opacity: var(--opacity-track);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-textscroll {
+    view-timeline: --dds-textscroll-pass block;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__word {
+    /* How many steps a word takes to come up; the next word starts one step after it. */
+    --dds-textscroll-span: 5;
+    --dds-textscroll-steps: calc(var(--dds-textscroll-words) + var(--dds-textscroll-span) - 1);
+    --dds-textscroll-to: calc(100% - 100vh);
+    --dds-textscroll-from: min(25vh, var(--dds-textscroll-to));
+    --dds-textscroll-step: calc((var(--dds-textscroll-to) - var(--dds-textscroll-from)) / var(--dds-textscroll-steps));
+    animation: dds-textscroll-brighten linear both;
+    animation-range:
+      cover calc(var(--dds-textscroll-from) + var(--dds-textscroll-step) * var(--dds-textscroll-at))
+      cover calc(var(--dds-textscroll-from) + var(--dds-textscroll-step) * (var(--dds-textscroll-at) + var(--dds-textscroll-span)));
+    animation-timeline: --dds-textscroll-pass;
+  }
+}
+
+/*
+ * A reader who asked for less movement gets none of it: the whole statement at full strength and
+ * still, exactly as it is in a browser that cannot scroll-drive it.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__word {
+    animation: none;
+  }
+}
+
+/*
+ * On a phone the statement takes the h3 step rather than h4.
+ *
+ * h4 there is 24px, the size of a card's title, and this is the one thing the band says, the width of
+ * the screen to itself — set at h4 it read as a caption waiting for something bigger. h3 is 32px on a
+ * phone. From the fold it is h4 again, 36px, the reference's size, where the wider measure already
+ * gives the line its presence. The whole h3 step, its heavier weight too, so the phone's line is
+ * one of the scale's steps rather than h4's weight at h3's size.
+ *
+ * `47.9375rem` is the last width below the fold, LogoRows' bound.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__text {
+    font-size: var(--font-h3-size);
+    font-weight: var(--font-h3-weight);
+    letter-spacing: var(--font-h3-letter-spacing);
+    line-height: var(--font-h3-line-height);
+  }
+}

package/dist/components/blocks/tiers/Tiers.css

@@ -0,0 +1,233 @@
+/* GENERATED from tiers.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-tiers {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list {
+  display: grid;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+  column-gap: var(--space-grid-gutter);
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__tier {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__medal-row {
+  align-items: center;
+  display: flex;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__line-start {
+  border-block-start-style: solid;
+  display: none;
+  min-inline-size: 0;
+  border-width: var(--border-width-emphasis);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__medal {
+  display: block;
+  flex: none;
+  object-fit: cover;
+  block-size: var(--size-tiers-medal);
+  border-radius: var(--radius-subtle);
+  inline-size: var(--size-tiers-medal);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__line-end {
+  border-block-start-style: solid;
+  display: none;
+  min-inline-size: 0;
+  border-width: var(--border-width-emphasis);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__heading {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-sm);
+  row-gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__name {
+  margin-block: 0;
+  font-family: var(--font-h5-family);
+  font-size: var(--font-h5-size);
+  font-weight: var(--font-h5-weight);
+  letter-spacing: var(--font-h5-letter-spacing);
+  line-height: var(--font-h5-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__stage {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__benefit {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+  row-gap: var(--space-heading-title-description-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__benefit-title {
+  margin-block: 0;
+  font-family: var(--font-subtitle-family);
+  font-size: var(--font-subtitle-size);
+  font-weight: var(--font-subtitle-weight);
+  letter-spacing: var(--font-subtitle-letter-spacing);
+  line-height: var(--font-subtitle-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__benefit-description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__qualification {
+  margin-block: 0;
+  white-space: pre-line;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__footer {
+  display: flex;
+  margin-block-start: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="page"] .dds-tiers__benefit-description {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="page"] .dds-tiers__line-end {
+  border-color: var(--color-border-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="page"] .dds-tiers__line-start {
+  border-color: var(--color-border-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="page"] .dds-tiers__stage {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="strong"] .dds-tiers__benefit-description {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="strong"] .dds-tiers__line-end {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="strong"] .dds-tiers__line-start {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="strong"] .dds-tiers__stage {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="subtle"] .dds-tiers__benefit-description {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="subtle"] .dds-tiers__line-end {
+  border-color: var(--color-border-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="subtle"] .dds-tiers__line-start {
+  border-color: var(--color-border-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="subtle"] .dds-tiers__stage {
+  color: var(--color-fg-muted);
+}
+

package/dist/components/blocks/tiers/Tiers.d.ts

@@ -0,0 +1,32 @@
+import './Tiers.css';
+import './tiers-impl.css';
+import '../block-reveal.css';
+import { type TiersProps } from './Tiers.types.js';
+export type { TiersProps };
+/**
+ * A partnership-tier section: a heading over a row of tiers, each a medal, a name and its stage, a
+ * card saying what the tier gives and the bar that reaches it — the reference site's Tiers.
+ *
+ * The tiers are a ladder, and the order is the argument. So the list is an `<ol>`, and a screen
+ * reader announces the count and each tier's place without being told; at full width a rule runs
+ * through the medals and joins them into one track, read start to end. The tiers are records rather
+ * than children for the reason Steps' are: a tier is words and a picture, nothing a page composes,
+ * and the order is the list's to hold rather than the page's to restate.
+ *
+ * Each benefit is the page's own Card, so its fill and corner are a card's anywhere else on the
+ * page, with the benefit's words inside it at the card's own inset. The block knows its ground and
+ * the card does not, so the card is re-coloured for the painted grounds in the stylesheet rather
+ * than here — the way FeatureCards and ComparisonCards answer the same question.
+ *
+ * The reference template took its way on as `showLink`, `linkText`, `linkHref` and `onLinkClick`.
+ * Here it is one node, the page's own Link, as FeatureCards' is: a link already knows its words,
+ * its destination and what it does when pressed. Its per-tier `accent`, which coloured the track in
+ * four metals, is gone — this package has no metal colours and a set of them for one block would be
+ * a palette of its own — and so is `iconAlt`: the medal is decoration, because the name under it is
+ * the heading a reader hears.
+ *
+ * It arrives the way every block does: the heading and the line, then each tier a step behind the
+ * one before, lowest first, and the way on last. `'use client'` for that and for `useId`, which
+ * names the region by its heading.
+ */
+export declare function Tiers({ ground, title, description, tiers, link }: TiersProps): import("react").JSX.Element;

package/dist/components/blocks/tiers/Tiers.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './Tiers.css';
+import './tiers-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { Card } from '../../core/card/Card.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { tiersDefaults, tiersParts } from './Tiers.types.js';
+/**
+ * The most tiers drawn. The row holds four at full width, and the track through the medals has
+ * nowhere to run past the last column — a fifth would start a second row the line cannot reach.
+ */
+const MOST = 4;
+/**
+ * Says once that tiers past the fourth were left out — a page that passes five gets
+ * four drawn and would otherwise never learn why. Navbar's way of saying so about its actions.
+ */
+let warned = false;
+function warnIfTooMany(count) {
+    if (count <= MOST || warned)
+        return;
+    warned = true;
+    // eslint-disable-next-line no-console
+    console.warn(`Tiers was handed ${count} tiers and draws the first ${MOST}. A ladder of more than four rungs is ` +
+        'read as a table; put the rest on a page of their own, or use DataTable.');
+}
+/**
+ * A partnership-tier section: a heading over a row of tiers, each a medal, a name and its stage, a
+ * card saying what the tier gives and the bar that reaches it — the reference site's Tiers.
+ *
+ * The tiers are a ladder, and the order is the argument. So the list is an `<ol>`, and a screen
+ * reader announces the count and each tier's place without being told; at full width a rule runs
+ * through the medals and joins them into one track, read start to end. The tiers are records rather
+ * than children for the reason Steps' are: a tier is words and a picture, nothing a page composes,
+ * and the order is the list's to hold rather than the page's to restate.
+ *
+ * Each benefit is the page's own Card, so its fill and corner are a card's anywhere else on the
+ * page, with the benefit's words inside it at the card's own inset. The block knows its ground and
+ * the card does not, so the card is re-coloured for the painted grounds in the stylesheet rather
+ * than here — the way FeatureCards and ComparisonCards answer the same question.
+ *
+ * The reference template took its way on as `showLink`, `linkText`, `linkHref` and `onLinkClick`.
+ * Here it is one node, the page's own Link, as FeatureCards' is: a link already knows its words,
+ * its destination and what it does when pressed. Its per-tier `accent`, which coloured the track in
+ * four metals, is gone — this package has no metal colours and a set of them for one block would be
+ * a palette of its own — and so is `iconAlt`: the medal is decoration, because the name under it is
+ * the heading a reader hears.
+ *
+ * It arrives the way every block does: the heading and the line, then each tier a step behind the
+ * one before, lowest first, and the way on last. `'use client'` for that and for `useId`, which
+ * names the region by its heading.
+ */
+export function Tiers({ ground = tiersDefaults.ground, title, description, tiers, link }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    // A tier with no name is somebody mid-sentence in the workbench rather than a tier, and a medal
+    // over nothing is a rung the page did not write — so it is dropped before the row is counted.
+    const named = tiers.filter((tier) => given(tier.name));
+    warnIfTooMany(named.length);
+    const shown = named.slice(0, MOST);
+    return (_jsx("section", { className: tiersParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: tiersParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: tiersParts.header, children: [_jsx("h2", { className: tiersParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: tiersParts.description, ...arriving(1), children: description })) : null] }), _jsx("ol", { className: tiersParts.list, role: "list", children: shown.map((tier, at) => (
+                    /* Keyed by the tier's own name: an index would key the ladder by position, and removing a
+                       rung would have React reconcile every tier above it into its neighbour. Two tiers with
+                       one name are one tier written twice. */
+                    _jsxs("li", { className: tiersParts.tier, ...arriving(2 + at), children: [_jsxs("div", { className: tiersParts['medal-row'], children: [_jsx("span", { className: tiersParts['line-start'], "aria-hidden": "true" }), _jsx("img", { className: tiersParts.medal, src: tier.medal, alt: "", loading: "lazy", decoding: "async" }), _jsx("span", { className: tiersParts['line-end'], "aria-hidden": "true" })] }), _jsxs("div", { className: tiersParts.heading, children: [_jsx("h3", { className: tiersParts.name, children: tier.name }), _jsx("p", { className: tiersParts.stage, children: tier.stage })] }), _jsx(Card, { variant: "surface", children: _jsxs("div", { className: tiersParts.benefit, children: [_jsx("p", { className: tiersParts['benefit-title'], children: tier.benefit }), _jsx("p", { className: tiersParts['benefit-description'], children: tier.description })] }) }), given(tier.qualification) ? (_jsx("p", { className: tiersParts.qualification, children: tier.qualification })) : null] }, `${at}:${tier.name}`))) }), link ? (_jsx("div", { className: tiersParts.footer, ...arriving(2 + shown.length), children: link })) : null] }) }));
+}

package/dist/components/blocks/tiers/Tiers.types.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import type { TiersItem } from '../../tiers-data.js';
+export interface TiersOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them. The benefit cards are Card's recessed grey on it.
+     * `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The reference design paints this section grey, and a page following it closely takes this. The benefit cards turn white on it, color.bg.surface-card-raised, because their recessed grey is the band's own and would vanish into it.
+     * `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. The benefit cards turn round to the inverse surface and white ink, and the track between the medals to the band's own quiet rule.
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the tiers add up to, in the fewest words that say it — 'Growing rewards as you scale'. */
+    title: string;
+    /** A line saying how the tiers work, when the title alone does not — 'Our tiered partnership model rewards performance.' */
+    description?: string;
+    /** Always. The tiers, lowest first — two to four, four for a partnership programme. Each is a one-word `name`, a one-verb `stage`, a `medal` picture, a `benefit` headline and the sentence under it, and — on every tier above the entry one — the `qualification` that reaches it, with a line break before the amount. The order of the list is the order of the ladder, so reordering it reorders the tiers. */
+    tiers: TiersItem[];
+    /** A way on to the programme's full terms — 'Learn more about partner tiers'. A standalone Link, under the row. */
+    link?: ReactNode;
+}
+export type TiersProps = TiersOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const tiersParts: {
+    readonly root: "dds-tiers";
+    readonly inner: "dds-tiers__inner";
+    readonly header: "dds-tiers__header";
+    readonly title: "dds-tiers__title";
+    readonly description: "dds-tiers__description";
+    readonly list: "dds-tiers__list";
+    readonly tier: "dds-tiers__tier";
+    readonly 'medal-row': "dds-tiers__medal-row";
+    readonly 'line-start': "dds-tiers__line-start";
+    readonly medal: "dds-tiers__medal";
+    readonly 'line-end': "dds-tiers__line-end";
+    readonly heading: "dds-tiers__heading";
+    readonly name: "dds-tiers__name";
+    readonly stage: "dds-tiers__stage";
+    readonly benefit: "dds-tiers__benefit";
+    readonly 'benefit-title': "dds-tiers__benefit-title";
+    readonly 'benefit-description': "dds-tiers__benefit-description";
+    readonly qualification: "dds-tiers__qualification";
+    readonly footer: "dds-tiers__footer";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const tiersDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/tiers/Tiers.types.js

@@ -0,0 +1,25 @@
+// GENERATED from tiers.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const tiersParts = {
+    root: 'dds-tiers',
+    inner: 'dds-tiers__inner',
+    header: 'dds-tiers__header',
+    title: 'dds-tiers__title',
+    description: 'dds-tiers__description',
+    list: 'dds-tiers__list',
+    tier: 'dds-tiers__tier',
+    'medal-row': 'dds-tiers__medal-row',
+    'line-start': 'dds-tiers__line-start',
+    medal: 'dds-tiers__medal',
+    'line-end': 'dds-tiers__line-end',
+    heading: 'dds-tiers__heading',
+    name: 'dds-tiers__name',
+    stage: 'dds-tiers__stage',
+    benefit: 'dds-tiers__benefit',
+    'benefit-title': 'dds-tiers__benefit-title',
+    'benefit-description': 'dds-tiers__benefit-description',
+    qualification: 'dds-tiers__qualification',
+    footer: 'dds-tiers__footer',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const tiersDefaults = { ground: 'page' };