@widergy/mobile-ui 1.24.0 → 1.25.0

package/lib/components/RateChart/components/RateStagesGraph/components/Indicator/index.js

@@ -3,7 +3,7 @@ import { number, string, arrayOf, shape, any } from 'prop-types';
 import { View } from 'react-native';
 
 import Magnitude from '../../../Magnitude';
-import Label from '../../../../../Label';
+import UTLabel from '../../../../../UTLabel';
 
 import IndicatorIcon from './components/IndicatorIcon';
 import styles, { ICON_SIZE } from './styles';
@@ -74,11 +74,10 @@ const Indicator = ({
             withLeftUnit
           />
         )}
-        <Label bold h6 primary style={styles.label}>
+        <UTLabel weight="bold" colorTheme="accent" style={styles.label}>
           {!!indicatorLabel && indicatorLabel}
-        </Label>
+        </UTLabel>
       </View>
-
       {consumptionLimit && (
         <Fragment>
           <View
@@ -93,9 +92,7 @@ const Indicator = ({
               unity={consumptionUnit}
               iconProps={{ height: ICON_SIZE, width: ICON_SIZE }}
             />
-            <Label light h6>
-              Limite a subsidiar
-            </Label>
+            <UTLabel colorTheme="light">Limite a subsidiar</UTLabel>
           </View>
           <IndicatorIcon position={limitIndicatorPosition} inverted />
         </Fragment>

package/lib/components/Snackbar/index.js

@@ -3,11 +3,11 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { SafeAreaView, Animated } from 'react-native';
 import PropTypes from 'prop-types';
 
-import { withTheme, themeType } from '../../theming';
-import IconButton from '../IconButton';
-import Label from '../Label';
 import { IS_ANDROID } from '../../utils/platformUtils/constants';
 import { SHADOW_OPACITY } from '../../utils/styleUtils';
+import { withTheme, themeType } from '../../theming';
+import UTButton from '../UTButton';
+import UTLabel from '../UTLabel';
 
 import styles, { alertStyleMapper } from './styles';
 import { INFO, DURATION } from './constants';
@@ -67,13 +67,15 @@ class Snackbar extends Component {
     Animated.parallel([
       Animated.timing(opacity, {
         toValue: 1,
-        duration: DURATION
+        duration: DURATION,
+        useNativeDriver: true
       }),
       Animated.sequence([
         Animated.delay(100),
         Animated.timing(textOpacity, {
           toValue: 1,
-          duration: DURATION
+          duration: DURATION,
+          useNativeDriver: true
         })
       ])
     ]).start(() => {
@@ -90,7 +92,8 @@ class Snackbar extends Component {
 
     Animated.timing(opacity, {
       toValue: 0,
-      duration: DURATION
+      duration: DURATION,
+      useNativeDriver: true
     }).start(() => {
       textOpacity.setValue(0);
       this.setState({
@@ -110,7 +113,8 @@ class Snackbar extends Component {
 
     Animated.timing(textOpacity, {
       toValue: 1,
-      duration: DURATION
+      duration: DURATION,
+      useNativeDriver: true
     }).start(() => {
       this.resetTimeout();
     });
@@ -174,8 +178,6 @@ class Snackbar extends Component {
     const { message, style, alert, theme, textStyle } = this.props;
     const { visible } = this.state;
 
-    const buttonColor = (textStyle && textStyle.color) || 'white';
-
     if (!visible) return null;
 
     const extraStyles = this.getExtraStyles();
@@ -186,11 +188,18 @@ class Snackbar extends Component {
       <SafeAreaView style={styles.container}>
         <Animated.View style={[styles.surface, alertStyles, style, extraStyles]}>
           <Animated.View style={[styles.labelContainer, extraLabelStyles]}>
-            <Label white medium style={textStyle}>
+            <UTLabel colorTheme="light" style={textStyle}>
               {message}
-            </Label>
+            </UTLabel>
           </Animated.View>
-          <IconButton color={buttonColor} name="close" style={styles.icon} onPress={this.handleDismiss} />
+          <UTButton
+            Icon="IconX"
+            colorTheme="negative"
+            onPress={this.handleDismiss}
+            size="small"
+            style={{ root: styles.button, icon: styles.icon }}
+            variant="text"
+          />
         </Animated.View>
       </SafeAreaView>
     );

package/lib/components/Snackbar/styles.js

@@ -37,5 +37,15 @@ export default StyleSheet.create({
   labelContainer: {
     alignItems: 'flex-start',
     flex: 1
+  },
+  button: {
+    alignItems: 'center',
+    borderRadius: 32,
+    justifyContent: 'center',
+    maxWidth: 32
+  },
+  icon: {
+    maxHeight: 20,
+    maxWidth: 20
   }
 });

package/lib/components/Touchable/README.md

@@ -6,19 +6,20 @@ A component that provides the capability to capture tapping gestures and display
 
 ## Props
 
-| NAME          | TYPE      | REQUIRED | DESCRIPTION                                                                                   |
-|---------------|-----------|----------|-----------------------------------------------------------------------------------------------|
-| borderless    | bool      | No       | If property `borderless` evaluates to true the ripple will render outside of the view bounds. |
-| disabled      | bool      | No       | If true, disable all gesture interactions.                                                    |
-| onPress       | function  | Yes      | Callback called when the touch is released.                                                   |
-| effectColor   | string    | No       | The ripple effect color (For Android API >= 21) and highlight color (iOS).                                              |
-| style         | ViewStyle | No       | custom style appzlied to container.                                                            |
+| NAME        | TYPE      | REQUIRED | DESCRIPTION                                                                                   |
+| ----------- | --------- | -------- | --------------------------------------------------------------------------------------------- |
+| borderless  | bool      | No       | If property `borderless` evaluates to true the ripple will render outside of the view bounds. |
+| disabled    | bool      | No       | If true, disable all gesture interactions.                                                    |
+| onPress     | function  | Yes      | Callback called when the touch is released.                                                   |
+| effectColor | string    | No       | The ripple effect color (For Android API >= 21) and highlight color (iOS).                    |
+| style       | ViewStyle | No       | custom style appzlied to container.                                                           |
 
 #### Example
+
 ```js
-import { Touchable, Label } from "@widergy/mobile-ui";
+import { Touchable, UTLabel } from '@widergy/mobile-ui';
 
 <Touchable style={styles.container} onPress={this.handlePress} rippleColor={color} underlayColor={color}>
-  <Label>PRESS ME</Label>
-</Touchable>
+  <UTLabel>PRESS ME</UTLabel>
+</Touchable>;
 ```

package/lib/components/TransformView/README.md

@@ -6,18 +6,18 @@ This view applies transforms via `setNativeProps` with a transform Matrix. It ca
 
 ### Props
 
-| NAME        | TYPE                                                                                                                            | REQUIRED | DESCRIPTION                                              | DEFAULT VALUE |
-| ---         | ---                                                                                                                             | ---      | ---                                                      | ---           |
-| animation   | `Animated.value`*                                                                                                               | No       | Pass an `Animated.Value` to control transform animation. | -             |
-| composeRefs | oneOf([function, ref**])                                                                                                        | No       | Pass a ref object or callback in this prop.              | -             |
-| endValue    | oneOf([number, string])                                                                                                         | No       | Final value for the animation.                           | -             |
-| origin      | oneOf([`"bottom"`, `"bottom_left"`, `"bottom_right"`, `"center"`, `"left"`, `"right"`, `top"`, `"top_left"`, `"top_right"`])*** | Yes      | Origin for the transformation to be applied.             | -             |
-| startValue  | oneOf([number, string])                                                                                                         | Yes      | Initial value for the transformation.                    | -             |
-| transform   | string                                                                                                                          | Yes      | Transformation to apply.                                 | -             |
+| NAME        | TYPE                                                                                                                               | REQUIRED | DESCRIPTION                                              | DEFAULT VALUE |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------- | ------------- |
+| animation   | `Animated.value`\*                                                                                                                 | No       | Pass an `Animated.Value` to control transform animation. | -             |
+| composeRefs | oneOf([function, ref**])                                                                                                           | No       | Pass a ref object or callback in this prop.              | -             |
+| endValue    | oneOf([number, string])                                                                                                            | No       | Final value for the animation.                           | -             |
+| origin      | oneOf([`"bottom"`, `"bottom_left"`, `"bottom_right"`, `"center"`, `"left"`, `"right"`, `top"`, `"top_left"`, `"top_right"`])\*\*\* | Yes      | Origin for the transformation to be applied.             | -             |
+| startValue  | oneOf([number, string])                                                                                                            | Yes      | Initial value for the transformation.                    | -             |
+| transform   | string                                                                                                                             | Yes      | Transformation to apply.                                 | -             |
 
 1. \* [React Native's `Animated.Value`](https://facebook.github.io/react-native/docs/animatedvalue).
-2. \*\* [ref object](https://reactjs.org/docs/react-api.html#reactcreateref). 
-2. \*\*\* You can access these origins via the exposed `static` property: `TransformOrigins`. 
+2. \*\* [ref object](https://reactjs.org/docs/react-api.html#reactcreateref).
+3. \*\*\* You can access these origins via the exposed `static` property: `TransformOrigins`.
 
 It also accepts any `View` props as it's a view.
 
@@ -25,7 +25,7 @@ It also accepts any `View` props as it's a view.
 
 ```js
 import React, { Component } from 'react-native`
-import { Label, TransformView } from '@widergy/mobile-ui`
+import { UTLabel, TransformView } from '@widergy/mobile-ui`
 
 class Example extends Component {
   constructor(props) {
@@ -46,7 +46,7 @@ class Example extends Component {
         endValue={1}
         transform="rotateX"
       >
-        <Label>Test</Label>
+        <UTLabel>Test</UTLabel>
       </TransformView>
     );
   }

package/lib/components/TransitionView/README.md

@@ -6,9 +6,9 @@ This component manages transitions whenever the values inside the `compare` prop
 
 ### Props
 
-| NAME            | TYPE                          | REQUIRED | DESCRIPTION                                                                                                         | DEFAULT VALUE |
-| ---             | ---                           | ---      | ---                                                                                                                 | ---           |
-| compare         | arrayOf(bool, number, string) | Yes      | Array of comparable values* that triggers a transition whenever a previous value is different from the current one. | -             |
+| NAME    | TYPE                          | REQUIRED | DESCRIPTION                                                                                                          | DEFAULT VALUE |
+| ------- | ----------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- | ------------- |
+| compare | arrayOf(bool, number, string) | Yes      | Array of comparable values\* that triggers a transition whenever a previous value is different from the current one. | -             |
 
 \* The array should never change in length, but, in case it does, it will not trigger any transitions until it changes again.
 
@@ -16,7 +16,7 @@ This component manages transitions whenever the values inside the `compare` prop
 
 ```js
 import React, { Component, Fragment } from 'react';
-import { Button, Label, TransitionView } from '@widergy/mobile-ui';
+import { Button, UTLabel, TransitionView } from '@widergy/mobile-ui';
 
 class Counter extends Component {
   state = {
@@ -30,7 +30,7 @@ class Counter extends Component {
     return (
       <Fragment>
         <TransitionView compare={[count]} visible>
-          <Label>{count}</Label>
+          <UTLabel>{count}</UTLabel>
         </TransitionView>
         <Button onPress={this.count} title="Add to count" />
       </Fragment>
@@ -39,7 +39,6 @@ class Counter extends Component {
 }
 ```
 
-
 ## TransitionView.TransitionViewComponent
 
 A component designed to use for different transitions across the board. Whenever the `transition` prop is `true`, it will trigger an opacity transition for the `View`'s `children`.
@@ -47,7 +46,7 @@ A component designed to use for different transitions across the board. Whenever
 ### Props
 
 | NAME            | TYPE                                                              | REQUIRED | DESCRIPTION                                                                                 | DEFAULT VALUE               |
-| ---             | ---                                                               | ---      | ---                                                                                         | ---                         |
+| --------------- | ----------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------- | --------------------------- |
 | delay           | number                                                            | No       | Delay for each transition animation.                                                        | `0`                         |
 | duration        | number                                                            | No       | Duration for each transition animation.                                                     | `500`                       |
 | easing          | [EasingFunc](https://facebook.github.io/react-native/docs/easing) | No       | Easing for each transition animation.                                                       | `Easing.inOut(Easing.ease)` |
@@ -57,12 +56,11 @@ A component designed to use for different transitions across the board. Whenever
 | useNativeDriver | bool                                                              | No       | Should the animation run on the native driver or in js?.                                    | `false`                     |
 | visible         | bool                                                              | No       | Is the component visible?                                                                   | -                           |
 
-
 #### Example
 
 ```js
 import React, { Component } from 'react';
-import { Label, TransitionView } from '@widergy/mobile-ui';
+import { UTLabel, TransitionView } from '@widergy/mobile-ui';
 import { View } from 'react-native';
 
 const { TransitionViewComponent } = TransitionView;
@@ -73,14 +71,18 @@ class Example extends Component {
     transition: false
   };
 
-  onTransitionEnd = () => this.setState(({ transition }) => ({ transition: false }))
+  onTransitionEnd = () => this.setState(({ transition }) => ({ transition: false }));
 
   render() {
     const { transition, visible } = this.state;
     return (
       <View>
-        <TransitionViewComponent transition={transition} onTransitionEnd={this.onTransitionEnd} visible={visible}>
-          <Label>Test</Label>
+        <TransitionViewComponent
+          transition={transition}
+          onTransitionEnd={this.onTransitionEnd}
+          visible={visible}
+        >
+          <UTLabel>Test</UTLabel>
         </TransitionViewComponent>
       </View>
     );

package/lib/components/UTButton/constants.js

@@ -1,4 +1,4 @@
-export const ELEVATION = 2;
+export const ELEVATION = 1;
 export const PRESSED_ELEVATION = 2;
 
 export const VARIANTS_NAMES = {
@@ -27,3 +27,19 @@ export const COLORS_MAPPER = {
   secondary: 'neutral',
   success: 'success'
 };
+
+export const SHADOW_MAPPER = {
+  [COLORS_MAPPER.error]: 'error',
+  [COLORS_MAPPER.negative]: 'neutral',
+  [COLORS_MAPPER.primary]: 'accent',
+  [COLORS_MAPPER.secondary]: 'dark',
+  [COLORS_MAPPER.success]: 'success'
+};
+
+export const PRESSED_SHADOW_MAPPER = {
+  [COLORS_MAPPER.error]: 'error',
+  [COLORS_MAPPER.negative]: 'dark',
+  [COLORS_MAPPER.primary]: 'accent',
+  [COLORS_MAPPER.secondary]: 'dark',
+  [COLORS_MAPPER.success]: 'success'
+};

package/lib/components/UTButton/theme.js

@@ -1,7 +1,13 @@
 import { COLOR_THEMES } from '../../constants/Palette';
 import { getShadow } from '../../utils/styleUtils';
 
-import { COLORS_MAPPER, ELEVATION, PRESSED_ELEVATION } from './constants';
+import {
+  COLORS_MAPPER,
+  ELEVATION,
+  PRESSED_ELEVATION,
+  PRESSED_SHADOW_MAPPER,
+  SHADOW_MAPPER
+} from './constants';
 import { defaultProps } from './proptypes';
 
 const baseButtonTheme = () => ({
@@ -40,8 +46,16 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
   const actionTheme = theme.Palette[colorName];
   const negativeTheme = theme.Palette[COLORS_MAPPER.negative];
   const neutralTheme = theme.Palette[COLORS_MAPPER.secondary];
-  const shadow = getShadow({ level: ELEVATION, theme });
-  const pressedShadow = getShadow({ level: PRESSED_ELEVATION, theme });
+  const shadow = getShadow({
+    color: theme.Palette[SHADOW_MAPPER[colorName]]['04'],
+    level: ELEVATION,
+    theme
+  });
+  const pressedShadow = getShadow({
+    color: theme.Palette[PRESSED_SHADOW_MAPPER[colorName]]['04'],
+    level: PRESSED_ELEVATION,
+    theme
+  });
 
   const definition = {
     filled: {
@@ -51,6 +65,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         borderWidth: 1,
         fill: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
         pressed: {
+          ...pressedShadow,
           backgroundColor: actionTheme['05']
         }
       },

package/lib/components/UTDetailDrawer/README.md

@@ -43,12 +43,12 @@ const UTDetailDrawerExample = () => {
   return (
     <Layout>
       <View>
-        <Label big>This is a drawer example</Label>
+        <UTLabel big>This is a drawer example</UTLabel>
         <Button title="Open default" onPress={() => openDrawer('default')} />
       </View>
       <UTDetailDrawer onClose={closeDrawer} visible={open === 'default'}>
         <View>
-          <Label>This is the default</Label>
+          <UTLabel>This is the default</UTLabel>
         </View>
       </UTDetailDrawer>
     </Layout>

package/lib/components/UTDetailDrawer/index.js

@@ -4,7 +4,7 @@ import { SafeAreaView, View, ScrollView } from 'react-native';
 
 import Label from '../Label';
 import { withTheme } from '../../theming';
-import IconButton from '../IconButton';
+import UTButton from '../UTButton';
 
 import propTypes, { UTDetailDrawerDefaultProps } from './propTypes';
 import mergeStyles from './styles';
@@ -63,11 +63,21 @@ const UTDetailDrawer = ({
                 </Label>
               )}
               {iconButton && (
-                <IconButton
+                <UTButton
                   onPress={onClose}
-                  name="close"
-                  style={mergedStyles.closeButton}
-                  {...CloseButtonProps}
+                  Icon="IconX"
+                  variant={CloseButtonProps.variant || 'text'}
+                  colorTheme={CloseButtonProps.colorTheme || null}
+                  style={{
+                    root: {
+                      ...mergedStyles.closeButton,
+                      ...(CloseButtonProps.root ? CloseButtonProps.root : null)
+                    },
+                    icon: {
+                      ...mergedStyles.icon,
+                      ...(CloseButtonProps.icon ? CloseButtonProps.icon : null)
+                    }
+                  }}
                 />
               )}
             </View>

package/lib/components/UTDetailDrawer/styles.js

@@ -29,9 +29,20 @@ const styles = (propStyles = {}, propWidth) =>
       ...(propStyles.contentContainer || {})
     },
     closeButton: {
+      maxWidth: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      JustifySelf: 'flex-end',
+      borderRadius: 32,
       marginLeft: 'auto',
       ...(propStyles.closeButton || {})
     },
+    icon: {
+      maxWidth: 20,
+      maxHeight: 20,
+      marginHorizontal: 0,
+      ...(propStyles.closeButton || {})
+    },
     container: {
       flex: 1,
       ...(propStyles.container || {})
@@ -42,6 +53,7 @@ const styles = (propStyles = {}, propWidth) =>
     },
     headerContainer: {
       flexDirection: 'row',
+      justifyContent: 'space-between',
       borderTopLeftRadius: 40,
       padding: 10,
       ...(propStyles.headerContainer || {})

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconArrowBack.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path stroke="currentColor" d="M20 11v2H8l5.5 5.5l-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5L8 11z"/></svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconCamera.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+<path stroke="currentColor" d="M4 4h3l2-2h6l2 2h3a2 2 0 0 1 2
+2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m8 3a5 5 0 0 0-5 5a5 5 0 0 0 5 5a5 5 0 0 0 5-5a5 5 0 0 0-5-5m0 2a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0
+1-3-3a3 3 0 0 1 3-3" />
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconCheckCircle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path stroke="currentColor" d="M20 12a8 8 0 0 1-8 8a8 8 0 0 1-8-8a8 8 0 0 1 8-8c.76 0 1.5.11 2.2.31l1.57-1.57A9.8 9.8 0 0 0 12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10M7.91 10.08L6.5 11.5L11 16L21 6l-1.41-1.42L11 13.17z"/></svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconDelete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path stroke="currentColor" d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z"/></svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconDeleteOutline.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<path stroke="currentColor" d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10
+4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4zM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8h12z"/>
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconDeleteVariant.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path stroke="currentColor" d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10
+    4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4zM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8h12z"/>
+    <path stroke="currentColor" d="M9 17a1 1 0 0 0 1-1v-4a1 1 0 0 0-2 0v4a1 1 0 0 0
+    1 1z"/>
+    <path stroke="currentColor" d="M15 17a1 1 0 0 0 1-1v-4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1z"/>
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconEdit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path stroke="currentColor" d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83l3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z"/></svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconEditVariant.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<path stroke="currentColor" d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0
+1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.32l2.7 2.7zM16 10.68L13.32 8l1.95-2L18 8.73z"/>
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconMoreVertical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path stroke="currentColor" d="M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2"/></svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconMyLocation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m-8.95 5H1v-2h2.05C3.5 6.83 6.83 3.5 11 3.05V1h2v2.05c4.17.45 7.5 3.78 7.95 7.95H23v2h-2.05c-.45 4.17-3.78 7.5-7.95 7.95V23h-2v-2.05C6.83 20.5 3.5 17.17 3.05 13M12 5a7 7 0 0 0-7 7a7 7 0 0 0 7 7a7 7 0 0 0 7-7a7 7 0 0 0-7-7"/></svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconSettings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path stroke="currentColor" d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z"/></svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconShare.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path stroke="currentColor" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3a3 3 0 0 0-3-3a3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66c0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>

package/lib/components/UTIcon/constants.js

@@ -1,12 +1,24 @@
 import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
 
+import EnergyIconArrowBack from './components/EnergyIcons/EnergyIconArrowBack.svg';
+import EnergyIconCamera from './components/EnergyIcons/EnergyIconCamera.svg';
 import EnergyIconCar from './components/EnergyIcons/EnergyIconCar.svg';
 import EnergyIconCart from './components/EnergyIcons/EnergyIconCart.svg';
 import EnergyIconChartPie from './components/EnergyIcons/EnergyIconChartPie.svg';
+import EnergyIconCheckCircle from './components/EnergyIcons/EnergyIconCheckCircle.svg';
+import EnergyIconDelete from './components/EnergyIcons/EnergyIconDelete.svg';
+import EnergyIconDeleteOutline from './components/EnergyIcons/EnergyIconDeleteOutline.svg';
+import EnergyIconDeleteVariant from './components/EnergyIcons/EnergyIconDeleteVariant.svg';
+import EnergyIconEdit from './components/EnergyIcons/EnergyIconEdit.svg';
+import EnergyIconEditVariant from './components/EnergyIcons/EnergyIconEditVariant.svg';
 import EnergyIconGraphicCircle from './components/EnergyIcons/EnergyIconGraphicCircle.svg';
 import EnergyIconHome from './components/EnergyIcons/EnergyIconHome.svg';
 import EnergyIconHome2 from './components/EnergyIcons/EnergyIconHome2.svg';
 import EnergyIconHome3 from './components/EnergyIcons/EnergyIconHome3.svg';
+import EnergyIconMoreVertical from './components/EnergyIcons/EnergyIconMoreVertical.svg';
+import EnergyIconMyLocation from './components/EnergyIcons/EnergyIconMyLocation.svg';
+import EnergyIconSettings from './components/EnergyIcons/EnergyIconSettings.svg';
+import EnergyIconShare from './components/EnergyIcons/EnergyIconShare.svg';
 import EnergyIconTruck from './components/EnergyIcons/EnergyIconTruck.svg';
 import BrandIconAmex from './components/EnergyIcons/BrandIconAmex.svg';
 import BrandIconBancoEstado from './components/EnergyIcons/BrandIconBancoEstado.svg';
@@ -29,13 +41,25 @@ export const DEFAULT_PROPS = {
 export const DEFAULT_INTERNAL_SHADE = COLOR_SHADES.shade02;
 
 export const ENERGY_ICONS = {
+  EnergyIconArrowBack,
+  EnergyIconCamera,
   EnergyIconCar,
   EnergyIconCart,
   EnergyIconChartPie,
+  EnergyIconCheckCircle,
+  EnergyIconDelete,
+  EnergyIconDeleteOutline,
+  EnergyIconDeleteVariant,
+  EnergyIconEdit,
+  EnergyIconEditVariant,
   EnergyIconGraphicCircle,
   EnergyIconHome,
   EnergyIconHome2,
   EnergyIconHome3,
+  EnergyIconMoreVertical,
+  EnergyIconMyLocation,
+  EnergyIconSettings,
+  EnergyIconShare,
   EnergyIconTruck,
   BrandIconAmex,
   BrandIconBancoEstado,

package/lib/components/UTIcon/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { number, object, string } from 'prop-types';
+import { number, object, oneOfType, string } from 'prop-types';
 import * as TablerIcons from '@tabler/icons-react-native';
 
 import { useTheme } from '../../theming';
@@ -38,7 +38,7 @@ UTIcon.propTypes = {
   fillTheme: string,
   name: string,
   shade: string,
-  size: number,
+  size: oneOfType([number, string]),
   style: object
 };
 

package/lib/components/UTLabel/README.md

@@ -6,17 +6,19 @@
 
 ## Props
 
-| Name              | Type   | Default   | Description                                                                                                                                                                                                           |
-| ----------------- | ------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| colorTheme        | string | 'dark'    | Color theme to style the `UTLabel`. It must be defined in the project theme. [Example](#colortheme).                                                                                                                  |
-| field             | any    | {}        | Field configuration for advanced customization.                                                                                                                                                                       |
-| markdownRenderers | object |           | ⚠️ Requires `withMarkdown` to be set to `true`. Object mapping tag names to React components. The keys in components are HTML equivalents for the things you write with markdown [List of tags](#markdown-renderers). |
-| numberOfLines     | number |           | Limits the number of lines displayed in the label. When set, `ellipsizeMode` is automatically set to 'tail'.                                                                                                          |
-| shade             | string |           | The color theme shade.                                                                                                                                                                                                |
-| style             | object | {}        | Additional style.                                                                                                                                                                                                     |
-| variant           | string | 'body'    | Defines the font size and component to use. For a list of available variants, check [here](#variants). Font sizes can be overwritten (⚠️ for the entire project) through the project's theme.                         |
-| weight            | string | 'regular' | Defines the font weight to be used. For a list of available options, check [here](#weights).                                                                                                                          |
-| withMarkdown      | bool   | false     | Indicates whether or not to render text inside as markdown.                                                                                                                                                           |
+| Name           | Type   | Default   | Description                                                                                                                                                                                   |
+| -------------- | ------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| colorTheme     | string | 'dark'    | Color theme to style the `UTLabel`. It must be defined in the project theme. [Example](#colortheme).                                                                                          |
+| field          | any    | {}        | Field configuration for advanced customization.                                                                                                                                               |
+| markdownStyles | object | {}        | Custom styles for rendering markdown content. This allows overriding default markdown styles like lists, links, etc.                                                                          |
+| numberOfLines  | number |           | Limits the number of lines displayed in the label. When set, `ellipsizeMode` is automatically set to 'tail'.                                                                                  |
+| onLinkPress    | func   |           | Callback function to handle link presses in markdown content. It is only used when `withMarkdown` is true.                                                                                    |
+| onTextLayout   | func   |           | Callback function that is triggered when the text layout changes. Useful for getting information about the text rendering (like the number of lines).                                         |
+| shade          | string |           | The color theme shade.                                                                                                                                                                        |
+| style          | object | {}        | Additional style.                                                                                                                                                                             |
+| variant        | string | 'body'    | Defines the font size and component to use. For a list of available variants, check [here](#variants). Font sizes can be overwritten (⚠️ for the entire project) through the project's theme. |
+| weight         | string | 'regular' | Defines the font weight to be used. For a list of available options, check [here](#weights).                                                                                                  |
+| withMarkdown   | bool   | false     | Indicates whether or not to render text inside as markdown.                                                                                                                                   |
 
 ## Color Themes