@alveole/storybook 1.9.0 → 2.0.0-alpha

package/dist/components/BarreDeFiltres.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { StorybookFlag } from '../types';
+export type BarreDeFiltresProps = {
+    recherche: string;
+    onRecherche: (recherche: string) => void;
+    tags: string[];
+    tagChoisi: string | null;
+    onTag: (tag: string | null) => void;
+    indicateurChoisi: StorybookFlag['key'] | null;
+    onIndicateur: (indicateur: StorybookFlag['key'] | null) => void;
+};
+/**
+ * La rangee qui reduit la liste : une recherche et deux filtres. Elle defile horizontalement
+ * plutot que de passer a la ligne, pour garder la liste en vue sur un ecran etroit.
+ *
+ * Un seul menu se deroule a la fois, et cet etat ne sort pas d'ici : aucun autre morceau de
+ * l'ecran n'a besoin de savoir quel menu est ouvert.
+ */
+export declare const BarreDeFiltres: ({ recherche, onRecherche, tags, tagChoisi, onTag, indicateurChoisi, onIndicateur, }: BarreDeFiltresProps) => React.JSX.Element;
+//# sourceMappingURL=BarreDeFiltres.d.ts.map

package/dist/components/BarreDeFiltres.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarreDeFiltres.d.ts","sourceRoot":"","sources":["../../src/components/BarreDeFiltres.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAKzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAC9C,YAAY,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,qFAQ5B,mBAAmB,sBA2CrB,CAAC"}

package/dist/components/BarreDeFiltres.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@alveole/components';
+import React from 'react';
+import { Platform, ScrollView } from 'react-native';
+import { ALL_STORY_FLAGS } from '../utils';
+import { FiltreDeroulant } from './FiltreDeroulant';
+import { SearchField } from './SearchField';
+/**
+ * La rangee qui reduit la liste : une recherche et deux filtres. Elle defile horizontalement
+ * plutot que de passer a la ligne, pour garder la liste en vue sur un ecran etroit.
+ *
+ * Un seul menu se deroule a la fois, et cet etat ne sort pas d'ici : aucun autre morceau de
+ * l'ecran n'a besoin de savoir quel menu est ouvert.
+ */
+export const BarreDeFiltres = ({ recherche, onRecherche, tags, tagChoisi, onTag, indicateurChoisi, onIndicateur, }) => {
+    const [menuOuvert, setMenuOuvert] = React.useState(null);
+    const deroule = (menu) => ({
+        ouvert: menuOuvert === menu,
+        onOuvrir: (ouvert) => setMenuOuvert(ouvert ? menu : null),
+    });
+    return (_jsxs(ScrollView, { horizontal: true, nestedScrollEnabled: true, directionalLockEnabled: Platform.OS === 'ios', showsHorizontalScrollIndicator: false, contentContainerStyle: { flexDirection: 'row', gap: 8, alignItems: 'center' }, children: [_jsx(Box, { style: { minWidth: 200 }, children: _jsx(SearchField, { placeholder: "Button, Tabs, Card...", value: recherche, onChangeText: onRecherche, size: "sm" }) }), _jsx(FiltreDeroulant, { libelle: "Tags", options: tags.map(tag => ({ key: tag, label: tag })), choisi: tagChoisi, onChoisir: tag => {
+                    onTag(tag);
+                    setMenuOuvert(null);
+                }, ...deroule('tags') }), _jsx(FiltreDeroulant, { libelle: "Indicateurs", options: ALL_STORY_FLAGS, choisi: indicateurChoisi, onChoisir: indicateur => {
+                    onIndicateur(indicateur);
+                    setMenuOuvert(null);
+                }, ...deroule('indicateurs') })] }));
+};

package/dist/components/ColorSwatch.d.ts

@@ -0,0 +1,10 @@
+import { ColorEntry } from '../screens/paletteSections';
+/**
+ * Une couleur de la palette, cliquable pour copier sa valeur. Le nom affiche est la derniere
+ * marche du chemin : le chemin entier tient rarement sur la largeur d'une pastille, et c'est la
+ * feuille qui identifie le jeton.
+ */
+export declare const ColorSwatch: ({ entry }: {
+    entry: ColorEntry;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=ColorSwatch.d.ts.map

package/dist/components/ColorSwatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.d.ts","sourceRoot":"","sources":["../../src/components/ColorSwatch.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,WAAW;IAAE,KAAK,EAAE,UAAU,CAAA;CAAE,gCAsD3D,CAAC"}

package/dist/components/ColorSwatch.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography, useToast } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { Pressable } from 'react-native';
+import { copier } from '../pressePapiers';
+/**
+ * Une couleur de la palette, cliquable pour copier sa valeur. Le nom affiche est la derniere
+ * marche du chemin : le chemin entier tient rarement sur la largeur d'une pastille, et c'est la
+ * feuille qui identifie le jeton.
+ */
+export const ColorSwatch = ({ entry }) => {
+    const toast = useToast();
+    const { color, radius } = useTheme();
+    // Le repli sur le chemin entier ne sert qu'au typage : `split` rend toujours au moins un
+    // element, donc `pop` ne rend jamais `undefined` ici.
+    const tokenName = entry.path.split('.').pop() ?? entry.path;
+    const handleCopy = () => {
+        copier(entry.value, () => toast.present('Copié !', entry.value, { variant: 'success', duration: 1500 }));
+    };
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: handleCopy, style: { width: 120, marginBottom: 8 }, children: ({ pressed }) => (_jsxs(Box, { style: {
+                borderRadius: radius('md'),
+                overflow: 'hidden',
+                opacity: pressed ? 0.8 : 1,
+                borderWidth: 1,
+                borderColor: color.light.border['default-grey'],
+            }, children: [_jsx(Box, { style: { height: 56, backgroundColor: entry.value } }), _jsxs(Box, { style: {
+                        paddingHorizontal: 8,
+                        paddingVertical: 6,
+                        backgroundColor: color.light.background['default-grey'],
+                    }, children: [_jsx(Typography, { style: { fontSize: 11, fontWeight: '600', color: color.light.text['title-grey'], lineHeight: 14 }, numberOfLines: 1, children: tokenName }), _jsx(Typography, { style: {
+                                fontSize: 10,
+                                color: color.light.text['mention-grey'],
+                                fontFamily: 'monospace',
+                                lineHeight: 14,
+                                marginTop: 2,
+                            }, numberOfLines: 1, children: entry.value })] })] })) }));
+};

package/dist/components/DocFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocFooter.d.ts","sourceRoot":"","sources":["../../src/components/DocFooter.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,mCAoBrB,CAAC"}
+{"version":3,"file":"DocFooter.d.ts","sourceRoot":"","sources":["../../src/components/DocFooter.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,mCAuBrB,CAAC"}

package/dist/components/DocFooter.js

@@ -3,7 +3,7 @@ import { ALVEOLE_COMPONENTS_VERSION, Box, Typography } from '@alveole/components
 import { useTheme } from '@alveole/theme';
 export const DocFooter = () => {
     const { color, text } = useTheme();
-    return (_jsx(Box, { style: {
+    return (_jsx(Box, { tag: "footer", style: {
             borderTopWidth: 1,
             borderTopColor: color.light.border['default-grey'],
             paddingTop: 12,

package/dist/components/EcranDeCatalogue.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { PageTitleProps } from './PageTitle';
+export type EcranDeCatalogueProps = {
+    title: string;
+    description: string;
+    sidebar?: React.ReactNode;
+    beforeContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
+    breadcrumbsProps?: PageTitleProps['breadcrumbsProps'];
+    /** Les titres des sections de la page : fournis, l'ecran prend la mise en page d'une fiche, sommaire a droite. */
+    sommaire?: string[];
+    children: React.ReactNode;
+};
+/** La section `theme` n'a pas d'ecran a elle : son segment du fil d'Ariane ne mene nulle part. */
+export declare const filDuTheme: PageTitleProps['breadcrumbsProps'];
+/** L'echafaudage d'un ecran du catalogue : la page, sa zone sur toute la grille, puis son titre. */
+export declare const EcranDeCatalogue: ({ title, description, sidebar, beforeContent, footerContent, breadcrumbsProps, sommaire, children, }: EcranDeCatalogueProps) => React.JSX.Element;
+//# sourceMappingURL=EcranDeCatalogue.d.ts.map

package/dist/components/EcranDeCatalogue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EcranDeCatalogue.d.ts","sourceRoot":"","sources":["../../src/components/EcranDeCatalogue.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,gBAAgB,CAAC,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACtD,kHAAkH;IAClH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,UAAU,EAAE,cAAc,CAAC,kBAAkB,CAEzD,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,gBAAgB,GAAI,sGAS9B,qBAAqB,sBA4BvB,CAAC"}

package/dist/components/EcranDeCatalogue.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Page } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { PageTitle } from './PageTitle';
+import { ScreenZone } from './ScreenZone';
+import { StoryLayout } from './StoryLayout';
+import { StorySummary } from './StorySummary';
+/** La section `theme` n'a pas d'ecran a elle : son segment du fil d'Ariane ne mene nulle part. */
+export const filDuTheme = {
+    getHref: (segment, _index, path) => (segment === 'theme' ? null : path),
+};
+/** L'echafaudage d'un ecran du catalogue : la page, sa zone sur toute la grille, puis son titre. */
+export const EcranDeCatalogue = ({ title, description, sidebar, beforeContent, footerContent, breadcrumbsProps, sommaire, children, }) => {
+    const { grilles, spacingValue } = useTheme();
+    return (_jsx(Page, { scrollable: true, title: title, description: description, sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, children: sommaire ? (_jsx(StoryLayout, { sommaire: _jsx(StorySummary, { entrees: sommaire }), children: _jsxs(Box, { display: "flex", gap: spacingValue('6W'), children: [_jsx(PageTitle, { title: title, breadcrumbsProps: breadcrumbsProps }), children] }) })) : (_jsxs(ScreenZone, { largeur: grilles['12 colonnes'], children: [_jsx(PageTitle, { title: title, breadcrumbsProps: breadcrumbsProps }), children] })) }));
+};

package/dist/components/EnTeteDeFiche.d.ts

@@ -0,0 +1,10 @@
+import { StorybookMeta } from '../types';
+/**
+ * Ce que la fiche annonce : son titre et sa description. Les tags, les indicateurs et le lien
+ * Figma documentent l'onglet qu'on regarde, pas la fiche en general : ils vivent sous la barre
+ * d'onglets, dans `ExemplesDeLaStory`, comme chez Primer.
+ */
+export declare const EnTeteDeFiche: ({ meta }: {
+    meta: StorybookMeta;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=EnTeteDeFiche.d.ts.map

package/dist/components/EnTeteDeFiche.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnTeteDeFiche.d.ts","sourceRoot":"","sources":["../../src/components/EnTeteDeFiche.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,gCAW9D,CAAC"}

package/dist/components/EnTeteDeFiche.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, MarkdownDescription } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { PageTitle } from './PageTitle';
+/**
+ * Ce que la fiche annonce : son titre et sa description. Les tags, les indicateurs et le lien
+ * Figma documentent l'onglet qu'on regarde, pas la fiche en general : ils vivent sous la barre
+ * d'onglets, dans `ExemplesDeLaStory`, comme chez Primer.
+ */
+export const EnTeteDeFiche = ({ meta }) => {
+    const { color } = useTheme();
+    return (_jsxs(Box, { display: "flex", gap: 16, children: [_jsx(PageTitle, { title: meta.title }), _jsx(MarkdownDescription, { taille: "LG", color: color.light.text['mention-grey'], children: meta.description })] }));
+};

package/dist/components/ExampleBlock.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type ExampleBlockProps = {
+    /** La démonstration : le composant rendu tel qu'une application cliente l'obtiendrait. */
+    children: React.ReactNode;
+    /** Le code de l'exemple, entier. Ce qui est replié reste copiable en totalité. */
+    source?: string | null;
+    /** Les gabarits sont des écrans entiers : ils réclament de la hauteur, pas un centrage. */
+    pleinEcran?: boolean;
+};
+/** Le bloc d'exemple : une démonstration et sa source, dans un seul cadre. */
+export declare const ExampleBlock: ({ children, source, pleinEcran }: ExampleBlockProps) => React.JSX.Element;
+//# sourceMappingURL=ExampleBlock.d.ts.map

package/dist/components/ExampleBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleBlock.d.ts","sourceRoot":"","sources":["../../src/components/ExampleBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6F1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0FAA0F;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2FAA2F;IAC3F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,YAAY,GAAI,kCAA0C,iBAAiB,sBAkCvF,CAAC"}

package/dist/components/ExampleBlock.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, Highlight, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+import { decouperSource } from '../storySource';
+/** Au delà, la source prend plus de place que ce qu'elle documente. */
+const LIGNES_VISIBLES = 12;
+/** L'écart entre deux points de la trame : assez lâche pour rester un fond, pas une texture. */
+const PAS_DE_LA_TRAME = 16;
+/**
+ * La scène de la démonstration : le composant y est posé comme dans une application.
+ *
+ * Son fond reste celui de la page : le gris appartient au bloc de code juste en dessous, et
+ * le reprendre ici effacerait la frontière entre ce qu'on montre et la façon de l'écrire. La
+ * trame dit « surface de démonstration » sans dépenser une seconde valeur de fond.
+ */
+const Scene = ({ children, pleinEcran }) => {
+    const { color } = useTheme();
+    return (_jsx(Box, { p: '150', style: {
+            backgroundColor: color.light.background['default-grey'],
+            backgroundImage: `radial-gradient(circle, ${color.light.border['default-grey']} 1px, transparent 1px)`,
+            backgroundSize: `${PAS_DE_LA_TRAME}px ${PAS_DE_LA_TRAME}px`,
+            alignItems: pleinEcran ? undefined : 'center',
+            justifyContent: 'center',
+            minHeight: pleinEcran ? 420 : 160,
+        }, children: children }));
+};
+/**
+ * La barre qui sépare la démonstration de sa source : elle dit où finit ce qu'on montre et
+ * où commence la façon de l'écrire, ce qu'une ligne seule ne dirait pas.
+ */
+const BarreDeSource = ({ onCopier }) => {
+    const { color, spacingValue, text } = useTheme();
+    return (_jsxs(Box, { borderColor: color.light.border['default-grey'], style: {
+            alignItems: 'center',
+            backgroundColor: color.light.background['alt-grey'],
+            borderTopWidth: 1,
+            borderBottomWidth: 1,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            // Les côtés s'alignent sur la colonne du code, qui est le contenu principal du bas
+            // du bloc ; la hauteur reste au plus juste de ce que la barre porte.
+            paddingLeft: spacingValue('2W'),
+            paddingRight: spacingValue('2W'),
+            paddingTop: spacingValue('1W'),
+            paddingBottom: spacingValue('1W'),
+        }, children: [_jsx(Typography, { style: { ...text['Corps de texte'].XS.CapsBold, color: color.light.text['mention-grey'] }, children: "tsx" }), _jsx(Button, { title: "Copier", size: "sm", variant: "tertiary", leading: "Copy", onPress: onCopier })] }));
+};
+const CommandeDeRepli = ({ deplie, onBascule }) => {
+    const { color } = useTheme();
+    return (_jsx(Box, { borderColor: color.light.border['default-grey'], style: {
+            alignItems: 'center',
+            backgroundColor: color.light.background['alt-grey'],
+            borderTopWidth: 1,
+        }, children: _jsx(Button, { title: deplie ? 'Replier' : 'Afficher tout', size: "sm", variant: "tertiary", trailing: deplie ? 'ChevronUp' : 'ChevronDown', onPress: onBascule }) }));
+};
+/** Le bloc d'exemple : une démonstration et sa source, dans un seul cadre. */
+export const ExampleBlock = ({ children, source, pleinEcran = false }) => {
+    const { color, radius } = useTheme();
+    const [deplie, setDeplie] = React.useState(false);
+    const { visible, tronque } = decouperSource(source ?? '', LIGNES_VISIBLES);
+    // La source entière, repliée ou non : copier un extrait tronqué donnerait du code qui ne
+    // compile pas, ce qui est pire que pas de bouton.
+    const copier = () => {
+        if (source && typeof navigator !== 'undefined')
+            navigator.clipboard?.writeText(source);
+    };
+    return (_jsxs(Box, { borderColor: color.light.border['default-grey'], borderRadius: radius('md'), borderWidth: 1, style: { overflow: 'hidden' }, children: [_jsx(Scene, { pleinEcran: pleinEcran, children: children }), source ? (_jsxs(_Fragment, { children: [_jsx(BarreDeSource, { onCopier: copier }), _jsx(Highlight, { language: "tsx", variant: "embedded", children: deplie ? source : visible }), tronque ? _jsx(CommandeDeRepli, { deplie: deplie, onBascule: () => setDeplie(!deplie) }) : null] })) : null] }));
+};

package/dist/components/ExemplesDeLaStory.d.ts

@@ -0,0 +1,10 @@
+import { Exemple, StorybookModule } from '../types';
+export type ExemplesDeLaStoryProps = {
+    story: StorybookModule;
+    exemples: Exemple[];
+    /** Un gabarit se montre seul, en pleine page : ni titre ni description au-dessus du cadre. */
+    gabarit: boolean;
+};
+/** Les demonstrations d'une fiche, les unes sous les autres, sous le statut de la fiche. */
+export declare const ExemplesDeLaStory: ({ story, exemples, gabarit }: ExemplesDeLaStoryProps) => import("react").JSX.Element;
+//# sourceMappingURL=ExemplesDeLaStory.d.ts.map

package/dist/components/ExemplesDeLaStory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExemplesDeLaStory.d.ts","sourceRoot":"","sources":["../../src/components/ExemplesDeLaStory.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAuEnE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,8FAA8F;IAC9F,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,gCAUrF,CAAC"}

package/dist/components/ExemplesDeLaStory.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnchorHeading, Box, MarkdownDescription, Tag, Typography } from '@alveole/components';
+import { FOCUS_ATTRIBUTE, useTheme } from '@alveole/theme';
+import { descriptionDeLExemple, sourceDeLExemple } from '../screens/sourcesDExemples';
+import { getStoryFlags } from '../utils';
+import { ExampleBlock } from './ExampleBlock';
+/**
+ * Une demonstration. Le titre et la description appartiennent au document : ils restent dans le
+ * flux de la page, hors de tout cadre, pour pouvoir etre ancres et repris dans un sommaire. Le
+ * cadre n'entoure que ce qui est montre.
+ */
+const UnExemple = ({ story, nom, Rendu, gabarit }) => {
+    const { text } = useTheme();
+    const description = descriptionDeLExemple(story, nom);
+    return (_jsxs(Box, { display: "flex", gap: 12, children: [!gabarit ? (_jsxs(Box, { display: "flex", gap: 6, children: [_jsx(AnchorHeading, { style: text.Titres['H5 - XS'], children: nom }), description ? _jsx(MarkdownDescription, { children: description }) : null] })) : null, _jsx(ExampleBlock, { source: sourceDeLExemple(story, nom), pleinEcran: gabarit, children: _jsx(Rendu, {}) })] }));
+};
+/**
+ * Les tags et le lien Figma : ils documentent l'onglet Examples qu'on regarde, pas la fiche en
+ * general, et vivent sous la barre d'onglets comme chez Primer plutot qu'au-dessus, dans un
+ * en-tete commun a tous les onglets.
+ */
+const StatutDeLaFiche = ({ meta }) => {
+    const { color, text } = useTheme();
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Tag, { size: "md", children: tag }, tag))), getStoryFlags(meta).map(flag => (_jsx(Tag, { size: "md", children: flag.label }, flag.key)))] }), meta.figmaURL ? (_jsx("a", { href: meta.figmaURL, rel: "noreferrer", style: { textDecoration: 'none' }, target: "_blank", [FOCUS_ATTRIBUTE]: 'ring', children: _jsx(Typography, { style: { ...text['Corps de texte'].SM.Bold, color: color.light.text['action-high-primary'] }, children: "Ouvrir Figma" }) })) : null] }));
+};
+/** Les demonstrations d'une fiche, les unes sous les autres, sous le statut de la fiche. */
+export const ExemplesDeLaStory = ({ story, exemples, gabarit }) => (_jsxs(Box, { display: "flex", gap: 40, mt: '5W', children: [_jsx(StatutDeLaFiche, { meta: story.default }), exemples.map(([nom, Rendu]) => (_jsx(UnExemple, { story: story, nom: nom, Rendu: Rendu, gabarit: gabarit }, nom)))] }));

package/dist/components/FiltreDeroulant.d.ts

@@ -0,0 +1,22 @@
+export type OptionDeFiltre<Cle extends string = string> = {
+    key: Cle;
+    label: string;
+};
+export type FiltreDeroulantProps<Cle extends string> = {
+    /** Ce que le bouton annonce tant qu'aucune option n'est choisie. */
+    libelle: string;
+    options: readonly OptionDeFiltre<Cle>[];
+    choisi: Cle | null;
+    /** Rend la cle choisie, ou `null` quand l'option reprise annule le filtre. */
+    onChoisir: (choisi: Cle | null) => void;
+    ouvert: boolean;
+    onOuvrir: (ouvert: boolean) => void;
+};
+/**
+ * Un filtre a choix unique, presente comme un bouton qui deroule ses options. Le bouton porte
+ * l'option choisie plutot que son libelle generique : une fois le menu referme, c'est la seule
+ * trace du filtre actif. Reprendre l'option deja choisie l'annule, sans quoi on ne pourrait
+ * plus revenir a la liste entiere.
+ */
+export declare const FiltreDeroulant: <Cle extends string>({ libelle, options, choisi, onChoisir, ouvert, onOuvrir, }: FiltreDeroulantProps<Cle>) => import("react").JSX.Element;
+//# sourceMappingURL=FiltreDeroulant.d.ts.map

package/dist/components/FiltreDeroulant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FiltreDeroulant.d.ts","sourceRoot":"","sources":["../../src/components/FiltreDeroulant.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,IAAI;IAAE,GAAG,EAAE,GAAG,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtF,MAAM,MAAM,oBAAoB,CAAC,GAAG,SAAS,MAAM,IAAI;IACrD,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,SAAS,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC;IACnB,8EAA8E;IAC9E,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,GAAG,SAAS,MAAM,EAAE,4DAOjD,oBAAoB,CAAC,GAAG,CAAC,gCA0B3B,CAAC"}

package/dist/components/FiltreDeroulant.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionMenu, Button } from '@alveole/components';
+import { choixApres, libelleDuFiltre } from './choixDuFiltre';
+/**
+ * Un filtre a choix unique, presente comme un bouton qui deroule ses options. Le bouton porte
+ * l'option choisie plutot que son libelle generique : une fois le menu referme, c'est la seule
+ * trace du filtre actif. Reprendre l'option deja choisie l'annule, sans quoi on ne pourrait
+ * plus revenir a la liste entiere.
+ */
+export const FiltreDeroulant = ({ libelle, options, choisi, onChoisir, ouvert, onOuvrir, }) => (_jsx(ActionMenu, { placement: "bottom-start", scrollable: false, open: ouvert, setOpen: onOuvrir, renderTrigger: () => (_jsx(Button, { variant: "secondary", title: libelleDuFiltre({ libelle, options, choisi }), trailing: "ChevronDown", size: "sm", selected: choisi !== null, active: ouvert })), children: options.map(option => (_jsx(ActionMenu.Item, { title: option.label, selected: choisi === option.key, onPress: () => onChoisir(choixApres(choisi, option.key)) }, option.key))) }));

package/dist/components/GrilleDeFiches.d.ts

@@ -0,0 +1,15 @@
+import { StorybookModule } from '../types';
+export type GroupeDeFiches = readonly [tag: string, fiches: StorybookModule[]];
+export type GrilleDeFichesProps = {
+    groupes: readonly GroupeDeFiches[];
+    /** La largeur d'une carte, calculee une fois pour toute la grille. */
+    largeurDeFiche: string;
+    getStoryHref: (story: StorybookModule) => string;
+    messageVide: string;
+};
+/**
+ * Les fiches, rangees sous le tag qui les groupe. Une carte s'etire sur la hauteur de sa
+ * rangee pour que les bas de cartes s'alignent malgre des descriptions inegales.
+ */
+export declare const GrilleDeFiches: ({ groupes, largeurDeFiche, getStoryHref, messageVide }: GrilleDeFichesProps) => import("react").JSX.Element | import("react").JSX.Element[];
+//# sourceMappingURL=GrilleDeFiches.d.ts.map

package/dist/components/GrilleDeFiches.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrilleDeFiches.d.ts","sourceRoot":"","sources":["../../src/components/GrilleDeFiches.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;AAE/E,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC,sEAAsE;IACtE,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;IACjD,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,wDAAwD,mBAAmB,gEAiBzG,CAAC"}

package/dist/components/GrilleDeFiches.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { StoryCard } from './StoryCard';
+/**
+ * Les fiches, rangees sous le tag qui les groupe. Une carte s'etire sur la hauteur de sa
+ * rangee pour que les bas de cartes s'alignent malgre des descriptions inegales.
+ */
+export const GrilleDeFiches = ({ groupes, largeurDeFiche, getStoryHref, messageVide }) => {
+    const { text } = useTheme();
+    if (groupes.length === 0)
+        return _jsx(Typography, { style: text['Corps de texte'].MD.Regular, children: messageVide });
+    return groupes.map(([tag, fiches]) => (_jsxs(Box, { display: "flex", gap: 16, children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: tag }), _jsx(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 16, children: fiches.map(fiche => (_jsx(Box, { style: { alignSelf: 'stretch', width: largeurDeFiche }, children: _jsx(StoryCard, { story: fiche, href: getStoryHref(fiche) }) }, fiche.default.title))) })] }, tag)));
+};

package/dist/components/MenuCard.d.ts

@@ -0,0 +1,9 @@
+type MenuCardProps = {
+    title: string;
+    description: string;
+    onPress: () => void;
+};
+/** Une entree de menu du kit : un titre, ce qu'on trouve derriere, et le moyen d'y aller. */
+export declare const MenuCard: ({ title, description, onPress }: MenuCardProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MenuCard.d.ts.map

package/dist/components/MenuCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuCard.d.ts","sourceRoot":"","sources":["../../src/components/MenuCard.tsx"],"names":[],"mappings":"AAGA,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,6FAA6F;AAC7F,eAAO,MAAM,QAAQ,GAAI,iCAAiC,aAAa,gCAWtE,CAAC"}

package/dist/components/MenuCard.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+/** Une entree de menu du kit : un titre, ce qu'on trouve derriere, et le moyen d'y aller. */
+export const MenuCard = ({ title, description, onPress }) => {
+    const { text } = useTheme();
+    return (_jsx(Card, { onPress: onPress, children: _jsxs(Box, { display: "flex", gap: 8, p: '150', children: [_jsx(Typography, { style: text.Titres['H4 - SM'], children: title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }));
+};

package/dist/components/PageTitle.d.ts

@@ -0,0 +1,19 @@
+import { Breadcrumbs } from '@alveole/components';
+import React from 'react';
+export type PageTitleProps = {
+    /** Titre de la page du catalogue. */
+    title: string;
+    /** Props passées au Breadcrumbs (rootLabel, getLabel, getHref). */
+    breadcrumbsProps?: React.ComponentProps<typeof Breadcrumbs>;
+};
+/**
+ * Le titre d'une page du catalogue, fil d'Ariane compris.
+ *
+ * Le catalogue est un site de documentation : il ne titre pas ses pages avec `PageHeader`, qui
+ * est l'en-tête des écrans d'une application cliente et se lit dans le registre applicatif.
+ * Primer sert sa documentation avec un paquet à part, Atlassian avec un style hors de son
+ * échelle, Uber avec son échelle mais sans passer par un en-tête d'application. Ici le titre
+ * prend le cran le plus haut de notre échelle, celui que les deux premiers emploient : 40.
+ */
+export declare const PageTitle: ({ title, breadcrumbsProps }: PageTitleProps) => React.JSX.Element;
+//# sourceMappingURL=PageTitle.d.ts.map

package/dist/components/PageTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTitle.d.ts","sourceRoot":"","sources":["../../src/components/PageTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,WAAW,EAAc,MAAM,qBAAqB,CAAC;AAEnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,cAAc,GAAG;IAC3B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;CAC7D,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,GAAI,6BAA6B,cAAc,sBAWpE,CAAC"}

package/dist/components/PageTitle.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Breadcrumbs, Typography } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+/**
+ * Le titre d'une page du catalogue, fil d'Ariane compris.
+ *
+ * Le catalogue est un site de documentation : il ne titre pas ses pages avec `PageHeader`, qui
+ * est l'en-tête des écrans d'une application cliente et se lit dans le registre applicatif.
+ * Primer sert sa documentation avec un paquet à part, Atlassian avec un style hors de son
+ * échelle, Uber avec son échelle mais sans passer par un en-tête d'application. Ici le titre
+ * prend le cran le plus haut de notre échelle, celui que les deux premiers emploient : 40.
+ */
+export const PageTitle = ({ title, breadcrumbsProps }) => {
+    const { spacingValue, text, color } = useTheme();
+    return (_jsxs(Box, { display: "flex", gap: spacingValue('4W'), children: [_jsx(Breadcrumbs, { ...breadcrumbsProps }), _jsx(Typography, { tag: "h1", style: { ...text.Titres['H1 - XL'], color: color.light.text['title-grey'] }, children: title })] }));
+};

package/dist/components/ScreenZone.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export type ScreenZoneProps = {
+    children: React.ReactNode;
+    /**
+     * La largeur de la zone, prise dans la grille. Elle dépend de ce que la page contient :
+     * une largeur de lecture pour du texte, la grille entière pour une liste de cartes.
+     */
+    largeur: number;
+};
+/**
+ * Le repère principal d'un écran du catalogue : l'enveloppe porte les marges de la page,
+ * la zone porte sa largeur et se centre dans ce qui reste. C'est la construction du `main`
+ * de Primer, padding puis maxWidth puis marges automatiques.
+ *
+ * `tag` n'a pas d'effet sur natif. Sans ce repère, un lecteur d'écran ne peut pas sauter
+ * directement au contenu ; une <section> sans nom accessible n'en est pas un, d'où <main>.
+ */
+export declare const ScreenZone: ({ children, largeur }: ScreenZoneProps) => React.JSX.Element;
+//# sourceMappingURL=ScreenZone.d.ts.map

package/dist/components/ScreenZone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenZone.d.ts","sourceRoot":"","sources":["../../src/components/ScreenZone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,uBAAuB,eAAe,sBAoChE,CAAC"}

package/dist/components/ScreenZone.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+/**
+ * Le repère principal d'un écran du catalogue : l'enveloppe porte les marges de la page,
+ * la zone porte sa largeur et se centre dans ce qui reste. C'est la construction du `main`
+ * de Primer, padding puis maxWidth puis marges automatiques.
+ *
+ * `tag` n'a pas d'effet sur natif. Sans ce repère, un lecteur d'écran ne peut pas sauter
+ * directement au contenu ; une <section> sans nom accessible n'en est pas un, d'où <main>.
+ */
+export const ScreenZone = ({ children, largeur }) => {
+    const { isVariant, spacingValue } = useTheme();
+    // Les marges d'une page de documentation valent le double du padding qu'`externalPadding`
+    // pose dans une application cliente : la page n'a que du texte à porter. Sur un téléphone
+    // il n'y a plus de vide à répartir, et la même bascule que le thème rend la largeur à la
+    // lecture plutôt qu'aux côtés.
+    const marge = isVariant('mobile')
+        ? { cote: spacingValue('3W'), haut: spacingValue('6W') }
+        : { cote: spacingValue('6W'), haut: spacingValue('12W') };
+    return (_jsx(Box, { tag: "main", style: {
+            display: 'flex',
+            paddingBottom: spacingValue('3W'),
+            paddingLeft: marge.cote,
+            paddingRight: marge.cote,
+            paddingTop: marge.haut,
+        }, children: _jsx(Box, { style: {
+                display: 'flex',
+                gap: spacingValue('3W'),
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                maxWidth: largeur,
+                width: '100%',
+            }, children: children }) }));
+};

package/dist/components/StoryCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryCard.d.ts","sourceRoot":"","sources":["../../src/components/StoryCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,eAAe,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,gCA6BxD,CAAC"}
+{"version":3,"file":"StoryCard.d.ts","sourceRoot":"","sources":["../../src/components/StoryCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI3C,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,eAAe,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,gCA8BxD,CAAC"}

package/dist/components/StoryCard.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { A, Badge, Box, Card, Typography } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import { getStoryFlags, stripMarkdown } from '../utils';
+import { hauteurDeCarte } from './hauteurDeCarte';
 export const StoryCard = ({ story, href }) => {
     const { text, isVariant } = useTheme();
     const meta = story.default;
     const flags = getStoryFlags(meta);
+    const height = hauteurDeCarte(isVariant('mobile'));
     const description = meta.shortDescription ?? stripMarkdown(meta.description);
-    return (_jsx(A, { href: href, style: { height: isVariant('mobile') ? undefined : '100%' }, children: _jsx(Card, { height: isVariant('mobile') ? undefined : '100%', children: _jsxs(Box, { display: "flex", gap: 12, p: '100', style: { height: isVariant('mobile') ? undefined : '100%' }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Badge, { variant: "info", size: "sm", style: { marginRight: 0 }, children: tag }, tag))), flags.map(flag => (_jsx(Badge, { variant: "default", size: "sm", style: { marginRight: 0 }, children: flag.label }, flag.key)))] }), _jsx(Typography, { style: text.Titres['H5 - XS'], children: meta.title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }) }));
+    return (_jsx(A, { href: href, style: { height }, children: _jsx(Card, { height: height, children: _jsxs(Box, { display: "flex", gap: 12, p: '100', style: { height }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: 8, children: [meta.tags.map(tag => (_jsx(Badge, { variant: "info", size: "sm", style: { marginRight: 0 }, children: tag }, tag))), flags.map(flag => (_jsx(Badge, { variant: "default", size: "sm", style: { marginRight: 0 }, children: flag.label }, flag.key)))] }), _jsx(Typography, { style: text.Titres['H5 - XS'], children: meta.title }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: description })] }) }) }));
 };

package/dist/components/StoryLayout.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type StoryLayoutProps = {
+    /** Le corps de la fiche : sa largeur est ce que la zone laisse, jamais un nombre choisi. */
+    children: React.ReactNode;
+    /** La table des matières de la page, servie avant le corps. */
+    sommaire?: React.ReactNode;
+};
+/**
+ * La mise en page d'une fiche : neuf colonnes de zone, dont deux pour le sommaire et une
+ * gouttière, le reste revenant à la lecture. Le sommaire est déclaré avant le corps et rendu
+ * à droite, comme le fait le thème de documentation de Primer.
+ */
+export declare const StoryLayout: ({ children, sommaire }: StoryLayoutProps) => React.JSX.Element;
+//# sourceMappingURL=StoryLayout.d.ts.map

package/dist/components/StoryLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryLayout.d.ts","sourceRoot":"","sources":["../../src/components/StoryLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4FAA4F;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,wBAAwB,gBAAgB,sBA0BnE,CAAC"}

package/dist/components/StoryLayout.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { Platform } from 'react-native';
+import { ScreenZone } from './ScreenZone';
+/**
+ * La mise en page d'une fiche : neuf colonnes de zone, dont deux pour le sommaire et une
+ * gouttière, le reste revenant à la lecture. Le sommaire est déclaré avant le corps et rendu
+ * à droite, comme le fait le thème de documentation de Primer.
+ */
+export const StoryLayout = ({ children, sommaire }) => {
+    const { grilles, isVariant, spacingValue } = useTheme();
+    // Le sommaire ne cède pas ses deux colonnes : sous la largeur bureau il ne resterait pas
+    // assez pour ce que la fiche documente, des blocs de code. Primer retire sa table des
+    // matières plutôt que de la comprimer, et rend la largeur à la lecture.
+    const voletVisible = sommaire != null && isVariant('desktop');
+    // `position: sticky` n'existe pas nativement (RN n'accepte que absolute/relative) : sans le
+    // garde-fou web, la valeur traverserait telle quelle jusqu'à iOS/Android.
+    const collant = Platform.OS === 'web' ? { position: 'sticky', top: spacingValue('3W') } : {};
+    return (_jsx(ScreenZone, { largeur: grilles['9 colonnes'], children: _jsxs(Box, { style: { flexDirection: 'row-reverse', gap: spacingValue('3W') }, children: [voletVisible ? (_jsx(Box, { style: { flexShrink: 0, width: grilles['2 colonnes'] }, children: _jsx(Box, { style: collant, children: sommaire }) })) : null, _jsx(Box, { style: { flexGrow: 1, flexShrink: 1, minWidth: 0 }, children: children })] }) }));
+};

package/dist/components/StorySummary.d.ts

@@ -0,0 +1,7 @@
+export type StorySummaryProps = {
+    /** Les titres des sections de la page, dans l'ordre où elle les présente. */
+    entrees: string[];
+};
+/** Le sommaire d'une page : une entrée par section, vers l'ancre que pose son titre. */
+export declare const StorySummary: ({ entrees }: StorySummaryProps) => import("react").JSX.Element;
+//# sourceMappingURL=StorySummary.d.ts.map