@canonical/react-components 2.10.0 → 2.12.0

package/dist/components/Chip/Chip.d.ts

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import type { MouseEvent, HTMLProps } from "react";
 import { ValueOf, PropsWithSpread } from "../../types";
+import { ICONS } from "../Icon";
 export declare enum Label {
     Dismiss = "Dismiss"
 }
@@ -15,6 +16,29 @@ export type Props = PropsWithSpread<{
      * The appearance of the chip.
      */
     appearance?: ValueOf<typeof ChipType>;
+    /**
+     * Whether the chip is read-only.
+     * If true, the chip will not be interactive.
+     */
+    isReadOnly?: boolean;
+    /**
+     * A badge to display on the chip.
+     */
+    badge?: ReactNode;
+    /**
+     * The name of an icon to display on the chip.
+     */
+    iconName?: ValueOf<typeof ICONS> | string;
+    /**
+     * Whether the chip is dense.
+     * Reduces the height of the chip by removing padding.
+     */
+    isDense?: boolean;
+    /**
+     * Whether the chip is inline.
+     * If true, the chip will be displayed inline with other content (such as text).
+     */
+    isInline?: boolean;
     /**
      * The lead for the chip.
      */
@@ -53,5 +77,5 @@ export type Props = PropsWithSpread<{
  *
  * It can be used to display a small value attached to a component.
  */
-declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => React.JSX.Element;
+declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, isReadOnly, isDense, isInline, iconName, badge, value, ...props }: Props) => React.JSX.Element;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -33,6 +33,11 @@ const Chip = _ref => {
     quoteValue,
     selected,
     subString = "",
+    isReadOnly = false,
+    isDense = false,
+    isInline = false,
+    iconName,
+    badge,
     value,
     ...props
   } = _ref;
@@ -50,19 +55,28 @@ const Chip = _ref => {
     }
   };
   const chipValue = (0, _utils.highlightSubString)(value, subString).text;
-  const chipContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, lead && /*#__PURE__*/_react.default.createElement("span", {
+  const chipContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconName && /*#__PURE__*/_react.default.createElement("i", {
+    className: "p-icon--".concat(iconName)
+  }), lead && /*#__PURE__*/_react.default.createElement("span", {
     className: "p-chip__lead"
   }, lead.toUpperCase()), /*#__PURE__*/_react.default.createElement("span", {
     className: "p-chip__value",
     dangerouslySetInnerHTML: {
       __html: quoteValue ? "'".concat(chipValue, "'") : chipValue
     }
-  }));
+  }), badge && badge);
   const chipClassName = (0, _classnames.default)({
     ["p-chip--".concat(appearance)]: !!appearance,
-    "p-chip": !appearance
+    "p-chip": !appearance,
+    "is-dense": isDense,
+    "is-readonly": isReadOnly,
+    "is-inline": isInline
   }, props.className);
-  if (onDismiss) {
+  if (isReadOnly) {
+    return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
+      className: chipClassName
+    }), chipContent);
+  } else if (onDismiss) {
     return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
       className: chipClassName
     }), chipContent, /*#__PURE__*/_react.default.createElement("button", {

package/dist/components/Chip/Chip.stories.d.ts

@@ -7,3 +7,8 @@ export declare const Default: Story;
 export declare const LeadValue: Story;
 export declare const Appearance: Story;
 export declare const Dismissible: Story;
+export declare const Dense: Story;
+export declare const Inline: Story;
+export declare const ReadOnly: Story;
+export declare const WithIcon: Story;
+export declare const WithBadge: Story;

package/dist/components/Chip/Chip.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.LeadValue = exports.Dismissible = exports.Default = exports.Appearance = void 0;
+exports.default = exports.WithIcon = exports.WithBadge = exports.ReadOnly = exports.LeadValue = exports.Inline = exports.Dismissible = exports.Dense = exports.Default = exports.Appearance = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Chip = _interopRequireDefault(require("./Chip"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -42,4 +42,46 @@ const Dismissible = exports.Dismissible = {
     }
   }),
   name: "Dismissible"
+};
+const Dense = exports.Dense = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Owner",
+    value: "Bob",
+    isDense: true
+  }),
+  name: "Dense"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement("p", null, "This is text with an inline", " ", /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    value: "chip",
+    isDense: true,
+    isInline: true
+  })),
+  name: "Inline"
+};
+const ReadOnly = exports.ReadOnly = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Owner",
+    value: "Bob",
+    isReadOnly: true
+  }),
+  name: "Read-only"
+};
+const WithIcon = exports.WithIcon = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    value: "Users",
+    iconName: "user"
+  }),
+  name: "With Icon"
+};
+const WithBadge = exports.WithBadge = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Owner",
+    value: "Bob",
+    badge: /*#__PURE__*/_react.default.createElement("span", {
+      className: "p-badge",
+      "aria-label": "More than 2.5 billion items"
+    }, "2.5B")
+  }),
+  name: "With Badge"
 };

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

@@ -34,6 +34,7 @@ const PreloadedList = () => {
     toastNotify.success("Settings saved successfully");
     toastNotify.info("Your changes are syncing in the background");
     toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
+    toastNotify.caution("You have unsaved changes.");
     toastNotify.toggleListView();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

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

@@ -8,9 +8,10 @@ export type ToastNotificationType = NotificationType & {
 };
 interface ToastNotificationHelper {
     notifications: ToastNotificationType[];
-    success: (message: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
-    info: (message: ReactNode, title?: string) => ToastNotificationType;
+    success: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
+    info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => ToastNotificationType;
     failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
+    caution: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
     clear: (notification?: ToastNotificationType[]) => void;
     toggleListView: () => void;
     isListView: boolean;
@@ -25,11 +26,12 @@ export type GroupedNotificationCount = {
 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.                          |
+| **Values**                       | **Description**                                                                |
+|----------------------------------|--------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |
 | `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.caution()`          | Displays a caution toast. Optionally accepts actions and a title.              |
 | `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).  |
@@ -41,6 +43,7 @@ Some example usages:
 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.");
@@ -52,16 +55,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
 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:**
+
+4. **Show a caution toast:**
+```
+toastNotify.caution("Your changes have not been saved.");
+toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+
+5. **Clear notifications:**
 ```
 toastNotify.clear(); // clears all toast notifications
 toastNotify.clear([notificationId]); // clears specific toast notifications
 ```
-5. **Toggle the notification list view:**
+
+6. **Toggle the notification list view:**
 ```
 toastNotify.toggleListView();
 ```
-6. **Get the count of notifications by severity:**
+
+7. **Get the count of notifications by severity:**
 ```
 const count = toastNotify.countBySeverity;
 console.log(count.positive);

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

@@ -21,12 +21,14 @@ const initialNotification = {
 const ToastNotificationContext = /*#__PURE__*/(0, _react.createContext)({
   /** List of all active toast notifications */
   notifications: [],
-  /** Show a success toast. Optionally pass actions. */
+  /** Show a success toast. Optionally pass actions and a title. */
   success: () => initialNotification,
-  /** Show an info toast. Optionally pass a custom title. */
+  /** Show an info toast. Optionally pass a custom title and actions. */
   info: () => initialNotification,
   /** Show a failure toast with an error and optional message/actions. */
   failure: () => initialNotification,
+  /** Show a caution toast. Optionally pass actions and a title. */
+  caution: () => initialNotification,
   /** Clear one or more specific toasts, or all if none provided. */
   clear: () => null,
   /** Toggle between single toast view and list view. */
@@ -43,11 +45,12 @@ const ToastNotificationContext = /*#__PURE__*/(0, _react.createContext)({
 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.                          |
+| **Values**                       | **Description**                                                                |
+|----------------------------------|--------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |
 | `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.caution()`          | Displays a caution toast. Optionally accepts actions and a title.              |
 | `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).  |
@@ -59,6 +62,7 @@ Some example usages:
 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.");
@@ -70,16 +74,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
 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:**
+
+4. **Show a caution toast:**
+```
+toastNotify.caution("Your changes have not been saved.");
+toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+
+5. **Clear notifications:**
 ```
 toastNotify.clear(); // clears all toast notifications
 toastNotify.clear([notificationId]); // clears specific toast notifications
 ```
-5. **Toggle the notification list view:**
+
+6. **Toggle the notification list view:**
 ```
 toastNotify.toggleListView();
 ```
-6. **Get the count of notifications by severity:**
+
+7. **Get the count of notifications by severity:**
 ```
 const count = toastNotify.countBySeverity;
 console.log(count.positive);
@@ -174,12 +187,24 @@ const ToastNotificationProvider = _ref => {
   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({
+    info: (message, title, actions) => addNotification({
       message,
       actions,
+      title,
+      type: _.NotificationSeverity.INFORMATION
+    }),
+    success: (message, actions, title) => addNotification({
+      message,
+      actions,
+      title,
       type: _.NotificationSeverity.POSITIVE
     }),
+    caution: (message, actions, title) => addNotification({
+      message,
+      actions,
+      title,
+      type: _.NotificationSeverity.CAUTION
+    }),
     clear,
     toggleListView,
     isListView: showList,

package/dist/components/StatusLabel/StatusLabel.d.ts

@@ -27,8 +27,8 @@ export type Props = PropsWithSpread<{
 }, HTMLProps<HTMLDivElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
- *
  * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ * @deprecated StatusLabel is deprecated. Use Read-only Chip instead.
  */
 declare const StatusLabel: ({ appearance, children, className, ...labelProps }: Props) => React.JSX.Element;
 export default StatusLabel;

package/dist/components/StatusLabel/StatusLabel.js

@@ -22,8 +22,8 @@ const StatusLabelAppearance = exports.StatusLabelAppearance = {
 
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
- *
  * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ * @deprecated StatusLabel is deprecated. Use Read-only Chip instead.
  */
 const StatusLabel = _ref => {
   let {

package/dist/esm/components/Chip/Chip.d.ts

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import type { MouseEvent, HTMLProps } from "react";
 import { ValueOf, PropsWithSpread } from "../../types";
+import { ICONS } from "../Icon";
 export declare enum Label {
     Dismiss = "Dismiss"
 }
@@ -15,6 +16,29 @@ export type Props = PropsWithSpread<{
      * The appearance of the chip.
      */
     appearance?: ValueOf<typeof ChipType>;
+    /**
+     * Whether the chip is read-only.
+     * If true, the chip will not be interactive.
+     */
+    isReadOnly?: boolean;
+    /**
+     * A badge to display on the chip.
+     */
+    badge?: ReactNode;
+    /**
+     * The name of an icon to display on the chip.
+     */
+    iconName?: ValueOf<typeof ICONS> | string;
+    /**
+     * Whether the chip is dense.
+     * Reduces the height of the chip by removing padding.
+     */
+    isDense?: boolean;
+    /**
+     * Whether the chip is inline.
+     * If true, the chip will be displayed inline with other content (such as text).
+     */
+    isInline?: boolean;
     /**
      * The lead for the chip.
      */
@@ -53,5 +77,5 @@ export type Props = PropsWithSpread<{
  *
  * It can be used to display a small value attached to a component.
  */
-declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => React.JSX.Element;
+declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, isReadOnly, isDense, isInline, iconName, badge, value, ...props }: Props) => React.JSX.Element;
 export default Chip;

package/dist/esm/components/Chip/Chip.js

@@ -1,4 +1,4 @@
-var _excluded = ["appearance", "lead", "onClick", "onDismiss", "quoteValue", "selected", "subString", "value"];
+var _excluded = ["appearance", "lead", "onClick", "onDismiss", "quoteValue", "selected", "subString", "isReadOnly", "isDense", "isInline", "iconName", "badge", "value"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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; }
@@ -29,6 +29,11 @@ var Chip = _ref => {
       quoteValue,
       selected,
       subString = "",
+      isReadOnly = false,
+      isDense = false,
+      isInline = false,
+      iconName,
+      badge,
       value
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -46,19 +51,28 @@ var Chip = _ref => {
     }
   };
   var chipValue = highlightSubString(value, subString).text;
-  var chipContent = /*#__PURE__*/React.createElement(React.Fragment, null, lead && /*#__PURE__*/React.createElement("span", {
+  var chipContent = /*#__PURE__*/React.createElement(React.Fragment, null, iconName && /*#__PURE__*/React.createElement("i", {
+    className: "p-icon--".concat(iconName)
+  }), lead && /*#__PURE__*/React.createElement("span", {
     className: "p-chip__lead"
   }, lead.toUpperCase()), /*#__PURE__*/React.createElement("span", {
     className: "p-chip__value",
     dangerouslySetInnerHTML: {
       __html: quoteValue ? "'".concat(chipValue, "'") : chipValue
     }
-  }));
+  }), badge && badge);
   var chipClassName = classNames({
     ["p-chip--".concat(appearance)]: !!appearance,
-    "p-chip": !appearance
+    "p-chip": !appearance,
+    "is-dense": isDense,
+    "is-readonly": isReadOnly,
+    "is-inline": isInline
   }, props.className);
-  if (onDismiss) {
+  if (isReadOnly) {
+    return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+      className: chipClassName
+    }), chipContent);
+  } else if (onDismiss) {
     return /*#__PURE__*/React.createElement("span", _extends({}, props, {
       className: chipClassName
     }), chipContent, /*#__PURE__*/React.createElement("button", {

package/dist/esm/components/Chip/Chip.stories.d.ts

@@ -7,3 +7,8 @@ export declare const Default: Story;
 export declare const LeadValue: Story;
 export declare const Appearance: Story;
 export declare const Dismissible: Story;
+export declare const Dense: Story;
+export declare const Inline: Story;
+export declare const ReadOnly: Story;
+export declare const WithIcon: Story;
+export declare const WithBadge: Story;

package/dist/esm/components/Chip/Chip.stories.js

@@ -35,4 +35,46 @@ export var Dismissible = {
     }
   }),
   name: "Dismissible"
+};
+export var Dense = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    lead: "Owner",
+    value: "Bob",
+    isDense: true
+  }),
+  name: "Dense"
+};
+export var Inline = {
+  render: () => /*#__PURE__*/React.createElement("p", null, "This is text with an inline", " ", /*#__PURE__*/React.createElement(Chip, {
+    value: "chip",
+    isDense: true,
+    isInline: true
+  })),
+  name: "Inline"
+};
+export var ReadOnly = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    lead: "Owner",
+    value: "Bob",
+    isReadOnly: true
+  }),
+  name: "Read-only"
+};
+export var WithIcon = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    value: "Users",
+    iconName: "user"
+  }),
+  name: "With Icon"
+};
+export var WithBadge = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    lead: "Owner",
+    value: "Bob",
+    badge: /*#__PURE__*/React.createElement("span", {
+      className: "p-badge",
+      "aria-label": "More than 2.5 billion items"
+    }, "2.5B")
+  }),
+  name: "With Badge"
 };

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

@@ -25,6 +25,7 @@ var PreloadedList = () => {
     toastNotify.success("Settings saved successfully");
     toastNotify.info("Your changes are syncing in the background");
     toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
+    toastNotify.caution("You have unsaved changes.");
     toastNotify.toggleListView();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

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

@@ -8,9 +8,10 @@ export type ToastNotificationType = NotificationType & {
 };
 interface ToastNotificationHelper {
     notifications: ToastNotificationType[];
-    success: (message: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
-    info: (message: ReactNode, title?: string) => ToastNotificationType;
+    success: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
+    info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => ToastNotificationType;
     failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
+    caution: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
     clear: (notification?: ToastNotificationType[]) => void;
     toggleListView: () => void;
     isListView: boolean;
@@ -25,11 +26,12 @@ export type GroupedNotificationCount = {
 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.                          |
+| **Values**                       | **Description**                                                                |
+|----------------------------------|--------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |
 | `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.caution()`          | Displays a caution toast. Optionally accepts actions and a title.              |
 | `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).  |
@@ -41,6 +43,7 @@ Some example usages:
 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.");
@@ -52,16 +55,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
 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:**
+
+4. **Show a caution toast:**
+```
+toastNotify.caution("Your changes have not been saved.");
+toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+
+5. **Clear notifications:**
 ```
 toastNotify.clear(); // clears all toast notifications
 toastNotify.clear([notificationId]); // clears specific toast notifications
 ```
-5. **Toggle the notification list view:**
+
+6. **Toggle the notification list view:**
 ```
 toastNotify.toggleListView();
 ```
-6. **Get the count of notifications by severity:**
+
+7. **Get the count of notifications by severity:**
 ```
 const count = toastNotify.countBySeverity;
 console.log(count.positive);

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

@@ -3,7 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { failure as _failure, info as _info } from "../../NotificationProvider";
+import { failure as _failure } from "../../NotificationProvider";
 import { NotificationSeverity } from "./..";
 import ToastNotification from "./ToastNotification";
 import ToastNotificationList from "./ToastNotificationList";
@@ -18,12 +18,14 @@ var initialNotification = {
 var ToastNotificationContext = /*#__PURE__*/createContext({
   /** List of all active toast notifications */
   notifications: [],
-  /** Show a success toast. Optionally pass actions. */
+  /** Show a success toast. Optionally pass actions and a title. */
   success: () => initialNotification,
-  /** Show an info toast. Optionally pass a custom title. */
+  /** Show an info toast. Optionally pass a custom title and actions. */
   info: () => initialNotification,
   /** Show a failure toast with an error and optional message/actions. */
   failure: () => initialNotification,
+  /** Show a caution toast. Optionally pass actions and a title. */
+  caution: () => initialNotification,
   /** Clear one or more specific toasts, or all if none provided. */
   clear: () => null,
   /** Toggle between single toast view and list view. */
@@ -40,11 +42,12 @@ var ToastNotificationContext = /*#__PURE__*/createContext({
 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.                          |
+| **Values**                       | **Description**                                                                |
+|----------------------------------|--------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |
 | `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.caution()`          | Displays a caution toast. Optionally accepts actions and a title.              |
 | `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).  |
@@ -56,6 +59,7 @@ Some example usages:
 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.");
@@ -67,16 +71,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
 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:**
+
+4. **Show a caution toast:**
+```
+toastNotify.caution("Your changes have not been saved.");
+toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+
+5. **Clear notifications:**
 ```
 toastNotify.clear(); // clears all toast notifications
 toastNotify.clear([notificationId]); // clears specific toast notifications
 ```
-5. **Toggle the notification list view:**
+
+6. **Toggle the notification list view:**
 ```
 toastNotify.toggleListView();
 ```
-6. **Get the count of notifications by severity:**
+
+7. **Get the count of notifications by severity:**
 ```
 const count = toastNotify.countBySeverity;
 console.log(count.positive);
@@ -170,12 +183,24 @@ var ToastNotificationProvider = _ref => {
   var helper = {
     notifications,
     failure: (title, error, message, actions) => addNotification(_failure(title, error, message, actions)),
-    info: (message, title) => addNotification(_info(message, title)),
-    success: (message, actions) => addNotification({
+    info: (message, title, actions) => addNotification({
       message,
       actions,
+      title,
+      type: NotificationSeverity.INFORMATION
+    }),
+    success: (message, actions, title) => addNotification({
+      message,
+      actions,
+      title,
       type: NotificationSeverity.POSITIVE
     }),
+    caution: (message, actions, title) => addNotification({
+      message,
+      actions,
+      title,
+      type: NotificationSeverity.CAUTION
+    }),
     clear,
     toggleListView,
     isListView: showList,

package/dist/esm/components/StatusLabel/StatusLabel.d.ts

@@ -27,8 +27,8 @@ export type Props = PropsWithSpread<{
 }, HTMLProps<HTMLDivElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
- *
  * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ * @deprecated StatusLabel is deprecated. Use Read-only Chip instead.
  */
 declare const StatusLabel: ({ appearance, children, className, ...labelProps }: Props) => React.JSX.Element;
 export default StatusLabel;

package/dist/esm/components/StatusLabel/StatusLabel.js

@@ -18,8 +18,8 @@ export var StatusLabelAppearance = {
 
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
- *
  * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ * @deprecated StatusLabel is deprecated. Use Read-only Chip instead.
  */
 var StatusLabel = _ref => {
   var {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {