@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/core/Highlight/Highlight.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Highlight.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;CAUnB,CAAC"}
+{"version":3,"file":"Highlight.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAsBpB,CAAC"}

package/dist/core/Highlight/Highlight.styles.js

@@ -1,12 +1,23 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(() => ({
-    highlightContainer: {
-        width: '100%',
-    },
-    highlight: {
+export const useStyles = makeStyles(({ color, radius, spacingValue }) => {
+    const base = {
         overflow: 'scroll',
-        borderRadius: 8,
-        padding: 16,
+        padding: spacingValue('2W'),
         width: '100%',
-    },
-}));
+        backgroundColor: color.light.background['alt-grey'],
+    };
+    return {
+        highlightContainer: {
+            width: '100%',
+        },
+        highlight: {
+            ...base,
+            borderRadius: radius('md'),
+            borderWidth: 1,
+            borderColor: color.light.border['default-grey'],
+        },
+        // Composé dans un cadre qui le délimite déjà : ni bordure ni rayon, sinon deux bordures
+        // s'emboîtent et le coin arrondi intérieur découpe celui du cadre.
+        highlightEmbedded: base,
+    };
+});

package/dist/core/Highlight/Highlight.syntax.d.ts

@@ -0,0 +1,3 @@
+import Prism from 'react-syntax-highlighter/dist/esm/prism-light';
+export default Prism;
+//# sourceMappingURL=Highlight.syntax.d.ts.map

package/dist/core/Highlight/Highlight.syntax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.syntax.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.syntax.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,MAAM,+CAA+C,CAAC;AA8BlE,eAAe,KAAK,CAAC"}

package/dist/core/Highlight/Highlight.syntax.js

@@ -0,0 +1,48 @@
+/// <reference path="./jsdoc.d.ts" />
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
+import cssExtras from 'react-syntax-highlighter/dist/esm/languages/prism/css-extras';
+import graphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql';
+import javadoclike from 'react-syntax-highlighter/dist/esm/languages/prism/javadoclike';
+import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
+import jsExtras from 'react-syntax-highlighter/dist/esm/languages/prism/js-extras';
+import jsTemplates from 'react-syntax-highlighter/dist/esm/languages/prism/js-templates';
+import jsdoc from 'react-syntax-highlighter/dist/esm/languages/prism/jsdoc';
+import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
+import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
+import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
+import regex from 'react-syntax-highlighter/dist/esm/languages/prism/regex';
+import ruby from 'react-syntax-highlighter/dist/esm/languages/prism/ruby';
+import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
+import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
+import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
+import Prism from 'react-syntax-highlighter/dist/esm/prism-light';
+// L'entrée complète importe tous les langages. Conserver ceux de Highlight et
+// leurs compléments : HTML embarque CSS/JS, et TS/TSX utilisent regex et JSDoc.
+// Les templates JS peuvent aussi contenir SQL, GraphQL et Markdown.
+// L'ordre suit le moteur complet : TypeScript copie la grammaire JavaScript,
+// qui doit déjà contenir les commentaires de documentation et les templates.
+for (const [name, grammar] of [
+    ['markup', markup],
+    ['css', css],
+    ['regex', regex],
+    ['javascript', javascript],
+    ['bash', bash],
+    ['sql', sql],
+    ['yaml', yaml],
+    ['markdown', markdown],
+    ['ruby', ruby],
+    ['css-extras', cssExtras],
+    ['json', json],
+    ['graphql', graphql],
+    ['javadoclike', javadoclike],
+    ['js-templates', jsTemplates],
+    ['typescript', typescript],
+    ['jsdoc', jsdoc],
+    ['js-extras', jsExtras],
+    ['tsx', tsx],
+]) {
+    Prism.registerLanguage(name, grammar);
+}
+export default Prism;

package/dist/core/Highlight/Highlight.theme.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties } from 'react';
+import { TextStyle } from 'react-native';
+import { useStyles } from './Highlight.styles';
+type Styles = ReturnType<typeof useStyles>;
+export type NativeSyntaxStyle = Record<string, TextStyle>;
+export declare const BASE_STYLE_KEY = "base";
+export declare const styleNatif: (style?: CSSProperties) => TextStyle;
+export declare const feuilleDeColoration: (syntaxStyle: Record<string, CSSProperties>, fond: string) => NativeSyntaxStyle;
+/** Le texte de base : la couleur du theme, puis la chasse fixe. */
+export declare const styleDuTexteDeBase: (feuille: NativeSyntaxStyle) => TextStyle | {
+    readonly fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
+};
+/**
+ * La surface du bloc. Le theme de coloration ne fournit que les couleurs de jetons : la surface
+ * vient du design system, posee apres la base du theme, et le style de l'appelant en dernier.
+ * `styles.highlight` pose `overflow: scroll`, que le `ScrollView` qui l'entoure rend inutile :
+ * ce doublon interieur defilait sans pouvoir recevoir le focus (regle axe).
+ */
+export declare const styleDeLaSurface: (styles: Styles, feuille: NativeSyntaxStyle, { variant, styleFourni }: {
+    variant: "standalone" | "embedded";
+    styleFourni: TextStyle;
+}) => TextStyle;
+export {};
+//# sourceMappingURL=Highlight.theme.d.ts.map

package/dist/core/Highlight/Highlight.theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.theme.d.ts","sourceRoot":"","sources":["../../../src/core/Highlight/Highlight.theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAE1D,eAAO,MAAM,cAAc,SAAS,CAAC;AAkCrC,eAAO,MAAM,UAAU,GAAI,QAAO,aAAkB,KAAG,SAUtD,CAAC;AAkCF,eAAO,MAAM,mBAAmB,GAAI,aAAa,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,MAAM,KAAG,iBAgB9F,CAAC;AAEF,mEAAmE;AACnE,eAAO,MAAM,kBAAkB,GAAI,SAAS,iBAAiB;;CAC4C,CAAC;AAE1G;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,MAAM,EACd,SAAS,iBAAiB,EAC1B,0BAA0B;IAAE,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IAAC,WAAW,EAAE,SAAS,CAAA;CAAE,cAOtF,CAAC"}

package/dist/core/Highlight/Highlight.theme.js

@@ -0,0 +1,96 @@
+import { MonospaceFont, withMinimumContrast } from '@alveole/theme';
+import { StyleSheet } from 'react-native';
+export const BASE_STYLE_KEY = 'base';
+// Le CSS du theme de coloration admet des valeurs que React Native refuse (`oblique`,
+// `bolder`...) : seules les valeurs que le natif connait lui sont transmises.
+const accepteSeulement = (valeursNatives) => (valeur) => valeursNatives.some(valeurNative => valeurNative === valeur);
+const estStyleDePoliceNatif = accepteSeulement(['normal', 'italic']);
+const estGraisseNative = accepteSeulement([
+    'normal',
+    'bold',
+    100,
+    200,
+    300,
+    400,
+    500,
+    600,
+    700,
+    800,
+    900,
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+]);
+export const styleNatif = (style = {}) => {
+    const nativeStyle = {};
+    if (typeof style.color === 'string')
+        nativeStyle.color = style.color;
+    if (typeof style.background === 'string')
+        nativeStyle.backgroundColor = style.background;
+    if (typeof style.backgroundColor === 'string')
+        nativeStyle.backgroundColor = style.backgroundColor;
+    if (estGraisseNative(style.fontWeight))
+        nativeStyle.fontWeight = style.fontWeight;
+    if (estStyleDePoliceNatif(style.fontStyle))
+        nativeStyle.fontStyle = style.fontStyle;
+    return nativeStyle;
+};
+const getSyntaxStyleKeys = (selector) => {
+    if (selector.includes('pre[') || selector.includes('code[')) {
+        return [BASE_STYLE_KEY];
+    }
+    return selector
+        .split(/[\s>,]+/)
+        .flatMap(part => part
+        .replace(/^\.token\./, '')
+        .replace(/^\./, '')
+        .split('.'))
+        .map(part => part.replace(/^token-/, ''))
+        .filter(Boolean);
+};
+// Le thème de coloration ne fournit que des couleurs de texte : les surfaces qu'il déclare
+// sur ses jetons sont écartées ici. Sans ça, chaque thème impose ses propres surlignages,
+// qui varient d'un thème à l'autre et recouvrent le fond posé par le design system.
+const getSyntaxTextStyle = (tokenStyle) => {
+    const { backgroundColor: _surfaceDuTheme, ...textStyle } = styleNatif(tokenStyle);
+    return textStyle;
+};
+/** Le seuil WCAG AA pour du texte de taille courante. */
+const SEUIL_DE_CONTRASTE = 4.5;
+// Les palettes de coloration sont écrites pour des éditeurs, pas pour WCAG : celle retenue
+// descendait à 2,56 sur les noms de propriétés, contre 4,5 exigés. Chaque teinte est ramenée
+// au seuil sur la surface du bloc, ce qui reste vrai si l'on change de thème un jour.
+export const feuilleDeColoration = (syntaxStyle, fond) => {
+    return Object.entries(syntaxStyle).reduce((acc, [selector, tokenStyle]) => {
+        const style = getSyntaxTextStyle(tokenStyle);
+        // `getSyntaxTextStyle` ne retient une couleur que si le thème l'a donnée en chaîne : le
+        // type large de React Native ne le sait pas, d'où la vérification.
+        const lisible = typeof style.color === 'string'
+            ? { ...style, color: withMinimumContrast(style.color, fond, SEUIL_DE_CONTRASTE) }
+            : style;
+        for (const key of getSyntaxStyleKeys(selector)) {
+            acc[key] = { ...acc[key], ...lisible };
+        }
+        return acc;
+    }, {});
+};
+/** Le texte de base : la couleur du theme, puis la chasse fixe. */
+export const styleDuTexteDeBase = (feuille) => StyleSheet.flatten([{ color: feuille[BASE_STYLE_KEY]?.color }, feuille[BASE_STYLE_KEY], MonospaceFont]);
+/**
+ * La surface du bloc. Le theme de coloration ne fournit que les couleurs de jetons : la surface
+ * vient du design system, posee apres la base du theme, et le style de l'appelant en dernier.
+ * `styles.highlight` pose `overflow: scroll`, que le `ScrollView` qui l'entoure rend inutile :
+ * ce doublon interieur defilait sans pouvoir recevoir le focus (regle axe).
+ */
+export const styleDeLaSurface = (styles, feuille, { variant, styleFourni }) => StyleSheet.flatten([
+    feuille[BASE_STYLE_KEY],
+    variant === 'embedded' ? styles.highlightEmbedded : styles.highlight,
+    { overflow: 'visible' },
+    styleFourni,
+]);

package/dist/core/Image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,UAAU,IAAI,cAAc,EAAsB,MAAM,YAAY,CAAC;AAClG,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,KAAK,SAAS,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;AAGvC,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBA4FtC,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,UAAU,IAAI,cAAc,EAAsB,MAAM,YAAY,CAAC;AAClG,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,KAAK,SAAS,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;AAGvC,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAuDtC,CAAC"}

package/dist/core/Image/Image.js

@@ -1,69 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Image as ExpoImage } from 'expo-image';
 import React, { useState } from 'react';
-import { LucideIcon } from '../../ui';
+import { LucideIcon } from '../../ui/LucideIcon';
 import { Box } from '../Box';
+import { dimensionsImage } from './dimensionsImage';
 import { useStyles } from './Image.style';
-const DEFAULT_ASPECT_RATIO = 3 / 4;
 const isNumericDimension = (value) => value != null && typeof value === 'number';
 export const Image = (props) => {
-    const { source, width, height, maxWidth, maxHeight, style, ...rest } = props;
+    const { source, width, height, maxWidth, maxHeight, style, alt, accessibilityLabel, ...rest } = props;
+    // expo-image documente `alt` comme alias d'`accessibilityLabel`, mais ne l'applique que
+    // dans l'une de ses deux branches de rendu web (ExpoImage.web.tsx) : selon le chemin
+    // emprunté, l'attribut `alt` du <img> disparaît. On résout l'alias ici, une fois.
+    const label = accessibilityLabel ?? alt;
     const maxWidthNumber = maxWidth ?? (isNumericDimension(width) ? width : undefined);
     const maxHeightNumber = maxHeight ?? (isNumericDimension(height) ? height : undefined);
     const styles = useStyles();
     const [error, setError] = useState(false);
     const [dimensions, setDimensions] = useState(null);
     const imageSource = React.useMemo(() => (typeof source === 'string' ? { uri: source } : source), [source]);
-    const imageStyle = React.useMemo(() => {
-        const fixedWidth = isNumericDimension(width) ? width : undefined;
-        const fixedHeight = isNumericDimension(height) ? height : undefined;
-        if (dimensions) {
-            let computedWidth = dimensions.width;
-            let computedHeight = dimensions.height;
-            if (maxWidthNumber != null && computedWidth > maxWidthNumber) {
-                computedWidth = maxWidthNumber;
-                if (fixedHeight == null) {
-                    computedHeight = computedWidth * (dimensions.height / dimensions.width);
-                }
-            }
-            if (maxHeightNumber != null && computedHeight > maxHeightNumber) {
-                computedHeight = maxHeightNumber;
-                if (fixedWidth == null) {
-                    computedWidth = computedHeight * (dimensions.width / dimensions.height);
-                }
-            }
-            return {
-                width: computedWidth,
-                height: computedHeight,
-                maxWidth: maxWidthNumber,
-                maxHeight: maxHeightNumber,
-            };
-        }
-        let fallbackWidth;
-        let fallbackHeight;
-        if (fixedWidth != null && fixedHeight != null) {
-            fallbackWidth = fixedWidth;
-            fallbackHeight = fixedHeight;
-        }
-        else if (fixedWidth != null) {
-            fallbackWidth = fixedWidth;
-            fallbackHeight = maxHeightNumber ?? fixedWidth * DEFAULT_ASPECT_RATIO;
-        }
-        else if (fixedHeight != null) {
-            fallbackHeight = fixedHeight;
-            fallbackWidth = maxWidthNumber ?? fixedHeight / DEFAULT_ASPECT_RATIO;
-        }
-        else if (maxWidthNumber != null || maxHeightNumber != null) {
-            fallbackWidth = maxWidthNumber;
-            fallbackHeight = maxHeightNumber ?? (maxWidthNumber != null ? maxWidthNumber * DEFAULT_ASPECT_RATIO : undefined);
-        }
-        return {
-            width: fallbackWidth,
-            height: fallbackHeight,
-            maxWidth: maxWidthNumber,
-            maxHeight: maxHeightNumber,
-        };
-    }, [width, height, maxWidthNumber, maxHeightNumber, dimensions]);
+    const imageStyle = React.useMemo(() => dimensionsImage({
+        fixedWidth: isNumericDimension(width) ? width : undefined,
+        fixedHeight: isNumericDimension(height) ? height : undefined,
+        maxWidthNumber,
+        maxHeightNumber,
+        dimensions,
+    }), [width, height, maxWidthNumber, maxHeightNumber, dimensions]);
     const handleLoad = (event) => setDimensions(event.source);
     const handleError = () => setError(true);
     return error ? (_jsx(Box, { children: _jsx(LucideIcon, { name: "ImageOff", size: "md" }) })) : (_jsx(ExpoImage, { style: {
@@ -71,5 +32,5 @@ export const Image = (props) => {
             ...imageStyle,
             width: width === '100%' ? '100%' : imageStyle.width,
             height: height === '100%' ? '100%' : imageStyle.height,
-        }, source: imageSource, onLoad: handleLoad, onError: handleError, ...rest }));
+        }, source: imageSource, accessibilityLabel: label, onLoad: handleLoad, onError: handleError, ...rest }));
 };

package/dist/core/Image/Image.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,KAAK,mCAwBjB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAOrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAO7B,CAAC;AAEF,eAAO,MAAM,OAAO,mCAoBnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAOjB,CAAC;AAEF,eAAO,MAAM,IAAI,mCAOhB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAa5B,CAAC;AAEF,eAAO,MAAM,eAAe,mCAS3B,CAAC;AAEF,eAAO,MAAM,aAAa,mCAOzB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,KAAK,mCAwBjB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAOrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAY7B,CAAC;AAEF,eAAO,MAAM,OAAO,mCA2BnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAajB,CAAC;AAEF,eAAO,MAAM,IAAI,mCAahB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAatB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAc5B,CAAC;AAEF,eAAO,MAAM,eAAe,mCAc3B,CAAC;AAEF,eAAO,MAAM,aAAa,mCAOzB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}

package/dist/core/Image/Image.stories.js

@@ -12,36 +12,36 @@ export default {
     styleFn: () => 'Aucun style appliqué',
 };
 export const Cover = () => {
-    return (_jsxs(Box, { children: [_jsxs(Box, { children: [_jsx(Typography, { children: "Image originale avec 400 x 300" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", width: 400, height: 300 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image d\u00E9form\u00E9e avec width 250 et height 200 (rendu 250 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", width: 250, height: 200 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image avec une width de 200px (rendu 200 x 150)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", width: 200 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image avec une height de 200px (rendu 400 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", height: 200 })] })] }));
+    return (_jsxs(Box, { children: [_jsxs(Box, { children: [_jsx(Typography, { children: "Image originale avec 400 x 300" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", width: 400, height: 300 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image d\u00E9form\u00E9e avec width 250 et height 200 (rendu 250 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", width: 250, height: 200 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image avec une width de 200px (rendu 200 x 150)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", width: 200 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image avec une height de 200px (rendu 400 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", height: 200 })] })] }));
 };
 export const MaxWidth = () => {
-    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec maxWidth de 200px (rendu 200 x 400)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", maxWidth: 200 })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec maxWidth de 200px (rendu 200 x 400)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", maxWidth: 200 })] }));
 };
 export const MaxHeight = () => {
-    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec maxHeight de 200px (rendu 300 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", maxHeight: 200 })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec maxHeight de 200px (rendu 300 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", maxHeight: 200 })] }));
 };
 export const MaxWidthAndHeight = () => {
-    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec maxWidth et maxHeight de 200px (rendu 200 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", maxWidth: 200, maxHeight: 200 })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec maxWidth et maxHeight de 200px (rendu 200 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", maxWidth: 200, maxHeight: 200 })] }));
 };
 export const contain = () => {
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de contain (rendu 250 x 150)" }), _jsx(Image, { source: "https://www.w3schools.com/csS/paris.jpg", contentFit: "contain", width: 250, height: 150 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de contain (rendu 250 x 150)" }), _jsx(Image, { source: "https://www.w3schools.com/csS/paris.jpg", contentFit: "contain", contentPosition: "left", width: 250, height: 150 })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de contain (rendu 250 x 150)" }), _jsx(Image, { source: "https://www.w3schools.com/csS/paris.jpg", alt: "Vue de Paris", contentFit: "contain", width: 250, height: 150 })] }), _jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de contain (rendu 250 x 150)" }), _jsx(Image, { source: "https://www.w3schools.com/csS/paris.jpg", alt: "Vue de Paris", contentFit: "contain", contentPosition: "left", width: 250, height: 150 })] })] }));
 };
 export const cover = () => {
-    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de cover (rendu 500 x 500)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", contentFit: "cover", width: 500, height: 500 })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de cover (rendu 500 x 500)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", contentFit: "cover", width: 500, height: 500 })] }));
 };
 export const fill = () => {
-    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de fill (rendu 500 x 500)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", contentFit: "fill", width: 500, height: 500 })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de fill (rendu 500 x 500)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", contentFit: "fill", width: 500, height: 500 })] }));
 };
 export const transition = () => {
-    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec transition de 1000ms (rendu 200 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", transition: 1000, width: 200, height: 200 })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec transition de 1000ms (rendu 200 x 200)" }), _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", transition: 1000, width: 200, height: 200 })] }));
 };
 export const withAnotherImage = () => {
-    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de contain (rendu 200 x 150)" }), _jsx(Image, { source: "https://www.w3schools.com/csS/paris.jpg", contentFit: "contain", contentPosition: "left", width: 200, height: 150 })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image avec contentFit de contain (rendu 200 x 150)" }), _jsx(Image, { source: "https://www.w3schools.com/csS/paris.jpg", alt: "Vue de Paris", contentFit: "contain", contentPosition: "left", width: 200, height: 150 })] }));
 };
 export const responsiveImage = () => {
-    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image responsive. L'image doit prendre la taille de son conteneur. Ici 200 x 100" }), _jsx(Box, { width: 200, height: 100, children: _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", width: '100%', height: '100%' }) })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image responsive. L'image doit prendre la taille de son conteneur. Ici 200 x 100" }), _jsx(Box, { width: 200, height: 100, children: _jsx(Image, { source: "https://picsum.photos/seed/696/400/300", alt: "Photo de d\u00E9monstration", width: '100%', height: '100%' }) })] }));
 };
 export const ImageNotFound = () => {
-    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image non trouv\u00E9e" }), _jsx(Image, { source: "https://invalid.url", width: 200, height: 200 })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { children: "Image non trouv\u00E9e" }), _jsx(Image, { source: "https://invalid.url", alt: "Image dont le chargement \u00E9choue", width: 200, height: 200 })] }));
 };
 export * as Sources from './Image.stories.sources';

package/dist/core/Image/Image.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAA22B,CAAC;AAE93B,eAAO,MAAM,QAAQ,cAAwP,CAAC;AAE9Q,eAAO,MAAM,SAAS,cAA2P,CAAC;AAElR,eAAO,MAAM,iBAAiB,cAA8R,CAAC;AAE7T,eAAO,MAAM,OAAO,cAAunB,CAAC;AAE5oB,eAAO,MAAM,KAAK,cAAsR,CAAC;AAEzS,eAAO,MAAM,IAAI,cAAmR,CAAC;AAErS,eAAO,MAAM,UAAU,cAAyR,CAAC;AAEjT,eAAO,MAAM,gBAAgB,cAAmX,CAAC;AAEjZ,eAAO,MAAM,eAAe,cAA4W,CAAC;AAEzY,eAAO,MAAM,aAAa,cAAuN,CAAC;AAElP,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Image.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAu+B,CAAC;AAE1/B,eAAO,MAAM,QAAQ,cAAuR,CAAC;AAE7S,eAAO,MAAM,SAAS,cAA0R,CAAC;AAEjT,eAAO,MAAM,iBAAiB,cAAwW,CAAC;AAEvY,eAAO,MAAM,OAAO,cAA4uB,CAAC;AAEjwB,eAAO,MAAM,KAAK,cAAyW,CAAC;AAE5X,eAAO,MAAM,IAAI,cAAsW,CAAC;AAExX,eAAO,MAAM,UAAU,cAA4W,CAAC;AAEpY,eAAO,MAAM,gBAAgB,cAAiZ,CAAC;AAE/a,eAAO,MAAM,eAAe,cAAgc,CAAC;AAE7d,eAAO,MAAM,aAAa,cAA+P,CAAC;AAE1R,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/core/Image/Image.stories.sources.js

@@ -1,16 +1,16 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/Image/Image.stories.tsx
-export const Cover = () => "export const Cover = () => {\n  return (\n    <Box>\n      <Box>\n        <Typography>Image originale avec 400 x 300</Typography>\n        <Image source=\"https://picsum.photos/seed/696/400/300\" width={400} height={300} />\n      </Box>\n\n      <Box>\n        <Typography>Image déformée avec width 250 et height 200 (rendu 250 x 200)</Typography>\n        <Image source=\"https://picsum.photos/seed/696/400/300\" width={250} height={200} />\n      </Box>\n\n      <Box>\n        <Typography>Image avec une width de 200px (rendu 200 x 150)</Typography>\n        <Image source=\"https://picsum.photos/seed/696/400/300\" width={200} />\n      </Box>\n\n      <Box>\n        <Typography>Image avec une height de 200px (rendu 400 x 200)</Typography>\n        <Image source=\"https://picsum.photos/seed/696/400/300\" height={200} />\n      </Box>\n    </Box>\n  );\n};";
-export const MaxWidth = () => "export const MaxWidth = () => {\n  return (\n    <Box>\n      <Typography>Image avec maxWidth de 200px (rendu 200 x 400)</Typography>\n      <Image source=\"https://picsum.photos/seed/696/400/300\" maxWidth={200} />\n    </Box>\n  );\n};";
-export const MaxHeight = () => "export const MaxHeight = () => {\n  return (\n    <Box>\n      <Typography>Image avec maxHeight de 200px (rendu 300 x 200)</Typography>\n      <Image source=\"https://picsum.photos/seed/696/400/300\" maxHeight={200} />\n    </Box>\n  );\n};";
-export const MaxWidthAndHeight = () => "export const MaxWidthAndHeight = () => {\n  return (\n    <Box>\n      <Typography>Image avec maxWidth et maxHeight de 200px (rendu 200 x 200)</Typography>\n      <Image source=\"https://picsum.photos/seed/696/400/300\" maxWidth={200} maxHeight={200} />\n    </Box>\n  );\n};";
-export const contain = () => "export const contain = () => {\n  return (\n    <>\n      <Box>\n        <Typography>Image avec contentFit de contain (rendu 250 x 150)</Typography>\n        <Image source=\"https://www.w3schools.com/csS/paris.jpg\" contentFit=\"contain\" width={250} height={150} />\n      </Box>\n\n      <Box>\n        <Typography>Image avec contentFit de contain (rendu 250 x 150)</Typography>\n        <Image\n          source=\"https://www.w3schools.com/csS/paris.jpg\"\n          contentFit=\"contain\"\n          contentPosition=\"left\"\n          width={250}\n          height={150}\n        />\n      </Box>\n    </>\n  );\n};";
-export const cover = () => "export const cover = () => {\n  return (\n    <Box>\n      <Typography>Image avec contentFit de cover (rendu 500 x 500)</Typography>\n      <Image source=\"https://picsum.photos/seed/696/400/300\" contentFit=\"cover\" width={500} height={500} />\n    </Box>\n  );\n};";
-export const fill = () => "export const fill = () => {\n  return (\n    <Box>\n      <Typography>Image avec contentFit de fill (rendu 500 x 500)</Typography>\n      <Image source=\"https://picsum.photos/seed/696/400/300\" contentFit=\"fill\" width={500} height={500} />\n    </Box>\n  );\n};";
-export const transition = () => "export const transition = () => {\n  return (\n    <Box>\n      <Typography>Image avec transition de 1000ms (rendu 200 x 200)</Typography>\n      <Image source=\"https://picsum.photos/seed/696/400/300\" transition={1000} width={200} height={200} />\n    </Box>\n  );\n};";
-export const withAnotherImage = () => "export const withAnotherImage = () => {\n  return (\n    <Box>\n      <Typography>Image avec contentFit de contain (rendu 200 x 150)</Typography>\n      <Image\n        source=\"https://www.w3schools.com/csS/paris.jpg\"\n        contentFit=\"contain\"\n        contentPosition=\"left\"\n        width={200}\n        height={150}\n      />\n    </Box>\n  );\n};";
-export const responsiveImage = () => "export const responsiveImage = () => {\n  return (\n    <Box>\n      <Typography>Image responsive. L&apos;image doit prendre la taille de son conteneur. Ici 200 x 100</Typography>\n      <Box width={200} height={100}>\n        <Image source=\"https://picsum.photos/seed/696/400/300\" width={'100%'} height={'100%'} />\n      </Box>\n    </Box>\n  );\n};";
-export const ImageNotFound = () => "export const ImageNotFound = () => {\n  return (\n    <Box>\n      <Typography>Image non trouvée</Typography>\n      <Image source=\"https://invalid.url\" width={200} height={200} />\n    </Box>\n  );\n};";
+export const Cover = () => "export const Cover = () => {\n  return (\n    <Box>\n      <Box>\n        <Typography>Image originale avec 400 x 300</Typography>\n        <Image source=\"https://picsum.photos/seed/696/400/300\" alt=\"Photo de démonstration\" width={400} height={300} />\n      </Box>\n\n      <Box>\n        <Typography>Image déformée avec width 250 et height 200 (rendu 250 x 200)</Typography>\n        <Image source=\"https://picsum.photos/seed/696/400/300\" alt=\"Photo de démonstration\" width={250} height={200} />\n      </Box>\n\n      <Box>\n        <Typography>Image avec une width de 200px (rendu 200 x 150)</Typography>\n        <Image source=\"https://picsum.photos/seed/696/400/300\" alt=\"Photo de démonstration\" width={200} />\n      </Box>\n\n      <Box>\n        <Typography>Image avec une height de 200px (rendu 400 x 200)</Typography>\n        <Image source=\"https://picsum.photos/seed/696/400/300\" alt=\"Photo de démonstration\" height={200} />\n      </Box>\n    </Box>\n  );\n};";
+export const MaxWidth = () => "export const MaxWidth = () => {\n  return (\n    <Box>\n      <Typography>Image avec maxWidth de 200px (rendu 200 x 400)</Typography>\n      <Image source=\"https://picsum.photos/seed/696/400/300\" alt=\"Photo de démonstration\" maxWidth={200} />\n    </Box>\n  );\n};";
+export const MaxHeight = () => "export const MaxHeight = () => {\n  return (\n    <Box>\n      <Typography>Image avec maxHeight de 200px (rendu 300 x 200)</Typography>\n      <Image source=\"https://picsum.photos/seed/696/400/300\" alt=\"Photo de démonstration\" maxHeight={200} />\n    </Box>\n  );\n};";
+export const MaxWidthAndHeight = () => "export const MaxWidthAndHeight = () => {\n  return (\n    <Box>\n      <Typography>Image avec maxWidth et maxHeight de 200px (rendu 200 x 200)</Typography>\n      <Image\n        source=\"https://picsum.photos/seed/696/400/300\"\n        alt=\"Photo de démonstration\"\n        maxWidth={200}\n        maxHeight={200}\n      />\n    </Box>\n  );\n};";
+export const contain = () => "export const contain = () => {\n  return (\n    <>\n      <Box>\n        <Typography>Image avec contentFit de contain (rendu 250 x 150)</Typography>\n        <Image\n          source=\"https://www.w3schools.com/csS/paris.jpg\"\n          alt=\"Vue de Paris\"\n          contentFit=\"contain\"\n          width={250}\n          height={150}\n        />\n      </Box>\n\n      <Box>\n        <Typography>Image avec contentFit de contain (rendu 250 x 150)</Typography>\n        <Image\n          source=\"https://www.w3schools.com/csS/paris.jpg\"\n          alt=\"Vue de Paris\"\n          contentFit=\"contain\"\n          contentPosition=\"left\"\n          width={250}\n          height={150}\n        />\n      </Box>\n    </>\n  );\n};";
+export const cover = () => "export const cover = () => {\n  return (\n    <Box>\n      <Typography>Image avec contentFit de cover (rendu 500 x 500)</Typography>\n      <Image\n        source=\"https://picsum.photos/seed/696/400/300\"\n        alt=\"Photo de démonstration\"\n        contentFit=\"cover\"\n        width={500}\n        height={500}\n      />\n    </Box>\n  );\n};";
+export const fill = () => "export const fill = () => {\n  return (\n    <Box>\n      <Typography>Image avec contentFit de fill (rendu 500 x 500)</Typography>\n      <Image\n        source=\"https://picsum.photos/seed/696/400/300\"\n        alt=\"Photo de démonstration\"\n        contentFit=\"fill\"\n        width={500}\n        height={500}\n      />\n    </Box>\n  );\n};";
+export const transition = () => "export const transition = () => {\n  return (\n    <Box>\n      <Typography>Image avec transition de 1000ms (rendu 200 x 200)</Typography>\n      <Image\n        source=\"https://picsum.photos/seed/696/400/300\"\n        alt=\"Photo de démonstration\"\n        transition={1000}\n        width={200}\n        height={200}\n      />\n    </Box>\n  );\n};";
+export const withAnotherImage = () => "export const withAnotherImage = () => {\n  return (\n    <Box>\n      <Typography>Image avec contentFit de contain (rendu 200 x 150)</Typography>\n      <Image\n        source=\"https://www.w3schools.com/csS/paris.jpg\"\n        alt=\"Vue de Paris\"\n        contentFit=\"contain\"\n        contentPosition=\"left\"\n        width={200}\n        height={150}\n      />\n    </Box>\n  );\n};";
+export const responsiveImage = () => "export const responsiveImage = () => {\n  return (\n    <Box>\n      <Typography>Image responsive. L&apos;image doit prendre la taille de son conteneur. Ici 200 x 100</Typography>\n      <Box width={200} height={100}>\n        <Image\n          source=\"https://picsum.photos/seed/696/400/300\"\n          alt=\"Photo de démonstration\"\n          width={'100%'}\n          height={'100%'}\n        />\n      </Box>\n    </Box>\n  );\n};";
+export const ImageNotFound = () => "export const ImageNotFound = () => {\n  return (\n    <Box>\n      <Typography>Image non trouvée</Typography>\n      <Image source=\"https://invalid.url\" alt=\"Image dont le chargement échoue\" width={200} height={200} />\n    </Box>\n  );\n};";
 export const storySources = {
     Cover,
     MaxWidth,

package/dist/core/Image/dimensionsImage.d.ts

@@ -0,0 +1,24 @@
+type ContraintesDimensions = {
+    fixedWidth?: number;
+    fixedHeight?: number;
+    maxWidthNumber?: number;
+    maxHeightNumber?: number;
+    dimensions: {
+        width: number;
+        height: number;
+    } | null;
+};
+type DimensionsResultat = {
+    width?: number;
+    height?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+};
+/**
+ * Calcule les dimensions finales de l'image : mise a l'echelle proportionnelle sous contrainte
+ * de maxWidth/maxHeight une fois les dimensions reelles connues, ou repli sur les valeurs fixes
+ * (ou un ratio par defaut) avant chargement.
+ */
+export declare const dimensionsImage: (contraintes: ContraintesDimensions) => DimensionsResultat;
+export {};
+//# sourceMappingURL=dimensionsImage.d.ts.map

package/dist/core/Image/dimensionsImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dimensionsImage.d.ts","sourceRoot":"","sources":["../../../src/core/Image/dimensionsImage.ts"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,GAAG;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACtD,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuCF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,qBAAqB,KAAG,kBAKpE,CAAC"}

package/dist/core/Image/dimensionsImage.js

@@ -0,0 +1,38 @@
+const DEFAULT_ASPECT_RATIO = 3 / 4;
+const dimensionsAvantChargement = (contraintes) => {
+    const { fixedWidth, fixedHeight, maxWidthNumber, maxHeightNumber } = contraintes;
+    const width = fixedWidth ?? maxWidthNumber ?? (fixedHeight != null ? fixedHeight / DEFAULT_ASPECT_RATIO : undefined);
+    const height = fixedHeight ??
+        maxHeightNumber ??
+        (fixedWidth != null || maxWidthNumber != null ? (fixedWidth ?? maxWidthNumber) * DEFAULT_ASPECT_RATIO : undefined);
+    return { width, height, maxWidth: maxWidthNumber, maxHeight: maxHeightNumber };
+};
+const dimensionsApresChargement = (contraintes) => {
+    const { dimensions, fixedWidth, fixedHeight, maxWidthNumber, maxHeightNumber } = contraintes;
+    let width = dimensions.width;
+    let height = dimensions.height;
+    if (maxWidthNumber != null && width > maxWidthNumber) {
+        width = maxWidthNumber;
+        if (fixedHeight == null) {
+            height = width * (dimensions.height / dimensions.width);
+        }
+    }
+    if (maxHeightNumber != null && height > maxHeightNumber) {
+        height = maxHeightNumber;
+        if (fixedWidth == null) {
+            width = height * (dimensions.width / dimensions.height);
+        }
+    }
+    return { width, height, maxWidth: maxWidthNumber, maxHeight: maxHeightNumber };
+};
+/**
+ * Calcule les dimensions finales de l'image : mise a l'echelle proportionnelle sous contrainte
+ * de maxWidth/maxHeight une fois les dimensions reelles connues, ou repli sur les valeurs fixes
+ * (ou un ratio par defaut) avant chargement.
+ */
+export const dimensionsImage = (contraintes) => {
+    const { dimensions } = contraintes;
+    return dimensions
+        ? dimensionsApresChargement({ ...contraintes, dimensions })
+        : dimensionsAvantChargement(contraintes);
+};

package/dist/core/Map/Map.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../../src/core/Map/Map.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,eAAO,MAAM,GAAG,GAAI,GAAG,QAAQ,gCAM9B,CAAC"}
+{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../../src/core/Map/Map.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,eAAO,MAAM,GAAG,GAAI,GAAG,QAAQ,gCAM9B,CAAC"}

package/dist/core/Map/Map.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
 export const Map = (_) => {
     return (_jsx(Box, { p: '075', children: _jsx(Typography, { textAlign: 'center', children: "La carte n\u2019est pas disponible sur le mobile" }) }));
 };

package/dist/core/Map/Map.stories.d.ts

@@ -26,7 +26,8 @@ declare const _default: {
         container: {
             width: "100%";
             height: "100%";
-            borderRadius: number;
+            minHeight: number;
+            borderRadius: import("@alveole/theme").Radius;
             overflow: "hidden";
         };
     };

package/dist/core/Map/Map.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Map.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Map/Map.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBASkB;AAElB,wBAAgB,QAAQ,gCAOvB;AAED,wBAAgB,SAAS,gCAIxB;AAED,wBAAgB,mBAAmB,gCAQlC"}
+{"version":3,"file":"Map.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Map/Map.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBASkB;AAElB,wBAAgB,QAAQ,gCAOvB;AAED,wBAAgB,SAAS,gCAIxB;AAED,wBAAgB,mBAAmB,gCAQlC"}

package/dist/core/Map/Map.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../Box';
 import { Map } from './index';
 import { MapPropsJSON } from './Map.props';
 import { useStyles } from './Map.styles';

package/dist/core/Map/Map.styles.d.ts

@@ -2,7 +2,8 @@ export declare const useStyles: () => {
     container: {
         width: "100%";
         height: "100%";
-        borderRadius: number;
+        minHeight: number;
+        borderRadius: import("@alveole/theme").Radius;
         overflow: "hidden";
     };
 };

package/dist/core/Map/Map.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Map.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Map/Map.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;CAOnB,CAAC"}
+{"version":3,"file":"Map.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Map/Map.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;CAQnB,CAAC"}

package/dist/core/Map/Map.styles.js

@@ -1,9 +1,10 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(() => ({
+export const useStyles = makeStyles(({ radius }) => ({
     container: {
         width: '100%',
         height: '100%',
-        borderRadius: 8,
+        minHeight: 240,
+        borderRadius: radius('lg'),
         overflow: 'hidden',
     },
 }));

package/dist/core/Map/Map.web.d.ts

@@ -1,13 +1,3 @@
-import * as React from 'react';
 import { MapProps } from './Map.props';
-type GoogleNamespace = {
-    maps: any;
-};
-declare global {
-    interface Window {
-        google?: GoogleNamespace;
-    }
-}
-export declare const Map: (props: MapProps) => React.JSX.Element;
-export {};
+export declare const Map: (props: MapProps) => import("react").JSX.Element;
 //# sourceMappingURL=Map.web.d.ts.map

package/dist/core/Map/Map.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Map.web.d.ts","sourceRoot":"","sources":["../../../src/core/Map/Map.web.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAU,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE/C,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,CAAC,EAAE,eAAe,CAAC;KAC1B;CACF;AAqCD,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,sBA0GlC,CAAC"}
+{"version":3,"file":"Map.web.d.ts","sourceRoot":"","sources":["../../../src/core/Map/Map.web.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIvC,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,gCAKlC,CAAC"}