@ovotech/element-native 5.4.2 → 5.4.3-canary-8992fd2-429

package/dist/components/HintText/HintText.d.ts

@@ -0,0 +1,585 @@
+declare const HintText: (props: Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: {
+        color: {
+            neutral: {
+                "20": string;
+                "30": string;
+                "40": string;
+                "50": string;
+                "60": string;
+                "70": string;
+                "80": string;
+                white: string;
+                black: string;
+            };
+            red: {
+                "20": string;
+                "30": string;
+                "40": string;
+                "50": string;
+                "60": string;
+                "70": string;
+                "80": string;
+            };
+            orange: {
+                "20": string;
+                "30": string;
+                "40": string;
+                "50": string;
+                "60": string;
+                "70": string;
+            };
+            yellow: {
+                "70": string;
+                "80": string;
+            };
+            green: {
+                "20": string;
+                "30": string;
+                "40": string;
+                "50": string;
+                "56": string;
+                "60": string;
+                "70": string;
+                "80": string;
+                "90": string;
+            };
+            blue: {
+                "20": string;
+                "30": string;
+                "40": string;
+                "50": string;
+                "60": string;
+                "70": string;
+            };
+            alert: {
+                success: string;
+                successTint: string;
+                warning: string;
+                warningTint: string;
+                error: string;
+                errorTint: string;
+                info: string;
+                infoTint: string;
+                neutral: string;
+                neutralTint: string;
+                border: string;
+            };
+            input: {
+                borderDim: string;
+            };
+            brand: {
+                brand: string;
+                dark: string;
+                dim: string;
+                bold: string;
+                bright: string;
+                gradientFrom: string;
+                gradientTo: string;
+                onBrand: string;
+                onBrandVariant: string;
+                aiGradientFrom: string;
+                aiGradientTo: string;
+                fixed: {
+                    brand: string;
+                    dark: string;
+                    dim: string;
+                    bold: string;
+                    bright: string;
+                    onBrand: string;
+                    onBrandVariant: string;
+                };
+            };
+            outline: {
+                outer: string;
+                inner: string;
+            };
+            surface: {
+                surface: string;
+                bright: string;
+                dim: string;
+                onSurface: string;
+                onSurfaceVariant: string;
+                border: string;
+                borderDim: string;
+                link: string;
+                electricity: string;
+                gas: string;
+                fadeFrom: string;
+                fadeTo: string;
+                fixed: {
+                    onSurface: string;
+                    bright: string;
+                };
+            };
+        };
+        transition: {
+            duration: {
+                fast: number;
+                medium: number;
+                slow: number;
+            };
+        };
+        unit: {
+            "0": number;
+            "25": number;
+            "50": number;
+            "100": number;
+            "200": number;
+            "300": number;
+            "350": number;
+            "400": number;
+            "450": number;
+            "500": number;
+            "550": number;
+            "600": number;
+            "700": number;
+            "800": number;
+            "900": number;
+            "1000": number;
+            "1100": number;
+            "1200": number;
+            "1300": number;
+            "1400": number;
+            "1500": number;
+            "1600": number;
+            "1800": number;
+            "2000": number;
+            "2400": number;
+            "3000": number;
+            "3500": number;
+        };
+        border: {
+            radius: {
+                xs: number;
+                sm: number;
+                md: number;
+                lg: number;
+                xl: number;
+                "2xl": number;
+                "3xl": number;
+            };
+            width: {
+                sm: number;
+                md: number;
+                lg: number;
+            };
+        };
+        breakpoint: {
+            xsmall: number;
+            small: number;
+            medium: number;
+            large: number;
+        };
+        native: {
+            font: {
+                family: {
+                    black: string;
+                    book: string;
+                    bold: string;
+                };
+            };
+        };
+        web: {
+            font: {
+                family: string;
+            };
+        };
+        font: {
+            letterSpacing: {
+                d1: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d2: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d3: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d4: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "4xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "3xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "2xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                xl: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                lg: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                md: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                sm: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                xs: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+            };
+            lineHeight: {
+                d1: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d2: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d3: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d4: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "4xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "3xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "2xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                xl: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                lg: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                md: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                sm: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                xs: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+            };
+            paragraphSpace: {
+                d1: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d2: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d3: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d4: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "4xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "3xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "2xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                xl: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                lg: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                md: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                sm: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                xs: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+            };
+            size: {
+                d1: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d2: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d3: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                d4: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "4xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "3xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                "2xl": {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                xl: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                lg: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                md: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                sm: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+                xs: {
+                    mediaQuery: {
+                        sm: number;
+                        lg: number;
+                    };
+                };
+            };
+            weight: {
+                book: number;
+                bold: number;
+                black: number;
+            };
+        };
+        mediaQuery: {
+            xsmall: number;
+            small: number;
+            medium: number;
+            large: number;
+        };
+        customMediaQuery: {
+            "xsmall-and-up": number;
+            "small-and-up": number;
+            "medium-and-up": number;
+            "large-and-up": number;
+        };
+        opacity: {
+            solid: number;
+            translucent: number;
+            transparent: number;
+        };
+        space: {
+            "0": number;
+            "25": number;
+            "50": number;
+            "100": number;
+            "150": number;
+            "200": number;
+            "250": number;
+            "300": number;
+            "350": number;
+            "400": number;
+            "450": number;
+            "500": number;
+            "550": number;
+            "600": number;
+            "700": number;
+            "800": number;
+            "900": number;
+            "1000": number;
+            "1100": number;
+            "1200": number;
+            "1300": number;
+            "1400": number;
+            "1500": number;
+            "1600": number;
+            "1800": number;
+            "2000": number;
+            "2400": number;
+            "3000": number;
+            "3500": number;
+            base: number;
+        };
+        button: {
+            color: {
+                focus: {
+                    blue: string;
+                    white: string;
+                };
+            };
+            surface: {
+                color: {
+                    fg: string;
+                    bg: string;
+                    bgVariant: string;
+                    bgHover: string;
+                    fgInverted: string;
+                    bgInverted: string;
+                    bgInvertedHover: string;
+                };
+            };
+            destructive: {
+                color: {
+                    fg: string;
+                    bg: string;
+                    bgHover: string;
+                };
+            };
+        };
+        input: {
+            color: {
+                label: string;
+                border: string;
+                borderError: string;
+                hint: string;
+                selected: string;
+                selectedTint: string;
+            };
+        };
+    } | undefined;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}, import("../../hooks").BreakpointNames> & object) => import("react/jsx-runtime").JSX.Element;
+export { HintText };

package/dist/components/HintText/HintText.js

@@ -0,0 +1,56 @@
+"use strict";
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HintText = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const utils_1 = require("../../utils");
+const StyledHintText = styled_native_1.default.Text(({ theme, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return (0, styled_native_1.css) `
+    margin-top: ${(0, element_core_1.numToPx)(theme.space[100])};
+    margin-bottom: ${(0, element_core_1.numToPx)(theme.space[100])};
+    font-family: ${theme.native.font.family.book};
+    font-size: ${(0, element_core_1.numToPx)(fontSize)};
+    line-height: ${(0, element_core_1.numToPx)(smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm)};
+    color: ${theme.color.surface.onSurfaceVariant};
+  `;
+});
+const HintText = (0, utils_1.styledComponentWithBreakpoints)(StyledHintText);
+exports.HintText = HintText;

package/dist/components/HintText/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HintText = void 0;
+var HintText_1 = require("./HintText");
+Object.defineProperty(exports, "HintText", { enumerable: true, get: function () { return HintText_1.HintText; } });

package/dist/components/Icon/Icon.js

@@ -0,0 +1,27 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const providers_1 = require("../../providers");
+const styled_native_1 = require("../../styled.native");
+const Icon = (_a) => {
+    var { name, size = '16', color, testID } = _a, rest = __rest(_a, ["name", "size", "color", "testID"]);
+    const icons = (0, providers_1.useIcons)();
+    const theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
+    // @ts-ignore to support additional icons.
+    const Svg = name && icons[name];
+    return Svg ? ((0, jsx_runtime_1.jsx)(Svg, Object.assign({ testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, color: color !== null && color !== void 0 ? color : theme.color.surface.onSurface, width: size, height: size }, rest))) : null;
+};
+exports.Icon = Icon;

package/dist/components/Icon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });