@canonical/react-components 2.3.1 → 2.5.0

package/dist/components/EventQueue/EventQueue.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from "react";
+import React from "react";
+export interface EventCallback<T> {
+    onSuccess: (event: T) => void;
+    onFailure: (msg: string) => void;
+    onFinish?: () => void;
+}
+export interface EventQueue<T> {
+    get: (operationId: string) => EventCallback<T> | undefined;
+    set: (operationId: string, onSuccess: (event: T) => void, onFailure: (msg: string) => void, onFinish?: () => void) => void;
+    remove: (operationId: string) => void;
+}
+/**
+ * This provides an event queue system for managing callbacks associated with
+ * asynchronous operations (e.g., API calls) in an application.
+ *
+ * It allows components to register success, failure,
+ * and optional finish handlers for a given operation ID, and later retrieve or remove them.
+ *
+ * This is useful for handling side effects when dealing
+ * with multiple operations that need to be tracked and updated independently.
+ *
+ * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
+ * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
+ * from a shared module and reused across the app to ensure a single
+ * context instance is used.
+ *
+ * Usage pattern:
+ * // eventQueue.ts
+ * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
+ *
+ * // App.tsx
+ * import { EventQueueProvider } from "./eventQueue";
+ * ...
+ * <EventQueueProvider>
+ *   <App />
+ * </EventQueueProvider>
+ *
+ * // In any other component
+ * import { useEventQueue } from "./eventQueue";
+ * ...
+ * const eventQueue = useEventQueue();
+ * eventQueue.set(operationId, onSuccess, onFailure);
+ */
+export declare function createEventQueue<T>(): {
+    EventQueueProvider: FC<{
+        children: ReactNode;
+    }>;
+    useEventQueue: () => EventQueue<T>;
+    EventQueueContext: React.Context<EventQueue<T>>;
+};

package/dist/components/EventQueue/EventQueue.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEventQueue = createEventQueue;
+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; }
+/**
+ * This provides an event queue system for managing callbacks associated with
+ * asynchronous operations (e.g., API calls) in an application.
+ *
+ * It allows components to register success, failure,
+ * and optional finish handlers for a given operation ID, and later retrieve or remove them.
+ *
+ * This is useful for handling side effects when dealing
+ * with multiple operations that need to be tracked and updated independently.
+ *
+ * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
+ * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
+ * from a shared module and reused across the app to ensure a single
+ * context instance is used.
+ *
+ * Usage pattern:
+ * // eventQueue.ts
+ * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
+ *
+ * // App.tsx
+ * import { EventQueueProvider } from "./eventQueue";
+ * ...
+ * <EventQueueProvider>
+ *   <App />
+ * </EventQueueProvider>
+ *
+ * // In any other component
+ * import { useEventQueue } from "./eventQueue";
+ * ...
+ * const eventQueue = useEventQueue();
+ * eventQueue.set(operationId, onSuccess, onFailure);
+ */
+
+function createEventQueue() {
+  const EventQueueContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+  const eventQueue = new Map();
+  const EventQueueProvider = _ref => {
+    let {
+      children
+    } = _ref;
+    return /*#__PURE__*/_react.default.createElement(EventQueueContext.Provider, {
+      value: {
+        get: operationId => eventQueue.get(operationId),
+        set: (operationId, onSuccess, onFailure, onFinish) => eventQueue.set(operationId, {
+          onSuccess,
+          onFailure,
+          onFinish
+        }),
+        remove: operationId => eventQueue.delete(operationId)
+      }
+    }, children);
+  };
+  const useEventQueue = () => {
+    const context = (0, _react.useContext)(EventQueueContext);
+    if (!context) {
+      throw new Error("useEventQueue must be used within an EventQueueProvider");
+    }
+    return context;
+  };
+  return {
+    EventQueueProvider,
+    useEventQueue,
+    EventQueueContext
+  };
+}

package/dist/components/EventQueue/EventQueueProvider.test.d.ts

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

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

@@ -0,0 +1,2 @@
+export { createEventQueue } from "./EventQueue";
+export type { EventCallback, EventQueue } from "./EventQueue";

package/dist/components/EventQueue/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createEventQueue", {
+  enumerable: true,
+  get: function () {
+    return _EventQueue.createEventQueue;
+  }
+});
+var _EventQueue = require("./EventQueue");

package/dist/components/Stepper/Step/Step.scss

@@ -85,7 +85,7 @@
   }
 }
 
-.stepper-vertical {
+.stepper-vertical:not(.stepper-horizontal) {
   .p-list__item {
     padding-bottom: 0;
     padding-top: 0;

package/dist/components/Switch/Switch.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { PropsWithSpread } from "../../types";
+import "./Switch.scss";
 export type Props = PropsWithSpread<{
     /**
      * The label name for the switch
@@ -10,9 +11,17 @@ export type Props = PropsWithSpread<{
      * Whether the switch is disabled or not
      */
     disabled?: boolean;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: string;
 }, HTMLProps<HTMLInputElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
  */
-export declare const Switch: ({ label, disabled, ...inputProps }: Props) => React.JSX.Element;
+export declare const Switch: ({ label, disabled, help, helpClassName, ...inputProps }: Props) => React.JSX.Element;
 export default Switch;

package/dist/components/Switch/Switch.js

@@ -4,8 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Switch = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./Switch.scss");
 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; }
 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); }
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
@@ -14,9 +18,12 @@ const Switch = _ref => {
   let {
     label,
     disabled = false,
+    help,
+    helpClassName,
     ...inputProps
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("label", {
+  const helpId = (0, _react.useId)();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
     className: "p-switch"
   }, /*#__PURE__*/_react.default.createElement("input", _extends({
     type: "checkbox",
@@ -27,7 +34,10 @@ const Switch = _ref => {
     className: "p-switch__slider"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "p-switch__label"
-  }, label));
+  }, label)), help && /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _classnames.default)("p-form-help-text", "switch-help-text", helpClassName),
+    id: helpId
+  }, help));
 };
 exports.Switch = Switch;
 var _default = exports.default = Switch;

package/dist/components/Switch/Switch.scss

@@ -0,0 +1,3 @@
+.switch-help-text {
+  margin-left: 2.5rem;
+}

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Switch>;
 export declare const Default: Story;
 export declare const Disabled: Story;
+export declare const HelpText: Story;

package/dist/components/Switch/Switch.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Disabled = exports.Default = void 0;
+exports.default = exports.HelpText = exports.Disabled = exports.Default = void 0;
 var _Switch = _interopRequireDefault(require("./Switch"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const meta = {
@@ -23,4 +23,11 @@ const Disabled = exports.Disabled = {
     disabled: true,
     label: "Disabled switch"
   }
+};
+const HelpText = exports.HelpText = {
+  name: "Help Text",
+  args: {
+    label: "Switch with help text",
+    help: "This is some help text"
+  }
 };

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

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from "react";
+import React from "react";
+export interface EventCallback<T> {
+    onSuccess: (event: T) => void;
+    onFailure: (msg: string) => void;
+    onFinish?: () => void;
+}
+export interface EventQueue<T> {
+    get: (operationId: string) => EventCallback<T> | undefined;
+    set: (operationId: string, onSuccess: (event: T) => void, onFailure: (msg: string) => void, onFinish?: () => void) => void;
+    remove: (operationId: string) => void;
+}
+/**
+ * This provides an event queue system for managing callbacks associated with
+ * asynchronous operations (e.g., API calls) in an application.
+ *
+ * It allows components to register success, failure,
+ * and optional finish handlers for a given operation ID, and later retrieve or remove them.
+ *
+ * This is useful for handling side effects when dealing
+ * with multiple operations that need to be tracked and updated independently.
+ *
+ * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
+ * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
+ * from a shared module and reused across the app to ensure a single
+ * context instance is used.
+ *
+ * Usage pattern:
+ * // eventQueue.ts
+ * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
+ *
+ * // App.tsx
+ * import { EventQueueProvider } from "./eventQueue";
+ * ...
+ * <EventQueueProvider>
+ *   <App />
+ * </EventQueueProvider>
+ *
+ * // In any other component
+ * import { useEventQueue } from "./eventQueue";
+ * ...
+ * const eventQueue = useEventQueue();
+ * eventQueue.set(operationId, onSuccess, onFailure);
+ */
+export declare function createEventQueue<T>(): {
+    EventQueueProvider: FC<{
+        children: ReactNode;
+    }>;
+    useEventQueue: () => EventQueue<T>;
+    EventQueueContext: React.Context<EventQueue<T>>;
+};

package/dist/esm/components/EventQueue/EventQueue.js

@@ -0,0 +1,67 @@
+import { createContext, useContext } from "react";
+import React from "react";
+/**
+ * This provides an event queue system for managing callbacks associated with
+ * asynchronous operations (e.g., API calls) in an application.
+ *
+ * It allows components to register success, failure,
+ * and optional finish handlers for a given operation ID, and later retrieve or remove them.
+ *
+ * This is useful for handling side effects when dealing
+ * with multiple operations that need to be tracked and updated independently.
+ *
+ * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
+ * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
+ * from a shared module and reused across the app to ensure a single
+ * context instance is used.
+ *
+ * Usage pattern:
+ * // eventQueue.ts
+ * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
+ *
+ * // App.tsx
+ * import { EventQueueProvider } from "./eventQueue";
+ * ...
+ * <EventQueueProvider>
+ *   <App />
+ * </EventQueueProvider>
+ *
+ * // In any other component
+ * import { useEventQueue } from "./eventQueue";
+ * ...
+ * const eventQueue = useEventQueue();
+ * eventQueue.set(operationId, onSuccess, onFailure);
+ */
+
+export function createEventQueue() {
+  var EventQueueContext = /*#__PURE__*/createContext(undefined);
+  var eventQueue = new Map();
+  var EventQueueProvider = _ref => {
+    var {
+      children
+    } = _ref;
+    return /*#__PURE__*/React.createElement(EventQueueContext.Provider, {
+      value: {
+        get: operationId => eventQueue.get(operationId),
+        set: (operationId, onSuccess, onFailure, onFinish) => eventQueue.set(operationId, {
+          onSuccess,
+          onFailure,
+          onFinish
+        }),
+        remove: operationId => eventQueue.delete(operationId)
+      }
+    }, children);
+  };
+  var useEventQueue = () => {
+    var context = useContext(EventQueueContext);
+    if (!context) {
+      throw new Error("useEventQueue must be used within an EventQueueProvider");
+    }
+    return context;
+  };
+  return {
+    EventQueueProvider,
+    useEventQueue,
+    EventQueueContext
+  };
+}

package/dist/esm/components/EventQueue/EventQueueProvider.test.d.ts

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

package/dist/esm/components/EventQueue/index.d.ts

@@ -0,0 +1,2 @@
+export { createEventQueue } from "./EventQueue";
+export type { EventCallback, EventQueue } from "./EventQueue";

package/dist/esm/components/EventQueue/index.js

@@ -0,0 +1 @@
+export { createEventQueue } from "./EventQueue";

package/dist/esm/components/Stepper/Step/Step.scss

@@ -85,7 +85,7 @@
   }
 }
 
-.stepper-vertical {
+.stepper-vertical:not(.stepper-horizontal) {
   .p-list__item {
     padding-bottom: 0;
     padding-top: 0;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { PropsWithSpread } from "../../types";
+import "./Switch.scss";
 export type Props = PropsWithSpread<{
     /**
      * The label name for the switch
@@ -10,9 +11,17 @@ export type Props = PropsWithSpread<{
      * Whether the switch is disabled or not
      */
     disabled?: boolean;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: string;
 }, HTMLProps<HTMLInputElement>>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
  */
-export declare const Switch: ({ label, disabled, ...inputProps }: Props) => React.JSX.Element;
+export declare const Switch: ({ label, disabled, help, helpClassName, ...inputProps }: Props) => React.JSX.Element;
 export default Switch;

package/dist/esm/components/Switch/Switch.js

@@ -1,18 +1,24 @@
-var _excluded = ["label", "disabled"];
+var _excluded = ["label", "disabled", "help", "helpClassName"];
 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; }
 import React from "react";
+import classNames from "classnames";
+import { useId } from "react";
+import "./Switch.scss";
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
  */
 export var Switch = _ref => {
   var {
       label,
-      disabled = false
+      disabled = false,
+      help,
+      helpClassName
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("label", {
+  var helpId = useId();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
     className: "p-switch"
   }, /*#__PURE__*/React.createElement("input", _extends({
     type: "checkbox",
@@ -23,6 +29,9 @@ export var Switch = _ref => {
     className: "p-switch__slider"
   }), /*#__PURE__*/React.createElement("span", {
     className: "p-switch__label"
-  }, label));
+  }, label)), help && /*#__PURE__*/React.createElement("p", {
+    className: classNames("p-form-help-text", "switch-help-text", helpClassName),
+    id: helpId
+  }, help));
 };
 export default Switch;

package/dist/esm/components/Switch/Switch.scss

@@ -0,0 +1,3 @@
+.switch-help-text {
+  margin-left: 2.5rem;
+}

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Switch>;
 export declare const Default: Story;
 export declare const Disabled: Story;
+export declare const HelpText: Story;

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

@@ -16,4 +16,11 @@ export var Disabled = {
     disabled: true,
     label: "Disabled switch"
   }
+};
+export var HelpText = {
+  name: "Help Text",
+  args: {
+    label: "Switch with help text",
+    help: "This is some help text"
+  }
 };

package/dist/esm/index.d.ts

@@ -21,6 +21,7 @@ export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
 export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
+export { createEventQueue } from "./components/EventQueue";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
 export { default as FormikField } from "./components/FormikField";
@@ -92,6 +93,7 @@ export type { ConfirmationModalProps } from "./components/ConfirmationModal";
 export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";
 export type { DoughnutChartProps, Segment } from "./components/DoughnutChart";
 export type { EmptyStateProps } from "./components/EmptyState";
+export type { EventCallback, EventQueue } from "./components/EventQueue";
 export type { FieldProps } from "./components/Field";
 export type { FormProps } from "./components/Form";
 export type { FormikFieldProps } from "./components/FormikField";

package/dist/esm/index.js

@@ -21,6 +21,7 @@ export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
 export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
+export { createEventQueue } from "./components/EventQueue";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
 export { default as FormikField } from "./components/FormikField";

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
 export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
+export { createEventQueue } from "./components/EventQueue";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
 export { default as FormikField } from "./components/FormikField";
@@ -92,6 +93,7 @@ export type { ConfirmationModalProps } from "./components/ConfirmationModal";
 export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";
 export type { DoughnutChartProps, Segment } from "./components/DoughnutChart";
 export type { EmptyStateProps } from "./components/EmptyState";
+export type { EventCallback, EventQueue } from "./components/EventQueue";
 export type { FieldProps } from "./components/Field";
 export type { FormProps } from "./components/Form";
 export type { FormikFieldProps } from "./components/FormikField";

package/dist/index.js

@@ -29,6 +29,7 @@ var _exportNames = {
   ContextualMenu: true,
   DoughnutChart: true,
   EmptyState: true,
+  createEventQueue: true,
   Field: true,
   Form: true,
   FormikField: true,
@@ -584,6 +585,12 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "createEventQueue", {
+  enumerable: true,
+  get: function () {
+    return _EventQueue.createEventQueue;
+  }
+});
 Object.defineProperty(exports, "failure", {
   enumerable: true,
   get: function () {
@@ -721,6 +728,7 @@ var _ConfirmationModal = _interopRequireDefault(require("./components/Confirmati
 var _ContextualMenu = _interopRequireDefault(require("./components/ContextualMenu"));
 var _DoughnutChart = _interopRequireDefault(require("./components/DoughnutChart"));
 var _EmptyState = _interopRequireDefault(require("./components/EmptyState"));
+var _EventQueue = require("./components/EventQueue");
 var _Field = _interopRequireDefault(require("./components/Field"));
 var _Form = _interopRequireDefault(require("./components/Form"));
 var _FormikField = _interopRequireDefault(require("./components/FormikField"));

package/package.json

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