@canonical/react-components 3.8.3 → 3.9.1

package/README.md

@@ -1,4 +1,5 @@
 # React components for Vanilla Framework
+
 ![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)
 
 This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React. The library exposes both a CJS and an ESM build.
@@ -33,9 +34,7 @@ Please file any issues at [GitHub](https://github.com/canonical/react-components
 You might want to:
 
 - [View the source](https://github.com/canonical/react-components) on GitHub.
-- Read about [developing components](https://github.com/canonical/react-components/blob/main/HACKING.md).
-- Find out how to [publish to NPM](https://github.com/canonical/react-components/blob/main/PUBLISH-NPM-PACKAGE.md).
-- Know how to [publish the docs](https://github.com/canonical/react-components/blob/main/PUBLISHING-DOCS.md) to GitHub Pages.
+- Read about [developing components](HACKING.md).
 
 ## Developing locally using this repository
 

package/dist/components/Accordion/Accordion.js

@@ -7,15 +7,19 @@ exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _AccordionSection = _interopRequireDefault(require("./AccordionSection"));
+const _excluded = ["key"],
+  _excluded2 = ["className", "expanded", "externallyControlled", "onExpandedChange", "sections", "titleElement"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const generateSections = (sections, setExpanded, expanded, titleElement) => sections.map((_ref, i) => {
   let {
-    key,
-    ...props
-  } = _ref;
+      key
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_AccordionSection.default, _extends({
     expanded: expanded,
     key: key || i,
@@ -32,14 +36,14 @@ const generateSections = (sections, setExpanded, expanded, titleElement) => sect
  */
 const Accordion = _ref2 => {
   let {
-    className,
-    expanded,
-    externallyControlled,
-    onExpandedChange,
-    sections,
-    titleElement,
-    ...asideProps
-  } = _ref2;
+      className,
+      expanded,
+      externallyControlled,
+      onExpandedChange,
+      sections,
+      titleElement
+    } = _ref2,
+    asideProps = _objectWithoutProperties(_ref2, _excluded2);
   const [expandedSection, setExpandedSection] = (0, _react.useState)(expanded);
   const setExpanded = (id, title) => {
     setExpandedSection(id);

package/dist/components/ActionButton/ActionButton.js

@@ -7,10 +7,13 @@ 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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const LOADER_MIN_DURATION = exports.LOADER_MIN_DURATION = 400; // minimium duration (ms) loader displays
 const SUCCESS_DURATION = exports.SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
 let Label = exports.Label = /*#__PURE__*/function (Label) {
@@ -27,16 +30,16 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
  */
 const ActionButton = _ref => {
   let {
-    appearance,
-    children,
-    className,
-    onClick,
-    disabled = null,
-    inline = false,
-    loading = false,
-    success = false,
-    ...buttonProps
-  } = _ref;
+      appearance,
+      children,
+      className,
+      onClick,
+      disabled = null,
+      inline = false,
+      loading = false,
+      success = false
+    } = _ref,
+    buttonProps = _objectWithoutProperties(_ref, _excluded);
   const [height, setHeight] = (0, _react.useState)();
   const [width, setWidth] = (0, _react.useState)();
   const [showLoader, setShowLoader] = (0, _react.useState)(false);

package/dist/components/ApplicationLayout/AppAside/AppAside.js

@@ -6,19 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+const _excluded = ["children", "className", "collapsed", "narrow", "forwardRef", "pinned", "wide"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const AppAside = _ref => {
   let {
-    children,
-    className,
-    collapsed,
-    narrow,
-    forwardRef,
-    pinned,
-    wide,
-    ...props
-  } = _ref;
+      children,
+      className,
+      collapsed,
+      narrow,
+      forwardRef,
+      pinned,
+      wide
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("aside", _extends({
     className: (0, _classnames.default)("l-aside", className, {
       "is-collapsed": collapsed,

package/dist/components/ApplicationLayout/AppMain/AppMain.js

@@ -6,18 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+const _excluded = ["children", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is a [React](https://reactjs.org/) component for main content area in the Vanilla
  * [Application Layout](https://vanillaframework.io/docs/layouts/application).
  */
 const AppMain = _ref => {
   let {
-    children,
-    className,
-    ...props
-  } = _ref;
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("main", _extends({
     className: (0, _classnames.default)("l-main", className)
   }, props), children);

package/dist/components/ApplicationLayout/AppNavigation/AppNavigation.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+const _excluded = ["children", "className", "collapsed", "pinned"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is a [React](https://reactjs.org/) component for the navigation panel in the Vanilla
  * [Application Layout](https://vanillaframework.io/docs/layouts/application).
@@ -17,12 +20,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  */
 const AppNavigation = _ref => {
   let {
-    children,
-    className,
-    collapsed,
-    pinned,
-    ...props
-  } = _ref;
+      children,
+      className,
+      collapsed,
+      pinned
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("header", _extends({
     className: (0, _classnames.default)("l-navigation", className, {
       "is-collapsed": collapsed,

package/dist/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+const _excluded = ["children", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is a [React](https://reactjs.org/) component for navigation bar in the Vanilla
  * [Application Layout](https://vanillaframework.io/docs/layouts/application).
@@ -17,10 +20,10 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  */
 const AppNavigationBar = _ref => {
   let {
-    children,
-    className,
-    ...props
-  } = _ref;
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("header", _extends({
     className: (0, _classnames.default)("l-navigation-bar", className)
   }, props), children);

package/dist/components/ApplicationLayout/AppStatus/AppStatus.js

@@ -6,18 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+const _excluded = ["children", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is a [React](https://reactjs.org/) component for status area in the Vanilla
  * [Application Layout](https://vanillaframework.io/docs/layouts/application).
  */
 const AppStatus = _ref => {
   let {
-    children,
-    className,
-    ...props
-  } = _ref;
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("aside", _extends({
     className: (0, _classnames.default)("l-status", className)
   }, props), children);

package/dist/components/ApplicationLayout/Application/Application.js

@@ -6,18 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+const _excluded = ["children", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is a [React](https://reactjs.org/) component for the application wrapper in the Vanilla
  * [Application Layout](https://vanillaframework.io/docs/layouts/application).
  */
 const Application = _ref => {
   let {
-    children,
-    className,
-    ...props
-  } = _ref;
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)("l-application", className),
     role: "presentation"

package/dist/components/ApplicationLayout/ApplicationLayout.js

@@ -16,9 +16,12 @@ var _Application = _interopRequireDefault(require("./Application"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _SkipLink = _interopRequireDefault(require("../SkipLink"));
+const _excluded = ["aside", "children", "dark", "logo", "mainClassName", "menuCollapsed", "menuPinned", "navigationBarClassName", "navigationClassName", "navItems", "navLinkComponent", "onCollapseMenu", "onPinMenu", "sideNavigation", "status", "statusClassName", "mainId"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _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; }
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla
  * [Application Layout](https://vanillaframework.io/docs/layouts/application).
@@ -32,25 +35,25 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const ApplicationLayout = _ref => {
   let {
-    aside,
-    children,
-    dark = true,
-    logo,
-    mainClassName,
-    menuCollapsed,
-    menuPinned,
-    navigationBarClassName,
-    navigationClassName,
-    navItems,
-    navLinkComponent,
-    onCollapseMenu,
-    onPinMenu,
-    sideNavigation,
-    status,
-    statusClassName,
-    mainId = "main-content",
-    ...props
-  } = _ref;
+      aside,
+      children,
+      dark = true,
+      logo,
+      mainClassName,
+      menuCollapsed,
+      menuPinned,
+      navigationBarClassName,
+      navigationClassName,
+      navItems,
+      navLinkComponent,
+      onCollapseMenu,
+      onPinMenu,
+      sideNavigation,
+      status,
+      statusClassName,
+      mainId = "main-content"
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const [internalMenuPinned, setInternalMenuPinned] = (0, _react.useState)(false);
   const [internalMenuCollapsed, setInternalMenuCollapsed] = (0, _react.useState)(true);
   const menuIsPinned = menuPinned !== null && menuPinned !== void 0 ? menuPinned : internalMenuPinned;

package/dist/components/ArticlePagination/ArticlePagination.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
+const _excluded = ["className", "nextURL", "nextLabel", "previousURL", "previousLabel"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Article pagination](https://docs.vanillaframework.io/patterns/article-pagination/).
  *
@@ -15,13 +18,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  */
 const ArticlePagination = _ref => {
   let {
-    className,
-    nextURL,
-    nextLabel,
-    previousURL,
-    previousLabel,
-    ...props
-  } = _ref;
+      className,
+      nextURL,
+      nextLabel,
+      previousURL,
+      previousLabel
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("footer", _extends({
     className: (0, _classnames.default)(className, "p-article-pagination")
   }, props), previousURL && previousLabel && /*#__PURE__*/_react.default.createElement("a", {

package/dist/components/Badge/Badge.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.BadgeType = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
+const _excluded = ["value", "badgeType", "className", "isNegative"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const BadgeType = exports.BadgeType = {
   ROUNDED_LARGE_NUMBER: "ROUNDED_LARGE_NUMBER",
   UNDEFINED_LARGE_NUMBER: "UNDEFINED_LARGE_NUMBER"
@@ -45,12 +48,12 @@ const clamp = value => {
  */
 const Badge = _ref => {
   let {
-    value,
-    badgeType = BadgeType.UNDEFINED_LARGE_NUMBER,
-    className,
-    isNegative,
-    ...spanProps
-  } = _ref;
+      value,
+      badgeType = BadgeType.UNDEFINED_LARGE_NUMBER,
+      className,
+      isNegative
+    } = _ref,
+    spanProps = _objectWithoutProperties(_ref, _excluded);
   const badgeClassName = (0, _classnames.default)({
     ["p-badge--negative"]: !!isNegative,
     "p-badge": !isNegative

package/dist/components/Button/Button.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ButtonAppearance = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
+const _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 ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const ButtonAppearance = exports.ButtonAppearance = {
   BASE: "base",
   BRAND: "brand",
@@ -30,18 +33,18 @@ const ButtonAppearance = exports.ButtonAppearance = {
  */
 const Button = _ref => {
   let {
-    appearance,
-    children,
-    className,
-    dense,
-    disabled,
-    element: Component = "button",
-    hasIcon,
-    inline,
-    onClick,
-    small,
-    ...buttonProps
-  } = _ref;
+      appearance,
+      children,
+      className,
+      dense,
+      disabled,
+      element: Component = "button",
+      hasIcon,
+      inline,
+      onClick,
+      small
+    } = _ref,
+    buttonProps = _objectWithoutProperties(_ref, _excluded);
   const classes = (0, _classnames.default)(appearance ? "p-button--".concat(appearance) : "p-button", {
     "has-icon": hasIcon,
     "is-dense": dense,

package/dist/components/Card/Card.js

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
+const _excluded = ["children", "className", "highlighted", "overlay", "thumbnail", "title"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Card](https://docs.vanillaframework.io/patterns/card/).
  *
@@ -18,14 +21,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 const Card = _ref => {
   let {
-    children,
-    className,
-    highlighted,
-    overlay,
-    thumbnail,
-    title,
-    ...props
-  } = _ref;
+      children,
+      className,
+      highlighted,
+      overlay,
+      thumbnail,
+      title
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const titleId = (0, _react.useId)();
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     "aria-labelledby": title ? titleId : undefined,

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

@@ -30,4 +30,9 @@ export declare const Overlay: {
         children: string;
     };
     render: (args: CardProps) => React.JSX.Element;
+    parameters: {
+        percy: {
+            waitForTimeout: number;
+        };
+    };
 };

package/dist/components/Card/Card.stories.js

@@ -9,6 +9,11 @@ var _ = _interopRequireDefault(require("./"));
 var _Col = _interopRequireDefault(require("../Col"));
 var _Row = _interopRequireDefault(require("../Row"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const meta = {
   component: _.default,
   tags: ["autodocs"]
@@ -28,10 +33,9 @@ const Header = exports.Header = {
   }
 };
 const Highlighted = exports.Highlighted = {
-  args: {
-    ...Default.args,
+  args: _objectSpread(_objectSpread({}, Default.args), {}, {
     highlighted: true
-  }
+  })
 };
 const Overlay = exports.Overlay = {
   args: {
@@ -47,5 +51,10 @@ const Overlay = exports.Overlay = {
   }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
     size: 6,
     emptyLarge: 7
-  }, /*#__PURE__*/_react.default.createElement(_.default, args))))
+  }, /*#__PURE__*/_react.default.createElement(_.default, args)))),
+  parameters: {
+    percy: {
+      waitForTimeout: 1000 // Wait for 1 second before taking a snapshot to allow the image to load
+    }
+  }
 };

package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js

@@ -6,19 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
+const _excluded = ["inputType", "label", "labelClassName", "indeterminate", "inline"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const CheckableInput = _ref => {
   let {
-    inputType,
-    label,
-    labelClassName,
-    indeterminate = false,
-    inline,
-    ...checkboxProps
-  } = _ref;
+      inputType,
+      label,
+      labelClassName,
+      indeterminate = false,
+      inline
+    } = _ref,
+    checkboxProps = _objectWithoutProperties(_ref, _excluded);
   const inputId = (0, _react.useId)();
   const inputRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {

package/dist/components/CheckboxInput/CheckboxInput.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _CheckableInput = _interopRequireDefault(require("./CheckableInput"));
+const _excluded = ["label", "indeterminate"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Checkbox input](https://docs.vanillaframework.io/base/forms#checkbox).
  *
@@ -15,10 +18,10 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  */
 const CheckboxInput = _ref => {
   let {
-    label,
-    indeterminate = false,
-    ...checkboxProps
-  } = _ref;
+      label,
+      indeterminate = false
+    } = _ref,
+    checkboxProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({
     label: label,
     inputType: "checkbox",