@canonical/react-components 4.5.4 → 4.6.1

package/dist/components/ActionButton/ActionButton.d.ts

@@ -1,7 +1,6 @@
-import React, { MouseEventHandler } from "react";
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import React from "react";
 import type { ButtonProps } from "../Button";
-import type { ClassName, PropsWithSpread } from "../../types";
+import type { PropsWithSpread } from "../../types";
 export declare const LOADER_MIN_DURATION = 400;
 export declare const SUCCESS_DURATION = 2000;
 export declare enum Label {
@@ -9,39 +8,15 @@ export declare enum Label {
     SUCCESS = "Action completed"
 }
 export type Props = PropsWithSpread<{
-    /**
-     * The appearance of the button.
-     */
-    appearance?: ButtonProps["appearance"];
-    /**
-     * The content of the button.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the button element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the button should be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the button should display inline.
-     */
-    inline?: boolean;
     /**
      * Whether the button should be in the loading state.
      */
     loading?: boolean;
-    /**
-     * Function for handling button click event.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Whether the button should be in the success state.
      */
     success?: boolean;
-}, ButtonHTMLAttributes<HTMLButtonElement>>;
+}, ButtonProps>;
 /**
  * This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions.
  *
@@ -49,5 +24,5 @@ export type Props = PropsWithSpread<{
  * [Button](?path=/docs/components-button--docs) in addition to those in the
  * props table:
  */
-declare const ActionButton: ({ appearance, children, className, onClick, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
+declare const ActionButton: ({ children, className, disabled, loading, success, ...buttonProps }: Props) => React.JSX.Element;
 export default ActionButton;

package/dist/components/ActionButton/ActionButton.js

@@ -7,7 +7,8 @@ exports.default = exports.SUCCESS_DURATION = exports.Label = exports.LOADER_MIN_
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-const _excluded = ["appearance", "children", "className", "onClick", "disabled", "inline", "loading", "success"];
+var _Button = _interopRequireDefault(require("../Button"));
+const _excluded = ["children", "className", "disabled", "loading", "success"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -29,12 +30,9 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
  */
 const ActionButton = _ref => {
   let {
-      appearance,
       children,
       className,
-      onClick,
       disabled = null,
-      inline = false,
       loading = false,
       success = false
     } = _ref,
@@ -105,26 +103,16 @@ const ActionButton = _ref => {
     }
     return () => window.clearTimeout(successTimeout);
   }, [showSuccess]);
-  const buttonClasses = (0, _classnames.default)(className, "p-action-button", appearance ? "p-button--".concat(appearance) : "p-button", {
-    "is-processing": showLoader || showSuccess,
-    "is-disabled": disabled === null ? showLoader : disabled,
-    "is-inline": inline
+  const buttonClasses = (0, _classnames.default)(className, "p-action-button", {
+    "is-processing": showLoader || showSuccess
   });
   const showIcon = showLoader || showSuccess;
-  const isDisabled = disabled === null ? showLoader : disabled;
   const icon = showLoader && "spinner" || showSuccess && "success" || null;
-  const iconLight = appearance === "positive" || appearance === "negative";
-  const onClickDisabled = e => e.preventDefault();
-
-  // This component uses the base button element instead of the Button component
-  // as the button requires a ref and Button would have to be updated to use
-  // forwardRef which is not currently supported by components that use
-  // typescript generics.
-  return /*#__PURE__*/_react.default.createElement("button", _extends({
+  const iconLight = buttonProps.appearance === "positive" || buttonProps.appearance === "negative";
+  return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
     className: buttonClasses,
     ref: ref,
-    onClick: isDisabled ? onClickDisabled : onClick,
-    "aria-disabled": isDisabled || undefined,
+    disabled: disabled === null ? showLoader : disabled,
     style: height && width ? {
       height: "".concat(height, "px"),
       width: "".concat(width, "px")

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode } from "react";
+import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode, Ref } from "react";
 import type { ClassName, ValueOf } from "../../types";
 export declare const ButtonAppearance: {
     readonly BASE: "base";
@@ -54,6 +54,10 @@ export type Props<P = null> = {
      * Whether the button should be small.
      */
     small?: boolean;
+    /**
+     * A ref to the button.
+     */
+    ref?: Ref<HTMLButtonElement>;
 } & (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> | P);
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Button](https://docs.vanillaframework.io/patterns/buttons/).

package/dist/components/CheckboxInput/CheckboxInput.d.ts

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import type { CheckableInputProps } from "./CheckableInput";
-export type Props = Omit<CheckableInputProps, "inputType">;
+export type Props = Omit<CheckableInputProps, "inputType"> & {
+    caution?: ReactNode;
+    className?: string;
+    error?: ReactNode;
+    help?: ReactNode;
+    helpClassName?: string;
+    id?: string;
+    inline?: boolean;
+    success?: ReactNode;
+};
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Checkbox input](https://docs.vanillaframework.io/base/forms#checkbox).
  *
  * Use the checkbox component to select one or more options.
  */
-declare const CheckboxInput: ({ label, indeterminate, ...checkboxProps }: Props) => React.JSX.Element;
+declare const CheckboxInput: ({ label, indeterminate, caution, className, error, help, helpClassName, id, inline, success, ...checkboxProps }: Props) => React.JSX.Element;
 export default CheckboxInput;

package/dist/components/CheckboxInput/CheckboxInput.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _CheckableInput = _interopRequireDefault(require("./CheckableInput"));
-const _excluded = ["label", "indeterminate"];
+var _Field = _interopRequireDefault(require("../Field"));
+const _excluded = ["label", "indeterminate", "caution", "className", "error", "help", "helpClassName", "id", "inline", "success"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -19,13 +23,55 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 const CheckboxInput = _ref => {
   let {
       label,
-      indeterminate = false
+      indeterminate = false,
+      caution,
+      className,
+      error,
+      help,
+      helpClassName,
+      id,
+      inline,
+      success
     } = _ref,
     checkboxProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({
-    label: label,
+  const defaultInputId = (0, _react.useId)();
+  const inputId = id || defaultInputId;
+  const validationId = (0, _react.useId)();
+  const helpId = (0, _react.useId)();
+  const hasError = !!error;
+  return /*#__PURE__*/_react.default.createElement(_Field.default, {
+    caution: caution,
+    className: (0, _classnames.default)(className, {
+      "p-checkbox--inline": inline
+    }),
+    error: error,
+    forId: inputId,
+    help: help,
+    helpClassName: helpClassName,
+    helpId: helpId,
+    inline: inline,
+    isTickElement: true,
+    success: success,
+    validationId: validationId
+  }, /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({}, checkboxProps, {
+    "aria-describedby": help ? helpId : undefined,
+    "aria-errormessage": hasError ? validationId : undefined,
+    "aria-invalid": hasError,
+    id: inputId,
+    indeterminate: indeterminate,
+    inline: inline,
     inputType: "checkbox",
-    indeterminate: indeterminate
-  }, checkboxProps));
+    label: label
+  })));
+};
+CheckboxInput.propTypes = {
+  caution: _propTypes.default.node,
+  className: _propTypes.default.string,
+  error: _propTypes.default.node,
+  help: _propTypes.default.node,
+  helpClassName: _propTypes.default.string,
+  id: _propTypes.default.string,
+  inline: _propTypes.default.bool,
+  success: _propTypes.default.node
 };
 var _default = exports.default = CheckboxInput;

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

@@ -4,8 +4,12 @@ declare const meta: Meta<typeof CheckboxInput>;
 export default meta;
 type Story = StoryObj<typeof CheckboxInput>;
 export declare const Default: Story;
-export declare const Children: Story;
+export declare const Caution: Story;
 export declare const Disabled: Story;
-export declare const Required: Story;
-export declare const Inline: Story;
+export declare const Error: Story;
+export declare const Help: Story;
 export declare const Indeterminate: Story;
+export declare const Inline: Story;
+export declare const LabelWithChildElements: Story;
+export declare const Required: Story;
+export declare const Success: Story;

package/dist/components/CheckboxInput/CheckboxInput.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Required = exports.Inline = exports.Indeterminate = exports.Disabled = exports.Default = exports.Children = void 0;
+exports.default = exports.Success = exports.Required = exports.LabelWithChildElements = exports.Inline = exports.Indeterminate = exports.Help = exports.Error = exports.Disabled = exports.Default = exports.Caution = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _CheckboxInput = _interopRequireDefault(require("./CheckboxInput"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -45,14 +45,12 @@ var _default = exports.default = meta;
 const Default = exports.Default = {
   name: "Default"
 };
-const Children = exports.Children = {
+const Caution = exports.Caution = {
   render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
-    label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "I agree to", /*#__PURE__*/_react.default.createElement("a", {
-      href: "http://ubuntu.com/legal"
-    }, "Terms and Conditions")),
-    name: "CheckboxInput"
+    label: "Caution",
+    caution: "This is a caution message"
   }),
-  name: "Label with child elements"
+  name: "Caution"
 };
 const Disabled = exports.Disabled = {
   render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
@@ -61,19 +59,19 @@ const Disabled = exports.Disabled = {
   }),
   name: "Disabled"
 };
-const Required = exports.Required = {
+const Error = exports.Error = {
   render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
-    label: "Required",
-    required: true
+    label: "Error",
+    error: "This is an error message"
   }),
-  name: "Required"
+  name: "Error"
 };
-const Inline = exports.Inline = {
+const Help = exports.Help = {
   render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
-    label: "Inline",
-    inline: true
+    label: "Help",
+    help: "This is a help message"
   }),
-  name: "Inline"
+  name: "Help"
 };
 const Indeterminate = exports.Indeterminate = {
   render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
@@ -81,4 +79,34 @@ const Indeterminate = exports.Indeterminate = {
     indeterminate: true
   }),
   name: "Indeterminate"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    inline: true,
+    label: "Inline"
+  }),
+  name: "Inline"
+};
+const LabelWithChildElements = exports.LabelWithChildElements = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "I agree to", /*#__PURE__*/_react.default.createElement("a", {
+      href: "http://ubuntu.com/legal"
+    }, "Terms and Conditions")),
+    name: "CheckboxInput"
+  }),
+  name: "Label with child elements"
+};
+const Required = exports.Required = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Required",
+    required: true
+  }),
+  name: "Required"
+};
+const Success = exports.Success = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Success",
+    success: "This is a success message"
+  }),
+  name: "Success"
 };

package/dist/components/ConfirmationModal/ConfirmationModal.stories.js

@@ -7,6 +7,7 @@ exports.default = exports.Positive = exports.NoTitle = exports.Extra = exports.D
 var _react = _interopRequireWildcard(require("react"));
 var _ConfirmationModal = _interopRequireDefault(require("./ConfirmationModal"));
 var _Input = _interopRequireDefault(require("../Input"));
+var _Icon = _interopRequireDefault(require("../Icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const doNothing = () => {};
@@ -24,9 +25,15 @@ const Default = exports.Default = {
       onClick: () => setModalOpen(true)
     }, "Open confirmation modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
       title: "Confirm delete",
-      confirmButtonLabel: "Delete",
+      confirmButtonLabel: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        name: "delete",
+        light: true
+      }), /*#__PURE__*/_react.default.createElement("span", null, "Delete")),
       onConfirm: doNothing,
-      close: closeHandler
+      close: closeHandler,
+      confirmButtonProps: {
+        hasIcon: true
+      }
     }, /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")) : null);
   },
   name: "Default"

package/dist/components/Field/Field.d.ts

@@ -42,6 +42,10 @@ export type Props = {
      * An id to give to the help element.
      */
     helpId?: string;
+    /**
+     * Whether the component is inline.
+     */
+    inline?: boolean;
     /**
      * Whether the component is wrapping a select element.
      */
@@ -87,5 +91,5 @@ export type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpAfterLabel, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, stackedFieldColumns, stackedLabelColumns, success, validationId, ...props }: Props) => React.JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpAfterLabel, helpId, inline, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, stackedFieldColumns, stackedLabelColumns, success, validationId, ...props }: Props) => React.JSX.Element;
 export default Field;

package/dist/components/Field/Field.js

@@ -8,7 +8,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _Label = _interopRequireDefault(require("../Label"));
 var _Col = _interopRequireDefault(require("../Col"));
-const _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpAfterLabel", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "validationId"];
+const _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpAfterLabel", "helpId", "inline", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "validationId"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -67,10 +67,14 @@ const generateContent = _ref2 => {
     caution,
     success,
     validationId,
-    helpAfterLabel
+    helpAfterLabel,
+    inline
   } = _ref2;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-form__control u-clearfix"
+  const WrapperComponent = inline ? "span" : "div";
+  return /*#__PURE__*/_react.default.createElement(WrapperComponent, {
+    className: (0, _classnames.default)("p-form__control", {
+      "u-clearfix": !inline
+    })
   }, isSelect ? /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-validation__select-wrapper"
   }, children) : children, !labelFirst && labelNode, helpAfterLabel ? null : help, generateError(error, caution, success, validationId));
@@ -86,6 +90,7 @@ const Field = _ref3 => {
       helpClassName,
       helpAfterLabel,
       helpId,
+      inline,
       isSelect,
       isTickElement,
       label,
@@ -116,9 +121,11 @@ const Field = _ref3 => {
     caution,
     success,
     validationId,
-    helpAfterLabel
+    helpAfterLabel,
+    inline
   });
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
+  const WrapperComponent = inline ? "span" : "div";
+  return /*#__PURE__*/_react.default.createElement(WrapperComponent, _extends({
     className: (0, _classnames.default)("p-form__group", "p-form-validation", className, {
       "is-error": error,
       "is-caution": caution,

package/dist/components/Input/Input.js

@@ -52,7 +52,6 @@ const Input = _ref => {
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   const inputRef = (0, _react.useRef)(null);
-  const fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
   const defaultInputId = (0, _react.useId)();
   const inputId = id || defaultInputId;
   const validationId = (0, _react.useId)();
@@ -75,22 +74,30 @@ const Input = _ref => {
       }
     }
   }, [takeFocus, takeFocusDelay]);
-  let input;
   if (type === "checkbox") {
-    input = /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, _extends({
+    return /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, _extends({
       label: label,
-      labelClassName: labelClassName
+      labelClassName: labelClassName,
+      caution: caution,
+      className: wrapperClassName,
+      error: error,
+      help: help,
+      helpClassName: helpClassName,
+      required: required,
+      success: success
     }, commonProps));
-  } else if (type === "radio") {
-    input = /*#__PURE__*/_react.default.createElement(_RadioInput.default, _extends({
+  }
+  if (type === "radio") {
+    return /*#__PURE__*/_react.default.createElement(_RadioInput.default, _extends({
       label: label,
-      labelClassName: labelClassName
-    }, commonProps));
-  } else {
-    input = /*#__PURE__*/_react.default.createElement("input", _extends({
-      className: (0, _classnames.default)("p-form-validation__input", className),
-      ref: inputRef,
-      type: type
+      labelClassName: labelClassName,
+      caution: caution,
+      className: wrapperClassName,
+      error: error,
+      help: help,
+      helpClassName: helpClassName,
+      required: required,
+      success: success
     }, commonProps));
   }
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
@@ -102,8 +109,7 @@ const Input = _ref => {
     helpAfterLabel: helpAfterLabel,
     helpClassName: helpClassName,
     helpId: helpId,
-    isTickElement: type === "checkbox" || type === "radio",
-    label: fieldLabel,
+    label: label,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
@@ -111,6 +117,10 @@ const Input = _ref => {
     stackedLabelColumns: stackedLabelColumns,
     success: success,
     validationId: validationId
-  }, input);
+  }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    className: (0, _classnames.default)("p-form-validation__input", className),
+    ref: inputRef,
+    type: type
+  }, commonProps)));
 };
 var _default = exports.default = Input;

package/dist/components/RadioInput/RadioInput.d.ts

@@ -1,10 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import type { CheckableInputProps } from "../CheckboxInput/CheckableInput";
-export type Props = Omit<CheckableInputProps, "inputType">;
+export type Props = Omit<CheckableInputProps, "inputType"> & {
+    caution?: ReactNode;
+    className?: string;
+    error?: ReactNode;
+    help?: ReactNode;
+    helpClassName?: string;
+    id?: string;
+    inline?: boolean;
+    success?: ReactNode;
+    wrapperClassName?: string;
+};
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
  *
  * Use radio buttons to select one of the given set of options.
  */
-declare const RadioInput: ({ label, ...radioProps }: Props) => React.JSX.Element;
+declare const RadioInput: ({ label, caution, className, error, help, helpClassName, id, inline, success, ...radioProps }: Props) => React.JSX.Element;
 export default RadioInput;

package/dist/components/RadioInput/RadioInput.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _CheckableInput = _interopRequireDefault(require("../CheckboxInput/CheckableInput"));
-const _excluded = ["label"];
+var _Field = _interopRequireDefault(require("../Field"));
+const _excluded = ["label", "caution", "className", "error", "help", "helpClassName", "id", "inline", "success"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -18,12 +22,55 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  */
 const RadioInput = _ref => {
   let {
-      label
+      label,
+      caution,
+      className,
+      error,
+      help,
+      helpClassName,
+      id,
+      inline,
+      success
     } = _ref,
     radioProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({
+  const defaultInputId = (0, _react.useId)();
+  const inputId = id || defaultInputId;
+  const validationId = (0, _react.useId)();
+  const helpId = (0, _react.useId)();
+  const hasError = !!error;
+  return /*#__PURE__*/_react.default.createElement(_Field.default, {
+    caution: caution,
+    className: (0, _classnames.default)(className, {
+      "p-radio--inline": inline
+    }),
+    error: error,
+    forId: inputId,
+    help: help,
+    helpClassName: helpClassName,
+    helpId: helpId,
+    isTickElement: true,
+    success: success,
+    validationId: validationId,
+    inline: inline
+  }, /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({}, radioProps, {
+    "aria-describedby": help ? helpId : undefined,
+    "aria-errormessage": hasError ? validationId : undefined,
+    "aria-invalid": hasError,
+    id: inputId,
+    inline: inline,
     inputType: "radio",
     label: label
-  }, radioProps));
+  })));
+};
+RadioInput.propTypes = {
+  caution: _propTypes.default.node,
+  className: _propTypes.default.string,
+  error: _propTypes.default.node,
+  help: _propTypes.default.node,
+  helpClassName: _propTypes.default.string,
+  id: _propTypes.default.string,
+  inline: _propTypes.default.bool,
+  success: _propTypes.default.node,
+  wrapperClassName: _propTypes.default.string
 };
 var _default = exports.default = RadioInput;

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

@@ -4,7 +4,11 @@ declare const meta: Meta<typeof RadioInput>;
 export default meta;
 type Story = StoryObj<typeof RadioInput>;
 export declare const Default: Story;
+export declare const Caution: Story;
 export declare const Children: Story;
 export declare const Disabled: Story;
-export declare const Required: Story;
+export declare const Error: Story;
+export declare const Help: Story;
 export declare const Inline: Story;
+export declare const Required: Story;
+export declare const Success: Story;