@widergy/mobile-ui 1.10.4 → 1.11.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.11.1](https://github.com/widergy/mobile-ui/compare/v1.11.0...v1.11.1) (2024-06-03)
+
+
+### Bug Fixes
+
+* add UTBadge ([#290](https://github.com/widergy/mobile-ui/issues/290)) ([d89f04e](https://github.com/widergy/mobile-ui/commit/d89f04e9f80d010a39f4ca0090ab7c2fbf2dcbec))
+
+# [1.11.0](https://github.com/widergy/mobile-ui/compare/v1.10.4...v1.11.0) (2024-06-03)
+
+
+### Features
+
+* quantity prop for utproductitem ([#288](https://github.com/widergy/mobile-ui/issues/288)) ([dc80116](https://github.com/widergy/mobile-ui/commit/dc80116a2f552b9086dde49ca358dc119a2fe09e))
+
 ## [1.10.4](https://github.com/widergy/mobile-ui/compare/v1.10.3...v1.10.4) (2024-05-31)
 
 

package/lib/components/UTBadge/README.md

@@ -0,0 +1,45 @@
+# UTBadge
+
+### Description
+
+Basic badge component for displaying labels with various color themes.
+
+### Color Themes
+
+The color themes are defined by the UX team and are:
+
+- `alert`: Consumes the error variant.
+- `identity`: Consumes the accent variant.
+- `identitySecondary`: Consumes the neutral variant.
+- `negative`: Consumes the negative variant.
+- `information`: Consumes the information variant.
+- `warning`: Consumes the warning variant.
+- `success`: Consumes the success variant.
+
+These color themes will change how the badge looks.
+
+### Props
+
+| Name       | Type   | Default | Description                                                                                                                |
+| ---------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| children   | string |         | The text content to be displayed inside the badge.                                                                         |
+| colorTheme | string | 'alert' | The color theme to use. One of: `alert`, `identity`, `identitySecondary`, `negative`, `information`, `warning`, `success`. |
+| style      |        |         | The style to be aplied to the Badge                                                                                        |
+
+### Example
+
+```jsx
+import React from 'react';
+import UTBadge from '@widergy/energy-ui';
+
+const App = () => (
+  <div>
+    <UTBadge />
+    <UTBadge colorTheme="identity">0</UTBadge>
+    <UTBadge colorTheme="information">999+</UTBadge>
+    <UTBadge colorTheme="success">Success Badge</UTBadge>
+  </div>
+);
+
+export default App;
+```

package/lib/components/UTBadge/constants.js

@@ -0,0 +1,13 @@
+export const COLORS_MAPPER = {
+  alert: 'error',
+  identity: 'accent',
+  identitySecondary: 'neutral',
+  information: 'information',
+  negative: 'negative',
+  success: 'success',
+  warning: 'warning'
+};
+
+export const DEFAULT_PROPS = {
+  colorTheme: 'alert'
+};

package/lib/components/UTBadge/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { string } from 'prop-types';
+import { View } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import { themeType, withTheme } from '../../theming';
+import UTLabel from '../UTLabel';
+
+import { DEFAULT_PROPS } from './constants';
+import { retrieveStyle } from './theme';
+
+const UTBadge = ({ children, colorTheme, style, theme }) => {
+  const classes = retrieveStyle({ theme, children, colorTheme });
+  const Component = children ? UTLabel : View;
+  return (
+    <Component
+      colorTheme={classes.textColorTheme}
+      style={[classes.root, style]}
+      variant="xsmall"
+      weight="medium"
+    >
+      {children}
+    </Component>
+  );
+};
+
+UTBadge.defaultProps = DEFAULT_PROPS;
+
+UTBadge.propTypes = {
+  children: string,
+  colorTheme: string,
+  style: ViewPropTypes.style,
+  theme: themeType
+};
+
+export default withTheme(UTBadge);

package/lib/components/UTBadge/theme.js

@@ -0,0 +1,53 @@
+import { COLORS_MAPPER, DEFAULT_PROPS } from './constants';
+
+export const variantsColorTheme = (theme, colorTheme) => {
+  const colorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
+  const paletteTheme = theme.Palette[colorName];
+
+  const backgroundColorMapper = {
+    alert: paletteTheme['04'],
+    information: paletteTheme['05'],
+    warning: paletteTheme['05'],
+    success: paletteTheme['05'],
+    identity: paletteTheme['05'],
+    identitySecondary: paletteTheme['05'],
+    negative: paletteTheme['04']
+  };
+
+  return {
+    backgroundColor: backgroundColorMapper[colorTheme]
+  };
+};
+
+const baseButtonTheme = () => ({
+  noChildren: {
+    height: 10,
+    width: 10
+  },
+  root: {
+    alignItems: 'center',
+    borderRadius: 100,
+    justifyContent: 'center',
+    margin: 10
+  },
+  text: {
+    alignSelf: 'flex-start',
+    height: 20,
+    paddingHorizontal: 6
+  }
+});
+
+export const retrieveStyle = ({ theme, colorTheme, children }) => {
+  const baseTheme = baseButtonTheme();
+  const textTheme = children ? baseTheme.text : baseTheme.noChildren;
+  const variantTheme = variantsColorTheme(theme, colorTheme);
+
+  return {
+    root: {
+      ...baseTheme.root,
+      ...textTheme,
+      ...variantTheme
+    },
+    textColorTheme: colorTheme === 'negative' ? 'dark' : 'negative'
+  };
+};

package/lib/components/UTButton/README.md

@@ -1,9 +1,11 @@
 # UTButton
 
 ### Description
+
 Basic button component.
 
 ### Variants
+
 These variants were defined by the UX team and are:
 
 - `filled`
@@ -14,15 +16,16 @@ These variants were defined by the UX team and are:
 All these variants are defined in the component theme.
 
 ### Color Themes
-The color themes are defined by the component consumer and will vary accordingly.They define a set of variables (colors and opacities) that then combined with the variant will change how the buttons looks. 
+
+The color themes are defined by the component consumer and will vary accordingly.They define a set of variables (colors and opacities) that then combined with the variant will change how the buttons looks.
 The components supports an infinite amount of color themes but requieres the consumer to pass at least a `primary` one that works as a default.
 
 ### Props
 
 | Name                 | Type                                                  | Default   | Description                                                                    |
-|----------------------|-------------------------------------------------------|-----------|--------------------------------------------------------------------------------|
+| -------------------- | ----------------------------------------------------- | --------- | ------------------------------------------------------------------------------ |
 | children             | node                                                  |           | The component contents.                                                        |
-| classNames           | object                                                |           | Overrides the default button theme.                                            |
+| styles               | object                                                |           | Overrides the default button theme.                                            |
 | colorTheme           | string                                                | 'primary' | The color theme to use.                                                        |
 | disabled             | bool                                                  | false     | If `true` the button is unclickable.                                           |
 | Icon                 | node                                                  |           | An Icon component that can be displayed within the button.                     |
@@ -31,4 +34,4 @@ The components supports an infinite amount of color themes but requieres the con
 | onClick              | func                                                  |           | Callback fired when the user clicks the component.                             |
 | showTextOnResponsive | bool                                                  | false     | If `true` and Icon is not `null` the contents of the button are not displayed. |
 | size                 | 'small' \| 'medium' \| 'large'                        | 'medium'  | The size of the component.                                                     |
-| variant              | 'filled' \| 'outlined' \| 'text' \| 'semitransparent' | 'filled'  | The variant to use.                                                            |
+| variant              | 'filled' \| 'outlined' \| 'text' \| 'semitransparent' | 'filled'  | The variant to use.                                                            |

package/lib/components/UTButton/index.js

@@ -1,18 +1,18 @@
 import React from 'react';
-import { bool, func, elementType, objectOf, string } from 'prop-types';
+import { bool, func, elementType, string } from 'prop-types';
 import { Pressable, Text, View } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-import { withTheme } from '../../theming';
+import { themeType, withTheme } from '../../theming';
 import UTIcon from '../UTIcon';
 import UTLoading from '../UTLoading';
 
 import { DEFAULT_PROPS, ICON_PLACEMENTS } from './constants';
-import { retrieveStyle } from './theme';
 import { isUTIcon } from './utils';
+import { retrieveStyle } from './theme';
 
 const UTButton = ({
   children,
-  classNames,
   colorTheme,
   disabled,
   Icon,
@@ -20,17 +20,18 @@ const UTButton = ({
   loading,
   onPress,
   size,
+  style,
   theme,
   variant
 }) => {
   const {
     buttonStyles: themeButtonStyles,
     childrenContainerStyles: themeChildrenContainerStyles,
-    disabled: disabledStyles,
+    disabledStyles,
     iconStyles: themeIconStyles,
     textStyles: themeTextStyles
   } = retrieveStyle({
-    classNames,
+    style,
     colorTheme,
     iconPlacement,
     size,
@@ -38,34 +39,34 @@ const UTButton = ({
     variant
   });
 
-  const iconClassname = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
+  const iconStyle = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
 
-  const buttonClassname = ({ pressed }) => [
+  const buttonStyles = ({ pressed }) => [
     themeButtonStyles,
     (disabled || loading) && disabledStyles,
     pressed ? themeButtonStyles.pressed : themeButtonStyles.notPressed
   ];
 
-  const textClassname = themeTextStyles;
+  const textStyles = themeTextStyles;
 
   const IconToShow =
     Icon &&
     (isUTIcon(Icon) ? (
-      <UTIcon color={themeTextStyles.color} style={iconClassname} size={iconClassname.fontSize} name={Icon} />
+      <UTIcon color={themeTextStyles.color} style={iconStyle} size={iconStyle.fontSize} name={Icon} />
     ) : (
-      <Icon style={iconClassname} fill={themeTextStyles.color} />
+      <Icon style={iconStyle} fill={themeTextStyles.color} />
     ));
 
   const RenderedChildren = (
     <View style={themeChildrenContainerStyles}>
       {iconPlacement === ICON_PLACEMENTS.left && IconToShow}
-      {children && <Text style={textClassname}>{children}</Text>}
+      {children && <Text style={textStyles}>{children}</Text>}
       {iconPlacement !== ICON_PLACEMENTS.left && IconToShow}
     </View>
   );
 
   return (
-    <Pressable disabled={disabled || loading} onPress={onPress} style={buttonClassname}>
+    <Pressable disabled={disabled || loading} onPress={onPress} style={buttonStyles}>
       <UTLoading color={themeTextStyles.color} loading={loading} size={24} thickness={2}>
         {RenderedChildren}
       </UTLoading>
@@ -76,7 +77,6 @@ const UTButton = ({
 UTButton.defaultProps = DEFAULT_PROPS;
 
 UTButton.propTypes = {
-  classNames: objectOf(string),
   colorTheme: string,
   disabled: bool,
   Icon: elementType,
@@ -84,7 +84,8 @@ UTButton.propTypes = {
   loading: bool,
   onPress: func,
   size: string,
-  theme: objectOf(string),
+  style: ViewPropTypes.style,
+  theme: themeType,
   variant: string
 };
 

package/lib/components/UTButton/theme.js

@@ -38,9 +38,9 @@ const baseButtonTheme = theme => ({
 
 const variantsColorTheme = (theme, colorTheme, variant) => {
   const actionColorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
-  const actionTheme = theme.Palette.actions[actionColorName];
-  const negativeTheme = theme.Palette.actions[COLORS_MAPPER.negative];
-  const neutralTheme = theme.Palette.actions[COLORS_MAPPER.secondary];
+  const actionTheme = theme.Palette[actionColorName];
+  const negativeTheme = theme.Palette[COLORS_MAPPER.negative];
+  const neutralTheme = theme.Palette[COLORS_MAPPER.secondary];
   const shadow = getShadow(ELEVATION);
   const pressedShadow = getShadow(PRESSED_ELEVATION);
 
@@ -195,7 +195,7 @@ const iconButtonPlacementTheme = iconPlacement => {
   return definition[iconPlacement] || {};
 };
 
-export const retrieveStyle = ({ classNames = {}, colorTheme, variant, theme, size, iconPlacement }) => {
+export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, iconPlacement }) => {
   const baseTheme = baseButtonTheme(theme);
   const variantTheme = variantsColorTheme(theme, colorTheme, variant);
   const sizeTheme = sizeButtonTheme(size);
@@ -205,7 +205,7 @@ export const retrieveStyle = ({ classNames = {}, colorTheme, variant, theme, siz
     ...baseTheme.button,
     ...variantTheme.button,
     ...sizeTheme.button,
-    ...classNames.root
+    ...style.root
   };
 
   const textStyles = {
@@ -215,11 +215,11 @@ export const retrieveStyle = ({ classNames = {}, colorTheme, variant, theme, siz
   };
 
   const iconStyles = {
-    icon: { ...baseTheme.icon, ...sizeTheme.icon, ...iconPlacementTheme, ...classNames.icon },
-    iconOnly: { ...baseTheme.iconOnly, ...sizeTheme.iconOnly, ...classNames.icon }
+    icon: { ...baseTheme.icon, ...sizeTheme.icon, ...iconPlacementTheme, ...style.icon },
+    iconOnly: { ...baseTheme.iconOnly, ...sizeTheme.iconOnly, ...style.icon }
   };
 
-  const childrenContainerStyles = { ...baseTheme.childrenContainer, ...classNames.childrenContainer };
+  const childrenContainerStyles = { ...baseTheme.childrenContainer, ...style.childrenContainer };
 
   const { disabled } = variantTheme;
 

package/lib/components/UTLabel/constants.js

@@ -44,7 +44,7 @@ export const COLOR_THEMES = {
 export const DEFAULT_PROPS = {
   colorTheme: 'dark',
   field: {},
-  className: {},
+  style: {},
   variant: 'body',
   weight: 'regular',
   withMarkdown: false

package/lib/components/UTLabel/index.js

@@ -1,22 +1,22 @@
-/* eslint-disable react/no-children-prop */
 import React from 'react';
+import { any, bool, func, objectOf, string } from 'prop-types';
 import { Text } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import Markdown from 'react-native-markdown-display';
-import { any, bool, func, object, objectOf, string } from 'prop-types';
 
 import { themeType, withTheme } from '../../theming';
 
 import { DEFAULT_PROPS } from './constants';
-import { retrieveStyle } from './theme';
 import { markdownFormat } from './utils';
+import { retrieveStyle } from './theme';
 
 const UTLabel = ({
   children,
-  className,
   colorTheme,
   field,
   markdownRenderers,
   shade,
+  style,
   theme,
   variant,
   weight,
@@ -25,7 +25,7 @@ const UTLabel = ({
   if (!children) return null;
 
   const themeStyles = retrieveStyle({ colorTheme, field, shade, theme, variant, weight });
-  const labelStyles = [themeStyles, className];
+  const labelStyles = [themeStyles, style];
 
   const LabelRenderer = withMarkdown ? Markdown : Text;
 
@@ -39,13 +39,12 @@ const UTLabel = ({
 UTLabel.defaultProps = DEFAULT_PROPS;
 
 UTLabel.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  className: object,
   colorTheme: string,
   // eslint-disable-next-line react/forbid-prop-types
   field: any,
   markdownRenderers: objectOf(func),
   shade: string,
+  style: ViewPropTypes.style,
   theme: themeType,
   variant: string,
   weight: string,

package/lib/components/UTLabel/theme.js

@@ -8,8 +8,7 @@ const getDefaultColorShade = colorTheme =>
       : SHADES.shade05;
 
 const variantsColorTheme = (colorTheme, shade, theme) => {
-  const colorThemeDefinition =
-    theme.Palette[colorTheme] || theme.Palette.actions[colorTheme] || theme.Palette[DEFAULT_PROPS.colorTheme];
+  const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[DEFAULT_PROPS.colorTheme];
   const colorShade = Object.values(SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
   return colorThemeDefinition[colorShade] || '#000';
 };

package/lib/components/UTProductItem/index.js

@@ -6,7 +6,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import ImageIcon from '../ImageIcon';
 import { useTheme } from '../../theming';
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 
 import { leftSectionComponents } from './utils';
 import QuantitySelector from './components/QuantitySelector';
@@ -18,9 +18,12 @@ const UTProductItem = ({
   additionalInfo,
   amount,
   counter,
+  counterLabelProps = {},
   discount,
   imageProps,
   previousAmount,
+  quantity,
+  quantityLabelProps = {},
   secondaryAction,
   selectedQuantity,
   style,
@@ -50,9 +53,22 @@ const UTProductItem = ({
       </View>
       <View style={[themedStyles.rightSection, !isEmpty(counter) && themedStyles.spaceBetween]}>
         {!isEmpty(counter) && (
-          <Label small style={themedStyles.counter}>{`${counter.current}/${counter.limit}`}</Label>
+          <UTLabel
+            variant="small"
+            className={themedStyles.counter}
+            {...counterLabelProps}
+          >{`${counter.current}/${counter.limit}`}</UTLabel>
         )}
-        <QuantitySelector {...{ action, secondaryAction, selectedQuantity, themedStyles }} />
+        <View style={themedStyles.quantitiesContainer}>
+          {quantity && (
+            <View style={themedStyles.quantityContainer}>
+              <UTLabel colorTheme="light" variant="subtitle1" {...quantityLabelProps}>
+                {quantity}
+              </UTLabel>
+            </View>
+          )}
+          <QuantitySelector {...{ action, secondaryAction, selectedQuantity, themedStyles }} />
+        </View>
       </View>
     </View>
   );
@@ -63,9 +79,12 @@ UTProductItem.propTypes = {
   additionalInfo: string,
   amount: number,
   counter: shape({ current: number, limit: number }),
+  counterLabelProps: shape({}),
   discount: number,
   imageProps: shape({ image: oneOf([string, element]), withUri: bool }),
   previousAmount: number,
+  quantity: number,
+  quantityLabelProps: shape({}),
   secondaryAction: ActionPropTypes,
   selectedQuantity: number,
   title: string

package/lib/components/UTProductItem/styles.js

@@ -27,6 +27,7 @@ export const getUTProductItemStyles = (theme = {}) =>
     },
     counter: {
       backgroundColor: theme.counterBackground || '#EBF8FD',
+      overflow: 'hidden',
       borderRadius: 4,
       color: theme.counterColor || '#035B83',
       paddingHorizontal: 8,
@@ -51,18 +52,29 @@ export const getUTProductItemStyles = (theme = {}) =>
     },
     leftSection: {
       alignItems: 'center',
-      display: 'flex',
+      flexGrow: 1,
       flexDirection: 'row'
     },
     mainInfo: {
-      display: 'flex',
-      minWidth: 160
+      flexGrow: 1,
+      flexBasis: 160
     },
     previousAmount: {
       color: theme.previousAmountColor || 'gray',
       textDecorationLine: 'line-through',
       textDecorationStyle: 'solid'
     },
+    quantitiesContainer: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    quantityContainer: {
+      backgroundColor: theme.quantityBackground || 'darkblue',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 4,
+      marginRight: 12
+    },
     rightSection: {
       alignItems: 'flex-end',
       display: 'flex',

package/lib/index.js

@@ -65,6 +65,7 @@ export { default as UTLoading } from './components/UTLoading';
 // Text
 export { default as Label } from './components/Label';
 export { default as UTLabel } from './components/UTLabel';
+export { default as UTBadge } from './components/UTBadge';
 export { default as TransitionText } from './components/TransitionText';
 // Theming
 export * from './theming';

package/lib/theming/DefaultTheme.js

@@ -34,44 +34,6 @@ const colors = {
   semanticSuccess05: '#245702'
 };
 
-const actions = {
-  accent: {
-    '01': colors.actionAccent01,
-    '02': colors.actionAccent02,
-    '03': colors.actionAccent03,
-    '04': colors.actionAccent04,
-    '05': colors.actionAccent05
-  },
-  neutral: {
-    '01': colors.actionNeutral01,
-    '02': colors.actionNeutral02,
-    '03': colors.actionNeutral03,
-    '04': colors.actionNeutral04,
-    '05': colors.actionNeutral05
-  },
-  error: {
-    '01': colors.actionError01,
-    '02': colors.actionError02,
-    '03': colors.actionError03,
-    '04': colors.actionError04,
-    '05': colors.actionError05
-  },
-  success: {
-    '01': colors.semanticSuccess01,
-    '02': colors.semanticSuccess02,
-    '03': colors.semanticSuccess03,
-    '04': colors.semanticSuccess04,
-    '05': colors.semanticSuccess05
-  },
-  negative: {
-    '01': colors.actionNegative01,
-    '02': colors.actionNegative02,
-    '03': colors.actionNegative03,
-    '04': colors.actionNegative04,
-    '05': colors.actionNegative05
-  }
-};
-
 const DefaultTheme = {
   alert: {
     info: '#0065A3',
@@ -206,20 +168,6 @@ const DefaultTheme = {
       '04': '#E7E7E7',
       '05': '#C9C9C9'
     },
-    success: {
-      '01': '#EEF9E6',
-      '02': '#D3F0C0',
-      '03': '#80D249',
-      '04': '#3F8411',
-      '05': '#245702'
-    },
-    error: {
-      '01': '#FFF0EB',
-      '02': '#FED9CE',
-      '03': '#FD906F',
-      '04': '#D03607',
-      '05': '#852001'
-    },
     warning: {
       '01': '#FFF9E6',
       '02': '#FFEFC1',
@@ -234,7 +182,41 @@ const DefaultTheme = {
       '04': '#037C96',
       '05': '#025F73'
     },
-    actions
+    accent: {
+      '01': colors.actionAccent01,
+      '02': colors.actionAccent02,
+      '03': colors.actionAccent03,
+      '04': colors.actionAccent04,
+      '05': colors.actionAccent05
+    },
+    neutral: {
+      '01': colors.actionNeutral01,
+      '02': colors.actionNeutral02,
+      '03': colors.actionNeutral03,
+      '04': colors.actionNeutral04,
+      '05': colors.actionNeutral05
+    },
+    error: {
+      '01': colors.actionError01,
+      '02': colors.actionError02,
+      '03': colors.actionError03,
+      '04': colors.actionError04,
+      '05': colors.actionError05
+    },
+    success: {
+      '01': colors.semanticSuccess01,
+      '02': colors.semanticSuccess02,
+      '03': colors.semanticSuccess03,
+      '04': colors.semanticSuccess04,
+      '05': colors.semanticSuccess05
+    },
+    negative: {
+      '01': colors.actionNegative01,
+      '02': colors.actionNegative02,
+      '03': colors.actionNegative03,
+      '04': colors.actionNegative04,
+      '05': colors.actionNegative05
+    }
   }
 };
 

package/lib/utils/styleUtils/index.js

@@ -47,21 +47,8 @@ export const getCustomStyles = (variants, props, styles, stylePrefix = '') =>
     .map(variant => (props[variant] ? styles[`${variant}${stylePrefix}`] : null))
     .filter(style => style !== null);
 
-export const mergeClasses = (themeClasses, classNames) => {
-  if (!classNames) return themeClasses;
-  const classes = {};
-  const allClassNames = [...Object.keys(classNames), ...Object.keys(themeClasses)];
-
-  allClassNames.forEach(name => {
-    classes[name] = `${themeClasses[name] || ''} ${classNames[name] || ''}`.trim();
-  });
-
-  return classes;
-};
-
 export default {
   calculateShadow,
   generateLayoutMeasuresObject,
-  getCustomStyles,
-  mergeClasses
+  getCustomStyles
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.10.4",
+  "version": "1.11.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [