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

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

@@ -34,7 +34,7 @@ var Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sizeProps = _useTShirtSize.sizeProps;
   var title = props.title || ((0, _typeof2["default"])(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
-  } : null);
+  } : '');
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: IconComponent,
     ref: ref,

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

@@ -74,8 +74,8 @@ export declare const ControlledWithButton: {
         };
     };
 };
-export declare const WithCustomColorsAndIcons: {
-    (args: any): React.JSX.Element;
+export declare const UseReducer: {
+    (): React.JSX.Element;
     parameters: {
         a11y: {
             config: {
@@ -87,7 +87,7 @@ export declare const WithCustomColorsAndIcons: {
         };
     };
 };
-export declare const UseReducer: {
+export declare const UseReducerWithMultipleContainers: {
     (): React.JSX.Element;
     parameters: {
         a11y: {
@@ -100,9 +100,13 @@ export declare const UseReducer: {
         };
     };
 };
-export declare const UseReducerWithMultipleContainers: {
-    (): React.JSX.Element;
+export declare const WithTextStyling: {
+    (args: any): React.JSX.Element;
     parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
         a11y: {
             config: {
                 rules: {
@@ -113,7 +117,24 @@ export declare const UseReducerWithMultipleContainers: {
         };
     };
 };
-export declare const WithTextStyling: {
+export declare const WithLink: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const Customization: {
     (args: any): React.JSX.Element;
     parameters: {
         a11y: {

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

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithTextStyling = exports.WithCustomColorsAndIcons = exports.UseReducerWithMultipleContainers = exports.UseReducer = exports.DefaultDynamic = exports.Default = exports.ControlledWithButton = exports.Controlled = void 0;
+exports["default"] = exports.WithTextStyling = exports.WithLink = exports.UseReducerWithMultipleContainers = exports.UseReducer = exports.DefaultDynamic = exports.Default = exports.Customization = exports.ControlledWithButton = exports.Controlled = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
@@ -66,7 +66,7 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
 var messages = [{
   key: 'message1',
   text: loremText
@@ -86,11 +86,19 @@ var messages = [{
 var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
     key: "message1",
-    "data-id": "message1"
+    "data-id": "message1",
+    status: _statuses["default"].SUCCESS
   }, loremText), (0, _react2.jsx)(_reactStately.Item, {
     key: "message2",
     "data-id": "message2",
-    status: _statuses["default"].SUCCESS
+    status: _statuses["default"].WARNING
+  }, loremText), (0, _react2.jsx)(_reactStately.Item, {
+    key: "message2",
+    "data-id": "message3",
+    status: _statuses["default"].ERROR
+  }, loremText), (0, _react2.jsx)(_reactStately.Item, {
+    key: "message2",
+    "data-id": "message4"
   }, loremText));
 };
 exports.Default = Default;
@@ -207,26 +215,6 @@ ControlledWithButton.parameters = {
     }
   }
 };
-var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
-  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
-    bg: "accent.99",
-    color: "active",
-    icon: _AccountIcon["default"]
-  }, loremText));
-};
-
-// Added to bypass color contrast in safari
-exports.WithCustomColorsAndIcons = WithCustomColorsAndIcons;
-WithCustomColorsAndIcons.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
 var UseReducer = function UseReducer() {
   // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
   // const messagesReducer = messagesReducerCore;
@@ -352,15 +340,7 @@ var WithTextStyling = function WithTextStyling(args) {
     node: (0, _react2.jsx)("strong", null, loremText)
   }, {
     key: 'message2',
-    text: loremText,
-    status: 'success'
-  }, {
-    key: 'message3',
-    text: loremText,
-    status: 'warning'
-  }, {
-    key: 'message4',
-    node: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)("b", null, "Lorem Ipsum! "), loremText),
+    node: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)("b", null, "Lorem Ipsum! "), "dolor sit amet, consectetur adipiscing elit"),
     status: 'error'
   }];
   return (0, _react2.jsx)(_index.Messages, (0, _extends2["default"])({}, args, {
@@ -373,6 +353,54 @@ var WithTextStyling = function WithTextStyling(args) {
 // Added to bypass color contrast in safari
 exports.WithTextStyling = WithTextStyling;
 WithTextStyling.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.messages.withTextStyling
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+var WithLink = function WithLink(args) {
+  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
+    key: "message1"
+  }, loremText, ' ', (0, _react2.jsx)(_index.Link, {
+    href: "https://lorem.ipsum"
+  }, "Learn More")));
+};
+
+// Added to bypass color contrast in safari
+exports.WithLink = WithLink;
+WithLink.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.messages.withLink
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+var Customization = function Customization(args) {
+  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
+    bg: "accent.99",
+    color: "active",
+    icon: _AccountIcon["default"]
+  }, loremText));
+};
+
+// Added to bypass color contrast in safari
+exports.Customization = Customization;
+Customization.parameters = {
   a11y: {
     config: {
       rules: [{

package/lib/cjs/components/Stepper/Stepper.js

@@ -29,7 +29,7 @@ var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/p
 var _Line = _interopRequireDefault(require("./Line"));
 var _Stepper = require("./Stepper.constants");
 var _react2 = require("@emotion/react");
-var _excluded = ["activeStep", "onStepChange", "tabListProps"];
+var _excluded = ["activeStep", "onStepChange", "tabListProps", "tooltipProps"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -41,6 +41,7 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var activeStep = props.activeStep,
     onStepChange = props.onStepChange,
     tabListProps = props.tabListProps,
+    tooltipProps = props.tooltipProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _list.useSingleSelectListState)(props);
   var getStatus = function getStatus(i) {
@@ -88,7 +89,8 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       title: step,
       "aria-label": textValue,
       content: item.rendered,
-      separator: !isFirst && line
+      separator: !isFirst && line,
+      tooltipTriggerProps: tooltipProps
     });
     isFirst = isFirst && !container;
     return container;
@@ -124,7 +126,8 @@ Stepper.propTypes = {
   */
   onStepChange: _propTypes["default"].func,
   /** A props object that is subsequently spread into the rendered tablist. */
-  tabListProps: _propTypes["default"].shape({})
+  tabListProps: _propTypes["default"].shape({}),
+  tooltipProps: _propTypes["default"].shape({})
 };
 Stepper.defaultProps = {
   activeStep: 1

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Panel = exports.DisabledToolTips = exports.Default = exports.ControlledStepper = void 0;
+exports["default"] = exports.WithCustomTooltip = exports.Panel = exports.DisabledToolTips = exports.Default = exports.ControlledStepper = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -180,6 +180,46 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.stepper["default"]
   }
 };
+var WithCustomTooltip = function WithCustomTooltip(args) {
+  return (0, _react2.jsx)(_index.Stepper, (0, _extends2["default"])({}, args, {
+    items: steps,
+    tooltipProps: {
+      direction: 'left',
+      offset: 15
+    }
+  }), (0, _react2.jsx)(_reactStately.Item, {
+    key: "step1",
+    textValue: "Duis Aute"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.contentContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
+    fontSize: "md"
+  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_reactStately.Item, {
+    key: "step2",
+    textValue: "Lorem Ipsum"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.contentContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
+    fontSize: "md"
+  }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_reactStately.Item, {
+    key: "step3",
+    textValue: "Excepteur Sint"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.contentContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
+    fontSize: "md"
+  }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
+};
+exports.WithCustomTooltip = WithCustomTooltip;
 var ControlledStepper = function ControlledStepper() {
   var _useState = (0, _react.useState)(2),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),

package/lib/cjs/components/Tab/Tab.js

@@ -34,8 +34,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabsDisabled = props.isDisabled,
     orientation = props.orientation,
     mode = props.mode,
-    slots = props.slots,
-    tooltipTriggerProps = props.tooltipTriggerProps;
+    slots = props.slots;
   var key = item.key,
     rendered = item.rendered,
     itemProps = item.props;
@@ -69,11 +68,10 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     className: classNames,
     variant: "tab"
-    // title={itemProps?.titleAttr || undefined}
   }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), (0, _pendoID.getPendoID)('Tab'), {
-    // {...otherItemProps}
     ref: tabRef
   }, itemProps, {
+    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue,
     role: "tab"
   }), (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     variant: "tabLabel"
@@ -88,7 +86,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), itemProps));
   }
   if (mode === 'tooltip') {
-    return (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, (0, _react2.jsx)(_.TooltipTrigger, (0, _extends2["default"])({}, tooltipTriggerProps, {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, (0, _react2.jsx)(_.TooltipTrigger, (0, _extends2["default"])({}, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
     }), (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)("span", null, tab)), (0, _react2.jsx)(_.Tooltip, null, (itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue) || (itemProps === null || itemProps === void 0 ? void 0 : itemProps.title))));
   }

package/lib/cjs/hooks/useField/useField.d.ts

@@ -142,6 +142,10 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         isSelected?: boolean | undefined;
         isUnavailable?: boolean | undefined;
         hidden?: boolean | undefined;
+        title?: string | {
+            id?: string | undefined;
+            name: string;
+        } | undefined;
         variant?: string | undefined;
         as?: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | React.ComponentClass<any, any> | React.FunctionComponent<any> | null | undefined;
         style?: string | React.CSSProperties | undefined;

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

@@ -1,5 +1,9 @@
 import { StylePropertyValue } from 'theme-ui';
 import { DOMAttributes, StyleProps } from './shared';
+type BoxIconTitleProps = {
+    id?: string;
+    name: string;
+};
 export interface BoxProps extends StyleProps, DOMAttributes {
     id?: string;
     /** The background color of the box. */
@@ -14,4 +18,6 @@ export interface BoxProps extends StyleProps, DOMAttributes {
     isSelected?: boolean;
     isUnavailable?: boolean;
     hidden?: boolean;
+    title?: string | BoxIconTitleProps;
 }
+export {};

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

@@ -2,6 +2,7 @@ import { ElementType, ReactNode } from 'react';
 import { ThemeUICSSProperties } from 'theme-ui';
 import { TestingAttributes } from './shared/test';
 import { DOMAttributes, OrientationProps, StyleProps } from './shared';
+import { TooltipTriggerProps } from './tooltipTrigger';
 export interface TabProps extends StyleProps, DOMAttributes, OrientationProps, TestingAttributes {
     isDisabled?: boolean;
     item: {
@@ -17,6 +18,7 @@ export interface TabProps extends StyleProps, DOMAttributes, OrientationProps, T
             title: string;
             separator: Element | boolean;
             list: object[];
+            tooltipTriggerProps?: TooltipTriggerProps;
         };
         rendered?: string | ReactNode;
     };

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -115,6 +115,8 @@ export declare const FIGMA_LINKS: {
     };
     messages: {
         default: string;
+        withTextStyling: string;
+        withLink: string;
     };
     modal: {
         default: string;

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

@@ -121,7 +121,9 @@ var FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=12726-41720&t=8Wwd3tIBh3GEjCJB-0'
   },
   messages: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14579-33504&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-6582&t=hqi8rId3S2ABv1E0-4',
+    withTextStyling: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-9032&t=LVprZy9fVRpCA9Jd-4',
+    withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-9074&t=LVprZy9fVRpCA9Jd-4'
   },
   modal: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=7513-27244&t=8Wwd3tIBh3GEjCJB-0'

package/lib/components/Icon/Icon.js

@@ -23,7 +23,7 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
     sizeProps = _useTShirtSize.sizeProps;
   var title = props.title || (_typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
-  } : null);
+  } : '');
   return ___EmotionJSX(Box, _extends({
     as: IconComponent,
     ref: ref,

package/lib/components/Messages/Messages.stories.js

@@ -20,7 +20,7 @@ import { Item } from 'react-stately';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Button, Messages } from '../../index';
+import { Box, Button, Link, Messages } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
@@ -53,7 +53,7 @@ export default {
     }
   }
 };
-var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
 var messages = [{
   key: 'message1',
   text: loremText
@@ -73,11 +73,19 @@ var messages = [{
 export var Default = function Default(args) {
   return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
     key: "message1",
-    "data-id": "message1"
+    "data-id": "message1",
+    status: statuses.SUCCESS
   }, loremText), ___EmotionJSX(Item, {
     key: "message2",
     "data-id": "message2",
-    status: statuses.SUCCESS
+    status: statuses.WARNING
+  }, loremText), ___EmotionJSX(Item, {
+    key: "message2",
+    "data-id": "message3",
+    status: statuses.ERROR
+  }, loremText), ___EmotionJSX(Item, {
+    key: "message2",
+    "data-id": "message4"
   }, loremText));
 };
 Default.parameters = {
@@ -190,25 +198,6 @@ ControlledWithButton.parameters = {
     }
   }
 };
-export var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
-  return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
-    bg: "accent.99",
-    color: "active",
-    icon: AccountIcon
-  }, loremText));
-};
-
-// Added to bypass color contrast in safari
-WithCustomColorsAndIcons.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
 export var UseReducer = function UseReducer() {
   // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
   // const messagesReducer = messagesReducerCore;
@@ -332,15 +321,7 @@ export var WithTextStyling = function WithTextStyling(args) {
     node: ___EmotionJSX("strong", null, loremText)
   }, {
     key: 'message2',
-    text: loremText,
-    status: 'success'
-  }, {
-    key: 'message3',
-    text: loremText,
-    status: 'warning'
-  }, {
-    key: 'message4',
-    node: ___EmotionJSX(React.Fragment, null, ___EmotionJSX("b", null, "Lorem Ipsum! "), loremText),
+    node: ___EmotionJSX(React.Fragment, null, ___EmotionJSX("b", null, "Lorem Ipsum! "), "dolor sit amet, consectetur adipiscing elit"),
     status: 'error'
   }];
   return ___EmotionJSX(Messages, _extends({}, args, {
@@ -352,6 +333,52 @@ export var WithTextStyling = function WithTextStyling(args) {
 
 // Added to bypass color contrast in safari
 WithTextStyling.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.messages.withTextStyling
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+export var WithLink = function WithLink(args) {
+  return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
+    key: "message1"
+  }, loremText, ' ', ___EmotionJSX(Link, {
+    href: "https://lorem.ipsum"
+  }, "Learn More")));
+};
+
+// Added to bypass color contrast in safari
+WithLink.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.messages.withLink
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+export var Customization = function Customization(args) {
+  return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
+    bg: "accent.99",
+    color: "active",
+    icon: AccountIcon
+  }, loremText));
+};
+
+// Added to bypass color contrast in safari
+Customization.parameters = {
   a11y: {
     config: {
       rules: [{

package/lib/components/Stepper/Stepper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["activeStep", "onStepChange", "tabListProps"];
+var _excluded = ["activeStep", "onStepChange", "tabListProps", "tooltipProps"];
 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 _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -30,6 +30,7 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
   var activeStep = props.activeStep,
     onStepChange = props.onStepChange,
     tabListProps = props.tabListProps,
+    tooltipProps = props.tooltipProps,
     others = _objectWithoutProperties(props, _excluded);
   var state = useSingleSelectListState(props);
   var getStatus = function getStatus(i) {
@@ -77,7 +78,8 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
       title: step,
       "aria-label": textValue,
       content: item.rendered,
-      separator: !isFirst && line
+      separator: !isFirst && line,
+      tooltipTriggerProps: tooltipProps
     });
     isFirst = isFirst && !container;
     return container;
@@ -113,7 +115,8 @@ Stepper.propTypes = {
   */
   onStepChange: PropTypes.func,
   /** A props object that is subsequently spread into the rendered tablist. */
-  tabListProps: PropTypes.shape({})
+  tabListProps: PropTypes.shape({}),
+  tooltipProps: PropTypes.shape({})
 };
 Stepper.defaultProps = {
   activeStep: 1

package/lib/components/Stepper/Stepper.stories.js

@@ -164,6 +164,45 @@ Default.parameters = {
     url: FIGMA_LINKS.stepper["default"]
   }
 };
+export var WithCustomTooltip = function WithCustomTooltip(args) {
+  return ___EmotionJSX(Stepper, _extends({}, args, {
+    items: steps,
+    tooltipProps: {
+      direction: 'left',
+      offset: 15
+    }
+  }), ___EmotionJSX(Item, {
+    key: "step1",
+    textValue: "Duis Aute"
+  }, ___EmotionJSX(Box, {
+    sx: sx.contentContainer
+  }, ___EmotionJSX(Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Duis Aute"), ___EmotionJSX(Text, {
+    fontSize: "md"
+  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
+    key: "step2",
+    textValue: "Lorem Ipsum"
+  }, ___EmotionJSX(Box, {
+    sx: sx.contentContainer
+  }, ___EmotionJSX(Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Lorem Ipsum"), ___EmotionJSX(Text, {
+    fontSize: "md"
+  }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
+    key: "step3",
+    textValue: "Excepteur Sint"
+  }, ___EmotionJSX(Box, {
+    sx: sx.contentContainer
+  }, ___EmotionJSX(Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Excepteur Sint"), ___EmotionJSX(Text, {
+    fontSize: "md"
+  }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
+};
 export var ControlledStepper = function ControlledStepper() {
   var _useState = useState(2),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/components/Tab/Tab.js

@@ -21,8 +21,7 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
     tabsDisabled = props.isDisabled,
     orientation = props.orientation,
     mode = props.mode,
-    slots = props.slots,
-    tooltipTriggerProps = props.tooltipTriggerProps;
+    slots = props.slots;
   var key = item.key,
     rendered = item.rendered,
     itemProps = item.props;
@@ -56,11 +55,10 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, ___EmotionJSX(Box, _extends({
     className: classNames,
     variant: "tab"
-    // title={itemProps?.titleAttr || undefined}
   }, mergeProps(focusProps, hoverProps, tabProps), getPendoID('Tab'), {
-    // {...otherItemProps}
     ref: tabRef
   }, itemProps, {
+    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue,
     role: "tab"
   }), ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, ___EmotionJSX(Text, _extends({
     variant: "tabLabel"
@@ -75,7 +73,7 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
     }, mergeProps(focusProps, hoverProps, tabProps), itemProps));
   }
   if (mode === 'tooltip') {
-    return ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, ___EmotionJSX(TooltipTrigger, _extends({}, tooltipTriggerProps, {
+    return ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, ___EmotionJSX(TooltipTrigger, _extends({}, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
     }), ___EmotionJSX(Pressable, null, ___EmotionJSX("span", null, tab)), ___EmotionJSX(Tooltip, null, (itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue) || (itemProps === null || itemProps === void 0 ? void 0 : itemProps.title))));
   }

package/lib/utils/designUtils/figmaLinks.js

@@ -114,7 +114,9 @@ export var FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=12726-41720&t=8Wwd3tIBh3GEjCJB-0'
   },
   messages: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14579-33504&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-6582&t=hqi8rId3S2ABv1E0-4',
+    withTextStyling: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-9032&t=LVprZy9fVRpCA9Jd-4',
+    withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=52857-9074&t=LVprZy9fVRpCA9Jd-4'
   },
   modal: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=7513-27244&t=8Wwd3tIBh3GEjCJB-0'

package/package.json

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