@ovotech/element-native 4.4.9 → 4.5.0

package/dist/components/Icon/Icon.js

@@ -1,40 +1,13 @@
-"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 __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;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var providers_1 = require("../../providers");
-var styled_native_1 = require("../../styled.native");
-var Icon = function (_a) {
-    var name = _a.name, size = _a.size, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
-    var icons = (0, providers_1.useIcons)();
-    var semantic = (0, react_1.useContext)(styled_native_1.ThemeContext).semantic;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { useIcons } from '../../providers';
+import { ThemeContext } from '../../styled.native';
+export const Icon = ({ name, size, color, testID, ...rest }) => {
+    const icons = useIcons();
+    const { semantic } = useContext(ThemeContext);
     // @ts-ignore to support additional icons.
-    var Svg = name && icons[name];
-    return Svg ? ((0, jsx_runtime_1.jsx)(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), 
+    const Svg = name && icons[name];
+    return Svg ? (_jsx(Svg, { testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, 
         // @ts-ignore this is valid.
-        color: color !== null && color !== void 0 ? color : semantic.message.base, width: size, height: size }, rest))) : null;
+        color: color ?? semantic.message.base, width: size, height: size, ...rest })) : null;
 };
-exports.Icon = Icon;

package/dist/components/Icon/index.js

@@ -1,5 +1 @@
-"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; } });
+export { Icon } from './Icon';

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { TextInput, TextInputProps } from 'react-native';
 import { IconNameExtended } from '../../providers/types';
 export type InputProps = TextInputProps & {
@@ -7,12 +7,7 @@ export type InputProps = TextInputProps & {
     iconLeft?: IconNameExtended;
     iconRight?: IconNameExtended;
     rightSlot?: ReactNode;
+    ref?: Ref<TextInput | null>;
 };
-declare const Input: import("react").ForwardRefExoticComponent<TextInputProps & {
-    invalid?: boolean | undefined;
-    stretch?: boolean | undefined;
-    iconLeft?: IconNameExtended | undefined;
-    iconRight?: IconNameExtended | undefined;
-    rightSlot?: ReactNode;
-} & import("react").RefAttributes<TextInput>>;
+declare const Input: ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export { Input };

package/dist/components/Input/Input.js

@@ -1,100 +1,78 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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;
-};
-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.Input = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var Icon_1 = require("../Icon/Icon");
-var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var core = _a.theme.core, side = _a.side, focused = _a.focused;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "])), focused ? '16px' : '14px', side === 'left' ? "left: ".concat((0, element_core_1.numToPx)(core.space[2])) : '', side === 'right' ? "right: ".concat((0, element_core_1.numToPx)(core.space[2])) : '');
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useState } from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon/Icon';
+const StyledIcon = styled(Icon)(({ theme: { core }, side, focused }) => {
+    return css `
+    position: absolute;
+    z-index: 1;
+    top: ${focused ? '16px' : '14px'};
+    ${side === 'left' ? `left: ${numToPx(core.space[2])}` : ''};
+    ${side === 'right' ? `right: ${numToPx(core.space[2])}` : ''};
+  `;
 });
-var Input = (0, react_1.forwardRef)(function (_a, ref) {
-    var onFocus = _a.onFocus, onBlur = _a.onBlur, style = _a.style, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rightSlot = _a.rightSlot, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot"]);
-    var _b = (0, react_1.useState)(false), focused = _b[0], setFocused = _b[1];
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsxs)(InputWrapper, { focused: focused, children: [iconLeft ? ((0, jsx_runtime_1.jsx)(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, (0, jsx_runtime_1.jsx)(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, 
+const Input = ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ...rest }) => {
+    const [focused, setFocused] = useState(false);
+    const breakpoints = useBreakpoint();
+    return (_jsxs(InputWrapper, { focused: focused, children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, { ...rest, ...breakpoints, iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, 
                 // @ts-ignore
-                ref: ref, onFocus: function (event) {
+                ref: ref, onFocus: (event) => {
                     setFocused(true);
                     if (onFocus) {
                         onFocus(event);
                     }
-                }, onBlur: function (event) {
+                }, onBlur: (event) => {
                     setFocused(false);
                     if (onBlur) {
                         onBlur(event);
                     }
-                } })), iconRight && !rightSlot ? ((0, jsx_runtime_1.jsx)(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
-});
-exports.Input = Input;
-var InputWrapper = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, focused = _a.focused;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), (0, element_core_1.numToPx)(core.radius.small), semantic.border.functional, focused
-        ? "\n      border-width: ".concat((0, element_core_1.numToPx)(core.borderWidth.small), ";\n      border-color: ").concat(semantic.focus.outline, ";\n      padding: 2px;\n      margin: -4px;")
-        : null);
-});
-var StyledInput = styled_native_1.default.TextInput(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
-    var fontSize = smallAndUp
+                } }), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
+};
+const InputWrapper = styled.View(({ theme: { core, semantic }, focused }) => css `
+    align-self: stretch;
+    border-radius: ${numToPx(core.radius.small)};
+    border-width: 0;
+    border-style: solid;
+    border-color: ${semantic.border.functional};
+    flex-direction: row;
+
+    ${focused
+    ? `
+      border-width: ${numToPx(core.borderWidth.small)};
+      border-color: ${semantic.focus.outline};
+      padding: 2px;
+      margin: -4px;`
+    : null}
+  `);
+const StyledInput = styled.TextInput(({ theme: { core, semantic }, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot, }) => {
+    const fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    var errorStyles = invalid
-        ? "\n        border-color: ".concat(semantic.message.error, ";\n      ")
+    const errorStyles = invalid
+        ? `
+        border-color: ${semantic.message.error};
+      `
         : '';
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n      padding: 0 ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n          ", "\n    "], ["\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n      padding: 0 ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n          ", "\n    "])), core.fontFamily.body.native, semantic.message.base, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(core.space[11]), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.functional, (0, element_core_1.numToPx)(core.radius.small), (0, element_core_1.numToPx)(core.space[2]), iconLeft ? "padding-left: ".concat((0, element_core_1.numToPx)(core.space[8]), ";") : '', iconRight || hasRightSlot
-        ? "padding-right: ".concat((0, element_core_1.numToPx)(core.space[8]), ";")
-        : '', errorStyles);
+    return css `
+      font-family: ${core.fontFamily.body.native};
+      color: ${semantic.message.base};
+      font-size: ${numToPx(fontSize)};
+      height: ${numToPx(core.space[11])};
+      line-height: 18px; /* Corrects for responsive line height in fixed height input */
+      border: ${numToPx(core.borderWidth.small)} solid
+        ${semantic.border.functional};
+      border-radius: ${numToPx(core.radius.small)};
+      padding: 0 ${numToPx(core.space[2])};
+      flex: 1;
+
+      ${iconLeft ? `padding-left: ${numToPx(core.space[8])};` : ''}
+      ${iconRight || hasRightSlot
+        ? `padding-right: ${numToPx(core.space[8])};`
+        : ''}
+
+          ${errorStyles}
+    `;
 });
-var templateObject_1, templateObject_2, templateObject_3;
+export { Input };

package/dist/components/Label/Label.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import { PropsWithChildren, Ref } from 'react';
 import { TextProps } from 'react-native';
-export declare const Label: import("react").ForwardRefExoticComponent<TextProps & {
-    inverted?: boolean | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<unknown>>;
+type LabelProps = PropsWithChildren<TextProps & {
+    inverted?: boolean;
+    ref?: Ref<Text>;
+}>;
+export declare const Label: ({ ref, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Label/Label.js

@@ -1,51 +1,10 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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.Label = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var StyledLabel = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, component = _b.component, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), component.label.fontFamily, (0, element_core_1.numToPx)(component.label.fontSize[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(component.label.lineHeight[smallAndUp ? 'large' : 'small']), inverted ? semantic.inverted.message.base : semantic.message.base);
-});
-exports.Label = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(StyledLabel, __assign({}, props, { ref: ref }))); });
-var templateObject_1;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+const StyledLabel = styled.Text(({ theme: { semantic, component }, smallAndUp, inverted }) => css `
+    font-family: ${component.label.fontFamily};
+    font-size: ${numToPx(component.label.fontSize[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(component.label.lineHeight[smallAndUp ? 'large' : 'small'])};
+    color: ${inverted ? semantic.inverted.message.base : semantic.message.base};
+  `);
+export const Label = ({ ref, ...props }) => (_jsx(StyledLabel, { ...props, ref: ref }));

package/dist/components/Label/index.js

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

package/dist/components/LabelText/LabelText.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
-import { Text } from 'react-native';
-declare const LabelText: import("react").ForwardRefExoticComponent<Omit<Omit<{
+declare const LabelText: (props: Omit<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
@@ -222,9 +220,9 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 large: number;
             };
             customMediaQuery: {
-                'small-and-up': number;
-                'medium-and-up': number;
-                'large-and-up': number;
+                "small-and-up": number;
+                "medium-and-up": number;
+                "large-and-up": number;
             };
             opacity: {
                 solid: number;
@@ -238,22 +236,22 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 max: number;
             };
             space: {
-                '0': number;
-                '1': number;
-                '2': number;
-                '3': number;
-                '4': number;
-                '5': number;
-                '6': number;
-                '7': number;
-                '8': number;
-                '9': number;
-                '10': number;
-                '11': number;
-                '12': number;
-                '13': number;
-                '14': number;
-                '15': number;
+                "0": number;
+                "1": number;
+                "2": number;
+                "3": number;
+                "4": number;
+                "5": number;
+                "6": number;
+                "7": number;
+                "8": number;
+                "9": number;
+                "10": number;
+                "11": number;
+                "12": number;
+                "13": number;
+                "14": number;
+                "15": number;
             };
             transition: {
                 slow: number;
@@ -309,22 +307,22 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Omit<Omit<{
             };
             data: {
                 branded: {
-                    '1': string;
-                    '2': string;
-                    '3': string;
-                    '4': string;
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
                 };
                 electric: {
-                    '1': string;
-                    '2': string;
-                    '3': string;
-                    '4': string;
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
                 };
                 gas: {
-                    '1': string;
-                    '2': string;
-                    '3': string;
-                    '4': string;
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
                 };
             };
             focus: {
@@ -573,5 +571,5 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Omit<Omit<{
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, "ref"> & import("react").RefAttributes<Text>>;
+}, import("../../hooks").BreakpointNames> & object) => import("react/jsx-runtime").JSX.Element;
 export { LabelText };

package/dist/components/LabelText/LabelText.js

@@ -1,43 +1,16 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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.LabelText = void 0;
-var element_core_1 = require("@ovotech/element-core");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
-var StyledLabelText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledLabelText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.bodyBold.native, (0, element_core_1.numToPx)(core.lineHeight.body.small), semantic.message.base, (0, element_core_1.numToPx)(fontSize));
+    return css `
+      font-family: ${core.fontFamily.bodyBold.native};
+      line-height: ${numToPx(core.lineHeight.body.small)};
+      color: ${semantic.message.base};
+      font-size: ${numToPx(fontSize)};
+    `;
 });
-var LabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledLabelText);
-exports.LabelText = LabelText;
-var templateObject_1;
+const LabelText = styledComponentWithBreakpoints(StyledLabelText);
+export { LabelText };

package/dist/components/LabelText/index.js

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

package/dist/components/Lead/Lead.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import { PropsWithChildren, Ref } from 'react';
 import { TextProps } from 'react-native';
-export declare const Lead: import("react").ForwardRefExoticComponent<TextProps & {
-    inverted?: boolean | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<unknown>>;
+type LeadProps = PropsWithChildren<TextProps & {
+    inverted?: boolean;
+    ref?: Ref<Text>;
+}>;
+export declare const Lead: ({ ref, ...props }: LeadProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Lead/Lead.js

@@ -1,53 +1,12 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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.Lead = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var StyledLead = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, component = _b.component, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), component.lead.fontFamily, (0, element_core_1.numToPx)(component.lead.fontSize[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(component.lead.lineHeight[smallAndUp ? 'large' : 'small']), inverted
-        ? semantic.inverted.message.link
-        : semantic.message.branded);
-});
-exports.Lead = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(StyledLead, __assign({}, props, { ref: ref }))); });
-var templateObject_1;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+const StyledLead = styled.Text(({ theme: { semantic, component }, smallAndUp, inverted }) => css `
+    font-family: ${component.lead.fontFamily};
+    font-size: ${numToPx(component.lead.fontSize[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(component.lead.lineHeight[smallAndUp ? 'large' : 'small'])};
+    color: ${inverted
+    ? semantic.inverted.message.link
+    : semantic.message.branded};
+  `);
+export const Lead = ({ ref, ...props }) => (_jsx(StyledLead, { ...props, ref: ref }));

package/dist/components/Lead/index.js

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