@ovotech/element-native 4.4.8 → 4.5.0

package/dist/components/LineThrough/LineThrough.d.ts

@@ -215,9 +215,9 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
             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;
@@ -231,22 +231,22 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
             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;
@@ -302,22 +302,22 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
         };
         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: {

package/dist/components/LineThrough/LineThrough.js

@@ -1,13 +1,4 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LineThrough = void 0;
-var styled_native_1 = __importDefault(require("../../styled.native"));
-exports.LineThrough = styled_native_1.default.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: line-through;\n"], ["\n  text-decoration: line-through;\n"])));
-var templateObject_1;
+import styled from '../../styled.native';
+export const LineThrough = styled.Text `
+  text-decoration: line-through;
+`;

package/dist/components/LineThrough/index.js

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

package/dist/components/List/List.d.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { TextProps, ViewProps } from 'react-native';
 declare const Li: ({ children }: PropsWithChildren<TextProps>) => import("react/jsx-runtime").JSX.Element;
 declare const Ul: (props: PropsWithChildren<ViewProps & {
-    showBullets?: boolean | undefined;
+    showBullets?: boolean;
 }>) => import("react/jsx-runtime").JSX.Element;
 declare const Ol: (props: PropsWithChildren<ViewProps>) => import("react/jsx-runtime").JSX.Element;
 export { Li, Ol, Ul };

package/dist/components/List/List.js

@@ -1,34 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Ul = exports.Ol = exports.Li = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var utils_1 = require("../../utils");
-var Margin_1 = require("../Margin");
-var Stack_1 = require("../Stack");
-var styled_1 = require("./styled");
-var ListItem = function (_a) {
-    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, prefix = _a.prefix;
-    return ((0, jsx_runtime_1.jsxs)(styled_1.FlexRow, { children: [prefix ? ((0, jsx_runtime_1.jsx)(styled_1.TextBullet, { children: prefix })) : ((0, jsx_runtime_1.jsx)(styled_1.SquareBullet, { visible: showBullets })), (0, jsx_runtime_1.jsx)(styled_1.LiContent, { children: children })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from 'react';
+import { View } from 'react-native';
+import { getValidChildren } from '../../utils';
+import { Margin } from '../Margin';
+import { Stack } from '../Stack';
+import { FlexRow, LiContent, SquareBullet, TextBullet } from './styled';
+const ListItem = ({ children, showBullets = true, prefix, }) => {
+    return (_jsxs(FlexRow, { children: [prefix ? (_jsx(TextBullet, { children: prefix })) : (_jsx(SquareBullet, { visible: showBullets })), _jsx(LiContent, { children: children })] }));
 };
-var renderList = function (_a) {
-    var children = _a.children, listType = _a.listType, showBullets = _a.showBullets;
-    var validChildren = (0, utils_1.getValidChildren)(children);
-    return react_1.Children.map(validChildren, function (child, index) { return ((0, jsx_runtime_1.jsx)(ListItem, { prefix: listType === 'ol' ? "".concat(index + 1, ".") : undefined, showBullets: showBullets, children: child })); });
+const renderList = ({ children, listType, showBullets, }) => {
+    const validChildren = getValidChildren(children);
+    return Children.map(validChildren, (child, index) => (_jsx(ListItem, { prefix: listType === 'ol' ? `${index + 1}.` : undefined, showBullets: showBullets, children: child })));
 };
-var Li = function (_a) {
-    var children = _a.children;
-    return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexDirection: 'column' }, children: children });
+const Li = ({ children }) => {
+    return _jsx(View, { style: { flexDirection: 'column' }, children: children });
 };
-exports.Li = Li;
-var Ul = function (props) {
-    var children = props.children, showBullets = props.showBullets;
-    return ((0, jsx_runtime_1.jsx)(Margin_1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, { spaceBetween: 2, children: renderList({ children: children, listType: 'ul', showBullets: showBullets }) }) }));
+const Ul = (props) => {
+    const { children, showBullets } = props;
+    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ul', showBullets }) }) }));
 };
-exports.Ul = Ul;
-var Ol = function (props) {
-    var children = props.children;
-    return ((0, jsx_runtime_1.jsx)(Margin_1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, { spaceBetween: 2, children: renderList({ children: children, listType: 'ol' }) }) }));
+const Ol = (props) => {
+    const { children } = props;
+    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ol' }) }) }));
 };
-exports.Ol = Ol;
+export { Li, Ol, Ul };

package/dist/components/List/index.js

@@ -1,7 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Li = exports.Ul = exports.Ol = void 0;
-var List_1 = require("./List");
-Object.defineProperty(exports, "Ol", { enumerable: true, get: function () { return List_1.Ol; } });
-Object.defineProperty(exports, "Ul", { enumerable: true, get: function () { return List_1.Ul; } });
-Object.defineProperty(exports, "Li", { enumerable: true, get: function () { return List_1.Li; } });
+export { Ol, Ul, Li } from './List';

package/dist/components/List/styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ViewProps } from 'react-native';
 import { Breakpoints } from '../../hooks';
 export declare const SquareBullet: import("styled-components").StyledComponent<typeof import("react-native").View, {
@@ -218,9 +217,9 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
             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;
@@ -234,22 +233,22 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
             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;
@@ -305,22 +304,22 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
         };
         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: {
@@ -566,7 +565,7 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
         };
     };
 }, ViewProps & {
-    visible?: boolean | undefined;
+    visible?: boolean;
 } & Breakpoints, never>;
 export declare const TextBullet: import("styled-components").StyledComponent<typeof import("react-native").Text, {
     core: {
@@ -785,9 +784,9 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
             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;
@@ -801,22 +800,22 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
             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;
@@ -872,22 +871,22 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
         };
         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: {
@@ -1350,9 +1349,9 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
             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;
@@ -1366,22 +1365,22 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
             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;
@@ -1437,22 +1436,22 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
         };
         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: {
@@ -1915,9 +1914,9 @@ export declare const LiContent: import("styled-components").StyledComponent<type
             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;
@@ -1931,22 +1930,22 @@ export declare const LiContent: import("styled-components").StyledComponent<type
             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;
@@ -2002,22 +2001,22 @@ export declare const LiContent: import("styled-components").StyledComponent<type
         };
         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: {
@@ -2263,5 +2262,5 @@ export declare const LiContent: import("styled-components").StyledComponent<type
         };
     };
 }, {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 }, never>;

package/dist/components/List/styled.js

@@ -1,53 +1,40 @@
-"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.LiContent = exports.FlexRow = exports.TextBullet = exports.SquareBullet = void 0;
-var element_core_1 = require("@ovotech/element-core");
-var styled_native_1 = __importStar(require("../../styled.native"));
-exports.SquareBullet = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, visible = _a.visible, smallAndUp = _a.smallAndUp;
-    var lineHeight = smallAndUp
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export const SquareBullet = styled.View(({ theme: { core, semantic }, visible, smallAndUp }) => {
+    const lineHeight = smallAndUp
         ? core.lineHeight.body.large
         : core.lineHeight.body.small;
-    var topMargin = (lineHeight - core.space[2]) / 2;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    background-color: ", ";\n  "], ["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    background-color: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(topMargin), visible ? semantic.message.base : 'transparent');
+    const topMargin = (lineHeight - core.space[2]) / 2;
+    return css `
+    align-self: flex-start;
+    width: ${numToPx(core.space[2])};
+    height: ${numToPx(core.space[2])};
+    margin-right: ${numToPx(core.space[2])};
+    margin-top: ${numToPx(topMargin)};
+    background-color: ${visible ? semantic.message.base : 'transparent'};
+  `;
 });
-exports.TextBullet = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
+export const TextBullet = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    var lineHeight = smallAndUp
+    const lineHeight = smallAndUp
         ? core.lineHeight.body.large
         : core.lineHeight.body.small;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "], ["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "])), (0, element_core_1.numToPx)(core.space[1]), (0, element_core_1.numToPx)(core.space[3]), (0, element_core_1.numToPx)(core.space[3]), (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(lineHeight), semantic.message.base);
+    return css `
+      margin-right: ${numToPx(core.space[1])};
+      min-width: ${numToPx(core.space[3])};
+      min-height: ${numToPx(core.space[3])};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(lineHeight)};
+      text-align: left;
+      color: ${semantic.message.base};
+    `;
 });
-exports.FlexRow = styled_native_1.default.View(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
-exports.LiContent = styled_native_1.default.View(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex-direction: column;\n  flex: 1;\n"], ["\n  flex-direction: column;\n  flex: 1;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export const FlexRow = styled.View `
+  flex-direction: row;
+`;
+export const LiContent = styled.View `
+  flex-direction: column;
+  flex: 1;
+`;