@ovotech/element-native 2.2.0 → 3.0.0-canary-edaf96f-93

package/dist/theme/create-theme.js

@@ -210,73 +210,6 @@ function createTheme(customTheme, additional) {
             borderColor: colors.borderMuted,
             padding: [space[3], space[6], space[9]],
         },
-        badge: {
-            fontFamily: fonts.bold,
-            lineHeight: lineHeights.standard,
-            paddingHorizontal: space[2],
-            borderRadius: radii.small,
-            fontSize: responsiveFontSizes.body,
-            variants: {
-                default: {
-                    background: colors.primaryMuted,
-                    foreground: colors.primaryAlt,
-                },
-                error: {
-                    background: colors.errorMuted,
-                    foreground: colors.errorAlt,
-                },
-                success: {
-                    background: colors.successMuted,
-                    foreground: colors.successAlt,
-                },
-                info: {
-                    background: colors.infoMuted,
-                    foreground: colors.infoAlt,
-                },
-                warning: {
-                    background: colors.warningMuted,
-                    foreground: colors.warningAlt,
-                },
-            },
-        },
-        cta: {
-            fontSize: responsiveFontSizes.body,
-            fontFamily: fonts.bold,
-            lineHeight: lineHeights.standard,
-            paddingVertical: space[2],
-            paddingHorizontal: space[3],
-            borderRadius: radii.small,
-            borderWidth: borderWidths.standard,
-            iconGap: space[1],
-            minHeight: space[11],
-            variants: {
-                primary: {
-                    background: colors.primary,
-                    foreground: colors.primaryContrast,
-                    border: colors.primary,
-                },
-                secondary: {
-                    background: colors.primaryContrast,
-                    foreground: colors.primary,
-                    border: colors.primary,
-                },
-                destructive: {
-                    background: colors.error,
-                    foreground: colors.errorContrast,
-                    border: colors.error,
-                },
-                missionPrimary: {
-                    background: colors.mission,
-                    foreground: colors.missionContrast,
-                    border: colors.mission,
-                },
-                missionSecondary: {
-                    background: colors.primaryContrast,
-                    foreground: colors.primary,
-                    border: colors.primary,
-                },
-            },
-        },
         checkbox: {
             touchSize: space[11],
             size: space[6],
@@ -291,41 +224,6 @@ function createTheme(customTheme, additional) {
             checkColor: colors.info,
             errorColor: colors.error,
         },
-        notification: {
-            borderRadius: radii.small,
-            borderWidth: borderWidths.heavy,
-            borderColor: colors.error,
-            background: colors.errorMuted,
-            paddingX: [space[2], space[2]],
-            paddingY: [space[3], space[6]],
-            dismiss: {
-                touchSize: space[6],
-                size: space[4],
-                icon: 'cross',
-            },
-            variants: {
-                error: {
-                    borderColor: colors.errorMuted,
-                    background: colors.errorMuted,
-                    textColor: colors.errorAlt,
-                },
-                success: {
-                    borderColor: colors.successMuted,
-                    background: colors.successMuted,
-                    textColor: colors.successAlt,
-                },
-                info: {
-                    borderColor: colors.infoMuted,
-                    background: colors.infoMuted,
-                    textColor: colors.infoAlt,
-                },
-                warning: {
-                    borderColor: colors.warningMuted,
-                    background: colors.warningMuted,
-                    textColor: colors.warningAlt,
-                },
-            },
-        },
         text: {
             fontFamily: fonts.body,
             lineHeight: 1,
@@ -426,33 +324,6 @@ function createTheme(customTheme, additional) {
             iconGap: [space[1], space[2]],
             panelGap: [space[2], space[3]],
         },
-        dataTable: {
-            borderWidth: borderWidths.standard,
-            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,
-                fontFamily: fonts.bold,
-            },
-            tableCaption: {
-                color: colors.heading,
-                fontFamily: fonts.bold,
-            },
-            tableCell: {
-                color: colors.body,
-            },
-            tableRow: {
-                backgroundColor: colors.canvas,
-                stripeColor: colors.canvasMuted,
-            },
-        },
         accordion: {
             header: {
                 color: colors.primary,
@@ -461,30 +332,6 @@ function createTheme(customTheme, additional) {
                 iconGap: space[3],
             },
         },
-        tabs: {
-            tab: {
-                borderTopWidth: borderWidths.heavy,
-                borderBottomWidth: borderWidths.heavy,
-                borderColor: colors.canvas,
-                fontSize: responsiveFontSizes.body,
-                fontFamily: fonts.bold,
-                lineHeight: lineHeights.standard,
-                paddingHorizontal: [space[4], space[4]],
-                paddingVertical: [space[3], space[3]],
-                active: {
-                    borderColor: colors.primary,
-                    foregroundColor: colors.primary,
-                    backgroundColor: colors.canvas,
-                },
-                inactive: {
-                    foregroundColor: colors.heading,
-                    backgroundColor: colors.canvas,
-                },
-                hover: {
-                    foregroundColor: colors.primaryAlt,
-                },
-            },
-        },
     }, theme, mergeOptions);
 }
 exports.createTheme = createTheme;

package/dist/theme/index.d.ts

@@ -5,10 +5,10 @@ export declare const theme: import("./theme").Theme & {
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
+        opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+        color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
             lightest: string;
             lighter: string;
             light: string;
@@ -24,71 +24,53 @@ export declare const theme: import("./theme").Theme & {
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
             small: string | number;
             large: string | number;
         }>;
+        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
         message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"outline" | "surface", string>;
-        inverted: Record<"surface" | "border", string> & {
+        focus: Record<"surface" | "outline" | "hover", string>;
+        inverted: Record<"border" | "surface", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
         warning: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
         error: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
         info: {
             border: string;
             surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        electricity: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        gas: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
         };
+        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -219,6 +201,30 @@ export declare const theme: import("./theme").Theme & {
                 backgroundFocused: string;
             };
         };
+        badge: {
+            variants: {
+                red: {
+                    foreground: string;
+                    background: string;
+                };
+                orange: {
+                    foreground: string;
+                    background: string;
+                };
+                yellow: {
+                    foreground: string;
+                    background: string;
+                };
+                green: {
+                    foreground: string;
+                    background: string;
+                };
+                blue: {
+                    foreground: string;
+                    background: string;
+                };
+            };
+        };
     };
 };
 export declare type Theme = typeof theme;

package/dist/theme/theme.d.ts

@@ -1,7 +1,3 @@
-import { BadgeVariantName, BadgeVariant } from '../components/Badge/Badge';
-import { CTAVariantName, CTAVariant } from '../components/CTAButton/CTAButton';
-import { NotificationVariant, NotificationVariantName } from '../components/Notification/Notification';
-import { IconName } from '../providers';
 declare type Shadow = {
     color: string;
     offset: string;
@@ -24,26 +20,6 @@ export declare type Theme = {
     radii: Record<'small' | 'medium' | 'large', string>;
     shadows: Record<'standard', Shadow>;
     borderWidths: Record<'standard' | 'heavy' | 'heavier', string>;
-    badge: {
-        fontFamily: string;
-        lineHeight: number;
-        paddingHorizontal: string;
-        borderRadius: string;
-        fontSize: string[];
-        variants: Record<BadgeVariantName, BadgeVariant>;
-    };
-    cta: {
-        fontSize: string[];
-        fontFamily: string;
-        lineHeight: number;
-        paddingVertical: string;
-        paddingHorizontal: string;
-        borderRadius: number | string;
-        borderWidth: string;
-        iconGap: string;
-        minHeight: string;
-        variants: Record<CTAVariantName, CTAVariant>;
-    };
     text: {
         fontFamily: string;
         lineHeight: number;
@@ -112,21 +88,6 @@ export declare type Theme = {
             marginBottom: string[];
         };
     };
-    notification: {
-        borderRadius: string;
-        borderWidth: string;
-        borderColor: string;
-        background: string;
-        paddingX: string[];
-        paddingY: string[];
-        variants: Record<NotificationVariantName, NotificationVariant>;
-        dismiss: {
-            icon: IconName;
-            size: string;
-            color: string;
-            touchSize: string;
-        };
-    };
     radio: {
         touchSize: string;
         size: string;
@@ -220,33 +181,6 @@ export declare type Theme = {
         maxWidth: string;
         gutter: string[];
     };
-    dataTable: {
-        borderWidth: string;
-        borderRadius: string;
-        borderColor: string;
-        responsivePadding: {
-            vertical: [string, string];
-            horizontal: [string, string];
-        };
-        tableHeader: {
-            color: string;
-            backgroundColor: string;
-            borderWidth: string;
-            borderColor: string;
-            fontFamily: string;
-        };
-        tableCaption: {
-            color: string;
-            fontFamily: string;
-        };
-        tableCell: {
-            color: string;
-        };
-        tableRow: {
-            backgroundColor: string;
-            stripeColor: string;
-        };
-    };
     accordion: {
         header: {
             color: string;
@@ -255,29 +189,5 @@ export declare type Theme = {
             paddingVertical: string[];
         };
     };
-    tabs: {
-        tab: {
-            fontSize: string[];
-            fontFamily: string;
-            lineHeight: number;
-            borderTopWidth: string;
-            borderBottomWidth: string;
-            borderColor: string;
-            paddingVertical: string[];
-            paddingHorizontal: string[];
-            active: {
-                backgroundColor: string;
-                foregroundColor: string;
-                borderColor: string;
-            };
-            inactive: {
-                backgroundColor: string;
-                foregroundColor: string;
-            };
-            hover: {
-                foregroundColor: string;
-            };
-        };
-    };
 };
 export {};

package/dist/utils/utils.d.ts

@@ -1,15 +1,16 @@
-import React, { Ref, ReactNode, ComponentType } from 'react';
+import { Ref, ReactNode, ReactElement, ComponentType } from 'react';
 import { ViewProps, View } from 'react-native';
 import { BreakpointNames, Breakpoints } from '../hooks';
 declare function mergeRefs<T>(ref1: undefined | Ref<T>, ref2: undefined | Ref<T>): (element: T) => void;
 declare function getText(children: ReactNode): string;
 declare function pxToNumber(px: string): number;
-declare function styledComponentWithBreakpoints<T = ViewProps, C = View>(Component: ComponentType<T>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, BreakpointNames>> & React.RefAttributes<C>>;
+declare function numToPx(num: number): string;
+declare function styledComponentWithBreakpoints<T = ViewProps, C = View>(Component: ComponentType<T>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Omit<T, BreakpointNames>> & import("react").RefAttributes<C>>;
 declare function responsiveStyle(property: string, value: any, breakpoints: Breakpoints, formatter?: (v: any) => string): any;
 declare function getErrorMessage(id: string, errors: Array<{
     id: string;
     message: ReactNode;
 }>): null | ReactNode;
 declare function callAll(...fns: Array<Function | undefined>): (...args: any[]) => void;
-declare function filterChildrenByType(children: ReactNode, type: ComponentType): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-export { styledComponentWithBreakpoints, responsiveStyle, pxToNumber, mergeRefs, getText, getErrorMessage, callAll, filterChildrenByType, };
+declare function filterChildrenByType(children: ReactNode, type: ComponentType): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+export { styledComponentWithBreakpoints, responsiveStyle, pxToNumber, numToPx, mergeRefs, getText, getErrorMessage, callAll, filterChildrenByType, };

package/dist/utils/utils.js

@@ -10,32 +10,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterChildrenByType = exports.callAll = exports.getErrorMessage = exports.getText = exports.mergeRefs = exports.pxToNumber = exports.responsiveStyle = exports.styledComponentWithBreakpoints = void 0;
-var react_1 = __importStar(require("react"));
+exports.filterChildrenByType = exports.callAll = exports.getErrorMessage = exports.getText = exports.mergeRefs = exports.numToPx = exports.pxToNumber = exports.responsiveStyle = exports.styledComponentWithBreakpoints = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var hooks_1 = require("../hooks");
 function mergeRefs(ref1, ref2) {
     return function (element) {
@@ -69,11 +47,15 @@ function pxToNumber(px) {
     return parseFloat(px);
 }
 exports.pxToNumber = pxToNumber;
+function numToPx(num) {
+    return "".concat(num, "px");
+}
+exports.numToPx = numToPx;
 function styledComponentWithBreakpoints(Component) {
     return (0, react_1.forwardRef)(function (props, ref) {
         var breakpoints = (0, hooks_1.useBreakpoint)();
         // @ts-ignore.
-        return react_1.default.createElement(Component, __assign({}, props, breakpoints, { ref: ref }));
+        return (0, jsx_runtime_1.jsx)(Component, __assign({}, props, breakpoints, { ref: ref }));
     });
 }
 exports.styledComponentWithBreakpoints = styledComponentWithBreakpoints;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "2.2.0",
+  "version": "3.0.0-canary-edaf96f-93",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,8 @@
     "url": "@ovotech/element"
   },
   "dependencies": {
-    "@ovotech/element-core": "^1.1.0"
+    "@ovotech/element-core": "^2.0.0-canary-edaf96f-93",
+    "deepmerge": "^4.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",
@@ -32,10 +33,10 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "jest": "^28.1.1",
     "jest-styled-components": "^7.0.3",
-    "metro-react-native-babel-preset": "^0.76.0",
+    "metro-react-native-babel-preset": "^0.77.0",
     "react": "18.2.0",
     "react-is": "^16.13.0",
-    "react-native": "0.71.8",
+    "react-native": "0.72.3",
     "react-native-reanimated": "^2.10.0",
     "react-native-svg": "9.2.4",
     "react-router-dom": "^5.1.2",
@@ -47,7 +48,7 @@
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17.0.0",
-    "react-native": "^0.63.3 || ^0.71.0",
+    "react-native": "^0.63.3 || ^0.71.0 || ^0.72.0",
     "react-native-reanimated": "^2.10.0",
     "react-native-svg": "^13.5.0",
     "styled-components": "^5.1.3"

package/dist/components/Input/TelInput.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { TextInput } from 'react-native';
-declare const TelInput: React.ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
-    invalid?: boolean | undefined;
-    stretch?: boolean | undefined;
-    iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
-    iconRight?: (string & {}) | import("../../providers").IconName | undefined;
-    rightSlot?: React.ReactNode;
-} & React.RefAttributes<TextInput>>;
-export { TelInput };

package/dist/components/Input/TelInput.js

@@ -1,41 +0,0 @@
-"use strict";
-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);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TelInput = void 0;
-var react_1 = __importStar(require("react"));
-var Input_1 = require("./Input");
-var TelInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
-exports.TelInput = TelInput;