@ovotech/element-native 3.6.0 → 3.7.0-canary-7cc2ffb-179

package/dist/components/P/P.d.ts

@@ -1,243 +1,5 @@
 /// <reference types="react" />
-import { Text } from 'react-native';
-export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: {
-        core: {
-            radius: Record<"small" | "medium" | "large" | "max", string>;
-            borderWidth: Record<"small" | "medium" | "large", string>;
-            breakpoint: Record<"small" | "medium" | "large", string | number>;
-            mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-            transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-                lightest: string;
-                lighter: string;
-                light: string;
-                base: string;
-                dark: string;
-                darker: string;
-                darkest: string;
-            }> & {
-                brand: Record<string, string>;
-            };
-            fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-                native: string;
-                web: string;
-            }>;
-            fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-                small: string | number;
-                large: string | number;
-            }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-                small: string | number;
-                large: string | number;
-            }>;
-            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
-        };
-        semantic: {
-            surface: Record<"base" | "cutout" | "elevated", string>;
-            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
-            border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"surface" | "border", string> & {
-                message: Record<"base" | "link" | "secondary" | "branded", string>;
-            };
-            success: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            warning: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            error: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            info: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
-        };
-        component: {
-            heading1: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading2: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading3: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading4: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            lead: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            body: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            small: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            label: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            cta: {
-                primary: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-                secondary: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-                destructive: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-            };
-            badge: {
-                variants: {
-                    neutral: {
-                        foreground: string;
-                        background: string;
-                    };
-                    red: {
-                        foreground: string;
-                        background: string;
-                    };
-                    orange: {
-                        foreground: string;
-                        background: string;
-                    };
-                    yellow: {
-                        foreground: string;
-                        background: string;
-                    };
-                    green: {
-                        foreground: string;
-                        background: string;
-                    };
-                    blue: {
-                        foreground: string;
-                        background: string;
-                    };
-                };
-            };
-        };
-    } | undefined;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<Text>>;
+import { TextProps } from 'react-native';
+export declare const P: import("react").ForwardRefExoticComponent<TextProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<unknown>>;

package/dist/components/P/P.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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);
@@ -28,11 +39,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.P = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
 var StyledP = styled_native_1.default.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
     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  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
 });
-exports.P = (0, utils_1.styledComponentWithBreakpoints)(StyledP);
+exports.P = (0, react_1.forwardRef)(function (props, ref) {
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return (0, jsx_runtime_1.jsx)(StyledP, __assign({}, props, breakpoints, { ref: ref }));
+});
 var templateObject_1;

package/dist/components/SkeletonText/SkeletonText.js

@@ -42,6 +42,8 @@ var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, "line-".concat(i)));
     }
-    return ((0, jsx_runtime_1.jsx)(P_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
+    return (
+    // @ts-ignore styled components stuff
+    (0, jsx_runtime_1.jsx)(P_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
 };
 exports.SkeletonText = SkeletonText;

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,8 @@
+declare type SpinnerSize = 'large' | 'small';
+declare type SpinnerProps = {
+    inverted?: boolean;
+    size?: SpinnerSize | number;
+    accessibilityLabel?: string;
+};
+export declare const Spinner: ({ inverted, size, accessibilityLabel, }: SpinnerProps) => JSX.Element;
+export {};

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,82 @@
+"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 __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.Spinner = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var styled_native_1 = require("../../styled.native");
+var semanticSizes = {
+    large: 65,
+    small: 32,
+};
+// based on values in the Figma `y` point is 3.5 times smaller side length, `viewBox` is 1.25 times larger side length
+var calculateSvgProps = function (size) {
+    return {
+        viewBox: size * 1.25,
+        y: size / 3.5,
+    };
+};
+var Spinner = function (_a) {
+    var _b = _a.inverted, inverted = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, _d = _a.accessibilityLabel, accessibilityLabel = _d === void 0 ? 'Loading' : _d;
+    var core = (0, react_1.useContext)(styled_native_1.ThemeContext).core;
+    var rotation = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            transform: [
+                // needed for correct 3d animation
+                { perspective: 1000 },
+                {
+                    rotateY: "".concat(rotation.value, "deg"),
+                },
+            ],
+        };
+    }, [rotation.value]);
+    (0, react_1.useEffect)(function () {
+        // rotate svg from right to left on 360deg during 2 seconds and repeat that 200 times
+        rotation.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(-360, {
+            duration: 2000,
+            easing: react_native_reanimated_1.Easing.linear,
+        }), 200);
+        // cancel animation if component is unmounted
+        return function () { return (0, react_native_reanimated_1.cancelAnimation)(rotation); };
+    }, []);
+    var rectangleSize = size in semanticSizes ? semanticSizes[size] : size;
+    var _e = calculateSvgProps(rectangleSize), viewBox = _e.viewBox, y = _e.y;
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: [{ width: viewBox }, animatedStyles], accessible: true, accessibilityLabel: accessibilityLabel }, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.default, __assign({ width: "".concat(viewBox), height: "".concat(viewBox), viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox) }, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { y: "".concat(y), width: "".concat(rectangleSize), height: "".concat(rectangleSize), transform: "rotate(-15 0 ".concat(y, ")"), fill: core.color.brand[inverted ? 'white' : 'ovo'] }) })) })));
+};
+exports.Spinner = Spinner;

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner } from './Spinner';

package/dist/components/Spinner/index.js

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

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

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

package/dist/components/Toast/Toast.js

@@ -0,0 +1,168 @@
+"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 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, core.space[2], core.space[3], core.space[2], core.space[4], 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, core.radius.max, core.space[7], core.space[7], 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;
+    return action || dismissible
+        ? react_native_toast_1.toast.loading(message, {
+            id: 'clipboard',
+            position: react_native_toast_1.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)); },
+        })
+        : (0, react_native_toast_1.toast)(message, {
+            id: 'clipboard',
+            position: react_native_toast_1.ToastPosition.BOTTOM,
+            duration: duration,
+            disableShadow: true,
+            customToast: function (t) { return ((0, jsx_runtime_1.jsx)(CustomToastWithTimeIndicator, __assign({}, 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 () {
+        return {
+            width: (0, react_native_reanimated_1.withTiming)(sharedWidth.value, {
+                duration: duration,
+                easing: react_native_reanimated_1.Easing.linear,
+            }),
+        };
+    });
+    (0, react_1.useEffect)(function () {
+        sharedWidth.value = 0;
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(StyledView, __assign({ variant: variant, style: {
+            width: toastWidth,
+            height: textHeight + toastPadding,
+            flexWrap: 'wrap',
+        } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, __assign({ ref: textRef, onLayout: function () {
+                    var _a;
+                    (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+                        setTextHeight(height);
+                    });
+                } }, { children: message })), (0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ 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 })] }))] })));
+};
+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
+        ? textHeight
+        : textHeight + actionHeight;
+    var handleAction = function () {
+        if (action && actionTitle) {
+            action();
+            react_native_toast_1.toast.dismiss(id);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledView, __assign({ variant: variant, style: {
+            width: width,
+            height: toastHeight + toastPadding,
+            alignItems: action ? 'flex-start' : 'center',
+        } }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: {
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    justifyContent: 'space-between',
+                    flex: 1,
+                } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, __assign({ ref: textRef, onLayout: function () {
+                            var _a;
+                            (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+                                setTextHeight(height);
+                            });
+                        } }, { children: message })), action && actionTitle ? ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ 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) {
+                                setActionHeight(height);
+                            });
+                        } }, { children: actionTitle }))) : null] })), dismissible ? ((0, jsx_runtime_1.jsx)(StyledCloseIcon, __assign({ 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] })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1 @@
+export { showToast, ToastsContainer } from './Toast';

package/dist/components/Toast/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastsContainer = exports.showToast = void 0;
+var Toast_1 = require("./Toast");
+Object.defineProperty(exports, "showToast", { enumerable: true, get: function () { return Toast_1.showToast; } });
+Object.defineProperty(exports, "ToastsContainer", { enumerable: true, get: function () { return Toast_1.ToastsContainer; } });

package/dist/components/index.d.ts

@@ -46,6 +46,7 @@ export * from './SkeletonCTA';
 export * from './SkeletonHeading';
 export * from './SkeletonText';
 export * from './Small';
+export * from './Spinner';
 export * from './Stack';
 export * from './Strong';
 export * from './Tabs';
@@ -56,3 +57,4 @@ export * from './TextGroup';
 export * from './TextInput';
 export * from './TextLink';
 export * from './Toggle';
+export * from './Toast';

package/dist/components/index.js

@@ -62,6 +62,7 @@ __exportStar(require("./SkeletonCTA"), exports);
 __exportStar(require("./SkeletonHeading"), exports);
 __exportStar(require("./SkeletonText"), exports);
 __exportStar(require("./Small"), exports);
+__exportStar(require("./Spinner"), exports);
 __exportStar(require("./Stack"), exports);
 __exportStar(require("./Strong"), exports);
 __exportStar(require("./Tabs"), exports);
@@ -72,3 +73,4 @@ __exportStar(require("./TextGroup"), exports);
 __exportStar(require("./TextInput"), exports);
 __exportStar(require("./TextLink"), exports);
 __exportStar(require("./Toggle"), exports);
+__exportStar(require("./Toast"), exports);