@pingux/astro 2.40.1 → 2.41.0-alpha.1

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/components/Separator/Separator.d.ts

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

package/lib/cjs/components/Separator/Separator.js

@@ -13,7 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _Box = _interopRequireDefault(require("../Box/Box"));
@@ -25,7 +24,7 @@ var Separator = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
     orientation = props.orientation,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useSeparator = (0, _reactAria.useSeparator)(props, ref),
+  var _useSeparator = (0, _reactAria.useSeparator)(props),
     separatorProps = _useSeparator.separatorProps;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       'is-vertical': orientation === _orientation["default"].VERTICAL,
@@ -36,15 +35,10 @@ var Separator = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     className: classNames,
     variant: "separator.base"
-  }, others, separatorProps));
+  }, others, separatorProps, {
+    role: "separator"
+  }));
 });
-Separator.propTypes = {
-  /** Sets horizontal or vertical orientation of the divider. If
-  * vertical orientation is specified, the parent container must have the following styles:
-  * a defined height, flexDirection="row" alignItems="center"
-  */
-  orientation: _propTypes["default"].oneOf(['vertical', 'horizontal'])
-};
 Separator.defaultProps = {
   orientation: 'horizontal'
 };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { SeparatorProps } from '../../types';
+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<SeparatorProps>;
+export declare const verticalSeparator: () => React.JSX.Element;

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

@@ -12,7 +12,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 _Separator = _interopRequireDefault(require("./Separator.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {

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

@@ -0,0 +1,44 @@
+declare const _default: {
+    base: {
+        bg: string;
+        width: string;
+        height: string;
+        my: string;
+        flexShrink: number;
+        '&.is-vertical': {
+            width: string;
+            height: string;
+            mx: string;
+        };
+    };
+    navBarSeparator: {
+        width: string;
+        my: string;
+        mx: string;
+        backgroundColor: string;
+        bg: string;
+        height: string;
+        flexShrink: number;
+        '&.is-vertical': {
+            width: string;
+            height: string;
+            mx: string;
+        };
+    };
+    navBarSubtitleSeparator: {
+        ml: string;
+        width: string;
+        my: string;
+        mx: string;
+        backgroundColor: string;
+        bg: string;
+        height: string;
+        flexShrink: number;
+        '&.is-vertical': {
+            width: string;
+            height: string;
+            mx: string;
+        };
+    };
+};
+export default _default;

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

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

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

@@ -3,29 +3,55 @@
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
-var _Separator = _interopRequireDefault(require("./Separator"));
+var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var testId = 'test-separator';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'orientation': 'horizontal'
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_Separator["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
 };
 
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({
   renderComponent: function renderComponent(props) {
-    return (0, _react2.jsx)(_Separator["default"], (0, _extends2["default"])({}, defaultProps, props));
+    return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props));
   }
 });
-test('renders Separator component', function () {
-  getComponent();
-  var separator = _testWrapper.screen.getByTestId(testId);
-  _testWrapper.screen.getByRole('separator');
-  expect(separator).toBeInstanceOf(HTMLDivElement);
-  expect(separator).toBeInTheDocument();
+describe('Separator component', function () {
+  test('renders Separator component', function () {
+    getComponent();
+    var separator = _testWrapper.screen.getByTestId(testId);
+    _testWrapper.screen.getByRole('separator');
+    expect(separator).toBeInstanceOf(HTMLDivElement);
+    expect(separator).toBeInTheDocument();
+    expect(separator).toHaveClass('is-horizontal');
+  });
+  test('Separator as a horizontal', function () {
+    getComponent({
+      orientation: 'horizontal'
+    });
+    var separator = _testWrapper.screen.getByTestId(testId);
+    expect(separator).toHaveClass('is-horizontal');
+  });
+  test('Separator vertical orientation', function () {
+    getComponent({
+      orientation: 'vertical'
+    });
+    var separator = _testWrapper.screen.getByTestId(testId);
+    expect(separator).toHaveAttribute('aria-orientation', _orientation["default"].VERTICAL);
+  });
+  test('applies custom className if provided', function () {
+    getComponent({
+      className: 'custom-class'
+    });
+    var separator = _testWrapper.screen.getByTestId(testId);
+    expect(separator).toHaveClass('custom-class');
+  });
 });

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

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

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

@@ -3,8 +3,10 @@ export * from './box';
 export * from './button';
 export * from './icon';
 export * from './item';
+export * from './link';
 export * from './loader';
 export * from './popoverContainer';
+export * from './separator';
 export * from './shared';
 export * from './tableCell';
 export * from './text';

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, _context12;
 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, {
@@ -84,8 +95,19 @@ _forEachInstanceProperty(_context7 = _Object$keys(_popoverContainer)).call(_cont
     }
   });
 });
+var _separator = require("./separator");
+_forEachInstanceProperty(_context9 = _Object$keys(_separator)).call(_context9, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _separator[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _separator[key];
+    }
+  });
+});
 var _shared = require("./shared");
-_forEachInstanceProperty(_context8 = _Object$keys(_shared)).call(_context8, function (key) {
+_forEachInstanceProperty(_context10 = _Object$keys(_shared)).call(_context10, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -96,7 +118,7 @@ _forEachInstanceProperty(_context8 = _Object$keys(_shared)).call(_context8, func
   });
 });
 var _tableCell = require("./tableCell");
-_forEachInstanceProperty(_context9 = _Object$keys(_tableCell)).call(_context9, function (key) {
+_forEachInstanceProperty(_context11 = _Object$keys(_tableCell)).call(_context11, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tableCell[key]) return;
   _Object$defineProperty(exports, key, {
@@ -107,7 +129,7 @@ _forEachInstanceProperty(_context9 = _Object$keys(_tableCell)).call(_context9, f
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context10 = _Object$keys(_text)).call(_context10, function (key) {
+_forEachInstanceProperty(_context12 = _Object$keys(_text)).call(_context12, 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/types/separator.d.ts

@@ -0,0 +1,4 @@
+import { TestingAttributes } from './shared/test';
+import { DOMAttributes, OrientationProps, StyleProps } from './shared';
+export interface SeparatorProps extends StyleProps, DOMAttributes, TestingAttributes, OrientationProps {
+}

package/lib/cjs/types/separator.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/shared/index.d.ts

@@ -1,4 +1,5 @@
 export * from './dom';
 export * from './events';
+export * from './orientation';
 export * from './style';
 export * from './utils';

package/lib/cjs/types/shared/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4;
+var _context, _context2, _context3, _context4, _context5;
 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");
@@ -29,8 +29,19 @@ _forEachInstanceProperty(_context2 = _Object$keys(_events)).call(_context2, func
     }
   });
 });
+var _orientation = require("./orientation");
+_forEachInstanceProperty(_context3 = _Object$keys(_orientation)).call(_context3, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _orientation[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _orientation[key];
+    }
+  });
+});
 var _style = require("./style");
-_forEachInstanceProperty(_context3 = _Object$keys(_style)).call(_context3, function (key) {
+_forEachInstanceProperty(_context4 = _Object$keys(_style)).call(_context4, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _style[key]) return;
   _Object$defineProperty(exports, key, {
@@ -41,7 +52,7 @@ _forEachInstanceProperty(_context3 = _Object$keys(_style)).call(_context3, funct
   });
 });
 var _utils = require("./utils");
-_forEachInstanceProperty(_context4 = _Object$keys(_utils)).call(_context4, function (key) {
+_forEachInstanceProperty(_context5 = _Object$keys(_utils)).call(_context5, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _utils[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/shared/orientation.d.ts

@@ -0,0 +1,4 @@
+export interface OrientationProps {
+    /** The orientation of the component. */
+    orientation?: 'vertical' | 'horizontal';
+}

package/lib/cjs/types/shared/orientation.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/components/Separator/Separator.js

@@ -3,7 +3,6 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["className", "orientation"];
 import React, { forwardRef } from 'react';
 import { useSeparator } from 'react-aria';
-import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import Box from '../Box/Box';
@@ -12,7 +11,7 @@ var Separator = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     orientation = props.orientation,
     others = _objectWithoutProperties(props, _excluded);
-  var _useSeparator = useSeparator(props, ref),
+  var _useSeparator = useSeparator(props),
     separatorProps = _useSeparator.separatorProps;
   var _useStatusClasses = useStatusClasses(className, {
       'is-vertical': orientation === ORIENTATION.VERTICAL,
@@ -23,15 +22,10 @@ var Separator = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     className: classNames,
     variant: "separator.base"
-  }, others, separatorProps));
+  }, others, separatorProps, {
+    role: "separator"
+  }));
 });
-Separator.propTypes = {
-  /** Sets horizontal or vertical orientation of the divider. If
-  * vertical orientation is specified, the parent container must have the following styles:
-  * a defined height, flexDirection="row" alignItems="center"
-  */
-  orientation: PropTypes.oneOf(['vertical', 'horizontal'])
-};
 Separator.defaultProps = {
   orientation: 'horizontal'
 };

package/lib/components/Separator/Separator.stories.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Separator } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import SeparatorReadme from './Separator.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/components/Separator/Separator.test.js

@@ -1,12 +1,14 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
-import Separator from './Separator';
+import Separator from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-separator';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'orientation': 'horizontal'
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -19,10 +21,34 @@ universalComponentTests({
     return ___EmotionJSX(Separator, _extends({}, defaultProps, props));
   }
 });
-test('renders Separator component', function () {
-  getComponent();
-  var separator = screen.getByTestId(testId);
-  screen.getByRole('separator');
-  expect(separator).toBeInstanceOf(HTMLDivElement);
-  expect(separator).toBeInTheDocument();
+describe('Separator component', function () {
+  test('renders Separator component', function () {
+    getComponent();
+    var separator = screen.getByTestId(testId);
+    screen.getByRole('separator');
+    expect(separator).toBeInstanceOf(HTMLDivElement);
+    expect(separator).toBeInTheDocument();
+    expect(separator).toHaveClass('is-horizontal');
+  });
+  test('Separator as a horizontal', function () {
+    getComponent({
+      orientation: 'horizontal'
+    });
+    var separator = screen.getByTestId(testId);
+    expect(separator).toHaveClass('is-horizontal');
+  });
+  test('Separator vertical orientation', function () {
+    getComponent({
+      orientation: 'vertical'
+    });
+    var separator = screen.getByTestId(testId);
+    expect(separator).toHaveAttribute('aria-orientation', ORIENTATION.VERTICAL);
+  });
+  test('applies custom className if provided', function () {
+    getComponent({
+      className: 'custom-class'
+    });
+    var separator = screen.getByTestId(testId);
+    expect(separator).toHaveClass('custom-class');
+  });
 });

package/lib/types/index.js

@@ -3,8 +3,10 @@ export * from './box';
 export * from './button';
 export * from './icon';
 export * from './item';
+export * from './link';
 export * from './loader';
 export * from './popoverContainer';
+export * from './separator';
 export * from './shared';
 export * from './tableCell';
 export * from './text';

package/lib/types/link.js

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

package/lib/types/separator.js

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

package/lib/types/shared/index.js

@@ -1,4 +1,5 @@
 export * from './dom';
 export * from './events';
+export * from './orientation';
 export * from './style';
 export * from './utils';

package/lib/types/shared/orientation.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.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",