@deriv-com/dds-marketing 1.0.1 → 1.0.2

package/dist/components/core/background/use-halftone.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+/**
+ * A halftone mounted on a band: the band to observe and listen on, and the canvas to draw in.
+ *
+ * Shared by Background and by the blocks that can stand on the same pattern, so there is one
+ * painter and one set of rules about when it draws. Returns the two refs to place; `enabled` false
+ * mounts nothing, which is a block without the option asked for.
+ */
+export declare function useHalftone<Band extends HTMLElement>(enabled: boolean, interactive: boolean, 
+/** Whether the glow drifts on its own while nothing is happening. */
+animated: boolean, 
+/** Anything whose change should re-read the tokens — a tone that changes the ink. */
+key?: string, 
+/** Listen for the pointer on the band's parent rather than the band: a Background used as a layer. */
+onParent?: boolean): [RefObject<Band | null>, RefObject<HTMLCanvasElement | null>];

package/dist/components/core/background/use-halftone.js

@@ -0,0 +1,27 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { halftone } from './halftone.js';
+/**
+ * A halftone mounted on a band: the band to observe and listen on, and the canvas to draw in.
+ *
+ * Shared by Background and by the blocks that can stand on the same pattern, so there is one
+ * painter and one set of rules about when it draws. Returns the two refs to place; `enabled` false
+ * mounts nothing, which is a block without the option asked for.
+ */
+export function useHalftone(enabled, interactive, 
+/** Whether the glow drifts on its own while nothing is happening. */
+animated, 
+/** Anything whose change should re-read the tokens — a tone that changes the ink. */
+key, 
+/** Listen for the pointer on the band's parent rather than the band: a Background used as a layer. */
+onParent = false) {
+    const band = useRef(null);
+    const canvas = useRef(null);
+    useEffect(() => {
+        if (!enabled || band.current === null || canvas.current === null)
+            return undefined;
+        const host = onParent ? (band.current.parentElement ?? undefined) : undefined;
+        return halftone(band.current, canvas.current, { interactive, animated, host }).destroy;
+    }, [enabled, interactive, animated, key, onParent]);
+    return [band, canvas];
+}

package/dist/components/core/background/use-offscreen.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+/**
+ * Whether a band is off screen, written onto it as `data-offscreen` so the stylesheet can pause
+ * the motion it runs at rest. A pattern the stylesheet animates repaints the band each frame, and
+ * nobody sees a band move that is not on screen; the halftone pauses itself the same way.
+ *
+ * `enabled` false observes nothing — a pattern that does not move at rest, or the halftone, whose
+ * painter has its own observer.
+ */
+export declare function useOffscreen(band: RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/components/core/background/use-offscreen.js

@@ -0,0 +1,30 @@
+'use client';
+import { useEffect } from 'react';
+/**
+ * Whether a band is off screen, written onto it as `data-offscreen` so the stylesheet can pause
+ * the motion it runs at rest. A pattern the stylesheet animates repaints the band each frame, and
+ * nobody sees a band move that is not on screen; the halftone pauses itself the same way.
+ *
+ * `enabled` false observes nothing — a pattern that does not move at rest, or the halftone, whose
+ * painter has its own observer.
+ */
+export function useOffscreen(band, enabled) {
+    useEffect(() => {
+        const root = band.current;
+        if (!enabled || root === null || typeof IntersectionObserver === 'undefined')
+            return undefined;
+        const sight = new IntersectionObserver(([entry]) => {
+            if (entry === undefined)
+                return;
+            if (entry.isIntersecting)
+                delete root.dataset['offscreen'];
+            else
+                root.dataset['offscreen'] = 'true';
+        });
+        sight.observe(root);
+        return () => {
+            sight.disconnect();
+            delete root.dataset['offscreen'];
+        };
+    }, [band, enabled]);
+}

package/dist/components/core/background/use-spotlight.d.ts

@@ -0,0 +1,13 @@
+import { type RefObject } from 'react';
+/**
+ * The pointer's light on a pattern the stylesheet paints: where the pointer is, written onto the
+ * band as two custom properties the stylesheet centres its light on — a brighter copy of the grid
+ * or the rings, the aurora's trailing pool — and whether it is over the band.
+ *
+ * Events only record the pointer; the position is written once a frame, so a fast mouse costs one
+ * style write a frame rather than one per event. Nothing runs while the pointer is elsewhere. A
+ * touch has no hover to follow, so it lights nothing, and `enabled` false listens for nothing.
+ */
+export declare function useSpotlight(band: RefObject<HTMLElement | null>, enabled: boolean, 
+/** Listen on the band's parent: a Background used as a layer under a block's content. */
+onParent?: boolean): void;

package/dist/components/core/background/use-spotlight.js

@@ -0,0 +1,65 @@
+'use client';
+import { useEffect } from 'react';
+/**
+ * The pointer's light on a pattern the stylesheet paints: where the pointer is, written onto the
+ * band as two custom properties the stylesheet centres its light on — a brighter copy of the grid
+ * or the rings, the aurora's trailing pool — and whether it is over the band.
+ *
+ * Events only record the pointer; the position is written once a frame, so a fast mouse costs one
+ * style write a frame rather than one per event. Nothing runs while the pointer is elsewhere. A
+ * touch has no hover to follow, so it lights nothing, and `enabled` false listens for nothing.
+ */
+export function useSpotlight(band, enabled, 
+/** Listen on the band's parent: a Background used as a layer under a block's content. */
+onParent = false) {
+    useEffect(() => {
+        const root = band.current;
+        if (!enabled || root === null)
+            return undefined;
+        // A layer takes no pointer events and the content covers it, so the pointer is listened for on
+        // the band around it. The layer fills that band, so positions measured against it agree.
+        const host = onParent ? (root.parentElement ?? root) : root;
+        let frame = 0;
+        let clientX = 0;
+        let clientY = 0;
+        const write = () => {
+            frame = 0;
+            const box = root.getBoundingClientRect();
+            root.style.setProperty('--dds-background-spot-x', `${clientX - box.left}px`);
+            root.style.setProperty('--dds-background-spot-y', `${clientY - box.top}px`);
+        };
+        const move = (event) => {
+            if (event.pointerType === 'touch')
+                return;
+            clientX = event.clientX;
+            clientY = event.clientY;
+            if (root.dataset['spotlit'] !== 'true') {
+                // Arriving: place the light under the pointer before lighting it, and let the browser
+                // take that position in — reading the aurora pool's computed transform does — so what
+                // fades in is already where the pointer is, rather than easing over from where it last
+                // was. Unlit, the pool does not trail, so the move is instant.
+                if (frame !== 0)
+                    cancelAnimationFrame(frame);
+                frame = 0;
+                write();
+                void getComputedStyle(root, '::after').transform;
+                root.dataset['spotlit'] = 'true';
+                return;
+            }
+            if (frame === 0)
+                frame = requestAnimationFrame(write);
+        };
+        const leave = () => {
+            delete root.dataset['spotlit'];
+        };
+        host.addEventListener('pointermove', move, { passive: true });
+        host.addEventListener('pointerleave', leave, { passive: true });
+        return () => {
+            host.removeEventListener('pointermove', move);
+            host.removeEventListener('pointerleave', leave);
+            if (frame !== 0)
+                cancelAnimationFrame(frame);
+            delete root.dataset['spotlit'];
+        };
+    }, [band, enabled, onParent]);
+}

package/dist/components/core/illustration-card/IllustrationCard.css

@@ -0,0 +1,40 @@
+/* GENERATED from illustrationcard.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard {
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  overflow: hidden;
+  text-align: start;
+  background-color: var(--color-bg-surface-glass);
+  border-color: var(--color-border-subtle);
+  border-radius: var(--radius-surface);
+  border-width: var(--border-width-hairline);
+  color: var(--color-fg-default);
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-block-size: 0;
+  user-select: none;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-ratio="landscape"] {
+  aspect-ratio: var(--aspect-landscape);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-ratio="square"] {
+  aspect-ratio: var(--aspect-square);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-ratio="upright"] {
+  aspect-ratio: var(--aspect-upright);
+}
+

package/dist/components/core/illustration-card/IllustrationCard.d.ts

@@ -0,0 +1,22 @@
+import './IllustrationCard.css';
+import './illustration-card-impl.css';
+import { type IllustrationCardProps } from './IllustrationCard.types.js';
+export type { IllustrationCardProps };
+/**
+ * A pane of glass holding a picture of the product, in one of three shapes.
+ *
+ * The shape and the surface are this component's and nobody else's — that is the whole reason it
+ * exists. Every picture of this kind across a site is four by three, square or three by four, and is
+ * the same glass, because those are the two things each page would otherwise decide for itself and
+ * decide differently. What the pane shows is the page's.
+ *
+ * Everything inside is illustrative. The pane is one image to assistive technology, described by
+ * `label`, and its contents are `inert`: real components draw it, so it looks exactly like the
+ * product, and none of them can be focused, pressed or typed into.
+ *
+ * And it scales like a picture. The UI is laid out at its own size and, where the pane is too small
+ * to hold it, scaled down as a whole to fit — never up — so a pane on a phone shows the same picture
+ * smaller rather than text overlapping or cut off. The scale is worked out when the pane changes
+ * size and at no other time.
+ */
+export declare function IllustrationCard({ ratio, label, children, ...rest }: IllustrationCardProps): import("react").JSX.Element;

package/dist/components/core/illustration-card/IllustrationCard.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import './IllustrationCard.css';
+import './illustration-card-impl.css';
+import { illustrationCardDefaults, illustrationCardParts, } from './IllustrationCard.types.js';
+/**
+ * A pane of glass holding a picture of the product, in one of three shapes.
+ *
+ * The shape and the surface are this component's and nobody else's — that is the whole reason it
+ * exists. Every picture of this kind across a site is four by three, square or three by four, and is
+ * the same glass, because those are the two things each page would otherwise decide for itself and
+ * decide differently. What the pane shows is the page's.
+ *
+ * Everything inside is illustrative. The pane is one image to assistive technology, described by
+ * `label`, and its contents are `inert`: real components draw it, so it looks exactly like the
+ * product, and none of them can be focused, pressed or typed into.
+ *
+ * And it scales like a picture. The UI is laid out at its own size and, where the pane is too small
+ * to hold it, scaled down as a whole to fit — never up — so a pane on a phone shows the same picture
+ * smaller rather than text overlapping or cut off. The scale is worked out when the pane changes
+ * size and at no other time.
+ */
+export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label, children, ...rest }) {
+    const pane = useRef(null);
+    const content = useRef(null);
+    useLayoutEffect(() => {
+        const root = pane.current;
+        const inner = content.current;
+        if (root === null || inner === null || typeof ResizeObserver === 'undefined')
+            return undefined;
+        const fit = () => {
+            const style = getComputedStyle(root);
+            const across = root.clientWidth - Number.parseFloat(style.paddingInlineStart) - Number.parseFloat(style.paddingInlineEnd);
+            const down = root.clientHeight - Number.parseFloat(style.paddingBlockStart) - Number.parseFloat(style.paddingBlockEnd);
+            if (across <= 0 || down <= 0)
+                return;
+            // Laid out unscaled at the pane's own width, to see how much room the UI wants there — down,
+            // and across, since a line that cannot wrap (a large figure) overflows sideways.
+            inner.style.transform = '';
+            inner.style.inlineSize = `${across}px`;
+            const tall = inner.scrollHeight;
+            const wide = inner.scrollWidth;
+            const scale = Math.min(1, down / tall, across / wide);
+            if (scale >= 1) {
+                inner.style.inlineSize = '';
+                return;
+            }
+            // Scaled, the UI is narrower than the pane too; laying it out wider by the same factor gives
+            // the width back, so the picture fills the pane across as well as down. Wider, it can only
+            // wrap less and so be shorter, which keeps it inside the pane.
+            inner.style.inlineSize = `${across / scale}px`;
+            inner.style.transformOrigin = style.direction === 'rtl' ? 'top right' : 'top left';
+            inner.style.transform = `scale(${scale})`;
+        };
+        // Fitted again only when something can have changed: the pane's size, the size of what it
+        // holds, or the typeface arriving — before it does, the UI is measured in a fallback face of a
+        // different size. Batched to one fit a frame; scaling is a transform and does not resize what
+        // is observed, so a fit does not set off another.
+        let queued = 0;
+        const refit = () => {
+            if (queued !== 0)
+                return;
+            queued = requestAnimationFrame(() => {
+                queued = 0;
+                fit();
+            });
+        };
+        const watch = new ResizeObserver(refit);
+        watch.observe(root);
+        for (const child of Array.from(inner.children))
+            watch.observe(child);
+        void document.fonts?.ready.then(refit);
+        fit();
+        return () => {
+            watch.disconnect();
+            if (queued !== 0)
+                cancelAnimationFrame(queued);
+        };
+    }, []);
+    return (_jsx("div", { ...rest, ref: pane, className: illustrationCardParts.root, "data-ratio": ratio, role: "img", "aria-label": label, children: _jsx("div", { ref: content, className: illustrationCardParts.content, inert: true, children: children }) }));
+}

package/dist/components/core/illustration-card/IllustrationCard.types.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface IllustrationCardOwnProps {
+    /**
+     * `landscape` — Four by three, and the default. For a panel beside words in a wide section
+     * `square` — One by one. For a grid of panels, or a column no wider than it is tall
+     * `upright` — Three by four. For a phone, or a narrow column beside a tall run of words
+     */
+    ratio?: 'landscape' | 'square' | 'upright';
+    /** Always. What the picture shows, in a sentence — "Trade ticket: buy Gold to rise over 5 minutes, staking 10 USD". The pane is one image to assistive technology and this is its whole description; nothing inside it is read out on its own */
+    label: string;
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type IllustrationCardProps = IllustrationCardOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'label'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationCardParts: {
+    readonly root: "dds-illustrationcard";
+    readonly content: "dds-illustrationcard__content";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const illustrationCardDefaults: {
+    readonly ratio: "landscape";
+};

package/dist/components/core/illustration-card/IllustrationCard.types.js

@@ -0,0 +1,8 @@
+// GENERATED from illustration-card.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationCardParts = {
+    root: 'dds-illustrationcard',
+    content: 'dds-illustrationcard__content',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const illustrationCardDefaults = { ratio: 'landscape' };

package/dist/components/core/illustration-card/illustration-card-impl.css

@@ -0,0 +1,27 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did before.
+ */
+
+/*
+ * The glass: whatever is behind the pane, blurred. The fill is bound in the contract —
+ * color.bg.surface-glass — and the blur is here because `blur()` is a function no binding can
+ * name, the same division navbar-material.css makes. size.backdrop-blur is enough that what is
+ * behind stops reading as detail, so the UI on the pane stays legible.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard {
+  -webkit-backdrop-filter: blur(var(--size-backdrop-blur));
+  backdrop-filter: blur(var(--size-backdrop-blur));
+}
+
+/*
+ * What the pane holds keeps its own size: nothing in it shrinks to make room, because a shrunk item
+ * in a flex column overlaps the next one. Where the UI is taller than the pane, IllustrationCard
+ * scales the whole of it down to fit, as a picture would be; until that has run — on a server
+ * render — whatever does not fit is clipped at the pane's edge.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > * {
+  flex-shrink: 0;
+}

package/dist/components/core/illustration-scene/IllustrationScene.css

@@ -0,0 +1,44 @@
+/* GENERATED from illustrationscene.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene {
+  align-items: center;
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  isolation: isolate;
+  overflow: hidden;
+  position: relative;
+  border-radius: var(--radius-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene .dds-illustrationscene__image {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement="center"] {
+  justify-items: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement="end"] {
+  justify-items: end;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement="start"] {
+  justify-items: start;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio="landscape"] {
+  aspect-ratio: var(--aspect-landscape);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio="square"] {
+  aspect-ratio: var(--aspect-square);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio="upright"] {
+  aspect-ratio: var(--aspect-upright);
+}
+

package/dist/components/core/illustration-scene/IllustrationScene.d.ts

@@ -0,0 +1,14 @@
+import './IllustrationScene.css';
+import './illustration-scene-impl.css';
+import { type IllustrationSceneProps } from './IllustrationScene.types.js';
+export type { IllustrationSceneProps };
+/**
+ * A photograph with an IllustrationCard laid over it, in one of three shapes.
+ *
+ * The scene owns how the two meet — the shape, the card's share of the frame, where it sits — so
+ * every picture of the product in use is composed the same way across a site. The photograph is
+ * decoration unless `alt` says otherwise; the card's own label describes the whole picture.
+ *
+ * No state and no script, so it renders on a server as it is.
+ */
+export declare function IllustrationScene({ ratio, placement, src, alt, children, ...rest }: IllustrationSceneProps): import("react").JSX.Element;

package/dist/components/core/illustration-scene/IllustrationScene.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './IllustrationScene.css';
+import './illustration-scene-impl.css';
+import { illustrationSceneDefaults, illustrationSceneParts, } from './IllustrationScene.types.js';
+/**
+ * A photograph with an IllustrationCard laid over it, in one of three shapes.
+ *
+ * The scene owns how the two meet — the shape, the card's share of the frame, where it sits — so
+ * every picture of the product in use is composed the same way across a site. The photograph is
+ * decoration unless `alt` says otherwise; the card's own label describes the whole picture.
+ *
+ * No state and no script, so it renders on a server as it is.
+ */
+export function IllustrationScene({ ratio = illustrationSceneDefaults.ratio, placement = illustrationSceneDefaults.placement, src, alt = illustrationSceneDefaults.alt, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: illustrationSceneParts.root, "data-ratio": ratio, "data-placement": placement, children: [_jsx("img", { className: illustrationSceneParts.image, src: src, alt: alt }), children] }));
+}

package/dist/components/core/illustration-scene/IllustrationScene.types.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface IllustrationSceneOwnProps {
+    /**
+     * `landscape` — Four by three. A scene beside words in a wide section; the card takes a little under half the width
+     * `square` — One by one, and the default — the shape most such scenes are drawn in. The card takes a little over half the width
+     * `upright` — Three by four. A scene on a phone or in a narrow column; the card takes most of the width
+     */
+    ratio?: 'landscape' | 'square' | 'upright';
+    /**
+     * `center` — The default: the card in the middle of the frame. For a photograph whose subject frames the middle — a person looking down at what the card shows
+     * `start` — The card towards the start edge, for a photograph whose subject is at the end
+     * `end` — The card towards the end edge, for a photograph whose subject is at the start
+     */
+    placement?: 'center' | 'start' | 'end';
+    /** Always. The photograph the scene is set in */
+    src: string;
+    /** Empty by default, because the card's `label` describes the whole picture and the photograph is decoration. Write one only where the photograph says something the label does not */
+    alt?: string;
+    /** Allowed: IllustrationCard */
+    children: ReactNode;
+}
+export type IllustrationSceneProps = IllustrationSceneOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'placement' | 'src' | 'alt'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationSceneParts: {
+    readonly root: "dds-illustrationscene";
+    readonly image: "dds-illustrationscene__image";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const illustrationSceneDefaults: {
+    readonly ratio: "square";
+    readonly placement: "center";
+    readonly alt: "";
+};

package/dist/components/core/illustration-scene/IllustrationScene.types.js

@@ -0,0 +1,8 @@
+// GENERATED from illustration-scene.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationSceneParts = {
+    root: 'dds-illustrationscene',
+    image: 'dds-illustrationscene__image',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const illustrationSceneDefaults = { ratio: 'square', placement: 'center', alt: '' };

package/dist/components/core/illustration-scene/illustration-scene-impl.css

@@ -0,0 +1,40 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did before.
+ */
+
+/*
+ * The photograph fills the frame behind everything; the card sits in the frame's one grid cell
+ * over it. Both share the cell, so the card is placed by the grid's own alignment — centred, or
+ * to one edge — and the photograph is laid underneath by coming first.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationscene > * {
+  grid-area: 1 / 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene .dds-illustrationscene__image {
+  align-self: stretch;
+  justify-self: stretch;
+  display: block;
+}
+
+/*
+ * The card's share of the frame, per shape: a little under half of a wide frame, a little over half
+ * of a square one, most of a tall one. Proportions of the frame rather than measures — a scene is
+ * drawn at whatever width its column gives it, and the composition has to hold at all of them.
+ * Held off the frame's edges by space.inset.card, so a card placed to one side never touches it.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationscene > .dds-illustrationcard {
+  inline-size: 46%;
+  margin-inline: var(--space-inset-card);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio='square'] > .dds-illustrationcard {
+  inline-size: 58%;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-ratio='upright'] > .dds-illustrationcard {
+  inline-size: 78%;
+}

package/dist/components/index.d.ts

@@ -4,6 +4,8 @@ export { AccordionItem, type AccordionItemProps } from './core/accordion-item/Ac
 export { accordionItemParts, accordionItemDefaults } from './core/accordion-item/AccordionItem.types.js';
 export { AspectRatio, type AspectRatioProps } from './layout/aspect-ratio/AspectRatio.js';
 export { aspectRatioParts, aspectRatioDefaults } from './layout/aspect-ratio/AspectRatio.types.js';
+export { Background, type BackgroundProps } from './core/background/Background.js';
+export { backgroundParts, backgroundDefaults } from './core/background/Background.types.js';
 export { Badge, type BadgeProps } from './core/badge/Badge.js';
 export { badgeParts, badgeDefaults } from './core/badge/Badge.types.js';
 export { BottomSheet, type BottomSheetProps } from './core/bottom-sheet/BottomSheet.js';
@@ -52,6 +54,10 @@ export { Grid, type GridProps } from './layout/grid/Grid.js';
 export { gridParts, gridDefaults } from './layout/grid/Grid.types.js';
 export { Icon, type IconProps } from './core/icon/Icon.js';
 export { iconParts, iconDefaults } from './core/icon/Icon.types.js';
+export { IllustrationCard, type IllustrationCardProps } from './core/illustration-card/IllustrationCard.js';
+export { illustrationCardParts, illustrationCardDefaults } from './core/illustration-card/IllustrationCard.types.js';
+export { IllustrationScene, type IllustrationSceneProps } from './core/illustration-scene/IllustrationScene.js';
+export { illustrationSceneParts, illustrationSceneDefaults } from './core/illustration-scene/IllustrationScene.types.js';
 export { LandingHero, type LandingHeroProps } from './blocks/landing-hero/LandingHero.js';
 export { landingHeroParts, landingHeroDefaults } from './blocks/landing-hero/LandingHero.types.js';
 export { Link, type LinkProps } from './core/link/Link.js';

package/dist/components/index.js

@@ -5,6 +5,8 @@ export { AccordionItem } from './core/accordion-item/AccordionItem.js';
 export { accordionItemParts, accordionItemDefaults } from './core/accordion-item/AccordionItem.types.js';
 export { AspectRatio } from './layout/aspect-ratio/AspectRatio.js';
 export { aspectRatioParts, aspectRatioDefaults } from './layout/aspect-ratio/AspectRatio.types.js';
+export { Background } from './core/background/Background.js';
+export { backgroundParts, backgroundDefaults } from './core/background/Background.types.js';
 export { Badge } from './core/badge/Badge.js';
 export { badgeParts, badgeDefaults } from './core/badge/Badge.types.js';
 export { BottomSheet } from './core/bottom-sheet/BottomSheet.js';
@@ -53,6 +55,10 @@ export { Grid } from './layout/grid/Grid.js';
 export { gridParts, gridDefaults } from './layout/grid/Grid.types.js';
 export { Icon } from './core/icon/Icon.js';
 export { iconParts, iconDefaults } from './core/icon/Icon.types.js';
+export { IllustrationCard } from './core/illustration-card/IllustrationCard.js';
+export { illustrationCardParts, illustrationCardDefaults } from './core/illustration-card/IllustrationCard.types.js';
+export { IllustrationScene } from './core/illustration-scene/IllustrationScene.js';
+export { illustrationSceneParts, illustrationSceneDefaults } from './core/illustration-scene/IllustrationScene.types.js';
 export { LandingHero } from './blocks/landing-hero/LandingHero.js';
 export { landingHeroParts, landingHeroDefaults } from './blocks/landing-hero/LandingHero.types.js';
 export { Link } from './core/link/Link.js';