@canonical/react-components 0.30.0 → 0.33.0

package/dist/components/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,9 +13,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _AccordionSection = _interopRequireDefault(require("../AccordionSection"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _excluded = ["key"],
+    _excluded2 = ["className", "expanded", "externallyControlled", "onExpandedChange", "sections", "titleElement"];
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,7 +30,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -40,7 +43,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var generateSections = function generateSections(sections, setExpanded, expanded, titleElement) {
   return sections.map(function (_ref, i) {
     var key = _ref.key,
-        props = _objectWithoutProperties(_ref, ["key"]);
+        props = _objectWithoutProperties(_ref, _excluded);
 
     return /*#__PURE__*/_react.default.createElement(_AccordionSection.default, _extends({
       expanded: expanded,
@@ -59,7 +62,7 @@ var Accordion = function Accordion(_ref2) {
       onExpandedChange = _ref2.onExpandedChange,
       sections = _ref2.sections,
       titleElement = _ref2.titleElement,
-      asideProps = _objectWithoutProperties(_ref2, ["className", "expanded", "externallyControlled", "onExpandedChange", "sections", "titleElement"]);
+      asideProps = _objectWithoutProperties(_ref2, _excluded2);
 
   var _useState = (0, _react.useState)(expanded),
       _useState2 = _slicedToArray(_useState, 2),

package/dist/components/AccordionSection/AccordionSection.js

@@ -1,19 +1,15 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _nanoid = require("nanoid");
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _useId = require("../../hooks/useId");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var AccordionSection = function AccordionSection(_ref) {
   var content = _ref.content,
@@ -25,8 +21,8 @@ var AccordionSection = function AccordionSection(_ref) {
       titleElement = _ref.titleElement,
       _ref$headingLevel = _ref.headingLevel,
       headingLevel = _ref$headingLevel === void 0 ? 3 : _ref$headingLevel;
-  var sectionId = (0, _react.useRef)((0, _nanoid.nanoid)());
-  var key = sectionKey || sectionId.current;
+  var sectionId = (0, _useId.useId)();
+  var key = sectionKey || sectionId;
   var isExpanded = expanded === key;
   var Title = titleElement || "div";
   return /*#__PURE__*/_react.default.createElement("li", {
@@ -36,7 +32,7 @@ var AccordionSection = function AccordionSection(_ref) {
     "aria-level": titleElement ? null : headingLevel,
     className: "p-accordion__heading"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    "aria-controls": "#".concat(sectionId.current),
+    "aria-controls": "#".concat(sectionId),
     "aria-expanded": isExpanded ? "true" : "false",
     className: "p-accordion__tab",
     onClick: function onClick() {
@@ -52,9 +48,9 @@ var AccordionSection = function AccordionSection(_ref) {
     type: "button"
   }, title)), /*#__PURE__*/_react.default.createElement("section", {
     "aria-hidden": isExpanded ? "false" : "true",
-    "aria-labelledby": sectionId.current,
+    "aria-labelledby": sectionId,
     className: "p-accordion__panel",
-    id: sectionId.current,
+    id: sectionId,
     role: "tabpanel"
   }, content));
 };

package/dist/components/ActionButton/ActionButton.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,9 +13,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _excluded = ["appearance", "children", "className", "disabled", "inline", "loading", "success"];
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,7 +31,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -56,7 +58,7 @@ var ActionButton = function ActionButton(_ref) {
       loading = _ref$loading === void 0 ? false : _ref$loading,
       _ref$success = _ref.success,
       success = _ref$success === void 0 ? false : _ref$success,
-      buttonProps = _objectWithoutProperties(_ref, ["appearance", "children", "className", "disabled", "inline", "loading", "success"]);
+      buttonProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(),
       _useState2 = _slicedToArray(_useState, 2),

package/dist/components/ArticlePagination/ArticlePagination.js

@@ -9,6 +9,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _excluded = ["className", "nextURL", "nextLabel", "previousURL", "previousLabel"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
@@ -23,7 +25,7 @@ var ArticlePagination = function ArticlePagination(_ref) {
       nextLabel = _ref.nextLabel,
       previousURL = _ref.previousURL,
       previousLabel = _ref.previousLabel,
-      props = _objectWithoutProperties(_ref, ["className", "nextURL", "nextLabel", "previousURL", "previousLabel"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement("footer", _extends({
     className: (0, _classnames.default)(className, "p-article-pagination")

package/dist/components/Button/Button.js

@@ -9,6 +9,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _excluded = ["appearance", "children", "className", "dense", "disabled", "element", "hasIcon", "inline", "onClick", "small"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
@@ -47,7 +49,7 @@ var Button = function Button(_ref) {
       inline = _ref.inline,
       onClick = _ref.onClick,
       small = _ref.small,
-      buttonProps = _objectWithoutProperties(_ref, ["appearance", "children", "className", "dense", "disabled", "element", "hasIcon", "inline", "onClick", "small"]);
+      buttonProps = _objectWithoutProperties(_ref, _excluded);
 
   var classes = (0, _classnames.default)(appearance ? "p-button--".concat(appearance) : "p-button", {
     "has-icon": hasIcon,

package/dist/components/Button/index.js

@@ -1,25 +1,25 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "ButtonAppearance", {
   enumerable: true,
   get: function get() {
-    return _Button.default;
+    return _Button.ButtonAppearance;
   }
 });
-Object.defineProperty(exports, "ButtonAppearance", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _Button.ButtonAppearance;
+    return _Button.default;
   }
 });
 
 var _Button = _interopRequireWildcard(require("./Button"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/components/Card/Card.js

@@ -9,6 +9,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _excluded = ["children", "className", "highlighted", "overlay", "thumbnail", "title"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
@@ -24,7 +26,7 @@ var Card = function Card(_ref) {
       overlay = _ref.overlay,
       thumbnail = _ref.thumbnail,
       title = _ref.title,
-      props = _objectWithoutProperties(_ref, ["children", "className", "highlighted", "overlay", "thumbnail", "title"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)(className, {

package/dist/components/CheckableInput/CheckableInput.d.ts

@@ -10,10 +10,18 @@ export declare type Props = PropsWithSpread<{
      * The label for the input element.
      */
     label: ReactNode;
+    /**
+     * Optional class(es) to pass to the label element.
+     */
+    labelClassName?: string;
     /**
      * Whether the input element should display in indeterminate state.
      */
     indeterminate?: boolean;
+    /**
+     * Ensures the input and the label text are properly aligned with other inline text.
+     */
+    inline?: boolean;
 }, Omit<HTMLProps<HTMLInputElement>, "type">>;
-declare const CheckableInput: ({ inputType, label, indeterminate, ...checkboxProps }: Props) => JSX.Element;
+declare const CheckableInput: ({ inputType, label, labelClassName, indeterminate, ...checkboxProps }: Props) => JSX.Element;
 export default CheckableInput;

package/dist/components/CheckableInput/CheckableInput.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,13 +9,15 @@ exports.default = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _nanoid = require("nanoid");
-
 var _react = _interopRequireWildcard(require("react"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _useId = require("../../hooks/useId");
+
+var _excluded = ["inputType", "label", "labelClassName", "indeterminate"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28,27 +30,28 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var CheckableInput = function CheckableInput(_ref) {
   var inputType = _ref.inputType,
       label = _ref.label,
+      labelClassName = _ref.labelClassName,
       _ref$indeterminate = _ref.indeterminate,
       indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
-      checkboxProps = _objectWithoutProperties(_ref, ["inputType", "label", "indeterminate"]);
+      checkboxProps = _objectWithoutProperties(_ref, _excluded);
 
-  var inputId = (0, _react.useRef)((0, _nanoid.nanoid)());
+  var inputId = (0, _useId.useId)();
   var inputRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
   return /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _classnames.default)("p-".concat(inputType), {
+    className: (0, _classnames.default)(labelClassName, "p-".concat(inputType).concat(checkboxProps.inline ? "--inline" : ""), {
       "is-required": checkboxProps.required
     })
   }, /*#__PURE__*/_react.default.createElement("input", _extends({
-    "aria-labelledby": inputId.current,
+    "aria-labelledby": inputId,
     className: "p-".concat(inputType, "__input"),
     ref: inputRef,
     type: inputType
   }, checkboxProps)), /*#__PURE__*/_react.default.createElement("span", {
     className: "p-".concat(inputType, "__label"),
-    id: inputId.current
+    id: inputId
   }, label));
 };
 

package/dist/components/CheckboxInput/CheckboxInput.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _CheckableInput = _interopRequireDefault(require("../CheckableInput"));
 
+var _excluded = ["label", "indeterminate"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
@@ -21,7 +23,7 @@ var CheckboxInput = function CheckboxInput(_ref) {
   var label = _ref.label,
       _ref$indeterminate = _ref.indeterminate,
       indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
-      checkboxProps = _objectWithoutProperties(_ref, ["label", "indeterminate"]);
+      checkboxProps = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({
     label: label,

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

@@ -1,5 +1,16 @@
-import type { MouseEvent } from "react";
-export declare type Props = {
+import type { MouseEvent, HTMLProps } from "react";
+import { ValueOf, PropsWithSpread } from "../../types";
+export declare const ChipType: {
+    readonly CAUTION: "caution";
+    readonly INFORMATION: "information";
+    readonly NEGATIVE: "negative";
+    readonly POSITIVE: "positive";
+};
+export declare type Props = PropsWithSpread<{
+    /**
+     * The appearance of the chip.
+     */
+    appearance?: ValueOf<typeof ChipType>;
     /**
      * The lead for the chip.
      */
@@ -32,6 +43,6 @@ export declare type Props = {
      * The value of the chip.
      */
     value: string;
-};
-declare const Chip: ({ lead, onClick, onDismiss, quoteValue, selected, subString, value, }: Props) => JSX.Element;
+}, HTMLProps<HTMLSpanElement>>;
+declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => JSX.Element;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -3,16 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ChipType = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _utils = require("../../utils");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["appearance", "lead", "onClick", "onDismiss", "quoteValue", "selected", "subString", "value"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+var ChipType = {
+  CAUTION: "caution",
+  INFORMATION: "information",
+  NEGATIVE: "negative",
+  POSITIVE: "positive"
+};
+exports.ChipType = ChipType;
+
 var Chip = function Chip(_ref) {
-  var _ref$lead = _ref.lead,
+  var _classNames;
+
+  var appearance = _ref.appearance,
+      _ref$lead = _ref.lead,
       lead = _ref$lead === void 0 ? "" : _ref$lead,
       onClick = _ref.onClick,
       onDismiss = _ref.onDismiss,
@@ -20,7 +43,8 @@ var Chip = function Chip(_ref) {
       selected = _ref.selected,
       _ref$subString = _ref.subString,
       subString = _ref$subString === void 0 ? "" : _ref$subString,
-      value = _ref.value;
+      value = _ref.value,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   // When user tabs over chip and presses Enter or Space key, chip will trigger
   // click functionality
@@ -47,21 +71,21 @@ var Chip = function Chip(_ref) {
     }
   }));
 
+  var chipClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, "p-chip--".concat(appearance), !!appearance), _defineProperty(_classNames, "p-chip", !appearance), _classNames));
+
   if (onDismiss) {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: "p-chip",
+    return /*#__PURE__*/_react.default.createElement("span", _extends({
+      className: chipClassName,
       "aria-pressed": selected
-    }, chipContent, /*#__PURE__*/_react.default.createElement("button", {
+    }, props), chipContent, /*#__PURE__*/_react.default.createElement("button", {
       className: "p-chip__dismiss",
-      onClick: function onClick() {
-        return onDismiss();
-      }
+      onClick: onDismiss
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "p-icon--close"
     }, "Dismiss")));
   } else {
     return /*#__PURE__*/_react.default.createElement("button", {
-      className: "p-chip",
+      className: chipClassName,
       "aria-pressed": selected,
       onClick: onClick,
       onKeyDown: function onKeyDown(e) {

package/dist/components/Code/Code.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -15,9 +15,11 @@ var _CodeSnippet = _interopRequireWildcard(require("../CodeSnippet"));
 
 var _utils = require("../../utils");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _excluded = ["children", "className", "inline", "copyable", "numbered"];
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -36,7 +38,7 @@ var Code = function Code(_ref) {
       inline = _ref.inline,
       copyable = _ref.copyable,
       numbered = _ref.numbered,
-      props = _objectWithoutProperties(_ref, ["children", "className", "inline", "copyable", "numbered"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   if (_utils.IS_DEV) {
     console.warn("Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.");

package/dist/components/CodeSnippet/CodeSnippet.d.ts

@@ -1,6 +1,7 @@
+import { HTMLProps } from "react";
 import type { Props as CodeSnippetBlockProps } from "./CodeSnippetBlock";
-import type { ClassName } from "../../types";
-export declare type Props = {
+import type { ClassName, PropsWithSpread } from "../../types";
+export declare type Props = PropsWithSpread<{
     /**
      * Optional class(es) to pass to the wrapping div element.
      */
@@ -9,5 +10,5 @@ export declare type Props = {
      * A list of code blocks to display.
      */
     blocks: CodeSnippetBlockProps[];
-};
-export default function CodeSnippet({ className, blocks }: Props): JSX.Element;
+}, HTMLProps<HTMLDivElement>>;
+export default function CodeSnippet({ className, blocks, ...props }: Props): JSX.Element;

package/dist/components/CodeSnippet/CodeSnippet.js

@@ -5,34 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CodeSnippet;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _CodeSnippetBlock = _interopRequireDefault(require("./CodeSnippetBlock"));
 
+var _excluded = ["className", "blocks"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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; }
+
 function CodeSnippet(_ref) {
   var className = _ref.className,
-      blocks = _ref.blocks;
-  return /*#__PURE__*/_react.default.createElement("div", {
+      blocks = _ref.blocks,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)("p-code-snippet", {
       "is-bordered": blocks.some(function (block) {
         return block.content;
       })
     }, className)
-  }, blocks.map(function (props, i) {
+  }, props), blocks.map(function (blockProps, i) {
     return /*#__PURE__*/_react.default.createElement(_CodeSnippetBlock.default, _extends({
       key: "code-snippet-block-".concat(i)
-    }, props));
+    }, blockProps));
   }));
-}
-
-CodeSnippet.propTypes = {
-  blocks: _propTypes.default.array.isRequired
-};
+}

package/dist/components/CodeSnippet/CodeSnippetBlock.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = CodeSnippetBlock;
 exports.CodeSnippetBlockAppearance = void 0;
+exports.default = CodeSnippetBlock;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 

package/dist/components/CodeSnippet/CodeSnippetDropdown.js

@@ -7,6 +7,9 @@ exports.default = CodeSnippetDropdown;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _excluded = ["options", "onChange"],
+    _excluded2 = ["label", "value"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
@@ -18,7 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function CodeSnippetDropdown(_ref) {
   var options = _ref.options,
       onChange = _ref.onChange,
-      props = _objectWithoutProperties(_ref, ["options", "onChange"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement("select", _extends({
     className: "p-code-snippet__dropdown",
@@ -26,7 +29,7 @@ function CodeSnippetDropdown(_ref) {
   }, props), options.map(function (_ref2) {
     var label = _ref2.label,
         value = _ref2.value,
-        props = _objectWithoutProperties(_ref2, ["label", "value"]);
+        props = _objectWithoutProperties(_ref2, _excluded2);
 
     return /*#__PURE__*/_react.default.createElement("option", _extends({
       value: value,