@ovotech/element-native 3.8.1 → 4.0.0-canary-a872093-246

package/dist/components/Toast/Toast.js

@@ -1,740 +1,169 @@
-import { jsx as T, jsxs as N } from "react/jsx-runtime";
-import b, { useState as v, useEffect as E, useMemo as q, useCallback as it, useRef as Z } from "react";
-import { Keyboard as B, Pressable as Et, useWindowDimensions as Ot, useColorScheme as Pt, Platform as At, View as H, Text as st, TouchableOpacity as Dt, Dimensions as _t } from "react-native";
-import ot, { useSharedValue as K, withTiming as U, withSpring as rt, runOnJS as nt, useAnimatedStyle as mt, Easing as kt } from "react-native-reanimated";
-import { useSafeAreaInsets as pt } from "react-native-safe-area-context";
-import { Gesture as X, Directions as dt, GestureDetector as xt } from "react-native-gesture-handler";
-import { n as w } from "../../utils-HsZygzDh.js";
-import { s as $, c as L } from "../../styled.native-KEscfVp7.js";
-import { Action as It } from "../ActionList/ActionList.js";
-import { Icon as Ht } from "../Icon/Icon.js";
-import { P as Rt } from "../P/P.js";
-import "../../hooks/use-breakpoint.js";
-import "../ActionList/styled.js";
-import "../../utils/utils.js";
-import "../../providers/IconsProvider.js";
-import "../../providers/icons/Address.js";
-import "react-native-svg";
-import "../../providers/icons/Advice.js";
-import "../../providers/icons/Archive.js";
-import "../../providers/icons/ArrowDown.js";
-import "../../providers/icons/ArrowLeft.js";
-import "../../providers/icons/ArrowRight.js";
-import "../../providers/icons/ArrowUp.js";
-import "../../providers/icons/Award.js";
-import "../../providers/icons/Battery.js";
-import "../../providers/icons/Cal.js";
-import "../../providers/icons/CalBook.js";
-import "../../providers/icons/CaretDown.js";
-import "../../providers/icons/CaretLeft.js";
-import "../../providers/icons/CaretRight.js";
-import "../../providers/icons/CaretUp.js";
-import "../../providers/icons/Chart.js";
-import "../../providers/icons/ChartFilled.js";
-import "../../providers/icons/Check.js";
-import "../../providers/icons/CheckCircle.js";
-import "../../providers/icons/ChevronDown.js";
-import "../../providers/icons/ChevronLeft.js";
-import "../../providers/icons/ChevronLeftSmall.js";
-import "../../providers/icons/ChevronLeftSmallFirst.js";
-import "../../providers/icons/ChevronRight.js";
-import "../../providers/icons/ChevronRightSmall.js";
-import "../../providers/icons/ChevronRightSmallLast.js";
-import "../../providers/icons/ChevronUp.js";
-import "../../providers/icons/Circle.js";
-import "../../providers/icons/CloseCircle.js";
-import "../../providers/icons/Cross.js";
-import "../../providers/icons/Doc.js";
-import "../../providers/icons/Dollar.js";
-import "../../providers/icons/Download.js";
-import "../../providers/icons/Eco.js";
-import "../../providers/icons/EcoHome.js";
-import "../../providers/icons/Edit.js";
-import "../../providers/icons/ElectricCar.js";
-import "../../providers/icons/ElectricHome.js";
-import "../../providers/icons/Electricity.js";
-import "../../providers/icons/EnergyAdvice.js";
-import "../../providers/icons/Equals.js";
-import "../../providers/icons/Euro.js";
-import "../../providers/icons/Gas.js";
-import "../../providers/icons/GlobeAddress.js";
-import "../../providers/icons/Help.js";
-import "../../providers/icons/Hide.js";
-import "../../providers/icons/Home.js";
-import "../../providers/icons/HomeFilled.js";
-import "../../providers/icons/HydroPower.js";
-import "../../providers/icons/Info.js";
-import "../../providers/icons/Link.js";
-import "../../providers/icons/Logo.js";
-import "../../providers/icons/Mail.js";
-import "../../providers/icons/MailOpen.js";
-import "../../providers/icons/Menu.js";
-import "../../providers/icons/Message.js";
-import "../../providers/icons/MessageFilled.js";
-import "../../providers/icons/Minus.js";
-import "../../providers/icons/Mobile.js";
-import "../../providers/icons/NewWindow.js";
-import "../../providers/icons/PaymentCard.js";
-import "../../providers/icons/Phone.js";
-import "../../providers/icons/Plus.js";
-import "../../providers/icons/Pound.js";
-import "../../providers/icons/Pricing.js";
-import "../../providers/icons/Search.js";
-import "../../providers/icons/Security.js";
-import "../../providers/icons/Show.js";
-import "../../providers/icons/SmartHome.js";
-import "../../providers/icons/SmartMeter.js";
-import "../../providers/icons/Solar.js";
-import "../../providers/icons/Star.js";
-import "../../providers/icons/Sun.js";
-import "../../providers/icons/Torch.js";
-import "../../providers/icons/Trees.js";
-import "../../providers/icons/Tune.js";
-import "../../providers/icons/User.js";
-import "../../providers/icons/UserFilled.js";
-import "../../providers/icons/Wallet.js";
-import "../../providers/icons/WalletFilled.js";
-import "../../providers/icons/WarmHome.js";
-import "../../providers/icons/Warning.js";
-import "../../providers/icons/WebAddress.js";
-import "../../providers/icons/WindPower.js";
-const Mt = 20;
-let l;
-(function(t) {
-  t[t.ADD_TOAST = 0] = "ADD_TOAST", t[t.UPDATE_TOAST = 1] = "UPDATE_TOAST", t[t.UPSERT_TOAST = 2] = "UPSERT_TOAST", t[t.DISMISS_TOAST = 3] = "DISMISS_TOAST", t[t.REMOVE_TOAST = 4] = "REMOVE_TOAST", t[t.START_PAUSE = 5] = "START_PAUSE", t[t.END_PAUSE = 6] = "END_PAUSE";
-})(l || (l = {}));
-const F = /* @__PURE__ */ new Map(), at = (t) => {
-  if (F.has(t))
-    return;
-  const o = setTimeout(() => {
-    F.delete(t), x({
-      type: l.REMOVE_TOAST,
-      toastId: t
-    });
-  }, 1e3);
-  F.set(t, o);
-}, Ct = (t) => {
-  const o = F.get(t);
-  o && clearTimeout(o);
-}, tt = (t, o) => {
-  switch (o.type) {
-    case l.ADD_TOAST:
-      return {
-        ...t,
-        toasts: [o.toast, ...t.toasts].slice(0, Mt)
-      };
-    case l.UPDATE_TOAST:
-      return o.toast.id && Ct(o.toast.id), {
-        ...t,
-        toasts: t.toasts.map((e) => e.id === o.toast.id ? {
-          ...e,
-          ...o.toast
-        } : e)
-      };
-    case l.UPSERT_TOAST:
-      const {
-        toast: i
-      } = o;
-      return t.toasts.find((e) => e.id === i.id) ? tt(t, {
-        type: l.UPDATE_TOAST,
-        toast: i
-      }) : tt(t, {
-        type: l.ADD_TOAST,
-        toast: i
-      });
-    case l.DISMISS_TOAST:
-      const {
-        toastId: r
-      } = o;
-      return r ? at(r) : t.toasts.forEach((e) => {
-        at(e.id);
-      }), {
-        ...t,
-        toasts: t.toasts.map((e) => e.id === r || r === void 0 ? {
-          ...e,
-          visible: !1
-        } : e)
-      };
-    case l.REMOVE_TOAST:
-      return o.toastId === void 0 ? {
-        ...t,
-        toasts: []
-      } : {
-        ...t,
-        toasts: t.toasts.filter((e) => e.id !== o.toastId)
-      };
-    case l.START_PAUSE:
-      return {
-        ...t,
-        pausedAt: o.time
-      };
-    case l.END_PAUSE:
-      const s = o.time - (t.pausedAt || 0);
-      return {
-        ...t,
-        pausedAt: void 0,
-        toasts: t.toasts.map((e) => ({
-          ...e,
-          pauseDuration: e.pauseDuration + s
-        }))
-      };
-  }
-}, j = [];
-let G = {
-  toasts: [],
-  pausedAt: void 0
+"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;
 };
-const x = (t) => {
-  G = tt(G, t), j.forEach((o) => {
-    o(G);
-  });
-}, Ut = {
-  blank: 4e3,
-  error: 4e3,
-  success: 2e3,
-  loading: 1 / 0
-}, $t = function() {
-  let t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-  const [o, i] = v(G);
-  E(() => (j.push(i), () => {
-    const s = j.indexOf(i);
-    s > -1 && j.splice(s, 1);
-  }), [o]);
-  const r = o.toasts.filter((s) => (t == null ? void 0 : t.providerKey) === void 0 || s.providerKey === (t == null ? void 0 : t.providerKey) || s.providerKey === "PERSISTS").map((s) => {
-    var e;
-    return {
-      ...t,
-      ...t[s.type],
-      ...s,
-      duration: s.duration || ((e = t[s.type]) === null || e === void 0 ? void 0 : e.duration) || (t == null ? void 0 : t.duration) || Ut[s.type],
-      styles: {
-        ...(s == null ? void 0 : s.styles) ?? {}
-      }
+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 {
-    ...o,
-    toasts: r
-  };
-};
-let A;
-(function(t) {
-  t[t.TOP = 1] = "TOP", t[t.BOTTOM = 2] = "BOTTOM";
-})(A || (A = {}));
-const Lt = (t) => typeof t == "function", et = (t, o) => Lt(t) ? t(o) : t, Vt = /* @__PURE__ */ (() => {
-  let t = 0;
-  return () => (++t).toString();
-})(), Wt = function(t) {
-  let o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "blank", i = arguments.length > 2 ? arguments[2] : void 0;
-  return {
-    createdAt: Date.now(),
-    visible: !0,
-    type: o,
-    message: t,
-    pauseDuration: 0,
-    position: A.TOP,
-    providerKey: "DEFAULT",
-    ...i,
-    id: (i == null ? void 0 : i.id) || Vt()
-  };
-}, Y = (t) => (o, i) => {
-  const r = Wt(o, t, i);
-  return x({
-    type: l.UPSERT_TOAST,
-    toast: r
-  }), r.id;
-}, c = (t, o) => Y("blank")(t, o);
-c.error = Y("error");
-c.success = Y("success");
-c.loading = Y("loading");
-c.dismiss = (t) => {
-  x({
-    type: l.DISMISS_TOAST,
-    toastId: t
-  });
+    return __assign.apply(this, arguments);
 };
-c.remove = (t) => x({
-  type: l.REMOVE_TOAST,
-  toastId: t
+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;
 });
-c.promise = (t, o, i) => {
-  const r = c.loading(o.loading, {
-    ...i,
-    ...i == null ? void 0 : i.loading
-  });
-  return t.then((s) => (c.success(et(o.success, s), {
-    id: r,
-    ...i,
-    ...i == null ? void 0 : i.success
-  }), s)).catch((s) => {
-    c.error(et(o.error, s), {
-      id: r,
-      ...i,
-      ...i == null ? void 0 : i.error
-    });
-  }), t;
+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;
 };
-const Bt = (t) => {
-  const {
-    toasts: o,
-    pausedAt: i
-  } = $t(t);
-  E(() => {
-    if (i)
-      return;
-    const s = Date.now(), e = o.map((n) => {
-      if (n.duration === 1 / 0)
-        return;
-      const u = (n.duration || 0) + n.pauseDuration - (s - n.createdAt);
-      if (u < 0) {
-        n.visible && c.dismiss(n.id);
-        return;
-      }
-      return setTimeout(() => c.dismiss(n.id), u);
-    });
-    return () => {
-      e.forEach((n) => n && clearTimeout(n));
-    };
-  }, [o, i]);
-  const r = q(() => ({
-    startPause: () => {
-      x({
-        type: l.START_PAUSE,
-        time: Date.now()
-      });
-    },
-    endPause: () => {
-      i && x({
-        type: l.END_PAUSE,
-        time: Date.now()
-      });
-    },
-    updateHeight: (s, e) => x({
-      type: l.UPDATE_TOAST,
-      toast: {
-        id: s,
-        height: e
-      }
-    }),
-    calculateOffset: (s, e) => {
-      const {
-        reverseOrder: n = !1,
-        gutter: u = 8,
-        defaultPosition: a
-      } = e || {}, p = o.filter((d) => (d.position || a) === (s.position || a) && d.height), h = p.findIndex((d) => d.id === s.id), m = p.filter((d, f) => f < h && d.visible).length;
-      return p.filter((d) => d.visible).slice(...n ? [m + 1] : [0, m]).reduce((d, f) => d + (f.height || 0) + u, 0);
-    }
-  }), [o, i]);
-  return {
-    toasts: o,
-    handlers: r
-  };
-}, lt = Object.freeze({
-  screenX: 0,
-  screenY: 0,
-  width: 0,
-  height: 0
-}), ut = {
-  start: lt,
-  end: lt
+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 } }));
 };
-function Kt() {
-  const [t, o] = v(!1), [i, r] = v(ut), [s, e] = v(0), n = (a) => {
-    o(!0), r({
-      start: a.startCoordinates,
-      end: a.endCoordinates
-    }), e(a.endCoordinates.height);
-  }, u = (a) => {
-    o(!1), a ? r({
-      start: a.startCoordinates,
-      end: a.endCoordinates
-    }) : (r(ut), e(0));
-  };
-  return E(() => {
-    const a = [B.addListener("keyboardWillShow", n), B.addListener("keyboardDidShow", n), B.addListener("keyboardWillHide", u), B.addListener("keyboardDidHide", u)];
-    return () => {
-      a.forEach((p) => p.remove());
-    };
-  }, []), {
-    keyboardShown: t,
-    coordinates: i,
-    keyboardHeight: s
-  };
-}
-const Ft = (t, o, i, r, s) => ({
-  shadowColor: t ?? "#000",
-  shadowOffset: {
-    width: 0,
-    height: (s ? -1 : 1) * (i ? 8 : 3)
-  },
-  shadowOpacity: o ?? 0.18,
-  shadowRadius: i ? 6 : 4.65,
-  elevation: r ? void 0 : 7
-}), P = {
-  primary: "#1B71FC",
-  backgroundLight: "#212331",
-  backgroundDark: "#f7f7f7",
-  success: "#0BAA83",
-  error: "#fe352a",
-  info: "#74B9FF",
-  textLight: "#52616B",
-  textDark: "#f2f2f2",
-  label: "#9daec9"
-}, jt = (t, o, i) => {
-  const [r, s] = v(!1);
-  E(() => {
-    !r && i && (s(!0), t()), r && !i && (s(!1), o());
-  }, [i, r, t, o]);
-}, Gt = ot.createAnimatedComponent(Et), ct = 50, Nt = (t) => {
-  var o, i, r, s;
-  let {
-    toast: e,
-    updateHeight: n,
-    offset: u,
-    startPause: a,
-    endPause: p,
-    overrideDarkMode: h,
-    onToastHide: m,
-    onToastPress: d,
-    onToastShow: f
-  } = t;
-  const D = pt(), {
-    width: O,
-    height: g
-  } = Ot(), {
-    keyboardShown: R,
-    keyboardHeight: M
-  } = Kt();
-  jt(() => {
-    f == null || f(e);
-  }, () => {
-    m == null || m(e);
-  }, e.visible);
-  const z = Pt() === "dark", _ = h !== void 0 ? h : z, [I, gt] = v(e != null && e.height ? e.height : ct), [Q, Tt] = v(e != null && e.width ? e.width : O - 32 > 360 ? 360 : O - 32), y = q(() => e.position === A.TOP ? -50 : g - D.bottom - At.select({
-    ios: 0,
-    default: 32
-  }), [g, e.position, D.bottom]), J = K(0), C = K(y), k = K(y), vt = () => d == null ? void 0 : d(e), yt = it((S) => {
-    c.dismiss(S);
-  }, [c.dismiss]), V = it(() => {
-    if (e.position === A.TOP)
-      k.value = U(e.visible ? u : y), C.value = U(e.visible ? u : y);
-    else {
-      let S = R ? M : 0;
-      const W = e.visible ? y - I - u - S - D.bottom - 24 : y;
-      k.value = rt(W, {
-        stiffness: 80
-      }), C.value = rt(W, {
-        stiffness: 80
-      });
-    }
-  }, [u, e.visible, R, M, I, D.bottom, C, y, e.position, k]), St = q(() => {
-    const S = X.Pan().onUpdate((wt) => {
-      k.value = wt.translationY / 4 + C.value;
-    }).onEnd(() => {
-      nt(V)();
-    }), W = X.Fling().direction(e.position === A.TOP ? dt.UP : dt.DOWN).onEnd(() => {
-      k.value = U(y, {
-        duration: 40
-      }), nt(yt)(e.id);
-    });
-    return X.Simultaneous(W, S);
-  }, [k, y, C, V, e.position, e.id]);
-  E(() => {
-    gt(e != null && e.height ? e.height : ct);
-  }, [e.height]), E(() => {
-    Tt(e != null && e.width ? e.width : O - 32);
-  }, [e.width, O]), E(() => {
-    J.value = U(e.visible ? 1 : 0, {
-      duration: 300
+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;
+    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,
+            }),
+        };
     });
-  }, [e.visible, J]), E(() => {
-    V();
-  }, [u, e.visible, R, M, I, V]);
-  const bt = mt(() => ({
-    opacity: J.value,
-    transform: [{
-      translateY: k.value
-    }]
-  }));
-  return /* @__PURE__ */ b.createElement(xt, {
-    key: e.id,
-    gesture: St
-  }, /* @__PURE__ */ b.createElement(Gt, {
-    onPressIn: a,
-    onPressOut: () => {
-      p();
-    },
-    onPress: vt,
-    style: [{
-      backgroundColor: e.customToast ? void 0 : _ ? P.backgroundDark : P.backgroundLight,
-      borderRadius: 8,
-      position: "absolute",
-      maxHeight: I,
-      left: (O - Q) / 2,
-      zIndex: e.visible ? 9999 : void 0,
-      alignItems: "center",
-      justifyContent: "center"
-    }, bt, !e.disableShadow && Ft("#181821", 0.15, !1), (o = e.styles) === null || o === void 0 ? void 0 : o.pressable]
-  }, e.customToast ? /* @__PURE__ */ b.createElement(H, {
-    onLayout: (S) => n(e.id, S.nativeEvent.layout.height),
-    key: e.id
-  }, e.customToast({
-    ...e,
-    height: I,
-    width: Q
-  })) : /* @__PURE__ */ b.createElement(H, {
-    onLayout: (S) => n(e.id, S.nativeEvent.layout.height),
-    style: [{
-      height: I,
-      width: Q,
-      flexDirection: "row",
-      alignItems: "center",
-      paddingVertical: 12,
-      paddingHorizontal: 16
-    }, (i = e.styles) === null || i === void 0 ? void 0 : i.view],
-    key: e.id
-  }, (e.type === "error" || e.type === "success") && /* @__PURE__ */ b.createElement(H, {
-    style: [{
-      backgroundColor: e.type === "error" ? P.error : e.type === "success" ? P.success : _ ? P.backgroundDark : P.backgroundLight,
-      width: 3,
-      height: "100%",
-      borderRadius: 12,
-      marginRight: 12
-    }, e == null || (r = e.styles) === null || r === void 0 ? void 0 : r.indicator]
-  }), typeof e.icon == "string" ? /* @__PURE__ */ b.createElement(st, null, e.icon) : e.icon, /* @__PURE__ */ b.createElement(st, {
-    numberOfLines: 1,
-    style: [{
-      color: _ ? P.textLight : P.textDark,
-      padding: 4,
-      flex: 1
-    }, e == null || (s = e.styles) === null || s === void 0 ? void 0 : s.text]
-  }, et(e.message, e)))));
-}, Yt = (t) => {
-  let {
-    overrideDarkMode: o,
-    extraInsets: i,
-    onToastHide: r,
-    onToastPress: s,
-    onToastShow: e,
-    providerKey: n = "DEFAULT"
-  } = t;
-  const {
-    toasts: u,
-    handlers: a
-  } = Bt({
-    providerKey: n
-  }), {
-    startPause: p,
-    endPause: h
-  } = a, m = pt();
-  return /* @__PURE__ */ b.createElement(H, {
-    style: {
-      position: "absolute",
-      top: m.top + ((i == null ? void 0 : i.top) ?? 0) + 16,
-      left: m.left + ((i == null ? void 0 : i.left) ?? 0),
-      right: m.right + ((i == null ? void 0 : i.right) ?? 0),
-      bottom: m.bottom + ((i == null ? void 0 : i.bottom) ?? 0) + 16
-    },
-    pointerEvents: "box-none"
-  }, u.map((d) => /* @__PURE__ */ b.createElement(Nt, {
-    key: d.id,
-    toast: d,
-    startPause: p,
-    endPause: h,
-    updateHeight: a.updateHeight,
-    offset: a.calculateOffset(d, {
-      reverseOrder: !0
-    }),
-    overrideDarkMode: o,
-    onToastHide: r,
-    onToastPress: s,
-    onToastShow: e
-  })));
-}, No = ({ top: t = -80 }) => /* @__PURE__ */ T(Yt, { extraInsets: { top: t } }), ht = $.View(
-  ({ theme: { core: t }, variant: o }) => L`
-    background-color: ${o === "default" ? t.color.brand.forest : t.color.red.darkest};
-    overflow: hidden;
-    padding-top: ${w(t.space[2])};
-    padding-bottom: ${w(t.space[3])};
-    padding-right: ${w(t.space[2])};
-    padding-left: ${w(t.space[4])};
-    border-radius: ${w(t.radius.max)};
-    flex-direction: row;
-  `
-), ft = $(Rt)(
-  ({ theme: { semantic: t } }) => L`
-    color: ${t.inverted.message.base};
-  `
-), zt = $(ot.View)(
-  ({ theme: { core: t }, variant: o }) => L`
-    background-color: ${o === "default" ? t.color.brand.energised : t.color.red.light};
-    height: 1px;
-  `
-), Qt = $(ot.View)(
-  ({ theme: { core: t }, variant: o }) => L`
-    background-color: ${o === "default" ? t.color.brand.leaf : t.color.red.base};
-    height: 3px;
-  `
-), Jt = $(Dt)(
-  ({ theme: { core: t, semantic: o } }) => L`
-    background-color: ${o.inverted.surface};
-    border-radius: ${w(t.radius.max)};
-    width: ${w(t.space[7])};
-    height: ${w(t.space[7])};
-    padding: ${w(t.space[2])};
-    align-items: center;
-    justify-content: center;
-  `
-), Yo = ({
-  message: t,
-  dismissible: o = !1,
-  action: i,
-  actionTitle: r,
-  variant: s = "default",
-  duration: e = 5e3
-}) => i || o ? c.loading(t, {
-  id: "clipboard",
-  position: A.BOTTOM,
-  disableShadow: !0,
-  customToast: (n) => /* @__PURE__ */ T(
-    qt,
-    {
-      ...n,
-      dismissible: o,
-      action: i,
-      actionTitle: r,
-      variant: s
-    },
-    t
-  )
-}) : c(t, {
-  id: "clipboard",
-  position: A.BOTTOM,
-  duration: e,
-  disableShadow: !0,
-  customToast: (n) => /* @__PURE__ */ T(
-    Xt,
-    {
-      ...n,
-      variant: s
-    },
-    t
-  )
-}), Xt = ({
-  message: t,
-  duration: o = 5e3,
-  variant: i
-}) => {
-  const s = Z(null), [e, n] = v(0), p = _t.get("window").width - 32, h = K(p), m = mt(() => ({
-    width: U(h.value, {
-      duration: o,
-      easing: kt.linear
-    })
-  }));
-  return E(() => {
-    h.value = 0;
-  }, []), /* @__PURE__ */ N(
-    ht,
-    {
-      variant: i,
-      style: {
-        width: p,
-        height: e + 20,
-        flexWrap: "wrap"
-      },
-      children: [
-        /* @__PURE__ */ T(
-          ft,
-          {
-            ref: s,
-            onLayout: () => {
-              var d;
-              (d = s.current) == null || d.measureInWindow((f, D, O, g) => {
-                n(g);
-              });
-            },
-            children: t
-          }
-        ),
-        /* @__PURE__ */ N(H, { style: { position: "absolute", bottom: 0 }, children: [
-          /* @__PURE__ */ T(zt, { variant: i, style: m }),
-          /* @__PURE__ */ T(Qt, { variant: i, style: m })
-        ] })
-      ]
-    }
-  );
-}, qt = ({
-  id: t,
-  message: o,
-  dismissible: i,
-  action: r,
-  actionTitle: s,
-  width: e,
-  variant: n
-}) => {
-  const a = Z(null), p = Z(null), [h, m] = v(0), [d, f] = v(0), D = Math.floor(h) === Math.floor(d) && !i ? h : h + d, O = () => {
-    r && s && (r(), c.dismiss(t));
-  };
-  return /* @__PURE__ */ N(
-    ht,
-    {
-      variant: n,
-      style: {
-        width: e,
-        height: D + 20,
-        alignItems: r ? "flex-start" : "center"
-      },
-      children: [
-        /* @__PURE__ */ N(
-          H,
-          {
-            style: {
-              flexDirection: "row",
-              flexWrap: "wrap",
-              justifyContent: "space-between",
-              flex: 1
-            },
-            children: [
-              /* @__PURE__ */ T(
-                ft,
-                {
-                  ref: a,
-                  onLayout: () => {
-                    var g;
-                    (g = a.current) == null || g.measureInWindow((R, M, z, _) => {
-                      m(_);
-                    });
-                  },
-                  children: o
-                }
-              ),
-              r && s ? /* @__PURE__ */ T(
-                It,
-                {
-                  ref: p,
-                  style: { width: "auto" },
-                  inverted: !0,
-                  inline: !0,
-                  iconRight: "chevron-right-small",
-                  onPress: O,
-                  onLayout: () => {
-                    var g;
-                    (g = p.current) == null || g.measureInWindow((R, M, z, _) => {
-                      f(_);
+    (0, react_1.useEffect)(function () {
+        sharedWidth.value = 0;
+    }, []);
+    return ((0, jsx_runtime_1.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) {
+                        setTextHeight(height);
                     });
-                  },
-                  children: s
-                }
-              ) : null
-            ]
-          }
-        ),
-        i ? /* @__PURE__ */ T(Jt, { onPress: () => c.dismiss(t), children: /* @__PURE__ */ T(Ht, { name: "cross", color: "#fff", size: 14 }) }) : null
-      ]
-    }
-  );
+                }, 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 })] })] }));
 };
-export {
-  No as ToastsContainer,
-  Yo as showToast
+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, { variant: variant, style: {
+            width: width,
+            height: toastHeight + toastPadding,
+            alignItems: action ? 'flex-start' : 'center',
+        }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.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) {
+                                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) {
+                                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] }));
 };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;