@ovotech/element-native 4.4.9 → 4.5.0

package/dist/components/TextInput/TextInput.js

@@ -1,19 +1,4 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInput = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Input_1 = require("../Input/Input");
-var TextInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "default", ref: ref }))); });
-exports.TextInput = TextInput;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../Input/Input';
+const TextInput = ({ ref, ...props }) => (_jsx(Input, { keyboardType: "default", ref: ref, ...props }));
+export { TextInput };

package/dist/components/TextInput/index.js

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

package/dist/components/TextLink/TextLink.d.ts

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

package/dist/components/TextLink/TextLink.js

@@ -1,75 +1,21 @@
-"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.TextLink = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils/utils");
-var Icon_1 = require("../Icon");
-var StyledText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), core.fontFamily.body.native, semantic.message.link, semantic.message.link);
-});
-var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), semantic.message.branded);
-});
-var TextLink = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, _b = _a.opensInNewWindow, opensInNewWindow = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel"]);
-    var updatedAccessibilityLabel = opensInNewWindow
-        ? "".concat(accessibilityLabel ? accessibilityLabel : (0, utils_1.getText)(children), " (opens in new window)")
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { getText } from '../../utils/utils';
+import { Icon } from '../Icon';
+const StyledText = styled.Text(({ theme: { core, semantic } }) => css `
+    font-family: ${core.fontFamily.body.native};
+    color: ${semantic.message.link};
+    text-decoration: underline;
+    text-decoration-color: ${semantic.message.link};
+  `);
+const StyledIcon = styled(Icon)(({ theme: { semantic } }) => css `
+    color: ${semantic.message.branded};
+  `);
+const TextLink = ({ children, opensInNewWindow = false, accessibilityLabel, ref, ...rest }) => {
+    const updatedAccessibilityLabel = opensInNewWindow
+        ? `${accessibilityLabel ? accessibilityLabel : getText(children)} (opens in new window)`
         : accessibilityLabel;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.Text, __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" })] }))] })));
-});
-exports.TextLink = TextLink;
-var templateObject_1, templateObject_2;
+    return (_jsxs(Text, { ...rest, accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] }));
+};
+export { TextLink };

package/dist/components/TextLink/index.js

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

package/dist/components/TextareaField/TextareaField.d.ts

@@ -1,12 +1,5 @@
-/// <reference types="react" />
-import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const TextareaField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
-    invalid?: boolean | undefined;
-    stretch?: boolean | undefined;
-    iconLeft?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
-    rightSlot?: import("react").ReactNode;
-} & {
-    rows?: number | undefined;
-} & import("react").RefAttributes<NativeTextInput>>;
+import { TextareaInputProps } from '../TextareaInput';
+type Props = Omit<FieldProps, 'children'> & TextareaInputProps;
+export declare const TextareaField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextareaField/TextareaField.js

@@ -1,33 +1,6 @@
-"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);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field } from '../Field';
+import { TextareaInput } from '../TextareaInput';
+export const TextareaField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(TextareaInput, { ref: ref }) }));
 };
-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.TextareaField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Field_1 = require("../Field");
-var TextareaInput_1 = require("../TextareaInput");
-exports.TextareaField = (0, react_1.forwardRef)(function (_a, ref) {
-    var rest = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(Field_1.Field, __assign({}, rest, { ref: ref, children: (0, jsx_runtime_1.jsx)(TextareaInput_1.TextareaInput, {}) })));
-});

package/dist/components/TextareaField/index.js

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

package/dist/components/TextareaInput/TextareaInput.d.ts

@@ -1,16 +1,6 @@
-/// <reference types="react" />
-import { TextInput as RNTextInput } from 'react-native';
 import { InputProps } from '../Input/Input';
 type TextareaInputProps = InputProps & {
     rows?: number;
 };
-declare const TextareaInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
-    invalid?: boolean | undefined;
-    stretch?: boolean | undefined;
-    iconLeft?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
-    rightSlot?: import("react").ReactNode;
-} & {
-    rows?: number | undefined;
-} & import("react").RefAttributes<RNTextInput>>;
+declare const TextareaInput: ({ rows, ref, ...rest }: TextareaInputProps) => import("react/jsx-runtime").JSX.Element;
 export { TextareaInput, TextareaInputProps };

package/dist/components/TextareaInput/TextareaInput.js

@@ -1,67 +1,13 @@
-"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.TextareaInput = 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 Input_1 = require("../Input/Input");
-var StyledInput = (0, styled_native_1.default)(Input_1.Input)(function (_a) {
-    var core = _a.theme.core, rows = _a.rows;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "], ["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "])), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[3]), core.space[8] * rows);
-});
-var TextareaInput = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["rows"]);
-    return ((0, jsx_runtime_1.jsx)(StyledInput, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
-});
-exports.TextareaInput = TextareaInput;
-var templateObject_1;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { Input } from '../Input/Input';
+const StyledInput = styled(Input)(({ theme: { core }, rows }) => css `
+    padding: ${numToPx(core.space[2])};
+    padding-top: ${numToPx(core.space[3])};
+    height: ${core.space[8] * rows}px;
+  `);
+const TextareaInput = ({ rows = 3, ref, ...rest }) => {
+    return (_jsx(StyledInput, { ...rest, keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref }));
+};
+export { TextareaInput };

package/dist/components/TextareaInput/index.js

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

package/dist/components/Toast/Toast.d.ts

@@ -1,13 +1,13 @@
 export declare const ToastsContainer: ({ top }: {
-    top?: number | undefined;
+    top?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 type ToastVariant = 'default' | 'error';
 export declare const showToast: ({ message, dismissible, action, actionTitle, variant, duration, }: {
     message: string;
-    dismissible?: boolean | undefined;
+    dismissible?: boolean;
     action?(): void;
-    actionTitle?: string | undefined;
-    variant?: ToastVariant | undefined;
-    duration?: number | undefined;
+    actionTitle?: string;
+    variant?: ToastVariant;
+    duration?: number;
 }) => string;
 export {};

package/dist/components/Toast/Toast.js

@@ -1,169 +1,126 @@
-"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.showToast = exports.ToastsContainer = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_native_toast_1 = require("@backpackapp-io/react-native-toast");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var styled_native_1 = __importStar(require("../../styled.native"));
-var ActionList_1 = require("../ActionList");
-var Icon_1 = require("../Icon");
-var P_1 = require("../P");
-var ToastsContainer = function (_a) {
-    var _b = _a.top, top = _b === void 0 ? -80 : _b;
-    return ((0, jsx_runtime_1.jsx)(react_native_toast_1.Toasts, { extraInsets: { top: top } }));
-};
-exports.ToastsContainer = ToastsContainer;
-var StyledView = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, variant = _a.variant;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    border-radius: ", ";\n    flex-direction: row;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    border-radius: ", ";\n    flex-direction: row;\n  "])), variant === 'default'
-        ? core.color.brand.forest
-        : core.color.red.darkest, (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[3]), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.radius.max));
-});
-var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), semantic.inverted.message.base);
-});
-var StyledThinBorder = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var core = _a.theme.core, variant = _a.variant;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    height: 1px;\n  "], ["\n    background-color: ", ";\n    height: 1px;\n  "])), variant === 'default'
-        ? core.color.brand.energised
-        : core.color.red.light);
-});
-var StyledThickBorder = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var core = _a.theme.core, variant = _a.variant;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    height: 3px;\n  "], ["\n    background-color: ", ";\n    height: 3px;\n  "])), variant === 'default'
-        ? core.color.brand.leaf
-        : core.color.red.base);
-});
-var StyledCloseIcon = (0, styled_native_1.default)(react_native_1.TouchableOpacity)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    padding: ", ";\n    align-items: center;\n    justify-content: center;\n  "], ["\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    padding: ", ";\n    align-items: center;\n    justify-content: center;\n  "])), semantic.inverted.surface, (0, element_core_1.numToPx)(core.radius.max), (0, element_core_1.numToPx)(core.space[7]), (0, element_core_1.numToPx)(core.space[7]), (0, element_core_1.numToPx)(core.space[2]));
-});
-var showToast = function (_a) {
-    var message = _a.message, _b = _a.dismissible, dismissible = _b === void 0 ? false : _b, action = _a.action, actionTitle = _a.actionTitle, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.duration, duration = _d === void 0 ? 5000 : _d;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast, ToastPosition, Toasts, } from '@backpackapp-io/react-native-toast';
+import { numToPx } from '@ovotech/element-core';
+import { useEffect, useRef, useState } from 'react';
+import { Dimensions, TouchableOpacity, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+import { Action } from '../ActionList';
+import { Icon } from '../Icon';
+import { P } from '../P';
+export const ToastsContainer = ({ top = -80 }) => (_jsx(Toasts, { extraInsets: { top } }));
+const StyledView = styled.View(({ theme: { core }, variant }) => css `
+    background-color: ${variant === 'default'
+    ? core.color.brand.forest
+    : core.color.red.darkest};
+    overflow: hidden;
+    padding-top: ${numToPx(core.space[2])};
+    padding-bottom: ${numToPx(core.space[3])};
+    padding-right: ${numToPx(core.space[2])};
+    padding-left: ${numToPx(core.space[4])};
+    border-radius: ${numToPx(core.radius.max)};
+    flex-direction: row;
+  `);
+const StyledP = styled(P)(({ theme: { semantic } }) => css `
+    color: ${semantic.inverted.message.base};
+  `);
+const StyledThinBorder = styled(Animated.View)(({ theme: { core }, variant }) => css `
+    background-color: ${variant === 'default'
+    ? core.color.brand.energised
+    : core.color.red.light};
+    height: 1px;
+  `);
+const StyledThickBorder = styled(Animated.View)(({ theme: { core }, variant }) => css `
+    background-color: ${variant === 'default'
+    ? core.color.brand.leaf
+    : core.color.red.base};
+    height: 3px;
+  `);
+const StyledCloseIcon = styled(TouchableOpacity)(({ theme: { core, semantic } }) => css `
+    background-color: ${semantic.inverted.surface};
+    border-radius: ${numToPx(core.radius.max)};
+    width: ${numToPx(core.space[7])};
+    height: ${numToPx(core.space[7])};
+    padding: ${numToPx(core.space[2])};
+    align-items: center;
+    justify-content: center;
+  `);
+export const showToast = ({ message, dismissible = false, action, actionTitle, variant = 'default', duration = 5000, }) => {
     return action || dismissible
-        ? react_native_toast_1.toast.loading(message, {
+        ? toast.loading(message, {
             id: 'clipboard',
-            position: react_native_toast_1.ToastPosition.BOTTOM,
+            position: ToastPosition.BOTTOM,
             disableShadow: true,
-            customToast: function (t) { return ((0, jsx_runtime_1.jsx)(CustomToast, __assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }), message)); },
+            customToast: t => (_jsx(CustomToast, { ...t, dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }, message)),
         })
-        : (0, react_native_toast_1.toast)(message, {
+        : toast(message, {
             id: 'clipboard',
-            position: react_native_toast_1.ToastPosition.BOTTOM,
-            duration: duration,
+            position: ToastPosition.BOTTOM,
+            duration,
             disableShadow: true,
-            customToast: function (t) { return ((0, jsx_runtime_1.jsx)(CustomToastWithTimeIndicator, __assign({}, t, { variant: variant }), message)); },
+            customToast: t => (_jsx(CustomToastWithTimeIndicator, { ...t, variant: variant }, message)),
         });
 };
-exports.showToast = showToast;
-var CustomToastWithTimeIndicator = function (_a) {
-    var message = _a.message, _b = _a.duration, duration = _b === void 0 ? 5000 : _b, variant = _a.variant;
-    var toastPadding = 20;
-    var textRef = (0, react_1.useRef)(null);
-    var _c = (0, react_1.useState)(0), textHeight = _c[0], setTextHeight = _c[1];
-    var windowWidth = react_native_1.Dimensions.get('window').width;
-    var screenPadding = 32;
-    var toastWidth = windowWidth - screenPadding;
-    var sharedWidth = (0, react_native_reanimated_1.useSharedValue)(toastWidth);
-    var style = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) => {
+    const toastPadding = 20;
+    const textRef = useRef(null);
+    const [textHeight, setTextHeight] = useState(0);
+    const windowWidth = Dimensions.get('window').width;
+    const screenPadding = 32;
+    const toastWidth = windowWidth - screenPadding;
+    const sharedWidth = useSharedValue(toastWidth);
+    const style = useAnimatedStyle(() => {
         return {
-            width: (0, react_native_reanimated_1.withTiming)(sharedWidth.value, {
+            width: withTiming(sharedWidth.value, {
                 duration: duration,
-                easing: react_native_reanimated_1.Easing.linear,
+                easing: Easing.linear,
             }),
         };
     });
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         sharedWidth.value = 0;
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(StyledView, { variant: variant, style: {
+    return (_jsxs(StyledView, { variant: variant, style: {
             width: toastWidth,
             height: textHeight + toastPadding,
             flexWrap: 'wrap',
-        }, children: [(0, jsx_runtime_1.jsx)(StyledP, { ref: textRef, onLayout: function () {
-                    var _a;
-                    (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+        }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
+                    textRef.current?.measureInWindow((_x, _y, _width, height) => {
                         setTextHeight(height);
                     });
-                }, children: message }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { position: 'absolute', bottom: 0 }, children: [(0, jsx_runtime_1.jsx)(StyledThinBorder, { variant: variant, style: style }), (0, jsx_runtime_1.jsx)(StyledThickBorder, { variant: variant, style: style })] })] }));
+                }, children: message }), _jsxs(View, { style: { position: 'absolute', bottom: 0 }, children: [_jsx(StyledThinBorder, { variant: variant, style: style }), _jsx(StyledThickBorder, { variant: variant, style: style })] })] }));
 };
-var CustomToast = function (_a) {
-    var id = _a.id, message = _a.message, dismissible = _a.dismissible, action = _a.action, actionTitle = _a.actionTitle, width = _a.width, variant = _a.variant;
-    var toastPadding = 20;
-    var textRef = (0, react_1.useRef)(null);
-    var actionRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(0), textHeight = _b[0], setTextHeight = _b[1];
-    var _c = (0, react_1.useState)(0), actionHeight = _c[0], setActionHeight = _c[1];
-    var toastHeight = Math.floor(textHeight) === Math.floor(actionHeight) && !dismissible // handling multiline
+const CustomToast = ({ id, message, dismissible, action, actionTitle, width, variant, }) => {
+    const toastPadding = 20;
+    const textRef = useRef(null);
+    const actionRef = useRef(null);
+    const [textHeight, setTextHeight] = useState(0);
+    const [actionHeight, setActionHeight] = useState(0);
+    const toastHeight = Math.floor(textHeight) === Math.floor(actionHeight) && !dismissible // handling multiline
         ? textHeight
         : textHeight + actionHeight;
-    var handleAction = function () {
+    const handleAction = () => {
         if (action && actionTitle) {
             action();
-            react_native_toast_1.toast.dismiss(id);
+            toast.dismiss(id);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(StyledView, { variant: variant, style: {
-            width: width,
+    return (_jsxs(StyledView, { variant: variant, style: {
+            width,
             height: toastHeight + toastPadding,
             alignItems: action ? 'flex-start' : 'center',
-        }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+        }, children: [_jsxs(View, { style: {
                     flexDirection: 'row',
                     flexWrap: 'wrap',
                     justifyContent: 'space-between',
                     flex: 1,
-                }, children: [(0, jsx_runtime_1.jsx)(StyledP, { ref: textRef, onLayout: function () {
-                            var _a;
-                            (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+                }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
+                            textRef.current?.measureInWindow((_x, _y, _width, height) => {
                                 setTextHeight(height);
                             });
-                        }, children: message }), action && actionTitle ? ((0, jsx_runtime_1.jsx)(ActionList_1.Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: function () {
-                            var _a;
-                            (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+                        }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
+                            actionRef.current?.measureInWindow((_x, _y, _width, height) => {
                                 setActionHeight(height);
                             });
-                        }, children: actionTitle })) : null] }), dismissible ? ((0, jsx_runtime_1.jsx)(StyledCloseIcon, { onPress: function () { return react_native_toast_1.toast.dismiss(id); }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "cross", color: "#fff", size: 14 }) })) : null] }));
+                        }, children: actionTitle })) : null] }), dismissible ? (_jsx(StyledCloseIcon, { onPress: () => toast.dismiss(id), children: _jsx(Icon, { name: "cross", color: "#fff", size: 14 }) })) : null] }));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;