@ovotech/element-native 5.4.3 → 5.5.0

package/dist/components/Grid/index.js

@@ -1,2 +1,7 @@
-export { Col } from './Col';
-export { Row } from './Row';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = exports.Col = void 0;
+var Col_1 = require("./Col");
+Object.defineProperty(exports, "Col", { enumerable: true, get: function () { return Col_1.Col; } });
+var Row_1 = require("./Row");
+Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return Row_1.Row; } });

package/dist/components/Heading/Heading.js

@@ -1,11 +1,58 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
-const StyledHeading = styled.Text(({ theme, smallAndUp, inverted, level, variant }) => {
+"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;
+    };
+})();
+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.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = exports.Heading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const hooks_1 = require("../../hooks");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const StyledHeading = styled_native_1.default.Text(({ theme, smallAndUp, inverted, level, variant }) => {
     const fontSize = theme.font.size[level].mediaQuery[smallAndUp ? 'lg' : 'sm'];
-    const lineHeight = numToPx(theme.font.lineHeight[level].mediaQuery[smallAndUp ? 'lg' : 'sm']);
-    const letterSpacing = numToPx(theme.font.letterSpacing[level].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    const lineHeight = (0, element_core_1.numToPx)(theme.font.lineHeight[level].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    const letterSpacing = (0, element_core_1.numToPx)(theme.font.letterSpacing[level].mediaQuery[smallAndUp ? 'lg' : 'sm']);
     const color = inverted
         ? theme.color.brand.onBrand
         : variant === 'surface'
@@ -13,19 +60,25 @@ const StyledHeading = styled.Text(({ theme, smallAndUp, inverted, level, variant
             : theme.color.brand.brand;
     // H1 & H2 are black, others bold
     const family = level === 'xl' || level === '2xl' ? 'bold' : 'black';
-    return css `
+    return (0, styled_native_1.css) `
       font-family: ${theme.native.font.family[family]};
-      font-size: ${numToPx(fontSize)};
+      font-size: ${(0, element_core_1.numToPx)(fontSize)};
       line-height: ${lineHeight};
       letter-spacing: ${letterSpacing};
       color: ${color};
     `;
 });
-export const Heading = ({ accessibilityRole = 'header', ...rest }) => {
-    const breakpoints = useBreakpoint();
-    return (_jsx(StyledHeading, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+const Heading = (_a) => {
+    var { accessibilityRole = 'header' } = _a, rest = __rest(_a, ["accessibilityRole"]);
+    const breakpoints = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsx)(StyledHeading, Object.assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
-export const Heading1 = (props) => _jsx(Heading, { ...props, level: "4xl" });
-export const Heading2 = (props) => _jsx(Heading, { ...props, level: "3xl" });
-export const Heading3 = (props) => _jsx(Heading, { ...props, level: "2xl" });
-export const Heading4 = (props) => _jsx(Heading, { ...props, level: "xl" });
+exports.Heading = Heading;
+const Heading1 = (props) => (0, jsx_runtime_1.jsx)(exports.Heading, Object.assign({}, props, { level: "4xl" }));
+exports.Heading1 = Heading1;
+const Heading2 = (props) => (0, jsx_runtime_1.jsx)(exports.Heading, Object.assign({}, props, { level: "3xl" }));
+exports.Heading2 = Heading2;
+const Heading3 = (props) => (0, jsx_runtime_1.jsx)(exports.Heading, Object.assign({}, props, { level: "2xl" }));
+exports.Heading3 = Heading3;
+const Heading4 = (props) => (0, jsx_runtime_1.jsx)(exports.Heading, Object.assign({}, props, { level: "xl" }));
+exports.Heading4 = Heading4;

package/dist/components/Heading/index.js

@@ -1 +1,8 @@
-export { Heading1, Heading2, Heading3, Heading4 } from './Heading';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = void 0;
+var Heading_1 = require("./Heading");
+Object.defineProperty(exports, "Heading1", { enumerable: true, get: function () { return Heading_1.Heading1; } });
+Object.defineProperty(exports, "Heading2", { enumerable: true, get: function () { return Heading_1.Heading2; } });
+Object.defineProperty(exports, "Heading3", { enumerable: true, get: function () { return Heading_1.Heading3; } });
+Object.defineProperty(exports, "Heading4", { enumerable: true, get: function () { return Heading_1.Heading4; } });

package/dist/components/HintText/HintText.js

@@ -1,20 +1,56 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-const StyledHintText = styled.Text(({ theme, smallAndUp }) => {
+"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 css `
-    margin-top: ${numToPx(theme.space[100])};
-    margin-bottom: ${numToPx(theme.space[100])};
+    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: ${numToPx(fontSize)};
-    line-height: ${numToPx(smallAndUp
+    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 = styledComponentWithBreakpoints(StyledHintText);
-export { HintText };
+const HintText = (0, utils_1.styledComponentWithBreakpoints)(StyledHintText);
+exports.HintText = HintText;

package/dist/components/HintText/index.js

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

@@ -1,11 +1,27 @@
-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 = '16', color, testID, ...rest }) => {
-    const icons = useIcons();
-    const theme = useContext(ThemeContext);
+"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 ? (_jsx(Svg, { testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, color: color ?? theme.color.surface.onSurface, width: size, height: size, ...rest })) : null;
+    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

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

package/dist/components/Input/Input.js

@@ -1,27 +1,75 @@
-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, side, focused }) => {
+"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;
+    };
+})();
+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;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const Icon_1 = require("../Icon/Icon");
+const StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme, side, focused }) => {
     const focusCompensation = focused ? theme.space[50] : 0;
-    return css `
+    return (0, styled_native_1.css) `
     position: absolute;
     z-index: 1;
-    top: ${numToPx(theme.space[350] + focusCompensation)};
+    top: ${(0, element_core_1.numToPx)(theme.space[350] + focusCompensation)};
     ${side === 'left'
-        ? `left: ${numToPx(theme.space[200] + focusCompensation)}`
+        ? `left: ${(0, element_core_1.numToPx)(theme.space[200] + focusCompensation)}`
         : ''};
     ${side === 'right'
-        ? `right: ${numToPx(theme.space[200] + focusCompensation)}`
+        ? `right: ${(0, element_core_1.numToPx)(theme.space[200] + focusCompensation)}`
         : ''};
   `;
 });
-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, ref: ref, onFocus: (event) => {
+const Input = (_a) => {
+    var { onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref } = _a, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot", "ref"]);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const 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, Object.assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, ref: ref, onFocus: (event) => {
                     setFocused(true);
                     if (onFocus) {
                         onFocus(event);
@@ -31,11 +79,12 @@ const Input = ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ..
                     if (onBlur) {
                         onBlur(event);
                     }
-                } }), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
+                } })), iconRight && !rightSlot ? ((0, jsx_runtime_1.jsx)(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
 };
-const InputWrapper = styled.View(({ theme, focused }) => css `
+exports.Input = Input;
+const InputWrapper = styled_native_1.default.View(({ theme, focused }) => (0, styled_native_1.css) `
     align-self: stretch;
-    border-radius: ${numToPx(theme.border.radius.md)};
+    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.md)};
     border-width: 0;
     border-style: solid;
     border-color: ${theme.input.color.border};
@@ -43,13 +92,13 @@ const InputWrapper = styled.View(({ theme, focused }) => css `
 
     ${focused
     ? `
-      border-width: ${numToPx(theme.border.width.md)};
+      border-width: ${(0, element_core_1.numToPx)(theme.border.width.md)};
       border-color: ${theme.color.outline.outer};
       padding: 2px;
       margin: -4px;`
     : null}
   `);
-const StyledInput = styled.TextInput(({ theme, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
+const StyledInput = styled_native_1.default.TextInput(({ theme, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
     const fontSize = smallAndUp
         ? theme.font.size.md.mediaQuery.lg
         : theme.font.size.md.mediaQuery.sm;
@@ -58,23 +107,22 @@ const StyledInput = styled.TextInput(({ theme, invalid, smallAndUp, iconLeft, ic
         border-color: ${theme.color.alert.error};
       `
         : '';
-    return css `
+    return (0, styled_native_1.css) `
     font-family: ${theme.native.font.family.book};
     color: ${theme.color.surface.onSurface};
-    font-size: ${numToPx(fontSize)};
-    height: ${numToPx(theme.space[1100])};
+    font-size: ${(0, element_core_1.numToPx)(fontSize)};
+    height: ${(0, element_core_1.numToPx)(theme.space[1100])};
     line-height: 18px; /* Corrects for responsive line height in fixed height input */
-    border: ${numToPx(theme.border.width.md)} solid ${theme.input.color.border};
-    border-radius: ${numToPx(theme.border.radius.sm)};
-    padding: ${numToPx(theme.space[200])};
+    border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid ${theme.input.color.border};
+    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.sm)};
+    padding: ${(0, element_core_1.numToPx)(theme.space[200])};
     flex: 1;
 
-    ${iconLeft ? `padding-left: ${numToPx(theme.space[800])};` : ''}
+    ${iconLeft ? `padding-left: ${(0, element_core_1.numToPx)(theme.space[800])};` : ''}
     ${iconRight || hasRightSlot
-        ? `padding-right: ${numToPx(theme.space[800])};`
+        ? `padding-right: ${(0, element_core_1.numToPx)(theme.space[800])};`
         : ''}
 
           ${errorStyles}
   `;
 });
-export { Input };

package/dist/components/LabelText/LabelText.js

@@ -1,19 +1,55 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-const StyledLabelText = styled.Text(({ theme, smallAndUp }) => {
+"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.LabelText = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const utils_1 = require("../../utils");
+const StyledLabelText = styled_native_1.default.Text(({ theme, smallAndUp }) => {
     const fontSize = smallAndUp
         ? theme.font.size.md.mediaQuery.lg
         : theme.font.size.md.mediaQuery.sm;
     const lineHeight = smallAndUp
         ? theme.font.lineHeight.md.mediaQuery.lg
         : theme.font.lineHeight.md.mediaQuery.sm;
-    return css `
+    return (0, styled_native_1.css) `
     font-family: ${theme.native.font.family.bold};
-    line-height: ${numToPx(lineHeight)};
+    line-height: ${(0, element_core_1.numToPx)(lineHeight)};
     color: ${theme.color.surface.onSurface};
-    font-size: ${numToPx(fontSize)};
+    font-size: ${(0, element_core_1.numToPx)(fontSize)};
   `;
 });
-const LabelText = styledComponentWithBreakpoints(StyledLabelText);
-export { LabelText };
+const LabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledLabelText);
+exports.LabelText = LabelText;

package/dist/components/LabelText/index.js

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

package/dist/components/LineThrough/LineThrough.js

@@ -1,4 +1,10 @@
-import styled from '../../styled.native';
-export const LineThrough = styled.Text `
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineThrough = void 0;
+const styled_native_1 = __importDefault(require("../../styled.native"));
+exports.LineThrough = styled_native_1.default.Text `
   text-decoration: line-through;
 `;

package/dist/components/LineThrough/index.js

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

package/dist/components/Link/Link.js

@@ -1,24 +1,73 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { getText } from '../../utils/utils';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-const Link = (props) => _jsx(Button, { ...props, ref: props.ref });
-const StyledText = styled.Text(({ theme }) => css `
+"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;
+    };
+})();
+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.TextLink = exports.Link = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const utils_1 = require("../../utils/utils");
+const Button_1 = require("../Button");
+const Icon_1 = require("../Icon");
+const Link = (props) => (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, props, { ref: props.ref }));
+exports.Link = Link;
+const StyledText = styled_native_1.default.Text(({ theme }) => (0, styled_native_1.css) `
     font-family: ${theme.native.font.family.book};
-    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
+    font-size: ${(0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.sm)};
     color: ${theme.color.surface.link};
     text-decoration: underline;
     text-decoration-color: ${theme.color.surface.link};
   `);
-const StyledIcon = styled(Icon)(({ theme }) => css `
+const StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme }) => (0, styled_native_1.css) `
     color: ${theme.color.surface.link};
   `);
-const TextLink = ({ children, opensInNewWindow = false, accessibilityLabel, ref, ...rest }) => {
+const TextLink = (_a) => {
+    var { children, opensInNewWindow = false, accessibilityLabel, ref } = _a, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel", "ref"]);
     const updatedAccessibilityLabel = opensInNewWindow
-        ? `${accessibilityLabel ? accessibilityLabel : getText(children)} (opens in new window)`
+        ? `${accessibilityLabel ? accessibilityLabel : (0, utils_1.getText)(children)} (opens in new window)`
         : accessibilityLabel;
-    return (_jsxs(StyledText, { ...rest, accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(StyledText, Object.assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [(0, jsx_runtime_1.jsx)(StyledText, { children: children }), opensInNewWindow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(StyledIcon, { size: 12, name: "new-window" })] }))] })));
 };
-export { Link, TextLink };
+exports.TextLink = TextLink;

package/dist/components/Link/index.js

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