@axelor/aos-mobile-ui 8.3.7 → 8.4.0

package/README.md

@@ -20,6 +20,7 @@ It contains:
 - Writing themes management system with basic theme
 - UseOutsideClick hook to notify components when the user clicked outside of itself
 - Basic animation tools
+- and many more...
 
 ## Usage
 
@@ -29,207 +30,9 @@ Install the library :
 yarn add @axelor/aos-mobile-ui
 ```
 
-Compatibility with React v18.2.x and React Native v0.70.x.
-
 This package has a few required libraries as peer dependencies, please check package.json for more informations.
 
-### Use of basic components
-
-You can import components from the main bundle:
-
-```typescript
-import {Button} from '@axelor/aos-mobile-ui';
-```
-
-Then, you can use it as a regular component with the specified props :
-
-```typescript
-<Button title="Save" onPress={() => console.log('Pressed')} />
-```
-
-### Use themes management system
-
-This package provides a context to manage themes system. To use this context you need to wrap your application with the ThemeProvider component. You can also define additional themes and the default theme value through the component props:
-
-```typescript
-import { ThemeProvider } from '@axelor/aos-mobile-ui';
-
-...
-
-<ThemeProvider themes={themes} defaultTheme={defaultTheme}>
-    ...
-</ThemeProvider>
-```
-
-A theme in the application has the following structure:
-
-```typescript
-export interface Theme {
-  key: string;
-  name: string;
-  colors: ThemeColors;
-}
-
-export interface ThemeColors {
-  screenBackgroundColor: string;
-  backgroundColor: string;
-  primaryColor: Color;
-  secondaryColor: Color;
-  secondaryColor_dark: Color;
-  errorColor: Color;
-  cautionColor: Color;
-  plannedColor: Color;
-  progressColor: Color;
-  priorityColor: Color;
-  defaultColor: Color;
-  importantColor: Color;
-  successColor: Color;
-  warningColor: Color;
-  inverseColor: Color;
-  infoColor: Color;
-  text: string;
-  placeholderTextColor: string;
-}
-
-export interface Color {
-  background_light: string; // This color is a lighter variation of the main color
-  foreground: string; // This color is mainly used for text to maintain a good contrast with the background color
-  background: string; // This is the main color for this structure
-}
-```
-
-Once the context is in place, you can access current theme colors with the hook `useThemeColor`. Then, you can use the colors directly in your components:
-
-```typescript
-import { Button, useThemeColor } from '@axelor/aos-mobile-ui';
-
-...
-
-const Colors = useThemeColor();
-
-...
-<Button
-    title="Save"
-    color={Colors.primaryColor}
-    onPress={() => console.log("Pressed")}
-/>
-```
-
-### Use writing themes management system
-
-Writing themes management system is based on the same structure as theme system defined above with a context provider called `WritingThemeProvider`.
-
-A writing theme in the application has the following structure:
-
-```typescript
-export interface Writing {
-  key: string;
-  name: string;
-  style: WritingStyles;
-}
-
-export interface WritingStyles {
-  defaultSize: number;
-  title: TextStyle;
-  subTitle: TextStyle;
-  textImportant: TextStyle;
-  textDetails: TextStyle;
-}
-
-export interface TextStyle {
-  fontSize?: number;
-  fontWeight?: 'normal' | 'bold';
-  fontStyle?: 'normal' | 'italic';
-}
-```
-
-Once the context is in place, you can access the current theme with the hook `useWritingStyle`. Then, you can use the writing styles directly in your components:
-
-```typescript
-import { Text, useWritingStyle } from '@axelor/aos-mobile-ui';
-
-...
-
-const Writing = useWritingStyle();
-
-...
-<Text style={Writing.title}>Hello World</Text>
-```
-
-### Use outside click notifier
-
-This package provides a context provider to notify components when the user clicks out, this provider is called `OutsideAlerterProvider` and should wrap the application component.
-
-Once the context is in place, you can ask to be notified in the component by using the hook `useClickOutside`. This hook needs the reference of the global view of your component and a boolean to know if the component is active:
-
-```typescript
-import { OUTSIDE_INDICATOR, useClickOutside } from '@axelor/aos-mobile-ui';
-
-...
-
-const ComponentName = (...) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const wrapperRef = useRef(null);
-  const clickOutside = useClickOutside({wrapperRef, visible: isOpen});
-
-  useEffect(() => {
-    if (clickOutside === OUTSIDE_INDICATOR && isOpen) {
-      setIsOpen(false);
-    }
-  }, [clickOutside, isOpen]);
-
-  return (
-    <View ref={wrapperRef}>
-      ...
-    </View>
-  );
-};
-```
-
-### Use animation tools
-
-This package provides basic tools to create animation in your application.
-
-All you have to do is to call the method `animateNext` from the object `animationUtil`. This method can take the animation config as an optional parameter or nothing. If nothing is provided, it will use the default config defined in the package:
-
-```typescript
-  {
-    easeInEaseOut: LayoutAnimation.Presets.easeInEaseOut,
-    linear: LayoutAnimation.Presets.linear,
-    spring: LayoutAnimation.Presets.spring,
-  };
-```
-
-For example, if you want to animate the appearance and disappearance of a component children:
-
-```typescript
-import { animationUtil, Icon, useThemeColor } from '@axelor/aos-mobile-ui';
-
-...
-
-const ComponentName = ({children}) => {
-  const [isVisible, setVisible] = useState(true);
-  const Colors = useThemeColor();
-
-  const handleExpandPress = useCallback(() => {
-    animationUtil.animateNext();
-    setVisible(!isVisible);
-  }, [isVisible]);
-
-  return (
-    <View>
-        {isVisible && children}
-        <TouchableOpacity onPress={handleExpandPress}>
-          <Icon
-            name={isVisible ? 'angle-up' : 'angle-down'}
-            size={22}
-            color={Colors.primaryColor.background}
-          />
-        </TouchableOpacity>
-    </View>
-  );
-};
-```
+For more information about how to use the tools, please check the [documentation](https://docs.axelor.com/aos-mobile/).
 
 ## Developpment
 

package/lib/components/atoms/BootstrapIcon/BootstrapIcon.js

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import Svg, { Path } from 'react-native-svg';
+import { Svg, Path } from 'react-native-svg';
 import Text from '../Text/Text';
 import iconsMap from '../../../icons/bootstrap-icon-map.json';
 import { useThemeColor } from '../../../theme';
@@ -27,7 +27,7 @@ const BootstrapIcon = ({ name, size, color, style }) => {
     }
     const _pathList = iconsMap[name];
     if (_pathList) {
-        return (<Svg width={size} height={size} viewBox="0 0 16 16" fill={color} style={style}>
+        return (<Svg width={size} height={size} viewBox="0 0 16 16" fill={color} style={style} testID="icon">
         {_pathList.map((_path, index) => (<Path key={index} d={_path}/>))}
       </Svg>);
     }

package/lib/components/atoms/BootstrapIcon/BootstrapIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BootstrapIcon.js","sourceRoot":"","sources":["../../../../src/components/atoms/BootstrapIcon/BootstrapIcon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,GAAG,EAAE,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAC3C,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,QAAQ,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAS7C,MAAM,aAAa,GAAG,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAqB,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,IAAI,QAAQ,IAAI,IAAI,EAAE;QACpB,OAAO,IAAI,CAAC;KACb;IAED,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjC,IAAI,SAAS,EAAE;QACb,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,OAAO,CAAC,WAAW,CACnB,IAAI,CAAC,CAAC,KAAK,CAAC,CACZ,KAAK,CAAC,CAAC,KAAK,CAAC,CACb;QAAA,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAG,CAC/B,CAAC,CACJ;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;KACH;IAED,OAAO,CACL,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,CAAC,CACjD,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,IAAI,GAAG,CAAC;SACnB,CAAC,CACF;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC"}
+{"version":3,"file":"BootstrapIcon.js","sourceRoot":"","sources":["../../../../src/components/atoms/BootstrapIcon/BootstrapIcon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAC3C,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,QAAQ,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAS7C,MAAM,aAAa,GAAG,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAqB,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,IAAI,QAAQ,IAAI,IAAI,EAAE;QACpB,OAAO,IAAI,CAAC;KACb;IAED,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjC,IAAI,SAAS,EAAE;QACb,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,OAAO,CAAC,WAAW,CACnB,IAAI,CAAC,CAAC,KAAK,CAAC,CACZ,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,MAAM,CACb;QAAA,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAG,CAC/B,CAAC,CACJ;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;KACH;IAED,OAAO,CACL,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,CAAC,CACjD,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,IAAI,GAAG,CAAC;SACnB,CAAC,CACF;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC"}

package/lib/components/atoms/Icon/Icon.d.ts

@@ -2,19 +2,11 @@ import React from 'react';
 interface IconProps {
     style?: any;
     name: string;
-    /**
-     * @deprecated The prop should not be used anymore. FontAwesome icons will be removed in next version.
-     */
-    isFontAwesome4?: boolean;
-    /**
-     * @deprecated The prop should not be used anymore. FontAwesome icons will be removed in next version.
-     */
-    isFontAwesome5?: boolean;
     color?: string;
     size?: number;
     touchable?: boolean;
     visible?: boolean;
     onPress?: () => void;
 }
-declare const Icon: ({ style, name, isFontAwesome4, isFontAwesome5, color, size, touchable, visible, onPress, }: IconProps) => React.JSX.Element;
+declare const Icon: ({ style, name, color, size, touchable, visible, onPress, }: IconProps) => React.JSX.Element;
 export default Icon;

package/lib/components/atoms/Icon/Icon.js

@@ -15,40 +15,21 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import React, { useMemo, useCallback } from 'react';
-import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
-import Icon5 from 'react-native-vector-icons/FontAwesome5';
-import Icon4 from 'react-native-vector-icons/FontAwesome';
+import React, { useMemo } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useThemeColor } from '../../../theme';
 import BootstrapIcon from '../BootstrapIcon/BootstrapIcon';
-const Icon = ({ style, name, isFontAwesome4 = false, isFontAwesome5 = false, color, size = 18, touchable = false, visible = true, onPress = () => { }, }) => {
+const Icon = ({ style, name, color, size = 18, touchable = false, visible = true, onPress = () => { }, }) => {
     const Colors = useThemeColor();
-    const styles = useMemo(() => {
-        return getStyles(color == null ? Colors.secondaryColor_dark.background : color, size);
-    }, [Colors, color, size]);
-    const renderIcon = useCallback(() => {
-        if (isFontAwesome5 && Platform.OS !== 'web') {
-            return <Icon5 name={name} style={styles.icon}/>;
-        }
-        else if (isFontAwesome4) {
-            return <Icon4 name={name} style={styles.icon}/>;
-        }
-        else {
-            return <BootstrapIcon name={name} size={size} color={color}/>;
-        }
-    }, [color, isFontAwesome4, isFontAwesome5, name, size, styles]);
+    const _color = useMemo(() => color ?? Colors.secondaryColor_dark.background, [Colors.secondaryColor_dark.background, color]);
     if (!visible) {
         return null;
     }
     return (<TouchableOpacity style={[styles.container, style]} onPress={onPress} disabled={!touchable}>
-      {renderIcon()}
+      <BootstrapIcon name={name} size={size} color={_color}/>
     </TouchableOpacity>);
 };
-const getStyles = (color, size) => StyleSheet.create({
-    icon: {
-        color: color,
-        fontSize: size,
-    },
+const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
         justifyContent: 'center',

package/lib/components/atoms/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/Icon/Icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAE,WAAW,EAAC,MAAM,OAAO,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAC3D,OAAO,KAAK,MAAM,uCAAuC,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC7C,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAoB3D,MAAM,IAAI,GAAG,CAAC,EACZ,KAAK,EACL,IAAI,EACJ,cAAc,GAAG,KAAK,EACtB,cAAc,GAAG,KAAK,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GACR,EAAE,EAAE;IACd,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,OAAO,SAAS,CACd,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,EAC7D,IAAI,CACL,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,cAAc,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;YAC3C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAG,CAAC;SAClD;aAAM,IAAI,cAAc,EAAE;YACzB,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAG,CAAC;SAClD;aAAM;YACL,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;SAChE;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhE,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACjC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CACrB;MAAA,CAAC,UAAU,EAAE,CACf;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAChC,UAAU,CAAC,MAAM,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,IAAI;KACf;IACD,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC;AAEL,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/Icon/Icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC7C,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAY3D,MAAM,IAAI,GAAG,CAAC,EACZ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GACR,EAAE,EAAE;IACd,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,KAAK,IAAI,MAAM,CAAC,mBAAmB,CAAC,UAAU,EACpD,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,KAAK,CAAC,CAC/C,CAAC;IAEF,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACjC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CACrB;MAAA,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,EACvD;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/atoms/ProgressCircle/ProgressCircle.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ProgressCircleProps {
+    circleSize?: number;
+    strokeWidth?: number;
+    isError?: boolean;
+    progress: number;
+    innerText?: string;
+    writingType?: 'title' | 'subtitle' | 'important' | 'details' | undefined;
+    textStyle?: any;
+}
+declare const ProgressCircle: ({ circleSize, strokeWidth, isError, progress, innerText, writingType, textStyle, }: ProgressCircleProps) => React.JSX.Element;
+export default ProgressCircle;

package/lib/components/atoms/ProgressCircle/ProgressCircle.js

@@ -0,0 +1,54 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2025 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Svg, Circle } from 'react-native-svg';
+import { useThemeColor } from '../../../theme';
+import { Text } from '../../atoms';
+const ProgressCircle = ({ circleSize = 80, strokeWidth = 4, isError = false, progress, innerText, writingType = 'important', textStyle, }) => {
+    const Colors = useThemeColor();
+    const { radius, circumference, strokeDashoffset } = useMemo(() => {
+        const _radius = circleSize / 2 - strokeWidth / 2;
+        const _circumference = 2 * Math.PI * _radius;
+        return {
+            radius: _radius,
+            circumference: _circumference,
+            strokeDashoffset: _circumference - _circumference * progress,
+        };
+    }, [circleSize, progress, strokeWidth]);
+    return (<Svg width={circleSize} height={circleSize}>
+      <Circle cx={circleSize / 2} cy={circleSize / 2} r={radius} stroke={Colors.secondaryColor.background_light} strokeWidth={strokeWidth} fill="none" testID="internal-circle"/>
+      <Circle cx={circleSize / 2} cy={circleSize / 2} r={radius} stroke={isError
+            ? Colors.errorColor.background
+            : Colors.successColor.background} strokeLinecap="round" strokeWidth={strokeWidth} strokeDasharray={`${circumference} ${circumference}`} strokeDashoffset={strokeDashoffset} rotation="-90" origin={`${circleSize / 2}, ${circleSize / 2}`} fill="none" testID="progress-circle"/>
+      <View style={styles.textContainer}>
+        <Text writingType={writingType} style={textStyle} adjustsFontSizeToFit>
+          {innerText}
+        </Text>
+      </View>
+    </Svg>);
+};
+const styles = StyleSheet.create({
+    textContainer: {
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+export default ProgressCircle;
+//# sourceMappingURL=ProgressCircle.js.map

package/lib/components/atoms/ProgressCircle/ProgressCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.js","sourceRoot":"","sources":["../../../../src/components/atoms/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":"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"}

package/lib/components/atoms/index.d.ts

@@ -1,12 +1,13 @@
 export { default as BlockInteractionScreen } from './BlockInteractionScreen/BlockInteractionScreen';
 export { default as BootstrapIcon } from './BootstrapIcon/BootstrapIcon';
 export { default as Card } from './Card/Card';
+export { default as DottedLine } from './DottedLine/DottedLine';
 export { default as HorizontalRule } from './HorizontalRule/HorizontalRule';
 export { default as HtmlInput } from './HtmlInput/HtmlInput';
-export { default as DottedLine } from './DottedLine/DottedLine';
 export { default as Icon } from './Icon/Icon';
 export { default as Input } from './Input/Input';
 export { default as KeyboardAvoidingScrollView } from './KeyboardAvoidingScrollView/KeyboardAvoidingScrollView';
+export { default as ProgressCircle } from './ProgressCircle/ProgressCircle';
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as Screen } from './Screen/Screen';
 export { default as ScrollView } from './ScrollView/ScrollView';

package/lib/components/atoms/index.js

@@ -18,12 +18,13 @@
 export { default as BlockInteractionScreen } from './BlockInteractionScreen/BlockInteractionScreen';
 export { default as BootstrapIcon } from './BootstrapIcon/BootstrapIcon';
 export { default as Card } from './Card/Card';
+export { default as DottedLine } from './DottedLine/DottedLine';
 export { default as HorizontalRule } from './HorizontalRule/HorizontalRule';
 export { default as HtmlInput } from './HtmlInput/HtmlInput';
-export { default as DottedLine } from './DottedLine/DottedLine';
 export { default as Icon } from './Icon/Icon';
 export { default as Input } from './Input/Input';
 export { default as KeyboardAvoidingScrollView } from './KeyboardAvoidingScrollView/KeyboardAvoidingScrollView';
+export { default as ProgressCircle } from './ProgressCircle/ProgressCircle';
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as Screen } from './Screen/Screen';
 export { default as ScrollView } from './ScrollView/ScrollView';

package/lib/components/atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/atoms/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,OAAO,IAAI,sBAAsB,EAAC,MAAM,iDAAiD,CAAC;AAClG,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAC,OAAO,IAAI,0BAA0B,EAAC,MAAM,yDAAyD,CAAC;AAC9G,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/atoms/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,OAAO,IAAI,sBAAsB,EAAC,MAAM,iDAAiD,CAAC;AAClG,OAAO,EAAC,OAAO,IAAI,aAAa,EAAC,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAC,OAAO,IAAI,0BAA0B,EAAC,MAAM,yDAAyD,CAAC;AAC9G,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAC,OAAO,IAAI,WAAW,EAAC,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC"}

package/lib/components/molecules/Button/Button.js

@@ -45,7 +45,7 @@ const Button = ({ width = '90%', color, isNeutralBackground = false, iconName, i
     if (!iconName && !title) {
         return null;
     }
-    return (<TouchableOpacity style={[commonStyles.button, styles.colorButton, style]} onPress={disabled ? onDisabledPress : onPress} disabled={disabled && !onDisabledPress} activeOpacity={0.9}>
+    return (<TouchableOpacity style={[commonStyles.button, styles.colorButton, style]} onPress={disabled ? onDisabledPress : onPress} disabled={disabled && !onDisabledPress} activeOpacity={0.9} accessibilityRole="button">
       {!!iconName && (<Icon name={iconName} size={iconSize} color={buttonColor.foreground} style={[styles.icon, styleIcon]}/>)}
       {!!title && (<Text style={[styles.text, styleTxt]} fontSize={17} textColor={buttonColor.foreground}>
           {title}

package/lib/components/molecules/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/molecules/Button/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/molecules/Button/Button.tsx"],"names":[],"mappings":"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"}

package/lib/components/molecules/DropdownMenu/DropdownMenu.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 interface DropdownMenuProps {
+    style?: any;
+    styleMenu?: any;
     children: any;
 }
-declare const DropdownMenu: ({ children }: DropdownMenuProps) => React.JSX.Element;
+declare const DropdownMenu: ({ style, styleMenu, children }: DropdownMenuProps) => React.JSX.Element;
 export default DropdownMenu;

package/lib/components/molecules/DropdownMenu/DropdownMenu.js

@@ -20,7 +20,7 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { OUTSIDE_INDICATOR, useClickOutside, } from '../../../hooks/use-click-outside';
 import { useThemeColor } from '../../../theme';
 import { Card, Icon } from '../../atoms';
-const DropdownMenu = ({ children }) => {
+const DropdownMenu = ({ style, styleMenu, children }) => {
     const [visible, setVisible] = useState(false);
     const Colors = useThemeColor();
     const wrapperRef = useRef(null);
@@ -31,13 +31,13 @@ const DropdownMenu = ({ children }) => {
             setVisible(false);
         }
     }, [clickOutside, visible]);
-    return (<View ref={wrapperRef}>
+    return (<View style={style} ref={wrapperRef}>
       <TouchableOpacity style={styles.action} onPress={() => {
             setVisible(!visible);
         }}>
         <Icon name="three-dots-vertical" color={Colors.primaryColor.background} size={22}/>
       </TouchableOpacity>
-      {visible && <Card style={styles.menuContainer}>{children}</Card>}
+      {visible && (<Card style={[styles.menuContainer, styleMenu]}>{children}</Card>)}
     </View>);
 };
 const getStyles = (Colors) => StyleSheet.create({
@@ -54,10 +54,7 @@ const getStyles = (Colors) => StyleSheet.create({
         shadowColor: Colors.secondaryColor.background,
         shadowOffset: { width: 0, height: 0 },
     },
-    action: {
-        padding: 5,
-        paddingLeft: 15,
-    },
+    action: { padding: 5, paddingLeft: 15 },
 });
 export default DropdownMenu;
 //# sourceMappingURL=DropdownMenu.js.map

package/lib/components/molecules/DropdownMenu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../src/components/molecules/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAClE,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAChE,OAAO,EACL,iBAAiB,EACjB,eAAe,GAChB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAc,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,aAAa,CAAC;AAMvC,MAAM,YAAY,GAAG,CAAC,EAAC,QAAQ,EAAoB,EAAE,EAAE;IACrD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,eAAe,CAAC,EAAC,UAAU,EAAC,CAAC,CAAC;IAEnD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,KAAK,iBAAiB,IAAI,OAAO,EAAE;YACjD,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CACpB;MAAA,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACrB,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC,CAAC,CACF;QAAA,CAAC,IAAI,CACH,IAAI,CAAC,qBAAqB,CAC1B,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CACtC,IAAI,CAAC,CAAC,EAAE,CAAC,EAEb;MAAA,EAAE,gBAAgB,CAClB;MAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAClE;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,MAAmB,EAAE,EAAE,CACxC,UAAU,CAAC,MAAM,CAAC;IAChB,aAAa,EAAE;QACb,KAAK,EAAE,GAAG;QACV,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,CAAC,EAAE;QACV,YAAY,EAAE,CAAC;QACf,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,CAAC;QAClB,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,CAAC;QACZ,aAAa,EAAE,GAAG;QAClB,WAAW,EAAE,MAAM,CAAC,cAAc,CAAC,UAAU;QAC7C,YAAY,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAC;KACpC;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC;QACV,WAAW,EAAE,EAAE;KAChB;CACF,CAAC,CAAC;AAEL,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../src/components/molecules/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAClE,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAChE,OAAO,EACL,iBAAiB,EACjB,eAAe,GAChB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAc,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,aAAa,CAAC;AAQvC,MAAM,YAAY,GAAG,CAAC,EAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAoB,EAAE,EAAE;IACvE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,eAAe,CAAC,EAAC,UAAU,EAAC,CAAC,CAAC;IAEnD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,KAAK,iBAAiB,IAAI,OAAO,EAAE;YACjD,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAClC;MAAA,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACrB,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC,CAAC,CACF;QAAA,CAAC,IAAI,CACH,IAAI,CAAC,qBAAqB,CAC1B,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CACtC,IAAI,CAAC,CAAC,EAAE,CAAC,EAEb;MAAA,EAAE,gBAAgB,CAClB;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAClE,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,MAAmB,EAAE,EAAE,CACxC,UAAU,CAAC,MAAM,CAAC;IAChB,aAAa,EAAE;QACb,KAAK,EAAE,GAAG;QACV,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,CAAC,EAAE;QACV,YAAY,EAAE,CAAC;QACf,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,CAAC;QAClB,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,CAAC;QACZ,aAAa,EAAE,GAAG;QAClB,WAAW,EAAE,MAAM,CAAC,cAAc,CAAC,UAAU;QAC7C,YAAY,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAC;KACpC;IACD,MAAM,EAAE,EAAC,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAC;CACtC,CAAC,CAAC;AAEL,eAAe,YAAY,CAAC"}

package/lib/components/molecules/RightIconButton/RightIconButton.js

@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        paddingLeft: 20,
+        paddingLeft: 12,
         paddingRight: 15,
         paddingVertical: 5,
         marginVertical: 4,

package/lib/components/molecules/Stepper/StepList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Step } from './types';
+interface StepListProps {
+    steps: Step[];
+    translator: (key: string, values?: any) => string;
+}
+declare const StepList: ({ steps, translator }: StepListProps) => React.JSX.Element;
+export default StepList;

package/lib/components/molecules/Stepper/StepList.js

@@ -0,0 +1,80 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2025 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useThemeColor } from '../../../theme';
+import { Icon, Text } from '../../atoms';
+import { StepState } from './types';
+const StepList = ({ steps, translator }) => {
+    const Colors = useThemeColor();
+    const getIconName = (state) => {
+        switch (state) {
+            case StepState.inProgress:
+                return 'record-circle';
+            case StepState.completed:
+                return 'check-circle';
+            case StepState.error:
+                return 'exclamation-circle';
+            default:
+                return 'circle';
+        }
+    };
+    const getIconColor = (state) => {
+        switch (state) {
+            case StepState.inProgress:
+                return Colors.progressColor.background;
+            case StepState.completed:
+                return Colors.successColor.background;
+            case StepState.error:
+                return Colors.errorColor.background;
+            default:
+                return Colors.secondaryColor.background;
+        }
+    };
+    return (<View style={styles.container}>
+      {steps.map((step, index) => (<View style={styles.stepWrapper} key={index}>
+          <View style={styles.stepColumn}>
+            <Icon name={getIconName(step.state)} color={getIconColor(step.state)}/>
+            {index < steps.length - 1 && (<View style={[
+                    styles.verticalLine,
+                    { backgroundColor: getIconColor(step.state) },
+                ]}/>)}
+          </View>
+          <Text>{translator(step.titleKey)}</Text>
+        </View>))}
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        marginTop: 10,
+    },
+    stepWrapper: {
+        flexDirection: 'row',
+    },
+    stepColumn: {
+        alignItems: 'center',
+        marginRight: 15,
+    },
+    verticalLine: {
+        width: 1,
+        height: 10,
+        marginVertical: 5,
+    },
+});
+export default StepList;
+//# sourceMappingURL=StepList.js.map

package/lib/components/molecules/Stepper/StepList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepList.js","sourceRoot":"","sources":["../../../../src/components/molecules/Stepper/StepList.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,aAAa,CAAC;AACvC,OAAO,EAAO,SAAS,EAAC,MAAM,SAAS,CAAC;AAOxC,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,UAAU,EAAgB,EAAE,EAAE;IACtD,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,MAAM,WAAW,GAAG,CAAC,KAAgB,EAAE,EAAE;QACvC,QAAQ,KAAK,EAAE;YACb,KAAK,SAAS,CAAC,UAAU;gBACvB,OAAO,eAAe,CAAC;YACzB,KAAK,SAAS,CAAC,SAAS;gBACtB,OAAO,cAAc,CAAC;YACxB,KAAK,SAAS,CAAC,KAAK;gBAClB,OAAO,oBAAoB,CAAC;YAC9B;gBACE,OAAO,QAAQ,CAAC;SACnB;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,EAAE;QACxC,QAAQ,KAAK,EAAE;YACb,KAAK,SAAS,CAAC,UAAU;gBACvB,OAAO,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC;YACzC,KAAK,SAAS,CAAC,SAAS;gBACtB,OAAO,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC;YACxC,KAAK,SAAS,CAAC,KAAK;gBAClB,OAAO,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC;YACtC;gBACE,OAAO,MAAM,CAAC,cAAc,CAAC,UAAU,CAAC;SAC3C;IACH,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAC1C;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAC7B;YAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAC9B,KAAK,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAElC;YAAA,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;oBACL,MAAM,CAAC,YAAY;oBACnB,EAAC,eAAe,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAAC;iBAC5C,CAAC,EACF,CACH,CACH;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CACzC;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,SAAS,EAAE,EAAE;KACd;IACD,WAAW,EAAE;QACX,aAAa,EAAE,KAAK;KACrB;IACD,UAAU,EAAE;QACV,UAAU,EAAE,QAAQ;QACpB,WAAW,EAAE,EAAE;KAChB;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;QACV,cAAc,EAAE,CAAC;KAClB;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/molecules/Stepper/Stepper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Step } from './types';
+interface StepperProps {
+    steps: Step[];
+    activeStepIndex: number;
+    isCardBackground?: boolean;
+    displayDropdown?: boolean;
+    translator: (key: string, values?: any) => string;
+}
+declare const Stepper: ({ steps, activeStepIndex: _activeStepIndex, isCardBackground, displayDropdown, translator, }: StepperProps) => React.JSX.Element;
+export default Stepper;