@canonical/react-components 4.2.0 → 4.3.1

package/dist/components/OutputField/OutputField.d.ts

@@ -0,0 +1,30 @@
+import { FC, ReactNode } from "react";
+import "./OutputField.scss";
+export type Props = {
+    /**
+     * The id of the output element. This is used to associate the label with the output element for form or accessibility purposes.
+     */
+    id: string;
+    /**
+     * The label for the output field.
+     */
+    label: string;
+    /**
+     * The value to be displayed in the output field.
+     */
+    value: string;
+    /**
+     * Optional help text to provide additional information about the output field.
+     */
+    help?: ReactNode;
+    /**
+     * Whether the output field is required.
+     */
+    required?: boolean;
+};
+/**
+ *
+ * Use output fields to display read-only information with a label and optional help text. Output fields are ideal for displaying calculated values or results of user input in a consistent format.
+ */
+export declare const OutputField: FC<Props>;
+export default OutputField;

package/dist/components/OutputField/OutputField.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OutputField = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _Field = _interopRequireDefault(require("../Field"));
+require("./OutputField.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ *
+ * Use output fields to display read-only information with a label and optional help text. Output fields are ideal for displaying calculated values or results of user input in a consistent format.
+ */
+const OutputField = _ref => {
+  let {
+    id,
+    label,
+    value,
+    help,
+    required
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Field.default, {
+    forId: id,
+    label: label,
+    help: help,
+    labelClassName: "u-no-margin--bottom",
+    className: "output-field",
+    required: required
+  }, /*#__PURE__*/_react.default.createElement("output", {
+    id: id,
+    className: "mono-font u-sv2"
+  }, /*#__PURE__*/_react.default.createElement("b", null, value)));
+};
+exports.OutputField = OutputField;
+OutputField.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  value: _propTypes.default.string.isRequired,
+  help: _propTypes.default.node,
+  required: _propTypes.default.bool
+};
+var _default = exports.default = OutputField;

package/dist/components/OutputField/OutputField.scss

@@ -0,0 +1,11 @@
+@import "vanilla-framework";
+
+.output-field {
+  .p-form-help-text {
+    margin-top: -0.65rem;
+  }
+
+  .p-form__control {
+    margin-top: 0.25rem;
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import OutputField from "./OutputField";
+declare const meta: Meta<typeof OutputField>;
+export default meta;
+type Story = StoryObj<typeof OutputField>;
+export declare const Default: Story;
+export declare const HelpText: Story;
+export declare const Required: Story;

package/dist/components/OutputField/OutputField.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Required = exports.HelpText = exports.Default = void 0;
+var _OutputField = _interopRequireDefault(require("./OutputField"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _OutputField.default,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    id: {
+      control: {
+        type: "text"
+      }
+    },
+    value: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    required: {
+      control: {
+        type: "boolean"
+      }
+    }
+  },
+  args: {
+    label: "Label",
+    id: "output-field",
+    value: "Output value",
+    help: "",
+    required: false
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default"
+};
+const HelpText = exports.HelpText = {
+  name: "Help Text",
+  args: {
+    help: "This is an output field with text"
+  }
+};
+const Required = exports.Required = {
+  name: "Required",
+  args: {
+    required: true
+  }
+};

package/dist/components/OutputField/OutputField.test.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default } from "./OutputField";
+export type { Props as OutputFieldProps } from "./OutputField";

package/dist/components/OutputField/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _OutputField.default;
+  }
+});
+var _OutputField = _interopRequireDefault(require("./OutputField"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/PrefixedIpInput/PrefixedIpInput.js

@@ -50,7 +50,7 @@ const PrefixedIpInput = _ref => {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_PrefixedInput.default, _extends({
-    help: help ? help : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", isIPV4 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", "The available range in this subnet is", " ", /*#__PURE__*/_react.default.createElement("code", null, immutable, ".", editable, " ")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", "The available IPV6 address range is", " ", /*#__PURE__*/_react.default.createElement("code", null, immutable, editable, " ")), "."),
+    help: help ? help : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", isIPV4 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", "The available range in this subnet is", " ", /*#__PURE__*/_react.default.createElement("code", null, immutable, ".", editable, " ")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", "The subnet CIDR is ", /*#__PURE__*/_react.default.createElement("code", null, cidr)), "."),
     immutableText: isIPV4 ? "".concat(immutable, ".") : immutable,
     maxLength: maxLength,
     name: name,

package/dist/components/PrefixedIpInput/utils.d.ts

@@ -14,6 +14,7 @@ export declare const isIPv4: (ip: string) => boolean;
 export declare const getIpRangeFromCidr: (cidr: string) => string[];
 export declare const getFirstValidIp: (ip: string) => string;
 export declare const convertIpToUint32: (ip: string) => number;
+export declare const convertUint32ToIp: (ipAsUint32: number) => string;
 /**
  * Checks if an IPv4 address is valid for the given subnet.
  *
@@ -30,10 +31,18 @@ export declare const isIpInSubnet: (ip: string, cidr: string) => boolean;
  * @returns The immutable and editable octects as two strings in a list
  */
 export declare const getImmutableAndEditableOctets: (startIp: string, endIp: string) => string[];
+/**
+ * Separates the immutable and editable parts of an IPv6 subnet range.
+ * For simplcity, if the prefix is not on a group boundary, the entire last group is considered editable.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The immutable and editable parts as two strings in a list
+ */
+export declare const getImmutableAndEditableIPv6: (cidr: string) => string[];
 /**
  * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
  *
  * @param cidr The CIDR notation of the subnet
- * @returns The immutable and editable  as two strings in a list
+ * @returns The immutable and editable as two strings in a list
  */
 export declare const getImmutableAndEditable: (cidr: string) => string[];

package/dist/components/PrefixedIpInput/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isIpInSubnet = exports.isIPv4 = exports.getIpRangeFromCidr = exports.getImmutableAndEditableOctets = exports.getImmutableAndEditable = exports.getFirstValidIp = exports.convertIpToUint32 = void 0;
+exports.isIpInSubnet = exports.isIPv4 = exports.getIpRangeFromCidr = exports.getImmutableAndEditableOctets = exports.getImmutableAndEditableIPv6 = exports.getImmutableAndEditable = exports.getFirstValidIp = exports.convertUint32ToIp = exports.convertIpToUint32 = void 0;
 /**
  * Checks if a given IP address is a valid IPv4 address.
  * @param ip The IP address to check
@@ -26,8 +26,11 @@ const getIpRangeFromCidr = cidr => {
   // https://gist.github.com/binarymax/6114792
 
   // Get start IP and number of valid addresses
-  const [startIp, mask] = cidr.split("/");
-  const numberOfAddresses = (1 << 32 - parseInt(mask)) - 1;
+  const [unmaskedStartIp, mask] = cidr.split("/");
+  const maskBits = parseInt(mask, 10);
+  const subnetMask = maskBits === 0 ? 0 : 0xffffffff << 32 - maskBits >>> 0;
+  const startIp = convertUint32ToIp(convertIpToUint32(unmaskedStartIp) & subnetMask);
+  const numberOfAddresses = (1 << 32 - maskBits) - 1;
 
   // IPv4 can be represented by an unsigned 32-bit integer, so we can use a Uint32Array to store the IP
   const buffer = new ArrayBuffer(4); //4 octets
@@ -63,6 +66,14 @@ const convertIpToUint32 = ip => {
   int32[0] = (octets[0] << 24) + (octets[1] << 16) + (octets[2] << 8) + octets[3];
   return int32[0];
 };
+exports.convertIpToUint32 = convertIpToUint32;
+const convertUint32ToIp = ipAsUint32 => {
+  const buffer = new ArrayBuffer(4); //4 octets
+  const int32 = new Uint32Array(buffer);
+  int32[0] = ipAsUint32;
+  const octets = Array.from(new Uint8Array(buffer));
+  return octets.reverse().join(".");
+};
 
 /**
  * Checks if an IPv4 address is valid for the given subnet.
@@ -71,7 +82,7 @@ const convertIpToUint32 = ip => {
  * @param cidr The subnet's CIDR notation e.g. 192.168.0.0/24
  * @returns True if the IP is in the subnet, false otherwise
  */
-exports.convertIpToUint32 = convertIpToUint32;
+exports.convertUint32ToIp = convertUint32ToIp;
 const isIpInSubnet = (ip, cidr) => {
   const [startIP, endIP] = getIpRangeFromCidr(cidr);
   const ipUint32 = convertIpToUint32(ip);
@@ -104,22 +115,43 @@ const getImmutableAndEditableOctets = (startIp, endIp) => {
 };
 
 /**
- * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
+ * Separates the immutable and editable parts of an IPv6 subnet range.
+ * For simplcity, if the prefix is not on a group boundary, the entire last group is considered editable.
  *
  * @param cidr The CIDR notation of the subnet
- * @returns The immutable and editable  as two strings in a list
+ * @returns The immutable and editable parts as two strings in a list
  */
 exports.getImmutableAndEditableOctets = getImmutableAndEditableOctets;
+const getImmutableAndEditableIPv6 = cidr => {
+  const [address, prefix] = cidr.split("/");
+  const prefixLength = parseInt(prefix, 10);
+  const [left = "", right = ""] = address.split("::");
+  const leftGroups = left ? left.split(":").filter(Boolean) : [];
+  const rightGroups = right ? right.split(":").filter(Boolean) : [];
+  const missingGroups = Math.max(0, 8 - (leftGroups.length + rightGroups.length));
+  const expandedGroups = [...leftGroups, ...Array(missingGroups).fill("0"), ...Array(rightGroups.length).fill("0")];
+  const immutableGroupCount = Math.floor(prefixLength / 16);
+  let immutableIPV6 = immutableGroupCount > 0 ? "".concat(expandedGroups.slice(0, immutableGroupCount).join(":")) : "";
+  if (immutableGroupCount < 8) {
+    immutableIPV6 += immutableIPV6 ? ":" : "";
+  }
+  const editableIPV6 = "".concat(expandedGroups.slice(immutableGroupCount).join(":"));
+  return [immutableIPV6, editableIPV6];
+};
+
+/**
+ * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The immutable and editable as two strings in a list
+ */
+exports.getImmutableAndEditableIPv6 = getImmutableAndEditableIPv6;
 const getImmutableAndEditable = cidr => {
   const isIPV4 = isIPv4(cidr.split("/")[0]);
   if (isIPV4) {
     const [startIp, endIp] = getIpRangeFromCidr(cidr);
     return getImmutableAndEditableOctets(startIp, endIp);
   }
-  const [networkAddress] = cidr.split("/");
-  const immutableIPV6 = networkAddress.substring(0, networkAddress.lastIndexOf(":"));
-  const ipv6PlaceholderColons = 7 - (immutableIPV6.match(/:/g) || []).length; // 7 is the maximum number of colons in an IPv6 address
-  const editableIPV6 = "".concat("0000:".repeat(ipv6PlaceholderColons), "0000");
-  return [immutableIPV6, editableIPV6];
+  return getImmutableAndEditableIPv6(cidr);
 };
 exports.getImmutableAndEditable = getImmutableAndEditable;

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

@@ -0,0 +1,30 @@
+import { FC, ReactNode } from "react";
+import "./OutputField.scss";
+export type Props = {
+    /**
+     * The id of the output element. This is used to associate the label with the output element for form or accessibility purposes.
+     */
+    id: string;
+    /**
+     * The label for the output field.
+     */
+    label: string;
+    /**
+     * The value to be displayed in the output field.
+     */
+    value: string;
+    /**
+     * Optional help text to provide additional information about the output field.
+     */
+    help?: ReactNode;
+    /**
+     * Whether the output field is required.
+     */
+    required?: boolean;
+};
+/**
+ *
+ * Use output fields to display read-only information with a label and optional help text. Output fields are ideal for displaying calculated values or results of user input in a consistent format.
+ */
+export declare const OutputField: FC<Props>;
+export default OutputField;

package/dist/esm/components/OutputField/OutputField.js

@@ -0,0 +1,36 @@
+import _pt from "prop-types";
+import React from "react";
+import Field from "../Field";
+import "./OutputField.scss";
+/**
+ *
+ * Use output fields to display read-only information with a label and optional help text. Output fields are ideal for displaying calculated values or results of user input in a consistent format.
+ */
+export var OutputField = _ref => {
+  var {
+    id,
+    label,
+    value,
+    help,
+    required
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Field, {
+    forId: id,
+    label: label,
+    help: help,
+    labelClassName: "u-no-margin--bottom",
+    className: "output-field",
+    required: required
+  }, /*#__PURE__*/React.createElement("output", {
+    id: id,
+    className: "mono-font u-sv2"
+  }, /*#__PURE__*/React.createElement("b", null, value)));
+};
+OutputField.propTypes = {
+  id: _pt.string.isRequired,
+  label: _pt.string.isRequired,
+  value: _pt.string.isRequired,
+  help: _pt.node,
+  required: _pt.bool
+};
+export default OutputField;

package/dist/esm/components/OutputField/OutputField.scss

@@ -0,0 +1,11 @@
+@import "vanilla-framework";
+
+.output-field {
+  .p-form-help-text {
+    margin-top: -0.65rem;
+  }
+
+  .p-form__control {
+    margin-top: 0.25rem;
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import OutputField from "./OutputField";
+declare const meta: Meta<typeof OutputField>;
+export default meta;
+type Story = StoryObj<typeof OutputField>;
+export declare const Default: Story;
+export declare const HelpText: Story;
+export declare const Required: Story;

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

@@ -0,0 +1,55 @@
+import OutputField from "./OutputField";
+var meta = {
+  component: OutputField,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    id: {
+      control: {
+        type: "text"
+      }
+    },
+    value: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    required: {
+      control: {
+        type: "boolean"
+      }
+    }
+  },
+  args: {
+    label: "Label",
+    id: "output-field",
+    value: "Output value",
+    help: "",
+    required: false
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default"
+};
+export var HelpText = {
+  name: "Help Text",
+  args: {
+    help: "This is an output field with text"
+  }
+};
+export var Required = {
+  name: "Required",
+  args: {
+    required: true
+  }
+};

package/dist/esm/components/OutputField/OutputField.test.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default } from "./OutputField";
+export type { Props as OutputFieldProps } from "./OutputField";

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

@@ -0,0 +1 @@
+export { default } from "./OutputField";

package/dist/esm/components/PrefixedIpInput/PrefixedIpInput.js

@@ -43,7 +43,7 @@ var PrefixedIpInput = _ref => {
     }
   };
   return /*#__PURE__*/React.createElement(PrefixedInput, _extends({
-    help: help ? help : /*#__PURE__*/React.createElement(React.Fragment, null, " ", isIPV4 ? /*#__PURE__*/React.createElement(React.Fragment, null, " ", "The available range in this subnet is", " ", /*#__PURE__*/React.createElement("code", null, immutable, ".", editable, " ")) : /*#__PURE__*/React.createElement(React.Fragment, null, " ", "The available IPV6 address range is", " ", /*#__PURE__*/React.createElement("code", null, immutable, editable, " ")), "."),
+    help: help ? help : /*#__PURE__*/React.createElement(React.Fragment, null, " ", isIPV4 ? /*#__PURE__*/React.createElement(React.Fragment, null, " ", "The available range in this subnet is", " ", /*#__PURE__*/React.createElement("code", null, immutable, ".", editable, " ")) : /*#__PURE__*/React.createElement(React.Fragment, null, " ", "The subnet CIDR is ", /*#__PURE__*/React.createElement("code", null, cidr)), "."),
     immutableText: isIPV4 ? "".concat(immutable, ".") : immutable,
     maxLength: maxLength,
     name: name,

package/dist/esm/components/PrefixedIpInput/utils.d.ts

@@ -14,6 +14,7 @@ export declare const isIPv4: (ip: string) => boolean;
 export declare const getIpRangeFromCidr: (cidr: string) => string[];
 export declare const getFirstValidIp: (ip: string) => string;
 export declare const convertIpToUint32: (ip: string) => number;
+export declare const convertUint32ToIp: (ipAsUint32: number) => string;
 /**
  * Checks if an IPv4 address is valid for the given subnet.
  *
@@ -30,10 +31,18 @@ export declare const isIpInSubnet: (ip: string, cidr: string) => boolean;
  * @returns The immutable and editable octects as two strings in a list
  */
 export declare const getImmutableAndEditableOctets: (startIp: string, endIp: string) => string[];
+/**
+ * Separates the immutable and editable parts of an IPv6 subnet range.
+ * For simplcity, if the prefix is not on a group boundary, the entire last group is considered editable.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The immutable and editable parts as two strings in a list
+ */
+export declare const getImmutableAndEditableIPv6: (cidr: string) => string[];
 /**
  * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
  *
  * @param cidr The CIDR notation of the subnet
- * @returns The immutable and editable  as two strings in a list
+ * @returns The immutable and editable as two strings in a list
  */
 export declare const getImmutableAndEditable: (cidr: string) => string[];

package/dist/esm/components/PrefixedIpInput/utils.js

@@ -19,8 +19,11 @@ export var getIpRangeFromCidr = cidr => {
   // https://gist.github.com/binarymax/6114792
 
   // Get start IP and number of valid addresses
-  var [startIp, mask] = cidr.split("/");
-  var numberOfAddresses = (1 << 32 - parseInt(mask)) - 1;
+  var [unmaskedStartIp, mask] = cidr.split("/");
+  var maskBits = parseInt(mask, 10);
+  var subnetMask = maskBits === 0 ? 0 : 0xffffffff << 32 - maskBits >>> 0;
+  var startIp = convertUint32ToIp(convertIpToUint32(unmaskedStartIp) & subnetMask);
+  var numberOfAddresses = (1 << 32 - maskBits) - 1;
 
   // IPv4 can be represented by an unsigned 32-bit integer, so we can use a Uint32Array to store the IP
   var buffer = new ArrayBuffer(4); //4 octets
@@ -54,6 +57,13 @@ export var convertIpToUint32 = ip => {
   int32[0] = (octets[0] << 24) + (octets[1] << 16) + (octets[2] << 8) + octets[3];
   return int32[0];
 };
+export var convertUint32ToIp = ipAsUint32 => {
+  var buffer = new ArrayBuffer(4); //4 octets
+  var int32 = new Uint32Array(buffer);
+  int32[0] = ipAsUint32;
+  var octets = Array.from(new Uint8Array(buffer));
+  return octets.reverse().join(".");
+};
 
 /**
  * Checks if an IPv4 address is valid for the given subnet.
@@ -92,11 +102,35 @@ export var getImmutableAndEditableOctets = (startIp, endIp) => {
   return [immutable.join("."), editable.join(".")];
 };
 
+/**
+ * Separates the immutable and editable parts of an IPv6 subnet range.
+ * For simplcity, if the prefix is not on a group boundary, the entire last group is considered editable.
+ *
+ * @param cidr The CIDR notation of the subnet
+ * @returns The immutable and editable parts as two strings in a list
+ */
+export var getImmutableAndEditableIPv6 = cidr => {
+  var [address, prefix] = cidr.split("/");
+  var prefixLength = parseInt(prefix, 10);
+  var [left = "", right = ""] = address.split("::");
+  var leftGroups = left ? left.split(":").filter(Boolean) : [];
+  var rightGroups = right ? right.split(":").filter(Boolean) : [];
+  var missingGroups = Math.max(0, 8 - (leftGroups.length + rightGroups.length));
+  var expandedGroups = [...leftGroups, ...Array(missingGroups).fill("0"), ...Array(rightGroups.length).fill("0")];
+  var immutableGroupCount = Math.floor(prefixLength / 16);
+  var immutableIPV6 = immutableGroupCount > 0 ? "".concat(expandedGroups.slice(0, immutableGroupCount).join(":")) : "";
+  if (immutableGroupCount < 8) {
+    immutableIPV6 += immutableIPV6 ? ":" : "";
+  }
+  var editableIPV6 = "".concat(expandedGroups.slice(immutableGroupCount).join(":"));
+  return [immutableIPV6, editableIPV6];
+};
+
 /**
  * Get the immutable and editable parts of an IPv4 or IPv6 subnet.
  *
  * @param cidr The CIDR notation of the subnet
- * @returns The immutable and editable  as two strings in a list
+ * @returns The immutable and editable as two strings in a list
  */
 export var getImmutableAndEditable = cidr => {
   var isIPV4 = isIPv4(cidr.split("/")[0]);
@@ -104,9 +138,5 @@ export var getImmutableAndEditable = cidr => {
     var [startIp, endIp] = getIpRangeFromCidr(cidr);
     return getImmutableAndEditableOctets(startIp, endIp);
   }
-  var [networkAddress] = cidr.split("/");
-  var immutableIPV6 = networkAddress.substring(0, networkAddress.lastIndexOf(":"));
-  var ipv6PlaceholderColons = 7 - (immutableIPV6.match(/:/g) || []).length; // 7 is the maximum number of colons in an IPv6 address
-  var editableIPV6 = "".concat("0000:".repeat(ipv6PlaceholderColons), "0000");
-  return [immutableIPV6, editableIPV6];
+  return getImmutableAndEditableIPv6(cidr);
 };

package/dist/esm/index.d.ts

@@ -40,6 +40,7 @@ export * from "./components/MultiSelect";
 export { default as Notification, NotificationSeverity, } from "./components/Notifications";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
 export { default as LoginPageLayout } from "./components/LoginPageLayout";
+export { default as OutputField } from "./components/OutputField";
 export { default as Pagination } from "./components/Pagination";
 export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";
@@ -118,6 +119,7 @@ export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, NavLin
 export type { NotificationProps } from "./components/Notifications";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./components/NotificationProvider";
 export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
+export type { OutputFieldProps } from "./components/OutputField";
 export type { PaginationProps } from "./components/Pagination";
 export type { PanelProps } from "./components/Panel";
 export type { PrefixedInputProps } from "./components/PrefixedInput";

package/dist/esm/index.js

@@ -40,6 +40,7 @@ export * from "./components/MultiSelect";
 export { default as Notification, NotificationSeverity } from "./components/Notifications";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue } from "./components/NotificationProvider";
 export { default as LoginPageLayout } from "./components/LoginPageLayout";
+export { default as OutputField } from "./components/OutputField";
 export { default as Pagination } from "./components/Pagination";
 export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export * from "./components/MultiSelect";
 export { default as Notification, NotificationSeverity, } from "./components/Notifications";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
 export { default as LoginPageLayout } from "./components/LoginPageLayout";
+export { default as OutputField } from "./components/OutputField";
 export { default as Pagination } from "./components/Pagination";
 export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";
@@ -118,6 +119,7 @@ export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, NavLin
 export type { NotificationProps } from "./components/Notifications";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./components/NotificationProvider";
 export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
+export type { OutputFieldProps } from "./components/OutputField";
 export type { PaginationProps } from "./components/Pagination";
 export type { PanelProps } from "./components/Panel";
 export type { PrefixedInputProps } from "./components/PrefixedInput";

package/dist/index.js

@@ -61,6 +61,7 @@ var _exportNames = {
   failure: true,
   queue: true,
   LoginPageLayout: true,
+  OutputField: true,
   Pagination: true,
   Panel: true,
   PasswordToggle: true,
@@ -410,6 +411,12 @@ Object.defineProperty(exports, "NotificationSeverity", {
     return _Notifications.NotificationSeverity;
   }
 });
+Object.defineProperty(exports, "OutputField", {
+  enumerable: true,
+  get: function () {
+    return _OutputField.default;
+  }
+});
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
   get: function () {
@@ -919,6 +926,7 @@ Object.keys(_MultiSelect).forEach(function (key) {
 var _Notifications = _interopRequireWildcard(require("./components/Notifications"));
 var _NotificationProvider = require("./components/NotificationProvider");
 var _LoginPageLayout = _interopRequireDefault(require("./components/LoginPageLayout"));
+var _OutputField = _interopRequireDefault(require("./components/OutputField"));
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));
 var _Panel = _interopRequireDefault(require("./components/Panel"));
 var _PasswordToggle = _interopRequireDefault(require("./components/PasswordToggle"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -96,7 +96,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.46.0",
+    "vanilla-framework": "4.48.0",
     "wait-on": "9.0.3",
     "webpack": "5.105.0"
   },