@ovotech/element-native 1.0.0 → 2.0.0-beta.0

package/dist/esm/providers/icons/ShowPassword.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export var ShowPassword = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M8 3.5C4.89086 3.5 2.07286 5.21886 0 8C2.07286 10.7811 4.89086 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C13.9271 5.21886 11.1091 3.5 8 3.5ZM8 5C9.65714 5 11 6.34286 11 8C11 9.65714 9.65714 11 8 11C6.34286 11 5 9.65714 5 8C5 6.34286 6.34286 5 8 5ZM8 6.5C7.17171 6.5 6.5 7.17171 6.5 8C6.5 8.82829 7.17171 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.17171 8.82829 6.5 8 6.5Z", fill: "currentColor" }))); };

package/dist/esm/providers/icons/Usage.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export var Usage = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M2 14V0H0V16H16V14H2ZM5 10H3V13H5V10ZM6.33 3H8.33V13H6.33V3ZM11.67 9H9.67V13H11.67V9ZM13 7H15V13H13V7Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/User.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export var User = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M9.33 3.33C9.33 2.6 8.74 2 8 2C7.27 2 6.67 2.6 6.67 3.33C6.67 4.06 7.27 4.66 8 4.66C8.73 4.66 9.33 4.06 9.33 3.33ZM4.67 3.33C4.67 1.49 6.16 0 8 0C9.84 0 11.33 1.49 11.33 3.33C11.33 5.17 9.84 6.66 8 6.66C6.16 6.66 4.67 5.17 4.67 3.33ZM13.66 14C12.83 11.67 10.61 10 8 10C5.39 10 3.17 11.67 2.34 14H13.66ZM0 16C0 11.6 3.6 8 8 8C12.4 8 16 11.6 16 16H0Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/index.js

@@ -1,19 +1,38 @@
+export * from './ArrowDown';
+export * from './ArrowLeft';
+export * from './ArrowRight';
+export * from './ArrowUp';
 export * from './CaretDown';
+export * from './CaretLeft';
 export * from './CaretRight';
+export * from './CaretUp';
 export * from './Check';
 export * from './ChevronDown';
 export * from './ChevronLeft';
+export * from './ChevronLeftSmall';
+export * from './ChevronLeftSmallFirst';
 export * from './ChevronRight';
+export * from './ChevronRightSmall';
+export * from './ChevronRightSmallLast';
 export * from './ChevronUp';
 export * from './Cross';
+export * from './Dollar';
 export * from './Download';
 export * from './Electricity';
 export * from './Euro';
-export * from './Dollar';
 export * from './Gas';
+export * from './Help';
+export * from './Hide';
+export * from './Home';
+export * from './Info';
 export * from './Link';
+export * from './Logo';
 export * from './Minus';
 export * from './NewWindow';
+export * from './PaymentCard';
 export * from './Plus';
 export * from './Pound';
-export * from './Logo';
+export * from './Search';
+export * from './Show';
+export * from './Chart';
+export * from './User';

package/dist/esm/theme/create-theme.js

@@ -1,11 +1,12 @@
 import deepMerge from 'deepmerge';
 var brand = {
-    focus: { base: '#028FC8' },
+    focus: { base: '#3F64E6' },
     primary: {
+        muted: '#E7F3EA',
         lightest: '#B6D727',
         lighter: '#9DC431',
         light: '#6CBD27',
-        base: '#0A9828',
+        base: '#0D8426',
         dark: '#0D8426',
         darker: '#006945',
     },
@@ -14,7 +15,7 @@ var brand = {
         lighter: '#F9F9F9',
         light: '#F3F3F3',
         base: '#D1D6DE',
-        dark: '#555C6B',
+        dark: '#666D78',
         darker: '#2F3749',
         darkest: '#111111',
     },
@@ -31,12 +32,12 @@ var brand = {
     },
     gas: {
         base: '#26ADE4',
-        dark: '#028FC8',
+        dark: '#3F64E6',
     },
     error: {
-        lightest: '#FCF3F5',
+        lightest: '#FAE8EC',
         base: '#C7153E',
-        dark: '#AE0A30',
+        dark: '#8C0A28',
     },
 };
 export var defaultTokens = {
@@ -46,18 +47,20 @@ export var defaultTokens = {
         heavier: '4px',
     },
     radii: {
-        standard: '4px',
+        small: '4px',
+        medium: '8px',
+        large: '12px',
     },
     shadows: {
         standard: {
             color: '#000',
             offset: '1px',
-            opacity: 0.1,
-            radius: '6px',
+            opacity: 0.15,
+            radius: '4px',
             elevation: 3,
         },
     },
-    breakpoints: { small: 480, medium: 768, large: 1208 },
+    breakpoints: { small: 576, medium: 768, large: 1200 },
     space: {
         1: '4px',
         2: '8px',
@@ -73,9 +76,9 @@ export var defaultTokens = {
         12: '48px',
     },
     fonts: {
-        display: 'Montserrat-Regular',
-        body: 'OpenSans-Regular',
-        monospace: 'Courier',
+        body: 'OVOCircular-Book',
+        bold: 'OVOCircular-Bold',
+        heading: 'OVOCircular-Black',
     },
     lineHeights: {
         standard: 1.5,
@@ -85,35 +88,37 @@ export var defaultTokens = {
         normal: 400,
         bold: 700,
         semiBold: 600,
+        heading: 900,
     },
     colors: {
-        primary: '#0D8426',
-        primaryAlt: '#006945',
+        primary: brand.primary.base,
+        primaryAlt: brand.primary.darker,
         primaryContrast: '#FFFFFF',
-        primaryMuted: '#F3F7F9',
+        primaryMuted: brand.primary.muted,
         error: '#C7153E',
-        errorAlt: '#AE0A30',
+        errorAlt: '#8C0A28',
         errorContrast: '#FFFFFF',
-        errorMuted: '#FCF3F5',
-        focus: '#028FC8',
+        errorMuted: '#FAE8EC',
+        focus: '#3F64E6',
+        focusMuted: '#C6D1F8',
         canvas: '#FFFFFF',
-        body: '#555C6B',
-        heading: '#2F3749',
-        border: '#2F3749',
-        canvasMuted: '#F9F9F9',
-        borderMuted: '#F3F3F3',
-        info: '#147D88',
-        infoAlt: '#05696C',
+        body: brand.grey.darker,
+        heading: brand.grey.darker,
+        border: brand.grey.dark,
+        canvasMuted: '#F0F2F5',
+        borderMuted: brand.grey.base,
+        info: '#3F64E6',
+        infoAlt: '#004CA0',
         infoContrast: '#FFFFFF',
-        infoMuted: '#F2F7F8',
-        warning: '#C64A18',
-        warningAlt: '#B74E08',
+        infoMuted: '#ECF0FD',
+        warning: '#BE5409',
+        warningAlt: '#8A3C05',
         warningContrast: '#FFFFFF',
-        warningMuted: '#FDF7F3',
-        success: '#258244',
-        successAlt: '#1E6937',
+        warningMuted: '#F7F0E7',
+        success: brand.primary.base,
+        successAlt: brand.primary.darker,
         successContrast: '#FFFFFF',
-        successMuted: '#F4F9F6',
+        successMuted: brand.primary.muted,
         mission: '#DE1D8D',
         missionMuted: '#FDF4F9',
         missionAlt: '#C6187D',
@@ -121,20 +126,31 @@ export var defaultTokens = {
         brand: brand,
     },
     responsiveFontSizes: {
-        small: ['12px', '14px'],
-        body: ['14px', '16px'],
-        level1: ['28px', '32px'],
-        level2: ['24px', '28px'],
-        level3: ['20px', '24px'],
-        level4: ['16px', '20px'],
-        display: ['32px', '48px'],
+        label: ['11px', '14px'],
+        small: ['14px', '14px'],
+        body: ['16px', '16px'],
+        level1: ['28px', '48px'],
+        level2: ['24px', '36px'],
+        level3: ['20px', '28px'],
+        level4: ['16px', '22px'],
+        lead: ['18px', '22px'],
+    },
+    responsiveLineHeights: {
+        label: ['20px', '20px'],
+        small: ['20px', '20px'],
+        body: ['24px', '24px'],
+        level1: ['36px', '52px'],
+        level2: ['32px', '44px'],
+        level3: ['24px', '36px'],
+        level4: ['20px', '28px'],
+        lead: ['24px', '28px'],
     },
 };
 export function createTheme(customTheme, additional) {
     var mergeOptions = { arrayMerge: function (_, source) { return source; } };
     var customThemeWithAdditional = deepMerge(customTheme, additional || {}, mergeOptions);
     var theme = deepMerge(defaultTokens, customThemeWithAdditional, mergeOptions);
-    var fontSizes = theme.fontSizes, breakpoints = theme.breakpoints, colors = theme.colors, fontWeights = theme.fontWeights, fonts = theme.fonts, lineHeights = theme.lineHeights, space = theme.space, radii = theme.radii, shadows = theme.shadows, borderWidths = theme.borderWidths, responsiveFontSizes = theme.responsiveFontSizes;
+    var fontSizes = theme.fontSizes, breakpoints = theme.breakpoints, colors = theme.colors, fontWeights = theme.fontWeights, fonts = theme.fonts, lineHeights = theme.lineHeights, space = theme.space, radii = theme.radii, shadows = theme.shadows, borderWidths = theme.borderWidths, responsiveFontSizes = theme.responsiveFontSizes, responsiveLineHeights = theme.responsiveLineHeights;
     return deepMerge({
         field: {
             fontFamily: fonts.body,
@@ -145,25 +161,27 @@ export function createTheme(customTheme, additional) {
             error: {
                 color: colors.error,
                 fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
             },
             hint: {
                 fontWeight: fontWeights.normal,
-                color: colors.body,
+                color: colors.border,
             },
             label: {
                 color: colors.heading,
                 fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
             },
             subLabel: {
-                color: colors.heading,
-                fontWeight: fontWeights.semiBold,
+                color: colors.border,
+                fontWeight: fontWeights.normal,
             },
             legend: {
                 marginBottom: space[1],
             },
             errorIndent: {
                 borderWidth: space[1],
-                borderRadius: radii.standard,
+                borderRadius: radii.small,
             },
         },
         focusRing: {
@@ -177,12 +195,12 @@ export function createTheme(customTheme, additional) {
             color: colors.body,
             lineHeight: lineHeights.standard,
             fontWeight: fontWeights.normal,
-            height: space[12],
+            height: space[11],
             borderColor: colors.border,
             borderWidth: borderWidths.standard,
             background: colors.canvas,
             padding: space[2],
-            borderRadius: radii.standard,
+            borderRadius: radii.small,
             error: {
                 borderWidth: borderWidths.heavy,
                 color: colors.error,
@@ -195,57 +213,49 @@ export function createTheme(customTheme, additional) {
             background: colors.canvas,
             borderWidth: borderWidths.standard,
             borderColor: colors.borderMuted,
-            borderRadius: radii.standard,
-            shadow: shadows.standard,
-            padding: [space[4], space[8]],
+            padding: [space[3], space[6], space[9]],
         },
         badge: {
             fontWeight: fontWeights.bold,
+            fontFamily: fonts.bold,
             lineHeight: lineHeights.standard,
-            paddingVertical: space[1],
             paddingHorizontal: space[2],
-            borderRadius: radii.standard,
-            borderWidth: borderWidths.standard,
-            fontSize: responsiveFontSizes.small,
+            borderRadius: radii.small,
+            fontSize: responsiveFontSizes.body,
             variants: {
                 default: {
                     background: colors.primaryMuted,
-                    foreground: colors.primary,
-                    borderColor: colors.primary,
+                    foreground: colors.primaryAlt,
                 },
                 error: {
                     background: colors.errorMuted,
-                    foreground: colors.error,
-                    borderColor: colors.error,
+                    foreground: colors.errorAlt,
                 },
                 success: {
                     background: colors.successMuted,
-                    foreground: colors.success,
-                    borderColor: colors.success,
+                    foreground: colors.successAlt,
                 },
                 info: {
                     background: colors.infoMuted,
-                    foreground: colors.info,
-                    borderColor: colors.info,
+                    foreground: colors.infoAlt,
                 },
                 warning: {
                     background: colors.warningMuted,
-                    foreground: colors.warning,
-                    borderColor: colors.warning,
+                    foreground: colors.warningAlt,
                 },
             },
         },
         cta: {
             fontSize: responsiveFontSizes.body,
             fontWeight: fontWeights.bold,
-            font: fonts.display,
+            fontFamily: fonts.bold,
             lineHeight: lineHeights.standard,
             paddingVertical: space[2],
-            paddingHorizontal: space[4],
-            borderRadius: radii.standard,
+            paddingHorizontal: space[3],
+            borderRadius: radii.small,
             borderWidth: borderWidths.standard,
             iconGap: space[1],
-            minHeight: space[12],
+            minHeight: space[11],
             variants: {
                 primary: {
                     background: colors.primary,
@@ -268,71 +278,79 @@ export function createTheme(customTheme, additional) {
                     border: colors.mission,
                 },
                 missionSecondary: {
-                    background: colors.missionContrast,
-                    foreground: colors.mission,
-                    border: colors.mission,
+                    background: colors.primaryContrast,
+                    foreground: colors.primary,
+                    border: colors.primary,
                 },
             },
         },
         checkbox: {
-            touchSize: space[12],
-            size: space[8],
-            checkSize: space[6],
+            touchSize: space[11],
+            size: space[6],
+            checkSize: space[5],
             gap: space[2],
             paddingTop: space[3],
-            borderWidth: borderWidths.heavy,
+            borderWidth: borderWidths.standard,
             borderColor: colors.border,
-            borderRadius: radii.standard,
+            borderRadius: radii.small,
             background: colors.canvas,
-            checkColor: colors.primary,
+            checkedBackground: colors.infoMuted,
+            checkColor: colors.info,
             errorColor: colors.error,
         },
         notification: {
-            borderRadius: radii.standard,
+            borderRadius: radii.small,
             borderWidth: borderWidths.heavy,
             borderColor: colors.error,
             background: colors.errorMuted,
-            padding: [space[3], space[6]],
+            paddingX: [space[2], space[2]],
+            paddingY: [space[3], space[6]],
             dismiss: {
-                touchSize: space[12],
+                touchSize: space[6],
                 size: space[4],
                 icon: 'cross',
-                color: colors.heading,
             },
             variants: {
                 error: {
-                    borderColor: colors.error,
+                    borderColor: colors.errorMuted,
                     background: colors.errorMuted,
+                    textColor: colors.errorAlt,
                 },
                 success: {
-                    borderColor: colors.success,
+                    borderColor: colors.successMuted,
                     background: colors.successMuted,
+                    textColor: colors.successAlt,
                 },
                 info: {
-                    borderColor: colors.info,
+                    borderColor: colors.infoMuted,
                     background: colors.infoMuted,
+                    textColor: colors.infoAlt,
                 },
                 warning: {
-                    borderColor: colors.warning,
+                    borderColor: colors.warningMuted,
                     background: colors.warningMuted,
+                    textColor: colors.warningAlt,
                 },
             },
         },
         text: {
             fontFamily: fonts.body,
-            lineHeight: lineHeights.standard,
             fontWeight: fontWeights.normal,
+            lineHeight: 1,
             color: colors.body,
             p: {
                 fontSize: responsiveFontSizes.body,
-                marginTop: [space[2], space[3]],
-                marginBottom: [space[2], space[3]],
+                lineHeight: responsiveLineHeights.body,
+                marginTop: [space[3], space[3]],
+                marginBottom: [space[3], space[3]],
             },
             small: {
                 fontSize: responsiveFontSizes.small,
+                lineHeight: responsiveLineHeights.small,
             },
             strong: {
                 fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
             },
         },
         list: {
@@ -343,11 +361,12 @@ export function createTheme(customTheme, additional) {
                 fontSize: responsiveFontSizes.body,
                 marginVertical: 2,
                 bulletGap: space[2],
-                bulletWidth: space[4],
+                bulletWidth: space[2],
             },
             descriptionTerm: {
                 color: colors.heading,
                 fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
                 marginTop: [space[3], space[4]],
                 marginBottom: [space[1], space[1]],
             },
@@ -357,49 +376,54 @@ export function createTheme(customTheme, additional) {
             fontWeight: fontWeights.normal,
         },
         heading: {
-            fontFamily: fonts.display,
-            lineHeight: lineHeights.standard,
-            fontWeight: fontWeights.bold,
+            fontFamily: fonts.heading,
+            fontWeight: fontWeights.heading,
             color: colors.heading,
             heading1: {
                 fontSize: responsiveFontSizes.level1,
+                lineHeight: responsiveLineHeights.level1,
                 marginTop: [space[8], space[12]],
-                marginBottom: [space[2], space[3]],
+                marginBottom: [space[3], space[4]],
             },
             heading2: {
                 fontSize: responsiveFontSizes.level2,
+                lineHeight: responsiveLineHeights.level2,
                 marginTop: [space[6], space[8]],
-                marginBottom: [space[2], space[3]],
+                marginBottom: [space[3], space[4]],
             },
             heading3: {
                 fontSize: responsiveFontSizes.level3,
+                lineHeight: responsiveLineHeights.level3,
                 marginTop: [space[4], space[6]],
-                marginBottom: [space[2], space[3]],
+                marginBottom: [space[3], space[4]],
             },
             heading4: {
                 fontSize: responsiveFontSizes.level4,
+                lineHeight: responsiveLineHeights.level4,
                 marginTop: [space[3], space[4]],
-                marginBottom: [space[2], space[3]],
+                marginBottom: [space[3], space[4]],
             },
         },
         shadows: shadows,
         radii: radii,
         radio: {
-            touchSize: space[12],
+            touchSize: space[11],
             size: space[8],
             dotSize: space[5],
             gap: space[2],
             paddingTop: space[3],
-            borderWidth: borderWidths.heavy,
+            borderWidth: borderWidths.standard,
             borderColor: colors.border,
             background: colors.canvas,
-            dotColor: colors.primary,
+            dotColor: colors.info,
+            checkedBackground: colors.infoMuted,
             errorColor: colors.error,
         },
         fontWeights: fontWeights,
         fontSizes: fontSizes,
         fonts: fonts,
         responsiveFontSizes: responsiveFontSizes,
+        responsiveLineHeights: responsiveLineHeights,
         colors: colors,
         borderWidths: borderWidths,
         breakpoints: breakpoints,
@@ -412,35 +436,30 @@ export function createTheme(customTheme, additional) {
         disclosure: {
             iconGap: [space[1], space[2]],
             panelGap: [space[2], space[3]],
-            lineIndent: {
-                borderRadius: radii.standard,
-                width: borderWidths.heavier,
-                backgroundColor: colors.borderMuted,
-            },
         },
         dataTable: {
             borderWidth: borderWidths.standard,
-            borderRadius: radii.standard,
-            borderColor: colors.borderMuted,
+            borderRadius: radii.small,
+            borderColor: colors.canvasMuted,
+            responsivePadding: {
+                vertical: [space[2], space[3]],
+                horizontal: [space[1], space[1]],
+            },
             tableHeader: {
                 color: colors.heading,
                 backgroundColor: colors.canvas,
                 borderWidth: borderWidths.standard,
                 borderColor: colors.border,
                 fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
             },
             tableCaption: {
                 color: colors.heading,
                 fontWeight: fontWeights.bold,
-                paddingVertical: space[3],
-                paddingHorizontal: space[3],
+                fontFamily: fonts.bold,
             },
             tableCell: {
                 color: colors.body,
-                borderWidth: borderWidths.standard,
-                borderColor: colors.borderMuted,
-                paddingVertical: space[3],
-                paddingHorizontal: space[3],
             },
             tableRow: {
                 backgroundColor: colors.canvas,
@@ -457,21 +476,23 @@ export function createTheme(customTheme, additional) {
         },
         tabs: {
             tab: {
-                borderTopWidth: borderWidths.heavier,
+                borderTopWidth: borderWidths.heavy,
+                borderBottomWidth: borderWidths.heavy,
+                borderColor: colors.canvas,
                 fontSize: responsiveFontSizes.body,
                 fontWeight: fontWeights.bold,
-                fontFamily: fonts.display,
+                fontFamily: fonts.bold,
                 lineHeight: lineHeights.standard,
                 paddingHorizontal: [space[4], space[4]],
                 paddingVertical: [space[3], space[3]],
                 active: {
-                    borderTopColor: colors.primary,
-                    foregroundColor: colors.heading,
+                    borderColor: colors.primary,
+                    foregroundColor: colors.primary,
                     backgroundColor: colors.canvas,
                 },
                 inactive: {
-                    foregroundColor: colors.primary,
-                    backgroundColor: colors.canvasMuted,
+                    foregroundColor: colors.heading,
+                    backgroundColor: colors.canvas,
                 },
                 hover: {
                     foregroundColor: colors.primaryAlt,