@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/Toast/Toast.styles.js

@@ -1,6 +1,6 @@
 import { makeStyles } from '@alveole/theme';
 import { Dimensions, Platform } from 'react-native';
-export const useStyles = makeStyles(({ text, color, radius, spacing, shadows }) => ({
+const coque = ({ color, radius, spacing, shadows }) => ({
     // Container
     tamaguiToastContainer: {
         padding: 0,
@@ -28,8 +28,10 @@ export const useStyles = makeStyles(({ text, color, radius, spacing, shadows })
         flex: 1,
         flexDirection: 'column',
         gap: spacing('1W'),
-        padding: spacing('100'),
+        padding: spacing('2W'),
     },
+});
+const texte = ({ text, color }) => ({
     titleContainer: {
         display: 'flex',
         flexDirection: 'row',
@@ -41,6 +43,13 @@ export const useStyles = makeStyles(({ text, color, radius, spacing, shadows })
         ...text['Corps de texte'].SM.Bold,
         color: color.light.text['default-grey'],
     },
+    // Message
+    message: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['default-grey'],
+    },
+});
+const pastille = ({ color, spacing }) => ({
     // Bloc icône (panel coloré pleine hauteur)
     iconBlock: {
         display: 'flex',
@@ -67,9 +76,5 @@ export const useStyles = makeStyles(({ text, color, radius, spacing, shadows })
     iconBlockWarning: {
         backgroundColor: color.light.background['flat-warning'],
     },
-    // Message
-    message: {
-        ...text['Corps de texte'].SM.Regular,
-        color: color.light.text['default-grey'],
-    },
-}));
+});
+export const useStyles = makeStyles(theme => ({ ...coque(theme), ...texte(theme), ...pastille(theme) }));

package/dist/ui/Toast/ToastContext.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { LucideIconProps } from '../LucideIcon';
+import { Leading } from '../Leading';
 export type ToastAPIOptions = {
-    icon?: LucideIconProps['name'];
+    leading?: Leading;
     duration?: number;
     variant?: 'default' | 'success' | 'error' | 'info' | 'warning';
 };

package/dist/ui/Toast/ToastContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/ToastContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,YAAY,gCAA6C,CAAC"}
+{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/ToastContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,YAAY,gCAA6C,CAAC"}

package/dist/ui/Toast/ToastType.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
-import { LucideIconProps } from '../LucideIcon';
+import { Leading } from '../Leading';
 import type { ToastAPIOptions } from './ToastContext';
 type ToastVariant = NonNullable<ToastAPIOptions['variant']>;
 export type ToastTypeProps = {
     variant: ToastVariant;
-    icon?: LucideIconProps['name'];
+    leading?: Leading;
 };
-export declare function ToastType({ variant, icon }: ToastTypeProps): React.JSX.Element | null;
+/**
+ * Ce que la pastille du toast affiche : l'icone du `variant` par defaut, remplacee par
+ * `leading` quand l'appelant en donne un, et retiree par `leading={null}`.
+ */
+export declare const contenuDuToast: (variant: ToastVariant, leading?: Leading) => Leading;
+export declare function ToastType({ variant, leading }: ToastTypeProps): React.JSX.Element | null;
 export {};
 //# sourceMappingURL=ToastType.d.ts.map

package/dist/ui/Toast/ToastType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastType.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/ToastType.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,KAAK,YAAY,GAAG,WAAW,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,cAAc,4BA8C1D"}
+{"version":3,"file":"ToastType.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/ToastType.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAElD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,KAAK,YAAY,GAAG,WAAW,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,SAAS,YAAY,EAAE,UAAU,OAAO,KAAG,OAczE,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,cAAc,4BA6B7D"}

package/dist/ui/Toast/ToastType.js

@@ -1,9 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Box } from '../../core';
-import { LucideIcon } from '../LucideIcon';
+import { Box } from '../../core/Box';
+import { LeadingSlot } from '../Leading';
 import { useStyles } from './Toast.styles';
-export function ToastType({ variant, icon }) {
+/**
+ * Ce que la pastille du toast affiche : l'icone du `variant` par defaut, remplacee par
+ * `leading` quand l'appelant en donne un, et retiree par `leading={null}`.
+ */
+export const contenuDuToast = (variant, leading) => {
+    if (leading !== undefined)
+        return leading;
+    switch (variant) {
+        case 'success':
+            return 'CircleCheck';
+        case 'error':
+            return 'OctagonAlert';
+        case 'info':
+            return 'Info';
+        case 'warning':
+            return 'TriangleAlert';
+        default:
+            return null;
+    }
+};
+export function ToastType({ variant, leading }) {
     const styles = useStyles();
     const iconBlockStyle = React.useMemo(() => {
         switch (variant) {
@@ -21,26 +41,8 @@ export function ToastType({ variant, icon }) {
                 ((_) => { })(variant);
         }
     }, [styles, variant]);
-    const iconName = React.useMemo(() => {
-        if (icon)
-            return icon;
-        switch (variant) {
-            case 'default':
-                return null;
-            case 'success':
-                return 'CircleCheck';
-            case 'error':
-                return 'OctagonAlert';
-            case 'info':
-                return 'Info';
-            case 'warning':
-                return 'TriangleAlert';
-            default:
-                ((_) => { })(variant);
-        }
-        return null;
-    }, [icon, variant]);
-    if (!iconName)
+    const contenu = contenuDuToast(variant, leading);
+    if (contenu == null)
         return null;
-    return (_jsx(Box, { style: [styles.iconBlock, iconBlockStyle], children: _jsx(LucideIcon, { color: "#FFFFFF", name: iconName, size: "sm" }) }));
+    return (_jsx(Box, { style: [styles.iconBlock, iconBlockStyle], children: _jsx(LeadingSlot, { contenu: contenu, apparence: { size: 'sm', color: '#FFFFFF' } }) }));
 }

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.stories.d.ts

@@ -5,7 +5,58 @@ declare const _default: {
     description: string;
     shortDescription: string;
     figmaURL: string;
-    component: any;
+    component: ((props: import("./ToolbarBottomNav").ToolbarBottomNavProps) => import("react").JSX.Element) & {
+        Screen: (props: import("expo-router").ScreenProps<import("expo-router/build/react-navigation").HeaderOptions & {
+            title?: string;
+            tabBarLabel?: string | ((props: {
+                focused: boolean;
+                color: import("react-native").ColorValue;
+                position: import("expo-router/build/react-navigation/bottom-tabs/types").LabelPosition;
+                children: string;
+            }) => React.ReactNode);
+            tabBarShowLabel?: boolean;
+            tabBarLabelPosition?: import("expo-router/build/react-navigation/bottom-tabs/types").LabelPosition;
+            tabBarLabelStyle?: import("react-native").StyleProp<import("react-native").TextStyle>;
+            tabBarAllowFontScaling?: boolean;
+            tabBarIcon?: (props: {
+                focused: boolean;
+                color: import("react-native").ColorValue;
+                size: number;
+            }) => React.ReactNode;
+            tabBarIconStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+            tabBarBadge?: number | string;
+            tabBarBadgeStyle?: import("react-native").StyleProp<import("react-native").TextStyle>;
+            tabBarAccessibilityLabel?: string;
+            tabBarButtonTestID?: string;
+            tabBarButton?: (props: import("expo-router/build/react-navigation/bottom-tabs").BottomTabBarButtonProps) => React.ReactNode;
+            tabBarActiveTintColor?: import("react-native").ColorValue;
+            tabBarInactiveTintColor?: import("react-native").ColorValue;
+            tabBarActiveBackgroundColor?: import("react-native").ColorValue;
+            tabBarInactiveBackgroundColor?: import("react-native").ColorValue;
+            tabBarItemStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+            tabBarHideOnKeyboard?: boolean;
+            tabBarVisibilityAnimationConfig?: {
+                show?: import("expo-router/build/react-navigation/bottom-tabs/types").TabBarVisibilityAnimationConfig;
+                hide?: import("expo-router/build/react-navigation/bottom-tabs/types").TabBarVisibilityAnimationConfig;
+            };
+            tabBarVariant?: import("expo-router/build/react-navigation/bottom-tabs/types").Variant;
+            tabBarStyle?: import("react-native").Animated.WithAnimatedValue<import("react-native").StyleProp<import("react-native").ViewStyle>>;
+            tabBarBackground?: () => React.ReactNode;
+            tabBarPosition?: "bottom" | "left" | "right" | "top";
+            lazy?: boolean;
+            header?: (props: import("expo-router/build/react-navigation/bottom-tabs").BottomTabHeaderProps) => React.ReactNode;
+            headerShown?: boolean;
+            popToTopOnBlur?: boolean;
+            freezeOnBlur?: boolean;
+            sceneStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+            animation?: import("expo-router/build/react-navigation/bottom-tabs/types").TabAnimationName;
+            sceneStyleInterpolator?: import("expo-router/build/react-navigation/bottom-tabs/types").BottomTabSceneStyleInterpolator;
+            transitionSpec?: import("expo-router/build/react-navigation/bottom-tabs/types").TransitionSpec;
+        } & {
+            href?: import("expo-router").Href | null;
+        }, import("expo-router").TabNavigationState<import("expo-router/build/react-navigation").ParamListBase>, import("expo-router/build/react-navigation/bottom-tabs").BottomTabNavigationEventMap>) => null;
+        Icon: typeof import("./ToolbarBottomNavIcon").toolbarBottomNavIcon;
+    };
     styleFn: () => {
         tabBarStyle: {
             backgroundColor: string;
@@ -18,10 +69,6 @@ declare const _default: {
             readonly fontFamily: string;
             readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        tabBarItemStyle: {
-            padding: number;
-            margin: number;
-        };
         tabBarActiveTintColor: {
             color: string;
         };

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarBottomNav.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNav.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAUkB;AAElB;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,YAAa,CAAC;AAEvC,OAAO,KAAK,OAAO,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"ToolbarBottomNav.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNav.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAmCi7J,CAAC;oBAA+C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/Bl+J,wBAUkB;AAElB;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,YAAa,CAAC;AAEvC,OAAO,KAAK,OAAO,MAAM,oCAAoC,CAAC"}

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.styles.d.ts

@@ -10,10 +10,6 @@ export declare const useStyles: () => {
         readonly fontFamily: string;
         readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    tabBarItemStyle: {
-        padding: number;
-        margin: number;
-    };
     tabBarActiveTintColor: {
         color: string;
     };

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarBottomNav.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNav.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}
+{"version":3,"file":"ToolbarBottomNav.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNav.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAYnB,CAAC"}

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.styles.js

@@ -5,10 +5,6 @@ export const useStyles = makeStyles(({ text, color }) => ({
         borderColor: color.light.border['default-grey'],
     },
     tabBarLabelStyle: text['Corps de texte'].XS.Regular,
-    tabBarItemStyle: {
-        padding: 0,
-        margin: 0,
-    },
     tabBarActiveTintColor: {
         color: color.light.text['action-high-primary'],
     },

package/dist/ui/ToolbarBottomNav/index.d.ts

@@ -1,2 +1,8 @@
-export declare const ToolbarBottomNav: any;
+import { Tabs as ExpoTabs } from 'expo-router';
+import { ToolbarBottomNav as ToolbarBottomNavBase } from './ToolbarBottomNav';
+import { toolbarBottomNavIcon } from './ToolbarBottomNavIcon';
+export declare const ToolbarBottomNav: typeof ToolbarBottomNavBase & {
+    Screen: typeof ExpoTabs.Screen;
+    Icon: typeof toolbarBottomNavIcon;
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/ToolbarBottomNav/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,EAAE,GAG7B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,eAAO,MAAM,gBAAgB,EAAE,OAAO,oBAAoB,GAAG;IAC3D,MAAM,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CAIlC,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.d.ts

@@ -1,19 +1,4 @@
-import React from 'react';
-import { BoxProps } from '../../core';
-import { AvatarProps } from '../Avatar';
-import { IconProps } from '../LucideIcon';
-export type ToolbarTopProps = BoxProps & {
-    variant?: 'default' | 'large' | 'compactLarge';
-    title: string;
-    AvatarProps?: Omit<AvatarProps, 'size'>;
-    withBorder?: boolean;
-    onNavigate?: () => void;
-    navigationIcon?: IconProps['name'];
-    sousTitre?: string;
-    onActions?: () => void;
-    actionsIcon?: IconProps['name'];
-    actions?: React.ReactNode;
-    typographyStyle?: React.CSSProperties;
-};
-export declare const ToolbarTop: (props: ToolbarTopProps) => React.JSX.Element;
+import { ToolbarTopProps } from './ToolbarTop.types';
+export * from './ToolbarTop.types';
+export declare const ToolbarTop: (props: ToolbarTopProps) => import("react").JSX.Element;
 //# sourceMappingURL=ToolbarTop.d.ts.map

package/dist/ui/ToolbarTop/ToolbarTop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTop.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAwGhD,CAAC"}
+{"version":3,"file":"ToolbarTop.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAKrD,cAAc,oBAAoB,CAAC;AAEnC,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAmDhD,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.js

@@ -1,37 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
-import { Avatar } from '../Avatar';
-import { ButtonIcon } from '../Button';
+import { Box } from '../../core/Box';
 import { useStyles } from './ToolbarTop.styles';
+import { ToolbarTopInformation } from './ToolbarTopInformation';
+import { ToolbarTopNavigation } from './ToolbarTopNavigation';
+import { bordureDeLaBarre, dispositionDeLaBarre } from './toolbarTopStyling';
+export * from './ToolbarTop.types';
 export const ToolbarTop = (props) => {
-    const { variant = 'default', style, title, onNavigate, navigationIcon = 'ChevronLeft', AvatarProps, sousTitre, actions, withBorder = false, typographyStyle = {}, ...toolbarProps } = props;
+    const { variant = 'default', style, title, onNavigate: _onNavigate, navigationIcon: _navigationIcon, navigationLabel: _navigationLabel, AvatarProps, sousTitre, actions, withBorder = false, typographyStyle, ...toolbarProps } = props;
     const styles = useStyles();
-    const toolbarNavigation = onNavigate ? (_jsx(Box, { tag: "toolbar-navigation", style: styles.toolbarNavigation, children: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: navigationIcon, onPress: onNavigate }) })) : (_jsx(_Fragment, {}));
-    const toolbarInformation = (_jsxs(Box, { tag: "toolbar-information", style: {
-            ...styles.toolbarInformation,
-            ...(variant === 'compactLarge' ? styles.compactLargeInformations : {}),
-        }, children: [AvatarProps && _jsx(Avatar, { ...AvatarProps, size: "md", carre: true }), _jsxs(Box, { tag: "toolbar-information-title", style: styles.toolbarInformationTitle, children: [_jsx(Typography, { style: {
-                            ...styles.toolbarInformationTitleText,
-                            ...(variant === 'compactLarge' || variant === 'large' ? styles.largeInformationTitleText : {}),
-                            ...typographyStyle,
-                        }, children: title }), sousTitre && (_jsx(Typography, { style: {
-                            ...styles.toolbarInformationTitleSubText,
-                            ...(variant === 'compactLarge' || variant === 'large' ? styles.largeToolbarInformationTitleSubText : {}),
-                            ...typographyStyle,
-                        }, children: sousTitre }))] })] }));
-    const toolbarActions = actions ? (_jsx(Box, { tag: "toolbar-actions", style: styles.toolbarActions, children: actions })) : (_jsx(_Fragment, {}));
-    if (variant === 'large') {
-        return (_jsxs(Box, { tag: "toolbar", style: [
-                styles.toolbarContainer,
-                styles.largeToolbarContainer,
-                style,
-                withBorder ? styles.toolbarInformationWithBorder : {},
-            ], ...toolbarProps, children: [toolbarNavigation, _jsxs(Box, { tag: "toolbar-bas", children: [toolbarInformation, toolbarActions] })] }));
-    }
-    return (_jsxs(Box, { tag: "toolbar", style: [
-            styles.toolbarContainer,
-            variant === 'compactLarge' ? styles.compactLargetoolbarContainer : {},
-            style,
-            withBorder ? styles.toolbarInformationWithBorder : {},
-        ], ...toolbarProps, children: [toolbarNavigation, toolbarInformation, toolbarActions] }));
+    const empilee = variant === 'large';
+    // Les props sont transmises entieres, et non recomposees champ par champ : reassembler les
+    // trois separerait le geste de son nom, et il faudrait un cast pour recoller l'union.
+    const navigation = _jsx(ToolbarTopNavigation, { ...props });
+    const contenu = (_jsxs(_Fragment, { children: [_jsx(ToolbarTopInformation, { title: title, sousTitre: sousTitre, AvatarProps: AvatarProps, typographyStyle: typographyStyle, grandTitre: variant !== 'default', compact: variant === 'compactLarge' }), actions && (_jsx(Box, { tag: "toolbar-actions", style: styles.toolbarActions, children: actions }))] }));
+    return (_jsxs(Box, { tag: "toolbar", style: [dispositionDeLaBarre(styles, variant), style, bordureDeLaBarre(styles, withBorder)], ...toolbarProps, children: [navigation, empilee ? _jsx(Box, { tag: "toolbar-bas", children: contenu }) : contenu] }));
 };

package/dist/ui/ToolbarTop/ToolbarTop.stories.d.ts

@@ -5,44 +5,13 @@ declare const _default: {
     figmaURL: string;
     description: string;
     mobileOnly: true;
-    component: (props: import("./ToolbarTop").ToolbarTopProps) => import("react").JSX.Element;
+    component: (props: import("./ToolbarTop.types").ToolbarTopProps) => import("react").JSX.Element;
     styleFn: () => {
-        toolbarContainer: {
-            backgroundColor: "white";
+        toolbarActions: {
             display: "flex";
             flexDirection: "row";
+            justifyContent: "flex-end";
             alignItems: "center";
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-        };
-        compactLargetoolbarContainer: {
-            paddingTop: string | number;
-            paddingBottom: string | number;
-            paddingLeft: string | number;
-            paddingRight: string | number;
-        };
-        largeToolbarContainer: {
-            paddingTop: number;
-            paddingBottom: number;
-            paddingLeft: number;
-            paddingRight: number;
-            flexDirection: "column";
-            alignItems: "flex-start";
-        };
-        toolbarInformationWithBorder: {
-            borderBottomWidth: number;
-            borderLeftWidth: number;
-            borderRightWidth: number;
-            borderTopWidth: number;
-            borderStyle: "solid";
-            borderColor: string;
-        };
-        toolbarNavigation: {
-            display: "flex";
-            justifyContent: "center";
-            gap: string | number;
         };
         toolbarInformation: {
             display: "flex";
@@ -92,18 +61,42 @@ declare const _default: {
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        toolbarActions: {
+        toolbarContainer: {
+            backgroundColor: "white";
             display: "flex";
             flexDirection: "row";
-            justifyContent: "flex-end";
             alignItems: "center";
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
         };
-        toolbarInformationContainer: {
-            flex: number;
-            alignItems: "center";
+        compactLargetoolbarContainer: {
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+        };
+        largeToolbarContainer: {
+            paddingTop: number;
+            paddingBottom: number;
+            paddingLeft: number;
+            paddingRight: number;
+            flexDirection: "column";
+            alignItems: "flex-start";
+        };
+        toolbarInformationWithBorder: {
+            borderBottomWidth: number;
+            borderLeftWidth: number;
+            borderRightWidth: number;
+            borderTopWidth: number;
+            borderStyle: "solid";
+            borderColor: string;
+        };
+        toolbarNavigation: {
             display: "flex";
-            flexDirection: "row";
-            justifyContent: "space-between";
+            justifyContent: "center";
+            gap: string | number;
         };
     };
 };

package/dist/ui/ToolbarTop/ToolbarTop.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAA4D,CAAC;AAEjF,eAAO,MAAM,iBAAiB,mCAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAOnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,mCAahC,CAAC;AAEF,eAAO,MAAM,wBAAwB,mCAYpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,mCAAuE,CAAC;AAE/F,eAAO,MAAM,YAAY,mCAA0E,CAAC;AAEpG,eAAO,MAAM,KAAK,mCAEjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAA4D,CAAC;AAEjF,eAAO,MAAM,iBAAiB,mCAO7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAiBnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAkB/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,mCA4BhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,mCA2BpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,mCAAuE,CAAC;AAE/F,eAAO,MAAM,YAAY,mCAA0E,CAAC;AAEpG,eAAO,MAAM,KAAK,mCAQjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.stories.js

@@ -14,17 +14,17 @@ export default {
     styleFn: useStyles,
 };
 export const Default = () => _jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre" });
-export const AvecRetourArriere = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: () => router.back() }));
-export const SansAvatarEtAvecActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, actions: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }) }));
+export const AvecRetourArriere = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: () => router.back(), navigationLabel: "Revenir en arriere" }));
+export const SansAvatarEtAvecActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, navigationLabel: "Revenir en arriere", actions: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', accessibilityLabel: "Ajouter", onPress: console.log }) }));
 export const AvecAvatarSansActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", AvatarProps: { src: 'https://picsum.photos/100/200' } }));
-export const AvecAvatarEtActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }) }));
-export const AvecPlusieursActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Download', onPress: console.log })] }) }));
-export const AvecTitreEtSansSousTitre = () => (_jsx(ToolbarTop, { title: "Titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Download', onPress: console.log })] }) }));
+export const AvecAvatarEtActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, navigationLabel: "Revenir en arriere", AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', accessibilityLabel: "Ajouter", onPress: console.log }) }));
+export const AvecPlusieursActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, navigationLabel: "Revenir en arriere", AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', accessibilityLabel: "Ajouter", onPress: console.log }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Download', accessibilityLabel: "Telecharger", onPress: console.log })] }) }));
+export const AvecTitreEtSansSousTitre = () => (_jsx(ToolbarTop, { title: "Titre", onNavigate: console.log, navigationLabel: "Revenir en arriere", AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', accessibilityLabel: "Ajouter", onPress: console.log }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Download', accessibilityLabel: "Telecharger", onPress: console.log })] }) }));
 /**
  * En règle générale, `withBorder` est appliqué dynamiquement au scroll :
  * la bordure apparaît quand on a scrollé et disparaît en haut de la page.
  */
 export const AvecBorder = () => _jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", withBorder: true });
 export const CompactLarge = () => _jsx(ToolbarTop, { title: "Titre compact large", variant: "compactLarge" });
-export const Large = () => (_jsx(ToolbarTop, { title: "Titre large", variant: "large", onNavigate: console.log, sousTitre: "Sous-titre" }));
+export const Large = () => (_jsx(ToolbarTop, { title: "Titre large", variant: "large", onNavigate: console.log, navigationLabel: "Revenir en arriere", sousTitre: "Sous-titre" }));
 export * as Sources from './ToolbarTop.stories.sources';

package/dist/ui/ToolbarTop/ToolbarTop.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTop.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAgG,CAAC;AAErH,eAAO,MAAM,iBAAiB,cAAmJ,CAAC;AAElL,eAAO,MAAM,uBAAuB,cAAsR,CAAC;AAE3T,eAAO,MAAM,qBAAqB,cAA6K,CAAC;AAEhN,eAAO,MAAM,mBAAmB,cAA8U,CAAC;AAE/W,eAAO,MAAM,oBAAoB,cAAqe,CAAC;AAEvgB,eAAO,MAAM,wBAAwB,cAA2c,CAAC;AAEjf,eAAO,MAAM,UAAU,cAA8G,CAAC;AAEtI,eAAO,MAAM,YAAY,cAAmH,CAAC;AAE7I,eAAO,MAAM,KAAK,cAAuJ,CAAC;AAE1K,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}
+{"version":3,"file":"ToolbarTop.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAgG,CAAC;AAErH,eAAO,MAAM,iBAAiB,cAAiN,CAAC;AAEhP,eAAO,MAAM,uBAAuB,cAA4a,CAAC;AAEjd,eAAO,MAAM,qBAAqB,cAA6K,CAAC;AAEhN,eAAO,MAAM,mBAAmB,cAAoe,CAAC;AAErgB,eAAO,MAAM,oBAAoB,cAAyuB,CAAC;AAE3wB,eAAO,MAAM,wBAAwB,cAA+sB,CAAC;AAErvB,eAAO,MAAM,UAAU,cAA8G,CAAC;AAEtI,eAAO,MAAM,YAAY,cAAmH,CAAC;AAE7I,eAAO,MAAM,KAAK,cAA0N,CAAC;AAE7O,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.stories.sources.js

@@ -1,15 +1,15 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/ToolbarTop/ToolbarTop.stories.tsx
 export const Default = () => "export const Default = () => <ToolbarTop title=\"Titre\" sousTitre=\"Sous-titre\" />;";
-export const AvecRetourArriere = () => "export const AvecRetourArriere = () => (\n  <ToolbarTop title=\"Titre\" sousTitre=\"Sous-titre\" onNavigate={() => router.back()} />\n);";
-export const SansAvatarEtAvecActions = () => "export const SansAvatarEtAvecActions = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    sousTitre=\"Sous-titre\"\n    onNavigate={console.log}\n    actions={<ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Plus'} onPress={console.log} />}\n  />\n);";
+export const AvecRetourArriere = () => "export const AvecRetourArriere = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    sousTitre=\"Sous-titre\"\n    onNavigate={() => router.back()}\n    navigationLabel=\"Revenir en arriere\"\n  />\n);";
+export const SansAvatarEtAvecActions = () => "export const SansAvatarEtAvecActions = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    sousTitre=\"Sous-titre\"\n    onNavigate={console.log}\n    navigationLabel=\"Revenir en arriere\"\n    actions={\n      <ButtonIcon\n        variant=\"tertiary\"\n        size=\"lg\"\n        iconSize=\"md\"\n        icon={'Plus'}\n        accessibilityLabel=\"Ajouter\"\n        onPress={console.log}\n      />\n    }\n  />\n);";
 export const AvecAvatarSansActions = () => "export const AvecAvatarSansActions = () => (\n  <ToolbarTop title=\"Titre\" sousTitre=\"Sous-titre\" AvatarProps={{ src: 'https://picsum.photos/100/200' }} />\n);";
-export const AvecAvatarEtActions = () => "export const AvecAvatarEtActions = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    sousTitre=\"Sous-titre\"\n    onNavigate={console.log}\n    AvatarProps={{ src: 'https://picsum.photos/100/200' }}\n    actions={<ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Plus'} onPress={console.log} />}\n  />\n);";
-export const AvecPlusieursActions = () => "export const AvecPlusieursActions = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    sousTitre=\"Sous-titre\"\n    onNavigate={console.log}\n    AvatarProps={{ src: 'https://picsum.photos/100/200' }}\n    actions={\n      <>\n        <ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Plus'} onPress={console.log} />\n        <ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Download'} onPress={console.log} />\n      </>\n    }\n  />\n);";
-export const AvecTitreEtSansSousTitre = () => "export const AvecTitreEtSansSousTitre = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    onNavigate={console.log}\n    AvatarProps={{ src: 'https://picsum.photos/100/200' }}\n    actions={\n      <>\n        <ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Plus'} onPress={console.log} />\n        <ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Download'} onPress={console.log} />\n      </>\n    }\n  />\n);";
+export const AvecAvatarEtActions = () => "export const AvecAvatarEtActions = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    sousTitre=\"Sous-titre\"\n    onNavigate={console.log}\n    navigationLabel=\"Revenir en arriere\"\n    AvatarProps={{ src: 'https://picsum.photos/100/200' }}\n    actions={\n      <ButtonIcon\n        variant=\"tertiary\"\n        size=\"lg\"\n        iconSize=\"md\"\n        icon={'Plus'}\n        accessibilityLabel=\"Ajouter\"\n        onPress={console.log}\n      />\n    }\n  />\n);";
+export const AvecPlusieursActions = () => "export const AvecPlusieursActions = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    sousTitre=\"Sous-titre\"\n    onNavigate={console.log}\n    navigationLabel=\"Revenir en arriere\"\n    AvatarProps={{ src: 'https://picsum.photos/100/200' }}\n    actions={\n      <>\n        <ButtonIcon\n          variant=\"tertiary\"\n          size=\"lg\"\n          iconSize=\"md\"\n          icon={'Plus'}\n          accessibilityLabel=\"Ajouter\"\n          onPress={console.log}\n        />\n        <ButtonIcon\n          variant=\"tertiary\"\n          size=\"lg\"\n          iconSize=\"md\"\n          icon={'Download'}\n          accessibilityLabel=\"Telecharger\"\n          onPress={console.log}\n        />\n      </>\n    }\n  />\n);";
+export const AvecTitreEtSansSousTitre = () => "export const AvecTitreEtSansSousTitre = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    onNavigate={console.log}\n    navigationLabel=\"Revenir en arriere\"\n    AvatarProps={{ src: 'https://picsum.photos/100/200' }}\n    actions={\n      <>\n        <ButtonIcon\n          variant=\"tertiary\"\n          size=\"lg\"\n          iconSize=\"md\"\n          icon={'Plus'}\n          accessibilityLabel=\"Ajouter\"\n          onPress={console.log}\n        />\n        <ButtonIcon\n          variant=\"tertiary\"\n          size=\"lg\"\n          iconSize=\"md\"\n          icon={'Download'}\n          accessibilityLabel=\"Telecharger\"\n          onPress={console.log}\n        />\n      </>\n    }\n  />\n);";
 export const AvecBorder = () => "export const AvecBorder = () => <ToolbarTop title=\"Titre\" sousTitre=\"Sous-titre\" withBorder />;";
 export const CompactLarge = () => "export const CompactLarge = () => <ToolbarTop title=\"Titre compact large\" variant=\"compactLarge\" />;";
-export const Large = () => "export const Large = () => (\n  <ToolbarTop title=\"Titre large\" variant=\"large\" onNavigate={console.log} sousTitre=\"Sous-titre\" />\n);";
+export const Large = () => "export const Large = () => (\n  <ToolbarTop\n    title=\"Titre large\"\n    variant=\"large\"\n    onNavigate={console.log}\n    navigationLabel=\"Revenir en arriere\"\n    sousTitre=\"Sous-titre\"\n  />\n);";
 export const storySources = {
     Default,
     AvecRetourArriere,

package/dist/ui/ToolbarTop/ToolbarTop.styles.d.ts

@@ -1,40 +1,9 @@
 export declare const useStyles: () => {
-    toolbarContainer: {
-        backgroundColor: "white";
+    toolbarActions: {
         display: "flex";
         flexDirection: "row";
+        justifyContent: "flex-end";
         alignItems: "center";
-        paddingLeft: string | number;
-        paddingRight: string | number;
-        paddingTop: string | number;
-        paddingBottom: string | number;
-    };
-    compactLargetoolbarContainer: {
-        paddingTop: string | number;
-        paddingBottom: string | number;
-        paddingLeft: string | number;
-        paddingRight: string | number;
-    };
-    largeToolbarContainer: {
-        paddingTop: number;
-        paddingBottom: number;
-        paddingLeft: number;
-        paddingRight: number;
-        flexDirection: "column";
-        alignItems: "flex-start";
-    };
-    toolbarInformationWithBorder: {
-        borderBottomWidth: number;
-        borderLeftWidth: number;
-        borderRightWidth: number;
-        borderTopWidth: number;
-        borderStyle: "solid";
-        borderColor: string;
-    };
-    toolbarNavigation: {
-        display: "flex";
-        justifyContent: "center";
-        gap: string | number;
     };
     toolbarInformation: {
         display: "flex";
@@ -84,18 +53,42 @@ export declare const useStyles: () => {
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    toolbarActions: {
+    toolbarContainer: {
+        backgroundColor: "white";
         display: "flex";
         flexDirection: "row";
-        justifyContent: "flex-end";
         alignItems: "center";
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
-    toolbarInformationContainer: {
-        flex: number;
-        alignItems: "center";
+    compactLargetoolbarContainer: {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    largeToolbarContainer: {
+        paddingTop: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        paddingRight: number;
+        flexDirection: "column";
+        alignItems: "flex-start";
+    };
+    toolbarInformationWithBorder: {
+        borderBottomWidth: number;
+        borderLeftWidth: number;
+        borderRightWidth: number;
+        borderTopWidth: number;
+        borderStyle: "solid";
+        borderColor: string;
+    };
+    toolbarNavigation: {
         display: "flex";
-        flexDirection: "row";
-        justifyContent: "space-between";
+        justifyContent: "center";
+        gap: string | number;
     };
 };
 //# sourceMappingURL=ToolbarTop.styles.d.ts.map