@pingux/astro 1.41.0-alpha.1 → 1.41.0-alpha.3

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -52,13 +52,6 @@ var HelpIcon = function HelpIcon() {
     fill: "#3B4A58"
   }));
 };
-/**
- * A `HelpHint` is a composed component using tooltip trigger and icon button.
- *
- * For customization the trigger icon,
- * please see the [TooltipTrigger](./?path=/docs/tooltiptrigger--default) docs.
- */
-
 
 var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,

package/lib/cjs/components/HelpHint/HelpHint.stories.js

@@ -16,11 +16,22 @@ var _ = _interopRequireDefault(require("."));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _HelpHint = _interopRequireDefault(require("./HelpHint.mdx"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Components/HelpHint',
   component: _["default"],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_HelpHint["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
   argTypes: {
     children: {
       description: 'Tooltip content',

package/lib/cjs/components/Icon/Icon.js

@@ -50,18 +50,6 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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) { (0, _defineProperty2["default"])(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; }
 
-/**
- * Basic icon component.
- * Icons will fill the given container, which is '1em' x '1em' by default, and will maintain their
- * aspect ratio.
- * Use SVGR to import SVG files as React components and pass them into this component, and you can
- * use the theme to color the icon. But ensure you pass `dimensions: false` in webpack config
- * (see [SVGR docs](https://react-svgr.com/docs/options/#dimensions)).
- * Otherwise icon will not be resizable by `size` prop.
- * Icons can also be used from the [Material UI Icon Library](https://materialdesignicons.com/).
- * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the
- * available [props from Theme-UI](https://theme-ui.com/sx-prop).
-*/
 var Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var color = props.color,
       IconComponent = props.icon,

package/lib/cjs/components/Icon/Icon.stories.js

@@ -38,6 +38,10 @@ var _colors = require("../../styles/colors");
 
 var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
 
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+
+var _Icon = _interopRequireDefault(require("./Icon.mdx"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -45,6 +49,9 @@ var _default = {
   component: _index.Icon,
   parameters: {
     docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Icon["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
       source: {
         type: 'code'
       }

package/lib/cjs/components/Image/Image.stories.js

@@ -125,7 +125,7 @@ exports.FallbackImage = FallbackImage;
 
 var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
   var useLocalSrc = _ref2.useLocalSrc;
-  var imageSrc = useLocalSrc ? _images.pingImg : 'https://deelay.me/3000/https://picsum.photos/150/150';
+  var imageSrc = useLocalSrc ? _images.pingImg : 'https://app.requestly.io/delay/3000/https://picsum.photos/150/150';
   return (0, _react2.jsx)(_["default"], {
     src: imageSrc,
     sx: {
@@ -143,7 +143,7 @@ WithSkeletonLoadSuccess.args = {
 
 var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
   return (0, _react2.jsx)(_["default"], {
-    src: "https://deelay.me/7000/https://picsum.photos/150/150",
+    src: "https://app.requestly.io/delay/7000/https://picsum.photos/150/150",
     sx: {
       width: '150px',
       height: '150px'

package/lib/cjs/components/ListBox/ListBoxSection.js

@@ -28,8 +28,12 @@ var _i18n = require("@react-aria/i18n");
 
 var _virtualizer = require("@react-aria/virtualizer");
 
+var _ListBoxContext = require("./ListBoxContext");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _Separator = _interopRequireDefault(require("../Separator"));
+
 var _react2 = require("@emotion/react");
 
 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); }
@@ -58,6 +62,7 @@ var ListBoxSection = function ListBoxSection(props) {
   var _useLocale = (0, _i18n.useLocale)(),
       direction = _useLocale.direction;
 
+  var state = (0, _react.useContext)(_ListBoxContext.ListBoxContext);
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "ul",
     ref: headerRef,
@@ -66,7 +71,9 @@ var ListBoxSection = function ListBoxSection(props) {
     sx: {
       paddingInlineStart: '0px'
     }
-  }, groupProps), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
+  }, groupProps), item.key !== state.collection.getFirstKey() && (0, _react2.jsx)(_Separator["default"], {
+    mt: "0px"
+  }), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
     variant: "boxes.listBoxSectionTitle"
   }), item.rendered)), (0, _react2.jsx)(_Box["default"], {
     style: (0, _virtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction)

package/lib/cjs/components/ListView/ListView.stories.js

@@ -572,14 +572,15 @@ var ListElement = function ListElement(_ref) {
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _FormSelectIcon["default"],
     mr: "sm",
-    color: "text.primary",
+    color: "accent.40",
     size: "md"
   }), (0, _react2.jsx)(_Text["default"], {
     variant: "itemTitle",
     alignSelf: "center"
   }, item.name)), (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    alignSelf: "center"
+    alignSelf: "center",
+    gap: "sm"
   }, (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "create-icon"
   }, (0, _react2.jsx)(_Icon["default"], {
@@ -611,14 +612,15 @@ var Default = function Default(_ref2) {
     }, (0, _react2.jsx)(_Icon["default"], {
       icon: _FormSelectIcon["default"],
       mr: "sm",
-      color: "text.primary",
+      color: "accent.40",
       size: "md"
     }), (0, _react2.jsx)(_Text["default"], {
       variant: "itemTitle",
       alignSelf: "center"
     }, item.name)), (0, _react2.jsx)(_Box["default"], {
       isRow: true,
-      alignSelf: "center"
+      alignSelf: "center",
+      gap: "sm"
     }, (0, _react2.jsx)(_IconButton["default"], {
       "aria-label": "create-icon"
     }, (0, _react2.jsx)(_Icon["default"], {

package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js

@@ -207,7 +207,8 @@ var InnerPanel = function InnerPanel(_ref2) {
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
         zIndex: 11
-      }
+      },
+      onClose: toggleMessagesOpen
     }, (0, _react2.jsx)(_collections.Item, {
       key: "message2",
       status: "success"

package/lib/cjs/components/SelectField/SelectField.stories.js

@@ -122,6 +122,7 @@ var animals = [{
 }];
 var withSection = [{
   name: 'Animals',
+  key: 'Animals',
   children: [{
     name: 'Aardvark'
   }, {
@@ -131,6 +132,7 @@ var withSection = [{
   }]
 }, {
   name: 'People',
+  key: 'People',
   children: [{
     name: 'Michael'
   }, {
@@ -138,6 +140,16 @@ var withSection = [{
   }, {
     name: 'Creed'
   }]
+}, {
+  name: null,
+  key: 'Fruit',
+  children: [{
+    name: 'Apple'
+  }, {
+    name: 'Strawberry'
+  }, {
+    name: 'Blueberry'
+  }]
 }];
 var _default = {
   title: 'Form/SelectField',
@@ -221,7 +233,7 @@ var WithSections = function WithSections(args) {
     items: withSection
   }, args), function (section) {
     return (0, _react2.jsx)(_2.Section, {
-      key: section.name,
+      key: section.key,
       items: section.children,
       title: section.name
     }, function (item) {

package/lib/cjs/components/SelectField/SelectField.test.js

@@ -6,6 +6,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
+var _overlays = require("@react-aria/overlays");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
@@ -23,6 +27,37 @@ var items = [{
 }, {
   name: 'c'
 }];
+var withSection = [{
+  name: 'Animals',
+  key: 'Animals',
+  kids: [{
+    name: 'Aardvark'
+  }, {
+    name: 'Kangaroo'
+  }, {
+    name: 'Snake'
+  }]
+}, {
+  name: 'People',
+  key: 'People',
+  kids: [{
+    name: 'Michael'
+  }, {
+    name: 'Dwight'
+  }, {
+    name: 'Creed'
+  }]
+}, {
+  name: null,
+  key: 'Fruit',
+  kids: [{
+    name: 'Apple'
+  }, {
+    name: 'Strawberry'
+  }, {
+    name: 'Blueberry'
+  }]
+}];
 var testId = 'test-dropdown';
 var controlTestId = "".concat(testId, "-input");
 var testValue = 'test';
@@ -48,6 +83,28 @@ var getComponent = function getComponent() {
       key: item.name
     }, item.name);
   }));
+};
+
+var getComponentWithSections = function getComponentWithSections() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref2$renderFn = _ref2.renderFn,
+      renderFn = _ref2$renderFn === void 0 ? _testWrapper.render : _ref2$renderFn;
+
+  return renderFn((0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, defaultProps, props, {
+    items: withSection
+  }), function (section) {
+    return (0, _react2.jsx)(_index.Section, {
+      key: section.key,
+      items: section.kids,
+      title: section.name
+    }, function (item) {
+      return (0, _react2.jsx)(_index.Item, {
+        key: item.name
+      }, item.name);
+    });
+  })));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -102,4 +159,22 @@ test('passing helper text should display it and correct aria attributes on input
   expect(visibleInput).toHaveAttribute('aria-invalid', 'true');
   var helperTextID = helper.getAttribute('id');
   expect(_testWrapper.screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
+});
+test('passing sections, renders separators', function () {
+  getComponentWithSections();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryAllByRole('separator')).toHaveLength(2);
+});
+test('a blank title does not render', function () {
+  getComponentWithSections();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByText('Fruit')).not.toBeInTheDocument();
 });

package/lib/cjs/recipes/ConditionalFilter.stories.js

@@ -141,7 +141,6 @@ var Default = function Default() {
       isRow: true,
       key: item.key
     }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
-      ml: "3px",
       width: "100%"
     }, (0, _react2.jsx)(_index.Box, {
       variant: "forms.input.container",

package/lib/cjs/recipes/ScrollableListView.stories.js

@@ -128,14 +128,15 @@ var Default = function Default(_ref) {
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _FormSelectIcon["default"],
       mr: "sm",
-      color: "text.primary",
+      color: "accent.40",
       size: 25
     }), (0, _react2.jsx)(_index.Text, {
       variant: "itemTitle",
       alignSelf: "center"
     }, item.name)), (0, _react2.jsx)(_index.Box, {
       isRow: true,
-      alignSelf: "center"
+      alignSelf: "center",
+      gap: "sm"
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "create-icon"
     }, (0, _react2.jsx)(_index.Icon, {

package/lib/cjs/recipes/TrialExperienceIndustryButtons.stories.js

@@ -667,14 +667,10 @@ var buttons = [{
 
 var Default = function Default() {
   var state = (0, _useModalState["default"])();
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-    onPress: state.open,
-    "aria-label": "Open modal"
-  }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
-    isOpen: state.isOpen,
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, {
+    isOpen: true,
     onClose: state.close,
-    contentProps: sx.contentProps,
-    isDismissable: true
+    contentProps: sx.contentProps
   }, (0, _react2.jsx)(_index.Box, {
     contentProps: true
   }, (0, _react2.jsx)(_index.IconButton, {
@@ -701,7 +697,7 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Icon, {
       icon: button.icon,
       sx: sx.iconStyle,
-      size: "58"
+      size: 58
     }), (0, _react2.jsx)(_index.Text, {
       sx: sx.buttonLabelStyle
     }, button.name)));

package/lib/cjs/styles/variants/boxes.js

@@ -36,13 +36,13 @@ var base = {
   display: 'flex'
 };
 var card = {
-  boxShadow: 'standard',
+  boxShadow: '0px 1px 14px rgba(37, 55, 70, 0.15)',
+  borderRadius: '3px',
   p: 'lg',
-  alignItems: 'center',
-  justifyContent: 'center',
   flex: '1 1 0',
-  fontWeight: 1,
-  fontSize: 'md'
+  fontWeight: 0,
+  fontSize: 'md',
+  color: 'text.primary'
 }; // Used to give a border to radio elements
 
 var radioContainer = {
@@ -96,7 +96,7 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   },
   '&.has-separator': {
     borderBottom: '1px solid',
-    borderBottomColor: 'line.hairline'
+    borderBottomColor: 'neutral.80'
   },
   '&.is-focused': {
     boxShadow: '0 0 0 1px inset #D033FF'

package/lib/cjs/utils/devUtils/constants/text.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.DummyText = void 0;
+var DummyText = "\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\ntotam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae\ndicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, \nsed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, \nqui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora\nincidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum\nexercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel\neum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem \neum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis \npraesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate \nnon provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. \nEt harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi \noptio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis \ndolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et \nvoluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut \nreiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.\n";
+exports.DummyText = DummyText;

package/lib/components/Bracket/Bracket.stories.js

@@ -41,8 +41,7 @@ export var Default = function Default() {
     ml: "sm",
     bg: "background"
   }, ___EmotionJSX(Box, {
-    isRow: true,
-    mb: "xs"
+    isRow: true
   }, ___EmotionJSX(Chip, {
     label: "Any",
     bg: "neutral.20",
@@ -57,7 +56,6 @@ export var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      ml: "xs",
       variant: "forms.input.container",
       bg: "white",
       isRow: true,

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -55,7 +55,7 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       "aria-hidden": "true",
       icon: icon,
       mx: 5,
-      size: 16
+      size: "xs"
     }, iconProps)));
   }, [children.length, filteredChildren, icon, iconProps, onAction]);
   return ___EmotionJSX("nav", {

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

@@ -61,17 +61,4 @@ export var Default = function Default(args) {
     "data-id": "march",
     href: "https://www.pingidentity.com"
   }, "March 2020 Assets"));
-};
-export var WithSpan = function WithSpan() {
-  return ___EmotionJSX(Breadcrumbs, {
-    icon: ChevronRightIcon
-  }, ___EmotionJSX(Item, {
-    key: "Parent",
-    "aria-label": "parent",
-    elementType: "span"
-  }, "Parent"), ___EmotionJSX(Item, {
-    key: "FonsVernall",
-    "aria-label": "fons-vernall",
-    elementType: "span"
-  }, "Fons Vernall"));
 };

package/lib/components/Card/Card.js

@@ -1,17 +1,120 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp"];
 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { mergeProps } from '@react-aria/utils';
+import { useHover, usePress } from '@react-aria/interactions';
+import { useFocusRing } from '@react-aria/focus';
 import Box from '../Box';
-/**
- * A Box component built for the common "Card" use case. Has default variant of card.
- * See Box for list of props.
- */
-
+import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Card = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+      onHoverStart = props.onHoverStart,
+      onHoverChange = props.onHoverChange,
+      onHoverEnd = props.onHoverEnd,
+      onPress = props.onPress,
+      onPressStart = props.onPressStart,
+      onPressEnd = props.onPressEnd,
+      onPressChange = props.onPressChange,
+      onPressUp = props.onPressUp,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var _useHover = useHover(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useFocusRing = useFocusRing(),
+      focusProps = _useFocusRing.focusProps,
+      isFocusVisible = _useFocusRing.isFocusVisible;
+
+  var _usePress = usePress({
+    ref: ref,
+    onPress: onPress,
+    onPressStart: onPressStart,
+    onPressEnd: onPressEnd,
+    onPressChange: onPressChange,
+    onPressUp: onPressUp
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
+  var _useFocusRing2 = useFocusRing({
+    within: true
+  }),
+      focusWithinProps = _useFocusRing2.focusProps,
+      isFocusedWithin = _useFocusRing2.isFocusVisible;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isHovered: isHovered,
+    isPressed: isPressed,
+    isFocused: isFocusVisible || isFocusedWithin
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var ariaLabel = props['aria-label'];
   return ___EmotionJSX(Box, _extends({
+    "aria-label": ariaLabel,
     variant: "boxes.card",
-    ref: ref
-  }, props));
+    className: classNames,
+    ref: ref,
+    isFocused: isFocusVisible
+  }, others, mergeProps(hoverProps, pressProps, focusProps, focusWithinProps)));
 });
+Card.propTypes = {
+  /** Defines a string value that labels the current element. */
+  'aria-label': PropTypes.string,
+
+  /**
+   * Handler that is called when a hover interaction starts.
+   * (e: HoverEvent) => void
+   */
+  onHoverStart: PropTypes.func,
+
+  /**
+  * Handler that is called when a hover interaction ends.
+  * (e: HoverEvent) => void
+  */
+  onHoverEnd: PropTypes.func,
+
+  /**
+  * Handler that is called when the hover state changes.
+  * (isHovering: boolean) => void
+  */
+  onHoverChange: PropTypes.func,
+
+  /**
+  * Handler that is called when the press is released over the target.
+  * (e: PressEvent) => void
+  */
+  onPress: PropTypes.func,
+
+  /**
+  * Handler that is called when a press interaction starts.
+  * (e: PressEvent) => void
+  */
+  onPressStart: PropTypes.func,
+
+  /**
+  * Handler that is called when a press interaction ends, either over the target or when the
+  * pointer leaves the target.
+  * (e: PressEvent) => void
+  */
+  onPressEnd: PropTypes.func,
+
+  /**
+  * Handler that is called when the press state changes.
+  * (isPressed: boolean) => void
+  */
+  onPressChange: PropTypes.func,
+
+  /**
+  * Handler that is called when a press is released over the target, regardless of whether it
+  * started on the target or not.
+  * (e: PressEvent) => void
+  */
+  onPressUp: PropTypes.func
+};
 Card.displayName = 'Card';
 export default Card;