@540deg/ds 0.0.0-stage → 0.1.0

package/dist/components/organisms/Sheet/Sheet.js

@@ -0,0 +1,92 @@
+import { useStepOn, useSteps } from "../Steps/StepsContext.js";
+import { Text } from "../../atoms/Text/Text.js";
+import Sheet_module_default from "./Sheet.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/organisms/Sheet/Sheet.tsx
+/**
+* Sheet is a panel that rises from the bottom edge over the stop, with a veil behind.
+* Inside a Step it opens with the step; it hides as soon as its stop (the step of a timeline,
+* or the whole section) leaves the center of the window.
+*/
+/** The stop the Deck counts for el: its outermost [data-stop], or else its section. */
+function stopOf(el) {
+	let stop = null;
+	for (let cur = el.parentElement?.closest("[data-stop]"); cur; cur = cur.parentElement?.closest("[data-stop]")) stop = cur;
+	return stop ?? el.closest("section");
+}
+function Sheet({ open, kicker, title, description, children, className }) {
+	const stepOn = useStepOn();
+	const { total, guided } = useSteps();
+	const wanted = open ?? (total > 0 && !guided ? false : stepOn);
+	const anchor = useRef(null);
+	const [onScreen, setOnScreen] = useState(true);
+	useEffect(() => {
+		const check = () => {
+			const stop = anchor.current ? stopOf(anchor.current) : null;
+			if (!stop) return setOnScreen(true);
+			const r = stop.getBoundingClientRect();
+			const c = window.innerHeight / 2;
+			setOnScreen(r.top < c && r.bottom > c);
+		};
+		check();
+		window.addEventListener("scroll", check, {
+			passive: true,
+			capture: true
+		});
+		window.addEventListener("resize", check);
+		return () => {
+			window.removeEventListener("scroll", check, { capture: true });
+			window.removeEventListener("resize", check);
+		};
+	}, []);
+	const isOpen = wanted && onScreen;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			ref: anchor,
+			hidden: true
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: Sheet_module_default.veil,
+			"data-open": isOpen ? "" : void 0,
+			"aria-hidden": "true"
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: [Sheet_module_default.sheet, className ?? ""].filter(Boolean).join(" "),
+			"data-open": isOpen ? "" : void 0,
+			"data-scale": "web",
+			"data-sheet": "",
+			"aria-hidden": isOpen ? void 0 : true,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: Sheet_module_default.panel,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: Sheet_module_default.header,
+					children: [
+						kicker ? /* @__PURE__ */ jsx(Text, {
+							variant: "body-s",
+							tone: "secondary",
+							children: kicker
+						}) : null,
+						/* @__PURE__ */ jsx(Text, {
+							as: "h3",
+							variant: "title-m",
+							wrap: "balance",
+							children: title
+						}),
+						description ? /* @__PURE__ */ jsx(Text, {
+							variant: "body-m",
+							tone: "secondary",
+							wrap: "pretty",
+							children: description
+						}) : null
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: Sheet_module_default.body,
+					children
+				})]
+			})
+		})
+	] });
+}
+//#endregion
+export { Sheet };

package/dist/components/organisms/Sheet/Sheet.module.js

@@ -0,0 +1,15 @@
+//#region src/components/organisms/Sheet/Sheet.module.css
+var veil = "_veil_kx9ft_4";
+var sheet = "_sheet_kx9ft_18";
+var panel = "_panel_kx9ft_40";
+var header = "_header_kx9ft_66";
+var body = "_body_kx9ft_72";
+var Sheet_module_default = {
+	veil,
+	sheet,
+	panel,
+	header,
+	body
+};
+//#endregion
+export { body, Sheet_module_default as default, header, panel, sheet, veil };

package/dist/components/organisms/Sheet/index.d.ts

@@ -0,0 +1,3 @@
+export { Sheet } from './Sheet';
+export { SHEET_DEFAULTS } from './types';
+export type { SheetProps } from './types';

package/dist/components/organisms/Sheet/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type SheetProps = {
+    /** Open or closed. Inside a Step, leave it out: the sheet follows the step. */
+    open?: boolean;
+    /** The small line above the title ("Zoom · marzo"). */
+    kicker?: ReactNode;
+    /** The title. */
+    title: ReactNode;
+    /** One sentence under the title. */
+    description?: ReactNode;
+    /** The content: a diagram, cards, a list. */
+    children: ReactNode;
+    className?: string;
+};
+export declare const SHEET_DEFAULTS: {};

package/dist/components/organisms/Sheet/types.js

@@ -0,0 +1,4 @@
+//#region src/components/organisms/Sheet/types.ts
+var SHEET_DEFAULTS = {};
+//#endregion
+export { SHEET_DEFAULTS };

package/dist/components/organisms/Slide/Slide.d.ts

@@ -0,0 +1,6 @@
+import type { SlideProps } from './types';
+/**
+ * Slide is a stop of the talk: a section that fills the screen and centers its content on a
+ * 16:9 stage inside the column. Deck collects every Slide as a stop of the journey.
+ */
+export declare function Slide({ id, tone, full, className, children, ...rest }: SlideProps): import("react").JSX.Element;

package/dist/components/organisms/Slide/Slide.js

@@ -0,0 +1,29 @@
+import Slide_module_default from "./Slide.module.js";
+import { SLIDE_DEFAULTS } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/organisms/Slide/Slide.tsx
+/**
+* Slide is a stop of the talk: a section that fills the screen and centers its content on a
+* 16:9 stage inside the column. Deck collects every Slide as a stop of the journey.
+*/
+function Slide({ id, tone = SLIDE_DEFAULTS.tone, full = SLIDE_DEFAULTS.full, className, children, ...rest }) {
+	const classes = [
+		Slide_module_default.slide,
+		Slide_module_default[`tone-${tone}`],
+		full ? Slide_module_default.full : "",
+		className ?? ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("section", {
+		id,
+		className: classes,
+		"data-slide": "",
+		...rest,
+		children: /* @__PURE__ */ jsx("div", {
+			className: Slide_module_default.stage,
+			"data-slide-stage": "",
+			children
+		})
+	});
+}
+//#endregion
+export { Slide };

package/dist/components/organisms/Slide/Slide.module.js

@@ -0,0 +1,13 @@
+//#region src/components/organisms/Slide/Slide.module.css
+var slide = "_slide_yly5c_4";
+var full = "_full_yly5c_12";
+var stage = "_stage_yly5c_31";
+var Slide_module_default = {
+	slide,
+	full,
+	"tone-default": "_tone-default_yly5c_16",
+	"tone-raised": "_tone-raised_yly5c_20",
+	stage
+};
+//#endregion
+export { Slide_module_default as default, full, slide, stage };

package/dist/components/organisms/Slide/index.d.ts

@@ -0,0 +1,3 @@
+export { Slide } from './Slide';
+export { SLIDE_DEFAULTS, SLIDE_TONES } from './types';
+export type { SlideProps, SlideTone } from './types';

package/dist/components/organisms/Slide/types.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export declare const SLIDE_TONES: readonly ["default", "raised"];
+export type SlideTone = (typeof SLIDE_TONES)[number];
+export type SlideProps = {
+    /** The id: the stop's anchor (#portada, #cierre…). */
+    id: string;
+    /** default paints nothing; raised lifts the band one step (stories, objections, quotes). */
+    tone?: SlideTone;
+    /** Fill the screen (min-height 100svh) and center the content. Off for block titles that go with a photo. */
+    full?: boolean;
+    /** The content, centered on a 16:9 stage inside the column. */
+    children: ReactNode;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<'section'>, 'id' | 'className' | 'children'>;
+export declare const SLIDE_DEFAULTS: {
+    readonly tone: "default";
+    readonly full: true;
+};

package/dist/components/organisms/Slide/types.js

@@ -0,0 +1,8 @@
+//#region src/components/organisms/Slide/types.ts
+var SLIDE_TONES = ["default", "raised"];
+var SLIDE_DEFAULTS = {
+	tone: "default",
+	full: true
+};
+//#endregion
+export { SLIDE_DEFAULTS, SLIDE_TONES };

package/dist/components/organisms/Spotlight/Spotlight.d.ts

@@ -0,0 +1,7 @@
+import type { SpotlightProps } from './types';
+/**
+ * Spotlight lights the piece that holds the center of the window and dims the others to 14 %,
+ * like the sentences of the journey and the months of a timeline. Each one is a stop of the Deck
+ * (data-stop), so the arrow stops on every piece of a pile instead of paging over them.
+ */
+export declare function Spotlight({ children, className }: SpotlightProps): import("react").JSX.Element;

package/dist/components/organisms/Spotlight/Spotlight.js

@@ -0,0 +1,39 @@
+import Spotlight_module_default from "./Spotlight.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/organisms/Spotlight/Spotlight.tsx
+/**
+* Spotlight lights the piece that holds the center of the window and dims the others to 14 %,
+* like the sentences of the journey and the months of a timeline. Each one is a stop of the Deck
+* (data-stop), so the arrow stops on every piece of a pile instead of paging over them.
+*/
+function Spotlight({ children, className }) {
+	const ref = useRef(null);
+	const [on, setOn] = useState(false);
+	useEffect(() => {
+		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		let raf = 0;
+		const tick = () => {
+			const el = ref.current;
+			if (el) {
+				const r = el.getBoundingClientRect();
+				const c = window.innerHeight / 2;
+				const inside = r.top < c && r.bottom > c;
+				const near = Math.abs((r.top + r.bottom) / 2 - c) < window.innerHeight * .3;
+				setOn(inside || near);
+			}
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: [Spotlight_module_default.spotlight, className ?? ""].filter(Boolean).join(" "),
+		"data-stop": "",
+		"data-on": on ? "" : void 0,
+		children
+	});
+}
+//#endregion
+export { Spotlight };

package/dist/components/organisms/Spotlight/Spotlight.module.js

@@ -0,0 +1,5 @@
+//#region src/components/organisms/Spotlight/Spotlight.module.css
+var spotlight = "_spotlight_1p8cr_3";
+var Spotlight_module_default = { spotlight };
+//#endregion
+export { Spotlight_module_default as default, spotlight };

package/dist/components/organisms/Spotlight/index.d.ts

@@ -0,0 +1,2 @@
+export { Spotlight } from './Spotlight';
+export type { SpotlightProps } from './types';

package/dist/components/organisms/Spotlight/types.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type SpotlightProps = {
+    /** The pieces, one after another; only the one in the center of the window stays lit. */
+    children: ReactNode;
+    className?: string;
+};

package/dist/components/organisms/Statements/Statements.d.ts

@@ -0,0 +1,7 @@
+import type { StatementsProps } from './types';
+/**
+ * Statements are the sentences of the journey, stacked: one stop each (Deck splits the slide
+ * with data-stop), in statement, three quarters wide, with an optional ordinal in front.
+ * The sentence holding the center is lit; the told ones dim to 14 % and the ones to come stay hidden.
+ */
+export declare function Statements({ id, sentences, numbered, className }: StatementsProps): import("react").JSX.Element;

package/dist/components/organisms/Statements/Statements.js

@@ -0,0 +1,50 @@
+import { Text } from "../../atoms/Text/Text.js";
+import { Slide } from "../Slide/Slide.js";
+import { useCenterState } from "../../../hooks/useCenterState.js";
+import Statements_module_default from "./Statements.module.js";
+import { STATEMENTS_DEFAULTS } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+//#region src/components/organisms/Statements/Statements.tsx
+/**
+* Statements are the sentences of the journey, stacked: one stop each (Deck splits the slide
+* with data-stop), in statement, three quarters wide, with an optional ordinal in front.
+* The sentence holding the center is lit; the told ones dim to 14 % and the ones to come stay hidden.
+*/
+function Statements({ id = STATEMENTS_DEFAULTS.id, sentences, numbered = STATEMENTS_DEFAULTS.numbered, className }) {
+	return /* @__PURE__ */ jsx(Slide, {
+		id,
+		full: false,
+		className: [Statements_module_default.section, className ?? ""].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsx("div", {
+			className: Statements_module_default.stack,
+			children: sentences.map((sentence, i) => /* @__PURE__ */ jsx(Sentence, {
+				ordinal: numbered ? String(i + 1).padStart(2, "0") : void 0,
+				children: sentence
+			}, i))
+		})
+	});
+}
+function Sentence({ ordinal, children }) {
+	const ref = useRef(null);
+	const state = useCenterState(ref);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: Statements_module_default.stop,
+		"data-stop": "",
+		"data-state": state,
+		children: /* @__PURE__ */ jsxs(Text, {
+			as: "p",
+			variant: "statement",
+			align: "center",
+			wrap: "balance",
+			measure: "wide",
+			children: [ordinal ? /* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				children: [ordinal, " "]
+			}) : null, children]
+		})
+	});
+}
+//#endregion
+export { Statements };

package/dist/components/organisms/Statements/Statements.module.js

@@ -0,0 +1,11 @@
+//#region src/components/organisms/Statements/Statements.module.css
+var section = "_section_pa9rm_4";
+var stack = "_stack_pa9rm_14";
+var stop = "_stop_pa9rm_21";
+var Statements_module_default = {
+	section,
+	stack,
+	stop
+};
+//#endregion
+export { Statements_module_default as default, section, stack, stop };

package/dist/components/organisms/Statements/index.d.ts

@@ -0,0 +1,3 @@
+export { Statements } from './Statements';
+export { STATEMENTS_DEFAULTS } from './types';
+export type { StatementsProps } from './types';

package/dist/components/organisms/Statements/types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export type StatementsProps = {
+    /** The stop's anchor. */
+    id?: string;
+    /** The sentences, in order. Each one is a stop of the journey. */
+    sentences: ReactNode[];
+    /** Show the ordinal ("01 ") before each sentence. Decorative. */
+    numbered?: boolean;
+    className?: string;
+};
+export declare const STATEMENTS_DEFAULTS: {
+    readonly id: "tesis";
+    readonly numbered: true;
+};

package/dist/components/organisms/Statements/types.js

@@ -0,0 +1,7 @@
+//#region src/components/organisms/Statements/types.ts
+var STATEMENTS_DEFAULTS = {
+	id: "tesis",
+	numbered: true
+};
+//#endregion
+export { STATEMENTS_DEFAULTS };

package/dist/components/organisms/Steps/Steps.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { StepProps, StepsProps } from './types';
+/**
+ * Steps is a block the keyboard walks through, step by step, while it is on screen: the same
+ * arrow that moves between stops first lights the next step; when the steps run out, it moves on.
+ * Ported from the talks' [data-pasos] mechanic.
+ */
+export declare function Steps({ total, children, onStep, className }: StepsProps): import("react").JSX.Element;
+/** Step is a piece of a Steps block that shows from a step on (and, optionally, until another). */
+export declare function Step({ from, to, collapse, children, className }: StepProps): import("react").JSX.Element;
+/** PanelStack puts several Steps in the same cell: only the one of the step shows. */
+export declare function PanelStack({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/organisms/Steps/Steps.js

@@ -0,0 +1,117 @@
+import { StepOnContext, StepsContext, useSteps } from "./StepsContext.js";
+import Steps_module_default from "./Steps.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/organisms/Steps/Steps.tsx
+/**
+* Steps is a block the keyboard walks through, step by step, while it is on screen: the same
+* arrow that moves between stops first lights the next step; when the steps run out, it moves on.
+* Ported from the talks' [data-pasos] mechanic.
+*/
+function Steps({ total, children, onStep, className }) {
+	const ref = useRef(null);
+	const [current, setCurrent] = useState(-1);
+	const [guided, setGuided] = useState(false);
+	const go = useCallback((n) => {
+		setCurrent(n);
+		onStep?.(n);
+	}, [onStep]);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const io = new IntersectionObserver((entries) => {
+			if (entries.some((e) => e.isIntersecting) && !guided) {
+				setGuided(true);
+				go(0);
+			}
+		}, { rootMargin: "0px 0px -20% 0px" });
+		io.observe(el);
+		return () => io.disconnect();
+	}, [guided, go]);
+	useEffect(() => {
+		const inView = () => {
+			const el = ref.current;
+			if (!el) return false;
+			const r = el.getBoundingClientRect();
+			return r.top < window.innerHeight * .75 && r.bottom > window.innerHeight * .25;
+		};
+		const onKey = (e) => {
+			if (e.metaKey || e.ctrlKey || e.altKey) return;
+			const t = e.target;
+			if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+			if (document.querySelector("dialog[open]")) return;
+			if (!inView()) return;
+			const k = e.key;
+			const space = k === " " || k === "Spacebar";
+			const fwd = k === "ArrowRight" || k === "ArrowDown" || k === "PageDown" || space && !e.shiftKey;
+			const back = k === "ArrowLeft" || k === "ArrowUp" || k === "PageUp" || space && e.shiftKey;
+			if (!fwd && !back) return;
+			const stop = () => {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+			};
+			if (!guided) {
+				setGuided(true);
+				go(0);
+				stop();
+				return;
+			}
+			if (fwd && current < total) {
+				go(current + 1);
+				stop();
+			} else if (back && current > 0) {
+				go(current - 1);
+				stop();
+			}
+		};
+		document.addEventListener("keydown", onKey, true);
+		return () => document.removeEventListener("keydown", onKey, true);
+	}, [
+		guided,
+		current,
+		total,
+		go
+	]);
+	return /* @__PURE__ */ jsx(StepsContext.Provider, {
+		value: {
+			current: guided ? current : Infinity,
+			total,
+			guided
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: [Steps_module_default.steps, className ?? ""].filter(Boolean).join(" "),
+			"data-steps": "",
+			"data-guided": guided ? "" : void 0,
+			"data-current": guided ? current : void 0,
+			children
+		})
+	});
+}
+/** Step is a piece of a Steps block that shows from a step on (and, optionally, until another). */
+function Step({ from = 0, to, collapse = false, children, className }) {
+	const { current } = useSteps();
+	const on = current >= from && (to === void 0 || current < to);
+	return /* @__PURE__ */ jsx(StepOnContext.Provider, {
+		value: on,
+		children: /* @__PURE__ */ jsx("div", {
+			className: [
+				Steps_module_default.step,
+				collapse ? Steps_module_default.collapse : "",
+				className ?? ""
+			].filter(Boolean).join(" "),
+			"data-on": on ? "" : void 0,
+			"aria-hidden": on ? void 0 : true,
+			children
+		})
+	});
+}
+/** PanelStack puts several Steps in the same cell: only the one of the step shows. */
+function PanelStack({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: [Steps_module_default.stack, className ?? ""].filter(Boolean).join(" "),
+		children
+	});
+}
+//#endregion
+export { PanelStack, Step, Steps };

package/dist/components/organisms/Steps/Steps.module.js

@@ -0,0 +1,13 @@
+//#region src/components/organisms/Steps/Steps.module.css
+var step = "_step_16316_4";
+var steps = "_steps_16316_10";
+var collapse = "_collapse_16316_16";
+var stack = "_stack_16316_31";
+var Steps_module_default = {
+	step,
+	steps,
+	collapse,
+	stack
+};
+//#endregion
+export { collapse, Steps_module_default as default, stack, step, steps };

package/dist/components/organisms/Steps/StepsContext.d.ts

@@ -0,0 +1,11 @@
+export type StepsState = {
+    current: number;
+    total: number;
+    guided: boolean;
+};
+export declare const StepsContext: import("react").Context<StepsState>;
+/** The current step of the surrounding Steps block (Infinity outside one: everything visible). */
+export declare function useSteps(): StepsState;
+export declare const StepOnContext: import("react").Context<boolean>;
+/** Whether the surrounding Step is on (true outside any Step). */
+export declare function useStepOn(): boolean;

package/dist/components/organisms/Steps/StepsContext.js

@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+//#region src/components/organisms/Steps/StepsContext.ts
+var StepsContext = createContext({
+	current: Infinity,
+	total: 0,
+	guided: false
+});
+/** The current step of the surrounding Steps block (Infinity outside one: everything visible). */
+function useSteps() {
+	return useContext(StepsContext);
+}
+var StepOnContext = createContext(true);
+/** Whether the surrounding Step is on (true outside any Step). */
+function useStepOn() {
+	return useContext(StepOnContext);
+}
+//#endregion
+export { StepOnContext, StepsContext, useStepOn, useSteps };

package/dist/components/organisms/Steps/index.d.ts

@@ -0,0 +1,3 @@
+export { PanelStack, Step, Steps } from './Steps';
+export { useStepOn, useSteps } from './StepsContext';
+export type { StepProps, StepsProps } from './types';

package/dist/components/organisms/Steps/types.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export type StepsProps = {
+    /** How many steps the block has (the arrow advances up to this number). */
+    total: number;
+    /** The content, with Step children that appear at their step. */
+    children: ReactNode;
+    /** Called every time the current step changes. */
+    onStep?: (step: number) => void;
+    className?: string;
+};
+export type StepProps = {
+    /** Visible from this step (inclusive). */
+    from?: number;
+    /** Hidden from this step on. Omit to stay visible. */
+    to?: number;
+    /** Take no room at all while hidden (for stacked versions of a block). */
+    collapse?: boolean;
+    /** What appears at this step. */
+    children: ReactNode;
+    className?: string;
+};
+export declare const STEPS_DEFAULTS: {};

package/dist/components/organisms/Story/Story.d.ts

@@ -0,0 +1,6 @@
+import type { StoryProps } from './types';
+/**
+ * Story is a story or an objection: a title, paragraphs in body-l secondary and an optional
+ * bridge in primary, all at half the grid, on a raised band.
+ */
+export declare function Story({ id, title, paragraphs, bridge, kind, tone, className }: StoryProps): import("react").JSX.Element;

package/dist/components/organisms/Story/Story.js

@@ -0,0 +1,43 @@
+import { Text } from "../../atoms/Text/Text.js";
+import { Slide } from "../Slide/Slide.js";
+import Story_module_default from "./Story.module.js";
+import { STORY_DEFAULTS } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/Story/Story.tsx
+/**
+* Story is a story or an objection: a title, paragraphs in body-l secondary and an optional
+* bridge in primary, all at half the grid, on a raised band.
+*/
+function Story({ id, title, paragraphs, bridge, kind = STORY_DEFAULTS.kind, tone = STORY_DEFAULTS.tone, className }) {
+	return /* @__PURE__ */ jsx(Slide, {
+		id,
+		tone,
+		className,
+		"aria-labelledby": `${id}-title`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: Story_module_default.story,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					as: "h2",
+					variant: kind === "objection" ? "title-s" : "title-m",
+					wrap: "balance",
+					id: `${id}-title`,
+					children: title
+				}),
+				paragraphs.map((p, i) => /* @__PURE__ */ jsx(Text, {
+					variant: "body-l",
+					tone: "secondary",
+					wrap: "pretty",
+					children: p
+				}, i)),
+				bridge ? /* @__PURE__ */ jsx(Text, {
+					variant: "body-l",
+					wrap: "pretty",
+					children: bridge
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { Story };

package/dist/components/organisms/Story/Story.module.js

@@ -0,0 +1,5 @@
+//#region src/components/organisms/Story/Story.module.css
+var story = "_story_1wbhn_3";
+var Story_module_default = { story };
+//#endregion
+export { Story_module_default as default, story };