@pingux/astro 2.49.0 → 2.50.0-alpha.1

package/lib/cjs/types/breadCrumbs.d.ts

@@ -0,0 +1,31 @@
+import { type ElementType } from 'react';
+import { TestingAttributes } from './shared/test';
+import { BoxProps } from './box';
+import { IconProps } from './icon';
+export interface breadCrumbsProps extends BoxProps, TestingAttributes {
+    /** The icon to render in between each node. */
+    icon?: ElementType;
+    /** Props object passed along to the Icon component. */
+    iconProps?: IconProps;
+    /** Whether the Breadcrumbs are disabled. */
+    isDisabled?: boolean;
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Called when an item is acted upon (usually selection via press). */
+    /** (key: Key) => void. */
+    onAction?: (key: unknown) => void;
+}
+export interface breadCrumbItemProps extends BoxProps, TestingAttributes {
+    actionKey?: string;
+    /** Whether the breadcrumb item represents the current page. */
+    isCurrent?: boolean;
+    /** The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'.
+     * Also can be passed 'Button', 'Icon', 'IconButton', 'Text' - will be used
+     * appropriate component from Astro library.
+     * */
+    elementType?: string | ElementType;
+    /** Whether the breadcrumb item is disabled. */
+    isDisabled?: boolean;
+    onAction?: (key: unknown) => void;
+    onPress?: () => void;
+}

package/lib/cjs/types/breadCrumbs.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -1,6 +1,7 @@
 export * from './badge';
 export * from './box';
 export * from './bracket';
+export * from './breadCrumbs';
 export * from './button';
 export * from './buttonBar';
 export * from './card';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -40,8 +40,19 @@ _forEachInstanceProperty(_context3 = _Object$keys(_bracket)).call(_context3, fun
     }
   });
 });
+var _breadCrumbs = require("./breadCrumbs");
+_forEachInstanceProperty(_context4 = _Object$keys(_breadCrumbs)).call(_context4, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _breadCrumbs[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _breadCrumbs[key];
+    }
+  });
+});
 var _button = require("./button");
-_forEachInstanceProperty(_context4 = _Object$keys(_button)).call(_context4, function (key) {
+_forEachInstanceProperty(_context5 = _Object$keys(_button)).call(_context5, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _button[key]) return;
   _Object$defineProperty(exports, key, {
@@ -52,7 +63,7 @@ _forEachInstanceProperty(_context4 = _Object$keys(_button)).call(_context4, func
   });
 });
 var _buttonBar = require("./buttonBar");
-_forEachInstanceProperty(_context5 = _Object$keys(_buttonBar)).call(_context5, function (key) {
+_forEachInstanceProperty(_context6 = _Object$keys(_buttonBar)).call(_context6, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _buttonBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -63,7 +74,7 @@ _forEachInstanceProperty(_context5 = _Object$keys(_buttonBar)).call(_context5, f
   });
 });
 var _card = require("./card");
-_forEachInstanceProperty(_context6 = _Object$keys(_card)).call(_context6, function (key) {
+_forEachInstanceProperty(_context7 = _Object$keys(_card)).call(_context7, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _card[key]) return;
   _Object$defineProperty(exports, key, {
@@ -74,7 +85,7 @@ _forEachInstanceProperty(_context6 = _Object$keys(_card)).call(_context6, functi
   });
 });
 var _fieldHelperText = require("./fieldHelperText");
-_forEachInstanceProperty(_context7 = _Object$keys(_fieldHelperText)).call(_context7, function (key) {
+_forEachInstanceProperty(_context8 = _Object$keys(_fieldHelperText)).call(_context8, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _fieldHelperText[key]) return;
   _Object$defineProperty(exports, key, {
@@ -85,7 +96,7 @@ _forEachInstanceProperty(_context7 = _Object$keys(_fieldHelperText)).call(_conte
   });
 });
 var _helpHint = require("./helpHint");
-_forEachInstanceProperty(_context8 = _Object$keys(_helpHint)).call(_context8, function (key) {
+_forEachInstanceProperty(_context9 = _Object$keys(_helpHint)).call(_context9, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _helpHint[key]) return;
   _Object$defineProperty(exports, key, {
@@ -96,7 +107,7 @@ _forEachInstanceProperty(_context8 = _Object$keys(_helpHint)).call(_context8, fu
   });
 });
 var _icon = require("./icon");
-_forEachInstanceProperty(_context9 = _Object$keys(_icon)).call(_context9, function (key) {
+_forEachInstanceProperty(_context10 = _Object$keys(_icon)).call(_context10, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _icon[key]) return;
   _Object$defineProperty(exports, key, {
@@ -107,7 +118,7 @@ _forEachInstanceProperty(_context9 = _Object$keys(_icon)).call(_context9, functi
   });
 });
 var _iconBadge = require("./iconBadge");
-_forEachInstanceProperty(_context10 = _Object$keys(_iconBadge)).call(_context10, function (key) {
+_forEachInstanceProperty(_context11 = _Object$keys(_iconBadge)).call(_context11, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconBadge[key]) return;
   _Object$defineProperty(exports, key, {
@@ -118,7 +129,7 @@ _forEachInstanceProperty(_context10 = _Object$keys(_iconBadge)).call(_context10,
   });
 });
 var _iconButton = require("./iconButton");
-_forEachInstanceProperty(_context11 = _Object$keys(_iconButton)).call(_context11, function (key) {
+_forEachInstanceProperty(_context12 = _Object$keys(_iconButton)).call(_context12, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconButton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -129,7 +140,7 @@ _forEachInstanceProperty(_context11 = _Object$keys(_iconButton)).call(_context11
   });
 });
 var _input = require("./input");
-_forEachInstanceProperty(_context12 = _Object$keys(_input)).call(_context12, function (key) {
+_forEachInstanceProperty(_context13 = _Object$keys(_input)).call(_context13, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _input[key]) return;
   _Object$defineProperty(exports, key, {
@@ -140,7 +151,7 @@ _forEachInstanceProperty(_context12 = _Object$keys(_input)).call(_context12, fun
   });
 });
 var _item = require("./item");
-_forEachInstanceProperty(_context13 = _Object$keys(_item)).call(_context13, function (key) {
+_forEachInstanceProperty(_context14 = _Object$keys(_item)).call(_context14, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _item[key]) return;
   _Object$defineProperty(exports, key, {
@@ -151,7 +162,7 @@ _forEachInstanceProperty(_context13 = _Object$keys(_item)).call(_context13, func
   });
 });
 var _link = require("./link");
-_forEachInstanceProperty(_context14 = _Object$keys(_link)).call(_context14, function (key) {
+_forEachInstanceProperty(_context15 = _Object$keys(_link)).call(_context15, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _link[key]) return;
   _Object$defineProperty(exports, key, {
@@ -162,7 +173,7 @@ _forEachInstanceProperty(_context14 = _Object$keys(_link)).call(_context14, func
   });
 });
 var _listItem = require("./listItem");
-_forEachInstanceProperty(_context15 = _Object$keys(_listItem)).call(_context15, function (key) {
+_forEachInstanceProperty(_context16 = _Object$keys(_listItem)).call(_context16, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_listItem)).call(_context15,
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context16 = _Object$keys(_loader)).call(_context16, function (key) {
+_forEachInstanceProperty(_context17 = _Object$keys(_loader)).call(_context17, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_loader)).call(_context16, fu
   });
 });
 var _menu = require("./menu");
-_forEachInstanceProperty(_context17 = _Object$keys(_menu)).call(_context17, function (key) {
+_forEachInstanceProperty(_context18 = _Object$keys(_menu)).call(_context18, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_menu)).call(_context17, func
   });
 });
 var _menuItem = require("./menuItem");
-_forEachInstanceProperty(_context18 = _Object$keys(_menuItem)).call(_context18, function (key) {
+_forEachInstanceProperty(_context19 = _Object$keys(_menuItem)).call(_context19, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_menuItem)).call(_context18,
   });
 });
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context19 = _Object$keys(_overlayPanel)).call(_context19, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_overlayPanel)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context20 = _Object$keys(_popoverContainer)).call(_context20, function (key) {
+_forEachInstanceProperty(_context21 = _Object$keys(_popoverContainer)).call(_context21, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -228,7 +239,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context21 = _Object$keys(_popoverMenu)).call(_context21, function (key) {
+_forEachInstanceProperty(_context22 = _Object$keys(_popoverMenu)).call(_context22, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -239,7 +250,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_popoverMenu)).call(_context2
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context22 = _Object$keys(_requirementsList)).call(_context22, function (key) {
+_forEachInstanceProperty(_context23 = _Object$keys(_requirementsList)).call(_context23, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -250,7 +261,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context23 = _Object$keys(_rockerButtonGroup)).call(_context23, function (key) {
+_forEachInstanceProperty(_context24 = _Object$keys(_rockerButtonGroup)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -261,7 +272,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context24 = _Object$keys(_scrollBox)).call(_context24, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_scrollBox)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -272,7 +283,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_scrollBox)).call(_context24,
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context25 = _Object$keys(_separator)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_separator)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_separator)).call(_context25,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context26 = _Object$keys(_shared)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_shared)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_shared)).call(_context26, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context27 = _Object$keys(_table)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_table)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_table)).call(_context27, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context28 = _Object$keys(_text)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_text)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_text)).call(_context28, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context29 = _Object$keys(_tooltipTrigger)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_tooltipTrigger)).call(_context30, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/item.d.ts

@@ -31,6 +31,8 @@ declare module '@react-types/shared' {
         slots?: {
             postHeading: React.ReactNode;
         };
+        /** isCurrent for the Breadcrumbs item. */
+        isCurrent?: boolean;
     }
 }
 export default ItemProps;

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -12,11 +12,10 @@ var _excluded = ["children", "elementType", "onAction", "actionKey", "isCurrent"
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, Fragment, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, Fragment, useCallback, useMemo } from 'react';
 import { mergeProps, useBreadcrumbItem } from 'react-aria';
 import { omit } from 'lodash/object';
-import PropTypes from 'prop-types';
-import { usePropWarning } from '../../hooks';
+import { useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { Box, Button, IconButton, Link, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ELEMENT_TYPE = {
@@ -33,15 +32,11 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
     actionKey = props.actionKey,
     isCurrent = props.isCurrent,
     others = _objectWithoutProperties(props, _excluded);
-  var itemRef = useRef();
+  var itemRef = useLocalOrForwardRef(ref);
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return itemRef.current;
-  });
   var _useBreadcrumbItem = useBreadcrumbItem(_objectSpread({}, props), itemRef),
     itemProps = _useBreadcrumbItem.itemProps;
-  var ElementType = useMemo(function () {
+  var BreadcrumbItemElementType = useMemo(function () {
     switch (elementType) {
       case ELEMENT_TYPE.BUTTON:
         return Button;
@@ -79,23 +74,10 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }, elementProps);
   return ___EmotionJSX(Box, {
     as: "li",
-    className: isCurrent && 'is-current',
+    className: isCurrent ? 'is-current' : '',
     variant: "variants.breadcrumb.containerLi"
-  }, ___EmotionJSX(ElementType, elementVariantProps, children));
+  }, ___EmotionJSX(BreadcrumbItemElementType, elementVariantProps, children));
 });
-BreadcrumbItem.propTypes = {
-  actionKey: PropTypes.string,
-  /** Whether the breadcrumb item represents the current page. */
-  isCurrent: PropTypes.bool,
-  /** The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'.
-   * Also can be passed 'Button', 'Icon', 'IconButton', 'Text' - will be used
-   * appropriate component from Astro library.
-   * */
-  elementType: PropTypes.elementType,
-  /** Whether the breadcrumb item is disabled. */
-  isDisabled: PropTypes.bool,
-  onAction: PropTypes.func
-};
 BreadcrumbItem.defaultProps = {
   elementType: 'Link'
 };

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -4,10 +4,9 @@ var _excluded = ["children", "icon", "iconProps", "onAction"];
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import { mergeProps, useBreadcrumbs } from 'react-aria';
-import PropTypes from 'prop-types';
-import { usePropWarning } from '../../hooks';
+import { useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { Box, Icon } from '../../index';
 import BreadcrumbItem from './BreadcrumbItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -17,20 +16,17 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     iconProps = props.iconProps,
     onAction = props.onAction,
     others = _objectWithoutProperties(props, _excluded);
+
   // the following filters undefined values passed as a child
   var filteredChildren = _Array$isArray(children) ? _filterInstanceProperty(children).call(children, function (child) {
     return child;
   }) : children;
   var _useBreadcrumbs = useBreadcrumbs(props),
     wrapperProps = _useBreadcrumbs.navProps;
-  var breadcrumbsRef = useRef();
+  var breadcrumbsRef = useLocalOrForwardRef(ref);
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return breadcrumbsRef.current;
-  });
   var createBreadcrumb = useCallback(function (child, idx) {
-    var isCurrentItem = _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
+    var isCurrentItem = idx && _Array$isArray(children) && _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
     return ___EmotionJSX(React.Fragment, {
       key: "li-".concat(child.key)
     }, ___EmotionJSX(BreadcrumbItem, _extends({
@@ -40,14 +36,15 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       onAction: onAction
     }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
       "aria-hidden": "true",
-      icon: icon,
       mx: 5,
       size: "xs",
       title: {
         name: 'Breadcrumb Separator'
       }
-    }, iconProps)));
-  }, [children.length, filteredChildren, icon, iconProps, onAction]);
+    }, iconProps, {
+      icon: icon
+    })));
+  }, [_Array$isArray(children) && children.length, filteredChildren, icon, iconProps, onAction]);
   return ___EmotionJSX("nav", {
     "aria-label": "Breadcrumb"
   }, ___EmotionJSX(Box, _extends({
@@ -57,18 +54,5 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "variants.breadcrumb.containerOl"
   }, mergeProps(wrapperProps, others)), _Array$isArray(filteredChildren) ? _mapInstanceProperty(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children)));
 });
-Breadcrumbs.propTypes = {
-  /** The icon to render in between each node. */
-  icon: PropTypes.elementType,
-  /** Props object passed along to the Icon component. */
-  iconProps: PropTypes.shape({}),
-  /** Whether the Breadcrumbs are disabled. */
-  isDisabled: PropTypes.bool,
-  /** Defines a string value that labels the current element. */
-  'aria-label': PropTypes.string,
-  /** Called when an item is acted upon (usually selection via press). */
-  /** (key: Key) => void. */
-  onAction: PropTypes.func
-};
 Breadcrumbs.displayName = 'Breadcrumbs';
 export default Breadcrumbs;

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Breadcrumbs } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import BreadcrumbsReadme from './Breadcrumbs.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -41,9 +41,8 @@ export var Default = function Default(args) {
   var onAction = function onAction(key) {
     return action("onPress ".concat(key));
   };
-  return ___EmotionJSX(Breadcrumbs, _extends({
-    onAction: onAction
-  }, args, {
+  return ___EmotionJSX(Breadcrumbs, _extends({}, args, {
+    onAction: onAction,
     icon: ChevronRightIcon
   }), ___EmotionJSX(Item, {
     "aria-label": "home",

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -51,10 +51,11 @@ test('should render nodes from the children', function () {
 test('should render correct amount of icons', function () {
   getComponent({
     iconProps: {
-      'data-testid': testIconId
+      'data-testid': testIconId,
+      icon: ChevronRightIcon
     }
   });
-  expect(screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 1);
+  expect(screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 2);
 });
 test('breadcrumbItem should render breadcrumbItem as a Text component when appropriate elementType passed', function () {
   getComponent({}, {

package/lib/components/Button/Button.stories.js

@@ -104,6 +104,17 @@ export var TextIconButton = function TextIconButton() {
     title: {
       name: 'Add Circle Icon'
     }
+  }), "Button Text"), ___EmotionJSX(Button, {
+    mb: "sm",
+    variant: "primaryWithIcon"
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    mr: "xs",
+    color: "white",
+    size: 20,
+    title: {
+      name: 'Add Circle Icon'
+    }
   }), "Button Text"), ___EmotionJSX(Button, {
     mb: "sm",
     mr: "auto",

package/lib/components/Button/Buttons.styles.js

@@ -83,6 +83,9 @@ var withIcon = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-pressed': _objectSpread({}, defaultActive),
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
+var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
+  padding: '10px 15px 10px 10px'
+});
 var success = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'success.bright',
@@ -274,6 +277,8 @@ var exampleText = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 export default {
+  colorBlock: colorBlock,
+  colorBlockPrimary: colorBlockPrimary,
   critical: critical,
   "default": _objectSpread(_objectSpread({}, base), {}, {
     bg: 'white',
@@ -283,18 +288,17 @@ export default {
     '&.is-pressed': _objectSpread({}, defaultActive),
     '&.is-focused': _objectSpread({}, defaultFocus)
   }),
+  exampleText: exampleText,
   filter: filter,
   headerBar: headerBar,
   inline: inline,
   inlinePrimary: inlinePrimary,
+  inlinePrimaryWithIcon: inlinePrimaryWithIcon,
+  inlineWithIcon: inlineWithIcon,
   link: link,
   primary: primary,
+  primaryWithIcon: primaryWithIcon,
   quiet: quiet,
   success: success,
-  colorBlock: colorBlock,
-  colorBlockPrimary: colorBlockPrimary,
-  exampleText: exampleText,
-  withIcon: withIcon,
-  inlineWithIcon: inlineWithIcon,
-  inlinePrimaryWithIcon: inlinePrimaryWithIcon
+  withIcon: withIcon
 };

package/lib/types/breadCrumbs.js

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

package/lib/types/index.js

@@ -1,6 +1,7 @@
 export * from './badge';
 export * from './box';
 export * from './bracket';
+export * from './breadCrumbs';
 export * from './button';
 export * from './buttonBar';
 export * from './card';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.49.0",
+  "version": "2.50.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",