@canonical/react-components 2.2.3 → 2.3.0

package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.d.ts

@@ -0,0 +1,74 @@
+import type { NotificationAction, NotificationType } from "../../NotificationProvider";
+import type { ValueOf } from "../../../types";
+import { NotificationSeverity } from "../../Notifications";
+import type { FC, PropsWithChildren, ReactNode } from "react";
+export type ToastNotificationType = NotificationType & {
+    timestamp?: ReactNode;
+    id: string;
+};
+interface ToastNotificationHelper {
+    notifications: ToastNotificationType[];
+    success: (message: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
+    info: (message: ReactNode, title?: string) => ToastNotificationType;
+    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
+    clear: (notification?: ToastNotificationType[]) => void;
+    toggleListView: () => void;
+    isListView: boolean;
+    countBySeverity: GroupedNotificationCount;
+}
+export type GroupedNotificationCount = {
+    [key in ValueOf<typeof NotificationSeverity>]?: number;
+};
+/**
+ * The `ToastNotificationProvider` can be used to manage toast notifications.
+
+Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
+Notifications automatically dismiss after a delay unless manually dismissed or expanded.
+
+| **Values**                        | **Description**                                                                 |
+|----------------------------------|---------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions.                          |
+| `toastNotify.info()`             | Displays an info toast. Optionally accepts a custom title.                     |
+| `toastNotify.failure()`          | Displays a failure toast with an error and optional message or actions.        |
+| `toastNotify.clear()`            | Clears specific toasts, or all toasts if none are specified.                   |
+| `toastNotify.toggleListView()`   | Toggles the notification list view open or closed.                             |
+| `toastNotify.countBySeverity`    | Returns the count of notifications grouped by severity (e.g., success, info).  |
+
+Some example usages:
+
+1. **Show a success toast:**
+```
+toastNotify.success("Your changes have been saved.");
+toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+2. **Show an info toast:**
+```
+toastNotify.info("Your changes are syncing in the background.");
+toastNotify.info("Your changes are syncing in the background.", "Syncing");
+```
+
+3. **Show a failure toast:**
+```
+toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
+toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
+```
+4. **Clear notifications:**
+```
+toastNotify.clear(); // clears all toast notifications
+toastNotify.clear([notificationId]); // clears specific toast notifications
+```
+5. **Toggle the notification list view:**
+```
+toastNotify.toggleListView();
+```
+6. **Get the count of notifications by severity:**
+```
+const count = toastNotify.countBySeverity;
+console.log(count.positive);
+```
+
+Alternatively, you can use the `ToastNotification` and `ToastNotificationList` components directly, without using the provider.
+*/
+declare const ToastNotificationProvider: FC<PropsWithChildren>;
+export default ToastNotificationProvider;
+export declare const useToastNotification: () => ToastNotificationHelper;

package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.js

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToastNotification = exports.default = void 0;
+var _NotificationProvider = require("../../NotificationProvider");
+var _ = require("./..");
+var _ToastNotification = _interopRequireDefault(require("./ToastNotification"));
+var _ToastNotificationList = _interopRequireDefault(require("./ToastNotificationList"));
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const HIDE_NOTIFICATION_DELAY = 5000;
+const initialNotification = {
+  id: "",
+  message: "",
+  type: "positive"
+};
+const ToastNotificationContext = /*#__PURE__*/(0, _react.createContext)({
+  /** List of all active toast notifications */
+  notifications: [],
+  /** Show a success toast. Optionally pass actions. */
+  success: () => initialNotification,
+  /** Show an info toast. Optionally pass a custom title. */
+  info: () => initialNotification,
+  /** Show a failure toast with an error and optional message/actions. */
+  failure: () => initialNotification,
+  /** Clear one or more specific toasts, or all if none provided. */
+  clear: () => null,
+  /** Toggle between single toast view and list view. */
+  toggleListView: () => null,
+  /** Whether the notification list view is currently open. */
+  isListView: false,
+  /** Grouped count of notifications by severity (positive, info, etc.). */
+  countBySeverity: {}
+});
+
+/**
+ * The `ToastNotificationProvider` can be used to manage toast notifications.
+
+Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
+Notifications automatically dismiss after a delay unless manually dismissed or expanded.
+
+| **Values**                        | **Description**                                                                 |
+|----------------------------------|---------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions.                          |
+| `toastNotify.info()`             | Displays an info toast. Optionally accepts a custom title.                     |
+| `toastNotify.failure()`          | Displays a failure toast with an error and optional message or actions.        |
+| `toastNotify.clear()`            | Clears specific toasts, or all toasts if none are specified.                   |
+| `toastNotify.toggleListView()`   | Toggles the notification list view open or closed.                             |
+| `toastNotify.countBySeverity`    | Returns the count of notifications grouped by severity (e.g., success, info).  |
+
+Some example usages:
+
+1. **Show a success toast:**
+```
+toastNotify.success("Your changes have been saved.");
+toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+2. **Show an info toast:**
+```
+toastNotify.info("Your changes are syncing in the background.");
+toastNotify.info("Your changes are syncing in the background.", "Syncing");
+```
+
+3. **Show a failure toast:**
+```
+toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
+toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
+```
+4. **Clear notifications:**
+```
+toastNotify.clear(); // clears all toast notifications
+toastNotify.clear([notificationId]); // clears specific toast notifications
+```
+5. **Toggle the notification list view:**
+```
+toastNotify.toggleListView();
+```
+6. **Get the count of notifications by severity:**
+```
+const count = toastNotify.countBySeverity;
+console.log(count.positive);
+```
+
+Alternatively, you can use the `ToastNotification` and `ToastNotificationList` components directly, without using the provider.
+*/
+
+const ToastNotificationProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  const [notifications, setNotifications] = (0, _react.useState)([]);
+  const [showList, setShowList] = (0, _react.useState)(false);
+  const [notificationTimer, setNotificationTimer] = (0, _react.useState)(null);
+
+  // cleanup on timer if unmounted
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (notificationTimer) {
+        clearTimeout(notificationTimer);
+      }
+    };
+  }, []);
+  const showNotificationWithDelay = () => {
+    setNotificationTimer(prevTimer => {
+      if (prevTimer) {
+        clearTimeout(prevTimer);
+      }
+      if (!showList) {
+        return setTimeout(() => {
+          setNotificationTimer(null);
+        }, HIDE_NOTIFICATION_DELAY);
+      }
+      return null;
+    });
+  };
+  const clearNotificationTimer = () => {
+    setNotificationTimer(prevTimer => {
+      if (prevTimer) {
+        clearTimeout(prevTimer);
+      }
+      return null;
+    });
+  };
+  const addNotification = notification => {
+    const notificationToAdd = {
+      ...notification,
+      timestamp: new Date().toLocaleString(),
+      id: Date.now().toString() + (Math.random() + 1).toString(36).substring(7)
+    };
+    setNotifications(prev => {
+      return [...prev, notificationToAdd];
+    });
+    showNotificationWithDelay();
+    return notificationToAdd;
+  };
+  const clear = notifications => {
+    if (!notifications) {
+      setNotifications([]);
+      setShowList(false);
+      clearNotificationTimer();
+      return;
+    }
+    setNotifications(prev => {
+      const removeIdLookup = new Set(notifications);
+      const newNotifications = prev.filter(item => !removeIdLookup.has(item));
+
+      // if we are clearing the last notification from an expanded list,
+      // then we want to collapse the list as well if all notifications has been cleared
+      if (!newNotifications.length) {
+        setShowList(false);
+      }
+      return newNotifications;
+    });
+    clearNotificationTimer();
+  };
+  const toggleListView = () => {
+    clearNotificationTimer();
+    setShowList(prev => !prev);
+  };
+  const countBySeverity = {
+    positive: 0,
+    negative: 0,
+    caution: 0,
+    information: 0
+  };
+  notifications.forEach(notification => {
+    countBySeverity[notification.type] += 1;
+  });
+  const helper = {
+    notifications,
+    failure: (title, error, message, actions) => addNotification((0, _NotificationProvider.failure)(title, error, message, actions)),
+    info: (message, title) => addNotification((0, _NotificationProvider.info)(message, title)),
+    success: (message, actions) => addNotification({
+      message,
+      actions,
+      type: _.NotificationSeverity.POSITIVE
+    }),
+    clear,
+    toggleListView,
+    isListView: showList,
+    countBySeverity
+  };
+  const latestNotification = notifications[notifications.length - 1];
+  const hasNotifications = !!notifications.length;
+  const showNotification = hasNotifications && !showList && notificationTimer;
+  const showNotificationList = hasNotifications && showList;
+  return /*#__PURE__*/_react.default.createElement(ToastNotificationContext.Provider, {
+    value: helper
+  }, children, /*#__PURE__*/_react.default.createElement(_ToastNotification.default, {
+    notification: latestNotification,
+    onDismiss: clear,
+    show: !!showNotification
+  }), /*#__PURE__*/_react.default.createElement(_ToastNotificationList.default, {
+    notifications: notifications,
+    groupedCount: countBySeverity,
+    show: showNotificationList,
+    onDismiss: clear
+  }));
+};
+var _default = exports.default = ToastNotificationProvider;
+const useToastNotification = () => (0, _react.useContext)(ToastNotificationContext);
+exports.useToastNotification = useToastNotification;

package/dist/components/Notifications/ToastNotification/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ToastNotificationProvider } from "./ToastNotificationProvider";
+export { useToastNotification } from "./ToastNotificationProvider";
+export type { ToastNotificationType } from "./ToastNotificationProvider";
+export { default as ToastNotification } from "./ToastNotification";
+export { default as ToastNotificationList } from "./ToastNotificationList";

package/dist/components/Notifications/ToastNotification/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToastNotification", {
+  enumerable: true,
+  get: function () {
+    return _ToastNotification.default;
+  }
+});
+Object.defineProperty(exports, "ToastNotificationList", {
+  enumerable: true,
+  get: function () {
+    return _ToastNotificationList.default;
+  }
+});
+Object.defineProperty(exports, "ToastNotificationProvider", {
+  enumerable: true,
+  get: function () {
+    return _ToastNotificationProvider.default;
+  }
+});
+Object.defineProperty(exports, "useToastNotification", {
+  enumerable: true,
+  get: function () {
+    return _ToastNotificationProvider.useToastNotification;
+  }
+});
+var _ToastNotificationProvider = _interopRequireWildcard(require("./ToastNotificationProvider"));
+var _ToastNotification = _interopRequireDefault(require("./ToastNotification"));
+var _ToastNotificationList = _interopRequireDefault(require("./ToastNotificationList"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }

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

@@ -0,0 +1,4 @@
+export { default, NotificationSeverity } from "./Notification";
+export type { NotificationProps } from "./Notification";
+export type { ToastNotificationType } from "./ToastNotification";
+export { ToastNotification, ToastNotificationList, useToastNotification, ToastNotificationProvider, } from "./ToastNotification";

package/dist/components/Notifications/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NotificationSeverity", {
+  enumerable: true,
+  get: function () {
+    return _Notification.NotificationSeverity;
+  }
+});
+Object.defineProperty(exports, "ToastNotification", {
+  enumerable: true,
+  get: function () {
+    return _ToastNotification.ToastNotification;
+  }
+});
+Object.defineProperty(exports, "ToastNotificationList", {
+  enumerable: true,
+  get: function () {
+    return _ToastNotification.ToastNotificationList;
+  }
+});
+Object.defineProperty(exports, "ToastNotificationProvider", {
+  enumerable: true,
+  get: function () {
+    return _ToastNotification.ToastNotificationProvider;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Notification.default;
+  }
+});
+Object.defineProperty(exports, "useToastNotification", {
+  enumerable: true,
+  get: function () {
+    return _ToastNotification.useToastNotification;
+  }
+});
+var _Notification = _interopRequireWildcard(require("./Notification"));
+var _ToastNotification = require("./ToastNotification");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }

package/dist/components/Slider/Slider.js

@@ -75,6 +75,7 @@ const Slider = _ref => {
     style: style,
     type: "range"
   }, inputProps)), showInput && /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-label": typeof label === "string" ? label : undefined,
     "aria-describedby": help ? helpId : null,
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,

package/dist/esm/components/NotificationProvider/NotificationProvider.js

@@ -1,7 +1,8 @@
 import React, { createContext, useContext, useEffect, useRef, useState } from "react";
 import fastDeepEqual from "fast-deep-equal";
 import { info as _info, failure as _failure, success as _success, queue } from "./messageBuilder";
-import Notification, { DefaultTitles } from "../Notification/Notification";
+import Notification from "../Notifications";
+import { DefaultTitles } from "../Notifications/Notification/Notification";
 var NotifyContext = /*#__PURE__*/createContext({
   notification: null,
   clear: () => undefined,

package/dist/esm/components/NotificationProvider/messageBuilder.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { NotificationSeverity } from "../Notification";
+import { NotificationSeverity } from "../Notifications";
 export var queue = notification => {
   return {
     state: {

package/dist/esm/components/NotificationProvider/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ValueOf } from "../../types";
-import { NotificationSeverity } from "../Notification";
+import { NotificationSeverity } from "../Notifications";
 export interface NotifyProviderProps {
     state?: {
         queuedNotification: NotificationType | null;

package/dist/esm/components/{Notification → Notifications/Notification}/Notification.d.ts

@@ -1,6 +1,6 @@
 import React, { ElementType } from "react";
 import type { HTMLProps, ReactNode } from "react";
-import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
+import type { ClassName, PropsWithSpread, ValueOf } from "../../../types";
 export declare enum Label {
     Close = "Close notification"
 }

package/dist/esm/components/{Notification → Notifications/Notification}/Notification.js

@@ -4,8 +4,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
-import Button, { ButtonAppearance } from "../Button";
-import { IS_DEV, isReactNode } from "../../utils";
+import Button, { ButtonAppearance } from "../../Button";
+import { IS_DEV, isReactNode } from "../../../utils";
 export var Label = /*#__PURE__*/function (Label) {
   Label["Close"] = "Close notification";
   return Label;

package/dist/esm/components/Notifications/Notification/Notification.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Notifications/ToastNotification/Animate.d.ts

@@ -0,0 +1,11 @@
+import type { FC, PropsWithChildren } from "react";
+interface Props {
+    show: boolean;
+    from: Keyframe;
+    to: Keyframe;
+    exitAnimation?: Keyframe[];
+    options?: KeyframeAnimationOptions;
+    className?: string;
+}
+declare const Animate: FC<PropsWithChildren<Props>>;
+export default Animate;

package/dist/esm/components/Notifications/ToastNotification/Animate.js

@@ -0,0 +1,51 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import React from "react";
+import { usePrefersReducedMotion } from "../../../hooks";
+var Animate = _ref => {
+  var {
+    show,
+    children,
+    from,
+    to,
+    exitAnimation,
+    options = {
+      duration: 500,
+      fill: "forwards"
+    },
+    className
+  } = _ref;
+  var containerRef = useRef(null);
+  var preferReducedMotion = usePrefersReducedMotion();
+
+  // This state is used so that we trigger a extra render cycle
+  // to animate the child component when it is being unmounted
+  var [removeState, setRemove] = useState(!show);
+  useLayoutEffect(() => {
+    var element = containerRef.current;
+    if (show) {
+      setRemove(false);
+      if (!element || preferReducedMotion) return;
+      element.animate([from, to], options);
+    } else {
+      if (!element) return;
+      if (preferReducedMotion) {
+        setRemove(true);
+        return;
+      }
+      var animation = element.animate(exitAnimation || [to, from], options);
+      animation.onfinish = () => {
+        setRemove(true);
+        // This is important, else the next render cycle due to setRemove will cause flickering effect
+        element.style.display = "none";
+      };
+    }
+  }, [show, removeState]);
+  if (removeState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: className
+  }, children);
+};
+export default Animate;

package/dist/esm/components/Notifications/ToastNotification/Toast.scss

@@ -0,0 +1,116 @@
+@import "vanilla-framework/scss/settings";
+@import "vanilla-framework/scss/build";
+
+.toast-animate {
+  position: relative;
+  z-index: 101;
+}
+
+.toast-notification,
+.toast-notification-list {
+  bottom: 3.5rem;
+  margin: 0 1.5rem;
+  position: absolute;
+  right: 0;
+
+  @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
+    width: 500px;
+  }
+
+  @media screen and (min-width: $breakpoint-large) {
+    width: 600px;
+  }
+}
+
+.toast-notification {
+  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 15%);
+  overflow: hidden;
+  z-index: 101;
+
+  @media screen and (max-width: $breakpoint-small) {
+    left: 0;
+    margin: 1.5rem auto;
+    max-width: 400px;
+    width: 95vw;
+  }
+}
+
+.toast-notification-list {
+  background-color: white;
+  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 22%);
+  max-height: calc(100vh - 4.5rem);
+  overflow: auto;
+  padding: 0 0.5rem;
+  z-index: 102;
+
+  .individual-notification {
+    margin: 0.5rem 0;
+    overflow: hidden;
+  }
+
+  .dismiss {
+    align-items: center;
+    background-color: white;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    padding-left: 0.8rem;
+    position: sticky;
+    z-index: 10;
+
+    .dismiss-button {
+      align-items: center;
+      display: flex;
+
+      .dismiss-text {
+        align-items: center;
+        display: flex;
+        gap: $sph--x-small;
+      }
+    }
+
+    .filters {
+      display: flex;
+
+      .filter-button {
+        align-items: center;
+        border: none;
+        display: flex;
+        gap: $sph--x-small;
+        justify-content: center;
+        margin-right: $sph--small !important;
+        padding: calc(0.4rem - 1px);
+
+        /* stylelint-disable max-nesting-depth */
+        /* stylelint-disable-next-line selector-max-type */
+        span {
+          padding: 0;
+          text-align: center;
+        }
+
+        /* stylelint-disable-next-line selector-class-pattern */
+        .p-icon--info--notification {
+          @extend %icon;
+          @include vf-icon-info-coloured-themed;
+        }
+        /* stylelint-enable max-nesting-depth */
+      }
+    }
+
+    @media screen and (max-width: $breakpoint-small) {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-small) {
+    bottom: 2rem;
+    left: 0;
+    margin: 1.5rem auto;
+    max-width: 400px;
+    width: 95vw;
+  }
+}

package/dist/esm/components/Notifications/ToastNotification/ToastNotification.d.ts

@@ -0,0 +1,10 @@
+import type { ToastNotificationType } from "./ToastNotificationProvider";
+import type { FC } from "react";
+import "./Toast.scss";
+interface Props {
+    notification: ToastNotificationType;
+    onDismiss: (notification?: ToastNotificationType[]) => void;
+    show: boolean;
+}
+declare const ToastNotification: FC<Props>;
+export default ToastNotification;