@algolia/satellite 1.0.0-beta.175 → 1.0.0-beta.177

package/cjs/Stepper/utils.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStepIndices = void 0;
+var findPreviousStep = function findPreviousStep(steps, activeStep, loop) {
+  var stepCount = steps.length;
+  var startIndex = activeStep - 1;
+  if (loop) {
+    startIndex = (startIndex + stepCount) % stepCount;
+  }
+  for (var i = startIndex; i >= 0; i--) {
+    if (!steps[i].disabled) {
+      return i;
+    }
+  }
+  return -1;
+};
+var findNextStep = function findNextStep(steps, activeStep, loop) {
+  var stepCount = steps.length;
+  var endIndex = stepCount;
+  if (loop) {
+    endIndex = activeStep + stepCount;
+  }
+  for (var i = activeStep + 1; i < endIndex; i++) {
+    if (!steps[i % stepCount].disabled) {
+      return i % stepCount;
+    }
+  }
+  return -1;
+};
+var findFirstOrLastStep = function findFirstOrLastStep(steps, reverse) {
+  var stepCount = steps.length;
+  for (var i = reverse ? stepCount - 1 : 0; i >= 0 && i < stepCount; i += reverse ? -1 : 1) {
+    if (!steps[i].disabled) {
+      return i;
+    }
+  }
+  return -1;
+};
+var findFirstStep = function findFirstStep(steps) {
+  return findFirstOrLastStep(steps, false);
+};
+var findLastStep = function findLastStep(steps) {
+  return findFirstOrLastStep(steps, true);
+};
+
+/**
+ * Returns a tuple of functions that return the previous and next step indices.
+ */
+var useStepIndices = exports.useStepIndices = function useStepIndices(steps, activeStep) {
+  var loop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var getPreviousStep = function getPreviousStep() {
+    return findPreviousStep(steps, activeStep, loop);
+  };
+  var getNextStep = function getNextStep() {
+    return findNextStep(steps, activeStep, loop);
+  };
+  var getFirstStep = function getFirstStep() {
+    return findFirstStep(steps);
+  };
+  var getLastStep = function getLastStep() {
+    return findLastStep(steps);
+  };
+  return [getPreviousStep, getNextStep, getFirstStep, getLastStep, getPreviousStep() === -1, getNextStep() === -1];
+};

package/cjs/Toast/Toast.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes } from "react";
+import type { Notification } from "./types";
+export declare type ToastLocale = Notification["locale"];
+export declare type ToastProps = Omit<Notification, "id" | "content" | "autoDismissAfter"> & HTMLAttributes<HTMLElement>;
+export declare const Toast: FC<ToastProps>;
+export default Toast;

package/cjs/{Flag/Flag.js → Toast/Toast.js}

@@ -1,15 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Flag = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports["default"] = exports.Toast = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var ToastPrimitive = _interopRequireWildcard(require("@radix-ui/react-toast"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _react = require("react");
 var _reactFeather = require("react-feather");
 var _Button = require("../Button");
 var _Card = require("../Card");
@@ -18,10 +19,13 @@ var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _excluded = ["onDismiss", "title", "icon", "loading", "variant", "locale", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var DEFAULT_FLAG_LOCALE = {
+var DEFAULT_TOAST_LOCALE = {
   dismissText: "Dismiss"
 };
 var VARIANT_CLASSNAMES = {
@@ -40,13 +44,7 @@ var VARIANT_SPINNER_CLASSNAMES = {
   orange: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["border-orange-500"]))),
   red: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["border-red-500"])))
 };
-
-/**
- * The `Toast` component is a brief notification that providing timely feedback to users before vanishing after a short duration.
- *
- * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
- */
-var Flag = exports.Flag = function Flag(_ref) {
+var Toast = exports.Toast = function Toast(_ref) {
   var onDismiss = _ref.onDismiss,
     title = _ref.title,
     _ref$icon = _ref.icon,
@@ -55,68 +53,57 @@ var Flag = exports.Flag = function Flag(_ref) {
     loading = _ref$loading === void 0 ? false : _ref$loading,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "accent" : _ref$variant,
-    autoDismissAfter = _ref.autoDismissAfter,
     propsLocale = _ref.locale,
-    children = _ref.children;
-  var contextLocale = (0, _Satellite.useLocale)("flag");
-  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FLAG_LOCALE), contextLocale), propsLocale);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    hovered = _useState2[0],
-    setHovered = _useState2[1];
-  var onDismissRef = (0, _react.useRef)();
-  onDismissRef.current = onDismiss;
-  var hasTitle = title !== undefined;
-  (0, _react.useEffect)(function () {
-    if (!autoDismissAfter || hovered) return;
-    var timer = setTimeout(function () {
-      var _onDismissRef$current;
-      (_onDismissRef$current = onDismissRef.current) === null || _onDismissRef$current === void 0 || _onDismissRef$current.call(onDismissRef);
-    }, autoDismissAfter);
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, [autoDismissAfter, hovered]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("toast");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TOAST_LOCALE), contextLocale), propsLocale);
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof onDismiss === "undefined") {
+      console.warn("Toast: You should always include an `onDismiss` callback, this is crucial for users with limited abilities.");
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, _objectSpread(_objectSpread({}, rest), {}, {
     fullBleed: true,
-    className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flag shadow-z500"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["toast shadow-z500"]))),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["p-4 flex"]))),
-      onMouseEnter: function onMouseEnter() {
-        return setHovered(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setHovered(false);
-      },
       children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
-        size: 16,
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
+        size: 24,
+        className: VARIANT_SPINNER_CLASSNAMES[variant]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
-        size: 16
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-white rounded-full p-1"]))), VARIANT_CLASSNAMES[variant]),
+        size: 24
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4 min-w-0 break-words"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4 min-w-0 break-words"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]))),
-          children: [hasTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-            className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden"]))),
-            children: title
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["min-w-0"]))),
-            children: children
-          }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-            icon: _reactFeather.X,
-            title: locale.dismissText,
-            variant: "subtle",
-            size: "small",
-            onClick: onDismiss
+          className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToastPrimitive.Title, {
+            asChild: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+              className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden mt-0.5"]))),
+              children: title
+            })
+          }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastPrimitive.Close, {
+            asChild: true,
+            onClick: function onClick(e) {
+              // Prevent the default Radix handler so that `onDismiss` is not called twice in the `Toasts` component.
+              e.preventDefault();
+              onDismiss === null || onDismiss === void 0 || onDismiss();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+              icon: _reactFeather.X,
+              title: locale.dismissText,
+              variant: "subtle",
+              size: "small"
+            })
           })]
-        }), hasTitle && (0, _isRenderedChild["default"])(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 mt-2"]))),
+        }), (0, _isRenderedChild["default"])(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastPrimitive.Description, {
+          className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 mt-2"]))),
           children: children
         })]
       })]
     })
-  });
+  }));
 };
-var _default = exports["default"] = Flag;
+var _default = exports["default"] = Toast;

package/{esm/Flag/Flag.tailwind.d.ts → cjs/Toast/Toast.tailwind.d.ts}

@@ -1,5 +1,5 @@
-export = flagPlugin;
-declare const flagPlugin: {
+export = toastPlugin;
+declare const toastPlugin: {
     handler: import("tailwindcss/types/config").PluginCreator;
     config?: Partial<import("tailwindcss/types/config").Config> | undefined;
 };

package/cjs/{Flag/Flag.tailwind.js → Toast/Toast.tailwind.js}

@@ -2,33 +2,33 @@
 
 // @ts-check
 var plugin = require("tailwindcss/plugin");
-var flagPlugin = plugin(function (_ref) {
+var toastPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents;
   var TRANSITION_TIMEOUT = 500;
   addComponents({
-    ".flag": {
+    ".toast": {
       width: "320px"
     }
   });
   addComponents({
-    ".flags_item-enter": {
+    ".toasts_item-enter": {
       opacity: "0.01",
       transform: "translate(0, 80px)"
     },
-    ".flags_item-enter-active": {
+    ".toasts_item-enter-active": {
       opacity: "1",
       transform: "translate(0, 0)",
       transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
     },
-    ".flags_item-exit": {
+    ".toasts_item-exit": {
       opacity: "1",
       transform: "translate(0, 0)"
     },
-    ".flags_item-exit-active": {
+    ".toasts_item-exit-active": {
       opacity: "0.01",
       transform: "translate(0, 80px)",
       transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
     }
   });
 });
-module.exports = flagPlugin;
+module.exports = toastPlugin;

package/cjs/Toast/Toasts.d.ts

@@ -0,0 +1,21 @@
+import type { VFC } from "react";
+import type { Notification } from "./types";
+export declare type ToastsLocale = {
+    hotkeyLabel?: string;
+};
+export interface ToastsProps {
+    /**
+     * Define the array of notifications.
+     * @example [{ id: "test", title: "Test", content: "Example" }]
+     */
+    notifications: Notification[];
+    /** Define the `Toasts` locale. */
+    locale?: ToastsLocale;
+}
+/**
+ * Toasts are brief notifications that providing timely feedback to users before vanishing after a short duration.
+ *
+ * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
+ */
+export declare const Toasts: VFC<ToastsProps>;
+export default Toasts;

package/cjs/Toast/Toasts.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Toasts = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var ToastPrimitive = _interopRequireWildcard(require("@radix-ui/react-toast"));
+var _reactTransitionGroup = require("react-transition-group");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _prefersReducedMotion = require("../utils/prefersReducedMotion");
+var _Toast = _interopRequireDefault(require("./Toast"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _excluded = ["content", "id", "autoDismissAfter"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_TOASTS_LOCALE = {
+  hotkeyLabel: "Notifications"
+};
+var TRANSITION_TIMEOUT = 500;
+
+/**
+ * Toasts are brief notifications that providing timely feedback to users before vanishing after a short duration.
+ *
+ * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
+ */
+var Toasts = exports.Toasts = function Toasts(_ref) {
+  var _ref$notifications = _ref.notifications,
+    notifications = _ref$notifications === void 0 ? [] : _ref$notifications,
+    propsLocale = _ref.locale;
+  var contextLocale = (0, _Satellite.useLocale)("toasts");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TOASTS_LOCALE), contextLocale), propsLocale);
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  if (process.env.NODE_ENV !== "production") {
+    if (notifications.length > 3) {
+      console.warn("Toasts: You should not display more than 3 toasts simultaneously.");
+    }
+    if (notifications.find(function (n) {
+      return n.autoDismissAfter && n.autoDismissAfter < 2000;
+    })) {
+      console.warn("Toasts: You should not set `autoDismissAfter` to less than 2000 ms, even for brief messages.");
+    }
+  }
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToastPrimitive.Provider, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
+      component: null,
+      children: notifications.map(function (_ref2) {
+        var content = _ref2.content,
+          id = _ref2.id,
+          autoDismissAfter = _ref2.autoDismissAfter,
+          rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+          classNames: !_prefersReducedMotion.prefersReducedMotion ? {
+            enter: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toasts_item-enter"]))),
+            enterActive: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["toasts_item-enter-active"]))),
+            exit: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["toasts_item-exit"]))),
+            exitActive: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["toasts_item-exit-active"])))
+          } : {},
+          timeout: !_prefersReducedMotion.prefersReducedMotion ? TRANSITION_TIMEOUT : 0,
+          appear: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastPrimitive.Root, {
+            open: true,
+            onOpenChange: function onOpenChange(open) {
+              var _rest$onDismiss;
+              if (!open) (_rest$onDismiss = rest.onDismiss) === null || _rest$onDismiss === void 0 || _rest$onDismiss.call(rest);
+            },
+            onSwipeEnd: function onSwipeEnd(e) {
+              return e.preventDefault();
+            } // Prevent swipe gesture
+            ,
+            duration: autoDismissAfter || Infinity,
+            // Accessibility issue from Radix: `role="status"` is not allowed on a `li` element, as a workaround,
+            // we use it on the child.
+            // See https://github.com/radix-ui/primitives/issues/1750
+            role: "listitem",
+            "aria-live": undefined,
+            "aria-atomic": undefined,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast["default"], _objectSpread(_objectSpread({}, rest), {}, {
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: content
+            }))
+          })
+        }, id);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastPrimitive.Viewport, {
+      hotkey: ["metaKey", "F8"],
+      label: "".concat(locale.hotkeyLabel, " (CmdKey+F8/WinKey+F8)}"),
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4 gap-4"])))
+    })]
+  }));
+};
+var _default = exports["default"] = Toasts;

package/cjs/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Toast";
+export * from "./Toasts";
+export * from "./types";
+export { default } from "./Toast";

package/cjs/{Flag → Toast}/index.js

@@ -8,30 +8,30 @@ var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _Flag["default"];
+    return _Toast["default"];
   }
 });
-var _Flag = _interopRequireWildcard(require("./Flag"));
-Object.keys(_Flag).forEach(function (key) {
+var _Toast = _interopRequireWildcard(require("./Toast"));
+Object.keys(_Toast).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Flag[key]) return;
+  if (key in exports && exports[key] === _Toast[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Flag[key];
+      return _Toast[key];
     }
   });
 });
-var _Flags = require("./Flags");
-Object.keys(_Flags).forEach(function (key) {
+var _Toasts = require("./Toasts");
+Object.keys(_Toasts).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Flags[key]) return;
+  if (key in exports && exports[key] === _Toasts[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Flags[key];
+      return _Toasts[key];
     }
   });
 });

package/cjs/Toast/types.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { IconComponentType } from "../Icons";
+import type { ColorVariant } from "../types";
+export declare type Notification = {
+    /** Defines an unique ID for the `Toast`. */
+    id: string;
+    /** Defines the title for the `Toast`. */
+    title: string;
+    /** Defines the content for the `Toast`. */
+    content?: ReactNode;
+    /** Defines the icon for the `Toast`. */
+    icon?: IconComponentType;
+    /**
+     * Defines the color variant of the `Toast`.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Defines the color variant of the `Toast`.
+     * @default "blue"
+     */
+    variant?: ColorVariant;
+    /** Defines if and how long before the `Toast` should be dismissed (in ms). */
+    autoDismissAfter?: number;
+    /**
+     * Defines a function called when the `Toast` dismiss button is clicked or the `autoDismissAfter` time has elapsed.
+     * Dismiss button won't be rendered if absent.
+     */
+    onDismiss?: () => void;
+    /** Define locale for the `Toast`. */
+    locale?: {
+        dismissText?: string;
+    };
+};

package/cjs/Toast/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/index.d.ts

@@ -20,7 +20,6 @@ export * from "./Dropdown";
 export * from "./Dropzone";
 export * from "./EmptyState";
 export * from "./Field";
-export * from "./Flag";
 export * from "./FlexGrid";
 export * from "./HelpUnderline";
 export * from "./Icons";
@@ -42,11 +41,13 @@ export * from "./ScrollIndicator";
 export * from "./Select";
 export * from "./Separator";
 export * from "./Sidebar";
+export * from "./Stepper";
 export * from "./Switch";
 export * from "./Tables";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextArea";
 export * from "./TextWrap";
+export * from "./Toast";
 export * from "./Toggle";
 export * from "./Tooltip";

package/cjs/index.js

@@ -254,18 +254,6 @@ Object.keys(_Field).forEach(function (key) {
     }
   });
 });
-var _Flag = require("./Flag");
-Object.keys(_Flag).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Flag[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Flag[key];
-    }
-  });
-});
 var _FlexGrid = require("./FlexGrid");
 Object.keys(_FlexGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -518,6 +506,18 @@ Object.keys(_Sidebar).forEach(function (key) {
     }
   });
 });
+var _Stepper = require("./Stepper");
+Object.keys(_Stepper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Stepper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Stepper[key];
+    }
+  });
+});
 var _Switch = require("./Switch");
 Object.keys(_Switch).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -590,6 +590,18 @@ Object.keys(_TextWrap).forEach(function (key) {
     }
   });
 });
+var _Toast = require("./Toast");
+Object.keys(_Toast).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Toast[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Toast[key];
+    }
+  });
+});
 var _Toggle = require("./Toggle");
 Object.keys(_Toggle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/styles/tailwind.config.js

@@ -142,5 +142,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require("./base.tailwind"), require("../utilities/overlay.tailwind"), require("../utilities/utilities.tailwind"), require("../Typography/Typography.tailwind"), require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Separator/Separator.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
+  plugins: [require("./base.tailwind"), require("../utilities/overlay.tailwind"), require("../utilities/utilities.tailwind"), require("../Typography/Typography.tailwind"), require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Toast/Toast.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Separator/Separator.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
 };

package/cjs/types.d.ts

@@ -13,12 +13,12 @@ export declare type AtLeastOne<Type, Union = {
 export declare type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
     [Property in Key]-?: Type[Property];
 };
-declare type Without<Type, Union> = {
-    [Property in Exclude<keyof Type, keyof Union>]?: never;
-};
 /**
  * Makes two types mutually exclusive
  * https://stackoverflow.com/questions/42123407/does-typescript-support-mutually-exclusive-types
  */
+declare type Without<Type, Union> = {
+    [Property in Exclude<keyof Type, keyof Union>]?: never;
+};
 export declare type XOR<Type, Union> = Type | Union extends object ? (Without<Type, Union> & Union) | (Without<Union, Type> & Type) : Type | Union;
 export {};

package/cjs/utils/getTextFromReactNode.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns the text content of a React node.
+ */
+export declare const getTextFromReactNode: (node: React.ReactNode) => string;

package/cjs/utils/getTextFromReactNode.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextFromReactNode = void 0;
+var _react = require("react");
+/**
+ * Returns the text content of a React node.
+ */
+var getTextFromReactNode = exports.getTextFromReactNode = function getTextFromReactNode(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return node.toString();
+  if ( /*#__PURE__*/(0, _react.isValidElement)(node)) {
+    return _react.Children.toArray(node.props.children).map(function (child) {
+      return getTextFromReactNode(child);
+    }).join(" ");
+  }
+  return "";
+};