@canonical/react-components 0.24.0 → 0.32.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,21 +1,13 @@
 "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 _propTypes = _interopRequireDefault(require("prop-types"));
-
-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; }
-
-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; }
+var _useId = require("../../hooks/useId");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,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", {
@@ -40,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() {
@@ -56,21 +48,12 @@ 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));
 };
 
-AccordionSection.propTypes = {
-  content: _propTypes.default.node,
-  expanded: _propTypes.default.string,
-  headingLevel: _propTypes.default.number,
-  onTitleClick: _propTypes.default.func,
-  sectionKey: _propTypes.default.string,
-  setExpanded: _propTypes.default.func,
-  title: _propTypes.default.string
-};
 var _default = AccordionSection;
 exports.default = _default;

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
@@ -11,13 +11,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Button = require("../Button");
-
 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 _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 }; }
 
@@ -31,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; }
 
@@ -47,8 +47,7 @@ var SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
 exports.SUCCESS_DURATION = SUCCESS_DURATION;
 
 var ActionButton = function ActionButton(_ref) {
-  var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? _Button.ButtonAppearance.NEUTRAL : _ref$appearance,
+  var appearance = _ref.appearance,
       children = _ref.children,
       className = _ref.className,
       _ref$disabled = _ref.disabled,
@@ -59,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),
@@ -126,7 +125,7 @@ var ActionButton = function ActionButton(_ref) {
       return window.clearTimeout(successTimeout);
     };
   }, [showSuccess]);
-  var buttonClasses = (0, _classnames.default)(className, "p-action-button", "p-button--".concat(appearance), {
+  var buttonClasses = (0, _classnames.default)(className, "p-action-button", appearance ? "p-button--".concat(appearance) : "p-button", {
     "is-processing": showLoader || showSuccess,
     "is-disabled": disabled,
     "is-inline": inline

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.d.ts

@@ -5,7 +5,6 @@ export declare const ButtonAppearance: {
     readonly BRAND: "brand";
     readonly LINK: "link";
     readonly NEGATIVE: "negative";
-    readonly NEUTRAL: "neutral";
     readonly POSITIVE: "positive";
 };
 /**
@@ -34,7 +33,7 @@ export declare type Props<P = null> = {
      */
     disabled?: boolean;
     /**
-     * Optional element or component to use instead of <button>.
+     * Optional element or component to use instead of `button`.
      */
     element?: ElementType | ComponentType<P>;
     /**

package/dist/components/Button/Button.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ButtonAppearance = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 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); }
@@ -24,7 +24,6 @@ var ButtonAppearance = {
   BRAND: "brand",
   LINK: "link",
   NEGATIVE: "negative",
-  NEUTRAL: "neutral",
   POSITIVE: "positive"
 };
 /**
@@ -39,8 +38,7 @@ exports.ButtonAppearance = ButtonAppearance;
  * @template P - The type of the props if providing a component to `element`
  */
 var Button = function Button(_ref) {
-  var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? ButtonAppearance.NEUTRAL : _ref$appearance,
+  var appearance = _ref.appearance,
       children = _ref.children,
       className = _ref.className,
       dense = _ref.dense,
@@ -51,9 +49,9 @@ 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)("p-button--".concat(appearance), {
+  var classes = (0, _classnames.default)(appearance ? "p-button--".concat(appearance) : "p-button", {
     "has-icon": hasIcon,
     "is-dense": dense,
     "is-disabled": Component !== "button" && disabled,
@@ -76,15 +74,5 @@ var Button = function Button(_ref) {
   }, disabledProp, buttonProps), children);
 };
 
-Button.propTypes = {
-  children: _propTypes.default.node,
-  dense: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  element: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.elementType]),
-  hasIcon: _propTypes.default.bool,
-  inline: _propTypes.default.bool,
-  onClick: _propTypes.default.func,
-  small: _propTypes.default.bool
-};
 var _default = Button;
 exports.default = _default;

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";
+import { ValueOf } from "../../types";
+export declare const ChipType: {
+    readonly CAUTION: "caution";
+    readonly INFORMATION: "information";
+    readonly NEGATIVE: "negative";
+    readonly POSITIVE: "positive";
+};
 export declare type Props = {
+    /**
+     * The appearance of the chip.
+     */
+    appearance?: ValueOf<typeof ChipType>;
     /**
      * The lead for the chip.
      */
@@ -7,7 +18,7 @@ export declare type Props = {
     /**
      * Function for handling chip div click event.
      */
-    onClick?: (event: MouseEvent<HTMLDivElement> | {
+    onClick?: (event: MouseEvent<HTMLButtonElement> | {
         lead: string;
         value: string;
     }) => void;
@@ -33,5 +44,5 @@ export declare type Props = {
      */
     value: string;
 };
-declare const Chip: ({ lead, onClick, onDismiss, quoteValue, selected, subString, value, }: Props) => JSX.Element;
+declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, }: Props) => JSX.Element;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -3,18 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = exports.ChipType = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _utils = require("../../utils");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
+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,
@@ -39,40 +52,41 @@ var Chip = function Chip(_ref) {
   };
 
   var chipValue = (0, _utils.highlightSubString)(value, subString).text;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-chip",
-    "aria-pressed": selected,
-    role: "button",
-    tabIndex: !onDismiss ? 0 : null,
-    onClick: onClick,
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown(e);
-    }
-  }, lead && /*#__PURE__*/_react.default.createElement("span", {
+
+  var chipContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, lead && /*#__PURE__*/_react.default.createElement("span", {
     className: "p-chip__lead"
   }, lead.toUpperCase()), /*#__PURE__*/_react.default.createElement("span", {
     className: "p-chip__value",
     dangerouslySetInnerHTML: {
       __html: quoteValue ? "'".concat(chipValue, "'") : chipValue
     }
-  }), onDismiss ? /*#__PURE__*/_react.default.createElement("button", {
-    className: "p-chip__dismiss",
-    onClick: function onClick() {
-      return onDismiss();
-    }
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "p-icon--close"
-  }, "Dismiss")) : null);
-};
+  }));
+
+  var chipClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, "p-chip--".concat(appearance), !!appearance), _defineProperty(_classNames, "p-chip", !appearance), _classNames));
 
-Chip.propTypes = {
-  lead: _propTypes.default.string,
-  onClick: _propTypes.default.func,
-  onDismiss: _propTypes.default.func,
-  selected: _propTypes.default.bool,
-  subString: _propTypes.default.string,
-  quoteValue: _propTypes.default.bool,
-  value: _propTypes.default.string.isRequired
+  if (onDismiss) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: chipClassName,
+      "aria-pressed": selected
+    }, chipContent, /*#__PURE__*/_react.default.createElement("button", {
+      className: "p-chip__dismiss",
+      onClick: function onClick() {
+        return onDismiss();
+      }
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "p-icon--close"
+    }, "Dismiss")));
+  } else {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      className: chipClassName,
+      "aria-pressed": selected,
+      onClick: onClick,
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      }
+    }, chipContent);
+  }
 };
+
 var _default = Chip;
 exports.default = _default;

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.");