@pingux/astro 2.40.1 → 2.41.0-alpha.0

package/lib/cjs/components/Callout/Callout.mdx

@@ -9,7 +9,7 @@ Callouts should contain only 1 or 2 pieces of information and display at the top
 
 ### Required components
 
-This component requires the [Link](./?path=/docs/components-link--default) and [Text](./?path=/docs/components-text--default) components. 
+This component requires the [Text](./?path=/docs/components-text--default) component. 
 
 ### Accessibility
 

package/lib/cjs/components/Callout/Callout.stories.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StoryFn } from '@storybook/react';
 import { CalloutProps } from '../../types/callout';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
@@ -5,4 +6,13 @@ export default _default;
 export declare const Default: StoryFn<CalloutProps>;
 export declare const ErrorStatus: StoryFn;
 export declare const Success: StoryFn;
+export declare const WithLink: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
 export declare const Warning: StoryFn;

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
+exports["default"] = exports.WithLink = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
@@ -43,12 +43,7 @@ var _default = {
 }; // main
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.Callout, args, (0, _react2.jsx)(_index.Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", (0, _react2.jsx)(_index.Link, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(_statuses["default"].DEFAULT, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  return (0, _react2.jsx)(_index.Callout, args, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
 };
 exports.Default = Default;
 Default.parameters = {
@@ -60,36 +55,54 @@ Default.parameters = {
 var ErrorStatus = function ErrorStatus() {
   return (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].ERROR
-  }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", (0, _react2.jsx)(_index.Link, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(_statuses["default"].ERROR, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat. Etiam at urna erat."));
+};
+exports.ErrorStatus = ErrorStatus;
+ErrorStatus.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.callout.errorStatus
+  }
 };
 
 // Avoiding using Error as the function name due to it being a JS built-in method
-exports.ErrorStatus = ErrorStatus;
 ErrorStatus.storyName = 'Error';
 var Success = function Success() {
   return (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].SUCCESS
-  }, (0, _react2.jsx)(_index.Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", (0, _react2.jsx)(_index.Link, {
+  }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
+};
+exports.Success = Success;
+Success.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.callout.success
+  }
+};
+var WithLink = function WithLink(args) {
+  return (0, _react2.jsx)(_index.Callout, args, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.", ' ', (0, _react2.jsx)(_index.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(_statuses["default"].SUCCESS, "-callout"),
+    "aria-label": "".concat(_statuses["default"].DEFAULT, "-callout"),
     variant: "app"
-  }, ' ', "Read More")));
+  }, "Learn More")));
+};
+exports.WithLink = WithLink;
+WithLink.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.callout.withLink
+  }
 };
-exports.Success = Success;
 var Warning = function Warning() {
   return (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].WARNING
-  }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Callout box will grow in height with the content", (0, _react2.jsx)(_index.Link, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(_statuses["default"].WARNING, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
 };
-exports.Warning = Warning;
+exports.Warning = Warning;
+Warning.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.callout.warning
+  }
+};

package/lib/cjs/components/Link/Link.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LinkProps } from '../../types';
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export default Link;

package/lib/cjs/components/Link/Link.js

@@ -14,7 +14,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
@@ -27,7 +26,7 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onPress = props.onPress,
     isSafariCompatible = props.isSafariCompatible,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var linkRef = (0, _react.useRef)();
+  var linkRef = (0, _react.useRef)(null);
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
@@ -68,26 +67,10 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     role: "link"
   }, others, (0, _reactAria.mergeProps)(hoverProps, pressProps, linkProps, focusProps)));
 });
-Link.propTypes = {
-  /** Whether the link is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /**  The HTML element used to render the link, e.g. 'a', or 'span'. */
-  as: _propTypes["default"].string,
-  /**  Handler that is called when the press is released over the target. */
-  onPress: _propTypes["default"].func,
-  /**  Specifies the location of the URL */
-  href: _propTypes["default"].string,
-  /**  Specifies the window where the linked page is loaded */
-  target: _propTypes["default"].string,
-  /** The styling variation of the link. */
-  variant: _propTypes["default"].string,
-  /** Whether the link is clickable inside a popover in safari */
-  isSafariCompatible: _propTypes["default"].bool
-};
 Link.defaultProps = {
   isDisabled: false,
-  as: 'a',
-  variant: 'app'
+  variant: 'app',
+  as: 'a'
 };
 Link.displayName = 'Link';
 var _default = Link;

package/lib/cjs/components/Link/Link.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { LinkProps } from '../../types/link';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<LinkProps>;

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

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 var _Link = _interopRequireDefault(require("./Link.mdx"));
 var _Link2 = _interopRequireDefault(require("./Link.styles"));

package/lib/cjs/components/Link/Link.styles.d.ts

@@ -0,0 +1,76 @@
+declare const _default: {
+    app: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        textDecoration: string;
+        outline: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-pressed': {
+            color: string;
+            textDecoration: string;
+        };
+        '&.is-disabled': {
+            pointerEvents: string;
+        };
+    };
+    popover: {
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        textDecoration: string;
+        '&.is-hovered': {
+            cursor: string;
+        };
+        fontFamily: string;
+        outline: string;
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-pressed': {
+            color: string;
+            textDecoration: string;
+        };
+        '&.is-disabled': {
+            pointerEvents: string;
+        };
+    };
+    web: {
+        textDecoration: string;
+        '&:visited': {
+            color: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        outline: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        '&.is-pressed': {
+            color: string;
+            textDecoration: string;
+        };
+        '&.is-disabled': {
+            pointerEvents: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/components/Link/Link.test.d.ts

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

package/lib/cjs/components/Link/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Link';

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

@@ -3,6 +3,7 @@ export * from './box';
 export * from './button';
 export * from './icon';
 export * from './item';
+export * from './link';
 export * from './loader';
 export * from './popoverContainer';
 export * from './shared';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11;
 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");
@@ -62,8 +62,19 @@ _forEachInstanceProperty(_context5 = _Object$keys(_item)).call(_context5, functi
     }
   });
 });
+var _link = require("./link");
+_forEachInstanceProperty(_context6 = _Object$keys(_link)).call(_context6, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _link[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _link[key];
+    }
+  });
+});
 var _loader = require("./loader");
-_forEachInstanceProperty(_context6 = _Object$keys(_loader)).call(_context6, function (key) {
+_forEachInstanceProperty(_context7 = _Object$keys(_loader)).call(_context7, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -74,7 +85,7 @@ _forEachInstanceProperty(_context6 = _Object$keys(_loader)).call(_context6, func
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context7 = _Object$keys(_popoverContainer)).call(_context7, function (key) {
+_forEachInstanceProperty(_context8 = _Object$keys(_popoverContainer)).call(_context8, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -85,7 +96,7 @@ _forEachInstanceProperty(_context7 = _Object$keys(_popoverContainer)).call(_cont
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context8 = _Object$keys(_shared)).call(_context8, function (key) {
+_forEachInstanceProperty(_context9 = _Object$keys(_shared)).call(_context9, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -96,7 +107,7 @@ _forEachInstanceProperty(_context8 = _Object$keys(_shared)).call(_context8, func
   });
 });
 var _tableCell = require("./tableCell");
-_forEachInstanceProperty(_context9 = _Object$keys(_tableCell)).call(_context9, function (key) {
+_forEachInstanceProperty(_context10 = _Object$keys(_tableCell)).call(_context10, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tableCell[key]) return;
   _Object$defineProperty(exports, key, {
@@ -107,7 +118,7 @@ _forEachInstanceProperty(_context9 = _Object$keys(_tableCell)).call(_context9, f
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context10 = _Object$keys(_text)).call(_context10, function (key) {
+_forEachInstanceProperty(_context11 = _Object$keys(_text)).call(_context11, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TestingAttributes } from './shared/test';
+type AS = Extract<keyof JSX.IntrinsicElements, 'a' | 'span'> | undefined;
+export interface LinkProps extends TestingAttributes {
+    /** Whether the link is disabled. */
+    isDisabled?: boolean;
+    /**  Handler that is called when the press is released over the target. */
+    onPress?: () => void;
+    /**  Specifies the HTML Element */
+    as?: AS;
+    /**  Specifies the location of the URL */
+    href?: string;
+    /**  Specifies the window where the linked page is loaded */
+    target?: string;
+    /** The styling variation of the link. */
+    variant?: string;
+    /** Whether the link is clickable inside a popover in safari */
+    isSafariCompatible?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export {};

package/lib/cjs/types/link.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/utils/designUtils/figmaLinks.d.ts

@@ -52,6 +52,10 @@ export declare const FIGMA_LINKS: {
     };
     callout: {
         default: string;
+        errorStatus: string;
+        success: string;
+        warning: string;
+        withLink: string;
     };
     card: {
         default: string;

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -58,7 +58,11 @@ var FIGMA_LINKS = {
     autofocus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16768&mode=design&t=PX1Q47IuuVvOafDQ-4'
   },
   callout: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289-33201&t=VgqEexa1CXAXfPpp-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A506&mode=dev',
+    errorStatus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289%3A33238&mode=dev',
+    success: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A511&mode=dev',
+    warning: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A501&mode=dev',
+    withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45652%3A1604&mode=dev'
   },
   card: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=335%3A1780&mode=dev',

package/lib/components/Callout/Callout.mdx

@@ -9,7 +9,7 @@ Callouts should contain only 1 or 2 pieces of information and display at the top
 
 ### Required components
 
-This component requires the [Link](./?path=/docs/components-link--default) and [Text](./?path=/docs/components-text--default) components. 
+This component requires the [Text](./?path=/docs/components-text--default) component. 
 
 ### Accessibility
 

package/lib/components/Callout/Callout.stories.js

@@ -37,12 +37,7 @@ export default {
 
 // main
 export var Default = function Default(args) {
-  return ___EmotionJSX(Callout, args, ___EmotionJSX(Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", ___EmotionJSX(Link, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(statuses.DEFAULT, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  return ___EmotionJSX(Callout, args, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
 };
 Default.parameters = {
   design: {
@@ -53,12 +48,13 @@ Default.parameters = {
 export var ErrorStatus = function ErrorStatus() {
   return ___EmotionJSX(Callout, {
     status: statuses.ERROR
-  }, ___EmotionJSX(Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", ___EmotionJSX(Link, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(statuses.ERROR, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat. Etiam at urna erat."));
+};
+ErrorStatus.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.callout.errorStatus
+  }
 };
 
 // Avoiding using Error as the function name due to it being a JS built-in method
@@ -66,20 +62,36 @@ ErrorStatus.storyName = 'Error';
 export var Success = function Success() {
   return ___EmotionJSX(Callout, {
     status: statuses.SUCCESS
-  }, ___EmotionJSX(Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", ___EmotionJSX(Link, {
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
+};
+Success.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.callout.success
+  }
+};
+export var WithLink = function WithLink(args) {
+  return ___EmotionJSX(Callout, args, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.", ' ', ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(statuses.SUCCESS, "-callout"),
+    "aria-label": "".concat(statuses.DEFAULT, "-callout"),
     variant: "app"
-  }, ' ', "Read More")));
+  }, "Learn More")));
+};
+WithLink.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.callout.withLink
+  }
 };
 export var Warning = function Warning() {
   return ___EmotionJSX(Callout, {
     status: statuses.WARNING
-  }, ___EmotionJSX(Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Callout box will grow in height with the content", ___EmotionJSX(Link, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(statuses.WARNING, "-callout"),
-    variant: "app"
-  }, ' ', "Read More")));
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
+};
+Warning.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.callout.warning
+  }
 };

package/lib/components/Link/Link.js

@@ -4,7 +4,6 @@ var _excluded = ["className", "isDisabled", "onPress", "isSafariCompatible"];
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useFocusRing, useLink } from 'react-aria';
 import { useHover, usePress } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { Link as ThemeUILink } from 'theme-ui';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -14,7 +13,7 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
     onPress = props.onPress,
     isSafariCompatible = props.isSafariCompatible,
     others = _objectWithoutProperties(props, _excluded);
-  var linkRef = useRef();
+  var linkRef = useRef(null);
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
@@ -55,26 +54,10 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
     role: "link"
   }, others, mergeProps(hoverProps, pressProps, linkProps, focusProps)));
 });
-Link.propTypes = {
-  /** Whether the link is disabled. */
-  isDisabled: PropTypes.bool,
-  /**  The HTML element used to render the link, e.g. 'a', or 'span'. */
-  as: PropTypes.string,
-  /**  Handler that is called when the press is released over the target. */
-  onPress: PropTypes.func,
-  /**  Specifies the location of the URL */
-  href: PropTypes.string,
-  /**  Specifies the window where the linked page is loaded */
-  target: PropTypes.string,
-  /** The styling variation of the link. */
-  variant: PropTypes.string,
-  /** Whether the link is clickable inside a popover in safari */
-  isSafariCompatible: PropTypes.bool
-};
 Link.defaultProps = {
   isDisabled: false,
-  as: 'a',
-  variant: 'app'
+  variant: 'app',
+  as: 'a'
 };
 Link.displayName = 'Link';
 export default Link;

package/lib/components/Link/Link.stories.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Link } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import LinkReadme from './Link.mdx';
 import variants from './Link.styles';

package/lib/types/index.js

@@ -3,6 +3,7 @@ export * from './box';
 export * from './button';
 export * from './icon';
 export * from './item';
+export * from './link';
 export * from './loader';
 export * from './popoverContainer';
 export * from './shared';

package/lib/types/link.js

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

package/lib/utils/designUtils/figmaLinks.js

@@ -51,7 +51,11 @@ export var FIGMA_LINKS = {
     autofocus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=46454-16768&mode=design&t=PX1Q47IuuVvOafDQ-4'
   },
   callout: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289-33201&t=VgqEexa1CXAXfPpp-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A506&mode=dev',
+    errorStatus: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14289%3A33238&mode=dev',
+    success: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A511&mode=dev',
+    warning: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45647%3A501&mode=dev',
+    withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45652%3A1604&mode=dev'
   },
   card: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=335%3A1780&mode=dev',

package/package.json

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