Socket
Socket
Sign inDemoInstall

@twilio-paste/toast

Package Overview
Dependencies
166
Maintainers
4
Versions
76
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 9.0.1 to 9.0.2

462

dist/index.debug.es.js

@@ -45,3 +45,3 @@ var __defProp = Object.defineProperty;

import * as React from "react";
import * as PropTypes from "prop-types";
import "prop-types";
import { Box } from "@twilio-paste/box";

@@ -84,3 +84,3 @@ var __defProp2 = Object.defineProperty;

// src/propTypes.ts
import * as PropTypes2 from "prop-types";
import PropTypes from "prop-types";

@@ -97,28 +97,30 @@ // src/constants.ts

var ToastPropTypes = {
children: PropTypes2.node.isRequired,
onDismiss: PropTypes2.func,
variant: PropTypes2.oneOf(["error", "neutral", "success", "warning"]),
i18nDismissLabel: PropTypes2.string,
i18nErrorLabel: PropTypes2.string,
i18nNeutralLabel: PropTypes2.string,
i18nSuccessLabel: PropTypes2.string,
i18nWarningLabel: PropTypes2.string
children: PropTypes.node.isRequired,
onDismiss: PropTypes.func,
variant: PropTypes.oneOf(["error", "neutral", "success", "warning"]),
i18nDismissLabel: PropTypes.string,
i18nErrorLabel: PropTypes.string,
i18nNeutralLabel: PropTypes.string,
i18nSuccessLabel: PropTypes.string,
i18nWarningLabel: PropTypes.string
};
var ToastPortalPropTypes = {
children: PropTypes2.node.isRequired,
__console_patch: PropTypes2.bool
children: PropTypes.node.isRequired,
__console_patch: PropTypes.bool
};
var ToastContainerPropTypes = {
children: PropTypes2.node.isRequired,
__console_patch: PropTypes2.bool
children: PropTypes.node.isRequired,
__console_patch: PropTypes.bool
};
var ToasterPropTypes = {
toasts: PropTypes2.arrayOf(PropTypes2.shape({
id: PropTypes2.string.isRequired,
message: PropTypes2.node.isRequired,
setFocus: PropTypes2.bool,
variant: PropTypes2.oneOf(Object.values(ToastVariantObject)).isRequired
})).isRequired,
pop: PropTypes2.func.isRequired,
__console_patch: PropTypes2.bool
toasts: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
message: PropTypes.node.isRequired,
setFocus: PropTypes.bool,
variant: PropTypes.oneOf(Object.values(ToastVariantObject)).isRequired
})
).isRequired,
pop: PropTypes.func.isRequired,
__console_patch: PropTypes.bool
};

@@ -129,17 +131,21 @@

var _b = _a, { element = "TOAST", variant } = _b, props = __objRest(_b, ["element", "variant"]);
return /* @__PURE__ */ React2.createElement(Box2, __spreadProps(__spreadValues({}, safelySpreadBoxProps(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderErrorWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}), props.children);
return /* @__PURE__ */ React2.createElement(
Box2,
__spreadProps(__spreadValues({}, safelySpreadBoxProps(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderErrorWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}),
props.children
);
});

@@ -154,17 +160,21 @@ ErrorToast.displayName = "ErrorToast";

var _b = _a, { element = "TOAST", variant } = _b, props = __objRest(_b, ["element", "variant"]);
return /* @__PURE__ */ React3.createElement(Box3, __spreadProps(__spreadValues({}, safelySpreadBoxProps2(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderNeutralWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}), props.children);
return /* @__PURE__ */ React3.createElement(
Box3,
__spreadProps(__spreadValues({}, safelySpreadBoxProps2(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderNeutralWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}),
props.children
);
});

@@ -179,17 +189,21 @@ NeutralToast.displayName = "NeutralToast";

var _b = _a, { element = "TOAST", variant } = _b, props = __objRest(_b, ["element", "variant"]);
return /* @__PURE__ */ React4.createElement(Box4, __spreadProps(__spreadValues({}, safelySpreadBoxProps3(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderSuccessWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}), props.children);
return /* @__PURE__ */ React4.createElement(
Box4,
__spreadProps(__spreadValues({}, safelySpreadBoxProps3(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderSuccessWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}),
props.children
);
});

@@ -204,17 +218,21 @@ SuccessToast.displayName = "SuccessToast";

var _b = _a, { element = "TOAST", variant } = _b, props = __objRest(_b, ["element", "variant"]);
return /* @__PURE__ */ React5.createElement(Box5, __spreadProps(__spreadValues({}, safelySpreadBoxProps4(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderWarningWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}), props.children);
return /* @__PURE__ */ React5.createElement(
Box5,
__spreadProps(__spreadValues({}, safelySpreadBoxProps4(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderWarningWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}),
props.children
);
});

@@ -234,100 +252,100 @@ WarningToast.displayName = "WarningToast";

case ToastVariantObject.ERROR:
return /* @__PURE__ */ React6.createElement(ErrorIcon, {
color: "colorTextIconError",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
});
return /* @__PURE__ */ React6.createElement(
ErrorIcon,
{
color: "colorTextIconError",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
}
);
case ToastVariantObject.SUCCESS:
return /* @__PURE__ */ React6.createElement(SuccessIcon, {
color: "colorTextIconSuccess",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
});
return /* @__PURE__ */ React6.createElement(
SuccessIcon,
{
color: "colorTextIconSuccess",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
}
);
case ToastVariantObject.WARNING:
return /* @__PURE__ */ React6.createElement(WarningIcon, {
color: "colorTextIconWarning",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
});
return /* @__PURE__ */ React6.createElement(
WarningIcon,
{
color: "colorTextIconWarning",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
}
);
case ToastVariantObject.NEUTRAL:
default:
return /* @__PURE__ */ React6.createElement(NeutralIcon, {
color: "colorTextIconNeutral",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
});
return /* @__PURE__ */ React6.createElement(
NeutralIcon,
{
color: "colorTextIconNeutral",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
}
);
}
};
var Toast = React6.forwardRef((_a, ref) => {
var _b = _a, {
children,
onDismiss,
variant = "neutral",
element = "TOAST",
setFocus,
i18nDismissLabel = "Dismiss toast",
i18nErrorLabel = "(error)",
i18nNeutralLabel = "(information)",
i18nSuccessLabel = "(success)",
i18nWarningLabel = "(warning)"
} = _b, props = __objRest(_b, [
"children",
"onDismiss",
"variant",
"element",
"setFocus",
"i18nDismissLabel",
"i18nErrorLabel",
"i18nNeutralLabel",
"i18nSuccessLabel",
"i18nWarningLabel"
]);
const ToastComponent = ToastComponentVariants[variant];
const buttonRef = React6.useRef(null);
React6.useEffect(() => {
if (setFocus && buttonRef.current) {
buttonRef.current.focus({ preventScroll: true });
}
}, [setFocus]);
const i18nVariants = {
error: i18nErrorLabel,
neutral: i18nNeutralLabel,
success: i18nSuccessLabel,
warning: i18nWarningLabel
};
return /* @__PURE__ */ React6.createElement(ToastComponent, __spreadValues({
role: "status",
variant,
element,
ref
}, props), /* @__PURE__ */ React6.createElement(MediaObject, {
as: "div"
}, /* @__PURE__ */ React6.createElement(MediaFigure, {
as: "div",
spacing: "space60"
}, renderToastIcon(variant, i18nVariants[variant], element)), /* @__PURE__ */ React6.createElement(MediaBody, {
as: "div"
}, children), onDismiss && typeof onDismiss === "function" && /* @__PURE__ */ React6.createElement(MediaFigure, {
align: "end",
spacing: "space40"
}, /* @__PURE__ */ React6.createElement(Button, {
onClick: onDismiss,
variant: "secondary_icon",
ref: buttonRef,
size: "reset",
element: `${element}_CLOSE_BUTTON`
}, /* @__PURE__ */ React6.createElement(CloseIcon, {
decorative: true,
size: "sizeIcon20",
element: `${element}_CLOSE_ICON`
}), /* @__PURE__ */ React6.createElement(ScreenReaderOnly, null, i18nDismissLabel)))));
});
var Toast = React6.forwardRef(
(_a, ref) => {
var _b = _a, {
children,
onDismiss,
variant = "neutral",
element = "TOAST",
setFocus,
i18nDismissLabel = "Dismiss toast",
i18nErrorLabel = "(error)",
i18nNeutralLabel = "(information)",
i18nSuccessLabel = "(success)",
i18nWarningLabel = "(warning)"
} = _b, props = __objRest(_b, [
"children",
"onDismiss",
"variant",
"element",
"setFocus",
"i18nDismissLabel",
"i18nErrorLabel",
"i18nNeutralLabel",
"i18nSuccessLabel",
"i18nWarningLabel"
]);
const ToastComponent = ToastComponentVariants[variant];
const buttonRef = React6.useRef(null);
React6.useEffect(() => {
if (setFocus && buttonRef.current) {
buttonRef.current.focus({ preventScroll: true });
}
}, [setFocus]);
const i18nVariants = {
error: i18nErrorLabel,
neutral: i18nNeutralLabel,
success: i18nSuccessLabel,
warning: i18nWarningLabel
};
return /* @__PURE__ */ React6.createElement(ToastComponent, __spreadValues({ role: "status", variant, element, ref }, props), /* @__PURE__ */ React6.createElement(MediaObject, { as: "div" }, /* @__PURE__ */ React6.createElement(MediaFigure, { as: "div", spacing: "space60" }, renderToastIcon(variant, i18nVariants[variant], element)), /* @__PURE__ */ React6.createElement(MediaBody, { as: "div" }, children), onDismiss && typeof onDismiss === "function" && /* @__PURE__ */ React6.createElement(MediaFigure, { align: "end", spacing: "space40" }, /* @__PURE__ */ React6.createElement(
Button,
{
onClick: onDismiss,
variant: "secondary_icon",
ref: buttonRef,
size: "reset",
element: `${element}_CLOSE_BUTTON`
},
/* @__PURE__ */ React6.createElement(CloseIcon, { decorative: true, size: "sizeIcon20", element: `${element}_CLOSE_ICON` }),
/* @__PURE__ */ React6.createElement(ScreenReaderOnly, null, i18nDismissLabel)
))));
}
);
Toast.displayName = "Toast";

@@ -347,10 +365,14 @@ Toast.propTypes = ToastPropTypes;

var _b = _a, { children, __console_patch } = _b, props = __objRest(_b, ["children", "__console_patch"]);
return /* @__PURE__ */ React7.createElement(Portal, null, /* @__PURE__ */ React7.createElement(StyledBase, null, /* @__PURE__ */ React7.createElement(Box6, __spreadProps(__spreadValues({}, safelySpreadBoxProps5(props)), {
position: "fixed",
right: "space40",
top: "space90",
zIndex: "zIndex90",
ref,
style: __console_patch ? { zIndex: 1999 } : void 0
}), children)));
return /* @__PURE__ */ React7.createElement(Portal, null, /* @__PURE__ */ React7.createElement(StyledBase, null, /* @__PURE__ */ React7.createElement(
Box6,
__spreadProps(__spreadValues({}, safelySpreadBoxProps5(props)), {
position: "fixed",
right: "space40",
top: "space90",
zIndex: "zIndex90",
ref,
style: __console_patch ? { zIndex: 1999 } : void 0
}),
children
)));
});

@@ -365,7 +387,3 @@ ToastPortal.displayName = "ToastPortal";

var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
return /* @__PURE__ */ React8.createElement(ToastPortal, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(Stack, {
orientation: "vertical",
spacing: "space40",
ref
}, children));
return /* @__PURE__ */ React8.createElement(ToastPortal, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(Stack, { orientation: "vertical", spacing: "space40", ref }, children));
});

@@ -424,27 +442,27 @@ ToastContainer.displayName = "ToastContainer";

return /* @__PURE__ */ React9.createElement(ToastPortal, __spreadValues({}, props), transitions((styles, item, state, index) => {
return /* @__PURE__ */ React9.createElement(AnimatedToast, {
as: "div",
key: state.key,
style: styles
}, /* @__PURE__ */ React9.createElement(Toast, __spreadProps(__spreadValues({
key: item.id
}, item), {
onDismiss: () => {
if (item.onDismiss != null) {
item.onDismiss();
return /* @__PURE__ */ React9.createElement(AnimatedToast, { as: "div", key: state.key, style: styles }, /* @__PURE__ */ React9.createElement(
Toast,
__spreadProps(__spreadValues({
key: item.id
}, item), {
onDismiss: () => {
if (item.onDismiss != null) {
item.onDismiss();
}
pop(item.id);
},
ref: (ref) => {
if (ref != null) {
refMap.set(item, ref);
}
},
setFocus: index === 0,
onFocus: (e) => {
if (e.relatedTarget && !returnTarget.trigger) {
setReturnTarget({ trigger: e.relatedTarget });
}
}
pop(item.id);
},
ref: (ref) => {
if (ref != null) {
refMap.set(item, ref);
}
},
setFocus: index === 0,
onFocus: (e) => {
if (e.relatedTarget && !returnTarget.trigger) {
setReturnTarget({ trigger: e.relatedTarget });
}
}
}), item.message));
}),
item.message
));
}));

@@ -478,13 +496,15 @@ };

}
setToasts((currentToasts) => currentToasts.filter((toast) => {
if (toast.id === id) {
if (toast.timeOutId) {
window.clearTimeout(toast.timeOutId);
setToasts(
(currentToasts) => currentToasts.filter((toast) => {
if (toast.id === id) {
if (toast.timeOutId) {
window.clearTimeout(toast.timeOutId);
}
if (toast.onDismiss) {
toast.onDismiss();
}
}
if (toast.onDismiss) {
toast.onDismiss();
}
}
return toast.id !== id;
}));
return toast.id !== id;
})
);
};

@@ -491,0 +511,0 @@ const push = (newToast) => {

468

dist/index.debug.js

@@ -0,1 +1,2 @@

"use strict";
var __create = Object.create;

@@ -48,3 +49,6 @@ var __defProp = Object.defineProperty;

};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

@@ -75,3 +79,3 @@

var React = __toESM(require("react"));
var PropTypes = __toESM(require("prop-types"));
var import_prop_types = require("prop-types");
var import_box = require("@twilio-paste/box");

@@ -114,3 +118,3 @@ var __defProp2 = Object.defineProperty;

// src/propTypes.ts
var PropTypes2 = __toESM(require("prop-types"));
var import_prop_types2 = __toESM(require("prop-types"));

@@ -127,28 +131,30 @@ // src/constants.ts

var ToastPropTypes = {
children: PropTypes2.node.isRequired,
onDismiss: PropTypes2.func,
variant: PropTypes2.oneOf(["error", "neutral", "success", "warning"]),
i18nDismissLabel: PropTypes2.string,
i18nErrorLabel: PropTypes2.string,
i18nNeutralLabel: PropTypes2.string,
i18nSuccessLabel: PropTypes2.string,
i18nWarningLabel: PropTypes2.string
children: import_prop_types2.default.node.isRequired,
onDismiss: import_prop_types2.default.func,
variant: import_prop_types2.default.oneOf(["error", "neutral", "success", "warning"]),
i18nDismissLabel: import_prop_types2.default.string,
i18nErrorLabel: import_prop_types2.default.string,
i18nNeutralLabel: import_prop_types2.default.string,
i18nSuccessLabel: import_prop_types2.default.string,
i18nWarningLabel: import_prop_types2.default.string
};
var ToastPortalPropTypes = {
children: PropTypes2.node.isRequired,
__console_patch: PropTypes2.bool
children: import_prop_types2.default.node.isRequired,
__console_patch: import_prop_types2.default.bool
};
var ToastContainerPropTypes = {
children: PropTypes2.node.isRequired,
__console_patch: PropTypes2.bool
children: import_prop_types2.default.node.isRequired,
__console_patch: import_prop_types2.default.bool
};
var ToasterPropTypes = {
toasts: PropTypes2.arrayOf(PropTypes2.shape({
id: PropTypes2.string.isRequired,
message: PropTypes2.node.isRequired,
setFocus: PropTypes2.bool,
variant: PropTypes2.oneOf(Object.values(ToastVariantObject)).isRequired
})).isRequired,
pop: PropTypes2.func.isRequired,
__console_patch: PropTypes2.bool
toasts: import_prop_types2.default.arrayOf(
import_prop_types2.default.shape({
id: import_prop_types2.default.string.isRequired,
message: import_prop_types2.default.node.isRequired,
setFocus: import_prop_types2.default.bool,
variant: import_prop_types2.default.oneOf(Object.values(ToastVariantObject)).isRequired
})
).isRequired,
pop: import_prop_types2.default.func.isRequired,
__console_patch: import_prop_types2.default.bool
};

@@ -159,17 +165,21 @@

var _b = _a, { element = "TOAST", variant } = _b, props = __objRest(_b, ["element", "variant"]);
return /* @__PURE__ */ React2.createElement(import_box2.Box, __spreadProps(__spreadValues({}, (0, import_box2.safelySpreadBoxProps)(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderErrorWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}), props.children);
return /* @__PURE__ */ React2.createElement(
import_box2.Box,
__spreadProps(__spreadValues({}, (0, import_box2.safelySpreadBoxProps)(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderErrorWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}),
props.children
);
});

@@ -184,17 +194,21 @@ ErrorToast.displayName = "ErrorToast";

var _b = _a, { element = "TOAST", variant } = _b, props = __objRest(_b, ["element", "variant"]);
return /* @__PURE__ */ React3.createElement(import_box3.Box, __spreadProps(__spreadValues({}, (0, import_box3.safelySpreadBoxProps)(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderNeutralWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}), props.children);
return /* @__PURE__ */ React3.createElement(
import_box3.Box,
__spreadProps(__spreadValues({}, (0, import_box3.safelySpreadBoxProps)(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderNeutralWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}),
props.children
);
});

@@ -209,17 +223,21 @@ NeutralToast.displayName = "NeutralToast";

var _b = _a, { element = "TOAST", variant } = _b, props = __objRest(_b, ["element", "variant"]);
return /* @__PURE__ */ React4.createElement(import_box4.Box, __spreadProps(__spreadValues({}, (0, import_box4.safelySpreadBoxProps)(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderSuccessWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}), props.children);
return /* @__PURE__ */ React4.createElement(
import_box4.Box,
__spreadProps(__spreadValues({}, (0, import_box4.safelySpreadBoxProps)(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderSuccessWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}),
props.children
);
});

@@ -234,17 +252,21 @@ SuccessToast.displayName = "SuccessToast";

var _b = _a, { element = "TOAST", variant } = _b, props = __objRest(_b, ["element", "variant"]);
return /* @__PURE__ */ React5.createElement(import_box5.Box, __spreadProps(__spreadValues({}, (0, import_box5.safelySpreadBoxProps)(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderWarningWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}), props.children);
return /* @__PURE__ */ React5.createElement(
import_box5.Box,
__spreadProps(__spreadValues({}, (0, import_box5.safelySpreadBoxProps)(props)), {
ref,
backgroundColor: "colorBackgroundBody",
borderColor: "colorBorderWeaker",
borderRadius: "borderRadius20",
borderStyle: "solid",
borderWidth: "borderWidth10",
borderLeftWidth: "borderWidth30",
borderLeftColor: "colorBorderWarningWeak",
boxShadow: "shadowHigh",
element,
padding: "space60",
variant,
width: "size40"
}),
props.children
);
});

@@ -264,100 +286,100 @@ WarningToast.displayName = "WarningToast";

case ToastVariantObject.ERROR:
return /* @__PURE__ */ React6.createElement(import_ErrorIcon.ErrorIcon, {
color: "colorTextIconError",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
});
return /* @__PURE__ */ React6.createElement(
import_ErrorIcon.ErrorIcon,
{
color: "colorTextIconError",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
}
);
case ToastVariantObject.SUCCESS:
return /* @__PURE__ */ React6.createElement(import_SuccessIcon.SuccessIcon, {
color: "colorTextIconSuccess",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
});
return /* @__PURE__ */ React6.createElement(
import_SuccessIcon.SuccessIcon,
{
color: "colorTextIconSuccess",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
}
);
case ToastVariantObject.WARNING:
return /* @__PURE__ */ React6.createElement(import_WarningIcon.WarningIcon, {
color: "colorTextIconWarning",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
});
return /* @__PURE__ */ React6.createElement(
import_WarningIcon.WarningIcon,
{
color: "colorTextIconWarning",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
}
);
case ToastVariantObject.NEUTRAL:
default:
return /* @__PURE__ */ React6.createElement(import_NeutralIcon.NeutralIcon, {
color: "colorTextIconNeutral",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
});
return /* @__PURE__ */ React6.createElement(
import_NeutralIcon.NeutralIcon,
{
color: "colorTextIconNeutral",
decorative: false,
title,
element: `${element}_ICON`,
size: "sizeIcon20"
}
);
}
};
var Toast = React6.forwardRef((_a, ref) => {
var _b = _a, {
children,
onDismiss,
variant = "neutral",
element = "TOAST",
setFocus,
i18nDismissLabel = "Dismiss toast",
i18nErrorLabel = "(error)",
i18nNeutralLabel = "(information)",
i18nSuccessLabel = "(success)",
i18nWarningLabel = "(warning)"
} = _b, props = __objRest(_b, [
"children",
"onDismiss",
"variant",
"element",
"setFocus",
"i18nDismissLabel",
"i18nErrorLabel",
"i18nNeutralLabel",
"i18nSuccessLabel",
"i18nWarningLabel"
]);
const ToastComponent = ToastComponentVariants[variant];
const buttonRef = React6.useRef(null);
React6.useEffect(() => {
if (setFocus && buttonRef.current) {
buttonRef.current.focus({ preventScroll: true });
}
}, [setFocus]);
const i18nVariants = {
error: i18nErrorLabel,
neutral: i18nNeutralLabel,
success: i18nSuccessLabel,
warning: i18nWarningLabel
};
return /* @__PURE__ */ React6.createElement(ToastComponent, __spreadValues({
role: "status",
variant,
element,
ref
}, props), /* @__PURE__ */ React6.createElement(import_media_object.MediaObject, {
as: "div"
}, /* @__PURE__ */ React6.createElement(import_media_object.MediaFigure, {
as: "div",
spacing: "space60"
}, renderToastIcon(variant, i18nVariants[variant], element)), /* @__PURE__ */ React6.createElement(import_media_object.MediaBody, {
as: "div"
}, children), onDismiss && typeof onDismiss === "function" && /* @__PURE__ */ React6.createElement(import_media_object.MediaFigure, {
align: "end",
spacing: "space40"
}, /* @__PURE__ */ React6.createElement(import_button.Button, {
onClick: onDismiss,
variant: "secondary_icon",
ref: buttonRef,
size: "reset",
element: `${element}_CLOSE_BUTTON`
}, /* @__PURE__ */ React6.createElement(import_CloseIcon.CloseIcon, {
decorative: true,
size: "sizeIcon20",
element: `${element}_CLOSE_ICON`
}), /* @__PURE__ */ React6.createElement(ScreenReaderOnly, null, i18nDismissLabel)))));
});
var Toast = React6.forwardRef(
(_a, ref) => {
var _b = _a, {
children,
onDismiss,
variant = "neutral",
element = "TOAST",
setFocus,
i18nDismissLabel = "Dismiss toast",
i18nErrorLabel = "(error)",
i18nNeutralLabel = "(information)",
i18nSuccessLabel = "(success)",
i18nWarningLabel = "(warning)"
} = _b, props = __objRest(_b, [
"children",
"onDismiss",
"variant",
"element",
"setFocus",
"i18nDismissLabel",
"i18nErrorLabel",
"i18nNeutralLabel",
"i18nSuccessLabel",
"i18nWarningLabel"
]);
const ToastComponent = ToastComponentVariants[variant];
const buttonRef = React6.useRef(null);
React6.useEffect(() => {
if (setFocus && buttonRef.current) {
buttonRef.current.focus({ preventScroll: true });
}
}, [setFocus]);
const i18nVariants = {
error: i18nErrorLabel,
neutral: i18nNeutralLabel,
success: i18nSuccessLabel,
warning: i18nWarningLabel
};
return /* @__PURE__ */ React6.createElement(ToastComponent, __spreadValues({ role: "status", variant, element, ref }, props), /* @__PURE__ */ React6.createElement(import_media_object.MediaObject, { as: "div" }, /* @__PURE__ */ React6.createElement(import_media_object.MediaFigure, { as: "div", spacing: "space60" }, renderToastIcon(variant, i18nVariants[variant], element)), /* @__PURE__ */ React6.createElement(import_media_object.MediaBody, { as: "div" }, children), onDismiss && typeof onDismiss === "function" && /* @__PURE__ */ React6.createElement(import_media_object.MediaFigure, { align: "end", spacing: "space40" }, /* @__PURE__ */ React6.createElement(
import_button.Button,
{
onClick: onDismiss,
variant: "secondary_icon",
ref: buttonRef,
size: "reset",
element: `${element}_CLOSE_BUTTON`
},
/* @__PURE__ */ React6.createElement(import_CloseIcon.CloseIcon, { decorative: true, size: "sizeIcon20", element: `${element}_CLOSE_ICON` }),
/* @__PURE__ */ React6.createElement(ScreenReaderOnly, null, i18nDismissLabel)
))));
}
);
Toast.displayName = "Toast";

@@ -377,10 +399,14 @@ Toast.propTypes = ToastPropTypes;

var _b = _a, { children, __console_patch } = _b, props = __objRest(_b, ["children", "__console_patch"]);
return /* @__PURE__ */ React7.createElement(import_reakit_library.Portal, null, /* @__PURE__ */ React7.createElement(import_theme.StyledBase, null, /* @__PURE__ */ React7.createElement(import_box6.Box, __spreadProps(__spreadValues({}, (0, import_box6.safelySpreadBoxProps)(props)), {
position: "fixed",
right: "space40",
top: "space90",
zIndex: "zIndex90",
ref,
style: __console_patch ? { zIndex: 1999 } : void 0
}), children)));
return /* @__PURE__ */ React7.createElement(import_reakit_library.Portal, null, /* @__PURE__ */ React7.createElement(import_theme.StyledBase, null, /* @__PURE__ */ React7.createElement(
import_box6.Box,
__spreadProps(__spreadValues({}, (0, import_box6.safelySpreadBoxProps)(props)), {
position: "fixed",
right: "space40",
top: "space90",
zIndex: "zIndex90",
ref,
style: __console_patch ? { zIndex: 1999 } : void 0
}),
children
)));
});

@@ -395,7 +421,3 @@ ToastPortal.displayName = "ToastPortal";

var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
return /* @__PURE__ */ React8.createElement(ToastPortal, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(import_stack.Stack, {
orientation: "vertical",
spacing: "space40",
ref
}, children));
return /* @__PURE__ */ React8.createElement(ToastPortal, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(import_stack.Stack, { orientation: "vertical", spacing: "space40", ref }, children));
});

@@ -454,27 +476,27 @@ ToastContainer.displayName = "ToastContainer";

return /* @__PURE__ */ React9.createElement(ToastPortal, __spreadValues({}, props), transitions((styles, item, state, index) => {
return /* @__PURE__ */ React9.createElement(AnimatedToast, {
as: "div",
key: state.key,
style: styles
}, /* @__PURE__ */ React9.createElement(Toast, __spreadProps(__spreadValues({
key: item.id
}, item), {
onDismiss: () => {
if (item.onDismiss != null) {
item.onDismiss();
return /* @__PURE__ */ React9.createElement(AnimatedToast, { as: "div", key: state.key, style: styles }, /* @__PURE__ */ React9.createElement(
Toast,
__spreadProps(__spreadValues({
key: item.id
}, item), {
onDismiss: () => {
if (item.onDismiss != null) {
item.onDismiss();
}
pop(item.id);
},
ref: (ref) => {
if (ref != null) {
refMap.set(item, ref);
}
},
setFocus: index === 0,
onFocus: (e) => {
if (e.relatedTarget && !returnTarget.trigger) {
setReturnTarget({ trigger: e.relatedTarget });
}
}
pop(item.id);
},
ref: (ref) => {
if (ref != null) {
refMap.set(item, ref);
}
},
setFocus: index === 0,
onFocus: (e) => {
if (e.relatedTarget && !returnTarget.trigger) {
setReturnTarget({ trigger: e.relatedTarget });
}
}
}), item.message));
}),
item.message
));
}));

@@ -508,13 +530,15 @@ };

}
setToasts((currentToasts) => currentToasts.filter((toast) => {
if (toast.id === id) {
if (toast.timeOutId) {
window.clearTimeout(toast.timeOutId);
setToasts(
(currentToasts) => currentToasts.filter((toast) => {
if (toast.id === id) {
if (toast.timeOutId) {
window.clearTimeout(toast.timeOutId);
}
if (toast.onDismiss) {
toast.onDismiss();
}
}
if (toast.onDismiss) {
toast.onDismiss();
}
}
return toast.id !== id;
}));
return toast.id !== id;
})
);
};

@@ -521,0 +545,0 @@ const push = (newToast) => {

2

dist/index.es.js

@@ -1,1 +0,1 @@

var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React6 from"react";import{Button}from"@twilio-paste/button";import{CloseIcon}from"@twilio-paste/icons/esm/CloseIcon";import{ErrorIcon}from"@twilio-paste/icons/esm/ErrorIcon";import{NeutralIcon}from"@twilio-paste/icons/esm/NeutralIcon";import{SuccessIcon}from"@twilio-paste/icons/esm/SuccessIcon";import{WarningIcon}from"@twilio-paste/icons/esm/WarningIcon";import{MediaObject,MediaFigure,MediaBody}from"@twilio-paste/media-object";import*as React from"react";import"prop-types";import{Box}from"@twilio-paste/box";var __defProp2=Object.defineProperty,__defProps2=Object.defineProperties,__getOwnPropDescs2=Object.getOwnPropertyDescriptors,__getOwnPropSymbols2=Object.getOwnPropertySymbols,__hasOwnProp2=Object.prototype.hasOwnProperty,__propIsEnum2=Object.prototype.propertyIsEnumerable,__defNormalProp2=(obj,key,value)=>key in obj?__defProp2(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues2=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp2.call(b,prop)&&__defNormalProp2(a,prop,b[prop]);if(__getOwnPropSymbols2)for(var prop of __getOwnPropSymbols2(b))__propIsEnum2.call(b,prop)&&__defNormalProp2(a,prop,b[prop]);return a},__spreadProps2=(a,b)=>__defProps2(a,__getOwnPropDescs2(b)),__objRest2=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp2.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols2)for(var prop of __getOwnPropSymbols2(source))exclude.indexOf(prop)<0&&__propIsEnum2.call(source,prop)&&(target[prop]=source[prop]);return target},ScreenReaderOnly=React.forwardRef((_a,ref)=>{var _b=_a,{as="span",children}=_b,props=__objRest2(_b,["as","children"]);return React.createElement(Box,__spreadProps2(__spreadValues2({},props),{as,border:"none",clip:"rect(0 0 0 0)",height:"1px",margin:"spaceNegative10",overflow:"hidden",padding:"space0",position:"absolute",ref,textTransform:"none",whiteSpace:"nowrap",width:"1px"}),children)});ScreenReaderOnly.displayName="ScreenReaderOnly";import*as React2 from"react";import{Box as Box2,safelySpreadBoxProps}from"@twilio-paste/box";import*as PropTypes2 from"prop-types";var ToastVariantObject={ERROR:"error",NEUTRAL:"neutral",SUCCESS:"success",WARNING:"warning"};var ToastPropTypes={children:PropTypes2.node.isRequired,onDismiss:PropTypes2.func,variant:PropTypes2.oneOf(["error","neutral","success","warning"]),i18nDismissLabel:PropTypes2.string,i18nErrorLabel:PropTypes2.string,i18nNeutralLabel:PropTypes2.string,i18nSuccessLabel:PropTypes2.string,i18nWarningLabel:PropTypes2.string},ToastPortalPropTypes={children:PropTypes2.node.isRequired,__console_patch:PropTypes2.bool},ToastContainerPropTypes={children:PropTypes2.node.isRequired,__console_patch:PropTypes2.bool},ToasterPropTypes={toasts:PropTypes2.arrayOf(PropTypes2.shape({id:PropTypes2.string.isRequired,message:PropTypes2.node.isRequired,setFocus:PropTypes2.bool,variant:PropTypes2.oneOf(Object.values(ToastVariantObject)).isRequired})).isRequired,pop:PropTypes2.func.isRequired,__console_patch:PropTypes2.bool};var ErrorToast=React2.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React2.createElement(Box2,__spreadProps(__spreadValues({},safelySpreadBoxProps(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderErrorWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});ErrorToast.displayName="ErrorToast";ErrorToast.propTypes=ToastPropTypes;import*as React3 from"react";import{Box as Box3,safelySpreadBoxProps as safelySpreadBoxProps2}from"@twilio-paste/box";var NeutralToast=React3.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React3.createElement(Box3,__spreadProps(__spreadValues({},safelySpreadBoxProps2(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderNeutralWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});NeutralToast.displayName="NeutralToast";NeutralToast.propTypes=ToastPropTypes;import*as React4 from"react";import{Box as Box4,safelySpreadBoxProps as safelySpreadBoxProps3}from"@twilio-paste/box";var SuccessToast=React4.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React4.createElement(Box4,__spreadProps(__spreadValues({},safelySpreadBoxProps3(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderSuccessWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});SuccessToast.displayName="SuccessToast";SuccessToast.propTypes=ToastPropTypes;import*as React5 from"react";import{Box as Box5,safelySpreadBoxProps as safelySpreadBoxProps4}from"@twilio-paste/box";var WarningToast=React5.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React5.createElement(Box5,__spreadProps(__spreadValues({},safelySpreadBoxProps4(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderWarningWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});WarningToast.displayName="WarningToast";WarningToast.propTypes=ToastPropTypes;var ToastComponentVariants={error:ErrorToast,neutral:NeutralToast,success:SuccessToast,warning:WarningToast},renderToastIcon=(variant,title,element)=>{switch(variant){case ToastVariantObject.ERROR:return React6.createElement(ErrorIcon,{color:"colorTextIconError",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.SUCCESS:return React6.createElement(SuccessIcon,{color:"colorTextIconSuccess",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.WARNING:return React6.createElement(WarningIcon,{color:"colorTextIconWarning",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.NEUTRAL:default:return React6.createElement(NeutralIcon,{color:"colorTextIconNeutral",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"})}},Toast=React6.forwardRef((_a,ref)=>{var _b=_a,{children,onDismiss,variant="neutral",element="TOAST",setFocus,i18nDismissLabel="Dismiss toast",i18nErrorLabel="(error)",i18nNeutralLabel="(information)",i18nSuccessLabel="(success)",i18nWarningLabel="(warning)"}=_b,props=__objRest(_b,["children","onDismiss","variant","element","setFocus","i18nDismissLabel","i18nErrorLabel","i18nNeutralLabel","i18nSuccessLabel","i18nWarningLabel"]);let ToastComponent=ToastComponentVariants[variant],buttonRef=React6.useRef(null);React6.useEffect(()=>{setFocus&&buttonRef.current&&buttonRef.current.focus({preventScroll:!0})},[setFocus]);let i18nVariants={error:i18nErrorLabel,neutral:i18nNeutralLabel,success:i18nSuccessLabel,warning:i18nWarningLabel};return React6.createElement(ToastComponent,__spreadValues({role:"status",variant,element,ref},props),React6.createElement(MediaObject,{as:"div"},React6.createElement(MediaFigure,{as:"div",spacing:"space60"},renderToastIcon(variant,i18nVariants[variant],element)),React6.createElement(MediaBody,{as:"div"},children),onDismiss&&typeof onDismiss=="function"&&React6.createElement(MediaFigure,{align:"end",spacing:"space40"},React6.createElement(Button,{onClick:onDismiss,variant:"secondary_icon",ref:buttonRef,size:"reset",element:`${element}_CLOSE_BUTTON`},React6.createElement(CloseIcon,{decorative:!0,size:"sizeIcon20",element:`${element}_CLOSE_ICON`}),React6.createElement(ScreenReaderOnly,null,i18nDismissLabel)))))});Toast.displayName="Toast";Toast.propTypes=ToastPropTypes;import*as React8 from"react";import{Stack}from"@twilio-paste/stack";import*as React7 from"react";import{StyledBase}from"@twilio-paste/theme";import{Portal}from"@twilio-paste/reakit-library";import{Box as Box6,safelySpreadBoxProps as safelySpreadBoxProps5}from"@twilio-paste/box";var ToastPortal=React7.forwardRef((_a,ref)=>{var _b=_a,{children,__console_patch}=_b,props=__objRest(_b,["children","__console_patch"]);return React7.createElement(Portal,null,React7.createElement(StyledBase,null,React7.createElement(Box6,__spreadProps(__spreadValues({},safelySpreadBoxProps5(props)),{position:"fixed",right:"space40",top:"space90",zIndex:"zIndex90",ref,style:__console_patch?{zIndex:1999}:void 0}),children)))});ToastPortal.displayName="ToastPortal";var ToastContainer=React8.forwardRef((_a,ref)=>{var _b=_a,{children}=_b,props=__objRest(_b,["children"]);return React8.createElement(ToastPortal,__spreadValues({},props),React8.createElement(Stack,{orientation:"vertical",spacing:"space40",ref},children))});ToastContainer.displayName="ToastContainer";ToastContainer.propTypes=ToastContainerPropTypes;import*as React9 from"react";import{useTransition,animated,useReducedMotion}from"@twilio-paste/animation-library";import{useTheme}from"@twilio-paste/theme";import{Box as Box7}from"@twilio-paste/box";var AnimatedToast=animated(Box7),Toaster=_a=>{var _b=_a,{toasts,pop}=_b,props=__objRest(_b,["toasts","pop"]);let prefersReducedMotion=useReducedMotion(),[refMap]=React9.useState(()=>new WeakMap),[returnTarget,setReturnTarget]=React9.useState({trigger:null}),theme=useTheme(),transitions=useTransition(toasts,{from:{marginBottom:"0rem",opacity:0,transform:"translateX(100%) scale(1)",height:prefersReducedMotion?"auto":0},enter:prefersReducedMotion?{marginBottom:theme.space.space40,opacity:1,transform:"translateX(0px) scale(1)"}:item=>async next=>{await next({marginBottom:theme.space.space40,opacity:1,transform:"translateX(0px) scale(1)",height:refMap.get(item).offsetHeight})},leave:{marginBottom:"0rem",opacity:0,transform:"translateX(0px) scale(0.8)",height:prefersReducedMotion?"auto":0},config:{mass:1,tension:150,friction:20}}),clearReturnTarget=React9.useCallback(()=>{setReturnTarget({trigger:null})},[returnTarget]);return React9.useEffect(()=>{returnTarget.trigger!=null&&toasts.length===0&&(returnTarget.trigger.focus(),clearReturnTarget())},[toasts]),React9.createElement(ToastPortal,__spreadValues({},props),transitions((styles,item,state,index)=>React9.createElement(AnimatedToast,{as:"div",key:state.key,style:styles},React9.createElement(Toast,__spreadProps(__spreadValues({key:item.id},item),{onDismiss:()=>{item.onDismiss!=null&&item.onDismiss(),pop(item.id)},ref:ref=>{ref!=null&&refMap.set(item,ref)},setFocus:index===0,onFocus:e=>{e.relatedTarget&&!returnTarget.trigger&&setReturnTarget({trigger:e.relatedTarget})}}),item.message))))};Toaster.displayName="Toaster";import*as React10 from"react";import{uid}from"@twilio-paste/uid-library";var useToaster=()=>{let isMounted=React10.useRef(null),[toasts,setToasts]=React10.useState([]);React10.useEffect(()=>(isMounted.current=!0,()=>{isMounted.current=!1,toasts.forEach(toast=>{toast.timeOutId&&window.clearTimeout(toast.timeOutId)})}),[]);let pop=id=>{!isMounted.current||setToasts(currentToasts=>currentToasts.filter(toast=>(toast.id===id&&(toast.timeOutId&&window.clearTimeout(toast.timeOutId),toast.onDismiss&&toast.onDismiss()),toast.id!==id)))};return{toasts,push:newToast=>{if(!isMounted.current)return;let generatedID=uid(newToast),timeOutId;newToast.dismissAfter!=null&&Number.isInteger(newToast.dismissAfter)&&(timeOutId=window.setTimeout(pop,newToast.dismissAfter,newToast.id||generatedID));let existingToasts=toasts.map(toast=>{let tmpToast=toast;return tmpToast.setFocus=!1,tmpToast});setToasts([__spreadValues({id:generatedID,timeOutId,setFocus:!0},newToast),...existingToasts])},pop}};export{AnimatedToast,Toast,ToastContainer,Toaster,useToaster};
var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React6 from"react";import{Button}from"@twilio-paste/button";import{CloseIcon}from"@twilio-paste/icons/esm/CloseIcon";import{ErrorIcon}from"@twilio-paste/icons/esm/ErrorIcon";import{NeutralIcon}from"@twilio-paste/icons/esm/NeutralIcon";import{SuccessIcon}from"@twilio-paste/icons/esm/SuccessIcon";import{WarningIcon}from"@twilio-paste/icons/esm/WarningIcon";import{MediaObject,MediaFigure,MediaBody}from"@twilio-paste/media-object";import*as React from"react";import"prop-types";import{Box}from"@twilio-paste/box";var __defProp2=Object.defineProperty,__defProps2=Object.defineProperties,__getOwnPropDescs2=Object.getOwnPropertyDescriptors,__getOwnPropSymbols2=Object.getOwnPropertySymbols,__hasOwnProp2=Object.prototype.hasOwnProperty,__propIsEnum2=Object.prototype.propertyIsEnumerable,__defNormalProp2=(obj,key,value)=>key in obj?__defProp2(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues2=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp2.call(b,prop)&&__defNormalProp2(a,prop,b[prop]);if(__getOwnPropSymbols2)for(var prop of __getOwnPropSymbols2(b))__propIsEnum2.call(b,prop)&&__defNormalProp2(a,prop,b[prop]);return a},__spreadProps2=(a,b)=>__defProps2(a,__getOwnPropDescs2(b)),__objRest2=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp2.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols2)for(var prop of __getOwnPropSymbols2(source))exclude.indexOf(prop)<0&&__propIsEnum2.call(source,prop)&&(target[prop]=source[prop]);return target},ScreenReaderOnly=React.forwardRef((_a,ref)=>{var _b=_a,{as="span",children}=_b,props=__objRest2(_b,["as","children"]);return React.createElement(Box,__spreadProps2(__spreadValues2({},props),{as,border:"none",clip:"rect(0 0 0 0)",height:"1px",margin:"spaceNegative10",overflow:"hidden",padding:"space0",position:"absolute",ref,textTransform:"none",whiteSpace:"nowrap",width:"1px"}),children)});ScreenReaderOnly.displayName="ScreenReaderOnly";import*as React2 from"react";import{Box as Box2,safelySpreadBoxProps}from"@twilio-paste/box";import PropTypes from"prop-types";var ToastVariantObject={ERROR:"error",NEUTRAL:"neutral",SUCCESS:"success",WARNING:"warning"};var ToastPropTypes={children:PropTypes.node.isRequired,onDismiss:PropTypes.func,variant:PropTypes.oneOf(["error","neutral","success","warning"]),i18nDismissLabel:PropTypes.string,i18nErrorLabel:PropTypes.string,i18nNeutralLabel:PropTypes.string,i18nSuccessLabel:PropTypes.string,i18nWarningLabel:PropTypes.string},ToastPortalPropTypes={children:PropTypes.node.isRequired,__console_patch:PropTypes.bool},ToastContainerPropTypes={children:PropTypes.node.isRequired,__console_patch:PropTypes.bool},ToasterPropTypes={toasts:PropTypes.arrayOf(PropTypes.shape({id:PropTypes.string.isRequired,message:PropTypes.node.isRequired,setFocus:PropTypes.bool,variant:PropTypes.oneOf(Object.values(ToastVariantObject)).isRequired})).isRequired,pop:PropTypes.func.isRequired,__console_patch:PropTypes.bool};var ErrorToast=React2.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React2.createElement(Box2,__spreadProps(__spreadValues({},safelySpreadBoxProps(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderErrorWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});ErrorToast.displayName="ErrorToast";ErrorToast.propTypes=ToastPropTypes;import*as React3 from"react";import{Box as Box3,safelySpreadBoxProps as safelySpreadBoxProps2}from"@twilio-paste/box";var NeutralToast=React3.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React3.createElement(Box3,__spreadProps(__spreadValues({},safelySpreadBoxProps2(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderNeutralWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});NeutralToast.displayName="NeutralToast";NeutralToast.propTypes=ToastPropTypes;import*as React4 from"react";import{Box as Box4,safelySpreadBoxProps as safelySpreadBoxProps3}from"@twilio-paste/box";var SuccessToast=React4.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React4.createElement(Box4,__spreadProps(__spreadValues({},safelySpreadBoxProps3(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderSuccessWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});SuccessToast.displayName="SuccessToast";SuccessToast.propTypes=ToastPropTypes;import*as React5 from"react";import{Box as Box5,safelySpreadBoxProps as safelySpreadBoxProps4}from"@twilio-paste/box";var WarningToast=React5.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React5.createElement(Box5,__spreadProps(__spreadValues({},safelySpreadBoxProps4(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderWarningWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});WarningToast.displayName="WarningToast";WarningToast.propTypes=ToastPropTypes;var ToastComponentVariants={error:ErrorToast,neutral:NeutralToast,success:SuccessToast,warning:WarningToast},renderToastIcon=(variant,title,element)=>{switch(variant){case ToastVariantObject.ERROR:return React6.createElement(ErrorIcon,{color:"colorTextIconError",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.SUCCESS:return React6.createElement(SuccessIcon,{color:"colorTextIconSuccess",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.WARNING:return React6.createElement(WarningIcon,{color:"colorTextIconWarning",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.NEUTRAL:default:return React6.createElement(NeutralIcon,{color:"colorTextIconNeutral",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"})}},Toast=React6.forwardRef((_a,ref)=>{var _b=_a,{children,onDismiss,variant="neutral",element="TOAST",setFocus,i18nDismissLabel="Dismiss toast",i18nErrorLabel="(error)",i18nNeutralLabel="(information)",i18nSuccessLabel="(success)",i18nWarningLabel="(warning)"}=_b,props=__objRest(_b,["children","onDismiss","variant","element","setFocus","i18nDismissLabel","i18nErrorLabel","i18nNeutralLabel","i18nSuccessLabel","i18nWarningLabel"]);let ToastComponent=ToastComponentVariants[variant],buttonRef=React6.useRef(null);React6.useEffect(()=>{setFocus&&buttonRef.current&&buttonRef.current.focus({preventScroll:!0})},[setFocus]);let i18nVariants={error:i18nErrorLabel,neutral:i18nNeutralLabel,success:i18nSuccessLabel,warning:i18nWarningLabel};return React6.createElement(ToastComponent,__spreadValues({role:"status",variant,element,ref},props),React6.createElement(MediaObject,{as:"div"},React6.createElement(MediaFigure,{as:"div",spacing:"space60"},renderToastIcon(variant,i18nVariants[variant],element)),React6.createElement(MediaBody,{as:"div"},children),onDismiss&&typeof onDismiss=="function"&&React6.createElement(MediaFigure,{align:"end",spacing:"space40"},React6.createElement(Button,{onClick:onDismiss,variant:"secondary_icon",ref:buttonRef,size:"reset",element:`${element}_CLOSE_BUTTON`},React6.createElement(CloseIcon,{decorative:!0,size:"sizeIcon20",element:`${element}_CLOSE_ICON`}),React6.createElement(ScreenReaderOnly,null,i18nDismissLabel)))))});Toast.displayName="Toast";Toast.propTypes=ToastPropTypes;import*as React8 from"react";import{Stack}from"@twilio-paste/stack";import*as React7 from"react";import{StyledBase}from"@twilio-paste/theme";import{Portal}from"@twilio-paste/reakit-library";import{Box as Box6,safelySpreadBoxProps as safelySpreadBoxProps5}from"@twilio-paste/box";var ToastPortal=React7.forwardRef((_a,ref)=>{var _b=_a,{children,__console_patch}=_b,props=__objRest(_b,["children","__console_patch"]);return React7.createElement(Portal,null,React7.createElement(StyledBase,null,React7.createElement(Box6,__spreadProps(__spreadValues({},safelySpreadBoxProps5(props)),{position:"fixed",right:"space40",top:"space90",zIndex:"zIndex90",ref,style:__console_patch?{zIndex:1999}:void 0}),children)))});ToastPortal.displayName="ToastPortal";var ToastContainer=React8.forwardRef((_a,ref)=>{var _b=_a,{children}=_b,props=__objRest(_b,["children"]);return React8.createElement(ToastPortal,__spreadValues({},props),React8.createElement(Stack,{orientation:"vertical",spacing:"space40",ref},children))});ToastContainer.displayName="ToastContainer";ToastContainer.propTypes=ToastContainerPropTypes;import*as React9 from"react";import{useTransition,animated,useReducedMotion}from"@twilio-paste/animation-library";import{useTheme}from"@twilio-paste/theme";import{Box as Box7}from"@twilio-paste/box";var AnimatedToast=animated(Box7),Toaster=_a=>{var _b=_a,{toasts,pop}=_b,props=__objRest(_b,["toasts","pop"]);let prefersReducedMotion=useReducedMotion(),[refMap]=React9.useState(()=>new WeakMap),[returnTarget,setReturnTarget]=React9.useState({trigger:null}),theme=useTheme(),transitions=useTransition(toasts,{from:{marginBottom:"0rem",opacity:0,transform:"translateX(100%) scale(1)",height:prefersReducedMotion?"auto":0},enter:prefersReducedMotion?{marginBottom:theme.space.space40,opacity:1,transform:"translateX(0px) scale(1)"}:item=>async next=>{await next({marginBottom:theme.space.space40,opacity:1,transform:"translateX(0px) scale(1)",height:refMap.get(item).offsetHeight})},leave:{marginBottom:"0rem",opacity:0,transform:"translateX(0px) scale(0.8)",height:prefersReducedMotion?"auto":0},config:{mass:1,tension:150,friction:20}}),clearReturnTarget=React9.useCallback(()=>{setReturnTarget({trigger:null})},[returnTarget]);return React9.useEffect(()=>{returnTarget.trigger!=null&&toasts.length===0&&(returnTarget.trigger.focus(),clearReturnTarget())},[toasts]),React9.createElement(ToastPortal,__spreadValues({},props),transitions((styles,item,state,index)=>React9.createElement(AnimatedToast,{as:"div",key:state.key,style:styles},React9.createElement(Toast,__spreadProps(__spreadValues({key:item.id},item),{onDismiss:()=>{item.onDismiss!=null&&item.onDismiss(),pop(item.id)},ref:ref=>{ref!=null&&refMap.set(item,ref)},setFocus:index===0,onFocus:e=>{e.relatedTarget&&!returnTarget.trigger&&setReturnTarget({trigger:e.relatedTarget})}}),item.message))))};Toaster.displayName="Toaster";import*as React10 from"react";import{uid}from"@twilio-paste/uid-library";var useToaster=()=>{let isMounted=React10.useRef(null),[toasts,setToasts]=React10.useState([]);React10.useEffect(()=>(isMounted.current=!0,()=>{isMounted.current=!1,toasts.forEach(toast=>{toast.timeOutId&&window.clearTimeout(toast.timeOutId)})}),[]);let pop=id=>{!isMounted.current||setToasts(currentToasts=>currentToasts.filter(toast=>(toast.id===id&&(toast.timeOutId&&window.clearTimeout(toast.timeOutId),toast.onDismiss&&toast.onDismiss()),toast.id!==id)))};return{toasts,push:newToast=>{if(!isMounted.current)return;let generatedID=uid(newToast),timeOutId;newToast.dismissAfter!=null&&Number.isInteger(newToast.dismissAfter)&&(timeOutId=window.setTimeout(pop,newToast.dismissAfter,newToast.id||generatedID));let existingToasts=toasts.map(toast=>{let tmpToast=toast;return tmpToast.setFocus=!1,tmpToast});setToasts([__spreadValues({id:generatedID,timeOutId,setFocus:!0},newToast),...existingToasts])},pop}};export{AnimatedToast,Toast,ToastContainer,Toaster,useToaster};

2

dist/index.js

@@ -1,1 +0,1 @@

var __create=Object.create;var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{AnimatedToast:()=>AnimatedToast,Toast:()=>Toast,ToastContainer:()=>ToastContainer,Toaster:()=>Toaster,useToaster:()=>useToaster});module.exports=__toCommonJS(src_exports);var React6=__toESM(require("react")),import_button=require("@twilio-paste/button"),import_CloseIcon=require("@twilio-paste/icons/cjs/CloseIcon"),import_ErrorIcon=require("@twilio-paste/icons/cjs/ErrorIcon"),import_NeutralIcon=require("@twilio-paste/icons/cjs/NeutralIcon"),import_SuccessIcon=require("@twilio-paste/icons/cjs/SuccessIcon"),import_WarningIcon=require("@twilio-paste/icons/cjs/WarningIcon"),import_media_object=require("@twilio-paste/media-object");var React=__toESM(require("react")),PropTypes=require("prop-types"),import_box=require("@twilio-paste/box"),__defProp2=Object.defineProperty,__defProps2=Object.defineProperties,__getOwnPropDescs2=Object.getOwnPropertyDescriptors,__getOwnPropSymbols2=Object.getOwnPropertySymbols,__hasOwnProp2=Object.prototype.hasOwnProperty,__propIsEnum2=Object.prototype.propertyIsEnumerable,__defNormalProp2=(obj,key,value)=>key in obj?__defProp2(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues2=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp2.call(b,prop)&&__defNormalProp2(a,prop,b[prop]);if(__getOwnPropSymbols2)for(var prop of __getOwnPropSymbols2(b))__propIsEnum2.call(b,prop)&&__defNormalProp2(a,prop,b[prop]);return a},__spreadProps2=(a,b)=>__defProps2(a,__getOwnPropDescs2(b)),__objRest2=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp2.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols2)for(var prop of __getOwnPropSymbols2(source))exclude.indexOf(prop)<0&&__propIsEnum2.call(source,prop)&&(target[prop]=source[prop]);return target},ScreenReaderOnly=React.forwardRef((_a,ref)=>{var _b=_a,{as="span",children}=_b,props=__objRest2(_b,["as","children"]);return React.createElement(import_box.Box,__spreadProps2(__spreadValues2({},props),{as,border:"none",clip:"rect(0 0 0 0)",height:"1px",margin:"spaceNegative10",overflow:"hidden",padding:"space0",position:"absolute",ref,textTransform:"none",whiteSpace:"nowrap",width:"1px"}),children)});ScreenReaderOnly.displayName="ScreenReaderOnly";var React2=__toESM(require("react")),import_box2=require("@twilio-paste/box");var PropTypes2=__toESM(require("prop-types"));var ToastVariantObject={ERROR:"error",NEUTRAL:"neutral",SUCCESS:"success",WARNING:"warning"};var ToastPropTypes={children:PropTypes2.node.isRequired,onDismiss:PropTypes2.func,variant:PropTypes2.oneOf(["error","neutral","success","warning"]),i18nDismissLabel:PropTypes2.string,i18nErrorLabel:PropTypes2.string,i18nNeutralLabel:PropTypes2.string,i18nSuccessLabel:PropTypes2.string,i18nWarningLabel:PropTypes2.string},ToastPortalPropTypes={children:PropTypes2.node.isRequired,__console_patch:PropTypes2.bool},ToastContainerPropTypes={children:PropTypes2.node.isRequired,__console_patch:PropTypes2.bool},ToasterPropTypes={toasts:PropTypes2.arrayOf(PropTypes2.shape({id:PropTypes2.string.isRequired,message:PropTypes2.node.isRequired,setFocus:PropTypes2.bool,variant:PropTypes2.oneOf(Object.values(ToastVariantObject)).isRequired})).isRequired,pop:PropTypes2.func.isRequired,__console_patch:PropTypes2.bool};var ErrorToast=React2.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React2.createElement(import_box2.Box,__spreadProps(__spreadValues({},(0,import_box2.safelySpreadBoxProps)(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderErrorWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});ErrorToast.displayName="ErrorToast";ErrorToast.propTypes=ToastPropTypes;var React3=__toESM(require("react")),import_box3=require("@twilio-paste/box");var NeutralToast=React3.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React3.createElement(import_box3.Box,__spreadProps(__spreadValues({},(0,import_box3.safelySpreadBoxProps)(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderNeutralWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});NeutralToast.displayName="NeutralToast";NeutralToast.propTypes=ToastPropTypes;var React4=__toESM(require("react")),import_box4=require("@twilio-paste/box");var SuccessToast=React4.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React4.createElement(import_box4.Box,__spreadProps(__spreadValues({},(0,import_box4.safelySpreadBoxProps)(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderSuccessWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});SuccessToast.displayName="SuccessToast";SuccessToast.propTypes=ToastPropTypes;var React5=__toESM(require("react")),import_box5=require("@twilio-paste/box");var WarningToast=React5.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React5.createElement(import_box5.Box,__spreadProps(__spreadValues({},(0,import_box5.safelySpreadBoxProps)(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderWarningWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});WarningToast.displayName="WarningToast";WarningToast.propTypes=ToastPropTypes;var ToastComponentVariants={error:ErrorToast,neutral:NeutralToast,success:SuccessToast,warning:WarningToast},renderToastIcon=(variant,title,element)=>{switch(variant){case ToastVariantObject.ERROR:return React6.createElement(import_ErrorIcon.ErrorIcon,{color:"colorTextIconError",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.SUCCESS:return React6.createElement(import_SuccessIcon.SuccessIcon,{color:"colorTextIconSuccess",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.WARNING:return React6.createElement(import_WarningIcon.WarningIcon,{color:"colorTextIconWarning",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.NEUTRAL:default:return React6.createElement(import_NeutralIcon.NeutralIcon,{color:"colorTextIconNeutral",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"})}},Toast=React6.forwardRef((_a,ref)=>{var _b=_a,{children,onDismiss,variant="neutral",element="TOAST",setFocus,i18nDismissLabel="Dismiss toast",i18nErrorLabel="(error)",i18nNeutralLabel="(information)",i18nSuccessLabel="(success)",i18nWarningLabel="(warning)"}=_b,props=__objRest(_b,["children","onDismiss","variant","element","setFocus","i18nDismissLabel","i18nErrorLabel","i18nNeutralLabel","i18nSuccessLabel","i18nWarningLabel"]);let ToastComponent=ToastComponentVariants[variant],buttonRef=React6.useRef(null);React6.useEffect(()=>{setFocus&&buttonRef.current&&buttonRef.current.focus({preventScroll:!0})},[setFocus]);let i18nVariants={error:i18nErrorLabel,neutral:i18nNeutralLabel,success:i18nSuccessLabel,warning:i18nWarningLabel};return React6.createElement(ToastComponent,__spreadValues({role:"status",variant,element,ref},props),React6.createElement(import_media_object.MediaObject,{as:"div"},React6.createElement(import_media_object.MediaFigure,{as:"div",spacing:"space60"},renderToastIcon(variant,i18nVariants[variant],element)),React6.createElement(import_media_object.MediaBody,{as:"div"},children),onDismiss&&typeof onDismiss=="function"&&React6.createElement(import_media_object.MediaFigure,{align:"end",spacing:"space40"},React6.createElement(import_button.Button,{onClick:onDismiss,variant:"secondary_icon",ref:buttonRef,size:"reset",element:`${element}_CLOSE_BUTTON`},React6.createElement(import_CloseIcon.CloseIcon,{decorative:!0,size:"sizeIcon20",element:`${element}_CLOSE_ICON`}),React6.createElement(ScreenReaderOnly,null,i18nDismissLabel)))))});Toast.displayName="Toast";Toast.propTypes=ToastPropTypes;var React8=__toESM(require("react")),import_stack=require("@twilio-paste/stack");var React7=__toESM(require("react")),import_theme=require("@twilio-paste/theme"),import_reakit_library=require("@twilio-paste/reakit-library"),import_box6=require("@twilio-paste/box");var ToastPortal=React7.forwardRef((_a,ref)=>{var _b=_a,{children,__console_patch}=_b,props=__objRest(_b,["children","__console_patch"]);return React7.createElement(import_reakit_library.Portal,null,React7.createElement(import_theme.StyledBase,null,React7.createElement(import_box6.Box,__spreadProps(__spreadValues({},(0,import_box6.safelySpreadBoxProps)(props)),{position:"fixed",right:"space40",top:"space90",zIndex:"zIndex90",ref,style:__console_patch?{zIndex:1999}:void 0}),children)))});ToastPortal.displayName="ToastPortal";var ToastContainer=React8.forwardRef((_a,ref)=>{var _b=_a,{children}=_b,props=__objRest(_b,["children"]);return React8.createElement(ToastPortal,__spreadValues({},props),React8.createElement(import_stack.Stack,{orientation:"vertical",spacing:"space40",ref},children))});ToastContainer.displayName="ToastContainer";ToastContainer.propTypes=ToastContainerPropTypes;var React9=__toESM(require("react")),import_animation_library=require("@twilio-paste/animation-library"),import_theme2=require("@twilio-paste/theme"),import_box7=require("@twilio-paste/box");var AnimatedToast=(0,import_animation_library.animated)(import_box7.Box),Toaster=_a=>{var _b=_a,{toasts,pop}=_b,props=__objRest(_b,["toasts","pop"]);let prefersReducedMotion=(0,import_animation_library.useReducedMotion)(),[refMap]=React9.useState(()=>new WeakMap),[returnTarget,setReturnTarget]=React9.useState({trigger:null}),theme=(0,import_theme2.useTheme)(),transitions=(0,import_animation_library.useTransition)(toasts,{from:{marginBottom:"0rem",opacity:0,transform:"translateX(100%) scale(1)",height:prefersReducedMotion?"auto":0},enter:prefersReducedMotion?{marginBottom:theme.space.space40,opacity:1,transform:"translateX(0px) scale(1)"}:item=>async next=>{await next({marginBottom:theme.space.space40,opacity:1,transform:"translateX(0px) scale(1)",height:refMap.get(item).offsetHeight})},leave:{marginBottom:"0rem",opacity:0,transform:"translateX(0px) scale(0.8)",height:prefersReducedMotion?"auto":0},config:{mass:1,tension:150,friction:20}}),clearReturnTarget=React9.useCallback(()=>{setReturnTarget({trigger:null})},[returnTarget]);return React9.useEffect(()=>{returnTarget.trigger!=null&&toasts.length===0&&(returnTarget.trigger.focus(),clearReturnTarget())},[toasts]),React9.createElement(ToastPortal,__spreadValues({},props),transitions((styles,item,state,index)=>React9.createElement(AnimatedToast,{as:"div",key:state.key,style:styles},React9.createElement(Toast,__spreadProps(__spreadValues({key:item.id},item),{onDismiss:()=>{item.onDismiss!=null&&item.onDismiss(),pop(item.id)},ref:ref=>{ref!=null&&refMap.set(item,ref)},setFocus:index===0,onFocus:e=>{e.relatedTarget&&!returnTarget.trigger&&setReturnTarget({trigger:e.relatedTarget})}}),item.message))))};Toaster.displayName="Toaster";var React10=__toESM(require("react")),import_uid_library=require("@twilio-paste/uid-library"),useToaster=()=>{let isMounted=React10.useRef(null),[toasts,setToasts]=React10.useState([]);React10.useEffect(()=>(isMounted.current=!0,()=>{isMounted.current=!1,toasts.forEach(toast=>{toast.timeOutId&&window.clearTimeout(toast.timeOutId)})}),[]);let pop=id=>{!isMounted.current||setToasts(currentToasts=>currentToasts.filter(toast=>(toast.id===id&&(toast.timeOutId&&window.clearTimeout(toast.timeOutId),toast.onDismiss&&toast.onDismiss()),toast.id!==id)))};return{toasts,push:newToast=>{if(!isMounted.current)return;let generatedID=(0,import_uid_library.uid)(newToast),timeOutId;newToast.dismissAfter!=null&&Number.isInteger(newToast.dismissAfter)&&(timeOutId=window.setTimeout(pop,newToast.dismissAfter,newToast.id||generatedID));let existingToasts=toasts.map(toast=>{let tmpToast=toast;return tmpToast.setFocus=!1,tmpToast});setToasts([__spreadValues({id:generatedID,timeOutId,setFocus:!0},newToast),...existingToasts])},pop}};0&&(module.exports={AnimatedToast,Toast,ToastContainer,Toaster,useToaster});
"use strict";var __create=Object.create;var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{AnimatedToast:()=>AnimatedToast,Toast:()=>Toast,ToastContainer:()=>ToastContainer,Toaster:()=>Toaster,useToaster:()=>useToaster});module.exports=__toCommonJS(src_exports);var React6=__toESM(require("react")),import_button=require("@twilio-paste/button"),import_CloseIcon=require("@twilio-paste/icons/cjs/CloseIcon"),import_ErrorIcon=require("@twilio-paste/icons/cjs/ErrorIcon"),import_NeutralIcon=require("@twilio-paste/icons/cjs/NeutralIcon"),import_SuccessIcon=require("@twilio-paste/icons/cjs/SuccessIcon"),import_WarningIcon=require("@twilio-paste/icons/cjs/WarningIcon"),import_media_object=require("@twilio-paste/media-object");var React=__toESM(require("react")),import_prop_types=require("prop-types"),import_box=require("@twilio-paste/box"),__defProp2=Object.defineProperty,__defProps2=Object.defineProperties,__getOwnPropDescs2=Object.getOwnPropertyDescriptors,__getOwnPropSymbols2=Object.getOwnPropertySymbols,__hasOwnProp2=Object.prototype.hasOwnProperty,__propIsEnum2=Object.prototype.propertyIsEnumerable,__defNormalProp2=(obj,key,value)=>key in obj?__defProp2(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues2=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp2.call(b,prop)&&__defNormalProp2(a,prop,b[prop]);if(__getOwnPropSymbols2)for(var prop of __getOwnPropSymbols2(b))__propIsEnum2.call(b,prop)&&__defNormalProp2(a,prop,b[prop]);return a},__spreadProps2=(a,b)=>__defProps2(a,__getOwnPropDescs2(b)),__objRest2=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp2.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols2)for(var prop of __getOwnPropSymbols2(source))exclude.indexOf(prop)<0&&__propIsEnum2.call(source,prop)&&(target[prop]=source[prop]);return target},ScreenReaderOnly=React.forwardRef((_a,ref)=>{var _b=_a,{as="span",children}=_b,props=__objRest2(_b,["as","children"]);return React.createElement(import_box.Box,__spreadProps2(__spreadValues2({},props),{as,border:"none",clip:"rect(0 0 0 0)",height:"1px",margin:"spaceNegative10",overflow:"hidden",padding:"space0",position:"absolute",ref,textTransform:"none",whiteSpace:"nowrap",width:"1px"}),children)});ScreenReaderOnly.displayName="ScreenReaderOnly";var React2=__toESM(require("react")),import_box2=require("@twilio-paste/box");var import_prop_types2=__toESM(require("prop-types"));var ToastVariantObject={ERROR:"error",NEUTRAL:"neutral",SUCCESS:"success",WARNING:"warning"};var ToastPropTypes={children:import_prop_types2.default.node.isRequired,onDismiss:import_prop_types2.default.func,variant:import_prop_types2.default.oneOf(["error","neutral","success","warning"]),i18nDismissLabel:import_prop_types2.default.string,i18nErrorLabel:import_prop_types2.default.string,i18nNeutralLabel:import_prop_types2.default.string,i18nSuccessLabel:import_prop_types2.default.string,i18nWarningLabel:import_prop_types2.default.string},ToastPortalPropTypes={children:import_prop_types2.default.node.isRequired,__console_patch:import_prop_types2.default.bool},ToastContainerPropTypes={children:import_prop_types2.default.node.isRequired,__console_patch:import_prop_types2.default.bool},ToasterPropTypes={toasts:import_prop_types2.default.arrayOf(import_prop_types2.default.shape({id:import_prop_types2.default.string.isRequired,message:import_prop_types2.default.node.isRequired,setFocus:import_prop_types2.default.bool,variant:import_prop_types2.default.oneOf(Object.values(ToastVariantObject)).isRequired})).isRequired,pop:import_prop_types2.default.func.isRequired,__console_patch:import_prop_types2.default.bool};var ErrorToast=React2.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React2.createElement(import_box2.Box,__spreadProps(__spreadValues({},(0,import_box2.safelySpreadBoxProps)(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderErrorWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});ErrorToast.displayName="ErrorToast";ErrorToast.propTypes=ToastPropTypes;var React3=__toESM(require("react")),import_box3=require("@twilio-paste/box");var NeutralToast=React3.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React3.createElement(import_box3.Box,__spreadProps(__spreadValues({},(0,import_box3.safelySpreadBoxProps)(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderNeutralWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});NeutralToast.displayName="NeutralToast";NeutralToast.propTypes=ToastPropTypes;var React4=__toESM(require("react")),import_box4=require("@twilio-paste/box");var SuccessToast=React4.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React4.createElement(import_box4.Box,__spreadProps(__spreadValues({},(0,import_box4.safelySpreadBoxProps)(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderSuccessWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});SuccessToast.displayName="SuccessToast";SuccessToast.propTypes=ToastPropTypes;var React5=__toESM(require("react")),import_box5=require("@twilio-paste/box");var WarningToast=React5.forwardRef((_a,ref)=>{var _b=_a,{element="TOAST",variant}=_b,props=__objRest(_b,["element","variant"]);return React5.createElement(import_box5.Box,__spreadProps(__spreadValues({},(0,import_box5.safelySpreadBoxProps)(props)),{ref,backgroundColor:"colorBackgroundBody",borderColor:"colorBorderWeaker",borderRadius:"borderRadius20",borderStyle:"solid",borderWidth:"borderWidth10",borderLeftWidth:"borderWidth30",borderLeftColor:"colorBorderWarningWeak",boxShadow:"shadowHigh",element,padding:"space60",variant,width:"size40"}),props.children)});WarningToast.displayName="WarningToast";WarningToast.propTypes=ToastPropTypes;var ToastComponentVariants={error:ErrorToast,neutral:NeutralToast,success:SuccessToast,warning:WarningToast},renderToastIcon=(variant,title,element)=>{switch(variant){case ToastVariantObject.ERROR:return React6.createElement(import_ErrorIcon.ErrorIcon,{color:"colorTextIconError",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.SUCCESS:return React6.createElement(import_SuccessIcon.SuccessIcon,{color:"colorTextIconSuccess",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.WARNING:return React6.createElement(import_WarningIcon.WarningIcon,{color:"colorTextIconWarning",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"});case ToastVariantObject.NEUTRAL:default:return React6.createElement(import_NeutralIcon.NeutralIcon,{color:"colorTextIconNeutral",decorative:!1,title,element:`${element}_ICON`,size:"sizeIcon20"})}},Toast=React6.forwardRef((_a,ref)=>{var _b=_a,{children,onDismiss,variant="neutral",element="TOAST",setFocus,i18nDismissLabel="Dismiss toast",i18nErrorLabel="(error)",i18nNeutralLabel="(information)",i18nSuccessLabel="(success)",i18nWarningLabel="(warning)"}=_b,props=__objRest(_b,["children","onDismiss","variant","element","setFocus","i18nDismissLabel","i18nErrorLabel","i18nNeutralLabel","i18nSuccessLabel","i18nWarningLabel"]);let ToastComponent=ToastComponentVariants[variant],buttonRef=React6.useRef(null);React6.useEffect(()=>{setFocus&&buttonRef.current&&buttonRef.current.focus({preventScroll:!0})},[setFocus]);let i18nVariants={error:i18nErrorLabel,neutral:i18nNeutralLabel,success:i18nSuccessLabel,warning:i18nWarningLabel};return React6.createElement(ToastComponent,__spreadValues({role:"status",variant,element,ref},props),React6.createElement(import_media_object.MediaObject,{as:"div"},React6.createElement(import_media_object.MediaFigure,{as:"div",spacing:"space60"},renderToastIcon(variant,i18nVariants[variant],element)),React6.createElement(import_media_object.MediaBody,{as:"div"},children),onDismiss&&typeof onDismiss=="function"&&React6.createElement(import_media_object.MediaFigure,{align:"end",spacing:"space40"},React6.createElement(import_button.Button,{onClick:onDismiss,variant:"secondary_icon",ref:buttonRef,size:"reset",element:`${element}_CLOSE_BUTTON`},React6.createElement(import_CloseIcon.CloseIcon,{decorative:!0,size:"sizeIcon20",element:`${element}_CLOSE_ICON`}),React6.createElement(ScreenReaderOnly,null,i18nDismissLabel)))))});Toast.displayName="Toast";Toast.propTypes=ToastPropTypes;var React8=__toESM(require("react")),import_stack=require("@twilio-paste/stack");var React7=__toESM(require("react")),import_theme=require("@twilio-paste/theme"),import_reakit_library=require("@twilio-paste/reakit-library"),import_box6=require("@twilio-paste/box");var ToastPortal=React7.forwardRef((_a,ref)=>{var _b=_a,{children,__console_patch}=_b,props=__objRest(_b,["children","__console_patch"]);return React7.createElement(import_reakit_library.Portal,null,React7.createElement(import_theme.StyledBase,null,React7.createElement(import_box6.Box,__spreadProps(__spreadValues({},(0,import_box6.safelySpreadBoxProps)(props)),{position:"fixed",right:"space40",top:"space90",zIndex:"zIndex90",ref,style:__console_patch?{zIndex:1999}:void 0}),children)))});ToastPortal.displayName="ToastPortal";var ToastContainer=React8.forwardRef((_a,ref)=>{var _b=_a,{children}=_b,props=__objRest(_b,["children"]);return React8.createElement(ToastPortal,__spreadValues({},props),React8.createElement(import_stack.Stack,{orientation:"vertical",spacing:"space40",ref},children))});ToastContainer.displayName="ToastContainer";ToastContainer.propTypes=ToastContainerPropTypes;var React9=__toESM(require("react")),import_animation_library=require("@twilio-paste/animation-library"),import_theme2=require("@twilio-paste/theme"),import_box7=require("@twilio-paste/box");var AnimatedToast=(0,import_animation_library.animated)(import_box7.Box),Toaster=_a=>{var _b=_a,{toasts,pop}=_b,props=__objRest(_b,["toasts","pop"]);let prefersReducedMotion=(0,import_animation_library.useReducedMotion)(),[refMap]=React9.useState(()=>new WeakMap),[returnTarget,setReturnTarget]=React9.useState({trigger:null}),theme=(0,import_theme2.useTheme)(),transitions=(0,import_animation_library.useTransition)(toasts,{from:{marginBottom:"0rem",opacity:0,transform:"translateX(100%) scale(1)",height:prefersReducedMotion?"auto":0},enter:prefersReducedMotion?{marginBottom:theme.space.space40,opacity:1,transform:"translateX(0px) scale(1)"}:item=>async next=>{await next({marginBottom:theme.space.space40,opacity:1,transform:"translateX(0px) scale(1)",height:refMap.get(item).offsetHeight})},leave:{marginBottom:"0rem",opacity:0,transform:"translateX(0px) scale(0.8)",height:prefersReducedMotion?"auto":0},config:{mass:1,tension:150,friction:20}}),clearReturnTarget=React9.useCallback(()=>{setReturnTarget({trigger:null})},[returnTarget]);return React9.useEffect(()=>{returnTarget.trigger!=null&&toasts.length===0&&(returnTarget.trigger.focus(),clearReturnTarget())},[toasts]),React9.createElement(ToastPortal,__spreadValues({},props),transitions((styles,item,state,index)=>React9.createElement(AnimatedToast,{as:"div",key:state.key,style:styles},React9.createElement(Toast,__spreadProps(__spreadValues({key:item.id},item),{onDismiss:()=>{item.onDismiss!=null&&item.onDismiss(),pop(item.id)},ref:ref=>{ref!=null&&refMap.set(item,ref)},setFocus:index===0,onFocus:e=>{e.relatedTarget&&!returnTarget.trigger&&setReturnTarget({trigger:e.relatedTarget})}}),item.message))))};Toaster.displayName="Toaster";var React10=__toESM(require("react")),import_uid_library=require("@twilio-paste/uid-library");var useToaster=()=>{let isMounted=React10.useRef(null),[toasts,setToasts]=React10.useState([]);React10.useEffect(()=>(isMounted.current=!0,()=>{isMounted.current=!1,toasts.forEach(toast=>{toast.timeOutId&&window.clearTimeout(toast.timeOutId)})}),[]);let pop=id=>{!isMounted.current||setToasts(currentToasts=>currentToasts.filter(toast=>(toast.id===id&&(toast.timeOutId&&window.clearTimeout(toast.timeOutId),toast.onDismiss&&toast.onDismiss()),toast.id!==id)))};return{toasts,push:newToast=>{if(!isMounted.current)return;let generatedID=(0,import_uid_library.uid)(newToast),timeOutId;newToast.dismissAfter!=null&&Number.isInteger(newToast.dismissAfter)&&(timeOutId=window.setTimeout(pop,newToast.dismissAfter,newToast.id||generatedID));let existingToasts=toasts.map(toast=>{let tmpToast=toast;return tmpToast.setFocus=!1,tmpToast});setToasts([__spreadValues({id:generatedID,timeOutId,setFocus:!0},newToast),...existingToasts])},pop}};0&&(module.exports={AnimatedToast,Toast,ToastContainer,Toaster,useToaster});

8

dist/propTypes.d.ts

@@ -1,4 +0,4 @@

import * as PropTypes from 'prop-types';
import PropTypes from 'prop-types';
export declare const ToastPropTypes: {
children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
onDismiss: PropTypes.Requireable<(...args: any[]) => any>;

@@ -13,7 +13,7 @@ variant: any;

export declare const ToastPortalPropTypes: {
children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
__console_patch: PropTypes.Requireable<boolean>;
};
export declare const ToastContainerPropTypes: {
children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
__console_patch: PropTypes.Requireable<boolean>;

@@ -20,0 +20,0 @@ };

2

dist/types.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />

import type { ToastVariantObject } from './constants';
export declare type ToastVariants = ValueOf<typeof ToastVariantObject>;
export type ToastVariants = ValueOf<typeof ToastVariantObject>;
export interface ToastProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BoxProps, 'element'> {

@@ -8,0 +8,0 @@ children: NonNullable<React.ReactNode>;

16

package.json
{
"name": "@twilio-paste/toast",
"version": "9.0.1",
"version": "9.0.2",
"category": "feedback",

@@ -48,11 +48,11 @@ "status": "production",

"@twilio-paste/animation-library": "^0.3.9",
"@twilio-paste/box": "^7.1.1",
"@twilio-paste/button": "^11.1.4",
"@twilio-paste/design-tokens": "^8.1.2",
"@twilio-paste/box": "^7.1.2",
"@twilio-paste/button": "^11.1.6",
"@twilio-paste/design-tokens": "^8.3.0",
"@twilio-paste/icons": "^9.3.1",
"@twilio-paste/media-object": "^7.0.1",
"@twilio-paste/media-object": "^7.0.2",
"@twilio-paste/reakit-library": "^0.8.7",
"@twilio-paste/spinner": "^11.0.1",
"@twilio-paste/stack": "^5.0.1",
"@twilio-paste/style-props": "^6.1.1",
"@twilio-paste/spinner": "^11.0.2",
"@twilio-paste/stack": "^5.0.2",
"@twilio-paste/style-props": "^6.1.2",
"@twilio-paste/styling-library": "^1.0.3",

@@ -59,0 +59,0 @@ "@twilio-paste/theme": "^8.0.3",

dist/propTypes.d.ts.map

Sorry, the diff of this file is not supported yet

dist/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

dist/types.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc